/* ============================================================
   STEPH'S KITCHEN: The Menu That Vanishes
   Rebuilt by AXIS in the Mara Voss editorial archive language:
   warm bone paper, near black ink, ember for what sells out,
   Steph's own garden green for what is fresh this week.
   Type: Big Shoulders Display / Inter / JetBrains Mono.
   One easing personality throughout, mirrored by EASE in main.js.
   ============================================================ */
:root {
  /* palette */
  --paper: #EFEAE2;            /* the page opens and closes here */
  --paper-deep: #E0D9CA;
  --ink: #1A1B1E;
  --ink-dim: rgba(26, 27, 30, 0.68);
  --ink-faint: rgba(26, 27, 30, 0.34);
  --hairline: rgba(26, 27, 30, 0.16);
  --green: #365A26;            /* Steph's brand green: fresh this week */
  --ember: #D4552B;            /* what sells out */
  --amber: #A67418;            /* what returns by demand */
  --ember-ink: #A83F1C;        /* ember for small text on paper */
  --amber-ink: #7A5511;        /* amber for small text on paper */
  --pale: #E8E4DC;             /* text inside the dark rooms */
  /* type */
  --font-display: 'Big Shoulders Display', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  /* ONE motion personality */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* The page has its own progress meter, so keep the browser chrome
   quiet without disabling native scrolling. */
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
  html:not(:has(body.static-mode)) {
    scrollbar-width: none;
  }
  html:not(:has(body.static-mode))::-webkit-scrollbar,
  html:not(:has(body.static-mode)) body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.loading {
  overflow: hidden;
}
::selection {
  background: var(--ink);
  color: var(--paper);
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}
img {
  max-width: 100%;
}
.mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
/* status colours: the kitchen's three verdicts */
.status--thisweek {
  color: var(--green);
}
.status--returning {
  color: var(--amber-ink);
}
.status--soldout {
  color: var(--ember-ink);
}
/* The ember marks the words where the week runs out. */
.accent-word {
  color: var(--ember);
}

/* ---------- Static paper texture ----------
   Laid paper fibres, fine tooth, a whisper of vignette, multiplied
   into whatever tone the body currently holds. No animation. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.055;
  background-image:
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(26, 27, 30, 0.5) 130%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.09' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23f)'/%3E%3C/svg%3E"),
    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' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 100% 100%, 700px 700px, 240px 240px;
}
main {
  position: relative;
  z-index: 2;
}

/* ---------- photo treatments ----------
   .duo: ink print: grayscale photo multiplied into the paper with
   a faint olive ink cast. isolation keeps blends contained.
   .duo-dark: dark duotone for full bleed panels and the dark rooms
   where multiply on paper would wash out. */
.duo {
  isolation: isolate;
  overflow: hidden;
  position: relative;
}
.duo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(1.04);
  mix-blend-mode: multiply;
}
.duo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(160deg, rgba(54, 90, 38, 0.20), rgba(26, 27, 30, 0.05) 60%);
  mix-blend-mode: color;
  pointer-events: none;
}
.duo-dark {
  isolation: isolate;
  overflow: hidden;
  position: relative;
}
.duo-dark img {
  filter: grayscale(1) contrast(1.06) brightness(0.82);
}
.duo-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(165deg, #4A6B33 0%, #22301B 55%, #070905 100%);
  mix-blend-mode: color;
  pointer-events: none;
}
.duo-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(3, 5, 2, 0.5) 0%, rgba(3, 5, 2, 0.15) 45%, rgba(3, 5, 2, 0.72) 100%);
  pointer-events: none;
}
/* .mount: museum mount: pale mat, hairline, soft shadow */
.mount {
  background: #FBF9F4;
  border: 1px solid var(--hairline);
  padding: 10px;
  box-shadow: 0 18px 40px -22px rgba(26, 27, 30, 0.35);
}
.mount > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- .crop: cut one dish out of Steph's photo grids ----------
   The source photography arrives as contact grids. Each crop centres
   one grid cell inside its frame: --gx and --gy are the cell centre
   as a percentage of the source image, --zoom is the source width
   relative to the frame. main.js mirrors the same math on canvas. */
.crop {
  position: relative;
  overflow: hidden;
}
.crop img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--zoom, 330%);
  height: auto;
  max-width: none;
  transform: translate(calc(var(--gx, 50) * -1%), calc(var(--gy, 50) * -1%));
}
/* colour crops keep their appetite: no ink treatment */
.crop--colour img {
  filter: saturate(0.96) contrast(1.04);
}

/* ---------- Loader: the oven preheats ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader-readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}
.loader-temp {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  letter-spacing: 0.4em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: color 0.45s var(--ease), text-shadow 0.45s var(--ease);
}
.loader-temp.is-hot {
  color: var(--ember);
  text-shadow: 0 0 22px rgba(212, 85, 43, 0.18);
}
.loader-bar {
  position: relative;
  width: 180px;
  height: 1px;
  background: var(--hairline);
}
.loader-fill {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
}
.loader-label {
  font-size: 0.56rem;
}

/* ---------- Header (difference blend: ink on paper, paper on ink) ---------- */
.site-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.8rem 5vw;
  mix-blend-mode: difference;
  color: var(--paper);
  pointer-events: none;
}
.site-head a {
  pointer-events: auto;
}
.site-head .mono {
  color: rgba(239, 234, 226, 0.6);
}
.logo {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.3em;
  font-size: 1rem;
  color: var(--paper);
  text-decoration: none;
}

/* ---------- 1. Hero: the paper doors ---------- */
.hero {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 20vh;
  overflow: hidden;
}
/* two opaque paper panels carrying their own texture */
.door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.05%;
  z-index: 3;
  background-color: var(--paper);
  will-change: transform;
}
.door::before {
  content: '';
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.055;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.09' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23f)'/%3E%3C/svg%3E"),
    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' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 700px 700px, 240px 240px;
}
.door--l {
  left: 0;
}
.door--r {
  right: 0;
}
.door-seam {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  z-index: 4;
  background: var(--ink-faint);
  transform: scaleY(0);
  transform-origin: top;
}
.hero-inner,
.hero-strip,
.hero-corner,
.hero-note {
  z-index: 2;
}
.hero-inner {
  position: relative;
  text-align: center;
  padding: 0 4vw;
  margin-top: 4vh;
}
.hero-eyebrow {
  display: block;
  margin-bottom: 2.4rem;
}
.hero-title {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.7rem, 10.4vw, 10.4rem);
  line-height: 0.9;
  letter-spacing: 0.03em;
  color: var(--ink);
  white-space: nowrap !important;
}
.hero-title-main {
  position: relative;
  z-index: 2;
  display: inline-block;
}
.hero-title-main div {
  display: inline-block;
}
.hero-title-echo {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 0;
  color: var(--ember);
  opacity: 0;
  transform: translate(calc(-50% - 2px), 2px);
  pointer-events: none;
  white-space: nowrap;
}
.hero-sub {
  display: block;
  margin-top: 2.4rem;
}
/* contact sheet strip: a pyramid, big centre stepping down outward */
.hero-strip {
  position: absolute;
  bottom: 13vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.strip-frame {
  margin: 0;
  border: 1px solid var(--hairline);
  background: #FBF9F4;
  padding: 4px 4px 6px;
}
.strip-frame:nth-child(1),
.strip-frame:nth-child(5) {
  width: clamp(58px, 6vw, 86px);
}
.strip-frame:nth-child(2),
.strip-frame:nth-child(4) {
  width: clamp(84px, 8.5vw, 122px);
}
.strip-frame:nth-child(3) {
  width: clamp(118px, 12vw, 172px);
}
.strip-frame .crop {
  aspect-ratio: 4 / 3;
}
.strip-frame figcaption {
  margin-top: 5px;
  font-size: 0.5rem;
  text-align: center;
  letter-spacing: 0.3em;
}
.hero-corner {
  position: absolute;
  bottom: 8.5vh;
  font-size: 0.6rem;
}
.hero-corner--bl {
  left: 5vw;
}
.hero-corner--br {
  right: 5vw;
}
/* Not a scroll cue: the standing fact of the whole page. */
.hero-note {
  position: absolute;
  bottom: 3.6vh;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.58rem;
  text-align: center;
}

/* ---------- 1b. The hero in three dimensions ----------
   The wordmark and the contact sheet are re drawn on a WebGL canvas
   sitting exactly where the flat versions sit; the flat versions stay
   in the document, measured and read by screen readers, and are only
   made invisible once the scene reports it is up. Any failure leaves
   the flat hero alone. */
.hero-3d {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
body.hero-3d-failed .hero-3d {
  opacity: 0 !important;
  visibility: hidden !important;
}
body.hero-3d-on .hero-title-main,
body.hero-3d-on .hero-title-echo,
body.hero-3d-on .strip-frame {
  opacity: 0 !important;
}
body.hero-3d-on .hero {
  touch-action: pan-y;
}

/* ---------- 2. The Cook: the dark room behind the doors ---------- */
.bio {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: #17140F;
  color: var(--pale);
  padding: 16vh 8vw;
}
.bio-inner {
  width: 100%;
}
.bio-label {
  display: block;
  color: #E0B26A;
  margin-bottom: 8vh;
}
.bio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 6vw;
  align-items: center;
}
.bio-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 5.5vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--pale);
  margin-bottom: 3.2rem;
}
/* words start dim; scroll illuminates them (JS scrub) */
.bio-text {
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  font-weight: 300;
  line-height: 1.95;
  color: var(--pale);
  max-width: 52ch;
}
.bio-meta {
  display: block;
  margin-top: 2.6rem;
  color: rgba(232, 228, 220, 0.55);
}
/* a symmetric triptych: Steph centred and largest, mirrored flanks */
.bio-figures {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.8vw;
}
.bio-fig {
  margin: 0;
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
}
.bio-fig figcaption {
  padding-top: 8px;
  font-size: 0.5rem;
  text-align: center;
  letter-spacing: 0.26em;
  color: rgba(26, 27, 30, 0.72);
}
.bio-fig--side {
  z-index: 1;
  width: clamp(130px, 12vw, 200px);
  transform: rotate(-2deg);
}
.bio-fig--side .crop {
  aspect-ratio: 3 / 4;
}
.bio-fig--side-r {
  transform: rotate(2deg);
}
.bio-fig--mid {
  width: clamp(190px, 17vw, 280px);
  z-index: 2;
}
.bio-fig--mid img {
  aspect-ratio: 4 / 5;
  object-position: 50% 20%;
}

/* ---------- 2b. From past menus: pinned feed and player ---------- */
.marquee {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
  padding-top: 9vh;
}
/* the fixed playhead: every dish passes under this needle */
.playhead {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  transform: translateX(-50%);
}
.playhead-tick {
  color: var(--ember);
  font-size: 0.55rem;
  line-height: 1;
  margin-top: 2px;
}
.marquee-head {
  text-align: center;
  padding: 2.2vh 6vw 0;
  font-size: 0.58rem;
  color: var(--ink-dim);
}
.band {
  overflow: hidden;
  white-space: nowrap;
  padding: 2.8vh 0 3vh;
}
.band-track {
  display: inline-flex;
  will-change: transform;
}
.band-set {
  display: inline-flex;
  align-items: center;
  gap: 3.2vw;
  padding-right: 3.2vw;
}
/* each feed entry: display type name over a mono context line */
.feed-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  will-change: opacity;
}
.feed-item b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  letter-spacing: 0.06em;
  color: var(--ink);
  text-transform: uppercase;
  line-height: 1;
  will-change: font-variation-settings;
}
.feed-meta {
  font-size: 0.54rem;
  letter-spacing: 0.22em;
}
/* ---------- the player ---------- */
.player {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3vw;
  padding: 4vh 6vw 7vh;
}
.player-stage {
  position: relative;
  width: min(54vw, 660px);
  aspect-ratio: 16 / 11;
}
.player-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  will-change: transform, opacity;
}
.player-slide .crop {
  flex: 1;
  min-height: 0;
}
.player-slide figcaption {
  padding: 10px 4px 2px;
  font-size: 0.56rem;
  text-align: center;
  letter-spacing: 0.24em;
}
/* resting state: only the first plate is up (JS drives the rest) */
.player-slide:not(:first-child) {
  opacity: 0;
}
.player-btn {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid rgba(26, 27, 30, 0.3);
  border-radius: 999px;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  cursor: pointer;
  transition: border-color 0.5s var(--ease), background-color 0.5s var(--ease);
}
.player-btn:hover {
  border-color: var(--ember);
  background: rgba(212, 85, 43, 0.07);
}
.player-btn:active {
  transform: scale(0.96);
}
.player-count {
  position: absolute;
  bottom: 3.2vh;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- 3. How the week runs: chapter wipe ---------- */
.premise {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  z-index: 4;
  background: var(--paper);
}
/* the sweeping chapter panel: deep warm umber */
.wipe-panel {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #262019;
  display: flex;
  align-items: center;
  padding: 0 8vw;
  will-change: transform;
}
.premise-inner {
  width: 100%;
}
.premise-label {
  display: block;
  margin-bottom: 4vh;
  color: #E0B26A;
}
.wipe-panel .premise-time {
  color: rgba(232, 228, 220, 0.62);
}
.wipe-panel .premise-line {
  color: var(--pale);
}
/* mixed weight emphasis: the loud condensed display voice cutting
   through the quiet sans */
.premise-line em {
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.14em;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ember);
}
.premise-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 6vw;
  align-items: center;
}
.premise-rows {
  display: flex;
  flex-direction: column;
  gap: 1.9rem;
}
.premise-row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 3vw;
  align-items: baseline;
}
.premise-time {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.premise-line {
  display: block;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.7vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 32ch;
}
/* two disciplined ledger columns */
.premise-row:nth-child(1),
.premise-row:nth-child(4) {
  margin-left: 0;
}
.premise-row:nth-child(2),
.premise-row:nth-child(3) {
  margin-left: 8vw;
}
/* archival photo chips, fanned like pulled index cards */
.premise-chips {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.chip {
  width: clamp(120px, min(14vw, 19vh), 220px);
  margin: 0;
}
.chip:nth-child(1) {
  transform: rotate(-3deg) translateX(-18%);
}
.chip:nth-child(2) {
  transform: rotate(2deg) translateX(16%);
  margin-top: -8%;
}
.chip:nth-child(3) {
  transform: rotate(-1.5deg) translateX(-6%);
  margin-top: -8%;
}
.chip .crop {
  aspect-ratio: 4 / 5;
}
.chip figcaption {
  padding-top: 8px;
  font-size: 0.5rem;
  text-align: center;
  letter-spacing: 0.22em;
}

/* ---------- 4. The kitchen in numbers: offset index ---------- */
.numbers {
  position: relative;
}
.numbers-inner {
  width: 100%;
  padding: 18vh 8vw 20vh;
}
.numbers-label {
  display: block;
  color: var(--green);
  margin-bottom: 10vh;
}
.idx {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 2vw;
}
.idx-entry {
  position: relative;
  padding-top: 2.6vh;
}
.idx-rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ink-faint);
  transform: scaleX(0);
  transform-origin: left;
}
.idx-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.88;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.idx-meta {
  display: block;
  margin-top: 1.8rem;
  font-size: 0.62rem;
}
.idx-note {
  margin-top: 1.1rem;
  color: var(--ink-dim);
  font-size: clamp(0.78rem, 0.92vw, 0.96rem);
  line-height: 1.65;
}
/* the asymmetric spread: scales and columns all differ */
.idx-entry--1 {
  grid-column: 1 / 7;
}
.idx-entry--1 .idx-num {
  font-size: clamp(6rem, 14vw, 14rem);
}
.idx-entry--1 .idx-note {
  max-width: 39ch;
}
.idx-entry--2 {
  grid-column: 8 / 13;
  margin-top: 16vh;
}
.idx-entry--2 .idx-num {
  font-size: clamp(4rem, 8vw, 8rem);
}
.idx-entry--2 .idx-note {
  max-width: 22ch;
}
.idx-entry--3 {
  grid-column: 2 / 7;
  margin-top: 8vh;
}
.idx-entry--3 .idx-num {
  font-size: clamp(4rem, 8vw, 8rem);
}
.idx-entry--3 .idx-note {
  max-width: 34ch;
}
.idx-entry--4 {
  grid-column: 7 / 13;
  margin-top: 14vh;
}
.idx-entry--4 .idx-num {
  font-size: clamp(5.5rem, 12vw, 12rem);
  color: var(--ember);
}
.idx-entry--4 .idx-note {
  max-width: 27ch;
}
.idx-stamp {
  position: absolute;
  right: 0;
  top: 4.5vh;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  color: var(--ember-ink);
  border: 1px solid currentColor;
  padding: 0.45rem 0.9rem;
  transform: rotate(-6deg);
}

/* ---------- 5. The offers: sticky stack of full plates ---------- */
.recs {
  position: relative;
}
.rec {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
body.static-mode .rec {
  position: relative;
}
.rec-frame {
  position: absolute;
  inset: 0;
  will-change: transform, filter;
}
.rec-figure {
  position: absolute;
  inset: 0;
  margin: 0;
}
.rec-img {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  will-change: transform;
}
.rec-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 5vw 9vh;
  color: var(--pale);
}
.rec-overlay .mono {
  color: rgba(232, 228, 220, 0.66);
}
.rec-no {
  display: block;
  margin-bottom: auto;
  padding-top: 16vh;
}
.rec-statement {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--pale);
  margin-bottom: 2.2rem;
}
.rec-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.5rem;
  font-size: 0.62rem;
}
/* statuses stay legible on the dark plates */
.rec-meta .status--returning {
  color: #E0B26A;
}
.rec-meta .status--thisweek {
  color: #A9CE8E;
}
.rec-meta .status--soldout {
  color: #F09268;
}
.rec-view-hold {
  height: 18vh;
}
.rec-hold {
  height: 22vh;
}

/* ---------- 6. The catalogue: archive light table ---------- */
.catalogue {
  position: relative;
  z-index: 8;
  min-height: 100vh;
  overflow: hidden;
  background: var(--paper-deep);
  box-shadow: 0 -28px 80px rgba(26, 27, 30, 0.22);
}
.light-table {
  position: relative;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 52% 44%, rgba(255, 253, 247, 0.54), transparent 37%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.18), transparent 46%),
    var(--paper-deep);
}
.light-table::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(26, 27, 30, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 27, 30, 0.035) 1px, transparent 1px);
  background-size: 8vw 8vw;
}
.light-intro {
  position: absolute;
  top: 7vh;
  left: 5vw;
  z-index: 20;
}
.cat-label {
  display: block;
  color: var(--green);
}
.cat-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.8rem, 5.2vw, 5.2rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 1.4rem 0;
  color: var(--ink);
}
.cat-hint {
  color: var(--ink-dim);
}
.archive-record {
  position: absolute;
  z-index: 5;
  width: clamp(128px, 13vw, 218px);
  margin: 0;
  padding: 8px;
  transform-origin: 50% 50%;
  will-change: transform, opacity, filter, box-shadow;
  backface-visibility: hidden;
}
/* GSAP lowers this ink wash only on the record under the light,
   letting that dish's natural colour come through. */
.archive-record .rec-duo {
  --duo-opacity: 0.72;
}
.archive-record .rec-duo::before {
  opacity: var(--duo-opacity, 0.72);
}
.archive-record .crop {
  aspect-ratio: 4 / 5;
}
.archive-record figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  padding: 8px 2px 2px;
}
.archive-record--1 {
  left: 28vw;
  top: 31vh;
  transform: rotate(-1.4deg);
}
.archive-record--2 {
  left: 50vw;
  top: 11vh;
  width: clamp(120px, 11.5vw, 194px);
  transform: rotate(1.2deg);
}
.archive-record--3 {
  left: 6vw;
  top: 55vh;
  width: clamp(120px, 12vw, 202px);
  transform: rotate(1.7deg);
}
.archive-record--4 {
  left: 46vw;
  top: 55vh;
  width: clamp(132px, 14vw, 232px);
  transform: rotate(-0.8deg);
}
.archive-record--5 {
  left: 70vw;
  top: 51vh;
  width: clamp(124px, 12.5vw, 210px);
  transform: rotate(1.5deg);
}
.archive-record--6 {
  left: 82vw;
  top: 16vh;
  width: clamp(112px, 10.5vw, 180px);
  transform: rotate(-1.1deg);
}
.card-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.75rem, 0.9vw, 0.95rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.card-meta {
  font-size: 0.58rem;
  letter-spacing: 0.14em;
}
.inspection-light {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 15;
  width: clamp(230px, 30vw, 500px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 253, 246, 0.78) 0%, rgba(255, 253, 246, 0.28) 42%, transparent 70%);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.inspection-light span {
  position: absolute;
  inset: 21%;
  border: 1px solid rgba(26, 27, 30, 0.14);
  border-radius: 50%;
}
.light-endcap {
  position: absolute;
  z-index: 20;
  bottom: 6vh;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  opacity: 0;
}
/* stacked fallback (mobile / reduced motion / static) */
.catalogue--stack .light-table {
  height: auto;
  padding: 14vh 8vw;
  display: flex;
  flex-direction: column;
  gap: 9vh;
  align-items: center;
}
.catalogue--stack .light-intro {
  position: static;
  align-self: flex-start;
}
.catalogue--stack .archive-record {
  position: static;
  width: min(100%, 380px);
  transform: none;
}
.catalogue--stack .light-endcap {
  position: static;
  transform: none;
  opacity: 1;
}
.catalogue--stack .cat-hint {
  display: none;
}
.catalogue--stack .inspection-light {
  display: none;
}

/* ---------- 6.5 The breath before the dark room ---------- */
.beat {
  position: relative;
  z-index: 9;
  height: 100vh;
  margin-top: -10vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
}
.beat-inner {
  position: relative;
  z-index: 5;
  will-change: transform, opacity, filter;
}
.beat-line {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 5rem);
  line-height: 0.9;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
}
.beat-line span {
  display: block;
}
.beat-line-lead {
  font-weight: 450;
  font-size: 0.72em;
  line-height: 1;
  letter-spacing: 0.095em;
}
.beat-line-final {
  margin-top: 0.14em;
  font-weight: 850;
  font-size: 1.12em;
  line-height: 0.88;
  letter-spacing: -0.012em;
  color: var(--ember);
}
.beat-imgs {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  will-change: transform, opacity, filter;
}
.beat-img {
  position: absolute;
  top: 50%;
  width: clamp(260px, 30vw, 480px);
  margin: 0;
  transform: translateY(-50%);
  will-change: transform, opacity, filter;
}
.beat-img--a {
  left: 4vw;
  rotate: -1.5deg;
}
.beat-img--b {
  right: 4vw;
  rotate: 1.5deg;
}
.beat-img .crop {
  aspect-ratio: 4 / 3;
}
.beat-blackout {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: #0A0A0C;
  opacity: 0;
  will-change: opacity;
}

/* ---------- 7. The dark room: waiting for Thursday ---------- */
.silence {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0A0A0C;
}
.silence-img-wrap {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: blur(16px);
  transform: scale(1.035);
  will-change: opacity, filter, transform;
}
.silence-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
}
.silence-img-wrap.duo-dark::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.85) 100%);
}
.silence-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 6vw;
}
.silence-status {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.38em;
  color: var(--ember);
}
.silence-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.8rem, 7vw, 7rem);
  line-height: 0.94;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--pale);
  margin: 4vh 0 3vh;
}
.silence-title div {
  display: inline-block;
}
.silence-meta {
  font-size: 0.6rem;
  color: rgba(232, 228, 220, 0.55);
}
/* the live countdown: her site's real clock, kept */
.silence-count {
  display: block;
  margin-top: 2.4vh;
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: clamp(1rem, 2vw, 1.6rem);
  letter-spacing: 0.3em;
  color: var(--pale);
  font-variant-numeric: tabular-nums;
}

/* ---------- 8. The wall of love ---------- */
.log {
  position: relative;
  min-height: 100vh;
  padding: 12vh 8vw 10vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.log-head {
  width: min(84ch, 78vw);
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: 4.5vh;
}
.log-label {
  color: var(--green);
}
.log-intro {
  max-width: 50ch;
  color: var(--ink-dim);
  font-size: clamp(0.76rem, 0.9vw, 0.9rem);
  line-height: 1.65;
  letter-spacing: 0.035em;
}
.log-feed {
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 2.2vh, 2rem);
  width: min(84ch, 78vw);
}
.log-entry {
  position: relative;
  display: grid;
  grid-template-columns: clamp(82px, 6.5vw, 104px) minmax(0, 1fr);
  gap: clamp(1.6rem, 2.4vw, 2.8rem);
  min-height: clamp(92px, 11vh, 118px);
  align-items: center;
  border-left: 1px solid var(--hairline);
  padding: 0.8rem 8.5rem 0.8rem clamp(1.6rem, 2.4vw, 2.8rem);
  transform-origin: left center;
  will-change: transform, opacity;
}
.log-thumb {
  width: clamp(82px, 6.5vw, 104px);
  height: clamp(82px, 6.5vw, 104px);
  margin: 0;
  border: 1px solid var(--hairline);
  transform-origin: center;
  will-change: transform;
}
.log-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.86) contrast(1.03);
}
.log-date {
  margin-bottom: 0.75rem;
  color: var(--ink-dim);
}
.log-text {
  max-width: 60ch;
  font-size: clamp(0.86rem, 1vw, 1rem);
  letter-spacing: 0.04em;
  line-height: 1.72;
  text-transform: none;
  color: var(--ink);
}
.log-stamp {
  position: absolute;
  top: 50%;
  right: 0;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  padding: 0.45rem 0.9rem;
  border: 1px solid currentColor;
  transform: translateY(-50%) rotate(-4deg);
  opacity: 0.9;
  background: var(--paper);
  color: var(--ember-ink);
}

/* ---------- 9. The weekly service ---------- */
.method {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 14vh 7vw;
}
.method-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 6vw;
  align-items: center;
  width: 100%;
}
.method-label {
  display: block;
  color: var(--green);
  margin-bottom: 3rem;
}
.method-title {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: clamp(2.6rem, 5.5vw, 5.2rem);
  line-height: 0.94;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 2.4rem;
}
.method-title-line {
  display: block;
  overflow: hidden;
}
.method-title-line > span {
  display: block;
}
.method-body {
  font-size: clamp(0.98rem, 1.3vw, 1.1rem);
  line-height: 1.9;
  color: var(--ink-dim);
  max-width: 44ch;
}
.method-note {
  margin-top: 2.6rem;
  max-width: 40ch;
  font-size: clamp(0.86rem, 1vw, 0.98rem);
  line-height: 1.8;
  color: var(--ink);
}
.method-sig {
  display: block;
  margin-top: 1.6rem;
  width: clamp(120px, 12vw, 190px);
  clip-path: inset(0 100% 0 0);
}
.method-figure {
  position: relative;
  width: min(100%, 760px);
  margin: 0 0 0 auto;
}
.method-figure .crop {
  aspect-ratio: 4 / 3;
}
.method-figure > figcaption {
  margin-top: 1.2rem;
  font-size: 0.58rem;
}

/* ---------- 10. Footer ---------- */
.footer {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10vh 6vw;
  overflow: hidden;
  isolation: isolate;
  background: #15110F;
  color: var(--pale);
}
.footer-signal {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 46%;
  width: min(92vw, 1100px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(212, 85, 43, 0.28) 0%,
      rgba(112, 49, 27, 0.18) 26%,
      rgba(21, 17, 15, 0) 68%);
  transform: translate(-50%, -50%) scale(0.35);
  opacity: 0;
  will-change: transform, opacity;
}
.footer-kicker {
  margin-bottom: 2.2rem;
  color: rgba(232, 228, 220, 0.55);
}
.footer-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.2rem, 10vw, 9.5rem);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 3.4rem;
  color: var(--pale);
}
.footer-title-line {
  display: block;
}
.footer-title-line:first-child {
  font-weight: 500;
  font-size: 0.66em;
  line-height: 1.03;
  letter-spacing: 0.075em;
}
.footer-title-accent {
  color: var(--ember);
  font-weight: 850;
}
.magnetic-wrap {
  padding: 2.4rem;
  display: inline-block;
}
.magnetic-btn {
  position: relative;
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--pale);
  background: transparent;
  border: 1px solid rgba(232, 228, 220, 0.38);
  border-radius: 999px;
  padding: 1.4rem 3.2rem;
  transition: border-color 0.6s var(--ease), box-shadow 0.6s var(--ease), background-color 0.6s var(--ease);
}
.magnetic-btn:hover {
  border-color: var(--ember);
  background: rgba(212, 85, 43, 0.06);
  box-shadow: 0 0 34px rgba(212, 85, 43, 0.14);
}
.magnetic-label {
  display: inline-block;
}
.footer-bottom {
  position: absolute;
  bottom: 4vh;
  left: 5vw;
  right: 5vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
}
.footer-mark {
  justify-self: start;
  color: var(--pale);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-decoration: none;
}
.footer-meta {
  color: rgba(232, 228, 220, 0.55);
  font-size: 0.6rem;
  white-space: nowrap;
}
.footer-links {
  justify-self: end;
  display: flex;
  gap: clamp(1rem, 2vw, 2rem);
}
.footer-links a {
  color: rgba(232, 228, 220, 0.64);
  text-decoration: none;
  transition: color 0.45s var(--ease);
}
.footer-links a:hover {
  color: var(--ember);
}

/* ---------- Scroll progress meter ---------- */
.progress {
  position: fixed;
  z-index: 40;
  left: 5vw;
  bottom: 3.4vh;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--ember-ink);
  opacity: 0;
}
.progress .mono {
  color: var(--ember-ink);
}
body:not(.loading) .progress {
  opacity: 1;
  transition: opacity 1s ease;
}
.progress-track {
  position: relative;
  width: 20vw;
  max-width: 220px;
  height: 1px;
  background: rgba(212, 85, 43, 0.28);
}
.progress-fill {
  position: absolute;
  inset: 0;
  background: var(--ember);
  box-shadow: 0 0 12px rgba(212, 85, 43, 0.38);
  transform: scaleX(0);
  transform-origin: left;
}

/* ---------- Static mode: everything readable with no scripting ---------- */
body.static-mode .door,
body.static-mode .door-seam,
body.static-mode .loader {
  display: none;
}
body.static-mode .hero-title-echo {
  opacity: 0.55;
}
body.static-mode .premise {
  min-height: auto;
}
body.static-mode .wipe-panel {
  position: relative;
  inset: auto;
  padding-block: 14vh;
}
body.static-mode .player {
  flex-direction: column;
}
body.static-mode .player-stage {
  width: min(88vw, 660px);
  aspect-ratio: auto;
}
body.static-mode .player-slide {
  position: static;
  opacity: 1 !important;
  margin-bottom: 2rem;
}
body.static-mode .player-btn,
body.static-mode .player-count {
  display: none;
}
body.static-mode .idx-rule {
  transform: scaleX(1);
}
body.static-mode .beat {
  margin-top: 0;
}
body.static-mode .beat-blackout {
  display: none;
}
body.static-mode .silence-img-wrap {
  opacity: 0.55;
  filter: none;
  transform: none;
}
body.static-mode .footer-signal {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
body.static-mode .method-sig {
  clip-path: none;
}
body.static-mode .light-endcap {
  opacity: 1;
}
body.static-mode .log,
body.static-mode .footer {
  height: auto;
  min-height: 100vh;
}
body.static-mode .progress {
  display: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .method-grid {
    grid-template-columns: 1fr;
    gap: 7vh;
  }
  .premise-grid {
    grid-template-columns: 1fr;
    gap: 8vh;
  }
  .premise-chips {
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
  }
  .chip:nth-child(n) {
    transform: none;
    margin-top: 0;
  }
  .bio-grid {
    grid-template-columns: 1fr;
    gap: 10vh;
  }
  .bio-fig--side {
    width: 24vw;
  }
  .bio-fig--mid {
    width: 34vw;
  }
  .method-figure {
    width: 100%;
    margin: 0;
  }
}
@media (max-width: 768px) {
  .head-meta {
    display: none;
  }
  .hero {
    padding-bottom: 26vh;
  }
  .hero-strip {
    gap: 0.6rem;
    bottom: 15vh;
  }
  .strip-frame:nth-child(n) {
    width: 15vw;
  }
  .premise {
    padding: 0;
    min-height: auto;
  }
  .wipe-panel {
    position: relative;
    inset: auto;
    padding: 14vh 8vw;
    align-items: flex-start;
  }
  .premise-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .premise-row:nth-child(2),
  .premise-row:nth-child(3) {
    margin-left: 4vw;
  }
  .premise-row:nth-child(4) {
    margin-left: 0;
  }
  .numbers-inner {
    padding: 14vh 8vw;
  }
  .idx {
    display: block;
  }
  .idx-entry,
  .idx-entry--1,
  .idx-entry--2,
  .idx-entry--3,
  .idx-entry--4 {
    margin-top: 9vh;
  }
  .idx-entry--1 {
    margin-top: 0;
  }
  .idx-stamp {
    top: auto;
    bottom: 1vh;
  }
  .beat {
    margin-top: -6vh;
  }
  .beat-img {
    width: 40vw;
  }
  .beat-img--a {
    left: 2.5vw;
  }
  .beat-img--b {
    right: 2.5vw;
  }
  .rec-overlay {
    padding: 0 7vw 7vh;
  }
  .rec-meta {
    flex-direction: column;
    gap: 0.5rem;
  }
  .marquee {
    padding-top: 7vh;
  }
  .player {
    gap: 3vw;
    padding: 3vh 4vw 8vh;
  }
  .player-stage {
    width: 72vw;
  }
  .player-btn {
    width: 42px;
    height: 42px;
  }
  .log {
    height: auto;
    min-height: 100vh;
    padding: 16vh 8vw;
    overflow: visible;
  }
  .log-head,
  .log-feed {
    width: 100%;
  }
  .log-head {
    grid-template-columns: 1fr;
    gap: 1.4rem;
    margin-bottom: 8vh;
  }
  .log-feed {
    gap: 7vh;
  }
  .log-entry {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 1.4rem;
    min-height: 0;
    padding: 1rem 0 1rem 1.4rem;
  }
  .log-thumb {
    width: 84px;
    height: 84px;
  }
  .log-stamp {
    position: static;
    display: inline-block;
    grid-column: 2;
    margin-top: 0.4rem;
    justify-self: start;
    transform: rotate(-4deg);
  }
  .footer {
    min-height: 100svh;
    height: auto;
    padding-block: 16vh 20vh;
  }
  .footer-bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 1.2rem;
  }
  .footer-mark,
  .footer-links {
    justify-self: center;
  }
  .footer-meta {
    white-space: normal;
  }
  .progress {
    display: none;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .band-track {
    transform: none !important;
  }
  .progress {
    display: none;
  }
  .silence-img-wrap {
    opacity: 0.5;
    filter: none;
    transform: none;
  }
  .silence-img {
    transform: none;
  }
  .method-sig {
    clip-path: none;
  }
}