/* ==========================================================================
   GHETTO — streetwear clothing brand
   Style : Kinetic Brutalism x Exaggerated Minimalism (+ Editorial Grid)
   Type  : Syne (display) / Manrope (body) / Space Mono (labels) / Reem Kufi
   Rules : radius 0 - 2px borders - no shadows - one accent - 100ms colour
   ========================================================================== */

/* ------------------------------------------------------------------- FONTS */
/* Quivana is the real GHETTO logo face, by Vacatype Co. It is not on Google
   Fonts, so it cannot be loaded from a CDN and has to be self-hosted. Drop the
   file into assets/fonts/ and it takes over everywhere automatically. Until it
   is there the browser falls straight through to Grenze Gotisch, which is a
   near match but is NOT the brand font.

   The 400-900 range means the browser uses this one file for every weight we
   ask for instead of faux-bolding it, which would thicken the blackletter and
   ruin the letterforms. */
@font-face{
  font-family:"Quivana";
  src:url("Quivana.otf") format("opentype");
  font-weight:400 900;
  font-style:normal;
  font-display:swap;
}

/* ------------------------------------------------------------------ TOKENS */
:root{
  /* Surface */
  --bg:#09090B;
  --bg-2:#0E0E11;
  --muted:#161619;
  --muted-2:#27272A;
  --fg:#FAFAFA;
  --fg-2:#A1A1AA;
  --fg-3:#71717A;
  --border:#27272A;
  --border-2:#3F3F46;

  /* One accent: red. It carries the brand and the alarm states both, so
     sold-out is shown by strikethrough and dimming, not by a second colour.
     #FF1A1A clears 4.9:1 on the ground, and black on it clears 5.4:1. */
  --red:#FF1A1A;
  --red-2:#A10000;         /* deep, for tape and depth only */
  --red-fg:#09090B;

  /* Hazard tape. Reused wherever the page needs to shout. */
  --hazard:repeating-linear-gradient(
    -45deg,var(--red) 0 18px,var(--red-fg) 18px 36px);
  --hazard-red:repeating-linear-gradient(
    -45deg,var(--red-2) 0 18px,var(--bg) 18px 36px);

  /* Type */
  /* The brand face. Quivana is the real logo font; Grenze Gotisch stands in
     until the Quivana file is dropped into assets/fonts/. Used ONLY for the
     brand name and the headline statement, never for running text or section
     headings, where blackletter stops being readable. */
  --brand:"Quivana","Grenze Gotisch","Times New Roman",serif;
  --display:"Syne","Arial Black",system-ui,sans-serif;
  --body:"Manrope","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,"Courier New",monospace;
  --arabic:"Reem Kufi","Noto Naskh Arabic",serif;

  --t-giant:clamp(2.75rem,11.5vw,10.5rem);
  --t-xxl:clamp(2.6rem,8vw,6.5rem);
  --t-xl:clamp(2rem,5.5vw,4.25rem);
  --t-lg:clamp(1.5rem,3.2vw,2.4rem);
  --t-md:clamp(1.125rem,1.8vw,1.5rem);
  --t-body:clamp(1rem,1.05vw,1.0625rem);
  --t-label:0.75rem;

  /* Tighter than before. Aggressive display type is set nearly touching. */
  --track-tight:-0.065em;
  --track-label:0.18em;

  /* Metrics */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px;
  --s5:64px; --s6:96px; --s7:clamp(96px,13vw,176px);
  --gutter:clamp(20px,4.5vw,72px);
  --maxw:1600px;
  --nav-h:62px;
  --bw:2px;
  --dur:100ms;
  --ease:cubic-bezier(.22,1,.36,1);

  color-scheme:dark;
}

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

html{
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
  scroll-padding-top:calc(var(--nav-h) + 24px);
}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--body);
  font-size:var(--t-body);
  line-height:1.6;
  overflow-x:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
}

/* Film grain across the document. Fixed, so it never scrolls with content. */
.grain{
  position:fixed; inset:-40%;
  pointer-events:none; z-index:900;
  opacity:.05;
  mix-blend-mode:overlay;
}
@media (prefers-reduced-motion:no-preference){
  .grain{animation:grain 5.6s steps(6) infinite}
}
@keyframes grain{
  0%{transform:translate(0,0)}      20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}  60%{transform:translate(-2%,-1%)}
  80%{transform:translate(3%,1%)}   100%{transform:translate(0,0)}
}

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

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:var(--track-tight);
  line-height:.92;
  margin:0;
  text-transform:uppercase;
}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;margin:0;cursor:pointer}
::selection{background:var(--red);color:var(--red-fg)}

/* 2px perimeter, red on black clears 3:1 state contrast (WCAG 2.2). */
:focus-visible{outline:var(--bw) solid var(--red);outline-offset:3px}

.lbl{
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--fg-2);
  line-height:1.5;
  display:inline-block;
}
.lbl--red{color:var(--red)}
.lbl--fg{color:var(--fg)}
/* Arabic reads smaller than Latin at the same point size, so nudge it up. */
.ar{font-family:var(--arabic);letter-spacing:0;direction:rtl;unicode-bidi:isolate;font-size:1.12em}

.lede{
  font-size:var(--t-md);
  line-height:1.5;
  color:var(--fg-2);
  max-width:56ch;
  font-weight:500;
}
.lede strong{color:var(--fg);font-weight:700}

/* Skip link */
.skip{
  position:absolute; left:var(--gutter); top:-100px; z-index:1100;
  background:var(--red); color:var(--red-fg);
  padding:14px 20px;
  font-family:var(--mono); font-size:var(--t-label);
  letter-spacing:var(--track-label); text-transform:uppercase;
  transition:top 200ms var(--ease);
}
.skip:focus{top:12px}

/* ----------------------------------------------------------------- BUTTONS */
.btn{
  --btn-bg:var(--red); --btn-fg:var(--red-fg); --btn-bd:var(--red);
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:52px; padding:0 28px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:var(--bw) solid var(--btn-bd);
  font-family:var(--mono); font-size:var(--t-label);
  letter-spacing:var(--track-label); text-transform:uppercase; font-weight:700;
  border-radius:0;
  transition:background var(--dur) linear,color var(--dur) linear,border-color var(--dur) linear;
}
.btn .arw{transition:transform 260ms var(--ease)}
.btn:hover{--btn-bg:transparent;--btn-fg:var(--red)}
.btn:hover .arw{transform:translateX(6px)}
.btn:active{transform:translateY(1px)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--fg);--btn-bd:var(--border-2)}
.btn--ghost:hover{--btn-bg:var(--fg);--btn-fg:var(--bg);--btn-bd:var(--fg)}
.btn--lg{min-height:66px;padding:0 40px}

/* --------------------------------------------------------------- PRELOADER */
.boot{
  position:fixed; inset:0; z-index:1000;
  background:var(--bg);
  display:grid; place-items:end stretch;
  /* Without an explicit track the column sizes to its content, and the
     tagline then pushes the whole bottom block off a narrow screen. */
  grid-template-columns:minmax(0,1fr);
  padding:var(--gutter);
  overflow:hidden;
}
/* Backdrop layers. Both must stay out of the preloader's grid flow, or they
   become grid items and push the wordmark off the bottom of the screen. */
.boot__vid,.boot__scrim{position:absolute;inset:0;pointer-events:none}
.boot__vid{
  width:100%; height:100%; object-fit:cover;
  opacity:1;
  z-index:0;
}
/* The footage keeps its own colour, so the scrim only darkens the bottom
   strip the wordmark and the counter sit on. Everything above stays clear. */
.boot__scrim{
  z-index:1;
  background:
    radial-gradient(135% 95% at 50% 30%, rgba(9,9,11,0), rgba(9,9,11,.42) 88%),
    linear-gradient(to top, var(--bg) 0%, rgba(9,9,11,.6) 16%, rgba(9,9,11,0) 44%);
}
.boot__inner{
  position:relative; z-index:2; width:100%;
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s3);
}

/* The wordmark holds the centre of the screen while the clip runs behind it.
   The loading bar and the counter stay pinned to the bottom edge, where a
   progress indicator belongs. */
.boot__stage{
  position:absolute; inset:0; z-index:2;
  display:grid; place-items:center;
  padding:var(--gutter);
  pointer-events:none;
}
.boot__word{
  font-family:var(--brand); font-weight:700;
  /* Quivana is condensed enough that the whole word is only about 1.3 times
     the point size wide, so this needs a much larger vw step than it looks. */
  font-size:clamp(5rem,44vw,24rem); letter-spacing:0;
  line-height:1; text-transform:uppercase;
  display:flex; overflow:hidden;
  /* Lifts the letters off whatever the footage is doing behind them. */
  text-shadow:0 0 70px rgba(9,9,11,.85);
}
.boot__word i{font-style:normal;display:block}

@media (prefers-reduced-motion:no-preference){
  /* A slow push in across the length of the clip, so the mark is never
     simply sitting still, plus the same RGB split the hero wordmark uses. */
  .boot__stage{animation:bootpush 7s cubic-bezier(.16,1,.3,1) both}
  .boot__word i{animation:rgbsplit 3.4s steps(1) infinite}
  .boot__word i:nth-child(2){animation-delay:.6s}
  .boot__word i:nth-child(3){animation-delay:1.7s}
  .boot__word i:nth-child(4){animation-delay:.2s}
  .boot__word i:nth-child(5){animation-delay:2.4s}
  .boot__word i:nth-child(6){animation-delay:1.1s}
}
@keyframes bootpush{from{transform:scale(.9)}to{transform:scale(1)}}
.boot__bar{height:var(--bw);background:var(--border);position:relative;overflow:hidden}
.boot__bar i{position:absolute;inset:0;background:var(--red);transform:scaleX(0);transform-origin:0 50%}
/* Wraps rather than running the tagline off the right edge on a phone. */
.boot__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px var(--s2)}
.boot__num{font-family:var(--mono);font-size:var(--t-label);letter-spacing:var(--track-label);color:var(--red)}
.boot__veil{position:fixed;inset:0;z-index:999;background:var(--red);transform:scaleY(0);transform-origin:50% 100%;pointer-events:none}

/* --------------------------------------------------------------------- NAV */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:800;
  height:var(--nav-h);
  display:flex; align-items:center; gap:var(--s3);
  padding-inline:var(--gutter);
  background:rgba(9,9,11,.72);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:var(--bw) solid var(--border);
}
.nav__mark{
  display:flex; align-items:baseline; gap:5px;
  font-family:var(--brand); font-weight:700;
  letter-spacing:.01em; font-size:2.25rem; line-height:1; text-transform:uppercase;
  margin-right:auto;
}
/* Lifted to the cap line, the same trademark treatment as the footer lockup. */
.nav__mark sup{
  font-family:var(--mono); font-size:.55rem; color:var(--red);
  position:relative; top:-1.3em;
}

.nav__links{display:flex;gap:2px}
.nav__links a{
  position:relative;
  font-family:var(--mono); font-size:var(--t-label);
  letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--fg-2);
  padding:12px 14px;
  transition:color var(--dur) linear;
}
.nav__links a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:8px;
  height:var(--bw); background:var(--red);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform 300ms var(--ease);
}
.nav__links a:hover,.nav__links a[aria-current="true"]{color:var(--fg)}
.nav__links a:hover::after,.nav__links a[aria-current="true"]::after{transform:scaleX(1)}

.nav__bag{
  display:inline-flex; align-items:center; gap:10px;
  min-height:44px; padding:0 16px;
  border:var(--bw) solid var(--border-2);
  font-family:var(--mono); font-size:var(--t-label);
  letter-spacing:var(--track-label); text-transform:uppercase;
  transition:background var(--dur) linear,color var(--dur) linear,border-color var(--dur) linear;
}
.nav__bag:hover{background:var(--red);color:var(--red-fg);border-color:var(--red)}
.nav__bag .count{
  display:grid; place-items:center;
  min-width:22px; height:22px; padding:0 5px;
  background:var(--red); color:var(--red-fg);
  font-weight:700; font-size:.6875rem;
}
.nav__bag:hover .count{background:var(--red-fg);color:var(--red)}
.nav__bag.pop{animation:pop 340ms var(--ease)}
@keyframes pop{40%{transform:scale(1.09)}100%{transform:scale(1)}}

.burger{display:none;width:44px;height:44px;place-items:center;border:var(--bw) solid var(--border-2)}
.burger span{display:block;width:18px;height:2px;background:var(--fg);transition:transform 300ms var(--ease),opacity 200ms linear}
.burger span+span{margin-top:4px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.nav__progress{
  position:absolute; left:0; bottom:calc(var(--bw) * -1);
  height:var(--bw); width:100%;
  background:var(--red);
  transform:scaleX(0); transform-origin:0 50%;
}

/* Mobile sheet */
.sheet{
  position:fixed; inset:var(--nav-h) 0 0 0; z-index:790;
  background:var(--bg);
  padding:var(--s4) var(--gutter) var(--gutter);
  display:grid; align-content:start; gap:0;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 520ms var(--ease);
  overflow-y:auto;
  visibility:hidden;
}
.sheet[data-open="true"]{clip-path:inset(0 0 0 0);visibility:visible}
.sheet a{
  display:flex; align-items:baseline; gap:14px;
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(2rem,9vw,3.5rem); letter-spacing:var(--track-tight); line-height:1.1;
  padding:14px 0; border-bottom:var(--bw) solid var(--border);
  transition:color var(--dur) linear,padding-left 260ms var(--ease);
}
.sheet a em{font-family:var(--mono);font-style:normal;font-size:.75rem;color:var(--red);letter-spacing:var(--track-label)}
.sheet a:hover{color:var(--red);padding-left:12px}
.sheet__foot{margin-top:var(--s4);display:grid;gap:10px}

/* -------------------------------------------------------------------- HERO */
.hero{
  position:relative;
  min-height:100svh;
  padding-top:calc(var(--nav-h) + var(--s4));
  padding-bottom:var(--s4);
  display:grid;
  /* Pin the single column to the available width. Without this the column
     sizes to max-content and any wide child stretches the whole section. */
  grid-template-columns:minmax(0,1fr);
  align-content:space-between;
  gap:var(--s4);
  overflow:hidden;
}
/* Hero photography. Save a shot as assets/img/hero.jpg and the script finds
   it, drops it in here and adds .hero--shot. The scrim is heavy on the left
   where the copy sits and light on the right so the subject still reads. */
.hero__bg{
  position:absolute; inset:0; z-index:0;
  background-position:center right;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 900ms var(--ease);
}
.hero--shot .hero__bg{opacity:1}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg,
      rgba(9,9,11,.95) 0%, rgba(9,9,11,.88) 32%,
      rgba(9,9,11,.6) 62%, rgba(9,9,11,.3) 100%),
    linear-gradient(to top,rgba(9,9,11,.9) 0%,rgba(9,9,11,0) 38%);
}
/* With a photo behind it the product swatch competes, so it stands down. */
.hero--shot .hero__fig{display:none}
.hero--shot .hero__glow{opacity:.35}
.hero--shot .hero__grid{grid-template-columns:minmax(0,1fr)}

/* Slow red wash behind the mast, kept far under the text contrast-wise. */
.hero__glow{
  position:absolute; z-index:0;
  width:min(70vw,900px); aspect-ratio:1;
  top:-18%; right:-14%;
  background:radial-gradient(circle at 50% 50%,rgba(255,26,26,.16),rgba(255,26,26,0) 62%);
  pointer-events:none;
}
/* Everything except the backdrop layers, which must stay out of the grid flow.
   Leave one of them in and it becomes a grid item and pushes the hero down. */
.hero > *:not(.hero__glow):not(.hero__bg){position:relative;z-index:1}

.hero__top{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);justify-content:space-between;align-items:start}
.hero__top .lbl{max-width:34ch}
.hero__dot{
  display:inline-block;width:8px;height:8px;background:var(--red);
  margin-right:10px;vertical-align:2px;
}
@media (prefers-reduced-motion:no-preference){
  .hero__dot{animation:blink 1.8s steps(1) infinite}
}
@keyframes blink{0%,60%{opacity:1}61%,100%{opacity:.25}}

/* The mast: one giant word, letters masked and pulled up. */
.mast{
  /* Blackletter is already condensed and its spurs nearly touch, so it takes
     no negative tracking and needs real leading for the apexes and tails. */
  font-family:var(--brand); font-weight:700;
  font-size:var(--t-giant);
  letter-spacing:0;
  line-height:1;
  text-transform:uppercase;
  /* Letters sit naturally adjacent, the way the logo is drawn. The script
     sizes the word to the line instead of spreading the letters apart. */
  display:flex; align-items:flex-start; justify-content:flex-start;
  width:100%; max-width:100%;
}
.mast__ch{display:block;overflow:hidden;padding-block:.04em .1em}
/* The logo sets GHETTO almost touching. Each letter is its own element here,
   so letter-spacing does nothing between them and the tracking has to be a
   negative margin instead. */
.mast__ch + .mast__ch{margin-left:-.035em}
.mast__ch i{font-style:normal;display:block}
/* Sits tight to the top of the O. An em margin here would scale with the
   mast's fitted size and fling the glyph far above the word. */
.mast__tm{
  font-family:var(--mono); font-size:clamp(.75rem,1.2vw,1rem);
  letter-spacing:0; align-self:flex-start; color:var(--red);
  margin-top:0; padding-left:4px;
}

.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--s4) var(--s5);
  align-items:end;
}
.hero__copy{display:grid;gap:var(--s3);align-content:end}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__facts{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:var(--bw) solid var(--border);
}
.hero__facts div{padding:var(--s2) 0 0}
.hero__facts b{
  display:block; font-family:var(--display); font-weight:800;
  font-size:var(--t-lg); letter-spacing:var(--track-tight); line-height:1;
}
.hero__facts .lbl{margin-top:4px}

.hero__scroll{
  display:inline-flex;align-items:center;gap:10px;
  justify-self:start;
}
.hero__scroll i{
  display:block;width:var(--bw);height:34px;background:var(--border-2);position:relative;overflow:hidden;
}
.hero__scroll i::after{content:"";position:absolute;inset:0;background:var(--red);transform:translateY(-100%)}
@media (prefers-reduced-motion:no-preference){
  .hero__scroll i::after{animation:drip 1.9s var(--ease) infinite}
}
@keyframes drip{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}

/* ------------------------------------------------------------------ PLATES */
/* A plate is the art-directed frame every garment and lookbook image sits in.
   Drop a real photo in as <img class="plate__img"> and every treatment here
   (duotone, halftone, zoom, grain) keeps working with no other change. */
/* Until a photo is dropped in, a plate is a colourway swatch carrying the
   lockup or the print artwork. That is real information, honestly presented.
   A drawn garment is not: it never reads as a product and nobody would buy
   from it. The ground is the actual fabric colour. */
.plate{
  position:relative;
  overflow:hidden;
  background:var(--gar,var(--muted));
  border:var(--bw) solid var(--border);
  isolation:isolate;
}

/* Raglan: the jersey's sleeves are a different colour from its body. */
.plate.gar--jersey{
  background:linear-gradient(100deg,
    var(--gar-2) 0 20%, var(--gar) 20% 80%, var(--gar-2) 80%);
}

.plate__mark{
  position:absolute; inset:0; z-index:2;
  display:grid; place-items:center;
  padding:20%;
  transition:transform 700ms var(--ease);
}
.plate__mark svg{width:100%;height:auto;color:var(--ink,#F2F6F8)}

/* Once a real photo is in, the treatments that made an empty swatch look
   designed start working against the picture. Back them off. */
.plate--shot{background:var(--muted)}
.plate--shot::after{opacity:.14}
.plate--shot .plate__wash{opacity:.55}
.item:hover .plate__mark,
.item:focus-within .plate__mark,
.frame:hover .plate__mark{transform:scale(1.05)}
/* Absolute so a photo fills the plate exactly where the vector stand-in sat,
   whatever its own aspect ratio is. */
.plate__img{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 900ms var(--ease),filter 300ms linear;
}
.plate__art{
  position:absolute; inset:0; z-index:2;
  display:grid; place-items:center;
  padding:9%;
  transition:transform 900ms var(--ease);
}

/* Colourways. The garment bodies read --gar for the main fabric and --gar-2
   for contrast sleeves, so one drawing serves the whole range and a new
   colourway is one line here rather than a new SVG. */
.gar--black {--gar:#33333C}   /* reads as black without vanishing into the plate */
.gar--grey  {--gar:#A2A5A8}
.gar--ocean {--gar:#1F97D4}
.gar--jersey{--gar:#E0559A; --gar-2:#2C4FBF}

/* Print colour, separate from fabric colour: the same arch lockup is red on
   the black suit, near-black on the grey one and white on the Ocean one. */
.ink--red  {--ink:#E01B1B}
.ink--dark {--ink:#1A1A20}
.ink--white{--ink:#F2F6F8}
.plate__art svg{width:100%;height:100%}
/* Halftone dot screen. Tuned to read on a dark ground, not a light one. */
.plate::after{
  content:""; position:absolute; inset:0; z-index:3;
  pointer-events:none;
  opacity:.5;
  background-image:radial-gradient(rgba(250,250,250,.16) 1px,transparent 1.4px);
  background-size:5px 5px;
}
/* Sits under the garment, not over it, so it grounds the plate without
   crushing the product. z-index 0 keeps it below .plate__art. */
.plate__wash{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 58% at 50% 38%,rgba(255,255,255,.09),rgba(255,255,255,0) 72%),
    linear-gradient(165deg,rgba(9,9,11,0) 48%,rgba(9,9,11,.38) 100%);
}
.plate__tag{
  position:absolute; z-index:4;
  font-family:var(--mono); font-size:var(--t-label);
  letter-spacing:var(--track-label); text-transform:uppercase;
}
.plate__tag--tl{top:14px;left:14px}
.plate__tag--tr{top:14px;right:14px}
.plate__tag--bl{bottom:14px;left:14px}
/* Oversized ghost print behind the garment. */
.plate__print{
  position:absolute; inset:0; z-index:1;
  display:grid; place-items:center;
  font-family:var(--display); font-weight:800;
  font-size:clamp(4rem,13vw,10rem); letter-spacing:-.06em;
  text-transform:uppercase; line-height:1;
  color:rgba(250,250,250,.03);
  pointer-events:none; user-select:none;
}

/* Height-led so the whole hero resolves inside one screen; the 4:5 portrait
   proportion then decides the width, and the figure hangs off the right edge. */
.hero__plate{aspect-ratio:4/5;height:clamp(280px,44svh,520px);width:auto;margin-left:auto}
.hero__plate .plate__art{color:var(--red)}
/* Sized by its widest child so the plate and its caption share one right edge. */
.hero__fig{margin:0 0 0 auto;display:grid;width:max-content;max-width:100%}
.hero__cap{
  display:flex; justify-content:space-between; gap:var(--s2);
  padding-top:12px; border-top:var(--bw) solid var(--border); margin-top:-2px;
}

/* ----------------------------------------------------------------- MARQUEE */
.marq{
  display:flex; overflow:hidden;
  border-block:var(--bw) solid var(--border);
  background:var(--bg-2);
  padding-block:14px;
  user-select:none;
}
.marq--red{background:var(--red);border-color:var(--red)}
.marq--red .marq__row{color:var(--red-fg)}
.marq__row{
  display:flex; align-items:center; gap:28px;
  flex:0 0 auto; padding-right:28px;
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1rem,2.2vw,1.75rem); letter-spacing:-.03em;
  white-space:nowrap;
}
.marq__row span{display:inline-flex;align-items:center;gap:28px}
.marq__row em{font-style:normal;color:var(--red);font-size:.7em}
.marq--red .marq__row em{color:var(--red-fg);opacity:.5}
@media (prefers-reduced-motion:no-preference){
  .marq__row{animation:slide 14s linear infinite}
  .marq--rev .marq__row{animation-direction:reverse}
  .marq:hover .marq__row{animation-play-state:paused}
}
@keyframes slide{to{transform:translateX(-100%)}}

/* ---------------------------------------------------------------- SECTIONS */
.sec{padding-block:var(--s7)}
.sec--tight{padding-block:var(--s6)}

.sec-head{
  display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:baseline; gap:var(--s2) var(--s4);
  padding-bottom:var(--s3);
  border-bottom:var(--bw) solid var(--border);
  margin-bottom:var(--s5);
}
.sec-head h2,.sec-head h1{font-size:var(--t-xl)}
.sec-head__idx{font-family:var(--mono);font-size:var(--t-label);letter-spacing:var(--track-label);color:var(--red)}

/* --------------------------------------------------------------- MANIFESTO */
.manifesto__grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:var(--s5);
}
.statement{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.5rem,3.1vw,2.7rem);
  letter-spacing:-.04em; line-height:1.08;
  text-transform:uppercase;
}
.statement em{font-style:normal;color:var(--red)}
.statement .w{display:inline-block;opacity:.16;transition:opacity 420ms linear}
.statement .w.on{opacity:1}

.manifesto__side{display:grid;gap:var(--s4);align-content:start}
.tri{display:grid;gap:var(--s2);border-top:var(--bw) solid var(--border);padding-top:var(--s3)}
.tri div{display:grid;gap:2px}
.tri p{font-weight:600}

/* ------------------------------------------------------------------- ITEMS */
/* Fixed at three so the six pieces always land as a clean 3x2 block. auto-fill
   would give four columns on a wide screen and leave two dead cells. */
.grid-drop{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--bw);
  background:var(--border);
  border:var(--bw) solid var(--border);
}
.item{
  background:var(--bg);
  padding:var(--s3);
  display:grid; gap:var(--s3);
  /* Explicit rows so the size pills sit on one line across the row even when a
     product name wraps to two lines. */
  grid-template-rows:auto 1fr auto;
  transition:background var(--dur) linear,color var(--dur) linear;
}
/* Card flood inversion — the signature Kinetic Brutalism interaction. */
.item:hover,.item:focus-within{background:var(--red);color:var(--red-fg)}
.item:hover .lbl,.item:focus-within .lbl{color:var(--red-fg)}
.item:hover .plate,.item:focus-within .plate{border-color:var(--red-fg)}
.item:hover .plate__img,.item:focus-within .plate__img,
.item:hover .plate__art,.item:focus-within .plate__art{transform:scale(1.06)}
.item:hover .item__add,.item:focus-within .item__add{transform:translateY(0)}

.item__plate{aspect-ratio:3/4;position:relative}
.item__plate .plate__art{color:var(--red)}
.item__flag{
  position:absolute; z-index:5; top:14px; right:14px;
  background:var(--red); color:var(--red-fg);
  padding:5px 9px;
  font-family:var(--mono); font-size:.6875rem;
  letter-spacing:var(--track-label); text-transform:uppercase; font-weight:700;
}
.item:hover .item__flag,.item:focus-within .item__flag{background:var(--red-fg);color:var(--red)}
/* Solid red with black on it, the same weight as the main call to action.
   It was black with red text, which reads as a broken element rather than a
   button you are meant to press. */
.item__add{
  position:absolute; z-index:5; left:0; right:0; bottom:0;
  min-height:54px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 18px;
  background:var(--red); color:var(--red-fg);
  font-family:var(--mono); font-size:var(--t-label);
  letter-spacing:var(--track-label); text-transform:uppercase; font-weight:700;
  transform:translateY(101%);
  transition:transform 340ms var(--ease),background var(--dur) linear,color var(--dur) linear;
}
.item__add span{font-size:1.2em;line-height:1}
.item__add:hover,.item__add:focus-visible{background:var(--fg);color:var(--bg)}
.item__add:focus-visible{outline-offset:-5px}

/* A touch screen has no hover, so sliding the button out on hover would leave
   it permanently unreachable on a phone. Pin it open there. */
@media (hover:none){
  .item__add{transform:none}
}

.item__meta{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2)}
.item__meta h3{font-size:var(--t-md)}
.item__price{font-family:var(--mono);font-size:.9375rem;font-weight:700;white-space:nowrap}
/* Deliberately not a number. Real prices have not been supplied yet, and an
   invented one is worse than an obvious gap. */
.item__price--tbc{font-size:.6875rem;font-weight:400;color:var(--fg-3);letter-spacing:.1em;text-transform:uppercase}
.item:hover .item__price--tbc,
.item:focus-within .item__price--tbc{color:rgba(9,9,11,.55)}

.sizes{display:flex;flex-wrap:wrap;gap:6px}
.sizes button{
  min-width:44px; min-height:44px; padding:0 10px;
  border:var(--bw) solid var(--border-2);
  font-family:var(--mono); font-size:var(--t-label);
  letter-spacing:.06em; text-transform:uppercase;
  transition:background var(--dur) linear,color var(--dur) linear,border-color var(--dur) linear;
}
.sizes button:hover:not(:disabled){background:var(--fg);color:var(--bg);border-color:var(--fg)}
.sizes button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.item:hover .sizes button,.item:focus-within .sizes button{border-color:rgba(9,9,11,.45)}
.item:hover .sizes button:hover:not(:disabled),
.item:hover .sizes button[aria-pressed="true"],
.item:focus-within .sizes button[aria-pressed="true"]{background:var(--red-fg);color:var(--red);border-color:var(--red-fg)}
.sizes button:disabled{opacity:.3;cursor:not-allowed;text-decoration:line-through}

/* ---------------------------------------------------------------- LOOKBOOK */
.lookbook{background:var(--bg-2);border-block:var(--bw) solid var(--border)}
/* Frames are separate objects, not cells in a ruled grid, so they need real air
   between them or one frame's timestamp collides with the next frame's name. */
.rail{
  display:flex; gap:var(--s3);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding-bottom:var(--s3);
  cursor:grab;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.rail::-webkit-scrollbar{display:none}
.rail[data-drag="true"]{cursor:grabbing;scroll-snap-type:none}
.frame{
  margin:0; flex:0 0 clamp(260px,30vw,420px);
  scroll-snap-align:start;
  display:grid; gap:12px;
}
.frame .plate{aspect-ratio:4/5}
.frame .plate__art{color:var(--fg-3)}
.frame:hover .plate__art,.frame:hover .plate__img{transform:scale(1.05)}
.frame figcaption{display:flex;justify-content:space-between;gap:var(--s2)}
.rail-bar{height:var(--bw);background:var(--border);position:relative;margin-top:var(--s2)}
.rail-bar i{position:absolute;inset-block:0;left:0;width:22%;background:var(--red)}

/* ------------------------------------------------------------------- CARDS */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--bw);
  background:var(--border);
  border:var(--bw) solid var(--border);
}
.card{
  background:var(--bg);
  padding:var(--s4) var(--s3) var(--s5);
  display:grid; gap:12px; align-content:start;
  transition:background var(--dur) linear,color var(--dur) linear;
}
.card:hover{background:var(--red);color:var(--red-fg)}
.card:hover .lbl{color:var(--red-fg)}
.card h3{font-size:var(--t-md)}
.card p{color:var(--fg-2);font-size:.9375rem;line-height:1.55}
.card:hover p{color:rgba(9,9,11,.78)}

/* ------------------------------------------------------------------- ALERT */
.alert{
  border-top:var(--bw) solid var(--border);
  background:
    radial-gradient(ellipse 70% 90% at 50% 120%,rgba(255,26,26,.14),rgba(255,26,26,0) 70%),
    var(--bg);
}
.alert__inner{display:grid;gap:var(--s4);justify-items:center;text-align:center}
.alert h2{font-size:var(--t-xxl)}
.alert .lede{text-align:center;max-width:52ch}
.ticket{
  display:flex; flex-wrap:wrap; gap:var(--bw);
  width:min(100%,620px);
  border:var(--bw) solid var(--border-2);
}
.ticket input{
  flex:1 1 240px; min-height:66px; min-width:0;
  background:var(--bg); color:var(--fg);
  border:0; padding:0 20px;
  font-family:var(--mono); font-size:.875rem;
}
.ticket input::placeholder{color:var(--fg-3)}
.ticket input:focus-visible{outline-offset:-4px}
.ticket .btn{flex:0 0 auto}
.ticket[data-bad="true"]{border-color:#FF5A4E}
.alert__msg{min-height:1.4em;font-family:var(--mono);font-size:var(--t-label);letter-spacing:var(--track-label);text-transform:uppercase}
.alert__msg[data-tone="ok"]{color:var(--red)}
.alert__msg[data-tone="bad"]{color:#FF7A70}

/* ------------------------------------------------------------------ FOOTER */
.foot{border-top:var(--bw) solid var(--border);padding-top:var(--s6);overflow:hidden}
.foot__cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--s4);
  padding-bottom:var(--s6);
}
.foot h4{font-size:.9375rem;margin-bottom:var(--s2);color:var(--fg)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot li a{
  font-family:var(--mono); font-size:var(--t-label);
  letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--fg-2);
  transition:color var(--dur) linear;
}
.foot li a:hover{color:var(--red)}
.foot__mark{
  font-family:var(--brand); font-weight:700;
  font-size:clamp(6rem,30vw,26rem); letter-spacing:0; line-height:.86;
  text-transform:uppercase;
  color:var(--muted-2);
  user-select:none; pointer-events:none;
  white-space:nowrap;
  margin-bottom:-.08em;
}
/* Quivana has no registered-mark glyph, so it falls back to a system face at
   the wordmark's full size. Set it in the mono face at trademark scale and
   lift it to the cap line, the way a real lockup carries it. */
.foot__mark sup{
  font-family:var(--mono); font-weight:700;
  font-size:.15em; letter-spacing:0;
  vertical-align:baseline; position:relative; top:-2.4em;
  margin-left:.25em;
}
.foot__legal{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s2);
  border-top:var(--bw) solid var(--border);
  padding-block:var(--s3);
}

/* ========================================================================= */
/* BAG AND CHECKOUT                                                          */
/* ========================================================================= */
.bag{position:fixed;inset:0;z-index:960}
.bag[hidden]{display:none}

.bag__scrim{
  position:absolute; inset:0;
  background:rgba(5,5,7,.72);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  opacity:0; transition:opacity 300ms var(--ease);
}
.bag[data-open="true"] .bag__scrim{opacity:1}

.bag__panel{
  position:absolute; inset:0 0 0 auto;
  width:min(460px,100%);
  background:var(--bg);
  border-left:var(--bw) solid var(--border-2);
  display:grid; grid-template-rows:auto 1fr auto;
  transform:translateX(100%);
  transition:transform 420ms var(--ease);
}
.bag[data-open="true"] .bag__panel{transform:none}

.bag__head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  padding:var(--s3) var(--s3) var(--s3) var(--s4);
  border-bottom:var(--bw) solid var(--border);
}
.bag__head h2{font-size:var(--t-lg)}
.bag__x{
  width:44px; height:44px; display:grid; place-items:center;
  border:var(--bw) solid var(--border-2); font-size:1rem;
  transition:background var(--dur) linear,color var(--dur) linear,border-color var(--dur) linear;
}
.bag__x:hover{background:var(--red);color:var(--red-fg);border-color:var(--red)}

.bag__body{overflow-y:auto;padding:var(--s3) var(--s4)}
/* .lbl sets inline-block, which outranks the browser's [hidden] rule, so the
   empty message has to opt out of display explicitly or it never hides. */
.bag__empty:not([hidden]){display:block;padding-block:var(--s4)}
.bag__empty[hidden]{display:none}
.bag__lines{list-style:none;margin:0;padding:0;display:grid;gap:var(--bw)}

.line{
  display:grid; grid-template-columns:64px 1fr auto; gap:var(--s2);
  align-items:center;
  padding-block:var(--s2);
  border-bottom:var(--bw) solid var(--border);
}
.line__thumb{
  width:64px; aspect-ratio:3/4; object-fit:cover;
  background:var(--muted); border:var(--bw) solid var(--border);
}
.line__name{font-weight:700;font-size:.9375rem;line-height:1.25}
.line__meta{display:block;margin-top:2px}
.line__qty{display:flex;align-items:center;gap:2px}
.line__qty button{
  width:32px; height:32px; display:grid; place-items:center;
  border:var(--bw) solid var(--border-2); font-family:var(--mono);
  transition:background var(--dur) linear,color var(--dur) linear;
}
.line__qty button:hover{background:var(--fg);color:var(--bg)}
.line__qty b{min-width:26px;text-align:center;font-family:var(--mono);font-size:.875rem}
.line__drop{
  font-family:var(--mono); font-size:var(--t-label); color:var(--fg-3);
  letter-spacing:var(--track-label); text-transform:uppercase;
  margin-top:6px; transition:color var(--dur) linear;
}
.line__drop:hover{color:var(--red)}

/* Payment choice */
.pay{border:0;margin:var(--s4) 0 var(--s3);padding:0}
.pay legend{padding:0;margin-bottom:10px}
.pay__opt{display:block;margin-bottom:8px;cursor:pointer}
.pay__opt input{position:absolute;opacity:0;width:0;height:0}
.pay__box{
  display:block; padding:14px 16px;
  border:var(--bw) solid var(--border-2);
  transition:border-color var(--dur) linear,background var(--dur) linear;
}
.pay__box b{display:block;font-size:.9375rem}
.pay__box small{display:block;margin-top:3px;color:var(--fg-2);font-size:.8125rem;line-height:1.4}
.pay__opt input:checked + .pay__box{border-color:var(--red);background:rgba(255,26,26,.07)}
.pay__opt input:focus-visible + .pay__box{outline:var(--bw) solid var(--red);outline-offset:3px}
.pay__opt input:disabled + .pay__box{opacity:.45;cursor:not-allowed}

/* Fields */
.field{display:grid;gap:6px;margin-bottom:var(--s2)}
.field label{
  font-family:var(--mono); font-size:var(--t-label);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--fg-2);
}
.field input,.field textarea{
  background:var(--bg-2); color:var(--fg);
  border:var(--bw) solid var(--border-2);
  padding:13px 14px; min-height:48px;
  font-family:var(--body); font-size:.9375rem;
  border-radius:0; resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-3)}
.field input:focus-visible,.field textarea:focus-visible{outline-offset:-4px}
.field[data-bad="true"] input,.field[data-bad="true"] textarea{border-color:var(--red)}

.bag__err{
  min-height:1.2em; color:var(--red);
  font-family:var(--mono); font-size:var(--t-label);
  letter-spacing:var(--track-label); text-transform:uppercase;
}

.bag__foot{
  border-top:var(--bw) solid var(--border);
  padding:var(--s3) var(--s4);
  display:grid; gap:var(--s2);
}
.bag__total{display:flex;justify-content:space-between;align-items:baseline}
.bag__total b{font-family:var(--mono);font-size:1.25rem}
.bag__foot .btn{width:100%}
.bag__note{color:var(--fg-3);line-height:1.5}

@media (max-width:520px){
  .bag__panel{width:100%;border-left:0}
  .bag__body{padding-inline:var(--s3)}
  .bag__head{padding-inline:var(--s3)}
  .bag__foot{padding-inline:var(--s3)}
}

/* ------------------------------------------------------------------- TOAST */
.toast{
  position:fixed; z-index:950;
  left:var(--gutter); bottom:24px;
  background:var(--red); color:var(--red-fg);
  padding:16px 20px;
  font-family:var(--mono); font-size:var(--t-label);
  letter-spacing:var(--track-label); text-transform:uppercase; font-weight:700;
  transform:translateY(calc(100% + 40px));
  transition:transform 420ms var(--ease);
  max-width:calc(100vw - var(--gutter) * 2);
}
.toast[data-show="true"]{transform:translateY(0)}

/* ======================================================================= */
/* EDGE — everything below exists to make the page harder and louder.      */
/* ======================================================================= */

/* Hazard tape. Used as a section break and under the nav. */
.hazard{height:20px;background:var(--hazard);background-size:50.91px 50.91px}
.hazard--red{background:var(--hazard-red);background-size:50.91px 50.91px}
@media (prefers-reduced-motion:no-preference){
  .hazard{animation:hazardrun 1.4s linear infinite}
}
@keyframes hazardrun{to{background-position:50.91px 0}}

/* Scanlines over the whole document, above grain, below the nav. */
.scan{
  position:fixed; inset:0; z-index:899; pointer-events:none;
  background:repeating-linear-gradient(to bottom,
    rgba(250,250,250,.04) 0 1px,transparent 1px 4px);
}

/* RGB split on the wordmark. Only text-shadow is animated, never transform,
   because the intro owns the transform on these same elements. */
@media (prefers-reduced-motion:no-preference){
  .mast__ch i{animation:rgbsplit 5.4s steps(1) infinite}
  .mast__ch:nth-child(2) i{animation-delay:1.1s}
  .mast__ch:nth-child(3) i{animation-delay:2.7s}
  .mast__ch:nth-child(4) i{animation-delay:.4s}
  .mast__ch:nth-child(5) i{animation-delay:3.6s}
  .mast__ch:nth-child(6) i{animation-delay:1.9s}
}
@keyframes rgbsplit{
  0%,92%  {text-shadow:none}
  93%     {text-shadow:-4px 0 var(--red),4px 0 #00E5FF}
  94%     {text-shadow:3px 0 var(--red),-3px 0 #00E5FF}
  95%     {text-shadow:none}
  96%     {text-shadow:-6px 0 var(--red),6px 0 #00E5FF}
  97%,100%{text-shadow:none}
}

/* Alarm states. Red only ever means sold out, low stock or last call. */
.item__flag--alarm{background:var(--red);color:var(--bg)}
.item:hover .item__flag--alarm,
.item:focus-within .item__flag--alarm{background:var(--bg);color:var(--red)}
.lbl--alarm{color:var(--red)}
.lbl--alarm .hero__dot{background:var(--red)}

/* Rotated stamp, stuck on rather than laid out. */
.stamp{
  display:inline-block;
  border:var(--bw) solid var(--red);
  color:var(--red);
  padding:7px 13px;
  font-family:var(--mono); font-size:.6875rem; font-weight:700;
  letter-spacing:var(--track-label); text-transform:uppercase;
  transform:rotate(-4deg);
}

.foot__kit{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3);
  border-top:var(--bw) solid var(--border);
  padding-block:var(--s3);
}
.foot__badge{width:74px;height:74px;color:var(--red);flex:0 0 auto}

.barcode{
  height:34px; width:150px;
  background:repeating-linear-gradient(to right,
    var(--fg-2) 0 2px,transparent 2px 4px,
    var(--fg-2) 4px 5px,transparent 5px 9px,
    var(--fg-2) 9px 12px,transparent 12px 13px);
}

/* Cards snap rather than fade. Instant inversion is the aggressive read. */
.item,.card{transition:none}

.odds-band{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:var(--s4) var(--s5);
  align-items:end;
}
.odds__side{display:grid;gap:var(--s3);justify-items:start;align-content:end}
@media (max-width:820px){
  .odds-band{grid-template-columns:1fr}
}

/* The brand line. Set in the display face, not the blackletter: Quivana is
   for the wordmark only. Syne is far wider than Quivana at the same point
   size, so the clamp is smaller here than it looks. */
.odds{
  font-family:var(--display); font-weight:800;
  font-size:clamp(3rem,9.5vw,9rem);
  letter-spacing:-.02em; line-height:.9;
  text-transform:uppercase;
}
.odds em{
  font-style:normal;
  -webkit-text-stroke:.028em var(--red);
  color:transparent;
}

/* ======================================================================= */
/* THE WALL — 3D marquee.                                                  */
/* Ported from the React + Tailwind + motion component supplied for this   */
/* project. The effect is a grid rotated in 3D whose columns drift in      */
/* opposite directions, which is pure CSS transform and needs no framework.*/
/* ======================================================================= */
.wall{
  position:relative;
  height:clamp(460px,62vh,760px);
  overflow:hidden;
  border-block:var(--bw) solid var(--border);
  background:var(--bg-2);
  isolation:isolate;
}
/* Flex, not grid. The rotated grid is far taller than this frame, and grid
   centring clamps an overflowing item back to start, which paints the whole
   wall below the visible area. Flex centres it and lets it overflow both ways. */
.wall__stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
/* Height is auto on purpose. The columns are taller than any square box we
   could pick, and a fixed height would let them overflow downwards, which
   throws the rotated mass off-centre and leaves the frame half empty. */
.wall__grid{
  --wall-scale:.5;
  width:1500px; height:auto;
  flex:0 0 auto;                 /* never let the flex stage shrink it */
  display:grid; grid-template-columns:repeat(4,1fr); gap:26px;
  transform:rotateX(55deg) rotateZ(-45deg) scale(var(--wall-scale));
  transform-origin:50% 50%;
}
@media (min-width:640px) { .wall__grid{--wall-scale:.62} }
@media (min-width:1024px){ .wall__grid{--wall-scale:.78} }

.wall__col{display:flex;flex-direction:column;gap:26px}
@media (prefers-reduced-motion:no-preference){
  .wall__col{animation:walldrift 13s ease-in-out infinite alternate}
  .wall__col:nth-child(even){animation-duration:18s;animation-direction:alternate-reverse}
}
@keyframes walldrift{from{transform:translateY(-100px)}to{transform:translateY(100px)}}

.wall-tile{
  position:relative;
  aspect-ratio:970/700;
  background:var(--muted);
  border:var(--bw) solid var(--border-2);
  overflow:hidden;
  display:grid; place-items:center;
  text-align:center;
  transition:transform 320ms var(--ease),border-color var(--dur) linear;
}
.wall-tile:hover{transform:translateY(-16px);border-color:var(--red)}

.wall-tile--word{
  background:var(--bg); color:var(--fg);
  font-family:var(--brand); font-weight:700;
  font-size:3.2rem; letter-spacing:0; text-transform:uppercase;
}
.wall-tile--red{
  background:var(--red); color:var(--red-fg); border-color:var(--red);
  font-family:var(--brand); font-weight:700;
  font-size:3.2rem; letter-spacing:0; text-transform:uppercase;
}
.wall-tile--tape{background:var(--hazard);background-size:50.91px 50.91px;border-color:var(--red)}
.wall-tile--badge{background:var(--bg)}
.wall-badge{width:62%;height:auto;color:var(--red)}
.wall-tile--odds{
  background:var(--bg); color:var(--red);
  font-family:var(--mono); font-size:1.1rem; font-weight:700;
  letter-spacing:var(--track-label); text-transform:uppercase;
  padding:12%; line-height:1.4;
}

/* Fades the wall into the page instead of ending it on a hard edge. */
.wall__fade{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  background:
    linear-gradient(to bottom,var(--bg-2),rgba(14,14,17,0) 20%,rgba(14,14,17,0) 80%,var(--bg-2)),
    linear-gradient(to right,var(--bg-2),rgba(14,14,17,0) 16%,rgba(14,14,17,0) 84%,var(--bg-2));
}

/* ------------------------------------------------------------------ REVEAL */
/* Every hidden-then-animated state is gated behind .js, which an inline script
   in <head> sets. If scripting is off or a file fails to load, none of these
   rules apply and the page renders complete and static. */
.js .rv{opacity:0;transform:translateY(26px)}
.js .rv.in{opacity:1;transform:none;transition:opacity 620ms var(--ease),transform 620ms var(--ease)}
.js .rv[data-d="1"].in{transition-delay:.08s}
.js .rv[data-d="2"].in{transition-delay:.16s}
.js .rv[data-d="3"].in{transition-delay:.24s}

.boot{display:none}
.js .boot{display:grid}
.js .mast__ch i,.js .boot__word i{transform:translateY(101%)}

/* -------------------------------------------------------------- RESPONSIVE */
@media (max-width:1180px){
  .grid-drop{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr;gap:var(--s4)}
  .hero__plate{aspect-ratio:16/11}
  .manifesto__grid{grid-template-columns:1fr;gap:var(--s4)}
}
@media (max-width:820px){
  :root{--nav-h:58px}
  .nav__links{display:none}
  .burger{display:grid}
  .nav__bag{padding:0 12px}
  .nav__bag .lbl-txt{display:none}
  .hero{min-height:auto;padding-bottom:var(--s5)}
  .mast{flex-wrap:wrap;justify-content:flex-start}
  .hero__facts{grid-template-columns:1fr;gap:0}
  .hero__facts div{padding-block:var(--s2);border-bottom:var(--bw) solid var(--border)}
  .hero__facts div:last-child{border-bottom:0}
  .sec-head{margin-bottom:var(--s4)}
  .grid-drop{grid-template-columns:1fr}
  .foot__cols{padding-bottom:var(--s4)}
}
@media (max-width:420px){
  .ticket{flex-direction:column}
  .ticket .btn{width:100%}
}

/* --------------------------------------------------------- REDUCED MOTION */
/* Present the final, readable state with no parallax, marquee or scroll-jack. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .rv{opacity:1;transform:none}
  .js .mast__ch i,.js .boot__word i{transform:none}
  .statement .w{opacity:1}
  .item__add{transform:translateY(0)}
  .rail{scroll-snap-type:none}
  /* Moving footage is exactly what this preference is about, so drop it and
     let the preloader fall back to its plain dark ground. */
  .boot__vid{display:none}
}