/* ilug-cal.org — Code Points
   Palette: ground (paper), ink, accent (green), secondary (saffron), flag (navy) */

:root{
  --paper:#F4F2EB;
  --paper-2:#FFFFFF;
  --ink:#14140F;
  --ink-soft:#413D34;
  --muted:#6B6759;
  --green:#138808;   /* accent — real areas: lead band, section plates, links */
  --saffron:#FF9933; /* secondary — panels, highlights, callouts */
  --navy:#000080;    /* flag — code-point plates, alerts */
  --rule:rgba(20,20,15,.26);
  --rule-hard:#14140F;
  --display:'Anek Latin',system-ui,sans-serif;
  --body:'Mukta',system-ui,sans-serif;
  --deva:'Anek Devanagari','Noto Serif Devanagari',serif;
  --tamil:'Anek Tamil',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:18px;line-height:1.62;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
h1,h2,h3,h4,h5{font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1.02;margin:0}
p{margin:0}
a{color:var(--green);text-decoration:none;border-bottom:1px solid rgba(19,136,8,.34)}
a:hover{color:var(--navy);border-bottom-color:rgba(0,0,128,.5)}
a.plain,a.plain:hover{border-bottom:0}
::selection{background:var(--saffron);color:var(--ink)}
:focus-visible{outline:3px solid var(--navy);outline-offset:2px}

.wrap{max-width:1300px;margin:0 auto;padding-inline:clamp(18px,4vw,56px)}
.bleed{width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── icon system: 24 grid, 1.6 stroke, square joins ───────────────── */
.ico{width:1.15em;height:1.15em;flex:0 0 auto;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter;vertical-align:-.16em}
.ico-lg{width:56px;height:56px;stroke-width:1.5}

/* ── masthead ─────────────────────────────────────────────────────── */
.masthead{padding-top:22px;padding-bottom:0}
.mast-top{display:flex;align-items:stretch;gap:18px;flex-wrap:wrap}
.plate{background:var(--navy);color:var(--paper-2);padding:10px 16px 8px;
  display:flex;flex-direction:column;justify-content:space-between;min-width:168px}
.plate .plate-k{font-family:var(--display);font-weight:300;font-size:10px;
  letter-spacing:.26em;text-transform:uppercase;opacity:.75}
.plate .plate-v{font-family:var(--display);font-weight:800;font-size:38px;line-height:.86;letter-spacing:-.02em}
.mast-name{display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding-bottom:2px}
.mast-name .brand{font-family:var(--display);font-weight:800;font-size:clamp(34px,5vw,54px);
  line-height:.88;letter-spacing:-.035em;color:var(--ink);border:0}
.mast-name .pub{font-family:var(--display);font-weight:400;font-size:12px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.nav{margin-top:16px;margin-bottom:clamp(14px,2vw,22px);border-top:2px solid var(--rule-hard);border-bottom:1px solid var(--rule)}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0}
.nav li{flex:1 1 0;min-width:96px;border-left:1px solid var(--rule)}
.nav li:first-child{border-left:0}
.nav a{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;
  padding:15px 8px 14px;border:0;border-top:3px solid transparent;color:var(--ink);text-align:center;
  font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.15em;text-transform:uppercase}
.nav a .ico{width:23px;height:23px;stroke-width:1.5}
.nav a:hover{color:var(--green);border-top-color:var(--green);background:rgba(19,136,8,.05)}
.nav a[aria-current]{color:var(--ink);border-top-color:var(--saffron);background:rgba(255,153,51,.14)}
.nav .minor a{font-weight:400;color:var(--muted)}
.nav .minor a:hover{color:var(--green)}
.subnav{display:flex;flex-wrap:wrap;gap:8px 30px;padding:12px 0 16px;font-size:14px;color:var(--muted)}
.subnav b{font-family:var(--display);font-weight:600;letter-spacing:.04em;color:var(--ink-soft)}

/* ── bands ────────────────────────────────────────────────────────── */
.band{padding-block:clamp(44px,6vw,84px)}
.band-tight{padding-block:clamp(28px,4vw,48px)}
.band-green{background:var(--green);color:var(--paper-2)}
.band-green a{color:#fff;border-bottom-color:rgba(255,255,255,.5)}
.band-ink{background:var(--ink);color:var(--paper)}
.band-ink a{color:#fff;border-bottom-color:rgba(255,255,255,.45)}
.rule-top{border-top:2px solid var(--rule-hard);padding-top:16px}
.kicker{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--green);display:flex;align-items:center;gap:9px}
.band-green .kicker,.band-ink .kicker{color:inherit;opacity:.8}
.eyebrow{font-family:var(--display);font-weight:300;font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--muted)}
.h-xl{font-size:clamp(36px,4.9vw,62px)}
.h-lg{font-size:clamp(31px,3.6vw,46px)}
.h-md{font-size:clamp(23px,2.2vw,30px)}
.h-sm{font-size:clamp(19px,1.5vw,23px);font-weight:600;letter-spacing:-.015em}
.numeral{font-family:var(--display);font-weight:800;letter-spacing:-.045em;line-height:.78}
.dek{font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--ink-soft);max-width:62ch}
.band-green .dek,.band-ink .dek{color:rgba(255,255,255,.88)}
.quiet-line{font-family:var(--display);font-weight:300;font-size:clamp(26px,3.6vw,48px);
  line-height:1.16;letter-spacing:-.015em;max-width:30ch}

/* ── the code-chart device ────────────────────────────────────────── */
.chart-block{display:grid;grid-template-columns:repeat(16,1fr);gap:2px;background:var(--rule-hard);
  border:2px solid var(--rule-hard)}
.cell{background:var(--paper-2);aspect-ratio:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;min-width:0}
.cell .g{font-family:var(--deva);font-size:clamp(13px,1.9vw,32px);line-height:1}
.cell .c{font-family:var(--display);font-size:clamp(9px,.7vw,11px);letter-spacing:.05em;color:var(--muted)}
.cell.mark{color:var(--muted)}
.cell.hi-navy{background:var(--navy);color:var(--paper-2)}
.cell.hi-navy .c{color:rgba(255,255,255,.8)}
.cell.hi-saf{background:var(--saffron);color:var(--ink)}
.cell.hi-saf .c{color:rgba(20,20,15,.7)}

/* ── figure system: three treatments, one drawing system ──────────── */
figure{margin:0}
figcaption{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.38;
  color:var(--ink);max-width:52ch}
.credit{display:block;font-family:var(--display);font-weight:400;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.cap-k{display:block;font-family:var(--display);font-weight:600;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--green);margin-bottom:7px}

/* 1 · bleed — image breaks the measure, caption steps into the margin */
.fig-bleed img{width:100%;height:clamp(260px,42vw,600px);object-fit:cover}
.fig-bleed figcaption{border-top:2px solid var(--navy);margin-top:14px;padding-top:10px;max-width:46ch}

/* 2 · plate — the photograph sits on a mat with a saffron bar */
.fig-plate{background:var(--ink);border:0;padding:clamp(15px,1.7vw,20px)}
.fig-plate .bar{display:block;height:4px;background:var(--saffron);
  margin:0 0 clamp(15px,1.7vw,20px);width:88px}
.fig-plate img{width:100%;height:clamp(250px,33vw,450px);object-fit:cover}
.fig-plate figcaption{color:var(--paper);margin-top:clamp(14px,1.6vw,18px);max-width:58ch;
  padding-top:13px;border-top:1px solid rgba(244,242,235,.28)}
.fig-plate .cap-k{color:var(--saffron)}
.fig-plate .credit{color:rgba(244,242,235,.6)}

/* 3 · inset — narrow, hangs out of the column, hanging-indent caption */
.fig-inset img{width:100%;height:clamp(170px,20vw,260px);object-fit:cover;
  border-bottom:6px solid var(--green)}
.fig-inset figcaption{margin-top:12px;padding-left:16px;border-left:1px solid var(--rule);
  font-size:15.5px;max-width:34ch}

/* generic styleguide figure + gallery */
.article-figure{background:var(--paper-2);border:1px solid var(--rule);padding:16px}
.article-figure img{width:100%;aspect-ratio:16/10;object-fit:cover}
.article-figure figcaption{margin-top:12px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.gallery figure{display:flex;flex-direction:column}
.gallery img{aspect-ratio:3/2;object-fit:cover}
.gallery figcaption{font-size:15px;margin-top:9px}
.map-figure{background:var(--paper-2);border:1px solid var(--rule);padding:16px}
.map-figure .map-slot{width:100%;aspect-ratio:16/9;background:#E6E2D8;border:1px solid var(--rule)}
.map-figure figcaption{margin-top:12px}

/* ── article page ─────────────────────────────────────────────────── */
.article{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,74ch) minmax(0,1fr);
  column-gap:clamp(18px,3vw,48px)}
.article > *{grid-column:2}
.article > .breakout{grid-column:1/-1}
.article > .breakout-wide{grid-column:1/-1;max-width:1180px;margin-inline:auto;width:100%}
.art-body{display:contents}
.art-body > *{grid-column:2;min-width:0}
.art-body > .breakout{grid-column:1/-1}
.art-body > .breakout > .panel{max-width:1180px;margin-inline:auto}
.art-head{padding-top:44px}
.art-head .h-xl{max-width:30ch;line-height:.96}
.lead{font-size:clamp(19px,1.55vw,22px);line-height:1.42;font-family:var(--display);
  font-weight:400;color:var(--ink);margin-top:16px;max-width:62ch}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:18px;
  padding-top:10px;border-top:1px solid var(--rule);
  font-family:var(--display);font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.meta .sec{display:flex;align-items:center;gap:8px;color:var(--green);font-weight:600;border:0}
.meta a.sec:hover{color:var(--navy)}
.art-body > h2{font-size:clamp(25px,2.5vw,34px);margin-top:46px}
.art-body > h3{font-size:clamp(20px,1.7vw,25px);margin-top:34px}
.art-body p{font-size:19.5px;line-height:1.72;margin-top:20px;text-wrap:pretty}
.art-body > ul{margin-top:20px;padding-left:22px}
.art-body > ul li{font-size:19px;line-height:1.62;margin-top:8px}
.art-body em{font-style:italic}
.art-figs{margin-top:34px}
.article .fig-bleed,.article .fig-plate,.article .fig-inset{margin-block:38px}
.article .fig-inset{max-width:38ch}

/* ── text components ──────────────────────────────────────────────── */
.pullquote{margin:38px 0;padding:0;border-top:2px solid var(--saffron);border-bottom:2px solid var(--saffron)}
.pullquote p{font-family:var(--display);font-weight:400;font-size:clamp(23px,2.4vw,32px);
  line-height:1.2;letter-spacing:-.02em;padding:20px 0;margin:0;text-wrap:pretty}
.blockquote{margin:32px 0;padding:0 0 0 22px;border-left:6px solid var(--green)}
.blockquote p{font-size:20px;line-height:1.55;margin:0}
.blockquote cite{display:block;margin-top:10px;font-style:normal;font-family:var(--display);
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.callout{margin:34px 0;background:var(--saffron);color:var(--ink);padding:24px 26px}
.callout p{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.7vw,23px);
  line-height:1.32;margin:0;max-width:52ch}
.callout .cap-k{color:rgba(20,20,15,.7)}
.note{margin:26px 0;padding:14px 0 14px 18px;border-left:3px solid var(--navy);
  font-size:17px;line-height:1.55;color:var(--ink-soft)}

/* ── notes-for-design material ────────────────────────────────────── */
.panel{background:var(--paper-2);border-top:2px solid var(--rule-hard);
  border-bottom:1px solid var(--rule);padding:30px clamp(18px,3vw,40px)}
.panel-ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.panel-ink .cap-k,.panel-ink .eyebrow{color:var(--saffron)}
.panel h3{font-size:clamp(21px,2vw,28px);margin-bottom:18px}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:6px 24px;
  padding:13px 0;border-top:1px solid var(--rule);align-items:start}
.timeline li:first-child{border-top:0}
.panel-ink .timeline li{border-color:rgba(255,255,255,.18)}
.t-when{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:.01em;
  color:var(--green);line-height:1.25}
.panel-ink .t-when{color:var(--saffron)}
.t-what{font-size:17.5px;line-height:1.5}
.deflist{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:0 34px}
.deflist li{padding:12px 0;border-top:1px solid var(--rule);font-size:17px;line-height:1.5}
.panel-ink .deflist li{border-color:rgba(255,255,255,.18)}
.deflist .term{display:block;font-family:var(--display);font-weight:700;font-size:17px;
  letter-spacing:.01em;color:var(--navy)}
.panel-ink .deflist .term{color:var(--saffron)}

/* ── data ─────────────────────────────────────────────────────────── */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2px;
  background:var(--rule-hard);border:2px solid var(--rule-hard)}
.statblock{background:var(--paper-2);padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px}
.stat-num{font-family:var(--display);font-weight:800;font-size:clamp(40px,4.4vw,62px);
  line-height:.84;letter-spacing:-.04em;color:var(--navy)}
.stat-label{font-size:15.5px;line-height:1.4;color:var(--ink-soft)}
.datatable,.versus{width:100%;border-collapse:collapse;font-size:16.5px}
.datatable caption,.versus caption{text-align:left;font-family:var(--display);font-weight:600;
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding-bottom:10px}
.datatable th,.versus th{font-family:var(--display);font-weight:700;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;text-align:left;padding:11px 14px;
  background:var(--ink);color:var(--paper);vertical-align:bottom}
.datatable td,.versus td{padding:11px 14px;border-top:1px solid var(--rule);vertical-align:top;line-height:1.45}
.versus td:first-child{font-family:var(--display);font-weight:700}
.versus tbody tr:nth-child(2n) td{background:var(--paper-2)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.chart{margin:0}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .bar-r{fill:var(--green)}
.chart .bar-r.alt{fill:var(--navy)}
.chart text{font-family:var(--display);font-size:11px;fill:var(--ink)}
.chart .axis{stroke:var(--rule);stroke-width:1}
.chart figcaption{margin-top:12px}
.chart.line path.series{fill:none;stroke:var(--navy);stroke-width:2.5}
.chart.donut circle.track{fill:none;stroke:var(--rule);stroke-width:16}
.chart.donut circle.val{fill:none;stroke:var(--saffron);stroke-width:16;stroke-linecap:butt}

/* ── cards / references ───────────────────────────────────────────── */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.profile-card{background:var(--paper-2);border:1px solid var(--rule);padding:20px;
  display:flex;flex-direction:column;gap:8px}
.profile-card .p-photo{width:76px;height:76px;object-fit:cover;border-radius:50%;margin-bottom:6px}
.profile-card.no-photo{border-top:6px solid var(--navy)}
.profile-card h3{font-size:21px}
.profile-card .p-role{font-family:var(--display);font-weight:600;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.profile-card p{font-size:16.5px;line-height:1.5}
.profile-card .p-links{margin-top:auto;padding-top:10px;display:flex;flex-wrap:wrap;gap:14px;font-size:15px}
.profile-card .p-attr{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.org-card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  gap:2px 14px;align-items:center;background:var(--paper-2);border:1px solid var(--rule);
  padding:14px 16px;border-bottom:1px solid var(--rule)}
.org-card:hover{border-color:var(--green)}
.org-logo{grid-row:1/3;width:44px;height:44px;object-fit:contain;background:var(--ink);padding:5px}
.org-card.no-logo{grid-template-columns:1fr}
.org-name{font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink);line-height:1.2}
.org-host{font-size:13.5px;color:var(--muted);letter-spacing:.04em}
.entity-ref{white-space:nowrap;font-weight:600}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;background:none}
.further-grid a{display:flex;flex-direction:column;justify-content:space-between;gap:12px;
  min-height:132px;background:var(--paper-2);padding:18px;border:1px solid var(--rule);
  font-family:var(--display);font-weight:600;font-size:19px;line-height:1.2;
  letter-spacing:-.01em;color:var(--ink)}
.further-grid a:hover{background:var(--saffron)}
.further-grid a .fg-k{font-family:var(--display);font-weight:600;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--green);display:flex;align-items:center;gap:7px}
.further-grid a:hover .fg-k{color:var(--ink)}
.related-links{list-style:none;margin:0;padding:0;display:grid;gap:0}
.related-links li{border-top:1px solid var(--rule)}
.related-links li a{display:flex;gap:14px;align-items:baseline;padding:13px 0;border:0;
  font-family:var(--display);font-weight:600;font-size:19px;line-height:1.25;color:var(--ink)}
.related-links li a:hover{color:var(--green)}
.related-links .rl-sec{flex:0 0 100px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ── category / archive lists ─────────────────────────────────────── */
.cat-list{list-style:none;margin:0;padding:0}
.cat-list > li{border-top:1px solid var(--rule)}
.cat-list > li:last-child{border-bottom:1px solid var(--rule)}
.cat-list .row{display:grid;grid-template-columns:76px minmax(0,1fr) minmax(0,34ch);
  gap:10px 28px;align-items:start;padding:20px 0;border:0;color:var(--ink)}
.cat-list .row:hover{color:var(--green)}
.cat-list .no{font-family:var(--display);font-weight:800;font-size:26px;color:var(--saffron);
  line-height:.9;letter-spacing:-.03em}
.cat-list .ttl{font-family:var(--display);font-weight:700;font-size:clamp(21px,2vw,27px);
  line-height:1.12;letter-spacing:-.02em}
.cat-list .sub{font-size:16.5px;line-height:1.45;color:var(--ink-soft)}
.cat-list .row:hover .sub{color:var(--ink-soft)}

/* ── homepage lead + card grid ────────────────────────────────────── */
.lede-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);
  gap:clamp(26px,4vw,64px);align-items:end}
.seconds{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;align-items:start}
.card{display:flex;flex-direction:column;height:100%}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.card .c-k{margin-top:14px}
.card h3{font-size:clamp(21px,1.9vw,26px);line-height:1.1;margin-top:9px;min-height:2.2em}
.card p{font-size:16.5px;line-height:1.5;color:var(--ink-soft);margin-top:10px}
.card .c-go{margin-top:auto;padding-top:14px;font-family:var(--display);font-weight:600;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--green)}
a.card{border:0;color:var(--ink)}
a.card:hover h3{color:var(--green)}

/* ── supporters ───────────────────────────────────────────────────── */
.supporters{border-top:2px solid var(--rule-hard);padding-top:18px}
.sponsor-group{margin-top:22px}
.sponsor-group + .sponsor-group{margin-top:34px;border-top:1px solid var(--rule);padding-top:24px}
.sponsor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:22px;justify-content:start}
.sponsor-grid.roll{gap:14px 22px}
.sponsor{display:flex;flex-direction:column;gap:10px;border:0;
  padding:0;color:var(--ink)}
.sponsor img{width:100%;height:76px;background:var(--ink);padding:10px 12px;
  object-fit:contain;object-position:center}
.sponsor .sponsor-name{font-family:var(--display);font-weight:600;font-size:15px;
  letter-spacing:.02em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sponsor:hover .sponsor-name{color:var(--green)}
.sponsor .sponsor-blurb{font-size:15px;line-height:1.45;color:var(--ink-soft);min-width:200px}

/* ── footer ───────────────────────────────────────────────────────── */
.foot{background:var(--ink);color:var(--paper);margin-top:clamp(46px,6vw,88px);
  padding-block:clamp(34px,4vw,52px)}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px 56px;align-items:flex-start}
.foot .brand-row{display:flex;align-items:center;gap:14px}
.foot .fplate{background:var(--navy);color:#fff;font-family:var(--display);font-weight:800;
  font-size:20px;padding:3px 9px;letter-spacing:-.01em}
.foot .fname{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.025em}
.foot .standing{margin-top:14px;font-size:17px;line-height:1.5;max-width:50ch;color:rgba(244,242,235,.82)}
.foot nav{display:grid;grid-auto-flow:row;gap:9px}
.foot nav a{color:var(--paper);border:0;font-family:var(--display);font-weight:600;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:9px}
.foot nav a:hover{color:var(--saffron)}

/* ── expander (CSS-only, for long lists) ──────────────────────────── */
.expander{border:0;margin:0;padding:0}
.expander > summary{cursor:pointer;list-style:none;font-family:var(--display);font-weight:600;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);
  padding:14px 0;border-top:1px solid var(--rule)}
.expander > summary::-webkit-details-marker{display:none}
.expander[open] > summary{color:var(--muted)}

/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width:1080px){
  .lede-grid{grid-template-columns:1fr}
  .cat-list .row{grid-template-columns:56px 1fr;}
  .cat-list .sub{grid-column:2}
}
@media (max-width:860px){
  body{font-size:17px}
  .article{grid-template-columns:minmax(0,1fr)}
  .article > *,.article > .breakout,.article > .breakout-wide,
  .art-body > *,.art-body > .breakout{grid-column:1}
  .article .fig-inset{max-width:none}
  .art-body p{font-size:18.5px}
  .chart-block{grid-template-columns:repeat(8,1fr)}
  .timeline li{grid-template-columns:1fr;gap:4px}
  .datatable,.versus{font-size:15.5px}
  .datatable th,.versus th,.datatable td,.versus td{padding:9px 10px}
}
@media (max-width:560px){
  .plate{min-width:0;flex:1 1 auto}
  .plate .plate-v{font-size:30px}
  .nav ul{gap:0 18px}
  .nav a{font-size:12.5px;letter-spacing:.12em}
  .nav ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .nav li{flex:none;min-width:0}
  .nav li:nth-child(3n+1){border-left:0}
  .nav li:nth-child(-n+3){border-bottom:1px solid var(--rule)}
  .sponsor-grid,.sponsor-grid.roll{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .sponsor img{width:100%}
  .chart-block{grid-template-columns:repeat(4,1fr)}
  .cat-list .row{grid-template-columns:1fr}
  .cat-list .no{font-size:20px}
}
@media print{
  .nav,.supporters{display:none}
  body{background:#fff}
}

/* ── homepage hero: full-bleed photograph, type over it ───────────── */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero .scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(102deg,rgba(16,16,12,.94) 0%,rgba(16,16,12,.8) 40%,rgba(16,16,12,.34) 74%,rgba(16,16,12,.12) 100%)}
.hero-in{min-height:clamp(470px,62vh,720px);display:flex;flex-direction:column;
  justify-content:flex-end;gap:20px;padding-block:clamp(38px,5vw,70px);color:#fff}
.hero-in .kicker{color:var(--saffron)}
.hero-in h1{max-width:24ch;font-size:clamp(34px,4.6vw,66px);line-height:.98}
.hero-in .dek{color:rgba(255,255,255,.88);max-width:58ch}
.hero-in .go{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;border-bottom:1px solid rgba(255,255,255,.55)}
.hero-in .go:hover{color:var(--saffron);border-bottom-color:var(--saffron)}
.hero-plate{align-self:flex-start;background:var(--green);color:#fff;padding:9px 18px 11px;
  display:flex;flex-direction:column;gap:1px}
.hero-plate .k{font-family:var(--display);font-weight:300;font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;opacity:.8}
.hero-plate .v{font-family:var(--display);font-weight:800;font-size:clamp(38px,4.6vw,64px);
  line-height:.86;letter-spacing:-.03em}
.hero-cap{background:var(--ink);color:var(--paper)}
.hero-cap .in{display:flex;flex-wrap:wrap;gap:6px 26px;justify-content:space-between;
  align-items:baseline;padding-block:13px}
.hero-cap p{font-family:var(--display);font-weight:600;font-size:16px;line-height:1.35;max-width:64ch}
.hero-cap .credit{margin:0;color:rgba(244,242,235,.6)}
@media (max-width:640px){
  .hero .scrim{background:linear-gradient(to top,rgba(16,16,12,.95) 0%,rgba(16,16,12,.78) 52%,rgba(16,16,12,.42) 100%)}
}

/* ── closing sections band ────────────────────────────────────────── */
.sec-band{background:var(--ink);color:var(--paper)}
.sec-head{display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:space-between;align-items:baseline;
  border-top:2px solid rgba(244,242,235,.75);padding-top:18px}
.sec-head .kicker{color:var(--saffron)}
.sec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin-top:30px}
.sec-card{display:flex;flex-direction:column;gap:12px;border:0;padding:22px 22px 20px;
  background:rgba(244,242,235,.06);color:var(--paper);border-top:5px solid var(--green)}
.sec-card:hover{background:var(--saffron);color:var(--ink);border-top-color:var(--ink)}
.sec-card .n{font-family:var(--display);font-weight:800;font-size:44px;line-height:.8;
  letter-spacing:-.04em;color:var(--saffron)}
.sec-card:hover .n{color:var(--ink)}
.sec-card .lab{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.sec-card .ttl{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.14;
  letter-spacing:-.015em;min-height:2.3em}
.sec-card .bl{font-size:15.5px;line-height:1.45;opacity:.82}
.sec-card .cnt{margin-top:auto;padding-top:12px;font-family:var(--display);font-weight:600;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.7}
.sec-foot{display:flex;flex-wrap:wrap;gap:12px 30px;align-items:baseline;margin-top:28px;
  border-top:1px solid rgba(244,242,235,.28);padding-top:18px}
.sec-foot a{color:var(--saffron);border-bottom-color:rgba(255,153,51,.45);
  font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.1em}
.sec-foot a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.6)}
.sec-foot span{font-size:15.5px;color:rgba(244,242,235,.7)}

/* ── article rhythm + mobile pass ─────────────────────────────────── */
.art-body > .breakout{margin-block:clamp(34px,4.5vw,58px)}
.art-body > .breakout:first-child{margin-top:clamp(26px,3vw,38px)}
.panel{padding:clamp(24px,3vw,38px) clamp(20px,3vw,40px)}
.article .fig-plate,.article .fig-inset{margin-block:clamp(30px,4vw,44px)}
.article .fig-bleed{margin-block:0}
.art-head .meta{margin-bottom:clamp(22px,3vw,34px)}
.fig-bleed figcaption{padding-bottom:4px}
.art-head{padding-top:clamp(24px,2.6vw,34px)}
.art-body > h2{scroll-margin-top:24px}
.art-body > p:first-of-type{font-size:clamp(20px,1.7vw,22.5px)}

/* contents strip */
.contents{background:var(--paper-2);border-top:2px solid var(--rule-hard);
  border-bottom:1px solid var(--rule);padding:15px clamp(18px,2.4vw,28px) 17px}
.contents > .kicker{margin-bottom:12px}
.contents ol{list-style:none;margin:0;padding:0;counter-reset:cn;
  display:flex;flex-wrap:wrap;gap:10px}
.contents li{counter-increment:cn;display:flex}
.contents a{display:flex;gap:10px;align-items:center;border:1px solid var(--rule);
  padding:9px 15px 10px 11px;font-family:var(--display);font-weight:600;font-size:16px;
  line-height:1.15;letter-spacing:-.01em;color:var(--ink);background:var(--paper)}
.contents a::before{content:counter(cn,decimal-leading-zero);font-weight:800;font-size:12px;
  letter-spacing:.04em;color:#fff;background:var(--navy);padding:4px 6px 5px;flex:0 0 auto}
.contents a:hover{background:var(--saffron);border-color:var(--ink);color:var(--ink)}
.contents a:hover::before{background:var(--ink)}

/* attributions */
.sources{margin-top:clamp(38px,5vw,60px);border-top:2px solid var(--rule-hard);padding-top:18px}
.sources ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:0}
.sources li{border-top:1px solid var(--rule)}
.sources li:first-child{border-top:0}
.sources a{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;padding:12px 0;border:0;
  font-family:var(--display);font-weight:600;font-size:17px;line-height:1.3;color:var(--ink)}
.sources a:hover{color:var(--green)}
.sources .host{font-family:var(--body);font-weight:400;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}

/* prev / next */
.pn{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px;
  margin-top:clamp(34px,4vw,52px);background:var(--rule-hard);border:2px solid var(--rule-hard)}
.pn a{background:var(--paper-2);padding:20px;border:0;display:flex;flex-direction:column;gap:9px;
  color:var(--ink)}
.pn a:hover{background:var(--saffron)}
.pn .dir{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--green)}
.pn a:hover .dir{color:var(--ink)}
.pn .t{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.16;letter-spacing:-.015em}

@media (max-width:860px){
  .nav ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .nav li{flex:none;min-width:0}
  .nav li:nth-child(3n+1){border-left:0}
  .nav li:nth-child(-n+3){border-bottom:1px solid var(--rule)}
  .hero-top .nav li:nth-child(-n+3){border-bottom-color:rgba(255,255,255,.22)}
  .nav a{font-size:12px;letter-spacing:.1em;padding:13px 6px 12px}
  .nav a .ico{width:20px;height:20px}
  .subnav{font-size:13px;gap:6px 22px}
  .contents ol{gap:8px}
  .contents a{font-size:15.5px;padding:8px 12px 9px 9px}
  .art-body > p:first-of-type{font-size:19px}
}
@media (max-width:700px){
  .chart{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .chart svg{min-width:540px}
  .chart.donut svg{min-width:0}
  .statrow{grid-template-columns:1fr 1fr}
  .further-grid{grid-template-columns:1fr}
  .deflist{grid-template-columns:1fr}
  .fig-bleed img{height:clamp(220px,52vw,330px)}
}
@media (max-width:560px){
  .mast-top{gap:12px}
  .mast-name .brand{font-size:clamp(30px,9vw,40px)}
  .nav ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .nav li{flex:none;min-width:0;border-bottom:1px solid var(--rule)}
  .nav li:nth-child(3n+1){border-left:0}
  .sponsor-grid,.sponsor-grid.roll{grid-template-columns:minmax(0,1fr);gap:16px}
  .nav a{font-size:10.5px;letter-spacing:.08em;gap:6px;padding:11px 4px 10px}
  .nav a .ico{width:19px;height:19px}
  .subnav{display:none}
  .statrow{grid-template-columns:1fr}
  .pn{grid-template-columns:1fr}
  .hero-in{min-height:auto;padding-block:34px 30px;gap:16px}
  .hero-in h1{font-size:clamp(28px,8vw,36px)}
  .sec-card .ttl{min-height:0}
  .card h3{min-height:0}
  .timeline li{padding:11px 0}
  .fig-inset figcaption{padding-left:12px}
}

/* inset figure sits IN the column with prose wrapping beside it */
.art-body > .fig-inset{width:100%;max-width:none;display:grid;grid-template-columns:1.5fr 1fr;
  gap:clamp(18px,2.4vw,30px);align-items:start;margin-block:clamp(30px,4vw,44px)}
.art-body > .fig-inset > figcaption{max-width:none}
.art-body > .fig-inset:has(+ p){display:block;float:left;width:min(38ch,44%);max-width:44%;
  margin:10px clamp(22px,3vw,34px) 24px 0}
.art-body > h2,.art-body > h3,.art-body > .breakout,.art-body > .pullquote,
.art-body > .callout,.art-body > .fig-plate{clear:both}
@media (max-width:700px){
  .art-body > .fig-inset,.art-body > .fig-inset:has(+ p){float:none;width:100%;
    display:block;margin:clamp(26px,4vw,36px) 0}
}

/* ── article foot: one closing band ───────────────────────────────── */
.art-foot{background:var(--ink);color:var(--paper);margin-top:clamp(46px,6vw,76px);
  padding-block:clamp(30px,4vw,52px) clamp(26px,3.4vw,40px)}
.art-foot .related-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:0 clamp(24px,3vw,40px)}
.art-foot .related-links li a{flex-direction:column;gap:7px;align-items:flex-start;padding:14px 0 16px}
.art-foot .related-links .rl-sec{flex-basis:auto}
.art-foot .kicker{color:var(--saffron)}
.af-grid{display:block}
.af-col > .kicker{margin-bottom:14px}
.art-foot .related-links li{border-top-color:rgba(244,242,235,.22)}
.art-foot .related-links li a{color:var(--paper)}
.art-foot .related-links li a:hover{color:var(--saffron)}
.art-foot .related-links .rl-sec{color:rgba(244,242,235,.58)}
.src-list{list-style:none;margin:0;padding:0}
.src-list li{border-top:1px solid rgba(244,242,235,.22)}
.src-list li:first-child{border-top:0}
.src-list a{display:flex;flex-direction:column;gap:3px;padding:11px 0;border:0;color:var(--paper);
  font-family:var(--display);font-weight:600;font-size:16px;line-height:1.3}
.src-list a:hover{color:var(--saffron)}
.src-list .host{font-family:var(--body);font-weight:400;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(244,242,235,.55)}
.art-foot .pn{margin-top:clamp(26px,3.4vw,40px);background:none;border:0;
  border-top:1px solid rgba(244,242,235,.22);padding-top:22px;gap:20px}
.art-foot .pn a{background:none;padding:0;color:var(--paper)}
.art-foot .pn a:hover{background:none;color:var(--saffron)}
.art-foot .pn .dir{color:var(--saffron)}
.art-foot .pn a:hover .dir{color:#fff}
@media (max-width:860px){
  .af-grid{grid-template-columns:1fr;gap:30px}
  .art-foot .related-links .rl-sec{flex-basis:auto}
}

/* fig-bleed caption sits over the photograph */
.fig-bleed{position:relative;isolation:isolate}
.fig-bleed > .wrap{position:absolute;left:0;right:0;bottom:0;padding-block:0;
  padding-bottom:clamp(18px,2.4vw,30px);pointer-events:none;
  background:linear-gradient(to top,rgba(14,14,10,.96) 0%,rgba(14,14,10,.86) 48%,rgba(14,14,10,.42) 78%,rgba(14,14,10,0) 100%)}
.fig-bleed figcaption{color:#fff;max-width:58ch;margin-top:0;
  background:rgba(14,14,10,.78);backdrop-filter:blur(2px);
  border-top:3px solid var(--saffron);
  padding:14px clamp(16px,1.8vw,22px) 15px}
.fig-bleed .cap-k{color:var(--saffron)}
.fig-bleed .credit{color:rgba(255,255,255,.72)}
@media (max-width:560px){
  .fig-bleed > .wrap{position:static;background:var(--ink);padding-block:16px 18px}
}

.art-foot + .foot{margin-top:0;border-top:1px solid rgba(244,242,235,.22)}
.sources a{align-items:baseline}

/* ── hero with the masthead over it ───────────────────────────────── */
.hero-top .scrim{background:
  linear-gradient(to bottom,rgba(14,14,10,.86) 0%,rgba(14,14,10,.42) 20%,rgba(14,14,10,.16) 34%,rgba(14,14,10,0) 46%),
  linear-gradient(102deg,rgba(14,14,10,.92) 0%,rgba(14,14,10,.74) 42%,rgba(14,14,10,.3) 76%,rgba(14,14,10,.08) 100%)}
.hero-top .masthead{position:relative;z-index:1;padding-top:22px}
.hero-top .mast-name .brand{color:#fff}
.hero-top .mast-name .pub{color:rgba(255,255,255,.72)}
.hero-top .nav{border-top:2px solid rgba(255,255,255,.8);border-bottom:1px solid rgba(255,255,255,.22);
  margin-bottom:0}
.hero-top .nav li{border-left-color:rgba(255,255,255,.22)}
.hero-top .nav a{color:#fff}
.hero-top .nav .minor a{color:rgba(255,255,255,.68)}
.hero-top .nav .minor a:hover{color:var(--saffron)}
.hero-top .nav a:hover{color:var(--saffron);border-top-color:var(--saffron);background:rgba(255,255,255,.1)}
.hero-top .nav a[aria-current]{color:#fff;border-top-color:var(--saffron);background:rgba(255,153,51,.2)}
.hero-top .hero-in{min-height:clamp(380px,46vh,560px);padding-top:clamp(30px,4vw,54px)}
@media (max-width:560px){
  .hero-top .hero-in{min-height:auto;padding-top:26px}
}

/* sp-mark-align: marks sit CENTRED in their box. Placement only — Design's size,
   padding, panel and object-fit are untouched. */
.sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto!important;margin-right:auto!important;display:block}
.sponsor .sp-logo,.sponsor-box{display:flex;align-items:center;justify-content:center}

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}
.sponsor:not(.lead-line){flex-basis:var(--sp-tile,232px)!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

/* sp-blurb-stack: a slot holding BOTH a mark and our copy stacks them —
   a fixed-height row clips the mark once the copy is un-hidden. */
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)){flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;height:auto!important;min-height:0!important;overflow:visible!important;gap:8px}
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)) > img{align-self:flex-start}

/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;line-height:1.5}

/* sp-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:start!important;flex-wrap:nowrap!important;align-items:center!important;height:auto!important;min-height:0!important}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0!important}

/* sp-grid-stretch: fixed pixel tracks left the container part-empty. */
.art-foot .related-links{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))!important}

/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* op-money-columns: the supporters block ran one tile per row — 10 tiles,
   1168px at 390, 14% of the whole page. Two columns bring it to
   631px (46% shorter). Checked before writing: no new overflow, smallest mark still
   167px wide, longest blurb 1 lines, tile heights 60-117px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.sponsor-grid, .sponsor-grid.roll), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .sponsor-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:22px!important}
    .sponsor-grid > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-grid > * *{min-width:0!important;max-width:100%}
    .sponsor-grid img,.sponsor-grid svg{max-width:100%;height:auto}
  .sponsor-grid.roll{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:22px!important}
    .sponsor-grid.roll > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-grid.roll > * *{min-width:0!important;max-width:100%}
    .sponsor-grid.roll img,.sponsor-grid.roll svg{max-width:100%;height:auto}

}

/* op-odd-tier-lead: .sponsor-grid (5 tiles), .sponsor-grid.roll (5 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .sponsor-grid:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
  .sponsor-grid.roll:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-article-width: the article column was capped at 766px (93 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through grid track 2 of "minmax(0px, 1fr) minmax(0px, 74ch) minmax(0px, 1fr)" (declared in .article) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  main.article.wrap{grid-template-columns:minmax(0px, 1fr) min(836px, calc(100% - 86px)) minmax(0px, 1fr)!important}
}
@media (min-width:1600px){
  main.article.wrap{grid-template-columns:minmax(0px, 1fr) min(clamp(836px, 58.056vw, 1003px), calc(100% - 86px)) minmax(0px, 1fr)!important}
  div.art-body > :is(p:not([class])){font-size:clamp(19.5px,1.3542vw,23.4px)!important}
}
/* op-article-width:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); font-weight: 800; letter-spacing: -0.025em; line-height: 1.02; margin: 0px;}
.panel h2:where(.rt-h3){font-size: clamp(21px, 2vw, 28px); margin-bottom: 18px;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div > div > img,
  div.art-body > figure.fig-inset > img,
  div.art-body > figure.fig-plate > img,
  div.breakout > figure.fig-bleed > img,
  div.seconds > a.card > img,
  main > figure.fig-bleed > img,
  main > section.hero.hero-top > img){height:auto}
/* op-img-dims:end */