@font-face{
    font-family:'Archivo';
    src:url('fonts/archivo.woff2') format('woff2-variations'),
        url('fonts/archivo.woff2') format('woff2');
    font-weight:100 900;
    font-stretch:62% 125%;
    font-display:swap;
  }
  @font-face{
    font-family:'JetBrains Mono';
    src:url('fonts/jetbrainsmono.woff2') format('woff2-variations'),
        url('fonts/jetbrainsmono.woff2') format('woff2');
    font-weight:100 800;
    font-display:swap;
  }

:root{
    --void:#050507;
    --paper:#E9EFEE;
    --ink:#08080A;
    --signal:#EAF6FA;
    --cyan:#4DE2F0;
    --cyan-deep:#0E5B63;
    --fringe:#FF2E5B;
    --ghost:#7A888E;
    --rule:rgba(234,246,250,.13);
    --rule-ink:rgba(8,8,10,.16);

    --display:'Archivo','Helvetica Neue',Arial,sans-serif;
    --mono:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;
    --gutter:clamp(1.25rem,5vw,5rem);
    --measure:1240px;
    --noise:.50;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{
    background:var(--void);color:var(--signal);
    font-family:var(--display);font-size:clamp(1rem,.95rem + .2vw,1.0625rem);
    line-height:1.7;letter-spacing:-.005em;overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }

  /* ── ambient ─────────────────────────────── */
  #field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:var(--noise);transition:opacity .18s linear}
  #scan{position:fixed;inset:0;z-index:60;pointer-events:none;
    background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.22) 3px,rgba(0,0,0,.22) 4px);
    mix-blend-mode:multiply;opacity:.55}
  #vig{position:fixed;inset:0;z-index:1;pointer-events:none;
    background:radial-gradient(ellipse 135% 100% at 50% 42%,rgba(5,5,7,0) 44%,rgba(5,5,7,.42) 80%,rgba(5,5,7,.86) 100%)}
  .page{position:relative;z-index:2}

  /* ── type roles ──────────────────────────── */
  .wrap{max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter)}
  .sec{padding-block:clamp(5.5rem,13vh,10rem)}
  .eyebrow{font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.24em;
    text-transform:uppercase;color:var(--cyan);line-height:1}
  .eyebrow b{color:var(--fringe);font-weight:500}
  h2.title{font-weight:900;font-stretch:114%;font-size:clamp(2.1rem,6vw,4.6rem);
    line-height:.9;letter-spacing:-.04em;text-transform:uppercase;margin-top:1.5rem}
  p+p{margin-top:1.05em}
  .lede{color:var(--ghost);max-width:46ch}

  canvas.line{display:block;width:100%;height:2px;opacity:.9;
    filter:drop-shadow(0 0 7px rgba(77,226,240,.6))}
  .line--full{width:100vw;margin-left:calc(50% - 50vw)}

  /* ── nav ─────────────────────────────────── */
  header{position:fixed;top:0;left:0;right:0;z-index:50;padding-block:1rem;
    border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
  header.is-stuck{background:rgba(5,5,7,.85);backdrop-filter:blur(14px);border-bottom-color:var(--rule)}
  .nav{display:flex;align-items:center;justify-content:space-between;gap:1rem}
  .mark{display:flex;align-items:baseline;gap:.6rem;text-decoration:none;color:var(--signal)}
  .mark b{font-weight:900;font-stretch:112%;font-size:.8125rem;letter-spacing:.01em;text-transform:uppercase}
  .mark i{font-family:var(--mono);font-style:normal;font-size:.5625rem;letter-spacing:.2em;color:var(--fringe)}
  .nav ul{display:flex;gap:clamp(.9rem,2.6vw,2.1rem);list-style:none}
  .nav a.lnk{font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--ghost);text-decoration:none;padding-bottom:.3rem;
    background-image:linear-gradient(var(--cyan),var(--cyan));background-size:0 1px;
    background-repeat:no-repeat;background-position:0 100%;transition:color .2s,background-size .25s}
  .nav a.lnk:hover,.nav a.lnk:focus-visible{color:var(--signal);background-size:100% 1px}

  /* ── hero: wordmark cut out of live static ─ */
  .hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:7rem 3rem}
  .wordmark{font-weight:900;font-stretch:118%;font-size:clamp(3rem,13.2vw,10.5rem);
    line-height:.82;letter-spacing:-.045em;text-transform:uppercase;margin:1.6rem 0 2.2rem}
  .wordmark em{position:relative;display:block;font-style:normal;min-height:.82em}
  .wordmark em::before,.wordmark em::after{
    content:attr(data-text);position:absolute;inset:0;
    pointer-events:none;opacity:0;will-change:clip-path,transform}
  .wordmark em::before{color:var(--fringe);transform:translateX(var(--gx,0));
    clip-path:inset(var(--ga,0) 0 var(--gb,100%) 0)}
  .wordmark em::after{color:var(--cyan);transform:translateX(var(--gy,0));
    clip-path:inset(var(--gc,0) 0 var(--gd,100%) 0)}
  .wordmark em.gl::before,.wordmark em.gl::after{opacity:1;mix-blend-mode:screen}
  .hero-foot{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:flex-end;
    justify-content:space-between;margin-top:2.2rem}
  .hero-sub{max-width:34ch;color:var(--ghost);font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.55}
  .hero-sub strong{color:var(--signal);font-weight:700}
  .cue{font-family:var(--mono);font-size:.625rem;letter-spacing:.28em;text-transform:uppercase;color:var(--cyan-deep)}

  /* ── ticker ──────────────────────────────── */
  .ticker{border-block:1px solid var(--rule);overflow:hidden;padding-block:.85rem;white-space:nowrap}
  .ticker-in{display:inline-block;animation:slide 34s linear infinite}
  .ticker span{font-family:var(--mono);font-size:.6875rem;letter-spacing:.22em;
    text-transform:uppercase;color:var(--ghost);padding-inline:1.4rem}
  .ticker span u{text-decoration:none;color:var(--fringe)}
  @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ── inverted section ────────────────────── */
  .invert{position:relative;background:var(--paper);color:var(--ink);overflow:hidden}
  .invert canvas.bg{position:absolute;inset:0;width:100%;height:100%;filter:invert(1);opacity:.18;pointer-events:none}
  .invert .wrap{position:relative;z-index:1}
  .invert .eyebrow{color:var(--cyan-deep)}
  .invert .eyebrow b{color:var(--fringe)}
  .name-body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    gap:clamp(2rem,5vw,4.5rem);align-items:start;margin-top:clamp(2rem,5vh,3.2rem)}
  .manifesto{font-weight:500;font-size:clamp(1.5rem,3.4vw,2.7rem);line-height:1.24;
    letter-spacing:-.035em;max-width:24ch;text-wrap:balance}
  .manifesto b{font-weight:900;font-stretch:112%}
  .both{padding-top:.5rem}
  .both-note{font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;
    text-transform:uppercase;color:rgba(8,8,10,.5);margin-bottom:1.5rem}
  .pair{display:grid;grid-template-columns:1fr;gap:0}
  .pair p{font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.45;letter-spacing:-.02em;
    padding:1.15rem 0;border-top:1px solid var(--rule-ink)}
  .pair p:last-child{border-bottom:1px solid var(--rule-ink)}

  /* ── work ────────────────────────────────── */
  .bleed{width:100vw;margin-left:calc(50% - 50vw);padding-inline:var(--gutter)}
  .game-title{font-weight:900;font-stretch:120%;font-size:clamp(4rem,17vw,15rem);
    line-height:.78;letter-spacing:-.055em;text-transform:uppercase;
    margin:1.4rem 0 .4rem;white-space:nowrap;
    text-shadow:.055em 0 0 rgba(255,46,91,.85), -.055em 0 0 rgba(77,226,240,.85)}
  .work{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    align-items:start;margin-top:clamp(2.2rem,5vh,3.4rem)}
  .plate{position:relative;aspect-ratio:1280/776;overflow:hidden;border:1px solid var(--rule);
    margin-top:1.8rem;background:#000}
  .plate video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .plate canvas{position:absolute;inset:0;width:100%;height:100%;
    opacity:.15;mix-blend-mode:screen;pointer-events:none}
  .plate::after{content:'';position:absolute;inset:0;pointer-events:none;
    box-shadow:inset 0 0 90px 26px rgba(5,5,7,.75)}
  .plate-cap{position:absolute;left:0;right:0;bottom:0;padding:1rem 1.1rem;z-index:2;
    background:linear-gradient(to top,rgba(5,5,7,.9),rgba(5,5,7,0));
    font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ghost)}
  .cta{display:inline-flex;align-items:center;gap:.8rem;margin-top:2rem;
    padding:.9rem 1.4rem;border:1px solid var(--cyan);
    font-family:var(--mono);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--cyan);text-decoration:none;transition:background .25s,color .25s}
  .cta span{transition:transform .25s}
  .cta:hover,.cta:focus-visible{background:var(--cyan);color:var(--void)}
  .cta:hover span{transform:translateX(4px)}
  dl.spec{margin-top:2rem;font-family:var(--mono);font-size:.75rem;line-height:1.8;border-top:1px solid var(--rule)}
  dl.spec div{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--rule)}
  dl.spec dt{color:var(--cyan-deep);letter-spacing:.14em;text-transform:uppercase}
  dl.spec dd{color:var(--signal)}
  dl.spec dd em{font-style:normal;color:var(--fringe)}

  /* ── studio + contact ────────────────────── */
  .cols{display:grid;gap:clamp(1.8rem,4vw,4rem);grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
    margin-top:2.4rem;align-items:start}
  .cols .body{max-width:52ch}
  .contact{padding-block:clamp(4.5rem,10vh,7rem)}
  .mail{display:inline-block;font-weight:900;font-stretch:108%;
    font-size:clamp(1.45rem,4.8vw,3.2rem);line-height:1;letter-spacing:-.045em;
    color:var(--signal);text-decoration:none;margin-top:1.6rem;
    background-image:linear-gradient(var(--fringe),var(--fringe));background-size:0 2px;
    background-repeat:no-repeat;background-position:0 106%;
    transition:background-size .3s cubic-bezier(.2,.8,.2,1),color .3s}
  .mail:hover,.mail:focus-visible{background-size:100% 2px;color:var(--fringe)}
  .social{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:2.4rem;list-style:none}
  .social a{font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--ghost);text-decoration:none;transition:color .2s}
  .social a:hover,.social a:focus-visible{color:var(--cyan)}
  footer{padding-block:2.5rem 0}
  .foot{display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;align-items:baseline;padding-bottom:3rem}
  .foot p{font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-deep)}
  .foot a{color:inherit;text-decoration:none;transition:color .2s}
  .foot a:hover,.foot a:focus-visible{color:var(--cyan)}

  .rv{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
  .rv.in{opacity:1;transform:none}
  a:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
  ::selection{background:var(--fringe);color:#fff}

  @media (max-width:860px){
    .work,.cols{grid-template-columns:1fr}
    .name-body{grid-template-columns:1fr;gap:clamp(2.2rem,6vh,3.2rem)}
    .both{padding-top:0}
    dl.spec div{grid-template-columns:6.5rem 1fr;gap:.6rem}
  }
  @media (max-width:520px){ .nav ul li:nth-child(-n+2){display:none} }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .rv{opacity:1;transform:none;transition:none}
    .ticker-in{animation:none}
    *{transition-duration:.01ms !important}
  }

/* extracted from inline style attributes for CSP compliance */
.contact-body{margin-top:clamp(2.4rem,6vh,3.6rem)}
.contact-note{margin-top:1.2rem;color:var(--ghost);max-width:40ch}

/* ── document pages (legal, press) ─────────
   These are for READING, not mood. The ambient static + scanlines are
   fine behind 10rem display type on the home page, but at 17px they
   multiply dark bars across the letterforms and wreck legibility — so
   <body class="doc-page"> damps them right down and lifts the text.   */
.doc-page #scan{opacity:.14}
.doc-page #field{opacity:.16 !important}   /* !important: site.js writes --noise inline on scroll */
.doc-page #vig{opacity:.5}

.doc{padding-block:clamp(7rem,14vh,10rem) clamp(4rem,10vh,7rem);max-width:900px}
.doc h1{font-weight:900;font-stretch:114%;font-size:clamp(2rem,5.5vw,3.6rem);
  line-height:.92;letter-spacing:-.04em;text-transform:uppercase;margin-top:1.4rem}
.doc h2{font-weight:900;font-stretch:108%;font-size:clamp(1.05rem,2.2vw,1.35rem);
  line-height:1.2;letter-spacing:-.01em;text-transform:uppercase;
  margin-top:3rem;color:var(--cyan)}
.doc h3{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--doc-label);margin-top:2rem}
/* --ghost (#7A888E) is 5.6:1 — nominally AA, but with the overlays on top it
   reads muddy. --doc-ink lands near 11:1 so it survives them with headroom. */
.doc{--doc-ink:#C6D3D9;--doc-label:#9FB0B7}
.doc p,.doc li{color:var(--doc-ink);max-width:68ch}
.doc p{margin-top:1rem}
.doc ul{margin-top:1rem;padding-left:1.1rem;list-style:none}
.doc li{position:relative;padding-left:1rem;margin-top:.55rem}
.doc li::before{content:'—';position:absolute;left:0;color:var(--cyan-deep)}
.doc strong{color:var(--signal);font-weight:700}
.doc a{color:var(--cyan);text-decoration:none;
  background-image:linear-gradient(var(--cyan),var(--cyan));background-size:100% 1px;
  background-repeat:no-repeat;background-position:0 100%}
.doc a:hover,.doc a:focus-visible{color:var(--signal)}
.doc address{font-style:normal;margin-top:1rem;color:var(--doc-ink);line-height:1.9}
.doc .updated{font-family:var(--mono);font-size:.6875rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--doc-label);margin-top:1.2rem}
/* Documents are for reading, not mood: lift the fact-sheet labels off the
   cyan-deep used elsewhere so they actually pass contrast. */
.doc dl.spec dt{color:var(--doc-label)}
.doc dl.spec{font-size:.8125rem}
.doc li::before{color:var(--cyan)}
.doc .todo{color:var(--fringe);font-family:var(--mono);font-size:.9em}
.doc .backlink{display:inline-block;margin-top:3.5rem;font-family:var(--mono);
  font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;background:none}
.doc dl.spec{margin-top:1.4rem}
.doc dl.spec dd{color:var(--signal)}
.doc .dl-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.4rem}