/* Before Nightingale — hijascaridad.org
   Palette: 5 members, each with a job.
   ground  #f2ece1  page ground, warm bone paper
   ink     #1a1712  body text, rules, dark grounds
   accent  #0f5c4a  viridian — section grounds, panels, links (saturated, hue ~168)
   flag    #a83a12  minium — drawn marks, kickers, numerals (saturated, hue ~18)
   mat     #e6dfd0  the mat a photograph sits on
   plus two neutrals derived from ink for quiet text and hairlines. */

:root {
  --ground: #f2ece1;
  --ink: #1a1712;
  --accent: #0f5c4a;
  --accent-deep: #0a4235;
  --accent-pale: #c9dcd4;
  --flag: #a83a12;
  --mat: #e6dfd0;
  --rule: #cdc3b0;
  --quiet: #4a4436;
  --faint: #8a8171;

  --display: Petrona, Georgia, serif;
  --text: Commissioner, "Helvetica Neue", Arial, sans-serif;

  --gutter: 44px;
  --wide: 1560px;
  --measure: 640px;
}

*, *::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-size: 17px;
  line-height: 1.6;
  font-synthesis-weight: none;
}

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

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--flag); }

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

.wrap { max-width: var(--wide); margin: 0 auto; padding-inline: var(--gutter); }
.measure { max-width: var(--measure); }

.kicker {
  font-size: 12.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 500;
}

.rule-hand { display: block; width: 100%; height: 6px; color: var(--ink); }
.rule-hand.flagged { color: var(--flag); }

.ico { flex: none; display: block; }

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

.masthead { border-bottom: 1px solid var(--rule); }
.masthead-inner {
  max-width: var(--wide); margin: 0 auto; padding: 30px var(--gutter) 0;
}
.brand-col {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 20px 56px; flex-wrap: wrap;
}
.brand { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: baseline; }
.brand-mark { color: var(--accent); grid-row: 1; grid-column: 1; }
.brand a { color: var(--ink); display: block; }
.brand h1, .brand .sitename {
  grid-row: 1; grid-column: 2;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(40px, 4.6vw, 74px); line-height: 0.86;
  letter-spacing: -0.035em; margin: 0;
}
.domain {
  grid-row: 2; grid-column: 2;
  font-size: 12.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--flag); margin-top: 10px; font-weight: 500;
}
.standing-line { margin: 0 0 7px; font-size: 15.5px; line-height: 1.5; color: var(--quiet); max-width: 44ch; }

/* nav: its own full-width row under the title — a two-tier menu.
   Tier 1 is the four sections. Tier 2 rests on the current section and is
   replaced in place on hover or keyboard focus. Every one of the 14 links is
   in the static HTML at all times; nothing is behind a JS dropdown. */
.sitenav { margin-top: 24px; }
.menubar { position: relative; display: flex; flex-wrap: wrap; border-top: 2px solid var(--ink); }
.m-item { position: static; }
.m-item > a {
  display: flex; align-items: center; gap: 9px; padding: 12px 30px 13px 0;
  font-family: var(--display); font-size: 20px; font-weight: 600;
  letter-spacing: -0.012em; color: var(--ink); white-space: nowrap;
}
.m-item > a .ico { color: var(--flag); }
.m-item:hover > a, .m-item:focus-within > a { color: var(--flag); }
.m-item.is-current > a { color: var(--accent); }
.m-item.is-current > a .ico { color: var(--accent); }

.submenu, .substrip {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 22px;
  padding: 11px 0 13px; border-top: 1px solid var(--rule); background: var(--ground);
}
.submenu a, .substrip a { font-size: 15px; line-height: 1.4; color: var(--accent); }
.submenu a:hover, .substrip a:hover { color: var(--flag); }
.sub-label {
  font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--faint); font-weight: 500; margin-right: 4px;
}
.substrip { position: relative; z-index: 1; }
.submenu { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; display: none; }
.m-item:hover .submenu, .m-item:focus-within .submenu { display: flex; }

.navmeta {
  display: flex; gap: 22px; padding: 12px 0 20px; margin-top: 2px;
  border-top: 2px solid var(--ink);
}
.navmeta a { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.navmeta a:hover { color: var(--flag); }

/* ---------- figure system ---------- */
/* Four treatments, one drawing family: square corners, 20px mat depth,
   caption in the display face with the credit smaller and quieter beneath. */

figure { margin: 0; }
figcaption .cap {
  font-family: var(--display); font-size: 17px; line-height: 1.45;
  font-style: italic; color: var(--ink); display: block; max-width: 46ch;
}
figcaption .credit {
  display: block; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase;
  color: #625a4d; margin-top: 7px; max-width: 60ch;
}

/* 1 — full-bleed plate, caption stepped into the margin */
.fig-bleed { width: 100%; }
.fig-bleed img { width: 100%; height: min(72vh, 720px); aspect-ratio: auto; object-fit: cover; }
.fig-bleed figcaption {
  max-width: var(--wide); margin: 0 auto; padding: 14px var(--gutter) 0;
  display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr); gap: 36px;
}

/* 2 — matted plate with drawn corner brackets */
.fig-mat { background: var(--mat); padding: 20px; position: relative; }
.fig-mat .brk { position: absolute; color: var(--flag); }
.fig-mat .brk.tl { top: 7px; left: 7px; }
.fig-mat .brk.br { bottom: 7px; right: 7px; }
.fig-mat img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.fig-mat figcaption { margin-top: 14px; }

/* 3 — inset with a keyed bar above the image */
.fig-inset .bar { height: 7px; background: var(--accent); }
.fig-inset img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.fig-inset figcaption { margin-top: 11px; }
.fig-inset figcaption .cap { font-size: 16px; }

/* 4 — object plate, offset keyline and a numeral */
.fig-plate img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; outline: 1px solid var(--accent); outline-offset: 5px; }
.fig-plate figcaption { margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--quiet); }
.fig-plate .num { font-family: var(--display); color: var(--flag); margin-right: 7px; font-weight: 600; }

/* article-level widths */
.article-figure { margin: 34px 0; }
.article-figure img { width: 100%; height: auto; }
.fig-break { max-width: none; }

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

.band { padding: 68px 0 0; }
.band-quiet { padding: 56px 0 0; }
.band-dark { margin-top: 80px; background: var(--accent); color: var(--ground); padding: 62px 0 68px; }
.band-dark h2 a, .band-dark h2 { color: var(--ground); }
.band-dark .lede { color: var(--accent-pale); }
.band-dark figcaption .cap { color: #dce9e4; }
.band-dark figcaption .credit { color: #d3e4dd; }
.band-dark .fig-inset .bar { background: var(--flag); }

.lead-line {
  font-family: var(--display); font-size: clamp(25px, 2.9vw, 43px);
  line-height: 1.17; letter-spacing: -0.02em; margin: 0; text-wrap: pretty;
}
.section-title {
  font-family: var(--display); font-weight: 600; letter-spacing: -0.028em;
  font-size: clamp(29px, 3.3vw, 50px); line-height: 1.05; color: var(--ink);
  display: block; max-width: 20ch;
}
.band-dark .section-title { color: var(--ground); }
.lede { margin: 18px 0 0; font-size: 16.5px; line-height: 1.62; color: var(--quiet); max-width: 46ch; }

.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); gap: 54px; align-items: start; }
.split-wide { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 26px; align-items: start; }
.two-up { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr); gap: 56px; align-items: start; }

.pagelist { list-style: none; margin: 24px 0 0; padding: 15px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 9px; }
.pagelist a { font-family: var(--display); font-size: 19px; }
.band-dark .pagelist { border-top-color: #3d7566; }
.band-dark .pagelist a { color: var(--ground); border-bottom: 1px solid #6fa898; }
.band-dark .pagelist a:hover { border-bottom-color: var(--flag); color: #ffd9c8; }

.emblem-band { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 42px; align-items: start; padding-top: 76px; }
.emblem-band .drawn { color: var(--flag); flex: none; }

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

.artmeta { display: flex; align-items: center; gap: 11px; padding-top: 8px; }
.artmeta .ico { color: var(--flag); }
.artmeta a { font-size: 13px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--quiet); font-weight: 500; }

.article-head { padding-block: 0 8px; }
.article-head h1 {
  margin: 14px 0 0; font-size: clamp(36px, 5.4vw, 82px);
  line-height: 0.98; letter-spacing: -0.032em; max-width: 22ch;
}
.lead {
  font-family: var(--display); font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.42; margin: 22px 0 0; max-width: 46ch; color: #3b352a;
  text-wrap: pretty;
}
.body { font-size: 18.5px; line-height: 1.72; color: #26221a; }
.body > p { margin: 0 0 20px; max-width: var(--measure); }
.body > h2 {
  font-size: clamp(24px, 2.5vw, 35px); line-height: 1.12; margin: 44px 0 16px;
  max-width: 22ch; padding-top: 16px; border-top: 2px solid var(--ink);
}
.body > h3 { font-size: 22px; margin: 32px 0 12px; }
.body em { font-style: italic; }
.dropcap::first-letter {
  font-family: var(--display); font-size: 4.9em; line-height: 0.78;
  font-weight: 600; color: var(--accent); float: left;
  margin: 0.06em 0.06em 0 0;
}

.entity-ref { border-bottom: 1px solid var(--accent-pale); }
.entity-ref:hover { border-bottom-color: var(--flag); }

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

.pullquote { margin: 36px 0; padding: 22px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.pullquote p {
  margin: 0; font-family: var(--display); font-size: clamp(22px, 2.2vw, 31px);
  line-height: 1.28; letter-spacing: -0.015em; color: var(--accent); max-width: 40ch;
  text-wrap: pretty;
}
.blockquote { margin: 32px 0; padding: 0 0 0 22px; border-left: 3px solid var(--flag); }
.blockquote p { margin: 0; font-family: var(--display); font-size: 21px; line-height: 1.45; font-style: italic; max-width: 48ch; }
.blockquote cite { display: block; margin-top: 10px; font-family: var(--text); font-style: normal; font-size: 14px; color: var(--faint); }

.callout { margin: 34px 0; background: var(--mat); padding: 24px 26px; max-width: 640px; }
.callout p { margin: 0; font-size: 17.5px; line-height: 1.6; }
.callout p + p { margin-top: 12px; }
.note {
  font-size: 15.5px; line-height: 1.6; color: var(--quiet); max-width: 620px;
  padding-left: 16px; border-left: 2px solid var(--rule); margin: 26px 0;
}

/* Notes-for-Design material: full-width interruptions, not a side rail */
.interrupt { margin: 48px 0; padding: 26px 0 30px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.interrupt > h3 { font-size: 15px; font-family: var(--text); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--flag); margin: 0 0 18px; }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.timeline li {
  display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr);
  gap: 24px; padding: 11px 0; border-top: 1px solid var(--rule); align-items: baseline;
}
.timeline li:first-child { border-top: 0; }
.t-when { font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--accent); line-height: 1.25; }
.t-what { font-size: 16.5px; line-height: 1.55; color: var(--quiet); }

.keylist { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.keylist li { border-top: 1px solid var(--rule); padding-top: 12px; }
.keylist .k-term { display: block; font-family: var(--display); font-size: 19px; font-weight: 600; line-height: 1.25; margin-bottom: 5px; }
.keylist .k-def { display: block; font-size: 15.5px; line-height: 1.55; color: var(--quiet); }

.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px; margin: 34px 0; }
.statblock { border-top: 3px solid var(--flag); padding-top: 12px; }
.stat-num { display: block; font-family: var(--display); font-size: 46px; font-weight: 700; line-height: 1; color: var(--ink); }
.stat-label { display: block; font-size: 14.5px; line-height: 1.45; color: var(--quiet); margin-top: 7px; }

.versus, .datatable { border-collapse: collapse; width: 100%; margin: 32px 0; font-size: 16px; }
.versus th, .versus td, .datatable th, .datatable td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.versus thead th, .datatable thead th {
  background: var(--ink); color: var(--ground); font-family: var(--text);
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
}
.versus tbody th { font-family: var(--display); font-size: 18px; font-weight: 600; width: 30%; }
.datatable tbody tr:nth-child(even) { background: var(--mat); }
.table-scroll { overflow-x: auto; }

.chart { margin: 34px 0; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart figcaption { margin-top: 12px; font-size: 14px; color: var(--quiet); }

.gallery img { aspect-ratio: 16 / 10; object-fit: cover; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin: 34px 0; }

.map-figure .map-slot { width: 100%; min-height: 420px; background: var(--mat); border: 1px solid var(--rule); }
.map-figure figcaption { margin-top: 12px; }

.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin: 34px 0; }
.profile-card { background: var(--mat); padding: 22px; display: flex; flex-direction: column; }
.profile-card .p-photo { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; margin-bottom: 14px; }
.profile-card h3 { font-size: 22px; line-height: 1.2; }
.profile-card .p-role { margin: 4px 0 10px; font-size: 13px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--flag); font-weight: 600; }
.profile-card p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.6; color: var(--quiet); }
.profile-card .p-links { margin-top: auto; font-size: 15px; }
.profile-card.no-photo { border-top: 3px solid var(--accent); }

.org-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin: 30px 0; }
.org-card { display: flex; flex-direction: column; gap: 4px; background: var(--mat); padding: 16px 18px; }
.org-card .org-logo { height: 30px; width: auto; aspect-ratio: auto; object-fit: contain; margin-bottom: 6px; }
.org-card .org-name { font-family: var(--display); font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.org-card .org-host { font-size: 13px; color: var(--faint); }
.org-card:hover .org-name { color: var(--flag); }

.further-grid, .related-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.further-grid a, .related-links a {
  display: flex; flex-direction: column; height: 100%; gap: 7px;
  border-top: 2px solid var(--ink); padding-top: 13px;
  font-family: var(--display); font-size: 20px; line-height: 1.2; color: var(--ink);
}
.further-grid a:hover, .related-links a:hover { color: var(--flag); }
.related-links .r-note { font-family: var(--text); font-size: 14.5px; line-height: 1.5; color: var(--quiet); margin-top: auto; }

.cat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cat-list > li { border-top: 1px solid var(--rule); }
.cat-list > li:last-child { border-bottom: 1px solid var(--rule); }
.cat-item {
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 26px;
  padding: 20px 0; align-items: start;
}
.cat-item img { width: 132px; height: 92px; aspect-ratio: auto; object-fit: cover; outline: 1px solid var(--accent); outline-offset: 4px; }
.cat-item h3 { font-size: clamp(21px, 2.1vw, 28px); line-height: 1.14; }
.cat-item h3 a { color: var(--ink); }
.cat-item h3 a:hover { color: var(--flag); }
.cat-item p { margin: 8px 0 0; font-size: 16px; line-height: 1.58; color: var(--quiet); max-width: 60ch; }

.expander { margin-top: 8px; }
.expander summary { cursor: pointer; font-size: 15px; font-weight: 600; color: var(--accent); padding: 10px 0; list-style: none; }
.expander summary::-webkit-details-marker { display: none; }
.expander summary::before { content: "+ "; color: var(--flag); }
.expander[open] summary::before { content: "– "; }

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

.supporters { margin-top: 78px; background: var(--ink); color: var(--ground); padding: 44px 0 48px; }
.supporters h2 { font-size: 26px; color: var(--ground); }
.supporters .kicker { color: #8f867a; }
.sponsor-block { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 18px 0 0; align-items: stretch; }
.sponsor-group + .sponsor-group { margin-top: 26px; padding-top: 24px; border-top: 1px solid #3a342c; }
.sponsor-group h3 { font-family: var(--text); font-size: 12.5px; letter-spacing: 0.09em; text-transform: uppercase; color: #8f867a; font-weight: 600; margin-bottom: 4px; }
.sponsor {
  display: flex; flex-direction: column; gap: 11px;
  width: auto; padding: 14px; background: #241f19; color: var(--ground);
}
.sponsor:hover { background: #2e2721; }
.sponsor img {
  width: auto; height: auto; aspect-ratio: auto; max-width: 100%; max-height: 40px;
  object-fit: contain; align-self: center;
}
.sponsor .sponsor-logo-box {
  width: 100%; height: 52px; flex: 0 0 52px; background: #17130f;
  display: flex; align-items: center; justify-content: flex-start; padding: 6px 10px;
}
.sponsor .sponsor-name { font-family: var(--display); font-size: 18px; font-weight: 600; line-height: 1.2; color: var(--ground); }
.sponsor .sponsor-blurb { font-size: 14px; line-height: 1.5; color: #b3a99b; }
.sponsor.feat .sponsor-logo-box { box-shadow: inset 0 0 0 1px var(--accent); }
.sponsor.feat .sponsor-name { color: #ffe2d3; }

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

main { padding-bottom: 58px; }
.sitefoot { border-top: 1px solid var(--rule); margin-top: 0; padding: 24px 0 60px; }
.sitefoot .inner { display: flex; flex-wrap: wrap; gap: 14px 38px; align-items: baseline; }
.sitefoot .fname { font-family: var(--display); font-size: 20px; font-weight: 600; }
.sitefoot .fline { font-size: 15px; color: var(--quiet); }
.sitefoot .flinks { margin-left: auto; display: flex; gap: 22px; }
.sitefoot .flinks a { font-size: 15px; }

/* ---------- narrow ---------- */

@media (max-width: 1080px) {
  :root { --gutter: 28px; }
  .brand-col { align-items: flex-start; }
  .standing-line { margin-bottom: 0; }
  .split, .two-up { grid-template-columns: 1fr; gap: 34px; }
  .split-wide { grid-template-columns: 1fr; gap: 26px; }
  .fig-bleed figcaption { grid-template-columns: 1fr; gap: 10px; }
  .emblem-band { grid-template-columns: 1fr; gap: 24px; }
  .cat-item { grid-template-columns: 100px minmax(0, 1fr); gap: 18px; }
  .cat-item img { width: 100px; height: 70px; }
}

@media (max-width: 680px) {
  :root { --gutter: 20px; }
  body { font-size: 16.5px; }
  /* no hover on touch: every section shows its own second level, stacked */
  .menubar { flex-direction: column; }
  .m-item > a { padding: 11px 0 6px; font-size: 19px; }
  .m-item + .m-item { border-top: 1px solid var(--rule); }
  .submenu { display: flex; position: static; border-top: 0; padding: 0 0 10px 29px; flex-direction: column; gap: 6px; }
  .submenu .sub-label { display: none; }
  .substrip { display: none; }
  .brand { column-gap: 13px; }
  .brand h1, .brand .sitename {
  grid-row: 1; grid-column: 2; font-size: clamp(34px, 11vw, 52px); }
  .body { font-size: 17.5px; }
  .timeline li { grid-template-columns: 1fr; gap: 3px; }
  .keylist { grid-template-columns: 1fr; }
  .cat-item { grid-template-columns: 1fr; gap: 12px; }
  .cat-item img { width: 100%; height: 180px; aspect-ratio: auto; }
  .fig-bleed img { height: 54vh; }
  .sponsor-block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sitefoot .flinks { margin-left: 0; }
  .interrupt { margin: 34px 0; }
}

/* ---------- masthead mark, sized to the title ---------- */
.brand-mark { height: clamp(40px, 4.1vw, 64px); width: auto; }

/* ---------- band: the signature, on the mat ground so it reads as its own room ---------- */
.band-signature {
  background: var(--mat); margin-top: 54px;
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule);
  padding: 40px 0 46px;
}
.signature {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(250px, 0.8fr);
  gap: 26px 60px; align-items: start;
}
.sig-flag {
  font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--flag); font-weight: 600; margin: 16px 0 10px;
}
.lead-title { font-size: clamp(34px, 4.5vw, 70px); max-width: 21ch; }
.lede-wide { max-width: 54ch; font-size: 19px; margin-top: 16px; }
.readon { margin: 22px 0 0; }
.readon a {
  font-family: var(--display); font-size: 20px; font-weight: 600;
  border-bottom: 2px solid var(--flag); padding-bottom: 2px;
}
.readon a::after { content: " \2192"; }
.alsobox { border-top: 2px solid var(--ink); padding-top: 14px; }
.pagelist.tight { border-top: 0; margin-top: 12px; padding-top: 0; }
.artmeta-sep { color: var(--faint); }

/* ---------- band-dark, compacted ---------- */
.band-dark { padding: 52px 0 56px; margin-top: 64px; }
.dark-head {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 20px 56px; align-items: end;
}
.plate-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 30px; }
.plate-row figcaption { margin-top: 10px; }
.plate-row figcaption .cap { font-size: 15px; line-height: 1.4; font-style: normal; max-width: 34ch; }
.plate-row figcaption .credit { font-size: 11.5px; letter-spacing: 0.06em; margin-top: 5px; }
.pagerow {
  display: flex; flex-wrap: wrap; gap: 9px 30px;
  margin-top: 30px; padding-top: 16px; border-top: 1px solid #3d7566;
}
.pagerow a {
  font-family: var(--display); font-size: 19px; color: var(--ground);
  border-bottom: 1px solid #6fa898;
}
.pagerow a:hover { color: #ffd9c8; border-bottom-color: var(--flag); }

/* ---------- band-emblem: the drawn arcade, on ink ---------- */
.band-emblem { margin-top: 76px; background: var(--ink); color: var(--ground); padding: 58px 0 64px; }
.band-emblem .emblem-band {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 20px 60px; align-items: center; padding-top: 0;
}
.band-emblem .drawn { color: var(--flag); width: 400px; height: auto; }
.emblem-line {
  font-family: var(--display); font-weight: 600; margin: 0;
  font-size: clamp(26px, 3.1vw, 46px); line-height: 1.13;
  letter-spacing: -0.022em; max-width: 26ch; text-wrap: pretty;
}
.band-emblem .readon a { color: var(--ground); }
.band-emblem .readon a:hover { color: #ffd9c8; }

/* ---------- supporters: two even blocks of six, three across ---------- */
.sponsor-groups { display: grid; gap: 30px; margin-top: 18px; }
.sponsor-group + .sponsor-group { margin-top: 0; padding-top: 0; border-top: 0; }


@media (max-width: 1080px) {
  .signature { grid-template-columns: 1fr; gap: 30px; }
  .dark-head { grid-template-columns: 1fr; gap: 16px; }
  .band-emblem .emblem-band { grid-template-columns: 1fr; gap: 28px; }
  .band-emblem .drawn { width: 330px; }
}
@media (max-width: 680px) {
  .plate-row { grid-template-columns: 1fr; gap: 26px; }
  .band-signature { padding: 30px 0 34px; margin-top: 38px; }
  .lead-title { font-size: clamp(30px, 9vw, 42px); }
  .band-emblem { padding: 42px 0 46px; }
  .band-emblem .drawn { width: 200px; }

}

@media (max-width: 1080px) {
  .sponsor-block { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .sponsor-block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sponsor .sponsor-name { font-size: 16px; }
}

/* ---------- masthead on the viridian ground ----------
   The accent gets the top of the page at full width, with the flag's
   light tint carrying the domain line, the icons and every hover. */
.masthead { background: var(--accent); color: var(--ground); border-bottom: 0; }
.masthead-inner { padding-bottom: 0; }
.brand-mark { color: var(--ground); }
.brand a, .brand h1, .brand .sitename { color: var(--ground); }
.brand a:hover { color: #ffd9c8; }
.domain { color: #ffc9b0; }
.standing-line { color: #c4d9d1; }

.menubar { border-top: 2px solid rgba(242, 236, 225, 0.45); }
.m-item > a { color: var(--ground); }
.m-item > a .ico { color: #ffb694; }
.m-item:hover > a, .m-item:focus-within > a { color: #ffd9c8; }
.m-item:hover > a .ico, .m-item:focus-within > a .ico { color: #ffd9c8; }
.m-item.is-current > a { color: #ffd9c8; }
.m-item.is-current > a .ico { color: #ffd9c8; }

.submenu, .substrip {
  background: var(--accent);
  border-top: 1px solid rgba(242, 236, 225, 0.24);
}
.submenu a, .substrip a { color: #dbeae4; }
.submenu a:hover, .substrip a:hover { color: #ffd9c8; }
.sub-label { color: #b6cfc7; }

.navmeta { border-top: 2px solid rgba(242, 236, 225, 0.45); }
.navmeta a { color: var(--ground); }
.navmeta a:hover { color: #ffd9c8; }

@media (max-width: 680px) {
  .m-item + .m-item { border-top: 1px solid rgba(242, 236, 225, 0.24); }
}

/* the signature panel now meets the masthead directly on section pages */
.band-signature { border-top: 0; }

/* brand: the mark is drawn at the title's cap height and sits on its baseline */
.brand { font-size: clamp(40px, 4.6vw, 74px); align-items: baseline; column-gap: 0.26em; }
.brand h1, .brand .sitename { font-size: 1em; line-height: 0.86; }
.brand-mark { height: 0.649em; width: auto; }
@media (max-width: 680px) {
  .brand { font-size: clamp(34px, 11vw, 52px); }
  .brand h1, .brand .sitename { font-size: 1em; }
}

/* ---------- article pages: use the width instead of leaving a dead margin ---------- */

/* the head runs across: title left, standfirst set against it */
.article-head {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  column-gap: 52px; row-gap: 16px; align-items: end;
}
.article-head > .artmeta { grid-column: 1 / -1; }
.article-head > h1 { grid-column: 1; max-width: none; }
.article-head > .lead {
  grid-column: 2; margin: 0 0 8px; max-width: none;
  font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45;
}

/* the reading column is centred; the interruptions break out past it */
.body { max-width: 700px; margin-inline: auto; }
.body > p { max-width: none; }
.body > h2 { max-width: 26ch; clear: both; }
.body > .interrupt, .body > .fig-break {
  --break-w: min(100vw - (var(--gutter) * 2), calc(var(--wide) - (var(--gutter) * 2)));
  width: var(--break-w);
  margin-left: calc(50% - (var(--break-w) / 2));
  clear: both;
}
.body > .fig-mat { max-width: none; }

/* the small plate sits IN the column with prose running beside it */
.body > .fig-plate {
  float: right; width: 300px; max-width: 46%;
  margin: 10px 0 20px 34px;
}
.body > .related-wrap { clear: both; }

@media (max-width: 1080px) {
  .article-head { grid-template-columns: 1fr; row-gap: 14px; align-items: start; }
  .article-head > h1, .article-head > .lead { grid-column: 1; }
  .article-head > .lead { margin-bottom: 0; }
  .body { max-width: 660px; }
}
@media (max-width: 680px) {
  .body { max-width: none; }
  .body > .fig-plate { float: none; width: 100%; max-width: none; margin: 24px 0; }
  .body > .interrupt, .body > .fig-break { width: 100%; margin-left: 0; }
}

/* Any width without a hover pointer, and every tablet width, gets the full
   two-level menu stacked open — a hover panel is unreachable on touch. */
@media (max-width: 900px), (hover: none) {
  .menubar { flex-direction: column; }
  .m-item > a { padding: 10px 0 5px; font-size: 18.5px; }
  .m-item + .m-item { border-top: 1px solid rgba(242, 236, 225, 0.24); }
  .submenu {
    display: flex; position: static; flex-direction: column;
    border-top: 0; padding: 0 0 9px 29px; gap: 5px; background: transparent;
  }
  .submenu .sub-label { display: none; }
  .submenu a { font-size: 14.5px; }
  .substrip { display: none; }
}

/* ---------- the menu on touch and narrow screens ----------
   Desktop keeps the two-tier bar. Below 900px, or on any pointer without
   hover, the same 18 links live inside a disclosure so the header does not
   fill the screen — no JS, and every link stays in the static HTML. */
.navdisc { display: none; }

@media (max-width: 900px), (hover: none) {
  .navdisc {
    display: block; border-top: 2px solid rgba(242, 236, 225, 0.45);
    border-bottom: 2px solid rgba(242, 236, 225, 0.45);
  }
  .navdisc > summary {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    min-height: 52px; padding: 14px 0; cursor: pointer; list-style: none;
    font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--ground);
  }
  .navdisc > summary::-webkit-details-marker { display: none; }
  .navdisc > summary::after {
    content: "+"; margin-left: auto; font-size: 26px; line-height: 1;
    color: #ffb694; font-family: var(--text); font-weight: 400;
  }
  .navdisc[open] > summary::after { content: "\2013"; }
  .navdisc-hint {
    font-family: var(--text); font-size: 13px; font-weight: 400;
    letter-spacing: 0.06em; text-transform: uppercase; color: #b6cfc7;
  }
  .navbody { display: none; }
  .navdisc[open] ~ .navbody { display: block; }
  .navbody .menubar { border-top: 0; padding-top: 4px; }
  .m-item > a { display: flex; align-items: center; min-height: 46px; padding: 4px 0; }
  .submenu { padding: 0 0 10px 29px; }
  .submenu a { display: flex; align-items: center; min-height: 44px; }
  .navmeta { padding: 6px 0 14px; gap: 26px; }
  .navmeta a { display: flex; align-items: center; min-height: 46px; }
}

@media (max-width: 900px), (hover: none) {
  .navdisc > summary { min-height: 48px; padding: 11px 0; font-size: 19px; }
}
@media (max-width: 680px) {
  .masthead-inner { padding-top: 20px; }
  /* the standing line already sits in the footer; the phone header keeps the name */
  .masthead .standing-line { display: none; }
  .navdisc-hint { display: none; }
  .navdisc > summary { min-height: 46px; padding: 10px 0; }
  .sitenav { margin-top: 16px; }
  .domain { font-size: 11.5px; letter-spacing: 0.11em; }
}

/* Six across only where a tile can still afford >=200px of usable width and a
   3:1 logo box; three even columns everywhere below that. */
@media (min-width: 1560px) {
  .sponsor-block { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* 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}
.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-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.sponsor-block .sponsor .sponsor-logo-box.sponsor-logo-box{display:block!important;width:100%!important}
.sponsor-block .sponsor.sponsor img{height:40px!important;display:block!important;width:100%!important}

/* op-blurb-rows: money blurbs ran to 5 rows at 390, 1409px of tier across
   12 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-block .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:63px!important;min-height:0!important;overflow:hidden!important}
  .sponsor-block .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:63px!important;min-height:0!important;overflow:hidden!important}
}

/* op-article-width: the article column was capped at 700px (85 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 700px (declared in .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){
  div.wrap div.body{max-width:min(840px, 100%)!important}
}
@media (min-width:1600px){
  div.wrap div.body{max-width:min(clamp(840px, 58.333vw, 1008px), 100%)!important}
  div.wrap div.body > :is(p.dropcap, p:not([class])){font-size:clamp(18.5px,1.2847vw,22.2px)!important}
}
/* op-article-width:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); font-weight: 600; letter-spacing: -0.025em; margin: 0px; text-wrap: balance;}
.cat-item h2:where(.rt-h3){font-size: clamp(21px, 2.1vw, 28px); line-height: 1.14;}
.cat-item h2:where(.rt-h3) a{color: var(--ink);}
.cat-item h2:where(.rt-h3) a:hover{color: var(--flag);}
/* op-heading-levels:end */
.sponsor-block > [data-partner] .sponsor-logo-box{background:transparent!important}
.sponsor-block.sponsor-block > [data-partner][data-partner] .sponsor-logo-box{box-shadow:none!important}