/* ============================================================
   Rebusly Broadsheet — shared design system for static pages
   Single source of truth. Link with:
     <link rel="stylesheet" href="/broadsheet.css">
   Tokens mirror src/brand-constants.js (CREAM there === --paper here).

   Two section tiers:
     • Showcase  — centered .eyebrow + serif h2 (dramatic moments)
     • Department — wrap.dept: left-aligned, accent lead-tick, 2px top rule
                    (informational sections)
   Surfaces are --paper. The v1 "heavy cream" (#F5EDD8) is retired as a
   surface fill; cards are paper + hairline + soft shadow, never heavy
   ink outlines. Dividers are rules, not boxes.
   ============================================================ */

/* --- Fonts --- */
@font-face{font-family:LP;font-style:normal;font-weight:900;font-display:block;src:url('/fonts/playfair-display-latin-900-normal.woff2')format('woff2')}
@font-face{font-family:LP;font-style:italic;font-weight:700;font-display:block;src:url('/fonts/playfair-display-latin-700-italic.woff2')format('woff2')}
@font-face{font-family:LPI;font-style:italic;font-weight:400;font-display:block;src:url('/fonts/playfair-display-latin-400-italic.woff2')format('woff2')}
@font-face{font-family:LS;font-style:normal;font-weight:400;font-display:block;src:url('/fonts/dm-sans-latin-400-normal.woff2')format('woff2')}
@font-face{font-family:LS;font-style:normal;font-weight:700;font-display:block;src:url('/fonts/dm-sans-latin-700-normal.woff2')format('woff2')}

/* --- Tokens --- */
:root{
  --paper:#FDFAF2; --ink:#221808; --ink-soft:#3D2E18; --brown:#7A5020; --faint:#BCA882; --line:#E7DCC6;
  --cream:#F5EDD8; /* legacy v1 — do NOT use as a surface fill; kept for back-compat only */
  --blue:#2558A8; --green:#2A7A50; --maroon:#6E1A2E; --pink:#D4207A; --orange:#D4700A; --gold:#C8960C; --teal:#00B8A0;
  --brand:#7A5020; --violet:#6E2DBE; /* Rebusly brand voice = muted brown (warm, in-palette, not a section color) */
}

/* --- Base --- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink); font-family:LS,sans-serif; min-height:100vh; overflow-x:hidden;
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(212,112,10,0.06), transparent 60%),
    radial-gradient(100% 60% at 100% 0%, rgba(37,88,168,0.05), transparent 55%);
  background-attachment:fixed;
}
a{color:inherit}
::selection{background:var(--gold);color:var(--paper)}

/* --- Layout + rules --- */
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.rule{height:2px;background:var(--ink);max-width:1080px;margin:0 auto}
.rule-thin{height:1px;background:var(--line);max-width:1080px;margin:0 auto}

/* --- Masthead (slim: hamburger · wordmark · play). All wayfinding lives in the drawer. --- */
.masthead{display:flex;align-items:center;gap:13px;padding:13px 0}
.mh-brand{font-family:LP,Georgia,serif;font-size:28px;font-weight:900;letter-spacing:-0.5px;text-decoration:none;line-height:1;color:var(--ink)}
.mh-play{font-family:LS,sans-serif;font-size:13px;font-weight:700;color:var(--brand);text-decoration:none;white-space:nowrap;margin-left:auto}
.mh-burger{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin:-4px 4px -4px -6px;cursor:pointer;color:var(--ink);-webkit-tap-highlight-color:transparent}
.mh-burger svg{width:24px;height:24px}
.mh-burger:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

/* --- Site menu drawer (CSS-only off-canvas; #rb-menu checkbox toggles) --- */
.rb-menu-cb{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
.rb-drawer{position:fixed;inset:0;z-index:200;visibility:hidden}
.rb-scrim{position:absolute;inset:0;background:rgba(24,18,10,.45);opacity:0;transition:opacity .25s ease;cursor:pointer}
.rb-panel{position:absolute;top:0;left:0;bottom:0;width:min(330px,84vw);background:var(--paper);box-shadow:2px 0 30px rgba(0,0,0,.2);transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow-y:auto;padding-top:env(safe-area-inset-top,0)}
.rb-menu-cb:checked~.rb-drawer{visibility:visible}
.rb-menu-cb:checked~.rb-drawer .rb-scrim{opacity:1}
.rb-menu-cb:checked~.rb-drawer .rb-panel{transform:translateX(0)}
.rb-dhead{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 14px 22px}
.rb-dhead .mh-brand{font-size:24px}
.rb-close{display:inline-flex;padding:6px;cursor:pointer;color:var(--ink)}
.rb-close svg{width:22px;height:22px}
.rb-ddiv{height:1px;background:var(--line);margin:0 22px 6px}
.rb-play{display:flex;align-items:center;justify-content:space-between;margin:10px 18px 6px;padding:13px 16px;background:var(--ink);color:var(--paper);font-family:LS;font-size:13px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;text-decoration:none;border-radius:6px}
.rb-play svg{width:14px;height:14px;flex-shrink:0}
.rb-dlabel{font-family:LS;font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--brown);padding:16px 22px 4px}
.rb-dlink{display:block;font-family:LP,Georgia,serif;font-size:19px;font-weight:700;letter-spacing:-.2px;color:var(--ink);text-decoration:none;padding:11px 22px}
.rb-dlink:hover{color:var(--brand)}
.rb-dlink[aria-current]{color:var(--brand)}
.rb-dsub{display:block;font-family:LS,sans-serif;font-size:13px;font-weight:600;color:#6B5836;text-decoration:none;padding:5px 22px 5px 38px}
.rb-dsub:hover{color:var(--brand)}
.rb-dsub[aria-current]{color:var(--brand)}
@media(prefers-reduced-motion:reduce){.rb-panel,.rb-scrim{transition:none}}

/* Sub-nav — second tier under the global bar (e.g. "Commissions Desk", "Education Desk", "News Desk") */
.subnav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0 13px;flex-wrap:wrap}
.subnav-label{font-family:LS,sans-serif;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brown)}
.subnav-links{display:flex;gap:22px;font-family:LS,sans-serif;font-size:13px;font-weight:700}
.subnav-links a{text-decoration:none;color:var(--ink-soft);transition:color .15s}
.subnav-links a:hover{color:var(--brand)}
.subnav-links a[aria-current]{color:var(--brand);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px} /* page-level "you are here" */
.subnav-links a.in-view{color:var(--brand)} /* scroll-spy: section in view — maroon only, no underline */
@media(max-width:620px){.subnav{justify-content:center}.subnav-label{display:none}}

/* --- Type scale --- */
h1{font-family:LP,Georgia,serif;font-size:clamp(40px,7vw,72px);font-weight:900;line-height:0.98;letter-spacing:-1.5px;margin:0 0 22px}
h1 em{font-family:LP;font-style:italic;color:var(--brand)}
h2{font-family:LP,Georgia,serif;font-size:clamp(28px,4.5vw,40px);font-weight:900;letter-spacing:-0.8px;text-align:center;line-height:1.08;margin:0 0 12px}
h2 em{font-family:LP;font-style:italic;color:var(--brand)}
.lede{font-size:18px;line-height:1.6;color:var(--ink-soft);max-width:32em;margin:0 0 30px}
.eyebrow{font-family:LS;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--brown);text-align:center;margin-bottom:10px}
.sec-sub{text-align:center;font-size:16px;color:var(--ink-soft);max-width:36em;margin:0 auto 40px;line-height:1.6}
.kicker{font-family:LS;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--brand);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:28px;height:2px;background:var(--brand);display:inline-block}

/* --- Department head (left-aligned, informational) --- */
.dept{border-top:2px solid var(--ink);padding-top:18px}
.dept .eyebrow{text-align:left;display:flex;align-items:center;gap:10px}
.dept .eyebrow::before{content:"";width:24px;height:2px;background:var(--brand);display:inline-block}
.dept h2{text-align:left;font-size:clamp(26px,4vw,34px)}
.dept .sec-sub{text-align:left;margin:0 0 36px}

/* --- Buttons --- */
.btn{background:var(--ink);color:var(--paper);border:none;border-radius:6px;padding:14px 30px;font-family:LS;font-size:15px;font-weight:700;letter-spacing:.3px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:opacity .15s}
.btn:hover{opacity:.9}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{opacity:.9}
.btn-ghost{background:transparent;color:var(--ink);border:none;font-weight:700;font-size:14px;text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:2px;transition:color .15s,border-color .15s}
.btn-ghost:hover{color:var(--brand);border-color:var(--brand)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* --- Bands --- */
.band{padding:64px 0}
.band-alt{background:linear-gradient(180deg,transparent,rgba(122,80,32,0.04));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* --- Panel: the canonical paper card (hairline + soft shadow, never heavy ink outline) --- */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 14px 34px -22px rgba(0,0,0,0.55);transition:transform .18s,box-shadow .18s}
.panel:hover{transform:translateY(-4px);box-shadow:0 22px 44px -22px rgba(0,0,0,0.62)}
.panel-bar{height:5px;background:var(--accent,var(--brand))} /* accent top bar; set --accent per card */

/* --- Ruled broadsheet columns (top rule + content, no boxes) --- */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:880px){.grid4{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.grid4{grid-template-columns:1fr}}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
@media(max-width:740px){.grid3{grid-template-columns:1fr;gap:22px}}
.feat{padding:18px 0 0;border:none;border-top:2px solid var(--ink);background:none}
.feat .ic{display:block;margin-bottom:14px;line-height:0}
.feat .ic svg{width:26px;height:26px}
.feat h4{font-family:LP;font-size:18px;font-weight:900;margin:0 0 7px}
.feat p{font-size:13px;line-height:1.55;color:var(--ink-soft)}

/* --- Numbered steps (auto-numbered ruled columns) --- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;counter-reset:s}
@media(max-width:740px){.steps{grid-template-columns:1fr;gap:22px}}
.step{position:relative;padding:20px 0 0;background:none;border:none;border-top:2px solid var(--ink)}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:LP;font-size:38px;font-weight:900;color:var(--brand);line-height:1;display:block;margin-bottom:10px}
.step h4{font-family:LP;font-size:19px;font-weight:900;margin:0 0 7px}
.step p{font-size:14px;line-height:1.6;color:var(--ink-soft)}

/* --- FAQ accordion --- */
.faq{max-width:720px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{font-family:LP;font-size:17px;font-weight:900;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::after{content:"+";font-size:22px;color:var(--orange);transition:transform .2s}
.faq details[open] summary::after{content:"\2212"}
.faq .body{font-size:14.5px;line-height:1.65;color:var(--ink-soft);padding:13px 0 2px;max-width:60ch}

/* --- Final CTA --- */
.final{text-align:center;padding:72px 0}
.final h2{margin-bottom:8px}
.final .lede{margin:0 auto 28px;text-align:center}

/* --- Reveal on load --- */
.rv{opacity:0;transform:translateY(16px);animation:rvUp .7s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes rvUp{to{opacity:1;transform:none}}

/* --- Footer --- */
footer{text-align:center;padding:30px 24px 48px;font-size:11px;color:var(--faint);border-top:1px solid var(--line)}
footer a{color:var(--brown);text-decoration:none}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  .rv{opacity:1!important;transform:none!important}
}