/* =========================================================
   MAZE OF GAINS — pixel-art base stylesheet
   Palette is pulled straight from the logo:
   stone greys for "MAZE of", magenta/pink for "GAINS",
   dark teal for the drop shadow under both.
   ========================================================= */

:root{
  /* pixel unit — everything snaps to multiples of this */
  --px:  4px;
  --px2: 8px;
  --px3: 12px;

  /* darks */
  --bg:       #0d0b14;
  --bg-2:     #141021;
  --panel:    #1d1731;
  --panel-2:  #261e41;
  --edge:     #07060d;

  /* stone (from "MAZE of") */
  --stone:    #d9d6cf;
  --stone-2:  #9a95a6;
  --stone-3:  #5b5570;

  /* pink (from "GAINS") */
  --pink:     #ff4fa3;
  --pink-lt:  #ff9ccd;
  --pink-dk:  #a02a7e;

  /* accents */
  --teal:     #37cfd0;
  --gold:     #ffc861;

  --maxw: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(120% 90% at 50% -10%, #241c3d 0%, var(--bg-2) 45%, var(--bg) 100%);
  color:var(--stone);
  font-family:'Pixelify Sans','Press Start 2P',ui-monospace,'Courier New',monospace;
  font-size:19px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:none;
}

img{ max-width:100%; display:block; }

/* keep every pixel asset crunchy instead of blurred */
.px-img{
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

::selection{ background:var(--pink); color:#12101c; }


/* ---------------------------------------------------------
   background layers
   --------------------------------------------------------- */

/* faint maze tiling that drifts very slowly */
.bg-maze{
  position:fixed; inset:-40px;
  z-index:0; pointer-events:none;
  opacity:.075;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23ff4fa3' stroke-width='4'%3E%3Cpath d='M0 12h24M24 12v12M24 24h12M36 0v16M12 24v24M12 36h24M36 36v12M0 36h4'/%3E%3C/g%3E%3C/svg%3E");
  background-size:96px 96px;
  animation:maze-drift 60s linear infinite;
}
@keyframes maze-drift{ to{ background-position:96px 96px; } }

.bg-vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(75% 60% at 50% 40%, transparent 30%, rgba(7,6,13,.75) 100%);
}

/* floating pixel dust */
.dust{ position:fixed; inset:0; z-index:1; pointer-events:none; }
.dust i{
  position:absolute;
  left:var(--x); bottom:-20px;
  width:var(--s); height:var(--s);
  background:var(--pink-lt);
  opacity:.5;
  animation:rise var(--d) linear infinite;
  animation-delay:var(--dl);
}
.dust i:nth-child(even){ background:var(--teal); }
@keyframes rise{
  0%  { transform:translateY(0)      translateX(0);     opacity:0; }
  10% { opacity:.55; }
  90% { opacity:.55; }
  100%{ transform:translateY(-105vh) translateX(24px);  opacity:0; }
}

/* CRT scanlines */
.scanlines{
  position:fixed; inset:0; z-index:90; pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.22) 0 2px,
    transparent      2px 4px
  );
  opacity:.5;
  mix-blend-mode:multiply;
}


/* ---------------------------------------------------------
   reusable pixel chrome
   4 offset shadows = hard border with notched corners
   --------------------------------------------------------- */
.pixel-edge{
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--edge),
    0 var(--px)            0 0 var(--edge),
    calc(-1 * var(--px)) 0 0 0 var(--edge),
    var(--px) 0            0 0 var(--edge);
}


/* ---------------------------------------------------------
   header
   --------------------------------------------------------- */
.site-head{
  position:sticky; top:0; z-index:80;
  display:flex; align-items:center; gap:var(--px3);
  flex-wrap:wrap;
  padding:14px clamp(16px,4vw,40px);
  background:rgba(13,11,20,.92);
  border-bottom:var(--px) solid var(--edge);
  backdrop-filter:blur(2px);
}

.head-mark{ flex:0 0 auto; }
.head-mark img{ width:clamp(150px,18vw,220px); }
.head-mark:focus-visible{ outline:var(--px) solid var(--pink); outline-offset:var(--px); }

.site-nav{
  display:flex; gap:var(--px2);
  flex-wrap:wrap;
  margin-left:auto;
}

.nav-link{
  position:relative;
  padding:6px 14px;
  color:var(--stone-2);
  text-decoration:none;
  font-size:18px;
  letter-spacing:.06em;
  text-transform:uppercase;
  border:var(--px) solid transparent;
  transition:color .1s steps(2), background-color .1s steps(2);
}
.nav-link:hover{ color:var(--stone); background:var(--panel); border-color:var(--edge); }
.nav-link.is-current{ color:var(--pink-lt); }
.nav-link.is-current::after{
  content:''; position:absolute; left:14px; right:14px; bottom:0;
  height:var(--px); background:var(--pink);
}
.nav-link.is-soon{ opacity:.55; cursor:not-allowed; }
.nav-link.is-soon:hover::before{
  content:'soon';
  position:absolute; left:50%; top:calc(100% + 10px);
  transform:translateX(-50%);
  padding:2px 8px; font-size:14px; letter-spacing:.1em;
  color:#12101c; background:var(--gold);
  box-shadow:0 var(--px) 0 var(--edge);
}

/* music toggle */
.sound-btn{
  display:flex; align-items:center; gap:10px;
  padding:8px 14px;
  font:inherit; font-size:16px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--stone-2);
  background:var(--panel);
  border:var(--px) solid var(--edge);
  cursor:pointer;
  transition:color .1s steps(2), background-color .1s steps(2);
}
.sound-btn:hover{ color:var(--stone); background:var(--panel-2); }
.sound-btn[aria-pressed="true"]{ color:var(--pink-lt); border-color:var(--pink-dk); }

.eq{ display:flex; align-items:flex-end; gap:3px; height:16px; }
.eq i{ width:var(--px); height:4px; background:currentColor; }
.sound-btn[aria-pressed="true"] .eq i{ animation:eq .7s steps(3) infinite; }
.eq i:nth-child(2){ animation-delay:.15s; }
.eq i:nth-child(3){ animation-delay:.3s; }
.eq i:nth-child(4){ animation-delay:.45s; }
@keyframes eq{ 0%,100%{ height:4px; } 50%{ height:16px; } }


/* ---------------------------------------------------------
   buttons
   --------------------------------------------------------- */
.btn{
  position:relative;
  display:inline-block;
  padding:14px 26px;
  font:inherit; font-size:19px; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none;
  border:var(--px) solid var(--edge);
  cursor:pointer;
  transition:transform .06s steps(1), box-shadow .06s steps(1),
             background-color .1s steps(2);
}
.btn:active{ transform:translateY(var(--px)); }

.btn-pink{
  color:#1a0c15;
  background:var(--pink);
  box-shadow:0 var(--px) 0 var(--pink-dk), 0 var(--px2) 0 var(--edge);
}
.btn-pink:hover{ background:var(--pink-lt); }
.btn-pink:active{ box-shadow:0 0 0 var(--pink-dk), 0 var(--px) 0 var(--edge); }

.btn-ghost{
  color:var(--stone);
  background:var(--panel);
  box-shadow:0 var(--px) 0 #120e20, 0 var(--px2) 0 var(--edge);
}
.btn-ghost:hover{ background:var(--panel-2); color:#fff; }
.btn-ghost:active{ box-shadow:0 0 0 #120e20, 0 var(--px) 0 var(--edge); }

.btn-small{ padding:8px 16px; font-size:17px; }

.btn.is-soon{ opacity:.6; cursor:not-allowed; }

.btn:focus-visible,
.sound-btn:focus-visible{ outline:var(--px) solid var(--teal); outline-offset:var(--px); }


/* ---------------------------------------------------------
   layout sections
   --------------------------------------------------------- */
main{ position:relative; z-index:10; }

section{
  width:min(var(--maxw),92vw);
  margin-inline:auto;
  scroll-margin-top:120px;   /* clears the sticky header on anchor jumps */
}

.eyebrow{
  margin:0 0 6px;
  font-size:16px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--teal);
}

/* shared highlight for a single loud word */
.hi{
  color:var(--pink-lt);
  text-shadow:0 var(--px) 0 var(--pink-dk);
}

/* ---------------------------------------------------------
   page banner — the masthead of every inner page
   --------------------------------------------------------- */
.page-head{
  position:relative;
  /* clips the banner peeker below the rule when it ducks back down */
  overflow:hidden;
  padding:clamp(26px,6vh,58px) 0 clamp(18px,3.5vh,32px);
  margin-bottom:clamp(18px,3.5vh,36px);
  border-bottom:var(--px) solid rgba(255,255,255,.08);
}
.page-title{
  margin:0 0 8px;
  font-size:clamp(32px,6vw,58px);
  font-weight:700; line-height:1.05;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--stone);
  text-shadow:0 var(--px) 0 var(--edge);
}
.page-title::before{ content:'▚ '; color:var(--pink); }
.page-lead{
  margin:0;
  max-width:62ch;
  color:var(--stone-2);
  font-size:clamp(18px,2.1vw,21px);
}

.section-title{
  margin:0 0 var(--px3);
  font-size:clamp(28px,4vw,42px);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--stone);
  text-shadow:0 var(--px) 0 var(--edge);
}
.section-title::before{ content:'▚ '; color:var(--pink); }


/* ---------------------------------------------------------
   hero
   --------------------------------------------------------- */
.hero{
  display:flex; flex-direction:column; align-items:center;
  gap:var(--px3);
  padding:clamp(40px,8vh,90px) 0 clamp(30px,6vh,60px);
  text-align:center;
}

/* holds the plate plus the mobs hiding behind it */
.hero-stage{ position:relative; width:100%; }

.hero-plate{
  position:relative;
  z-index:1;
  width:100%;
  padding:clamp(24px,5vw,54px) clamp(20px,5vw,60px);
  /* fully opaque on purpose — this is what hides the peeking mobs */
  background:linear-gradient(180deg, #261e41 0%, #141021 100%);
  border:var(--px) solid var(--edge);
  box-shadow:
    inset 0 var(--px) 0 rgba(255,255,255,.07),
    0 var(--px2) 0 rgba(7,6,13,.9);
}

.hero-logo{
  width:min(760px,100%);
  margin:0 auto var(--px3);
  filter:drop-shadow(0 var(--px) 0 rgba(7,6,13,.55));
  animation:float 5s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

.hero-tag{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0 .5em;
  margin:0 0 var(--px3);
  font-size:clamp(21px,3.2vw,33px);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--stone);
  text-shadow:0 var(--px) 0 var(--edge);
}
.hero-tag .hi{ text-shadow:0 var(--px) 0 var(--pink-dk); }

.hero-cta{
  display:flex; gap:var(--px3); justify-content:center; flex-wrap:wrap;
  margin-bottom:var(--px3);
}

.hero-note{
  margin:0;
  font-size:16px;
  letter-spacing:.08em;
  color:var(--stone-3);
}

.scroll-hint{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  color:var(--stone-3);
  text-decoration:none;
  font-size:15px; letter-spacing:.24em; text-transform:uppercase;
}
.scroll-hint:hover{ color:var(--pink); }
.scroll-hint .arrow{ animation:bob 1.4s steps(2) infinite; font-size:18px; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }


/* ---------------------------------------------------------
   peeking mobs
   A sprite sits behind an opaque panel and slides out past its
   edge, then ducks back. The panel's own background is what
   hides it, so nothing needs clipping.
   --------------------------------------------------------- */
.peekers{
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
}

.peeker{
  position:absolute;
  width:var(--w,64px);
  animation-duration:var(--dur,13s);
  animation-delay:var(--delay,0s);
  animation-iteration-count:infinite;
  animation-timing-function:steps(5);
  filter:drop-shadow(0 var(--px) 0 rgba(7,6,13,.55));
}
.peeker img{ width:100%; height:auto; }

/* --- from behind the top edge --- */
.peek-top{
  top:0; left:var(--x,20%);
  transform:translateY(0) scaleX(var(--flip,1));
  animation-name:peek-up;
}
@keyframes peek-up{
  0%,   9%  { transform:translateY(0)     scaleX(var(--flip,1)); }
  15%, 32%  { transform:translateY(-55%)  scaleX(var(--flip,1)); }
  38%, 100% { transform:translateY(0)     scaleX(var(--flip,1)); }
}

/* --- from behind the bottom edge --- */
.peek-bottom{
  bottom:0; left:var(--x,20%);
  transform:translateY(0) scaleX(var(--flip,1));
  animation-name:peek-down;
}
@keyframes peek-down{
  0%,  11%  { transform:translateY(0)    scaleX(var(--flip,1)); }
  17%, 34%  { transform:translateY(52%)  scaleX(var(--flip,1)); }
  40%, 100% { transform:translateY(0)    scaleX(var(--flip,1)); }
}

/* --- from behind the sides --- */
.peek-left{
  left:0; top:var(--y,40%);
  transform:translateX(0) scaleX(var(--flip,1));
  animation-name:peek-out-left;
}
@keyframes peek-out-left{
  0%,  13%  { transform:translateX(0)    scaleX(var(--flip,1)); }
  19%, 36%  { transform:translateX(-58%) scaleX(var(--flip,1)); }
  42%, 100% { transform:translateX(0)    scaleX(var(--flip,1)); }
}

.peek-right{
  right:0; top:var(--y,40%);
  transform:translateX(0) scaleX(var(--flip,1));
  animation-name:peek-out-right;
}
@keyframes peek-out-right{
  0%,   7%  { transform:translateX(0)   scaleX(var(--flip,1)); }
  13%, 29%  { transform:translateX(58%) scaleX(var(--flip,1)); }
  35%, 100% { transform:translateX(0)   scaleX(var(--flip,1)); }
}

/* one sprite popping up from behind an inner page's banner rule */
.banner-peek{
  position:absolute;
  right:clamp(8px,7vw,90px);
  bottom:0;
  width:clamp(56px,7vw,78px);
  pointer-events:none;
  transform:translateY(100%);
  animation:peek-banner 15s steps(5) infinite;
  filter:drop-shadow(0 var(--px) 0 rgba(7,6,13,.55));
}
.banner-peek img{ width:100%; height:auto; display:block; }

/* Side peekers emerge into the page margin. Below this width that
   margin is thinner than the sprite, so they would be sliced off by
   the viewport edge — drop them and keep top/bottom only. */
@media (max-width:1100px){
  .peek-left,
  .peek-right{ display:none; }
}
@keyframes peek-banner{
  0%,  22%  { transform:translateY(100%); }
  28%, 46%  { transform:translateY(6%); }
  52%, 100% { transform:translateY(100%); }
}


/* ---------------------------------------------------------
   bestiary — sprite showcase
   --------------------------------------------------------- */
.bestiary{
  list-style:none;
  margin:0 0 calc(var(--px3) * 2); padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--px3);
}
.mob-slot{ display:flex; }

.mob{
  flex:1;
  display:flex; flex-direction:column;
  margin:0;
  background:linear-gradient(180deg,var(--panel),#161127);
  border:var(--px) solid var(--edge);
  box-shadow:
    inset 0 var(--px) 0 rgba(255,255,255,.06),
    0 var(--px2) 0 rgba(7,6,13,.9);
  transition:transform .08s steps(1), box-shadow .08s steps(1);
}
.mob:hover{
  transform:translateY(calc(-1 * var(--px)));
  box-shadow:
    inset 0 var(--px) 0 rgba(255,255,255,.12),
    0 var(--px3) 0 rgba(7,6,13,.9);
}

.mob-art{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:1;
  padding:14px;
  background:
    radial-gradient(60% 55% at 50% 60%, rgba(255,79,163,.12) 0%, transparent 70%),
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.025) 0 6px,
      transparent            6px 12px),
    #120e20;
  border-bottom:var(--px) solid var(--edge);
}
.mob-art img{
  max-width:82%; max-height:82%;
  width:auto; height:auto;
  /* each tile bobs on its own beat so the row never marches in step */
  animation:mob-idle 2.6s steps(2) infinite;
  animation-delay:calc(var(--i,0) * -0.42s);
}
@keyframes mob-idle{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-5px); }
}
.mob:hover .mob-art img{ animation-duration:1.1s; }

.mob figcaption{
  display:flex; flex-direction:column; gap:2px;
  padding:12px 14px 14px;
  text-align:center;
}
.mob-name{
  font-size:18px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--stone);
}
.mob-kind{
  font-size:14px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--stone-3);
}
.mob-kind.is-loot{ color:var(--gold); }
.mob-kind.is-pass{ color:var(--teal); }


/* ---------------------------------------------------------
   inline pass badges (events page)
   --------------------------------------------------------- */
.pass-row{
  display:flex; flex-wrap:wrap; gap:var(--px3);
  margin:12px 0 0 !important;
}
.pass-chip{
  display:flex; align-items:center; gap:10px;
  padding:6px 14px 6px 8px;
  background:var(--panel-2);
  border:var(--px) solid var(--edge);
  box-shadow:0 var(--px) 0 rgba(7,6,13,.8);
}
.pass-chip img{ width:38px; height:auto; }
.pass-chip b{
  display:block;
  font-size:17px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--stone);
}
.pass-chip span{
  display:block;
  font-size:15px; letter-spacing:.1em;
  color:var(--gold);
}


/* ---------------------------------------------------------
   guide greeting
   --------------------------------------------------------- */
.guide{ padding:clamp(30px,7vh,70px) 0; }

.guide-inner{
  display:flex; align-items:center; gap:clamp(20px,4vw,48px);
  flex-wrap:wrap;
  justify-content:center;
}

/* --- portrait --- */
.portrait{
  flex:0 0 auto;
  margin:0;
  display:flex; flex-direction:column; align-items:center; gap:var(--px2);
}

.portrait-ring{
  position:relative;
  width:clamp(240px,30vw,330px);
  aspect-ratio:1;
  padding:var(--px);
  border-radius:50%;
  background:linear-gradient(180deg,var(--pink-lt),var(--pink-dk));
  box-shadow:
    0 0 0 var(--px) var(--edge),
    0 var(--px2) 0 rgba(7,6,13,.8),
    0 0 44px rgba(255,79,163,.28);
  animation:float 6s ease-in-out infinite;
}
/* the round stage the 3D model stands in */
.stage{
  position:relative;
  width:100%; height:100%;
  border-radius:50%;
  overflow:hidden;
  background:
    radial-gradient(60% 55% at 50% 38%, #3a2d5e 0%, #221a3b 55%, #120e20 100%);
}
.stage canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  /* the model renders into a 156px buffer — this is the pixel-art upscale */
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  opacity:0;
  cursor:grab;
  transition:opacity .35s steps(4);
}
.stage.is-3d canvas{ opacity:1; }
.stage.is-grabbed canvas{ cursor:grabbing; }

/* 2D art stays put if WebGL or the three.js module never arrives */
.stage-fallback{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.stage.is-3d .stage-fallback{ display:none; }

.stage-hint{
  margin:0;
  font-size:14px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--stone-3);
}

/* four pixel studs around the frame */
.portrait-ring::before,
.portrait-ring::after{
  content:''; position:absolute;
  width:var(--px2); height:var(--px2);
  background:var(--teal);
  box-shadow:0 0 0 2px var(--edge);
}
.portrait-ring::before{ top:6%;   left:6%; }
.portrait-ring::after { bottom:6%; right:6%; }

.portrait figcaption{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  text-align:center;
}
.tag-id{
  font-size:15px; letter-spacing:.2em; text-transform:uppercase;
  color:#12101c; background:var(--teal);
  padding:2px 10px;
  box-shadow:0 var(--px) 0 var(--edge);
}
.tag-role{
  font-size:17px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--stone-2);
}

/* --- dialogue box --- */
.dialogue{
  flex:1 1 380px;
  min-height:220px;
  position:relative;
  padding:var(--px3) clamp(18px,3vw,30px) 14px;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:var(--px) solid var(--edge);
  box-shadow:
    inset 0 0 0 var(--px) rgba(255,255,255,.06),
    0 var(--px2) 0 rgba(7,6,13,.9);
  display:flex; flex-direction:column;
}

/* little pointer aimed at the portrait */
.dialogue::before{
  content:''; position:absolute;
  left:calc(-1 * var(--px3)); top:54px;
  width:0; height:0;
  border-top:var(--px3) solid transparent;
  border-bottom:var(--px3) solid transparent;
  border-right:var(--px3) solid var(--edge);
}

.dialogue-name{
  position:absolute; top:calc(-1 * var(--px3) - 8px); left:var(--px3);
  padding:2px 14px;
  font-size:17px; letter-spacing:.14em; text-transform:uppercase;
  color:#1a0c15; background:var(--pink);
  border:var(--px) solid var(--edge);
}

.dialogue-text{
  flex:1;
  margin:14px 0 10px;
  font-size:clamp(19px,2.2vw,23px);
  line-height:1.65;
  color:var(--stone);
  min-height:5em;
}
.dialogue-text .caret{
  display:inline-block;
  width:.55em; height:1.05em;
  vertical-align:-3px;
  background:var(--pink);
  animation:blink .8s steps(1) infinite;
}
@keyframes blink{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }

.dialogue-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--px3);
  border-top:var(--px) solid rgba(255,255,255,.07);
  padding-top:12px;
}

.dots{ display:flex; gap:var(--px2); }
.dots i{
  width:10px; height:10px;
  background:var(--stone-3);
  box-shadow:0 0 0 2px var(--edge);
}
.dots i.on{ background:var(--pink); }


/* ---------------------------------------------------------
   gateway — the three doors on the home page
   --------------------------------------------------------- */
.gateway{ padding:clamp(20px,4vh,40px) 0 clamp(40px,8vh,80px); }

.teaser-grid{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(265px,1fr));
  gap:var(--px3);
}
.teaser-slot{ display:flex; }

.teaser{
  flex:1;
  display:flex; flex-direction:column;
  padding:var(--px3) clamp(18px,2.4vw,26px) 20px;
  text-decoration:none;
  background:linear-gradient(180deg,var(--panel),#161127);
  border:var(--px) solid var(--edge);
  box-shadow:
    inset 0 var(--px) 0 rgba(255,255,255,.06),
    0 var(--px2) 0 rgba(7,6,13,.9);
  transition:transform .08s steps(1), box-shadow .08s steps(1);
}
.teaser:hover{
  transform:translateY(calc(-1 * var(--px)));
  box-shadow:
    inset 0 var(--px) 0 rgba(255,255,255,.12),
    0 var(--px3) 0 rgba(7,6,13,.9);
}

.teaser-no{
  display:inline-flex; align-items:center; gap:8px;
  align-self:flex-start;
  margin-bottom:10px;
  padding:2px 10px;
  font-size:15px; letter-spacing:.2em; text-transform:uppercase;
  color:#12101c; background:var(--stone-2);
}
.teaser-live .teaser-no{ background:var(--gold); }

.teaser h3{
  margin:0 0 8px;
  font-size:26px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--pink-lt);
  text-shadow:0 2px 0 var(--edge);
}
.teaser p{ flex:1; margin:0 0 var(--px3); color:var(--stone-2); font-size:18px; }

.teaser-go{
  font-size:17px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--teal);
}
.teaser:hover .teaser-go{ color:var(--pink-lt); }


/* ---------------------------------------------------------
   news feed
   --------------------------------------------------------- */
.news{ padding:0 0 clamp(20px,4vh,40px); }

.inline-link{
  color:var(--teal);
  text-decoration:none;
  border-bottom:2px solid currentColor;
}
.inline-link:hover{ color:var(--pink-lt); }

.news-list{ list-style:none; margin:0 0 var(--px3); padding:0; }
.news-slot{ margin-bottom:var(--px3); }

.news-card{
  padding:clamp(18px,3vw,28px);
  background:linear-gradient(180deg,var(--panel),#161127);
  border:var(--px) solid var(--edge);
  box-shadow:
    inset 0 var(--px) 0 rgba(255,255,255,.06),
    0 var(--px2) 0 rgba(7,6,13,.9);
}

/* the newest post gets the spotlight */
.news-card.is-latest{
  background:
    radial-gradient(85% 100% at 10% 0%, rgba(255,79,163,.16) 0%, transparent 60%),
    linear-gradient(180deg,var(--panel-2),var(--panel));
  box-shadow:
    inset 0 var(--px) 0 rgba(255,255,255,.1),
    0 var(--px2) 0 rgba(7,6,13,.9),
    0 0 40px rgba(255,79,163,.12);
}

.news-meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--px2);
  margin-bottom:12px;
}
.news-pin,
.news-new,
.news-tag{
  padding:2px 10px;
  font-size:15px; letter-spacing:.16em; text-transform:uppercase;
  color:#12101c;
  box-shadow:0 2px 0 var(--edge);
}
.news-pin{ background:var(--gold); }
.news-new{ background:var(--pink); }
.news-tag{ background:var(--teal); }

.news-date{
  margin-left:auto;
  font-size:16px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--stone-3);
}

.news-title{
  margin:0 0 10px;
  font-size:clamp(23px,3vw,30px); font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--stone);
  text-shadow:0 2px 0 var(--edge);
}
.news-body{ margin:0 0 12px; color:var(--stone-2); font-size:18px; }

.news-links{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--px3);
  margin-top:var(--px3);
  padding-top:12px;
  border-top:var(--px) solid rgba(255,255,255,.07);
}
.news-src{
  margin-left:auto;
  font-size:17px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--teal);
  text-decoration:none;
}
.news-src:hover{ color:var(--pink-lt); }

.news-empty{
  padding:clamp(20px,3vw,30px);
  text-align:center;
  color:var(--stone-3);
  background:var(--panel);
  border:var(--px) dashed var(--stone-3);
}
.news-empty p{ margin:0; }
.news-empty code{
  color:var(--teal);
  background:#120e20;
  padding:1px 6px;
}

.news-note{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--px3);
  padding:clamp(18px,3vw,26px);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:var(--px) solid var(--edge);
  box-shadow:0 var(--px2) 0 rgba(7,6,13,.9);
}
.news-note p{ flex:1 1 280px; margin:0; color:var(--stone-2); font-size:18px; }
.news-note strong{ display:block; color:var(--stone); }


/* ---------------------------------------------------------
   community content gallery
   --------------------------------------------------------- */
.content{ padding:0 0 clamp(20px,4vh,40px); }

.work-bar{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--px3);
  margin-bottom:var(--px3);
}

.filters{ display:flex; flex-wrap:wrap; gap:var(--px2); }

.filter-btn{
  padding:8px 16px;
  font:inherit; font-size:17px;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--stone-2);
  background:var(--panel);
  border:var(--px) solid var(--edge);
  box-shadow:0 var(--px) 0 rgba(7,6,13,.8);
  cursor:pointer;
  transition:color .1s steps(2), background-color .1s steps(2), transform .06s steps(1);
}
.filter-btn:hover{ color:var(--stone); background:var(--panel-2); }
.filter-btn:active{ transform:translateY(2px); }
.filter-btn.is-on{
  color:#1a0c15;
  background:var(--pink);
  box-shadow:0 var(--px) 0 var(--pink-dk);
}
/* a category nobody has filled yet — still clickable, just quiet */
.filter-btn.is-empty{ opacity:.45; }
.filter-btn:focus-visible{ outline:var(--px) solid var(--teal); outline-offset:var(--px); }

.work-count{
  margin:0 0 0 auto;
  font-size:16px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--stone-3);
}

/* ---- the wall ---- */
.work-grid{
  list-style:none;
  margin:0 0 var(--px3); padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(285px,1fr));
  gap:var(--px3);
}
.work-slot{ display:flex; }
.work-slot[hidden]{ display:none; }

.work{
  flex:1;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--panel),#161127);
  border:var(--px) solid var(--edge);
  box-shadow:
    inset 0 var(--px) 0 rgba(255,255,255,.06),
    0 var(--px2) 0 rgba(7,6,13,.9);
  transition:transform .08s steps(1), box-shadow .08s steps(1);
}
.work:hover{
  transform:translateY(calc(-1 * var(--px)));
  box-shadow:
    inset 0 var(--px) 0 rgba(255,255,255,.12),
    0 var(--px3) 0 rgba(7,6,13,.9);
}

/* ---- thumbnail ---- */
.work-thumb{
  position:relative;
  display:block;
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:#0c0a14;
  border-bottom:var(--px) solid var(--edge);
  text-decoration:none;
}
.work-thumb img{
  width:100%; height:100%;
  object-fit:cover;
}

/* stand-in for works we link to instead of re-hosting */
.work-ph{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:8px;
  width:100%; height:100%;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,79,163,.07) 0 8px,
      transparent          8px 16px),
    linear-gradient(180deg, var(--panel-2), #120e20);
}
.work-ph-glyph{ font-size:38px; line-height:1; }
.work-ph-text{
  font-size:15px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--stone-3);
}
.work:hover .work-ph-text{ color:var(--pink-lt); }

.work-type{
  position:absolute; top:10px; left:10px;
  padding:2px 10px;
  font-size:14px; letter-spacing:.16em; text-transform:uppercase;
  color:#12101c; background:var(--teal);
  box-shadow:0 2px 0 var(--edge);
}

/* ---- text ---- */
.work-body{
  flex:1;
  display:flex; flex-direction:column;
  padding:var(--px3) clamp(16px,2.2vw,22px) 16px;
}
.work-title{
  margin:0 0 4px;
  font-size:21px; font-weight:700;
  letter-spacing:.04em;
  color:var(--stone);
}
.work-by{
  margin:0 0 10px;
  font-size:17px;
  color:var(--stone-3);
}
.work-by a{ color:var(--pink-lt); text-decoration:none; }
.work-by a:hover{ text-decoration:underline; }
.work-desc{ flex:1; margin:0 0 var(--px3); color:var(--stone-2); font-size:17px; }

.work-foot{
  display:flex; align-items:center; gap:var(--px3);
  padding-top:10px;
  border-top:var(--px) solid rgba(255,255,255,.07);
}
.work-date{
  font-size:15px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--stone-3);
}
.work-go{
  margin-left:auto;
  font-size:16px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--teal);
  text-decoration:none;
}
.work-go:hover{ color:var(--pink-lt); }

/* ---- credit policy panel ---- */
.credit-note{
  margin-top:calc(var(--px3) * 2);
  padding:clamp(18px,3vw,28px);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:var(--px) solid var(--edge);
  border-left:var(--px3) solid var(--teal);
  box-shadow:0 var(--px2) 0 rgba(7,6,13,.9);
}
.credit-note h3{
  display:flex; align-items:center; gap:10px;
  margin:0 0 10px;
  font-size:22px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--teal);
}
.credit-note p{ margin:0; max-width:72ch; color:var(--stone-2); font-size:18px; }


/* ---------------------------------------------------------
   guides — empty state and the review pipeline
   --------------------------------------------------------- */
.guides{ padding:0 0 clamp(20px,4vh,40px); }

.empty-plate{
  padding:clamp(28px,5vw,52px) clamp(20px,4vw,42px);
  text-align:center;
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(55,207,208,.12) 0%, transparent 65%),
    linear-gradient(180deg,var(--panel-2),var(--panel));
  border:var(--px) dashed var(--stone-3);
  box-shadow:inset 0 var(--px) 0 rgba(255,255,255,.06);
}
.empty-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px;
  margin-bottom:var(--px3);
  font-size:32px; line-height:1;
  background:var(--panel);
  border:var(--px) solid var(--edge);
  box-shadow:0 var(--px) 0 rgba(7,6,13,.8);
}
.empty-plate h2{
  margin:0 0 12px;
  font-size:clamp(24px,3.6vw,34px); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--stone);
  text-shadow:0 var(--px) 0 var(--edge);
}
.empty-plate p{
  max-width:60ch;
  margin:0 auto 12px;
  color:var(--stone-2);
  font-size:19px;
}
.empty-plate strong{ color:var(--pink-lt); }

/* ---- numbered steps ---- */
.step-list{
  list-style:none;
  margin:0 0 calc(var(--px3) * 2); padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--px3);
  counter-reset:step;
}
.step-slot{ display:flex; }
.step{
  flex:1;
  position:relative;
  padding:var(--px3) clamp(16px,2.2vw,24px) 20px;
  background:linear-gradient(180deg,var(--panel),#161127);
  border:var(--px) solid var(--edge);
  box-shadow:
    inset 0 var(--px) 0 rgba(255,255,255,.06),
    0 var(--px2) 0 rgba(7,6,13,.9);
}
.step-no{
  display:inline-block;
  margin-bottom:10px;
  padding:2px 10px;
  font-size:16px; font-weight:700; letter-spacing:.14em;
  color:#1a0c15; background:var(--pink);
  box-shadow:0 2px 0 var(--edge);
}
.step h3{
  margin:0 0 8px;
  font-size:22px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--stone);
}
.step p{ margin:0; color:var(--stone-2); font-size:17px; }


/* ---------------------------------------------------------
   page-to-page navigation
   --------------------------------------------------------- */
.page-nav{
  width:min(var(--maxw),92vw);
  margin:clamp(20px,4vh,40px) auto clamp(40px,8vh,80px);
  display:flex; gap:var(--px3);
}

.page-nav-link{
  flex:1 1 0;
  display:flex; flex-direction:column; gap:2px;
  padding:14px clamp(16px,2.4vw,24px);
  text-decoration:none;
  background:var(--panel);
  border:var(--px) solid var(--edge);
  box-shadow:0 var(--px) 0 rgba(7,6,13,.9);
  transition:background-color .1s steps(2), transform .08s steps(1);
}
.page-nav-link:hover{ background:var(--panel-2); transform:translateY(-2px); }
.pn-next{ text-align:right; }

.pn-dir{
  font-size:15px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--teal);
}
.pn-name{
  font-size:22px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--stone);
}


/* ---------------------------------------------------------
   the game — description block
   --------------------------------------------------------- */
.game{ padding:clamp(30px,6vh,60px) 0 clamp(20px,4vh,40px); }

.game-body{
  max-width:74ch;
  padding-left:clamp(16px,3vw,28px);
  border-left:var(--px) solid var(--pink-dk);
}
.game-body p{
  margin:0 0 var(--px3);
  color:var(--stone-2);
  font-size:clamp(19px,2.1vw,22px);
  line-height:1.75;
}
.game-body p:last-child{ margin-bottom:0; }

/* opening paragraph gets a pixel drop cap and brighter ink */
.lede{ color:var(--stone) !important; }
.lede::first-letter{
  float:left;
  margin:6px 12px 0 0;
  padding:6px 12px;
  font-size:52px; line-height:.85; font-weight:700;
  color:#1a0c15; background:var(--pink);
  box-shadow:0 var(--px) 0 var(--pink-dk), 0 var(--px2) 0 var(--edge);
}

.game-body strong{ color:var(--stone); font-weight:700; }
.game-body em{
  font-style:normal;
  color:var(--teal);
  text-transform:uppercase;
  letter-spacing:.06em;
}


/* ---------------------------------------------------------
   key features
   --------------------------------------------------------- */
.features{ padding:clamp(30px,6vh,60px) 0; }

.feat-grid{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:var(--px3);
}

/* the slot animates in, the card inside handles hover —
   keeps the two transforms from fighting each other */
.feat-slot{ display:flex; }

.feat{
  flex:1;
  padding:var(--px3) clamp(18px,2.4vw,26px) 22px;
  background:linear-gradient(180deg,var(--panel),#161127);
  border:var(--px) solid var(--edge);
  box-shadow:
    inset 0 var(--px) 0 rgba(255,255,255,.06),
    0 var(--px2) 0 rgba(7,6,13,.9);
  transition:transform .08s steps(1), box-shadow .08s steps(1);
}
.feat:hover{
  transform:translateY(calc(-1 * var(--px)));
  box-shadow:
    inset 0 var(--px) 0 rgba(255,255,255,.12),
    0 var(--px3) 0 rgba(7,6,13,.9);
}

.feat-icon{
  display:inline-flex;
  align-items:center; justify-content:center;
  width:52px; height:52px;
  margin-bottom:12px;
  font-size:26px; line-height:1;
  background:var(--panel-2);
  border:var(--px) solid var(--edge);
  box-shadow:0 var(--px) 0 rgba(7,6,13,.8);
}

.feat h3{
  margin:0 0 8px;
  font-size:23px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--pink-lt);
  text-shadow:0 2px 0 var(--edge);
}
.feat p{ margin:0; color:var(--stone-2); font-size:18px; }

/* rotate the accent colour across the grid */
.feat-slot:nth-child(3n+2) .feat h3{ color:var(--teal); }
.feat-slot:nth-child(3n+3) .feat h3{ color:var(--gold); }


/* ---------------------------------------------------------
   events
   --------------------------------------------------------- */
.events{ padding:clamp(30px,6vh,60px) 0; }

/* pulsing "live" marker, used in the nav and on the event card */
.live-dot{
  display:inline-block;
  width:10px; height:10px;
  background:#ff3b3b;
  box-shadow:0 0 0 2px var(--edge), 0 0 10px rgba(255,59,59,.9);
  animation:pulse 1.2s steps(2) infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

.nav-live{ display:inline-flex; align-items:center; gap:8px; }

/* ---- headline event card ---- */
.event{
  padding:clamp(22px,4vw,38px);
  margin-bottom:var(--px3);
  background:
    radial-gradient(85% 100% at 15% 0%, rgba(255,79,163,.18) 0%, transparent 60%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  border:var(--px) solid var(--edge);
  box-shadow:
    inset 0 var(--px) 0 rgba(255,255,255,.09),
    0 var(--px2) 0 rgba(7,6,13,.9),
    0 0 46px rgba(255,79,163,.14);
}

.event-status{
  display:inline-flex; align-items:center; gap:10px;
  margin:0 0 6px;
  padding:3px 12px;
  font-size:15px; letter-spacing:.2em; text-transform:uppercase;
  color:#12101c; background:var(--stone);
  box-shadow:0 var(--px) 0 var(--edge);
}
.event-name{
  margin:0;
  font-size:clamp(32px,5.5vw,56px);
  font-weight:700; line-height:1.05;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--pink-lt);
  text-shadow:0 var(--px) 0 var(--pink-dk), 0 var(--px2) 0 var(--edge);
}
.event-sub{
  margin:6px 0 var(--px3);
  font-size:19px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--stone-2);
}
.event-sub .x{ color:var(--teal); }

.event-top{
  display:grid;
  grid-template-columns:minmax(0,280px) minmax(0,1fr);
  gap:clamp(18px,3vw,34px);
  align-items:start;
}

.event-media{
  border:var(--px) solid var(--edge);
  box-shadow:0 var(--px) 0 rgba(7,6,13,.9);
  background:#0c0a14;
  overflow:hidden;
}
.event-media video{ display:block; width:100%; height:auto; }

.event-intro p{ margin:0 0 var(--px3); color:var(--stone-2); font-size:19px; }
.event-intro strong{ color:var(--stone); }

.event-hook{
  font-size:clamp(21px,2.6vw,27px) !important;
  font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--stone) !important;
  text-shadow:0 2px 0 var(--edge);
}

/* ---- stat tiles ---- */
.stat-row{
  list-style:none;
  display:flex; flex-wrap:wrap; gap:var(--px2);
  margin:0 0 var(--px3); padding:0;
}
.stat-row li{
  flex:1 1 130px;
  padding:10px 14px;
  background:var(--panel);
  border:var(--px) solid var(--edge);
  box-shadow:0 var(--px) 0 rgba(7,6,13,.8);
}
.stat-n{
  display:block;
  font-size:clamp(20px,2.6vw,27px); font-weight:700;
  letter-spacing:.02em;
  color:var(--pink-lt);
}
.stat-l{
  display:block;
  font-size:15px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--stone-3);
}

/* ---- countdown ---- */
.countdown-label,
.countdown-over{
  margin:0 0 6px !important;
  font-size:15px !important; letter-spacing:.2em; text-transform:uppercase;
  color:var(--teal) !important;
}
.countdown-over{ color:var(--stone-3) !important; text-transform:none; letter-spacing:.04em; }

.countdown-clock{ display:flex; flex-wrap:wrap; gap:var(--px2); }
.cd-cell{
  min-width:74px;
  padding:8px 12px;
  text-align:center;
  background:#120e20;
  border:var(--px) solid var(--edge);
  box-shadow:inset 0 0 0 2px rgba(55,207,208,.18);
}
.cd-cell b{
  display:block;
  font-size:26px; font-weight:700;
  color:var(--teal);
  font-variant-numeric:tabular-nums;
}
.cd-cell i{
  display:block;
  font-style:normal;
  font-size:14px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--stone-3);
}

/* ---- brief cards: media beside text, alternating sides ---- */
.brief{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(18px,3vw,32px);
  align-items:center;
  padding:clamp(18px,3vw,28px);
  margin-bottom:var(--px3);
  background:linear-gradient(180deg,var(--panel),#161127);
  border:var(--px) solid var(--edge);
  box-shadow:
    inset 0 var(--px) 0 rgba(255,255,255,.06),
    0 var(--px2) 0 rgba(7,6,13,.9);
}
/* explicit flip, so adding or removing a card never reshuffles the rest */
.brief-flip .brief-media{ order:2; }

.brief-media{
  border:var(--px) solid var(--edge);
  box-shadow:0 var(--px) 0 rgba(7,6,13,.9);
  background:#0c0a14;
  overflow:hidden;
}
.brief-media img,
.brief-media video{ display:block; width:100%; height:auto; }

.brief-text h3{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  margin:0 0 12px;
  font-size:clamp(21px,2.5vw,26px); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--stone);
  text-shadow:0 2px 0 var(--edge);
}
.brief-text p{ margin:0 0 12px; color:var(--stone-2); font-size:18px; }
.brief-text p:last-child{ margin-bottom:0; }
.brief-text strong{ color:var(--stone); }

.brief-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  font-size:21px; line-height:1;
  background:var(--panel-2);
  border:var(--px) solid var(--edge);
}

.spot-tag{
  padding:2px 10px;
  font-size:15px; letter-spacing:.14em;
  color:#1a0c15; background:var(--pink);
  box-shadow:0 2px 0 var(--edge);
}

.dot-list{
  list-style:none;
  margin:0 0 12px; padding:0;
}
.dot-list li{
  position:relative;
  margin-bottom:8px;
  padding-left:22px;
  color:var(--stone-2);
  font-size:18px;
}
.dot-list li::before{
  content:'';
  position:absolute; left:0; top:.62em;
  width:9px; height:9px;
  background:var(--pink);
  box-shadow:0 0 0 2px var(--edge);
}

.note-line{ color:var(--stone-3) !important; font-size:17px !important; }

.warn-line{
  padding:10px 14px;
  color:var(--gold) !important;
  background:rgba(255,200,97,.07);
  border-left:var(--px) solid var(--gold);
  font-size:17px !important;
}

/* the one card that must not be missed */
.brief-warn{
  background:
    radial-gradient(80% 100% at 0% 0%, rgba(255,200,97,.12) 0%, transparent 60%),
    linear-gradient(180deg,var(--panel),#161127);
  border-color:var(--gold);
  box-shadow:
    inset 0 var(--px) 0 rgba(255,200,97,.18),
    0 var(--px2) 0 rgba(7,6,13,.9);
}
.brief-warn .brief-text h3{ color:var(--gold); }
.brief-warn .dot-list li::before{ background:var(--gold); }

/* the Eve item chain reads as a flow, not a sentence */
.chain{
  padding:12px 14px;
  background:#120e20;
  border:var(--px) solid var(--edge);
  font-size:17px !important;
  line-height:1.8;
}
.chain b{ color:var(--teal); padding:0 2px; }

/* ---- sub headings inside the events section ---- */
.sub-title{
  margin:calc(var(--px3) * 2) 0 6px;
  font-size:clamp(23px,3vw,32px); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--stone);
  text-shadow:0 var(--px) 0 var(--edge);
}
.sub-title::before{ content:'▸ '; color:var(--teal); }
.sub-note{ margin:0 0 var(--px3); color:var(--stone-2); font-size:18px; }
.sub-note strong{ color:var(--pink-lt); }

/* ---- event footer ---- */
.event-foot{
  padding:clamp(20px,3vw,30px);
  text-align:center;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:var(--px) solid var(--edge);
  box-shadow:
    inset 0 var(--px) 0 rgba(255,255,255,.08),
    0 var(--px2) 0 rgba(7,6,13,.9);
}
.event-foot > p{ margin:0 0 var(--px3); color:var(--stone-2); font-size:19px; }
.event-foot strong{ color:var(--stone); }
.event-foot .hero-cta{ margin-bottom:10px; }
.foot-quip{
  margin:0 !important;
  font-size:17px !important;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--pink-lt) !important;
}


/* ---------------------------------------------------------
   closing challenge
   --------------------------------------------------------- */
.challenge{ padding:clamp(30px,6vh,60px) 0 clamp(40px,8vh,80px); }

.challenge-plate{
  padding:clamp(28px,5vw,52px) clamp(20px,4vw,48px);
  text-align:center;
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(255,79,163,.16) 0%, transparent 65%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  border:var(--px) solid var(--edge);
  box-shadow:
    inset 0 var(--px) 0 rgba(255,255,255,.08),
    0 var(--px2) 0 rgba(7,6,13,.9),
    0 0 50px rgba(255,79,163,.12);
}

.challenge-q{
  margin:0 0 14px;
  font-size:clamp(26px,4vw,40px);
  font-weight:700;
  line-height:1.3;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--stone);
  text-shadow:0 var(--px) 0 var(--edge);
}

.challenge-a{
  max-width:52ch;
  margin:0 auto var(--px3);
  color:var(--stone-2);
  font-size:clamp(19px,2.1vw,22px);
}

/* the mobs loitering on the 404 page */
.err-mobs{
  display:flex; justify-content:center; align-items:flex-end;
  gap:clamp(16px,4vw,38px);
  margin:var(--px3) 0 calc(var(--px3) * 2);
}
.err-mobs img{
  width:clamp(52px,8vw,74px);
  height:auto;
  filter:drop-shadow(0 var(--px) 0 rgba(7,6,13,.55));
  animation:mob-idle 2.6s steps(2) infinite;
}
.err-mobs img:nth-child(2){ animation-delay:-.5s; }
.err-mobs img:nth-child(3){ animation-delay:-1.1s; }


/* ---------------------------------------------------------
   footer
   --------------------------------------------------------- */
.site-foot{
  position:relative; z-index:10;
  margin-top:var(--px3);
  padding:36px 20px 44px;
  text-align:center;
  border-top:var(--px) solid var(--edge);
  background:rgba(13,11,20,.75);
}
.foot-logo{ width:180px; margin:0 auto 14px; opacity:.45; }
.foot-small{ margin:0; color:var(--stone-3); font-size:15px; letter-spacing:.06em; }

.foot-nav{
  display:flex; flex-wrap:wrap; gap:6px var(--px3);
  justify-content:center;
  margin-bottom:12px;
}
.foot-nav a{
  color:var(--stone-2);
  text-decoration:none;
  font-size:17px; letter-spacing:.1em; text-transform:uppercase;
}
.foot-nav a:hover{ color:var(--pink-lt); }


/* ---------------------------------------------------------
   scroll reveal
   --------------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(var(--px3));
  transition:opacity .35s steps(5), transform .35s steps(5);
  transition-delay:calc(var(--i, 0) * 70ms);   /* stagger for grids */
}
.reveal.is-in{ opacity:1; transform:none; }


/* ---------------------------------------------------------
   responsive
   --------------------------------------------------------- */
@media (max-width:860px){
  /* the wrapped nav is too tall to keep pinned — let it scroll away */
  .site-head{ position:static; justify-content:center; padding-block:10px; }
  .site-nav{ margin-left:0; order:3; width:100%; justify-content:center; gap:2px; }
  .nav-link{ padding:5px 10px; font-size:17px; }
  .sound-btn{ margin-left:auto; }
  /* header no longer overlaps content here, so anchors need no clearance */
  section{ scroll-margin-top:24px; }

  /* event cards stack: media on top, text under it */
  .event-top,
  .brief{ grid-template-columns:minmax(0,1fr); }
  .brief-flip .brief-media{ order:0; }
  .page-nav{ flex-direction:column; }
  .pn-next{ text-align:left; }
  /* square clips would otherwise fill the whole column */
  .event-media,
  .brief-media:has(video){ max-width:340px; margin-inline:auto; }
  /* pointer flips to the top edge, offset so it clears the name badge */
  .dialogue::before{
    left:22%; top:calc(-1 * var(--px3));
    transform:translateX(-50%);
    border:none;
    border-left:var(--px3) solid transparent;
    border-right:var(--px3) solid transparent;
    border-bottom:var(--px3) solid var(--edge);
  }
  .dialogue-name{ left:50%; transform:translateX(-50%); }
}

@media (max-width:520px){
  body{ font-size:18px; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .btn{ text-align:center; }
}


/* ---------------------------------------------------------
   reduced motion
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}