/* ==========================================================================
   Noah Vinther – site styles
   Ink / white / one blue for actions. Big type or small type, little in between.
   Ruled rows instead of card grids. Photos full-bleed, square, captioned below.
   ========================================================================== */

:root {
  --ink: #0B0B0C;
  --paper: #FFFFFF;
  --blue: #0A5CFF;        /* actions only: book buttons, focus, active nav */
  --blue-dark: #0846C7;   /* hover, links on white */
  --mist: #F4F6F8;        /* form fields and the practical band */
  --line: #E4E7EC;
  --muted: #5F6670;
  --rule: rgba(11, 11, 12, .16);
  --rule-dark: rgba(255, 255, 255, .22);
  --field: #8A929D;
  --error: #B42318;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Display face. If a self-hosted font is added later (see HANDOFF.md), put its name first. */
  --display: var(--sans);

  --gutter: 16px;
  --max: 1280px;
  --header-h: 60px;
}
@media (min-width: 768px) { :root { --gutter: 40px; --header-h: 72px; } }

/* ---------- Display font: Mona Sans ----------
   Self-hosted variable font (SIL Open Font License, see fonts/OFL.txt; github.com/github/mona-sans).
   Width axis 75–125 % drives the condensed headlines and the wide labels.
   To switch it off: wrap this block in a comment again; everything falls back to system fonts. */
@font-face {
  font-family: "Mona Sans";
  src: url("../fonts/MonaSans-VF.woff2") format("woff2");
  font-weight: 200 900; font-stretch: 75% 125%; font-display: swap;
}
:root { --display: "Mona Sans", var(--sans); }
.t-hero, .t-title, .stack li, .follow a, .menu nav a, .simple h1, .split h1, .stat__v, .facts__cells b, .ft__sign { font-stretch: 75%; font-weight: 850; }
.t-line, .t-mid, .prow h3, .lessons .l-name, .dl dt { font-family: var(--display); font-stretch: 85%; }
.label, .dl--labels dt, .creds li, .pay__rows dt, .lessons td[data-label]::before, .follow a small, .tbl th .label {
  font-family: var(--display); font-stretch: 125%; font-weight: 600;
}
.btn, .go, .hd__mark, .hd__nav a { font-family: var(--display); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font: 400 17px/1.55 var(--sans);
  color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 768px) { body { font-size: 18px; } }
body.menu-open { overflow: hidden; }
main { display: block; }
img, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--blue-dark); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--blue); }
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
p { margin: 0 0 1em; }
/* no single word alone on the last line (browsers without support ignore these) */
h1, h2, h3, .t-line, .t-mid, .lede, .l-name, .stack li, .done h3 { text-wrap: balance; }
p, dd, li, .l-desc, .qa .a p { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.dark :focus-visible, .hd--over :focus-visible, .menu :focus-visible, .ph :focus-visible, .hero :focus-visible { outline-color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 12px; top: -80px; z-index: 100;
  padding: 12px 18px; background: var(--blue); color: #fff; font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; color: #fff; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.sec { padding-block: 72px; }
.sec--tight { padding-block: 48px; }
@media (min-width: 768px) { .sec { padding-block: 120px; } .sec--tight { padding-block: 72px; } }
.dark { background: var(--ink); color: #fff; }
.dark a { color: #fff; text-decoration-color: var(--blue); }
.dark a:hover { color: #fff; text-decoration-thickness: 2px; }
.mist { background: var(--mist); }
.top-pad { padding-top: calc(var(--header-h) + 48px); }
@media (min-width: 768px) { .top-pad { padding-top: calc(var(--header-h) + 80px); } }

/* 12-column grid helper for desktop */
.g12 { display: grid; gap: 24px; }
@media (min-width: 900px) { .g12 { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; } }

/* ---------- Type ---------- */
.t-hero {
  font-size: clamp(4.25rem, 17vw, 15rem); font-weight: 900; line-height: .84;
  letter-spacing: -.045em; text-transform: uppercase;
}
.t-title {
  font-size: clamp(3.25rem, 13vw, 10.5rem); font-weight: 900; line-height: .86;
  letter-spacing: -.045em; text-transform: uppercase;
}
/* phones: the name and page titles run close to edge to edge */
@media (max-width: 767px) {
  .t-hero { font-size: 21vw; }
  .t-title { font-size: 17vw; }
}
.t-line { font-size: clamp(2rem, 5.4vw, 4.6rem); font-weight: 800; line-height: .98; letter-spacing: -.035em; }
.t-mid { font-size: clamp(1.35rem, 2.5vw, 2rem); font-weight: 800; line-height: 1.12; letter-spacing: -.025em; }
.lede { font-size: clamp(1.3rem, 2.3vw, 1.75rem); line-height: 1.28; font-weight: 500; letter-spacing: -.012em; max-width: 30ch; }
.label {
  display: block; margin: 0;
  font-size: 12px; line-height: 1.35; font-weight: 650; text-transform: uppercase;
  letter-spacing: .09em; font-variant-numeric: tabular-nums; color: var(--muted);
}
.dark .label, .hero .label, .ph .label { color: rgba(255, 255, 255, .78); }
.prose { max-width: 62ch; }
.prose p:last-child { margin-bottom: 0; }
.muted { color: var(--muted); }
.dark .muted { color: rgba(255, 255, 255, .72); }
.num { font-variant-numeric: tabular-nums; }
.nw { white-space: nowrap; }

/* ---------- Buttons and arrow links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: 0 22px;
  background: var(--blue); color: #fff; border: 0; border-radius: 0;
  font-weight: 700; font-size: 1rem; line-height: 1; text-decoration: none; cursor: pointer;
  transition: background .2s;
}
.btn:hover { background: var(--blue-dark); color: #fff; }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: .95rem; }
.hd__cta { gap: 0; }
.btn[disabled] { opacity: .6; cursor: progress; }
.arr { display: inline-block; transition: transform .2s; }
.btn:hover .arr, .go:hover .arr { transform: translateX(3px); }
.go {
  display: inline-block; padding-block: 10px;
  font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule);
  text-underline-offset: .3em;
}
.go .arr { margin-left: .35em; text-decoration: none; }
.go:hover { color: var(--blue-dark); text-decoration-color: currentColor; }
.dark .go { color: #fff; text-decoration-color: var(--rule-dark); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

@media (prefers-reduced-motion: reduce) {
  .btn, .arr, .hd, .follow a > span[aria-hidden] { transition: none !important; }
}

/* ---------- Header ---------- */
.hd {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  display: flex; align-items: center;
  background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--rule);
  transition: background .25s, color .25s, border-color .25s;
}
.hd--over { background: transparent; color: #fff; border-color: transparent; }
body.menu-open .hd { background: var(--ink); color: #fff; border-color: transparent; }
.hd__in { display: flex; align-items: center; gap: 16px; }
.hd__mark {
  display: inline-flex; align-items: center; min-height: 44px; margin-right: auto;
  font-family: var(--display); font-weight: 900; font-style: italic; font-size: 1.05rem; letter-spacing: .02em;
  text-transform: uppercase; color: inherit; text-decoration: none; white-space: nowrap;
}
.hd__mark:hover { color: inherit; }
.hd__nav { display: none; gap: 28px; }
.hd__nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: .95rem; font-weight: 600; color: inherit; text-decoration: none;
}
.hd__nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--blue); }
.hd__nav a:hover { box-shadow: inset 0 -2px 0 currentColor; color: inherit; }
/* below 960px "a lesson" is hidden visually but still read out: "Book a lesson" */
.hd__cta .lg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hd__menu {
  min-height: 44px; min-width: 44px; padding: 0 2px 0 6px; margin-right: -2px;
  background: none; border: 0; color: inherit; cursor: pointer;
  font-weight: 700; font-size: .95rem;
}
/* language switch (put in by js/i18n.js before the Book button): a text button like the nav links,
   on the white header, the transparent one over a photo, and the black menu */
.hd__lang {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; margin: 0; padding: 0 4px;
  background: none; border: 0; border-radius: 0; color: inherit; cursor: pointer;
  font: inherit; font-size: .95rem; font-weight: 700; letter-spacing: .06em; line-height: 1; text-decoration: none;
}
.hd__lang:hover { color: inherit; box-shadow: inset 0 -2px 0 currentColor; }
/* the switch sits in the far left corner, before the mark: line its text up with the page edge */
.hd__in > .hd__lang:first-child { margin-left: -4px; }
@media (max-width: 959px) { .hd__in { gap: 12px; } }
@media (min-width: 960px) {
  .hd__nav { display: flex; margin-right: 12px; }
  .hd__cta .lg { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .hd__menu, .menu { display: none !important; }
}

.menu {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--header-h) + 24px) var(--gutter) calc(28px + env(safe-area-inset-bottom));
  background: var(--ink); color: #fff; overflow-y: auto;
}
.menu nav a {
  display: block; padding: 10px 0;
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.5rem, 13vw, 4rem); line-height: .95; letter-spacing: -.04em;
  color: #fff; text-decoration: none;
}
.menu nav a[aria-current="page"] { color: var(--blue-light, #7AA5FF); }
.menu__social { display: grid; gap: 4px; margin-top: 32px; }
.menu__social a { display: inline-block; padding-block: 11px; color: #fff; font-weight: 600; }
/* the language choice in the menu reads like the links above it */
.menu__social .hd__lang, .menu__social button {
  justify-self: start; justify-content: flex-start; min-width: 0; min-height: 44px; padding: 11px 0;
  background: none; border: 0; color: #fff; font: inherit; font-weight: 600; letter-spacing: 0; text-align: left;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; cursor: pointer;
}
.menu__social .hd__lang:hover { box-shadow: none; color: #fff; }

/* ---------- Story hero ---------- */
.hero {
  position: relative; display: flex; align-items: flex-end;
  min-height: 78vh; min-height: 78svh;
  background: var(--ink); color: #fff; overflow: hidden;
}
@media (min-width: 768px) { .hero { min-height: 100vh; min-height: 100svh; } }
.hero__media, .hero__media img, .hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; }
/* object-position keeps the photographer's credit strip (bottom-left of the original) out of frame */
.hero__media img, .hero__media video { object-fit: cover; object-position: 60% 45%; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,11,12,.55) 0, rgba(11,11,12,0) 22%),
    linear-gradient(0deg, rgba(11,11,12,.72) 0, rgba(11,11,12,.25) 32%, rgba(11,11,12,0) 55%);
}
.hero__in { position: relative; z-index: 1; display: grid; gap: 18px; padding-bottom: 28px; }
.hero h1 { margin-left: -.04em; }
.hero__cap { justify-self: start; }
@media (min-width: 768px) {
  .hero__in { grid-template-columns: 1fr auto; align-items: end; padding-bottom: 40px; }
  .hero__cap { justify-self: end; text-align: right; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__media img, .ph__media img { animation: reveal .9s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes reveal { from { clip-path: inset(0 0 14% 0); transform: scale(1.04); } to { clip-path: inset(0); transform: none; } }
}

/* ---------- Facts strip (black band under the hero) ---------- */
.facts { border-top: 1px solid var(--rule-dark); }
.facts__cells { display: grid; }
/* one huge word over a small label */
.facts__cells li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  padding: 16px 0; border-bottom: 1px solid var(--rule-dark);
  font-size: 12px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; line-height: 1.35;
  color: rgba(255, 255, 255, .78);
}
.facts__cells b { font-family: var(--display); font-weight: 900; font-size: clamp(2.5rem, 6.2vw, 5.75rem); line-height: .86; letter-spacing: -.045em; color: #fff; }
@media (min-width: 768px) {
  .facts__cells { grid-template-columns: repeat(3, 1fr); }
  .facts__cells li { display: block; padding: 26px 24px 26px 0; border-bottom: 0; border-right: 1px solid var(--rule-dark); }
  .facts__cells b { display: block; margin-bottom: 14px; }
  .facts__cells li + li { padding-left: 24px; }
  .facts__cells li:last-child { border-right: 0; }
}
.facts__say { display: grid; gap: 24px; padding-block: 40px 56px; border-top: 1px solid var(--rule-dark); }
.facts__say .lede { margin: 0; }
@media (min-width: 900px) { .facts__say { grid-template-columns: 1fr auto; align-items: end; padding-block: 56px 72px; } }

/* ---------- Ruled rows (label left, content right) ---------- */
.rows { border-bottom: 1px solid var(--rule); }
.dark .rows { border-color: var(--rule-dark); }
.row { display: grid; gap: 12px 24px; padding-block: 28px; border-top: 1px solid var(--rule); }
.dark .row { border-color: var(--rule-dark); }
@media (min-width: 900px) {
  .row { grid-template-columns: repeat(12, minmax(0, 1fr)); padding-block: 36px; }
  .row > .row__k { grid-column: 1 / 4; }
  .row > .row__v { grid-column: 4 / 13; }
  .row > .row__v--narrow { grid-column: 4 / 10; }
}
.row__k { padding-top: .35em; }

/* ---------- Story chapters ---------- */
.chapter .row { border-top-color: var(--ink); }
.chapter .t-line { margin-bottom: 20px; max-width: 18ch; }
.chapter .prose { margin-top: 4px; }
/* the closing chapter is type only, so its line carries the weight a photo would */
#ch-5 { font-size: clamp(2.5rem, 7vw, 6rem); }
.stack li {
  padding: 14px 0; border-top: 1px solid var(--rule);
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.8rem, 5vw, 4rem); line-height: .95; letter-spacing: -.035em;
}
.stack li:last-child { border-bottom: 1px solid var(--rule); }
/* results: place, event, year on quiet ruled rows */
.res { list-style: none; margin: 0; padding: 0; max-width: 760px; }
.res li {
  display: grid; grid-template-columns: 4.25rem minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline;
  padding: 16px 0; border-top: 1px solid var(--rule);
}
.res li:first-child { border-top: 0; padding-top: 0; }
.res li:last-child { border-bottom: 1px solid var(--rule); }
.res b {
  font-family: var(--display); font-stretch: 75%; font-weight: 850;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1; letter-spacing: -.01em;
}
.res span { font-family: var(--display); font-stretch: 85%; font-weight: 650; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.25; }
.res small {
  font-size: 12px; font-weight: 650; letter-spacing: .09em; font-variant-numeric: tabular-nums; color: var(--muted);
}

/* ---------- Figures ---------- */
.fig { margin: 0; }
.fig img { width: 100%; object-fit: cover; }
.fig figcaption { margin-top: 12px; text-wrap: balance; }
.fig--bleed img { height: clamp(320px, 72vh, 860px); }
.fig--bleed figcaption { padding-inline: var(--gutter); max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; }
/* phones: a square crop of the landscape photos instead of a tall sliver */
@media (max-width: 767px) { .fig--bleed img { height: auto; aspect-ratio: 1 / 1; } }
/* focal points: set in the HTML as style="--pos: X Y", with an optional phone crop "--pos-m: X Y" */
.fig img, .ph__media img { object-position: var(--pos, 50% 50%); }
@media (max-width: 767px) { .fig img, .ph__media img { object-position: var(--pos-m, var(--pos, 50% 50%)); } }
.fig--tall img { aspect-ratio: 4 / 5; height: auto; }
.fig--wide img { aspect-ratio: 3 / 2; height: auto; }
/* a wide photo and a tall one, offset (Racing) */
.pair { display: grid; gap: 24px; }
.pair__wide img { aspect-ratio: 16 / 9; }
.pair__tall img { aspect-ratio: 4 / 5; }
@media (max-width: 899px) { .pair__tall { width: 72%; justify-self: end; } }
@media (min-width: 900px) {
  .pair { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .pair__wide { grid-column: 1 / 8; }
  .pair__tall { grid-column: 9 / 13; margin-top: clamp(48px, 9vw, 128px); }
}
.offset { margin-top: 40px; }
@media (min-width: 900px) {
  .offset { margin-top: 56px; }
  .offset--r > .fig { grid-column: 7 / 13; }
  .offset--l > .fig { grid-column: 1 / 7; }
  .offset > .side { grid-column: 1 / 6; align-self: end; }
  .offset--l > .side { grid-column: 8 / 13; }
}
/* text and photo side by side inside a chapter row (no empty half-columns) */
.duo { display: grid; gap: 32px; }
.duo .t-line { font-size: clamp(2rem, 4.2vw, 3.6rem); }
.duo .stack li { font-size: clamp(1.6rem, 3.3vw, 2.8rem); }
@media (min-width: 760px) {
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: end; }
  .duo--top { align-items: start; }
  .duo--flip > .fig { order: -1; }
}
/* hides a burned-in credit in the bottom corner of a photo without editing the file */
.fig--crop { overflow: hidden; }
.fig--crop img { transform: scale(1.14); transform-origin: 40% 0; }

/* the one deliberate overlap: a label sitting on the photo's bottom edge */
.tag-over { position: relative; }
.tag-over .tag {
  position: absolute; left: var(--gutter); bottom: 0; transform: translateY(50%);
  padding: 10px 14px; background: var(--paper); color: var(--ink);
}
@media (min-width: 768px) { .tag-over .tag { left: calc(var(--gutter) + max(0px, (100% - var(--max) - 2 * var(--gutter)) / 2)); } }

/* ---------- Follow block ---------- */
.follow a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; border-top: 1px solid var(--rule);
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.25rem, 6vw, 4.6rem); line-height: 1; letter-spacing: -.04em;
  color: var(--ink); text-decoration: none; overflow-wrap: anywhere;
}
.follow a:last-child { border-bottom: 1px solid var(--rule); }
/* the handle is a small label under the platform name */
.follow a small { display: block; margin-top: 10px; font-family: var(--sans); font-size: 12px; font-weight: 650; line-height: 1.3; letter-spacing: .09em; color: var(--muted); }
.follow a > span[aria-hidden] { transition: transform .2s; }
.follow a:hover > span[aria-hidden] { transform: translate(3px, -3px); }
.follow a:hover { color: var(--blue-dark); }
.dark .follow a { color: #fff; border-color: var(--rule-dark); }
.dark .follow a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 3px; }

/* ---------- Partner logos ---------- */
.rides { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 56px; margin-top: 20px; }
@media (max-width: 599px) { .rides { gap: 16px 24px; } }
.rides a, .rides span.logo { display: inline-flex; align-items: center; min-height: 48px; }
.rides img { width: auto; transition: opacity .2s; } /* logos in their own colours (Noah, 12 October 2026) */
.rides a:hover img { opacity: .8; }

.logo-text { font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; color: var(--ink); }

/* ---------- Page header with photo (Racing, Partners) ---------- */
.ph { position: relative; display: flex; align-items: flex-end; min-height: 64vh; min-height: 64svh; background: var(--ink); color: #fff; overflow: hidden; }
@media (min-width: 768px) { .ph { min-height: 78vh; min-height: 78svh; } }
.ph__media, .ph__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ph__media img { object-fit: cover; }
.ph--bright .ph__media::after {
  background: linear-gradient(180deg, rgba(11,11,12,.55) 0, rgba(11,11,12,0) 24%), linear-gradient(0deg, rgba(11,11,12,.85) 0, rgba(11,11,12,.45) 35%, rgba(11,11,12,0) 65%) !important;
}
.ph__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,11,12,.55) 0, rgba(11,11,12,0) 24%), linear-gradient(0deg, rgba(11,11,12,.7) 0, rgba(11,11,12,0) 50%);
}
.ph__in { position: relative; z-index: 1; display: grid; gap: 14px; padding-bottom: 28px; }
@media (min-width: 768px) { .ph__in { grid-template-columns: 1fr auto; align-items: end; padding-bottom: 40px; } .ph__in .label:last-child { text-align: right; } }
/* phones: the photo caption sits in the bottom-right corner, not under the title like a subtitle */
@media (max-width: 767px) { .ph__in > .label:last-child:not(:first-child) { position: absolute; right: var(--gutter); bottom: 28px; } }
.ph h1 { margin-left: -.04em; }

/* ---------- Split page header (Coaching, Contact) ---------- */
.split { display: grid; gap: 32px; }
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
  .split__text { grid-column: 1 / 7; padding-bottom: 8px; }
  .split__fig { grid-column: 8 / 13; }
}
.split h1 { margin: 18px 0 22px; font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: .95; letter-spacing: -.04em; font-weight: 900; }
.split .lede { margin-bottom: 28px; }
/* Contact portrait: 4:5 beside the text, the photo's own 3:2 when stacked so the contact routes stay near the top */
.split__fig.fig--crop img { aspect-ratio: 4 / 5; }
@media (max-width: 899px) {
  .split__fig.fig--crop img { aspect-ratio: 3 / 2; }
  .split__fig.fig--tall img { aspect-ratio: 4 / 3; }
}
/* the line always keeps its space, so filling it in does not move the button */
.priceline { margin: -8px 0 28px; min-height: 1.55em; font-weight: 700; font-size: 1.1rem; }
.priceline:empty { visibility: hidden; }
.notice { margin-top: 24px; padding: 14px 16px; background: var(--ink); color: #fff; font-weight: 600; }

/* ---------- Tables (titles, lessons, agenda) ---------- */
.tbl th { text-align: left; font-weight: 650; padding: 0 16px 12px 0; vertical-align: bottom; }
.tbl td { padding: 22px 16px 22px 0; border-top: 1px solid var(--rule); vertical-align: baseline; }
.tbl tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
.tbl th:last-child, .tbl td:last-child { padding-right: 0; }
.tbl .t-mid { display: block; }
.dark .tbl td { border-color: var(--rule-dark); }

/* Titles: big uppercase titles, the level as a small label on the right. The row label already says
   "Titles", so the column headers are for screen readers only. */
.tbl--titles thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tbl--titles td { padding-block: 20px; }
.tbl--titles td:first-child { width: auto; }
.tbl--titles .t-mid { font-size: clamp(1.45rem, 3.6vw, 3.1rem); font-weight: 900; line-height: .95; letter-spacing: -.035em; text-transform: uppercase; }
.tbl--titles td.muted { text-align: right; white-space: nowrap; font-size: 12px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }

/* Next up: one stacked block per event on phones */
@media (max-width: 759px) {
  #agenda thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #agenda tr { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid var(--rule); }
  #agenda tbody tr:first-child { border-top: 0; }
  #agenda tbody tr:last-child { border-bottom: 1px solid var(--rule); }
  #agenda td { display: block; padding: 0; border: 0 !important; text-align: left !important; }
  #agenda td:first-child { font-size: 12px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
}

.lessons .l-name { font-weight: 800; font-size: clamp(1.25rem, 2.2vw, 1.6rem); letter-spacing: -.02em; line-height: 1.15; }
.lessons .l-desc { margin: 6px 0 0; color: var(--muted); max-width: 46ch; }
.lessons .l-inc { margin-top: 8px; font-size: .92rem; }
.lessons .l-price { font-weight: 800; white-space: nowrap; }
/* the unit line may wrap (the price above it stays on one line), so the longer Danish units never push the table wider than the page */
.lessons .l-unit { display: block; font-size: .85rem; font-weight: 400; color: var(--muted); white-space: normal; }
.lessons td.l-go { text-align: right; white-space: nowrap; }
.lessons.no-duration .c-duration { display: none; }
.lessons.no-price .c-price { display: none; }
@media (max-width: 759px) {
  .lessons thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lessons tr { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; padding: 22px 0; border-top: 1px solid var(--rule); }
  .lessons td { display: block; padding: 0; border: 0 !important; }
  .lessons td.l-main { grid-column: 1 / -1; }
  .lessons td.c-level, .lessons td.c-duration { font-size: .95rem; }
  .lessons td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
  .lessons td.l-go { grid-column: 1 / -1; text-align: left; }
}

/* ---------- Definition-list rows (how it works, practical, contact) ---------- */
/* the closing rule sits on the list itself, so a hidden last row does not take it away */
.dl { margin: 0; border-bottom: 1px solid var(--rule); }
.dl > div { display: grid; gap: 6px 24px; padding-block: 22px; border-top: 1px solid var(--rule); }
.dl dt { font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; }
.dl dd { margin: 0; max-width: 60ch; }
@media (min-width: 760px) { .dl > div { grid-template-columns: minmax(160px, 3fr) 9fr; } }
.dl--labels dt { font-family: var(--sans); font-size: 12px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); padding-top: .35em; }
@media (min-width: 900px) {
  .dl--grid > div { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .dl--grid dt { grid-column: 1 / 4; }
  .dl--grid dd { grid-column: 4 / 13; }
}
/* a ruled list inside a ruled row: the row's rule is enough, no second line */
.row__v > .stack li:first-child, .row__v.duo > div > .stack li:first-child, .row__v.follow > a:first-child, .row__v.qa > details:first-of-type, .row__v > .tbl thead + tbody tr:first-child td { border-top: 0; }
.row__v > .stack li:first-child, .row__v.duo > div > .stack li:first-child { padding-top: 0; }
.row__v.follow > a:first-child { padding-top: 0; }
.row__v.qa > details:first-of-type summary, .row__v > .qa > details:first-of-type summary { padding-top: 0; }
.row__v > .qa > details:first-of-type { border-top: 0; }
/* in a dl, the first visible row gets no rule (rows hidden until filled in are skipped) */
.row__v > .dl > div { border-top: 0; padding-top: 0; }
.row__v > .dl > div:not([hidden]) ~ div { border-top: 1px solid var(--rule); padding-top: 22px; }
/* phones: the next section's rule closes a list, so no second hairline just above it */
@media (max-width: 759px) {
  .row__v > .dl, .row__v.qa > details:last-child { border-bottom: 0; }
}

/* ---------- Coach block ---------- */
.coach { display: grid; gap: 24px; }
.coach .t-mid { margin-bottom: 16px; max-width: 22ch; }
@media (min-width: 640px) { .coach { grid-template-columns: 4fr 5fr; align-items: end; column-gap: 32px; } }
/* phones: a small portrait beside the text instead of a full-width photo */
@media (max-width: 639px) {
  .coach { grid-template-columns: 112px minmax(0, 1fr); align-items: start; column-gap: 16px; }
  .coach .t-mid { font-size: 1.15rem; }
}

/* anchor jumps, keyboard focus and form validation all land below the fixed header */
html { scroll-padding-top: calc(var(--header-h) + 16px); scroll-padding-bottom: 16px; }

/* ---------- Questions ---------- */
.qa details { border-top: 1px solid var(--rule); }
.qa details:last-child { border-bottom: 1px solid var(--rule); }
.qa summary {
  position: relative; display: block; min-height: 44px; padding: 20px 48px 20px 0;
  font-weight: 800; font-size: clamp(1.1rem, 1.8vw, 1.3rem); letter-spacing: -.01em; line-height: 1.3;
  cursor: pointer; list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
/* the +/– sits on the first text line (height = one line of the summary). "/ ''" keeps it out of the spoken name. */
.qa summary::after {
  content: "+"; content: "+" / "";
  position: absolute; right: 4px; top: 20px; height: 1.3em; display: flex; align-items: center;
  font-weight: 400; font-size: inherit; line-height: 1; transform: scale(1.4);
}
.qa details[open] summary::after { content: "–"; content: "–" / ""; }
.row__v.qa > details:first-of-type summary::after, .row__v > .qa > details:first-of-type summary::after { top: 0; }
.qa .a { padding: 0 0 22px; max-width: 62ch; color: var(--muted); }
.qa .a p { margin: 0 0 .6em; }

/* Seasons: the year is the big number. One season shows as .season, several as a list. */
.season__y, #seasons summary { font-family: var(--display); font-weight: 900; font-size: clamp(3.5rem, 9vw, 8rem); line-height: .82; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.season__y { margin: 0 0 18px; }
/* keep the +/– a sensible size next to the big year: .36em of the year, in a box one year-line tall */
#seasons summary::after { font-size: .36em; height: 2.28em; }
#seasons .a { color: var(--ink); font-size: clamp(1.15rem, 1.8vw, 1.4rem); max-width: 36ch; }

/* ---------- Quotes ---------- */
.quotes { display: grid; gap: 40px; }
@media (min-width: 900px) { .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.quote { margin: 0; padding-top: 22px; border-top: 1px solid var(--ink); }
.quote blockquote { margin: 0 0 14px; font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 22px; max-width: 760px; }
.form .two { display: grid; gap: 22px; }
@media (min-width: 640px) { .form .two { grid-template-columns: 1fr 1fr; } }
/* two short fields that stay side by side on phones too (People + Own gear) */
.form .two--pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
@media (max-width: 639px) { .form .two--pair { column-gap: 12px; } }
/* align-content: start keeps label and input at the top when the field next to it has a hint */
.field { display: grid; gap: 6px; align-content: start; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > label, .field > legend { font-weight: 700; font-size: .95rem; padding: 0; }
.field > label.check { font-weight: 500; font-size: 1rem; }
.field .opt { font-weight: 400; color: var(--muted); }
.field .hint { font-size: .88rem; color: var(--muted); }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: var(--mist); color: var(--ink);
  border: 1px solid var(--field); border-radius: 2px;
}
.field ::placeholder { color: var(--muted); opacity: 1; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:not([type="checkbox"]):focus, .field select:focus, .field textarea:focus { border-color: var(--blue); background: #fff; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .check input:focus-visible {
  outline: 3px solid var(--blue); outline-offset: 2px;
}
.check { display: flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 500; cursor: pointer; }
.check input { width: 22px; height: 22px; flex: none; accent-color: var(--blue); }
.checks { display: grid; gap: 0 24px; }
@media (min-width: 640px) { .checks { grid-template-columns: 1fr 1fr; } }
.form__send { display: grid; gap: 12px; justify-items: start; }
@media (max-width: 639px) { .form__send .btn { width: 100%; } }
.form__note { margin: 0; font-size: .92rem; color: var(--muted); }
.form__status { color: var(--error); font-weight: 600; }
.form__status:empty { display: none; }
.form__status a { color: inherit; }

/* scrolled into view after sending: html scroll-padding already clears the fixed header, this adds air */
.done { max-width: 760px; padding-top: 24px; border-top: 3px solid var(--blue); scroll-margin-top: 16px; }
.done h3 { font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.03em; margin-bottom: 16px; }
.done .dl { margin-top: 24px; }
.pay { margin-top: 32px; padding: 24px; background: var(--mist); }
.pay h4 { font-size: 1.2rem; margin-bottom: 6px; }
.pay__rows { display: grid; gap: 14px; margin: 16px 0 0; }
.pay__rows dt { font-size: 12px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.pay__rows dd { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-weight: 800; font-size: 1.25rem; overflow-wrap: anywhere; }
.pay__copy { min-height: 44px; padding: 0 14px; background: #fff; border: 1px solid var(--field); font-weight: 700; font-size: .9rem; cursor: pointer; }
.pay__qr { margin-top: 18px; width: 180px; background: #fff; padding: 8px; }
.pay .btn { margin-top: 18px; }
.pay__sub { flex-basis: 100%; font-size: .88rem; font-weight: 500; color: var(--muted); }
/* the suggested price in the confirmation */
.done__price { margin: 8px 0 28px; padding: 20px 0 22px; border-block: 1px solid var(--rule); }
.done__total { margin: 10px 0 12px; font-family: var(--display); font-weight: 900; font-size: clamp(2.4rem, 7vw, 3.6rem); line-height: .9; letter-spacing: -.04em; }
.done__total.is-soft { font-size: 1.6rem; line-height: 1.1; letter-spacing: -.02em; }
.done__per { margin: 0 0 4px; font-weight: 600; }
.done__price p:last-child { margin: 12px 0 0; }

/* ---------- Booking builder (Coaching #request) ----------
   One form: four steps, then a summary with the suggested price and the send button.
   Desktop: the summary sticks beside the steps. Phones: it closes the form, and a bar with the
   price and the send button sits at the bottom of the screen while the steps are in view. */
.bk { max-width: none; gap: 0; align-items: start; }
.bk__lede { margin-bottom: 12px; }
.bk__steps { min-width: 0; }
.bk__step { min-width: 0; margin: 0; padding: 28px 0 40px; border: 0; border-top: 1px solid var(--rule); }
.bk__step:focus { outline: 0; }
/* floated legends can be styled like any block; the next element clears them */
.bk legend { float: left; width: 100%; padding: 0; }
.bk__step > legend + * { clear: both; }
.bk__legend { margin: 0 0 22px; }
.bk__legend .label { margin-bottom: 8px; }
.bk__title { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.02; letter-spacing: -.03em; }
.bk__fields { display: grid; gap: 32px; }
.bk__hint { margin: 12px 0 0; font-size: .88rem; color: var(--muted); }
.bk .field > legend { margin-bottom: 4px; }
.bk .field > .hint { margin-top: 4px; }
@media (min-width: 960px) {
  .bk { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .bk__steps { grid-column: 1 / 8; }
}
@media (min-width: 1200px) { .bk__steps { grid-column: 1 / 9; } }

/* Radio choices: ruled rows with a native radio, the chosen row tinted with a blue edge */
.choices { display: grid; border-top: 1px solid var(--rule); }
.choice {
  position: relative; display: flex; align-items: center; gap: 14px;
  min-height: 56px; padding: 12px 14px; border-bottom: 1px solid var(--rule);
  cursor: pointer; transition: background-color .15s;
}
.choice input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--blue); cursor: pointer; }
.choice input:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (hover: hover) { .choice:hover { background: var(--mist); } }
.choice:has(input:checked) { background: var(--mist); box-shadow: inset 3px 0 0 var(--blue); }
.choice__main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.choice__name { font-weight: 700; line-height: 1.25; }
.choice__meta { font-size: .88rem; line-height: 1.35; color: var(--muted); }
.choice__price { flex: none; text-align: right; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.choice__price small { display: block; font-size: .8rem; font-weight: 400; color: var(--muted); }
.choices--lesson .choice { min-height: 76px; padding-block: 16px; }
.choices--lesson .choice__name { font-weight: 800; font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: -.015em; line-height: 1.15; }
.choices--lesson .choice--quiet { min-height: 56px; }
.choices--lesson .choice--quiet .choice__name { font-weight: 600; font-size: 1rem; letter-spacing: 0; }
@media (min-width: 640px) {
  .choices--cols { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-bottom: 1px solid var(--rule); }
  .choices--cols .choice { border-bottom: 0; }
  .choices--cols .choice + .choice { border-left: 1px solid var(--rule); }
  .choices--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .choices--2 .choice:nth-child(odd) { border-right: 1px solid var(--rule); }
}

/* People: - [ 2 ] + */
.stepper { display: inline-flex; align-items: stretch; justify-self: start; border: 1px solid var(--field); background: var(--mist); }
.stepper__btn {
  width: 52px; min-height: 52px; padding: 0; background: none; border: 0; border-radius: 0;
  color: var(--ink); font-size: 1.5rem; font-weight: 500; line-height: 1; cursor: pointer;
}
@media (hover: hover) { .stepper__btn:hover { background: #fff; } }
.stepper__btn[aria-disabled="true"] { color: var(--field); background: none; cursor: default; }
.stepper__btn:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--blue); outline-offset: 2px; }
.field .stepper input[type="number"] {
  width: 72px; min-height: 52px; padding: 0 6px; border: 0; border-radius: 0; background: #fff;
  text-align: center; font-weight: 800; font-size: 1.2rem; font-variant-numeric: tabular-nums;
}
.bk--js .stepper input[type="number"] { border-inline: 1px solid var(--field); -moz-appearance: textfield; appearance: textfield; }
.bk--js .stepper input::-webkit-outer-spin-button, .bk--js .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Packages: each card carries its own suggested total */
.choices--pack .choice { align-items: flex-start; padding-block: 16px; }
.choices--pack .choice input { margin-top: 1px; }
.choice__total { display: grid; gap: 2px; margin-top: 8px; }
.choice__total[hidden] { display: none; }
.choice__total b { font-family: var(--display); font-weight: 800; font-size: 1.2rem; line-height: 1.1; letter-spacing: -.01em; }
.choice__total small { font-size: .8rem; line-height: 1.35; color: var(--muted); }

/* A label that is not a <label> (the calendar has no single input) */
.field__label { margin: 0; font-weight: 700; font-size: .95rem; }

/* Days: a month calendar. Picked days turn blue and are listed under it. */
.cal { max-width: 440px; }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 10px; }
.cal__month { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; }
.cal__month::first-letter { text-transform: uppercase; }
.cal__nav {
  flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--field); border-radius: 0;
  background: #fff; color: var(--ink); font: inherit; font-size: 1.05rem; cursor: pointer;
}
@media (hover: hover) { .cal__nav:not(:disabled):hover { background: var(--mist); } }
.cal__nav:disabled { color: #B6BCC5; border-color: var(--line); cursor: default; }
.cal__week, .cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal__week span { padding: 4px 0 6px; text-align: center; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cal__day {
  aspect-ratio: 1; min-height: 40px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 0; background: var(--mist); color: var(--ink);
  font: inherit; font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums;
  cursor: pointer; transition: background-color .12s, color .12s;
}
@media (hover: hover) { .cal__day:not([aria-disabled="true"]):not([aria-pressed="true"]):hover { background: #E2E7EE; } }
.cal__day[aria-pressed="true"] { background: var(--blue); color: #fff; }
.cal__day[aria-disabled="true"] { background: none; color: #B0B6BF; font-weight: 500; cursor: default; }
.cal__day.is-busy { text-decoration: line-through; }
.cal__day.is-today { color: var(--ink); text-decoration: underline 2px; text-underline-offset: 5px; }
.cal__day:focus-visible, .cal__nav:focus-visible, .cal__chip:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--blue); outline-offset: 2px; }
.cal__note { margin: 10px 0 0; font-size: .88rem; font-weight: 600; color: var(--error); }
.cal__note:empty { display: none; }
.cal__picked { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cal__picked[hidden] { display: none; }
.cal__chip {
  display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px 0 12px;
  border: 1px solid var(--ink); border-radius: 0; background: #fff; color: var(--ink);
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
}
.cal__chip span { font-size: 1.1rem; line-height: 1; color: var(--muted); }
@media (hover: hover) { .cal__chip:hover { background: var(--mist); } .cal__chip:hover span { color: var(--ink); } }

/* The summary (black panel) */
.sum { margin: 8px calc(-1 * var(--gutter)) 0; padding: 32px var(--gutter) 36px; background: var(--ink); color: #fff; }
.sum .label, .sumbar .label { color: rgba(255, 255, 255, .72); }
.sum :focus-visible, .sumbar :focus-visible { outline-color: #fff; }
.sum a { color: #fff; text-decoration-color: rgba(255, 255, 255, .5); }
.sum a:hover { color: #fff; text-decoration-color: currentColor; }
.sum__lesson { margin: 14px 0 4px; font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.02em; }
.sum__lesson.is-empty { color: rgba(255, 255, 255, .72); font-size: 1.15rem; font-weight: 700; letter-spacing: 0; }
.sum__meta { margin: 0 0 20px; font-size: .95rem; color: rgba(255, 255, 255, .78); }
.sum__when { margin: -6px 0 20px; font-size: .95rem; }
.sum__when .label { margin-bottom: 3px; }
.sum__calc { margin: 0 0 22px; border-top: 1px solid var(--rule-dark); font-size: .9rem; }
.sum__calc > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--rule-dark); }
.sum__calc dt { color: rgba(255, 255, 255, .78); }
.sum__calc dd { margin: 0; font-weight: 700; white-space: nowrap; }
.sum__total { margin: 8px 0 12px; font-family: var(--display); font-weight: 900; font-size: clamp(2.6rem, 11vw, 3.6rem); line-height: .9; letter-spacing: -.04em; overflow-wrap: anywhere; }
.sum__total.is-soft { font-size: 1.6rem; line-height: 1.1; letter-spacing: -.02em; }
.sum__per { margin: 0 0 4px; font-weight: 600; }
.sum__per + .sum__per { font-weight: 500; color: rgba(255, 255, 255, .78); }
.sum__note { margin: 20px 0 22px; padding-top: 16px; border-top: 1px solid var(--rule-dark); font-size: .92rem; color: rgba(255, 255, 255, .78); }
.sum__body[hidden] + .sum__note { margin-top: 16px; padding-top: 0; border-top: 0; }
.sum .form__send { justify-items: stretch; }
.sum .btn { width: 100%; }
.sum .form__note { color: rgba(255, 255, 255, .72); }
.sum .form__status { color: #FFB4A8; }
@media (min-width: 960px) {
  .sum {
    grid-column: 8 / 13; position: sticky; top: calc(var(--header-h) + 24px);
    margin: 0; padding: 28px 28px 30px; max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto;
  }
  .sum__total { font-size: clamp(2.4rem, 3.6vw, 3.4rem); }
}
@media (min-width: 1200px) { .sum { grid-column: 9 / 13; } }

/* Phones: the bottom bar */
.sumbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--ink); color: #fff; border-top: 1px solid var(--rule-dark);
  transform: translateY(110%); visibility: hidden;
  transition: transform .25s ease, visibility 0s linear .25s;
}
.sumbar.is-on { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
@media (min-width: 960px) { .sumbar { display: none; } }
.sumbar__row { display: flex; align-items: center; gap: 12px; }
.sumbar__peek {
  flex: 1; min-width: 0; min-height: 52px; display: grid; justify-items: start; align-content: center; gap: 3px;
  padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.sumbar__total { font-family: var(--display); font-weight: 900; font-size: 1.5rem; line-height: 1; letter-spacing: -.03em; }
.sumbar__total.is-soft { font-size: 1.05rem; font-weight: 700; letter-spacing: 0; }
.sumbar__hint { font-size: .8rem; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .5); text-underline-offset: .25em; }
.sumbar .btn { flex: none; min-height: 48px; }
.sumbar__more {
  max-height: 55vh; max-height: 55svh; overflow-y: auto;
  margin: 0 calc(-1 * var(--gutter)) 12px; padding: 4px var(--gutter) 14px; border-bottom: 1px solid var(--rule-dark);
}
.sumbar__more .sum__note { margin-bottom: 0; }
/* while the bar is up, focused fields and the preview badge stay clear of it */
html.has-sumbar { scroll-padding-bottom: 104px; }
html.has-sumbar .preview-badge { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-motion: reduce) {
  .sumbar, .sumbar.is-on, .choice { transition: none; }
}

/* ---------- Booking pop-up (.bkm) ----------
   The booking form inside a <dialog>: progress bar on top, one step at a time in the middle,
   the suggested price with Back / Next / Send at the bottom. Full screen on phones. */
.bk__start { display: grid; gap: 12px; justify-items: start; margin-top: 20px; }
.bk__start .btn { min-height: 56px; padding: 0 28px; font-size: 1.05rem; }
.bk__start .muted { margin: 0; font-size: .92rem; }
.bk__sub { margin: -10px 0 22px; color: var(--muted); }
/* Coaching page, "Coaching abroad" row: the way to coaching-abroad.html (families who fly Noah out) */
.special {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 560px; margin-top: 22px; padding: 14px 16px; border: 1px solid var(--ink);
  color: var(--ink); text-decoration: none; transition: background-color .15s;
}
.special__txt { display: grid; gap: 3px; min-width: 0; }
.special b { font-weight: 700; line-height: 1.3; }
.special__sub { font-size: .88rem; color: var(--muted); }
.special .arr { flex: none; font-size: 1.2rem; transition: transform .2s; }
@media (hover: hover) { .special:hover { background: var(--mist); color: var(--ink); } .special:hover .arr { transform: translateX(3px); } }
html.bkm-open { overflow: hidden; }
.bkm {
  width: min(760px, calc(100vw - 48px)); max-width: none;
  height: min(860px, calc(100vh - 48px)); height: min(860px, calc(100dvh - 48px)); max-height: none;
  margin: auto; padding: 0; border: 0; border-radius: 0;
  background: var(--paper); color: var(--ink);
  flex-direction: column; overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .35);
}
.bkm[open] { display: flex; }
.bkm::backdrop { background: rgba(11, 11, 12, .72); }
@media (max-width: 640px) {
  .bkm { width: 100%; height: 100%; max-height: 100%; inset: 0; box-shadow: none; }
}
.bkm__head { flex: none; padding: 18px 28px 0; }
.bkm__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }
.bkm__count { margin: 0; }
.bkm__x {
  width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; border-radius: 0;
  background: none; color: var(--ink); font: inherit; font-size: 2rem; line-height: 1; cursor: pointer;
}
@media (hover: hover) { .bkm__x:hover { background: var(--mist); } }
.bkm__bar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin-top: 10px; }
.bkm__bar span { height: 4px; background: var(--line); transition: background-color .3s; }
.bkm__bar .is-done { background: var(--ink); }
.bkm__bar .is-on { background: var(--blue); }
.bkm :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.bkm .bk { display: flex; flex-direction: column; align-items: stretch; flex: 1; min-height: 0; gap: 0; max-width: none; margin: 0; }
.bkm .bk__steps { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 28px 32px; }
.bkm .bk__step { padding: 24px 0 0; border-top: 0; }
.bkm .bk__legend { margin-bottom: 18px; }
.bkm .bk__legend .label { display: none; } /* the step count sits in the head */
.bkm .bk__title { font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1; }
.bkm .bk__fields { gap: 28px; }
.bkm .cal { max-width: none; }
.bkm .cal__day { aspect-ratio: auto; height: 46px; }
@media (min-width: 641px) { .bkm .cal__day { height: 52px; } }
/* the receipt closes the last step */
.bkm .sum { position: static; margin: 32px 0 0; padding: 24px; max-height: none; overflow: visible; }
.bkm .sum .form__send .btn { display: none; }
.bkm .sum .form__send { margin-top: 0; }
.bkm .sum__note { margin-bottom: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .bkm[open] { animation: bkm-in .26s ease-out; }
  .bkm .bk__step:not([hidden]) { animation: bkm-step .3s ease-out; }
}
@keyframes bkm-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes bkm-step { from { opacity: 0; transform: translateX(18px); } }

.bkm__foot {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 14px 28px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--rule); background: var(--paper);
}
.bkm__price { flex: 1; min-width: 0; margin: 0; display: grid; gap: 4px; }
.bkm__price .label, .bkm__total { white-space: nowrap; }
.bkm__total { font-family: var(--display); font-weight: 900; font-size: 1.7rem; line-height: 1; letter-spacing: -.01em; }
.bkm__total.is-soft { font-size: 1.05rem; font-weight: 700; letter-spacing: 0; }
.bkm__back {
  display: inline-flex; align-items: center; gap: 6px;
  flex: none; min-height: 48px; padding: 0 12px; border: 0; border-radius: 0;
  background: none; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer;
}
@media (hover: hover) { .bkm__back:hover { background: var(--mist); } }
.bkm__next, .bkm__send { flex: none; min-height: 52px; }
.bkm__back[hidden], .bkm__next[hidden], .bkm__send[hidden] { display: none; }
/* after sending: the confirmation fills the pop-up */
.bkm > .done { flex: 1; min-height: 0; overflow-y: auto; max-width: none; margin: 24px 28px 0; padding-bottom: 40px; padding-top: 0; border-top: 0; }
.bkm > .done h3:focus { outline: none; }
@media (max-width: 640px) {
  .bkm__head { padding: 10px 16px 0; }
  .bkm .bk__steps { padding: 4px 16px 28px; }
  .bkm__foot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 6px; }
  .bkm__total { font-size: 1.45rem; }
  .bkm__back { width: 48px; justify-content: center; padding: 0; font-size: 1.25rem; }
  .bkm__bt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bkm .sum { margin-inline: -16px; }
  .bkm > .done { margin: 16px 16px 0; }
}
html.bkm-open .preview-badge { display: none; }

/* ---------- Partners page ---------- */
.prow__logo { display: flex; align-items: center; min-height: 64px; }
.prow__logo img { width: auto; max-width: 200px; max-height: 72px; }
.prow h3 { font-size: clamp(1.5rem, 3vw, 2.4rem); letter-spacing: -.03em; margin-bottom: 10px; }
.ways .row__v ul { display: grid; gap: 6px; margin-top: 12px; }
.ways .row__v li { position: relative; padding-left: 18px; }
.ways .row__v li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 2px; background: var(--ink); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-top: 1px solid var(--rule); }
.stat { padding: 22px 24px 22px 0; border-bottom: 1px solid var(--rule); }
.stat__v { font-family: var(--display); font-weight: 900; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1; letter-spacing: -.04em; overflow-wrap: anywhere; }
.stat .label { margin-top: 8px; }
@media (max-width: 599px) { .stats { grid-template-columns: 1fr 1fr; } .stat { padding-right: 12px; } }
.creds { display: flex; flex-wrap: wrap; gap: 8px 0; }
.creds li { font-size: 12px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
.creds li + li::before { content: "·"; padding: 0 10px; color: var(--muted); }
/* narrow screens: one credential per line, so no line starts with a dot */
@media (max-width: 759px) { .creds { display: grid; gap: 10px; } .creds li + li::before { content: none; } }
/* behind-the-scenes photo, lined up with the content column above it */
@media (min-width: 900px) { .bts { grid-column: 4 / 11; } }

/* ---------- Footer ---------- */
.ft { background: var(--ink); color: #fff; padding: 64px 0 calc(32px + env(safe-area-inset-bottom)); }
.ft a { color: #fff; text-decoration-color: var(--rule-dark); }
.ft a:hover { color: #fff; text-decoration-color: var(--blue); text-decoration-thickness: 2px; }
.ft__top { display: grid; gap: 20px; padding-bottom: 40px; border-bottom: 1px solid var(--rule-dark); }
@media (min-width: 900px) { .ft__top { grid-template-columns: 1fr auto; align-items: end; } }
.ft__line { margin: 0; font-weight: 600; font-size: 1.125rem; line-height: 1.4; }
.ft__nav { display: flex; flex-wrap: wrap; gap: 0 24px; padding-block: 12px; border-top: 1px solid var(--rule-dark); }
.ft__nav a { display: inline-block; padding: 11px 2px; font-weight: 600; }
.ft__cols { display: grid; gap: 28px; padding-block: 36px; }
@media (min-width: 760px) { .ft__cols { grid-template-columns: repeat(3, 1fr); } }
.ft__cols .label { margin-bottom: 8px; color: rgba(255, 255, 255, .6); }
.ft__cols li a, .ft__cols li > span { display: inline-block; padding-block: 11px; overflow-wrap: anywhere; }
.ft__partners { margin: 0; padding-block: 20px; border-top: 1px solid var(--rule-dark); color: rgba(255, 255, 255, .72); font-size: .95rem; }
.ft__legal { display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: center; padding-top: 20px; border-top: 1px solid var(--rule-dark); font-size: .88rem; color: rgba(255, 255, 255, .66); }
.ft__legal p { margin: 0; }
.ft__legal a { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; }
/* phones: a compact footer. Two link columns side by side, Follow full width (the handles are long),
   no second "Book a lesson" (it is first in the Lessons column, and the header Book is always there). */
@media (max-width: 759px) {
  .ft { padding-top: 48px; }
  .ft__top { padding-bottom: 28px; }
  .ft__top .go { display: none; }
  .ft__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 12px; padding-block: 28px; }
  .ft__cols > div:last-child { grid-column: 1 / -1; }
  .ft__nav { display: grid; grid-template-columns: repeat(3, max-content); column-gap: 28px; }
  .ft__legal a { margin-left: 0; }
}
/* the sign-off: the name, big, as the last thing on every page (decorative, hidden from screen readers) */
.ft__sign {
  margin: 56px 0 0; font-family: var(--display); font-weight: 900; font-size: clamp(2.5rem, 12.2vw, 11rem); line-height: .8;
  letter-spacing: -.05em; text-transform: uppercase; white-space: nowrap; color: #fff;
}

/* ---------- Simple pages (privacy, 404, sent) ---------- */
.simple > * { max-width: 760px; }
.simple h1 { font-size: clamp(2.6rem, 8vw, 5.5rem); font-weight: 900; letter-spacing: -.045em; line-height: .92; text-transform: uppercase; margin: 16px 0 28px; }
.simple h2 { font-size: 1.4rem; letter-spacing: -.02em; margin: 44px 0 12px; }
.simple ul { list-style: disc; padding-left: 1.2em; }
.simple li { margin-bottom: .45em; }

/* ---------- Preview badge (only on file:// and localhost) ---------- */
.preview-badge {
  position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 99;
  max-width: calc(100vw - 24px); padding: 8px 12px;
  background: var(--ink); color: #fff; border: 1px solid rgba(255, 255, 255, .35);
  font-size: 12px; font-weight: 600; line-height: 1.3;
}

/* ---------- Journal (index + post pages) ---------- */
.jl-feature { display: grid; gap: 20px; padding-bottom: 40px; border-bottom: 1px solid var(--rule); }
.jl-feature a { color: inherit; text-decoration: none; }
.jl-feature h2 { font-size: clamp(2rem, 4.6vw, 3.8rem); letter-spacing: -.035em; line-height: 1; margin: 10px 0 14px; }
.jl-feature a:hover h2 { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--blue); text-underline-offset: .12em; }
.jl-feature img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 900px) { .jl-feature { grid-template-columns: 7fr 5fr; column-gap: 32px; align-items: end; } }
.jl-list a {
  display: grid; gap: 4px 24px; padding-block: 22px; border-bottom: 1px solid var(--rule);
  color: inherit; text-decoration: none;
}
.jl-list a:hover .jl-title { text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; }
.jl-title { font-weight: 800; font-size: clamp(1.25rem, 2.2vw, 1.7rem); letter-spacing: -.02em; line-height: 1.15; }
@media (min-width: 760px) { .jl-list a { grid-template-columns: 180px 1fr auto; align-items: baseline; } }

.post__head { padding-bottom: 40px; }
.post__title { font-size: clamp(2.6rem, 7vw, 6rem); font-weight: 900; line-height: .92; letter-spacing: -.045em; margin: 18px 0 24px; max-width: 16ch; }
.post__head .lede { max-width: 36ch; }
.post__body { max-width: 66ch; padding-block: 56px 24px; font-size: 1.125rem; line-height: 1.68; }
@media (min-width: 900px) { .post__body { margin-left: calc(25% + 6px); } }
.post__body h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.025em; margin: 48px 0 14px; }
.post__body h2:first-child { margin-top: 0; }
.post__body figure { margin: 40px 0; }
.post__body figure img { width: 100%; }
.post__body figcaption { margin-top: 10px; }
.post__foot { padding-bottom: 96px; }
.draft-bar {
  position: sticky; top: var(--header-h); z-index: 30;
  padding: 12px var(--gutter); background: var(--error); color: #fff; font-weight: 700; font-size: .95rem;
}
.jl-latest { display: grid; gap: 8px; color: inherit; text-decoration: none; }
.jl-latest .t-line { font-size: clamp(1.8rem, 4vw, 3.2rem); }
.jl-latest:hover .t-line { text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 3px; text-underline-offset: .1em; }
.ft__credit { margin: 0; padding-top: 8px; font-size: .8rem; }
.ft__credit a { color: rgba(255, 255, 255, .6); text-decoration-color: rgba(255, 255, 255, .25); display: inline-block; padding-block: 12px; }

/* ---------- Mona Sans tracking ----------
   The negative letter-spacing in the rules above was tuned for the system font. Mona Sans is
   narrower (and condensed in the big type), so the display type gets lighter tracking here.
   If the font is ever switched off, delete this block too. */
h1, h2, h3, h4 { letter-spacing: -.01em; }
.t-hero, .t-title, .simple h1, .menu nav a, .stack li, .follow a, .ft__sign,
.facts__cells b, .tbl--titles .t-mid, .season__y, #seasons summary { letter-spacing: -.005em; }
.split h1, .stat__v, .post__title { letter-spacing: -.01em; }
.t-line, .t-mid, .prow h3, .jl-feature h2, .bk__title, .done h3, .post__body h2 { letter-spacing: -.012em; }
.sum__total, .done__total, .sumbar__total, .sum__lesson { letter-spacing: -.01em; }
.split h1, .t-line, .post__title { word-spacing: .04em; }
/* Mona Sans is condensed in the big type, so the name, page titles and sign-off need more size
   to run edge to edge like the design intends. */
.ft__sign { font-size: clamp(2.5rem, 18vw, 14rem); }
@media (max-width: 767px) {
  .t-hero { font-size: 31vw; }
  .t-title { font-size: 24vw; }
}

/* ---------- Clean pass (Noah, 9 October 2026) ----------
   Noah wants the pages calmer: smaller display type inside the page, and content in plain boxes
   with straight lines. The hero name, page titles and footer sign-off keep their size. */
:root { --box: 1px solid var(--rule); }

/* calmer type inside the pages */
.stack li, .duo .stack li { padding: 16px 0; font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.05; }
#ch-5 { font-size: clamp(2rem, 5.4vw, 4.6rem); }
.tbl--titles td { padding-block: 16px; }
.tbl--titles .t-mid { font-size: clamp(1.15rem, 2vw, 1.6rem); line-height: 1.1; }
.season__y, #seasons summary { font-size: clamp(2.5rem, 5vw, 4rem); line-height: .9; }

/* follow links: equal boxes side by side */
.follow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.follow a, .row__v.follow > a:first-child {
  padding: 20px; border: var(--box); font-size: clamp(1.35rem, 2.4vw, 1.9rem);
}
.follow a:hover { border-color: var(--ink); }
.dark .follow a { border-color: var(--rule-dark); }

/* definition rows (how it works, practical, contact) become boxes */
.dl, .row__v > .dl { display: grid; gap: 12px; border-bottom: 0; }
.dl > div, .row__v > .dl > div, .row__v > .dl > div:not([hidden]) ~ div {
  display: block; padding: 22px 24px; border: var(--box); background: var(--paper);
}
.dl dt { margin-bottom: 8px; }
.dl--labels dt { padding-top: 0; }
.dl dd { overflow-wrap: anywhere; }
@media (min-width: 760px) {
  .dl { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .dl--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* lessons on phones: one box per lesson */
@media (max-width: 759px) {
  .lessons tbody { display: grid; gap: 12px; }
  .lessons tbody tr { padding: 20px; border: var(--box); }
}

/* partners, "Work with me": one box per way of working together */
.ways > .wrap:first-child { display: grid; gap: 12px; }
.ways > .wrap:first-child > .row:not(:first-child) { display: block; padding: 24px; border: var(--box); }
.ways > .wrap:first-child > .row:not(:first-child) > .row__k { padding-top: 0; margin-bottom: 12px; }
@media (min-width: 760px) {
  .ways > .wrap:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ways > .wrap:first-child > .row:first-child { grid-column: 1 / -1; }
}

/* very narrow screens: the whole header still fits */
@media (max-width: 359px) {
  .hd__in { gap: 2px; }
  .hd__mark { font-size: .9rem; letter-spacing: 0; }
  .hd__lang { min-width: 36px; }
  .hd__cta { padding-inline: 12px; }
}

/* text pages (My story, Privacy): a comfortable line length */
.simple p, .simple ul, .simple h2 { max-width: 68ch; }

/* photos between the sections of a text page (My story) */
.simple > .fig { margin: 40px 0 8px; }
.simple > .fig img { height: auto; }
.simple > .fig--portrait { max-width: 460px; }

/* Story page, U21 years (Noah, 12 October 2026): titles in the same ruled format as the senior
   results, two photos side by side under them, and the Senior chapter pulled up close with no rule. */
.u21 { padding-bottom: 28px; }
@media (min-width: 768px) { .u21 { padding-bottom: 44px; } }
.u21__pics { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; max-width: 760px; margin-top: 32px; }
.u21__pics img { aspect-ratio: 4 / 5; height: auto; }
.u21 + .chapter > .wrap > .row { border-top: 0; padding-top: 0; }
/* "The U21 years" and "Senior" as real headings, not quiet labels: bold condensed caps */
.u21 .row__k, .u21 + .chapter .row__k {
  padding-top: 0; justify-self: start; align-self: start;
  font-family: var(--display); font-stretch: 75%; font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: .95; letter-spacing: -.005em; color: var(--ink);
}
@media (max-width: 899px) { .u21 .row__k, .u21 + .chapter .row__k { margin-bottom: 14px; } }

/* Story page, "Chasing the world title" (Noah, 12 October 2026): the photo from the left edge of the
   content, the heading level with the top of the photo. */
.wt { align-items: start; row-gap: 24px; }
.wt__fig img { aspect-ratio: 3 / 2; height: auto; }
.wt .t-line { margin: 0 0 20px; max-width: 14ch; font-size: clamp(2rem, 4.2vw, 3.6rem); }
@media (min-width: 900px) {
  .row > .wt__fig { grid-column: 1 / 8; }
  .row > .wt__text { grid-column: 8 / 13; margin-top: -.08em; }
}

/* Story page, Coaching as a then-and-now timeline (Noah, 12 October 2026): a photo from when he
   started, the text in the middle, a photo from today. A thin line runs between the two years.
   Phones: the two photos side by side, the text under them. */
.tl { align-items: center; row-gap: 28px; }
.tl__pic { margin: 0; position: relative; }
.tl__pic img, .tl__ph { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--pos, 50% 50%); }
/* "COACHING" as a heading, in the same style as THE U21 YEARS and SENIOR */
.tl__kicker {
  margin: 0 0 18px; font-family: var(--display); font-stretch: 75%; font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: .95; letter-spacing: -.005em; color: var(--ink);
}
.tl__ph { display: grid; place-items: center; padding: 16px; background: var(--mist); border: 1px dashed var(--field); color: var(--muted); font-size: .9rem; text-align: center; }
.tl__pic figcaption { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; }
.tl__y { font-family: var(--display); font-stretch: 75%; font-weight: 900; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; }
.tl__text { text-align: center; }
.tl__text > .label { margin-bottom: 14px; }
.tl__text .t-line, .tl__text #ch-5 { margin: 0 auto 18px; max-width: none; font-size: clamp(1.6rem, 2.6vw, 2.4rem); }
.tl__text .t-line > span { display: block; }
.tl__text .prose { margin: 0 auto 26px; max-width: 40ch; }
.tl__text .actions { justify-content: center; }
@media (max-width: 899px) {
  .tl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; align-items: start; }
  .tl__pic figcaption { flex-direction: column; gap: 4px; }
  .tl__text { grid-column: 1 / -1; grid-row: 2; }
  .tl__pic--now { grid-column: 2; grid-row: 1; }
}
@media (min-width: 900px) {
  .row > .tl__pic--then { grid-column: 1 / 5; }
  .row > .tl__text { grid-column: 5 / 9; padding-inline: 4px; }
  .row > .tl__pic--now { grid-column: 9 / 13; }
}

/* partners: two photos side by side, equal height (3:2 beside a square) */
.bts2 { display: grid; gap: 12px; }
@media (min-width: 760px) { .bts2 { grid-template-columns: 3fr 2fr; align-items: start; } }

/* Follow boxes: the platform's own icon, in colour, just left of the arrow (Noah, 12 October 2026) */
.follow__end { display: inline-flex; align-items: center; gap: 14px; flex: none; }
.follow .sico { width: clamp(30px, 2.6vw, 38px); height: auto; display: block; }
.follow a:hover .follow__end > span[aria-hidden] { transform: translate(3px, -3px); }
.follow__end > span[aria-hidden] { transition: transform .2s; }

/* Reviews wall (Story and Coaching pages, Noah, 12 October 2026): the video review in the middle,
   square review cards around it. Cards come from site-config.js (testimonials); empty places are
   quiet "write a review" tiles that link to review.html. */
.rv-head { align-items: end; row-gap: 20px; border-top-color: var(--ink); }
.rv-head .t-line { margin: 0 0 14px; font-size: clamp(1.9rem, 3.6vw, 3rem); }
.rv-head .prose { margin: 0; }
@media (min-width: 900px) {
  .row > .rv-head__in { grid-column: 1 / 9; }
  .row > .rv-head__in + .btn { grid-column: 10 / 13; justify-self: end; }
}
.rv-wall { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.rv-video { margin: 0; grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 320px; display: grid; }
.rv-video video { display: block; width: 100%; height: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--ink); }
.rv-video figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 0 0; }
.rv-video figcaption strong { font-family: var(--display); font-stretch: 85%; font-size: 1.1rem; }
.rv-card {
  margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
  min-height: 180px; padding: 20px; border: 1px solid var(--rule); background: var(--paper);
}
.rv-card blockquote { margin: 0; flex: 1; }
.rv-card blockquote p { margin: 0; font-weight: 600; font-size: 1rem; line-height: 1.4; letter-spacing: -.005em; }
.rv-card figcaption { display: grid; gap: 2px; }
.rv-card figcaption strong { font-family: var(--display); font-stretch: 85%; font-size: 1.05rem; }
.rv-stars { margin: 0; color: var(--blue); font-size: 1.05rem; letter-spacing: .12em; line-height: 1; }
.rv-stars__off { color: var(--line); }
.rv-card--ghost {
  align-items: flex-start; justify-content: flex-end; gap: 10px;
  border-style: dashed; border-color: var(--field); background: var(--mist);
  color: var(--muted); text-decoration: none; transition: border-color .15s, color .15s, background-color .15s;
}
.rv-card--ghost:hover { border-color: var(--blue); color: var(--blue-dark); background: #fff; }
.rv-plus { font-family: var(--display); font-weight: 900; font-size: 2.2rem; line-height: .8; color: var(--blue); }
.rv-ghost__t { font-weight: 700; font-size: .95rem; line-height: 1.3; }
.rv-card--ask { border-style: solid; border-color: var(--ink); background: var(--paper); color: var(--ink); }
/* phones: two quiet tiles are enough */
@media (max-width: 899px) { .rv-card--ghost:not(.rv-card--ask) ~ .rv-card--ghost { display: none; } }
@media (min-width: 900px) {
  .rv-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, auto); grid-auto-flow: dense; }
  .rv-video { grid-column: 2 / 3; grid-row: 1 / 3; max-width: none; justify-self: stretch; position: relative; }
  .rv-video video { position: absolute; inset: 0; aspect-ratio: auto; }
  /* the name sits on the video, above the player controls */
  .rv-video figcaption {
    position: absolute; left: 0; right: 0; top: 0; padding: 14px 16px 28px; color: #fff; pointer-events: none;
    background: linear-gradient(180deg, rgba(11, 11, 12, .6), rgba(11, 11, 12, 0));
  }
  .rv-video figcaption .label { color: rgba(255, 255, 255, .85); }
  .rv-card { aspect-ratio: 1 / 1; min-height: 0; }
}

/* Write a review (review.html) */
.rvf { max-width: 680px; }
.rvf .rating { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; margin: 4px 0 0; border: 0; padding: 0; }
.rvf .rating input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rvf .rating label { cursor: pointer; font-size: 2.4rem; line-height: 1; color: var(--line); padding: 2px; transition: color .1s; }
.rvf .rating input:checked ~ label, .rvf .rating label:hover, .rvf .rating label:hover ~ label { color: var(--blue); }
.rvf .rating input:focus-visible + label { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Reviews, simpler (Noah, 12 October 2026, evening): the video review on the left, heading, one line and
   the "Write a review" button on the right. Written reviews are plain cards in a row under it; the
   empty "your review here" tiles are gone. Replaces the wall layout above (.rv-head, .rv-wall, ghosts). */
.rv2 { align-items: center; row-gap: 28px; border-top-color: var(--ink); }
.rv2 .rv-video { grid-column: 1 / -1; grid-row: auto; position: static; justify-self: center; width: 100%; max-width: 300px; }
.rv2 .rv-video video { position: static; aspect-ratio: 9 / 16; height: auto; }
.rv2 .rv-video figcaption { position: static; padding: 12px 0 0; color: var(--ink); background: none; pointer-events: auto; }
.rv2 .rv-video figcaption .label { color: var(--muted); }
.rv2__text .t-line { margin: 0 0 14px; font-size: clamp(1.9rem, 3.6vw, 3rem); }
.rv2__text .prose { margin: 0 0 26px; max-width: 40ch; }
@media (max-width: 899px) { .rv2__text { grid-column: 1 / -1; grid-row: 1; } }
@media (min-width: 900px) {
  .row > .rv2 .rv-video, .rv2 > .rv-video { grid-column: 1 / 4; justify-self: start; max-width: none; }
  .rv2 > .rv2__text { grid-column: 5 / 12; }
}
.rv-cards { display: grid; gap: 12px; margin-top: 32px; }
@media (min-width: 700px) { .rv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rv-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rv-cards .rv-card { aspect-ratio: auto; min-height: 0; }

/* Write a review: a calmer page title (Noah, 12 October 2026, evening) */
.simple h1.rvf__h { font-size: clamp(2rem, 5vw, 3.4rem); margin-bottom: 32px; }

/* Front page, Coaching timeline tidied (Noah, 13 October 2026): COACHING sits higher, a smaller headline,
   shorter text, the two buttons side by side. A line with an arrowhead draws from 2016 to 2026 between
   the photos while the right-hand year counts up (main.js adds .tl--anim, then .is-in when it scrolls
   into view; without JS or with reduced motion everything is simply shown). */
.tl { --tl-y: clamp(1.8rem, 3vw, 2.6rem); }
.tl__y { font-size: var(--tl-y); font-variant-numeric: tabular-nums; }
.tl__kicker { margin-bottom: 12px; }
.tl__text .t-line, .tl__text #ch-5 { margin-bottom: 14px; font-size: clamp(1.35rem, 2vw, 1.85rem); }
.tl__text .prose { margin-bottom: 22px; max-width: 32ch; }
.tl__text .actions { flex-wrap: nowrap; gap: 10px; }
.tl__text .actions .btn { flex: 0 1 auto; white-space: nowrap; }
@media (max-width: 380px) { .tl__text .actions { flex-wrap: wrap; } }
.tl__line { display: none; }
@media (min-width: 900px) {
  .row > .tl__pic--then, .row > .tl__text, .row > .tl__pic--now { grid-row: 1; }
  .row > .tl__text { align-self: start; padding-top: clamp(8px, 3vw, 44px); }
  .row > .tl__line {
    display: block; grid-column: 5 / 9; grid-row: 1; align-self: end; position: relative;
    height: 2px; margin: 0 6px calc(var(--tl-y) / 2 - 1px) -3.2em; background: var(--ink);
    transform-origin: left center;
  }
  .tl__line::after {
    content: ""; position: absolute; right: -1px; top: 50%; width: 11px; height: 11px;
    border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); transform: translateY(-50%) rotate(45deg);
  }
  .tl--anim .tl__line { transform: scaleX(0); transition: transform 1.4s cubic-bezier(.65, 0, .25, 1); }
  .tl--anim .tl__line::after { opacity: 0; transition: opacity .25s 1.3s; }
  .tl--anim.is-in .tl__line { transform: none; }
  .tl--anim.is-in .tl__line::after { opacity: 1; }
}
.tl--anim .tl__pic--now { opacity: .35; transition: opacity 1.4s ease; }
.tl--anim.is-in .tl__pic--now { opacity: 1; }

/* Coaching timeline, more air (Noah, 13 October 2026): one short line of text, and the middle column
   spread over the height of the photos: COACHING at the top, headline and line in the middle, the
   buttons at the bottom edge of the photos. Phones: more space between the parts. */
.tl__text .prose { max-width: 42ch; margin-bottom: 0; }
.tl__kicker { margin-bottom: 26px; }
.tl__text .t-line, .tl__text #ch-5 { margin-bottom: 18px; }
.tl__text .actions { margin-top: 34px; }
@media (min-width: 900px) {
  .row > .tl__text {
    align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    padding-top: 6px; padding-bottom: calc(var(--tl-y) + 12px);
  }
  .tl__kicker, .tl__text .actions { margin: 0; }
  .tl__mid { margin: 0; }
}

/* Booking steps (Noah, 13 October 2026): a step's sub line can be hidden (step 3 for hours), so
   everything after the floated legend clears it, not only the element right after. */
.bk__step > legend ~ * { clear: both; }

/* Booking step 4, "Pick a week" (Noah, 13 October 2026): the weeks of one month as big buttons
   (week number, dates under it), the month arrows from the old calendar above them. A week Noah is
   away is greyed out and says so. Under it: which days, time of day and a short postcode field. */
.wk { max-width: 560px; }
.wk__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 520px) { .wk__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wk__w {
  display: grid; gap: 3px; justify-items: start; min-height: 62px; padding: 10px 14px; border: 0; border-radius: 0;
  background: var(--mist); color: var(--ink); text-align: left; cursor: pointer; transition: background-color .1s;
}
.wk__w b { font-family: var(--display); font-weight: 800; font-size: 1.05rem; line-height: 1.1; }
.wk__w span { font-size: .85rem; color: var(--muted); }
@media (hover: hover) { .wk__w:not([aria-disabled="true"]):not([aria-pressed="true"]):hover { background: #E2E7EE; } }
.wk__w[aria-pressed="true"] { background: var(--blue); color: #fff; }
.wk__w[aria-pressed="true"] span { color: rgba(255, 255, 255, .85); }
.wk__w[aria-disabled="true"] { background: none; box-shadow: inset 0 0 0 1px var(--line); color: #A0A7B1; cursor: default; }
.wk__w[aria-disabled="true"] span { color: #A0A7B1; }
.wk__w:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--blue); outline-offset: 2px; }
.field--zip input { max-width: 340px; }
.bk textarea#b-days { min-height: 0; }

/* Booking step 5 (Noah, 13 October 2026): the country code as a short menu in front of the mobile number */
.tel { display: flex; gap: 6px; }
.tel select { flex: 0 0 auto; width: 128px; padding-left: 10px; }
.tel input { flex: 1 1 auto; min-width: 0; }

/* "Thanks, ... sent." after every form (booking, review, partnership, abroad) in green, with a tick
   (Noah, 13 October 2026). The green is dark enough for text on white. */
:root { --green: #0B7F45; }
.done { border-top-color: var(--green); }
.done h3 { color: var(--green); }
.done h3::before {
  content: "✓"; display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin-right: .4em;
  border-radius: 50%; background: var(--green); color: #fff; font-size: .62em; font-weight: 800; vertical-align: .22em;
}
.done__more { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--rule); }
.done__more > span { color: var(--muted); }
.rv-sec { scroll-margin-top: calc(var(--header-h) + 8px); }

/* Booking step 1 (Noah, 13 October 2026): three choices, each a name with a few quiet words to the
   right ("1–3 hours", "5 sessions", "2 days"), so the three rows read as one list. */
.choice__tag { flex: none; margin-left: 12px; font-size: .92rem; color: var(--muted); white-space: nowrap; }

/* Week picker: a week Noah is away has a red line across it and says why (Noah, 14 October 2026) */
:root { --red: #C62828; }
.wk__w.is-away { position: relative; overflow: hidden; cursor: not-allowed; }
.wk__w.is-away::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--red) calc(50% - 1px), var(--red) calc(50% + 1px), transparent calc(50% + 1px));
}
.wk__w.is-away[aria-disabled="true"] { box-shadow: inset 0 0 0 1px #E8B4B4; }
.wk__w.is-away b { color: #8A9099; }
.wk__w.is-away span { color: var(--red); font-weight: 600; }

/* Booking confirmation, lighter (Noah, 14 October 2026): "I reply / We plan / You pay" as three short
   numbered lines with a thin rule between them, instead of three boxes. */
.done .dl--steps { display: block; margin-top: 16px; border-top: 1px solid var(--rule); border-bottom: 0; counter-reset: step; }
.done .dl--steps > div {
  display: grid; grid-template-columns: 1.4em minmax(0, 1fr); gap: 2px 10px; align-items: baseline;
  padding: 12px 0; border: 0; border-bottom: 1px solid var(--rule); background: none; counter-increment: step;
}
.done .dl--steps > div::before { content: counter(step); grid-row: 1 / span 2; font-family: var(--display); font-weight: 800; color: var(--green); }
.done .dl--steps dt { margin: 0; font-size: 1rem; }
.done .dl--steps dd { grid-column: 2; font-size: .95rem; color: var(--muted); }
.done .dl--steps dd strong { color: var(--ink); white-space: nowrap; }
@media (min-width: 640px) {
  .done .dl--steps > div { grid-template-columns: 1.4em 8em minmax(0, 1fr); }
  .done .dl--steps > div::before { grid-row: auto; }
  .done .dl--steps dd { grid-column: 3; }
}

/* Reviews, third version (Noah, 14 October 2026): a dark band with a big heading, the video review on
   the left and the three best written reviews stacked beside it (data-max="3"), "See all reviews" in
   the middle under them. The video and the cards rise into place one after the other on scroll, and
   a card slides a little on hover. reviews.html (.rva) lists every review on white.
   Replaces .rv2 / .rv-cards / .rv-wall above. */
.rv3 { padding-block: clamp(56px, 8vw, 104px); }
.rv3 + section, .rv3 + section[hidden] + section { padding-top: clamp(56px, 8vw, 104px) !important; }
.rv3__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px;
  padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--rule-dark);
}
.rv3__head .label { margin: 0 0 12px; }
.rv3__h, .rva__h {
  margin: 0; font-family: var(--display); font-stretch: 75%; font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.6rem, 7.4vw, 5.6rem); line-height: .9; letter-spacing: -.005em;
}
.rv3__grid, .rva__grid { display: grid; gap: 16px; }
.rv3 .rv-video, .rva .rv-video {
  margin: 0; width: 100%; max-width: 320px; justify-self: center; position: static; grid-column: auto; grid-row: auto; display: block;
}
.rv3 .rv-video video, .rva .rv-video video { position: static; display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; }
.rv3 .rv-video figcaption, .rva .rv-video figcaption {
  position: static; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 0 0; background: none; pointer-events: auto;
}
.rv3 .rv-video figcaption { color: #fff; }
.rva .rv-video figcaption { color: var(--ink); }
.rva .rv-video figcaption .label { color: var(--muted); }
.rv3__cards { display: grid; gap: 12px; }
@media (min-width: 900px) {
  .rv3__grid { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; align-items: stretch; }
  .rv3 .rv-video { max-width: none; justify-self: stretch; }
  .rv3__cards { grid-auto-rows: 1fr; align-content: stretch; padding-bottom: 34px; } /* level with the video, above its caption */
}
.rv3 .rv-card {
  aspect-ratio: auto; min-height: 0; margin: 0; padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; gap: 10px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--rule-dark); color: #fff; text-decoration: none;
}
.rv3 .rv-card blockquote { flex: none; margin: 0; }
.rv3 .rv-card blockquote p { font-size: clamp(1.05rem, 1.55vw, 1.35rem); font-weight: 600; line-height: 1.35; }
.rv3 .rv-card figcaption, .rva .rv-card figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.rv3 .rv-stars { color: #fff; }
.rv3 .rv-stars__off { color: rgba(255, 255, 255, .25); }
@media (hover: hover) {
  .rv3 .rv-card, .rva .rv-card { transition: transform .25s, border-color .25s, background-color .25s; }
  .rv3 .rv-card:hover { transform: translateX(6px); border-color: var(--blue); background: rgba(255, 255, 255, .09); }
  .rva .rv-card:hover { transform: translateY(-4px); border-color: var(--ink); }
}
.rv3__all { margin: 28px 0 0; text-align: center; }
.rv3__all .go { font-size: 1.05rem; }
/* the invitation while there are no written reviews */
.rv-card--ask { align-items: flex-start; justify-content: center; }
.rv3 .rv-card--ask { border-style: dashed; border-color: rgba(255, 255, 255, .4); background: none; }
.rv-ask__t { font-family: var(--display); font-stretch: 85%; font-weight: 700; font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.2; }
.rv-ask__go { font-weight: 700; text-decoration: underline; text-underline-offset: .3em; text-decoration-color: var(--blue); }
.rv3 .rv-plus { color: #fff; }
/* example cards: local preview only */
.rv-sample { align-self: flex-start; padding: 3px 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: #FFE08A; color: #3A2E00; }
.rv-card--sample { border-style: dashed !important; }
/* rise into place */
.rv-anim .rv-video, .rv-anim .rv-card { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 130ms); }
.rv-anim.is-in .rv-video, .rv-anim.is-in .rv-card { opacity: 1; transform: none; }
.rv-anim.is-in .rv-card:hover { transition-delay: 0s; }

/* reviews.html: every review */
.rva__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; padding-bottom: 28px; margin-bottom: 32px; border-bottom: 1px solid var(--ink); }
.rva__head .label { margin: 0 0 12px; }
.rva__head .lede { margin: 18px 0 0; max-width: 34ch; }
.rva__cards { display: grid; gap: 12px; align-content: start; }
.rva .rv-card { aspect-ratio: auto; min-height: 0; margin: 0; padding: 22px 24px; gap: 12px; text-decoration: none; color: var(--ink); }
.rva .rv-card blockquote p { font-size: 1.08rem; line-height: 1.45; }
@media (min-width: 900px) {
  .rva__grid { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; align-items: start; }
  .rva .rv-video { max-width: none; justify-self: stretch; position: sticky; top: calc(var(--header-h) + 16px); }
}
@media (min-width: 1100px) { .rva__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Reviews band: the video and the three cards start and end on the same lines (Noah, 14 October 2026).
   The name sits on the video instead of under it, and the cards share the video's height. */
.rv3 .rv-video { position: relative; display: grid; }
.rv3 .rv-video video { width: 100%; height: 100%; }
.rv3 .rv-video figcaption {
  position: absolute; left: 0; right: 0; top: 0; padding: 14px 16px 30px; color: #fff; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 11, 12, .65), rgba(11, 11, 12, 0));
}
@media (min-width: 900px) { .rv3__cards { padding-bottom: 0; } }

/* Front page, the last block before the footer (Noah, 14 October 2026): "Follow my journey" and
   "Supported by" as two quiet lines: a small label on the left, the three platforms (icon and name,
   no boxes) and the three logos on the right, a thin rule between them. */
.outro { padding-block: clamp(40px, 6vw, 72px); }
.outro__row { display: grid; gap: 16px 32px; align-items: center; padding-block: 26px; border-top: 1px solid var(--rule); }
.outro__row:last-child { border-bottom: 1px solid var(--rule); }
.outro__row .label { margin: 0; }
@media (min-width: 760px) { .outro__row { grid-template-columns: 200px minmax(0, 1fr); } }
.outro__social { display: flex; flex-wrap: wrap; gap: 14px 36px; }
.outro__social a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none;
  font-family: var(--display); font-stretch: 85%; font-weight: 750; font-size: 1.12rem;
}
.outro__social .sico { width: 28px; height: 28px; display: block; flex: none; transition: transform .2s; }
.outro__social a:hover { color: var(--blue-dark); }
.outro__social a:hover .sico { transform: scale(1.12); }
.outro .rides { margin: 0; gap: 16px 44px; }
.outro .rides img { max-height: 40px; }

/* Footer, cleaned (Noah, 14 October 2026): three short columns, the © line with Privacy, and the big
   name. The intro line, the second menu, the photo credits and the "made by" line are gone. */
.ft__cols { padding-top: 0; }
@media (max-width: 759px) { .ft__cols { padding-top: 0; } }

/* Coaching page rebuilt (Noah, 14 October 2026): a calm hero with one photo, "Three ways to train" as
   three ruled columns (number, name, one line, duration, Book coaching), a full-width photo, "How it
   works" as three numbered steps, then Practical, Your coach, the reviews band and one booking call. */
.co-hero .split { align-items: center; }
.co-hero .split h1 { font-size: clamp(2.5rem, 5.6vw, 5rem); margin: 16px 0 22px; }
.co-hero .lede { max-width: 34ch; }
.co-hero .actions { gap: 14px 28px; }
@media (min-width: 900px) { .co-hero .split__fig.fig--tall img { aspect-ratio: 4 / 5; } }
.ways__head { margin-bottom: clamp(28px, 4vw, 48px); }
.ways__head .label { margin: 0 0 12px; }
.ways__h { margin: 0; font-family: var(--display); font-stretch: 75%; font-weight: 900; text-transform: uppercase; font-size: clamp(2.2rem, 5.4vw, 4.2rem); line-height: .92; letter-spacing: -.005em; }
.ways { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px 28px; }
@media (min-width: 820px) { .ways { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.way { display: flex; flex-direction: column; align-items: flex-start; padding-top: 20px; border-top: 2px solid var(--ink); }
.way__n { margin: 0 0 22px; font-family: var(--display); font-weight: 700; font-size: .95rem; color: var(--muted); }
.way__name { margin: 0 0 12px; font-family: var(--display); font-stretch: 85%; font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.05; letter-spacing: -.012em; }
.way__desc { margin: 0 0 18px; max-width: 32ch; color: var(--ink); }
.way__meta { margin: auto 0 22px; padding-top: 4px; color: var(--muted); }
.way .btn { margin-top: 0; }
.steps3 { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
@media (min-width: 820px) { .steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
.steps3 li { padding-top: 18px; border-top: 1px solid var(--rule); }
.steps3 b { display: block; margin-bottom: 14px; font-family: var(--display); font-stretch: 75%; font-weight: 900; font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: .9; color: var(--blue); }
.steps3 h3 { margin: 0 0 8px; font-family: var(--display); font-stretch: 85%; font-weight: 800; font-size: 1.3rem; letter-spacing: -.01em; }
.steps3 p { margin: 0; max-width: 34ch; color: var(--muted); }
.cta { display: grid; gap: 24px; justify-items: center; text-align: center; padding-block: clamp(8px, 2vw, 24px); }
.cta .bk__start { display: grid; gap: 12px; justify-items: center; margin: 0; }
.cta .bk__start[hidden] { display: none; }
.cta .bk__start .muted { margin: 0; }

/* Coaching page fine-tuning (Noah, 14 October 2026): the headline a little smaller and level with the
   top of the photo, the intro smaller and wider so it reads as two or three calm lines; in "Your coach"
   the text starts at the top of the photo. */
.co-hero .split { align-items: start; }
.co-hero .split h1 { font-size: clamp(2.3rem, 4.7vw, 4.2rem); margin: -.06em 0 22px; }
.co-hero .lede { max-width: 60ch; font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.5; margin-bottom: 30px; }
@media (min-width: 900px) { .co-hero .split__text { grid-column: 1 / 8; } }
@media (min-width: 640px) { .row__v.coach { align-items: start; } .row__v.coach > div > .t-mid:first-child { margin-top: -.08em; } }

/* Coaching hero, no white hole (Noah, 14 October 2026): a second photo sits under the text and ends on
   the same line as the tall photo, so the two columns close as one block. Both photos settle into
   place when the page opens (a slow zoom-out behind a rising edge) and zoom slightly on hover.
   Practical: three plain ruled columns instead of white boxes, like "Three simple steps". */
.co-hero .fig { overflow: hidden; }
.co-hero__more { margin: 36px 0 0; }
.co-hero__more img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; object-position: var(--pos, 50% 50%); }
@media (min-width: 900px) {
  .co-hero .split { align-items: stretch; }
  .co-hero .split__text { display: flex; flex-direction: column; padding-bottom: 0; }
  .co-hero__more { flex: 1 1 0; min-height: 200px; position: relative; margin-top: 44px; }
  .co-hero__more img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
}
@media (hover: hover) {
  .co-hero .fig img { transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
  .co-hero .fig:hover img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: no-preference) {
  .co-hero .fig { animation: co-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .co-hero .fig img { animation: co-settle 1.4s cubic-bezier(.2, .7, .2, 1) both; }
  .co-hero .split__fig, .co-hero .split__fig img { animation-delay: .12s; }
  .co-hero__more, .co-hero__more img { animation-delay: .3s; }
  .co-hero h1, .co-hero .lede, .co-hero .actions { animation: co-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .co-hero .lede { animation-delay: .08s; }
  .co-hero .actions { animation-delay: .16s; }
}
@keyframes co-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes co-settle { from { transform: scale(1.12); } to { transform: scale(1); } }
.dl.dl--plain > div, .row__v > .dl.dl--plain > div, .row__v > .dl.dl--plain > div:not([hidden]) ~ div {
  background: none; border: 0; border-top: 1px solid var(--rule); padding: 16px 0 0;
}
.dl.dl--plain { gap: 24px 28px; }

/* Achievements page (Noah, 14 October 2026): "Goals" as a timeline from this year to the world title.
   Desktop: five points on one line, the line fills from the left up to "now" when it scrolls into view
   and the last point (the goal) is blue. Phones: the same line turned upright on the left. */
.res__more { margin: 20px 0 0; }
.goals__lede { margin: 18px 0 0; max-width: 52ch; font-size: clamp(1.05rem, 1.35vw, 1.25rem); }
.gl { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 0; }
.gl__i { position: relative; padding: 0 0 30px 34px; }
.gl__i:last-child { padding-bottom: 0; }
.gl__i::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: -10px; width: 2px; background: var(--line); }
.gl__i:last-child::before { display: none; }
.gl__i::after { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--field); }
.gl__i.is-now::after { background: var(--ink); box-shadow: none; }
.gl__i.is-goal::after { background: var(--blue); box-shadow: 0 0 0 5px rgba(10, 92, 255, .18); }
.gl__y { margin: 0 0 6px; font-family: var(--display); font-stretch: 75%; font-weight: 900; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1; }
.gl__i h3 { margin: 0 0 6px; font-family: var(--display); font-stretch: 85%; font-weight: 800; font-size: 1.2rem; line-height: 1.15; letter-spacing: -.01em; }
.gl__i p:last-child { margin: 0; color: var(--muted); max-width: 30ch; }
.gl__i.is-goal .gl__y, .gl__i.is-goal h3 { color: var(--blue-dark); }
@media (min-width: 900px) {
  .gl { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 24px; padding-top: 34px; }
  .gl::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--line); }
  .gl::after { content: ""; position: absolute; left: 0; top: 6px; height: 2px; width: 7px; background: var(--ink); }
  .gl__i { padding: 0; }
  .gl__i::before { display: none; }
  .gl__i::after { top: -34px; }
  .gl.gl--anim .gl__i { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 140ms); }
  .gl.gl--anim.is-in .gl__i { opacity: 1; transform: none; }
  .gl.gl--anim .gl__i.is-goal::after { transition: box-shadow .6s ease 1s; box-shadow: 0 0 0 0 rgba(10, 92, 255, 0); }
  .gl.gl--anim.is-in .gl__i.is-goal::after { box-shadow: 0 0 0 7px rgba(10, 92, 255, .2); }
}

/* Achievements, second pass (Noah, 14 October 2026): 2028, 2029 and 2030 are one stretch on the goals
   line, the three seasons he goes for the world title: three blue points joined by a blue line, one
   heading under them. A "See all results" button under the Senior list opens results.html, which
   lists every result year by year in the same ruled rows. */
.res__more { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 26px; }
.gl__dots { display: none; }
.gl__i--span .gl__y { display: flex; flex-wrap: wrap; gap: 0 .35em; }
.gl__i--span .gl__y span + span::before { content: "· "; color: var(--muted); }
.gl__i--span h3 { font-size: 1.35rem; }
.gl__i--span p:last-child { max-width: 38ch; }
@media (min-width: 900px) {
  .gl__i--span { grid-column: span 3; }
  .gl__i--span::after { display: none; }
  .gl .gl__i.gl__i--span::before { display: block; content: ""; position: absolute; left: 0; right: 0; top: -28px; bottom: auto; width: auto; height: 2px; background: var(--blue); }
  .gl__dots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; position: absolute; left: 0; right: 0; top: -34px; }
  .gl__dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px rgba(10, 92, 255, .18); }
  .gl__i--span .gl__y { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
  .gl__i--span .gl__y span + span::before { content: none; }
  .gl.gl--anim .gl__dots i { transform: scale(0); transition: transform .45s cubic-bezier(.2, 1.4, .4, 1); }
  .gl.gl--anim .gl__dots i:nth-child(1) { transition-delay: .7s; }
  .gl.gl--anim .gl__dots i:nth-child(2) { transition-delay: .9s; }
  .gl.gl--anim .gl__dots i:nth-child(3) { transition-delay: 1.1s; }
  .gl.gl--anim.is-in .gl__dots i { transform: none; }
  .gl.gl--anim .gl__i.gl__i--span::before { transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.65, 0, .25, 1) .6s; }
  .gl.gl--anim.is-in .gl__i.gl__i--span::before { transform: none; }
}
.allres .rva__head { align-items: flex-end; }
.allres__y { border-top-color: var(--rule); }
.allres__y > .row__k { margin: 0; padding-top: 0; font-family: var(--display); font-stretch: 75%; font-weight: 900; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1; color: var(--ink); }
@media (max-width: 899px) { .allres__y > .row__k { margin-bottom: 14px; } }
.allres__more { margin: 40px 0 0; }
/* Achievements: the goals come first, right under the photo; links from other pages land on them */
.goals { scroll-margin-top: var(--header-h); }
.goals + .chapter.u21 { padding-top: 0; }

/* All results: on phones the place name goes under the event, so a long one (Sankt Peter-Ording)
   does not squeeze the event name (Noah, 14 October 2026) */
@media (max-width: 699px) {
  .allres .res li { grid-template-columns: 3.6rem minmax(0, 1fr); row-gap: 4px; }
  .allres .res small { grid-column: 2; }
}

/* About me / My story, rebuilt (Noah, 14 October 2026): a calm hero with three facts, then the story
   in chapters. Each chapter: a big year and a photo on the left, the heading and text on the right,
   a thin rule between chapters. Chapters rise into place on scroll ([data-reveal], main.js). It ends
   in a dark band that points to the goals on the Achievements page. */
.st-hero .split { align-items: start; }
.st-hero .split h1 { font-family: var(--display); font-stretch: 75%; font-weight: 900; text-transform: uppercase; font-size: clamp(3.4rem, 9vw, 8rem); line-height: .86; letter-spacing: -.005em; margin: 14px 0 26px; }
.st-hero .lede { max-width: 44ch; margin-bottom: 0; }
.st-hero .split__text { display: flex; flex-direction: column; }
@media (min-width: 900px) { .st-hero .split { align-items: stretch; } .st-hero .split__fig.fig--tall img { aspect-ratio: 4 / 5; } }
.st-facts { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; border-top: 2px solid var(--ink); }
@media (min-width: 900px) { .st-facts { margin-top: auto; } }
.st-facts li { padding-top: 14px; }
.st-facts b { display: block; font-family: var(--display); font-stretch: 75%; font-weight: 900; font-size: clamp(1.8rem, 3.2vw, 2.8rem); line-height: 1; }
.st-facts span { display: block; margin-top: 6px; font-size: .9rem; color: var(--muted); }
.st { padding-top: clamp(40px, 6vw, 88px); }
.st-ch__in { display: grid; gap: 20px 40px; padding-block: clamp(36px, 5vw, 72px); border-top: 1px solid var(--rule); }
.st-ch:first-child .st-ch__in { border-top-color: var(--ink); }
.st-ch__y { margin: 0 0 18px; font-family: var(--display); font-stretch: 75%; font-weight: 900; text-transform: uppercase; font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: .9; letter-spacing: -.005em; }
.st-ch__side .fig img { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; object-position: var(--pos, 50% 50%); }
.st-ch__text h2 { margin: 0 0 20px; font-family: var(--display); font-stretch: 85%; font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.05; letter-spacing: -.012em; max-width: 18ch; }
.st-ch__text p { margin: 0 0 1.1em; max-width: 60ch; font-size: clamp(1.02rem, 1.25vw, 1.15rem); line-height: 1.65; }
.st-ch__text .actions { margin-top: 28px; }
@media (max-width: 899px) { .st-ch__side .fig { max-width: 420px; } .st-ch__side { display: contents; } .st-ch__y { order: 1; margin-bottom: 0; } .st-ch__text { order: 2; } .st-ch__side .fig { order: 3; } }
@media (min-width: 900px) {
  .st-ch__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .st-ch__side { grid-column: 1 / 5; }
  .st-ch__text { grid-column: 6 / 13; padding-top: clamp(3.2rem, 6vw, 5.4rem); }
  .st-ch:nth-child(even) .st-ch__side { grid-column: 9 / 13; grid-row: 1; text-align: right; }
  .st-ch:nth-child(even) .st-ch__text { grid-column: 1 / 8; grid-row: 1; }
}
[data-reveal].rv-on { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
[data-reveal].rv-on.is-in { opacity: 1; transform: none; }
.st-next { margin-top: clamp(24px, 4vw, 56px); padding-block: clamp(64px, 9vw, 120px); text-align: center; }
.st-next .label { margin: 0 0 14px; }
.st-next__h { margin: 0 0 18px; font-family: var(--display); font-stretch: 75%; font-weight: 900; text-transform: uppercase; font-size: clamp(3rem, 9vw, 7.5rem); line-height: .88; }
.st-next__p { margin: 0 auto 30px; max-width: 46ch; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: rgba(255, 255, 255, .82); }
.st-next { border-bottom: 1px solid var(--rule-dark); }

/* About me: a quiet box where a photo is still to come (Noah picks them himself) */
.st-ph { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 5; padding: 16px; background: var(--mist); border: 1px dashed var(--field); color: var(--muted); text-align: center; }
.st-ph span { font-family: var(--display); font-stretch: 125%; font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

/* Partners page rebuilt (Noah, 14 October 2026): the partners as three tall cards under a big heading
   (logo, name, "Visit"), two photos, a dark "Work with me." band with one button, and a short contact
   form. The lists of sponsorship types, the credentials and the old photo pair are gone. */
.pt-now #partner-rows { display: grid; gap: 12px; }
@media (min-width: 760px) { .pt-now #partner-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pt-now .prow, .pt-now .row.prow {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin: 0; padding: 28px 28px 24px;
  border: 1px solid var(--rule); border-top: 2px solid var(--ink); background: var(--paper);
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.pt-now .prow__logo { width: 100%; height: clamp(120px, 14vw, 170px); display: grid; place-items: center; padding: 0; margin: 0 0 22px; }
.pt-now .prow__logo img { width: auto; height: auto; max-width: 78%; max-height: 100%; object-fit: contain; }
.pt-now .prow .row__v { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px solid var(--rule); }
.pt-now .prow h3 { margin: 0; font-family: var(--display); font-stretch: 85%; font-weight: 800; font-size: 1.2rem; line-height: 1.15; }
.pt-now .prow .go { padding: 0; white-space: nowrap; }
.pt-now .prow .prose { display: none; }
@media (hover: hover) { .pt-now .prow:hover { transform: translateY(-6px); border-color: var(--ink); box-shadow: 0 18px 40px -24px rgba(11, 11, 12, .45); } }
.pt-pics { margin-block: 0 clamp(56px, 8vw, 104px); }
.pt-pics .fig--wide img { aspect-ratio: 3 / 2; height: auto; }
.pt-work { padding-block: clamp(64px, 9vw, 128px); }
.pt-work__in { display: grid; gap: 28px 48px; }
@media (min-width: 900px) { .pt-work__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
.pt-work .label { margin: 0 0 14px; }
.pt-work__h { margin: 0; font-family: var(--display); font-stretch: 75%; font-weight: 900; text-transform: uppercase; font-size: clamp(3.2rem, 8.4vw, 7rem); line-height: .86; }
.pt-work__text .lede { margin: 0 0 18px; }
.pt-work__text p { margin: 0 0 18px; max-width: 52ch; color: rgba(255, 255, 255, .84); }
.pt-work__text .lede { color: #fff; }
.pt-work__goal { padding-top: 18px; border-top: 1px solid var(--rule-dark); }
.pt-work__text .btn { margin-top: 12px; }
.pt-form { scroll-margin-top: var(--header-h); }
.pt-form__f { max-width: 760px; }
.pt-form__mail { margin: 32px 0 0; }

/* Partners, "Work with me." band: the social links under the intro (Noah, 14 October 2026) */
.pt-work__links { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 12px; }
.pt-work__links a { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; color: #fff; font-family: var(--display); font-weight: 750; font-size: 1.1rem; text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: .3em; }
.pt-work__links a:hover { text-decoration-thickness: 2px; }
.pt-work__links a:hover .arr { transform: translate(3px, -3px); }

/* Contact page, cleaned (Noah, 14 October 2026): headline and one line beside the portrait, then two
   ruled columns (questions -> email and Book coaching; partners and sponsors -> the partner form) and
   the quiet Follow line. The four boxes are gone. */
.ct-hero .split { align-items: center; }
.ct-hero .split h1 { font-family: var(--display); font-stretch: 75%; font-weight: 900; text-transform: uppercase; font-size: clamp(2.8rem, 7vw, 6rem); line-height: .88; letter-spacing: -.005em; margin: 14px 0 24px; max-width: 9ch; }
.ct-hero .lede { max-width: 36ch; margin: 0; }
@media (min-width: 820px) { .ct__ways { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; } }
.ct .way__desc { max-width: 42ch; margin-bottom: 14px; }
.ct__mail { margin: auto 0 20px; padding-top: 4px; min-height: 44px; display: flex; align-items: center; }
.ct__mail .go { padding-block: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
@media (max-width: 819px) { .ct__mail[aria-hidden="true"] { display: none; } }

/* Achievements page (Noah, 14 October 2026): the headline is now "Achievements" instead of "Racing".
   It is a long word, so on phones it gets a size that fits the screen instead of being cut off. */
.t-title--long { font-size: min(17.5vw, 168px); }

/* Front page facts band, second try (Noah, 15 October 2026): instead of a block of text, one big line
   "Book me as your coach." in the heading style, a short quiet line under it, and the button beside. */
.facts__cta { margin: 0 0 12px; font-family: var(--display); font-stretch: 75%; font-weight: 900; text-transform: uppercase; font-size: clamp(2.2rem, 5.2vw, 4.4rem); line-height: .9; letter-spacing: -.005em; }
.facts__sub { margin: 0; max-width: 90ch; }
.facts__sub span { opacity: .72; }
.facts__sub strong { font-weight: 600; }

/* NV Academy sign-up (Noah, 17 October 2026): the planned camps as two boxes with a small photo.
   The radio sits hidden inside each box; the chosen box gets the blue frame. */
.campcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.campcard { position: relative; display: flex; flex-direction: column; border: 1px solid var(--field); background: var(--paper, #fff); overflow: hidden; }
.campcard input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.campcard img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 30%; }
.campcard__txt { display: grid; gap: 4px; padding: 12px 14px 14px; }
.campcard__name { font-weight: 700; }
.campcard__when { font-size: 14px; color: var(--muted); }
.campcard:has(input:checked) { outline: 2px solid var(--blue, #0B57FF); outline-offset: -2px; }
.campcard:has(input:focus-visible) { outline: 3px solid var(--blue, #0B57FF); outline-offset: 2px; }

/* Booking pop-up background (Noah, 17 October 2026): instead of plain white, a calm sea. The top stays
   white behind the questions and fades into pale blue, with three soft waves along the bottom. Drawn
   with CSS and a tiny SVG, so it is sharp on every screen (the photo try-out was too busy). */
.bkm { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath d='M0 170 C 240 120 480 220 720 170 S 1200 120 1440 170 V400 H0Z' fill='%230A5CFF' fill-opacity='.05'/%3E%3Cpath d='M0 240 C 260 200 520 290 780 240 S 1240 200 1440 245 V400 H0Z' fill='%230A5CFF' fill-opacity='.06'/%3E%3Cpath d='M0 310 C 300 280 560 350 860 310 S 1280 285 1440 315 V400 H0Z' fill='%230A5CFF' fill-opacity='.07'/%3E%3C/svg%3E") left bottom / 100% 260px no-repeat, linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 35%, #F2F8FC 70%, #E4F0F8 100%); }
.bkm__foot { background: rgba(255, 255, 255, .82); }

/* Booking step 4 as a day calendar (Noah, 17 October 2026): every day of the month; red = Noah is
   away, grey = booked, too soon or out of season; up to 3 days can be picked. */
.cal__day.is-away[aria-disabled="true"] { background: #FDECEC; color: var(--red, #C62828); text-decoration: line-through; }
.cal__key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; font-size: .82rem; color: var(--muted); }
.cal__key span { display: inline-flex; align-items: center; gap: 8px; }
.cal__key span::before { content: ""; width: 14px; height: 14px; border-radius: 3px; }
.cal__key-away::before { background: #FDECEC; border: 1px solid #F3B9B9; }
.cal__key-off::before { background: #fff; border: 1px solid var(--line); }

/* Short notice days in the booking calendar (Noah, 17 October 2026): tomorrow and the day after can be
   picked, but show yellow, and a yellow note says Noah can't promise them. */
.cal__day.is-short:not([aria-pressed="true"]) { background: #FFF4DB; }
.cal__key-short::before { background: #FFF4DB; border: 1px solid #F0D08A; }
.cal__info { margin: 12px 0 0; padding: 10px 12px; background: #FFF4DB; color: #6B4A00; font-size: .88rem; }
.cal__info[hidden] { display: none; }

/* The booking calendar as one framed card (Noah, 17 October 2026): month, weekdays, days, key and
   the picked days sit together in a white box with a thin frame, instead of loose on the page. */
.bkm .cal { max-width: none; padding: 14px 16px 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(10, 30, 60, .06); }
.bkm .cal__head { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.bkm .cal__key { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 640px) { .bkm .cal { padding: 12px 10px 14px; } }
/* "Which days suit you?" repeats the step title: kept for screen readers only. */
.bkm #bk-dates-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Coaching page top, rebuilt (Noah, 17 October 2026): the headline and the offer first, then one tidy
   row of four photos the same size (on the water, teaching, video analysis, camp) instead of two
   photos stacked. Phones: text, buttons, then the photos two by two. */
.co-hero--grid { padding-bottom: 8px; }
.co-hero__top { display: grid; gap: 18px 56px; }
.co-hero--grid h1 { margin: 0; font-size: clamp(2.5rem, 6vw, 5.2rem); line-height: .95; }
.co-hero--grid .lede { margin: 0 0 26px; max-width: 46ch; }
@media (min-width: 900px) {
  .co-hero__top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
  .co-hero--grid h1 { max-width: 11ch; }
}
.co-hero__pics { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .co-hero__pics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 56px; } }
.co-hero__pics .fig { margin: 0; overflow: hidden; }
.co-hero__pics img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .co-hero__pics .fig:nth-child(2) { animation-delay: .08s; }
  .co-hero__pics .fig:nth-child(3) { animation-delay: .16s; }
  .co-hero__pics .fig:nth-child(4) { animation-delay: .24s; }
}

/* Noah Vinther Academy (Noah, 17 October 2026): the umbrella name for all coaching, shown as a small
   label above the Coaching headline. The camp is now "NV Academy". */
.co-hero__brand { margin: 0 0 14px; color: var(--blue); }

/* "The calendar goes 3 months ahead" line under the key (Noah, 17 October 2026). */
.cal__ahead { margin: 8px 0 0; font-size: .82rem; color: var(--muted); }

/* Coaching abroad days in the booking calendar (Noah, 17 October 2026: Tenerife): light blue instead of
   red; tapping one switches the form to that place. */
.cal__day.is-abroad[aria-disabled="true"] { background: #E3EEFF; color: var(--blue); cursor: pointer; font-weight: 600; }
@media (hover: hover) { .cal__day.is-abroad[aria-disabled="true"]:hover { background: #CFE0FF; } }
.cal__key-abroad::before { background: #E3EEFF; border: 1px solid #A9C6FF; }

/* The calendar's season note at the top (Noah, 20 October 2026: "too cold in Denmark"). */
.cal__banner { margin: 0 0 12px; padding: 10px 12px; background: #FDECEC; color: #8E1F1F; font-size: .88rem; line-height: 1.45; }
.cal__banner[hidden] { display: none; }

/* Camp recap films on the Coaching page (Noah, 20 October 2026): a dark band right after "Three ways
   to train", with the text and a "Save your spot" button beside two upright videos from the 2026
   camps. The films only load when pressed (preload none), so the page stays fast. */
.co-recap { background: var(--ink); color: #fff; }
.co-recap .label { color: rgba(255, 255, 255, .62); }
.co-recap__grid { display: grid; gap: 28px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.co-recap__text { grid-column: 1 / -1; }
.co-recap__text p:not(.label) { max-width: 46ch; margin: 0 0 24px; color: rgba(255, 255, 255, .82); }
.co-recap .ways__h { color: #fff; margin: 10px 0 18px; }
.co-recap__v { margin: 0; }
.co-recap__v video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; background: #000; }
.co-recap__v figcaption { margin-top: 10px; }
@media (min-width: 900px) {
  .co-recap__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr); gap: 24px; }
  .co-recap__text { grid-column: auto; align-self: center; padding-right: 32px; }
}

/* Coaching page, calmer order (Noah, 20 October 2026): top = headline, one line, button and ONE photo;
   then "Your coach" (who you train with) with three facts; then the offers, the camp films, how it
   works with "Good to know" under it, reviews and booking. The four-photo row is gone. */
.co-hero2__grid { display: grid; gap: 32px 64px; align-items: center; }
.co-hero2 h1 { margin: 12px 0 22px; font-size: clamp(2.5rem, 6vw, 5.2rem); line-height: .95; max-width: 11ch; }
.co-hero2 .lede { max-width: 42ch; margin: 0 0 28px; }
.co-hero2__fig { margin: 0; overflow: hidden; }
.co-hero2__fig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 900px) {
  .co-hero2__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .co-hero2__fig img { max-height: 74vh; }
}
.co-coach { border-top: 1px solid var(--rule); }
.co-coach__grid { display: grid; gap: 28px 64px; align-items: center; }
.co-coach__fig { margin: 0; overflow: hidden; }
.co-coach__fig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.co-coach__big { margin: 12px 0 20px; font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1.1; letter-spacing: -.01em; max-width: 22ch; }
.co-coach__text p:not(.label):not(.co-coach__big) { max-width: 52ch; }
.co-facts { list-style: none; margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.co-facts b { display: block; font-family: var(--display); font-stretch: 75%; font-weight: 900; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; }
.co-facts span { display: block; margin-top: 6px; font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 900px) { .co-coach__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.co-good { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--rule); display: grid; gap: 16px 48px; }
.co-good .label { margin: 0; }
@media (min-width: 900px) { .co-good { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); } }

/* "NV Academy works a little differently" under the three steps (Noah, 20 October 2026). */
.co-campnote { margin: 28px 0 0; max-width: 70ch; color: var(--muted); }
.co-campnote strong { color: var(--ink); }

/* Front page, coaching first (Noah, 20 October 2026): the coaching block comes straight after the
   facts band and is bigger and cleaner: one photo, the headline, one line and the three ways to train
   as a short list, then the buttons. "I grew up watching my dad windsurf" follows, a little smaller.
   (The 2016/2026 timeline with two photos is gone.) */
.hc__grid { display: grid; gap: 32px 72px; align-items: center; }
.hc__fig { margin: 0; overflow: hidden; }
.hc__fig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.hc__h { margin: 12px 0 18px; font-family: var(--display); font-stretch: 75%; font-weight: 900; text-transform: uppercase; font-size: clamp(2.4rem, 5.2vw, 4.6rem); line-height: .9; letter-spacing: -.005em; }
.hc__h span { display: block; }
.hc__lede { max-width: 42ch; margin: 0 0 28px; font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.5; }
.hc__list { list-style: none; margin: 0 0 32px; padding: 0; border-top: 1px solid var(--rule); }
.hc__list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.hc__list b { font-family: var(--display); font-weight: 800; font-size: 1.15rem; }
.hc__list span { color: var(--muted); font-size: .95rem; }
.hc .actions { gap: 14px 28px; align-items: center; }
@media (min-width: 900px) { .hc__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.home-story .t-line { font-size: clamp(1.6rem, 3vw, 2.5rem); }
.home-story .prose p { font-size: 1rem; }

/* "Back" button (Noah, 20 October 2026): on every page but the front page, a small white pill fixed
   just under the header on the left, so it is always easy to find. Hidden while the menu is open. */
.backbtn {
  position: fixed; z-index: 40; top: calc(var(--header-h) + 12px); left: 16px;
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 12px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 999px;
  box-shadow: 0 6px 18px rgba(10, 20, 40, .12);
  font-size: .9rem; font-weight: 700; text-decoration: none;
}
.backbtn span[aria-hidden] { font-size: 1.05rem; line-height: 1; }
.backbtn:hover { color: var(--ink); background: var(--mist); }
.backbtn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (min-width: 960px) { .backbtn { left: 24px; } }
/* Bottom-left on every screen (20 October 2026): at the top it covered headlines while scrolling. */
.backbtn { top: auto; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 959px) { .backbtn { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } }
body.menu-open .backbtn, html.bkm-open .backbtn { display: none; }
@media print { .backbtn { display: none; } }

/* The local-preview badge moves to the bottom-right, so it doesn't hide the Back button (preview only). */
.preview-badge { left: auto !important; right: 12px !important; }

/* Contact page, two clear options (Noah, 20 October 2026): 01 Questions = a light card with a short
   form (name, email, message); 02 Partnerships and sponsors = a dark card with direct emails to Noah
   and to Tanja at Medience Copenhagen, plus a link to the partner form. */
.ct2__grid { display: grid; gap: 20px; align-items: stretch; }
@media (min-width: 960px) { .ct2__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; } }
.ct2__card { display: flex; flex-direction: column; padding: clamp(24px, 3.4vw, 44px); background: var(--mist); border: 1px solid var(--rule); }
.ct2__card--dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.ct2__n { margin: 0 0 10px; font-size: .9rem; color: var(--muted); }
.ct2__card--dark .ct2__n, .ct2__card--dark .label { color: rgba(255, 255, 255, .62); }
.ct2__h { margin: 0 0 12px; font-family: var(--display); font-stretch: 75%; font-weight: 900; text-transform: uppercase; font-size: clamp(2rem, 3.6vw, 3rem); line-height: .95; }
.ct2__lead { margin: 0 0 24px; max-width: 48ch; }
.ct2__card--dark .ct2__lead { color: rgba(255, 255, 255, .82); }
.ct2__form { max-width: none; margin: 0; }
.ct2__form input, .ct2__form textarea { background: #fff; }
.ct2__people { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid rgba(255, 255, 255, .18); }
.ct2__people li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.ct2__people a { color: #fff; font-weight: 700; font-size: 1.1rem; overflow-wrap: anywhere; }
.ct2__more { margin: auto 0 0; padding-top: 20px; }
.ct2__card--dark .ct2__more, .ct2__card--dark .go { color: #fff; }

/* ---------- 20 October 2026: calmer phone version ----------
   Noah found the phone version too loud. On small screens the big headings, numbers and body text
   are scaled down so each screen holds a bit more and feels less busy. Desktop is unchanged. */
@media (max-width: 600px) {
  :root body { font-size: 16px; }
  :root .t-hero { font-size: 22vw; }
  :root .t-title { font-size: 17vw; }
  :root .t-title--long { font-size: 14.5vw; }
  :root .t-line { font-size: 1.65rem; }
  :root .menu nav a { font-size: 2.5rem; }
  :root .facts__cells b { font-size: 1.9rem; }
  :root .facts__cta { font-size: 1.7rem; }
  :root .hc__h { font-size: 1.8rem; }
  :root .rv3__h { font-size: 1.9rem; }
  :root .ft__sign { font-size: 3.2rem; }
  :root .split h1 { font-size: 2.4rem; }
  :root .st-hero .split h1 { font-size: 2.9rem; }
  :root .co-hero2__text h1 { font-size: 2rem; }
  :root .co-coach__big { font-size: 1.35rem; }
  :root .co-facts b, :root .st-facts b { font-size: 1.5rem; }
  :root .ways__h { font-size: 1.75rem; }
  :root .way__name { font-size: 1.3rem; }
  :root .steps3 b.num { font-size: 1.9rem; }
  :root .st-ch__y { font-size: 2rem; }
  :root .st-ch__text h2 { font-size: 1.4rem; }
  :root .st-next__h { font-size: 2.1rem; }
  :root .gl__y { font-size: 1.5rem; }
  :root .ct2__h { font-size: 1.6rem; }
  :root .pt-work__h { font-size: 2.2rem; }
  :root .rva__h { font-size: 2rem; }
  :root .bk__title { font-size: 1.6rem; }
}

/* ---------- 20 October 2026: front page on phones, tidier ----------
   Noah: the facts (U21, 3x, Aarhus) were too loud, the coaching photo too big, and the coaching
   block messy. On phones the facts become one quiet line each, the photo is cropped shorter, and the
   three ways and the "See my coaching" link sit in clean boxes. */
@media (max-width: 600px) {
  :root .facts__cells li { flex-wrap: nowrap; align-items: baseline; gap: 10px; padding: 13px 0; }
  :root .facts__cells b { font-size: 15px; line-height: 1.35; letter-spacing: .02em; font-stretch: 100%; font-weight: 800; }
  :root .facts__say { padding-block: 32px 44px; }

  :root .hc__grid { gap: 24px; }
  :root .hc__fig img { aspect-ratio: 3 / 2; object-position: 50% 35%; }
  :root .hc__h { margin: 10px 0 12px; font-size: 1.6rem; line-height: .95; }
  :root .hc__lede { margin-bottom: 20px; font-size: 1rem; }
  :root .hc__list { display: grid; gap: 8px; margin-bottom: 20px; border-top: 0; }
  :root .hc__list li { display: grid; gap: 2px; padding: 14px 16px; background: var(--mist); border: 1px solid var(--rule); }
  :root .hc__list b { font-size: 1.05rem; }
  :root .hc__list span { font-size: .9rem; }
  :root .hc .actions { display: grid; gap: 8px; }
  :root .hc .actions .btn { justify-content: center; width: 100%; }
  :root .hc .actions .go { display: flex; justify-content: center; gap: 8px; padding: 14px 16px; border: 1px solid var(--ink); }
}

/* ---------- 20 October 2026: phone run-through with Noah (clean, boxes, less noise) ---------- */
/* Front page coaching: "What I offer" as fold-out boxes, on every screen size. */
.hc__k { margin: 0 0 10px; }
.hc__list { display: grid; gap: 8px; margin: 0 0 28px; padding: 0; border-top: 0; }
.hc__item { background: var(--mist); border: 1px solid var(--rule); }
.hc__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; cursor: pointer; list-style: none; }
.hc__item summary::-webkit-details-marker { display: none; }
.hc__item summary b { font-family: var(--display); font-weight: 800; font-size: 1.1rem; }
.hc__item p { margin: 0; padding: 0 18px 18px; color: var(--muted); font-size: .97rem; line-height: 1.5; }
.hc__plus { position: relative; flex: none; width: 14px; height: 14px; }
.hc__plus::before, .hc__plus::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background: currentColor; transition: transform .2s; }
.hc__plus::after { transform: rotate(90deg); }
details[open] > summary .hc__plus::after { transform: rotate(0deg); }

/* Coaching, "Good to know": a fold-out (folded on phones, opened by main.js on wider screens). */
details.co-good > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; }
details.co-good > summary::-webkit-details-marker { display: none; }
details.co-good > summary h3 { margin: 0; }
@media (min-width: 601px) { details.co-good > summary { pointer-events: none; } details.co-good > summary .hc__plus { display: none; } }

@media (max-width: 600px) {
  /* Front page */
  :root .t-hero { font-size: 19.5vw; }
  :root .hero__cap { font-size: 11px; }
  :root .facts__say { position: relative; margin-top: 0; padding-block: 36px 44px; border-top: 0; color: var(--ink); background: var(--mist); box-shadow: 0 0 0 100vmax var(--mist); clip-path: inset(0 -100vmax); }
  :root .facts__say .facts__sub span { opacity: .8; }
  :root .facts__cells li:last-child { border-bottom: 0; }
  :root .hc { padding-bottom: 20px; }
  :root .hc__fig img { aspect-ratio: 5 / 4; }
  :root .hc__list { display: grid; gap: 8px; }
  :root .home-story { padding-top: 28px; }
  :root .home-story .row { border-top: 0; padding-top: 0; }
  :root .wt .t-line { max-width: none; font-size: 1.45rem; white-space: nowrap; }
  :root .wt .go { display: flex; justify-content: center; gap: 8px; margin-top: 20px; padding: 14px 16px; border: 1px solid var(--ink); text-decoration: none; font-weight: 700; }

  /* Coaching */
  :root .co-hero2 .actions { display: grid; gap: 8px; }
  :root .co-hero2 .actions .btn { justify-content: center; width: 100%; }
  :root .co-hero2 .actions .go { display: flex; justify-content: center; gap: 8px; padding: 14px 16px; border: 1px solid var(--ink); text-decoration: none; font-weight: 700; }
  :root .co-hero2 .lede { font-size: 1rem; }
  :root .way { padding: 20px 18px; background: var(--mist); border: 1px solid var(--rule); }
  :root .ways { gap: 10px; }
  :root .ways .way .btn { justify-content: center; width: 100%; }
  :root .steps3 li { padding: 18px; background: var(--mist); border: 1px solid var(--rule); }
  :root .steps3 { gap: 10px; }
  :root details.co-good { display: block; margin-top: 32px; padding: 0; border: 1px solid var(--rule); background: var(--mist); }
  :root details.co-good > summary { padding: 16px 18px; }
  :root details.co-good > dl { padding: 0 18px 8px; }

  /* Contact: the headline on two lines */
  :root .ct-hero .split h1 { max-width: none; font-size: 2.3rem; }
}
/* About me: keep Noah's face in the first photo (all sizes). */
.st-hero .split__fig img { object-position: 50% 12%; }

@media (max-width: 600px) {
  /* Every page: calmer intro text */
  :root .lede { font-size: 1.05rem; line-height: 1.5; }
  /* Coaching: shorter photos so the page is less of a scroll */
  :root .co-hero2__fig img { aspect-ratio: 4 / 3; object-position: 50% 30%; }
  :root .co-coach__fig img { aspect-ratio: 4 / 3; object-position: 50% 40%; }
  :root .co-facts { padding: 4px 18px; background: var(--mist); border: 1px solid var(--rule); }
  /* Coaching, Questions: the same boxes as the rest */
  :root #qa { display: grid; gap: 8px; }
  :root #qa details { padding: 0 18px; background: var(--mist); border: 1px solid var(--rule); }
  :root #qa details + details { border-top: 1px solid var(--rule); }
  /* About me */
  :root .st-hero .split__fig img { aspect-ratio: 4 / 5; height: auto; object-position: 50% 12%; }
  :root .st-facts { padding: 14px 16px; background: var(--mist); border: 1px solid var(--rule); }
  :root .st-ch__side .fig img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; object-position: 50% 15%; }
  /* Contact */
  :root .ct-hero .split__fig img, :root .ct-hero figure img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
}
@media (min-width: 601px) { details.co-good { align-items: start; } }

/* ---------- 20 October 2026: reviews, About me and "Read more" on phones ---------- */
/* "Read more" fold-outs made by initFoldPhone() (phones only). */
.fold { margin: 4px 0 20px; }
.fold > summary { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid currentColor; font-weight: 700; font-size: .95rem; cursor: pointer; list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold[open] > summary { margin-bottom: 16px; }

@media (max-width: 600px) {
  /* Reviews band: smaller video, the reviews as a row you swipe through, clear buttons. */
  :root .rv3 .rv-video, :root .rva .rv-video { max-width: 230px; justify-self: center; }
  :root .rv3__cards { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; grid-template-columns: none; gap: 10px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px; scrollbar-width: none; }
  :root .rv3__cards::-webkit-scrollbar { display: none; }
  :root .rv3__cards .rv-card { scroll-snap-align: start; min-height: 0; }
  :root .rv3 .rv-card blockquote p { font-size: 1rem; }
  :root .rv3__head .btn, :root .rva__head .btn { justify-content: center; width: 100%; }
  :root .rv3__all { margin-top: 16px; }
  :root .rv3__all .go { display: flex; justify-content: center; gap: 8px; padding: 14px 16px; border: 1px solid #fff; color: #fff; text-decoration: none; font-weight: 700; }
  :root .rva__cards { display: grid; gap: 10px; }

  /* About me */
  :root .st-ch__side .st-ch__fig--tall img { aspect-ratio: 2 / 3; object-position: 72% 50%; }
  :root .st-ch .actions { display: grid; gap: 8px; }
  :root .st-ch .actions .btn { justify-content: center; width: 100%; }
  :root .st-ch .actions .go { display: flex; justify-content: center; gap: 8px; padding: 14px 16px; border: 1px solid var(--ink); text-decoration: none; font-weight: 700; }
}