/* =============================================================================
   Theme 13 — standalone inner PAGES (vision / impact / timeline / speeches /
   gallery / about). Loaded AFTER common.css, so these rules win the cascade.
   Reuses the common.css .t13-* token system + section primitives; only the
   page-chrome that the homepage bands don't need lives here.
   ========================================================================== */

/* ---------- Page header band (breadcrumb-lite) ---------- */
.t13-pagehead {
  /* clear the fixed .t13-nav, then breathe */
  padding-top: calc(var(--t13-page-pt) + 1rem);
  padding-bottom: clamp(1.5rem, 4vh, 2.75rem);
  background:
    radial-gradient(120% 140% at 100% 0,
      color-mix(in srgb, var(--t13-primary) 10%, transparent) 0,
      transparent 60%),
    var(--t13-wash);
  border-bottom: 1px solid var(--t13-line);
}
.t13-pagehead__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .9375rem;
  font-weight: 600;
  /* --t13-muted measures ~4.3:1 against --t13-wash (below the 4.5:1 AA floor
     for this text size) — --t13-body clears 10:1+. This partial is currently
     unused by any page (see header note), fixed here for hygiene. */
  color: var(--t13-body);
  margin-bottom: 1rem;
}
.t13-pagehead__crumbs a { color: var(--t13-muted); transition: color .15s var(--t13-ease-ctrl); }
.t13-pagehead__crumbs a:hover { color: var(--t13-p-500); }
.t13-pagehead__crumbs .is-current { color: var(--t13-p-500); }
.t13-pagehead__crumbs span[aria-hidden="true"] { color: var(--t13-line); }
.t13-pagehead__title { margin: .25rem 0 0; }
.t13-pagehead__intro { margin-top: .875rem; max-width: 60ch; }

/* ---------- Generic page section helpers ---------- */
.t13-page__lead-title { max-width: 60ch; margin-bottom: 2rem; }
.t13-page__more { margin-top: 2.5rem; text-align: center; }
.t13-page__stats { margin-top: 3rem; }

/* ---------- About page ---------- */
.t13-page__about { align-items: center; }

/* ---------- Vision page ---------- */
.t13-page__vision {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.t13-page__vision-media {
  position: sticky;
  top: calc(var(--t13-page-pt) - 1rem);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--t13-glass-shadow);
}
.t13-page__vision-media img { width: 100%; height: 100%; object-fit: cover; }
.t13-page__vision-list { display: flex; flex-direction: column; gap: 1rem; }
.t13-page__vision-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: start;
  padding: 1.5rem;
  border-radius: var(--t13-radius);
}
.t13-page__vision-idx {
  font-family: var(--t13-font-script);
  font-size: 2rem;
  line-height: 1;
  color: var(--t13-accent-ink);
}
.t13-page__vision-item h3 { margin-bottom: .35rem; }
.t13-page__vision-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .75rem; }

/* ---------- Speeches page ---------- */
.t13-speech__more { margin-top: 1rem; align-self: flex-start; }
.t13-speech__meta-sep { opacity: .55; }
/* First (most recent) speech reads as the "lead story" when there's more than
   one — real editorial hierarchy, not decoration; every field it uses is
   already rendered elsewhere in the same card, just given more room here. */
@media (min-width: 640px) {
  .t13-speeches__grid--featured .t13-speech:first-child {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
  }
  .t13-speeches__grid--featured .t13-speech:first-child .t13-speech__media { aspect-ratio: auto; height: 100%; }
  .t13-speeches__grid--featured .t13-speech:first-child .t13-speech__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 3vw, 2.5rem); }
  .t13-speeches__grid--featured .t13-speech:first-child .t13-speech__title { font-size: clamp(1.375rem, 2.4vw, 1.75rem); }
}

/* ---------- Gallery page: editorial framing around the common.css grid ----------
   Grid mechanics (masonry spans, hover zoom, dark scrim) live in common.css;
   this adds the page-level substance: an intro line with a real photo count,
   and an on-hover caption using the tenant's own gallery `name` field (never
   invented copy). Full captions also reach the lightbox via the `title`
   attribute magnific-popup already reads — see gallery.blade.php. */
.t13-gallery__head { max-width: 62ch; }
.t13-gallery__count { color: var(--t13-muted); }
.t13-gallery__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  margin: 0; padding: 1.2rem 1rem .9rem;
  font-size: .92rem; font-weight: 600; line-height: 1.3; color: var(--t13-white);
  background: linear-gradient(0deg, color-mix(in srgb, var(--t13-p-900) 80%, transparent) 0%, transparent 100%);
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s var(--t13-ease-ctrl), transform .3s var(--t13-ease-ctrl);
}
.t13-gallery__item:hover .t13-gallery__cap,
.t13-gallery__item:focus-visible .t13-gallery__cap { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .t13-gallery__cap { transition: opacity .15s linear; transform: none; }
}

/* ---------- Empty state ---------- */
.t13-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  text-align: center;
  padding: clamp(2.75rem, 7vw, 4.75rem) 1.5rem;
  border-radius: var(--t13-radius);
  color: var(--t13-muted);
}
/* Icon sits in a soft tonal ring instead of floating bare — gives an
   otherwise-empty section a composed focal point instead of reading broken. */
.t13-empty__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; border-radius: 50%; flex: none;
  background: color-mix(in srgb, var(--t13-primary) 7%, transparent);
  border: 1px solid var(--t13-line);
}
.t13-empty__mark svg { color: var(--t13-p-300); }
.t13-empty p { margin: 0; font-size: 1.0625rem; max-width: 42ch; }
.t13-empty__action { margin-top: .25rem; }

/* ---------- Closing CTA band ---------- */
.t13-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: 20px;
}
.t13-cta__text { max-width: 52ch; }
.t13-cta__text h2 { margin-bottom: .5rem; }
.t13-cta__text p { margin: 0; }
.t13-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Responsive (mobile-first fallbacks) ---------- */
@media (max-width: 860px) {
  .t13-page__vision { grid-template-columns: 1fr; }
  .t13-page__vision-media { position: static; max-height: 340px; }
}

@media (max-width: 560px) {
  .t13-pagehead { padding-top: calc(var(--t13-page-pt) + .25rem); }
  .t13-pagehead__crumbs { font-size: .875rem; }
  .t13-page__vision-item { grid-template-columns: 1fr; gap: .5rem; padding: 1.25rem; }
  .t13-page__vision-idx { font-size: 1.75rem; }
  .t13-cta__inner { flex-direction: column; align-items: flex-start; text-align: left; }
  .t13-cta__actions { width: 100%; }
  .t13-cta__actions .t13-btn { flex: 1 1 auto; justify-content: center; }
}

/* =============================================================================
   INNER PAGES v2 — "political" redesign (photo hero + institutional blocks).
   Inspired by the approved mockup. Every colour derives from the same
   --t13-primary / --t13-accent tokens, so it retints per tenant automatically.
   Namespaced .t13-ph* / .t13-ix* so it never touches the homepage bands.
   ========================================================================== */

/* ---------- Photo hero banner (identical shell on every inner page) ---------- */
.t13-phero {
  position: relative;
  min-height: clamp(340px, 54vh, 500px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--t13-p-900);
}
.t13-phero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 28%;
}
.t13-phero__scrim {
  /* Two stacked scrims darken the banner photo so the white title + crumbs (which
     sit bottom-LEFT, in .t13-phero__inner) stay legible. The owner found the original
     (90deg 92→70→24, 0deg 85→transparent) TOO dark — it read as a near-solid slab and
     hid the photo. These lighter stops let the photo through across the upper/right of
     the banner while keeping the bottom-left title band dark enough for ≥4.5:1 white
     text. Tuned + MEASURED in-browser against the real composite (see the deploy note),
     not eyeballed; applies theme-wide, so verified legible on the navy client too. */
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--t13-p-900) 72%, transparent) 0%,
      color-mix(in srgb, var(--t13-p-900) 46%, transparent) 44%,
      color-mix(in srgb, var(--t13-p-900) 12%, transparent) 100%),
    linear-gradient(0deg,
      color-mix(in srgb, var(--t13-p-900) 62%, transparent) 0%,
      transparent 52%);
}
.t13-phero__inner {
  position: relative; z-index: 2; width: 100%;
  padding-block: clamp(2rem, 5vw, 3.4rem);
}
.t13-phero__crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  color: color-mix(in srgb, var(--t13-white) 68%, var(--t13-primary));
  font-size: .9rem; font-weight: 600; margin: 0 0 1rem;
}
.t13-phero__crumbs a { color: inherit; transition: color .15s var(--t13-ease-ctrl); }
.t13-phero__crumbs a:hover { color: var(--t13-white); }
.t13-phero__crumbs .is-current { color: var(--t13-white); }
.t13-phero__crumbs span[aria-hidden="true"] { opacity: .5; }
/* Specificity note: common.css's `.t13-main h1,h2,h3,h4 { color: var(--t13-p-500) }`
   is (0,1,1) — a bare `.t13-phero__title` class selector is only (0,1,0), so that
   global rule was winning by specificity regardless of load order and repainting
   this h1 in dark navy (--t13-p-500) over the equally dark --t13-p-900 banner —
   a ~1.7:1 contrast, effectively invisible. Scoping to `.t13-phero` makes this
   (0,2,0), which outranks (0,1,1) and restores the intended white title
   (~16:1 against --t13-p-900). Verified by computed sRGB luminance, not eyeballed. */
.t13-phero .t13-phero__title {
  color: var(--t13-white);
  font-size: clamp(2.3rem, 5.2vw, 3.9rem); line-height: 1.04;
  font-weight: 800; letter-spacing: -.02em; margin: .35rem 0 0; max-width: 20ch;
}
.t13-phero__portrait {
  position: absolute; right: max(24px, calc((100% - var(--t13-container)) / 2 + 24px));
  bottom: 0; z-index: 2; width: clamp(190px, 23vw, 290px);
  border-radius: 14px 14px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.4);
  display: none;
}
@media (min-width: 980px) {
  .t13-phero--portrait .t13-phero__portrait { display: block; }
  .t13-phero--portrait .t13-phero__title { max-width: 15ch; }
}

/* ---------- Institutional section header (red rule + kicker) ---------- */
.t13-kick {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--t13-accent-ink); margin: 0 0 1rem;
}
.t13-kick::before { content: ""; width: 26px; height: 2px; background: var(--t13-accent-ink); }
/* Modifier for a .t13-kick placed directly on a navy band (see --t13-accent-onnavy below). */
.t13-kick--onnavy { color: var(--t13-accent-onnavy); }
.t13-kick--onnavy::before { background: var(--t13-accent-onnavy); }
.t13-ix-head { max-width: 62ch; margin-bottom: 2.4rem; }
.t13-ix-forward {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 2.4rem;
  font-weight: 700; color: var(--t13-accent-ink); font-size: 1rem;
}
.t13-ix-forward svg { transition: transform .25s var(--t13-ease-ctrl); }
.t13-ix-forward:hover svg { transform: translateX(5px); }

/* ---------- About: full-width two-column prose ---------- */
/* A quiet editorial initial on the opening line — desktop only, so the
   narrow mobile column (where it would just look cramped) stays plain.
   Inline (not floated) on purpose: .t13-about__cols is a CSS multi-column
   block in common.css, and a float inside a `columns` container can throw
   off column balance unpredictably across browsers. */
@media (min-width: 640px) {
  .t13-about__cols > *:first-child::first-letter {
    font-family: var(--t13-font-script);
    font-size: 2.6rem;
    color: var(--t13-accent-ink);
    padding-right: .1rem;
  }
}
/* About: freed from the .t13-ix-bio grid, the prose runs the container's full width.
   columns/column-count already come from common.css:355 — only the rule line is new. */
.t13-main .t13-about__cols { column-rule: 1px solid var(--t13-line); }
.t13-main .t13-about__cols > p:first-child { margin-top: 0; }
@media (max-width: 860px) {
    .t13-main .t13-about__cols { column-rule: none; }
}

/* ---------- About: standing portrait beside the story prose ----------
   The owner wanted a person standing vertically next to the tall bio. When the
   tenant supplies a portrait (blade adds --figure), lay the story out as a
   portrait pane + prose grid: the pane is a tall 3:4 figure that STICKS alongside
   the long two-column prose, and the prose drops to a single capped-measure
   column so it no longer runs the full 1280px. Portraitless tenants keep the
   full-width prose (no --figure). Primary-agnostic; portrait comes from the
   tenant's own about/hero image. */
.t13-about-story--figure {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.t13-about-story__figure {
  margin: 0;
  position: sticky;
  top: calc(var(--t13-page-pt) - 1rem);
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--t13-glass-shadow);
  outline: 1px solid var(--t13-line);
  outline-offset: -1px;
  background: var(--t13-wash);
}
.t13-about-story__figure img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
}
/* The prose keeps its two-column set but now runs in the ~860px cell beside the
   portrait instead of the full 1280px container, so each column lands at a
   readable ~60ch measure (this IS the "cap the over-wide prose" fix) and no dead
   space is left to the right. Drops to one column under 1024px via common.css. */
@media (max-width: 860px) {
  .t13-about-story--figure { grid-template-columns: 1fr; }
  .t13-about-story__figure { position: static; width: min(320px, 72%); aspect-ratio: 4 / 5; margin-bottom: 1.75rem; }
}

/* ---------- About: political-journey narrative list ---------- */
.t13-jour { display: grid; gap: 0; }
.t13-jour__row { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.25rem; padding: 1.35rem 0; border-top: 1px solid var(--t13-line); align-items: start; }
.t13-jour__row:first-child { border-top: 0; }
.t13-jour__year { font-size: 1.5rem; font-weight: 800; color: var(--t13-p-500); letter-spacing: -.01em; position: relative; padding-left: 1rem; }
.t13-jour__year::before { content: ""; position: absolute; left: 0; top: .35em; width: 7px; height: 7px; border-radius: 50%; background: var(--t13-p-300); }
.t13-jour__row--current .t13-jour__year { color: var(--t13-accent-ink); }
.t13-jour__row--current .t13-jour__year::before { background: var(--t13-accent-ink); }
.t13-jour__title { margin: 0 0 .25rem; font-size: 1.1rem; font-weight: 700; color: var(--t13-ink); }
.t13-jour__desc { margin: 0; color: var(--t13-body); font-size: .98rem; }

/* ---------- Vision: numbered "Priority NN" blocks ---------- */
.t13-pri { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 3vw, 2.5rem) clamp(2rem, 5vw, 4.5rem); align-items: start; padding: 2rem 0; border-top: 1px solid var(--t13-line); scroll-margin-top: calc(var(--t13-page-pt) - 1rem); }
.t13-pri:first-child { border-top: 0; padding-top: 0; }

/* Per-priority demo photo. It sits in the left column's dead space under the
   title as an honest, framed image — never a wash under the right column: the
   metrics ARE this page, and a photograph at low opacity does not dissolve the
   way the reference's flat vector watermark does, it just muddies the captions.
   Placement is explicit and scoped to --media (set by vision.blade.php only
   when the feature carries a photo), so a priority without one never gets an
   implicit second row or its row gap — today's layout exactly. */
.t13-pri--media { grid-template-rows: auto 1fr; }
.t13-pri--media .t13-pri__head { grid-column: 1; grid-row: 1; }
.t13-pri--media .t13-pri__img  { grid-column: 1; grid-row: 2; }
/* Spans both rows so the metrics keep their original top alignment beside the
   title; the 1fr second row absorbs the slack instead of pushing the photo off
   the title, and align-items:start above keeps the aspect-ratio from stretching. */
.t13-pri--media .t13-pri__body { grid-column: 2; grid-row: 1 / span 2; }

/* Frame matches .t13-chap__media's radius; the shadow is primary-derived rather
   than that section's flat black, which is tuned for the dark chapter band and
   would read as grime on this light wash.
   Tag-qualified on purpose: common.css `.t13-main img {max-width:100%}` (0,1,1)
   outranks a bare .t13-pri__img (0,1,0) and would stretch this to the full
   column. Match its specificity; pages.css loads later, so this wins the tie. */
img.t13-pri__img {
  display: block;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 1.5rem;
  box-shadow: var(--t13-glass-shadow);
  outline: 1px solid var(--t13-line);
  outline-offset: -1px;
}
.t13-pri__no { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--t13-accent-ink); margin: 0 0 .6rem; }
.t13-pri__title { margin: 0 0 .6rem; }
.t13-pri__desc { margin: 0; color: var(--t13-body); }
.t13-pri__metrics { display: grid; gap: 0; align-self: center; }
.t13-pri__metric { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--t13-line); }
.t13-pri__metric:first-child { border-top: 0; }
.t13-pri__metric dt { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--t13-muted); font-weight: 700; margin: 0; }
.t13-pri__metric dd { margin: 0; font-weight: 700; color: var(--t13-p-500); text-align: right; }
.t13-pri__metric-cap {
    display: block;
    font-weight: 500;
    font-size: .78rem;
    color: var(--t13-muted);
    margin-top: .15rem;
}

/* Large decorative ordinal beside the title — the roadmap script numeral used
   nowhere else, reserved for this genuinely-ordered list. */
.t13-pri__head { display: flex; align-items: flex-start; gap: 1.1rem; }
.t13-pri__idx {
  flex: none; font-family: var(--t13-font-script); font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: .78; color: var(--t13-p-300); margin-top: -.1rem;
}

/* Quick "roadmap" jump-nav — only rendered when there's more than a couple of
   priorities to scan (see vision.blade.php). Plain anchors; html{scroll-
   behavior:smooth} in common.css already handles the motion, so this respects
   prefers-reduced-motion for free without any extra media query here. */
.t13-ix-roadmap { display: flex; flex-wrap: wrap; gap: .6rem; margin: -.5rem 0 2.5rem; }
.t13-ix-roadmap a {
  display: inline-flex; align-items: baseline; gap: .45rem;
  padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--t13-line);
  font-size: .84rem; font-weight: 600; color: var(--t13-body);
  transition: color .2s var(--t13-ease-ctrl), border-color .2s var(--t13-ease-ctrl), background .2s var(--t13-ease-ctrl);
}
.t13-ix-roadmap a:hover, .t13-ix-roadmap a:focus-visible {
  color: var(--t13-p-500); border-color: var(--t13-p-300);
  background: color-mix(in srgb, var(--t13-primary) 5%, transparent);
}
.t13-ix-roadmap__no { color: var(--t13-accent-ink); font-weight: 800; }

/* ---------- Impact: navy stat band + delivered blocks ---------- */
.t13-ix-navysec {
  background: radial-gradient(120% 150% at 10% 0%, var(--t13-p-700), var(--t13-p-900) 72%);
  /* Raw --t13-accent measured ~1.8–2.7:1 against this gradient (and its own
     translucent glass cards) — well under the 3:1 AA floor for large text,
     the same "dark colour on dark banner" failure mode as the page-title bug
     above. Verified via sRGB relative-luminance contrast at both gradient
     stops, not eyeballed. Lightening 60% toward white clears >=4.5:1
     everywhere it's used below (glass stat number, quote mark). */
  --t13-accent-onnavy: color-mix(in srgb, var(--t13-accent) 40%, var(--t13-white));
}
.t13-ix-statband { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.75rem, 2vw, 1.25rem); }
.t13-ix-stat {
  padding: clamp(1.2rem, 2.4vw, 1.75rem); text-align: left;
  background: color-mix(in srgb, var(--t13-white) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--t13-white) 15%, transparent);
  border-radius: var(--t13-radius);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.t13-ix-stat__num { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--t13-white); }
.t13-ix-stat:first-child .t13-ix-stat__num { color: var(--t13-accent-onnavy); }
.t13-ix-stat__sym { font-size: .7em; }
.t13-ix-stat__label { margin: .55rem 0 0; font-size: .92rem; color: color-mix(in srgb, var(--t13-white) 80%, var(--t13-primary)); }
.t13-mile { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 4vw, 3rem); padding: 2rem 0; border-top: 1px solid var(--t13-line); align-items: start; }
.t13-mile:first-of-type { border-top: 0; }
.t13-mile__title { margin: 0 0 .6rem; }
.t13-mile__body { margin: 0; color: var(--t13-body); }
.t13-mile__sub { font-weight: 700; color: var(--t13-ink); margin: 0 0 .35rem; }
.t13-mile__support { margin: 0 0 1rem; color: var(--t13-body); font-size: .98rem; }
.t13-mile__tag { display: inline-flex; align-items: center; gap: .5rem; }
.t13-pill { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--t13-accent-ink); border: 1px solid var(--t13-accent-ink); border-radius: 999px; padding: 4px 11px; }
.t13-pill__year { color: var(--t13-muted); font-size: .82rem; font-weight: 700; }
.t13-ix-ledger { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); }
.t13-ix-metric { display: flex; align-items: baseline; gap: .85rem; padding: .7rem 0; }
.t13-ix-metric__n { font-size: 1.6rem; font-weight: 800; color: var(--t13-p-500); }
.t13-ix-metric__n::after { content: "—"; margin-left: .6rem; color: var(--t13-accent-ink); font-weight: 400; }
.t13-ix-record__row { padding: 1rem 0; border-top: 1px solid var(--t13-line); }
.t13-ix-record__row:first-child { border-top: 0; }
.t13-ix-quote { position: relative; padding: clamp(1.6rem, 3vw, 2.4rem); text-align: center; }
.t13-ix-quote__mark { color: var(--t13-accent-ink); font-size: 2.4rem; font-weight: 800; line-height: .5; }
.t13-ix-quote p { margin: .5rem 0 0; font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 700; color: var(--t13-p-500); }

/* Navy pull-quote band (About closing) */
.t13-ix-quoteband {
  background: radial-gradient(120% 150% at 10% 0%, var(--t13-p-700), var(--t13-p-900) 72%);
  text-align: center;
  --t13-accent-onnavy: color-mix(in srgb, var(--t13-accent) 40%, var(--t13-white));
}
/* Raw --t13-accent on this gradient measures ~2.3–2.7:1 (fails the 3:1 AA
   floor for this large glyph) — see the --t13-accent-onnavy note above. */
.t13-ix-quoteband .t13-ix-quote__mark { color: var(--t13-accent-onnavy); }
.t13-ix-quoteband__text { margin: .5rem 0 0; font-size: clamp(1.3rem, 2.6vw, 2rem); font-weight: 700; color: var(--t13-white); line-height: 1.25; max-width: 26ch; margin-inline: auto; }
.t13-ix-quoteband__cite { margin: 1.1rem 0 0; color: color-mix(in srgb, var(--t13-white) 78%, var(--t13-primary)); font-size: .95rem; }

/* ---------- Timeline: "career at a glance" summary row ----------
   Reuses the .t13-ix-metric number+label component already defined above
   for the Impact ledger, just laid out inline instead of in a 2-col grid.
   Both figures are computed from the tenant's own real start/end dates
   (see timeline.blade.php) — never a fabricated number. */
.t13-ix-stats-row { display: flex; flex-wrap: wrap; gap: 0 clamp(2rem, 5vw, 3.5rem); margin-bottom: 2.25rem; }
.t13-ix-stats-row .t13-ix-metric { padding: 0; }

/* ---------- Timeline: tighten the intro-above-chapters gap ----------
   The intro (kicker + title + stats row) sits above the first full-height (100vh)
   chapter. At full section top padding (up to 6rem) + head 2.4rem + stats 2.25rem the
   stacked space read as ~14rem of emptiness before any chapter appeared. Scoped to the
   timeline page ONLY (modifier on its <section>), so Impact/Vision/About keep the
   standard .t13-section / .t13-ix-head / .t13-ix-stats-row rhythm untouched. */
.t13-page--timeline { padding-top: clamp(1.75rem, 3.5vh, 2.75rem); }
.t13-page--timeline .t13-ix-head { margin-bottom: 1.25rem; }
.t13-page--timeline .t13-ix-stats-row { margin-bottom: 1.5rem; }

/* ---------- Timeline: single contact CTA ---------- */
.t13-contact { text-align: center; }
.t13-contact__addr { margin: .5rem 0 1.5rem; color: color-mix(in srgb, var(--t13-white) 82%, var(--t13-primary)); }
.t13-contact__chips { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: 1.75rem; }
.t13-contact__chip { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--t13-white) 26%, transparent); color: var(--t13-white); font-weight: 600; font-size: .9rem; transition: background .2s var(--t13-ease-ctrl), border-color .2s; }
.t13-contact__chip:hover { background: color-mix(in srgb, var(--t13-white) 12%, transparent); border-color: color-mix(in srgb, var(--t13-white) 55%, transparent); }

/* Link-colour overrides — common.css `.t13-main a:not(.t13-btn){color:inherit}` (0,2,1)
   would otherwise force these to inherit body ink. Match its specificity; pages.css
   loads later, so these win the tie. */
.t13-main a.t13-ix-forward { color: var(--t13-accent-ink); }
.t13-main a.t13-contact__chip { color: var(--t13-white); }

/* ---------- v2 responsive ---------- */
@media (max-width: 900px) {
  .t13-pri, .t13-mile, .t13-ix-statband, .t13-ix-ledger { grid-template-columns: 1fr; }
  .t13-ix-statband { grid-template-columns: 1fr 1fr; }
  /* Single column: hand the photo back to auto-placement, or grid-column:2 would
     conjure an implicit second column. Source order already stacks it title →
     photo → metrics, which is the reading order we want here. */
  .t13-pri--media { grid-template-rows: none; }
  .t13-pri--media .t13-pri__head,
  .t13-pri--media .t13-pri__img,
  .t13-pri--media .t13-pri__body { grid-column: auto; grid-row: auto; }
}
@media (max-width: 560px) {
  .t13-ix-statband { grid-template-columns: 1fr; }
  .t13-jour__row { grid-template-columns: 4rem 1fr; gap: .85rem; }
}

/* ---------- v3 responsive — new richness touches (roadmap nav, priority
   numerals, gallery caption/head, timeline stats row, featured speech) ---------- */
@media (max-width: 640px) {
  /* Keep the ordinal from crowding the title on a narrow column. */
  .t13-pri__head { gap: .7rem; }
  .t13-pri__idx { font-size: 1.9rem; }
  /* Supporting image, not a hero — keep it clearly short of the metrics below it.
     Tag-qualified for the same reason as the base rule above. */
  img.t13-pri__img { max-width: 300px; border-radius: 1.25rem; }
  .t13-ix-roadmap { gap: .5rem; margin-bottom: 2rem; }
  .t13-ix-roadmap a { padding: .4rem .85rem; font-size: .8rem; }
  .t13-ix-stats-row { flex-direction: column; gap: 1rem; margin-bottom: 1.75rem; }
  .t13-gallery__cap { font-size: .84rem; padding: .9rem .75rem .7rem; }
}

/* ---------- Impact category tabs ----------
   Panels are visible by default and hidden ONLY under .t13-has-tabs, which JS adds. Without
   JS every panel renders — a filter must never be the only route to the content. */
.t13-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.t13-tab {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--t13-line);
  background: var(--t13-p-050);
  font-size: .9rem; font-weight: 700; color: var(--t13-body);
  cursor: pointer;
  transition: background-color .15s var(--t13-ease-ctrl), color .15s var(--t13-ease-ctrl), border-color .15s var(--t13-ease-ctrl);
}
.t13-tab:hover { background: var(--t13-p-100); }
/* Active tab is an accent FILL with white text. A raw light accent (yellow) fill
   makes the white label vanish (~1.1:1); the darkened accent-ink keeps white legible
   on it for any hue (white on #746a19 ≈ 4.9:1, on #5d162c far higher). */
.t13-tab.is-active { background: var(--t13-accent-ink); border-color: var(--t13-accent-ink); color: var(--t13-white); }
.t13-tab:focus-visible { outline: 2px solid var(--t13-accent); outline-offset: 2px; }
.t13-has-tabs .t13-tabpanel[hidden] { display: none; }
/* ---------------------------------------------------------------------------
   Timeline chapters — full-viewport, reveal-once.
   Measured from the reference at 1440: NOT scroll-scrubbed (no sticky, no pin),
   just whileInView/once, which [data-reveal] + IntersectionObserver already is.
   Offsets are scoped to .t13-chap so global left/right stay at their ±30px.
   Backgrounds alternate ink/white; red is an accent only — a saturated red held
   across eight full screens reads as alarm rather than authority.
--------------------------------------------------------------------------- */
/* The run is the last child of a .t13-section, whose padding-block would otherwise leave a
   body-coloured band (up to --t13-section-py = 6rem) between the final chapter plate and the
   navy contact CTA below. Chapters must butt edge-to-edge, so pull that trailing padding back. */
.t13-chaps { margin-bottom: calc(var(--t13-section-py) * -1); }

.t13-chap {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.t13-chap--ink {
  background: var(--t13-p-900);
  /* Raw --t13-accent on this plate measures 2.73:1 (2.82:1 against the @supports
     fallback's literal #101f34) — .t13-chap__org is 16px/700 BODY content, so its
     floor is 4.5:1, not the 3:1 large-text one. Same "dark colour on dark banner"
     failure the navy band and the quote mark already litigated; reuse their token
     rather than a second one-off. Lightening 40% toward white measures 7.57:1
     (7.82:1 on the fallback). Computed from sRGB relative luminance at the real
     token values, not eyeballed.
     --t13-accent is TENANT-INJECTED (layout.blade.php), so this is not about
     #c8102e specifically: any accent dark enough to read on white — which is what
     tenants pick — fails on this plate. The mix is what makes it unbounded-safe. */
  --t13-accent-onnavy: color-mix(in srgb, var(--t13-accent) 40%, var(--t13-white));
}
.t13-chap--light { background: var(--t13-white); }

.t13-chap__bg { position: absolute; inset: 0; z-index: 0; }
/* motion.css:120-129 puts a blur filter on every [data-reveal="up"]. That is right for text
   blocks and wrong for a scaling backdrop — the two transforms fight and the plate smears.
   pages.css loads after motion.css, so this reset wins. It is load-bearing, not redundant. */
.t13-chap__bg[data-reveal="up"] { filter: none; }
.t13-chap__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: grayscale(1); }
.t13-chap__scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, #000 10%, transparent), transparent);
}
.t13-chap--ink .t13-chap__bg { opacity: .2; }
.t13-chap--light .t13-chap__bg { opacity: .08; }

.t13-chap__grid {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 5fr 7fr;
    gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
    padding-block: clamp(3rem, 8vh, 6rem);
}
/* The 7fr column belongs to .t13-chap__media, which timeline.blade.php emits ONLY when the
   entry carries a photo — leaving a lone text child pinned to 5fr (~480px of a 1280px
   container) with ~672px of dead space beside it, vertically centred on a 100vh plate. That
   is not a rare state: the live client has no timeline photos at all, and every education
   row hardcodes img => null, so the demo hits it too.
   Scoped to --nomedia (set by the blade only when there is no image) rather than :only-child
   so the modifier stays declarative and greppable, matching .t13-pri--media on the vision
   page above. A photoless chapter gets the full measure; --desc's own max-width: 40ch keeps
   the line length readable, so this widens the plate, not the prose. */
.t13-chap--nomedia .t13-chap__grid { grid-template-columns: 1fr; }
.t13-chap__year {
    display: block; line-height: 1; font-weight: 900;
    font-size: clamp(4.5rem, 12vw, 12rem);
    letter-spacing: -.04em; margin-bottom: .25em;
    color: var(--t13-accent); opacity: .16;
}
.t13-chap__title { font-size: clamp(1.9rem, 4.4vw, 3.6rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 .5rem; }
.t13-chap__org { font-weight: 700; color: var(--t13-accent-ink); margin: 0 0 .75rem; }
.t13-chap__desc { font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.65; max-width: 40ch; margin: 0; opacity: .85; }
.t13-chap--ink .t13-chap__title, .t13-chap--ink .t13-chap__desc { color: var(--t13-white); }
/* The ink plate's org line, lifted off the raw accent — see the note on .t13-chap--ink.
   The --light plate keeps the raw accent: on --t13-white it already clears AA. */
.t13-chap--ink .t13-chap__org { color: var(--t13-accent-onnavy); }
.t13-chap--light .t13-chap__title { color: var(--t13-ink); }
.t13-chap--light .t13-chap__desc { color: var(--t13-body); }

/* Skeleton: the <img> is loading="lazy" and has no intrinsic background, so before
   it decodes the box is transparent and shows whatever plate sits behind it. A tonal
   fill here reads as a soft placeholder instead of a stark flash while it loads. Two
   variants because a near-white tint (--t13-p-050) is right on the light plate but
   would flash pale against the navy .t13-chap--ink one — the white/transparent mix
   matches the outline rule directly below it. */
.t13-chap__media { border-radius: 1.5rem; overflow: hidden; box-shadow: 0 25px 50px -12px rgb(0 0 0 / .45); background: var(--t13-p-050); }
.t13-chap__media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.t13-chap--ink .t13-chap__media {
  outline: 1px solid color-mix(in srgb, var(--t13-white) 10%, transparent); outline-offset: -1px;
  background: color-mix(in srgb, var(--t13-white) 8%, transparent);
}

/* Reference offsets: text x:-50, media x:50 + scale(.9), bg scale(.8). Scoped so the
   global [data-reveal] contract is unchanged for every other component. */
.t13-chap [data-reveal="left"] { transform: translateX(-50px); }
.t13-chap [data-reveal="right"] { transform: translateX(50px) scale(.9); }
.t13-chap__bg[data-reveal] { transform: scale(.8); transition: transform 1s var(--t13-ease-circ), opacity 1s var(--t13-ease-circ); }
.t13-chap [data-reveal].is-in { transform: none; }
/* The bg is a 20%/8% wash, not full opacity — it must not resolve to the global opacity:1. */
.t13-chap--ink .t13-chap__bg[data-reveal].is-in { opacity: .2; }
.t13-chap--light .t13-chap__bg[data-reveal].is-in { opacity: .08; }

@media (max-width: 900px) {
    .t13-chap { min-height: auto; }
    .t13-chap__grid { grid-template-columns: 1fr; padding-block: clamp(2.5rem, 8vh, 4rem); }
    .t13-chap__media { order: -1; }
    .t13-chap [data-reveal="left"], .t13-chap [data-reveal="right"] { transform: translateY(20px); }
}
/* Mobile rhythm pass (mobile-polish round): the 900px block above already reverts
   the 100vh plate to auto height, but at phone widths it still carries
   near-desktop padding/gaps/year-scale — with 12 chapters that is most of the
   page's scroll length. Tighten block padding, the image->year->title->body gap,
   and shrink the year watermark so it reads as a backdrop the title sits over
   (negative margin lets the title's top edge overlap it) rather than a slab that
   pushes everything else down. Desktop (>900px, and the 769-900px band handled by
   the block above) is untouched — these two queries only ever make things smaller. */
@media (max-width: 768px) {
    .t13-chap__grid { padding-block: clamp(1.85rem, 6vh, 3rem); gap: clamp(1rem, 4vw, 1.5rem); }
    .t13-chap__year { font-size: clamp(2.75rem, 9vw, 4rem); margin-bottom: -.25em; opacity: .14; }
    /* Long page, mostly off-screen at any moment: skip paint/layout work for chapters
       far from the viewport. contain-intrinsic-size is a rough placeholder height (not
       exact per-chapter) purely so the scrollbar/scroll position doesn't jump when a
       chapter is (de)activated; it does not affect the reveal IntersectionObserver,
       which reads layout geometry, not paint state. */
    .t13-chap { content-visibility: auto; contain-intrinsic-size: 0 560px; }
}
@media (max-width: 480px) {
    .t13-chap__grid { padding-block: clamp(1.5rem, 5vh, 2.25rem); gap: clamp(.85rem, 4vw, 1.15rem); }
    .t13-chap__year { font-size: clamp(2.25rem, 11vw, 3rem); margin-bottom: -.2em; }
    .t13-chap { contain-intrinsic-size: 0 480px; }
}
@media (prefers-reduced-motion: reduce) {
    .t13-chap [data-reveal], .t13-chap__bg[data-reveal] { transform: none; }
}