/* =========================================================================
   WW1AHT MASTER — DATABASE (CPT archives, singles, taxonomies)
   Aircraft / People / Air Evolution. All token-driven.
   ========================================================================= */

/* ---- Archive hero band ------------------------------------------------- */
.arch-hero { background: var(--primary); color: var(--bg); }
.arch-hero .wrap { padding-block: 44px; }
.arch-hero .eyebrow { color: var(--accent); }
.arch-hero h1 { color: var(--bg); font-size: clamp(2.2rem, 4vw, 3.2rem); margin: 8px 0 10px; }
.arch-hero p { max-width: 62ch; font-size: 1.12rem; color: rgba(255, 255, 255, 0.85); margin: 0; }

/* ---- Archive shell (filter rail + results) ---------------------------- */
.arch-shell { display: grid; grid-template-columns: 250px 1fr; gap: var(--space-xl); align-items: start; }
.filter-rail { position: sticky; top: 90px; display: flex; flex-direction: column; gap: var(--space-lg); }
.filter-group__head {
  font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: 1.25rem;
  color: var(--primary); border-bottom: 2px solid var(--line); padding-bottom: 6px; margin: 0 0 10px;
}
.filter-group__opts { display: flex; flex-wrap: wrap; gap: 7px; }

.results-bar {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap;
  gap: 8px; margin-bottom: var(--space-lg);
}
.results-bar__count { font-size: 0.95rem; color: var(--muted); }
.results-bar__count strong { color: var(--text); }
.results-bar__sort { font-size: 0.9rem; color: var(--muted); }
.results-bar__sort select { width: auto; padding: 4px 8px; font-size: 0.9rem; }

/* ---- Pagination -------------------------------------------------------- */
.page-nav { margin-top: var(--space-xl); }
.page-nav .page-numbers {
  display: inline-block; min-width: 36px; text-align: center; padding: 7px 11px;
  border-radius: var(--radius); font-size: 0.9rem; font-weight: 600; text-decoration: none;
  border: 1px solid var(--line); background: var(--surface); color: var(--primary); margin: 0 3px;
}
.page-nav .page-numbers.current,
.page-nav .page-numbers:hover { background: var(--primary); color: var(--bg); border-color: var(--primary); }
.page-nav { display: flex; justify-content: center; flex-wrap: wrap; }

/* ---- Whole-card link --------------------------------------------------- */
.card__link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }

/* ---- Breadcrumb -------------------------------------------------------- */
.crumbs { font-size: 0.85rem; color: var(--muted); padding-top: var(--space-lg); }
.crumbs a { color: var(--accent-ink); }

/* ---- Single: two-column summary --------------------------------------- */
.single-db { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-xl); align-items: start; padding-block: var(--space-lg) var(--space-xl); }
.single-db--people { grid-template-columns: 340px 1fr; }
.db-gallery__hero { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; margin-bottom: 12px;
  background-image: repeating-linear-gradient(135deg, rgba(42,62,92,0.05) 0 10px, rgba(42,62,92,0.09) 10px 20px);
  display: grid; place-items: center; }
.db-gallery__hero img { width: 100%; height: 100%; object-fit: cover; }

/* Photographer credit under the database hero. Added 29 Aug 2026 alongside the
   template change in single-aircraft.php — until then this site had no way to
   show a credit on an aircraft page at all.

   The numbers are LIFTED VERBATIM from .article-body figcaption in _content.css
   rather than chosen afresh, for the reason that file already gives: a credit has
   to read as a credit — small, quiet, and clearly not prose. Two different sizes
   for the same job on one site is how a house style stops being one.

   Negative top margin absorbs the hero's own 12px, so the credit sits tight under
   the image it belongs to rather than floating between it and the next block. */
.db-gallery__credit { margin: -6px 0 12px; font-size: 0.82rem; line-height: 1.4; opacity: 0.72; }

.db-summary__eyebrow { color: var(--accent-ink); margin-bottom: 8px; }
.db-summary h1 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); line-height: 1.04; margin: 0 0 12px; }
.db-summary .lead { margin: 0 0 20px; }
.db-summary .chips { margin-bottom: 22px; }
.db-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }

/* ---- Spec table / At a glance ----------------------------------------- */
.spec-table { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 22px; }
.spec-table__head { background: var(--primary); color: var(--bg); font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: 1.2rem; padding: 10px 16px; }
.spec-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 0.95rem; }
.spec-row__k { color: var(--muted); }
.spec-row__v { font-weight: 600; text-align: right; }

/* ---- Long-form reading band ------------------------------------------- */
.db-longform { background: var(--surface); border-top: 1px solid var(--line); }
.db-longform .wrap { max-width: var(--maxw-read); padding-block: var(--space-xl); }
.db-longform h2 { font-size: 2rem; margin: 0 0 14px; }
.db-longform p { font-size: 1.12rem; }

/* ---- Related ----------------------------------------------------------- */
.related { padding-block: var(--space-xl); }
.related__head { font-size: 1.8rem; border-bottom: 2px solid var(--primary); padding-bottom: 8px; margin: 0 0 var(--space-lg); }

/* ---- People: service timeline ----------------------------------------- */
.timeline { border-left: 2px solid var(--accent); margin: 12px 0 26px; padding-left: 20px; display: flex; flex-direction: column; gap: 18px; }
.timeline__entry { position: relative; }
.timeline__entry::before { content: ""; position: absolute; left: -27px; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--primary); border: 2px solid var(--bg); }
.timeline__date { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); }
.timeline__title { font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: 1.25rem; color: var(--primary); line-height: 1.15; margin: 2px 0 0; }
.timeline__body { margin: 3px 0 0; font-size: 0.98rem; }

/* ---- Air Evolution: year-rail + timeline ------------------------------ */
.ev-shell { display: grid; grid-template-columns: 190px 1fr; gap: var(--space-xl); align-items: start; }
.ev-yearnav { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 6px; }
.ev-yearnav__label { font-family: ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ev-yearnav a { font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: 1.15rem; padding: 5px 12px; border-radius: var(--radius); color: var(--primary); text-decoration: none; border-left: 3px solid transparent; }
.ev-yearnav a:hover, .ev-yearnav a.is-active { border-left-color: var(--accent); background: var(--surface); }
.ev-timeline { position: relative; display: flex; flex-direction: column; gap: var(--space-lg); }

.tl-row { position: relative; padding-left: 46px; transition: transform var(--dur-fast) var(--ease); }
.tl-row:hover { transform: translateX(4px); }
.tl-row__node { position: absolute; left: 8px; top: 10px; width: 16px; height: 16px; border-radius: 50%; background: var(--primary); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--line); }
.story-card { display: grid; grid-template-columns: 200px 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; }
.story-card:hover { box-shadow: var(--shadow-card); }
.story-card__media { min-height: 130px; display: grid; place-items: center;
  background-image: repeating-linear-gradient(135deg, rgba(42,62,92,0.05) 0 11px, rgba(42,62,92,0.1) 11px 22px); }
.story-card__media img { width: 100%; height: 100%; object-fit: cover; }
.story-card__body { padding: 16px 32px; }
.story-card__meta { font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); }
.story-card__title { font-size: 1.6rem; line-height: 1.06; margin: 4px 0 6px; }
.story-card__blurb { font-size: 0.98rem; margin: 0; }
.story-card__cta { display: inline-block; margin-top: 8px; color: var(--accent-ink); font-weight: 600; font-size: 0.9rem; }

/* ---- Air Evolution single (article) ----------------------------------- */
.article-hero { position: relative; min-height: 420px; overflow: hidden; background: var(--primary); display: flex; }
.article-hero__img { position: absolute; inset: 0; opacity: 0.5; background-size: cover; background-position: center; }
.article-hero__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,30,46,0.92), rgba(20,30,46,0.4)); }
.article-hero__inner { position: relative; max-width: 820px; margin: 0 auto; width: 100%; padding: 0 var(--space-lg) 40px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
.article-hero__eyebrow { font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.article-hero h1 { color: #fff; font-size: clamp(2.6rem, 5.5vw, 4rem); line-height: 1.02; margin: 0 0 12px; max-width: 20ch; }
.article-hero__dek { font-size: 1.2rem; max-width: 60ch; color: rgba(255,255,255,0.88); margin: 0; }

/* Photographer credit on a story hero. Added 29 Aug 2026.

   The ONLY credit rule on the site that does not simply reuse opacity 0.72 on
   inherited colour, and the reason is the hero itself: this one is white type on
   a dark scrim, so the credit needs an explicit light colour or it inherits the
   body ink and disappears. rgba(255,255,255,0.62) sits a step quieter than the
   dek's 0.88 — the same relationship to its surroundings that 0.72 gives
   elsewhere, arrived at for the same reason rather than by copying a number that
   would not have worked here. Size and line-height are unchanged from the others. */
.article-hero__credit { margin: 14px 0 0; font-size: 0.82rem; line-height: 1.4; color: rgba(255,255,255,0.62); }

.article-body { max-width: var(--maxw-read); margin: 0 auto; padding: var(--space-xl) var(--space-lg); }
.article-meta { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; margin-bottom: 28px; border-bottom: 1px solid var(--line); font-size: 0.9rem; color: var(--muted); flex-wrap: wrap; }
.article-meta .chip { margin-left: auto; }
.article-body > p { font-size: 1.12rem; }
.article-body > p.lead { font-size: 1.22rem; font-weight: 500; }
.article-body h2 { font-size: 2rem; margin: 36px 0 12px; }

.chapter-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); }
.chapter-nav a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; max-width: 45%; }
.chapter-nav__kicker { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.chapter-nav__title { font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: 1.2rem; color: var(--primary); }
.chapter-nav .next { text-align: right; margin-left: auto; align-items: flex-end; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 860px) {
  .arch-shell, .ev-shell { grid-template-columns: 1fr; gap: var(--space-lg); }
  .filter-rail, .ev-yearnav { position: static; }
  .ev-yearnav { flex-direction: row; flex-wrap: wrap; }
  .single-db, .single-db--people { grid-template-columns: 1fr; gap: var(--space-lg); }
  .story-card { grid-template-columns: 1fr; }
  .story-card__media { order: -1; aspect-ratio: 16 / 9; }
}

/* ---- People archive: grouped directory ---------------------------------
   The people archive is grouped by the 'type' field (Trustees / Pilots /
   Contributors / Our Fleet) rather than shown as one flat grid — see
   archive-people.php for why. Everything here composes existing components
   (.section-head, .chips, .grid-cards); these rules only handle the spacing
   between groups and the anchor offset for the jump links.               */
.people-jump { margin-bottom: var(--space-lg); }
.people-group { margin-bottom: var(--space-xl); }
.people-group:last-child { margin-bottom: 0; }

/* Without this an anchored heading lands underneath the header. */
.people-group { scroll-margin-top: 96px; }

/* Optional sub-line under a people-archive group heading.
   Only the two aircraft groups carry one — "Flying with the Trust" and
   "Previously with the Trust" — where the distinction between them is worth
   a sentence. Sits directly under .section-head, which already holds the
   heading and the count, so the margin here closes that gap rather than
   opening a new one. */
.people-group__note {
  margin: calc(var(--space-xs) * -1) 0 var(--space-md);
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 60ch;
}

/* Rescued era-framing intro on year-range and Air Evolution archives.
   Reads as article copy, not as a hero subtitle -- it is several hundred
   words of Trust prose, so it gets article measure and rhythm. */
.arch-intro { margin: 0 auto var(--sp-6, 2rem); max-width: 74ch; line-height: 1.62; }
.arch-intro p { margin: 0 0 1em; }
.arch-intro img { max-width: 100%; height: auto; }
.arch-intro figure { margin: 1.2em 0; }
.arch-intro .alignright { float: right; margin: 0 0 1em 1.5em; max-width: 45%; }
.arch-intro .alignleft  { float: left;  margin: 0 1.5em 1em 0; max-width: 45%; }
.arch-intro .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.arch-intro::after { content: ""; display: block; clear: both; }
@media (max-width: 640px) { .arch-intro .alignright, .arch-intro .alignleft { float: none; margin: 1em auto; max-width: 100%; } }