/* Project Case Study Layout */
*,
*::before,
*::after { box-sizing: border-box; }
html:focus-within { scroll-behavior: smooth; }
:root{
  --bg:#0b0c0e; --surface:#121318; --surface-2:#171923; --text:#e9ecf1; --muted:#a7afc0; --accent:#7aa2ff;
  --radius:14px; --shadow:0 8px 30px rgba(0,0,0,.35);
  --step-0: clamp(14px, 0.9vw + 10px, 16px);
  --step-1: clamp(20px, 1.4vw + 12px, 24px);
  --step-2: clamp(26px, 1.8vw + 14px, 34px);
  --step-3: clamp(34px, 2.4vw + 16px, 48px);
}
@media (prefers-color-scheme: light){
  :root{ --bg:#fcfcfd; --surface:#fff; --surface-2:#f2f4f8; --text:#0e1525; --muted:#5b6474; --accent:#365cff; --shadow:0 6px 24px rgba(14,21,37,.08); }
}
body{ margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; line-height:1.6; color:var(--text); background:var(--bg) }
h1,h2,h3{ line-height:1.15 }
h1{ font-size:var(--step-3); margin:.2em 0 .4em; letter-spacing:-.02em }
h2{ font-size:var(--step-2); margin:2rem 0 .75rem }
h3{ font-size:1.2rem; margin:1.2rem 0 .4rem }
p{ margin:0 0 1rem; font-size:var(--step-0); color:var(--text) }
.container{ width:min(1100px, 92vw); margin-inline:auto }

.site-header{ position:sticky; top:0; z-index:10; backdrop-filter: blur(10px);
  background: color-mix(in oklab, var(--bg) 85%, transparent); border-bottom:1px solid color-mix(in oklab, var(--muted) 20%, transparent) }
.header-inner{ display:flex; align-items:center; justify-content:space-between; min-height:64px }
.logo{ font-weight:700; text-decoration:none; color:var(--text) }
.logo .accent{ color:var(--accent) }

.breadcrumb ol{ list-style:none; display:flex; gap:.5rem; margin:0; padding:0; color:var(--muted); font-size:.9rem }
.breadcrumb a{ color:var(--muted); text-decoration:none }
.breadcrumb li[aria-current]{ color:var(--text) }

.hero{ padding: clamp(2.5rem, 6vw, 4rem) 0 0; }
.subtitle{ color:var(--muted) }
.cover{ margin-top:1rem; border-radius:var(--radius); overflow:clip; border:1px solid color-mix(in oklab, var(--muted) 20%, transparent); background:var(--surface); box-shadow:var(--shadow) }
.cover img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover }
.cover figcaption{ padding:.75rem 1rem; color:var(--muted); font-size:.95rem; background:var(--surface) }

.content{ display:grid; grid-template-columns: 260px 1fr; gap:2rem; padding: clamp(2rem, 4vw, 3rem) 0 4rem; }
@media (max-width: 960px){ .content{ grid-template-columns: 1fr } }
.case{ min-width: 0 }

.toc{ position:sticky; top:84px; align-self:start; background:var(--surface-2); padding:1rem; border-radius:var(--radius);
  border:1px solid color-mix(in oklab, var(--muted) 20%, transparent) }
.toc-title{ margin:0 0 .5rem; font-size:1rem; color:var(--muted) }
.toc ol{ margin:0; padding-left:1.1rem; display:grid; gap:.35rem }
.toc a{ color:var(--muted); text-decoration:none }
.toc a:hover{ color:var(--text) }

.block{ padding:1rem 0; border-bottom:1px solid color-mix(in oklab, var(--muted) 15%, transparent) }
.block:last-child{ border-bottom:0 }

.meta dl{ display:grid; grid-template-columns: repeat(4, minmax(120px,1fr)); gap:1rem; margin:0 0 1rem }
.meta dt{ font-weight:600; color:var(--muted) }
.meta dd{ margin:0 }
@media (max-width: 700px){ .meta dl{ grid-template-columns: repeat(2,1fr) } }

.pill-list{ display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin: .75rem 0 0; list-style:none }
.pill-list li{ border:1px solid color-mix(in oklab, var(--muted) 30%, transparent); padding:.35rem .6rem; border-radius:999px; color:var(--muted);
  background: color-mix(in oklab, var(--surface) 90%, transparent) }

.media{ margin:1rem 0 }
.media img{ width:100%; height:auto; border-radius:var(--radius); border:1px solid color-mix(in oklab, var(--muted) 20%, transparent); box-shadow:var(--shadow) }
.media figcaption{ color:var(--muted); font-size:.95rem; margin-top:.5rem }

.token-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem }
.token{ display:flex; align-items:center; gap:1rem; background:var(--surface); border-radius:var(--radius); padding:.75rem; border:1px solid color-mix(in oklab, var(--muted) 20%, transparent) }
.swatch{ width:42px; height:42px; border-radius:10px; }
.swatch.dialogue{ background: color-mix(in oklab, var(--accent) 40%, #fff) }
.swatch.veil{ background: color-mix(in oklab, var(--accent) 20%, #000) }
.swatch.cocoon{ background: color-mix(in oklab, #000 80%, var(--surface)) }
@media (max-width: 900px){ .token-grid{ grid-template-columns:1fr } }

.highlights{ padding-left:1.1rem }
.gallery{ display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; margin:1rem 0 }
.gallery img{ width:100%; height:auto; border-radius:var(--radius); border:1px solid color-mix(in oklab, var(--muted) 20%, transparent) }
@media (max-width: 900px){ .gallery{ grid-template-columns: 1fr 1fr } }
@media (max-width: 560px){ .gallery{ grid-template-columns: 1fr } }

.stats{ display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; list-style:none; padding:0 }
.stats li{ background:var(--surface); border-radius:var(--radius); border:1px solid color-mix(in oklab, var(--muted) 20%, transparent); padding:1rem; text-align:center }
.stats strong{ font-size:1.6rem }
.disclaimer{ color:var(--muted) }

.pager{ display:flex; align-items:center; gap:1rem; margin-top:2rem }
.pager .spacer{ flex:1 }
.btn{ display:inline-block; border:1px solid color-mix(in oklab, var(--muted) 28%, transparent); padding:.6rem .9rem; border-radius:999px; text-decoration:none; color:var(--text);
  background: color-mix(in oklab, var(--surface) 90%, transparent) }
.btn:hover{ border-color: color-mix(in oklab, var(--muted) 48%, transparent) }

.site-footer{ padding:2rem 0; background:var(--surface); border-top:1px solid color-mix(in oklab, var(--muted) 20%, transparent) }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; gap:.5rem }
.top{ text-decoration:none; color:var(--muted) }
.top:hover{ color:var(--text) }

.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip-link:focus{ position:fixed; left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:var(--accent); color:#fff; border-radius:8px; z-index:1001 }
:where(a,button,input,.btn):focus-visible{ outline:2px solid color-mix(in oklab, var(--accent) 40%, #fff); outline-offset:2px }