/* Stef Liashuk portfolio shell: one frame for every case. Each case sets only --accent. */
:root{
  --canvas:#F3F2EE; --paper:#FFFFFF; --ink:#1A1A18; --muted:#5E5D57; --line:#DEDCD4;
  --night:#161615; --night-ink:#EEEDE8; --night-muted:#A9A8A1; --night-line:#2E2D2A; --night-panel:#201F1D;
  --f-display:"Host Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body:"Host Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sh:#1A1A18; color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --canvas:#111110; --paper:#1A1A19; --ink:#ECEBE6; --muted:#A3A29B; --line:#2B2A28;
  --night:#0B0B0A; --night-panel:#171716; --night-line:#2A2927; --sh:#000; color-scheme:dark}}
:root[data-theme="dark"]{
  --canvas:#111110; --paper:#1A1A19; --ink:#ECEBE6; --muted:#A3A29B; --line:#2B2A28;
  --night:#0B0B0A; --night-panel:#171716; --night-line:#2A2927; --sh:#000; color-scheme:dark}
body{background:var(--canvas);color:var(--ink);font-family:var(--f-body)}

/* header */
.sbar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--canvas) 86%,transparent);-webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);border-bottom:1px solid var(--line)}
.sbar .in{max-width:1200px;margin:0 auto;padding:15px max(20px,env(safe-area-inset-left,0px));display:flex;justify-content:space-between;align-items:center;gap:16px}
.sbar .me{text-decoration:none;color:var(--ink);display:flex;align-items:baseline;gap:12px;min-width:0}
.sbar .me b{font:600 18px/1 var(--f-display);letter-spacing:-.02em;white-space:nowrap}
.sbar .me span{font:400 11.5px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);white-space:nowrap}
.sbar nav{display:flex;align-items:center;gap:22px;font:400 12px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.07em}
.sbar nav a{text-decoration:none;color:var(--muted);display:flex;align-items:center;gap:7px;padding:6px 0}
.sbar nav a:hover{color:var(--ink)}
.sbar nav a[aria-current="page"]{color:var(--ink)}
.sbar nav a[aria-current="page"]::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent,var(--ink))}
@media (max-width:640px){.sbar .me span{display:none}.sbar nav{gap:16px}.sbar nav .ext{display:none}}

/* case mark above the eyebrow */
.cmark{display:flex;align-items:center;gap:12px;margin-bottom:18px;color:var(--ink)}
.cmark svg{height:22px;width:auto;display:block}
.cmark .wm{font-family:"Source Serif 4",Georgia,serif;font-size:26px;line-height:1;letter-spacing:.01em}

/* footer */
.sfoot{border-top:1px solid var(--line);margin-top:clamp(40px,6vw,80px)}
.sfoot .in{max-width:1200px;margin:0 auto;padding:clamp(40px,6vw,72px) max(20px,env(safe-area-inset-left,0px)) 40px}
.nextcase{display:grid;grid-template-columns:1fr auto;align-items:end;gap:20px;text-decoration:none;color:var(--ink);padding-bottom:clamp(32px,5vw,56px);border-bottom:1px solid var(--line)}
.nextcase .k{font:400 12px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);display:block;margin-bottom:14px}
.nextcase b{font:600 clamp(30px,4.6vw,60px)/1.02 var(--f-display);letter-spacing:-.03em;display:block;max-width:20ch}
.nextcase i{font-style:normal;font:500 clamp(28px,4vw,48px)/1 var(--f-display);color:var(--nc,var(--accent));transition:transform .3s}
.nextcase:hover i{transform:translateX(8px)}
.sfoot .base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;font:400 12px/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.sfoot .base a{color:var(--ink);text-decoration:none}

/* eight links: tighten, hide case links below laptop width */
@media (max-width:1180px){.sbar nav{gap:16px}.sbar nav a.cs{display:none}}