/* Renvers: chalk boards and arena sand. Chalk ground, near-black ink, one claret (the browband,
   the saddle-cloth trim), arena sand for figure lines. Podkova, the slab whose name means
   horseshoe, for calls, headings and letters; Yrsa for everything read. */

@font-face { font-family: "Podkova"; src: url("/assets/fonts/specimen/podkova-var.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Yrsa"; src: url("/assets/fonts/specimen/yrsa-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }

.spec-renvers {
  --rv-chalk: #ECEAE4;
  --rv-board: #F7F6F1;
  --rv-ink: #151613;
  --rv-ink-2: #4A4A43;
  --rv-claret: #A30F3A;
  --rv-sand: #C9B27E;
  --rv-sand-deep: #8C7648;
  --rv-hair: rgba(21, 22, 19, .16);
  --rv-slab: "Podkova", "Rockwell", "Roboto Slab", Georgia, serif;
  --rv-serif: "Yrsa", Georgia, "Times New Roman", serif;
  --rv-mar: 64px;
  --rv-gap: 24px;
  --rv-max: 1312px;
  --rv-nav: 56px;
  --rv-stage-h: max(520px, calc(100svh - var(--bar-h, 40px)));
}
body.spec-renvers { margin: 0; background: #ECEAE4; }
.rv-site {
  background: var(--rv-chalk);
  color: var(--rv-ink);
  font: 400 clamp(17.5px, 1.3vw, 20px)/1.55 var(--rv-serif);
  font-synthesis: none;
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.rv-site *, .rv-site *::before, .rv-site *::after { box-sizing: border-box; }
.rv-site :where(h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset) { margin: 0; padding: 0; }
.rv-site :where(ul, ol) { list-style: none; }
.rv-site img { display: block; max-width: 100%; height: auto; }
.rv-site :focus-visible { outline: 2px solid var(--rv-claret); outline-offset: 3px; border-radius: 2px; }
.rv-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.rv-mk { width: 28px; height: 28px; flex: none; color: var(--rv-ink); }
.rv-mk-rim { fill: currentColor; }
.rv-mk-frog { fill: var(--rv-claret); }

/* ── nav */
.rv-nav {
  position: sticky; top: var(--rv-bar-now, var(--bar-h, 40px)); z-index: 60;
  height: var(--rv-nav); display: flex; align-items: center; gap: 32px;
  padding: 0 var(--rv-mar);
  background: var(--rv-chalk);
  box-shadow: 0 1px 0 var(--rv-hair);
}
.rv-brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; color: var(--rv-ink); text-decoration: none; font: 700 23px/1 var(--rv-slab); letter-spacing: .005em; padding: 6px 0; }
.rv-links { display: flex; gap: 28px; }
.rv-links a { color: var(--rv-ink); text-decoration: none; font: 500 17px/1 var(--rv-serif); padding: 8px 0 6px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .18s; }
.rv-links a:hover { background-size: 100% 2px; }
.rv-cta { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 2px; background: var(--rv-claret); color: var(--rv-chalk); text-decoration: none; font: 600 16px/1 var(--rv-slab); letter-spacing: .01em; white-space: nowrap; }
.rv-cta:hover { background: #8C0C31; }
.rv-cta-s { display: none; }
@media (min-width: 1024px) {
  .rv-nav { margin-bottom: calc(-1 * var(--rv-nav)); background: transparent; box-shadow: none; transition: background-color .3s, box-shadow .3s; }
  .rv-nav.is-on { background: var(--rv-chalk); box-shadow: 0 1px 0 var(--rv-hair); }
}
@media (max-width: 900px) { .rv-links { display: none; } }
@media (max-width: 700px) {
  .spec-renvers { --rv-mar: 16px; --rv-gap: 16px; }
  .rv-nav { gap: 12px; }
  .rv-cta-l { display: none; }
  .rv-cta-s { display: inline; }
}
@media (min-width: 1024px) and (max-width: 1180px) { .spec-renvers { --rv-mar: 40px; } }
@media (min-width: 701px) and (max-width: 1023px) { .spec-renvers { --rv-mar: 32px; } }

/* ── the arena */
.rv-hero { position: relative; --rv-plh: 48px; --rv-plg: 12px; }
.rv-stage { position: relative; height: var(--rv-stage-h); overflow: hidden; background: #D9D4C6; isolation: isolate; container-type: size; }
.rv-poster, .rv-canvas, .rv-letters, .rv-ov, .rv-sand { position: absolute; inset: 0; }
.rv-poster { overflow: hidden; z-index: 0; transition: opacity .4s; }
/* the photograph covers the stage from its centre; the camera in gait.js lays it the same way */
.rv-poster picture, .rv-pm {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max(100cqw, calc(100cqh * 16 / 9)); aspect-ratio: 16 / 9; height: auto;
}
.rv-poster img { width: 100%; height: 100%; object-fit: cover; }
/* the morning's haze over the hills, thicker behind the call and the line under it, so both read */
.rv-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 50% 46% at 17% 12%, rgba(236, 234, 228, .93) 0, rgba(236, 234, 228, .82) 55%, rgba(236, 234, 228, 0) 100%),
    linear-gradient(to bottom, rgba(236, 234, 228, .94) 0, rgba(236, 234, 228, .8) 16%, rgba(236, 234, 228, .38) 27%, rgba(236, 234, 228, 0) 36%);
}
.rv-pm-t { display: none; }
.rv-pm-prints path { fill: #4A3C24; fill-opacity: .55; }
.rv-pm-hz .rv-pm-b { fill: #1D1C18; fill-opacity: .92; stroke: var(--rv-ink); stroke-width: 1.4; }
.rv-pm-hz .rv-pm-f { fill: #3A382F; fill-opacity: .92; }
.rv-pm-hz .rv-pm-k { fill: none; stroke: #1D1C18; stroke-width: 7; stroke-linecap: round; }
.rv-pm-hz .rv-pm-c { fill: #F4F1EA; }
.rv-pm-hz .rv-pm-t2 { fill: none; stroke: var(--rv-claret); stroke-width: 1.6; }
.rv-pm-hz .rv-pm-r { fill: #1A1C22; }
.rv-pm-hz .rv-pm-l { fill: #D9CFB8; }
.rv-pm-hz .rv-pm-s { opacity: .9; }
.rv-js .rv-pm { display: none; }
.rv-pm-letters rect { fill: var(--rv-board); stroke: rgba(21, 22, 19, .3); stroke-width: .6; }
.rv-pm-letters text { font-family: var(--rv-slab); font-weight: 700; text-anchor: middle; fill: var(--rv-ink); }
.rv-pm-letters .rv-pm-lc text { fill: var(--rv-claret); }
.rv-canvas { width: 100%; height: 100%; z-index: 1; opacity: 0; transition: opacity .4s; }
.rv-live .rv-canvas { opacity: 1; }
.rv-live .rv-poster { opacity: 0; }
.rv-live.rv-shown .rv-poster { visibility: hidden; }
.rv-letters { pointer-events: none; }
.rv-lt {
  position: absolute; z-index: 2; left: 0; top: 0; display: grid; place-items: center;
  background: var(--rv-board); border: 1px solid rgba(21, 22, 19, .2); border-bottom-color: rgba(21, 22, 19, .34);
  font-family: var(--rv-slab); font-weight: 700; line-height: 1; color: var(--rv-ink);
}
.rv-lt[hidden] { display: none; }
/* C, where you stand to judge and where every figure here begins */
.rv-lt-c { color: var(--rv-claret); border-bottom: 3px solid var(--rv-claret); }
.rv-lt.is-front, .rv-lt-c { z-index: 4; }
.rv-ov { z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rv-ov path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
/* the plan in claret: the pen as it draws, then dashed ahead of him; behind him, only the hooves' prints */
.rv-ov-line { stroke: var(--rv-claret); stroke-width: 2.6; }
.rv-ov-ghost { stroke: var(--rv-claret); stroke-width: 2.4; stroke-dasharray: 7 6; stroke-linecap: butt; }
.rv-ov-tip { fill: var(--rv-claret); stroke: var(--rv-board); stroke-width: 2; opacity: 0; transition: opacity .2s; }
.rv-ov-fit { stroke: var(--rv-ink); stroke-opacity: .6; stroke-width: 1.2; stroke-dasharray: 2 4; transition: opacity .6s; }
.rv-ov-lead { stroke: var(--rv-claret); stroke-width: 1.2; stroke-dasharray: 1 4; }
/* the rider in ink wash; far down the arena the haze mixes into him */
.rv-hz { --hw: 1.6px; --hz: 0; --rv-haze: #C4BEB1; }
.rv-ov .rv-hz-ff { fill: color-mix(in srgb, #3A382F, var(--rv-haze) calc(var(--hz) * 42%)); }
.rv-ov .rv-hz-far { stroke: var(--rv-ink); stroke-opacity: calc(.7 - var(--hz) * .3); stroke-width: calc(var(--hw) * .6); }
.rv-ov .rv-hz-body { fill: color-mix(in srgb, #1D1C18, var(--rv-haze) calc(var(--hz) * 45%)); stroke: color-mix(in srgb, var(--rv-ink), var(--rv-haze) calc(var(--hz) * 40%)); stroke-width: var(--hw); }
.rv-ov .rv-hz-dark { stroke: color-mix(in srgb, #1D1C18, var(--rv-haze) calc(var(--hz) * 45%)); stroke-width: calc(var(--hw) * 4.5); }
.rv-ov .rv-hz-light { stroke: #E6DFCE; stroke-opacity: .42; stroke-width: calc(var(--hw) * .6); }
.rv-ov .rv-hz-cloth { fill: #F4F1EA; stroke: var(--rv-ink); stroke-opacity: .4; stroke-width: calc(var(--hw) * .5); }
.rv-ov .rv-hz-saddle { fill: #0E0E0C; fill-opacity: .92; }
.rv-ov .rv-hz-trim { stroke: var(--rv-claret); stroke-width: calc(var(--hw) * .95); }
.rv-ov .rv-hz-rl { fill: #D9CFB8; stroke: var(--rv-ink); stroke-width: calc(var(--hw) * .6); }
.rv-ov .rv-hz-rd { fill: #1A1C22; stroke: #1A1C22; stroke-width: calc(var(--hw) * .4); }
.rv-hz-feet ellipse { fill: #2B2418; fill-opacity: .42; }
.rv-ov-harrow { stroke: var(--rv-ink); stroke-width: 1.5; stroke-linecap: square; }
.rv-ov-prints { transition: opacity .4s; }
.rv-live .rv-ov-prints { opacity: 0; }
.rv-ov-prints path { fill: #4A3C24; fill-opacity: .6; stroke: none; }
.rv-path { position: absolute; right: 8px; top: 6px; z-index: 7; margin: 0; padding: 2px 6px; font: 500 12px/1.3 var(--rv-serif); color: var(--rv-ink-2); background: rgba(236, 234, 228, .85); pointer-events: none; }
@media (min-width: 1024px) { .rv-path { top: calc(var(--rv-nav) + 6px); } }
.rv-sand { z-index: 5; cursor: crosshair; touch-action: none; }
.rv-sand:focus-visible { outline: 2px solid var(--rv-claret); outline-offset: -8px; border-radius: 4px; }
.rv-touch .rv-sand { touch-action: pan-y; cursor: pointer; }
.rv-touch .rv-sand.is-armed { touch-action: none; }

/* where to begin: C ringed in claret, breathing until the sand has been drawn on, and a line above it */
.rv-start { position: absolute; inset: 0; z-index: 4; display: none; margin: 0; pointer-events: none; transition: opacity .5s; }
.rv-js .rv-start { display: block; }
.rv-start-r { position: absolute; left: var(--sx); top: var(--sy); width: var(--sw); height: var(--sh); translate: -50% -50%; border-radius: 4px; box-shadow: 0 0 0 2px var(--rv-claret); }
.rv-start-r::after { content: ""; position: absolute; inset: 0; border-radius: 4px; box-shadow: 0 0 0 2px var(--rv-claret); animation: rv-breathe 1.8s ease-out infinite; }
@keyframes rv-breathe { from { transform: scale(1); opacity: .8; } to { transform: scale(1.45); opacity: 0; } }
.rv-start-t {
  position: absolute; right: calc(100% - var(--rv-cx, 50%) + var(--rv-cw, 60px) / 2 + var(--rv-plg)); bottom: 6px;
  display: grid; align-content: center; gap: 1px; width: max-content; max-width: min(19em, calc(100cqw - 24px)); min-height: var(--rv-plh); padding: 3px 12px 6px; border-radius: 2px;
  text-align: right; font: 500 14.5px/1.2 var(--rv-serif); color: var(--rv-ink); background: rgba(247, 246, 241, .95); box-shadow: inset 0 -3px 0 var(--rv-claret), 0 2px 6px rgba(21, 22, 19, .14);
}
.rv-start-t::after { content: ""; position: absolute; left: 100%; top: 50%; width: calc(var(--rv-plg) - 2px); height: 2px; margin-top: -1px; background: var(--rv-claret); }
.rv-start-t b { font: 700 17px/1.15 var(--rv-slab); letter-spacing: .01em; color: var(--rv-claret); }
.rv-start-p, .rv-touch .rv-start-m { display: none; }
.rv-touch .rv-start-p { display: inline; }
.rv-sq .rv-start-t { right: auto; left: 50%; top: var(--ly); bottom: auto; translate: -50% 0; min-height: 0; text-align: center; padding: 5px 10px 7px; }
.rv-sq .rv-start-t::after { display: none; }
.rv-begun .rv-start { opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .rv-ov-ghost { animation: rv-ghost 1.2s linear infinite; } }
@keyframes rv-ghost { to { stroke-dashoffset: -13; } }
@media (prefers-reduced-motion: reduce) { .rv-start-r::after { animation: none; opacity: .45; transform: scale(1.25); } }

/* the call: flat, in the haze over the hills, at every width */
.rv-h1 {
  position: absolute; z-index: 4; left: var(--rv-mar); top: calc(var(--rv-nav) + 18px); margin: 0;
  font: 700 var(--rv-h1-fs, clamp(24px, 7.2vw, 30px))/1.03 var(--rv-slab); letter-spacing: -.005em; color: var(--rv-ink);
  pointer-events: none;
}
.rv-h1 span { display: block; }

/* the coach's line: on large screens by the figure (placed from the script), else under the arena */
.rv-sky { font: 500 clamp(17px, 1.3vw, 20px)/1.35 var(--rv-serif); color: var(--rv-ink); }
.rv-sub { max-width: 30em; }
.rv-sub b { font-weight: 700; }
.rv-fit { margin: 0; font: 560 clamp(18px, 1.55vw, 23px)/1.32 var(--rv-serif); color: var(--rv-ink); max-width: 27em; text-wrap: pretty; }

/* the plaques: marker boards you can press, standing along the near fence either side of C */
.rv-plaques { position: absolute; z-index: 6; left: calc(var(--rv-cx, 50%) + var(--rv-cw, 60px) / 2 + var(--rv-plg)); top: calc(var(--rv-stage-h) - var(--rv-plh) - 6px); display: flex; gap: 8px; }
.rv-plq-g { display: contents; }
.rv-plq {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 80px; height: var(--rv-plh); padding: 0 0 3px; border: 1px solid rgba(21, 22, 19, .22); border-radius: 2px;
  background: var(--rv-board); color: var(--rv-ink); box-shadow: inset 0 -3px 0 var(--rv-sand-deep), 0 2px 6px rgba(21, 22, 19, .14);
  font: 600 17px/1 var(--rv-slab); letter-spacing: .01em; cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.rv-plq:hover { transform: translateY(1px); }
.rv-plq:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 var(--rv-sand-deep); }
.rv-plq .rv-i { transition: color .15s; }
.rv-plq[aria-pressed="true"] .rv-i { color: var(--rv-claret); font-weight: 800; }
.rv-plq[aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--rv-claret), 0 2px 6px rgba(21, 22, 19, .14); }
.rv-plq-h { width: 120px; }
.rv-tn { width: 22px; height: 11px; color: var(--rv-ink); }
@media (scripting: none) { .rv-plaques { display: none; } }

@media (min-width: 1024px) {
  .spec-renvers { --rv-h1-fs: clamp(36px, 3.4vw, 54px); }
  .rv-h1 { top: calc(var(--rv-nav) + 20px); }
  .rv-h1 span { white-space: nowrap; }
  .rv-sky {
    position: absolute; z-index: 6; left: 0; right: 0; top: var(--rv-nav);
    padding: 0 var(--rv-mar);
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--rv-gap); align-items: start;
    pointer-events: none;
  }
  .rv-sub { grid-column: 1 / 7; grid-row: 1; padding-top: calc(20px + 2.06 * var(--rv-h1-fs) + 14px); }
  .rv-fit {
    position: absolute; z-index: 6; right: var(--rv-mar); top: calc(var(--rv-nav) + 22px); max-width: min(24em, 36vw);
    padding: 9px 14px 10px 16px; border-left: 3px solid var(--rv-claret); background: rgba(247, 246, 241, .92);
    pointer-events: none; transition: transform .5s ease, opacity .3s;
  }
  .rv-js .rv-fit { left: 0; right: auto; top: 0; }
  /* while he passes behind it, the coach's line lets him through */
  .rv-fit.is-under { opacity: .22; }
}
@media (min-width: 1024px) and (max-width: 1180px), (max-height: 760px) and (min-width: 1024px) {
  .spec-renvers { --rv-h1-fs: clamp(34px, 3.4vw, 40px); }
  .rv-hero { --rv-plh: 44px; --rv-plg: 10px; }
  .rv-plaques { gap: 6px; }
  .rv-plq { width: 74px; gap: 6px; font-size: 16px; }
  .rv-plq-h { width: 106px; }
  .rv-plq-h .rv-tn { width: 16px; }
}

/* tablets: the photograph covers a taller frame, the call and its line in the haze; the plaques
   still stand at the fence either side of C, the coach's line just under them */
@media (max-width: 1023px) {
  .spec-renvers { --rv-stage-h: clamp(420px, 78vw, calc(100svh - var(--bar-h, 40px) - var(--rv-nav) - 120px)); }
  .rv-hero { display: flex; flex-direction: column; }
  .rv-stage { order: 0; }
  .rv-fit { order: 1; padding: 14px var(--rv-mar) 0; max-width: calc(27em + 2 * var(--rv-mar)); }
  .rv-sky { order: 2; padding: 8px var(--rv-mar) 0; }
  .rv-h1 { top: 16px; }
  .rv-hero { --rv-plh: 42px; --rv-plg: 10px; }
  .rv-plaques { gap: 6px; }
  .rv-plq { width: 72px; gap: 6px; font-size: 16px; }
  .rv-plq-h { width: 100px; }
  .rv-plq-h .rv-tn { width: 16px; }
}
@media (min-width: 701px) and (max-width: 1023px) {
  .spec-renvers { --rv-h1-fs: clamp(30px, 4.2vw, 38px); }
  .rv-sky { position: absolute; z-index: 6; left: 0; right: 36%; top: calc(16px + 2.06 * var(--rv-h1-fs) + 10px); padding: 0 var(--rv-mar); pointer-events: none; }
}
/* phones: the photograph's centre square; the call over its sky, the line under the arena */
@media (max-width: 700px) {
  .spec-renvers { --rv-stage-h: clamp(340px, 118vw, calc(100svh - var(--bar-h, 40px) - var(--rv-nav) - 130px)); }
  .rv-fit { padding-top: 12px; }
  .rv-sub { color: var(--rv-ink-2); }
  .rv-h1 { top: 14px; }
  .rv-hero { --rv-plh: 40px; --rv-plg: 7px; }
  .rv-plaques { left: 8px; width: calc(2 * var(--rv-cx, 50%) - 16px); display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--rv-cw, 40px) + 2 * var(--rv-plg)) minmax(0, 1fr); gap: 0; }
  .rv-plq-g { display: flex; gap: 5px; }
  .rv-plq-g1 { grid-column: 1; justify-content: flex-end; }
  .rv-plq-g2 { grid-column: 3; }
  .rv-plq, .rv-plq-h { flex: 1 1 0; width: auto; max-width: 96px; min-width: 0; font-size: 15px; }
  .rv-plq-h .rv-tn { display: none; }
  .rv-poster picture, .rv-pm { width: max(100cqw, 100cqh); aspect-ratio: 1; }
  .rv-pm-w { display: none; }
  .rv-pm-t { display: block; }
}
/* ── the figures below the arena: one dressage figure a band, drawn in metres */
/* Each figure's SVG has its viewBox in arena metres; --rv-m is pixels to the metre, so HTML set on
   the figure lands at calc(var(--rv-m) * n), and --rv-k (the same number, unitless) keeps type and
   lines at their screen size inside the scaled drawing. */
.rv-band { position: relative; max-width: calc(var(--rv-max) + 2 * var(--rv-mar)); margin: 0 auto; padding: 0 var(--rv-mar); container-type: inline-size; }
.rv-band:not(.rv-arenas, .rv-agistment) { overflow-x: clip; }
.rv-band { scroll-margin-top: calc(var(--bar-h, 40px) + var(--rv-nav)); }
.rv-h2 { font: 700 clamp(34px, 5vw, 80px)/.95 var(--rv-slab); letter-spacing: -.01em; text-wrap: balance; }
.rv-lede { font: 500 clamp(20px, 1.75vw, 26px)/1.4 var(--rv-serif); max-width: 36em; text-wrap: pretty; }
.rv-band p { text-wrap: pretty; }
.rv-call { font: 500 clamp(18px, 1.9vw, 30px)/1.25 var(--rv-slab); letter-spacing: .01em; max-width: 36em; }
.rv-call .rv-beat { font-weight: 700; color: var(--rv-claret); }
.rv-note { font: 500 16px/1.4 var(--rv-serif); color: var(--rv-ink-2); }
.rv-stress { color: var(--rv-claret); font-weight: 800; }
.rv-ph { margin: 0; }
.rv-ph picture { display: block; height: 100%; background: #DDD8CB; }
.rv-ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.74) contrast(.92) brightness(1.04); }
.rv-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.rv-fig { position: relative; --rv-k: calc(var(--rv-m) / 1px); --ox: 50%; --oy: 0px; }
.rv-fs {
  position: absolute; z-index: 1; overflow: visible; pointer-events: none;
  left: calc(var(--ox) + var(--rv-m) * var(--vx)); top: calc(var(--oy) + var(--rv-m) * var(--vy));
  width: calc(var(--rv-m) * var(--vw)); height: calc(var(--rv-m) * var(--vh));
}
.rv-fl, .rv-halo { fill: none; stroke-dasharray: 1; stroke-dashoffset: 0; }
.rv-fl { stroke: var(--rv-ink); stroke-width: calc(2px / var(--rv-k)); stroke-linecap: round; }
.rv-fl-cl { stroke-width: calc(1.5px / var(--rv-k)); }
.rv-fl-sand { stroke: var(--rv-sand); }
.rv-fl-a { stroke-width: calc(3px / var(--rv-k)); }
.rv-fl-d { stroke: var(--rv-claret); }
.rv-halo { stroke: var(--rv-chalk); stroke-width: calc(7px / var(--rv-k)); }
.rv-halo-a { stroke-width: calc(9px / var(--rv-k)); }
.rv-halt { fill: none; stroke: var(--rv-claret); stroke-width: calc(3px / var(--rv-k)); stroke-linecap: square; }
.rv-trail { fill: none; stroke: none; }
.rv-cl { font: 500 calc(clamp(18px, 1.9vw, 27px) / var(--rv-k)) var(--rv-slab); letter-spacing: .01em; fill: var(--rv-ink); }
.rv-cl .rv-beat { fill: var(--rv-claret); font-variation-settings: "wght" 700; }
.rv-cl-w2 { dominant-baseline: central; }
/* prints: a hoof pressed at true position, drawn at two and a half times its size */
.rv-prs { color: var(--rv-sand-deep); }
.rv-prs use { stroke-width: 0; }
.rv-hs { fill: currentColor; fill-opacity: .2; }
.rv-hr { fill: currentColor; fill-opacity: .92; }
.rv-hf { fill: currentColor; fill-opacity: .6; }
/* the letters a figure passes: a marker board standing where it meets the track, set up as the pen gets there */
.rv-bd {
  position: absolute; z-index: 2; translate: -50% -100%; width: 32px; height: 38px; display: grid; place-items: center;
  background: var(--rv-board); border: 1px solid rgba(21, 22, 19, .22); border-bottom: 3px solid var(--rv-sand-deep); border-radius: 1px;
  font: 700 19px/1 var(--rv-slab); color: var(--rv-ink);
}
/* a letter on the centre line is a point, not a board */
.rv-pt { position: absolute; z-index: 2; font: 700 22px/1 var(--rv-slab); color: var(--rv-sand-deep); }

/* ride the page: each line draws as its figure scrolls by, the call follows the pen, the prints
   land behind it in the gait's own beats, and the stressed words take their weight as it passes */
@supports (animation-timeline: view()) {
  .rv-fig { view-timeline: --rv-v block; }
  .rv-fl, .rv-halo {
    animation: rv-draw 1ms linear both;
    animation-timeline: --rv-v; animation-range-start: cover var(--r0, 16%); animation-range-end: cover var(--r1, 52%);
  }
  .rv-prs use {
    animation: rv-land 1ms linear both;
    animation-timeline: --rv-v;
    animation-range-start: cover calc(var(--r0, 16%) + var(--rv-t, 0) * (var(--r1, 52%) - var(--r0, 16%)));
    animation-range-end: cover calc(var(--r0, 16%) + var(--rv-t, 0) * (var(--r1, 52%) - var(--r0, 16%)) + 1.6%);
  }
  .rv-worded .rv-w {
    animation: rv-say 1ms linear both; animation-timeline: --rv-v;
    animation-range-start: cover calc(var(--r0, 16%) + var(--rv-t, 0) * (var(--r1, 52%) - var(--r0, 16%)) - .5%);
    animation-range-end: cover calc(var(--r0, 16%) + var(--rv-t, 0) * (var(--r1, 52%) - var(--r0, 16%)) + 1.5%);
  }
  .rv-halt { animation: rv-halt 1ms linear both; animation-timeline: --rv-v; animation-range-start: cover calc(var(--r1, 52%) - 1%); animation-range-end: cover calc(var(--r1, 52%) + 2%); }
  /* the movements arrive as the pen reaches each one's stretch of the spiral, and a letter as it reaches the letter */
  .rv-mn, .rv-mv-seg, .rv-bd, .rv-pt {
    animation: rv-halt 1ms linear both; animation-timeline: --rv-v;
    animation-range-start: cover calc(var(--r0, 16%) + var(--rv-t, 0) * (var(--r1, 52%) - var(--r0, 16%)) - 1%);
    animation-range-end: cover calc(var(--r0, 16%) + var(--rv-t, 0) * (var(--r1, 52%) - var(--r0, 16%)) + 1.5%);
  }
  .rv-cl .rv-beat {
    animation: rv-beat 1ms linear both;
    animation-timeline: --rv-v;
    animation-range-start: cover calc(var(--r0, 16%) + var(--rv-t, .5) * (var(--r1, 52%) - var(--r0, 16%)) - 1%);
    animation-range-end: cover calc(var(--r0, 16%) + var(--rv-t, .5) * (var(--r1, 52%) - var(--r0, 16%)) + 7%);
  }
  /* the diagonal's lines press into the page as the pen passes them */
  .rv-dl {
    animation: rv-press 1ms linear both; animation-timeline: --rv-v;
    animation-range-start: cover calc(var(--r0, 16%) + var(--rv-t, .5) * (var(--r1, 52%) - var(--r0, 16%)) - 4%);
    animation-range-end: cover calc(var(--r0, 16%) + var(--rv-t, .5) * (var(--r1, 52%) - var(--r0, 16%)) + 10%);
  }
  /* the trails that follow the questions and the form are laid as they happen, not by the scroll */
  .rv-prs-t use { animation: none; }
}
@keyframes rv-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rv-land { from { opacity: 0; stroke-width: .035; } 60% { opacity: 1; } to { opacity: 1; stroke-width: 0; } }
@keyframes rv-halt { from { opacity: 0; } to { opacity: 1; } }
@keyframes rv-say { from { fill-opacity: 0; } to { fill-opacity: 1; } }
@keyframes rv-beat { 0% { font-variation-settings: "wght" 500; } 45% { font-variation-settings: "wght" 760; } 100% { font-variation-settings: "wght" 620; } }
@keyframes rv-press { 0%, 100% { font-variation-settings: "wght" 700; } 50% { font-variation-settings: "wght" 800; } }
/* without scroll timelines: the line draws once it is in view, at the gait's own tempo */
@supports not (animation-timeline: view()) {
  .rv-io .rv-fig:not(.rv-in) :is(.rv-fl, .rv-halo) { stroke-dashoffset: 1; }
  .rv-io .rv-fig:not(.rv-in) .rv-w { fill-opacity: 0; }
  .rv-io .rv-fig .rv-w { transition: fill-opacity .2s linear calc(var(--rv-t, 0) * var(--rv-tempo, 1.6s)); }
  .rv-io .rv-fig:not(.rv-in) .rv-prs:not(.rv-prs-t) use, .rv-io .rv-fig:not(.rv-in) :is(.rv-halt, .rv-mn, .rv-mv-seg, .rv-bd, .rv-pt) { opacity: 0; }
  .rv-io .rv-fig :is(.rv-mn, .rv-mv-seg, .rv-bd, .rv-pt) { transition: opacity .2s linear calc(var(--rv-t, 0) * var(--rv-tempo, 1.6s)); }
  .rv-io .rv-fig :is(.rv-fl, .rv-halo) { transition: stroke-dashoffset var(--rv-tempo, 1.6s) linear; }
  .rv-io .rv-fig .rv-prs:not(.rv-prs-t) use { transition: opacity .18s linear calc(var(--rv-t, 0) * var(--rv-tempo, 1.6s)); }
  .rv-io .rv-fig .rv-halt { transition: opacity .2s linear var(--rv-tempo, 1.6s); }
}
.rv-site[data-gait="walk"] { --rv-tempo: 2.4s; }
.rv-site[data-gait="canter"] { --rv-tempo: 1.2s; }
/* a trail laid as it happens: a print a beat, at walk */
.rv-walk { animation: rv-walk .22s steps(1, end) both !important; animation-timeline: auto !important; animation-delay: calc(var(--rv-n, 0) * var(--rv-step, .18s)) !important; }
@keyframes rv-walk { from { opacity: 0; } to { opacity: 1; } }

/* ── 2 · starting again: down the centre line from A, halt at X */
.rv-welcome { padding-top: 104px; padding-bottom: 24px; }
.rv-fg-w { --rv-m: clamp(30px, calc((100cqw - 380px) / 20), 36px); --oy: calc(var(--rv-m) * 3.4); height: calc(var(--rv-m) * 25.2); --r0: 8%; --r1: 46%; }
.rv-bd-a { left: calc(var(--ox) + var(--rv-m) * 0); top: calc(var(--oy) - 6px); --rv-t: 0; }
.rv-fg-w .rv-h2 { position: absolute; left: 0; top: 0; width: min(calc(50% - var(--rv-m) * 2.7), 36rem); }
.rv-wp p {
  position: absolute; z-index: 2; left: 50%; width: min(31em, calc(var(--rv-m) * 19)); max-width: none; padding: 4px 0 8px;
  font-size: clamp(18px, 1.45vw, 21px); background: rgba(236, 234, 228, .88);
}
.rv-wp-d { top: calc(var(--oy) + var(--rv-m) * 6); translate: -50% -.45em; }
.rv-wp-x { top: calc(var(--oy) + var(--rv-m) * 19.1); translate: -50% -100%; }

/* ── 3 · a circle tells the truth: twenty metres at E */
.rv-lessons { padding-top: 96px; padding-bottom: 56px; }
.rv-lessons > .rv-h2 { font-weight: 800; font-size: clamp(42px, 6.4vw, 104px); letter-spacing: -.02em; }
.rv-fg-l { --rv-m: clamp(22px, calc(100cqw / 44), 30px); --oy: calc(var(--rv-m) * -5); height: calc(var(--rv-m) * 29); margin-top: 8px; --r0: 18%; --r1: 44%; }
.rv-inside { position: absolute; z-index: 2; left: 50%; top: calc(var(--oy) + var(--rv-m) * 20); translate: -50% -50%; width: min(24em, calc(var(--rv-m) * 13.4)); text-align: center; }
.rv-inside .rv-lede { font-size: clamp(19px, 1.55vw, 23px); }
.rv-stride { margin-top: 16px; font: 560 clamp(17px, 1.3vw, 19px)/1.35 var(--rv-serif); color: var(--rv-ink); }
.rv-inside .rv-note { margin: 12px auto 0; max-width: 19em; font-size: 15.5px; }
.rv-kinds { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.rv-kd { position: absolute; width: min(15.5em, calc(var(--rv-m) * 8.2)); pointer-events: auto; }
.rv-kd h3 { font: 600 22px/1.2 var(--rv-slab); margin: 0 0 6px; }
.rv-kd p { font-size: clamp(16.5px, 1.2vw, 18px); line-height: 1.45; }
.rv-kd::before { content: ""; display: block; width: 26px; height: 2px; margin-bottom: 12px; background: var(--rv-sand); }
.rv-kd-n { left: 50%; top: calc(var(--oy) + var(--rv-m) * 8.5); translate: -50% -100%; text-align: center; }
.rv-kd-n::before { margin-inline: auto; }
.rv-kd-w { left: calc(var(--ox) - var(--rv-m) * 11.4); top: calc(var(--oy) + var(--rv-m) * 18.1); translate: -100% -100%; text-align: right; }
.rv-kd-w::before { margin-left: auto; }
.rv-kd-e { left: calc(var(--ox) + var(--rv-m) * 11.4); top: calc(var(--oy) + var(--rv-m) * 18.1); translate: 0 -100%; }
.rv-kd-s { left: 50%; top: calc(var(--oy) + var(--rv-m) * 31.4); translate: -50% 0; text-align: center; }
.rv-kd-s::before { margin-inline: auto; }
.rv-bd-lb { left: calc(var(--ox) - var(--rv-m) * 10.35); top: calc(var(--oy) + var(--rv-m) * 20); translate: -100% -50%; --rv-t: 0; }
.rv-bd-le { left: calc(var(--ox) + var(--rv-m) * 10.35); top: calc(var(--oy) + var(--rv-m) * 20); translate: 0 -50%; --rv-t: .5; }

/* ── 4 · who teaches you: half-pass left, D to E, and a teacher at each of its stops */
/* the line runs 24 m along and 10 m across; each teacher's block hangs from its stop, a sixth, a
   half and five sixths of the way, so the blocks climb with the line and it never crosses them */
.rv-coaches { padding-top: 88px; padding-bottom: 72px; }
.rv-fg-c { --rv-m: min(46px, calc((100cqw - 40px) / 27)); --ox: 22px; --oy: 48px; --rv-cg: calc(var(--rv-m) * 1.3); --r0: 6%; --r1: 38%; }
.rv-co-t { position: absolute; z-index: 2; left: 0; top: 0; width: calc(var(--ox) + var(--rv-m) * 10.5); }
.rv-coaches .rv-h2 { font-size: clamp(34px, 3.6vw, 56px); }
.rv-co-t .rv-lede { margin-top: 12px; max-width: 16em; }
.rv-coach { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, calc(var(--rv-m) * 8 - var(--rv-cg))); column-gap: var(--rv-cg); align-items: start; margin: 0 0 0 calc(var(--ox) + var(--rv-m) * 4 + 12px); }
.rv-co { --rv-t: .17; margin-top: calc(var(--oy) + var(--rv-m) * 8.333 + 16px); }
.rv-co-2 { --rv-t: .5; margin-top: calc(var(--oy) + var(--rv-m) * 5 + 16px); }
.rv-co-3 { --rv-t: .83; margin-top: calc(var(--oy) + var(--rv-m) * 1.667 + 16px); }
.rv-co h3 { font: 700 clamp(30px, 2.6vw, 38px)/1 var(--rv-slab); letter-spacing: -.01em; }
.rv-co .rv-ph { margin-top: 14px; aspect-ratio: 5 / 6; }
.rv-co-1 .rv-ph img { object-position: 40% 22%; }
.rv-co-2 .rv-ph img { object-position: 50% 30%; }
.rv-co-3 .rv-ph img { object-position: 50% 6%; }
.rv-co-r { margin-top: 14px; font: 600 16px/1.25 var(--rv-slab); letter-spacing: .01em; color: var(--rv-claret); }
.rv-co-f { margin-top: 6px; font: 500 clamp(18px, 1.4vw, 21px)/1.35 var(--rv-serif); }
.rv-co p:last-child { margin-top: 8px; font-size: clamp(16.5px, 1.2vw, 18px); line-height: 1.5; }
.rv-pt-d { left: var(--ox); top: calc(var(--oy) + var(--rv-m) * 10); translate: -130% -50%; --rv-t: 0; }
.rv-bd-e { left: calc(var(--ox) + var(--rv-m) * 24); top: calc(var(--oy) - 4px); --rv-t: 1; }

/* ── 5 · what you'll learn: the spiral in, twenty metres to a ten-metre volte */
.rv-movements { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--rv-gap); align-items: center; padding-top: 48px; padding-bottom: 24px; }
.rv-mv-t { grid-column: 9 / 13; grid-row: 1; }
.rv-movements .rv-h2 { font-weight: 600; font-size: clamp(30px, 3.6vw, 56px); }
.rv-mv-t .rv-lede { margin-top: 20px; }
.rv-move-cap { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--rv-hair); min-height: 13em; }
.rv-move-name { font: 700 36px/1.1 var(--rv-slab); color: var(--rv-claret); }
.rv-move-note { margin-top: 10px; font: 400 22px/1.45 var(--rv-serif); }
.rv-fg-m { grid-column: 1 / 9; grid-row: 1; --rv-m: clamp(22px, calc(100cqw * .6 / 24), 34px); --ox: calc(50% + var(--rv-m) * .5); --oy: 50%; height: calc(var(--rv-m) * 24); --r0: 16%; --r1: 46%; }
.rv-mvn text { font-family: var(--rv-slab); fill: var(--rv-ink); cursor: pointer; pointer-events: auto; transition: fill .15s; }
.rv-mn-1 { font-size: calc(25px / var(--rv-k)); font-weight: 460; }
.rv-mn-2 { font-size: calc(20px / var(--rv-k)); font-weight: 640; }
.rv-mvn text:hover, .rv-mn.is-on { fill: var(--rv-claret); }
.rv-mh { fill: none; stroke: transparent; stroke-width: calc(40px / var(--rv-k)); stroke-linecap: round; pointer-events: stroke; cursor: pointer; }
.rv-mh.is-focus { stroke: rgba(163, 15, 58, .14); }
.rv-mv-seg { fill: none; stroke: var(--rv-claret); stroke-width: calc(3.5px / var(--rv-k)); stroke-linecap: round; }
.rv-bd-me { left: calc(var(--ox) - var(--rv-m) * 10.6); top: var(--oy); translate: -100% -50%; --rv-t: 0; }
/* the list the names come from: for the keyboard and for reading aloud; the spiral shows where it has got to */
.rv-moves { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── 6 · where your horse lives: a three-loop serpentine on its side, then the paddocks */
.rv-agistment { padding-top: 64px; padding-bottom: 0; }
.rv-agistment > .rv-call { margin-top: 18px; }
.rv-fg-a { --rv-m: min(31px, calc(100cqw / 43)); --ox: calc(var(--rv-m) * 1.5); --oy: calc(var(--rv-m) * 1.4); height: calc(var(--rv-m) * 23); margin-top: 28px; --r0: 10%; --r1: 56%; }
.rv-loops { position: absolute; inset: 0; z-index: 2; }
.rv-loop-t { position: absolute; width: calc(var(--rv-m) * 11.4); }
.rv-loop-t h3 { font: 700 26px/1.15 var(--rv-slab); margin-bottom: 8px; }
.rv-loop-t p { font-size: clamp(16.5px, 1.2vw, 18px); line-height: 1.5; }
.rv-loop-1 .rv-loop-t { left: calc(var(--ox) + var(--rv-m) * .9); top: calc(var(--oy) + var(--rv-m) * .6); }
.rv-loop-2 .rv-loop-t { left: calc(var(--ox) + var(--rv-m) * 14.3); top: calc(var(--oy) + var(--rv-m) * 11.2); }
.rv-loop-3 .rv-loop-t { left: calc(var(--ox) + var(--rv-m) * 27.6); top: calc(var(--oy) + var(--rv-m) * .6); }
.rv-stop { stroke-width: calc(3px / var(--rv-k)); }
.rv-bd-af, .rv-bd-am { top: calc(var(--oy) + var(--rv-m) * 20.8); translate: -50% 0; }
.rv-bd-af { left: calc(var(--ox) + var(--rv-m) * 6.667); --rv-t: .2; }
.rv-bd-am { left: calc(var(--ox) + var(--rv-m) * 33.333); --rv-t: .8; }
.rv-bd-ae { left: calc(var(--ox) + var(--rv-m) * 20); top: calc(var(--oy) - var(--rv-m) * .8); --rv-t: .5; }
.rv-ph-paddocks { margin: 48px calc(50% - 50vw) 0; }
.rv-ph-paddocks picture { aspect-ratio: 21 / 9; max-height: 80svh; width: 100%; }
.rv-ph-paddocks img { object-position: 50% 58%; }
.rv-ph-paddocks figcaption { max-width: calc(var(--rv-max) + 2 * var(--rv-mar)); margin: 14px auto 0; padding: 0 var(--rv-mar); font: 500 16px/1.4 var(--rv-serif); color: var(--rv-ink-2); }

/* ── 7 · change the rein across the long diagonal, then the covered arena */
.rv-arenas { padding-top: 88px; }
.rv-fg-d { --rv-m: min(22px, calc(100cqw / 46)); --ox: calc(50% - var(--rv-m) * 20); --oy: calc(var(--rv-m) * 1.6); height: calc(var(--rv-m) * 23.4); --r0: 14%; --r1: 50%; }
.rv-diag { position: absolute; z-index: 2; left: calc(var(--ox) + var(--rv-m) * 8.3); top: calc(var(--oy) + var(--rv-m) * 1.1); rotate: 35.54deg; transform-origin: 0 0; }
.rv-diag .rv-h2 { font-size: calc(var(--rv-m) * 2.95); font-weight: 700; line-height: .95; letter-spacing: -.015em; white-space: nowrap; translate: 0 -.8em; text-wrap: nowrap; }
.rv-dl { display: block; }
.rv-diag .rv-stress { font-weight: 800; font-variation-settings: "wght" 800; }
.rv-dl:nth-child(1) { --rv-t: .25; }
.rv-dl:nth-child(2) { --rv-t: .5; }
.rv-dl:nth-child(3) { --rv-t: .7; }
.rv-bd-dk { left: calc(var(--ox) + var(--rv-m) * 5.4); top: calc(var(--oy) + var(--rv-m) * 0); translate: -100% -50%; --rv-t: 0; }
.rv-bd-dm { left: calc(var(--ox) + var(--rv-m) * 34.6); top: calc(var(--oy) + var(--rv-m) * 20); translate: 0 -50%; --rv-t: 1; }
/* the one band where the arena lets go: the covered arena full across, its words on its sand */
.rv-cov { position: relative; margin: 40px calc(50% - 50vw) 0; }
.rv-ph-covered picture { aspect-ratio: 16 / 9; max-height: 94svh; width: 100%; }
.rv-ph-covered img { object-position: 50% 60%; }
.rv-cov::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 62% 70% at 12% 100%, rgba(236, 234, 228, .93) 0, rgba(236, 234, 228, .84) 48%, rgba(236, 234, 228, 0) 100%); }
.rv-ar-t { position: absolute; z-index: 2; left: max(var(--rv-mar), calc(50vw - var(--rv-max) / 2)); bottom: clamp(28px, 6%, 64px); width: min(31em, 40vw); }
.rv-ar-t p + p { margin-top: .7em; }
.rv-ar-t .rv-lede { margin-bottom: .9em; font-size: clamp(21px, 1.9vw, 28px); font-weight: 600; }
.rv-ar-t .rv-note { margin-top: 1em; }

/* ── 8 · questions: free walk on a long rein, the prints walking on to the open question */
.rv-questions { padding-top: 88px; padding-bottom: 72px; }
.rv-questions > :is(.rv-h2, .rv-call), .rv-fg-q { margin-left: calc((100% + var(--rv-gap)) / 12 * 2); width: calc((100% + var(--rv-gap)) / 12 * 8 - var(--rv-gap)); }
.rv-questions .rv-h2 { font-weight: 600; font-size: clamp(30px, 3.6vw, 56px); }
.rv-questions > .rv-call { margin-top: 14px; }
.rv-fg-q { --rv-m: 36px; --ox: 22px; --oy: 0px; margin-top: 36px; --r0: 4%; --r1: 70%; }
.rv-fl-q { stroke-width: calc(2px / var(--rv-k)); }
.rv-qs { position: relative; z-index: 2; }
.rv-q { position: relative; padding-left: 68px; border-top: 1px solid var(--rv-hair); }
.rv-q:last-child { border-bottom: 1px solid var(--rv-hair); }
.rv-q summary { display: flex; align-items: center; min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none; font: 600 clamp(19px, 1.6vw, 24px)/1.3 var(--rv-slab); }
.rv-q summary::-webkit-details-marker { display: none; }
/* the letter the question stands at, a board on the track: claret while it is open */
.rv-mb {
  position: absolute; left: 22px; top: 14px; translate: -50% 0; width: 30px; height: 36px; display: grid; place-items: center;
  background: var(--rv-board); border: 1px solid rgba(21, 22, 19, .24); border-bottom-color: rgba(21, 22, 19, .42); border-radius: 1px;
  font: 700 17px/1 var(--rv-slab); color: var(--rv-ink); transition: color .2s, box-shadow .2s;
}
.rv-q[open] .rv-mb { color: var(--rv-claret); box-shadow: inset 0 -3px 0 var(--rv-claret); }
.rv-q summary:hover .rv-mb { box-shadow: inset 0 -3px 0 var(--rv-sand-deep); }
.rv-q p { padding: 0 0 22px; max-width: 38em; }

/* ── 9 · halt at G: the form is the last centre line, a letter a question */
.rv-enquiry { padding-top: 96px; padding-bottom: 88px; }
.rv-en-t { max-width: 44rem; margin-left: calc((100% + var(--rv-gap)) / 12 * 2); }
.rv-en-t .rv-lede { margin-top: 20px; }
.rv-fg-e { --rv-m: 22px; --ox: calc((100% + var(--rv-gap)) / 12 * 2 + 22px); --oy: 0px; margin-top: 44px; --r0: 6%; --r1: 60%; }
.rv-fl-e { stroke-width: calc(2px / var(--rv-k)); }
.rv-form { position: relative; z-index: 2; display: grid; gap: 0; margin-left: calc((100% + var(--rv-gap)) / 12 * 2); max-width: 54rem; }
.rv-st { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 40px; padding: 18px 0 30px 72px; }
.rv-st > .rv-f-words { grid-column: 1 / -1; }
.rv-sl { position: absolute; left: 22px; top: 18px; translate: -50% 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--rv-chalk); box-shadow: inset 0 0 0 1.5px var(--rv-sand-deep); font: 700 17px/1 var(--rv-slab); color: var(--rv-sand-deep); transition: color .2s, box-shadow .2s; }
.rv-sl-a { border-radius: 1px; width: 30px; height: 36px; background: var(--rv-board); box-shadow: inset 0 0 0 1px rgba(21, 22, 19, .24), inset 0 -3px 0 var(--rv-sand-deep); color: var(--rv-ink); }
.rv-st.is-at .rv-sl, .rv-st:focus-within .rv-sl { color: var(--rv-claret); box-shadow: inset 0 0 0 2px var(--rv-claret); }
.rv-st-a.is-at .rv-sl, .rv-st-a:focus-within .rv-sl { box-shadow: inset 0 0 0 1px rgba(21, 22, 19, .24), inset 0 -3px 0 var(--rv-claret); }
.rv-sl-g { width: 56px; height: 56px; top: 8px; font-size: 30px; font-weight: 800; color: var(--rv-claret); box-shadow: inset 0 0 0 2px var(--rv-claret); }
.rv-st-g { grid-template-columns: 1fr; padding-top: 14px; padding-bottom: 0; }
.rv-f { display: grid; align-content: start; gap: 6px; border: 0; min-width: 0; margin: 0; padding: 0; }
.rv-f-words { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.rv-f > label, .rv-f legend { font: 500 16px/1.4 var(--rv-serif); color: var(--rv-ink-2); padding: 0; }
.rv-f input[type="text"], .rv-f input[type="email"], .rv-f textarea {
  width: 100%; font: 400 20px/1.4 var(--rv-serif); color: var(--rv-ink); background: transparent;
  border: 0; border-bottom: 1px solid rgba(21, 22, 19, .34); border-radius: 0; padding: 6px 0 8px; outline: none; resize: vertical;
}
.rv-f input:focus, .rv-f textarea:focus { border-bottom: 2px solid var(--rv-claret); padding-bottom: 7px; }
.rv-f ::placeholder { color: #85837A; }
.rv-f-words legend { width: 100%; margin-bottom: 4px; float: left; }
.rv-f-words label { display: inline-flex; align-items: center; gap: 9px; font: 500 19px/1.3 var(--rv-serif); cursor: pointer; min-height: 44px; }
.rv-f-words input { accent-color: var(--rv-claret); width: 18px; height: 18px; margin: 0; }
.rv-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; min-height: 72px; }
.rv-btn { height: 52px; padding: 0 30px; border: 0; border-radius: 2px; background: var(--rv-claret); color: var(--rv-chalk); font: 700 18px/1 var(--rv-slab); letter-spacing: .01em; cursor: pointer; }
.rv-btn:hover { background: #8C0C31; }
.rv-sent { min-height: 1.35em; font: 560 18px/1.35 var(--rv-serif); }
.rv-leave { margin-top: 72px; text-align: center; font: 500 18px/1.3 var(--rv-slab); color: var(--rv-ink-2); }
.rv-foot { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 36px var(--rv-mar) 56px; max-width: calc(var(--rv-max) + 2 * var(--rv-mar)); margin: 0 auto; }
.rv-foot .rv-mk { width: 24px; height: 24px; }
.rv-foot p { font: 500 16px/1.4 var(--rv-serif); color: var(--rv-ink-2); }
.rv-reland .rv-hp { animation: rv-reland .24s steps(1, end) both !important; animation-timeline: auto !important; animation-delay: calc(var(--rv-q, 0) * .24s) !important; }
@keyframes rv-reland { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .rv-site *, .rv-site *::before, .rv-site *::after { transition-duration: 0s !important; }
  .rv-fl, .rv-halo, .rv-prs use, .rv-halt, .rv-beat, .rv-w, .rv-dl, .rv-mn, .rv-mv-seg, .rv-bd, .rv-pt { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; fill-opacity: 1 !important; }
  .rv-reland .rv-hp, .rv-walk { animation: none !important; }
}
/* without scripts the photographs come from their <noscript> copies, in the same frames */
@media (scripting: none) { .rv-ph .rv-lazy { display: none; } }
/* ── narrower screens */
/* the four kinds of lesson stand round the circle only where there is room for them */
@media (max-width: 1299px) {
  .rv-fg-l { height: auto; padding-top: calc(var(--rv-m) * 24); --oy: calc(var(--rv-m) * -7.4); }
  .rv-kinds { position: relative; inset: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px var(--rv-gap); }
  .rv-kd { position: static; width: auto; translate: none; text-align: left; }
  .rv-kd::before { margin: 0 0 12px; }
}
@media (max-width: 1023px) {
  .rv-movements { display: block; }
  .rv-fg-m { --rv-m: min(32px, calc(100cqw / 24.5)); }
  .rv-mv-t { margin-top: 40px; max-width: 40em; }
  .rv-move-cap { min-height: 0; }
  .rv-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--rv-gap); }
  .rv-fg-l { --rv-m: min(26px, calc(100cqw / 24)); }

  /* the diagonal across the width; the covered arena, its words under it */
  .rv-fg-d { --rv-m: calc(100cqw / 40); --ox: 0px; }
  .rv-cov::after { display: none; }
  .rv-ar-t { position: static; width: auto; max-width: 40em; margin: 28px auto 0; padding: 0 var(--rv-mar); }
  .rv-ph-covered picture { aspect-ratio: 3 / 2; }

  /* the form down the centre line at the left */
  .rv-en-t, .rv-form { margin-left: 0; }
  .rv-fg-e { --ox: 22px; }
}

/* under 1024 px the teachers stand one under another beside the climbing half-pass; up to 1180 px
   the serpentine's words go under it */
@media (max-width: 1180px) {
  /* the serpentine across the width, its three loops' words under it in the same order */
  .rv-agistment { padding-top: 64px; }
  .rv-fg-a { height: auto; --rv-m: calc(100cqw / 43); padding-top: calc(var(--rv-m) * 23); margin-top: 20px; }
  .rv-loops { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px var(--rv-gap); margin-top: 14px; }
  .rv-loop-t { position: static; width: auto; }
  .rv-loop-t h3 { font-size: 22px; }
  .rv-fg-a .rv-bd { width: 24px; height: 29px; font-size: 15px; }
  .rv-ph-paddocks { margin-top: 36px; }
  .rv-ph-paddocks picture { aspect-ratio: 3 / 2; }
}

@media (min-width: 1024px) and (max-width: 1180px) {
  .rv-co h3 { font-size: 30px; }
  .rv-co-f { font-size: 17.5px; }
  .rv-co p:last-child { font-size: 16px; }
}
@media (max-width: 1023px) {
  /* the half-pass turns to climb the screen beside the teachers, D at the foot and E at the top */
  .rv-coaches { padding-top: 72px; padding-bottom: 56px; }
  .rv-fg-c { --rv-m: 24px; --ox: 14px; --oy: 0px; }
  .rv-co-t { position: static; width: auto; margin-bottom: 14px; }
  .rv-fg-c > .rv-vh { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; margin: 0 0 34px; font: 500 17px/1.3 var(--rv-slab); letter-spacing: .01em; }
  .rv-fg-c .rv-cl, .rv-fg-c .rv-stop { display: none; }
  .rv-coach { grid-template-columns: minmax(0, 1fr); row-gap: 48px; margin: 0; padding: 44px 0 30px 46px; }
  .rv-co, .rv-co-2, .rv-co-3 { margin-top: 0; display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr); column-gap: 24px; align-content: start; }
  .rv-co > * { grid-column: 2; }
  .rv-co .rv-ph { grid-column: 1; grid-row: 1 / span 5; margin-top: 0; }
  .rv-co { position: relative; }
  .rv-co::before { content: ""; position: absolute; left: -39px; top: 16px; width: 14px; height: 3px; background: var(--rv-claret); }
  .rv-pt-d { top: calc(var(--oy) + var(--tl, 0px) + 8px); translate: -50% 0; }
  .rv-bd-e { left: var(--ox); top: calc(var(--oy) - 2px); }
}

/* phones: each figure still true to scale, the words set beside or below it */
@media (max-width: 700px) {
  .rv-h2 { font-size: clamp(32px, 9.4vw, 40px); }
  .rv-lede { font-size: 20px; }
  .rv-cl { font-size: calc(16px / var(--rv-k)); }

  /* down the centre line on the left, the words beside it */
  .rv-welcome { padding-top: 72px; padding-bottom: 48px; }
  .rv-fg-w { height: auto; --rv-m: 40px; --ox: 12px; --oy: calc(150px + var(--rv-m) * 2.2); }
  .rv-fg-w .rv-h2 { position: static; width: auto; }
  .rv-fg-w .rv-cl { font-size: calc(17px / var(--rv-k)); }
  .rv-cl-w1 { translate: -.25px 0; }
  .rv-wp { margin: calc(var(--rv-m) * 8.2) 0 calc(var(--rv-m) * 3) 34px; }
  .rv-wp p { position: static; width: auto; translate: none; padding: 0; background: none; font-size: 18px; }
  .rv-wp p + p { margin-top: 1em; }

  /* the circle across the screen, the four kinds round it: one above, two inside, one below */
  .rv-lessons { padding-top: 72px; padding-bottom: 56px; }
  .rv-lessons > .rv-h2 { font-size: clamp(40px, 12vw, 48px); }
  .rv-fg-l { --rv-m: calc(100cqw / 22.4); --oy: 0px; display: grid; grid-template-columns: minmax(0, 1fr); height: auto; padding-top: 0; margin-top: 18px; }
  .rv-fg-l .rv-bd { display: none; }
  .rv-fg-l .rv-cl { font-size: calc(clamp(13px, 3.9vw, 15px) / var(--rv-k)); }
  .rv-inside { display: contents; }
  .rv-inside .rv-lede { grid-row: 1; }
  .rv-fg-l .rv-fs { grid-row: 3; grid-column: 1; position: relative; left: auto; top: auto; margin: calc(var(--rv-m) * -.9) 0 calc(var(--rv-m) * -.7) calc(50% - var(--rv-m) * 16); }
  .rv-kinds { display: contents; }
  .rv-kd { position: relative; inset: auto; width: auto; translate: none; text-align: center; z-index: 2; }
  .rv-kd::before { margin: 0 auto 10px; }
  .rv-kd h3 { font-size: 19px; margin-bottom: 4px; }
  .rv-kd p { font-size: 15.5px; line-height: 1.4; }
  .rv-kd-n { grid-row: 2; margin: 22px auto 0; max-width: 17em; }
  .rv-kd-s { grid-row: 4; margin: 0 auto; max-width: 17em; }
  .rv-kd-w, .rv-kd-e { grid-row: 3; grid-column: 1; align-self: center; width: 40%; }
  .rv-kd-w { justify-self: start; margin-left: 9%; text-align: left; }
  .rv-kd-e { justify-self: end; margin-right: 9%; text-align: right; }
  .rv-kd-w::before { margin: 0 0 10px; }
  .rv-kd-e::before { margin: 0 0 10px auto; }
  .rv-stride { grid-row: 5; margin-top: 22px; }
  .rv-inside .rv-note { grid-row: 6; margin: 10px 0 0; max-width: none; }
  .rv-inside .rv-lede, .rv-stride, .rv-inside .rv-note { text-align: left; }

  /* the teachers one under another, each photograph above its words */
  .rv-coach { padding-left: 34px; row-gap: 56px; }
  .rv-co, .rv-co-2, .rv-co-3 { grid-template-columns: minmax(0, 1fr); }
  .rv-co .rv-ph { grid-column: 1; grid-row: auto; margin-top: 12px; aspect-ratio: 1; max-height: 60svh; }
  .rv-co > * { grid-column: 1; }
  .rv-co h3 { font-size: 30px; }
  .rv-co::before { left: -27px; }

  /* the spiral keeps its movements on the line, smaller; a tap on one draws it in claret */
  .rv-movements { padding-top: 56px; padding-bottom: 56px; display: flex; flex-direction: column; align-items: stretch; }
  .rv-mv-t { display: contents; }
  .rv-movements .rv-h2 { order: 1; }
  .rv-mv-t .rv-lede { order: 2; }
  .rv-fg-m { order: 3; margin-top: 18px; }
  .rv-move-cap { order: 4; margin-top: 18px; }
  .rv-fg-m { --rv-m: calc(100cqw / 24.2); height: calc(var(--rv-m) * 23); --oy: 50%; }
  .rv-mn-1 { font-size: calc(14px / var(--rv-k)); }
  .rv-mn-2 { font-size: calc(12px / var(--rv-k)); }
  .rv-mh { stroke-width: calc(34px / var(--rv-k)); }
  .rv-fg-m .rv-bd { width: 24px; height: 29px; font-size: 15px; }
  .rv-move-name { font-size: 30px; }
  .rv-move-note { font-size: 19px; }

  .rv-loops { grid-template-columns: minmax(0, 1fr); gap: 26px; }

  /* the diagonal cropped to its own length, the heading level above it */
  .rv-arenas { padding-top: 72px; }
  .rv-fg-d { --rv-m: calc(100cqw / 32); --ox: calc(var(--rv-m) * -4.1); --oy: calc(var(--rv-m) * 4.6); height: auto; display: flex; flex-direction: column; overflow: clip; }
  .rv-diag { position: static; rotate: none; order: 1; }
  .rv-diag .rv-h2 { translate: none; font-size: clamp(34px, 10.4vw, 42px); white-space: normal; text-wrap: balance; }
  .rv-fg-d .rv-fs { order: 2; position: relative; flex: none; top: auto; left: auto; margin: calc(var(--rv-m) * 1.4) 0 calc(var(--rv-m) * -.4) calc(var(--rv-m) * -4.1); }
  .rv-fg-d .rv-bd { display: none; }
  .rv-cov { margin-top: 28px; }
  .rv-ph-covered picture { aspect-ratio: 4 / 5; max-height: 76svh; }

  /* the questions down the long side, a board at each */
  .rv-questions { padding-top: 64px; padding-bottom: 64px; }
  .rv-questions > :is(.rv-h2, .rv-call), .rv-fg-q { margin-left: 0; width: 100%; }
  .rv-fg-q { --ox: 15px; margin-top: 24px; }
  .rv-q { padding-left: 46px; }
  .rv-mb { left: 15px; width: 28px; height: 34px; font-size: 16px; }
  .rv-q summary { font-size: 19px; min-height: 60px; }

  /* the form down the centre line at the left, a question a letter */
  .rv-enquiry { padding-top: 80px; }
  .rv-fg-e { --ox: 15px; margin-top: 32px; }
  .rv-st { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 14px 0 28px 48px; }
  .rv-sl { left: 15px; top: 14px; width: 30px; height: 30px; font-size: 16px; }
  .rv-sl-a { width: 28px; height: 34px; }
  .rv-sl-g { width: 46px; height: 46px; top: 12px; font-size: 25px; }
  .rv-st-g { padding-left: 60px; }
  .rv-f-words { gap: 0 20px; }
  .rv-leave { margin-top: 56px; }
}