:root{--bg:#f1f2f4;--bg2:#e4e6ea;--ink:#111318;--mute:#4b505c;--line:#c9cdd4;--field:#cf1f2e;--onf:#ffffff;--onfm:#fff0f1;--acc:#111318;--ona:#ffffff;--btn:#cf1f2e;--onbtn:#ffffff;--bib:#ffffff;--onbib:#111318;--bibm:#4b505c;--c1:#cf1f2e;--c2:#1f4fe0;--c3:#0f8a5f;--c4:#d79a00;--hot:#cf1f2e;--onhot:#ffffff}
/* Look M "Sprint": fitness and sport. The first second of a sprint: everything leans forward by one angle (9°, --k is
   its tangent) on every vertical edge: italic headlines, parallelogram buttons and tags, photo frames, the hero seam.
   Three speed stripes are the mark. The timetable is a week board, memberships are race bibs, key figures a results
   line, opening hours running lanes. Classes start with mx- (m- belongs to the motion library).
   The faces are self-hosted from Fontsource 5.3.0 (OFL, licences in public/fonts): Kanit ExtraBold italic and Teko
   (variable) are M's headline faces from font shortlist batch 2; Chivo (variable) is the text face. The engine font in
   design.ts only feeds favicons and share images. */
@font-face{font-family:"Chivo M";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/chivo-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Chivo M";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/chivo-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Kanit M";font-style:italic;font-weight:800;font-display:swap;src:url(fonts/kanit-latin-ext-800-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Kanit M";font-style:italic;font-weight:800;font-display:swap;src:url(fonts/kanit-latin-800-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Teko M";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/teko-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Teko M";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/teko-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* the stripes' colour on the page (on a colour field they use --acc); a palette or dark.fix may re-point it */
:root{--mk:var(--field);--k:.1584;--gut:clamp(20px,4vw,56px);--m-accent:var(--mk);
  --g-max:1432px;--g-pad:var(--gut);--g-bg:var(--bg);--g-paper:var(--bg);--g-surface:var(--bg2);--g-ink:var(--ink);--g-muted:var(--mute);--g-line:var(--line);--g-accent:var(--mk);--g-radius:0px;--g-fd:var(--fd);--g-ft:var(--ft);--g-top:76px}
/* headline voice per pairing: family, style, weight, tracking, and the average glyph width the fitted headlines use */
body{--ft:"Chivo M",system-ui,sans-serif;--hf:"Kanit M",system-ui,sans-serif;--hs:italic;--hw:800;--ht:-.01em;--cw:.56;--g-ft:var(--ft);--g-fd:var(--hf)}
body.mx-f-poster{--hf:"Teko M","Arial Narrow",sans-serif;--hs:normal;--hw:600;--ht:0em;--cw:.42}
/* Teko is tall and narrow, so its small settings (logo, labels, bands, day names) go up about a sixth */
body.mx-f-poster .mx-logo{font-size:calc(27px*var(--tune-size,1))}body.mx-f-poster .mx-fit h1{font-size:clamp(44px,calc(100cqi / (var(--len) * var(--cw))),calc(var(--h1max,96px) * 1.2))}
body.mx-f-poster h3,body.mx-f-poster .mx-vs-grid h3,body.mx-f-poster .mx-ct-week h3{font-size:calc(23px*var(--tune-size,1))}
body.mx-f-poster .mx-board h3{font-size:calc(22px*var(--tune-size,1))}body.mx-f-poster .mx-dt-body h3{font-size:calc(20px*var(--tune-size,1))}
body.mx-f-poster .mx-plate b{font-size:calc(25px*var(--tune-size,1))}body.mx-f-poster .mx-tl-day{font-size:calc(22px*var(--tune-size,1))}
body.mx-f-poster .mx-bib-band{font-size:calc(23px*var(--tune-size,1))}body.mx-f-poster .mx-cur{font-size:calc(36px*var(--tune-size,1))}
body.mx-f-poster .mx-quotes blockquote p{font-weight:500;font-size:calc(25px*var(--tune-size,1));line-height:1.25;letter-spacing:0}
body.mx-f-poster .wk-n{font-size:calc(21px*var(--tune-size,1))}body.mx-f-poster .mx-ini span{font-size:calc(36px*var(--tune-size,1))}
body.mx-f-poster .mx-rs-who h2{font-size:calc(30px*var(--tune-size,1))}body.mx-f-poster .mx-rs-leads h3{font-size:calc(15px*var(--tune-size,1))}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0}
html{scroll-padding-top:96px}
body{background:var(--bg);color:var(--ink);font:400 calc(17px*var(--tune-size,1))/1.6 var(--ft);-webkit-font-smoothing:antialiased}
a{color:inherit}img{display:block;max-width:100%}
.wrap{max-width:1432px;margin:0 auto;padding:0 var(--gut)}
h1,h2,h3{font-family:var(--hf);font-style:var(--hs);font-weight:var(--hw);letter-spacing:var(--ht);line-height:1;text-wrap:balance;font-variant-numeric:lining-nums}
h1,h2,h3,p,li,dd,dt,b,summary,figcaption,blockquote,.btn{overflow-wrap:anywhere;hyphens:auto}
h1{font-size:calc(clamp(44px,6vw,88px)*var(--tune-size,1));line-height:.94}
h2{font-size:calc(clamp(34px,4.2vw,60px)*var(--tune-size,1))}
h3{font-size:calc(20px*var(--tune-size,1));line-height:1.15}
.mx-lede{font-size:calc(clamp(18px,1.5vw,21px)*var(--tune-size,1));line-height:1.45;max-width:34ch;text-wrap:pretty}
:where(main) p{text-wrap:pretty}
/* a headline sized to fill its column: --len = its longest line in characters */
.mx-fit{container-type:inline-size}
.mx-fit h1{font-size:clamp(40px,calc(100cqi / (var(--len) * var(--cw))),var(--h1max,96px))}
.mx-sec{padding:calc(clamp(72px,9vw,128px)*var(--tune-space,1)) 0 0}
.mx-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end;margin-bottom:calc(clamp(32px,4vw,52px)*var(--tune-space,1))}
.mx-head h2{grid-column:1/8}.mx-head p{grid-column:8/13;color:var(--mute);font-size:calc(17px*var(--tune-size,1));max-width:44ch}
/* the lean: a frame of known height (--h) cut as a parallelogram; half the offset hangs out on each side, so the
   frame's centre line sits on the column edge and two frames side by side keep one even gap */
.mx-lean{--o:calc(var(--h) * var(--k));height:var(--h);clip-path:polygon(var(--o) 0,100% 0,calc(100% - var(--o)) 100%,0 100%);margin-inline:calc(var(--o) / -2)}
.mx-pic{overflow:hidden;background:var(--bg2)}.mx-pic img{width:100%;height:100%;object-fit:cover}
.mx-mark{display:inline-flex;gap:.16em;align-items:stretch}.mx-mark i{width:.2em;background:var(--mk);transform:skewX(-9deg)}
.mx-stripes{display:flex;gap:10px;pointer-events:none}.mx-stripes i{display:block;width:10px;height:100%;background:var(--acc);transform:skewX(-9deg);transform-origin:50% 100%}

/* ---------- buttons, tags, links ---------- */
/* the fill leans on ::before, so the text stays upright and the focus ring is never clipped */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 30px;font:700 calc(16px*var(--tune-size,1))/1.2 var(--ft);color:var(--onbtn);text-decoration:none;text-align:center;border:0;background:none;cursor:pointer}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--btn);transform:skewX(-9deg)}
.btn:hover::before{filter:brightness(.88)}
.btn.mx-onfield{color:var(--ona)}.btn.mx-onfield::before{background:var(--acc)}
.btn.mx-ghost{color:var(--ink)}.btn.mx-ghost::before{background:none;box-shadow:inset 0 0 0 2px currentColor}
.btn.mx-ghost:hover::before{filter:none;background:color-mix(in srgb,currentColor 10%,transparent)}
.btn.mx-ghost.mx-light{color:var(--onf)}
.btn:focus-visible,a:focus-visible,summary:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--mk);outline-offset:6px}
.mx-cta{display:flex;flex-wrap:wrap;gap:16px 22px;margin-top:34px}
.mx-tag{display:flex;margin-bottom:22px}.mx-tag span{position:relative;isolation:isolate;padding:6px 16px;font:700 calc(14px*var(--tune-size,1))/1.3 var(--ft);color:var(--ona)}
.mx-tag span::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--acc);transform:skewX(-9deg)}
.mx-arrow{display:inline-flex;align-items:center;gap:.6em;min-height:48px;font-weight:700;text-decoration:none}
.mx-arrow::after,.mx-go::after{content:"";width:1.15em;height:1.15em;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10h12.5M10.5 4.5 16 10l-5.5 5.5' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10h12.5M10.5 4.5 16 10l-5.5 5.5' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- nav ---------- */
.mx-nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.mx-nav .wrap{display:flex;align-items:center;gap:36px;min-height:76px}
.mx-logo{display:flex;align-items:center;gap:12px;font:var(--hs) var(--hw) calc(23px*var(--tune-size,1))/1 var(--hf);letter-spacing:var(--ht);text-decoration:none;margin-right:auto}
.mx-logo .mx-mark{height:22px;font-size:calc(22px*var(--tune-size,1))}
.mx-links{display:flex;gap:30px;list-style:none;padding:0;font-size:calc(15px*var(--tune-size,1));font-weight:600}
.mx-links a{position:relative;display:block;text-decoration:none;color:var(--mute);padding:8px 0}
.mx-links a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:3px;background:var(--mk);transform:skewX(-9deg) scaleX(0);transform-origin:0 50%}
.mx-links a:hover,.mx-links a[aria-current]{color:var(--ink)}.mx-links a:hover::after,.mx-links a[aria-current]::after{transform:skewX(-9deg)}
.mx-nav .btn{min-height:46px;padding:0 22px;font-size:calc(15px*var(--tune-size,1))}

/* ---------- hero: sprint (colour field, leaning seam, photo) ---------- */
/* the whole first screen: the field on the left with the headline low on it, the photo cut by the leaning seam on the
   right; the headline wraps and is sized by its longest word (--lw) and its whole length (--tl), about three lines */
.mx-sprint{--hh:clamp(620px,calc(100svh - 76px),880px);--seam:45cqw;position:relative;container-type:inline-size;height:var(--hh);background:var(--field);color:var(--onf);overflow:hidden;display:grid;align-items:end}
.mx-sp-grid{position:relative;z-index:1;width:100%}
.mx-sp-text{width:calc(var(--seam) - max(0px,(100cqw - 1432px) / 2) - var(--gut) - 56px);padding-bottom:calc(clamp(48px,8svh,88px)*var(--tune-space,1));--h1max:132px}
.mx-sprint .mx-fit h1{font-size:clamp(48px,min(100cqi / (var(--lw) * var(--cw)),340cqi / (var(--tl) * var(--cw))),var(--h1max));line-height:.9}
.mx-sp-text .mx-lede{color:var(--onfm);margin-top:26px}
.mx-sp-text .mx-cta{margin-top:30px}
.mx-sp-pic{position:absolute;top:0;bottom:0;left:var(--seam);right:0;clip-path:polygon(calc(var(--hh) * var(--k)) 0,100% 0,100% 100%,0 100%)}
.mx-sp-str{position:absolute;top:0;bottom:0;left:calc(var(--seam) - 58px)}
.mx-cta .mx-arrow{min-height:54px;padding:0 6px}
.mx-sprint .mx-arrow,.mx-stadium .mx-arrow{color:var(--onf)}
@media (max-width:960px){
  /* phones and tablets: the photo first, its lower edge cut on the lean, then the field with the words */
  .mx-sprint{height:auto;display:flex;flex-direction:column;align-items:stretch}
  .mx-sp-pic{position:relative;left:auto;right:auto;height:clamp(300px,46svh,460px);clip-path:polygon(0 0,100% 0,100% calc(100% - 9vw * var(--k) * 3),0 100%)}
  .mx-sp-text{width:100%;max-width:640px;padding:22px 0 calc(44px*var(--tune-space,1));--h1max:76px}
  .mx-sprint .mx-fit h1{font-size:clamp(40px,100cqi / (var(--lw) * var(--cw) + .6),var(--h1max))}
  .mx-sp-str{display:none}
}
/* ---------- hero: stadium (the photo as a wide stand, the headline on the track below it) ---------- */
/* the first screen: a full-width photo whose lower edge rises to the left on the lean (no veil, nothing printed on it),
   then the headline in ink on the page, and the lede, button and link on a leaning start block of the field colour
   that straddles the photo's edge on the right */
.mx-stadium{--cut:clamp(28px,6vw,92px);position:relative;min-height:clamp(620px,calc(100svh - 76px),900px);display:flex;flex-direction:column;color:var(--ink);background:var(--bg)}
.mx-st-pic{position:relative;flex:1 1 auto;min-height:clamp(260px,40svh,420px);background:none;clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - var(--cut)))}
.mx-st-pic img{position:absolute;inset:0}
.mx-st-body{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:24px 56px;align-items:end;padding-top:clamp(18px,2.4svh,30px);padding-bottom:clamp(12px,1.6svh,20px);--h1max:128px}
.mx-st-head h1{line-height:.86}
.mx-st-side{position:relative;isolation:isolate;align-self:start;margin-top:calc(var(--cut) * -1.7);padding:28px 34px 22px;color:var(--onf)}
.mx-st-side::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--field);transform:skewX(-9deg)}
.mx-st-side .mx-lede{color:var(--onfm);font-size:calc(18px*var(--tune-size,1))}
.mx-st-side .mx-cta{margin-top:20px;gap:8px 18px}
.mx-stadium .mx-tag span{color:var(--onhot)}.mx-stadium .mx-tag span::before{background:var(--hot)}
.mx-st-dock{position:relative;background:var(--field);color:var(--onf)}
@media (max-width:860px){
  .mx-stadium{min-height:0}
  .mx-st-pic{flex:none;height:clamp(300px,50svh,480px)}
  .mx-st-body{grid-template-columns:minmax(0,1fr);padding-top:14px}
  .mx-st-side{margin:8px 6px 0;max-width:560px}
}
/* ---------- hero: lanes (centred headline over three leaning photo lanes) ---------- */
.mx-lanes-hero{padding-top:calc(clamp(56px,7vw,96px)*var(--tune-space,1));text-align:center;overflow:hidden}
.mx-lh-text{max-width:960px;margin:0 auto;--h1max:104px}
.mx-lh-text .mx-tag,.mx-lh-text .mx-cta{justify-content:center}.mx-lh-text .mx-lede{margin:22px auto 0;color:var(--mute)}
.mx-lh-text h1{margin-top:0}
.mx-lh-pics{position:relative;display:grid;grid-template-columns:1fr 1.14fr 1fr;gap:clamp(14px,2vw,28px);align-items:end;max-width:1160px;margin:calc(clamp(44px,5vw,64px)*var(--tune-space,1)) auto 0;padding:0 clamp(12px,3vw,40px)}
.mx-lh-side{--h:clamp(200px,28vw,380px)}.mx-lh-mid{--h:clamp(240px,34vw,460px)}
.mx-lh-pics::after{content:"";position:absolute;left:calc(var(--gut) * -1 - 100vw);right:calc(var(--gut) * -1 - 100vw);bottom:0;height:4px;background:var(--mk)}
.mx-lanes-hero .mx-lede{max-width:40ch;text-wrap:balance}
/* ---------- results line ---------- */
.mx-score-band{padding:calc(clamp(36px,4vw,52px)*var(--tune-space,1)) 0;background:var(--field);color:var(--onf);border-top:1px solid color-mix(in srgb,var(--onf) 18%,transparent)}
.mx-score-band .mx-score span{color:var(--onfm)}.mx-score-band .mx-score li+li::before{background:color-mix(in srgb,var(--onf) 35%,transparent)}
.mx-score{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));list-style:none;padding:0}
.mx-score li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:4px 16px}
.mx-score li+li::before{content:"";position:absolute;left:0;top:6%;bottom:6%;width:2px;background:var(--line);transform:skewX(-9deg)}
.mx-score b{font:var(--hs) var(--hw) calc(clamp(46px,5vw,72px)*var(--tune-size,1))/1 var(--hf);letter-spacing:var(--ht);font-variant-numeric:tabular-nums lining-nums}
.mx-score span{font-size:calc(15px*var(--tune-size,1));color:var(--mute);line-height:1.35;max-width:22ch}
.mx-score-dock{padding:22px 0}.mx-score-dock b{font-size:calc(clamp(36px,3.4vw,52px)*var(--tune-size,1))}.mx-score-dock span{color:var(--onfm)}
.mx-score-dock li+li::before{background:color-mix(in srgb,var(--onf) 35%,transparent)}
@media (max-width:640px){.mx-score{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}.mx-score li:nth-child(odd)::before{display:none}}

/* ---------- classes: lanes ---------- */
.mx-lanes{list-style:none;padding:0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.mx-lanes li+li{border-top:2px solid var(--line)}
.mx-lanes a{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,1.5fr) minmax(0,2fr) 28px;gap:28px;align-items:center;min-height:104px;padding:20px 0;text-decoration:none}
.mx-lanes a::before{content:"";position:absolute;inset:0 -24px;z-index:-1;background:var(--bg2);transform:skewX(-9deg) scaleX(0);transform-origin:0 50%}
.mx-ln-name{font:var(--hs) var(--hw) calc(clamp(26px,2.5vw,36px)*var(--tune-size,1))/1.05 var(--hf);letter-spacing:var(--ht)}
.mx-ln-short{color:var(--mute);line-height:1.45}
.mx-ln-dur{font-weight:600;font-variant-numeric:tabular-nums;color:var(--mute)}
.mx-ln-price{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.mx-go{display:flex;justify-content:flex-end}
@media (hover:hover){.mx-lanes a:hover::before{transform:skewX(-9deg)}.mx-lanes a:hover .mx-go::after{transform:translateX(4px)}}
@media (max-width:860px){
  .mx-lanes a{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name price" "short short" "dur go";gap:10px 20px;padding:22px 0}
  .mx-ln-name{grid-area:name}.mx-ln-short{grid-area:short}.mx-ln-dur{grid-area:dur}.mx-ln-price{grid-area:price}.mx-go{grid-area:go}
}
/* ---------- classes: posters ---------- */
.mx-posters{--h:clamp(380px,32vw,460px);display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(14px,1.6vw,22px);list-style:none;padding:0 calc(var(--h) * var(--k) / 2)}
.mx-posters li{position:relative}.mx-posters li:focus-within{outline:3px solid var(--mk);outline-offset:6px}
.mx-posters a{display:block;position:relative;text-decoration:none;color:var(--onf)}.mx-posters a:focus-visible{outline:none}
.mx-ps-pic img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
/* the name plate shares the frame's leaning edges: it starts on the left edge and stops on the right one */
.mx-plate{--ph:86px;--po:calc(var(--ph) * var(--k));position:absolute;left:calc(var(--h) * var(--k) / -2);bottom:0;width:calc(100% + var(--po));height:var(--ph);
  display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 20px 0 calc(var(--po) + 16px);background:var(--field);clip-path:polygon(var(--po) 0,100% 0,calc(100% - var(--po)) 100%,0 100%)}
.mx-plate b{font:var(--hs) var(--hw) calc(22px*var(--tune-size,1))/1.05 var(--hf);letter-spacing:var(--ht)}
.mx-ps-meta{display:flex;gap:16px;font-size:calc(14px*var(--tune-size,1));font-weight:600;color:var(--onfm);font-variant-numeric:tabular-nums}
@media (max-width:1100px){
  .mx-posters{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(300px,72vw);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;margin-inline:calc(var(--gut) * -1);padding-inline:calc(var(--gut) + var(--h) * var(--k) / 2);scroll-padding-inline:calc(var(--gut) + var(--h) * var(--k) / 2)}
  .mx-posters li{scroll-snap-align:start}
}

/* ---------- timetable ---------- */
.mx-legend{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;padding:0;margin:-12px 0 24px;font-size:calc(15px*var(--tune-size,1));font-weight:600}
.mx-legend li{display:flex;align-items:center;gap:10px}.mx-legend li::before{content:"";width:7px;height:18px;background:var(--c);transform:skewX(-9deg)}
.mx-board{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;list-style:none;padding:0}
.mx-board>li{display:flex;flex-direction:column;gap:10px;padding:16px 12px 14px;background:var(--bg2)}
.mx-board h3{font-size:calc(19px*var(--tune-size,1));padding:0 4px 4px}
.mx-board ul{display:flex;flex-direction:column;gap:8px;list-style:none;padding:0}
.mx-board ul li{position:relative;display:flex;flex-direction:column;gap:2px;padding:10px 10px 11px 22px;background:var(--bg)}
.mx-board ul li::before{content:"";position:absolute;left:9px;top:9px;bottom:9px;width:5px;background:var(--c);transform:skewX(-9deg)}
.mx-board time{font-size:calc(13px*var(--tune-size,1));font-weight:600;color:var(--mute);font-variant-numeric:tabular-nums}
.mx-board b{font-size:calc(15px*var(--tune-size,1));line-height:1.25}.mx-board ul span{font-size:calc(13px*var(--tune-size,1));color:var(--mute);line-height:1.3}
.mx-rest p{padding:10px 4px;color:var(--mute);font-weight:600}
.mx-tt-note{margin-top:18px;color:var(--mute);font-size:calc(15px*var(--tune-size,1))}
.mx-tl{display:none}
@media (min-width:1101px){
  .mx-tl{display:block}
  .mx-board-alt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .mx-tl-scale{position:relative;height:22px;margin-left:88px;font-size:calc(13px*var(--tune-size,1));font-weight:600;color:var(--mute);font-variant-numeric:tabular-nums}
  .mx-tl-scale span{position:absolute;top:0;transform:translateX(-50%)}
  .mx-tl ol{list-style:none;padding:0;display:grid;gap:8px}
  .mx-tl ol li{display:grid;grid-template-columns:76px 1fr;gap:12px;align-items:center}
  .mx-tl-day{font:var(--hs) var(--hw) calc(19px*var(--tune-size,1))/1 var(--hf);letter-spacing:var(--ht)}
  .mx-tl-track{position:relative;height:46px;background:var(--bg2)}
  .mx-tl-track i{position:absolute;top:6px;bottom:6px;display:flex;align-items:center;padding-left:12px;background:color-mix(in srgb,var(--c) 24%,var(--bg));box-shadow:none;transform:skewX(-9deg);font-style:normal}
  .mx-tl-track time{font-size:12px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;transform:skewX(9deg);white-space:nowrap}
}
@media (max-width:1100px){
  .mx-board{grid-template-columns:1fr;gap:8px}
  .mx-board>li{display:grid;grid-template-columns:90px minmax(0,1fr);align-items:start;gap:12px;padding:14px}
  .mx-board h3{padding:10px 0 0}
  .mx-board ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
}
@media (max-width:760px){
  .mx-board{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(290px,78vw);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut) * -1);padding:0 var(--gut) 14px;scroll-padding-inline:var(--gut)}
  .mx-board>li{display:flex;flex-direction:column;gap:10px;scroll-snap-align:start}.mx-board h3{padding:2px 4px 0}.mx-board ul{display:flex}
}

/* the chalk band: the timetable sits on the second page colour (a light band on dark pages, see design.ts dark.fix),
   so the page below the hero alternates instead of running as one slab */
.mx-chalk{background:var(--bg2);color:var(--ink);padding-bottom:calc(clamp(72px,9vw,128px)*var(--tune-space,1))}
.mx-chalk .mx-board>li,.mx-chalk .mx-tl-track{background:var(--bg)}
.mx-chalk .mx-board ul li{background:var(--bg2)}

/* ---------- memberships: race bibs ---------- */
.mx-bibs{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(16px,2vw,28px);list-style:none;padding:0;max-width:min(100%,calc(var(--n) * 520px));margin:0 auto}
/* four pin holes: the page shows through, ringed like an eyelet */
.mx-bib{--hole:var(--bg);--ring:color-mix(in srgb,var(--onbib) 30%,var(--bib));position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:34px 0 0;color:var(--onbib);
  background:radial-gradient(circle at 18px 17px,var(--hole) 0 4.5px,var(--ring) 5px 6.5px,transparent 7px),radial-gradient(circle at calc(100% - 18px) 17px,var(--hole) 0 4.5px,var(--ring) 5px 6.5px,transparent 7px),
    radial-gradient(circle at 18px calc(100% - 17px),var(--hole) 0 4.5px,var(--ring) 5px 6.5px,transparent 7px),radial-gradient(circle at calc(100% - 18px) calc(100% - 17px),var(--hole) 0 4.5px,var(--ring) 5px 6.5px,transparent 7px),var(--bib);
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 12px 28px -18px rgba(0,0,0,.35)}
.mx-bib.mx-feat{--bib:var(--acc);--onbib:var(--ona);--bibm:var(--ona)}
.mx-bib-band{position:relative;width:100%;min-height:52px;display:flex;align-items:center;justify-content:center;padding:8px 24px;background:var(--field);color:var(--onf);font:var(--hs) var(--hw) calc(20px*var(--tune-size,1))/1.15 var(--hf);letter-spacing:var(--ht)}
.mx-bib-flag{position:absolute;left:50%;top:-34px;translate:-50% 0;padding:3px 14px;font:700 13px/1.4 var(--ft);color:var(--onbib);letter-spacing:0;font-style:normal;white-space:nowrap;isolation:isolate}
.mx-bib-flag::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bib);box-shadow:inset 0 0 0 2px var(--onbib);transform:skewX(-9deg)}
.mx-bib-no{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px;margin:26px 0 8px;padding:0 28px;font-variant-numeric:tabular-nums lining-nums}
.mx-bib-no b{min-width:0}
/* the number size shrinks with the longest bib number (--d characters), so "€49" and "26 900 Ft" both fit one bib */
.mx-bib-no b{font:var(--hs) var(--hw) calc(clamp(76px,7vw,108px) * min(1, 3.4 / var(--d,3)))/.9 var(--hf);letter-spacing:-.04em}
.mx-cur{font:var(--hs) var(--hw) calc(32px*var(--tune-size,1))/1 var(--hf);align-self:flex-start;margin-top:.2em}
.mx-cur-after{margin-left:.3em}
.mx-per,.mx-bib-no small{font-size:calc(16px*var(--tune-size,1));font-weight:600;color:var(--bibm)}
.mx-perks{flex:1;width:100%;list-style:none;padding:14px 32px 0}
.mx-perks li{padding:10px 0;border-top:1px solid color-mix(in srgb,var(--onbib) 16%,var(--bib));font-size:calc(16px*var(--tune-size,1));line-height:1.4}
.mx-bib .btn{margin:20px 32px calc(46px*var(--tune-space,1));align-self:stretch}
.mx-bib .btn.mx-dark{color:var(--acc)}.mx-bib .btn.mx-dark::before{background:var(--ona)}
.mx-plans-note{margin-top:22px;text-align:center;color:var(--mute);font-size:calc(15px*var(--tune-size,1))}
@media (max-width:860px){.mx-bibs{grid-template-columns:minmax(0,520px);justify-content:center;row-gap:46px}}

/* ---------- story ---------- */
.mx-story .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center}
/* the photo runs off the left edge of the page and stops on a leaning edge, like the hero seam turned round */
.mx-story-pic{--h:clamp(360px,40vw,580px);grid-column:1/7;margin-left:calc(-1 * (var(--gut) + max(0px,(100vw - 1432px) / 2)));clip-path:polygon(0 0,100% 0,calc(100% - var(--o)) 100%,0 100%)}
.mx-story-text{grid-column:8/13}.mx-story-text p{margin:22px 0 14px;color:var(--mute);font-size:calc(18px*var(--tune-size,1))}
@media (max-width:860px){.mx-story .wrap{grid-template-columns:1fr}.mx-story-pic,.mx-story-text{grid-column:1/-1}.mx-story-pic{--h:clamp(260px,64vw,420px);margin-inline:calc(var(--gut) * -1)}}

/* ---------- reviews ---------- */
.mx-quote{overflow-x:clip}
.mx-banner{position:relative;isolation:isolate;padding:calc(clamp(52px,6vw,88px)*var(--tune-space,1)) clamp(36px,9vw,150px);color:var(--onf);text-align:center}
.mx-banner::before{content:"";position:absolute;inset:0 clamp(14px,3vw,40px);z-index:-1;background:var(--field);transform:skewX(-9deg)}
.mx-banner blockquote p{font:var(--hs) var(--hw) calc(clamp(26px,3vw,44px)*var(--tune-size,1))/1.14 var(--hf);letter-spacing:var(--ht);max-width:30ch;margin:0 auto;text-wrap:balance}
.mx-banner figcaption{margin-top:22px;font-weight:600;color:var(--onfm)}
.mx-quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;list-style:none;padding:0}
.mx-quotes li{position:relative;display:flex;flex-direction:column;gap:22px;padding:calc(44px*var(--tune-space,1)) 32px 32px;background:var(--bg2)}
.mx-quotes li::before{content:"";position:absolute;left:32px;top:0;width:44px;height:7px;background:var(--mk);transform:skewX(-9deg)}
.mx-quotes blockquote p{font:var(--hs) 700 calc(21px*var(--tune-size,1))/1.35 var(--hf);letter-spacing:-.01em}
.mx-q-who{margin-top:auto;font-size:calc(15px*var(--tune-size,1));font-weight:600;color:var(--mute)}
@media (max-width:860px){.mx-quotes{grid-template-columns:1fr}}

/* ---------- visit: hours as running lanes ---------- */
.mx-vs-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.mx-vs-hours{grid-column:1/8}.mx-vs-info{grid-column:9/13}
.mx-vs-grid h3,.mx-ct-week h3{font-size:calc(20px*var(--tune-size,1));margin-bottom:18px}
.mx-vs-info{display:grid;grid-template-columns:auto 1fr;gap:16px 24px;align-content:start;font-size:calc(17px*var(--tune-size,1))}
.mx-vs-info dt{font-size:calc(14px*var(--tune-size,1));font-weight:600;color:var(--mute);padding-top:3px}.mx-vs-info dd{font-weight:600}
.mx-vs-info a{text-decoration-thickness:2px;text-underline-offset:4px}
.wk ol{list-style:none;padding:0;display:grid;gap:10px}
.wk li{display:grid;grid-template-columns:52px minmax(0,1fr) 116px;gap:16px;align-items:center}
.wk-n{font:var(--hs) var(--hw) calc(18px*var(--tune-size,1))/1 var(--hf);letter-spacing:var(--ht)}
.wk-bar{position:relative;height:18px;background:var(--bg2)}
.wk-bar i{position:absolute;top:0;bottom:0;background:var(--mk);transform:skewX(-9deg)}
.wk-t{white-space:nowrap;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.wk li.off .wk-t,.wk li.off .wk-n{color:var(--mute)}
.wk-scale{display:flex;justify-content:space-between;margin:10px 132px 0 68px;font-size:calc(13px*var(--tune-size,1));font-weight:600;color:var(--mute);font-variant-numeric:tabular-nums}
.mx-hours{display:grid;grid-template-columns:auto 1fr;gap:10px 28px}.mx-hours dt{font-weight:700}.mx-hours dd{font-variant-numeric:tabular-nums}
@media (max-width:860px){.mx-vs-hours,.mx-vs-info{grid-column:1/-1}.mx-vs-info{margin-top:24px}}
@media (max-width:480px){.wk li{grid-template-columns:40px minmax(0,1fr) 104px;gap:10px}.wk-t{font-size:calc(14px*var(--tune-size,1))}.wk-scale{margin:8px 114px 0 50px}}

/* ---------- closing: the trial band ---------- */
.mx-close{position:relative;overflow:hidden;margin-top:calc(clamp(80px,10vw,140px)*var(--tune-space,1));padding:calc(clamp(56px,7vw,96px)*var(--tune-space,1)) 0;background:var(--field);color:var(--onf)}
.mx-close .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px 64px;align-items:center;padding-right:calc(var(--gut) + 120px)}
.mx-close h2{font-size:calc(clamp(36px,4.6vw,68px)*var(--tune-size,1));max-width:16ch}
.mx-cl-text p{margin-top:16px;font-size:calc(19px*var(--tune-size,1));color:var(--onfm);max-width:40ch}
.mx-cl-act{display:flex;flex-direction:column;align-items:center;gap:14px}
.mx-cl-tel{font-size:calc(19px*var(--tune-size,1));font-weight:700;font-variant-numeric:tabular-nums;text-decoration-thickness:2px;text-underline-offset:5px}
.mx-close .mx-stripes{position:absolute;top:0;bottom:0;right:max(var(--gut),calc((100vw - 1432px) / 2 + var(--gut)))}
@media (max-width:760px){.mx-close .wrap{grid-template-columns:1fr;padding-right:var(--gut)}.mx-cl-act{align-items:flex-start}.mx-close .mx-stripes{top:auto;height:96px}}

/* ---------- page heads, services page ---------- */
.mx-ph{padding:calc(clamp(56px,7vw,104px)*var(--tune-space,1)) 0 calc(clamp(36px,4vw,52px)*var(--tune-space,1))}
.mx-ph+.mx-sec{padding-top:clamp(8px,1.5vw,20px)}
.mx-ph .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end}
.mx-ph h1{grid-column:1/8;display:flex;align-items:center;gap:.28em}.mx-ph h1 .mx-mark{height:.74em;flex:none}.mx-ph-t{min-width:0;overflow-wrap:break-word}
.mx-ph .mx-lede{grid-column:8/13;color:var(--mute)}
.mx-band{--h:clamp(220px,28vw,400px)}
.mx-detail{list-style:none;padding:0}
.mx-detail>li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding:calc(40px*var(--tune-space,1)) 0;border-top:2px solid var(--ink)}
.mx-detail>li:last-child{border-bottom:2px solid var(--ink)}
.mx-dt-name{grid-column:1/6}.mx-dt-body{grid-column:6/13}
.mx-dt-name h2{font-size:calc(clamp(30px,3vw,44px)*var(--tune-size,1))}
.mx-facts{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:20px}.mx-facts dt{font-size:calc(13px*var(--tune-size,1));font-weight:600;color:var(--mute)}.mx-facts dd{font-size:calc(18px*var(--tune-size,1));font-weight:700;font-variant-numeric:tabular-nums}
.mx-dt-body>p{font-size:calc(18px*var(--tune-size,1))}.mx-dt-for{margin-top:14px;color:var(--mute)}.mx-dt-for b{color:var(--ink)}
.mx-dt-body h3{font-size:calc(17px*var(--tune-size,1));margin:24px 0 12px}
.mx-slots{display:flex;flex-wrap:wrap;gap:10px 14px;list-style:none;padding:0 4px}
.mx-slots span{position:relative;display:block;padding:5px 14px;font-size:calc(14px*var(--tune-size,1));font-weight:600;font-variant-numeric:tabular-nums;isolation:isolate}
.mx-slots span::before{content:"";position:absolute;inset:0;z-index:-1;box-shadow:inset 0 0 0 1.5px var(--line);background:var(--bg);transform:skewX(-9deg)}
.mx-rates{margin:calc(clamp(48px,5vw,72px)*var(--tune-space,1)) auto 0;max-width:760px}.mx-rates h3{margin-bottom:12px}
.mx-rates div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;padding:14px 0;border-bottom:1px solid var(--line)}
.mx-rates dd{font-weight:700;font-variant-numeric:tabular-nums}
.mx-fq-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}.mx-fq-grid h2{grid-column:1/5}.mx-fq-list{grid-column:6/13;border-top:2px solid var(--ink)}
.mx-fq-list details{border-bottom:2px solid var(--line)}
.mx-fq-list summary{position:relative;list-style:none;cursor:pointer;padding:22px 48px 22px 0;font-size:calc(19px*var(--tune-size,1));font-weight:700}
.mx-fq-list summary::-webkit-details-marker{display:none}
.mx-fq-list summary::before,.mx-fq-list summary::after{content:"";position:absolute;right:6px;top:50%;width:18px;height:3px;margin-top:-1.5px;background:var(--mk)}
.mx-fq-list summary::after{transform:rotate(90deg)}.mx-fq-list details[open] summary::after{transform:none}
.mx-fq-list p{padding:0 48px 24px 0;color:var(--mute)}
.mx-fq-open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 48px}
.mx-fq-open div{padding-top:20px;border-top:2px solid var(--ink)}.mx-fq-open dt{font-size:calc(19px*var(--tune-size,1));font-weight:700;margin-bottom:8px}.mx-fq-open dd{color:var(--mute)}
@media (max-width:860px){
  .mx-ph h1,.mx-ph .mx-lede,.mx-dt-name,.mx-dt-body,.mx-fq-grid h2,.mx-fq-list{grid-column:1/-1}.mx-ph .mx-lede{justify-self:start}
  .mx-head h2,.mx-head p{grid-column:1/-1;justify-self:start}.mx-fq-open{grid-template-columns:1fr}
}

/* ---------- team: player cards, roster ---------- */
.mx-players{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(20px,2.4vw,36px);list-style:none;padding:0 calc(var(--h) * var(--k) / 2);--h:clamp(190px,17vw,250px)}
.mx-players li{display:flex;flex-direction:column}
.mx-tile{--o:calc(var(--h) * var(--k));display:grid;place-items:center;height:var(--h);margin:0 calc(var(--o) / -2) 22px;background:var(--field);color:var(--onf);clip-path:polygon(var(--o) 0,100% 0,calc(100% - var(--o)) 100%,0 100%)}
.mx-tile.mx-tile-alt{background:var(--acc);color:var(--ona)}
.mx-tile span{font:var(--hs) var(--hw) calc(clamp(96px,9vw,140px)*var(--tune-size,1))/1 var(--hf);letter-spacing:-.04em}
.mx-players h2{font-size:calc(26px*var(--tune-size,1))}.mx-role{margin:6px 0 12px;font-weight:700;font-size:calc(15px*var(--tune-size,1))}.mx-players p:not(.mx-role){color:var(--mute)}
.mx-roster{list-style:none;padding:0;border-bottom:2px solid var(--ink)}
.mx-roster>li{display:grid;grid-template-columns:72px minmax(0,3fr) minmax(0,4fr) minmax(0,3fr);gap:28px;align-items:start;padding:30px 0;border-top:2px solid var(--ink)}
.mx-ini{--h:64px;display:grid;place-items:center;width:72px;height:64px;background:var(--field);color:var(--onf);clip-path:polygon(10px 0,100% 0,62px 100%,0 100%)}
.mx-ini span{font:var(--hs) var(--hw) calc(32px*var(--tune-size,1))/1 var(--hf)}
.mx-rs-who h2{font-size:calc(26px*var(--tune-size,1))}.mx-rs-bio{color:var(--mute)}.mx-rs-leads h3{font-size:calc(15px*var(--tune-size,1));font-family:var(--ft);font-style:normal;font-weight:700;letter-spacing:0;margin-bottom:10px}
@media (max-width:1000px){.mx-players{grid-template-columns:repeat(2,minmax(0,1fr))}.mx-roster>li{grid-template-columns:72px minmax(0,1fr);gap:16px 24px}.mx-rs-bio,.mx-rs-leads{grid-column:2}}
@media (max-width:560px){.mx-players{grid-template-columns:minmax(0,1fr)}}

/* ---------- contact ---------- */
.mx-contact .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
.mx-ct-info{grid-column:1/6}.mx-ct-info>p{margin:16px 0 28px;color:var(--mute);font-size:calc(18px*var(--tune-size,1))}
.mx-ct-week{margin-top:32px}
.mx-form,.mx-reach{grid-column:7/13}
.mx-form{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;padding:clamp(24px,3vw,40px);background:var(--bg2)}
.mx-form label{display:grid;gap:8px;font-size:calc(14px*var(--tune-size,1));font-weight:600}
.mx-form input,.mx-form select,.mx-form textarea{width:100%;min-height:52px;padding:12px 14px;font:inherit;font-size:calc(16px*var(--tune-size,1));font-weight:400;color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:0}
.mx-wide{grid-column:1/-1}.mx-fm-end{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}.mx-fm-end p{flex:1 1 220px;font-size:calc(14px*var(--tune-size,1));color:var(--mute)}
.mx-reach{display:grid;gap:16px}
.mx-reach a{position:relative;isolation:isolate;display:grid;gap:4px;padding:30px clamp(28px,3vw,44px);text-decoration:none;color:var(--onf)}
.mx-reach a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--field);transform:skewX(-9deg)}
.mx-reach a:nth-child(2){color:var(--ona)}.mx-reach a:nth-child(2)::before{background:var(--acc)}
.mx-reach span{font-size:calc(14px*var(--tune-size,1));font-weight:600}.mx-reach b{font:var(--hs) var(--hw) calc(clamp(24px,2.4vw,34px)*var(--tune-size,1))/1.1 var(--hf);overflow-wrap:anywhere}
.mx-legal{margin:calc(48px*var(--tune-space,1)) 0 0;padding-bottom:calc(clamp(56px,7vw,96px)*var(--tune-space,1));font-size:calc(14px*var(--tune-size,1));color:var(--mute)}
@media (max-width:860px){.mx-ct-info,.mx-form,.mx-reach{grid-column:1/-1}.mx-form{grid-template-columns:1fr}.mx-reach a::before{inset:0 8px}}

/* ---------- gallery ---------- */
/* the shared gallery (sections/gallery): its own section padding on top, M's next section brings the gap below; headline set like M's, square controls */
.mx-gal .g-sec{padding-bottom:0}.mx-gal .g-title{font-family:var(--hf);font-style:var(--hs);font-weight:var(--hw);letter-spacing:var(--ht)}
.mx-gal .g-cta,.mx-gal .g-pill,.mx-gal .g-btn{border-radius:0}

/* ---------- footer ---------- */
/* the finish line: a band of leaning lane marks across the top of the footer, then name, links and the small print */
.mx-foot{position:relative;padding:calc(clamp(56px,6vw,80px)*var(--tune-space,1)) 0 32px;background:var(--bg2)}
.mx-finish{position:absolute;inset:0 0 auto;height:14px;background:repeating-linear-gradient(99deg,var(--mk) 0 12px,transparent 12px 26px)}
.mx-ft-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.mx-ft-name{display:inline-flex;align-items:center;gap:.3em;font:var(--hs) var(--hw) calc(clamp(32px,4vw,52px)*var(--tune-size,1))/1 var(--hf);letter-spacing:var(--ht);color:var(--ink);text-decoration:none}
.mx-ft-name .mx-mark{height:.74em;flex:none}
.mx-ft-nav{display:flex;flex-wrap:wrap;gap:8px 32px;list-style:none;padding:0;margin:0;font-weight:600}
.mx-ft-nav a{color:var(--ink);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .2s}.mx-ft-nav a:hover{background-size:100% 2px}
.mx-ft-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px;margin-top:36px;padding-top:24px;border-top:2px solid var(--ink);font-size:calc(15px*var(--tune-size,1))}
.mx-ft-who{display:flex;flex-wrap:wrap;gap:6px 22px;color:var(--mute)}.mx-ft-who b{color:var(--ink)}
.mx-flegal{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;padding:0}.mx-flegal a{color:var(--mute)}.mx-flegal a[aria-current]{color:var(--ink)}
.mx-foot .langs{margin-top:0}

/* ---------- legal, 404 ---------- */
.legal-page{max-width:780px;padding:calc(clamp(48px,6vw,88px)*var(--tune-space,1)) 0}
.legal-page h1{font-size:calc(clamp(40px,5vw,68px)*var(--tune-size,1));margin-bottom:28px}.legal-page h2{font-size:calc(28px*var(--tune-size,1));margin:calc(40px*var(--tune-space,1)) 0 12px}.legal-page h3{font-size:calc(20px*var(--tune-size,1));margin:28px 0 8px}
.legal-page p,.legal-page li{margin-bottom:10px}.legal-page ul{padding-left:20px}
.legal-page table{border-collapse:collapse;margin:12px 0}.legal-page td,.legal-page th{padding:8px 16px 8px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.legal-lang,.legal-page .draft{padding:14px 18px;background:var(--bg2);margin-bottom:24px;box-shadow:none}
.nf{padding:calc(clamp(72px,10vw,144px)*var(--tune-space,1)) 0;max-width:760px}.nf p{margin-top:20px;font-size:calc(19px*var(--tune-size,1));color:var(--mute)}
.nf ul{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;list-style:none;padding:0;margin-top:36px}.nf ul a:not(.btn){font-weight:700}

/* ---------- phones and tablets ---------- */
@media (max-width:860px){.mx-nav .wrap{gap:20px}.mx-links{gap:20px}}
/* phones: one row (name, the Book button, a menu); the menu is a <details> sheet, so it works without JavaScript */
.mx-menu{display:none}
@media (max-width:720px){
  .mx-nav .wrap{gap:12px;min-height:64px}
  .mx-links,.mx-nav .wrap>.nav-end>.langs{display:none}
  .mx-logo{font-size:calc(21px*var(--tune-size,1));min-width:0}.mx-logo>span:last-child{min-width:0;overflow-wrap:anywhere}
  .nav-end{display:flex;align-items:center;gap:6px}
  .mx-nav .btn{min-height:42px;padding:0 16px;font-size:calc(14px*var(--tune-size,1))}
  .mx-menu{display:block}
  .mx-menu summary{display:grid;place-items:center;width:44px;height:44px;list-style:none;cursor:pointer}
  .mx-menu summary::-webkit-details-marker{display:none}
  .mx-menu summary span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .mx-menu summary::before{content:"";width:22px;height:14px;background:linear-gradient(currentColor 0 0) 0 0/100% 2px no-repeat,linear-gradient(currentColor 0 0) 0 50%/100% 2px no-repeat,linear-gradient(currentColor 0 0) 0 100%/100% 2px no-repeat;transform:skewX(-9deg)}
  .mx-menu[open] summary::before{height:2px;background:currentColor}
  .mx-sheet{position:absolute;left:0;right:0;top:100%;padding:6px var(--gut) 26px;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 24px 32px -24px rgb(0 0 0 / .35)}
  .mx-sheet ul{list-style:none;padding:0}
  .mx-sheet ul a{display:block;padding:14px 0;border-bottom:1px solid var(--line);font:var(--hs) var(--hw) calc(24px*var(--tune-size,1))/1.15 var(--hf);letter-spacing:var(--ht);text-decoration:none}
  .mx-sheet ul a[aria-current]{color:var(--mk)}
  .mx-sheet-tel{display:inline-block;margin:20px 24px 0 0;font-weight:700;font-variant-numeric:tabular-nums}
  .mx-sheet .langs{display:inline-flex;margin-top:20px}
  html{scroll-padding-top:84px}
}
@media (max-width:520px){.mx-cta{display:grid;grid-template-columns:1fr;gap:14px;padding:0 5px}.mx-lh-text .mx-cta{justify-content:stretch}.mx-nav .btn{padding:0 18px}}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .mx-lanes a::before{transition:transform .38s cubic-bezier(.2,.7,.2,1)}
  .mx-links a::after{transition:transform .25s ease}
  .mx-go::after,.mx-arrow::after{transition:transform .2s ease}.mx-arrow:hover::after{transform:translateX(4px)}
  /* Advanced: the bibs drop onto the board one after another; the board's classes slide in along the lean */
  .m-js .mx-bibs.m-in>li{animation:mx-pin .7s cubic-bezier(.2,.8,.2,1) backwards}
  .m-js .mx-bibs.m-in>li:nth-child(2){animation-delay:.09s}.m-js .mx-bibs.m-in>li:nth-child(3){animation-delay:.18s}
  @keyframes mx-pin{from{opacity:0;transform:translateY(-26px) rotate(-1.5deg)}}

  /* ---------- Advanced hero moment: "the start" ----------
     The three stripes fire up the seam one after another, the photo drives in from the right and settles from 108 %,
     the tag, lede and buttons lean in from a skew (the headline's words rise with the motion library), and the results
     line ticks up last. Transform and opacity only; everything ends exactly where the still page has it.
     Pointer afterwards (wow.js): photo −10 px, stripes +14 px. */
  .m-js [data-wow] .mx-stripes i{animation:mx-fire .55s cubic-bezier(.3,.9,.2,1) backwards}
  .m-js [data-wow] .mx-stripes i:nth-child(2){animation-delay:.09s}.m-js [data-wow] .mx-stripes i:nth-child(3){animation-delay:.18s}
  @keyframes mx-fire{from{transform:skewX(-9deg) scaleY(0)}}
  .m-js .mx-sp-pic,.m-js .mx-st-pic{animation:mx-drive 1s .12s cubic-bezier(.16,1,.3,1) backwards}
  @keyframes mx-drive{from{opacity:0;transform:translateX(9%)}}
  .m-js .mx-st-pic{animation-name:mx-fade}@keyframes mx-fade{from{opacity:0}}
  .m-js [data-wow] .mx-pic img{animation:mx-settle 1.4s .12s cubic-bezier(.16,1,.3,1) backwards}
  @keyframes mx-settle{from{transform:scale(1.08)}}
  .m-js [data-wow] .mx-tag,.m-js [data-wow] .mx-lede,.m-js [data-wow] .mx-cta{animation:mx-lean-in .7s cubic-bezier(.2,.8,.2,1) backwards}
  .m-js [data-wow] .mx-tag{animation-delay:.18s}.m-js [data-wow] .mx-lede{animation-delay:.42s}.m-js [data-wow] .mx-cta{animation-delay:.54s}
  @keyframes mx-lean-in{from{opacity:0;transform:translateX(-40px) skewX(-10deg)}}
  .m-js .mx-lanes-hero .mx-tag,.m-js .mx-lanes-hero .mx-lede,.m-js .mx-lanes-hero .mx-cta{animation-name:mx-rise}
  @keyframes mx-rise{from{opacity:0;transform:translateY(18px)}}
  .m-js .mx-lh-pics .mx-pic{animation:mx-off-the-blocks .9s cubic-bezier(.16,1,.3,1) backwards}
  .m-js .mx-lh-pics .mx-lh-mid{animation-delay:.2s}.m-js .mx-lh-pics .mx-lh-side{animation-delay:.36s}
  @keyframes mx-off-the-blocks{from{opacity:0;transform:translateY(60px)}}
  .m-js .mx-score-dock li{animation:mx-rise .6s cubic-bezier(.2,.8,.2,1) backwards}
  .m-js .mx-score-dock li:nth-child(1){animation-delay:.7s}.m-js .mx-score-dock li:nth-child(2){animation-delay:.78s}.m-js .mx-score-dock li:nth-child(3){animation-delay:.86s}.m-js .mx-score-dock li:nth-child(4){animation-delay:.94s}
}

/* ── serious (the default tone; engine/shared/tone.ts already calmed the colours and shadows): the lean stays as M's
   one signature, but only on the photo frames and the hero seam, and at a gentler 6°; buttons, tags, the timetable,
   the bibs and the quote stand upright. Kanit's heavy italic is kept for the hero headline alone; every other
   headline, number and label is set upright (Chivo, or Teko in the poster pairing). The speed stripes stay in the
   logo only; the timetable marks its classes with small dots instead of coloured slashes. */
[data-tone=serious]{--k:.1051;--mx-lift:0 1px 2px color-mix(in srgb,var(--tone-sh,#000) 7%,transparent),0 3px 6px color-mix(in srgb,var(--tone-sh,#000) 6%,transparent),0 8px 16px -4px color-mix(in srgb,var(--tone-sh,#000) 6%,transparent),0 18px 36px -9px color-mix(in srgb,var(--tone-sh,#000) 5%,transparent)}
[data-tone=serious] body{--sf:"Chivo M",system-ui,sans-serif}
[data-tone=serious] body:not(.mx-f-poster){--hf:var(--sf);--hs:normal;--hw:750;--ht:-.028em;--cw:.6}
[data-tone=serious] body.mx-f-poster{--hw:500;--ht:.005em}
/* the one italic moment: the hero headline (the sprint pairing) */
[data-tone=serious] body:not(.mx-f-poster) :is(.mx-sprint,.mx-stadium,.mx-lanes-hero) h1{--cw:.56;font-family:"Kanit M",system-ui,sans-serif;font-style:italic;font-weight:800;letter-spacing:-.01em}
[data-tone=serious] body.mx-f-poster :is(.mx-sprint,.mx-stadium,.mx-lanes-hero) h1{font-weight:600}
/* small headlines, numbers and labels upright in the text face */
[data-tone=serious] body :is(h3,.mx-plate b,.mx-bib-band,.mx-tl-day,.wk-n,.mx-ln-name,.mx-score b,.mx-bib-no b,.mx-cur,.mx-reach b,.mx-tile span,.mx-ini span,.mx-dt-name h2,.mx-players h2,.mx-rs-who h2){font-family:var(--sf);font-style:normal;font-weight:700;letter-spacing:-.015em}
[data-tone=serious] body h3{font-size:calc(19px*var(--tune-size,1))}
[data-tone=serious] body .mx-board h3{font-size:calc(16px*var(--tune-size,1))}
[data-tone=serious] body .mx-tl-day,[data-tone=serious] body .wk-n{font-size:calc(15px*var(--tune-size,1));font-weight:600;letter-spacing:0}
[data-tone=serious] body .mx-plate b{font-size:calc(19px*var(--tune-size,1))}
[data-tone=serious] body .mx-bib-band{font-size:calc(16px*var(--tune-size,1));font-weight:600;letter-spacing:0}
[data-tone=serious] body .mx-cur{font-size:calc(26px*var(--tune-size,1));font-weight:600}
[data-tone=serious] body .mx-bib-no b{font-size:calc(clamp(60px,5.4vw,84px) * min(1, 3.4 / var(--d,3)));font-weight:700;letter-spacing:-.045em}
[data-tone=serious] body .mx-ln-name{font-size:calc(clamp(22px,2vw,28px)*var(--tune-size,1));letter-spacing:-.02em}
[data-tone=serious] body .mx-score b{font-size:calc(clamp(40px,4.2vw,60px)*var(--tune-size,1));font-weight:600;letter-spacing:-.035em}
[data-tone=serious] body .mx-score-dock b{font-size:calc(clamp(32px,3vw,46px)*var(--tune-size,1))}
[data-tone=serious] body :is(.mx-dt-name h2,.mx-players h2,.mx-rs-who h2){font-size:calc(clamp(24px,2.2vw,32px)*var(--tune-size,1));letter-spacing:-.02em}
[data-tone=serious] body .mx-tile span{font-size:calc(clamp(72px,6.4vw,104px)*var(--tune-size,1));font-weight:600;letter-spacing:-.05em}
[data-tone=serious] body .mx-ini span{font-size:calc(26px*var(--tune-size,1));font-weight:600}
[data-tone=serious] body .mx-reach b{font-size:calc(clamp(22px,2vw,28px)*var(--tune-size,1));font-weight:600}
[data-tone=serious] body.mx-f-poster h2{font-size:calc(clamp(38px,4.6vw,64px)*var(--tune-size,1))}
/* the lean carries through at the gentler 6°: buttons, tags, the start block and the quote band lean with the photo
   frames; small marks (flags, slots, contact tiles) stand upright */
[data-tone=serious] :is(.btn,.mx-tag span,.mx-st-side,.mx-banner)::before{transform:skewX(-6deg)}
[data-tone=serious] :is(.mx-bib-flag,.mx-slots span,.mx-reach a)::before{transform:none}
[data-tone=serious] .btn.mx-ghost::before{box-shadow:inset 0 0 0 1.5px currentColor}
[data-tone=serious] .btn{min-height:52px;padding:0 28px;font-weight:600;letter-spacing:.005em}
[data-tone=serious] .mx-nav .btn{min-height:44px;padding:0 20px}
[data-tone=serious] .mx-tag span{padding:5px 12px;font-weight:600;font-size:calc(13px*var(--tune-size,1));letter-spacing:.01em}
[data-tone=serious] .mx-slots span::before{border-radius:calc(3px*var(--tune-radius,1))}
[data-tone=serious] .mx-links a::after{height:2px;transform:scaleX(0)}
[data-tone=serious] .mx-links a:hover::after,[data-tone=serious] .mx-links a[aria-current]::after{transform:none}
[data-tone=serious] .mx-score li+li::before{width:1px;transform:skewX(-6deg)}
[data-tone=serious] .mx-lanes a::before{transform:scaleX(0)}
@media (hover:hover){[data-tone=serious] .mx-lanes a:hover::before{transform:none}}
@media (max-width:720px){[data-tone=serious] .mx-links a::before{transform:none;border-radius:calc(3px*var(--tune-radius,1))}}
/* the speed stripes: the logo keeps them; the hero seam, the closing band and the page titles do not */
[data-tone=serious] :is(.mx-sp-str,.mx-close .mx-stripes,.mx-ph h1 .mx-mark){display:none}
[data-tone=serious] .mx-close .wrap{padding-right:var(--gut)}
[data-tone=serious] .mx-mark i{transform:skewX(-6deg)}
/* rules: one weight lighter */
[data-tone=serious] .mx-lanes{border-top-width:1.5px;border-bottom-width:1.5px}
[data-tone=serious] .mx-lanes li+li{border-top-width:1px}
[data-tone=serious] .mx-detail>li{border-top:1px solid var(--line)}
[data-tone=serious] .mx-detail>li:first-child{border-top:1.5px solid var(--ink)}
[data-tone=serious] .mx-detail>li:last-child{border-bottom:1px solid var(--line)}
[data-tone=serious] :is(.mx-fq-list,.mx-fq-open div){border-top-width:1.5px}
[data-tone=serious] .mx-fq-list details{border-bottom-width:1px}
[data-tone=serious] .mx-fq-list summary::before,[data-tone=serious] .mx-fq-list summary::after{width:16px;height:2px;margin-top:-1px;background:var(--ink)}
[data-tone=serious] .mx-roster{border-bottom-width:1px;border-bottom-color:var(--line)}
[data-tone=serious] .mx-roster>li{border-top:1px solid var(--line)}
[data-tone=serious] .mx-roster>li:first-child{border-top:1.5px solid var(--ink)}
[data-tone=serious] .mx-ft-row{border-top:1px solid var(--line)}
[data-tone=serious] .mx-lh-pics::after{height:2px}
/* timetable: a small dot per class, no slashes; the timeline bars upright with a fine edge */
[data-tone=serious] .mx-legend li::before{width:8px;height:8px;border-radius:50%;transform:none}
[data-tone=serious] .mx-board>li{border-radius:calc(4px*var(--tune-radius,1))}
[data-tone=serious] .mx-board ul li{padding:10px 10px 11px 12px;border-radius:calc(3px*var(--tune-radius,1))}
[data-tone=serious] .mx-board ul li::before{position:static;order:-1;display:inline-block;width:7px;height:7px;margin:0 0 4px;border-radius:50%;transform:none}
[data-tone=serious] .mx-board ul li{display:grid;grid-template-columns:7px minmax(0,1fr);column-gap:8px;align-items:center}
[data-tone=serious] .mx-board ul li::before{grid-row:1;grid-column:1;margin:0}
[data-tone=serious] .mx-board ul li>*{grid-column:1/-1}
[data-tone=serious] .mx-board ul li>time{grid-row:1;grid-column:2}
[data-tone=serious] .mx-tl-track i{transform:none;box-shadow:none;border-radius:calc(2px*var(--tune-radius,1))}
[data-tone=serious] .mx-tl-track time{transform:none}
[data-tone=serious] .wk-bar{border-radius:calc(2px*var(--tune-radius,1))}
[data-tone=serious] .wk-bar i{transform:none;border-radius:calc(2px*var(--tune-radius,1))}
/* memberships: clean cards, no pin holes, the plan name on a quiet band */
[data-tone=serious] .mx-bib{background:var(--bib);box-shadow:var(--mx-lift);border-radius:calc(6px*var(--tune-radius,1));overflow:visible}
[data-tone=serious] .mx-bib-band{border-radius:calc(6px*var(--tune-radius,1)) calc(6px*var(--tune-radius,1)) 0 0}
[data-tone=serious] .mx-bib{padding-top:0}
[data-tone=serious] .mx-bib-flag{top:auto;bottom:calc(100% + 10px);padding:3px 12px;font-weight:600}
[data-tone=serious] .mx-bib-flag::before{border-radius:calc(3px*var(--tune-radius,1));box-shadow:inset 0 0 0 1px var(--onbib)}
[data-tone=serious] .mx-bib .btn{margin-bottom:32px}
@media (max-width:860px){[data-tone=serious] .mx-bibs{row-gap:52px}}
/* story and poster frames keep the (now gentler) lean; the class plates sit straight under it */
/* reviews: the quote on a leaning band of the field colour, set in the text face */
[data-tone=serious] .mx-banner::before{inset:0 clamp(14px,3vw,40px)}
[data-tone=serious] .mx-banner blockquote p{font:500 calc(clamp(22px,2.2vw,30px)*var(--tune-size,1))/1.38 var(--sf);letter-spacing:-.015em;max-width:38ch}
[data-tone=serious] .mx-quotes li{border-radius:calc(6px*var(--tune-radius,1));padding-top:32px}
[data-tone=serious] .mx-quotes li::before{display:none}
[data-tone=serious] .mx-quotes blockquote p,[data-tone=serious] body.mx-f-poster .mx-quotes blockquote p{font:500 calc(19px*var(--tune-size,1))/1.45 var(--sf);letter-spacing:-.01em}
/* team: initials upright on calm tiles */
[data-tone=serious] .mx-tile{clip-path:none;margin-inline:0;border-radius:calc(6px*var(--tune-radius,1))}
[data-tone=serious] .mx-players{padding-inline:0}
[data-tone=serious] .mx-ini{clip-path:none;width:64px;border-radius:50%}
[data-tone=serious] .mx-roster>li{grid-template-columns:64px minmax(0,3fr) minmax(0,4fr) minmax(0,3fr)}
@media (max-width:1000px){[data-tone=serious] .mx-roster>li{grid-template-columns:64px minmax(0,1fr)}}
/* contact */
[data-tone=serious] .mx-reach a::before{border-radius:calc(6px*var(--tune-radius,1))}
@media (max-width:860px){[data-tone=serious] .mx-reach a::before{inset:0}}
[data-tone=serious] .mx-form{border-radius:calc(6px*var(--tune-radius,1))}
[data-tone=serious] .mx-form :is(input,select,textarea){border-width:1.5px;border-radius:calc(3px*var(--tune-radius,1))}
/* footer: no finish-line tape, a hairline instead */
[data-tone=serious] .mx-finish{height:1px;background:var(--line)}
[data-tone=serious] .legal-lang,[data-tone=serious] .legal-page .draft{box-shadow:none}
@media (prefers-reduced-motion:no-preference){[data-tone=serious] .m-js [data-wow] :is(.mx-tag,.mx-lede,.mx-cta){animation-name:mx-rise}}
/* class posters: the name plate as a dark glass strip under the photo instead of a solid colour bar */
[data-tone=serious]:not([data-colours=bold]) .mx-plate{background:rgb(12 13 18 / .84);color:#fff}
[data-tone=serious]:not([data-colours=bold]) .mx-plate .mx-ps-meta{color:rgb(255 255 255 / .82)}
/* coach cards: until there are portraits, the initial sits on a quiet panel instead of a loud colour block */
[data-tone=serious] .mx-tile,[data-tone=serious] .mx-tile.mx-tile-alt{--h:clamp(150px,13vw,190px);background:var(--bg2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
[data-tone=serious] body .mx-tile span{font-size:calc(clamp(56px,4.6vw,76px)*var(--tune-size,1));font-weight:500;opacity:.75}
[data-tone=serious] body .mx-rs-who h2{font-size:calc(24px*var(--tune-size,1))}

/* long shop names on small screens (html.name-long / name-xl from engine/shared/site.ts; qa tests "Loodgietersbedrijf Jansen") */
@media(max-width:600px){html.name-long .mx-logo{font-size:calc(18px*var(--tune-size,1))}html.name-xl .mx-btn{display:none}}
@media(min-width:601px) and (max-width:900px){html.name-long .mx-logo{font-size:calc(18px*var(--tune-size,1))}html.name-long header .nav-end .langs{display:none}}