/* ---- stoom (Stoom — Bathhouse & cold plunge 229) ---------------------------
   THE STRUCTURAL MOVE: exactly two full-bleed rectangles bracket the page — a
   100vh two-frame stage at the top and a gapped six-tile band at the foot —
   and every block between them is locked to ONE 900px measure that never
   moves, so the four rooms, the four icons, the numbered circuit, the faces,
   the questions, the film and the four fee cards all share a single edge down
   both sides. The steam-white ground is left unbroken (the zebra wash is
   switched off and the offer strip is stripped of its brand band), so the only
   rooms with the lights out are the stage and the near-black contact band,
   which the footer carries on without a seam. The title-only divider is given
   real height and a hairline to land on, so the emptiness under it reads as
   deliberate rather than as a section that failed to render. Celadon is spent
   on four things and no more: the circuit numerals, the open question, the
   second fee card and button hover. Sections are reached by CLASS, never
   :nth-of-type; .ws-plan:nth-child(2) is safe because every child of the
   pricing grid is a .ws-plan. */
body.t-stoom.ws-body {
  --bg: #f4f5f3; --fg: #40474a; --heading: #23272a; --text: #40474a; --muted: #7c8482;
  --sto-tile: #a8c0b4; --sto-line: #c9cfc9; --sto-dark: #15181a; --sto-card: #ffffff;
  --hero-a: rgba(21, 24, 26, .28); --hero-b: rgba(21, 24, 26, .66);
}
body.t-stoom { background: var(--bg); }

/* the bar rides on the photograph — no band, no rule, nothing under it */
body.t-stoom .ws-nav { position: absolute; top: 0; left: 0; right: 0; background: transparent; backdrop-filter: none; border-bottom: 0; }
body.t-stoom .ws-brand { color: #f4f5f3; font-size: 18px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; }
body.t-stoom .ws-nav-links a { color: #f4f5f3; opacity: .82; font-size: 12px; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; }
body.t-stoom .ws-nav-links a:hover, body.t-stoom .ws-nav-links a.on { color: var(--sto-tile); opacity: 1; border-bottom: 0; }

/* FULL BLEED ONE — the whole first screen, two frames, everything on the axis */
body.t-stoom .ws-hero { min-height: 100vh; }
body.t-stoom .ws-hero h1 { font-size: clamp(36px, 6.2vw, 72px); font-weight: 300; letter-spacing: -.025em; line-height: 1.05; text-shadow: none; }
body.t-stoom.ws-body .btn.brand { background: var(--heading); color: var(--bg); border: 0; border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: .16em; font-size: 11.5px; font-weight: 600; padding: 16px 34px; }
body.t-stoom.ws-body .ws-hero-cta.btn.brand { background: #f4f5f3; color: #23272a; }
body.t-stoom.ws-body .btn.brand:hover, body.t-stoom.ws-body .ws-contact .btn.brand { background: var(--sto-tile); color: #15181a; opacity: 1; }

/* ONE MEASURE — every contained block shares the same edge, and the ground
   between the two dark ends is never washed or banded */
body.t-stoom .ws-section .ws-container, body.t-stoom .ws-hero-inner { max-width: 900px; }
body.t-stoom .ws-section { padding: 92px 0; }
body.t-stoom.ws-body .ws-section:nth-child(even):not(.ws-cta):not(.ws-shoplink) { background: transparent; }
body.t-stoom.ws-body .ws-cta { background: transparent; color: var(--text); }
body.t-stoom .ws-h2, body.t-stoom .ws-title-h, body.t-stoom .ws-cta-inner h2, body.t-stoom .ws-story-copy h2 { color: var(--heading); font-size: clamp(24px, 3.2vw, 36px); font-weight: 400; letter-spacing: -.02em; line-height: 1.18; margin: 0 0 14px; }
body.t-stoom .ws-sub, body.t-stoom .ws-title-sub, body.t-stoom .ws-feature p, body.t-stoom .ws-member p, body.t-stoom .ws-cta-inner p, body.t-stoom .ws-video-caption, body.t-stoom .ws-quote-a { color: var(--muted); font-size: 14.5px; line-height: 1.74; }
body.t-stoom .ws-story-copy p, body.t-stoom .ws-faq-item p, body.t-stoom .ws-plan li { color: var(--text); font-size: 15px; line-height: 1.76; }

/* the divider is meant to be empty — height and a hairline make that deliberate */
body.t-stoom .ws-titleblock { padding: 116px 0 0; }
body.t-stoom .ws-titleblock .ws-container { border-bottom: 1px solid var(--sto-line); padding-bottom: 44px; }

/* every tile puts its picture over its type, on the same tall plate */
body.t-stoom .ws-gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
body.t-stoom .ws-gallery-item img, body.t-stoom .ws-member-photo img, body.t-stoom .ws-story-media img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 0; margin: 0 0 13px; }
body.t-stoom .ws-gallery-cap strong, body.t-stoom .ws-feature h3, body.t-stoom .ws-member strong { color: var(--heading); font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
body.t-stoom .ws-features-grid, body.t-stoom .ws-team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 26px; }
body.t-stoom .ws-feature, body.t-stoom .ws-member { text-align: left; padding: 0; }

/* the circuit — the numerals are the only large celadon on the page */
body.t-stoom .ws-list-number { list-style: decimal; margin: 26px 0 0 46px; padding: 0; }
body.t-stoom .ws-list-number li { border-top: 1px solid var(--sto-line); margin: 0; padding: 20px 0 20px 6px; font-size: 15px; line-height: 1.76; color: var(--text); }
body.t-stoom .ws-list-number li::marker { color: var(--sto-tile); font-size: 28px; font-weight: 600; }

/* one quote, one open question, one flat film — nothing italic, nothing rounded */
body.t-stoom .ws-quote-t { font-style: normal; font-weight: 400; font-size: clamp(21px, 2.8vw, 30px); line-height: 1.4; color: var(--heading); }
body.t-stoom .ws-faq-item { border-bottom: 1px solid var(--sto-line); }
body.t-stoom .ws-faq-item[open] summary, body.t-stoom .ws-faq-item[open] summary::after { color: var(--sto-tile); }
body.t-stoom .ws-video-frame { border-radius: 0; box-shadow: none; }

/* four fee cards on one line — the ten-visit card is the one we push */
body.t-stoom .ws-pricing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 900px; }
body.t-stoom .ws-plan { background: var(--sto-card); border: 1px solid var(--sto-line); border-radius: 0; padding: 28px 20px; text-align: left; }
body.t-stoom .ws-plan-amt { color: var(--heading); font-size: 30px; font-weight: 400; letter-spacing: -.02em; }
body.t-stoom .ws-plan:nth-child(2) { background: var(--sto-tile); border-color: var(--sto-tile); }
body.t-stoom .ws-plan:nth-child(2) h3, body.t-stoom .ws-plan:nth-child(2) .ws-plan-amt, body.t-stoom .ws-plan:nth-child(2) li, body.t-stoom .ws-plan:nth-child(2) li::before { color: #15181a; }

/* FULL BLEED TWO — the only other rectangle that leaves the measure */
body.t-stoom .ws-photogrid { padding: 0 10px; }
body.t-stoom .ws-photogrid-grid { gap: 10px; }

/* the dark end — the booking band and the footer are one near-black block */
body.t-stoom.ws-body .ws-contact { background: var(--sto-dark); color: #dfe4e0; padding: 100px 0 92px; }
body.t-stoom .ws-contact .ws-h2 { color: #f4f5f3; }
body.t-stoom .ws-field input, body.t-stoom .ws-field textarea { background: transparent; border: 0; border-bottom: 1px solid #3a413d; border-radius: 0; color: #f4f5f3; padding: 12px 2px; }
body.t-stoom .ws-footer { background: var(--sto-dark); color: #79817e; border-top: 0; }

/* the four-ups halve before the menu collapses, so no row is ever left short */
@media (max-width: 860px) {
  body.t-stoom .ws-gallery-grid, body.t-stoom .ws-features-grid, body.t-stoom .ws-team-grid, body.t-stoom .ws-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-stoom .ws-nav-links a { color: var(--heading); opacity: 1; }
}

/* night — the steam white goes out and the two dark ends go darker still */
html[data-theme="dark"] body.t-stoom.ws-body {
  --bg: #15191a; --fg: #a2aba7; --heading: #edf1ed; --text: #a2aba7; --muted: #7a827f;
  --sto-tile: #8fb3a2; --sto-line: #2a312d; --sto-dark: #0c0e0f; --sto-card: #1c2122;
  --hero-a: rgba(6, 8, 9, .32); --hero-b: rgba(6, 8, 9, .70);
}
html[data-theme="dark"] body.t-stoom { background: var(--bg); }