/* Torsion. A race programme printed for one rider:
   volt ground, ink type, violet for the live numbers, titanium grey for the drawing.
   Anybody only; the 12° lean lives only in container edges (clip-path), never on text. */
@font-face { font-family: "Anybody"; src: url("/assets/fonts/specimen/anybody-var-italic.woff2") format("woff2"); font-style: italic; font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; }
@font-face { font-family: "Anybody"; src: url("/assets/fonts/specimen/anybody-var.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; }

body.spec-torsion { margin: 0; background: #DDF73A; }
.to-page {
  --to-volt: #DDF73A; --to-ink: #0B0B0E; --to-violet: #5B21F2; --to-ti: #8E959C;
  --to-font: "Anybody", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --to-g: clamp(16px, 2.8vw, 40px); --to-cg: clamp(12px, 1.7vw, 24px);
  --to-ease: cubic-bezier(.2, .9, .1, 1);
  --to-nav-h: 64px; --to-bar: var(--bar-h, 41px);
  --to-cut: calc(100cqi * .2126);
  --to-pad: clamp(64px, 9vw, 160px);
  container-type: inline-size;
  position: relative;
  background: var(--to-volt); color: var(--to-ink);
  font-family: var(--to-font); font-weight: 400; font-variation-settings: "wdth" 100;
  font-size: clamp(1.0625rem, 1.03rem + .1vw, 1.125rem); line-height: 1.58;
  font-synthesis: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.to-page *, .to-page *::before, .to-page *::after { box-sizing: border-box; }
.to-page :where(p, h1, h2, h3, ol, ul, dl, dd, figure, fieldset, legend, table) { margin: 0; }
.to-page :where(ul, ol, fieldset, legend) { padding: 0; }
.to-page fieldset { border: 0; min-width: 0; }
.to-page img { display: block; width: 100%; height: 100%; object-fit: cover; }
.to-page picture { display: block; }
.to-page :focus-visible { outline: 3px solid var(--to-violet); outline-offset: 3px; }
.to-page .to-ink :focus-visible { outline-color: var(--to-volt); }
.to-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.to-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }

/* the sticky nav, under the Ozwebnet bar */
.to-nav { position: sticky; top: var(--to-bar); z-index: 60; display: flex; align-items: center; gap: 20px; min-height: var(--to-nav-h); padding-inline: var(--to-g); background: var(--to-volt); border-bottom: 2px solid transparent; }
.to-nav.is-stuck { border-bottom-color: var(--to-ink); }
.to-mark { margin-right: auto; color: var(--to-ink); text-decoration: none; font-style: italic; font-weight: 900; font-size: 1.375rem; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; font-variation-settings: "wdth" 150; padding-block: 8px; }
.to-navlist { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); list-style: none; }
.to-navlist a, .to-foot-nav a { display: inline-grid; justify-items: center; color: var(--to-ink); text-decoration: none; font-weight: 600; font-size: .8125rem; line-height: 1; letter-spacing: .06em; text-transform: uppercase; font-variation-settings: "wdth" 110; padding-block: 10px; transition: font-variation-settings 160ms var(--to-ease); }
.to-navlist a::after { content: attr(data-t) / ""; font-variation-settings: "wdth" 125; height: 0; overflow: hidden; visibility: hidden; }
.to-navlist .to-navcta a { position: relative; isolation: isolate; padding: 12px 20px; color: var(--to-volt); }
.to-navcta a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--to-ink); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); transition: background-color 160ms var(--to-ease); }
.to-menu { display: none; }
@media (hover: hover) {
  .to-navlist a:hover, .to-foot-nav a:hover { font-variation-settings: "wdth" 125; }
  .to-navcta a:hover::before { background: var(--to-violet); }
}

/* buttons: an ink parallelogram drawn behind, so the focus outline survives */
.to-btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 30px; border: 0; background: none; color: var(--to-volt); font: inherit; font-weight: 600; font-size: .8125rem; line-height: 1.1; letter-spacing: .06em; text-transform: uppercase; font-variation-settings: "wdth" 110; text-decoration: none; cursor: pointer; }
.to-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--to-ink); clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); transition: background-color 160ms var(--to-ease); }
.to-ar { font-weight: 700; font-size: 1.15em; line-height: 1; }
/* text on a drawn plate (the parallelograms live on ::before): a see-through layer tells the
   contrast check the ground is not the page's; volt on ink and ink on volt are 16.3:1 */
.to-btn, .to-navcta a, .to-sw { background-image: linear-gradient(transparent, transparent); }
.to-ink .to-btn { color: var(--to-ink); }
.to-ink .to-btn::before { background: var(--to-volt); }
@media (hover: hover) {
  .to-btn:hover::before { background: var(--to-violet); }
  .to-ink .to-btn:hover::before { background: var(--to-volt); box-shadow: inset 0 -4px 0 var(--to-ink), inset 0 4px 0 var(--to-volt); }
  .to-ink .to-btn:hover { text-decoration: underline 2px; text-underline-offset: 4px; }
}
.to-link { display: inline-block; color: var(--to-ink); font-weight: 600; font-size: .9375rem; letter-spacing: .02em; font-variation-settings: "wdth" 110; text-decoration: underline 2px var(--to-violet); text-underline-offset: 6px; padding-block: 8px; transition: font-variation-settings 160ms var(--to-ease); }
@media (hover: hover) { .to-link:hover { font-variation-settings: "wdth" 125; text-decoration-color: var(--to-ink); } }

/* type */
.to-kicker { font-weight: 700; font-size: .75rem; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; font-variation-settings: "wdth" 125; }
.to-page h2 { font-style: italic; font-weight: 800; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); line-height: 1.05; letter-spacing: -.005em; font-variation-settings: "wdth" 110; text-wrap: balance; }
.to-page h3 { font-weight: 800; }
.to-lede { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.42; font-weight: 450; }
.to-copy { max-width: 34rem; }
.to-copy > * + * { margin-top: 16px; }
.to-copy h2 + * { margin-top: 20px; }
.to-poster { font-style: italic; font-weight: 850; line-height: .84; letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; pointer-events: none; user-select: none; }
.to-pl { display: block; width: max-content; font-variation-settings: "wdth" var(--to-w, 125); }

/* sections: each one a poster */
.to-sec { position: relative; padding-block: var(--to-pad); padding-inline: var(--to-g); overflow-x: clip; }
.to-sec, .to-bench, .to-hero { scroll-margin-top: calc(var(--to-bar) + var(--to-nav-h)); }
.to-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--to-cg); }

/* photographs in 12° windows: the edge that faces the type leans */
.to-win { position: relative; }
.to-win picture { width: 100%; height: 100%; }
.to-win-l picture { clip-path: polygon(var(--lean) 0, 100% 0, 100% 100%, 0 100%); }
.to-win-r picture { clip-path: polygon(0 0, 100% 0, calc(100% - var(--lean)) 100%, 0 100%); }
.to-win-b picture { clip-path: polygon(var(--lean) 0, 100% 0, 100% 100%, 0 100%); }
.to-win-sq picture { clip-path: polygon(var(--lean) 0, 100% 0, 100% 100%, 0 100%); }
.to-win figcaption { margin-top: 10px; font-size: .875rem; line-height: 1.45; font-variation-settings: "wdth" 92; }

/* the two ink posters: the band's edges drop 12° left to right */
.to-ink { background: var(--to-ink); color: var(--to-ti); margin-top: calc(-1 * var(--to-cut)); padding-top: calc(var(--to-cut) + 48px); padding-bottom: calc(var(--to-cut) + 32px); clip-path: polygon(0 0, 100% var(--to-cut), 100% 100%, 0 calc(100% - var(--to-cut))); }
.to-ink h2, .to-ink .to-poster, .to-ink .to-kicker, .to-ink b { color: var(--to-volt); }
.to-ink + .to-sec, .to-ink + .to-foot { margin-top: calc(-1 * var(--to-cut)); padding-top: calc(var(--to-cut) + 40px); }

/* ── the fit: the hero, the frame drawn to the rider, and the bench ─────────────────────── */
.to-page [hidden] { display: none !important; }
.to-fit { position: relative; padding-inline: var(--to-g); overflow-x: clip; --to-fs: min(11.4cqi, 13rem); }
.to-hero { position: relative; }
.to-hk { margin-bottom: 24px; }
.to-h1 { font-size: var(--to-fs); font-style: italic; font-weight: 900; line-height: .8; letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; }
.to-l { display: block; width: max-content; font-variation-settings: "wdth" var(--to-w); --to-w: 110; --n: 0; }
.to-l2 { margin-left: .17em; --n: 1; }
.to-l3 { margin-left: .34em; --n: 2; }
.to-l4 { margin-left: .51em; --to-w: 150; --n: 3; }
.to-sub { max-width: 40ch; font-size: clamp(1.0625rem, 1rem + .5vw, 1.375rem); line-height: 1.42; font-weight: 450; }
.to-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }

.to-frame { position: relative; z-index: 3; container-type: inline-size; pointer-events: none; }
.to-svg { display: block; width: 100%; height: auto; aspect-ratio: 1980 / 1240; overflow: visible; --to-u: 2.53; }
.to-svg .to-k { fill: none; stroke: var(--to-ink); stroke-linecap: round; stroke-linejoin: round; }
.to-svg .to-g, .to-mini .to-g { fill: none; stroke: var(--to-ti); stroke-linecap: round; stroke-linejoin: round; }
.to-mini .to-k { fill: none; stroke: var(--to-ink); stroke-linecap: round; stroke-linejoin: round; }
.to-svg .to-fill, .to-mini .to-fill, .to-svg .to-hub, .to-mini .to-hub { fill: var(--to-ink); stroke: none; }
.to-svg .to-tyre, .to-mini .to-tyre { fill: none; stroke: var(--to-ti); }
.to-svg .to-hair { fill: none; stroke: var(--to-ink); stroke-width: calc(var(--to-u) * 1px); }
.to-mini .to-hair { fill: none; stroke: var(--to-ink); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.to-svg .to-dot { stroke-dasharray: calc(var(--to-u) * 2px) calc(var(--to-u) * 5px); }
.to-svg .to-dash { stroke-dasharray: calc(var(--to-u) * 10px) calc(var(--to-u) * 4px) calc(var(--to-u) * 2px) calc(var(--to-u) * 4px); }
.to-svg .to-rack, .to-mini .to-rack { stroke-dasharray: 6px 3px; }
.to-svg .to-rack, .to-svg .to-guard { stroke-width: calc(var(--to-u) * 1.4px); }
.to-svg .to-ground { stroke-width: calc(var(--to-u) * 2px); display: none; }
.to-mini .to-mground { stroke-width: 2px; }
.to-svg .to-sad, .to-mini .to-sad { fill: var(--to-violet); stroke: none; }
.to-svg .to-lens { fill: var(--to-violet); }
.to-svg .to-rim, .to-mini .to-rim { stroke-opacity: .55; }
.to-gh { fill: none; stroke: var(--to-ti); stroke-width: calc(var(--to-u) * 1.5px); stroke-linecap: round; }
.to-gh0 { opacity: .32; } .to-gh1 { opacity: .24; } .to-gh2 { opacity: .16; } .to-gh3 { opacity: .08; }
.to-ghosts { transition: opacity 480ms linear; }
.to-ghosts.is-fading { opacity: 0; }

/* the eight figures: violet italic, their width axis bound to their value, on volt plates */
.to-read { margin: 0; }
.to-f dt { font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; font-variation-settings: "wdth" 125; white-space: nowrap; }
.to-f dd { display: flex; align-items: baseline; gap: .35em; line-height: .9; white-space: nowrap; }
.to-v { display: inline-block; color: var(--to-violet); font-style: italic; font-weight: 900; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; font-variation-settings: "wdth" var(--w, 100); }
.to-u { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-variation-settings: "wdth" 125; }
.to-f[data-k="stack"], .to-f[data-k="reach"], .to-f[data-k="cs"], .to-f[data-k="sh"] { --mw: 3.12em; }
.to-f[data-k="sa"], .to-f[data-k="ha"] { --mw: 3.68em; }
.to-f[data-k="wb"] { --mw: 4.16em; }
.to-f[data-k="trail"] { --mw: 2.1em; }
.to-hint { position: absolute; top: 0; right: 0; z-index: 5; padding: 3px 6px; background: var(--to-volt); font-weight: 700; font-size: .6875rem; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; font-variation-settings: "wdth" 125; transition: opacity 320ms var(--to-ease); }
.to-hint.is-gone { opacity: 0; }

/* the handles: an ink ring, a volt ring and a violet core, at a fixed CSS size */
.to-hwrap { position: absolute; top: 0; left: 0; z-index: 4; width: 100%; aspect-ratio: 1980 / 1240; pointer-events: none; }
.to-hs { display: block; width: 100%; height: 100%; overflow: visible; }
.to-h { cursor: grab; touch-action: none; outline: none; }
.to-h.is-drag { cursor: grabbing; }
.to-h-hit { fill: transparent; pointer-events: all; }
.to-h-o { fill: var(--to-ink); } .to-h-v { fill: var(--to-volt); } .to-h-c { fill: var(--to-violet); }
.to-h-ring { fill: none; stroke: var(--to-violet); stroke-width: calc(var(--to-u) * 3px); opacity: 0; }
.to-page .to-h:focus-visible { outline: none; }
.to-h:focus-visible .to-h-ring { opacity: 1; }
@media (hover: hover) { .to-h:hover .to-h-c { fill: var(--to-ink); } .to-h:hover .to-h-o { fill: var(--to-violet); } }

@media (min-width: 700px) {
  .to-read { position: absolute; inset: 0; }
  .to-f { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); padding: .2em .45em .25em; background: var(--to-volt); font-size: max(10px, 1.53cqi); }
  .to-fr { transform: translateX(-100%); text-align: right; }
  .to-fr dd { justify-content: flex-end; }
  .to-fc { transform: translateX(-50%); text-align: center; }
  .to-fc dd { justify-content: center; }
  .to-fp { --fv: 5.87cqi; } .to-fs { --fv: 3.83cqi; }
  .to-f .to-v { font-size: var(--fv); }
  /* each figure's box is sized for its widest state (wdth 150) with its unit, so nothing ever reflows */
  .to-f dd { min-width: calc(var(--mw) * var(--fv) + var(--uw, 2.4em)); }
  .to-f[data-k="sa"], .to-f[data-k="ha"] { --uw: 0em; }
}

/* the bench */
.to-bk { position: relative; z-index: 1; font-size: clamp(2.4rem, 8.4cqi, 8rem); font-style: italic; font-weight: 900; line-height: .84; text-transform: uppercase; white-space: nowrap; pointer-events: none; user-select: none; }
.to-bk-t { display: block; width: max-content; font-variation-settings: "wdth" var(--to-w, 127); transition: font-variation-settings 320ms var(--to-ease); }
.to-bk-t.is-out { --to-w: 50 !important; transition-duration: 160ms; }
.to-bench-in { position: relative; z-index: 2; display: grid; gap: 24px; max-width: 34rem; margin-top: 48px; }
.to-bench-in > h2 + .to-lede { margin-top: -8px; }
.to-nojs, .to-line { padding: 14px 18px; border: 2px solid var(--to-ink); font-weight: 500; line-height: 1.42; }
.to-ctl { display: grid; gap: 28px; }
.to-styles legend, .to-rl, .to-enq legend, .to-enq label:not(.to-radios label) { font-weight: 700; font-size: .75rem; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; font-variation-settings: "wdth" 125; }
.to-styles legend { margin-bottom: 12px; }
.to-sws { display: flex; flex-wrap: nowrap; gap: 6px; }
.to-sw { position: relative; isolation: isolate; display: inline-flex; align-items: center; min-height: 52px; padding: 0 12px; cursor: pointer; }
.to-sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.to-sw-w { font-style: italic; font-weight: 900; font-size: clamp(20px, 2.15cqi, 31px); line-height: 1; text-transform: uppercase; font-variation-settings: "wdth" var(--sw); pointer-events: none; }
.to-sw-road { --sw: 62; } .to-sw-gravel { --sw: 118; } .to-sw-touring { --sw: 150; }
.to-sw::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--to-ink); clip-path: polygon(11px 0, 11px 0, 0 100%, 0 100%); transition: clip-path 160ms var(--to-ease); }
.to-sw::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: -9px; height: 4px; background: var(--to-violet); transform: scaleX(0); transform-origin: 0 50%; transition: transform 160ms var(--to-ease); }
.to-sw:has(:checked) { color: var(--to-volt); }
.to-sw:has(:checked)::before { clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%); }
.to-sw:has(:checked)::after { transform: none; }
.to-sw:has(:focus-visible) { outline: 3px solid var(--to-violet); outline-offset: 5px; }
@media (hover: hover) { .to-sw:hover:not(:has(:checked)) .to-sw-w { color: var(--to-violet); } }
.to-sw-desc { margin-top: 18px; font-size: .9375rem; line-height: 1.45; }
.to-rng { display: grid; gap: 4px; }
.to-rng-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.to-num { display: inline-flex; align-items: center; gap: 8px; }
.to-num input { width: 84px; height: 48px; padding: 0 10px; border: 2px solid var(--to-ink); border-radius: 0; background: var(--to-volt); color: var(--to-ink); font: inherit; font-style: italic; font-weight: 800; font-size: 1.375rem; line-height: 1; font-variant-numeric: tabular-nums; text-align: right; -moz-appearance: textfield; appearance: textfield; }
.to-num input::-webkit-inner-spin-button, .to-num input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.to-unit { font-weight: 700; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-variation-settings: "wdth" 125; }
.to-range { display: block; width: 100%; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.to-range::-webkit-slider-runnable-track { height: 2px; background: var(--to-ink); }
.to-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 34px; margin-top: -16px; border: 0; background: var(--to-violet); clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); }
.to-range::-moz-range-track { height: 2px; background: var(--to-ink); }
.to-range::-moz-range-thumb { width: 26px; height: 34px; border: 0; border-radius: 0; background: var(--to-violet); clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); }
.to-hint-t, .to-fh { font-size: .875rem; line-height: 1.45; font-variation-settings: "wdth" 92; }
.to-handles-t { font-size: .9375rem; line-height: 1.5; }
.to-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.to-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 2px solid var(--to-ink); font-weight: 600; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.to-reset { min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--to-ink); font: inherit; font-weight: 600; font-size: .875rem; text-decoration: underline 2px var(--to-violet); text-underline-offset: 6px; cursor: pointer; }
.to-notes { display: grid; gap: 10px; }
.to-notes:empty { display: none; }
.to-note { padding: 8px 0 8px 14px; border-left: 4px solid var(--to-violet); font-size: .9375rem; line-height: 1.45; }
.to-copyrow { display: grid; gap: 10px; justify-items: start; }
.to-status { min-height: 1.45em; font-size: .875rem; line-height: 1.45; font-weight: 600; }
.to-how summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; font-weight: 700; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; font-variation-settings: "wdth" 110; }
.to-how summary::-webkit-details-marker { display: none; }
.to-how summary::after { content: "↓" / ""; font-size: 1.2em; }
.to-how[open] summary::after { content: "↑" / ""; }
.to-how ol { display: grid; gap: 10px; margin-top: 8px; padding-left: 1.5em; font-size: .9375rem; line-height: 1.5; }
.to-how-end { margin-top: 12px; padding-top: 10px; border-top: 1px dotted var(--to-ink); font-weight: 600; font-size: .9375rem; }
.to-how li::marker, .to-steps .to-sn { font-weight: 700; font-size: .8125rem; font-variant-numeric: tabular-nums; }

/* desk: the frame stands on the cap line of NUMBERS. and holds still while the type pans past */
@media (min-width: 1000px) {
  .to-fit { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--to-cg);
    --to-colw: calc((100cqi - 2 * var(--to-g) - 11 * var(--to-cg)) / 12);
    --to-fh: calc((7 * var(--to-colw) + 6 * var(--to-cg)) / 1.5968); }
  .to-hero { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: subgrid; align-content: start;
    padding-top: max(18px, calc(16px + var(--to-fh) * .96774 - 2.3895 * var(--to-fs) - 38.4px)); padding-bottom: 96px; }
  .to-hk, .to-h1 { grid-column: 1 / -1; }
  .to-sub { grid-column: 1 / 6; margin-top: 22px; }
  .to-acts { grid-column: 6 / 11; align-self: start; margin-top: 30px; }
  .to-frame { grid-column: 6 / -1; grid-row: 1 / 3; align-self: start; position: sticky; top: calc(var(--to-bar) + var(--to-nav-h) + 16px); margin-top: 16px; }
  .to-bench { grid-column: 1 / 6; grid-row: 2; padding-bottom: calc(var(--to-pad) + 40px); }
  .to-bench-in { max-width: none; }
}
/* tablet and phone: the drawing is a band under the h1 that sticks while the bench scrolls */
@media (max-width: 999px) {
  .to-fit { display: flex; flex-direction: column; --to-fs: 12.5cqi; }
  .to-hero { display: contents; }
  .to-hk { order: 1; margin-top: 32px; margin-bottom: 20px; }
  .to-h1 { order: 2; }
  .to-l4 { --to-w: 134; }
  .to-bk { font-size: 7.6cqi; }
  .to-frame { order: 3; position: sticky; top: calc(var(--to-bar) + var(--to-nav-h)); margin-top: 18px; }
  .to-frame::before { content: ""; position: absolute; inset: -18px calc(-1 * var(--to-g)) 0; z-index: -1; background: var(--to-volt); }
  .to-frame.is-stuck::before { box-shadow: 0 2px 0 var(--to-ink); }
  .to-svg { clip-path: polygon(0 0, 400% 0, 400% 100%, 0 100%); }
  .to-svg .to-ground { display: inline; }
  .to-sub { order: 4; margin-top: 26px; }
  .to-acts { order: 5; margin-top: 22px; }
  .to-bench { order: 6; padding-top: 64px; padding-bottom: var(--to-pad); }
  /* a focused control scrolls out from under the stuck band (the phone block below keeps its own fallback) */
  .to-bench :is(input, button, summary, a) { scroll-margin-top: calc(var(--to-bar) + var(--to-nav-h) + var(--to-band-h, 60vw) + 12px); scroll-margin-bottom: 24px; }
  .to-bench { scroll-margin-top: calc(var(--to-bar) + var(--to-nav-h) + var(--to-band-h, 60vw) - 40px); }
}
@media (max-width: 699px) {
  .to-page { --to-nav-h: 52px; }
  .to-fit { --to-fs: 18.2cqi; }
  .to-l { --to-w: 100; }
  .to-l4 { --to-w: 88; }
  .to-svg { --to-u: 5.53; }
  .to-hk { margin-top: 10px; margin-bottom: 12px; }
  .to-frame { margin-top: 10px; }
  .to-frame::before { top: -10px; }
  .to-sub { margin-top: 12px; font-size: 1rem; line-height: 1.45; }
  .to-acts { margin-top: 12px; gap: 0 28px; }
  .to-read { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 8px; padding: 6px 0 8px; }
  .to-f dt { font-size: .65625rem; letter-spacing: .03em; font-variation-settings: "wdth" 88; }
  .to-v { font-size: 1.5rem; font-variation-settings: "wdth" calc(60 + (var(--w, 100) - 60) * .667); }
  .to-f .to-u { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .to-svg .to-ld, .to-svg [data-e="dwb"], .to-svg [data-e="dtrail"], .to-svg [data-e="daxis"], .to-svg [data-e="dext"] { display: none; }
  .to-hint { display: none; }
  .to-acts .to-btn { width: 100%; }
  .to-sws { gap: 4px; justify-content: space-between; }
  .to-sw { padding: 0 8px; }
  .to-copyrow, .to-copyrow .to-btn { width: 100%; }
  .to-bench :is(input, button, summary, a) { scroll-margin-top: calc(var(--to-bar) + var(--to-nav-h) + var(--to-band-h, 330px) + 12px); }
  .to-bench { scroll-margin-top: calc(var(--to-bar) + var(--to-nav-h) + var(--to-band-h, 330px) - 40px); }
}
@media (max-width: 699px) and (max-height: 600px) {
  .to-fit { --to-fs: 15cqi; }
  .to-l4 { --to-w: 106; }
  .to-hk { margin-top: 12px; margin-bottom: 10px; }
  .to-frame { margin-top: 10px; }
  .to-fs dt { font-size: .59375rem; }
  .to-fs .to-v { font-size: .875rem !important; min-width: 0 !important; }
  .to-svg, .to-hwrap { width: min(100%, 30svh * 1.5968); }
  .to-svg { margin-inline: auto; }
  .to-hwrap { left: 50%; transform: translateX(-50%); }
  .to-read { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 6px; padding: 6px 0 8px; }
  .to-f { display: flex; align-items: baseline; gap: 4px; }
  .to-f dt { letter-spacing: .02em; }
  .to-f .to-dl2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .to-v { font-size: 1.125rem; min-width: calc(var(--mw) * .72); font-variation-settings: "wdth" calc(60 + (var(--w, 100) - 60) * .5); }
  .to-fs { flex-basis: auto; }
  .to-frame.is-stuck .to-fs { display: none; }
}
@media (max-width: 699px) and (max-height: 460px) {
  .to-frame { position: relative; top: auto; }
}

/* ── the posters down the page ─────────────────────────────────────────────────────────────── */
.to-premise, .to-workshop, .to-weld, .to-fitting { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--to-cg); align-items: start; }
.to-poster { position: relative; z-index: 0; }
/* the volt sections an ink band pulls up over keep their content clear of its wedge */
.to-workshop, .to-fitting { padding-bottom: calc(var(--to-cut) + 56px); }
.to-premise > *, .to-workshop > *, .to-weld > *, .to-fitting > *, .to-tri > *, .to-enq > *, .to-ride-row > * { min-width: 0; }
.to-win { z-index: 1; }

.to-pp { grid-column: 1 / -1; grid-row: 1; font-size: clamp(3.25rem, 8.4cqi, 9.5rem); --to-w: 125; }
.to-pp .to-pl2 { margin-left: calc(-1 * var(--to-g) - .22em); }
.to-pp .to-pl3 { margin-left: .34em; }
.to-pic-climb { grid-column: 8 / -1; grid-row: 1 / 3; --h: clamp(420px, 40cqi, 620px); height: var(--h); --lean: calc(var(--h) * .2126); }
.to-premise .to-copy { grid-column: 1 / 6; grid-row: 2; margin-top: 56px; }

.to-frames-head { display: grid; gap: 14px; max-width: 42rem; }
.to-tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--to-cg); margin-top: 56px;
  --c3: calc((100cqi - 2 * var(--to-g) - 2 * var(--to-cg)) / 3);
  /* each column drops by the height over which a 12° line crosses the gap, so the risers join the rules */
  --to-step: calc(var(--to-cg) / .2126); }
.to-col { position: relative; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px; padding-top: 22px; border-top: 2px solid var(--to-ink); }
.to-col-gravel { margin-top: var(--to-step); }
.to-col-touring { margin-top: calc(2 * var(--to-step)); }
/* sized to its column: TOURING. at wdth 150 is 7.44em wide, so the three words share a size that fits it */
.to-sw-word { font-style: italic; font-weight: 900; font-size: min(clamp(2.25rem, 1.5rem + 3cqi, 4.5rem), calc(var(--c3) / 7.7)); line-height: .9; letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; font-variation-settings: "wdth" var(--sw); }
.to-w-road { --sw: 62; } .to-w-gravel { --sw: 118; } .to-w-touring { --sw: 150; }
.to-mini { display: block; width: 100%; height: auto; aspect-ratio: 1900 / 1100; overflow: visible; }
@media (hover: hover) { .to-col:hover .to-mini .to-hair { stroke-width: 2px; } }
/* the shared edges: 2px ink risers leaning 12°, from one column's rule down to the next */
@media (min-width: 1000px) {
  .to-col-gravel::before, .to-col-touring::before { content: ""; position: absolute; left: calc(-1 * var(--to-cg)); top: calc(-1 * var(--to-step)); width: var(--to-cg); height: calc(var(--to-step) + 2px); background: var(--to-ink); clip-path: polygon(0 0, 2px 0, 100% 100%, calc(100% - 2px) 100%); }
}
/* stacked below 1000px, so each style word sizes to the full measure */
@media (max-width: 999px) { .to-tri { --c3: calc(100cqi - 2 * var(--to-g)); } }
/* tablet: the three stack, each with its drawing and table side by side */
@media (min-width: 700px) and (max-width: 999px) {
  .to-tri { display: block; }
  .to-col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--to-cg); }
  .to-col > * { grid-column: 1 / -1; }
  .to-col > .to-mini { grid-column: 1; }
  .to-col > .to-tab { grid-column: 2; align-self: center; }
  .to-col, .to-col-gravel, .to-col-touring { margin-top: 56px; }
  .to-col:first-child { margin-top: 0; }
}
.to-tab { width: 100%; border-collapse: collapse; font-size: .875rem; line-height: 1.45; font-variation-settings: "wdth" 92; font-variant-numeric: tabular-nums; }
.to-tab caption { caption-side: top; padding-bottom: 8px; border-bottom: 2px solid var(--to-ink); text-align: left; }
.to-tab th, .to-tab td { padding: 5px 0; border-bottom: 1px dotted var(--to-ink); }
.to-tab th { text-align: left; font-weight: 400; }
.to-tab td { text-align: right; font-weight: 600; }
.to-col > p:not(.to-foryou) { font-size: 1rem; line-height: 1.55; }
.to-foryou { color: var(--to-violet); font-style: italic; font-weight: 800; font-size: 1.0625rem; line-height: 1.3; font-variant-numeric: tabular-nums; }

.to-pw, .to-pw2 { font-size: clamp(3.25rem, 11cqi, 11rem); --to-w: 125; }
.to-pw { grid-column: 7 / -1; grid-row: 1; }
.to-pw .to-pl2 { margin-left: .17em; }
.to-pic-jig { grid-column: 6 / -1; grid-row: 2; margin-top: 28px; margin-right: calc(-1 * var(--to-g)); --h: clamp(300px, 36cqi, 560px); height: var(--h); --lean: calc(var(--h) * .2126); }
.to-pw2 { grid-column: 7 / -1; grid-row: 3; margin-top: -.08em; }
.to-pw2 .to-pl3 { margin-left: .6em; }
.to-workshop .to-copy { grid-column: 1 / 6; grid-row: 1 / 4; }
.to-steps { display: grid; gap: 20px; margin-top: 32px !important; list-style: none; }
.to-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; line-height: 1.5; }
.to-steps .to-sn { grid-row: span 2; padding-top: .3em; }
.to-st { display: block; font-style: italic; font-weight: 800; font-size: 1.25rem; line-height: 1.25; font-variation-settings: "wdth" 110; }
.to-aside { font-size: .9375rem; font-style: normal; padding-top: 14px; border-top: 2px solid var(--to-ink); }

.to-pk { grid-column: 1 / -1; grid-row: 1; margin-left: calc(-1 * var(--to-g) - .2em); font-size: clamp(3.25rem, 11cqi, 11rem); --to-w: 125; }
.to-pk .to-pl2 { margin-left: .17em; }
/* mirrored: the photograph bleeds off the left under the poster, its right edge leaning; the copy takes the right */
.to-pic-weld { grid-column: 1 / 7; grid-row: 2; margin-top: 56px; margin-left: calc(-1 * var(--to-g)); --lean: 17.72%; }
.to-pic-weld picture { height: auto; aspect-ratio: 6 / 5; }
.to-weld .to-copy { grid-column: 8 / -1; grid-row: 2; margin-top: 56px; }
.to-weldkey { display: grid; gap: 10px; margin-top: 30px !important; list-style: none; }
.to-weldkey li { display: grid; grid-template-columns: 56px 6.5em minmax(0, 1fr); align-items: center; column-gap: 14px; font-size: .9375rem; }
.to-weldkey b { font-weight: 600; }
.to-wk { display: block; height: 14px; }
.to-wk-1 { background: #C9CDD2; } .to-wk-2 { background: #D8C79A; } .to-wk-3 { background: #5C7FA8; } .to-wk-4 { background: #6E7378; }

.to-rawbox { position: relative; display: flex; justify-content: center; margin-inline: calc(-1 * var(--to-g)); padding-block: 7cqi; --c3: calc((100cqi - 2 * var(--to-g) - 2 * var(--to-cg)) / 3); --th: calc(25.5cqi * .8 + 14cqi); }
.to-praw { font-size: 25.5cqi; line-height: .8; font-weight: 900; --to-w: 150; }
.to-swatches { position: absolute; inset: 0; }
.to-tube { position: absolute; top: 0; height: var(--th); --lean: calc(var(--th) * .2126); width: calc(var(--lean) + clamp(44px, 6cqi, 96px)); left: calc(var(--to-g) + var(--n) * (var(--c3) + var(--to-cg)) + var(--c3) * .16); clip-path: polygon(var(--lean) 0, 100% 0, calc(100% - var(--lean)) 100%, 0 100%); }
.to-tube-1 { --n: 0; background: repeating-linear-gradient(102deg, #A3A9AF 0 1px, #8E959C 1px 3px, #7E858C 3px 4px); }
.to-tube-2 { --n: 1; background: var(--to-ti); }
.to-tube-3 { --n: 2; background: linear-gradient(180deg, var(--to-violet), #4B3BE8); }
.to-grain { display: block; width: 100%; height: 100%; }
.to-caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--to-cg); margin-top: 28px; list-style: none; font-size: .9375rem; line-height: 1.5; --c3: calc((100cqi - 2 * var(--to-g) - 2 * var(--to-cg)) / 3); }
.to-caps li { padding-left: calc(var(--c3) * .16); max-width: calc(var(--c3) * .16 + 18rem); }
.to-caps b { display: block; font-style: italic; font-weight: 800; font-size: 1.125rem; font-variation-settings: "wdth" 110; }
.to-finish .to-copy { margin-top: 64px; }

.to-band { position: relative; margin-right: calc(-1 * var(--to-g)); --bh: max(360px, 48cqi); }   /* uncapped, so photo, band and type keep one proportion at every width */
.to-pic-ride picture { height: var(--bh); --lean: calc(var(--bh) * .2126); clip-path: polygon(var(--lean) 0, 100% 0, 100% 100%, 0 100%); }
.to-pic-ride img { object-position: 40% 55%; }
/* the baseline sits a fifth of the way down the band, in the sky above the rider's helmet */
.to-pride { position: absolute; left: 0; top: calc(var(--bh) * .2 - .6775 * 25cqi); z-index: 2; font-size: 25cqi; line-height: .8; font-weight: 900; --to-w: 150; color: var(--to-ink); }
.to-ride-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--to-cg); align-items: start; }
.to-ride .to-copy { grid-column: 1 / 6; margin-top: 56px; }
.to-pic-tour { grid-column: 9 / -1; margin-top: -80px; z-index: 2; }
.to-pic-tour picture { aspect-ratio: 1; --lean: 21.26%; }

.to-pf { grid-column: 1 / -1; grid-row: 1; margin-left: calc(-1 * var(--to-g) - .3em); font-size: clamp(3.25rem, 8.5cqi, 9.5rem); --to-w: 110; }
.to-pf .to-pl2 { margin-left: .17em; } .to-pf .to-pl3 { margin-left: .34em; }
.to-pic-fit { grid-column: 6 / -1; grid-row: 1 / 3; margin-top: 10cqi; --h: clamp(300px, 37.5cqi, 580px); height: var(--h); --lean: calc(var(--h) * .2126); }
.to-fitting .to-copy { grid-column: 1 / 6; grid-row: 2; margin-top: 56px; }

.to-pe { font-size: clamp(3.25rem, 12cqi, 12rem); --to-w: 125; }
.to-pe .to-pl2 { margin-left: 1.72em; }
.to-enq h2 { scroll-margin-top: calc(var(--to-bar) + var(--to-nav-h) + 28px); }
.to-enq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--to-cg); margin-top: 56px; }
.to-enq-main { grid-column: 1 / 8; }
.to-enq .to-lede { margin-top: 18px; color: var(--to-ti); }
.to-sum { grid-column: 9 / -1; align-self: start; position: sticky; top: calc(var(--to-bar) + var(--to-nav-h) + 24px); padding-top: 18px; border-top: 2px solid var(--to-volt); }
.to-sum-empty { margin-top: 12px; color: var(--to-volt); font-style: italic; font-weight: 800; font-size: 1.375rem; line-height: 1.2; font-variation-settings: "wdth" 110; }
.to-sum-dl { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 8px 16px; margin-top: 14px; }
.to-sum-dl dt { font-weight: 700; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-variation-settings: "wdth" 125; }
.to-sum-dl dd { color: var(--to-volt); font-style: italic; font-weight: 800; font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.to-form { display: grid; gap: 22px; margin-top: 34px; }
.to-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.to-fld { display: grid; gap: 8px; align-content: start; }
.to-enq label, .to-enq legend { color: var(--to-volt); }
.to-enq input[type="text"], .to-enq input[type="number"], .to-enq textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 2px solid var(--to-ti); border-radius: 0; background: var(--to-ink); color: var(--to-volt); font: inherit; font-size: 1.0625rem; line-height: 1.45; -moz-appearance: textfield; appearance: none; }
.to-enq textarea { resize: vertical; }
.to-enq ::placeholder { color: var(--to-ti); opacity: 1; }
.to-enq input:focus-visible, .to-enq textarea:focus-visible { border-color: var(--to-volt); outline-offset: 2px; }
.to-radios { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.to-radios legend { width: 100%; margin-bottom: 8px; }
.to-radios label { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 1rem; cursor: pointer; }
/* pick-one marks: small plates leaning 12°, like the bench's style plates; the real input sits over the mark */
.to-radios input { position: absolute; left: 0; top: 50%; width: 26px; height: 20px; margin: -10px 0 0; opacity: 0; cursor: pointer; }
.to-rb { position: relative; flex: none; width: 26px; height: 20px; }
.to-rb::before, .to-rb::after { content: ""; position: absolute; clip-path: polygon(4.25px 0, 100% 0, calc(100% - 4.25px) 100%, 0 100%); }
.to-rb::before { inset: 0; background: var(--to-ti); }
.to-rb::after { inset: 2px 2.5px; background: var(--to-ink); clip-path: polygon(3.4px 0, 100% 0, calc(100% - 3.4px) 100%, 0 100%); }
.to-radios input:checked + .to-rb::before, .to-radios input:checked + .to-rb::after { background: var(--to-volt); }
.to-radios input:focus-visible + .to-rb { outline: 3px solid var(--to-volt); outline-offset: 3px; }
@media (hover: hover) { .to-radios label:hover input:not(:checked) + .to-rb::before { background: var(--to-volt); } }
.to-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 6px; }
.to-ink .to-status { color: var(--to-volt); }
.to-ink .to-fh { color: var(--to-ti); }

.to-foot { position: relative; overflow-x: clip; padding-bottom: 56px; }
.to-footword { position: relative; display: flex; justify-content: center; padding-block: 12px; }
.to-pt { font-size: 14.6cqi; line-height: .8; font-weight: 900; --to-w: 150; }
.to-footlines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.to-flh { fill: none; stroke: var(--to-ink); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.to-foot-cap { margin-top: 6px; padding-inline: var(--to-g); font-size: .875rem; line-height: 1.45; font-variation-settings: "wdth" 92; text-align: center; }
.to-foot-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--to-cg); row-gap: 18px; margin-top: 36px; padding-inline: var(--to-g); }
.to-foot-l { grid-column: 1 / 6; font-weight: 500; }
.to-foot-in nav { grid-column: 6 / -1; justify-self: end; }
.to-foot-nav { display: flex; flex-wrap: wrap; gap: 4px 26px; list-style: none; }
.to-colophon { grid-column: 1 / 8; font-size: .875rem; line-height: 1.45; font-variation-settings: "wdth" 92; }

/* ── motion: the width axis is the motion ─────────────────────────────────────────────────── */
@keyframes to-open { from { font-variation-settings: "wdth" 50; } }
@keyframes to-tack { from { stroke-dashoffset: 1.05; } to { stroke-dashoffset: 0; } }
@keyframes to-wipe-l { from { clip-path: polygon(var(--lean) 0, calc(var(--lean) + 2%) 0, 2% 100%, 0 100%); } }
@keyframes to-wipe-r { from { clip-path: polygon(0 0, calc(var(--lean) + 2%) 0, 2% 100%, 0 100%); } }
@media (prefers-reduced-motion: no-preference) {
  .to-live.to-intro .to-l { animation: to-open 520ms var(--to-ease) both; animation-delay: calc(var(--n) * 70ms); }
  .to-live.to-intro .to-tack { stroke-dasharray: 1 1.2; animation: to-tack 360ms var(--to-ease) both; animation-delay: calc(200ms + var(--i) * 80ms); }
  .to-live.to-intro .to-sp { stroke-dasharray: 1 1.2; animation: to-tack 600ms var(--to-ease) both; animation-delay: 780ms; }
  @supports (animation-timeline: view()) {
    .to-live .to-sec .to-pl, .to-live .to-sw-word, .to-live .to-pt .to-pl { animation: to-open linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
    .to-live :is(.to-win-l, .to-win-b, .to-win-sq, .to-pic-ride) picture { animation: to-wipe-l linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .to-live .to-win-r picture { animation: to-wipe-r linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .to-page *, .to-page *::before, .to-page *::after { animation: none !important; transition-duration: 0s !important; }
}

/* ── tablet ──────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 999px) {
  .to-workshop .to-copy, .to-weld .to-copy, .to-fitting .to-copy, .to-premise .to-copy { grid-column: 1 / -1; grid-row: auto; margin-top: 48px; }
  /* columns 7-12 so the photo's leaning foot lands clear of the copy's columns 1-6 */
  .to-pic-climb { grid-column: 7 / -1; grid-row: 1 / 3; margin-top: 18cqi; }
  .to-premise .to-copy { grid-column: 1 / 7; grid-row: 2; }
  .to-pw { grid-column: 4 / -1; }
  .to-pic-jig { grid-column: 3 / -1; }
  .to-pw2 { grid-column: 4 / -1; }
  .to-workshop .to-copy { grid-row: 4; }
  .to-pic-weld { grid-column: 1 / 9; grid-row: 2; margin-top: 36px; }
  .to-weld .to-copy { grid-row: 3; }
  .to-pic-fit { grid-column: 3 / -1; grid-row: 2; margin-top: 28px; }
  .to-fitting .to-copy { grid-row: 3; }
  .to-enq-main { grid-column: 1 / -1; }
  .to-sum { grid-column: 1 / -1; grid-row: 1; position: static; margin-bottom: 36px; }
  .to-ride .to-copy { grid-column: 1 / 8; }
  .to-pic-tour { grid-column: 8 / -1; margin-top: -48px; }
  .to-colophon, .to-foot-l { grid-column: 1 / -1; }
  .to-foot-in nav { grid-column: 1 / -1; justify-self: start; }
}

/* ── phone ───────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 699px) {
  .to-nav { gap: 12px; }
  .to-mark { font-size: 1.125rem; }
  .to-live .to-menu { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--to-ink); font: inherit; font-weight: 600; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; font-variation-settings: "wdth" 110; cursor: pointer; }
  .to-menu-g { position: relative; width: 18px; height: 12px; }
  .to-menu-g::before, .to-menu-g::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--to-ink); clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); }
  .to-menu-g::before { top: 1px; } .to-menu-g::after { bottom: 1px; left: 3px; }
  .to-nav { flex-wrap: wrap; }
  .to-navwrap { flex-basis: 100%; }
  .to-navlist { flex-wrap: wrap; gap: 0 18px; padding-bottom: 8px; }
  .to-live .to-navwrap { display: none; }
  .to-live .to-nav.is-open .to-navwrap { display: block; }
  .to-live .to-nav.is-open .to-navlist { flex-direction: column; align-items: flex-start; gap: 0; padding-bottom: 14px; }
  .to-live .to-nav.is-open .to-navlist a { padding-block: 13px; font-size: 1rem; }
  .to-premise, .to-workshop, .to-weld, .to-fitting, .to-ride-row, .to-enq, .to-foot-in { display: block; }
  .to-pp, .to-pw, .to-pw2, .to-pk, .to-pf { font-size: 13cqi; }
  .to-pe { font-size: 13.5cqi; }
  .to-pe .to-pl2 { margin-left: .42em; }
  .to-pw { margin-left: 18cqi; }
  .to-pw2 { margin-left: 30cqi; margin-top: 18px; }
  .to-pw2 .to-pl3 { margin-left: 0; }
  .to-pic-climb, .to-pic-jig, .to-pic-fit, .to-pic-weld { height: auto; margin: 28px 0 0; }
  .to-pic-climb picture { aspect-ratio: 4 / 5; --lean: 26.6%; }
  .to-pic-climb img { object-position: 50% 35%; }
  .to-pic-jig { margin-right: calc(-1 * var(--to-g)); }
  .to-pic-jig picture, .to-pic-fit picture { aspect-ratio: 4 / 3; --lean: 15.9%; }
  .to-pic-jig img { object-position: 30% 50%; }
  .to-pic-fit img { object-position: 35% 50%; }
  .to-pic-weld { margin-left: calc(-1 * var(--to-g)); --lean: 21.26%; }
  .to-pic-weld picture { aspect-ratio: 1; }
  .to-premise .to-copy, .to-workshop .to-copy, .to-weld .to-copy, .to-fitting .to-copy { margin-top: 36px; }
  .to-tri { display: block; margin-top: 36px; }
  .to-col, .to-col-gravel, .to-col-touring { margin-top: 44px; }
  .to-col:first-child { margin-top: 0; }
  .to-weldkey li { grid-template-columns: 40px 5.6em minmax(0, 1fr); column-gap: 10px; font-size: .875rem; }
  .to-rawbox { padding-block: 10cqi; --th: calc(25.5cqi * .8 + 20cqi); }
  .to-caps { display: grid; grid-template-columns: 1fr; row-gap: 14px; }
  .to-caps li { padding-left: 0; max-width: none; }
  .to-band { --bh: 520px; margin-left: calc(-1 * var(--to-g)); }
  .to-pic-ride picture { --lean: 0px; }
  .to-pic-ride img { object-position: 50% 50%; }
  .to-pic-ride figcaption { padding-inline: var(--to-g); }
  .to-pride { font-size: 26cqi; left: var(--to-g); top: 34px; }
  .to-pic-tour { width: 70%; margin: 36px 0 0 auto; }
  .to-pair { grid-template-columns: 1fr; }
  .to-sum { margin-bottom: 28px; }
  .to-send .to-btn { width: 100%; }
  .to-foot-nav { margin-top: 18px; }
  .to-colophon { margin-top: 18px; }
}