/*
  MCSN shared stylesheet. One file for the whole site.
  Cache-bust with ?v=STAMP on the <link>. Same stamp on every page per deploy.
  Palette comes from the Playoff Pick'em landing so the network reads as one system.
*/

/* ---------- tokens ---------- */
:root{
  --field:#142430;
  --field-deep:#0e1b24;
  --steel:#1d3241;
  --steel-hi:#24394a;
  --ice:#dfe9ef;
  --frost:#9fc3d6;
  --muted:#93aab8;
  --line:rgba(223,233,239,.16);
  --line-hi:rgba(223,233,239,.34);
  --glow:#1b3242;

  /* branch accents. Home uses these; each branch page uses its own below. */
  --c-fantasy:#6fd08c;
  --c-rankings:#f2c14e;
  --c-pickem:#9fc3d6;
  --c-media:#ff5a4e;
  --c-office:#e9e2d2;

  --cond:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --text:Geist,system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:var(--cond);   /* each branch swaps its headline face */

  --pad:clamp(16px,3.2vw,40px);
  --max:1240px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- branches: one palette each ---------- */
/* body[data-section] picks the palette. Pick'em keeps the root palette (ice on steel). */
[data-section="home"]{
  --field:#121417;--field-deep:#0c0d0f;--glow:#121417;--steel:#1c1f24;--steel-hi:#252930;
  --frost:#dfe3e8;--muted:#8a9099;
}
[data-section="fantasy"]{
  --field:#0f2219;--field-deep:#0a1811;--glow:#173526;--steel:#163126;--steel-hi:#1d3d2f;
  --frost:var(--c-fantasy);--muted:#8fae9c;
}
[data-section="rankings"]{
  --field:#17150f;--field-deep:#100f0a;--glow:#2a2414;--steel:#221f16;--steel-hi:#2c281c;
  --frost:var(--c-rankings);--muted:#a89f86;
}
[data-section="media"]{
  --field:#120d0e;--field-deep:#0b0809;--glow:#2a1416;--steel:#1f1517;--steel-hi:#2a1c1f;
  --frost:var(--c-media);--muted:#a3918f;
}
/* Office is the one light branch: paper and ink. */
[data-section="office"]{
  --field:#efe9dc;--field-deep:#e6dfcf;--glow:#f7f3ea;--steel:#e4dccb;--steel-hi:#dbd2bf;
  --ice:#1b1a17;--frost:#8a5a1f;--muted:#6b665b;
  --line:rgba(27,26,23,.14);--line-hi:rgba(27,26,23,.32);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  margin:0;min-height:100svh;display:flex;flex-direction:column;
  background:radial-gradient(120% 70% at 50% 0%,var(--glow) 0%,var(--field) 55%) fixed,var(--field);
  color:var(--ice);
  font:400 17px/1.55 var(--text);
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
}
main{flex:1}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--ice);outline-offset:4px;border-radius:4px}
img{max-width:100%;display:block}
.num{font-variant-numeric:tabular-nums}
.wrap{width:min(var(--max),100%);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* branch band: a thin bar in the branch color across the top of every inner page */
body::before{content:"";position:fixed;inset:0 0 auto;height:3px;background:var(--frost);z-index:20}
[data-section="home"]::before{display:none}

/* ---------- nav ---------- */
/* placeholder holds the nav's height until site.js swaps it in */
#mcsn-nav{height:calc(44px + 2 * clamp(14px,2.4vw,28px))}
.nav{
  display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);
  width:min(var(--max),100%);margin:0 auto;
  padding:clamp(14px,2.4vw,28px) var(--pad);
}
.nav__mark{
  flex:none;width:44px;height:44px;display:grid;place-items:center;
  border:1.5px solid var(--line);border-radius:10px;text-decoration:none;
  font:800 15px/1 var(--text);transition:border-color .2s,background .2s;
}
.nav__mark:hover{border-color:var(--ice);background:rgba(223,233,239,.06)}
.nav__links{display:flex;align-items:center;gap:clamp(4px,1vw,10px);flex:1;min-width:0}
.nav__links a{
  position:relative;padding:10px 10px;text-decoration:none;white-space:nowrap;
  font:600 21px/1 var(--cond);letter-spacing:.01em;color:var(--muted);
  transition:color .2s;
}
.nav__links a:hover{color:var(--ice)}
.nav__links a[aria-current="page"]{color:var(--ice)}
.nav__links a[aria-current="page"]::after{
  content:"";position:absolute;left:10px;right:10px;bottom:2px;height:2px;background:var(--frost);border-radius:2px;
}
.nav__links .nav__office{margin-left:auto}

@media (max-width:640px){
  .nav{gap:10px;padding-right:0}
  .nav__links{overflow-x:auto;scrollbar-width:none;padding-right:var(--pad);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .nav__links::-webkit-scrollbar{display:none}
  .nav__links a{font-size:19px;padding:10px 8px}
  .nav__links .nav__office{margin-left:0}
}

/* ---------- footer ---------- */
.foot{
  width:min(var(--max),100%);margin:0 auto;
  padding:48px var(--pad) 40px;
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;
  color:var(--muted);font-size:14px;border-top:1px solid var(--line);
}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ice)}
.foot__links{display:flex;flex-wrap:wrap;gap:6px 20px;margin-left:auto}
@media (max-width:640px){.foot__links{margin-left:0}}

/* ---------- home: five names, nothing else ---------- */
.home{
  flex:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,4vh,40px);
  width:min(var(--max),100%);margin:0 auto;padding:clamp(32px,8vh,96px) var(--pad);
}
.home h1{margin:0;font:700 14px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.home__list{display:grid;gap:clamp(0px,.8vh,8px)}
.home__list a{
  display:flex;align-items:center;gap:.28em;width:fit-content;min-height:44px;text-decoration:none;
  font:800 clamp(56px,10vw,128px)/.95 var(--cond);letter-spacing:-.01em;
  transition:color .2s;
}
.home__list a::before{content:"";flex:none;width:.14em;height:.6em;border-radius:2px;background:var(--acc)}
.home__list a:hover,.home__list a:focus-visible{color:var(--acc)}
.home__list [data-route="fantasy"]{--acc:var(--c-fantasy)}
.home__list [data-route="rankings"]{--acc:var(--c-rankings)}
.home__list [data-route="pickem"]{--acc:var(--c-pickem)}
.home__list [data-route="media"]{--acc:var(--c-media)}
.home__list [data-route="office"]{--acc:var(--c-office)}

/* ---------- page head (inner pages) ---------- */
.head{padding-top:clamp(12px,4vh,48px);padding-bottom:clamp(28px,5vh,56px)}
.head h1{margin:0;font:800 clamp(64px,10vw,132px)/.86 var(--display);letter-spacing:-.01em}
.head p{margin:18px 0 0;max-width:46ch;font-size:clamp(17px,1.8vw,20px);color:var(--muted)}
.head p b{color:var(--ice);font-weight:600}
.head__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.btn{
  display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;
  text-decoration:none;font-weight:700;font-size:16px;transition:background .2s,border-color .2s;
}
.btn--solid{background:var(--ice);color:var(--field)}
.btn--solid:hover{opacity:.88}
.btn--line{border:1.5px solid var(--line-hi)}
.btn--line:hover{border-color:var(--ice)}

/* ---------- fantasy: the ladder ---------- */
/* left column: one climb, Pro at the bottom to Dream at the top. right column: dynasty. */
.ladder{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:48px clamp(28px,4vw,64px);align-items:start;
  padding-bottom:72px;
}
.climb{display:grid;gap:40px}
.side-col{display:grid;gap:40px;position:sticky;top:24px}

.track h2{margin:0;font:800 clamp(30px,3.2vw,40px)/1 var(--cond)}
.track__summary{margin:8px 0 18px;color:var(--muted);font-size:15px}
.rungs{list-style:none;margin:0;padding:0;display:grid;gap:6px}

.rung{
  --lg:#1d3241;--lg-accent:var(--frost);
  display:grid;grid-template-columns:42px 52px minmax(0,1fr) auto;align-items:center;gap:14px;
  min-height:76px;padding:12px 18px 12px 14px;border-radius:8px;text-decoration:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--lg) 70%,var(--steel)) 0%,var(--steel) 62%);
  box-shadow:inset 4px 0 0 var(--lg-accent),0 0 0 1px var(--line);
  transition:box-shadow .2s,background .2s;
}
.rung:hover{box-shadow:inset 4px 0 0 var(--lg-accent),0 0 0 1px var(--frost)}
.rung__step{font:800 30px/1 var(--cond);color:var(--lg-accent);text-align:center}
.rung__crest{width:52px;height:52px;border-radius:6px;overflow:hidden;background:rgba(0,0,0,.25);display:grid;place-items:center}
.rung__crest img{width:100%;height:100%;object-fit:cover}
.rung__crest span{font:800 11px/1 var(--cond);color:var(--lg-accent);letter-spacing:-.01em}
.rung__name{display:block;font:700 clamp(22px,2vw,27px)/1.05 var(--cond);letter-spacing:.005em}
.rung__meta{display:block;margin-top:4px;font-size:14px;color:var(--muted)}
.rung__meta .lock{color:var(--ice)}
.rung__lead{text-align:right;line-height:1.2}
.rung__score{display:block;font:700 26px/1 var(--cond);font-variant-numeric:tabular-nums}
.rung__who{display:block;margin-top:4px;font-size:13px;color:var(--muted);max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* the buy-in line between Foundation and the free feeder */
.buyin{
  display:flex;align-items:center;gap:14px;margin:-16px 0;
  font:600 18px/1 var(--cond);color:var(--frost);
}
.buyin::before,.buyin::after{content:"";flex:1;height:0;border-top:2px dashed var(--line-hi)}
.buyin svg{width:16px;height:16px;flex:none}

/* board callout in the side column */
.callout{padding:24px;border-radius:8px;border:1px solid var(--line)}
.callout h2{margin:0 0 6px;font:800 30px/1 var(--cond)}
.callout p{margin:0 0 18px;color:var(--muted);font-size:15px}
.callout p b{color:var(--ice);font-weight:600}

@media (max-width:900px){
  .ladder{grid-template-columns:1fr}
  .side-col{position:static}
}
@media (max-width:520px){
  .rung{grid-template-columns:34px 44px minmax(0,1fr);gap:12px;padding-right:14px}
  .rung__crest{width:44px;height:44px}
  .rung__lead{grid-column:3;text-align:left;display:flex;align-items:baseline;gap:8px}
  .rung__score{font-size:20px}
  .rung__who{margin-top:0;max-width:none}
}

/* ---------- league page ---------- */
.lg{--lg:#1d3241;--lg-accent:var(--frost)}
.lg-hero{
  background:linear-gradient(180deg,color-mix(in srgb,var(--lg) 70%,transparent) 0%,transparent 100%);
  border-top:4px solid var(--lg-accent);
}
.lg-hero__inner{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(18px,3vw,40px);
  padding-top:clamp(28px,5vh,56px);padding-bottom:clamp(28px,5vh,56px);
}
.lg-hero__crest{
  width:clamp(96px,13vw,168px);aspect-ratio:1;border-radius:14px;overflow:hidden;
  background:rgba(0,0,0,.3);box-shadow:0 0 0 1px var(--line),0 18px 48px rgba(0,0,0,.35);
  display:grid;place-items:center;
}
.lg-hero__crest img{width:100%;height:100%;object-fit:cover}
.lg-hero__crest span{font:800 clamp(22px,3vw,34px)/1 var(--cond);color:var(--lg-accent)}
.lg-hero h1{margin:0;font:800 clamp(48px,8vw,108px)/.88 var(--cond);letter-spacing:-.01em}
.lg-hero__meta{margin:14px 0 0;color:var(--muted);font-size:clamp(16px,1.6vw,18px)}
.lg-hero__meta b{color:var(--ice);font-weight:600}
.lg-hero__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

.notice{margin:0 0 8px;padding:12px 16px;border-radius:8px;background:var(--steel);box-shadow:inset 3px 0 0 var(--frost);font-size:15px;color:var(--muted)}
.notice[hidden]{display:none}

.sec{padding-top:48px;padding-bottom:8px}
.sec__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;margin-bottom:18px}
.sec h2{margin:0;font:800 clamp(34px,4vw,48px)/1 var(--cond)}
.sec__note{margin:0;color:var(--muted);font-size:15px}
.empty{padding:18px 0;color:var(--muted)}

/* matchup tickets: same build as the pick'em tickets */
.tickets{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px}
.ticket{border-radius:8px;background:var(--steel);box-shadow:0 0 0 1px var(--line);overflow:hidden}
.ticket--feature{box-shadow:0 0 0 1.5px var(--lg-accent)}
.ticket__cap{display:block;padding:8px 16px 0;font:600 15px/1.2 var(--cond);color:var(--lg-accent)}
.ticket__row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:12px 16px}
.ticket__row + .ticket__row{border-top:1px solid var(--line)}
.ticket__team{min-width:0;font-weight:600;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ticket__val{flex:none;font:700 26px/1 var(--cond);font-variant-numeric:tabular-nums;color:var(--frost)}
.ticket__row.won .ticket__val{color:var(--ice)}
.ticket__row.lost .ticket__team,.ticket__row.lost .ticket__val{color:var(--muted)}

/* last week: two facts */
.recap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.recap article{padding:22px;border-radius:8px;border:1px solid var(--line)}
.recap h3{margin:0 0 4px;font:600 17px/1.3 var(--text);color:var(--muted)}
.recap strong{display:block;font:800 clamp(44px,5vw,60px)/1 var(--cond);font-variant-numeric:tabular-nums}
.recap p{margin:10px 0 0;font-size:15px;color:var(--muted)}
.recap p b{color:var(--ice);font-weight:600}

/* standings */
.table-wrap{overflow-x:auto}
.standings{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.standings th{padding:0 12px 10px;text-align:left;font:600 15px/1 var(--cond);color:var(--muted);border-bottom:1px solid var(--line-hi)}
.standings td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}
.standings .r{text-align:right}
.standings .rk{width:44px;font:800 24px/1 var(--cond);color:var(--lg-accent)}
.standings .team b{display:block;font-weight:600}
.standings .team small{display:block;margin-top:2px;color:var(--muted);font-size:13px}
.standings .rec{font:700 22px/1 var(--cond)}
.standings .pwr b{font:700 22px/1 var(--cond)}
.standings .pwr small{display:block;margin-top:3px;color:var(--muted);font-size:12px}
.standings tr.cutline td{padding:8px 12px 10px;border-top:2px dashed var(--lg-accent);border-bottom:0;font:600 14px/1 var(--cond);color:var(--lg-accent)}
.standings tbody tr:not(.cutline):hover td{background:var(--steel)}

/* league history */
.seasons{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.seasons li{padding:16px 18px;border-radius:8px;border:1px solid var(--line)}
.seasons b{display:block;font:800 34px/1 var(--cond)}
.seasons span{display:block;margin-top:6px;font-size:14px;color:var(--muted)}
.seasons li:first-child{border-color:var(--lg-accent)}

@media (max-width:640px){
  .lg-hero__inner{grid-template-columns:1fr}
  .recap{grid-template-columns:1fr}
  .standings .pa,.standings .pf{display:none}
  .standings th,.standings td{padding-left:8px;padding-right:8px}
}

/* ---------- rankings: the board ---------- */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:20px}
.chip{
  min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line-hi);background:none;color:var(--ice);
  font:600 18px/1 var(--cond);cursor:pointer;transition:border-color .2s,background .2s,color .2s;
}
.chip:hover{border-color:var(--ice)}
.chip[aria-pressed="true"]{background:var(--frost);border-color:var(--frost);color:var(--field)}
.chip small{margin-left:6px;font:600 14px/1 var(--text);opacity:.75}
.field{
  min-height:44px;padding:0 14px;border-radius:8px;border:1.5px solid var(--line-hi);background:var(--steel);color:var(--ice);
  font:400 16px/1 var(--text);
}
.filters .field[type="search"]{flex:1 1 200px;max-width:320px}

.board-t .mv{width:56px;font:700 17px/1 var(--cond)}
.board-t .mv.up{color:var(--c-fantasy)}
.board-t .mv.dn{color:var(--c-media)}
.board-t .mv.eq{color:var(--muted)}
.board-t .lg-tag{display:inline-flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap}
.board-t .lg-tag::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--dot,var(--frost))}
.board-t .lg-tag:hover{text-decoration:underline}
.score{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.score b{font:700 22px/1 var(--cond);min-width:3ch;text-align:right}
.score i{display:block;width:72px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.score i::after{content:"";display:block;height:100%;width:var(--w);background:var(--band,var(--frost))}
.band-lift{--band:var(--c-rankings)}
.band-contender{--band:var(--ice)}
.band-holding{--band:var(--muted)}
.band-sift{--band:var(--c-media)}
.band-name{display:block;margin-top:3px;font-size:12px;color:var(--muted);text-align:right}

.method{margin:40px 0 0;padding:20px 22px;border-radius:8px;border:1px solid var(--line)}
.method summary{cursor:pointer;font:700 22px/1.2 var(--cond);min-height:28px}
.method dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin:18px 0 0}
.method dt{color:var(--muted);font-size:14px}
.method dd{margin:2px 0 0;font:800 30px/1 var(--cond)}
.method p{margin:16px 0 0;color:var(--muted);font-size:15px}

@media (max-width:640px){
  .board-t .lgc,.board-t .mv{display:none}
  .board-t{table-layout:fixed}
  .board-t .rk{width:34px}
  .board-t .team{width:auto;overflow:hidden}
  .board-t .team b,.board-t .team small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .board-t .rec{width:54px}
  .board-t th.r:last-child,.board-t td.r:last-child{width:76px}
  .board-t .score{gap:6px}
  .board-t .score i{width:24px}
}

/* ---------- media: the story list ---------- */
.stories{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.stories li{border-top:1px solid var(--line)}
.story{
  position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 32px;
  padding:clamp(20px,3vw,32px) 0;text-decoration:none;
}
.story time{font:600 18px/1.2 var(--cond);color:var(--frost);padding-top:6px}
.story h2{margin:0;font:800 clamp(32px,4.4vw,56px)/.95 var(--cond);letter-spacing:-.005em;transition:color .2s}
.story p{grid-column:2;margin:0;max-width:60ch;color:var(--muted);font-size:16px}
.story:hover h2,.story:focus-visible h2{color:var(--frost)}
.story:focus-visible{outline-offset:6px}
.desk{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding:40px 0 72px;color:var(--muted);font-size:15px}

@media (max-width:640px){
  .story{grid-template-columns:1fr}
  .story p{grid-column:1}
}

/* ---------- office: rules and help ---------- */
.office-sec{padding-top:40px;padding-bottom:16px}
.office-sec h2{margin:0 0 18px;font:800 clamp(34px,4vw,48px)/1 var(--cond)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;counter-reset:step}
.steps li{padding:22px;border-radius:8px;background:var(--steel);counter-increment:step}
.steps li::before{content:counter(step,decimal-leading-zero);display:block;margin-bottom:10px;font:800 22px/1 var(--cond);color:var(--frost)}
.steps b{display:block;font:700 26px/1.05 var(--cond)}
.steps span{display:block;margin-top:6px;font-size:15px;color:var(--muted)}
.pay{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.pay li{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:0 18px;border-radius:8px;border:1px solid var(--line-hi);font-weight:600}
.pay small{font-weight:400;font-size:13px;color:var(--muted)}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;min-height:56px;cursor:pointer;font:700 22px/1.2 var(--cond)}
.faq p{margin:0 0 18px;max-width:60ch;color:var(--muted)}
.office-end{padding-bottom:72px}

/* ---------- branch identities ----------
   Color sets the mood. These set the voice.
   Fantasy: condensed scoreboard (the base styles above).
   Rankings: data terminal. Mono, square corners, grid paper.
   Pick'em: its own standalone page (ice bracket).
   Media: editorial. Serif, italic decks, hairline rules.
   Office: the rulebook. Ink on paper, numbered clauses, no ornament.
*/

/* Rankings: terminal */
[data-section="rankings"]{--display:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace}
body[data-section="rankings"]{
  background:
    linear-gradient(rgba(242,193,78,.035) 1px,transparent 1px) 0 0/32px 32px,
    linear-gradient(90deg,rgba(242,193,78,.035) 1px,transparent 1px) 0 0/32px 32px,
    radial-gradient(120% 70% at 50% 0%,var(--glow) 0%,var(--field) 55%) fixed,
    var(--field);
}
[data-section="rankings"] .head h1{font:800 clamp(46px,8vw,104px)/.9 var(--display);letter-spacing:-.06em;text-transform:uppercase}
[data-section="rankings"] .head p{font:500 15px/1.5 var(--display);text-transform:uppercase;letter-spacing:.04em}
[data-section="rankings"] .chip{border-radius:2px;font:700 13px/1 var(--display);text-transform:uppercase;letter-spacing:.06em}
[data-section="rankings"] .chip small{font:600 12px/1 var(--display)}
[data-section="rankings"] .field,
[data-section="rankings"] .notice,
[data-section="rankings"] .method{border-radius:2px}
[data-section="rankings"] .field{font-family:var(--display);font-size:14px}
[data-section="rankings"] .standings th{font:700 11px/1 var(--display);text-transform:uppercase;letter-spacing:.12em}
[data-section="rankings"] .standings td{border-bottom-style:dashed}
[data-section="rankings"] .standings .rk{font:800 20px/1 var(--display);letter-spacing:-.04em}
[data-section="rankings"] .standings .rec,
[data-section="rankings"] .score b{font:700 18px/1 var(--display);letter-spacing:-.04em}
[data-section="rankings"] .board-t .mv{font:700 14px/1 var(--display)}
[data-section="rankings"] .band-name{font:500 11px/1 var(--display);text-transform:uppercase;letter-spacing:.06em}
[data-section="rankings"] .score i{height:8px;border-radius:0}
[data-section="rankings"] .method summary{font:700 14px/1.4 var(--display);text-transform:uppercase;letter-spacing:.08em}
[data-section="rankings"] .method dd{font:800 28px/1 var(--display)}
[data-section="rankings"] .method p{font-family:var(--display);font-size:13px}

/* Media: editorial */
[data-section="media"]{--display:"Newsreader",Georgia,"Times New Roman",serif}
[data-section="media"] .head h1{font:italic 500 clamp(72px,11vw,150px)/.9 var(--display);letter-spacing:-.03em}
[data-section="media"] .head p{font:italic 400 clamp(19px,2vw,23px)/1.4 var(--display)}
[data-section="media"] .stories{border-top:2px solid var(--frost)}
[data-section="media"] .stories li:first-child{border-top:0}
[data-section="media"] .story time{font:600 12px/1.6 var(--text);text-transform:uppercase;letter-spacing:.14em}
[data-section="media"] .story h2{font:500 clamp(30px,4vw,50px)/1.05 var(--display);letter-spacing:-.015em}
[data-section="media"] .story p{font:italic 400 19px/1.45 var(--display)}
[data-section="media"] .btn{border-radius:0}

/* Office: rulebook */
[data-section="office"]{--display:var(--text)}
[data-section="office"] main{counter-reset:clause}
[data-section="office"] .head h1{font:700 clamp(60px,9vw,120px)/.9 var(--display);letter-spacing:-.055em}
[data-section="office"] .office-sec{counter-increment:clause}
[data-section="office"] .office-sec h2{
  display:flex;align-items:baseline;gap:14px;padding-top:14px;border-top:2px solid var(--ice);
  font:700 clamp(26px,3vw,34px)/1.1 var(--display);letter-spacing:-.03em;
}
[data-section="office"] .office-sec h2::before{content:"\00A7\00A0" counter(clause);font-weight:500;color:var(--frost)}
[data-section="office"] .steps{gap:0 28px}
[data-section="office"] .steps li{padding:16px 0 18px;border-radius:0;background:none;border-bottom:1px solid var(--line-hi)}
[data-section="office"] .steps li::before{content:counter(clause) "." counter(step);font:600 14px/1 var(--text);color:var(--frost)}
[data-section="office"] .steps b{font:700 21px/1.2 var(--display);letter-spacing:-.02em}
[data-section="office"] .pay li{border-radius:0;border-width:0 0 1px;padding:0}
[data-section="office"] .faq details{border-color:var(--line-hi)}
[data-section="office"] .faq summary{font:600 19px/1.3 var(--display);letter-spacing:-.01em}

/* ---------- media: article pages ---------- */
.art{--measure:68ch;padding-bottom:80px}
.art-header{padding-top:clamp(20px,5vh,56px);padding-bottom:28px;max-width:calc(var(--measure) + 2 * var(--pad) + 120px)}
.art-label{display:flex;flex-wrap:wrap;gap:6px 18px;font:600 12px/1.4 var(--text);text-transform:uppercase;letter-spacing:.14em;color:var(--frost)}
.art-header h1{margin:16px 0 0;font:500 clamp(40px,6vw,76px)/1.02 var(--display);letter-spacing:-.025em}
.art-dek{margin:18px 0 0;font:italic 400 clamp(20px,2.2vw,25px)/1.4 var(--display);color:var(--muted)}
.art-event-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:14px;font-weight:600;font-size:15px;text-decoration:underline;text-underline-offset:4px}
.art-meta{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:22px;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.art-meta a{color:var(--ice);text-decoration:none;font-weight:600}
.art-meta a:hover{text-decoration:underline}

.art-hero{margin-top:8px;margin-bottom:40px}
.art-hero img{width:100%;max-height:72vh;object-fit:cover}
.art-hero figcaption{margin-top:10px;font:italic 400 15px/1.4 var(--display);color:var(--muted)}

.art-results-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px;margin-top:8px;margin-bottom:40px}
.art-results-hero > div{display:flex;flex-direction:column;justify-content:center;min-height:240px;padding:28px;background:var(--steel)}
.art-results-copy span,.art-results-art span{font:600 12px/1.4 var(--text);text-transform:uppercase;letter-spacing:.14em;color:var(--frost)}
.art-results-hero strong{display:block;margin:10px 0 6px;font:500 clamp(64px,9vw,120px)/.9 var(--display);letter-spacing:-.03em}
.art-results-hero p,.art-results-hero small{margin:0;color:var(--muted);font-size:15px}
.art-results-art img{width:100%;height:100%;max-height:320px;object-fit:contain}
.meridian-mark{display:grid;place-items:center;min-height:240px;padding:28px;background:var(--steel)}
.meridian-mark img{width:min(220px,60%)}

.art-layout{display:grid;grid-template-columns:240px minmax(0,var(--measure));gap:clamp(28px,5vw,72px);align-items:start}
.art-scorecard{position:sticky;top:24px;padding-top:12px;border-top:2px solid var(--frost)}
.art-scorecard > p{margin:0 0 10px;font:600 12px/1.4 var(--text);text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.art-scorecard ol{list-style:none;margin:0;padding:0}
.art-scorecard li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 10px;padding:10px 0;border-bottom:1px solid var(--line)}
.art-scorecard li span{grid-column:1/-1;font-size:12px;color:var(--muted)}
.art-scorecard li strong{font-weight:600;font-size:15px}
.art-scorecard li b{font:600 15px/1.3 var(--text);font-variant-numeric:tabular-nums;color:var(--frost)}
.art-scorecard > div{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.art-scorecard > div span{font-size:13px;color:var(--muted)}
.art-scorecard > div strong{font:500 30px/1 var(--display)}

.art-copy{font:400 19px/1.7 var(--display)}
.art-copy p{margin:0 0 1.15em}
.art-copy a{color:inherit;text-decoration-color:var(--frost);text-underline-offset:3px}
.art-lede{font-size:22px;line-height:1.6}
.art-lede::first-letter{float:left;margin:.08em .1em 0 0;font:500 3.6em/.8 var(--display);color:var(--frost)}
.art-copy h2{margin:1.8em 0 .6em;font:600 clamp(26px,2.6vw,32px)/1.15 var(--display);letter-spacing:-.015em}
.art-copy blockquote{margin:1.6em 0;padding:4px 0 4px 24px;border-left:3px solid var(--frost);font:italic 500 clamp(24px,2.8vw,32px)/1.3 var(--display)}
.art-history{margin:1.8em 0;overflow-x:auto;border-block:1px solid var(--line-hi)}
.art-history table{width:100%;min-width:520px;border-collapse:collapse;font:400 15px/1.4 var(--text)}
.art-history th{padding:14px 12px 10px;text-align:left;font:600 11px/1 var(--text);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.art-history td{padding:12px;border-top:1px solid var(--line);vertical-align:top}
.art-history td:first-child{font-weight:600;font-variant-numeric:tabular-nums}
.art-history b{color:var(--frost);font-weight:600}
.art-history caption{caption-side:bottom;padding:10px 12px;text-align:left;font-size:12px;color:var(--muted)}
.art-sources{margin-top:2.4em!important;padding-top:16px;border-top:1px solid var(--line);font:400 14px/1.6 var(--text);color:var(--muted)}
.art-sources a{color:var(--muted)}
.meridian-sign{display:flex;align-items:center;gap:14px;margin:2em 0;font:italic 500 18px/1 var(--display)}
.meridian-sign img{width:48px;height:48px}
.art-end{margin-top:2.4em!important}
.art-end a{display:inline-flex;align-items:center;min-height:44px;font:600 16px/1 var(--text);text-decoration:none;border-bottom:2px solid var(--frost)}

@media (max-width:900px){
  .art-layout{grid-template-columns:1fr}
  .art-scorecard{position:static;order:2}
  .art-results-hero{grid-template-columns:1fr}
  .art-results-hero > div,.meridian-mark{min-height:0}
}
@media (max-width:520px){
  .art-copy{font-size:18px}
  .art-lede{font-size:20px}
}

/* ---------- motion preference ---------- */
@media (prefers-reduced-motion:reduce){
  .rung,.home__list a{transition:none}
}