/* Layout: show-jumping club. Full-bleed photo hero, then bands that alternate between the deep theme colour
   (oxblood) and cream, with champion gold for rules, numbers and accents.
   Wide expanded wordmark with an italic serif counterpoint. The same in every viewer theme. */
:root {
  /* Theme colours: deep crimson (oxblood), with gold, ivory, cream and the rails. */
  --bg: #2a070d;            /* deep theme colour: page background */
  --bg-rgb: 42, 7, 13;
  --surface: #350a12;
  --surface-2: #420e17;
  --line: rgba(243, 234, 219, 0.12);
  --line-strong: rgba(243, 234, 219, 0.26);
  --text: #f3eadb;
  --text-dim: #c9b0b2;
  --gold: #d2b072;          /* accent: labels, rules, highlights (on cream it becomes the theme colour) */
  --accent-rgb: 210, 176, 114;
  --crimson: #a6192e;       /* theme colour: buttons on cream, bands, saddle pad, logo background (historic name) */
  --crimson-hi: #c21f38;
  --crimson-lo: #7d1022;
  --brand-rgb: 166, 25, 46;
  --champ: #d2b072;         /* champion gold: the mark, winning numbers, serif accents */
  --gold-dim: rgba(var(--accent-rgb), 0.14);
  --rail: #c4373a;
  /* cream bands */
  --cream: #f5efe2;
  --cream-card: #fffaf0;
  --ink: #2a0a10;
  --ink-dim: #6b5357;
  --ink-rgb: 42, 10, 16;
  --gold-ink: #7a5818;      /* gold that reads on cream */

  --wide: "Archivo", "Helvetica Neue", Arial, sans-serif;     /* used at wdth 112-125 for display */
  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --step--1: 0.8125rem;
  --step-0: 1.0625rem;
  --step-1: 1.3rem;
  --step-2: clamp(1.6rem, 3vw, 2.1rem);
  --step-3: clamp(2.4rem, 5.5vw, 4.2rem);
  --radius: 10px;
  --band-gap: clamp(4rem, 9vw, 7rem);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font: 400 var(--step-0)/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
.wrap { max-width: 78rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
a { color: inherit; }
a:focus-visible, .btn:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 400; }
.eyebrow { font: 600 0.72rem/1.2 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 50; background: var(--gold); color: var(--bg); padding: 0.5rem 0.9rem; border-radius: 8px; }

/* Buttons */
.ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.3rem; border-radius: 999px; font: 600 var(--step--1)/1 var(--sans); text-decoration: none; border: 1px solid var(--line-strong); background: none; color: var(--text); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.btn.solid { background: var(--crimson); color: var(--text); border-color: var(--crimson); }
.btn:hover { border-color: var(--gold); }
.btn.solid:hover { background: var(--crimson-hi); border-color: var(--crimson-hi); }
.btn.glass { background: rgba(var(--bg-rgb), .45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn svg { width: 1em; height: 1em; }

/* Monogram */
.mark { display: block; flex: none; }

.mark .m-horse { stroke: var(--bg); }
footer .foot-mark { display: flex; align-items: center; gap: 1rem; }

/* Glass nav */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(var(--bg-rgb), 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.75rem; }
.logo { display: flex; align-items: center; gap: 0.7rem; font: 800 1rem/1 var(--wide); font-stretch: 125%; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
.logo b { font-weight: inherit; }
.logo span { color: var(--champ); }
.nav nav { display: flex; align-items: center; gap: 1.5rem; }
.nav nav a { font: 500 var(--step--1)/1 var(--sans); text-decoration: none; color: var(--text-dim); transition: color .2s; }
.nav nav a:hover, .nav nav a[aria-current] { color: var(--text); }
.nav nav .pill { color: var(--text); background: var(--crimson); padding: 0.55rem 0.95rem; border-radius: 999px; font-weight: 600; }
.nav nav .pill:hover { color: var(--bg); background: var(--text); }
.lang { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px; }
.lang a { padding: 0.3rem 0.55rem; border-radius: 999px; font: 600 0.7rem/1 var(--sans) !important; letter-spacing: 0.08em; }
.lang a[aria-current] { background: var(--text); color: var(--bg) !important; }

/* Full-bleed hero */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); min-height: clamp(38rem, 88vh, 54rem); display: grid; }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: 70%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(var(--accent-rgb), .16), transparent 70%); pointer-events: none; }
.hero::after { content: ""; position: absolute; left: -15%; bottom: -35%; width: 60%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(var(--brand-rgb), .28), transparent 70%); pointer-events: none; }
.hero-bg { position: absolute; inset: 0 0 0 30%; overflow: hidden; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 30%; display: block; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, var(--bg) 0%, rgba(var(--bg-rgb), .85) 18%, rgba(var(--bg-rgb), .25) 55%, rgba(var(--bg-rgb), .1) 100%),
  linear-gradient(0deg, var(--bg) 0%, rgba(var(--bg-rgb), 0) 30%),
  linear-gradient(180deg, rgba(var(--bg-rgb), .55) 0%, rgba(var(--bg-rgb), 0) 25%); }
@media (prefers-reduced-motion: no-preference) {
  .hero-bg img { animation: settle 2.2s cubic-bezier(.2,.7,.2,1) backwards; }
  @keyframes settle { from { transform: scale(1.08); } }
}
.glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 70%) var(--my, 30%), rgba(var(--accent-rgb), .10), transparent 60%); }
.hero-inner { width: 100%; position: relative; z-index: 1; display: grid; grid-template-rows: 1fr auto; gap: 2.5rem; padding-block: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 3vw, 2.25rem); }
.hero-copy { display: grid; gap: 1.1rem; align-content: center; justify-items: start; max-width: 54rem; }
.wordmark { margin: 0.25rem 0 0; font: 800 clamp(4rem, 12vw, 10.5rem)/0.8 var(--wide); font-stretch: 125%; letter-spacing: -0.035em; text-transform: uppercase; overflow-wrap: anywhere; text-shadow: 0 10px 40px rgba(0,0,0,.35); }
.wordmark .ch { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .wordmark .ch { animation: rise .9s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(var(--i) * 60ms); }
  @keyframes rise { from { transform: translateY(18%); opacity: .15; } }
}
.motto { margin: 0; font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1; color: var(--champ); }
.lede { margin: 0; font-size: var(--step-1); line-height: 1.5; color: var(--text); opacity: .85; max-width: 34ch; }
.hero-copy .ctas { margin-top: 0.5rem; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: stretch; }
.meta-card { display: grid; gap: 0.35rem; align-content: center; padding: 0.9rem 1.2rem; border-radius: 16px; background: rgba(var(--bg-rgb), .55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line-strong); text-decoration: none; }
.meta-card small { font: 600 0.62rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.meta-card strong { font: 800 1.9rem/1 var(--wide); font-stretch: 125%; letter-spacing: -0.02em; }
.meta-card strong span { font-size: 0.5em; color: var(--text-dim); letter-spacing: 0; }
.meta-card strong.name { font-size: 1.2rem; font-stretch: 112%; letter-spacing: 0; }
.stable-chip { display: flex; align-items: center; gap: 0.9rem; padding: 0.6rem 1.3rem 0.6rem 0.6rem; transition: border-color .2s; }
.stable-chip:hover { border-color: var(--gold); }
.stable-chip img { width: 56px; height: 56px; border-radius: 50%; background: #fff; object-fit: contain; }
.stable-chip span { display: grid; gap: 0.2rem; font: 700 1.05rem/1.15 var(--wide); font-stretch: 112%; }
.stable-chip span small { font-stretch: 100%; }
.hero-credit { position: absolute; right: clamp(1rem, 4vw, 2.5rem); bottom: 0.9rem; font: 500 0.65rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(234,228,214,.55); }

/* Ticker */
.ticker { overflow: hidden; background: linear-gradient(90deg, var(--crimson-lo), var(--crimson) 50%, var(--crimson-lo)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.3); }
.ticker-track { display: flex; width: max-content; }
.ticker-track span { padding: 1rem 1.75rem; white-space: nowrap; font: 700 0.95rem/1 var(--wide); font-stretch: 125%; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); display: inline-flex; align-items: center; gap: 3.5rem; }
.ticker-track span::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--champ); }
@media (prefers-reduced-motion: no-preference) {
  .ticker-track { animation: slide 40s linear infinite; }
  @keyframes slide { to { transform: translateX(-50%); } }
}

/* Sections */
section { padding-block: clamp(4rem, 9vw, 7rem) 0; scroll-margin-top: 4rem; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.sec-head h2 { font: 700 var(--step-3)/0.95 var(--wide); font-stretch: 125%; letter-spacing: -0.02em; text-transform: uppercase; margin-top: 0.75rem; }
.sec-head h2 .serif { text-transform: none; font-size: 1.08em; letter-spacing: 0; color: var(--champ); }
.sec-head p { margin: 0; max-width: 36ch; color: var(--text-dim); }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.35rem 1.4rem; display: grid; gap: 0.4rem; align-content: start; }
.tile .k { font: 600 0.7rem/1.2 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
.float-chip { position: absolute; z-index: 1; background: rgba(var(--bg-rgb), .6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line-strong); color: var(--text-dim); border-radius: 999px; padding: 0.45rem 0.8rem; font: 600 0.68rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; }

/* Home stable band */
.home-stable { padding-top: clamp(2.5rem, 6vw, 4rem); }
.hs-card { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1.25rem, 4vw, 2.75rem); align-items: center; padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: calc(var(--radius) + 6px); border: 1px solid var(--line-strong); background: radial-gradient(70% 140% at 0% 50%, rgba(var(--accent-rgb), .12), transparent 60%), linear-gradient(120deg, var(--surface-2), var(--surface)); }
.hs-logo { width: clamp(96px, 14vw, 140px); aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 6px rgba(255,255,255,.06), 0 20px 40px -18px rgba(0,0,0,.8); overflow: hidden; }
.hs-logo img { width: 92%; height: 92%; object-fit: contain; }
.hs-text { display: grid; gap: 0.6rem; }
.hs-text h2 { font: 800 var(--step-3)/0.95 var(--wide); font-stretch: 125%; letter-spacing: -0.02em; text-transform: uppercase; }
.hs-text p { margin: 0; color: var(--text-dim); max-width: 46ch; }

/* Profile */
.profile { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.portrait { margin: 0; position: relative; border-radius: calc(var(--radius) + 4px); overflow: hidden; aspect-ratio: 4 / 5; max-width: 100%; border: 1px solid var(--line); }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; display: block; }
.portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(var(--bg-rgb), .85)); }
.portrait .float-chip { top: 1rem; right: 1rem; }
.portrait figcaption { position: absolute; z-index: 1; left: 1.4rem; right: 1.4rem; bottom: 1.2rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font: 600 0.7rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
.portrait figcaption .serif { font-size: 2.4rem; text-transform: none; letter-spacing: 0; color: var(--text); }
.profile-body { display: grid; gap: 2rem; }
.story p { font-size: var(--step-1); line-height: 1.6; margin: 0 0 1rem; max-width: 40ch; }
.story p:first-child { font: italic 400 clamp(1.6rem, 2.6vw, 2.1rem)/1.25 var(--serif); max-width: 30ch; }
.facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.facts div { padding: 1rem 0; border-bottom: 1px solid var(--line); display: grid; gap: 0.35rem; }
.facts div:nth-child(odd) { padding-right: 1rem; }
.facts dt { font: 600 0.65rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.facts dd { margin: 0; font: 600 var(--step-1)/1.2 var(--sans); }
.facts-note { margin: -1rem 0 0; color: var(--text-dim); font: italic 400 1.05rem/1.4 var(--serif); }

/* Jump sequence + qualities */
.sequence { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 0.75rem; }
.sequence figure { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 474 / 517; border: 1px solid var(--line); }
.sequence img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.sequence figure:hover img { transform: scale(1.05); }
.sequence figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1rem 0.9rem; background: linear-gradient(180deg, transparent, rgba(var(--bg-rgb), .9)); font: 600 var(--step--1)/1.2 var(--sans); display: flex; gap: 0.6rem; align-items: baseline; }
.sequence figcaption b { font: 800 1.2rem/1 var(--wide); font-stretch: 125%; color: var(--champ); }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.pillar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem 1.5rem 1.9rem; display: grid; gap: 0.9rem; align-content: start; transition: border-color .25s, transform .25s; }
.pillar:hover { border-color: rgba(var(--accent-rgb), .45); transform: translateY(-3px); }
.pillar .n { font: italic 400 3.2rem/0.9 var(--serif); color: var(--champ); }
.pillar h3 { font: 700 var(--step-2)/1 var(--wide); font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.01em; }
.pillar p { margin: 0; color: var(--text-dim); }

/* Pathway ladder: rails drawn to scale by class height */
.ladder { display: grid; grid-template-columns: repeat(8, 1fr); gap: clamp(0.3rem, 1.2vw, 0.9rem); align-items: end; height: 17rem; padding: 1.5rem clamp(1rem, 3vw, 2rem) 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.step { display: grid; grid-template-rows: auto 1fr auto; height: 100%; gap: 0.5rem; text-align: center; }
.step .bar { align-self: end; height: var(--h); position: relative; }
.step .bar::before, .step .bar::after { content: ""; position: absolute; bottom: 0; width: 5px; height: 100%; background: var(--line-strong); border-radius: 2px; }
.step .bar::before { left: 0; } .step .bar::after { right: 0; }
.step .pole { position: absolute; left: 0; right: 0; top: 0; height: 9px; border-radius: 5px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 14px, transparent 14px 28px); border: 1px solid var(--line-strong); }
.step.done .pole { background: repeating-linear-gradient(90deg, var(--rail) 0 14px, var(--text) 14px 28px); border-color: transparent; }
.step.now .pole { background: var(--champ); box-shadow: 0 0 24px rgba(210,176,114,.5); border-color: transparent; }
.step.now .bar::before, .step.now .bar::after { background: var(--champ); }
.step.next .pole { border: 1.5px dashed var(--gold); background: transparent; }
.step .cap { font: 600 0.65rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); min-height: 1em; }
.step .m { font: 700 1rem/1 var(--wide); font-stretch: 112%; padding-block: 0.6rem 1rem; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; color: var(--text-dim); }
.step.now .m, .step.next .m { color: var(--text); }

/* Upcoming shows */
.shows { display: grid; gap: 0.75rem; }
.show-card { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: clamp(1rem, 3vw, 2rem); align-items: center; padding: 1.25rem 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.show-card .date { display: grid; justify-items: center; gap: 0.2rem; padding: 0.6rem 0; border-right: 1px solid var(--line); padding-right: 1rem; }
.show-card .date b { font: 800 2.2rem/1 var(--wide); font-stretch: 125%; color: var(--champ); font-variant-numeric: tabular-nums; }
.show-card .date small { font: 600 0.7rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.show-card h3 { font: 700 var(--step-1)/1.2 var(--sans); }
.show-card p { margin: 0.2rem 0 0; color: var(--text-dim); font-size: var(--step--1); }
.show-card .classes { font: 700 0.8rem/1 var(--sans); padding: 0.45rem 0.75rem; border: 1px solid var(--line-strong); border-radius: 999px; white-space: nowrap; }

/* Season record */
.rows { display: grid; border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 5.5rem 1fr auto auto auto; gap: clamp(1rem, 3vw, 2.5rem); align-items: center; padding-block: 1.35rem; border-bottom: 1px solid var(--line); transition: background-color .2s; }
.row:hover { background: linear-gradient(90deg, transparent, var(--gold-dim), transparent); }
.rank { display: flex; align-items: center; gap: 0.6rem; }
.rank strong { font: 800 2.4rem/1 var(--wide); font-stretch: 125%; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.rank sup { font: 600 0.75rem/1 var(--sans); color: var(--text-dim); }
.rank i { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
.event .show { font-weight: 600; font-size: var(--step-1); }
.event .meta { color: var(--text-dim); font-size: var(--step--1); margin-top: 0.15rem; }
.metric { text-align: right; display: grid; gap: 0.2rem; }
.metric .k { font: 600 0.65rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
.metric .v { font: 600 var(--step-1)/1 var(--sans); font-variant-numeric: tabular-nums; }
.clear { color: var(--bg); background: var(--champ); padding: 0.35rem 0.65rem; border-radius: 999px; font: 700 0.75rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; }
.none { display: flex; align-items: center; gap: clamp(1.25rem, 4vw, 2.5rem); padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--text-dim); }
.none h3 { font: 700 var(--step-2)/1.1 var(--wide); font-stretch: 112%; margin-bottom: 0.5rem; color: var(--text); }
.none p { margin: 0; max-width: 50ch; }
.rosettes { display: flex; gap: 0.25rem; flex: none; }
.rosettes svg { width: 2.6rem; height: 3.4rem; }
.rosettes svg:first-child { transform: rotate(-6deg); }
.rosettes svg:nth-child(2) { transform: translateY(-6px) rotate(4deg); }

/* Gallery */
.gallery { columns: 3 18rem; column-gap: 0.75rem; }
.gallery button { display: block; width: 100%; margin: 0 0 0.75rem; padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); cursor: zoom-in; break-inside: avoid; position: relative; }
.gallery img { display: block; width: 100%; height: auto; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.gallery button:hover img { transform: scale(1.04); }
.gallery .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem 0.9rem 0.7rem; background: linear-gradient(180deg, transparent, rgba(var(--bg-rgb), .85)); font: 500 var(--step--1)/1.3 var(--sans); text-align: left; color: var(--text); }
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(94vw, 1400px); max-height: 92vh; }
.lightbox::backdrop { background: rgba(var(--bg-rgb), .92); backdrop-filter: blur(6px); }
.lightbox img { display: block; max-width: 100%; max-height: 84vh; border-radius: 12px; margin-inline: auto; }
.lightbox p { text-align: center; color: var(--text); margin: 0.75rem 0 0; }
.lightbox .lb-close, .lightbox .lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(var(--bg-rgb), .7); color: var(--text); font-size: 1.4rem; cursor: pointer; }
.lightbox .lb-close { top: 1.25rem; right: 1.25rem; transform: none; }
.lightbox .lb-prev { left: 1rem; } .lightbox .lb-next { right: 1rem; }

/* Journal */
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 0.75rem; }
.post-card { display: grid; grid-template-rows: auto 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; transition: border-color .25s, transform .25s; }
.post-card:hover { border-color: rgba(var(--accent-rgb), .45); transform: translateY(-3px); }
.post-card .cover { aspect-ratio: 16 / 10; background: radial-gradient(80% 90% at 30% 20%, rgba(var(--accent-rgb), .2), transparent 60%), var(--surface-2); }
.post-card .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card .body { padding: 1.25rem 1.4rem 1.5rem; display: grid; gap: 0.5rem; align-content: start; }
.post-card time { font: 600 0.68rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.post-card h3 { font: 700 var(--step-1)/1.2 var(--sans); }
.post-card p { margin: 0; color: var(--text-dim); font-size: var(--step--1); }
.article { max-width: 46rem; margin-inline: auto; padding-block: clamp(3rem, 7vw, 5rem) 0; }
.article h1 { font: 800 clamp(2.2rem, 6vw, 4rem)/1 var(--wide); font-stretch: 118%; letter-spacing: -0.02em; margin: 0.9rem 0 1.25rem; }
.article .excerpt { font: italic 400 clamp(1.4rem, 2.6vw, 1.9rem)/1.3 var(--serif); color: var(--champ); margin: 0 0 2rem; }
.article .cover { margin: 0 0 2.25rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.article .cover img { display: block; width: 100%; }
.article .prose p { font-size: var(--step-1); line-height: 1.7; margin: 0 0 1.25rem; }
.back { display: inline-flex; gap: 0.5rem; color: var(--text-dim); text-decoration: none; font-size: var(--step--1); }
.back:hover { color: var(--text); }

/* Team */
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.75rem; }
.team .tile { padding: 1.75rem 1.5rem; min-height: 11rem; align-content: space-between; }
.team .who { font: 700 var(--step-2)/1.1 var(--wide); font-stretch: 112%; letter-spacing: -0.01em; }
.team .who.tba { font: italic 400 var(--step-2)/1.1 var(--serif); color: var(--text-dim); }
.team a.who { text-decoration: none; }
.team a.who:hover { color: var(--gold); }
.team .tile p { margin: 0; color: var(--text-dim); }
.stable-row { display: flex; align-items: center; gap: 1rem; }
.stable-logo { width: 72px; height: 72px; border-radius: 14px; background: #fff; object-fit: contain; padding: 4px; }

/* Partner */
.partner { position: relative; overflow: hidden; border-radius: calc(var(--radius) + 6px); border: 1px solid rgba(var(--accent-rgb), .35); background: linear-gradient(160deg, var(--surface-2), var(--bg)); padding: clamp(1.75rem, 5vw, 3.5rem); display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(2rem, 5vw, 4rem); }
.partner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(var(--bg-rgb), .97) 30%, rgba(var(--bg-rgb), .82) 60%, rgba(var(--bg-rgb), .6)), var(--bgimg) center / cover no-repeat; }
.partner > * { position: relative; }
.partner h2 { font: 800 var(--step-3)/0.95 var(--wide); font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.02em; margin-block: 0.9rem 1.25rem; }
.partner h2 .serif { text-transform: none; color: var(--champ); letter-spacing: 0; }
.partner .lead { color: var(--text-dim); margin: 0 0 1.75rem; max-width: 38ch; }
.offers { display: grid; margin-top: 0.5rem; }
.offer { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; padding-block: 1.2rem; border-top: 1px solid var(--line); }
.offer:last-child { border-bottom: 1px solid var(--line); }
.offer svg { width: 1.6rem; height: 1.6rem; margin-top: 0.2rem; }
.offer h3 { font: 700 var(--step-1)/1.2 var(--sans); margin-bottom: 0.25rem; }
.offer p { margin: 0; color: var(--text-dim); }
.partner-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
.inquiry { background: rgba(var(--bg-rgb), .55); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); align-self: start; }
.inquiry form { display: grid; gap: 1.1rem; }
.inquiry h3 { font: 700 var(--step-2)/1.1 var(--wide); font-stretch: 112%; letter-spacing: -0.01em; }
.form-note { margin: -0.4rem 0 0.2rem; color: var(--text-dim); font-size: var(--step--1); }
.field { display: grid; gap: 0.4rem; border: 0; margin: 0; padding: 0; min-width: 0; }
.field label, .field legend { font: 600 0.7rem/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); padding: 0; }
.field label span { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .7; }
.field legend { margin-bottom: 0.5rem; }
.field input, .field textarea { width: 100%; font: 400 1rem/1.4 var(--sans); color: var(--text); background: rgba(255,255,255,.04); border: 1px solid var(--line-strong); border-radius: 10px; padding: 0.75rem 0.9rem; transition: border-color .2s, background-color .2s; }
.field textarea { resize: vertical; min-height: 5.5rem; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: rgba(var(--accent-rgb), .06); }
.err { color: #f0a29a; font-size: var(--step--1); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-block; padding: 0.5rem 0.85rem; border-radius: 999px; border: 1px solid var(--line-strong); font: 500 var(--step--1)/1 var(--sans); color: var(--text-dim); transition: all .2s; }
.chip input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--bg); }
.chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.inquiry .btn { justify-self: start; }
.sent { display: grid; gap: 0.6rem; padding-block: 2rem; }
.sent h3 { font: italic 400 var(--step-3)/1 var(--serif); color: var(--champ); }
.sent p { margin: 0; color: var(--text-dim); }

/* Closing band */
.closing { text-align: center; display: grid; justify-items: center; gap: 1.5rem; }
.closing h2 { font: italic 400 clamp(2.6rem, 6vw, 5rem)/1.05 var(--serif); max-width: 20ch; }
.closing h2 b { font: 800 0.82em/1 var(--wide); font-stretch: 125%; font-style: normal; text-transform: uppercase; letter-spacing: -0.02em; }

/* Footer */
footer { margin-top: clamp(4rem, 9vw, 7rem); border-top: 1px solid var(--line); }
footer .wrap { padding-block: 2.5rem 3rem; display: grid; gap: 2rem; }
footer .big { font: 800 clamp(3rem, 12vw, 9rem)/0.8 var(--wide); font-stretch: 125%; letter-spacing: -0.04em; text-transform: uppercase; color: var(--surface-2); -webkit-text-stroke: 1px var(--line-strong); overflow-wrap: anywhere; }
footer .row-f { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; color: var(--text-dim); font-size: var(--step--1); }
footer .links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
footer .links a { color: var(--text-dim); }
.foot-stable { display: inline-flex; align-items: center; gap: 0.6rem; }
.foot-stable img { width: 32px; height: 32px; border-radius: 50%; background: #fff; object-fit: contain; }
.credits { margin: 0; font-size: 0.75rem; color: var(--text-dim); max-width: 80ch; }
.credits a { color: var(--text-dim); }

@media (max-width: 960px) {
  .profile, .partner { grid-template-columns: 1fr; }
  .hero-bg { inset: 0; }
  .hero-bg::after { background: linear-gradient(0deg, var(--bg) 6%, rgba(var(--bg-rgb), .82) 45%, rgba(var(--bg-rgb), .6) 100%); }
  .portrait { aspect-ratio: 4 / 3; }
  .hs-card { grid-template-columns: auto 1fr; }
  .hs-card .btn { grid-column: 1 / -1; justify-self: start; }
  .sequence { grid-template-columns: repeat(2, 1fr); }
  .pillars { grid-template-columns: 1fr; }
  .row { grid-template-columns: 4.5rem 1fr auto; }
  .row .metric.time, .row .metric.height { display: none; }
  .nav nav { gap: 1rem; }
}
@media (max-width: 760px) {
  .nav nav a:not(.pill):not(.lang a) { display: none; }
}
@media (max-width: 640px) {
  .ladder { height: 13rem; }
  .hs-card { grid-template-columns: 1fr; }
  .hero-meta { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-meta .stable-chip { grid-column: 1 / -1; }
  .meta-card strong { font-size: 1.5rem; }
  .meta-card strong.name { font-size: 1rem; }
  .facts { grid-template-columns: 1fr; }
  .none { flex-direction: column; align-items: flex-start; }
  .hero-credit { position: static; }
  .step .cap { font-size: 0.55rem; letter-spacing: 0.08em; }
  .step .m { font-size: 0.8rem; }
  .row { grid-template-columns: 3.75rem 1fr; }
  .row .metric { display: none; }
  .row .metric.faults { display: grid; grid-column: 2; text-align: left; justify-items: start; }
  .show-card { grid-template-columns: 5rem 1fr; }
  .show-card .classes { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Hero video and focus point */
.hero-bg img { object-position: var(--focus, 45% 30%); }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 30%); }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }

/* Show cards: calendar links */
.show-side { display: grid; justify-items: end; gap: 0.6rem; }
.cal-links { font-size: var(--step--1); color: var(--text-dim); white-space: nowrap; }
.cal-links a, .sec-head p a { color: var(--gold); }

/* Season progress chart (single series; text in text tokens) */
.progress { margin: 0 0 1.5rem; padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.progress-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.progress-stats { display: flex; gap: clamp(1.25rem, 4vw, 2.75rem); flex-wrap: wrap; }
.progress-stats div { display: grid; gap: 0.3rem; }
.progress-stats small { font: 600 0.65rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
.progress-stats b { font: 800 2rem/1 var(--wide); font-stretch: 125%; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.progress-stats b span { font-size: 0.5em; color: var(--text-dim); letter-spacing: 0; }
.legend { display: flex; gap: 1.25rem; font-size: var(--step--1); color: var(--text-dim); }
.legend span { display: inline-flex; align-items: center; gap: 0.45rem; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.dot.clear { background: var(--champ); }
.dot.ring { border: 2px solid var(--gold); }
.chart-wrap { position: relative; overflow-x: auto; }
.chart-wrap svg { display: block; width: 100%; min-width: 34rem; height: auto; }
.chart-wrap .grid { stroke: var(--line); stroke-width: 1; }
.chart-wrap .ax { fill: var(--text-dim); font: 500 13px var(--sans); font-variant-numeric: tabular-nums; }
.chart-wrap .line { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; opacity: .7; }
.chart-wrap .hit { fill: transparent; }
.chart-wrap .mark { stroke: var(--surface); stroke-width: 2; }
.chart-wrap .mark.clear { fill: var(--champ); }
.chart-wrap .mark.ring { fill: var(--surface); stroke: var(--gold); stroke-width: 2.5; }
.chart-wrap .pt { cursor: pointer; outline: none; }
.chart-wrap .pt:focus-visible .mark, .chart-wrap .pt:hover .mark { r: 8; }
.tip { position: absolute; transform: translate(-50%, -100%); background: var(--bg); border: 1px solid var(--line-strong); color: var(--text); font-size: var(--step--1); padding: 0.5rem 0.7rem; border-radius: 8px; white-space: nowrap; pointer-events: none; box-shadow: 0 10px 30px -10px rgba(0,0,0,.8); }

/* Partners */
.partner-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.75rem; }
.logo-card { display: grid; grid-template-rows: 6rem auto; gap: 0.75rem; padding: 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; text-align: center; transition: border-color .25s, transform .25s; }
a.logo-card:hover { border-color: rgba(var(--accent-rgb), .45); transform: translateY(-3px); }
.logo-card img { width: 100%; height: 100%; object-fit: contain; background: #fff; border-radius: 10px; padding: 0.6rem; }
.logo-card strong { display: grid; place-items: center; font: 700 var(--step-1)/1.2 var(--wide); font-stretch: 112%; }
.logo-card span { font: 600 0.68rem/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
@media (max-width: 640px) {
  .show-side { grid-column: 1 / -1; justify-items: start; }
}

/* Countdown */
.meta-card.countdown em { font: italic 400 0.95rem/1.2 var(--serif); color: var(--text-dim); max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta-card.countdown:hover { border-color: var(--gold); }
.countdown-band { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem); border-radius: var(--radius); border: 1px solid rgba(var(--accent-rgb), .4); background: radial-gradient(80% 140% at 100% 0%, rgba(var(--accent-rgb), .16), transparent 60%), var(--surface-2); }
.countdown-band h3 { font: 700 var(--step-2)/1.1 var(--wide); font-stretch: 112%; margin: 0.4rem 0 0.2rem; }
.countdown-band p { margin: 0; color: var(--text-dim); font-size: var(--step--1); }
.cd-grid { display: flex; gap: 0.6rem; }
.cd-grid div { display: grid; justify-items: center; min-width: 4.6rem; padding: 0.7rem 0.6rem; border-radius: 14px; background: rgba(var(--bg-rgb), .6); border: 1px solid var(--line-strong); }
.cd-grid b { font: 800 2rem/1 var(--wide); font-stretch: 125%; font-variant-numeric: tabular-nums; color: var(--champ); }
.cd-grid small { margin-top: 0.35rem; font: 600 0.6rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }

/* Up close */
.upclose { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0.75rem; align-items: start; }
.upclose:has(> :only-child) { grid-template-columns: 1fr; }
.facts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.75rem; }
.fact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.35rem; display: grid; gap: 0.5rem; align-content: start; }
.fact-card .k { font: 600 0.68rem/1.2 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.fact-card p { margin: 0; font: italic 400 1.45rem/1.25 var(--serif); }
.routine { background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 1.5rem; }
.routine h3 { font: 700 var(--step-1)/1.2 var(--wide); font-stretch: 112%; margin-bottom: 1rem; }
.routine ol { list-style: none; margin: 0; padding: 0; display: grid; }
.routine li { display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--line); position: relative; }
.routine time { font: 700 1rem/1.4 var(--wide); font-stretch: 112%; color: var(--gold); font-variant-numeric: tabular-nums; }
.routine p { margin: 0.15rem 0 0; color: var(--text-dim); font-size: var(--step--1); }

/* Sponsor packages inside the partnership block */
.partner > div:first-child { grid-column: 1; grid-row: 1; }
.partner .inquiry { grid-column: 2; grid-row: 1; }
.packages { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.75rem; }
.package { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 0.8rem; padding: 1.5rem; border-radius: var(--radius); background: rgba(var(--bg-rgb), .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line-strong); }
.package.featured { border-color: var(--champ); box-shadow: 0 0 0 1px var(--champ), 0 24px 50px -30px rgba(210,176,114,.55); }
.package h3 { font: 700 var(--step-1)/1.2 var(--wide); font-stretch: 118%; text-transform: uppercase; letter-spacing: 0.02em; }
.package .price { margin: 0; color: var(--text-dim); font-size: var(--step--1); }
.package .price b { font: 800 1.7rem/1.1 var(--wide); font-stretch: 112%; color: var(--text); font-variant-numeric: tabular-nums; }
.package .price b.ask { font: italic 400 1.5rem/1.1 var(--serif); color: var(--champ); }
.package ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; align-content: start; }
.package li { padding-left: 1.4rem; position: relative; color: var(--text); font-size: var(--step--1); }
.package li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.75rem; height: 0.4rem; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); }
.package .btn { justify-self: start; }
.badge-pk { position: absolute; top: -0.7rem; left: 1.5rem; background: var(--champ); color: var(--bg); font: 700 0.62rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; padding: 0.4rem 0.6rem; border-radius: 999px; }
@media (max-width: 960px) {
  .upclose { grid-template-columns: 1fr; }
  .partner > div:first-child, .partner .inquiry, .packages { grid-column: 1; grid-row: auto; }
}
@media (max-width: 640px) {
  .cd-grid div { min-width: 3.6rem; }
  .cd-grid b { font-size: 1.5rem; }
}

/* Logo mark sizes */
.logo .mark { width: 52px; height: auto; }
.brandline { display: flex; align-items: center; gap: clamp(0.9rem, 2.2vw, 1.8rem); margin-top: 0.25rem; }
.brandline .mark { width: clamp(5.5rem, 13vw, 11.5rem); height: auto; flex: none; filter: drop-shadow(0 18px 40px rgba(0,0,0,.45)); }
.brandline .wordmark { margin: 0; }
footer .foot-mark { gap: clamp(1rem, 3vw, 2rem); }
footer .foot-mark .mark { width: clamp(5rem, 11vw, 9.5rem); height: auto; flex: none; }
@media (max-width: 640px) {
  .logo .mark { width: 42px; }
  .brandline { gap: 0.7rem; }
  .brandline .mark { width: 4.6rem; }
  .brandline .wordmark { font-size: clamp(3.2rem, 15vw, 4.5rem); }
}
.brandline .wordmark { font-size: clamp(3.2rem, 9.5vw, 9rem); overflow-wrap: normal; white-space: nowrap; }
.hero-copy { max-width: 62rem; }

/* Round videos */
.watch { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: 0.6rem; padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb), .5); background: none; color: var(--gold); font: 600 0.72rem/1.4 var(--sans); letter-spacing: 0.06em; text-decoration: none; cursor: pointer; }
.watch:hover { background: var(--gold); color: var(--bg); }
.video-dlg { border: 0; padding: 0; background: transparent; width: min(94vw, 1100px); }
.video-dlg::backdrop { background: rgba(var(--bg-rgb), .92); }
.video-frame { aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; }
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-title { text-align: center; color: var(--text); margin: 0.75rem 0 0; }

/* Milestones timeline */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; display: grid; }
.timeline::before { content: ""; position: absolute; left: 9.5rem; top: 0.6rem; bottom: 0.6rem; width: 2px; background: linear-gradient(var(--gold), rgba(var(--accent-rgb), .15)); }
.timeline li { display: grid; grid-template-columns: 8rem 3rem 1fr; align-items: start; padding-block: 0.9rem; }
.timeline time { text-align: right; font: 600 var(--step--1)/1.6 var(--sans); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.timeline .dot { justify-self: center; margin-top: 0.3rem; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--gold); position: relative; z-index: 1; }
.timeline .ms-win .dot, .timeline .ms-step .dot { background: var(--champ); box-shadow: 0 0 16px rgba(210,176,114,.55); }
.timeline h3 { font: 700 var(--step-1)/1.25 var(--wide); font-stretch: 112%; }
.timeline .ms-win h3 { color: var(--champ); }
.timeline p { margin: 0.2rem 0 0; color: var(--text-dim); font-size: var(--step--1); }
.timeline .watch { margin: 0.5rem 0 0; }
@media (max-width: 640px) {
  .timeline::before { left: 0.45rem; }
  .timeline li { grid-template-columns: 1.6rem 1fr; }
  .timeline time { grid-column: 2; grid-row: 1; text-align: left; }
  .timeline .dot { grid-column: 1; grid-row: 1 / span 2; justify-self: start; }
  .timeline li > div { grid-column: 2; }
}

/* Subscribe */
.subscribe { display: grid; justify-items: center; gap: 0.9rem; margin-top: 1rem; width: min(100%, 34rem); }
.subscribe form { display: grid; gap: 0.5rem; width: 100%; text-align: left; }
.subscribe label { font: 600 0.72rem/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.sub-row { display: flex; gap: 0.5rem; }
.sub-row input { flex: 1; min-width: 0; font: 400 1rem/1.4 var(--sans); color: var(--text); background: rgba(255,255,255,.04); border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.8rem 1.1rem; }
.sub-row input:focus { outline: none; border-color: var(--gold); }
.subscribe small { color: var(--text-dim); font-size: 0.78rem; }
.sub-ok { margin: 0; color: var(--gold); font: italic 400 1.3rem/1.3 var(--serif); }

/* Logo placement mockups */
.mockups { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.75rem; }
.mockups figure { margin: 0; padding: 1rem; border-radius: var(--radius); background: radial-gradient(90% 90% at 50% 30%, #f1ebdc, #d9cfb8); border: 1px solid var(--line); }
.mockups svg { display: block; width: 100%; height: auto; }
.mockups figcaption { margin-top: 0.5rem; color: #4b4a3e; font-size: var(--step--1); text-align: center; }

/* Partnership: mockups row spans the block */
.partner .partner-mock { grid-column: 1 / -1; display: grid; gap: 0.75rem; }

/* Brand guidelines page */
.brand-hero { display: grid; grid-template-columns: minmax(0, 22rem) 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.bh-mark { background: var(--crimson); border-radius: calc(var(--radius) + 6px); padding: 2rem; border: 1px solid var(--line); }
.bh-mark img { display: block; width: 100%; height: auto; }
.bh-text h3 { font: 700 var(--step-2)/1.1 var(--wide); font-stretch: 112%; margin-bottom: 0.75rem; }
.bh-text p { color: var(--text-dim); max-width: 52ch; margin: 0 0 1.5rem; }
.variant-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem; }
.variant-grid figure, .donts figure { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.v-swatch { aspect-ratio: 1; display: grid; place-items: center; padding: 1.5rem; }
.v-swatch img { width: 72%; height: auto; }
.variant-grid figcaption, .donts figcaption { padding: 0.9rem 1rem 1rem; display: grid; gap: 0.3rem; font-size: var(--step--1); color: var(--text-dim); }
.variant-grid figcaption strong { color: var(--text); font-size: 1rem; }
.v-dl a { color: var(--gold); }
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0.75rem; }
.rules figure { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; display: grid; gap: 1rem; }
.rules figcaption { color: var(--text-dim); font-size: var(--step--1); }
.cs-box { justify-self: center; background: var(--crimson); padding: 2.2rem; outline: 1.5px dashed rgba(214,177,97,.8); outline-offset: -1.1rem; border-radius: 12px; }
.cs-box img { display: block; }
.ms-row { display: flex; align-items: flex-end; gap: 1.5rem; justify-content: center; }
.ms-row div { display: grid; justify-items: center; gap: 0.4rem; color: var(--text-dim); font-size: 0.75rem; }
.palette { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; }
.sw { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.75rem 0.75rem 1rem; display: grid; gap: 0.3rem; font-size: var(--step--1); color: var(--text-dim); }
.sw-chip { height: 5.5rem; border-radius: 10px; border: 1px solid var(--line-strong); margin-bottom: 0.4rem; }
.sw strong { color: var(--text); font-size: 1rem; }
.sw code { font-size: 0.8rem; color: var(--text); background: none; padding: 0; }
.type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.75rem; }
.type-grid .tile { gap: 0.8rem; }
.t-wide { margin: 0; font: 800 3rem/1 var(--wide); font-stretch: 125%; letter-spacing: -0.02em; }
.t-serif { margin: 0; font: italic 400 2.2rem/1.1 var(--serif); color: var(--champ); }
.t-text { margin: 0; font-size: 1.05rem; }
.type-grid .muted { color: var(--text-dim); font-size: var(--step--1); }
.donts { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.75rem; }
.donts figure { position: relative; }
.donts figure::after { content: "✕"; position: absolute; top: 0.7rem; right: 0.8rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--rail); color: #fff; font-weight: 700; }
@media (max-width: 760px) { .brand-hero { grid-template-columns: 1fr; } }

/* Rider cards */
.person-card { align-content: start !important; gap: 0.6rem !important; }
.person-head { display: flex; align-items: center; gap: 0.8rem; }
.avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--champ); flex: none; }
.avatar.ph { display: grid; place-items: center; background: var(--surface-2); color: var(--gold); font: 800 1.5rem/1 var(--wide); font-stretch: 125%; }
.person-card .ig { color: var(--gold); font-size: var(--step--1); text-decoration: none; }

.riders-card { gap: 0.3rem; }
.riders-card .name em { margin-left: 0.5rem; font: italic 400 0.95rem/1 var(--serif); color: var(--champ); letter-spacing: 0; }

/* ===== Club look: bands, gold rules, classic buttons ===== */
body { overflow-x: clip; }
/* Cream band: full-bleed light section. Components read the same tokens, so they flip to ink on cream. */
.band-light {
  --bg: var(--cream); --bg-rgb: 245, 239, 226; --surface: var(--cream-card); --surface-2: #efe6d3;
  --text: var(--ink); --text-dim: var(--ink-dim);
  --line: rgba(var(--ink-rgb), 0.12); --line-strong: rgba(var(--ink-rgb), 0.26);
  --gold: var(--crimson); --accent-rgb: var(--brand-rgb); --champ: var(--gold-ink);
  color-scheme: light;
  position: relative; color: var(--text); background: var(--bg);
  box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax);
  margin-top: var(--band-gap); padding-block: var(--band-gap);
}
.band-light + section:not(.band-light) { padding-top: var(--band-gap); }
.band-light + .band-light { margin-top: 0; padding-top: 0; }
.band-light .btn:not(.solid) { border-color: var(--line-strong); color: var(--text); }
.band-light .btn.solid { color: #fff; }
.band-light .field input, .band-light .field textarea, .band-light .sub-row input { background: #fff; }
.band-light .float-chip, .band-light .cd-grid div, .band-light .package { background: rgba(255,255,255,.7); }
.band-light .mark .m-horse { stroke: var(--bg); }
.band-light ::selection { background: var(--crimson); color: #fff; }

/* Eyebrows with a gold rule */
.eyebrow { display: inline-flex; align-items: center; gap: 0.7rem; }
.eyebrow::before { content: ""; width: 2rem; height: 1px; background: currentColor; opacity: .8; }


/* Section heads: a hairline under the title row */
.sec-head { padding-bottom: clamp(1rem, 2.5vw, 1.5rem); border-bottom: 1px solid var(--line); }
.sec-head h2 { letter-spacing: -0.015em; }

/* Classic buttons: squared, uppercase, letter-spaced; gold solid on the deep colour */
.btn { border-radius: 4px; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; padding: 0.95rem 1.4rem; }
.btn.solid { background: var(--champ); border-color: var(--champ); color: var(--ink); }
.btn.solid:hover { background: #e3c78f; border-color: #e3c78f; }
.band-light .btn.solid { background: var(--crimson); border-color: var(--crimson); }
.band-light .btn.solid:hover { background: var(--crimson-hi); border-color: var(--crimson-hi); }
.nav nav .pill { border-radius: 4px; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; background: var(--champ); color: var(--ink); }
.nav nav .pill:hover { background: #e3c78f; color: var(--ink); }
.lang, .lang a { border-radius: 4px; }
.chip span, .show-card .classes, .watch, .clear, .badge-pk { border-radius: 4px; }

/* Nav and hero in the deep colour */
.nav { border-bottom-color: rgba(var(--accent-rgb), .25); }
.hero { border-bottom: 0; }
.hero::before { background: radial-gradient(closest-side, rgba(var(--brand-rgb), .45), transparent 70%); }
.meta-card { border-radius: 8px; }

/* Ticker: a gold band */
.ticker { background: linear-gradient(90deg, #b8955a, #e3c78f 50%, #b8955a); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.25); }
.ticker-track span { color: var(--ink); }
.ticker-track span::after { background: var(--crimson); }

/* Cards: framed with a thin inner gold rule */
.tile, .pillar, .fact-card, .show-card, .post-card, .logo-card, .package, .routine, .progress, .ladder, .none, .hs-card, .partner, .inquiry, .countdown-band { border-radius: var(--radius); }
.pillar, .fact-card { position: relative; }
.pillar::after, .fact-card::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(var(--accent-rgb), .18); border-radius: 6px; pointer-events: none; }
.portrait, .sequence figure, .gallery button, .article .cover { border-radius: var(--radius); }

/* Footer: darker than the page */
footer { background: rgba(0,0,0,.22); border-top: 1px solid rgba(var(--accent-rgb), .25); }
footer .big { color: transparent; -webkit-text-stroke: 1px rgba(var(--accent-rgb), .35); }

/* ===== Layout: centred club composition ===== */
/* Hero: full photo, crest above the name, everything on the centre line, facts as a gold-ruled strip */
.hero-bg { inset: 0; }
.hero-bg::after { background:
  radial-gradient(42% 58% at 50% 46%, rgba(var(--bg-rgb), .72) 0%, rgba(var(--bg-rgb), .45) 60%, rgba(var(--bg-rgb), .18) 100%),
  linear-gradient(0deg, var(--bg) 0%, rgba(var(--bg-rgb), 0) 32%),
  linear-gradient(180deg, rgba(var(--bg-rgb), .5) 0%, rgba(var(--bg-rgb), 0) 18%); }
.hero::before, .hero::after { display: none; }
.hero-copy { justify-items: center; text-align: center; margin-inline: auto; }
.hero .eyebrow::before, .hero .eyebrow::after { display: block; content: ""; width: 2rem; height: 1px; background: currentColor; opacity: .8; }
.brandline { flex-direction: column; gap: 0.6rem; }
.brandline .mark { width: clamp(6rem, 12vw, 9.5rem); }
.lede { margin-inline: auto; }
.hero-copy .ctas { justify-content: center; }
.hero-meta { justify-content: center; gap: 0; border-block: 1px solid rgba(var(--accent-rgb), .45); background: rgba(var(--bg-rgb), .55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); margin-inline: auto; width: fit-content; max-width: 100%; }
.hero-meta .meta-card { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; border-radius: 0; padding: 1rem clamp(1.1rem, 3vw, 2.25rem); text-align: center; justify-items: center; }
.hero-meta .meta-card + .meta-card { border-left: 1px solid rgba(var(--accent-rgb), .3); }
.hero-meta .stable-chip { padding-block: 0.7rem; }
.hero-credit { right: 50%; transform: translateX(50%); }

/* Section heads on the centre line, with gold rules either side of the label */
.sec-head { flex-direction: column; align-items: center; text-align: center; justify-content: center; gap: 0.9rem; border-bottom: 0; padding-bottom: 0; }
.sec-head > div { display: grid; justify-items: center; }
.sec-head .eyebrow::after { content: ""; width: 2rem; height: 1px; background: currentColor; opacity: .8; }
.sec-head h2 { margin-top: 0.6rem; }
.sec-head p { max-width: 52ch; }
.sec-head h2::after { content: ""; display: block; width: 3.5rem; height: 2px; margin: 1.1rem auto 0; background: var(--champ); }

/* Home stable: a centred crest card */
.hs-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.hs-text { justify-items: center; }
.hs-text .eyebrow::after { content: ""; width: 2rem; height: 1px; background: currentColor; opacity: .8; }

/* Profile: arched portrait, like a stable door */
.portrait { border-radius: 50% 50% var(--radius) var(--radius) / 32% 32% var(--radius) var(--radius); }
.portrait .float-chip { top: auto; bottom: 4.2rem; right: 50%; transform: translateX(50%); }
.portrait figcaption { justify-content: center; flex-direction: column; align-items: center; gap: 0.4rem; }

/* Qualities and team: centred columns */
.pillar, .team .tile { text-align: center; justify-items: center; }
.person-head { flex-direction: column; }
.sequence figcaption { justify-content: center; }

/* Closing and footer on the centre line */
footer .wrap { justify-items: center; text-align: center; }
footer .foot-mark { flex-direction: column; }
footer .row-f { justify-content: center; flex-direction: column; }
@media (max-width: 640px) {
  .hero-meta { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .hero-meta .meta-card + .meta-card { border-left: 0; }
  .hero-meta .meta-card { border-top: 1px solid rgba(var(--accent-rgb), .2); }
  .hero-meta .stable-chip { grid-column: 1 / -1; }
  .hero-credit { position: static; transform: none; }
}

body:has(#subscribe.band-light) footer { margin-top: 0; }
.hero .wordmark, .hero .motto, .hero .lede { text-shadow: 0 2px 24px rgba(0,0,0,.45); }
.sub-row input, .field input, .field textarea { border-radius: 4px; }
@media (max-width: 640px) { .hero-bg::after { background: linear-gradient(0deg, var(--bg) 8%, rgba(var(--bg-rgb), .6) 55%, rgba(var(--bg-rgb), .35) 100%); } }

/* Gallery videos: play badge on the poster, played in the lightbox */
.gallery .play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; gap: 0.2rem; width: 4rem; height: 4rem; border-radius: 50%; background: rgba(var(--bg-rgb), .62); border: 1px solid rgba(210,176,114,.7); color: var(--champ); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform .25s; }
.gallery .play svg { width: 1.6rem; height: 1.6rem; margin-left: 0.15rem; }
.gallery .play small { position: absolute; bottom: -1.6rem; font: 600 0.7rem/1 var(--sans); letter-spacing: 0.08em; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.gallery button:hover .play { transform: translate(-50%, -50%) scale(1.08); }
.lightbox video { display: block; max-width: 100%; max-height: 84vh; border-radius: 12px; margin-inline: auto; background: #000; }

/* Mobile hero: the upright photo across the top so the horse is seen, the copy below it */
.hero-bg picture { display: contents; }
@media (max-width: 640px) {
  .hero-bg { inset: 0 0 auto 0; height: min(78vh, 40rem); }
  .hero-bg img { object-position: 55% 35%; }
  .hero-bg::after { background: linear-gradient(180deg, rgba(var(--bg-rgb), .35) 0%, rgba(var(--bg-rgb), 0) 18%, rgba(var(--bg-rgb), 0) 45%, rgba(var(--bg-rgb), .85) 80%, var(--bg) 100%); }
  .hero-inner { padding-top: min(46vh, 24rem); }
  .hero-copy .eyebrow { display: none; }
  .brandline .mark { width: 4.2rem; }
}

/* Rider lockups on the brand page */
.lockups { display: grid; gap: 1.25rem; }
.lockups figure { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; display: grid; gap: 0.75rem; }
.lk-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.75rem; }
.lk { display: grid; gap: 0.4rem; }
.lk img { width: 100%; height: auto; display: block; border-radius: 6px; border: 1px solid var(--line); }
.lk span { font-size: var(--step--1); color: var(--text-dim); }
.lk a { color: var(--gold); }
.lockups figcaption { font: 700 var(--step-1)/1.2 var(--wide); font-stretch: 112%; }
.nowrap { white-space: nowrap; }

/* Old-domain notice (the horse's former name) */
.renamed { background: var(--champ); color: var(--ink, #1a0508); font: 500 0.85rem/1.4 var(--sans); text-align: center; }
.renamed .wrap { padding-block: 0.55rem; }
.renamed a { color: inherit; font-weight: 700; }

/* The name */
.name-story .name-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2rem; }
.name-card { border: 1px solid rgba(var(--accent-rgb), .35); border-radius: 4px; padding: 1.75rem 1.5rem; text-align: center; background: rgba(var(--accent-rgb), .04); }
.name-card .word { display: block; font-size: clamp(2rem, 4vw, 2.6rem); color: var(--gold); line-height: 1.1; }
.name-card .say { display: block; margin: .35rem 0 1rem; font: 600 0.72rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); }
.name-card p { margin: 0 0 .8rem; color: var(--text-dim); }
.name-card .doa { color: var(--text); font-style: italic; margin: 0; }
.name-card.together { border-color: var(--gold); background: rgba(var(--accent-rgb), .1); }
.name-card .wishes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.name-card .wishes li { border: 1px solid rgba(var(--accent-rgb), .5); color: var(--gold); border-radius: 999px; padding: .3rem .7rem; font: 600 0.72rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 820px) {
  .name-story .name-grid, }

/* Multi-word names: words never break inside, long names step down in size and may wrap at the space */
.wordmark .wd { display: inline-block; white-space: nowrap; }
.brandline .wordmark { white-space: normal; text-wrap: balance; line-height: 0.9; }
.brandline .wordmark:has(.wd + .wd) { font-size: clamp(2.9rem, 7.2vw, 7rem); }
@media (max-width: 640px) {
  .brandline .wordmark:has(.wd + .wd) { font-size: clamp(2.6rem, 15vw, 4.2rem); }
}
.closing, .subscribe form { grid-template-columns: minmax(0, 1fr); }