/* ============================================================
   Film Brain — The Register
   Palette (3 + 2, each with a job):
     --ground  #14171B  page ground
     --ink     #ECEAE4  type on ground
     --paper   #E8E5DD  inserted sheets (panels, plates, mats)
     --accent  #0FA39E  saturated teal — section marks, rules, panels
     --flag    #FF5A1F  saturated orange — the site's own voice, tallies, alerts
   accent and flag are ~160° apart in hue and both used at area.
   ============================================================ */

:root{
  --ground:#14171B;
  --deep:#0E1114;
  --ink:#ECEAE4;
  --ink-2:#C6C3BB;
  --paper:#E8E5DD;
  --paper-ink:#17191D;
  --paper-mute:#6B7078;
  --accent:#0FA39E;
  --accent-deep:#08211F;
  --flag:#FF5A1F;
  --muted:#79808A;
  --rule:#2A2F36;

  --display:'Fjalla One', 'Arial Narrow', sans-serif;
  --text:'Source Serif 4', Georgia, serif;

  --pad:clamp(18px, 4vw, 48px);
  --measure:730px;
  --shell:1320px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--text);
  font-size:19px;
  line-height:1.6;
  text-wrap:pretty;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--ink); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }

.shell{ max-width:var(--shell); margin:0 auto; padding-inline:var(--pad); }
.measure{ max-width:var(--measure); }

.kicker,.eyebrow,.tag,.overline{
  font-family:var(--display); font-size:15px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted);
}
.icon{ width:1.25em; height:1.25em; flex:0 0 auto; vertical-align:-.2em; }
svg .ic{ fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:square; stroke-linejoin:miter; }

/* ---------- masthead ---------- */
.masthead{ border-bottom:1px solid var(--rule); background:var(--ground); }
.masthead-top{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap; padding-block:18px 14px;
  border-bottom:1px solid var(--rule);
}
.wordmark{
  font-family:var(--display); font-size:clamp(28px,4.4vw,42px);
  line-height:1; letter-spacing:.01em; text-transform:uppercase; white-space:nowrap;
}
.wordmark:hover{ text-decoration:none; color:var(--flag); }
.mast-line{ font-size:16px; color:var(--muted); }
.mast-util{
  display:flex; flex-wrap:wrap; gap:6px 20px; font-family:var(--display);
  font-size:15px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.mast-util a:hover{ color:var(--ink); }
.mast-util .now{ color:var(--flag); }

.index-bar{ padding:0; }
.index-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  border-top:0;
}
.index-cell{ padding:13px 20px; border-right:1px solid var(--rule); min-width:0; }
.index-cell:last-child{ border-right:0; }
.index-cell.here{ background:#191D22; }
.index-head{
  display:flex; align-items:center; gap:9px; font-family:var(--display);
  font-size:16px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink);
}
.index-cell.here .index-head{ color:var(--accent); }
.index-head .icon{ color:var(--accent); width:22px; height:22px; }
.index-cell.here .index-head .icon{ color:var(--flag); }
.index-blurb{ margin:8px 0 0; font-size:15px; line-height:1.45; color:var(--muted); }
.index-sub{ display:flex; flex-direction:column; gap:3px; margin-top:9px; font-size:15px; }
.index-sub a{ color:var(--ink-2); }

.mobile-nav{ display:none; }

/* ---------- generic band furniture ---------- */
.band{ border-bottom:1px solid var(--rule); }
.band-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap; padding-block:26px 16px;
}
.band-head h2{
  margin:0; font-family:var(--display); font-size:16px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); font-weight:400;
}
.band-head .more{ font-family:var(--display); font-size:15px; letter-spacing:.12em; text-transform:uppercase; color:var(--flag); }

/* ---------- the lead ---------- */
.lead-band{ border-bottom:1px solid var(--rule); }
.lead-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,4vw,56px);
  align-items:center; padding-block:clamp(28px,4vw,52px);
}
.lead-kicker{ display:flex; align-items:center; gap:10px; color:var(--flag); font-family:var(--display); font-size:15px; letter-spacing:.15em; text-transform:uppercase; }
.lead-kicker .icon{ width:22px; height:22px; }
.lead-title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(38px,5.6vw,74px); line-height:.98; letter-spacing:.005em;
  text-transform:uppercase; margin:16px 0 0;
}
.lead-title a:hover{ color:var(--accent); text-decoration:none; }
.lead-dek{ margin:20px 0 0; font-size:clamp(19px,1.6vw,24px); line-height:1.5; color:var(--ink-2); max-width:52ch; }
.lead-more{ display:inline-flex; align-items:center; gap:10px; margin-top:22px; font-family:var(--display); font-size:16px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); border-bottom:2px solid var(--accent); padding-bottom:3px; }

/* ---------- hero: full-bleed opener, the page's heaviest band ---------- */
.hero{ position:relative; min-height:clamp(460px,72vh,780px); display:flex; align-items:flex-end; overflow:hidden; border-bottom:1px solid var(--rule); }
.hero-img{ position:absolute; inset:0; }
.hero-img img{ width:100%; height:100%; object-fit:cover; }
.hero-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top, rgba(14,17,20,.95) 4%, rgba(14,17,20,.8) 38%, rgba(14,17,20,.34) 72%, rgba(14,17,20,.45) 100%),
    linear-gradient(to right, rgba(14,17,20,.82) 0%, rgba(14,17,20,.4) 48%, rgba(14,17,20,.05) 82%);
}
.hero-in{ position:relative; width:100%; padding-block:clamp(28px,4vw,56px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,300px); gap:clamp(20px,3vw,48px); align-items:end; }
.hero-kicker{ display:flex; align-items:center; gap:10px; font-family:var(--display); font-size:15px; letter-spacing:.16em; text-transform:uppercase; color:var(--flag); }
.hero-kicker .icon{ width:22px; height:22px; }
.hero-kicker a{ color:var(--flag); }
.hero-rule{ width:96px; height:0; border-top:3px solid var(--flag); margin:18px 0 14px; }
.hero h1{
  font-family:var(--display); font-weight:400; text-transform:uppercase; margin:0;
  font-size:clamp(40px,7.2vw,96px); line-height:.92; letter-spacing:.005em; max-width:19ch;
  text-shadow:0 2px 24px rgba(10,12,14,.55);
}
.hero h1 a:hover{ color:var(--accent); text-decoration:none; }
.hero-dek{ margin:20px 0 0; font-size:clamp(19px,1.7vw,25px); line-height:1.45; color:#E4E1DA; max-width:50ch; }
.hero-go{ display:inline-flex; align-items:center; gap:12px; margin-top:24px; font-family:var(--display); font-size:17px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); background:var(--accent); color:var(--accent-deep); padding:12px 18px; }
.hero-go:hover{ text-decoration:none; background:var(--ink); color:var(--ground); }
.hero-tab{ position:relative; background:var(--paper); color:var(--paper-ink); padding:18px 20px 20px 30px; }
.hero-tab .cap-kicker{ display:block; font-family:var(--display); font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--paper-mute); margin-bottom:8px; }
.hero-tab p{ margin:0; font-size:17px; line-height:1.4; }
.hero-tab .credit{ display:block; margin-top:8px; font-size:13px; color:var(--paper-mute); }
@media (max-width:900px){
  .hero-in{ grid-template-columns:1fr; }
  .hero-tab{ max-width:420px; }
}

/* ---------- statement line ---------- */
.statement{ border-top:2px solid var(--flag); border-bottom:1px solid var(--rule); }
.statement p{ margin:0; padding-block:clamp(22px,3vw,34px); font-size:clamp(20px,2.1vw,27px); line-height:1.45; max-width:92ch; }

/* ---------- register table (homepage / sections) ---------- */
.register{ padding-bottom:14px; }
.reg-head,.reg-row{
  display:grid; grid-template-columns:56px minmax(0,1.1fr) minmax(0,1.25fr) 150px;
  gap:0 18px; align-items:center;
}
.reg-head{
  font-family:var(--display); font-size:14px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid var(--rule); padding-bottom:8px;
}
.reg-row{ border-bottom:1px solid var(--rule); padding-block:16px; }
.reg-row:hover{ background:#191D22; text-decoration:none; }
.reg-row:hover .reg-title{ color:var(--accent); }
.tally{ width:34px; height:16px; color:var(--flag); }
.reg-title{ font-family:var(--display); font-size:clamp(20px,2vw,25px); line-height:1.12; text-transform:uppercase; }
.reg-what{ font-size:17px; line-height:1.4; color:var(--ink-2); }
.reg-sec{ text-align:right; font-size:15px; color:var(--accent); font-family:var(--display); letter-spacing:.08em; text-transform:uppercase; }

/* ---------- plates (card set) ---------- */
.plates{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(20px,2.4vw,34px); padding-block:clamp(24px,3vw,40px);
}
.plate{
  background:var(--paper); color:var(--paper-ink);
  display:flex; flex-direction:column; padding:18px 18px 20px; position:relative;
}
.plate:hover{ text-decoration:none; outline:2px solid var(--accent); outline-offset:-2px; }
.plate-no{
  font-family:var(--display); font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--paper-mute); display:flex; align-items:center; gap:8px; margin-bottom:12px;
}
.plate-no .icon{ width:18px; height:18px; color:var(--paper-ink); }
.plate figure{ margin:0; }
.plate img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.plate h3{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(21px,1.9vw,26px); line-height:1.08; margin:14px 0 8px;
  min-height:2.16em;
}
.plate p{ margin:0; font-size:17px; line-height:1.45; color:#3A3E44; }
.plate .read{ margin-top:auto; padding-top:14px; font-family:var(--display); font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--paper-mute); }

/* ---------- quiet quote panel ---------- */
.argument{ background:var(--accent); color:var(--accent-deep); }
.argument-in{ display:grid; grid-template-columns:190px 1fr; gap:clamp(20px,3vw,44px); padding-block:clamp(34px,4vw,56px); align-items:start; }
.argument .lbl{ font-family:var(--display); font-size:15px; letter-spacing:.15em; text-transform:uppercase; }
.argument q,.argument .q{
  display:block; font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(26px,3.2vw,42px); line-height:1.1; max-width:32ch; quotes:none;
}
.argument p{ margin:18px 0 0; font-size:clamp(18px,1.5vw,21px); line-height:1.55; max-width:68ch; }
.argument .go{ display:inline-block; margin-top:22px; font-family:var(--display); font-size:16px; letter-spacing:.12em; text-transform:uppercase; border-bottom:2px solid var(--accent-deep); }
.argument a{ color:var(--accent-deep); }

/* ============================================================
   FIGURE SYSTEM — one drawing family, four treatments
   .article-figure                 base: caption typography + credit
     .is-plate    photograph on a chalk sheet with drawn corner brackets
     .is-bleed    full-bleed band, teal rule, caption split across the measure
     .is-inset    sits in the column, prose beside it, flag rule at the left
     .is-strip    wide short crop with a plate number over a paper ledge
   ============================================================ */
.article-figure{ margin:clamp(28px,3.4vw,44px) 0; }
.article-figure img{ width:100%; }
.article-figure figcaption{
  font-family:var(--text); font-size:17px; line-height:1.45; color:var(--ink);
  max-width:62ch;
}
.article-figure .cap-kicker{
  display:block; font-family:var(--display); font-size:13px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); margin-bottom:8px;
}
.article-figure .credit{
  display:block; margin-top:7px; font-size:13.5px; line-height:1.4; color:var(--muted);
  font-style:normal;
}

.is-plate{ background:var(--paper); color:var(--paper-ink); padding:20px; position:relative; }
.is-plate img{ aspect-ratio:16/10; object-fit:cover; }
.is-plate figcaption{ color:var(--paper-ink); margin-top:14px; padding-left:26px; }
.is-plate .cap-kicker{ color:var(--paper-mute); }
.is-plate .credit{ color:var(--paper-mute); }
.brk{ position:absolute; width:15px; height:30px; color:var(--paper-ink); }
.brk.tl{ top:12px; left:10px; }
.brk.br{ bottom:12px; right:10px; }

.is-bleed{ margin-inline:calc(50% - 50vw); margin-block:clamp(30px,4vw,52px); width:100vw; }
.is-bleed img{ width:100%; max-height:74vh; object-fit:cover; }
.is-bleed .cap-wrap{
  max-width:var(--shell); margin:0 auto; padding:16px var(--pad) 0;
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:clamp(16px,3vw,40px);
  border-top:2px solid var(--accent); margin-top:14px;
}
.is-bleed figcaption{ font-size:clamp(18px,1.5vw,21px); max-width:64ch; }
.is-bleed .credit{ text-align:left; }

.is-inset{ float:left; width:min(36%,320px); margin:6px 30px 22px 0; }
.is-inset img{ aspect-ratio:4/3; object-fit:cover; }
.is-inset figcaption{ border-left:3px solid var(--flag); padding-left:14px; margin-top:12px; font-size:16px; }

.is-strip{ background:var(--paper); color:var(--paper-ink); padding:0; }
.is-strip img{ aspect-ratio:32/9; object-fit:cover; }
.is-strip figcaption{ color:var(--paper-ink); padding:14px 18px 16px; max-width:74ch; }
.is-strip .cap-kicker{ color:var(--paper-mute); }
.is-strip .credit{ color:var(--paper-mute); }

.gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:clamp(24px,3vw,40px) 0; }
.gallery figure{ margin:0; }
.gallery img{ aspect-ratio:3/2; object-fit:cover; }
.gallery figcaption{ margin-top:8px; font-size:15px; color:var(--ink-2); }
.gallery .credit{ display:block; font-size:13px; color:var(--muted); margin-top:4px; }

/* ---------- article page ---------- */
.article-head{ border-bottom:1px solid var(--rule); }
.art-head-in{ padding-block:clamp(28px,3.6vw,52px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px); gap:clamp(22px,4vw,52px); align-items:start; }
.art-kicker{ display:flex; align-items:center; gap:10px; font-family:var(--display); font-size:15px; letter-spacing:.15em; text-transform:uppercase; color:var(--flag); }
.art-kicker .icon{ width:22px; height:22px; }
.art-kicker a{ color:var(--flag); }
h1.art-title{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(34px,5vw,66px); line-height:.98; letter-spacing:.005em; margin:16px 0 0;
  max-width:26ch;
}
p.lead{
  font-size:clamp(19px,1.7vw,25px); line-height:1.5; color:var(--ink-2);
  margin:20px 0 0; max-width:58ch; font-weight:400;
}
.slip{ background:var(--paper); color:var(--paper-ink); padding:20px 22px; }
.slip h2{ font-family:var(--display); font-weight:400; font-size:14px; letter-spacing:.16em; text-transform:uppercase; margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--paper-ink); }
.slip dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:16px; line-height:1.4; }
.slip dt{ color:var(--paper-mute); }
.slip dd{ margin:0; overflow-wrap:anywhere; }
.slip a{ color:#0B6E6A; border-bottom:1px solid #0B6E6A55; }
.slip a:hover{ text-decoration:none; border-bottom-color:#0B6E6A; }

.article-body{ padding-block:clamp(20px,3vw,38px); }
.article-body > *{ max-width:var(--measure); }
.article-body > .is-bleed,
.article-body > .terms,
.article-body > .films,
.article-body > .wide{ max-width:none; }
.article-body p{ font-size:21px; line-height:1.68; margin:0 0 24px; }
.article-body h2{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(25px,2.6vw,34px); line-height:1.1; letter-spacing:.01em;
  margin:44px 0 16px; padding-top:16px; border-top:1px solid var(--rule);
  max-width:34ch;
}
.article-body em,.article-body i{ font-style:italic; }
.article-body a{ color:var(--accent); border-bottom:1px solid #0FA39E55; }
.article-body a:hover{ text-decoration:none; border-bottom-color:var(--accent); }
.article-body::after{ content:''; display:block; clear:both; }
.article-body h2,
.article-body .pullquote,
.article-body .blockquote,
.article-body .callout,
.article-body > .terms,
.article-body > .films,
.article-body > .article-figure:not(.is-inset){ clear:both; }

.pullquote{ margin:clamp(28px,3.4vw,44px) 0; padding:0 0 0 22px; border-left:3px solid var(--flag); max-width:34ch !important; }
.pullquote p{ font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(22px,2.4vw,30px) !important; line-height:1.12 !important; margin:0 !important; }
.blockquote{ margin:clamp(26px,3vw,40px) 0; padding:18px 22px; background:#191D22; border-left:3px solid var(--accent); }
.blockquote p{ margin:0 0 10px; font-size:20px; line-height:1.5; }
.blockquote cite{ font-style:normal; font-family:var(--display); font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.callout{ margin:clamp(26px,3vw,40px) 0; background:var(--paper); color:var(--paper-ink); padding:20px 22px; border-top:3px solid var(--flag); }
.callout p{ margin:0; font-size:19px; line-height:1.5; }
p.note{ font-size:17px; line-height:1.5; color:var(--muted); border-top:1px solid var(--rule); padding-top:12px; }

/* Notes-for-Design material: full-width interruptions, never a side rail */
.terms{ background:var(--paper); color:var(--paper-ink); margin:clamp(30px,4vw,52px) 0; padding:clamp(22px,2.6vw,32px) clamp(20px,2.4vw,30px) clamp(26px,3vw,34px); position:relative; }
.terms h2{ font-family:var(--display); font-weight:400; font-size:clamp(19px,1.8vw,24px); text-transform:uppercase; letter-spacing:.04em; margin:0 0 20px; border:0; padding:0 0 0 26px; max-width:40ch; }
.terms dl{ margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px 30px; }
.terms .term{ min-width:0; }
.terms dt{ font-family:var(--display); font-size:17px; letter-spacing:.04em; text-transform:uppercase; padding-bottom:6px; border-bottom:1px solid var(--paper-ink); }
.terms dd{ margin:8px 0 0; font-size:16.5px; line-height:1.45; color:#3A3E44; }

.films{ margin:clamp(30px,4vw,52px) 0; border-top:2px solid var(--accent); }
.films h2{ font-family:var(--display); font-weight:400; font-size:15px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:14px 0 10px; border:0; padding:0; }
.films ol{ margin:0; padding:0; list-style:none; counter-reset:f; }
.films li{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:0 16px; padding:14px 0; border-bottom:1px solid var(--rule); }
.films li::before{ counter-increment:f; content:counter(f,decimal-leading-zero); font-family:var(--display); font-size:15px; color:var(--muted); }
.films .f-title{ font-family:var(--display); font-size:clamp(18px,1.7vw,22px); text-transform:uppercase; line-height:1.15; }
.films .f-title em,.terms dt em,.plate h3 em{ font-style:italic; margin-right:.2em; }
.films .f-what{ font-size:17px; line-height:1.45; color:var(--ink-2); margin-top:5px; }

.related{ border-top:1px solid var(--rule); padding-block:clamp(26px,3vw,40px); }
.related h2{ font-family:var(--display); font-weight:400; font-size:15px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 18px; }
ul.related-links,.further-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
ul.related-links li{ min-width:0; }
ul.related-links a,.further-grid a{
  display:flex; flex-direction:column; gap:8px; height:100%;
  border-top:2px solid var(--rule); padding-top:12px;
}
ul.related-links a:hover,.further-grid a:hover{ border-top-color:var(--flag); text-decoration:none; }
.related-links .r-sec,.further-grid .r-sec{ font-family:var(--display); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.related-links .r-title,.further-grid .r-title{ font-family:var(--display); font-size:21px; line-height:1.12; text-transform:uppercase; }

/* ---------- section / index pages ---------- */
.sec-head{ border-bottom:1px solid var(--rule); }
.sec-head-in{ padding-block:clamp(28px,3.6vw,52px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,380px); gap:clamp(22px,4vw,52px); align-items:start; }
.sec-mark{ display:flex; align-items:center; gap:12px; color:var(--flag); }
.sec-mark .icon{ width:34px; height:34px; }
.sec-mark span{ font-family:var(--display); font-size:15px; letter-spacing:.16em; text-transform:uppercase; }
h1.sec-title{ font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(38px,6vw,82px); line-height:.94; margin:14px 0 0; }
.sec-dek{ margin:18px 0 0; font-size:clamp(19px,1.7vw,23px); line-height:1.5; color:var(--ink-2); max-width:58ch; }

ul.cat-list{ list-style:none; margin:0; padding:0; }
ul.cat-list > li{ border-bottom:1px solid var(--rule); }
ul.cat-list > li > a{ display:grid; grid-template-columns:60px minmax(0,1fr) minmax(0,300px); gap:0 22px; padding-block:22px; align-items:baseline; }
ul.cat-list > li > a:hover{ text-decoration:none; background:#191D22; }
ul.cat-list > li > a:hover .cl-title{ color:var(--accent); }
.cl-no{ font-family:var(--display); font-size:16px; color:var(--muted); }
.cl-title{ display:block; font-family:var(--display); font-size:clamp(22px,2.2vw,28px); line-height:1.1; text-transform:uppercase; }
.cl-brief{ display:block; font-size:17px; line-height:1.45; color:var(--ink-2); margin-top:7px; }
.cl-len{ font-family:var(--display); font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

.hub{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(20px,2.6vw,36px); padding-block:clamp(26px,3vw,44px); }
.hub-col h2{ display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:400; font-size:22px; text-transform:uppercase; letter-spacing:.04em; margin:0 0 12px; padding-bottom:10px; border-bottom:2px solid var(--rule); }
.hub-col h2 .icon{ width:24px; height:24px; color:var(--accent); }
.hub-col p{ margin:0 0 12px; font-size:16px; color:var(--muted); }
.hub-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.hub-col li{ border-top:1px solid var(--rule); }
.hub-col li a{ display:block; padding:11px 0; font-size:18px; line-height:1.3; }

/* ---------- alphabet register ---------- */
.az{ display:flex; flex-wrap:wrap; gap:10px 12px; font-family:var(--display); font-size:18px; letter-spacing:.08em; text-transform:uppercase; padding-block:8px 30px; }
.az a{ color:var(--ink); }
.az .off{ color:#454B52; }

/* ---------- sponsors ---------- */
.supporters{ border-top:1px solid var(--rule); }
.sup-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-block:22px 14px; }
.sup-head h2{ margin:0; font-family:var(--display); font-weight:400; font-size:16px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.sup-head .sup-note{ font-size:15px; color:var(--muted); }
.sponsor-run{
  display:flex; flex-wrap:wrap; gap:14px; padding-bottom:clamp(22px,2.6vw,34px);
  align-items:flex-start;
}
.sponsor{
  flex:0 0 268px; background:var(--deep); border:1px solid var(--rule);
  padding:16px 18px 18px; display:flex; flex-direction:column; gap:10px;
  min-width:0;
}
.sponsor:hover{ text-decoration:none; border-color:var(--accent); }
.sponsor img{
  width:100%; max-width:100%; height:auto; max-height:46px; width:auto;
  object-fit:contain; align-self:flex-start;
}
.sponsor .sponsor-logo{
  width:100%; height:64px; display:flex; align-items:center; justify-content:flex-start;
  background:#000; padding:9px 12px;
}
.sponsor .sponsor-name{
  font-family:var(--display); font-size:16px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); line-height:1.2; min-height:2.4em; white-space:normal; overflow-wrap:break-word;
}
.sponsor .sponsor-blurb{ font-size:15.5px; line-height:1.4; color:var(--muted); min-height:4.2em; }
.sponsor.feat{ flex:0 0 268px; background:#191D22; border-color:#39424A; padding-bottom:20px; }
.sponsor.wide{ padding-block:26px 28px; }

/* ---------- footer ---------- */
.foot{ background:var(--deep); border-top:1px solid var(--rule); }
.foot-in{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:clamp(20px,3vw,40px); padding-block:clamp(30px,3.4vw,46px); }
.foot h3{ font-family:var(--display); font-weight:400; font-size:14px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 12px; }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.foot a{ color:var(--ink-2); font-size:17px; }
.foot .fine{ font-size:15px; color:var(--muted); line-height:1.5; max-width:44ch; }
.foot-mark{ font-family:var(--display); font-size:26px; text-transform:uppercase; color:var(--ink); }

/* ---------- data components ---------- */
.table-wrap{ overflow-x:auto; margin:clamp(24px,3vw,38px) 0; }
table.versus,table.datatable{ width:100%; border-collapse:collapse; font-size:17px; min-width:520px; }
.versus th,.versus td,.datatable th,.datatable td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--rule); vertical-align:top; }
.versus thead th,.datatable thead th{ font-family:var(--display); font-weight:400; font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--ink); }
.versus tbody th{ font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:18px; }
.datatable tbody tr:hover{ background:#191D22; }

.statrow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:2px; margin:clamp(24px,3vw,38px) 0; }
.statblock{ background:#191D22; padding:20px; border-top:2px solid var(--accent); }
.stat-num{ display:block; font-family:var(--display); font-size:clamp(34px,4vw,48px); line-height:1; color:var(--ink); }
.stat-label{ display:block; margin-top:8px; font-size:16px; line-height:1.35; color:var(--muted); }

ol.timeline{ list-style:none; margin:clamp(24px,3vw,38px) 0; padding:0; }
ol.timeline li{ display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:8px 24px; padding:14px 0; border-bottom:1px solid var(--rule); }
.t-when{ font-family:var(--display); font-size:16px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); line-height:1.25; }
.t-what{ font-size:17.5px; line-height:1.45; }

figure.chart{ margin:clamp(24px,3vw,38px) 0; }
figure.chart svg{ width:100%; height:auto; overflow:visible; }
figure.chart figcaption{ margin-top:12px; font-size:16px; color:var(--muted); }
.chart .axis{ stroke:var(--rule); stroke-width:1; }
.chart .bar-r{ fill:var(--accent); }
.chart .bar-r.alt{ fill:var(--flag); }
.chart text{ font-family:var(--display); font-size:13px; fill:var(--ink-2); letter-spacing:.06em; }

/* ---------- cards / references ---------- */
.profile-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin:clamp(24px,3vw,38px) 0; }
.profile-card{ background:var(--paper); color:var(--paper-ink); padding:18px; display:flex; flex-direction:column; }
.profile-card .p-photo{ width:100%; aspect-ratio:1/1; object-fit:cover; margin-bottom:14px; }
.profile-card.no-photo{ border-top:3px solid var(--accent); }
.profile-card h3{ font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:22px; line-height:1.1; margin:0 0 6px; }
.profile-card .p-role{ margin:0 0 10px; font-family:var(--display); font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--paper-mute); }
.profile-card p{ margin:0 0 10px; font-size:16.5px; line-height:1.45; color:#3A3E44; }
.profile-card .p-links{ margin-top:auto; padding-top:10px; font-size:16px; }
.profile-card .p-links a{ color:#0B6E6A; }
.profile-card .p-attr{ font-size:13px; color:var(--paper-mute); }

.org-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin:clamp(24px,3vw,38px) 0; }
.org-card{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:4px 14px; align-items:center; border:1px solid var(--rule); padding:14px; }
.org-card:hover{ border-color:var(--accent); text-decoration:none; }
.org-logo{ width:64px; height:64px; object-fit:contain; grid-row:span 2; background:#000; }
.org-card.no-logo{ grid-template-columns:minmax(0,1fr); }
.org-name{ font-family:var(--display); font-size:18px; text-transform:uppercase; line-height:1.15; }
.org-host{ font-size:15px; color:var(--muted); }
a.entity-ref{ color:var(--accent); border-bottom:1px solid #0FA39E55; }

/* ---------- collapsible ---------- */
details.more-list{ margin-top:0; }
details.more-list > summary{
  list-style:none; cursor:pointer; padding:12px 0; border-top:1px solid var(--rule);
  font-family:var(--display); font-size:15px; letter-spacing:.12em; text-transform:uppercase; color:var(--flag);
}
details.more-list > summary::-webkit-details-marker{ display:none; }
details.more-list[open] > summary{ color:var(--muted); }

/* ---------- 404 / simple pages ---------- */
.plain{ padding-block:clamp(40px,6vw,90px); }
.plain h1{ font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(36px,6vw,72px); line-height:.98; margin:0 0 18px; }
.plain p{ font-size:20px; line-height:1.6; max-width:62ch; }
.plain .cta{ display:inline-block; margin-top:20px; font-family:var(--display); font-size:16px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); border-bottom:2px solid var(--accent); }

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .index-grid{ grid-template-columns:repeat(3,1fr); }
  .index-cell{ border-bottom:1px solid var(--rule); }
  .lead-grid{ grid-template-columns:1fr; }
  .art-head-in,.sec-head-in{ grid-template-columns:1fr; }
  .argument-in{ grid-template-columns:1fr; gap:16px; }
  ul.cat-list > li > a{ grid-template-columns:44px minmax(0,1fr); }
  .cl-len{ grid-column:2; }
}
@media (max-width:760px){
  body{ font-size:18px; }
  .article-body p{ font-size:19.5px; }
  .index-bar{ display:none; }
  .mobile-nav{ display:block; border-top:1px solid var(--rule); }
  .mobile-nav summary{
    list-style:none; cursor:pointer; padding:14px 0;
    font-family:var(--display); font-size:16px; letter-spacing:.14em; text-transform:uppercase; color:var(--flag);
  }
  .mobile-nav summary::-webkit-details-marker{ display:none; }
  .mobile-nav ul{ list-style:none; margin:0; padding:0 0 16px; }
  .mobile-nav li{ border-top:1px solid var(--rule); }
  .mobile-nav a{ display:flex; align-items:center; gap:10px; padding:12px 0; font-family:var(--display); font-size:18px; text-transform:uppercase; letter-spacing:.04em; }
  .mobile-nav .icon{ color:var(--accent); }
  .reg-head{ display:none; }
  .reg-row{ grid-template-columns:34px minmax(0,1fr); gap:4px 12px; }
  .reg-what{ grid-column:2; }
  .reg-sec{ grid-column:2; text-align:left; }
  .is-inset{ float:none; width:100%; margin:24px 0; }
  .is-bleed .cap-wrap{ grid-template-columns:1fr; gap:10px; }
  ol.timeline li{ grid-template-columns:1fr; }
  .sponsor,.sponsor.feat{ flex:1 1 100%; }
  .terms dl{ grid-template-columns:1fr; }
  .plate h3{ min-height:0; }
  .slip dl{ grid-template-columns:1fr; gap:2px 0; }
  .slip dt{ margin-top:8px; }
  .article-body h2{ margin-top:34px; }
}
@media (max-width:380px){
  :root{ --pad:14px; }
  .sponsor .sponsor-logo{ height:56px; }
}
@media print{
  body{ background:#fff; color:#000; }
  .masthead,.foot,.supporters{ display:none; }
}

/* charts: line + donut variants */
.chart .grid-l{ stroke:var(--rule); stroke-width:1; }
.chart .line-p{ fill:none; stroke:var(--accent); stroke-width:2.5; }
.chart .line-d{ fill:var(--flag); }
.chart .donut-s{ fill:none; stroke-width:22; }
.chart .donut-s.a{ stroke:var(--accent); }
.chart .donut-s.b{ stroke:var(--flag); }
.chart .donut-s.c{ stroke:#4A535C; }
.chart .donut-mid{ font-family:var(--display); font-size:26px; fill:var(--ink); }
.sg-note{ font-size:15px; color:var(--muted); border-left:2px solid var(--flag); padding-left:12px; margin:0 0 22px; }
.sg-h{ font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:22px; letter-spacing:.06em; margin:48px 0 14px; padding-top:14px; border-top:2px solid var(--accent); }

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

/* 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-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}
/* sp-text-contrast: sponsor copy measured against its OWN ground as a WCAG contrast RATIO, not as a
   luminance subtraction. The subtraction passed capitanalatriste's blurbs at a 75-point gap
   while they sat at 2.8:1 and could not be read. Bar is 4.5:1 for body copy, 3:1 for large or
   bold; opacity is folded in, because it compounds down the tree and computed colour ignores
   it. The lift keeps Design's hue and saturation and moves lightness only, by the smallest
   step that clears the bar, so a warm blurb on near-black stays warm. Colour only — size,
   weight, family and spacing are exactly as delivered. */
.sponsor-blurb.sponsor-blurb{color:rgb(127,134,143)!important;opacity:1!important}

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.sponsor-run .sponsor .sponsor-logo.sponsor-logo{display:block!important;width:100%!important}
.sponsor-run .sponsor.sponsor img{height:46px!important;display:block!important;width:100%!important}

/* op-footer-compact: the footer printed 5 rows for 5 link(s) in
   1 list(s) — 739px at 390, 8% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too,
   measured 739 -> 590px (20% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:clamp(7px,2.78vw,40px)!important;row-gap:7px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
}

/* op-money-columns: the supporters block ran one tile per row — 10 tiles,
   2407px at 390, 27% of the whole page. Two columns bring it to
   1239px (49% shorter). Checked before writing: no new overflow, smallest mark still
   106px wide, longest blurb 3 lines, tile heights 228-230px.
   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.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. Only the tier(s) that were one-per-row are touched (.sponsor-run), 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-run{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .sponsor-run > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-run > * *{min-width:0!important;max-width:100%}
    .sponsor-run img,.sponsor-run svg{max-width:100%;height:auto}
  .sponsor-run .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-article-width: the article column was capped at 730px (79 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .article-body > *) 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){
  article div.shell.article-body{--measure:min(947px, 100%)!important}
}
@media (min-width:1600px){
  article div.shell.article-body{--measure:min(clamp(947px, 65.764vw, 1136px), 100%)!important}
  article div.shell.article-body > :is(p:not([class])){font-size:clamp(21px,1.4583vw,25.2px)!important}
}
/* op-article-width:end */

/* op-article-head: the article header followed the text column (730px) and was left behind when the text went to 947px. Operator: "article header page with title + meta info that are super shrinked". Its containers now follow the text again by the text's own factor. */
@media (min-width:1024px){
  p.lead{max-width:min(915px, 100%)!important}
}
@media (min-width:1600px){
  p.lead{max-width:min(calc(clamp(915px, 63.542vw, 1098px) + 0px), 100%)!important}
}
/* op-article-head:end */

/* op-hover-pad */
.reg-row{padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */

/* op-hover-pad */
ul.cat-list > li > a{padding-left:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
@media (min-width:728px) and (max-width:1439px){.sponsor-run.sponsor-run:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(268px,calc(50% - 7px)),1fr))!important;column-gap:14px!important;row-gap:14px!important;justify-content:stretch!important;align-items:stretch!important}.sponsor-run.sponsor-run > [data-partner]{flex:none!important;width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important}}