/* pages.css — REVISION-2 pass (Oct 2026). Loaded AFTER site.css and the shared files; later rules win.
   Owner: Pages. Reach: genealogy.html (#genealogy-list), about.html + contact.html (#page-body), 404.html (#not-found).
   The page-hero slabs and their lede/pill rows are type.css. Light theme only (R7): no dark-theme rules.
   Look: borderless claymorphism (REVISION-2 §R3) — depth comes only from layered outer + inner shadows on a
   surface a step lighter than the page. No eyebrows, no indices (§R1); compact rhythm (§R4).
   21st.dev sources: 24338 Neomorphism Metric Card (inset icon well), 3176 Animated 3D Card (hover lift),
   2318 Squishy card (press), 8224 Gradient Card (tinted asides), 7288 Svg follow scroll (scroll-drawn genealogy
   connectors), 5689 Contact Card (icon tile + value rows, 2/3 + 1/3 split).
   The markup uses its own class names (gen-card, page-panel, dest-tile, pg-chip …), so none of site.css's
   !important glass/hairline rules for .card / .g-card / .callout-gold / main > section.max-w-3xl reach it —
   this file needs no !important at all. */


/* ==========================================================================
   0. Local values — everything else is a shared token from type.css (clay
      surfaces, shadows, radii, ink, --grid-gap, --section-py).
   ========================================================================== */
:where(#genealogy-list, #page-body, #not-found) {
  /* soft row seam inside a clay surface — never a border. Painted as a 1px top line, not a `0 -1px 0` box-shadow:
     on rows with fractional widths the shadow left a 1-device-px sliver down the row's right edge, so each
     focus row read as an outlined box. */
  --pg-separator: linear-gradient(rgb(23 42 82 / .08), rgb(23 42 82 / .08)) top / 100% 1px no-repeat;
}
/* Content shares the page-hero slab's outer box (R14: type.css --page-inset = the one site container,
   the one --container-wide token, never closer to the edge than --gutter), so card edges line up with
   the slab and footer edges at every width instead of stopping at the markup's .container-standard cap. */
#genealogy-list, #page-body, #not-found {
  max-width: none;
  margin-inline: var(--page-inset, max(var(--gutter), (100% - var(--container-wide, min(94vw, 1920px))) / 2));
  padding-inline: 0;
}

/* ==========================================================================
   1. Shared pieces on these pages — chip, icon well, section title
   ========================================================================== */
/* chip — clay mini-surface, no border (R3) */
.pg-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: .3rem .75rem;
  border: 0;
  border-radius: 999px;
  background: var(--clay);
  box-shadow: var(--clay-chip-shadow);
  font: 500 .8125rem/1.2 var(--font-sans);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pg-chip--accent { background: var(--clay-blue); color: var(--accent-ink); font-weight: 600; }

/* icon well — pressed into whatever surface it sits on (24338) */
.pg-well {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: .875rem;
  background: transparent;
  box-shadow: var(--clay-pressed);
  color: var(--accent-ink);
}
.pg-well svg { width: 1.25rem; height: 1.25rem; }

/* section title (404) — Bricolage, no eyebrow */
.pg-title {
  margin: 0 0 1.25rem;
  font: 700 clamp(1.5rem, 1.25rem + 1vw, 2.125rem)/1.15 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  text-wrap: balance;
}


/* ==========================================================================
   2. Genealogy — #genealogy-list: the overlapped zig-zag (REVISION-2 §R15, after the user's sketch;
      replaces R8's serpentine behind the nodes). The eight clay cards stack top → bottom in lineage order
      (Dr. Ahamed first, Edison last) and alternate sides with a large horizontal overlap:
        ≥ 1024 px  every card is 60 % of the container; odd cards start at the left edge (0–60 %), even
                   cards end at the right edge (40–100 %), so the 40–60 % band — a third of a card — is
                   shared by each pair of neighbours.
        <  1024 px one column, cards 92 % wide with an alternating 0 / 8 % indent.
      Cards never overlap vertically. static/js/pages/genealogy.js draws a short rounded S-connector in each
      gap (out of the bottom edge of card n inside the shared band, across it, into the top edge of card n+1
      just past it), a gold-ringed dot at both ends and a midpoint chevron pointing advisor → student. Without
      that module a plain vertical stub in each gap stands in. Two-tone clay (R11c): left cards A, right B.
      The card widths are unitless percentages so the fallback stub can find the shared band.
   ========================================================================== */
#genealogy-list {
  --gen-w: 92;                         /* card width, % of the container */
  --gen-shift: 8;                      /* left edge of the even cards, % of the container */
  --gen-gap: 2.5rem;                   /* vertical gap the connectors live in */
  padding-block: var(--section-py);
}
@media (min-width: 1024px) {
  #genealogy-list { --gen-w: 60; --gen-shift: 40; --gen-gap: 3.5rem; }
}
#genealogy-list .gen-flow { position: relative; }
#genealogy-list .gen-flow__list {
  position: relative;
  z-index: 1;                          /* cards below the connector layer */
  display: flex;
  flex-direction: column;
  gap: var(--gen-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
#genealogy-list .gen-node {
  --gen-x0: 0;                         /* this card's left edge, % of the container */
  position: relative;
  display: flex;
  width: calc(var(--gen-w) * 1%);
  min-width: 0;
  container: gen-node / inline-size;
}
#genealogy-list .gen-node:nth-child(even) {
  --gen-x0: var(--gen-shift);
  margin-left: calc(var(--gen-shift) * 1%);
}

/* static fallback (module absent or failed): a vertical stub in each gap, centred on the shared band */
#genealogy-list .gen-node + .gen-node::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: calc(100% * (50 - var(--gen-x0)) / var(--gen-w) - 1.5px);
  width: 3px;
  height: var(--gen-gap);
  border-radius: 3px;
  background: color-mix(in oklab, var(--accent-ink) 35%, transparent);
}
#genealogy-list .gen-flow.is-live .gen-node::before { content: none; }

/* --- node card: compact anatomy (portrait beside the name, facts full width below) ------------------- */
#genealogy-list .gen-card {
  --pic: 4.75rem;
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: var(--pic) minmax(0, 1fr);
  grid-template-areas: "media head" "facts facts";
  align-content: start;
  gap: .75rem .875rem;
  padding: .625rem;                    /* the portrait sits 10 px in from the card edge (R3) */
  border: 0;
  border-radius: var(--clay-radius);
  background: var(--clay-a);           /* tone A on the left-hand cards … */
  box-shadow: var(--clay-shadow);
  color: var(--ink);
}
#genealogy-list .gen-node:nth-child(even) .gen-card { background: var(--clay-b); }   /* … tone B on the right */
/* portrait squircle, inset with the media shadow; its ring is redrawn above the photo */
#genealogy-list .gen-card__media {
  position: relative;
  grid-area: media;
  align-self: start;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--clay-radius-tile);
  background: var(--clay-blue);
  box-shadow: var(--clay-media-shadow);
}
#genealogy-list .gen-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3);
  pointer-events: none;
}
#genealogy-list .gen-card__media :is(picture, img) { display: block; width: 100%; height: 100%; }
#genealogy-list .gen-card__media img { object-fit: cover; object-position: 50% 20%; }

#genealogy-list .gen-card__head { grid-area: head; align-self: center; min-width: 0; padding: .25rem .5rem 0 0; }
#genealogy-list .gen-card__name {
  margin: 0;
  font: 650 clamp(1.1875rem, 1.1rem + .35vw, 1.375rem)/1.2 var(--font-display);
  letter-spacing: -0.012em;
  color: var(--ink-strong);
  text-wrap: balance;
}
/* "Generation n" + "X's advisor" chips sit AFTER the name (R1); white clay chips on the tinted cards (R11) */
#genealogy-list .gen-card__chips { display: flex; flex-wrap: wrap; gap: .375rem; margin: .5rem 0 0; }
#genealogy-list .gen-card .pg-chip { background: #fff; }
#genealogy-list .gen-card .pg-chip--accent { color: var(--accent-ink); }
/* facts read as bold lead-ins ("Degree: Ph.D., …"), never as label lines above text (R1) */
#genealogy-list .gen-card__facts {
  grid-area: facts;
  margin: 0;
  padding: 0 .5rem .375rem .25rem;
  font: 400 .9375rem/1.55 var(--font-sans);
  color: var(--ink);
  text-wrap: pretty;
}
#genealogy-list .gen-card__facts > div + div { margin-top: .3rem; }
#genealogy-list .gen-card__facts :is(dt, dd) { display: inline; margin: 0; }
#genealogy-list .gen-card__facts dt { font-weight: 600; color: var(--ink-strong); }
#genealogy-list .gen-card__facts dt::after { content: ":"; }
#genealogy-list .gen-card__facts cite { font-style: italic; }

/* wide card (≥ 30rem): the portrait runs down one side, name/chips/facts stack beside it */
@container gen-node (min-width: 30rem) {
  #genealogy-list .gen-card {
    --pic: 6.5rem;
    grid-template-rows: auto 1fr;
    grid-template-areas: "media head" "media facts";
    row-gap: .5rem;
  }
  #genealogy-list .gen-card__head { align-self: start; padding-top: .375rem; }
  #genealogy-list .gen-card__facts { padding-left: 0; }
}
@container gen-node (min-width: 36rem) {
  #genealogy-list .gen-card { --pic: 7.25rem; }
}
/* very wide card (≥ 46rem, 60 % of a ≥ 1300 px container): more columns, not longer lines — the facts flow
   in two balanced columns beside the portrait, so a wider card gets shorter rather than emptier (R14) */
@container gen-node (min-width: 46rem) {
  #genealogy-list .gen-card { --pic: 8rem; }
  #genealogy-list .gen-card__facts { columns: 2; column-gap: 1.75rem; }
  #genealogy-list .gen-card__facts > div { break-inside: avoid; padding-bottom: .3rem; }
  #genealogy-list .gen-card__facts > div + div { margin-top: 0; }
}
/* widest card (≥ 64rem, 60 % of a ≥ 1700 px container): name + chips take their own column beside the
   portrait and the two fact columns fill the rest, so the card stays one portrait tall and full */
@container gen-node (min-width: 64rem) {
  #genealogy-list .gen-card {
    grid-template-columns: var(--pic) minmax(14rem, 18rem) minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "media head facts";
    column-gap: 1.5rem;
  }
  #genealogy-list .gen-card__facts { align-self: center; padding: .375rem .75rem .375rem 0; }
}

/* --- the connector layer: links, gold tips, chevrons and end dots (geometry from genealogy.js) ------- */
#genealogy-list .gen-flow__line {
  position: absolute;
  z-index: 2;                          /* above the card edges, so each dot visibly sits on its card */
  top: 0;
  left: 0;
  overflow: visible;
  pointer-events: none;
}
#genealogy-list :is(.gen-flow__track, .gen-flow__ink, .gen-flow__travel) {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#genealogy-list .gen-flow__track { stroke: color-mix(in oklab, var(--accent-ink) 18%, transparent); stroke-width: 3; }
#genealogy-list .gen-flow__ink { stroke: var(--accent-ink); stroke-width: 3; }
#genealogy-list .gen-flow__travel {
  stroke: var(--clay-b-accent);        /* Marquette gold, a step deeper so it reads on the light ground */
  stroke-width: 4;
  transition: opacity 400ms var(--ease-out);
}
#genealogy-list .gen-flow__link.is-drawn .gen-flow__travel { opacity: 0; }
#genealogy-list .gen-flow__chevron {
  fill: none;
  stroke: color-mix(in oklab, var(--accent-ink) 45%, transparent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 300ms var(--ease-out);
}
#genealogy-list .gen-flow__chevron.is-on { stroke: var(--accent-ink); }
#genealogy-list .gen-flow__dot-halo { fill: var(--clay); stroke: rgb(23 42 82 / .14); stroke-width: 1; }
#genealogy-list .gen-flow__dot-ring {
  fill: var(--clay);
  stroke: var(--clay-b-accent);        /* gold ring */
  stroke-width: 2.75;
  transition: fill 300ms var(--ease-out);
}
#genealogy-list .gen-flow__dot.is-on .gen-flow__dot-ring { fill: var(--accent-ink); }
@media (prefers-reduced-motion: no-preference) {
  #genealogy-list .gen-flow__dot-ring {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(.8);
    transition: fill 300ms var(--ease-out), transform 420ms var(--ease-spring);
  }
  #genealogy-list .gen-flow__dot.is-on .gen-flow__dot-ring { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #genealogy-list .gen-flow__travel { display: none; }
  #genealogy-list :is(.gen-flow__chevron, .gen-flow__dot-ring) { transition: none; }
}


/* ==========================================================================
   3. About / contact — #page-body: prose in a clay panel beside a clay aside
      on ≥1024 px (R5; 5689 Contact Card split, 8224 tinted aside)
      The two columns end together because their CONTENT is about the same height, not because one is
      stretched with a hole in it (R14): the action row follows the prose at a fixed 1.5rem gap, the column
      ratio gives the aside just the width its rows need to finish level with the prose, and whatever few
      pixels remain are shared out between the aside's rows (each row centred in an equal share) or, when
      the panel is the shorter one, sit under the buttons. Measured gaps between the two bottoms at
      1024–2560: about −10…+57 px, contact −18…+40 px (old layout: up to 110 px between text and buttons).
   ========================================================================== */
#page-body.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
  padding-block: var(--section-py);
}
@media (min-width: 1024px) {
  #page-body.page-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  /* about: the four focus rows wrap less in a 38 % column, so the aside ends level with the prose */
  #page-body.page-layout--about { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}
/* contact (R14): the card holds three short rows (widest ≈ 295 px: icon well + "Directions to Cudahy Hall ↗"),
   so past 1440 a growing 1/3 column would leave its right half empty. It grows only to the width those rows
   fill (≥ 75 % of its content box); the prose panel takes every extra pixel of --container-wide. */
@media (min-width: 1440px) {
  #page-body.page-layout--contact { grid-template-columns: minmax(0, 1fr) minmax(0, clamp(24rem, 16rem + 10vw, 27rem)); }
}
/* ≥ 1800 the prose flows in two columns and is about half as tall, so each aside gets shorter too:
   about widens its aside (rows wrap less); contact widens its card to 36rem and sets email + directions
   side by side above the address (see the contact rows below) — card ≈ 290 px against a ≈ 280–310 px panel. */
@media (min-width: 1800px) {
  #page-body.page-layout--about { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  #page-body.page-layout--contact { grid-template-columns: minmax(0, 1fr) minmax(0, 36rem); }
}

#page-body .page-panel,
#page-body .page-aside,
#page-body .contact-card {
  border: 0;
  border-radius: var(--clay-radius);
  box-shadow: var(--clay-shadow);
  color: var(--ink);
}
#page-body .page-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;                         /* prose → buttons: one fixed step, never a stretched band */
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  background: var(--clay);
}
#page-body .page-aside { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); background: var(--clay-blue); }
#page-body .contact-card { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); background: var(--clay-gold); }

/* reading type — Host Grotesk body, Bricolage headings, navy-cast ink (R2) */
#page-body .page-prose > * { max-width: 72ch; margin: 0; }
#page-body .page-prose > * + * { margin-top: 1em; }
#page-body .page-prose > * + h2 { margin-top: 1.5em; }
#page-body .page-prose > h2 + * { margin-top: .5em; }
#page-body .page-prose p {
  font: 400 1.0625rem/1.7 var(--font-sans);
  color: var(--ink);
  text-wrap: pretty;
}
#page-body .page-prose .page-prose__lead {
  font-size: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-strong);
}
#page-body .page-prose h2 {
  font: 650 clamp(1.375rem, 1.25rem + .5vw, 1.625rem)/1.2 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  text-wrap: balance;
}
#page-body .page-prose .page-prose__support {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
#page-body .page-prose__support strong { margin-right: .25rem; font-weight: 600; color: var(--ink-strong); }
/* the buttons follow the prose directly — no margin-top:auto, which pinned them to the bottom of a panel
   stretched to the aside's height and opened a 100–110 px empty band above them (R14) */
#page-body .page-panel__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }

/* Wide screens (R14): the panel grows with --container-wide, so the prose grows with it instead of leaving
   a hollow right half — a wider measure at 1440, larger reading type at 1600, two balanced columns at 1800
   (each column lands back at a ~45–60ch measure). Text flows across the column break like a newspaper, so
   both columns end level (no L-shaped hole under a short second column); a heading never ends a column,
   no line is stranded alone, and the "Supported by" chip row never splits. */
@media (min-width: 1440px) {
  #page-body .page-prose > * { max-width: 80ch; }
}
@media (min-width: 1600px) {
  #page-body .page-prose p { font-size: 1.125rem; }
  #page-body .page-prose .page-prose__lead { font-size: 1.3125rem; }
}
@media (min-width: 1800px) {
  #page-body .page-prose { columns: 2; column-gap: clamp(2.5rem, 3vw, 4rem); }
  #page-body .page-prose > * { max-width: none; }
  #page-body .page-prose p { orphans: 2; widows: 2; }
  #page-body .page-prose .page-prose__lead { font-size: 1.25rem; }
  /* lead | sub-section: the heading always opens column 2, flush with its top. Left to the balancer it
     also broke there, but the balancer counted the heading's 1.5em top margin that the break then
     dropped, so the columns came out ~17 px taller than their text — an empty strip above the buttons. */
  #page-body .page-prose > h2 { break-before: column; break-inside: avoid; break-after: avoid; margin-top: 0; }
  #page-body .page-prose .page-prose__support { break-inside: avoid; }
}

/* aside heading + list rows (soft separators, no rules) */
#page-body .page-aside__title {
  margin: 0 0 1.125rem;
  font: 650 1.25rem/1.2 var(--font-display);
  letter-spacing: -0.012em;
  color: var(--ink-strong);
}
/* The aside is a column whose list fills it: when the prose panel is the taller column (by ≤ ~60 px),
   every row takes an equal share of the spare height and centres its content in that share, so the
   separators stay evenly spaced instead of a gap collecting under the last row. Unstretched (< 1024 px,
   or when the aside is the taller column) the shares are zero and the rows sit at their natural rhythm. */
#page-body :is(.page-aside, .contact-card) { display: flex; flex-direction: column; }
#page-body :is(.focus-list, .contact-list) {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
#page-body :is(.focus-list, .contact-list) > li {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);   /* icon well | text */
  align-content: center;                         /* the row's content centred in its share … */
  align-items: start;                            /* … with the well and the text top-aligned to each other */
  column-gap: .875rem;
}
#page-body :is(.focus-list, .contact-list) > li + li { margin-top: 1rem; padding-top: 1rem; background: var(--pg-separator); }
#page-body .focus-list strong {
  display: block;
  font: 600 .96875rem/1.35 var(--font-sans);
  color: var(--ink-strong);
}
#page-body .focus-list strong + span {
  display: block;
  margin-top: .2rem;
  font: 400 .90625rem/1.55 var(--font-sans);
  color: var(--ink-2);
}
#page-body .focus-list sub { font-size: .72em; line-height: 0; }

/* contact rows: icon tile + value (5689) */
#page-body .contact-list :is(p, address) {
  margin: 0;
  align-self: center;
  min-width: 0;
  font: 400 .9375rem/1.55 var(--font-sans);
  font-style: normal;
  color: var(--ink);
}
#page-body .contact-list address strong { font-weight: 600; color: var(--ink-strong); }
#page-body .contact-list__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;     /* 44px touch target on the standalone links */
  font-weight: 600;
  color: var(--accent-ink);
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
  text-underline-offset: .2em;
  transition: text-decoration-color 200ms var(--ease-out);
}
#page-body .contact-list__link:hover { text-decoration-color: currentColor; }
/* ≥ 1800: the 36rem card sets its two one-line rows (email, directions) side by side above the five-line
   address, so the card is ~76 px shorter and ends level with the two-column prose beside it. DOM / tab
   order (email → address → directions) is unchanged; only the grid placement moves. */
@media (min-width: 1800px) {
  #page-body .contact-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    justify-content: space-between;
    column-gap: 1.5rem;
  }
  #page-body .contact-list > .contact-list__item--map { grid-area: 1 / 2; margin-top: 0; padding-top: 0; background: none; }
  #page-body .contact-list > .contact-list__item--address { grid-column: 1 / -1; grid-row: 2; }
}


/* ==========================================================================
   4. 404 — #not-found: six clay destination tiles, 3 per row ≥1024, 6 in one row ≥1600
   ========================================================================== */
#not-found { padding-block: var(--section-py); }
#not-found .dest-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) { #not-found .dest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { #not-found .dest-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

#not-found .dest-tile {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding: 1.125rem 1.25rem;
  border: 0;
  border-radius: var(--clay-radius-tile);
  background: var(--clay);
  box-shadow: var(--clay-shadow);
  color: var(--ink);
  text-decoration: none;
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
#not-found .dest-tile::after {
  content: "→";
  content: "→" / "";                            /* decorative: empty alt text where supported */
  margin-left: auto;
  font: 500 1.125rem/1 var(--font-sans);
  color: var(--ink-2);
  transition: transform 320ms var(--ease-out), color 200ms var(--ease-out);
}
#not-found .dest-tile__text { min-width: 0; }
#not-found .dest-tile__title {
  display: block;
  font: 650 1.125rem/1.25 var(--font-display);
  letter-spacing: -0.012em;
  color: var(--ink-strong);
  transition: color 200ms var(--ease-out);
}
#not-found .dest-tile__desc {
  display: block;
  margin-top: .15rem;
  font: 400 .9375rem/1.45 var(--font-sans);
  color: var(--ink-2);
}
/* ≥ 1600 px (R14): more columns, not stretched tiles — all six in one row across --container-wide, each
   tile stacked (icon well + arrow on top, title and description below) so its text fills the tile */
@media (min-width: 1600px) {
  #not-found .dest-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #not-found .dest-tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "well arrow" "text text";
    align-items: center;
    gap: .875rem 1rem;
    padding: 1.25rem 1.25rem 1.375rem;
  }
  #not-found .dest-tile .pg-well { grid-area: well; }
  #not-found .dest-tile__text { grid-area: text; align-self: start; }
  #not-found .dest-tile::after { grid-area: arrow; justify-self: end; margin-left: 0; }
}
#not-found .dest-tile:hover .dest-tile__title,
#not-found .dest-tile:hover::after { color: var(--accent-ink); }
#not-found .dest-tile:focus-visible {
  outline: var(--focus-ring, 2px solid #1D428A);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
  #not-found .dest-tile:hover { transform: translateY(-4px); box-shadow: var(--clay-shadow-hover); }
  #not-found .dest-tile:hover::after { transform: translateX(3px); }
  #not-found .dest-tile:active { transform: translateY(0) scale(.99); box-shadow: var(--clay-pressed); }
}


/* ==========================================================================
   5. Forced colours — shadows vanish there, so every clay surface gets a real edge
   ========================================================================== */
@media (forced-colors: active) {
  #genealogy-list .gen-card,
  #page-body :is(.page-panel, .page-aside, .contact-card),
  #not-found .dest-tile,
  .pg-chip,
  .pg-well { border: 1px solid CanvasText; }
  #genealogy-list :is(.gen-flow__track, .gen-flow__ink, .gen-flow__chevron, .gen-flow__dot-ring) { stroke: CanvasText; }
  #genealogy-list :is(.gen-flow__dot-halo, .gen-flow__dot-ring) { fill: Canvas; }
  #genealogy-list .gen-flow__dot.is-on .gen-flow__dot-ring { fill: CanvasText; }
  #genealogy-list .gen-flow__travel { display: none; }
  #genealogy-list .gen-node::before { background: CanvasText; }
}