/* RSS Feeds Submission — "Dark Room"
   ground: deep ink · paper: warm parchment · accent: amber-gold · secondary: deep green */

:root{
  --ground:#14161A;
  --ground-2:#1C1F24;
  --ground-3:#23272E;
  --paper:#EAE5D5;
  --paper-2:#DBD4BE;
  --paper-3:#F3EFE3;
  --ink:#14161A;
  --amber:#E5A21B;
  --amber-deep:#8A6708;
  --green:#2D6A4F;
  --green-soft:#8CC7A8;
  --mute-on-ink:#A49C8C;
  --mute-on-paper:#5C574C;
  --rule-ink:#31353C;
  --rule-paper:#C7C0AA;

  --display:"Familjen Grotesk",system-ui,sans-serif;
  --serif:"Literata",Georgia,serif;
  --mono:"DM Mono",ui-monospace,monospace;

  --prose:68ch;
  --side:190px;
  --shell:1320px;
  --gutter:24px;
  --body:19px;
  --step:1.5rem;
}
@media (min-width:1200px){ :root{ --side:230px; --shell:1420px; --gutter:40px; --body:19px; } }
@media (min-width:1440px){ :root{ --side:270px; --shell:1560px; --gutter:56px; --body:20px; } }
@media (min-width:1920px){ :root{ --side:330px; --shell:1880px; --gutter:72px; --body:21px; --prose:71ch; } }
@media (min-width:2200px){ :root{ --side:390px; --shell:2140px; --gutter:88px; --body:22px; --prose:73ch; } }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--paper);
  font-family:var(--serif); font-size:18px; line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--amber); text-decoration:none}
a:hover{color:#F5C24F; text-decoration:underline; text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--display); font-weight:700; letter-spacing:-.022em; line-height:1.08; margin:0}
p{margin:0 0 1.15em; text-wrap:pretty}
ul,ol{text-wrap:pretty}
hr{border:0; border-top:1px solid var(--rule-ink); margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.shell{width:min(100% - (var(--gutter)*2), var(--shell)); margin-inline:auto}
.kicker{font-family:var(--mono); font-size:12.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin:0 0 18px; display:flex; align-items:center; gap:9px}
.kicker--green{color:var(--green-soft)}
.kicker svg{width:16px;height:16px;flex:0 0 auto}
.piece .kicker, .signpost .kicker{font-size:13px; padding-bottom:12px; border-bottom:2px solid currentColor; margin-bottom:20px; color:var(--amber)}
.piece .kicker--green, .signpost .kicker--green{color:var(--green-soft)}
.piece--lead .kicker{font-size:14px}

/* ── masthead ───────────────────────────────────────────── */
.masthead{border-bottom:2px solid var(--amber); background:var(--ground)}
.masthead__in{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; padding:26px 0 20px}
.brand{display:flex; align-items:center; gap:16px; color:var(--paper)}
.brand:hover{text-decoration:none;color:var(--paper)}
.brand__mark{color:var(--amber); flex:0 0 auto; display:flex; align-items:center}
.brand__mark svg{width:auto; height:.68em; display:block}
.brand__name{font-family:var(--display); font-weight:700; letter-spacing:-.038em; line-height:1; font-size:22px; white-space:nowrap}
.brand{font-size:22px}
@media (min-width:430px){ .brand, .brand__name{font-size:26px} }
@media (min-width:520px){ .brand, .brand__name{font-size:30px} }
@media (min-width:900px){ .brand, .brand__name{font-size:38px} }
@media (min-width:1440px){ .brand, .brand__name{font-size:44px} }
@media (min-width:1920px){ .brand, .brand__name{font-size:50px} }
.nav{display:flex; flex-direction:column; align-items:flex-start; gap:10px}
@media (min-width:900px){ .nav{align-items:flex-end} }
.nav__row{display:flex; flex-wrap:wrap; gap:22px 26px; align-items:center}
.nav__row a{font-family:var(--mono); font-size:13px; letter-spacing:.13em; text-transform:uppercase; color:var(--paper)}
.nav__row a:hover{color:var(--amber);text-decoration:none}
.nav__row a[aria-current="page"]{color:var(--amber)}
.nav__row--sub a{font-size:11.5px; letter-spacing:.11em; color:var(--mute-on-ink)}
.nav__sep{width:1px; align-self:stretch; background:var(--rule-ink)}
@media (max-width:899px){ .nav__sep{display:none} .nav__row{gap:12px 18px} }

/* ── footer ─────────────────────────────────────────────── */
.foot{border-top:1px solid var(--rule-ink); margin-top:0; background:var(--ground)}
.foot__in{display:flex; gap:36px 60px; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; padding:48px 0 60px}
.foot__line{font-size:17px; color:var(--paper); max-width:46ch; margin:0}
.foot__mark{color:var(--amber); margin-bottom:16px}
.foot__nav{display:flex; flex-wrap:wrap; gap:12px 30px; font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase}
.foot__nav a{color:var(--mute-on-ink)}
.foot__nav a:hover{color:var(--amber)}

/* ── homepage bands ─────────────────────────────────────── */
.band{padding:0}
.band--rule{border-top:1px solid var(--rule-ink)}

.hero{position:relative}
.hero__img{width:100%; height:clamp(360px,58vw,760px); object-fit:cover; filter:saturate(.92) contrast(1.03)}
.hero__cap{display:flex; gap:18px 32px; flex-wrap:wrap; justify-content:space-between; padding:12px 0 0; font-family:var(--mono); font-size:12.5px; color:var(--mute-on-ink)}
.hero__cap b{font-weight:400; color:var(--paper-2); font-family:var(--serif); font-size:15px}
.hero__lead{padding:52px 0 64px; display:grid; gap:34px}
@media (min-width:1200px){ .hero__lead{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:72px; align-items:end; padding:64px 0 78px} }
.hero__lead h1{font-size:clamp(38px,5.4vw,86px); letter-spacing:-.038em}
@media (min-width:1920px){ .hero__lead h1{font-size:96px} }
.hero__deck{font-size:clamp(19px,1.6vw,26px); line-height:1.5; color:var(--paper-2); margin:0 0 20px}
.morelink{font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber)}

/* quiet emblem band */
.emblem-band{padding:74px 0 78px; display:grid; gap:38px; align-items:center; border-top:1px solid var(--rule-ink)}
@media (min-width:1000px){ .emblem-band{grid-template-columns:auto minmax(0,1fr); gap:64px} }
.emblem-band__fig{color:var(--amber)}
.emblem-band p{font-family:var(--display); font-weight:400; font-size:clamp(24px,2.6vw,40px); line-height:1.32; letter-spacing:-.02em; margin:0; color:var(--paper); max-width:26ch}
.emblem-band em{font-style:italic; color:var(--amber)}

/* three unequal pieces */
.pieces{display:grid; gap:44px; padding:70px 0 78px; border-top:1px solid var(--rule-ink)}
@media (min-width:1000px){ .pieces{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:88px} }
@media (min-width:1440px){ .pieces{gap:112px; padding:84px 0 92px} }
.piece--lead h2{font-size:clamp(28px,3vw,46px)}
.piece--lead .plate{margin-bottom:26px}
.piece h2{font-size:clamp(22px,2vw,30px); margin-bottom:12px}
.piece h2 a{color:var(--paper)}
.piece h2 a:hover{color:var(--amber);text-decoration:none}
.piece p{color:var(--paper-2); font-size:17px; margin:0}
.piece--lead p{font-size:19px}
.piece__stack{display:grid; gap:52px; align-content:start}
@media (min-width:1440px){ .piece__stack{gap:64px} }
.piece__stack .piece{border-top:1px solid var(--rule-ink); padding-top:34px}
@media (min-width:1000px){ .piece__stack{padding-left:8px} }

/* amber band */
.amber-band{background:var(--amber); color:#20180A}
.amber-band__in{display:grid; gap:34px; padding:72px 0 76px}
@media (min-width:1000px){ .amber-band__in{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:70px; align-items:center; padding:88px 0 92px} }
.amber-band .bignum{font-family:var(--display); font-weight:700; font-size:clamp(56px,9vw,150px); line-height:.84; letter-spacing:-.05em; margin:0; color:#1B1405}
.amber-band h2{font-size:clamp(24px,2.6vw,40px); color:#1B1405; margin-bottom:16px}
.amber-band p{font-size:clamp(17px,1.3vw,21px); color:#2A2109; margin:0 0 18px}
.amber-band a{color:#1B1405; text-decoration:underline; text-underline-offset:3px}
.amber-band .morelink{color:#1B1405}

/* signposts + supporters rail */
.feedrail{display:grid; gap:56px; padding:74px 0 20px; border-top:1px solid var(--rule-ink)}
@media (min-width:1200px){ .feedrail{grid-template-columns:minmax(0,1fr) 300px; gap:76px} }
@media (min-width:1920px){ .feedrail{grid-template-columns:minmax(0,1fr) 340px; gap:96px} }
.signposts{display:grid; gap:36px}
@media (min-width:760px){ .signposts{grid-template-columns:repeat(3,minmax(0,1fr))} }
.alsoin{border-top:1px solid var(--rule-ink); margin-top:44px; padding-top:26px}
.alsoin__k{font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--mute-on-ink); margin:0 0 20px}
.signpost{display:flex; flex-direction:column}
.signpost .plate{margin-bottom:20px}
.signpost h3{font-size:22px; margin-bottom:10px}
.signpost h3 a{color:var(--paper)}
.signpost h3 a:hover{color:var(--amber);text-decoration:none}
.signpost p{font-size:16px; color:var(--paper-2); margin:0}
.signpost__icon{color:var(--green-soft); margin-bottom:14px}

/* ── supporters (7 slots, name-as-type mosaic rail) ─────── */
.supporters{border:1px solid var(--rule-ink); background:var(--ground-2); padding:26px 24px 30px}
.supporters__head{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin:0 0 6px}
.supporters__note{font-size:14px; color:var(--mute-on-ink); margin:0 0 22px; line-height:1.5}
.supporters__group{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:22px}
.supporters__group:last-child{margin-bottom:0}
.supporters__gl{flex:0 0 100%; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute-on-ink); margin:0 0 2px}
.sponsor{flex:0 0 100%; display:flex; align-items:center; min-height:56px; padding:14px 16px; background:var(--ground-3); border-left:2px solid var(--rule-ink); color:var(--paper); font-family:var(--display); font-weight:500; font-size:16px; letter-spacing:-.01em; line-height:1.25}
.sponsor:hover{border-left-color:var(--amber); color:var(--amber); text-decoration:none}
.sponsor.feat{min-height:84px; font-size:21px; border-left-color:var(--amber)}
@media (min-width:640px) and (max-width:1199px){ .sponsor{flex:0 0 calc(50% - 7px)} }

/* ── plates (figure system) ─────────────────────────────── */
/* 1 · plate: mat + hairline frame, caption under at plate width */
.plate, .article-figure{margin:0; background:var(--ground-2); border:1px solid var(--rule-ink); padding:14px}
.article-figure img{width:100%; aspect-ratio:16/10; object-fit:cover}
.article-figure figcaption{padding-top:12px; font-size:15px; line-height:1.45; color:var(--paper-2)}
.article-figure figcaption .cred{display:block; font-family:var(--mono); font-size:11.5px; color:var(--mute-on-ink); margin-top:6px}
.plate img{width:100%; aspect-ratio:16/10; object-fit:cover}
.plate figcaption, .figcap{
  display:flex; flex-wrap:wrap; gap:4px 20px; justify-content:space-between; align-items:baseline;
  padding-top:12px;
}
.plate figcaption .cap, .figcap .cap{font-family:var(--serif); font-size:15px; line-height:1.45; color:var(--paper-2); flex:1 1 16ch; min-width:0}
.plate figcaption .cred, .figcap .cred{font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--mute-on-ink); flex:0 1 auto}
.plate--paper{background:var(--paper-2); border-color:var(--rule-paper)}
.plate--paper .cap{color:#2E2B24}
.plate--paper .cred{color:#6B6455}

/* 1b · dual plate: two matted images in one insertion, each with its own caption */
.dualplate{margin:0; display:grid; gap:18px}
@media (min-width:700px){ .dualplate{grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px} }
.dualplate figure{margin:0; background:var(--ground-2); border:1px solid var(--rule-ink); padding:14px}
.dualplate img{width:100%; aspect-ratio:4/3; object-fit:cover}
.dualplate figcaption{display:flex; flex-direction:column; gap:6px; padding-top:12px}
.dualplate .cap{font-family:var(--serif); font-size:15px; line-height:1.45; color:var(--paper-2)}
.dualplate .cred{font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--mute-on-ink)}

/* 2 · bleed plate: full-bleed with amber rule below, caption offset left */
.bleedfig{margin:0}
.bleedfig img{width:100%; height:clamp(280px,42vw,620px); object-fit:cover}
.bleedfig .bleedcap{width:min(100% - (var(--gutter)*2), var(--shell)); margin-inline:auto}
.bleedfig .figcap{border-top:3px solid var(--amber); margin-top:0; padding-top:14px}
.arthero{margin:0 0 8px}

/* 3 · inset plate — a third width, pushed into the margin */
.insetfig{margin:0; background:var(--ground-2); border-top:2px solid var(--green); padding:14px 14px 4px}
.insetfig img{width:100%; aspect-ratio:4/3; object-fit:cover}
.insetfig .figcap{flex-direction:column; gap:6px}
.insetfig .cap{font-size:14.5px}

/* ── article ────────────────────────────────────────────── */
.artmast{padding:56px 0 0}
.arthead{display:grid; gap:26px; padding:0 0 42px}
@media (min-width:1200px){ .arthead{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:70px; align-items:end} }
.arthead h1{font-size:clamp(32px,4.4vw,68px); letter-spacing:-.035em}
@media (min-width:1920px){ .arthead h1{font-size:76px} }
.arthead .lead{font-family:var(--serif); font-size:clamp(18px,1.5vw,23px); line-height:1.5; color:var(--paper-2); margin:0}
.artmeta{font-family:var(--mono); font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--mute-on-ink); margin:22px 0 0}
.artmeta a{color:var(--amber)}

.article-body{
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter),1fr)
    [wide-start] minmax(0,var(--side))
    [prose-start] min(var(--prose), 100% - (var(--gutter)*2)) [prose-end]
    minmax(0,var(--side)) [wide-end]
    minmax(var(--gutter),1fr) [full-end];
  font-size:var(--body);
  padding:8px 0 0;
}
.article-body > *{grid-column:prose}
.article-body > .breakout{grid-column:wide-start / wide-end}
.article-body > .bleed{grid-column:full-start / full-end}
.article-body h2{
  grid-column:prose; font-size:clamp(24px,2.1vw,34px); margin:2.4em 0 .55em;
  padding-top:.7em; border-top:1px solid var(--rule-ink);
}
.article-body h2:first-child{margin-top:1.1em}
.article-body p{margin:0 0 1.15em}
.article-body p code, .article-body li code{
  font-family:var(--mono); font-size:.85em; background:var(--ground-2);
  border:1px solid var(--rule-ink); padding:1px 6px; color:var(--amber); white-space:nowrap;
}
.article-body > figure, .article-body > .callout, .article-body > .pullquote,
.article-body > .blockquote, .article-body > .notesblock, .article-body > .dualplate, .article-body > .timeline-block, .article-body > .statrow,
.article-body > .tablewrap, .article-body > .versus-block{margin:56px 0}
@media (min-width:1200px){
  .article-body > figure, .article-body > .callout, .article-body > .pullquote,
  .article-body > .blockquote, .article-body > .notesblock, .article-body > .dualplate, .article-body > .timeline-block, .article-body > .statrow,
  .article-body > .tablewrap, .article-body > .versus-block{margin:76px 0}
}
.article-body > .bleed{margin-top:64px; margin-bottom:64px}

/* sidenote lives in the right margin above 1440, in flow below */
.sidenote{grid-column:prose; background:var(--ground-2); border-left:2px solid var(--green);
  padding:16px 18px; font-size:15.5px; line-height:1.55; color:var(--paper-2); margin:40px 0}
.sidenote b{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--green-soft); font-weight:400; margin-bottom:8px}
@media (min-width:1440px){
  .sidenote{grid-column:prose-end / wide-end; margin:8px 0 24px 40px; background:none;
    border-left:1px solid var(--rule-ink); font-size:14.5px}
}

/* ── components (styleguide set) ────────────────────────── */
.lead{font-size:1.18em; line-height:1.5; color:var(--paper-2)}
.pullquote{margin:0; border-top:2px solid var(--amber); border-bottom:1px solid var(--rule-ink); padding:26px 0}
.pullquote p{font-family:var(--display); font-weight:400; font-size:clamp(22px,2.3vw,34px); line-height:1.28; letter-spacing:-.02em; color:var(--paper); margin:0}
.blockquote{margin:0; border-left:3px solid var(--green); padding:6px 0 6px 24px}
.blockquote p{font-size:1.05em; color:var(--paper); margin:0 0 .6em}
.blockquote cite{font-family:var(--mono); font-size:12.5px; font-style:normal; letter-spacing:.06em; color:var(--mute-on-ink)}
.callout{background:var(--paper); color:var(--ink); padding:26px 28px; border-top:4px solid var(--amber-deep)}
.callout p{margin:0 0 .8em; font-size:1.02em}
.callout p:last-child{margin:0}
.callout a{color:var(--amber-deep)}
.callout .ck{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-deep); margin:0 0 14px}
.callout ul{margin:0; padding-left:1.15em}
.callout li{margin-bottom:.6em; font-size:16.5px; line-height:1.55; color:#2E2B24}
.callout li:last-child{margin-bottom:0}
.note{font-family:var(--mono); font-size:14px; line-height:1.6; color:var(--mute-on-ink); border-left:2px solid var(--rule-ink); padding-left:16px}

.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table.versus, table.datatable{width:100%; border-collapse:collapse; font-family:var(--serif); font-size:.94em; min-width:520px}
table.versus caption, table.datatable caption{
  text-align:left; font-family:var(--mono); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber); padding-bottom:12px}
table.versus thead th, table.datatable thead th{
  text-align:left; font-family:var(--mono); font-weight:500; font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mute-on-ink); border-bottom:2px solid var(--amber); padding:10px 16px 10px 0; vertical-align:bottom}
table.versus td, table.datatable td{border-bottom:1px solid var(--rule-ink); padding:14px 16px 14px 0; vertical-align:top; color:var(--paper-2)}
table.versus tbody th, table.datatable tbody th{text-align:left; color:var(--paper); text-transform:none; font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:0; border-bottom:1px solid var(--rule-ink); padding:14px 24px 14px 0; vertical-align:top}

.statrow{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.statblock{background:var(--ground-2); border-top:2px solid var(--green); padding:20px 20px 22px}
.stat-num{display:block; font-family:var(--display); font-weight:700; font-size:clamp(30px,3.4vw,46px); line-height:1; letter-spacing:-.03em; color:var(--amber)}
.stat-label{display:block; font-size:14.5px; line-height:1.45; color:var(--paper-2); margin-top:10px}

.timeline-block{background:var(--paper); color:var(--ink); padding:28px 30px 30px}
.timeline-block > h3{font-family:var(--mono); font-weight:500; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-deep); margin:0 0 18px}
ol.timeline{list-style:none; margin:0; padding:0; display:grid; gap:0}
ol.timeline li{display:grid; gap:2px 26px; padding:13px 0; border-top:1px solid var(--rule-paper)}
ol.timeline li:first-child{border-top:0; padding-top:0}
@media (min-width:640px){ ol.timeline li{grid-template-columns:minmax(120px,190px) minmax(0,1fr)} }
.t-when{font-family:var(--mono); font-size:12.5px; letter-spacing:.05em; color:var(--amber-deep); line-height:1.5; padding-top:3px}
.t-what{font-size:16px; line-height:1.5; color:#2E2B24}

/* notes block — the Notes-for-Design material, one insertion */
.notesblock{background:var(--paper); color:var(--ink); padding:30px 32px 32px; margin:0}
.notesblock__k{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-deep); margin:0 0 22px}
.notesblock__cols{display:grid; gap:34px}
@media (min-width:1100px){ .notesblock__cols.two{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:48px} }
.notesblock h3{font-family:var(--display); font-size:19px; letter-spacing:-.015em; color:#211E18; margin:0 0 16px; padding-bottom:10px; border-bottom:2px solid var(--amber-deep)}
.notesblock .timeline{margin:0}
ul.notes-list{list-style:none; margin:0; padding:0}
ul.notes-list li{padding:12px 0; border-top:1px solid var(--rule-paper); font-size:16px; line-height:1.5; color:#2E2B24}
ul.notes-list li:first-child{border-top:0; padding-top:0}
ul.notes-list b{display:block; font-family:var(--mono); font-weight:500; font-size:12.5px; letter-spacing:.05em; color:var(--amber-deep); margin-bottom:4px}
.notesblock .t-what{color:#2E2B24}

.chart{margin:0}
.chart svg{width:100%; height:auto; display:block; overflow:visible}
.chart figcaption{font-family:var(--mono); font-size:12px; color:var(--mute-on-ink); padding-top:14px; border-top:1px solid var(--rule-ink); margin-top:14px}

.gallery{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.gallery figure{margin:0}
.gallery img{width:100%; aspect-ratio:4/3; object-fit:cover}
.gallery figcaption{font-family:var(--mono); font-size:11.5px; color:var(--mute-on-ink); padding-top:8px}

.map-figure .map-slot{aspect-ratio:16/9; border:1px dashed var(--rule-ink); background:var(--ground-2)}

.profile-grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.profile-card{background:var(--ground-2); border:1px solid var(--rule-ink); padding:20px}
.profile-card .p-photo{width:72px; height:72px; object-fit:cover; border-radius:50%; margin-bottom:14px}
.profile-card h3{font-size:20px; margin-bottom:4px}
.profile-card .p-role{font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--green-soft); margin:0 0 10px}
.profile-card p{font-size:15px; color:var(--paper-2)}
.profile-card .p-links{font-family:var(--mono); font-size:12.5px; margin:0}
.profile-card .p-attr{font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--mute-on-ink); margin:10px 0 0}
.profile-card.no-photo{border-left:3px solid var(--green)}

.org-grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.org-card{display:grid; grid-template-columns:44px minmax(0,1fr); gap:4px 14px; align-items:center;
  background:var(--ground-2); border:1px solid var(--rule-ink); padding:14px 16px}
.org-card:hover{border-color:var(--amber); text-decoration:none}
.org-logo{width:44px; height:44px; object-fit:contain; grid-row:span 2}
.org-name{font-family:var(--display); font-weight:600; font-size:16px; color:var(--paper); align-self:end}
.org-host{font-family:var(--mono); font-size:11.5px; color:var(--mute-on-ink); align-self:start}
.org-card.no-logo{grid-template-columns:minmax(0,1fr)}
.org-card.no-logo .org-name, .org-card.no-logo .org-host{grid-column:1}

.entity-ref{white-space:nowrap; border-bottom:1px solid rgba(229,162,27,.45)}
.entity-ref:hover{text-decoration:none; border-bottom-color:var(--amber)}

.further-grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.further-grid a{background:var(--ground-2); border-top:2px solid var(--green); padding:18px 20px;
  font-family:var(--display); font-weight:600; font-size:17px; line-height:1.25; color:var(--paper)}
.further-grid a:hover{border-top-color:var(--amber); color:var(--amber); text-decoration:none}

/* end-of-article furniture */
.artend{border-top:1px solid var(--rule-ink); margin-top:72px; padding-top:40px; padding-bottom:72px}
.artend h2{font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber); margin:0 0 20px; border:0; padding:0}
ul.related-links{list-style:none; margin:0; padding:0; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
ul.related-links a{display:block; background:var(--ground-2); border-top:2px solid var(--rule-ink);
  padding:0 0 20px; color:var(--paper)}
ul.related-links img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block; margin-bottom:16px}
ul.related-links a:hover{border-top-color:var(--amber); color:var(--amber); text-decoration:none}
ul.related-links .rl-sec{display:block; font-family:var(--mono); font-weight:400; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--mute-on-ink); margin-bottom:8px; padding:0 20px}
ul.related-links .rl-t{display:block; font-family:var(--display); font-weight:600; font-size:17px; line-height:1.25; padding:0 20px}

/* ── section / category pages ───────────────────────────── */
.secopen{position:relative; border-bottom:1px solid var(--rule-ink); overflow:hidden; background:var(--ground)}
.secopen__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.34}
.secopen::after{content:""; position:absolute; inset:0; background:rgba(18,20,24,.52)}
.secopen__in{position:relative; z-index:1; padding:66px 0 60px; display:grid; gap:28px}
@media (min-width:1100px){ .secopen__in{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:70px; align-items:end; padding:96px 0 84px; min-height:380px; align-content:end} }
.secopen h1{font-size:clamp(36px,5vw,80px); letter-spacing:-.04em}
.secopen p{font-size:clamp(17px,1.4vw,22px); color:var(--paper-2); margin:0}
.seccount{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute-on-ink); margin:16px 0 0}

.entries{display:grid; gap:40px; padding:56px 0 20px}
@media (min-width:760px){ .entries{grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 40px} }
@media (min-width:1440px){ .entries{grid-template-columns:repeat(3,minmax(0,1fr)); gap:56px 44px} }
.entry{display:flex; flex-direction:column; min-width:0}
.entry .plate{margin-bottom:18px}
.entry h2{font-size:clamp(20px,1.6vw,25px); line-height:1.14; margin-bottom:10px}
.entry h2 a{color:var(--paper)}
.entry h2 a:hover{color:var(--amber); text-decoration:none}
.entry p{font-size:16px; color:var(--paper-2); margin:0}
.entry__tag{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--green-soft); margin:0 0 10px}
/* lead entry gets the width */
.entry--lead{grid-column:1 / -1}
@media (min-width:1100px){
  .entry--lead{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:44px; align-items:center}
  .entry--lead .plate{margin-bottom:0}
  .entry--lead h2{font-size:clamp(28px,2.8vw,42px)}
  .entry--lead p{font-size:19px}
}

.othersecs{border-top:1px solid var(--rule-ink); margin-top:40px; padding:44px 0 72px}
.othersecs h2{font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin:0 0 22px}
.seclist{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); list-style:none; margin:0; padding:0}
.seclist a{display:grid; grid-template-columns:24px minmax(0,1fr); gap:4px 14px; align-items:center;
  background:var(--ground-2); border-left:2px solid var(--green); padding:16px 18px; color:var(--paper);
  font-family:var(--display); font-weight:600; font-size:17px}
.seclist a:hover{border-left-color:var(--amber); color:var(--amber); text-decoration:none}
.seclist svg{grid-row:span 2; color:var(--green-soft)}
.seclist span{grid-column:2; font-family:var(--mono); font-weight:400; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute-on-ink)}
.seclist a:hover svg{color:var(--amber)}

/* hub + archive */
.pagehead{padding:56px 0 40px; border-bottom:1px solid var(--rule-ink)}
.pagehead h1{font-size:clamp(34px,4.6vw,72px); letter-spacing:-.038em; margin-bottom:20px}
.pagehead p{font-size:clamp(17px,1.4vw,22px); color:var(--paper-2); max-width:56ch; margin:0}
.archgroup{padding:52px 0 12px; border-top:1px solid var(--rule-ink)}
.archgroup:first-of-type{border-top:0}
.archgroup__head{display:flex; gap:16px 28px; flex-wrap:wrap; align-items:baseline; margin-bottom:26px}
.archgroup__head h2{font-size:clamp(22px,2vw,30px)}
.archgroup__head .n{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute-on-ink)}
.archlist{list-style:none; margin:0; padding:0; display:grid; gap:0}
@media (min-width:1100px){ .archlist{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:56px} }
.archlist li{border-top:1px solid var(--rule-ink)}
.archlist a{display:grid; grid-template-columns:64px minmax(0,1fr); gap:18px; align-items:center; padding:16px 0; color:var(--paper)}
.archlist a:hover{color:var(--amber); text-decoration:none}
.archlist img{width:64px; height:44px; object-fit:cover}
.archlist span{font-family:var(--display); font-weight:600; font-size:16.5px; line-height:1.25}

.prose-page{padding:48px 0 80px; max-width:70ch}
.prose-page h2{font-size:clamp(22px,2vw,30px); margin:2em 0 .5em}
.prose-page p{font-size:18px; color:var(--paper-2)}

/* 404 */
.notfound{padding:90px 0 120px; text-align:left}
.notfound .brand__mark{color:var(--amber); margin-bottom:28px}
.notfound h1{font-size:clamp(38px,6vw,88px); letter-spacing:-.04em; margin-bottom:22px}
.notfound p{font-size:20px; color:var(--paper-2); max-width:52ch}

/* styleguide */
.sg-sec{padding:44px 0; border-top:1px solid var(--rule-ink)}
.sg-sec > h2{font-size:26px; margin-bottom:8px}
.sg-sec > .note{margin-bottom:26px}
.sg-narrow{max-width:min(360px,100%); border:1px dashed var(--rule-ink); padding:16px; margin-top:26px}

/* ── mobile: tap targets and micro-type floor ────────────── */
@media (max-width:899px){
  .nav{width:100%; align-items:stretch}
  .nav__row{gap:0 4px}
  .nav__row a{display:flex; align-items:center; min-height:44px; padding:0 12px 0 0}
  .nav__row--sub{border-top:1px solid var(--rule-ink); padding-top:2px}
  .nav__row--sub a{font-size:12px}
  .foot__nav{gap:0 26px}
  .foot__nav a{display:flex; align-items:center; min-height:44px; font-size:12px}
  .seclist a, .further-grid a, .related-links a, .sponsor{min-height:52px}
  .archlist a{padding:12px 0; min-height:56px}
  .morelink, .artmeta a{display:inline-flex; align-items:center; min-height:44px}

  .supporters__gl{font-size:12px}
  .entry__tag, ul.related-links .rl-sec, .signpost .kicker, .piece .kicker, .kicker{font-size:12.5px}
  .plate figcaption .cred, .figcap .cred, .dualplate .cred,
  .gallery figcaption, .chart figcaption, .notesblock__k, .alsoin__k,
  .org-host, .profile-card .p-role, .profile-card .p-attr,
  .archgroup__head .n, .seccount, .artmeta, .hero__cap,
  table.versus thead th, table.datatable thead th, table.versus caption, table.datatable caption,
  .timeline-block > h3, .article-figure figcaption .cred,
  .supporters__head, .supporters__note, .artend h2, .othersecs h2, .seclist span,
  .blockquote cite, .callout .ck, .t-when{font-size:12.5px}
  .foot__nav, .nav__row a{letter-spacing:.1em}
}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain}

/* sp-contain-guard: sponsor logos are wordmarks — never object-fit:cover (crops).
   object-fit ONLY. This block used to also set width:auto, padding:4px 10px,
   max-width:calc(100% - 20px) and min/max-height, which overrode Design's own frame and
   let every plate shrink-wrap its logo — the recurring "inconsistent sizing" and
   "lacks padding". Geometry belongs to Design. */
.sponsor img,.sponsor-box img,.sp-logo img{object-fit:contain!important;display:block;margin-left:auto;margin-right:auto;align-self:center}

/* 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}
.supporters__group{flex-wrap:wrap!important}
.supporters__group > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!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-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:stretch!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
.sponsor.sponsor{justify-content:center!important}
:has(> .sponsor.sponsor){align-items:stretch!important}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;margin:0!important}
/* the mobile un-clamp is retired: the operator asked for "2-3 rows max" on phones, which is
   what the desktop rule above already does — so mobile simply keeps it. */
@media (max-width:640px){.sponsor.sponsor .sponsor-blurb{-webkit-line-clamp:3!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}}

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

/* op-money-columns: the supporters block ran one tile per row — 7 tiles,
   496px at 390, 7% of the whole page. Two columns bring it to
   393px (21% shorter). Checked before writing: no new overflow, smallest mark still
   Nonepx wide, longest blurb 0 lines, tile heights 48-107px.
   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.
   Only the tier(s) that were one-per-row are touched (.supporters__group), 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){
  .supporters__group{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .supporters__group > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .supporters__group > * *{min-width:0!important;max-width:100%}
    .supporters__group img,.supporters__group svg{max-width:100%;height:auto}
}

/* op-odd-tier-lead: .supporters__group (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){
  .supporters__group:has(> a:nth-of-type(odd):last-of-type) > [data-partner]:first-of-type{grid-column:1 / -1!important}
}

/* op-label-row: on phones the tier .supporters__group is two per row and its group label (p.supporters__gl) sat in a grid cell like a tile — the group ended on a lone tile beside an empty cell (and a long label was squeezed). The label takes the whole row, above its tiles; only while the tier is two per row. */
@media (max-width:785px){
  .supporters__group > p.supporters__gl:first-child{grid-column:1 / -1!important}
}
/* op-label-row:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); font-weight: 700; letter-spacing: -0.022em; line-height: 1.08; margin: 0px;}
.notesblock h2:where(.rt-h3){font-family: var(--display); font-size: 19px; letter-spacing: -0.015em; color: rgb(33, 30, 24); margin: 0px 0px 16px; padding-bottom: 10px; border-bottom: 2px solid var(--amber-deep);}
h2.rt-h3.rt-h3{height:32.5156px;margin-top:0px;padding-top:0px;border-top-width:0px;border-top-style:none;border-top-color:rgb(33, 30, 24);grid-column:auto}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.article-body > figure.bleed.bleedfig > img,
  article.article-body > figure.breakout.plate > img,
  article.article-body > figure.insetfig > img,
  article.entry > figure.plate > img,
  article.entry.entry--lead > figure.plate > img,
  article.piece.piece--lead > figure.plate > img,
  article.signpost > figure.plate > img,
  div.breakout.dualplate > figure > img,
  li > a > img,
  main > figure.arthero.bleedfig > img,
  main > section.band.hero > img.hero__img,
  main > section.secopen > img.secopen__img){height:auto}
/* op-img-dims:end */