/* Sculpt x Cycle Riverside: the one stylesheet.
   Dark shell, one accent, condensed display type. The booking flow (.calm)
   turns main light and quiet. Tokens first, then type, then components. */

/* --------------------------------------------------------------- 1. fonts */

/* Display: Kroxen (Envato, self hosted). Barlow Condensed is the shipped
   fallback on the same axis so a missing Kroxen file is barely visible. */
@font-face { font-family: "Kroxen"; src: url("/assets/fonts/kroxen-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Kroxen"; src: url("/assets/fonts/kroxen-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Kroxen"; src: url("/assets/fonts/kroxen-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Kroxen"; src: url("/assets/fonts/kroxen-extrabold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Kroxen"; src: url("/assets/fonts/kroxen-black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Kroxen"; src: url("/assets/fonts/kroxen-boldright.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

@font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/barlow-condensed-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/barlow-condensed-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/barlow-condensed-700italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

@font-face { font-family: "Einer Grotesk"; src: url("/assets/fonts/einer-grotesk-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Einer Grotesk"; src: url("/assets/fonts/einer-grotesk-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Einer Grotesk"; src: url("/assets/fonts/einer-grotesk-book.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Einer Grotesk"; src: url("/assets/fonts/einer-grotesk-bookitalic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Einer Grotesk"; src: url("/assets/fonts/einer-grotesk-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Einer Grotesk"; src: url("/assets/fonts/einer-grotesk-heavy.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

/* -------------------------------------------------------------- 2. tokens */

:root {
  --ground: #0B0B0D;
  --raise: #141417;
  --line: #26262B;
  --chalk: #F2F1EC;
  --fog: #B4B3AC;      /* 9.3:1 on ground */
  --ash: #7C7B76;      /* 4.6:1 on ground, uppercase labels at 12px and up */
  --accent: #22D3E6;   /* 11:1 on ground */
  --accent-hover: #5BE1EE;
  --accent-light: #00707F;  /* 5.3:1 on paper */
  --band: #0F4A55;     /* chalk on band is 8.7:1 */

  --paper: #F6F5F0;
  --paper-raise: #FFFFFF;
  --ink: #121214;
  --slate: #5A5A60;    /* 6.3:1 on paper */
  --line-light: #DAD9D2;
  --seat-taken: #DAD9D2; /* Line-light token: 4.84:1 for slate numerals */

  --font-display: "Kroxen", "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --font-ui: "Einer Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --shell: 1280px;
  --gutter: 48px;
  --section: 112px;

  --bg: var(--ground);
  --fg: var(--chalk);
  --fg-2: var(--fog);
  --fg-3: var(--ash);
  --rule: var(--line);
  --link: var(--accent);
}

@media (max-width: 900px) { :root { --gutter: 32px; --section: 80px; } }
@media (max-width: 768px) { :root { --gutter: 20px; --section: 64px; } }

/* ------------------------------------------------------------- 3. reset */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--chalk);
  font: 400 17px/1.55 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg, video { max-width: 100%; }
img { border-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.calm main :focus-visible { outline-color: var(--accent-light); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--accent); color: var(--ground);
  padding: 12px 18px; font: 600 14px/1 var(--font-ui); text-decoration: none;
  transition: top .12s ease;
}
.skip-link:focus { top: 8px; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* --------------------------------------------------------------- 4. type */

h1, h2, h3, .display { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; }

h1, .h1 { font-size: clamp(64px, 12vw, 168px); line-height: .92; letter-spacing: -.01em; }
h2, .h2 { font-size: clamp(40px, 6vw, 88px); line-height: 1; letter-spacing: -.005em; text-wrap: balance; }
h3, .h3 { font-size: clamp(26px, 3vw, 32px); font-weight: 600; line-height: 1.12; letter-spacing: 0; }
.h3-sentence { text-transform: none; }

.lede { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.45; color: var(--fog); max-width: 46ch; }
.small { font-size: 14px; line-height: 1.5; }
.muted { color: var(--fog); }
.note { font-size: 14px; line-height: 1.5; color: var(--ash); }
/* .numeral is for single-line figures only, which is why it may stay tight */
.numeral { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; line-height: .92; }

.eyebrow {
  display: block; font: 600 12px/1 var(--font-ui);
  text-transform: uppercase; letter-spacing: .14em; color: var(--ash);
  margin-bottom: 20px;
}
.calm main .eyebrow { color: var(--slate); }

.link {
  color: var(--chalk); text-decoration: none;
  border-bottom: 1px solid var(--accent); padding-bottom: 2px;
  transition: color .14s ease, border-color .14s ease;
}
.link:hover, .link:focus-visible { color: var(--accent); }
.calm main .link { color: var(--ink); border-bottom-color: var(--accent-light); }
.calm main .link:hover, .calm main .link:focus-visible { color: var(--accent-light); }
@media (prefers-reduced-motion: reduce) { .link { transition: none; } }

/* ------------------------------------------------------------ 5. layout */

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }
.section-tight { padding: calc(var(--section) * .6) 0; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.calm main .rule { border-top-color: var(--line-light); }
.stack > * + * { margin-top: 20px; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 18px 32px; margin-bottom: 44px; }

/* ------------------------------------------------------------ 6. buttons */

.btn, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 26px; border-radius: 0; border: 1px solid transparent;
  font-family: var(--font-display); font-weight: 600; font-size: 18px;
  text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
  cursor: pointer; transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.btn { background: var(--accent); color: var(--ground); }
.btn:hover, .btn:focus-visible { background: var(--accent-hover); color: var(--ground); }
.btn-secondary { background: transparent; color: var(--chalk); border-color: var(--chalk); }
.btn-secondary:hover, .btn-secondary:focus-visible { border-color: var(--accent); color: var(--accent); }
.btn[disabled], .btn-secondary[disabled] { opacity: .5; cursor: not-allowed; }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 16px; }
.btn-block { width: 100%; }
.calm main .btn { background: var(--accent-light); color: #FFFFFF; }
.calm main .btn:hover, .calm main .btn:focus-visible { background: #005A66; color: #FFFFFF; }
.calm main .btn-secondary { color: var(--ink); border-color: var(--ink); }
.calm main .btn-secondary:hover, .calm main .btn-secondary:focus-visible { color: var(--accent-light); border-color: var(--accent-light); }
@media (prefers-reduced-motion: reduce) { .btn, .btn-secondary { transition: none; } }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ------------------------------------------------------------- 7. header */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background-color .18s ease, border-color .18s ease;
}
.site-header.is-stuck { background: var(--ground); border-bottom-color: var(--line); }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }

.header-inner { display: flex; align-items: center; gap: 24px; min-height: 76px; }

.wordmark {
  font-family: var(--font-display); font-size: 22px; line-height: 1;
  text-transform: uppercase; letter-spacing: .01em; text-decoration: none;
  color: var(--chalk); white-space: nowrap; margin-right: auto;
}
.wordmark .w-strong { font-weight: 700; }
.wordmark .w-x { font-weight: 400; color: var(--accent); padding: 0 .28em; text-transform: lowercase; }

.site-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 26px; }
.nav-list a {
  font: 600 15px/1 var(--font-ui); color: var(--fog); text-decoration: none;
  padding: 10px 0; border-bottom: 1px solid transparent;
  transition: color .14s ease, border-color .14s ease;
}
.nav-list a:hover, .nav-list a:focus-visible { color: var(--chalk); border-bottom-color: var(--accent); }
.nav-list a[aria-current="page"] { color: var(--chalk); border-bottom-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .nav-list a { transition: none; } }

.nav-toggle {
  display: none; width: 48px; height: 48px; margin-left: auto;
  background: transparent; border: 1px solid var(--fog); cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav-toggle span:not(.sr-only) { display: block; width: 20px; height: 1.5px; background: var(--chalk); transition: transform .16s ease, opacity .16s ease; }
.nav-toggle[aria-expanded="true"] { border-color: var(--accent); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .nav-toggle span:not(.sr-only) { transition: none; } }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  /* the panel is a child of the header, so the mark and the button are lifted
     above it inside the header's stacking context */
  .wordmark, .nav-toggle { position: relative; z-index: 95; }
  .site-header { background: var(--ground); }
  .site-nav {
    position: fixed; inset: 0; z-index: 90;
    display: none; flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 8px; padding: 96px var(--gutter) 48px; background: var(--ground);
    overflow-y: auto;
  }
  .site-nav.is-open { display: flex; }
  .nav-list { flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }
  .nav-list a {
    font-family: var(--font-display); font-weight: 700; font-size: 34px;
    text-transform: uppercase; color: var(--chalk); padding: 10px 0; border-bottom: 0;
  }
  .nav-list a[aria-current="page"] { color: var(--accent); border-bottom: 0; }
  .nav-cta { margin-top: 24px; }
}

/* --------------------------------------------------------------- 8. hero */

.hero-short { min-height: min(78vh, 720px); }
.hero { position: relative; display: flex; align-items: flex-end; min-height: min(94vh, 880px); padding: 120px 0 56px; overflow: hidden; }
.hero .hero-media { position: absolute; inset: 0; z-index: 0; }
.hero .hero-inner { position: relative; z-index: 1; width: 100%; }
.hero h1 { max-width: 12ch; }
.hero-line { display: block; }
.hero-line-accent { color: var(--accent); }
.hero-fact { margin-top: 32px; max-width: 40ch; color: var(--fog); font-size: clamp(16px, 1.6vw, 19px); }
.hero .cta-row { margin-top: 36px; }

@media (prefers-reduced-motion: no-preference) {
  .hero-line { opacity: 0; transform: translateY(.22em); animation: line-rise .62s cubic-bezier(.16,.84,.36,1) forwards; }
  .hero-line:nth-child(2) { animation-delay: 60ms; }
  .hero-line:nth-child(3) { animation-delay: 120ms; }
  .hero-line:nth-child(4) { animation-delay: 180ms; }
  @keyframes line-rise { to { opacity: 1; transform: translateY(0); } }
}

/* ------------------------------------------------------------ 9. duotone */

.duotone { position: relative; overflow: hidden; background: var(--ground); isolation: isolate; }
.duotone picture { display: block; width: 100%; height: 100%; }
.duotone img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: grayscale(1) contrast(1.1) brightness(1.28);
  color: transparent; /* a missing file degrades to plain ground, not alt text */
}
.duotone::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: #1E6E7C; mix-blend-mode: multiply; pointer-events: none;
}
.duotone::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, var(--ground) 4%, rgba(11,11,13,.62) 45%, rgba(11,11,13,.30) 100%);
}
.duotone-hero img { object-position: 72% center; }
.duotone-hero::after {
  background:
    linear-gradient(to right, var(--ground) 2%, rgba(11,11,13,.87) 32%, rgba(11,11,13,.34) 64%, rgba(11,11,13,.34) 100%),
    linear-gradient(to top, var(--ground) 1%, rgba(11,11,13,0) 34%);
}
@media (max-width: 900px) {
  .duotone-hero img { object-position: 66% center; }
  .duotone-hero::after { background: linear-gradient(to top, var(--ground) 6%, rgba(11,11,13,.80) 48%, rgba(11,11,13,.52) 100%); }
}

.fullbleed { position: relative; display: flex; align-items: flex-end; min-height: clamp(340px, 56vh, 620px); }
.fullbleed .fullbleed-media { position: absolute; inset: 0; }
.fullbleed-media img { object-position: 50% 80%; }
.fullbleed .duotone img { filter: grayscale(1) contrast(1.15) brightness(1.7); }
.fullbleed .duotone::after { background: linear-gradient(to top, var(--ground) 0%, rgba(11,11,13,.55) 30%, rgba(11,11,13,.12) 70%, rgba(11,11,13,.25) 100%); }
.fullbleed .shell { position: relative; z-index: 3; padding-bottom: 56px; padding-top: 56px; }
.fullbleed-line { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(34px, 5vw, 72px); line-height: 1.08; text-wrap: balance; max-width: 16ch; }

/* --------------------------------------------------------------- 10. band */

.band { background: var(--band); color: var(--chalk); }
.band .eyebrow { color: #9FD3DB; }
.band .lede, .band .muted { color: #C7E3E8; }
.band-inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px 64px; align-items: end; }
@media (max-width: 860px) { .band-inner { grid-template-columns: 1fr; align-items: start; } }
.band .btn { background: var(--chalk); color: var(--ground); }
.band .btn:hover, .band .btn:focus-visible { background: #FFFFFF; }

/* -------------------------------------------------- 11. hairline lists */

.hairline-list { border-top: 1px solid var(--line); }
.hairline-list > li { border-bottom: 1px solid var(--line); padding: 30px 0; }
.calm main .hairline-list, .calm main .hairline-list > li { border-color: var(--line-light); }

.format-row { display: grid; grid-template-columns: minmax(0, 26ch) minmax(0, 1fr); gap: 12px 48px; align-items: start; }
@media (max-width: 760px) { .format-row { grid-template-columns: 1fr; } }
.format-name {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(30px, 4vw, 46px); line-height: 1.08; text-wrap: balance; max-width: 20ch;
}
.format-meta { margin-top: 14px; color: var(--ash); font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
.format-copy { color: var(--fog); max-width: 56ch; }

.price-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 32px; align-items: baseline; }
.price-name {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1.08; text-wrap: balance; max-width: 22ch;
}
.price-value { font-size: clamp(40px, 6vw, 76px); color: var(--accent); }
.calm main .price-value { color: var(--accent-light); }
.price-note { grid-column: 1 / -1; margin-top: 6px; color: var(--ash); font-size: 14px; }

/* -------------------------------------------------- 12. schedule rows */

.row-class {
  display: grid; align-items: center; gap: 4px 20px;
  grid-template-columns: 104px minmax(0, 1fr) 150px 86px 96px auto;
  grid-template-areas: "time format who spots level book";
  padding: 24px 0; border-top: 1px solid var(--line);
}
.row-class:last-child { border-bottom: 1px solid var(--line); }
.calm main .row-class { border-color: var(--line-light); }
.row-time { grid-area: time; font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.08; }
.row-format { grid-area: format; }
.row-format b { font-family: var(--font-display); font-weight: 700; font-size: 24px; text-transform: uppercase; letter-spacing: .01em; display: block; line-height: 1.08; }
.row-duration { display: block; margin-top: 8px; color: var(--ash); font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }
.row-who { grid-area: who; }
.row-who a { color: var(--fog); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 1px; }
.row-who a:hover, .row-who a:focus-visible { color: var(--accent); }
.calm main .row-who a { color: var(--slate); border-bottom-color: var(--accent-light); }
.row-spots { grid-area: spots; font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.08; text-align: right; }
.row-spots span { display: block; margin-top: 5px; font: 600 10px/1.3 var(--font-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--ash); text-align: right; }
.row-level { grid-area: level; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--fog); }
.row-book { grid-area: book; justify-self: end; }
.row-class.is-full .row-spots { color: var(--ash); }

/* Under 640px the row becomes two lines: time, format and the button on the
   first, the instructor and what is left on the second. */
@media (max-width: 640px) {
  .row-class {
    display: flex; flex-wrap: wrap; align-items: center;
    column-gap: 12px; row-gap: 8px; padding: 24px 0;
  }
  .row-time { order: 1; font-size: 20px; flex: 0 0 auto; }
  /* flex-basis 0 so a long class name cannot push the button onto its own line */
  .row-format { order: 2; flex: 1 1 0%; min-width: 0; }
  .row-format b { font-size: 19px; }
  .row-duration { margin-top: 6px; font-size: 12px; letter-spacing: .06em; }
  .row-book { order: 3; flex: 0 0 auto; margin-left: auto; }
  .row-who { order: 4; flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; font-size: 14px; }
  .row-who a {
    min-height: 44px; display: inline-flex; align-items: center; border-bottom: 0;
    text-decoration: underline; text-decoration-color: var(--accent);
    text-decoration-thickness: 1px; text-underline-offset: 3px;
  }
  .row-spots, .row-level { display: none; }
  .row-book .btn, .row-book .btn-secondary { min-height: 44px; padding: 0 11px; font-size: 13px; }
}

.row-meta-mobile { display: none; }
@media (max-width: 640px) { .row-meta-mobile { display: inline; color: var(--ash); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; } }

/* --------------------------------------------------------- 13. day rail */

.day-rail {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch; border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.day-rail button {
  flex: 0 0 auto; min-height: 44px; min-width: 64px; padding: 0 14px;
  background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  font: 600 14px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--fog);
}
.day-rail button[aria-selected="true"] { color: var(--chalk); border-bottom-color: var(--accent); }
.calm main .day-rail { border-bottom-color: var(--line-light); }
.calm main .day-rail button { color: var(--slate); }
.calm main .day-rail button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent-light); }

/* ------------------------------------------------------------ 14. ticker */

.ticker { overflow: hidden; position: relative; padding: 10px 0; }
.ticker-track { display: inline-flex; align-items: center; gap: 0; white-space: nowrap; will-change: transform; }
.ticker-item {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(44px, 7vw, 96px); line-height: 1.12; color: var(--chalk);
  text-decoration: none; padding: 0 .28em; border-bottom: 0;
  transition: color .14s ease;
}
.ticker-item:hover, .ticker-item:focus-visible { color: var(--accent); }
.ticker-dot { display: inline-block; width: 10px; height: 10px; background: var(--accent); vertical-align: middle; margin: 0 .2em; }
@media (prefers-reduced-motion: reduce) { .ticker { overflow-x: auto; } .ticker-item { transition: none; } }

/* ------------------------------------------------------------ 15. reveal */

@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s cubic-bezier(.16,.84,.36,1); }
  [data-reveal].is-visible { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------- 16. panel */

.panel { background: var(--raise); border: 1px solid var(--line); padding: 24px; }
.calm main .panel { background: var(--paper-raise); border-color: var(--line-light); }

/* -------------------------------------------------------- 17. form controls */

.field { display: block; margin-bottom: 20px; }
.field > .label, .field > label {
  display: block; font: 600 13px/1.2 var(--font-ui); text-transform: uppercase;
  letter-spacing: .1em; color: var(--fog); margin-bottom: 8px;
}
.calm main .field > .label, .calm main .field > label { color: var(--slate); }
.input, input[type="text"], input[type="email"], input[type="tel"], input[type="search"], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 0;
  background: var(--ground); color: var(--chalk); border: 1px solid var(--line);
  font: 400 16px/1.4 var(--font-ui);
}
textarea { min-height: 120px; }
select { appearance: none; background-image: none; padding-right: 14px; }
.input::placeholder, input::placeholder { color: var(--ash); }
.input:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--accent); }
.calm main .input, .calm main input[type="text"], .calm main input[type="email"], .calm main input[type="tel"],
.calm main input[type="search"], .calm main select, .calm main textarea {
  background: var(--paper-raise); color: var(--ink); border-color: #A9A79E;
}
.calm main input::placeholder { color: var(--slate); }
.calm main .input:focus-visible, .calm main input:focus-visible, .calm main select:focus-visible { border-color: var(--accent-light); }

.check { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.check input[type="checkbox"] { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); flex: 0 0 auto; }
.calm main .check input[type="checkbox"] { accent-color: var(--accent-light); }
.check label { font-size: 16px; line-height: 1.4; }
.field-error { display: block; margin-top: 8px; font-size: 14px; color: #FF9C8A; }
.calm main .field-error { color: #A32615; }
.field-hint { display: block; margin-top: 8px; font-size: 14px; color: var(--ash); }
.calm main .field-hint { color: var(--slate); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.segmented { display: inline-flex; border: 1px solid var(--line); }
.segmented button {
  min-height: 44px; padding: 0 16px; background: transparent; border: 0; cursor: pointer;
  font: 600 13px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--fog);
}
.segmented button[aria-pressed="true"] { background: var(--accent); color: var(--ground); }
.calm main .segmented { border-color: var(--line-light); }
.calm main .segmented button { color: var(--slate); }
.calm main .segmented button[aria-pressed="true"] { background: var(--accent-light); color: #FFFFFF; }

/* --------------------------------------------------------- 18. the room */

.room { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.podium {
  width: min(320px, 70%); min-height: 44px; display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper);
  font: 600 12px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .16em;
}
.room-front-label {
  font: 600 11px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .18em; color: var(--slate);
}
.room-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.room-row-label { font: 600 11px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .14em; color: var(--slate); }

.seat {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 4px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1;
  background: var(--paper); color: var(--ink); border: 1px solid var(--ink);
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.seat[data-kind="spot"] { border-radius: 4px; width: 52px; }
.seat[data-state="selected"] { background: var(--accent-light); border-color: var(--accent-light); color: var(--chalk); }
.seat[data-state="mine"] { background: var(--band); border-color: var(--band); color: var(--chalk); }
.seat[data-state="taken"] {
  cursor: not-allowed; color: var(--slate); border-color: #B8B7B0;
  background-color: var(--seat-taken);
  background-image: repeating-linear-gradient(45deg, rgba(90,90,96,.34) 0 2px, transparent 2px 6px);
}
@media (prefers-reduced-motion: no-preference) {
  .seat:not([data-state="taken"]):hover { transform: scale(1.06); }
}
.seat:not([data-state="taken"]):hover { border-color: var(--accent-light); }
@media (prefers-reduced-motion: reduce) { .seat { transition: none; } }

.seat-legend { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 14px; color: var(--slate); }
.seat-legend .seat { width: 26px; height: 26px; min-width: 26px; min-height: 26px; font-size: 11px; pointer-events: none; }

/* ------------------------------------------------------------- 19. calm */

body.calm main { background: var(--paper); color: var(--ink); }
body.calm main h1, body.calm main h2, body.calm main h3 { color: var(--ink); }
body.calm main .muted, body.calm main .lede { color: var(--slate); }
body.calm main .note { color: var(--slate); }
body.calm { background: var(--paper); }
/* header and footer stay dark: they carry their own colors */

/* -------------------------------------------------------------- 20. prose */

.prose { max-width: 68ch; }
.prose p, .prose ul, .prose ol { margin-bottom: 22px; color: var(--fog); }
.calm main .prose p, .calm main .prose ul, .calm main .prose ol { color: var(--ink); }
.prose h2 { font-size: clamp(28px, 3.4vw, 40px); margin: 44px 0 16px; }
.prose h3 { margin: 32px 0 12px; }
.prose a { color: var(--chalk); text-decoration: none; border-bottom: 1px solid var(--accent); }
.prose a:hover, .prose a:focus-visible { color: var(--accent); }
.calm main .prose a { color: var(--ink); border-bottom-color: var(--accent-light); }
.prose li { margin-bottom: 10px; padding-left: 18px; position: relative; }
.prose li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 1px; background: var(--accent); }
.prose strong { color: var(--chalk); font-weight: 700; }
.calm main .prose strong { color: var(--ink); }

/* -------------------------------------------------------------- 21. footer */

.site-footer { background: var(--ground); color: var(--fog); border-top: 1px solid var(--line); padding: 72px 0 40px; }
.footer-inner { display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr); gap: 40px 56px; align-items: start; }
@media (max-width: 860px) { .footer-inner { grid-template-columns: 96px minmax(0, 1fr); } }
@media (max-width: 560px) { .footer-inner { grid-template-columns: 1fr; gap: 28px; } }
.footer-mark img { display: block; width: 96px; height: 96px; object-fit: contain; }
.footer-mark img.is-inverted { filter: invert(1); }
.footer-tagline { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.08; text-wrap: balance; color: var(--chalk); margin-bottom: 22px; }
.site-footer a { color: var(--fog); text-decoration: none; border-bottom: 1px solid var(--line); }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-legal { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 14px; color: var(--ash); }

/* -------------------------------------------------------- 22. utilities */

.title-link {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(26px, 3vw, 34px); line-height: 1.14; color: var(--chalk);
  text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 3px;
  display: inline-block; transition: color .14s ease;
}
.title-link:hover, .title-link:focus-visible { color: var(--accent); }
.calm main .title-link { color: var(--ink); border-bottom-color: var(--accent-light); }
@media (prefers-reduced-motion: reduce) { .title-link { transition: none; } }

.max-60 { max-width: 60ch; }
.text-accent { color: var(--accent); }
.calm main .text-accent { color: var(--accent-light); }
.mt-0 { margin-top: 0; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 64px; }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }
[hidden] { display: none !important; }

/* === commerce and first ride (W6) === */

/* Kroxen has a very tall cap height, so the 0.92 the hero h1 uses collides the
   moment an inner-page h1 wraps to a second line. These three pages set their
   own. */
.page-pricing h1, .page-confirmed h1, .page-first-ride h1 { line-height: 1.06; }
/* A prose h2 lands at 28px, well under the h2 size the 1.0 line-height is for,
   and so does every h2 on a phone. Both wrap, so both get the 1.08 floor. */
.page-pricing .prose h2, .page-first-ride .prose h2 { line-height: 1.08; }
@media (max-width: 760px) {
  .page-pricing h2, .page-confirmed h2, .page-first-ride h2 { line-height: 1.08; }
}

/* --- /pricing ---------------------------------------------------------- */

.pricing-head { padding-bottom: 24px; }
.pricing-head .sample-line { color: var(--chalk); max-width: 34ch; }
.pricing-intro { color: var(--fog); max-width: 52ch; }

.buy-panel { max-width: 540px; }
.buy-panel .field { margin-bottom: 0; }
.buy-panel-error { margin-top: 14px; }

.page-pricing .price-cta { grid-column: 1 / -1; margin-top: 18px; }
.page-pricing .price-suffix {
  display: block; margin-top: 10px;
  font: 600 12px/1.3 var(--font-ui); text-transform: uppercase; letter-spacing: .14em;
  color: var(--ash);
}
.price-msg {
  grid-column: 1 / -1; margin-top: 12px; max-width: 46ch;
  font-size: 14px; line-height: 1.5; color: #FF9C8A;
}
.price-msg:empty { display: none; }
.sample-foot { border-top: 1px solid var(--line); padding-top: 20px; }

@media (min-width: 861px) {
  .page-pricing .price-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) 132px;
    column-gap: 48px;
  }
  .page-pricing .price-name { grid-column: 1; grid-row: 1; }
  .page-pricing .price-value { grid-column: 2; grid-row: 1; text-align: right; }
  .page-pricing .price-suffix { text-align: right; }
  .page-pricing .price-note { grid-column: 1 / 3; grid-row: 2; }
  .page-pricing .price-cta {
    grid-column: 3; grid-row: 1 / 3; margin-top: 0;
    align-self: center; justify-self: end;
  }
  .page-pricing .price-cta .btn, .page-pricing .price-cta a.btn { min-width: 108px; }
  .page-pricing .price-msg { grid-column: 1 / -1; grid-row: 3; }
}

/* --- /pricing/confirmed ------------------------------------------------ */

.confirm-credits {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px;
  margin-top: 40px;
}
.confirm-credits .numeral { font-size: clamp(64px, 10vw, 128px); color: var(--accent-light); }
.confirm-credits-word {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(22px, 2.6vw, 30px); line-height: 1.08; text-wrap: balance; max-width: 22ch;
}

.receipt { margin-top: 44px; max-width: 620px; border-top: 1px solid var(--line-light); }
.receipt-row {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 6px 24px; padding: 24px 0; border-bottom: 1px solid var(--line-light);
}
.receipt dt {
  font: 600 13px/1.3 var(--font-ui); text-transform: uppercase; letter-spacing: .1em;
  color: var(--slate);
}
.receipt dd { margin: 0; font-size: 18px; line-height: 1.4; overflow-wrap: anywhere; }

.confirm-note {
  margin-top: 36px; max-width: 62ch; padding-top: 18px;
  border-top: 1px solid var(--line-light);
  font-size: 15px; line-height: 1.55; color: var(--slate);
}
.confirm-note-label {
  display: block; margin-bottom: 10px;
  font: 600 12px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .14em;
  color: var(--slate);
}

/* --- /first-ride ------------------------------------------------------- */

.first-ride-head { padding-bottom: 32px; }
.page-first-ride h1 { font-size: clamp(52px, 7.4vw, 112px); }

.first-ride-intro {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .62fr);
  gap: 48px 64px; align-items: stretch;
}
.first-ride-figure { margin: 0; aspect-ratio: 3 / 4; max-height: 560px; }
@media (min-width: 901px) {
  .first-ride-figure { aspect-ratio: auto; height: 100%; min-height: 460px; max-height: none; }
}
.first-ride-figure img { filter: grayscale(1) contrast(1.12) brightness(1.42); }
.first-ride-figure::after {
  background: linear-gradient(to top, rgba(11,11,13,.72) 0%, rgba(11,11,13,.18) 55%, rgba(11,11,13,.10) 100%);
}

.first-ride-offer {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 40px 64px; align-items: start;
}
.offer-panel .field:last-of-type { margin-bottom: 24px; }
.form-msg { margin-top: 18px; max-width: 46ch; font-size: 15px; line-height: 1.55; }
.form-msg:empty { display: none; }
.form-msg[data-tone="error"] { color: #FF9C8A; }
.form-msg[data-tone="ok"] { color: var(--accent); }

@media (max-width: 900px) {
  .first-ride-intro { grid-template-columns: 1fr; gap: 40px; }
  .first-ride-figure { aspect-ratio: 4 / 3; max-height: 380px; }
  .first-ride-offer { grid-template-columns: 1fr; gap: 32px; }
}

/* === content pages (W7) === */

/* Page h1s outside the hero can wrap (an instructor's full name, a post
   title). The hero is the only h1 allowed to stay at the tight 0.92 default;
   these get the 1.08 minimum the spacing rules call for. */
.page-instructor h1, .page-instructors h1, .page-journal h1,
.page-post h1, .page-studio h1, .page-accessibility h1 { line-height: 1.08; }

/* ---------------------------------------------------------- instructors */

.instructor-roster > li.instructor-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 32px; flex-wrap: wrap;
}
.instructor-row-main { min-width: 0; }
.instructor-name {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(28px, 3.6vw, 44px); line-height: 1.08; text-wrap: balance;
  color: var(--chalk); text-decoration: none; border-bottom: 1px solid transparent;
  transition: color .14s ease, border-color .14s ease;
}
.instructor-name:hover, .instructor-name:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .instructor-name { transition: none; } }
.instructor-meta { margin-top: 12px; color: var(--fog); font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
.instructor-row-side { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.instructor-handle { color: var(--ash); font-size: 15px; }
.instructor-photo { display: block; border-radius: 0; object-fit: cover; }

/* the per-instructor week list has no "who" column (every row is the same
   instructor), so it drops that grid area rather than leaving it blank */
.instructor-week .row-class {
  grid-template-columns: 96px minmax(0, 1fr) 90px auto;
  grid-template-areas: "time format level book";
}
@media (max-width: 640px) { .instructor-week .row-class { grid-template-columns: initial; grid-template-areas: initial; } }

.spotify-embed { display: block; width: 100%; height: 352px; border: 0; border-radius: 0; }

/* ---------------------------------------------------------------- journal */

.journal-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px 32px; align-items: start; }
.journal-thumb { aspect-ratio: 4 / 3; }
.journal-date { color: var(--ash); font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
.journal-excerpt { color: var(--fog); max-width: 60ch; }
@media (max-width: 640px) {
  .journal-row { grid-template-columns: 1fr; }
  .journal-thumb { max-width: 220px; }
}

.post-hero { margin: 0; aspect-ratio: 16 / 9; }
.post-date { color: var(--fog); font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }

/* ----------------------------------------------------------------- studio */

.studio-label { font: 600 12px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .14em; color: var(--ash); }

/* === booking pages (W5) === */
/* /schedule, /book and /account. Page scoped: nothing here changes a shared
   component for the other pages, it only overrides inside these three. */

.pt-0 { padding-top: 0; }

/* A short duotone band on Schedule, not the tall hero-scale fullbleed. */
.schedule-band { min-height: 260px; }
@media (max-width: 768px) { .schedule-band { min-height: 180px; } }

/* ------------------------------------------- the header on a calm page */
/* The shell header is built for the near-black ground. On the light booking
   pages its chalk wordmark and fog links sit on paper and fall under AA, so
   the whole bar is restated here in ink and slate. The footer stays dark. */

.calm .site-header { background: var(--paper); border-bottom-color: transparent; }
.calm .site-header.is-stuck { background: var(--paper); border-bottom-color: var(--line-light); }
.calm .wordmark { color: var(--ink); }
.calm .wordmark .w-x { color: var(--accent-light); }
.calm .nav-list a { color: var(--slate); }
.calm .nav-list a:hover,
.calm .nav-list a:focus-visible { color: var(--ink); border-bottom-color: var(--accent-light); }
.calm .nav-list a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent-light); }
.calm .nav-toggle { border-color: var(--slate); }
.calm .nav-toggle span:not(.sr-only) { background: var(--ink); }
.calm .nav-toggle[aria-expanded="true"] { border-color: var(--accent-light); }
.calm .site-header :focus-visible { outline-color: var(--accent-light); }
.calm .skip-link { background: var(--accent-light); color: #FFFFFF; }
.calm .site-header .btn { background: var(--accent-light); color: #FFFFFF; }
.calm .site-header .btn:hover, .calm .site-header .btn:focus-visible { background: #005A66; color: #FFFFFF; }
@media (max-width: 900px) {
  .calm .site-nav { background: var(--paper); }
  .calm .nav-list a { color: var(--ink); }
  .calm .nav-list a[aria-current="page"] { color: var(--accent-light); }
}

/* A disabled primary on paper: no opacity trick, a real quiet state. */
.calm main .btn[disabled] {
  background: var(--paper); color: var(--slate);
  border-color: var(--slate); opacity: 1; cursor: not-allowed;
}
.calm main .btn[disabled]:hover { background: var(--paper); color: var(--slate); }

/* An h1 at hero scale is too loud away from the hero, so these pages take a
   smaller display size with a looser line so wrapped titles never touch. */
body.page-schedule main .page-title,
body.page-book main .page-title,
body.page-account main .page-title {
  font-size: clamp(46px, 7.6vw, 112px);
  line-height: 1;
  letter-spacing: -.005em;
  text-wrap: balance;
}

body.page-schedule main .section-h2,
body.page-book main .section-h2,
body.page-account main .section-h2 {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.08;
  letter-spacing: 0;
  margin-bottom: 20px;
}

/* ---------------------------------------------------- schedule: filters */

.filters {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, auto) minmax(0, auto);
  gap: 24px 40px;
  align-items: end;
}
@media (max-width: 900px) { .filters { grid-template-columns: 1fr; align-items: stretch; } }

.filter-field { margin-bottom: 0; }
.filter-field > .label {
  display: block; font: 600 13px/1.2 var(--font-ui); text-transform: uppercase;
  letter-spacing: .1em; color: var(--fog); margin-bottom: 8px;
}
.calm main .filter-field > .label { color: var(--slate); }

.filters .segmented { flex-wrap: wrap; }
.filters .segmented button + button { border-left: 1px solid var(--line); }
.calm main .filters .segmented button + button { border-left-color: var(--line-light); }
.segmented button[aria-checked="true"] { background: var(--accent); color: var(--ground); }
.calm main .segmented button[aria-checked="true"] { background: var(--accent-light); color: #FFFFFF; }
@media (max-width: 767px) {
  .filters .segmented { display: flex; }
  .filters .segmented button { flex: 1 1 auto; padding: 0 10px; font-size: 12px; letter-spacing: .06em; }
}
.filter-clear { grid-column: 1 / -1; margin: 0; }

/* ------------------------------------------------------- schedule: week */

.week { margin-top: 8px; }
.day-group + .day-group { margin-top: 56px; }
.day-heading {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(28px, 3.2vw, 40px); line-height: 1.08; text-wrap: balance;
  margin-bottom: 16px;
}
.day-heading .day-date { color: var(--ash); font-weight: 600; }
.calm main .day-heading .day-date { color: var(--slate); }
.day-empty, .empty-note { padding: 24px 0; color: var(--fog); }
.calm main .day-empty, .calm main .empty-note { color: var(--slate); }

.row-class.is-past { opacity: .55; }
.row-done {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 600 13px/1 var(--font-ui); text-transform: uppercase;
  letter-spacing: .1em; color: var(--ash);
}
.row-class.is-full .row-spots span { color: var(--ash); }

/* position: relative matters. The tabs carry an .sr-only count, and .sr-only is
   absolutely positioned: without a positioned button its containing block sits
   above the rail, so it escapes the rail's overflow clip and drags the whole
   document into horizontal scroll at 375. */
.day-rail button {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 6px 12px;
}
.rail-day { font: 600 14px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .08em; }
.rail-date { font: 400 12px/1 var(--font-ui); letter-spacing: .03em; color: var(--ash); }
.day-rail button[aria-selected="true"] .rail-date { color: var(--fog); }
.calm main .day-rail button[aria-selected="true"] .rail-date { color: var(--slate); }
@media (max-width: 767px) { .day-heading { display: none; } }
.day-group[role="tabpanel"] { padding-top: 8px; }

.format-shoes { margin-top: 10px; color: var(--ash); font-size: 14px; }
.calm main .format-shoes { color: var(--slate); }

/* ------------------------------------------------------------ book: head */

body.page-book main .book-back { margin-bottom: 24px; }
body.page-book main .book-meta {
  margin-top: 20px; font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.5; color: var(--slate); max-width: 54ch;
}
body.page-book main .book-shoes { margin-top: 12px; font-size: 14px; color: var(--slate); }
body.page-book main .book-error { margin-top: 24px; font-size: 19px; color: var(--ink); max-width: 52ch; }

/* ------------------------------------------------------------ book: room */

.room-panel { padding: 32px 24px; }
.room-hint { margin-bottom: 28px; font-size: 14px; line-height: 1.5; color: var(--slate); max-width: 62ch; }
.room-scroll { overflow-x: auto; padding: 4px 0 12px; }
.room-inner { min-width: max-content; max-width: max-content; margin: 0 auto; }
body.page-book .room-rows { display: flex; flex-direction: column; align-items: center; gap: 10px; }
body.page-book .room-row { flex-wrap: nowrap; gap: 8px; }
/* The podium bar spans the widest row so the map reads as one object. */
body.page-book .podium { width: 100%; min-height: 48px; }

/* The rows arc around the podium: --curve is 0 at the ends of a row and 1 in
   the middle, and the pixel amount grows with the seat size. */
body.page-book .room-rows .seat { transform: translateY(calc(var(--curve, 0) * 10px)); }
@media (prefers-reduced-motion: no-preference) {
  body.page-book .room-rows .seat:not([data-state="taken"]):hover {
    transform: translateY(calc(var(--curve, 0) * 10px)) scale(1.06);
  }
}
@media (min-width: 900px) {
  body.page-book .room-rows { gap: 14px; }
  body.page-book .room-row { gap: 12px; }
  body.page-book .room-rows .seat {
    width: 60px; height: 60px; min-width: 60px; min-height: 60px;
    font-size: 22px; transform: translateY(calc(var(--curve, 0) * 20px));
  }
  body.page-book .room-rows .seat[data-kind="spot"] { width: 68px; min-width: 68px; }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  body.page-book .room-rows .seat:not([data-state="taken"]):hover {
    transform: translateY(calc(var(--curve, 0) * 20px)) scale(1.06);
  }
}
.legend-item { display: inline-flex; align-items: center; gap: 8px; }
/* The bike map keeps its rows intact and scrolls inside its own box on a phone,
   so it needs to say so. Above 900px every row fits and the line goes away. */
.room-swipe { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--slate); }
@media (min-width: 900px) { .room-swipe { display: none; } }
.room-alert {
  margin-top: 22px; padding: 10px 0 10px 16px;
  border-left: 3px solid #A32615; color: #A32615; font-size: 15px; line-height: 1.5;
}

/* ------------------------------------------------------------ book: form */

.book-form { margin-top: 24px; padding: 32px 24px; }
.book-form-grid {
  display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 32px 48px; align-items: start;
}
@media (max-width: 760px) { .book-form-grid { grid-template-columns: 1fr; gap: 20px; } }
.book-pick .eyebrow { margin-bottom: 12px; }
.pick-numeral {
  font-size: clamp(60px, 9vw, 104px); line-height: 1;
  color: var(--accent-light); min-height: 1em;
}
.book-pick .note { margin-top: 12px; }
.field-optional { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--slate); }
.cleat-note { margin-top: 4px; margin-bottom: 20px; max-width: 56ch; }
.credit-line { margin: 4px 0 20px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.form-note { margin-top: 16px; font-size: 15px; line-height: 1.5; color: #A32615; }

/* --------------------------------------------------------- book: success */

.success-panel { margin-top: 24px; padding: 32px 24px; }
.success-numeral {
  font-size: clamp(88px, 15vw, 180px); line-height: 1;
  color: var(--accent-light); margin: 16px 0 20px;
}
.success-when { font-size: 18px; line-height: 1.5; max-width: 52ch; }
.success-first { margin-top: 14px; font-size: 18px; line-height: 1.5; max-width: 52ch; }
.success-ref { margin-top: 14px; color: var(--slate); font-size: 15px; }
.success-panel h2:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 4px; }

.email-preview {
  margin-top: 36px; padding: 24px;
  border: 1px dashed var(--line-light); background: var(--paper);
}
.email-preview-title {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: 20px; line-height: 1.08; letter-spacing: .02em; margin-bottom: 12px;
}
.email-fields {
  display: grid; grid-template-columns: 84px minmax(0, 1fr);
  gap: 8px 16px; margin: 18px 0 0; font-size: 15px; line-height: 1.45;
}
.email-fields dt {
  font: 600 12px/1.5 var(--font-ui); text-transform: uppercase;
  letter-spacing: .1em; color: var(--slate);
}
.email-fields dd { margin: 0; }
.email-body { margin-top: 20px; font-size: 15px; line-height: 1.6; max-width: 62ch; }

/* ---------------------------------------------------------- the account */

.account-figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; }
.account-numeral { font-size: clamp(72px, 11vw, 140px); line-height: 1; color: var(--accent-light); }
.account-word {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(24px, 3vw, 36px); line-height: 1.08;
}
.account-membership { margin-top: 14px; font-size: 18px; }
.account-block { margin-top: 64px; }
.account-past { margin-top: 24px; color: var(--slate); }
.row-spots-word { font-size: 26px; }
.lookup-form { max-width: 460px; }
.lookup-form .field { margin-bottom: 24px; }

.purchase-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 32px; align-items: baseline; }
@media (max-width: 560px) { .purchase-row { grid-template-columns: 1fr; } }
.purchase-name {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(22px, 2.6vw, 30px); line-height: 1.08; text-wrap: balance;
}
.purchase-meta { color: var(--slate); font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }

.linklike {
  background: none; border: 0; padding: 0 0 2px; cursor: pointer;
  font: 400 17px/1.55 var(--font-ui); color: var(--ink);
  border-bottom: 1px solid var(--accent-light);
}
.linklike:hover, .linklike:focus-visible { color: var(--accent-light); }

/* === narrow-phone h1 floor (coordinator) === */
/* Kroxen at the 64px floor cannot fit a thirteen-letter word inside 335px; step the floor down on the narrowest phones. */
@media (max-width: 400px) {
  h1 { font-size: clamp(48px, 15vw, 64px); }
}