/* San Diego Surf Film Festival — Six Cities and a 1928 Cinema
   Palette roles: ground · ink · accent (marquee vermilion) · secondary (pacific teal) · flag
   Two saturated members, ~160deg apart in hue, each used at real area. */

:root {
  --ground: #0B0F11;
  --panel: #14191C;
  --panel-2: #0E1416;
  --ink: #F2ECE1;
  --ink-2: #C7C0B5;
  --ink-3: #A8B2B6;
  --ink-4: #7E888C;
  --rule: #223035;
  --rule-2: #2C3A3F;
  --accent: #E8471F;
  --secondary: #1FB8C4;
  --on-secondary: #06191C;

  --shell: 1180px;
  --breakout: 900px;
  --prose: 660px;
  --gutter: 20px;

  --body: 16.5px;
  --display: 'Big Shoulders Display', 'Oswald', 'Arial Narrow', sans-serif;
  --text: 'Sora', ui-sans-serif, system-ui, sans-serif;

  --band: 56px;
  --insert: 44px;
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-weight: 300;
  font-size: var(--body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: var(--secondary); text-decoration: none; overflow-wrap: anywhere; }
a:hover, a:focus-visible { color: var(--accent); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 0.96;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.05em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.u-hide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---------- shell + width system ---------- */

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding-inline: var(--gutter); }
.measure { width: 100%; max-width: min(var(--prose), 100%); margin-inline: auto; padding-inline: var(--gutter); }
.breakout { width: 100%; max-width: var(--breakout); margin-inline: auto; padding-inline: var(--gutter); }
.bleed { width: 100%; }

.kicker {
  font-family: var(--text);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
}
.kicker a { color: inherit; }
.kicker svg { width: 20px; height: 20px; flex: 0 0 auto; }

.eyebrow {
  font-family: var(--text);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--secondary);
  margin: 0;
}

/* ---------- signature device: the year numeral ---------- */

.yearmark {
  display: block;
  color: var(--accent);
  opacity: 0.9;
  width: 100%;
  height: auto;
  max-width: 520px;
}
.yearmark--watermark { color: var(--rule-2); opacity: 1; max-width: 132px; }
.yearmark text { font-family: var(--display); font-weight: 800; letter-spacing: -0.04em; }

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

.masthead { border-bottom: 1px solid var(--rule); position: relative; }
.masthead__bar { height: 5px; background: var(--accent); }
.masthead__inner {
  display: flex;
  padding-block: 18px 0;
  align-items: center;
}
.masthead__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(16px, 3.6vw, 52px);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  gap: 12px;
  align-items: center;
  white-space: nowrap;
}
.masthead__name a { color: inherit; }
.masthead__name svg.mark { width: clamp(28px, 4.4vw, 46px); height: auto; flex: 0 0 auto; }
.masthead__rule { height: 2px; background: var(--secondary); margin-top: 14px; }
.masthead__wm { display: none; }

.nav { padding-block: 12px 16px; }
.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
}
.nav__list a {
  color: var(--ink);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
}
.nav__list a:hover { color: var(--secondary); }
.nav__list svg { width: 20px; height: 20px; flex: 0 0 auto; }

.ic--the-circuit { color: #F2551F; }
.ic--the-films { color: #1FB8C4; }
.ic--the-camera { color: #EFB13A; }
.ic--the-scene { color: #4FC191; }
.band--teal .ic--the-films, .band--teal .ic--the-circuit { color: var(--on-secondary); }
.nav__list .nav__standing a { color: var(--ink-3); }

/* ---------- homepage lead ---------- */

.lead-band { position: relative; display: grid; min-height: clamp(430px, 74vh, 780px); }
.lead-band__img { grid-area: 1 / 1; position: relative; width: 100%; height: 100%; overflow: hidden; }
.lead-band__img img { width: 100%; height: 100%; object-fit: cover; }
.lead-band__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(2deg, rgba(11,15,17,0.97) 0%, rgba(11,15,17,0.88) 28%, rgba(11,15,17,0.4) 62%, rgba(11,15,17,0.06) 100%);
}
.lead-band__text { grid-area: 1 / 1; position: relative; align-self: end; padding-block: 30px; }
.lead-band h1 { font-size: clamp(34px, 8vw, 82px); line-height: 0.9; margin-top: 14px; }
.lead-band__dek {
  font-size: clamp(16px, 1.6vw, 21px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
  margin-top: 18px;
  font-weight: 300;
}
.tag {
  display: inline-block;
  background: var(--accent);
  color: var(--ink);
  padding: 5px 12px 4px;
  font-family: var(--text);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

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

.band { padding-block: var(--band); }
.band--panel { background: var(--panel-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.band--teal { background: var(--secondary); color: var(--on-secondary); }
.band--teal a { color: var(--on-secondary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.band--teal a:hover { color: #7A1200; }
.band--quiet { padding-block: 34px; }

.band__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 14px;
  margin-bottom: 28px;
}
.band--teal .band__head { border-bottom-color: rgba(6,25,28,0.32); }
.band__head h2 { font-size: clamp(25px, 3.4vw, 46px); }
.band__head p { margin: 0; }

/* ---------- entry cards (rooms, sections, curated run) ---------- */

.rooms { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; }
.room { display: flex; flex-direction: column; min-width: 0; }
.room__img { position: relative; aspect-ratio: 16 / 10; background: var(--panel); overflow: hidden; }
.room__img img { width: 100%; height: 100%; object-fit: cover; }
.room h3 { font-size: clamp(21px, 2.4vw, 34px); margin-top: 18px; font-weight: 700; }
.room h3 a { color: var(--ink); }
.room h3 a:hover { color: var(--secondary); }
.room p { color: var(--ink-2); margin-top: 11px; max-width: 62ch; }

.room--sm { display: grid; grid-template-columns: 108px 1fr; gap: 16px; align-items: start; }
.room--sm .room__img { aspect-ratio: 1 / 1; }
.room--sm h3 { font-size: 18px; margin-top: 0; line-height: 1.05; }
.room--sm p { font-size: 14px; margin-top: 7px; color: var(--ink-3); }
.rooms__stack { display: flex; flex-direction: column; gap: 26px; min-width: 0; }

.curated--row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.room--tile .room__img { aspect-ratio: 4 / 3; }
.room--tile h3 { font-size: clamp(16px, 1.5vw, 20px); margin-top: 12px; line-height: 1.06; font-weight: 700; }

.curated { display: grid; grid-template-columns: 1fr; gap: 30px; }
.curated .room--wide .room__img { aspect-ratio: 21 / 9; }
.curated .room--wide h3 { font-size: clamp(23px, 2.8vw, 38px); }

/* ---------- crop-mark drawing system ---------- */

.marks { position: relative; }
.marks::before, .marks::after {
  content: ""; position: absolute; width: 15px; height: 15px; pointer-events: none;
  border-color: var(--accent); border-style: solid; border-width: 0;
}
.marks::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.marks::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.marks--teal::before, .marks--teal::after { border-color: var(--secondary); }

/* ---------- figure system ---------- */

figure { margin: 0; }

figcaption { margin-top: 13px; }
.cap {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 84ch;
  margin: 0;
}
.credit {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-top: 6px;
}
.band--teal .cap { color: var(--on-secondary); }
.band--teal .credit { color: #17454B; }
.band--teal .yearmark { color: var(--on-secondary); opacity: 0.85; }

/* treatment 1 — full-bleed band, caption offset under the left of the measure */
.fig--bleed img { width: 100%; max-height: 78vh; object-fit: cover; }
.fig--bleed figcaption { padding-top: 16px; }

/* treatment 2 — matted plate with an inset hairline and drawn corner marks */
.fig--mat > .mat {
  padding: 10px;
  background: var(--panel-2);
  border: 1px solid var(--rule-2);
}
.fig--mat .mat > div { aspect-ratio: 4 / 3; overflow: hidden; background: var(--panel); }
.fig--mat img { width: 100%; height: 100%; object-fit: cover; }

/* treatment 3 — breakout plate with the caption in its own column beside it */
.fig--break { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.fig--break .plate { aspect-ratio: 16 / 9; overflow: hidden; background: var(--panel); }
.fig--break .plate img { width: 100%; height: 100%; object-fit: cover; }
.fig--break figcaption { margin-top: 0; }

/* treatment 4 — small inset, keyed with a teal bar, narrower than the measure */
.fig--inset { border-left: 3px solid var(--secondary); padding-left: 14px; }
.fig--inset .plate { aspect-ratio: 3 / 2; overflow: hidden; background: var(--panel); }
.fig--inset .plate img { width: 100%; height: 100%; object-fit: cover; }
.fig--inset .cap { font-size: 14px; max-width: 46ch; }

/* ---------- map ---------- */

.map-figure { }
.map-figure .map-slot {
  background: #0B0F12;
  border: 1px solid var(--rule-2);
  padding: 8px;
}
.map-figure svg { width: 100%; height: auto; display: block; }
.map-pin__dot { fill: var(--accent); }
.map-pin__label {
  font-family: var(--text);
  font-size: 15px;
  font-weight: 500;
  fill: var(--ink);
  letter-spacing: 0.02em;
  paint-order: stroke;
  stroke: rgba(11,15,18,0.85);
  stroke-width: 5px;
}
.map-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.map-legend li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding-block: 9px; border-top: 1px solid var(--rule); }
.map-legend li:last-child { border-bottom: 1px solid var(--rule); }
.map-legend__n { font-family: var(--display); font-weight: 800; font-size: 17px; line-height: 1.3; color: var(--accent); }
.map-legend__name { font-weight: 500; font-size: 14.5px; color: var(--ink); }
.map-legend__d { display: block; font-size: 13px; line-height: 1.45; color: var(--ink-4); margin-top: 2px; }
.map-legend a { color: var(--ink); }
.map-legend a:hover { color: var(--secondary); }
.map-key { display: flex; flex-direction: column; gap: 8px; }
.map-where { font-size: 14.5px; line-height: 1.55; color: var(--ink-3); margin: 0 0 8px; }
.map-pin__num { font-family: var(--display); font-weight: 800; font-size: 36px; fill: #0B0F11; text-anchor: middle; }
.map-pin__badge { fill: #E8471F; r: 26px; }
.map-pin__dot { fill: #E8471F; }
.map-note { font-family: var(--text); font-weight: 500; font-size: 34px; letter-spacing: 0.2em; text-transform: uppercase; fill: #2E4550; }
.map-scale-t { font-family: var(--text); font-size: 30px; fill: #7E888C; letter-spacing: 0.08em; }

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

.article { padding-bottom: var(--band); }
.article__head { padding-block: 30px 22px; }
.article__head h1 { font-size: clamp(31px, 6.4vw, 72px); line-height: 0.9; margin-top: 14px; }
.lead {
  font-size: clamp(17px, 1.7vw, 22px);
  line-height: 1.5;
  color: var(--ink);
  font-weight: 300;
  max-width: 56ch;
  margin: 20px 0 0;
}
.article__body {
  padding-top: 34px;
  max-width: var(--breakout);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.article__body > * {
  max-width: min(var(--prose), 100%);
  margin-inline: auto;
  margin-bottom: 1.05em;
  min-width: 0;
}
.article__body > .insert--wide { max-width: none; }
.article__body h2 {
  font-size: clamp(22px, 2.6vw, 34px);
  margin-top: 1.9em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  font-weight: 700;
}
.article__body p { font-size: inherit; }
.article__body em { font-style: italic; }
.article__body a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(31,184,196,0.45); }

.insert { margin-block: var(--insert); }
.insert:last-child { margin-bottom: 0; }

/* inserted units */
.callout {
  background: var(--panel-2);
  border-top: 2px solid var(--secondary);
  padding: 22px;
}
.callout h3, .unit h3 {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--ink);
}
.unit { }
.note { font-size: 15px; color: var(--ink-3); border-left: 3px solid var(--accent); padding-left: 14px; }

.pullquote { margin: 0; border-top: 2px solid var(--accent); border-bottom: 1px solid var(--rule); padding-block: 20px; }
.pullquote p { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.8vw, 38px); line-height: 1.02; text-transform: uppercase; margin: 0; }
.blockquote { margin: 0; padding-left: 18px; border-left: 3px solid var(--secondary); }
.blockquote p { font-size: 1.06em; }
.blockquote cite { display: block; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); font-style: normal; margin-top: 10px; }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.timeline li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px 20px;
  padding-block: 14px;
  border-top: 1px solid var(--rule);
}
.timeline li:last-child { border-bottom: 1px solid var(--rule); }
.t-when {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.1;
}
.t-what { font-size: 15px; color: var(--ink-2); line-height: 1.5; }

.deflist { margin: 0; display: grid; gap: 0; }
.deflist > div { padding-block: 13px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1fr; gap: 4px 20px; }
.deflist > div:last-child { border-bottom: 1px solid var(--rule); }
.deflist dt { font-weight: 500; color: var(--ink); font-size: 15px; }
.deflist dd { margin: 0; font-size: 15px; color: var(--ink-2); }

.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.statblock { background: var(--panel-2); padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.stat-num { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 4vw, 44px); line-height: 0.9; color: var(--secondary); }
.stat-label { font-size: 13.5px; color: var(--ink-3); line-height: 1.4; }

.tablewrap { overflow-x: auto; }
table.versus, table.datatable { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 460px; }
table.versus th, table.versus td, table.datatable th, table.datatable td {
  text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--ink-2);
}
table.versus thead th, table.datatable thead th {
  font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink); border-bottom: 2px solid var(--accent);
}
table.versus tbody th, table.datatable tbody th { color: var(--ink); font-weight: 500; }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.gallery .cap { font-size: 14px; max-width: 42ch; }
.gallery figcaption { margin-top: 11px; }

.unit-pair { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; }
.unit-pair > * { min-width: 0; }

/* related / further */
.article__foot { border-top: 1px solid var(--rule); margin-top: var(--band); padding-top: 26px; }
.related-links, .further-grid { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.related-links a, .further-grid a {
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.06;
  text-transform: uppercase; color: var(--ink);
  border-top: 2px solid var(--rule-2); padding-top: 12px;
}
.related-links a:hover, .further-grid a:hover { color: var(--secondary); border-top-color: var(--secondary); }
.related-links img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }

/* cards / references */
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.profile-card { background: var(--panel-2); border: 1px solid var(--rule); padding: 18px; }
.profile-card .p-photo { width: 72px; height: 72px; object-fit: cover; margin-bottom: 12px; }
.profile-card h3 { font-size: 20px; font-weight: 700; }
.profile-card .p-role { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 6px 0 10px; }
.profile-card p { font-size: 14.5px; color: var(--ink-2); }
.profile-card .p-links { margin-top: 10px; margin-bottom: 0; }
.org-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.org-card { display: grid; grid-template-columns: 1fr; gap: 4px; background: var(--panel-2); border: 1px solid var(--rule); padding: 14px; }
.org-name { font-family: var(--display); font-weight: 700; font-size: 19px; text-transform: uppercase; color: var(--ink); }
.org-host { font-size: 12.5px; color: var(--ink-4); letter-spacing: 0.06em; }
.entity-ref { white-space: nowrap; }

/* ---------- category page ---------- */

.cat-head { padding-block: 30px 24px; }
.cat-head h1 { font-size: clamp(31px, 6vw, 68px); line-height: 0.9; margin-top: 14px; }
.cat-head p { color: var(--ink-2); max-width: 58ch; margin: 18px 0 0; font-size: clamp(15px, 1.4vw, 18px); }
.cat-count { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-4); margin-top: 16px; }
.cat-opener { position: relative; height: clamp(220px, 34vh, 440px); overflow: hidden; }
.cat-opener img { width: 100%; height: 100%; object-fit: cover; }

.cat-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 40px; }
.cat-list > li { min-width: 0; }
.cat-entry { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; background: var(--panel-2); border: 1px solid var(--rule); padding: 16px; }
.cat-entry__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--panel); }
.cat-entry__img img { width: 100%; height: 100%; object-fit: cover; }
.cat-entry h2 { font-size: clamp(20px, 2.1vw, 28px); font-weight: 700; }
.cat-entry h2 a { color: var(--ink); }
.cat-entry h2 a:hover { color: var(--secondary); }
.cat-entry p { color: var(--ink-2); font-size: 15px; margin-top: 10px; max-width: 64ch; }
.cat-entry__body { min-width: 0; }
.cat-list > li.is-lead .cat-entry { grid-template-columns: 1fr; padding: 18px; }
.cat-list > li.is-lead .cat-entry__img { aspect-ratio: 21 / 9; }
.cat-list > li.is-lead h2 { font-size: clamp(25px, 3.2vw, 42px); }

.sectionhub { display: grid; grid-template-columns: 1fr; gap: 26px; }
.hubcard { background: var(--panel-2); border: 1px solid var(--rule); border-top: 3px solid var(--secondary); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.hubcard h2 { font-size: clamp(21px, 2.3vw, 30px); font-weight: 700; }
.hubcard h2 a { color: var(--ink); }
.hubcard p { color: var(--ink-2); font-size: 15px; margin: 0; }
.hubcard ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.hubcard ul a { color: var(--ink-2); }
.hubcard ul a:hover { color: var(--secondary); }

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

.colophon { border-top: 1px solid var(--rule); background: var(--panel-2); }
.colophon__inner { padding-block: 30px; }
.colophon h2 { font-family: var(--text); font-weight: 500; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-4); margin: 0 0 4px; }
.colophon__note { font-size: 14px; color: var(--ink-3); margin: 0 0 20px; max-width: 60ch; }
.colophon__run { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.colophon__roll { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 16px; border-top: 1px solid var(--rule); }
.sponsor {
  flex: 0 0 236px;
  width: 236px;
  min-height: 62px;
  display: flex;
  align-items: center;
  padding: 12px 14px;
  background: #070A0B;
  border: 1px solid var(--rule);
}
.sponsor:hover { border-color: var(--secondary); }
.sponsor-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.06;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.sponsor:hover .sponsor-name { color: var(--secondary); }
.sponsor.feat { border-left: 3px solid var(--accent); }

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

.footer { border-top: 5px solid var(--accent); background: var(--panel-2); }
.footer__inner {
  padding-block: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
}
.footer__name { font-family: var(--display); font-weight: 800; font-size: 19px; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.footer__name a { color: var(--ink); }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer__links a { font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; min-height: 44px; }
.footer__links a:hover { color: var(--secondary); }

/* ---------- 768px ---------- */

@media (min-width: 768px) {
  :root { --gutter: 28px; --band: 72px; --insert: 52px; }
  .masthead__inner { padding-block: 26px 0; }
  .nav__list { gap: 12px 28px; }
  .nav__list a { font-size: 13px; }
  .rooms { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 40px; }
  .curated { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
  .curated .room--wide { grid-column: 1 / -1; }
  .fig--break { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 24px; }
  .timeline li { grid-template-columns: minmax(120px, 210px) minmax(0, 1fr); }
  .deflist > div { grid-template-columns: minmax(140px, 240px) minmax(0, 1fr); }
  .cat-entry { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 22px; }
  .cat-list > li.is-lead .cat-entry { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .sectionhub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__inner { padding-block: 24px; flex-wrap: nowrap; }
  .footer__links a { min-height: 24px; }
  .map-pin__num { font-size: 26px; }
  .map-pin__badge { r: 19px; }
  .map-note { font-size: 26px; }
  .map-scale-t { font-size: 22px; }
  .curated--row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .figcap-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
  .figcap-row .credit { margin-top: 0; }
  .article__body > .fig--inset {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    column-gap: 22px;
    align-items: start;
  }
  .article__body > .fig--inset > figcaption { margin-top: 0; }
  .map-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 30px; align-items: start; }
  .unit-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 1024px ---------- */

@media (min-width: 1024px) {
  :root { --shell: 1000px; --breakout: 900px; --prose: 660px; --gutter: 32px; --band: 84px; }
  .masthead__inner { padding-block: 30px 0; }
  .lead-band { min-height: clamp(480px, 78vh, 820px); }
  .sectionhub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 1280px ---------- */

@media (min-width: 1280px) {
  :root { --shell: 1240px; --breakout: 1000px; --prose: 700px; --body: 17px; --band: 96px; --insert: 56px; }
  .curated { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .curated .room--wide { grid-column: 1 / 3; }
  .cat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; }
  .cat-list > li.is-lead { grid-column: 1 / -1; }
  .cat-entry { grid-template-columns: 1fr; }
  .cat-list > li.is-lead .cat-entry { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 26px; }
  .sectionhub { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .masthead__wm { display: block; position: absolute; right: 24px; top: 12px; }
}

/* ---------- 1600px — the article gains a marginalia column ---------- */

@media (min-width: 1600px) {
  :root { --shell: 1480px; --breakout: 1200px; --prose: 760px; --body: 18px; --band: 112px; --insert: 64px; --gutter: 40px; }
  .article .measure, .article__head .measure { max-width: var(--breakout); }
  .article__head h1 { max-width: 26ch; }
  .cat-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px; }
  .cat-list > li.is-lead { grid-column: 1 / -1; }
  .rooms { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 56px; }
  .fig--bleed img { max-height: 82vh; }
}

/* ---------- 1920px — wider still, three-column stat rows, bigger device ---------- */

@media (min-width: 1920px) {
  :root { --shell: 1760px; --breakout: 1380px; --prose: 820px; --body: 19px; --band: 128px; }
  .yearmark { max-width: 720px; }
  .lead-band h1 { font-size: clamp(60px, 5.4vw, 104px); }
  .cat-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px; }
  .cat-list > li.is-lead .cat-entry { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

/* ---------- 2560px — section openers go true full-bleed with the panel over them ---------- */

@media (min-width: 2560px) {
  :root { --shell: 2200px; --breakout: 1700px; --prose: 900px; --body: 20px; --band: 150px; --gutter: 56px; }
  .yearmark { max-width: 940px; }
  .cat-opener { height: 560px; }
  .cat-head { margin-top: -140px; position: relative; }
  .cat-head__panel { background: linear-gradient(180deg, rgba(11,15,17,0) 0%, rgba(11,15,17,0.9) 46%); padding-top: 90px; }
  .lead-band { min-height: 900px; }
  .curated { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .curated .room--wide { grid-column: 1 / 3; }
}

@media print {
  body { background: #fff; color: #000; }
  .nav, .colophon { display: none; }
}

/* 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}
.colophon__run{flex-wrap:wrap!important}
.colophon__run > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.colophon__roll{flex-wrap:wrap!important}
.colophon__roll > .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}

/* MAPKIT_BEGIN — injected real geodata; pins are links */
.map-slot{padding:0;background:none!important;border:0!important;display:flex;align-items:center;justify-content:center;min-height:0!important}
.map-slot>svg.mapkit{width:100%!important;max-width:100%;height:auto;max-height:none;margin:0 auto}
.map-slot{width:100%}
.map-slot{aspect-ratio:auto!important;height:auto!important}
.map-slot::after,.map-slot::before{content:none!important;display:none!important}
.map-figure figcaption{}
.mapkit-panels{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:16px;width:100%}
.mapkit-panels>svg.mapkit{width:100%;height:auto;display:block}
@media (max-width:700px){.mapkit-panels{grid-template-columns:minmax(0,1fr)}}
.mapkit__pin{cursor:pointer}
.mapkit__pin text{paint-order:stroke;stroke:#0B0F12;stroke-width:3px;stroke-linejoin:round}
.mapkit__pin:hover circle{r:9.1}
.mapkit__pin:hover text{font-weight:700}
/* MAPKIT_END */

/* op-nav-collapse: this nav printed 180px of stacked links at 390 before any content
   (7 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-pill", 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 (20px measured) the button carries the build's
   gutter (20px) 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 "max-height" technique and marked with the "dots" icon — the mechanism
   is deliberately not identical across the fleet either. */
.menu-switch{display:none}
@media (max-width:900px){
  .menu-switch{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:1.5px solid currentColor;border-radius:999px;padding:10px 22px;margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

  .menu-switch-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}
  .nav{max-height:0;overflow:hidden;padding-block:0;border-top-width:0;border-bottom-width:0;transition:max-height .28s ease}
  .menu-switch-c:checked ~ .nav{max-height:220vh;padding-block:revert;border-top-width:revert;border-bottom-width:revert}
  .shell:has(> .menu-switch){display:flow-root}
  .menu-switch:not(:has(~ .nav)){display:none}
}

/* op-money-columns: the supporters block ran one tile per row — 7 tiles,
   400px at 390, 4% of the whole page. Two columns bring it to
   266px (34% shorter). Checked before writing: no new overflow, smallest mark still
   Nonepx wide, longest blurb 2 lines, tile heights 46-66px.
   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 (.colophon__run, .colophon__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){
  .colophon__run{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:12px!important}
    .colophon__run > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .colophon__run > * *{min-width:0!important;max-width:100%}
    .colophon__run img,.colophon__run svg{max-width:100%;height:auto}
  .colophon__roll{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:12px!important}
    .colophon__roll > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .colophon__roll > * *{min-width:0!important;max-width:100%}
    .colophon__roll img,.colophon__roll svg{max-width:100%;height:auto}

}

/* op-odd-tier-lead: .colophon__roll (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){
  .colophon__roll:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); font-weight: 800; letter-spacing: -0.005em; line-height: 0.96; text-transform: uppercase; margin: 0px; text-wrap: balance;}
.unit h2:where(.rt-h3){font-size: 19px; font-weight: 700; margin: 0px 0px 14px; color: var(--ink);}
h2.rt-h3.rt-h3{height:18.2344px;padding-bottom:0px;border-bottom-width:0px;border-bottom-style:none;border-bottom-color:rgb(242, 236, 225)}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.cat-entry > div.cat-entry__img.marks > img,
  article.room > div.marks.room__img > img,
  article.room.room--sm > div.marks.room__img > img,
  article.room.room--tile > div.marks.room__img > img,
  article.room.room--wide > div.marks.room__img > img,
  div.marks.marks--teal.mat > div > img,
  div.marks.mat > div > img,
  figure > div.marks.marks--teal.room__img > img,
  figure.article-figure > div.marks.marks--teal.plate > img,
  figure.article-figure.fig--break.insert > div.marks.marks--teal.plate > img,
  figure.article-figure.fig--inset.insert > div.plate > img,
  li > a > img,
  main > div.cat-opener > img,
  main.article > figure.article-figure.fig--bleed > img,
  section.lead-band > div.lead-band__img > img){height:auto}
/* op-img-dims:end */

/* op-grow-same-size: an added partner would have wrapped onto a new row ALONE and stretched across the grid (flex rows that grow). Same minimum (basis 220px, min-width min(220px, 100%)), same columns at every width, a short row keeps its siblings' size — applied at the moment of adding, as the operator chose (2026-09-23). Phones keep their own rules. */
@media (min-width:641px){
  div.colophon__roll{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important}
}
/* op-grow-same-size:end */