/* Cocoon — shared base for secondary pages (about, privacy, terms, 404, survey).
   The main SPA (index.html) keeps its own inline styles. Tokens mirror index.html. */
:root{
  /* mobile-first foundation, mirroring index.html */
  --gutter:clamp(18px,5vw,28px);
  --tap:44px;
  --s-1:clamp(10px,2.4vw,14px);  --s-2:clamp(16px,4vw,22px);
  --s-3:clamp(24px,6vw,34px);    --s-4:clamp(34px,8vw,52px);
  --s-5:clamp(44px,11vw,84px);
  --t-sm:clamp(.84rem,.8rem + .16vw,.9rem);
  --t-base:clamp(1rem,.97rem + .2vw,1.06rem);
  --t-lg:clamp(1.06rem,1rem + .5vw,1.2rem);
  --t-h3:clamp(1.16rem,1.05rem + .7vw,1.45rem);
  --t-h2:clamp(1.55rem,1.28rem + 1.5vw,2.4rem);
  --t-h1:clamp(2rem,1.5rem + 2.6vw,3.4rem);
  --espresso:#221410; --cocoa-950:#1B100C; --cocoa-900:#2C1B14; --cocoa-800:#3A281D; --cocoa-700:#4A3427;
  --oat:#F3E7D3; --oat-2:#F8F0DF; --oat-dim:#C9B49B; --taupe:#B99F84;
  --caramel:#E4A65E; --caramel-deep:#C6823C; --mulberry:#B06A7B; --mulberry-deep:#8E4A5B;
  --cocoa-mid:#6E4E3B; --line:#4A3325; --line-2:#382719;
  --maxw:1120px;
  --disp:"Young Serif",Georgia,serif;
  --body:"Mulish",system-ui,-apple-system,sans-serif;
  --mono:"Mulish",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;
  background:radial-gradient(120% 80% at 84% -6%, rgba(228,166,94,.12), transparent 55%),
             radial-gradient(90% 60% at -8% 6%, rgba(176,106,123,.08), transparent 50%), var(--espresso);
  background-attachment:fixed;
  color:var(--oat); font-family:var(--body); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;}
.grain{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
h1,h2,h3,h4{font-family:var(--disp); font-weight:400; letter-spacing:-.01em; line-height:1.1; margin:0; text-wrap:balance;}
p{margin:0 0 1rem}
a{color:inherit; text-decoration:none}
em{font-style:italic; color:var(--caramel)}
.mono{font-family:var(--mono)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); position:relative; z-index:2}
.narrow{max-width:720px}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:var(--tap); gap:.5em; background:var(--caramel); color:#2A1608; border:none; cursor:pointer; font-family:var(--body); font-weight:700; font-size:.95rem; padding:.85em 1.5em; border-radius:100px; transition:transform .2s ease, filter .2s ease}
.btn:hover{transform:translateY(-2px); filter:brightness(1.06)}
.btn--ghost{background:transparent; color:var(--oat); border:1.5px solid var(--line)}
.btn--ghost:hover{background:var(--cocoa-900); border-color:var(--taupe)}

/* nav */
.nav{position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--espresso) 86%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-2)}
.nav__in{max-width:var(--maxw); margin:0 auto; padding:14px 28px; display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand{display:flex; align-items:center; gap:11px; color:inherit}
.brand__mark{width:19px; height:38px; flex:0 0 auto}
.brand__txt{font-family:var(--disp); font-size:1.4rem; line-height:1}
.brand > span{display:flex; flex-direction:column; justify-content:center; gap:2px}
.brand__sub{font-family:var(--mono); font-size:.63rem; letter-spacing:.02em; color:var(--taupe); line-height:1.15}
.nav__links{display:flex; align-items:center; gap:26px}
.nav__links a{font-size:.92rem; font-weight:600; color:var(--oat-dim)}
.nav__links a:hover{color:var(--oat)}
.nav__links a.nav__cta, .nav__cta{font-size:.9rem; font-weight:700; color:#2A1608; background:var(--caramel); padding:9px 17px; border-radius:100px}

/* prose / essay */
.page-hero{padding:clamp(48px,7vw,90px) 0 clamp(20px,3vw,36px)}
.page-hero h1{font-size:clamp(2.4rem,5.4vw,3.8rem); margin:14px 0 0}
.lede{font-size:1.2rem; color:var(--taupe); max-width:52ch; margin-top:18px}
.essay{padding-bottom:70px}
.essay h2{font-size:clamp(1.5rem,3vw,2.1rem); margin:44px 0 14px}
.essay h3{font-size:1.25rem; margin:30px 0 10px}
.essay p{color:var(--oat-dim); margin-bottom:16px; max-width:66ch}
.essay p b, .essay strong{color:var(--oat); font-weight:700}
.essay ul{color:var(--oat-dim); max-width:66ch; padding-left:20px}
.essay li{margin-bottom:10px}
.essay a.inline{color:var(--caramel); text-decoration:underline; text-underline-offset:3px}
.pullquote{font-family:var(--disp); font-size:clamp(1.6rem,3.4vw,2.3rem); color:var(--caramel); line-height:1.15; margin:34px 0; padding-left:22px; border-left:3px solid var(--caramel)}
.pullquote em{color:var(--oat); font-style:italic}
.callout{background:var(--cocoa-900); border:1px solid var(--line-2); border-left:3px solid var(--mulberry); border-radius:14px; padding:22px 24px; margin:26px 0}
.callout p{margin:0; color:var(--oat-dim)}

/* reading hub + articles */
.post{display:block; text-decoration:none; color:inherit; background:var(--cocoa-900); border:1px solid var(--line-2); border-radius:16px; padding:24px 26px; margin-bottom:16px; transition:border-color .15s, transform .15s}
.post:hover{border-color:var(--caramel); transform:translateY(-2px)}
.post__tag{font-family:var(--mono); font-size:0.74rem; letter-spacing:.02em; color:var(--caramel); display:block; margin-bottom:9px}
.post__title{font-family:var(--disp); font-size:1.5rem; line-height:1.12; color:var(--oat); margin-bottom:6px}
.post__desc{color:var(--taupe); font-size:.98rem; margin:0; line-height:1.55}
.readmore{margin-top:52px; padding-top:24px; border-top:1px solid var(--line-2); font-size:.95rem; color:var(--taupe)}
.readmore a{color:var(--caramel); text-decoration:underline; text-underline-offset:3px}
.mol{font-family:var(--mono); font-size:.85rem; font-weight:700; color:var(--oat-dim); white-space:nowrap}

/* footer */
.foot{border-top:1px solid var(--line-2); padding:44px 0 40px; margin-top:20px}
.foot__grid{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap}
.foot__brand{max-width:300px}
.foot__brand .brand__txt{font-size:1.5rem}
.foot__tag{color:var(--taupe); font-size:.92rem; margin-top:10px}
.foot__links{display:flex; gap:50px; flex-wrap:wrap}
.foot__col h4{font-family:var(--mono); font-size:0.74rem; letter-spacing:.02em; color:var(--taupe); font-weight:400; margin-bottom:12px}
.foot__col a{display:block; color:var(--oat-dim); font-size:.92rem; margin-bottom:9px}
.foot__col a:hover{color:var(--oat)}
.foot__legal{margin-top:32px; padding-top:22px; border-top:1px solid var(--line-2); font-size:.8rem; color:var(--taupe); line-height:1.6}

/* survey chips + fields (survey.html) */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.field label{font-size:.85rem; color:var(--oat-dim); font-weight:600}
.field input, .field textarea{background:var(--espresso); border:1.5px solid var(--line); border-radius:11px; padding:12px 14px; color:var(--oat); font-family:var(--body); font-size:16px; min-height:var(--tap)}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--caramel)}
.q{margin-bottom:22px}
.q__label{font-size:1rem; font-weight:700; color:var(--oat); margin-bottom:12px}
.q__label small{font-weight:400; color:var(--taupe); font-family:var(--mono); font-size:0.74rem; letter-spacing:.04em; margin-left:6px}
.q__opts{display:flex; flex-wrap:wrap; gap:9px}
.chip{display:inline-flex; align-items:center; min-height:var(--tap); background:var(--espresso); border:1.5px solid var(--line); border-radius:100px; padding:9px 16px; font-size:.9rem; color:var(--oat-dim); cursor:pointer; font-family:var(--body)}
.chip:hover{border-color:var(--taupe)}
.chip.on{background:var(--caramel); border-color:var(--caramel); color:#2a1608; font-weight:700}
.q__other{margin-top:10px; font-size:16px; min-height:var(--tap); width:100%; background:var(--espresso); border:1.5px solid var(--line); border-radius:11px; padding:11px 14px; color:var(--oat); font-family:var(--body); font-size:.95rem}
.q__other:focus{outline:none; border-color:var(--caramel)}
.q__other[hidden]{display:none}
.card{background:var(--cocoa-900); border:1px solid var(--line-2); border-radius:22px; padding:clamp(24px,4vw,38px)}
.msg{color:var(--mulberry); font-size:.9rem; min-height:1.1em; margin:4px 0 10px}
.muted{color:var(--taupe)}

@media (max-width:640px){ .nav__links a:not(.nav__cta){display:none} }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

@media (max-width:900px){
  .nav__links a:not(.nav__cta){display:none}
  .brand{min-height:var(--tap)}
  .foot__col a{display:flex; align-items:center; min-height:var(--tap); margin-bottom:0; border-bottom:1px solid var(--line-2)}
  .foot__col a:last-child{border-bottom:none}
  .foot__links{gap:26px}
  .page-hero h1{font-size:var(--t-h1)}
  .essay h2{font-size:var(--t-h2)}
  .essay p,.essay li{font-size:var(--t-base)}
}

/* article / page banner */
.pagebanner{margin:0 0 clamp(28px,6vw,48px); height:clamp(180px,30vh,340px); overflow:hidden;
  border-block:1px solid var(--line-2); background:var(--cocoa-800)}
.pagebanner img{width:100%; height:100%; object-fit:cover; display:block}

/* ---------------------------------------------------------------------------
   Survey stepper. Cocoon asks one question at a time; the sibling brands use a
   scrolling card, a gated form and a slider form, so no two of the four read
   alike. See Downloads/SURVEY-CODEBOOK.md.
--------------------------------------------------------------------------- */
.step-bar{height:3px; border-radius:100px; background:var(--line); margin:0 0 22px; overflow:hidden}
.step-bar > i{display:block; height:100%; width:20%; background:var(--caramel); border-radius:100px; transition:width .28s ease}
@media (prefers-reduced-motion: reduce){ .step-bar > i{transition:none} }

.step-nav{display:flex; align-items:center; gap:14px; margin-top:6px}
.step-nav .step-count{font-size:.78rem; color:var(--oat-dim); letter-spacing:.04em; margin-left:auto; order:2}
.step-nav .step-next{order:3; min-width:132px; justify-content:center}
.step-nav .step-back{order:1; background:none; border:none; padding:6px 0; font-family:var(--body);
  font-size:.85rem; color:var(--oat-dim); cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.step-nav .step-back:hover{color:var(--oat)}
.step-nav .step-back[hidden], .step-nav .step-next[hidden]{display:none}

/* the real submit only appears on the final step */
#survey-form button[type="submit"][hidden],
#po-survey-form button[type="submit"][hidden]{display:none}

/* a single question at a time gets more room to breathe */
#survey-form .q[hidden], #po-survey-form .q[hidden]{display:none}
#survey-form .q, #po-survey-form .q{min-height:190px}
@media (max-width:640px){
  #survey-form .q, #po-survey-form .q{min-height:0}
  .step-nav .step-next{min-width:0; flex:1}
}