/* Walkaround. Readable on a phone in a hangar, readable on a desk.
   The visual language is technical drawing: a faint blueprint grid under the
   page, and a dusk sky band with an aircraft planform over the masthead. */

:root {
  --bg: #dde4ef;
  --bg-2: #cfd9e8;
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --text: #14171d;
  --text-soft: #4f5866;
  --line: #cfd7e3;
  --line-strong: #8c9ab1;
  --accent: #15507a;
  --accent-soft: #e2eef7;
  --plain: #0f6b4f;
  --plain-soft: #e3f3ec;
  --line-cal: #8a4b12;
  --line-cal-soft: #fbeedd;
  --grid: rgba(21, 80, 122, 0.07);
  --grid-strong: rgba(21, 80, 122, 0.11);
  --shadow: 0 1px 2px rgba(16, 32, 52, 0.05), 0 8px 24px rgba(16, 32, 52, 0.06);
  --shadow-lift: 0 2px 4px rgba(16, 32, 52, 0.07), 0 16px 40px rgba(16, 32, 52, 0.11);
  --radius: 12px;
  --wrap: 46rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c1014;
    --bg-2: #0f141a;
    --surface: #161c23;
    --surface-2: #1d242d;
    --text: #e7eaf0;
    --text-soft: #97a2b1;
    --line: #29313b;
    --line-strong: #4a5867;
    --accent: #77b8e4;
    --accent-soft: #14283a;
    --plain: #63c8a3;
    --plain-soft: #10291f;
    --line-cal: #e0a86a;
    --line-cal-soft: #2e2113;
    --grid: rgba(119, 184, 228, 0.06);
    --grid-strong: rgba(119, 184, 228, 0.1);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.36);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.45), 0 16px 40px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  --bg: #0c1014;
  --bg-2: #0f141a;
  --surface: #161c23;
  --surface-2: #1d242d;
  --text: #e7eaf0;
  --text-soft: #97a2b1;
  --line: #29313b;
  --line-strong: #4a5867;
  --accent: #77b8e4;
  --accent-soft: #14283a;
  --plain: #63c8a3;
  --plain-soft: #10291f;
  --line-cal: #e0a86a;
  --line-cal-soft: #2e2113;
  --grid: rgba(119, 184, 228, 0.06);
  --grid-strong: rgba(119, 184, 228, 0.1);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.36);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.45), 0 16px 40px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

/* One scale, one basis. There were 27 distinct font sizes, 11 of them between
   10.6px and 12.8px, which is rounding noise rather than hierarchy. */
:root {
  --t-label: 0.75rem;
  --t-meta: 0.8125rem;
  --t-small: 0.875rem;
  --t-body: 1rem;
  --t-lead: 1.125rem;
  --t-h3: 1.25rem;
  --t-h2: 1.5rem;
  --t-h1: 2rem;
}

html { font-size: 100%; }

html { overflow-x: clip; }

body {
  margin: 0;
  color: var(--text);
  font: var(--t-body)/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  background-color: var(--bg);
  /* Blueprint grid, a heavier rule every fifth line, and two soft glows so the
     page does not read as a flat slab. */
  background-image:
    radial-gradient(900px 420px at 78% -8%, var(--accent-soft), transparent 70%),
    radial-gradient(700px 500px at 5% 12%, var(--bg-2), transparent 70%),
    linear-gradient(var(--grid-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-strong) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:
    100% 100%,
    100% 100%,
    160px 160px,
    160px 160px,
    32px 32px,
    32px 32px;
  background-attachment: fixed, fixed, scroll, scroll, scroll, scroll;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 16px;
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 16px; top: 8px;
  background: var(--surface);
  padding: 8px 12px; z-index: 20; border-radius: 6px;
}

/* Header */

.site-header {
  /* Solid first so a browser without color-mix still paints a header. */
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}
@supports not (backdrop-filter: blur(4px)) {
  .site-header { background: var(--surface); }
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  padding-top: 11px;
  padding-bottom: 11px;
}
.brand {
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.015em;
  color: var(--text);
  text-decoration: none;
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.brand::before {
  content: "";
  width: 15px; height: 15px;
  background: var(--accent);
  -webkit-mask: var(--plane-mask) center / contain no-repeat;
  mask: var(--plane-mask) center / contain no-repeat;
  transform: rotate(45deg);
  flex: none;
}
.site-header nav { display: flex; flex-wrap: wrap; gap: 13px; }
.site-header nav a {
  color: var(--text-soft);
  text-decoration: none;
  font-size: 0.85rem;
}
.site-header nav a:hover { color: var(--accent); }

/* The aircraft planform, reused as a mask and as hero art. */
:root {
  --plane-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 220'%3E%3Cg fill='%23000'%3E%3Cpath d='M100 10c4.4 15 5.6 33 5.6 50v86c0 15-2 26-5.6 34-3.6-8-5.6-19-5.6-34V60c0-17 1.2-35 5.6-50z'/%3E%3Cpath d='M95 74 22 140v11l73-39z'/%3E%3Cpath d='M105 74l73 66v11l-73-39z'/%3E%3Cpath d='M96.5 166 62 190v7l34.5-15z'/%3E%3Cpath d='M103.5 166 138 190v7l-34.5-15z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Hero: a full bleed dusk sky with an aircraft planform and range rings. */

.hero {
  position: relative;
  margin: 0 calc(50% - 50vw) 22px;
  width: 100vw;
  max-width: 100vw;
  padding: 48px 0 40px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 76% 108%, #c8703a 0%, rgba(200, 112, 58, 0) 46%),
    radial-gradient(90% 70% at 14% 0%, #2a5d8f 0%, rgba(42, 93, 143, 0) 62%),
    linear-gradient(170deg, #0a1522 0%, #12243a 44%, #1b3350 76%, #23405f 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

/* Range rings and the aircraft itself. */
.hero-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    repeating-radial-gradient(circle at 78% 112%,
      rgba(255, 255, 255, 0.07) 0 1px, rgba(255, 255, 255, 0) 1px 76px),
    var(--plane-mask);
  background-repeat: no-repeat, no-repeat;
  background-position: center, 86% 42%;
  background-size: 100% 100%, auto 168%;
  /* The asset is drawn black, so invert paints it white against the sky. A
     plain opacity is used rather than a blend mode, because blend results vary
     across browsers and this needs to be reliably visible but never loud. */
  filter: brightness(0) invert(1);
  opacity: 0.14;
}

.hero-inner {
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 16px;
}
.eyebrow {
  margin: 0 0 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.hero h1 {
  margin: 0 0 12px;
  font-size: clamp(1.75rem, 5.2vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.hero .tagline {
  margin: 0 0 12px;
  font-size: var(--t-lead);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.9);
}
.hero .standfirst {
  margin: 0;
  max-width: 32rem;
  font-size: var(--t-body);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68);
}

/* Section heads */

.section-head { margin: 0 0 18px; }
.section-head h2 {
  margin: 0 0 8px;
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 11px;
}
.section-head h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.section-note {
  margin: 0;
  color: var(--text-soft);
  font-size: var(--t-small);
  max-width: 38rem;
}

/* Today in aviation */

.today { margin: 0 0 52px; scroll-margin-top: var(--anchor-offset); }

.today-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
}

/* A headline is a card on the front page. The full story is its own page, so
   the front page stays scannable instead of becoming a wall of text. */
.story-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 20px 20px 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.story-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(var(--accent), transparent);
}
.story-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.story-card:hover .more { gap: 9px; }
.story-card .summary {
  margin: 0 0 14px;
  font-size: var(--t-small);
  color: var(--text-soft);
  flex: 1;
}
.story-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  transition: gap 0.16s ease;
}
.more::after { content: "\2192"; }

/* The story's own page */
.story-page > .summary {
  margin: 0 0 14px;
  font-size: 1.08rem;
  color: var(--text-soft);
}
.story-page > .kicker { margin-bottom: 8px; }
.story-page > .meta { margin-bottom: 22px; }
.kicker {
  margin: 0 0 7px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.kicker-text {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.flag {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--line-cal);
  background: var(--line-cal-soft);
  border: 1px solid var(--line-cal-soft);
  border-color: color-mix(in srgb, var(--line-cal) 30%, transparent);
  border-radius: 100px;
  padding: 2px 9px;
}
.story-card h3 {
  margin: 0 0 9px;
  font-size: var(--t-h3);
  line-height: 1.25;
  letter-spacing: -0.018em;
}

/* Fleet brief */


.maker { padding-top: 32px; scroll-margin-top: var(--anchor-offset); }
.maker h2 {
  font-size: 1.22rem;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--line);
}
.blurb {
  color: var(--text-soft);
  font-size: 0.9rem;
  margin: 10px 0 16px;
}

.grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 16px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.card h3 { margin: 0 0 2px; font-size: var(--t-h3); letter-spacing: -0.015em; }
.card .variants { margin: 0 0 10px; font-size: var(--t-meta); color: var(--text-soft); }
.card .glance { margin: 0 0 12px; font-size: var(--t-small); flex: 1; }
.card .meta { margin-top: auto; }

.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.pill {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 100px;
  padding: 2px 10px;
  font-size: 0.71rem;
  font-weight: 600;
}
.pill.quiet { background: var(--surface-2); color: var(--text-soft); }
.when { font-size: 0.74rem; color: var(--text-soft); }

/* Article */

.page {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px 34px;
  margin: 28px 0;
  box-shadow: var(--shadow);
}
.crumb { margin: 0 0 6px; font-size: 0.79rem; }
.crumb a { color: var(--text-soft); text-decoration: none; }
.crumb a:hover { color: var(--accent); }

.page h1 {
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  line-height: 1.12;
  letter-spacing: -0.028em;
  margin: 0 0 4px;
}
.page > .variants { margin: 0 0 12px; color: var(--text-soft); font-size: 0.89rem; }
.page > .meta { margin-bottom: 22px; }

.prose h2 {
  font-size: 1.2rem;
  letter-spacing: -0.015em;
  margin: 34px 0 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  scroll-margin-top: var(--anchor-offset);
}
.prose h3 { font-size: 1.01rem; margin: 22px 0 6px; scroll-margin-top: var(--anchor-offset); }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 1.25rem; }
.prose li { margin-bottom: 7px; }

.prose a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.prose a.gloss {
  color: inherit;
  text-decoration: underline dotted var(--text-soft);
  text-underline-offset: 3px;
  cursor: help;
}
.prose a.gloss:hover { color: var(--accent); text-decoration-color: var(--accent); }

.prose code {
  background: var(--surface-2);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.875em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 26px 0; }

/* Callouts */

blockquote {
  margin: 0 0 16px;
  padding: 13px 16px;
  border-left: 3px solid var(--line);
  background: var(--surface-2);
  border-radius: 0 8px 8px 0;
}
blockquote p { margin: 0; }
blockquote p + p { margin-top: 5px; }

.callout-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.callout-in-plain-terms { border-left-color: var(--plain); background: var(--plain-soft); }
.callout-in-plain-terms .callout-label { color: var(--plain); }
.callout-on-the-line { border-left-color: var(--line-cal); background: var(--line-cal-soft); }
.callout-on-the-line .callout-label { color: var(--line-cal); }

/* Tables */

.table-wrap {
  overflow-x: auto;
  margin: 0 0 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
table { border-collapse: collapse; width: 100%; font-size: 0.89rem; }
th, td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th {
  background: var(--surface-2);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-soft);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }

/* Sources on an aircraft page read as reference, not prose */

#sources ~ ul { font-size: 0.83rem; color: var(--text-soft); }
#sources ~ ul a { word-break: break-word; }

/* Footer */

.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 48px;
  padding: 24px 0 40px;
  color: var(--text-soft);
  font-size: 0.83rem;
}
.site-footer p { margin: 0 0 8px; }
.fine { font-size: 0.77rem; opacity: 0.8; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero { padding: 20px 0 18px; margin-bottom: 18px; }
  .hero-art { background-size: 100% 100%, auto 118%; background-position: center, 94% 44%; opacity: 0.1; }
  .page {
    padding: 22px 16px 26px;
    border-radius: 0;
    margin-left: -16px;
    margin-right: -16px;
    border-left: 0;
    border-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

@media print {
  .site-header, .site-footer, .skip, .hero-art { display: none; }
  body { background: #fff; }
  .page, .story-card { border: 0; box-shadow: none; padding: 0; }
  }

/* Freshness. A card that changed in the current cycle is marked, so a reader
   coming back weekly can see what moved without reading everything again. */

.pill.fresh {
  background: var(--plain-soft);
  color: var(--plain);
  border: 1px solid var(--plain-soft);
  border-color: color-mix(in srgb, var(--plain) 32%, transparent);
}

.card.is-fresh,
.story-card.is-fresh {
  border-color: color-mix(in srgb, var(--plain) 38%, var(--line));
}
.card.is-fresh::after,
.story-card.is-fresh::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-top: 30px solid var(--plain);
  opacity: 0.85;
}
.card.is-fresh { position: relative; overflow: hidden; }

.story-card.is-fresh::before { background: linear-gradient(var(--plain), transparent); }

.story-card .story-meta .pill.fresh,
.story-card .story-meta .pill.quiet { margin-right: 8px; }

/* Aircraft silhouettes. Generated from real span and length figures by
   site/silhouettes.py, drawn in currentColor so they follow the theme. They
   are decorative, and marked aria-hidden, because the aircraft is always named
   in text right beside them. */

.silhouette {
  display: block;
  width: 100%;
  height: auto;
}

.card:hover .card.is-fresh .page-art .silhouette {
  max-height: 128px;
  color: var(--accent);
  opacity: 0.9;
}

@media print {
  .page-art { background: none; border: 0; }
  .silhouette { color: #333; }
}

/* Kicker icons on the headline block */

.icon {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--accent);
}
.icon-large { width: 19px; height: 19px; }
.story-card.is-fresh .icon { color: var(--plain); }

/* ===================================================================
   Engine section, article photographs and the wider index shell.
   Added after the tile experiment was reverted, so nothing here
   touches the aircraft tiles on the home page.
   =================================================================== */

:root { --wrap-wide: 62rem; }

/* Index pages get a wider shell so the grid breathes. Prose pages stay
   narrow, because 46rem is a comfortable measure for reading and 62rem
   is not. */
main.wrap-wide { max-width: var(--wrap-wide); }
main.wrap-wide .page { max-width: var(--wrap); margin-left: auto; margin-right: auto; }

/* Photographs, in articles only. They are too large a commitment for a
   tile and they crowded it, so they live on the page the reader has
   chosen to open. */
.photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--surface-2);
}
.photo-figure {
  margin: 0 0 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
}
.photo-figure .hero-photo { aspect-ratio: 16 / 7; }
.photo-figure figcaption {
  padding: 8px 12px;
  font-size: 0.74rem;
  color: var(--text-soft);
  border-top: 1px solid var(--line);
}
/* CC BY and CC BY-SA both require attribution, so the credit is part of
   the picture, not an optional extra. */
.photo-figure figcaption a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line);
}
.photo-figure figcaption a:hover { color: var(--accent); }

/* Engine index: a tight list, because the designation carries it */

.eng-list {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}
.eng-row {
  display: block;
  padding: 11px 13px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.eng-row:hover { border-color: var(--accent); transform: translateX(2px); }
.eng-name { display: block; font-weight: 650; font-size: 0.97rem; letter-spacing: -0.01em; }
.eng-variants { display: block; font-size: 0.74rem; color: var(--text-soft); margin: 2px 0 7px; }
.eng-meta { display: block; }

/* Engine cutaway */

.page-art-engine { padding: 10px 14px; }
.page-art-engine .cutaway { max-height: 150px; display: block; width: 100%; }
.cutaway .e-case { fill: none; stroke: var(--text-soft); stroke-width: 1.6; }
.cutaway .e-stage { fill: var(--accent); opacity: 0.4; }
.cutaway .e-hot { fill: var(--line-cal); opacity: 0.65; }
.cutaway .e-blade { stroke: var(--text-soft); stroke-width: 1.5; }
.cutaway .e-shaft { stroke: var(--text-soft); stroke-width: 1.2; opacity: 0.7; }
.cutaway .e-gear { fill: none; stroke: var(--plain); stroke-width: 2; }
.cutaway .e-label { fill: var(--text); font-size: 10px; font-weight: 700; font-family: inherit; }
.cutaway .e-flow { fill: var(--text-soft); font-size: 10px; font-style: italic; font-family: inherit; }

/* Aircraft using this engine */

.xref-box {
  margin: 30px 0 0;
  padding: 16px 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.xref-box h2 { margin: 0 0 9px; font-size: 1rem; border: 0; padding: 0; }
.xref-list { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; }
.xref-list li { margin-bottom: 4px; }

/* An engine designation inside prose links to its family page */
.prose a.xref {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  font-weight: 550;
}

.hero-compact { padding: 34px 0 30px; }

@media (max-width: 560px) {
  .page-art-engine .cutaway { max-height: 110px; }
  .photo-figure .hero-photo { aspect-ratio: 16 / 9; }
}

/* Sponsor lines. Always labelled, always quiet, never louder than the reporting. */
.sponsor-line {
  margin: 4px 0 14px;
  font-size: 0.82rem;
  color: var(--text-soft);
  opacity: 0.85;
}
.site-footer .sponsor-line { margin: 0 0 8px; }
.sponsor-label {
  display: inline-block;
  margin-right: 6px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Archive: a dated list, because a reader scanning for "the one about the
   A350F" is looking for a date and a headline, not a card. */
.arch-list { display: block; margin-top: 18px; }
.arch-row {
  display: grid;
  grid-template-columns: 7.5rem 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.arch-row:hover { background: var(--surface-2); }
.arch-row:hover .arch-title { color: var(--accent); }
.arch-date {
  font-size: 0.78rem;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.arch-title { font-size: 0.97rem; font-weight: 550; line-height: 1.35; }
.arch-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
  white-space: nowrap;
}
.standfirst-dark { color: var(--text-soft); font-size: 1rem; }

@media (max-width: 560px) {
  .arch-row { grid-template-columns: 1fr; gap: 3px; padding: 10px 2px; }
  .arch-kicker { order: -1; }
}

/* Focus. There were seventeen link cards on the index with a rich hover
   state and no focus state at all: keyboard users got the UA default ring
   and nothing else. */
.card:focus-visible,
.story-card:focus-visible,
.eng-row:focus-visible,
.arch-row:focus-visible,
.site-header nav a:focus-visible,
.brand:focus-visible,
.prose a:focus-visible,
.more:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.card:focus-visible,
.story-card:focus-visible,
.eng-row:focus-visible { border-color: var(--accent); }

/* R16: kicker categories get measured colour, so Safety is visibly not
   Programme at a glance. All pass 4.5:1 at label size in both themes. */
:root {
  --k-safety: #a3231e;
  --k-reg: #15507a;
  --k-prog: #8a4b12;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --k-safety: #f08a84;
    --k-reg: #77b8e4;
    --k-prog: #e0a86a;
  }
}
:root[data-theme="dark"] { --k-safety: #f08a84; --k-reg: #77b8e4; --k-prog: #e0a86a; }

.kicker-safety .kicker-text, .kicker-safety .icon { color: var(--k-safety); }
.kicker-reg .kicker-text, .kicker-reg .icon { color: var(--k-reg); }
.kicker-prog .kicker-text, .kicker-prog .icon { color: var(--k-prog); }
.story-card.kicker-safety { border-left: 3px solid var(--k-safety); }
.story-card.kicker-reg { border-left: 3px solid var(--k-reg); }
.story-card.kicker-prog { border-left: 3px solid var(--k-prog); }

/* R12: cutaway labels rendered at ~5.5px on a phone, which is illegible. */
@media (max-width: 560px) {
  .page-art-engine .cutaway { max-height: 150px; }
  .cutaway .e-label { font-size: 14px; }
  .cutaway .e-flow { font-size: 13px; }
}

/* R17: nav links were 22.4px tall, under the 24px minimum target size. */
.site-header nav a { padding: 4px 2px; display: inline-block; }

/* R11: the article hero cropped 22 to 42 percent off a side-on airliner at
   16:7. 3:2 is close to the native ratio of the material. */
.photo-figure .hero-photo { aspect-ratio: 3 / 2; }
@media (max-width: 560px) { .photo-figure .hero-photo { aspect-ratio: 3 / 2; } }

/* R6: a quiet recency cue, so a returning reader can see what moved without
   reading fifteen dates. Not a "new" claim, an age. */
.card .age { display: block; font-size: var(--t-meta); color: var(--text-soft); margin: 1px 0 7px; }
.card[data-age="0"], .card[data-age="1"] { border-left: 3px solid var(--accent); }
.card[data-age="2"], .card[data-age="3"] { border-left: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.card[data-age="4"], .card[data-age="5"], .card[data-age="6"] { border-left: 3px solid color-mix(in srgb, var(--accent) 28%, transparent); }

/* The comparative plate: the one picture that beats a photograph here,
   because it is the actual proportions of the actual fleet. */
.plate-figure {
  margin: 0 0 22px;
  padding: 14px 16px 10px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.plate { display: block; width: 100%; height: auto; color: var(--accent); }
.plate .plate-plane { opacity: 0.92; }
.plate .plate-cap {
  fill: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: inherit;
}
.plate .plate-label {
  fill: var(--text);
  font-size: 11px;
  font-weight: 650;
  font-family: inherit;
}
.plate .plate-dim {
  fill: var(--text-soft);
  font-size: 9px;
  font-family: inherit;
}
@media (max-width: 560px) {
  .plate-figure { padding: 10px 10px 6px; }
  .plate .plate-label { font-size: 15px; }
  .plate .plate-dim { font-size: 12px; }
  .plate .plate-cap { font-size: 15px; }
}

/* Lead story: one photograph earns its place, the rest are rows. This is the
   Leeham split, and it is what gives the page a focal point. */
.story-card { flex-direction: column; }
.story-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.story-card .summary { flex: 1; }

.story-lead { grid-column: 1 / -1; }
@media (min-width: 640px) {
  /* Two columns only when there is actually a photograph to put in one. */
  .story-lead:has(.story-photo) {
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: 0;
    padding: 0;
    align-items: stretch;
  }
  .story-lead:has(.story-photo) .story-photo {
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
  .story-lead:has(.story-photo) .story-text { padding: 20px 22px 16px; }
  .story-lead h3 { font-size: var(--t-h1); line-height: 1.14; }
  .story-lead .summary { font-size: var(--t-lead); }
}
/* A lead with no photograph still reads as the lead, through type alone. */
.story-lead:not(:has(.story-photo)) { border-left-width: 4px; }
/* Any card with a photograph, lead or not. */
.story-card .story-photo {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.story-card:has(.story-photo) { padding: 0; }
/* Non lead only, and 20px at the sides to match a card without a photograph,
   so text lines up across neighbouring cards. Scoping it away from the lead
   matters: at equal specificity and later in the file, it would override the
   lead's own wider padding. */
.story-card:not(.story-lead):has(.story-photo) .story-text { padding: 16px 20px; }
.story-card .story-photo .photo { transition: transform 0.45s ease; }
.story-card:hover .story-photo .photo { transform: scale(1.03); }
@media (max-width: 639px) {
  .story-lead { padding: 0; }
  .story-lead .story-photo { border-bottom: 1px solid var(--line); }
  .story-lead .story-text { padding: 16px 18px 14px; }
}

/* The one sentence a reader needs before forwarding a page. */
.standard { margin: -14px 0 20px; font-size: var(--t-meta); }
.standard a {
  color: var(--text-soft);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}
.standard a:hover { color: var(--accent); }

/* ===================================================================
   Interaction and motion. All CSS: the site promises no JavaScript on
   its about page, and an animation is not worth breaking that for.
   Everything here is switched off under prefers-reduced-motion.
   =================================================================== */

/* The hero aircraft drifts, slowly, once. Not a loop: a loop in the
   corner of your eye while you read is an irritation, not a delight. */
@media (prefers-reduced-motion: no-preference) {
  .hero-art {
    animation: drift 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  @keyframes drift {
    from { transform: translateX(-26px) translateY(8px); opacity: 0; }
    to   { transform: translateX(0) translateY(0); opacity: 0.14; }
  }
  .hero h1, .hero .tagline, .hero .standfirst { animation: rise 0.6s ease-out both; }
  .hero .tagline { animation-delay: 0.07s; }
  .hero .standfirst { animation-delay: 0.14s; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: none; }
  }
}

/* The fleet plate becomes explorable. Hovering one aircraft dims the
   others, which is the whole point of drawing them to one scale. */
.plate .plate-plane,
.plate .plate-label,
.plate .plate-dim { transition: opacity 0.18s ease, fill 0.18s ease; }
.plate:hover .plate-plane { opacity: 0.3; }
.plate .plate-plane:hover { opacity: 1 !important; }
.plate-cell { cursor: crosshair; }
.plate-cell:hover .plate-plane { opacity: 1; }
.plate-cell:hover .plate-label { fill: var(--accent); }
.plate-cell:hover .plate-hit { fill: var(--accent-soft); }
.plate-hit { fill: transparent; transition: fill 0.18s ease; }

/* The engine cutaway labels its own gas path on hover. */
.cutaway .e-stage, .cutaway .e-hot { transition: opacity 0.18s ease; }
.cutaway:hover .e-stage { opacity: 0.18; }
.cutaway:hover .e-hot { opacity: 0.25; }
.cutaway .e-group:hover .e-stage { opacity: 0.75; }
.cutaway .e-group:hover .e-hot { opacity: 0.95; }
.cutaway .e-group:hover .e-label { fill: var(--accent); font-size: 13px; }

/* By the numbers */

.facts { margin: 44px 0 10px; scroll-margin-top: var(--anchor-offset); }
.fact-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}
.fact {
  display: block;
  padding: 15px 16px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.fact:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-lift);
}
.fact-k {
  display: block;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.fact-v {
  display: block;
  font-size: var(--t-h2);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 4px 0 2px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.fact-n { display: block; font-size: var(--t-meta); color: var(--text-soft); }

/* Wingspan bars, drawn to one scale and grown in on arrival. */
.bars {
  margin: 16px 0 0;
  padding: 16px 18px 10px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.bars-cap {
  margin: 0 0 12px;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.bars ul { list-style: none; margin: 0; padding: 0; }
.bars li {
  display: grid;
  grid-template-columns: 7.5rem 1fr 4.5rem;
  gap: 12px;
  align-items: center;
  margin-bottom: 9px;
}
.bar-label { font-size: var(--t-meta); font-weight: 600; }
.bar-track {
  display: block;
  height: 11px;
  background: var(--surface-2);
  border-radius: 100px;
  overflow: hidden;
}
.bar-fill {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: 100px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--plain)));
}
.bar-val {
  font-size: var(--t-meta);
  color: var(--text-soft);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: no-preference) {
  .bar-fill { animation: grow 1s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  @keyframes grow { from { width: 0; } to { width: var(--w); } }
}

/* Engines on the front page */

.engines-home { margin: 44px 0 0; scroll-margin-top: var(--anchor-offset); }
.eng-group { margin-bottom: 16px; }
.eng-group h3 {
  margin: 0 0 8px;
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}
/* An aligned grid, not a wrapping flex row.
   Chips sized to their own labels, and the labels on this page run from "747"
   to "Trent 700 and Trent 900", a six fold spread. Wrapped at the front page
   width that produced 21 rows and every one of them ended ragged. Equal
   columns make the rows line up, and minmax(0, 1fr) stops a long label from
   widening its column and pushing the others out of alignment. */
.eng-chips {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr);
}
/* Two columns, not three. The groups on this page hold 1, 2, 4 or 6 items,
   and every one of those divides by two. At three columns seven of the nine
   groups ended on a partly filled row; at two only Bombardier does, and that
   is honest, because there is one CRJ page. Two columns also gives each chip
   348px, enough that no label wraps. */
@media (min-width: 520px) {
  .eng-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Technology topics are rows, because their names are phrases rather than
   designations. A row is full width, so it aligns without any help. */
.topic-list { display: grid; gap: 6px; }
.topic-row {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: 4px 16px;
  align-items: baseline;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--line-strong);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.14s ease, transform 0.14s ease;
}
.topic-row:hover { border-color: var(--accent); transform: translateX(2px); }
.topic-name { font-size: var(--t-small); font-weight: 650; }
.topic-scope { font-size: var(--t-meta); color: var(--text-soft); }
@media (max-width: 560px) {
  .topic-row { grid-template-columns: minmax(0, 1fr); }
}
.eng-chip {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-wrap: break-word;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  font-size: var(--t-small);
  font-weight: 600;
  transition: transform 0.14s ease, border-color 0.14s ease;
}
.eng-chip:hover { transform: translateY(-2px); border-color: var(--accent); }
.eng-chip-v {
  display: block;
  font-size: var(--t-label);
  font-weight: 400;
  color: var(--text-soft);
  margin-top: 1px;
}

@media (max-width: 560px) {
  .bars li { grid-template-columns: 5.5rem 1fr 3.6rem; gap: 8px; }
  .fact-v { font-size: var(--t-h3); }
}

/* ===================================================================
   Fleet page: filter chips, done with radio inputs and sibling
   selectors. No JavaScript needed for fifteen items, and keeping the
   "no code runs in your browser" promise is worth more to this
   audience than a text search box would be.
   =================================================================== */

.filterbar > input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.chip {
  display: inline-block;
  padding: 7px 14px;
  font-size: var(--t-meta);
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  cursor: pointer;
  user-select: none;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
#ff-all:checked ~ .chips label[for="ff-all"],
#ff-boeing:checked ~ .chips label[for="ff-boeing"],
#ff-airbus:checked ~ .chips label[for="ff-airbus"],
#ff-embraer:checked ~ .chips label[for="ff-embraer"],
#ff-bombardier:checked ~ .chips label[for="ff-bombardier"],
#ff-prod:checked ~ .chips label[for="ff-prod"],
#ff-legacy:checked ~ .chips label[for="ff-legacy"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.filterbar > input[type="radio"]:focus-visible ~ .chips label[for] { outline: none; }
#ff-all:focus-visible ~ .chips label[for="ff-all"],
#ff-boeing:focus-visible ~ .chips label[for="ff-boeing"],
#ff-airbus:focus-visible ~ .chips label[for="ff-airbus"],
#ff-embraer:focus-visible ~ .chips label[for="ff-embraer"],
#ff-bombardier:focus-visible ~ .chips label[for="ff-bombardier"],
#ff-prod:focus-visible ~ .chips label[for="ff-prod"],
#ff-legacy:focus-visible ~ .chips label[for="ff-legacy"] {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Filtering. Hiding a whole maker section when nothing in it matches keeps
   the page from showing an empty heading. */
#ff-boeing:checked ~ .maker:not(#boeing),
#ff-airbus:checked ~ .maker:not(#airbus),
#ff-embraer:checked ~ .maker:not(#embraer),
#ff-bombardier:checked ~ .maker:not(#bombardier) { display: none; }
#ff-prod:checked ~ .maker .card[data-prod="no"],
#ff-legacy:checked ~ .maker .card[data-prod="yes"] { display: none; }
#ff-prod:checked ~ .maker:not(:has(.card[data-prod="yes"])),
#ff-legacy:checked ~ .maker:not(:has(.card[data-prod="no"])) { display: none; }

/* Fleet page tiles: a photograph earns its place here, because this is a
   destination a reader chose, the tiles are wider, and the size comparison
   plate above already carries the proportions. */
.card-photo {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin: -16px -16px 13px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.card-photo .photo { position: relative; z-index: 1; transition: transform 0.45s ease; }
.card:hover .card-photo .photo { transform: scale(1.04); }
.card-photo .silhouette {
  position: absolute;
  inset: 14% 10%;
  width: auto;
  height: 72%;
  color: var(--accent);
  opacity: 0.3;
}

/* Home page type strip */
.fleet-home { margin: 44px 0 0; scroll-margin-top: var(--anchor-offset); }
.type-chip {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-wrap: break-word;
  padding: 9px 13px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--line-strong);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  font-size: var(--t-small);
  font-weight: 650;
  transition: transform 0.14s ease, border-color 0.14s ease;
}
.type-chip:hover { transform: translateY(-2px); border-color: var(--accent); }
.type-chip[data-age="0"], .type-chip[data-age="1"] { border-left-color: var(--accent); }
.type-chip[data-age="2"], .type-chip[data-age="3"],
.type-chip[data-age="4"], .type-chip[data-age="5"], .type-chip[data-age="6"] {
  border-left-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.type-chip-v {
  display: block;
  font-size: var(--t-label);
  font-weight: 400;
  color: var(--text-soft);
  margin-top: 1px;
}

.filterbar { display: block; }
.filterbar .maker:first-of-type { padding-top: 0; }

/* ===================================================================
   R18, review of 18 October 2026: get headlines up the phone screen.
   Measured at 390x844 before this block: the sticky header was 130px
   because the nav wrapped to two lines, the first headline started at
   514px, only one headline was fully on screen, and a non lead story with
   a photograph was 520px tall because its picture ran full width.
   =================================================================== */

/* Every section uses scroll-margin-top: var(--anchor-offset), but the
   token was never defined, so an in page jump (Today in the nav, a prose
   heading) landed underneath the sticky header. */
:root { --anchor-offset: 72px; }

/* The home masthead, tighter. Compact heroes on the index pages keep
   their own spacing. */
.hero:not(.hero-compact) { padding: 32px 0 28px; }
.hero:not(.hero-compact) .eyebrow { margin-bottom: 8px; }
.hero:not(.hero-compact) h1 { margin-bottom: 6px; }
.hero:not(.hero-compact) .tagline { margin-bottom: 8px; }

/* Non lead stories as rows: a thumbnail beside the headline, the summary
   full width beneath it. Headlines in neighbouring cards now start on the
   same line instead of one sitting a photograph lower than the other.
   The lead keeps the large photograph, so the page still has one focal
   point. */
.story-card:not(.story-lead):has(.story-photo) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px;
  /* The kicker spans both columns: squeezed beside the thumbnail, a long
     one like Technical and maintenance broke onto three lines. */
  grid-template-areas: "kicker kicker" "title photo" "summary summary" "meta meta";
  grid-template-rows: auto auto 1fr auto;
  column-gap: 14px;
  padding: 20px 20px 16px;
}
.story-card:not(.story-lead):has(.story-photo) .story-text { display: contents; }
.story-card:not(.story-lead):has(.story-photo) .kicker { grid-area: kicker; }
.story-card:not(.story-lead):has(.story-photo) h3 { grid-area: title; }
.story-card:not(.story-lead):has(.story-photo) .summary { grid-area: summary; }
.story-card:not(.story-lead):has(.story-photo) .story-meta { grid-area: meta; }
.story-card:not(.story-lead) .story-photo {
  grid-area: photo;
  align-self: start;
  aspect-ratio: 4 / 3;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

@media (max-width: 560px) {
  :root { --anchor-offset: 96px; }
  /* Brand on one line, nav on one line that scrolls sideways, faded at
     the right edge so it reads as more to come. */
  .site-header .wrap { row-gap: 0; padding-top: 8px; padding-bottom: 2px; }
  .site-header nav {
    flex-wrap: nowrap;
    width: 100%;
    gap: 14px;
    overflow-x: auto;
    padding-right: 28px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
  }
  .site-header nav::-webkit-scrollbar { display: none; }
  .site-header nav a { flex: none; }

  .hero:not(.hero-compact) { padding: 16px 0 16px; margin-bottom: 16px; }
  .hero:not(.hero-compact) h1 { font-size: 1.5rem; }
  .hero:not(.hero-compact) .tagline { font-size: var(--t-body); margin-bottom: 6px; }
  .hero:not(.hero-compact) .standfirst { font-size: var(--t-small); line-height: 1.5; }

  .story-card:not(.story-lead):has(.story-photo) {
    grid-template-columns: minmax(0, 1fr) 88px;
    padding: 16px 18px 14px;
  }
}

/* Changed this week: one line above the fleet chips naming the types whose
   pages changed in the last seven days, so a returning reader does not have
   to scan fifteen chips for a tint. */
.changed-week {
  margin: 0 0 18px;
  padding: 10px 14px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 8px 8px 0;
  font-size: var(--t-small);
  line-height: 1.55;
}
.changed-week strong { color: var(--accent); font-weight: 600; }
.changed-week a { color: inherit; text-underline-offset: 2px; }