/* ==========================================================================
   Interval — a boutique strength / HIIT interval-studio template
   A Templatorium template · https://templatorium.com

   The idea in one line: a studio site built like the workout clock. A light,
   precise instrument panel — a live MM:SS timer paces the page, sections read
   as work/rest rounds, and the timetable is an interval board. The opposite of
   the dark sweat-photo brochure.

   HOW TO RE-THEME (the 30-second version — full guide in docs/README.md):
   every color, font, and size is a custom property in the :root block below.
   Change the values there and the whole site follows. Everything under the
   tokens is structure; you rarely need to touch it.

   Two promises this template keeps, computed (not eyeballed):
   • Every text/background pair meets WCAG 2.2 AA — graphite on chalk is 16.1:1;
     the Book button is GRAPHITE on Signal Orange at 5.39:1.
   • Signal Orange is a FILL / MARKER, never text on a light ground: white on
     orange is 3.36:1 (fails) and orange on chalk is 2.99:1 (fails). Both are
     banned by design. If you change a color, re-check it:
     https://webaim.org/resources/contrastchecker/
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — the re-theme contract (the color surface the builder rewrites)
   -------------------------------------------------------------------------- */
:root {
  /* Color story: cool chalk ground / blue-black graphite ink / one signal
     orange GO. The accent is used on LESS than 5% of any page — the Book
     button fill, the timer's active state, work markers, the live interval
     bar. It NEVER sets running text on a light ground and it is NEVER white:
     the one hard rule this palette exists to hold. */
  --bg:          #F1F2F0; /* page ground — cool near-white "Chalk" */
  --surface:     #E7E8E4; /* alt sections, data-board cells, card fills "Panel" */
  --ink:         #14161A; /* primary text; the dark board ground; CTA text ON orange */
  --muted:       #5E615B; /* secondary text / meta on light grounds "Concrete" (5.60 on chalk) */
  --muted-ink:   #8C8F89; /* secondary text on the graphite board "Concrete Light" (5.52 on ink) */
  --line:        #D8D9D4; /* hairlines / round dividers on light grounds "Steel" (decorative) */

  --accent:      #FF4A1C; /* Signal Orange — THE accent. FILL/MARKER ONLY, never text */
  --accent-ink:  #14161A; /* text on the orange fill — GRAPHITE, never white (5.39 on orange) */
  --chalk-on-ink:#F1F2F0; /* chalk text on the graphite board ground (16.1 on ink) */

  /* Reserved DECORATIVE field token — the live interval bar's fill and the
     faint board watermark read from it. It follows the accent by default (so
     it is value-preserving today). The browser builder's "use my brand color"
     mode lands the buyer's hue HERE — a decoration only, never text, and NEVER
     the Book button, which stays the locked graphite-on-orange. */
  --field:       var(--accent);
  --field-tint:  #FF9C82; /* the field hue lightened to read as a marker on the graphite board */

  /* Graphite board ground hairlines (decorative, on the dark ground) */
  --ink-line:    #2C2F34;

  /* Form input borders need >= 3:1 against the page; the hairline --line is too
     faint, so inputs use --muted (5.60). Graphite on focus. */
  --input-border:#5E615B;

  /* Type — three vendored variable faces, self-hosted as woff2 (zero runtime
     requests, all SIL OFL 1.1):
       Archivo Expanded — a WIDE industrial grotesque that reads like an
         instrument label. The deliberate ANTI-condensed choice (no Anton/Bebas
         cliché). Used at the Expanded width via font-stretch: 125%.
       Martian Mono — the stopwatch/console data voice. Carries EVERY numeral:
         the clock, work:rest ratios, round counts, the timetable columns.
       Hanken Grotesk — a neutral humanist grotesque for prose (chosen over
         Inter to dodge the AI-default flatness). */
  --font-display: "Archivo Expanded", "Archivo", system-ui, sans-serif;
  --font-mono:    "Martian Mono", ui-monospace, SFMono-Regular, monospace;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  /* Scale. The display-to-body jump is >= 2.75x on purpose; the clock is a
     register of its own, larger than the display. */
  --t-clock:   clamp(72px, 16vw, 220px); /* the hero interval clock (MM:SS) */
  --t-display: clamp(40px, 7vw, 96px);   /* statement intervals, UPPERCASE */
  --t-h2:      clamp(30px, 4.2vw, 54px);
  --t-h3:      21px;
  --t-body:    16px;
  --t-small:   14px;
  --t-data:    13px; /* mono board data */
  --t-label:   11px; /* mono uppercase micro-label / round tag */

  /* Space & structure — the instrument-panel grid. */
  --sp-section: clamp(64px, 9vw, 104px);
  --gutter:     24px;
  --max:        1200px;
  --nav-h:      68px;

  /* Radius: console keys, not sporty pills. Buttons 4px, cards/cells 6px, the
     clock panel 0 (instruments are square). */
  --r-btn:  4px;
  --r-cell: 6px;

  /* The faint plate/footer motif — an interval-board + stopwatch line, drawn
     from a palette token so it re-themes and retires under a real photo. */
  --plate-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4'%3E%3Ccircle cx='188' cy='44' r='26'/%3E%3Cpath d='M188 44 L188 26 M188 44 L202 44'/%3E%3Cpath d='M188 12 L188 18'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Crect x='24' y='120' width='16' height='22'/%3E%3Crect x='48' y='120' width='8' height='22'/%3E%3Crect x='64' y='120' width='16' height='22'/%3E%3Crect x='88' y='120' width='8' height='22'/%3E%3Crect x='104' y='120' width='16' height='22'/%3E%3Crect x='128' y='120' width='8' height='22'/%3E%3Crect x='144' y='120' width='16' height='22'/%3E%3C/g%3E%3Cpath d='M24 104 L200 104' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. FONT FACES — vendored variable woff2, ONE file per family with a weight
      range (md5-verified distinct). Archivo carries a width axis; we request
      the Expanded end (125%) on the display elements.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo Expanded";
  src: url("../fonts/archivo-expanded.woff2") format("woff2");
  font-weight: 400 900;
  font-stretch: 62% 125%; /* the file spans these widths; display type asks for 125% */
  font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("../fonts/martian-mono.woff2") format("woff2");
  font-weight: 300 800;
  font-stretch: 75% 112%;
  font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------------------
   3. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
/* Sticky-nav lesson: in-page anchors must clear the solid nav */
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  /* full-bleed plates use 100vw; clip (not hidden — keeps the sticky nav
     working) stops that from creating a horizontal scrollbar */
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }

/* Focus is visible on EVERY ground, ground-aware:
   • light grounds (Chalk / Panel): 3px GRAPHITE (16.1) — NOT orange, whose ring
     on chalk is 2.99, under the 3:1 non-text floor.
   • graphite board: 3px Signal Orange (5.39) — a marker use, which is allowed.
   • on an orange fill (the button itself): 3px graphite (5.39). */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
.on-ink :focus-visible,
section[data-ground="graphite"] :focus-visible { outline-color: var(--accent); }
.btn--primary:focus-visible { outline-color: var(--ink); }

/* Layout primitives */
.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--sp-section); }

/* Builder grounds — the browser editor can switch a section's background band
   between Chalk (bg), Panel (surface), and the Graphite board (ink). A section
   with NO data-ground renders exactly as its class always has. The graphite
   ground flips text to chalk and swaps in the on-ink text roles. Every ground
   carries palette-INDEPENDENT text (ink/chalk/muted), so the pairs clear AA on
   every offered palette and a stress brand color (verified in contrast.mjs). */
section[data-ground="chalk"]    { background: var(--bg);      color: var(--ink); }
section[data-ground="panel"]    { background: var(--surface); color: var(--ink); }
section[data-ground="graphite"] { background: var(--ink);     color: var(--chalk-on-ink); }
.section--panel { background: var(--surface); }

/* On the graphite board, roles reverse. .on-ink is set on fixed-graphite
   chrome (footer, CTA strip); section[data-ground="graphite"] mirrors it. */
.on-ink, section[data-ground="graphite"] { color: var(--chalk-on-ink); }
.on-ink .muted, section[data-ground="graphite"] .muted,
.on-ink .lede,  section[data-ground="graphite"] .lede { color: var(--muted-ink); }

/* Skip link — first tab stop on every page */
.skip-link {
  position: absolute;
  left: var(--gutter); top: -100px;
  z-index: 100;
  background: var(--ink); color: var(--chalk-on-ink);
  font: 600 var(--t-small) var(--font-body);
  padding: 10px 18px; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   4. TYPE ROLES
   -------------------------------------------------------------------------- */
.display, h1, h2 {
  font-family: var(--font-display);
  font-stretch: 125%;           /* Archivo at its Expanded width — the signature */
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
h1, .h1 { font-size: var(--t-display); }
h2, .h2 { font-size: var(--t-h2); }
.statement { font-size: var(--t-display); }

h3, .h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
}

p { max-width: 66ch; }
.muted { color: var(--muted); }
.lede {
  font-size: 19px; line-height: 1.5; color: var(--muted);
  max-width: 52ch; font-weight: 450;
}

/* Mono data strip — a spec-sheet line: ROUND number, work:rest, minutes. This
   is MACHINE DATA (a timer readout), the only place words like ROUND/WORK live —
   they belong on an interval-timer display, not as decorative kickers. */
.data {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 18px;
}
section[data-ground="graphite"] .data, .on-ink .data { color: var(--muted-ink); }

/* Prices / times / counts — always mono, always tabular so columns align. */
.fig {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* Inline file/code references share the mono register */
code { font-family: var(--font-mono); font-size: 0.9em; }

/* --------------------------------------------------------------------------
   5. BUTTONS — primary Signal Orange fill with GRAPHITE text (5.39). White on
      orange is banned. Secondary: graphite outline. Never two primaries in a
      viewport.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 15px/1 var(--font-body);
  padding: 14px 22px;
  border: 1.5px solid transparent;
  border-radius: var(--r-btn);
  text-decoration: none; cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.btn .arrow { font-family: var(--font-mono); font-weight: 500; }
.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);       /* GRAPHITE on orange — the locked pair */
  border-color: var(--accent);
}
.btn--primary:hover { background: #E53E14; border-color: #E53E14; } /* darker orange, graphite text still ~6.1 */
.btn--secondary {
  background: transparent; color: var(--ink); border-color: var(--ink);
}
.btn--secondary:hover { background: var(--ink); color: var(--chalk-on-ink); }
/* On the graphite board the secondary reverses to chalk */
.on-ink .btn--secondary, section[data-ground="graphite"] .btn--secondary {
  color: var(--chalk-on-ink); border-color: var(--chalk-on-ink);
}
.on-ink .btn--secondary:hover, section[data-ground="graphite"] .btn--secondary:hover {
  background: var(--chalk-on-ink); color: var(--ink);
}

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Book ↗ — the one buy-action, links OUT to the studio's booking platform. A
   mono micro-label sits under it saying so (booking honesty, never a fake
   widget). */
.book-note {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin-top: 8px;
}
.on-ink .book-note, section[data-ground="graphite"] .book-note { color: var(--muted-ink); }

/* --------------------------------------------------------------------------
   6. NAV — solid Chalk, 1px Steel rule, sticky. Never glass/translucent. Holds
      the persistent live mini-clock (the "now-in-session" tick).
   -------------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; gap: 24px; min-height: var(--nav-h); }
.wordmark {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}
.on-ink .wordmark, .site-footer .wordmark { color: var(--chalk-on-ink); }

.nav-links { display: flex; gap: 24px; list-style: none; }
.nav-links a {
  font: 500 14px/1 var(--font-body);
  color: var(--ink); text-decoration: none; padding-block: 8px;
}
.nav-links a:hover, .nav-links a[aria-current="page"] {
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px;
}
.nav-actions { display: flex; align-items: center; gap: 18px; }

/* The persistent nav mini-clock — a small tabular MM:SS tempo marker. Its value
   is the same class-length token as the hero clock (synchronized), and JS keeps
   it in sync while a class "runs". At rest it just shows the class length. */
.mini-clock {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 7px;
}
.mini-clock .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.on-ink .mini-clock, section[data-ground="graphite"] .mini-clock { color: var(--chalk-on-ink); }

/* Hamburger — hidden on desktop, shown at the collapse point (44px tap floor) */
.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--ink);
  border-radius: var(--r-btn);
  min-width: 44px; min-height: 44px; padding: 0 12px;
  align-items: center; justify-content: center; cursor: pointer;
}
.nav-toggle .bars {
  display: block; width: 18px; height: 2px; background: var(--ink);
  box-shadow: 0 6px 0 var(--ink), 0 -6px 0 var(--ink);
}

/* --------------------------------------------------------------------------
   7. THE INTERVAL CLOCK — the signature moment (§9). A live MM:SS timer is the
      hero's oversized focal object, the interval bar fills across each minute,
      and the round label reads ROUND xx / WORK|REST. Work = orange FILL, rest =
      orange OUTLINE (one accent, no second hue).

      Degradation is the whole point: the resting time (45:00), the round label,
      and the bar fill are AUTHORED INLINE in the HTML. With reduced-motion or
      no JavaScript the clock is a complete, honest instrument panel — JS only
      animates an already-present value. See js/main.js.
   -------------------------------------------------------------------------- */
.clock-status {
  font-family: var(--font-mono);
  font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 18px;
}
.clock-status .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.clock-time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--t-clock);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.on-ink .clock-time, section[data-ground="graphite"] .clock-time { color: var(--chalk-on-ink); }

.interval { margin-top: 22px; max-width: 460px; }
.interval-bar {
  height: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.interval-fill {
  display: block; height: 100%;
  background: var(--field);       /* work state: solid orange fill */
  border-radius: 1px;
  transition: width .9s linear;
}
/* rest state: the fill becomes an outline of the same hue, no second color */
.clock.is-rest .interval-fill,
.interval.is-rest .interval-fill {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--field);
}
.interval-read {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-data); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
  display: flex; gap: 10px; align-items: baseline;
}
.interval-read .sep { color: var(--line); }
.on-ink .interval-read, section[data-ground="graphite"] .interval-read { color: var(--muted-ink); }
.on-ink .interval-bar, section[data-ground="graphite"] .interval-bar {
  background: #22252A; border-color: var(--ink-line);
}
.on-ink .interval-fill, section[data-ground="graphite"] .interval-fill { background: var(--field-tint); }
.on-ink .clock.is-rest .interval-fill, section[data-ground="graphite"] .clock.is-rest .interval-fill {
  box-shadow: inset 0 0 0 2px var(--field-tint); background: transparent;
}

/* The scroll tempo line — a 2px marker under the nav that advances with scroll
   position (reading progress as tempo). JS-only + aria-hidden; no-JS simply
   never shows it. Not "motion" in the vestibular sense (it tracks position). */
.tempo {
  position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 39;
  height: 2px; background: transparent; pointer-events: none;
}
.tempo span { display: block; height: 100%; width: 0; background: var(--field); }
html:not(.js) .tempo { display: none; }

/* --------------------------------------------------------------------------
   8. HERO — the clock spans the right, headline + Book sit left; the clock
      overshoots the right edge (intentional asymmetry, §4).
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(48px, 7vw, 88px); overflow: hidden; }
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.hero-main { align-self: center; }
.hero h1 { margin-block: 14px 0; }
.hero .lede { margin-top: 22px; }
.hero .btn-row { margin-top: 30px; }
.hero-aside {
  /* the clock column overshoots the viewport's right edge on wide screens */
  margin-right: calc(-1 * max(0px, (100vw - var(--max)) / 2) - var(--gutter));
  padding-right: var(--gutter);
}

/* Page hero (interior pages) — the board grid, smaller stakes */
.page-hero { padding-block: clamp(44px, 6vw, 76px); }
.page-hero h1 { margin-top: 14px; }
.page-hero .lede { margin-top: 20px; }

/* --------------------------------------------------------------------------
   9. SECTION HEADS — a data strip + an Expanded head. Left-anchored always.
   -------------------------------------------------------------------------- */
.sec-head { margin-bottom: clamp(28px, 4vw, 44px); max-width: 60ch; }
.sec-head h2 { margin-top: 4px; }
.sec-head .lede { margin-top: 18px; }

/* Full-bleed statement interval — a single wide Archivo line on the graphite
   board (airy, breaks the dense boards). */
.statement-band { padding-block: clamp(56px, 8vw, 96px); }
.statement-band .statement { max-width: 20ch; }
.statement-band .data { color: var(--muted-ink); }

/* --------------------------------------------------------------------------
   10. FORMAT CARDS — Strength / HIIT / Conditioning. Each carries a mono spec
       strip (STRENGTH · 8 ROUNDS · 40s/20s · 45:00). Not three identical: the
       lead card runs wide.
   -------------------------------------------------------------------------- */
.fmt-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}
.fmt-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-cell);
  padding: 24px 22px 22px;
  display: flex; flex-direction: column; gap: 12px;
  color: inherit; text-decoration: none;
}
.fmt-card--wide { grid-column: span 2; }
.fmt-card .spec {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}
.fmt-card h3 { font-size: 22px; }
.fmt-card .sum { font-size: var(--t-small); color: var(--muted); max-width: none; }
.fmt-card .fmt-meta {
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.fmt-card .fmt-meta .ratio { font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.fmt-card .go { font-family: var(--font-mono); font-weight: 500; color: var(--ink); }
.fmt-card:hover h3 { text-decoration: underline; text-underline-offset: 4px; }

/* --------------------------------------------------------------------------
   11. THE INTERVAL BREAKDOWN BOARD — each format as rounds · work:rest · total
       minutes · intensity, rendered as a data board. Work = orange fill cell,
       rest = orange outline cell (one accent).
   -------------------------------------------------------------------------- */
.breakdown { display: grid; gap: var(--gutter); }
.bd-board {
  border: 1px solid var(--line);
  border-radius: var(--r-cell);
  background: var(--surface);
  overflow: hidden;
}
section[data-ground="graphite"] .bd-board { background: #1B1E22; border-color: var(--ink-line); }
.bd-head {
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
section[data-ground="graphite"] .bd-head { border-color: var(--ink-line); }
.bd-head .name {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800;
  text-transform: uppercase; font-size: 22px; letter-spacing: -0.01em;
}
.bd-head .spec {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  margin-left: auto;
}
section[data-ground="graphite"] .bd-head .spec { color: var(--muted-ink); }
/* the round strip — alternating work/rest cells */
.round-strip { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 18px; }
.round-cell {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 8px 10px; border-radius: 4px; white-space: nowrap;
}
.round-cell--work { background: var(--accent); color: var(--accent-ink); } /* orange FILL, graphite text (5.39) */
.round-cell--rest { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--accent); } /* orange OUTLINE */
section[data-ground="graphite"] .round-cell--rest { color: var(--chalk-on-ink); }
.bd-foot {
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline;
  padding: 14px 18px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
}
section[data-ground="graphite"] .bd-foot { border-color: var(--ink-line); color: var(--muted-ink); }
.bd-foot b { color: var(--ink); font-weight: 600; }
section[data-ground="graphite"] .bd-foot b { color: var(--chalk-on-ink); }

/* A single graphite board cell within a light section (the P/G alternation on
   the breakdown page) — all text pairs use the on-ink roles. */
.bd-board--ink { background: var(--ink); border-color: var(--ink-line); color: var(--chalk-on-ink); }
.bd-board--ink .bd-head, .bd-board--ink .bd-foot { border-color: var(--ink-line); }
.bd-board--ink .bd-head .spec, .bd-board--ink .bd-foot { color: var(--muted-ink); }
.bd-board--ink .bd-foot b, .bd-board--ink .round-cell--rest { color: var(--chalk-on-ink); }

/* Mono checklist (kit needed, what-to-expect) */
.checklist { list-style: none; border-top: 1px solid var(--line); max-width: 640px; }
.checklist li {
  display: flex; gap: 14px; align-items: baseline;
  padding-block: 13px; border-bottom: 1px solid var(--line);
}
.checklist .k {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); flex: 0 0 84px;
}
.checklist .v { font-size: var(--t-small); }
section[data-ground="graphite"] .checklist, section[data-ground="graphite"] .checklist li { border-color: var(--ink-line); }
section[data-ground="graphite"] .checklist .k { color: var(--muted-ink); }

/* --------------------------------------------------------------------------
   12. THE INTERVAL BOARD (timetable) — a scannable weekly board; times in
       Martian Mono tabular; each row's Book ↗ links OUT. Dense, mobile-first.
       Rendered on the graphite board ground.
   -------------------------------------------------------------------------- */
.board { border: 1px solid var(--ink-line); border-radius: var(--r-cell); overflow: hidden; }
.board-head, .board-row {
  display: grid;
  grid-template-columns: 84px 1.6fr 1fr 1fr 108px;
  gap: 16px; align-items: center;
  padding: 14px 18px;
}
.board-head {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted-ink);
  border-bottom: 1px solid var(--ink-line);
}
.board-row { border-top: 1px solid var(--ink-line); }
.board .time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-data); color: var(--chalk-on-ink); }
.board .cls {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800;
  text-transform: uppercase; font-size: 16px; letter-spacing: -0.01em; color: var(--chalk-on-ink);
}
.board .fmt-tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted-ink);
}
.board .coach { font-size: var(--t-small); color: var(--muted-ink); }
.board .btn-book {
  font: 700 12px/1 var(--font-body);
  background: var(--accent); color: var(--accent-ink);
  border: 1.5px solid var(--accent); border-radius: var(--r-btn);
  padding: 9px 12px; text-decoration: none; text-align: center; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px; justify-self: end;
}
.board .btn-book .arrow { font-family: var(--font-mono); font-weight: 500; }
.board .btn-book:hover { background: #E53E14; border-color: #E53E14; }
/* work/rest intensity beat on each row — orange fill (work-heavy) / outline (recovery) */
.board .cls-wrap { display: flex; align-items: center; gap: 10px; }
.board .beat { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.board .beat--work { background: var(--accent); }
.board .beat--rest { box-shadow: inset 0 0 0 1.5px var(--accent); }

/* day headers inside the board */
.board-day {
  padding: 12px 18px; border-top: 1px solid var(--ink-line);
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800;
  text-transform: uppercase; font-size: 15px; letter-spacing: 0.02em;
  color: var(--muted-ink);
  background: #1B1E22;
}
.board-day:first-child { border-top: 0; }

/* filter chips (timetable) — hidden entirely with no JS (all rows show anyway) */
.filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
html:not(.js) .filter { display: none; }
.filter .chip {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-btn); padding: 8px 14px; cursor: pointer;
}
.filter .chip[aria-pressed="true"] { background: var(--ink); color: var(--chalk-on-ink); border-color: var(--ink); }

/* legend */
.legend { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.legend .item {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted);
}
.legend .swatch { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.legend .swatch--work { background: var(--accent); }
.legend .swatch--rest { box-shadow: inset 0 0 0 2px var(--accent); }

/* --------------------------------------------------------------------------
   13. COACHES — ruled profile cards; a portrait plate + bio + coaching style +
       one specific client result (beats a headshot grid). Photo-light.
   -------------------------------------------------------------------------- */
.coach-list { display: grid; gap: var(--gutter); }
.coach {
  display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  border-top: 1px solid var(--line); padding-top: clamp(24px, 3vw, 40px);
}
.coach-body .name { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: 26px; letter-spacing: -0.01em; }
.coach-body .role { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.coach-body .bio { margin-top: 14px; color: var(--muted); }
.coach-pr {
  margin-top: 16px; border-left: 2px solid var(--accent);
  background: var(--surface); border-radius: 0 var(--r-cell) var(--r-cell) 0;
  padding: 14px 18px;
}
.coach-pr .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 4px; }
.coach-pr .v { font-size: var(--t-small); }
.coach-pr .v .fig { color: var(--ink); font-weight: 500; }

/* --------------------------------------------------------------------------
   14. MEMBERSHIP — tiers are NOT three identical cards: the Unlimited tier is
       a Graphite-filled cell with chalk text and an orange tick column.
   -------------------------------------------------------------------------- */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.tier {
  border: 1px solid var(--line); border-radius: var(--r-cell);
  background: var(--bg); padding: 24px 22px; display: flex; flex-direction: column; gap: 14px;
}
.tier--feature { background: var(--ink); color: var(--chalk-on-ink); border-color: var(--ink); }
.tier .who { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.tier--feature .who { color: var(--muted-ink); }
.tier h3 { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: 24px; letter-spacing: -0.01em; }
.tier .price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 34px; font-weight: 600; letter-spacing: -0.01em; }
.tier .price .per { font-size: 13px; color: var(--muted); letter-spacing: 0.04em; }
.tier--feature .price .per { color: var(--muted-ink); }
.tier .includes { list-style: none; display: grid; gap: 9px; margin-top: 2px; }
.tier .includes li { display: flex; gap: 10px; align-items: baseline; font-size: var(--t-small); }
.tier .includes .tick { color: var(--accent); font-family: var(--font-mono); flex: none; } /* orange tick, a marker */
.tier .btn { margin-top: auto; justify-content: center; }

/* per-visit compare table, mono tabular */
.compare { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.compare th, .compare td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.compare thead th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.compare td.num, .compare th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.compare tbody tr:last-child td { border-bottom: 0; }
.compare .plan { font-weight: 600; }

/* --------------------------------------------------------------------------
   15. STUDIO — story, room plates, location + map placeholder, contact
   -------------------------------------------------------------------------- */
.story { max-width: 62ch; }
.story p + p { margin-top: 18px; }
.info-list { list-style: none; border-top: 1px solid var(--line); max-width: 640px; }
.info-list li { display: flex; gap: 16px; align-items: baseline; padding-block: 13px; border-bottom: 1px solid var(--line); }
.info-list .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); flex: 0 0 92px; }
.info-list .v { font-variant-numeric: tabular-nums; font-size: var(--t-small); }

/* the map placeholder — a LABELED block, never a fake embed */
.map-slot {
  border: 1px dashed var(--line); border-radius: var(--r-cell);
  background: var(--surface);
  min-height: 240px; display: grid; place-items: center; padding: 24px; position: relative;
}
.map-slot .label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); text-align: center; line-height: 1.7;
}

/* --------------------------------------------------------------------------
   16. IMAGE PLATES — art-directed placeholders, never a bare box (RULE 2).
       A faint interval-board / stopwatch motif is masked from a palette token
       (so it re-themes AND retires under a real photo), and the spec label is
       anchored OFF-CENTER to the top-left corner as an instrument annotation.
       Full-bleed plates are height-capped so a 16:9 never becomes a band.
   -------------------------------------------------------------------------- */
.plate {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-cell);
  overflow: hidden;
}
.plate--32 { aspect-ratio: 3 / 2; }
.plate--45 { aspect-ratio: 4 / 5; }
.plate--169 { aspect-ratio: 16 / 9; }
.plate--bleed { max-height: clamp(320px, 42vw, 520px); }
.plate::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--line);
  -webkit-mask: var(--plate-motif) center / cover no-repeat;
          mask: var(--plate-motif) center / cover no-repeat;
  opacity: 0.75;
  pointer-events: none;
}
.plate:has(img)::before { display: none; }
.plate > img { width: 100%; height: 100%; object-fit: cover; }
.plate-spec {
  position: absolute; top: 12px; left: 14px;   /* OFF-CENTER — a drawing annotation */
  max-width: calc(100% - 28px);
}
.plate-spec span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); line-height: 1.6;
  background: var(--surface); padding: 3px 7px; display: inline-block;
  border: 1px solid var(--line); border-radius: 3px;
}
.plate:has(img) .plate-spec { display: none; }

/* the AI editorial figure (latent slot) — an atmospheric band, no white box */
[data-ai-figure] { margin: 0; }
[data-ai-figure] img {
  width: 100%; border-radius: var(--r-cell); border: 1px solid var(--line);
  max-height: clamp(300px, 40vw, 480px); object-fit: cover;
}

/* --------------------------------------------------------------------------
   17. FORMS — labels above fields, real borders, native validation
   -------------------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px var(--gutter); max-width: 640px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font: 500 14px/1.3 var(--font-body); }
.field .hint { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  font: 400 16px/1.4 var(--font-body); color: var(--ink);
  background: var(--bg); border: 1px solid var(--input-border);
  border-radius: var(--r-btn); padding: 12px 14px; width: 100%;
}
.field textarea { resize: vertical; min-height: 120px; }

/* the booking stub — integration-agnostic, links OUT; never a fake widget */
.book-stub {
  border: 1px solid var(--line); border-radius: var(--r-cell);
  background: var(--surface); padding: clamp(24px, 4vw, 40px);
}
.book-stub .mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 12px; }
.book-stub p { font-size: var(--t-small); color: var(--muted); }
.book-stub .btn-row { margin-top: 20px; }

/* --------------------------------------------------------------------------
   18. CTA STRIP — graphite board, one wide Archivo line, orange Book button
   -------------------------------------------------------------------------- */
.cta-strip { background: var(--ink); color: var(--chalk-on-ink); padding-block: clamp(56px, 8vw, 96px); }
.cta-strip .statement { max-width: 22ch; }
.cta-strip .lede { color: var(--muted-ink); margin-top: 18px; }
.cta-strip .btn-row { margin-top: 28px; }

/* --------------------------------------------------------------------------
   19. FOOTER — graphite ground, mono hours/address, provider link-out, a faint
       square interval-board watermark (decorative).
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink); color: var(--chalk-on-ink);
  padding-block: 56px 36px; position: relative; overflow: hidden;
}
.site-footer::after {
  content: ""; position: absolute; right: -40px; bottom: -40px;
  width: 320px; height: 320px; opacity: 0.06; pointer-events: none;
  background: var(--field-tint);
  -webkit-mask: var(--plate-motif) center / contain no-repeat;
          mask: var(--plate-motif) center / contain no-repeat;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px var(--gutter); position: relative; }
.site-footer .nap { margin-top: 18px; font-family: var(--font-mono); font-size: 12px; line-height: 2; letter-spacing: 0.03em; font-style: normal; color: var(--muted-ink); }
.site-footer .nap a { color: var(--chalk-on-ink); text-decoration: none; }
.site-footer .nap a:hover { text-decoration: underline; }
.footer-col h2 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-ink); margin-bottom: 14px; }
.footer-col ul { list-style: none; }
.footer-col li { padding-block: 5px; }
.footer-col a { font: 400 var(--t-small)/1.5 var(--font-body); color: var(--chalk-on-ink); text-decoration: none; }
.footer-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-fine { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--ink-line); display: flex; flex-wrap: wrap; gap: 10px 32px; justify-content: space-between; position: relative; }
.footer-fine p { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-ink); max-width: none; }

/* --------------------------------------------------------------------------
   20. STICKY MOBILE BAR — the live mini-clock STAYS visible (it's the point) +
       a persistent Book button. Appears at the collapse point only.
   -------------------------------------------------------------------------- */
.mobile-bar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--ink); border-top: 1px solid var(--ink-line);
  padding: 8px var(--gutter); align-items: center; justify-content: space-between; gap: 16px;
}
.mobile-bar .mini-clock { color: var(--chalk-on-ink); }
.mobile-bar .btn { padding: 11px 18px; }

/* --------------------------------------------------------------------------
   21. MOTION — reveals PLAY on entry; nothing is ever pre-hidden, so print,
       full-page screenshots, no-JS and reduced-motion all render the full page
       (LEARNINGS 2026-07-16 / Candor). Section reveals snap on a beat.
       html.js is set by js/main.js. The Interval Clock's own animation lives in
       js/main.js and only runs under no-preference — see §7.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal.in { animation: iv-rise .28s cubic-bezier(.16,1,.3,1) backwards; }
  html.js .board.in .board-row { animation: iv-rise .3s cubic-bezier(.16,1,.3,1) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
}
@keyframes iv-rise { from { opacity: 0; transform: translateY(12px); } }

/* --------------------------------------------------------------------------
   24. AMBIENT MOTION LAYER — a hand-authored WebGL interval-timer field
       (js/interval-motion.js): a Signal-Orange work/rest progress sweep + faint
       round-divider ticks over Graphite. It mounts ONLY on the dark grounds —
       the hero clock housing, the interval boards, and the CTA strips — never on
       the light Chalk body, so the studio stays light and precise (§ identity).

       Two guarantees make it safe to ship:
       • The page is COMPLETE without it. Each layer carries a CSS gradient
         POSTER as its own background (the no-JS / no-WebGL still frame) over the
         section's graphite ground — never a blank box. Under reduced-motion the
         shader paints ONE still frame (no loop) and Lenis stays off.
       • Text can never lose contrast. A `::after` scrim (70% --ink) sits over
         the motion and under the copy, so the effective background computes as
         ~Graphite — already proven 16:1 (chalk) / 5.5:1 (muted-ink) in
         contrast.mjs, regardless of what the shader draws.
   -------------------------------------------------------------------------- */
/* a .motion-host is any band/console that carries a .motion-layer child; it
   becomes the positioned, clipped containing block, and its own content rides
   above the layer. The canvas mounts INSIDE the .motion-layer (js appends to
   [data-interval-bg], which sits on the layer), so it is absolutely positioned
   and never contributes layout height. */
.motion-host { position: relative; overflow: hidden; }
.motion-host > .wrap, .motion-host > .clock { position: relative; z-index: 1; }
.motion-layer {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  /* the no-JS / no-WebGL poster — a soft still frame of the same field */
  background:
    radial-gradient(120% 92% at 16% 84%, color-mix(in srgb, var(--field-tint) 15%, transparent), transparent 60%),
    radial-gradient(90% 70% at 84% 14%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%),
    var(--ink);
}
.motion-layer .motion-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.motion-layer::after {
  content: ""; position: absolute; inset: 0;
  background: color-mix(in srgb, var(--ink) 70%, transparent);
}

/* The hero clock housing — a dark instrument console behind the live clock. The
   room around it stays light (Chalk); only the clock gets a graphite panel so
   the ambient interval-timer motion (orange over graphite) can read. It carries
   the .on-ink text roles (chalk clock, muted-ink read-out — all AA on ink). */
.clock-stage {
  background: var(--ink);
  border-radius: var(--r-cell);
  padding: clamp(26px, 3.4vw, 46px);
  min-height: clamp(236px, 30vw, 356px);
  display: flex; align-items: center;
}
.clock-stage .clock { width: 100%; }

/* --------------------------------------------------------------------------
   22. RESPONSIVE — the board grid collapses to a left-anchored stack; the
       clock stacks ABOVE the headline; the mini-clock and Book stay visible.
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-aside { order: -1; margin-right: 0; padding-right: 0; }  /* clock stacks above the headline */
  .interval { max-width: 100%; }
  .fmt-grid { grid-template-columns: 1fr 1fr; }
  .fmt-card--wide { grid-column: 1 / -1; }
  .tiers { grid-template-columns: 1fr; }
  .tier--feature { order: -1; }        /* Unlimited (graphite) tier first */
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .coach { grid-template-columns: 1fr; }
  .coach-photo { max-width: 260px; }
}

@media (max-width: 720px) {
  .nav .wrap { gap: 12px; }
  .nav-actions { gap: 12px; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    flex-direction: column; gap: 0; padding: 8px var(--gutter) 16px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { display: block; padding-block: 14px; font-size: 16px; }
  .nav-toggle { display: inline-flex; }
  .nav-actions .btn { display: none; }   /* Book moves to the sticky mobile bar */
  .nav-actions .mini-clock { margin-left: auto; }

  .mobile-bar { display: flex; }
  body { padding-bottom: 60px; }

  .fmt-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .field--full { grid-column: auto; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }

  .section { padding-block: 52px; }

  /* the interval board goes to a horizontal-scroll card so the tabular times
     survive; each row keeps its Book ↗ */
  .board-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .board { min-width: 620px; }
  .board-head, .board-row { grid-template-columns: 70px 1.4fr 0.9fr 0.9fr 92px; gap: 12px; }
}

/* --------------------------------------------------------------------------
   23. PRINT — a timed studio should print its board cleanly too
   -------------------------------------------------------------------------- */
@media print {
  .nav-toggle, .mobile-bar, .tempo, .cta-strip, .motion-layer { display: none; }
  .board, .bd-board, .plate { border: 1px solid #000; }
  .interval-fill { background: #000 !important; }
  /* the graphite clock console flattens so the readout prints black-on-white */
  .clock-stage { background: #fff !important; padding: 0; min-height: 0; }
  .clock-stage .clock-time, .clock-stage .interval-read { color: #000 !important; }
}