/* Hallmark · shape: Narrative Workflow · genre: modern-minimal · theme: Cobalt (by request, in the Chow Tech violet) · job: hire · draw: ecdffc
 * hero: Stage (the words on five columns, the field across the whole screen with its axis on the right) · nav: edge-aligned, fixed, folding to the mark on scroll · footer: colophon block · imagery: the product built, a typed replay of three ordinary days in its own section · signature: the work a business produces drifting diagonally through the field as readable fragments and coming out of the axis as named outcomes · cobalt: violet accent, Inter display and body per the brand book, JetBrains Mono for machine values, keycaps, cut panels, one graphite band
 * axes: light/geometric-sans/cool · posture: restrained · brand: Chow Tech (spec 2026-11-07) · modes: light+dark · motion: the field at 30 fps with a pointer lens, the trace typing in a loop with a pause key, three pinned chapters: the ledger printing like a receipt under an odometer, the rows arriving one by one (snapping paused inside both), and the map stepping closed, card 1, card 2, card 3, closed on five stops; a pointer-lit row on hover, one reveal on head blocks; everything still under reduced motion · scroll: snap to each section, mandatory, paused inside the rows chapter, five stops through the map · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H4 E4 S4 R3 V4 · weakest: R, the user asked for six moving parts at once; each one is tied to a job (mode, wayfinding, the idea, the map, the booking) and the rest of the page stays still · finish-review: subagent x3, 7, 7 and 7 resolved; v4 adds modes, snap, the folding nav, the pinned map and booking */
/* Hallmark · waive 1 · Inter is the display face the Chow Tech brand book sets for every heading, and the wordmark is Inter Display · the design system is the user's own, so the heads keep its face */
/* Hallmark · waive 42 · nav: edge-aligned, the lockup, two destinations and the mode key; footer: a colophon paragraph under the lockup · both named in the stamp and built as the hire anatomy asks, a plain route to the booking in the nav and the details at the close */
/* Hallmark · waive 47b · one graphite pane holding the live trace, real log lines inside · the trace is the thing being sold, an integration seen running */
/* Hallmark · dismissed 23 · the accent tint on [data-slot]::before is the scaffold's photo treatment and this page has no data-slot, so it never paints · the only accent fills are the two keys and the wordmark */
/* Hallmark · answered F20 · the booking calendar is a month of working days in five columns, so the last row holds whatever the month leaves; the count is the calendar's, not a layout choice */
/* Hallmark · waive 29 · one radial wash on the lead deliverables row, a single hue that follows the pointer · the user asked for the violet on that row to move with the cursor like the field does */
/* Hallmark · dismissed 58 · the render tier shoots the three pinned chapters at their first frame: the ledger with every line present, the rows section with all four rows, and the map with its three panels stacked in one place, so their words are counted together; in use the lines and rows arrive one at a time and one panel is open per screen */
/* Hallmark · dismissed F8 · three scroll-driven chapters, the ledger, the rows and the map · each was asked for by name, each is pinned on its own screen, and the figure in the ledger is a count of the list beside it, not a metric */
/* Hallmark · answered F4 · two filled keys, Book a call in the pane once the week is typed and Book the call at the close: the same action, the second completing the first; every other control is a key face or outlined */
@import url("./tokens.css");
@import url("./base.css");

/* ---- shared ---- */
:root { --nav-h: 72px; }
html { scroll-snap-type: y mandatory; scroll-padding-top: var(--nav-h); scroll-behavior: smooth; }
html.is-free { scroll-snap-type: none; }
@media (max-width: 60rem) { html { scroll-snap-type: none; scroll-behavior: auto; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.snap { scroll-snap-align: start; scroll-snap-stop: always; }
body { font-family: var(--font-body); letter-spacing: -0.01em; }
h1, h2, h3 { font-optical-sizing: auto; color: var(--color-ink); }
h3 { font-weight: 600; letter-spacing: -0.02em; }
.lead { color: var(--color-muted); }
a { text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--color-accent); }
code { font-family: var(--font-outlier); font-size: 0.9em; }
.icon { display: block; flex-shrink: 0; }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-input); }
.skip:focus-visible { top: var(--space-md); }

/* the lockup: mark = 1.5 x cap height, gap = 0.4 x cap height (brand book § Logo) */
.lockup { --cap: calc(var(--wordmark, 1.625rem) * 0.727); display: inline-flex; align-items: center; gap: calc(var(--cap) * 0.4); text-decoration: none; color: inherit; }
.lockup__mark { width: calc(var(--cap) * 1.5); height: calc(var(--cap) * 1.5); flex-shrink: 0; }
.lockup__word { font-family: var(--font-display); font-size: var(--wordmark, 1.625rem); font-optical-sizing: auto; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.lockup__chow { font-weight: 600; color: var(--color-ink); }
.lockup__tech { font-weight: 500; color: var(--color-accent); }
.lockup:focus-visible { outline-offset: 6px; border-radius: var(--radius-input); }

/* graphite: the dark material, text swapped in the same rule */
.graphite { background: var(--color-graphite); color: var(--color-graphite-ink); }
.graphite a { color: var(--color-graphite-ink); text-decoration-color: var(--color-graphite-muted); }
.graphite a:hover { text-decoration-color: var(--color-accent-2); }

/* cut panels: two opposite corners bevelled where the browser can, plain radius where it cannot */
.cut { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); }
@supports (corner-shape: bevel) { .cut { border-radius: var(--cut-l) 4px var(--cut-l) 4px; corner-shape: bevel round bevel round; } }

/* keycaps, all eight states: a key face on a 3px edge, lifting on hover and sinking on press */
.key { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-input); background: var(--color-key-face); color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-display); letter-spacing: -0.01em; white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: var(--shadow-key); transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.key:hover { transform: translateY(-1px); }
.key:active { transform: translateY(3px); box-shadow: var(--shadow-key-press); }
.key:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.key:disabled, .key[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.key[aria-busy="true"] { cursor: progress; }
.key[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent-edge); color: var(--color-accent-ink); box-shadow: var(--shadow-key-press); transform: translateY(2px); }
.key--primary { background: var(--color-accent); border-color: var(--color-accent-edge); color: var(--color-accent-ink); box-shadow: var(--shadow-key-accent); }
.key--primary:hover { background: var(--color-accent-deep); }
.key--graphite { background: var(--color-graphite-2); border-color: var(--color-graphite-rule); color: var(--color-graphite-ink); box-shadow: 0 2px 0 0 var(--color-graphite-rule); }
.key--graphite:active { box-shadow: none; }
.key--graphite:focus-visible { outline-color: var(--color-accent-2); }
.key--small { min-height: 36px; padding: 0 var(--space-sm); font-size: var(--text-sm); }
.key--icon { padding: 0; width: 40px; min-height: 40px; }
@media (prefers-reduced-motion: reduce) { .key { transition: background-color var(--dur-micro) linear; } .key:hover, .key:active { transform: none; } }

/* ---- the nav: fixed, the full lockup at the top of the page, the mark alone once you scroll ---- */
.nav { position: fixed; inset-inline: 0; top: 0; z-index: var(--z-sticky-nav); }
.nav__bar { display: flex; align-items: center; justify-content: space-between; min-height: var(--nav-h); padding-block: var(--space-sm); background: color-mix(in oklab, var(--color-paper) 0%, transparent); border-bottom: var(--rule-hair) solid transparent; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.nav.is-compact .nav__bar { background: color-mix(in oklab, var(--color-paper) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--color-rule); }
.nav .lockup { position: relative; }
.nav.is-compact .lockup__word { opacity: 0; transform: translateX(-8px); position: absolute; left: 100%; pointer-events: none; }
.nav__right { display: flex; align-items: center; gap: var(--space-md); }
.nav__link { font-size: var(--text-md); font-weight: 500; color: var(--color-ink); text-decoration: none; padding: var(--space-xs) 0; border-bottom: 1px solid transparent; }
.nav__link:hover { border-bottom-color: var(--color-accent); }
.nav__link:focus-visible { outline-offset: 4px; border-radius: var(--radius-input); }
.icon--moon { display: none; }
[data-mode="dark"] .icon--moon { display: block; } [data-mode="dark"] .icon--sun { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-mode]) .icon--moon { display: block; } :root:not([data-mode]) .icon--sun { display: none; } }
@media (max-width: 40rem) { .nav__link { display: none; } }
@media (prefers-reduced-motion: reduce) { .lockup__word, .nav__bar { transition: none; } }

/* ---- hero: the field across the whole screen, the words on the left ---- */
.hero { position: relative; isolation: isolate; min-height: 100dvh; display: grid; background: var(--color-paper); color: var(--color-ink); overflow: clip; }
.field { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; background-image: radial-gradient(circle at 1px 1px, var(--color-glyph-2) 1px, transparent 1.5px); background-size: var(--cell-w) var(--cell-h); -webkit-mask-image: linear-gradient(180deg, transparent, var(--color-ink) 12%, var(--color-ink) 90%, transparent); mask-image: linear-gradient(180deg, transparent, var(--color-ink) 12%, var(--color-ink) 90%, transparent); }
.js .field { background-image: none; }
.hero__grid { position: relative; z-index: var(--z-raised); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl) var(--space-3xl); align-items: center; padding-block: calc(var(--nav-h) + var(--space-2xl)) var(--space-3xl); }
.hero__words { display: grid; gap: var(--space-lg); }
.hero__words h1 { max-width: 14ch; }
.hero__lead { max-width: 34ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); }
@media (max-width: 60rem) {
  .hero { min-height: 100dvh; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); padding-block: calc(var(--nav-h) + var(--space-xl)) var(--space-2xl); align-items: end; }
}
@media (max-width: 40rem) { .lockup { --wordmark: 1.375rem; } }

/* ---- the trace pane, on the hero's right: the lines of the field arrive here as the typed replay ---- */
.trace { margin: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 560px; border-radius: var(--radius-card); box-shadow: var(--shadow-graphite); overflow: clip; }
@supports (corner-shape: bevel) { .trace { border-radius: var(--cut-l) 4px var(--cut-l) 4px; corner-shape: bevel round bevel round; } }
.trace__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 56px; padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-lg); background: var(--color-graphite-2); border-bottom: var(--rule-hair) solid var(--color-graphite-rule); }
.trace__title { font: 500 var(--text-sm)/1.2 var(--font-display); color: var(--color-graphite-ink); }
.trace__mark { font: 500 var(--text-xs)/1 var(--font-outlier); color: var(--color-graphite-muted); padding-right: var(--space-sm); }
.quiz { display: grid; align-content: start; gap: var(--space-lg); padding: var(--space-lg); }
.quiz__steps { display: grid; gap: var(--space-md); }
.quiz__q { font: 600 var(--text-lead)/1.3 var(--font-display); letter-spacing: -0.02em; color: var(--color-graphite-ink); max-width: 28ch; }
.quiz__options { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.quiz__opt { min-height: 44px; }
.quiz__row { display: flex; align-items: center; gap: var(--space-md); padding-top: var(--space-xs); }
.quiz__hint { font-size: var(--text-sm); color: var(--color-graphite-muted); }
.quiz__back { justify-self: start; }
.trace__results { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.trace__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding: 0 var(--space-lg) var(--space-lg); }
.trace__lines { list-style: none; margin: 0; padding: var(--space-lg); display: grid; align-content: start; gap: var(--space-xs); font-family: var(--font-outlier); font-size: var(--text-sm); line-height: 1.5; }
.trace__lines li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-graphite-rule); transition: opacity var(--dur-short) var(--ease-out); }
.trace__lines li:first-child { border-top: 0; }
.trace__lines li.trace__old { opacity: 0.35; }
.trace__key { color: var(--color-accent-2); }
.trace__val { color: var(--color-graphite-ink); overflow-wrap: anywhere; min-height: 1lh; }
.trace.is-running .trace__lines li:last-child .trace__val::after { content: ""; display: inline-block; width: 0.55em; height: 1em; margin-left: 0.1em; vertical-align: -0.15em; background: var(--color-accent-2); }
.trace__foot { padding: var(--space-sm) var(--space-lg) var(--space-md); font-size: var(--text-xs); color: var(--color-graphite-muted); border-top: var(--rule-hair) solid var(--color-graphite-rule); }
html:not(.js) .quiz { display: none; }
html:not(.js) .trace__results { display: grid !important; }
@media (max-width: 60rem) { .trace { min-height: 0; } }
@media (max-width: 40rem) { .trace__lines li { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); } }

/* ---- the ledger: a receipt that prints as you scroll, under a figure that counts its lines ---- */
.ledger { padding: 0; }
.ledger__pin { position: sticky; top: var(--nav-h); min-height: calc(100dvh - var(--nav-h)); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--space-3xl); align-items: center; padding-block: var(--space-xl); }
.ledger__words { display: grid; gap: var(--space-lg); align-content: center; }
.ledger__words h2 { max-width: 18ch; }
.ledger__words .lead { max-width: 40ch; }
.ledger__figure { margin: var(--space-xl) 0 0; display: flex; font-family: var(--font-display); font-weight: 600; font-size: clamp(8rem, 18vw, 15rem); line-height: 1; letter-spacing: -0.06em; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.ledger__roll { display: block; height: 1em; overflow: clip; }
.ledger__digits { display: block; transform: translateY(0); transition: transform var(--dur-long) var(--ease-out); will-change: transform; }
.ledger__caption { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-muted); }
.ledger__chip { padding: var(--space-3xs) var(--space-xs); border-radius: 3px; background: var(--color-accent-wash); color: var(--color-link); }
.ledger__paper { display: grid; gap: var(--space-md); align-self: start; }
.receipt { border: 1px dashed var(--color-rule-2); padding: var(--space-lg) var(--space-lg) var(--space-md); font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-ink-2); background: var(--color-paper); }
.receipt__head { display: flex; justify-content: space-between; padding-bottom: var(--space-md); margin-bottom: var(--space-md); border-bottom: 1px dashed var(--color-rule-2); color: var(--color-ink); }
.ledger__groups { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.ledger__group-head { display: flex; align-items: baseline; gap: var(--space-xs); font: 500 var(--text-sm)/1.5 var(--font-outlier); color: var(--color-muted); margin: 0 0 var(--space-3xs); }
.ledger__group-head h3 { font: inherit; color: inherit; margin: 0; letter-spacing: 0; }
.ledger__group ul { list-style: none; margin: 0; padding: 0; }
.ledger__line { display: flex; align-items: baseline; gap: var(--space-xs); padding: var(--space-3xs) var(--space-2xs); margin-inline: calc(-1 * var(--space-2xs)); line-height: 1.6; }
.ledger__dots { flex: 1 1 auto; min-width: var(--space-md); border-bottom: 1px dotted var(--color-rule-2); transform: translateY(-0.35em); }
.ledger__line b, .ledger__group-head b { font-weight: 500; font-variant-numeric: tabular-nums; }
.ledger__line--in b { color: var(--color-link); }
.ledger__line--out { color: var(--color-muted); }
.ledger__line--out b { color: var(--color-muted); }
/* the print head: the newest line inverted */
.ledger__line.is-new { background: var(--color-ink); color: var(--color-paper); }
.ledger__line.is-new b, .ledger__line.is-new .ledger__dots { color: var(--color-paper); border-color: var(--color-paper); }
.ledger__total { display: flex; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-md); padding: var(--space-sm) var(--space-sm); background: var(--color-graphite); color: var(--color-graphite-ink); border-radius: var(--radius-input); font-family: var(--font-outlier); font-size: var(--text-sm); }
.ledger__total span { color: var(--color-graphite-muted); }
.ledger__total b { font-weight: 500; text-align: right; }
.ledger__track { position: relative; height: 2px; background: var(--color-rule-2); }
.ledger__marker { position: absolute; left: 0; top: -3px; width: 28px; height: 8px; margin-left: -28px; background: var(--color-ink); transform: translateX(0); }
/* live: unprinted lines do not exist yet, so the paper grows as it prints */
.ledger.is-live .ledger__line:not(.is-printed), .ledger.is-live .ledger__group:not(.is-printed), .ledger.is-live .ledger__total:not(.is-printed) { display: none; }
.ledger.is-live .ledger__marker { transition: transform var(--dur-short) var(--ease-out); }
@media (prefers-reduced-motion: no-preference) and (min-width: 60rem) {
  .ledger { min-height: 320vh; }
}
@media (max-width: 60rem) {
  .ledger__pin { position: static; min-height: 0; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xl); padding-block: var(--section-gap-s); }
  .ledger__figure { font-size: clamp(6rem, 28vw, 9rem); }
  .ledger__marker { display: none; }
}

/* ---- the rows: where the hours go; pinned for a few screens, each row arriving as you scroll ---- */
.rows { padding: 0; }
.rows__pin { position: sticky; top: var(--nav-h); min-height: calc(100dvh - var(--nav-h)); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-content: center; align-items: start; padding-block: var(--space-xl); }
.rows__head { grid-column: 1 / span 4; display: grid; gap: var(--space-md); }
.rows__list { grid-column: 5 / span 8; list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-rule-2); }
.rows__list > li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap-columns); padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.rows__list p { color: var(--color-ink-2); font-size: var(--text-lg); line-height: 1.45; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 60rem) {
    .rows { min-height: 260vh; view-timeline: --rows block; }
    .rows__list > li { animation: row-in linear both; animation-timeline: --rows; }
    .rows__list > li:nth-child(1) { animation-range: contain 4% contain 20%; }
    .rows__list > li:nth-child(2) { animation-range: contain 24% contain 40%; }
    .rows__list > li:nth-child(3) { animation-range: contain 44% contain 60%; }
    .rows__list > li:nth-child(4) { animation-range: contain 64% contain 80%; }
    @keyframes row-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
  }
}
@media (max-width: 60rem) {
  .rows__pin { position: static; min-height: 0; grid-template-columns: minmax(0, 1fr); padding-block: var(--section-gap-s); }
  .rows__head, .rows__list { grid-column: 1 / -1; }
  .rows__list > li { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xs); padding-block: var(--space-lg); }
  .rows__list p { font-size: var(--text-md); }
}

/* the one reveal: visible by default, lifting in once where script runs */
.js [data-reveal] { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ---- the phases ---- */
.phase__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-md); align-items: end; margin-bottom: var(--space-2xl); }
.phase__head h2 { grid-column: 1 / span 6; }
.phase__head .lead { grid-column: 8 / span 5; }
@media (max-width: 60rem) { .phase__head h2, .phase__head .lead { grid-column: 1 / -1; } }

/* phase 1: the pinned chapter. Three labelled bars, stacked like a menu icon in a little depth; scrolling opens
   each into a full panel, one per screen, then closes them again before the next section. No stops inside: the page
   stops snapping while you are in here, so the motion follows the wheel */
.chapter { position: relative; border-top: var(--rule-hair) solid var(--color-rule-2); scroll-snap-align: start; scroll-snap-stop: always; }
.chapter__stop { display: none; }
.chapter__pin { position: sticky; top: 0; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: var(--space-xl); padding-block: calc(var(--nav-h) + var(--space-xl)) var(--space-xl); overflow: clip; }
.chapter__pin .phase__head { margin-bottom: 0; }
.stage { --panel-w: min(72vw, 960px); position: relative; margin-top: var(--space-xl); display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: center; min-height: min(58dvh, 560px);  }
.stage > .panel { grid-area: 1 / 1; width: var(--panel-w); min-height: min(52dvh, 480px); will-change: transform, clip-path; }
.panel { display: grid; align-content: start; gap: var(--space-lg); padding: 0 var(--space-2xl) var(--space-2xl); position: relative; box-shadow: var(--shadow-card); }
.panel__bar { display: flex; align-items: center; gap: var(--space-md); min-height: 72px; margin-inline: calc(-1 * var(--space-2xl)); padding-inline: var(--space-2xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.panel__num { font: 500 var(--text-sm)/1 var(--font-outlier); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.panel__name { font: 600 var(--text-lead)/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--color-ink); }
.panel__body { display: grid; gap: var(--space-lg); }
.panel__body h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.panel li { padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); font-size: var(--text-lg); }
.panel li:first-child { border-top: 0; }
.panel--ours { background: var(--color-accent-wash); border-color: var(--color-accent-soft); color: var(--color-ink); }
.panel--ours .panel__bar { border-bottom-color: var(--color-accent-soft); }
.panel--ours .panel__name { color: var(--color-link); }
.panel--ours li { color: var(--color-ink); border-top-color: var(--color-accent-soft); }
.chapter__note { font-size: var(--text-sm); color: var(--color-muted); }
/* the rail: the fallback, and the phone */
.stage.is-rail { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(82vw, 520px); gap: var(--space-lg); justify-items: stretch; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-inline: var(--gutter); overscroll-behavior-x: contain; perspective: none; min-height: 0; }
.stage.is-rail > .panel { grid-area: auto; width: auto; min-height: 0; scroll-snap-align: start; }
.stage:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 60rem) {
    .chapter { min-height: 520vh; view-timeline: --chapter block; scroll-snap-align: none; }
    /* the page stops at each state: closed, card 1, card 2, card 3, closed again */
    .chapter__stop { display: block; position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; scroll-snap-stop: always; }
    .chapter__stop:nth-of-type(1) { top: 0; }
    .chapter__stop:nth-of-type(2) { top: calc((100% - 100vh) * 0.27); }
    .chapter__stop:nth-of-type(3) { top: calc((100% - 100vh) * 0.51); }
    .chapter__stop:nth-of-type(4) { top: calc((100% - 100vh) * 0.75); }
    .chapter__stop:nth-of-type(5) { top: calc(100% - 100vh); }
    .stage > .panel { animation: linear both; animation-timeline: --chapter; animation-range: contain 0% contain 100%; }
    .stage > .panel[data-step="1"] { animation-name: stack-one; }
    .stage > .panel[data-step="2"] { animation-name: stack-two; }
    .stage > .panel[data-step="3"] { animation-name: stack-three; }
    .stage > .panel .panel__body { animation: body-show linear both; animation-timeline: --chapter; animation-range: contain 0% contain 100%; }
    /* closed: only each panel's bar shows, the three stacked with a little depth and tilt; open: the full panel, centred */
    @keyframes stack-one {
      0%, 6%   { clip-path: inset(0 0 calc(100% - 72px) 0 round 8px); transform: translate3d(0, -84px, 0); }
      18%      { clip-path: inset(0 0 0 0 round 8px); transform: translate3d(0, 0, 0); }
      20%, 34% { clip-path: inset(0 0 0 0 round 8px); transform: translate3d(0, 0, 0); }
      44%, 82% { clip-path: inset(0 0 0 0 round 8px); transform: translate3d(-120vw, 0, 0); }
      92%      { clip-path: inset(0 0 0 0 round 8px); transform: translate3d(0, 0, 0); }
      100%     { clip-path: inset(0 0 calc(100% - 72px) 0 round 8px); transform: translate3d(0, -84px, 0); }
    }
    @keyframes stack-two {
      0%, 6%   { clip-path: inset(0 0 calc(100% - 72px) 0 round 8px); transform: translate3d(0, 0, 0); }
      18%      { clip-path: inset(0 0 0 0 round 8px); transform: translate3d(0, 0, 0); }
      20%, 34% { clip-path: inset(0 0 0 0 round 8px); transform: translate3d(120vw, 0, 0); }
      44%, 58% { clip-path: inset(0 0 0 0 round 8px); transform: translate3d(0, 0, 0); }
      68%, 82% { clip-path: inset(0 0 0 0 round 8px); transform: translate3d(-120vw, 0, 0); }
      92%      { clip-path: inset(0 0 0 0 round 8px); transform: translate3d(0, 0, 0); }
      100%     { clip-path: inset(0 0 calc(100% - 72px) 0 round 8px); transform: translate3d(0, 0, 0); }
    }
    @keyframes stack-three {
      0%, 6%   { clip-path: inset(0 0 calc(100% - 72px) 0 round 8px); transform: translate3d(0, 84px, 0); }
      18%      { clip-path: inset(0 0 0 0 round 8px); transform: translate3d(0, 0, 0); }
      20%, 58% { clip-path: inset(0 0 0 0 round 8px); transform: translate3d(240vw, 0, 0); }
      68%, 82% { clip-path: inset(0 0 0 0 round 8px); transform: translate3d(0, 0, 0); }
      92%      { clip-path: inset(0 0 0 0 round 8px); transform: translate3d(0, 0, 0); }
      100%     { clip-path: inset(0 0 calc(100% - 72px) 0 round 8px); transform: translate3d(0, 84px, 0); }
    }
    @keyframes body-show { 0%, 10% { opacity: 0; } 18%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
    .stage > .panel[data-step="1"] { z-index: 3; } .stage > .panel[data-step="2"] { z-index: 2; } .stage > .panel[data-step="3"] { z-index: 1; }
  }
}
@media (max-width: 60rem) {
  .chapter__pin { position: static; min-height: 0; }
  .panel { padding: 0 var(--space-lg) var(--space-lg); min-height: 0; }
  .panel__bar { margin-inline: calc(-1 * var(--space-lg)); padding-inline: var(--space-lg); min-height: 56px; }
  .panel li { font-size: var(--text-md); }
}

/* phase 2: the deliverables table, machine values in mono, the lead row on the wash */
.phase--table { padding-block: var(--section-gap) 0; min-height: 100dvh; display: grid; align-content: center; }
.deliverables { margin: 0; display: grid; gap: var(--space-xs); }
.deliverables__head, .deliverables__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap-columns); align-items: start; }
.deliverables__head { padding: 0 var(--space-lg) var(--space-sm) var(--space-md); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.deliverables__row { padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-md); border: var(--rule-hair) solid transparent; border-bottom-color: var(--color-rule); border-radius: var(--radius-card); background: transparent; transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.deliverables__row:hover { transform: translateY(-3px) scale(1.01); background: var(--color-card); border-color: var(--color-rule-2); box-shadow: var(--shadow-lift); }
.deliverables__row { --mx: 30%; --my: 50%; }
.deliverables__row:hover { background: radial-gradient(360px circle at var(--mx) var(--my), var(--color-accent-soft), var(--color-accent-wash) 70%); border-color: var(--color-accent-soft); }
.deliverables__row.is-lead { border-bottom-color: var(--color-rule-2); }
.deliverables dt { margin: 0; font-family: var(--font-display); font-size: var(--text-title); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--color-ink); }
.deliverables dd { margin: 0; display: grid; gap: var(--space-2xs); color: var(--color-ink-2); max-width: 60ch; }
.deliverables dd code { color: var(--color-link); }
@media (prefers-reduced-motion: reduce) { .deliverables__row { transition: background-color var(--dur-short) linear; } .deliverables__row:hover { transform: none; } }
@media (max-width: 40rem) {
  .deliverables__head { display: none; }
  .deliverables__row { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xs); }
}
@media (max-width: 60rem) { .phase--table { min-height: 0; } }
@media (max-width: 40rem) {
  .deliverables thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .deliverables tr { display: grid; }
  .deliverables tbody th { width: auto; white-space: normal; border-bottom: 0; padding-bottom: var(--space-2xs); }
  .deliverables td { padding-top: 0; }
}

/* phase 3: the close, a graphite band holding the booking, the contact and the fallback form */
.band { margin-top: var(--section-gap-l); padding-block: var(--section-gap-s); }
.band h2 { color: var(--color-graphite-ink); }
.band .lead { color: var(--color-graphite-muted); }
.band__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: start; }
.band__head { grid-column: 1 / span 4; grid-row: 1 / span 2; display: grid; gap: var(--space-md); align-content: start; }
.band__fact { margin-top: var(--space-md); font-size: var(--text-md); max-width: 40ch; color: var(--color-graphite-muted); }
.band__fact a { color: var(--color-accent-2); font-weight: 500; }

/* the booking: a month on the left, the day's free half-hours and the form on the right */
.booking { grid-column: 5 / span 8; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
.booking.is-off { grid-template-columns: minmax(0, 1fr); }
.cal { display: grid; gap: var(--space-md); }
.cal__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.cal__month { font: 500 var(--text-lg)/1.2 var(--font-display); color: var(--color-graphite-ink); }
.cal__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2xs); }
.cal__dow { font-size: var(--text-xs); color: var(--color-graphite-muted); text-align: center; padding-block: var(--space-2xs); }
.cal__day { min-height: 44px; padding: 0; font-size: var(--text-sm); font-variant-numeric: tabular-nums; background: var(--color-graphite-2); border-color: var(--color-graphite-rule); color: var(--color-graphite-ink); box-shadow: 0 2px 0 0 var(--color-graphite-rule); }
.cal__day:disabled { background: transparent; border-color: transparent; color: var(--color-graphite-muted); box-shadow: none; opacity: 0.55; cursor: not-allowed; }
.cal__day[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent-edge); color: var(--color-accent-ink); }
.cal__day:focus-visible { outline-color: var(--color-accent-2); }
.slots { display: grid; gap: var(--space-md); }
.slots__head { font-size: var(--text-md); color: var(--color-graphite-ink); min-height: 1lh; }
.slots__list { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.slot { min-height: 40px; padding: 0 var(--space-md); font-size: var(--text-sm); font-variant-numeric: tabular-nums; background: var(--color-graphite-2); border-color: var(--color-graphite-rule); color: var(--color-graphite-ink); box-shadow: 0 2px 0 0 var(--color-graphite-rule); }
.slot[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent-edge); color: var(--color-accent-ink); }
.slot:focus-visible { outline-color: var(--color-accent-2); }
.book { display: grid; gap: var(--space-md); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-graphite-rule); }
.book__chosen { color: var(--color-graphite-ink); font-weight: 500; }
.book__done { display: grid; gap: var(--space-md); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-graphite-rule); }
.book__note { color: var(--color-graphite-muted); max-width: 48ch; }
.book__adds { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.field-row { display: grid; gap: var(--space-xs); }
.field-row label { font-size: var(--text-sm); font-weight: 500; color: var(--color-graphite-ink); }
.field-row input, .field-row textarea { width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-graphite-muted); border-radius: var(--radius-input); background: var(--color-graphite-2); color: var(--color-graphite-ink); outline: 2px solid transparent; outline-offset: -3px; transition: border-color var(--dur-micro) var(--ease-out); }
@supports (corner-shape: bevel) { .field-row input, .field-row textarea { border-radius: var(--cut) 3px var(--cut) 3px; corner-shape: bevel round bevel round; } }
.field-row textarea { resize: vertical; line-height: 1.5; }
.field-row input:hover, .field-row textarea:hover { border-color: var(--color-graphite-ink); }
.field-row input:focus-visible, .field-row textarea:focus-visible { outline-color: var(--color-accent-2); border-color: var(--color-graphite-ink); }
.field-row input[aria-invalid], .field-row textarea[aria-invalid] { border-color: var(--color-error); }
.field-row input:disabled, .field-row textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.enquiry__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.enquiry__help { min-height: 1lh; font-size: var(--text-sm); color: var(--color-graphite-muted); flex: 1 1 16rem; }
.fold { grid-column: 5 / span 8; border-top: var(--rule-hair) solid var(--color-graphite-rule); padding-top: var(--space-lg); }
.fold__summary { cursor: pointer; font-weight: 500; color: var(--color-graphite-ink); list-style: none; display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) 0; }
.fold__summary::-webkit-details-marker { display: none; }
.fold__summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--color-accent-2); border-bottom: 2px solid var(--color-accent-2); transform: rotate(-45deg); transition: transform var(--dur-micro) var(--ease-out); }
.fold[open] .fold__summary::before { transform: rotate(45deg); }
.fold__summary:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 4px; border-radius: var(--radius-input); }
.enquiry { display: grid; gap: var(--space-lg); padding-top: var(--space-lg); }
@media (max-width: 60rem) {
  .band__head, .booking, .fold { grid-column: 1 / -1; }
  .booking { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
}

/* ---- the colophon ---- */
.colophon { padding-block: var(--space-3xl) var(--space-2xl); }
.colophon .container { display: grid; gap: var(--space-lg); }
.lockup--small { --wordmark: 1.25rem; }
.colophon__text { font-size: var(--text-sm); line-height: 1.6; color: var(--color-muted); max-width: 64ch; }
.colophon__text a { color: var(--color-ink); }