/* ============================================================================
   BRC Day Spa & Sauna Resort — Track A v3 "Banya"

   PALETTE — taken off BRC's own interiors, not off a mood board. The burgundy
   is the buttoned leather in the lounges (DSC_6975, DSC_6989) and the awnings
   over the door; the mortar is the travertine bond in the relaxation room; the
   ember is carried down from the hero film; the slate is the cold water.

     --oxblood     #35101B   chassis
     --wine        #5A1B29   raised plates and panels
     --mortar      #4A3833   the tile wall's grout ground
     --ember       #E4711E   heat  — fills only (5.38:1 on oxblood)
     --plunge      #93B3C1   cold  — wet slate (7.62:1 on oxblood)
     --travertine  #EFE4D3   light and primary text (13.46:1 on oxblood)

   Steps derived from those six: --ember-lt (the ember TEXT step, so ember copy
   clears 4.5:1 on wine and mortar too), --travertine-dim, --ink, --brass.

   TYPE — Fira Sans Extra Condensed 800 for display, set in caps with the
   proportions of an enamel sign; Golos Text for reading. Both carry full
   Cyrillic, which the banya vocabulary on this page actually needs.

   Verified: every body-copy pairing on this page is 4.9:1 or better.
   ========================================================================= */

:root {
  --oxblood: #35101B;
  --wine: #5A1B29;
  --mortar: #6E584E;
  --ember: #E4711E;
  --plunge: #93B3C1;
  --travertine: #EFE4D3;

  --ember-lt: #F0913F;
  --travertine-dim: #CDBBA6;
  --ink: #210A12;
  --brass: #B98E3E;

  --display: "Fira Sans Extra Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --text: "Golos Text", "Segoe UI", system-ui, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --grout: 5px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--oxblood);
  color: var(--travertine);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: 0.005em;
}

p { margin: 0; }
img, video { max-width: 100%; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--ember-lt);
  outline-offset: 3px;
}
/* The ember band is the one ground the ember ring disappears against
   (1.32:1). On it the ring goes to ink instead — 5.98:1. */
.close :focus-visible { outline-color: var(--ink); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background-color: var(--ember);
  color: var(--ink);
  padding: 0.85rem 1.4rem;
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { left: 0.75rem; top: 0.75rem; }

.wrap {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

section[id] { scroll-margin-top: 6rem; }

/* ── Shared type roles ────────────────────────────────────────────────── */

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  color: var(--plunge);
}

.sec-title, .day h2, .venik h2, .rooms h2, .kitchen h2, .visit h2 {
  margin-top: 1.1rem;
  font-size: clamp(2.75rem, 6.6vw, 5.5rem);
  line-height: 0.88;
  text-transform: uppercase;
  color: var(--travertine);
}

.lede {
  margin-top: 1.5rem;
  max-width: 36rem;
  font-size: 1.1875rem;
  line-height: 1.58;
  color: var(--travertine-dim);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  border: 0;
  border-radius: 0;
  padding: 0.92rem 1.7rem;
  font-family: var(--display);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: background-color 200ms var(--ease), color 200ms var(--ease),
              border-color 200ms var(--ease);
}
.btn--lg { padding: 1.1rem 2.2rem; font-size: 1.375rem; }
/* A plate is a flex column, so `auto` drops its call to action to the floor —
   plates of unequal copy length still line their buttons up. The gap above is
   carried by the note, since an auto margin collapses when space runs out. */
.btn--block { display: block; margin-top: auto; text-align: center; }
.plate .plate__note:has(+ .btn--block) { margin-bottom: 1.6rem; }

.btn--ember { background-color: var(--ember); color: var(--ink); }
.btn--ember:hover { background-color: var(--ember-lt); }

.btn--brass { background-color: var(--brass); color: var(--ink); }
.btn--brass:hover { background-color: #CBA054; }

.btn--ink { background-color: var(--ink); color: var(--travertine); }
.btn--ink:hover { background-color: var(--oxblood); }

.btn--ghost {
  border: 1px solid rgba(239, 228, 211, 0.5);
  color: var(--travertine);
}
.btn--ghost:hover { border-color: var(--ember-lt); color: var(--ember-lt); }

.link {
  color: var(--ember-lt);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
.link:hover { color: var(--travertine); }

/* ── Masthead ─────────────────────────────────────────────────────────── */

.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1.1rem 1.5rem;
  transition: background-color 380ms var(--ease);
}
/* A soft scrim that bleeds below the bar so the nav survives the bright steam
   at the top of the film. It retires once the solid bar takes over. */
.masthead::before {
  content: "";
  position: absolute;
  inset: 0 0 -2.75rem 0;
  z-index: -1;
  background-image: linear-gradient(to bottom,
    rgba(23, 6, 11, 0.86) 0%, rgba(23, 6, 11, 0.44) 50%, rgba(23, 6, 11, 0) 100%);
  transition: opacity 380ms var(--ease);
}
.masthead.is-stuck {
  background-color: rgba(33, 10, 18, 0.95);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(185, 142, 62, 0.28);
}
.masthead.is-stuck::before { opacity: 0; }

.mark { text-decoration: none; display: grid; gap: 0.1rem; }
.mark__brc {
  display: block;
  font-family: var(--display);
  font-size: 1.875rem;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: 0.06em;
  color: var(--travertine);
}
.mark__sub {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--travertine-dim);
}

.masthead__nav { display: flex; justify-content: center; gap: 2.25rem; }
.masthead__nav a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--travertine-dim);
  text-decoration: none;
  transition: color 180ms var(--ease);
}
.masthead__nav a:hover { color: var(--ember-lt); }

.masthead__act { display: flex; align-items: center; gap: 1.4rem; }
.tel {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--travertine-dim);
  text-decoration: none;
}
.tel:hover { color: var(--ember-lt); }

/* ══ HERO — approved, unchanged apart from the palette variables ═══════ */

.hero { position: relative; }

.hero__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: var(--oxblood);
  contain: paint;
  clip-path: inset(0);
}
.hero__poster,
.hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms var(--ease);
}
.has-scrub .hero__video,
.has-scrub .hero__poster {
  transform: scale(calc(1.17 - var(--p, 0) * 0.17));
  transform-origin: 58% 46%;
}
.is-video-ready .hero__video { opacity: 1; }

.hero__scrim {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top,
    rgba(27, 8, 14, 0.94) 0%,
    rgba(27, 8, 14, 0.58) 30%,
    rgba(27, 8, 14, 0.05) 60%,
    rgba(27, 8, 14, 0.40) 100%);
  opacity: calc(0.70 + var(--p, 0) * 0.26);
}

.hero__steam {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(16px);
  background-image:
    radial-gradient(58% 42% at 28% 76%, rgba(239, 228, 211, 0.34), rgba(239, 228, 211, 0) 70%),
    radial-gradient(44% 34% at 66% 58%, rgba(239, 228, 211, 0.26), rgba(239, 228, 211, 0) 72%),
    radial-gradient(72% 46% at 52% 98%, rgba(228, 113, 30, 0.28), rgba(228, 113, 30, 0) 74%);
  opacity: calc(0.16 + var(--p, 0) * 0.84);
  transform: translate3d(0, calc(var(--p, 0) * -17vh), 0) scale(calc(1 + var(--p, 0) * 0.55));
}

.hero__copy { padding: 3.25rem 1.5rem 4rem; }
.chapters { max-width: 46rem; }
.chapter + .chapter { margin-top: 3.5rem; }

.chapter h1,
.chapter h2 {
  font-size: clamp(3rem, 8.2vw, 6.75rem);
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--travertine);
}
.chapter__lede {
  margin-top: 1.4rem;
  max-width: 34rem;
  font-size: 1.1875rem;
  line-height: 1.58;
  color: var(--travertine-dim);
}
.chapter__act { margin-top: 2.1rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }

.rail, .cue { display: none; }

/* Runway. 560vh was too long: the film finished, but reaching the end took so
   much wheel that readers scrolled hard to get through it — and a hard scroll
   is exactly what a scrub handles worst. 420vh keeps the turn legible while
   putting the end of the film within a comfortable reach. */
.has-scrub .hero { height: 420vh; }

.has-scrub .hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
}
.has-scrub .hero__media { position: absolute; inset: 0; aspect-ratio: auto; }
.has-scrub .hero__poster { position: absolute; inset: 0; }

.has-scrub .hero__copy { position: absolute; inset: auto 0 0 0; padding: 0 2rem 4.5rem; }
.has-scrub .chapters {
  position: relative;
  min-height: 21rem;
  margin-inline: auto;
  max-width: 74rem;
}
.has-scrub .chapter {
  position: absolute;
  inset: auto 0 0 0;
  max-width: 46rem;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.has-scrub .chapter--1 { opacity: 1; }
.has-scrub .chapter + .chapter { margin-top: 0; }
.has-scrub .chapter.is-live { pointer-events: auto; }

.has-scrub .rail {
  position: absolute;
  right: 2.4rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 3.4rem;
  margin: 0;
  padding: 0 0 0 1.6rem;
  list-style: none;
}
.rail__item {
  display: grid;
  gap: 0.1rem;
  opacity: 0.34;
  transition: opacity 380ms var(--ease);
}
.rail__item.is-live { opacity: 1; }
.rail__ru {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ember-lt);
}
.rail__en {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--travertine);
}
.rail__track {
  position: absolute;
  left: 0;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 2px;
  background-color: rgba(239, 228, 211, 0.2);
}
.rail__fill {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: top center;
  transform: scaleY(var(--p, 0));
  background-image: linear-gradient(to bottom, var(--ember-lt), var(--ember));
}

.has-scrub .cue {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--travertine-dim);
  opacity: calc(1 - var(--p, 0) * 8);
}
.cue__line {
  display: block;
  width: 2.6rem;
  height: 1px;
  background-color: rgba(205, 187, 166, 0.6);
}

/* ══ A DAY HERE ════════════════════════════════════════════════════════ */

.day { padding: 7.5rem 0 7rem; }

.day__head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 3rem 4.5rem;
  align-items: start;
}

/* ── The plate: an enamel sign. Brass rule at the head, nothing rounded. ── */

.plate {
  display: flex;
  flex-direction: column;
  background-color: var(--wine);
  border-top: 3px solid var(--brass);
  padding: 1.9rem 1.75rem 2rem;
}
.plate__label {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--travertine);
}
.plate p { color: var(--travertine-dim); }
.plate p + p { margin-top: 0.9rem; }
.plate__note {
  margin-top: 1.1rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--travertine-dim);
}
/* Stands where the booking button used to be on the admission plate: admission is sold at the desk only. */
.plate p.plate__note--strong {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--brass);
  color: var(--travertine);
  font-weight: 600;
}
.plate__price {
  margin-top: 1.2rem;
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.plate p.plate__price { color: var(--ember-lt); }

.fare { margin: 1.25rem 0 0; }
.fare__row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(185, 142, 62, 0.28);
}
.fare__row:first-child { border-top: 1px solid rgba(185, 142, 62, 0.28); }
.fare dt { flex: 1 1 auto; font-size: 0.9375rem; color: var(--travertine-dim); }
.fare dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  color: var(--travertine);
  font-variant-numeric: tabular-nums;
}

/* ── The six stations. Six equal plates, so there is no ragged edge and
      nothing to fill with air. ────────────────────────────────────────── */

.stations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 4.5rem 0 0;
  padding: 0;
  list-style: none;
}
.station {
  background-color: var(--wine);
  border-top: 3px solid var(--ember);
  padding: 1.6rem 1.6rem 1.8rem;
}
.station:nth-child(4) { border-top-color: var(--plunge); }
.station:nth-child(5),
.station:nth-child(6) { border-top-color: var(--brass); }

.station__name { display: grid; gap: 0.15rem; }
.station__en {
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--ember-lt);
}
.station:nth-child(4) .station__en { color: var(--plunge); }
.station__ru {
  font-size: 0.75rem;
  font-family: var(--text);
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--travertine);
}
.station p {
  margin-top: 0.9rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--travertine-dim);
}

/* ══ THE VENIK ═════════════════════════════════════════════════════════ */

.venik {
  position: relative;
  padding: 6.5rem 0;
  background-color: var(--ink);
  contain: paint;
}
.venik__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}
/* The cedar corridor is a ground, not a picture — hold it back far enough for
   the copy to sit on it, but not so far that the wood stops reading as wood. */
.venik::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(100deg,
    rgba(33, 10, 18, 0.93) 0%, rgba(33, 10, 18, 0.86) 38%, rgba(33, 10, 18, 0.62) 100%);
}
.venik__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem 4.5rem;
  align-items: center;
}
.venik h2 { margin-top: 1rem; }
.venik__ru {
  margin-top: 0.75rem;
  font-family: var(--display);
  /* Half the English heading at every width (was clamp(2.5rem, 5vw, 4rem), nearly as big as it on phones). */
  font-size: clamp(1.5rem, 3.4vw, 2.75rem);
  font-weight: 800;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--ember-lt);
}
.plate--venik { border-top-color: var(--ember); }

/* ══ THE ROOMS — the mosaic wall ═══════════════════════════════════════ */
/*
   BRC's own surfaces are travertine laid in a bond with one framed mosaic
   panel set into it — it is on the wall of the relaxation room and above the
   ice plunge. The rooms are laid out on that bond: a wide lintel, a pilaster,
   a course of field slabs, a water line, and a base course, separated by 4px
   of mortar. Every module is a photograph, and the block tiles the 12x13 grid
   exactly, so nothing is ragged and there is no hole to fill.
*/

.rooms { padding: 7.5rem 0 7rem; }
.rooms__head { max-width: 58rem; }

.bond-wrap {
  max-width: 88rem;
  margin: 4rem auto 0;
  padding: 0 1.5rem;
}
.bond {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 8.5rem;
  gap: var(--grout);
  margin: 0;
  padding: 9px;
  list-style: none;
  background-color: var(--mortar);
}

.slab {
  position: relative;
  background-color: var(--ink);
  contain: paint;
}
.slab__art { position: absolute; inset: 0; }
.slab__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 260ms var(--ease);
}
/* One veil over every module, so nine photographs shot on different days read
   as one wall rather than nine unrelated pictures. */
.slab__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(53, 16, 27, 0.14);
  mix-blend-mode: multiply;
}
.slab:hover .slab__img { transform: scale(1.035); }

/* The caption is a plate fixed to the foot of its module, sized by its own
   copy rather than by the module. A scrim keyed to the tile height leaves the
   top line of a short caption sitting on whatever the photograph happens to be
   doing there; keyed to the caption, every line clears the same margin —
   measured worst case 11.6:1 rather than 1.7:1 over a pool highlight. */
.slab__cap {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: 3.25rem 1.35rem 1.3rem;
  background-image: linear-gradient(to top,
    rgba(27, 8, 14, 0.95) 0%,
    rgba(27, 8, 14, 0.95) calc(100% - 3.25rem),
    rgba(27, 8, 14, 0) 100%);
}
.slab__cap h3 {
  font-size: 1.5rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--travertine);
}
.slab__cap p {
  margin-top: 0.5rem;
  max-width: 32rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--travertine-dim);
}
.slab__price {
  font-family: var(--display);
  font-size: 1.1875rem;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.slab__cap p.slab__price { margin-top: 0.7rem; color: var(--ember-lt); }

/* The bond. Row 1 at the top of the wall, row 13 at the floor. */
.slab--salt     { grid-column: 1 / 9;  grid-row: 1 / 3; }
.slab--cryo     { grid-column: 9 / 13; grid-row: 1 / 8; }
.slab--float    { grid-column: 1 / 5;  grid-row: 3 / 6; }
.slab--infrared { grid-column: 5 / 9;  grid-row: 3 / 6; }
.slab--pool     { grid-column: 1 / 9;  grid-row: 6 / 8; }
.slab--plunge   { grid-column: 1 / 5;  grid-row: 8 / 11; }
.slab--hydro    { grid-column: 5 / 9;  grid-row: 8 / 11; }
.slab--vip      { grid-column: 9 / 13; grid-row: 8 / 11; }
.slab--relax    { grid-column: 1 / 13; grid-row: 11 / 14; }

/* The salt room is the one promoted panel — the framed mosaic in the bond.
   Brass surround, and the colour genuinely cycles, so it is documentary. */
.slab--salt { outline: 2px solid var(--brass); outline-offset: -2px; }
.slab--salt .slab__cap { max-width: 34rem; }

.slab__img--alt {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: saltcycle 17s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes saltcycle {
  0%, 34% { opacity: 0; }
  46%, 84% { opacity: 1; }
  96%, 100% { opacity: 0; }
}

/* On the wide modules the plate stops at a readable measure instead of running
   the whole course, so the label sits on the tile the way an enamel sign does
   rather than banding it. */
.slab--pool .slab__cap,
.slab--relax .slab__cap { max-width: 34rem; }

.quote {
  margin: 6rem 0 0;
  padding: 2.25rem 0 0;
  border-top: 3px solid var(--ember);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3.35fr);
  gap: 1rem 3.5rem;
  align-items: start;
}
.quote p {
  font-family: var(--display);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.34;
  color: var(--travertine);
}
.quote__by { display: grid; gap: 0.3rem; }
.quote__who,
.quote__where {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.quote__who { color: var(--plunge); }
.quote__where { color: var(--travertine-dim); letter-spacing: 0.14em; }

/* ══ THE KITCHEN — a price board, not a card grid ══════════════════════ */

.kitchen {
  background-color: var(--ink);
  padding: 7.5rem 0 7rem;
}
.kitchen__head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 2.5rem 4.5rem;
  align-items: end;
}

/* The four menus, listed like a directory rather than dropped in as buttons. */
.menus { display: grid; }
.menus a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(185, 142, 62, 0.35);
  color: var(--travertine);
  text-decoration: none;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.menus a:first-child { border-top: 1px solid rgba(185, 142, 62, 0.35); }
.menus a:hover { color: var(--ember-lt); border-bottom-color: var(--ember); }
.menus__name {
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}
.menus__n {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--travertine-dim);
}

.board {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.75rem 4.5rem;
}
.course__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--brass);
}
.course__en {
  font-size: 1.875rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ember-lt);
}
.course__ru {
  font-family: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--travertine-dim);
}

.menu { margin: 0.35rem 0 0; }
.menu__row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.5rem 0;
}
/* Leader dots between dish and price — the vernacular of a real board. */
.menu__row::after {
  content: "";
  order: 1;
  flex: 1 1 auto;
  min-width: 1.5rem;
  height: 0;
  margin-bottom: 0.28em;
  border-bottom: 1px dotted rgba(205, 187, 166, 0.42);
}
.menu dt { order: 0; color: var(--travertine); }
.menu dd {
  order: 2;
  margin: 0;
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ember-lt);
  font-variant-numeric: tabular-nums;
}

.kitchen__foot {
  margin-top: 2.75rem;
  max-width: 44rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--travertine-dim);
}

/* ══ VISIT ═════════════════════════════════════════════════════════════ */

.visit { padding: 7.5rem 0 7rem; }

.visit__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1.5rem 4.5rem;
  align-items: end;
}
.visit__head .lede { margin-top: 0; max-width: 34rem; }

/* Stretch, not start: the plates hold a common baseline at the foot, which is
   the difference between a composed row and a ragged one. */
.visit__cols {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}
.addr {
  margin-top: 1.1rem;
  font-family: var(--display);
  font-size: 1.875rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1.3;
  color: var(--travertine);
}

/* ══ CLOSING BAND ══════════════════════════════════════════════════════ */

.close {
  background-color: var(--ember);
  color: var(--ink);
  padding: 4.5rem 0;
}
.close__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem 2.5rem;
}
.close__line {
  font-family: var(--display);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 800;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--ink);
}

/* ══ FOOTER ════════════════════════════════════════════════════════════ */

.foot {
  background-color: var(--ink);
  color: var(--travertine-dim);
  padding: 4.5rem 0 3.25rem;
}
.foot__grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2rem 3rem;
  align-items: start;
}
.foot__brand { display: grid; gap: 0.1rem; }
.foot__addr { font-style: normal; line-height: 1.6; }
.foot__nav { display: grid; gap: 0.45rem; justify-items: end; }
.foot__nav a {
  color: var(--travertine-dim);
  text-decoration: none;
  transition: color 180ms var(--ease);
}
.foot__nav a:hover { color: var(--ember-lt); }

/* ══ RESPONSIVE ════════════════════════════════════════════════════════ */

@media (max-width: 1180px) {
  .day__head { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .plate--admission { max-width: 32rem; }
  .visit__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  .masthead__nav { display: none; }
  .masthead { grid-template-columns: auto auto; justify-content: space-between; }
  .has-scrub .rail { right: 1.4rem; gap: 2.4rem; }

  /* The bond re-lays for a narrower wall: two columns of field slabs, the
     pilaster and the courses kept, so it still reads as tilework. */
  .bond { grid-auto-rows: 7.5rem; }
  .slab--salt     { grid-column: 1 / 13; grid-row: 1 / 3; }
  .slab--cryo     { grid-column: 1 / 7;  grid-row: 3 / 8; }
  .slab--float    { grid-column: 7 / 13; grid-row: 3 / 6; }
  .slab--infrared { grid-column: 7 / 13; grid-row: 6 / 8; }
  .slab--pool     { grid-column: 1 / 13; grid-row: 8 / 10; }
  .slab--plunge   { grid-column: 1 / 7;  grid-row: 10 / 13; }
  .slab--hydro    { grid-column: 7 / 13; grid-row: 10 / 13; }
  .slab--vip      { grid-column: 1 / 7;  grid-row: 13 / 16; }
  .slab--relax    { grid-column: 7 / 13; grid-row: 13 / 16; }
}

@media (max-width: 860px) {
  .stations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .venik__inner { grid-template-columns: minmax(0, 1fr); }
  .kitchen__head,
  .visit__head { grid-template-columns: minmax(0, 1fr); }
  .board { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .visit__cols { grid-template-columns: minmax(0, 1fr); }
  .quote { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .quote__by { order: 2; }
}

@media (max-width: 760px) {
  .day, .rooms, .kitchen, .visit { padding: 4.5rem 0 4rem; }
  .venik { padding: 4.5rem 0; }
  .tel { display: none; }
  /* Keep the lockup on two lines beside the button. */
  .mark__sub { font-size: 0.625rem; letter-spacing: 0.11em; }
  .stations { grid-template-columns: minmax(0, 1fr); margin-top: 2.75rem; }
  .plate--admission { max-width: none; }
  .lede { font-size: 1.0625rem; }

  /* One column of modules, the courses still running wide. */
  .bond-wrap { margin-top: 2.5rem; padding: 0 0.75rem; }
  .bond { grid-auto-rows: 6.5rem; }
  .slab--salt     { grid-column: 1 / 13; grid-row: 1 / 4; }
  .slab--cryo     { grid-column: 1 / 13; grid-row: 4 / 9; }
  .slab--float    { grid-column: 1 / 13; grid-row: 9 / 13; }
  .slab--infrared { grid-column: 1 / 13; grid-row: 13 / 17; }
  .slab--pool     { grid-column: 1 / 13; grid-row: 17 / 20; }
  .slab--plunge   { grid-column: 1 / 13; grid-row: 20 / 24; }
  .slab--hydro    { grid-column: 1 / 13; grid-row: 24 / 28; }
  .slab--vip      { grid-column: 1 / 13; grid-row: 28 / 32; }
  .slab--relax    { grid-column: 1 / 13; grid-row: 32 / 35; }
  .slab--salt .slab__cap,
  .slab--pool .slab__cap,
  .slab--relax .slab__cap { max-width: none; }

  .quote { margin-top: 3.5rem; padding-top: 1.5rem; }
  .quote p { font-size: 1.625rem; }
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
  .foot__nav { justify-items: start; }
  .close { padding: 3.25rem 0; }

  /* A 16:9 frame cropped into a tall phone viewport loses the subject, who
     sits in the right third. Bias the crop back onto her. */
  .hero__poster, .hero__video { object-position: 72% 40%; }
  .has-scrub .hero__video, .has-scrub .hero__poster { transform-origin: 72% 40%; }
  .has-scrub .rail, .has-scrub .cue { display: none; }
  .has-scrub .hero { height: 360vh; }
  .has-scrub .hero__copy { padding: 0 1.25rem 3.25rem; }
  .has-scrub .chapters { min-height: 24rem; }
}

/* ══ REDUCED MOTION — static frame, no scrub, no cycling light ═════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .hero { height: auto !important; }
  .hero__stage { position: static !important; height: auto !important; }
  .hero__media { position: relative !important; inset: auto !important; aspect-ratio: 16 / 9 !important; }
  .hero__poster { position: relative !important; opacity: 1 !important; }
  .hero__video, .hero__steam { display: none; }
  .hero__copy { position: static !important; padding: 3.25rem 1.5rem 4rem !important; }
  .chapter { position: static !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
  .chapter + .chapter { margin-top: 3.5rem !important; }
  .rail, .cue { display: none !important; }
  .slab__img--alt { display: none; }
  .slab:hover .slab__img { transform: none; }
}


/* ============================================================================
   BRC — full-site additions on top of base.css (the approved v3 comp styles).
   Same tokens, same plate, same bond. New here: the panning room acts, the
   drifting still acts on inner pages, scroll reveals, inner page furniture,
   treatment rows, multi-column menu tables, FAQ, policies, the mobile menu.

   Naming note: base.css owns `.menu` (the price list <dl>) and `.menus` (the
   directory of the four menus). The mobile navigation is `.mnav`. A first
   build used `.menu` for both and hid every price list on desktop.
   ========================================================================= */

/* ── Generic section rhythm ─────────────────────────────────────────────── */

.sec { padding: 7.5rem 0 7rem; }
.sec--tight { padding: 5rem 0 4.5rem; }
.sec--ink { background-color: var(--ink); }
.sec--wine { background-color: var(--wine); }
.sec__head { max-width: 58rem; }
.sec__head--split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 2.5rem 4.5rem;
  align-items: end;
  max-width: none;
}
.sec__head--split .lede { margin-top: 0; }
.eyebrow--ru { display: inline-flex; gap: 0.75rem; align-items: baseline; }
.eyebrow--ru .en {
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ember-lt);
}
.sec-title--md { font-size: clamp(2.25rem, 4.6vw, 3.75rem) !important; }
.sec-title--sm { font-size: clamp(1.75rem, 3.2vw, 2.5rem) !important; }
.copy { max-width: 44rem; color: var(--travertine-dim); }
.copy p + p { margin-top: 1rem; }
.copy--lg { font-size: 1.125rem; line-height: 1.6; }
.small { font-size: 0.9375rem; line-height: 1.55; color: var(--travertine-dim); }
.notice {
  margin-top: 1.5rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--plunge);
  background-color: rgba(147, 179, 193, 0.08);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--travertine-dim);
}
.notice a { color: var(--travertine); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.mt-4 { margin-top: 2.5rem; }
.mt-6 { margin-top: 4rem; }

/* ── Masthead: real navigation ─────────────────────────────────────────── */

.masthead__nav a[aria-current="page"] { color: var(--travertine); }
.mnav { position: relative; display: none; }
.mnav > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid rgba(239, 228, 211, 0.4);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--travertine);
}
.mnav > summary::-webkit-details-marker { display: none; }
.mnav > summary::after {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.mnav[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.mnav__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.75rem);
  min-width: 16rem;
  display: grid;
  background-color: var(--wine);
  border-top: 3px solid var(--brass);
  padding: 0.5rem 0;
  z-index: 60;
}
.mnav__panel a {
  padding: 0.75rem 1.4rem;
  color: var(--travertine);
  text-decoration: none;
  font-size: 1.0625rem;
}
.mnav__panel a:hover, .mnav__panel a[aria-current="page"] { background-color: rgba(228, 113, 30, 0.14); color: var(--ember-lt); }
.mnav__panel .mnav__cta { margin: 0.5rem 1.4rem 0.75rem; text-align: center; }

@media (max-width: 1080px) {
  .mnav { display: block; }
  .masthead { grid-template-columns: auto 1fr; }
  .masthead__act { justify-content: flex-end; }
}
@media (max-width: 480px) {
  .masthead__act .btn { display: none; }
  .mnav__panel { min-width: 14rem; }
}

/* ── The act: a panning room, or a drifting still ──────────────────────── */
/*
   A sticky stage inside a taller runway. scroll progress 0..1 lands in --p on
   the stage; the strip translates by its own overflow, so CSS alone knows how
   far to pan; a still scales down and lifts slightly as the reader arrives.
   Only the FILM in the hero is eased; strips and stills track raw scroll
   because a transform costs nothing and lag reads as unresponsiveness.
*/

/* --bar is the phone address bar: the difference between the tallest the screen gets and the
   smallest. Stages are sized to the tallest (below) so nothing underneath ever shows through in
   the strip the bar leaves behind; anything anchored to a stage's bottom is lifted by --bar so it
   stays on screen while the bar is showing. 0 wherever the units agree, which is every desktop. */
.act { position: relative; background-color: var(--ink); --bar: 0px; }
@supports (height: 100lvh) {
  .act { --bar: calc(100lvh - 100svh); }
}
.act__stage {
  position: relative;
  height: 62vh;
  min-height: 24rem;
  overflow: hidden;
  contain: paint;
}
.act__media { position: absolute; inset: 0; }
.act__band {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: auto;
  max-width: none;
  transform: translate3d(-50%, 0, 0);
  will-change: transform;
}
.act__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 42%;
  will-change: transform;
}
.act__scrim {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to top, rgba(27, 8, 14, 0.92) 0%, rgba(27, 8, 14, 0.55) 34%, rgba(27, 8, 14, 0.06) 62%, rgba(27, 8, 14, 0.30) 100%),
    linear-gradient(to right, rgba(27, 8, 14, 0.55) 0%, rgba(27, 8, 14, 0) 55%);
}
.act__copy { position: relative; padding: 2.5rem 1.5rem 3.5rem; }
.act .chapters { max-width: 44rem; margin-inline: auto; }
.act .chapter + .chapter { margin-top: 2.5rem; }
.act .chapter h1,
.act .chapter h2 {
  font-size: clamp(2.5rem, 6.4vw, 5.25rem);
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--travertine);
}
.act--page .chapter h1 { font-size: clamp(3rem, 7.4vw, 6.25rem); line-height: 0.88; }
.act .chapter .eyebrow { margin-bottom: 0.9rem; }
.act .chapter .crumbs { margin-bottom: 1.25rem; }
.act .chapter__lede { margin-top: 1.2rem; max-width: 32rem; font-size: 1.1875rem; line-height: 1.58; color: var(--travertine-dim); }
.act .chapter__act { margin-top: 1.8rem; }
.act__mark {
  position: absolute;
  right: 2.4rem;
  bottom: calc(2rem + var(--bar, 0px));
  display: none;
  justify-items: end;
  gap: 0.15rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--travertine-dim);
}
.act__mark .en {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ember-lt);
}
.act__mark .act__track {
  margin-top: 0.6rem;
  width: 6rem;
  height: 2px;
  background-color: rgba(239, 228, 211, 0.2);
}
.act__mark .act__fill {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
  background-image: linear-gradient(to right, var(--ember-lt), var(--ember));
}

/* With the act engine running, the stage pins and the media moves. */
.has-acts .act { height: var(--runway, 170vh); }
.has-acts .act__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 0;
}
@supports (height: 100lvh) {
  .has-acts .act__stage { height: 100lvh; }
}
/* The media runs on --pv (the stage's whole life on screen), not --p (its pinned travel), so a
   strip is never a still photograph while the section slides in or out. See acts.js, panOf(). */
.has-acts .act__band {
  left: 0;
  transform: translate3d(calc(var(--pv, 0) * (100vw - 100%)), 0, 0);
}
.has-acts .act--rtl .act__band {
  transform: translate3d(calc((1 - var(--pv, 0)) * (100vw - 100%)), 0, 0);
}
.has-acts .act__still {
  transform: scale(calc(1.16 - var(--pv, 0) * 0.16)) translate3d(0, calc(var(--pv, 0) * -3%), 0);
}
.has-acts .act__copy { position: absolute; inset: auto 0 0 0; padding: 0 2rem calc(4.5rem + var(--bar, 0px)); }
.has-acts .act .chapters { position: relative; min-height: 17rem; margin-inline: auto; max-width: 74rem; }
.has-acts .act .chapter {
  position: absolute;
  inset: auto 0 0 0;
  max-width: 44rem;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.has-acts .act .chapter--1 { opacity: 1; }
.has-acts .act .chapter + .chapter { margin-top: 0; }
.has-acts .act .chapter.is-live,
.has-acts .act .chapter:only-child { pointer-events: auto; }
.has-acts .act__mark { display: grid; }

@media (max-width: 760px) {
  .act__stage { height: 56vh; }
  .has-acts .act { height: var(--runway-sm, 150vh); }
  /* A phone viewport is narrow; panning the whole strip would fly. Pan the
     middle 60% of it instead. */
  .has-acts .act__band {
    transform: translate3d(calc((0.2 + var(--pv, 0) * 0.6) * (100vw - 100%)), 0, 0);
  }
  .has-acts .act--rtl .act__band {
    transform: translate3d(calc((0.8 - var(--pv, 0) * 0.6) * (100vw - 100%)), 0, 0);
  }
  .has-acts .act__copy { padding: 0 1.25rem calc(3rem + var(--bar, 0px)); }
  .has-acts .act .chapters { min-height: 19rem; }
  .has-acts .act__mark { display: none; }
  .act .chapter h2 { font-size: clamp(2.25rem, 11vw, 3.5rem); }
  .act--page .chapter h1 { font-size: clamp(2.5rem, 12vw, 4rem); }
}

/* ── Reveals: content rises into place once, when it arrives ───────────── */

.has-reveal [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
}
.has-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* The brass rule under a course name draws in with the course. */
.course__name { position: relative; border-bottom-color: transparent !important; }
.course__name::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background-color: var(--brass);
  transform-origin: left center;
}
.has-reveal [data-reveal] .course__name::after { transform: scaleX(0); transition: transform 820ms var(--ease) 160ms; }
.has-reveal [data-reveal].is-in .course__name::after { transform: scaleX(1); }

/* ── Breadcrumbs ───────────────────────────────────────────────────────── */

.crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--travertine-dim); }
.crumbs a { color: var(--travertine-dim); text-decoration: none; }
.crumbs a:hover { color: var(--ember-lt); }
.crumbs span::before { content: "/"; margin-right: 0.5rem; opacity: 0.5; }

/* ── Rooms index: chapter rows ─────────────────────────────────────────── */

.group { padding: 4rem 0 5rem; }
.group__head {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding-bottom: 0.9rem;
  border-bottom: 2px solid var(--brass);
}
.group__head h2 { font-size: clamp(2.25rem, 4.5vw, 3.5rem); line-height: 0.9; text-transform: uppercase; color: var(--travertine); }
.group__head .ru { font-family: var(--display); font-size: 1.5rem; font-weight: 800; color: var(--ember-lt); text-transform: uppercase; }
.group__head .blurb { margin-left: auto; font-size: 0.9375rem; color: var(--travertine-dim); max-width: 24rem; text-align: right; }

.room-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 2rem 3.5rem;
  align-items: center;
  padding: 3rem 0;
  border-bottom: 1px solid rgba(185, 142, 62, 0.22);
}
.room-row:first-child { padding-top: 0; }
.room-row:last-child { border-bottom: 0; padding-bottom: 0; }
.room-row:nth-child(even) .room-row__art { order: 2; }
.room-row__art {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--ink);
  overflow: hidden;
}
.room-row__art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 320ms var(--ease); }
.room-row__art::after { content: ""; position: absolute; inset: 0; background-color: rgba(53, 16, 27, 0.14); mix-blend-mode: multiply; pointer-events: none; }
.room-row:hover .room-row__art img { transform: scale(1.03); }
.room-row h3 { font-size: clamp(1.875rem, 3.4vw, 2.75rem); line-height: 0.95; text-transform: uppercase; color: var(--travertine); }
.room-row h3 a { text-decoration: none; color: inherit; }
.room-row h3 a:hover { color: var(--ember-lt); }
.room-row .ru { display: block; margin-bottom: 0.5rem; font-family: var(--display); font-size: 1.25rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ember-lt); }
.room-row p { margin-top: 0.9rem; color: var(--travertine-dim); }
.tag {
  display: inline-block;
  margin-top: 1.1rem;
  padding: 0.35rem 0.7rem;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  background-color: var(--ember);
}
.tag--included { background-color: var(--plunge); }
.tag--muted { background-color: transparent; color: var(--travertine-dim); border: 1px solid rgba(239, 228, 211, 0.3); }
.room-row .more { display: inline-block; margin-top: 1.25rem; font-weight: 500; color: var(--ember-lt); text-decoration: none; }
.room-row .more:hover { color: var(--travertine); }

/* ── Room page ─────────────────────────────────────────────────────────── */

.room-main {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 3rem 5rem;
  align-items: start;
}
.facts { margin: 2.25rem 0 0; }
.facts .fare__row dd { font-size: 1.375rem; text-align: right; }
.facts .fare__row dt { color: var(--travertine-dim); }
.sub-rooms { margin-top: 3rem; display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sub-room { background-color: var(--wine); border-top: 3px solid var(--ember); padding: 1.5rem 1.5rem 1.7rem; }
.sub-room h3 { font-size: 1.5rem; text-transform: uppercase; color: var(--travertine); }
.sub-room .ru { display: block; margin-bottom: 0.3rem; font-family: var(--display); font-size: 1.125rem; font-weight: 800; color: var(--ember-lt); text-transform: uppercase; }
.sub-room p { margin-top: 0.7rem; font-size: 0.9875rem; line-height: 1.58; color: var(--travertine-dim); }
.rules { margin-top: 2rem; padding-left: 1.2rem; color: var(--travertine-dim); }
.rules li + li { margin-top: 0.5rem; }
.plate--sticky { position: sticky; top: 7.5rem; }
.plate__big { margin-top: 1rem; font-family: var(--display); font-size: clamp(2.25rem, 3.6vw, 3rem); font-weight: 800; line-height: 1; text-transform: uppercase; color: var(--ember-lt); }
.plate__sub { margin-top: 0.4rem; font-size: 0.9375rem; color: var(--travertine-dim); }

.gallery { margin-top: 4.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grout); padding: 9px; background-color: var(--mortar); }
.gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery figure { margin: 0; position: relative; aspect-ratio: 4 / 3; background-color: var(--ink); overflow: hidden; }
.gallery figure.tall { aspect-ratio: 3 / 4; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery figure::after { content: ""; position: absolute; inset: 0; background-color: rgba(53, 16, 27, 0.14); mix-blend-mode: multiply; pointer-events: none; }

.also { margin-top: 4.5rem; padding-top: 2rem; border-top: 3px solid var(--ember); }
.also h2 { font-size: 1.5rem; text-transform: uppercase; color: var(--travertine); }
.also ul { margin: 1rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.also a {
  display: inline-block;
  padding: 0.55rem 0.9rem;
  border: 1px solid rgba(239, 228, 211, 0.3);
  color: var(--travertine);
  text-decoration: none;
  font-size: 0.9375rem;
}
.also a:hover { border-color: var(--ember-lt); color: var(--ember-lt); }

/* ── Treatments ────────────────────────────────────────────────────────── */

.tx-group + .tx-group { margin-top: 5.5rem; }
.tx { margin: 2.25rem 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(185, 142, 62, 0.35); }
.tx__row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 9rem 9rem auto;
  gap: 1rem 2rem;
  align-items: start;
  padding: 1.35rem 0;
  border-bottom: 1px solid rgba(185, 142, 62, 0.35);
}
.tx__name { font-family: var(--display); font-size: 1.5rem; font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; color: var(--travertine); }
.tx__desc { margin-top: 0.55rem; max-width: 40rem; font-size: 0.9375rem; line-height: 1.55; color: var(--travertine-dim); }
.tx__new { display: inline-block; margin-left: 0.6rem; vertical-align: 0.2em; padding: 0.15rem 0.45rem; font-family: var(--text); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; color: var(--ink); background-color: var(--plunge); }
.tx__dur, .tx__price { padding-top: 0.15rem; }
.tx__dur { font-size: 0.9375rem; color: var(--travertine-dim); }
.tx__label { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--travertine-dim); opacity: 0.8; margin-bottom: 0.2rem; }
.tx__price { font-family: var(--display); font-size: 1.5rem; font-weight: 800; line-height: 1; color: var(--ember-lt); font-variant-numeric: tabular-nums; }
.tx__book { justify-self: end; }
.btn--sm { padding: 0.6rem 1.1rem; font-size: 1rem; }

/* ── Kitchen: menu tables ──────────────────────────────────────────────── */

.menus--big a { padding: 1.35rem 0; }
.menus--big .menus__name { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.menu-card { background-color: var(--wine); border-top: 3px solid var(--brass); padding: 1.75rem 1.6rem 1.8rem; display: flex; flex-direction: column; }
.menu-card h3 { font-size: 1.75rem; text-transform: uppercase; color: var(--travertine); }
.menu-card .ru { display: block; margin-bottom: 0.2rem; font-family: var(--display); font-size: 1.125rem; font-weight: 800; color: var(--ember-lt); text-transform: uppercase; }
.menu-card .menu { margin-top: 0.9rem; }
.menu-card .menu__row { padding: 0.35rem 0; }
.menu-card .menu dt { font-size: 0.9875rem; }
.menu-card .menu dd { font-size: 1.125rem; }
.menu-card .btn--block { margin-top: auto; padding-top: 0.85rem; padding-bottom: 0.85rem; }
.menu-card .small { margin-top: 1rem; margin-bottom: 1.4rem; }

.board--full { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.course--wide { grid-column: 1 / -1; }
.course__note { margin-top: 0.6rem; font-size: 0.875rem; color: var(--plunge); letter-spacing: 0.02em; }
.menu dt small, .menu__desc { display: block; margin-top: 0.15rem; font-size: 0.875rem; line-height: 1.5; color: var(--travertine-dim); }
.menu__row--desc { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.menu__row--desc::after { display: none; }
.menu__row--desc dt { order: 0; }
.menu__row--desc dd { order: 1; }
.menu__row--desc .menu__desc { grid-column: 1 / -1; order: 2; }
.menu__row--noprice::after { display: none; }
.menu__note { color: var(--plunge); font-size: 0.8125rem; margin-left: 0.5rem; }

.menu-table { width: 100%; border-collapse: collapse; margin-top: 0.6rem; }
.menu-table th, .menu-table td { padding: 0.55rem 0.4rem; text-align: right; vertical-align: baseline; border-bottom: 1px dotted rgba(205, 187, 166, 0.35); }
.menu-table th:first-child, .menu-table td:first-child { text-align: left; padding-left: 0; }
.menu-table th { font-family: var(--text); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--travertine-dim); border-bottom: 1px solid rgba(185, 142, 62, 0.45); }
.menu-table td { color: var(--travertine); }
.menu-table td.price { font-family: var(--display); font-size: 1.25rem; font-weight: 800; color: var(--ember-lt); font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu-table td.price.empty { color: rgba(205, 187, 166, 0.35); font-family: var(--text); font-size: 0.875rem; font-weight: 400; }
.menu-table .menu__desc { margin-top: 0.1rem; }
.menu-table .menu__note { display: block; margin: 0.15rem 0 0; }

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.faq { margin-top: 3rem; border-top: 1px solid rgba(185, 142, 62, 0.35); }
.faq details { border-bottom: 1px solid rgba(185, 142, 62, 0.35); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.3rem 0;
  font-family: var(--display);
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--travertine);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--text); font-weight: 400; font-size: 1.75rem; line-height: 0.8; color: var(--ember-lt); flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--ember-lt); }
.faq__a { padding: 0 0 1.75rem; max-width: 46rem; color: var(--travertine-dim); }
.faq__a p + p, .faq__a ul { margin-top: 0.9rem; }
.faq__a ul { columns: 2; column-gap: 2.5rem; padding-left: 1.2rem; }
.faq__a li { break-inside: avoid; margin-bottom: 0.3rem; }
.faq__a a { color: var(--ember-lt); }

/* ── Policies ──────────────────────────────────────────────────────────── */

.policy { max-width: 46rem; }
.policy + .policy { margin-top: 5.5rem; padding-top: 3.5rem; border-top: 3px solid var(--ember); }
.policy h2 { font-size: clamp(2.25rem, 4.5vw, 3.5rem); line-height: 0.9; text-transform: uppercase; color: var(--travertine); }
.policy h3 { margin-top: 2.5rem; font-size: 1.375rem; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ember-lt); }
.policy p { margin-top: 0.9rem; color: var(--travertine-dim); }
.policy ul, .policy ol { margin: 0.9rem 0 0; padding-left: 1.3rem; color: var(--travertine-dim); }
.policy li + li { margin-top: 0.4rem; }
.policy .formal { margin-top: 1rem; font-size: 1rem; color: var(--travertine); }
.toc { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; }
.toc a { display: inline-block; padding: 0.5rem 0.9rem; border: 1px solid rgba(239, 228, 211, 0.3); color: var(--travertine); text-decoration: none; font-size: 0.9375rem; }
.toc a:hover { border-color: var(--ember-lt); color: var(--ember-lt); }

/* ── Gift cards ────────────────────────────────────────────────────────── */

.denoms { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
.denoms span {
  padding: 0.7rem 1rem;
  border: 1px solid rgba(185, 142, 62, 0.5);
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--travertine);
  font-variant-numeric: tabular-nums;
}

/* ── Testimonials ──────────────────────────────────────────────────────── */

.quotes { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 3.5rem; }
.quotes .quote { margin: 0; padding: 1.75rem 1.6rem 1.9rem; display: block; background-color: var(--wine); border-top: 3px solid var(--ember); }
.quotes .quote p { font-size: 1.25rem; line-height: 1.4; font-weight: 700; }
.quotes .quote__by { margin-bottom: 1rem; }

/* ── Visit ─────────────────────────────────────────────────────────────── */

.socials { margin: 1rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.socials a { display: inline-block; padding: 0.5rem 0.85rem; border: 1px solid rgba(239, 228, 211, 0.3); color: var(--travertine); text-decoration: none; font-size: 0.9375rem; }
.socials a:hover { border-color: var(--ember-lt); color: var(--ember-lt); }
.map-link { display: inline-block; margin-top: 0.9rem; }
.visit-photo { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background-color: var(--ink); margin: 0; }
.visit-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.visit-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.75rem 1rem; font-size: 0.8125rem; color: var(--travertine-dim); background-image: linear-gradient(to top, rgba(27,8,14,.9), rgba(27,8,14,0)); }

/* ── Footer, expanded ──────────────────────────────────────────────────── */

.foot__grid--full { grid-template-columns: 1.2fr 1fr 1fr 1fr; align-items: start; }
.foot h4 { margin: 0 0 0.75rem; font-family: var(--text); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--travertine-dim); opacity: 0.8; }
.foot__nav--col { justify-items: start; gap: 0.45rem; }
.foot__legal { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(185, 142, 62, 0.22); display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; font-size: 0.8125rem; color: var(--travertine-dim); }
.foot__legal a { color: var(--travertine-dim); text-decoration: none; }
.foot__legal a:hover { color: var(--ember-lt); }

/* ── 404 ───────────────────────────────────────────────────────────────── */

.lost { min-height: 70vh; display: grid; align-items: center; padding: 9rem 0 5rem; }
.lost h1 { font-size: clamp(3rem, 8vw, 7rem); line-height: 0.88; text-transform: uppercase; color: var(--travertine); }

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .room-main { grid-template-columns: minmax(0, 1fr); }
  .plate--sticky { position: static; max-width: 34rem; }
  .foot__grid--full { grid-template-columns: 1fr 1fr; }
  .tx__row { grid-template-columns: minmax(0, 1fr) 8rem 8rem; }
  .tx__book { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 860px) {
  .sec__head--split { grid-template-columns: minmax(0, 1fr); }
  .room-row { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 2.25rem 0; }
  .room-row:nth-child(even) .room-row__art { order: 0; }
  .grid-3, .quotes { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .group__head { flex-wrap: wrap; }
  .group__head .blurb { margin-left: 0; text-align: left; max-width: none; flex-basis: 100%; }
  .board--full { grid-template-columns: minmax(0, 1fr); }
  .faq__a ul { columns: 1; }
}
@media (max-width: 760px) {
  .sec { padding: 4.5rem 0 4rem; }
  .sec--tight { padding: 3.5rem 0 3rem; }
  .group { padding: 3rem 0 3.5rem; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .sub-rooms { grid-template-columns: minmax(0, 1fr); }
  .tx__row { grid-template-columns: minmax(0, 1fr) 1fr; }
  .tx__name { font-size: 1.3125rem; }
  .foot__grid--full { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .gallery figure.tall { aspect-ratio: 4 / 3; }
  .menu-table th, .menu-table td { padding: 0.5rem 0.25rem; }
  .menu-table td.price { font-size: 1.0625rem; }
}

/* ── Print: everything visible, nothing pinned ─────────────────────────── */

@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .course__name::after { transform: none !important; }
  .act { height: auto !important; }
  .act__stage { position: relative !important; height: 40vh !important; }
  .act__copy { position: static !important; }
  .act .chapter { position: static !important; opacity: 1 !important; transform: none !important; }
  .masthead, .close, .act__mark { display: none !important; }
}

/* ── Reduced motion: stages unstick, media sits still, reveals are plain ─ */

@media (prefers-reduced-motion: reduce) {
  .act { height: auto !important; }
  .act__stage { position: relative !important; height: 62vh !important; min-height: 24rem !important; }
  .act__band { left: 50% !important; transform: translate3d(-50%, 0, 0) !important; }
  .act__still { transform: none !important; }
  .act__copy { position: static !important; padding: 2.5rem 1.5rem 3.5rem !important; }
  .act .chapter { position: static !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
  .act .chapter + .chapter { margin-top: 2.5rem !important; }
  .act__mark { display: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .course__name::after { transform: none !important; transition: none !important; }
  .room-row:hover .room-row__art img { transform: none; }
}

/* Admission and memberships plates (2026-10-15): several fare lists under one plate, each with a small heading. */
.plate__sub--when { margin-top: 0.6rem; color: var(--ember-lt); font-weight: 600; }
.fare__head { margin-top: 1.4rem; font-family: var(--display); font-size: 1rem; font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: 0.05em; color: var(--travertine); }
.fare__head + .fare { margin-top: 0.5rem; }
.fare__unit { font-family: var(--text); font-size: 0.8125rem; font-weight: 400; color: var(--travertine-dim); letter-spacing: 0; }


/* ============================================================================
   BRC — the homepage opening: the heat, then the ice plunge.

   Taken from the scroll-craft comp (comps/track-c-scrollcraft/) on 2026-09-22 and
   set in this site's own look: oxblood and travertine, Fira Sans Extra Condensed
   caps, the Russian word beside the English.

   Two pinned acts, driven by the scrollcraft engine (src/scrollcraft.js, unedited)
   mounted on .opening only. The engine publishes --sc-p (0..1) on each act; every
   plane below reads it. The rest of the page keeps its own acts.js.

     1. Heat   a layered still scene: the real dry sauna, steam, a venik soaking
               in a bucket, near birch leaves. It fades out THROUGH the steam into
     2. Plunge BRC's own plunge, the camera sinking through the surface. Hold still
               underwater and opening.js times you against a real guest's four
               seconds. The act ends by draining the water off the screen onto the
               violet lounge.

   The plunge is pulled up underneath the heat (negative margin) so it is already
   pinned when the sauna dissolves. No white screen, no seam.

   Without JS, or under prefers-reduced-motion, nothing is pinned: .has-opening is
   never set, and the two acts render as a still sauna and a still plunge with
   their copy stacked.
   ========================================================================= */

.opening .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.op-plane { position: absolute; pointer-events: none; }
.op-plane img { display: block; max-width: none; }

/* ── The engine's own mechanism, scoped to the opening ─────────────────── */

/* Stage height: the LARGEST viewport, never the small one.
   A phone hides its address bar as you scroll, and a stage sized in svh is then shorter than the
   screen: the strip left at the bottom shows whatever is underneath, which here is the plunge
   sliding up beneath the sauna. Mike, on a phone: "it looks like it's a layer underneath ... that
   scrolls also and then appears, ends up looking really weird."
   So the stage covers the tallest the screen can get, and anything anchored to its bottom is lifted
   by --bar (the address bar's height) so it stays on screen while the bar is showing. --bar is 0
   everywhere the units are equal, which is every desktop browser. */
.opening { --bar: 0px; }
@supports (height: 100lvh) {
  .opening { --bar: calc(100lvh - 100svh); }
}
.has-opening .opening .sc-act--pinned { position: relative; }
.has-opening .opening .sc-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: clip;
  z-index: 1;
}
@supports (height: 100lvh) {
  .has-opening .opening .sc-stage { height: 100lvh; }
}
.has-opening .opening [data-sc-cue] { opacity: 0; will-change: opacity, transform; }
.has-opening .opening [data-sc-reveal] { will-change: clip-path; }
.opening .sc-stage__poster,
.opening video[data-sc-scrub] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.opening video[data-sc-scrub] { opacity: 0; transition: opacity 380ms var(--ease); }
.opening .sc-has-clip video[data-sc-scrub] { opacity: 1; }
.opening .sc-stage__poster { z-index: 0; transition: opacity 380ms var(--ease); }
.opening .sc-has-clip .sc-stage__poster { opacity: 0; }

/* ── The stage mark: English word, Russian word, progress. Same as .act__mark ─ */

.op-mark {
  position: absolute; z-index: 12; right: 2.4rem; bottom: calc(2rem + var(--bar, 0px));
  display: none; justify-items: end; gap: 0.15rem;
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--travertine-dim);
}
.op-mark .en { font-family: var(--display); font-size: 1.5rem; font-weight: 800; letter-spacing: 0.04em; color: var(--ember-lt); }
.op-mark__track { margin-top: 0.6rem; width: 6rem; height: 2px; background-color: rgba(239, 228, 211, 0.2); }
.op-mark__fill { display: block; height: 100%; width: 100%; transform-origin: left center;
  transform: scaleX(var(--sc-p, 0)); background-image: linear-gradient(to right, var(--ember-lt), var(--ember)); }
.has-opening .op-mark { display: grid; }

/* ══ 1 · HEAT ═════════════════════════════════════════════════════════════ */

.op-heat__stage { position: relative; height: 100svh; min-height: 36rem; overflow: hidden; background-color: #1B0B04; }

.op-heat__far { inset: 0; transform-origin: 62% 74%;
  transform: scale(calc(1.03 + var(--sc-p, 0) * 0.13)) translate3d(0, calc(var(--sc-p, 0) * -1.5vh), 0); }
.op-heat__far img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }

.op-heat__steam { left: -12%; right: -12%; bottom: -14%; height: 92%;
  opacity: calc(0.22 + var(--sc-p, 0) * 0.55);
  transform: translate3d(0, calc(var(--sc-p, 0) * -18vh), 0); }
.op-heat__steam img { width: 100%; height: 100%; object-fit: cover; animation: op-steam 16s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
.op-heat:not(.is-live) .op-heat__steam img { animation-play-state: paused; }
@keyframes op-steam {
  from { transform: translate3d(-2.5%, 0, 0) scale(1); }
  to   { transform: translate3d(2.5%, -4%, 0) scale(1.06); }
}

/* density under the copy only: a column on the left, a floor on the bottom */
.op-heat__scrim { inset: 0; z-index: 2;
  background-image:
    linear-gradient(90deg, rgba(27, 8, 14, 0.82) 0%, rgba(27, 8, 14, 0.62) 32%, rgba(27, 8, 14, 0.2) 50%, rgba(27, 8, 14, 0) 62%),
    linear-gradient(0deg, rgba(27, 8, 14, 0.5) 0%, rgba(27, 8, 14, 0) 30%); }

.op-heat__copy { position: absolute; z-index: 3; left: 2rem; top: 24vh; max-width: 46rem; }
.op-heat__copy h1 {
  margin-top: 0.9rem;
  font-size: clamp(4rem, 10vw, 10rem); line-height: 0.86; text-transform: uppercase;
  color: var(--travertine);
}
.op-heat__copy .chapter__lede {
  margin-top: 1.3rem; max-width: 30ch;
  font-size: 1.1875rem; line-height: 1.55; color: var(--travertine);
}
.op-heat__copy .chapter__act { margin-top: 1.8rem; }

/* the bucket sits on the lower bench; scale pivots on its own base so it never floats */
.op-heat__subject { z-index: 4; right: 10vw; bottom: calc(4.5vh + var(--bar, 0px)); width: clamp(17rem, 27vw, 31rem);
  transform-origin: 50% 97%;
  transform: translate3d(calc(var(--sc-p, 0) * -2vw), calc(var(--sc-p, 0) * 4vh), 0) scale(calc(1 + var(--sc-p, 0) * 0.28)); }
.op-heat__subject img { position: relative; width: 100%; height: auto; }
.op-heat__shadow { position: absolute; left: 4%; right: 4%; bottom: -3%; height: 11%;
  background: radial-gradient(closest-side, rgba(12, 4, 1, 0.85), rgba(12, 4, 1, 0)); filter: blur(4px); }

.op-heat__near { z-index: 5; top: -10vh; right: -5vw; width: clamp(15rem, 31vw, 36rem); filter: blur(2.5px);
  transform: translate3d(calc(var(--sc-p, 0) * 9vw), calc(var(--sc-p, 0) * -62vh), 0) rotate(calc(var(--sc-p, 0) * 8deg)) scale(calc(1 + var(--sc-p, 0) * 0.15)); }
.op-heat__near img { width: 100%; height: auto; }

.op-heat__veil { z-index: 6; inset: -12% -12% -24% -12%;
  opacity: clamp(0, calc((var(--sc-p, 0) - 0.42) * 3.4), 1);
  transform: translate3d(0, calc((1 - var(--sc-p, 0)) * 20vh), 0); }
.op-heat__veil img { width: 100%; height: 100%; object-fit: cover; }
/* the steam never goes solid: the sauna always shows through */
.op-heat__white { z-index: 6; inset: 0; background-color: var(--travertine);
  opacity: clamp(0, calc((var(--sc-p, 0) - 0.42) * 2.6), 0.8); }

.op-heat__then {
  position: absolute; z-index: 7; left: 1.5rem; right: 1.5rem; top: calc(50% - var(--bar, 0px) / 2); translate: 0 -50%;
  display: none; text-align: center;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(3rem, 8vw, 8.5rem); line-height: 0.9; color: var(--ink);
}
.op-heat__then .ru { display: block; margin-bottom: 0.5rem; font-size: 0.3em; letter-spacing: 0.06em; color: var(--wine); }

/* pinned: the heat sits above the plunge and fades out through the steam */
.has-opening .op-heat { z-index: 2; }
.has-opening .op-heat__stage { min-height: 0; opacity: clamp(0, calc((1 - var(--sc-p, 0)) / 0.2), 1); }
.has-opening .op-heat__then { display: block; }

/* ══ 2 · PLUNGE ═══════════════════════════════════════════════════════════ */

.op-plunge { position: relative; background-color: #06324D; }
.op-plunge__stage { position: relative; background-color: #06324D; color: var(--travertine); }
.op-plunge__stage :focus-visible { outline-color: var(--travertine); }
.has-opening .op-plunge { z-index: 1; margin-top: -130vh; }

.op-plunge__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(2, 22, 36, 0.88) 0%, rgba(2, 22, 36, 0.7) 30%, rgba(2, 22, 36, 0.3) 50%, rgba(2, 22, 36, 0) 66%),
    linear-gradient(0deg, rgba(2, 22, 36, 0.6) 0%, rgba(2, 22, 36, 0) 40%); }
.op-plunge__deep { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 55% 45%, rgba(2, 22, 36, 0) 30%, rgba(1, 12, 22, 0.9) 100%);
  opacity: var(--hold, 0); }

.op-plunge__copy, .op-plunge__quote { position: absolute; z-index: 5; left: 2rem; bottom: calc(13vh + var(--bar, 0px)); max-width: 36rem; margin: 0; }
.op-plunge__copy h2 {
  margin-top: 0.9rem;
  font-size: clamp(3rem, 7vw, 7rem); line-height: 0.86; text-transform: uppercase; color: var(--travertine);
}
.op-plunge__copy .chapter__lede { margin-top: 1.2rem; max-width: 32ch; font-size: 1.1875rem; line-height: 1.55; color: var(--travertine); }
.op-plunge__quote blockquote { margin: 0; padding-top: 1.4rem; border-top: 3px solid var(--ember); }
.op-plunge__quote blockquote p {
  max-width: 22ch; font-family: var(--display); font-weight: 700;
  font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.18; color: var(--travertine);
}
.op-plunge__quote .quote__by { margin-top: 1.1rem; }

.op-plunge__clockscrim { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(38% 46% at 82% 50%, rgba(2, 22, 36, 0.72), rgba(2, 22, 36, 0));
  opacity: 0; transition: opacity 260ms var(--ease); }
.op-plunge__clock { position: absolute; z-index: 6; right: 2rem; top: calc(50% - var(--bar, 0px) / 2); translate: 0 -50%;
  display: grid; justify-items: end; text-align: right;
  opacity: 0; transition: opacity 260ms var(--ease); pointer-events: none; }
.op-plunge.is-under .op-plunge__clock, .op-plunge.is-under .op-plunge__clockscrim { opacity: 1; }
.op-plunge__ru { font-family: var(--display); font-size: 1.5rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ember-lt); }
.op-plunge__secs { font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: clamp(5.5rem, 14vw, 13rem); line-height: 0.84; color: var(--travertine); }
.op-plunge__unit { margin-top: 0.5rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--travertine-dim); }
.op-plunge__verdict { margin-top: 1rem; max-width: 16ch; min-height: 2.2em;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); line-height: 1.1; color: var(--travertine); }

/* the drain: the lounge is revealed from the top down, and the waterline rides the boundary */
.op-plunge__rest, .op-plunge__waterline, .op-plunge__up, .op-plunge__clock, .op-plunge__clockscrim { display: none; }
.has-opening .op-plunge__rest { display: block; position: absolute; inset: 0; z-index: 8; clip-path: inset(0 0 100% 0); }
.op-plunge__rest img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.op-plunge__rest::after { content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(52% 42% at 12% 26%, rgba(27, 8, 14, 0.72), rgba(27, 8, 14, 0)),
    linear-gradient(0deg, var(--oxblood) 0%, rgba(53, 16, 27, 0.55) 16%, rgba(53, 16, 27, 0) 38%),
    linear-gradient(180deg, rgba(27, 8, 14, 0.5) 0%, rgba(27, 8, 14, 0) 35%); }
.has-opening .op-plunge__waterline { display: block; position: absolute; left: 0; right: 0; top: 0; height: 44px; margin-top: -22px;
  z-index: 9; pointer-events: none; opacity: 0;
  transform: translate3d(0, var(--wl, 0px), 0);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 44' preserveAspectRatio='none'%3E%3Cpath d='M0 22 C 90 6, 270 6, 360 22 S 630 38, 720 22' fill='none' stroke='%23EFE4D3' stroke-width='2.5' stroke-opacity='.9'/%3E%3Cpath d='M0 22 C 90 6, 270 6, 360 22 S 630 38, 720 22 V44 H0 Z' fill='%23EFE4D3' fill-opacity='.14'/%3E%3C/svg%3E") repeat-x 0 0 / 720px 100%;
  animation: op-wave 6s linear infinite; }
.op-plunge.is-draining .op-plunge__waterline { opacity: 1; }
@keyframes op-wave { to { background-position: -720px 0; } }
.has-opening .op-plunge__up { display: block; position: absolute; z-index: 10; left: 2rem; top: 22vh; margin: 0;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.8rem, 6vw, 6rem); line-height: 0.9; color: var(--travertine); }
.op-plunge__up .ru { display: block; margin-bottom: 0.5rem; font-size: 0.3em; letter-spacing: 0.06em; color: var(--ember-lt); }
.has-opening .op-plunge__clock { display: grid; }
.has-opening .op-plunge__clockscrim { display: block; }

/* ── Static opening (no JS, or reduced motion): two still frames, copy readable ─ */

html:not(.has-opening) .op-plunge__stage {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2.5rem;
  min-height: 100svh; padding: 9rem 1.5rem 4.5rem;
}
html:not(.has-opening) .op-plunge__stage video { display: none; }
html:not(.has-opening) .op-plunge__copy,
html:not(.has-opening) .op-plunge__quote { position: relative; left: auto; bottom: auto; }

/* ── Phones ────────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .op-heat__far img { object-position: 36% 50%; }
  .op-heat__copy { top: 14svh; left: 1.25rem; right: 1.25rem; z-index: 6; }
  .op-heat__copy h1 { font-size: clamp(3.6rem, 19vw, 6rem); }
  .op-heat__copy .chapter__lede { max-width: 26ch; font-size: 1.0625rem; }
  .op-heat__scrim { background-image:
    linear-gradient(180deg, rgba(27, 8, 14, 0.78) 0%, rgba(27, 8, 14, 0.6) 40%, rgba(27, 8, 14, 0.2) 56%, rgba(27, 8, 14, 0) 68%),
    linear-gradient(0deg, rgba(27, 8, 14, 0.45) 0%, rgba(27, 8, 14, 0) 26%); }
  .op-heat__subject { width: 62vw; right: 7vw; bottom: calc(5svh + var(--bar, 0px)); }
  /* On a phone the headline's box reaches the leaves, and backlit leaves are the brightest thing
     in the frame. Put the scrim over them (the copy still paints above it) and take their glow
     down: the headline needs a ground, and a foreground plane does not need to be the brightest. */
  .op-heat__near { width: 31vw; top: 8svh; right: -9vw; filter: blur(2.5px) brightness(0.72); }
  .op-heat__scrim { z-index: 6; }

  .op-plunge__scrim { background-image: linear-gradient(0deg, rgba(2, 22, 36, 0.9) 0%, rgba(2, 22, 36, 0.78) 34%, rgba(2, 22, 36, 0.45) 50%, rgba(2, 22, 36, 0) 66%); }
  .op-plunge__copy, .op-plunge__quote { left: 1.25rem; right: 1.25rem; bottom: calc(9svh + var(--bar, 0px)); }
  .op-plunge__copy h2 { font-size: clamp(2.75rem, 14vw, 4.25rem); }
  .op-plunge__clock { right: 1.25rem; top: 15svh; translate: none; }
  .op-plunge__clockscrim { background: radial-gradient(70% 34% at 80% 24%, rgba(2, 22, 36, 0.75), rgba(2, 22, 36, 0)); }
  .op-plunge__secs { font-size: clamp(5rem, 26vw, 7rem); }
  .has-opening .op-plunge__up { left: 1.25rem; top: 15svh; }
  .op-plunge__rest::after { background-image:
    linear-gradient(180deg, rgba(27, 8, 14, 0.9) 0%, rgba(27, 8, 14, 0.78) 22%, rgba(27, 8, 14, 0.35) 34%, rgba(27, 8, 14, 0) 46%),
    linear-gradient(0deg, var(--oxblood) 0%, rgba(53, 16, 27, 0.55) 16%, rgba(53, 16, 27, 0) 38%); }
  .has-opening .op-mark { display: none; }
}

/* Reduced motion never mounts the engine, but keep the ambient steam still too. */
@media (prefers-reduced-motion: reduce) {
  .op-heat__steam img { animation: none !important; }
  .op-heat__far, .op-heat__steam, .op-heat__subject, .op-heat__near, .op-heat__veil { transform: none !important; }
}