/* Shared by every Fragcharts page: fonts, the header, the masthead, region
   tabs, the level-2 panel, sections, the calibration table, notes and the
   footer. From docs/design/ (the Race to the Major shell and forside v8), on
   tokens.css. Fonts are bundled, so a static folder works offline and on any
   host. Page-specific rules go in their own file (race.css). */
@font-face{font-family:'Oswald';src:url('fonts/oswald-latin-var.woff2') format('woff2');font-weight:200 700;font-display:swap}
@font-face{font-family:'Space Mono';src:url('fonts/spacemono-400-latin.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Space Mono';src:url('fonts/spacemono-700-latin.woff2') format('woff2');font-weight:700;font-display:swap}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased}
.container{max-width:1160px;margin:0 auto;padding:0 1.5rem}
a{color:inherit}
header{position:sticky;top:0;z-index:100;background:rgba(7,8,10,.93);backdrop-filter:blur(14px)}
header .container{display:flex;align-items:center;gap:1rem;height:56px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none}
.logo .mark{display:block;width:26px;height:26px;flex:none}
.logo .brand{font-family:var(--disp);font-weight:700;font-size:1.1rem;letter-spacing:.05em;text-transform:uppercase}
.logo .brand b{color:var(--sys-text)}
header nav{display:flex;gap:1px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
header nav::-webkit-scrollbar{display:none}
header nav a{font-family:var(--disp);text-transform:uppercase;letter-spacing:.04em;font-size:.83rem;font-weight:500;color:var(--muted-2);padding:6px 11px;text-decoration:none;white-space:nowrap}
header nav a:hover{color:var(--text)}
header nav a.on{color:var(--on-accent);background:var(--sys);font-weight:600;clip-path:var(--pill);padding:6px 14px}

.mast{padding:4rem 0 2.2rem}
.kick{font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2)}
h1{font-family:var(--disp);font-weight:700;font-size:clamp(2.3rem,6.2vw,4.2rem);line-height:.86;text-transform:uppercase;letter-spacing:-.02em;margin:.9rem 0 0;max-width:15ch}
.lede{color:var(--muted);max-width:66ch;margin:1.6rem 0 0;font-size:.97rem}
.lede b{color:var(--text-2);font-weight:600}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:2.6rem;background:var(--line);border:1px solid var(--line)}
.fact{background:var(--panel);padding:1.3rem 1.5rem 1.4rem;min-width:0}
.fact-label{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.fact-value{font-family:var(--disp);font-weight:700;font-size:2.3rem;line-height:1;margin:.45rem 0 .5rem;color:var(--text);font-variant-numeric:tabular-nums}
.fact-note{display:flex;flex-wrap:wrap;gap:.2rem .8rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--muted-2)}
.fact-note .dot{white-space:nowrap}
.fact-note .dot::before{content:'';display:inline-block;width:.5rem;height:.5rem;margin-right:.4rem;background:var(--c);vertical-align:.05rem}
@media(max-width:760px){.facts{grid-template-columns:minmax(0,1fr)}.fact-value{font-size:1.9rem}}

.tabs{position:sticky;top:56px;z-index:90;background:rgba(7,8,10,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.tabs .container{display:flex;gap:1px;height:54px;align-items:stretch;overflow-x:auto;scrollbar-width:none}
.tabs .container::-webkit-scrollbar{display:none}
.tab{display:flex;flex-direction:column;justify-content:center;gap:.12rem;padding:.4rem 1.3rem;background:none;border:0;
  border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;text-align:left;color:inherit;font:inherit}
.tab b{font-family:var(--disp);font-weight:700;font-size:1.02rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted-2)}
.tab span{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2)}
.tab:hover b{color:var(--text-2)}
.tab.on b{color:var(--c)}
.tab.on{border-bottom-color:var(--c)}

.pane{display:none;padding-top:3rem}
.pane.on{display:block}
.no-js .pane{display:block}
.head{display:flex;align-items:flex-end;gap:1.6rem;flex-wrap:wrap;margin-bottom:1.8rem}
.head h2{font-family:var(--disp);font-weight:700;font-size:clamp(1.8rem,4.6vw,2.6rem);line-height:1;text-transform:uppercase;margin:0;color:var(--c)}
.stg{display:flex;gap:2px;width:220px;color:var(--c)}
.stg i{height:9px;background:currentColor}
.stgk{display:flex;gap:1rem;margin-top:.4rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2)}
.stgk b{color:var(--text-2);font-weight:400}
.hmeta{margin-left:auto;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);text-align:right;line-height:1.7}

.lv2{background:var(--panel);border-left:3px solid var(--c);clip-path:var(--notch);padding:1.8rem 2rem 1.9rem;overflow-x:auto}

.section{margin-top:4.75rem}
.section h2{font-family:var(--disp);font-weight:700;font-size:clamp(1.5rem,3.6vw,2rem);line-height:1;text-transform:uppercase;margin:0 0 1rem}
.section p{color:var(--muted);max-width:72ch;margin:.6rem 0 1.4rem;font-size:.93rem}
.cal{border-collapse:collapse;min-width:560px;width:100%;background:var(--panel);font-variant-numeric:tabular-nums}
.calwrap{overflow-x:auto}
.cal th,.cal td{padding:.62rem .9rem;text-align:right;border-bottom:1px solid var(--line)}
.cal th{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);font-weight:400}
.cal th.l,.cal td.l{text-align:left}
.cal td{font-family:var(--mono);font-size:.78rem;color:var(--text-2)}
.cal td small{color:var(--muted-2)}
.note{background:var(--panel-2);padding:1.5rem 1.7rem;margin-top:2rem;font-size:.9rem;line-height:1.7;color:var(--muted);max-width:none}
.note b{color:var(--text-2);font-weight:600}
.changes{margin:.4rem 0 0;padding:0;list-style:none;font-size:.88rem;color:var(--muted)}
.changes li{margin:.4rem 0}
.changes b{font-family:var(--mono);font-weight:400;color:var(--text-2);margin-right:.6rem}
footer{margin-top:6rem;border-top:1px solid var(--line);padding:1.8rem 0 5rem}
footer p{margin:0 0 .6rem;font-size:.82rem;color:var(--muted-2);max-width:78ch;line-height:1.65}
footer b{color:var(--text-2)}
@media(max-width:700px){.hmeta{margin-left:0;text-align:left}}
/* How the numbers are made (`x-site.method`): folded, at the foot */
.method{margin-top:2.4rem;border-top:1px solid var(--line);padding-top:1rem;max-width:80ch}
.method summary{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.5rem}
.method summary::-webkit-details-marker{display:none}
.method summary::before{content:'+';font-family:var(--disp);font-size:1rem;color:var(--text-2);width:1rem}
.method[open] summary::before{content:'−'}
.method summary:hover{color:var(--text)}
.method ul{margin:1rem 0 0;padding:0;list-style:none}
.method li{position:relative;padding-left:1.1rem;font-size:.9rem;line-height:1.6;color:var(--muted)}
.method li+li{margin-top:.55rem}
.method li::before{content:'';position:absolute;left:0;top:.62em;width:5px;height:5px;background:var(--dim)}
.method b{color:var(--text-2);font-weight:600}
.method a{color:var(--text-2)}
/* A club's logo beside its name, wherever a name is listed (Lars, 2026-09-29); none uploaded, the name alone */
.clogo{display:inline-block;width:1.15em;height:1.15em;object-fit:contain;vertical-align:-.2em;margin-right:.4em;flex:none}
.foot-links{display:flex;gap:1.4rem;flex-wrap:wrap}
.foot-links a{color:var(--text-2);text-decoration:none;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.foot-links a:hover{color:var(--text)}
.foot-consent{background:none;border:0;padding:0;cursor:pointer;color:var(--text-2);font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.foot-consent:hover{color:var(--text)}

/* The header's search (`search.js`) */
.search{position:relative;margin-left:.8rem;flex:none}
.search__toggle{display:none;background:none;border:0;color:var(--muted-2);padding:.4rem;cursor:pointer}
.search__toggle:hover,.search.open .search__toggle{color:var(--text)}
.search__box{position:relative}
.search input{width:15rem;background:var(--panel-2);border:1px solid var(--line);color:var(--text);font:inherit;font-size:.85rem;padding:.45rem .75rem;border-radius:0;
  -webkit-appearance:none;appearance:none}
.search input::placeholder{color:var(--muted-2)}
.search input:focus{outline:none;border-color:var(--sys);width:19rem}
.search__results{position:absolute;right:0;top:calc(100% + 6px);width:24rem;max-width:calc(100vw - 2rem);background:var(--panel);border:1px solid var(--line);
  border-top:2px solid var(--sys);box-shadow:0 12px 32px rgba(0,0,0,.45);z-index:120;padding:.3rem 0}
.search__results[hidden]{display:none}
.search__item{display:flex;align-items:center;gap:.75rem;padding:.6rem .9rem;text-decoration:none;color:var(--text-2)}
.search__item.on{background:color-mix(in srgb,var(--sys) 12%,var(--panel));color:var(--text)}
.search__logo{width:26px;height:26px;object-fit:contain;flex:none}
.search__kind{flex:none;width:44px;font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);text-align:center;
  border:1px solid var(--line);padding:.18rem 0}
.search__text{display:flex;flex-direction:column;min-width:0}
.search__text b{font-family:var(--disp);font-weight:600;font-size:1rem;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search__text small{font-family:var(--mono);font-size:.64rem;color:var(--muted-2);margin-top:.1rem}
.search__none{padding:.8rem .9rem;font-size:.88rem;color:var(--muted)}
@media(max-width:820px){
  .search__toggle{display:block}
  .search__box{display:none;position:fixed;left:0;right:0;top:56px;padding:.7rem 1rem;background:rgba(7,8,10,.97);border-bottom:1px solid var(--line)}
  .search.open .search__box{display:block}
  .search input,.search input:focus{width:100%;font-size:1rem}
  .search__results{position:static;width:auto;max-width:none;margin-top:.5rem;box-shadow:none}
}
/* On a phone the logo leads home, so "Home" gives its room to the other pages (review of #21) */
.nav-short{display:none}
@media(max-width:560px){header nav a:first-child{display:none}header nav a{padding:6px 8px}header nav a.on{padding:6px 11px}header .container{gap:.6rem}
  .nav-long{display:none}.nav-short{display:inline}}

/* An ad place (x-site.ad): between sections, labelled, its height held so nothing jumps */
.ad{margin:var(--s5) 0;padding-top:.7rem;border-top:1px solid var(--line)}
.ad__k{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:.7rem}
.ad__unit{display:block;min-height:250px}
.ad--preview .ad__unit{display:flex;align-items:center;justify-content:center;background:var(--panel-2);border:1px dashed var(--dim)}
.ad--preview .ad__unit span{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
@media(max-width:760px){.ad{margin:var(--s4) 0}}
/* A unit Google could not fill leaves no empty box */
.ad:has(ins[data-ad-status="unfilled"]){display:none}
/* The rails: fixed beside the content (the container is 1160 wide), only where a screen has room for
   them and is tall enough to show one whole; 160 wide, 300 once there is room for that. Never on a
   phone or a laptop, where the page stays as it is. */
.ad--rail{display:none;position:fixed;top:124px;width:160px;margin:0;z-index:1}
.ad--rail .ad__unit{display:block;width:100%;height:600px;min-height:0}
.ad--rail .ad__unit span{writing-mode:vertical-rl}
.ad--left{right:calc(50% + 596px)}
.ad--right{left:calc(50% + 596px)}
@media(min-width:1540px) and (min-height:770px){.ad--rail{display:block}}
@media(min-width:1820px) and (min-height:770px){.ad--rail{width:300px}.ad--rail .ad__unit span{writing-mode:horizontal-tb}}

/* Region tabs on a phone: three that share the width, the name alone (the slots are under the region's name). */
@media(max-width:640px){
  .tabs .container{padding:0;gap:0}
  .tab{flex:1 1 0;min-width:0;padding:.4rem .5rem;align-items:center;text-align:center;white-space:normal}
  .tab b{font-size:.92rem;line-height:1.05}
  .tab span{display:none}
}