* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  background: #0a0806;
  color: #f2ede6;
  font-family: "Archivo Narrow", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: -50%;
  /* Above the whole page stack — pages carry ascending z-indexes now. */
  z-index: 100;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(4) infinite;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1%); }
  50%  { transform: translate(1%, -2%); }
  75%  { transform: translate(-1%, 2%); }
  100% { transform: translate(2%, -1%); }
}

/* ---- the page stack (Red's spec, 2026-08-13: every page slides up and
   covers the last; a headline + its video scroll as ONE page) ----
   Each page is sticky with an opaque background and an ascending z-index
   (set in main.js, DOM order). Pages taller than the viewport get a
   NEGATIVE sticky top (viewport − height, measured in main.js) so a page
   pins only once it has been fully scrolled — inside a page, scrolling
   stays normal; the covering happens between pages. */

.page {
  position: sticky;
  top: 0;
  /* lvh, not svh: on phones the URL bar collapses mid-scroll and grows the
     viewport — an svh-sized page would leave a strip of the page underneath
     showing. lvh == svh on desktop, so this changes nothing there. */
  min-height: 100vh;
  min-height: 100lvh;
  background: #0a0806;
}

/* ---- hero ---- */

.hero {
  /* position comes from .page (sticky) — sticky is a positioned element,
     so the absolutely-placed video/vignette/content still anchor to it. */
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
}

#hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The grade lives HERE now, not baked into the files (Red, 2026-08-13):
     source mp4s are clean high-quality encodes; saturation matches the b/w-gold
     look BLUE tuned, the faint blur is Red's ask. Tune without re-encoding. */
  filter: saturate(0.3) blur(1.5px);
  /* A blurred edge bleeds transparent; the tiny scale hides it. */
  transform: scale(1.02);
}

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 45%, rgba(6, 4, 2, 0.55) 100%),
    linear-gradient(to bottom, rgba(6, 4, 2, 0.5), transparent 22%, transparent 72%, rgba(6, 4, 2, 0.85));
}

.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 5vw;
}

h1 {
  font-size: clamp(5rem, 22vw, 15rem);
  font-weight: 800;
  font-stretch: condensed;
  letter-spacing: 0.14em;
  margin-right: -0.14em;
  line-height: 1;
  text-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
}

.tag {
  margin-top: 1.1rem;
  font-size: clamp(0.95rem, 2.4vw, 1.35rem);
  letter-spacing: 0.42em;
  margin-right: -0.42em;
  text-transform: uppercase;
  color: #d9a05b;
  text-shadow: 0 0 24px rgba(0, 0, 0, 0.8);
}

#sound {
  margin-top: 3rem;
  padding: 0.65rem 1.6rem;
  background: transparent;
  border: 1px solid rgba(242, 237, 230, 0.45);
  color: #f2ede6;
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  margin-right: -0.3em;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

#sound:hover,
#sound[aria-pressed="true"] {
  border-color: #d9a05b;
  color: #d9a05b;
}

/* ---- statement ---- */

.statement {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18vh 8vw;
}

.statement p {
  font-size: clamp(1.3rem, 4.2vw, 3rem);
  font-weight: 700;
  font-stretch: condensed;
  line-height: 1.35;
  letter-spacing: 0.06em;
}

.phrase { white-space: nowrap; }

.statement .sub {
  margin-top: 2.2rem;
  font-size: clamp(0.72rem, 2.6vw, 1.2rem);
  font-weight: 400;
  letter-spacing: 0.42em;
  margin-right: -0.42em;
  text-transform: uppercase;
  color: #d9a05b;
  white-space: nowrap;
}

.shimmer {
  background: linear-gradient(100deg, #d9a05b 38%, #e8c37c 46%, #f9ecc4 50%, #e8c37c 54%, #d9a05b 62%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 4.5s ease-in-out infinite;
}

@keyframes shimmer {
  0%   { background-position: 120% 0; }
  60%  { background-position: -60% 0; }
  100% { background-position: -60% 0; }
}

/* ---- image breaks ---- */

.break {
  position: relative;
  height: 70vh;
  overflow: hidden;
  background: #0a0806;
}
.break video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Red 2026-08-20, delivering the four trailers: "a small blur on top" —
     reverses his 2026-08-14 clean-video call, deliberately SMALLER than the
     hero's 1.5px so it reads as grade, not low quality. Saturation stays for
     the site's b/w-gold look. Tune here, never re-encode. */
  filter: saturate(0.3) blur(1px);
  /* A blurred edge bleeds transparent; the tiny scale hides it (hero's trick). */
  transform: scale(1.02);
}
.break::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 60px 80px -40px #0a0806,
    inset 0 -60px 80px -40px #0a0806;
}

/* ---- teases (the headline half of each feature page) ---- */

.feature .tease {
  min-height: 100vh;
  min-height: 100lvh;
}

/* Every tease is now headline-only (Red, 2026-08-14: the b/w still beside the
   Garage headline is gone). The side-by-side .tease-garage / .tease-img
   treatment and its mobile stacking rules went with it. */
.tease-center {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16vh 8vw;
}

/* ---- tease reveal (Red, 2026-08-20) ----
   Desktop (real mouse): hovering a title screen slides the headline aside —
   alternating left / right down the page — and a description slides in beside
   it. The hover target is the WHOLE tease, not the text: a headline that moves
   away from the cursor would end its own hover and flicker.
   Mobile (no hover): main.js marks a tease `revealed` while it rides the middle
   of the viewport; the headline slides up, the description drops in below.
   Text page only — the video break is untouched, and the desc is absolute so no
   page height changes and main.js's page-stack arithmetic never notices.
   Nothing slides out of frame on either layout (13vw shift, desc width-capped). */
.feature .tease {
  position: relative;
}
.feature .tease-text {
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.tease-desc {
  position: absolute;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  font-size: clamp(0.85rem, 2.6vw, 1.05rem);
  line-height: 1.75;
  color: #d9a05b;
  transition:
    opacity 0.45s ease 0.1s,
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s;
}

@media (hover: hover) and (pointer: fine) {
  .tease-desc {
    top: 50%;
    width: min(32ch, 25vw);
  }
  /* 63% / 14vw, not 57% / 13vw: "Clubs & Events" is the widest headline, and at
     mid-size windows its slid edge crossed ~2vw into the desc column (Red saw
     the C graze the text). Font and shift both scale with vw below the h2's
     clamp cap, so this clearance holds at every width — sized for the widest
     title, shared by all six so the motion stays uniform. */
  .alt-left .tease-desc  { left: 63%;  text-align: left;  transform: translate(28px, -50%); }
  .alt-right .tease-desc { right: 63%; text-align: right; transform: translate(-28px, -50%); }
  .alt-left  .tease:hover .tease-text { transform: translateX(-14vw); }
  .alt-right .tease:hover .tease-text { transform: translateX(14vw); }
  .feature .tease:hover .tease-desc { opacity: 1; transform: translate(0, -50%); }
}

@media (hover: none), (pointer: coarse) {
  .tease-desc {
    top: 55%;
    left: 8vw;
    right: 8vw;
    text-align: center;
    transform: translateY(-16px);
  }
  /* Softer clock than desktop: on a phone the reveal fires mid-scroll, and a
     quick snap reads as a stutter against the scroll motion. */
  .feature .tease-text { transition-duration: 0.7s; }
  .tease-desc { transition-duration: 0.6s, 0.7s; }
  .feature .tease.revealed .tease-text { transform: translateY(-7vh); }
  .feature .tease.revealed .tease-desc { opacity: 1; transform: translateY(0); }
}

.num {
  font-size: 0.8rem;
  letter-spacing: 0.5em;
  color: #d9a05b;
}

.tease h2 {
  margin-top: 0.6rem;
  font-size: clamp(2.4rem, 7vw, 4.5rem);
  font-weight: 800;
  font-stretch: condensed;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

.tease p {
  margin-top: 1rem;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242, 237, 230, 0.72);
}

/* ---- closer ---- */

.closer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 15vh 5vw 0;
}

.closer h1 {
  font-size: clamp(4rem, 18vw, 12rem);
}

.closer .tag { margin-top: 1rem; }

footer {
  margin-top: auto;
  display: flex;
  justify-content: center;
  gap: 0.7em;
  padding: 6rem 1.2rem 1.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(242, 237, 230, 0.6);
}

footer .dot { color: #d9a05b; }

/* ---- the garage door (Red, 2026-08-14) ---- */
#wordmark { cursor: default; -webkit-tap-highlight-color: transparent; user-select: none; }
/* An author display beats the hidden attribute's UA display:none — without this
   the gate is just always open (Red found it live, 2026-08-14). */
#gate[hidden] { display: none !important; }
#gate {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(10, 8, 6, 0.88);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.gate-card {
  width: min(340px, 100%);
  background: #0a0806;
  border: 1px solid rgba(217, 160, 91, 0.45);
  padding: 28px 24px;
  text-align: center;
}
.gate-card h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: 0.08em; text-transform: uppercase; }
.gate-sub { margin: 0 0 18px; color: rgba(242, 237, 230, 0.65); font-size: 14px; }
#gate-pw {
  width: 100%; box-sizing: border-box;
  background: transparent; color: #f2ede6;
  border: 1px solid rgba(242, 237, 230, 0.3);
  padding: 10px 12px; font: inherit; letter-spacing: 0.04em;
}
#gate-pw:focus { outline: none; border-color: #d9a05b; }
.gate-actions { display: flex; gap: 10px; margin-top: 14px; justify-content: center; }
.gate-actions button {
  font: inherit; letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px;
  padding: 9px 16px; cursor: pointer;
}
#gate-go { background: #d9a05b; border: 1px solid #d9a05b; color: #0a0806; }
#gate-go:disabled { opacity: 0.6; cursor: default; }
#gate-cancel { background: transparent; border: 1px solid rgba(242, 237, 230, 0.3); color: #f2ede6; }
#gate-status { min-height: 1.2em; margin: 14px 0 0; font-size: 13px; color: #d9a05b; }

/* ---- the builds panel behind the door (Red, 2026-08-19) ---- */
#gate-builds[hidden], #gate-ask[hidden] { display: none !important; }
#gate-dl-latest {
  width: 100%; font: inherit; letter-spacing: 0.08em; text-transform: uppercase;
  font-size: 14px; padding: 12px 16px; cursor: pointer;
  background: #d9a05b; border: 1px solid #d9a05b; color: #0a0806;
}
.gate-build-meta { margin: 8px 0 0; font-size: 12px; color: rgba(242, 237, 230, 0.65); }
.gate-older-head {
  margin: 22px 0 8px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(242, 237, 230, 0.5); text-align: left;
}
#gate-older { list-style: none; margin: 0; padding: 0; text-align: left; }
#gate-older li { border-top: 1px solid rgba(242, 237, 230, 0.12); padding: 10px 0; }
.gate-build-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.gate-dl-old {
  font: inherit; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 12px; cursor: pointer;
  background: transparent; border: 1px solid #d9a05b; color: #d9a05b;
}
.gate-gone { font-size: 11px; color: rgba(242, 237, 230, 0.4); font-style: italic; }
.gate-notes { margin-top: 6px; }
.gate-notes summary {
  cursor: pointer; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(217, 160, 91, 0.8);
}
.gate-notes p { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: rgba(242, 237, 230, 0.75); }
#gate-close { background: transparent; border: 1px solid rgba(242, 237, 230, 0.3); color: #f2ede6; }
#gate-builds .gate-actions { margin-top: 20px; }