/* SELF-HOSTED WEBFONTS. These were served from fonts.googleapis.com until
     2026-08-13, which cost the mobile homepage a 0.187 CLS and ~1.3s of
     render-blocking time: the stylesheet was a cross-origin round trip, and the
     woff2 files behind it came from a THIRD host (fonts.gstatic.com) that had no
     preconnect at all -- so the h1 painted in fallback sans-serif and the whole
     page jumped when Oswald finally swapped in. Same origin means no extra DNS,
     no TLS, no render-blocking request, and an immutable 1-year cache (_headers).

     The faces below are byte-identical to what Google's css2 endpoint served, and
     the unicode-range on each is kept VERBATIM -- that is what makes this cheap.
     A browser only downloads the subsets it actually needs to paint, so a Latin
     reader fetches ~92 KiB of the 424 KiB on disk. Do not 'simplify' by dropping
     the non-latin subsets: latin-ext carries the Polish/Turkish/Romanian names
     that are everywhere in this data, and cyrillic/greek/vietnamese back the
     native-script names the international-athletes work adds.

     Oswald and Inter are VARIABLE -- one file per subset covers 400-700, which is
     why they declare a weight RANGE. IBM Plex Mono is static, so it needs a
     separate file per weight. All three are SIL Open Font License 1.1; see
     fonts/LICENSE.md. Regenerate with scripts/fetch-webfonts.mjs, never by hand. */

  @font-face{font-family:'Oswald';font-style:normal;font-weight:400 700;font-display:swap;
    src:url(/fonts/oswald-cyrillic-ext.woff2) format('woff2');
    unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
  @font-face{font-family:'Oswald';font-style:normal;font-weight:400 700;font-display:swap;
    src:url(/fonts/oswald-cyrillic.woff2) format('woff2');
    unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
  @font-face{font-family:'Oswald';font-style:normal;font-weight:400 700;font-display:swap;
    src:url(/fonts/oswald-latin-ext.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:'Oswald';font-style:normal;font-weight:400 700;font-display:swap;
    src:url(/fonts/oswald-latin.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:'Oswald';font-style:normal;font-weight:400 700;font-display:swap;
    src:url(/fonts/oswald-vietnamese.woff2) format('woff2');
    unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}

  @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
    src:url(/fonts/inter-cyrillic-ext.woff2) format('woff2');
    unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
  @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
    src:url(/fonts/inter-cyrillic.woff2) format('woff2');
    unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
  @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
    src:url(/fonts/inter-greek-ext.woff2) format('woff2');
    unicode-range:U+1F00-1FFF;}
  @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
    src:url(/fonts/inter-greek.woff2) format('woff2');
    unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
  @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
    src:url(/fonts/inter-latin-ext.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:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
    src:url(/fonts/inter-latin.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:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
    src:url(/fonts/inter-vietnamese.woff2) format('woff2');
    unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}

  @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
    src:url(/fonts/ibm-plex-mono-500-cyrillic-ext.woff2) format('woff2');
    unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
  @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
    src:url(/fonts/ibm-plex-mono-500-cyrillic.woff2) format('woff2');
    unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
  @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
    src:url(/fonts/ibm-plex-mono-500-latin-ext.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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
    src:url(/fonts/ibm-plex-mono-500-latin.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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
    src:url(/fonts/ibm-plex-mono-500-vietnamese.woff2) format('woff2');
    unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
  @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
    src:url(/fonts/ibm-plex-mono-600-cyrillic-ext.woff2) format('woff2');
    unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
  @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
    src:url(/fonts/ibm-plex-mono-600-cyrillic.woff2) format('woff2');
    unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
  @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
    src:url(/fonts/ibm-plex-mono-600-latin-ext.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:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
    src:url(/fonts/ibm-plex-mono-600-latin.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:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
    src:url(/fonts/ibm-plex-mono-600-vietnamese.woff2) format('woff2');
    unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}

  :root{
    --ink:#14120f;
    --surface:#1d1a16;
    --surface-raised:#252019;
    --rule:#39332a;
    --gold:#efa920;
    --gold-bright:#ffc247;
    --green:#3fbf7f;
    --amber:#e2a33d;
    --orange:#e07b39;
    /* Was #e0553e, which failed AA at 4.09:1 where it is most used -- the downward
       finals-movement figures on /scorecards, where it sits on a RED-TINTED row
       (rgba red over --surface composites to #31201a), so red-on-red was the worst
       case rather than red on the page background. #e46c58 is the same hue and
       saturation (9deg / 72%) 6% lighter: 4.87 on that tint, 5.07 on the lightest
       flat surface. Still unmistakably the "down" colour next to --green. */
    --red:#e46c58;
    --text:#ede6d8;
    --text-dim:#a29a89;
    /* Was #736b5c until 2026-08-13, which was the ONLY colour on the site failing
       WCAG AA. Walking the live DOM and computing every text-node's ratio against
       its effective background, this one token accounted for 100% of the failures
       and nothing else did -- 1,385 nodes on the homepage, 9,005 on /contenders.
       Lighthouse names only four selectors because it samples; don't fix those
       four. It ran 3.55:1 on --ink, 3.29 on --surface, 3.07 on --surface-raised,
       against the 4.5 small-text minimum. #948a79 is the same hue and saturation
       (39deg / 11%) lifted from 41% to 53% lightness, giving 5.49 / 5.09 / 4.75 --
       chosen over the minimal passing value #908674 because that one lands on
       exactly 4.50 against --surface-raised, with no margin for a rounding
       difference. Still clearly below --text-dim, so the hierarchy holds. */
    --text-faint:#948a79;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    background:var(--ink);
    color:var(--text);
    font-family:'Inter',sans-serif;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .display{font-family:'Oswald',sans-serif; text-transform:uppercase;}
  .mono{font-family:'IBM Plex Mono',monospace;}

  /* Available to assistive tech, invisible on screen. Use SPARINGLY and only where
     the visual design already conveys the thing some other way -- the Matchup Lab's
     top-level heading is the one case: its title is "A vs B", which the page states
     through a three-part tape layout (name / VS / name) rather than any single
     element, and a heading may only contain phrasing content so it cannot legally
     wrap that. Not for hiding text that has no visual equivalent. clip-path rather
     than display:none, because display:none hides it from screen readers too, which
     would defeat the whole point. */
  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
  }

  a{color:inherit;}

  .wrap{max-width:1180px; margin:0 auto; padding:0 28px;}

  /* MASTHEAD */
  header.masthead{
    border-bottom:1px solid var(--rule);
    padding:22px 0;
    background:linear-gradient(180deg, rgba(201,162,75,0.05), transparent);
  }
  .masthead-row{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;}
  .wordmark{
    font-family:'Oswald',sans-serif;
    font-size:28px;
    font-weight:700;
    letter-spacing:0.5px;
    text-transform:uppercase;
    color:var(--text);
    display:inline-flex;
    align-items:center;
  }
  /* Brand mark before the wordmark. Uses /logo-mark.png (gold mark, transparent
     background). If the asset is absent it simply renders nothing (no broken img,
     since it's a CSS background). Spacing lives on the mark's margin, NOT a flex
     gap -- a gap would also push the "IQ" span away from "Callout". */
  .wordmark::before{
    content:"";
    flex:0 0 auto;
    width:1.6em; height:1.6em;
    margin-right:10px;
    background:url("/logo-mark.png") center/contain no-repeat;
  }
  .wordmark span{color:var(--gold);}
  /* Small "beta" tag next to the wordmark. Scoped as .wordmark .beta-badge so it
     out-specifies ".wordmark span" (which would otherwise paint it gold and 28px).
     Margin-left, not a flex gap -- a gap would also split "Callout" from "IQ". */
  .wordmark .beta-badge{
    margin-left:9px;
    align-self:center;
    font-size:10px;
    font-weight:600;
    letter-spacing:0.1em;
    line-height:1;
    color:var(--gold);
    border:1px solid var(--gold);
    border-radius:4px;
    padding:2px 5px;
  }
  .tagline{
    color:var(--text-dim);
    font-size:13px;
    letter-spacing:0.04em;
    margin-top:2px;
  }
  .masthead-meta{
    text-align:right;
    font-size:12px;
    color:var(--text-faint);
    letter-spacing:0.03em;
  }
  .report-inline-link{font-size:12px; color:var(--text-faint); text-decoration:none; white-space:nowrap;}
  .report-inline-link:hover{color:var(--gold-bright);}
  .page-report-row{margin:22px 0 4px; text-align:right;}
  .footer-report a{color:var(--text-dim);}
  .footer-report a:hover{color:var(--gold-bright);}

  /* SITE NAV */
  .site-nav{
    background:var(--surface);
    border-bottom:1px solid var(--rule);
  }
  .site-nav-inner{
    display:flex; gap:22px; align-items:center; justify-content:space-between; flex-wrap:wrap;
    /* vertical only -- horizontal 28px comes from .wrap, so the nav aligns with
       the masthead wordmark and page content instead of sitting ~28px left. */
    padding-top:10px; padding-bottom:10px;
  }
  .site-nav-links{display:flex; gap:22px; align-items:center; flex-wrap:wrap;}
  .site-nav a{
    font-family:'Oswald',sans-serif;
    text-transform:uppercase;
    letter-spacing:0.05em;
    font-size:12px;
    color:var(--text-dim);
    text-decoration:none;
  }
  .site-nav a:hover{color:var(--gold-bright);}
  .site-nav a.active{color:var(--gold-bright);}
  /* Global search box in the nav. Submits to /search (works with no JS). */
  .nav-search{margin:0;}
  .nav-search input{
    font-family:'Inter',sans-serif; font-size:12.5px; color:var(--text);
    background:var(--surface-raised); border:1px solid var(--rule); border-radius:20px;
    padding:6px 14px; width:210px; max-width:52vw;
    transition:border-color 0.15s ease, width 0.15s ease;
  }
  .nav-search input::placeholder{color:var(--text-faint);}
  .nav-search input:focus{outline:none; border-color:var(--gold); width:250px;}

  /* ATHLETE DIRECTORY (/athletes) */
  .dir-toolbar{
    position:sticky; top:0; z-index:5;
    background:var(--ink); border-bottom:1px solid var(--rule);
    padding:14px 0; margin-bottom:2px;
  }
  .dir-controls{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
  .dir-controls input[type="search"], .dir-controls select{
    font-family:'Inter',sans-serif; font-size:13px; color:var(--text);
    background:var(--surface-raised); border:1px solid var(--rule); border-radius:6px;
    padding:8px 10px;
  }
  .dir-controls input[type="search"]{flex:1; min-width:200px;}
  .dir-controls input[type="search"]::placeholder{color:var(--text-faint);}
  .dir-controls select{cursor:pointer;}
  .dir-controls input:focus, .dir-controls select:focus{outline:none; border-color:var(--gold);}
  .dir-count{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-faint); white-space:nowrap;}
  .dir-count b{color:var(--gold-bright);}
  .dir-list{
    background:var(--surface); border:1px solid var(--rule); border-radius:6px; overflow:hidden;
    margin-top:12px;
  }
  .dir-row{
    display:flex; align-items:center; gap:12px;
    padding:7px 16px; border-bottom:1px solid var(--rule);
  }
  /* An author display rule beats the UA stylesheet's [hidden] rule, so a row held
     back by the per-group cap would stay on screen without this. Same trap as the
     scorecards explorer and the contest index. */
  .dir-row[hidden], .dir-group[hidden]{display:none;}
  .dir-more{
    font-size:12px; color:var(--text-faint); padding:9px 4px 2px;
  }
  .dir-more[hidden]{display:none;}
  .dir-row:last-child{border-bottom:none;}
  .dir-row:hover{background:rgba(255,255,255,0.02);}
  .dir-main{flex:1; min-width:0;}
  /* Name-with-flag-and-country block, unified 2026-08-30 with the same .n/.c
     shape used by .score-name (homepage) and .res-name (contest full field) --
     the name on its own line, the flag+country in small faint text directly
     beneath it, rather than the country pushed off to the far side of the row. */
  .dir-name{flex:1; min-width:0;}
  .dir-name .n{font-size:14px; font-weight:600; color:var(--text); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .dir-name .n a{text-decoration:none; color:var(--text);}
  .dir-name .n a:hover{color:var(--gold-bright); text-decoration:underline;}
  .dir-sub{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:4px;}
  .dir-name .c{font-size:11px; color:var(--text-faint); font-family:'IBM Plex Mono',monospace;}
  .dir-divchip{
    font-family:'Oswald',sans-serif; font-size:9.5px; letter-spacing:0.05em; text-transform:uppercase;
    color:var(--text-dim); border:1px solid var(--rule); border-radius:8px; padding:1px 7px;
    /* Merged in from a second .dir-divchip rule that used to sit 17 lines up
       (2026-08-25). The two never overlapped on a property, so this is the same
       computed style in one place instead of two. */
    flex-shrink:0; cursor:help;
  }
  .dir-right{display:flex; align-items:center; gap:12px; flex-shrink:0;}
  .dir-rank{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-dim); white-space:nowrap;}
  .dir-rank b{color:var(--gold-bright);}
  .dir-status{
    font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:0.05em; text-transform:uppercase;
    white-space:nowrap; border-radius:10px; padding:3px 9px; border:1px solid transparent;
  }
  .dir-status.qualified{color:var(--green); border-color:rgba(63,191,127,0.45); background:rgba(63,191,127,0.12);}
  /* Inside the cut but not final: green family (they're winning), dashed and
     unfilled (it can still be taken away). Solid green is reserved for locked in. */
  .dir-status.inside-cut{color:var(--green); border-color:rgba(63,191,127,0.5); border-style:dashed; background:transparent;}
  .dir-status.ranked{color:var(--amber); border-color:rgba(226,163,61,0.45); background:rgba(226,163,61,0.12);}
  .dir-status.active{color:var(--text-dim); border-color:var(--rule); background:rgba(162,154,137,0.1);}
  .dir-status.champion{color:var(--gold-bright); border-color:rgba(201,162,75,0.45); background:rgba(201,162,75,0.12);}
  .dir-status.pending{color:var(--amber); border-color:rgba(226,163,61,0.45); background:rgba(226,163,61,0.12);}
  .dir-status.memoriam{color:var(--text-dim); border-color:rgba(255,255,255,0.18); background:rgba(255,255,255,0.05);}
  .dir-status.retired{color:var(--text-dim); border-color:var(--rule); background:rgba(255,255,255,0.03);}
  .dir-status.tracked{color:var(--text-faint); border-color:var(--rule); background:transparent;}
  /* Same slate-blue as .tier-badge.amateur on /contests -- deliberately not gold
     or green, which are this page's PRO-qualification colours; an amateur row
     borrowing either would misread as a 2026 board standing it doesn't have. */
  .dir-status.amateur{color:#8fb4d9; border-color:rgba(143,180,217,0.42); background:rgba(143,180,217,0.11);}
  .dir-empty{padding:30px 16px; text-align:center; color:var(--text-faint); font-style:italic; font-size:13px;}
  .dir-divpills{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
  /* The pills are anchors, not buttons (2026-08-12): each one is a real division
     URL the server renders, so a crawler follows them and they work with JS off --
     which is why display and text-decoration are set here at all. Those two
     arrived as a second .dir-divpill rule below this one and were merged in
     2026-08-25; they never overlapped with the block, so nothing changed. */
  .dir-divpill{
    font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:0.04em; text-transform:uppercase;
    color:var(--text-dim); background:var(--surface-raised); border:1px solid var(--rule); border-radius:14px;
    padding:5px 12px; cursor:pointer;
    display:inline-block; text-decoration:none;
  }
  .dir-divpill:hover{border-color:var(--gold);}
  .dir-divpill.active{color:var(--ink); background:var(--gold-bright); border-color:var(--gold-bright);}
  /* Submit button for the filter form. Hidden by DIR_SCRIPT when JS can submit the
     selects on change, so it only ever appears for readers who need it. */
  .dir-apply{
    font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:0.04em; text-transform:uppercase;
    color:var(--ink); background:var(--gold-bright); border:1px solid var(--gold-bright);
    border-radius:6px; padding:8px 14px; cursor:pointer;
  }
  .dir-apply[hidden]{display:none;}
  .dir-more a{color:var(--gold-bright); text-decoration:none;}
  .dir-more a:hover{text-decoration:underline;}
  .dir-pager{
    display:flex; flex-wrap:wrap; gap:6px; align-items:center;
    padding:10px 2px; font-family:'IBM Plex Mono',monospace; font-size:12px;
  }
  .dir-pager a, .dir-pager .dir-pg-cur{
    border:1px solid var(--rule); border-radius:6px; padding:5px 10px;
    color:var(--text-dim); text-decoration:none; min-width:32px; text-align:center;
  }
  .dir-pager a:hover{border-color:var(--gold); color:var(--gold-bright);}
  .dir-pager .dir-pg-cur{color:var(--ink); background:var(--gold-bright); border-color:var(--gold-bright);}
  .dir-pager .dir-pg-gap{color:var(--text-faint); padding:0 2px;}
  .dir-pager .dir-pg-step{color:var(--text-faint);}
  .dir-empty a{color:var(--gold-bright);}
  /* The directory's two real levels -- gender supergroup, then division -- are
     headings rather than blocks, so /athletes has the h1 > h2 > h3 outline its
     own layout has always implied. Explicit weights for the same reason as
     .ci-section-head: both rules were written against a block's normal weight. */
  .dir-supergroup-head{
    font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--text-faint); margin:28px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--rule);
    font-weight:400;
  }
  .dir-supergroup:first-child .dir-supergroup-head{margin-top:12px;}
  .dir-group{margin-bottom:16px;}
  .dir-group-head{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:0.03em;
    color:var(--text); padding:8px 2px; font-weight:400; margin:0;
  }
  .dir-group-count{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-faint); font-weight:400;}
  /* The name+country block (already two lines, see .dir-name .n/.c above) takes
     the full first row on a phone; rank/status wrap to their own line below it
     via .dir-right's margin-left:auto. The old rule stacked every field
     (name, country, status) as separate lines, which cost 92px where this
     costs far less. */
  @media (max-width:560px){
    .dir-row{flex-wrap:wrap; align-items:baseline; gap:4px 10px; padding:9px 14px;}
    .dir-name{flex:1 1 100%;}
    .dir-right{margin-left:auto; gap:8px;}
  }

  /* SEARCH RESULTS (/search) */
  .search-group{margin-top:26px;}
  /* "Athletes" / "Contests" / "Divisions" / "Did you mean" -- real section
     headings, so /search had an h1 and nothing under it. Explicit weight and a
     pinned top margin for the same reason as .ci-section-head: the rule was
     written against a block's defaults. */
  .search-group-head{
    font-family:'Oswald',sans-serif; font-size:14px; text-transform:uppercase; letter-spacing:0.06em;
    color:var(--gold-bright); margin:0 0 10px; font-weight:400;
    display:flex; align-items:baseline; gap:10px;
  }
  .search-group-head .count{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-faint); letter-spacing:0;}
  .search-hit{
    display:flex; align-items:baseline; gap:12px;
    padding:11px 16px; border-bottom:1px solid var(--rule);
  }
  .search-hit:last-child{border-bottom:none;}
  .search-hit .h-main{flex:1; min-width:0;}
  .search-hit .h-name{font-size:14px; font-weight:600;}
  .search-hit .h-name a{text-decoration:none; color:var(--text);}
  .search-hit .h-name a:hover{color:var(--gold-bright); text-decoration:underline;}
  .search-hit .h-native{font-size:12.5px; color:var(--text-dim); margin-top:1px;}
  .search-hit .h-meta{font-size:11.5px; color:var(--text-faint); margin-top:2px;}

  /* PROSE (long-form policy/about pages) */
  .prose{max-width:680px; font-size:15px; line-height:1.75; color:var(--text-dim);}
  .prose p{margin-bottom:18px;}
  .prose ul{margin:0 0 18px; padding-left:22px;}
  .prose li{margin-bottom:6px;}
  /* /sources was seven unheaded paragraphs under one h1 -- the page every footer
     on the site links to, and the one carrying the non-affiliation and trademark
     language, read by a crawler as a single undifferentiated block. The legal
     prose is untouched; these only name the sections it was already organised
     into. Sized between the h1 and body text so the page gains structure without
     gaining visual weight. */
  .prose h2{
    font-family:'Oswald',sans-serif; font-size:17px; text-transform:uppercase;
    letter-spacing:0.05em; font-weight:600; color:var(--text);
    margin:30px 0 10px;
  }
  .prose code{
    font-family:'IBM Plex Mono',monospace; font-size:0.87em;
    background:rgba(255,255,255,0.05); border:1px solid var(--rule);
    border-radius:3px; padding:1px 5px; color:var(--text);
  }
  /* THE AMATEUR TIER ENTRY POINT on a division page. Given a cool, non-gold
     accent so it reads as a route OUT of the page rather than another board on
     it -- the same blue as the Amateur (NPC) badge on /athletes, so one tier has
     one colour everywhere. Deliberately quiet: the pro standings are the page. */
  .card.amateur-tier{border-color:rgba(143,180,217,0.32);}
  .amateur-tier .card-head{color:#8fb4d9;}
  .amateur-tier .tape-stat .n{color:#8fb4d9;}
  .amateur-tier a.tape-stat:hover{border-color:rgba(143,180,217,0.5);}
  /* CORRECTIONS (/corrections). A reconciliation pass opens on demand: the notes
     average ~1,800 characters, so rendering 37 of them expanded would bury the
     list they belong to. Amber marks a pass that FOUND something, which is the
     one a reader came for. */
  .corr-passes{margin:0 0 6px;}
  .corr-pass{border-top:1px solid var(--rule); font-size:13.5px;}
  .corr-pass:last-of-type{border-bottom:1px solid var(--rule);}
  .corr-pass summary{
    display:flex; align-items:baseline; gap:12px; padding:9px 2px; cursor:pointer;
    list-style:none; color:var(--text-dim);
  }
  .corr-pass summary::-webkit-details-marker{display:none;}
  .corr-pass summary::after{content:"\25BE"; font-size:9px; margin-left:auto; color:var(--text-faint); transition:transform .15s ease;}
  .corr-pass[open] summary::after{transform:rotate(180deg);}
  .corr-pass summary:hover{color:var(--text);}
  .corr-pass summary:focus-visible{outline:2px solid var(--gold); outline-offset:-2px;}
  .corr-date{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text); flex:0 0 auto; min-width:88px;}
  .corr-routine{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.05em; font-size:11.5px; color:var(--text-faint); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .corr-verdict{font-size:12.5px; color:var(--green); flex:0 0 auto;}
  .corr-pass.found .corr-verdict{color:var(--amber);}
  .corr-pass.blocked .corr-verdict{color:var(--amber); font-weight:600;}
  .corr-body{padding:2px 2px 14px;}
  .corr-pre{
    margin:0; white-space:pre-wrap; word-wrap:break-word; font-size:12.5px; line-height:1.65;
    color:var(--text-dim); background:var(--surface); border:1px solid var(--rule);
    border-radius:4px; padding:12px 14px; max-height:340px; overflow:auto;
  }
  .corr-empty{color:var(--text-faint); font-size:13.5px;}
  .corr-list{list-style:none; margin:0 0 6px; padding:0;}
  .corr-merge{display:flex; align-items:baseline; gap:10px; padding:7px 2px; border-top:1px solid var(--rule); font-size:13.5px; flex-wrap:wrap;}
  .corr-merge:last-child{border-bottom:1px solid var(--rule);}
  .corr-mdate{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text-faint); flex:0 0 auto; min-width:88px;}
  /* Both sides stack name-over-slug identically. The slug is the load-bearing
     half: a reversed-name-order merge shows the SAME display name on each side
     and only the slug reveals that anything moved. */
  .corr-from, .corr-to{display:flex; flex-direction:column; gap:1px; min-width:0;}
  .corr-dead{color:var(--text-dim); text-decoration:line-through; text-decoration-color:rgba(226,163,61,.6);}
  .corr-dead:hover{color:var(--text);}
  .corr-from code, .corr-to code{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--text-faint); background:transparent; border:0; padding:0;}
  .corr-arrow{color:var(--text-faint); flex:0 0 auto; align-self:center;}
  @media(max-width:640px){
    .corr-pass summary{flex-wrap:wrap; gap:4px 10px;}
    .corr-routine{flex:1 1 100%; white-space:normal;}
    .corr-merge{gap:4px 10px;}
    .corr-arrow{display:none;}
    .corr-from, .corr-to{flex:1 1 100%; margin-left:98px;}
    .corr-from{margin-left:0;}
  }
  /* WATCHER LIVENESS (/coverage). Green is the quiet default and amber is the
     exception, matching the rest of the site's vocabulary -- deliberately NOT
     red, because a late watcher is a staleness warning about the data, not an
     outage of the site the reader is looking at. */
  .wx-list{list-style:none; margin:0; padding:0;}
  .wx-row{display:flex; align-items:baseline; gap:10px; padding:6px 0; border-top:1px solid var(--rule); font-size:13.5px; line-height:1.55;}
  .wx-row:first-child{border-top:0;}
  .wx-dot{width:7px; height:7px; border-radius:50%; flex:0 0 auto; background:var(--green); box-shadow:0 0 6px rgba(63,191,127,0.6);}
  .wx-row.stale .wx-dot{background:var(--amber); box-shadow:0 0 6px rgba(226,163,61,0.55);}
  .wx-name{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.05em; font-size:12px; color:var(--text); flex:0 0 auto; min-width:118px;}
  .wx-detail{color:var(--text-dim); min-width:0;}
  .wx-row.stale .wx-detail{color:var(--amber);}
  .wx-warn{color:var(--amber);}
  .wx-note{margin:8px 0 0; font-size:12.5px; color:var(--text-faint);}
  .wx-note.stale{color:var(--amber);}
  @media(max-width:640px){
    .wx-row{flex-wrap:wrap;}
    .wx-detail{flex:1 1 100%; margin-left:17px;}
  }
  /* API DOCS (/api). One endpoint per bordered block, so a reader scanning for
     the one they need isn't parsing a wall of prose for a path. */
  .api-endpoint{
    border:1px solid var(--rule); border-radius:4px; background:var(--surface);
    padding:14px 16px; margin:0 0 14px;
  }
  .api-ep-title{
    font-family:'Oswald',sans-serif; font-size:14px; text-transform:uppercase;
    letter-spacing:0.06em; font-weight:600; color:var(--gold-bright); margin:0 0 6px;
  }
  .api-ep-path{margin:0 0 8px; font-size:14px;}
  .api-verb{
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.08em;
    color:var(--green); border:1px solid rgba(63,191,127,0.45); border-radius:3px;
    padding:2px 6px; margin-right:6px; vertical-align:1px;
  }
  .api-ep-blurb{margin:0 0 10px; font-size:14px; line-height:1.6;}
  .api-params{border-collapse:collapse; width:100%; margin:0 0 10px; font-size:13.5px;}
  .api-params th{
    text-align:left; vertical-align:top; white-space:nowrap; font-weight:400;
    padding:4px 14px 4px 0; width:1%;
  }
  .api-params td{padding:4px 0; line-height:1.55;}
  .api-try{margin:0; font-size:13px;}
  .api-try code{font-size:11.5px; color:var(--text-faint); background:transparent; border:0; padding:0;}
  .api-note{margin:0 0 16px;}
  .api-note-title{
    font-family:'Oswald',sans-serif; font-size:13.5px; text-transform:uppercase;
    letter-spacing:0.05em; font-weight:600; color:var(--text); margin:0 0 4px;
  }
  .api-note p{margin:0; font-size:14px; line-height:1.65;}
  .api-pre{
    background:var(--surface); border:1px solid var(--rule); border-radius:4px;
    padding:12px 14px; overflow-x:auto; font-size:12.5px; line-height:1.6; margin:0 0 18px;
  }
  .api-pre code{background:transparent; border:0; padding:0; font-size:inherit; color:var(--text-dim);}
  @media(max-width:640px){
    .api-params th{white-space:normal; width:auto;}
    .api-try code{display:block; margin-top:4px;}
  }
  .prose a{color:var(--gold-bright); text-decoration:underline;}
  .prose a:hover{color:var(--gold);}

  /* COUNTDOWN STRIP */
  .countdown{
    background:var(--surface);
    border-bottom:1px solid var(--rule);
  }
  .countdown-inner{
    display:flex; align-items:center; justify-content:space-between;
    /* vertical only -- keep .wrap's horizontal 28px so it aligns with the rest. */
    padding-top:14px; padding-bottom:14px; flex-wrap:wrap; gap:10px;
  }
  .countdown-label{
    font-size:12px; letter-spacing:0.08em; color:var(--text-dim); text-transform:uppercase;
  }
  .countdown-num{
    font-family:'IBM Plex Mono',monospace;
    color:var(--gold-bright);
    font-weight:600;
    font-size:15px;
  }
  .countdown-note{
    font-size:12.5px;
    color:var(--text-faint);
    max-width:520px;
  }
  /* HOMEPAGE HERO -- the site's leading promise + three doors into its
     strongest surfaces. Sits between the nav and the countdown; the wordmark
     tagline is dropped on the homepage so the promise isn't stated twice. */
  .home-hero{
    padding:34px 0 30px;
    background:linear-gradient(180deg, rgba(239,169,32,0.055), transparent);
    border-bottom:1px solid var(--rule);
  }
  .home-hero h1{
    font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase;
    font-size:40px; line-height:1.02; letter-spacing:0.01em; color:var(--text);
  }
  .home-hero h1 .accent{color:var(--gold);}
  .home-hero .hero-sub{
    margin-top:12px; font-size:15px; line-height:1.55; color:var(--text-dim); max-width:620px;
  }
  .home-doors{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap;}
  .home-door{
    display:inline-flex; align-items:center; gap:9px;
    border:1px solid var(--rule); background:var(--surface-raised); border-radius:8px;
    padding:11px 16px; font-family:'Oswald',sans-serif; text-transform:uppercase;
    letter-spacing:0.05em; font-size:12.5px; color:var(--text); text-decoration:none;
    transition:border-color 0.15s ease, color 0.15s ease;
  }
  .home-door:hover{border-color:var(--gold); color:var(--gold-bright);}
  .home-door .arr{color:var(--gold);}
  /* The lead door -- used for the Olympia between the qualifying window closing
     and the show itself, so the season's main event outranks the three evergreen
     doors beside it. Gold border rather than a gold fill: the hero already
     carries one gold accent, and a solid block here competed with it. */
  .home-door-lead{border-color:var(--gold); color:var(--gold-bright);}
  .home-door-lead:hover{background:var(--surface-raised); border-color:var(--gold-bright);}
  @media (max-width:640px){
    .home-hero{padding:26px 0 24px;}
    .home-hero h1{font-size:29px;}
    .home-hero .hero-sub{font-size:14px;}
    .home-door{flex:1 1 auto; justify-content:center;}
  }
  /* SCORECARD INTELLIGENCE (/scorecards) */
  .sci-hero{padding:26px 0 8px; max-width:760px;}
  .sci-hero h1{font-family:'Oswald',sans-serif; font-size:30px; letter-spacing:0.02em; text-transform:uppercase; color:var(--text);}
  .sci-hero p{font-size:13.5px; color:var(--text-dim); line-height:1.6; margin-top:10px;}
  .sci-hero b{color:var(--text);}
  .sci-section{margin-top:26px;}
  .sci-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .sci-head h2{font-family:'Oswald',sans-serif; font-size:16px; letter-spacing:0.05em; text-transform:uppercase; color:var(--gold-bright);}
  .sci-blurb{font-size:12px; color:var(--text-faint); line-height:1.5; margin:6px 0 10px; max-width:760px;}
  .sci-list{padding:0;}
  .sci-row{
    display:flex; align-items:center; gap:14px;
    padding:11px 16px; border-bottom:1px solid var(--rule);
  }
  .sci-row:last-child{border-bottom:none;}
  .sci-margin{
    font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600;
    white-space:nowrap; border-radius:10px; padding:3px 9px; flex-shrink:0;
    min-width:82px; text-align:center;
  }
  /* A tie on the card is the loudest thing this page can say -- the judges could
     not separate them and a tiebreak decided a title. */
  .sci-margin.tie{color:var(--ink); background:var(--gold-bright); border:1px solid var(--gold-bright);}
  .sci-margin.knife{color:var(--orange); border:1px solid rgba(224,123,57,0.5); background:rgba(224,123,57,0.1);}
  .sci-margin.up{color:var(--green); border:1px solid rgba(63,191,127,0.45); background:rgba(63,191,127,0.1);}
  .sci-margin.down{color:var(--red); border:1px solid rgba(224,85,62,0.45); background:rgba(224,85,62,0.1);}
  .sci-headline{font-size:13.5px; color:var(--text); font-weight:600; line-height:1.4;}
  .sci-meta{font-size:11.5px; color:var(--text-faint); margin-top:3px; line-height:1.5;}
  .sci-note{margin-top:28px;}
  .sci-note .card-body p{margin-bottom:10px;}
  .sci-note .card-body p:last-child{margin-bottom:0;}
  .sci-note b{color:var(--text);}
  @media (max-width:640px){
    .sci-row{align-items:flex-start;}
    .sci-margin{min-width:70px; font-size:10px;}
  }

  .last-updated{
    font-size:11.5px;
    color:var(--text-faint);
    padding:8px 0;
  }

  /* TABS */
  /* Twelve divisions do not fit on one 1124px row -- they need ~1487px -- so the
     strip WRAPS rather than scrolling sideways. It used to be a single overflow-x
     row, which meant the last two tabs (Women's Physique, Fit Model, the newest
     go-lives) sat off-screen behind a scrollbar on every desktop. Nothing here
     caps the row count: a 13th division just re-flows.
     The rule under the strip moves from the container onto each tab, plus a
     growing ::after filler that finishes the last row -- otherwise only the final
     row would carry a baseline and an active tab on row 1 would underline into
     empty space. gap is 0 so those per-tab rules join into a continuous line;
     the 20px side padding still separates the labels. */
  .tabs{
    display:flex; flex-wrap:wrap; margin:32px 0 0;
  }
  .tabs::after{
    content:''; flex:1 1 auto;
    border-bottom:1px solid var(--rule);
  }
  .legend-note{
    color:var(--text-faint);
    font-size:11.5px;
    letter-spacing:0.02em;
    margin-top:10px;
  }
  .tab{
    font-family:'Oswald',sans-serif;
    text-transform:uppercase;
    letter-spacing:0.04em;
    font-size:14px;
    font-weight:500;
    padding:12px 20px;
    background:transparent;
    border:none;
    color:var(--text-faint);
    cursor:pointer;
    position:relative;
    transition:color 0.15s ease;
    flex-shrink:0;
    white-space:nowrap;
    border-bottom:1px solid var(--rule);
  }
  /* Narrower viewports wrap into more rows, so the tabs tighten to keep the strip
     from crowding out the panel below. Vertical padding deliberately does NOT
     shrink -- it is what keeps each tab a ~43px touch target on a phone. */
  @media (max-width:900px){
    .tab{font-size:13px; padding:12px 13px;}
  }
  @media (max-width:560px){
    .tab{font-size:12px; padding:12px 9px; letter-spacing:0.02em;}
  }
  .tab:hover{color:var(--text-dim);}
  .tab.active{color:var(--gold-bright);}
  .tab.active::after{
    content:'';
    position:absolute; left:0; right:0; bottom:-1px; height:2px;
    background:var(--gold);
  }
  .tab:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}

  .division-panel{display:none; padding:32px 0 60px;}
  .division-panel.active{display:block;}

  .panel-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    flex-wrap:wrap; gap:12px; margin-bottom:22px;
  }
  /* The division name heading each homepage panel. It was a plain block, so the
     site's most-visited page went h1 straight to the h3s inside its cards with
     nothing between them -- a skipped level, not merely a missing one. Weight and
     size were already explicit here; only the margin needs pinning, since a
     heading element brings its own and a block does not. */
  .panel-title{
    font-family:'Oswald',sans-serif;
    font-size:26px; font-weight:600; text-transform:uppercase; letter-spacing:0.02em;
    margin:0;
  }
  .panel-sub{color:var(--text-dim); font-size:13px; margin-top:4px;}
  .stat-pill{
    font-family:'IBM Plex Mono',monospace;
    font-size:12.5px;
    color:var(--text-dim);
    border:1px solid var(--rule);
    border-radius:20px;
    padding:6px 14px;
    display:flex; gap:16px;
  }
  .stat-pill b{color:var(--gold-bright); font-weight:600;}

  /* INSIGHT CALLOUT */
  .insight{
    background:var(--surface);
    border-left:3px solid var(--gold);
    padding:16px 20px;
    margin-bottom:30px;
    font-size:14px;
    color:var(--text-dim);
    border-radius:2px;
  }
  .insight b{color:var(--text);}
  .insight .eyebrow{
    font-family:'Oswald',sans-serif;
    color:var(--gold-bright);
    font-size:11.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    display:block;
    margin-bottom:6px;
  }

  /* SECTION GRID */
  .section-grid{
    display:grid;
    grid-template-columns:1.1fr 1.4fr;
    gap:24px;
    align-items:start;
  }
  @media (max-width:820px){
    .section-grid{grid-template-columns:1fr;}
  }

  .card{
    background:var(--surface);
    border:1px solid var(--rule);
    border-radius:4px;
    overflow:hidden;
    margin-bottom:20px;
  }
  .card-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px;
    border-bottom:1px solid var(--rule);
    background:var(--surface-raised);
  }
  /* h2 shares h3's styling here on purpose. A contest page's division blocks were
     plain spans inside .card-head, so a 294KB page shipped ONE h1 and zero h2/h3 --
     no section structure for a crawler to read at all (measured on
     /contests/mr-olympia, 2026-09-18). They are real headings now; this rule keeps
     them pixel-identical to what was there before, so the fix is structural only.
     No literal tag names in this comment: it ships inside a <style> block. */
  .card-head h3, .card-head h2{
    font-family:'Oswald',sans-serif;
    font-size:13.5px;
    text-transform:uppercase;
    letter-spacing:0.07em;
    font-weight:600;
  }
  /* The same structural gap on the other side of the site. An athlete profile
     shipped ONE h1 and zero section headings -- every card-head held bare text,
     so a crawler read a whole career as one undifferentiated block (measured on
     /athletes/samson-dauda, 2026-09-18: eight card-heads, eight runs of plain
     text, no heading among them). Those card-heads ARE the heading now rather
     than gaining a nested one: nesting would inherit the rule above, which is
     sized for a contest page's division strip and would restyle every profile
     on the site. Inheriting font-size and weight holds the type exactly where
     it was -- including for a reader whose browser default is not 16px, which a
     hardcoded size would have quietly overridden -- so the fix is structural
     only and nothing moves. */
  h2.card-head{font-size:inherit; font-weight:inherit;}
  .dot{width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:8px;}
  .dot.green{background:var(--green); box-shadow:0 0 6px rgba(63,191,127,0.6);}
  .dot.amber{background:var(--amber); box-shadow:0 0 6px rgba(226,163,61,0.5);}
  .card-count{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-faint);}
  .confidence-badge{
    display:inline-block;
    font-family:'IBM Plex Mono',monospace;
    font-size:9px;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
    line-height:1;
    padding:6px 12px;
    border-radius:10px;
    margin:0 8px;
    vertical-align:middle;
  }
  .confidence-badge.official{background:rgba(201,162,75,0.12); color:var(--gold-bright); border:1px solid rgba(201,162,75,0.4);}
  .confidence-badge.calculated{background:rgba(162,154,137,0.12); color:var(--text-dim); border:1px solid var(--rule);}
  /* Scores that came off a third-party reproduction rather than an official card.
     Dashed, so it reads as a weaker claim than the solid gold "official" badge
     sitting in the same slot on other shows -- the distinction is the point. */
  .confidence-badge.secondary{background:rgba(162,154,137,0.10); color:var(--text-dim); border:1px dashed var(--rule);}
  .confidence-badge.manual{background:rgba(226,163,61,0.12); color:var(--amber); border:1px solid rgba(226,163,61,0.4);}
  .confidence-badge.scenario{background:rgba(226,163,61,0.18); color:var(--amber); border:1px solid var(--amber); font-weight:700;}
  .simulate-toggle{
    font-family:'IBM Plex Mono',monospace;
    font-size:10.5px;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--gold-bright);
    background:transparent;
    border:1px solid var(--rule);
    border-radius:12px;
    padding:3px 10px;
    cursor:pointer;
  }
  .simulate-toggle:hover{border-color:var(--gold);}
  .pts-input{
    width:46px;
    font-family:'IBM Plex Mono',monospace;
    font-weight:600;
    font-size:13px;
    text-align:right;
    background:var(--surface-raised);
    border:1px solid var(--gold);
    border-radius:3px;
    color:var(--gold-bright);
    padding:2px 4px;
  }
  .scenario-summary{
    display:none;
    padding:14px 18px;
    border-top:1px solid var(--rule);
    background:var(--surface-raised);
    font-size:12.5px;
    color:var(--text-dim);
  }
  .scenario-summary.active{display:block;}
  .scenario-summary .eyebrow{
    font-family:'Oswald',sans-serif; color:var(--gold-bright); font-size:11px;
    letter-spacing:0.08em; text-transform:uppercase; display:block; margin-bottom:8px;
  }
  .scenario-summary-body .row{margin-bottom:5px;}
  .scenario-summary-body b{color:var(--text);}
  .scenario-summary-body .in{color:var(--green); font-weight:700;}
  .scenario-summary-body .out{color:var(--amber); font-weight:700;}
  .scenario-summary-body .note{color:var(--text-faint); font-style:italic; margin-top:8px;}

  .card-body{padding:16px 18px; font-size:14px; color:var(--text-dim);}
  .stat-row{display:flex; gap:28px; flex-wrap:wrap;}
  .stat{display:flex; flex-direction:column; gap:2px;}
  .stat .n{font-family:'IBM Plex Mono',monospace; font-size:20px; color:var(--gold-bright); font-weight:600;}
  .stat .l{font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.05em;}
  .badge{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; padding:4px 10px; border-radius:20px; margin-top:12px;}
  .badge.qualified{background:rgba(63,191,127,0.12); color:var(--green); border:1px solid rgba(63,191,127,0.4);}
  .badge.inside-cut{background:transparent; color:var(--green); border:1px dashed rgba(63,191,127,0.5);}
  .badge.pending{background:rgba(226,163,61,0.12); color:var(--amber); border:1px solid rgba(226,163,61,0.4);}
  /* Qualified on a win the IFBB has not published yet: green because they ARE in,
     dashed because the claim is ours and not mirrored from IFBB's list. */
  .badge.win-pending{background:rgba(63,191,127,0.10); color:var(--green); border:1px dashed rgba(63,191,127,0.65);}
  .confidence-badge.winpending{background:rgba(63,191,127,0.10); color:var(--green); border:1px dashed rgba(63,191,127,0.55);}
  /* Unscoped: this was .locked-item .wp-mark, which matched nothing -- the locked
     grid renders .locked-tile, so the mark had been styleless since it shipped. The
     ledger badge is the second consumer, so it belongs on the class itself. */
  .wp-mark{color:var(--green); font-weight:700; margin-left:4px;}
  .cq-badge.q .wp-mark{margin-left:2px;}
  /* No opacity. This text is already --text-faint, so the 0.75 was muting the muted
     token a second time and composited to 3.44:1 -- the last contrast failure on the
     homepage after the token fix. --text-faint IS the muted style; dimming it again
     just breaks it. Same reasoning as .cm-na below. */
  .locked-legend{margin:10px 14px 2px;}
  .badge.champion{background:rgba(201,162,75,0.14); color:var(--gold-bright); border:1px solid rgba(201,162,75,0.45);}
  .badge.memoriam{background:rgba(255,255,255,0.06); color:var(--text-dim); border:1px solid rgba(255,255,255,0.18);}
  .badge.retired{background:rgba(255,255,255,0.04); color:var(--text-dim); border:1px solid var(--rule);}
  .badge.tracked{background:transparent; color:var(--text-faint); border:1px solid var(--rule);}
  /* Same colour as .dir-status.amateur on /athletes -- one badge, one meaning. */
  .badge.amateur{background:rgba(143,180,217,0.11); color:#8fb4d9; border:1px solid rgba(143,180,217,0.42);}
  /* The season a qualification badge is a verdict ABOUT. Sits directly under the
     chip because that is where the question gets asked; --text-dim rather than
     --text-faint since it is load-bearing copy, not a demoted footnote. */
  .badge-season{margin:8px 0 0; font-size:13px; line-height:1.55; color:var(--text-dim); max-width:66ch;}
  .badge-season a{color:var(--gold-bright);}
  /* In Memoriam card -- dignified, quiet, a thin gold accent for the honour. */
  .memoriam-card{border-top:2px solid rgba(201,162,75,0.5);}
  .memoriam-body{text-align:center; padding:30px 20px;}
  .memoriam-kicker{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-dim);}
  .memoriam-name{font-family:'Oswald',sans-serif; font-size:26px; font-weight:600; text-transform:uppercase; margin-top:10px;}
  .memoriam-years{color:var(--text-dim); font-size:15px; margin-top:4px; letter-spacing:0.04em;}
  .memoriam-honor{color:var(--gold-bright); font-size:14px; margin-top:10px;}
  .memoriam-tribute{color:var(--text-dim); font-size:13px; font-style:italic; margin-top:14px;}
  /* Former-champion eligibility callout on the athlete qualification card. */
  .champ-note{
    display:flex; gap:10px; align-items:flex-start;
    margin:0 0 12px; padding:11px 13px; border-radius:8px;
    font-size:13px; line-height:1.55;
    background:rgba(201,162,75,0.08); border:1px solid rgba(201,162,75,0.35);
  }
  .champ-note.pending{background:rgba(226,163,61,0.09); border-color:rgba(226,163,61,0.4);}
  .champ-note-mark{color:var(--gold-bright); font-size:15px; line-height:1.4; flex-shrink:0;}
  .champ-note.pending .champ-note-mark{color:var(--amber);}
  .champ-note strong{color:var(--text);}
  /* The Olympia-week card on a profile: the show the athlete is about to step
     into, stated above the next cycle's qualification card. */
  .card.oly-week{border-color:rgba(201,162,75,0.45);}
  .oly-week .champ-note:last-of-type{margin-bottom:10px;}
  .oly-week-src{display:block; margin-top:4px; font-size:11px; color:var(--text-faint);}
  .oly-week-src a{color:var(--text-dim); text-decoration:underline;}
  .oly-week-note{font-size:12px; color:var(--text-faint); line-height:1.55; margin:0;}
  .oly-week-note a{color:var(--gold-bright);}
  .athlete-head{padding:32px 0 20px;}
  .athlete-name{font-family:'Oswald',sans-serif; font-size:32px; font-weight:600; text-transform:uppercase;}
  .athlete-altname{color:var(--text-faint); font-size:12.5px; margin-top:3px; font-style:italic;}
  /* Native-script name (e.g. Korean 박재훈): no Oswald / text-transform so CJK/Arabic
     glyphs render in the reader's system font; the lang attr guides font + a11y. */
  .athlete-nativename{font-size:20px; font-weight:500; color:var(--text-dim); margin-top:3px;}
  .athlete-meta{color:var(--text-dim); font-size:14px; margin-top:6px;}
  /* The plain-fact strip opening every profile -- results/wins/best/H2H record,
     each tile a same-page link to the section it's read from. */
  .athlete-tape{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px;}
  .tape-stat{
    display:flex; flex-direction:column; gap:2px; text-decoration:none;
    background:var(--surface); border:1px solid var(--rule); border-radius:6px;
    padding:9px 16px; min-width:88px;
  }
  .tape-stat:hover{border-color:var(--gold-bright);}
  .tape-stat .n{font-family:'IBM Plex Mono',monospace; font-size:18px; color:var(--gold-bright); font-weight:600;}
  .tape-stat .l{font-size:10px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.05em;}
  .tape-stat .s{font-size:10.5px; color:var(--text-dim);}
  .empty-state{color:var(--text-faint); font-size:13px; font-style:italic;}
  /* SHARE -- a quiet link at the top of a profile; anyone can copy the page link */
  .share-actions{display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:6px 22px; padding-top:12px; margin-bottom:-8px;}
  .share-link{
    display:inline-flex; align-items:center;
    font-family:'Inter',sans-serif; font-size:12.5px; line-height:1.4; color:var(--text-dim);
    background:none; border:none; margin:0; padding:2px 0; cursor:pointer; text-decoration:none;
  }
  .share-link::before{content:"↗"; margin-right:4px;}
  .share-link:hover{color:var(--gold-bright); text-decoration:underline;}
  .share-link.done{color:var(--green); text-decoration:none;}

  /* CITE / CSV / EMBED -- collapsed panels, so the card costs one line of height
     on a profile until someone wants it. Deliberately the quietest card on the
     page: it is a utility for the few readers who republish, not a call to action. */
  .cite-panel{border-top:1px solid var(--rule);}
  .cite-panel:first-of-type{border-top:none;}
  .cite-summary{
    display:flex; align-items:baseline; gap:10px; cursor:pointer; padding:11px 0;
    list-style:none; font-size:13px;
  }
  .cite-summary::-webkit-details-marker{display:none;}
  .cite-summary-label{font-weight:600; color:var(--text);}
  .cite-summary-hint{color:var(--text-faint); font-size:11.5px; flex:1; min-width:0;}
  .cite-caret{color:var(--text-faint); font-size:11px; transition:transform .15s ease;}
  .cite-panel[open] .cite-caret{transform:rotate(180deg);}
  .cite-body{padding:2px 0 16px;}
  .cite-copy{display:flex; align-items:flex-start; gap:8px; margin-bottom:10px;}
  .cite-pre{
    flex:1; min-width:0; margin:0; padding:10px 12px;
    background:rgba(0,0,0,0.25); border:1px solid var(--rule); border-radius:8px;
    font-family:'IBM Plex Mono',monospace; font-size:11.5px; line-height:1.6;
    color:var(--text-dim); white-space:pre-wrap; word-break:break-word;
  }
  .cite-btn{
    flex-shrink:0; font-family:'Inter',sans-serif; font-size:11.5px; font-weight:600;
    color:var(--text-dim); background:none; border:1px solid var(--rule);
    border-radius:6px; padding:7px 11px; cursor:pointer;
  }
  .cite-btn:hover{color:var(--gold-bright); border-color:var(--gold-bright);}
  .cite-btn.done{color:var(--green); border-color:var(--green);}
  .cite-download{
    display:inline-block; font-size:13px; font-weight:600; color:var(--gold-bright);
    border:1px solid var(--rule); border-radius:8px; padding:9px 14px; text-decoration:none;
  }
  .cite-download:hover{border-color:var(--gold-bright);}
  .cite-embed-preview{border:1px solid var(--rule); border-radius:10px; display:block; margin-bottom:12px; max-width:520px; background:transparent;}
  .cite-foot{color:var(--text-faint); font-size:11.5px; line-height:1.6; margin-top:8px;}
  @media (max-width:560px){
    .cite-copy{flex-direction:column;}
    .cite-btn{width:100%;}
  }
  .h2h-row{padding:14px 0; border-bottom:1px solid var(--rule);}
  .h2h-row:last-child{border-bottom:none;}
  /* justify-content is flex-start, NOT space-between, and the distinction is the
     whole reason this row works: the header holds a name, rivalry badges and a
     record, and space-between would push the badges away from the name they
     describe. The record is pulled right by its own margin-left:auto instead
     (see .h2h-record), which keeps name+badges together as one group.
     This rule and a second .h2h-header 44 lines down were merged 2026-08-25 --
     the second one is where flex-start, gap and flex-wrap came from. */
  .h2h-header{display:flex; justify-content:flex-start; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px;}
  .h2h-name{font-size:14px; font-weight:600;}
  /* margin-left:auto is what right-aligns the record now that the header is
     flex-start -- merged here from a second .h2h-record rule (2026-08-25).
     .h2h-record.none below overrides the font/colour at higher specificity, so
     it is unaffected by the merge. */
  .h2h-record{font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--gold-bright); font-size:13px; margin-left:auto;}
  .h2h-meet{
    display:flex; align-items:baseline; gap:12px;
    padding:5px 0;
  }
  .h2h-m-year{
    font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-faint);
    width:38px; flex-shrink:0;
  }
  .h2h-m-contest{flex:1; min-width:0; font-size:13px; color:var(--text-dim);}
  .h2h-m-div{display:block; font-size:10.5px; color:var(--text-faint); margin-top:1px;}
  .h2h-m-place{
    font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600;
    color:var(--text-dim); width:46px; text-align:right; flex-shrink:0; white-space:nowrap;
  }
  .h2h-m-place.win{color:var(--gold-bright);}
  .h2h-meet-head{padding:0 0 5px; margin-bottom:2px; border-bottom:1px solid var(--rule);}
  .h2h-meet-head .h2h-m-place{
    font-family:'Oswald',sans-serif; font-weight:500; font-size:10px;
    text-transform:uppercase; letter-spacing:0.05em; color:var(--text-faint);
  }
  /* HEAD-TO-HEAD curation: search + filter chips + rivalry badges + collapse */
  .h2h-toolbar{
    display:flex; flex-wrap:wrap; align-items:center; gap:10px;
    padding-bottom:12px; margin-bottom:6px; border-bottom:1px solid var(--rule);
  }
  .h2h-toolbar input[type="search"]{
    flex:1; min-width:160px;
    font-family:'Inter',sans-serif; font-size:13px; color:var(--text);
    background:var(--surface-raised); border:1px solid var(--rule); border-radius:6px; padding:7px 10px;
  }
  .h2h-toolbar input[type="search"]::placeholder{color:var(--text-faint);}
  .h2h-toolbar input[type="search"]:focus{outline:none; border-color:var(--gold);}
  .h2h-chips{display:flex; gap:6px; flex-wrap:wrap;}
  .h2h-chip{
    font-family:'Oswald',sans-serif; font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase;
    color:var(--text-dim); background:var(--surface-raised); border:1px solid var(--rule);
    border-radius:12px; padding:4px 11px; cursor:pointer;
  }
  .h2h-chip:hover{border-color:var(--gold);}
  .h2h-chip.active{color:var(--ink); background:var(--gold); border-color:var(--gold);}
  .h2h-count{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text-faint); margin-left:auto;}
  .h2h-badges{display:inline-flex; gap:5px; flex-wrap:wrap;}
  .h2h-badge{
    font-family:'Oswald',sans-serif; font-size:9px; letter-spacing:0.05em; text-transform:uppercase;
    border-radius:8px; padding:1px 7px; border:1px solid var(--rule); color:var(--text-faint);
  }
  .h2h-badge.oly{color:var(--gold-bright); border-color:rgba(201,162,75,0.45); background:rgba(201,162,75,0.1);}
  .h2h-badge.cur{color:var(--green); border-color:rgba(63,191,127,0.4); background:rgba(63,191,127,0.1);}
  .h2h-record.none{color:var(--text-faint); font-family:'Inter',sans-serif; font-weight:400; font-size:11px; font-style:italic;}
  .h2h-compare{font-family:'Oswald',sans-serif; font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--text-faint); text-decoration:none; white-space:nowrap; padding:2px 0;}
  .h2h-compare:hover{color:var(--gold-bright);}
  .h2h-meet-mute{color:var(--text-faint);}
  .h2h-showall{
    display:block; width:100%; margin-top:6px;
    font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:0.05em; text-transform:uppercase;
    color:var(--gold-bright); background:transparent; border:1px solid var(--rule); border-radius:6px;
    padding:9px; cursor:pointer;
  }
  .h2h-showall:hover{border-color:var(--gold);}

  .career-row{
    display:flex; align-items:baseline; gap:14px;
    padding:9px 0; border-bottom:1px solid var(--rule);
  }
  .career-row:last-child{border-bottom:none;}
  /* Same left-accent convention as .ci-row.oly on /contests, so an Olympia
     result reads the same way wherever a reader meets it. */
  .career-row.oly{background:rgba(201,162,75,0.05); box-shadow:inset 3px 0 0 var(--gold-bright);}
  .career-year{
    font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-faint);
    width:38px; flex-shrink:0;
  }
  .career-contest{flex:1; min-width:0; font-size:13.5px; color:var(--text);}
  .career-division{display:block; font-size:11px; color:var(--text-faint); margin-top:1px;}
  .career-source{color:var(--text-faint); text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:2px; white-space:nowrap;}
  .career-source:hover{color:var(--gold-bright);}
  .career-place{
    font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:600;
    color:var(--text-dim); flex-shrink:0; white-space:nowrap;
  }
  .career-place.win{color:var(--gold-bright);}
  /* The card score. Deliberately quieter than the placing next to it: the placing
     is the result, the score is the evidence behind it. */
  .career-score{
    font-size:11px; font-weight:500; color:var(--text-faint);
    border:1px solid var(--rule); border-radius:4px; padding:1px 5px;
    margin-left:5px; cursor:help;
  }
  .career-place.win .career-score{color:var(--text-dim);}
  /* Disqualified: stated, not styled as a result. */
  .career-dq, .res-dq{color:var(--red); cursor:help; letter-spacing:.04em;}
  /* NS and DNF are not penalties -- see NON_PLACED_LABELS. Muted, not red, and
     the competitor's name keeps full weight: only .res-row.dq dims it. */
  .career-dq.neutral, .res-dq.neutral{color:var(--text-faint);}
  .res-row.dq .res-name, .res-row.dq .res-name a{color:var(--text-faint);}

  /* Collapsed 5-year eras for long careers -- native <details>, works without JS. */
  .career-era{border-top:1px solid var(--rule);}
  .career-era > summary{
    display:flex; align-items:baseline; gap:14px; padding:9px 0;
    cursor:pointer; list-style:none; user-select:none;
  }
  .career-era > summary::-webkit-details-marker{display:none;}
  .career-era-range{
    font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-faint);
    flex-shrink:0;
  }
  .career-era-label{flex:1; min-width:0; font-size:12.5px; color:var(--text-dim);}
  .career-era-caret{
    font-size:11px; color:var(--text-faint); flex-shrink:0;
    transition:transform .15s ease;
  }
  .career-era[open] > summary .career-era-caret{transform:rotate(180deg);}
  .career-era > summary:hover .career-era-label{color:var(--text);}
  .career-era > .career-list{padding-left:0;}
  .career-era > .career-list .career-row:last-child{border-bottom:none;}

  /* "Expand all" for any block that collapses date info behind <details> --
     JS enhancement, hidden until wired so no-JS users don't see a dead control. */
  .expand-all{
    display:inline-block; margin-top:8px; padding:2px 0;
    background:none; border:none; cursor:pointer;
    font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.03em;
    color:var(--text-faint);
  }
  .expand-all:hover{color:var(--gold-bright);}

  .social-links{display:flex; flex-wrap:wrap; gap:8px;}
  .social-link{
    display:inline-flex; align-items:center; gap:6px;
    font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600;
    color:var(--text); text-decoration:none;
    background:var(--surface-raised);
    border:1px solid var(--rule);
    border-radius:20px;
    padding:6px 14px;
    transition:border-color 0.15s ease, color 0.15s ease;
  }
  .social-link:hover{border-color:var(--gold); color:var(--gold-bright);}
  .social-link .platform{color:var(--text-faint); font-weight:500;}

  /* YOUTUBE PREVIEW STRIP -- thumbnails served by i.ytimg.com, each linking to
     YouTube to watch. No player, no embed script. See renderYoutubePreviews. */
  .yt-previews{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    gap:10px; margin-top:14px;
  }
  .yt-preview{
    display:block; text-decoration:none; color:var(--text);
    border:1px solid var(--rule); border-radius:6px; overflow:hidden;
    background:var(--surface-raised);
    transition:border-color 0.15s ease;
  }
  .yt-preview:hover{border-color:var(--gold);}
  .yt-preview img{
    display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
    background:var(--surface);
  }
  /* The padding lives on the CAPTION and the clamp on the TITLE inside it, and
     they must stay separate. -webkit-line-clamp measures the box it is applied
     to, but padding-bottom is part of that box's overflow area -- so a clamped
     element with its own padding renders the start of a third line INSIDE the
     padding before hiding it, chopping the text mid-word. Splitting the two
     gives the clamp a padding-free box to measure. */
  .yt-preview-caption{display:block; padding:8px 10px;}
  .yt-preview-title{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
    font-size:12px; line-height:1.35;
    /* Reserve both lines so cards in a row stay the same height whether the
       title wraps to one line or two. */
    min-height:calc(2 * 1.35em);
  }
  .yt-preview:hover .yt-preview-title{color:var(--gold-bright);}
  .yt-previews-note{
    grid-column:1 / -1;
    color:var(--text-faint); font-size:11px; font-style:italic; margin-top:2px;
  }

  /* LOCKED IN GRID */
  /* minmax(0,1fr), not 1fr: a bare 1fr track can't shrink below its widest
     tile's content, so one long "USA · 3x Olympia champion" line pushed the
     grid to 411px inside a 334px card on a phone and the card's
     overflow:hidden cut off the right column -- 152 of 349 tiles on /olympia
     (2026-09-22). */
  .locked-grid{
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1px;
    background:var(--rule);
  }
  .locked-tile{
    background:var(--surface);
    padding:10px 14px;
    display:flex; flex-direction:column; gap:2px;
  }
  .locked-name{font-size:13.5px; font-weight:500; color:var(--text);}
  .locked-country{font-size:11px; color:var(--text-faint); letter-spacing:0.03em;}
  /* Qualified but not competing (e.g. withdrew after locking a place via
     lifetime eligibility) -- same demote-don't-hide treatment as
     .entry-row.withdrawn: strike the name, keep the tile in place. */
  .locked-name.withdrawn a.athlete-link{text-decoration:line-through; color:var(--text-faint);}
  .locked-tile.withdrawn{opacity:0.7;}
  img.locked-flag{width:15px; height:11px; margin-right:5px; border-radius:1px; vertical-align:baseline; position:relative; top:1px;}

  a.athlete-link{text-decoration:none;}
  a.athlete-link:hover{color:var(--gold-bright); text-decoration:underline;}
  a.contest-link{text-decoration:none; color:inherit;}
  /* The link off each homepage panel to that division's full standings. Was a
     12px inline-styled text link under the subtitle and read as caption rather
     than an action. */
  a.standings-cta{display:inline-flex; align-items:center; gap:7px; margin-top:12px;
    padding:8px 15px; font-size:13.5px; font-weight:650; letter-spacing:0.01em;
    color:var(--gold); text-decoration:none; border-radius:999px;
    border:1px solid rgba(239,169,32,0.45); background:rgba(239,169,32,0.09);
    transition:background .15s ease, border-color .15s ease;}
  a.standings-cta:hover, a.standings-cta:focus-visible{background:rgba(239,169,32,0.18);
    border-color:rgba(239,169,32,0.8);}
  a.standings-cta .cta-arrow{transition:transform .15s ease;}
  a.standings-cta:hover .cta-arrow{transform:translateX(3px);}
  @media (prefers-reduced-motion: reduce){ a.standings-cta, a.standings-cta .cta-arrow{transition:none;} }
  a.contest-link:hover{color:var(--gold-bright); text-decoration:underline;}

  /* CONTEST PAGE */
  .contest-links{display:flex; flex-wrap:wrap; gap:8px;}
  .contest-link-chip{
    display:inline-flex; align-items:center; gap:6px;
    font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600;
    color:var(--text); text-decoration:none;
    background:var(--surface-raised);
    border:1px solid var(--rule);
    border-radius:20px;
    padding:6px 14px;
    transition:border-color 0.15s ease, color 0.15s ease;
  }
  .contest-link-chip:hover{border-color:var(--gold); color:var(--gold-bright);}
  .scorecard-repro-note{margin:10px 0 0; color:var(--text-faint); font-size:11.5px; font-style:italic; line-height:1.5;}
  .res-row{
    display:flex; align-items:center; gap:12px;
    padding:9px 0; border-bottom:1px solid var(--rule);
  }
  .res-row:last-child{border-bottom:none;}
  .res-row.win{background:rgba(201,162,75,0.05);}
  .res-place{
    font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:600;
    color:var(--text-dim); width:42px; flex-shrink:0;
  }
  .res-row.win .res-place{color:var(--gold-bright);}
  .res-name{flex:1; min-width:0;}
  .res-name .n{font-size:13.5px; color:var(--text); display:block;}
  .res-name .c{font-size:10.5px; color:var(--text-faint);}
  .res-tag{
    font-family:'Oswald',sans-serif; font-size:9.5px; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--gold-bright); border:1px solid rgba(201,162,75,0.4); background:rgba(201,162,75,0.1);
    border-radius:8px; padding:1px 7px; flex-shrink:0;
  }
  .res-pts{
    font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:13px;
    width:56px; text-align:right; color:var(--gold-bright); flex-shrink:0;
  }
  .res-pts .u{font-size:9.5px; color:var(--text-faint); font-weight:500; margin-left:2px;}
  .division-result-head{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
  }
  .division-result-head .elevated-tag{
    font-family:'Oswald',sans-serif; font-size:9.5px; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--ink); background:var(--gold); padding:2px 7px; border-radius:2px;
  }
  /* Honest field-completeness signal (C.1). Most divisions were seeded athlete-
     first and hold a partial field; this stops them rendering as if complete. */
  .division-head-tags{ display:inline-flex; align-items:center; gap:6px; flex-shrink:0; }
  .field-badge{
    font-family:'Oswald',sans-serif; font-size:9px; letter-spacing:0.05em; text-transform:uppercase;
    border-radius:8px; padding:2px 7px; white-space:nowrap; cursor:help;
  }
  .field-badge.complete{ color:var(--gold-bright); border:1px solid rgba(201,162,75,0.4); background:rgba(201,162,75,0.1); }
  .field-badge.partial{ color:var(--amber); border:1px solid rgba(226,163,61,0.4); background:rgba(226,163,61,0.12); }
  .field-badge.unconfirmed{ color:var(--text-dim); border:1px solid var(--rule); background:rgba(162,154,137,0.1); }
  /* Competitive tier. Amateur only -- see tierBadge(). Deliberately NOT gold:
     gold is this site's IFBB Pro League / qualified accent everywhere else, and
     an amateur show borrowing it would undo the distinction the badge exists to
     draw. Slate-blue reads as a separate category rather than a lesser one. */
  .tier-badge{
    display:inline-block; font-family:'Oswald',sans-serif; font-size:9.5px;
    letter-spacing:0.06em; text-transform:uppercase; border-radius:8px;
    padding:2px 8px; white-space:nowrap; cursor:help; vertical-align:middle;
  }
  .tier-badge.amateur{ color:#8fb4d9; border:1px solid rgba(143,180,217,0.42); background:rgba(143,180,217,0.11); }
  /* Filled, not outlined -- see the comment on olympiaBadge() in _shared.js for
     why this can't just be more gold text. */
  .oly-badge{
    display:inline-block; font-family:'Oswald',sans-serif; font-size:9.5px; font-weight:600;
    letter-spacing:0.06em; text-transform:uppercase; border-radius:3px;
    padding:2px 7px; margin-left:6px; white-space:nowrap; cursor:help; vertical-align:middle;
    color:var(--ink); background:var(--gold-bright);
  }
  .tier-note{
    margin:10px 0 0; max-width:70ch; font-size:13px; line-height:1.6;
    color:var(--text-dim); border-left:2px solid rgba(143,180,217,0.42); padding-left:12px;
  }
  .tier-note b{color:var(--text);}
  /* The pro card an amateur competitor earned -- the farm system's actual
     event, and the reason the amateur tier is tracked at all. Green, the
     site's "banked / cannot be revoked" colour: a card, once awarded, is. */
  .res-tag.procard{ color:var(--green); border-color:rgba(63,191,127,0.55); background:rgba(63,191,127,0.10); }
  /* The division a visitor arrived for (?division=) -- reordered to lead, and
     given a quiet gold accent so it reads as intentional rather than random. */
  .card.division-focused{border-color:var(--gold); box-shadow:inset 3px 0 0 var(--gold);}
  .focus-chip{
    font-family:'Oswald',sans-serif; font-size:9px; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--gold-bright); border:1px solid rgba(201,162,75,0.4); background:rgba(201,162,75,0.1);
    border-radius:8px; padding:1px 6px; margin-left:8px; vertical-align:middle;
  }

  /* SCORECARD INTELLIGENCE */
  .sc-intel{border-top:1px solid var(--rule); background:var(--surface);}
  .sc-intel-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:14px 18px 0;}
  .sc-intel-title{
    font-family:'Oswald',sans-serif; font-size:12px; text-transform:uppercase; letter-spacing:0.07em;
    color:var(--gold-bright); font-weight:600;
  }
  .sc-verdict{padding:9px 18px 12px; font-size:13px; color:var(--text-dim); line-height:1.6;}
  .sc-verdict b{color:var(--text);}
  .sc-scroll{overflow-x:auto; padding:0 18px 6px;}
  .sc-table{border-collapse:collapse; width:100%; min-width:540px; font-size:12.5px;}
  .sc-table th{
    font-family:'Oswald',sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:0.04em;
    font-size:10px; color:var(--text-faint); text-align:right; padding:6px 9px; border-bottom:1px solid var(--rule);
    white-space:nowrap;
  }
  .sc-table th.l, .sc-table td.l{text-align:left;}
  .sc-table td{padding:8px 9px; border-bottom:1px solid var(--rule); text-align:right; color:var(--text-dim);}
  .sc-table tbody tr:last-child td{border-bottom:none;}
  .sc-table tr.win td{background:rgba(201,162,75,0.05);}
  .sc-num{font-family:'IBM Plex Mono',monospace;}
  .sc-total{font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--gold-bright);}
  .sc-place{font-family:'IBM Plex Mono',monospace; color:var(--text-dim); font-weight:600;}
  .sc-table tr.win .sc-place{color:var(--gold-bright);}
  .sc-move-up{color:var(--green); font-family:'IBM Plex Mono',monospace; font-weight:600;}
  .sc-move-dn{color:var(--amber); font-family:'IBM Plex Mono',monospace; font-weight:600;}
  .sc-move-flat{color:var(--text-faint); font-family:'IBM Plex Mono',monospace;}
  .sc-read{font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:0.04em; text-transform:uppercase; white-space:nowrap;}
  .sc-read.knife{color:var(--amber);}
  .sc-read.lock{color:var(--green);}
  .sc-read.dim{color:var(--text-faint);}
  .sc-legend{padding:2px 18px 14px; font-size:11px; color:var(--text-faint); line-height:1.6;}
  .sc-legend b{color:var(--text-dim);}

  /* GAP LADDER -- placings spaced by their real score gap. */
  .sc-ladder-wrap{padding:4px 18px 10px;}
  /* A BUTTON, not a caption. This was 10px --text-faint uppercase with the
     explanatory sentence inside the summary, which made the whole thing read as a
     label sitting under the card -- the one interactive element on the panel looked
     like the least interactive. It's a bordered gold pill now, it says what it does
     rather than naming itself ("Show gap ladder", not "Gap ladder"), and the
     sentence moved OUT of the clickable text to sit above the ladder, where it
     explains what you're looking at instead of padding out a control. */
  .sc-ladder-head{
    display:inline-flex; align-items:center; gap:7px;
    font-family:'Oswald',sans-serif; font-size:12px; text-transform:uppercase; letter-spacing:0.05em;
    color:var(--gold); cursor:pointer; list-style:none;
    border:1px solid rgba(239,169,32,0.45); border-radius:999px;
    padding:7px 14px; margin-bottom:10px;
    transition:color .15s ease, border-color .15s ease, background .15s ease;
  }
  .sc-ladder-head::-webkit-details-marker{display:none;}
  .sc-ladder-head:hover{color:var(--gold-bright); border-color:var(--gold); background:rgba(239,169,32,0.09);}
  .sc-ladder-head:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
  .sc-ladder-caret{display:inline-block; font-size:9px; transition:transform 0.12s ease;}
  .sc-ladder-wrap[open] .sc-ladder-caret{transform:rotate(90deg);}
  /* Both labels ship; CSS picks one, since <details> won't relabel itself. */
  .sc-ladder-wrap .sc-lh-close{display:none;}
  .sc-ladder-wrap[open] .sc-lh-open{display:none;}
  .sc-ladder-wrap[open] .sc-lh-close{display:inline;}
  .sc-ladder-sub{font-size:11.5px; color:var(--text-dim); line-height:1.5; margin:0 0 12px; max-width:70ch;}
  .sc-ladder{position:relative; margin-left:6px; border-left:1px solid var(--rule);}
  .sc-rung{
    position:absolute; left:0; display:flex; align-items:baseline; gap:8px;
    white-space:nowrap; transform:translateY(-50%); padding-left:14px;
  }
  .sc-rung-dot{
    position:absolute; left:-4px; top:50%; transform:translateY(-50%);
    width:7px; height:7px; border-radius:50%; background:var(--text-faint);
  }
  .sc-rung.lead .sc-rung-dot{background:var(--gold-bright); box-shadow:0 0 0 3px rgba(201,162,75,0.15);}
  .sc-rung-pl{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-faint); min-width:26px;}
  .sc-rung.lead .sc-rung-pl{color:var(--gold-bright); font-weight:600;}
  .sc-rung-name{font-size:12.5px; color:var(--text-dim);}
  .sc-rung.lead .sc-rung-name{color:var(--text);}
  .sc-rung-gap{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--text-faint);}
  .sc-ladder-note{font-size:11px; color:var(--text-faint); margin-top:8px;}
  @media (max-width:600px){
    .sc-ladder-wrap{overflow-x:auto;}
    .sc-rung-gap{display:none;}
  }

  /* SCORECARD EXPLORER (/scorecards) */
  .sx-section{margin-top:22px;}
  .sx-card{overflow:hidden;}
  .sx-controls{
    display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;
    padding:16px 18px; border-bottom:1px solid var(--rule); background:var(--surface);
  }
  .sx-field{display:flex; flex-direction:column; gap:5px; min-width:150px;}
  .sx-field-grow{flex:1; min-width:200px;}
  .sx-field > span{
    font-family:'Oswald',sans-serif; font-size:10px; text-transform:uppercase;
    letter-spacing:0.07em; color:var(--text-faint);
  }
  .sx-field select, .sx-field input{
    background:var(--ink); border:1px solid var(--rule); border-radius:5px;
    color:var(--text); font-size:13px; font-family:inherit; padding:8px 10px; width:100%;
  }
  .sx-field select:focus, .sx-field input:focus{outline:none; border-color:var(--gold-bright);}
  .sx-go{
    background:var(--gold-bright); color:var(--ink); border:none; border-radius:5px;
    font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.05em;
    font-size:12px; padding:9px 16px; cursor:pointer;
  }
  /* Capped height: the list is a picker, not the page. It scrolls so the card
     below it stays reachable without a long scroll past 60 shows. */
  .sx-results{max-height:290px; overflow-y:auto; border-bottom:1px solid var(--rule);}
  .sx-hit{
    display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
    padding:10px 18px; border-bottom:1px solid var(--rule); background:none; text-align:left;
    cursor:pointer; text-decoration:none; color:inherit;
  }
  /* An author display rule beats the UA stylesheet's [hidden] rule, so filtering
     a row out silently does nothing without this. Both the server's initial
     filter and the client's live one ride on the hidden attribute. */
  .sx-hit[hidden], .sx-empty[hidden], .sx-more[hidden]{display:none;}
  .sx-hit:last-child{border-bottom:none;}
  .sx-hit:hover{background:rgba(201,162,75,0.06);}
  .sx-hit.active{background:rgba(201,162,75,0.1); box-shadow:inset 3px 0 0 var(--gold-bright);}
  .sx-hit-main{display:flex; flex-direction:column; gap:2px; min-width:0;}
  .sx-hit-name{font-size:13px; color:var(--text); font-weight:600;}
  .sx-hit.active .sx-hit-name{color:var(--gold-bright);}
  .sx-hit-meta{font-size:11.5px; color:var(--text-faint);}
  .sx-chip{
    font-family:'Oswald',sans-serif; font-size:10px; text-transform:uppercase; letter-spacing:0.04em;
    color:var(--text-faint); border:1px solid var(--rule); border-radius:8px;
    padding:2px 8px; white-space:nowrap; flex-shrink:0;
  }
  .sx-chip.tie{color:var(--ink); background:var(--gold-bright); border-color:var(--gold-bright);}
  .sx-chip.knife{color:var(--orange); border-color:rgba(224,123,57,0.5); background:rgba(224,123,57,0.1);}
  .sx-empty, .sx-more{padding:14px 18px; font-size:12px; color:var(--text-faint);}
  .sx-card-body .sc-intel{border-top:none;}
  .sx-card-head{padding:15px 18px 0;}
  .sx-card-title{
    font-family:'Oswald',sans-serif; font-size:15px; letter-spacing:0.03em;
    text-transform:uppercase; color:var(--gold-bright);
  }
  .sx-card-meta{font-size:11.5px; color:var(--text-faint); margin-top:4px;}
  .sx-placeholder{padding:26px 18px; font-size:13px; color:var(--text-faint); line-height:1.6;}

  /* COVERAGE MAP (/scorecards) */
  .cm-card{padding:0;}
  .cm-scroll{overflow-x:auto;}
  .cm-table{border-collapse:collapse; width:100%; min-width:520px;}
  .cm-table th{
    font-family:'Oswald',sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:0.04em;
    font-size:10px; color:var(--text-faint); padding:10px 8px; border-bottom:1px solid var(--rule);
    white-space:nowrap;
  }
  .cm-table td{border-bottom:1px solid var(--rule); padding:0; text-align:center;}
  .cm-table tbody tr:last-child td, .cm-table tbody tr:last-child th{border-bottom:none;}
  .cm-year{
    font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-dim);
    text-align:left; padding:0 14px; white-space:nowrap; border-bottom:1px solid var(--rule);
  }
  /* FULL --text on every cell, and it has to be. The five gold fills below are the
     data, so they can't be darkened to suit the text -- which means the text has to
     clear the BRIGHTEST of them. Against .cm-f (rgba gold 0.42 over --surface, which
     composites to #65532c) --text-dim measures 2.66:1 and --text-faint 2.18:1; the
     old colours were close to unreadable on exactly the cells with the most data in
     them. --text is the only value that passes all five (5.98:1 at worst).
     Hierarchy between the count and its detail line is carried by size, not colour,
     and .cm-static by cursor plus the absent hover ring -- colour was always the
     redundant half of those cues. Do NOT reintroduce a dimmer colour or an opacity
     here without re-checking it against .cm-f specifically. */
  .cm-cell-btn{
    display:block; padding:11px 6px; text-decoration:none; color:var(--text);
    font-family:'IBM Plex Mono',monospace; font-size:12px; line-height:1;
  }
  .cm-cell-btn:hover{box-shadow:inset 0 0 0 1px var(--gold-bright);}
  /* Pre-card seasons: same reading, no drill-down, so no affordance either. */
  .cm-static{cursor:default;}
  .cm-static:hover{box-shadow:none;}
  .cm-cell-btn.active{box-shadow:inset 0 0 0 2px var(--gold-bright);}
  .cm-cell-d{color:var(--text); font-size:10.5px;}
  /* Five discrete fills -- a continuous ramp would imply precision the ratio
     doesn't carry. Gold intensity tracks how much of the season is transcribed. */
  .cm-f{background:rgba(201,162,75,0.42);}
  .cm-h{background:rgba(201,162,75,0.28);}
  .cm-m{background:rgba(201,162,75,0.17);}
  .cm-l{background:rgba(201,162,75,0.08);}
  .cm-z{background:transparent;}
  /* Was opacity:0.45 on top of --text-faint -- the same double-mute as
     .locked-legend, and far worse: it composited to roughly 1.7:1, which is barely
     visible at all. The token alone is the muting. */
  .cm-na{color:var(--text-faint); font-size:13px;}
  .cm-tot{
    font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text-faint);
    padding:0 12px; white-space:nowrap;
  }
  .cm-legend{
    display:flex; align-items:center; flex-wrap:wrap; gap:6px;
    padding:11px 16px; border-top:1px solid var(--rule);
    font-size:11px; color:var(--text-faint);
  }
  .cm-key{display:inline-block; width:13px; height:13px; border-radius:3px; border:1px solid var(--rule); margin-left:8px;}
  .cm-legend .cm-key:first-child{margin-left:0;}
  .cm-key-na{margin-left:8px; opacity:0.5;}
  .cm-older{border-top:1px solid var(--rule);}
  .cm-older > summary{
    padding:11px 16px; font-size:11.5px; color:var(--text-faint); cursor:pointer; list-style:none;
  }
  .cm-older > summary::-webkit-details-marker{display:none;}
  .cm-older > summary::before{
    content:'▸'; display:inline-block; margin-right:6px; color:var(--gold-bright);
    transition:transform 0.12s ease;
  }
  .cm-older[open] > summary::before{transform:rotate(90deg);}
  .cm-older > summary:hover{color:var(--text-dim);}
  .cm-panels:empty{display:none;}
  .cm-panel{border-top:1px solid var(--rule); max-height:340px; overflow-y:auto;}
  .cm-panel[hidden]{display:none;}
  .cm-panel-head{
    font-family:'Oswald',sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:0.06em;
    color:var(--gold-bright); padding:12px 16px 8px;
  }
  .cm-row{
    display:flex; align-items:baseline; justify-content:space-between; gap:12px;
    padding:8px 16px; border-top:1px solid var(--rule); text-decoration:none; color:inherit;
  }
  .cm-row:hover{background:rgba(201,162,75,0.06);}
  .cm-row-name{font-size:12.5px; color:var(--text-dim);}
  .cm-row.cm-card .cm-row-name{color:var(--text); font-weight:600;}
  .cm-row.cm-small .cm-row-name{color:var(--text); font-weight:600;}
  .cm-row-state{
    font-family:'Oswald',sans-serif; font-size:10px; text-transform:uppercase; letter-spacing:0.04em;
    color:var(--text-faint); white-space:nowrap; text-align:right;
  }
  .cm-row.cm-card .cm-row-state{color:var(--green);}
  /* Covered, but not openable -- dimmer than a card so the row doesn't promise
     an explorer link it deliberately doesn't have. */
  .cm-row.cm-small .cm-row-state{color:var(--text-dim);}
  .cm-row.cm-results .cm-row-state{color:var(--text-faint);}
  @media (max-width:600px){
    .cm-row{flex-direction:column; gap:3px;}
    .cm-row-state{text-align:left;}
  }

  /* CONTEST INDEX */
  /* On now / next few days. Sits above the filter bar and reuses .show-card from
     the homepage strip -- a live show should look identical everywhere. Only the
     link behaviour and the countdown label are new here. */
  .ci-now{margin:18px 0 4px;}
  .ci-now .ci-section-head{margin-top:0;}
  .ci-now .show-card{min-width:210px;}
  .ci-now-note{font-size:12.5px; color:var(--text-faint); margin:-6px 0 12px;}
  a.ci-now-card{display:block; text-decoration:none; color:inherit; transition:border-color 0.12s ease;}
  a.ci-now-card:hover{border-color:var(--gold);}
  a.ci-now-card:hover .show-name{color:var(--gold-bright);}
  .show-when{
    display:inline-flex; align-items:center; margin-bottom:8px;
    font-family:'Oswald',sans-serif; font-size:9.5px; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--gold-bright);
  }
  .ci-now-divs{
    display:inline-block; margin-top:9px;
    font-family:'Oswald',sans-serif; font-size:9.5px; letter-spacing:0.05em; text-transform:uppercase;
    color:var(--text-dim); border:1px solid var(--rule); border-radius:8px; padding:1px 7px;
  }
  .ci-summary{
    display:flex; flex-wrap:wrap; gap:14px; margin:20px 0 8px;
  }
  .ci-summary-stat{
    flex:1; min-width:140px;
    background:var(--surface); border:1px solid var(--rule); border-radius:6px;
    padding:14px 18px; display:flex; flex-direction:column; gap:3px;
  }
  .ci-summary-stat .n{font-family:'IBM Plex Mono',monospace; font-size:26px; font-weight:600; color:var(--gold-bright);}
  .ci-summary-stat .l{font-size:11.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.05em;}
  /* Filter bar. Mirrors the /scorecards explorer controls (.sx-controls) so the
     two catalogues are driven the same way. It is a real <form>, so with JS off
     the same controls submit and the server filters. */
  .ci-controls{
    display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;
    background:var(--surface); border:1px solid var(--rule); border-radius:6px;
    padding:14px 16px; margin:16px 0 4px;
  }
  .ci-field{display:flex; flex-direction:column; gap:5px; min-width:150px;}
  .ci-field-grow{flex:1; min-width:200px;}
  .ci-field > span{
    font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-faint);
  }
  .ci-field select, .ci-field input{
    background:var(--ink); color:var(--text); border:1px solid var(--rule); border-radius:5px;
    padding:8px 10px; font-family:'Inter',sans-serif; font-size:13.5px; width:100%;
  }
  .ci-field select:focus, .ci-field input:focus{outline:none; border-color:var(--gold);}
  .ci-go{
    background:var(--gold); color:var(--ink); border:none; border-radius:5px;
    padding:9px 16px; font-family:'Oswald',sans-serif; font-size:13px; cursor:pointer;
  }
  .ci-empty, .ci-more{
    font-size:12.5px; color:var(--text-faint); padding:10px 2px;
  }
  /* These ARE the section headings on /contests ("Happening now", "Upcoming",
     "Completed") and were plain blocks, so the page shipped one h1 and no
     structure under it. The explicit weight is what keeps the fix structural:
     a heading element defaults to bold where a block defaults to normal, and
     every one of these rules was written against the block default. Same
     reasoning as the .card-head rules further up. */
  .ci-section-head{
    font-family:'Oswald',sans-serif; font-size:15px; text-transform:uppercase; letter-spacing:0.06em;
    color:var(--gold-bright); margin:30px 0 12px; font-weight:400;
    display:flex; align-items:baseline; gap:10px;
  }
  .ci-section-head .count{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-faint); letter-spacing:0;}
  .ci-list{
    background:var(--surface); border:1px solid var(--rule); border-radius:4px; overflow:hidden;
    margin-bottom:6px;
  }
  /* One line per show. The old row stacked date/name/location/division pills at
     ~85px; across 445 visible rows the pills alone were a fifth of the page. */
  .ci-row{
    display:flex; align-items:baseline; gap:14px;
    padding:9px 16px; border-bottom:1px solid var(--rule);
    text-decoration:none; color:inherit;
  }
  .ci-row:last-child{border-bottom:none;}
  /* Same trap the explorer hit above: an author display rule beats the UA
     stylesheet's [hidden] rule, so a filtered-out row stays on screen without
     this. Covers both the server's initial hidden state and the client filter. */
  .ci-row[hidden], .ci-empty[hidden], .ci-more[hidden]{display:none;}
  a.ci-row:hover{background:rgba(191,149,63,0.06);}
  a.ci-row:hover .ci-name{color:var(--gold-bright);}
  /* A left accent bar so the Olympia row reads as different at a glance while
     scrolling -- not just on a name a reader has to stop and read. */
  .ci-row.oly{background:rgba(201,162,75,0.06); box-shadow:inset 3px 0 0 var(--gold-bright);}
  .ci-date{
    font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--gold-bright);
    width:118px; flex-shrink:0; display:flex; gap:6px; align-items:baseline;
  }
  .ci-md{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .ci-yr{color:var(--text-faint); font-size:11px;}
  .ci-name{font-size:14px; font-weight:600; color:var(--text); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .ci-loc{font-size:11.5px; color:var(--text-faint); flex:0 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:right;}
  /* Division count, with the full list on hover. The names themselves live on the
     contest page; here division earns its space as a filter, not as a pill. */
  .ci-divs{
    font-family:'Oswald',sans-serif; font-size:9.5px; letter-spacing:0.05em; text-transform:uppercase;
    color:var(--text-dim); border:1px solid var(--rule); border-radius:8px; padding:1px 7px;
    flex-shrink:0; cursor:help;
  }
  @media (max-width:560px){
    .ci-row{flex-wrap:wrap; gap:4px 10px; padding:10px 14px;}
    .ci-date{width:auto; order:1;}
    .ci-divs{order:2;}
    .ci-name{order:0; flex:1 1 100%;}
    .ci-loc{order:3; text-align:left; flex:1 1 auto;}
  }

  /* DIVISION PAGE */
  .rule-desc{font-size:14px; color:var(--text); line-height:1.65; margin-bottom:14px;}
  .rule-meta{display:flex; flex-wrap:wrap; gap:22px;}
  .rule-fact{display:flex; flex-direction:column; gap:2px;}
  .rule-fact .n{font-family:'IBM Plex Mono',monospace; font-size:16px; color:var(--gold-bright); font-weight:600;}
  .rule-fact .l{font-size:10.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.05em;}
  .rule-source{margin-top:14px; font-size:12px;}
  .rule-source a{color:var(--gold-bright); text-decoration:underline;}
  .rule-source a:hover{color:var(--gold);}
  .rule-judging{margin-top:16px; padding-top:14px; border-top:1px solid var(--rule);}
  .rule-judging-head{font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-faint); margin-bottom:6px;}
  .rule-judging-body{font-size:13.5px; line-height:1.65; color:var(--text-dim);}
  .rule-judging-poses{margin:8px 0 0; padding-left:20px; font-size:12.5px; line-height:1.6; color:var(--text-dim);}
  .rule-judging-poses li{margin-bottom:2px;}
  .rule-judging-links{margin-top:10px; font-size:12px;}
  .rule-judging-links a{color:var(--gold-bright); text-decoration:underline;}
  .rule-judging-links a:hover{color:var(--gold);}
  .div-section-head{
    font-family:'Oswald',sans-serif; font-size:14px; text-transform:uppercase; letter-spacing:0.06em;
    color:var(--text-dim); margin:26px 0 12px; display:flex; align-items:center; gap:8px;
    /* Inherited, not a literal: this is a heading element now (see sectionHead in
       functions/divisions/[slug].js) and would otherwise render at the browser's
       bold. Inheriting reproduces exactly what the div it replaced resolved to. */
    font-weight:inherit;
  }
  .div-section-head .count{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-faint); letter-spacing:0;}

  /* SCOREBOARD */
  .scoreboard{padding:6px 0;}
  /* Weight-class sections on a contest card. Only the 1974-1979 Mr. Olympia ran
     more than one class, so these never render anywhere else -- but when they do,
     the section heading is the only thing telling a reader why two men are both
     listed 1st, so it has to read as a heading and not as another result row. */
  .wc-section + .wc-section{border-top:1px solid var(--rule); margin-top:6px; padding-top:10px;}
  .wc-head{
    font-family:'Oswald',sans-serif; font-size:12px; text-transform:uppercase;
    letter-spacing:0.08em; color:var(--text-dim); padding-top:8px;
  }
  .wc-note{margin:4px 0 0; font-size:0.82rem; line-height:1.45; color:var(--text-faint);}
  /* The weight class beside a placing in career history. Muted and smaller than the
     placing itself: it qualifies the number, it isn't a second result. */
  .career-class, .career-class-only{
    font-family:'IBM Plex Mono',monospace; font-size:11px;
    color:var(--text-faint); letter-spacing:0; white-space:nowrap;
  }
  .career-class{display:block;}
  /* The "show the rest of the ladder" fold. See STANDINGS_VISIBLE in
     functions/divisions/[slug].js for why the rest is collapsed rather than cut. */
  /* No border-top: every .score-details above it already carries a bottom rule, so
     one here would double it. */
  .standings-more{margin-top:0;}
  .standings-more-toggle{
    list-style:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    padding:14px 12px; min-height:44px;
    font-family:'Oswald',sans-serif; text-transform:uppercase;
    letter-spacing:0.05em; font-size:12px; color:var(--text-dim);
    transition:color .15s;
  }
  .standings-more-toggle::-webkit-details-marker{display:none;}
  .standings-more-toggle:hover{color:var(--gold-bright);}
  .standings-more-toggle:focus-visible{outline:2px solid var(--gold); outline-offset:-2px;}
  /* Native <details> won't relabel itself, so both labels ship and CSS picks one. */
  .standings-more .smt-close{display:none;}
  .standings-more[open] .smt-open{display:none;}
  .standings-more[open] .smt-close{display:inline;}
  .score-row{
    display:flex; align-items:center;
    padding:8px 18px;
    border-bottom:1px solid var(--rule);
    gap:12px;
  }
  .score-row:last-child{border-bottom:none;}
  .score-row.qualifying{background:rgba(63,191,127,0.045);}
  .score-row.chasing{background:rgba(226,163,61,0.045);}

  /* SHOW YOUR WORK -- the division ladder row and its points breakdown.
     The row is a plain div and the caret is its own <details>; see the comment on
     the markup in functions/divisions/[slug].js for why it can't be a <summary>.
     Note the homepage board also uses .score-row, WITHOUT any .score-details
     wrapper, so every rule here is scoped to .score-details and leaves it alone. */
  .score-details{border-bottom:1px solid var(--rule);}
  .score-details:last-child{border-bottom:none;}
  .score-details .score-row{border-bottom:none;}
  /* No cursor:pointer and no hover tint on the row -- it is not a control any more,
     and both of those promised a click that does nothing. The open state still
     highlights, which is the part that carried information. */
  .sc-disclose{display:flex; flex:none;}
  .sc-toggle{
    list-style:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    width:28px; height:28px; margin-right:-6px; border-radius:6px;
    transition:background .15s;
  }
  .sc-toggle::-webkit-details-marker{display:none;}
  .sc-toggle:hover{background:rgba(255,255,255,0.06);}
  .sc-toggle:focus-visible{outline:2px solid var(--gold); outline-offset:-2px;}
  .pts-caret{
    display:inline-block; font-size:9px; color:var(--text-faint);
    transition:transform 0.15s ease;
  }
  .sc-disclose[open] .pts-caret{transform:rotate(180deg); color:var(--gold-bright);}
  /* Guarded: without :has() every breakdown renders OPEN rather than permanently
     shut. Verbose beats unreachable -- see the same guard on the Contender Ledger. */
  @supports selector(:has(*)){
    .score-breakdown{display:none;}
    .score-details:has(.sc-disclose[open]) .score-breakdown{display:block;}
    .score-details:has(.sc-disclose[open]) .score-row{background:var(--surface-raised);}
  }
  .pts-breakdown{
    padding:4px 18px 12px 54px;
    background:rgba(0,0,0,0.18);
    border-top:1px dashed var(--rule);
  }
  .pts-bd-row{
    display:flex; align-items:baseline; gap:12px;
    padding:5px 0;
  }
  .pts-bd-year{
    font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-faint);
    width:38px; flex-shrink:0;
  }
  .pts-bd-contest{flex:1; min-width:0; font-size:12.5px; color:var(--text-dim);}
  .pts-bd-place{
    font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text-faint);
    flex-shrink:0; width:34px; text-align:right;
  }
  .pts-bd-pts{
    font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600;
    color:var(--gold-bright); flex-shrink:0; width:34px; text-align:right;
  }
  .pts-bd-status{
    font-size:11px; line-height:1.5; margin-top:6px; padding-top:6px;
    border-top:1px solid var(--rule);
  }
  .pts-bd-status.ok{color:var(--green);}
  .pts-bd-status.gap{color:var(--amber);}
  .pts-bd-status.flag{color:var(--red); font-weight:600;}
  .pts-bd-status.known{color:var(--text-dim);}
  /* Same receipt on the athlete qualification card -- flat context, no ladder indent. */
  .pts-bd-athlete{margin-top:14px;}
  .pts-bd-athlete .pts-breakdown{padding:0; background:none; border-top:none;}
  /* CAREER PLACEMENT CHART (renderCareerChart). Chrome is deliberately recessive:
     hairline solid grid one shade off the surface -- never dashed, which reads as
     "projection" when it is just a grid -- and the data marks carry the ink. */
  /* SVG text and radii are in viewBox units, so letting the chart shrink to a
     phone's width scales them too: at 375px the axis labels rendered 6px, the dots
     3.5px across and the hover columns 8.6px -- under every legibility and
     hit-target floor at once. So the plot keeps a readable minimum width and
     SCROLLS INSIDE ITS OWN BOX instead, which is the same rule the wide tables on
     this site follow. The page body still never scrolls sideways, and the full
     data is in the Career History table directly below either way. */
  .career-chart{margin:0 0 16px; padding:0; overflow-x:auto;}
  .career-chart svg{display:block; width:100%; min-width:700px; height:auto;}
  .cc-grid{stroke:var(--rule); stroke-width:1; opacity:0.55;}
  .cc-axis{stroke:var(--rule); stroke-width:1;}
  .cc-ytick{fill:var(--text-faint); font-size:10px; text-anchor:end; font-variant-numeric:tabular-nums;}
  .cc-xtick{fill:var(--text-faint); font-size:10px; text-anchor:middle; font-variant-numeric:tabular-nums;}
  .cc-xtick.win{fill:var(--gold-bright); font-weight:600;}
  /* The field bar: the whole card, top to bottom. It is CONTEXT, and the first cut
     of this chart got the hierarchy backwards -- at 3px and 0.85 opacity the bars
     read as the data and the dots vanished among them, a row of icicles. Context
     recedes; the dots carry the ink. */
  .cc-field{stroke:var(--rule); stroke-width:1.5; stroke-linecap:round; opacity:0.38;}
  /* The Olympia field bar in dim gold. Held at 0.3 -- BELOW the grey bar's 0.38 --
     on purpose: it must read as the same recessive context layer, tinted, and not
     as a second foreground competing with the marks. Raising this turns a row of
     gold icicles back on, which is the exact failure the grey opacity was tuned
     away from. */
  .cc-field.oly{stroke:var(--gold); stroke-width:2; opacity:0.3;}
  /* 2px surface ring, not a border "outline" -- it is what keeps two dots from
     contests a week apart legible where they overlap. Applies to the Olympia
     diamond too, which is why the shape switch needed no separate rule. */
  .cc-dot{fill:var(--text-dim); stroke:var(--surface); stroke-width:2;}
  .cc-dot.win{fill:var(--gold-bright);}
  /* The IFBB Pro Card ring: green (not gold) so it never reads as a second
     Olympia signal, and unfilled so it doesn't compete with the dot/diamond it
     surrounds -- a halo, not a second mark. */
  .cc-procard-ring{fill:none; stroke:var(--green); stroke-width:2; opacity:0.75;}
  .cc-hit{fill:transparent;}
  .cc-mark:hover .cc-dot{fill:var(--gold);}
  .cc-mark:hover .cc-field{opacity:1; stroke:var(--text-faint);}
  /* Without this the generic hover rule above would strip an Olympia bar back to
     grey on hover -- the one moment the reader is looking hardest at it. */
  .cc-mark:hover .cc-field.oly{opacity:0.85; stroke:var(--gold);}
  .cc-mark:hover .cc-procard-ring{opacity:1;}
  .cc-caption{font-size:11.5px; color:var(--text-faint); line-height:1.6; margin-top:6px; max-width:78ch;}

  .pts-bd-title{
    font-family:'Oswald',sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:0.07em;
    color:var(--text-dim); margin-bottom:2px;
  }
  .rank{
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;
    color:var(--text-faint);
    width:24px;
    flex-shrink:0;
  }
  .score-name{flex:1; min-width:0;}
  .score-name .n{font-size:13.5px; color:var(--text); display:block;}
  .score-name .c{font-size:10.5px; color:var(--text-faint);}
  .bar-track{
    width:90px; height:5px; background:var(--rule); border-radius:3px; overflow:hidden; flex-shrink:0;
  }
  .bar-fill{height:100%; border-radius:3px;}
  .bar-fill.q{background:var(--green);}
  .bar-fill.b{background:var(--amber);}
  .pts{
    font-family:'IBM Plex Mono',monospace;
    font-weight:600;
    font-size:13px;
    width:34px;
    text-align:right;
    color:var(--gold-bright);
    flex-shrink:0;
  }
  .cutline{
    text-align:center;
    font-family:'IBM Plex Mono',monospace;
    font-size:10.5px;
    letter-spacing:0.08em;
    color:var(--amber);
    padding:8px 0;
    background:rgba(226,163,61,0.07);
    border-bottom:1px dashed var(--rule);
    text-transform:uppercase;
  }
  .cutline.tie{
    text-align:left;
    text-transform:none;
    letter-spacing:0.01em;
    font-family:'Inter',sans-serif;
    font-size:12px;
    font-weight:600;
    line-height:1.5;
    padding:10px 18px;
    background:rgba(226,163,61,0.12);
    border-bottom:1px solid rgba(226,163,61,0.4);
  }
  .score-row.tied{box-shadow:inset 3px 0 0 var(--amber);}
  .tie-badge{
    display:inline-block;
    font-family:'IBM Plex Mono',monospace;
    font-size:8.5px;
    font-weight:700;
    letter-spacing:0.05em;
    color:var(--amber);
    border:1px solid rgba(226,163,61,0.5);
    background:rgba(226,163,61,0.12);
    border-radius:8px;
    padding:1px 4px;
    margin-left:4px;
    vertical-align:middle;
  }

  /* CUTLINE RISK -- per-athlete projection chip on the points ladder */
  .risk-chip{
    flex-shrink:0;
    font-family:'Oswald',sans-serif;
    font-size:9px; font-weight:500; letter-spacing:0.05em; text-transform:uppercase;
    white-space:nowrap;
    border-radius:9px;
    padding:2px 7px;
    border:1px solid transparent;
  }
  /* The two warm chips carry LITERAL colours rather than --orange / --red, which is
     the one place on the site that deviates from the palette and needs its reason
     recorded. A chip sits on its own coloured tint, not on a flat surface, so the
     token is measured against the wrong background: --orange reached only 4.46:1
     here and --red 3.78:1, at 9px, which is exactly the size that can least afford
     it. Green and amber clear it untouched (5.63 and 5.74) so they keep the tokens.
     Both reds are now the SAME red -- two near-identical reds read as a bug -- and
     .chaos stays the loudest chip through its heavier border and weight plus a tint
     still stronger than .needs-two, rather than through a second colour.
     If you change a token, re-check these against the tinted chip, not the page. */
  .risk-chip.safe{color:var(--green); border-color:rgba(63,191,127,0.45); background:rgba(63,191,127,0.12);}
  .risk-chip.vuln{color:var(--amber); border-color:rgba(226,163,61,0.5); background:rgba(226,163,61,0.13);}
  .risk-chip.needs-win{color:#e18142; border-color:rgba(224,123,57,0.5); background:rgba(224,123,57,0.13);}
  .risk-chip.needs-two{color:#e77b6a; border-color:rgba(224,85,62,0.5); background:rgba(224,85,62,0.12);}
  .risk-chip.chaos{color:#e77b6a; border-color:rgba(224,85,62,0.7); background:rgba(224,85,62,0.14); font-weight:600;}
  /* Neutral: a state that is neither risk nor achievement. "Unranked" is the most
     common answer on an athlete profile -- most pros score no points in a given
     window -- and rendering the site's loudest red chip on hundreds of profiles
     would make an ordinary fact read as an alarm. Deliberately the only chip with
     no hue: it says "no position yet", not "in trouble". */
  .risk-chip.neutral{color:var(--text-dim); border-color:var(--rule); background:rgba(255,255,255,0.03);}

  /* The route out of a division card into its presentation view. Uses .ch-link
     (the shared gold "a way out of here" pill) so it reads as navigation, with
     the explanation OUTSIDE the control -- prose inside a control makes the whole
     thing scan as prose (see the navigation-graph note). */
  .present-cta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:2px 18px 14px;}
  .present-cta-note{font-size:11.5px; color:var(--text-faint);}

  /* The on-ramp link in the homepage countdown. Set apart from the sentence
     before it so it reads as an offer to a newcomer rather than more of the
     deadline copy a returning reader is already parsing. */
  .countdown-explain{
    display:inline-block; margin-left:4px; white-space:nowrap;
    color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(239,169,32,0.35);
  }
  .countdown-explain:hover,.countdown-explain:focus-visible{color:var(--gold-bright); border-bottom-color:var(--gold);}

  /* "What <name> needs" -- the qualification-path answer on an athlete profile
     (functions/athletes/[slug].js). Reuses .risk-chip above so the status word
     here and the chip on the division ladder are the same vocabulary; the block
     is gold-railed like .insight because it is the page's one forward-looking
     claim, and it must not read as another sourced fact. */
  .qual-path{
    background:var(--surface-raised);
    border-left:3px solid var(--gold);
    border-radius:2px;
    padding:14px 18px;
    margin:14px 0 4px;
  }
  .qual-path-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:7px;}
  .qual-path-head .eyebrow{
    font-family:'Oswald',sans-serif; color:var(--gold-bright);
    font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase;
  }
  .qual-path-title{
    font-family:'Oswald',sans-serif; font-size:17px; letter-spacing:0.01em;
    color:var(--text); margin-bottom:6px; line-height:1.3;
  }
  .qual-path-body{font-size:13.5px; line-height:1.65; color:var(--text-dim);}
  .qual-path-body b{color:var(--text);}
  .qual-path-note{
    margin-top:9px; padding-top:8px; border-top:1px solid var(--rule);
    font-size:11.5px; line-height:1.5; color:var(--text-faint);
  }

  .risk-legend{
    border-top:1px solid var(--rule);
    padding:12px 18px 4px;
  }
  .risk-legend-title{
    font-family:'Oswald',sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:0.07em;
    color:var(--text-dim); margin-bottom:9px;
  }
  .risk-legend-title span{color:var(--text-faint); letter-spacing:0.03em;}
  .risk-legend-items{
    display:flex; flex-wrap:wrap; gap:8px 16px;
  }
  .risk-legend-item{
    display:inline-flex; align-items:center; gap:6px;
    font-size:11.5px; color:var(--text-dim);
  }
  .risk-legend-note{
    font-size:11px; color:var(--text-faint); line-height:1.5; margin-top:10px; max-width:640px;
  }
  @media (max-width:540px){
    .scoreboard .bar-track{display:none;}
  }

  /* SCENARIO PICKER -- client-side "play out the remaining shows" what-if.
     Progressive enhancement layered on the server-rendered ladder above; the
     recompute is driven by the same points-schedule.js tables (serialized into
     the page) so it can never contradict the static projections. */
  .sp-card{padding:0;}
  .sp-intro{
    font-size:12.5px; color:var(--text-dim); line-height:1.55;
    padding:14px 18px; border-bottom:1px solid var(--rule);
  }
  .sp-intro b{color:var(--gold-bright);}
  .sp-note{display:block; margin-top:6px; font-size:11px; color:var(--text-faint);}
  .sp-root{padding:0;}
  .sp-controls{
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    padding:14px 18px; border-top:1px solid var(--rule);
  }
  /* Share stays muted (like Reset) until there's a pick, then goes gold via .ready. */
  .sp-share{
    font-family:'Oswald',sans-serif; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em;
    color:var(--text-dim); background:var(--surface-raised); border:1px solid var(--rule);
    border-radius:4px; padding:6px 12px; cursor:pointer; transition:background 0.12s ease, color 0.12s ease;
  }
  .sp-share.ready{color:var(--ink); background:var(--gold); border-color:var(--gold);}
  .sp-share.ready:hover{background:var(--gold-bright); border-color:var(--gold-bright);}
  .sp-boardhead{
    display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;
    padding:14px 18px 8px;
  }
  .sp-boardlabel{
    font-family:'Oswald',sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-dim);
  }
  .sp-reset{
    font-family:'Oswald',sans-serif; font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em;
    color:var(--text-dim); background:var(--surface-raised); border:1px solid var(--rule);
    border-radius:4px; padding:6px 12px; cursor:pointer;
  }
  .sp-reset:hover{color:var(--gold-bright); border-color:var(--gold);}
  .sp-summary{font-size:12px; color:var(--text-dim);}
  .sp-summary b{color:var(--gold-bright); font-family:'IBM Plex Mono',monospace;}
  .sp-shows{padding:6px 18px 10px; display:grid; grid-template-columns:1fr 1fr; gap:6px 14px;}
  @media (max-width:640px){ .sp-shows{grid-template-columns:1fr;} }
  .sp-show{border-bottom:1px solid var(--rule);}
  .sp-show-sum{
    display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; cursor:pointer;
    padding:9px 2px; list-style:none;
  }
  .sp-show-sum::-webkit-details-marker{display:none;}
  .sp-show-sum::before{content:'▸'; color:var(--text-faint); font-size:10px; margin-right:2px;}
  details[open] .sp-show-sum::before{content:'▾';}
  .sp-show-name{font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:0.02em; color:var(--text);}
  .sp-show-date{font-size:11px; color:var(--text-faint); font-family:'IBM Plex Mono',monospace;}
  .sp-elev{color:var(--gold); font-size:9px; letter-spacing:0.05em;}
  .sp-show-win{font-size:11px; color:var(--green); margin-left:auto;}
  .sp-show-win b{color:var(--green);}
  .sp-slots{display:flex; flex-wrap:wrap; gap:8px; padding:2px 0 12px 14px;}
  .sp-slot{display:flex; flex-direction:column; gap:3px;}
  .sp-slot-l{font-size:10px; color:var(--text-faint); font-family:'IBM Plex Mono',monospace;}
  .sp-slot-l em{color:var(--gold); font-style:normal;}
  .sp-slot select{
    font-family:'Inter',sans-serif; font-size:12px; color:var(--text);
    background:var(--surface-raised); border:1px solid var(--rule); border-radius:4px;
    padding:5px 6px; max-width:150px;
  }
  .sp-slot select:focus{outline:none; border-color:var(--gold);}
  .sp-board{padding:6px 0;}
  .sp-cut{
    text-align:center; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.08em;
    color:var(--gold); background:rgba(239,169,32,0.07); padding:5px; margin:2px 0;
    border-top:1px dashed rgba(239,169,32,0.4); border-bottom:1px dashed rgba(239,169,32,0.4);
  }
  /* Labels the pinned group: rows the reader picked that project outside the top
     50. Without the label the rank numbers appear to jump (…49, 50, 137) and read
     as a bug rather than as "these are yours". */
  .sp-pinned-head{
    font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:0.06em;
    text-transform:uppercase; color:var(--gold);
    padding:8px 18px 6px; border-top:1px dashed rgba(239,169,32,0.4);
  }
  .sp-row{
    display:flex; align-items:center; gap:8px; padding:7px 18px; border-bottom:1px solid var(--rule);
  }
  .sp-row:last-child{border-bottom:none;}
  .sp-row.q{background:rgba(63,191,127,0.05);}
  .sp-rank{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-faint); width:26px; flex-shrink:0;}
  .sp-nm{flex:1; font-size:13px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .sp-ct{color:var(--text-faint); font-size:11px; margin-left:6px;}
  .sp-pts{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:13px; color:var(--text); flex-shrink:0;}
  .sp-dp{color:var(--green); font-size:11px; margin-left:4px;}
  .sp-up{color:var(--green); font-size:11px; font-family:'IBM Plex Mono',monospace; flex-shrink:0;}
  .sp-down{color:var(--red); font-size:11px; font-family:'IBM Plex Mono',monospace; flex-shrink:0;}
  .sp-new{color:var(--gold-bright); font-size:9px; font-family:'Oswald',sans-serif; letter-spacing:0.05em; flex-shrink:0;}
  .sp-tag{
    font-family:'Oswald',sans-serif; font-size:8.5px; letter-spacing:0.05em; text-transform:uppercase;
    padding:2px 5px; border-radius:3px; border:1px solid; flex-shrink:0;
  }
  .sp-tag.in{color:var(--green); border-color:rgba(63,191,127,0.5); background:rgba(63,191,127,0.13);}
  .sp-tag.out{color:var(--red); border-color:rgba(224,85,62,0.5); background:rgba(224,85,62,0.13);}
  .sp-tag.auto{color:var(--gold-bright); border-color:rgba(239,169,32,0.5); background:rgba(239,169,32,0.13);}

  /* PATHS TO QUALIFICATION -- per-chaser "what gets them in" projection */
  .paths-head{
    font-size:12px; color:var(--text-dim); padding:12px 18px;
    border-bottom:1px solid var(--rule);
  }
  .paths-head b{color:var(--gold-bright); font-family:'IBM Plex Mono',monospace; font-weight:600;}
  .paths-row{
    display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px;
    padding:10px 18px;
    border-bottom:1px solid var(--rule);
    background:rgba(226,163,61,0.045);
  }
  .paths-row:last-of-type{border-bottom:none;}
  .paths-gap{
    font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--amber); flex-shrink:0;
  }
  .paths-need{
    flex-basis:100%;
    font-size:12.5px; color:var(--text-dim); line-height:1.5;
  }
  .paths-row.paths-actives{background:none;}
  .paths-row.paths-actives .paths-need{color:var(--text-faint);}

  /* UPCOMING-SHOW STAKES ("what to watch") */
  .stakes-header{border-left:3px solid var(--gold);}
  .stakes-header.upcoming{border-left-color:var(--gold);}
  .stakes-header.live{border-left-color:var(--green);}
  .stakes-header.awaiting{border-left-color:var(--amber);}
  .stakes-status{
    display:flex; align-items:center; gap:8px;
    font-family:'Oswald',sans-serif; font-size:13px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
    color:var(--gold-bright);
  }
  .stakes-header.live .stakes-status{color:var(--green);}
  .stakes-header.awaiting .stakes-status{color:var(--amber);}
  .stakes-status-dot{width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 6px currentColor;}
  .stakes-watch{font-size:14px; color:var(--text-dim); line-height:1.6; margin-top:8px;}
  .stakes-watch b{color:var(--text);}
  /* "Results land on this page" (Olympia only) + the page-level roster freshness
     stamp. Both sit under .stakes-watch in the preview header. */
  .stakes-landing{
    font-size:13.5px; color:var(--text); line-height:1.6; margin-top:10px;
    padding:9px 12px; border-left:2px solid var(--gold); background:var(--surface-raised);
  }
  .stakes-landing b{color:var(--gold-bright);}
  .stakes-asof{
    font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-faint);
    margin-top:8px; letter-spacing:0.02em;
  }
  .stakes-offer{font-size:13px; color:var(--text-dim); margin-bottom:6px;}
  .stakes-offer b{color:var(--gold-bright);}
  .stakes-cut{font-size:13px; color:var(--text-dim); margin-bottom:12px;}
  .stakes-cut b{color:var(--gold-bright); font-family:'IBM Plex Mono',monospace;}
  .stakes-hunt-head{
    font-family:'Oswald',sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:0.07em;
    color:var(--text-dim); margin:4px 0 8px; padding-top:10px; border-top:1px solid var(--rule);
  }
  .stakes-row{
    display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px;
    padding:8px 0; border-bottom:1px solid var(--rule);
  }
  .stakes-row:last-child{border-bottom:none;}
  .stakes-rank{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-faint); width:34px; flex-shrink:0;}
  .stakes-name{flex:1; min-width:140px;}
  .stakes-name .n{font-size:13.5px; color:var(--text);}
  .stakes-name .c{font-size:10.5px; color:var(--text-faint); margin-left:6px;}
  .stakes-gap{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--amber); flex-shrink:0;}
  .stakes-need{flex-basis:100%; font-size:12.5px; color:var(--text-dim); line-height:1.5;}
  /* Nx-champion / Olympia-debut tag next to an entrant's name on the Olympia's
     own contest page -- same gold as the hub's .locked-tag it's named after.
     The "how they got there" reason sentence that used to sit below each row
     (won <show> (date) / former-champion note) was tried and removed as too
     sparse in practice; this compact tag is what stayed. */
  .locked-tag{color:var(--gold);}

  /* ENTRY LIST (#2) -- sourced roster rows inside the stakes card */
  .entry-chip{
    font-family:'Oswald',sans-serif; font-size:9px; letter-spacing:0.05em; text-transform:uppercase;
    border-radius:8px; padding:1px 7px; white-space:nowrap; vertical-align:middle; margin-left:2px;
  }
  .entry-chip.confirmed{color:var(--gold-bright); border:1px solid rgba(201,162,75,0.45); background:rgba(201,162,75,0.12);}
  .entry-chip.announced{color:var(--text-dim); border:1px solid var(--rule); background:rgba(162,154,137,0.1);}
  .entry-chip.withdrawn{color:var(--text-faint); border:1px solid var(--rule); background:transparent;}
  .entry-chip.elsewhere{color:var(--text-dim); border:1px solid var(--rule); background:rgba(162,154,137,0.1); text-decoration:none;}
  .entry-chip.elsewhere:hover{color:var(--gold-bright); border-color:rgba(201,162,75,0.45);}
  /* Tone tints the "need" line the way the derived list never could -- in/near/far. */
  .entry-row.in .stakes-need{color:var(--green);}
  .entry-row.near .stakes-need{color:var(--amber);}
  .entry-row.far .stakes-need{color:var(--text-faint);}
  /* Demoted by COLOUR, not opacity. opacity:0.5 here composited --text-faint down to
     2.24:1 -- the withdrawn rows were the least readable text on the site, and no
     opacity below 1.0 can work, because --text-faint is already near the 4.5 floor
     so any dimming at all pushes it under. The line-through below is what actually
     says "withdrawn"; the colour just demotes it. Same fix as .show-card.withdrawn,
     .res-row.dq and .h2h-meet-mute. */
  .entry-row.withdrawn{color:var(--text-faint);}
  .entry-row.withdrawn .stakes-name .n{text-decoration:line-through;}
  .entry-row.withdrawn .stakes-need{color:var(--text-faint);}
  .entry-prov{
    margin-top:12px; padding-top:10px; border-top:1px solid var(--rule);
    font-size:11px; color:var(--text-faint); line-height:1.6;
  }
  .entry-prov b{color:var(--text-dim);}
  .entry-prov a{color:var(--text-dim); text-decoration:underline;}
  .entry-prov a:hover{color:var(--gold-bright);}

  /* NEXT UP */
  .nextup{
    margin-top:24px; margin-bottom:24px;
  }
  /* h2 AND h3 -- the same block sits at two different depths. On the homepage it is
     nested inside an h2 section so h3 is correct; on a division page it is a
     top-level section under the h1, where h3 would skip a level. The heading level
     tracks the document, the styling stays put. */
  /* Division switcher on /divisions/<slug>. Pills rather than a tab strip, because
     these are links to other pages -- see renderDivisionSwitch. Every pill clears
     24x24 on its own (7px padding on 11.5px Oswald gives ~29px tall, and the
     shortest label, "212 Bodybuilding", is far wider than 24), so the 6px gap
     doesn't have to carry the touch-target rule. Colours: --text-dim on --ink is
     6.7:1 and --ink on --gold is 9.2:1, both clear of AA. */
  .div-switch{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 20px;}
  .div-switch a{
    font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.04em;
    font-size:11.5px; line-height:1; padding:8px 12px; border-radius:999px;
    border:1px solid var(--rule); color:var(--text-dim); text-decoration:none;
    white-space:nowrap; transition:color .15s ease, border-color .15s ease;
  }
  .div-switch a:hover{color:var(--gold-bright); border-color:var(--gold);}
  .div-switch a:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
  .div-switch a[aria-current="page"]{
    color:var(--ink); background:var(--gold); border-color:var(--gold); font-weight:500;
  }
  @media(max-width:640px){
    /* One scrollable row on a phone -- twelve wrapped pills would push the standings
       most of a screen down, which is the problem this page just finished fixing. */
    .div-switch{flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; margin-bottom:16px;}
  }
  .nextup h2, .nextup h3{
    font-family:'Oswald',sans-serif;
    font-size:13.5px; text-transform:uppercase; letter-spacing:0.07em;
    color:var(--text-dim); margin-bottom:12px;
  }
  .show-strip{
    display:flex; gap:14px; overflow-x:auto; padding-bottom:6px;
  }
  .show-card{
    min-width:180px;
    background:var(--surface);
    border:1px solid var(--rule);
    border-radius:4px;
    padding:14px 16px;
    flex-shrink:0;
  }
  .show-card.elevated{border-color:var(--gold); background:rgba(201,162,75,0.06);}
  /* Happening now: green border matches the contest page's live stakes-header. */
  .show-card.live{border-color:var(--green); box-shadow:0 0 0 1px var(--green);}
  /* The Olympia itself, in a strip otherwise sorted by nothing but date. A glow,
     not just a border, so it reads as different while scrolling the strip --
     .elevated's flat gold border already means something else (bonus points)
     and would read as the same category if reused here. */
  .show-card.oly{border-color:var(--gold-bright); box-shadow:0 0 0 1px var(--gold-bright), 0 0 10px rgba(201,162,75,0.35); background:rgba(201,162,75,0.08);}
  .show-live{
    display:inline-flex; align-items:center; gap:5px; margin-bottom:8px;
    font-family:'Oswald',sans-serif; font-size:9.5px; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--green);
  }
  .show-live-dot{width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 6px currentColor;}
  /* A withdrawn entry stays visible -- the claim was true when it was made, and
     "was entered, then pulled out" is the story. Struck through, not deleted. */
  .show-card.withdrawn{color:var(--text-faint);}
  .show-card.withdrawn .show-name{text-decoration:line-through;}
  .show-date{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--gold-bright);}
  .show-name{font-size:13.5px; font-weight:600; margin:6px 0 4px; color:var(--text);}
  .show-loc{font-size:11.5px; color:var(--text-faint);}
  /* Scope line under a card head -- says what a section IS before the reader
     infers it wrong (e.g. a division schedule vs an athlete's own schedule). */
  .section-note{font-size:12px; color:var(--text-dim); margin-bottom:12px; line-height:1.5;}
  .section-note b{color:var(--text);}
  .show-tag{
    display:inline-block; margin-top:8px;
    font-family:'Oswald',sans-serif; font-size:9.5px; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--ink); background:var(--gold);
    padding:2px 7px; border-radius:2px;
  }

  footer{
    border-top:1px solid var(--rule);
    padding:26px 0 40px;
    color:var(--text-faint);
    font-size:11.5px;
    line-height:1.7;
  }
  /* Underlined ALWAYS, not just on hover. These links sit inline inside the
     disclaimer prose, so colour was the only thing distinguishing them from the
     text around them -- which Lighthouse flags, and which is invisible to a
     reader who can't separate gold from grey. Hover keeps the colour shift. */
  footer a{color:var(--gold-bright); text-decoration:underline; text-underline-offset:2px;}
  footer a:hover{color:var(--gold);}

  /* CONTENDER LEDGER (/contenders) + each division page's own contenders block */
  .cq-badge{font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase; border-radius:4px; padding:2px 6px; margin-left:6px; white-space:nowrap;}
  .cq-badge.q{color:var(--green); border:1px solid rgba(63,191,127,0.4);}
  .cq-badge.rise{color:var(--gold-bright); border:1px solid rgba(239,169,32,0.4);}
  .cq-badge.muted{color:var(--text-dim); border:1px solid var(--rule);}
  /* Career History row badge for the exact result where an IFBB Pro Card was
     earned -- same green as the chart's ring, on purpose, so the two surfaces
     read as one signal rather than two different colors for the same fact. */
  .cq-badge.procard{color:var(--green); border:1px solid rgba(63,191,127,0.4); background:rgba(63,191,127,0.08);}
  .cl-net.pos,.ch-net.pos{color:var(--green);}
  .cl-net.neg,.ch-net.neg{color:var(--red);}

  .contenders-home{background:var(--surface); border:1px solid var(--rule); border-radius:12px; padding:18px 20px; margin:24px 0 8px;}
  .ch-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:10px;}
  /* font-weight:inherit for the same reason .div-section-head carries it: this is a
     heading element now, and inheriting reproduces what the div resolved to. */
  .ch-title{font-size:16px; color:var(--text); letter-spacing:0.3px; font-weight:inherit;}
  .ch-sub{font-size:12.5px; color:var(--text-dim); margin-top:3px; max-width:70ch;}
  /* The return leg of the division <-> ledger loop, so it wears the same pill as the
     outbound one (.cl-division-link) rather than being a 13px 20px-tall text link --
     the route existed all along and simply didn't look like a route. Only the
     division pages render this block, despite the "home" in its function name. */
  .ch-link{
    display:inline-flex; align-items:center; flex:none;
    font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.05em;
    font-size:12px; line-height:1; padding:9px 16px; border-radius:999px;
    border:1px solid rgba(239,169,32,0.45); color:var(--gold);
    white-space:nowrap; text-decoration:none;
    transition:color .15s ease, border-color .15s ease, background .15s ease;
  }
  .ch-link:hover{color:var(--gold-bright); border-color:var(--gold); background:rgba(239,169,32,0.09);}
  .ch-link:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
  .ch-rows{display:flex; flex-direction:column;}
  .ch-row{display:flex; align-items:center; gap:12px; padding:8px 4px; border-top:1px solid var(--rule); text-decoration:none; color:var(--text);}
  .ch-row:hover{background:var(--surface-raised);}
  .ch-rank{width:18px; color:var(--text-faint); font-size:13px;}
  .ch-name{flex:1; min-width:0; font-size:14.5px;}
  .ch-thin{font-size:9.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--text-faint); border:1px dashed var(--rule); border-radius:3px; padding:1px 4px; white-space:nowrap;}
  .ch-net{font-size:16px; min-width:44px; text-align:right;}
  /* Head-to-head grid (renderHeadToHeadGrid). The table scrolls inside its own box
     so a 10-wide grid never scrolls the page sideways on a phone. */
  .h2h-grid{background:var(--surface); border:1px solid var(--rule); border-radius:12px; padding:18px 20px; margin:16px 0 8px;}
  .h2h-grid .ch-sub{margin-bottom:12px;}
  .hg-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .hg-table{border-collapse:collapse; font-size:13px;}
  .hg-table th,.hg-table td{border-top:1px solid var(--rule); padding:0; text-align:center;}
  .hg-corner,.hg-row{text-align:left !important; position:sticky; left:0; background:var(--surface); z-index:1;}
  .hg-row{padding:7px 12px 7px 0 !important; white-space:nowrap; font-weight:inherit; max-width:210px; overflow:hidden; text-overflow:ellipsis;}
  .hg-n{display:inline-block; width:18px; color:var(--text-faint); font-size:12px;}
  .hg-champ{font-size:9.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--gold); border:1px solid var(--rule); border-radius:3px; padding:1px 4px;}
  .hg-col{min-width:46px; padding:6px 0 !important; color:var(--text-faint); font-size:12px; font-weight:inherit; border-top:none !important;}
  .hg-cell a{display:block; min-width:46px; padding:8px 4px; color:inherit; text-decoration:none; font-family:'IBM Plex Mono',monospace;}
  .hg-cell a:hover,.hg-cell a:focus-visible{background:var(--surface-raised); outline:none; text-decoration:underline;}
  .hg-cell.pos{color:var(--green);}
  .hg-cell.neg{color:var(--red);}
  .hg-cell.even{color:var(--text-dim);}
  .hg-self{background:repeating-linear-gradient(45deg, transparent 0 4px, rgba(255,255,255,0.04) 4px 8px);}
  @media (max-width:560px){
    .h2h-grid{padding:16px 14px;}
    .hg-row{max-width:118px; font-size:12.5px; padding-right:8px !important;}
    .hg-champ{display:none;}
    .hg-col,.hg-cell a{min-width:40px;}
  }

  .cl-page{padding:30px 28px 10px;}
  .cl-h1{font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:30px; letter-spacing:0.5px; color:var(--text); margin-bottom:6px;}
  .cl-lede{font-size:14px; color:var(--text-dim); max-width:78ch; margin-bottom:8px;}
  /* The Olympia live board: one row per division, three derived steps. */
  .ob .card-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px;}
  .ob-tally{font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500; color:var(--text-faint); letter-spacing:0; text-transform:none;}
  .ob-live{color:var(--green);}
  .ob-note{font-size:12px; line-height:1.55; color:var(--text-faint); margin:0 0 10px; max-width:88ch;}
  .ob-row{display:grid; grid-template-columns:170px auto 1fr; gap:6px 14px; align-items:center; padding:8px 0; border-top:1px solid var(--rule);}
  .ob-div{font-family:'Oswald',sans-serif; font-size:13.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--text); text-decoration:none;}
  .ob-div:hover{color:var(--gold-bright);}
  .ob-steps{display:flex; gap:4px;}
  .ob-step{font-size:10px; text-transform:uppercase; letter-spacing:.05em; padding:2px 7px; border-radius:10px; border:1px solid var(--rule); color:var(--text-faint);}
  .ob-step.on{color:var(--green); border-color:var(--green); background:rgba(63,191,127,.10);}
  .ob-detail{font-size:12.5px; color:var(--text-dim); min-width:0;}
  .ob-row.in .ob-detail{color:var(--text);}
  .ob-win a{color:var(--gold-bright); font-weight:600;}
  .ob-card{color:var(--text-dim); text-decoration:underline;}
  .ob-foot{margin:10px 0 0; font-size:12.5px;}
  .ob-foot a{color:var(--gold-bright);}
  @media (max-width:640px){
    .ob-row{grid-template-columns:1fr auto;}
    .ob-detail{grid-column:1 / -1;}
  }
  .cl-olympia-note{font-size:13px; line-height:1.55; color:var(--text-dim); max-width:78ch; margin:4px 0 14px; padding:10px 13px; border-radius:8px; background:rgba(201,162,75,0.08); border:1px solid rgba(201,162,75,0.35);}
  .cl-olympia-note b{color:var(--text);}
  .cl-olympia-note a{color:var(--gold-bright);}
  /* Three ledes are rendered, one per filter view (see LEDES in contenders.js);
     this shows only the one matching .cl-page[data-view]. Server-set, so a no-JS
     load already lands on exactly one, and the tab script moves it on a filter
     click. Written as :not() so an unrecognised data-view shows all three rather
     than none -- a wordy page beats a page missing its own explanation. */
  .cl-page[data-view="notyet"] .cl-lede:not([data-cl-lede="notyet"]),
  .cl-page[data-view="all"] .cl-lede:not([data-cl-lede="all"]),
  .cl-page[data-view="qualified"] .cl-lede:not([data-cl-lede="qualified"]){display:none;}
  .cl-tabs{margin:14px 0 0;}
  .cl-division-panel{display:none;}
  .cl-division-panel.active{display:block;}
  .cl-division-panel .cl-method{margin-top:18px;}
  .cl-method{font-size:13px; color:var(--text-dim); line-height:1.6; max-width:78ch; margin-bottom:10px;}
  .cl-method b{color:var(--text);}
  .cl-method a{color:var(--gold);}
  /* The folded full-methodology disclosure under the one-sentence lead. Native
     <details>, styled to read as a quiet footnote toggle rather than a card. */
  .cl-method-more{max-width:78ch; margin:0 0 22px;}
  .cl-method-more summary{
    cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px;
    font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.05em;
    font-size:11px; font-weight:500; color:var(--text-faint);
  }
  .cl-method-more summary::-webkit-details-marker{display:none;}
  .cl-method-more summary::after{content:"\25BE"; font-size:10px; transition:transform 0.15s ease;}
  .cl-method-more[open] summary::after{transform:rotate(180deg);}
  .cl-method-more summary:hover{color:var(--gold-bright);}
  .cl-method-body{padding:8px 0 0;}
  .cl-method-body p{font-size:13px; color:var(--text-dim); line-height:1.6; margin:0 0 10px;}
  .cl-method-body b{color:var(--text);}
  .cl-champion{font-size:13px; color:var(--text-dim); margin:-8px 0 20px;}
  .cl-champion b{color:var(--gold-bright);}
  .cl-champion a{color:var(--gold-bright);}
  .ch-champion{font-size:12.5px; color:var(--text-dim); padding:8px 4px 2px; border-top:1px solid var(--rule);}
  .ch-champion b{color:var(--gold-bright);}
  /* Link from a ledger division panel to that division's own page. Same pill
     vocabulary as .div-switch and the gap-ladder toggle, so "this is a way out of
     here" looks the same everywhere on the site. */
  /* Each division's ledger is a tab panel, and a tab panel repeating its own
     title is the point rather than a duplication of the tab above it: the tabs
     are buttons, so without this the page carried one h1 and nothing else --
     twelve divisions of ranked head-to-head records read as a single block. The
     inactive panels are display:none but still in the document, which is what a
     crawler and a no-JS reader need. */
  .cl-panel-h2{
    font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.06em;
    font-size:19px; font-weight:600; color:var(--text); margin:18px 0 10px;
  }
  .cl-division-link{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.05em;
    font-size:12px; line-height:1; padding:9px 16px; border-radius:999px;
    border:1px solid rgba(239,169,32,0.45); color:var(--gold); text-decoration:none;
    margin:2px 0 18px; transition:color .15s ease, border-color .15s ease, background .15s ease;
  }
  .cl-division-link:hover{color:var(--gold-bright); border-color:var(--gold); background:rgba(239,169,32,0.09);}
  .cl-division-link:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
  .cl-filters{display:flex; gap:8px; margin:0 0 4px; flex-wrap:wrap;}
  .cl-filter{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.04em; font-size:12px; font-weight:500; padding:7px 13px; background:transparent; color:var(--text-dim); border:1px solid var(--rule); border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:7px;}
  .cl-filter:hover{color:var(--text); border-color:var(--text-faint);}
  .cl-filter.active{color:var(--ink); background:var(--gold); border-color:var(--gold);}
  /* 0.85, not 0.7. This is the one contrast failure the --text-faint fix did NOT
     cover, because the colour here is fine and the OPACITY was the problem: 0.7 of
     --text-dim over --ink composites to #777164, which is 3.86:1 against the same
     --ink. A CSS audit that greps for colour tokens cannot see this -- the computed
     style still reports --text-dim. 0.85 composites to #8d8677, 5.17:1. The active
     state already passed (ink on gold, 7.02:1), so both states can share one value. */
  .cl-fcount{font-size:11px; opacity:0.85;}
  .cl-filter-empty{font-size:13px; color:var(--text-dim); padding:20px 4px;}
  /* Filter visibility -- rank numbers stay as the athlete's field position. */
  .cl-list[data-view="qualified"] .cl-item[data-group="notyet"]{display:none;}
  .cl-list[data-view="notyet"] .cl-item[data-group="qualified"]{display:none;}
  .cl-quality{font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--green); border:1px solid rgba(63,191,127,0.35); border-radius:4px; padding:2px 6px; margin-left:4px; white-space:nowrap;}
  .cl-thin{font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--text-faint); border:1px dashed var(--rule); border-radius:4px; padding:2px 6px; margin-left:4px; white-space:nowrap;}
  /* "What's next": a sourced entry for a show still to come. Solid border = on the
     official competitor list; dashed + muted (.soft) = an announced lineup only,
     which must never read as the official roster. */
  .cl-next{display:inline-block; font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--gold); border:1px solid rgba(191,149,63,0.45); border-radius:4px; padding:2px 6px; margin-left:4px; white-space:nowrap; text-decoration:none;}
  a.cl-next:hover{border-color:var(--gold); color:var(--gold-bright);}
  .cl-next.soft{color:var(--text-dim); border-style:dashed; border-color:var(--rule);}
  /* Last outing. Filled, not outlined, so it reads as an event rather than another
     status pill -- and no arrow glyph anywhere: see lastOutingChipHtml. */
  .cl-last{display:inline-block; font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase; border:1px solid var(--rule); border-radius:4px; padding:2px 6px; margin-left:4px; white-space:nowrap; text-decoration:none; color:var(--text-dim);}
  .cl-last.up{color:var(--green); border-color:rgba(63,191,127,0.35); background:rgba(63,191,127,0.08);}
  .cl-last.down{color:var(--red); border-color:rgba(224,90,90,0.35); background:rgba(224,90,90,0.08);}
  a.cl-last:hover{filter:brightness(1.25);}
  .cl-list{border-top:1px solid var(--rule);}
  .cl-item{border-bottom:1px solid var(--rule);}
  /* No cursor:pointer -- the row is a plain container now, not a control. Giving a
     non-interactive row a pointer cursor would promise a click that does nothing. */
  .cl-row{display:flex; align-items:center; gap:14px; padding:13px 6px;}
  .cl-item:has(.cl-disclose[open]) .cl-row{background:var(--surface-raised);}
  .cl-rank{width:22px; color:var(--text-faint); font-size:14px;}
  .cl-name{flex:1; min-width:0; font-size:15.5px;}
  .cl-net{font-size:20px; min-width:46px; text-align:right; color:var(--text-dim);}
  .cl-wl{min-width:118px; text-align:right; font-size:12.5px; color:var(--text-dim);}
  /* The disclosure control. 32x32 because it is now the ONLY way to expand a row,
     so it has to clear the 24px touch-target minimum comfortably rather than be a
     13px glyph. The caret inside stays 13px -- the target grew, the mark did not. */
  .cl-disclose{display:flex; flex:none;}
  .cl-toggle{
    list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
    width:32px; height:32px; border-radius:6px; color:var(--text-faint);
    transition:color .15s, background .15s;
  }
  .cl-toggle::-webkit-details-marker{display:none;}
  .cl-toggle:hover{color:var(--gold-bright); background:var(--surface);}
  .cl-toggle:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
  .cl-caret{font-size:13px; line-height:1; transition:transform .15s;}
  .cl-disclose[open] .cl-caret{transform:rotate(180deg);}
  .cl-recs{padding:4px 6px 16px 42px;}
  /* Guarded, so a browser without :has() shows every panel EXPANDED rather than
     leaving them permanently shut. Degraded but complete beats unopenable -- an
     unguarded display:none here would hide the ledger's actual content outright. */
  @supports selector(:has(*)){
    .cl-recs{display:none;}
    .cl-item:has(.cl-disclose[open]) .cl-recs{display:block;}
  }
  .cl-rec-group{margin-bottom:12px;}
  .cl-rec-contest{font-size:12.5px; color:var(--text-dim); margin-bottom:5px;}
  .cl-rec-contest a{color:var(--gold); text-decoration:none;}
  .cl-rec{display:flex; align-items:center; gap:10px; font-size:13.5px; padding:2px 0;}
  .cl-res{width:16px; text-align:center; font-weight:600;}
  .cl-rec.w .cl-res{color:var(--green);}
  .cl-rec.l .cl-res{color:var(--red);}
  .cl-opp{flex:1; min-width:0;}
  .cl-score{color:var(--text-faint); font-size:12.5px;}
  /* Sits INSIDE .cl-opp, after the opponent's name, so it's ordinary inline content
     that wraps with the text. Making it a flex sibling of the name looked tidier on
     a wide screen but could not shrink (it's nowrap), so on a phone it squeezed the
     name into a mid-word wrap around itself. */
  .cl-card{display:inline-block; margin-left:8px; font-size:11.5px; color:var(--gold); border:1px solid var(--rule); border-radius:999px; padding:1px 7px; white-space:nowrap;}
  .cl-card.tie{color:var(--ink); background:var(--gold-bright); border-color:var(--gold-bright); font-weight:600;}
  /* ---- Latest results strip (homepage) ---- */
  /* THE WEEKEND BOARD -- shows in flight, with the state of each one's record.
     Shares .lr-* proportions on purpose: it sits directly above Latest Results
     and two adjacent strips of show cards in different sizes would read as two
     unrelated features rather than one timeline. What differs is the STATUS
     LINE, which is the whole reason the board exists. */
  .weekend-board{border-bottom:1px solid var(--rule); padding:26px 0 28px;}
  .wb-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px;}
  .wb-head h2{font-size:17px; letter-spacing:.09em; color:var(--text);}
  .wb-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:12px;}
  .wb-card{background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:13px 15px; border-top:2px solid var(--rule);}
  .wb-status{display:flex; align-items:center; gap:7px; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; font-family:'Oswald',sans-serif;}
  .wb-dot{width:7px; height:7px; border-radius:50%; background:var(--text-faint); flex-shrink:0;}
  .wb-date{margin-top:9px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint);}
  .wb-name{margin-top:3px; font-size:15px; font-weight:600;}
  .wb-name a{color:var(--text); text-decoration:none;}
  .wb-name a:hover{color:var(--gold-bright);}
  .wb-loc{font-size:12px; color:var(--text-dim); margin-top:2px;}
  .wb-detail{margin-top:9px; padding-top:8px; border-top:1px solid var(--rule); font-size:11.5px; color:var(--text-dim); line-height:1.5;}
  /* One colour per pipeline state. Green is reserved for SCORED -- the finished
     article -- so a reader can scan the strip for it; "results in" is gold
     because it is genuinely partial, not a success. */
  .wb-scored{border-top-color:var(--green);}
  .wb-scored .wb-status{color:var(--green);}
  .wb-scored .wb-dot{background:var(--green);}
  .wb-results{border-top-color:var(--gold);}
  .wb-results .wb-status{color:var(--gold);}
  .wb-results .wb-dot{background:var(--gold);}
  .wb-live{border-top-color:var(--green);}
  .wb-live .wb-status{color:var(--green);}
  .wb-live .wb-dot{background:var(--green); animation:wb-pulse 2s ease-in-out infinite;}
  .wb-upcoming .wb-status{color:var(--text-dim);}
  .wb-waiting .wb-status{color:var(--text-faint);}
  @keyframes wb-pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
  @media (prefers-reduced-motion: reduce){ .wb-live .wb-dot{animation:none;} }
  .wb-foot{font-size:12px; color:var(--text-faint); line-height:1.6; margin-top:12px; max-width:78ch;}
  .wb-foot b{color:var(--text-dim);}

  .latest-results{border-bottom:1px solid var(--rule); padding:26px 0 28px;}
  .lr-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px;}
  .lr-head h2{font-size:17px; letter-spacing:.09em; color:var(--text);}
  .lr-all{font-size:12px; color:var(--gold); text-decoration:none; white-space:nowrap;}
  .lr-all:hover{color:var(--gold-bright);}
  .lr-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px;}
  .lr-card{background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:14px 15px;}
  .lr-date{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint);}
  .lr-name{margin-top:3px; font-size:15px; font-weight:600;}
  .lr-name a{color:var(--text); text-decoration:none;}
  .lr-name a:hover{color:var(--gold-bright);}
  .lr-loc{font-size:12px; color:var(--text-dim); margin-top:2px;}
  .lr-won{margin-top:11px; border-top:1px solid var(--rule); padding-top:9px; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--gold);}
  /* A grid on the LIST, with each row transparent to it (display:contents), so the
     names line up on one edge no matter how wide the widest division label is --
     "Women's Bodybuilding" is nearly twice "Bikini", and a per-row flex min-width
     could only ever be right for one card. max-content sizes the column to the
     longest label in THAT card, which is why each card stays internally square. */
  .lr-lines{margin-top:8px; display:grid; grid-template-columns:max-content minmax(0,1fr); column-gap:16px; row-gap:7px; align-items:baseline;}
  .lr-line{display:contents;}
  .lr-div{font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint);}
  .lr-win{font-size:13px; min-width:0;}
  .lr-win a{color:var(--text); text-decoration:none;}
  .lr-win a:hover{color:var(--gold-bright);}
  .lr-foot{font-size:12px; color:var(--text-faint); line-height:1.6; margin-top:12px; max-width:78ch;}
  /* Two columns can't hold a long label and a long name on a phone, so the row
     goes back to ordinary flow and stacks -- display:contents would leave the
     pairs indistinguishable under a single row-gap. */
  @media (max-width:520px){
    .lr-lines{display:flex; flex-direction:column; gap:8px;}
    .lr-line{display:block;}
    .lr-div{display:block;}
  }
  .cl-foot{font-size:12px; color:var(--text-faint); line-height:1.6; margin:16px 0 6px; max-width:78ch;}
  /* Sits ABOVE the rows, unlike .cl-foot, because it changes how they read. */
  .cl-chasers{font-size:12.5px; color:var(--text-dim); line-height:1.6; margin:10px 0 12px; max-width:78ch; border-left:2px solid var(--rule); padding-left:10px;}
  .cl-empty{color:var(--text-dim); padding:20px 0;}
  /* The scorecard chip can't shrink (nowrap), so on a narrow screen it squeezes the
     opponent's name into a mid-word wrap around it. Letting the row wrap drops the
     chip onto its own line, indented under the name it belongs to. */
  @media(max-width:640px){ .cl-wl{display:none;} .cl-recs{padding-left:20px;} }

  ::-webkit-scrollbar{height:6px; width:6px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{background:var(--rule); border-radius:3px;}
  *{scrollbar-color:var(--rule) transparent; scrollbar-width:thin;}