/* ══════════════════════════════════════════════════════════════
   BrAtUkA / creative developer
   sleek · clean · mostly-background · one signal-red accent
   the warping mesh leads; the content just floats over it.
   ══════════════════════════════════════════════════════════════ */

:root{
  --bg:        #08090b;
  --panel:     rgba(255,255,255,.025);
  --line:      rgba(255,255,255,.10);
  --ink:       #ecebe9;
  --ink-dim:   #8a8b90;
  --ink-faint: #4b4c52;
  --red:       #ff3a4e;
  --red-2:     #c11f30;
  --red-soft:  rgba(255,58,78,.14);
  --chroma:    #46d6d6;
  --glow:      0 0 18px rgba(255,58,78,.30);
  --ease:      cubic-bezier(.22,.7,.2,1);
}

*{ box-sizing:border-box; }
html{ overflow-x:hidden; scroll-behavior:smooth; }
body{
  margin:0;
  background:
    radial-gradient(1100px 720px at 50% 116%, rgba(255,58,78,.07), transparent 62%),
    var(--bg);
  color:var(--ink);
  font-family:"JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size:15px; line-height:1.6;
  overflow-x:hidden;
  cursor:auto;
  user-select:text; -webkit-user-select:text;
  -webkit-tap-highlight-color:transparent;
}
body[data-cc="1"],body[data-cc="1"] *{ cursor:none !important; }
@media (pointer:coarse){ body[data-cc="1"],body[data-cc="1"] *{ cursor:auto !important; } }
::selection{ background:var(--red); color:#fff; }
canvas{ display:block; user-select:none; -webkit-user-select:none; }

.skip-link{
  position:fixed; top:14px; left:50%; z-index:300; transform:translate(-50%,-180%);
  padding:10px 16px; border:2px solid var(--red); border-radius:8px;
  background:var(--bg); color:var(--ink); font-weight:700; text-decoration:none;
  transition:transform .18s var(--ease);
}
.skip-link:focus{ transform:translate(-50%,0); }
.stage:focus{ outline:none; }
:where(a,button,input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible{
  outline:2px solid var(--red) !important;
  outline-offset:4px;
  box-shadow:0 0 0 4px rgba(8,9,11,.9), 0 0 0 6px rgba(255,58,78,.35);
}
body[data-cc="1"]:has(:focus-visible),
body[data-cc="1"]:has(:focus-visible) :where(a,button,input,select,textarea,[tabindex]:not([tabindex="-1"])){
  cursor:auto !important;
}

/* ── warping mesh canvas ───────────────────────────────────── */
#bg{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }

/* ── lightweight mobile backdrop (replaces the WebGL fluid on phones) ── */
.mbg{ display:none; }
@media (pointer:coarse){
  #bg{ display:none !important; }
  .mbg{ display:block; position:fixed; inset:0; z-index:0; overflow:hidden; isolation:isolate;
        background:radial-gradient(120% 90% at 30% 15%, #160a10, #06070a 70%); pointer-events:none; }
}
.mbg__blob{ position:absolute; will-change:transform; mix-blend-mode:screen; }   /* additive glow over the dark base */
.mbg__b1{ width:120vw; height:120vw; left:-25vw; top:-22vh;
  background:radial-gradient(circle at 50% 50%, rgba(255,58,78,.32), transparent 58%);
  animation:mbgDrift1 17s ease-in-out infinite alternate; }
.mbg__b2{ width:100vw; height:100vw; right:-26vw; top:10vh;
  background:radial-gradient(circle at 50% 50%, rgba(86,120,200,.16), transparent 60%);
  animation:mbgDrift2 21s ease-in-out infinite alternate; }
.mbg__b3{ width:130vw; height:130vw; left:-26vw; bottom:-26vh;
  background:radial-gradient(circle at 50% 50%, rgba(255,72,92,.24), transparent 62%);
  animation:mbgDrift3 25s ease-in-out infinite alternate; }
.mbg__touch{ position:absolute; top:0; left:0; width:80vw; height:80vw; margin:-40vw 0 0 -40vw; mix-blend-mode:screen;
  background:radial-gradient(circle at 50% 50%, rgba(255,84,104,.6), transparent 58%);
  opacity:0; transition:opacity .45s ease, transform .3s cubic-bezier(.22,1,.36,1); will-change:transform,opacity; }
@keyframes mbgDrift1{ from{transform:translate(0,0) scale(1)}    to{transform:translate(18vw,13vh) scale(1.3)} }
@keyframes mbgDrift2{ from{transform:translate(0,0) scale(1.05)} to{transform:translate(-16vw,-10vh) scale(1.35)} }
@keyframes mbgDrift3{ from{transform:translate(0,0) scale(1.1)}  to{transform:translate(14vw,-12vh) scale(.88)} }
html[data-effects="off"] .mbg__blob{ animation:none !important; }
@media (prefers-reduced-motion:reduce){ html:not([data-effects]) .mbg__blob{ animation:none !important; } }

/* ── atmosphere ────────────────────────────────────────────── */
.fx{ position:fixed; inset:0; pointer-events:none; z-index:5; }
.fx--grain{ z-index:6; opacity:.03; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite; }
@keyframes grain{ 0%{transform:translate(0,0)} 50%{transform:translate(-4%,3%)} 100%{transform:translate(3%,-4%)} }
.fx--scan{ z-index:7; opacity:.16;
  background:repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.22) 3px 4px);
  animation:scan 10s linear infinite; }
@keyframes scan{ to{ background-position:0 130px; } }
body[data-scanlines="off"] .fx--scan{ opacity:0; }
.fx--vignette{ z-index:8;
  background:radial-gradient(130% 105% at 50% 46%, transparent 54%, rgba(0,0,0,.78) 100%); }

/* ── custom cursor ─────────────────────────────────────────── */
.cursor{ position:fixed; left:0; top:0; z-index:120; pointer-events:none; opacity:0; }
.cursor.is-active{ opacity:1; }
@media (pointer:coarse){ .cursor{ display:none; } }
.cursor__dot,.cursor__ring{ position:absolute; left:0; top:0; border-radius:50%; will-change:transform; }
.cursor__dot{ width:6px; height:6px; background:var(--red); transition:background .15s ease; }
.cursor__ring{ width:30px; height:30px; border:1px solid rgba(255,255,255,.55); transition:border-color .2s ease; }
.cursor.is-hot  .cursor__ring{ border-color:var(--red); }
.cursor.is-down .cursor__ring{ border-color:var(--red); }
.cursor.is-down .cursor__dot{ background:#fff; }    /* dot pops white inside the locked ring */
/* click feedback / a clean ring that radiates out from the press point */
.cursor__pulse{ position:absolute; left:0; top:0; width:0; height:0; }
.cursor__pulse i{ position:absolute; left:0; top:0; width:36px; height:36px; margin:-18px 0 0 -18px;
  border-radius:50%; border:1px solid var(--red); opacity:0; }
.cursor__pulse.go i{ animation:cpulse .55s var(--ease); }
@keyframes cpulse{ 0%{ opacity:.6; transform:scale(.35); } 100%{ opacity:0; transform:scale(2.4); } }

/* ── HUD ───────────────────────────────────────────────────── */
.hud{ position:fixed; inset:0; z-index:30; pointer-events:none;
  font-size:11px; letter-spacing:.16em; color:var(--ink-dim); text-transform:uppercase;
  user-select:none; -webkit-user-select:none; }
.hud__b{ position:absolute; width:18px; height:18px; border:1px solid rgba(255,255,255,.22); }
.hud__b--tl{ top:18px; left:18px; border-right:0; border-bottom:0; }
.hud__b--tr{ top:18px; right:18px; border-left:0; border-bottom:0; }
.hud__b--bl{ bottom:18px; left:18px; border-right:0; border-top:0; }
.hud__b--br{ bottom:18px; right:18px; border-left:0; border-top:0; }
.hud__row{ position:absolute; left:48px; right:48px; display:flex; align-items:center; gap:14px; }
.hud__row--top{ top:24px; }
.hud__row--bottom{ bottom:24px; padding-right:calc(12ch + 14px); }
.hud__spacer{ flex:1; }
.hud__mark{ color:var(--ink); letter-spacing:.22em; display:flex; align-items:center; gap:9px; }
.hud__dim{ color:var(--ink-faint); }
#hud-fps{ position:absolute; right:0; inline-size:12ch; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.hud__toggle{ pointer-events:auto; cursor:pointer; min-height:28px; inline-size:94px; flex:0 0 94px;
  background:none; border:0; padding:4px 6px; text-align:center; white-space:nowrap;
  font:inherit; letter-spacing:.16em; color:var(--ink-dim); text-transform:uppercase; }
.hud__toggle b{ color:var(--ink-dim); }
.hud__toggle.is-on b{ color:var(--red); }
.hud__effects{ pointer-events:auto; display:flex; align-items:center; gap:2px; padding:2px;
  border:1px solid var(--line); border-radius:999px; background:rgba(8,9,11,.72); backdrop-filter:blur(8px); }
.hud__effects-label{ margin:0 5px 0 7px; color:var(--ink-faint); }
.hud__fx{ min-width:0; min-height:28px; border:0; border-radius:999px; padding:5px 8px; background:transparent;
  color:var(--ink-dim); font:inherit; font-size:9px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
  transition:color .2s, background .2s, box-shadow .2s; }
.hud__fx:hover{ color:var(--ink); }
.hud__fx[aria-pressed="true"]{ color:var(--ink); background:var(--red-soft); box-shadow:inset 0 0 0 1px rgba(255,58,78,.3); }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:var(--glow);
  animation:pulse 1.9s infinite; display:inline-block; }
@keyframes pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.6)} }
@media (max-width:680px){
  .hud__row{ left:30px; right:30px; gap:8px; font-size:9px; letter-spacing:.08em; }
  .hud__row--bottom{ padding-right:0; }
  .hud__effects-label{ display:none; }
  .hud__fx{ min-height:28px; padding:4px 6px; font-size:8px; letter-spacing:.03em; }
}

/* ── stage / hero ──────────────────────────────────────────── */
.stage{ position:relative; z-index:10; }

.hero{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; gap:22px;
  padding:0 clamp(30px,7vw,96px); position:relative; }
.hero > *{ max-width:960px; }
.hero__kicker{ margin:0; font-size:12px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-dim); display:flex; align-items:center; gap:11px; }
.hero__title{ font-family:"Chakra Petch",sans-serif; font-weight:600;
  font-size:clamp(64px,15vw,210px); line-height:.9; margin:0; letter-spacing:-.01em;
  color:var(--ink); cursor:default; white-space:nowrap; }
.hero__lede{ max-width:54ch; margin:0; font-size:clamp(15px,1.7vw,18px); color:var(--ink-dim); }
.hero__lede .hl{ color:var(--ink); border-bottom:1px solid var(--red); padding-bottom:1px; }

/* chips */
.chips{ list-style:none; margin:4px 0 0; padding:0; display:flex; gap:10px; flex-wrap:wrap; }
.chip{ font-family:"Chakra Petch",sans-serif; font-size:11.5px; letter-spacing:.16em;
  padding:7px 14px; border:1px solid var(--line); border-radius:999px; color:var(--ink-dim);
  background:var(--panel); cursor:default; transition:.25s var(--ease); backdrop-filter:blur(6px);
  user-select:none; -webkit-user-select:none; }
.chip:hover{ color:var(--ink); border-color:var(--red); transform:translateY(-3px);
  box-shadow:0 10px 30px -16px rgba(255,58,78,.7); }

/* buttons */
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }
.btn{ font-family:"Chakra Petch",sans-serif; font-weight:500; font-size:13.5px; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none; cursor:pointer; padding:14px 26px; border-radius:10px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); position:relative; display:inline-flex; align-items:center; gap:10px;
  overflow:hidden; backdrop-filter:blur(6px);
  transition:color .25s, border-color .25s, background .25s, transform .1s, box-shadow .25s; }
.btn__arrow{ transition:transform .25s var(--ease); }
.btn:hover .btn__arrow{ transform:translate(3px,-3px); }
.btn:hover .btn__arrow--down{ transform:translateY(4px); }
.btn--primary{ background:var(--red); color:#fff; border-color:var(--red); }
.btn--primary:hover{ box-shadow:0 0 26px rgba(255,58,78,.45); }
.btn--ghost:hover{ border-color:var(--red); color:var(--red); }
.btn:active{ transform:scale(.96); }
.btn .ripple{ position:absolute; border-radius:50%; transform:translate(-50%,-50%) scale(0);
  background:rgba(255,255,255,.4); pointer-events:none; animation:rip .6s ease-out forwards; }
.btn--ghost .ripple{ background:rgba(255,58,78,.3); }
@keyframes rip{ to{ transform:translate(-50%,-50%) scale(1); opacity:0; } }

/* ── GLITCH (punctuation, not wallpaper) ───────────────────── */
.glitch{ position:relative; display:inline-block; }
.glitch::before,.glitch::after{ content:attr(data-text); position:absolute; inset:0;
  clip-path:inset(0 0 0 0); pointer-events:none; opacity:0; transition:opacity .2s; }
.glitch::before{ color:var(--red);    left:2px;  text-shadow:-1px 0 var(--red); }
.glitch::after{  color:var(--chroma); left:-2px; text-shadow: 1px 0 var(--chroma); }
.glitch:hover::before,.glitch:hover::after,
.glitch.is-glitching::before,.glitch.is-glitching::after{ opacity:.9; }
.glitch:hover::before,.glitch.is-glitching::before{ animation:gl-a .45s steps(2) infinite; }
.glitch:hover::after, .glitch.is-glitching::after{  animation:gl-b .45s steps(2) infinite; }
@keyframes gl-a{
  0%{clip-path:inset(12% 0 84% 0);transform:translateX(-2px)} 20%{clip-path:inset(80% 0 6% 0);transform:translateX(2px)}
  40%{clip-path:inset(42% 0 41% 0);transform:translateX(-1px)} 60%{clip-path:inset(64% 0 15% 0);transform:translateX(1px)}
  80%{clip-path:inset(22% 0 70% 0);transform:translateX(-2px)} 100%{clip-path:inset(92% 0 2% 0);transform:translateX(2px)} }
@keyframes gl-b{
  0%{clip-path:inset(70% 0 14% 0);transform:translateX(2px)} 20%{clip-path:inset(26% 0 58% 0);transform:translateX(-2px)}
  40%{clip-path:inset(52% 0 32% 0);transform:translateX(1px)} 60%{clip-path:inset(10% 0 82% 0);transform:translateX(-1px)}
  80%{clip-path:inset(46% 0 38% 0);transform:translateX(2px)} 100%{clip-path:inset(33% 0 51% 0);transform:translateX(-2px)} }

.glitch--mini::before{ left:1px; } .glitch--mini::after{ left:-1px; }
/* Glitch ghosts wrap independently of the real text, so disable them once headings break on mobile. */
@media (max-width:680px){ .glitch::before,.glitch::after{ display:none !important; } }
.hud__sep{ color:var(--ink-faint); }
@media (max-width:680px){ #hud-section, .hud__sep, #hud-coords, #hud-fps{ display:none; } }

/* ── scroll progress ───────────────────────────────────────── */
.scrollbar{ position:fixed; top:0; left:0; right:0; height:2px; z-index:35; pointer-events:none; }
.scrollbar span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--red-2),var(--red));
  box-shadow:0 0 12px rgba(255,58,78,.6); }
/* sleek native scrollbar */
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.10); border-radius:9px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,58,78,.5); background-clip:content-box; }
html{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent; }

/* ── hero scroll cue ───────────────────────────────────────── */
.hero__cue{ position:absolute; left:50%; transform:translateX(-50%); bottom:26px; display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:10.5px; letter-spacing:.28em; color:var(--ink-faint); text-transform:uppercase; }
.hero__cue i{ width:1px; height:34px; background:var(--ink-faint); position:relative; overflow:hidden; }
.hero__cue i::after{ content:''; position:absolute; inset:0; height:14px; background:var(--red);
  animation:cue 1.8s var(--ease) infinite; }
@keyframes cue{ 0%{transform:translateY(-16px)} 100%{transform:translateY(40px)} }

/* ── section scaffold ──────────────────────────────────────── */
.sec{ position:relative; padding:clamp(80px,12vw,170px) 0; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(30px,7vw,96px); }
.sec__tag{ display:inline-block; font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--red);
  margin-bottom:26px; }
.sec__head{ margin-bottom:clamp(40px,6vw,80px); }
.sec__title{ font-family:"Chakra Petch",sans-serif; font-weight:600; font-size:clamp(32px,6.4vw,90px);
  line-height:.95; margin:0; letter-spacing:-.01em; text-transform:uppercase; color:var(--ink); cursor:default;
  max-width:100%; overflow-wrap:break-word; }

/* about / bio + scannable quick facts */
.about{ display:grid; grid-template-columns:1.55fr 1fr; gap:clamp(34px,6vw,84px); align-items:start; }
@media (max-width:820px){ .about{ grid-template-columns:1fr; gap:38px; } }
.about__lead{ font-family:"Chakra Petch",sans-serif; font-weight:500; letter-spacing:-.01em;
  font-size:clamp(22px,3vw,38px); line-height:1.18; color:var(--ink); margin:0 0 26px; max-width:22ch; }
.about__text p:not(.about__lead){ margin:0 0 18px; max-width:54ch;
  font-size:clamp(14px,1.5vw,16px); color:var(--ink-dim); line-height:1.8; }
.about__text p:last-child{ margin-bottom:0; }
.about__text a{ color:var(--ink); text-decoration-color:var(--red); text-underline-offset:4px; }
.about__text a:hover{ color:var(--red); }
.about__facts dl{ margin:0; border-top:1px solid var(--line); }
.about__facts dl > div{ display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding:13px 0; border-bottom:1px solid var(--line); }
.about__facts dt{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap; }
.about__facts dd{ margin:0; text-align:right; font-family:"Chakra Petch",sans-serif; font-weight:500;
  font-size:12.5px; letter-spacing:.02em; color:var(--ink); }
.about__facts dd.open{ color:var(--red); display:flex; align-items:center; gap:7px; }
.about__facts dd.open::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--red);
  box-shadow:var(--glow); animation:pulse 1.9s infinite; }

/* marquee */
.marquee{ overflow:hidden; width:100%; margin-top:clamp(50px,8vw,110px);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:20px 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.marquee__track{ display:inline-flex; align-items:center; gap:30px; white-space:nowrap;
  font-family:"Chakra Petch",sans-serif; font-weight:600; font-size:clamp(22px,3vw,42px);
  letter-spacing:.04em; color:var(--ink-faint); text-transform:uppercase; animation:marq 28s linear infinite; }
.marquee__track i{ color:var(--red); font-style:normal; font-size:.6em; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* stats */
.sec--work .sec__head{ margin-bottom:clamp(26px,3.5vw,46px); }   /* URL + stats read as one header group */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:clamp(50px,7vw,92px); }
.stat{ border-left:1px solid var(--line); padding-left:18px; }
.stat__n{ display:block; font-family:"Chakra Petch",sans-serif; font-weight:600;
  font-size:clamp(34px,5.5vw,74px); line-height:1; color:var(--ink); }
.stat span{ font-size:10.5px; letter-spacing:.18em; color:var(--ink-dim); text-transform:uppercase; }
@media (max-width:620px){ .stats{ grid-template-columns:1fr; gap:26px; } }

/* selected work */
.works{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,40px); }
@media (max-width:820px){ .works{ grid-template-columns:1fr; } }
.work{ perspective:900px; }
.work__media{ aspect-ratio:16/10; border-radius:16px; position:relative; overflow:hidden;
  border:1px solid var(--line); transform-style:preserve-3d; transition:border-color .3s, box-shadow .35s, transform .15s var(--ease);
  background:
    radial-gradient(120% 150% at 18% 8%, rgba(255,58,78,.42), transparent 52%),
    radial-gradient(110% 130% at 92% 96%, rgba(70,224,224,.20), transparent 55%),
    linear-gradient(155deg,#15171d,#0a0c10); }
.work__media--fit{ background:#0a0c10; }                  /* neutral dark behind a contained (whole) shot */
.work__shot{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover;
  user-select:none; -webkit-user-select:none; -webkit-user-drag:none; }
.work__media--fit .work__shot{ object-fit:contain; }      /* show the whole screenshot, scaled to fit */
.work__media::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(5,6,9,.34), transparent 24%); }
.work:hover .work__media{ border-color:rgba(255,58,78,.45); box-shadow:0 30px 70px -34px rgba(255,58,78,.6); }
.work__stars{ position:absolute; right:14px; bottom:13px; z-index:3; display:inline-flex; align-items:center; gap:6px;
  font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.04em; color:var(--ink);
  padding:5px 11px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(8,9,12,.55);
  transform:translateZ(38px); transition:border-color .3s; }
.work__stars em{ color:var(--red); font-style:normal; }
.work__stars b{ font-weight:700; }
.work:hover .work__stars{ border-color:rgba(255,58,78,.4); }
.works__more-wrap{ text-align:center; margin-top:clamp(38px,5vw,66px); }
.works__more{ display:inline-flex; align-items:center; gap:10px; font-family:"Chakra Petch",sans-serif; font-weight:600;
  font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); text-decoration:none;
  cursor:pointer; transition:color .25s, gap .25s; }
.works__more:hover{ color:var(--red); gap:16px; }
.work__body{ padding:20px 4px 0; }
.work__name{ font-family:"Chakra Petch",sans-serif; font-weight:600; font-size:clamp(20px,2.4vw,30px);
  margin:0 0 8px; letter-spacing:.01em; color:var(--ink); }
.work__desc{ margin:0 0 16px; font-size:13.5px; color:var(--ink-dim); max-width:46ch; }
.work__tags{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
.work__tags li{ font-size:10px; letter-spacing:.12em; color:var(--ink-dim); border:1px solid var(--line);
  border-radius:999px; padding:5px 11px; }
.work__tags li:last-child{ color:var(--red); border-color:rgba(255,58,78,.4); }

/* contact */
.sec--contact{ padding-bottom:0; }
.contact__big{ font-family:"Chakra Petch",sans-serif; font-weight:700; margin:0;
  font-size:clamp(38px,7.6vw,112px); line-height:.92; letter-spacing:-.02em; text-transform:uppercase;
  color:var(--ink); cursor:default; max-width:100%; overflow-wrap:break-word; }
.contact__sub{ max-width:46ch; margin:26px 0 36px; font-size:clamp(15px,1.8vw,18px); color:var(--ink-dim); }
.contact__mail{ display:inline-flex; align-items:center; gap:12px; text-decoration:none;
  font-family:"Chakra Petch",sans-serif; font-weight:600; font-size:clamp(22px,3.4vw,44px); color:var(--ink);
  border-bottom:1px solid var(--line); padding-bottom:8px; cursor:pointer; transition:color .25s, border-color .25s; }
.contact__mail:hover{ color:var(--red); border-color:var(--red); }
.socials{ list-style:none; display:flex; flex-wrap:wrap; gap:10px 28px; margin:46px 0 0; padding:0; }
.socials a{ text-decoration:none; color:var(--ink-dim); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  cursor:pointer; transition:color .25s; display:inline-block; }
.socials a:hover{ color:var(--red); }
.foot{ margin-top:clamp(70px,11vw,150px); border-top:1px solid var(--line);
  padding:26px clamp(30px,7vw,96px) 86px;   /* extra bottom space so the fixed HUD bar never overlaps it */
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:10.5px; letter-spacing:.16em; color:var(--ink-faint); text-transform:uppercase; }
@media (max-width:680px){ .foot{ flex-direction:column; gap:11px; padding:30px 24px 70px; text-align:center; } }
.foot .glitch{ color:var(--ink-dim); }
.foot__end{ display:flex; align-items:center; gap:20px; }
.foot a{ color:var(--ink-dim); text-decoration:none; cursor:pointer; transition:color .2s; }
.foot a:hover{ color:var(--red); }
@media (max-width:680px){ .foot__end{ justify-content:center; } }

/* hero tagline (real brand line) */
.hero__tagline{ font-family:"Chakra Petch",sans-serif; font-weight:500; margin:-4px 0 0;
  font-size:clamp(18px,2.6vw,30px); color:var(--ink-dim); letter-spacing:.01em; }
.hero__tagline .hl{ color:var(--red); border:0; }

/* availability status */
.hero__status{ display:flex; align-items:center; gap:10px; margin:4px 0 0;
  font-size:12px; letter-spacing:.05em; color:var(--ink-dim); }
.hero__status .dot{ box-shadow:var(--glow); }
.contact__sub .hl{ color:var(--ink); border:0; }

/* work card links */
.work__links{ display:flex; gap:20px; margin-top:16px; flex-wrap:wrap; }
.work__link{ font-family:"Chakra Petch",sans-serif; font-weight:600; font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none; color:var(--red); cursor:pointer; transition:color .2s, transform .2s var(--ease); }
.work__link--ghost{ color:var(--ink-dim); }
.work__link:hover{ color:var(--ink); transform:translateY(-1px); }

/* ── scroll reveals / armed only once JS runs ──────────────── */
html.js .reveal{ opacity:0; transform:translateY(34px); will-change:transform,opacity; }
html.js .reveal.is-in{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .9s var(--ease); }

/* ── user-selectable effects modes ─────────────────────────── */
html[data-effects="off"] *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.05ms !important; }
html[data-effects="off"]{ scroll-behavior:auto; }
html[data-effects="off"] :is(.fx--grain,.fx--scan,.marquee__track),
html[data-effects="off"] .hero__cue i::after{ animation:none !important; }
html[data-effects="off"].js .reveal{ opacity:1 !important; transform:none !important; }
html[data-effects="off"] body[data-cc="1"],html[data-effects="off"] body[data-cc="1"] *{ cursor:auto !important; }
html[data-effects="off"] .cursor{ display:none !important; }
html[data-effects="off"] :is(#bg,.mbg,.fx){ display:none !important; }
html[data-effects="off"] body{ background:var(--bg); }

@media (prefers-reduced-motion:reduce){
  html:not([data-effects]){ scroll-behavior:auto; }
  html:not([data-effects]) *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.05ms !important; }
  html:not([data-effects]) :is(.fx--grain,.fx--scan,.marquee__track),
  html:not([data-effects]) .hero__cue i::after{ animation:none !important; }
  html:not([data-effects]).js .reveal{ opacity:1 !important; transform:none !important; }
  html:not([data-effects]) body[data-cc="1"],html:not([data-effects]) body[data-cc="1"] *{ cursor:auto !important; }
  html:not([data-effects]) .cursor{ display:none !important; }
}