/* Site chrome for every case study in /work/<slug>/: header, footer, reading progress.
   Uses the homepage tokens and fonts so the move from portfolio to case study reads as one site.
   Load before the page's own styles. Fonts: Shippori Mincho, Zen Kaku Gothic New, DM Mono, Tiro Devanagari Hindi. */

:root{
  /* homepage tokens (src/styles/theme.css) */
  --site-bg:#F6F4EF; --site-ink:#1D1C1A; --site-muted:#5E5A53; --site-accent:#B23A26; --site-line:rgba(29,28,26,.12);
  --site-serif:"Shippori Mincho",serif; --site-sans:"Zen Kaku Gothic New",sans-serif; --site-mono:"DM Mono",monospace; --site-hindi:"Tiro Devanagari Hindi",serif;

}
::selection{background:var(--site-accent); color:#fff}
.cs-top .wrap,.cs-foot .wrap{max-width:1160px; margin:0 auto; padding-left:24px; padding-right:24px; box-sizing:border-box}

/* ---------- chrome: header (homepage look) ---------- */
.cs-top{position:sticky; top:0; z-index:50; background:rgba(246,244,239,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--site-line); font-family:var(--site-sans); color:var(--site-ink)}
.cs-top .wrap{display:flex; align-items:center; gap:18px; height:64px}
.cs-mark{flex:none; width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:var(--site-accent); color:#fff; font-family:var(--site-hindi); font-size:14px; line-height:1; text-decoration:none; border-radius:2px; box-shadow:inset 0 0 0 2px var(--site-accent),inset 0 0 0 3px rgba(255,255,255,.55)}
.cs-mark span:first-child{transform:translateY(-2px)} .cs-mark span:last-child{transform:translateY(2px); margin-left:-1px}
.cs-back{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--site-muted); text-decoration:none; white-space:nowrap; transition:color .2s}
.cs-back:hover{color:var(--site-accent)}
.cs-product{min-width:0; overflow:hidden; text-overflow:ellipsis; font-family:var(--site-serif); font-size:17px; padding-left:18px; border-left:1px solid var(--site-line); white-space:nowrap; color:var(--site-ink); text-decoration:none}
.cs-toc{display:flex; gap:22px; margin-left:auto; overflow-x:auto; scrollbar-width:none}
.cs-toc::-webkit-scrollbar{display:none}
.cs-toc a,.cs-site a{position:relative; white-space:nowrap; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--site-muted); text-decoration:none; padding:6px 0; transition:color .2s}
.cs-toc a::after,.cs-site a::after{content:""; position:absolute; left:0; bottom:2px; height:1px; width:0; background:var(--site-accent); transition:width .4s var(--ease)}
.cs-toc a:hover,.cs-site a:hover,.cs-toc a.on{color:var(--site-ink)}
.cs-toc a:hover::after,.cs-site a:hover::after,.cs-toc a.on::after{width:100%}
.cs-site{flex:none; display:flex; gap:22px; padding-left:22px; border-left:1px solid var(--site-line)}
.progress{position:absolute; left:0; bottom:-1px; height:2px; background:var(--site-accent); width:0}
@media (max-width:900px){ .cs-toc{display:none} .cs-site{margin-left:auto} }
@media (max-width:560px){ .cs-back{display:none} .cs-site{gap:16px; padding-left:0; border-left:0} .cs-top .wrap{gap:14px} }

/* ---------- chrome: footer (homepage ink band) ---------- */
.cs-foot{background:var(--site-ink); color:rgba(246,244,239,.7); font-family:var(--site-mono); font-size:12px}
.cs-foot .wrap{display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; padding-top:40px; padding-bottom:48px}
.cs-foot a{color:var(--site-bg); text-decoration:none; border-bottom:1px solid rgba(246,244,239,.35); transition:border-color .2s}
.cs-foot a:hover{border-color:var(--site-bg)}