/* ============================================================
   ARIADNE ★ EU — "The Atlas" palette (2C)
   CSS contract implementing the canonical Palette Spec.
   Cartographic ink · deep navy paper · gold thread · dashed lines
   HTML + CSS + inline SVG only. Zero JS.
   ============================================================ */

:root {
  /* tokens */
  --paper: #10233f;        /* page background        */
  --paper-deep: #0b1a30;   /* recessed panels        */
  --panel: #16294a;        /* raised panels          */
  --ink: #c3d1e6;          /* body text              */
  --ink-strong: #f2f5fa;   /* headings               */
  --ink-soft: #a9bcd8;     /* standfirst / secondary */
  --muted: #7e94b5;        /* captions, metadata     */
  --faint: #5f7699;        /* legal, footnotes       */
  --line: #33507a;         /* dashed rules           */
  --accent: #f0c548;       /* gold thread            */
  --accent-bright: #ffd970;
  --good: #7ec8a2;         /* pros                   */
  --bad: #d98a8a;          /* cons                   */

  --serif: 'Spectral', Georgia, serif;
  --mono: 'Space Mono', 'Courier New', monospace;

  /* type scale */
  --fs-body: 21px;
  --fs-note: 17px;
  --fs-caption: 12px;
  --fs-h2: 34px;
  --fs-h3: 25px;
  --fs-lead: 24px;
  --fs-quote: 27px;
  --fs-stat: 52px;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: 1.65;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-bright); }
::selection { background: rgba(240, 197, 72, .25); }

h2, h3 { color: var(--ink-strong); font-family: var(--serif); line-height: 1.15; text-wrap: balance; }
h2 { font-size: var(--fs-h2); font-weight: 600; margin: 2.2em 0 .5em; }
h3 { font-size: var(--fs-h3); font-weight: 600; margin: 1.8em 0 .4em; }
h2:first-child, h3:first-child { margin-top: 0; }

p { margin: 0 0 1.1em; }
strong { color: var(--ink-strong); }
em { color: var(--ink-soft); }

ul, ol { margin: 0 0 1.3em; padding-left: 1.4em; }
li { margin-bottom: .45em; }
li::marker { color: var(--accent); font-family: var(--mono); }

figcaption {
  font-family: var(--mono);
  font-size: var(--fs-caption);
  letter-spacing: .06em;
  color: var(--muted);
  padding: 12px 16px;
  border-top: 1px dashed var(--line);
}

/* ============================================================
   TEXT / STRUCTURE
   ============================================================ */

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: 1.4em;
}

.pullquote {
  margin: 2em 0;
  padding: 8px 0 8px 34px;
  border-left: 3px solid var(--accent);
}
.pullquote p, .pullquote {
  font-style: italic;
  font-size: var(--fs-quote);
  line-height: 1.45;
  color: #e8eef7;
}
.pullquote p { margin: 0; }
.pullquote footer, .pullquote cite {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: var(--fs-caption);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 14px;
}

.blockquote {
  margin: 2em 0;
  padding: 26px 30px;
  background: var(--paper-deep);
  border: 1px dashed var(--line);
}
.blockquote p { font-size: 22px; line-height: 1.55; color: #e8eef7; margin: 0; }
.blockquote cite, .blockquote footer {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: var(--fs-caption);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 14px;
}

.callout {
  border-left: 3px solid var(--accent);
  background: var(--panel);
  padding: 22px 26px;
  margin: 2em 0;
  font-size: 19px;
  line-height: 1.6;
  color: #dce4ef;
}
.callout p { margin: 0; }
.callout p + p { margin-top: .8em; }
.callout strong { color: var(--accent); }

.note {
  font-size: var(--fs-note);
  color: var(--muted);
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
  padding: 12px 0;
  margin: 1.6em 0;
}
.note::before {
  content: 'N.B. ';
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--accent);
}

/* ============================================================
   DATA / COMPARISON — tables share a cartographic ledger look
   ============================================================ */

table.versus, table.datatable, table.ranktable,
.datatable table, .versus table {
  width: 100%;
  border-collapse: collapse;
  border: 1px dashed var(--line);
  margin: 2em 0;
  font-size: 18px;
  line-height: 1.5;
}
div.datatable, div.versus { margin: 2em 0; }
div.datatable table, div.versus table { margin: 0; }

.versus caption, .datatable caption, .ranktable caption {
  caption-side: top;
  text-align: left;
  font-family: var(--mono);
  font-size: var(--fs-caption);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px dashed var(--line);
  border-bottom: none;
  padding: 14px 22px;
}

.versus th, .datatable th, .ranktable th,
.datatable table th, .versus table th {
  font-family: var(--mono);
  font-size: var(--fs-caption);
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 14px 22px;
  border-bottom: 1px dashed var(--line);
}

.versus td, .datatable td, .ranktable td,
.datatable table td, .versus table td {
  padding: 16px 22px;
  border-top: 1px dashed var(--line);
  vertical-align: top;
  color: var(--ink);
}
.versus tbody tr:hover td, .datatable tbody tr:hover td, .ranktable tbody tr:hover td { background: var(--panel); }

.versus td:first-child, .datatable td:first-child, .ranktable td:nth-child(2),
.datatable table td:first-child { color: var(--ink-strong); font-weight: 600; }

/* versus: gold column heads face off */
.versus thead th { color: var(--accent); font-weight: 700; }
.versus thead th:first-child { color: var(--muted); font-weight: 400; }

/* ranktable: big mono rank number */
.ranktable td:first-child {
  font-family: var(--mono);
  font-size: 22px;
  color: var(--accent);
  width: 56px;
}

/* ---------- stats ---------- */
.statblock {
  display: flex;
  align-items: baseline;
  gap: 24px;
  border: 1px dashed var(--line);
  padding: 26px 30px;
  margin: 2em 0;
}
.statrow {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 16px;
  margin: 2em 0;
}
.statrow .statblock { margin: 0; flex-direction: column; align-items: flex-start; gap: 10px; }

/* the big number — every naming variant Sonnet emits */
.statblock .stat-num, .statblock .stat-number,
.statblock .stat-figure, .statblock .stat {
  font-family: var(--mono);
  font-size: var(--fs-stat);
  line-height: 1;
  color: var(--accent);
}
.statblock .stat-label, .statblock .label {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.statblock p { margin: 0; font-size: 19px; color: var(--ink-soft); }
.statblock p strong { font-family: var(--mono); font-size: 34px; color: var(--accent); margin-right: 10px; }

/* ---------- pros / cons ---------- */
.proscons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px dashed var(--line);
  margin: 2em 0;
}
.proscons .pros { border-right: 1px dashed var(--line); }
.proscons .pros, .proscons .cons { padding: 24px 28px; }
.proscons h4 {
  font-family: var(--mono);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.proscons .pros h4 { color: var(--good); }
.proscons .cons h4 { color: var(--bad); }
.proscons ul { list-style: none; padding: 0; margin: 0; font-size: 18px; }
.proscons li { padding-left: 26px; position: relative; margin-bottom: .7em; }
.proscons .pros li::before { content: '+'; position: absolute; left: 0; font-family: var(--mono); color: var(--good); }
.proscons .cons li::before { content: '−'; position: absolute; left: 0; font-family: var(--mono); color: var(--bad); }

/* ============================================================
   MEDIA / FIGURES — every plate gets a dashed frame + PL. label
   ============================================================ */

.article-figure, .place-figure, .map-figure {
  margin: 2em 0;
  border: 1px dashed var(--line);
}
.article-figure img, .place-figure img {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  display: block;
  filter: saturate(.85) contrast(1.03);
}

.place-figure { position: relative; }
.place-figure figcaption::before, .map-figure figcaption::before {
  content: 'PL. — ';
  color: var(--accent);
  letter-spacing: .12em;
}

.map-figure svg { display: block; width: 100%; height: auto; background: var(--paper-deep); }

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 2em 0;
}
.gallery figure { margin: 0; border: 1px dashed var(--line); }
.gallery img { width: 100%; height: 200px; object-fit: cover; display: block; filter: saturate(.85); }
.gallery figcaption { padding: 10px 14px; }

.brand-logo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
  padding: 26px 8px;
  margin: 2em 0;
}
.brand-logo { height: 40px; width: auto; opacity: .75; filter: grayscale(1) brightness(1.6); }
.brand-logo:hover { opacity: 1; filter: none; }

/* ============================================================
   RICH COMPONENTS
   ============================================================ */

/* ---------- timeline: a route plotted down the chart ---------- */
.timeline { list-style: none; padding: 0; margin: 2em 0; }
.timeline li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 26px;
  padding: 0 0 30px 0;
  position: relative;
  margin: 0;
}
.timeline li::before {           /* route line */
  content: '';
  position: absolute;
  left: 130px;
  top: 12px;
  bottom: -4px;
  border-left: 1px dashed var(--line);
}
.timeline li:last-child::before { display: none; }
.timeline li::after {            /* waypoint */
  content: '';
  position: absolute;
  left: 125px;
  top: 6px;
  width: 9px;
  height: 9px;
  border: 1px solid var(--accent);
  background: var(--paper);
  transform: rotate(45deg);
}
.timeline .t-when {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--accent);
  text-align: right;
  padding-right: 34px;
  padding-top: 2px;
}
.timeline .t-what { font-size: 19px; color: var(--ink); padding-left: 34px; }

/* ---------- profile card ---------- */
.profile-card {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 0;
  border: 1px dashed var(--line);
  margin: 2em 0;
  background: var(--paper-deep);
}
.profile-card .p-photo {
  width: 150px;
  height: 100%;
  min-height: 170px;
  object-fit: cover;
  display: block;
  border-right: 1px dashed var(--line);
  filter: saturate(.85);
}
.profile-card h3 { grid-column: 2; margin: 22px 26px 0; font-size: 24px; }
.profile-card .p-role {
  grid-column: 2;
  font-family: var(--mono);
  font-size: var(--fs-caption);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 6px 26px 10px;
}
.profile-card p { grid-column: 2; font-size: 18px; margin: 0 26px 22px; color: var(--ink-soft); }
.profile-card .p-role + p { margin-top: 0; }

/* ---------- steps: numbered bearings ---------- */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 2em 0; border: 1px dashed var(--line); }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: baseline;
  margin: 0;
  padding: 20px 26px 20px 0;
}
.steps li + li { border-top: 1px dashed var(--line); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 20px;
  color: var(--accent);
  text-align: center;
}

/* ---------- checklist ---------- */
.checklist { list-style: none; padding: 0; margin: 2em 0; }
.checklist li { padding: 10px 0 10px 40px; position: relative; border-bottom: 1px dashed var(--line); margin: 0; }
.checklist li:first-child { border-top: 1px dashed var(--line); }
.checklist li::before {
  content: '✓';
  position: absolute;
  left: 6px;
  font-family: var(--mono);
  color: var(--accent);
}

/* ---------- FAQ (CSS-only, details/summary) ---------- */
.faq { border: 1px dashed var(--line); margin: 2em 0; }
.faq details + details { border-top: 1px dashed var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 60px 20px 26px;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink-strong);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute;
  right: 26px;
  top: 18px;
  font-family: var(--mono);
  font-size: 22px;
  color: var(--accent);
}
.faq details[open] summary::after { content: '−'; }
.faq details[open] summary { border-bottom: 1px dashed var(--line); background: var(--panel); }
.faq details p { padding: 18px 26px; margin: 0; font-size: 19px; color: var(--ink-soft); }

/* ---------- tabs (CSS radio, zero JS) ----------
   shape: .tabs > (input[type=radio] + label)×N + .tab-panel×N   */
.tabs { border: 1px dashed var(--line); margin: 2em 0; display: flex; flex-wrap: wrap; }
.tabs > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.tabs > label {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 16px 24px;
  cursor: pointer;
  border-right: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
}
.tabs > label:hover { color: var(--accent); }
.tabs .tab-panel { display: none; width: 100%; order: 1; padding: 24px 26px; font-size: 19px; }
.tabs .tab-panel p { margin: 0; }
.tabs .tab-panel p + p { margin-top: .8em; }
.tabs > input:nth-of-type(1):checked ~ label:nth-of-type(1),
.tabs > input:nth-of-type(2):checked ~ label:nth-of-type(2),
.tabs > input:nth-of-type(3):checked ~ label:nth-of-type(3),
.tabs > input:nth-of-type(4):checked ~ label:nth-of-type(4) {
  color: var(--paper);
  background: var(--accent);
  font-weight: 700;
}
.tabs > input:nth-of-type(1):checked ~ .tab-panel:nth-of-type(1),
.tabs > input:nth-of-type(2):checked ~ .tab-panel:nth-of-type(2),
.tabs > input:nth-of-type(3):checked ~ .tab-panel:nth-of-type(3),
.tabs > input:nth-of-type(4):checked ~ .tab-panel:nth-of-type(4) { display: block; }

/* ---------- charts (inline SVG frames) ---------- */
.chart { border: 1px dashed var(--line); margin: 2em 0; padding: 0; }
.chart svg { display: block; width: 100%; height: auto; padding: 20px 20px 8px; }
.chart .axis { stroke: var(--line); stroke-dasharray: 4 4; stroke-width: 1; }
.chart .series { fill: var(--accent); }
.chart.line .series { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.chart .series-2 { fill: #6f8fc0; }
.chart.line .series-2 { fill: none; stroke: #6f8fc0; stroke-width: 2.5; stroke-dasharray: 6 5; }
.chart .tick {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  fill: var(--muted);
}
.chart .value { font-family: var(--mono); font-size: 13px; fill: var(--accent); }
.chart.donut .ring-bg { fill: none; stroke: var(--panel); }
.chart.donut .ring { fill: none; stroke: var(--accent); stroke-linecap: butt; }
.chart.donut .donut-num { font-family: var(--mono); font-size: 26px; fill: var(--accent); text-anchor: middle; }

/* ---------- further reading ---------- */
.further-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 2em 0;
}
.further-grid a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  min-height: 150px;
  border: 1px dashed var(--line);
  padding: 22px 20px;
  color: #e8eef7;
}
.further-grid a:hover { border-color: var(--accent); background: var(--panel); color: #e8eef7; }
.further-grid .f-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.further-grid .f-t { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.2; }

/* ============================================================
   SITE-LEVEL
   ============================================================ */

.site-disclaimer {
  font-family: var(--mono);
  font-size: var(--fs-caption);
  letter-spacing: .06em;
  color: var(--faint);
  border-top: 1px dashed var(--line);
  padding-top: 20px;
  margin-top: 36px;
}


/* ============================================================
   P2 ADDITIONS — site chrome + new palette components
   ============================================================ */

/* annotation placeholders: an empty [data-fill] spot previews its own note */
[data-fill]:empty::before {
  content: '\27E8 ' attr(data-fill) ' \27E9';
  font-style: italic;
  color: var(--faint);
}

/* ---------- site chrome ---------- */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 24px 64px; border-bottom: 1px dashed var(--line); }
.site-brand { display: flex; align-items: baseline; gap: 12px; color: var(--ink-strong); }
.site-brand b { font-family: var(--serif); font-weight: 700; font-size: 25px; letter-spacing: .18em; }
.site-brand span { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--accent); }
.site-nav { display: flex; gap: 32px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.site-nav a { color: #9db2cf; }
.site-nav a:hover { color: var(--accent); }
.site-cta { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--accent); color: var(--accent); padding: 10px 20px; }
.site-cta:hover { background: var(--accent); color: var(--paper); }

.page-hero { padding: 72px 64px 56px; border-bottom: 1px dashed var(--line); }
.page-kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.page-title { font-family: var(--serif); font-weight: 700; font-size: clamp(36px, 6.5vw, 58px); line-height: 1.02; color: var(--ink-strong); margin: 0; max-width: 1000px; text-wrap: balance; }
.page-body { max-width: 860px; margin: 0 auto; padding: 56px 40px 72px; }

.article-meta { display: flex; gap: 26px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 24px; }
.article-meta .m-cat { color: var(--accent); }

.site-footer { background: var(--paper-deep); color: #8ba0bf; padding: 48px 64px; font-size: 16px; line-height: 1.6; border-top: 1px dashed var(--line); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 36px; }
.foot-brand { font-family: var(--serif); font-weight: 700; font-size: 22px; letter-spacing: .16em; color: var(--ink-strong); margin-bottom: 12px; }
.foot-blurb { margin: 0; max-width: 360px; }
.foot-head { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--accent); margin-bottom: 12px; }
.foot-col { display: flex; flex-direction: column; gap: 8px; }
.site-footer a { color: #8ba0bf; }
.site-footer a:hover { color: var(--accent); }
.foot-copy { color: #4c6084; }
.site-footer .site-disclaimer { margin-top: 0; }

/* ---------- partners: the register (flagship № 1 → tier → wall) ----------
   Slot markup is FIXED for the fill pipeline:
     <a class="sponsor" data-partner="N"><img src="placeholder.jpg" alt="Partner Logo N"><span class="sponsor-blurb"></span></a>
   Prominence comes from the WRAPPER, not the slot:
     direct child of .sponsor-fleet  = flagship (newest, № 1)
     .sponsor-tier                   = recent supporters, logo + short note
     .sponsor-wall                   = the long tail, logos only
   Every row is auto-fit, so any count (~5–25) reflows; move slots between
   wrappers freely — numbering renders from data-partner. Reveal: <details>, no JS. */
.sponsor { position: relative; border: 1px dashed var(--line); background: var(--paper-deep); color: var(--ink); }
.sponsor:hover { border-color: var(--accent); color: var(--ink); }
.sponsor::after { content: '\2116 ' attr(data-partner); position: absolute; top: 9px; left: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--faint); }
.sponsor img { max-width: 100%; object-fit: contain; opacity: .8; filter: grayscale(1) brightness(1.4); }
.sponsor:hover img { opacity: 1; filter: none; }
.sponsor-blurb { font-size: 17px; line-height: 1.55; color: var(--muted); }
.sponsor-blurb:empty::before { content: '\27E8 partner note \27E9'; font-style: italic; color: var(--faint); }

.sponsor-fleet { display: grid; gap: 16px; }

/* flagship — the newest, most prominent */
.sponsor-fleet > .sponsor { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; border-color: var(--accent); }
.sponsor-fleet > .sponsor::after { color: var(--accent); content: '\2116 ' attr(data-partner) ' \00B7 NEWEST'; }
.sponsor-fleet > .sponsor img { align-self: center; justify-self: center; max-height: 96px; margin: 52px 36px; }
.sponsor-fleet > .sponsor .sponsor-blurb { display: flex; align-items: center; border-left: 1px dashed var(--line); padding: 36px 34px 32px; font-size: 19px; }

/* tier — recent supporters */
.sponsor-tier { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; }
.sponsor-tier .sponsor { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; min-height: 176px; padding: 46px 24px 24px; }
.sponsor-tier .sponsor img { max-height: 56px; }
.sponsor-tier .sponsor-blurb { font-size: 15px; }

/* wall — the long tail */
.sponsor-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; }
.sponsor-wall .sponsor { display: flex; align-items: center; justify-content: center; min-height: 108px; padding: 28px 18px 18px; }
.sponsor-wall .sponsor img { max-height: 44px; }
.sponsor-wall .sponsor-blurb { display: none; }

.sponsor-more { margin-top: 16px; }
.sponsor-more summary { list-style: none; cursor: pointer; text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); border: 1px dashed var(--line); padding: 18px 16px; }
.sponsor-more summary::-webkit-details-marker { display: none; }
.sponsor-more summary:hover { border-color: var(--accent); }
.sponsor-more summary::after { content: '  +'; }
.sponsor-more[open] summary::after { content: '  \2212'; }
.sponsor-more[open] summary { margin-bottom: 16px; }

@media (max-width: 700px) {
  .sponsor-fleet > .sponsor { grid-template-columns: 1fr; }
  .sponsor-fleet > .sponsor img { margin: 52px 24px 24px; }
  .sponsor-fleet > .sponsor .sponsor-blurb { border-left: none; border-top: 1px dashed var(--line); padding: 24px; }
}

/* ---------- profile grid + card additions ---------- */
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 16px; margin: 2em 0; }
.profile-grid .profile-card { margin: 0; grid-template-columns: 130px 1fr; align-content: start; }
.profile-grid .profile-card .p-photo { width: 130px; }
.profile-card .p-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 26px 18px; }
.profile-card .p-links a { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; border: 1px dashed var(--line); padding: 4px 12px; color: var(--accent); }
.profile-card .p-links a:hover { border-color: var(--accent); background: var(--panel); }
.profile-card p + .p-links { margin-top: -6px; }
.profile-card .p-attr { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--faint); margin: 0 26px 20px; }
.profile-card.no-photo { grid-template-columns: 1fr; }
.profile-card.no-photo > * { grid-column: 1; }
.profile-card.no-photo h3::before { content: '\2726  '; color: var(--accent); font-size: 18px; }

/* ---------- organisation reference cards ---------- */
.org-grid { display: flex; flex-wrap: wrap; gap: 12px; margin: 2em 0; }
.org-card { display: grid; grid-template-columns: 44px auto; grid-template-rows: auto auto; align-items: center; column-gap: 14px; border: 1px dashed var(--line); background: var(--paper-deep); padding: 12px 18px 12px 12px; color: var(--ink); }
.org-card:hover { border-color: var(--accent); background: var(--panel); color: var(--ink); }
.org-logo { grid-row: 1 / 3; width: 44px; height: 44px; object-fit: contain; opacity: .85; filter: grayscale(1) brightness(1.4); }
.org-card:hover .org-logo { opacity: 1; filter: none; }
.org-name { font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--ink-strong); }
.org-host { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.org-host::after { content: ' \2197'; color: var(--accent); }
.org-card:hover .org-host { color: var(--accent); }
.org-card.no-logo { grid-template-columns: auto; padding-left: 18px; }
.org-card.no-logo .org-name::before { content: '\2726  '; color: var(--accent); font-size: 14px; }
@media (max-width: 520px) {
  .org-grid { flex-direction: column; }
  .org-card { width: 100%; }
}

/* ---------- entity reference chip ---------- */
.entity-ref { display: inline-block; font-family: var(--mono); font-size: .72em; letter-spacing: .06em; line-height: 1.4; white-space: nowrap; border: 1px dashed var(--line); padding: 2px 9px 3px; color: var(--accent); }
.entity-ref:hover { border-color: var(--accent); background: var(--panel); color: var(--accent-bright); }

/* ---------- contact form (static, no JS) ---------- */
.contact-form { display: grid; gap: 22px; border: 1px dashed var(--line); background: var(--paper-deep); padding: 34px; margin: 2em 0; }
.contact-form label { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.contact-form input, .contact-form textarea { width: 100%; background: var(--paper); border: 1px dashed var(--line); color: var(--ink-strong); font-family: var(--serif); font-size: 19px; padding: 12px 16px; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-style: solid; border-color: var(--accent); }
.btn-solid { display: inline-block; background: var(--accent); color: var(--paper); font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 15px 28px; border: none; cursor: pointer; justify-self: start; }
.btn-solid:hover { background: var(--accent-bright); color: var(--paper); }

/* ============================================================
   RESPONSIVE SUITE — fluid 360px → wide desktop, no horizontal
   scroll, one-handed tap targets. No JS anywhere.
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }
img, svg, video { max-width: 100%; }
img { height: auto; }

@media (max-width: 900px) {
  .foot-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .site-header { padding: 14px 20px; gap: 12px 18px; }
  .site-nav { gap: 6px 18px; }
  .site-nav a, .site-footer a { padding: 8px 0; }        /* tap targets */
  .site-cta { padding: 12px 18px; }
  .page-hero { padding: 48px 20px 40px; }
  .page-body { padding: 40px 20px 56px; }
  .site-footer { padding: 40px 20px; }

  /* data blocks stack or scroll */
  table.versus, table.datatable, table.ranktable { display: block; overflow-x: auto; }
  .versus th, .datatable th, .ranktable th,
  .versus td, .datatable td, .ranktable td { padding: 12px 14px; white-space: nowrap; }
  .statrow { grid-auto-flow: row; grid-auto-columns: unset; grid-template-columns: 1fr 1fr; }
  .proscons { grid-template-columns: 1fr; }
  .proscons .pros { border-right: none; border-bottom: 1px dashed var(--line); }
  .gallery, .further-grid { grid-template-columns: 1fr 1fr; }

  /* cards + rich components */
  .profile-card { grid-template-columns: 1fr; }
  .profile-card > * { grid-column: 1; }
  .profile-card .p-photo { width: 100%; height: 200px; min-height: 0; border-right: none; border-bottom: 1px dashed var(--line); }
  .steps li { grid-template-columns: 52px 1fr; padding: 16px 18px 16px 0; }
  .timeline li { grid-template-columns: 1fr; gap: 6px; padding-left: 24px; }
  .timeline li::before { left: 3px; top: 10px; }
  .timeline li::after { left: -1px; top: 4px; }
  .timeline .t-when { text-align: left; padding: 0; }
  .timeline .t-what { padding-left: 0; }

  /* comfortable insets */
  .blockquote { padding: 20px 18px; }
  .pullquote { padding-left: 20px; }
  .callout { padding: 18px; }
  .statblock { padding: 20px; }
  .contact-form { padding: 22px 18px; }
  .faq summary { padding: 18px 48px 18px 18px; }
  .faq details p { padding: 16px 18px; }
  .tabs > label { padding: 14px 18px; }
}

@media (max-width: 520px) {
  /* one column, scaled type — tokens cascade through every component */
  :root { --fs-body: 19px; --fs-note: 16px; --fs-lead: 21px; --fs-h2: 28px; --fs-h3: 22px; --fs-quote: 23px; --fs-stat: 40px; }
  .gallery, .further-grid, .statrow { grid-template-columns: 1fr; }
  .further-grid a { min-height: 0; }
  .page-title { font-size: clamp(30px, 9vw, 40px); }
}

/* ADULT-LOGO OVERRIDE — sponsors carry white-on-transparent logos; force dark backing + full colour */
.sponsor img{filter:none!important;opacity:1!important;padding:8px;box-sizing:border-box}
.sponsor:hover img{filter:none!important;opacity:1!important}

/* SPONSOR-BLURB TRUNCATION — featured shows full paragraph; tier cut to a teaser; wall hides (Design) */
.sponsor-tier .sponsor-blurb{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}


/* archive expander — matches .hp-link (Design's small-CTA style) */
.idx-expand{border-top:1px dashed var(--line)}
.idx-expand>summary{list-style:none;cursor:pointer;display:inline-block;margin:20px 0;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:4px}
.idx-expand>summary::-webkit-details-marker{display:none}
.idx-expand[open]>summary{opacity:.6}

/* ===== pipeline mobile-gutter guard (finalize) — content never touches the screen edge ===== */
@media (max-width:680px){
  .wrap,.wrap-wide,.container,.hero-inner,.footer-inner,.footer-bottom,.article-inner,.climate-inner,.nav,
  [class$="-inner"],[class*="-inner "]{
    padding-left:max(18px,env(safe-area-inset-left,0px))!important;
    padding-right:max(18px,env(safe-area-inset-right,0px))!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-tier .sponsor.sponsor img{height:56px!important;display:block!important;width:100%!important}
.sponsor-wall .sponsor.sponsor img{height:44px!important;display:block!important;width:100%!important}

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

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

/* op-money-squeeze: the money tile is a ROW whose mark takes nearly all of it, so the brand copy was
   left a column 23px wide at 390 — a sentence broken one or two words to a line. No
   overflow or clipping check sees this: the copy is not cut, just unreadably thin. The tile row is
   allowed to WRAP on phones, so the copy drops beneath the mark at full width (the evos remedy).
   Desktop keeps Design's side-by-side. Structural only. */
@media (max-width:400px){
  .sponsor-wall > [data-partner]{flex-wrap:wrap!important}
  .sponsor-wall > [data-partner] > :not(img):not(svg):not(picture){flex-basis:100%!important;min-width:0!important}
}

/* op-article-width: the article column was capped at 780px (83 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 860px (declared in .page-body) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  article.page-body{max-width:min(1037px, 100%)!important}
}
@media (min-width:1600px){
  article.page-body{max-width:min(clamp(1037px, 72.014vw, 1244px), 100%)!important}
  article.page-body > :is(p:not([class])), article.page-body > :is(ol.timeline, ul:not([class])) > li{font-size:clamp(21px,1.4583vw,25.2px)!important}
}
/* op-article-width:end */

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

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.page-body > figure.article-figure > img,
  div.hp-cell > figure.article-figure > img,
  section.hp-feature > div.hp-feature-plate > img,
  section.hp-hero > div.hp-plate > img){height:auto}
/* op-img-dims:end */