/* Deepsky 2000 — field guide to the faint things
   Palette (each member has one job):
     --ground   #0B0F14  page ground, the dark sky
     --ink      #ECE4D6  body text, warm paper on the ground
     --accent   #E8A22B  sodium amber — rules, kickers, and the catalogue band
     --secondary#1F8FA8  cyan-teal — section marks, panels, the observing band
     --flag     #C4442A  disputed / alert only
   Saturated members: amber (h≈40) and teal (h≈193) — 150° apart. */

:root {
  --ground: #0B0F14;
  --ground-deep: #05080B;
  --panel: #131B24;
  --panel-soft: #0F161D;
  --rule: #1C2733;
  --rule-soft: #17212B;

  --ink: #ECE4D6;
  --ink-dim: #C2CEd8;
  --muted: #93A3B1;
  --faint: #6E8291;

  --accent: #E8A22B;
  --accent-bright: #F5C46A;
  --accent-shade: #7A5307;
  --accent-ground: #1E1608;

  --secondary: #1F8FA8;
  --secondary-bright: #7ECBD8;
  --secondary-area: #0D3E4A;
  --secondary-deep: #0A303A;

  --flag: #C4442A;

  --display: 'Eczar', Georgia, 'Times New Roman', serif;
  --text: 'Spectral', Georgia, 'Times New Roman', serif;

  --wrap: 1240px;
  --measure: 68ch;
  --gutter: 40px;
}

*, *::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: 18px;
  line-height: 1.7;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--accent); text-decoration: none; }
a:hover, a:focus-visible { color: var(--accent-bright); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

p { text-wrap: pretty; margin: 0 0 1.15em; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.1; margin: 0; text-wrap: balance; }

svg { flex: none; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.measure { max-width: var(--measure); }
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--ground);
  padding: 10px 16px; z-index: 200; font-size: 15px;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------- Masthead ---------- */

.masthead { border-bottom: 1px solid var(--rule); background: var(--ground); position: relative; z-index: 40; }
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-block: 18px; }

.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand .mark { color: var(--accent); }
.brand-name { font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1; letter-spacing: .005em; }
.brand-tag { display: block; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); margin-top: 3px; }

.nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.nav a {
  display: flex; align-items: center; gap: 7px;
  color: var(--ink-dim); font-size: 15px; line-height: 1.2; padding-block: 4px;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent); }
.nav a .ico { color: var(--secondary); }
.nav a:hover .ico, .nav a[aria-current="page"] .ico { color: var(--accent); }
.nav .nav-browse { color: var(--faint); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- Section kicker ---------- */

.kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 20px;
}
.kicker--teal { color: var(--secondary-bright); }
.kicker--ink { color: #4A3305; }

.band-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding-bottom: 16px; border-bottom: 1px solid var(--rule); margin-bottom: 40px;
}
.band-head h2 { font-size: 15px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.band-head p { margin: 0; font-size: 15px; color: var(--faint); }

/* ---------- Homepage: opener ---------- */

.opener { position: relative; background: var(--ground-deep); overflow: hidden; }
.opener-img { position: absolute; inset: 0; }
.opener-img img { width: 100%; height: 100%; object-fit: cover; }
.opener::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,8,11,.78) 0%, rgba(5,8,11,.28) 38%, rgba(5,8,11,.94) 100%);
}
.opener .wrap { position: relative; z-index: 2; padding-block: 190px 64px; }
.opener h1 { font-size: clamp(40px, 6.4vw, 84px); line-height: .99; letter-spacing: -.015em; margin-bottom: 22px; max-width: 15ch; }
.opener .deck { font-size: clamp(18px, 2vw, 21px); line-height: 1.55; color: var(--ink-dim); max-width: 58ch; margin: 0; }

/* ---------- Homepage: quiet line ---------- */

.quiet { padding-block: 84px; border-bottom: 1px solid var(--rule-soft); }
.quiet p {
  font-family: var(--display); font-weight: 500; font-size: clamp(22px, 2.9vw, 31px);
  line-height: 1.42; color: var(--muted); margin: 0 auto; max-width: 46ch; text-align: center;
}
.quiet strong { color: var(--ink); font-weight: 600; }

/* ---------- Homepage: lead feature ---------- */

.lead-feature { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: start; }
.lead-feature .lf-title { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.06; margin-bottom: 18px; }
.lead-feature .lf-title a { color: var(--ink); }
.lead-feature .lf-title a:hover { color: var(--accent); }
.lead-feature .lf-dek { font-size: 19px; line-height: 1.6; color: var(--ink-dim); }

.seconds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 56px; }
.seconds article { background: var(--ground); padding: 30px 28px; display: flex; flex-direction: column; }
.seconds h3 { font-size: 25px; line-height: 1.16; margin-bottom: 10px; }
.seconds h3 a { color: var(--ink); }
.seconds h3 a:hover { color: var(--accent); }
.seconds p { font-size: 16.5px; line-height: 1.6; color: var(--muted); margin: 0; }
.seconds .meta { margin-top: auto; padding-top: 18px; }

.meta { display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--secondary-bright); }
.meta .ico { color: var(--secondary); }

/* ---------- Homepage: catalogue band (amber area) ---------- */

.band-amber { background: var(--accent); color: var(--ground); }
.band-amber .wrap { padding-block: 76px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 68px; align-items: start; }
.band-amber h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; margin-bottom: 22px; max-width: 20ch; }
.band-amber p { color: #241B08; font-size: 17.5px; line-height: 1.62; max-width: 52ch; }
.band-amber a { color: #3E2B04; text-decoration: underline; text-underline-offset: 3px; }
.band-amber a:hover { color: var(--ground); }
.band-amber .timeline li { border-bottom-color: rgba(11,15,20,.28); }
.band-amber .t-when { color: #3E2B04; }
.band-amber .t-what { color: #241B08; }

/* ---------- Homepage: sections index ---------- */

.section-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.section-grid a { display: flex; flex-direction: column; background: var(--ground); padding: 30px 26px 28px; color: var(--ink); }
.section-grid a:hover { background: var(--panel); color: var(--ink); }
.section-grid .ico { color: var(--secondary); margin-bottom: 16px; }
.section-grid a:hover .ico { color: var(--accent); }
.section-grid .sg-no { font-size: 12.5px; letter-spacing: .18em; color: var(--faint); margin-bottom: 6px; }
.section-grid h3 { font-size: 23px; margin-bottom: 8px; }
.section-grid p { font-size: 16px; line-height: 1.55; color: var(--muted); margin: 0 0 14px; }
.section-grid .sg-count { margin-top: auto; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--secondary-bright); }

/* ---------- Homepage: observing band (teal area) ---------- */

.band-teal { background: var(--secondary-area); }
.band-teal .wrap { padding-block: 72px; }
.band-teal h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.12; max-width: 22ch; }
.band-teal p { color: #BEDFE6; }
.band-teal .obs-head { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; margin-bottom: 38px; }
.band-teal .obs-head p { margin: 0; font-size: 17px; line-height: 1.6; max-width: 44ch; }
.obs-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(236,228,214,.22); }
.obs-list li { border-bottom: 1px solid rgba(236,228,214,.22); }
.obs-list a { display: grid; grid-template-columns: 44px 1fr auto; gap: 20px; align-items: center; min-height: 92px; padding: 18px 0; color: var(--ink); }
.obs-list a:hover { color: var(--accent-bright); }
.obs-list .n { font-size: 13.5px; letter-spacing: .12em; color: #7FB6C2; }
.obs-list .t { font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1.25; }
.obs-list .d { font-size: 15.5px; color: #A8CCD5; max-width: 46ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Supporters ---------- */

.supporters { padding-block: 56px; }
.supporters .sup-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.supporters .sup-head h2 { font-size: 14px; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); font-family: var(--display); }
.supporters .sup-head .line { flex: 1; height: 1px; background: var(--rule); }
.supporters .sup-note { font-size: 15px; color: var(--faint); margin: 0 0 22px; max-width: 62ch; }

.sponsor-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.sponsor-list li { border-bottom: 1px solid var(--rule); }
.sponsor {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px;
  padding: 15px 0; color: var(--ink);
}
.sponsor:hover { color: var(--accent); }
.sponsor .sponsor-name { font-family: var(--display); font-weight: 500; font-size: 21px; line-height: 1.25; flex: 0 1 auto; }
.sponsor .sponsor-blurb { font-size: 16px; line-height: 1.55; color: var(--muted); flex: 1 1 240px; min-width: 240px; }
.sponsor.feat { padding: 19px 0; }
.sponsor.feat .sponsor-name { font-size: 25px; font-weight: 600; }
.sponsor-list--roll {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  column-gap: 40px; border-top: 0;
}
.sponsor-list--roll li { border-top: 1px solid var(--rule); border-bottom: 0; }
.sponsor-list--roll .sponsor .sponsor-name { font-size: 18.5px; }

/* ---------- Footer ---------- */

.site-foot { border-top: 1px solid var(--rule); background: #080C10; margin-top: 0; }
.site-foot .wrap { padding-block: 40px; display: flex; align-items: flex-start; justify-content: space-between; gap: 36px; flex-wrap: wrap; }
.site-foot .brand-name { font-size: 18px; }
.foot-nav { display: flex; gap: 22px; flex-wrap: wrap; font-size: 15px; }
.foot-nav a { color: var(--faint); }
.foot-nav a:hover { color: var(--accent); }
.foot-note { font-size: 14px; color: #46586A; max-width: 40ch; margin: 0; }

/* ---------- Page headers (category / article / utility) ---------- */

.page-head { padding-block: 60px 44px; border-bottom: 1px solid var(--rule); }
.page-head h1 { font-size: clamp(36px, 5.4vw, 68px); line-height: 1.02; letter-spacing: -.012em; margin-bottom: 20px; }
.page-head .deck { font-size: clamp(17px, 1.8vw, 20px); line-height: 1.55; color: var(--ink-dim); max-width: 60ch; margin: 0; }

/* ---------- Category list ---------- */

.cat-list { list-style: none; margin: 0; padding: 0; }
.cat-list li { border-bottom: 1px solid var(--rule); }
.cat-list > li > a { display: grid; grid-template-columns: 300px 1fr; gap: 36px; padding: 28px 0; align-items: start; color: var(--ink); }
.cat-list > li > a:hover { background: var(--panel-soft); color: var(--ink); }
.cat-list .thumb { aspect-ratio: 8 / 5; background: var(--ground-deep); overflow: hidden; }
.cat-list .thumb img { width: 100%; height: 100%; object-fit: cover; }
.cat-list h3 { font-size: 28px; line-height: 1.14; margin-bottom: 10px; }
.cat-list > li > a:hover h3 { color: var(--accent); }
.cat-list p { font-size: 16.5px; line-height: 1.62; color: var(--muted); margin: 0; max-width: 62ch; }

/* ---------- Sections hub ---------- */

.hub-block { padding-block: 44px; border-bottom: 1px solid var(--rule); }
.hub-block:last-of-type { border-bottom: 0; }
.hub-block .hb-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.hub-block h2 { font-size: 28px; }
.hub-block h2 a { color: var(--ink); }
.hub-block h2 a:hover { color: var(--accent); }
.hub-block .hb-blurb { font-size: 16px; color: var(--muted); margin: 0 0 20px; }
.hub-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 36px; }
.hub-links li { border-top: 1px solid var(--rule); }
.hub-links a { display: block; padding: 12px 0; color: var(--ink-dim); font-size: 17px; }
.hub-links a:hover { color: var(--accent); }

/* ---------- Article ---------- */

.article-head { padding-block: 52px 0; }
.article-head h1 { font-size: clamp(34px, 4.8vw, 58px); line-height: 1.04; letter-spacing: -.012em; margin-bottom: 20px; }
.article-head .lead { max-width: 56ch; }

.lead {
  font-size: clamp(19px, 2.1vw, 22px); line-height: 1.5; font-weight: 300;
  color: var(--ink-dim); margin: 0 0 34px;
}

.body { font-size: 19px; line-height: 1.72; color: var(--ink-dim); }
.body > p, .body > h2, .body > h3, .body > ul, .body > ol,
.body > .pullquote, .body > .callout, .body > .note, .body > .blockquote,
.body > .article-foot-nav { max-width: var(--measure); }
.body h2 {
  font-size: clamp(24px, 2.6vw, 31px); line-height: 1.18; color: var(--ink);
  margin: 46px 0 16px; padding-top: 14px; border-top: 1px solid var(--rule);
}
.body h3 { font-size: 22px; color: var(--ink); margin: 34px 0 12px; }
.body p strong { color: var(--ink); font-weight: 500; }
.body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(232,162,43,.45); }
.body ul, .body ol { padding-left: 1.2em; margin: 0 0 1.15em; }
.body li { margin-bottom: .45em; }
.body > .article-figure, .body > .figure-mat, .body > .notes-panel, .body > .further, .body > .gallery {
  max-width: none;
}

/* ---------- Figure system: three treatments, one drawing system ---------- */

/* 1 · plate — flush image, amber rule, caption split off to the right */
.article-figure { margin: 44px 0; }
.article-figure img { width: 100%; }
.article-figure figcaption {
  display: grid; grid-template-columns: 1fr 2fr; gap: 36px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--accent);
}
.article-figure figcaption .cap { font-family: var(--display); font-size: 20px; line-height: 1.32; color: var(--ink); font-weight: 500; }
.article-figure figcaption .cap-body { font-size: 16.5px; line-height: 1.6; color: var(--muted); margin: 0 0 8px; }
.credit { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin: 0; }

/* 2 · mat — the photograph sits on a panel with a generous mat */
.figure-mat { margin: 44px 0; background: var(--panel); padding: 26px; max-width: none; }
.figure-mat img { width: 100%; }
.figure-mat figcaption { margin-top: 20px; }
.figure-mat .cap { display: block; font-family: var(--display); font-size: 18px; line-height: 1.4; color: var(--ink); margin-bottom: 8px; font-weight: 500; }

/* 3 · bleed — breaks the measure, caption hangs in the margin */
.figure-bleed { margin: 52px 0; }
.figure-bleed .fb-img { width: 100%; height: clamp(280px, 46vw, 520px); overflow: hidden; background: var(--ground-deep); }
.figure-bleed .fb-img img { width: 100%; height: 100%; object-fit: cover; }
.figure-bleed figcaption { display: grid; grid-template-columns: 180px 1fr; gap: 32px; margin-top: 18px; }
.figure-bleed .fb-label { font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--secondary-bright); padding-top: 5px; }
.figure-bleed .cap { font-family: var(--display); font-size: 20px; line-height: 1.34; color: var(--ink); margin: 0 0 8px; font-weight: 500; max-width: 58ch; }

/* small inset, wrapped by prose */
.figure-inset { float: right; width: 288px; margin: 8px max(0px, calc(100% - var(--measure))) 26px 32px; max-width: 46%; }
.figure-inset img { width: 100%; }
.figure-inset figcaption { margin-top: 12px; border-top: 1px solid var(--secondary); padding-top: 10px; }
.figure-inset .cap { display: block; font-size: 15.5px; line-height: 1.5; color: var(--muted); margin-bottom: 6px; }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 40px 0; }
.gallery figure { margin: 0; }
.gallery figcaption { margin-top: 10px; font-size: 15px; color: var(--muted); line-height: 1.5; }

.map-figure { margin: 44px 0; }
.map-figure .map-slot { width: 100%; height: 380px; background: var(--secondary-deep); border: 1px solid var(--secondary-area); }
.map-figure figcaption { margin-top: 14px; font-size: 16px; color: var(--muted); }

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

.pullquote { margin: 44px 0; padding: 0 0 0 26px; border-left: 3px solid var(--accent); }
.pullquote p {
  font-family: var(--display); font-weight: 500; font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.36; color: var(--ink); margin: 0; max-width: 30ch;
}

.blockquote { margin: 40px 0; padding: 24px 26px; background: var(--panel); }
.blockquote p { font-size: 19px; line-height: 1.6; color: var(--ink); margin: 0 0 12px; font-style: italic; }
.blockquote cite { font-style: normal; font-size: 14.5px; letter-spacing: .06em; color: var(--muted); }

.callout { margin: 36px 0; background: var(--accent-ground); border-left: 3px solid var(--accent); padding: 22px 26px; }
.callout p { margin: 0; font-size: 17px; line-height: 1.62; color: #E9D9B4; }
.callout p + p { margin-top: .8em; }

.note {
  font-size: 16px; line-height: 1.6; color: var(--muted);
  border-left: 1px solid var(--secondary); padding-left: 18px; margin: 28px 0;
}

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

.notes-panel { margin: 48px 0; border-top: 2px solid var(--accent); background: var(--panel-soft); }
.notes-panel .np-head {
  display: flex; align-items: center; gap: 10px; padding: 16px 26px;
  font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
  border-bottom: 1px solid var(--rule);
}
.notes-panel .np-body { padding: 24px 26px 28px; }
.notes-panel .np-body > *:last-child { margin-bottom: 0; }
.notes-panel h3 {
  font-family: var(--display); font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--secondary-bright); margin: 26px 0 14px; font-weight: 600;
}
.notes-panel .np-body > h3:first-child { margin-top: 0; }

.datatable { width: 100%; border-collapse: collapse; font-size: 16.5px; margin: 0 0 8px; }
.datatable th, .datatable td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; line-height: 1.5; }
.datatable thead th { font-family: var(--display); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.datatable td:first-child { color: var(--ink); font-weight: 400; width: 34%; }
.datatable td:last-child { color: var(--muted); padding-right: 0; }
.datatable tr:last-child td { border-bottom: 0; }

.versus { width: 100%; border-collapse: collapse; font-size: 16.5px; margin: 0 0 8px; }
.versus th, .versus td { padding: 12px 14px; border-bottom: 1px solid var(--rule); text-align: left; line-height: 1.5; }
.versus thead th { font-family: var(--display); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.versus tbody th { font-weight: 400; color: var(--muted); font-family: var(--text); }
.versus td { color: var(--ink-dim); }

.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 0 0 8px; }
.statblock { background: var(--panel); padding: 20px 18px; display: flex; flex-direction: column; gap: 8px; }
.stat-num { font-family: var(--display); font-weight: 600; font-size: 34px; line-height: 1; color: var(--accent); }
.stat-label { font-size: 14.5px; line-height: 1.45; color: var(--muted); }

.timeline { list-style: none; margin: 0 0 8px; padding: 0; }
.timeline li { display: grid; grid-template-columns: minmax(140px, 210px) 1fr; gap: 26px; padding: 13px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.timeline li:last-child { border-bottom: 0; }
.t-when { font-family: var(--display); font-weight: 600; font-size: 16.5px; color: var(--accent); line-height: 1.35; }
.t-what { font-size: 16.5px; line-height: 1.55; color: var(--ink-dim); }

.chart { margin: 32px 0; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart figcaption { margin-top: 12px; font-size: 15px; color: var(--muted); line-height: 1.5; }
.chart .c-axis { stroke: var(--rule); stroke-width: 1; }
.chart .c-bar { fill: var(--secondary); }
.chart .c-bar-alt { fill: var(--accent); }
.chart .c-label { fill: var(--muted); font-family: var(--text); font-size: 13px; }
.chart .c-value { fill: var(--ink); font-family: var(--display); font-size: 13px; font-weight: 600; }

/* ---------- Cards / references ---------- */

.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 0 0 8px; }
.profile-card { background: var(--panel); padding: 22px; display: flex; flex-direction: column; }
.profile-card .p-photo { width: 100%; aspect-ratio: 3/2; object-fit: cover; margin-bottom: 16px; }
.profile-card h3 { font-size: 21px; margin-bottom: 4px; }
.profile-card .p-role { font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--secondary-bright); margin: 0 0 10px; }
.profile-card p { font-size: 16px; line-height: 1.6; color: var(--muted); }
.profile-card .p-links { margin-top: auto; padding-top: 10px; margin-bottom: 0; }
.profile-card .p-attr { font-size: 13px; color: var(--faint); margin: 8px 0 0; }
.profile-card.no-photo { border-left: 3px solid var(--secondary); }

.org-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0 0 8px; }
.org-card { display: flex; flex-direction: column; gap: 6px; background: var(--panel); padding: 16px 18px; color: var(--ink); }
.org-card:hover { background: #18222D; color: var(--ink); }
.org-logo { max-height: 34px; width: auto; object-fit: contain; }
.org-name { font-family: var(--display); font-size: 18px; font-weight: 500; }
.org-host { font-size: 13.5px; color: var(--faint); letter-spacing: .04em; }

.entity-ref { white-space: nowrap; }

.further { margin: 56px 0 0; padding-top: 22px; border-top: 2px solid var(--accent); }
.further h2 { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.further-grid, .related-links,
.body ul.further-grid, .body ul.related-links {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; background: none; border: 0; list-style: none; margin: 0; padding: 0;
}
.further-grid a, .related-links a { display: block; background: var(--ground); border: 1px solid var(--rule); padding: 20px 22px; color: var(--ink); font-family: var(--display); font-size: 19px; line-height: 1.28; height: 100%; }
.further-grid a:hover, .related-links a:hover { background: var(--panel); color: var(--accent); }
.related-links li { display: contents; }
.rl-sec { display: block; font-family: var(--text); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--secondary-bright); margin-bottom: 8px; }

.article-foot-nav { display: flex; gap: 22px; flex-wrap: wrap; padding: 30px 0 0; font-size: 15px; }

/* ---------- Utility pages ---------- */

.utility { padding-block: 90px 110px; }
.utility h1 { font-size: clamp(34px, 5vw, 60px); margin-bottom: 18px; }
.utility p { font-size: 19px; line-height: 1.65; color: var(--ink-dim); max-width: 58ch; }

.sg-section { padding-block: 44px; border-bottom: 1px solid var(--rule); }
.sg-section > h2 { font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 26px; }
.sg-label { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 30px 0 10px; }
.sg-narrow { max-width: 360px; border: 1px dashed var(--rule); padding: 16px; }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .lead-feature { grid-template-columns: 1fr; gap: 30px; }
  .band-amber .wrap { grid-template-columns: 1fr; gap: 40px; }
  .band-teal .obs-head { grid-template-columns: 1fr; gap: 22px; }
  .section-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-list > li > a { grid-template-columns: 220px 1fr; gap: 26px; }
}

@media (max-width: 860px) {
  :root { --gutter: 22px; }
  body { font-size: 17px; }
  .masthead .wrap { flex-direction: column; align-items: flex-start; gap: 16px; }
  .nav { gap: 14px 18px; }
  .nav a { font-size: 14.5px; }
  .opener .wrap { padding-block: 120px 44px; }
  .seconds { grid-template-columns: 1fr; }
  .section-grid { grid-template-columns: 1fr; }
  .article-figure figcaption { grid-template-columns: 1fr; gap: 14px; }
  .figure-bleed figcaption { grid-template-columns: 1fr; gap: 10px; }
  .figure-inset { float: none; width: 100%; max-width: none; margin: 28px 0; }
  .cat-list > li > a { grid-template-columns: 1fr; gap: 16px; }
  .cat-list .thumb { max-width: 100%; }
  .obs-list a { grid-template-columns: 1fr; gap: 6px; min-height: 0; align-items: start; }
  .timeline li { grid-template-columns: 1fr; gap: 4px; }
  .datatable td:first-child { width: 42%; }
  .body { font-size: 17.5px; }
  .sponsor { gap: 6px; }
  .sponsor .sponsor-blurb { min-width: 0; flex-basis: 100%; }
  .quiet { padding-block: 56px; }
  .band-amber .wrap, .band-teal .wrap { padding-block: 52px; }
}

@media (max-width: 400px) {
  .sg-narrow { max-width: 100%; }
}

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

/* ---------- additions ---------- */
.band { padding-block: 80px; }
.band--tight { padding-block: 56px; }
.notes-panel ul.np-list { list-style: none; margin: 0 0 8px; padding: 0; }
.notes-panel ul.np-list li { padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 16.5px; line-height: 1.55; color: var(--ink-dim); }
.notes-panel ul.np-list li:last-child { border-bottom: 0; }
.body > .figure-inset + p { margin-top: 0; }
.cat-list .thumb { display: block; }
.cat-list > li > a > span:last-child { display: block; }
.article-figure figcaption > span:last-child { display: block; }
.figure-bleed figcaption > span:last-child { display: block; }
.figure-mat figcaption .cap, .figure-inset figcaption .cap { display: block; }
.lead-feature .lf-figure img { width: 100%; }
.lead-feature .lf-figure figcaption { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--accent); font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.cat-note { font-size: 14.5px; color: var(--faint); margin: 22px 0 0; }
@media (max-width: 860px) { .band { padding-block: 54px; } }

.chart .c-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.chart .c-dot { fill: var(--accent); }
.chart .c-grid { stroke: var(--rule); stroke-width: 1; }
.chart.donut { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: center; }
.chart.donut svg { width: 200px; }
.donut-key { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.donut-key li { display: flex; align-items: center; gap: 10px; padding: 5px 0; color: var(--ink-dim); }
.donut-key i { width: 14px; height: 14px; display: block; flex: none; }
@media (max-width: 620px) { .chart.donut { grid-template-columns: 1fr; } }

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain}

/* sp-contain-guard: sponsor logos are wordmarks — never object-fit:cover (crops).
   object-fit ONLY. This block used to also set width:auto, padding:4px 10px,
   max-width:calc(100% - 20px) and min/max-height, which overrode Design's own frame and
   let every plate shrink-wrap its logo — the recurring "inconsistent sizing" and
   "lacks padding". Geometry belongs to Design. */
.sponsor img,.sponsor-box img,.sp-logo img{object-fit:contain!important;display:block;margin-left:auto;margin-right:auto;align-self:center}

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

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}

/* 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}

/* op-article-width: the article column was capped at 646px (78 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .body > p, .body > h2, .body > h3, .body > ul, .body > ol, .body > .pullquote, .body > .callout, .body > .note, .body > .blockquote, .body > .article-foot-nav) 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 div.body{--measure:min(88.947ch, 100%)!important}
}
@media (min-width:1600px){
  article div.body > :is(p:not([class])){font-size:clamp(19px,1.3194vw,22.8px)!important}
}
/* op-article-width:end */

/* op-article-head: the article header followed the text column (646px) and was left behind when the text went to 845px. Operator: "article header page with title + meta info that are super shrinked". Its containers now follow the text again by the text's own factor. */
@media (min-width:1024px){
  p.lead{max-width:min(806px, 100%)!important}
}
@media (min-width:1600px){
  p.lead{max-width:min(calc(clamp(806px, 55.972vw, 967px) + 0px), 100%)!important}
}
/* op-article-head:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); font-weight: 600; line-height: 1.1; margin: 0px; text-wrap: balance;}
.cat-list h2:where(.rt-h3){font-size: 28px; line-height: 1.14; margin-bottom: 10px;}
.cat-list > li > a:hover h2:where(.rt-h3){color: var(--accent);}
/* op-heading-levels:end */