/* ============================================================
   massry.news — Public Site Styles
   Inspired by The Times: clean, authoritative, serif-driven
   ============================================================ */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --color-bg: #FFFFFF;
  --color-bg-warm: #FAF9F6;
  --color-bg-section: #F5F4F0;
  --color-text: #1A1A1A;
  --color-text-secondary: #555555;
  /* Was #888888: 3.54 on white, 3.03 on the tint band, 3.28 on annotation
     panels — all under the 4.5 WCAG AA needs at these sizes, and it carries
     every date and source label on the site. #5A5A5A clears 4.5 on the worst
     of those grounds. */
  --color-text-muted: #5A5A5A;
  --color-accent: #8B1A1A;
  --color-accent-light: #B22222;
  --color-rule: #1A1A1A;
  --color-rule-light: #D0D0D0;
  --color-link: #1A1A1A;
  /* University at Albany brand, per the official style guide: purple leads,
     gold supports. Gold is never text and never sits on a light ground — it
     measures 1.35 on the footer cream and 1.91 against white. It appears only
     as a rule on purple, where it reads at 6.94. */
  --color-brand: #46166B;
  --color-brand-deep: #2E0E47;
  --color-brand-gold: #EEB211;

  --color-annotation-bg: #F7F6F3;
  --color-annotation-border: #D8D3C8;

  --font-headline: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Serif 4', Georgia, serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max-width: 1280px;
  --gutter: 24px;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}

a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover {
  color: var(--color-accent);
}

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

/* --- Pre-header (institutional bar) --- */
/* The institutional strip carries the university's identity, so it is the one
   place brand colour belongs without tinting the journalism. It also fixes a
   real defect: #888 on #f0efed measured 3.08, under the AA floor of 4.5. */
.pre-header {
  background: var(--color-brand);
  border-bottom: 2px solid var(--color-brand-gold);
  padding: 5px 0;
  text-align: center;
}

.pre-header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #FFFFFF;
}

/* --- Masthead --- */
.masthead {
  border-bottom: 3px solid var(--color-rule);
  padding: 24px 0 16px;
  text-align: center;
}

.masthead-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.masthead-date {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}

.masthead-title {
  font-family: var(--font-headline);
  /* --masthead-scale is set per site, because a three-letter wordmark and a
     two-word one do not want the same size. The clamp still governs how the
     mark responds to width; the multiplier only says how large this
     publication's mark is relative to the default. Unset means 1. */
  font-size: calc(clamp(2rem, 5vw, 3.5rem) * var(--masthead-scale, 1));
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
  color: var(--color-text);
}

/* The wordmark is the way home from anywhere, so it is a real link on every
   page — keyboard reachable, and on the homepage it clears search results
   rather than reloading a page the browser already has. It must not take link
   colour or underline: it is a wordmark, not a piece of running text. */
.masthead-title a {
  color: inherit;
  text-decoration: none;
}

.masthead-title a:hover {
  color: inherit;
}

.masthead-title a:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 6px;
}

.masthead-tagline {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin-top: 6px;
  letter-spacing: 0.03em;
}

/* --- Section Navigation --- */
.section-nav {
  border-bottom: 1px solid var(--color-rule-light);
  background: var(--color-bg);
  position: sticky;
  top: 0;
  z-index: 100;
  overflow: hidden;
}

/* Fade gradients — right side wider to cover icons area */
.section-nav::before,
.section-nav::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
}

.section-nav::before {
  left: max(0px, calc((100% - var(--max-width)) / 2));
  width: 60px;
  background: linear-gradient(to right, var(--color-bg) 20%, transparent);
}

.section-nav::after {
  right: max(0px, calc((100% - var(--max-width)) / 2));
  width: 80px;
  background: linear-gradient(to left, var(--color-bg) 30%, transparent);
}

.section-nav.fade-left::before {
  opacity: 1;
}

.section-nav.fade-right::after {
  opacity: 1;
}

/* Left scroll-hint chevron */
.nav-scroll-hint-left {
  position: absolute;
  left: max(0px, calc((100% - var(--max-width)) / 2));
  top: 0;
  bottom: 3px;
  width: 56px;
  z-index: 5;
  border: none;
  background: linear-gradient(to right, var(--color-bg) 0%, var(--color-bg) 62%, transparent 100%);
  justify-content: flex-start;
  padding-left: 10px;
  color: var(--color-text-secondary);
  font-family: var(--font-ui);
  font-size: 1.1rem;
  line-height: 1;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}

.section-nav.fade-left .nav-scroll-hint-left {
  opacity: 1;
  pointer-events: auto;
}

.nav-scroll-hint-left:hover {
  color: var(--color-text);
}

/* Right scroll-hint chevron — sits left of search icon */
.nav-scroll-hint {
  position: absolute;
  right: calc(max(0px, (100% - var(--max-width)) / 2) + 56px);
  top: 0;
  bottom: 3px;
  width: 56px;
  z-index: 5;
  border: none;
  /* Solid under the glyph, fading only on the side the labels scroll in from,
     so a section name never reads as "TECHNOLO>GY". */
  background: linear-gradient(to left, var(--color-bg) 0%, var(--color-bg) 62%, transparent 100%);
  justify-content: flex-end;
  padding-right: 10px;
  color: var(--color-text-secondary);
  font-family: var(--font-ui);
  font-size: 1.1rem;
  line-height: 1;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}

.section-nav.fade-right .nav-scroll-hint {
  opacity: 1;
  pointer-events: auto;
}

.nav-scroll-hint:hover {
  color: var(--color-text);
}

.section-nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 80px 0 var(--gutter); /* extra right padding for chevron + search icon */
  display: flex;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.section-nav-inner::-webkit-scrollbar {
  display: none;
}

.nav-link {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 16px;
  white-space: nowrap;
  border: none;
  background: none;
  cursor: pointer;
  transition: color 0.2s;
  border-bottom: 2px solid transparent;
}

.nav-link:hover {
  color: var(--color-text);
}

.nav-link.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  font-weight: 600;
}

/* --- Search --- */

/* Toggle button — pinned to right edge of sticky nav */
.nav-search {
  position: absolute;
  /* Anchored to the content column's right edge, not the viewport's, so the
     field it opens hangs directly beneath it. The 12px right padding keeps the
     opaque backdrop running all the way to the column edge, masking the tail of
     any nav item clipped behind it. */
  right: max(0px, calc((100% - var(--max-width)) / 2));
  top: 0;
  bottom: 3px;
  display: flex;
  align-items: center;
  z-index: 6;  /* above chevrons */
  background: var(--color-bg);
  padding-left: 4px;
  padding-right: 12px;
}

.search-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}
.search-toggle:hover { color: var(--color-text); }

/* Search bar — a discrete field aligned to the right edge of the content
   column, hanging directly beneath the toggle that opens it. Deliberately not
   a full-bleed input: the field carries its own rule so it reads as a piece of
   furniture on the page rather than a browser default. */
.search-bar {
  display: none;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-rule-light);
  padding: 10px 0;
  position: sticky;
  top: 45px; /* just below section-nav */
  z-index: 99;
}
.search-bar.open {
  display: block;
  animation: search-field-in 0.18s ease-out;
}

@keyframes search-field-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.search-bar-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  justify-content: flex-end;
}

/* The field itself — square corners and a hairline rule, in keeping with the
   vertical rules used throughout the layout. The accent underline on focus
   echoes the active section-nav tab. */
.search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 400px;
  max-width: 100%;
  padding: 7px 8px 7px 12px;
  background: var(--color-bg-warm);
  /* A form control's boundary is a UI component under WCAG 1.4.11 and needs
     3:1, not the 1.54 that --color-rule-light gives. Kept local so the
     decorative hairlines elsewhere keep their lightness. */
  border: 1px solid #949494;
  /* The heavier bottom rule is this control's most visible boundary, so it is
     the one 1.4.11 is really about — it kept --color-rule-light and stayed at
     1.54 after the shorthand above was fixed. */
  border-bottom: 2px solid #949494;
  transition: border-color 0.2s, background 0.2s;
}

.search-field:focus-within {
  background: var(--color-bg);
  border-color: var(--color-text-muted);
  border-bottom-color: var(--color-accent);
}

.search-field-icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: color 0.2s;
}
.search-field:focus-within .search-field-icon {
  color: var(--color-accent);
}

.search-bar-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.4;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text);
  outline: none;
}
.search-bar-input::placeholder {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Esc affordance, separated by a hairline rather than sitting loose */
.search-bar-close {
  flex-shrink: 0;
  background: none;
  border: none;
  border-left: 1px solid var(--color-rule-light);
  cursor: pointer;
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px 2px 10px;
  transition: color 0.2s;
}
.search-bar-close:hover {
  color: var(--color-accent);
}

/* Search results overlay */
.search-results-overlay {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 32px var(--gutter);
  min-height: 200px;
}

.search-results-count {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 24px;
}

/* Card-style result */
.search-result-card {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--color-rule-light);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
.search-result-card:first-child { border-top: none; }

/* Articles with no usable thumbnail keep the column rather than sliding their
   text into the image's place — reserved whitespace, not a placeholder box
   (the layout omits missing images elsewhere too). */
.search-result-card.no-thumb {
  padding-left: 160px; /* 140px image + 20px gap */
}

.search-result-image {
  flex-shrink: 0;
  width: 140px;
  height: 94px;
  overflow: hidden;
}
.search-result-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.search-result-body {
  flex: 1;
  min-width: 0;
}

.search-result-meta {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  margin-bottom: 4px;
}

.search-result-title {
  font-family: var(--font-headline);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 6px;
  color: var(--color-text);
}
.search-result-card:hover .search-result-title {
  color: var(--color-accent);
}

.search-result-desc {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: 10px;
}

/* Pedagogical relevance box */
.search-result-relevance {
  background: #faf6f0;
  border-left: 3px solid var(--color-accent);
  padding: 10px 14px;
  margin-top: 8px;
}
.search-result-relevance-label {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  margin-bottom: 4px;
}
.search-result-relevance-text {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.search-no-results {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  text-align: center;
  padding: 60px 0 40px;
}

.search-loading {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
  padding: 60px 0 40px;
}

/* Below the field's natural width, let it fill the gutters instead of
   floating in a narrow column on the right. */
@media (max-width: 560px) {
  .search-field { width: 100%; }
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .search-result-card { flex-direction: column; gap: 10px; }
  .search-result-card.no-thumb { padding-left: 0; }
  .search-result-image { width: 100%; height: 160px; }
  .search-bar-input { font-size: 0.9rem; }
}

/* --- Content Area --- */
.content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: 60vh;
}

/* --- Loading State --- */
.loading {
  text-align: center;
  padding: 80px 0;
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.875rem;
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-rule-light);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* --- Empty State --- */
.empty-state {
  text-align: center;
  padding: 80px 0;
}

.empty-state h2 {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.empty-state p {
  color: var(--color-text-secondary);
  font-family: var(--font-ui);
  font-size: 0.9rem;
}

/* --- Hero Article --- */
.hero {
  padding: 32px 0;
  border-bottom: 1px solid var(--color-rule-light);
  margin-bottom: 32px;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.hero-image-link {
  display: block;
}

.hero-image {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  background: var(--color-bg-section);
}

.hero-content {
  padding-top: 8px;
}

.hero-source {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: 8px;
}

.hero-title {
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 12px;
}

.hero-title a {
  color: inherit;
}

.hero-title a:hover {
  color: var(--color-accent);
}

.hero-description {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 12px;
}

/* --- Structured Annotation (hero + lead) --- */
.structured-annotation {
  margin-top: 8px;
}

.structured-annotation .annotation-section {
  padding: 8px 0;
  border-top: 1px solid var(--color-rule-light);
}

.structured-annotation .annotation-section:first-child {
  border-top: none;
  padding-top: 0;
}

.structured-annotation .annotation-section-label {
  font-family: var(--font-ui);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: 3px;
}

.structured-annotation .annotation-section-text {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--color-text-secondary);
}

/* Legacy single-block annotation fallback */
.hero-annotation {
  background: var(--color-annotation-bg);
  border-left: 3px solid var(--color-annotation-border);
  padding: 12px 16px;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin-top: 8px;
}

.hero-annotation strong {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: 4px;
}

.hero-meta {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 12px;
}

/* Hero video embed (iframe) */
.hero-inner .lead-video-embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: var(--color-rule-light);
  margin-bottom: 0;
}

.hero-inner .lead-video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Hero video thumbnail (overrides the iframe aspect-ratio hack above) */
.hero-inner .video-thumb-link.lead-video-embed {
  height: auto;
  padding-bottom: 0;
}

/* --- Section Blocks --- */
.section-block {
  margin-bottom: 44px;
}

/* The section's closing rule is redundant against the next section's own
   3px rule and margin — so the last area in a block stops short. */
.section-block-inner > .section-lead-area:last-child,
.section-block-inner > .section-equal-row:last-child,
.section-block-inner > .wide-lead-area:last-child,
.section-block-inner > .overlay-lead-area:last-child,
.section-block-inner > .section-tertiary-row:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.section-more-link {
  display: block;
  text-align: right;
  margin-top: 16px;
  padding-top: 12px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.section-more-link a {
  color: var(--color-accent);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}
.section-more-link a:hover {
  color: var(--color-accent-light);
}
.section-more-link .more-arrow {
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.15s ease;
}
.section-more-link a:hover .more-arrow {
  transform: translateX(3px);
}

/* ============================================================
   Section bands — the page is punctuated, not uniform.
   A tinted band every third section; the picture-led section runs dark.
   Bands break the content column and bleed to the window edge.
   ============================================================ */
.section-block-inner {
  /* Inside a plain section this is a no-op; inside a band it re-establishes
     the content column against the full-bleed ground. */
  max-width: 100%;
}

/* Full-bleed ground, but content on the same line as everywhere else.
   
   The gutter was being counted twice. `50%` here resolves against the section's
   own containing block — the content column, already inset by the gutter — so
   `calc(50vw - 50%)` is itself the distance back out to the viewport edge.
   Adding `var(--gutter)` on top pushed banded content to 48px while plain
   sections sat at 24px, and the page's left edge stepped in and out by 24px
   every time a band passed. The background still bleeds; only the text stops
   moving. */
.section-block--tint,
.section-block--dark {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 34px calc(50vw - 50%) 38px;
}

/* The tint was 4% off white — below the point where a reader registers a change
   of ground, and lighter than the annotation panels sitting inside it. Deeper
   ground plus hairline edges so the band has a visible beginning and end. */
.section-block--tint {
  background: #EFEDE6;
  border-top: 1px solid #DCD8CC;
  border-bottom: 1px solid #DCD8CC;
}

/* In a tinted band the lead's annotation is not another boxed panel — it is set
   as an editorial standfirst, in serif, under a short accent rule. This is the
   band's real differentiator: a mirrored layout reads as the same treatment
   flipped, but a change of typographic register reads as a different kind of
   page furniture. */
.section-block--tint .lead-annotation {
  background: none;
  border-left: none;
  border-top: 2px solid var(--color-accent);
  padding: 14px 0 0;
  margin-top: 16px;
  max-width: 62ch;
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--color-text);
}
.section-block--tint .lead-annotation strong {
  font-family: var(--font-ui);
  margin-bottom: 7px;
}
.section-block--tint .annotation-brief {
  border-top-color: #DCD8CC;
}
.section-block--tint .sidebar-item,
.section-block--tint .headline-list-item,
.section-block--tint .lead-sidebar,
.section-block--tint .section-equal-row,
.section-block--tint .section-lead-area,
.section-block--tint .wide-lead-area {
  border-color: #DCD8CC;
}

/* A banded section announces itself: the heading sits in small caps against a
   rule rather than wearing the same 3px black rule as every plain section. */
.section-block--tint .section-header,
.section-block--dark .section-header {
  border-top: none;
  padding-top: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.section-block--tint .section-header::after,
.section-block--dark .section-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #C9C4B6;
}
.section-block--dark .section-header::after {
  background: rgba(255, 255, 255, 0.22);
}
/* Outranks a source label by size as well as colour.
   
   Colour alone is not enough to separate these two: source names are coloured
   by publication, and .source-nyt is the same #1A1A1A this heading uses — so a
   tinted section leading with a New York Times story would put the heading and
   the source in the identical colour, weight and case again. At 0.72rem they
   were also within a third of a pixel of each other. 0.82rem against 0.70rem
   is a difference the eye reads as rank rather than as noise, and it holds
   whichever publication the section happens to lead with. */
.section-block--tint .section-header h2,
.section-block--dark .section-header h2 {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  white-space: nowrap;
}
/* Ink, not accent.
   
   Maroon on this site means "this is about where the article came from" — it
   is the source name on every hero, lead and card. The banded section heading
   had borrowed that colour, which put MARKETING and ADAGE.COM in the same
   family, the same weight, the same case, the same colour and within a third
   of a pixel of the same size: two different kinds of information wearing
   identical clothes, separated only by letter-spacing, which reads as "a bit
   wider" rather than "a different thing".
   
   The dark band already resolved this the right way — its heading is white
   while its sources are pink — so the tint band was the one place the rule
   broke. Structure is ink; attribution is maroon. */
.section-block--tint .section-header h2 {
  color: var(--color-text);
}

.section-block--dark {
  background: #17171A;
  color: #EDEBE6;
}

/* Dark band: invert the type, keep the accent legible against near-black. */
.section-block--dark .section-header {
  border-top-color: #4A4A50;
}
.section-block--dark .section-header h2,
.section-block--dark .lead-title a,
.section-block--dark .article-card-title a,
.section-block--dark .headline-list-title {
  color: #FFFFFF;
}
.section-block--dark .lead-description,
.section-block--dark .article-card-description,
.section-block--dark .text-feature-note {
  color: #C9C6BF;
}
.section-block--dark .text-feature-title a {
  color: #FFFFFF;
}
.section-block--dark .text-feature-source,
.section-block--dark .text-feature-label {
  color: #D98C8C;
}
.section-block--dark .lead-meta,
.section-block--dark .article-card-meta,
.section-block--dark .annotation-line {
  color: #96938C;
}
.section-block--dark .lead-source,
.section-block--dark .article-card-source,
.section-block--dark .headline-list-source,
.section-block--dark .annotation-brief-label,
.section-block--dark .section-more-link a {
  color: #D98C8C;
}
.section-block--dark .lead-title a:hover,
.section-block--dark .article-card-title a:hover,
.section-block--dark .headline-list-item a:hover .headline-list-title {
  color: #D98C8C;
}
.section-block--dark .headline-list-item,
.section-block--dark .sidebar-item,
.section-block--dark .lead-sidebar,
.section-block--dark .section-lead-area {
  border-color: rgba(255, 255, 255, 0.16);
}

/* ============================================================
   Species: picture-led card — headline set over the photograph
   ============================================================ */
.overlay-lead-area {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 0 32px;
  align-items: start;
}

.overlay-card {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 380px;
  text-decoration: none;
  background: #17171A;  /* the dark band's own ground, not a blacker box on top of it */
}

.overlay-card-image {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.overlay-card:hover .overlay-card-image {
  transform: scale(1.03);
}

.overlay-card-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 38%, rgba(0,0,0,0.05) 78%);
}

.overlay-card-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 30px;
}

.overlay-card-source {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #F0B8B8;
  margin-bottom: 8px;
}

.overlay-card-title {
  font-family: var(--font-headline);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.14;
  color: #FFFFFF;
  margin-bottom: 8px;
}

.overlay-card-standfirst {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  max-width: 46ch;
}

/* Textual fallback when the lead has no photograph */
.overlay-card--textual {
  display: block;
  min-height: 0;
  padding: 30px 32px;
  background: rgba(255, 255, 255, 0.05);
  border-left: 3px solid var(--color-accent);
}

/* ============================================================
   Species: dense headline list — no pictures, no annotations
   ============================================================ */
.headline-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.headline-list-item {
  border-bottom: 1px solid var(--color-rule-light);
}
.headline-list-item:last-child {
  border-bottom: none;
}

.headline-list-item a {
  display: block;
  padding: 11px 0;
  text-decoration: none;
}

.headline-list-source {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-accent);
  margin-bottom: 3px;
}

.headline-list-title {
  display: block;
  font-family: var(--font-headline);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.26;
  color: var(--color-text);
  transition: color 0.15s;
}
.headline-list-item a:hover .headline-list-title {
  color: var(--color-accent);
}

/* The rail variant sits against a rule, like the sidebar it replaces */
.lead-sidebar--list {
  padding-left: 24px;
}

/* Rail beside a picture-led lead */
.overlay-lead-rail {
  padding-left: 4px;
}

/* ============================================================
   Text parts of the picture-less overlay lead
   ============================================================
   These were the pull-quote species, now retired. That species set our own
   annotation in a <blockquote>, under a decorative quotation mark, in italic,
   above a headline and a masthead — every one of those a signal that somebody
   had said it. Nobody had. Beside a card it also read as a line lifted from
   *that* article: wrong speaker, wrong story.
   
   Only the dark band's picture-led lead still uses these, for the case where
   it has no picture to lead with. Everything else is a card, because two
   articles are two articles. Order is the card's order: source, headline, then
   the annotation under the label it wears everywhere else on the site.
   ------------------------------------------------------------ */

.text-feature-source {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: 6px;
}

.text-feature-title {
  margin: 0 0 12px;
}
.text-feature-title a {
  display: block;
  font-family: var(--font-headline);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.24;
  color: var(--color-text);
}
.text-feature-title a:hover {
  color: var(--color-accent);
}

.text-feature-note {
  border-top: 1px solid var(--color-annotation-border);
  padding-top: 12px;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

/* The same label the annotation carries in every other species, so the reader
   meets one voice rather than two. */
.text-feature-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 5px;
}

/* ============================================================
   Annotation, in three visible strengths
   ============================================================ */

/* Standard card: labelled, but no tinted box */
.annotation-brief {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--color-rule-light);
}
.annotation-brief-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-accent);
  margin-bottom: 3px;
}

/* Sidebar item: one unlabelled line, trimmed to two */
.annotation-line {
  font-family: var(--font-ui);
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  margin-top: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.section-header {
  border-top: 3px solid var(--color-rule);
  padding-top: 18px;
  margin-bottom: 22px;
}

.section-header h2 {
  font-family: var(--font-headline);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
}

/* --- Section Lead Area: lead + sidebar (Times-style asymmetric) --- */
.section-lead-area {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 0;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-rule-light);
}

/* Lead (left column): image above, text below */
.lead-main {
  padding-right: 24px;
}

.lead-main .lead-image {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  max-height: 260px;
  background: var(--color-bg-section);
  margin-bottom: 14px;
}

.lead-main .lead-source {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: 8px;
}

.lead-main .lead-title {
  font-family: var(--font-headline);
  font-size: clamp(1.3rem, 2.5vw, 1.85rem);
  font-weight: 700;
  line-height: 1.18;
  margin-bottom: 13px;
}

.lead-main .lead-title a { color: inherit; }
.lead-main .lead-title a:hover { color: var(--color-accent); }

.lead-main .lead-description {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 10px;
}

.lead-main .lead-meta {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

/* Lead annotation — shown inline, not behind a toggle */
.lead-annotation {
  background: var(--color-annotation-bg);
  border-left: 3px solid var(--color-annotation-border);
  padding: 14px 18px;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--color-text-secondary);
  margin-top: 14px;
}

.lead-annotation strong {
  display: block;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: 3px;
}

/* Sidebar (right column): vertical divider + stacked items.
   
   24px, not 28. Every other column divider on the page is 24px of padding, a
   1px rule and 24px of padding; the lead-and-rail used 28 and so drew a 57px
   gutter where the rest of the page draws 49. One page should have one gutter,
   or the columns are only approximately in conversation with each other. */
.lead-sidebar {
  border-left: 1px solid var(--color-rule-light);
  padding-left: 24px;
  display: flex;
  flex-direction: column;
}

/* A full rail spreads its items down the column rather than leaving a void at
   the foot of the page. With only one or two items, spreading would open a
   bigger hole than it closes, so they stay stacked at the top. */
.lead-sidebar--spread {
  justify-content: space-between;
}

/* Lead-only: no sidebar, lead fills full width */
.section-lead-area.lead-only {
  grid-template-columns: 1fr;
}

/* --- Horizontal layout for single-item sections (image left, text right) --- */
.section-lead-area.lead-only .lead-main {
  /* Same halves and the same 49px gutter as every other two-part row. This was
     the third place carrying a private 45%/28px split, and a single-article
     section is the one place a reader has nothing else to compare against — so
     its picture being a different width from every other picture on the page
     was the most visible of the three. */
  padding-right: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 49px;
  align-items: start;
}

.section-lead-area.lead-only .lead-main > a:first-child img {
  width: 100%;
  height: auto;
  display: block;
}

/* The annotation already spans both columns here, but its 62ch measure — which
   is what keeps it readable — leaves the right half of the row empty, a
   623x166 hole under the standfirst. Removing the cap is not the answer: the
   full row is 1184px, about 145 characters a line. Setting the block in two
   columns keeps the measure and fills the row. Above the tablet breakpoint
   only, since below it the row is a single stacked column already. */
.section-lead-area.lead-only .lead-main > .lead-annotation {
  grid-column: 1 / -1;
}

@media (min-width: 901px) {
  .section-lead-area.lead-only .lead-main > .lead-annotation {
    max-width: none;
    column-count: 2;
    column-gap: 28px;
  }
  /* The label heads the block, not the first column. */
  .section-lead-area.lead-only .lead-main > .lead-annotation strong {
    column-span: all;
  }
}

.section-equal-row.cols-1 .article-card {
  /* Halves, like every other two-part row on the page.
     
     This was 45%/1fr, a split that matched nothing: its picture came out 554px
     wide and stopped at x=578 while every other picture in the same section
     stopped at 616 or 1256. One row using a private ratio is enough to make a
     section look improvised, and there was no reason for the 45% beyond its
     being typed. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 49px, not 28: the gutter everywhere else on this page is 24px of padding,
     a 1px rule, and 24px of padding. A nested grid using its own 28px put this
     row's picture 10px wider than its neighbours' and ended it 10px past their
     edge. The gutter is a page-level measurement, not a per-component taste. */
  gap: 0 49px;
  align-items: start;
}

/* The horizontal card is a two-column grid, but the card's text nodes are
   siblings of the image — left to auto-place they alternated columns, putting
   the headline underneath the picture and the standfirst beside it. Pin the
   image to column one and send everything else to column two. */
.section-equal-row.cols-1 .article-card--with-media > a:first-child {
  grid-column: 1;
  grid-row: 1 / span 20;
}
.section-equal-row.cols-1 .article-card--with-media > *:not(a:first-child) {
  grid-column: 2;
}
/* Without a picture there is no second column to fill. */
.section-equal-row.cols-1 .article-card:not(.article-card--with-media) {
  display: block;
}

.section-equal-row.cols-1 .article-card > a:first-child img {
  width: 100%;
  height: auto;
  display: block;
}

/* Individual sidebar item */
.sidebar-item {
  padding: 13px 0;
  border-bottom: 1px solid var(--color-rule-light);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.sidebar-item:first-child {
  padding-top: 0;
}

.sidebar-item:last-child {
  border-bottom: none;
}

.sidebar-item-text {
  flex: 1;
  min-width: 0;
}

.sidebar-item-text .article-card-source {
  margin-bottom: 4px;
}

.sidebar-item-text .article-card-title {
  font-size: 1rem;
  margin-bottom: 4px;
  line-height: 1.3;
}

.sidebar-item-text .article-card-meta {
  margin-top: 4px;
}

.sidebar-item-thumb {
  width: 90px;
  min-width: 90px;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--color-bg-section);
  flex-shrink: 0;
}

/* --- Secondary Articles Row (standard cards with images, 2-col) --- */
.section-secondary-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-bottom: 20px;
}

.section-secondary-row .article-card {
  padding: 0 24px;
  border-left: 1px solid var(--color-rule-light);
}

.section-secondary-row .article-card:first-child {
  padding-left: 0;
  border-left: none;
}

/* --- Tertiary Articles Row (compact headlines, 3-col with dividers) --- */
.section-tertiary-row {
  border-top: 1px solid var(--color-rule-light);
  padding-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.section-tertiary-row .article-card-compact {
  padding: 0 20px;
  border-left: 1px solid var(--color-rule-light);
}

.section-tertiary-row .article-card-compact:first-child {
  padding-left: 0;
  border-left: none;
}

/* Tertiary row with only 1 or 2 items: shrink columns */
.section-tertiary-row.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.section-tertiary-row.cols-1 {
  grid-template-columns: 1fr;
}

/* --- Article Card (standard — secondary treatment) --- */
.article-card {
  display: flex;
  flex-direction: column;
}

.article-card-image {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  background: var(--color-bg-section);
  margin-bottom: 12px;
}

.article-card-source {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: 6px;
}

.article-card-title {
  font-family: var(--font-headline);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 8px;
}

.article-card-title a { color: inherit; }
.article-card-title a:hover { color: var(--color-accent); }

.article-card-description {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card-meta {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 8px;
}

/* --- Tertiary Card (compact headline-only) --- */
.article-card-compact {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.article-card-compact .article-card-source {
  font-size: 0.6rem;
  margin-bottom: 4px;
}

.article-card-compact .article-card-title {
  font-size: 0.95rem;
  margin-bottom: 4px;
  line-height: 1.3;
}

.article-card-compact .article-card-meta {
  margin-top: 4px;
}

/* --- Annotation Toggle (click-to-reveal on cards) --- */
.annotation-toggle {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--color-accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  transition: color 0.2s;
}

.annotation-toggle:hover {
  color: var(--color-accent-light);
}

.annotation-toggle .toggle-arrow {
  display: inline-block;
  font-size: 0.6rem;
  transition: transform 0.2s;
}

.annotation-toggle.open .toggle-arrow {
  transform: rotate(90deg);
}

.annotation-body {
  background: var(--color-annotation-bg);
  border-left: 2px solid var(--color-annotation-border);
  padding: 10px 12px;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--color-text-secondary);
  margin-top: 6px;
  display: none;
}

.annotation-body.visible {
  display: block;
}

/* --- Video Thumbnail (homepage cards) --- */
.video-thumb-link {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  /* No ground of its own.
     
     This was #000 and then, briefly, the page's rule colour — which only
     changed the bar from black to grey, because the bar was never letterboxing.
     This element is a grid cell, so it carries the column's 24px gutter
     padding, and it was painting a background across that padding: the gutter
     itself became a visible band down the left of every video in a wide lead.
     The padding is right — it is what puts the picture at x=665 with every
     other right-hand picture — so the background is what has to go. Behind it
     is the page, which is what a gutter should show. */
  background: transparent;
  margin-bottom: 12px;
  text-decoration: none;
}

.video-thumb-link.lead-video-embed {
  margin-bottom: 14px;
}

.video-thumb-link.wide-lead-video {
  margin-bottom: 0;
}

.video-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s;
}

.video-thumb-link:hover .video-thumb-img {
  opacity: 0.85;
}

.video-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 3px; /* optical center for triangle */
  transition: background 0.2s;
  pointer-events: none;
}

.video-thumb-link:hover .video-play-icon {
  background: rgba(200, 30, 30, 0.85);
}

/* --- Subtle lift for all card media (images + video thumbnails) --- */
.hero-image,
.lead-main .lead-image,
.wide-lead-image,
.article-card-image,
.sidebar-item-thumb,
.video-thumb-link {
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10), 0 0 1px rgba(0, 0, 0, 0.06);
}

/* Video-type article card: subtle indicator */
.article-card-video-type .article-card-source::before {
  content: '▶ ';
  font-size: 0.55rem;
}

/* --- Source Badges (color-coded) --- */
.source-ft { color: #8B4513; }
.source-nyt { color: #1A1A1A; }
.source-wsj { color: #025E93; } /* #0274B6 was 4.29 on the tint band */
.source-economist { color: #E3120B; }
.source-bloomberg { color: #472a91; }
.source-hbr { color: #8B0000; }

/* --- Layout Variant: Reversed lead (sidebar left, lead right) --- */
.section-lead-area.layout-reversed {
  grid-template-columns: 2fr 3fr;
}

.section-lead-area.layout-reversed .lead-sidebar {
  border-left: none;
  border-right: 1px solid var(--color-rule-light);
  padding-left: 0;
  padding-right: 24px;
  order: -1;
}

.section-lead-area.layout-reversed .lead-main {
  padding-right: 0;
  padding-left: 24px;
}

/* --- Layout Variant: Wide lead (full-width headline + image side by side) --- */
/* One gutter system per section.
   
   This used a 32px grid gap while .section-equal-row below it used gap:0 with
   the gutter as padding inside each cell. Two rows in the same section
   therefore had columns of 600px and 616px — nothing lined up vertically, and
   a section stopped reading as one thing. The gutter is now internal in both,
   so every row in a section shares the same column edges and the pictures
   stack on a single line down the page. */
.wide-lead-area {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* The gutter goes between the columns, not inside them.
     
     Briefly it was padding on each child, to match how .section-equal-row
     builds its gutter. That works there because the cell is an .article-card,
     which has no frame of its own — the border and shadow belong to the <img>
     inside it, so they still hug the picture.
     
     Here the cell can BE the picture: .video-thumb-link is in the framed group
     alongside the images, so 24px of padding put its border 24px out from the
     photograph and left white space showing inside the frame. A gap of 49px —
     the same 24 + 1px rule + 24 the rest of the page measures — puts the
     columns in the identical place without ever painting inside a frame. */
  gap: 0 49px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-rule-light);
  align-items: start;
}

.wide-lead-text .lead-source {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: 8px;
}

.wide-lead-title {
  font-family: var(--font-headline);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 12px;
}

.wide-lead-title a { color: inherit; }
.wide-lead-title a:hover { color: var(--color-accent); }

.wide-lead-description {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 10px;
}

.wide-lead-image {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  background: var(--color-bg-section);
}

/* The picture fills its column instead of sitting at the top of it.
   
   The two columns are a text side that grows with its content and a picture
   side whose height was fixed by an aspect ratio. A lead with a long "why it
   matters" panel therefore left the entire difference as white space under the
   photograph — measured at 330px of nothing below a 370px picture, which is
   most of the column.
   
   That is the same failure the rail patterns are guarded against in app.js: a
   cell that cannot grow leaves a hole, and a hole reads as a mistake rather
   than as space. object-fit: cover is already set, so filling crops rather
   than distorts.
   
   Scoped above 900px, which is where the two columns exist at all. Below it
   the area is a single column and there is no neighbour to match: applying a
   floor there made a phone's picture 358x225 where the ratio wanted 358x134,
   squaring off a landscape photograph for no reason. */
@media (min-width: 901px) {
  .wide-lead-area > a {
    display: block;
    align-self: stretch;
    min-height: 0;
  }

  .wide-lead-area > a > .wide-lead-image {
    height: 100%;
    min-height: 225px;
    /* The cap further down was the whole ceiling: with it in place the picture
       stayed 225px tall inside a column that had already stretched to 301, so
       the hole simply moved inside the frame. A floor is what was wanted, and
       min-height above is it. */
    max-height: none;
  }
}

.wide-lead-annotation {
  background: var(--color-annotation-bg);
  border-left: 3px solid var(--color-annotation-border);
  padding: 10px 14px;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--color-text-secondary);
  margin-top: 12px;
}

.wide-lead-annotation strong {
  display: block;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: 3px;
}

/* --- Layout Variant: Equal-weight row (2 or 3 cards) --- */
.section-equal-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  align-items: start;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-rule-light);
}

.section-equal-row .article-card {
  padding: 0 24px;
  border-left: 1px solid var(--color-rule-light);
}

.section-equal-row .article-card:first-child {
  padding-left: 0;
  border-left: none;
}

/* ...and the last cell flush to the right, which is the other half of the same
   rule. Only the first had been unpadded, so the opening cell was 592px wide
   and the closing one 567px — the gutter was being taken out of the last
   column's content instead of from between the columns, and two pictures in one
   section came out 25px different. Symmetry here is what makes the column edges
   agree. */
.section-equal-row .article-card:last-child {
  padding-right: 0;
}

/* A pull-quote in an equal row carries its own ground and accent rule, so it
   takes a gutter rather than the column divider the plain cards use. */

.section-equal-row.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.section-equal-row.cols-1 {
  grid-template-columns: 1fr;
}

/* --- Annotation sidebar (for single-article sections) --- */
.annotation-sidebar .annotation-sidebar-inner {
  padding-top: 4px;
}

.annotation-sidebar .annotation-section-label {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: 8px;
}

.annotation-sidebar .annotation-section-text {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* --- Dividers --- */
.section-divider {
  border: none;
  border-top: 1px solid var(--color-rule-light);
  margin: 32px 0;
}

/* --- Footer --- */
/* The footer wore the same 3px black rule as every .section-header — seven of
   them on a full homepage — on a ground 1.05 off white. At page scale it read
   as one more section, and as the fourth pale band after the two tinted ones.
   Two terminal signals instead: the darkest ground on the page, so the weight
   never reverses at the end; and a thick-thin rule, which appears nowhere else.
   A neutral near-black was measured and rejected — .section-block--dark already
   owns that, at 1.10 away. Brand purple sits 1.35 off the same band, which is
   thin on luminance alone; the hue carries the separation, and this was checked
   on the rendered page rather than settled by the ratio. Bracketing the purple
   bar at the top, it reads as the institution closing the page. */
.site-footer {
  position: relative;
  border-top: 4px solid var(--color-brand-deep);
  background: var(--color-brand);
  padding: 40px 0;
  margin-top: 60px;
}

/* The end-mark, in gold — legible here at 6.94 because it lies on purple.
   top:0 sits it flush under the border: `top` is measured from the padding box,
   which begins inside the border, so any positive value opens a purple gap and
   the rule reads as three stripes rather than one two-tone edge. */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-brand-gold);
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  align-items: start;
}

.footer-left {
  border-right: 1px solid rgba(255, 255, 255, 0.24);
  padding-right: 40px;
}

.footer-brand {
  font-family: var(--font-headline);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  color: #FFFFFF;
}

.footer-tagline {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: #D9CFE6;
  letter-spacing: 0.02em;
}

.footer-right {
  padding-top: 2px;
}

.footer-text {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: #D9CFE6;
  line-height: 1.6;
  margin-bottom: 12px;
}

/* A link in the footer credit must take the footer's own colour, not the
   page's link colour. --color-link is near-black, which is correct on a white
   page and unreadable on the purple band: 1.32 against the Albany purple and
   1.51 against SPJIMR's, where 4.5 is the floor. Inheriting gives 8.83 and
   7.70. The underline carries the affordance that colour no longer can. */
.footer-text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.footer-text a:hover,
.footer-text a:focus-visible {
  color: #FFFFFF;
}

/* The school's name is emphasised in the colophon; it needs to outrank the
   body tone around it rather than inherit it. */
.footer-text strong {
  color: #FFFFFF;
}

/* Was --color-text-muted (#888): 3.37 against the old ground, under AA.
   #B9A9CC on brand purple measures 6.05. */
.footer-copyright {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  color: #B9A9CC;
}

/* --- Responsive --- */

/* Tablet */
@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }

  .section-lead-area,
  .section-lead-area.layout-reversed {
    grid-template-columns: 1fr;
  }

  .lead-main,
  .section-lead-area.layout-reversed .lead-main {
    padding-right: 0;
    padding-left: 0;
    margin-bottom: 20px;
  }

  .lead-sidebar {
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--color-rule-light);
    padding-left: 0;
    padding-right: 0;
    padding-top: 16px;
    order: 0;
  }

  /* Revert horizontal grid layout on tablet — stack image above text */
  .section-lead-area.lead-only .lead-main,
  .section-equal-row.cols-1 .article-card {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .section-lead-area.lead-only .lead-main > a:first-child,
  .section-equal-row.cols-1 .article-card > a:first-child {
    grid-row: auto;
  }

  .wide-lead-area {
    grid-template-columns: 1fr;
  }

  .section-equal-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .section-secondary-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .section-tertiary-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .nav-link {
    padding: 10px 12px;
    font-size: 0.7rem;
  }
}

/* Mobile */
@media (max-width: 600px) {
  :root {
    --gutter: 16px;
  }

  .masthead {
    padding: 16px 0 12px;
  }

  .masthead-title {
    font-size: 1.75rem;
  }

  .section-lead-area,
  .section-lead-area.layout-reversed {
    grid-template-columns: 1fr;
  }

  .section-lead-area.layout-reversed .lead-main {
    padding-left: 0;
  }

  .section-lead-area.layout-reversed .lead-sidebar {
    border-right: none;
    padding-right: 0;
    order: 2;
  }

  .lead-main .lead-title {
    font-size: 1.25rem;
  }

  .wide-lead-area {
    grid-template-columns: 1fr;
  }

  .wide-lead-title {
    font-size: 1.25rem;
  }

  .section-equal-row {
    grid-template-columns: 1fr;
  }

  /* Stacked, the columns become rows and the gutter becomes vertical. */
  .wide-lead-area {
    gap: 0;
  }

  .section-equal-row .article-card {
    padding: 0;
    border-left: none;
    border-bottom: 1px solid var(--color-rule-light);
    padding-bottom: 16px;
    margin-bottom: 16px;
  }

  .section-secondary-row {
    grid-template-columns: 1fr;
  }

  .section-secondary-row .article-card {
    padding: 0;
    border-left: none;
    border-bottom: 1px solid var(--color-rule-light);
    padding-bottom: 16px;
    margin-bottom: 16px;
  }

  .section-tertiary-row {
    grid-template-columns: 1fr;
  }

  .section-tertiary-row .article-card-compact {
    padding: 0;
    border-left: none;
    border-bottom: 1px solid var(--color-rule-light);
    padding-bottom: 12px;
    margin-bottom: 12px;
  }

  .hero-annotation {
    font-size: 0.8rem;
  }

  .article-card-title {
    font-size: 1rem;
  }

  .sidebar-item-thumb {
    width: 70px;
    min-width: 70px;
  }

  .nav-link {
    padding: 10px 10px;
    font-size: 0.65rem;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }

  .footer-left {
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.24);
    padding-bottom: 16px;
  }
}

/* --- Utility --- */
/* 2.4.1 Bypass Blocks: the section nav is eight-plus controls before any
   article, and without this a keyboard user tabs through all of them on every
   page. Off-screen until focused, then it lands in the top-left. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--color-brand);
  color: #FFFFFF;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 10px 16px;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
  outline: 2px solid var(--color-brand-gold);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ============================================================
   Responsive behaviour for the newer species and bands
   ============================================================ */
@media (max-width: 900px) {
  .overlay-lead-area {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .overlay-lead-rail {
    padding-left: 0;
    padding-top: 14px;
    margin-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }
  .overlay-card,
  .overlay-card-image {
    min-height: 300px;
  }
  .overlay-card-title {
    font-size: 1.45rem;
  }
  .overlay-card-text {
    padding: 22px 22px;
  }

  .section-block--tint,
  .section-block--dark {
    /* Same correction as the desktop rule: the gutter is already inside
       `calc(50vw - 50%)`, and adding it again stepped banded content 16px
       further in than its neighbours on a phone too. */
    padding: 26px calc(50vw - 50%) 30px;
  }
}

@media (max-width: 600px) {
  .overlay-card,
  .overlay-card-image {
    min-height: 240px;
  }
  .overlay-card-title {
    font-size: 1.25rem;
  }
  .overlay-card-standfirst {
    font-size: 0.88rem;
  }
  .headline-list-title {
    font-size: 0.95rem;
  }
  .text-feature-note {
    font-size: 0.82rem;
  }
  .text-feature-title a {
    font-size: 1.05rem;
  }
}

/* ============================================================
   Image heights — capped so pictures do not out-run their text
   ============================================================
   Several card images were sized by aspect-ratio alone, so in a wide column
   they grew to ~375px while the text beside them ran to ~200px, leaving the
   difference as dead air. The lead image already had a cap and behaved; these
   now match it. object-fit: cover means capping crops rather than distorts. */

.hero-image {
  max-height: 330px;
}

.lead-main .lead-image {
  max-height: 240px;
}

.wide-lead-image {
  max-height: 225px;
}

.article-card-image {
  /* A backstop, not the rule. At 205px it bound before the 8:3 ratio below
     could apply, so the widest columns came out at 2.89:1 while their
     neighbours sat at 2.67:1 — the cap reintroducing exactly the inconsistency
     the ratio exists to remove. It is set clear of the widest column the grid
     produces. */
  max-height: 230px;
}

/* A deliberate crop, not whatever the column width leaves over.
   
   A max-height alone gives each image the ratio its column happens to produce:
   on one page that was 2.55, 2.65, 2.77 and 2.89 to one, four different crops
   that read as accidental. In the wide columns the picture is now a band at a
   fixed 8:3, so every one of them is cropped the same way on purpose. The cap
   above stays as a safety net rather than as the thing doing the work.
   
   The three-abreast row keeps 16/10: its columns are ~300px, where that ratio
   already yields ~187px and the cap never binds. */
.section-equal-row.cols-1 .article-card-image,
.section-equal-row.cols-2 .article-card-image,
.wide-lead-image {
  aspect-ratio: 8 / 3;
}

/* The picture-led card sets its own floor rather than taking an aspect ratio */
.overlay-card,
.overlay-card-image {
  min-height: 330px;
}

@media (max-width: 900px) {
  /* Stacked on narrow screens the picture is the only thing in its row, so it
     can be a little taller without stranding anything beside it — but not
     taller than it is on a desktop, which is what 260px against a desktop cap
     of 205px amounted to. */
  .hero-image { max-height: 300px; }
  .wide-lead-image,
  .article-card-image { max-height: 230px; }
}

/* ------------------------------------------------------------
   Video thumbnails were sized by aspect-ratio on the <a>, not the
   <img>, so the earlier image caps missed them: a video lead ran to
   400px against 240px for a photo lead in the same position. The
   inner image is object-fit: cover inside an overflow-hidden box,
   so capping the link crops rather than distorts.
   ------------------------------------------------------------ */
/* No caps here any more.
   
   These were 240/270/250 and they bound before the 8:3 band could apply — a
   709px-wide column wants 265px and the cap forced 240, so the one video on the
   page came out at 2.98:1 while every picture beside it sat at 2.67. A cap that
   fights the ratio reintroduces exactly the inconsistency the ratio exists to
   remove; the same mistake was made with .article-card-image earlier and fixed
   the same way. The ratio controls the height now, so nothing else needs to. */

/* Rail thumbnails were 90px squares — too small to read, and a square crop
   threw away most of a landscape press photo. 156px is the largest width at
   which every current rail headline still sets in two lines; past it, one wraps
   to three. The rails are stretched to their lead column's height anyway, so
   the extra size costs no page length. */
.sidebar-item-thumb {
  width: 156px;
  min-width: 156px;
  aspect-ratio: 4 / 3;
}

/* Narrower rails cannot carry a 156px picture without squeezing the headline */
@media (max-width: 1100px) {
  .sidebar-item-thumb {
    width: 132px;
    min-width: 132px;
  }
}

@media (max-width: 900px) {
  .video-thumb-link.lead-video-embed,
  .video-thumb-link.wide-lead-video,
  .video-thumb-link.article-card-video {
    max-height: 260px;
  }
}

@media (max-width: 600px) {
  .sidebar-item-thumb {
    width: 112px;
    min-width: 112px;
  }
}

/* ============================================================
   Stacking fix — media queries do not add specificity
   ============================================================
   `.section-equal-row.cols-2` (0,2,0) is declared in the base stylesheet, so it
   outranked the mobile `.section-equal-row` rule (0,1,0) and the row never
   collapsed: on a phone a card and a pull-quote stayed side by side in ~150px
   columns, breaking the quote to two or three words a line. The column-count
   classes have to be overridden by name at each breakpoint.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .section-equal-row.cols-2,
  .section-tertiary-row.cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .section-equal-row,
  .section-equal-row.cols-1,
  .section-equal-row.cols-2,
  .section-tertiary-row,
  .section-tertiary-row.cols-1,
  .section-tertiary-row.cols-2 {
    grid-template-columns: 1fr;
  }

  /* Stacked, the quote no longer needs a column gutter — it needs air above it */
}

/* --- Digest sign-up (footer) --- */
/* Sits above the colophon strip rather than between its two columns. Placed
   between them it took a grid row of its own and pushed the right-hand column
   onto a third row, leaving the brand beside empty space and the colophon
   stranded underneath — the two halves stopped being a strip. */
.footer-digest {
  grid-column: 1 / -1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  margin-bottom: 24px;
  padding-bottom: 22px;
}

.footer-digest label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 9px;
}

.digest-row { display: flex; gap: 8px; flex-wrap: wrap; }

.digest-row input {
  flex: 1 1 260px;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  padding: 9px 12px;
  color: var(--color-text);
  background: #FFFFFF;
  /* A form control's boundary is a UI component: 1.4.11 wants 3:1, which a
     hairline against this purple ground would fail. */
  border: 1px solid #FFFFFF;
  border-radius: 2px;
}

.digest-row input:focus-visible {
  outline: 2px solid var(--color-brand-gold);
  outline-offset: 2px;
}

.digest-btn {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 9px 18px;
  color: var(--color-brand);
  background: var(--color-brand-gold);
  border: 1px solid var(--color-brand-gold);
  border-radius: 2px;
  cursor: pointer;
}

.digest-btn:hover { background: #F5C43A; border-color: #F5C43A; }
.digest-btn:disabled { opacity: 0.65; cursor: default; }
.digest-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

/* #D9CFE6 on brand purple measures 8.83 — the same tone the colophon uses. */
.digest-note {
  margin-top: 9px;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  line-height: 1.5;
  color: #D9CFE6;
}
.digest-note--ok   { color: #F0E6C8; }
.digest-note--warn { color: var(--color-brand-gold); }

@media (max-width: 600px) {
  .digest-row input { flex: 1 1 100%; }
  .digest-btn { width: 100%; }
}

/* --- Subscription confirmation page --- */
.confirm-panel {
  max-width: 62ch;
  margin: 60px auto;
  padding: 28px 32px;
  background: var(--color-bg-warm);
  border-left: 4px solid var(--color-brand);
}
.confirm-panel--warn { border-left-color: var(--color-accent); }
.confirm-panel h2 { font-family: var(--font-headline); font-size: 1.6rem; margin-bottom: 12px; }
.confirm-panel p { font-size: 0.95rem; line-height: 1.6; color: var(--color-text-secondary); margin-bottom: 14px; }
.confirm-home { font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600; border-bottom: 1px solid currentColor; }

/* A search that matches meaning returns nothing for a name it has never seen.
   The empty state has to teach that, or the reader concludes the site is
   broken rather than that the query was too specific. */
.search-no-results strong {
  display: block;
  font-family: var(--font-headline);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.search-no-results p {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 56ch;
  /* The container centres its text; a capped box with margin:0 still sits hard
     left, so the sentence centred inside a left-hung box while the heading
     above it centred on the page. auto centres the box itself. */
  margin: 0 auto;
}

/* The breadcrumb bar carries search on the article page, the way the section
   nav does on the homepage. A reader who has just finished one article is the
   person most likely to want another. */
/* The icon sits at the content column's right edge, matching the homepage.
   That means living inside .breadcrumb-inner — the max-width container — not
   beside it, or it aligns to the viewport instead and drifts apart from the
   homepage on any screen wider than the column.

   .nav-search is absolutely positioned for the section nav, where it is pinned
   over a scrolling row. Reused here without resetting that, it escaped the bar
   entirely and floated into the middle of the article. */
.breadcrumb-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.breadcrumb-inner .nav-search {
  position: static;
  flex: 0 0 auto;
  background: none;
  padding: 0;
  inset: auto;
  /* The homepage's copy overhangs the column by its own 12px right padding, so
     the icon lands 12px outside the gutter. Matching that exactly, rather than
     stopping at the gutter, is what puts the two in the same place on any
     screen wider than the content column. */
  margin-right: -12px;
}

/* The toggle's own padding sizes the homepage nav row; here the bar sets its
   height, so only the left gap is wanted. */
.breadcrumb-inner .search-toggle {
  padding: 0 0 0 12px;
}

/* The term actually searched, when it differs from what was typed. Set on its
   own line in lower case so it reads as a note rather than as part of the
   count above it. */
.search-corrected {
  display: block;
  margin-top: 5px;
  text-transform: none;
  letter-spacing: 0.01em;
  font-style: italic;
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------------
   Pull-quote beside a taller card

   .section-equal-row sets align-items: start, which is right for plain cards —
   they have no box, so an uneven baseline is invisible. The pull-quote does
   have a box: a tinted ground and a 3px accent rule. Top-aligned next to a card
   carrying a photograph, its panel stops short and leaves an unexplained void
   below it that reads as something failing to load rather than as white space.

   So this one cell opts back into the stretch the grid would have given it, and
   the attribution is pinned to the foot of the panel. The space then falls
   inside a bounded shape, between the quote and its source, where it reads as a
   designed panel rather than as a gap.
   --------------------------------------------------------------------------- */

/* Two abreast, the quote panel is ~470px wide and stands against a card
   carrying a photograph — four times its natural height. Pinning the
   attribution to the floor only moved the hole inside the panel, which was
   worse: a flat field of tint with type at either end reads as a fault.
   
   A pull-quote given a whole column is a display element, so it is set like
   one. The type scales with the column, the block sits optically centred, and
   the attribution stays with the quote it belongs to rather than being pushed
   away from it. */

/* Mobile reset for the display pull-quote.
   
   This lives at the foot of the file on purpose. The rules it overrides are
   also `.section-equal-row.cols-2 ...` — identical specificity — and a media
   query adds none, so whichever is written last wins. Declared up beside the
   other max-width:600px rules it lost, and the panel kept 38px side padding on
   a 327px column. Same trap the stacking fix above already documents. */


/* One band for every picture that shares a column with text.
   
   A page carried five different crops at once — 1.82, 2.18, 2.31, 2.67 and
   2.98 to one — which is what "losing control" looks like measured. Pictures in
   a column now all wear 8:3, so they stack down the page on one line and a
   section reads as one thing.
   
   Three keep their own shape, each for a reason rather than by omission: the
   hero, because there is exactly one per page and it is the page's lead; the
   picture-led card in the dark band, where the picture *is* the card and the
   headline sits on it; and the sidebar thumbnail, which is a small square-ish
   marker beside a headline rather than a picture in a column. */
.video-thumb-link,
.lead-main .lead-image,
.wide-lead-image,
.article-card-image {
  aspect-ratio: 8 / 3;
}

/* The hero sets its own, and says so rather than inheriting by accident. */
.hero-image,
.hero-inner .video-thumb-link {
  aspect-ratio: 16 / 10;
}


@media (max-width: 600px) {
  /* The picture-led card needs a shape, not a floor.
     
     `min-height: 330px` is right in a 691px column and wrong in a 343px one:
     on a phone it produced a 343x330 photograph, near enough square to read as
     a mistake rather than a choice. A ratio scales; a floor does not. This card
     keeps its own shape rather than the 8:3 band because the headline sits on
     the picture and needs the height. */
  .overlay-card,
  .overlay-card-image {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}