/* ------------------------------------------------------------------------
   BASE. The reset, the page shell, the layout helpers, and the two global
   switches: no JavaScript, and reduced motion.
   ------------------------------------------------------------------------ */

@font-face{
  font-family:'LanaPixel';
  src:url('/fonts/LanaPixel_NoKorean.ttf') format('truetype');
  /* block, not swap. A pixel headline that renders in Arial first and then
     jumps to LanaPixel is a worse flash than a short blank. The font is
     preloaded in index.html, so the blank is measured in milliseconds. */
  font-display:block;
}

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

html{
  background:var(--void);
  scroll-behavior:smooth;   /* only used when Lenis is not running */
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  color:var(--ink);
  font-family:var(--face-body);
  font-size:var(--f-body);
  line-height:var(--lh-body);
  /* One backdrop for the whole page, fixed to the viewport. It sits BEHIND
     the stage, so issue 3 can drop its canvas into #stage without having to
     unpick a background off any section. */
  background:
    radial-gradient(120% 80% at 50% 0%, var(--depth-far) 0%, var(--void) 62%)
    var(--void) no-repeat fixed;
}

/* Everything here is pixel art, without exception. */
img,video,canvas{
  display:block;
  max-width:100%;
  image-rendering:pixelated;
}

h1,h2,h3,p,figure,ul{margin:0}
ul{padding:0;list-style:none}
[hidden]{display:none !important}

a{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
}

/* --- the stage -----------------------------------------------------------
   Empty on purpose. Issue 3 appends its WebGL canvas here and nothing else
   has to change: the canvas comes out up to K-1 device pixels wider than the
   viewport, so this box is fixed and clips. Every section above it is
   transparent, so the scene will be visible through the whole page.
   ------------------------------------------------------------------------ */
.stage{
  position:fixed;
  inset:0;
  overflow:hidden;
  z-index:0;
  pointer-events:none;
}

.page{position:relative;z-index:1}

/* --- layout -------------------------------------------------------------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* A station is one stop on the camera path. Six of them, numbered in
   data-station, and each one owns at least a screen of scroll so the camera
   has room to move between stops. */
.section{
  display:flex;
  align-items:center;
  min-height:100svh;
  padding:var(--section-y) 0;
}

.section + .section{border-top:2px solid var(--border-quiet)}

/* Lets a block use the wrap's gutters as well as its width, and clip what
   will not fit. The video and the party line-up are fixed whole-number
   widths, so on a narrow phone this is what stops them forcing a scrollbar
   without ever scaling them to a fractional size. */
.bleed{
  margin-left:calc(-1 * var(--gutter));
  margin-right:calc(-1 * var(--gutter));
  overflow:hidden;
  display:flex;
  justify-content:center;
}

.stack > * + *{margin-top:var(--sp-5)}
.measure{max-width:var(--measure)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}

/* --- Lenis ---------------------------------------------------------------
   The stylesheet Lenis needs. Inlined rather than pulled from the CDN,
   because it is nine lines and one less request that can fail.
   ------------------------------------------------------------------------ */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

/* --- reduced motion ------------------------------------------------------
   The .anim class is only ever added when the visitor has not asked for less
   motion, so every entrance and every sprite cycle is gated on it. This rule
   is the belt to that braces: anything animated by CSS elsewhere stops here.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}