/* =========================================================
   Thomas Grønnemark — Sport / Signal Red
   Production stylesheet for index.html + talk subpages
   ========================================================= */

:root {
  --bg: #F4F2EE;
  --ink: #1d1e24;
  --ink-soft: #2a2b32;
  --ink-mute: #4a4b54;
  --paper: #F4F2EE;
  --red: #E11D2A;
  --on-dark: #F4F2EE;
  --rule-dark: rgba(244, 242, 238, 0.2);
  --rule-darker: rgba(244, 242, 238, 0.12);
  --rule-soft: rgba(244, 242, 238, 0.15);
}

* { box-sizing: border-box; }

/* Lenis smooth scroll (added by wireSmoothScroll). */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  font-family: "Inter Tight", system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Scrollbar — cream track with dark thumb to match the warm cream theme. */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(10, 10, 10, 0.35) var(--paper);
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--paper);
}
::-webkit-scrollbar-thumb {
  background: rgba(10, 10, 10, 0.35);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(10, 10, 10, 0.55);
}
::-webkit-scrollbar-corner {
  background: var(--paper);
}

a { color: inherit; }
button { font-family: inherit; }

.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

/* ---------- Language toggle (floating) ---------- */
/* Language switch now lives inside the full-screen menu (see .menu-lang),
   with a flag badge on the menu button (see .menu-btn__flag). */

/* ---------- Top bar (shared homepage + talk pages) — always transparent;
   only the inner icon/text colour flips based on the section behind it. */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px 32px 18px 64px;
  color: var(--on-dark);
  background: transparent;
  transition: color 0.3s ease;
}
.topbar[data-theme="cream"] { color: var(--ink); }
/* Was a solid dark spacer bar at the top of every sub-page; now collapsed
   so the hero runs to the very top and the fixed topbar floats over it
   (same as the homepage). */
.topbar--static {
  position: relative;
  background: transparent;
  height: 0;
}
.topbar__left {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor, transparent 35%);
}
.topbar__logo {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  display: flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}
.topbar__logo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  display: inline-block;
}
.menu-btn {
  justify-self: end;
  background: transparent;
  color: inherit;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.menu-btn__label {
  /* inherits font + color from .menu-btn */
}
.menu-btn__square {
  position: relative; /* anchor for the language flag badge */
  width: 40px;
  height: 40px;
  border: 2px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
/* Flag badge sitting diagonally over the top-right corner of the square,
   showing the currently selected language. */
.menu-btn__flag {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 23px;
  height: 16px;
  border-radius: 3px;
  overflow: hidden;
  border: 1.5px solid var(--paper);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  line-height: 0;
  pointer-events: none;
}
.menu-btn__flag .flag {
  width: 100%;
  height: 100%;
  display: block;
}
.menu-btn:hover .menu-btn__square {
  background: color-mix(in srgb, currentColor, transparent 90%);
}
.menu-btn__bars {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  width: 18px;
  align-items: flex-end;
}
.menu-btn__bars span {
  height: 1.5px;
  background: currentColor;
  display: block;
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.menu-btn__bars span:nth-child(1) { width: 100%; }
.menu-btn__bars span:nth-child(2) { width: 60%; }
.menu-btn__bars span:nth-child(3) { width: 80%; }
.menu-btn:hover .menu-btn__bars span:nth-child(2) { width: 100%; }
.menu-btn:hover .menu-btn__bars span:nth-child(3) { width: 100%; }

/* ---------- Fullscreen menu overlay ---------- */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--on-dark);
  /* Curtain reveal — clipped to 0 height by default */
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
  transition: clip-path 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.18s;
}
.menu-overlay.is-open {
  clip-path: inset(0 0 0 0);
  pointer-events: auto;
  transition: clip-path 0.6s cubic-bezier(0.65, 0, 0.35, 1);
  /* When the content is taller than the viewport (short screens, or a group
     expanded on hover), let the whole menu scroll so nothing is clipped. On
     tall screens everything fits and it never scrolls. The top bar stays put
     via position:sticky below. */
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Inner element animations — staggered slide-in when open */
.menu-overlay .menu-top,
.menu-overlay .menu-item,
.menu-overlay .menu-aside,
.menu-overlay .menu-foot {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.2s ease, transform 0.25s ease;
}
.menu-overlay.is-open .menu-top {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease 0.18s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
}
.menu-overlay .menu-item {
  transform: translateX(28px);
}
.menu-overlay.is-open .menu-item {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.menu-overlay.is-open .menu-item:nth-of-type(1) { transition-delay: 0.30s; }
.menu-overlay.is-open .menu-item:nth-of-type(2) { transition-delay: 0.36s; }
.menu-overlay.is-open .menu-item:nth-of-type(3) { transition-delay: 0.42s; }
.menu-overlay.is-open .menu-item:nth-of-type(4) { transition-delay: 0.48s; }
.menu-overlay.is-open .menu-item:nth-of-type(5) { transition-delay: 0.54s; }
.menu-overlay.is-open .menu-item:nth-of-type(6) { transition-delay: 0.60s; }
.menu-overlay.is-open .menu-aside {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease 0.50s, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.50s;
}
.menu-overlay.is-open .menu-foot {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease 0.65s, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.65s;
}

.menu-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 28px 32px 28px 64px;
  border-bottom: 1px solid var(--rule-darker);
  /* Stays visible (with the close button) while the menu scrolls on short
     screens. Opaque background so scrolled content passes under it cleanly. */
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--ink);
}
.menu-close {
  justify-self: end;
  background: transparent;
  color: var(--on-dark);
  border: 1px solid rgba(244, 242, 238, 0.3);
  padding: 14px 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.menu-close__x {
  font-size: 18px;
  line-height: 1;
}
.menu-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 380px;
  padding: 64px 64px 48px;
  gap: 80px;
}
.menu-list { display: flex; flex-direction: column; }
.menu-item {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule-darker);
  cursor: pointer;
  color: var(--on-dark);
  text-decoration: none;
}
.menu-item:first-child { border-top: 1px solid var(--rule-darker); }
.menu-item__num {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: rgba(244, 242, 238, 0.45);
  letter-spacing: 0.1em;
}
.menu-item__label {
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
  font-stretch: 82%;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}

/* Per-character ripple hover — each letter slides up to reveal a red copy,
   delayed by index for a left → right wave. */
.title-char {
  display: inline-block;
  vertical-align: top;
  height: 1em;
  overflow: hidden;
}
.title-marquee {
  display: block;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.3, 1);
  will-change: transform;
}
.title-line {
  display: block;
  line-height: 1;
  height: 1em;
}
.title-line + .title-line { color: var(--red); }
/* Scoped to direct children so a hovered parent group only ripples
   its OWN label, not any nested child labels inside the submenu. */
.menu-item:hover > .menu-item__label .title-marquee,
.menu-item:focus-visible > .menu-item__label .title-marquee {
  transform: translateY(-50%);
}
.menu-item:hover > .menu-item__arrow,
.menu-item:focus-visible > .menu-item__arrow {
  transform: translateX(6px);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Child links ripple only when hovered directly. */
.menu-item__child:hover > .menu-item__child-label .title-marquee,
.menu-item__child:focus-visible > .menu-item__child-label .title-marquee {
  transform: translateY(-50%);
}
.menu-item__arrow {
  transition: transform 0.25s ease;
}
.menu-item__arrow { font-size: 26px; color: var(--red); }

/* Grouping menu items — parent row reveals child links underneath on
   hover or keyboard focus. The submenu uses a grid-template-rows
   transition from 0fr → 1fr (with overflow:hidden on the inner)
   instead of max-height, so the height resolves to the actual content
   size and the animation eases smoothly with no clipping pop.
   Children fade + lift in with a small per-item stagger so the
   reveal reads as a soft cascade rather than a hard slab dropping. */
.menu-item--group {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  outline: none;
}
.menu-item--group .menu-item__arrow {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.menu-item--group:hover .menu-item__arrow,
.menu-item--group:focus-within .menu-item__arrow {
  transform: rotate(180deg);
}
.menu-item__children {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.menu-item__children-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.menu-item--group:hover .menu-item__children,
.menu-item--group:focus-within .menu-item__children {
  grid-template-rows: 1fr;
}
.menu-item__child {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 32px;
  align-items: center;
  padding: 14px 0 12px 0;
  color: rgba(244, 242, 238, 0.78);
  text-decoration: none;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  border-top: 1px dashed rgba(244, 242, 238, 0.16);
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.menu-item--group:hover .menu-item__child,
.menu-item--group:focus-within .menu-item__child {
  opacity: 1;
  transform: translateY(0);
}
/* Bullet slides right on hover, matching the arrow translation on
   the parent items so the hover language is consistent. */
.menu-item__child .menu-item__child-bullet {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.menu-item__child:hover .menu-item__child-bullet,
.menu-item__child:focus-visible .menu-item__child-bullet {
  transform: translateX(8px);
}
/* Per-child cascade — each subsequent child eases in with a slight
   delay so the reveal cascades down from the parent. Delay only
   applies on the open transition; on close, all children fade out
   together for a clean retreat. */
.menu-item--group:hover .menu-item__child:nth-child(1),
.menu-item--group:focus-within .menu-item__child:nth-child(1) {
  transition-delay: 0.08s, 0.08s, 0s, 0s;
}
.menu-item--group:hover .menu-item__child:nth-child(2),
.menu-item--group:focus-within .menu-item__child:nth-child(2) {
  transition-delay: 0.18s, 0.18s, 0s, 0s;
}
.menu-item--group:hover .menu-item__child:nth-child(3),
.menu-item--group:focus-within .menu-item__child:nth-child(3) {
  transition-delay: 0.28s, 0.28s, 0s, 0s;
}
.menu-item__child-bullet {
  width: 16px;
  height: 1px;
  background: var(--red);
  margin-left: 22px;
}
.menu-item__child-label {
  display: inline-block;
}
.menu-aside {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 22px;
}
.menu-aside__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.45);
  margin-bottom: 10px;
}
.menu-aside__value {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
}
.menu-aside__value.is-mute { color: rgba(244, 242, 238, 0.6); }
.menu-aside__link {
  color: var(--on-dark);
  text-decoration: none;
  display: block;
  font-size: 15px;
  padding: 6px 0;
}
.menu-aside__link span.handle {
  color: rgba(244, 242, 238, 0.45);
  margin-left: 8px;
}
/* Language switch inside the menu — a pill toggle with a flag per option. */
.menu-lang {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(244, 242, 238, 0.18);
  border-radius: 999px;
}
.menu-lang button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: rgba(244, 242, 238, 0.55);
  border: none;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.18s ease, color 0.18s ease;
}
.menu-lang button:hover { color: var(--paper); }
.menu-lang button.active {
  background: var(--paper);
  color: var(--ink);
}
.menu-lang__flag {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  overflow: hidden;
  line-height: 0;
  display: inline-block;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.menu-lang__flag .flag { width: 100%; height: 100%; display: block; }
.menu-foot {
  padding: 20px 64px;
  border-top: 1px solid var(--rule-darker);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.45);
}
.menu-foot__record { color: var(--red); }

/* ---------- Hero (homepage) ---------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  color: var(--on-dark);
  background: var(--ink);
}
.hero__video {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero__video-element {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero__video-bg {
  position: absolute;
  inset: 0;
  /* Lets the video breathe in the middle, then ramps down through the
     bottom half until it's fully solid obsidian at the bottom edge —
     matches the ticker's solid bg below for an invisible seam. */
  background: linear-gradient(180deg,
    rgba(29, 30, 36, 0.4) 0%,
    rgba(29, 30, 36, 0.05) 25%,
    rgba(29, 30, 36, 0.1) 50%,
    rgba(29, 30, 36, 0.45) 72%,
    rgba(29, 30, 36, 0.85) 90%,
    rgba(29, 30, 36, 1) 100%);
  z-index: 1;
}
.hero__video-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.hero__text {
  position: absolute;
  left: 64px;
  bottom: 64px;
  z-index: 3;
  max-width: 640px;
}
.hero__eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.75);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.red-dot {
  width: 8px;
  height: 8px;
  background: var(--red);
  border-radius: 50%;
  display: inline-block;
}
.hero__name {
  font-size: 84px;
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.035em;
  margin: 0;
  text-transform: uppercase;
  font-stretch: 82%;
}
.hero__title {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 20px 0 0;
  max-width: 560px;
  color: rgba(244, 242, 238, 0.92);
}
.hero__subtitle {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.005em;
  margin: 14px 0 0;
  max-width: 520px;
  color: rgba(244, 242, 238, 0.72);
}
.hero__title .underline {
  display: inline-block;
  background: var(--red);
  color: var(--on-dark);
  padding: 0 10px 2px;
  transform: translateY(2px);
}
.hero__cta-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 28px;
  flex-wrap: wrap;
}
.btn-primary {
  background: var(--red);
  color: var(--on-dark);
  padding: 16px 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
}
.btn-secondary {
  background: transparent;
  color: var(--on-dark);
  padding: 16px 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgba(244, 242, 238, 0.45);
  cursor: pointer;
  text-decoration: none;
}

/* ---------- Ticker (homepage) — solid obsidian, matches the hero's bottom
   fade and the timeline's dark start so the whole dark zone reads as one. */
.ticker {
  border-top: none;
  /* Border-bottom moved to a ::after pseudo so it can sit beneath the
     hover name-pill (which has z-index: 10) without slicing through it. */
  background: var(--ink);
  color: var(--on-dark);
  padding: 36px 0 56px;
  /* Clip the marquee horizontally so the long track doesn't cause a
     page scrollbar, but allow vertical overflow so the hover name pill
     and the titles tooltip can poke below the logo without being chopped. */
  overflow-x: clip;
  overflow-y: visible;
  position: relative;
  /* Lift the whole ticker above its neighbouring sections so the titles
     tooltip (which overflows below into the next section) paints on top
     instead of being covered. */
  z-index: 8;
}
.ticker::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(244, 242, 238, 0.06);
  pointer-events: none;
  z-index: 0;
}
.ticker__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0 64px 24px;
  color: var(--red);
  border-bottom: 1px dashed #2a2a2a;
  margin-bottom: 24px;
}
.ticker__track {
  display: flex;
  gap: 56px;
  white-space: nowrap;
  /* CSS animation is the default; on load JS upgrades it to a WAAPI
     animation so we can smoothly change playback rate on hover instead
     of the CSS animation-duration jump that produces a visible hak. */
  animation: tg-marquee-l 40s linear infinite;
  align-items: center;
}
.ticker__item {
  display: flex;
  align-items: center;
  gap: 56px;
  flex-shrink: 0;
}
.ticker__star {
  color: var(--red);
  font-size: 22px;
}
.club-logo {
  height: 88px;
  width: 88px;
  color: var(--on-dark);
  flex-shrink: 0;
  display: block;
}
/* Wrapper that lets the trophy badge anchor to a corner of the logo.
   Scales up on hover so the badge and logo grow together as a unit. */
.club-logo-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.32, 1);
  transform-origin: 50% 50%;
  cursor: pointer;
}
.ticker__item:hover .club-logo-wrap {
  transform: scale(1.18);
}
.club-logo--img {
  height: 88px;
  width: 88px;
  object-fit: contain;
  /* Real-world club crests come in every colour. On the dark ticker we
     keep them as-is; the badges read fine without re-tinting. */
}
/* Trophy badge — small red pill at the top-right of any club with ≥1
   title. Cup icon alone for 1 title; cup + count for 2+. The cream
   border matches the page background so it punches off the dark bar. */
.club-trophy {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  border: 2px solid var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.5);
}
.club-trophy svg {
  width: 13px;
  height: 13px;
  display: block;
  flex-shrink: 0;
}
.club-trophy__num {
  display: inline-block;
  transform: translateY(0.5px);
}
/* Titles tooltip — opens above the trophy badge on hover/focus, listing
   the trophies won during Thomas's involvement. Anchored to the badge's
   right edge so it grows leftward over the logo; the ticker allows
   vertical overflow so the panel can poke above the bar. */
.club-trophy { cursor: help; }
.club-trophy:focus-visible {
  outline: 2px solid var(--on-dark);
  outline-offset: 2px;
}
.club-titles {
  position: absolute;
  /* Opens BELOW the logo (clear of the hover name-pill) so a tall list
     never gets cropped by the section above the ticker. */
  top: calc(100% + 46px);
  left: 50%;
  width: max-content;
  max-width: 300px;
  text-align: left;
  background: #16140f;
  border: 1px solid rgba(244, 242, 238, 0.14);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transform: translate(-50%, -6px);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 0.61, 0.32, 1);
  z-index: 30;
}
/* caret pointing up at the badge */
.club-titles::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-bottom-color: #16140f;
}
.club-trophy:hover ~ .club-titles,
.club-trophy:focus ~ .club-titles,
.club-trophy:focus-visible ~ .club-titles {
  opacity: 1;
  transform: translate(-50%, 0);
}
.club-titles__label {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--red);
  margin-bottom: 9px;
  white-space: nowrap;
}
.club-titles__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* 5+ titles (Liverpool) → two columns so the panel stays compact. */
.club-titles--wide { max-width: 460px; }
.club-titles--wide .club-titles__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 22px;
}
.club-titles__list li {
  position: relative;
  padding-left: 16px;
  font-family: "Inter Tight", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--on-dark);
  white-space: nowrap;
}
.club-titles__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
}
/* Club name pill below the logo — fades in when the user hovers the
   ticker item. Pure decoration; aria-hidden so screen readers don't
   double-read the name already on the img alt. */
.club-logo-name {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, -4px);
  white-space: nowrap;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--on-dark);
  padding: 6px 10px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 0.61, 0.32, 1);
  box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.4);
}
.ticker__item:hover .club-logo-name {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Generic eyebrow (used by other sections — keep) */
.eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 14.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--red);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------- Timeline — horizontal-scroll section ----------
   Theme transitions from dark (--theme: 0) to cream (--theme: 1) as the
   user scrolls through the section. JS updates --theme on every scroll
   frame; color-mix() interpolates every colour token in the section. */
.timeline-section {
  --theme: 0;
  --text-theme: 0;
  --t-bg: color-mix(in srgb, #F4F2EE calc(var(--theme) * 100%), #1d1e24);
  --t-fg: color-mix(in srgb, #1d1e24 calc(var(--text-theme) * 100%), #F4F2EE);
  --t-fg-soft: color-mix(in srgb, var(--t-fg), transparent 30%);
  --t-fg-mute: color-mix(in srgb, var(--t-fg), transparent 55%);
  --t-rule: color-mix(in srgb, var(--t-fg), transparent 78%);
  --t-stripe-a: color-mix(in srgb, #d6cfc2 calc(var(--theme) * 100%), #232323);
  --t-stripe-b: color-mix(in srgb, #c7c0b3 calc(var(--theme) * 100%), #181818);
  --t-line: color-mix(in srgb, rgba(10, 10, 10, 0.22) calc(var(--theme) * 100%), rgba(244, 242, 238, 0.22));

  position: relative;
  height: 340vh;
  background: var(--t-bg);
  color: var(--t-fg);
  overflow: clip;
}
.timeline-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.timeline-bg-tint {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at 22% 32%, rgba(225, 29, 42, 0.14), transparent 60%),
    radial-gradient(50% 60% at 78% 70%, rgba(225, 29, 42, 0.08), transparent 65%);
  /* Pulse (--p) multiplied by darkness-factor — red tint fades out as bg
     approaches cream, since red wash on a white surface looks rough. */
  opacity: calc(var(--p, 0) * max(0, 1 - var(--theme) * 2));
  pointer-events: none;
  z-index: 1;
}
.timeline-header {
  position: absolute;
  top: 96px;
  left: 64px;
  right: 64px;
  z-index: 3;
  pointer-events: none;
  max-width: 720px;
}
.timeline-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 18px;
}
.timeline-header__title {
  font-size: 64px;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0;
  text-transform: uppercase;
  font-stretch: 82%;
  white-space: nowrap;
  color: var(--t-fg);
}
.timeline-header__body {
  font-size: 15px;
  line-height: 1.55;
  margin: 24px 0 0;
  color: var(--t-fg-soft);
  max-width: 460px;
  opacity: var(--body-fade, 1);
  transform: translateY(calc((1 - var(--body-fade, 1)) * -6px));
}
.timeline-canvas {
  position: absolute;
  top: 22vh;
  left: 0;
  bottom: 0;
  width: 5400px;
  will-change: transform;
  z-index: 2;
  transform: translate3d(0, 0, 0);
}
.timeline-lines {
  position: absolute;
  top: 0;
  left: -1600px;
  width: 8000px;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* Event card (date label + photo) */
.event {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.event-date {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--t-fg-soft);
  white-space: nowrap;
}
.event-photo {
  width: 100%;
  background-color: var(--t-stripe-a);
  background-image: repeating-linear-gradient(115deg, var(--t-stripe-a) 0 14px, var(--t-stripe-b) 14px 28px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--t-rule);
  box-shadow: 0 18px 36px rgba(10, 10, 10, 0.18);
}
/* Subtle pattern variation per card position (swap these for real photo URLs) */
.event:nth-of-type(3n+1) .event-photo {
  background-image: linear-gradient(160deg, rgba(225, 29, 42, 0.14), transparent 60%),
    repeating-linear-gradient(125deg, var(--t-stripe-a) 0 12px, var(--t-stripe-b) 12px 24px);
}
.event:nth-of-type(3n+2) .event-photo {
  background-image: repeating-linear-gradient(75deg, var(--t-stripe-a) 0 16px, var(--t-stripe-b) 16px 32px);
}
.event:nth-of-type(3n+3) .event-photo {
  background-image: linear-gradient(180deg, rgba(225, 29, 42, 0.1), transparent),
    repeating-linear-gradient(135deg, var(--t-stripe-a) 0 14px, var(--t-stripe-b) 14px 28px);
}

/* Real timeline photos — override the placeholder stripes per milestone.
   Listed in the order the events appear in timelineCards (1984 first,
   then 1997, 2002, 2004, 2005, 2007, 2010, 2015, 2018, 2024, ...). */
.event:nth-of-type(1)  .event-photo { background-image: url("assets/timeline/1.jpg"); }
.event:nth-of-type(2)  .event-photo { background-image: url("assets/timeline/2.jpg"); }
.event:nth-of-type(3)  .event-photo { background-image: url("assets/timeline/3.jpg"); }
.event:nth-of-type(4)  .event-photo { background-image: url("assets/timeline/4.jpg"); }
.event:nth-of-type(5)  .event-photo { background-image: url("assets/timeline/5.jpg"); }
.event:nth-of-type(6)  .event-photo { background-image: url("assets/timeline/6.jpg"); }
.event:nth-of-type(7)  .event-photo { background-image: url("assets/timeline/7.jpg"); }
.event:nth-of-type(8)  .event-photo { background-image: url("assets/timeline/8.jpg"); }
.event:nth-of-type(9)  .event-photo { background-image: url("assets/timeline/9.jpg"); }
.event:nth-of-type(10) .event-photo { background-image: url("assets/timeline/10.jpg"); }

/* Atmospheric filler photos — no date label, behind milestone cards.
   filter: grayscale(1) means uploaded photos display in B&W so they read as
   "atmosphere" while milestone events keep their colour. */
.event-filler {
  position: absolute;
  z-index: 0;
  opacity: 0.5;
}
.event-filler .event-photo {
  width: 100%;
  background-color: var(--t-stripe-b);
  background-image: repeating-linear-gradient(115deg, var(--t-stripe-b) 0 14px, var(--t-stripe-a) 14px 28px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--t-rule);
  box-shadow: 0 14px 28px rgba(10, 10, 10, 0.15);
  filter: grayscale(1);
}
.event-filler:nth-of-type(odd) .event-photo {
  background-image: repeating-linear-gradient(75deg, var(--t-stripe-b) 0 16px, var(--t-stripe-a) 16px 32px);
}
.event-filler:nth-of-type(3n) .event-photo {
  background-image: repeating-linear-gradient(135deg, var(--t-stripe-b) 0 12px, var(--t-stripe-a) 12px 24px);
}
/* Filler #3 — supporting photo above the Klopp milestone (Thomas with
   the Champions League trophy). Full colour and high opacity so it
   stands out as an intentional companion image, not background texture. */
.event-filler:nth-of-type(3) {
  opacity: 0.95;
}
.event-filler:nth-of-type(3) .event-photo {
  background-image: url("assets/timeline/9-extra.jpg");
  filter: none;
}
/* Make sure milestone cards sit above the fillers */
.event,
.event-quote { z-index: 1; }

/* Decorative football marks — solid ball + speed lines, theme-aware colour */
.football {
  position: absolute;
  color: var(--t-fg);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
  transform-origin: center;
  overflow: visible;
}

/* Thrower figure — anchored to the bottom-left of the canvas. Looks like
   he just released the balls that fly across the timeline to his right.
   Negative left positions him outside the canvas's left edge so he sits in
   the empty area to the left of the first milestone at scroll=0. */
.timeline-thrower {
  position: absolute;
  left: -700px;
  bottom: 0;
  height: 320px;
  width: auto;
  color: var(--t-fg);
  opacity: 0.85;
  z-index: 1;
  pointer-events: none;
}

/* Future / next-chapter placeholder */
.event--future .event-photo {
  background: transparent;
  border: 1.5px dashed color-mix(in srgb, var(--t-fg), transparent 60%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}
.event--future .event-photo::before {
  content: "→";
  font-size: 56px;
  color: var(--red);
  font-weight: 300;
  line-height: 1;
}
.event--future .event-date {
  color: var(--red);
}

/* Pull-quote between events */
.event-quote {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.event-quote p {
  font-size: 21px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.008em;
  color: var(--t-fg);
  margin: 0;
}
.event-quote em {
  font-style: normal;
  background: linear-gradient(120deg, #E11D2A 0%, #ff5a6a 60%, #c84050 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.event-quote-mark {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--t-fg-mute);
}

/* ---------- Talks split — compact pitch chooser ---------- */
.talks-split {
  background: var(--paper);
  color: var(--ink);
  position: relative;
  height: 230vh;
}
.talks-split__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 0;
  background: var(--paper);
}
/* References sit right under the chooser cards inside the frozen frame. */
.talks-split__pin .brand-ticker {
  margin-top: 0;
  padding: 26px 0 0;
  background: transparent;
}
.split-header {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 32px 28px;
  max-width: 760px;
  margin: 0 auto;
}
.split-header .eyebrow {
  justify-content: center;
  margin-bottom: 16px;
  opacity: var(--p-title, 0);
  translate: 0 calc((1 - var(--p-title, 0)) * 24px);
}
.split-title {
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin: 0;
  text-transform: uppercase;
  font-stretch: 82%;
  opacity: var(--p-title, 0);
  translate: 0 calc((1 - var(--p-title, 0)) * 36px);
}
.split-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--ink);
}
.split-bg svg {
  width: 100%;
  height: 100%;
}
.split-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 1.3fr) 1fr 1fr minmax(280px, 1.3fr);
  align-items: center;
  min-height: 460px;
}
.split-col {
  padding: 32px 40px;
  text-align: center;
  position: relative;
}
.split-headline {
  font-size: clamp(56px, 6.2vw, 96px);
  font-weight: 800;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 22px;
  font-stretch: 78%;
  position: relative;
  display: inline-block;
}
/* Headlines reveal via a clip-path wipe — left side wipes left→right,
   right side wipes right→left so each headline opens toward its face.
   The non-animated sides use a negative inset (-50%) so the area extends
   well beyond the headline's box — this lets the scribble overlay overflow
   freely on hover instead of being cut off by the clip rectangle. */
.split-col--left .split-headline {
  clip-path: inset(-50% calc(100% - var(--p-headline, 0) * 150%) -50% -50%);
}
.split-col--right .split-headline {
  clip-path: inset(-50% -50% -50% calc(100% - var(--p-headline, 0) * 150%));
}
.split-headline__word {
  position: relative;
  z-index: 1;
}
.split-scribble {
  position: absolute;
  top: -22%;
  left: -14%;
  width: 128%;
  height: 144%;
  color: var(--red);
  pointer-events: none;
  z-index: 2;
}
/* No rotation on the scribbles — the draw-in animation reads cleaner when
   the stroke runs straight across the word instead of at an angle. */
/* Path-draw on hover — bidirectional transition so the scribble draws in
   while hovering and reverses out when the cursor leaves. Single CSS
   property animated (stroke-dashoffset), cheap to render even on weak GPUs. */
.split-scribble path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 0.7s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: stroke-dashoffset;
}
.split-col:hover .split-scribble path {
  stroke-dashoffset: 0;
}
.split-desc {
  font-size: 15px;
  line-height: 1.5;
  margin: 0 auto 24px;
  color: var(--ink-soft);
  max-width: 280px;
  opacity: var(--p-desc, 0);
  translate: 0 calc((1 - var(--p-desc, 0)) * 22px);
}
.split-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--red);
  color: var(--on-dark);
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease;
  opacity: var(--p-cta, 0);
  translate: 0 calc((1 - var(--p-cta, 0)) * 18px);
}
/* Desktop: icon-only square button — text label hidden (mobile re-shows it). */
.split-cta__label { display: none; }
.split-cta svg {
  width: 20px;
  height: 20px;
}
/* Left button arrow points outward (←), right button points outward (→) */
.split-col--left .split-cta svg {
  transform: scaleX(-1);
}
.split-col--left .split-cta:hover { background: var(--ink); transform: translateX(-6px); }
.split-col--right .split-cta:hover { background: var(--ink); transform: translateX(6px); }

/* Portrait images — transparent background, mask-fade at bottom.
   Entry is scroll-driven (JS sets translate based on the section's
   position relative to the viewport). The flip on the left face is done
   via scale: -1 1 with transform-origin: left center so that when the
   element ends up at translate: 100%, its visible content lands flush
   against the canvas's left edge. Hover only changes `scale` so each
   property interpolates independently — no phantom rotation. */
.split-face {
  height: 580px;
  background-color: transparent;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 92%);
  transition: scale 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: translate, scale;
}
.split-face--left {
  background-image: url("assets/face-young.avif");
  transform-origin: left center;
  scale: -1 1;
  translate: 0 0; /* JS updates from 0 (off-screen left) → 100% (in place) */
}
.split-face--right {
  background-image: url("assets/face-adult.avif");
  transform-origin: right center;
  scale: 1 1;
  translate: 100% 0; /* JS updates from 100% (off-screen right) → 0 (in place) */
}
.split-grid:has(.split-col--left:hover) .split-face--left {
  scale: -1.06 1.06;
}
.split-grid:has(.split-col--right:hover) .split-face--right {
  scale: 1.06 1.06;
}

/* English-only "solo" layout — youth talks aren't offered internationally,
   so the section shows just the adults / companies offering: a centred
   column flanked by the talk's themes as keyword chips. */
.split-grid--solo {
  grid-template-columns: 1fr auto 1fr;
  max-width: 940px;
  margin: 0 auto;
  gap: 40px;
  align-items: center;
}
.split-themes {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Fade in alongside the description as the section scrolls into view. */
  opacity: var(--p-desc, 0);
  translate: 0 calc((1 - var(--p-desc, 0)) * 18px);
}
.split-themes--left { align-items: flex-start; }
.split-themes--right { align-items: flex-end; }
.split-theme {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 9px 16px;
  border: 1px solid rgba(29, 30, 36, 0.2);
  border-radius: 999px;
  color: var(--ink-soft);
  background: rgba(29, 30, 36, 0.02);
  white-space: nowrap;
}

/* ---------- Brand ticker — companies Thomas has spoken for ----------
   Subtle, narrow marquee under the talks split. Only the centred viewport
   shows the marquee; section background still spans the full width so the
   cream surface flows continuously. Gradient mask fades each edge so
   logos drift in and out instead of cutting at the viewport sides. */
.brand-ticker {
  background: var(--paper);
  color: var(--ink);
  padding: 0 0 64px;
  margin-top: -56px;
  position: relative;
}
.brand-ticker__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--red);
  text-align: center;
  margin: 0 0 20px;
}
.brand-ticker__viewport {
  /* Wider viewport so 4–5 logos peek through at once instead of 3 — the
     original 640px was tuned for a single-brand placeholder. */
  max-width: 960px;
  margin: 0 auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%,
    #000 14%,
    #000 86%,
    transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0%,
    #000 14%,
    #000 86%,
    transparent 100%);
}
.brand-ticker__track {
  display: flex;
  /* Slots are equal-width and pre-centred, so we can lean on a small
     constant gap for uniform spacing across every brand. */
  gap: 24px;
  white-space: nowrap;
  /* 28 brands × 2 copies = 56 items. 60s lands around 80–90 px/sec which
     is brisker than before but still readable. */
  animation: tg-marquee-l 60s linear infinite;
  align-items: center;
  width: max-content;
}
.brand-ticker__item {
  /* Fixed-size slot for every brand: this is what makes the spacing read
     as uniform regardless of whether the logo is a wide wordmark (ABB,
     Ericsson) or a tall stacked monogram (JCI, Krifa). The logo centers
     inside the slot; the gap between slots is then truly the only
     spacing the eye sees. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 140px;
  height: 56px;
  opacity: 0.55;
  transition: opacity 0.25s ease;
}
.brand-ticker__item:hover { opacity: 0.9; }
.brand-ticker__item img {
  /* Both axes capped so a logo can never exceed the slot, and never
     collapse to 0 (which was happening for SVGs with quirky intrinsic
     sizes like Krifa's height="24"). max-width: 100% relies on the
     fixed slot width above, so this stays uniform. */
  max-height: 40px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) contrast(0.9);
  display: block;
}
.brand-ticker__item--text {
  font-family: "Inter Tight", system-ui, sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-transform: lowercase;
}

/* ---------- Talks (homepage) ---------- */
.talks {
  background: var(--paper);
  color: var(--ink);
  padding: 120px 64px;
  position: relative;
}
.talks__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 64px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--ink);
}
.talks__h {
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.95;
  margin: 0;
  text-transform: uppercase;
}
.talks__body {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 500px;
}
.talks__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.talk-card {
  border: 1px solid var(--ink);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  color: inherit;
  text-decoration: none;
}
.talk-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.talk-kind {
  display: inline-block;
  background: var(--red);
  color: var(--on-dark);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 6px 12px;
  text-transform: uppercase;
}
.talk-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--ink-mute);
}
.talk-audience {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.talk-title {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}
.talk-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.talk-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px dashed rgba(10, 10, 10, 0.3);
}
.talk-meta__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.talk-meta__value { font-size: 14px; font-weight: 500; }
.talk-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.talk-chip {
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid rgba(10, 10, 10, 0.35);
  color: var(--ink);
}
.talk-cta {
  margin-top: auto;
  background: var(--red);
  color: var(--on-dark);
  padding: 18px 24px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ---------- Coaching / Online courses ---------- */
/* ---------- Pitch-build scrollytelling ----------
   The throws section is a football pitch you build by scrolling:
   the markings draw in, the green field expands to fill the screen,
   then the three throw-ins play. The section bg is green so the
   routes below continue the field; the pinned stage shows a cream
   "surface" that the field grows to cover. Full-bleed — no side
   padding on the section (the routes get their own gutters). */
.coaching {
  --pitch: #2e3f2e;
  --pitch-stripe: #34492f;
  --cream: #f4f2ee;
  position: relative;
  background: var(--pitch);
  color: var(--paper);
  padding: 0;
  /* No overflow clipping — the pinned stage uses position: sticky. */
}
/* Scroll room that keeps the routes panel pinned (covering the pitch)
   for a reading beat after it has glided up. */
.coaching__routes-spacer {
  height: 70vh;
  pointer-events: none;
}

.pitch-build {
  position: relative;
  height: 660vh; /* room for draw + expand + 4 chapters */
}
.pitch-build__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--cream); /* the surface you drop through */
}

/* The green field — a contained board (sitting BELOW the intro text,
   no overlap) during phase 1, growing to full-bleed as --expand goes
   0 → 1. */
.pitch-build__field {
  --expand: 0;
  position: absolute;
  top: calc(40vh - var(--expand) * 40vh);
  bottom: calc(7vh - var(--expand) * 7vh);
  left: calc(34vw - var(--expand) * 34vw);
  right: calc(34vw - var(--expand) * 34vw);
  border-radius: calc((1 - var(--expand)) * 20px);
  background: var(--pitch);
  overflow: hidden;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pitch-build__stripes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    var(--pitch-stripe) 0 7%,
    var(--pitch) 7% 14%
  );
  opacity: 0.5;
}
.pitch-build__svg {
  --shift: 0;
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 92%;
  color: var(--paper);
  overflow: visible;
  /* Phase 3 slides the pitch right (+ shrinks a touch) to clear the
     left text panel. --shift is driven by wirePitchBuild. */
  transform: translateX(calc(var(--shift) * 15vw)) scale(calc(1 - var(--shift) * 0.15));
  transform-origin: center center;
}

/* Intro caption — eyebrow + headline over the cream during phase 1,
   above the drawing board; fades as the field expands. */
.pitch-build__intro {
  position: absolute;
  top: 6vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(90vw, 820px);
  text-align: center;
  color: var(--ink);
  z-index: 4;
  pointer-events: none;
}
.pitch-build__intro .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 16px;
}
.pitch-build__intro .red-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  display: inline-block;
}
.pitch-build__h {
  margin: 0 0 14px;
  font-size: clamp(40px, 5.4vw, 78px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 800;
}
.pitch-build__body {
  margin: 0 auto;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-mute);
}

/* Chapter captions — a left-hand text panel on the full-screen field
   during phase 3; only the active one shown. The pitch slides right to
   clear it (see --shift). */
.pitch-build__captions {
  position: absolute;
  left: 64px;
  top: 50%;
  transform: translateY(-50%);
  width: min(42vw, 480px);
  height: 480px;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
}
.pb-chapter {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}
.pb-chapter.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pb-chapter__index {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--red);
}
.pb-chapter__title {
  margin: 8px 0 12px;
  font-size: clamp(30px, 3.4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: var(--paper);
}
.pb-chapter__desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(244, 242, 238, 0.86);
}
.pb-chapter__points {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.pb-chapter__points li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.4;
  color: rgba(244, 242, 238, 0.8);
}
.pb-chapter__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 13px;
  height: 1px;
  background: var(--red);
}
.pb-chapter__foot {
  display: flex;
  align-items: flex-end;
  gap: 36px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(244, 242, 238, 0.22);
}
.pb-chapter__stat { flex-shrink: 0; }
.pb-chapter__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--red);
  color: var(--paper);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-shadow: none;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}
.pb-chapter__cta:hover { transform: translateX(5px); background: #c91d10; }
.pb-chapter__stat-value {
  display: block;
  font-size: clamp(34px, 3.8vw, 50px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--red);
  white-space: nowrap; /* keep "+8–10 m" on one line */
}
.pb-chapter__stat-label {
  display: block;
  margin-top: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.65);
}
.pb-chapter__sub {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.6);
  align-self: flex-end;
}

/* HUD — progress dots + hint, bottom-right, phase 3. */
.pitch-build__hud {
  position: absolute;
  right: 64px;
  bottom: 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  z-index: 4;
  opacity: 0;
}

/* pitch markings (reused) */
.pitch-line { stroke: rgba(244, 242, 238, 0.22); stroke-width: 2; fill: none; }
.pitch-touchline { stroke: rgba(244, 242, 238, 0.6); stroke-width: 3.5; }
.pitch-goal { stroke: var(--red); stroke-width: 5; }
.pitch-spot { fill: rgba(244, 242, 238, 0.4); }
.pitch-thrower { transition: opacity 0.5s ease; }
.pitch-thrower__ring { fill: none; stroke: rgba(244, 242, 238, 0.9); stroke-width: 3; }
.pitch-thrower__core { fill: rgba(244, 242, 238, 0.9); }
/* Goalkeeper origin marker (only on the throw-out pattern). */
.pitch-keeper__ring { fill: none; stroke: rgba(244, 242, 238, 0.9); stroke-width: 3.5; }
.pitch-keeper__core { fill: rgba(244, 242, 238, 0.9); }

/* tactical patterns (reused) */
.throw-pattern {
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.throw-pattern.is-active { opacity: 1; }
.pattern-guide {
  fill: none;
  stroke: var(--red);
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(225, 35, 22, 0.45));
}
.pattern-arrow {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke: rgba(244, 242, 238, 0.66);
  color: rgba(244, 242, 238, 0.66);
}
.pattern-arrow--dashed {
  stroke-dasharray: 5 8;
  stroke: rgba(244, 242, 238, 0.46);
  color: rgba(244, 242, 238, 0.46);
}
.player { stroke-width: 2.5; }
.player--team { fill: var(--red); stroke: none; }
.player--opp { fill: rgba(20, 28, 18, 0.65); stroke: rgba(244, 242, 238, 0.6); }

/* "Previous" (pre-coaching) throw — a black ball on a black dashed path,
   each backed by a light halo so the black reads on the dark grass. */
.pattern-prev-halo {
  fill: none;
  stroke: rgba(244, 242, 238, 0.45);
  stroke-width: 5;
  stroke-dasharray: 5 8;
  stroke-linecap: round;
}
.pattern-prev-path {
  fill: none;
  stroke: #0c0d0f;
  stroke-width: 2.5;
  stroke-dasharray: 5 8;
  stroke-linecap: round;
}
/* Black football icon: a light base (rim + the pentagon spots that show
   through the icon's holes) under a black ball, so it reads on the grass. */
.pattern-prev-ball__base { fill: rgba(244, 242, 238, 0.92); }
.pattern-prev-ball__icon { fill: #0c0d0f; fill-rule: evenodd; }
.pattern-prev-label {
  fill: rgba(244, 242, 238, 0.85);
  font-family: "JetBrains Mono", monospace;
  font-size: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-anchor: middle;
}

/* moving ball (reused) */
.throw-ball { opacity: 0; }
.throw-ball path { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); }

/* HUD bits (reused) */
.throw-prog { display: inline-flex; gap: 10px; }
.throw-prog__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(244, 242, 238, 0.28);
  transition: background 0.4s ease, transform 0.4s ease;
}
.throw-prog__dot.is-active { background: var(--red); transform: scale(1.3); }
.throw-hint {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.55);
}

/* Coach-photo break — rises UP and OVER the frozen talks frame above
   (the pinned chooser cards + references). The -100vh overlap means the
   photo enters at the bottom of the viewport while the frame is still
   frozen and climbs a FULL viewport, reaching fullscreen exactly as the
   frame releases — so it always finishes the climb. Then it pins and
   parallax-pans, then scrolls away. */
.photo-break {
  position: relative;
  height: 180vh;
  margin-top: -100vh;
  background: var(--ink);
}
.photo-break__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--ink);
}
/* Oversized + will-change so the parallax translateY never reveals an
   edge. The overflow each side (18%) must exceed the max parallax travel
   (RANGE 12% of the image's own height ≈ 16.3% of the pin) — otherwise the
   dark pin background shows as a black bar at the top/bottom at the parallax
   extremes. Defaults to visible (translateY 0) if the script doesn't run;
   the script (wirePhotoBreak) drives the parallax pan. */
.photo-break__img {
  position: absolute;
  left: 0;
  top: -18%;
  width: 100%;
  height: 136%;
  object-fit: cover;
  object-position: center 35%;
  transform: translateY(0);
  will-change: transform;
}
.photo-break__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(22, 20, 15, 0.5) 0%,
    rgba(22, 20, 15, 0) 22%,
    rgba(22, 20, 15, 0) 58%,
    rgba(22, 20, 15, 0.85) 100%);
}

/* Image placeholders (design scaffolding) — labelled dashed slots the
   client swaps for real photos later. .img-divider = full-bleed band;
   .img-feature = a constrained accent in normal flow; .img-ph = the slot. */
.img-divider {
  background: var(--ink);
  color: var(--paper);
  padding: 0;
}
.img-feature {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(48px, 8vw, 96px) clamp(20px, 6vw, 64px);
}
.img-feature .img-ph {
  max-width: 820px;
  margin: 0 auto;
}
.img-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  border: 1.5px dashed color-mix(in srgb, currentColor 32%, transparent);
  border-radius: 8px;
  background: repeating-linear-gradient(45deg,
    transparent 0, transparent 14px,
    color-mix(in srgb, currentColor 8%, transparent) 14px,
    color-mix(in srgb, currentColor 8%, transparent) 28px);
  overflow: hidden;
}
.img-ph--divider {
  height: clamp(340px, 52vh, 620px);
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}
.img-ph__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: currentColor;
  opacity: 0.62;
  padding: 16px 20px;
}
/* Filled state — a real photo replaces the dashed placeholder. */
.img-ph--filled {
  border: 0;
  background: none;
  padding: 0;
}
/* <picture> wrappers are layout-transparent so the inner <img> keeps
   filling its container (object-fit/position unchanged). */
picture { display: contents; }
.img-slot__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.img-ph--divider.img-ph--filled .img-slot__img { object-position: center 30%; }

/* Glide-over stage: the green pitch panel climbs UP over the frozen
   pitch-build (the -100vh margin overlaps its tail so it rises a full
   viewport while the field is still pinned), then pins for a reading beat,
   then releases to the talks section — a harder "new section" hand-off. */
.coaching__routes-stage {
  position: relative;
  height: 240vh;
  margin-top: -100vh;
  /* The cream surface revealed around the pitch as it scales down on exit
     (mirrors the entry surface the pitch grows out of). */
  background: var(--paper);
}
.coaching__routes {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  /* The green football pitch continues from the pitch-build above — same
     grass + mowing stripes — so the two route cards sit "on the pitch".
     White markings are sketched behind. */
  background-color: var(--pitch);
  background-image: repeating-linear-gradient(90deg, var(--pitch-stripe) 0 7%, var(--pitch) 7% 14%);
  color: var(--paper);
  overflow: hidden;
  padding: 80px 0;
  /* Exit, mirroring the entry in reverse: as you keep scrolling past the
     cards, the whole pitch scales DOWN into a small rounded board and the
     cream stage shows around it. --routes-shrink (0→1) is driven by
     wireRoutesShrink; 0 = full-bleed pitch (also the glide-in state). */
  --routes-shrink: 0;
  transform: scale(calc(1 - var(--routes-shrink) * 0.62));
  transform-origin: 50% 50%;
  border-radius: calc(var(--routes-shrink) * 64px);
  will-change: transform;
  box-shadow:
    /* leading-edge lift as it glides in */
    0 -26px 60px -8px rgba(0, 0, 0, 0.55),
    /* floating-board drop shadow that fades in as it shrinks */
    0 50px 90px -30px rgba(0, 0, 0, calc(var(--routes-shrink) * 0.6));
}
/* Floodlit depth — a soft light centre + a vignette that settles the edges
   so the grass reads as a focused board. */
.coaching__routes::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 52% at 50% 40%, rgba(255, 255, 255, 0.06), transparent 70%),
    radial-gradient(82% 82% at 50% 45%, transparent 42%, rgba(0, 0, 0, 0.42) 100%);
  pointer-events: none;
}
/* Top-down pitch markings — penalty areas + frame + corner arcs, in white
   on the grass. Masked so it fades toward the edges; sits behind the
   kickoff motif and route cards. */
.coaching__routes-pitch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgba(244, 242, 238, 0.3);
  pointer-events: none;
  mask-image: radial-gradient(85% 82% at 50% 45%, #000 28%, transparent 100%);
  -webkit-mask-image: radial-gradient(85% 82% at 50% 45%, #000 28%, transparent 100%);
}
.coaching__routes-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1408px;
  margin: 0 auto;
  padding: 0 64px;
  box-sizing: border-box;
  /* The cards/heading fade out as the pitch scales down on exit, leaving a
     clean small board (the markings stay). */
  opacity: calc(1 - var(--routes-shrink, 0) * 1.6);
}
.coaching__routes-head {
  text-align: center;
  margin-bottom: 8px;
}
.coaching__routes-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.6);
  margin-bottom: 14px;
}
.coaching__routes-title {
  margin: 0;
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--paper);
}

/* Kickoff motif — a centre circle with the red ball on the spot, and
   a halfway line that runs down between the two route cards. Reads as
   "kickoff — choose your half." */
.routes-kick {
  /* The kickoff ball sits at the true centre of the pitch (behind the route
     cards) so the whole thing reads like a real football pitch. */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 132px;
  margin: 0;
}
.routes-kick__circle {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  border: 1.5px solid rgba(244, 242, 238, 0.34);
}
.routes-kick__ball {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
}
.routes-kick__ball svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.4));
}
/* Reveal overrides — circle scales in, ball fades while staying
   centred (keep its own transform). */
.routes-kick__circle.tg-scroll-reveal {
  transform: translateY(0) scale(0.5);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--tg-delay, 0ms),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--tg-delay, 0ms);
}
.routes-kick__circle.tg-scroll-reveal.is-in { transform: scale(1); }
.routes-kick__ball.tg-scroll-reveal {
  transform: translate(-50%, -50%) scale(0.4);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--tg-delay, 0ms),
    transform 0.7s cubic-bezier(0.34, 1.56, 0.5, 1) var(--tg-delay, 0ms);
}
.routes-kick__ball.tg-scroll-reveal.is-in { transform: translate(-50%, -50%) scale(1); }

.coaching__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  /* Pulled in a little tighter so the two choices sit more centrally on
     the pitch, leaving the teams visible out toward the wings. */
  max-width: 1080px;
  margin: 0 auto;
}
/* Halfway line down the gap between the two route cards. */
.coaching__grid::before {
  content: "";
  position: absolute;
  top: -52px;
  bottom: 18%;
  left: 50%;
  width: 1.5px;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    rgba(244, 242, 238, 0.34) 0%,
    rgba(244, 242, 238, 0.12) 60%,
    transparent 100%
  );
  pointer-events: none;
}

.coaching-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 38px 36px 30px;
  border-radius: 18px;
  border: 1px solid rgba(244, 242, 238, 0.16);
  /* Frosted-glass panels resting on the green pitch — the grass, markings
     and team players blur softly through them. */
  background: rgba(16, 26, 19, 0.34);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  color: var(--paper);
  text-decoration: none;
  overflow: hidden;
  box-shadow:
    0 30px 60px -34px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    transform 0.45s cubic-bezier(0.22, 0.61, 0.32, 1),
    background 0.45s cubic-bezier(0.22, 0.61, 0.32, 1),
    border-color 0.45s cubic-bezier(0.22, 0.61, 0.32, 1),
    box-shadow 0.45s cubic-bezier(0.22, 0.61, 0.32, 1);
  min-height: 340px;
}
/* Team-coloured edges tie each choice to its side: red = coaching,
   blue = courses. */
.coaching-tile--primary {
  border-color: rgba(225, 29, 42, 0.34);
}
.coaching-tile--secondary {
  border-color: rgba(61, 123, 255, 0.34);
}
.coaching-tile:hover {
  transform: translateY(-6px);
  background: rgba(20, 32, 23, 0.46);
  box-shadow:
    0 40px 72px -34px rgba(0, 0, 0, 0.78),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.coaching-tile--primary:hover {
  border-color: rgba(225, 29, 42, 0.6);
  box-shadow:
    0 40px 72px -34px rgba(0, 0, 0, 0.78),
    0 0 0 1px rgba(225, 29, 42, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.coaching-tile--secondary:hover {
  border-color: rgba(61, 123, 255, 0.6);
  box-shadow:
    0 40px 72px -34px rgba(0, 0, 0, 0.78),
    0 0 0 1px rgba(61, 123, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.coaching-tile__num {
  position: absolute;
  top: 20px;
  right: 30px;
  font-family: "Inter Tight", sans-serif;
  font-size: 132px;
  line-height: 0.8;
  font-weight: 800;
  color: rgba(244, 242, 238, 0.09);
  pointer-events: none;
}

.coaching-tile__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.coaching-tile__kind {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
}
.coaching-tile__audience {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(244, 242, 238, 0.6);
}

.coaching-tile__title {
  position: relative;
  margin: 0;
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.01em;
  max-width: 420px;
}
.coaching-tile__desc {
  position: relative;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(244, 242, 238, 0.78);
  max-width: 480px;
}

.coaching-tile__chips {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}
.coaching-tile__chip {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(244, 242, 238, 0.22);
  color: rgba(244, 242, 238, 0.82);
  background: rgba(244, 242, 238, 0.06);
}

.coaching-tile__foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 18px;
  border-top: 1px dashed rgba(244, 242, 238, 0.22);
}
.coaching-tile__badge {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(244, 242, 238, 0.58);
}
.coaching-tile__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--paper);
}
/* Football that rolls off the card edge + fades on hover (the card's
   overflow:hidden clips it as it leaves), then rolls back when the
   cursor leaves. */
.coaching-tile__ball {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--red);
  transition:
    transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.4s ease 0.06s;
  will-change: transform, opacity;
}
.coaching-tile__ball svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
}
.coaching-tile:hover .coaching-tile__ball {
  transform: translateX(72px) rotate(380deg);
  opacity: 0;
}
/* The second choice is the blue team's side. */
.coaching-tile--secondary .coaching-tile__kind { color: #6f9dff; }
.coaching-tile--secondary .coaching-tile__ball { color: #6f9dff; }

/* ---- Two teams on the routes pitch ----------------------------------
   Decorative players living in the pitch SVG. Calm by default; the
   matching team lights up (brighten + glow + grow) when its route card
   is hovered or focused, and the other team dims back — like picking a
   side at kickoff. */
.rt-team {
  transition: opacity 0.5s ease, filter 0.5s ease;
}
.rt-team--red  { --rt-glow: rgba(225, 29, 42, 0.9);  --rt-glow-soft: rgba(225, 29, 42, 0.4); }
.rt-team--blue { --rt-glow: rgba(61, 123, 255, 0.9); --rt-glow-soft: rgba(61, 123, 255, 0.4); }
.rt-team--red  .rt-pl-ring { fill: var(--red); }
.rt-team--blue .rt-pl-ring { fill: #3d7bff; }
.rt-pl-ring {
  fill-opacity: 0.44;
  /* r grows on light-up where CSS geometry properties are supported;
     falls back to the SVG r attribute otherwise (brighten + glow still
     apply, so the effect degrades gracefully). */
  transition: fill-opacity 0.5s ease, r 0.5s cubic-bezier(0.34, 1.56, 0.5, 1);
}
.rt-pl-core {
  fill: #f4f2ee;
  fill-opacity: 0.5;
  transition: fill-opacity 0.5s ease;
}
/* Light the team that matches the hovered/focused card — glow on the
   whole team, brighter + larger players. */
.coaching__routes:has(.coaching-tile--primary:hover) .rt-team--red,
.coaching__routes:has(.coaching-tile--primary:focus-within) .rt-team--red,
.coaching__routes:has(.coaching-tile--secondary:hover) .rt-team--blue,
.coaching__routes:has(.coaching-tile--secondary:focus-within) .rt-team--blue {
  filter: drop-shadow(0 0 9px var(--rt-glow)) drop-shadow(0 0 22px var(--rt-glow-soft));
}
.coaching__routes:has(.coaching-tile--primary:hover) .rt-team--red .rt-pl-ring,
.coaching__routes:has(.coaching-tile--primary:focus-within) .rt-team--red .rt-pl-ring,
.coaching__routes:has(.coaching-tile--secondary:hover) .rt-team--blue .rt-pl-ring,
.coaching__routes:has(.coaching-tile--secondary:focus-within) .rt-team--blue .rt-pl-ring {
  fill-opacity: 1;
  r: 19px;
}
.coaching__routes:has(.coaching-tile--primary:hover) .rt-team--red .rt-pl-core,
.coaching__routes:has(.coaching-tile--primary:focus-within) .rt-team--red .rt-pl-core,
.coaching__routes:has(.coaching-tile--secondary:hover) .rt-team--blue .rt-pl-core,
.coaching__routes:has(.coaching-tile--secondary:focus-within) .rt-team--blue .rt-pl-core {
  fill-opacity: 1;
}
/* Dim the other team so the chosen side reads clearly. */
.coaching__routes:has(.coaching-tile--primary:hover) .rt-team--blue,
.coaching__routes:has(.coaching-tile--primary:focus-within) .rt-team--blue,
.coaching__routes:has(.coaching-tile--secondary:hover) .rt-team--red,
.coaching__routes:has(.coaching-tile--secondary:focus-within) .rt-team--red {
  opacity: 0.3;
}
@media (prefers-reduced-motion: reduce) {
  .rt-team, .rt-pl-ring, .rt-pl-core { transition: none; }
}

/* ---------- Books ---------- */
.books {
  background: var(--paper);
  color: var(--ink);
  padding: 120px 64px 140px;
}
/* Title block — sits inside the sticky stage so it's still visible
   when the fan animation finishes. Anchored toward the top edge of the
   viewport while the stage is pinned. The whole head (eyebrow, title,
   body) is hidden at opacity:0 until wireBooksFanScroll adds
   .is-revealed past the threshold — the H3's ball-wipe then plays
   shortly after, layered on top of the parent fade-in. */
.books__head-sticky {
  position: absolute;
  top: 24px;
  left: 64px;
  max-width: 480px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.45s ease-out, transform 0.55s ease-out;
}
.books__head-sticky.is-revealed {
  opacity: 1;
  transform: none;
}
.books__head-sticky .eyebrow,
.books__head-sticky .books__body {
  pointer-events: auto;
}
.books__h {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.95;
  margin: 12px 0 12px;
  text-transform: uppercase;
}
.books__body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 380px;
}
/* Longer headline gets a slower wipe — 525ms (default) feels jumpy
   for big multi-word titles, 880ms reads as a "ball travelling". */
.books__h-reveal {
  --reveal-duration: 880ms;
}

/* Fan stage — taller than viewport so the inner sticky element pins
   while the user scrolls. --p-fan goes 0 → 1 across that scroll, opening
   the three stacked covers into a fan. */
.books__stage {
  position: relative;
  height: 200vh;
  margin-top: 0;
}
.books__fan-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  /* Keep overflow visible so the hover scale, sibling step-around and
     the side info-panel can extend past the centred fan area without
     getting clipped. */
  overflow: visible;
}
.books__fan {
  --p-fan: 0;
  position: relative;
  width: min(720px, 90vw);
  height: 560px;
  perspective: 1400px;
  /* Nudge the fan a little below dead-centre so the upper-left title
     block has clear room above the books without overlap. */
  margin-top: 60px;
}

/* Each card is centered absolutely; transform driven by --p-fan
   so the three covers start stacked and rotate/translate outward. */
.book-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 280px;
  aspect-ratio: 3 / 4;
  margin: -210px 0 0 -140px;
  transform-origin: 50% 85%;
  will-change: transform;
  cursor: pointer;
  /* Locked from pointer events until the fan animation has mostly
     opened — see wireBooksFanScroll: it adds .is-interactive once
     progress crosses ~90%. Stops the hover panel + cover link from
     activating while the books are still stacked. */
  pointer-events: none;
}
.books__fan.is-interactive .book-card {
  pointer-events: auto;
}
/* Hovered book pops forward and grows. The scale is applied to the
   inner .book-cover so the parent's scroll-driven rotation/translation
   isn't disturbed. z-index lift puts the hovered card above its
   neighbours regardless of its default stacking order. */
.book-card:hover {
  z-index: 10;
}
/* Registered properties so we can transition the hover-push without
   touching the scroll-driven --p-spread / --p-tilt. When a sibling is
   hovered, the non-hovered cards animate these two values outward,
   making room for the highlighted book. */
@property --hover-push-x {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@property --hover-push-rot {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.book-card {
  --hover-push-x: 0px;
  --hover-push-rot: 0deg;
  transition:
    --hover-push-x 0.45s cubic-bezier(0.22, 0.61, 0.32, 1),
    --hover-push-rot 0.45s cubic-bezier(0.22, 0.61, 0.32, 1);
}
/* Scroll-driven fan transforms — spread and tilt move together. The
   hover-push vars are added in so the cards step around a hovered
   sibling without disturbing the scroll animation. */
.book-card--left {
  z-index: 1;
  transform:
    translateX(calc(var(--p-spread, 0) * -190px + var(--hover-push-x)))
    rotate(calc(var(--p-tilt, 0) * -12deg + var(--hover-push-rot)));
}
.book-card--center {
  z-index: 3;
  transform:
    translateX(var(--hover-push-x))
    rotate(var(--hover-push-rot));
}
.book-card--right {
  z-index: 2;
  transform:
    translateX(calc(var(--p-spread, 0) * 190px + var(--hover-push-x)))
    rotate(calc(var(--p-tilt, 0) * 12deg + var(--hover-push-rot)));
}

/* "Step around" the hovered card — push the other two outward in the
   direction away from the hover, plus a small extra tilt so it reads
   as a deferential lean rather than a flat slide. */
.books__fan:has(.book-card--left:hover) .book-card--center {
  --hover-push-x: 50px;
  --hover-push-rot: 4deg;
}
.books__fan:has(.book-card--left:hover) .book-card--right {
  --hover-push-x: 70px;
  --hover-push-rot: 5deg;
}
.books__fan:has(.book-card--center:hover) .book-card--left {
  --hover-push-x: -55px;
  --hover-push-rot: -4deg;
}
.books__fan:has(.book-card--center:hover) .book-card--right {
  --hover-push-x: 55px;
  --hover-push-rot: 4deg;
}
.books__fan:has(.book-card--right:hover) .book-card--center {
  --hover-push-x: -50px;
  --hover-push-rot: -4deg;
}
.books__fan:has(.book-card--right:hover) .book-card--left {
  --hover-push-x: -70px;
  --hover-push-rot: -5deg;
}

/* Anchor that wraps the cover so the whole card is clickable. Sized
   to fill the parent .book-card; the visible styling lives on the
   inner .book-cover so the hover scale/shadow keeps working. */
.book-card__link {
  display: block;
  height: 100%;
  width: 100%;
  color: inherit;
  text-decoration: none;
  border-radius: 14px;
}
.book-card__link:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
}
.book-cover {
  height: 100%;
  background: linear-gradient(180deg, #2a2b32 0%, #1d1e24 100%);
  color: var(--on-dark);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--ink);
  border-radius: 14px;
  box-shadow:
    0 30px 60px -20px rgba(28, 26, 24, 0.4),
    0 16px 32px -16px rgba(28, 26, 24, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  position: relative;
  overflow: hidden;
  transition:
    transform 0.4s cubic-bezier(0.22, 0.61, 0.32, 1),
    box-shadow 0.4s cubic-bezier(0.22, 0.61, 0.32, 1);
}
.book-card:hover .book-cover {
  transform: scale(1.12);
  box-shadow:
    0 50px 100px -16px rgba(28, 26, 24, 0.5),
    0 28px 56px -16px rgba(28, 26, 24, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.book-cover::after {
  /* subtle paper-grain highlight */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 60% at 30% 0%, rgba(255, 255, 255, 0.06), transparent 60%),
    linear-gradient(180deg, transparent 70%, rgba(0, 0, 0, 0.15));
  pointer-events: none;
}
.book-cover__top {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--red);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.book-cover__title {
  font-size: 40px;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  font-stretch: 75%;
  position: relative;
  z-index: 1;
}
.book-cover__foot {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.5);
  padding-top: 12px;
  border-top: 1px dashed rgba(244, 242, 238, 0.2);
  position: relative;
  z-index: 1;
}
/* Real cover photo, laid over the text cover (which stays behind as a
   fallback until the image loads, or if the file is missing). */
.book-cover__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  border-radius: inherit;
}
/* Blank cover for a book that isn't out yet — clean tone + a faint label. */
.book-cover__soon {
  margin: auto;
  position: relative;
  z-index: 1;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0.5;
}

/* Glass info panel — slides out from under the book on hover. Sits
   inside the rotated .book-card so it inherits the same tilt + push
   transforms, which keeps it visually tethered to its book. */
.book-info {
  position: absolute;
  top: 50%;
  right: calc(100% + 28px);
  width: 260px;
  transform: translate(-10px, -50%);
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  padding: 18px 20px 16px;
  border-radius: 14px;
  /* More opaque background so the dark book covers don't bleed through
     the glass when the panel sits close to a book. */
  background: rgba(244, 242, 238, 0.86);
  border: 1px solid rgba(28, 26, 24, 0.1);
  /* Soft, evenly spread shadow — no heavy directional drop, so the
     panel reads as floating above the page, not casting onto the book. */
  box-shadow:
    0 18px 40px -18px rgba(28, 26, 24, 0.28),
    0 8px 18px -10px rgba(28, 26, 24, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  color: var(--ink);
  transition:
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(0.22, 0.61, 0.32, 1);
}
/* The right-most book's panel pops out to its right instead — that's
   the only direction with clear page space. The slide direction
   mirrors the position (from the right edge inward). */
.book-card--right .book-info {
  right: auto;
  left: calc(100% + 28px);
  transform: translate(10px, -50%);
}
.book-card:hover .book-info {
  opacity: 1;
  pointer-events: auto;
  transform: translate(0, -50%);
}
.book-info__kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}
.book-info__title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 6px 0 4px;
  text-transform: uppercase;
}
.book-info__sub {
  font-size: 12px;
  color: var(--ink-mute);
  font-style: italic;
  margin: 0 0 14px;
}
.book-info__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 0 0 14px;
}
.book-info__fact {
  display: contents;
}
.book-info__fact dt {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  align-self: center;
}
.book-info__fact dd {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.book-info__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(28, 26, 24, 0.15);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
  transition: color 0.2s ease;
}
.book-info__link:hover {
  color: var(--ink);
}

/* Tone variants — each book reads as a distinct cover when fanned. */
.book-card[data-tone="red"] .book-cover {
  background: linear-gradient(180deg, #e23a3f 0%, #b51d24 100%);
}
.book-card[data-tone="red"] .book-cover__top {
  color: #fff3d6;
}
.book-card[data-tone="red"] .book-cover__foot {
  color: rgba(255, 243, 214, 0.6);
  border-top-color: rgba(255, 243, 214, 0.25);
}
.book-card[data-tone="sand"] .book-cover {
  background: linear-gradient(180deg, #ece3cf 0%, #d4c8ab 100%);
  color: var(--ink);
  border-color: rgba(28, 26, 24, 0.6);
}
.book-card[data-tone="sand"] .book-cover__top {
  color: var(--red);
}
.book-card[data-tone="sand"] .book-cover__foot {
  color: rgba(28, 26, 24, 0.55);
  border-top-color: rgba(28, 26, 24, 0.2);
}
.book-card[data-tone="sand"] .book-cover::after {
  background:
    radial-gradient(120% 60% at 30% 0%, rgba(255, 255, 255, 0.4), transparent 60%),
    linear-gradient(180deg, transparent 70%, rgba(28, 26, 24, 0.08));
}

/* Details grid below the fan — 3 columns, one per book. */
.book-kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}
/* "Coming soon" teaser book — placeholder cover + a single teaser line. */
.book-card--soon .book-card__link {
  cursor: default;
}
.book-info--soon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.book-info__soon {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  font-style: italic;
  text-align: center;
  color: var(--ink-mute);
}

/* ---------- Blog ---------- */
.blog {
  background: var(--paper);
  color: var(--ink);
  padding: 0 64px 120px;
}
.blog__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 56px;
  padding-bottom: 32px;
  padding-top: 96px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.blog__h {
  font-size: 72px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.92;
  margin: 0;
  text-transform: uppercase;
}
.blog__body {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 460px;
}
.blog__all {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 14px 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.blog-card {
  border: 1px solid var(--ink);
  background: var(--paper);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.32, 1), box-shadow 0.4s ease;
  animation: blog-card-in 0.5s both;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px -24px rgba(10, 10, 10, 0.45);
}
@keyframes blog-card-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.blog-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.blog-card__thumb {
  aspect-ratio: 4 / 3;
  position: relative;
  border-bottom: 1px solid var(--ink);
  overflow: hidden;
  background: var(--ink);
}
.blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.32, 1);
}
.blog-card:hover .blog-card__img { transform: scale(1.05); }
/* Empty thumb — a soft, branded ball motif on cream when no cover image. */
.blog-card__thumb-ball {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(225, 35, 22, 0.06), transparent 60%),
    var(--paper);
}
.blog-card__thumb-ball svg { width: 60px; height: 60px; color: rgba(10, 10, 10, 0.13); }
.blog-card__thumb-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--red);
  color: var(--on-dark);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 10px;
  z-index: 1;
}
.blog-card__draft {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--ink);
  color: var(--on-dark);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 9px;
  z-index: 1;
}
.blog-card__body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.blog-card__meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  gap: 12px;
  align-items: center;
}
.blog-card__meta-sep { color: var(--red); }
.blog-card__title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}
.blog-card__excerpt {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.blog-card__read {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px dashed rgba(10, 10, 10, 0.2);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.blog__all { text-decoration: none; transition: background 0.25s ease, color 0.25s ease; }
.blog__all:hover { background: var(--ink); color: var(--on-dark); }
/* Loading / empty / error states (span the whole grid). */
.blog__state {
  grid-column: 1 / -1;
  padding: 56px 0;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.blog__state--error { color: var(--red); }

/* ---- Journal: tactics-board reveal -----------------------------------
   A ball rolls a dashed route across the row and "passes" to each card,
   popping it in with a slight tilt as it arrives. The route is built by
   wireBlogReveal (desktop only) — when empty it collapses, so the stacked
   / reduced-motion layouts fall back to the plain grid + default fade-in. */
.blog__field { position: relative; }
.blog__route {
  position: relative;
  height: 32px;
  margin-bottom: 20px;
}
.blog__route:empty { display: none; }
.blog__route-line,
.blog__route-prog {
  position: absolute;
  top: 50%;
  left: 0;
  height: 0;
  transform: translateY(-50%);
}
.blog__route-line {
  right: 0;
  border-top: 2px dashed rgba(10, 10, 10, 0.22);
}
.blog__route-prog {
  width: 0;
  border-top: 2px solid var(--red);
}
.blog__route-node {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid rgba(10, 10, 10, 0.3);
  transform: translate(-50%, -50%);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.blog__route-node.is-on {
  background: var(--red);
  border-color: var(--red);
  transform: translate(-50%, -50%) scale(1.2);
}
.blog__route-ball {
  position: absolute;
  top: 50%;
  left: 0;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  color: var(--red);
  will-change: left, transform;
}
.blog__route-ball svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(10, 10, 10, 0.3));
}
/* Cards start hidden + offset only once JS arms the reveal (.is-reveal),
   so without JS they stay visible. Each gets a slight resting tilt. */
.blog__grid.is-reveal .blog-card {
  --tilt: 0deg;
  opacity: 0;
  transform: translateY(28px) scale(0.94) rotate(calc(var(--tilt) * 2.4));
  animation: none;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.blog__grid.is-reveal .blog-card:nth-child(1) { --tilt: -1.2deg; }
.blog__grid.is-reveal .blog-card:nth-child(2) { --tilt: 0.7deg; }
.blog__grid.is-reveal .blog-card:nth-child(3) { --tilt: -0.6deg; }
.blog__grid.is-reveal .blog-card.is-revealed {
  opacity: 1;
  transform: rotate(var(--tilt));
}
.blog__grid.is-reveal .blog-card.is-revealed:hover {
  transform: translateY(-5px) rotate(var(--tilt));
}

/* ---------- Blog index page (blog.html) ---------- */
.blog-page {
  background: var(--paper);
  color: var(--ink);
  padding: 140px 64px 88px;
  min-height: 100vh;
}
.blog-page__head {
  max-width: 760px;
  margin: 0 auto 64px;
  text-align: center;
}
.blog-page__title {
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.92;
  text-transform: uppercase;
  margin: 18px 0 20px;
}
.blog-page__lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 auto;
  max-width: 580px;
}
.blog-page__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
}
/* First card on the index spans the row as a horizontal feature. */
.blog-card--feature { grid-column: 1 / -1; margin-bottom: 8px; }
.blog-card--feature .blog-card__link { flex-direction: row; align-items: stretch; }
.blog-card--feature .blog-card__thumb {
  flex: 1 1 56%;
  aspect-ratio: auto;
  min-height: 400px;
  border-bottom: none;
  border-right: 1px solid var(--ink);
}
.blog-card--feature .blog-card__body { flex: 1 1 44%; justify-content: center; padding: 48px; gap: 20px; }
.blog-card--feature .blog-card__title { font-size: clamp(28px, 3vw, 42px); }
.blog-card--feature .blog-card__excerpt { font-size: 17px; }

/* ---------- Single blog post (blog-indlaeg.html) ---------- */
.post {
  background: var(--paper);
  color: var(--ink);
  padding: 140px 24px 120px;
  min-height: 100vh;
}
.post__state { text-align: center; font-family: "JetBrains Mono", monospace; color: var(--ink-mute); padding: 100px 0; }
.post__article { max-width: 760px; margin: 0 auto; }
.post__article--empty { text-align: center; padding: 40px 0; }
.post__back {
  display: inline-flex;
  align-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-decoration: none;
  margin-bottom: 32px;
}
.post__back:hover { color: var(--red); }
.post__back--foot { margin-top: 56px; margin-bottom: 0; padding-top: 32px; border-top: 1px solid var(--ink); display: inline-flex; }
.post__eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 18px;
}
.post__title {
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.96;
  margin: 0 0 24px;
}
.post__lead { font-size: 21px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 40px; }
.post__cover { margin: 0 0 48px; border: 1px solid var(--ink); overflow: hidden; }
.post__cover img { width: 100%; display: block; }
.post__body { font-size: 18px; line-height: 1.7; color: var(--ink); }
.post__body > * + * { margin-top: 24px; }
.post__body h2 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin-top: 48px; }
.post__body h3 { font-size: clamp(21px, 2.6vw, 26px); font-weight: 700; letter-spacing: -0.01em; margin-top: 40px; }
.post__body p { margin: 0; }
.post__body a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.post__body img { max-width: 100%; height: auto; display: block; border: 1px solid var(--ink); margin: 32px 0; }
.post__body figure { margin: 32px 0; }
.post__body figcaption { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--ink-mute); margin-top: 10px; text-align: center; }
.post__body blockquote {
  border-left: 3px solid var(--red);
  padding: 6px 0 6px 24px;
  margin: 32px 0;
  font-size: clamp(20px, 2.4vw, 25px);
  line-height: 1.4;
  font-weight: 500;
}
.post__body ul, .post__body ol { padding-left: 24px; }
.post__body li { margin-top: 10px; }
.post__body hr { border: none; border-top: 1px solid var(--ink); margin: 48px 0; }

/* ---------- Blog admin (admin.html) ---------- */
.admin-root { min-height: 100vh; background: var(--paper); color: var(--ink); }
.admin__center {
  padding: 80px 24px;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
/* shared controls */
.admin-btn {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  padding: 12px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
}
.admin-btn:hover { background: var(--ink); color: var(--on-dark); }
.admin-btn--primary { background: var(--red); border-color: var(--red); color: #fff; }
.admin-btn--primary:hover { background: var(--ink); border-color: var(--ink); }
.admin-btn--ghost { background: transparent; }
.admin-btn--danger { border-color: rgba(225, 35, 22, 0.5); color: var(--red); }
.admin-btn--danger:hover { background: var(--red); border-color: var(--red); color: #fff; }
.admin-btn--sm { padding: 8px 12px; font-size: 11px; }
.admin-btn--block { width: 100%; justify-content: center; }
.admin-btn:disabled { opacity: 0.55; cursor: default; }
.admin-link {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.admin-link:hover { color: var(--red); }
.admin-field { display: flex; flex-direction: column; gap: 7px; }
.admin-field > span {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.admin-field input,
.admin-field select,
.admin-field textarea {
  font-family: "Inter Tight", system-ui, sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--ink);
  padding: 12px 14px;
  width: 100%;
  border-radius: 0;
}
.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus { outline: 2px solid var(--red); outline-offset: -1px; }
.admin-field textarea { resize: vertical; line-height: 1.5; }
.admin-field--title input { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }

/* login */
.admin-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--paper); }
.admin-login__card {
  width: 100%;
  max-width: 380px;
  border: 1px solid var(--ink);
  background: #fff;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.admin-login__brand {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-login__h { font-size: 36px; font-weight: 700; letter-spacing: -0.03em; margin: 0; }
.admin-login__error {
  background: rgba(225, 35, 22, 0.08);
  border: 1px solid rgba(225, 35, 22, 0.4);
  color: var(--red);
  font-size: 13px;
  padding: 10px 12px;
}
.admin-login__back { margin-top: 4px; font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--ink-mute); text-decoration: none; }
.admin-login__back:hover { color: var(--red); }

/* dashboard */
.admin { min-height: 100vh; background: var(--paper); }
.admin-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  border-bottom: 1px solid var(--ink);
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 5;
  flex-wrap: wrap;
  gap: 12px;
}
.admin-top__brand {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 9px;
}
.admin-top__right { display: flex; align-items: center; gap: 18px; }
.admin-top__user { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--ink-mute); }
.admin-main { max-width: 1100px; margin: 0 auto; padding: 40px; }

/* list */
.admin-list__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.admin-list__head h1 { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; margin: 0; }
.admin-list__head h1 span { color: var(--ink-mute); font-weight: 400; }
.admin-list { border-top: 1px solid var(--ink); }
.admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 4px;
  border-bottom: 1px solid rgba(10, 10, 10, 0.15);
}
.admin-row__main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.admin-row__status {
  flex-shrink: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 9px;
  border: 1px solid currentColor;
}
.admin-row__status--published { color: #1c7a3e; }
.admin-row__status--draft { color: var(--ink-mute); }
.admin-row__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.admin-row__title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-row__meta { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-mute); letter-spacing: 0.04em; }
.admin-row__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* editor */
.admin-editor__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.admin-editor__bar-right { display: flex; align-items: center; gap: 18px; }
.admin-editor__grid { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; }
.admin-editor__col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.admin-editor__side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 96px; }
.admin-editor__toolbar { display: flex; flex-wrap: wrap; gap: 4px; border: 1px solid var(--ink); border-bottom: none; padding: 8px; background: #fff; }
.admin-tool {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  min-width: 34px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.admin-tool:hover { background: var(--paper); border-color: var(--ink); }
.admin-editor__body {
  border: 1px solid var(--ink);
  background: #fff;
  padding: 28px 32px;
  min-height: 420px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
}
.admin-editor__body:focus { outline: 2px solid var(--red); outline-offset: -1px; }
.admin-editor__body h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; margin: 28px 0 0; }
.admin-editor__body h3 { font-size: 21px; font-weight: 700; margin: 24px 0 0; }
.admin-editor__body blockquote { border-left: 3px solid var(--red); padding-left: 18px; margin: 20px 0; font-size: 20px; font-weight: 500; }
.admin-editor__body img { max-width: 100%; height: auto; border: 1px solid var(--ink); }
.admin-editor__body figure { margin: 20px 0; }
.admin-editor__body p { margin: 14px 0 0; }
.admin-uploading { color: var(--ink-mute); font-style: italic; }
.admin-cover { border: 1px solid var(--ink); background: #fff; aspect-ratio: 16 / 9; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.admin-cover img { width: 100%; height: 100%; object-fit: cover; }
.admin-cover__empty { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-mute); letter-spacing: 0.06em; }
.admin-upload { cursor: pointer; }
.admin-editor__msg { margin-top: 18px; font-size: 14px; font-family: "JetBrains Mono", monospace; }
.admin-editor__msg--error { color: var(--red); }

/* ---- Admin: tabs + bookings calendar ---- */
.admin-tabs { display: flex; gap: 4px; }
.admin-tab {
  background: transparent; border: none; color: var(--ink-mute);
  font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.admin-tab:hover { color: var(--ink); }
.admin-tab.is-active { background: var(--ink); color: var(--on-dark); }

.admin__center--warn { color: var(--red); line-height: 1.7; }
.admin__center--warn code { font-family: "JetBrains Mono", monospace; background: rgba(225, 29, 42, 0.08); padding: 2px 6px; border-radius: 4px; }

.bk-legend { display: flex; gap: 18px; align-items: center; }
.bk-legend__item { display: inline-flex; align-items: center; gap: 7px; font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.06em; }
.bk-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.bk-dot--requested { background: #E8A33D; }
.bk-dot--confirmed { background: #2E9E5B; }
.bk-dot--declined { background: rgba(29, 30, 36, 0.3); }

.bk-cal { border: 1px solid var(--ink); margin: 18px 0 28px; }
.bk-cal__nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--ink); }
.bk-cal__title { font-weight: 700; font-size: 17px; text-transform: capitalize; }
.bk-cal__wds { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid rgba(29, 30, 36, 0.15); }
.bk-cal__wd { text-align: center; padding: 8px 0; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.bk-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.bk-cell {
  position: relative; min-height: 86px; background: transparent;
  border-right: 1px solid rgba(29, 30, 36, 0.1); border-bottom: 1px solid rgba(29, 30, 36, 0.1);
  padding: 6px; display: flex; flex-direction: column; gap: 5px;
}
.bk-cell:nth-child(7n) { border-right: none; }
.bk-cell--empty { background: rgba(29, 30, 36, 0.02); }
.bk-cell--requested { background: rgba(232, 163, 61, 0.12); box-shadow: inset 0 0 0 2px rgba(232, 163, 61, 0.55); }
.bk-cell__n { font-size: 12px; font-weight: 600; color: var(--ink-mute); }
.bk-cell__chips { display: flex; flex-direction: column; gap: 3px; }
.bk-chip {
  display: block; width: 100%; text-align: left; border: none; cursor: pointer; font: inherit;
  font-size: 10.5px; line-height: 1.25; padding: 3px 6px; border-radius: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: 3px solid transparent; transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.bk-chip--requested { background: rgba(232, 163, 61, 0.2); border-left-color: #E8A33D; color: #7a520f; }
.bk-chip--confirmed { background: rgba(46, 158, 91, 0.18); border-left-color: #2E9E5B; color: #155f33; }
.bk-chip--declined { background: rgba(29, 30, 36, 0.07); border-left-color: rgba(29, 30, 36, 0.3); color: var(--ink-mute); text-decoration: line-through; }
.bk-chip:hover { filter: brightness(0.96); }
.bk-chip.is-picked { box-shadow: 0 0 0 2px var(--ink); }

/* Tools: calendar/list toggle + legend */
.bk-head__tools { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.bk-toggle { display: inline-flex; border: 1px solid var(--ink); border-radius: 999px; overflow: hidden; }
.bk-toggle__btn { background: transparent; border: none; cursor: pointer; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 16px; color: var(--ink-mute); transition: background 0.15s ease, color 0.15s ease; }
.bk-toggle__btn.is-active { background: var(--ink); color: var(--on-dark); }

/* Calendar detail panel + hint */
.bk-cal__hint { font-size: 14px; color: var(--ink-mute); padding: 18px 0; text-align: center; }
.bk-detail { margin-top: 6px; }
.bk-detail__head { display: flex; align-items: center; justify-content: space-between; font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 10px; }

/* Booking cards (list mode + calendar detail) */
.bk-cards { display: flex; flex-direction: column; gap: 14px; }
.bk-card { border: 1px solid var(--ink); border-left-width: 4px; background: #fff; padding: 20px 22px; }
.bk-card--requested { border-left-color: #E8A33D; }
.bk-card--confirmed { border-left-color: #2E9E5B; }
.bk-card--declined { border-left-color: rgba(29, 30, 36, 0.3); opacity: 0.72; }
.bk-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.bk-card__talk { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.bk-card__sub { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); margin-top: 3px; }
.bk-card__date { font-size: 14px; font-weight: 600; color: var(--red); margin: 10px 0 16px; text-transform: capitalize; }
.bk-card__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 0; }
.bk-card__field dt { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 2px; }
.bk-card__field dd { margin: 0; font-size: 14.5px; word-break: break-word; }
.bk-card__field a { color: var(--red); text-decoration: none; }
.bk-card__msg { margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(29, 30, 36, 0.2); }
.bk-card__msg dt { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 5px; }
.bk-card__msg p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); white-space: pre-wrap; }
.bk-card__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(29, 30, 36, 0.12); }

/* Status pill */
.bk-status { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.bk-status--requested { background: rgba(232, 163, 61, 0.15); color: #9a6a16; }
.bk-status--confirmed { background: rgba(46, 158, 91, 0.15); color: #1c6e3c; }
.bk-status--declined { background: rgba(29, 30, 36, 0.08); color: var(--ink-mute); }

@media (max-width: 820px) {
  .admin-top { padding: 16px 20px; }
  .admin-main { padding: 28px 20px; }
  .admin-editor__grid { grid-template-columns: 1fr; }
  .admin-editor__side { position: static; }
  .admin-row { flex-direction: column; align-items: flex-start; }
}

/* ---------- SoMe ---------- */
.some {
  background: var(--paper);
  color: var(--ink);
  padding: 120px 64px;
}
.some__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 64px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--ink);
}
.some__h {
  font-size: 72px;
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin: 0;
  text-transform: uppercase;
}
.some__body {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 460px;
}
.some__channels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 64px;
}
.some-channel {
  padding: 24px;
  border: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}
.some-channel__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.some-channel__name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.some-channel__arrow {
  color: var(--red);
  font-size: 16px;
}
.some-channel__handle {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--ink-mute);
}
.some-channel__count {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--red);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 8px;
}
.some__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.some-post {
  aspect-ratio: 4 / 5;
  background: repeating-linear-gradient(135deg, #e2dcd1 0 12px, #d3ccc1 12px 24px);
  border: 1px solid rgba(10, 10, 10, 0.18);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.some-post__top {
  display: flex;
  justify-content: space-between;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.some-post__tag {
  background: var(--red);
  color: var(--on-dark);
  padding: 4px 8px;
}
.some-post__date { color: var(--ink-mute); }
.some-post__caption {
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
}
.some-post__stat {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--red);
  letter-spacing: 0.06em;
  padding-top: 12px;
  border-top: 1px dashed rgba(10, 10, 10, 0.3);
}

/* ---------- Footer ---------- */
.footer {
  background: var(--paper);
  color: var(--ink);
  padding: 96px 64px 32px;
  border-top: 4px solid var(--red);
  overflow: hidden;
}
.footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 64px;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--ink);
}
.footer__nl-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 16px;
}
.footer__nl-title {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.95;
  margin: 0;
  text-transform: uppercase;
}
.footer__nl-body {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 20px 0 32px;
  max-width: 480px;
}
.footer__form {
  display: flex;
  gap: 0;
  max-width: 480px;
  border: 1px solid var(--ink);
}
.footer__input {
  flex: 1;
  border: none;
  padding: 18px 20px;
  font-size: 15px;
  font-family: inherit;
  background: transparent;
  outline: none;
}
.footer__submit {
  background: var(--ink);
  color: var(--on-dark);
  border: none;
  padding: 18px 28px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.footer__col-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 20px;
}
.footer__col-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 16px;
}
.footer__col-list a,
.footer__col-list span {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer__col-list a:hover { color: var(--red); }
.footer__col-list .is-mute { color: var(--ink-mute); }
.footer__wordmark {
  font-size: 200px;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.85;
  text-transform: uppercase;
  font-stretch: 75%;
  margin: 56px 0 32px;
  color: var(--ink);
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.footer__record { color: var(--red); }
.footer__credit { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.footer__credit:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================
   Talk subpage styles
   ========================================================= */
.talk-hero {
  position: relative;
  background: var(--ink);
  color: var(--on-dark);
  overflow: hidden;
  /* Top clearance for the floating topbar (the dark bg fills to y=0 behind
     it; this keeps the back link + meta below the menu). */
  padding-top: 72px;
  padding-bottom: 96px;
}
.talk-hero__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(29, 30, 36, 0.7) 0%, rgba(29, 30, 36, 0.95) 100%),
    repeating-linear-gradient(115deg, #2a2b32 0 12px, #22232a 12px 24px);
  opacity: 0.6;
}
/* Talk hero with a real photo backdrop (e.g. the companies talk page).
   The photo replaces the stripe bg; a vertical scrim keeps the full-width
   content legible, darker at top (topbar) and bottom (lead + CTA). */
.talk-hero--photo .talk-hero__bg { display: none; }
.talk-hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.talk-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(12, 13, 15, 0.62) 0%,
    rgba(12, 13, 15, 0.34) 22%,
    rgba(12, 13, 15, 0.34) 42%,
    rgba(12, 13, 15, 0.62) 66%,
    rgba(12, 13, 15, 0.88) 100%);
}
.talk-hero__inner {
  position: relative;
  z-index: 2;
  padding: 0 64px;
}
.talk-hero__back {
  display: inline-block;
  color: rgba(244, 242, 238, 0.7);
  text-decoration: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 32px;
  margin-bottom: 64px;
  border-bottom: 1px dashed rgba(244, 242, 238, 0.3);
  padding-bottom: 4px;
}
.talk-hero__meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.6);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.talk-hero__kind {
  background: var(--red);
  color: var(--on-dark);
  padding: 6px 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.talk-hero__audience { color: rgba(244, 242, 238, 0.7); }
.talk-hero__title {
  font-size: 120px;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.045em;
  margin: 0;
  text-transform: uppercase;
  font-stretch: 82%;
  max-width: 1200px;
}
/* This title is huge with a tight line-height (0.9), so glyph tops poke
   well above the text box. The global reveal clip uses only a -8% top
   buffer (sized for descenders) which shaves umlauts/diacritics like the
   dots on "STÄRKEN". Give this title a deeper top buffer so they survive
   the wipe. Latin titles without top accents look identical. */
.talk-hero__title .reveal__text { clip-path: inset(-22% 110% -8% -4%); }
.talk-hero__title .reveal.is-played .reveal__text { clip-path: inset(-22% -4% -8% -4%); }
.talk-hero__tagline {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 32px 0 0;
  color: rgba(244, 242, 238, 0.85);
  max-width: 880px;
}
.talk-hero__bottom {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--rule-dark);
  align-items: start;
}
.talk-hero__lead {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(244, 242, 238, 0.85);
  margin: 0;
  max-width: 720px;
}
.talk-hero__meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
  margin-bottom: 28px;
}
.talk-hero__meta-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.45);
  margin-bottom: 6px;
}
.talk-hero__meta-value { font-size: 18px; font-weight: 600; }

/* Generic section heading (on light or dark) */
.sec-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--ink);
  margin-bottom: 64px;
}
.sec-head--dark { border-bottom-color: var(--rule-dark); }
.sec-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sec-h {
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.95;
  margin: 0;
  text-transform: uppercase;
}
.sec-intro {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 460px;
}
.sec-intro--dark { color: rgba(244, 242, 238, 0.85); }

/* Takeaways */
.takeaways { background: var(--paper); color: var(--ink); padding: 120px 64px 96px; }
.takeaways__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
}
.takeaway-card {
  padding: 32px 24px;
  border-right: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.takeaway-card:last-child { border-right: none; }
.takeaway-card__num {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--red);
  letter-spacing: 0.1em;
}
.takeaway-card__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
.takeaway-card__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

/* Outline */
.outline { background: var(--paper); color: var(--ink); padding: 120px 64px; }
.outline__list { display: flex; flex-direction: column; }
.outline__row {
  display: grid;
  grid-template-columns: 140px 1fr 1.4fr;
  gap: 48px;
  padding: 32px 0;
  border-top: 1px solid var(--ink);
  align-items: baseline;
}
.outline__row:last-child { border-bottom: 1px solid var(--ink); }
.outline__time {
  font-family: "JetBrains Mono", monospace;
  font-size: 22px;
  font-weight: 600;
  color: var(--red);
  letter-spacing: 0.04em;
}
.outline__title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
}
.outline__desc {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 600px;
}

/* Venues */
.venues {
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.venues__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  padding: 96px 64px 56px;
  align-items: end;
}
.venues__intro {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 480px;
}
.venues__ticker {
  background: var(--ink);
  color: var(--on-dark);
  padding: 32px 0;
  overflow: hidden;
  border-top: 1px solid var(--ink);
}
.venues__track {
  display: flex;
  gap: 56px;
  white-space: nowrap;
  animation: tg-marquee-l 50s linear infinite;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.venues__item {
  display: flex;
  align-items: center;
  gap: 56px;
}
.venues__star {
  color: var(--red);
  font-size: 22px;
}

/* Testimonials */
.testimonials { background: var(--paper); color: var(--ink); padding: 120px 64px; }
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testimonial-card {
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
}
.testimonial-card__quote-mark {
  font-family: Georgia, serif;
  font-size: 80px;
  line-height: 0.7;
  color: var(--red);
  height: 32px;
}
.testimonial-card__quote {
  font-size: 18px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--ink);
  font-weight: 500;
  flex: 1;
}
.testimonial-card__attr {
  padding-top: 20px;
  border-top: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.testimonial-card__name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.testimonial-card__role {
  font-size: 13px;
  color: var(--ink-mute);
}
.testimonial-card__org {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--red);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 8px;
}

/* ---------- Talk sub-page: brand strip ---------- */
.talk-brands {
  background: var(--paper);
  color: var(--ink);
  padding: 56px 64px 40px;
  border-top: 1px solid rgba(28, 26, 24, 0.08);
}
.talk-brands__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 20px;
}
.talk-brands__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
}
.talk-brands__item {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 8px 14px;
  border: 1px solid rgba(28, 26, 24, 0.15);
  border-radius: 999px;
  white-space: nowrap;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.talk-brands__item:hover {
  border-color: var(--red);
  background: rgba(225, 29, 42, 0.04);
}

/* ---------- Talk sub-page: multi-talk list ---------- */
.talks-list {
  background: var(--paper);
  color: var(--ink);
  padding: 80px 64px 120px;
}
.talks-list .sec-head { margin-bottom: 56px; }
.talks-list__items {
  display: flex;
  flex-direction: column;
  gap: 96px;
}
.talk-item {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 80px;
  align-items: start;
  padding-top: 48px;
  border-top: 1px solid rgba(28, 26, 24, 0.12);
}
.talk-item:first-child { border-top: none; padding-top: 0; }
.talk-item__head { display: flex; flex-direction: column; gap: 14px; }
.talk-item__num {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}
.talk-item__title {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin: 0;
  text-transform: uppercase;
}
.talk-item__sub {
  font-size: 18px;
  line-height: 1.4;
  font-style: italic;
  color: var(--ink-mute);
  margin: 0;
  max-width: 320px;
}
.talk-item__body { display: flex; flex-direction: column; gap: 20px; }
.talk-item__lead p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 16px;
  max-width: 620px;
}
.talk-item__lead p:last-child { margin-bottom: 0; }
.talk-item__intro {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  margin: 12px 0 0;
}
.talk-item__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 620px;
}
.talk-item__bullets li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}
.talk-item__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 16px;
  height: 1px;
  background: var(--red);
}
.talk-item__audience {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
  border-top: 1px dashed rgba(28, 26, 24, 0.18);
  padding-top: 16px;
  margin: 4px 0 0;
}

/* ---------- Talk sub-page: sticky-scroller (multi-talk) ---------- */
/* Heading sits above the sticky slides — scrolls naturally past
   before the first panel pins. */
.talks-sticky {
  background: var(--paper);
  color: var(--ink);
  padding: 80px 0 0;
}
.talks-sticky__heading {
  padding: 0 64px 56px;
}
/* Stack of glide-over panels. All panels live as siblings here, each
   sticky top:0 with height 100vh. Because they share a containing
   block, sticky's rules mean each one starts pinning when its natural
   top crosses the viewport top — and stays pinned until the container
   ends. With DOM-order z-indexing, each subsequent panel slides up
   from below and visibly stacks on top of the previous one. */
.talks-sticky__stack {
  position: relative;
}
.talks-sticky__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  padding: 64px;
  overflow: hidden;
}
/* Alternating panel tones — keeps the rhythm interesting as you
   scroll through. Ink panels invert text colours. */
.talks-sticky__pin[data-tone="paper"] {
  background: var(--paper);
  color: var(--ink);
}
.talks-sticky__pin[data-tone="ink"] {
  background: var(--ink);
  color: var(--on-dark);
}
.talks-sticky__inner {
  position: relative;
  width: 100%;
  max-width: 1180px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "head head"
    "body body";
  gap: 48px 80px;
  z-index: 1;
}
/* Massive transparent number behind the content — gives each panel a
   sense of being a "stage". Sits in the far-left, doesn't interact. */
.talks-sticky__watermark {
  position: absolute;
  top: 50%;
  left: -16px;
  transform: translateY(-52%);
  font-size: clamp(260px, 36vw, 480px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.85;
  color: var(--ink);
  opacity: 0.05;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  font-variant-numeric: tabular-nums;
}
.talks-sticky__pin[data-tone="ink"] .talks-sticky__watermark {
  color: var(--on-dark);
  opacity: 0.07;
}
.talks-sticky__head {
  grid-area: head;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.talks-sticky__count {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}
.talks-sticky__title {
  font-size: clamp(48px, 6vw, 84px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.95;
  margin: 0;
  text-transform: uppercase;
}
.talks-sticky__sub {
  font-size: 20px;
  line-height: 1.4;
  font-style: italic;
  margin: 4px 0 0;
  max-width: 720px;
  opacity: 0.85;
}
.talks-sticky__body {
  grid-area: body;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: start;
}
.talks-sticky__lead p {
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 16px;
}
.talks-sticky__lead p:last-child { margin-bottom: 0; }
.talks-sticky__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.talks-sticky__intro {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0;
}
.talks-sticky__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.talks-sticky__bullets li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
  line-height: 1.5;
}
.talks-sticky__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 16px;
  height: 1px;
  background: var(--red);
}
.talks-sticky__outro {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}
.talks-sticky__outro p {
  font-size: 15.5px;
  line-height: 1.55;
  margin: 0;
  opacity: 0.88;
}
.talks-sticky__audience {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  opacity: 0.6;
  margin: 8px 0 0;
  padding-top: 14px;
  border-top: 1px dashed currentColor;
}
/* Per-talk CTA — opens the booking modal for that talk. Kept compact so
   it doesn't push content-heavy panels past the 100vh sticky frame. */
.talks-sticky__cta {
  margin-top: 16px;
}
.talks-sticky__cta .btn-primary {
  font-size: 14px;
}

/* ---------- Talk sub-page: scattered moodboard testimonials ---------- */
.testimonials-scatter {
  background: var(--paper);
  color: var(--ink);
  padding: 120px 32px;
  overflow: hidden;
}
.testimonials-scatter .sec-head { margin-bottom: 80px; padding: 0 32px; }
.testimonials-scatter__canvas {
  position: relative;
  width: 100%;
  /* Height set inline based on card count from renderTestimonialsScatter */
  max-width: 1560px;
  margin: 0 auto;
}
.testimonial-scatter {
  position: absolute;
  left: var(--x, 0%);
  top: var(--y, 0);
  width: var(--w, 280px);
  /* Combined transform: scroll-reveal pre-state PLUS the card's own
     rotation. .is-in (from wireScrollReveals) drops the translate so
     the card pops up into its tilted resting position. */
  transform: rotate(var(--rot, 0deg)) translateY(28px) scale(0.96);
  opacity: 0;
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.32, 1) var(--tg-delay, 0ms),
    transform 0.8s cubic-bezier(0.22, 0.61, 0.32, 1) var(--tg-delay, 0ms);
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 6px;
  padding: 24px 22px 20px;
  box-shadow:
    0 18px 36px -18px rgba(28, 26, 24, 0.32),
    0 8px 18px -10px rgba(28, 26, 24, 0.2);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.testimonial-scatter.is-in {
  opacity: 1;
  transform: rotate(var(--rot, 0deg)) translateY(0) scale(1);
}
.testimonial-scatter__mark {
  font-family: serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 0.5;
  color: var(--red);
  margin: 8px 0 -4px;
}
.testimonial-scatter__quote {
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  font-style: italic;
  color: var(--ink);
}
.testimonial-scatter--lg .testimonial-scatter__quote { font-size: 17px; }
.testimonial-scatter--sm .testimonial-scatter__quote { font-size: 14px; }
.testimonial-scatter__attr {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  padding-top: 10px;
  border-top: 1px dashed rgba(28, 26, 24, 0.2);
}
.testimonial-scatter__name { color: var(--ink); font-weight: 700; letter-spacing: 0.02em; }
.testimonial-scatter__org { color: var(--ink-mute); }

/* Single featured reference — same card style, but centred in normal
   flow instead of absolutely pinned into the scatter grid. Keeps the
   scroll-reveal (translateY/opacity) with no rotation. */
.testimonials-scatter--single .testimonials-scatter__single {
  max-width: 640px;
  margin: 0 auto;
}
.testimonials-scatter--single .testimonial-scatter {
  position: static;
  width: auto;
  margin: 0 auto;
  padding: 32px 30px 26px;
}

/* Subtle hover — straightens the card and lifts it forward, like
   picking it off the corkboard. */
.testimonial-scatter {
  cursor: default;
}
.testimonial-scatter:hover {
  z-index: 20;
}
.testimonial-scatter:hover.is-in {
  transform: rotate(0deg) translateY(-6px) scale(1.02);
  box-shadow:
    0 28px 52px -16px rgba(28, 26, 24, 0.4),
    0 14px 24px -10px rgba(28, 26, 24, 0.25);
  transition:
    transform 0.35s cubic-bezier(0.22, 0.61, 0.32, 1),
    box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.32, 1);
}

/* ---------- Talk sub-page: secondary testimonials grid ---------- */
.testimonials-grid {
  background: var(--paper);
  color: var(--ink);
  padding: 0 64px 120px;
}
.testimonials-grid__h {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 28px;
  padding-top: 56px;
  border-top: 1px solid rgba(28, 26, 24, 0.12);
}
.testimonials-grid__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 48px;
}
.testimonial-mini {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.testimonial-mini__quote {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  font-style: italic;
}
.testimonial-mini__attr {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
}
.testimonial-mini__name { color: var(--ink); font-weight: 700; }
.testimonial-mini__org { color: var(--ink-mute); }

/* Booking CTA */
.booking {
  background: var(--red);
  color: var(--on-dark);
  padding: 120px 64px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: center;
}
.booking__title {
  font-size: 88px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.92;
  margin: 0;
  text-transform: uppercase;
  font-stretch: 82%;
  max-width: 900px;
}
.booking__body {
  font-size: 18px;
  line-height: 1.55;
  margin: 0 0 28px;
  max-width: 440px;
}
.booking__cta {
  background: var(--ink);
  color: var(--on-dark);
  padding: 20px 28px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* ---- Booking modal (public) ---- */
.bk-modal { position: fixed; inset: 0; z-index: 9000; display: none; }
.bk-modal.is-open { display: block; }
.bk-modal__backdrop {
  position: absolute; inset: 0; background: rgba(12, 14, 12, 0.62);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: bk-fade 0.3s ease;
}
.bk-modal__dialog {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto;
  background: var(--paper); color: var(--ink); border-radius: 16px; padding: 36px 36px 32px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7); animation: bk-pop 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes bk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bk-pop { from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.bk-modal__close {
  position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border: none;
  background: transparent; font-size: 28px; line-height: 1; color: var(--ink-mute); cursor: pointer;
  border-radius: 50%; transition: background 0.15s ease, color 0.15s ease;
}
.bk-modal__close:hover { background: rgba(29, 30, 36, 0.06); color: var(--ink); }
.bk-modal__eyebrow { display: flex; align-items: center; gap: 8px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 14px; }
.bk-modal__title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; }
.bk-modal__intro { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 22px; max-width: 44ch; }
.bk-form { display: flex; flex-direction: column; gap: 14px; }
.bk-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bk-field { display: flex; flex-direction: column; gap: 6px; }
.bk-field span { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
.bk-field input, .bk-field select, .bk-field textarea {
  font: inherit; font-size: 15px; padding: 11px 13px; border: 1px solid rgba(29, 30, 36, 0.25);
  border-radius: 9px; background: #fff; color: var(--ink); width: 100%; box-sizing: border-box;
  transition: border-color 0.15s ease;
}
.bk-field select {
  appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231d1e24' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.bk-field input:focus, .bk-field select:focus, .bk-field textarea:focus { outline: none; border-color: var(--red); }
.bk-field textarea { resize: vertical; min-height: 70px; }
.bk-form__error { font-size: 13px; color: var(--red); font-weight: 500; }
.bk-form__error a { color: var(--red); }
.bk-form__submit {
  margin-top: 6px; background: var(--red); color: #fff; border: none; padding: 15px 24px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: 10px; cursor: pointer; transition: background 0.2s ease;
}
.bk-form__submit:hover { background: var(--ink); }
.bk-form__submit:disabled { opacity: 0.6; cursor: default; }
.bk-modal__success { text-align: center; padding: 16px 0 6px; }
.bk-modal__success-ball { display: inline-flex; width: 56px; height: 56px; color: var(--red); margin-bottom: 8px; }
.bk-modal__success-ball svg { width: 100%; height: 100%; }
.bk-modal__success .bk-modal__intro { margin-left: auto; margin-right: auto; }
.bk-modal__success .bk-form__submit { margin-top: 18px; }

/* ---- Custom date picker ---- */
.bk-datetime { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bk-datefield { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bk-datefield__lbl { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
.bk-date {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font: inherit; font-size: 15px; padding: 11px 13px; border: 1px solid rgba(29, 30, 36, 0.25);
  border-radius: 9px; background: #fff; color: var(--ink); cursor: pointer; text-align: left; width: 100%;
  transition: border-color 0.15s ease;
}
.bk-date:hover, .bk-date:focus-visible { border-color: var(--red); outline: none; }
.bk-date__val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-date__val.is-empty { color: var(--ink-mute); }
.bk-date__ico { width: 18px; height: 18px; color: var(--ink-mute); flex: none; }
.bk-date__pop {
  grid-column: 1 / -1; border: 1px solid rgba(29, 30, 36, 0.18); border-radius: 12px;
  padding: 14px; background: #fff; box-shadow: 0 20px 44px -24px rgba(0, 0, 0, 0.45);
}
.bk-cal2__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.bk-cal2__sel { display: flex; gap: 8px; flex: 1; min-width: 0; }
.bk-cal2__sel select {
  flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 9px 30px 9px 12px;
  border: 1px solid rgba(29, 30, 36, 0.2); border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231d1e24' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.bk-cal2__sel select:focus { outline: none; border-color: var(--red); }
.bk-cal2__nav {
  width: 36px; height: 36px; flex: none; border: 1px solid rgba(29, 30, 36, 0.2); border-radius: 8px;
  background: #fff; cursor: pointer; font-size: 18px; line-height: 1; color: var(--ink); transition: background 0.15s ease;
}
.bk-cal2__nav:hover { background: rgba(29, 30, 36, 0.05); }
.bk-cal2__wd { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.bk-cal2__wd span { text-align: center; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); padding: 4px 0; }
.bk-cal2__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.bk-d {
  aspect-ratio: 1; border: none; background: transparent; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--ink); display: flex; align-items: center; justify-content: center;
  transition: background 0.12s ease;
}
.bk-d--e { visibility: hidden; cursor: default; }
.bk-d:hover:not(:disabled) { background: rgba(29, 30, 36, 0.08); }
.bk-d.is-sel { background: var(--red); color: #fff; }
.bk-d:disabled { color: rgba(29, 30, 36, 0.26); cursor: default; }

/* ---- Talk chooser + progressive reveal ---- */
.bk-pick { display: flex; flex-direction: column; gap: 10px; }
.bk-pick__lbl { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
.bk-pick__list { display: flex; flex-direction: column; gap: 16px; }
.bk-pick__group { display: flex; flex-direction: column; gap: 8px; }
.bk-pick__glbl { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.bk-pick__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bk-talk {
  display: flex; align-items: center; gap: 11px; text-align: left; font: inherit; font-size: 14px;
  padding: 13px 14px; border: 1px solid rgba(29, 30, 36, 0.2); border-radius: 10px; background: #fff;
  color: var(--ink); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.bk-talk:hover { border-color: rgba(29, 30, 36, 0.45); }
.bk-talk__tick { position: relative; width: 17px; height: 17px; border-radius: 50%; border: 2px solid rgba(29, 30, 36, 0.3); flex: none; transition: all 0.15s ease; }
.bk-talk__title { line-height: 1.25; }
.bk-talk.is-selected { border-color: var(--red); background: rgba(225, 29, 42, 0.05); }
.bk-talk.is-selected .bk-talk__tick { border-color: var(--red); background: var(--red); }
.bk-talk.is-selected .bk-talk__tick::after { content: ""; position: absolute; left: 4.5px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Stepper */
.bk-steps { display: flex; list-style: none; margin: 0 0 22px; padding: 0; }
.bk-steps__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; color: var(--ink-mute); }
.bk-steps__item::before { content: ""; position: absolute; top: 14px; left: -50%; width: 100%; height: 2px; background: rgba(29, 30, 36, 0.14); }
.bk-steps__item:first-child::before { display: none; }
.bk-steps__item.is-active::before, .bk-steps__item.is-done::before { background: var(--red); }
.bk-steps__n { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 600; background: #fff; border: 2px solid rgba(29, 30, 36, 0.18); color: var(--ink-mute); transition: all 0.2s ease; }
.bk-steps__item.is-active .bk-steps__n { border-color: var(--red); color: var(--red); }
.bk-steps__item.is-done .bk-steps__n { background: var(--red); border-color: var(--red); color: #fff; }
.bk-steps__lbl { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; }
.bk-steps__item.is-active .bk-steps__lbl { color: var(--ink); }

/* Step panels */
.bk-step { display: none; flex-direction: column; gap: 14px; animation: bk-rise 0.35s both; }
.bk-step.is-active { display: flex; }
@keyframes bk-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Summary (step 4) */
.bk-summary { background: rgba(29, 30, 36, 0.03); border: 1px solid rgba(29, 30, 36, 0.1); border-radius: 10px; padding: 14px 16px; }
.bk-summary__lbl { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px; }
.bk-summary__row { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; font-size: 14px; }
.bk-summary__row dt { color: var(--ink-mute); }
.bk-summary__row dd { margin: 0; font-weight: 600; text-align: right; }

/* Nav */
.bk-form__nav { display: flex; align-items: center; gap: 12px; justify-content: flex-end; margin-top: 4px; }
.bk-form__back { margin-right: auto; background: none; border: none; cursor: pointer; font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.04em; color: var(--ink-mute); padding: 10px 2px; }
.bk-form__back:hover { color: var(--ink); }
.bk-form__next { background: var(--ink); color: #fff; border: none; padding: 14px 26px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 10px; cursor: pointer; transition: background 0.2s ease; }
.bk-form__next:hover { background: var(--red); }
.bk-form__nav .bk-form__submit { margin-top: 0; }

@media (max-width: 560px) {
  .bk-modal__dialog { padding: 28px 22px 24px; border-radius: 14px; }
  .bk-form__row, .bk-datetime, .bk-pick__cards { grid-template-columns: 1fr; }
  .bk-steps__lbl { display: none; }
}

/* =========================================================
   Ball reveal — text wipe-in component
   =========================================================
   A soccer ball flies past with a soft wind streak; the text behind
   it is wiped into view in lockstep with the wind. Three independently
   animated parts inside .reveal__ball:
     - .reveal__ball-trail  → gradient streak (the "wind")
     - .reveal__ball-disc   → the actual SVG ball (stays sharp)
     - .reveal__ball itself → the wrapper that translates across

   The ball wrapper uses LINEAR easing so it never decelerates before
   fading out — that's what makes the flyby read as smooth motion
   rather than "stop, then disappear". The wind/disc keep a soft curve
   because they only animate scale/opacity. JS measures each element
   after layout and writes --reveal-end-x so the ball travels exactly
   the text's width. See wireRevealAnimations() in script.js. */
.reveal {
  /* Project default — overridden per-element via inline style if needed.
     525ms feels punchy for short labels (timeline dates); bump toward
     700–900ms for longer headlines. */
  --reveal-duration: 525ms;
  --ball-em: 0.9em;
  --ball-scale: 1;
  --reveal-easing: cubic-bezier(0.22, 0.61, 0.32, 1);

  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: visible;
}

.reveal__text {
  display: inline-block;
  /* Hidden state: right edge clipped past the left edge. -8% top/bottom
     buffer so descenders (g, p, q, y) aren't shaved when font is big. */
  clip-path: inset(-8% 110% -8% -4%);
  /* Linear easing matches the ball/wind motion — see comment on the
     .reveal.is-played .reveal__ball rule below. */
  transition: clip-path calc(var(--reveal-duration) * 0.78) linear calc(var(--reveal-duration) * 0.14);
  will-change: clip-path;
}
.reveal.is-played .reveal__text {
  clip-path: inset(-8% -4% -8% -4%);
}

.reveal__ball {
  position: absolute;
  top: 50%;
  left: 0;
  width: calc(var(--ball-em) * var(--ball-scale));
  aspect-ratio: 1 / 1;
  translate: -180% -50%;
  opacity: 0;
  color: currentColor;
  pointer-events: none;
  z-index: 2;
  will-change: transform, opacity;
}

.reveal__ball-trail {
  /* Horizontal gradient streak extending LEFT from the ball's centre —
     the "wind". Substantially wider and softer than the ball so the eye
     reads it as turbulence catching the text, not the ball doing the
     wipe. */
  position: absolute;
  top: 50%;
  right: 50%;
  width: 850%;
  height: 78%;
  translate: 0 -50%;
  transform-origin: right center;
  background: linear-gradient(
    90deg,
    rgba(29, 30, 36, 0)    0%,
    rgba(29, 30, 36, 0.05) 35%,
    rgba(29, 30, 36, 0.18) 70%,
    rgba(29, 30, 36, 0.34) 92%,
    rgba(29, 30, 36, 0.42) 100%
  );
  filter: blur(7px);
  opacity: 0;
  pointer-events: none;
  border-radius: 999px;
}

.reveal__ball-disc {
  position: absolute;
  inset: 0;
  display: block;
  filter: drop-shadow(0 2px 3px rgba(29, 30, 36, 0.22));
}
.reveal__ball-disc svg {
  width: 100%; height: 100%; display: block; overflow: visible;
}

.reveal.is-played .reveal__ball {
  /* Hardcoded linear so the ball NEVER decelerates before the fade-out
     starts. With an ease-out curve it would visibly slow down right
     before disappearing, breaking the smooth flyby illusion. */
  animation: reveal-ball-fly var(--reveal-duration) linear forwards;
}
.reveal.is-played .reveal__ball-trail {
  animation: reveal-wind var(--reveal-duration) var(--reveal-easing) forwards;
}
.reveal.is-played .reveal__ball-disc {
  animation: reveal-ball-pulse var(--reveal-duration) var(--reveal-easing) forwards;
}

/* Replay reset (used by JS to restart): snap to hidden state with
   transitions/animations suppressed for one frame, then re-trigger. */
.reveal.is-resetting .reveal__text {
  transition: none !important;
  clip-path: inset(-8% 110% -8% -4%);
}
.reveal.is-resetting .reveal__ball,
.reveal.is-resetting .reveal__ball-trail,
.reveal.is-resetting .reveal__ball-disc {
  animation: none !important;
}

/* On the dark phase of the timeline (and any data-section-theme="dark"
   area), swap the trail gradient to a light one so the wind doesn't
   disappear into the dark background. */
[data-section-theme="dark"] .reveal__ball-trail,
.reveal--on-dark .reveal__ball-trail {
  background: linear-gradient(
    90deg,
    rgba(243, 238, 229, 0)    0%,
    rgba(243, 238, 229, 0.06) 35%,
    rgba(243, 238, 229, 0.22) 70%,
    rgba(243, 238, 229, 0.40) 92%,
    rgba(243, 238, 229, 0.50) 100%
  );
}
[data-section-theme="dark"] .reveal__ball-disc,
.reveal--on-dark .reveal__ball-disc {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

/* Block-level variants for paragraph-style reveals. The default
   .reveal is inline-block (shrinks to text width); these stretch it
   to fill its parent so multi-line text can wrap inside. */
.reveal--block {
  display: block;
}
.reveal--paragraph {
  display: block;
}
.reveal--paragraph .reveal__text {
  /* Text needs to behave as a block so it wraps at the paragraph
     width. Without this, the inline-block default would force the
     content onto one ultra-wide line. */
  display: block;
}

/* Timeline dates are small mono labels (11px). Bump --ball-em so the
   ball is clearly visible against the type without dwarfing it, and
   the animation triggers as each card scrolls past. */
.event-date.reveal {
  --ball-em: 1.4em;
}

/* Quote reveals. Two flavours:
   - Single (.reveal--paragraph): ONE ball flies through the vertical
     middle of the multi-line block while clip-path wipes the whole
     thing in. Bigger ball because it's a long sweep.
   - Per-line (.event-quote__lines > .reveal--block): each line is
     its own reveal with a smaller ball, staggered ~150ms each.
   Tweak --ball-em / --reveal-duration per variant to taste. */
.event-quote .reveal--paragraph {
  /* Single-mode quote: one big dramatic sweep across the whole block.
     Ball is intentionally much larger than the per-line variant (and
     larger than the decorative timeline footballs at 32–44px) because
     it's the only motion happening on this quote — it should read as a
     hero element, not a passing accent. Duration is bumped to ~1.1s so
     the bigger ball doesn't blur past at double the px/sec speed of the
     small date-label balls (motion distance scales with ball width). */
  --ball-em: 3.5em;
  --reveal-duration: 1100ms;
}

/* Spin only on the big-ball single-mode quote. We add a second
   animation (reveal-ball-spin) alongside the existing pulse — CSS lets
   you stack multiple animations on one element, and because `scale`
   and `rotate` are separate individual transform properties they
   compose without one cancelling the other. Small balls don't get
   this because at 15–30px a 720° spin reads as visual noise. */
.event-quote .reveal--paragraph.is-played .reveal__ball-disc {
  animation:
    reveal-ball-pulse var(--reveal-duration) var(--reveal-easing) forwards,
    reveal-ball-spin  var(--reveal-duration) linear            forwards;
}
.event-quote__lines {
  /* Same baseline typography as the original quote paragraph. */
  font-size: 21px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.008em;
  color: var(--t-fg);
  margin: 0;
}
.event-quote__lines .reveal--block {
  --ball-em: 1.2em;
  --reveal-duration: 525ms;
}

/* Timeline section uses a dynamic theme that interpolates dark → cream
   via --t-fg as the user scrolls. Hook the trail and disc into the same
   variable so the wind streak is light against the dark phase and dark
   against the cream phase, automatically. The alpha stops mirror the
   default rule above. */
.timeline-section .reveal__ball-trail {
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--t-fg), transparent 95%) 35%,
    color-mix(in srgb, var(--t-fg), transparent 82%) 70%,
    color-mix(in srgb, var(--t-fg), transparent 66%) 92%,
    color-mix(in srgb, var(--t-fg), transparent 58%) 100%
  );
}
.timeline-section .reveal__ball-disc {
  filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--t-fg), transparent 78%));
}

@media (prefers-reduced-motion: reduce) {
  .reveal__text { clip-path: inset(-8% -4% -8% -4%); transition: none; }
  .reveal__ball { display: none; }
}

/* =========================================================
   Animations
   ========================================================= */
@keyframes tg-marquee-l {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Ball wrapper: linear motion, opacity ramps in/out with explicit holds
   so the ball is fully visible during travel. The translate values use
   --reveal-end-x written by JS. */
@keyframes reveal-ball-fly {
  0%   { translate: -180% -50%; opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { translate: calc(var(--reveal-end-x, 700%) + 120%) -50%; opacity: 0; }
}

/* Wind streak: ramps in, holds, dissipates as the ball exits. */
@keyframes reveal-wind {
  0%   { opacity: 0; scale: 0.55 0.85; }
  14%  { opacity: 1; scale: 1.15 1.02; }
  82%  { opacity: 0.95; scale: 1.05 1; }
  100% { opacity: 0; scale: 0.6 0.7; }
}

/* Disc pulse: mild squash so it reads as fast without going blurry. */
@keyframes reveal-ball-pulse {
  0%   { scale: 1 1; }
  14%  { scale: 1.1 0.96; }
  82%  { scale: 1.05 0.98; }
  100% { scale: 1 1; }
}

/* Disc spin: full rotation while the ball travels — only opted into
   by larger reveals (see .event-quote .reveal--paragraph rule). Linear
   easing so the rotation rate stays constant (a thrown ball maintains
   spin, it doesn't ramp up and down). Lives as a separate keyframe
   because `rotate` is an individual transform property and composes
   with the scale animation above without conflict. */
@keyframes reveal-ball-spin {
  from { rotate: 0deg; }
  to   { rotate: 720deg; }
}

/* =========================================================
   Generic scroll-up reveal — fades + slides blocks into view
   when their .is-in class is added by wireScrollReveals().
   Use --tg-delay (set inline) to stagger groups.
   ========================================================= */
.tg-scroll-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 0.61, 0.32, 1) var(--tg-delay, 0ms),
    transform 0.75s cubic-bezier(0.22, 0.61, 0.32, 1) var(--tg-delay, 0ms);
  will-change: opacity, transform;
}
.tg-scroll-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .tg-scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Long-form title reveals — longer duration than the 525ms default
   so big headlines read as a confident "ball travelling" rather than
   a snap. */
.talk-hero__title-reveal,
.book-page__title-reveal {
  --reveal-duration: 1000ms;
}
.sec-h-reveal {
  --reveal-duration: 820ms;
}

/* =========================================================
   Page transition — big ball flies BL → TR, ink sheet wipes
   in/out behind it during navigation between .html pages.
   ========================================================= */
.page-transition {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
  visibility: hidden;
  overflow: hidden;
}
.page-transition[data-state="out"],
.page-transition[data-state="in"],
.page-transition[data-state="scroll"] {
  visibility: visible;
}
.page-transition__sheet {
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: 0;
  will-change: opacity;
}
.page-transition[data-state="out"] .page-transition__sheet {
  /* Sheet fades in over a shorter window so it covers the page before
     navigation while the ball is still flying through the second half. */
  animation: pt-sheet-cover 900ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.page-transition[data-state="in"] .page-transition__sheet {
  opacity: 1;
  animation: pt-sheet-uncover 700ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes pt-sheet-cover {
  from { opacity: 0; }
  60%  { opacity: 1; }
  to   { opacity: 1; }
}
@keyframes pt-sheet-uncover {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.page-transition__ball {
  position: absolute;
  /* Huge ball — clipping the viewport edges is intentional, it makes
     the fly-past feel weighty. */
  width: clamp(520px, 70vw, 900px);
  aspect-ratio: 1;
  bottom: 0;
  left: 0;
  color: var(--red);
  /* The wrapper only translates — the disc inside handles spin so the
     speed streaks behind the ball stay aligned with the motion path
     instead of rotating with the ball. */
  transform: translate(-100%, 100%);
  will-change: transform;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.45));
  display: none;
}
.page-transition__disc {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 2;
  transform: rotate(0deg);
}
/* Speed streaks behind the ball — three horizontal lines that fade
   from transparent at the trailing end to full red at the ball end.
   Anchored at the ball's centre and rotated so they extend down-left
   along the reverse of the motion path. */
.page-transition__streaks {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 260%;
  height: 70%;
  transform-origin: 100% 50%;
  /* translate(-100%, -50%) puts the SVG's right-middle at the ball's
     centre, then rotate(-45deg) swings the trail to point down-left —
     opposite the BL→TR motion direction. */
  transform: translate(-100%, -50%) rotate(-45deg);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}
/* Ball only flies on the OUTGOING leg of the transition. The incoming
   page just fades the cover sheet out — one pass total. */
.page-transition[data-state="out"] .page-transition__ball {
  display: block;
  /* Longer flight (1400ms) so the ball clearly crosses the entire
     viewport from bottom-left to top-right before the page navigates. */
  animation: pt-ball-fly 1400ms cubic-bezier(0.32, 0, 0.6, 1) forwards;
}
.page-transition[data-state="out"] .page-transition__disc {
  animation: pt-ball-spin 1400ms linear forwards;
}
.page-transition[data-state="out"] .page-transition__streaks {
  /* Streaks fade in quickly when the ball starts moving and fade back
     out near the end so the trail dissipates as the ball exits. */
  animation: pt-streaks-pulse 1400ms ease-in-out forwards;
}
/* Reverse leg — used when navigating back to the homepage so the ball
   flies the opposite way (top-right → bottom-left). Streaks rotate
   to point up-right (the new "behind" direction) and the disc spins
   counter-clockwise. */
.page-transition[data-state="out"][data-direction="reverse"] .page-transition__ball {
  animation-name: pt-ball-fly-reverse;
}
.page-transition[data-state="out"][data-direction="reverse"] .page-transition__disc {
  animation-name: pt-ball-spin-reverse;
}
.page-transition[data-direction="reverse"] .page-transition__streaks {
  transform: translate(-100%, -50%) rotate(135deg);
}
@keyframes pt-ball-fly {
  from {
    transform: translate(-100%, 100%);
  }
  to {
    transform: translate(calc(100vw + 80%), calc(-100vh - 80%));
  }
}
@keyframes pt-ball-fly-reverse {
  from {
    transform: translate(calc(100vw + 80%), calc(-100vh - 80%));
  }
  to {
    transform: translate(-100%, 100%);
  }
}
@keyframes pt-ball-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(900deg); }
}
@keyframes pt-ball-spin-reverse {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-900deg); }
}
@keyframes pt-streaks-pulse {
  0%   { opacity: 0; }
  18%  { opacity: 0.9; }
  82%  { opacity: 0.9; }
  100% { opacity: 0; }
}

/* ---------- Section-enter scroll-driven reveal ----------
   Triggered by scroll on any [data-section-transition] section.
   Unlike the page-nav transition (keyframe-based, plays once on
   click) this version is scrub-driven: JS computes a progress value
   from scroll position and writes CSS variables that the overlay
   reads in real-time. No keyframe animations here — the user IS the
   timeline.

   The variables (set by wireSectionScrollReveal):
     --pt-sheet-opacity   : 0 → 1 → 0 trapezoidal pulse
     --pt-streaks-opacity : 0 → 0.9 → 0 trapezoidal pulse
     --pt-ball-x / -y     : ball position along BL→TR diagonal
     --pt-ball-rot        : ball spin
*/
.page-transition[data-state="scroll"] .page-transition__sheet {
  opacity: var(--pt-sheet-opacity, 0);
  animation: none;
}
.page-transition[data-state="scroll"] .page-transition__ball {
  display: block;
  transform: translate(var(--pt-ball-x, -100%), var(--pt-ball-y, 100%));
  animation: none;
}
.page-transition[data-state="scroll"] .page-transition__disc {
  transform: rotate(var(--pt-ball-rot, 0deg));
  animation: none;
}
.page-transition[data-state="scroll"] .page-transition__streaks {
  opacity: var(--pt-streaks-opacity, 0);
  animation: none;
}

/* Reduced motion — skip the transition entirely. */
@media (prefers-reduced-motion: reduce) {
  .page-transition,
  .page-transition__sheet,
  .page-transition__ball {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   Coaching + Courses sub-pages (shared building blocks)
   ========================================================= */

/* ---------- Hero (shared by both sub-pages) ---------- */
.coach-hero {
  /* Football-themed placeholder backdrop: a brand-red glow top-right, a
     pitch-green glow bottom-left and a dark base. Swap in a real photo
     later by setting `background-image` on `.coach-hero` (keep the
     ::after overlay for legibility). */
  background:
    radial-gradient(72% 90% at 85% -15%, rgba(225, 29, 42, 0.22), transparent 60%),
    radial-gradient(85% 115% at 10% 120%, rgba(31, 92, 58, 0.30), transparent 55%),
    linear-gradient(155deg, #161a1f 0%, #0c0d0f 62%);
  color: var(--paper);
  padding: 132px 64px 80px;
  position: relative;
  overflow: hidden;
}
/* Faint soccer-ball placeholder texture. */
.coach-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='116'%20height='116'%20viewBox='0%200%20116%20116'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%20stroke-width='2.2'%3E%3Ccircle%20cx='58'%20cy='58'%20r='30'/%3E%3Cpolygon%20points='58,42%2073,53%2067,70%2049,70%2043,53'/%3E%3Cpath%20d='M58%2028%20V42%20M88%2058%20L73%2053%20M76%2086%20L67%2070%20M40%2086%20L49%2070%20M28%2058%20L43%2053'/%3E%3C/g%3E%3Cpolygon%20points='58,42%2073,53%2067,70%2049,70%2043,53'%20fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 116px 116px;
  opacity: 0.07;
  z-index: 0;
  pointer-events: none;
}
/* Depth + legibility wash so text stays crisp over any backdrop. */
.coach-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 13, 15, 0.12) 0%, rgba(12, 13, 15, 0) 38%, rgba(12, 13, 15, 0.8) 100%);
  z-index: 1;
  pointer-events: none;
}
/* Hero variant with a real photo backdrop. The photo sits at z0 (below the
   ::after wash and the z2 content); a strong left+bottom scrim on the photo
   keeps the left-aligned white text legible. */
.coach-hero--photo .coach-hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.coach-hero--photo .coach-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}
.coach-hero--photo .coach-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(12, 13, 15, 0.9) 0%, rgba(12, 13, 15, 0.62) 46%, rgba(12, 13, 15, 0.3) 100%),
    linear-gradient(180deg, rgba(12, 13, 15, 0.58) 0%, rgba(12, 13, 15, 0.12) 16%, rgba(12, 13, 15, 0) 44%, rgba(12, 13, 15, 0.72) 100%);
}
.coach-hero__back {
  position: absolute;
  top: 96px;
  left: 64px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(244, 242, 238, 0.65);
  text-decoration: none;
  transition: color 0.2s ease;
}
.coach-hero__back:hover { color: var(--paper); }
.coach-hero__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 2;
}
.coach-hero__inner .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.7);
  margin-bottom: 6px;
}
.coach-hero__inner .eyebrow .red-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  display: inline-block;
}
.coach-hero__title {
  font-size: clamp(46px, 5.4vw, 88px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 22ch;
}
.coach-hero__sub {
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.35;
  margin: 0;
  max-width: 720px;
  color: rgba(244, 242, 238, 0.88);
}
.coach-hero__tagline {
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
  max-width: 640px;
  color: rgba(244, 242, 238, 0.62);
}
.coach-hero__facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px dashed rgba(244, 242, 238, 0.18);
}
.coach-hero__fact-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.55);
  margin-bottom: 6px;
}
.coach-hero__fact-value {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--paper);
}

/* ---------- Section heading block (used everywhere) ---------- */
.sec-block__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 48px;
  max-width: 880px;
}
.sec-block__head--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.sec-block__head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.sec-block__head .eyebrow .red-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  display: inline-block;
}
.sec-block__title {
  font-size: clamp(36px, 4.4vw, 64px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0;
  max-width: 18ch;
}
.sec-block__head--center .sec-block__title { max-width: none; }
.sec-block__lead-wrap { margin-top: 8px; }
.sec-block__lead {
  font-size: 17px;
  line-height: 1.55;
  margin: 0 0 14px;
  color: var(--ink-mute);
  max-width: 64ch;
}
.sec-block__lead:last-child { margin-bottom: 0; }
[data-section-theme="dark"] .sec-block__head .eyebrow,
[data-section-theme="dark"] .sec-block__lead {
  color: rgba(244, 242, 238, 0.72);
}

/* ---------- Coaching: Pro section ---------- */
.coach-pro {
  background: var(--paper);
  color: var(--ink);
  padding: 120px 0 140px;
}
/* Målmandsudkast page: coach-pro and the "brugt af" brand strip are both
   cream, which stacked a lot of empty cream before the dark CTA. Tighten
   the seam. The :has()/adjacent selectors only match the goalkeeper page
   (the throw-in page's coach-pro is followed by the dark section, not the
   brand strip). */
.coach-pro:has(+ .talk-brands) { padding-bottom: 40px; }
.coach-pro + .talk-brands { padding-top: 36px; }
/* Throw-in page: tighten the cream tail before the dark CTA section, and
   drop the last content block's bottom margin so it doesn't stack with the
   section padding into a big empty cream run (the "for meget hvidt"). */
.coach-pro:has(+ .coach-amateur) { padding-bottom: 72px; }
.coach-pro__inner:last-child { margin-bottom: 0; }
.coach-pro__inner {
  max-width: 1180px;
  margin: 0 auto 64px;
  padding: 0 64px;
}
.coach-pro__inner--block { margin-bottom: 96px; }
.coach-pro__inner--why { margin-bottom: 56px; }
.coach-pro__lead {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
}
.coach-pro__lead p {
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
}

.pillars-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.pillar-card {
  background: rgba(28, 26, 24, 0.04);
  border: 1px solid rgba(28, 26, 24, 0.1);
  border-radius: 12px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pillar-card__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.pillar-card__body {
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  color: var(--ink-mute);
}
.pillar-card__list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pillar-card__list li {
  font-size: 14.5px;
  line-height: 1.45;
  padding-left: 20px;
  position: relative;
}
.pillar-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 12px;
  height: 1px;
  background: var(--red);
}
.pillar-card__note {
  font-style: italic;
  color: var(--ink-mute);
  font-size: 14px;
  margin: 8px 0 0;
  padding-top: 14px;
  border-top: 1px dashed rgba(28, 26, 24, 0.16);
}

.aud-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.aud-card {
  padding: 32px 28px;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.aud-card__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--red);
}
.aud-card__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.aud-card__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-mute);
  margin: 0;
}

.proc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.proc-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 0 24px 16px;
  border-left: 1px solid rgba(28, 26, 24, 0.15);
  position: relative;
}
.proc-step__num {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--red);
}
.proc-step__title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.proc-step__body {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-mute);
  margin: 0;
}

.coach-pro__cta {
  max-width: 980px;
  margin: 32px auto 0;
  padding: 56px 64px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.coach-pro__cta-title {
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
}
.coach-pro__cta-body {
  font-size: 16px;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 540px;
  color: rgba(244, 242, 238, 0.78);
}

/* ---------- Coaching: Amateur / Clubs & Talent section ---------- */
.coach-amateur {
  background: var(--ink);
  color: var(--paper);
  padding: 140px 0 120px;
}
.coach-amateur__inner {
  max-width: 1180px;
  margin: 0 auto 64px;
  padding: 0 64px;
}
.coach-amateur__inner--block { margin-bottom: 96px; }
.coach-amateur__lead {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
}
.coach-amateur__lead p {
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
  color: rgba(244, 242, 238, 0.86);
}

.types-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.type-card {
  padding: 36px 28px;
  background: rgba(244, 242, 238, 0.04);
  border: 1px solid rgba(244, 242, 238, 0.14);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.type-card__title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--paper);
}
.type-card__q {
  font-size: 15px;
  font-style: italic;
  color: rgba(244, 242, 238, 0.75);
  margin: 0;
  line-height: 1.5;
}
.type-card__list {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.type-card__list li {
  font-size: 14.5px;
  line-height: 1.45;
  padding-left: 20px;
  position: relative;
  color: rgba(244, 242, 238, 0.92);
}
.type-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 12px;
  height: 1px;
  background: var(--red);
}
.types-note {
  margin: 32px 0 0;
  font-style: italic;
  font-size: 15px;
  color: rgba(244, 242, 238, 0.75);
  max-width: 640px;
}

.pkg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pkg-card {
  padding: 32px 28px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pkg-card__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
}
.pkg-card__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

.opt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
/* A single talk shouldn't sit half-width with an empty column. */
.opt-grid--single {
  grid-template-columns: 1fr;
  max-width: 660px;
}
.opt-talk {
  padding: 36px 32px;
  background: rgba(244, 242, 238, 0.04);
  border: 1px solid rgba(244, 242, 238, 0.14);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.opt-talk__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--paper);
}
.opt-talk__sub {
  font-size: 14px;
  color: var(--red);
  margin: 0;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.04em;
}
.opt-talk__body {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(244, 242, 238, 0.82);
  margin: 0;
}
.opt-talk__list {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.opt-talk__list li {
  font-size: 14px;
  line-height: 1.4;
  padding-left: 18px;
  position: relative;
  color: rgba(244, 242, 238, 0.85);
}
.opt-talk__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 1px;
  background: var(--red);
}
.opt-talk__meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(244, 242, 238, 0.55);
  margin: 8px 0 0;
  padding-top: 14px;
  border-top: 1px dashed rgba(244, 242, 238, 0.16);
}

.coach-amateur__cta {
  max-width: 980px;
  margin: 0 auto;
  padding: 56px 64px;
  background: var(--red);
  color: var(--paper);
  border-radius: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.coach-amateur__cta .eyebrow {
  color: rgba(244, 242, 238, 0.8);
  margin-bottom: 8px;
}
.coach-amateur__cta-title {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0;
}
.coach-amateur__cta-body {
  font-size: 16px;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 620px;
  color: rgba(244, 242, 238, 0.88);
}
.coach-amateur__cta .btn-primary {
  background: var(--paper);
  color: var(--ink);
  margin-top: 8px;
}

/* ---------- Courses: intro + course blocks ---------- */
.courses-intro {
  background: var(--paper);
  color: var(--ink);
  padding: 120px 64px 80px;
}
.courses-intro__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.courses-intro__lead {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.courses-intro__lead p {
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
}

.course-block {
  padding: 120px 0;
}
.course-block--paper {
  background: var(--paper);
  color: var(--ink);
}
.course-block--ink {
  background: var(--ink);
  color: var(--paper);
}
/* Course "coming soon" — compact centred teaser (individual 1-on-1 course) */
.course-block--soon .course-soon {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: 8px 24px;
}
.course-block--soon .eyebrow { justify-content: center; }
.course-soon__sub {
  margin: 18px auto 0;
  max-width: 520px;
}
.course-soon__badge {
  display: inline-block;
  margin-top: 30px;
  padding: 11px 22px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
}
.course-block__inner {
  max-width: 1180px;
  margin: 0 auto 80px;
  padding: 0 64px;
}
.course-block__inner--head {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: start;
  margin-bottom: 96px;
}
.course-block__head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.course-block__head .eyebrow .red-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  display: inline-block;
}
.course-block__title {
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0 0 14px;
}
.course-block__sub {
  font-size: 17px;
  line-height: 1.5;
  margin: 0;
  max-width: 520px;
  opacity: 0.85;
}

.prob-card {
  padding: 36px 32px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.course-block--paper .prob-card {
  background: var(--ink);
  color: var(--paper);
}
.course-block--ink .prob-card {
  background: rgba(244, 242, 238, 0.06);
  border: 1px solid rgba(244, 242, 238, 0.14);
}
.prob-card__title {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}
.prob-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.prob-item {
  font-size: 15px;
  line-height: 1.5;
  padding-left: 24px;
  position: relative;
}
.prob-item::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--red);
  font-weight: 700;
}
.prob-card__note {
  font-style: italic;
  font-size: 14px;
  margin: 8px 0 0;
  padding-top: 14px;
  border-top: 1px dashed rgba(244, 242, 238, 0.2);
  opacity: 0.85;
}
.course-block--paper .prob-card__note {
  border-top-color: rgba(244, 242, 238, 0.22);
}

.teach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.teach-card {
  padding: 32px 28px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.course-block--paper .teach-card {
  background: rgba(28, 26, 24, 0.04);
  border: 1px solid rgba(28, 26, 24, 0.1);
}
.course-block--ink .teach-card {
  background: rgba(244, 242, 238, 0.04);
  border: 1px solid rgba(244, 242, 238, 0.14);
}
.teach-card__title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}
.teach-card__body {
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  opacity: 0.82;
}

.mod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mod-card {
  padding: 36px 28px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.course-block--paper .mod-card {
  background: var(--ink);
  color: var(--paper);
}
.course-block--ink .mod-card {
  background: var(--paper);
  color: var(--ink);
}
.mod-card__num {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--red);
}
.mod-card__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.mod-card__list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mod-card__list li {
  font-size: 14.5px;
  line-height: 1.45;
  padding-left: 20px;
  position: relative;
}
.mod-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 12px;
  height: 1px;
  background: var(--red);
}

.ex-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ex-card {
  padding: 32px 28px;
  border-radius: 12px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.course-block--paper .ex-card {
  background: rgba(28, 26, 24, 0.04);
  border: 1px solid rgba(28, 26, 24, 0.1);
}
.course-block--ink .ex-card {
  background: rgba(244, 242, 238, 0.04);
  border: 1px solid rgba(244, 242, 238, 0.14);
}
.ex-card__name {
  grid-column: 1 / -1;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--red);
  margin-bottom: 12px;
}
.ex-card__from,
.ex-card__to {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ex-card__to { color: var(--red); }
.ex-card__arrow {
  font-size: 20px;
  opacity: 0.5;
}
.ex-note {
  text-align: center;
  font-style: italic;
  font-size: 15px;
  margin: 32px auto 0;
  max-width: 640px;
  opacity: 0.75;
}

.course-block__inner--bottom {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: start;
  margin-bottom: 48px;
}
.for-block { display: flex; flex-direction: column; gap: 16px; }
.for-block .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.for-block .eyebrow .red-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  display: inline-block;
}
.for-block__title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
}
.for-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.for-item {
  font-size: 16px;
  line-height: 1.4;
  padding-left: 24px;
  position: relative;
}
.for-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 14px;
  height: 1px;
  background: var(--red);
}

.proof-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-self: stretch;
}
.proof-pill {
  padding: 20px 22px;
  border-radius: 10px;
}
.course-block--paper .proof-pill {
  background: rgba(28, 26, 24, 0.04);
  border: 1px solid rgba(28, 26, 24, 0.1);
}
.course-block--ink .proof-pill {
  background: rgba(244, 242, 238, 0.04);
  border: 1px solid rgba(244, 242, 238, 0.14);
}
.proof-pill__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 4px;
}
.proof-pill__value {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.guarantee {
  max-width: 880px;
  margin: 0 auto 48px;
  padding: 0 64px;
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  opacity: 0.8;
}

.course-block__cta {
  max-width: 980px;
  margin: 0 auto;
  padding: 56px 64px;
  border-radius: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.course-block--paper .course-block__cta {
  background: var(--ink);
  color: var(--paper);
}
.course-block--ink .course-block__cta {
  background: var(--red);
  color: var(--paper);
}
.course-block__cta-title {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
}
.course-block__cta-body {
  font-size: 16px;
  line-height: 1.5;
  margin: 0 auto 4px;
  max-width: 540px;
  opacity: 0.82;
}

.courses-closing {
  background: var(--ink);
  color: var(--paper);
  padding: 120px 64px 140px;
  text-align: center;
}
.courses-closing__inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.courses-closing__inner .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.7);
}
.courses-closing__inner .eyebrow .red-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  display: inline-block;
}
.courses-closing__title {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin: 0;
}
.courses-closing__lead {
  font-size: 17px;
  line-height: 1.55;
  margin: 0 auto;
  max-width: 540px;
  color: rgba(244, 242, 238, 0.82);
}

/* ---------- Books index sub-page ---------- */
.books-index {
  background: var(--paper);
  color: var(--ink);
  padding: 160px 64px 96px;
}
.books-index__head {
  max-width: 1180px;
  margin: 0 auto 80px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.books-index__head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.books-index__head .eyebrow .red-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  display: inline-block;
}
.books-index__title {
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 0.98;
  margin: 0;
}
.books-index__lead {
  font-size: 18px;
  line-height: 1.55;
  margin: 12px 0 0;
  max-width: 64ch;
  color: var(--ink-mute);
}
.books-index__grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
}
.bx-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 28px 28px 32px;
  border: 1px solid rgba(28, 26, 24, 0.12);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.bx-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -20px rgba(28, 26, 24, 0.28);
}
.bx-card__cover {
  aspect-ratio: 2 / 3;
  position: relative;
}
.bx-card__cover .book-cover { position: absolute; inset: 0; }
.bx-card__num {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 6px;
}
.bx-card__title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.bx-card__sub {
  font-size: 15px;
  color: var(--ink-mute);
  margin: 4px 0 0;
  font-style: italic;
}
.bx-card__desc {
  font-size: 14.5px;
  line-height: 1.55;
  margin: 12px 0 0;
  color: var(--ink-mute);
}
.bx-card__cta {
  margin-top: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--red);
}
/* Unreleased "coming soon" book — not a link, so no hover lift; the single
   teaser line sits centred in the space the blurb would have filled. */
.bx-card--soon {
  cursor: default;
}
.bx-card--soon:hover {
  transform: none;
  box-shadow: none;
}
.bx-card--soon .bx-card__meta {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.bx-card__soon {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  font-style: italic;
  color: var(--ink-mute);
}
/* Language badge on book cards — makes clear that the two published books
   are in Danish and the coming edition is in English. */
.bx-card__lang {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 8px;
  vertical-align: 1px;
  white-space: nowrap;
}
.bx-card--soon .bx-card__meta {
  flex-direction: column;
  gap: 12px;
}
.bx-card--soon .bx-card__lang {
  margin-left: 0;
}

/* ---------- Press sub-page ---------- */
.press {
  background: var(--ink);
  color: var(--paper);
  padding: 160px 64px 96px;
}
.press__inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.press__inner .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.7);
}
.press__inner .eyebrow .red-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  display: inline-block;
}
.press__title {
  font-size: clamp(48px, 6.5vw, 96px);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 0.98;
  margin: 0;
}
.press__lead {
  font-size: 18px;
  line-height: 1.55;
  margin: 0;
  max-width: 60ch;
  color: rgba(244, 242, 238, 0.78);
}
.press__grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.press-tile {
  padding: 28px 28px;
  border-radius: 12px;
  border: 1px solid rgba(244, 242, 238, 0.14);
  background: rgba(244, 242, 238, 0.04);
}
.press-tile__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}
.press-tile__value {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.press__cta { align-self: flex-start; margin-top: 24px; }

/* ---------- Contact sub-page ---------- */
.contact {
  background: var(--paper);
  color: var(--ink);
  padding: 160px 64px 96px;
}
.contact__inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact__inner .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.contact__inner .eyebrow .red-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  display: inline-block;
}
.contact__title {
  font-size: clamp(48px, 6.5vw, 96px);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 0.98;
  margin: 0;
}
.contact__lead {
  font-size: 18px;
  line-height: 1.55;
  margin: 0;
  max-width: 60ch;
  color: var(--ink-mute);
}
.contact__grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.contact-channel {
  padding: 28px 28px;
  border-radius: 12px;
  border: 1px solid rgba(28, 26, 24, 0.12);
  background: var(--paper);
}
.contact-channel__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}
.contact-channel__value {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}
a.contact-channel__value--link {
  display: inline-block;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s ease;
}
a.contact-channel__value--link:hover { color: var(--red); }
.contact-channel__sub {
  font-size: 14px;
  color: var(--ink-mute);
}
.contact__cta { align-self: flex-start; margin-top: 24px; }

/* Once the side-gaps around the inset CTA cards get too small to read as
   intentional, let the cards run edge-to-edge with square corners instead. */
@media (max-width: 1080px) {
  .coach-pro__cta,
  .coach-amateur__cta,
  .course-block__cta {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
  }
}

/* ---------- Mobile collapses ---------- */
@media (max-width: 768px) {
  .coach-hero { padding: 120px 24px 64px; }
  .coach-hero__facts { grid-template-columns: 1fr 1fr; }
  .books-index { padding: 120px 20px 100px; }
  .books-index__grid { grid-template-columns: 1fr; }
  .press,
  .contact { padding: 120px 20px 100px; }
  .press__grid,
  .contact__grid { grid-template-columns: 1fr; }

  .coach-pro,
  .coach-amateur,
  .course-block,
  .courses-closing { padding: 80px 0; }
  .coach-pro__inner,
  .coach-amateur__inner,
  .course-block__inner { padding: 0 20px; }
  .pillars-grid,
  .aud-grid,
  .proc-grid,
  .types-grid,
  .pkg-grid,
  .opt-grid,
  .teach-grid,
  .mod-grid,
  .ex-grid,
  .proof-strip { grid-template-columns: 1fr; }
  .courses-intro { padding: 80px 20px; }
  .courses-intro__inner,
  .course-block__inner--head,
  .course-block__inner--bottom { grid-template-columns: 1fr; gap: 36px; }
  .coach-pro__cta,
  .coach-amateur__cta,
  .course-block__cta { padding: 40px 24px; margin-left: 0; margin-right: 0; border-radius: 0; }
  .courses-closing { padding: 80px 24px 100px; }
}

/* =========================================================
   Book sub-page
   ========================================================= */
.book-page__hero {
  background: var(--paper);
  color: var(--ink);
  padding: 140px 64px 80px;
  position: relative;
}
.book-page__back {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-decoration: none;
  margin-bottom: 48px;
  transition: color 0.2s ease;
}
.book-page__back:hover { color: var(--red); }
.book-page__hero-grid {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 80px;
  align-items: center;
}
.book-page__cover-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
/* Override the absolute-positioned fan card geometry for the hero
   variant — here the card just sits in normal flow at a larger size. */
.book-card--hero {
  position: relative;
  top: auto;
  left: auto;
  margin: 0;
  width: min(100%, 360px);
  cursor: default;
  /* Subtle floating tilt so the hero feels alive without animating. */
  transform: rotate(-2.5deg);
  transform-origin: 50% 50%;
}
.book-card--hero .book-cover {
  border-radius: 18px;
  box-shadow:
    0 50px 90px -28px rgba(28, 26, 24, 0.45),
    0 24px 50px -20px rgba(28, 26, 24, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.book-card--hero:hover .book-cover {
  /* No hover scale on the hero variant. */
  transform: none;
  box-shadow:
    0 50px 90px -28px rgba(28, 26, 24, 0.45),
    0 24px 50px -20px rgba(28, 26, 24, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.book-page__hero-text { display: flex; flex-direction: column; gap: 16px; }
.book-page__title {
  font-size: 84px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.92;
  margin: 8px 0 0;
  text-transform: uppercase;
}
.book-page__sub {
  font-size: 22px;
  font-style: italic;
  color: var(--ink-mute);
  margin: 0;
}
.book-page__tagline {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 16px 0 0;
  max-width: 540px;
}

/* Lead — long copy + facts/chapters aside */
.book-page__lead {
  background: var(--paper);
  color: var(--ink);
  padding: 60px 64px 120px;
}
.book-page__lead-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 80px;
  border-top: 1px solid var(--ink);
  padding-top: 64px;
}
.book-page__lead-text p {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 20px;
  max-width: 580px;
}
.book-page__lead-text p:last-child { margin-bottom: 0; }
.book-page__lead-aside { display: flex; flex-direction: column; gap: 40px; }
.book-page__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 24px;
  margin: 0;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--ink);
}
.book-page__fact { display: contents; }
.book-page__fact dt {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  align-self: center;
}
.book-page__fact dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.book-page__chapters-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 16px;
}
.book-page__chapters-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  color: var(--ink);
}
.book-page__chapters-list li {
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(28, 26, 24, 0.18);
}
.book-page__chapters-list li:last-child { border-bottom: none; }

/* Buy panel — signed / regular toggle + reactive CTA */
.book-page__buy {
  background: var(--ink);
  color: var(--on-dark);
  padding: 100px 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.book-page__buy-head { display: flex; flex-direction: column; gap: 16px; }
.book-page__buy-title {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.95;
  margin: 0;
  text-transform: uppercase;
}
.book-page__buy-body {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(244, 242, 238, 0.7);
  margin: 0;
  max-width: 440px;
}
.book-page__buy-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.book-buy-opt {
  position: relative;
  cursor: pointer;
  display: block;
}
.book-buy-opt input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.book-buy-opt__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label price"
    "desc  price";
  gap: 4px 16px;
  align-items: center;
  padding: 20px 24px;
  border: 1px solid rgba(244, 242, 238, 0.18);
  border-radius: 12px;
  background: rgba(244, 242, 238, 0.03);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.book-buy-opt:hover .book-buy-opt__inner {
  border-color: rgba(244, 242, 238, 0.35);
  background: rgba(244, 242, 238, 0.06);
}
.book-buy-opt input:checked ~ .book-buy-opt__inner {
  border-color: var(--red);
  background: rgba(225, 29, 42, 0.08);
}
.book-buy-opt input:focus-visible ~ .book-buy-opt__inner {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.book-buy-opt__label {
  grid-area: label;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.book-buy-opt__desc {
  grid-area: desc;
  font-size: 12px;
  color: rgba(244, 242, 238, 0.6);
}
.book-buy-opt__price {
  grid-area: price;
  font-family: "JetBrains Mono", monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--on-dark);
}
.book-page__buy-action {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 8px;
}
.book-page__buy-price {
  font-family: "JetBrains Mono", monospace;
  font-size: 24px;
  font-weight: 700;
  color: var(--on-dark);
}
.book-page__buy-cta {
  background: var(--red);
  color: var(--on-dark);
  padding: 18px 28px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.book-page__buy-cta:hover {
  background: #c8161f;
  transform: translateY(-1px);
}

/* Related books */
.book-page__related {
  background: var(--paper);
  color: var(--ink);
  padding: 100px 64px;
}
.book-page__related-title {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin: 0 0 48px;
  text-transform: uppercase;
}
.book-page__related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
}
.book-related-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: start;
  text-decoration: none;
  color: var(--ink);
  padding: 24px;
  border: 1px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.32, 1), box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.32, 1);
}
.book-related-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -16px rgba(28, 26, 24, 0.18);
}
.book-related-card .book-cover {
  aspect-ratio: 3 / 4;
  height: auto;
  width: 100%;
  padding: 16px;
  border-radius: 10px;
}
.book-related-card .book-cover__title { font-size: 22px; }
.book-related-card__body { display: flex; flex-direction: column; gap: 6px; }
.book-related-card__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 4px 0 0;
}
.book-related-card__sub {
  font-size: 14px;
  font-style: italic;
  color: var(--ink-mute);
  margin: 0;
}
/* Unreleased "coming soon" book in the related rail — not a link. */
.book-related-card--soon { cursor: default; }
.book-related-card--soon:hover { transform: none; box-shadow: none; }
.book-related-card--soon .book-related-card__body { justify-content: center; }
.book-related-card__soon {
  margin: 0;
  font-size: 16px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-mute);
}

/* =========================================================
   Responsive — tablet and below
   ========================================================= */
@media (max-width: 1024px) {
  /* Talks split — pair each face with its text column on a 2x2 grid.
     The cards + references are too tall to pin on small screens, so the
     stage falls back to normal flow (no sticky frame). */
  .talks-split { height: auto; }
  .talks-split__pin {
    position: static;
    height: auto;
    overflow: visible;
    display: block;
    padding: 80px 0;
  }
  .talks-split__pin .brand-ticker { padding: 40px 0 0; }
  .split-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "face-left  col-left"
      "col-right  face-right";
    min-height: auto;
    row-gap: 32px;
  }
  .split-face--left  { grid-area: face-left; }
  .split-col--left   { grid-area: col-left; }
  .split-col--right  { grid-area: col-right; }
  .split-face--right { grid-area: face-right; }
  .split-face { height: 360px; }
  .split-col { padding: 32px; }
  /* Solo (English) stacks to a single column; themes become centred rows. */
  .split-grid--solo {
    grid-template-columns: 1fr;
    grid-template-areas: none;
    max-width: 520px;
  }
  .split-grid--solo .split-col--right { grid-area: auto; }
  .split-grid--solo .split-themes {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  .topbar,
  .menu-top { padding: 24px 24px 24px 32px; }
  .menu-body { padding: 48px 32px 32px; grid-template-columns: 1fr; gap: 48px; }
  .menu-foot { padding: 20px 32px; }
  .menu-item__label { font-size: 48px; }

  .hero__text { left: 32px; bottom: 48px; max-width: none; right: 32px; }
  .hero__name { font-size: 64px; }
  .hero__title { font-size: 22px; }

  .ticker { padding: 24px 0; }
  .ticker__track { gap: 40px; }
  .ticker__item { gap: 40px; }
  .club-logo,
  .club-logo--img { height: 72px; width: 72px; }
  .club-trophy { top: -4px; right: -8px; min-width: 22px; height: 22px; font-size: 10px; }
  .club-trophy svg { width: 11px; height: 11px; }
  /* Keep the titles tooltip inside the small viewport + single column. */
  .club-titles { max-width: min(82vw, 300px); padding: 11px 13px; }
  .club-titles--wide { max-width: min(82vw, 300px); }
  .club-titles--wide .club-titles__list { grid-template-columns: 1fr; }
  .club-titles__list li { white-space: normal; }

  .talks,
  .books,
  .some,
  .takeaways,
  .outline,
  .testimonials,
  .booking { padding: 80px 32px; }
  .blog { padding: 0 32px 80px; }
  .blog__head { padding-top: 64px; }

  .booking__title { font-size: 48px; }
  .timeline-header { left: 32px; right: 32px; top: 64px; }
  .timeline-header__title { font-size: 44px; }

  .talks__head,
  .books__head,
  .blog__head,
  .some__head,
  .sec-head,
  .venues__head,
  .booking,
  .talk-hero__bottom { grid-template-columns: 1fr; gap: 24px; }
  .booking { gap: 32px; }
  .talks__h,
  .books__h,
  .blog__h,
  .some__h,
  .sec-h { font-size: 48px; }

  /* Talk sub-page sections — collapse to single column */
  .talk-brands { padding: 40px 32px 32px; }
  .talks-list { padding: 56px 32px 80px; }
  .talk-item { grid-template-columns: 1fr; gap: 24px; padding-top: 40px; }
  .talk-item__title { font-size: 32px; }
  .testimonials-grid { padding: 0 32px 80px; }
  .testimonials-grid__items { grid-template-columns: repeat(2, 1fr); gap: 32px; }

  /* Sticky talks — tighter padding + single-col body on tablets */
  .talks-sticky { padding: 56px 0 0; }
  .talks-sticky__heading { padding: 0 32px 40px; }
  .talks-sticky__pin { padding: 48px 32px; }
  .talks-sticky__inner { gap: 32px; }
  .talks-sticky__body { grid-template-columns: 1fr; gap: 28px; }
  .talks-sticky__watermark { font-size: clamp(180px, 32vw, 320px); left: -8px; }

  /* Scatter testimonials — collapse the canvas to a 2-col flow on
     tablets. Cards lose their absolute positioning + rotation. */
  .testimonials-scatter { padding: 80px 32px; }
  .testimonials-scatter__canvas {
    position: static;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .testimonial-scatter {
    position: static;
    width: auto;
    transform: none;
    opacity: 1;
  }
  .testimonial-scatter.is-in,
  .testimonial-scatter:hover.is-in {
    transform: none;
  }

  .talks__grid,
  .blog__grid,
  .some__channels,
  .some__grid,
  .testimonials__grid { grid-template-columns: 1fr; }

  /* Blog index + feature card + post — collapse for tablets/phones */
  .blog-page { padding: 120px 32px 80px; }
  .blog-page__grid { grid-template-columns: 1fr; }
  .blog-card--feature .blog-card__link { flex-direction: column; }
  .blog-card--feature .blog-card__thumb {
    border-right: none;
    border-bottom: 1px solid var(--ink);
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  .blog-card--feature .blog-card__body { padding: 32px; }
  .post { padding: 120px 24px 80px; }

  /* Coaching: routes tiles to a single column */
  .coaching { padding: 0; }
  .photo-break { height: 150vh; margin-top: -20vh; }
  /* Cards stack on small screens and can't fit a 100vh pin — drop the
     glide-over and let the green pitch panel flow normally. */
  .coaching__routes-stage { height: auto; margin-top: 0; background: var(--pitch); }
  .coaching__routes {
    position: static;
    height: auto;
    min-height: auto;
    padding: 64px 0;
    box-shadow: none;
    /* No scale-down exit on mobile (the pin is static, not glide-over). */
    transform: none;
    border-radius: 0;
  }
  .coaching__routes-inner { padding: 64px 22px; opacity: 1; }
  .coaching__grid { grid-template-columns: 1fr; gap: 20px; }
  .coaching-tile { padding: 36px 24px 28px; min-height: 0; }
  .coaching-tile__num { font-size: 110px; right: 18px; }
  .coaching-tile__foot { flex-direction: column; align-items: flex-start; gap: 14px; }

  /* Pitch-build (phone): contained board below the intro text; phase 3
     pushes the pitch into the UPPER half (no right-shift) and stacks a
     compact caption in the lower half over a dark scrim — no overlap. */
  .pitch-build { height: 600vh; }
  .pitch-build__field {
    top: calc(40vh - var(--expand) * 40vh);
    bottom: calc(8vh - var(--expand) * 8vh);
    left: calc(7vw - var(--expand) * 7vw);
    right: calc(7vw - var(--expand) * 7vw);
  }
  /* Dark scrim across the bottom (fades in with the field) so the
     caption text below stays legible over the grass. */
  .pitch-build__field::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 58%;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.62));
    opacity: var(--expand);
    pointer-events: none;
  }
  .pitch-build__intro { top: 6vh; }
  .pitch-build__h { font-size: clamp(30px, 8vw, 44px); }
  .pitch-build__body { font-size: 15px; }
  /* Phase 3: no right-shift; lift the pitch up + shrink so the lower
     half is free for the caption. */
  .pitch-build__svg {
    max-height: 100%;
    transform: translateY(calc(var(--shift) * -13vh)) scale(calc(1 - var(--shift) * 0.16));
  }
  .pitch-build__captions {
    left: 22px;
    right: 22px;
    top: auto;
    transform: none;
    bottom: 64px;
    width: auto;
    height: 300px;
  }
  .pitch-build__hud { right: 22px; bottom: 70px; }
  .pb-chapter { text-shadow: 0 2px 20px rgba(0, 0, 0, 0.7); }
  .pb-chapter__title { font-size: clamp(28px, 7.5vw, 40px); }
  .pb-chapter__desc { font-size: 15px; }
  .pb-chapter__points { display: none; } /* keep the phone panel compact */
  .pb-chapter__foot { gap: 24px; margin-top: 22px; padding-top: 18px; }
  .pb-chapter__stat-value { font-size: 38px; }
  .pb-chapter__stat-label { margin-top: 10px; }
  .pb-chapter__cta {
    display: flex;
    justify-content: center;
    margin-top: 22px;
    width: 100%;
    box-sizing: border-box;
  }

  /* Books: collapse fan to a single vertical stack — JS sets --p-fan to 1
     on mobile so the absolute positioning is irrelevant; we override here
     to render as a normal flow. */
  .books { padding-bottom: 80px; }
  .books__stage { height: auto; margin-top: 8px; }
  .books__fan-sticky { position: static; height: auto; padding: 32px 0 24px; display: flex; flex-direction: column; gap: 32px; }
  .books__head-sticky { position: static; max-width: none; padding: 0 0 8px; }
  .books__h { font-size: 44px; }
  .books__fan { height: auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 28px; }
  .book-card,
  .book-card--left,
  .book-card--center,
  .book-card--right {
    position: static;
    margin: 0;
    transform: none !important;
    width: min(260px, 70vw);
  }

  .takeaways__grid { grid-template-columns: repeat(2, 1fr); }
  .takeaway-card { border-bottom: 1px solid var(--ink); }
  .takeaway-card:nth-child(2n) { border-right: none; }

  .outline__row { grid-template-columns: 80px 1fr; gap: 16px; }
  .outline__desc { grid-column: 1 / -1; }
  .outline__title { font-size: 22px; }

  .talk-hero__inner { padding: 0 32px; }
  .talk-hero__title { font-size: 64px; }
  .talk-hero__tagline { font-size: 20px; }

  .footer { padding: 64px 32px 32px; }
  .footer__top { grid-template-columns: 1fr; gap: 40px; padding-bottom: 40px; }
  .footer__nl-title { font-size: 32px; }
  .footer__wordmark { font-size: 96px; margin: 32px 0 24px; }
  .footer__bottom { flex-direction: column; gap: 12px; align-items: flex-start; }

  /* Book sub-page — collapse 2-column layouts */
  .book-page__hero { padding: 100px 32px 64px; }
  .book-page__hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .book-page__title { font-size: 56px; }
  .book-page__lead { padding: 48px 32px 80px; }
  .book-page__lead-grid { grid-template-columns: 1fr; gap: 48px; padding-top: 48px; }
  .book-page__buy { padding: 64px 32px; grid-template-columns: 1fr; gap: 32px; }
  .book-page__buy-title { font-size: 40px; }
  .book-page__related { padding: 64px 32px; }
  .book-page__related-grid { grid-template-columns: 1fr; gap: 24px; }
  .book-related-card { grid-template-columns: 140px 1fr; padding: 16px; gap: 16px; }
}

/* Mobile collapse — horizontal scroll doesn't work, stack vertically.
   JS keeps running harmlessly because we override its transform. */
@media (max-width: 720px) {
  /* Talks split — full vertical stack */
  .talks-split { padding: 56px 0; }
  .split-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "face-left"
      "col-left"
      "face-right"
      "col-right";
    row-gap: 24px;
  }
  .split-face { height: 260px; }
  .split-col { padding: 24px 24px 40px; }
  .split-headline { font-size: 72px; }
  .split-desc { font-size: 16px; }
  .split-grid--solo { grid-template-areas: none; max-width: 460px; }

  .timeline-section {
    height: auto;
    padding: 80px 0 80px;
  }
  .timeline-sticky {
    position: static;
    height: auto;
    overflow: visible;
  }
  .timeline-bg-tint { display: none; }
  .timeline-header {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    padding: 0 20px;
    margin-bottom: 56px;
    max-width: none;
  }
  .timeline-header__title { font-size: 36px; white-space: normal; }
  .timeline-canvas {
    position: static;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 70px;
    padding: 0 20px;
    transform: none !important;
  }
  .timeline-lines { display: none; }
  .event,
  .event-quote {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    max-width: 60vw;
  }
  .event:nth-of-type(odd) { align-self: flex-start; }
  .event:nth-of-type(even) { align-self: flex-end; }
  .event-quote {
    align-self: center;
    max-width: 88vw;
    text-align: center;
  }
  .event-quote p { font-size: 22px; }
}

@media (max-width: 640px) {
  .topbar,
  .menu-top { grid-template-columns: auto 1fr auto; padding: 20px 16px; gap: 12px; }
  .topbar__left,
  .menu-top .topbar__left { display: none; }
  .topbar__logo { font-size: 15px; }
  .menu-btn { padding: 10px 14px; font-size: 11px; letter-spacing: 0.1em; gap: 8px; }

  .hero { min-height: 600px; }
  .hero__text { left: 20px; right: 20px; bottom: 32px; }
  .hero__name { font-size: 48px; }
  .hero__title { font-size: 18px; margin-top: 14px; }
  .btn-primary,
  .btn-secondary { padding: 12px 16px; font-size: 12px; }

  /* Talk sub-page — full mobile collapse */
  .talk-brands { padding: 32px 20px 24px; }
  .talks-list { padding: 40px 20px 64px; }
  .talk-item__title { font-size: 28px; }
  .testimonials-grid { padding: 0 20px 64px; }
  .testimonials-grid__items { grid-template-columns: 1fr; gap: 24px; }

  /* Sticky talks on mobile — drop the sticky behaviour, flow naturally
     so the experience doesn't fight the touch scroll. */
  .talks-sticky__heading { padding: 0 20px 32px; }
  .talks-sticky__pin { position: static; height: auto; padding: 48px 20px; }
  .talks-sticky__title { font-size: 36px; }
  .talks-sticky__sub { font-size: 16px; }
  .talks-sticky__watermark { font-size: 180px; opacity: 0.04; }

  /* Scatter testimonials — full single-column stack on mobile */
  .testimonials-scatter { padding: 56px 20px; }
  .testimonials-scatter__canvas { grid-template-columns: 1fr; gap: 16px; }

  .ticker__label { padding: 0 20px 16px; font-size: 11px; }
  .ticker__track { gap: 32px; }
  .ticker__item { gap: 32px; }
  .ticker__star { font-size: 18px; }
  .club-logo,
  .club-logo--img { height: 60px; width: 60px; }
  .club-trophy { top: -3px; right: -7px; min-width: 20px; height: 20px; font-size: 9px; }
  .club-trophy svg { width: 10px; height: 10px; }

  .talks,
  .books,
  .some,
  .takeaways,
  .outline,
  .testimonials,
  .booking { padding: 64px 20px; }
  .blog { padding: 0 20px 64px; }
  .blog__head { padding-top: 48px; }
  .timeline-header { padding: 0 16px; }
  .timeline-header__title { font-size: 28px; }
  .timeline-canvas { padding: 0 16px; }

  .talks__h,
  .books__h,
  .blog__h,
  .some__h,
  .sec-h,
  .booking__title { font-size: 36px; }

  .book-card { grid-template-columns: 1fr; }
  .takeaways__grid { grid-template-columns: 1fr; }
  .takeaway-card { border-right: none; }

  .footer { padding: 48px 20px 24px; }
  .footer__nl-title { font-size: 28px; }
  .footer__wordmark { font-size: 64px; }

  .talk-hero__inner { padding: 0 20px; }
  .talk-hero__title { font-size: 40px; }
  .talk-hero__tagline { font-size: 16px; margin-top: 20px; }
  .talk-hero__bottom { margin-top: 40px; padding-top: 32px; gap: 32px; }

  .venues__head { padding: 64px 20px 32px; }
  .venues__track { font-size: 24px; gap: 32px; }
  .venues__item { gap: 32px; }
}

/* =====================================================================
   MOBILE OPTIMISATION PASS (phone). Appended LAST so it wins the cascade
   over the earlier 1024 / 768 / 720 / 640 / 560 media blocks. Scaling,
   centering and overflow fixes only — desktop (>768px) is untouched.
   Audited at 320–430px across every page.
   ===================================================================== */
@media (max-width: 768px) {
  /* Global: kill horizontal scroll (clip = sticky-safe) + min tap targets */
  html, body { overflow-x: clip; max-width: 100%; }
  .btn-primary, .btn-secondary { min-height: 44px; box-sizing: border-box; }

  /* Title reveal ball: decorative, hover-less, overflows the edge. Hide it
     and snap text to revealed state (mirrors the prefers-reduced-motion rule). */
  .reveal__ball, .reveal__ball-trail, .reveal__ball-disc { display: none !important; }
  .reveal__text { clip-path: inset(-8% -4% -8% -4%) !important; transition: none !important; }
  /* Deeper top buffer for the big talk-hero title so umlauts (STÄRKEN)
     survive — same reason as the desktop rule, but the mobile reset above
     uses !important so this must too. */
  .talk-hero__title .reveal__text { clip-path: inset(-22% -4% -8% -4%) !important; }

  /* Menu overlay */
  .menu-overlay {
    width: 100%;
    min-height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .menu-top {
    position: sticky;
    top: 0;
    z-index: 2;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 18px 16px;
    gap: 12px;
    background: var(--ink);
  }
  .menu-top .topbar__logo {
    justify-self: start;
    min-width: 0;
  }
  .menu-close {
    justify-self: end;
    padding: 12px 14px;
    font-size: 11px;
    gap: 8px;
    min-height: 44px;
  }
  .menu-body {
    display: flex;
    flex-direction: column;
    padding: 24px 20px 28px;
    gap: 28px;
  }
  .menu-list { width: 100%; }
  .menu-aside {
    gap: 22px;
    padding-top: 2px;
  }
  .menu-item {
    grid-template-columns: 30px minmax(0, 1fr) 28px;
    align-items: start;
    gap: 12px;
    padding: 15px 0;
    min-height: 58px;
  }
  .menu-item__num {
    padding-top: 3px;
    font-size: 11px;
  }
  .menu-item__label {
    display: block;
    max-width: 100%;
    overflow: visible;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    font-size: clamp(27px, 8vw, 36px);
    line-height: 1;
    letter-spacing: -0.015em;
  }
  .menu-item__arrow {
    width: 28px;
    padding-top: 0;
    text-align: right;
    font-size: 22px;
    line-height: 1;
  }
  .menu-item__label .title-char,
  .menu-item__child-label .title-char {
    display: inline !important;
    height: auto;
    overflow: visible;
    vertical-align: baseline;
  }
  .menu-item__label .title-marquee,
  .menu-item__child-label .title-marquee {
    display: inline !important;
    transform: none !important;
    transition: none;
    will-change: auto;
  }
  .menu-item__label .title-line,
  .menu-item__child-label .title-line {
    display: inline;
    height: auto;
    line-height: inherit;
  }
  .menu-item__label .title-line + .title-line,
  .menu-item__child-label .title-line + .title-line { display: none; }
  .menu-overlay .menu-item__children {
    grid-column: 2 / -1;
    grid-template-rows: 1fr;
    margin-top: 12px;
  }
  .menu-overlay .menu-item__children-inner {
    overflow: visible;
  }
  .menu-overlay .menu-item__child {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .menu-item__child {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    min-height: 44px;
    padding: 10px 0;
    font-size: clamp(15px, 4.2vw, 17px);
    line-height: 1.15;
  }
  .menu-item__child-bullet {
    width: 14px;
    margin-left: 0;
    margin-top: 9px;
  }
  .menu-item__child-label {
    display: block;
    min-width: 0;
    overflow-wrap: normal;
  }
  .menu-overlay .menu-item--group .menu-item__arrow { transform: rotate(180deg); }
  .menu-lang {
    width: 100%;
    justify-content: space-between;
  }
  .menu-lang button {
    flex: 1;
    justify-content: center;
    padding: 12px 14px;
    min-height: 44px;
  }
  .menu-aside__link {
    min-height: 44px;
    padding: 10px 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
  }
  .menu-aside__link span.handle { margin-left: 0; }
  .menu-foot {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    font-size: 10px;
    line-height: 1.4;
    text-align: center;
  }

  /* Footer — scale down so it fits (client-flagged) */
  .footer__wordmark { font-size: clamp(40px, 13.3vw, 56px); margin: 32px 0 20px; }
  .footer__col-list { gap: 4px; }
  .footer__col-list a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Enquiry / booking modal — tap targets */
  .bk-modal__close { width: 44px; height: 44px; top: 8px; right: 8px; font-size: 26px; }
  .bk-d { aspect-ratio: auto; min-height: 40px; font-size: 15px; }

  /* Homepage hero + ticker */
  .hero__name { overflow-wrap: break-word; max-width: 100%; }
  .hero__cta-row { gap: 10px; }
  .hero__cta-row .btn-primary, .hero__cta-row .btn-secondary { min-height: 44px; padding: 14px 18px; display: inline-flex; align-items: center; justify-content: center; }
  .ticker__label { overflow-wrap: break-word; }
  .club-logo-name { display: none; }

  /* Homepage timeline — vertical "red line down" with zig-zag events on phone */
  /* Let the section grow to the full vertical content (was clipped at the bottom). */
  .timeline-section { height: auto !important; overflow: visible !important; }
  /* collapse the sticky wrapper so the section grows to the full vertical
     content (the sticky box wasn't expanding to contain the canvas). */
  .timeline-sticky { display: contents !important; }
  .timeline-canvas { position: relative !important; top: 0 !important; overflow-x: clip; max-width: 100%; height: auto !important; padding: 8px 0 16px; }
  .timeline-canvas .football,
  .timeline-canvas .timeline-thrower { display: none !important; }
  /* continuous DASHED red line down the centre, behind everything */
  .timeline-canvas::before {
    content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
    transform: translateX(-50%);
    background: repeating-linear-gradient(180deg, var(--red) 0 6px, transparent 6px 14px);
    opacity: 0.7; z-index: 0;
  }
  /* events: half-width, alternating sides, dot on the line */
  .timeline-canvas .event {
    position: relative !important; width: 50% !important; max-width: 50% !important;
    box-sizing: border-box; margin: 0 0 24px !important; display: flex; flex-direction: column; z-index: 1;
  }
  .timeline-canvas .event.tl-l { align-self: flex-start !important; align-items: flex-end; text-align: right; padding-right: 22px; }
  .timeline-canvas .event.tl-r { align-self: flex-end !important; align-items: flex-start; text-align: left; padding-left: 22px; }
  .timeline-canvas .event::after {
    content: ""; position: absolute; top: 7px; width: 12px; height: 12px; border-radius: 50%;
    background: var(--red); box-shadow: 0 0 0 4px var(--t-bg); z-index: 3;
  }
  .timeline-canvas .event.tl-l::after { right: -7px; }
  .timeline-canvas .event.tl-r::after { left: -7px; }
  /* dates wrap so long labels (e.g. "Athletics squad, 1997") never get cut off */
  .timeline-canvas .event .event-date,
  .timeline-canvas .event .event-date .reveal__text { white-space: normal !important; overflow-wrap: anywhere; }
  .timeline-canvas .event .event-date { margin-bottom: 8px; }
  /* photos sit above the line and overlap across it for a dynamic look */
  .timeline-canvas .event .event-photo { width: 100%; max-width: 160px; margin: 0; position: relative; z-index: 2; }
  .timeline-canvas .event.tl-l .event-photo { margin-left: auto; margin-right: -26px; }
  .timeline-canvas .event.tl-r .event-photo { margin-left: -26px; }
  /* quotes: full-width, centred over the continuous line */
  .timeline-canvas .event-quote {
    position: relative !important; width: 100% !important; max-width: 100% !important;
    align-self: center !important; box-sizing: border-box; margin: 4px auto 26px !important;
    padding: 0 18px; text-align: center; z-index: 1;
  }

  /* Homepage interactive pitch */
  .pitch-build__hud { display: none !important; }
  .pitch-build__captions {
    left: 16px;
    right: 16px;
    bottom: max(14px, env(safe-area-inset-bottom, 0px));
    width: auto;
    height: min(42dvh, 340px);
    max-height: calc(100dvh - 360px);
    min-height: 278px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(244, 242, 238, 0.18);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(18, 24, 17, 0.9), rgba(18, 24, 17, 0.72));
    box-shadow: 0 20px 48px -28px rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
  }
  .pb-chapter {
    left: 18px;
    right: 18px;
    top: 18px;
    width: auto;
    max-height: calc(100% - 36px);
    overflow-y: auto;
    padding-right: 4px;
    box-sizing: border-box;
  }
  .pb-chapter__title { font-size: clamp(23px, 6.6vw, 30px); margin: 6px 0 9px; }
  .pb-chapter__desc { font-size: 14px; line-height: 1.38; }
  .pb-chapter__foot { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 14px; padding-top: 12px; }
  .pb-chapter__sub { align-self: flex-start; }
  .pb-chapter__stat-value { font-size: 31px; }
  .pb-chapter__stat-label { margin-top: 8px; }
  .pb-chapter__cta { min-height: 42px; padding: 11px 18px; margin-top: 14px; width: 100%; justify-content: center; box-sizing: border-box; }
  .coaching__grid::before { display: none; }
  .coaching__routes-title { font-size: clamp(24px, 7vw, 34px); }
  /* Phone: bring back the desktop glide-over routes — the green pitch slides up
     and shrinks into a little board where you pick between the two categories.
     Card text trimmed to kind + title + CTA so both fit the pinned 100vh. */
  .coaching__routes-stage { height: 200vh !important; margin-top: -100vh !important; background: var(--paper) !important; }
  .coaching__routes {
    position: sticky !important; top: 0 !important; height: 100vh !important; min-height: 0 !important;
    padding: 28px 0 !important; box-shadow: 0 -22px 50px -10px rgba(0, 0, 0, 0.5) !important;
    transform: scale(calc(1 - var(--routes-shrink, 0) * 0.5)) !important;
    border-radius: calc(var(--routes-shrink, 0) * 40px) !important;
  }
  .coaching__routes-inner {
    padding: 0 14px !important;
    opacity: calc(1 - var(--routes-shrink, 0) * 1.6) !important;
    display: flex !important; flex-direction: column !important; justify-content: center !important;
    height: 100% !important; box-sizing: border-box !important;
  }
  /* The pitch is a landscape SVG — rotate it 90° on phone (swap w/h so it
     still fills) so it reads as a vertical pitch: goals top & bottom, halfway
     line across the middle, behind the stacked cards. */
  .coaching__routes-pitch {
    inset: auto !important;
    top: 50% !important;
    left: 50% !important;
    width: 100vh !important;
    height: 100vw !important;
    transform: translate(-50%, -50%) rotate(90deg) !important;
  }
  .coaching__routes-head { margin-bottom: 12px !important; }
  .coaching__routes-label { margin-bottom: 8px !important; }
  .routes-kick { height: 84px !important; margin: 2px 0 10px !important; }
  .routes-kick__circle { width: 80px !important; height: 80px !important; }
  .routes-kick__ball { width: 24px !important; height: 24px !important; }
  /* One card on top, one on the bottom (full-width, spacious) — matches the
     desktop feel rather than two cramped cards side by side. Sizes kept tight
     so both fit the pinned 100vh even on shorter phones. */
  .coaching__grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .coaching-tile__audience,
  .coaching-tile__desc,
  .coaching-tile__chips,
  .coaching-tile__badge { display: none !important; }
  .coaching-tile { padding: 18px 18px 15px !important; min-height: 0 !important; }
  .coaching-tile__num { font-size: 60px !important; top: 6px !important; right: 14px !important; }
  .coaching-tile__head { gap: 4px !important; }
  .coaching-tile__kind { font-size: 12px !important; }
  .coaching-tile__title { font-size: 20px !important; line-height: 1.05 !important; margin-top: 6px !important; }
  .coaching-tile__foot { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-top: 12px !important; }
  .coaching-tile__cta { font-size: 12px !important; }

  /* Homepage talks split */
  .talks-split {
    --p-title: 1 !important;
    --p-headline: 1 !important;
    --p-desc: 1 !important;
    --p-cta: 1 !important;
    height: auto;
    padding: 64px 0 54px;
    overflow: hidden;
  }
  .talks-split__pin {
    position: relative;
    height: auto;
    min-height: 0;
    overflow: visible;
    justify-content: flex-start;
    padding: 0;
  }
  .talks-split .split-bg { display: none !important; }
  /* Faces shown on phone too — equal, scaled down, facing each other (like desktop). */
  .talks-split .split-face {
    display: block !important;
    height: 240px !important;
    translate: 0 0 !important;
    transform-origin: center center !important;
    margin: 0 !important;
    background-size: cover !important;
    background-position: top center !important;
    /* Fade only the lower neck/shoulder so the whole face (down to the chin)
       stays visible — no zoom, which was cropping the face too early. */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%) !important;
    mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%) !important;
  }
  /* Youth's hair lands at the outer (left) edge via the flip. The adult
     portrait has empty space on its outer (right) side — nudge it right so the
     hair reaches the edge (the overflow is clipped). */
  .talks-split .split-face--right { translate: 22px 0 !important; }
  .split-header {
    padding: 0 20px 24px;
    text-align: left;
  }
  .split-header .eyebrow {
    justify-content: flex-start;
    margin-bottom: 14px;
    opacity: 1;
    translate: none;
  }
  .split-title {
    max-width: 360px;
    font-size: clamp(30px, 8.4vw, 40px);
    line-height: 0.98;
    opacity: 1;
    translate: none;
  }
  .split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "face-left face-right"
      "col-left  col-right";
    align-items: start;
    gap: 12px;
    min-height: 0;
    max-width: 100%;
    padding: 0;
    box-sizing: border-box;
  }
  .split-face--left  { grid-area: face-left; }
  .split-face--right { grid-area: face-right; }
  .split-col--left   { grid-area: col-left; }
  .split-col--right  { grid-area: col-right; }
  .split-grid::before,
  .split-grid::after,
  .split-col::before {
    display: none;
  }
  /* Both columns identical (symmetric, like desktop) — sit on the cream
     surface under their face, centred. No more dark/light asymmetry. */
  .split-col,
  .split-col--left,
  .split-col--right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-height: 0;
    padding: 10px 6px 0;
    text-align: center;
    color: var(--ink);
    background: transparent;
    border: none;
    box-shadow: none;
    box-sizing: border-box;
  }
  .split-col::after,
  .split-col--right::after { display: none !important; }
  .split-headline {
    margin: 0;
    max-width: 100%;
    font-size: clamp(22px, 7.4vw, 32px);
    line-height: 0.95;
    letter-spacing: -0.03em;
    word-break: normal;
    overflow-wrap: normal;
    clip-path: none !important;
  }
  .split-scribble {
    top: auto;
    left: -3%;
    bottom: -32%;
    width: 106%;
    height: 82%;
    opacity: 0.82;
  }
  .split-scribble path {
    stroke-dashoffset: 0;
    transition: none;
  }
  .split-desc { display: none !important; }
  .split-cta {
    width: 44px;
    height: 44px;
    min-height: 0;
    gap: 0;
    padding: 0;
    margin-top: 6px;
    justify-content: center;
    align-items: center;
    opacity: 1;
    translate: none;
    box-sizing: border-box;
  }
  .split-cta__label {
    display: none !important;
  }
  .split-col--left .split-cta svg {
    transform: none;
  }
  .split-cta svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
  }
  .split-theme { white-space: normal; max-width: 100%; text-align: center; }
  /* EN "KEYNOTES" solo talks split — scaled-down desktop: the big word + arrow
     centred, theme chips wrapped in centred rows above & below (same feel as
     desktop where the chips flank the word). Overrides the DA faces rules. */
  .split-grid--solo {
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    gap: 22px !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    justify-items: center !important;
    box-sizing: border-box;
  }
  .split-grid--solo .split-themes {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    max-width: 100% !important;
  }
  .split-grid--solo .split-col--solo {
    align-items: center !important;
    text-align: center !important;
    padding: 0 !important;
  }
  .split-grid--solo .split-headline {
    font-size: clamp(42px, 13.5vw, 62px) !important;
    line-height: 0.9 !important;
    margin: 0 0 14px !important;
  }
  .split-grid--solo .split-cta { margin: 0 auto !important; }
  .talks-split__pin .brand-ticker {
    margin-top: 0;
    padding: 34px 0 46px;
    background: var(--paper);
    position: relative;
    z-index: 1;
  }
  .brand-ticker__label {
    margin-bottom: 16px;
    padding: 0 20px;
    font-size: 11px;
    letter-spacing: 0.2em;
  }
  .brand-ticker__viewport {
    max-width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  }
  .brand-ticker__item {
    width: 118px;
    height: 48px;
  }
  .brand-ticker__item img {
    max-height: 32px;
  }
  /* Phone: remove the full-bleed photo under the talks section entirely. */
  .photo-break { display: none !important; }

  /* Homepage books — keep the desktop fan-out effect on phone, scaled down.
     Overrides the ≤1024 static-stacking block (incl. its transform:none) with
     !important so the scroll-driven fan still opens, just smaller. */
  .book-info, .book-info--soon { display: none !important; }
  .books { padding: 72px 16px 88px; overflow-x: clip; max-width: 100%; }
  .books__stage { height: 200vh !important; margin-top: 0 !important; }
  .books__fan-sticky {
    position: sticky !important; top: 0 !important; height: 100vh !important;
    display: grid !important; place-items: center !important;
    padding: 0 !important; gap: 0 !important; overflow: visible !important; max-width: 100%;
  }
  .books__head-sticky {
    position: absolute !important; top: 10px !important; left: 18px !important; right: 18px !important;
    max-width: none !important; padding: 0 !important;
  }
  .books__h { font-size: clamp(30px, 8.5vw, 40px) !important; }
  .books__fan {
    position: relative !important;
    width: min(720px, 90vw) !important; height: 560px !important;
    display: block !important; align-items: initial !important;
    gap: 0 !important; padding: 0 !important; margin-top: 28px !important;
    overflow: visible !important;
    transform: scale(0.44); transform-origin: center center;
  }
  .books__fan .book-card,
  .books__fan .book-card--left,
  .books__fan .book-card--center,
  .books__fan .book-card--right {
    position: absolute !important; top: 50% !important; left: 50% !important;
    width: 280px !important; max-width: 280px !important; min-width: 0 !important;
    margin: -210px 0 0 -140px !important;
  }
  .books__fan .book-card--left {
    transform: translateX(calc(var(--p-spread, 0) * -190px + var(--hover-push-x)))
               rotate(calc(var(--p-tilt, 0) * -12deg + var(--hover-push-rot))) !important;
  }
  .books__fan .book-card--center {
    transform: translateX(var(--hover-push-x)) rotate(var(--hover-push-rot)) !important;
  }
  .books__fan .book-card--right {
    transform: translateX(calc(var(--p-spread, 0) * 190px + var(--hover-push-x)))
               rotate(calc(var(--p-tilt, 0) * 12deg + var(--hover-push-rot))) !important;
  }

  /* Homepage blog + social */
  .blog__route { display: none !important; }
  /* Phone: hide the featured social-post previews; keep the "Følg med" channel links. */
  .some__grid { display: none !important; }
  .some-post { aspect-ratio: auto; min-height: 0; padding: 18px; gap: 14px; }
  .some-channel { padding: 18px; }
  .blog-card__body { padding: 22px; gap: 12px; }
  .some-channel__name, .some-channel__handle, .blog-card__title, .blog-card__excerpt, .some-post__caption { overflow-wrap: anywhere; word-break: break-word; }

  /* Coaching / goalkeeper / courses sub-pages (shared coach-* components) */
  .coach-hero__title { font-size: clamp(30px, 8vw, 44px); line-height: 1.08; overflow-wrap: break-word; hyphens: auto; }
  .coach-pro__cta-title, .coach-amateur__cta-title { overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
  .coach-pro__cta .btn-primary, .coach-amateur__cta .btn-primary,
  .coach-pro__cta .btn-secondary, .coach-amateur__cta .btn-secondary { min-height: 44px; padding-top: 14px; padding-bottom: 14px; display: inline-flex; align-items: center; justify-content: center; }
  .guarantee { padding-left: 20px; padding-right: 20px; }

  /* Talks pages */
  .talk-hero__title { font-size: clamp(30px, 9vw, 44px); line-height: 0.98; letter-spacing: -0.03em; font-stretch: 100%; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; max-width: 100%; }
  .talk-hero__meta-grid { grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-bottom: 24px; }
  .talk-hero .hero__cta-row { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .talk-hero .hero__cta-row .btn-primary, .talk-hero .hero__cta-row .btn-secondary { width: 100%; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 14px 18px; }
  .talk-hero__back { margin-top: 24px; margin-bottom: 40px; padding: 8px 0; min-height: 44px; display: inline-flex; align-items: center; }
  .testimonial-scatter { box-shadow: 0 8px 20px -14px rgba(28, 26, 24, 0.28); border-radius: 4px; padding: 20px 18px 18px; }
  .testimonial-scatter:hover.is-in { transform: none; box-shadow: 0 8px 20px -14px rgba(28, 26, 24, 0.28); }
  .talks-sticky__watermark { font-size: clamp(120px, 38vw, 180px); left: -4px; opacity: 0.045; }
  .testimonials-scatter .sec-head { padding: 0; margin-bottom: 48px; }
  .talk-brands__row { gap: 10px 12px; }
  .talk-brands__item { font-size: 12px; padding: 8px 12px; white-space: normal; }

  /* Books index + book detail pages */
  .books-index, .book-page__hero, .book-page__lead, .book-page__buy, .book-page__related { overflow-x: clip; }
  .book-page__title { font-size: clamp(34px, 11vw, 48px); overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
  .book-page__buy-action { flex-direction: column; align-items: stretch; gap: 16px; }
  .book-page__buy-price { text-align: center; }
  .book-page__buy-cta { width: 100%; justify-content: center; padding: 16px 18px; min-height: 48px; box-sizing: border-box; white-space: normal; text-align: center; line-height: 1.2; }
  .book-page__back { padding: 10px 0; margin-bottom: 24px; min-height: 44px; display: inline-flex; align-items: center; }
  .book-buy-opt__inner { padding: 16px 18px; gap: 4px 12px; }
  .book-buy-opt { min-height: 44px; }
  .book-related-card .book-cover__title { font-size: 16px; line-height: 0.95; overflow-wrap: anywhere; }
  .book-related-card .book-cover { padding: 12px; }
  .bx-card { align-items: center; text-align: center; padding: 24px 20px 28px; }
  .bx-card__cover { max-width: 240px; margin: 0 auto; width: 100%; }
  .book-card--hero { width: min(100%, 240px); margin: 0 auto; }

  /* Blog / press / contact pages */
  .contact, .press, .blog-page, .post { overflow-x: clip; }
  .press__cta, .contact__cta { min-height: 44px; padding-top: 14px; padding-bottom: 14px; box-sizing: border-box; }
  .contact__title, .press__title, .blog-page__title, .post__title { overflow-wrap: break-word; }
  .contact-channel__value, .press-tile__value { overflow-wrap: anywhere; word-break: break-word; }
  .press-tile, .contact-channel { padding: 22px 20px; }
  .blog-page { padding: 120px 20px 80px; }
  .post__body { overflow-wrap: anywhere; word-break: break-word; }
  .post__body pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .post__body table { display: block; overflow-x: auto; max-width: 100%; }
  .post__body img { max-width: 100%; height: auto; }
}

@media (max-width: 430px) {
  .hero__name { font-size: clamp(38px, 12.5vw, 48px); }
  .timeline-canvas .event-quote p,
  .timeline-canvas .event-quote p.reveal { font-size: 19px; line-height: 1.45; }
}

@media (max-width: 380px) {
  .talk-hero__meta-grid { grid-template-columns: 1fr; }
  .coach-hero__facts { grid-template-columns: 1fr; gap: 18px; }
  .book-related-card { grid-template-columns: 110px 1fr; gap: 14px; }
}