/* ============================================================
   CYBORG CORP — "Bring back Punk in Cyberpunk"
   3 visual directions: ACID (default) / XEROX / CRT
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:15px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background-color .35s, color .35s;
}

/* ───────── Direction: ACID (default) ───────── */
.dir-acid{
  --bg:#0a0a0b;
  --fg:#f4f1e6;
  --paper:#161618;
  --ink:#f4f1e6;
  --acc1:#E6FF00;     /* acid yellow */
  --acc2:#FF1F8F;     /* hot magenta */
  --acc3:#00E5FF;     /* electric cyan */
  --acc4:#FF5B00;     /* danger orange */
  --rule:rgba(244,241,230,.18);
  --noise-opacity:.06;
  --grain-mode:overlay;
}

/* ───────── Direction: XEROX ───────── */
.dir-xerox{
  --bg:#ede4d1;
  --fg:#0d0c0a;
  --paper:#f4ecd8;
  --ink:#0d0c0a;
  --acc1:#D7212B;     /* safety red */
  --acc2:#1d3557;     /* riso blue */
  --acc3:#0d0c0a;     /* black */
  --acc4:#0d0c0a;
  --rule:rgba(13,12,10,.32);
  --noise-opacity:.18;
  --grain-mode:multiply;
}

/* ───────── Direction: CRT ───────── */
.dir-crt{
  --bg:#020404;
  --fg:#9affc0;
  --paper:#04100a;
  --ink:#9affc0;
  --acc1:#00ff66;
  --acc2:#ff2bd6;
  --acc3:#00ffff;
  --acc4:#ffff66;
  --rule:rgba(154,255,192,.22);
  --noise-opacity:.08;
  --grain-mode:screen;
}

/* ───────── Global noise / scanline overlay ───────── */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9000;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/></svg>");
  opacity:var(--noise-opacity);
  mix-blend-mode:var(--grain-mode);
}
body.dir-crt::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9001;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;
}

/* ============================================================
   TYPE
   ============================================================ */
.f-display{font-family:'Archivo Black', 'Helvetica Neue', sans-serif; letter-spacing:-.02em; line-height:.88; text-transform:uppercase}
.f-mono{font-family:'JetBrains Mono', ui-monospace, monospace}
.f-pixel{font-family:'VT323', monospace; letter-spacing:.02em}
.f-stencil{font-family:'Major Mono Display', monospace; letter-spacing:.02em}
.f-typewriter{font-family:'Special Elite', 'Courier New', monospace}

h1,h2,h3,h4{margin:0;font-weight:400}

/* Eyebrow / utility ticker text */
.tick{font-family:'JetBrains Mono', monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.72}

/* Ransom-note tag (used in headlines for chaos accents) */
.ransom{
  display:inline-block;background:var(--acc1);color:var(--bg);
  padding:0 .12em;transform:rotate(-2.5deg);margin:0 .04em;
}
.dir-xerox .ransom{background:var(--acc1);color:var(--paper)}
.dir-crt .ransom{background:var(--acc2);color:#000}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;
  font-family:'JetBrains Mono', monospace;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  mix-blend-mode:difference;color:#fff;
}
.nav-logo{display:flex;align-items:center;gap:10px;font-weight:700}
.nav-logo .dot{width:9px;height:9px;background:var(--acc1);display:inline-block;animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}
.nav-links{display:flex;gap:22px}
.nav-links a{color:inherit;text-decoration:none;position:relative}
.nav-links a:hover{color:var(--acc1)}

/* ============================================================
   LAYOUT
   ============================================================ */
section{position:relative;padding:120px 32px}
.wrap{max-width:1380px;margin:0 auto;width:100%}

.section-tag{
  display:flex;align-items:center;gap:14px;
  font-family:'JetBrains Mono', monospace;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  margin-bottom:36px;
  color:color-mix(in oklch, var(--fg) 80%, transparent);
}
.section-tag .num{color:var(--acc2);font-weight:700}
.section-tag .bar{flex:1;height:1px;background:var(--rule)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:100vh;
  padding:140px 32px 80px;
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;
}

.hero-headline{
  font-family:'Archivo Black', sans-serif;
  font-size:clamp(64px, 16.5vw, 280px);
  line-height:.84;letter-spacing:-.035em;
  text-transform:uppercase;
  position:relative;z-index:2;
}
.hero-headline .line{display:block}
.hero-headline .swap{display:inline-block;transform-origin:left center}
.hero-headline .strike{
  position:relative;display:inline-block;
}
.hero-headline .strike::after{
  content:"";position:absolute;left:-2%;right:-2%;top:48%;height:.18em;
  background:var(--acc2);transform:rotate(-2.5deg);
}
.hero-headline em{
  font-style:normal;color:var(--acc1);
  display:inline-block;
}
.hero-headline .glitch{
  position:relative;color:var(--fg);display:inline-block;
}
.hero-headline .glitch::before,
.hero-headline .glitch::after{
  content:attr(data-text);position:absolute;left:0;top:0;width:100%;
  pointer-events:none;
}
.hero-headline .glitch::before{color:var(--acc2);transform:translate(-3px,2px);mix-blend-mode:screen;clip-path:polygon(0 12%,100% 12%,100% 28%,0 28%)}
.hero-headline .glitch::after{color:var(--acc3);transform:translate(3px,-2px);mix-blend-mode:screen;clip-path:polygon(0 60%,100% 60%,100% 78%,0 78%)}

.hero-meta{
  display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:28px;
  margin-top:48px;align-items:end;
}
.hero-meta .col h4{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.55;margin-bottom:8px}
.hero-meta .col p{margin:0;font-size:14px;max-width:38ch}
.hero-cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 18px;background:var(--acc1);color:#000;
  text-decoration:none;font-family:'JetBrains Mono';font-weight:700;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  border:2px solid var(--acc1);
  transition:transform .12s, background .15s, color .15s;
}
.hero-cta:hover{background:transparent;color:var(--acc1);transform:translate(-2px,-2px) skewX(-3deg)}
.dir-crt .hero-cta{color:#000}

/* Floating tape labels stuck across hero */
.tape{
  position:absolute;background:var(--acc4);color:#000;
  font-family:'JetBrains Mono',monospace;font-weight:700;
  padding:6px 14px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  box-shadow:0 0 0 1px rgba(0,0,0,.25), 4px 4px 0 rgba(0,0,0,.45);
  z-index:3;
  white-space:nowrap;
}

/* Marquee row */
.marquee{
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  overflow:hidden;white-space:nowrap;
  font-family:'Archivo Black';text-transform:uppercase;
  font-size:clamp(28px, 4vw, 56px);line-height:1.1;
  padding:14px 0;
}
.marquee-track{display:inline-flex;gap:42px;padding-left:42px;animation:marq 24s linear infinite}
.marquee-track span{display:inline-block}
.marquee-track span:nth-child(2n){color:var(--acc1)}
.marquee-track span:nth-child(3n){color:var(--acc2);font-style:italic}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   ABOUT (Ce que nous sommes)
   ============================================================ */
.about{padding:160px 32px}
.about-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:80px;align-items:start}
.about-stmt{font-family:'Archivo Black';font-size:clamp(36px,5.4vw,84px);line-height:.95;letter-spacing:-.02em;text-transform:uppercase}
.about-stmt em{color:var(--acc2);font-style:normal}
.about-stmt s{text-decoration:line-through;text-decoration-color:var(--acc1);text-decoration-thickness:.12em;opacity:.55}
.about-side{font-size:15px;max-width:48ch}
.about-side p{margin:0 0 16px}
.about-side .stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px;border-top:1px solid var(--rule);padding-top:24px}
.about-side .stat-row .k{font-family:'Archivo Black';font-size:38px;line-height:1;color:var(--acc1)}
.about-side .stat-row .l{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.65;margin-top:6px}

/* ============================================================
   THREE WORKS (game / book / tabletop)
   ============================================================ */
.works{padding:120px 0 60px}
.works .wrap{padding:0 32px}
.works-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-bottom:60px;flex-wrap:wrap}
.works-intro h2{font-family:'Archivo Black';font-size:clamp(48px,8vw,124px);line-height:.88;text-transform:uppercase;letter-spacing:-.02em}
.works-intro h2 em{color:var(--acc1);font-style:normal}
.works-intro p{max-width:34ch;font-size:14px;opacity:.78}

.work{
  border-top:2px solid var(--fg);
  padding:56px 32px;
  display:grid;grid-template-columns:80px 1.1fr 1.4fr;gap:48px;
  align-items:start;
  position:relative;
  transition:background .25s;
}
.work:last-child{border-bottom:2px solid var(--fg)}
.work:hover{background:color-mix(in oklch, var(--acc1) 8%, transparent)}
.work .num{font-family:'Archivo Black';font-size:54px;line-height:1;color:var(--acc2)}
.work .meta .kind{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.65;margin-bottom:8px}
.work .meta h3{font-family:'Archivo Black';font-size:clamp(40px,5vw,72px);line-height:.92;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:18px}
.work .meta h3 em{color:var(--acc1);font-style:normal;background:var(--ink);padding:0 .08em}
.dir-xerox .work .meta h3 em{color:var(--paper)}
.work .meta .blurb{font-size:14px;max-width:42ch;margin-bottom:22px;line-height:1.55}
.work .meta .specs{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;font-family:'JetBrains Mono';font-size:11px;letter-spacing:.06em}
.work .meta .specs dt{opacity:.55;text-transform:uppercase;letter-spacing:.18em;font-size:10px}
.work .meta .specs dd{margin:0 0 8px;color:var(--acc3)}
.dir-xerox .work .meta .specs dd{color:var(--acc2)}
.work .visual{position:relative;aspect-ratio:4/3;width:100%;background:var(--paper);overflow:hidden}
.work .visual image-slot{display:block;width:100%;height:100%}
.work .visual .corner{
  position:absolute;top:10px;left:10px;
  font-family:'JetBrains Mono';font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  background:var(--acc1);color:#000;padding:4px 8px;z-index:2;
}
.work .visual .stamp{
  position:absolute;bottom:14px;right:14px;
  border:2px solid var(--acc2);color:var(--acc2);
  font-family:'JetBrains Mono';font-weight:700;font-size:11px;letter-spacing:.22em;
  padding:6px 10px;text-transform:uppercase;transform:rotate(-6deg);
  background:color-mix(in oklch, var(--bg) 70%, transparent);
}

/* ============================================================
   FACTIONS
   ============================================================ */
.factions{padding:140px 32px;background:var(--bg);position:relative}
.factions-h{font-family:'Archivo Black';font-size:clamp(48px,8vw,124px);line-height:.9;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:60px}
.factions-h em{color:var(--acc2);font-style:normal;background:var(--ink);color:var(--bg);padding:0 .08em}
.dir-xerox .factions-h em{color:var(--paper)}
.factions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--fg);margin-bottom:60px}
.faction{
  background:var(--bg);padding:28px;display:flex;flex-direction:column;gap:14px;
  position:relative;transition:background .25s, color .25s;
  border-top:6px solid var(--fac);
}
.faction:hover{background:var(--paper)}
.faction header{display:flex;justify-content:space-between;align-items:center;font-family:'JetBrains Mono';font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.85}
.faction .fc{color:var(--fac);font-weight:700}
.faction .fdot{width:12px;height:12px;background:var(--fac);display:inline-block}
.faction h3{font-family:'Archivo Black';font-size:clamp(38px,4.4vw,64px);line-height:.9;text-transform:uppercase;letter-spacing:-.02em;color:var(--fac)}
.faction .fsub{font-family:'Special Elite';font-size:15px;opacity:.85}
.faction p{margin:0;font-size:13.5px;line-height:1.55;opacity:.92}
.faction .ftags{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.faction .ftags li{
  font-family:'JetBrains Mono';font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--fac);color:var(--fac);padding:4px 8px;
}
.faction .fslot{aspect-ratio:4/3;background:var(--paper);border:1px solid var(--rule);margin-top:auto;overflow:hidden}
.faction .fslot image-slot{display:block;width:100%;height:100%}

.usps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:2px solid var(--fg);padding-top:36px}
.usp .usp-no{
  font-family:'Archivo Black';font-size:clamp(28px,3.2vw,44px);line-height:.95;
  text-transform:uppercase;color:var(--acc2);
  text-decoration:line-through;text-decoration-color:var(--acc1);text-decoration-thickness:.08em;
  margin-bottom:12px;
}
.usp p{margin:0;font-size:14px;line-height:1.55;max-width:36ch}
.usp p em{color:var(--acc1);font-style:normal;font-weight:700}

@media (max-width:980px){
  .factions-grid{grid-template-columns:1fr}
  .usps{grid-template-columns:1fr;gap:24px}
}

/* ============================================================
   HUMAN-MADE BAND
   ============================================================ */
.human{padding:0 0 100px;background:var(--bg);position:relative;overflow:hidden}
.human .wrap{padding:0 32px}
.human-rule{
  border-top:2px solid var(--fg);border-bottom:2px solid var(--fg);
  background:var(--acc1);color:#000;
  overflow:hidden;white-space:nowrap;
  font-family:'Archivo Black';text-transform:uppercase;
  font-size:clamp(18px,2.4vw,30px);letter-spacing:.04em;
  padding:10px 0;margin-bottom:72px;
}
.human-rule span{display:inline-block;animation:marq 28s linear infinite}
.human-rule-rev{background:var(--fg);color:var(--bg);margin:72px 0 0}
.human-rule-rev span{animation-direction:reverse;animation-duration:32s}
.dir-crt .human-rule{background:var(--acc1);color:#000}

.human-grid{display:grid;grid-template-columns:340px 1fr;gap:64px;align-items:start}

.human-stamp{
  border:3px solid var(--acc2);
  aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;transform:rotate(-4deg);
  background:color-mix(in oklch, var(--acc2) 8%, transparent);
}
.human-stamp::before{
  content:"NO MACHINE";position:absolute;top:14px;
  font-family:'JetBrains Mono';font-size:11px;letter-spacing:.4em;color:var(--acc2);
}
.human-stamp::after{
  content:"AUTHENTIC / 2021";position:absolute;bottom:14px;
  font-family:'JetBrains Mono';font-size:11px;letter-spacing:.26em;color:var(--acc2);
}
.human-stamp .hs-pct{font-family:'Archivo Black';font-size:clamp(90px,11vw,150px);line-height:.8;color:var(--acc2)}
.human-stamp .hs-pct span{font-size:.4em;vertical-align:super}
.human-stamp .hs-label{font-family:'Archivo Black';font-size:38px;letter-spacing:.12em;color:var(--fg);line-height:1}
.human-stamp .hs-sub{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.7;margin-top:8px}

.human-copy h2{font-family:'Archivo Black';font-size:clamp(40px,5.6vw,88px);line-height:.92;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:28px}
.human-copy h2 em{color:var(--acc1);font-style:normal}
.human-copy p{margin:0 0 18px;font-size:15.5px;line-height:1.6;max-width:62ch}
.human-copy p strong{color:var(--acc3);font-weight:700}
.dir-xerox .human-copy p strong{color:var(--acc2)}
.human-since{font-family:'Special Elite';font-size:16px !important;opacity:.92}
.human-since em{font-style:normal;color:var(--acc2)}
.human-marks{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.human-marks .hmark{
  font-family:'JetBrains Mono';font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  border:1px solid var(--fg);padding:7px 12px;
}

@media (max-width:980px){
  .human-grid{grid-template-columns:1fr;gap:40px}
  .human-stamp{max-width:280px}
}
@media (max-width:760px){
  .human .wrap{padding:0 18px}
  .human-rule{margin-bottom:48px}
  .human-rule-rev{margin-top:48px}
}

/* ============================================================
   PRÉFACE EXCERPT
   ============================================================ */
.preface{
  padding:160px 32px;
  background:var(--paper);
  position:relative;
  overflow:hidden;
}
.preface::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent,var(--bg) 90%);
  opacity:.0;pointer-events:none;
}
.preface .wrap{display:grid;grid-template-columns:1fr 1.3fr;gap:80px}
.preface-side .label{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--acc2);margin-bottom:20px}
.preface-side h2{font-family:'Archivo Black';font-size:clamp(40px,6vw,96px);line-height:.92;text-transform:uppercase;letter-spacing:-.02em}
.preface-side h2 .small{display:block;font-family:'Special Elite';text-transform:none;font-size:.32em;letter-spacing:0;line-height:1.2;margin-top:18px;font-weight:400;opacity:.78}
.preface-body{font-family:'Special Elite', 'Courier New', monospace;font-size:17px;line-height:1.7;max-width:60ch}
.preface-body p{margin:0 0 1.2em}
.preface-body .open{font-size:1.2em;font-weight:400}
.preface-body .open::first-letter{font-family:'Archivo Black';font-size:3.6em;line-height:.85;float:left;margin:6px 10px 0 0;color:var(--acc1)}
.preface-body em.flag{font-style:normal;background:var(--acc2);color:var(--paper);padding:0 .12em}
.preface-attrib{margin-top:40px;font-family:'JetBrains Mono';font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.6}

/* ============================================================
   SHOP
   ============================================================ */
.shop{padding:140px 32px}
.shop-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;margin-bottom:48px}
.shop-head h2{font-family:'Archivo Black';font-size:clamp(48px,8vw,128px);line-height:.88;text-transform:uppercase;letter-spacing:-.02em}
.shop-head h2 em{color:var(--acc2);font-style:normal;text-decoration:line-through;text-decoration-color:var(--acc1);text-decoration-thickness:.07em}
.shop-head .meta{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.7}

.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--fg)}
.shop-item{background:var(--bg);padding:24px;display:flex;flex-direction:column;gap:14px;cursor:pointer;transition:background .2s, color .2s}
.shop-item:hover{background:var(--acc1);color:#000}
.shop-item:hover .price{color:#000}
.shop-item:hover .si-img::before{opacity:.25}
.si-img{aspect-ratio:1/1;background:#0a0a0b;background-size:cover;background-position:center;position:relative;overflow:hidden;border:1px solid var(--rule);transition:filter .25s}
.shop-item:hover .si-img{filter:contrast(1.15) saturate(1.2)}
.si-img::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(45deg,
    color-mix(in oklch, var(--fg) 8%, transparent) 0 8px,
    transparent 8px 16px);
  opacity:0;transition:opacity .25s;
}
.si-img .label{
  position:absolute;left:10px;bottom:10px;
  font-family:'JetBrains Mono';font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  background:var(--bg);color:var(--fg);padding:4px 8px;
}
.si-name{font-family:'Archivo Black';font-size:18px;text-transform:uppercase;line-height:1}
.si-meta{display:flex;justify-content:space-between;font-family:'JetBrains Mono';font-size:11px;letter-spacing:.06em;opacity:.85}
.price{color:var(--acc1);font-weight:700}

/* ============================================================
   JOIN
   ============================================================ */
.join{
  padding:180px 32px;
  background:var(--acc2);
  color:#0a0a0b;
  position:relative;overflow:hidden;
}
.dir-xerox .join{background:var(--acc1);color:var(--paper)}
.dir-crt .join{background:var(--acc2);color:#000}
.join .wrap{position:relative;z-index:2}
.join h2{font-family:'Archivo Black';font-size:clamp(72px,15vw,260px);line-height:.84;text-transform:uppercase;letter-spacing:-.04em;mix-blend-mode:difference;color:#fff}
.join .lead{font-family:'JetBrains Mono';font-size:14px;letter-spacing:.04em;max-width:48ch;margin:36px 0 0;line-height:1.6}
.join .lead strong{background:#000;color:var(--acc1);padding:1px 6px}

.roles{margin-top:64px;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#000}
.role{background:var(--acc2);padding:24px;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;transition:background .2s}
.dir-xerox .role{background:var(--acc1)}
.dir-crt .role{background:var(--acc2)}
.role:hover{background:#000;color:var(--acc1)}
.role .r-name{font-family:'Archivo Black';font-size:22px;text-transform:uppercase;letter-spacing:-.01em;line-height:1}
.role .r-meta{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.7;margin-top:4px}
.role .arrow{font-family:'Archivo Black';font-size:32px}

.join-flag{
  position:absolute;font-family:'Archivo Black';
  font-size:clamp(120px,22vw,360px);line-height:.8;
  color:#000;opacity:.06;pointer-events:none;letter-spacing:-.04em;
  top:6%;right:-3%;z-index:1;text-transform:uppercase;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  padding:80px 32px 40px;border-top:1px solid var(--rule);
}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px}
.foot-logo{font-family:'Archivo Black';font-size:36px;line-height:.9;text-transform:uppercase}
.foot-logo .dot{display:inline-block;width:14px;height:14px;background:var(--acc1);margin-left:6px;animation:blink 1.6s steps(2) infinite}
.foot-tag{margin-top:16px;font-size:13px;max-width:34ch;opacity:.78}
.foot-col h4{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.6;margin-bottom:14px}
.foot-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.foot-col a{color:var(--fg);text-decoration:none;font-size:13px}
.foot-col a:hover{color:var(--acc1)}
.foot-bottom{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:64px;padding-top:24px;border-top:1px solid var(--rule);
  font-family:'JetBrains Mono';font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.6;
  flex-wrap:wrap;gap:16px;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:none}
.reveal-2{transition-delay:.12s}
.reveal-3{transition-delay:.24s}
.reveal-4{transition-delay:.36s}

/* Glitchy section reveal */
.glitch-in.in .glitch-target{
  animation: glitchPop .55s steps(6) both;
}
@keyframes glitchPop{
  0%{transform:translateX(-4px) skewX(-6deg);filter:hue-rotate(40deg) contrast(1.4)}
  30%{transform:translateX(3px);filter:hue-rotate(-20deg)}
  60%{transform:translateX(-1px) skewX(2deg)}
  100%{transform:none;filter:none}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px){
  .hero-meta{grid-template-columns:1fr;gap:24px}
  .about-grid{grid-template-columns:1fr;gap:32px}
  .work{grid-template-columns:1fr;gap:24px;padding:40px 24px}
  .work .num{font-size:32px}
  .preface .wrap{grid-template-columns:1fr;gap:32px}
  .shop-grid{grid-template-columns:repeat(2,1fr)}
  .roles{grid-template-columns:1fr}
  footer .wrap{grid-template-columns:1fr 1fr;gap:32px}
}

/* ── Tablet / small ────────────────────────────────────── */
@media (max-width: 760px){
  /* Nav: logo + horizontally-scrollable links, drop version chip */
  .nav{padding:12px 16px;gap:14px}
  .nav-meta{display:none}
  .nav-links{
    gap:16px;overflow-x:auto;white-space:nowrap;
    -ms-overflow-style:none;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
            mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
  .nav-links::-webkit-scrollbar{display:none}
  .nav-logo{flex:0 0 auto}

  section{padding:88px 18px}
  .hero{padding:120px 18px 64px;min-height:auto}
  .marquee{margin-left:-18px !important;margin-right:-18px !important}
  .about{padding:96px 18px}
  .preface,.shop,.factions{padding:96px 18px}
  .join{padding:120px 18px}

  /* Tape labels crowd the hero headline on phones */
  .tape{position:static;display:inline-block;margin:0 8px 10px 0;box-shadow:none;transform:none !important}

  .hero-meta{margin-top:32px}
  .works-intro{gap:24px;margin-bottom:40px}
  .stat-row{gap:14px !important}
  .about-side .stat-row .k{font-size:30px}
}

/* ── Phone ─────────────────────────────────────────────── */
@media (max-width: 560px){
  .shop-grid{grid-template-columns:1fr}
  footer .wrap{grid-template-columns:1fr;gap:28px}
  .factions-grid{gap:1px}
  .work .meta .specs{grid-template-columns:1fr}
  .join-flag{font-size:38vw}
  .role{grid-template-columns:1fr auto;padding:18px}
  .role .r-name{font-size:18px}
}