/* ==========================================================================
   IDE Toolkit — "The Lit Room"
   Palette (named jobs)
     --ground   #0B0D10  page ground, near-black
     --panel    #15181D  raised phosphor panel / figure mat / logo box
     --ink      #EAE6DB  body ink, warm off-white so it reads as light
     --muted    #B9B5AC  secondary prose
     --quiet    #6E7480  credits, meta
     --amber    #F5B301  ACCENT — years, labels, rules, the cursor device
     --electric #2B4CFF  SECONDARY — used as whole section grounds (real area)
     --lavender #C6CFFF  third accent — ink on electric, Form Designers key
   Two saturated members (amber ~45°, electric ~230°) sit ~185° apart.
   Widths: prose (ch-based) · breakout · full-bleed. Breakpoints 1280/1600/1920/2560.
   ========================================================================== */

:root {
  --ground: #0B0D10;
  --panel: #15181D;
  --panel-2: #1D2128;
  --ink: #EAE6DB;
  --muted: #B9B5AC;
  --quiet: #818894;
  --amber: #F5B301;
  --electric: #1E33A8;
  --lavender: #C6CFFF;
  --rule: #2A2E36;

  --mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --prose-face: "Literata", Georgia, "Times New Roman", serif;
  --display: "Bricolage Grotesque", "Literata", serif;

  --prose: 66ch;
  --side: 0px;
  --gutter: 20px;
  --body: 18px;
  --h1: 40px;
  --h2: 27px;
  --band: 56px;
  --para-gap: 22px;
}

@media (min-width: 760px)  { :root { --gutter: 32px; --side: 26px; --body: 19px; --h1: 54px; --h2: 30px; --band: 72px; } }
@media (min-width: 1024px) { :root { --prose: 68ch; --side: 40px; --gutter: 40px; --h1: 64px; --band: 84px; } }
@media (min-width: 1280px) { :root { --prose: 70ch; --side: 100px; --gutter: 56px; --body: 20px; --h1: 74px; --h2: 34px; --band: 96px; --para-gap: 24px; } }
@media (min-width: 1600px) { :root { --prose: 74ch; --side: 210px; --gutter: 64px; --body: 21px; --h1: 86px; --h2: 38px; --band: 112px; --para-gap: 26px; } }
@media (min-width: 1920px) { :root { --prose: 78ch; --side: 290px; --gutter: 72px; --h1: 96px; --h2: 40px; --band: 128px; } }
@media (min-width: 2560px) { :root { --prose: 86ch; --side: 480px; --gutter: 96px; --body: 22px; --h1: 116px; --h2: 46px; --band: 152px; --para-gap: 30px; } }

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--body)/1.62 var(--prose-face);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
/* every kit photograph is 1600×1000, so the box can be reserved before it loads */
.plate img, .invert .shot img, .well .shot img,
.fig-plate img, .fig-inset img, .fig-bleed img,
.article-figure img, .gallery img, .ce-shot img, .card .shot img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
p { text-wrap: pretty; }

a { color: var(--amber); text-decoration: none; border-bottom: 1px solid rgba(245, 179, 1, .45); }
a:hover { color: var(--ink); border-bottom-color: var(--ink); }
a:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; }

::selection { background: var(--amber); color: var(--ground); }

/* --------------------------------------------------------------- page grid */

.grid {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start] minmax(0, var(--side))
    [prose-start] minmax(0, var(--prose)) [prose-end]
    minmax(0, var(--side))
    [wide-end] minmax(var(--gutter), 1fr) [full-end];
}
.grid > * { grid-column: prose-start / prose-end; }
.grid > .w { grid-column: wide-start / wide-end; }
.grid > .f { grid-column: full-start / full-end; }
.grid > .s { grid-column: prose-start / prose-end; }
@media (min-width: 1600px) {
  .grid > .s { grid-column: prose-end / wide-end; padding-left: 36px; }
}

/* --------------------------------------------------------------- masthead */

.masthead { border-bottom: 1px solid var(--rule); }
.masthead-inner {
  padding: 26px var(--gutter) 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.nameplate {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 0;
  color: var(--ink);
  text-decoration: none;
}
.nameplate:hover { color: var(--ink); }
.nameplate .caret { flex: none; color: var(--amber); width: 20px; height: 38px; }
.nameplate b {
  font: 700 clamp(28px, 4.4vw, 60px)/.95 var(--mono);
  letter-spacing: -.035em;
  white-space: nowrap;
}
@media (min-width: 1024px) { .nameplate .caret { width: 26px; height: 50px; } }
@media (min-width: 1920px) { .nameplate b { font-size: 66px; } }

.sitenav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding: 14px 0 16px;
  border-top: 1px solid var(--rule);
  font: 400 12px/1.1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
@media (min-width: 1280px) {
  .sitenav { justify-content: space-between; gap: 24px; font-size: 13px; padding: 16px 0 18px; }
}
.sitenav a {
  color: var(--ink);
  border: 0;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.sitenav a:hover, .sitenav a[aria-current="page"] { color: var(--amber); border-bottom-color: var(--amber); }
.sitenav .ico { width: 17px; height: 17px; flex: none; }
/* the second level stays out of the row so every label is one line;
   it appears under its own label on hover, as an amber line. */
.sitenav .sub {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 9px;
  padding: 8px 12px;
  background: var(--panel);
  border-left: 2px solid var(--amber);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--muted);
  text-transform: none;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .14s ease;
  z-index: 6;
}
.sitenav a:hover .sub, .sitenav a:focus-visible .sub { opacity: 1; visibility: visible; }
.sitenav .util { color: var(--quiet); }

/* mobile drawer — CSS only */
/* the drawer's state input is never visible; the label is the control */
.navstate { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.navtoggle { display: none; }
@media (max-width: 1023px) {
  .navtoggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    margin-bottom: 4px;
    font: 400 12px/1 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--amber);
    border: 1px solid var(--rule);
    background: var(--panel);
    padding: 11px 14px;
    cursor: pointer;
    min-height: 44px;
  }
  .navstate { position: absolute; opacity: 0; pointer-events: none; }
  .navstate:focus-visible + .navtoggle { outline: 2px solid var(--amber); outline-offset: 3px; }
  .sitenav { display: none; flex-direction: column; }
  .navstate:checked ~ .sitenav { display: flex; }
  .sitenav a { min-height: 44px; }
  .sitenav .sub { position: static; opacity: 1; visibility: visible; margin: 0 0 0 12px; padding: 4px 10px; white-space: normal; }
  .sitenav a { flex-wrap: wrap; }
}

/* ------------------------------------------------------------------ labels */

.kicker {
  font: 400 12px/1.2 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--amber);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.kicker .ico { width: 18px; height: 18px; flex: none; }
.kicker.quiet { color: var(--quiet); }
.kicker.lav { color: var(--lavender); }

.year { color: var(--amber); display: block; height: auto; }
.cursor-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--amber);
  padding: 0;
  margin: 0;
  border: 0;
}
.cursor-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--amber), var(--rule) 65%, transparent);
}
.cursor-rule .cur { width: 13px; height: 24px; flex: none; }

/* ------------------------------------------------------------- typography */

h1, h2, h3, h4 { text-wrap: balance; }

.hero-h1 {
  margin: 0;
  font: 400 var(--h1)/1.02 var(--prose-face);
  letter-spacing: -.028em;
}
.lead {
  margin: 0;
  font: 400 calc(var(--body) * 1.22)/1.44 var(--prose-face);
  color: var(--muted);
}
.prose h2 {
  margin: 0;
  font: 400 var(--h2)/1.14 var(--prose-face);
  letter-spacing: -.02em;
  color: var(--amber);
}
.prose h3 {
  margin: 0;
  font: 400 12px/1.2 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lavender);
}
.prose p { margin: 0; }
/* raised specificity so the flow rules beat `.prose p { margin: 0 }` */
.grid.prose > * + * { margin-top: var(--para-gap); }
.grid.prose > h2 { margin-top: calc(var(--para-gap) * 2); }
.hsplit {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.grid.prose > .hsplit + * { margin-top: var(--para-gap); }
.grid.prose > * + .hsplit { margin-top: calc(var(--para-gap) * 2.2); }

.sg-sec { border-top: 1px solid var(--amber); padding-top: 22px; }
.sg-sec > .lbl { font: 400 11.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 20px; }

.note {
  border-left: 2px solid var(--lavender);
  padding: 4px 0 4px 18px;
  color: var(--muted);
  font-size: calc(var(--body) * .95);
}

.entity-ref { overflow-wrap: break-word; }
.entity-ref::after { content: "\00a0\2197"; font-size: .8em; color: var(--quiet); }

/* --------------------------------------------------------------- insertions
   Every inserted unit reserves its own space on BOTH sides (A2): the margin
   is twice the paragraph gap and never below 32px desktop / 24px mobile. */

.ins {
  --ins-gap: max(32px, calc(var(--para-gap) * 2));
  margin-block: var(--ins-gap) !important;
  clear: both;
  position: relative;
}
@media (max-width: 759px) { .ins { --ins-gap: max(24px, calc(var(--para-gap) * 2)); } }
.prose > .ins:first-child { margin-top: 0 !important; }
.prose > .ins:last-child { margin-bottom: 0 !important; }

/* ------------------------------------------------------------- figures (3) */

figure { margin: 0; }

/* caption block — sized by the caption, never by the image.
   One row on desktop, closing up when the caption is short. */
.figmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 28px;
  margin-top: 12px;
}
.figmeta .cap {
  flex: 1 1 22ch;
  min-width: 0;
  max-width: 68ch;
  margin: 0;
  font: 400 calc(var(--body) * .78)/1.5 var(--mono);
  color: var(--ink);
}
.figmeta .cred {
  flex: 0 1 auto;
  margin: 0;
  font: 400 12px/1.5 var(--mono);
  color: var(--quiet);
}
@media (min-width: 1280px) { .figmeta .cred { margin-left: auto; text-align: right; } }

/* treatment 1 — the lit plate, full bleed, amber rule along its base */
.fig-bleed { position: relative; }
.fig-bleed img { width: 100%; border-bottom: 2px solid var(--amber); }
.fig-bleed.crop img { aspect-ratio: 16 / 7; object-fit: cover; }
@media (min-width: 1024px) { .fig-bleed.crop img { aspect-ratio: 16 / 6; } }
@media (min-width: 1920px) { .fig-bleed.crop img { aspect-ratio: 16 / 5; } }
.fig-bleed .figmeta { padding: 0 var(--gutter); }
@media (min-width: 760px) {
  /* the caption sits on the picture rather than under it */
  .fig-bleed .figmeta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    margin: 0;
    padding: 56px var(--gutter) 16px;
    background: linear-gradient(to top, rgba(11, 13, 16, .94) 18%, rgba(11, 13, 16, .72) 52%, rgba(11, 13, 16, 0));
    align-items: flex-end;
    gap: 4px 28px;
  }
  .fig-bleed .figmeta .cap { max-width: 62ch; }
}

/* treatment 2 — inset, lavender left rule, caption and credit stacked */
.fig-inset {
  border-left: 2px solid var(--lavender);
  padding-left: 20px;
  background: linear-gradient(90deg, rgba(198, 207, 255, .07), transparent 55%);
}
.fig-inset img { width: 100%; }
.fig-inset .figmeta { display: block; padding-right: 8px; }
.fig-inset .figmeta .cap { max-width: 54ch; }
.fig-inset .figmeta .cred { margin-top: 6px; }

/* treatment 3 — the plate: image on a phosphor mat, caption in a dark pill */
.fig-plate {
  background: var(--panel);
  padding: 16px;
}
.fig-plate img { width: 100%; }
.fig-plate .figmeta {
  background: var(--ground);
  padding: 14px 18px;
  margin-top: 16px;
}
.fig-plate .figmeta .cap { color: var(--lavender); }

.article-figure { }
.article-figure img { width: 100%; }
.article-figure figcaption {
  margin-top: 12px;
  font: 400 calc(var(--body) * .78)/1.5 var(--mono);
  color: var(--ink);
  max-width: 68ch;
  border-top: 1px solid var(--rule);
  padding-top: 10px;
}
.article-figure figcaption .cred { display: block; margin-top: 6px; font-size: 12px; color: var(--quiet); }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.gallery figure { background: var(--panel); padding: 12px; }
.gallery figcaption { margin-top: 10px; font: 400 12px/1.45 var(--mono); color: var(--muted); }

/* map frame is styled but never instantiated — this site carries no maps */
.map-figure .map-slot { min-height: 320px; background: var(--panel); border: 1px solid var(--rule); }

/* ---------------------------------------------------- quotes and callouts */

.pullquote {
  margin: 0;
  background: var(--electric);
  color: #fff;
  padding: clamp(28px, 4vw, 56px) var(--gutter);
}
.pullquote p {
  margin: 0 auto;
  max-width: 34ch;
  font: 400 clamp(24px, 3vw, 44px)/1.2 var(--prose-face);
  letter-spacing: -.02em;
}
.pullquote .qk {
  display: block;
  margin: 0 auto 16px;
  max-width: 34ch;
  font: 400 12px/1.2 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.blockquote {
  margin: 0;
  border-left: 3px solid var(--amber);
  padding: 6px 0 6px 24px;
}
.blockquote p { margin: 0; font: 400 calc(var(--body) * 1.15)/1.42 var(--prose-face); }
.blockquote cite {
  display: block;
  margin-top: 12px;
  font: 400 12px/1.4 var(--mono);
  font-style: normal;
  color: var(--quiet);
}
.callout {
  background: var(--panel);
  border-top: 2px solid var(--amber);
  padding: 26px 26px 28px;
}
.callout .kicker { margin-bottom: 14px; }
.callout p { margin: 0; }
.callout ul { margin: 0; padding-left: 20px; }
.callout li + li { margin-top: 10px; }

/* ----------------------------------------------------------- data / tables */

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.datatable, .versus {
  border-collapse: collapse;
  width: 100%;
  min-width: 460px;
  font: 400 calc(var(--body) * .92)/1.45 var(--prose-face);
}
.datatable caption, .versus caption {
  text-align: left;
  font: 400 12px/1.2 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--amber);
  padding-bottom: 12px;
}
.datatable th, .versus th {
  text-align: left;
  font: 400 11.5px/1.3 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--quiet);
  padding: 10px 18px 10px 0;
  border-bottom: 1px solid var(--amber);
  vertical-align: bottom;
}
.datatable td, .versus td {
  padding: 14px 18px 14px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.datatable tr:last-child td, .versus tr:last-child td { border-bottom: 0; }
.datatable td:first-child { color: var(--lavender); font-family: var(--mono); font-size: calc(var(--body) * .78); }
.versus td:first-child { width: 30%; font-family: var(--mono); font-size: calc(var(--body) * .78); color: var(--amber); }

.statrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: transparent;
  border-top: 2px solid var(--amber);
}
.statblock {
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--rule);
  padding: 22px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stat-num {
  font: 700 clamp(28px, 2.4vw, 40px)/1 var(--display);
  letter-spacing: -.03em;
  color: var(--amber);
}
.stat-num.sm { font: 400 clamp(17px, 1.2vw, 21px)/1.25 var(--mono); letter-spacing: 0; }
.stat-label { font: 400 12.5px/1.45 var(--mono); color: var(--muted); }

/* a final cell left alone on its row spans the remaining tracks, so an odd
   item count never leaves empty tracks beside it (any track count) */
.statrow > .statblock:last-child:nth-child(odd) { grid-column: 1 / -1; }
.timeline { margin: 0; padding: 0; list-style: none; counter-reset: tl; }
.timeline li {
  display: grid;
  gap: 4px 26px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.timeline li:first-child { border-top: 1px solid var(--amber); }
.timeline li:last-child { border-bottom: 0; }
@media (min-width: 760px) { .timeline li { grid-template-columns: minmax(150px, 22%) 1fr; } }
@media (min-width: 1600px) { .timeline li { grid-template-columns: minmax(200px, 20%) 1fr; padding: 20px 0; } }
.t-when {
  font: 400 12.5px/1.4 var(--mono);
  letter-spacing: .03em;
  color: var(--amber);
  text-transform: uppercase;
}
.t-what { color: var(--ink); font-size: calc(var(--body) * .94); line-height: 1.5; }

.chart { margin: 0; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart figcaption {
  margin-top: 14px;
  font: 400 12.5px/1.5 var(--mono);
  color: var(--muted);
  max-width: 60ch;
}
.chart .ax { font: 400 11px var(--mono); fill: var(--quiet); }
.chart .vl { font: 400 12px var(--mono); fill: var(--amber); }

/* ------------------------------------------------------------------- cards */

.cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px 32px;
}
@media (min-width: 1920px) { .cardgrid { gap: 48px 40px; } }

.card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 0;
  color: inherit;
  background: none;
  height: 100%;
}
.card:hover { color: inherit; }
.card .shot { aspect-ratio: 16 / 10; overflow: hidden; background: var(--panel); }
.card .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .shot img { transform: scale(1.03); }
.card h3 {
  margin: 0;
  font: 400 clamp(21px, 1.5vw, 27px)/1.16 var(--prose-face);
  letter-spacing: -.015em;
  color: var(--ink);
  min-height: 2.32em;
}
.card:hover h3 { color: var(--amber); }
.card p { margin: 0; color: var(--muted); font-size: calc(var(--body) * .88); }
.card .foot { margin-top: auto; padding-top: 6px; }

.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.profile-card {
  background: var(--panel);
  border-top: 2px solid var(--lavender);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.profile-card .p-photo { width: 84px; height: 84px; object-fit: cover; }
.profile-card.no-photo { border-top-color: var(--amber); }
.profile-card h3 { margin: 0; font: 400 24px/1.15 var(--prose-face); }
.profile-card .p-role { margin: 0; font: 400 12px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--amber); }
.profile-card p { margin: 0; font-size: calc(var(--body) * .88); color: var(--muted); }
.profile-card .p-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--mono); font-size: 12.5px; }
.profile-card .p-attr { font: 400 11.5px/1.4 var(--mono); color: var(--quiet); }

.org-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.org-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 4px 14px;
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: 14px 16px;
  color: var(--ink);
}
.org-card:hover { border-color: var(--amber); color: var(--ink); }
.org-logo { width: 44px; height: 44px; object-fit: contain; grid-row: span 2; }
.org-card.no-logo { grid-template-columns: 1fr; }
.org-name { font: 400 17px/1.25 var(--prose-face); }
.org-host { font: 400 11.5px/1.3 var(--mono); color: var(--quiet); }

.further-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: transparent; }
.further-grid a {
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--rule);
  border: 0;
  padding: 22px 22px 24px;
  color: var(--ink);
  font: 400 clamp(19px, 1.3vw, 23px)/1.22 var(--prose-face);
  display: flex;
  align-items: flex-start;
  min-height: 118px;
}
.further-grid a:hover { background: var(--panel-2); color: var(--amber); }

.related-links { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; background: transparent; }
.related-links li { background: var(--panel); box-shadow: 0 0 0 1px var(--rule); }
.related-links a { display: block; padding: 20px 22px; border: 0; color: var(--ink); font: 400 clamp(19px, 1.3vw, 23px)/1.24 var(--prose-face); }
.related-links a:hover { background: var(--panel-2); color: var(--amber); }
.related-links .rk { display: block; font: 400 11.5px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--amber); margin-bottom: 8px; }

/* ---------------------------------------------------------- homepage bands */

.band { padding-block: var(--band); }
.band.tight { padding-block: calc(var(--band) * .6); }
.band.flush { padding-block: 0; }

.hero-lead { display: grid; gap: 40px; align-items: center; }
.grid > .f.hero-lead { padding-inline: var(--gutter); }
@media (min-width: 1280px) { .hero-lead { grid-template-columns: 1fr minmax(300px, 34%); gap: 56px; } }
@media (min-width: 1920px) { .hero-lead { grid-template-columns: 1fr minmax(360px, 32%); gap: 72px; } }
.hero-lead .year { width: min(100%, 780px); }
@media (min-width: 1920px) { .hero-lead .year { width: min(100%, 940px); } }
@media (min-width: 2560px) { .hero-lead .year { width: min(100%, 1180px); } }

.plate { display: flex; flex-direction: column; gap: 12px; }
.plate img { width: 100%; border-bottom: 2px solid var(--amber); }
.plate .note-line { margin: 0; font: 400 calc(var(--body) * .82)/1.5 var(--mono); color: var(--amber); }
.plate .cred { margin: 0; font: 400 12px/1.4 var(--mono); color: var(--quiet); }

.trio { display: grid; gap: 48px 40px; align-items: start; }
@media (min-width: 1024px) { .trio { grid-template-columns: 1.5fr 1fr 1fr; } }
.trio h3 { margin: 0; font: 400 clamp(23px, 1.9vw, 34px)/1.16 var(--prose-face); letter-spacing: -.015em; }
.trio a.card h3 { min-height: 0; }
.trio p { margin: 0; color: var(--muted); font-size: calc(var(--body) * .9); }

.invert { background: var(--electric); color: #fff; padding-block: var(--band); }
.invert a { color: #fff; border-bottom-color: rgba(255,255,255,.5); }
.invert a:hover { color: var(--lavender); border-bottom-color: var(--lavender); }
.invert .kicker { color: var(--lavender); }
.invert-in { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .invert-in { grid-template-columns: 1fr 1fr; gap: 64px; } }
.invert h2 { margin: 0; font: 400 clamp(28px, 3vw, 50px)/1.1 var(--prose-face); letter-spacing: -.02em; }
.invert p { margin: 0; color: #DDE3FF; }
.invert .shot { background: #16277E; }
.invert .shot img { width: 100%; }
.invert .cred { font: 400 12px/1.4 var(--mono); color: var(--lavender); margin: 0; }

/* section strips — one row per room, image + a single line */
.strips { display: flex; flex-direction: column; }
.strip {
  display: grid;
  gap: 14px 32px;
  padding: 26px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 0;
  color: inherit;
  align-items: center;
}
.strip:first-child { border-top-color: var(--amber); }
.strips .strip:last-child { border-bottom: 1px solid var(--amber); }
.strip:hover { color: inherit; background: linear-gradient(90deg, rgba(245,179,1,.06), transparent 60%); }
.strip .thumb { overflow: hidden; background: var(--panel); aspect-ratio: 16 / 10; }
.strip .thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 760px) and (max-width: 1279px) {
  .strip { grid-template-columns: 190px minmax(0, 1fr); row-gap: 8px; padding: 20px 0; align-items: start; }
  .strip .thumb { grid-row: 1 / span 3; align-self: start; aspect-ratio: 16 / 10; }
  .strip .nm, .strip .ln, .strip .ct { grid-column: 2; }
}
@media (min-width: 1280px) {
  .strip { grid-template-columns: 268px minmax(0, 1.05fr) minmax(0, 1fr) 190px; padding: 14px 0; }
  .strip .thumb { aspect-ratio: 12 / 5; }
}
@media (min-width: 1920px) {
  .strip { grid-template-columns: 330px minmax(0, 1.05fr) minmax(0, 1fr) 240px; padding: 16px 0; }
  .strip .thumb { aspect-ratio: 2.6 / 1; }
}
.strip .nm {
  font: 400 clamp(28px, 2.5vw, 44px)/1.04 var(--prose-face);
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: 14px;
}
.strip .nm .ico { width: 26px; height: 26px; flex: none; color: var(--amber); }
.strip:hover .nm { color: var(--amber); }
.strip .ln { margin: 0; color: var(--muted); font-size: calc(var(--body) * .88); }
.strip .ct { font: 400 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--quiet); }

/* feature well */
.well { display: grid; gap: 32px; }
@media (min-width: 1024px) { .well { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: start; } }
@media (min-width: 1600px) { .well { gap: 72px; } }
.well .shot { background: var(--panel); }
.well .shot img { width: 100%; border-bottom: 2px solid var(--amber); }
.well h2 { margin: 0; font: 400 clamp(30px, 3.4vw, 58px)/1.06 var(--prose-face); letter-spacing: -.025em; }
.well .cols { column-gap: 40px; }
@media (min-width: 1600px) { .well .cols { column-count: 2; } }
.well .cols p { margin: 0 0 18px; color: var(--muted); }

/* ------------------------------------------------------------- supporters */

.supporters { border-top: 1px solid var(--rule); padding-block: calc(var(--band) * .55); }
.grid > .f.supin { padding-inline: var(--gutter); }
.supporters .head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin-bottom: 26px; }
.supporters .head p { margin: 0; color: var(--muted); font-size: calc(var(--body) * .88); max-width: 62ch; }
.sponsor-group + .sponsor-group { margin-top: 22px; }
.sponsor-group .sublabel {
  font: 400 11.5px/1.2 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--quiet);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 20px;
}
/* the sub-label moves to the left of its row on wide screens, so the block
   spends horizontal space instead of stacking three labelled rows */
@media (min-width: 1024px) {
  .sponsor-group { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 28px; align-items: start; }
  .sponsor-group + .sponsor-group { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); }
  .sponsor-group .sublabel {
    margin: 0;
    padding: 6px 20px 0 0;
    border-bottom: 0;
    border-right: 1px solid var(--rule);
    align-self: stretch;
  }
}
@media (min-width: 1600px) { .sponsor-group { grid-template-columns: 230px minmax(0, 1fr); gap: 40px; } }
/* Tiles are a CONSTANT width — never 1fr, never flex-grow. The constant steps
   at each breakpoint so a row divides the track exactly: 4-across at 1600,
   all seven across at 2560. */
.sponsor-row { display: flex; flex-wrap: wrap; gap: 16px; }
.sponsor {
  flex: 0 0 380px;
  max-width: 100%;
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--ink);
  min-height: 108px;
}
.sponsor:hover { border-color: var(--amber); color: var(--ink); }
.sponsor img {
  /* one logo box size for the whole block: 4.5:1 landscape, height is fixed */
  width: 220px;
  height: 50px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  flex: none;
}
.sponsor-name { font: 400 16px/1.3 var(--prose-face); color: var(--ink); }
.sponsor-blurb { font: 400 13.5px/1.5 var(--mono); color: var(--muted); }
@media (max-width: 519px) { .sponsor { flex: 0 0 100%; } .sponsor img { width: 200px; } }
@media (min-width: 1024px) { .sponsor { flex: 0 0 calc((100% - 16px) / 2); } }
@media (min-width: 1280px) { .sponsor { flex: 0 0 calc((100% - 32px) / 3); } }
@media (min-width: 1600px) { .sponsor { flex: 0 0 calc((100% - 48px) / 4); } }
@media (min-width: 2560px) { .sponsor { flex: 0 0 calc((100% - 96px) / 7); } }

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

.sitefoot { border-top: 1px solid var(--rule); padding-block: clamp(28px, 3vw, 44px); }
.grid > .f.foot-in { padding-inline: var(--gutter); }
.foot-in { display: grid; gap: 26px; }
@media (min-width: 1024px) { .foot-in { grid-template-columns: minmax(0, 1fr) minmax(0, 58%); gap: 48px; align-items: end; } }
.foot-in .standing { margin: 0; color: var(--muted); max-width: 52ch; font-size: calc(var(--body) * .9); }
.footnav { display: flex; flex-wrap: wrap; gap: 10px 30px; font: 400 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
@media (min-width: 1024px) { .footnav { justify-content: flex-end; } }
.footnav a { color: var(--muted); border: 0; }
.footnav a:hover { color: var(--amber); }

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

.head2col { display: grid; gap: 22px; align-items: start; }
/* one meta line under the title: the drawn year and a single sentence */
.headside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}
.headside > .year { flex: 0 0 auto; width: 88px; }
.headside > .hint,
.headside > .note { flex: 1 1 260px; margin: 0; font: 400 calc(var(--body) * .82)/1.5 var(--mono); color: var(--muted); border: 0; padding: 0; }
.headside > .roomnav { flex: 1 1 100%; }
@media (min-width: 1280px) { .headside > .year { width: 104px; } }

.artmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.artmeta .rm { font: 400 12px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--quiet); }

.toc { display: flex; flex-direction: column; gap: 12px; }
.toc .lbl { font: 400 11.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--quiet); }
.toc ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; counter-reset: t; }
.toc li { counter-increment: t; display: flex; gap: 12px; font: 400 14px/1.35 var(--mono); }
.toc li::before { content: counter(t, decimal-leading-zero); color: var(--amber); flex: none; }
.toc a { color: var(--ink); border: 0; }
.toc a:hover { color: var(--amber); }
.toc .hint { font: 400 13px/1.5 var(--prose-face); color: var(--quiet); border-top: 1px solid var(--rule); padding-top: 12px; }

.endunit {
  background: var(--panel);
  border-top: 2px solid var(--amber);
  padding: 28px 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.endunit h2 { margin: 0; font: 400 clamp(22px, 1.7vw, 30px)/1.16 var(--prose-face); color: var(--ink); letter-spacing: -.015em; }
.endunit p { margin: 0; color: var(--muted); font-size: calc(var(--body) * .9); }

/* a figure paired beside a unit fills the row rather than leaving the column
   short. Pairing only turns on where both columns are wide enough that the
   image is not forced into a portrait crop of a landscape original. */
.endgrid { display: grid; gap: 28px; }
@media (min-width: 1100px) {
  .endgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 40px; align-items: stretch; }
  .endgrid > figure { display: flex; flex-direction: column; }
  .endgrid > figure img { flex: 1 1 auto; min-height: 200px; height: auto; aspect-ratio: auto; object-fit: cover; }
  /* tall chronologies run in two columns so the paired row stays in proportion */
  .endgrid .timeline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .endgrid .timeline li { grid-template-columns: 1fr; padding: 12px 0; }
  .endgrid .timeline li:nth-child(2) { border-top: 1px solid var(--amber); }
  /* 5 stats in a narrowed column: two even rows, never a hole beside the last */
  .endgrid .statrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .endgrid .statrow > .statblock:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* the crop stays inside a landscape band: a height floor per breakpoint keeps
   a 16:10 original from being cut to a letterbox on wide screens */
@media (min-width: 1100px) and (max-width: 1599px) { .endgrid > figure img { max-height: 400px; } }
@media (min-width: 1600px) { .endgrid > figure img { min-height: 300px; } }
@media (min-width: 2560px) { .endgrid > figure img { min-height: 440px; } }

.artfoot { border-top: 1px solid var(--rule); }
.artfoot .lbl { font: 400 11.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--quiet); margin-bottom: 20px; }

/* ------------------------------------------------------- category listings */

.cat-open { display: grid; gap: 36px; align-items: center; }
@media (min-width: 1024px) { .cat-open { grid-template-columns: 1fr 1fr; gap: 56px; } }
@media (min-width: 1600px) { .cat-open { gap: 80px; } }
.cat-open .year { width: min(100%, 420px); }
@media (min-width: 1920px) { .cat-open .year { width: min(100%, 520px); } }

.cat-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 56px; }
@media (min-width: 1280px) { .cat-list { gap: 72px; } }
@media (min-width: 1920px) { .cat-list { gap: 88px; } }
.cat-list > li { display: grid; gap: 20px 44px; align-items: center; }
@media (min-width: 900px) {
  .cat-list > li { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
  .cat-list > li:nth-child(even) .ce-shot { order: 2; }
}
@media (min-width: 1600px) { .cat-list > li { gap: 20px 64px; } }
.ce-shot { background: var(--panel); overflow: hidden; }
.ce-shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 2px solid var(--amber); }.cat-list > li:nth-child(even) .ce-shot img { border-bottom-color: var(--lavender); }
.ce-body { display: flex; flex-direction: column; gap: 14px; }
.ce-body h2 { margin: 0; font: 400 clamp(25px, 2.2vw, 40px)/1.1 var(--prose-face); letter-spacing: -.02em; }
.ce-body h2 a { color: var(--ink); border: 0; }
.ce-body h2 a:hover { color: var(--amber); }
.ce-body p { margin: 0; color: var(--muted); font-size: calc(var(--body) * .9); max-width: 56ch; }
.cat-list .lead-entry { }
@media (min-width: 900px) {
  .cat-list .lead-entry { grid-template-columns: 1fr; gap: 26px; }
  .cat-list .lead-entry .ce-shot img { aspect-ratio: 21 / 8; }
  .cat-list .lead-entry .ce-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px 56px; align-items: start; }
  .cat-list .lead-entry .ce-body h2 { font-size: clamp(34px, 3.4vw, 62px); }
  .cat-list .lead-entry .ce-body p { max-width: none; }
}

.roomnav { display: flex; flex-wrap: wrap; gap: 12px; }
.roomnav a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--rule);
  background: var(--panel);
  padding: 12px 16px;
  color: var(--ink);
  font: 400 12.5px/1.1 var(--mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  min-height: 44px;
}
.roomnav a .ico { width: 18px; height: 18px; flex: none; color: var(--amber); }
.roomnav a:hover { border-color: var(--amber); color: var(--amber); }
.roomnav a[aria-current="page"] { border-color: var(--amber); color: var(--amber); }

/* archive index */
.arch { margin: 0; padding: 0; list-style: none; }
.arch li { border-bottom: 1px solid var(--rule); }
.arch li:first-child { border-top: 1px solid var(--amber); }
.arch a {
  display: grid;
  gap: 4px 32px;
  padding: 18px 0;
  border: 0;
  color: var(--ink);
  align-items: baseline;
}
@media (min-width: 900px) { .arch a { grid-template-columns: 190px minmax(0, 1fr) 230px; } }
.arch a:hover { color: var(--amber); }
.arch .rm { font: 400 11.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--quiet); }
.arch .ti { font: 400 calc(var(--body) * 1.06)/1.25 var(--prose-face); }
.arch .sm { font: 400 12.5px/1.45 var(--mono); color: var(--quiet); }

/* CSS-only expander for lists that can grow */
.expander { border-top: 1px solid var(--rule); margin-top: 20px; }
.expander summary {
  cursor: pointer;
  padding: 14px 0;
  font: 400 12px/1.2 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--amber);
  list-style: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.expander summary::-webkit-details-marker { display: none; }
.expander summary::after { content: "+"; color: var(--quiet); }
.expander[open] summary::after { content: "\2212"; }

/* -------------------------------------------------------------- utilities */

.stack { display: flex; flex-direction: column; }
.g8 { gap: 8px; } .g12 { gap: 12px; } .g16 { gap: 16px; } .g20 { gap: 20px; }
.g24 { gap: 24px; } .g32 { gap: 32px; } .g40 { gap: 40px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--amber); color: var(--ground); padding: 12px 18px;
  font: 400 12px/1 var(--mono); text-transform: uppercase; border: 0;
}
.skip:focus { left: 12px; top: 12px; }

/* ------------------------------------------------- mobile compaction (≤759) */
@media (max-width: 759px) {
  .masthead-inner { padding-top: 20px; gap: 12px; }
  .nameplate .caret { width: 17px; height: 32px; }
  .nameplate { min-height: 44px; }
  .nameplate b { letter-spacing: -.04em; }
  .sitenav { gap: 0 20px; padding: 8px 0 12px; }
  .skip { padding: 15px 18px; }

  /* every standing link gets a real touch target; prose links stay inline */
  .footnav a, .toc a, .artmeta a, .p-links a, .plate a, .well a, .invert a, .kicker a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .kicker { min-height: 44px; }
  .sitenav .sub { font-size: 12.5px; }
  .footnav { gap: 0 24px; }

  /* meta, captions and credits sit a notch above usual fine-print */
  .kicker, .figmeta .cred, .plate .cred, .invert .cred, .arch .rm, .arch .sm,
  .sponsor-group .sublabel, .profile-card .p-attr, .toc .lbl, .toc li,
  .artfoot .lbl, .sg-sec > .lbl, .strip .ct, .chart .ax, .chart figcaption,
  .datatable th, .versus th, .blockquote cite, .expander summary,
  .related-links .rk, .org-host { font-size: 12.5px; }
  .figmeta .cap { font-size: 13.5px; }

  .band { padding-block: 44px; }
  .band.tight { padding-block: 34px; }
  .supporters { padding-block: 38px; }
  .invert { padding-block: 44px; }
  .cat-list { gap: 40px; }
  .callout { padding: 20px 20px 22px; }
  .statblock { padding: 18px 16px 20px; }
  .endunit { padding: 22px 20px 24px; }
}

@media print {
  body { background: #fff; color: #000; }
  .masthead, .sitefoot, .supporters { display: none; }
}

/* 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 .head{flex-wrap:wrap!important}
.supporters .head > .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-grid-fill: fixed px columns leave a dead strip at wide widths — the tiles
   must stretch, and a tile with its own fixed width has to give that up too */
.sponsor-group{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important;justify-content:stretch!important}
.sponsor-group>[data-partner],.sponsor-group>*>[data-partner]{width:auto!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-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}

/* pipeline: one brand treatment per tile — the name reads at the blurb's own size */
.sponsor .sp-brand{font:inherit!important;font-weight:700!important;letter-spacing:inherit!important;text-transform:none!important;color:inherit!important;display:inline!important;}

/* op-money-columns: the supporters block ran one tile per row — 7 tiles,
   1269px at 390, 14% of the whole page. Two columns bring it to
   962px (24% shorter). Checked before writing: no new overflow, smallest mark still
   128px wide, longest blurb 2 lines, tile heights 145-277px.
   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.
   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-row), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .sponsor-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:16px!important}
    .sponsor-row > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-row > * *{min-width:0!important;max-width:100%}
    .sponsor-row img,.sponsor-row svg{max-width:100%;height:auto}

}

/* op-blurb-rows: money blurbs ran to 4 rows at 390, 578px of tier across
   7 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped. */
@media (max-width:640px){
  .sponsor-row .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:63px!important;min-height:0!important;overflow:hidden!important}
}

/* op-odd-tier-lead: .sponsor-row (7 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-row:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}
/* op-heading-levels */
h2:where(.rt-h3){text-wrap: balance;}
.card h2:where(.rt-h3){margin: 0px; font: 400 clamp(21px, 1.5vw, 27px)/1.16 var(--prose-face); letter-spacing: -0.015em; color: var(--ink); min-height: 2.32em;}
.card:hover h2:where(.rt-h3){color: var(--amber);}
.trio h2:where(.rt-h3){margin: 0px; font: 400 clamp(23px, 1.9vw, 34px)/1.16 var(--prose-face); letter-spacing: -0.015em;}
.trio a.card h2:where(.rt-h3){min-height: 0px;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.card > div.shot > img,
  a.strip > div.thumb > img,
  article.band.grid.prose > figure.fig-inset.ins > img,
  article.band.grid.prose > figure.fig-plate.ins.w > img,
  aside.endgrid.ins.w > figure.fig-plate > img,
  div.cat-open.w > figure.fig-plate > img,
  div.f.hero-lead > div.plate > img,
  div.g12.stack > div.shot > img,
  div.grid > figure.crop.f.fig-bleed > img,
  div.grid > figure.f.fig-bleed > img,
  div.w.well > div.shot > img,
  li > div.ce-shot > img,
  li.lead-entry > div.ce-shot > img){height:auto}
/* op-img-dims:end */
@media (min-width:660px) and (max-width:1023px){.sponsor-row.sponsor-row:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(380px,calc(50% - 8px)),1fr))!important;column-gap:16px!important;row-gap:16px!important;justify-content:stretch!important;align-items:stretch!important}.sponsor-row.sponsor-row > [data-partner]{flex:none!important;width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important}}