/* Temple of Speak, room 1: The projector comes on.
   One screen tall, nothing pinned. Three photos of the same room, each taken under the projected
   logo in a different colour, crossfade slowly (01-hero.js drives the cycle) like the logo changing
   colour in the room. On load the room is dark, the projector screen lights first, then the room
   comes up; the copy is delivered over the same 1.2 seconds.
   Desktop: copy on Temple Navy at the left, the photos in a full-height panel that bleeds off the right edge.
   Phones and tablets held upright: the photo on top, the copy below.
   Robustness: everything is visible by default. The dark veil and the hidden starting states exist only
   under html.js, every intro animation ends visible, and 01-hero.js adds .done ~2 s in, which snaps the
   finished state with no animation (a stalled animation clock can not strand anything). */

/* the projector screen is a soft-edged window in the dark: --hk (0 shut, 1 the screen, 4+ the whole room) opens it */
@property --hk {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

body[data-page="tos"] {
  --pb-fs: clamp(2.1rem, 1rem + 3.6vw, 4.4rem);
  --pb-h: calc(var(--pb-fs) * 1.3);
}

#hero {
  /* left edge of the copy: the same line the header content sits on */
  --hero-left: max(var(--gutter-l), calc((100% - 72rem) / 2));
  --hero-right: max(var(--gutter-r), calc((100% - 72rem) / 2));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* one screen with the pillars banner (01b) under it, so the banner rolls on the first screen too */
  height: calc(100vh - var(--pb-h));
  height: calc(100svh - var(--pb-h));
  min-height: 34rem;
  max-height: 60rem;
  background: var(--temple-navy);
  color: var(--linen);
}

/* the room around the panel: a warm spill where the photo meets the navy, a deep pool low at the left */
#hero .hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(34% 70% at 28% 44%, rgba(212, 168, 75, .1), rgba(212, 168, 75, 0) 70%),
    radial-gradient(70% 60% at 0% 110%, rgba(8, 22, 36, .85), rgba(8, 22, 36, 0) 70%);
}
#hero > .grain { opacity: .05; }

/* ---------- the photo panel ---------- */

#hero .hero__panel {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
}
/* scroll parallax (01-hero.js sets --py): the photos trail the page a little. Transform only. */
#hero .hero__shift {
  position: absolute;
  inset: 0;
  transform: translate3d(0, var(--py, 0px), 0);
}

#hero .slide {
  position: absolute;
  inset: 0;
  container-type: size;
  opacity: 0;
}
/* before the script runs (or without it) the first photo simply stands there */
#hero .slide:first-child { opacity: 1; }

#hero .slide__clip { position: absolute; inset: 0; overflow: hidden; }

/* The frame has the photo's own proportions and covers the panel like object-fit: cover, anchored at
   (--fx, --fy), so the screen, the bloom and the veil (all in % of the photo) stay on the projector screen
   whatever the panel's shape. */
#hero .slide__frame {
  position: absolute;
  left: var(--fx, 50%);
  top: var(--fy, 0%);
  width: 100%;
  height: 100%;
  /* the pointer moves the room a few px inside its clip (fine pointers; 01-hero.js sets --mx / --my, -1..1);
     scale keeps the edges covered while it does */
  translate: calc(var(--fx, 50%) * -1 + var(--mx, 0) * -8px) calc(var(--fy, 0%) * -1 + var(--my, 0) * -5px);
  scale: 1.025;
  transform-origin: var(--ox, 50%) var(--oy, 40%);
  will-change: transform;
}
@supports (width: 1cqw) {
  #hero .slide__frame {
    width: max(100cqw, calc(100cqh * 1066 / 1600));
    height: auto;
    aspect-ratio: 1066 / 1600;
  }
}
/* Desktop: the whole photo, top to bottom (Vahan asked to see more of himself and of the logo).
   The frame is as tall as the panel, sits against the right edge, and its left edge melts into the navy. */
@media (min-width: 900px) {
  @supports (width: 1cqw) {
    #hero .slide__frame {
      --fx: 100%;
      --fy: 0%;
      width: calc(100cqh * 1066 / 1600);
      height: 100cqh;
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%);
      mask-image: linear-gradient(90deg, transparent 0, #000 24%);
    }
    #hero.is-live .slide .slide__frame { animation-name: hero-kb-soft; }
  }
}
@keyframes hero-kb-soft {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(1.03) translate3d(-.3%, -.4%, 0); }
}
#hero .slide__frame picture,
#hero .slide__frame img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
#hero .slide__frame img {
  max-width: none;
  object-fit: cover;
  filter: contrast(1.03) saturate(1.04);
}

/* one slow push-in (about 7 %) around his face, then it holds */
@keyframes hero-kb {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(1.075) translate3d(-.5%, -.9%, 0); }
}
#hero.is-live .slide .slide__frame {
  animation: hero-kb calc(14s * var(--slow)) cubic-bezier(.3, .1, .3, 1) both;
}

/* bloom: the screen's light spilling past its own frame, screen-blended on the photo */
#hero .slide__bloom {
  position: absolute;
  left: calc(var(--sx) - var(--sw) * 1.15);
  top: calc(var(--sy) - var(--sh) * 1.3);
  width: calc(var(--sw) * 2.3);
  height: calc(var(--sh) * 2.6);
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 246, 228, .5) 0%, rgba(246, 217, 166, .2) 48%, rgba(246, 217, 166, 0) 100%);
  opacity: 0;
}

/* the colour the logo throws into the room, on the navy beside the panel */
#hero .slide__spill {
  position: absolute;
  top: 6%;
  bottom: 2%;
  right: 100%;
  width: 70%;
  pointer-events: none;
  /* centred inside the navy and gone by the photo's edge, so the two never meet on a seam */
  background: radial-gradient(closest-side at 64% 40%, rgba(var(--glow), .2), rgba(var(--glow), .07) 55%, rgba(var(--glow), 0) 100%);
}

/* the veil: the room, dark. Only the projector screen is a window in it, then the window opens
   until the whole room is lit. It exists only with scripts on, and ends transparent. */
html.js #hero .slide__veil {
  /* --hf: the feather; it widens as the window opens, so the light spreads out from the screen softly
     instead of as a growing box */
  --hf: calc(3% + 9% * var(--hk));
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--night);
  -webkit-mask-image:
    linear-gradient(90deg,
      #000 calc(var(--sx) - var(--sw) * var(--hk) - var(--hf)), transparent calc(var(--sx) - var(--sw) * var(--hk) + 3%),
      transparent calc(var(--sx) + var(--sw) * var(--hk) - 3%), #000 calc(var(--sx) + var(--sw) * var(--hk) + var(--hf))),
    linear-gradient(180deg,
      #000 calc(var(--sy) - var(--sh) * var(--hk) - var(--hf)), transparent calc(var(--sy) - var(--sh) * var(--hk) + 3%),
      transparent calc(var(--sy) + var(--sh) * var(--hk) - 3%), #000 calc(var(--sy) + var(--sh) * var(--hk) + var(--hf)));
  mask-image:
    linear-gradient(90deg,
      #000 calc(var(--sx) - var(--sw) * var(--hk) - var(--hf)), transparent calc(var(--sx) - var(--sw) * var(--hk) + 3%),
      transparent calc(var(--sx) + var(--sw) * var(--hk) - 3%), #000 calc(var(--sx) + var(--sw) * var(--hk) + var(--hf))),
    linear-gradient(180deg,
      #000 calc(var(--sy) - var(--sh) * var(--hk) - var(--hf)), transparent calc(var(--sy) - var(--sh) * var(--hk) + 3%),
      transparent calc(var(--sy) + var(--sh) * var(--hk) - 3%), #000 calc(var(--sy) + var(--sh) * var(--hk) + var(--hf)));
  animation: hero-veil calc(1.15s * var(--slow)) linear both;
}
@keyframes hero-veil {
  0% { --hk: 0; opacity: 1; animation-timing-function: linear; }
  6% { --hk: .94; opacity: 1; animation-timing-function: linear; }   /* the screen snaps on */
  11% { --hk: .5; opacity: 1; animation-timing-function: linear; }   /* flickers down */
  16% { --hk: 1; opacity: 1; animation-timing-function: linear; }
  21% { --hk: .78; opacity: 1; animation-timing-function: linear; }
  27% { --hk: 1.02; opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .2, 1); }
  100% { --hk: 4.8; opacity: 0; }                                     /* and the room comes up */
}
/* the screen's own flash: the same flicker, a little brighter than the photo */
@keyframes hero-flash {
  0% { opacity: 0; }
  6% { opacity: .95; }
  11% { opacity: .35; }
  16% { opacity: 1; }
  21% { opacity: .6; }
  30% { opacity: .85; }
  100% { opacity: 0; }
}
html.js #hero:not(.done) .slide:first-child .slide__bloom { animation: hero-flash calc(1.3s * var(--slow)) linear both; }
html.js #hero.done .slide__veil { display: none; }

/* a soft edge: the photo dissolves into the navy at the left; the header and the bottom get a quiet shade */
#hero .hero__edge {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--temple-navy) 0%, rgba(14, 36, 59, .78) 7%, rgba(14, 36, 59, .22) 20%, rgba(14, 36, 59, 0) 32%),
    linear-gradient(180deg, rgba(8, 22, 36, .78) 0%, rgba(8, 22, 36, 0) 22%),
    linear-gradient(0deg, rgba(14, 36, 59, .78) 0%, rgba(14, 36, 59, 0) 20%);
}

/* ---------- caption ---------- */

#hero .hero__meta {
  position: absolute;
  z-index: 4;
  left: clamp(20px, 3vw, 44px);
  bottom: clamp(22px, 4.2vh, 44px);
  display: flex;
  align-items: center;
  gap: 16px;
}
html.js #hero:not(.done) .hero__meta { animation: hero-rise calc(.5s * var(--slow)) var(--ease) calc(.82s * var(--slow)) both; }
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
#hero .hero__chip { margin: 0; background: rgba(8, 22, 36, .72); }

/* the projector breathing: a soft band of light drifts across the screen every few seconds, screen-blended */
#hero .slide__sweep {
  position: absolute;
  left: calc(var(--sx) - var(--sw));
  top: calc(var(--sy) - var(--sh));
  width: calc(var(--sw) * 2);
  height: calc(var(--sh) * 2);
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
}
#hero .slide__sweep::before {
  content: "";
  position: absolute;
  inset: -20% -70%;
  background: linear-gradient(104deg, rgba(255, 246, 228, 0) 38%, rgba(255, 246, 228, .3) 50%, rgba(255, 246, 228, 0) 62%);
  transform: translateX(-70%);
}
@keyframes hero-sweep {
  0% { transform: translateX(-70%); }
  42%, 100% { transform: translateX(70%); }
}
html.js #hero.is-live .slide__sweep::before {
  animation: hero-sweep calc(7.5s * var(--slow)) cubic-bezier(.45, 0, .3, 1) calc(1.6s * var(--slow)) infinite;
}

/* off screen or in a hidden tab: everything holds still */
#hero.is-paused :is(.slide__frame, .slide__bloom) { animation-play-state: paused; }
#hero.is-paused .slide__sweep::before { animation-play-state: paused; }

/* ---------- copy ---------- */

#hero .hero__copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(calc(50% - 16px), calc(var(--hero-left) + 38rem));
  height: 100%;
  padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + clamp(8px, 2vh, 28px)) 0 clamp(32px, 6vh, 72px) var(--hero-left);
}
#hero .eyebrow { max-width: none; margin-bottom: clamp(12px, 2vh, 18px); }
#hero .nb { white-space: nowrap; }
#hero .hero__line {
  margin: 0 0 clamp(14px, 2.4vh, 24px);
  font-size: clamp(2.2rem, .8rem + 3.2vw, 4.7rem);
  line-height: 1.05;
  color: var(--linen);
}
#hero .hero__sub {
  max-width: 44ch;
  margin: 0 0 clamp(18px, 3vh, 30px);
  font-size: clamp(.96rem, .9rem + .2vw, 1.1rem);
  line-height: 1.55;
  color: rgba(245, 233, 200, .88);
}
#hero .hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
#hero .link-arrow { font-size: .95rem; }

/* Delivered Type, hurried: the shared choreography takes 3 seconds, this room has 1.2. The words land in half the
   time and "shaking" / "taller" do their thing as they arrive. The finished states are mirrored here because the
   shared ones are less specific than these overrides. */
html.js #hero [data-deliver].on .w { animation-duration: calc(.5s * var(--slow)); }
html.js #hero [data-deliver].on .w[data-fx="tremble"] {
  animation:
    vb-word-in calc(.5s * var(--slow)) var(--ease) calc(var(--d, 0s) * var(--slow)) forwards,
    vb-tremble calc(.7s * var(--slow)) linear calc((var(--d, 0s) + .04s) * var(--slow)) both;
}
html.js #hero [data-deliver].on .w[data-fx="rise"] {
  animation:
    vb-word-in calc(.5s * var(--slow)) var(--ease) calc(var(--d, 0s) * var(--slow)) forwards,
    vb-rise calc(.6s * var(--slow)) var(--ease) calc((var(--d, 0s) + .05s) * var(--slow)) both;
}
html.js #hero [data-spot].on [data-after] { animation-duration: calc(.5s * var(--slow)); }
html.js #hero [data-deliver].done .w {
  opacity: 1;
  transform: none;
  filter: none;
  animation: none;
}
html.js #hero [data-deliver].done .w[data-fx="tremble"] { translate: none; rotate: none; scale: none; }
html.js #hero [data-deliver].done .w[data-fx="rise"] {
  font-variation-settings: "wght" 640, "opsz" 144;
  translate: 0 -.05em;
  scale: 1 1.07;
}
html.js #hero [data-spot].done [data-after] {
  opacity: 1;
  transform: none;
  animation: none;
}
html.js #hero.done .hero__meta,
html.js #hero.done .slide__bloom { animation: none; }

/* Open-questions layer: Delivered Type words are inline-block, so a dashed underline would not draw. Outline the line instead. */
html.notes-on #hero :is(h1, .hero__sub)[data-tbc] {
  text-decoration: none;
  outline: 1.5px dashed var(--note);
  outline-offset: 8px;
}

/* ---------- the pillars, rolling, directly under the hero ---------- */

.pillars-banner {
  background: var(--house-dark);
  border-block: 1px solid var(--rule);
  font-size: var(--pb-fs);
  line-height: 1.1;
  padding-block: .06em .14em;
  box-sizing: border-box;
  height: var(--pb-h);
}

/* ---------- phones and tablets held upright: photo on top, copy below on solid Temple Navy ---------- */

@media (max-width: 899.98px) and (min-height: 561px) {
  #hero {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    max-height: none;
  }
  #hero .hero__panel {
    position: relative;
    inset: auto;
    flex: none;
    width: 100%;
    height: clamp(15rem, 54svh, 38rem);
  }
  #hero .hero__edge {
    background:
      linear-gradient(180deg, rgba(8, 22, 36, .78) 0%, rgba(8, 22, 36, 0) 26%),
      linear-gradient(0deg, var(--temple-navy) 0%, rgba(14, 36, 59, .7) 12%, rgba(14, 36, 59, 0) 38%);
  }
  /* the colour of the logo pools under the photo instead of beside it */
  #hero .slide__spill {
    top: 72%;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 52%;
    margin: 0;
    background: radial-gradient(ellipse 62% 100% at 50% 0%, rgba(var(--glow), .24), rgba(var(--glow), 0) 100%);
  }
  #hero .hero__meta { left: var(--gutter-l); right: var(--gutter-r); bottom: 14px; justify-content: space-between; }
  #hero .hero__copy {
    flex: 1 1 auto;
    width: auto;
    height: auto;
    padding: 16px var(--gutter-r) calc(18px + env(safe-area-inset-bottom, 0px)) var(--gutter-l);
  }
  #hero .eyebrow { font-size: .64rem; margin-bottom: 10px; }
  #hero .hero__line { font-size: clamp(1.7rem, 8.4vw, 3.3rem); margin-bottom: 12px; }
  #hero .hero__sub { max-width: 52ch; font-size: .9rem; line-height: 1.5; margin-bottom: 14px; }
}
/* tablets held upright: more photo, more air */
@media (min-width: 600px) and (max-width: 899.98px) and (min-height: 561px) {
  #hero .hero__panel { height: clamp(24rem, 58svh, 46rem); }
  /* a wide panel shows only about half of the upright photo: frame the logo's title and his face
     (both near the middle of all three photos) instead of the top of the screen */
  #hero .slide__frame { top: 26%; translate: calc(var(--fx, 50%) * -1) -26%; }
  #hero .hero__edge {
    background:
      linear-gradient(180deg, rgba(8, 22, 36, .78) 0%, rgba(8, 22, 36, 0) 22%),
      linear-gradient(0deg, var(--temple-navy) 0%, rgba(14, 36, 59, .6) 8%, rgba(14, 36, 59, 0) 22%);
  }
  #hero .eyebrow { font-size: .72rem; }
  #hero .hero__line { font-size: clamp(2.5rem, 6.2vw, 3.6rem); margin-bottom: 16px; }
  #hero .hero__sub { font-size: 1.04rem; max-width: 50ch; margin-bottom: 18px; }
}
/* keep the first button clear of the compact "?" notes badge that floats bottom right on phones */
@media (max-width: 599.98px) {
  /* "Vocal Alchemy" rolls past in the banner right under the hero; on phones the eyebrow keeps to two lines */
  #hero .hero__va { display: none; }
  #hero .hero__ctas { padding-right: 48px; gap: 10px 20px; }
  #hero .hero__ctas .btn { padding-inline: 1.1rem; font-size: .92rem; }
}
@media (max-width: 380px) {
  #hero .hero__ctas .btn { padding-inline: 1rem; font-size: .88rem; }
}
/* short, narrow phones: tighten so nothing is clipped */
@media (max-width: 899.98px) and (min-height: 561px) and (max-height: 780px) {
  #hero .hero__panel { height: clamp(14rem, 51svh, 36rem); }
  #hero .hero__sub { font-size: .86rem; line-height: 1.45; margin-bottom: 12px; }
  #hero .eyebrow { margin-bottom: 8px; }
  #hero .hero__line { margin-bottom: 10px; }
}

/* ---------- short screens (landscape phones, squat windows): the desktop split, tightened ---------- */

@media (max-height: 560px) {
  #hero { height: auto; min-height: 100vh; min-height: 100svh; max-height: none; }
  #hero .hero__copy { height: auto; min-height: 100vh; min-height: 100svh; padding-bottom: 28px; }
  #hero .hero__panel { width: 46%; }
  #hero .hero__copy { width: min(calc(54% - 8px), calc(var(--hero-left) + 38rem)); }
  #hero .eyebrow { font-size: .6rem; letter-spacing: .12em; margin-bottom: 8px; }
  #hero .hero__line { font-size: clamp(1.4rem, 3.1vw, 2.3rem); margin-bottom: 10px; }
  #hero .hero__sub { max-width: 48ch; font-size: .82rem; line-height: 1.45; margin-bottom: 12px; }
  #hero .hero__ctas { gap: 8px 18px; padding-right: 0; }
  #hero .hero__ctas .btn { min-height: 44px; padding-inline: 1.1rem; font-size: .9rem; }
  #hero .link-arrow { font-size: .88rem; }
  #hero .hero__meta { bottom: 14px; }
}

/* ---------- reduced motion: the first photo, still, everything visible at once ---------- */
@media (prefers-reduced-motion: reduce) {
  #hero .slide__veil,
  #hero .slide__bloom,
  #hero .slide__sweep { display: none !important; }
  #hero .hero__meta,
  #hero .hero__shift { animation: none !important; transform: none !important; }
  #hero .slide__frame { animation: none !important; }
  #hero .slide { transition: none !important; }
}
/* Temple of Speak, room 2: Not performance.
   Three of Vahan's own lines on Temple Navy, set large and left to breathe. Each is delivered when it
   reaches the middle of the screen (Delivered Type, in a quieter voice than the hero), and a soft pool
   of warm light settles behind it as it lands. No effect words, nothing that loops. */

#not-performance {
  --np-gap: clamp(96px, 18vh, 210px);
  padding-block: clamp(88px, 12vw, 200px);
}

#not-performance .eyebrow { margin-bottom: 0; }

#not-performance .np__quotes {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(12px, 2vw, 32px);
  row-gap: var(--np-gap);
  margin-top: clamp(44px, 7vw, 104px);
}

#not-performance .said {
  position: relative;
  isolation: isolate;
  margin: 0;
}
#not-performance .said--lead { grid-column: 1 / span 11; }
#not-performance .said--b { grid-column: 6 / span 7; }
#not-performance .said--c { grid-column: 2 / span 9; }

#not-performance .np__q {
  font-size: clamp(1.75rem, 1.1rem + 2.1vw, 3.05rem);
  line-height: 1.12;
  color: var(--linen);
}
#not-performance .np__q--lead {
  font-size: clamp(2.2rem, 1.05rem + 4.5vw, 5.5rem);
  line-height: 1.04;
  letter-spacing: -.02em;
}

/* the pool of light that settles behind each line as it is delivered */
#not-performance .said::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -12%;
  top: 50%;
  width: 96%;
  height: 190%;
  transform: translateY(-50%);
  background: radial-gradient(closest-side, rgba(246, 217, 166, .105), rgba(246, 217, 166, .03) 60%, rgba(246, 217, 166, 0) 100%);
  pointer-events: none;
  transition: opacity calc(1.8s * var(--slow)) var(--ease);
}
#not-performance .said--b::before { left: 4%; }
html.js #not-performance .said:not(.on):not(.done)::before { opacity: 0; }
html.js #not-performance .said.done::before { opacity: 1; transition: none; }

/* Delivered Type, quieter: a shorter rise, less blur, a slower fade. The finished state is mirrored
   here because the shared finished-state rule is less specific than this override. */
html.js #not-performance [data-deliver] .w {
  transform: translateY(.12em);
  filter: blur(3px);
}
html.js #not-performance :is([data-deliver].on, .said.on [data-deliver]) .w {
  animation-duration: calc(1.1s * var(--slow));
}
html.js #not-performance :is([data-deliver].done, .said.done [data-deliver]) .w {
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js #not-performance [data-deliver] .w { transform: none; filter: none; }
  #not-performance .said::before { opacity: 1 !important; transition: none; }
}

/* Open-questions layer: the words are inline-block, so outline the line instead of underlining it */
html.notes-on #not-performance [data-deliver][data-tbc] {
  text-decoration: none;
  outline: 1.5px dashed var(--note);
  outline-offset: 10px;
}

/* signature */
#not-performance .np__by {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: clamp(56px, 7vw, 96px) 0 0;
  color: var(--fg-soft);
  font-size: .92rem;
  letter-spacing: .01em;
}
#not-performance .np__by .mark-ellipse { flex: none; }

@media (max-width: 759.98px) {
  #not-performance { --np-gap: clamp(72px, 14vh, 120px); }
  #not-performance .said--lead,
  #not-performance .said--b,
  #not-performance .said--c { grid-column: 1 / -1; }
  #not-performance .said--b { padding-left: 8vw; }
  #not-performance .said::before { left: -20%; width: 140%; }
  #not-performance .np__q--lead { font-size: clamp(2.05rem, 9.2vw, 3.3rem); }
  #not-performance .np__q { font-size: clamp(1.6rem, 7vw, 2.4rem); }
}
/* v4: the session strip. A slow photo banner of Vahan mid-session, set on the same navy as the rooms
   either side so it reads as part of the page, not an insert. The banner itself (drift, copies, pause on
   hover, reduced motion) is the shared .marquee component. */

#session {
  position: relative;
  background: var(--temple-navy);
  color: var(--linen);
  --bg: var(--temple-navy);
  --fg: var(--linen);
  --rule: rgba(183, 161, 122, .26);
  padding-block: clamp(8px, 2vw, 24px) clamp(56px, 7vw, 104px);
}
#session .session-strip__band { --strip-h: clamp(250px, 26vw, 380px); }
#session .marquee--photos img {
  border-radius: 2px;
  filter: saturate(.94);
}
#session .session-strip__cap { margin-top: clamp(14px, 1.8vw, 22px); }
#session .chip { margin: 0; }

@media (max-width: 599.98px) {
  #session .session-strip__band { --strip-h: 270px; }
}
/* Temple of Speak, room 3: Three pillars.
   The logo disc sits on the left with its light burst on the rim. Three gold rays leave it and reach the
   three pillars, each ending in a small pool of light (the brand's gold ellipse) beside the pillar's name.
   Desktop: disc | rays | pillars. Phones: the disc on top, then one gold line running down the left with a pool
   at every pillar. The rays are wipes from the shared reveal system (nothing hidden unless html.js and
   .below are set; finished states are guaranteed by core.js). */

#pillars {
  --D: clamp(196px, 22vw, 288px);          /* disc diameter */
  --R: clamp(100px, 17vw, 250px);          /* width of the ray gutter */
  --row-h: 10rem;
  --f: .125;                               /* where the pillar name's centre sits in its row, as a fraction of the row */
  --pfs: clamp(1.55rem, 1rem + 1.25vw, 2.15rem);   /* pillar name size */
  padding-block: clamp(80px, 10vw, 168px);
  background:
    radial-gradient(60% 55% at 14% 58%, rgba(212, 168, 75, .11), rgba(212, 168, 75, 0) 70%),
    var(--temple-navy);
}

#pillars .pillars__head { margin-bottom: clamp(44px, 6vw, 88px); }
#pillars .pillars__head .eyebrow { margin-bottom: 14px; }
#pillars .pillars__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- stage (desktop) ---------- */

#pillars .pillars__stage {
  display: grid;
  grid-template-columns: var(--D) var(--R) minmax(0, 1fr);
  align-items: stretch;
}

/* the disc: centred on the middle pillar's name line, so the rays fan evenly up and down */
#pillars .pillars__logo { position: relative; }
#pillars .disc-wrap {
  position: absolute;
  left: 0;
  width: var(--D);
  top: calc((1 + var(--f)) / 3 * 100% - var(--D) / 2);
}
#pillars .disc {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--temple-navy);
  box-shadow:
    0 0 0 1px rgba(183, 161, 122, .5),
    0 0 0 9px rgba(183, 161, 122, .07),
    0 0 90px rgba(212, 168, 75, .2),
    0 28px 80px rgba(2, 6, 11, .5);
}
/* the lockup is 1200x658; its disc is 590px wide centred at (324, 331): scale it so the disc fills the circle */
#pillars .disc img {
  position: absolute;
  width: 203.4%;
  max-width: none;
  height: auto;
  left: -4.9%;
  top: -6.1%;
}
#pillars .disc-cap {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 22px);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  text-align: center;
}
#pillars .disc-cap__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 420;
  font-variation-settings: "opsz" 60;
  letter-spacing: .005em;
  color: var(--linen);
}

/* rays */
#pillars .pillars__rays { position: relative; }
#pillars .ray { position: absolute; inset: 0; }
#pillars .ray svg { display: block; width: 100%; height: 100%; overflow: visible; }
#pillars .ray path {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
#pillars .ray .core { stroke: #D4A84B; stroke: url(#vb-ray) #D4A84B; stroke-width: 1.6px; }
#pillars .ray .halo { stroke: var(--stage-gold); stroke-width: 7px; stroke-opacity: .13; }

/* pillars */
#pillars .pillars__list {
  display: grid;
  grid-auto-rows: 1fr;
  min-height: calc(3 * var(--row-h));
  margin: 0;
  padding: 0;
  list-style: none;
}
#pillars .pillar {
  position: relative;
  padding-left: clamp(22px, 2.4vw, 34px);
  padding-right: 4px;
}
#pillars .pool {
  position: absolute;
  left: -13px;
  top: calc(var(--pfs) * .575 - 5px);
}
#pillars .pillar__name {
  margin: 0 0 .5rem;
  font-size: var(--pfs);
  font-weight: 380;
  font-variation-settings: "opsz" 96;
  line-height: 1.15;
  letter-spacing: -.012em;
  color: var(--linen);
}
#pillars .pillar__line {
  max-width: 36ch;
  margin: 0;
  font-size: clamp(.98rem, .93rem + .2vw, 1.08rem);
  line-height: 1.55;
  color: var(--fg-soft);
}
#pillars .pillar__line[data-tbc] { text-decoration-skip-ink: none; }

/* the pool lights up as its ray arrives */
html.js #pillars .pillar.below:not(.is-in) .pool { transform: scale(.3); }
html.js #pillars .pillar.below.is-in .pool {
  transition: transform calc(1.1s * var(--slow)) var(--ease) calc(var(--rd, 0s) * var(--slow));
}
html.js #pillars .pillar.below.is-in.done .pool { transform: none; transition: none; }

/* ---------- phones: one line down the left, a pool at every pillar ---------- */

@media (max-width: 759.98px) {
  #pillars {
    --Dm: 120px;
    --feed: 30px;                             /* gap between the disc and the first pillar */
    --rg: 34px;                             /* gap between pillars */
    --zt: calc(var(--pfs) * .575);
    background:
      radial-gradient(70% 22% at 20% 22%, rgba(212, 168, 75, .13), rgba(212, 168, 75, 0) 70%),
      var(--temple-navy);
  }
  #pillars .pillars__stage { grid-template-columns: minmax(0, 1fr); row-gap: var(--feed); }
  #pillars .pillars__logo { position: static; }
  #pillars .disc-wrap {
    position: static;
    display: flex;
    align-items: center;
    gap: 20px;
    width: auto;
  }
  #pillars .disc { flex: none; width: var(--Dm); }
  #pillars .disc-cap {
    position: static;
    align-items: flex-start;
    text-align: left;
  }
  #pillars .pillars__rays { display: none; }

  #pillars .pillars__list { row-gap: var(--rg); min-height: 0; }
  #pillars .pillar {
    --rd: 0s !important;                    /* rows reveal on their own as they scroll in */
    padding-left: calc(var(--Dm) / 2 + 26px);
  }
  #pillars .pillar__line { max-width: 40ch; }
  #pillars .pool { left: calc(var(--Dm) / 2 - 13px); }

  /* the line: this pillar's segment runs from the previous pool (or the disc) down to its own pool */
  #pillars .pillar::before {
    content: "";
    position: absolute;
    left: calc(var(--Dm) / 2 - .8px);
    width: 1.6px;
    top: calc(var(--zt) - 100% - var(--rg));
    height: calc(100% + var(--rg));
    background: linear-gradient(180deg, rgba(246, 217, 166, .95), var(--stage-gold));
    box-shadow: 0 0 10px rgba(212, 168, 75, .35);
    transform-origin: top;
  }
  #pillars .pillar:first-child::before {
    top: calc(-1 * var(--feed));
    height: calc(var(--feed) + var(--zt));
  }
  html.js #pillars .pillar.below:not(.is-in)::before { transform: scaleY(0); }
  html.js #pillars .pillar.below.is-in::before { transition: transform calc(1.1s * var(--slow)) var(--ease); }
  html.js #pillars .pillar.below.is-in.done::before { transform: none; transition: none; }
}

/* Open-questions layer: pillar lines are plain text, the shared underline works. Keep the ray gutter out of it. */
html.notes-on #pillars .pillar__line[data-tbc] { text-decoration-thickness: 1.5px; }

@media (prefers-reduced-motion: reduce) {
  #pillars .pool, #pillars .pillar::before { transform: none !important; transition: none !important; }
}
/* Room 4: The Circle of Ten.
   A sticky stage inside a 150vh .scene (v4: was 220vh). Scroll progress (--p, via VB.scene) turns the ring a tenth per
   step; each chair that reaches the spot lights gold and stays lit, a gold arc joins the lit chairs, the
   panel switches at week 8, and at ten the ring breathes once.
   Phones: the ring sticks under the header while ten week rows scroll beneath it.

   Robustness: everything below is the finished state (all ten chairs lit, both phases on show, arcs
   complete). 04-circle-of-ten.js adds .is-live on #circle-of-ten and only then do the progressive states
   (unlit chairs, one phase at a time, cropped arc) apply. */

#circle-of-ten,
#circle-of-ten .scene__stage { background: var(--temple-navy); }

#circle-of-ten .scene__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(48% 62% at 73% 52%, rgba(212, 168, 75, .13), transparent 72%),
    radial-gradient(60% 50% at 0% 100%, rgba(8, 22, 36, .55), transparent 70%);
  pointer-events: none;
}

/* ---------- Layout (desktop) ---------- */

#circle-of-ten .cot__inner {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  column-gap: clamp(32px, 6vw, 104px);
  padding-top: calc(var(--header-h) + 8px);
  padding-bottom: clamp(20px, 4vh, 48px);
}
#circle-of-ten .cot__copy { min-width: 0; max-width: 33rem; }

#circle-of-ten .cot__title {
  font-size: clamp(2.3rem, .9rem + 3.8vw, 4.4rem);
  line-height: 1;
  margin-bottom: clamp(14px, 2.4vh, 24px);
}
#circle-of-ten .cot__lede { max-width: 31ch; margin: 0; }

/* ---------- Panel: ten cells + the current phase ---------- */

#circle-of-ten .cot__panel {
  margin: clamp(18px, 3.4vh, 38px) 0 clamp(16px, 2.8vh, 30px);
  padding-top: clamp(16px, 2.8vh, 28px);
  border-top: 1px solid var(--rule);
}
#circle-of-ten .cot__cells { display: flex; gap: 6px; margin-bottom: clamp(14px, 2.4vh, 22px); max-width: 24rem; }
#circle-of-ten .cot__cells i {
  flex: 1 1 0;
  height: 6px;
  border-radius: 3px;
  background: rgba(183, 161, 122, .28);
}
#circle-of-ten .cot__cells i:nth-child(6) { margin-right: 14px; }
#circle-of-ten .cot__cells i.is-lit { background: var(--stage-gold); box-shadow: 0 0 10px rgba(212, 168, 75, .45); }

#circle-of-ten .cot__phases { display: grid; gap: 20px; }
#circle-of-ten .cot__weeks-label {
  margin: 0 0 .5rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-text);
}
#circle-of-ten .cot__phase-title {
  margin: 0 0 .4rem;
  font-size: clamp(1.5rem, 1rem + 1.4vw, 2.2rem);
  line-height: 1.1;
  font-weight: 400;
  font-variation-settings: "opsz" 96;
}
#circle-of-ten .cot__phase-sub { margin: 0; color: var(--fg-soft); }

#circle-of-ten .cot__cohort { margin: 0; }
#circle-of-ten .cot__next {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + .7vw, 1.5rem);
  line-height: 1.2;
}
#circle-of-ten .cot__next strong { font-weight: 600; color: var(--stage-gold); }
#circle-of-ten .cot__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--stage-gold);
  box-shadow: 0 0 0 3px rgba(212, 168, 75, .2);
}
#circle-of-ten .cot__hint { display: none; margin: clamp(14px, 2.4vh, 26px) 0 0; letter-spacing: .04em; }

/* ---------- The ring ---------- */

#circle-of-ten .cot__ringcol { min-width: 0; display: grid; place-items: center; }
#circle-of-ten .cot__ring {
  position: relative;
  width: min(100%, calc(100dvh - var(--header-h) - 64px));
  aspect-ratio: 1;
}
#circle-of-ten .cot__ring svg { display: block; width: 100%; height: 100%; overflow: visible; }

#circle-of-ten .cot__mark { fill: none; stroke: var(--stage-gold); stroke-opacity: .5; stroke-width: 1.5; }
#circle-of-ten .cot__mark--inner { stroke-opacity: .24; stroke-dasharray: 1.5 7; stroke-linecap: round; }
#circle-of-ten .cot__track { fill: none; stroke: var(--brass); stroke-opacity: .22; stroke-width: 1.2; stroke-dasharray: 1 8; stroke-linecap: round; }

#circle-of-ten .cot__beam { opacity: .9; }
#circle-of-ten .cot__shade { fill: #1b3550; stroke: rgba(183, 161, 122, .55); stroke-width: 1.2; }
#circle-of-ten .cot__bulb { fill: var(--tungsten); }

#circle-of-ten .cot__arc,
#circle-of-ten .cot__close {
  fill: none;
  stroke: var(--stage-gold);
  stroke-width: 3.2;
  stroke-linecap: round;
}
/* the closing tenth has pathLength="1000" and is drawn with CSS; the main arc is driven by the script */
#circle-of-ten .cot__close { stroke-dasharray: 1000; stroke-dashoffset: 0; }

#circle-of-ten .cot__seat { fill: var(--temple-navy); stroke: rgba(183, 161, 122, .72); stroke-width: 1.6; transition: fill var(--t-med) var(--ease), stroke var(--t-med) var(--ease); }
#circle-of-ten .cot__back { fill: none; stroke: rgba(183, 161, 122, .58); stroke-width: 7; stroke-linecap: round; transition: stroke var(--t-med) var(--ease); }
#circle-of-ten .cot__arm { fill: none; stroke: rgba(183, 161, 122, .5); stroke-width: 4; stroke-linecap: round; transition: stroke var(--t-med) var(--ease); }
#circle-of-ten .cot__chair.is-lit .cot__arm { stroke: var(--stage-gold); }
#circle-of-ten .cot__chair.is-top .cot__arm { stroke: var(--tungsten); }
#circle-of-ten .cot__chair.is-lit .cot__seat { fill: #D4A84B; fill: url(#cot-gold) #D4A84B; stroke: var(--tungsten); }
#circle-of-ten .cot__chair.is-lit .cot__back { stroke: var(--stage-gold); }
#circle-of-ten .cot__chair.is-top .cot__back { stroke: var(--tungsten); }

#circle-of-ten .cot__num {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  pointer-events: none;
}
#circle-of-ten .cot__num-k,
#circle-of-ten .cot__num-of {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  /* sits on the lit gold pool: brightened for contrast */
  color: rgba(246, 217, 166, .85);
}
#circle-of-ten .cot__n {
  display: block;
  margin: .12em 0 .02em;
  font-family: var(--font-display);
  font-size: clamp(4.4rem, 9.6vw, 8.4rem);
  font-weight: 340;
  font-variation-settings: "opsz" 144;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--linen);
}
#circle-of-ten .cot__n.is-new { animation: cot-n calc(.55s * var(--slow)) var(--ease) both; }
@keyframes cot-n { from { transform: translateY(.14em); } to { transform: none; } }

/* The ring breathes once at ten: 4 s in, 6 s out, like the Slow down ring */
@keyframes cot-breathe { 0% { scale: 1; } 40% { scale: 1.035; } 100% { scale: 1; } }
#circle-of-ten .cot__ring.is-breathing { animation: cot-breathe calc(10s * var(--slow)) ease-in-out 1; }

/* ---------- Live (progressive) states ---------- */

#circle-of-ten.is-live .cot__chair:not(.is-lit) .cot__seat { fill: var(--temple-navy); stroke: rgba(183, 161, 122, .72); }
#circle-of-ten.is-live .cot__cells i:not(.is-lit) { background: rgba(183, 161, 122, .28); box-shadow: none; }
#circle-of-ten.is-live .cot__cells i { transition: background-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }

#circle-of-ten.is-live .cot__close { stroke-dashoffset: 1000; }
#circle-of-ten.is-live.is-ten .cot__close { stroke-dashoffset: 0; transition: stroke-dashoffset calc(1.5s * var(--slow)) var(--ease); }
#circle-of-ten.is-live.ten-done .cot__close { transition: none; }

#circle-of-ten.is-live .cot__phases { grid-template: 1fr / 1fr; gap: 0; }
#circle-of-ten.is-live .cot__phase { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px); }
#circle-of-ten.is-live .cot__panel[data-phase="a"] .cot__phase[data-p="a"],
#circle-of-ten.is-live .cot__panel[data-phase="b"] .cot__phase[data-p="b"] { opacity: 1; visibility: visible; transform: none; }
/* the crossfade only runs while .is-swapping is on (JS removes it after the swap), so a stalled
   animation clock can never leave a phase half-faded */
#circle-of-ten.is-live.is-swapping .cot__phase {
  transition: opacity calc(.6s * var(--slow)) var(--ease), transform calc(.8s * var(--slow)) var(--ease), visibility 0s linear calc(.6s * var(--slow));
}
#circle-of-ten.is-live.is-swapping .cot__panel[data-phase="a"] .cot__phase[data-p="a"],
#circle-of-ten.is-live.is-swapping .cot__panel[data-phase="b"] .cot__phase[data-p="b"] {
  transition-delay: calc(.25s * var(--slow)), calc(.25s * var(--slow)), 0s;
}

#circle-of-ten.is-live .cot__hint { display: block; transition: color var(--t-med) var(--ease); }
#circle-of-ten.is-live.is-moved .cot__hint { color: transparent; }

/* ---------- Week rows (phones only) ---------- */

#circle-of-ten .cot__weeks { display: none; }
#circle-of-ten .cot__rows { margin: 0; padding: 0; list-style: none; }
#circle-of-ten .cot__row {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  min-height: 11vh;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
#circle-of-ten .cot__rn {
  font-family: var(--font-display);
  font-size: 2.7rem;
  font-weight: 340;
  font-variation-settings: "opsz" 144;
  font-variant-numeric: lining-nums;
  line-height: .9;
  color: var(--stage-gold);
}
#circle-of-ten .cot__rk {
  margin: 0 0 .3rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-text);
}
#circle-of-ten .cot__rt { margin: 0; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.2; color: var(--linen); }
#circle-of-ten .cot__rd { margin: .5rem 0 0; font-size: .9rem; color: var(--fg-soft); }
#circle-of-ten.is-live .cot__rn { color: rgba(183, 161, 122, .6); transition: color var(--t-med) var(--ease); }
#circle-of-ten.is-live .cot__row.is-past .cot__rn { color: rgba(212, 168, 75, .68); }
#circle-of-ten.is-live .cot__row.is-cur .cot__rn { color: var(--stage-gold); }
#circle-of-ten.is-live .cot__row:not(.is-cur):not(.is-past) .cot__rt { color: rgba(245, 233, 200, .66); }

/* ---------- Short laptop screens: keep the whole stage inside one screen ---------- */

@media (min-width: 760px) and (max-height: 760px) {
  #circle-of-ten .cot__title { font-size: clamp(2.1rem, 1rem + 3vw, 3.4rem); }
  #circle-of-ten .cot__lede { font-size: 1rem; max-width: 40ch; }
  #circle-of-ten .cot__phase-title { font-size: clamp(1.35rem, 1rem + 1vw, 1.8rem); }
  #circle-of-ten .cot__hint { display: none !important; }
}

/* ---------- Phones: sticky ring + scrolling week rows ---------- */

@media (max-width: 759.98px) {
  #circle-of-ten { height: auto; }
  #circle-of-ten .scene__stage { position: static; height: auto; overflow: visible; }
  #circle-of-ten .cot__inner { display: block; height: auto; padding-top: clamp(64px, 16vw, 88px); padding-bottom: 12vh; }
  #circle-of-ten .cot__copy { max-width: none; padding-bottom: 28px; }
  #circle-of-ten .cot__lede { max-width: 34ch; margin-bottom: 20px; }
  #circle-of-ten .cot__panel,
  #circle-of-ten.is-live .cot__hint { display: none; }
  #circle-of-ten .cot__title { font-size: clamp(2.3rem, 11vw, 3rem); }

  #circle-of-ten .cot__ringcol {
    position: sticky;
    top: calc(var(--header-h) + 4px);
    z-index: 4;
    margin-inline: calc(var(--gutter-l) * -1) calc(var(--gutter-r) * -1);
    padding: 12px var(--gutter-r) 4px var(--gutter-l);
    background: var(--temple-navy);
  }
  #circle-of-ten .cot__ringcol::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 34px;
    background: linear-gradient(var(--temple-navy), rgba(14, 36, 59, 0));
    pointer-events: none;
  }
  #circle-of-ten .cot__ring { width: min(100%, 15.2rem); }
  #circle-of-ten .cot__n { font-size: 3.7rem; }
  #circle-of-ten .cot__num-k,
  #circle-of-ten .cot__num-of { font-size: .6rem; }

  #circle-of-ten .cot__weeks { display: block; margin-top: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  #circle-of-ten .scene__stage { min-height: 0; }
  #circle-of-ten .cot__inner { height: auto; padding-block: var(--room-pad); }
  #circle-of-ten .cot__ringcol { position: static; }
  #circle-of-ten .cot__ring.is-breathing { animation: none; }
}

/* No JavaScript at all: no scrubbing, so no tall empty scene either */
html:not(.js) #circle-of-ten { height: auto; }
html:not(.js) #circle-of-ten .scene__stage { position: relative; height: auto; min-height: 0; overflow: visible; }
html:not(.js) #circle-of-ten .cot__inner { height: auto; padding-block: var(--room-pad); }

#circle-of-ten .cot__halo { fill: rgba(212, 168, 75, .22); fill: url(#cot-halo) rgba(212, 168, 75, .22); opacity: 0; transition: opacity var(--t-med) var(--ease); pointer-events: none; }
#circle-of-ten .cot__chair.is-lit .cot__halo { opacity: .7; }
#circle-of-ten .cot__chair.is-top .cot__halo { opacity: 1; }

/* ---------- Tablets held upright: copy above, ring below ---------- */

@media (min-width: 760px) and (max-width: 1100px) and (orientation: portrait) {
  #circle-of-ten .cot__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: 16px;
    align-content: start;
    padding-top: calc(var(--header-h) + 28px);
  }
  #circle-of-ten .cot__copy { max-width: 42rem; }
  #circle-of-ten .cot__lede { max-width: 40ch; }
  #circle-of-ten .cot__ringcol { height: 100%; }
  #circle-of-ten .cot__ring { width: auto; height: 100%; max-width: 100%; }
}
/* v4: the circle, in the room. One wide photo straight after the Circle of Ten scene, on the same navy,
   so the drawn circle of chairs turns into the real table. */

#in-session {
  padding-block: clamp(8px, 2vw, 28px) clamp(64px, 8vw, 120px);
}
#in-session .ins__fig { margin: 0; }
#in-session .ins__frame {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  aspect-ratio: 16 / 8;
  background: var(--house-dark);
  box-shadow: 0 0 0 1px rgba(183, 161, 122, .22), 0 40px 80px -40px rgba(2, 6, 11, .9);
}
#in-session .ins__frame picture,
#in-session .ins__frame img {
  display: block;
  width: 100%;
  height: 100%;
}
#in-session .ins__frame img {
  max-width: none;
  object-fit: cover;
  object-position: 50% 42%;            /* the table and Vahan standing behind it */
}
#in-session .ins__cap { margin-top: clamp(12px, 1.6vw, 18px); }

@media (max-width: 759.98px) {
  #in-session .ins__frame { aspect-ratio: 4 / 3; margin-inline: calc(var(--gutter-l) * -1) calc(var(--gutter-r) * -1); border-radius: 0; }
  #in-session .ins__frame img { object-position: 46% 40%; }
}
/* Room 5: Come experience it. The one Linen pause on the Temple of Speak page.
   Left: the workshop in plain facts. Right: a small dark stage with the same sentence in Performance mode
   (uppercase, even, flat) and Expression mode (mixed scale, weight and gold). Without the script the page
   shows Expression mode and no toggle; the script (05-workshops.js) starts in Performance mode, turns to
   Expression once when the room is in view, and the toggle works both ways. */

#workshops { overflow: hidden; }
#workshops::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -14vw;
  top: -22%;
  width: 58vw;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(212, 168, 75, .2), rgba(212, 168, 75, 0));
  pointer-events: none;
}

#workshops .ws__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6.4fr);
  align-items: center;
  column-gap: clamp(32px, 6vw, 96px);
  row-gap: clamp(36px, 7vw, 56px);
}
#workshops .ws__copy { min-width: 0; }

#workshops .ws__title {
  font-size: clamp(2.3rem, .9rem + 3.8vw, 4.4rem);
  line-height: 1;
  margin-bottom: clamp(16px, 2.6vw, 26px);
}
#workshops .lede { max-width: 34ch; }

#workshops .ws__facts { margin: clamp(22px, 3vw, 34px) 0; padding: 0; max-width: 31rem; }
#workshops .ws__facts > div {
  display: grid;
  grid-template-columns: 5.6rem minmax(0, 1fr);
  column-gap: 16px;
  align-items: baseline;
  padding: .8rem 0;
  border-top: 1px solid var(--rule);
}
#workshops .ws__facts > div:last-child { border-bottom: 1px solid var(--rule); }
#workshops dt {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-text);
}
#workshops dd { margin: 0; font-size: 1.05rem; line-height: 1.4; color: var(--fg); }

#workshops .ws__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
#workshops .ws__date { margin: 0; font-size: .98rem; color: var(--fg-soft); }

/* ---------- The stage card (dark inside the Linen room) ---------- */

#workshops .ws__demo { min-width: 0; }
#workshops .ws__stage {
  --fg: var(--linen);
  --fg-soft: color-mix(in srgb, var(--linen) 80%, transparent);
  --accent: var(--stage-gold);
  --accent-text: var(--brass);
  --rule: rgba(183, 161, 122, .26);
  --rule-strong: rgba(183, 161, 122, .5);
  --focus: var(--stage-gold);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: clamp(21rem, 34vw, 29rem);
  padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.6vw, 36px) clamp(26px, 3.4vw, 44px);
  border-radius: 28px;
  background: var(--temple-navy);
  color: var(--fg);
  box-shadow: 0 0 0 1px rgba(125, 106, 69, .5), 0 30px 70px -34px rgba(8, 22, 36, .75);
}
#workshops .ws__pool {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 56%;
  width: 118%;
  aspect-ratio: 1.4;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(246, 217, 166, .3), rgba(212, 168, 75, .12) 48%, rgba(212, 168, 75, 0) 100%);
  opacity: 1;
}

#workshops .ws__bar { display: flex; justify-content: center; }
#workshops:not(.is-live) .ws__bar { display: none; }
#workshops .ws__toggle {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(8, 22, 36, .5);
}
#workshops .ws__btn {
  min-height: 40px;
  padding: .55rem 1.1rem;
  border-radius: 999px;
  color: var(--fg-soft);
  font-size: .84rem;
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
#workshops .ws__btn:hover { color: var(--linen); }
#workshops .ws__btn[aria-pressed="true"] { background: var(--stage-gold); color: var(--house-dark); font-weight: 600; }

#workshops .ws__sentence { display: grid; place-items: center; padding-top: clamp(14px, 2vw, 24px); }
#workshops .ws__s {
  grid-area: 1 / 1;
  margin: 0;
  max-width: 100%;
  text-align: center;
  visibility: hidden;
  opacity: 0;
}
#workshops .ws__stage[data-mode="performance"] .ws__s--perf,
#workshops .ws__stage[data-mode="expression"] .ws__s--expr { visibility: visible; opacity: 1; }

/* Performance mode: even, upper case, flat */
#workshops .ws__s--perf {
  max-width: 26ch;
  font-family: var(--font-body);
  font-size: clamp(.95rem, .8rem + .55vw, 1.2rem);
  font-weight: 500;
  line-height: 2;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(245, 233, 200, .6);
}

/* Expression mode: mixed scale, weight and gold, in Fraunces */
#workshops .ws__s--expr {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1rem + 3vw, 3.3rem);
  font-weight: 360;
  font-variation-settings: "opsz" 144;
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--linen);
  text-wrap: balance;
}
#workshops .xw { display: inline-block; }
#workshops .xw--s { font-size: .58em; font-weight: 320; font-variation-settings: "opsz" 48; color: rgba(245, 233, 200, .82); }
#workshops .xw--m { font-size: .95em; }
#workshops .xw--xl { font-size: 1.62em; font-weight: 430; color: var(--stage-gold); letter-spacing: -.03em; }
#workshops .xw--rise { font-variation-settings: "wght" 640, "opsz" 144; translate: 0 -.04em; scale: 1 1.06; }

/* ---------- Live states: the turn between modes ---------- */

/* Performance mode dims the stage and takes the words out of Expression */
#workshops.is-live .ws__stage[data-mode="performance"] .ws__pool { opacity: 0; }
#workshops.is-live .ws__stage[data-mode="performance"] .xw {
  opacity: 0;
  transform: translateY(.3em);
  filter: blur(5px);
}
#workshops.is-live .ws__stage[data-mode="performance"] .xw--rise { font-variation-settings: "wght" 330, "opsz" 72; translate: none; scale: none; }

/* transitions exist only while .is-swapping is on, so a stalled animation clock can not freeze a half-faded sentence */
#workshops .ws__stage.is-swapping .ws__s {
  transition: opacity calc(.6s * var(--slow)) var(--ease), visibility 0s linear calc(.6s * var(--slow));
}
#workshops .ws__stage.is-swapping[data-mode="performance"] .ws__s--perf,
#workshops .ws__stage.is-swapping[data-mode="expression"] .ws__s--expr { transition-delay: calc(.3s * var(--slow)), 0s; }
#workshops .ws__stage.is-swapping .ws__pool { transition: opacity calc(1.6s * var(--slow)) var(--ease); }
#workshops .ws__stage.is-swapping .xw {
  transition:
    opacity calc(.8s * var(--slow)) var(--ease) calc((var(--d, 0s) + .35s) * var(--slow)),
    transform calc(1s * var(--slow)) var(--ease) calc((var(--d, 0s) + .35s) * var(--slow)),
    filter calc(.8s * var(--slow)) var(--ease) calc((var(--d, 0s) + .35s) * var(--slow)),
    font-variation-settings calc(1.3s * var(--slow)) var(--ease) calc((var(--d, 0s) + .5s) * var(--slow)),
    translate calc(1.3s * var(--slow)) var(--ease) calc((var(--d, 0s) + .5s) * var(--slow)),
    scale calc(1.3s * var(--slow)) var(--ease) calc((var(--d, 0s) + .5s) * var(--slow));
}
#workshops .ws__stage.is-swapping[data-mode="performance"] .xw { transition-delay: 0s; }

/* ---------- Phones ---------- */

@media (max-width: 759.98px) {
  #workshops .ws__grid { grid-template-columns: minmax(0, 1fr); }
  #workshops .ws__title { font-size: clamp(2.5rem, 12vw, 3.4rem); }
  #workshops .ws__facts > div { grid-template-columns: 4.8rem minmax(0, 1fr); }
  #workshops .ws__stage { min-height: 20rem; border-radius: 22px; }
  #workshops .ws__btn { padding: .5rem .8rem; font-size: .8rem; }
  #workshops .ws__s--expr { font-size: clamp(1.8rem, 9vw, 2.5rem); }
  #workshops::before { width: 120vw; right: -50vw; top: -10%; height: 40%; }
}

@media (prefers-reduced-motion: reduce) {
  #workshops .ws__stage .xw,
  #workshops .ws__stage .ws__s,
  #workshops .ws__stage .ws__pool { transition: none !important; }
}

/* ---------- v4: the lead image, a real session from the back rows, across the top of the room ---------- */

#workshops .ws__lead {
  grid-column: 1 / -1;
  margin: 0 0 clamp(4px, 1vw, 12px);
}
#workshops .ws__lead-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.75 / 1;
  border-radius: 3px;
  background: var(--house-dark);
  box-shadow: 0 0 0 1px rgba(125, 106, 69, .4), 0 34px 70px -40px rgba(8, 22, 36, .7);
}
#workshops .ws__lead-frame picture,
#workshops .ws__lead-frame img { display: block; width: 100%; height: 100%; }
#workshops .ws__lead-frame img {
  max-width: none;
  object-fit: cover;
  object-position: 50% 28%;            /* the slide, Vahan, and the back rows at the tables */
}
#workshops .ws__lead-cap { margin-top: clamp(12px, 1.6vw, 18px); }
#workshops .ws__lead-cap .chip { max-width: 100%; }

@media (max-width: 759.98px) {
  #workshops .ws__lead-frame { aspect-ratio: 4 / 3.4; }
  #workshops .ws__lead-frame img { object-position: 50% 28%; }
}
/* Room 6: Voices from the room.
   A ring of ten chairs beside three testimonials and one empty seat. As each voice comes into view its
   chair lights gold and stays lit; the empty seat is a dashed gold outline. Desktop: the ring sticks while
   the voices scroll. Phones: the voices become a scroll-snap row under a smaller ring.
   The markup is the finished state (voice chairs lit); 06-voices.js makes the lighting progressive. */

#voices { background: var(--temple-navy); }
#voices::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(46% 40% at 22% 62%, rgba(212, 168, 75, .1), transparent 72%);
  pointer-events: none;
}

#voices .vc__grid {
  display: grid;
  grid-template-columns: minmax(0, 4.6fr) minmax(0, 7fr);
  column-gap: clamp(40px, 7vw, 112px);
}
#voices .vc__side { min-width: 0; }
#voices .vc__sticky { position: sticky; top: calc(var(--header-h) + clamp(20px, 7vh, 80px)); }

#voices .vc__title {
  font-size: clamp(2.3rem, .9rem + 3.8vw, 4.4rem);
  line-height: 1;
  margin-bottom: clamp(20px, 3vw, 36px);
}
#voices .vc__ring { width: min(100%, 25rem); }
#voices .vc__ring svg { display: block; width: 100%; height: auto; overflow: visible; }
#voices .vc__swipe { display: none; }

/* ---------- Ring ---------- */

#voices .vc__track { fill: none; stroke: var(--brass); stroke-opacity: .24; stroke-width: 1.2; stroke-dasharray: 1 8; stroke-linecap: round; }
#voices .vc__mark { fill: none; stroke: var(--stage-gold); stroke-opacity: .6; stroke-width: 1.4; }

#voices .vc__chair { opacity: .74; transition: opacity var(--t-med) var(--ease); }
#voices .vc__seat { fill: var(--temple-navy); stroke: rgba(183, 161, 122, .6); stroke-width: 2.2; transition: fill var(--t-med) var(--ease), stroke var(--t-med) var(--ease); }
#voices .vc__back { fill: none; stroke: rgba(183, 161, 122, .5); stroke-width: 7; stroke-linecap: round; transition: stroke var(--t-med) var(--ease); }
#voices .vc__arm { fill: none; stroke: rgba(183, 161, 122, .45); stroke-width: 4.4; stroke-linecap: round; transition: stroke var(--t-med) var(--ease); }
#voices .vc__chair.is-lit .vc__arm { stroke: var(--stage-gold); }
#voices .vc__chair.is-active .vc__arm { stroke: var(--tungsten); }
#voices .vc__chair.is-empty.is-lit .vc__arm { stroke-dasharray: 2 6; }
#voices .vc__halo { fill: rgba(212, 168, 75, .22); fill: url(#vc-halo) rgba(212, 168, 75, .22); opacity: 0; transition: opacity var(--t-med) var(--ease); pointer-events: none; }

#voices .vc__chair.is-lit { opacity: 1; }
#voices .vc__chair.is-lit .vc__seat { fill: #D4A84B; fill: url(#vc-gold) #D4A84B; stroke: var(--tungsten); }
#voices .vc__chair.is-lit .vc__back { stroke: var(--stage-gold); }
#voices .vc__chair.is-lit .vc__halo { opacity: .55; }
#voices .vc__chair.is-active .vc__halo { opacity: 1; }
#voices .vc__chair.is-active .vc__back { stroke: var(--tungsten); }

/* the empty seat: an outline waiting for a voice */
#voices .vc__chair.is-empty.is-lit .vc__seat { fill: rgba(212, 168, 75, .06); stroke: var(--stage-gold); stroke-dasharray: 5 4; }
#voices .vc__chair.is-empty.is-lit .vc__back { stroke: var(--stage-gold); stroke-dasharray: 3 7; }
#voices .vc__chair.is-empty.is-lit .vc__halo { opacity: .22; }
#voices .vc__chair.is-empty.is-active .vc__halo { opacity: .6; }

/* ---------- Voices ---------- */

#voices .vc__list { min-width: 0; display: grid; gap: clamp(20px, 2.6vw, 32px); }

#voices .vc__card {
  position: relative;
  padding: clamp(28px, 3.2vw, 44px) clamp(22px, 3.4vw, 48px) clamp(24px, 2.8vw, 36px);
  border-radius: 22px;
  background: rgba(8, 22, 36, .38);
  box-shadow: inset 0 0 0 1px rgba(183, 161, 122, .2);
  transition: box-shadow var(--t-slow) var(--ease), background-color var(--t-slow) var(--ease);
}
#voices .vc__card::before {
  content: "\201C" / "";
  position: absolute;
  left: clamp(22px, 3.4vw, 48px);
  top: clamp(14px, 1.8vw, 22px);
  font-family: var(--font-display);
  font-size: 7rem;
  font-weight: 340;
  font-variation-settings: "opsz" 144;
  line-height: 1;
  color: var(--stage-gold);
  opacity: .75;
}
#voices .vc__card.is-active {
  background: rgba(8, 22, 36, .62);
  box-shadow: inset 0 0 0 1px rgba(212, 168, 75, .55), 0 24px 60px -30px rgba(2, 6, 11, .8);
}

#voices .vc__quote { padding-top: 2.8rem; }
#voices .vc__quote p {
  margin: 0 0 1em;
  font-family: var(--font-display);
  font-size: clamp(1.04rem, .98rem + .3vw, 1.24rem);
  font-weight: 340;
  font-variation-settings: "opsz" 30;
  line-height: 1.62;
  letter-spacing: .002em;
  color: rgba(245, 233, 200, .9);
  text-wrap: pretty;
}
#voices .vc__quote p:last-child { margin-bottom: 0; }
#voices .vc__quote em { font-style: normal; font-weight: 440; color: var(--tungsten); }

#voices .vc__by {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-top: clamp(20px, 2.4vw, 28px);
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
#voices .vc__name { font-size: .98rem; font-weight: 600; letter-spacing: .02em; color: var(--linen); }
#voices .vc__when { font-size: .8rem; letter-spacing: .08em; color: var(--accent-text); }

/* the empty seat */
#voices .vc__card--empty {
  display: grid;
  place-items: center;
  min-height: 10rem;
  background: transparent;
  box-shadow: none;
  outline: 1.5px dashed rgba(212, 168, 75, .5);
  outline-offset: -1px;
}
#voices .vc__card--empty::before { display: none; }
#voices .vc__card--empty.is-active { background: rgba(212, 168, 75, .06); box-shadow: none; }
#voices .vc__empty {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.3rem);
  font-weight: 340;
  font-variation-settings: "opsz" 96;
  line-height: 1.1;
  color: var(--tungsten);
}
html.notes-on #voices .vc__card--empty[data-tbc] { outline: 1.5px dashed var(--note); outline-offset: 4px; }

/* ---------- Phones: scroll-snap row under a smaller ring ---------- */

@media (max-width: 759.98px) {
  #voices .vc__grid { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  #voices .vc__sticky { position: static; }
  #voices .vc__title { font-size: clamp(2.3rem, 11vw, 3rem); margin-bottom: 14px; }
  #voices .vc__ring { width: min(66%, 14rem); margin-top: 6px; }
  #voices .vc__swipe { display: block; margin: 16px 0 0; letter-spacing: .04em; }

  #voices .vc__list {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    margin-inline: calc(var(--gutter-l) * -1) calc(var(--gutter-r) * -1);
    padding: 12px var(--gutter-r) 20px var(--gutter-l);
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter-l);
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #voices .vc__list::-webkit-scrollbar { display: none; }
  #voices .vc__card { flex: 0 0 min(86vw, 24rem); scroll-snap-align: start; padding: 26px 20px 22px; }
  #voices .vc__card::before { left: 20px; top: 12px; font-size: 6rem; }
  #voices .vc__quote { padding-top: 2.5rem; }
  #voices .vc__card--empty { flex-basis: min(64vw, 15rem); }
}

@media (prefers-reduced-motion: reduce) {
  #voices .vc__list { scroll-behavior: auto; }
}
/* Room 6b: Questions people ask. A Paper pause between the voices and the floor.
   Plain question-and-answer pairs, all visible (nothing collapsed), so readers, search engines and AI
   assistants all see the same answers. Left: the heading, held in place on wide screens. Right: the list. */

#questions .qa__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  align-items: start;
  column-gap: clamp(32px, 6vw, 96px);
  row-gap: clamp(28px, 5vw, 44px);
}
#questions .qa__head { min-width: 0; }
#questions .qa__title {
  font-size: clamp(2.3rem, .9rem + 3.8vw, 4.4rem);
  line-height: 1;
  margin-bottom: clamp(16px, 2.6vw, 26px);
}
#questions .lede { max-width: 30ch; }

#questions .qa__list { margin: 0; padding: 0; min-width: 0; }
#questions .qa__item {
  padding: clamp(18px, 2.4vw, 26px) 0;
  border-top: 1px solid var(--rule);
}
#questions .qa__item:last-child { border-bottom: 1px solid var(--rule); }
#questions .qa__item dt {
  margin: 0 0 .5rem;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36;
  font-size: clamp(1.15rem, 1rem + .55vw, 1.45rem);
  line-height: 1.25;
  color: var(--fg);
}
#questions .qa__item dd {
  margin: 0;
  max-width: 40rem;
  color: var(--fg-soft);
}

@media (min-width: 960px) {
  #questions .qa__head { position: sticky; top: calc(var(--header-h) + 40px); }
}

@media (max-width: 959.98px) {
  #questions .qa__grid { grid-template-columns: minmax(0, 1fr); }
}
/* Room 7: The floor is yours.
   The empty-room plate (an AI illustration, never captioned) under a dark veil. When the room comes into
   view the veil lifts and a pool of light grows on the speaker's mark; a 30:00 ring draws around the call.
   html.js only: without it, or once core.js has settled the room (.done), the finished bright state shows. */

#floor {
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: clamp(96px, 14vw, 184px) clamp(80px, 9vw, 128px);
  background: var(--night);
  text-align: center;
}

#floor .fl__plate { position: absolute; z-index: 0; inset: 0; overflow: hidden; container-type: size; }

/* The frame has the picture's own proportions and covers the room like object-fit: cover (anchored
   --fx / --fy), so the two hush patches below stay on the screen and the banner at any size. */
#floor .fl__frame {
  --fx: 50%;
  --fy: 62%;
  position: absolute;
  left: var(--fx);
  top: var(--fy);
  width: 100%;
  height: 100%;
  translate: calc(var(--fx) * -1) calc(var(--fy) * -1);
}
@supports (width: 1cqw) {
  #floor .fl__frame { width: max(100cqw, calc(100cqh * 1.791)); height: auto; aspect-ratio: 2400 / 1340; }
}
#floor .fl__frame picture,
#floor .fl__frame img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
#floor .fl__frame img { object-fit: cover; }

/* The plate is an illustration: its screen glows with the logo and a banner stands beside it. Both are
   hushed to a faint glow so the page speaks first and the light on the floor leads. */
#floor .fl__hush { position: absolute; display: block; pointer-events: none; }
#floor .fl__hush--screen {
  left: 33%; top: 17.5%; width: 34%; height: 40%;
  background: radial-gradient(closest-side, rgba(6, 16, 28, .97) 0%, rgba(6, 16, 28, .95) 62%, rgba(6, 16, 28, 0) 100%);
}
#floor .fl__hush--banner {
  left: 22.5%; top: 24.5%; width: 22%; height: 50%;
  background: radial-gradient(closest-side, rgba(6, 16, 28, .95) 0%, rgba(6, 16, 28, .92) 62%, rgba(6, 16, 28, 0) 100%);
}

/* the veil: heavy at the top (so the screen reads as a faint glow), clear in the middle of the floor,
   closing again at the bottom into the footer's Night */
#floor .fl__dim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(64% 42% at 50% 74%, rgba(8, 22, 36, 0) 0%, rgba(8, 22, 36, .28) 56%, rgba(8, 22, 36, .78) 100%),
    linear-gradient(180deg, rgba(8, 22, 36, .96) 0%, rgba(8, 22, 36, .92) 36%, rgba(8, 22, 36, .66) 56%, rgba(8, 22, 36, .22) 72%, rgba(2, 6, 11, .97) 100%);
}
#floor .fl__pool {
  position: absolute;
  left: 50%;
  top: 75%;
  width: min(84vw, 70rem);
  aspect-ratio: 2.3;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(246, 217, 166, .62), rgba(212, 168, 75, .24) 46%, rgba(212, 168, 75, 0) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* before the room is in view: darker, no pool; then both ease to the finished state */
html.js #floor:not(.on):not(.done) .fl__pool { opacity: 0; }
html.js #floor:not(.on):not(.done) .fl__frame img { filter: brightness(.52); }
#floor .fl__frame img { transition: filter calc(4.2s * var(--slow)) var(--ease); }
#floor .fl__pool { transition: opacity calc(4.2s * var(--slow)) var(--ease); }
#floor.done .fl__frame img,
#floor.done .fl__pool { transition: none; }

#floor .fl__inner { display: flex; flex-direction: column; align-items: center; }
#floor .eyebrow { max-width: none; margin-bottom: clamp(18px, 2.4vw, 28px); }

#floor .fl__title {
  max-width: 14ch;
  font-size: clamp(3rem, 1.1rem + 8.4vw, 8rem);
  font-weight: 360;
  line-height: .96;
  letter-spacing: -.03em;
  text-shadow: 0 2px 40px rgba(2, 6, 11, .55);
}
#floor .fl__title em { color: var(--accent); }
#floor .fl__lede strong { font-weight: 600; color: var(--stage-gold, #D4A84B); }
#floor .fl__lede { max-width: 38ch; margin: clamp(20px, 2.6vw, 30px) 0 0; color: rgba(245, 233, 200, .88); text-shadow: 0 1px 20px rgba(2, 6, 11, .7); }

#floor .fl__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px clamp(24px, 4vw, 56px);
  margin-top: clamp(30px, 4vw, 48px);
}

/* The call: a 30:00 ring that draws once, with the words beside it */
#floor .fl__dial {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: var(--linen);
  text-align: left;
  text-decoration: none;
}
#floor .fl__ring {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 6.8rem;
  height: 6.8rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(8, 22, 36, .72), rgba(8, 22, 36, .5) 70%, rgba(8, 22, 36, 0) 100%);
  transition: background-color var(--t-med) var(--ease);
}
#floor .fl__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; overflow: visible; }
#floor .fl__ring-bg { fill: none; stroke: rgba(183, 161, 122, .38); stroke-width: 1.6; }
#floor .fl__ring-arc {
  fill: none;
  stroke: var(--stage-gold);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
html.js #floor:not(.on):not(.done) .fl__ring-arc { stroke-dashoffset: 1; }
html.js #floor.on:not(.done) .fl__ring-arc { transition: stroke-dashoffset calc(3s * var(--slow)) var(--ease) calc(.8s * var(--slow)); }
#floor .fl__time {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 380;
  font-variation-settings: "opsz" 96;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.01em;
  color: var(--tungsten);
}
#floor .fl__dial-text { position: relative; isolation: isolate; display: grid; gap: 2px; text-shadow: 0 1px 14px rgba(2, 6, 11, .8); }
#floor .fl__dial-label { font-size: 1.04rem; font-weight: 600; line-height: 1.3; }
#floor .fl__dial-label::after {
  content: "\2192";
  display: inline-block;
  margin-left: .5em;
  transition: transform var(--t-fast) var(--ease);
}
#floor .fl__dial-sub { font-size: .84rem; color: var(--linen); }
#floor .fl__dial:hover .fl__dial-label::after { transform: translateX(.3em); }
#floor .fl__dial:hover .fl__ring { background-color: rgba(212, 168, 75, .1); }
#floor .fl__dial:hover .fl__ring-arc { stroke: var(--tungsten); }

#floor .fl__back { position: relative; isolation: isolate; margin: clamp(40px, 6vw, 72px) 0 0; text-shadow: 0 1px 14px rgba(2, 6, 11, .8); }

/* a soft dark halo behind the small text, so it stays readable on the lit floor */
#floor .fl__dial-text::before,
#floor .fl__back::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -22px -46px;
  background: radial-gradient(closest-side, rgba(2, 6, 11, .56), rgba(2, 6, 11, .34) 58%, rgba(2, 6, 11, 0) 100%);
  pointer-events: none;
}

@media (max-width: 759.98px) {
  #floor { min-height: 0; padding-block: 120px 64px; }
  #floor .fl__title { font-size: clamp(2.9rem, 14.5vw, 4.4rem); }
  #floor .fl__frame { --fy: 70%; }
  #floor .fl__dial-text::before,
  #floor .fl__back::before { background: radial-gradient(closest-side, rgba(2, 6, 11, .76), rgba(2, 6, 11, .5) 58%, rgba(2, 6, 11, 0) 100%); }
  #floor .fl__pool { background: radial-gradient(closest-side, rgba(246, 217, 166, .44), rgba(212, 168, 75, .18) 46%, rgba(212, 168, 75, 0) 100%); }
  #floor .fl__ctas { flex-direction: column; gap: 22px; width: 100%; }
  #floor .fl__ctas .btn { width: 100%; max-width: 22rem; }
  #floor .fl__dial { gap: 16px; }
  #floor .fl__ring { width: 6rem; height: 6rem; }
  #floor .fl__time { font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  #floor .fl__frame img,
  #floor .fl__pool,
  #floor .fl__ring-arc { transition: none !important; }
  #floor .fl__dial:hover .fl__dial-label::after { transform: none; }
}