/* === tokens — single source of truth, matches CLAUDE.md === */
:root{
  --paper:#FBFAFC;--ink:#17141C;--muted:#6C6678;--rule:#E4E1E9;
  --mag:#E0227E;--vio:#6A2BE0;
  --grad-h:linear-gradient(135deg,var(--mag),var(--vio));
  --grad-v:linear-gradient(180deg,var(--mag),var(--vio));
  --vio-t:#E9E0FB;--mag-t:#FBDDEC;--neutral-t:#EAE8EF;
  --display:"Familjen Grotesk",system-ui,sans-serif;
  --prose:"Newsreader",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --pad:clamp(20px,5vw,72px);
}

/* === base resets === */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--prose);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:inherit}
::selection{background:rgba(224,34,126,.14)}
:focus-visible{outline:2px solid var(--vio);outline-offset:3px;border-radius:2px}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-weight:500}

/* === header / nav === */
header{padding:0}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;
  padding-top:20px;padding-bottom:20px}
@media(max-width:719px){.bar{padding-top:14px;padding-bottom:14px}}
.logo{display:flex;align-items:center;text-decoration:none}
.logo-stack{position:relative;display:inline-block;height:25px;width:142px;flex-shrink:0}
.logo-stack img{position:absolute;top:0;left:0;height:25px;width:auto;display:block;
  border:none;background:none;border-radius:0;box-shadow:none;padding:0;transition:opacity .18s}
.logo-white{opacity:0}
nav{display:flex;gap:26px;font-family:var(--display);font-size:15px}
nav a{text-decoration:none;color:var(--muted);transition:color .18s}
nav a:hover{color:var(--ink)}

/* === footer === */
footer{padding:30px 0 46px;border-top:1px solid var(--rule);margin-top:clamp(46px,7.5vh,84px)}

/* === chapter nav (case studies) === */
.chapnav{position:sticky;top:0;z-index:10;background:rgba(251,250,252,.92);
  backdrop-filter:blur(8px);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  margin-top:clamp(30px,5vh,50px)}
.chapnav-in{display:flex;gap:6px;overflow-x:auto;padding:11px 0;scrollbar-width:none}
.chapnav-in::-webkit-scrollbar{display:none}
.chapnav a{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;padding:6px 13px;border-radius:100px;
  white-space:nowrap;transition:background .18s,color .18s}
.chapnav a:hover{background:var(--vio-t);color:var(--vio)}
.chapnav-v{display:none;position:fixed;right:calc(50% + 622px);
  top:50%;transform:translateY(-50%);z-index:10;flex-direction:column;gap:4px}
.chapnav-v a{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;
  padding:6px 12px;border-radius:100px;white-space:nowrap;
  transition:background .18s,color .18s}
.chapnav-v a:hover,.chapnav-v a.active{background:var(--vio-t);color:var(--vio)}
@media(min-width:1540px){.chapnav-v{display:flex}.chapnav{display:none}}

/* === accessibility === */
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}}