/* 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)}

/* 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).
   The short label is drawn from data-short, so the link's text holds one label. */
@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}header nav a[data-short]::after{content:attr(data-short)}}

/* 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}
}

/* Markup for one width only: the shorter form under 480 px beside the wider one's (the review of 2026-10-01) */
@media(min-width:481px){.only-phone{display:none!important}}
@media(max-width:480px){.no-phone{display:none!important}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* A thumb's reach under 480 px: the header's links and the search are 44 px tall, the orange pill drawn at its
   old height inside the link */
@media(max-width:480px){
  header nav a{display:flex;align-items:center;min-height:44px}
  header nav a.on{background:linear-gradient(var(--sys),var(--sys)) center/100% 32px no-repeat}
  .search__toggle{min-width:44px;min-height:44px;display:grid;place-items:center}
}
/* The header's menu (`menu.js`, Lars 2026-10-06): under 480 px the pages fold behind a button and open as a panel
   under the header, as the search does; four links (Pick'em from the cut) did not fit beside the logo. Without
   the script the links stay in the header. */
.menu__toggle{display:none;background:none;border:0;color:var(--muted-2);padding:.4rem;cursor:pointer}
.menu__toggle:hover,.menu-open .menu__toggle{color:var(--text)}
@media(max-width:480px){
  html:not(.no-js) header nav{display:none}
  html:not(.no-js) .menu__toggle{display:grid;place-items:center;min-width:44px;min-height:44px;margin-left:-.6rem}
  html:not(.no-js) .logo{margin-right:auto}
  :root header.menu-open nav{display:flex;flex-direction:column;align-items:flex-start;position:fixed;left:0;right:0;top:56px;margin:0;
    padding:.4rem 12px .8rem;background:rgba(7,8,10,.97);border-bottom:1px solid var(--line);overflow:visible}
  :root header.menu-open nav a{display:flex;font-size:1rem;letter-spacing:.04em;padding:6px 12px}
  :root header.menu-open nav a.on{padding:6px 16px}
  :root header.menu-open .nav-long{display:inline}
  :root header.menu-open nav a[data-short]::after{content:none}
}
/* A level-2 panel on the rankings, team and event pages under 480 px runs to the edge, 14 px inside, its accent edge kept */
@media(max-width:480px){:is(.ranking,.team,.event) .lv2{margin-left:-1.5rem;margin-right:-1.5rem;padding-left:14px;padding-right:14px;clip-path:none}}
/* motion: menu pill. Over 480 px the orange pill is one element (menu.js) that glides to the link under the
   pointer or the focus and back to the current page; at rest it covers the current link exactly as before. */
@media(min-width:481px){
  header nav.has-pill{position:relative}
  header nav.has-pill a{position:relative;z-index:1}
  header nav.has-pill a.on{background:none;clip-path:none}
  header nav.has-pill .nav-pill{position:absolute;z-index:0;background:var(--sys);clip-path:var(--pill);pointer-events:none;transform-origin:0 0}
  header nav.pill-away a.on{color:var(--text)}
  header nav.pill-away a.pill-here{color:var(--on-accent)}
}
@media(max-width:480px){header nav .nav-pill{display:none}}
/* motion: page transitions. The page cross-fades and the opened team's logo, name and chance glide into place;
   the opt-in and the naming are inline in the layout's head, where they come in time. */
::view-transition-group(*){animation-duration:var(--d-med);animation-timing-function:var(--ease-io)}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--d-fast)}
.ad{view-transition-name:none}
/* motion: reduced. Every transition and animation ends at once; the page shows what the server rendered.
   Scripts check the same query before they animate (fcMotion in layouts/site). */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;transition-delay:0s!important;animation-duration:0s!important;animation-delay:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
/* Apart, since a browser without ::details-content would drop the whole rule above with it. */
@media(prefers-reduced-motion:reduce){*::details-content{transition-duration:0s!important;transition-delay:0s!important}}