/* ==========================================================================
   Dr Natasha — site styles
   Colour + type follow the Dr Natasha Brand Guidelines (Aug 2026 review draft).
   Evergreen #005C2D is the primary text, heading and logo colour.
   The licensed brand typefaces (Redward / Sharp Earth / Rotina Script, Sharp
   Type) are named first in every stack. Until the web licences and font files
   are supplied, the Google fallbacks below carry the design. To switch the
   real faces on, drop the woff2 files into assets/fonts/ and uncomment the
   @font-face block — nothing else needs to change.
   ========================================================================== */

/*
@font-face{font-family:'Redward';src:url('../fonts/Redward-Bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Redward';src:url('../fonts/Redward-Medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Sharp Earth';src:url('../fonts/SharpEarth-Medium.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Sharp Earth';src:url('../fonts/SharpEarth-Bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Rotina Script';src:url('../fonts/RotinaScript-Bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
*/

:root{
  /* ---- brand colour (Brand Guidelines p.19) ---- */
  --evergreen:#005C2D;      /* primary text, headings, logo   */
  --evergreen-dark:#00421F;  /* hovers, deep fields            */
  --navy:#054594;            /* brand navy — reserved          */
  --gold:#BB8B26;            /* tertiary accent (rules)        */
  --sky:#7DD3F7;             /* tertiary — Gut & Physiology    */
  --sun:#FBEE30;             /* tertiary — Gut & Psychology    */
  --ember:#E04B28;           /* tertiary — Put Your Heart…     */
  --meadow:#88C440;          /* tertiary — Vegetarianism…      */

  /* ---- surfaces (sampled from the approved illustrations) ---- */
  --cream:#F6EFE3;
  --cream-2:#F4EBDC;
  --cream-3:#F7F1E7;
  --tan:#F0E0C6;
  --panel:#ECE1CD;
  --rule:#DCCFB4;

  /* ---- semantic ---- */
  --green-900:var(--evergreen);
  --green-700:var(--evergreen);
  --green-cta:#013C1E;
  --ink:#005C2D;
  --ink-soft:#2F6244;

  /* ---- type ---- */
  /* Brand faces first. The Google fallbacks behind each are chosen to sit as
     close to the real ones as the free web can get:
       Redward  → Fraunces  (warm, blunt-serifed display face)
       Sharp Earth → Archivo (neo-grotesque, horizontal terminals)
     Rotina Script is defined for completeness but is NOT used anywhere on the
     site: the guidelines reserve it for merchandise and one-offs and say
     explicitly not to use it on digital properties. */
  --serif:'Redward','Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Sharp Earth','Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --script:'Rotina Script','Yellowtail',cursive;

  /* ---- metrics ---- */
  --wrap:1180px;
  --pad:clamp(20px,4vw,40px);
  --radius:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{overflow-x:clip}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);color:var(--green-900);margin:0;line-height:1.16;font-weight:600;
  /* keep Fraunces blunt and upright rather than its quirkier default */
  font-variation-settings:'SOFT' 24,'WONK' 0,'opsz' 32}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
:focus-visible{outline:3px solid var(--green-700);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--evergreen);color:#F7F2E6;
  padding:12px 20px;border-radius:8px;font-weight:700;font-size:.85rem;transition:top .15s ease}
.skip:focus{top:12px}

/* ---------- type helpers ---------- */
.eyebrow{font-family:var(--sans);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--green-900);font-weight:700;display:flex;align-items:center;justify-content:center;gap:14px}
.eyebrow::before,.eyebrow::after{content:"";height:1px;width:34px;background:var(--gold);opacity:.6}
.script{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--green-900);
  line-height:1.05;letter-spacing:.005em;font-variation-settings:'SOFT' 40,'WONK' 1,'opsz' 28}
.lede{font-size:1.06rem;color:var(--ink)}
.muted{color:var(--ink-soft)}
.featurebar__item span,.icongrid p,.featurelist p,.section__head p{color:var(--ink-soft)}
.center{text-align:center}

/* heart rule under headings */
.rule-heart{display:flex;align-items:center;justify-content:center;gap:14px;margin:14px 0 26px;color:var(--green-900)}
.rule-heart::before,.rule-heart::after{content:"";height:1px;width:56px;background:var(--rule)}
.rule-heart svg{width:19px;height:19px}

/* ---------- buttons ---------- */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-weight:700;font-size:.83rem;letter-spacing:.09em;text-transform:uppercase;
  padding:14px 26px;border-radius:8px;border:1.5px solid transparent;cursor:pointer;
  transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease}
.btn svg{width:16px;height:16px;flex:none}
.btn--primary{background:var(--green-700);color:#F7F2E6;box-shadow:0 2px 10px rgba(34,52,26,.18)}
.btn--primary:hover{background:var(--green-900);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--green-900);border-color:var(--green-900)}
.btn--ghost:hover{background:var(--green-900);color:var(--cream)}
.btn--light{background:#F1E3CB;color:var(--green-900)}
.btn--light:hover{background:#fff}
.btn--outline-light{background:transparent;color:#F4EEE1;border-color:#F4EEE1}
.btn--outline-light:hover{background:#F4EEE1;color:var(--green-900)}
.btn--sm{padding:9px 15px;font-size:.68rem;letter-spacing:.07em}

/* ---------- icons ---------- */
.ic{width:30px;height:30px;stroke:var(--green-700);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic--sm{width:22px;height:22px}
.ic--lg{width:40px;height:40px}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:50;background:var(--cream);
  border-bottom:1px solid rgba(176,141,79,.22)}
.site-header__in{display:flex;align-items:center;gap:22px;min-height:80px}
.logo{flex:none}
.logo{display:block;line-height:1}
.logo img{width:clamp(150px,15vw,192px)}
.logo small{display:block;margin-top:2px;font-size:.66rem;letter-spacing:.01em;color:var(--ink-soft);font-style:italic;white-space:nowrap}
@media (max-width:520px){.logo small{display:none}}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(10px,1.15vw,19px)}
.nav a.nav__link{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  color:var(--green-900);white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent}
.nav a.nav__link:hover,.nav a.nav__link[aria-current=page]{border-bottom-color:var(--green-700)}
.nav__actions{display:flex;align-items:center;gap:10px;margin-left:6px}
.nav-toggle{display:none;margin-left:auto;background:none;border:1.5px solid var(--green-900);
  border-radius:8px;padding:9px 11px;cursor:pointer;color:var(--green-900)}
.nav-toggle svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}

@media (max-width:1300px){
  .nav{position:fixed;inset:84px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:var(--cream);border-bottom:1px solid var(--rule);padding:8px var(--pad) 22px;
    box-shadow:0 18px 30px rgba(34,52,26,.10);display:none}
  .nav[data-open=true]{display:flex}
  .nav a.nav__link{padding:14px 0;border-bottom:1px solid var(--rule)}
  .nav__actions{margin:16px 0 0}
  .nav__actions .btn{flex:1}
  .nav-toggle{display:inline-flex}
}

/* ==========================================================================
   Illustrated hero (art carries the scene, copy overlays it)
   ========================================================================== */
.hero{position:relative;background:var(--cream);container-type:inline-size}
.hero__art{width:100%}
.hero__copy{position:absolute;z-index:2}
@media (min-width:901px){
  .hero--mc .hero__copy{left:2.6%;top:50%;transform:translateY(-50%);width:50%}
  .hero--mc .hero__eyebrow{font-size:1.18cqw;letter-spacing:.3em;justify-content:flex-start}
  .hero--mc .hero__eyebrow::before{display:none}
  .hero--mc .hero__eyebrow::after{width:3cqw}
  .hero--mc .hero__title{font-size:4.15cqw;font-weight:600;margin:.26em 0 .46em;text-wrap:balance}
  .hero--mc .hero__brush{display:inline-block;max-width:34cqw;margin-bottom:1.4cqw;
    padding:1.4cqw 3cqw;text-align:center;color:#F6F1E2;font-family:var(--serif);
    font-size:1.58cqw;line-height:1.3;
    background:url(../img/brush.webp) center/100% 100% no-repeat}
  .hero--mc .hero__brush img{display:none}
  .hero--mc .hero__brush span{display:block}
  .hero--mc .hero__text{font-size:1.12cqw;line-height:1.5;margin-bottom:.9cqw;max-width:44ch}
  .hero--mc .hero__buttons{display:flex;gap:.9cqw;margin:1.4cqw 0 1.5cqw;flex-wrap:wrap}
  .hero--mc .hero__buttons .btn{font-size:.86cqw;padding:.92cqw 1.7cqw;border-radius:.45cqw}
  .hero--mc .hero__stats{display:flex;gap:1.5cqw;flex-wrap:wrap;max-width:46cqw}
  .hero--mc .hero__stats li{display:flex;align-items:center;gap:.55cqw;font-size:.82cqw;line-height:1.22}
  .hero--mc .hero__stats .ic{width:1.8cqw;height:1.8cqw;stroke-width:1.6}
}

.hero__stats{list-style:none;margin:0;padding:0}
.hero__stats b{display:block;font-weight:700}

/* stacked hero for small screens */
.hero__stack{display:none;padding:38px 0 0;text-align:center}
.hero__stack .hero__script{font-size:1.5rem;margin-bottom:.2em;opacity:.9}
.hero__stack h1{font-size:clamp(2rem,8.5vw,2.9rem);font-weight:700}
.hero__stack p{margin:18px auto 24px;max-width:34ch}
.hero__stack .hero__stats{justify-content:center;margin-top:22px}

@media (max-width:900px){
  .hero__art,.hero__copy{display:none}
  .hero__stack{display:block}
  .hero__stack--mc{text-align:left}
  .hero__stack--mc .hero__buttons{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}
  .hero__stack--mc .hero__stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
  .hero__stack--mc .hero__stats li{display:flex;gap:10px;align-items:center;font-size:.88rem;line-height:1.25}
  .hero__stack .hero__stats .ic{width:22px;height:22px}
  .hero__stack .btn{font-size:.78rem;padding:13px 22px;border-radius:8px}
  .hero__stack .eyebrow{font-size:.66rem;letter-spacing:.2em}
  .hero__stack .eyebrow::before{display:none}
  .hero__brush-sm{display:inline-block;margin:8px 0 18px;max-width:100%;
    padding:16px 30px;color:#F6F1E2;font-family:var(--serif);font-size:1rem;line-height:1.32;text-align:center;
    background:url(../img/brush.webp) center/100% 100% no-repeat}
  .hero__brush-sm img{display:none}
}

/* legacy hotspots (unused now the arms are real links) */
.hotspot{position:absolute;z-index:3;border-radius:10px;transition:box-shadow .18s ease,background .18s ease}
.hotspot:hover{background:rgba(255,255,255,.16);box-shadow:0 0 0 2px rgba(62,85,49,.55)}
.hotspot span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ==========================================================================
   Feature strip (overlaps the hero, as in the mockup)
   ========================================================================== */
.featurebar{background:var(--cream)}
.featurebar__card{list-style:none;margin:0;padding:0;background:var(--cream-3);border-radius:18px;
  box-shadow:0 -2px 26px rgba(0,66,31,.10);margin-top:-34px;position:relative;z-index:4;
  display:grid;grid-template-columns:repeat(6,1fr);padding:26px 10px 30px}
.featurebar__item{text-align:center;padding:6px 14px;border-right:1px solid var(--rule)}
.featurebar__item:last-child{border-right:0}
.featurebar__item .ic{margin:0 auto 10px}
.featurebar__item b{display:block;font-family:var(--serif);font-weight:600;color:var(--green-900);
  font-size:1rem;margin-bottom:3px}
.featurebar__item span{display:block;font-size:.86rem;line-height:1.4;color:var(--ink-soft)}
@media (max-width:900px){
  .featurebar__card{grid-template-columns:repeat(3,1fr);margin-top:0;padding-top:34px;border-radius:0;
    box-shadow:none;background:var(--cream-3);row-gap:22px}
  .featurebar__item:nth-child(3n){border-right:0}
}
@media (max-width:560px){
  .featurebar__card{grid-template-columns:repeat(2,1fr)}
  .featurebar__item:nth-child(3n){border-right:1px solid var(--rule)}
  .featurebar__item:nth-child(2n){border-right:0}
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section{padding:clamp(52px,7vw,86px) 0}
.section--cream{background:var(--cream-2)}
.section--cream3{background:var(--cream-3)}
.section--tan{background:var(--tan)}
.section--panel{background:var(--panel)}
.section__head{text-align:center;max-width:760px;margin:0 auto clamp(30px,4vw,46px)}
.section__head h2{font-size:clamp(1.7rem,3.4vw,2.35rem)}
.section__head p{margin-top:6px;color:var(--ink-soft)}

/* two column: copy + inset panel */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.split--art{grid-template-columns:.92fr 1.08fr}
@media (max-width:880px){.split{grid-template-columns:1fr}}

.panelbox{background:var(--panel);border-radius:16px;padding:clamp(24px,3.4vw,34px);
  display:grid;grid-template-columns:1fr 1fr;gap:20px 26px}
.panelbox li{display:flex;gap:12px;align-items:flex-start;font-size:.94rem;line-height:1.42}
.panelbox ul,.panelbox{list-style:none;margin:0}
.panelbox .ic{width:24px;height:24px}
@media (max-width:560px){.panelbox{grid-template-columns:1fr}}

/* full-bleed art beside a padded copy column */
.artsplit{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);align-items:stretch}
.artsplit__art{align-self:stretch;overflow:hidden}
.artsplit__art img{width:100%;height:100%;object-fit:cover;object-position:center}
.artsplit__copy{align-self:center;padding-block:clamp(36px,4.4vw,58px);
  padding-left:clamp(26px,4vw,58px);
  padding-right:max(var(--pad),calc((100vw - var(--wrap)) / 2 + var(--pad)))}
@media (max-width:1040px){
  .artsplit{grid-template-columns:1fr}
  .artsplit__art{order:-1}
  .artsplit__art img{height:auto;max-height:52vh}
  .artsplit__copy{padding-inline:var(--pad);padding-block:clamp(34px,6vw,54px)}
}

/* icon grid */
.icongrid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(18px,2.4vw,30px);text-align:center}
.icongrid--5{grid-template-columns:repeat(5,1fr)}
.icongrid--3{grid-template-columns:repeat(3,1fr);max-width:900px;margin-inline:auto}
.icongrid li{list-style:none}
.icongrid .ic{margin:0 auto 12px}
.icongrid h3{font-size:1rem;margin-bottom:6px;font-weight:600}
.icongrid p{font-size:.87rem;line-height:1.45;color:var(--ink-soft)}
@media (max-width:960px){.icongrid,.icongrid--5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.icongrid--3{grid-template-columns:1fr}}
@media (max-width:560px){.icongrid,.icongrid--5{grid-template-columns:repeat(2,1fr)}}

/* feature list with icon + text */
.featurelist{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.featurelist li{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start}
.featurelist b{display:block;font-family:var(--serif);font-weight:600;color:var(--green-900);
  font-size:1.03rem;margin-bottom:2px}
.featurelist p{font-size:.92rem;line-height:1.5;color:var(--ink-soft);margin:0}

/* check list */
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.checklist li{display:flex;gap:12px;align-items:flex-start;font-size:.97rem;line-height:1.45}
.checklist .ic{width:19px;height:19px;margin-top:3px;stroke-width:2}

/* three-part "why different" band */
.whyband{display:grid;grid-template-columns:1fr 1.06fr 1fr;gap:clamp(20px,3vw,40px);align-items:center}
.whyband__art{display:flex;align-items:center;justify-content:center}
.whyband__art img{width:100%;border-radius:14px;
  box-shadow:0 10px 26px rgba(0,66,31,.14);transition:transform .3s ease,box-shadow .3s ease}
.whyband__art img:hover{transform:translateY(-4px) scale(1.015);
  box-shadow:0 18px 36px rgba(0,66,31,.2)}
@media (max-width:960px){
  .whyband{grid-template-columns:1fr}
  .whyband__art{order:-1}
}

/* ==========================================================================
   Dark CTA band
   ========================================================================== */
.cta{position:relative;background:var(--green-cta);color:#F4EEE1;overflow:hidden;isolation:isolate}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    /* heavy dark green through the middle where the type sits, falling away
       to clear illustration at both edges */
    linear-gradient(to right,
      rgba(4,46,23,0)   0%,
      rgba(4,46,23,.32) 13%,
      rgba(4,46,23,.78) 32%,
      rgba(4,46,23,.88) 50%,
      rgba(4,46,23,.78) 68%,
      rgba(4,46,23,.32) 87%,
      rgba(4,46,23,0)   100%),
    linear-gradient(rgba(4,46,23,.26),rgba(4,46,23,.44)),
    url(../img/cta-band.webp) center 42% / cover no-repeat}
.cta__in{position:relative;text-align:center;padding:clamp(48px,6.5vw,74px) 0 0;max-width:720px;margin:0 auto}
.cta h2{color:#F6F1E4;font-size:clamp(1.6rem,3.6vw,2.3rem);line-height:1.2;
  text-shadow:0 1px 12px rgba(0,26,12,.45)}
.cta .rule-heart{color:#F6F1E4}
.cta .rule-heart::before,.cta .rule-heart::after{background:rgba(246,241,228,.35)}
.cta p{color:rgba(246,241,228,.94);text-shadow:0 1px 10px rgba(0,26,12,.4)}
.cta__buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.cta__strip{position:relative;margin-top:clamp(34px,4.5vw,48px);border-top:1px solid rgba(246,241,228,.22);
  background:rgba(3,32,16,.55);backdrop-filter:blur(2px)}
.cta__strip ul{list-style:none;margin:0 auto;padding:16px 0;display:flex;gap:clamp(18px,4vw,46px);
  justify-content:center;flex-wrap:wrap}
.cta__strip li{display:flex;align-items:center;gap:9px;font-size:.83rem;color:rgba(246,241,228,.94)}
.cta__strip .ic{width:18px;height:18px;stroke:rgba(246,241,228,.94)}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--green-900);color:#DCD8C8}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;
  padding:clamp(44px,5vw,60px) 0 34px}
.site-footer h4{color:#F1E9D6;font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:14px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.92rem}
.site-footer p{font-size:.92rem;line-height:1.6;color:#BFBBAA}
.site-footer__logo{width:210px;margin-bottom:16px;filter:brightness(0) invert(.92) sepia(.18)}
.site-footer__base{border-top:1px solid rgba(241,233,214,.16);padding:18px 0;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem;color:#A9A594}
.social{display:flex;gap:12px;margin-top:18px}
.social a{width:36px;height:36px;border:1px solid rgba(241,233,214,.3);border-radius:50%;
  display:grid;place-items:center}
.social a:hover{background:rgba(241,233,214,.14)}
.social svg{width:17px;height:17px;stroke:#DCD8C8;fill:none;stroke-width:1.6}
@media (max-width:820px){.site-footer__top{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.site-footer__top{grid-template-columns:1fr}}

/* reduced motion */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ==========================================================================
   Interior pages
   ========================================================================== */

/* compact page header */
.pagehero{background:var(--cream);padding:clamp(44px,6vw,74px) 0 clamp(34px,4vw,50px);
  text-align:center;border-bottom:1px solid var(--rule)}
.pagehero .eyebrow{margin-bottom:14px}
.pagehero h1{font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.08}
.pagehero p{max-width:62ch;margin:0 auto;font-size:1.05rem;color:var(--ink-soft)}
.pagehero .btn{margin-top:26px}

/* long-form prose column */
.prose{max-width:66ch;margin-inline:auto}
.prose h2{font-size:clamp(1.4rem,2.6vw,1.8rem);margin:1.9em 0 .5em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.1rem;margin:1.5em 0 .35em}
.prose blockquote{margin:1.8em 0;padding:22px 26px;background:var(--panel);border-radius:14px;
  font-family:var(--serif);font-size:1.1rem;line-height:1.5;font-style:italic}
.prose ul{margin:0 0 1.1em;padding-left:1.15em}
.prose li{margin-bottom:.42em}

/* card grid */
.cards{list-style:none;margin:0;padding:0;display:grid;gap:clamp(18px,2.4vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:var(--cream-3);border:1px solid var(--rule);border-radius:16px;
  padding:clamp(22px,2.6vw,28px);display:flex;flex-direction:column;gap:10px;height:100%}
.card h3{font-size:1.1rem}
.card p{font-size:.94rem;line-height:1.55;color:var(--ink-soft);margin:0}
.card .btn{align-self:flex-start;margin-top:auto}
.card__top{display:flex;align-items:center;gap:12px}
.card--flat{background:transparent;border:0;padding:0}

/* books */
.books{list-style:none;margin:0;padding:0;display:grid;gap:clamp(18px,2.4vw,26px)}
.book{display:grid;grid-template-columns:14px 1fr auto;gap:clamp(18px,2.6vw,30px);
  align-items:center;background:var(--cream-3);border:1px solid var(--rule);
  border-radius:16px;overflow:hidden;padding-right:clamp(20px,2.6vw,30px)}
.book__spine{align-self:stretch}
.book__body{padding:clamp(22px,2.6vw,30px) 0}
.book h3{font-size:clamp(1.1rem,1.9vw,1.32rem);margin-bottom:2px}
.book .meta{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:10px;font-weight:700}
.book p{font-size:.95rem;line-height:1.58;margin:0}
.book__cta{display:flex;flex-direction:column;gap:10px;padding:18px 0}
@media (max-width:760px){
  .book{grid-template-columns:10px 1fr;padding-right:20px}
  .book__cta{grid-column:2;padding:0 0 22px}
  .book__cta .btn{align-self:flex-start}
}

/* numbered steps */
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:18px}
.steps li{counter-increment:s;display:grid;grid-template-columns:46px 1fr;gap:18px;align-items:start}
.steps li::before{content:counter(s);display:grid;place-items:center;width:46px;height:46px;
  border-radius:50%;background:var(--evergreen);color:#F7F2E6;font-family:var(--serif);
  font-weight:600;font-size:1.05rem}
.steps b{display:block;font-family:var(--serif);font-size:1.06rem;margin-bottom:2px}
.steps p{font-size:.94rem;line-height:1.55;color:var(--ink-soft);margin:0}

/* membership tiers */
.tiers{list-style:none;margin:0;padding:0;display:grid;gap:clamp(18px,2.4vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:stretch}
.tier{background:var(--cream-3);border:1px solid var(--rule);border-radius:18px;
  padding:clamp(24px,3vw,32px);display:flex;flex-direction:column;gap:14px}
.tier--feature{background:var(--evergreen);color:#EFE9DA;border-color:var(--evergreen)}
.tier--feature h3,.tier--feature .price{color:#F6F1E4}
.tier--feature .checklist .ic{stroke:#EFE9DA}
.tier--feature .btn{background:#F1E3CB;color:var(--evergreen)}
.tier .price{font-family:var(--serif);font-size:1.9rem;color:var(--green-900)}
.tier .price span{font-family:var(--sans);font-size:.82rem;color:var(--ink-soft);font-weight:600}
.tier--feature .price span{color:rgba(246,241,228,.8)}
.tier .btn{margin-top:auto;align-self:stretch}
.tier .checklist li{font-size:.92rem}

/* simple info bands */
.band{background:var(--panel);border-radius:18px;padding:clamp(26px,3.4vw,40px);
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.band h3{font-size:clamp(1.2rem,2.2vw,1.5rem);margin-bottom:6px}
.band p{margin:0;color:var(--ink-soft);max-width:62ch}
@media (max-width:720px){.band{grid-template-columns:1fr}}

/* directory / listing rows */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.rows li{border-bottom:1px solid var(--rule);padding:20px 0;display:grid;
  grid-template-columns:1fr auto;gap:18px;align-items:center}
.rows b{display:block;font-family:var(--serif);font-size:1.05rem}
.rows span{font-size:.9rem;color:var(--ink-soft)}
@media (max-width:600px){.rows li{grid-template-columns:1fr}}

/* placeholder note for content still to come */
.todo{border:1px dashed var(--gold);border-radius:14px;padding:18px 22px;
  background:rgba(187,139,38,.07);font-size:.9rem;color:var(--ink-soft)}
.todo b{color:var(--green-900)}

/* ==========================================================================
   Illustrated masthead — composited from the brand illustrations.
   Background scene, Natasha as a cut-out layer, and the signpost arms as
   real HTML links set over the blank approved artwork.
   ========================================================================== */
.hero--farm{position:relative;background:var(--cream);overflow:hidden;container-type:inline-size}
.hero__stage{position:relative;width:100%}
.hero__bg{width:100%;display:block}
.hero__figure-wrap{position:absolute;right:-1.5%;bottom:-3%;height:79%;z-index:3;
  pointer-events:none;display:flex;align-items:flex-end}
/* a soft warm shadow behind the figure so she sits IN the scene rather than on it —
   without it, the cream gilet and the white kid sit at the same value as the sky
   and read as background showing through */
.hero__figure-wrap::before{content:"";position:absolute;left:-16%;right:-10%;top:-3%;bottom:-6%;
  background:radial-gradient(50% 56% at 50% 56%,
    rgba(38,29,10,.46) 0%,
    rgba(38,29,10,.34) 40%,
    rgba(38,29,10,.15) 66%,
    rgba(38,29,10,0)   88%);
  filter:blur(18px)}
.hero__figure{position:relative;height:100%;width:auto;
  filter:drop-shadow(-10px 14px 22px rgba(38,29,10,.46))
         drop-shadow(3px 4px 6px rgba(38,29,10,.34));
  pointer-events:none}
.hero__scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(100deg,
      rgba(248,243,232,.97) 0%,
      rgba(248,243,232,.93) 20%,
      rgba(248,243,232,.72) 28%,
      rgba(248,243,232,.30) 34%,
      rgba(248,243,232,0)   42%),
    linear-gradient(to bottom, rgba(248,243,232,.55) 0%, rgba(248,243,232,0) 22%)}

@media (min-width:901px){
  /* --- the copy block --- */
  .hero--farm .hero__copy{position:absolute;z-index:4;left:2.6%;top:11.5%;width:31.5%;text-align:center}
  .hero--farm .hero__script{font-size:2.05cqw;margin-bottom:.12em;opacity:.9}
  .hero--farm .hero__title{font-size:4.1cqw;font-weight:700;line-height:1.03;letter-spacing:-.005em}
  .hero--farm .hero__divider{margin:1.3cqw 0 1.1cqw}
  .hero--farm .hero__divider::before,.hero--farm .hero__divider::after{width:4cqw}
  .hero--farm .hero__text{font-size:1.16cqw;line-height:1.45;margin:0 auto 1.5cqw;max-width:80%}
  .hero--farm .hero__cta{font-size:1cqw;padding:.95cqw 2.1cqw;letter-spacing:.1em;border-radius:.45cqw}

  /* --- signpost arms --- */
  .signpost{position:absolute;inset:0;z-index:4}
  .signarm{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:var(--h);
    display:grid;place-items:center;text-align:center;
    font-family:var(--serif);font-weight:700;color:#43301B;
    font-size:1.24cqw;line-height:1.1;letter-spacing:.01em;
    font-variation-settings:'SOFT' 20,'WONK' 0,'opsz' 20;
    text-shadow:0 1px 0 rgba(255,246,225,.42);
    border-radius:.5cqw;transform:rotate(var(--r,0deg));
    transition:color .2s ease,text-shadow .2s ease,background-color .2s ease,transform .2s ease}
  .signarm--l{--r:-1deg}
  .signarm--r{--r:1deg}
  .signarm::after{content:"";position:absolute;inset:-6% -4%;border-radius:.6cqw;
    background:radial-gradient(ellipse at center,rgba(255,241,206,.55),rgba(255,241,206,0) 72%);
    opacity:0;transition:opacity .22s ease;z-index:-1}
  .signarm:hover,.signarm:focus-visible{color:#22160A;
    text-shadow:0 1px 0 rgba(255,250,235,.9),0 0 14px rgba(255,236,190,.8)}
  .signarm:hover::after,.signarm:focus-visible::after{opacity:1}
  .signarm:hover{transform:rotate(var(--r,0deg)) translateY(-2px) scale(1.03)}
  .signarm:active{transform:rotate(var(--r,0deg)) translateY(0) scale(1)}
}

@media (max-width:900px){
  .hero__stage{display:none}
}

/* ==========================================================================
   Interaction — hover, focus and reveal
   Everything here is decoration: the site is fully usable with all of it off,
   and the whole block is disabled under prefers-reduced-motion (see the end).
   ========================================================================== */

/* --- signpost arms: a gentle swing, as if nudged --- */
.signarm:hover,.signarm:focus-visible{
  transform:rotate(calc(var(--r,0deg) + var(--swing,.9deg))) translateY(-3px) scale(1.025)}
.signarm--l{--swing:-.9deg}
.signarm--r{--swing:.9deg}

/* --- nav: underline grows from the left --- */
.nav a.nav__link{position:relative;border-bottom:0;padding-bottom:8px}
.nav a.nav__link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--evergreen);transform:scaleX(0);transform-origin:left center;
  transition:transform .26s cubic-bezier(.4,0,.2,1)}
.nav a.nav__link:hover::after,
.nav a.nav__link:focus-visible::after,
.nav a.nav__link[aria-current=page]::after{transform:scaleX(1)}

/* --- buttons --- */
.btn{position:relative;overflow:hidden}
.btn--primary:hover,.btn--light:hover{box-shadow:0 8px 20px rgba(0,66,31,.24)}
.btn--ghost:hover{box-shadow:0 6px 16px rgba(0,66,31,.16)}
.btn:active{transform:translateY(1px)}

/* --- feature strip --- */
.featurebar__item{border-radius:14px;transition:background-color .25s ease,transform .25s ease}
.featurebar__item .ic{transition:transform .3s cubic-bezier(.34,1.4,.64,1),stroke .25s ease}
.featurebar__item b{transition:color .25s ease}
.featurebar__item:hover{background:rgba(0,92,45,.045);transform:translateY(-4px)}
.featurebar__item:hover .ic{transform:translateY(-3px) scale(1.12);stroke:var(--gold)}
.featurebar__item:hover b{color:var(--evergreen-dark)}

/* --- icon grids --- */
.icongrid li{border-radius:14px;padding:14px 10px;transition:background-color .25s ease,transform .25s ease}
.icongrid .ic{transition:transform .3s cubic-bezier(.34,1.4,.64,1),stroke .25s ease}
.icongrid li:hover{background:rgba(0,92,45,.05);transform:translateY(-4px)}
.icongrid li:hover .ic{transform:translateY(-3px) scale(1.1);stroke:var(--gold)}

/* --- cards --- */
.card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card .ic{transition:transform .3s cubic-bezier(.34,1.4,.64,1)}
.card:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(0,66,31,.13);
  border-color:rgba(187,139,38,.55)}
.card:hover .ic{transform:scale(1.12) rotate(-4deg)}

/* --- books --- */
.book{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.book__spine{transition:width .28s cubic-bezier(.4,0,.2,1)}
.book h3{transition:color .25s ease}
.book:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,66,31,.13);
  border-color:rgba(187,139,38,.5)}
.book:hover .book__spine{width:22px}
.book:hover h3{color:var(--evergreen-dark)}

/* --- feature lists --- */
.featurelist li .ic{transition:transform .28s cubic-bezier(.34,1.4,.64,1),stroke .25s ease}
.featurelist li:hover .ic{transform:translateX(4px) scale(1.1);stroke:var(--gold)}
.featurelist b a{background-image:linear-gradient(var(--evergreen),var(--evergreen));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1.5px;
  transition:background-size .3s cubic-bezier(.4,0,.2,1)}
.featurelist li:hover b a,.featurelist b a:focus-visible{background-size:100% 1.5px}

/* --- checklists --- */
.checklist li .ic{transition:transform .25s ease}
.checklist li:hover .ic{transform:scale(1.2)}

/* --- directory rows --- */
.rows li{transition:background-color .22s ease;border-radius:10px;
  padding-inline:12px;margin-inline:-12px}
.rows li:hover{background:rgba(0,92,45,.045)}

/* --- membership tiers --- */
.tier{transition:transform .25s ease,box-shadow .25s ease}
.tier:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(0,66,31,.15)}

/* --- footer --- */
.site-footer ul a{background-image:linear-gradient(#fff,#fff);background-repeat:no-repeat;
  background-position:0 100%;background-size:0 1px;transition:background-size .28s ease,color .2s ease}
.site-footer ul a:hover{color:#fff;text-decoration:none;background-size:100% 1px}
.social a{transition:background-color .22s ease,transform .22s ease,border-color .22s ease}
.social a:hover{transform:translateY(-3px);border-color:rgba(241,233,214,.7)}

/* --- CTA band buttons --- */
.cta__buttons .btn{transition:transform .22s ease,box-shadow .22s ease,background-color .18s ease,color .18s ease}
.cta__buttons .btn:hover{transform:translateY(-3px)}

/* --- reveal on scroll ---
   The hidden state is scoped to .js-reveal, which the script adds to <html>
   only once it has an observer running. If the JS never loads, fails, or the
   visitor has reduced motion on, nothing is ever hidden. --- */
.js-reveal [data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1)}
.js-reveal [data-reveal].is-in{opacity:1;transform:none}
.js-reveal [data-reveal][data-reveal-delay="1"]{transition-delay:.08s}
.js-reveal [data-reveal][data-reveal-delay="2"]{transition-delay:.16s}
.js-reveal [data-reveal][data-reveal-delay="3"]{transition-delay:.24s}

/* --- and none of it if the visitor would rather not --- */
@media (prefers-reduced-motion:reduce){
  .js-reveal [data-reveal]{opacity:1;transform:none;transition:none}
  .signarm:hover,.signarm:focus-visible,
  .featurebar__item:hover,.icongrid li:hover,.card:hover,.book:hover,.tier:hover,
  .cta__buttons .btn:hover,.social a:hover{transform:none}
}

/* ==========================================================================
   Blog — image-led post cards
   ========================================================================== */
.posts{list-style:none;margin:0;padding:0;display:grid;gap:clamp(18px,2.2vw,26px);
  grid-template-columns:repeat(4,minmax(0,1fr))}
.posts--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1080px){.posts,.posts--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.posts,.posts--3{grid-template-columns:1fr}}

.postcard{position:relative;display:flex;flex-direction:column;background:#FFFDF9;
  border:1px solid var(--rule);border-radius:16px;overflow:hidden;height:100%;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.postcard:hover{transform:translateY(-5px);box-shadow:0 16px 32px rgba(0,66,31,.14);
  border-color:rgba(187,139,38,.55)}
.postcard__media{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--panel)}
.postcard__media img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.6,.3,1)}
.postcard:hover .postcard__media img{transform:scale(1.05)}
.postcard__badge{position:absolute;top:12px;right:12px;background:var(--evergreen);
  color:#F3ECDA;font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;box-shadow:0 3px 10px rgba(0,40,20,.25)}
.postcard__body{display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2.2vw,26px);flex:1}
.postcard__meta{display:flex;align-items:center;gap:10px;font-size:.68rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.postcard__meta span{color:var(--ink-soft);font-weight:600;letter-spacing:.04em;text-transform:none}
.postcard h3{font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.22}
.postcard p{font-size:.92rem;line-height:1.55;color:var(--ink-soft);margin:0}
.postcard__more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-size:.8rem;font-weight:700;letter-spacing:.06em;color:var(--gold);text-transform:uppercase}
.postcard__more svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;
  transition:transform .25s ease}
.postcard:hover .postcard__more svg{transform:translateX(5px)}
/* the whole card is the link target */
.postcard__link{position:absolute;inset:0;z-index:2}
.postcard__link:focus-visible{outline:3px solid var(--evergreen);outline-offset:-3px;border-radius:16px}

/* section head with an action on the right */
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:clamp(26px,3vw,38px);flex-wrap:wrap}
.head-row h2{font-size:clamp(1.7rem,3.2vw,2.2rem)}
.head-row p{margin:6px 0 0;color:var(--ink-soft);max-width:58ch}

/* ==========================================================================
   Membership pricing
   ========================================================================== */
.tiers--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1080px){.tiers--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tiers--4{grid-template-columns:1fr}}
.tier{position:relative}
.tier__badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);text-align:center;
  background:var(--gold);color:#2A1C05;font-size:.63rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 14px;border-radius:999px;white-space:nowrap}
.tier__step{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold)}
.tier--feature .tier__step{color:#E9CE94}
.tier .price{display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums}
.tier .price em{font-style:normal;font-family:var(--sans);font-size:.8rem;font-weight:700;
  color:var(--ink-soft)}
.tier--feature .price em{color:rgba(246,241,228,.82)}
.tier__note{font-size:.78rem;line-height:1.45;color:var(--ink-soft);
  border-top:1px solid var(--rule);padding-top:12px;margin-top:2px}
.tier--feature .tier__note{color:rgba(246,241,228,.8);border-top-color:rgba(246,241,228,.28)}
.tier--feature .checklist li{color:#EFE9DA}
.billing-note{text-align:center;margin-top:26px;font-size:.9rem;color:var(--ink-soft)}

/* ==========================================================================
   Sign in / join
   ========================================================================== */
.auth{display:grid;grid-template-columns:1.05fr 1fr;min-height:calc(100vh - 80px);
  align-items:stretch}
.auth__art{position:relative;overflow:hidden;background:var(--panel)}
.auth__art img{width:100%;height:100%;object-fit:cover}
.auth__quote{position:absolute;left:0;right:0;bottom:0;padding:clamp(26px,3vw,44px);
  background:linear-gradient(transparent,rgba(2,40,20,.82) 55%);color:#F4EEE1}
.auth__quote p{font-family:var(--serif);font-style:italic;font-size:clamp(1rem,1.5vw,1.22rem);
  line-height:1.4;margin:0 0 8px}
.auth__quote cite{font-style:normal;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(244,238,225,.8)}
.auth__panel{display:flex;align-items:center;justify-content:center;
  padding:clamp(40px,5vw,72px) clamp(24px,4vw,56px);background:var(--cream)}
.auth__inner{width:100%;max-width:420px}
.auth__inner h1{font-size:clamp(1.7rem,3vw,2.2rem)}
.auth__lede{color:var(--ink-soft);margin:10px 0 26px}
.tabs{display:flex;gap:4px;background:var(--panel);padding:4px;border-radius:12px;margin-bottom:26px}
.tabs button{flex:1;border:0;background:transparent;font-family:var(--sans);font-weight:700;
  font-size:.82rem;letter-spacing:.04em;padding:11px 8px;border-radius:9px;cursor:pointer;
  color:var(--ink-soft);transition:background-color .2s ease,color .2s ease}
.tabs button[aria-selected=true]{background:var(--cream);color:var(--evergreen);
  box-shadow:0 2px 8px rgba(0,66,31,.10)}
.field{display:grid;gap:6px;margin-bottom:16px}
.field label{font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft)}
.field input,.field select{font-family:var(--sans);font-size:.95rem;color:var(--ink);
  background:#FFFDF9;border:1px solid var(--rule);border-radius:10px;padding:12px 14px;
  transition:border-color .2s ease,box-shadow .2s ease}
.field input:focus{outline:0;border-color:var(--evergreen);
  box-shadow:0 0 0 3px rgba(0,92,45,.14)}
.auth form .btn{width:100%;margin-top:6px}
.auth__alt{margin-top:20px;font-size:.88rem;color:var(--ink-soft);text-align:center}
.auth__alt a{color:var(--evergreen);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.auth__small{margin-top:22px;font-size:.76rem;line-height:1.5;color:var(--ink-soft)}
@media (max-width:900px){
  .auth{grid-template-columns:1fr;min-height:0}
  .auth__art{height:34vh;min-height:220px}
}

/* feature tier: keep the price legible on the dark ground (specificity fix) */
.tiers .tier--feature h3,
.tiers .tier--feature .price{color:#F6F1E4}
.tiers .tier--feature .price em{color:rgba(246,241,228,.82)}

/* ==========================================================================
   Books — cover, blurb, price
   ========================================================================== */
.book{grid-template-columns:auto 1fr auto;gap:clamp(20px,2.6vw,34px);
  padding:clamp(20px,2.4vw,28px) clamp(20px,2.6vw,30px)}
.book__cover{width:clamp(96px,10vw,146px);aspect-ratio:2/3;object-fit:cover;
  background:var(--panel);flex:none;align-self:center;
  border-radius:4px;box-shadow:0 8px 20px rgba(0,66,31,.20),0 1px 3px rgba(0,0,0,.18);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease}
.book:hover .book__cover{transform:translateY(-4px) rotate(-1.4deg) scale(1.03);
  box-shadow:0 16px 32px rgba(0,66,31,.26),0 2px 5px rgba(0,0,0,.2)}
.book__body{padding:0}
.book__cta{padding:0;align-items:flex-start;justify-content:center;gap:8px;min-width:150px}
.book__price{font-family:var(--serif);font-size:1.35rem;color:var(--green-900);
  font-variant-numeric:tabular-nums;line-height:1}
.book__price small{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);display:block;margin-top:5px}
.book__spine{display:none}
@media (max-width:860px){
  .book{grid-template-columns:auto 1fr}
  .book__cta{grid-column:1 / -1;flex-direction:row;align-items:center;gap:18px;
    border-top:1px solid var(--rule);padding-top:16px;margin-top:4px}
}
@media (max-width:520px){
  .book{grid-template-columns:1fr;justify-items:start}
  .book__cover{width:120px}
}

/* ==========================================================================
   Video stories
   ========================================================================== */
.videos{list-style:none;margin:0;padding:0;display:grid;gap:clamp(16px,2vw,24px);
  grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1080px){.videos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.videos{grid-template-columns:1fr}}

.videocard{position:relative;display:flex;flex-direction:column;background:#FFFDF9;
  border:1px solid var(--rule);border-radius:14px;overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.videocard:hover{transform:translateY(-5px);box-shadow:0 16px 32px rgba(0,66,31,.15);
  border-color:rgba(187,139,38,.55)}
.videocard__thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#1d1d1b}
.videocard__thumb img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.6,.3,1),filter .3s ease;filter:brightness(.86)}
.videocard:hover .videocard__thumb img{transform:scale(1.05);filter:brightness(.94)}
/* the YouTube-style overlay: channel chip top-left, play button centre */
.videocard__chan{position:absolute;top:9px;left:10px;right:10px;display:flex;
  align-items:center;gap:8px;z-index:2;pointer-events:none}
.videocard__avatar{width:26px;height:26px;border-radius:50%;flex:none;background:#F6EFE3;
  display:grid;place-items:center;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.videocard__avatar img{width:100%;height:100%;object-fit:contain;filter:none}
.videocard__chantext{min-width:0}
.videocard__chantext b{display:block;color:#fff;font-size:.78rem;line-height:1.15;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.videocard__chantext span{display:block;color:rgba(255,255,255,.82);font-size:.66rem;line-height:1.2;
  text-shadow:0 1px 4px rgba(0,0,0,.7)}
.videocard__play{position:absolute;inset:0;display:grid;place-items:center;z-index:2;
  pointer-events:none}
.videocard__play svg{width:62px;height:44px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.4));
  transition:transform .25s cubic-bezier(.34,1.4,.64,1)}
.videocard:hover .videocard__play svg{transform:scale(1.12)}
.videocard__play .yt-bg{fill:#F0281E}
.videocard:hover .videocard__play .yt-bg{fill:#FF0F00}
.videocard__foot{display:flex;align-items:center;gap:9px;padding:13px 16px;
  background:var(--cream-3);border-top:1px solid var(--rule)}
.videocard__foot svg{width:13px;height:13px;stroke:var(--gold);fill:none;stroke-width:2;flex:none;
  transition:transform .25s ease}
.videocard:hover .videocard__foot svg{transform:translateX(3px)}
.videocard__foot b{font-family:var(--sans);font-weight:700;font-size:.85rem;color:var(--green-900)}
.videocard__link{position:absolute;inset:0;z-index:3}
.videocard__link:focus-visible{outline:3px solid var(--evergreen);outline-offset:-3px;border-radius:14px}

/* ==========================================================================
   Article — a single journal post or story
   ========================================================================== */
.article{padding:clamp(38px,5vw,62px) 0 clamp(46px,6vw,74px);background:var(--cream)}
.article__head{max-width:760px;margin:0 auto clamp(28px,3.4vw,42px);text-align:center}
.article__kicker{margin-bottom:16px}
.article__head h1{font-size:clamp(2rem,4.4vw,3rem);line-height:1.08;text-wrap:balance}
.article__standfirst{font-family:var(--serif);font-style:italic;font-size:clamp(1.08rem,1.9vw,1.35rem);
  line-height:1.45;color:var(--ink-soft);margin:18px auto 0;max-width:56ch;text-wrap:balance}
.article__meta{display:flex;align-items:center;justify-content:center;gap:10px 16px;flex-wrap:wrap;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--rule);
  font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.article__meta .sep{color:var(--rule)}
.article__meta .tag{background:rgba(0,92,45,.09);color:var(--evergreen);border-radius:999px;
  padding:5px 12px;letter-spacing:.07em}
.article__lead{max-width:1000px;margin:0 auto clamp(30px,4vw,46px);border-radius:16px;overflow:hidden;
  box-shadow:0 12px 30px rgba(0,66,31,.14)}
.article__lead img{width:100%}
.article__body{max-width:64ch;margin:0 auto;font-size:1.05rem;line-height:1.72}
.article__body > p:first-of-type::first-letter{float:left;font-family:var(--serif);font-weight:700;
  font-size:3.4em;line-height:.82;padding:.06em .1em 0 0;color:var(--evergreen)}
.article__body h2{font-size:clamp(1.3rem,2.4vw,1.65rem);margin:1.9em 0 .5em}
.article__body h3{font-size:1.08rem;margin:1.5em 0 .3em}
.article__body ul{padding-left:1.15em;margin:0 0 1.15em}
.article__body li{margin-bottom:.45em}
.article__body blockquote{margin:1.9em 0;padding:0 0 0 24px;border-left:3px solid var(--gold);
  font-family:var(--serif);font-style:italic;font-size:1.16rem;line-height:1.48;color:var(--green-900)}
.article__body blockquote cite{display:block;margin-top:10px;font-family:var(--sans);font-style:normal;
  font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}

/* an image that breaks out wider than the text column */
.figure{margin:2.2em 0;max-width:1000px;margin-inline:calc(50% - 500px)}
.figure img{width:100%;border-radius:14px;box-shadow:0 10px 26px rgba(0,66,31,.14)}
.figure figcaption{margin-top:10px;font-size:.82rem;line-height:1.5;color:var(--ink-soft);text-align:center}
.figure--inline{max-width:100%;margin-inline:0}
@media (max-width:1060px){.figure{max-width:100%;margin-inline:0}}

/* video embedded in a story */
.videoframe{margin:2.2em 0;max-width:1000px;margin-inline:calc(50% - 500px);
  position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#161614;
  box-shadow:0 12px 30px rgba(0,66,31,.18)}
.videoframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.videoframe__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.8);cursor:pointer}
.videoframe__btn{position:absolute;inset:0;display:grid;place-items:center;border:0;background:none;
  cursor:pointer;z-index:2}
.videoframe__btn svg{width:78px;height:55px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));
  transition:transform .25s cubic-bezier(.34,1.4,.64,1)}
.videoframe__btn:hover svg{transform:scale(1.1)}
@media (max-width:1060px){.videoframe{max-width:100%;margin-inline:0}}

/* end-of-article */
.article__end{max-width:64ch;margin:clamp(34px,4vw,50px) auto 0;padding-top:26px;
  border-top:1px solid var(--rule);display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.article__end p{margin:0;font-size:.92rem;color:var(--ink-soft);flex:1;min-width:220px}

/* a portrait lead image shouldn't push the article off the screen */
.article__lead{max-height:74vh}
.article__lead img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.videoframe__btn .yt-bg{fill:#F0281E}
.videoframe__btn:hover .yt-bg{fill:#FF0F00}


/* Masterclass masthead — the same three-layer model as the homepage:
   scene plate, cut-out figure, HTML type. Nothing baked into the picture. */
.hero--mc .hero__figure-wrap{right:0.5%;bottom:-2%;height:88%}
.hero--mc .hero__scrim{background:
  linear-gradient(100deg,
    rgba(248,243,232,.97) 0%,
    rgba(248,243,232,.94) 26%,
    rgba(248,243,232,.74) 38%,
    rgba(248,243,232,.30) 48%,
    rgba(248,243,232,0)   58%),
  linear-gradient(to bottom, rgba(248,243,232,.5) 0%, rgba(248,243,232,0) 20%)}

/* ── Masterclass copy block ─────────────────────────────────────────────────
   .hero--mc and .hero--farm are both on this section and both set `top` on
   .hero__copy at equal specificity, so order decides. Pin it here, last, with
   the combined selector so it can't be re-broken by appending to the file. */

/* ---- Speaking gallery (invite page) ---- */
.stage-lead{margin:0;border-radius:16px;overflow:hidden;box-shadow:0 18px 44px rgba(4,46,23,.14)}
.stage-lead img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 38%}
@media (max-width:640px){.stage-lead img{aspect-ratio:4/3}}
.stagegrid{list-style:none;margin:clamp(16px,2.2vw,24px) 0 0;padding:0;display:grid;
  gap:clamp(16px,2.2vw,24px);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.stagegrid figure{margin:0}
.stagegrid img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:14px;box-shadow:0 12px 30px rgba(4,46,23,.11);
  transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s}
.stagegrid figure:hover img{transform:translateY(-4px) scale(1.014);box-shadow:0 18px 40px rgba(4,46,23,.18)}
.stagegrid figcaption,.stage-lead + .stagecap{margin-top:10px;font-size:.82rem;line-height:1.5;
  color:var(--ink-soft);text-align:center}
@media (prefers-reduced-motion:reduce){.stagegrid figure:hover img{transform:none}}

@media (min-width:901px){
  .hero--farm.hero--mc .hero__copy{left:2.6%;top:50%;transform:translateY(-50%);width:50%;text-align:left}
}
@media (min-width:901px){
  .hero--farm.hero--mc .hero__text{margin:0 0 .9cqw;max-width:44ch}
  .hero--farm.hero--mc .hero__stats{margin-left:0}
}

/* ==========================================================================
   Header — wider than the content column so the nav can breathe
   ========================================================================== */
.utilitybar{background:var(--evergreen);color:#EFE7D4}
.utilitybar__in{display:flex;align-items:center;justify-content:center;gap:14px;
  min-height:38px;font-size:.78rem;text-align:center;flex-wrap:wrap;padding-block:7px}
.utilitybar a{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:#F6EFC4;
  border-bottom:1px solid rgba(246,239,196,.4);padding-bottom:1px;
  transition:color .2s ease,border-color .2s ease}
.utilitybar a:hover{color:#fff;border-color:#fff}
.utilitybar a svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;
  transition:transform .22s ease}
.utilitybar a:hover svg{transform:translateX(3px)}
@media (max-width:620px){.utilitybar__in{font-size:.72rem;gap:8px}}

.site-header__in{max-width:1440px}
.site-header__in{gap:26px;min-height:84px}
.logo img{width:clamp(158px,15vw,204px)}
.nav{gap:clamp(13px,1.35vw,22px)}
.nav a.nav__link{font-size:.775rem;letter-spacing:.055em}
.btn--sm{padding:10px 17px;font-size:.72rem;letter-spacing:.07em}
@media (max-width:1340px){
  .nav{gap:clamp(11px,1.1vw,17px)}
  .nav a.nav__link{font-size:.735rem;letter-spacing:.04em}
}

/* Invite / speaking masthead — shares the composited model, its own proportions */
@media (min-width:901px){
  .hero--farm.hero--invite .hero__copy{left:2.6%;top:50%;transform:translateY(-50%);width:46%;text-align:left}
  .hero--invite .hero__eyebrow{font-size:1.18cqw;letter-spacing:.3em;justify-content:flex-start}
  .hero--invite .hero__eyebrow::before{display:none}
  .hero--invite .hero__eyebrow::after{width:3cqw}
  .hero--invite .hero__title{font-size:4.6cqw;font-weight:700;margin:.24em 0 .5em}
  .hero--farm.hero--invite .hero__text{font-size:1.16cqw;line-height:1.55;margin:0 0 1.6cqw;max-width:44ch}
  .hero--invite .hero__buttons{display:flex;gap:1cqw;flex-wrap:wrap}
  .hero--invite .hero__buttons .btn{font-size:.9cqw;padding:1cqw 1.9cqw;border-radius:.45cqw}
}
.hero--invite .hero__figure-wrap{right:1%;bottom:-2%;height:86%}