/* L1 platform scale: Material 16sp body; Apple 44pt hit areas; WCAG 24px minimum. */
:root {
  --fs-body:16px; --fs-small:14px; --fs-tiny:13px;
  --fs-h1:clamp(32px,8vw,56px); --fs-h2:clamp(24px,6vw,36px); --fs-h3:20px;
  --pill-h:36px;
  --shell-font:"Bricolage Grotesque","Bricolage Body Fallback",Arial,sans-serif;
  --green:#4E9E3E;
}
[data-site-header] { position:sticky; top:0; z-index:50; background:var(--paper); color:var(--ink); border-bottom:1px solid var(--quiet); font-family:var(--shell-font); }
.shell-bar { min-height:64px; padding:env(safe-area-inset-top) 16px 0; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.shell-logo { font-family:"Bricolage Grotesque","Bricolage Hero Fallback",Arial,sans-serif; font-weight:800; font-variation-settings:"wdth" 80; font-size:19px; letter-spacing:-.01em; text-decoration:none; display:inline-flex; align-items:baseline; white-space:nowrap; color:inherit; }
.shell-logo i { width:.34em; height:.34em; border-radius:50%; margin:0 .05em 0 .06em; background:#B45309; }
.shell-actions { display:flex; align-items:center; gap:6px; }
.shell-icon { width:44px; height:44px; flex-shrink:0; border:0; padding:0; display:grid; place-items:center; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.shell-icon svg,.shell-instagram svg { width:20px; height:20px; }
#snd[aria-pressed="false"] .wave,#snd[aria-pressed="true"] .mute { opacity:0; }
.shell-pill,.shell-login { position:relative; display:inline-flex; align-items:center; height:var(--pill-h); font-size:var(--fs-small); font-weight:600; color:inherit; text-decoration:none; padding:0 12px; white-space:nowrap; }
.shell-pill { border:1.5px solid currentColor; border-radius:999px; }
.shell-login { padding:0 4px; }
.shell-pill::after,.shell-login::after { content:""; position:absolute; inset:50% 0 auto; height:44px; transform:translateY(-50%); }
.shell-actions [hidden],.shell-menu-list [hidden],.shell-menu[hidden] { display:none; }
html.shell-menu-open { overflow:hidden; }
.shell-menu { position:fixed; inset:0; z-index:150; background:rgba(17,17,17,.45); display:flex; align-items:flex-end; justify-content:center; font-family:var(--shell-font); color:var(--ink); }
.shell-menu-panel { width:min(560px,100%); max-height:90svh; overflow:auto; padding:20px 16px calc(20px + env(safe-area-inset-bottom)); border-radius:28px 28px 0 0; background:var(--paper); }
.shell-menu-top { display:flex; justify-content:space-between; align-items:center; }
.shell-menu-top h2 { font-size:var(--fs-h2); margin:0; }
.shell-menu-list { display:grid; }
.shell-menu-list a { min-height:44px; display:flex; align-items:center; text-decoration:none; color:inherit; font-size:var(--fs-body); padding:6px 0; }
.shell-menu-list a:hover { color:var(--violet); }
[data-site-footer] { background:var(--ink); color:var(--paper); padding:20px 16px calc(16px + env(safe-area-inset-bottom)); font:500 var(--fs-tiny)/1.45 var(--shell-font); }
.shell-footer-links { display:flex; flex-wrap:wrap; align-items:center; gap:0 20px; max-width:1180px; margin:auto; }
.shell-footer-links a { display:inline-flex; align-items:center; min-height:44px; color:inherit; text-decoration:none; }
.shell-instagram { justify-content:center; min-width:44px; }
.shell-made { display:block; width:100%; margin-top:8px; }
.shell-burst { position:fixed; z-index:200; width:7px; height:7px; border-radius:50%; pointer-events:none; }
[data-site-header] :focus-visible,.shell-menu :focus-visible,[data-site-footer] :focus-visible { outline:2px solid var(--violet); outline-offset:3px; }
@media(max-width:359px) { .shell-bar { padding-left:16px; padding-right:16px; gap:4px; } .shell-actions { gap:2px; } .shell-pill { padding:0 8px; } }
@media(prefers-reduced-motion:reduce) { .shell-burst { display:none; } }
/* Head-time session marker covers any content auth links until they swap. */
[data-session="member"] a[href^="/auth?intent="] { visibility: hidden; }

/* Public ThemeToggle shares the app preference and accessible switch semantics. */
.shell-theme { width:44px; height:44px; border:0; background:none; padding:4px; color:var(--ink); flex-shrink:0; cursor:pointer; }
.shell-theme-track { display:flex; align-items:center; width:36px; height:22px; border:1px solid currentColor; border-radius:999px; padding:2px; }
.shell-theme-knob { width:16px; height:16px; border-radius:50%; background:currentColor; transition:transform 200ms; }
.shell-theme[aria-checked="true"] .shell-theme-knob { transform:translateX(12px); }
:root[data-theme="dark"] { --paper:#111111; --ink:#FAFAF7; --mute:#B9B9B3; --muted:#B9B9B3; --line:#62625D; --violet:#B69AFF; --grey:#A9A9A3; --quiet:#62625D; --border:rgba(250,250,247,.3); --border-strong:rgba(250,250,247,.5); }
.dark { --paper:#FAFAF7; --ink:#111111; --mute:#B9B9B3; --grey:#A9A9A3; }
@media(prefers-reduced-motion:reduce) { .shell-theme-knob { transition:none; } }

/* Phones: the Menu dialog carries Log in, so the header drops only that duplicate. The sound control stays visible at every width — it is the one stateful header control and the e2e shell contract asserts it at 375px. */
@media(max-width:479px) { .shell-actions .shell-login { display:none; } .shell-logo { font-size:16px; } .shell-pill { padding-inline:8px; } .shell-actions { gap:2px; } }

/* Document pages share the same phone gutter and retain ink on pale callouts. */
main.wrap:has(.doc) { width:min(860px,calc(100% - 32px)); }
:root[data-theme="dark"] .notice, :root[data-theme="dark"] .legal-table th { color:#111111; --violet:#7C3AED; }