/* ==========================================================================
   Our FIFA — Direction D.

   C's bento shape, A's editorial restraint, one token set driving both
   themes. Fonts are self-hosted (public/fonts) rather than pulled from a
   CDN: no third-party request on page load, no FOUT, and the site keeps
   working if the CDN doesn't.

   THE COLOUR RULE
   The brand colour is a FIELD, never an accent chip. Football deploys
   colour as a whole surface — Premier League deep purple (#3D195B),
   Champions League midnight navy, FIFA blue and gold — and a field sits
   behind cream text without ever sharing an edge with a data colour, so
   it cannot compete with the data for meaning.

   The hue is pitch green, deliberately not a clone of any governing
   body's brand given the "not affiliated" line in the footer. Two values
   of one hue because a single value fails: the deep tint scores 1.04:1
   against the dark page, i.e. invisible.

   Small-scale chroma is reserved entirely for the three stance colours.
   That's measured, not stylistic — every accent-sized warm colour tested
   collided with the oppose orange (brass #B8945F, gold #BF9B30 and
   antique #A8853F all landed ΔE 12-13 against a floor of 15, some as low
   as 2.4 for red-blind readers), and every burgundy light enough to read
   on near-black converged straight back onto it.
   ========================================================================== */

@font-face{font-family:'InstrumentSerif';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'InstrumentSans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-sans-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'InstrumentSans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/instrument-sans-latin-500-normal.woff2) format('woff2');}
@font-face{font-family:'InstrumentSans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/instrument-sans-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:'GeistMono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/geist-mono-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'GeistMono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/geist-mono-latin-500-normal.woff2) format('woff2');}

:root[data-theme="light"]{
  --bg:#F5F3EF; --tile:#FFFFFF; --tile-2:#EFECE6;
  --line:#E4E0D8; --line-2:#CFC9BE;
  --text:#16150F; --text-2:#5A564C; --text-3:#78746A;   /* 4.66:1 on tile */
  --field:#123A2A; --field-text:#F5F3EF; --field-line:rgba(245,243,239,.22);
}
:root[data-theme="dark"]{
  --bg:#101211; --tile:#181B19; --tile-2:#1F2320;
  --line:#2A2E2B; --line-2:#3B413D;
  --text:#EDEAE2; --text-2:#9DA298; --text-3:#838880;   /* 4.79:1 on tile */
  --field:#1C5240; --field-text:#F5F3EF; --field-line:rgba(245,243,239,.20);
}
:root{
  /* stance triplet — validated on BOTH themes (light tile #FFFFFF, dark
     tile #181B19): all checks pass on each, worst CVD pair ΔE 9.4,
     normal-vision floor 20.9. Identical across themes on purpose, so a
     reader who switches never relearns what a colour means. */
  --support:#3987e5; --oppose:#d95926; --mixed:#199e70;
  --serif:'InstrumentSerif',Georgia,serif;
  --sans:'InstrumentSans',system-ui,-apple-system,sans-serif;
  --mono:'GeistMono',ui-monospace,SFMono-Regular,monospace;
  --r:14px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15.5px;line-height:1.55;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s;}
a{color:inherit;}
.wrap{max-width:1280px;margin:0 auto;padding:0 22px 56px;}

/* ---------- sticky nav ----------
   Lives outside .bento (see index.html) because a grid item can only stick
   within its own grid area. The wrapper carries the page background so the
   10px gutter above the rounded tile doesn't let content show through as it
   scrolls under, and a soft fade below keeps the edge from looking cut. */
.navwrap{position:sticky;top:0;z-index:60;padding:10px 0 8px;background:var(--bg);transition:background .25s;}
.navwrap::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;pointer-events:none;
  background:linear-gradient(var(--bg),transparent);}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:10px;}
.t{background:var(--tile);border-radius:var(--r);padding:30px 32px;border:1px solid var(--line);transition:background .25s,border-color .25s;}
.t.sub{background:var(--tile-2);}
.t.field{background:var(--field);color:var(--field-text);border-color:var(--field);display:flex;flex-direction:column;justify-content:space-between;}
.t.pad0{padding:0;overflow:hidden;}
.s3{grid-column:span 3}.s4{grid-column:span 4}.s5{grid-column:span 5}.s6{grid-column:span 6}.s7{grid-column:span 7}.s8{grid-column:span 8}.s12{grid-column:span 12}

/* ---------- nav ---------- */
.nav{display:flex;align-items:center;gap:22px;padding:16px 32px;flex-wrap:wrap;}
.mark{font-family:var(--serif);font-size:23px;letter-spacing:-.015em;text-decoration:none;}
.mark i{font-style:normal;color:var(--text-3);}
.nav-links{margin-left:auto;display:flex;gap:22px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);}
.nav-links a{text-decoration:none;}
.nav-links a:hover{color:var(--text);}
.live{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);}
.live .d{width:5px;height:5px;border-radius:50%;background:var(--text-2);animation:bl 1.8s ease-in-out infinite;}
@keyframes bl{0%,100%{opacity:1}50%{opacity:.2}}
.toggle{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;background:transparent;border:1px solid var(--line-2);color:var(--text-2);padding:7px 13px;border-radius:99px;cursor:pointer;transition:.2s;}
.toggle:hover{border-color:var(--text-2);color:var(--text);}

/* ---------- bulletin ---------- */
.bul{display:flex;align-items:center;gap:15px;padding:15px 32px;font-size:14.5px;flex-wrap:wrap;}
.bul b{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;background:var(--field);color:var(--field-text);padding:5px 10px;border-radius:3px;flex:none;}
.bul em{font-family:var(--mono);font-size:9.5px;font-style:normal;letter-spacing:.06em;color:var(--text-3);margin-left:auto;flex:none;}

/* ---------- hero ---------- */
.kick{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-bottom:26px;}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.6vw,78px);line-height:.98;letter-spacing:-.022em;margin:0 0 22px;}
.sub-txt{font-size:16px;color:var(--text-2);max-width:48ch;margin:0;}

.field .big{font-family:var(--serif);font-weight:400;font-size:clamp(60px,8vw,104px);line-height:.86;letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.field .big small{font-size:.4em;opacity:.5;letter-spacing:-.01em;}
.field .cap{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;margin-top:16px;opacity:.65;}
/* Monochrome on purpose: hero figure, not the stance chart. A stance colour
   here would both muddy the contrast and break the rule that stance colour
   only ever appears on neutral tiles. */
.fbar-track{position:relative;height:5px;border-radius:99px;background:var(--field-line);}
.fbar-track i{display:block;height:100%;border-radius:99px;background:var(--field-text);opacity:.92;}
.fbar-tick{position:absolute;top:-5px;bottom:-5px;width:1.5px;background:var(--field-text);}
.fbar-lbl{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;margin-top:12px;opacity:.55;}
.field .three{display:flex;gap:26px;margin-top:26px;padding-top:20px;border-top:1px solid var(--field-line);}
.field .three .n{font-family:var(--serif);font-size:29px;line-height:1;font-variant-numeric:tabular-nums;}
.field .three .l{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;margin-top:7px;opacity:.6;}

/* ---------- tile heads ---------- */
.th{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:13px;margin-bottom:20px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.th h3{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin:0;}
.th .meta{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);display:flex;align-items:center;gap:7px;}
.th .meta .d{width:5px;height:5px;border-radius:50%;background:var(--text-2);animation:bl 1.8s ease-in-out infinite;}

/* ---------- video stage ---------- */
.stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;}
/* The iframe paints its own background, so if YouTube is blocked, offline or
   killed by an extension the element renders a light grey box — jarring on
   the dark theme. Forcing black means a failed embed degrades to a quiet
   empty frame rather than a flash of white. */
.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000;color-scheme:dark;}
.stage-cap{padding:18px 26px 22px;font-family:var(--mono);font-size:9.5px;line-height:1.75;letter-spacing:.04em;color:var(--text-3);}
.stage-cap b{color:var(--text-2);font-weight:500;}

/* ---------- news panel ---------- */
.filters{display:flex;gap:6px;flex-wrap:wrap;}
.filters button{font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;background:transparent;border:1px solid var(--line);color:var(--text-3);padding:5px 11px;border-radius:99px;cursor:pointer;transition:.15s;}
.filters button:hover{border-color:var(--line-2);color:var(--text-2);}
.filters button.on{background:var(--field);border-color:var(--field);color:var(--field-text);}
/* Tuned to sit close to the video tile's natural height (16:9 stage plus
   caption) so the two don't leave a dead gap beside each other. */
.news{max-height:318px;overflow-y:auto;}
.nitem{display:block;text-decoration:none;padding:13px 0;border-top:1px solid var(--line);}
.nitem:first-child{border-top:0;padding-top:0;}
.nitem:hover .ntitle{text-decoration:underline;}
.nmeta{display:flex;align-items:center;gap:9px;margin-bottom:5px;font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3);}
.nsrc{color:var(--text-2);font-weight:500;}
.ntime{margin-left:auto;}
.ntitle{font-size:14.5px;line-height:1.4;color:var(--text);margin:0;}
.ntag{border:1px solid var(--line-2);border-radius:99px;padding:2px 7px;font-size:8px;}

/* ---------- compose + thread ---------- */
.crow{display:flex;gap:9px;margin-bottom:9px;}
.compose input,.compose select,.compose textarea{font:inherit;font-family:var(--sans);font-size:14px;width:100%;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:11px 13px;color:var(--text);}
.compose textarea{resize:vertical;min-height:56px;}
.compose ::placeholder{color:var(--text-3);}
.consent{display:flex;align-items:flex-start;gap:9px;margin-top:11px;cursor:pointer;}
.consent input{width:15px;height:15px;flex:none;margin-top:1px;accent-color:var(--field);}
.consent span{font-size:12.5px;line-height:1.45;color:var(--text-3);}
.consent:hover span{color:var(--text-2);}
.cfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:11px;flex-wrap:wrap;}
.hint{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);}
.btn{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;background:var(--field);color:var(--field-text);border:0;padding:12px 24px;border-radius:99px;cursor:pointer;}
.btn:disabled{opacity:.5;cursor:default;}

.thread{margin-top:20px;max-height:330px;overflow-y:auto;}
.cmt{padding:16px 0;border-top:1px solid var(--line);}
.cmt:first-child{border-top:0;padding-top:0;}
.chead{display:flex;align-items:center;gap:10px;margin-bottom:7px;flex-wrap:wrap;}
.cname{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;}
.ctime{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--text-3);margin-left:auto;}
.st{font-family:var(--mono);font-size:8.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--text-2);display:flex;align-items:center;gap:6px;}
.st i{width:7px;height:7px;border-radius:50%;display:inline-block;}
.cbody{font-size:15.5px;margin:0;color:var(--text);}
.chips{margin-top:9px;display:flex;gap:6px;flex-wrap:wrap;}
.chip{font-family:var(--mono);font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);border:1px solid var(--line);padding:3px 8px;border-radius:99px;}

/* ---------- readouts ---------- */
.narr{font-family:var(--serif);font-size:23px;line-height:1.34;color:var(--text);margin:0 0 22px;letter-spacing:-.008em;}
.delta{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-top:14px;}
.split{display:flex;height:11px;border-radius:99px;overflow:hidden;gap:2px;margin-bottom:14px;}
.split i{height:100%;}
.key{display:flex;gap:22px;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);flex-wrap:wrap;}
.key span{display:flex;align-items:center;gap:7px;}
.key b{width:8px;height:8px;border-radius:50%;display:inline-block;}
.row{display:flex;align-items:center;gap:12px;margin-bottom:11px;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;}
.row .l{width:84px;flex:none;color:var(--text-3);text-transform:uppercase;}
.row .t2{flex:1;height:5px;background:var(--tile-2);border-radius:99px;display:flex;overflow:hidden;gap:1px;}
.row .t2 i{height:100%;}
.row .n{width:22px;text-align:right;color:var(--text-3);font-variant-numeric:tabular-nums;}
.neutral{background:var(--text-2);}

/* ---------- vote ---------- */
.vtrack{position:relative;height:42px;display:flex;gap:3px;margin-top:30px;}
.vseg{height:100%;display:flex;align-items:center;padding:0 17px;font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;border-radius:99px;}
.v-opp{background:var(--oppose);color:#fff;}
.v-und{background:var(--tile-2);border:1px solid var(--line);color:var(--text-3);}
.thresh{position:absolute;top:-9px;bottom:-9px;width:1.5px;background:var(--text);border-radius:2px;}
.thresh::after{content:attr(data-l);position:absolute;top:-19px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:8.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text);white-space:nowrap;}

/* ---------- confederations ---------- */
.crow2{display:grid;grid-template-columns:150px 78px 176px 1fr;gap:18px;align-items:center;padding:17px 0;border-bottom:1px solid var(--line);}
.crow2:last-child{border-bottom:0;}
.cnm{font-family:var(--serif);font-size:21px;letter-spacing:-.012em;}
.cvt{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--text-3);text-transform:uppercase;}
.cst{font-family:var(--mono);font-size:8.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;display:flex;align-items:center;gap:8px;}
.cst i{width:7px;height:7px;border-radius:50%;flex:none;}
.s-out i{background:var(--oppose);} .s-out{color:var(--text);}
.s-rev i{background:var(--text-2);} .s-rev{color:var(--text-2);}
.s-non i{background:var(--line-2);} .s-non{color:var(--text-3);}
.cdt{font-size:14px;color:var(--text-2);}
.cdt a{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--text-3);}

/* ---------- money ---------- */
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.mn{font-family:var(--serif);font-size:40px;line-height:1;letter-spacing:-.025em;color:var(--text);}
.ml{font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);margin-top:13px;line-height:1.6;}
.msrc{font-family:var(--mono);font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-top:8px;opacity:.75;}
.pending{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);border:1px solid var(--line-2);padding:5px 11px;display:inline-block;border-radius:99px;}

/* Revenue-by-cycle chart.
   No new chroma: the money figures are not stance data, so they stay in ink
   and the only encoding that carries meaning is actual-vs-projected, done
   with texture (hatch) plus a direct label rather than a second colour.
   The track's full width IS $20bn, so its right edge doubles as the scale
   maximum and the proposed-raise marker — the same bar-with-threshold idiom
   already used by the "path to 106 votes" component.
   Reserves are deliberately NOT plotted here: reserves are a stock and
   revenue is a flow, and putting them on one axis would be a lie. */
.mchart{margin-top:8px;}
.mcap{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);margin-bottom:14px;padding-left:116px;}
.mcap b{color:var(--text);font-weight:500;}
.mrow{display:grid;grid-template-columns:104px 1fr;gap:12px;align-items:center;margin-bottom:11px;}
.mrlab{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-2);}
.mtrack{position:relative;height:20px;border-right:2px solid var(--text);}
.mbar{display:block;height:100%;border-radius:0 4px 4px 0;background:var(--text);}
.mbar.proj{background:transparent;border:1px solid var(--text-2);
  background-image:repeating-linear-gradient(45deg,transparent,transparent 4px,var(--text-2) 4px,var(--text-2) 5px);}
/* Direct-labelled at the bar end rather than in a right-hand column. In a
   column the values sat to the RIGHT of the $20bn marker, which read as
   though $6.42bn exceeded $20bn. Labelling in place also makes the empty
   track to the right of each bar legible as the gap to the raise, which is
   the entire point of the chart. */
.mrval{position:absolute;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap;}
.mlegend{display:flex;gap:20px;margin-top:16px;padding-left:116px;font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);flex-wrap:wrap;}
.mlegend span{display:flex;align-items:center;gap:7px;}
.mlegend i{width:15px;height:9px;display:inline-block;background:var(--text);}
.mlegend i.proj{background:transparent;border:1px solid var(--text-2);
  background-image:repeating-linear-gradient(45deg,transparent,transparent 4px,var(--text-2) 4px,var(--text-2) 5px);}
.mnote{font-size:13.5px;color:var(--text-2);margin:22px 0 0;max-width:74ch;}
.mnote b{color:var(--text);font-weight:600;}
details.mtable{margin-top:20px;}
details.mtable summary{font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);cursor:pointer;}
details.mtable summary:hover{color:var(--text-2);}
table.mdata{width:100%;border-collapse:collapse;margin-top:14px;font-size:13px;}
table.mdata th{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);text-align:left;font-weight:500;padding:0 12px 8px 0;border-bottom:1px solid var(--line);}
table.mdata td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);color:var(--text-2);vertical-align:top;}
table.mdata td:first-child{color:var(--text);}
table.mdata a{font-family:var(--mono);font-size:9px;color:var(--text-3);}
@media(max-width:700px){.mcap,.mlegend{padding-left:0}.mrow{grid-template-columns:78px 1fr 66px;gap:8px}}

.empty{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);padding:14px 0;}
footer{font-family:var(--mono);font-size:9px;line-height:2;letter-spacing:.05em;color:var(--text-3);}

@media(max-width:1000px){
  .s3,.s4,.s5,.s6,.s7,.s8{grid-column:span 12}
  .crow2,.mgrid{grid-template-columns:1fr;gap:8px}
  h1{font-size:clamp(34px,8vw,48px)}
}