@import './tokens.css';
@import './layers.css';

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0.5rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: #fff;
  color: #000;
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  left: 0.5rem;
  outline: 2px solid var(--journey-bg);
}

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

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--chrome-text);
}

#app-root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* —— Chrome —— */
.chrome {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  /* T2: subtle tint vs flat fill — keeps legibility */
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05) 0%,
    var(--chrome-bg) 38%,
    var(--chrome-bg) 100%
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@media (min-width: 769px) {
  .chrome {
    padding-right: calc(var(--thumb-rail-width) + var(--space-3));
  }
}

.chrome__label {
  flex: 1 1 12rem;
  font-family: var(--font-sub);
  font-weight: 300;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.chrome__label strong {
  font-weight: 500;
  color: #fff;
}

.chrome__nav button {
  font: inherit;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: var(--chrome-text);
  cursor: pointer;
}

.chrome__nav button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.chrome__nav button:focus-visible {
  outline: 2px solid var(--journey-secondary);
  outline-offset: 2px;
}

.chrome__icon-btn {
  font: inherit;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: var(--chrome-text);
  cursor: pointer;
}

/* Desktop: fixed vertical rail (macOS Preview–style), full viewport height */
.chrome-thumbs-desktop {
  display: none;
}

.chrome-thumbs-desktop__label {
  margin: 0 0 var(--space-2);
  padding: 0 var(--space-1);
  font-family: var(--font-sub);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chrome-muted);
  text-align: center;
}

.chrome-thumbs-desktop__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
}

.chrome-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  max-width: calc(var(--thumb-rail-width) - 0.75rem);
  padding: 0.35rem 0.25rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  background: transparent;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 600;
  cursor: pointer;
}

.chrome-thumb__preview {
  display: block;
  width: 100%;
}

.chrome-thumb__img {
  display: block;
  width: 100%;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  object-fit: cover;
  object-position: center;
}

.chrome-thumb__img--landscape {
  aspect-ratio: 4 / 3;
}

.chrome-thumb__img--portrait {
  aspect-ratio: 9 / 16;
}

.chrome-thumb__img--half {
  aspect-ratio: auto;
}

.chrome-thumb__preview:has(.chrome-thumb__img) .chrome-thumb__sheet {
  display: none;
}

.chrome-thumb__sheet {
  display: block;
  width: 100%;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.35) 100%);
}

.chrome-thumb__sheet--landscape {
  aspect-ratio: 4 / 3;
}

.chrome-thumb__sheet--portrait {
  aspect-ratio: 9 / 16;
}

.chrome-thumb__sheet::after {
  content: '';
  display: block;
  width: 42%;
  height: 18%;
  margin: 14% auto 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
}

.chrome-thumb[data-pillar='story'] .chrome-thumb__sheet,
.contents-thumb[data-pillar='story'] .chrome-thumb__sheet {
  background: linear-gradient(
    160deg,
    var(--story-secondary) 0%,
    var(--story-bg) 52%,
    var(--story-thumb-gradient-end) 100%
  );
}

.chrome-thumb[data-pillar='journey'] .chrome-thumb__sheet,
.contents-thumb[data-pillar='journey'] .chrome-thumb__sheet {
  background: linear-gradient(
    160deg,
    var(--journey-secondary) 0%,
    var(--journey-bg) 52%,
    var(--journey-thumb-gradient-end) 100%
  );
}

.chrome-thumb[data-pillar='voices'] .chrome-thumb__sheet,
.contents-thumb[data-pillar='voices'] .chrome-thumb__sheet {
  background: linear-gradient(
    160deg,
    var(--voices-secondary) 0%,
    var(--voices-bg) 52%,
    var(--voices-thumb-gradient-end) 100%
  );
}

.chrome-thumb[data-pillar='action'] .chrome-thumb__sheet,
.contents-thumb[data-pillar='action'] .chrome-thumb__sheet {
  background: linear-gradient(
    160deg,
    var(--action-secondary) 0%,
    var(--action-bg) 52%,
    var(--action-thumb-gradient-end) 100%
  );
}

.chrome-thumb[data-pillar='neutral'] .chrome-thumb__sheet,
.contents-thumb[data-pillar='neutral'] .chrome-thumb__sheet {
  background: linear-gradient(
    160deg,
    var(--neutral-bg) 0%,
    var(--neutral-secondary) 44%,
    var(--neutral-thumb-gradient-end) 100%
  );
}

.chrome-thumb__num {
  font-family: var(--font-sub);
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.95;
}

.chrome-thumb[aria-selected='true'] {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.25);
}

.chrome-thumb[aria-selected='true'] .chrome-thumb__sheet,
.chrome-thumb[aria-selected='true'] .chrome-thumb__img,
.contents-thumb[aria-selected='true'] .chrome-thumb__sheet,
.contents-thumb[aria-selected='true'] .chrome-thumb__img,
.contents-thumb[aria-selected='true'] .chrome-thumb__preview--half {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

.chrome-thumb[aria-selected='true'][data-pillar='story'] .chrome-thumb__sheet,
.chrome-thumb[aria-selected='true'][data-pillar='story'] .chrome-thumb__img,
.chrome-thumb[aria-selected='true'][data-pillar='story'] .chrome-thumb__preview--half,
.contents-thumb[aria-selected='true'][data-pillar='story'] .chrome-thumb__sheet,
.contents-thumb[aria-selected='true'][data-pillar='story'] .chrome-thumb__img,
.contents-thumb[aria-selected='true'][data-pillar='story'] .chrome-thumb__preview--half {
  box-shadow: 0 0 0 2px var(--story-highlight), 0 4px 12px rgba(0, 0, 0, 0.45);
}

.chrome-thumb[aria-selected='true'][data-pillar='journey'] .chrome-thumb__sheet,
.chrome-thumb[aria-selected='true'][data-pillar='journey'] .chrome-thumb__img,
.chrome-thumb[aria-selected='true'][data-pillar='journey'] .chrome-thumb__preview--half,
.contents-thumb[aria-selected='true'][data-pillar='journey'] .chrome-thumb__sheet,
.contents-thumb[aria-selected='true'][data-pillar='journey'] .chrome-thumb__img,
.contents-thumb[aria-selected='true'][data-pillar='journey'] .chrome-thumb__preview--half {
  box-shadow: 0 0 0 2px var(--journey-secondary), 0 4px 12px rgba(0, 0, 0, 0.45);
}

.chrome-thumb[aria-selected='true'][data-pillar='voices'] .chrome-thumb__sheet,
.chrome-thumb[aria-selected='true'][data-pillar='voices'] .chrome-thumb__img,
.chrome-thumb[aria-selected='true'][data-pillar='voices'] .chrome-thumb__preview--half,
.contents-thumb[aria-selected='true'][data-pillar='voices'] .chrome-thumb__sheet,
.contents-thumb[aria-selected='true'][data-pillar='voices'] .chrome-thumb__img,
.contents-thumb[aria-selected='true'][data-pillar='voices'] .chrome-thumb__preview--half {
  box-shadow: 0 0 0 2px var(--voices-highlight), 0 4px 12px rgba(0, 0, 0, 0.45);
}

.chrome-thumb[aria-selected='true'][data-pillar='action'] .chrome-thumb__sheet,
.chrome-thumb[aria-selected='true'][data-pillar='action'] .chrome-thumb__img,
.chrome-thumb[aria-selected='true'][data-pillar='action'] .chrome-thumb__preview--half,
.contents-thumb[aria-selected='true'][data-pillar='action'] .chrome-thumb__sheet,
.contents-thumb[aria-selected='true'][data-pillar='action'] .chrome-thumb__img,
.contents-thumb[aria-selected='true'][data-pillar='action'] .chrome-thumb__preview--half {
  box-shadow: 0 0 0 2px var(--action-highlight), 0 4px 12px rgba(0, 0, 0, 0.45);
}

.chrome-thumb[aria-selected='true'][data-pillar='neutral'] .chrome-thumb__sheet,
.chrome-thumb[aria-selected='true'][data-pillar='neutral'] .chrome-thumb__img,
.chrome-thumb[aria-selected='true'][data-pillar='neutral'] .chrome-thumb__preview--half,
.contents-thumb[aria-selected='true'][data-pillar='neutral'] .chrome-thumb__sheet,
.contents-thumb[aria-selected='true'][data-pillar='neutral'] .chrome-thumb__img,
.contents-thumb[aria-selected='true'][data-pillar='neutral'] .chrome-thumb__preview--half {
  box-shadow: 0 0 0 2px var(--neutral-highlight), 0 4px 12px rgba(0, 0, 0, 0.45);
}

.chrome-thumbs-mobile-toggle {
  display: block;
}

@media (min-width: 769px) {
  .chrome-thumbs-desktop {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 35;
    width: var(--thumb-rail-width);
    padding: var(--thumb-rail-padding-top) var(--space-1) var(--space-2);
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: linear-gradient(
      200deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(6, 12, 11, 0.94) 28%,
      rgba(6, 12, 11, 0.97) 100%
    );
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.25);
  }

  .chrome-thumbs-mobile-toggle {
    display: none;
  }

  /* Mobile half-step drawer is not used on desktop */
  dialog.chrome-thumbs-drawer {
    display: none !important;
  }
}

/* —— Main canvas —— */
main#main-canvas {
  flex: 1;
  padding: var(--space-3) var(--space-2) var(--space-4);
}

@media (min-width: 769px) {
  main#main-canvas {
    padding-right: calc(var(--thumb-rail-width) + var(--space-2));
  }
}

.landscape-page {
  position: relative;
  isolation: isolate;
  max-width: var(--max-canvas);
  margin: 0 auto var(--space-4);
  /* No outer padding: uniform section padding inset the whole canvas and read as a thick pillar-coloured “frame” around the two-tone right column. Gutters live on `.landscape-page__half.*` instead so the right panel can bleed to the card edge. */
  padding: 0;
  border-radius: var(--radius-md);
  background: var(--page-bg, var(--neutral-bg));
  color: var(--page-text, var(--neutral-text));
  box-shadow: var(--shadow-pop);
  scroll-margin-top: 5.5rem;
  /* Two-tone: canonical pillar tokens before `.landscape-page__half.right` remaps `--page-*` for descendants */
  --page-canvas-bg: var(--page-bg);
  --page-canvas-text: var(--page-text);
  --page-canvas-secondary: var(--page-secondary);
  --page-canvas-highlight: var(--page-highlight);
}

/* Hidden chapters (#page-5, #page-7, #page-9, #page-10): in DOM for internal/future use only — not in the public 6-page scroll deck. */
.landscape-page[data-nav-hidden='true'] {
  display: none;
}

/* Pillar texture: `.landscape-page__canvas::before` — one layer spanning both halves so `cover` is contiguous across the spine (not re-centered per column). */
.landscape-page__canvas {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 42vh;
  border-radius: inherit;
  overflow: hidden;
}

/* Shared grain for the full book spread; `--page-texture-*` inherit from `[data-pillar]` on `.landscape-page`.
 * Avoid `background-attachment: fixed` (large textures + fixed = scroll jank). WebP + resize live in tokens `image-set()`. */
.landscape-page__canvas::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: var(--page-texture-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--page-texture-opacity, 0);
}

.landscape-page__half {
  position: relative;
  z-index: 1;
}

/* Book / two-tone: outer spacing comes from halves, not the section wrapper (avoids pillar strip around the right panel). */
.landscape-page__half.left {
  padding: var(--space-3);
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

@media (prefers-reduced-transparency: reduce), (prefers-reduced-motion: reduce) {
  .landscape-page__canvas::before {
    opacity: calc(var(--page-texture-opacity, 0) * 0.45);
  }

  .landscape-page[data-pillar='neutral'] .landscape-page__canvas::before {
    opacity: min(0.24, calc(var(--page-texture-opacity, 0) * 0.45 * 2.05));
  }

  .landscape-page__half.right::before {
    opacity: calc(var(--page-texture-right-overlay-opacity, 0.18) * 0.55);
  }

  .landscape-page__half.left::after,
  .landscape-page__half.right::after {
    opacity: 0.38;
  }
}

/*
 * T2 — Logo stack corner mark on `.landscape-page__half.*::after` (inside each half’s stacking context).
 * Stamp `z-index: 1`; headings `z-index: 2` so titles paint above the mark. Stacked layout (<900px): only
 * `.left::after` (top-right of the upper half = card corner). Row layout: only `.right::after`.
 */
.landscape-page__half.left::after,
.landscape-page__half.right::after {
  content: '';
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 5.5rem;
  height: 5.5rem;
  z-index: 1;
  pointer-events: none;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.2);
  opacity: 0.72;
  background-color: rgba(0, 0, 0, 0.2);
  background-image: var(--page-logo-rim, none), var(--page-logo-base, none),
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.22) 0%, transparent 58%),
    radial-gradient(circle at 70% 74%, rgba(255, 255, 255, 0.1) 0%, transparent 52%);
  background-size: contain, contain, 130% 130%, 130% 130%;
  background-position: center, center, 10% 0%, 90% 100%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

.landscape-page__half.right::after {
  display: none;
}

.landscape-page__half.left::after {
  display: block;
}

.landscape-page[data-pillar='neutral'] .landscape-page__half.left::after,
.landscape-page[data-pillar='neutral'] .landscape-page__half.right::after {
  opacity: 0.58;
  border-color: rgba(0, 51, 48, 0.25);
}

@media (min-width: 900px) {
  .landscape-page__canvas {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    min-height: 56vh;
  }

  .landscape-page__half.left::after {
    display: none;
  }

  .landscape-page__half.right::after {
    display: block;
  }

  .landscape-page__half {
    flex: 1;
    min-width: 0;
  }

  /* Book spine: single hairline from left-column ink (not a second inset frame on the right) */
  .landscape-page__half.left {
    padding-right: var(--space-3);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: var(--radius-md);
    border-top-left-radius: var(--radius-md);
    border-right: 1px solid color-mix(in srgb, var(--page-canvas-text) 22%, transparent);
  }
}

@media (max-width: 899px) {
  .landscape-page__canvas {
    gap: 0;
  }
}

@media (max-width: 768px) {
  .landscape-page__half {
    scroll-margin-top: 5.75rem;
  }
}

/* —— Two-tone: right column = light panel (ink = canvas bg; surface = canvas text; accent swap). Neutral uses a dedicated block below (book light, not #000). —— */
.landscape-page__half.right {
  position: relative;
  align-self: stretch;
  padding: var(--space-3);
  margin: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  background-color: var(--page-canvas-text);
  color: var(--page-canvas-bg);
  --page-bg: var(--page-canvas-text);
  --page-text: var(--page-canvas-bg);
  --page-secondary: var(--page-canvas-highlight);
  --page-highlight: var(--page-canvas-secondary);
}

/* Pillar PNG grain on the opaque right surface — low-opacity overlay (token) matches left ~20% texture feel; no blend-mode stack. */
.landscape-page__half.right::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: var(--page-texture-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--page-texture-right-overlay-opacity, 0.18);
}

@media (min-width: 900px) {
  .landscape-page__half.right {
    margin: 0;
    padding: var(--space-3);
    border-left: none;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }
}

@media (max-width: 899px) {
  .landscape-page__half.right {
    margin-top: 0;
    padding-top: var(--space-3);
    border-top: 1px solid color-mix(in srgb, var(--page-canvas-text) 18%, transparent);
  }
}

/* Neutral (intro p.1, outro p.10): right = full light mode — white surface, navy ink; flip secondary ↔ highlight from canvas (not literal two-tone inversion). */
.landscape-page[data-pillar='neutral'] .landscape-page__half.right {
  background-color: var(--neutral-light-surface);
  color: var(--neutral-light-ink);
  --page-bg: var(--neutral-light-surface);
  --page-text: var(--neutral-light-ink);
  --page-secondary: var(--page-canvas-highlight);
  --page-highlight: var(--page-canvas-secondary);
}

/* Neutral universal PNG reads faint on mint left — lift shared grain only on this pillar. */
.landscape-page[data-pillar='neutral'] .landscape-page__canvas::before {
  opacity: min(0.44, calc(var(--page-texture-opacity, 0.2) * 2.1));
}

/*
 * Prompt B1 — right-column legibility (WCAG AA targets from docs/plan/two-tone/A1_verification-notes.md).
 * Saturated pillars: raw canvas-bg as ink on grey/white panels fails AA — darken body + sync --page-text for components.
 * Story: subhead (h3) slightly deepened. Page 3: row chrome used white hairlines — invisible on story light panel.
 */
.landscape-page[data-pillar='journey'] .landscape-page__half.right {
  color: color-mix(in srgb, var(--page-canvas-bg) 72%, #000 28%);
  --page-text: color-mix(in srgb, var(--page-canvas-bg) 72%, #000 28%);
}

.landscape-page[data-pillar='journey'] .landscape-page__half.right h3,
.landscape-page[data-pillar='journey'] .landscape-page__half.right a:any-link {
  color: color-mix(in srgb, var(--page-canvas-secondary) 50%, #000 50%);
}

.landscape-page[data-pillar='journey'] .landscape-page__half.right a:hover {
  color: color-mix(in srgb, var(--page-secondary) 70%, #000 30%);
}

.landscape-page[data-pillar='journey'] .landscape-page__half.right a:visited {
  color: color-mix(in srgb, var(--page-highlight) 42%, #000 58%);
}

.landscape-page[data-pillar='voices'] .landscape-page__half.right {
  color: color-mix(in srgb, var(--page-canvas-bg) 69%, #000 31%);
  --page-text: color-mix(in srgb, var(--page-canvas-bg) 69%, #000 31%);
}

.landscape-page[data-pillar='voices'] .landscape-page__half.right h3,
.landscape-page[data-pillar='voices'] .landscape-page__half.right a:any-link {
  color: color-mix(in srgb, var(--page-canvas-secondary) 55%, #000 45%);
}

.landscape-page[data-pillar='voices'] .landscape-page__half.right a:hover {
  color: color-mix(in srgb, var(--page-secondary) 68%, #000 32%);
}

.landscape-page[data-pillar='voices'] .landscape-page__half.right a:visited {
  color: color-mix(in srgb, var(--page-highlight) 48%, #000 52%);
}

.landscape-page[data-pillar='action'] .landscape-page__half.right {
  color: color-mix(in srgb, var(--page-canvas-bg) 75%, #000 25%);
  --page-text: color-mix(in srgb, var(--page-canvas-bg) 75%, #000 25%);
}

.landscape-page[data-pillar='action'] .landscape-page__half.right h3,
.landscape-page[data-pillar='action'] .landscape-page__half.right a:any-link {
  color: color-mix(in srgb, var(--page-canvas-secondary) 62%, #000 38%);
}

.landscape-page[data-pillar='action'] .landscape-page__half.right a:hover {
  color: color-mix(in srgb, var(--page-secondary) 72%, #000 28%);
}

.landscape-page[data-pillar='action'] .landscape-page__half.right a:visited {
  color: color-mix(in srgb, var(--page-highlight) 52%, #000 48%);
}

.landscape-page[data-pillar='story'] .landscape-page__half.right h3 {
  color: color-mix(in srgb, var(--page-highlight) 81%, #1a0808 19%);
}

.landscape-page[data-pillar='neutral'] .landscape-page__half.right .contents-thumb .chrome-thumb__num {
  color: #0a1628;
}

.landscape-page[data-pillar='neutral'] .landscape-page__half.right .contents-blurb {
  color: var(--page-text);
  background: color-mix(in srgb, var(--page-text) 6%, #ffffff 94%);
}

.landscape-page[data-pillar='story'] .landscape-page__half.right .swo-row,
.landscape-page[data-pillar='story'] .landscape-page__half.right .forgotten-row,
.landscape-page[data-pillar='story'] .landscape-page__half.right .collab-row {
  border-color: color-mix(in srgb, var(--page-text) 16%, transparent);
  background: color-mix(in srgb, var(--page-text) 7%, transparent);
}

/* In-page links: themed (no default browser blue) */
.landscape-page a:any-link {
  color: var(--page-highlight, LinkText);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.18em;
}

.landscape-page a:hover {
  color: var(--page-secondary, var(--page-highlight));
}

.landscape-page a:visited {
  color: color-mix(in srgb, var(--page-highlight, LinkText) 88%, var(--page-text) 12%);
}

.landscape-page a:focus-visible {
  outline: 2px solid var(--page-highlight, currentColor);
  outline-offset: 3px;
  border-radius: 2px;
}

/*
 * Prompt D1 — focus rings on the light (right) half: `--page-highlight` is often a pastel after two-tone swap;
 * use `--page-text` (B1-darkened body ink) for outlines so WCAG focus visibility holds on grey/pink/white panels.
 * Texture: `.landscape-page__canvas::before` (shared `cover` under both halves) + `.landscape-page__half.right::before` with the same image at `--page-texture-right-overlay-opacity` (~15–20%) so the right column matches the left grain strength without blend-mode variance across pillars.
 */
.landscape-page__half.right a:focus-visible {
  outline: 2px solid var(--page-text);
  outline-offset: 3px;
  border-radius: 2px;
}

.landscape-page__half.right .p2-timeline-node:focus-visible,
.landscape-page__half.right .pipeline-node:focus-visible {
  outline: 2px solid var(--page-text);
  outline-offset: 2px;
}

.landscape-page__half.right summary.accordion-summary:focus-visible {
  outline: 2px solid var(--page-text);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.landscape-page__half.right .p3-carousel__btn:focus-visible,
.landscape-page__half.right .p3-carousel__track:focus-visible,
.landscape-page__half.right .p3-carousel__slide-hit:focus-visible,
.landscape-page__half.right .p3-preview-thumb-link:focus-visible,
.landscape-page__half.right .p3-preview-thumb-open:focus-visible,
.landscape-page__half.right .p3-preview-open-btn:focus-visible {
  outline: 2px solid var(--page-text);
  outline-offset: 2px;
}

#page-3 .landscape-page__half.left .reach-stat__peek-btn:focus-visible {
  outline: 2px solid var(--page-text);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

#page-3 .landscape-page__half.left .p3-press-era-pill:focus-visible {
  outline: 2px solid var(--page-text);
  outline-offset: 3px;
  border-radius: 999px;
}

.landscape-page__half h2 {
  position: relative;
  z-index: 2;
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  letter-spacing: 0.08em;
  word-spacing: 0.16em;
  opacity: var(--heading-opacity);
  margin: 0 0 var(--space-3);
  line-height: 1.15;
  text-align: center;
}

.landscape-page__half h3 {
  position: relative;
  z-index: 2;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.125rem;
  margin: var(--space-4) 0 var(--space-2);
  color: var(--page-highlight, inherit);
  text-align: center;
}

.landscape-page__half h3:has(.interaction-svg) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.landscape-page__half h3:first-of-type {
  margin-top: 0;
}

/* Rubik Dirt stack — explicit 80% where heading opacity is not already applied */
.peek-legal__title,
.peek-roots__title,
.p3-youtube-dialog__title {
  opacity: var(--heading-opacity, 0.8);
}

/* Reach dial track: readable on light panels (was P2 right; P3 left story column) */
.landscape-page__half.right .reach-stat__track,
#page-3 .landscape-page__half.left .reach-stat__track {
  stroke: color-mix(in srgb, var(--page-text) 28%, transparent);
}

/* Right column: chips / timeline assumed dark glass on saturated pillars */
.landscape-page__half.right .peek-btn:not(.peek-btn--icon-only),
.landscape-page__half.right .open-btn:not(.open-btn--icon-only) {
  background: color-mix(in srgb, var(--page-text) 12%, transparent);
}

.landscape-page__half.right .pipeline-node {
  border-color: color-mix(in srgb, var(--page-text) 30%, transparent);
  background: color-mix(in srgb, var(--page-text) 8%, transparent);
}

.landscape-page__half.right .pipeline-node[aria-pressed='true'] {
  background: color-mix(in srgb, var(--page-highlight) 26%, transparent);
  border-color: var(--page-highlight);
}

.landscape-page__half.right .p2-timeline-shell__cell {
  background: color-mix(in srgb, var(--page-text) 9%, transparent);
}

.landscape-page__half.right .p2-timeline-shell__cell-label {
  text-align: center;
  width: 100%;
}

.landscape-page__half.right .p2-timeline-shell__cell--tr .p2-timeline-shell__cell-label,
.landscape-page__half.right .p2-timeline-shell__cell--br .p2-timeline-shell__cell-label {
  text-align: center;
}

.landscape-page__half.right .p2-timeline__baseline {
  color: color-mix(in srgb, var(--page-text) 48%, transparent);
}

.landscape-page__half.right .p2-timeline-node {
  background: color-mix(in srgb, var(--page-text) 14%, var(--page-bg) 86%);
  border-color: color-mix(in srgb, var(--page-text) 38%, transparent);
  color: var(--page-text);
}

.landscape-page__half.right .p2-timeline-node[aria-pressed='true'] {
  background: color-mix(in srgb, var(--page-highlight) 34%, var(--page-bg) 66%);
  border-color: var(--page-highlight);
  color: var(--page-text);
}

/* Page 3 story: carousel controls were tuned for full-width dark pillar; separate from light column surface */
.landscape-page__half.right #page-3[data-pillar='story'] .p3-carousel__btn {
  background: color-mix(in srgb, #fff 92%, var(--page-highlight) 8%);
  color: var(--page-text);
  border-color: color-mix(in srgb, var(--page-text) 28%, transparent);
}

.landscape-page__half.right #page-3[data-pillar='story'] .p3-carousel__btn:hover:not(:disabled) {
  background: #fff;
}

.tagline {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  letter-spacing: 0.08em;
  word-spacing: 0.16em;
  opacity: var(--heading-opacity);
  margin-bottom: var(--space-2);
}

/* Page 1 — hero title (Jost Light); interaction lab + examples (peek hover-open in app.js) */
#page-1 .p1-hero {
  margin: 0 0 var(--space-4);
  text-align: center;
}

#page-1 .p1-hero__title {
  margin: 0;
  padding: 0;
  font-family: var(--font-sub);
  font-weight: 300;
  /* ~4× `.landscape-page__half h2` size (clamp(1.35rem, 3vw, 1.85rem)) */
  font-size: calc(3 * clamp(1.35rem, 3vw, 1.85rem));
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--page-highlight, var(--neutral-highlight));
}

#page-1 .p1-hero__line {
  display: block;
}

.p1-use-lede {
  margin: 0 0 var(--space-2);
  font-size: 0.88rem;
  line-height: 1.45;
  opacity: 0.95;
}

#page-1 .p1-howto {
  margin-bottom: var(--space-3);
}

#page-1 .p1-howto .interaction-lab--compact {
  margin-bottom: 0;
}

#page-1 .landscape-page__half.right .p1-interaction-examples {
  margin-top: 0;
  margin-bottom: var(--space-3);
}

#page-1 .p1-contents {
  margin-top: 0;
}

/*
 * Page 1 right — live interaction chips (Examples + Contents + expand), not How To lab demos.
 * Chip = neutral secondary; icon = light panel surface (white).
 */
#page-1 .p1-interaction-examples .peek-btn--icon-only,
#page-1 .p1-interaction-examples .open-btn--icon-only,
#page-1 .p1-interaction-examples .p1-section-acc > summary.accordion-summary .accordion-summary__marker {
  background: var(--neutral-secondary);
  color: var(--neutral-light-surface);
  box-shadow: 0 1px 4px rgba(0, 51, 48, 0.22);
}

#page-1 .p1-interaction-examples .peek-btn--icon-only:hover,
#page-1 .p1-interaction-examples .open-btn--icon-only:hover {
  background: color-mix(in srgb, var(--neutral-secondary) 90%, var(--neutral-light-ink) 10%);
  color: var(--neutral-light-surface);
}

#page-1 .p1-interaction-examples .peek-btn--icon-only:focus-visible,
#page-1 .p1-interaction-examples .open-btn--icon-only:focus-visible,
#page-1 .p1-interaction-examples .p1-section-acc > summary.accordion-summary:focus-visible .accordion-summary__marker {
  outline: 2px solid var(--neutral-light-ink);
  outline-offset: 2px;
}

/* Contents [choose] — plain glove (no chip), secondary ink, ~50% larger than default 14px icon */
#page-1 .p1-contents .contents-thumb[aria-selected='true'] .contents-choose-glove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.15rem;
  padding: 0;
  line-height: 0;
  color: var(--neutral-secondary);
  background: none;
  box-shadow: none;
  border-radius: 0;
}

#page-1 .p1-contents .contents-thumb[aria-selected='true'] .contents-choose-glove svg {
  display: block;
  width: 1.3125rem;
  height: 1.3125rem;
}

.interaction-lab--compact {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.interaction-lab--compact .interaction-lab__zone {
  flex: 1 1 0;
  min-width: 5.75rem;
  max-width: 10rem;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.38);
  color: var(--page-text, var(--neutral-text));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  scroll-snap-align: start;
}

.interaction-lab__heading {
  margin: 0 0 0.2rem;
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--page-highlight, var(--neutral-highlight));
  line-height: 1.2;
}

.interaction-lab__invoker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  margin: 0;
  padding: 0.08rem;
  border-radius: 50%;
  border: none;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--page-secondary, var(--neutral-secondary)) 42%, #ffffff 58%);
  color: var(--page-highlight, var(--neutral-highlight));
  line-height: 0;
}

.interaction-lab__invoker:hover {
  background: rgba(255, 255, 255, 0.85);
}

.interaction-lab__invoker:focus-visible {
  outline: 2px solid var(--neutral-highlight);
  outline-offset: 2px;
}

.interaction-lab__microcopy {
  margin: 0.2rem 0 0;
  font-size: 0.58rem;
  line-height: 1.25;
  opacity: 0.82;
  max-width: 9rem;
}

/* Overview cards: fine pointer → hover/click copy; coarse / no hover → tap copy */
.interaction-hint--fine,
.interaction-hint--coarse {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .interaction-hint--fine {
    display: inline;
  }
}

@media (hover: none), (pointer: coarse) {
  .interaction-hint--coarse {
    display: inline;
  }
}

.interaction-lab__glyph-xl {
  margin: 0.15rem 0 0.1rem;
  color: var(--page-highlight, var(--neutral-highlight));
  line-height: 0;
}

.interaction-lab__glyph-xl svg {
  display: block;
}

/* Expand intro: both double-chevron directions inline in the card (closed vs open accordion marker) */
.interaction-lab__expand-arrows {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  line-height: 0;
}

.interaction-lab__glyph-xl--expand .interaction-lab__expand-chev {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  transform-origin: 50% 50%;
}

.interaction-lab__expand-chev--up {
  transform: rotate(180deg);
}

.interaction-lab__glyph--change {
  margin: 0 0 0.15rem;
  color: var(--page-highlight, var(--neutral-highlight));
  line-height: 0;
}

.interaction-lab__svg {
  display: block;
}

.interaction-lab__track {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 0 0.2rem;
  width: 100%;
  min-height: 0;
}

.interaction-lab__track-line {
  flex: 1;
  height: 2px;
  margin: 0 0.2rem;
  border-radius: 2px;
  background: rgba(0, 51, 48, 0.3);
}

.change-node {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 2px solid rgba(0, 51, 48, 0.35);
  background: rgba(255, 255, 255, 0.65);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  color: inherit;
}

.change-node[aria-pressed='true'] {
  border-color: var(--neutral-highlight);
  background: #fff;
  box-shadow: 0 0 0 1px var(--neutral-highlight);
}

.change-node:focus-visible {
  outline: 2px solid var(--neutral-highlight);
  outline-offset: 2px;
}

.interaction-lab--compact .change-node {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.25rem;
  padding: 0.2rem 0.35rem;
  border-radius: 999px;
  border: 2px solid rgba(0, 51, 48, 0.32);
  background: rgba(255, 255, 255, 0.65);
  font-size: 0.58rem;
  line-height: 1.1;
  text-align: center;
}

.peek-popover .peek-popover__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sub);
  font-size: 0.95rem;
  font-weight: 600;
}

/* Page 1 — worked examples under interaction overview */
.p1-interaction-examples {
  margin: var(--space-3) 0 var(--space-2);
  padding: 0;
}

.p1-interaction-examples__title {
  margin: 0 0 0.35rem;
  font-family: var(--font-sub);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--page-highlight, var(--neutral-highlight));
}

.p1-interaction-examples__intro {
  margin: 0 0 var(--space-3);
  font-size: 0.82rem;
  line-height: 1.45;
  opacity: 0.9;
}

.p1-interaction-examples__example {
  margin-bottom: var(--space-3);
}

.p1-interaction-examples__example:last-child {
  margin-bottom: 0;
}

.p1-interaction-examples__question-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.p1-interaction-examples__question {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.92rem;
  line-height: 1.35;
}

.p1-interaction-examples__question strong {
  font-weight: 700;
  color: var(--page-text, var(--neutral-text));
}

.p1-interaction-examples__combined-line {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.85rem;
  width: 100%;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
}

.p1-interaction-examples__qseg {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.08rem;
}

.p1-interaction-examples__icon-after-q {
  margin-top: 0;
  vertical-align: middle;
}

.p1-interaction-examples__control {
  flex-shrink: 0;
}

/* Qual / quant: inline sentence + stacked [change] buttons + output on same flow */
.p1-qq-inline-flow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  margin: 0 0 var(--space-2);
  font-size: 0.92rem;
  line-height: 1.45;
}

.p1-qq-inline-flow__lead,
.p1-qq-inline-flow__tail {
  font-weight: 700;
  color: var(--page-text, var(--neutral-text));
}

.p1-qq-inline-flow__stack {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.28rem;
}

.p1-qq-inline-btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  min-width: 7.75rem;
  padding: 0.22rem 0.45rem;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 600;
  text-align: left;
}

.p1-qq-inline-btn__glyph {
  display: flex;
  align-items: center;
  line-height: 0;
  color: var(--page-highlight, var(--neutral-highlight));
}

.p1-qq-inline-btn__glyph svg {
  display: block;
  width: 1.05rem;
  height: 1.05rem;
}

.p1-qq-inline-flow__output.p1-interaction-examples__qq-output {
  flex: 1 1 14rem;
  min-width: min(100%, 11rem);
  margin: 0;
  padding: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--page-text, var(--neutral-text));
  border: none;
  background: transparent;
  min-height: 1.45rem;
}

.p1-interaction-examples__qq-output--placeholder {
  font-style: italic;
  opacity: 0.85;
}

#page-1 .p1-section-acc__body {
  padding-top: var(--space-2);
}

#page-1 .p1-section-acc__body p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
}

.interaction-lab .peek-btn,
.interaction-lab .open-btn {
  margin-left: 0;
  vertical-align: middle;
}

.interaction-lab .peek-btn--icon-only {
  margin-top: 0;
}

.interaction-lab .abbr {
  font-weight: 600;
  opacity: 0.95;
}

.layout-note {
  font-size: 0.85rem;
  opacity: 0.88;
  font-style: italic;
}

.placeholder-page .landscape-page__half p {
  margin: 0;
}

/* Interaction affordances — icon circles: pillar secondary tint, no ring, large glyph (site-wide) */
.peek-btn,
.open-btn {
  font: inherit;
  cursor: pointer;
  margin-left: 0.35rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
  vertical-align: middle;
}

.peek-btn--icon-only,
.open-btn--icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
  margin-top: 0;
  padding: 0.08rem;
  min-width: 2.35rem;
  min-height: 2.35rem;
  border-radius: 50%;
  border: none;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--page-secondary, var(--neutral-secondary)) 42%, #ffffff 58%);
  color: var(--page-highlight, var(--neutral-highlight));
}

.peek-btn--icon-only .peek-btn__eye {
  display: block;
  width: 1.95rem;
  height: 1.95rem;
  flex-shrink: 0;
}

.open-btn--icon-only svg {
  display: block;
  width: 1.55rem;
  height: 1.55rem;
  flex-shrink: 0;
}

.peek-btn--icon-only:focus-visible {
  outline: 2px solid var(--page-highlight, var(--neutral-highlight));
  outline-offset: 2px;
}

[popover] {
  padding: var(--space-3);
  max-width: min(90vw, 26rem);
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #fffef8;
  color: #1a1a1a;
  box-shadow: var(--shadow-pop);
}

[popover] a:any-link {
  color: var(--neutral-highlight, #064e3b);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

[popover] a:hover {
  color: color-mix(in srgb, var(--neutral-highlight, #064e3b) 85%, #000 15%);
}

[popover] a:focus-visible {
  outline: 2px solid var(--neutral-highlight, #064e3b);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Peek / [open] panels: anchored near invoker (see app.js positionAnchoredPopoverNearInvoker), not viewport-centred */
[popover].peek-popover {
  position: fixed;
  margin: 0;
  inset: unset;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  width: min(90vw, 26rem);
  max-width: min(90vw, 26rem);
  overflow: auto;
  transform: none;
}

/* Closed peek panels must not participate in page layout (popover API + fallback). */
[popover].peek-popover:not(:popover-open) {
  display: none;
}

/* [open] — Page 1 “Why we measure”: click/toggle popover; desktop anchored like peek; ≤768px right drawer 65vw */
[popover].open-popover {
  position: fixed;
  margin: 0;
  inset: unset;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  width: min(90vw, 36rem);
  max-width: min(90vw, 36rem);
  max-height: min(78vh, 40rem);
  overflow: auto;
  transform: none;
  padding: var(--space-3);
  padding-top: 2.85rem;
}

[popover].open-popover.impact-open-popover {
  border: none;
  background: #0f1c1a;
  color: #e8fffc;
  box-shadow: var(--shadow-pop);
}

[popover].open-popover.impact-open-popover a:any-link {
  color: var(--neutral-secondary, #7ac7c2);
}

[popover].open-popover.impact-open-popover a:hover {
  color: #fff;
}

[popover].open-popover.impact-open-popover::backdrop {
  background: transparent;
}

.open-popover__close {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.1);
  color: inherit;
  font: inherit;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.open-popover__close:focus-visible {
  outline: 2px solid var(--journey-secondary);
  outline-offset: 2px;
}

.open-popover__close-x {
  display: block;
  transform: translateY(-0.06em);
}

.impact-open-popover .impact-dialog__title {
  margin: 0 0 var(--space-2);
}

@media (max-width: 768px) {
  [popover].open-popover.impact-open-popover {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 65vw;
    min-width: 14rem;
    max-width: none;
    height: 100dvh;
    max-height: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.45);
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  [popover].open-popover.impact-open-popover:popover-open {
    animation: open-popover-drawer-in 0.24s ease-out;
  }
}

@keyframes open-popover-drawer-in {
  from {
    transform: translateX(100%);
    opacity: 0.94;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Page 2 Reach — peek popover layout + per-project row colours (P2-C); keys match data/page-2-reach.json */
.reach-popover__heading {
  margin: 0 0 0.35rem;
  font-family: var(--font-sub);
  font-size: 1rem;
  font-weight: 600;
  color: inherit;
}

.reach-popover__lead {
  margin: 0 0 var(--space-2);
  font-size: 0.88rem;
  line-height: 1.45;
  color: inherit;
  opacity: 0.92;
}

.reach-popover__rows {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.reach-popover__row:not(.reach-popover__row--sw) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 0.9rem;
}

.reach-popover__name {
  font-weight: 500;
  text-align: left;
}

.reach-popover__count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  opacity: 0.95;
  flex-shrink: 0;
}

.reach-popover__err {
  margin: 0;
  font-size: 0.88rem;
  color: #7a1f1f;
}

.reach-project--swo {
  border-left: 4px solid var(--story-secondary);
  background: rgba(156, 53, 56, 0.1);
}

.reach-project--forgotten-stories {
  border-left: 4px solid #6b4ea3;
  background: rgba(107, 78, 163, 0.1);
}

.reach-project--roots-forward {
  border-left: 4px solid var(--journey-secondary);
  background: rgba(0, 135, 139, 0.1);
}

.reach-project--arts-action-festival {
  border-left: 4px solid var(--action-secondary);
  background: rgba(255, 175, 1, 0.15);
}

.reach-project--mollys-masquerade {
  border-left: 4px solid var(--voices-secondary);
  background: rgba(23, 197, 105, 0.12);
}

.reach-project--experimental-experience {
  border-left: 4px solid #c45c26;
  background: rgba(196, 92, 38, 0.12);
}

.reach-popover__bar-wrap {
  position: relative;
  display: block;
  width: 100%;
  min-height: 1.35rem;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.reach-popover__bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  min-width: 2px;
  border-radius: 2px 0 0 2px;
  opacity: 0.72;
  pointer-events: none;
}

.reach-project--swo .reach-popover__bar {
  background: var(--story-secondary);
}

.reach-project--forgotten-stories .reach-popover__bar {
  background: #6b4ea3;
}

.reach-project--roots-forward .reach-popover__bar {
  background: var(--journey-secondary);
}

.reach-project--arts-action-festival .reach-popover__bar {
  background: var(--action-secondary);
}

.reach-project--experimental-experience .reach-popover__bar {
  background: #c45c26;
}

.reach-project--mollys-masquerade .reach-popover__bar {
  background: var(--voices-secondary);
}

.reach-popover__bar-count,
.reach-popover__bar-pct {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  line-height: 1;
  pointer-events: none;
}

.reach-popover__bar-count {
  left: 0.35rem;
  font-weight: 600;
}

.reach-popover__bar-pct {
  right: 0.35rem;
  font-weight: 700;
  opacity: 0.92;
}

.reach-popover__sw-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  align-items: start;
}

.reach-popover__sw-col--shows {
  text-align: left;
}

.reach-popover__sw-col--workshops {
  text-align: right;
}

.reach-popover__sw-col-title {
  margin: 0 0 0.4rem;
  font-family: var(--font-sub);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0.88;
}

.reach-popover__sw-col--shows .reach-popover__name {
  text-align: left;
}

.reach-popover__sw-col--workshops .reach-popover__name {
  text-align: right;
}

/* Workshops column: mirror Shows — accent border, bar fill, count, and % flip to the right edge */
.reach-popover__sw-col--workshops .reach-popover__row--mirror {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  border-right-width: 4px;
  border-right-style: solid;
}

.reach-popover__sw-col--workshops .reach-popover__row--mirror.reach-project--swo {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  border-right: 4px solid var(--story-secondary);
}

.reach-popover__sw-col--workshops .reach-popover__row--mirror.reach-project--forgotten-stories {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  border-right: 4px solid #6b4ea3;
}

.reach-popover__sw-col--workshops .reach-popover__row--mirror.reach-project--roots-forward {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  border-right: 4px solid var(--journey-secondary);
}

.reach-popover__sw-col--workshops .reach-popover__row--mirror.reach-project--arts-action-festival {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  border-right: 4px solid var(--action-secondary);
}

.reach-popover__sw-col--workshops .reach-popover__row--mirror.reach-project--experimental-experience {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  border-right: 4px solid #c45c26;
}

.reach-popover__sw-col--workshops .reach-popover__row--mirror.reach-project--mollys-masquerade {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  border-right: 4px solid var(--voices-secondary);
}

.reach-popover__sw-col--workshops .reach-popover__row--mirror .reach-popover__bar {
  left: auto;
  right: 0;
  border-radius: 0 2px 2px 0;
}

.reach-popover__sw-col--workshops .reach-popover__row--mirror .reach-popover__bar-count {
  left: auto;
  right: 0.35rem;
}

.reach-popover__sw-col--workshops .reach-popover__row--mirror .reach-popover__bar-pct {
  right: auto;
  left: 0.35rem;
}

.reach-popover__rows--nested {
  gap: 0.35rem;
}

[popover].peek-popover.peek-popover--reach-sw {
  max-width: min(36rem, 96vw);
  width: min(36rem, 96vw);
}

/* Page 2 RIGHT — context photo (above texture, below timeline cards) */
#page-2 .landscape-page__half.right > h2,
#page-2 .landscape-page__half.right > h3,
#page-2 #page-2-timeline-widget {
  position: relative;
  z-index: 2;
}

/* Context photo: height-led sizing; 25rem = prior 20rem mission cap × 1.25 */
#page-2 {
  --p2-context-photo-height: 25rem;
}

#page-2 .p2-right-context-photo {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: var(--p2-context-photo-height);
  max-width: min(62%, 30rem);
  margin-right: calc(-1 * var(--space-3));
  margin-bottom: calc(-1 * var(--space-3));
  pointer-events: none;
  overflow: visible;
}

#page-2 .p2-right-context-photo__img {
  display: block;
  width: auto;
  min-height: var(--p2-context-photo-height);
  height: var(--p2-context-photo-height);
  max-width: min(62vw, 30rem);
  object-fit: contain;
  object-position: right bottom;
}

/* Page 4 LEFT — context photo (above texture, below Pipelines osmosis; mirrors Page 2 spec) */
#page-4 .landscape-page__half.left > h2,
#page-4 .landscape-page__half.left > h3,
#page-4 .p4-osmosis-standalone,
#page-4 #page-4-osmosis-widget {
  position: relative;
  z-index: 2;
}

#page-4 {
  --p4-context-photo-height: 25rem;
}

#page-4 .p4-left-context-photo {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  min-height: var(--p4-context-photo-height);
  max-width: min(62%, 30rem);
  margin-left: calc(-1 * var(--space-3));
  margin-bottom: calc(-1 * var(--space-3));
  pointer-events: none;
  overflow: visible;
}

#page-4 .p4-left-context-photo__img {
  display: block;
  width: auto;
  min-height: var(--p4-context-photo-height);
  height: var(--p4-context-photo-height);
  max-width: min(62vw, 30rem);
  object-fit: contain;
  object-position: left bottom;
}

/* Page 2 — timeline shell: TL / TR, then track, then BL / BR (P2-D) */
.p2-timeline-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    'tl tr'
    'tm tm'
    'bl br';
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
}

.p2-timeline-shell__cell--tl {
  grid-area: tl;
}

.p2-timeline-shell__cell--tr {
  grid-area: tr;
}

.p2-timeline-shell__mid {
  grid-area: tm;
  width: 100%;
  min-width: 0;
}

.p2-timeline-shell__cell--bl {
  grid-area: bl;
}

.p2-timeline-shell__cell--br {
  grid-area: br;
}

.p2-timeline-shell__cell {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.12);
  font-size: 0.9rem;
  min-height: 3.75rem;
}

.p2-timeline-shell__cell-label {
  font-family: var(--font-sub);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}

.p2-timeline-shell__cell-body {
  flex: 1 1 auto;
  min-height: 2.75rem;
  width: 100%;
  font-size: 0.88rem;
  line-height: 1.45;
  white-space: pre-line;
}

/* TR / BR: two subtitled blocks (title + list), from page-2-timeline.json objects */
.p2-timeline-shell__cell-body.p2-timeline-dual {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  white-space: normal;
}

.p2-timeline-shell__cell--tr .p2-timeline-dual,
.p2-timeline-shell__cell--br .p2-timeline-dual {
  align-items: flex-end;
  text-align: right;
}

.p2-timeline-dual__title1,
.p2-timeline-dual__title2 {
  display: block;
  font-family: var(--font-sub);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
  color: inherit;
  margin-top: 0.15rem;
}

.p2-timeline-dual__title1 {
  margin-top: 0;
}

.p2-timeline-dual__data1,
.p2-timeline-dual__data2 {
  font-size: 0.86rem;
  line-height: 1.45;
  white-space: pre-line;
  margin: 0 0 0.4rem;
  width: 100%;
}

.p2-timeline-shell__cell--tr .p2-timeline-dual__data1,
.p2-timeline-shell__cell--br .p2-timeline-dual__data1,
.p2-timeline-shell__cell--tr .p2-timeline-dual__data2,
.p2-timeline-shell__cell--br .p2-timeline-dual__data2 {
  text-align: right;
}

.p2-timeline-dual__data2 {
  margin-bottom: 0;
}

.p2-timeline-shell__cell--tr .p2-timeline-shell__cell-label,
.p2-timeline-shell__cell--br .p2-timeline-shell__cell-label {
  text-align: right;
  width: 100%;
}

.p2-timeline-shell__cell--tr .p2-timeline-shell__cell-body,
.p2-timeline-shell__cell--br .p2-timeline-shell__cell-body {
  text-align: right;
}

.p2-timeline-shell__cell--tl,
.p2-timeline-shell__cell--bl {
  text-align: left;
}

.p2-timeline-shell__cell--tr,
.p2-timeline-shell__cell--br {
  text-align: right;
}

.p2-timeline {
  margin: 0;
  width: 100%;
  min-width: 0;
}

.p2-timeline__track {
  position: relative;
  padding: var(--space-2) 0;
  min-height: 4.5rem;
}

.p2-timeline__baseline {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

.p2-timeline__svg {
  display: block;
  width: 100%;
  height: 2px;
}

.p2-timeline__nodes {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.p2-timeline__slot {
  flex: 1 1 4.5rem;
  min-width: 3.25rem;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.p2-timeline-node {
  width: 3.35rem;
  height: 3.35rem;
  min-width: 3.35rem;
  min-height: 3.35rem;
  padding: 0.15rem;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  font-family: var(--font-sub);
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--page-text, inherit);
}

.p2-timeline-node__years {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
}

.p2-timeline-node__y {
  display: block;
}

.p2-timeline-node[aria-pressed='true'] {
  border-color: var(--page-highlight, var(--story-highlight));
  background: rgba(255, 255, 255, 0.22);
  color: #0d1a18;
}

/* Page 4 — career pipeline timeline-type fork (P4-E); tokens align with Page 2 timeline, class names forked */
.pipeline-widget--page4-careers {
  --p4-pipeline-line: var(--page-highlight, rgba(255, 255, 255, 0.55));
}

.pipeline-widget--page4-careers .p4-pipeline {
  margin: 0;
  width: 100%;
  min-width: 0;
}

.pipeline-widget--page4-careers .p4-pipeline__labels {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-1);
  margin: 0 0 0.35rem;
  padding: 0;
}

.pipeline-widget--page4-careers .p4-pipeline__label-slot {
  flex: 1 1 14%;
  min-width: 4.25rem;
  max-width: 100%;
  text-align: center;
}

.pipeline-widget--page4-careers .p4-pipeline__track {
  position: relative;
  padding: var(--space-2) 0;
  min-height: 3.25rem;
}

.pipeline-widget--page4-careers .p4-pipeline__baseline {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  color: var(--p4-pipeline-line);
  pointer-events: none;
  opacity: 0.88;
}

.pipeline-widget--page4-careers .p4-pipeline__svg {
  display: block;
  width: 100%;
  height: 2px;
}

.pipeline-widget--page4-careers .p4-pipeline__nodes {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2) var(--space-1);
  margin: 0;
  padding: 0;
}

.pipeline-widget--page4-careers .p4-pipeline__slot {
  flex: 1 1 14%;
  min-width: 4.25rem;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.pipeline-widget--page4-careers .p4-pipeline__label {
  display: block;
  font-family: var(--font-sub);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: var(--page-text, inherit);
  opacity: 0.95;
}

.pipeline-widget--page4-careers .p4-pipeline-node {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.25rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.35);
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.pipeline-widget--page4-careers .p4-pipeline-node[aria-pressed='true'] {
  border-color: var(--page-highlight, var(--journey-secondary, #fff));
  background: rgba(255, 255, 255, 0.18);
}

.pipeline-widget--page4-careers .p4-pipeline__dot {
  display: block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.95;
}

.pipeline-widget--page4-careers .p4-pipeline__loading,
.pipeline-widget--page4-careers .p4-pipeline__error {
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.9;
}

#page-4-pipeline-widget.p4-pipeline-shell {
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: var(--space-2);
}

#page-4-pipeline-widget .p2-timeline-shell__mid {
  margin: 0;
}

.landscape-page[data-pillar='journey'] .landscape-page__half.right #page-4-pipeline-widget .p2-timeline-shell__cell {
  background: color-mix(in srgb, var(--page-text) 7%, transparent);
}

.landscape-page[data-pillar='journey'] .landscape-page__half.right #page-4-pipeline-widget .p2-timeline-shell__cell-label {
  color: var(--page-text);
}

/* Engagement Osmosis — rings + corners (Page 4 left; data: page-2-audiences.json) */
.p2-osmosis-intro {
  font-size: 0.92rem;
  line-height: 1.45;
  margin: 0 0 var(--space-2);
  opacity: 0.95;
}

.p2-osmosis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    'otl otr'
    'diag diag'
    'obl obr';
  gap: var(--space-2);
  margin-top: var(--space-2);
  width: 100%;
  min-width: 0;
}

.p2-osmosis__corner--tl {
  grid-area: otl;
}

.p2-osmosis__corner--tr {
  grid-area: otr;
}

.p2-osmosis__corner {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 0;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.12);
  font-size: 0.9rem;
}

.p2-osmosis__corner--bl {
  grid-area: obl;
}

.p2-osmosis__corner--br {
  grid-area: obr;
}

.p2-osmosis__corner--tl,
.p2-osmosis__corner--bl {
  align-items: flex-start;
  text-align: left;
}

.p2-osmosis__corner--tr,
.p2-osmosis__corner--br {
  align-items: flex-end;
  text-align: right;
}

.p2-osmosis__corner--tr .p2-osmosis__cell-label,
.p2-osmosis__corner--br .p2-osmosis__cell-label {
  text-align: right;
  width: 100%;
}

.p2-osmosis__diagram {
  grid-area: diag;
  width: 100%;
  min-width: 0;
  overflow-x: visible;
  overflow-y: auto;
  max-height: min(56vh, 26rem);
  padding: var(--space-2) clamp(0.75rem, 4vw, 2.25rem) var(--space-2) 0;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem 0.75rem;
}

.p2-osmosis__selection {
  flex: 1 1 10ch;
  min-width: 8ch;
  max-width: min(34%, 11rem);
  margin: 0;
  padding: 0.25rem 0.35rem 0 0;
  align-self: center;
  font-family: var(--font-display, var(--font-sub));
  font-size: clamp(1.05rem, 3.2vw, 1.65rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.98);
  text-wrap: balance;
}

.p2-osmosis__stack-wrap {
  display: flex;
  flex: 4 1 16rem;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.35rem 0.65rem;
  min-width: 0;
  width: 100%;
  overflow: visible;
  padding: 0 0.35rem 0 0;
}

.p2-osmosis__stack {
  position: relative;
  width: min(16rem, 72vw);
  min-width: 12.5rem;
  aspect-ratio: 1;
  margin-left: 0;
  margin-right: auto;
  flex-shrink: 0;
  overflow: visible;
}

.p2-osmosis-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  aspect-ratio: 1;
  border-radius: 50%;
  box-sizing: border-box;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.42);
  background: transparent;
  cursor: pointer;
  padding: 0;
  margin: 0;
  z-index: 1;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.p2-osmosis-ring--r6 {
  width: 100%;
  border-width: clamp(11px, 3.2vw, 17px);
  z-index: 1;
}

.p2-osmosis-ring--r5 {
  width: 86%;
  border-width: clamp(10px, 3vw, 16px);
  z-index: 2;
}

.p2-osmosis-ring--r4 {
  width: 72%;
  border-width: clamp(10px, 2.85vw, 15px);
  z-index: 3;
}

.p2-osmosis-ring--r3 {
  width: 58%;
  border-width: clamp(9px, 2.65vw, 14px);
  z-index: 4;
}

.p2-osmosis-ring--r2 {
  width: 44%;
  border-width: clamp(9px, 2.45vw, 13px);
  z-index: 5;
}

.p2-osmosis-ring--r1 {
  width: 30%;
  min-width: 2.65rem;
  min-height: 2.65rem;
  border-width: clamp(8px, 2.2vw, 12px);
  z-index: 6;
}

.p2-osmosis-ring[aria-pressed='true'] {
  border-color: var(--page-highlight, var(--story-highlight));
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.p2-osmosis-ring:focus-visible {
  outline: 2px solid var(--page-highlight, var(--story-highlight));
  outline-offset: 3px;
}

.p2-osmosis__hub {
  display: none;
}

/*
 * Osmosis guide: SVG viewBox 0–100 matches the square .p2-osmosis__stack (centre 50,50).
 * Each leader: polar attach → diagonal to knee (xk, y_label) → horizontal tail into label column.
 * Label Ys are evenly spaced (inner→outer top→bottom) with generous vertical span.
 * If ring % widths change, recompute (see pages/part-page-02.php comment) or switch to JS layout.
 */
.p2-osmosis__guide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 8;
  pointer-events: none;
  display: block;
}

.p2-osmosis__guide-line {
  fill: none;
  stroke: rgba(0, 0, 0, 0.88);
  stroke-width: 0.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.p2-osmosis__guide-legend {
  position: relative;
  z-index: 9;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 0 0 min(11.5rem, 38%);
  min-width: 7.5rem;
  min-height: 100%;
  padding: calc(0.15rem + 10px) 0 0.15rem 0.2rem;
  gap: 0;
  pointer-events: auto;
}

.p2-osmosis-guide-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  margin: 0;
  padding: 0.12rem 0.2rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--page-highlight, var(--journey-highlight));
  font-family: var(--font-sub, system-ui, sans-serif);
  font-size: 0.91rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer;
}

.p2-osmosis-guide-btn:hover {
  color: color-mix(in srgb, var(--page-highlight, var(--journey-highlight)) 72%, #fff 28%);
  background: rgba(255, 255, 255, 0.06);
}

.p2-osmosis-guide-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.p2-osmosis-guide-btn[aria-pressed='true'] {
  color: #fff;
}

.p2-osmosis-guide-btn__label {
  flex: 1 1 auto;
  min-width: 0;
}

.p2-osmosis-guide-btn__glove {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  color: var(--page-highlight, var(--journey-highlight));
}

.p2-osmosis-guide-btn[aria-pressed='true'] .p2-osmosis-guide-btn__glove {
  display: inline-flex;
  color: #fff;
}

/* Left-axis overlay: black arrows on the ring stack (centre ↔ left edge) */
.p2-osmosis__axis-overlay {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  overflow: visible;
}

.p2-osmosis__axis-title {
  flex: 0 0 2.1rem;
  width: 2.1rem;
  margin: 0;
  align-self: center;
  transform: translateX(-20px);
  font-family: var(--font-sub);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.03em;
  text-align: center;
  text-wrap: balance;
  color: var(--page-highlight, var(--journey-highlight));
}

.p2-osmosis__axis-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.p2-osmosis__axis-line {
  fill: none;
  stroke: rgba(0, 0, 0, 0.88);
  stroke-width: 0.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.p2-osmosis__axis-caption {
  fill: rgba(0, 0, 0, 0.88);
  font-family: var(--font-sub, system-ui, sans-serif);
  font-size: 3.15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transform: translateX(10px);
}

.p2-osmosis__cell-label {
  font-family: var(--font-sub);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}

.p2-osmosis__cell-body {
  flex: 1 1 auto;
  min-height: 3.25rem;
  width: 100%;
  display: flow-root;
  position: relative;
  font-size: 0.88rem;
  line-height: 1.42;
  hyphens: auto;
  overflow-wrap: break-word;
}

.p2-osmosis__wedge-line {
  display: block;
  box-sizing: border-box;
  margin: 0 0 0.28em;
  text-align: inherit;
}

.p2-osmosis__corner--tl .p2-osmosis__wedge-line,
.p2-osmosis__corner--bl .p2-osmosis__wedge-line {
  max-width: calc(100% - (var(--wedge-i, 0) * 6%));
}

.p2-osmosis__corner--tr .p2-osmosis__wedge-line,
.p2-osmosis__corner--br .p2-osmosis__wedge-line {
  margin-left: auto;
  max-width: calc(100% - (var(--wedge-i, 0) * 6%));
}

.p2-osmosis__corner--tl .p2-osmosis__cell-body::before {
  content: '';
  float: right;
  width: 38%;
  height: min(7.5rem, 42vw);
  shape-outside: ellipse(72% 100% at 100% 100%);
  shape-margin: 0.35rem;
}

.p2-osmosis__corner--tr .p2-osmosis__cell-body::before {
  content: '';
  float: left;
  width: 38%;
  height: min(7.5rem, 42vw);
  shape-outside: ellipse(72% 100% at 0% 100%);
  shape-margin: 0.35rem;
}

.p2-osmosis__corner--bl .p2-osmosis__cell-body::before {
  content: '';
  float: right;
  width: 38%;
  height: min(7.5rem, 42vw);
  shape-outside: ellipse(72% 100% at 100% 0%);
  shape-margin: 0.35rem;
}

.p2-osmosis__corner--br .p2-osmosis__cell-body::before {
  content: '';
  float: left;
  width: 38%;
  height: min(7.5rem, 42vw);
  shape-outside: ellipse(72% 100% at 0% 0%);
  shape-margin: 0.35rem;
}

/* Osmosis — tighter diagram + cells (Page 4 left, standalone section) */
#page-4 .landscape-page__half.left .p2-osmosis__stack {
  width: min(13rem, 100%);
  min-width: 10.5rem;
  overflow: visible;
}

#page-4 .landscape-page__half.left .p2-osmosis__stack-wrap {
  flex-wrap: nowrap;
  flex: 1 1 12rem;
  min-width: 0;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  justify-content: center;
  align-items: stretch;
  gap: 0.35rem 0.5rem;
  padding-left: 0;
}

#page-4 .landscape-page__half.left .p2-osmosis__diagram {
  max-height: min(44vh, 22rem);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-right: clamp(0.5rem, 3vw, 1.25rem);
  padding-left: clamp(0.5rem, 3vw, 1.25rem);
}

#page-4 .landscape-page__half.left .p2-osmosis__selection {
  display: none;
}

#page-4 .landscape-page__half.left .p2-osmosis__guide-legend {
  flex: 0 0 min(10.5rem, 36%);
  min-width: 7rem;
  padding-top: calc(0.1rem + 10px);
  padding-bottom: 0.1rem;
  transform: translateX(30px);
}

#page-4 .landscape-page__half.left .p2-osmosis-guide-btn {
  font-size: 0.86rem;
}

#page-4 .landscape-page__half.left .p2-osmosis__axis-title {
  flex: 0 0 1.85rem;
  width: 1.85rem;
  margin-right: 1.15rem;
  font-size: 0.68rem;
}

#page-4 .landscape-page__half.left .p2-osmosis__stack {
  margin-left: 0;
  margin-right: 0;
}

#page-4 .landscape-page__half.left .p2-osmosis__cell-body {
  min-height: 2.35rem;
  font-size: 0.82rem;
}

.pipeline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.pipeline-node {
  font: inherit;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.15);
  color: inherit;
  cursor: pointer;
}

.pipeline-node[aria-pressed='true'] {
  background: rgba(255, 255, 255, 0.22);
  border-color: var(--page-highlight, #fff);
}

#page-2-timeline-widget .pipeline-node.p2-timeline-node {
  border-radius: 50%;
  padding: 0.15rem;
}

#page-2-timeline-widget .pipeline-node.p2-timeline-node[aria-pressed='true'] {
  background: rgba(255, 255, 255, 0.22);
  border-color: var(--page-highlight, var(--story-highlight));
}

.pipeline-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.pipeline-grid > div {
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.12);
  font-size: 0.9rem;
  min-height: 4rem;
}

/* Contents grid Page 1 — six-chapter deck (Intro + 5); single inline row of thumbnails */
.contents-hint {
  font-size: 0.9rem;
  opacity: 0.9;
  margin: 0 0 var(--space-2);
}

.contents-grid {
  --contents-thumb-w: 3.55rem;
  --contents-thumb-gap: var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--contents-thumb-gap);
}

.contents-grid--six {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: calc(6 * var(--contents-thumb-w) + 5 * var(--contents-thumb-gap));
}

/* Page 1 Contents — mobile-only half-panels (1A–6B); desktop stays six full chapters */
#page-1 .contents-thumb--half {
  display: none !important;
}

@media (max-width: 768px) {
  /* Half-page thumbs: A4 portrait frame; left/right 50% of landscape chapter preview */
  .chrome-thumb__preview--half {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 210 / 297;
    overflow: hidden;
    border-radius: 4px;
  }

  .chrome-thumb__preview--half .chrome-thumb__img {
    position: absolute;
    top: 0;
    width: 200%;
    height: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
    object-fit: cover;
  }

  .chrome-thumb__preview--half-left .chrome-thumb__img {
    left: 0;
    right: auto;
    object-position: left center;
  }

  .chrome-thumb__preview--half-right .chrome-thumb__img {
    left: auto;
    right: 0;
    object-position: right center;
  }

  #page-1 .contents-grid--six {
    --contents-thumb-w: 3.35rem;
    max-width: min(100%, calc(6 * var(--contents-thumb-w) + 5 * var(--contents-thumb-gap)));
    row-gap: var(--space-2);
  }

  #page-1 .contents-thumb--chapter {
    display: none !important;
  }

  #page-1 .contents-thumb--half {
    display: flex !important;
  }

  #page-1 .contents-thumb--half .chrome-thumb__preview--half {
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.14);
  }

  #page-1 .contents-thumb--half .chrome-thumb__preview--half .chrome-thumb__img {
    border: none;
    box-shadow: none;
  }

  #page-1 .contents-hub__thumbs {
    min-height: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
  }

  #page-1 .contents-grid--six {
    flex-wrap: nowrap;
    justify-content: flex-start;
    max-width: none;
    width: max-content;
    padding-bottom: var(--space-1);
  }
}

/* Fixed-height band — centres thumbs without flex-growing the right column */
#page-1 .contents-hub__thumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 4.25rem;
  margin: var(--space-1) 0 var(--space-2);
}

.contents-grid__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--contents-thumb-gap);
  width: 100%;
}

@media (min-width: 640px) {
  .contents-grid__row {
    width: calc(4 * var(--contents-thumb-w) + 3 * var(--contents-thumb-gap));
    max-width: 100%;
  }
}

.contents-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.2rem;
  width: var(--contents-thumb-w);
  padding: 0.12rem 0.08rem 0.28rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  background: transparent;
  color: #0a1628;
  font: inherit;
  font-size: 0.62rem;
  font-weight: 600;
  cursor: pointer;
}

.contents-thumb .chrome-thumb__sheet,
.contents-thumb .chrome-thumb__img {
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.14);
}

.contents-thumb .chrome-thumb__num {
  color: #0a1628;
  opacity: 1;
}

/* Selection = sheet ring + choose glove only — no outer button frame */
.contents-thumb[aria-selected='true'] {
  border-color: transparent;
  background: transparent;
}

#page-1 .p1-contents .contents-thumb,
#page-1 .p1-contents .contents-thumb[aria-selected='true'] {
  border-color: transparent;
  background: transparent;
}

#page-1 .p1-contents .contents-thumb .chrome-thumb__num,
#page-1 .p1-contents .contents-thumb[aria-selected='true'] .chrome-thumb__num {
  color: #0a1628;
  opacity: 1;
}

.contents-thumb:focus-visible {
  outline: 2px solid var(--neutral-highlight);
  outline-offset: 2px;
}

.contents-thumb .contents-choose-glove {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  margin-top: 0.15rem;
  line-height: 0;
}

.contents-thumb[aria-selected='true'] .contents-choose-glove {
  display: inline-flex;
}

.contents-blurb {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.35);
  color: #0d1a18;
  min-height: 4rem;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

#page-1 .p1-interaction-examples__qseg--qq {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.2rem 0.35rem;
  margin-left: auto;
  text-align: right;
}

#page-1 .p1-interaction-examples__qq-lead,
#page-1 .p1-interaction-examples__qq-tail {
  font-weight: 700;
  color: var(--page-text, var(--neutral-text));
  flex: 0 0 auto;
}

/* Words right-aligned to a shared peek-icon column (not staggered per word width) */
#page-1 .p1-qq-peek-stack {
  display: inline-grid;
  grid-template-columns: max-content 2.35rem;
  column-gap: 0.12rem;
  row-gap: 0.28rem;
  align-items: center;
  flex: 0 0 auto;
}

#page-1 .p1-qq-peek-stack__row {
  display: contents;
}

#page-1 .p1-qq-peek-stack__word {
  justify-self: end;
  text-align: right;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.2;
  color: var(--page-text, var(--neutral-text));
}

#page-1 .p1-qq-peek-stack__row .peek-btn--icon-only {
  justify-self: center;
}

/* Page 3 — separate rows (safeguarding) */
.swo-row,
.forgotten-row,
.collab-row {
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.forgotten-row {
  margin-top: var(--space-4);
}

/* Page 3 — LEFT structured blocks (P3-A) */
.p3-left-block {
  margin-bottom: var(--space-4);
}

.p3-left-block:last-of-type {
  margin-bottom: 0;
}

.p3-left-block [data-placeholder='true'] {
  opacity: 0.88;
  font-style: italic;
}

/* Page 3 — Awards & Prizes: lede + 3-column laurel accolades */
#page-3 .p3-awards-lede {
  margin: 0 auto var(--space-3);
  max-width: 38rem;
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: center;
}

#page-3 .p3-accolades-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3) var(--space-2);
  margin: 0;
  padding: 0;
}

@media (max-width: 640px) {
  #page-3 .p3-accolades-grid {
    grid-template-columns: 1fr;
  }
}

#page-3 .p3-accolade {
  min-width: 0;
  text-align: center;
}

#page-3 .p3-accolade__crest {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.65rem;
  min-height: 4.65rem;
  padding: 0.35rem 0.25rem 0;
  margin-bottom: -20px;
}

#page-3 .p3-accolade__wreath {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 11.5rem);
  height: 3.1rem;
  object-fit: contain;
  object-position: center top;
  pointer-events: none;
  opacity: 0.85;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* Laurel PNG is pre-tinted white (see ./assets/img/decor/laurel-white.png). */
#page-3 .p3-accolade__project {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.06rem;
  margin: 0;
  padding: 0 0.35rem;
  transform: translateY(-10px);
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: clamp(0.72rem, 2.1vw, 0.84rem);
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Three-line stack at 90% size; fixed crest height + flex keep festival lines aligned across the row. */
#page-3 .p3-accolade--johnny-barnes .p3-accolade__project {
  font-size: clamp(0.648rem, 1.89vw, 0.756rem);
}

#page-3 .p3-accolade__project-line {
  display: block;
}

#page-3 .p3-accolade__year {
  display: block;
  font-size: 0.92em;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.95;
}

#page-3 .p3-accolade__prize {
  margin: 0.05rem 0 0;
  font-size: 0.68rem;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0.92;
}

/* Page 3 left — Press era pills (inline row, dark crimson ramp + peek); popovers echo legacy .aecentred */
#page-3 .landscape-page__half.left .p3-press-row {
  margin-top: 0;
  margin-bottom: var(--space-4);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.22);
}

#page-3 .landscape-page__half.left .p3-press-row__source {
  margin: 0 0 var(--space-2);
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: center;
  color: rgba(255, 247, 248, 0.9);
  opacity: 0.96;
}

#page-3 .landscape-page__half.left .p3-press-row__code,
#page-3 .landscape-page__half.left .p3-press-row__mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 0.88em;
  word-break: break-all;
  color: rgba(255, 230, 233, 0.95);
}

#page-3 .p3-press-era-pills {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
  width: 100%;
  margin: 0;
  padding: 0;
  align-items: stretch;
}

@media (max-width: 900px) {
  #page-3 .p3-press-era-pills {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  #page-3 .p3-press-era-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#page-3 .p3-press-era-pills__item {
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
}

#page-3 .p3-press-era-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.85rem;
  gap: 0.18rem;
  margin: 0;
  padding: 0.28rem 0.2rem 0.32rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 2px 10px rgba(0, 0, 0, 0.22);
  font-family: var(--font-sub);
  font-size: clamp(0.62rem, 1.05vw, 0.74rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #fdecef;
  text-align: center;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    filter 0.12s ease;
}

#page-3 .p3-press-era-pill:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

#page-3 .p3-press-era-pill:active:not(:disabled) {
  transform: translateY(0);
}

#page-3 .p3-press-era-pill--1 {
  background: linear-gradient(155deg, #1a1214 0%, hsl(352 26% 28%) 48%, hsl(350 32% 34%) 100%);
  color: #ffeef0;
}

#page-3 .p3-press-era-pill--2 {
  background: linear-gradient(155deg, #181011 0%, hsl(357 34% 30%) 45%, hsl(358 42% 36%) 100%);
  color: #ffeaec;
}

#page-3 .p3-press-era-pill--3 {
  background: linear-gradient(155deg, #160e10 0%, hsl(0 44% 30%) 42%, hsl(1 52% 38%) 100%);
  color: #ffe8ea;
}

#page-3 .p3-press-era-pill--4 {
  background: linear-gradient(155deg, #140c0e 0%, hsl(2 50% 26%) 40%, hsl(3 58% 34%) 100%);
  color: #ffe4e6;
}

#page-3 .p3-press-era-pill--5 {
  background: linear-gradient(155deg, #12090c 0%, hsl(358 56% 24%) 38%, hsl(0 68% 32%) 100%);
  color: #ffe0e3;
}

#page-3 .p3-press-era-pill:disabled {
  cursor: not-allowed;
  opacity: 0.52;
  filter: saturate(0.72) brightness(0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#page-3 .p3-press-era-pill:disabled:hover {
  transform: none;
  filter: saturate(0.72) brightness(0.92);
}

#page-3 .p3-press-era-pill__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  gap: 0.04rem;
  line-height: 1.12;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

#page-3 .p3-press-era-pill__title {
  font-size: 0.92em;
  text-transform: none;
}

#page-3 .p3-press-era-pill__dates {
  font-size: 0.78em;
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.9;
}

#page-3 .p3-press-era-pill__dates--muted {
  letter-spacing: 0.12em;
  opacity: 0.55;
}

#page-3 .p3-press-era-pill__eye {
  display: block;
  flex-shrink: 0;
  width: 1.02rem;
  height: 1.02rem;
  margin-top: 0.06rem;
  opacity: 0.92;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}

[popover].peek-popover.press-era-popover {
  width: min(92vw, 32rem);
  max-width: min(92vw, 32rem);
  max-height: min(82vh, 44rem);
  overflow: auto;
  border: 1px solid color-mix(in srgb, #c9a227 28%, rgba(40, 12, 16, 0.9));
  background:
    linear-gradient(168deg, #0f0406 0%, #1a080b 38%, #241014 72%, #2c1216 100%);
  background-color: #120507;
  color: #c9a87a;
  box-shadow:
    0 14px 44px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(232, 197, 71, 0.07);
}

.press-era-popover .reach-popover__heading {
  margin: 0 0 var(--space-2);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(201, 162, 39, 0.3);
  font-family: var(--font-sub);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  color: #e8c547;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

[popover].peek-popover.press-era-popover a:any-link {
  color: #e6bc5c;
  text-decoration-color: color-mix(in srgb, #e6bc5c 55%, transparent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
}

[popover].peek-popover.press-era-popover a:hover {
  color: #f5e6b8;
  text-decoration-color: color-mix(in srgb, #f5e6b8 70%, transparent);
}

[popover].peek-popover.press-era-popover a:focus-visible {
  outline: 2px solid #e8c547;
  outline-offset: 2px;
  border-radius: 2px;
}

.press-era-popover__hr {
  margin: var(--space-2) 0;
  border: none;
  border-top: 1px solid rgba(201, 162, 39, 0.22);
}

.press-era-popover__aecentred {
  margin: 0 0 0.85rem;
  font-size: 0.86rem;
  line-height: 1.55;
  text-align: center;
  color: #c4a574;
}

.press-era-popover__aecentred:last-child {
  margin-bottom: 0;
}

.press-era-popover__aecentred b {
  color: #ddb76a;
  font-weight: 700;
}

.press-era-popover__aecentred i {
  color: color-mix(in srgb, #c9a87a 82%, #8b6914 18%);
}

.press-era-popover__aecentred u {
  text-decoration-color: rgba(232, 197, 71, 0.45);
}

.press-era-popover__lead.press-era-popover__aecentred {
  margin-bottom: var(--space-2);
  font-weight: 700;
  font-size: 0.92rem;
  color: #dcb86c;
  letter-spacing: 0.02em;
}

.press-era-popover__links {
  font-size: 0.82rem;
  line-height: 1.65;
  color: #b89b6e;
}

.press-era-popover__links b {
  color: #e0b85a;
  font-weight: 700;
}

/* Page 4 — P4-A structured copy blocks */
#page-4 .p4-block {
  margin-bottom: var(--space-4);
}

#page-4 .p4-dl {
  margin: 0;
}

#page-4 .p4-dl dt {
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 0.92rem;
  margin-top: var(--space-2);
  color: var(--page-highlight, inherit);
}

#page-4 .p4-dl dt:first-of-type {
  margin-top: 0;
}

#page-4 .p4-dl dd {
  margin: 0.2rem 0 0;
  padding: 0;
  font-size: 0.95rem;
  line-height: 1.45;
}

#page-4 [data-placeholder='true'] {
  opacity: 0.88;
  font-style: italic;
}

#page-4 .p4-placeholder-list {
  margin: var(--space-3) 0 0;
  padding-left: 1.25rem;
}

#page-4 .p4-peek-line {
  margin: var(--space-3) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

#page-4 .p4-peek-line__label {
  font-size: 0.95rem;
}

/* Page 4 — Film writing residencies: Values-style inline [change] + film school peeks */
#page-4 .p4-film-residency__intro {
  margin: 0 0 var(--space-3);
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 52ch;
}

#page-4 .landscape-page__half.right .p4-film-residency {
  margin-top: var(--space-4);
}

#page-4 .p4-film-inline {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
  margin-bottom: var(--space-2);
}

#page-4 .p4-film-inline__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  flex: 1 1 5.25rem;
  min-width: 4.5rem;
  max-width: 8rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  line-height: 1.15;
}

#page-4 .p4-film-inline__btn[aria-pressed='true'] .p4-film-inline__label {
  color: var(--page-highlight, var(--journey-highlight));
}

#page-4 .p4-film-inline__btn:focus-visible {
  outline: 2px solid var(--page-highlight, var(--journey-highlight));
  outline-offset: 2px;
}

#page-4 .p4-film-inline__btn .p2-inline-selected-glove {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  color: var(--page-highlight, var(--journey-highlight));
}

#page-4 .p4-film-inline__btn[aria-pressed='true'] .p2-inline-selected-glove {
  display: inline-flex;
}

#page-4 .p4-film-inline__thumb {
  width: calc(2.65rem * 1.5);
  height: calc(2.65rem * 1.5);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background-color: rgba(255, 255, 255, 0.2);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

#page-4 .p4-film-inline__btn[aria-pressed='true'] .p4-film-inline__thumb {
  border-color: color-mix(in srgb, var(--page-highlight, var(--journey-highlight)) 72%, #ffffff 28%);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--page-highlight, var(--journey-highlight)) 42%, transparent),
    0 0 1rem color-mix(in srgb, var(--page-highlight, var(--journey-highlight)) 25%, transparent),
    inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

#page-4 .p4-film-inline__thumb--school {
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.22) 100%),
    url('../img/page-2/pillars-ethos/home_arm_story.jpg');
}

#page-4 .p4-film-inline__thumb--collab {
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.22) 100%),
    url('../img/page-2/pillars-ethos/home_arm_journey.jpg');
}

#page-4 .p4-film-inline__thumb--ip {
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.22) 100%),
    url('../img/page-2/pillars-ethos/home_arm_voices.jpg');
}

#page-4 .p4-film-inline__label {
  font-family: var(--font-sub);
  font-weight: 600;
  letter-spacing: 0.02em;
}

#page-4 .p4-film-def {
  margin: 0;
  padding: var(--space-2) 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  min-height: 2rem;
}

#page-4 .p4-film-def p {
  margin: 0 0 var(--space-2);
}

#page-4 .p4-film-def > :last-child {
  margin-bottom: 0;
}

#page-4 .p4-film-collab__list {
  margin: 0 0 var(--space-2);
  padding-left: 1.15rem;
  line-height: 1.45;
}

#page-4 .p4-film-collab__list li {
  margin: 0.3em 0;
}

#page-4 .p4-film-collab__list li:first-child {
  margin-top: 0;
}

#page-4 .p4-film-collab__list li:last-child {
  margin-bottom: 0;
}

#page-4 .p4-film-school__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  padding: 0;
}

#page-4 .p4-film-school__thumb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

#page-4 .p4-film-school__thumb-label {
  display: block;
  max-width: 8.5rem;
  margin: 0.1rem auto 0;
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

#page-4 .p4-film-school__thumb-hit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4.25rem;
  flex-shrink: 0;
  vertical-align: top;
}

#page-4 .p4-film-school__thumb-still {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.2);
}

#page-4 .p4-film-school__peek-btn.peek-btn--icon-only {
  position: relative;
  z-index: 1;
  margin: 0;
  flex-shrink: 0;
  opacity: 1;
  background: color-mix(in srgb, rgba(8, 12, 14, 0.82) 55%, var(--page-highlight, var(--journey-highlight)) 45%);
  color: #fff;
  box-shadow:
    0 0 0 1px color-mix(in srgb, #fff 55%, transparent),
    0 2px 10px rgba(0, 0, 0, 0.35);
}

#page-4 .p4-film-school__peek-btn.peek-btn--icon-only:hover {
  opacity: 1;
  background: color-mix(in srgb, rgba(8, 12, 14, 0.72) 42%, var(--page-highlight, var(--journey-highlight)) 58%);
}

#page-4 .p4-film-school__peek-btn.peek-btn--icon-only .peek-btn__eye {
  opacity: 1;
  color: var(--page-highlight, var(--journey-highlight));
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.65));
}

#page-4 .p4-film-ip__intro {
  margin: 0 0 var(--space-2);
}

#page-4 .p4-film-ip__legal-panel-wrap {
  margin: var(--space-2) auto 0;
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 52ch;
}

#page-4 .p4-film-ip__legal-panel {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: min(100%, 26rem);
  margin: 0;
  padding: 0.55rem 0.65rem;
  gap: 0.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--page-text) 32%, transparent);
  background: color-mix(in srgb, var(--page-text) 10%, transparent);
  color: var(--page-text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-sizing: border-box;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

#page-4 .p4-film-ip__legal-panel:hover {
  background: color-mix(in srgb, var(--page-text) 14%, transparent);
  border-color: color-mix(in srgb, var(--page-highlight, var(--journey-highlight)) 45%, transparent);
}

#page-4 .p4-film-ip__legal-panel:focus-visible {
  outline: 2px solid var(--page-highlight, var(--journey-highlight));
  outline-offset: 3px;
}

#page-4 .p4-film-ip__legal-panel-spacer {
  flex: 0 0 2.35rem;
  width: 2.35rem;
  height: 1px;
  flex-shrink: 0;
}

#page-4 .p4-film-ip__legal-panel-label {
  flex: 1;
  text-align: center;
  line-height: 1.25;
}

#page-4 .p4-film-ip__legal-panel-expand {
  flex: 0 0 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--page-highlight, var(--journey-highlight));
}

#page-4 .p4-film-ip__legal-panel-expand svg {
  display: block;
  width: 1.45rem;
  height: 1.45rem;
  flex-shrink: 0;
}

[popover].peek-popover.peek-popover--film-still {
  width: min(92vw, 30rem);
  max-width: min(92vw, 30rem);
  padding: var(--space-2);
}

.peek-popover__film-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

[popover].open-popover.p4-legal-process-popover {
  width: min(92vw, 26rem);
  max-width: min(92vw, 26rem);
  max-height: min(92vh, 880px);
  overflow: auto;
  background: #0f1c1a;
  color: #e8fffc;
  border: none;
  box-shadow: var(--shadow-pop);
}

[popover].open-popover.p4-legal-process-popover::backdrop {
  background: transparent;
}

.p4-legal-process-popover__body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.p4-legal-process-popover__img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: min(82vh, 52rem);
  object-fit: contain;
}

@media (max-width: 768px) {
  [popover].open-popover.p4-legal-process-popover {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(92vw, 22rem);
    max-width: min(92vw, 22rem);
    max-height: 100vh;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    animation: open-popover-drawer-in 0.24s ease-out;
  }

  .p4-legal-process-popover__img {
    max-height: min(88vh, 52rem);
  }
}

#page-4 .p4-careers {
  min-width: 0;
}

#page-4 .p4-careers__lede {
  margin: 0 0 var(--space-3);
  font-size: 0.92rem;
  line-height: 1.45;
  opacity: 0.92;
}

#page-4 .p4-careers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
  gap: var(--space-3);
  min-width: 0;
}

#page-4 .p4-careers__slot {
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.1);
}

#page-4 .p4-careers__slot-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
}

#page-4 .p4-careers__label {
  margin: 0;
  flex: 1 1 8rem;
  min-width: 0;
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1.3;
  color: var(--page-highlight, inherit);
}

#page-4 .p4-careers__value {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

#page-4 .p4-careers__spark {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 3.25rem;
  margin-top: var(--space-2);
}

#page-4 .p4-careers__spark-bar {
  flex: 1 1 0;
  min-width: 0;
  min-height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.38);
  display: block;
}

#page-4 .p4-careers__note {
  margin: var(--space-2) 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  opacity: 0.88;
}

#page-4 .p4-careers__err {
  margin: var(--space-2) 0 0;
  font-size: 0.85rem;
  color: inherit;
}

#page-4 .p4-stat {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

#page-4 .p4-residency-footnotes {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.08);
  font-size: 0.82rem;
  line-height: 1.45;
}

#page-4 .p4-residency-footnotes__title {
  margin: 0 0 0.35rem;
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 0.85rem;
}

#page-4 .p4-residency-footnotes__list {
  margin: 0;
  padding-left: 1.15rem;
}

#page-4 .p4-film-course__carousel-title {
  margin: var(--space-4) 0 var(--space-2);
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 1rem;
  color: var(--page-highlight, inherit);
}

/* Page 4 Journey pillar — carousel controls readable on teal */
#page-4[data-pillar='journey'] .p3-carousel__btn {
  background: rgba(255, 255, 255, 0.94);
  color: #063534;
  border-color: rgba(6, 53, 52, 0.32);
}

#page-4[data-pillar='journey'] .p3-carousel__btn:hover:not(:disabled) {
  background: #ffffff;
}

#page-4[data-pillar='journey'] .p3-carousel__btn:disabled {
  color: rgba(6, 53, 52, 0.4);
  background: rgba(255, 255, 255, 0.55);
}

#page-4[data-pillar='journey'] .p3-carousel__btn:focus-visible {
  outline: 3px solid #003330;
  outline-offset: 2px;
}

#peek-legal {
  max-width: min(100vw - 2rem, 28rem);
  padding: var(--space-3);
}

.peek-legal__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  word-spacing: 0.16em;
}

.peek-legal__intro {
  margin: 0 0 var(--space-2);
  font-size: 0.92rem;
  line-height: 1.45;
}

.peek-legal__list {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.9rem;
  line-height: 1.45;
}

.peek-legal__list li + li {
  margin-top: var(--space-2);
}

.peek-legal__footer {
  margin: var(--space-3) 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  opacity: 0.9;
}

#page-4 .p4-rf-grid,
#page-5 .p4-rf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

#page-4 .p4-rf-card,
#page-5 .p4-rf-card {
  min-width: 0;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.1);
}

#page-4 .p4-rf-card__title,
#page-5 .p4-rf-card__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--page-highlight, inherit);
}

#page-4 .p4-rf-card__body,
#page-5 .p4-rf-card__body {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
}

#page-5 .landscape-page__half.right > section[aria-labelledby='p4-rf-metrics-title'] {
  margin-bottom: var(--space-3);
}

#peek-roots-materials {
  max-width: min(100vw - 2rem, 28rem);
  padding: var(--space-3);
}

.peek-roots__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  word-spacing: 0.16em;
}

.peek-roots__intro {
  margin: 0 0 var(--space-2);
  font-size: 0.92rem;
  line-height: 1.45;
}

.peek-roots__list {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.9rem;
  line-height: 1.45;
}

.peek-roots__list li + li {
  margin-top: var(--space-2);
}

.peek-roots__context {
  margin: var(--space-3) 0 0;
  font-size: 0.8rem;
  line-height: 1.4;
  opacity: 0.9;
  font-style: italic;
}

.peek-roots__footer {
  margin: var(--space-2) 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  opacity: 0.9;
}

/*
 * Page 3 RIGHT — Creative previews (P3): three-column grids from `data/page-3-slides.json`;
 * thumbnail link + optional `.p3-preview-open-btn` (`[open]` → `#dialog-p3-youtube`, `popover="manual"`). Legacy `.p3-carousel__*` rules kept for reuse.
 */
#page-3 .p3-preview-grid {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3) var(--space-2);
  align-items: start;
  min-width: 0;
}

@media (max-width: 520px) {
  #page-3 .p3-preview-grid {
    grid-template-columns: 1fr;
  }
}

#page-3 .p3-preview-item--invalid {
  grid-column: 1 / -1;
  padding: var(--space-2);
  font-size: 0.85rem;
  opacity: 0.9;
  text-align: center;
}

#page-3 .p3-preview-thumb-hit {
  position: relative;
  width: 100%;
  min-width: 0;
}

#page-3 .p3-preview-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

#page-3 .p3-preview-thumb-link {
  position: absolute;
  inset: 0;
  display: block;
  text-decoration: none;
  color: inherit;
}

#page-3 .p3-preview-thumb-link:focus-visible {
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

#page-3 .p3-preview-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#page-3 .p3-preview-open-btn {
  position: absolute;
  right: 0.3rem;
  bottom: 0.3rem;
  z-index: 2;
  margin: 0;
  background: color-mix(in srgb, rgba(8, 12, 14, 0.82) 55%, var(--page-highlight, var(--story-highlight)) 45%);
  color: #fff;
  box-shadow:
    0 0 0 1px color-mix(in srgb, #fff 55%, transparent),
    0 2px 10px rgba(0, 0, 0, 0.35);
}

#page-3 .p3-preview-open-btn:hover {
  background: color-mix(in srgb, rgba(8, 12, 14, 0.72) 42%, var(--page-highlight, var(--story-highlight)) 58%);
}

#page-3 .p3-preview-item__meta {
  margin-top: 0.35rem;
  text-align: center;
  min-width: 0;
}

#page-3 .p3-preview-item__title {
  margin: 0;
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1.25;
  letter-spacing: 0.02em;
}

#page-3 .p3-preview-item__caption {
  margin: 0.15rem 0 0;
  font-size: 0.7rem;
  line-height: 1.35;
  opacity: 0.88;
  font-style: italic;
}

/* Page 3 LEFT — Audience reactions: horizontal thumb + title (embed / gallery openers) */
#page-3 .p3-reactions-inline {
  margin: var(--space-2) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: stretch;
}

#page-3 .p3-reactions-card {
  flex: 1 1 min(100%, 11.5rem);
  min-width: 0;
}

#page-3 .p3-reactions-card__media-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

#page-3 .p3-reactions-card__thumb-wrap {
  position: relative;
  flex: 0 0 clamp(6.75rem, 32vw, 9.75rem);
  width: clamp(6.75rem, 32vw, 9.75rem);
  max-width: 42%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

#page-3 .p3-reactions-card__thumb-link {
  position: absolute;
  inset: 0;
  display: block;
  text-decoration: none;
  color: inherit;
}

#page-3 .p3-reactions-card__thumb-link:focus-visible {
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

#page-3 .p3-reactions-card__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#page-3 .p3-reactions-card__title {
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-align: left;
}

/* Page 3 — Collaborations photo gallery [open] (2×4 grid) */
[popover].open-popover.p3-gallery-open-popover {
  width: min(100vw - 1.5rem, 46rem);
  max-width: min(100vw - 1.5rem, 46rem);
  max-height: min(92vh, 52rem);
  border: none;
  background: var(--page-canvas-text, #fffef8);
  color: var(--page-canvas-bg, #1a1a1a);
  box-shadow: var(--shadow-pop);
}

[popover].open-popover.p3-gallery-open-popover::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.p3-gallery-dialog__title {
  margin: 0 0 var(--space-2);
  padding-right: 2.5rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: inherit;
}

.p3-gallery-dialog__body {
  min-width: 0;
  overflow: auto;
  max-height: min(78vh, 44rem);
}

.p3-gallery-dialog__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3);
  align-items: start;
}

.p3-gallery-dialog__figure {
  margin: 0;
  min-width: 0;
}

.p3-gallery-dialog__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--page-canvas-bg, #1a1a1a) 6%, transparent);
}

.p3-gallery-dialog__caption {
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  color: inherit;
}

#page-3 .p3-preview-thumb-open {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

#page-3 .p3-preview-thumb-open:focus-visible {
  outline: 2px solid var(--page-highlight, var(--story-highlight));
  outline-offset: 2px;
}

@media (max-width: 768px) {
  [popover].open-popover.p3-gallery-open-popover {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(100vw - 0.75rem, 46rem);
    min-width: 14rem;
    max-width: none;
    height: auto;
    max-height: 100dvh;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.45);
  }

  .p3-gallery-dialog__body {
    max-height: min(88dvh, 44rem);
  }

  .p3-gallery-dialog__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  [popover].open-popover.p3-gallery-open-popover:popover-open {
    animation: open-popover-drawer-in 0.24s ease-out;
  }
}

[popover].open-popover.p3-twitter-love-popover {
  width: min(100vw - 1.5rem, 22rem);
  max-width: min(100vw - 1.5rem, 22rem);
  max-height: min(92vh, 48rem);
  padding: 2.75rem 0 var(--space-2);
  border: none;
  background: #1da1f2;
  color: #fff;
  box-shadow: var(--shadow-pop);
}

[popover].open-popover.p3-twitter-love-popover::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.p3-twitter-love-popover__close {
  color: #fff;
}

.p3-twitter-love-popover__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.p3-twitter-love-dialog__stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.p3-twitter-love-dialog__stack img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  vertical-align: top;
}

@media (max-width: 768px) {
  [popover].open-popover.p3-twitter-love-popover {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(100vw - 0.75rem, 22rem);
    min-width: 14rem;
    max-width: none;
    height: auto;
    max-height: 100dvh;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.45);
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  [popover].open-popover.p3-twitter-love-popover:popover-open {
    animation: open-popover-drawer-in 0.24s ease-out;
  }
}

#page-3 .p3-preview-grid__loading,
#page-3 .p3-preview-grid__empty {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0;
  padding: var(--space-2);
  text-align: center;
}

#page-3 .p3-preview-grid__loading-text {
  font-size: 0.88rem;
  opacity: 0.88;
}

.p3-carousel {
  margin-top: var(--space-2);
  min-width: 0;
}

.p3-carousel__toolbar {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  margin-bottom: var(--space-2);
}

.p3-carousel__btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.2);
  color: inherit;
  font-family: var(--font-sub);
  font-size: clamp(0.8rem, 2.8vw, 0.95rem);
  font-weight: 600;
  cursor: pointer;
}

.p3-carousel__btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
}

.p3-carousel__btn:focus-visible {
  outline: 2px solid var(--page-highlight, var(--story-highlight));
  outline-offset: 2px;
}

.p3-carousel__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Page 3 — Story pillar: WCAG AA-friendly control chrome on #9c3538 */
#page-3[data-pillar='story'] .p3-carousel__btn {
  background: #fff7f1;
  color: #2a1214;
  border-color: rgba(42, 18, 20, 0.38);
}

#page-3[data-pillar='story'] .p3-carousel__btn:hover:not(:disabled) {
  background: #ffffff;
  color: #1a0a0c;
}

#page-3[data-pillar='story'] .p3-carousel__btn:disabled {
  color: rgba(42, 18, 20, 0.42);
  background: rgba(255, 247, 241, 0.55);
}

#page-3[data-pillar='story'] .p3-carousel__btn:focus-visible,
#page-3[data-pillar='story'] .p3-carousel__slide-hit:focus-visible,
#page-3[data-pillar='story'] .p3-preview-thumb-link:focus-visible,
#page-3[data-pillar='story'] .p3-preview-thumb-open:focus-visible,
#page-3[data-pillar='story'] .p3-preview-open-btn:focus-visible {
  outline: 3px solid #0b2238;
  outline-offset: 2px;
}

.p3-carousel__track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 0;
  min-height: 11rem;
  border-radius: var(--radius-sm);
  outline: none;
  -webkit-overflow-scrolling: touch;
}

.p3-carousel__loading,
.p3-carousel__err {
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: var(--space-3);
  text-align: center;
  font-size: 0.88rem;
  opacity: 0.92;
  align-self: center;
}

@media (prefers-reduced-motion: reduce) {
  .p3-carousel__track {
    scroll-behavior: auto;
  }
}

.p3-carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding-right: 0;
}

.p3-carousel__slide-card {
  min-height: 0;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: rgba(120, 120, 120, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.p3-carousel__slide-hit {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}

.p3-carousel__slide-hit:focus-visible {
  outline: 2px solid var(--page-highlight, var(--story-highlight));
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.p3-carousel__slide-hit--disabled {
  cursor: default;
  padding: var(--space-2);
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.85;
}

.p3-carousel__thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
}

/* Open / expand-in-place — same glyph as interaction lab #60 (corner brackets, heavy stroke) */
.p3-carousel__open-glyph {
  position: absolute;
  right: 0.35rem;
  bottom: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.05rem;
  height: 2.05rem;
  padding: 0.06rem;
  box-sizing: border-box;
  border-radius: 50%;
  border: none;
  background: color-mix(in srgb, var(--page-secondary, var(--neutral-secondary)) 55%, rgba(0, 0, 0, 0.28));
  color: var(--page-highlight, #fffef8);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

.p3-carousel__open-glyph svg {
  display: block;
  width: 78%;
  height: 78%;
}

.p3-carousel__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p3-carousel__slide-text {
  padding: 0 var(--space-1);
}

.p3-carousel__slide-title {
  margin: 0;
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 0.95rem;
}

.p3-carousel__slide-caption,
.p3-carousel__slide-note {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  opacity: 0.88;
}

/* Page 3 — YouTube [open] panel: manual popover + lazy iframe (see wirePage3YoutubePopover in app.js) */
[popover].open-popover.p3-youtube-open-popover {
  width: min(100vw - 1.5rem, 52rem);
  max-width: min(100vw - 1.5rem, 52rem);
  max-height: min(92vh, 48rem);
  border: none;
  background: #0f1c1a;
  color: #e8fffc;
  box-shadow: var(--shadow-pop);
}

[popover].open-popover.p3-youtube-open-popover::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

@media (max-width: 768px) {
  [popover].open-popover.p3-youtube-open-popover {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(100vw - 0.75rem, 52rem);
    min-width: 14rem;
    max-width: none;
    height: auto;
    max-height: 100dvh;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.45);
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  [popover].open-popover.p3-youtube-open-popover:popover-open {
    animation: open-popover-drawer-in 0.24s ease-out;
  }
}

.p3-youtube-dialog {
  width: min(100vw - 1.5rem, 52rem);
}

.p3-youtube-dialog__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  word-spacing: 0.16em;
}

.p3-youtube-dialog__frame-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.p3-youtube-dialog__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Page 3 — PDF [open] panel: manual popover + scrollable iframe (see wirePage3PdfPopover in app.js) */
[popover].open-popover.p3-pdf-open-popover {
  width: min(100vw - 1.5rem, 52rem);
  max-width: min(100vw - 1.5rem, 52rem);
  max-height: min(92vh, 48rem);
  border: none;
  background: #0f1c1a;
  color: #e8fffc;
  box-shadow: var(--shadow-pop);
}

[popover].open-popover.p3-pdf-open-popover::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

@media (max-width: 768px) {
  [popover].open-popover.p3-pdf-open-popover {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(100vw - 0.75rem, 52rem);
    min-width: 14rem;
    max-width: none;
    height: auto;
    max-height: 100dvh;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.45);
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  [popover].open-popover.p3-pdf-open-popover:popover-open {
    animation: open-popover-drawer-in 0.24s ease-out;
  }
}

.p3-pdf-dialog__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  word-spacing: 0.16em;
}

.p3-pdf-dialog__scroll {
  overflow: auto;
  max-height: min(72vh, 40rem);
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-sm);
  background: #1a2826;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.p3-pdf-dialog__iframe {
  display: block;
  width: 100%;
  min-height: min(68vh, 36rem);
  height: 72vh;
  border: 0;
  background: #fff;
}

#page-3 .p3-preview-thumb--pdf {
  object-fit: contain;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.2)),
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.06) 0 6px,
      rgba(0, 0, 0, 0.08) 6px 12px
    );
}

.p3-carousel__track:focus-visible {
  outline: 2px solid var(--page-highlight, var(--story-highlight));
  outline-offset: 2px;
}

/* Details / expand — accordion summaries use .accordion-summary (label + right double-chevron) */
.landscape-page__half details {
  margin-bottom: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.landscape-page__half summary {
  cursor: pointer;
  font-weight: 600;
}

/* Native <details> accordions: title left, stacked chevrons right; rotate to “up” when open */
.accordion-summary {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  box-sizing: border-box;
  list-style: none;
}

.accordion-summary::-webkit-details-marker,
.accordion-summary::marker {
  display: none;
}

.accordion-summary__text {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.accordion-summary__marker {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  min-width: 2.35rem;
  min-height: 2.35rem;
  padding: 0.06rem;
  box-sizing: border-box;
  border-radius: 50%;
  border: none;
  background: color-mix(in srgb, var(--page-secondary, var(--neutral-secondary)) 42%, #ffffff 58%);
  color: var(--page-highlight, var(--neutral-highlight));
  opacity: 1;
}

.accordion-summary__chevrons {
  display: block;
  width: 1.42rem;
  height: 1.42rem;
  transform-origin: 50% 50%;
  transition: transform 0.2s ease;
}

details[open] > summary.accordion-summary .accordion-summary__chevrons {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .accordion-summary__chevrons {
    transition: none;
  }
}

/* Page 2 LEFT — Mission / Pillars / Values: exclusive accordions + inline [change] rows (IR §139–169) */
#page-2 .p2-mission > ul {
  margin: 0;
  padding-left: 1.35rem;
}

#page-2 .p2-mission > ul > li + li {
  margin-top: var(--space-2);
}

#page-2 .p2-mission > ul > li::marker {
  color: var(--page-highlight, var(--story-highlight));
}

#page-2 .p2-section-acc > summary.accordion-summary {
  min-height: 44px;
}

/* Page 2 left — Mission / Pillars / Values summaries (~2× default title scale; Osmosis stays default) */
#page-2 .landscape-page__half.left  > summary.accordion-summary .accordion-summary__text {
  font-size: clamp(1.35rem, 3.6vw, 2rem);
  line-height: 1.2;
}

#page-2 .landscape-page__half.left .p2-section-acc:not(.p2-osmosis-acc) > summary.accordion-summary {
  min-height: 52px;
}

#page-2 .landscape-page__half.left .p2-section-acc:not(.p2-osmosis-acc) > summary.accordion-summary .accordion-summary__marker {
  width: 3.1rem;
  height: 3.1rem;
  min-width: 3.1rem;
  min-height: 3.1rem;
}

#page-2 .landscape-page__half.left .p2-section-acc:not(.p2-osmosis-acc) > summary.accordion-summary .accordion-summary__chevrons {
  width: 1.65rem;
  height: 1.65rem;
}

#page-2 .p2-section-acc__body {
  padding-top: var(--space-2);
}

#page-2 .p2-inline-change-hint {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sub);
  font-size: 0.82rem;
  line-height: 1.4;
  opacity: 0.92;
}

#page-2 .p2-change-tag {
  display: inline-flex;
  align-items: center;
  margin-right: 0.35rem;
  color: var(--page-highlight, var(--story-highlight));
}

#page-2 .p2-change-tag .interaction-svg--change,
#page-2 .p2-h3-change-icon .interaction-svg--change {
  display: block;
}

#page-2 .p2-h3-change-icon {
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
  vertical-align: middle;
  color: var(--page-highlight, var(--story-highlight));
}

#page-2 .p2-pillar-inline {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
}

#page-2 .p2-inline-btn__caption {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  max-width: 100%;
}

#page-2 .p2-pillar-inline__btn .p2-inline-btn__caption,
#page-2 .p2-values-inline__btn .p2-inline-btn__caption,
#page-4 .p4-film-inline__btn .p2-inline-btn__caption {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#page-2 .p2-pillar-inline__btn .p2-inline-btn__caption > .p2-pillar-inline__label,
#page-2 .p2-values-inline__btn .p2-inline-btn__caption > .p2-values-inline__label,
#page-4 .p4-film-inline__btn .p2-inline-btn__caption > .p4-film-inline__label {
  align-self: stretch;
  text-align: center;
}

#page-2 .p2-pillar-inline__btn .p2-inline-btn__caption .p2-inline-selected-glove,
#page-2 .p2-values-inline__btn .p2-inline-btn__caption .p2-inline-selected-glove,
#page-4 .p4-film-inline__btn .p2-inline-btn__caption .p2-inline-selected-glove {
  align-self: center;
}

#page-2 .p2-inline-selected-glove {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  color: var(--page-highlight, var(--story-highlight));
}

#page-2 .p2-pillar-inline__btn[aria-pressed='true'] .p2-inline-selected-glove,
#page-2 .p2-values-inline__btn[aria-pressed='true'] .p2-inline-selected-glove {
  display: inline-flex;
}

#page-2 .p2-pillar-inline__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  flex: 1 1 5.25rem;
  min-width: 4.5rem;
  max-width: 8rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  line-height: 1.15;
}

#page-2 .p2-pillar-inline__btn[aria-pressed='true'] .p2-pillar-inline__label {
  color: var(--page-highlight, var(--story-highlight));
}

#page-2 .p2-pillar-inline__btn:focus-visible {
  outline: 2px solid var(--page-highlight, var(--story-highlight));
  outline-offset: 2px;
}

#page-2 .p2-pillar-inline__thumb {
  width: calc(2.65rem * 1.5);
  height: calc(2.65rem * 1.5);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background-color: rgba(255, 255, 255, 0.2);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

#page-2 .p2-pillar-inline__btn[aria-pressed='true'] .p2-pillar-inline__thumb {
  border-color: color-mix(in srgb, var(--page-highlight, var(--story-highlight)) 72%, #ffffff 28%);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--page-highlight, var(--story-highlight)) 42%, transparent),
    0 0 1rem color-mix(in srgb, var(--page-highlight, var(--story-highlight)) 25%, transparent),
    inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

#page-2 .p2-pillar-inline__thumb--story {
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.22) 100%),
    url('../img/page-2/pillars-ethos/home_arm_story.jpg');
}

#page-2 .p2-pillar-inline__thumb--journey {
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.22) 100%),
    url('../img/page-2/pillars-ethos/home_arm_journey.jpg');
}

#page-2 .p2-pillar-inline__thumb--voices {
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.22) 100%),
    url('../img/page-2/pillars-ethos/home_arm_voices.jpg');
}

#page-2 .p2-pillar-inline__thumb--action {
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.22) 100%),
    url('../img/page-2/pillars-ethos/home_arm_action.jpg');
}

#page-2 .p2-pillar-inline__label {
  display: inline-block;
  max-width: 100%;
}

#page-2 .p2-values-inline {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
}

#page-2 .p2-values-inline__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  flex: 1 1 7.5rem;
  min-width: 6rem;
  max-width: 12rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
}

#page-2 .p2-values-inline__btn[aria-pressed='true'] .p2-values-inline__label {
  color: var(--page-highlight, var(--story-highlight));
}

#page-2 .p2-values-inline__btn:focus-visible {
  outline: 2px solid var(--page-highlight, var(--story-highlight));
  outline-offset: 2px;
}

#page-2 .p2-values-inline__thumb {
  width: calc(3rem * 1.5);
  height: calc(3rem * 1.5);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background-color: rgba(255, 255, 255, 0.2);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

#page-2 .p2-values-inline__btn[aria-pressed='true'] .p2-values-inline__thumb {
  border-color: color-mix(in srgb, var(--page-highlight, var(--story-highlight)) 72%, #ffffff 28%);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--page-highlight, var(--story-highlight)) 42%, transparent),
    0 0 1rem color-mix(in srgb, var(--page-highlight, var(--story-highlight)) 25%, transparent),
    inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

#page-2 .p2-values-inline__thumb--community {
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.22) 100%),
    url('../img/page-2/pillars-ethos/home_ethos_community.jpg');
}

/* Ethos asset “voice” ↔ Ownership is Representation */
#page-2 .p2-values-inline__thumb--ownership {
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.22) 100%),
    url('../img/page-2/pillars-ethos/home_ethos_voice.jpg');
}

#page-2 .p2-values-inline__thumb--engagement {
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.22) 100%),
    url('../img/page-2/pillars-ethos/home_ethos_engagement.jpg');
}

#page-2 .p2-values-inline__label {
  display: inline-block;
  max-width: 100%;
}

#page-2 .p2-inline-def {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.32);
  font-size: 0.92rem;
  line-height: 1.5;
  min-height: 3.5rem;
}

/* Dialog — shared chrome panel skin */
dialog.chrome-drawer {
  border: none;
  padding: var(--space-3);
  background: #0f1c1a;
  color: #e8fffc;
}

dialog.chrome-drawer:not(.chrome-drawer--left) {
  margin: auto;
  max-width: min(100vw - 2rem, 22rem);
  width: 100%;
  border-radius: var(--radius-md);
}

/* Left site menu: edge drawer (not centered modal) */
dialog.chrome-drawer--left {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(22rem, min(92vw, 100vw - 1.5rem));
  height: 100dvh;
  max-height: none;
  margin: 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: 8px 0 40px rgba(0, 0, 0, 0.45);
  overflow: auto;
}

@media (prefers-reduced-motion: no-preference) {
  dialog.chrome-drawer--left {
    animation: chrome-drawer-left-in 0.22s ease-out;
  }
}

@media (prefers-reduced-motion: reduce) {
  dialog.chrome-drawer--left {
    animation: none;
  }
}

@keyframes chrome-drawer-left-in {
  from {
    transform: translateX(-100%);
    opacity: 0.92;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

dialog.chrome-drawer::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

dialog.chrome-drawer a {
  color: var(--journey-secondary);
}

.impact-dialog__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 1.15rem;
  color: #fff;
}

.impact-dialog__body {
  max-height: 70vh;
  overflow: auto;
  font-size: 0.95rem;
  line-height: 1.5;
}

.impact-dialog__footer {
  margin-top: var(--space-3);
  display: flex;
  justify-content: flex-end;
}

/* Mobile bottom sheet: page thumbnails (spec: right rail → bottom drawer) */
dialog.chrome-thumbs-drawer {
  position: fixed;
  inset: auto 0 0 0;
  margin: 0;
  max-width: none;
  width: 100%;
  max-height: min(72vh, 30rem);
  padding: var(--space-3) var(--space-3) var(--space-2);
  border: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: #0c1614;
  color: var(--chrome-text);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45);
}

dialog.chrome-thumbs-drawer::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.chrome-thumbs-drawer__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 1rem;
}

.chrome-thumbs-drawer__hint {
  margin: 0 0 var(--space-2);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--chrome-muted);
}

.chrome-thumbs-drawer__close {
  margin-top: var(--space-2);
  width: 100%;
  font: inherit;
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: var(--chrome-text);
  cursor: pointer;
}

.thumb-drawer-inner {
  display: flex;
  flex-direction: row;
  gap: var(--space-2);
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--space-1) 0 var(--space-2);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.thumb-drawer-inner .chrome-thumb--mobile-half {
  flex: 0 0 auto;
  width: 3.65rem;
  min-height: 0;
  scroll-snap-align: start;
}

.thumb-drawer-inner .chrome-thumb--mobile-half .chrome-thumb__preview {
  width: 100%;
}

.thumb-drawer-inner .chrome-thumb--mobile-half .chrome-thumb__num {
  font-size: 0.62rem;
  letter-spacing: 0.02em;
}

/* Mobile page drawer only — half crops (1A/1B …); do not change #page-1 Contents rules */
@media (max-width: 768px) {
  .thumb-drawer-inner .chrome-thumb__preview--half {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 210 / 297;
    overflow: hidden;
    border-radius: 4px;
  }

  .thumb-drawer-inner .chrome-thumb__preview--half .chrome-thumb__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 200% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0;
    padding: 0;
    border-radius: 0;
    object-fit: cover;
  }

  .thumb-drawer-inner .chrome-thumb__preview--half-left .chrome-thumb__img {
    transform: none;
    object-position: left center;
  }

  .thumb-drawer-inner .chrome-thumb__preview--half-right .chrome-thumb__img {
    transform: translateX(-50%);
    object-position: right center;
  }
}

/* Page 6 — Global Reach (Leaflet on #facilitate-map); tokens mirror docs/plan/map-export/raw/map-section.css */
#page-6 .p6-map-lede {
  margin: var(--space-2) 0 0;
  font-size: 0.92rem;
  line-height: 1.45;
  max-width: 36rem;
}

#page-6 .map-section {
  position: relative;
  z-index: 2;
  margin: var(--space-3) 0 0;
  min-width: 0;
}

#page-6 .map-section > h3 {
  margin: 0 0 var(--space-2);
}

#page-6 .map-container {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  min-height: 250px;
  width: 100%;
  min-width: 0;
  backdrop-filter: blur(10px);
  overflow: hidden;
}

#page-6 .map-container .leaflet-container {
  border-radius: 12px;
  height: 250px;
  width: 100%;
  z-index: 0;
  font-family: var(--font-body, inherit);
}

#page-6 .map-note {
  font-size: 0.875rem;
  line-height: 1.5;
  opacity: 0.9;
  text-align: center;
  margin: var(--space-3) 0 0;
}

/* Page 6 RIGHT — Pantheon (Local Voices); choose + [open] galleries — wirePage6Pantheon in app.js */
#page-6 .landscape-page__half.right {
  min-width: 0;
  overflow-x: clip;
}

#page-6 .landscape-page__half.right #p6-local-voices-title {
  margin: 0 0 var(--space-2);
}

#page-6 .landscape-page__half.right .p6-pantheon {
  --p6-pantheon-pull: clamp(3.5rem, 14vw, 7.5rem);
  --p6-intro-offset: 4%;
  --p6-img-offset: 10%;
  --p6-lift: 5%;
  --p6-lower: 5%;
  margin-top: var(--space-1);
  min-width: 0;
  max-width: 100%;
}

#page-6 .landscape-page__half.right .p6-pantheon-labels,
#page-6 .landscape-page__half.right .p6-pantheon-detail {
  transform: translateY(var(--p6-lower));
}

#page-6 .landscape-page__half.right .p6-pantheon > h3 {
  margin: 0 0 var(--space-2);
  color: var(--page-text, inherit);
  position: relative;
  z-index: 3;
}

#page-6 .landscape-page__half.right .p6-pantheon-hero {
  position: relative;
  width: 100%;
  min-width: 0;
  margin: calc(-0.3 * var(--p6-pantheon-pull)) 0 var(--space-1);
  transform: translateY(calc(-1 * var(--p6-lift)));
}

#page-6 .landscape-page__half.right .p6-pantheon-hero__frame {
  position: relative;
  margin-top: var(--p6-img-offset);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

#page-6 .landscape-page__half.right .p6-pantheon-hero__fade {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 80%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    #fff 0%,
    #fff 22%,
    color-mix(in srgb, #fff 90%, transparent) 42%,
    color-mix(in srgb, #fff 62%, transparent) 58%,
    color-mix(in srgb, #fff 22%, transparent) 74%,
    transparent 82%
  );
}

#page-6 .landscape-page__half.right .p6-pantheon-intro {
  position: absolute;
  top: var(--p6-intro-offset, 5%);
  right: 0;
  left: 0;
  z-index: 2;
  margin: 0;
  padding: var(--space-2) var(--space-2) 0;
  font-size: 0.84rem;
  line-height: 1.45;
  max-width: none;
  color: var(--page-text, inherit);
  pointer-events: none;
}

#page-6 .landscape-page__half.right .p6-pantheon-intro p {
  margin: 0 0 0.55em;
}

#page-6 .landscape-page__half.right .p6-pantheon-intro p:last-child {
  margin-bottom: 0;
}

#page-6 .landscape-page__half.right .p6-pantheon-hero__img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
  border-radius: var(--radius-sm);
}

#page-6 .landscape-page__half.right .p6-pantheon-hero__hits {
  position: absolute;
  top: 50%;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  pointer-events: none;
}

#page-6 .landscape-page__half.right .p6-pantheon-hotspot {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 0;
  box-sizing: border-box;
  pointer-events: auto;
  min-height: 2.75rem;
  touch-action: manipulation;
}

#page-6 .landscape-page__half.right .p6-pantheon-hotspot:hover {
  background: color-mix(in srgb, var(--page-highlight, #7ac7c2) 22%, transparent);
}

#page-6 .landscape-page__half.right .p6-pantheon-hotspot:focus-visible {
  outline: 2px solid var(--page-highlight, var(--story-highlight));
  outline-offset: -2px;
  z-index: 2;
}

#page-6 .landscape-page__half.right .p6-pantheon-hotspot[aria-pressed='true'] {
  background: color-mix(in srgb, var(--page-highlight, #7ac7c2) 35%, transparent);
  box-shadow: inset 0 0 0 2px var(--page-highlight, var(--story-highlight));
  z-index: 2;
}

#page-6 .landscape-page__half.right .p6-pantheon-labels {
  display: grid;
  grid-template-columns: 500fr 335fr 340fr 300fr 465fr 416fr;
  gap: 0 var(--space-1);
  margin: 0 0 var(--space-2);
  position: relative;
  z-index: 2;
  padding: 0;
  list-style: none;
  font-size: clamp(0.62rem, 1.6vw, 0.72rem);
  line-height: 1.3;
  text-align: center;
  color: var(--page-text, inherit);
  min-width: 0;
}

#page-6 .landscape-page__half.right .p6-pantheon-labels__item {
  min-width: 0;
  padding: 0 0.1rem;
}

#page-6 .landscape-page__half.right .p6-pantheon-labels__artist {
  display: block;
  font-weight: 600;
  hyphens: auto;
  overflow-wrap: anywhere;
}

#page-6 .landscape-page__half.right .p6-pantheon-labels__item[aria-current='true'] .p6-pantheon-labels__artist {
  color: var(--page-highlight, var(--story-highlight));
}

#page-6 .landscape-page__half.right .p6-pantheon-detail {
  min-height: 2.75rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--page-text, inherit);
  position: relative;
  z-index: 2;
}

#page-6 .landscape-page__half.right .p6-pantheon-detail__copy {
  margin: 0 0 var(--space-2);
}

#page-6 .landscape-page__half.right .p6-pantheon-detail__heading {
  margin: 0 0 var(--space-2);
  text-align: center;
  font-weight: 700;
  font-size: 1.2em;
  line-height: 1.35;
}

#page-6 .landscape-page__half.right .p6-pantheon-detail__line {
  margin: 0;
  font-weight: 400;
}

#page-6 .landscape-page__half.right .p6-pantheon-detail__chip {
  font-weight: 600;
  padding: 0.12em 0.4em;
  border-radius: 0.25em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

#page-6 .landscape-page__half.right .p6-pantheon-detail__chip--goddex {
  background: color-mix(in srgb, #d4c4f0 42%, transparent);
}

#page-6 .landscape-page__half.right .p6-pantheon-detail__chip--character {
  background: color-mix(in srgb, #b8e8dc 45%, transparent);
}

#page-6 .landscape-page__half.right .p6-pantheon-detail__chip--power {
  background: color-mix(in srgb, #ffd4c4 48%, transparent);
}

#page-6 .landscape-page__half.right .p6-pantheon-detail__chip--magic {
  background: color-mix(in srgb, #f5e6a8 52%, transparent);
}

#page-6 .landscape-page__half.right .p6-pantheon-detail__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

#page-6 .landscape-page__half.right .p6-pantheon-detail__open {
  min-height: 2.75rem;
  font-size: 0.82rem;
}

@media (pointer: coarse) {
  #page-6 .landscape-page__half.right .p6-pantheon-hotspot {
    min-height: 2.75rem;
    min-width: 2.75rem;
  }
}

@media (max-width: 899px) {
  #page-6 .landscape-page__half.right .p6-pantheon-labels {
    font-size: 0.65rem;
    gap: 0 0.15rem;
  }
}

/* Pantheon [open] galleries — shared popovers in overlays-tail.php */
[popover].open-popover.p6-pantheon-gallery-popover {
  width: min(100vw - 1.5rem, 52rem);
  max-width: min(100vw - 1.5rem, 52rem);
  max-height: min(92vh, 48rem);
  border: none;
  background: var(--page-canvas-text, #fffef8);
  color: var(--page-canvas-bg, #1a1a1a);
  box-shadow: var(--shadow-pop);
}

[popover].open-popover.p6-pantheon-gallery-popover::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.p6-pantheon-gallery-popover__title {
  margin: 0 0 var(--space-2);
  padding-right: 2.5rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: inherit;
}

.p6-pantheon-gallery-popover__body {
  min-width: 0;
  overflow: auto;
  max-height: min(78vh, 40rem);
}

.p6-pantheon-gallery__row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--space-2);
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: var(--space-1);
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.p6-pantheon-gallery__figure {
  flex: 1 1 0;
  min-width: min(28vw, 10rem);
  max-width: 16rem;
  margin: 0;
  scroll-snap-align: start;
}

.p6-pantheon-gallery__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(52vh, 22rem);
  object-fit: contain;
  object-position: center bottom;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--page-canvas-bg, #1a1a1a) 6%, transparent);
}

.p6-pantheon-gallery__caption {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  color: inherit;
}

.p6-pantheon-youth__lede {
  margin: 0 0 var(--space-2);
  font-size: 0.85rem;
  line-height: 1.5;
  color: inherit;
}

.p6-pantheon-youth__grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.p6-pantheon-youth__placeholder {
  flex: 1 1 5.5rem;
  min-width: 5.5rem;
  min-height: 7rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--page-canvas-bg, #1a1a1a) 10%, transparent);
  border: 1px dashed color-mix(in srgb, var(--page-canvas-bg, #1a1a1a) 28%, transparent);
}

@media (max-width: 768px) {
  [popover].open-popover.p6-pantheon-gallery-popover {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(100vw - 0.75rem, 52rem);
    min-width: 14rem;
    max-width: none;
    height: auto;
    max-height: 100dvh;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.45);
  }

  .p6-pantheon-gallery-popover__body {
    max-height: min(88dvh, 40rem);
  }

  .p6-pantheon-gallery__figure {
    min-width: min(72vw, 14rem);
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  [popover].open-popover.p6-pantheon-gallery-popover:popover-open {
    animation: open-popover-drawer-in 0.24s ease-out;
  }
}

#page-6 .p6-repertoire {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--page-text, #1a1a1a) 14%, transparent);
}

#page-6 .p6-repertoire > h3 {
  margin: 0 0 var(--space-2);
}

#page-6 .p6-repertoire-hint {
  margin: 0 0 var(--space-3);
  font-size: 0.82rem;
  line-height: 1.45;
  opacity: 0.88;
  max-width: 38rem;
}

#page-6 .p6-repertoire-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.5rem;
  align-items: center;
  line-height: 1.35;
  max-width: 100%;
}

#page-6 .p6-repertoire-chip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.12rem 0.2rem;
  max-width: 100%;
  margin: 0;
  padding: 0.28rem 0.55rem 0.32rem;
  border: 1px solid color-mix(in srgb, var(--page-text, #1a1a1a) 12%, transparent);
  border-radius: 999px;
  font-family: var(--font-sub);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-align: left;
  color: var(--page-text, inherit);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

#page-6 .p6-repertoire-chip:hover,
#page-6 .p6-repertoire-chip:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  outline: none;
}

#page-6 .p6-repertoire-chip:focus-visible {
  outline: 2px solid var(--page-highlight, var(--story-highlight));
  outline-offset: 2px;
}

#page-6 .p6-repertoire-chip__hash {
  opacity: 0.75;
  font-weight: 700;
}

#page-6 .p6-repertoire-chip__name {
  font-weight: 600;
}

#page-6 .p6-repertoire-chip__count {
  font-variant-numeric: tabular-nums;
  opacity: 0.92;
}

#page-6 .p6-repertoire-chip--tone-0 {
  background: color-mix(in srgb, #c4b5fd 55%, #fff 45%);
}
#page-6 .p6-repertoire-chip--tone-1 {
  background: color-mix(in srgb, #fbcfe8 58%, #fff 42%);
}
#page-6 .p6-repertoire-chip--tone-2 {
  background: color-mix(in srgb, #a5f3fc 52%, #fff 48%);
}
#page-6 .p6-repertoire-chip--tone-3 {
  background: color-mix(in srgb, #bbf7d0 55%, #fff 45%);
}
#page-6 .p6-repertoire-chip--tone-4 {
  background: color-mix(in srgb, #fde68a 58%, #fff 42%);
}
#page-6 .p6-repertoire-chip--tone-5 {
  background: color-mix(in srgb, #ddd6fe 56%, #fff 44%);
}
#page-6 .p6-repertoire-chip--tone-6 {
  background: color-mix(in srgb, #fecdd3 56%, #fff 44%);
}
#page-6 .p6-repertoire-chip--tone-7 {
  background: color-mix(in srgb, #bfdbfe 54%, #fff 46%);
}

[popover].peek-popover.p6-repertoire-peek {
  max-width: min(22rem, 92vw);
}

#page-6 .p6-repertoire-peek .p6-repertoire-peek__list {
  margin: 0.35rem 0 0;
  padding: 0 0 0 1.1rem;
  max-height: 12rem;
  overflow: auto;
  font-size: 0.82rem;
  line-height: 1.4;
}

#page-6 .p6-repertoire-peek .p6-repertoire-peek__list li + li {
  margin-top: 0.45rem;
}

/* Page 6 LEFT — S.W.Opera Story Callout (values-style chips, no accordion) */
#page-6 .p6-swo-story {
  margin-top: var(--space-3);
  min-width: 0;
}

#page-6 .p6-swo-story > h3 {
  margin: 0 0 var(--space-2);
}

#page-6 .p6-swo-story-lede {
  margin: 0 0 var(--space-3);
  font-size: 0.82rem;
  line-height: 1.45;
  opacity: 0.88;
  max-width: 38rem;
}

#page-6 .p6-swo-story-inline {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
}

#page-6 .p6-swo-story-inline__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  flex: 1 1 6.5rem;
  min-width: 5.5rem;
  max-width: 10rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
}

#page-6 .p6-swo-story-inline__btn[aria-pressed='true'] .p6-swo-story-inline__label {
  color: var(--page-highlight, var(--story-highlight));
}

#page-6 .p6-swo-story-inline__btn:focus-visible {
  outline: 2px solid var(--page-highlight, var(--story-highlight));
  outline-offset: 2px;
}

#page-6 .p6-swo-story-inline__btn .p2-inline-btn__caption {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#page-6 .p6-swo-story-inline__btn .p2-inline-btn__caption > .p6-swo-story-inline__label {
  align-self: stretch;
  text-align: center;
}

#page-6 .p6-swo-story-inline__btn .p2-inline-selected-glove {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  color: var(--page-highlight, var(--story-highlight));
}

#page-6 .p6-swo-story-inline__btn[aria-pressed='true'] .p2-inline-selected-glove {
  display: inline-flex;
}

#page-6 .p6-swo-story-inline__thumb {
  width: calc(3rem * 1.35);
  height: calc(3rem * 1.35);
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.14);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

#page-6 .p6-swo-story-inline__thumb--members {
  background-image: linear-gradient(145deg, rgba(255, 210, 180, 0.45) 0%, rgba(80, 40, 90, 0.35) 100%);
}

#page-6 .p6-swo-story-inline__thumb--twitter {
  background-image: linear-gradient(145deg, rgba(180, 220, 255, 0.5) 0%, rgba(40, 70, 120, 0.35) 100%);
}

#page-6 .p6-swo-story-inline__thumb--partners {
  background-image: linear-gradient(145deg, rgba(200, 255, 210, 0.4) 0%, rgba(50, 90, 70, 0.35) 100%);
}

#page-6 .p6-swo-story-inline__thumb--grassroots {
  background-image: linear-gradient(145deg, rgba(255, 230, 150, 0.45) 0%, rgba(120, 80, 30, 0.35) 100%);
}

#page-6 .p6-swo-story-inline__btn[aria-pressed='true'] .p6-swo-story-inline__thumb {
  border-style: solid;
  border-color: color-mix(in srgb, var(--page-highlight, var(--story-highlight)) 72%, #ffffff 28%);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--page-highlight, var(--story-highlight)) 42%, transparent),
    0 0 1rem color-mix(in srgb, var(--page-highlight, var(--story-highlight)) 25%, transparent),
    inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

#page-6 .p6-swo-story-inline__label {
  display: inline-block;
  max-width: 100%;
}

#page-6 .p6-swo-story-def {
  margin: var(--space-2) 0 0;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.12);
  font-size: 0.88rem;
  line-height: 1.45;
  min-height: 3.25rem;
}

/* Page 6 RIGHT — Arts Action Festival programme ([peek] thumbs, like P4 film school) */
#page-6 .landscape-page__half.right .p6-aaf-programme {
  margin-top: var(--space-3);
  min-width: 0;
}

#page-6 .landscape-page__half.right .p6-aaf-programme > h3 {
  margin: 0 0 var(--space-2);
}

#page-6 .landscape-page__half.right .p6-aaf-programme-lede {
  margin: 0 0 var(--space-3);
  font-size: 0.82rem;
  line-height: 1.45;
  opacity: 0.88;
  max-width: 38rem;
}

#page-6 .landscape-page__half.right .p6-aaf-programme__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  padding: 0;
}

#page-6 .landscape-page__half.right .p6-aaf-programme__thumb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

#page-6 .landscape-page__half.right .p6-aaf-programme__thumb-label {
  display: block;
  max-width: 7.5rem;
  margin: 0.1rem auto 0;
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

#page-6 .landscape-page__half.right .p6-aaf-programme__thumb-hit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4.25rem;
  flex-shrink: 0;
  vertical-align: top;
}

#page-6 .landscape-page__half.right .p6-aaf-programme__thumb-still {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: var(--radius-sm);
  border: 2px dashed rgba(0, 0, 0, 0.2);
  background-color: rgba(0, 0, 0, 0.06);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

#page-6 .landscape-page__half.right .p6-aaf-programme__thumb-still--performances {
  background-image: linear-gradient(145deg, rgba(255, 180, 200, 0.55) 0%, rgba(120, 40, 80, 0.25) 100%);
}

#page-6 .landscape-page__half.right .p6-aaf-programme__thumb-still--workshops {
  background-image: linear-gradient(145deg, rgba(180, 230, 255, 0.55) 0%, rgba(40, 80, 130, 0.25) 100%);
}

#page-6 .landscape-page__half.right .p6-aaf-programme__thumb-still--talks {
  background-image: linear-gradient(145deg, rgba(220, 200, 255, 0.5) 0%, rgba(70, 50, 120, 0.25) 100%);
}

#page-6 .landscape-page__half.right .p6-aaf-programme__thumb-still--stalls {
  background-image: linear-gradient(145deg, rgba(200, 255, 200, 0.5) 0%, rgba(50, 100, 60, 0.25) 100%);
}

#page-6 .landscape-page__half.right .p6-aaf-programme__thumb-still--roaming {
  background-image: linear-gradient(145deg, rgba(255, 220, 160, 0.55) 0%, rgba(140, 90, 30, 0.25) 100%);
}

#page-6 .landscape-page__half.right .p6-aaf-programme__open-btn.open-btn--icon-only {
  position: relative;
  z-index: 1;
  margin: 0;
  flex-shrink: 0;
  opacity: 1;
  background: color-mix(in srgb, rgba(255, 255, 255, 0.92) 55%, var(--page-highlight, var(--story-highlight)) 45%);
  color: #1a1a1a;
  box-shadow:
    0 0 0 1px color-mix(in srgb, #000 12%, transparent),
    0 2px 10px rgba(0, 0, 0, 0.12);
}

#page-6 .landscape-page__half.right .p6-aaf-programme__open-btn.open-btn--icon-only:hover {
  opacity: 1;
  background: color-mix(in srgb, rgba(255, 255, 255, 0.88) 42%, var(--page-highlight, var(--story-highlight)) 58%);
}

#page-6 .landscape-page__half.right .p6-aaf-programme__open-btn.open-btn--icon-only svg {
  opacity: 1;
  color: var(--page-highlight, var(--story-highlight));
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.65));
}

#page-6 .landscape-page__half.right .p6-aaf-programme__open-btn.open-btn--icon-only:focus-visible {
  outline: 2px solid var(--page-highlight, var(--story-highlight));
  outline-offset: 2px;
}

/* Page 6 — AAF programme [open] strand panels (full list, scroll inside shell) */
[popover].open-popover.p6-aaf-open {
  width: min(42rem, 92vw);
  max-width: min(42rem, 92vw);
  max-height: min(75vh, 32rem);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border: none;
  background: var(--page-canvas-text, #fffef8);
  color: var(--page-canvas-bg, #1a1a1a);
  box-shadow: var(--shadow-pop);
  padding: var(--space-3);
  padding-top: 2.25rem;
}

[popover].open-popover.p6-aaf-open::backdrop {
  background: rgba(0, 0, 0, 0.35);
}

.p6-aaf-open__header {
  margin: 0 0 var(--space-2);
  padding-right: 2rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 0.05em;
  line-height: 1.3;
  color: inherit;
}

.p6-aaf-open__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.p6-aaf-open__entry {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--page-canvas-bg, #1a1a1a) 5%, transparent);
}

.p6-aaf-open__media {
  flex: 0 0 35%;
  min-width: 0;
  max-width: 35%;
}

.p6-aaf-open__img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 4.5rem;
  max-height: 8rem;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--page-canvas-bg, #1a1a1a) 8%, transparent);
}

.p6-aaf-open__body {
  flex: 1 1 65%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}

.p6-aaf-open__type {
  margin: 0;
  padding: 0.12em 0.45em;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 0.25em;
  background: color-mix(in srgb, var(--page-highlight, var(--story-highlight)) 30%, transparent);
  color: inherit;
}

.p6-aaf-open__title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  color: inherit;
}

.p6-aaf-open__artist {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  color: inherit;
  opacity: 0.9;
}

.p6-aaf-open__desc {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: inherit;
  opacity: 0.88;
}

@media (max-width: 768px) {
  [popover].open-popover.p6-aaf-open {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 65vw;
    min-width: 14rem;
    max-width: none;
    height: 100dvh;
    max-height: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.45);
    overflow-y: auto;
  }

  .p6-aaf-open__media {
    flex-basis: 32%;
    max-width: 32%;
  }

  .p6-aaf-open__body {
    flex-basis: 68%;
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  [popover].open-popover.p6-aaf-open:popover-open {
    animation: open-popover-drawer-in 0.24s ease-out;
  }
}

#page-6 .map-popup {
  font-size: 0.875rem;
  line-height: 1.5;
}

#page-6 .map-popup strong {
  font-weight: 600;
  display: block;
  margin-top: var(--space-1, 0.25rem);
}

#page-6 .map-popup strong:first-child {
  margin-top: 0;
  font-size: 1rem;
}

/* Page 8 LEFT — Creative Campaigns (mirror of Page 3 `.p3-preview-grid` on the right) */
#page-8 .landscape-page__half.left {
  min-width: 0;
}

#page-8 .landscape-page__half.left .p8-campaigns > h3 {
  margin: 0 0 var(--space-2);
}

#page-8 .p8-preview-grid {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3) var(--space-2);
  align-items: start;
  min-width: 0;
}

#page-8 .p8-preview-grid:last-child {
  margin-bottom: 0;
}

@media (max-width: 520px) {
  #page-8 .p8-preview-grid {
    grid-template-columns: 1fr;
  }
}

#page-8 .p8-preview-thumb-hit {
  position: relative;
  width: 100%;
  min-width: 0;
}

#page-8 .p8-preview-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

#page-8 .p8-preview-thumb--blank {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 4.5rem;
  background: color-mix(in srgb, var(--page-text, #e8fffc) 10%, transparent);
  border: 1px dashed color-mix(in srgb, var(--page-text, #e8fffc) 28%, transparent);
}

#page-8 .p8-preview-item__meta {
  margin-top: 0.35rem;
  text-align: center;
  min-width: 0;
}

#page-8 .p8-preview-item__title {
  margin: 0;
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1.25;
  letter-spacing: 0.02em;
}

/* Page 8 LEFT — Institutional Collaborations (mirror of Page 4 film residency inline [choose]) */
#page-8 .p8-institutional {
  margin-top: var(--space-4);
}

#page-8 .p8-institutional__intro {
  margin: 0 0 var(--space-3);
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 52ch;
}

#page-8 .p8-collab-inline {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
  margin-bottom: var(--space-2);
}

#page-8 .p8-collab-inline__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  flex: 1 1 4.75rem;
  min-width: 4.25rem;
  max-width: 7.5rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  line-height: 1.15;
}

#page-8 .p8-collab-inline__btn[aria-pressed='true'] .p8-collab-inline__label {
  color: var(--page-highlight, var(--action-highlight));
}

#page-8 .p8-collab-inline__btn:focus-visible {
  outline: 2px solid var(--page-highlight, var(--action-highlight));
  outline-offset: 2px;
}

#page-8 .p8-collab-inline__btn .p2-inline-selected-glove {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  color: var(--page-highlight, var(--action-highlight));
}

#page-8 .p8-collab-inline__btn[aria-pressed='true'] .p2-inline-selected-glove {
  display: inline-flex;
}

#page-8 .p8-collab-inline__btn .p2-inline-btn__caption {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#page-8 .p8-collab-inline__btn .p2-inline-btn__caption > .p8-collab-inline__label {
  align-self: stretch;
  text-align: center;
}

#page-8 .p8-collab-inline__btn .p2-inline-btn__caption .p2-inline-selected-glove {
  align-self: center;
}

#page-8 .p8-collab-inline__thumb {
  width: calc(2.65rem * 1.5);
  height: calc(2.65rem * 1.5);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background-color: rgba(255, 255, 255, 0.2);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

#page-8 .p8-collab-inline__thumb--blank {
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.22) 0%, rgba(0, 0, 0, 0.18) 100%);
}

#page-8 .p8-collab-inline__btn[aria-pressed='true'] .p8-collab-inline__thumb {
  border-color: color-mix(in srgb, var(--page-highlight, var(--action-highlight)) 72%, #ffffff 28%);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--page-highlight, var(--action-highlight)) 42%, transparent),
    0 0 1rem color-mix(in srgb, var(--page-highlight, var(--action-highlight)) 25%, transparent),
    inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

#page-8 .p8-collab-inline__label {
  font-family: var(--font-sub);
  font-weight: 600;
  letter-spacing: 0.02em;
}

#page-8 .p8-collab-def {
  margin: 0;
  padding: var(--space-2) 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  min-height: 2rem;
}

#page-8 .p8-collab-def p {
  margin: 0;
}

/* Page 8 RIGHT — Arts Action Map */
#page-8 .landscape-page__half.right {
  min-width: 0;
}

#page-8 .landscape-page__half.right .p8-aam,
#page-8 .landscape-page__half.right .p8-aam-block {
  position: relative;
  z-index: 1;
}

#page-8 .landscape-page__half.right .p8-aam > h3,
#page-8 .landscape-page__half.right .p8-aam-block > h3 {
  margin: 0 0 var(--space-2);
}

#page-8 .landscape-page__half.right .p8-aam-block {
  margin-top: var(--space-4);
}

#page-8 .p8-aam__intro {
  margin: 0 0 var(--space-3);
  font-size: 0.92rem;
  line-height: 1.5;
  max-width: 56ch;
}

#page-8 .p8-aam__map-gif {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  border-radius: var(--radius-sm);
}

#page-8 .p8-aam__gif {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--page-text, #1a1a1a) 6%, transparent);
}

#page-8 .p8-aam-split {
  display: grid;
  gap: var(--space-3);
  align-items: start;
  min-width: 0;
}

#page-8 .p8-aam-split--30-70 {
  grid-template-columns: 30fr 70fr;
}

#page-8 .p8-aam-split__media,
#page-8 .p8-aam-split__body {
  min-width: 0;
}

#page-8 .p8-aam-split__body {
  font-size: 0.9rem;
  line-height: 1.5;
}

#page-8 .p8-aam-split__body p {
  margin: 0;
}

#page-8 .p8-aam-ownership {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

#page-8 .p8-aam-ownership__row {
  display: grid;
  grid-template-columns: 60fr 40fr;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  min-width: 0;
}

#p8-aam-ownership-heading {
  text-align:right;
}

#p8-aam-communities-heading span, #p8-aam-ownership-heading span {
  color: #c18a12;
}

#page-8 .p8-aam-ownership__text {
  min-width: 0;
  font-size: 0.88rem;
  line-height: 1.45;
}

#page-8 .p8-aam-ownership__text p {
  margin: 0;
}

#page-8 .p8-aam-ownership__media {
  min-width: 0;
}

@media (max-width: 720px) {
  #page-8 .p8-aam-split--30-70,
  #page-8 .p8-aam-ownership__row {
    grid-template-columns: 1fr;
  }

  #page-8 .p8-aam-ownership__row {
    align-items: start;
  }
}

.placeholder-page {
  opacity: 0.75;
  font-style: italic;
}

.reach-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-2);
  margin: var(--space-2) 0 var(--space-3);
  align-items: start;
}

@media (min-width: 640px) {
  .reach-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #page-3 .reach-grid--p3 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-2) 0.35rem;
  }
}

#page-3 .reach-grid--p3 .reach-stat__dial {
  width: 5.4rem;
  height: 5.4rem;
  margin-bottom: 0.05rem;
}

#page-3 .reach-grid--p3 .reach-stat__hub {
  padding: 0.12rem;
}

#page-3 .reach-stat__hub--dual {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
}

#page-3 .reach-stat--shows-workshops .reach-stat__value {
  font-size: clamp(0.72rem, 1.85vw, 0.88rem);
}

#page-3 .reach-stat--shows-workshops .reach-stat__value--workshops {
  color: var(--action-highlight, #feffd9);
}

#page-3 .reach-stat--shows-workshops .reach-stat__label {
  font-size: 0.68rem;
  line-height: 1.2;
}

#page-3 .reach-grid--p3 .reach-stat__peek-btn {
  top: calc(50% - 0.72rem - 0.1rem);
}

.reach-stat__segments .reach-stat__segment {
  transition: stroke-dashoffset 0.2s ease;
}

.reach-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}

#page-3 .reach-stat__dial {
  cursor: pointer;
  border-radius: 50%;
  overflow: visible;
}

.reach-stat__dial {
  position: relative;
  width: 5rem;
  height: 5rem;
  margin: 0 auto 0.2rem;
  color: var(--page-highlight, var(--story-highlight));
}

.reach-stat__meter {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.reach-stat__hub {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  box-sizing: border-box;
  pointer-events: none;
}

.reach-stat__svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Track ring: was inline rgba(255,255,255,0.22) in PHP — dark-column default; `.landscape-page__half.right` overrides (E1 / two-tone). */
.reach-stat__track {
  fill: none;
  stroke: color-mix(in srgb, #ffffff 22%, transparent);
  stroke-width: 3;
}

/* Ring fill: initial dash state; in-view animation sets stroke-dashoffset per frame in app.js */
#page-3 .reach-stat .reach-stat__progress {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

@media (prefers-reduced-motion: reduce) {
  #page-3 .reach-stat .reach-stat__progress {
    stroke-dashoffset: 0;
  }
}

.reach-stat__value {
  font-family: var(--font-sub);
  font-size: clamp(0.92rem, 2.5vw, 1.2rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Five-figure Audiences total: 10% smaller so the ring isn’t crowded */
#page-3 .reach-stat--audiences .reach-stat__value {
  font-size: clamp(0.828rem, 2.25vw, 1.08rem);
}

/* Peek eye is a visual cue; dial circle is the hover target (see wireReachStatPeekDelegation). */
#page-3 .reach-stat__peek-btn {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(50% - 0.58rem - 0.1rem);
  transform: translate(-50%, -100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.1rem;
  min-width: 0;
  min-height: 0;
  border: none;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  color: var(--page-highlight, var(--story-highlight));
  pointer-events: none;
}

#page-3 .reach-stat__peek-btn:hover {
  background: transparent !important;
  opacity: 0.92;
}

#page-3 .reach-stat__peek-btn:focus-visible {
  outline: 2px solid var(--page-highlight, var(--story-highlight));
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

#page-3 .reach-stat__peek-btn .peek-btn__eye {
  display: block;
  width: 1.12rem;
  height: 1.12rem;
  flex-shrink: 0;
}

.reach-stat__label {
  font-family: var(--font-sub);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.9;
  margin: 0.15rem 0 0;
}

/* T3 — dev pillar swatches (matches tokens.css); delete block in index.html before launch if not needed */
.dev-pillar-smoke {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: var(--space-3) auto var(--space-2);
  padding: var(--space-1) var(--space-2);
  max-width: var(--max-canvas);
  border-radius: var(--radius-sm);
  background: rgba(6, 12, 11, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.dev-pillar-smoke__hint {
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chrome-muted);
}

.dev-pillar-smoke__chip {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-sm);
}

.dev-pillar-smoke__chip[data-pillar='neutral'] {
  color: var(--neutral-text);
  background: linear-gradient(145deg, var(--neutral-bg) 0%, var(--neutral-secondary) 100%);
  border: 1px solid rgba(0, 51, 48, 0.28);
}

.dev-pillar-smoke__chip[data-pillar='story'] {
  color: var(--story-text);
  background: linear-gradient(145deg, var(--story-secondary) 0%, var(--story-bg) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.dev-pillar-smoke__chip[data-pillar='journey'] {
  color: var(--journey-text);
  background: linear-gradient(145deg, var(--journey-secondary) 0%, var(--journey-bg) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dev-pillar-smoke__chip[data-pillar='voices'] {
  color: var(--voices-text);
  background: linear-gradient(145deg, var(--voices-secondary) 0%, var(--voices-bg) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.dev-pillar-smoke__chip[data-pillar='action'] {
  color: var(--action-text);
  background: linear-gradient(145deg, var(--action-secondary) 0%, var(--action-bg) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
}