/* ═══ SHARED CHROME — single source of truth for index.html and writing/*.
   Four strata: tokens · globals · components (media-scoped) · SPA-only behavior (.spa).
   Edit here only. scripts/verify-chrome.mjs fails if copies diverge or scoping flattens. ═══ */

/* ── 1. tokens ── */
:root{
  --parchment:#F4F2EB;--parchment-warm:#F0ECE2;--parchment-deep:#EAE5DB;
  --ink:#1C1A17;--ink-light:#3A3632;--ink-faint:#6B6560;
  --rule:#C4BAA8;--rule-light:#D8D0C2;
  --burgundy:#6B2D3E;--gold:#8C7A4B;--gold-faint:#C4B88A;
  --overlay:rgba(24,22,19,0.88);
  --bg-platforms:#EEEFEC;--bg-research:#F5F2EA;--bg-analysis:#F1F1EB;--bg-results:#F2F0EA;--bg-writing:#F4F1E8;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sc:'Cormorant SC','Cormorant Garamond',Georgia,serif;
  --mono:'IBM Plex Mono','Consolas',monospace;
  --measure:38em;--gutter:2.5rem;--max-w:1200px;--stage:1480px;--gutter-folio:clamp(4rem,7vw,8rem);--gap-content:2rem;
  --ease:cubic-bezier(0.22,0.61,0.36,1);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
}

/* ── 2. global physiology ── */
html::-webkit-scrollbar{display:none}
html{-ms-overflow-style:none;scrollbar-width:none}
.texture{position:fixed;inset:0;pointer-events:none;z-index:0;transition:opacity 0.6s var(--ease)}
.texture-hatch{
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 60L60 0M-5 5L5-5M55 65L65 55' stroke='%23B0A890' stroke-width='0.4' opacity='0.12'/%3E%3Cpath d='M60 60L0 0M65 5L55-5M5 65L-5 55' stroke='%23B0A890' stroke-width='0.3' opacity='0.08'/%3E%3C/svg%3E");
}
.texture-vignette{background:radial-gradient(ellipse at 50% 30%,transparent 40%,rgba(180,170,155,0.12) 100%)}
.tex-landing{opacity:0.5}
.tex-platforms{opacity:1.2}
.tex-research{opacity:0.6}
.tex-analysis{opacity:0.9}
.tex-results{opacity:0.7}
.tex-writing{opacity:0.65}

/* ── 3. component chrome ── */
.nav-bar{position:fixed;top:0;left:0;right:0;z-index:100;border-bottom:0.5px solid var(--rule);padding:0.85rem 0}
.nav-inner{max-width:var(--stage);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between}
.nav-home{font-family:var(--sc);font-size:0.82rem;letter-spacing:0.2em;color:var(--ink-light);cursor:pointer;background:none;border:none;text-decoration:none}
.nav-home:hover{color:var(--ink)}
.nav-tabs{display:flex;gap:2rem;list-style:none}
.nav-tab{font-family:var(--sc);font-size:0.78rem;letter-spacing:0.15em;color:var(--ink-faint);background:none;border:none;cursor:pointer;padding:0.3em 0;border-bottom:1px solid transparent;transition:color 0.25s,border-color 0.25s;text-transform:lowercase;text-decoration:none}
.nav-tab:hover{color:var(--ink)}
.nav-tab.on{color:var(--burgundy);border-bottom-color:var(--burgundy)}
.ft{text-align:center;padding:3rem var(--gutter) 2rem;position:relative;z-index:1}
.ft::before{content:'';display:block;width:120px;height:0.5px;background:var(--rule);margin:0 auto 1.5rem}
.ft span{font-family:var(--sc);font-size:0.68rem;letter-spacing:0.15em;color:var(--ink-faint)}
.ft a{font-family:var(--sc);font-size:0.68rem;letter-spacing:0.15em;color:var(--ink-faint);text-decoration:none;border-bottom:0.5px solid transparent;transition:color 0.2s,border-color 0.2s}
.ft a:hover{color:var(--burgundy);border-bottom-color:var(--burgundy)}

.essay-switch{position:fixed;top:3.4rem;left:0;right:0;z-index:90;background:var(--bg-writing);border-bottom:0.5px solid var(--rule-light);padding:0.55rem 0}
.essay-switch-inner{max-width:var(--stage);margin:0 auto;padding:0 var(--gutter);display:flex;gap:1.8rem}
.essay-switch a{font-family:var(--sc);font-size:0.68rem;letter-spacing:0.14em;color:var(--ink-faint);text-decoration:none;padding:0.2em 0;border-bottom:1px solid transparent;text-transform:lowercase;transition:color 0.25s,border-color 0.25s}
.essay-switch a:hover{color:var(--ink)}
.essay-switch a.on{color:var(--burgundy);border-bottom-color:var(--burgundy)}

@media(max-width:768px){
.nav-tabs{gap:1rem}
}
@media(max-width:480px){
.nav-tabs{gap:0.7rem}
.nav-tab{font-size:0.65rem;letter-spacing:0.08em}
}

/* ── 4. SPA-only behavior (documents never hide their nav) ── */
.nav-bar.spa{transform:translateY(-100%);transition:transform 0.4s cubic-bezier(0.22,0.61,0.36,1),background 0.5s}
.nav-bar.spa.vis{transform:translateY(0)}