/* Rochester Plaza — "The Section" -------------------------------------------
   The site is a longitudinal building section: levels descend, callouts number,
   the drawing sheet is the chrome. Tokens first, components after. */

:root {
  --ground:      #0d1a21;
  --ground-2:    #0a151b;
  --ground-3:    #071016;
  --panel:       #10222b;
  --ink:         #e8f1f4;
  --ink-2:       #a8c6d0;
  --ink-3:       #7f9daa;
  --ink-4:       #587c8a;
  --rule:        #234450;
  --rule-2:      #17323d;
  --accent:      #d1603d;
  --accent-2:    #f0a184;
  --accent-dim:  rgba(209, 96, 61, 0.14);

  --sans:  "Archivo Narrow", "Helvetica Neue", Arial, sans-serif;
  --label: "Barlow Condensed", "Archivo Narrow", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --measure: 68ch;
  --gutter: clamp(18px, 4vw, 56px);
  --sheet: 1560px;
}

*, *::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.5;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--accent-2); text-decoration: none; }
a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4 { font-weight: 600; margin: 0; text-wrap: balance; }

.wrap { max-width: var(--sheet); margin: 0 auto; padding-inline: var(--gutter); }
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--accent); color: #10151a;
  padding: 10px 16px; z-index: 50; font-family: var(--label); letter-spacing: 0.12em;
}
.skip:focus { left: 0; }

/* --- drawing-sheet primitives --------------------------------------------- */

.lvl {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.tag {
  font-family: var(--label);
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* the signature: burnt-orange callout triangle + trade number */
.callout-no {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--label);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent-2);
  line-height: 1;
}
.callout-no::before {
  content: "";
  width: 0; height: 0;
  border-left: 9px solid var(--accent);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  flex: none;
}
.callout-no.down::before {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 9px solid var(--accent);
  border-bottom: 0;
}

.rule-hair { height: 1px; background: var(--rule); border: 0; margin: 0; }
.rule-datum { height: 2px; background: var(--accent); border: 0; margin: 0; }

/* --- masthead / title block ----------------------------------------------- */

.masthead { border-bottom: 1px solid var(--rule); background: var(--ground-2); }

.titleblock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: flex-end;
  padding: 22px 0 18px;
}
.wordmark {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(30px, 4.6vw, 52px);
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  color: var(--ink);
  line-height: 1;
  text-transform: uppercase;
}
.wordmark:hover { text-decoration: none; color: var(--ink); }
.strapline {
  font-family: var(--label);
  font-size: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 10px;
}
.sheetstamp {
  border: 1px solid var(--rule);
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.9;
  letter-spacing: 0.12em;
  color: var(--ink-4);
  white-space: nowrap;
}
.sheetstamp b { color: var(--ink-2); font-weight: 400; }

/* legend key */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding: 10px 0 12px;
  border-top: 1px solid var(--rule-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i {
  width: 0; height: 0; flex: none;
  border-left: 8px solid var(--accent);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.legend u { width: 22px; height: 2px; background: var(--accent); text-decoration: none; }
.legend s { width: 22px; height: 0; border-top: 1px dashed var(--ink-4); text-decoration: none; }

/* level navigation — the elevator panel */
.levelnav { border-top: 1px solid var(--rule); }
.levelnav ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
}
.levelnav li { border-right: 1px solid var(--rule-2); display: flex; }
.levelnav li:first-child { border-left: 1px solid var(--rule-2); }
.levelnav a {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  padding: 11px 18px 12px;
  color: var(--ink-2);
  min-height: 46px;
  justify-content: center;
}
.levelnav a:hover, .levelnav a:focus { background: var(--panel); color: var(--ink); text-decoration: none; }
.levelnav a[aria-current="page"] { background: var(--accent-dim); color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.levelnav .l-el { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--ink-4); }
.levelnav .l-name { font-family: var(--label); font-size: 18px; letter-spacing: 0.16em; text-transform: uppercase; }

/* --- homepage: the section drawing ---------------------------------------- */

.hero { position: relative; border-bottom: 2px solid var(--accent); background: var(--ground-3); }
.hero img { width: 100%; height: clamp(360px, 62vh, 720px); object-fit: cover; opacity: 0.86; }
.hero-plate {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(24px, 5vw, 60px) var(--gutter) clamp(22px, 4vw, 46px);
  background: linear-gradient(180deg, rgba(8, 17, 22, 0) 0%, rgba(8, 17, 22, 0.82) 48%, rgba(8, 17, 22, 0.96) 100%);
}
.hero-inner { max-width: var(--sheet); margin: 0 auto; }
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 5.2vw, 62px);
  line-height: 1.05;
  margin: 14px 0 12px;
  max-width: 20ch;
}
.hero h1 a { color: var(--ink); }
.hero h1 a:hover { color: var(--accent-2); text-decoration: none; }
.hero .dek {
  font-family: var(--label);
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.4;
  color: var(--ink-2);
  max-width: 62ch;
  margin: 0;
}
.hero .meta { margin-top: 14px; }

.meta {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.meta a { color: var(--ink-3); }

/* main feed + sponsor rail */
.feedgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 272px;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding: 56px 0 0;
}

.bandhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--ink-2);
  padding-bottom: 10px;
  margin-bottom: 0;
}
.bandhead h2 {
  font-family: var(--label);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.bandhead .kicker { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-4); }

/* section callout tabs */
.calloutgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 1px;
  background: var(--rule-2);
  border: 1px solid var(--rule-2);
  margin: 0 0 60px;
}
.calloutcard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--ground);
  padding: 20px 22px 22px;
  color: var(--ink);
  min-height: 100%;
}
.calloutcard:hover { background: var(--panel); text-decoration: none; }
.calloutcard .cc-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.calloutcard h3 { font-family: var(--label); font-size: 25px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); font-weight: 500; }
.calloutcard p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-3); }
.calloutcard .cc-count { margin-top: auto; padding-top: 4px; }

/* numbered spec entries */
.speclist { list-style: none; margin: 0 0 60px; padding: 0; }
.speclist > li { border-bottom: 1px solid var(--rule-2); }
.specentry {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 190px;
  gap: 24px;
  align-items: start;
  padding: 20px 0 22px;
  color: var(--ink);
}
.specentry:hover { text-decoration: none; background: rgba(16, 34, 43, 0.55); }
.specentry:hover h3 { color: var(--accent-2); }
.spec-no {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--accent);
  padding-top: 4px;
}
.specentry h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(21px, 2.1vw, 27px);
  line-height: 1.2;
  margin-bottom: 7px;
}
.specentry p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-3); max-width: 72ch; }
.specentry .s-meta { text-align: right; padding-top: 6px; }
.specentry img { width: 100%; height: 92px; object-fit: cover; margin-top: 10px; opacity: 0.8; }

/* mid-page interruption: detail photograph */
.detailband {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 0;
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--rule);
  background: var(--ground-2);
  margin: 0 0 60px;
}
.detailband img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.detailband .db-text { padding: clamp(22px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.detailband blockquote { margin: 0; }
.detailband blockquote p {
  font-family: var(--serif);
  font-size: clamp(21px, 2.3vw, 30px);
  line-height: 1.28;
  margin: 0;
  color: var(--ink);
}
.detailband cite { font-style: normal; }

/* --- sponsor rail (homepage only) ----------------------------------------- */

.rail { position: sticky; top: 18px; }
.railhead {
  border-bottom: 2px solid var(--ink-2);
  padding-bottom: 8px;
  margin-bottom: 4px;
}
.railhead h2 { font-family: var(--label); font-size: 20px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; }
.railhead p { margin: 6px 0 0; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); line-height: 1.7; }

.sponsor-group { display: grid; grid-template-columns: repeat(auto-fill, 240px); justify-content: space-between; column-gap: 26px; margin: 0 0 26px; }
.sponsor-group.roll { border-top: 1px dashed var(--rule); padding-top: 4px; }
.grouplabel {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 12px 0 4px;
}

/* every slot is the same self-contained unit; prominence is a class */
.sponsor {
  width: 240px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 0 14px;
  border-bottom: 1px solid var(--rule-2);
  color: var(--ink);
}
.sponsor:hover { text-decoration: none; }
.sponsor:hover .sponsor-name { color: var(--accent-2); }
.sponsor-name {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.25;
  color: var(--ink);
}
.sponsor.feat .sponsor-name { font-size: 22px; }
.sponsor-blurb {
  font-family: var(--label);
  font-size: 16.5px;
  line-height: 1.4;
  color: var(--ink-3);
  min-width: 200px;
}
.sponsor img { max-height: 44px; width: auto; height: auto; max-width: 100%; object-fit: contain; }

/* --- category / index pages ----------------------------------------------- */

.pagehead { border-bottom: 1px solid var(--rule); padding: 44px 0 34px; background: var(--ground-2); }
.pagehead .callout-no { font-size: 26px; }
.pagehead h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.06;
  margin: 12px 0 14px;
}
.pagehead .intro {
  font-family: var(--label);
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 70ch;
  margin: 0;
}

.cat-list { list-style: none; margin: 0; padding: 0; }
.cat-list > li { border-bottom: 1px solid var(--rule-2); }

.section-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* --- article --------------------------------------------------------------- */

.article-head { padding: 40px 0 0; }
.article-head .kickerline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  border-bottom: 1px solid var(--rule); padding-bottom: 14px;
}
.article-head h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5.4vw, 66px);
  line-height: 1.03;
  margin: 26px 0 18px;
  max-width: 24ch;
}
.lead {
  font-family: var(--label);
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.36;
  color: var(--ink-2);
  max-width: 58ch;
  margin: 0 0 22px;
}
.byline { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0 0 26px; font-size: 14px; }

.article-figure { margin: 0; }
.article-figure img { width: 100%; object-fit: cover; }
.article-figure figcaption,
.gallery figcaption,
.chart figcaption {
  font-family: var(--label);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-3);
  padding: 10px 0 0;
  max-width: 80ch;
}
.credit { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); margin-top: 5px; }
.figure-hero img { height: clamp(280px, 48vh, 560px); }

/* prose column with a live left margin for detail bubbles */
.article-body {
  display: grid;
  grid-template-columns: 108px minmax(0, var(--measure)) minmax(0, 1fr);
  gap: 0 40px;
  padding: 40px 0 0;
}
.article-body > * { grid-column: 2; }
.prose { font-family: var(--serif); font-size: 20.5px; line-height: 1.62; color: #d6e3e8; }
.prose p { margin: 0 0 22px; }
.prose h2 {
  font-family: var(--label);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 40px 0 16px;
  position: relative;
}
.prose h2 .detailmark {
  position: absolute;
  left: -108px;
  top: 4px;
  width: 46px; height: 46px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--accent-2);
}
.prose h3 { font-family: var(--sans); font-size: 22px; margin: 30px 0 12px; color: var(--ink); }
.prose ul, .prose ol { margin: 0 0 22px; padding-left: 22px; }
.prose li { margin-bottom: 9px; }
.prose a { border-bottom: 1px solid rgba(240, 161, 132, 0.4); }
.prose strong { color: var(--ink); }

/* full-bleed interruption bands built from the writers' notes */
.notes-band {
  grid-column: 1 / -1;
  margin: 34px 0 38px;
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--rule);
  background: var(--ground-2);
  padding: 26px 0 30px;
}
.notes-band .nb-inner {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 0 40px;
}
.notes-band .nb-body { max-width: 96ch; }
.notes-band h2 {
  font-family: var(--label);
  font-size: 23px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: var(--ink);
}
.notes-band .nb-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); padding-top: 6px; }

/* --- shared editorial components ------------------------------------------ */

.callout {
  border-left: 2px solid var(--accent);
  background: rgba(209, 96, 61, 0.06);
  padding: 16px 22px 18px;
  margin: 0 0 22px;
}
.callout p { margin: 0 0 10px; font-family: var(--label); font-size: 19px; line-height: 1.45; color: var(--ink-2); }
.callout p:last-child { margin-bottom: 0; }
.callout ul { list-style: none; margin: 0; padding: 0; }
.callout li {
  font-family: var(--label);
  font-size: 18.5px;
  line-height: 1.4;
  color: var(--ink-2);
  padding: 8px 0 8px 20px;
  border-bottom: 1px dashed var(--rule);
  position: relative;
}
.callout li:last-child { border-bottom: 0; }
.callout li::before {
  content: "";
  position: absolute; left: 0; top: 15px;
  width: 0; height: 0;
  border-left: 7px solid var(--accent);
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}

.note {
  font-family: var(--label);
  font-size: 17.5px;
  line-height: 1.45;
  color: var(--ink-3);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 12px 0;
  margin: 0 0 22px;
}

.pullquote { margin: 30px 0; border-top: 2px solid var(--accent); border-bottom: 1px solid var(--rule); padding: 20px 0; }
.pullquote p { font-family: var(--serif); font-size: clamp(23px, 2.6vw, 32px); line-height: 1.24; margin: 0; color: var(--ink); }

.blockquote { margin: 26px 0; padding: 0 0 0 22px; border-left: 2px solid var(--rule); }
.blockquote p { font-family: var(--serif); font-size: 21px; line-height: 1.45; margin: 0 0 10px; color: var(--ink-2); }
.blockquote cite { font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); }

.timeline { list-style: none; margin: 0 0 8px; padding: 0; }
.timeline li {
  display: grid;
  grid-template-columns: minmax(150px, 240px) minmax(0, 1fr);
  gap: 10px 26px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule-2);
  align-items: baseline;
}
.timeline li:first-child { border-top: 1px solid var(--rule-2); }
.t-when { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.1em; color: var(--accent-2); line-height: 1.6; }
.t-what { font-family: var(--label); font-size: 18.5px; line-height: 1.42; color: var(--ink-2); }

.statrow { display: flex; flex-wrap: wrap; gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); margin: 0 0 22px; }
.statblock { flex: 1 1 190px; background: var(--ground); padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.stat-num { font-family: var(--label); font-size: 40px; line-height: 1; color: var(--accent-2); }
.stat-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); line-height: 1.7; }

.datatable, .versus { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-family: var(--label); font-size: 18px; }
.datatable caption, .versus caption {
  text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-4); padding-bottom: 10px;
}
.datatable th, .versus th {
  text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 400;
  border-bottom: 1px solid var(--ink-3); padding: 9px 14px 9px 0; vertical-align: bottom;
}
.datatable td, .versus td {
  border-bottom: 1px solid var(--rule-2); padding: 11px 14px 11px 0;
  color: var(--ink-2); vertical-align: top; line-height: 1.4;
}
.datatable tr td:first-child, .versus tr td:first-child { color: var(--ink); }
.versus tr td:first-child { width: 30%; }
.tablescroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 24px; }
.tablescroll table { margin-bottom: 0; }

.chart { margin: 0 0 24px; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .c-axis { stroke: var(--rule); stroke-width: 1; }
.chart .c-bar { fill: var(--accent); }
.chart .c-bar-alt { fill: var(--ink-4); }
.chart .c-label { font-family: "Barlow Condensed", sans-serif; font-size: 13px; fill: #a8c6d0; }
.chart .c-value { font-family: "IBM Plex Mono", monospace; font-size: 11px; fill: #f0a184; }
.chart .c-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.chart .c-dot { fill: var(--accent-2); }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin: 0 0 24px; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: 200px; object-fit: cover; }

.map-figure { margin: 0 0 24px; border: 1px dashed var(--rule); padding: 12px; }
.map-figure .map-slot { min-height: 320px; }

.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 0 0 24px; }
.profile-card { border: 1px solid var(--rule); padding: 18px; display: flex; flex-direction: column; gap: 8px; background: var(--ground-2); }
.profile-card .p-photo { width: 72px; height: 72px; object-fit: cover; border-radius: 50%; }
.profile-card h3 { font-family: var(--label); font-size: 22px; letter-spacing: 0.08em; text-transform: uppercase; }
.profile-card .p-role { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); margin: 0; }
.profile-card p { margin: 0; font-family: var(--label); font-size: 17.5px; line-height: 1.45; color: var(--ink-2); }
.profile-card .p-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: auto; padding-top: 6px; }
.profile-card .p-attr { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: var(--ink-4); }

.org-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); margin: 0 0 24px; }
.org-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--ground); color: var(--ink); }
.org-card:hover { background: var(--panel); text-decoration: none; }
.org-card .org-logo { max-height: 40px; width: auto; object-fit: contain; }
.org-card .org-name { font-family: var(--label); font-size: 20px; letter-spacing: 0.06em; }
.org-card .org-host { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--ink-4); }

.entity-ref { font-family: var(--label); font-size: inherit; white-space: nowrap; }

.further-grid, .related-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--rule-2);
  border: 1px solid var(--rule-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.further-grid a, .related-links a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--ground);
  padding: 18px 20px 20px;
  color: var(--ink);
  height: 100%;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.25;
}
.further-grid a:hover, .related-links a:hover { background: var(--panel); text-decoration: none; color: var(--accent-2); }
.related-links li { display: flex; }
.related-links .r-sec { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); }

/* collapsible long lists, CSS-only */
.expander { margin: 0 0 24px; }
.expander > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.expander > summary::-webkit-details-marker { display: none; }
.expander > summary::after { content: " ▾"; }
.expander[open] > summary::after { content: " ▴"; }

/* --- footer ---------------------------------------------------------------- */

.sitefoot { border-top: 2px solid var(--accent); background: var(--ground-2); margin-top: 72px; }
.footgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 32px;
  padding: 40px 0 30px;
}
.footgrid h3 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-4); font-weight: 400; margin-bottom: 12px; }
.footgrid ul { list-style: none; margin: 0; padding: 0; }
.footgrid li { margin-bottom: 9px; font-family: var(--label); font-size: 18px; }
.footgrid a { color: var(--ink-2); }
.footgrid a:hover { color: var(--accent-2); }
.disclaimer {
  font-family: var(--label);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 62ch;
  margin: 0;
}
.footrule { border-top: 1px solid var(--rule); padding: 16px 0 34px; display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; }

/* --- responsive ------------------------------------------------------------ */

@media (max-width: 1180px) {
  .article-body { grid-template-columns: 76px minmax(0, 1fr) 0; gap: 0 26px; }
  .prose h2 .detailmark { left: -76px; width: 40px; height: 40px; font-size: 11px; }
  .notes-band .nb-inner { grid-template-columns: 76px minmax(0, 1fr); gap: 0 26px; }
}

@media (max-width: 1080px) {
  .levelnav ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .levelnav li { border-bottom: 1px solid var(--rule-2); }
}

@media (max-width: 980px) {
  .feedgrid { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; border-top: 2px solid var(--accent); padding-top: 22px; margin-bottom: 40px; }
  .detailband { grid-template-columns: minmax(0, 1fr); }
  .detailband img { min-height: 240px; }
  .footgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 760px) {
  body { font-size: 17px; }
  .titleblock { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .sheetstamp { white-space: normal; }
  .levelnav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .levelnav li { border-bottom: 1px solid var(--rule-2); }
  .levelnav li:first-child { border-left: 0; }
  .specentry { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; }
  .specentry .s-meta { grid-column: 2; text-align: left; padding-top: 0; }
  .specentry img { height: 150px; }
  .article-body { grid-template-columns: minmax(0, 1fr); }
  .article-body > * { grid-column: 1; }
  .prose { font-size: 19px; }
  .prose h2 { padding-left: 0; }
  .prose h2 .detailmark {
    position: static; display: inline-flex; width: 34px; height: 34px;
    margin-right: 10px; vertical-align: middle;
  }
  .notes-band .nb-inner { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .notes-band .nb-tag { padding-top: 0; }
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .footgrid { grid-template-columns: minmax(0, 1fr); }
  .hero img { height: 62vh; min-height: 340px; }
}

@media (prefers-reduced-motion: no-preference) {
  a, .calloutcard, .specentry { transition: background-color 120ms linear, color 120ms linear; }
}


/* --- homepage: section drawing, feature, focus band, survey notes, index --- */
.sd-head, .indexblock .sd-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px;
  border-bottom: 2px solid var(--ink-2); padding-bottom: 10px; margin-bottom: 6px;
}
.sd-head h2 { font-family: var(--label); font-size: 26px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
.sectiondrawing { margin: 46px 0 64px; }
.sd-row {
  display: grid;
  grid-template-columns: 118px minmax(180px, 250px) minmax(0, 1fr) 84px;
  gap: 0 26px;
  align-items: baseline;
  padding: 16px 0 17px;
  border-bottom: 1px dashed var(--rule);
  color: var(--ink);
}
.sd-row:hover { background: rgba(16, 34, 43, 0.6); text-decoration: none; }
.sd-row:hover .sd-name { color: var(--accent-2); }
.sd-name { font-family: var(--label); font-size: 25px; letter-spacing: 0.12em; text-transform: uppercase; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; overflow-wrap: anywhere; }
.sd-name .callout-no { font-size: 17px; }
.sd-blurb { font-size: 16px; line-height: 1.45; color: var(--ink-3); }
.sd-count { text-align: right; }
.sd-foot { padding-top: 12px; }

.feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0; border-top: 2px solid var(--accent); background: var(--ground-2); margin: 0 0 60px; }
.feature .fx-img { display: block; }
.feature .fx-img img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.fx-text { padding: clamp(22px, 3vw, 40px); display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.fx-text h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(27px, 3.2vw, 40px); line-height: 1.1; }
.fx-text h2 a { color: var(--ink); }
.fx-text h2 a:hover { color: var(--accent-2); text-decoration: none; }
.fx-lead { font-family: var(--label); font-size: 20px; line-height: 1.4; color: var(--ink-2); margin: 0; }
.fx-text p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-3); }

.focusband { border-top: 2px solid var(--accent); margin: 0 0 60px; position: relative; }
.focusband > img { width: 100%; height: clamp(280px, 42vh, 460px); object-fit: cover; }
.fb-plate {
  position: absolute; top: 2px; left: 0; right: 0;
  padding: clamp(20px, 3vw, 40px);
  background: linear-gradient(180deg, rgba(8, 17, 22, 0.92) 0%, rgba(8, 17, 22, 0.55) 70%, rgba(8, 17, 22, 0) 100%);
}
.fb-plate h2 { font-family: var(--label); font-size: clamp(28px, 3.4vw, 42px); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; margin: 8px 0 8px; }
.fb-plate h2 a { color: var(--ink); }
.fb-plate p { margin: 0; max-width: 60ch; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
.fb-captions { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); border-top: 0; }
.fb-captions a { background: var(--ground); padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; font-family: var(--serif); font-size: 19px; line-height: 1.25; color: var(--ink); }
.fb-captions a:hover { background: var(--panel); color: var(--accent-2); text-decoration: none; }

.surveynotes { margin: 0 0 60px; border-top: 1px solid var(--rule); padding-top: 22px; }
.surveynotes h2 { font-family: var(--label); font-size: 24px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 18px; }
.sn-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px 40px; }
.sn-item { display: flex; flex-direction: column; gap: 8px; }
.sn-item p { margin: 0; font-family: var(--serif); font-size: 18.5px; line-height: 1.5; color: var(--ink-2); }
.sn-item a { font-family: var(--label); letter-spacing: 0.04em; white-space: nowrap; }

.indexblock { margin: 0 0 20px; }
.ix-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); margin-top: 22px; }
.ix-item { display: flex; flex-direction: column; gap: 8px; background: var(--ground); padding: 18px 18px 20px; color: var(--ink); }
.ix-item:hover { background: var(--panel); text-decoration: none; }
.ix-item:hover .ix-title { color: var(--accent-2); }
.ix-title { font-family: var(--label); font-size: 21px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.15; }
.ix-count { margin-top: auto; }
@media (max-width: 900px) { .ix-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ix-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature .fx-img img { min-height: 240px; }
}
@media (max-width: 760px) {
  .sd-row { grid-template-columns: 96px minmax(0, 1fr); gap: 6px 16px; }
  .sd-blurb, .sd-count { grid-column: 2; }
  .fb-plate { position: static; background: none; padding: 18px 0 14px; }
  .sn-item a { white-space: normal; }
}

@media (max-width: 430px) {
  .sd-name { font-size: 21px; letter-spacing: 0.06em; }
  .levelnav .l-name { font-size: 16px; letter-spacing: 0.08em; overflow-wrap: anywhere; }
  .fb-plate h2, .lb-head h2 { letter-spacing: 0.08em; }
  .wordmark { letter-spacing: 0.16em; text-indent: 0.16em; }
}

/* 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-group .feat.sponsor.feat.sponsor img{box-sizing:border-box!important;height:44px!important;padding:8px 12px!important;background:#121013!important;box-sizing:border-box!important}
.sponsor-group.roll .sponsor.sponsor img{box-sizing:border-box!important;height:44px!important;padding:8px 12px!important;background:#121013!important;box-sizing:border-box!important}

/* op-nav-collapse: this nav printed 258px of stacked links at 390 before any content
   (6 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 "centre-rule", bold, 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(18px, 4vw, 56px)) 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 "height-clip" technique and marked with the "dots" 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:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:inherit;cursor:pointer;min-height:44px;box-sizing:border-box;display:flex;width:fit-content;margin-inline:auto;justify-self:center;border:0;border-bottom:2px solid currentColor;border-radius:0;padding:8px 6px;letter-spacing:.16em;margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

  .index-toggle-bars{width:13px;height:3px;flex:none;border-radius:99px;background:currentColor;box-shadow:5px 0 0 -0.5px currentColor,-5px 0 0 -0.5px currentColor}
  .levelnav{height:0;overflow:hidden;visibility:hidden;padding-block:0;margin-block:0;border-top-width:0;border-bottom-width:0}
  .index-toggle-c:checked ~ .levelnav{height:auto;overflow:visible;visibility:visible;padding-block:revert;margin-block:revert;border-top-width:revert;border-bottom-width:revert}
  .masthead:has(> .index-toggle){display:flow-root}
  .index-toggle:not(:has(~ .levelnav)){display:none}
}

/* op-footer-compact: the footer printed 5 rows for 5 link(s) in
   1 list(s) — 683px at 390, 8% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too,
   measured 683 -> 547px (20% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:clamp(9px,2.22vw,32px)!important;row-gap:9px!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 — 9 tiles,
   1116px at 390, 14% of the whole page. Two columns bring it to
   682px (39% shorter). Checked before writing: no new overflow, smallest mark still
   167px wide, longest blurb 3 lines, tile heights 102-186px.
   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. An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.sponsor-group, .sponsor-group.roll), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .sponsor-group{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:20px!important}
    .sponsor-group > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-group > * *{min-width:0!important;max-width:100%}
    .sponsor-group img,.sponsor-group svg{max-width:100%;height:auto}
  .sponsor-group.roll{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:20px!important}
    .sponsor-group.roll > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-group.roll > * *{min-width:0!important;max-width:100%}
    .sponsor-group.roll img,.sponsor-group.roll svg{max-width:100%;height:auto}
  .sponsor-group .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
  .sponsor-group.roll .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

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

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

/* op-hover-pad */
.specentry{padding-left:clamp(12px,3.5vw,22px)!important;padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
/* op-heading-levels */
h2:where(.rt-h3){font-weight: 600; margin: 0px; text-wrap: balance;}
.specentry:hover h2:where(.rt-h3){color: var(--accent-2);}
.specentry h2:where(.rt-h3){font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 2.1vw, 27px); line-height: 1.2; margin-bottom: 7px;}
.footgrid h2:where(.rt-h3){font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-4); font-weight: 400; margin-bottom: 12px;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.specentry > span.meta.s-meta > img,
  div > div.detailband > img,
  div > section.focusband > img,
  div.article-body > figure.article-figure.notes-band > img,
  div.wrap > figure.article-figure.figure-hero > img,
  main > section.hero > img,
  section.feature > a.fx-img > img){height:auto}
/* op-img-dims:end */
@media (min-width:901px) and (max-width:1019px){.sn-item.sn-item a{white-space:normal!important}}
[data-partner] img{background:transparent!important}
:root body [data-partner][data-partner] img{background:transparent!important}
.sponsor-group .feat.sponsor.feat.sponsor img{background:transparent!important}.sponsor-group.roll .sponsor.sponsor img{background:transparent!important}