/* ============================================================
   ILIES4TECH — v3 "Deep Lab"
   Ink-navy surface · acid lime + cyan · Anton display
   Type: Anton (display) · Space Grotesk (body) · IBM Plex Mono (meta)
   ============================================================ */

@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/anton-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/space-grotesk-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/space-grotesk-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}

/* ---------- tokens ---------- */
:root{
  color-scheme: dark;
  --bg:#070c14;
  --panel:#0d1522;
  --panel2:#111c2c;
  --panel3:#16233a;
  --fg:#eaf2f7;
  --fg2:#8fa3b5;
  --fg3:#647c92;
  --line:rgba(140,190,220,.16);
  --line2:rgba(140,190,220,.30);

  --lime:#d9ff00;
  --cyan:#37d5c8;
  --teal:#125060;
  --red:#ff5a3c;
  --lime-ink:#0a0f06;

  --font-display:"Anton","Arial Narrow",sans-serif;
  --font-body:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  --gutter:clamp(20px,4vw,44px);
  --maxw:1200px;
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:38px;
  --s-5:58px; --s-6:84px; --s-7:110px;

  --ui:11px;
  --track:.14em;
  --r:18px;
  --r-lg:22px;
  --ease:cubic-bezier(.22,.7,.2,1);

  /* legacy aliases — older inline styles on sub-pages still resolve */
  --paper:var(--bg); --paper2:var(--panel); --ink:var(--fg); --ink2:var(--fg2);
  --line-strong:var(--line2); --blue:var(--cyan); --yellow:var(--lime);
  --paper-line:var(--line); --accent:var(--lime);
  --invert-bg:var(--panel); --invert-fg:var(--fg);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;position:relative;
  font-family:var(--font-body);font-size:16px;line-height:1.62;
  color:var(--fg);background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* ambient wash — the thing that stops the page reading flat */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 620px at 78% 6%,rgba(55,213,200,.15),transparent 60%),
    radial-gradient(760px 520px at 4% 62%,rgba(217,255,0,.07),transparent 62%),
    radial-gradient(700px 700px at 92% 88%,rgba(18,80,96,.20),transparent 62%);
}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--lime);color:var(--lime-ink)}

/* ---------- utilities ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.mono,.label,.k,.num,.section-index,.fig-cap,.tag,.f-num,.rel-meta,.rel-status,.place,.when{
  font-family:var(--font-mono);font-size:var(--ui);letter-spacing:var(--track);
  text-transform:uppercase;font-variant-numeric:tabular-nums;
}
.skip-link{
  position:fixed;left:-9999px;top:0;z-index:300;
  background:var(--lime);color:var(--lime-ink);padding:10px 16px;
  font-family:var(--font-mono);font-size:12px;border-radius:0 0 10px 0;
}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:4px}

/* everything above the ambient wash */
main,.site-nav,.announce,.site-footer,.sticky-cta,article{position:relative;z-index:2}
#gl{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .9s var(--ease)}
#gl.ready{opacity:1}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line2);border-radius:100px;
  padding:10px 18px;color:var(--fg);
  font-family:var(--font-mono);font-size:var(--ui);letter-spacing:var(--track);text-transform:uppercase;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.btn:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-1px)}
.btn-solid{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.btn-solid:hover{background:#e7ff3d;border-color:#e7ff3d;color:var(--lime-ink)}
.btn-line{border-color:var(--lime);color:var(--lime)}
.btn-line:hover{background:var(--lime);color:var(--lime-ink)}

/* ---------- announcement sliver ---------- */
.announce{
  display:block;background:var(--lime);color:var(--lime-ink);
  font-family:var(--font-mono);font-size:var(--ui);letter-spacing:var(--track);
  text-transform:uppercase;text-align:center;padding:9px var(--gutter);font-weight:500;
}
.announce b{font-weight:500}
.announce:hover span{text-decoration:underline;text-underline-offset:3px}
@media (max-width:719px){.announce .announce-detail{display:none}}

/* ---------- nav ---------- */
.site-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(7,12,20,.72);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--line);
}
.site-nav .bar{display:flex;align-items:center;gap:var(--s-3);height:64px}
.wordmark{font-family:var(--font-display);font-size:22px;letter-spacing:.02em;text-transform:uppercase;line-height:1}
.wordmark em{font-style:normal;color:var(--lime)}
.nav-links{display:flex;gap:22px;margin-left:auto}
.nav-links a{
  font-family:var(--font-mono);font-size:var(--ui);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--fg2);padding:4px 0;position:relative;
  transition:color .2s var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--lime);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.nav-links a:hover{color:var(--lime)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{margin-left:var(--s-3)}
.nav-toggle{display:none;font-family:var(--font-mono);font-size:var(--ui);letter-spacing:var(--track);text-transform:uppercase;color:var(--lime)}

@media (max-width:900px){
  .nav-links{
    position:fixed;inset:0;z-index:40;display:none;
    flex-direction:column;justify-content:center;gap:var(--s-3);
    background:var(--bg);padding:var(--gutter);margin:0;
  }
  .nav-links.open{display:flex}
  .nav-links a{font-family:var(--font-display);font-size:34px;letter-spacing:.02em;color:var(--fg)}
  .nav-links a::after{display:none}
  .nav-toggle{display:block;margin-left:auto;position:relative;z-index:41}
  .nav-cta{display:none}
  body.nav-open{overflow:hidden}
}

/* ---------- section shell ---------- */
.section{padding-block:var(--s-7);border-top:1px solid var(--line)}
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s-3);margin-bottom:var(--s-4);flex-wrap:wrap;
}
.section-title{
  font-family:var(--font-display);font-size:clamp(30px,4.4vw,54px);
  text-transform:uppercase;line-height:.98;letter-spacing:.004em;
}
.section-index{color:var(--fg3);white-space:nowrap}
.section-dek{color:var(--fg2);max-width:62ch;margin-top:calc(var(--s-2) * -1);margin-bottom:var(--s-4)}

/* ---------- hero ---------- */
.hero{padding-block:var(--s-6) var(--s-7)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,54px);align-items:center}
.hero-kicker{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--line);background:rgba(55,213,200,.07);border-radius:100px;
  padding:8px 16px;font-family:var(--font-mono);font-size:var(--ui);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--cyan);
}
.hero-kicker .dot{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime);animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.hero-title{
  font-family:var(--font-display);
  font-size:clamp(46px,7.4vw,104px);line-height:.9;letter-spacing:.005em;text-transform:uppercase;
  margin-top:var(--s-3);
}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.02em}
.hero-title .line>span{display:block;transform:translateY(105%);animation:rise .95s var(--ease) forwards}
.hero-title .line:nth-child(2)>span{animation-delay:.09s}
.hero-title .line:nth-child(3)>span{animation-delay:.18s}
@keyframes rise{to{transform:translateY(0)}}
.hero-title .accent{font-style:normal;color:var(--lime)}
.hero-title .outline{-webkit-text-stroke:1.5px var(--cyan);color:transparent}

.hero-dek{margin-top:var(--s-3);max-width:47ch;color:var(--fg2);font-size:17px;line-height:1.7}
.hero-dek b{color:var(--fg);font-weight:500}
.hero-cta{display:flex;gap:12px;margin-top:var(--s-4);flex-wrap:wrap}

.hero-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  margin-top:var(--s-4);
}
.hero-stats div{background:var(--panel);padding:16px 18px}
.hero-stats .n{font-family:var(--font-display);font-size:32px;line-height:1;color:var(--cyan)}
.hero-stats .n small{font-family:var(--font-body);font-size:16px;font-weight:500}
.hero-stats .l{margin-top:7px;color:var(--fg2)}

/* ---------- 3D anchors ---------- */
.m3d{position:relative}
.m3d-hero{
  aspect-ratio:1/1;border-radius:var(--r-lg);border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(160deg,rgba(55,213,200,.12),rgba(18,80,96,.05) 45%,transparent);
}
.m3d-grid{
  position:absolute;inset:0;opacity:.35;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;
}
.m3d-cap{
  position:absolute;left:16px;bottom:14px;color:var(--fg3);
  font-family:var(--font-mono);font-size:var(--ui);letter-spacing:var(--track);text-transform:uppercase;
}
.m3d-fallback{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:12px;
  color:var(--fg3);font-family:var(--font-mono);font-size:var(--ui);letter-spacing:var(--track);text-transform:uppercase;
}
html.gl-on .m3d-fallback{display:none}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .m3d-hero{width:min(78vw,380px);margin:var(--s-4) auto 0}
}

/* ---------- card grids ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{
  display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:transform .25s var(--ease),border-color .25s var(--ease),background-color .25s var(--ease);
}
.card:hover{transform:translateY(-4px);border-color:var(--cyan);background:var(--panel2)}
.card-shot{aspect-ratio:16/11;overflow:hidden;background:var(--panel2);position:relative;display:grid;place-items:center}
.card-shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .card-shot img{transform:scale(1.03)}
.card-plate{flex-direction:column;gap:6px;text-align:center;padding:var(--s-3)}
.card-plate .pl-name{font-family:var(--font-display);font-size:34px;text-transform:uppercase;line-height:1;color:var(--cyan)}
.card-plate .pl-sub{color:var(--fg3);font-family:var(--font-mono);font-size:var(--ui);letter-spacing:var(--track);text-transform:uppercase}
.card-body{padding:16px 18px 20px}
.card-body h3{font-size:19px;font-weight:500;letter-spacing:-.01em}
.card-body p{margin-top:7px;color:var(--fg2);font-size:14px;line-height:1.55}
.chips{display:flex;gap:6px;margin-top:13px;flex-wrap:wrap}
.chip{
  border:1px solid var(--line);border-radius:100px;padding:4px 10px;color:var(--fg2);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
}
.chip.live{border-color:var(--lime);color:var(--lime)}
.chip.src{border-color:var(--cyan);color:var(--cyan)}
.chip.arch{color:var(--fg3)}
@media (max-width:900px){.card-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.card-grid{grid-template-columns:1fr}}

/* ---------- releases ---------- */
.rel-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:var(--s-3)}
.rel-filter{
  border:1px solid var(--line);border-radius:100px;padding:7px 14px;color:var(--fg2);
  font-family:var(--font-mono);font-size:var(--ui);letter-spacing:var(--track);text-transform:uppercase;
  transition:color .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease);
}
.rel-filter .n{margin-left:7px;color:var(--fg3)}
.rel-filter:hover{border-color:var(--line2);color:var(--fg)}
.rel-filter[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.rel-filter[aria-pressed="true"] .n{color:rgba(10,15,6,.6)}
.rel-count{margin-left:auto;color:var(--fg3);font-family:var(--font-mono);font-size:var(--ui);letter-spacing:var(--track);text-transform:uppercase}
.rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rel-card{
  display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:transform .25s var(--ease),border-color .25s var(--ease);
}
.rel-card:hover{transform:translateY(-3px);border-color:var(--cyan)}
.rel-card[hidden]{display:none}
.rel-shot{aspect-ratio:16/13;overflow:hidden;background:var(--panel2);display:grid;place-items:center;position:relative}
.rel-shot img{width:100%;height:100%;object-fit:cover}
.rel-plate{flex-direction:column;gap:5px;text-align:center;padding:var(--s-2)}
.rel-plate .pl-name{font-family:var(--font-display);font-size:28px;text-transform:uppercase;line-height:1;color:var(--cyan)}
.rel-plate .pl-sub{color:var(--fg3);font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.rel-open{
  position:absolute;left:10px;bottom:10px;background:var(--lime);color:var(--lime-ink);
  padding:4px 9px;border-radius:100px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  opacity:0;transform:translateY(4px);transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.rel-card:hover .rel-open{opacity:1;transform:none}
.rel-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:14px 16px 0}
.rel-name{font-size:15px;font-weight:500;letter-spacing:-.01em}
.rel-status{color:var(--fg3);white-space:nowrap;font-size:10px}
.rel-status.live{color:var(--lime)}
.rel-status.src{color:var(--cyan)}
.rel-status.post{color:var(--fg2)}
.rel-meta{padding:6px 16px 16px;color:var(--fg3);font-size:10px;line-height:1.65}
.rel-empty,.rel-note{margin-top:var(--s-3);color:var(--fg3);font-family:var(--font-mono);font-size:var(--ui);letter-spacing:var(--track);text-transform:uppercase;line-height:1.8}
.rel-note a{color:var(--lime)}
@media (max-width:1080px){.rel-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.rel-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.rel-grid{grid-template-columns:1fr}}

/* ---------- fields ---------- */
.fields-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fields-grid .field{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;
  transition:background-color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.fields-grid .field:hover{background:var(--panel2);border-color:var(--lime);transform:translateY(-4px)}
.fields-grid .field .m3d-tile{
  aspect-ratio:1/1;width:100%;max-width:210px;margin:0 auto 14px;border-radius:14px;
  background:radial-gradient(circle at 50% 45%,rgba(55,213,200,.18),transparent 66%);
}
.fields-grid .field:nth-child(2) .m3d-tile{background:radial-gradient(circle at 50% 45%,rgba(217,255,0,.14),transparent 66%)}
.fields-grid .field:nth-child(3) .m3d-tile{background:radial-gradient(circle at 50% 45%,rgba(255,90,60,.13),transparent 66%)}
.fields-grid .field:nth-child(4) .m3d-tile{background:radial-gradient(circle at 50% 45%,rgba(120,160,255,.15),transparent 66%)}
.fields-grid .field .f-num{color:var(--lime)}
.fields-grid .field h3{margin-top:8px;font-size:19px;font-weight:500;letter-spacing:-.01em}
.fields-grid .field p{margin-top:7px;color:var(--fg2);font-size:14px}
.fields-grid .field .f-stack{margin-top:12px;color:var(--fg3);font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;line-height:1.8}
@media (max-width:980px){.fields-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fields-grid{grid-template-columns:1fr}}

/* ---------- experience ---------- */
.xp-list{display:grid;gap:12px}
.xp-row{
  display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--s-3);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;
  transition:border-color .25s var(--ease),background-color .25s var(--ease);
}
.xp-row:hover{border-color:var(--cyan);background:var(--panel2)}
.xp-row .when{color:var(--cyan);padding-top:4px}
.xp-row h3{font-size:17px;font-weight:500;letter-spacing:-.01em}
.xp-row h3 span{color:var(--fg2);font-weight:400}
.xp-row p{margin-top:7px;color:var(--fg2);font-size:14.5px;max-width:70ch}
.xp-row .place{display:block;margin-top:10px;color:var(--fg3)}
.xp-note{margin-top:var(--s-3);color:var(--fg3);line-height:1.9;max-width:80ch}
.xp-note a{color:var(--lime)}
@media (max-width:720px){.xp-row{grid-template-columns:1fr;gap:10px}}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:var(--s-5);align-items:start}
.about-photo{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.about-photo img{width:100%;height:auto}
.about-grid figcaption{margin-top:10px;color:var(--fg3);font-family:var(--font-mono);font-size:var(--ui);letter-spacing:var(--track);text-transform:uppercase}
.about-copy{display:grid;gap:var(--s-2);color:var(--fg2);font-size:16px;line-height:1.75}
.about-copy b{color:var(--fg);font-weight:500}
.about-copy .marker{color:var(--lime)}
@media (max-width:860px){.about-grid{grid-template-columns:1fr}.about-photo{max-width:300px}}

/* ---------- lab ---------- */
.lab-intro{color:var(--fg2);max-width:64ch;margin-bottom:var(--s-4)}
.lab-intro a{color:var(--lime)}
.lab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.lab-item{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;
  display:grid;gap:8px;align-content:start;
  transition:border-color .25s var(--ease),background-color .25s var(--ease),transform .25s var(--ease);
}
.lab-item:hover{border-color:var(--lime);background:var(--panel2);transform:translateY(-3px)}
.lab-item .num{color:var(--cyan)}
.lab-item h3{font-size:17px;font-weight:500;letter-spacing:-.01em}
.lab-item h3 a{color:var(--lime)}
.lab-item p{color:var(--fg2);font-size:14px}
.lab-item .tag{color:var(--fg3)}
.lab-item .tag.wip{color:var(--lime)}
.lab-more{margin-top:var(--s-4)}
@media (max-width:900px){.lab-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.lab-grid{grid-template-columns:1fr}}

/* lab.html standalone */
.lab-page main{padding-block:var(--s-5) var(--s-6)}
.lab-page-head{margin-bottom:var(--s-4)}
.lab-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s-2);margin-top:var(--s-4)}
.lab-photos img{width:100%;height:auto;border:1px solid var(--line);border-radius:14px}
.lab-note{color:var(--fg3);margin-top:var(--s-3);line-height:1.9;font-family:var(--font-mono);font-size:var(--ui);letter-spacing:var(--track);text-transform:uppercase}

/* ---------- contact ---------- */
.contact{padding-block:var(--s-7) var(--s-5)}
.contact-panel{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(26px,4vw,54px);
  background:linear-gradient(150deg,rgba(55,213,200,.12),rgba(18,80,96,.06) 48%,transparent);
}
.contact-title{
  font-family:var(--font-display);font-size:clamp(38px,6.6vw,88px);
  text-transform:uppercase;line-height:.92;letter-spacing:.004em;
}
.contact-title a:hover{color:var(--lime)}
.contact-dek{margin-top:var(--s-3);color:var(--fg2);max-width:58ch}
.contact-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s-4)}
.contact-links a{
  border:1px solid var(--line);border-radius:100px;padding:9px 16px;color:var(--fg2);
  font-family:var(--font-mono);font-size:var(--ui);letter-spacing:var(--track);text-transform:uppercase;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.contact-links a:hover{color:var(--lime);border-color:var(--lime)}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);padding-block:var(--s-3);color:var(--fg3)}
.site-footer .wrap{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);justify-content:space-between;
  font-family:var(--font-mono);font-size:var(--ui);letter-spacing:var(--track);text-transform:uppercase;
}
.site-footer a:hover{color:var(--lime)}

/* ---------- event layer ---------- */
body[data-event="off"] .event-only{display:none!important}
.hero-hint{display:inline-flex;align-items:center;gap:8px;margin-top:var(--s-2);color:var(--lime);
  font-family:var(--font-mono);font-size:var(--ui);letter-spacing:var(--track);text-transform:uppercase}
.hero-hint .pulse{width:5px;height:5px;border-radius:50%;background:currentColor;animation:pulse 2.2s infinite}
.event-cta{
  display:block;margin-top:var(--s-4);padding:var(--s-3);max-width:640px;
  border:1px solid var(--lime);border-radius:var(--r);background:rgba(217,255,0,.05);
  transition:background-color .25s var(--ease)
}
.event-cta:hover{background:rgba(217,255,0,.11)}
.event-cta .ec-k,.event-cta .ec-go{display:block;font-family:var(--font-mono);font-size:var(--ui);letter-spacing:var(--track);text-transform:uppercase;color:var(--lime)}
.event-cta .ec-t{display:block;font-family:var(--font-display);font-size:32px;text-transform:uppercase;margin-top:8px}
.event-cta .ec-d{display:block;color:var(--fg2);font-size:14.5px;margin-top:8px}
.event-cta .ec-go{margin-top:var(--s-2)}
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:46;
  background:var(--lime);color:var(--lime-ink);text-align:center;padding:12px var(--gutter);
  font-family:var(--font-mono);font-size:var(--ui);letter-spacing:var(--track);text-transform:uppercase;font-weight:500;
}
@media (min-width:901px){.sticky-cta{display:none}}

/* ---------- case-study pages (work/*.html) ---------- */
.crumb{
  display:inline-block;margin-bottom:var(--s-3);color:var(--cyan);
  font-family:var(--font-mono);font-size:var(--ui);letter-spacing:var(--track);text-transform:uppercase;
}
.crumb:hover{color:var(--lime)}
.case-hero{padding-block:var(--s-5) var(--s-4)}
.case-title{font-family:var(--font-display);font-size:clamp(42px,7vw,88px);text-transform:uppercase;line-height:.94;letter-spacing:.004em}
.case-dek{margin-top:var(--s-3);color:var(--fg2);font-size:17px;max-width:64ch}
.case-meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:var(--s-5);
}
.case-meta>div{background:var(--panel);padding:16px 18px}
.case-meta dt,.case-meta .k{color:var(--cyan);font-family:var(--font-mono);font-size:var(--ui);letter-spacing:var(--track);text-transform:uppercase}
.case-meta dd,.case-meta .v{display:block;margin-top:6px;font-size:15px}
.case-section{
  display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--s-4);
  align-items:start;padding-block:var(--s-5);border-top:1px solid var(--line);
}
.case-section:first-of-type{border-top:0;padding-top:0}
.case-section>h2{
  margin:0;padding-top:4px;color:var(--cyan);font-weight:400;
  font-family:var(--font-mono);font-size:var(--ui);letter-spacing:var(--track);text-transform:uppercase;
}
.case-body>p{color:var(--fg2);margin-bottom:var(--s-2);max-width:70ch;font-size:16px}
.case-body>p:last-child{margin-bottom:0}
.case-body b{color:var(--fg);font-weight:500}
.case-body h3{font-size:19px;font-weight:500;margin:var(--s-3) 0 var(--s-1)}
.case-body p a{color:var(--lime)}
.case-body ul{display:grid;gap:10px;margin-bottom:var(--s-2)}
.case-body ul li{color:var(--fg2);padding-left:20px;position:relative;font-size:16px}
.case-body ul li::before{content:"";position:absolute;left:0;top:.7em;width:10px;height:1px;background:var(--lime)}
@media (max-width:860px){.case-section{grid-template-columns:1fr;gap:var(--s-2)}}
.case-fig{margin-block:var(--s-3);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.case-fig img{width:100%;height:auto}
p.fig-cap,.fig-cap{display:block;color:var(--fg3);margin-top:10px;font-size:var(--ui);line-height:1.7}
.case-fig .fig-cap{margin:0;padding:10px 14px;border-top:1px solid var(--line)}
.stat-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-block:var(--s-3);
}
.stat-strip>*{background:var(--panel);padding:18px}
.stat-strip .v{display:block;font-family:var(--font-display);font-size:34px;line-height:1;color:var(--cyan)}
.stat-strip .k{display:block;margin-top:8px;color:var(--fg3);font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;line-height:1.6}
.evidence{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);flex-wrap:wrap;
  border:1px solid var(--line);border-radius:100px;padding:12px 20px;margin-bottom:9px;
  font-family:var(--font-mono);font-size:var(--ui);letter-spacing:var(--track);text-transform:uppercase;
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.evidence:hover{border-color:var(--lime);color:var(--lime)}
.case-next{border-top:1px solid var(--line);padding-block:var(--s-4) var(--s-6)}
.case-next .label{display:block;color:var(--fg3);margin-bottom:10px}
.next-name{display:inline-block;font-family:var(--font-display);font-size:clamp(32px,5vw,60px);text-transform:uppercase;line-height:1}
.next-name:hover{color:var(--lime)}
aside{color:var(--fg2)}

/* ---------- reveal ---------- */
html.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html.js .reveal{opacity:1;transform:none}
  .hero-title .line>span{transform:none}
}