/* ==========================================================================
   DUFFAM BRAND SYSTEM — shared stylesheet
   Source of truth: DuffAM Branding and BusDev/memory/brand-identity.md
   Built: 2026-07-18 (Step 6 of the website-redesign walkthrough)

   Purpose: one file, one set of token names, instead of the slightly
   different --ink2/--ink-2, --gold2/--gold-hi variants copy-pasted with
   small drift across the existing blog post HTML files. Every new page
   (About now, Portfolio later, any future Netlify page) should link this
   file instead of embedding its own <style> block from scratch.

   Required in <head> alongside this file:
   <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap" rel="stylesheet">
   ========================================================================== */

/* ---- Tokens (canonical names — do not rename per-page) ---- */
:root{
  --ink:#1a1a18;         /* primary background */
  --ink-deep:#111110;    /* deepest background / nav */
  --ink-2:#23221f;       /* card backgrounds */
  --ink-3:#2c2a26;       /* subtle card variant */
  --gold:#c8993a;        /* primary accent — borders, badges, CTAs */
  --gold-hi:#e8c06a;     /* highlighted text, headings, hover states */
  --gold-dim:#8a6a20;    /* muted gold, rules, nav border */
  --cream:#d8d4c8;       /* body text */
  --cream-dim:#9a9588;   /* muted/secondary text */
  --muted:#6a6860;       /* tertiary text */
  --card-border:#38382e; /* card/rule borders */
  --red:#b85a3a;         /* warnings, failure modes, "don't do" callouts */
  --blue-water:#4090b0;  /* data/moisture/water-related callouts */
  --green:#5a9a6a;       /* extension beyond brand-identity.md — success/lever states, used sparingly */
}

/* ---- Reset & base type ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:'DM Sans',sans-serif;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--gold)}

/* ---- Nav ---- */
nav{
  position:sticky;top:0;z-index:100;
  background:rgba(26,26,24,.97);
  border-bottom:1px solid var(--card-border);
  backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;height:54px;
}
.nav-brand{color:var(--gold);font-family:'DM Serif Display',serif;font-weight:400;font-size:16px;text-decoration:none;letter-spacing:.02em}
.nav-brand .dot{color:var(--gold-hi)}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{color:var(--muted);text-decoration:none;font-size:13.5px;transition:color .18s}
.nav-links a:hover{color:var(--cream)}
.nav-cta{background:var(--gold);color:var(--ink)!important;font-weight:600;font-size:13px!important;padding:7px 16px;border-radius:4px}
.nav-cta:hover{background:var(--gold-hi)!important}

/* ---- Hero ---- */
.hero{padding:72px 24px 52px;max-width:780px;margin:0 auto;text-align:center}
.series-badge{display:inline-block;background:var(--gold);color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 14px;border-radius:2px;margin-bottom:20px}
.hero h1{font-family:'DM Serif Display',serif;font-size:clamp(28px,5vw,46px);line-height:1.15;color:var(--cream)}
.hero h1 em{font-style:italic;color:var(--gold-hi)}
.hero p.dek{margin-top:16px;color:var(--cream-dim);font-size:16px}
.hero-divider{width:64px;height:3px;background:var(--gold);margin:24px auto 0}

/* ---- Article / prose ---- */
article{max-width:740px;margin:0 auto;padding:0 24px 80px}
.section-label{font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--gold);text-transform:uppercase;margin-top:52px;margin-bottom:6px;display:block}
.section-rule{border:none;border-top:1px solid var(--gold);opacity:.35;margin-bottom:22px}
article h2{font-family:'DM Serif Display',serif;font-size:24px;color:var(--cream);margin-bottom:16px}
article p{margin-bottom:18px}
article strong{color:var(--gold-hi);font-weight:600}
article em{color:var(--cream);font-style:italic}

/* ---- Callout block (generic — was .callout-pctg per-post, now reusable) ---- */
.callout{background:var(--ink-2);border-left:4px solid var(--gold);border-radius:0 6px 6px 0;padding:22px 26px;margin:36px 0}
.callout .callout-label{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.callout p{margin-bottom:0;font-size:15.5px;line-height:1.65}
.callout--warning{border-left-color:var(--red)}
.callout--warning .callout-label{color:var(--red)}
.callout--water{border-left-color:var(--blue-water)}
.callout--water .callout-label{color:var(--blue-water)}

/* ---- Two-up comparison cards ---- */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0}
.info-card{background:var(--ink-2);border:1px solid var(--card-border);border-radius:6px;padding:16px 20px}
.info-card.low{border-top:3px solid var(--red)}
.info-card.high{border-top:3px solid var(--gold)}
.info-card h4{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.info-card.low h4{color:var(--red)}
.info-card.high h4{color:var(--gold)}
.info-card ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}
.info-card ul li{font-size:14.5px;color:var(--cream);padding-left:14px;position:relative}
.info-card ul li::before{content:'·';position:absolute;left:0;color:var(--muted)}

/* ---- Numbered method / step list ---- */
.method-list{list-style:none;padding:0;margin:24px 0;display:flex;flex-direction:column;gap:14px}
.method-list li{display:flex;gap:14px;background:var(--ink-2);border-radius:6px;padding:16px 20px;border:1px solid var(--card-border)}
.method-num{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--gold);color:var(--ink);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;margin-top:2px}
.method-body{flex:1}
.method-body strong{display:block;margin-bottom:4px}

/* ---- Checklist ---- */
.checklist{background:var(--ink-3);border:1px solid var(--card-border);border-radius:6px;padding:18px 22px;margin:24px 0;list-style:none}
.checklist li{padding:5px 0 5px 22px;position:relative;font-size:15px;border-bottom:1px solid var(--card-border)}
.checklist li:last-child{border-bottom:none}
.checklist li::before{content:'✓';position:absolute;left:0;color:var(--gold);font-weight:700}

/* ---- Figures ---- */
.figure{margin:32px 0}
.figure img,.figure .svg-wrap{width:100%;border-radius:6px;border:1px solid var(--card-border)}
.figure figcaption{margin-top:9px;font-size:13px;color:var(--muted);text-align:center}

/* ---- CTA strip ---- */
.cta-strip{background:linear-gradient(135deg,#1e1e1c,#252520);border:1px solid var(--gold);border-radius:10px;padding:36px 40px;margin:56px auto 0;max-width:740px;text-align:center}
.cta-strip h3{font-family:'DM Serif Display',serif;font-size:22px;color:var(--cream);margin-bottom:10px}
.cta-strip p{color:var(--muted);font-size:15px;margin-bottom:24px}
.cta-btn{display:inline-block;background:var(--gold);color:var(--ink);font-weight:700;font-size:14px;letter-spacing:.04em;padding:13px 32px;border-radius:5px;text-decoration:none;transition:background .18s}
.cta-btn:hover{background:var(--gold-hi)}

/* ---- Footer ---- */
footer{border-top:1px solid var(--card-border);padding:32px 24px;text-align:center;color:var(--muted);font-size:13px;margin-top:60px}
footer a{color:var(--gold);text-decoration:none}
footer a:hover{color:var(--gold-hi)}

/* ---- Responsive ---- */
@media(max-width:600px){
  .info-grid{grid-template-columns:1fr}
  nav{padding:0 18px}
  .nav-links{gap:16px}
}
