/* ============================================================
   John McGowan — site styles
   "Warm Editorial": Bitter 600 headlines, Source Sans 3 body.
   Palette locked 2026-06-30. Clean static rebuild 2026-07-28 (Rem).
   Edit content in the .html files; edit look here.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@600&family=Source+Sans+3:wght@400;600&display=swap');

:root{
  /* palette (locked 2026-06-30) */
  --ivory:#F8F4E3; --forest:#587A56; --clay:#E4A449; --graphite:#2C2C2C;
  --forest-light:#8FAE8D; --warm-white:#FFFDF4; --forest-deep:#4A6848;
  /* semantic */
  --surface-page:var(--ivory); --surface-card:var(--warm-white);
  --text-body:var(--graphite); --text-muted:rgba(44,44,44,.62);
  --text-on-forest:var(--ivory); --text-on-forest-muted:rgba(248,244,227,.75);
  --border-hairline:rgba(44,44,44,.16); --border-hairline-on-forest:rgba(248,244,227,.25);
  /* type */
  --font-display:'Bitter',Georgia,serif;
  --font-body:'Source Sans 3','Source Sans Pro',-apple-system,BlinkMacSystemFont,sans-serif;
  --text-eyebrow-size:12.5px; --text-eyebrow-tracking:.14em; --tracking-wordmark:-0.01em;
  /* shape */
  --radius-card:8px; --radius-button:6px; --radius-chip:3px;
  /* layout */
  --pad-x:clamp(20px,5vw,64px);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--surface-page); color:var(--text-body);
  font-family:var(--font-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
h1,h2,h3,p,ul{margin:0;}
a{color:var(--forest); text-decoration-color:var(--clay); text-decoration-thickness:2px; text-underline-offset:3px;}
a:hover{color:var(--graphite);}

/* ---- type helpers ---- */
.display{font-family:var(--font-display); font-weight:600; letter-spacing:-0.015em; line-height:1.06;}
.eyebrow{font-family:var(--font-body); font-weight:600; font-size:var(--text-eyebrow-size);
  letter-spacing:var(--text-eyebrow-tracking); text-transform:uppercase; color:var(--forest);}
.section--forest .eyebrow{color:var(--text-on-forest-muted);}
.link-inline{font-weight:600; font-size:16px;}
.link-strong{font-weight:600; font-size:16px; color:var(--graphite); text-decoration:underline; text-underline-offset:4px;}

/* ---- compact header (inner pages) ---- */
.site-header{background:var(--forest); display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; padding:20px var(--pad-x);}
.wordmark{font-family:var(--font-display); font-weight:600; font-size:clamp(21px,2.4vw,27px);
  letter-spacing:var(--tracking-wordmark); color:var(--ivory); text-decoration:none;}
.nav{display:flex; gap:clamp(16px,3vw,32px); align-items:center; font-weight:600; font-size:15px; flex-wrap:wrap;}
.nav a{color:var(--ivory); text-decoration:none;}
.nav a:hover{color:var(--ivory); text-decoration:underline; text-underline-offset:5px;}
.nav a.active{color:var(--ivory); text-decoration:underline; text-underline-offset:5px;}

/* ---- home hero ---- */
.home-hero{background:var(--forest); padding:20px var(--pad-x) clamp(40px,5vw,64px);
  display:flex; flex-direction:column; gap:clamp(32px,5vw,56px);}
.home-hero .nav{justify-content:flex-end;}
.home-hero__title{display:flex; flex-direction:column; gap:24px;}
.wordmark-xl{font-family:var(--font-display); font-weight:600; font-size:clamp(38px,9vw,118px);
  line-height:.98; letter-spacing:-0.02em; color:var(--ivory); text-decoration:none; word-break:break-word;}
.pillars{display:flex; flex-wrap:wrap; gap:12px 32px; align-items:center;}
.pillars .eyebrow{color:var(--text-on-forest);}

/* ---- hero image band ---- */
.hero-img{position:relative; width:100%; aspect-ratio:1672/941; min-height:300px; max-height:740px; overflow:hidden;}
.hero-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% 4%;}

/* ---- disclosure line ---- */
.disclosure{margin:0; padding:16px var(--pad-x); font-size:13.5px; color:var(--text-muted);
  border-bottom:1px solid var(--border-hairline);}

/* ---- sections ---- */
.section{padding:clamp(56px,7vw,96px) var(--pad-x);}
.section--tight{padding:clamp(48px,7vw,88px) var(--pad-x);}
.section--divider{border-bottom:1px solid var(--border-hairline);}
.section--forest{background:var(--forest); color:var(--text-on-forest);}
.section--forest h1,.section--forest h2{color:var(--ivory);}
.section__title{font-family:var(--font-display); font-weight:600; font-size:clamp(28px,3.4vw,40px);
  line-height:1.14; letter-spacing:-0.01em; margin:0 0 48px; max-width:24ch;}

/* split (title + body) */
.split{display:flex; flex-wrap:wrap; gap:clamp(32px,5vw,64px); align-items:flex-start;}
.split__title{flex:1 1 380px; max-width:16ch; font-size:clamp(40px,5.6vw,68px); line-height:1.06;}
.split__body{flex:1 1 360px; display:flex; flex-direction:column; gap:28px; max-width:52ch;}
.lead{font-size:19px; line-height:1.6;}
.actions{display:flex; flex-wrap:wrap; gap:24px; align-items:center;}

/* ---- topics (editorial numbered index) ---- */
.topics{border-top:1px solid var(--border-hairline); max-width:900px;}
.topic{display:grid; grid-template-columns:52px 1fr; gap:clamp(16px,3vw,40px);
  align-items:baseline; padding:clamp(26px,3.6vw,38px) 0; border-bottom:1px solid var(--border-hairline);}
.topic__num{font-family:var(--font-display); font-weight:600; font-size:clamp(19px,2vw,23px);
  line-height:1; color:var(--clay);}
.topic__body{display:flex; flex-direction:column; gap:8px; max-width:58ch;}
.topic__title{font-family:var(--font-display); font-weight:600; font-size:clamp(22px,2.6vw,29px); line-height:1.16;}
.topic__body p{font-size:17px; line-height:1.6; color:var(--text-body);}

/* ---- cta band ---- */
.cta-band{background:var(--forest); padding:clamp(56px,7vw,88px) var(--pad-x);
  display:flex; flex-wrap:wrap; gap:40px; align-items:flex-end; justify-content:space-between;}
.cta-band__text{display:flex; flex-direction:column; gap:20px; max-width:46ch;}
.cta-band__headline{font-family:var(--font-display); font-weight:600; font-size:clamp(28px,3.6vw,44px);
  line-height:1.12; letter-spacing:-0.01em; color:var(--ivory);}
.cta-band .on-forest{font-size:18px; line-height:1.6; color:var(--text-on-forest);}

/* ---- buttons ---- */
.btn{display:inline-block; font-family:var(--font-body); font-weight:600; font-size:16px;
  padding:14px 26px; border-radius:var(--radius-button); background:var(--clay); color:var(--graphite);
  text-decoration:none; border:none; cursor:pointer; line-height:1.2; transition:background .15s ease;}
.btn:hover{background:#d9922f; color:var(--graphite);}
.btn--lg{padding:15px 30px; font-size:17px;}

/* ---- chips ---- */
.chips{display:flex; flex-wrap:wrap; gap:8px;}
.chip{display:inline-block; font-family:var(--font-body); font-weight:600; font-size:13px;
  padding:5px 12px; border-radius:var(--radius-chip); background:var(--warm-white);
  color:var(--graphite); border:1px solid var(--border-hairline);}
.chip--forest{background:var(--forest); color:var(--ivory); border-color:transparent;}

/* ---- quote card ---- */
.quote-card{background:var(--forest); border-radius:var(--radius-card); padding:clamp(40px,5vw,64px);}
.quote-card p{font-family:var(--font-display); font-weight:600; font-size:clamp(26px,3.4vw,40px);
  line-height:1.28; letter-spacing:-0.01em; color:var(--ivory); max-width:28ch;}
.quote-card .hl{color:var(--clay);}

/* ---- about ---- */
.about-grid{display:flex; flex-wrap:wrap; gap:clamp(32px,5vw,64px); align-items:flex-start; max-width:1120px;}
.about-media{flex:0 1 360px; width:100%; max-width:360px; display:flex; flex-direction:column; gap:16px;}
.about-media img{border-radius:var(--radius-card); border:1px solid var(--border-hairline);}
.about-body{flex:1 1 400px; display:flex; flex-direction:column; gap:24px;}
.about-body .lead{font-size:20px; line-height:1.55; font-weight:600; max-width:62ch;}
.about-body p{max-width:62ch;}

/* ---- guides (feature + what's coming) ---- */
.guide-feature{background:var(--forest); color:var(--text-on-forest); border-radius:var(--radius-card);
  padding:clamp(32px,5vw,56px); max-width:820px; display:flex; flex-direction:column; gap:18px;}
.guide-feature .eyebrow{color:var(--text-on-forest-muted);}
.guide-feature h2{font-family:var(--font-display); font-weight:600; color:var(--ivory);
  font-size:clamp(26px,3.4vw,40px); line-height:1.14; letter-spacing:-0.01em; max-width:20ch;}
.guide-feature p{color:var(--text-on-forest); font-size:18px; line-height:1.6; max-width:52ch;}
.guide-feature .btn{align-self:flex-start; margin-top:6px;}
/* .guide-next removed 2026-08-08: the guides index now uses real sections with
   .section__title, so those small headings and their wrapper are gone. */

/* ---- prompt block (guides) ---- */
.promptbox{background:var(--graphite); border-radius:var(--radius-card); overflow:hidden; max-width:900px;}
.promptbox__bar{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:14px 20px; border-bottom:1px solid rgba(248,244,227,.16);}
.promptbox__label{font-family:var(--font-body); font-weight:600; font-size:var(--text-eyebrow-size);
  letter-spacing:var(--text-eyebrow-tracking); text-transform:uppercase; color:rgba(248,244,227,.7);}
.promptbox pre{margin:0; padding:24px 20px; max-height:560px; overflow-y:auto; color:var(--ivory);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13.5px; line-height:1.62;
  white-space:pre-wrap; overflow-wrap:break-word;}
.copy-btn{font-family:var(--font-body); font-weight:600; font-size:14px; padding:9px 18px; border:none;
  border-radius:var(--radius-button); background:var(--clay); color:var(--graphite); cursor:pointer;
  line-height:1.2; transition:background .15s ease;}
.copy-btn:hover{background:#d9922f;}
.steps{max-width:760px; display:flex; flex-direction:column; gap:0;}

/* ---- newsletter ---- */
.nl-grid{display:flex; flex-wrap:wrap; gap:clamp(32px,5vw,64px); margin-top:48px; align-items:flex-start;}
.nl-list{padding-left:22px; display:flex; flex-direction:column; gap:12px; flex:1 1 320px;
  max-width:52ch; font-size:18px; line-height:1.55; color:var(--text-on-forest);}
.nl-card{flex:1 1 320px; background:var(--warm-white); border-radius:var(--radius-card);
  padding:32px; display:flex; flex-direction:column; gap:20px; color:var(--graphite);}
.nl-form{display:flex; flex-wrap:wrap; gap:12px; align-items:center;}
.nl-form input{font-family:var(--font-body); font-size:16px; padding:13px 14px;
  border:1px solid var(--border-hairline); border-radius:var(--radius-button);
  background:var(--ivory); color:var(--graphite); flex:1 1 200px; outline:none;}
.note{font-size:13.5px; color:var(--text-muted);}

/* ---- footer ----
   Items sit together in the middle rather than pinned to the screen edges.
   space-between left a wide dead green gap on desktop. (2026-08-08) */
.footer{background:var(--forest-deep); padding:40px var(--pad-x); display:flex; flex-wrap:wrap;
  gap:14px clamp(24px,4vw,56px); justify-content:center; align-items:center; text-align:center;}
.footer a{font-family:var(--font-display); font-weight:600; font-size:clamp(20px,2.4vw,26px);
  color:var(--ivory); text-decoration:none;}
.footer a:hover{text-decoration:underline;}
.footer span{font-size:13.5px; color:var(--text-on-forest-muted);}

/* ---- scroll-reveal hero (index only) ---- */
#hero{height:460vh; position:relative; background:var(--ivory);}
#hero .sticky{position:sticky; top:0; height:100vh; overflow:hidden; background:var(--graphite);}
#hero canvas{display:block; width:100%; height:100%;}
.hero-topbar{position:absolute; top:0; left:0; right:0; z-index:3; display:flex;
  justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:24px var(--pad-x);}
.hero-topbar .wordmark{text-shadow:0 2px 14px rgba(0,0,0,.5);}
.hero-topbar .nav a{text-shadow:0 2px 12px rgba(0,0,0,.55);}
.hero-headline{position:absolute; z-index:2; left:var(--pad-x); bottom:15vh; max-width:15ch;
  font-family:var(--font-display); font-weight:600; color:var(--ivory);
  font-size:clamp(38px,6vw,82px); line-height:1.04; letter-spacing:-0.015em;
  text-shadow:0 4px 26px rgba(0,0,0,.6),0 1px 5px rgba(0,0,0,.55);}
.hero-headline .rule{width:96px; height:8px; background:var(--clay); border-radius:2px; margin-bottom:26px;}
.hero-cue{position:absolute; z-index:2; left:0; right:0; bottom:36px; text-align:center;
  color:var(--ivory); font-size:14px; letter-spacing:.03em; text-shadow:0 2px 10px rgba(0,0,0,.6);}
@media(max-width:600px){
  .hero-topbar{flex-direction:column; align-items:flex-start; gap:8px; padding:16px 20px;}
  .hero-topbar .nav{gap:16px; font-size:14px;}
  .hero-headline{font-size:clamp(30px,7.5vw,44px); max-width:11ch; bottom:16vh;}
}

/* ================================================================
   GUIDE PAGES - centered editorial layout (added 2026-08-07)
   body class="guide-page". Structure only: a centered reading column,
   big-to-small type contrast, alternating grounds for rhythm.
   Palette, type and accents stay entirely our own.
   ================================================================ */
.guide-page{--guide-col:760px;}

/* hero: centered on the page */
.guide-page .section--forest{text-align:center;}
.guide-page .section--forest .eyebrow{display:inline-block;}
.guide-page .section--forest h1{font-size:clamp(40px,6.6vw,82px); line-height:1.02;
  letter-spacing:-0.022em; max-width:15ch; margin:26px auto 0;}
.guide-page .section--forest p{max-width:54ch; margin:28px auto 0;
  font-size:clamp(17px,1.5vw,20px); line-height:1.65;}
.guide-page .section--forest .btn{margin-top:38px;}

/* body sections: one centered column, alternating grounds */
.guide-page main > .section{padding-top:clamp(60px,7.5vw,104px); padding-bottom:clamp(60px,7.5vw,104px);}
.guide-page main > .section:nth-child(even){background:var(--warm-white);}
.guide-page main > .section > *{max-width:var(--guide-col); margin-left:auto; margin-right:auto;}
.guide-page main > .section--forest > *{max-width:none;}

/* the big move: section headings large, with a clay accent bar */
.guide-page .section__title{position:relative; max-width:var(--guide-col);
  font-size:clamp(34px,5vw,58px); line-height:1.06; letter-spacing:-0.02em;
  margin:0 auto clamp(30px,3.4vw,46px); padding-top:clamp(26px,3vw,36px);}
.guide-page .section__title::before{content:''; position:absolute; top:0; left:0;
  width:56px; height:4px; border-radius:2px; background:var(--clay);}

/* body copy: smaller type between the big headings */
.guide-page .split{display:block;}
.guide-page .split__body{max-width:none; gap:22px;}
.guide-page .split__body p{font-size:clamp(17px,1.35vw,18.5px); line-height:1.75;}

/* numbered index */
.guide-page .topics{max-width:var(--guide-col); margin-left:auto; margin-right:auto;}
.guide-page .topic{padding:clamp(26px,3.2vw,38px) 0;}
.guide-page .topic__body{max-width:none;}
.guide-page .topic__title{font-size:clamp(23px,2.5vw,31px);}
.guide-page .topic__body p{font-size:17.5px; line-height:1.7;}

/* blocks that also live in the column */
.guide-page .promptbox,
.guide-page .quote-card{max-width:var(--guide-col); margin-left:auto; margin-right:auto;}
.guide-page .note{max-width:var(--guide-col); margin-left:auto; margin-right:auto;}

/* chips need room off the paragraph above them */
.guide-page .chips{margin-top:clamp(22px,2.6vw,30px);}

/* closing band. Same measure fix as the home page: the headline needs its own
   cap, because a ch value on .cta-band__text is measured in the BODY font and
   squeezes 52px Bitter onto extra ragged lines. */
.guide-page .cta-band{justify-content:center; text-align:center; align-items:center;
  flex-direction:column; gap:28px;}
.guide-page .cta-band__text{max-width:none; align-items:center; gap:18px;}
.guide-page .cta-band__headline{max-width:26ch; margin:0 auto;
  font-size:clamp(30px,4vw,52px); line-height:1.1; text-wrap:balance;}
.guide-page .cta-band .on-forest{max-width:48ch; margin:0 auto; text-wrap:pretty;}

@media (max-width:600px){
  .guide-page .section__title{padding-top:22px;}
  .guide-page .section__title::before{width:44px; height:3px;}
}

/* ================================================================
   HOME PAGE - centered editorial layout (added 2026-08-08)
   body class="home-page". Same mechanic John approved on the guides:
   one centered column, big-to-small type contrast, alternating
   grounds for rhythm. Before this, nothing on the home page had a
   centering container, so every block ran hard left and left a
   dead gutter on the right at desktop width.
   If a third page type ever needs this, merge .guide-page and
   .home-page into one shared block rather than adding a third copy.
   ================================================================ */
.home-page{--home-col:820px;}

/* one centered column for everything under the hero */
.home-page main > .section{padding-top:clamp(60px,7.5vw,104px); padding-bottom:clamp(60px,7.5vw,104px);}
.home-page main > .section > *{max-width:var(--home-col); margin-left:auto; margin-right:auto;}
.home-page .disclosure{max-width:var(--home-col); margin:0 auto; text-align:center; border-bottom:none;}

/* the alternating ground does the separating, so the hairline goes */
.home-page .section--divider{border-bottom:none;}
.home-page .section--alt{background:var(--warm-white);}

/* opening statement: a centered stack, not a left two-column split */
.home-page .split{display:block; text-align:center;}
.home-page .split__title{max-width:17ch; margin:0 auto;
  font-size:clamp(38px,6vw,74px); line-height:1.03; letter-spacing:-0.022em;}
.home-page .split__body{max-width:58ch; margin:clamp(28px,3.4vw,40px) auto 0;
  align-items:center; gap:26px;}
.home-page .split__body .lead{font-size:clamp(18px,1.5vw,20.5px); line-height:1.65;}
.home-page .actions{justify-content:center;}

/* section headings large, with the clay accent bar */
.home-page .section__title{position:relative; max-width:var(--home-col);
  font-size:clamp(34px,5vw,58px); line-height:1.06; letter-spacing:-0.02em;
  margin:0 auto clamp(30px,3.4vw,46px); padding-top:clamp(26px,3vw,36px);}
.home-page .section__title::before{content:''; position:absolute; top:0; left:0;
  width:56px; height:4px; border-radius:2px; background:var(--clay);}

/* numbered index stays left-aligned inside the centered column */
.home-page .topics{max-width:var(--home-col); margin-left:auto; margin-right:auto;}
.home-page .topic{padding:clamp(26px,3.2vw,38px) 0;}
.home-page .topic__body{max-width:none;}
.home-page .topic__title{font-size:clamp(23px,2.5vw,31px);}
.home-page .topic__body p{font-size:17.5px; line-height:1.7;}

/* closing band: stacked and centered, no dead green gutter.
   The headline gets its own measure. Inheriting the 54ch body-font cap
   squeezed 52px Bitter onto three ragged lines. */
.home-page .cta-band{justify-content:center; text-align:center; align-items:center;
  flex-direction:column; gap:28px;}
.home-page .cta-band__text{max-width:none; align-items:center; gap:18px;}
.home-page .cta-band__headline{max-width:26ch; margin:0 auto;
  font-size:clamp(30px,4vw,52px); line-height:1.1; text-wrap:balance;}
.home-page .cta-band .on-forest{max-width:48ch; margin:0 auto; text-wrap:pretty;}
.home-page .split__body .lead{text-wrap:pretty;}

@media (max-width:600px){
  .home-page .section__title{padding-top:22px;}
  .home-page .section__title::before{width:44px; height:3px;}
}