/* ============================================================================
   Case-study pages (projects/*.html) - shares the terminal look of the main site:
   same nav + footer, self-hosted fonts, the same colour-scheme palettes, a typed
   command that "runs" and then reveals the content.
   ========================================================================== */

html{ box-sizing:border-box; }
*,*:before,*:after{ box-sizing:inherit; }

/* ---- self-hosted fonts (paths relative to /assets/css/) ---- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400-latin.woff2") format("woff2");}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-600-latin.woff2") format("woff2");}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/inter-700-latin.woff2") format("woff2");}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/space-grotesk-500-latin.woff2") format("woff2");}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/space-grotesk-600-latin.woff2") format("woff2");}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/space-grotesk-700-latin.woff2") format("woff2");}
@font-face{font-family:'FontAwesome';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/fontawesome-subset.woff2") format("woff2");}
.fa{ font-family:'FontAwesome'; font-style:normal; font-weight:400; line-height:1; -webkit-font-smoothing:antialiased; display:inline-block; }
.fa-github:before{ content:"\f09b"; } .fa-linkedin:before{ content:"\f0e1"; } .fa-medium:before{ content:"\f23a"; }
.fa-envelope:before{ content:"\f0e0"; } .fa-arrow-right:before{ content:"\f061"; }
.fa-angle-left:before{ content:"\f104"; } .fa-angle-right:before{ content:"\f105"; }
.fa-cloud:before{ content:"\f0c2"; }

/* ---- colour-scheme palettes (matrix default; tokyo/dracula via data-accent) ---- */
:root{
  --accent:#4AF262; --accent-rgb:74,242,98; --accent-deep:#16a34a; --accent-deep-rgb:22,163,74; --accent-light:#86efac;
  --accent-grad:linear-gradient(135deg,var(--accent-deep) 0%,var(--accent) 100%);
  --dk-bg-deep:#0b100d; --dk-bg:#0f1612; --dk-surface:#18211b; --dk-surface-soft:#121a15; --dk-shade-rgb:5,12,7;
  --ink:#eaf1ec; --ink-soft:#c4d0c7; --muted:#8fa096; --border:rgba(218,239,223,.12);
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}
:root[data-accent="tokyo"]{ --accent:#7aa2f7; --accent-rgb:122,162,247; --accent-deep:#3d59a1; --accent-deep-rgb:61,89,161; --accent-light:#b4c2f7; --dk-bg-deep:#0a0d14; --dk-bg:#0e1119; --dk-surface:#171b28; --dk-surface-soft:#101320; --dk-shade-rgb:6,9,16; }
:root[data-accent="dracula"]{ --accent:#bd93f9; --accent-rgb:189,147,249; --accent-deep:#7c5cbf; --accent-deep-rgb:124,92,191; --accent-light:#e0ccff; --dk-bg-deep:#0f0e17; --dk-bg:#14131f; --dk-surface:#1d1c2b; --dk-surface-soft:#16151f; --dk-shade-rgb:9,8,16; }

html{ background:var(--dk-bg-deep); scroll-behavior:smooth; }
body{
  margin:0; min-height:100vh;
  font-family:"Inter",system-ui,sans-serif; color:var(--ink-soft);
  line-height:1.7; font-size:16px; -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(60rem 44rem at 92% -10%, rgba(var(--accent-rgb),.10), transparent 60%),
    radial-gradient(48rem 34rem at -8% 6%, rgba(var(--accent-deep-rgb),.08), transparent 58%),
    var(--dk-bg);
}
::selection{ background:rgba(var(--accent-rgb),.28); color:#fff; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---- desktop nav (identical to the main site) ---- */
.navbar{
  position:sticky; top:0; z-index:1000; overflow:hidden;
  padding:4px 100px 4px 22px;
  background:rgba(var(--dk-shade-rgb),.88);
  -webkit-backdrop-filter:saturate(150%) blur(14px); backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid rgba(var(--accent-rgb),.12);
  box-shadow:0 8px 26px rgba(var(--dk-shade-rgb),.22);
}
.navbar a{ text-decoration:none; }
.navbar .brand{ float:left; }
.navbar .brand p,.navbar .nav-text p{ line-height:1.2; }
.navbar .brand p{ margin:16px 11px; padding:7px 10px; font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:18px; color:#fff; letter-spacing:-.01em; }
.navbar .brand p::after{ content:"."; color:var(--accent); }
.navbar .nav-text{ float:right; position:relative; color:#e7ebf3; transition:color .18s ease; }
.navbar .nav-text p{ margin:16px 11px; padding:7px 10px; border-radius:9px; font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:12.5px; letter-spacing:.05em; transition:background .18s ease, color .18s ease, box-shadow .18s ease; }
.navbar .nav-text:hover{ color:#fff; }
.navbar .nav-text:hover p{ background:rgba(var(--accent-rgb),.10); }
.navbar .nav-text.is-active p{ color:#f7fff8; background:rgba(var(--accent-rgb),.15); box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.34),0 0 20px rgba(var(--accent-rgb),.08); }
@media (min-width:993px) and (max-width:1120px){ .navbar .nav-text p{ margin:16px 8px; font-size:12px; letter-spacing:.03em; } }
@media (max-width:992px){ .navbar{ display:none; } }

/* ---- mobile bar + slide menu (identical to the main site) ---- */
.mnav-bar{ display:none; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:1000; padding:10px 16px;
  background:rgba(var(--dk-shade-rgb),.88); border-bottom:1px solid rgba(var(--accent-rgb),.12);
  -webkit-backdrop-filter:saturate(150%) blur(14px); backdrop-filter:saturate(150%) blur(14px); }
@media (max-width:992px){ .mnav-bar{ display:flex; } }
.mnav-brand{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:20px; color:#fff; text-decoration:none; letter-spacing:-.01em; }
.mnav-brand span{ color:var(--accent); }
.mnav-toggle{ width:46px; height:44px; padding:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:12px; transition:background .18s ease, border-color .18s ease; }
.mnav-toggle:hover{ background:rgba(var(--accent-rgb),.12); border-color:rgba(var(--accent-rgb),.30); }
.mnav-toggle[aria-expanded="true"]{ background:rgba(var(--accent-rgb),.14); border-color:rgba(var(--accent-rgb),.34); }
.mnav-ico{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-weight:700; font-size:18px; line-height:1; color:var(--accent); text-shadow:0 0 10px rgba(var(--accent-rgb),.35); }
.mnav-ico::before{ content:">"; }
.mnav-ico::after{ content:"_"; margin-left:1px; animation:mnavBlink 1.1s steps(1,end) infinite; }
@keyframes mnavBlink{ 50%{ opacity:0; } }
.mnav-toggle[aria-expanded="true"] .mnav-ico{ font-size:21px; }
.mnav-toggle[aria-expanded="true"] .mnav-ico::before{ content:"\00d7"; }
.mnav-toggle[aria-expanded="true"] .mnav-ico::after{ content:""; margin:0; animation:none; }
.mnav-menu{ display:none; }
@media (max-width:992px){
  .mnav-menu{ display:block; overflow:hidden; max-height:0; transition:max-height .34s cubic-bezier(.4,0,.2,1);
    border-bottom:1px solid rgba(var(--accent-rgb),.10); padding:0 10px; position:sticky; top:64px; z-index:999;
    background:rgba(var(--dk-shade-rgb),.92); -webkit-backdrop-filter:saturate(150%) blur(14px); backdrop-filter:saturate(150%) blur(14px); }
  .mnav-menu.open{ max-height:82vh; padding:8px 10px 14px; }
  .mnav-menu a{ display:flex; align-items:center; gap:11px; margin:5px 0; padding:12px 14px; color:#dbe4dd; text-decoration:none;
    font-family:"Space Grotesk",sans-serif; font-weight:600; letter-spacing:.02em; font-size:15px; border-radius:12px; border:1px solid transparent;
    opacity:0; transform:translateY(-6px);
    transition:opacity .28s ease, transform .28s ease, background .18s ease, border-color .18s ease, color .18s ease; }
  .mnav-menu a::before{ content:"\203a"; flex:0 0 auto; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:16px; font-weight:700; color:var(--accent); opacity:.75; transition:transform .18s ease, opacity .18s ease; }
  .mnav-menu.open a{ opacity:1; transform:none; }
  .mnav-menu.open a:nth-child(1){ transition-delay:.05s; } .mnav-menu.open a:nth-child(2){ transition-delay:.09s; }
  .mnav-menu.open a:nth-child(3){ transition-delay:.13s; } .mnav-menu.open a:nth-child(4){ transition-delay:.17s; }
  .mnav-menu.open a:nth-child(5){ transition-delay:.21s; } .mnav-menu.open a:nth-child(6){ transition-delay:.25s; }
  .mnav-menu a:hover, .mnav-menu a.is-active{ background:linear-gradient(90deg, rgba(var(--accent-rgb),.18), rgba(var(--accent-rgb),.04)); border-color:rgba(var(--accent-rgb),.30); color:#fff; text-decoration:none; }
  .mnav-menu a:hover::before, .mnav-menu a.is-active::before{ transform:translateX(3px); opacity:1; }
}
@media (prefers-reduced-motion:reduce){ .mnav-menu a{ opacity:1; transform:none; transition:background .18s ease, color .18s ease; } .mnav-menu.open a{ transition-delay:0s !important; } }

/* ---- nav toggles (colour-scheme + sfx) ---- */
.sfx-toggle,.theme-toggle{ width:34px; height:34px; border-radius:50%; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; background:transparent; border:1px solid rgba(255,255,255,.14);
  transition:border-color .18s ease, background .18s ease; }
.sfx-toggle svg{ width:16px; height:16px; }
.sfx-toggle:hover,.theme-toggle:hover{ border-color:rgba(var(--accent-rgb),.4); background:rgba(var(--accent-rgb),.08); }
.sfx-toggle svg *{ transition:opacity .18s ease; }
.sfx-toggle .sfx-wave{ opacity:0; } .sfx-toggle .sfx-slash{ opacity:.85; }
.sfx-toggle.on{ color:var(--accent); border-color:rgba(var(--accent-rgb),.4); background:rgba(var(--accent-rgb),.08); }
.sfx-toggle.on .sfx-wave{ opacity:1; } .sfx-toggle.on .sfx-slash{ opacity:0; }
.sfx-toggle{ color:#8792a3; }
.theme-swatch{ width:15px; height:15px; border-radius:50%; background:var(--accent); box-shadow:0 0 7px rgba(var(--accent-rgb),.65); }
.nav-sfx{ position:absolute; right:16px; top:0; bottom:0; margin:auto 0; transform:translateY(-4px); }
.nav-theme{ position:absolute; right:58px; top:0; bottom:0; margin:auto 0; transform:translateY(-4px); }
.mnav-sfx{ margin-left:8px; margin-right:12px; align-self:center; }
.mnav-theme{ margin-left:auto; align-self:center; }

/* ---- colour-scheme popover ---- */
.theme-pop{ position:fixed; top:58px; right:14px; z-index:1600; min-width:154px; padding:8px; border-radius:12px;
  background:rgba(11,15,25,.94); border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(12px) saturate(150%); backdrop-filter:blur(12px) saturate(150%);
  box-shadow:0 14px 36px rgba(0,0,0,.45); font-family:var(--mono); font-size:12.5px; }
.theme-pop[hidden]{ display:none; }
.theme-pop__label{ color:#8792a3; font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:2px 8px 6px; }
.theme-pop .swatch,.theme-pop .scan{ display:flex; align-items:center; gap:9px; width:100%; padding:7px 8px; border:0; border-radius:8px;
  cursor:pointer; background:transparent; color:#cfd6e4; text-align:left; font:inherit; }
.theme-pop .swatch:hover,.theme-pop .scan:hover{ background:rgba(255,255,255,.06); }
.theme-pop .swatch .dot{ width:13px; height:13px; border-radius:50%; }
.theme-pop .swatch[data-accent="matrix"] .dot{ background:#4AF262; box-shadow:0 0 6px #4AF262; }
.theme-pop .swatch[data-accent="tokyo"] .dot{ background:#7aa2f7; box-shadow:0 0 6px #7aa2f7; }
.theme-pop .swatch[data-accent="dracula"] .dot{ background:#bd93f9; box-shadow:0 0 6px #bd93f9; }
.theme-pop .swatch[aria-checked="true"],.theme-pop .scan[aria-checked="true"]{ color:#fff; }
.theme-pop .swatch[aria-checked="true"]::after{ content:"\2713"; margin-left:auto; color:var(--accent); }
.theme-pop__sep{ height:1px; background:rgba(255,255,255,.1); margin:6px 4px; }
.theme-pop .scan .chk{ width:13px; height:13px; border-radius:3px; border:1px solid #6b7688; }
.theme-pop .scan[aria-checked="true"] .chk{ background:var(--accent); border-color:var(--accent); }

/* ---- layout ---- */
.cs-wrap{ max-width:980px; margin:0 auto; padding:0 0 40px; }   /* same 980px column + left edge as the main content */
@media (max-width:1012px){ .cs-wrap{ padding-left:16px; padding-right:16px; } }

/* ---- terminal command line (boxless, matched to the main content tabs' rhythm) ---- */
.section-term{ margin:0; padding:36px 0 12px; overflow-x:auto; white-space:nowrap;
  font-family:var(--mono); font-size:13px; line-height:normal; color:#eef5f0; }
.section-term .term-prompt{ color:var(--accent); font-weight:600; text-shadow:0 0 10px rgba(var(--accent-rgb),.16); }
.section-term .rail-cmd{ color:#f4f7f5; }
/* steady caret while typing (the caret is hidden the moment the command "runs",
   so it never idles - a blink here would just flash once before the content shows) */
.section-term .rail-cursor{ display:inline-block; width:8px; height:1.05em; margin-left:2px; vertical-align:-2px; background:var(--accent); }
.section-term.ran .rail-cursor{ display:none; }
.section-term .term-run{ margin-left:10px; font-size:.85em; letter-spacing:.02em; color:var(--accent); opacity:0; transition:opacity .3s ease; }
.section-term.running .term-run{ opacity:.9; }
@keyframes blink{ 50%{ opacity:0; } }

/* ---- reveal (content appears after the command runs) ---- */
/* pointer-events:none keeps the still-invisible content from catching clicks
   while the command is "running" - it only becomes interactive once revealed. */
.cs-reveal{ opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .55s ease, transform .55s ease; }
.cs-reveal.in{ opacity:1; transform:none; pointer-events:auto; }
@media (prefers-reduced-motion:reduce){
  .cs-reveal{ transition:none; } .section-term .rail-cursor{ animation:none; }
}

/* ---- hero ---- */
.cs-hero{ padding:8px 0 30px; border-bottom:1px solid var(--border); }
.cs-eyebrow{ font-family:var(--mono); font-size:12.5px; color:var(--accent); letter-spacing:.02em; margin:0 0 14px; }
.cs-hero h1{ display:flex; align-items:center; gap:12px; font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:2.6rem; line-height:1.08; color:#fff; margin:0 0 14px; letter-spacing:-.02em; }
.cs-hero h1::before{ content:">_"; flex:0 0 auto; font-family:var(--mono); font-size:.48em; font-weight:700; letter-spacing:-.08em; color:var(--accent); line-height:1; transform:translateY(2px); text-shadow:0 0 12px rgba(var(--accent-rgb),.15); }
.cs-lede{ font-size:1.17rem; color:var(--ink); margin:0 0 22px; }
.cs-meta{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
.cs-meta .tag{ font-family:var(--mono); font-size:12px; padding:5px 11px; border-radius:999px; color:var(--accent-light); background:rgba(var(--accent-rgb),.08); border:1px solid rgba(var(--accent-rgb),.2); }
.cs-cta{ display:flex; flex-wrap:wrap; gap:12px; }
.cs-btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:10px; font-weight:600; font-size:14px; font-family:"Space Grotesk",sans-serif; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }
.cs-btn.primary{ color:var(--dk-bg-deep); background:var(--accent-grad); }
.cs-btn.primary:hover{ transform:translateY(-1px); text-decoration:none; box-shadow:0 12px 28px rgba(var(--accent-rgb),.28); }
.cs-btn.ghost{ color:var(--ink); border:1px solid rgba(255,255,255,.18); }
.cs-btn.ghost:hover{ background:rgba(255,255,255,.06); text-decoration:none; }
.cs-glance{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; margin:26px 0 0; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--border); }
.cs-glance div{ background:var(--dk-surface); padding:14px 16px; }
.cs-glance dt{ font-family:var(--mono); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.cs-glance dd{ margin:5px 0 0; color:var(--ink); font-weight:600; font-size:14px; }

/* ---- sections (no "#" prefix) ---- */
.cs-sec{ padding:38px 0 4px; scroll-margin-top:70px; }
.cs-sec > h2{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:1.5rem; color:#fff; margin:0 0 16px; letter-spacing:-.01em; }
.cs-sec h3{ font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:1.12rem; color:var(--ink); margin:24px 0 8px; }
.cs-sec p{ margin:0 0 15px; }
.cs-sec strong{ color:var(--ink); font-weight:600; }
.cs-sec code{ font-family:var(--mono); font-size:.86em; padding:2px 6px; border-radius:5px; background:rgba(var(--accent-rgb),.1); color:var(--accent-light); }
.cs-sec ul,.cs-sec ol{ margin:0 0 15px; padding-left:22px; }
.cs-sec li{ margin:6px 0; } .cs-sec li::marker{ color:var(--accent); }

.cs-note{ margin:18px 0; padding:14px 16px; border-radius:10px; border:1px solid rgba(var(--accent-rgb),.22); border-left:3px solid var(--accent); background:rgba(var(--accent-rgb),.06); font-size:14.5px; }
.cs-note b{ color:var(--accent-light); }

.cs-code{ margin:16px 0; border-radius:12px; overflow:hidden; border:1px solid rgba(var(--accent-rgb),.18); background:var(--dk-surface-soft); }
.cs-code .bar{ display:flex; align-items:center; gap:7px; padding:9px 14px; background:rgba(var(--dk-shade-rgb),.6); border-bottom:1px solid var(--border); }
.cs-code .bar i{ width:11px; height:11px; border-radius:50%; background:#3a463d; display:inline-block; }
.cs-code .bar .t{ margin-left:8px; font-family:var(--mono); font-size:12px; color:var(--muted); }
.cs-code pre{ margin:0; padding:15px 16px; overflow-x:auto; font-family:var(--mono); font-size:13px; line-height:1.65; color:#dbe6de; }
.cs-code pre .c{ color:var(--muted); } .cs-code pre .p{ color:var(--accent); }

/* ASCII architecture diagram (from the repo's ARCHITECTURE.md) */
.cs-diagram{ margin:20px auto; padding:16px 18px; width:fit-content; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  font-family:var(--mono); font-size:12.5px; line-height:1.4; white-space:pre; color:#cfe0d4;
  background:rgba(var(--dk-shade-rgb),.45); border:1px solid rgba(var(--accent-rgb),.16); border-radius:12px; }
@media (max-width:640px){ .cs-diagram{ font-size:10px; padding:14px; } }

.cs-table-wrap{ overflow-x:auto; margin:16px 0; }
.cs-table{ width:100%; border-collapse:collapse; font-size:14px; min-width:520px; }
.cs-table th,.cs-table td{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:top; }
.cs-table th{ font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.cs-table td:first-child{ color:var(--ink); font-weight:600; white-space:nowrap; }

.cs-shots{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin:18px 0; }
.cs-fig{ margin:0; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--dk-surface); }
.cs-fig img{ display:block; width:100%; height:auto; }
.cs-fig .ph{ aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:12.5px; color:var(--muted); background:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 12px,transparent 12px 24px); }
.cs-fig figcaption{ padding:10px 14px; font-size:13px; color:var(--ink-soft); border-top:1px solid var(--border); }
.cs-fig figcaption b{ color:var(--ink); }
.cs-fig img{ cursor:zoom-in; transition:opacity .18s ease; }
.cs-fig img:hover{ opacity:.9; }

/* click-to-zoom lightbox (built in case-study.js) */
.cs-lightbox{ position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:center;
  padding:24px; cursor:zoom-out; opacity:0; transition:opacity .2s ease;
  background:rgba(var(--dk-shade-rgb),.9); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.cs-lightbox.open{ display:flex; opacity:1; }
.cs-lightbox figure{ margin:0; max-width:min(1120px,96vw); display:flex; flex-direction:column; }
.cs-lightbox img{ max-width:100%; max-height:86vh; width:auto; height:auto; border-radius:12px 12px 0 0;
  border:1px solid rgba(var(--accent-rgb),.28); border-bottom:0;
  box-shadow:0 30px 90px rgba(0,0,0,.6); transform:scale(.97); transition:transform .2s ease; }
.cs-lightbox.open img{ transform:none; }
.cs-lightbox figcaption{ padding:12px 16px; font-size:13.5px; color:var(--ink-soft); text-align:left;
  background:var(--dk-surface); border:1px solid rgba(var(--accent-rgb),.28); border-top:0; border-radius:0 0 12px 12px; }
.cs-lightbox figcaption b{ color:var(--ink); }
.cs-lb-close{ position:fixed; top:16px; right:20px; width:44px; height:44px; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; font-size:26px; line-height:1; color:var(--ink);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:12px;
  transition:background .18s ease, border-color .18s ease; }
.cs-lb-close:hover{ background:rgba(var(--accent-rgb),.14); border-color:rgba(var(--accent-rgb),.34); }
@media (prefers-reduced-motion:reduce){ .cs-lightbox,.cs-lightbox img{ transition:none; } .cs-lightbox img{ transform:none; } }

/* ---- end-of-article controls: back to Projects (left) + sibling case studies (right) ---- */
.cs-backbar{ margin:8px 0 0; padding:16px 0 34px; display:flex; align-items:center; justify-content:space-between; gap:20px 24px; flex-wrap:wrap; }
.cs-back,.cs-sib{ display:inline-flex; align-items:center; gap:8px;
  font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:14px; color:var(--accent); text-decoration:none; transition:color .18s ease; }
.cs-back:hover,.cs-sib:hover{ color:var(--accent-light); text-decoration:none; }
.cs-back i,.cs-sib i{ transition:transform .2s ease; }
.cs-siblings{ display:inline-flex; align-items:center; gap:18px; margin-left:auto; }
.cs-back:hover i,.cs-sib-prev:hover i{ transform:translateX(-3px); }
.cs-sib-next:hover i{ transform:translateX(3px); }

/* ---- footer (identical to the main site) ---- */
/* ---- fixed social rail (identical to the main site; wide screens only) ---- */
.side-rail{ position:fixed; bottom:0; z-index:900; display:none; flex-direction:column; align-items:center; gap:20px; }
.side-right{ right:38px; }
.side-rail a{ color:#8792a3; font-size:19px; line-height:normal; text-decoration:none; transition:color .18s ease, transform .18s ease; }
.side-rail a:hover{ color:var(--accent); transform:translateY(-3px); text-decoration:none; }
.rail-line{ width:1px; height:96px; background:#8792a3; opacity:.45; margin-top:4px; }
@media (min-width:1200px){ .side-rail{ display:flex; } }

.site-footer{ background:linear-gradient(180deg,var(--dk-bg-deep) 0%,var(--dk-bg) 100%); color:#c7cfdd; border-top:1px solid rgba(var(--accent-rgb),.12); margin-top:40px; line-height:normal; }
.site-footer .inner{ max-width:980px; margin:0 auto; padding:44px 22px 24px; display:flex; flex-wrap:wrap; gap:28px 48px; align-items:flex-start; justify-content:space-between; }
.site-footer .foot-brand{ max-width:360px; }
.site-footer .brand{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:1.3rem; color:#fff; }
.site-footer .brand span{ color:var(--accent); }
.site-footer .foot-tag{ color:#8b93a6; font-size:.92rem; line-height:1.55; margin:10px 0 16px; }
.site-footer .foot-nav{ display:grid; grid-template-columns:1fr 1fr; gap:10px 32px; }
@media (min-width:821px){ .site-footer .foot-nav{ grid-template-columns:auto auto; } }
.site-footer .foot-nav a{ color:#c7cfdd; text-decoration:none; font-size:.9rem; font-family:"Space Grotesk",sans-serif; font-weight:600; transition:color .16s ease; }
.site-footer .foot-nav a:hover{ color:var(--accent); text-decoration:none; }
.site-footer .socials{ display:flex; gap:10px; }
.site-footer .socials a{ width:42px; height:42px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; color:#dfe5f0; font-size:18px; text-decoration:none; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); transition:transform .18s ease, background .18s ease, color .18s ease; }
.site-footer .socials a:hover{ transform:translateY(-3px); background:var(--accent-grad); color:var(--dk-bg-deep); border-color:transparent; }
.site-footer .copy{ max-width:980px; margin:0 auto; text-align:center; color:#8b93a6; font-size:.85rem; padding:16px 22px; border-top:1px solid rgba(255,255,255,.06); }

/* ---- CRT scanline overlay ---- */
.crt-scanlines{ position:fixed; inset:0; z-index:1500; pointer-events:none; opacity:0;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.16) 3px, rgba(0,0,0,0) 4px); }
:root[data-scanlines="on"] .crt-scanlines{ opacity:1; }
@media (prefers-reduced-motion: no-preference){ :root[data-scanlines="on"] .crt-scanlines{ animation:crtFlicker 4s steps(30) infinite; } }
@keyframes crtFlicker{ 0%,100%{opacity:1;} 45%{opacity:.94;} 55%{opacity:.985;} }

@media (max-width:640px){
  .cs-hero h1{ font-size:2rem; } .cs-hero{ padding:30px 0 24px; }
  .cs-wrap{ padding:0 16px 16px; }
  .site-footer .inner{ gap:24px; }
}
@media print{ .navbar,.mnav-bar,.mnav-menu,.section-term,.crt-scanlines,.sfx-toggle,.theme-toggle,.cs-backbar{ display:none !important; } }