/* ==========================================================================
   Smallerik — "The Frontier"
   Palette (4 members, each with a job):
     ground  #F2EFE6   the inside field — EU jurisdiction, paper
     ink     #14161A   type, the line, and the whole outside field
     accent  #C6A700   ochre — the frontier mark, the dashed edge, the terminal
     second  #5B2A86   violet — whole panels and one full-bleed band per page
   ========================================================================== */

:root {
  --paper: #F2EFE6;
  --paper-2: #EAE5D9;
  --paper-3: #FBF8F0;
  --ink: #14161A;
  --ink-2: #3A3630;
  --ink-panel: #1B1E24;
  --violet: #5B2A86;
  --violet-2: #452066;
  --ochre: #C6A700;
  --ochre-light: #F0D77A;
  --rule: #D6D0C2;
  --rule-dark: #3A3F46;
  --quiet: #6B675E;
  --reverse: #FBF8F0;
  --reverse-quiet: #B4AF9F;

  --display: 'Petrona', Georgia, 'Times New Roman', serif;
  --text: 'Bitter', Georgia, 'Times New Roman', serif;

  /* the width system: prose measure · breakout · full bleed */
  --page: 1180px;
  --split: 58%;
  --gutter: 22px;
  --prose: 19px;
  --prose-lh: 1.72;
  --measure: 78ch;
  --cap: 340px;
  --seam: 3px;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--prose)/var(--prose-lh) var(--text);
  overflow-x: hidden;
}

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

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

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -0.028em; margin: 0; text-wrap: pretty; }

svg { display: block; }

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

.shell { max-width: var(--page); margin: 0 auto; }

/* --------------------------------------------------------------- the field */

.field {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 1000px) {
  .field {
    grid-template-columns: var(--split) var(--seam) minmax(0, 1fr);
  }
  .field > .seam { background: var(--ink); }
  .field.field--ochre > .seam { background: var(--ochre); }
}
.field > .seam { display: none; }
@media (min-width: 1000px) { .field > .seam { display: block; } }

.inside  { background: var(--paper); padding: 34px var(--gutter); min-width: 0; }
.outside { background: var(--ink); color: var(--reverse-quiet); padding: 34px var(--gutter); min-width: 0; }
.outside h1, .outside h2, .outside h3 { color: var(--reverse); }
.outside a { color: var(--ochre-light); }
.outside a:hover { color: var(--reverse); }

/* ------------------------------------------------------------------ header */

.masthead { border-bottom: var(--seam) solid var(--ink); }
.masthead .inside, .masthead .outside { padding-top: 26px; padding-bottom: 26px; }

.mast-brand { display: flex; align-items: center; gap: 16px; }
.mast-mark { color: var(--ochre); flex: 0 0 auto; }
.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(38px, 5.2vw, 68px);
  line-height: 0.9;
  letter-spacing: -0.042em;
  color: var(--reverse);
}
.mast-fields {
  margin-top: 18px;
  font: 500 12px/1 var(--text);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ochre);
}

.mast-line {
  font: 400 16px/1.5 var(--text);
  color: var(--ink-2);
  max-width: 46ch;
  margin: 0 0 20px;
}

.nav-row-1, .nav-row-2 { display: flex; flex-wrap: wrap; align-items: baseline; }
.nav-row-1 { gap: 8px 30px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.nav-row-2 { gap: 8px 26px; padding-top: 12px; }
.nav-row-1 a { font: 600 clamp(21px, 2vw, 29px)/1 var(--display); letter-spacing: -0.022em; color: var(--ink); }
.nav-row-2 a { font: 500 17px/1 var(--text); color: var(--ink); }
.nav-row-2 a.is-standing { color: var(--violet); }
.nav-row-2 a.is-quiet { color: var(--quiet); }
.nav-row-1 a[aria-current], .nav-row-2 a[aria-current] {
  border-bottom: 3px solid var(--ochre); padding-bottom: 4px;
}
.nav-item { display: inline-flex; align-items: center; gap: 9px; }
.nav-item .smark { color: var(--violet); flex: 0 0 auto; }
.nav-row-2 .nav-item .smark { color: var(--quiet); }

/* ------------------------------------------------------- homepage: opener */

.opener .inside { padding-top: 54px; padding-bottom: 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; }
.opener .outside { padding: 0; position: relative; background: var(--ink); }
.opener-photo { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.opener-plate {
  position: absolute; right: 0; top: 0; max-width: 26em;
  background: var(--ink); padding: 18px 22px;
  border-left: var(--seam) solid var(--ochre);
}
.opener-plate p { margin: 8px 0 0; font: 400 16px/1.5 var(--text); color: var(--reverse-quiet); }

.kicker {
  font: 500 12.5px/1 var(--text);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--violet);
  display: inline-flex; align-items: center; gap: 10px;
}
.kicker .smark { color: currentColor; }
.outside .kicker, .plate .kicker { color: var(--ochre-light); }

.opener h1 { font-size: clamp(40px, 5.6vw, 84px); line-height: 0.95; letter-spacing: -0.04em; margin: 22px 0 0; }
.opener h1 .drop { display: block; font-weight: 400; color: var(--violet); font-size: 0.7em; line-height: 1.02; margin-top: 14px; letter-spacing: -0.03em; }
.opener .standfirst { margin: 26px 0 0; font: 400 clamp(18px, 1.5vw, 22px)/1.6 var(--text); color: var(--ink-2); max-width: 40ch; }

.crossing {
  display: inline-flex; align-items: center; gap: 16px;
  font: 600 17px/1 var(--text);
}
.crossing .btn { background: var(--ochre); color: var(--ink); padding: 15px 22px; }
.crossing:hover { text-decoration: none; }
.crossing:hover .btn { background: var(--ink); color: var(--paper-3); }
.crossing .chev { color: var(--ink); }

/* -------------------------------------------------------------- band frame */

.band { border-top: var(--seam) solid var(--ink); }
.band-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 22px;
  padding: 0 0 22px;
}
.band-head h2 { font-size: clamp(28px, 3vw, 46px); line-height: 1.05; }
.band-head .band-rule { flex: 1 1 60px; height: 1px; background: var(--rule); }
.band-count { font: 500 13px/1 var(--text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--quiet); }
.outside .band-head .band-rule { background: var(--rule-dark); }
.outside .band-count { color: var(--reverse-quiet); }

.band-note { margin: 0; font: 400 17px/1.55 var(--text); color: var(--ink-2); max-width: 44ch; }
.outside .band-note { color: var(--reverse-quiet); }

/* ------------------------------------------- brussels: unequal sub-fields */

.uneven { display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .uneven { grid-template-columns: 1.55fr 1fr; grid-template-rows: auto auto; } }
.uneven > .u-lead { grid-row: span 2; }
.u-lead h3 { font-size: clamp(24px, 2.4vw, 38px); line-height: 1.08; margin: 18px 0 0; }
.u-lead p { margin: 12px 0 0; font: 400 18px/1.6 var(--text); color: var(--ink-2); }
.u-small h3 { font-size: 22px; line-height: 1.14; margin: 14px 0 0; }
.u-small p { margin: 9px 0 0; font: 400 16px/1.55 var(--text); color: var(--ink-2); }
.u-tiny h3 { font-size: 19px; line-height: 1.18; margin: 12px 0 0; }
.entry-link { color: var(--ink); }
.entry-link:hover { color: var(--violet); }

/* ------------------------------------------------------------ the one table */

.rows { display: flex; flex-direction: column; }
.rows > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding: 15px 0; border-bottom: 1px solid var(--rule);
}
.rows > div:last-child { border-bottom: 0; }
.rows .r-what { font: 400 17px/1.4 var(--text); }
.rows .r-num { font: 600 clamp(22px, 2vw, 30px)/1 var(--display); color: var(--violet); white-space: nowrap; }
.outside .rows > div { border-bottom-color: var(--rule-dark); }
.outside .rows .r-what { color: var(--reverse-quiet); }
.outside .rows .r-num { color: var(--ochre); }

/* ------------------------------------------------- the number at scale */

.numberband {
  position: relative; background: var(--violet); color: var(--reverse);
  border-top: var(--seam) solid var(--ink); overflow: hidden;
}
.numberband .nb-inner { position: relative; padding: 64px var(--gutter); max-width: 62ch; }
.numberband .nb-photo {
  position: absolute; inset: 0 0 0 auto; width: 40%; min-width: 260px;
  object-fit: cover; height: 100%;
}
.numberband .nb-fade {
  position: absolute; inset: 0 auto 0 0; width: 68%;
  background: linear-gradient(90deg, var(--violet) 0 78%, rgba(91,42,134,0) 100%);
}
.numberband .nb-num {
  font: 700 clamp(74px, 12vw, 190px)/0.84 var(--display);
  letter-spacing: -0.05em; color: var(--paper-3); margin: 20px 0 0;
}
.numberband p { margin: 26px 0 0; font: 400 clamp(18px, 1.6vw, 24px)/1.5 var(--text); }
.numberband .kicker { color: var(--ochre-light); }
.numberband a { color: var(--ochre-light); border-bottom: 2px solid var(--ochre-light); }
.numberband a:hover { color: var(--paper-3); border-bottom-color: var(--paper-3); text-decoration: none; }

/* ------------------------------------------------ full bleed, line gone */

.bleedband {
  border-top: var(--seam) solid var(--ink);
  background: var(--ink); color: var(--reverse-quiet);
  display: grid; grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 900px) { .bleedband { grid-template-columns: 1fr 44%; } }
.bleedband .bb-copy { padding: 60px var(--gutter); }
.bleedband .bb-fig { position: relative; min-height: 320px; height: 100%; }
.bleedband .bb-fig img { width: 100%; height: 100%; object-fit: cover; }
.bleedband .bb-num { font: 700 clamp(84px, 9vw, 200px)/0.82 var(--display); letter-spacing: -0.05em; color: var(--ochre); margin: 14px 0 0; }
.bleedband h2 { font-size: clamp(26px, 2.6vw, 42px); line-height: 1.06; margin: 20px 0 0; }
.bleedband p { margin: 18px 0 0; font: 400 18px/1.6 var(--text); max-width: 44ch; }

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

figure { margin: 0; }

.fig-cap {
  margin: 14px 0 0; min-width: 0;
  font: 400 17px/1.5 var(--text);
  color: var(--ink-2);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px;
}
.fig-cap .fig-text { flex: 1 1 20ch; min-width: 0; }
.fig-credit {
  flex: 0 1 auto; min-width: 0; max-width: 100%; margin-left: auto; overflow-wrap: anywhere;
  font: 400 15px/1.45 var(--text);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--quiet);
}
.outside .fig-cap { color: var(--reverse-quiet); }
.outside .fig-credit { color: var(--reverse-quiet); opacity: 0.82; }

/* one · bracketed: solid edge one side, dashed the other */
.fig--bracket .fig-img {
  border-left: var(--seam) solid var(--ink);
  border-right: var(--seam) dashed var(--ochre);
}
.fig--bracket .fig-cap { max-width: var(--cap); }
.outside .fig--bracket .fig-img { border-left-color: var(--ochre); }

/* two · crossing: starts at the line, runs off the edge */
.fig--cross .fig-img { border-left: var(--seam) solid var(--ochre); }
.fig--cross .fig-cap { max-width: 62ch; }

/* three · plated: on the violet panel, reversed */
.fig--plate { background: var(--violet); padding: 20px; }
.fig--plate .fig-cap { color: var(--paper-3); max-width: 52ch; }
.fig--plate .fig-credit { color: var(--ochre-light); }

/* four · full bleed */
.fig--bleed .fig-img { width: 100%; }
.fig--bleed .fig-cap { max-width: 68ch; padding: 0 var(--gutter); }

.fig-img { width: 100%; height: auto; }
.fig-img.is-tall { aspect-ratio: 4 / 5; object-fit: cover; }
.fig-img.is-wide { aspect-ratio: 16 / 9; object-fit: cover; }
.fig-img.is-panel { aspect-ratio: 8 / 5; object-fit: cover; }

.article-figure { margin: 0; }
.article-figure img { width: 100%; }
.article-figure figcaption { margin: 14px 0 0; font: 400 17px/1.5 var(--text); color: var(--ink-2); max-width: var(--cap); }
.article-figure figcaption .fig-credit { display: block; margin-top: 6px; margin-left: 0; }

.gallery { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.gallery figure figcaption { margin-top: 10px; font: 400 15px/1.45 var(--text); color: var(--quiet); }

.map-figure .map-slot { min-height: 320px; background: var(--paper-2); border-left: var(--seam) solid var(--ink); }
.map-figure figcaption { margin: 14px 0 0; font: 400 17px/1.5 var(--text); color: var(--ink-2); max-width: var(--cap); }

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

.article-head .inside { padding-top: 46px; padding-bottom: 40px; }
.article-head h1 { font-size: clamp(34px, 4.4vw, 74px); line-height: 0.98; letter-spacing: -0.04em; margin: 22px 0 0; }
.lead {
  margin: 24px 0 0;
  font: 400 clamp(19px, 1.55vw, 25px)/1.46 var(--text);
  color: var(--ink-2);
  max-width: 46ch;
}
.article-meta {
  margin: 26px 0 0; padding-top: 16px; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  font: 500 14px/1.4 var(--text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--quiet);
}
.article-meta a { color: var(--violet); }

.article-body { border-top: var(--seam) solid var(--ink); }

/* a spread: prose in the inside field, cargo in the outside field.
   the row's height is driven by the prose, so nothing can overlap. */
.spread { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1000px) {
  .spread { grid-template-columns: var(--split) var(--seam) minmax(0, 1fr); }
  .spread > .seam { background: var(--ink); }
}
.spread > .seam { display: none; }
@media (min-width: 1000px) { .spread > .seam { display: block; } }

.spread > .prose { background: var(--paper); padding: 0 var(--gutter); min-width: 0; }
.spread > .cargo { background: var(--ink); color: var(--reverse-quiet); padding: 34px var(--gutter); min-width: 0; }
.spread > .cargo:empty { padding: 0; }
.spread > .cargo h2, .spread > .cargo h3 { color: var(--reverse); }
.spread > .cargo a { color: var(--ochre-light); }

.prose > * { max-width: var(--measure); }
.prose p { margin: 0 0 24px; font-size: var(--prose); }
.prose > :first-child { margin-top: 34px; }
.prose > :last-child { margin-bottom: 40px; }
.prose h2 {
  font-size: clamp(25px, 2.3vw, 40px); line-height: 1.08;
  margin: 46px 0 18px;
}
.prose h2 .h-mark { color: var(--ochre); display: inline-block; vertical-align: 0.06em; margin-right: 12px; }
.prose h3 { font-size: 24px; line-height: 1.14; margin: 34px 0 14px; }
.prose a { border-bottom: 1px solid rgba(91,42,134,0.4); }
.prose a:hover { border-bottom-color: var(--ink); text-decoration: none; }

/* full-bleed interruption inside an article, no horizontal scroll */
.breaker {
  margin: 44px 0;
  border-top: var(--seam) solid var(--ink);
  border-bottom: var(--seam) solid var(--ink);
  background: var(--paper-2);
}
.breaker--violet { background: var(--violet); color: var(--paper-3); border-color: var(--violet-2); }
.breaker--ink { background: var(--ink); color: var(--reverse-quiet); }
.breaker-inner { padding: 40px var(--gutter); }
.breaker--violet .fig-cap { color: var(--paper-3); }
.breaker--violet .fig-credit { color: var(--ochre-light); }
.breaker--ink .fig-cap { color: var(--reverse-quiet); }

/* ------------------------------------------------------------- components */

.pullquote {
  margin: 0; padding: 0 0 0 22px;
  border-left: var(--seam) solid var(--ochre);
}
.pullquote p {
  margin: 0; font: 500 clamp(22px, 2vw, 30px)/1.32 var(--display);
  letter-spacing: -0.02em;
}

.blockquote { margin: 0; padding: 22px 24px; background: var(--paper-2); border-left: var(--seam) solid var(--ink); }
.blockquote p { margin: 0; font: 400 19px/1.6 var(--text); }
.blockquote cite { display: block; margin-top: 12px; font: 500 15px/1.4 var(--text); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--quiet); }
.outside .blockquote, .cargo .blockquote { background: var(--ink-panel); border-left-color: var(--ochre); }
.cargo .blockquote cite { color: var(--reverse-quiet); }

.callout {
  margin: 0; padding: 22px 24px;
  background: var(--violet); color: var(--paper-3);
  border-left: var(--seam) solid var(--ochre);
}
.callout > *:first-child { margin-top: 0; }
.callout > *:last-child { margin-bottom: 0; }
.callout p { margin: 0 0 12px; font: 400 18px/1.58 var(--text); }
.callout h3 { font: 500 12.5px/1 var(--text); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ochre-light); margin: 0 0 14px; }
.callout ul { margin: 0; padding-left: 20px; }
.callout li { margin: 0 0 9px; font: 400 17px/1.55 var(--text); }
.callout a { color: var(--ochre-light); }

.note {
  margin: 0; padding: 16px 0 0;
  border-top: 1px solid var(--rule);
  font: 400 16px/1.55 var(--text); color: var(--ink-2);
}
.cargo .note, .outside .note { border-top-color: var(--rule-dark); color: var(--reverse-quiet); }

.unit-head {
  font: 500 12.5px/1 var(--text); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--violet); margin: 0 0 16px;
  display: flex; align-items: center; gap: 10px;
}
.cargo .unit-head, .outside .unit-head, .breaker--ink .unit-head { color: var(--ochre); }
.breaker--violet .unit-head { color: var(--ochre-light); }

/* timeline — labels can be long multi-word phrases */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: grid; grid-template-columns: 1fr; gap: 2px 20px;
  padding: 13px 0 13px 20px; border-left: var(--seam) solid var(--rule);
  position: relative;
}
.timeline li::before {
  content: ""; position: absolute; left: -8px; top: 20px;
  width: 13px; height: var(--seam); background: var(--ochre);
}
@media (min-width: 620px) { .timeline li { grid-template-columns: minmax(9ch, 22ch) 1fr; } }
.t-when { font: 600 16px/1.4 var(--display); letter-spacing: 0.01em; color: var(--violet); }
.t-what { font: 400 17px/1.55 var(--text); min-width: 0; }
.cargo .timeline li, .outside .timeline li, .breaker--ink .timeline li { border-left-color: var(--rule-dark); }
.cargo .t-when, .outside .t-when, .breaker--ink .t-when { color: var(--ochre); }
.breaker--violet .timeline li { border-left-color: rgba(251,248,240,0.35); }
.breaker--violet .t-when { color: var(--ochre-light); }

/* stats */
.statrow { display: grid; gap: 2px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.statblock {
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px 18px; background: var(--paper-2);
}
.stat-num { font: 700 clamp(28px, 2.6vw, 42px)/0.95 var(--display); letter-spacing: -0.03em; color: var(--violet); }
.stat-label { font: 400 15px/1.45 var(--text); color: var(--ink-2); }
.cargo .statblock, .outside .statblock, .breaker--ink .statblock { background: var(--ink-panel); }
.cargo .stat-num, .outside .stat-num, .breaker--ink .stat-num { color: var(--ochre); }
.cargo .stat-label, .outside .stat-label, .breaker--ink .stat-label { color: var(--reverse-quiet); }
.breaker--violet .statblock { background: var(--violet-2); }
.breaker--violet .stat-num { color: var(--ochre-light); }
.breaker--violet .stat-label { color: var(--paper-3); }

/* tables */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.versus, .datatable {
  border-collapse: collapse; width: 100%; min-width: 460px;
  font: 400 17px/1.5 var(--text);
}
.versus th, .versus td, .datatable th, .datatable td {
  text-align: left; padding: 13px 16px 13px 0; border-bottom: 1px solid var(--rule); vertical-align: top;
}
.versus th, .datatable th {
  font: 600 14px/1.3 var(--text); letter-spacing: 0.12em; text-transform: uppercase;
  border-bottom: var(--seam) solid var(--ink); color: var(--ink);
}
.versus tbody th { font: 500 17px/1.5 var(--text); letter-spacing: 0; text-transform: none; border-bottom: 1px solid var(--rule); }
.versus td:last-child, .datatable td:last-child { padding-right: 0; }
.versus .v-in { color: var(--violet); font-weight: 600; }
.versus .v-out { color: var(--ink-2); }
.datatable caption, .versus caption {
  caption-side: bottom; text-align: left; padding-top: 14px;
  font: 400 15px/1.5 var(--text); color: var(--quiet);
}
.cargo .versus, .cargo .datatable, .outside .versus, .outside .datatable { color: var(--reverse-quiet); }
.cargo .versus th, .cargo .datatable th, .outside .versus th, .outside .datatable th { color: var(--reverse); border-bottom-color: var(--ochre); }
.cargo .versus td, .cargo .datatable td, .outside .versus td, .outside .datatable td { border-bottom-color: var(--rule-dark); }

/* charts */
.chart { margin: 0; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart figcaption { margin: 14px 0 0; font: 400 16px/1.5 var(--text); color: var(--ink-2); max-width: 56ch; }
.cargo .chart figcaption, .outside .chart figcaption { color: var(--reverse-quiet); }
.c-bar { fill: var(--violet); }
.c-bar-alt { fill: var(--ochre); }
.c-axis { stroke: var(--rule); stroke-width: 1; }
.c-lab { font: 500 13px/1 'Bitter', Georgia, serif; fill: var(--ink-2); }
.c-val { font: 600 14px/1 'Petrona', Georgia, serif; fill: var(--violet); }
.cargo .c-lab, .outside .c-lab { fill: var(--reverse-quiet); }
.cargo .c-val, .outside .c-val { fill: var(--ochre); }
.cargo .c-axis, .outside .c-axis { stroke: var(--rule-dark); }
.cargo .c-bar, .outside .c-bar { fill: var(--ochre); }
.cargo .c-bar-alt, .outside .c-bar-alt { fill: #7E5AA8; }
.c-line { fill: none; stroke: var(--violet); stroke-width: 3; }
.cargo .c-line, .outside .c-line { stroke: var(--ochre); }

/* cards & references */
.profile-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.profile-card { background: var(--paper-2); padding: 20px; border-left: var(--seam) solid var(--ink); }
.profile-card .p-photo { width: 84px; height: 84px; object-fit: cover; margin-bottom: 14px; }
.profile-card h3 { font-size: 22px; line-height: 1.15; }
.profile-card .p-role { margin: 5px 0 12px; font: 500 14px/1.4 var(--text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--violet); }
.profile-card p { margin: 0 0 10px; font: 400 16px/1.55 var(--text); color: var(--ink-2); }
.profile-card .p-links a { font: 500 16px/1.4 var(--text); }
.profile-card .p-attr { font: 400 14px/1.45 var(--text); color: var(--quiet); }
.profile-card.no-photo { border-left-color: var(--ochre); }
.cargo .profile-card, .outside .profile-card { background: var(--ink-panel); border-left-color: var(--ochre); }
.cargo .profile-card p, .outside .profile-card p { color: var(--reverse-quiet); }

.org-grid { display: grid; gap: 2px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.org-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px; background: var(--paper-2); color: var(--ink);
}
.org-card:hover { background: var(--ink); color: var(--paper-3); text-decoration: none; }
.org-logo { height: 30px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: 6px; }
.org-name { font: 600 19px/1.2 var(--display); }
.org-host { font: 400 14px/1.4 var(--text); letter-spacing: 0.06em; color: var(--quiet); word-break: break-word; }
.org-card:hover .org-host { color: var(--ochre-light); }
.org-card.no-logo { border-top: var(--seam) solid var(--ochre); }

.entity-ref { font-weight: 500; overflow-wrap: break-word; }
.entity-ref .ref-arrow { white-space: nowrap; }

.further-grid { display: grid; gap: 2px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.further-grid a {
  display: flex; flex-direction: column; gap: 10px; padding: 20px;
  background: var(--paper-2); color: var(--ink);
  font: 600 21px/1.18 var(--display); letter-spacing: -0.018em;
}
.further-grid a:hover { background: var(--ink); color: var(--paper-3); text-decoration: none; }
.further-grid a .f-sec { font: 500 12px/1 var(--text); letter-spacing: 0.2em; text-transform: uppercase; color: var(--violet); display: flex; align-items: center; gap: 8px; }
.further-grid a:hover .f-sec { color: var(--ochre-light); }

.related-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.related-links:empty { display: none; }
.related-links li a {
  display: block; padding: 16px 18px; background: var(--ink-panel); color: var(--paper-3);
  font: 600 20px/1.2 var(--display); letter-spacing: -0.016em;
}
.related-links li a:hover { background: var(--ochre); color: var(--ink); text-decoration: none; }

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

.cat-lead { display: grid; grid-template-columns: 1fr; }
.cat-openphoto { min-height: 300px; }
.cat-openphoto img { width: 100%; height: 100%; object-fit: cover; min-height: 300px; }

.cat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 48px; }
@media (min-width: 1100px) { .cat-list { gap: 56px; } }
.cat-list > li { min-width: 0; }
.cat-entry { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 720px) {
  .cat-entry { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
  .cat-entry--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
  .cat-entry--flip .cat-fig { order: 2; }
}
@media (min-width: 1500px) {
  .cat-entry { grid-template-columns: minmax(0, 420px) minmax(0, 1fr) minmax(0, 300px); }
  .cat-entry--flip { grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 420px); }
  .cat-entry--flip .cat-fig { order: 3; }
  .cat-entry--flip .cat-side { order: 1; }
}
.cat-fig img {
  width: 100%; aspect-ratio: 8 / 5; object-fit: cover;
  border-left: var(--seam) solid var(--ink); border-right: var(--seam) dashed var(--ochre);
}
.cat-fig .fig-credit { display: block; margin: 10px 0 0; }
.cat-body h3 { font-size: clamp(23px, 2.1vw, 34px); line-height: 1.1; margin: 10px 0 0; }
.cat-body p { margin: 12px 0 0; font: 400 18px/1.6 var(--text); color: var(--ink-2); }
.cat-side { font: 400 16px/1.55 var(--text); color: var(--quiet); border-top: 1px solid var(--rule); padding-top: 14px; }
.cat-list > li.is-lead .cat-body h3 { font-size: clamp(28px, 3vw, 46px); }
.cat-list > li.is-lead .cat-fig img { aspect-ratio: 16 / 9; }
@media (min-width: 720px) { .cat-list > li.is-lead .cat-entry { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1500px) { .cat-list > li.is-lead .cat-entry { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }

.sec-switch { display: flex; flex-wrap: wrap; gap: 2px; }
.sec-switch a {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 18px; background: var(--paper-2); color: var(--ink);
  font: 500 16px/1 var(--text);
}
.sec-switch a:hover, .sec-switch a[aria-current] { background: var(--ink); color: var(--paper-3); text-decoration: none; }
.sec-switch a[aria-current] { border-bottom: var(--seam) solid var(--ochre); }

/* ---------------------------------------------------------------- archive */

.archive-group { border-top: var(--seam) solid var(--ink); padding-top: 22px; margin-top: 44px; }
.archive-group:first-of-type { margin-top: 0; }
.archive-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 2px; }
.archive-list li a {
  display: grid; gap: 6px 24px; grid-template-columns: 1fr; align-items: baseline;
  padding: 16px 18px; background: var(--paper-2); color: var(--ink);
}
@media (min-width: 800px) { .archive-list li a { grid-template-columns: minmax(0, 26ch) minmax(0, 1fr); } }
.archive-list li a:hover { background: var(--ink); color: var(--paper-3); text-decoration: none; }
.archive-list .a-title { font: 600 21px/1.18 var(--display); letter-spacing: -0.018em; }
.archive-list .a-brief { font: 400 16px/1.5 var(--text); color: var(--ink-2); }
.archive-list li a:hover .a-brief { color: var(--reverse-quiet); }

/* expander (CSS only) */
.expander { margin: 0; }
.expander > summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 16px/1 var(--text); color: var(--violet);
  padding: 13px 0 0;
}
.expander > summary::-webkit-details-marker { display: none; }
.expander[open] > summary .chev { transform: rotate(90deg); }
.expander > summary .chev { transition: transform 0.15s; }

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

.colophon { background: var(--ink); color: var(--reverse-quiet); border-top: var(--seam) solid var(--ochre); }
.colophon-inner { padding: 48px var(--gutter) 54px; }
.colophon-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px; margin-bottom: 10px; }
.colophon-head h2 { font-size: clamp(24px, 2.2vw, 34px); color: var(--reverse); }
.colophon-note { margin: 0 0 30px; font: 400 17px/1.55 var(--text); max-width: 52ch; }
.colophon-group + .colophon-group { margin-top: 34px; }
.colophon-group > h3 {
  font: 500 12.5px/1 var(--text); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ochre); margin: 0 0 16px;
}

.sponsor-wall { display: grid; gap: 3px; grid-template-columns: repeat(auto-fit, 500px); grid-auto-rows: auto; grid-auto-flow: row; justify-content: start; }
.sponsor {
  grid-row: span 1;
  display: grid; grid-template-columns: 208px minmax(224px, 1fr); gap: 24px;
  align-items: start; align-content: start;
  padding: 22px; background: var(--ink-panel); color: var(--reverse-quiet);
}
.sponsor--wide { grid-row: span 1; }
.sponsor:hover { background: #23272E; text-decoration: none; }
.sponsor-mark {
  flex: 0 0 auto; width: 208px; height: 52px;
  display: flex; align-items: center; justify-content: flex-start;
}
.sponsor-mark img { max-height: 46px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.sponsor-copy { min-width: 0; }
.sponsor-name { display: block; font: 600 19px/1.2 var(--display); color: var(--reverse); white-space: nowrap; }
.sponsor-blurb { display: block; margin-top: 7px; font: 400 15px/1.5 var(--text); color: var(--reverse-quiet); }
@media (max-width: 1060px) {
  /* A fixed track, not minmax(): an auto-repeat count resolves from the MAX
     sizing function, so minmax(280px, 500px) fits only one 500px column here.
     At 280px the tile cannot hold mark + copy side by side, so it stacks. */
  .sponsor-wall { grid-template-columns: repeat(auto-fit, 280px); grid-auto-rows: auto; }
  .sponsor { grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; align-content: start; }
  .sponsor-mark { width: 100%; max-width: 236px; }
  .sponsor-name { white-space: normal; }
}
@media (max-width: 640px) {
  .sponsor-wall { grid-template-columns: 1fr; }
  .sponsor { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .sponsor-mark { width: 100%; max-width: 260px; }
  .sponsor-name { white-space: normal; }
}

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

.site-foot { background: var(--ink); color: var(--reverse-quiet); border-top: var(--seam) solid var(--ink); }
.site-foot .field { grid-template-columns: 1fr; }
@media (min-width: 1000px) { .site-foot .field { grid-template-columns: var(--split) var(--seam) minmax(0, 1fr); } }
.site-foot .inside, .site-foot .outside { background: var(--ink); padding: 46px var(--gutter); }
.site-foot .seam { background: var(--ochre); }
.site-foot .wordmark { font-size: clamp(30px, 3vw, 40px); }
.foot-line { margin: 20px 0 0; font: 400 17px/1.55 var(--text); max-width: 46ch; }
.foot-cols { display: grid; gap: 26px 46px; grid-template-columns: repeat(auto-fit, minmax(150px, auto)); justify-content: start; }
.foot-cols h3 { font: 500 12.5px/1 var(--text); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ochre); margin: 0 0 14px; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; }
.foot-cols li { margin: 0 0 9px; }
.foot-cols a { font: 400 17px/1.45 var(--text); color: var(--paper-3); }
.foot-cols a:hover { color: var(--ochre-light); }

/* --------------------------------------------------------- static pages */

.page-body .prose { padding-bottom: 20px; }

/* --------------------------------- breakpoints ABOVE the desktop cap */

@media (min-width: 1440px) {
  :root { --page: 1400px; --gutter: 34px; --prose: 20px; --measure: 80ch; --cap: 340px; }
}
@media (min-width: 1680px) {
  :root { --page: 1620px; --prose: 21px; --measure: 82ch; --cap: 380px; }
  /* the outside field gains a second column of figures and captions */
  .cargo--two { display: grid; gap: 26px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .cargo--two > .cargo-span { grid-column: span 2; }
  .band-head h2 { font-size: 50px; }
}
@media (min-width: 2000px) {
  :root { --page: 1900px; --gutter: 44px; --measure: 84ch; --cap: 420px; }
}
@media (min-width: 2400px) {
  :root { --page: 2260px; --split: 56%; --prose: 22px; --measure: 86ch; --cap: 460px; }
  .opener h1 { font-size: 96px; }
  .cargo--two { gap: 34px; }
}

/* ------------------------------------------- narrow: the fields stack */

@media (max-width: 999.98px) {
  .field > .inside, .field > .outside,
  .spread > .prose, .spread > .cargo { padding-left: var(--gutter); padding-right: var(--gutter); }
  .masthead { border-bottom: 0; }
  .masthead .outside { border-bottom: var(--seam) solid var(--ochre); }
  .spread > .cargo { border-top: var(--seam) solid var(--ochre); border-bottom: var(--seam) solid var(--ochre); margin: 8px 0 28px; }
  .spread > .cargo:empty { display: none; margin: 0; border: 0; }
  .opener .outside { min-height: 300px; }
  .opener-plate { position: static; max-width: none; border-left: 0; border-top: var(--seam) solid var(--ochre); }
  .numberband .nb-photo { position: static; width: 100%; min-width: 0; height: 260px; }
  .numberband .nb-fade { display: none; }
  .numberband .nb-inner { padding: 40px var(--gutter); }
  .site-foot .seam { height: var(--seam); background: var(--ochre); }
}
@media (max-width: 620px) {
  :root { --gutter: 18px; --prose: 18px; }
  .fig-cap { flex-direction: column; }
  .fig-credit { margin-left: 0; }
  .article-meta { gap: 8px 16px; }
}

/* ---------------------------- additions ---------------------------- */
.further-grid a img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-left: var(--seam) solid var(--ochre); margin-bottom: 4px;
}
.cat-fig a { display: block; }
.cat-fig a img { border-left: var(--seam) solid var(--ink); border-right: var(--seam) dashed var(--ochre); }
.u-lead .fig, .u-lead figure { margin-bottom: 6px; }
.article-head .outside, .cat-openphoto, .opener .outside { position: relative; }
.bleedband .bb-fig { position: relative; }
.bleedband .bb-fig .fig-credit { font-size: 14px; }
.numberband .nb-inner { max-width: min(62ch, 100%); }

/* a listing nested inside the inside field keeps two columns, not three */
.inside .cat-list .cat-side { display: none; }
@media (min-width: 720px) {
  .inside .cat-list .cat-entry { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
  .inside .cat-list .cat-entry--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 240px); }
}
@media (min-width: 1500px) {
  .inside .cat-list .cat-entry { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
  .inside .cat-list .cat-entry--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
  .inside .cat-list > li.is-lead .cat-entry { grid-template-columns: minmax(0, 1fr); }
}

/* styleguide only */
.sg-block { padding: 34px var(--gutter); border-top: var(--seam) solid var(--ink); }
.sg-block > h2 { font-size: 26px; margin-bottom: 6px; }
.sg-label { font: 500 12.5px/1 var(--text); letter-spacing: 0.2em; text-transform: uppercase; color: var(--quiet); margin: 26px 0 12px; }
.sg-dark { background: var(--ink); color: var(--reverse-quiet); }
.sg-narrow { max-width: 360px; border: 1px dashed var(--rule); padding: 14px; }

/* long credits wrap rather than push the page sideways */
.fig-cap .fig-text { overflow-wrap: break-word; }
.bleedband .bb-fig .fig-credit { max-width: calc(100% - 28px); }
@media (max-width: 999.98px) { .breaker { margin: 28px 0; } }

.outside a.wordmark, .outside a.wordmark:hover { color: var(--reverse); text-decoration: none; }

/* ---------------------------------------------------------------------
   Dark fields — ONE selector list covering every dark ground on the site.
   Components that set their own paper-ground colour were winning over the
   inherited value in .cargo / .bleedband / .colophon / .breaker--ink.
   --------------------------------------------------------------------- */
:is(.outside, .spread > .cargo, .bleedband, .colophon, .breaker--ink) .fig-cap,
:is(.outside, .spread > .cargo, .bleedband, .colophon, .breaker--ink) .fig-cap .fig-text,
:is(.outside, .spread > .cargo, .bleedband, .colophon, .breaker--ink) .article-figure figcaption,
:is(.outside, .spread > .cargo, .bleedband, .colophon, .breaker--ink) .chart figcaption,
:is(.outside, .spread > .cargo, .bleedband, .colophon, .breaker--ink) .band-note,
:is(.outside, .spread > .cargo, .bleedband, .colophon, .breaker--ink) .band-count,
:is(.outside, .spread > .cargo, .bleedband, .colophon, .breaker--ink) .cat-side,
:is(.outside, .spread > .cargo, .bleedband, .colophon, .breaker--ink) .stat-label {
  color: var(--reverse-quiet);
}
:is(.outside, .spread > .cargo, .bleedband, .colophon, .breaker--ink) .fig-credit,
:is(.outside, .spread > .cargo, .bleedband, .colophon, .breaker--ink) .datatable caption,
:is(.outside, .spread > .cargo, .bleedband, .colophon, .breaker--ink) .versus caption {
  color: var(--reverse-quiet);
  opacity: 1;
}
:is(.outside, .spread > .cargo, .bleedband, .colophon, .breaker--ink) .note {
  color: var(--reverse-quiet);
  border-top-color: var(--rule-dark);
}
/* Only BARE links recolour on a dark ground. Every link component that
   carries its own colour — the wordmark, cards, tiles, footer columns —
   is excluded, so this rule can never outrank the authored value. */
:is(.outside, .spread > .cargo, .bleedband, .colophon, .breaker--ink)
  a:not(.wordmark, .sponsor, .org-card, .crossing, .related-links a, .further-grid a, .sec-switch a, .archive-list a, .foot-cols a, .section-more) {
  color: var(--ochre-light);
}
:is(.outside, .spread > .cargo, .bleedband, .colophon, .breaker--ink)
  a:not(.wordmark, .sponsor, .org-card, .crossing, .related-links a, .further-grid a, .sec-switch a, .archive-list a, .foot-cols a, .section-more):hover {
  color: var(--reverse);
}
/* the violet panel keeps its own reversed pair */
.breaker--violet .fig-cap, .breaker--violet .fig-cap .fig-text, .breaker--violet .band-note { color: var(--paper-3); }
.breaker--violet .fig-credit, .breaker--violet a { color: var(--ochre-light); }
.fig--plate .fig-cap, .fig--plate .fig-cap .fig-text { color: var(--paper-3); }
.fig--plate .fig-credit { color: var(--ochre-light); opacity: 1; }
.fig--plate a { color: var(--ochre-light); }
.callout .fig-cap, .callout p, .callout li { color: var(--paper-3); }
/* the sponsor tile keeps its own two-tone pair inside the colophon */
.colophon .sponsor-name { color: var(--reverse); }
.colophon .sponsor-blurb { color: var(--reverse-quiet); }


/* -------------------------------------------------------------------------
   The frame. The field boundary already runs vertically (the seam) and
   horizontally (the band rules); these close it on the sides, so each band
   reads as a bounded cell rather than a stripe running off the screen.
   Full-bleed bands (the violet number, the bleedband, the breakers) are
   deliberately outside it — that is what full bleed means here.
   ------------------------------------------------------------------------- */
.shell {
  border-left: var(--seam) solid var(--ink);
  border-right: var(--seam) solid var(--ink);
}
.breaker-inner.shell, .nb-inner.shell, .bb-copy.shell {
  border-left: 0;
  border-right: 0;
}
.masthead { border-top: var(--seam) solid var(--ink); }
.site-foot .shell { border-bottom: var(--seam) solid var(--ochre); }

/* ---- the menu carries more weight, and the section marks lead it ---- */
.nav-row-1 { border-bottom: var(--seam) solid var(--ink); padding-bottom: 16px; }
.nav-row-1 a {
  font: 700 clamp(23px, 2.2vw, 34px)/1 var(--display);
  letter-spacing: -0.024em;
}
.nav-row-1 .nav-item { gap: 12px; }
.nav-row-1 .nav-item .smark {
  width: 27px; height: 27px;
  stroke-width: 2.4;
  color: var(--violet);
}
.nav-row-1 a:hover { text-decoration: none; color: var(--violet); }
.nav-row-1 a:hover .smark { color: var(--ochre); }
.nav-row-1 a[aria-current] .smark { color: var(--ochre); }
.nav-row-2 { padding-top: 14px; }
.nav-row-2 a { font: 600 17px/1 var(--text); letter-spacing: 0.04em; }

/* ---- the number band: the copy lifts off the photograph, the amount is plated ---- */
.numberband .nb-inner > p { text-shadow: 0 2px 18px rgba(20, 22, 26, 0.55); }
.numberband .nb-num {
  display: block;
  margin: 24px 0 0;
  padding: 0;
  line-height: 0.88;
  border: 0;
  box-shadow: none;
  /* the border is on the glyphs, not around them */
  -webkit-text-stroke: clamp(2px, 0.35vw, 5px) var(--ochre);
  paint-order: stroke fill;
  text-shadow: 0 14px 42px rgba(20, 22, 26, 0.5);
}

/* -------------------------------------------------------------------------
   Per-section accent. Two saturated members of the palette, assigned from
   content_plan's own section accents, plus a darkened ochre for the cases
   where the accent has to carry TEXT on paper (ochre at 15px would not).
   --accent      frame, rules, marks — decorative
   --accent-ink  text on the paper ground
   --accent-on   text on a filled accent chip
   ------------------------------------------------------------------------- */
.sec--brussels, .sec--the-numbers, .sec--the-apps {
  --accent: var(--violet); --accent-ink: var(--violet); --accent-on: var(--paper-3);
}
.sec--the-courts, .sec--the-stores {
  --accent: var(--ochre); --accent-ink: #6E5C00; --accent-on: var(--ink);
}

.sec.shell {
  border-top-color: var(--accent);
  border-left-color: var(--accent);
  border-right-color: var(--accent);
}
.sec .inside .kicker, .sec .inside .kicker .smark { color: var(--accent-ink); }
.sec .inside h3 .entry-link:hover { color: var(--accent-ink); }
.sec .outside .kicker, .sec .outside .kicker .smark,
.sec .cargo .kicker, .sec .bb-copy .kicker { color: var(--ochre-light); }

/* ---- the band head reads as a header, not a caption ---- */
.band-head { align-items: center; padding: 4px 0 26px; gap: 14px 22px; }
.band-head .kicker { font-size: 14px; letter-spacing: 0.24em; }
.band-head .kicker .smark { width: 25px; height: 25px; stroke-width: 2.4; }
.band-head .band-rule { height: var(--seam); background: var(--accent, var(--ink)); }
.band-head .band-count {
  background: var(--accent, var(--ink)); color: var(--accent-on, var(--paper-3));
  padding: 8px 14px; font-weight: 600; letter-spacing: 0.16em;
}
.sec .inside > h2 { letter-spacing: -0.032em; }

/* ---- the section's own way out, in the section's own colour ---- */
.sec a.section-more, a.section-more {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 15px 22px;
  background: var(--accent, var(--ink));
  color: var(--accent-on, var(--paper-3));
  font: 700 18px/1 var(--text); letter-spacing: 0.01em;
  border-bottom: 0;
}
.sec a.section-more:hover, a.section-more:hover {
  background: var(--ink); color: var(--paper-3); text-decoration: none;
}
.sec--the-courts a.section-more:hover, .sec--the-stores a.section-more:hover { background: var(--ink); color: var(--ochre-light); }
.bb-copy a.section-more { margin-top: 4px; }

/* ---- meta lines sit quieter than the caption they belong to ---- */
.fig-credit { font-size: 13px; letter-spacing: 0.1em; }
.cat-fig .fig-credit, .further-grid .fig-credit { font-size: 12.5px; }
.article-meta { font-size: 13px; }

/* ---- the masthead field fills top to bottom: label, wordmark, scope ---- */
.masthead .outside {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 26px; padding-top: 30px; padding-bottom: 30px;
}
.masthead .wordmark { font-size: clamp(44px, 6.4vw, 94px); }
.masthead .mast-mark svg { width: 62px; height: 62px; }
.masthead .mast-brand { gap: 20px; }
.mast-fields { margin-top: 0; order: -1; }
.mast-scope {
  margin: 0;
  font: 400 17px/1.55 var(--text);
  color: var(--reverse-quiet);
  max-width: 38ch;
}
@media (max-width: 999.98px) {
  .masthead .outside { gap: 18px; }
  .mast-scope { font-size: 16px; }
}

.opener-plate .fig-credit { font: 400 13px/1.45 var(--text); letter-spacing: 0.1em; }

/* ---- touch widths: every interactive target clears 44px ---- */
@media (max-width: 1060px) {
  .nav-row-1 a, .nav-row-2 a, .sec-switch a, .foot-cols a, .expander > summary {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .nav-row-1 { gap: 2px 26px; padding-bottom: 12px; }
  .nav-row-2 { gap: 2px 24px; padding-top: 8px; }
  .foot-cols li { margin-bottom: 2px; }
  .related-links li a { display: flex; align-items: center; min-height: 48px; }
  .further-grid a { min-height: 48px; }
  .crossing .btn { min-height: 48px; display: inline-flex; align-items: center; }
  .article-meta a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* The lead's row span and the two-column template must switch at the SAME
   breakpoint, or the band keeps two columns with nothing in the second row. */
@media (max-width: 699.98px) {
  .uneven > .u-lead { grid-row: auto; }
}

/* sp-mark-align: marks sit CENTRED in their box. Placement only — Design's size,
   padding, panel and object-fit are untouched. */
.sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto!important;margin-right:auto!important;display:block}
.sponsor .sp-logo,.sponsor-box{display:flex;align-items:center;justify-content:center}

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}
.sponsor:not(.lead-line){flex-basis:var(--sp-tile,232px)!important}
.colophon-head{flex-wrap:wrap!important}
.colophon-head > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sponsor-mark{flex-wrap:wrap!important}
.sponsor-mark > .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-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):not(.sponsor-box):not(.sp-logo):not(.sponsor__logo){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;}

/* 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-wall .sponsor.sponsor img{height:38px!important}

/* op-nav-collapse: this nav printed 203px 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 "rule-flank", 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 (18px measured) the button carries the build's
   gutter (22px) 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 (860px here), where the button appears and the nav starts closed.
   Folded with the "display" technique and marked with the "bars" icon — the mechanism
   is deliberately not identical across the fleet either. */
.nav-gate{display:none}
@media (max-width:860px){
  .nav-gate{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:auto;border:0;padding:10px 0;letter-spacing:.18em;margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}
  .nav-gate::before,.nav-gate::after{content:"";flex:1 1 auto;height:1px;background:currentColor;opacity:.4}
  .nav-gate-bars{width:15px;height:9px;flex:none;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;box-shadow:inset 0 3.5px 0 -1px currentColor}
  .inside > nav{display:none}
  .nav-gate-c:checked ~ .inside > nav{display:block}
  .inside:has(> .nav-gate){display:flow-root}
  .nav-gate:not(:has(~ .inside > nav)){display:none}
}

/* op-money-columns: the supporters block ran one tile per row — 8 tiles,
   1475px at 390, 9% of the whole page. Two columns bring it to
   1046px (29% shorter). Checked before writing: no new overflow, smallest mark still
   123px wide, longest blurb 5 lines, tile heights 247-278px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   Only the tier(s) that were one-per-row are touched (.sponsor-wall), 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-wall{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:3px!important}
    .sponsor-wall > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-wall > * *{min-width:0!important;max-width:100%}
    .sponsor-wall img,.sponsor-wall svg{max-width:100%;height:auto}
}
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); font-weight: 700; letter-spacing: -0.028em; margin: 0px; text-wrap: pretty;}
.outside h2:where(.rt-h3){color: var(--reverse);}
.cat-body h2:where(.rt-h3){font-size: clamp(23px, 2.1vw, 34px); line-height: 1.1; margin: 10px 0px 0px;}
.foot-cols h2:where(.rt-h3){font: 500 12.5px/1 var(--text); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ochre); margin: 0px 0px 14px;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div > figure.fig.fig--bracket > img.fig-img.is-panel,
  div.article-head.field.shell > div.outside > img.opener-photo,
  div.cargo > figure.fig.fig--bracket > img.fig-img.is-panel,
  div.cat-fig > a > img,
  div.cat-fig > figure > img.fig-img,
  div.outside > figure.fig.fig--bracket > img.fig-img.is-tall,
  div.outside > figure.fig.fig--cross > img.fig-img.is-panel,
  div.outside > figure.fig.fig--plate > img.fig-img.is-panel,
  div.u-lead > figure.fig.fig--bracket > img.fig-img.is-panel,
  figure.fig.fig--plate > a > img.fig-img.is-panel,
  main > section.numberband > img.nb-photo,
  nav.further-grid > a > img,
  section.bleedband.sec.sec--the-stores > div.bb-fig > img,
  section.field.opener.shell > div.outside > img.opener-photo,
  section.field.sec.sec--brussels > div.cat-openphoto.outside > img.opener-photo,
  section.field.sec.sec--the-apps > div.cat-openphoto.outside > img.opener-photo,
  section.field.sec.sec--the-courts > div.cat-openphoto.outside > img.opener-photo,
  section.field.sec.sec--the-numbers > div.cat-openphoto.outside > img.opener-photo,
  section.field.sec.sec--the-stores > div.cat-openphoto.outside > img.opener-photo,
  section.field.shell > div.outside > img.opener-photo){height:auto}
/* op-img-dims:end */

/* op-odd-tier-lead: money_slots changed a tier's size — .sponsor-wall (5 tiles) now show an ODD count on phones, so the lead tile takes the whole row (operator: "the 1st item in such rows to be 100% width, then split"). Parity-guarded: it steps aside again when the count is even. */
@media (max-width:640px){
  .sponsor-wall:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}
@media (min-width:660px) and (max-width:1439px){.sponsor-wall.sponsor-wall:has(> [data-partner]){grid-template-columns:repeat(auto-fill,minmax(min(280px,calc(50% - 6px)),1fr))!important;justify-content:stretch!important}.sponsor-wall.sponsor-wall > [data-partner]{width:auto!important;max-width:none!important}}