/* ============================================================
   SB-ROOMS — FMC "The Rooms" · four rooms, one roof
   Page layer over sb-core.css. Browse page: NO pinned scenes —
   engine hooks are data-reveal + light data-parallax only
   (parallax stays out of content-visibility sections so cached
   geometry is never measured inside a skipped subtree).
   Animates transform + opacity ONLY. No images — CSS/inline SVG.
   ============================================================ */

/* ============================================================
   HERO — "Four rooms. One roof."
   ============================================================ */
.rooms-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 9vw, 7rem) clamp(3rem, 7vw, 5rem);
  background: linear-gradient(180deg, var(--paper) 30%, var(--c-peach) 165%);
  border-bottom: 2px solid var(--hair);
}
.rooms-hero__ring {
  position: absolute;
  top: -34%;
  right: -12%;
  width: clamp(300px, 42vw, 620px);
  z-index: 0;
}
.rooms-hero__inner { position: relative; z-index: 1; }
.rooms-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.7rem, 7.5vw, 4.8rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
  margin-bottom: 1.2rem;
  max-width: 14ch;
  text-wrap: balance;
}

/* room index — jump chips, one dot per craft */
.room-index {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: var(--sp-4);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;               /* tap target ≥ 44px */
  padding: 0.45em 1.1em;
  border: 2px solid var(--hair);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.chip::before {
  content: "";
  flex: none;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--chip-dot, var(--ink));
}
.chip:hover { background: var(--paper-2); transform: translateY(-2px); }
.chip--music  { --chip-dot: var(--music); }
.chip--film   { --chip-dot: var(--film); }
.chip--comedy { --chip-dot: var(--comedy); }

/* the house note — coffee's always on, the building runs 24/7.
   Said once, here, for the whole page. Mustard sticky; ink on
   mustard is 6.1:1. */
.rooms-note {
  display: inline-block;
  max-width: 46ch;
  margin-top: var(--sp-4);
  padding: 0.8rem 1.1rem;
  background: var(--music);
  color: var(--ink);
  border-radius: 6px;
  box-shadow: var(--shadow-lift);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.5;
}

/* ============================================================
   ROOM BANDS — shared editorial layout, alternating sides
   ============================================================ */
.room__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.room--flip .room__grid { grid-template-columns: 0.95fr 1.05fr; }
.room--flip .room__art { order: -1; }
@media (max-width: 760px) {
  .room__grid, .room--flip .room__grid { grid-template-columns: 1fr; }
  .room__art { order: -1; }
}

/* rendering perf: room bands run taller than core's 640px guess */
.room.cv-auto, .rooms-cta.cv-auto { contain-intrinsic-size: auto 780px; }

/* what you can DO there */
.room__do {
  display: grid;
  gap: 0.55rem;
  margin-top: var(--sp-3);
  max-width: 52ch;
}
.room__do li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-size: var(--fs-body);
  line-height: 1.5;
}
.room__do li::before {
  content: "";
  flex: none;
  width: 0.55em;
  height: 0.55em;
  border-radius: 2px;
  background: var(--do-dot, var(--ink));
  transform: translateY(-0.05em);
}

/* who books it — one plain line under the use-list */
.room__who {
  margin-top: var(--sp-3);
  max-width: 52ch;
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.room__who strong { font-weight: 600; }

/* spec strip — the facts, nothing invented */
.room__specs { margin-top: var(--sp-4); }
.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding-block: var(--sp-3);
  border-block: 2px solid var(--hair);
}
@media (max-width: 620px) { .specs { grid-template-columns: 1fr; gap: var(--sp-2); } }
.specs dt {
  font-size: var(--fs-cap);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}
.specs dd { margin: 0; font-size: var(--fs-sm); line-height: 1.5; }
.room--dark .specs { border-color: var(--hair-cream); }

.room__cta { margin-top: var(--sp-4); }

/* ============================================================
   PER-ROOM CRAFT WORLDS — kicker inks, dots, spec labels
   All text pairs ≥ 4.5:1 on their band.
   ============================================================ */

/* mustard band: core's orange-ink kicker is 3.0:1 here — cocoa is 6.1:1 */
.band--mustard .kicker { color: var(--ink); }
/* avocado band: core's mustard kicker is 3.3:1 — cream is 6.1:1 */
.band--avocado .kicker { color: var(--paper); }

.room--studio     { --do-dot: var(--ink); }
.room--main       { --do-dot: var(--film); }
.room--conference { --do-dot: var(--ink); }
.room--exec       { --do-dot: var(--film); }

/* the main room's comedy moment — last do-dot goes avocado */
.room--main .room__do li:last-child::before { background: var(--comedy); }

.room--main .kicker::before,
.room--exec .kicker::before { background: var(--film); }
.room--conference .kicker { color: var(--ink); }
.room--conference .kicker::before { background: var(--ink); }

.room--main .specs dt,
.room--exec .specs dt { color: var(--music); }            /* 6.1:1 on cocoa  */

/* focus ring must clear the band colour (non-text ≥ 3:1) */
.band--avocado :focus-visible { outline-color: var(--paper); }
.band--mustard :focus-visible { outline-color: var(--ink); }

/* ============================================================
   VIGNETTES — hand-built inline SVG, coloured from tokens
   ============================================================ */
.room__art { position: relative; }
.vig {
  width: 100%;
  max-width: 460px;
  height: auto;
  margin-inline: auto;
}

/* fill utilities */
.v-ink    { fill: var(--ink); }
.v-ink2   { fill: var(--ink-panel); }
.v-paper  { fill: var(--paper); }
.v-paper2 { fill: var(--paper-2); }
.v-film   { fill: var(--film); }
.v-filmink{ fill: var(--c-orange-ink); }
.v-music  { fill: var(--music); }
.v-comedy { fill: var(--comedy); }
.v-deep   { fill: #0D1B3D; }
.v-shade  { fill: rgba(18, 35, 75, 0.18); }

/* studio console — 8 channel strips, one per real channel */
.v-knob   { fill: var(--paper-2); }
.v-slot   { fill: rgba(243, 231, 206, 0.35); }
.v-cap    { fill: var(--music); }
.v-needle { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }

/* main room — screen, beam, seats, one mic for the comedy shows */
.v-beam { fill: rgba(243, 231, 206, 0.15); }
.v-seat { fill: var(--ink-panel); stroke: rgba(243, 231, 206, 0.28); stroke-width: 1.5; }
.v-micline { fill: none; stroke: var(--paper); stroke-width: 2.5; stroke-linecap: round; }
.v-slabtext {
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  fill: var(--ink);
}

/* conference table */
.v-chair { fill: var(--ink-panel); }
.v-tline { fill: none; stroke: rgba(243, 231, 206, 0.3); stroke-width: 2; }
.v-mug   { fill: none; stroke: var(--music); stroke-width: 2.5; }

/* executive screening room — small, dark, door closed */
.v-frame { fill: var(--ink-panel); stroke: rgba(243, 231, 206, 0.25); stroke-width: 2; }
.v-door  { fill: rgba(243, 231, 206, 0.14); stroke: rgba(243, 231, 206, 0.4); stroke-width: 2; }
.v-doorknob { fill: var(--music); }

/* ============================================================
   ETHOS / CLOSING CTA BAND
   ============================================================ */
.rooms-cta .section-title { max-width: 22ch; }
.rooms-cta__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}
.rooms-cta__mail { margin-top: var(--sp-4); font-size: var(--fs-sm); }
.rooms-cta__mail a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--hair-cream);
}
/* mustard is 3.3:1 on the avocado band — deep cream stays 5.7:1 */
.rooms-cta__mail a:hover { color: var(--paper-2); }

/* ============================================================
   MOTION — opacity-only idle glow, fully RM-gated, and paused
   by the engine (.is-off on [data-idle-pause]) when offscreen.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .v-beam { animation: sb-beam 4.5s var(--ease-inout) infinite alternate; }
}
@keyframes sb-beam { from { opacity: 0.55; } to { opacity: 0.95; } }

[data-idle-pause].is-off .v-beam { animation-play-state: paused; }

.sb-static .v-beam { animation: none !important; opacity: 1 !important; }

@media (prefers-reduced-motion: reduce) {
  .v-beam { animation: none !important; opacity: 1 !important; }
  .chip, .chip:hover { transition: none; transform: none; }
}