/* ==========================================================================
   zunia.org — one stylesheet.
   Palette roles, type scale, figure system, components.
   ========================================================================== */

:root{
  /* --- palette: five members, each with a job ------------------------- */
  --ground:      #EDE7DC;   /* ground — page paper */
  --ground-2:    #E7DFD0;   /* ground, recessed — alternate bands */
  --ink:         #1A1712;   /* ink — body and headline text, dark plates */
  --ink-soft:    #3D362C;   /* ink, secondary */
  --ink-faint:   #6B6154;   /* ink, quiet — credits, meta */
  --rule:        #C9BFAA;   /* hairlines */
  --accent:      #C8500F;   /* accent — saturated ochre-red, hue ~22deg */
  --secondary:   #2A3C8F;   /* secondary — saturated indigo, hue ~228deg */
  --flag:        #EDD9A8;   /* flag — pale gold, for text on dark grounds */
  --accent-wash: #F6E6DC;

  --measure: 672px;
  --gut: clamp(20px, 4vw, 44px);
  --wide: 1220px;

  --serif: Petrona, "Iowan Old Style", Georgia, serif;
  --sans: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:18px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:var(--secondary); text-decoration:none; }
a:hover{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; margin:0; letter-spacing:-.015em; text-wrap:pretty; }
p{ margin:0 0 1.15em; }
ul,ol{ margin:0 0 1.15em; padding-left:1.25em; }
figure{ margin:0; }
table{ border-collapse:collapse; }
hr{ border:0; border-top:1px solid var(--rule); margin:2.4rem 0; }
::selection{ background:var(--flag); }

.wrap{ max-width:var(--wide); margin:0 auto; padding-inline:var(--gut); }
.wrap--text{ max-width:calc(var(--measure) + 2*var(--gut)); margin:0 auto; padding-inline:var(--gut); }
.kicker{
  font-size:12.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:600;
}
.kicker--accent{ color:var(--accent); }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:8px; top:8px; background:var(--ink); color:var(--ground); padding:10px 14px; z-index:99; }

/* --- drawn device: hand-drawn brackets, corner marks, rules ---------- */
.mark{ display:block; }
.rule-hand{ display:block; width:100%; height:9px; color:var(--ink); }
.bracket{ color:var(--accent); flex:none; }

/* --- section icons --------------------------------------------------- */
.ico{ width:22px; height:22px; flex:none; color:var(--accent); }
.ico--lg{ width:30px; height:30px; }

/* ==========================================================================
   MASTHEAD — asymmetric split: wordmark left, two-level index right.
   No dropdowns; the second level is always visible.
   ========================================================================== */
.masthead{ border-bottom:1px solid var(--rule); }
.masthead__in{
  display:grid; grid-template-columns:minmax(300px,.85fr) minmax(400px,1.15fr);
  gap:34px clamp(44px,5.4vw,80px); padding-block:clamp(34px,4.2vw,58px) 30px;
}
@media (max-width:900px){ .masthead__in{ grid-template-columns:minmax(0,1fr); } }
.masthead__id{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(18px,2vw,26px); padding-right:clamp(10px,1.6vw,22px); }
.wordmark{ display:flex; align-items:flex-start; gap:.13em; text-decoration:none; color:inherit; font-size:clamp(62px,11.2vw,166px); }
.wordmark .mark{ height:.6809em; width:auto; flex:none; margin-top:.0293em; }
.wordmark:hover{ text-decoration:none; color:inherit; }
.wordmark__type{ padding-right:.06em;
  font-family:var(--serif); font-weight:700; font-size:1em;
  line-height:.84; letter-spacing:-.04em; color:var(--ink); display:block;
}
.wordmark__sub{
  font-family:var(--serif); font-style:italic; font-size:clamp(21px,2.7vw,35px);
  line-height:1.2; color:var(--ink-soft); max-width:20ch;
}
.masthead--compact .masthead__in{ display:flex; align-items:center; gap:20px 30px; flex-wrap:wrap; padding-block:16px; }
.masthead--compact .wordmark{ font-size:34px; gap:.2em; align-items:center; }
.masthead--compact .wordmark .mark{ margin-top:0; }

.sitenav{ border-left:1px solid var(--rule); padding-left:24px; }
.sitenav__head{ margin-bottom:14px; }
.sitenav ol{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:22px clamp(20px,2.4vw,30px); align-content:start; }
.sitenav__sec{ display:flex; gap:10px; align-items:baseline; }
.sitenav__no{ font-family:var(--serif); font-size:20px; line-height:1.1; color:var(--accent); }
.sitenav__sec a{
  font-family:var(--serif); font-size:19px; line-height:1.16; font-weight:600; color:var(--ink);
}
.sitenav__pages{ display:flex; flex-direction:column; gap:3px; margin:7px 0 0 30px; font-size:14.5px; line-height:1.35; }
.sitenav__all{ margin-top:16px; padding-top:13px; border-top:1px solid var(--rule); font-size:14.5px; }
.masthead__all{ margin:0; padding-top:14px; border-top:1px solid var(--rule); align-self:stretch; font-size:clamp(16px,1.6vw,19px); }
.masthead__all a{ color:var(--accent); font-weight:600; }
.sitenav__all a{ color:var(--accent); font-weight:600; }

/* compact nav used on inner pages: one ruled row, all sections + archive */
.navbar{ margin-left:auto; display:flex; flex-wrap:wrap; gap:6px 20px; font-size:14.5px; align-items:center; }
.navbar a{ display:flex; align-items:center; gap:7px; color:var(--ink); }
.navbar a:hover{ color:var(--accent); }
.navbar .is-here{ color:var(--accent); font-weight:600; }
.navbar__all{ color:var(--accent); font-weight:600; }

/* ==========================================================================
   FIGURE SYSTEM — four treatments, one drawing system.
   Square corners, kicker-led caption, credit smaller and quieter.
   ========================================================================== */
.article-figure{ margin:0; }
.article-figure img{ width:100%; height:auto; }
figcaption{ font-size:15.5px; line-height:1.45; color:var(--ink-soft); }
.cap{ display:block; }
.cap__k{ display:block; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:5px; }
.cap__t{ display:block; max-width:56ch; }
.credit{ display:block; margin-top:6px; font-size:12px; line-height:1.4; color:var(--ink-faint); }

/* 1 · plate — photograph on a mat, hairline keyline, caption in the mat */
.fig--plate{ background:#E2DACB; border:1px solid var(--rule); padding:16px; }
.fig--plate figcaption{ padding-top:13px; }

/* 2 · bleed — breaks the measure, caption offset below with a rule */
.fig--bleed{ margin-inline:calc(50% - 50vw); width:100vw; }
.fig--bleed figcaption{
  max-width:var(--wide); margin:0 auto; padding:14px var(--gut) 0;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,240px); gap:26px;
}
.fig--bleed .credit{ margin:0; text-align:right; }

/* 3 · bracketed — hand-drawn corner marks, caption hangs beside */
.fig--bracket{ position:static; }
.fig__im{ position:relative; display:block; }
.fig--bracket .cm{ position:absolute; width:30px; height:30px; color:var(--accent); }
.fig--bracket .cm--tl{ top:-9px; left:-9px; }
.fig--bracket .cm--br{ bottom:-9px; right:-9px; transform:rotate(180deg); }
.fig--bracket figcaption{ margin-top:15px; border-top:1px solid var(--rule); padding-top:11px; }

/* 4 · tinted bar — coloured bar keyed to the palette, hanging caption */
.fig--bar{ border-top:5px solid var(--secondary); padding-top:14px; }
.fig--bar figcaption{ margin-top:12px; padding-left:18px; border-left:2px solid var(--secondary); }

.fig--right{ float:right; width:min(42%,320px); margin:10px 0 34px clamp(28px,3.6vw,46px); }
.prose > .article-figure{ margin-block:clamp(40px,5.2vw,72px); }
.prose > .article-figure.fig--right{ margin-block:10px 34px; }
.prose h2, .prose h3, .prose .band-note{ clear:both; }
.gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:20px; }
.gallery figure{ display:flex; flex-direction:column; }
.gallery img{ aspect-ratio:16/10; object-fit:cover; }
.gallery figcaption{ margin-top:10px; font-size:14.5px; }

/* ==========================================================================
   ARTICLE COMPONENTS
   ========================================================================== */
.lead{
  font-family:var(--serif); font-size:clamp(21px,2.4vw,26px); line-height:1.4;
  color:var(--ink); font-weight:500;
}
.prose{ font-size:18.5px; line-height:1.72; color:var(--ink); }
.prose h2{
  font-size:clamp(25px,3vw,32px); line-height:1.14; margin:2.3em 0 .55em;
  padding-top:.5em; border-top:1px solid var(--rule);
}
.prose h3{ font-size:22px; margin:1.8em 0 .4em; }
.prose > p:first-of-type{ margin-top:0; }
.prose a{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2.5px; }

.pullquote{
  margin:2.2rem 0; border:0; padding:0;
}
.pullquote p{
  font-family:var(--serif); font-style:italic; font-size:clamp(24px,3.2vw,34px);
  line-height:1.22; color:var(--secondary); margin:0; max-width:34ch;
}
.pullquote::after{
  content:""; display:block; width:120px; height:1px; background:var(--accent); margin-top:18px;
}
.blockquote{ margin:2.2rem 0; padding:0 0 0 22px; border-left:3px solid var(--accent); }
.blockquote p{ font-family:var(--serif); font-size:22px; line-height:1.35; margin:0 0 .5em; }
.blockquote cite{ font-style:normal; font-size:13.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }

.callout{
  margin:2.2rem 0; background:var(--secondary); color:#F2EEE4;
  padding:26px 28px; border-top:5px solid var(--flag);
}
.callout p{ margin:0; font-size:18px; line-height:1.55; }
.callout p + p{ margin-top:.8em; }
.callout a{ color:var(--flag); }

.note{
  font-size:16px; line-height:1.55; color:var(--ink-faint);
  border-left:2px solid var(--rule); padding-left:16px; margin:1.6rem 0;
}

/* interruption band — full-measure-breaking panel between prose sections */
.band-note{
  margin:2.6rem 0; background:var(--ground-2); border-top:1px solid var(--ink);
  padding:26px clamp(18px,3vw,32px) 30px;
}
.band-note__head{ display:flex; align-items:baseline; gap:12px; margin-bottom:18px; }
.band-note__head h3{ font-size:21px; line-height:1.2; }

/* timeline — long multi-word labels, not just years */
.timeline{ list-style:none; margin:0; padding:0; }
.timeline li{
  display:grid; grid-template-columns:minmax(96px,150px) minmax(0,1fr); gap:8px 22px;
  padding:12px 0; border-top:1px solid var(--rule);
}
.timeline li:first-child{ border-top:0; padding-top:0; }
.t-when{
  font-family:var(--serif); font-size:20px; line-height:1.2; color:var(--accent); font-weight:600;
}
.t-what{ font-size:16.5px; line-height:1.5; color:var(--ink-soft); }

/* key-terms / definition plate */
.deflist{ margin:0; }
.deflist div{ padding:12px 0; border-top:1px solid var(--rule); }
.deflist div:first-child{ border-top:0; padding-top:0; }
.deflist dt{ font-weight:700; font-size:16.5px; }
.deflist dd{ margin:3px 0 0; font-size:16.5px; line-height:1.5; color:var(--ink-soft); }

/* stat row */
.statrow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:18px; }
.statblock{ border-top:3px solid var(--accent); padding-top:12px; }
.stat-num{ display:block; font-family:var(--serif); font-size:clamp(38px,5vw,54px); line-height:.95; color:var(--ink); }
.stat-label{ display:block; margin-top:8px; font-size:14.5px; line-height:1.4; color:var(--ink-soft); }

/* tables */
.datatable, .versus{ width:100%; font-size:16.5px; }
.datatable th, .versus th{
  text-align:left; font-family:var(--sans); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint); font-weight:600;
  padding:0 14px 9px 0; border-bottom:2px solid var(--ink);
}
.datatable td, .versus td{ padding:12px 14px 12px 0; border-bottom:1px solid var(--rule); vertical-align:top; line-height:1.45; }
.datatable tr:last-child td, .versus tr:last-child td{ border-bottom:1px solid var(--ink); }
.datatable td:first-child{ font-weight:600; }
.versus td:first-child{ font-weight:600; width:36%; }
.table-scroll{ overflow-x:auto; }

/* charts */
.chart svg{ width:100%; height:auto; display:block; }
.chart figcaption{ margin-top:12px; }

/* map */
.map-figure{ margin:0; }
.mapband{ display:grid; gap:clamp(22px,3vw,34px); }
.mapband__foot{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(24px,4vw,48px); align-items:start; }
.map-figure svg{ width:100%; height:auto; display:block; }
.map-frame{ background:var(--ground-2); border:1px solid var(--rule); padding:14px; }
.map-figure figcaption{ margin-top:13px; }
.map-pin-label{ font-family:var(--sans); font-size:15px; font-weight:700; letter-spacing:.02em; fill:#1A1712; paint-order:stroke; stroke:#EDE7DC; stroke-width:3.5px; }
.map-slot{ min-height:320px; background:var(--ground-2); border:1px solid var(--rule); }

/* cards / references */
.profile-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; }
.profile-card{ display:flex; flex-direction:column; background:var(--ground-2); border:1px solid var(--rule); padding:18px; }
.profile-card .p-photo{ width:100%; aspect-ratio:1/1; object-fit:cover; margin-bottom:14px; }
.profile-card h3{ font-size:20px; line-height:1.2; }
.profile-card .p-role{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin:5px 0 10px; }
.profile-card p{ font-size:16px; line-height:1.5; color:var(--ink-soft); }
.profile-card .p-links{ margin-top:auto; padding-top:12px; font-size:15px; }
.profile-card.no-photo{ border-left:4px solid var(--accent); }

.org-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.org-card{
  display:flex; flex-direction:column; gap:4px; padding:16px;
  border:1px solid var(--rule); background:var(--ground); color:var(--ink);
}
.org-card:hover{ border-color:var(--accent); text-decoration:none; }
.org-logo{ height:30px; width:auto; margin-bottom:8px; }
.org-name{ font-family:var(--serif); font-size:19px; line-height:1.2; font-weight:600; }
.org-host{ font-size:13px; color:var(--ink-faint); }
.entity-ref{ font-weight:600; white-space:nowrap; }

.further-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.further-grid a{
  display:flex; flex-direction:column; min-height:100%; padding:16px;
  border-top:3px solid var(--accent); background:var(--ground-2); color:var(--ink);
  font-family:var(--serif); font-size:19px; line-height:1.24; font-weight:600;
}
.further-grid a:hover{ background:var(--accent-wash); text-decoration:none; color:var(--accent); }

.related-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.related-links li{ border-top:1px solid var(--rule); }
.related-links li:last-child{ border-bottom:1px solid var(--rule); }
.related-links a{
  display:flex; gap:12px; align-items:baseline; padding:13px 0;
  font-family:var(--serif); font-size:19px; line-height:1.25; color:var(--ink);
}
.related-links a:hover{ color:var(--accent); text-decoration:none; }
.related-links .rl-sec{ font-family:var(--sans); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }

/* ==========================================================================
   HOMEPAGE BANDS
   ========================================================================== */
.band{ padding-block:clamp(46px,6vw,86px); }
.band--recess{ background:var(--ground-2); border-block:1px solid var(--rule); }
.band--dark{ background:var(--secondary); color:#F2EEE4; }
.band--dark h2, .band--dark h3{ color:#FBF7EE; }
.band--dark a{ color:var(--flag); }
.band--dark .kicker{ color:#A8B4E8; }
.band--tight{ padding-block:clamp(34px,4vw,54px); }

.hero{ position:relative; }
.hero img{ width:100%; height:min(74vh,660px); object-fit:cover; }
.hero__plate{
  position:absolute; inset:auto 0 0 0; padding:34px 0 30px;
  background:linear-gradient(to top,rgba(20,16,10,.92),rgba(20,16,10,.55) 46%,rgba(20,16,10,.02) 96%);
}
.hero h1{
  font-size:clamp(30px,5.4vw,64px); line-height:1.02; color:#FBF6EC; max-width:26ch;
  font-weight:600; text-shadow:0 1px 24px rgba(20,16,10,.55);
}
.hero .kicker{ color:var(--flag); margin-bottom:12px; }
.hero__foot{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px 40px;
  padding-top:16px;
}
.hero__foot p{ font-family:var(--serif); font-size:clamp(17px,2vw,20px); line-height:1.42; color:var(--ink-soft); margin:0; max-width:60ch; }

.lede-band{ display:grid; grid-template-columns:34px minmax(0,1.6fr) minmax(220px,1fr); gap:0 clamp(20px,3vw,40px); align-items:start; }
.lede-band__body p:last-child{ margin-bottom:0; }

.trio{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:26px; align-items:start; }
.trio > *:nth-child(2){ padding-top:clamp(0px,4vw,46px); }
.trio > *:nth-child(3){ padding-top:clamp(0px,9vw,112px); }

.quiet{ text-align:center; background:var(--secondary); color:var(--ground); padding:clamp(46px,7vw,92px) clamp(22px,5vw,62px); }
.quiet blockquote{
  margin:0 auto; max-width:26ch; font-family:var(--serif); font-style:italic;
  font-size:clamp(30px,5.2vw,58px); line-height:1.14; color:var(--ground); max-width:24ch;
}
.quiet__src{ margin-top:24px; font-size:13.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(237,231,220,.7); }

.split{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(28px,4vw,56px); align-items:start; }
.split--wide-left{ grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr); }

.feature{ display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,340px); gap:clamp(24px,4vw,48px); align-items:start; }
.feature h2{ font-size:clamp(28px,4vw,44px); line-height:1.04; }

.card-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; }
.card{ display:flex; flex-direction:column; min-height:100%; background:var(--ground); border:1px solid var(--rule); }
.card img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.card__body{ display:flex; flex-direction:column; flex:1; padding:16px 18px 18px; }
.card__sec{ display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.card__sec span{ font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; }
.card h3{ font-size:21px; line-height:1.18; min-height:2.36em; }
.card p{ font-size:16px; line-height:1.5; color:var(--ink-soft); margin:9px 0 0; }
.card__go{ margin-top:auto; padding-top:14px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); font-weight:600; }
a.card:hover{ border-color:var(--accent); text-decoration:none; }
a.card{ color:inherit; }
.band--dark .card{ background:var(--ground); color:var(--ink); }
.band--dark .card h3{ color:var(--ink); }
.band--dark .card p{ color:var(--ink-soft); }
.band--dark .card__sec span{ color:var(--ink-faint); }
.band--dark .card__go{ color:var(--accent); }
.band--dark .card .ico{ color:var(--accent); }

.sec-index{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:clamp(22px,3vw,38px); }
.sec-index__col h3{ font-size:22px; line-height:1.16; }
.sec-index__col ul{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; }
.sec-index__col li{ border-top:1px solid var(--rule); }
.sec-index__col li a{ display:block; padding:10px 0; font-size:16.5px; line-height:1.35; color:var(--ink); }
.sec-index__col li a:hover{ color:var(--accent); text-decoration:none; }
.sec-index__head{ display:flex; gap:10px; align-items:center; }

.band--close{ background:var(--accent-wash); border-top:1px solid var(--rule); }
.close-lead{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(26px,4vw,54px); align-items:center; }
.close-lead__h{ font-size:clamp(29px,4.4vw,50px); line-height:1.02; letter-spacing:-.02em; }
.partlist{ list-style:none; margin:clamp(34px,4vw,56px) 0 0; padding:0; border-top:2px solid var(--ink); }
.partlist li{ border-bottom:1px solid var(--rule); }
.partlist a{ display:grid; grid-template-columns:54px 34px minmax(0,1fr) auto; gap:0 18px; align-items:center; padding:18px 0; color:var(--ink); }
.partlist a:hover{ color:var(--accent); text-decoration:none; }
.partlist__no{ font-family:var(--serif); font-size:clamp(30px,3.4vw,40px); line-height:1; color:var(--accent); }
.partlist__t{ display:block; font-family:var(--serif); font-size:clamp(20px,2.4vw,26px); line-height:1.16; font-weight:600; }
.partlist__d{ display:block; font-size:15.5px; line-height:1.4; color:var(--ink-faint); margin-top:4px; }
.partlist__n{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:600; white-space:nowrap; }
.close-all{ margin:26px 0 0; font-size:17px; }
.close-all a{ font-weight:600; }
@media (max-width:620px){
  .partlist a{ grid-template-columns:40px minmax(0,1fr); padding:15px 0; }
  .partlist__ico, .partlist__n{ display:none; }
}

/* ==========================================================================
   SUPPORTERS — woven clusters, uneven mosaic, mark only.
   Tile width is CONSTANT; a slot never grows. Prominence is a class.
   ========================================================================== */
.supporters{ padding-block:clamp(26px,3.2vw,40px); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); background:var(--ground-2); }
.supporters__head{ margin-bottom:18px; text-align:center; }
.sponsor-mosaic{
  --tile:230px;
  display:grid; grid-template-columns:repeat(auto-fit,var(--tile)); gap:12px;
  justify-content:center; align-content:start;
}
@media (max-width:1080px){ .sponsor-mosaic{ --tile:200px; } }
@media (max-width:760px){ .sponsor-mosaic{ --tile:168px; } }
.sponsor{
  grid-column:span 1;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink); border:1px solid var(--ink);
  height:74px; padding:14px 18px; overflow:hidden;
}
.sponsor:hover{ border-color:var(--accent); text-decoration:none; }
.sponsor img{
  max-height:44px; max-width:100%; width:auto; height:auto; object-fit:contain;
}
.sponsor.feat{ grid-column:span 1; }
@media (max-width:560px){
  .sponsor-mosaic{ grid-template-columns:repeat(auto-fit,minmax(0,1fr)); }
  .sponsor, .sponsor.feat{ grid-column:span 1; }
}

/* ==========================================================================
   SECTION / ARCHIVE / PAGES
   ========================================================================== */
.pagehead{ padding-block:clamp(44px,6vw,78px) clamp(28px,3.4vw,44px); }
.pagehead__no{ font-family:var(--serif); font-size:clamp(48px,8vw,78px); line-height:.8; color:var(--accent); }
.pagehead h1{ font-size:clamp(34px,6vw,58px); line-height:1.02; max-width:26ch; }
.pagehead .dek{ font-family:var(--serif); font-size:clamp(19px,2.3vw,23px); line-height:1.42; color:var(--ink-soft); max-width:52ch; margin:16px 0 0; }
.pagehead__grid{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(16px,3vw,34px); align-items:start; }

.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:minmax(0,1fr) auto; gap:8px 22px; align-items:baseline; padding:16px 0; color:var(--ink); }
.cat-list a:hover{ color:var(--accent); text-decoration:none; }
.cat-list .cl-t{ font-family:var(--serif); font-size:clamp(20px,2.4vw,25px); line-height:1.2; font-weight:600; }
.cat-list .cl-d{ display:block; font-family:var(--sans); font-size:16px; line-height:1.45; color:var(--ink-soft); margin-top:6px; max-width:62ch; }
.cat-list .cl-go{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:600; }

details.more{ margin-top:14px; }
details.more > summary{
  cursor:pointer; list-style:none; font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent); font-weight:600; padding:10px 0;
  border-top:1px solid var(--rule);
}
details.more > summary::-webkit-details-marker{ display:none; }
details.more[open] > summary{ color:var(--ink-faint); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.sitefoot{ background:var(--ink); color:#D8CFBD; margin-top:clamp(46px,6vw,90px); }
.sitefoot__in{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:36px 48px; padding-block:clamp(38px,5vw,58px); }
.sitefoot .wordmark{ font-size:44px; margin-bottom:16px; }
.sitefoot .wordmark__type{ padding-right:.06em; color:var(--ground); }
.sitefoot p{ font-size:16px; line-height:1.5; color:#BFB3A0; max-width:46ch; margin:18px 0 0; }
.sitefoot a{ color:var(--flag); }
.sitefoot nav{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:24px; font-size:15px; }
.sitefoot nav > div{ display:flex; flex-direction:column; gap:7px; }
.sitefoot__k{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:#8A7F6E; margin-bottom:4px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:900px){
  .sitenav{ border-left:0; padding-left:0; border-top:1px solid var(--rule); padding-top:20px; }
  .feature{ grid-template-columns:minmax(0,1fr); }
  .split--wide-left{ grid-template-columns:minmax(0,1fr); }
  .lede-band{ grid-template-columns:24px minmax(0,1fr); }
  .lede-band__aside{ grid-column:1/-1; margin-top:26px; }
  .fig--right{ float:none; width:100%; margin:20px 0; }
}
@media (max-width:620px){
  body{ font-size:17px; }
  .prose{ font-size:17.5px; }
  .fig--bleed figcaption{ grid-template-columns:minmax(0,1fr); }
  .fig--bleed .credit{ text-align:left; }
  .timeline li{ grid-template-columns:minmax(0,1fr); gap:4px; }
  .hero img{ height:min(58vh,420px); }
  .pagehead__grid{ grid-template-columns:minmax(0,1fr); }
  .cat-list a{ grid-template-columns:minmax(0,1fr); }
  .cat-list .cl-go{ display:none; }
  .trio > *:nth-child(2), .trio > *:nth-child(3){ padding-top:0; }
}

.pinlist{ list-style:none; margin:0; padding:4px clamp(18px,2.4vw,26px) 8px; background:var(--ground-2); border:1px solid var(--rule); }
.pinlist li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:baseline; padding:13px 0; border-top:1px solid var(--rule); }
.pinlist li:first-child{ border-top:0; }
.pinlist a{ font-family:var(--serif); font-weight:700; font-size:clamp(19px,2.1vw,25px); line-height:1; color:var(--ink); text-decoration:none; }
.pinlist a:hover{ color:var(--accent); }
.pinlist span{ font-size:15px; line-height:1.35; color:var(--ink-soft); }

.forums{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(258px,1fr); gap:clamp(24px,3.4vw,46px); align-items:start; }
.forums__col{ display:grid; gap:clamp(16px,2vw,24px); }
.forums__col img{ aspect-ratio:16/7; object-fit:cover; }
.forums__col .cap__t{ font-size:14.5px; }
.forums__col .cap__k{ font-size:12px; }
@media (max-width:860px){ .forums{ grid-template-columns:minmax(0,1fr); } }

.card-row--lead{ grid-template-columns:minmax(0,1.42fr) minmax(240px,1fr); grid-template-rows:auto auto; }
.card-row--lead > :first-child{ grid-column:1; grid-row:1 / span 2; }
.card-row--lead > :nth-child(2){ grid-column:2; grid-row:1; }
.card-row--lead > :nth-child(3){ grid-column:2; grid-row:2; }
.card-row--lead > :first-child h3{ font-size:clamp(24px,2.7vw,33px); }
.card-row--lead > :nth-child(n+2) img{ aspect-ratio:16/6; object-fit:cover; }
@media (max-width:820px){
  .card-row--lead{ grid-template-columns:minmax(0,1fr); }
  .card-row--lead > *{ grid-column:1 !important; grid-row:auto !important; }
}

/* --- article page: spacing and region intersections ---------------------- */
main > .wrap--text{ padding-block:clamp(30px,4vw,52px) clamp(64px,9vw,124px); }
main > .wrap > .article-figure.fig--bleed{ margin-block:clamp(14px,2.2vw,30px) clamp(34px,4.6vw,66px); }
.prose p{ margin:0 0 1.28em; }
.prose > p:first-of-type{ margin-top:0; }
.prose h2{ margin-top:clamp(52px,6.4vw,84px); }
.prose h3{ margin-top:clamp(34px,4vw,52px); }
.prose > .band-note, .prose > .panel, .prose > .statrow, .prose > .timeline, .prose > .defplate{ margin-block:clamp(38px,4.8vw,64px); }
.prose > figure + h2, .prose > .article-figure + h2{ margin-top:clamp(44px,5.4vw,70px); }
.related-links{ margin-top:4px; }
@media (max-width:640px){
  main > .wrap--text{ padding-block:26px 56px; }
  .prose > .article-figure{ margin-block:30px; }
  .fig--right{ float:none; width:100%; margin:26px 0; }
}

body:has(.prose) main > .wrap > .fig--bleed figcaption{ max-width:calc(var(--measure) + 2*var(--gut)); }
.prose > h2:first-child, .prose > h3:first-child{ margin-top:0; }
main > .wrap > .article-figure.fig--bleed{ margin-bottom:clamp(26px,3.4vw,48px); }

body:has(.prose) main > .wrap > .pagehead{ max-width:var(--measure); margin-inline:auto; }

.further-grid > :last-child{ grid-column:1 / -1; }

.prose::after{ content:""; display:block; clear:both; }
.related-links a{ display:grid; gap:6px; align-items:start; padding:16px 0; font-size:20px; }
.related-links a > span:last-child{ max-width:44ch; }

.prose > .article-figure.fig--right:last-child{ float:none; width:100%; margin:clamp(40px,5.2vw,72px) 0 0; }

/* --- compact header: second level ---------------------------------------- */
.navbar{ align-items:flex-start; }
.navbar__grp{ position:relative; }
.navbar__sec{ display:flex; align-items:center; gap:8px; }
.navbar__sub{
  position:absolute; top:calc(100% + 7px); left:-14px; z-index:80;
  display:none; flex-direction:column; gap:8px;
  min-width:240px; padding:14px 18px 16px;
  background:var(--ground); border:1px solid var(--ink);
  box-shadow:7px 7px 0 rgba(26,23,18,.09);
}
.navbar__grp:hover .navbar__sub, .navbar__grp:focus-within .navbar__sub{ display:flex; }
.navbar__sub a{ font-family:var(--sans); font-size:14.5px; line-height:1.3; color:var(--ink); }
.navbar__sub a:hover{ color:var(--accent); }
.navbar__sub a.is-here{ color:var(--accent); font-weight:600; }
.masthead--compact .wrap, .masthead--compact .masthead__in{ overflow:visible; }
@media (max-width:820px){
  .navbar{ flex-direction:column; gap:10px; }
  .navbar__sub{
    position:static; display:flex; min-width:0; padding:6px 0 2px 28px;
    border:0; border-left:1px solid var(--rule); box-shadow:none; gap:6px; margin-top:7px;
  }
}

/* --- three-forums band: full-width lead, then a stepped run -------------- */
.forumhead{ display:flex; align-items:flex-end; gap:24px 40px; flex-wrap:wrap; margin-bottom:clamp(24px,3vw,38px); }
.forumhead h2{ font-size:clamp(28px,4.4vw,52px); line-height:1.02; max-width:24ch; margin:0; }
.forumhead a{ margin-left:auto; font-family:var(--sans); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); font-weight:600; white-space:nowrap; }
.forumlead{ margin:0 0 clamp(30px,4vw,54px); }
.forumlead img{ aspect-ratio:21/8; object-fit:cover; width:100%; }
.forumlead figcaption{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,300px); gap:30px; }
.forumrun{ display:grid; grid-template-columns:1.22fr 1fr .84fr; gap:clamp(20px,2.6vw,34px); align-items:start; }
.forumrun__i:nth-child(2){ margin-top:clamp(20px,3.2vw,44px); }
.forumrun__i:nth-child(3){ margin-top:clamp(40px,6.4vw,88px); }
.forumrun figure{ margin:0; }
.forumrun img{ aspect-ratio:4/3; object-fit:cover; width:100%; }
@media (max-width:860px){
  .forumrun{ grid-template-columns:1fr; gap:26px; }
  .forumrun__i:nth-child(2), .forumrun__i:nth-child(3){ margin-top:0; }
  .forumlead figcaption{ grid-template-columns:1fr; gap:10px; }
  .forumlead img{ aspect-ratio:16/9; }
  .forumhead a{ margin-left:0; }
}

/* --- mobile audit fixes -------------------------------------------------- */
@media (max-width:820px){
  .navbar a, .navbar__sub a, .sitenav__pages a, .sitefoot a, .further-grid a, .related-links a{
    min-height:44px; display:flex; align-items:center;
  }
  .navbar__sub a, .sitenav__pages a{ min-height:40px; }
  .related-links a{ display:grid; align-content:center; }
  .sitefoot a{ align-items:flex-start; }
}
@media (max-width:640px){
  .fig--bracket .cm--tl{ top:0; left:0; }
  .fig--bracket .cm--br{ bottom:0; right:0; }
  .credit{ font-size:13px; }
  .cap__k{ font-size:12.5px; }
  .kicker{ font-size:13px; }
  .sponsor-mosaic{ --tile:auto; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .sponsor-mosaic .feat{ grid-column:1 / -1; }
  .close-lead{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  .related-links .rl-sec, .rl-sec{ font-size:12.5px; }
  .sitenav__sec a{ min-height:40px; display:flex; align-items:center; }
}

@media (max-width:640px){
  .sitenav__pages{ display:grid; grid-template-columns:1fr 1fr; gap:2px 14px; }
  .sitenav__pages a{ min-height:38px; display:flex; align-items:center; line-height:1.2; }
  .sitenav ol > li + li{ margin-top:14px; }
}

/* 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-blurb-size: the design never sized .sponsor-blurb, so it inherited body copy.
   Relative, so it still follows the design's scale. */
.sponsor .sponsor-blurb{font-size:.8em;line-height:1.45}
.sponsor .sp-brand{font-weight:700}

/* sp-blurb-contrast: the design never coloured .sponsor-blurb because its bar was
   marks-only; our copy would inherit the page's dark ink onto a dark tile. */
.sponsor .sponsor-blurb{color:rgba(255,255,255,.82)}
.sponsor .sponsor-name{color:rgba(255,255,255,.95)}

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

/* MAPKIT_BEGIN — injected real geodata; pins are links */
.map-slot{padding:0;background:none!important;border:0!important;display:flex;align-items:center;justify-content:center;min-height:0!important}
.map-slot>svg.mapkit{width:100%!important;max-width:100%;height:auto;max-height:none;margin:0 auto}
.map-slot{width:100%}
.map-slot{aspect-ratio:auto!important;height:auto!important}
.map-slot::after,.map-slot::before{content:none!important;display:none!important}
.map-figure figcaption{}
.mapkit__pin{cursor:pointer}
.mapkit__pin text{paint-order:stroke;stroke:#C9BFAA;stroke-width:3px;stroke-linejoin:round}
.mapkit__pin:hover circle{r:9.1}
.mapkit__pin:hover text{font-weight:700}
/* MAPKIT_END */

/* 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-mosaic .sponsor.sponsor img{height:41px!important;display:block!important;width:100%!important}

/* op-mosaic-4up: operator: the first rows should contain four items, not three, with the leftovers
   in the last row. The mosaic's tracks were a FIXED repeat(auto-fit,230px) justified centre, so
   only three fitted and each row was centred independently. Four fluid tracks above 900px: eleven
   tiles lay out 4/4/3. */
@media (min-width:900px){
  .sponsor-mosaic{grid-template-columns:repeat(4,minmax(0,1fr));justify-content:stretch}
}

/* op-nav-collapse: this nav printed 668px of stacked links at 390 before any content
   (19 links), and the build shipped no control to close it. A disclosure cannot be
   built from CSS alone — :hover and :focus-within are unreachable on touch until a link has
   already been tapped — so a hidden checkbox and its label were injected immediately before
   the nav, and the nav collapses against the checked state. Exactly the mechanism the builds
   that DO have a burger already use.
   Treatment "rule-flank", seeded from the domain so 175 builds do not all ship the
   same hairline box in the same place; it inherits this build's font and colour, and where the
   nav's own parent has no inline padding (0px measured) the button carries the build's
   gutter (clamp(20px, 4vw, 44px)) so it cannot sit against the glass. The links are hidden,
   not removed: they stay in the markup. Desktop is untouched — every rule below is inside the
   phone breakpoint (900px here), where the button appears and the nav starts closed.
   Folded with the "display" technique and marked with the "chevron" icon — the mechanism
   is deliberately not identical across the fleet either. */
.index-toggle{display:none}
@media (max-width:900px){
  .index-toggle{align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:inherit;cursor:pointer;min-height:44px;box-sizing:border-box;display:flex;width:auto;border:0;padding:10px 0;letter-spacing:.18em;margin-inline:clamp(20px, 4vw, 44px);margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}
  .index-toggle::before,.index-toggle::after{content:"";flex:1 1 auto;height:1px;background:currentColor;opacity:.4}
  .index-toggle-bars{width:8px;height:8px;flex:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
  .sitenav{display:none}
  .index-toggle-c:checked ~ .sitenav{display:block}
  .navbar{display:none}
  .index-toggle-c:checked ~ .navbar{display:flex}
  .masthead__in:has(> .index-toggle){display:flow-root}
  .index-toggle:not(:has(~ .sitenav)):not(:has(~ .navbar)){display:none}
}

/* op-odd-tier-lead: .sponsor-mosaic (3 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-mosaic:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-article-width: the article column was capped at 672px (79 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width calc(var(--measure) + 2*var(--gut)) (declared in .wrap--text) 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){
  div.wrap--text{max-width:min(960px, 100%)!important}
}
@media (min-width:1600px){
  div.wrap--text{max-width:min(clamp(960px, 66.667vw, 1152px), 100%)!important}
  div.prose > :is(p:not([class])){font-size:clamp(18.5px,1.2847vw,22.2px)!important}
}
/* op-article-width:end */
@media (min-width:860px) and (max-width:1439px){.sponsor-mosaic.sponsor-mosaic:has(> [data-partner]){grid-template-columns:repeat(auto-fit,minmax(min(198px,calc(50% - 6px)),1fr))!important;justify-content:stretch!important}.sponsor-mosaic.sponsor-mosaic > [data-partner]{width:auto!important;max-width:none!important}}