/* ============================================================
   OUCH STUDIOS — polish layer
   Loaded AFTER style.css. Refines type, colour, depth, motion
   and rewrites the whole small-screen experience.
   The rain shader and every video are left untouched.
   ============================================================ */

:root{
  /* --- ember: warmer and deeper than the old flat #c0392b --- */
  --ember:        #d8452e;
  --ember-soft:   rgba(216,69,46,.72);
  --ember-faint:  rgba(216,69,46,.24);
  --ember-deep:   #6d1a11;
  --ember-glow:   rgba(255,104,80,.55);
  /* --- a cold counterpoint, borrowed from the SEALED key art --- */
  --cold:         #5b8fd6;
  --cold-faint:   rgba(91,143,214,.22);
  /* --- neutrals: warm bone rather than clinical white --- */
  --bone:         #f4efe8;
  --ash:          rgba(244,239,232,.66);
  --ash-dim:      rgba(244,239,232,.42);
  --ash-faint:    rgba(244,239,232,.16);
  --hair:         rgba(244,239,232,.10);
  --hair-strong:  rgba(244,239,232,.20);
  --ink:          #07040a;

  --ease-out:     cubic-bezier(.16,.84,.34,1);
  --ease-soft:    cubic-bezier(.4,0,.2,1);

  --nav-h:        84px;
  --gutter:       clamp(20px, 5vw, 64px);
}

/* ============================================================
   1. ATMOSPHERE — grain, vignette, scanlines
   Injected by polish.js. Sits around the rain, never over the
   pointer, never intercepting clicks.
   ============================================================ */

.fx-vignette,
.fx-grain,
.fx-scan{
  position:fixed;
  inset:0;
  pointer-events:none;
  contain:layout style paint;
}

/* Frames the rain: darkens the corners, lifts a warm core. */
.fx-vignette{
  z-index:3;
  background:
    radial-gradient(120% 85% at 50% 42%, rgba(0,0,0,0) 34%, rgba(0,0,0,.42) 72%, rgba(3,0,4,.88) 100%),
    linear-gradient(180deg, rgba(4,0,6,.78) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 68%, rgba(3,0,5,.9) 100%);
  animation:fx-breathe 14s var(--ease-soft) infinite;
}
@keyframes fx-breathe{
  0%,100%{ opacity:.94 }
  50%    { opacity:1 }
}

/* Very fine horizontal texture — reads as projector, not as CRT. */
.fx-scan{
  z-index:4;
  opacity:.5;
  background:repeating-linear-gradient(
    0deg,
    rgba(255,255,255,.014) 0 1px,
    rgba(0,0,0,0) 1px 4px
  );
  mix-blend-mode:overlay;
}

/* 35mm grain. Steps rather than glides so it reads as film. */
.fx-grain{
  z-index:9990;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size:300px 300px;
  animation:fx-grain 900ms steps(1,end) infinite;
  will-change:transform;
}
@keyframes fx-grain{
  0%  { transform:translate3d(0,0,0) }
  20% { transform:translate3d(-6%,3%,0) }
  40% { transform:translate3d(4%,-5%,0) }
  60% { transform:translate3d(-3%,-2%,0) }
  80% { transform:translate3d(5%,4%,0) }
  100%{ transform:translate3d(0,0,0) }
}

/* Every page shell must sit above the rain canvas (z-index:0) and
   above the atmosphere layers. The contact page was on z-index:1 and
   the games page dropped to position:static below 900px, which put
   its panels behind the canvas entirely on phones. */
.about-page,
.sealed-page,
.site-footer,
.nda,
body .contact-page{        /* contact ships its own <style> after this file */
  position:relative;
  z-index:5;
}

/* ============================================================
   2. GLOBAL TYPE + RENDERING
   ============================================================ */

body,html{ color:var(--bone) }
body{
  /* deeper, warmer ground under the rain */
  background:radial-gradient(ellipse at 50% 38%, #1c0308 0%, #0a0104 58%, #030002 100%);
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--ember); color:#fff }

/* Keyboard focus was invisible everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:1px solid var(--ember);
  outline-offset:3px;
}

/* Custom scrollbar so the rail doesn't break the mood. */
*{ scrollbar-width:thin; scrollbar-color:rgba(216,69,46,.4) transparent }
::-webkit-scrollbar{ width:9px; height:9px }
::-webkit-scrollbar-track{ background:rgba(0,0,0,.4) }
::-webkit-scrollbar-thumb{ background:rgba(216,69,46,.32); border:2px solid transparent; background-clip:content-box }
::-webkit-scrollbar-thumb:hover{ background:rgba(216,69,46,.6); background-clip:content-box }

/* ============================================================
   3. NAVIGATION
   Slimmer, with a real scrolled state and a hover that wipes
   rather than only stretching the tracking.
   ============================================================ */

/* The original nav absolutely positioned the logo and the CONTACT
   button around a centred list, so they collided on narrow desktops.
   A three-track grid keeps all three apart at every width. */
.site-nav{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  padding:18px var(--gutter);
  transition:padding .4s var(--ease-soft), background .4s var(--ease-soft);
  backdrop-filter:blur(10px) saturate(.85);
  -webkit-backdrop-filter:blur(10px) saturate(.85);
}
.site-nav .logo{
  position:relative;
  left:auto; top:auto;
  transform:none;
  justify-self:start;
}
.nav-links{ grid-column:2; justify-self:center }
.nav-contact{
  position:relative;
  right:auto; top:auto;
  transform:none;
  justify-self:end;
  grid-column:3;
}
.site-nav::before{
  background:linear-gradient(180deg, rgba(3,0,5,.82) 0%, rgba(3,0,5,.34) 55%, rgba(0,0,0,0) 100%);
}
/* Hairline that only lights up once you've left the top. */
.site-nav::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--ember-faint) 18%, var(--ember-soft) 50%, var(--ember-faint) 82%, transparent);
  opacity:0;
  transform:scaleX(.4);
  transition:opacity .5s var(--ease-soft), transform .6s var(--ease-out);
}
body.is-scrolled .site-nav{ padding:12px var(--gutter) }
body.is-scrolled .site-nav::after{ opacity:1; transform:scaleX(1) }

.site-nav .logo{ width:52px; height:52px }
.site-nav .logo::after{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(216,69,46,.22), transparent 68%);
  opacity:0;
  transition:opacity .45s var(--ease-soft);
  pointer-events:none;
}
.site-nav .logo:hover::after{ opacity:1 }

.nav-links{ gap:10px }

.nav-pill{
  overflow:hidden;
  padding:11px 26px;
  font-size:9.5px;
  letter-spacing:.3em;
  color:var(--ash);
  background:rgba(6,2,8,.34);
  border-color:var(--hair);
  transition:color .35s var(--ease-soft), border-color .35s var(--ease-soft), letter-spacing .45s var(--ease-out);
}
/* crimson wipe */
.nav-pill .nav-pill__label{ position:relative; z-index:2 }
.nav-pill::before,
.nav-pill::after{ z-index:3 }
.nav-pill > .nav-pill__wipe{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(105deg, rgba(109,26,17,.9), rgba(216,69,46,.42));
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .5s var(--ease-out);
  pointer-events:none;
}
.nav-pill:hover > .nav-pill__wipe,
.nav-pill.is-active > .nav-pill__wipe{ transform:scaleX(1) }
.nav-pill:hover{
  color:#fff;
  border-color:var(--ember-soft);
  background:rgba(6,2,8,.34);
  letter-spacing:.34em;
}
.nav-pill.is-active{
  color:#fff;
  border-color:var(--ember-soft);
  background:rgba(6,2,8,.34);
}
.nav-pill.is-active::before,
.nav-pill.is-active::after,
.nav-pill:hover::before,
.nav-pill:hover::after{ border-color:var(--ember); width:10px; height:10px }

/* Discord pill — the community link that replaced SEALED in the bar. */
.nav-pill--discord{ gap:9px; padding-left:20px; padding-right:22px }
.nav-pill__icon{
  position:relative;
  z-index:2;
  width:15px;
  height:auto;
  flex:0 0 auto;
  opacity:.72;
  transition:opacity .35s var(--ease-soft);
}
.nav-pill--discord:hover .nav-pill__icon{ opacity:1 }
.nav-pill--discord > .nav-pill__wipe{
  background:linear-gradient(105deg, rgba(49,55,140,.92), rgba(88,101,242,.5));
}
.nav-pill--discord:hover{ border-color:rgba(88,101,242,.85) }
.nav-pill--discord:hover::before,
.nav-pill--discord:hover::after{ border-color:#7b86f5 }

/* Only ever visible inside the open mobile overlay. */
.nav-foot{ display:none }

/* The NDA pill — a corrupted signal rather than a plain glyph. */
.nav-glitch{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.nav-glitch::after{
  content:"";
  position:absolute;
  inset:-9px -12px;
  border:1px solid transparent;
  transition:border-color .35s var(--ease-soft);
  pointer-events:none;
}
.nav-glitch:hover::after{ border-color:var(--ember-faint) }

/* Wipe done with background-size so no extra element is needed
   (the label here is a bare text node). */
.nav-contact{
  overflow:hidden;
  white-space:nowrap;
  border-color:var(--ember-soft);
  background-color:rgba(216,69,46,.16);
  background-image:linear-gradient(105deg, var(--ember-deep) 0%, rgba(216,69,46,.85) 100%);
  background-repeat:no-repeat;
  background-position:left center;
  background-size:0% 100%;
  box-shadow:0 0 18px -6px var(--ember-glow);
  transition:background-size .55s var(--ease-out), border-color .35s var(--ease-soft),
             letter-spacing .45s var(--ease-out), box-shadow .35s var(--ease-soft);
}
.nav-contact:hover{
  color:#fff;
  border-color:var(--ember);
  background-color:rgba(216,69,46,.16);
  background-size:100% 100%;
  letter-spacing:.4em;
  box-shadow:0 0 30px -6px var(--ember-glow);
}

/* ============================================================
   4. BUTTONS
   ============================================================ */

.btn,
.about-discord__btn,
.sealed-discord__btn,
.contact-submit,
.sealed-date-pill{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn::before,
.btn::after{ z-index:2 }
.btn > *{ position:relative; z-index:2 }

.btn{
  padding:15px 34px;
  gap:0;
  border-color:var(--hair-strong);
  color:var(--bone);
  background:rgba(6,2,8,.26);
  transition:color .35s var(--ease-soft), border-color .35s var(--ease-soft), letter-spacing .45s var(--ease-out), box-shadow .45s var(--ease-soft);
}
.btn .btn__fill{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(105deg, var(--ember-deep) 0%, rgba(216,69,46,.55) 100%);
  transform:translateX(-101%);
  transition:transform .58s var(--ease-out);
  pointer-events:none;
}
.btn:hover .btn__fill{ transform:translateX(0) }
.btn:hover{
  color:#fff;
  border-color:var(--ember);
  background:rgba(6,2,8,.26);
  letter-spacing:.36em;
  box-shadow:0 0 34px -8px var(--ember-glow);
}

.about-discord__btn:hover,
.sealed-discord__btn:hover{ box-shadow:0 0 38px -10px rgba(88,101,242,.6) }

/* ============================================================
   5. HOME / HERO
   ============================================================ */

.hero{ min-height:100svh; padding:calc(var(--nav-h) + 24px) var(--gutter) 40px }

.hero-eyebrow{
  font-size:9.5px;
  letter-spacing:.42em;
  color:var(--ash-dim);
  margin-bottom:26px;
}
.hero-eyebrow__bracket{ color:var(--ember); text-shadow:0 0 12px var(--ember-glow) }
.hero-eyebrow__line{ background:linear-gradient(90deg, transparent, var(--ash-faint), transparent) }

/* A soft light bar sitting behind the wordmark, as if the rain
   were lit from just behind the type. */
.hero-title{
  position:relative;
  font-size:clamp(34px, 6.4vw, 92px);
  letter-spacing:.28em;
  padding-left:.28em;
  color:var(--bone);
}
.hero-title::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:145%; height:190%;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, rgba(216,69,46,.16) 0%, rgba(216,69,46,.05) 38%, transparent 70%);
  pointer-events:none;
  z-index:-1;
  animation:fx-breathe 9s var(--ease-soft) infinite;
}
.hero-title__char{
  text-shadow:
    0 0 14px rgba(255,255,255,.42),
    0 0 34px rgba(216,69,46,.30),
    0 0 72px rgba(216,69,46,.14);
}
.hero-title__char--flip{
  text-shadow:0 0 16px rgba(255,255,255,.85), 0 0 42px rgba(255,180,160,.4);
}

.hero-sub{
  margin-top:30px;
  font-size:clamp(9px, .92vw, 11px);
  letter-spacing:.46em;
  color:var(--ash-dim);
}

.hero-buttons{ margin-top:52px }

/* Stats become a measured strip with hairline dividers instead of
   loose text floating at the bottom of the frame. */
.hero-stats{
  bottom:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  font-size:9.5px;
  letter-spacing:.28em;
  color:var(--ash-dim);
}
.hero-stats > span:not(.dot){
  padding:0 26px;
  white-space:nowrap;
}
.hero-stats .dot{
  margin:0;
  width:1px;
  height:11px;
  color:transparent;
  background:var(--hair-strong);
  display:inline-block;
  overflow:hidden;
}
.hero-legal{
  bottom:22px;
  font-size:7.5px;
  letter-spacing:.2em;
  color:rgba(244,239,232,.18);
}

/* ============================================================
   6. SHARED SECTION FURNITURE
   ============================================================ */

.about-section-label,
.sealed-section-tag,
.contact-eyebrow,
.about-eyebrow{
  color:var(--ember);
  text-shadow:0 0 18px rgba(216,69,46,.35);
}

/* Hairline rules get an ember core. */
.about-block,
.sealed-rule,
.rm-rule,
.contact-rule{
  border-color:var(--hair) !important;
}
.about-block{
  position:relative;
  border-bottom:1px solid transparent !important;
  background-image:linear-gradient(90deg, transparent, var(--hair) 12%, var(--ember-faint) 50%, var(--hair) 88%, transparent);
  background-size:100% 1px;
  background-position:0 100%;
  background-repeat:no-repeat;
}
.about-block:last-child{ background-image:none }

/* ============================================================
   7. ABOUT PAGE
   ============================================================ */

.about-page{ padding-top:calc(var(--nav-h) + 40px) }

.about-bigname{
  color:var(--bone);
  text-shadow:0 0 60px rgba(216,69,46,.18);
}
.about-tagline{ color:var(--ash) }

.about-lead{ color:rgba(244,239,232,.86) }

/* Stats read as a datastrip. */
.about-stat-row{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
}
.about-stat{
  padding:26px 0 24px;
  position:relative;
}
.about-stat + .about-stat{ padding-left:28px }
.about-stat + .about-stat::before{
  content:"";
  position:absolute;
  left:0; top:22%; bottom:22%;
  width:1px;
  background:var(--hair);
}
.stat-n{
  color:var(--bone);
  text-shadow:0 0 26px rgba(216,69,46,.22);
}
.stat-l{ color:var(--ash-dim) }

/* Team cards: give them a body instead of leaving them as boxes. */
.about-team{ gap:1px; background:var(--hair) }
.about-member{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(20,4,8,.5) 0%, rgba(6,1,4,.72) 100%);
  border:0;
  padding:30px 26px 32px;
  transition:background .5s var(--ease-soft), transform .5s var(--ease-out);
}
.about-member::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--ember), transparent);
  transform:scaleX(0);
  transition:transform .55s var(--ease-out);
}
.about-member:hover{
  background:linear-gradient(180deg, rgba(44,8,12,.66) 0%, rgba(10,2,6,.8) 100%);
  transform:translateY(-3px);
}
.about-member:hover::after{ transform:scaleX(1) }
.member-idx{ color:var(--ember-soft) }
.member-name{ color:var(--bone) }
.member-role{ color:var(--ash-dim) }
.member-skills li{ color:var(--ash-dim); transition:color .3s var(--ease-soft) }
.about-member:hover .member-skills li{ color:var(--ash) }
.member-pfp img{
  filter:grayscale(.55) contrast(1.06);
  transition:filter .6s var(--ease-soft), transform .6s var(--ease-out);
}
.about-member:hover .member-pfp img{ filter:grayscale(0) contrast(1.1) }

/* Prose: a lit first line, comfortable measure. */
.about-prose{ max-width:64ch }
.about-prose p{ color:rgba(244,239,232,.78) }
.about-prose p:first-of-type{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(19px, 2.1vw, 26px);
  font-style:italic;
  line-height:1.5;
  color:var(--bone);
}
.about-prose strong{ color:var(--bone) }
.about-prose .about-pull{
  margin:34px 0;
  padding:22px 0 22px 26px;
  border-left:1px solid var(--ember-soft);
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(20px, 2.3vw, 28px);
  font-style:italic;
  line-height:1.45;
  color:var(--bone);
}
.about-prose .about-sig{
  margin-top:38px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ash-dim);
}

/* ============================================================
   8. GAMES (works) PAGE
   The stage used to be a 16:9 box with the copy crammed into a
   108px scroller underneath it. It is now a full-bleed key-art
   frame with the copy laid over the bottom of it.
   ============================================================ */

.works__title{ color:var(--bone) }
.works__desc{ color:rgba(244,239,232,.74) }
.works__index{ color:var(--ember) }
.works__sub,
.works__role{ color:var(--ash) }

.works__panel-play,
.works__stage-play-btn,
.works__thumb-play{
  transition:border-color .35s var(--ease-soft), color .35s var(--ease-soft), background .35s var(--ease-soft), box-shadow .35s var(--ease-soft), transform .35s var(--ease-out);
}
.works__panel-play{
  border-color:var(--ember-soft);
  background:rgba(216,69,46,.16);
  padding:11px 22px;
}
.works__panel-play:hover,
.works__stage-play-btn:hover{
  border-color:var(--ember);
  background:rgba(216,69,46,.34);
  box-shadow:0 0 30px -8px var(--ember-glow);
}
.works__code{ border-color:var(--hair-strong) }
.works__code::before{ color:var(--ember) }
.works__meta{ border-top-color:var(--hair) }

/* --- the index rail ------------------------------------------------- */
.works__thumb{
  border:1px solid var(--hair);
  background:rgba(6,1,4,.42);
  box-shadow:none;
  transition:background .35s var(--ease-soft), border-color .35s var(--ease-soft);
}
.works__thumb:hover{ border-color:var(--hair-strong) }
.works__thumb.is-active{ border-color:var(--ember-faint) }
.works__thumb::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:2px;
  background:linear-gradient(180deg, transparent, var(--ember), transparent);
  transform:scaleY(0);
  transition:transform .45s var(--ease-out);
  z-index:3;
}
.works__thumb:hover{ background:rgba(28,5,10,.6) }
.works__thumb.is-active{
  background:linear-gradient(90deg, rgba(58,10,16,.85), rgba(12,2,6,.6));
  box-shadow:none;
}
.works__thumb.is-active::before,
.works__thumb:hover::before{ transform:scaleY(1) }
.works__thumb > img{
  filter:grayscale(.7) brightness(.7) contrast(1.05);
  transition:filter .5s var(--ease-soft), transform .6s var(--ease-out);
}
.works__thumb:hover > img{ filter:grayscale(.2) brightness(.95) }
.works__thumb.is-active > img{ filter:grayscale(0) brightness(1) saturate(1.05) }
.works__thumb-name{ color:var(--ash) ; transition:color .35s var(--ease-soft) }
.works__thumb.is-active .works__thumb-name,
.works__thumb:hover .works__thumb-name{ color:var(--bone) }
.works__thumb-tag{ color:var(--ash-dim) }
.works__thumb-num{ color:var(--ember-soft) }

/* --- desktop: key art fills the column, copy sits on it -------------- */
@media (min-width:901px){
  :root{ --stage-col:calc(100svh - var(--nav-h) - 52px) }
  .works{
    grid-template-columns:clamp(224px, 20vw, 288px) 1fr;
    gap:clamp(22px, 2.6vw, 46px);
    padding:calc(var(--nav-h) + 18px) var(--gutter) 34px;
  }
  .works__list{
    height:var(--stage-col);
    gap:0;
    border-top:1px solid var(--hair);
    padding-right:4px;
  }
  /* vertical rail: hairline rules instead of a box per card */
  .works__thumb{ border:0; border-bottom:1px solid var(--hair) }

  .works__info{
    position:relative;
    height:var(--stage-col);
    gap:0;
    overflow:hidden;
  }
  /* The key art is 16:9 with titles baked in, so it never gets cropped —
     it just grows to fill whichever dimension runs out first. */
  .works__stage{
    position:relative;
    width:min(100%, calc(var(--stage-col) * 16 / 9));
    aspect-ratio:16/9;
    flex:none;
    margin:0 auto;
    box-shadow:0 40px 90px -50px rgba(0,0,0,1);
  }
  /* the corner vignette was tuned for a small box — soften it here */
  .works__stage::after{
    background:
      radial-gradient(ellipse at 62% 42%, transparent 34%, rgba(0,0,0,.55) 100%),
      repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
  }
  /* run number and genre along the top, out of the copy's way */
  .works__stage-meta{ top:18px; bottom:auto; left:22px; z-index:7 }
  .works__progress{ top:18px; bottom:auto; right:22px; z-index:7 }
  /* the panel below already carries the code and the play button */
  .works__stage-action{ display:none !important }

  /* Panels stack in one grid cell, pinned to the bottom of the column.
     They ride up over the lower edge of the art on a scrim, so the
     letterbox space below the frame is never dead. */
  .works__panels{
    position:absolute;
    left:0; right:0; bottom:0;
    top:auto;
    flex:none;
    display:grid;
    min-height:0;
    overflow:visible;
    padding:0 clamp(26px, 3vw, 52px) clamp(18px, 2.2vw, 30px);
    z-index:6;
  }
  .works__panels::before{
    content:"";
    position:absolute;
    left:-20px; right:-20px; bottom:0;
    top:-76px;
    z-index:-1;
    pointer-events:none;
    background:linear-gradient(to top,
      rgba(3,0,5,.98) 0%,
      rgba(3,0,5,.95) 52%,
      rgba(3,0,5,.6) 82%,
      rgba(0,0,0,0) 100%);
  }
  .works__panel{
    position:relative;
    inset:auto;
    grid-area:1 / 1;
    align-self:end;
    gap:9px;
    overflow:visible;
    padding-right:0;
  }
  .works__title{
    font-size:clamp(38px, 4vw, 66px);
    text-shadow:0 0 50px rgba(0,0,0,.85);
  }
  .works__desc{
    max-width:min(620px, 62%);
    font-size:15px;
    line-height:1.5;
  }
  .works__meta{ max-width:min(620px, 62%); padding-top:6px }
  .works__play-wrap{ margin-top:4px }
  /* an inactive panel still occupied the grid cell, so the scrim was
     always sized for the tallest one — collapse them instead */
  .works__panel:not(.is-active){ height:0; overflow:hidden }
  /* SEALED's status line was set at hero scale and blew the box out */
  .works__drop-date{
    font-family:'JetBrains Mono',ui-monospace,monospace;
    font-size:11px;
    letter-spacing:.4em;
    text-transform:uppercase;
    color:#ff7a63;
    margin:0;
  }
  .works__drop-sub{ margin-bottom:0 }
  .works__ouch-profile{ position:relative; z-index:7 }
}

/* ============================================================
   9. SEALED PAGE
   ============================================================ */

.sealed-title{
  color:var(--bone);
  text-shadow:0 0 40px rgba(91,143,214,.22), 0 0 90px rgba(216,69,46,.16);
}
.sealed-hero-tagline{ color:var(--ash); border-left-color:var(--ember-soft) }
.sealed-spec{ transition:border-color .4s var(--ease-soft), background .4s var(--ease-soft) }
.sealed-spec:hover{ border-color:var(--ember-faint); background:rgba(30,6,10,.4) }
.sealed-spec .s-key{ color:var(--ash-dim) }
.sealed-spec .s-val{ color:var(--bone) }
.sealed-bigquote__text{ color:var(--bone) }

/* --- fullscreen trailer hero (tablet and up) ---------------------------
   The trailer used to sit as a panel pinned to the right, which the
   oversized SEALED wordmark ran straight into. The video now IS the
   frame; the copy sits over it on a scrim. */
@media (min-width:721px){
  .sealed-hero{
    min-height:100svh;
    align-items:flex-end;
    padding:calc(var(--nav-h) + 40px) var(--gutter) clamp(64px, 9vh, 104px);
  }
  .sealed-hero__player{
    position:absolute;
    inset:0;
    top:0; right:auto;
    transform:none;
    width:100%;
    height:100%;
    aspect-ratio:auto;
    opacity:1;
    z-index:0;
    box-shadow:none;
  }
  .sealed-hero__player video{ width:100%; height:100%; object-fit:cover }
  /* drop the inset 1px frame — it read as a panel edge */
  .sealed-hero__player::before{ box-shadow:none }
  /* readability scrim: heavy at the bottom-left where the copy sits */
  .sealed-hero__player::after{
    z-index:5;
    background:
      linear-gradient(to top,   rgba(3,0,5,.97) 0%, rgba(3,0,5,.74) 26%, rgba(3,0,5,.16) 60%, rgba(3,0,5,.5) 100%),
      linear-gradient(to right, rgba(3,0,5,.86) 0%, rgba(3,0,5,.3) 44%, rgba(0,0,0,0) 74%);
  }
  .sealed-hero__inner{
    position:relative;
    z-index:4;
    padding-top:0;
    max-width:min(760px, 66vw);
  }
  .sealed-title{
    font-size:clamp(64px, 11.5vw, 168px);
    margin-bottom:26px;
    text-shadow:0 0 60px rgba(0,0,0,.9), 0 0 120px rgba(216,69,46,.2);
  }
  .sealed-eyebrow{ color:var(--ash) }
  .sealed-hero-tagline{ margin-top:14px }
  /* the play affordance shrinks — it is a hint now, not a panel control */
  .sealed-play-icon{ width:66px; height:66px }
  /* park the play control in the right half so it never fights the copy */
  .sealed-video__overlay{ justify-content:flex-end; padding-right:clamp(60px, 15vw, 230px) }
  .sealed-mute-btn{ bottom:22px; right:22px }
  /* the scroll cue used to sit exactly where the copy now lives */
  .sealed-hero__scroll{ display:none }
}

/* ============================================================
   10. CONTACT PAGE
   This page carries an inline <style> block that loads after this
   file, so every rule here is qualified with `body` to win.
   ============================================================ */

body .contact-heading{ color:var(--bone) }
body .contact-input,
body .contact-select,
body .contact-textarea{
  transition:border-color .35s var(--ease-soft), background .35s var(--ease-soft), box-shadow .35s var(--ease-soft);
}
body .contact-input:focus,
body .contact-select:focus,
body .contact-textarea:focus{
  border-color:var(--ember-soft);
  background:rgba(30,6,10,.35);
  box-shadow:0 0 0 1px rgba(216,69,46,.18), 0 0 26px -12px var(--ember-glow);
  outline:none;
}
body .contact-label{ color:var(--ash-dim) }
body .contact-eyebrow{ color:var(--ember) }
body .contact-aside-label{ color:var(--ember-soft) }
body .contact-submit{
  background-color:rgba(216,69,46,.14);
  background-image:linear-gradient(105deg, var(--ember-deep) 0%, rgba(216,69,46,.85) 100%);
  background-repeat:no-repeat;
  background-position:left center;
  background-size:0% 100%;
  border-color:var(--ember-soft);
  transition:background-size .55s var(--ease-out), border-color .35s var(--ease-soft), box-shadow .35s var(--ease-soft);
}
body .contact-submit:hover{
  background-color:rgba(216,69,46,.14);
  background-size:100% 100%;
  border-color:var(--ember);
  transform:none;
  box-shadow:0 0 32px -8px var(--ember-glow);
}
body .contact-aside-link{ transition:color .3s var(--ease-soft) }
body .contact-aside-link:hover{ color:var(--ember) }

/* ============================================================
   11. FOOTER
   ============================================================ */

.site-footer{
  border-top:1px solid var(--hair);
  padding:74px var(--gutter) 46px;
  margin-top:0;
  background:linear-gradient(180deg, rgba(4,0,6,.62) 0%, rgba(2,0,3,.86) 100%);
}
/* Three columns instead of one long stack, and the OAV block loses the
   box it was floating in. */
.site-footer__inner{
  max-width:1080px;
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.8fr);
  grid-template-areas:
    "contact socials company"
    "fine    fine    fine";
  column-gap:48px;
  row-gap:52px;
  align-items:start;
}
.site-footer__contact{ grid-area:contact }
.site-footer__socials{
  grid-area:socials;
  flex-direction:column;
  align-items:stretch;
  gap:9px;
  max-width:280px;
}
.site-footer__oav{
  grid-area:company;
  padding:0;
  border:0;
  background:0 0;
  gap:10px;
}
.site-footer__fine{ grid-area:fine; margin:0 }

.site-footer__contact-label,
.site-footer__oav-label{ color:var(--ember-soft) }
.site-footer__email{ color:var(--bone) }
.site-footer__email:hover{ color:var(--ember) }
.site-footer__social{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  white-space:nowrap;
  border-color:var(--hair);
  color:var(--ash);
  transition:border-color .35s var(--ease-soft), color .35s var(--ease-soft), background .35s var(--ease-soft);
}
.site-footer__social:hover{ border-color:var(--ember-soft); color:#fff; background:rgba(40,6,10,.4) }
.site-footer__fine{ color:rgba(244,239,232,.2) }

/* ============================================================
   12. SCROLL REVEAL (driven by polish.js)
   ============================================================ */

html.js-reveal [data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .9s var(--ease-soft), transform .9s var(--ease-out);
  transition-delay:var(--reveal-delay, 0ms);
}
html.js-reveal [data-reveal].is-revealed{
  opacity:1;
  transform:none;
}

/* ============================================================
   13. TOUCH + SMALL SCREENS
   The old site only shrank the desktop layout. This rebuilds it.
   ============================================================ */

/* --- any device without a real pointer --- */
@media (hover:none){
  body,html{ cursor:auto }
  .cursor-dot,
  .cursor-ring{ display:none !important }
  /* hover-only affordances become always-on */
  .works__thumb-play{ opacity:1 }
  /* both of these force a full-screen composite over the WebGL rain,
     which is the last thing a phone GPU needs */
  .fx-scan{ display:none }
  .fx-grain{ opacity:.032; mix-blend-mode:normal }
}

/* ---------- narrow desktop / tablet: tighten the bar ---------- */
@media (max-width:1080px) and (hover:hover){
  :root{ --gutter:22px }
  .nav-links{ gap:7px }
  .nav-pill{ padding:10px 16px; letter-spacing:.22em }
  .nav-contact{ padding:9px 14px; letter-spacing:.26em }
  .site-nav .logo{ width:44px; height:44px }
}

/* ---------- 980px: the footer's three columns stop fitting ---------- */
@media (max-width:980px){
  .site-footer__inner{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "contact contact"
      "socials company"
      "fine    fine";
    row-gap:44px;
  }
}

/* ---------- 900px: the games page switches to its stacked layout ----------
   Everything below fixes that layout, and it has to live here rather than
   in the touch query so tablets in the 721–900 band get it too. */
@media (max-width:900px){
  :root{ --nav-h:70px }

  /* the sheet drops .works to position:static here, which put the whole
     panel column behind the fixed rain canvas — invisible on every phone */
  .works{
    position:relative;
    z-index:5;
    padding:calc(var(--nav-h) + 14px) var(--gutter) 56px;
    gap:18px;
  }
  /* the rail was capped at 124px, which cropped every card's tag */
  .works__list{
    max-height:none;
    height:auto;
    align-items:stretch;
    padding-bottom:10px;
    gap:8px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  .works__thumb{
    width:auto;
    flex:0 0 142px;
    padding:7px;
    gap:7px;
    scroll-snap-align:center;
  }
  .works__thumb-name{ font-size:12.5px }
  .works__thumb-tag{ font-size:8px }
  /* the panel below already carries the code + play button, and this
     overlay was landing on top of the stage meta line */
  .works__stage-action{ display:none !important }
  .works__panel{ gap:12px }
  .works__desc{ font-size:14px; line-height:1.75 }
  .works__play-wrap{ flex-wrap:wrap; gap:10px }
  .works__panel-play{ flex:1 1 auto; justify-content:center; padding:14px 18px }
}

/* ---------- 860px: the contact page switches to one column ---------- */
@media (max-width:860px){
  /* the sheet pulled the aside above the form with order:-1, which buried
     "Let's talk" and the form itself under ~700px of contact details */
  body .contact-aside{ order:0; padding-top:0 }
  body .contact-layout{ gap:44px }
  body .contact-aside-block{ margin-bottom:30px }
}

/* ---------- 820px: layout starts to change shape ---------- */
@media (max-width:820px){
  .about-stat-row{ grid-template-columns:repeat(3, minmax(0,1fr)) }
  .about-prose{ max-width:none }
}

/* ---------- the touch / phone breakpoint ---------- */
@media (max-width:720px), (hover:none){

  /* --- nav bar --- */
  .site-nav{
    padding:12px 16px !important;
    min-height:64px;
    background:rgba(4,0,7,.72) !important;
    border-bottom:1px solid rgba(216,69,46,.14);
    box-shadow:0 6px 26px rgba(0,0,0,.5);
  }
  body.is-scrolled .site-nav{
    background:rgba(4,0,7,.94) !important;
    box-shadow:0 8px 30px rgba(0,0,0,.72);
  }
  .site-nav .logo{ left:16px; width:40px; height:40px }

  .nav-hamburger{
    right:14px;
    width:46px; height:46px;      /* proper 44px+ tap target */
    padding:14px 12px;
    background:rgba(6,2,8,.5);
    border-color:var(--hair-strong);
  }

  /* --- full-screen menu: opaque, layered, staggered --- */
  body.nav-open{ overflow:hidden; overscroll-behavior:none }
  body.nav-open .site-nav{
    display:flex;                  /* the grid tracks are for the bar only */
    grid-template-columns:none;
    height:100dvh;
    padding:0 !important;
    gap:0;
    background:
      radial-gradient(120% 70% at 50% 30%, rgba(52,8,14,.55) 0%, rgba(0,0,0,0) 62%),
      rgba(4,0,6,.985) !important;
    backdrop-filter:blur(22px) !important;
    -webkit-backdrop-filter:blur(22px) !important;
    border-bottom:0;
  }
  body.nav-open .site-nav::before,
  body.nav-open .site-nav::after{ display:none }
  body.nav-open .site-nav .logo{ top:14px; left:16px }
  body.nav-open .nav-hamburger{ top:14px; right:14px }

  body.nav-open .nav-links{
    gap:14px;
    width:min(320px, 82vw);
    padding:0;
  }
  body.nav-open .nav-links > li{
    width:100%;
    opacity:0;
    transform:translateY(16px);
    animation:navItemIn .5s var(--ease-out) forwards;
  }
  body.nav-open .nav-links > li:nth-child(1){ animation-delay:.06s }
  body.nav-open .nav-links > li:nth-child(2){ animation-delay:.12s }
  body.nav-open .nav-links > li:nth-child(3){ animation-delay:.18s }
  body.nav-open .nav-links > li:nth-child(4){ animation-delay:.24s }
  body.nav-open .nav-contact{
    margin-top:22px;
    width:min(320px, 82vw);
    justify-content:center;
    padding:16px 0 !important;
    font-size:12px !important;
    letter-spacing:.34em !important;
    opacity:0;
    transform:translateY(16px);
    animation:navItemIn .5s var(--ease-out) .3s forwards;
  }
  body.nav-open .nav-links .nav-pill{
    width:100% !important;
    padding:17px 20px !important;
    font-size:12px !important;
    letter-spacing:.32em !important;
  }
  /* the NDA item stays a glyph, but earns the same footprint */
  body.nav-open .nav-glitch-li{ display:block; width:100% }
  body.nav-open .nav-glitch-li .nav-glitch{
    display:flex;
    width:100%;
    margin:0;                    /* the bar carries a 4px left margin */
    padding:13px 0;
    border:1px dashed rgba(244,239,232,.13);
    background:rgba(6,2,8,.34);
    font-size:15px;
    letter-spacing:.4em;
  }
  body.nav-open .nav-glitch-li .nav-glitch::after{ display:none }
  @keyframes navItemIn{ to{ opacity:1; transform:none } }

  /* --- contact strip at the foot of the overlay --- */
  .nav-foot{ display:none }
  body.nav-open .nav-foot{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    position:absolute;
    left:0; right:0;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 30px);
    padding:0 20px;
    pointer-events:auto;
    opacity:0;
    animation:navItemIn .5s var(--ease-out) .38s forwards;
  }
  .nav-foot__mail{
    font-family:'Cormorant Garamond',serif;
    font-size:19px;
    letter-spacing:.02em;
    color:var(--ash);
  }
  .nav-foot__links{
    display:flex;
    align-items:center;
    gap:12px;
    font-family:'JetBrains Mono',ui-monospace,monospace;
    font-size:9px;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--ash-dim);
  }
  .nav-foot__links span{ color:var(--ember-soft) }
  .nav-foot__links a{ padding:6px 2px }

  /* --- hero: fits the viewport, no more crushed edges --- */
  .hero{
    min-height:100svh;
    padding:calc(var(--nav-h) + 26px) 18px calc(env(safe-area-inset-bottom, 0px) + 96px);
    align-items:center;
  }
  .home-inner{ padding:0 }

  .hero-eyebrow{
    font-size:8px;
    letter-spacing:.32em;
    gap:9px;
    margin-bottom:22px;
    white-space:nowrap;
  }
  .hero-eyebrow__line{ width:22px }

  /* "OUCH" / "STUDIOS" on two deliberate lines */
  .hero-title{
    flex-wrap:wrap;
    white-space:normal;
    font-size:clamp(38px, 13.5vw, 62px);
    letter-spacing:.16em;
    padding-left:.16em;
    line-height:1.06;
    row-gap:2px;
  }
  .hero-title__spacer{ flex:0 0 100%; width:auto; height:0 }
  .hero-title::before{ width:170%; height:150% }

  .hero-sub{
    margin-top:22px;
    font-size:8.5px;
    letter-spacing:.3em;
    padding-left:.3em;
    line-height:1.9;
  }

  .hero-buttons{ margin-top:38px }
  .btn{ padding:16px 34px; font-size:11px; letter-spacing:.3em }

  /* stats stack into three clean rows */
  .hero-stats{
    position:static;
    margin-top:44px;
    display:grid;
    grid-template-columns:1fr;
    gap:0;
    font-size:9px;
    letter-spacing:.24em;
  }
  .hero-stats > span:not(.dot){
    padding:11px 0;
    border-top:1px solid var(--hair);
  }
  .hero-stats > span:not(.dot):last-of-type{ border-bottom:1px solid var(--hair) }
  .hero-stats .dot{ display:none }

  .hero-legal{
    position:fixed;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 10px);
    padding:0 18px;
    font-size:7px;
    letter-spacing:.12em;
    line-height:1.7;
    color:rgba(244,239,232,.18);
  }

  /* --- about --- */
  .about-page{ padding-top:calc(var(--nav-h) + 22px) }
  .about-inner{ padding:0 18px }
  .about-hero{ padding-bottom:34px }
  .about-bigname{ font-size:clamp(44px, 15vw, 74px); line-height:.98 }
  .about-block{ padding:44px 0 }

  .about-stat-row{ grid-template-columns:1fr 1fr }
  .about-stat{ padding:20px 0 18px }
  .about-stat:nth-child(3){ grid-column:1 / -1; border-top:1px solid var(--hair) }
  .about-stat + .about-stat{ padding-left:20px }
  .about-stat:nth-child(3){ padding-left:0 }
  .about-stat:nth-child(3)::before{ display:none }

  .about-team{ grid-template-columns:1fr 1fr; gap:1px }
  .about-member{ padding:22px 16px 24px }
  .member-pfp{ width:54px; height:54px }
  .member-name{ font-size:17px }
  .member-skills li{ font-size:8.5px }

  .about-prose p:first-of-type{ font-size:20px }
  .about-prose .about-pull{ padding-left:18px; font-size:19px; margin:26px 0 }

  .about-discord__btn,
  .sealed-discord__btn{ width:100%; justify-content:center; padding:17px 20px }

  /* --- games (layout lives in the 900px block above) --- */
  .works{ padding-left:16px; padding-right:16px }
  .works__title{ font-size:clamp(30px, 9vw, 44px) }

  /* --- sealed --- */
  .sealed-page{ padding-top:calc(var(--nav-h) + 8px) }
  .sealed-title{ font-size:clamp(42px, 15vw, 74px); letter-spacing:.14em }
  .sealed-eyebrow{ font-size:8.5px; letter-spacing:.26em }
  .sealed-specs__grid{ grid-template-columns:1fr 1fr }
  .sealed-bigquote__text{ font-size:clamp(19px, 5.4vw, 26px) }
  .sealed-date-pill{ width:100%; justify-content:center; padding:16px 0 }

  /* --- contact (qualified with `body` to beat the page's own <style>) --- */
  body .contact-page{ padding:calc(var(--nav-h) + 22px) 18px 60px }
  body .contact-layout{ grid-template-columns:1fr; gap:44px }
  body .contact-row{ grid-template-columns:1fr; gap:20px }
  /* 16px minimum stops iOS zooming the page on focus */
  body .contact-input,
  body .contact-select,
  body .contact-textarea{ font-size:16px; padding:15px 14px; letter-spacing:.04em }
  body .contact-submit{ width:100%; justify-content:center; padding:18px 0; margin-top:4px }
  body .contact-heading{ font-size:clamp(40px, 13vw, 64px) }
  body .contact-sub{ margin-bottom:40px }
  body .contact-aside-links{ gap:2px }
  body .contact-aside-link{ padding:11px 0 }

  /* --- footer --- */
  .site-footer{ padding:52px 18px 40px }
  .site-footer__inner{
    grid-template-columns:1fr;
    grid-template-areas:"contact" "socials" "company" "fine";
    row-gap:38px;
  }
  .site-footer__socials{ align-items:stretch; gap:10px }
  .site-footer__social{ display:flex; justify-content:center; padding:15px 0 }
  .site-footer__fine{ font-size:8px; line-height:1.8 }
}

/* ---------- very small phones ---------- */
@media (max-width:400px){
  .hero-title{ font-size:clamp(34px, 12.6vw, 50px); letter-spacing:.13em; padding-left:.13em }
  .hero-eyebrow{ font-size:7.5px; letter-spacing:.26em }
  .about-member{ padding:20px 13px 22px }
  .about-stat-row{ grid-template-columns:1fr }
  .about-stat + .about-stat{ padding-left:0; border-top:1px solid var(--hair) }
  .about-stat + .about-stat::before{ display:none }
}

/* ---------- anything narrower than a small phone ---------- */
@media (max-width:340px){
  .about-team{ grid-template-columns:1fr }
  .sealed-specs__grid{ grid-template-columns:1fr }
}

/* ---------- short landscape phones ---------- */
@media (max-height:520px) and (orientation:landscape){
  .hero{ min-height:auto; padding:calc(var(--nav-h) + 18px) 18px 40px }
  .hero-stats{ margin-top:26px }
  .hero-legal{ position:static; margin-top:22px }
}

/* ============================================================
   14. MOTION + PRINT
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .fx-grain{ animation:none }
  html.js-reveal [data-reveal]{ opacity:1; transform:none }
}

/* ============================================================
   HEADER v2 — bigger mark, lighter frame, Discord to the right
   ============================================================ */
/* HEADER v2 */
.site-nav .logo{ width:60px; height:60px }

/* right-hand action group: Discord rides with Contact, not centred */
.nav-right{
  grid-column:3;
  justify-self:end;
  display:flex;
  align-items:center;
  gap:12px;
  pointer-events:auto;
}
.nav-right .nav-contact{ grid-column:auto; justify-self:auto }

/* lighter frame: pills read as type behind a hairline, not boxes */
.nav-pill{ border-color:rgba(244,239,232,.05) }
.nav-pill::before,.nav-pill::after{ width:4px; height:4px; border-color:rgba(216,69,46,.4) }
.nav-pill:hover::before,.nav-pill:hover::after,
.nav-pill.is-active::before,.nav-pill.is-active::after{ width:8px; height:8px }

/* --- mobile: Discord + Contact live inside the overlay, not the bar --- */
@media (max-width:720px),(hover:none){
  .site-nav .logo{ width:46px; height:46px }
  .nav-right{ display:none }
  body.nav-open .nav-right{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    width:min(320px,82vw);
    margin-top:20px;
    grid-column:auto;
    justify-self:auto;
    opacity:0;
    transform:translateY(16px);
    animation:navItemIn .5s var(--ease-out) .3s forwards;
  }
  body.nav-open .nav-right .nav-pill{
    width:100%!important;
    padding:16px 20px!important;
    font-size:12px!important;
    letter-spacing:.32em!important;
    justify-content:center;
  }
  body.nav-open .nav-right .nav-contact{
    margin-top:0;
    width:100%;
    justify-content:center;
    padding:16px 0!important;
    font-size:12px!important;
    letter-spacing:.34em!important;
  }
}

/* ============================================================
   16. GLITCH SYSTEM + SCROLLABLE HOME  (added pass)
   ============================================================ */

/* --- border weight fix (higher specificity so it wins) --- */
.site-nav .nav-pill{ border-color:rgba(244,239,232,.045) }
.site-nav .nav-pill.is-active,
.site-nav .nav-pill:hover{ border-color:var(--ember-soft) }

/* --- reusable glitch treatment: RGB split on demand --- */
.gl{ position:relative }
.gl::before,.gl::after{
  content:attr(data-text);
  position:absolute; left:0; top:0;
  width:100%; height:100%;
  pointer-events:none;
  opacity:0;
  white-space:inherit;
}
.gl:hover::before,.gl.is-glitch::before{ color:var(--cold); text-shadow:0 0 14px rgba(91,143,214,.4); animation:glA .5s steps(2,end) }
.gl:hover::after ,.gl.is-glitch::after { color:#ff5a4a; text-shadow:0 0 14px rgba(255,90,74,.4); animation:glB .5s steps(2,end) }
.gl:hover::before,.gl:hover::after{ animation-iteration-count:infinite }
.gl.is-glitch::before,.gl.is-glitch::after{ animation-iteration-count:1 }
@keyframes glA{
  0%{opacity:.9;clip-path:inset(0 0 70% 0);transform:translate(-3px,-1px)}
  20%{opacity:.8;clip-path:inset(30% 0 45% 0);transform:translate(3px,1px)}
  40%{opacity:.85;clip-path:inset(55% 0 22% 0);transform:translate(-2px,0)}
  60%{opacity:.7;clip-path:inset(12% 0 66% 0);transform:translate(2px,-1px)}
  80%{opacity:.85;clip-path:inset(44% 0 28% 0);transform:translate(-1px,1px)}
  100%{opacity:0;clip-path:inset(0 0 100% 0);transform:none}
}
@keyframes glB{
  0%{opacity:.9;clip-path:inset(66% 0 0 0);transform:translate(3px,1px)}
  20%{opacity:.8;clip-path:inset(40% 0 32% 0);transform:translate(-3px,-1px)}
  40%{opacity:.85;clip-path:inset(18% 0 58% 0);transform:translate(2px,0)}
  60%{opacity:.7;clip-path:inset(70% 0 8% 0);transform:translate(-2px,1px)}
  80%{opacity:.85;clip-path:inset(26% 0 46% 0);transform:translate(1px,-1px)}
  100%{opacity:0;clip-path:inset(100% 0 0 0);transform:none}
}

/* hero wordmark: brief colour-fringe flicker driven by polish.js */
body.hero-glitch .hero-title__char{ animation:heroFlick .16s steps(2,end) 3 }
@keyframes heroFlick{
  0%{ text-shadow:0 0 14px rgba(255,255,255,.42), 2px 0 rgba(255,90,74,.6), -2px 0 rgba(91,143,214,.55) }
  100%{ text-shadow:0 0 14px rgba(255,255,255,.42), 0 0 34px rgba(216,69,46,.30) }
}

/* interactive hover jitter for card / pill labels */
.hx-card:hover .hx-card__name,
.nav-pill:hover .nav-pill__label{ animation:txtJitter .3s steps(2,end) 1 }
@keyframes txtJitter{
  0%{ transform:translateX(0) } 25%{ transform:translateX(-1.5px) }
  50%{ transform:translateX(1.5px) } 75%{ transform:translateX(-1px) } 100%{ transform:none }
}

/* ------------------------------------------------------------
   SCROLLABLE HOME — unlock the viewport lock, keep the rain fixed
   ------------------------------------------------------------ */
html:has(body.home-body){ height:auto; overflow:visible }
body.home-body{ height:auto; overflow-x:hidden; overflow-y:visible }
body.home-body .hero{ min-height:100svh }

.home-extra{
  position:relative;
  z-index:5;
  background:linear-gradient(180deg, rgba(4,0,7,0) 0%, rgba(4,0,7,.55) 9%, rgba(4,0,7,.62) 100%);
}
.hx{
  position:relative;
  max-width:1120px;
  margin:0 auto;
  padding:clamp(58px,9vh,116px) var(--gutter);
}
.hx + .hx{ border-top:1px solid var(--hair) }

.hx__label{
  display:flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:9.5px; font-weight:300; letter-spacing:.4em; text-transform:uppercase;
  color:var(--ember); text-shadow:0 0 16px rgba(216,69,46,.3);
  margin:0 0 26px;
}
.hx__label span{ color:var(--ember-soft) }

.hx__lead{
  font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:clamp(29px,4.4vw,58px); line-height:1.06; letter-spacing:-.01em;
  color:var(--bone); max-width:20ch;
  text-shadow:0 0 50px rgba(216,69,46,.16);
}
.hx__body{
  margin:26px 0 0;
  font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:clamp(17px,1.7vw,21px); line-height:1.62;
  color:var(--ash); max-width:56ch;
}

.hx-statgrid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
}
.hx--stats .about-stat{ padding:30px 0 28px }

.hx__head{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-bottom:30px }
.hx__head .hx__label{ margin:0 }
.hx__more{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px;
  letter-spacing:.28em; text-transform:uppercase; color:var(--ash);
  white-space:nowrap; transition:color .3s var(--ease-soft);
}
.hx__more:hover{ color:var(--ember) }
.hx-work{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px }
.hx-card{
  position:relative; display:block; overflow:hidden;
  border:1px solid var(--hair); background:rgba(6,1,4,.5);
  transition:border-color .4s var(--ease-soft), transform .5s var(--ease-out);
}
.hx-card:hover{ border-color:var(--ember-faint); transform:translateY(-3px) }
.hx-card__img{ display:block; aspect-ratio:16/9; overflow:hidden }
.hx-card__img img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.65) brightness(.6) contrast(1.05);
  transform:scale(1.04);
  transition:filter .55s var(--ease-soft), transform .7s var(--ease-out);
}
.hx-card:hover .hx-card__img img{ filter:grayscale(0) brightness(.98) saturate(1.05); transform:scale(1.09) }
.hx-card__meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 15px }
.hx-card__name{ font-family:'Cormorant Garamond',serif; font-size:18px; letter-spacing:.05em; text-transform:uppercase; color:var(--ash); transition:color .35s var(--ease-soft) }
.hx-card:hover .hx-card__name{ color:var(--bone) }
.hx-card__tag{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:8px; letter-spacing:.22em; text-transform:uppercase; color:var(--ash-dim) }
.hx-card::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,transparent,var(--ember),transparent); transform:scaleX(0); transition:transform .5s var(--ease-out) }
.hx-card:hover::after{ transform:scaleX(1) }

.hx-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--hair) }
.hx-tenet{ position:relative; background:rgba(6,1,4,.62); padding:32px 28px 36px; transition:background .5s var(--ease-soft) }
.hx-tenet:hover{ background:rgba(24,4,9,.7) }
.hx-tenet__n{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px; letter-spacing:.32em; color:var(--ember-soft) }
.hx-tenet__h{ margin:16px 0 13px; font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(21px,2vw,27px); line-height:1.12; color:var(--bone) }
.hx-tenet p{ font-family:'Cormorant Garamond',serif; font-weight:300; font-size:16px; line-height:1.6; color:var(--ash) }

.hx--cta{ text-align:center; padding-bottom:clamp(70px,11vh,140px) }
.hx--cta .hx__label{ justify-content:center }
.hx--cta .hx__lead{ margin:0 auto; max-width:19ch }
.hx--cta .hx__body{ margin:26px auto 0; max-width:46ch }
.hx__cta-row{ margin-top:40px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap }

html.js-reveal .home-extra [data-reveal]{ transition-duration:1s }

@media (max-width:900px){
  .hx-work{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .hx-grid{ grid-template-columns:1fr }
  .hx-statgrid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .hx--stats .about-stat:nth-child(3),
  .hx--stats .about-stat:nth-child(4){ border-top:1px solid var(--hair) }
}
@media (max-width:560px){
  .hx-work{ grid-template-columns:1fr }
  .hx-statgrid{ grid-template-columns:1fr }
  .hx--stats .about-stat + .about-stat{ padding-left:0; border-top:1px solid var(--hair) }
  .hx--stats .about-stat + .about-stat::before{ display:none }
  .hx__head{ flex-direction:column; align-items:flex-start; gap:12px }
}

/* ============================================================
   17. FEEDBACK PASS 2 — cleaner header, centered home, scroll cue,
       quieter games rail
   ============================================================ */

/* --- header: drop the pill boxes + corner ticks entirely.
       Just type; the crimson wipe carries hover/active. --- */
.site-nav .nav-pill{ border-color:transparent !important }
.site-nav .nav-pill::before,
.site-nav .nav-pill::after{ display:none !important }
.site-nav .nav-pill:hover,
.site-nav .nav-pill.is-active{ border-color:transparent !important }
/* contact keeps a hairline, but a quiet one */
.site-nav .nav-contact{ border-color:rgba(216,69,46,.5) }

/* --- home: center every section so it reads even, not left-weighted --- */
.hero{ position:relative }
.hx{ text-align:center }
.hx__label{ justify-content:center }
.hx__lead{ margin-left:auto; margin-right:auto }
.hx__body{ margin-left:auto; margin-right:auto }
.hx--work .hx__head{ flex-direction:column; align-items:center; gap:14px; margin-bottom:28px }
.hx--stats .about-stat{ text-align:center; padding-left:0 }
.hx--stats .about-stat + .about-stat{ padding-left:0 }
.hx-tenet{ text-align:center }
.hx-tenet__n{ display:block }

/* --- hero scroll cue --- */
.hero-stats{ bottom:104px }
.hero-scroll{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:11px;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:8px;
  letter-spacing:.42em; text-transform:uppercase; color:var(--ash-dim);
  pointer-events:auto; z-index:6; text-decoration:none;
  transition:color .3s var(--ease-soft);
}
.hero-scroll:hover{ color:var(--ember) }
.hero-scroll__line{ position:relative; width:1px; height:38px; background:rgba(244,239,232,.16); overflow:hidden }
.hero-scroll__line::after{
  content:""; position:absolute; left:0; top:0; width:100%; height:45%;
  background:linear-gradient(180deg, transparent, var(--ember));
  animation:scrollDrip 1.9s var(--ease-soft) infinite;
}
@keyframes scrollDrip{
  0%{ transform:translateY(-120%) }
  70%,100%{ transform:translateY(320%) }
}

/* --- games: quiet the rail + stage so the key art leads --- */
.works__thumb-tag{ display:none }             /* the art already carries the mood */
@media (min-width:901px){
  .works__stage-meta{ display:none }          /* genre lives in the panel sub */
  .works__title{ font-size:clamp(30px,2.9vw,50px) }
  .works__panels::before{ top:-58px }
  .works__desc{ max-width:min(560px,58%) }
}

/* --- responsive tidy for the new home bits --- */
@media (max-width:720px),(hover:none){
  .hero-scroll{ display:none }
  .hero-stats{ bottom:auto }
}

/* ============================================================
   18. FEATURED GAME SHOWCASE (home)
   ============================================================ */
.hx--featured .feat{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:clamp(28px,3.4vw,58px);
  align-items:center;
  text-align:left;
  margin-top:6px;
}
.feat__media{ min-width:0 }
.feat__stage{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  border:1px solid var(--hair);
  background:#000;
  box-shadow:0 40px 90px -50px rgba(0,0,0,1);
}
.feat__main{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:contrast(1.05) saturate(1.03);
  transition:opacity .3s var(--ease-soft);
}
.feat__stage::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 70px rgba(0,0,0,.55);
  background:radial-gradient(ellipse at 60% 45%, transparent 42%, rgba(0,0,0,.4) 100%);
}
.feat__badge{
  position:absolute; top:14px; left:14px; z-index:2;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:8.5px; letter-spacing:.28em; text-transform:uppercase; color:#fff;
  background:rgba(216,69,46,.85); padding:5px 10px;
}
.feat__thumbs{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:10px;
}
.feat__thumb{
  position:relative; aspect-ratio:16/9; overflow:hidden; padding:0; cursor:pointer;
  border:1px solid var(--hair); background:#000; opacity:.5;
  transition:opacity .35s var(--ease-soft), border-color .35s var(--ease-soft);
}
.feat__thumb img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.35) brightness(.85) }
.feat__thumb:hover{ opacity:.85 }
.feat__thumb.is-active{ opacity:1; border-color:var(--ember-soft) }
.feat__thumb.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--ember);
}

.feat__info{ min-width:0 }
.feat__eyebrow{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ember-soft); margin:0 0 16px;
}
.feat__title{
  font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:clamp(46px,5.6vw,84px); line-height:.94; letter-spacing:.02em;
  color:var(--bone); text-shadow:0 0 50px rgba(216,69,46,.2);
}
.feat__desc{
  margin:18px 0 0;
  font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:clamp(16px,1.5vw,20px); line-height:1.55; color:var(--ash); max-width:48ch;
}
.feat__specs{
  list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--ash-dim);
}
.feat__specs li{ padding:0 15px; border-left:1px solid var(--hair) }
.feat__specs li:first-child{ padding-left:0; border-left:0 }
.feat__cta{ margin-top:30px; display:flex; align-items:center; gap:18px; flex-wrap:wrap }
.feat__code{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px; letter-spacing:.2em; color:var(--ash);
  border:1px solid var(--hair-strong); padding:10px 15px;
}

@media (max-width:820px){
  .hx--featured .feat{ grid-template-columns:1fr; gap:26px }
  .feat__info{ text-align:center }
  .feat__specs{ justify-content:center }
  .feat__cta{ justify-content:center }
}
@media (max-width:460px){
  .feat__thumbs{ grid-template-columns:repeat(4,1fr); gap:6px }
  .feat__specs li{ padding:0 10px }
}