/* ============================================================
   Dalton Skygazer — "Deep Field" (Option 1A)
   Shared stylesheet. HTML5 + CSS only. No JavaScript.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  --paper:      #0d0e13;   /* base background            */
  --paper-2:    #14161d;   /* raised surface / cards     */
  --paper-3:    #1b1e28;   /* raised surface hover       */
  --paper-hero: #05060a;   /* deepest, hero              */
  --ink:        #eef1f8;   /* primary text               */
  --muted:      #b9c1d4;   /* secondary text             */
  --dim:        #8b93a7;   /* tertiary / captions        */
  --faint:      #6f7788;   /* labels                     */
  --line:       rgba(255,255,255,.09);
  --line-2:     rgba(255,255,255,.16);
  --accent:     #7cc7ff;   /* luminous blue              */
  --accent-2:   #9678ff;   /* nebula violet              */
  --accent-3:   #5adcc8;   /* aurora teal                */
  --accent-warm:#ffb86b;   /* solar amber                */

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Manrope", system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --measure: 68ch;
  --radius:  16px;
  --radius-lg: 22px;
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1200px;
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(21px, 1.1rem + .45vw, 24px);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: #a9dbff; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); font-weight: 400; }
h2 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); }
h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
p  { text-wrap: pretty; }

/* Annotated fill-spots: render the data-fill spec faintly so the
   un-filled homepage still previews. Empty on purpose — user fills later. */
[data-fill]:empty::before {
  content: attr(data-fill);
  font-family: var(--mono);
  font-size: .8rem;      /* fixed — reads as an annotation, never inherits huge heading sizes */
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--faint);
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  opacity: .85;
  vertical-align: middle;
}
/* subtle guide box so empty spots read as "to fill" */
[data-fill]:empty {
  display: inline-block;
  min-height: 1.4em;
  padding: 2px 8px;
  border: 1px dashed rgba(124,199,255,.22);
  border-radius: 6px;
  background: rgba(124,199,255,.03);
}
h1[data-fill]:empty, h2[data-fill]:empty { display: block; }

/* Placeholder images the user swaps in later */
img[src="placeholder.jpg"] {
  background:
    radial-gradient(80% 80% at 32% 30%, rgba(150,120,255,.30), transparent 60%),
    radial-gradient(70% 70% at 76% 74%, rgba(124,199,255,.28), transparent 60%),
    var(--paper-hero);
  min-height: 180px;
  position: relative;
  color: transparent;
}

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(48px, 8vw, 104px); }
.section--tight { padding-block: clamp(36px, 5vw, 64px); }
.eyebrow {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.1rem;
  display: block;
}
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(24px, 4vw, 44px); }
.section-head h2 { margin: 0; }
.link-arrow { font-family: var(--sans); font-size: .92rem; color: var(--dim); white-space: nowrap; }
.link-arrow:hover { color: var(--accent); }
.measure { max-width: var(--measure); }

/* Decorative cosmos backdrop (not content — pure CSS) */
.cosmos { position: relative; background: linear-gradient(180deg, var(--paper-hero) 0%, var(--paper-hero) 82%, var(--paper) 100%); overflow: hidden; isolation: isolate; }
.cosmos::before {
  content: ""; position: absolute; inset: -60px; z-index: -2;
  background-image:
    radial-gradient(1.3px 1.3px at 12% 26%, #fff, transparent),
    radial-gradient(1px 1px at 34% 12%, #cfe3ff, transparent),
    radial-gradient(1px 1px at 58% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 76% 16%, #fff, transparent),
    radial-gradient(1px 1px at 88% 44%, #bcd0ff, transparent),
    radial-gradient(1px 1px at 22% 62%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 46% 78%, #fff, transparent),
    radial-gradient(1px 1px at 68% 68%, #d6e2ff, transparent),
    radial-gradient(1px 1px at 92% 82%, #fff, transparent),
    radial-gradient(.8px .8px at 6% 84%, #fff, transparent),
    radial-gradient(60% 55% at 74% 22%, rgba(124,199,255,.22), transparent 70%),
    radial-gradient(70% 60% at 20% 74%, rgba(150,120,255,.24), transparent 70%),
    radial-gradient(50% 42% at 52% 50%, rgba(90,220,200,.10), transparent 70%);
}
.cosmos::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 90% at 30% 30%, transparent 42%, rgba(5,6,10,.55) 100%);
}

/* ---------- Header / nav ---------- */
.site-header { position: relative; z-index: 5; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 24px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--serif); font-size: 1.5rem; color: var(--ink); }
.brand .mark { color: var(--accent); font-size: 1.05em; }
.nav-links { display: flex; gap: clamp(16px, 2vw, 30px); flex-wrap: wrap; font-size: .95rem; font-weight: 500; }
.nav-links a { color: var(--muted); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-cta { border: 1px solid var(--line-2); border-radius: 100px; padding: 9px 18px; font-size: .96rem; color: var(--ink); font-weight: 500; }
.nav-cta:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: .98rem; padding: 14px 26px; border-radius: 100px; cursor: pointer; border: 1px solid transparent; }
.btn--solid { background: var(--ink); color: var(--paper-hero); }
.btn--solid:hover { background: #fff; color: var(--paper-hero); }
.btn--ghost { border-color: var(--line-2); color: var(--ink); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Post meta (NO dates — by · category · read time) ---------- */
.post-meta { font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; color: var(--dim); text-transform: uppercase; display: flex; gap: .6em; flex-wrap: wrap; align-items: center; }
.post-meta .accent { color: var(--accent); }
.badge { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; background: var(--accent); color: var(--paper-hero); padding: 4px 9px; border-radius: 100px; font-weight: 600; }

/* ---------- Hero (featured) ---------- */
.hero { position: relative; }
.hero-inner { position: relative; z-index: 2; padding-block: clamp(48px, 9vw, 120px); }
.hero h1 { max-width: 15ch; margin-bottom: .35em; }
.hero .lead-fill { max-width: 52ch; color: var(--muted); font-size: 1.22rem; margin: 0 0 2rem; }
.hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hero-figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; }
.hero-figure img { width: 100%; min-height: clamp(220px, 42vw, 460px); object-fit: cover; }

/* ---------- Category / topic chips ---------- */
.topics { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.topics .label { font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); margin-right: 4px; }
.chip { border: 1px solid var(--line-2); border-radius: 100px; padding: 9px 18px; font-size: .96rem; color: var(--muted); }
.chip:hover { border-color: var(--accent); color: var(--ink); }
.chip[aria-current="true"], .chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--paper-hero); font-weight: 600; }

/* ---------- Photo gallery (bento) ---------- */
.gallery-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(130px, 15vw, 180px); gap: 16px; }
.gallery-bento figure { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; }
.gallery-bento img { width: 100%; height: 100%; object-fit: cover; }
.gallery-bento .g-wide { grid-column: span 2; grid-row: span 2; }
.gallery-bento .g-tall { grid-row: span 2; }
.gallery-bento figcaption { position: absolute; left: 16px; right: 16px; bottom: 14px; font-family: var(--serif); font-size: 1.1rem; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.7); }

/* ---------- Post feed cards ---------- */
.feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.5vw, 28px); }
.card { display: flex; flex-direction: column; }
.card-media { position: relative; border-radius: 14px; overflow: hidden; margin-bottom: 18px; aspect-ratio: 16 / 10; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media .badge { position: absolute; top: 12px; left: 12px; }
.card .post-meta { margin-bottom: 10px; }
.card h3 { margin: 0; }
.card h3 a { color: var(--ink); }
.card h3 a:hover { color: var(--accent); }

/* Featured feed card (side-by-side, stacks on mobile) */
.feature-row { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 56px); align-items: center; }

/* CSS-only "show all" expander */
.reveal { margin-top: clamp(24px, 4vw, 40px); }
.reveal > summary { list-style: none; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--sans); font-weight: 600; font-size: .95rem; color: var(--ink); border: 1px solid var(--line-2); border-radius: 100px; padding: 12px 24px; }
.reveal > summary::-webkit-details-marker { display: none; }
.reveal > summary:hover { border-color: var(--accent); color: var(--accent); }
.reveal > summary .plus { color: var(--accent); }
.reveal[open] > summary { display: none; }
.reveal .reveal-body { margin-top: clamp(18px, 2.5vw, 28px); }

/* ============================================================
   PALETTE_SPEC component vocabulary
   ============================================================ */

/* ----- Text / structure ----- */
.lead { font-family: var(--serif); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); line-height: 1.45; color: var(--ink); max-width: var(--measure); font-weight: 400; }
.pullquote { border-block: 1px solid var(--line-2); margin: clamp(32px,5vw,52px) 0; padding: clamp(24px,3.5vw,36px) 0; max-width: var(--measure); text-align: center; }
.pullquote::before { content: "\201C"; display: block; font-family: var(--serif); font-size: 3rem; line-height: .5; color: var(--accent); opacity: .55; margin-bottom: .15em; }
.pullquote p { font-family: var(--serif); font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.2rem); line-height: 1.22; color: var(--accent); margin: 0 auto; font-weight: 400; max-width: 28ch; }
.blockquote { margin: clamp(24px,3.5vw,40px) 0; padding: 4px 0 4px 28px; border-left: 3px solid var(--accent); max-width: var(--measure); }
.blockquote p { font-family: var(--serif); font-size: clamp(1.3rem,1.05rem + 1vw,1.75rem); line-height: 1.3; margin: 0 0 .6em; color: var(--ink); }
.blockquote cite { font-family: var(--mono); font-style: normal; font-size: .82rem; letter-spacing: .06em; color: var(--dim); }
.callout { margin: clamp(24px,3.5vw,40px) 0; padding: clamp(22px,3vw,32px); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); border-top: 3px solid var(--accent-2); max-width: var(--measure); }
.callout p { margin: 0; font-size: 1.08rem; color: var(--muted); }
.callout p:first-child::before { content: "Key takeaway"; display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-2); margin-bottom: .6em; }
.note { margin: 1.5em 0; padding: 14px 18px 14px 44px; position: relative; font-size: 1rem; color: var(--muted); background: rgba(124,199,255,.06); border-radius: 10px; max-width: var(--measure); }
.note::before { content: "✦"; position: absolute; left: 16px; top: 14px; color: var(--accent); }

/* ----- Data / comparison ----- */
.versus, .datatable { width: 100%; border-collapse: collapse; margin: clamp(24px,3.5vw,40px) 0; font-size: .95rem; }
.versus caption, .datatable caption { font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); text-align: left; margin-bottom: 12px; }
.versus th, .versus td, .datatable th, .datatable td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.versus thead th, .datatable thead th { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 500; }
.datatable tbody tr:hover { background: var(--paper-2); }
.datatable td:first-child, .versus td:first-child { color: var(--ink); font-weight: 500; }
.versus th:not(:first-child), .versus td:not(:first-child) { text-align: center; }
.versus tbody th { font-family: var(--sans); color: var(--muted); font-weight: 500; text-align: left; }
.versus thead th:nth-child(2) { color: var(--accent); }
.versus thead th:nth-child(3) { color: var(--accent-3); }

.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: clamp(24px,3.5vw,40px) 0; }
.statblock { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px,3vw,28px); display: flex; flex-direction: column; gap: 8px; }
.stat-num { font-family: var(--serif); font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); line-height: 1; color: var(--accent); }
.stat-label { font-size: .98rem; color: var(--muted); line-height: 1.4; }
.stat-label a { word-break: break-word; }

.timeline { list-style: none; margin: clamp(24px,3.5vw,40px) 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--accent), var(--accent-2)); }
.timeline li { position: relative; padding: 0 0 clamp(22px,3vw,30px) 34px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 3px solid var(--accent); }
.t-when { display: block; font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; color: var(--accent); margin-bottom: 5px; text-transform: uppercase; }
.t-what { display: block; color: var(--muted); font-size: 1rem; }

/* charts */
.chart { margin: clamp(24px,3.5vw,40px) 0; }
.chart svg { width: 100%; height: auto; overflow: visible; display: block; }
.chart figcaption { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-top: 14px; }
.chart .axis { stroke: var(--line-2); stroke-width: 1; }
.chart .grid-line { stroke: var(--line); stroke-width: 1; }
.chart .bar-rect { fill: var(--accent); }
.chart .bar-rect:nth-child(even) { fill: var(--accent-2); }
.chart .bar-label { fill: var(--dim); font-family: var(--mono); font-size: 10px; }
.chart .bar-value { fill: var(--ink); font-family: var(--mono); font-size: 10px; font-weight: 600; }
.chart .tick-label { fill: var(--faint); font-family: var(--mono); font-size: 9px; }
.chart .line-path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart .line-area { fill: url(#lineFill); }
.chart .line-dot { fill: var(--accent); }
.chart .donut-track { fill: none; stroke: var(--line); stroke-width: 18; }
.chart .donut-seg { fill: none; stroke-width: 18; stroke-linecap: round; }
.chart .donut-label { fill: var(--ink); font-family: var(--serif); font-size: 26px; text-anchor: middle; }

/* ----- Media / figures ----- */
.article-figure { margin: clamp(24px,3.5vw,40px) 0; }
.article-figure img { width: 100%; border-radius: var(--radius); }
.article-figure figcaption { font-size: .95rem; color: var(--dim); margin-top: 12px; font-style: italic; max-width: var(--measure); }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: clamp(24px,3.5vw,40px) 0; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; }
.gallery figcaption { font-size: .9rem; color: var(--dim); margin-top: 8px; }
.map-figure { margin: clamp(24px,3.5vw,40px) 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper-2); }
.map-figure svg { width: 100%; height: auto; display: block; background: radial-gradient(120% 120% at 50% 0%, #10131c, #080a10); }
.map-figure figcaption { font-size: .86rem; color: var(--dim); padding: 14px 18px; border-top: 1px solid var(--line); }

/* ----- Cards / references ----- */
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin: clamp(24px,3.5vw,40px) 0; }
.profile-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px,3vw,28px); display: flex; flex-direction: column; gap: 6px; }
.profile-card .p-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; min-height: 0; }
.profile-card.no-photo::before { content: attr(data-initials); width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 1.8rem; color: var(--accent); background: rgba(124,199,255,.12); border: 1px solid var(--line-2); margin-bottom: 10px; }
.profile-card h3 { margin: 0; font-size: 1.3rem; }
.profile-card .p-role { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
.profile-card p { margin: 0 0 4px; font-size: 1rem; color: var(--muted); }
.profile-card .p-links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: .88rem; }
.profile-card .p-attr { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; color: var(--faint); margin-top: 8px; }

.org-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: clamp(24px,3.5vw,40px) 0; }
.org-card { display: flex; align-items: center; gap: 14px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.org-card:hover { border-color: var(--line-2); background: var(--paper-3); }
.org-logo { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; min-height: 0; }
.org-card.no-logo::before { content: attr(data-initials); width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-family: var(--mono); font-weight: 600; color: var(--accent); background: rgba(124,199,255,.12); }
.org-name { display: block; color: var(--ink); font-weight: 600; font-size: .98rem; line-height: 1.2; }
.org-host { display: block; font-family: var(--mono); font-size: .74rem; color: var(--dim); margin-top: 3px; }

.entity-ref { color: var(--accent); border-bottom: 1px solid rgba(124,199,255,.35); white-space: nowrap; }
.entity-ref:hover { border-bottom-color: var(--accent); }

.further-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: clamp(24px,3.5vw,40px) 0; }
.further-grid a { display: block; background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; color: var(--ink); font-family: var(--serif); font-size: 1.2rem; line-height: 1.25; position: relative; }
.further-grid a::after { content: "→"; position: absolute; right: 18px; bottom: 16px; color: var(--accent); }
.further-grid a:hover { border-color: var(--accent); background: var(--paper-3); }

/* ============================================================
   Partners / Supporters
   ============================================================ */
.partners-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.sponsor { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 20px; min-height: 128px; color: var(--muted); transition: border-color .2s, background .2s; }
.sponsor:hover { border-color: var(--line-2); background: var(--paper-3); }
.sponsor img { width: 100%; max-width: 128px; height: 56px; object-fit: contain; min-height: 0; opacity: .92; }
.sponsor .sponsor-blurb { font-size: .9rem; color: var(--dim); line-height: 1.4; max-width: 30ch; }
.sponsor .sponsor-blurb:empty { display: none; }
/* Priority prominence: the first few partners lead, larger + featured */
.partners-featured { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-bottom: 18px; }
.partners-featured .sponsor { min-height: 200px; padding: 32px; background: var(--paper-2); border-top: 3px solid var(--accent); }
.partners-featured .sponsor img { height: 84px; max-width: 200px; }
.partners-featured .sponsor .sponsor-blurb { font-size: .92rem; color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--paper-hero); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-block: 40px; }
.footer-inner .brand { font-size: 1.25rem; }
.footer-tag { font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; color: var(--faint); }

/* ---------- Article layout ---------- */
.article { padding-block: clamp(36px, 5vw, 64px); }
.article-header { max-width: var(--measure); margin: 0 auto clamp(28px,4vw,44px); text-align: center; }
.article-header h1 { margin: 0 auto .4em; max-width: 20ch; }
.article-header .lead, .article-header .post-meta { max-width: var(--measure); margin-inline: auto; }
.article-header .post-meta { justify-content: center; }
.article-hero { border-radius: var(--radius-lg); overflow: hidden; margin: clamp(28px,5vw,52px) auto clamp(32px,5vw,56px); max-width: var(--maxw); }
.article-hero img { width: 100%; max-height: 560px; object-fit: cover; }
.article-body { max-width: var(--measure); margin-inline: auto; }
.article-body > p { font-size: 1.22rem; color: var(--muted); margin: 0 0 1.4em; }
.article-body > p strong { color: var(--ink); font-weight: 600; }
.article-body h2 { margin-top: 1.6em; }
.article-body > ul, .article-body > ol { max-width: var(--measure); color: var(--muted); padding-left: 1.3em; }
.article-body li { margin-bottom: .6em; }
.article-body a { border-bottom: 1px solid rgba(124,199,255,.35); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .feed { grid-template-columns: repeat(2, 1fr); }
  .feature-row { grid-template-columns: 1fr; }
  .gallery-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(150px, 34vw, 220px); }
  .gallery-bento .g-wide { grid-column: span 2; grid-row: span 1; }
  .gallery-bento .g-tall { grid-row: span 1; }
}
@media (max-width: 620px) {
  .feed { grid-template-columns: 1fr; }
  .gallery-bento { grid-template-columns: 1fr; }
  .gallery-bento .g-wide { grid-column: span 1; }
  .nav { justify-content: center; text-align: center; }
  .nav-links { justify-content: center; }
  .footer-inner { flex-direction: column; text-align: center; }
  /* overlaid gallery captions can outgrow their space — keep readable */
  .gallery-bento figcaption { position: static; padding: 10px 4px 0; text-shadow: none; color: var(--muted); font-size: 1rem; }
  .gallery-bento figure { display: flex; flex-direction: column; }
  .gallery-bento img { border-radius: var(--radius); }
}
@media (max-width: 400px) {
  :root { --gutter: 18px; }
}

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

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   1707px at 390, 29% of the whole page. Two columns bring it to
   1465px (14% shorter). Checked before writing: no new overflow, smallest mark still
   104px wide, longest blurb 8 lines, tile heights 203-277px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.partners-featured), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .partners-featured{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:18px!important}
    .partners-featured > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .partners-featured > * *{min-width:0!important;max-width:100%}
    .partners-featured img,.partners-featured svg{max-width:100%;height:auto}
  .partners-featured .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

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

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

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .partners-grid 8 rows at 1440). Operator: "we should probably limit that to display only 2" — held to two rows in that width band only; the copy stays in the markup. */
@media (min-width:641px){
  .partners-grid .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:2lh!important;min-height:0!important;overflow:hidden!important}
}
/* op-blurb-two-rows:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.card > div.card-media > img,
  article.feature-row > div.card-media > img,
  body > figure.article-hero > img,
  div.article-body > figure.article-figure > img,
  div.gallery-bento > figure > img,
  div.gallery-bento > figure.g-wide > img){height:auto}
/* op-img-dims:end */
@media (min-width:621px) and (max-width:1439px){.partners-grid.partners-grid:has(> [data-partner]){grid-template-columns:repeat(auto-fit,minmax(min(152px,calc(50% - 8px)),1fr))!important;justify-content:stretch!important}.partners-grid.partners-grid > [data-partner]{width:auto!important;max-width:none!important}}