/* absolutetrivia.com — Back Room
   tokens → components → layout → pages */

:root{
  --paper:#ffffff;
  --paper-2:#eef1f5;
  --paper-3:#e6eaef;
  --ink:#0e1116;
  --ink-2:#333c46;
  --ink-3:#545f6b;
  --muted:#646f7c;
  --navy:#0f1c33;
  --accent:#e01b2d;
  --accent-soft:#f1f5fc;
  --rule:rgba(14,17,22,.16);
  --rule-soft:rgba(14,17,22,.09);
  --rule-dark:rgba(255,255,255,.18);

  --f-display:'Bricolage Grotesque','Helvetica Neue',system-ui,sans-serif;
  --f-body:'Source Serif 4',Georgia,'Times New Roman',serif;
  --f-mono:'DM Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --measure:33rem;
  --gutter:clamp(20px,5vw,64px);
  --band:clamp(48px,7vw,104px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:19px;line-height:1.62;
  font-variant-numeric:oldstyle-num;
  font-synthesis-weight:none;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:#a8121f}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;letter-spacing:-.015em;line-height:1.04;margin:0;text-wrap:pretty}
p{margin:0 0 1.15em}
hr{border:0;border-top:1px solid var(--rule);margin:0}

.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--gutter)}
.wrap-wide{max-width:1560px;margin:0 auto;padding-inline:var(--gutter)}
.measure{max-width:var(--measure);margin-inline:auto}
.kicker{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.kicker--muted{color:var(--muted)}
.meta{font-family:var(--f-mono);font-size:13px;letter-spacing:.05em;color:var(--muted);text-transform:uppercase}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--navy);color:#fff;padding:10px 14px;z-index:99}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--rule);background:var(--paper)}
.masthead__in{display:flex;flex-direction:column;align-items:stretch;gap:0;padding-block:0}
.wordmark{flex:none;display:flex;align-items:baseline;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-block:18px 16px;text-decoration:none;color:var(--ink)}
.wordmark b{font-family:var(--f-display);font-weight:800;font-size:clamp(24px,2.6vw,31px);letter-spacing:-.022em;text-transform:none;line-height:1}
.wordmark span{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;white-space:nowrap}
.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px clamp(16px,2.4vw,34px);border-top:1px solid var(--rule)}
.nav a{display:flex;align-items:center;gap:8px;white-space:nowrap;font-family:var(--f-display);font-weight:600;font-size:16px;color:var(--ink-2);text-decoration:none;padding-block:13px;border-bottom:2px solid transparent;margin-bottom:-1px}
.nav-icon{flex:none;width:16px;height:16px;color:var(--muted)}
.nav a:hover .nav-icon,.nav a[aria-current] .nav-icon{color:var(--accent)}
.nav a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.nav a[aria-current]{color:var(--ink);border-bottom-color:var(--accent)}
.nav .nav__browse{margin-left:auto;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- footer ---------- */
.foot{background:var(--navy);color:#c3cede;margin-top:0}
.foot a{color:#fff;text-decoration:none}
.foot a:hover{color:#ff8f88}
.foot__in{display:grid;grid-template-columns:minmax(240px,1.1fr) repeat(2,minmax(160px,.7fr));gap:40px;padding-block:56px}
.foot h4{font-family:var(--f-mono);font-weight:500;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#8fa0b8;margin:0 0 16px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:16.5px}
.foot__mark{font-family:var(--f-display);font-weight:800;font-size:26px;color:#fff;letter-spacing:-.02em}
.foot__line{font-size:16px;line-height:1.5;color:#9dabbc;max-width:38ch;margin:14px 0 0}
.foot__base{border-top:1px solid var(--rule-dark);padding-block:20px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;color:#8fa0b8;text-transform:uppercase}

/* ---------- supporters strip ---------- */
.supporters{background:var(--navy);color:#c3cede;border-bottom:1px solid var(--rule-dark)}
.supporters__in{padding-block:clamp(36px,4vw,54px)}
.supporters__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 22px;margin-bottom:26px}
.supporters__head h2{font-family:var(--f-mono);font-weight:500;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:#fff}
.supporters__head p{margin:0;font-size:16px;color:#9dabbc;max-width:52ch}
.sponsor-tier{margin-bottom:22px}
.sponsor-tier__label{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7d8ea6;margin:0 0 12px}
.sponsor-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;align-items:stretch}
.sponsor{
  display:flex;flex-direction:column;gap:10px;
  background:#16263f;border:1px solid var(--rule-dark);border-radius:3px;
  padding:16px 18px 14px;text-decoration:none;color:#dbe4ef;
}
.sponsor:hover{background:#1c3050;border-color:rgba(255,255,255,.34)}
.sponsor img{width:100%;height:44px;max-height:44px;object-fit:contain;object-position:left center}
.sponsor-name{font-family:var(--f-display);font-weight:600;font-size:15px;color:#fff;line-height:1.2}
.sponsor-blurb{font-size:15px;line-height:1.45;color:#9dabbc;min-width:200px}
.sponsor.feat{background:#1a2d4b}
.sponsor.feat img{height:52px;max-height:52px}
.sponsor--lead{flex-basis:100%}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:34px 28px}
.card{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;background:transparent}
.card__img{aspect-ratio:3/2;width:100%;object-fit:cover;background:var(--paper-3)}
.card__body{display:flex;flex-direction:column;flex:1;padding-top:16px}
.card h3{font-size:22px;line-height:1.14;margin:0 0 8px;min-height:2.28em}
.card p{font-size:16.5px;line-height:1.5;color:var(--ink-2);margin:0 0 18px;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis;min-height:calc(3 * 1.5em)}
.card .meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule-soft);font-size:12px}
.card:hover h3{color:var(--accent)}

/* ---------- generic bands ---------- */
.band{padding-block:var(--band)}
.band--tint{background:var(--paper-2)}
.band--dark{background:var(--navy);color:#dbe4ef}
.band--dark h2,.band--dark h3{color:#fff}
.band--rule{border-top:1px solid var(--rule)}
.band__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px;margin-bottom:34px;padding-bottom:16px;border-bottom:2px solid var(--ink)}
.band__head h2{font-size:clamp(30px,3.4vw,42px)}
.h2-icon{display:flex;align-items:center;gap:16px}
.h2-icon .sec-icon{flex:none;color:var(--accent)}
@media (max-width:640px){.h2-icon .sec-icon{width:28px;height:28px}}
.band__head p{margin:6px 0 0;color:var(--ink-2);font-size:18px;max-width:46ch}
.band__more{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.band__more:hover{text-decoration:underline}

/* ---------- homepage lead ---------- */
.lead-feature{position:relative;background:var(--navy);color:#fff}
.lead-feature__img{width:100%;height:clamp(340px,54vh,560px);object-fit:cover;opacity:.62}
.lead-feature__in{position:relative;padding-block:clamp(28px,4vw,52px)}
.lead-feature__plate{max-width:calc(940px + var(--gutter));margin-top:-96px;margin-left:calc(-1*var(--gutter));position:relative;background:var(--navy);padding:26px var(--gutter) 0}
.lead-feature h1{font-size:clamp(38px,6vw,74px);line-height:.98;color:#fff;margin:0 0 18px}
.lead-feature .lead{font-size:clamp(18px,1.5vw,21px);color:#d6dee9;max-width:62ch;margin:0 0 20px}
.lead-feature .meta{color:#8fa0b8}
.house-rule{background:var(--accent);color:#fff}
.house-rule p{font-family:var(--f-display);font-weight:600;font-size:clamp(21px,2.4vw,31px);line-height:1.24;margin:0;padding-block:clamp(28px,3.4vw,44px);max-width:60ch}

/* ---------- specimen band (signature) ---------- */
.repair{background:var(--navy);color:#c3cede}
.repair__in{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(320px,1.15fr);gap:clamp(32px,5vw,72px);padding-block:clamp(52px,7vw,96px)}
.repair__intro h2{color:#fff;font-size:clamp(28px,3.2vw,40px);line-height:1.04;margin:0 0 16px}
.repair__intro p{font-size:17.5px;line-height:1.55;color:#a9b7c9;max-width:44ch;margin:0 0 20px}
.repair__intro .kicker{color:#ff8f88}
.repair__link{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:#fff;text-decoration:none;border-bottom:1px solid #ff8f88;padding-bottom:3px}
.repair__link:hover{color:#ff8f88}
.repair__note{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#7d8ea6;margin:28px 0 0!important}
.repair__list{list-style:none;margin:0;padding:0;counter-reset:rep}
.repair__row{display:grid;grid-template-columns:118px 1fr;gap:8px 24px;padding:24px 0;border-top:1px solid var(--rule-dark)}
.repair__row:last-child{border-bottom:1px solid var(--rule-dark)}
.repair__tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8fa0b8;padding-top:7px}
.repair__row--broken .repair__tag{color:var(--accent)}
.repair__q{font-family:var(--f-display);font-weight:600;font-size:clamp(19px,2vw,25px);line-height:1.22;color:#fff;margin:0 0 8px}
.repair__row--broken .repair__q{color:#95a4b8;text-decoration:line-through;text-decoration-color:var(--accent);text-decoration-thickness:2px}
.repair__why{font-size:16.5px;line-height:1.45;color:#a9b7c9;margin:0;grid-column:2}
@media (max-width:860px){
  .repair__in{grid-template-columns:1fr}
  .repair__row{grid-template-columns:1fr;gap:6px}
  .repair__why,.repair__q{grid-column:1}
  .repair__tag{padding-top:0}
}

/* ---------- article ---------- */
.article-hero{position:relative;background:var(--paper-3)}
.article-hero img{width:100%;height:clamp(300px,52vh,540px);object-fit:cover}
.article-head{padding-block:clamp(30px,4vw,52px) 8px;max-width:1240px}
.article-head .kicker a{color:var(--accent);text-decoration:none}
.article-head h1{font-size:clamp(36px,5.6vw,66px);line-height:.99;letter-spacing:-.022em;max-width:18ch;margin:0 0 22px}
.article-head .lead{font-size:clamp(19px,1.7vw,23px);line-height:1.45;color:var(--ink-2);max-width:56ch;margin:0 0 22px;font-weight:400}
.article-head .meta{padding-top:14px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline}
.article-head .meta span:first-child{color:var(--accent)}
.article-body{padding:clamp(28px,3.4vw,44px) 0 clamp(40px,5vw,72px);min-width:0}
.article-body>*{max-width:var(--measure);margin-inline:0!important}
.article-body::after{content:"";display:block;clear:both}
.article-body>.workbench,.article-body>.fig--bleed{
  --breakout:calc(max((100vw - 1240px)/2, 0px) + var(--gutter));
  max-width:none;width:calc(100% + var(--breakout));
  margin-left:calc(-1 * var(--breakout))!important;margin-right:0!important}
.article-body>.workbench .wb-in{max-width:none;margin:0;padding-inline:var(--breakout) clamp(28px,4vw,64px)}
.article-body>.fig--bleed figcaption{max-width:none;margin-inline:0;padding-inline:var(--breakout) clamp(28px,4vw,64px)}
.article-body>.fig--bleed figcaption>*{max-width:var(--measure)}
.workbench .wb-in{max-width:1240px;margin:0 auto;padding-inline:var(--gutter);box-sizing:border-box}
.article-body h2{font-size:clamp(26px,3vw,36px);margin-block:2em .55em;line-height:1.06;letter-spacing:-.018em;scroll-margin-top:24px}
.article-body h2 .h2-no{display:block;font-family:var(--f-mono);font-weight:400;font-size:12px;letter-spacing:.16em;color:var(--accent);margin-bottom:10px}
.article-body h2::before{content:"";display:block;width:100%;border-top:1px solid var(--rule);margin-bottom:20px}
.article-body h3{font-size:21px;margin-block:1.7em .35em;color:var(--ink)}
.article-body p{margin-block:0 1.15em}
.article-body p>strong:first-child{font-family:var(--f-display);font-weight:700}
.article-body ul,.article-body ol{padding-left:1.1em;margin-block:0 1.3em}
.article-body li{margin-bottom:.5em}

figure{margin:0}
.article-figure{margin-block:2.2em}
.article-figure img{width:100%;height:auto}
.article-figure figcaption,.figcap{
  font-family:var(--f-body);font-size:16px;line-height:1.45;color:var(--ink-2);
  padding-top:10px;border-top:1px solid var(--rule);margin-top:12px;max-width:60ch;
}
.credit{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.fig--wide{max-width:min(1100px,92vw)!important}
.fig--bleed img{width:100%}
.fig--bleed img{height:clamp(280px,46vh,520px);object-fit:cover}
.fig--bleed figcaption{max-width:var(--measure)}
.fig--inset{max-width:var(--measure)!important}
@media (min-width:900px){
  .fig--wide{max-width:100%!important}
}

.lead{font-family:var(--f-body);font-size:21px;line-height:1.5;color:var(--ink-2)}
.pullquote{margin-block:2.2em;max-width:min(940px,100%)!important;border-top:3px solid var(--accent);border-bottom:1px solid var(--rule);padding:24px 0}
.pullquote p{font-family:var(--f-display);font-weight:600;font-size:clamp(22px,2.6vw,30px);line-height:1.22;margin:0;color:var(--ink)}
.blockquote{margin:1.8em 0;padding-left:22px;border-left:3px solid var(--ink)}
.blockquote p{font-size:20px;line-height:1.45;margin:0 0 .5em}
.blockquote cite{font-family:var(--f-mono);font-size:12.5px;font-style:normal;color:var(--muted)}
.callout{background:var(--accent-soft);border-left:3px solid var(--accent);padding:20px 24px;margin:1.9em 0}
.callout h4{font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.callout p:last-child,.callout ul:last-child{margin-bottom:0}
.note{font-size:16.5px;line-height:1.5;color:var(--ink-3);border-top:1px solid var(--rule);padding-top:14px;font-style:italic}

/* notes-for-design band: the workbench */
.workbench{background:var(--navy);color:#c9d4e3;padding-block:clamp(38px,5vw,66px);margin-block:2.6em}
.workbench__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;margin-bottom:28px}
.workbench__head .kicker{margin:0;color:#ff8f88}
.workbench__head h2{font-size:clamp(24px,2.6vw,33px);color:#fff;margin:0}
.workbench__head h2::before{display:none}
.wb-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:0 44px}
.wb-list li{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:16px 0;border-top:1px solid var(--rule-dark);align-items:baseline}
.wb-list .n{font-family:var(--f-mono);font-size:12px;color:#7d8ea6}
.wb-list .t{font-family:var(--f-display);font-weight:600;font-size:18px;color:#fff;display:block;margin-bottom:4px}
.wb-list .d{font-size:16.5px;line-height:1.5;color:#a9b7c9}
.wb-list .d:only-child{font-family:var(--f-display);font-weight:600;font-size:18px;color:#fff}
.wb-list li>span:last-child{display:block}
.workbench .datatable{width:100%}
.workbench .datatable th,.workbench .datatable td{border-color:var(--rule-dark);color:#c9d4e3}
.workbench .datatable th{color:#fff}
.workbench .timeline li{border-color:var(--rule-dark)}
.workbench .timeline .t-when{color:#ff8f88}
.workbench .timeline .t-what{color:#c9d4e3}

/* tables */
.datatable,.versus{border-collapse:collapse;width:100%;font-size:16.5px;margin:1.8em 0;text-align:left}
.datatable caption,.versus caption{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left;padding-bottom:10px}
.datatable th,.versus th{font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:.01em;padding:10px 16px 10px 0;border-bottom:2px solid var(--ink);vertical-align:bottom}
.datatable td,.versus td{padding:13px 16px 13px 0;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.45}
.datatable tr td:first-child,.versus tr td:first-child{font-family:var(--f-display);font-weight:600}
.versus td+td{color:var(--ink-2)}

/* timeline */
.timeline{list-style:none;margin:1.8em 0;padding:0}
.timeline li{display:grid;grid-template-columns:minmax(130px,220px) 1fr;gap:12px 28px;padding:14px 0;border-top:1px solid var(--rule);align-items:baseline}
.timeline .t-when{font-family:var(--f-mono);font-size:13px;line-height:1.4;letter-spacing:.02em;color:var(--accent);text-transform:uppercase}
.timeline .t-what{font-size:17px;line-height:1.5;color:var(--ink-2)}

/* stats */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px;margin:1.9em 0;border-top:2px solid var(--ink);padding-top:20px}
.statblock{display:flex;flex-direction:column;gap:6px}
.stat-num{font-family:var(--f-display);font-weight:700;font-size:clamp(34px,4vw,46px);line-height:.95;letter-spacing:-.02em}
.stat-label{font-size:15.5px;line-height:1.4;color:var(--ink-3)}

/* charts */
.chart{margin:1.9em 0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart figcaption{font-size:15.5px;color:var(--ink-3);padding-top:12px;border-top:1px solid var(--rule);margin-top:12px}
.chart .c-bar{fill:var(--navy)}
.chart .c-bar-alt{fill:var(--accent)}
.chart .c-label{font-family:var(--f-mono);font-size:11.5px;fill:var(--ink-3)}
.chart.bar .c-label{font-family:var(--f-display);font-size:15px;font-weight:600;fill:var(--ink)}
.chart .c-val{font-family:var(--f-mono);font-size:11px;fill:var(--ink)}
.chart .c-axis{stroke:var(--rule);stroke-width:1}
.chart .c-line{fill:none;stroke:var(--accent);stroke-width:2}
.chart .c-dot{fill:var(--navy)}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin:2em 0}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%}
.gallery figcaption{font-size:15px;line-height:1.4;color:var(--ink-3);padding-top:8px}

/* cards / references */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin:1.9em 0}
.profile-card{border-top:2px solid var(--ink);padding-top:16px;display:flex;flex-direction:column;gap:8px}
.profile-card .p-photo{width:100%;aspect-ratio:4/3;object-fit:cover}
.profile-card h3{font-size:20px}
.profile-card .p-role{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0}
.profile-card p{font-size:16.5px;line-height:1.5;margin:0}
.profile-card .p-links{font-family:var(--f-mono);font-size:13px}
.profile-card .p-attr{font-family:var(--f-mono);font-size:11.5px;color:var(--muted)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:1.9em 0}
.org-card{display:flex;flex-direction:column;gap:4px;border:1px solid var(--rule);padding:14px 16px;text-decoration:none;color:inherit}
.org-card:hover{border-color:var(--ink)}
.org-logo{height:34px;width:auto;max-width:100%;object-fit:contain;object-position:left center;margin-bottom:6px}
.org-name{font-family:var(--f-display);font-weight:600;font-size:16.5px;line-height:1.2}
.org-host{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.entity-ref{font-family:inherit;white-space:nowrap}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:1.6em 0 0}
.further-grid a{display:block;border-top:2px solid var(--ink);padding-top:12px;font-family:var(--f-display);font-weight:600;font-size:18.5px;line-height:1.2;text-decoration:none;color:var(--ink)}
.further-grid a:hover{color:var(--accent)}
.related-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.related-links li{border-top:2px solid var(--ink);padding-top:12px}
.related-links a{font-family:var(--f-display);font-weight:600;font-size:18.5px;line-height:1.2;text-decoration:none;color:var(--ink)}
.related-links a:hover{color:var(--accent)}
.related-links .meta{display:block;margin-top:6px;font-size:11.5px}

/* category list */
.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 a{display:grid;grid-template-columns:64px minmax(0,1fr) 150px;gap:12px 28px;align-items:baseline;padding:22px 0;text-decoration:none;color:inherit}
.cat-list .n{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.cat-list h3{font-size:clamp(22px,2.3vw,28px);line-height:1.1;margin:0 0 6px}
.cat-list p{font-size:16.5px;line-height:1.5;color:var(--ink-2);margin:0;max-width:64ch}
.cat-list .meta{font-size:11.5px;text-align:right}
.cat-list a:hover h3{color:var(--accent)}

/* expander (CSS-only) */
.expander{margin-top:18px}
.expander input{position:absolute;opacity:0;pointer-events:none}
.expander__more{display:none}
.expander input:checked~.expander__more{display:block}
.expander label{display:inline-block;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid currentColor;cursor:pointer;padding-bottom:2px;margin-top:16px}
.expander input:checked~label .expander__show{display:none}
.expander__hide{display:none}
.expander input:checked~label .expander__hide{display:inline}

/* section intro */
.page-head{padding-block:clamp(38px,5vw,72px) clamp(24px,3vw,40px);border-bottom:1px solid var(--rule)}
.page-head h1{font-size:clamp(40px,6.6vw,86px);line-height:.94;margin:0 0 18px}
.page-head .lead{max-width:58ch;margin:0}
.page-head__no{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 16px}

.hub-section{padding-block:clamp(30px,4vw,52px);border-bottom:1px solid var(--rule)}
.hub-section:last-of-type{border-bottom:0}
.hub-section__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-bottom:20px}
.hub-section h2{font-size:clamp(26px,3vw,36px)}
.hub-section .blurb{font-size:17px;color:var(--ink-2);margin:0}

.prose-page{padding-block:clamp(30px,4vw,56px) clamp(48px,6vw,90px)}
.prose-page p,.prose-page ul{max-width:var(--measure)}
.prose-page h2{font-size:clamp(24px,2.6vw,32px);margin:1.8em 0 .5em}

@media (max-width:899px){
  .nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:none}
  .nav .nav__browse{margin-left:12px;padding-right:2px}
}
@media (max-width:900px){
  .foot__in{grid-template-columns:1fr 1fr}
  .cat-list a{grid-template-columns:44px 1fr}
  .cat-list .meta{grid-column:2;text-align:left;margin-top:8px}
  .lead-feature__plate{margin-top:-40px;padding-right:0}
}
@media (max-width:640px){
  body{font-size:17.5px}
  :root{--measure:100%}
  .article-body>*{max-width:100%}
  .fig--wide,.fig--inset,.pullquote{max-width:100%!important}
  .foot__in{grid-template-columns:1fr;gap:30px;padding-block:40px}
  .nav{gap:0 18px;justify-content:flex-start}
  .nav a{font-size:15px;padding-block:11px}
  .nav .nav__browse{margin-left:0}
  .wordmark span{display:none}
  .sponsor-row{grid-template-columns:1fr}
  .band__head{border-bottom-width:2px}
}
@media print{
  .masthead,.foot,.supporters{display:none}
}

.profile-card.no-photo{background:var(--paper-2);padding:18px 20px 20px;border-top:2px solid var(--accent)}
.org-card.no-logo{justify-content:flex-end;min-height:86px}
.chart.donut svg{max-width:420px}
.chart.bar svg{max-width:100%}

/* ---------- article reading pass ---------- */
.contents{max-width:100%;margin:0;padding:0 0 30px}
.contents__label{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.contents ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.contents li{border-bottom:1px solid var(--rule-soft)}
.contents a{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:baseline;padding:9px 0;
  font-family:var(--f-display);font-weight:600;font-size:15.5px;line-height:1.25;color:var(--ink);text-decoration:none}
.contents a:hover{color:var(--accent)}
.contents .n{font-family:var(--f-mono);font-weight:400;font-size:11px;color:var(--muted)}

.article-body .opening{font-size:21px;line-height:1.5}
.article-body .opening::first-letter{
  float:left;font-family:var(--f-display);font-weight:700;font-size:4.15em;line-height:.78;
  padding:.04em .1em 0 0;margin:.02em .04em 0 0;color:var(--accent)}
.article-body .opening::first-line{font-variant-caps:all-small-caps;letter-spacing:.03em;font-weight:600}

.endmark{max-width:var(--measure);margin:.4em 0 0}
.endmark::after{content:"";display:inline-block;width:11px;height:11px;background:var(--accent)}

@media (max-width:640px){
  .article-body .opening{font-size:19.5px}
  .article-body .opening::first-letter{font-size:3.4em}
}

/* ---------- article shell + right rail ---------- */
.article-shell{max-width:1240px;margin-inline:auto;padding-inline:var(--gutter)}
.rail{display:block}
.rail__sec ul{list-style:none;margin:0 0 16px;padding:0;border-top:1px solid var(--ink)}
.rail__sec li{border-bottom:1px solid var(--rule-soft)}
.rail__sec a{display:block;padding:10px 0;font-family:var(--f-display);font-weight:600;font-size:15.5px;
  line-height:1.24;color:var(--ink);text-decoration:none}
.rail__sec a:hover{color:var(--accent)}
.rail__all{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);text-decoration:none}
.rail__all:hover{text-decoration:underline}
@media (min-width:900px){
  .article-shell{display:grid;grid-template-columns:minmax(0,1fr) clamp(212px,21vw,286px);gap:clamp(36px,4.4vw,72px)}
  .rail{position:sticky;top:22px;align-self:start;padding-top:clamp(28px,3.4vw,44px);
    max-height:calc(100vh - 44px);overflow:auto;scrollbar-width:thin}
  .article-body>.fig--inset{float:right;clear:right;max-width:none!important;width:clamp(220px,22vw,300px);
    margin:.4em 0 1.5em 40px!important}
  .article-body>.fig--inset figcaption{font-size:14.5px;line-height:1.4}
}
@media (max-width:899px){
  .article-shell{display:flex;flex-direction:column}
  .rail{order:-1;padding-top:26px}
  .rail__sec{display:none}
}

/* ---------- end-of-article plate ---------- */
.plate-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px 24px;margin:2.4em 0 0;
  max-width:none!important;padding-top:26px;border-top:1px solid var(--rule)}
.plate-row .fig--plate{margin:0!important;max-width:none!important;float:none!important;width:auto!important}
.plate-row .fig--plate img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto}
.plate-row .fig--plate figcaption{font-size:15px;line-height:1.42;padding-top:9px;margin-top:10px}
.fig--plate{max-width:var(--measure)!important;float:none!important;margin:2.2em 0 0!important}
.fig--plate img{width:100%;height:auto}

/* ---------- mobile pass ---------- */
@media (max-width:899px){
  .article-body>.workbench,.article-body>.fig--bleed{
    --breakout:var(--gutter);
    width:calc(100% + (2 * var(--gutter)))}
  .article-body>.workbench .wb-in,.article-body>.fig--bleed figcaption{padding-inline:var(--gutter)}
  .contents a{padding:12px 0}
  .wb-list{grid-template-columns:1fr;gap:0}
}
@media (max-width:700px){
  :root{--gutter:clamp(18px,5vw,28px)}
  .timeline li{grid-template-columns:1fr;gap:4px;padding:13px 0}
  .timeline .t-when{letter-spacing:.06em}
  .datatable,.versus{font-size:16px}
  .datatable th,.versus th{font-size:14px;padding-right:12px}
  .datatable td,.versus td{padding-right:12px}
  .statrow{grid-template-columns:1fr 1fr;gap:20px}
  .plate-row{grid-template-columns:1fr;gap:22px}
  .lead-feature__img{height:clamp(240px,42vh,360px)}
  .article-hero img{height:clamp(210px,34vh,320px)}
  .fig--bleed img{height:clamp(220px,34vh,340px)}
  .repair__q{font-size:19px}
  .band__head{margin-bottom:26px}
  .further-grid,.related-links{gap:14px}
}
@media (max-width:460px){
  .statrow{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr;gap:28px}
  .gallery,.profile-grid,.org-grid,.specimens{grid-template-columns:1fr}
  .cat-list a{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .cat-list .n{grid-column:1}
  .cat-list .meta{grid-column:1}
  .h2-icon{gap:12px}
  .article-body h2 .h2-no{margin-bottom:8px}
  .foot__base{font-size:11px}
}

@media (max-width:700px){
  .band__more,.repair__link,.rail__all{display:inline-flex;align-items:center;min-height:44px}
  .lead-feature .meta a{display:inline-flex;align-items:center;min-height:44px}
}

/* 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-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-row .sponsor.sponsor img{height:44px!important}

/* op-footer-compact: the footer printed 5 rows for 5 link(s) in
   1 list(s) — 712px at 390, 6% 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 712 -> 523px (27% 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(10px,2.78vw,40px)!important;row-gap:4px!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,
   1327px at 390, 11% of the whole page. Two columns bring it to
   735px (45% shorter). Checked before writing: no new overflow, smallest mark still
   129px wide, longest blurb 3 lines, tile heights 104-182px.
   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-row), 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-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .sponsor-row > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-row > * *{min-width:0!important;max-width:100%}
    .sponsor-row img,.sponsor-row svg{max-width:100%;height:auto}
  .sponsor-row .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 528px (63 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 ~90 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. The layout has no room to grow above 1600, so this width holds there. Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  div.article-body{--measure:min(860px, 100%)!important}
}
/* op-article-width:end */

/* op-article-head: the article header followed the text column (528px) and was left behind when the text went to 763px. 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){
  div.article-head p.lead{max-width:min(763px, 100%)!important}
}
/* op-article-head:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--f-display); font-weight: 700; letter-spacing: -0.015em; line-height: 1.04; margin: 0px; text-wrap: pretty;}
.cat-list h2:where(.rt-h3){font-size: clamp(22px, 2.3vw, 28px); line-height: 1.1; margin: 0px 0px 6px;}
.cat-list a:hover h2:where(.rt-h3){color: var(--accent);}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.article-body > figure.article-figure.fig--bleed > img,
  div.article-body > figure.article-figure.fig--inset > img,
  div.article-body > figure.article-figure.fig--plate > img,
  div.cards > a.card > img.card__img,
  div.plate-row > figure.article-figure.fig--plate > img,
  main > figure.article-hero > img,
  main > section.lead-feature > img.lead-feature__img){height:auto}
/* op-img-dims:end */