/*
 * styles.css
 * Owns: Layout, typography, colors (CSS variables), component styles (nav, hero, sections,
 *       case study cards, creative work grid, footer), focus states, reduced-motion and print.
 * Layout system: outer .container (site shell, --container) + inner content rail (--content-rail-max,
 *   60rem) on interior pages and homepage sections below hero; system map diagram uses full shell width.
 * Dark navy field with gold drafting linework; metallic gold UI cards on navy ground.
 * Site background: site-linework.js — one document-height SVG (#bg-system), seeded drafting layers; scroll = opacity only.
 * No content; section IDs must match SECTION_IDS in script.js.
 */

:root {
  /*
   * Field: navy ambient ground. UI tiles: metallic silver + B/W overlay; gold on hover.
   */
  /* Fabrication field — sitewide default */
  --field-navy: #1c252f;
  --field-navy-elevated: #212c38;
  --field-navy-highlight: #24303d;
  --field-navy-deep: #161e26;
  --field-navy-sole: #121820;
  --gold-brass: #b5a078;
  --gold-brass-light: #d4c4a0;
  --gold-brass-muted: #9a8e72;
  --gold-brass-border: rgba(181, 158, 112, 0.28);
  --gold-brass-border-strong: rgba(198, 175, 130, 0.42);
  --gold-brass-glow: rgba(196, 168, 120, 0.14);
  --metal-grad-x: 48%;
  --metal-grad-y: 44%;
  --metal-grad-angle: 125deg;
  --metal-grad-size: 220%;
  --metal-grad-rot: 0deg;
  --metal-grad-scale: 1;
  --metal-base-angle: 152deg;
  --metal-vignette-x: 50%;
  --metal-vignette-y: 48%;
  --metal-silver-layer: linear-gradient(
    var(--metal-base-angle),
    #6e757f 0%,
    #a8afb8 14%,
    #dce0e6 30%,
    #b0b7c0 44%,
    #eef1f4 52%,
    #98a1ab 68%,
    #c4cad2 84%,
    #7a828c 100%
  );
  --metal-gold-layer: linear-gradient(
    var(--metal-base-angle),
    #5c4e34 0%,
    #948258 14%,
    #c8b888 30%,
    #a08858 44%,
    #ddd0a8 52%,
    #8a7448 68%,
    #b8a070 84%,
    #6a5c40 100%
  );
  --metal-silver-base: var(--metal-silver-layer);
  --metal-gold-base: var(--metal-gold-layer);
  /* Inner vignette ring — large soft falloff; center stays clear for copy */
  --metal-vignette: radial-gradient(
    ellipse 94% 92% at var(--metal-vignette-x) var(--metal-vignette-y),
    transparent 0%,
    transparent 34%,
    rgba(0, 0, 0, 0.04) 48%,
    rgba(0, 0, 0, 0.1) 62%,
    rgba(0, 0, 0, 0.18) 78%,
    rgba(0, 0, 0, 0.24) 100%
  );
  --metal-silver-border: rgba(168, 176, 188, 0.42);
  --paper-cream: var(--field-navy);
  --paper-cream-elevated: var(--field-navy-elevated);
  --paper-cream-highlight: var(--field-navy-highlight);
  --paper-cream-deep: var(--field-navy-deep);
  --paper-cream-sole: var(--field-navy-sole);
  --ui-card-surface: var(--metal-silver-base);
  --ui-card-surface-elevated: var(--metal-gold-base);
  --ui-card-ink: #161a22;
  --ui-card-ink-muted: rgba(22, 26, 34, 0.68);
  --ui-card-ink-hover: #ece4d4;
  --ui-card-ink-muted-hover: rgba(220, 208, 184, 0.82);
  --linework-stroke: rgba(176, 184, 196, 0.26);
  --linework-fill: rgba(188, 196, 208, 0.3);
  --color-bg: #1c252f;
  --color-surface: #212c38;
  --color-text: #e8ecf2;
  --color-text-muted: #aab0bc;
  --color-accent: #3d5a6c;
  --color-accent-text: var(--color-text-muted);
  --color-line: rgba(168, 182, 198, 0.18);
  --pillar-graphic: #8a9aaa;
  --pillar-creative-systems: #9a8a94;
  --pillar-fabrication: #a09088;
  --pillar-ai: #7a92a8;
  /* Structural corners / rules on dark field */
  --structural-line: rgba(168, 182, 198, 0.37);
  --structural-hairline: 1px;
  --structural-arm-v-pillar: 2.85rem;
  --structural-arm-h-pillar: 1rem;
  --structural-arm-v-featured: 2rem;
  --structural-arm-h-featured: 0.88rem;
  --structural-arm-v-card: 1.4rem;
  --structural-arm-h-card: 0.75rem;
  --structural-arm-v-hero: 2.1rem;
  --structural-arm-h-hero: 1.2rem;
  --structural-arm-v-module: 1.25rem;
  --structural-arm-h-module: 0.68rem;
  --structural-op-pillar: 0.22;
  --structural-op-featured: 0.15;
  --structural-op-case: 0.12;
  --structural-op-case-dense: 0.1;
  --structural-op-hero: 0.26;
  --structural-op-module: 0.11;
  --structural-op-modal: 0.12;
  --structural-divider: rgba(168, 182, 198, 0.14);
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --radius: 6px;
  --radius-lg: 12px;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  /* Site frame — homepage authority (72rem); all active pages share this grid */
  --site-frame-max: 72rem;
  --content-max: var(--site-frame-max);
  --home-frame-max: var(--site-frame-max);
  --home-frame-gutter: var(--space-md);
  /* Primary content alignment matches the site frame */
  --content-rail-max: var(--site-frame-max);
  /* Narrower measure for long prose inside the shared frame */
  --reading-width: 42rem;
  --reading-measure: var(--reading-width);
  /* Outer site shell: horizontal padding + max width */
  --container: min(100% - 2rem, var(--content-max));
  /*
   * Shared page-header system (homepage is visual authority).
   * Nav, hero, main, and footer share --page-hero-frame-max + --page-hero-gutter.
   */
  --page-hero-frame-max: var(--site-frame-max);
  --page-hero-gutter: var(--space-md);
  --page-hero-outer-pad-block-start: clamp(2rem, 4.5vw, 3.35rem);
  --page-hero-outer-pad-block-end: 0;
  --page-hero-content-pad-block-start: clamp(1.5rem, 3.6vw, 2.15rem);
  --page-hero-content-pad-block-end: clamp(1.15rem, 2.8vw, 1.85rem);
  --page-hero-content-pad-inline: var(--page-hero-gutter);
  --page-hero-align: center;
  --page-hero-title-font: var(--font-sans);
  --page-hero-title-size: clamp(1.12rem, 2.9vw, 1.75rem);
  --page-hero-title-weight: 500;
  --page-hero-title-tracking: 0.065em;
  --page-hero-title-leading: 1.25;
  --page-hero-title-color: var(--color-text-muted);
  --page-hero-summary-font: var(--font-sans);
  --page-hero-summary-size: clamp(1rem, 2.1vw, 1.18rem);
  --page-hero-summary-weight: 400;
  --page-hero-summary-tracking: 0.01em;
  --page-hero-summary-leading: 1.4;
  --page-hero-summary-color: var(--color-text-muted);
  --page-hero-summary-max: 38rem;
  --section-padding: var(--space-2xl);
  --section-padding-lg: var(--space-3xl);
  --nav-height: 3.5rem;
  --nav-height-scrolled: 3.5rem;
  --nav-scroll-offset: calc(var(--nav-height) + var(--space-md));
  --body-min-font: 16px;
  --touch-min: 44px;
  /* Typography scale */
  --text-h1: clamp(1.5rem, 5vw, 2.75rem);
  --text-h2: clamp(1.5rem, 4vw, 2.5rem);
  --text-h3: clamp(1.125rem, 2vw, 1.375rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  /*
   * Structural rule — centered precision hairline (nav-line vocabulary).
   * Reuse for titles & manual landmarks; never full-bleed.
   */
  --structural-rule-w: clamp(7.5rem, 18vw, 15rem);
  --structural-rule-h: 1px;
  --structural-rule-gradient: linear-gradient(
    90deg,
    transparent 0%,
    rgba(181, 158, 112, 0.1) 40%,
    rgba(196, 168, 120, 0.28) 50%,
    rgba(181, 158, 112, 0.1) 60%,
    transparent 100%
  );
  --structural-rule-opacity: 0.88;
  /* Scroll reveal + motion (calm, premium) */
  --reveal-duration: 0.68s;
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-distance: 0.65rem;
  --featured-glow: rgba(61, 90, 108, 0.1);
  --featured-glow-soft: rgba(61, 90, 108, 0.05);
  --featured-border-brass: rgba(20, 26, 32, 0.14);
  /* Shared surface tiles: pillars, featured, case study grids, modules */
  --site-card-radius: var(--radius-lg);
  --site-card-min-h: 6rem;
}

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

html {
  scroll-behavior: smooth;
  /* Single vertical scrollport: avoid overflow-x:hidden on both html and body (that pairs y→auto on both and yields double scrollbars). */
  overflow-x: hidden;
  overflow-y: auto;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  position: relative;
  font-family: var(--font-sans);
  font-size: max(var(--body-min-font), 1rem);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: visible;
  overflow-y: visible;
}

/* ---------- Drafting background: #bg-system (site-linework.js), document height, absolute behind content ---------- */
#bg-system-host {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  z-index: 0;
}

#bg-system {
  display: block;
  width: 100%;
  pointer-events: none;
  shape-rendering: geometricPrecision;
  /* Default: reading-column mask. On data-home, site-linework.js adds a scroll-linked vertical band via inline mask-image. */
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    rgba(0, 0, 0, 0.42) 18%,
    rgba(0, 0, 0, 0.28) 50%,
    rgba(0, 0, 0, 0.42) 82%,
    #000 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    rgba(0, 0, 0, 0.42) 18%,
    rgba(0, 0, 0, 0.28) 50%,
    rgba(0, 0, 0, 0.42) 82%,
    #000 100%
  );
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

html.bg-system-ready body .hero,
html.bg-system-ready body main,
html.bg-system-ready body > .footer {
  position: relative;
  z-index: 1;
}

/* Homepage: transparent main so body + drafting SVG read as one continuous field. */
html.bg-system-ready body[data-home] #main {
  background: transparent;
}

body[data-home] #bg-system-host {
  display: none;
}

html.bg-system-ready body:not([data-home]) #main {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-bg) 92%, transparent) 0%,
    var(--color-bg) 14%,
    var(--color-bg) 100%
  );
}

/* Pillar landings: shared fabrication field; accent hues only */
body[data-pillar="design"] {
  --pillar-graphic: #8a9aaa;
}
body[data-pillar="fabrication"] {
  --pillar-fabrication: #a09088;
}
body[data-pillar="automation"] {
  --pillar-ai: #7a92a8;
}
body[data-pillar="creative-systems"] {
  --pillar-creative-systems: #9a8a94;
}

/* Pillar pages use the shared site-nav system (homepage authority). */

@property --bg-density {
  syntax: '<number>';
  inherits: true;
  initial-value: 0.14;
}

@property --bg-node-opacity {
  syntax: '<number>';
  inherits: true;
  initial-value: 0.03;
}

@property --bg-grid-opacity {
  syntax: '<number>';
  inherits: true;
  initial-value: 0.06;
}

@property --bg-accent-strength {
  syntax: '<number>';
  inherits: true;
  initial-value: 0.08;
}

@property --pillar-type-scale {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

/*
 * Homepage — continuous navy field; gold linework; metallic gold module cards.
 */
body[data-home] {
  --bg-top: var(--field-navy);
  --bg-main: var(--field-navy);
  --bg-section: var(--field-navy);
  --text-primary: #e8ecf2;
  --text-secondary: #aab0bc;
  --text-muted-quiet: #8a96a8;
  --accent-gold: var(--gold-brass-light);
  --accent-gold-soft: rgba(196, 168, 120, 0.16);
  --accent-line: var(--gold-brass-border);
  --accent-blue: var(--gold-brass);
  --home-card-surface: var(--ui-card-surface);
  --home-card-pad-y: var(--space-sm);
  --home-card-pad-x: var(--space-md);
  --home-module-min-h: 8.25rem;
  --home-section-divider: rgba(181, 158, 112, 0.16);

  --color-bg: var(--bg-main);
  --color-surface: var(--bg-section);
  --color-text: var(--text-primary);
  --color-text-muted: var(--text-secondary);
  --color-line: var(--gold-brass-border);
  --color-accent: var(--gold-brass);
  --color-accent-text: var(--color-accent);
  --structural-divider: rgba(168, 182, 198, 0.14);
  --structural-line: rgba(168, 182, 198, 0.37);
  --home-brass-glow-outer: 0 4px 28px rgba(0, 0, 0, 0.32), 0 0 24px var(--gold-brass-glow);
  --home-brass-glow-text: 0 0 1px rgba(232, 224, 208, 0.9), 0 0 14px rgba(196, 168, 120, 0.28);
  --home-cta-hover-bg: var(--ui-card-surface-elevated);
  --home-cta-hover-border: var(--gold-brass-border-strong);
  --home-cta-hover-inset: 0 1px 0 rgba(212, 188, 140, 0.14);
  --home-cta-hover-shadow: var(--home-cta-hover-inset), var(--home-brass-glow-outer);
  --home-cta-secondary-hover-bg: rgba(38, 44, 58, 0.55);
  --home-cta-secondary-hover-border: var(--gold-brass-border);
  --home-cta-secondary-hover-inset: 0 1px 0 rgba(212, 188, 140, 0.1);
  --home-cta-secondary-hover-shadow: var(--home-cta-secondary-hover-inset), var(--home-brass-glow-outer);
  --bg-density: 0.14;
  --bg-node-opacity: 0.03;
  --bg-grid-opacity: 0.06;
  --bg-accent-strength: 0.08;
  /* Portrait → "My Four Pillars" → cards */
  --home-rhythm-hero-pillars: 1.5rem;
  --home-rhythm-pillars-heading-cards: 1rem;
  --home-rhythm-around-pillars: clamp(1.35rem, 2.6vw, 2rem);
  --home-rhythm-pillars-skills: var(--home-rhythm-around-pillars);
  --home-rhythm-skills-map: clamp(0.9rem, 1.75vw, 1.35rem);
  --home-rhythm-map-supporting: clamp(0.9rem, 1.75vw, 1.35rem);
  --home-rhythm-supporting-closing: clamp(1.35rem, 2.6vw, 2rem);

  color: var(--text-primary);
  background-color: var(--bg-main);
  background-image: none;
}

body[data-home]::before,
body[data-home]::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body[data-home]::before {
  z-index: 0;
  background:
    radial-gradient(circle at 50% -8%, rgba(68, 94, 132, calc(var(--bg-accent-strength) * 0.52)) 0%, transparent 38%),
    radial-gradient(ellipse 130% 70% at 50% 108%, rgba(6, 10, 16, 0.28) 0%, transparent 52%),
    linear-gradient(180deg, #08111b 0%, #0a131d 54%, #0a121c 100%);
}

body[data-home]::after {
  z-index: 0;
  opacity: 0.74;
  background-image:
    radial-gradient(circle at 50% 12%, rgba(86, 108, 140, calc(var(--bg-accent-strength) * 0.22)) 0%, transparent 34%),
    radial-gradient(circle, rgba(168, 188, 212, calc(var(--bg-node-opacity) * 0.65)) 0 1.2px, transparent 1.8px),
    radial-gradient(circle, rgba(196, 168, 120, calc(var(--bg-accent-strength) * 0.22)) 0 1.1px, transparent 1.7px),
    repeating-linear-gradient(90deg, rgba(122, 144, 172, calc(var(--bg-grid-opacity) * 0.38)) 0 1px, transparent 1px calc(108px - 42px * var(--bg-density)));
  background-size:
    100% 100%,
    calc(172px - 64px * var(--bg-density)) calc(150px - 48px * var(--bg-density)),
    calc(240px - 84px * var(--bg-density)) calc(210px - 72px * var(--bg-density)),
    100% 100%;
  background-position:
    center top,
    8% 14%,
    70% 30%,
    center top;
  background-repeat: no-repeat, repeat, repeat, no-repeat;
}

@media (min-width: 48em) {
  body[data-home] {
    --home-card-pad-y: var(--space-md);
    --home-card-pad-x: calc(var(--space-md) + var(--space-xs));
    --home-module-min-h: 9rem;
  }
}

/* Text glow on plain links; homepage module cards use the same box shadow as hero CTAs (no label text-shadow) */
body[data-home] .nav-links a:hover,
body[data-home] .nav-links a:focus-visible,
body[data-home] .nav-menu a:hover,
body[data-home] .nav-menu a:focus-visible {
  text-shadow: var(--home-brass-glow-text);
}
body[data-home] .footer a {
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
body[data-home] .footer a:hover,
body[data-home] .footer a:focus-visible {
  text-shadow: var(--home-brass-glow-text);
}
body[data-home] #main .philosophy-narrative a,
body[data-home] #main .philosophy-list a,
body[data-home] #main .philosophy-closing a {
  transition: color 0.2s ease, text-decoration-color 0.2s ease, text-shadow 0.2s ease;
}
body[data-home] #main .philosophy-narrative a:hover,
body[data-home] #main .philosophy-narrative a:focus-visible,
body[data-home] #main .philosophy-list a:hover,
body[data-home] #main .philosophy-list a:focus-visible,
body[data-home] #main .philosophy-closing a:hover,
body[data-home] #main .philosophy-closing a:focus-visible {
  text-shadow: var(--home-brass-glow-text);
}
/* Homepage: hero concept chips — subtle hover, no brass glow */
body[data-home] a.hero-credibility-chip {
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    background 0.2s ease;
}
body[data-home] a.hero-credibility-chip:hover,
body[data-home] a.hero-credibility-chip:focus-visible {
  text-shadow: none;
  box-shadow: none;
}
body[data-home] #main .method-stage__panel a {
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
body[data-home] #main .method-stage__panel a:hover,
body[data-home] #main .method-stage__panel a:focus-visible {
  text-shadow: var(--home-brass-glow-text);
}

body[data-home] .skip-link {
  background: var(--accent-blue);
  color: var(--paper-cream-highlight);
  font-weight: 600;
}
body[data-home] .skip-link:focus {
  outline-color: var(--text-primary);
}

body[data-home] #main .case-studies {
  border-top: none;
}
/* Continuous field: no full-width rules between homepage bands (drafting + titles carry rhythm). */
body[data-home] #main > .section {
  background-color: transparent;
  border-top: none;
  padding-top: calc((var(--space-md) + var(--space-xs)) * 0.64);
  padding-bottom: calc((var(--space-md) + var(--space-xs)) * 0.64);
}
@media (min-width: 48em) {
  body[data-home] #main > .section {
    padding-top: calc((var(--space-lg) + var(--space-sm)) * 0.62);
    padding-bottom: calc((var(--space-lg) + var(--space-sm)) * 0.62);
  }
}
/* First section after hero uses --home-rhythm-hero-pillars (see pillars band) */
body[data-home] #main > .section:first-of-type {
  padding-top: var(--home-rhythm-hero-pillars);
}
/* Homepage bands: same vocabulary as hero (diffused linear haze only) — unique angles per section, no repeating grids */
body[data-home] #main > .section.pillars {
  position: relative;
  isolation: isolate;
}
body[data-home] #main > .section.pillars::before {
  display: none;
}
body[data-home] #main > .section.pillars > .container {
  position: relative;
  z-index: 1;
}

body[data-home] #main > .section.pillars {
  scroll-margin-top: var(--nav-scroll-offset);
}

body[data-home] #main > .section.supporting-capabilities,
body[data-home] #main > .section.home-skills {
  position: relative;
  isolation: isolate;
}
body[data-home] #main > .section.supporting-capabilities::before,
body[data-home] #main > .section.home-skills::before {
  display: none;
}
body[data-home] #main > .section.supporting-capabilities > .container,
body[data-home] #main > .section.home-skills > .container {
  position: relative;
  z-index: 1;
}

/* Homepage vertical rhythm — measured steps between system bands */
body[data-home] #main > .section.pillars {
  /* Visual gap only — anchor offset stays on scroll-margin-top */
  padding-top: var(--home-rhythm-hero-pillars);
  padding-bottom: var(--home-rhythm-pillars-skills);
}
body[data-home] #main > .section.home-skills {
  padding-top: 0;
  padding-bottom: var(--home-rhythm-skills-map);
}
body[data-home] #main > .section.supporting-capabilities {
  padding-top: 0;
  padding-bottom: var(--home-rhythm-supporting-closing);
}
body[data-home] #main > .section.closing {
  padding-top: 0;
  padding-bottom: calc(var(--space-2xl) + var(--space-sm));
}

/* One content rail: pillars, capabilities, map, supporting, work-with-me */
body[data-home] #main > .section.pillars > .container,
body[data-home] #main > .section.home-skills > .container,
body[data-home] #main > .section.supporting-capabilities > .container,
body[data-home] #main > .section.closing > .container {
  width: min(100% - 2rem, var(--home-frame-max));
  max-width: var(--home-frame-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
  box-sizing: border-box;
}

body[data-home] #home-skills,
body[data-home] .home-skills-box,
body[data-home] #home-system-map,
body[data-home] #home-system-map .system-arch-body--home,
body[data-home] #home-system-map .system-arch-diagram--home-expanded,
body[data-home] #main .section.supporting-capabilities .supporting-capabilities-card-wrap,
body[data-home] .closing-inner,
body[data-home] .closing-grid {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

body[data-home] #main > .section.closing {
  position: relative;
  isolation: isolate;
}
body[data-home] #main > .section.closing::before {
  display: none;
}
body[data-home] #main > .section.closing > .container {
  position: relative;
  z-index: 1;
}

body[data-home] #main .section-title {
  color: var(--text-primary);
  letter-spacing: 0.078em;
}
body[data-home] #main .section-intro {
  color: var(--text-secondary);
  margin-top: 0;
  margin-bottom: calc((var(--space-lg) + var(--space-xs)) * 0.82);
}
body[data-home] #main > .section.pillars > .container > .section-intro,
body[data-home] #main > .section.supporting-capabilities > .container > .section-title,
body[data-home] #main > .section.supporting-capabilities > .container > .section-intro {
  display: none;
}
/* Match homepage .hero-title (“Creative Production Designer”), ~88% size */
body[data-home] #main > .section.pillars > .container > #pillars-heading.section-title {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-inline: auto;
  margin-block: 0;
  padding-inline: 0;
  padding-inline-start: 0.065em;
  text-align: center;
  float: none;
  position: static;
  inset: auto;
  left: auto;
  right: auto;
  font-family: var(--font-sans);
  font-size: clamp(0.99rem, 2.55vw, 1.54rem);
  font-weight: 500;
  letter-spacing: 0.065em;
  word-spacing: 0.04em;
  text-transform: none;
  color: var(--text-secondary);
  line-height: 1.25;
}
body[data-home] #main > .section.pillars > .container > #pillars-heading.section-title > .home-flat-type {
  display: inline;
  transform: none;
  margin-block: 0;
  font: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  line-height: inherit;
  color: inherit;
  text-transform: inherit;
}
body[data-home] #main > .section.pillars > .container > #pillars-heading.section-title::after {
  margin: 0.35rem auto var(--home-rhythm-pillars-heading-cards);
  margin-inline: auto;
}
body[data-home] #main > .section.pillars > .container > #home-system-map,
body[data-home] #main > .section.home-skills > .container > #home-skills,
body[data-home] #main > .section.supporting-capabilities > .container > .supporting-capabilities-card-wrap {
  margin-top: 0;
}
.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;
}
/* Section hierarchy: Systems stays hero-scale; leadership & philosophy step down */
body[data-home] #main > .section.supporting-capabilities > .container > .section-title {
  font-size: clamp(1.15rem, 3.2vw, 2.05rem);
  letter-spacing: 0.072em;
}
body[data-home] #main > .section.supporting-capabilities > .container > .section-title::after {
  margin-bottom: calc(var(--space-md) * 0.85);
}

/* Homepage card modules: shared flex shell; CTAs align to card foot */
body[data-home] #main .home-module {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  padding: var(--home-card-pad-y) var(--home-card-pad-x);
  box-sizing: border-box;
}
body[data-home] #main .home-module__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  flex: 1 1 auto;
  min-height: 0;
}
body[data-home] #main .home-module__footer {
  flex-shrink: 0;
  margin-top: auto;
  padding-top: var(--space-xs);
}
body[data-home] #main .home-module__body .featured-card-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0.055em;
  line-height: 1.28;
  font-size: clamp(0.98rem, 1.85vw, 1.12rem);
}
body[data-home] #main .home-module__body .pillar-proof,
body[data-home] #main .home-module__body .featured-card-subtitle,
body[data-home] #main .home-module__body .featured-card-outcome {
  margin: 0;
}
body[data-home] #main .home-module__body .featured-card-pillar {
  margin: 0;
  color: var(--ui-card-ink-muted);
}
/* Gold module tiles: warm ink on cards, not field text */
body[data-home] #main .pillar-card .home-module,
body[data-home] #main .featured-card .home-module {
  color: inherit;
}
body[data-home] #main .pillar-card .home-module__body .pillar-proof,
body[data-home] #main .pillar-card .home-module__body .featured-card-subtitle,
body[data-home] #main .featured-card .home-module__body .featured-card-subtitle,
body[data-home] #main .featured-card .home-module__body .featured-card-outcome {
  color: var(--ui-card-ink-muted);
}
body[data-home] #main .featured-card .home-module__body .featured-card-title {
  color: var(--ui-card-ink);
}
body[data-home] #main .featured-card .featured-card-cta {
  color: var(--ui-card-ink-muted);
}

/* Homepage cards: metallic silver/gold (see .pillar-card / .featured-card metal rules) */
body[data-home] #main .pillar-card,
body[data-home] #main .featured-card {
  transition:
    border-color var(--transition),
    background var(--transition),
    box-shadow var(--transition),
    color var(--transition);
}
body[data-home] #main .section.leadership .featured-card {
  cursor: pointer;
}
/* Supporting Capabilities + skills connector layer */
body[data-home] .supporting-capabilities-panel {
  display: grid;
  gap: clamp(0.9rem, 2.2vw, 1.25rem);
  width: 100%;
  padding: clamp(1rem, 2.4vw, 1.5rem);
  border: 1px solid rgba(168, 182, 198, 0.18);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(22, 30, 42, 0.82) 0%, rgba(14, 21, 31, 0.82) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 44px rgba(0, 0, 0, 0.2);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
body[data-home] .supporting-capabilities-panel__primary {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(15rem, 20rem);
  gap: clamp(1rem, 2.4vw, 1.8rem);
  align-items: center;
  text-decoration: none;
}
body[data-home] .supporting-capabilities-panel__copy {
  display: grid;
  gap: clamp(0.45rem, 1vw, 0.68rem);
  align-content: start;
}
body[data-home] .supporting-capabilities-panel__kicker {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted-quiet);
}
body[data-home] .supporting-capabilities-panel__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.04;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}
body[data-home] .supporting-capabilities-panel__summary {
  margin: 0;
  max-width: 34rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
body[data-home] .supporting-capabilities-panel__cta {
  color: var(--gold-brass-light);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body[data-home] .supporting-capabilities-panel__hero--scene {
  position: relative;
  transition: transform var(--transition);
}
body[data-home] .supporting-capabilities-panel__hero {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: clamp(11.5rem, 22vw, 13.5rem);
  padding: 0;
  border-radius: 10px;
  overflow: visible;
  text-decoration: none;
  box-sizing: border-box;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none;
  color: var(--text-primary);
  transition: transform var(--transition);
}
body[data-home] .supporting-capabilities-panel__hero--scene .home-scene {
  width: min(100%, 18rem);
  max-width: 18rem;
}
body[data-home] .supporting-capabilities-modules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--home-frame-gutter);
  align-items: stretch;
}
body[data-home] .supporting-capability-module {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.72rem;
  height: 100%;
  min-height: 100%;
  padding: clamp(0.72rem, 1.8vw, 0.95rem);
  border-radius: 10px;
  border: 1px solid rgba(168, 182, 198, 0.16);
  background: rgba(18, 26, 37, 0.72);
  text-decoration: none;
  transition:
    border-color var(--transition),
    background var(--transition),
    box-shadow var(--transition),
    transform var(--transition),
    opacity var(--transition);
}
body[data-home] .supporting-capability-module__scene-wrap {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
body[data-home] .supporting-capability-module__scene-wrap .home-scene {
  width: 100%;
  max-width: 100%;
}
body[data-home] .supporting-capability-module__title {
  display: block;
  margin: 0;
  margin-top: auto;
  font-family: var(--font-serif);
  font-size: clamp(0.92rem, 1.55vw, 1.06rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}
body[data-home] .supporting-capabilities-panel__primary:hover .supporting-capabilities-panel__hero,
body[data-home] .supporting-capabilities-panel__primary:focus-visible .supporting-capabilities-panel__hero {
  transform: translateY(-1px);
}
body[data-home] .supporting-capabilities-panel.is-sys-share-active {
  border-color: rgba(126, 156, 192, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 44px rgba(0, 0, 0, 0.2), 0 0 24px rgba(126, 156, 192, 0.08);
}
body[data-home] .supporting-capability-module.is-sys-share-active {
  border-color: rgba(126, 156, 192, 0.28);
  background: rgba(25, 36, 49, 0.84);
  box-shadow: 0 0 0 1px rgba(126, 156, 192, 0.1), 0 0 18px rgba(126, 156, 192, 0.09);
  opacity: 1;
}
body[data-home] .supporting-capability-module:hover,
body[data-home] .supporting-capability-module:focus-visible {
  border-color: rgba(196, 168, 120, 0.34);
  background: rgba(30, 40, 52, 0.88);
  box-shadow: 0 0 0 1px rgba(196, 168, 120, 0.12), 0 0 24px rgba(196, 168, 120, 0.12);
  transform: translateY(-1px);
  opacity: 1;
}
body[data-home] .supporting-capabilities-panel:has(.supporting-capability-module.is-sys-share-active) .supporting-capability-module:not(.is-sys-share-active),
body[data-home] .home-skills-box:has(.home-skill-chip.is-sys-share-active) .home-skill-chip:not(.is-sys-share-active) {
  opacity: 0.58;
}
body[data-home] .home-skills-box {
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.1rem);
  padding: clamp(0.9rem, 2vw, 1.15rem);
  border: 1px solid rgba(168, 182, 198, 0.11);
  border-radius: 14px;
  background: rgba(11, 18, 28, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
body[data-home] .home-skills-box__header {
  display: grid;
  gap: 0.28rem;
  justify-items: center;
  text-align: center;
}
body[data-home] .home-skills-box__kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted-quiet);
}
body[data-home] .home-skills-box__summary {
  margin: 0;
  color: var(--text-secondary);
  max-width: 36rem;
}
body[data-home] .home-skills-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
body[data-home] .home-skill-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 2.35rem;
  padding: 0.38rem 0.55rem;
  border-radius: 9px;
  border: 1px solid rgba(168, 182, 198, 0.18);
  background: rgba(20, 30, 44, 0.56);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  opacity: 0.88;
  transition:
    border-color var(--transition),
    color var(--transition),
    background var(--transition),
    box-shadow var(--transition),
    opacity var(--transition),
    transform var(--transition);
}
body[data-home] .home-skill-chip:hover,
body[data-home] .home-skill-chip:focus-visible,
body[data-home] .home-skill-chip.is-sys-share-active {
  opacity: 1;
}
body[data-home] .home-skill-chip.is-sys-share-active {
  color: #d9e3ef;
  border-color: rgba(126, 156, 192, 0.34);
  background: rgba(30, 41, 56, 0.82);
  box-shadow: 0 0 0 1px rgba(126, 156, 192, 0.12), 0 0 18px rgba(126, 156, 192, 0.12);
}
body[data-home] .home-skill-chip:hover,
body[data-home] .home-skill-chip:focus-visible {
  color: var(--gold-brass-light);
  border-color: rgba(196, 168, 120, 0.42);
  background: rgba(34, 44, 58, 0.86);
  box-shadow: 0 0 0 1px rgba(196, 168, 120, 0.14), 0 0 24px rgba(196, 168, 120, 0.14);
  transform: translateY(-1px);
}
body[data-home] .home-skills-box:has(.home-skill-chip.is-sys-share-active) {
  border-color: rgba(126, 156, 192, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 0 16px rgba(126, 156, 192, 0.05);
}
@media (max-width: 60em) {
  body[data-home] .supporting-capabilities-panel__primary {
    grid-template-columns: 1fr;
  }
  body[data-home] .supporting-capabilities-panel__hero--scene {
    order: -1;
  }
  body[data-home] .supporting-capabilities-modules,
  body[data-home] .home-skills-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 40em) {
  body[data-home] .supporting-capabilities-modules,
  body[data-home] .home-skills-grid {
    grid-template-columns: 1fr;
  }
}
body[data-home] #main .section.pillars .pillar-card--scene > .card-metal-texture {
  display: none;
}
body[data-home] #main .section.pillars .pillar-card--scene:not(.unified-pillar-card):hover,
body[data-home] #main .section.pillars .pillar-card--scene:not(.unified-pillar-card):focus-visible {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent;
  box-shadow: none;
}
body[data-home] .pillar-card--scene::before {
  display: none;
}
body[data-home] .pillar-scene,
body[data-home] .home-scene {
  position: relative;
  width: 100%;
  max-width: 12.5rem;
  align-self: center;
  aspect-ratio: 180 / 160;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--scene-border, rgba(168, 182, 198, 0.22));
  background: var(--scene-bg, #1a222c);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    background var(--transition);
}
body[data-home] .pillar-scene__svg,
body[data-home] .home-scene__svg {
  display: block;
  width: 100%;
  height: 100%;
}
body[data-home] #main .section.pillars .pillar-card--scene:not(.unified-pillar-card) .home-scene,
body[data-home] #main .section.pillars .pillar-card--scene:not(.unified-pillar-card) .pillar-scene {
  max-width: none;
  width: 100%;
  align-self: stretch;
}
body[data-home] .scene-label-layer {
  pointer-events: none;
}
body[data-home] .scene-label-word,
body[data-home] .scene-label-rule {
  transition: fill var(--transition), stroke var(--transition), filter var(--transition), opacity var(--transition);
}
body[data-home] .scene-label-word {
  fill: color-mix(in srgb, var(--text-primary) 80%, var(--scene-title-active, var(--text-primary)) 20%);
  font-family: var(--font-sans);
  font-size: 8.8px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  paint-order: stroke fill;
  stroke: rgba(6, 11, 18, 0.32);
  stroke-width: 0.7px;
  filter: drop-shadow(0 0 calc(2px + 8px * var(--scene-label-glow, 0)) rgba(196, 168, 120, 0.24));
}
body[data-home] .scene-label-layer--production-design .scene-label-word-stroke {
  fill: none;
  stroke: #000000;
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: normal;
  font-family: var(--font-sans);
  font-size: 8.8px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}
body[data-home] .scene-label-layer--production-design .scene-label-word-stroke.scene-label-word--1 {
  letter-spacing: 0.15em;
}
body[data-home] .scene-label-layer--production-design .scene-label-word {
  fill: #eef6ff;
  stroke: none;
  letter-spacing: 0.12em;
  filter:
    drop-shadow(0 2px 3px rgba(0, 0, 0, calc(0.42 * var(--scene-label-shadow, 0))))
    drop-shadow(0 0 calc(2px + 9px * var(--scene-label-glow, 0)) rgba(49, 168, 255, 0.34));
}
body[data-home] .scene-label-layer--production-design .scene-label-word--1 {
  letter-spacing: 0.15em;
}
body[data-home] .pillar-card--scene[data-home-scene="production-design"]:hover .scene-label-word,
body[data-home] .pillar-card--scene[data-home-scene="production-design"]:focus-visible .scene-label-word,
body[data-home] .pillar-card--scene[data-home-scene="production-design"].is-scene-active .scene-label-word,
body[data-home] .pillar-card--scene.pillar-graphic:hover .scene-label-word,
body[data-home] .pillar-card--scene.pillar-graphic:focus-visible .scene-label-word,
body[data-home] .pillar-card--scene.pillar-graphic.is-scene-active .scene-label-word {
  fill: #f4fbff;
}
body[data-home] .scene-label-rule {
  stroke: color-mix(in srgb, var(--scene-title-active, var(--accent-gold)) 75%, transparent);
  stroke-width: 1;
  filter: drop-shadow(0 0 calc(2px + 8px * var(--scene-label-glow, 0)) rgba(196, 168, 120, 0.22));
}
body[data-home] .scene-label-layer--production-design .scene-label-rule {
  filter:
    drop-shadow(0 2px 3px rgba(0, 0, 0, calc(0.38 * var(--scene-label-shadow, 0))))
    drop-shadow(0 0 calc(2px + 9px * var(--scene-label-glow, 0)) rgba(49, 168, 255, 0.28));
}
body[data-home] .pillar-card--scene.is-scene-active .pillar-scene,
body[data-home] .pillar-card--scene:hover .pillar-scene,
body[data-home] .pillar-card--scene:focus-visible .pillar-scene,
body[data-home] .pillar-card--scene.is-sys-share-active .pillar-scene,
body[data-home] .pillar-card--scene.is-scene-active .home-scene,
body[data-home] .pillar-card--scene:hover .home-scene,
body[data-home] .pillar-card--scene:focus-visible .home-scene,
body[data-home] .pillar-card--scene.is-sys-share-active .home-scene,
body[data-home] .leadership-card--scene.is-scene-active .home-scene,
body[data-home] .leadership-card--scene:hover .home-scene,
body[data-home] .leadership-card--scene:focus-visible .home-scene,
body[data-home] .supporting-capabilities-panel__hero--scene.is-scene-active .home-scene,
body[data-home] .supporting-capabilities-panel__hero--scene:hover .home-scene,
body[data-home] .supporting-capabilities-panel__hero--scene:focus-visible .home-scene,
body[data-home] .supporting-capability-module--scene.is-scene-active .home-scene,
body[data-home] .supporting-capability-module--scene:hover .home-scene,
body[data-home] .supporting-capability-module--scene:focus-visible .home-scene,
body[data-home] .supporting-capability-module--scene.is-sys-share-active .home-scene {
  border-color: var(--scene-border-active, rgba(198, 175, 130, 0.45));
  box-shadow:
    0 0 0 1px var(--scene-glow, rgba(198, 175, 130, 0.12)),
    0 4px 18px rgba(0, 0, 0, 0.32);
}
body[data-home] .pillar-card--scene:hover .scene-label-word,
body[data-home] .pillar-card--scene:focus-visible .scene-label-word,
body[data-home] .pillar-card--scene.is-scene-active .scene-label-word,
body[data-home] .pillar-card--scene.is-sys-share-active .scene-label-word {
  fill: var(--scene-title-active, var(--gold-brass-light));
}
body[data-home] .pillar-card--scene:hover .scene-label-rule,
body[data-home] .pillar-card--scene:focus-visible .scene-label-rule,
body[data-home] .pillar-card--scene.is-scene-active .scene-label-rule,
body[data-home] .pillar-card--scene.is-sys-share-active .scene-label-rule {
  stroke: var(--scene-title-active, var(--gold-brass-light));
}
/* Per-scene color schemes — pillars */
body[data-home] .pillar-card--scene[data-home-scene="production-design"],
body[data-home] .pillar-card--scene.pillar-graphic {
  --scene-bg: #2b2b2b;
  --scene-border: rgba(49, 168, 255, 0.28);
  --scene-border-active: rgba(49, 168, 255, 0.62);
  --scene-glow: rgba(49, 168, 255, 0.18);
  --scene-title-active: #6bc4ff;
}
body[data-home] .pillar-card--scene[data-home-scene="creative-systems"],
body[data-home] .pillar-card--scene.pillar-creative-systems {
  --scene-bg: #241e2e;
  --scene-border: rgba(196, 168, 184, 0.32);
  --scene-border-active: rgba(212, 184, 200, 0.58);
  --scene-glow: rgba(196, 168, 184, 0.16);
  --scene-title-active: #d4b8c8;
}
body[data-home] .pillar-card--scene[data-home-scene="fabrication"],
body[data-home] .pillar-card--scene.pillar-fabrication {
  --scene-bg: #2a221c;
  --scene-border: rgba(200, 168, 136, 0.32);
  --scene-border-active: rgba(224, 192, 160, 0.58);
  --scene-glow: rgba(200, 168, 136, 0.16);
  --scene-title-active: #e0c0a0;
}
body[data-home] .pillar-card--scene[data-home-scene="automation"],
body[data-home] .pillar-card--scene.pillar-ai {
  --scene-bg: #182430;
  --scene-border: rgba(122, 184, 216, 0.3);
  --scene-border-active: rgba(138, 200, 232, 0.58);
  --scene-glow: rgba(122, 184, 216, 0.16);
  --scene-title-active: #8ac8e8;
}
/* Per-scene color schemes — leadership */
body[data-home] .leadership-card--scene[data-home-scene="knowledge-transfer"],
body[data-home] .supporting-capability-module--scene[data-home-scene="knowledge-transfer"] {
  --scene-bg: #1e242c;
  --scene-border: rgba(168, 184, 200, 0.32);
  --scene-border-active: rgba(184, 200, 216, 0.58);
  --scene-glow: rgba(168, 184, 200, 0.16);
  --scene-title-active: #b8c8d8;
}
body[data-home] .leadership-card--scene[data-home-scene="artist-development"],
body[data-home] .supporting-capability-module--scene[data-home-scene="artist-development"] {
  --scene-bg: #2a1e28;
  --scene-border: rgba(200, 168, 120, 0.32);
  --scene-border-active: rgba(216, 184, 136, 0.58);
  --scene-glow: rgba(200, 168, 120, 0.16);
  --scene-title-active: #d8b888;
}
body[data-home] .leadership-card--scene[data-home-scene="governance"],
body[data-home] .supporting-capability-module--scene[data-home-scene="governance"] {
  --scene-bg: #221e1a;
  --scene-border: rgba(198, 175, 130, 0.32);
  --scene-border-active: rgba(220, 200, 160, 0.58);
  --scene-glow: rgba(198, 175, 130, 0.16);
  --scene-title-active: #dcc8a0;
}
body[data-home] .supporting-capabilities-panel__hero--scene[data-home-scene="supporting-capabilities"] {
  --scene-bg: #20252a;
  --scene-border: rgba(184, 192, 198, 0.32);
  --scene-border-active: rgba(216, 200, 170, 0.58);
  --scene-glow: rgba(216, 200, 170, 0.16);
  --scene-title-active: #d8c8aa;
}
body[data-home] .pillar-card--scene .pillar-card-title {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 0.25rem;
  font-family: var(--font-serif);
  font-size: clamp(0.8125rem, 1.45vw, 0.9375rem);
  font-weight: 400;
  line-height: 1.38;
  letter-spacing: 0.045em;
  text-align: center;
}
body[data-home] .pillar-card--scene .pillar-card-title__text {
  display: inline-block;
  max-width: 100%;
  text-align: center;
  vertical-align: middle;
}
body[data-home] #main .section.leadership .leadership-card--scene {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
  width: 100%;
  max-width: 12.5rem;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  overflow: visible;
  text-decoration: none;
  box-sizing: border-box;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none;
  color: var(--text-primary);
  gap: var(--space-sm);
}
body[data-home] #main .section.leadership .leadership-card--scene > .card-metal-texture {
  display: none;
}
body[data-home] #main .section.leadership .leadership-card--scene:hover,
body[data-home] #main .section.leadership .leadership-card--scene:focus-visible {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent;
  box-shadow: none;
  transform: none;
}
body[data-home] .leadership-card--scene::before {
  display: none;
}
body[data-home] .leadership-card--scene .leadership-card-title {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 0.25rem;
  font-family: var(--font-serif);
  font-size: clamp(0.8125rem, 1.45vw, 0.9375rem);
  font-weight: 400;
  line-height: 1.38;
  letter-spacing: 0.045em;
  text-align: center;
}
body[data-home] .leadership-card--scene .leadership-card-title__text {
  display: inline-block;
  max-width: 100%;
  text-align: center;
  vertical-align: middle;
}
body[data-home] #main .section.leadership .leadership-card--scene:focus-visible {
  outline: 1px solid var(--accent-gold);
  outline-offset: 4px;
  border-radius: 6px;
}
/* Homepage module cards — hover: gold metallic + shifted overlay (no lift) */
body[data-home] #main .section.pillars .pillar-card:hover,
body[data-home] #main .section.pillars .pillar-card:focus-visible,
body[data-home] #main .section.leadership .featured-card:hover,
body[data-home] #main .section.leadership .featured-card:focus-within {
  transform: none;
}
body[data-home] .section.leadership .featured-card-pillar,
body[data-home] .section.leadership .featured-card-title,
body[data-home] .section.leadership .featured-card-cta {
  transition: color var(--transition);
}
body[data-home] #main .section.leadership .leadership-card .featured-card-pillar {
  color: var(--ui-card-ink-muted);
}
body[data-home] #main .section.leadership .leadership-card .featured-card-title {
  color: var(--ui-card-ink);
}
body[data-home] #main .section.leadership .leadership-card .featured-card-cta {
  color: var(--ui-card-ink-muted);
}
body[data-home] .section.leadership .featured-card-link:hover .featured-card-pillar,
body[data-home] .section.leadership .featured-card-link:focus-visible .featured-card-pillar {
  color: #5a4838;
  text-shadow: none;
}
body[data-home] .section.leadership .featured-card-link:hover .featured-card-title,
body[data-home] .section.leadership .featured-card-link:focus-visible .featured-card-title {
  color: var(--ui-card-ink);
  text-shadow: none;
}
body[data-home] .section.leadership .featured-card-link:hover .featured-card-cta,
body[data-home] .section.leadership .featured-card-link:focus-visible .featured-card-cta {
  color: #4a3820;
  text-shadow: none;
}
body[data-home] #main .section.pillars .pillar-card--scene:focus-visible {
  outline: 1px solid var(--accent-gold);
  outline-offset: 4px;
  border-radius: 6px;
}
body[data-home] .supporting-capabilities-panel__hero--scene:focus-visible,
body[data-home] .supporting-capability-module--scene:focus-visible {
  outline: 1px solid var(--accent-gold);
  outline-offset: 4px;
  border-radius: 6px;
}
body[data-home] #main .section.leadership .featured-card-link:focus-visible {
  outline: 1px solid var(--accent-gold);
  outline-offset: 3px;
  border-radius: 2px;
}
body[data-home] .section.leadership .featured-card-link {
  padding: 0;
}
body[data-home] #main .section.leadership .leadership-card .home-module__body {
  align-items: center;
  text-align: center;
}
body[data-home] #main .section.leadership .leadership-card .home-module__footer {
  align-self: center;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  body[data-home] .pillar-scene,
  body[data-home] .home-scene {
    transition: none;
  }
}
@keyframes pillar-scene-idle-pulse {
  0%, 100% { opacity: 0.88; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  body[data-home] .pillar-scene .scene-silhouette,
  body[data-home] .home-scene .scene-silhouette {
    animation: pillar-scene-idle-pulse 4s ease-in-out infinite;
  }
  body[data-home] .pillar-scene .scene-led,
  body[data-home] .home-scene .scene-led {
    animation: pillar-scene-idle-pulse 3s ease-in-out infinite;
  }
  body[data-home] .pillar-card--scene.is-scene-active .scene-silhouette,
  body[data-home] .pillar-card--scene.is-scene-active .scene-led,
  body[data-home] .leadership-card--scene.is-scene-active .scene-silhouette,
  body[data-home] .leadership-card--scene.is-scene-active .scene-led,
  body[data-home] .supporting-capabilities-panel__hero--scene.is-scene-active .scene-silhouette,
  body[data-home] .supporting-capabilities-panel__hero--scene.is-scene-active .scene-led,
  body[data-home] .supporting-capability-module--scene.is-scene-active .scene-silhouette,
  body[data-home] .supporting-capability-module--scene.is-scene-active .scene-led {
    animation: none;
  }
}
body[data-home] #main .section.leadership .leadership-card .featured-card-title {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
}
body[data-home] #main .section.leadership .leadership-card .featured-card-pillar {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body[data-home] #main .featured-card {
  display: flex;
  flex-direction: column;
}
body[data-home] #main .featured-card-link {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
/* Philosophy: list + method stages match card language */
body[data-home] #main .philosophy-list li {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
body[data-home] #main .philosophy .method-stage {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid rgba(181, 158, 112, 0.14);
}
body[data-home] #main .philosophy .method-stages .method-stage:last-of-type {
  border-bottom: 0;
}
body[data-home] #main .philosophy .method-stage__button:hover,
body[data-home] #main .philosophy .method-stage__button:focus-visible {
  background: rgba(38, 44, 58, 0.45);
  box-shadow: var(--home-brass-glow-outer);
}
body[data-home] #main .philosophy .method-stages::before {
  left: 11px;
  top: 0.35rem;
  bottom: 0.35rem;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(181, 158, 112, 0.22) 12%,
    rgba(181, 158, 112, 0.22) 88%,
    transparent 100%
  );
  width: 1px;
  opacity: 0.9;
}
body[data-home] #main .philosophy .method-strip__heading {
  color: var(--text-primary);
}

/* Minimal warm strokes on inline CTAs */
body[data-home] .leadership-cta a {
  color: var(--gold-brass);
  text-underline-offset: 0.22em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease, text-shadow 0.2s ease;
}
body[data-home] .leadership-cta a:hover,
body[data-home] .leadership-cta a:focus-visible {
  color: var(--gold-brass-light);
  text-decoration-color: rgba(181, 158, 112, 0.45);
  text-shadow: var(--home-brass-glow-text);
}
body[data-home] #main .philosophy-narrative {
  color: var(--text-muted-quiet);
}
body[data-home] .leadership-tieback {
  color: var(--text-muted-quiet);
}
body[data-home] #main .philosophy-closing {
  color: var(--text-secondary);
}
/* Systems Philosophy: breathing room before process (no filled panel) */
body[data-home] #main .philosophy-narrative {
  margin-bottom: 0;
  padding-bottom: 0;
}
/* How I improve production systems: line-based stack — no card container */
body[data-home] #main .philosophy .method-strip {
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body[data-home] #main .philosophy .method-strip__intro {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(181, 158, 112, 0.14);
}
body[data-home] #main .philosophy .method-stages {
  gap: 0;
  padding-left: calc(var(--space-md) + 8px);
  margin-top: var(--space-sm);
}
body[data-home] #main .philosophy .method-stage__button {
  border-radius: 0;
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  transition:
    background 0.3s var(--reveal-ease, ease),
    box-shadow 0.3s var(--reveal-ease, ease);
}
body[data-home] #main .philosophy .method-stage.is-open .method-stage__button {
  background: rgba(38, 44, 58, 0.4);
}
body[data-home] #main .philosophy .method-stage.is-open {
  border-bottom-color: rgba(181, 158, 112, 0.18);
  box-shadow: none;
}
body[data-home] #main .philosophy .method-stage::before {
  left: 11px;
  top: 1.15rem;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  background: transparent;
  border: 1px solid rgba(181, 158, 112, 0.4);
  box-shadow: none;
}
body[data-home] #main .philosophy .method-stage.is-open::before {
  border-color: rgba(198, 175, 130, 0.55);
  background: rgba(181, 158, 112, 0.12);
}

/* Homepage: light stagger on card grids after section reveals (motion OK only) */
@keyframes home-grid-rise {
  from {
    opacity: 0;
    transform: translateY(0.55rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: no-preference) {
  body[data-home] .section:not(.is-visible) #home-system-map .unified-pillar-card,
  body[data-home] .section:not(.is-visible) .leadership-grid > .leadership-card,
  body[data-home] .section:not(.is-visible) .leadership-grid > .leadership-card--scene {
    opacity: 0;
    transform: translateY(0.55rem);
  }
  body[data-home] .section.is-visible #home-system-map .unified-pillar-card {
    animation: home-grid-rise 0.62s var(--reveal-ease) both;
  }
  body[data-home] .section.is-visible #home-system-map .unified-pillar-card:nth-child(1) { animation-delay: 0.04s; }
  body[data-home] .section.is-visible #home-system-map .unified-pillar-card:nth-child(2) { animation-delay: 0.09s; }
  body[data-home] .section.is-visible #home-system-map .unified-pillar-card:nth-child(3) { animation-delay: 0.14s; }
  body[data-home] .section.is-visible #home-system-map .unified-pillar-card:nth-child(4) { animation-delay: 0.19s; }
  body[data-home] .section.is-visible .leadership-grid > .leadership-card,
  body[data-home] .section.is-visible .leadership-grid > .leadership-card--scene {
    animation: home-grid-rise 0.58s var(--reveal-ease) both;
  }
  body[data-home] .section.is-visible .leadership-grid > .leadership-card:nth-child(1),
  body[data-home] .section.is-visible .leadership-grid > .leadership-card--scene:nth-child(1) { animation-delay: 0.05s; }
  body[data-home] .section.is-visible .leadership-grid > .leadership-card:nth-child(2),
  body[data-home] .section.is-visible .leadership-grid > .leadership-card--scene:nth-child(2) { animation-delay: 0.1s; }
  body[data-home] .section.is-visible .leadership-grid > .leadership-card:nth-child(3),
  body[data-home] .section.is-visible .leadership-grid > .leadership-card--scene:nth-child(3) { animation-delay: 0.15s; }
  body[data-home] .section.is-visible .leadership-grid > .leadership-card:nth-child(4),
  body[data-home] .section.is-visible .leadership-grid > .leadership-card--scene:nth-child(4) { animation-delay: 0.2s; }
  body[data-home] .section.is-visible .leadership-grid > .leadership-card:nth-child(5),
  body[data-home] .section.is-visible .leadership-grid > .leadership-card--scene:nth-child(5) { animation-delay: 0.25s; }
  body[data-home] .section.is-visible .leadership-grid > .leadership-card:nth-child(6),
  body[data-home] .section.is-visible .leadership-grid > .leadership-card--scene:nth-child(6) { animation-delay: 0.3s; }
}

/*
 * Structural Accent Line System
 * Hairline desaturated gold; corner L-brackets only; no full frames, gradients on
 * lines, or ornamental shapes. Opacity/hover tuned per surface.
 */
.pillar-card,
.featured-card,
.module-card,
.case-study-card {
  position: relative;
}
.pillar-card::before,
.featured-card::before,
.module-card::before,
.case-study-card::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 3;
  opacity: var(--_struct-op, 0.14);
  transition: opacity 0.35s ease;
  --_line: var(--structural-line);
  background:
    linear-gradient(to right, var(--_line), var(--_line)) left top / var(--_ah) var(--structural-hairline) no-repeat,
    linear-gradient(to bottom, var(--_line), var(--_line)) left top / var(--structural-hairline) var(--_av) no-repeat,
    linear-gradient(to left, var(--_line), var(--_line)) right top / var(--_ah) var(--structural-hairline) no-repeat,
    linear-gradient(to bottom, var(--_line), var(--_line)) right top / var(--structural-hairline) var(--_av) no-repeat,
    linear-gradient(to right, var(--_line), var(--_line)) left bottom / var(--_ah) var(--structural-hairline) no-repeat,
    linear-gradient(to top, var(--_line), var(--_line)) left bottom / var(--structural-hairline) var(--_av) no-repeat,
    linear-gradient(to left, var(--_line), var(--_line)) right bottom / var(--_ah) var(--structural-hairline) no-repeat,
    linear-gradient(to top, var(--_line), var(--_line)) right bottom / var(--structural-hairline) var(--_av) no-repeat;
}
.pillar-card::before {
  inset: 1px;
  border-radius: calc(var(--site-card-radius) - 1px);
  --_ah: var(--structural-arm-h-pillar);
  --_av: var(--structural-arm-v-pillar);
  --_struct-op: var(--structural-op-pillar);
}
.featured-card::before {
  inset: 1px;
  border-radius: calc(var(--site-card-radius) - 1px);
  --_ah: var(--structural-arm-h-featured);
  --_av: var(--structural-arm-v-featured);
  --_struct-op: var(--structural-op-featured);
}
.module-card::before {
  inset: 1px;
  border-radius: calc(var(--site-card-radius) - 1px);
  --_ah: var(--structural-arm-h-featured);
  --_av: var(--structural-arm-v-featured);
  --_struct-op: var(--structural-op-featured);
}
.case-study-card::before {
  inset: 1px;
  border-radius: calc(var(--site-card-radius) - 1px);
  --_ah: var(--structural-arm-h-card);
  --_av: var(--structural-arm-v-card);
  --_struct-op: var(--structural-op-case);
}
@media (hover: hover) {
  .pillar-card:hover::before,
  .pillar-card:focus-within::before {
    --_struct-op: calc(var(--structural-op-pillar) * 1.28);
  }
  .featured-card:hover::before,
  .featured-card:focus-within::before {
    --_struct-op: calc(var(--structural-op-featured) * 1.33);
  }
  .module-card:hover::before,
  .module-card:focus-within::before {
    --_struct-op: calc(var(--structural-op-module) * 1.35);
  }
  .case-study-card:hover::before,
  .case-study-card:focus-within::before {
    --_struct-op: calc(var(--structural-op-case) * 1.4);
  }
  .pillar-card:hover::before,
  .pillar-card:focus-visible::before,
  .pillar-card:focus-within::before,
  .featured-card:hover::before,
  .featured-card:focus-within::before,
  .module-card:hover::before,
  .module-card:focus-within::before,
  .case-study-card:hover::before,
  .case-study-card:focus-within::before {
    --_line: rgba(196, 168, 120, 0.48);
  }
}

/*
 * Metallic surfaces — base + vignette set inline per card by card-metallic.js.
 * Rotated B/W texture: .card-metal-texture (unique integer rotation/size per button).
 */
.pillar-card,
.featured-card,
.case-study-card,
.module-card,
.philosophy-list li {
  color: var(--ui-card-ink);
  background-color: #aeb6bf;
  overflow: hidden;
  border: 1px solid var(--metal-silver-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 0 100px 36px rgba(0, 0, 0, 0.14),
    inset 0 0 180px 72px rgba(0, 0, 0, 0.08),
    0 2px 14px rgba(0, 0, 0, 0.24);
  transition:
    color 0.42s ease,
    border-color 0.42s ease,
    box-shadow 0.42s ease,
    background 0.48s ease;
}
.card-metal-texture {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: 0.52;
  will-change: transform;
  transition:
    transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.4s ease,
    width 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.pillar-card::after,
.featured-card::after,
.case-study-card::after,
.module-card::after,
.philosophy-list li::after {
  display: none;
}
.pillar-card > *,
.featured-card .featured-card-link,
.case-study-card .case-study-link,
.case-study-card .case-study-card-link,
.module-card .module-link,
.philosophy-list li > * {
  position: relative;
  z-index: 2;
}
body[data-home] #main .pillar-card .home-module,
body[data-home] #main .featured-card .home-module {
  z-index: 2;
}
.pillar-card:hover,
.pillar-card:focus-visible,
.featured-card:hover,
.featured-card:focus-within,
.case-study-card:hover,
.case-study-card:focus-within,
.module-card:hover,
.module-card:focus-within,
.philosophy-list li:hover,
.philosophy-list li:focus-within {
  border-color: var(--gold-brass-border-strong);
  color: var(--ui-card-ink-hover);
  box-shadow:
    inset 0 1px 0 rgba(212, 188, 140, 0.22),
    inset 0 0 100px 36px rgba(0, 0, 0, 0.16),
    inset 0 0 180px 72px rgba(0, 0, 0, 0.09),
    0 4px 28px rgba(0, 0, 0, 0.32),
    0 0 24px var(--gold-brass-glow);
}
body[data-home] .pillar-card .card-metal-texture {
  opacity: 0.44;
}
.pillar-card.is-metal-shifted .card-metal-texture,
.featured-card.is-metal-shifted .card-metal-texture,
.case-study-card.is-metal-shifted .card-metal-texture,
.module-card.is-metal-shifted .card-metal-texture,
.philosophy-list li.is-metal-shifted .card-metal-texture {
  opacity: 0.72;
}
.featured-card:hover .featured-card-title,
.featured-card:focus-within .featured-card-title,
.featured-card:hover .featured-card-pillar,
.featured-card:focus-within .featured-card-pillar,
.featured-card:hover .featured-card-cta,
.featured-card:focus-within .featured-card-cta,
.case-study-card:hover .case-study-card-title,
.case-study-card:hover .case-study-card-link,
.case-study-card:focus-within .case-study-card-title,
.case-study-card:focus-within .case-study-card-link,
.case-study-card:hover .case-study-cta,
.case-study-card:focus-within .case-study-cta,
.module-card:hover .module-link,
.module-card:focus-within .module-link {
  color: var(--ui-card-ink-hover);
}
.case-study-card:hover .case-study-number,
.case-study-card:focus-within .case-study-number,
.case-study-card:hover .case-study-pillar,
.case-study-card:focus-within .case-study-pillar {
  color: var(--ui-card-ink-muted-hover);
}

/* Homepage copy: locked metallic bevel (no hover) */
body[data-home] .home-text-metal {
  background-image: linear-gradient(
    var(--text-metal-angle, 140deg),
    #8a96a8 0%,
    #e8ecf2 46%,
    #d0d8e2 54%,
    #7a8696 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22),
    0 -1px 1px rgba(0, 0, 0, 0.42);
}

/* Scene card labels now live inside the SVG layers. */
body[data-home] .supporting-capabilities-panel__primary:hover .supporting-capabilities-panel__title,
body[data-home] .supporting-capabilities-panel__primary:focus-visible .supporting-capabilities-panel__title,
body[data-home] .supporting-capability-module:hover .supporting-capability-module__title,
body[data-home] .supporting-capability-module:focus-visible .supporting-capability-module__title {
  color: var(--gold-brass-light);
  text-shadow: 0 0 12px rgba(196, 168, 120, 0.24);
}
body[data-home] .leadership-card--scene .leadership-card-title__text {
  transition: color var(--transition), text-shadow var(--transition);
}
body[data-home] .leadership-card--scene:hover .leadership-card-title__text,
body[data-home] .leadership-card--scene:focus-visible .leadership-card-title__text,
body[data-home] .leadership-card--scene.is-scene-active .leadership-card-title__text {
  color: var(--scene-title-active, var(--gold-brass-light));
  text-shadow: 0 0 12px var(--scene-glow, rgba(198, 175, 130, 0.35));
}
body[data-home] #main .section.leadership .featured-card:hover .featured-card-pillar,
body[data-home] #main .section.leadership .featured-card:focus-within .featured-card-pillar {
  color: #5a4838;
  text-shadow: none;
}
body[data-home] #main .section.leadership .featured-card:hover .featured-card-title,
body[data-home] #main .section.leadership .featured-card:focus-within .featured-card-title {
  color: var(--ui-card-ink);
  text-shadow: none;
}
body[data-home] #main .section.leadership .featured-card:hover .featured-card-cta,
body[data-home] #main .section.leadership .featured-card:focus-within .featured-card-cta {
  color: #4a3820;
  text-shadow: none;
}

.hero-photo-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
}

/* Portrait: thin line frame only (no card fill) — muted brass, same language as Featured Work */
.hero-portrait-frame {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 0;
  line-height: 0;
  z-index: 0;
  box-sizing: border-box;
  background: transparent;
  border-radius: 2px;
  border: 1px solid rgba(198, 169, 107, 0.26);
  padding: clamp(6px, 1.25vw, 10px);
  box-shadow: none;
  transition:
    border-color 0.45s var(--reveal-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 0.45s var(--reveal-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
body[data-home] .hero-portrait-frame {
  position: relative;
  display: inline-grid;
  place-items: stretch;
  /* Supports headline hierarchy: present but not dominant */
  width: min(16rem, 48vw);
  aspect-ratio: 1;
  max-width: 100%;
  padding: clamp(7px, 1.15vw, 10px);
  border: 1.5px solid var(--featured-border-brass);
  border-radius: 2px;
  background: transparent;
  overflow: hidden;
  box-shadow: none;
  transition: none;
}
body[data-home] .hero-photo-wrap,
body[data-home] .hero-photo-wrap .hero-photo {
  transition: none;
}

/* Portrait → Creative Practice entry (card-local hover/focus only) */
body[data-home] .hero-portrait-link {
  display: inline-grid;
  max-width: 100%;
  text-decoration: none;
  color: inherit;
  outline: none;
}
body[data-home] .hero-portrait-link .hero-portrait-frame {
  transition:
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}
body[data-home] .hero-portrait-reveal {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18rem;
  padding: 2.1rem 0.7rem 0.55rem;
  box-sizing: border-box;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    180deg,
    rgba(12, 18, 26, 0) 0%,
    rgba(12, 18, 26, 0.42) 42%,
    rgba(10, 16, 24, 0.88) 100%
  );
  transition: opacity 0.35s ease;
}
body[data-home] .hero-portrait-reveal__title {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-brass-light);
  line-height: 1.2;
}
body[data-home] .hero-portrait-reveal__summary {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(214, 220, 228, 0.86);
  line-height: 1.3;
  max-width: 12.5rem;
}
body[data-home] .hero-portrait-link:hover .hero-portrait-reveal,
body[data-home] .hero-portrait-link:focus-visible .hero-portrait-reveal {
  opacity: 1;
}
body[data-home] .hero-portrait-link:hover .hero-portrait-frame,
body[data-home] .hero-portrait-link:focus-visible .hero-portrait-frame {
  border-color: rgba(198, 175, 130, 0.55);
  box-shadow: 0 0 0 1px rgba(196, 168, 120, 0.12);
}
body[data-home] .hero-portrait-link:focus-visible {
  outline: none;
}
@media (prefers-reduced-motion: reduce) {
  body[data-home] .hero-portrait-reveal,
  body[data-home] .hero-portrait-link .hero-portrait-frame {
    transition: none;
  }
}

/* Between-section hairlines removed — use .section-title::after + optional .structural-rule */
#main .case-studies {
  border-top: none;
}
#main .philosophy {
  border-top: none;
}

.case-study-modal-panel {
  position: relative;
}
.case-study-modal-panel::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 1px;
  border-radius: calc(var(--radius-lg) - 1px);
  z-index: 0;
  opacity: var(--structural-op-modal);
  --_line: var(--structural-line);
  --_ah: var(--structural-arm-h-card);
  --_av: var(--structural-arm-v-card);
  background:
    linear-gradient(to right, var(--_line), var(--_line)) left top / var(--_ah) var(--structural-hairline) no-repeat,
    linear-gradient(to bottom, var(--_line), var(--_line)) left top / var(--structural-hairline) var(--_av) no-repeat,
    linear-gradient(to left, var(--_line), var(--_line)) right top / var(--_ah) var(--structural-hairline) no-repeat,
    linear-gradient(to bottom, var(--_line), var(--_line)) right top / var(--structural-hairline) var(--_av) no-repeat,
    linear-gradient(to right, var(--_line), var(--_line)) left bottom / var(--_ah) var(--structural-hairline) no-repeat,
    linear-gradient(to top, var(--_line), var(--_line)) left bottom / var(--structural-hairline) var(--_av) no-repeat,
    linear-gradient(to left, var(--_line), var(--_line)) right bottom / var(--_ah) var(--structural-hairline) no-repeat,
    linear-gradient(to top, var(--_line), var(--_line)) right bottom / var(--structural-hairline) var(--_av) no-repeat;
}
.case-study-modal-panel .document-modal-body {
  position: relative;
  z-index: 1;
}

/* Manual structural rule (sparingly — same system as .section-title::after) */
hr.structural-rule,
.structural-rule {
  display: block;
  border: 0;
  width: var(--structural-rule-w);
  max-width: 240px;
  min-width: 120px;
  height: var(--structural-rule-h);
  margin: var(--space-xl) auto;
  background: var(--structural-rule-gradient);
  opacity: var(--structural-rule-opacity);
}

/* Page transitions: gradient veil (not a flat black slab) so handoff feels softer. */
#pageFade {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background:
    linear-gradient(
      165deg,
      rgba(245, 240, 230, 0.07) 0%,
      rgba(22, 24, 28, 0.86) 42%,
      rgba(10, 12, 15, 0.94) 100%
    );
}
#pageFade.is-active {
  opacity: 1;
  pointer-events: auto;
}
/* Arriving with transition: overlay stays opaque until positioned, then fades out */
html.nav-transition-in #pageFade {
  opacity: 1;
  pointer-events: auto;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  z-index: 1001;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-accent);
  color: var(--color-bg);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--radius);
  transition: top var(--transition);
}
.skip-link:focus {
  top: var(--space-md);
  outline: 3px solid var(--color-bg);
  outline-offset: 2px;
}

a {
  color: inherit;
  text-decoration: none;
  transition: text-shadow var(--transition);
}
a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
@media (hover: hover) {
  a:hover {
    text-shadow: 0 1px 0 rgba(255, 251, 242, 0.72), 0 1px 2px rgba(20, 26, 32, 0.08);
  }
}

button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-md);
  min-width: 0;
}

/* ---------- Sticky Nav ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  isolation: isolate;
  contain: layout style;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-bg) 88%, transparent) 0%,
    color-mix(in srgb, var(--color-bg) 74%, transparent) 55%,
    color-mix(in srgb, var(--color-bg) 66%, transparent) 100%
  );
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: none;
  transition: background var(--transition), border-color var(--transition);
}
.site-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: var(--structural-rule-gradient);
  opacity: 0.78;
}
.site-nav--scrolled {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-bg) 94%, transparent) 0%,
    color-mix(in srgb, var(--color-surface) 82%, transparent) 50%,
    color-mix(in srgb, var(--color-surface) 74%, transparent) 100%
  );
  border-bottom: none;
}
.site-nav--scrolled::after {
  opacity: 0.9;
}

/* Homepage nav: frosted gradient band + hairline (no solid fill block) */
body[data-home] .site-nav {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg-top) 88%, transparent) 0%,
    color-mix(in srgb, var(--bg-main) 74%, transparent) 55%,
    color-mix(in srgb, var(--bg-main) 66%, transparent) 100%
  );
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: none;
}
body[data-home] .site-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: var(--structural-rule-gradient);
  opacity: 0.78;
}
body[data-home] .site-nav--scrolled {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg-top) 94%, transparent) 0%,
    color-mix(in srgb, var(--bg-main) 82%, transparent) 50%,
    color-mix(in srgb, var(--bg-main) 74%, transparent) 100%
  );
  border-bottom: none;
}
body[data-home] .site-nav--scrolled::after {
  opacity: 0.9;
}

/* Sitewide scroll clearance for sticky/fixed nav (homepage authority). */
html {
  scroll-padding-top: calc(var(--nav-height) + var(--space-xs));
}

/* Mobile: fixed nav sitewide — reserve document space so content starts below the bar. */
@media (max-width: 47.99em) {
  body {
    padding-top: var(--nav-height);
  }
  .site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
  }
}

.nav-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  min-height: var(--nav-height);
  padding-block: var(--space-sm);
  transition: min-height var(--transition);
}
@media (min-width: 48em) {
  .nav-inner {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding-block: var(--space-sm);
  }
}
.nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  width: 100%;
  column-gap: var(--space-xs);
}
/* No top-left “Home” row link (interior matches index); menu toggle right on small screens */
body[data-home] .nav-top,
body:not([data-home]) .nav-top {
  justify-content: flex-end;
}
@media (min-width: 48em) {
  body[data-home] .nav-top,
  body:not([data-home]) .nav-top {
    display: none;
  }
  body[data-home] .nav-links-wrap,
  body:not([data-home]) .nav-links-wrap {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    border-top: none;
    padding-top: 0;
    background: none;
  }
  body[data-home] .nav-links,
  body:not([data-home]) .nav-links {
    flex-wrap: nowrap;
    justify-content: center;
    padding-top: 0;
    gap: clamp(0.45rem, 1.2vw, 0.85rem) clamp(0.75rem, 2vw, 1.65rem);
    font-size: 0.875rem;
  }
}
.nav-links-wrap {
  display: none;
}
@media (min-width: 48em) {
  .nav-links-wrap {
    display: flex;
    width: 100%;
    min-width: 0;
    justify-content: center;
    align-items: center;
    border-top: none;
  }
}
.nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md) var(--space-xl);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0;
  padding: var(--space-sm) 0 0;
  list-style: none;
}
body[data-home] .nav-links {
  gap: 0.65rem clamp(1.5rem, 4vw, 2.5rem);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.nav-links a {
  color: var(--color-text-muted);
  white-space: nowrap;
  padding: var(--space-xs) 0;
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius);
}
body[data-home] .nav-links a {
  color: var(--text-muted-quiet);
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--color-text);
}
.nav-links a[aria-current="page"] {
  color: var(--color-text);
  font-weight: 500;
}
@media (hover: hover) {
  body[data-home] .nav-links a:hover,
  body[data-home] .nav-links a:focus-visible {
    color: var(--accent-gold);
  }
  body[data-home] .nav-links a[aria-current="page"] {
    color: var(--accent-gold);
  }
}
@media (hover: none) {
  body[data-home] .nav-links a:focus-visible {
    color: var(--accent-gold);
  }
}
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  border-radius: var(--radius);
}
@media (min-width: 48em) {
  .nav-toggle {
    display: none;
  }
}
.nav-toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.nav-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: var(--space-md) var(--space-lg);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-surface) 98%, var(--color-bg)) 0%,
    color-mix(in srgb, var(--color-surface) 94%, var(--color-bg)) 100%
  );
  border-bottom: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.nav-menu[hidden] {
  display: none;
}
.nav-menu a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  min-height: var(--touch-min);
  box-sizing: border-box;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.5;
  border-radius: var(--radius);
}
.nav-menu a:hover,
.nav-menu a:focus-visible {
  color: var(--color-accent-text);
}
body[data-home] .nav-menu {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-surface) 96%, var(--bg-top)) 0%,
    color-mix(in srgb, var(--color-surface) 90%, var(--bg-main)) 100%
  );
  border-bottom-color: rgba(20, 26, 32, 0.12);
}
body[data-home] .nav-menu a:hover,
body[data-home] .nav-menu a:focus-visible {
  color: var(--accent-gold);
}
body[data-home] .nav-toggle {
  color: var(--text-secondary);
  transition: box-shadow 0.2s ease, color 0.2s ease;
}
body[data-home] .nav-toggle:hover,
body[data-home] .nav-toggle:focus-visible {
  box-shadow: var(--home-brass-glow-outer);
}

/* One navigation treatment across the whole site. */
body[data-home] .site-nav,
body:not([data-home]) .site-nav {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--field-navy) 88%, transparent) 0%,
    color-mix(in srgb, var(--field-navy) 74%, transparent) 55%,
    color-mix(in srgb, var(--field-navy) 66%, transparent) 100%
  );
}
body[data-home] .site-nav--scrolled,
body:not([data-home]) .site-nav--scrolled {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--field-navy) 96%, transparent) 0%,
    color-mix(in srgb, var(--field-navy) 88%, transparent) 50%,
    color-mix(in srgb, var(--field-navy) 82%, transparent) 100%
  );
}
body[data-home] .nav-links,
body:not([data-home]) .nav-links {
  gap: 0.65rem clamp(0.7rem, 1.7vw, 1.4rem);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}
body[data-home] .nav-links a,
body:not([data-home]) .nav-links a {
  color: var(--text-muted-quiet, var(--color-text-muted));
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
body[data-home] .nav-links a:hover,
body[data-home] .nav-links a:focus-visible,
body[data-home] .nav-links a[aria-current="page"],
body:not([data-home]) .nav-links a:hover,
body:not([data-home]) .nav-links a:focus-visible,
body:not([data-home]) .nav-links a[aria-current="page"] {
  color: var(--gold-brass-light);
}
body[data-home] .nav-menu,
body:not([data-home]) .nav-menu {
  background: linear-gradient(180deg, #111b27 0%, #0b141f 100%);
  border-bottom-color: var(--gold-brass-border);
}
body[data-home] .nav-menu a:hover,
body[data-home] .nav-menu a:focus-visible,
body:not([data-home]) .nav-menu a:hover,
body:not([data-home]) .nav-menu a:focus-visible {
  color: var(--gold-brass-light);
}
body[data-home] .nav-toggle,
body:not([data-home]) .nav-toggle {
  color: var(--text-secondary, var(--color-text-muted));
}

/* ---------- Hero (shared page-header frame) ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--page-hero-outer-pad-block-start);
  padding-bottom: var(--page-hero-outer-pad-block-end);
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* Homepage: formal panel — vertical rhythm and depth */
body[data-home] .hero {
  position: relative;
  isolation: isolate;
  z-index: 1;
  /* Gap to pillars is owned by --home-rhythm-hero-pillars */
  padding-bottom: 0;
}
/* Hero: no panel gradient — continuous with page field */
body[data-home] .hero::before {
  display: none;
}

.hero-card {
  --frameInset: -15%;
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  height: auto;
  overflow: visible;
}
body[data-home] .hero-card {
  z-index: 1;
  max-width: var(--container);
}
.hero-content {
  position: relative;
  z-index: 1;
  text-align: var(--page-hero-align);
  max-width: none;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding:
    var(--page-hero-content-pad-block-start)
    var(--page-hero-content-pad-inline)
    var(--page-hero-content-pad-block-end);
  box-sizing: border-box;
}

/*
 * Shared static subpage hero — same frame, gutter, alignment, and type tokens
 * as the homepage. Modifier only marks static contents (no wordmark/portrait).
 */
.hero.hero--subpage {
  justify-content: flex-start;
  align-items: stretch;
  overflow: visible;
  isolation: isolate;
  z-index: 1;
}
.hero.hero--subpage .hero-card,
.hero-card--subpage {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  height: auto;
  overflow: visible;
}
.hero.hero--subpage .hero-content,
.hero-content--subpage {
  text-align: var(--page-hero-align);
  max-width: none;
  width: 100%;
  margin: 0;
  padding:
    var(--page-hero-content-pad-block-start)
    var(--page-hero-content-pad-inline)
    var(--page-hero-content-pad-block-end);
}
.hero-eyebrow {
  margin: 0 auto 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  text-align: var(--page-hero-align);
}
/* .hero-title--page retained in markup for breadcrumb / scripting hooks */
.hero-summary,
.hero-content--subpage .page-subtitle,
.hero-content--subpage .pillar-summary {
  margin: 0 auto;
  max-width: min(var(--page-hero-summary-max), 100%);
  font-family: var(--page-hero-summary-font);
  font-size: var(--page-hero-summary-size);
  font-weight: var(--page-hero-summary-weight);
  letter-spacing: var(--page-hero-summary-tracking);
  line-height: var(--page-hero-summary-leading);
  color: var(--page-hero-summary-color);
  text-align: var(--page-hero-align);
}
.hero-content--subpage .case-breadcrumb {
  margin: 0 auto 0.85rem;
  text-align: var(--page-hero-align);
}
.hero-content--subpage .case-breadcrumb__list {
  justify-content: center;
}
.hero-content--subpage .system-arch-lede,
.hero-content--subpage .practice-opening {
  margin-top: var(--space-sm);
  margin-left: auto;
  margin-right: auto;
  max-width: min(var(--reading-width), 100%);
  text-align: var(--page-hero-align);
}
body.creative-practice-page .hero-content--subpage .practice-opening {
  max-width: 45rem;
  text-align: left;
}
body:not([data-home]) .hero--subpage + main > .container,
body:not([data-home]) .hero--subpage + main > .container.system-arch-body {
  padding-top: var(--space-lg);
}
/* Case evidence + quick-look live in main, not the shared header */
.case-study-content > .case-hero-evidence {
  margin-top: 0;
  margin-bottom: var(--space-md);
}
.case-study-content > .quick-look {
  margin-top: 0;
  margin-bottom: var(--space-lg);
}

.hero-name {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.2rem, 8vw, 4.2rem);
  letter-spacing: 0.085em;
  word-spacing: 0.04em;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-home] .hero-name {
  margin: 0 0 clamp(0.75rem, 2vw, 1rem);
  font-size: clamp(2.75rem, 8.2vw, 5.35rem);
  letter-spacing: 0.03em;
  word-spacing: 0.02em;
  line-height: 1.02;
  color: var(--text-primary);
  text-shadow: 0 1px 0 rgba(255, 251, 242, 0.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hero name wordmark — PNG asset */
.hero-wordmark {
  position: relative;
  width: min(100%, var(--home-frame-max, 66rem));
  margin: 0 auto clamp(0.65rem, 2vw, 1rem);
  padding: 0 clamp(0.15rem, 1.2vw, 0.5rem);
  box-sizing: border-box;
}
.hero-wordmark__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: clamp(3rem, 11vw, 5.25rem);
  object-fit: contain;
  object-position: center;
  background: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-wordmark__img {
    animation: heroWordmarkImgIn 0.85s ease-out both;
  }
}
@keyframes heroWordmarkImgIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 30em) {
  .hero-wordmark__img {
    max-height: clamp(2.6rem, 10vw, 3.75rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-wordmark__img {
    animation: none;
  }
}

.hero-title {
  font-family: var(--page-hero-title-font);
  font-size: var(--page-hero-title-size);
  font-weight: var(--page-hero-title-weight);
  margin: 0 auto var(--space-sm);
  letter-spacing: var(--page-hero-title-tracking);
  word-spacing: 0.04em;
  line-height: var(--page-hero-title-leading);
  color: var(--page-hero-title-color);
  text-align: var(--page-hero-align);
  text-transform: none;
  max-width: none;
  overflow-wrap: break-word;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
/* Homepage designation: same shared title tokens; wraps only when the viewport requires it */
body[data-home] .hero-title {
  font-family: var(--page-hero-title-font);
  font-size: var(--page-hero-title-size);
  font-weight: var(--page-hero-title-weight);
  letter-spacing: var(--page-hero-title-tracking);
  word-spacing: 0.04em;
  text-transform: none;
  color: var(--page-hero-title-color);
  line-height: var(--page-hero-title-leading);
  margin: 0 auto 1rem;
  max-width: none;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
/* If headline uses multi-line spans (headlineLines), keep same formal designation system */
body[data-home] .hero-title .hero-title-line--primary,
body[data-home] .hero-title .hero-title-line--secondary,
body[data-home] .hero-title .hero-title-line--amp {
  font-family: var(--font-sans);
  font-size: clamp(0.75rem, 2vw, 0.8125rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1.55;
}
body[data-home] .hero-title .hero-title-line--secondary-first {
  margin-top: 0.4em;
}
.hero-subtitle {
  font-family: var(--page-hero-summary-font);
  font-size: var(--page-hero-summary-size);
  font-weight: var(--page-hero-summary-weight);
  color: var(--page-hero-summary-color);
  margin: 0 0 var(--space-xs);
  letter-spacing: var(--page-hero-summary-tracking);
  line-height: var(--page-hero-summary-leading);
  text-align: var(--page-hero-align);
}
body[data-home] .hero-subtitle {
  font-family: var(--page-hero-summary-font);
  font-size: var(--page-hero-summary-size);
  font-weight: var(--page-hero-summary-weight);
  color: var(--page-hero-summary-color);
  line-height: var(--page-hero-summary-leading);
  letter-spacing: var(--page-hero-summary-tracking);
  margin: 0 auto 1.1rem;
  max-width: var(--page-hero-summary-max);
  text-align: var(--page-hero-align);
}
.hero-positioning,
.hero-positioning-block {
  font-size: max(0.875rem, 14px);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0 0 var(--space-md);
  letter-spacing: 0.01em;
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
}
body[data-home] .hero-positioning-block {
  font-size: max(0.84375rem, 13.5px);
  color: var(--text-muted-quiet);
  font-weight: 400;
  line-height: 1.68;
  margin: 0 auto 1.2rem;
  max-width: 36rem;
}
body[data-home] .hero-positioning-block[hidden],
body[data-home] .hero-location[hidden] {
  display: none;
}
.hero-title-line {
  display: block;
}
.hero-title-line--primary {
  font-size: clamp(1.9rem, 6.2vw, 3.35rem);
  letter-spacing: 0.09em;
  word-spacing: 0.08em;
}
.hero-title-line--secondary {
  font-size: clamp(1.3rem, 4.2vw, 2.05rem);
  letter-spacing: 0.08em;
  word-spacing: 0.08em;
}
.hero-title-line--secondary-first {
  margin-top: var(--space-xs);
}
.hero-title-line--amp {
  font-size: clamp(1.3rem, 4.2vw, 2.05rem);
  letter-spacing: 0.12em;
}
@media (min-width: 30em) {
  .hero-title-line--primary {
    letter-spacing: 0.1em;
  }
  .hero-title-line--secondary {
    letter-spacing: 0.09em;
  }
}
.hero-subheadline {
  font-size: max(0.875rem, 14px);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0 0 var(--space-lg);
  overflow-wrap: break-word;
}
.hero-location {
  font-size: max(0.875rem, 14px);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
  letter-spacing: 0.01em;
}
body[data-home] .hero-location {
  font-size: 0.8125rem;
  color: var(--text-muted-quiet);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 auto 1.65rem;
}
@media (min-width: 30em) {
  .hero-subheadline {
    margin-bottom: var(--space-xl);
  }
}
.hero-ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-sm);
  margin-bottom: calc(var(--space-lg) + var(--space-sm) - var(--space-2xs));
}
body[data-home] .hero-ctas {
  gap: 0;
  margin-top: calc(var(--space-sm) + 0.35rem);
  margin-bottom: 0;
  justify-content: center;
}
.hero-photo {
  max-height: calc(2 * var(--touch-min) * 1.3);
  width: auto;
  height: auto;
  flex-shrink: 0;
  display: block;
}
/*
 * Homepage hero portrait (outdoor / natural light):
 * object-position = mid-chest → head, centered, headroom (tweak % if source reframes).
 * Filters = soften greens, slight contrast, cooler/neutral vs warm snap, blend into hero.
 */
body[data-home] .hero-portrait-frame .hero-photo {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-height: none;
  max-width: none;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 1px;
  filter:
    brightness(0.87)
    contrast(1.1)
    saturate(0.8)
    hue-rotate(-5deg);
}
.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1rem;
  min-width: 10rem;
  transition: border-color var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
}
body[data-home] .hero-cta {
  font-weight: 500;
  letter-spacing: 0.055em;
  border-radius: 2px;
  font-size: 0.8125rem;
  transition:
    border-color var(--transition),
    background var(--transition),
    color var(--transition),
    box-shadow var(--transition),
    text-shadow 0.2s ease;
}
.hero-cta--primary {
  min-height: calc(var(--touch-min) - 6px);
  padding: calc(var(--space-sm) - 2px) calc(var(--space-lg) - 10px);
  font-size: 0.9375rem;
  min-width: 8.75rem;
  background: var(--color-accent);
  color: var(--color-bg);
  border: 1px solid var(--color-accent);
}
body[data-home] .hero-cta--primary {
  min-height: var(--touch-min);
  padding: 0.65rem 1.85rem;
  min-width: 11rem;
  background: rgba(38, 44, 58, 0.55);
  color: var(--text-primary);
  border: 1px solid var(--metal-silver-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body[data-home] .hero-cta--primary::after {
  display: none;
}
body[data-home] .hero-cta--primary:hover,
body[data-home] .hero-cta--primary:focus-visible {
  background: rgba(48, 54, 68, 0.72);
  border-color: var(--gold-brass-border);
  color: var(--gold-brass-light);
  text-shadow: var(--home-brass-glow-text);
}
.hero-cta--primary:hover,
.hero-cta--primary:focus-visible {
  background: transparent;
  color: var(--color-accent-text);
}
.hero-cta--secondary {
  border: 1px solid var(--color-line);
  color: var(--color-text);
  min-height: calc(0.7 * var(--touch-min));
  padding: calc(0.7 * var(--space-sm)) calc(0.7 * var(--space-lg));
  font-size: 0.7rem;
  min-width: 7rem;
}
body[data-home] .hero-cta--secondary {
  min-height: calc(var(--touch-min) - 4px);
  padding: 0.52rem 1.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  min-width: 7.5rem;
  background: transparent;
  color: color-mix(in srgb, var(--text-secondary) 78%, var(--text-primary) 22%);
  border: 1px solid rgba(168, 176, 188, 0.28);
  box-shadow: none;
}
body[data-home] .hero-cta--secondary::after {
  display: none;
}
body[data-home] .hero-cta--secondary:hover,
body[data-home] .hero-cta--secondary:focus-visible {
  background: rgba(38, 44, 58, 0.4);
  border-color: var(--gold-brass-border);
  color: var(--gold-brass-light);
  text-shadow: var(--home-brass-glow-text);
}
.hero-cta--secondary:hover,
.hero-cta--secondary:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent-text);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}
body[data-home] .hero-cta:focus-visible {
  outline: 1px solid var(--accent-gold);
  outline-offset: 3px;
}
.hero-credibility {
  font-size: max(0.8125rem, 13px);
  color: var(--color-text-muted);
  margin: 0 auto;
  line-height: 1.45;
  padding-top: var(--space-sm);
  max-width: 40rem;
}
body[data-home] .hero-credibility {
  color: var(--text-muted-quiet);
  padding-top: 0.35rem;
  max-width: 48rem;
}
.hero-credibility-strip {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
}
.hero-credibility-chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
  width: min(38rem, 100%);
  margin: 0 auto;
}
@media (min-width: 48em) {
  body[data-home] .hero-credibility-chips {
    width: min(var(--home-frame-max), 100%);
    gap: var(--home-frame-gutter);
  }
}
/* Shared concept-link underline (hero chips + pillar titles) */
.concept-link {
  position: relative;
  text-decoration: none;
  color: inherit;
}
.concept-link__label {
  display: block;
}
.concept-link__line {
  display: block;
  height: 2px;
  background: currentColor;
  opacity: 0.72;
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    transform 0.28s ease,
    height 0.12s ease,
    opacity 0.2s ease;
}
.concept-link:hover .concept-link__line,
.concept-link:focus-visible .concept-link__line,
.concept-link.is-arming .concept-link__line {
  transform: scaleX(1);
  transform-origin: left center;
  opacity: 1;
}
.concept-link:not(:hover):not(:focus-visible):not(.is-arming) .concept-link__line {
  transform-origin: right center;
}
.concept-link.is-arming .concept-link__line {
  height: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .concept-link__line {
    transition: opacity 0.15s ease, height 0.12s ease;
    transform: none;
    opacity: 0;
  }
  .concept-link:hover .concept-link__line,
  .concept-link:focus-visible .concept-link__line,
  .concept-link.is-arming .concept-link__line {
    transform: none;
    opacity: 1;
  }
}
.hero-credibility-label {
  display: block;
  width: 100%;
  margin-bottom: 0;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}
body[data-home] .hero-credibility-label {
  color: var(--text-muted-quiet);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  font-weight: 500;
}
.hero-credibility-chip {
  display: block;
  width: 100%;
  text-decoration: none;
}
body[data-home] .hero-credibility-chip {
  border-radius: 2px;
  background: rgba(26, 34, 46, 0.56);
  border: 1px solid rgba(168, 176, 188, 0.22);
  color: var(--text-secondary);
  text-align: center;
  min-width: 0;
  min-height: 3.05rem;
  white-space: normal;
  box-shadow: none;
  padding: 0.72rem 0.9rem;
  font-size: 0.75rem;
  font-weight: 500;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
body[data-home] .hero-concept-link {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 3.05rem;
  padding: 0.72rem 0.85rem;
  box-sizing: border-box;
}
body[data-home] .hero-concept-link .concept-link__label {
  line-height: 1.25;
  text-align: center;
}
body[data-home] .hero-concept-link .concept-link__line {
  position: absolute;
  left: 50%;
  bottom: 0.45rem;
  width: min(5.5rem, calc(100% - 1.7rem));
  margin: 0;
  transform: translateX(-50%) scaleX(0);
  transform-origin: left center;
}
body[data-home] .hero-concept-link:hover .concept-link__line,
body[data-home] .hero-concept-link:focus-visible .concept-link__line {
  transform: translateX(-50%) scaleX(1);
  transform-origin: left center;
}
body[data-home] .hero-concept-link:not(:hover):not(:focus-visible):not(.is-arming) .concept-link__line {
  transform: translateX(-50%) scaleX(0);
  transform-origin: right center;
}
body[data-home] .hero-concept-link.is-arming .concept-link__line {
  transform: translateX(-50%) scaleX(1);
  height: 3px;
}
@media (prefers-reduced-motion: reduce) {
  body[data-home] .hero-concept-link .concept-link__line {
    transform: translateX(-50%);
  }
  body[data-home] .hero-concept-link:hover .concept-link__line,
  body[data-home] .hero-concept-link:focus-visible .concept-link__line,
  body[data-home] .hero-concept-link.is-arming .concept-link__line {
    transform: translateX(-50%);
  }
}
body[data-home] .hero-credibility-chip::after {
  display: none;
}
body[data-home] a.hero-credibility-chip:hover,
body[data-home] a.hero-credibility-chip:focus-visible {
  background: rgba(34, 42, 54, 0.78);
  border-color: var(--gold-brass-border);
  color: var(--gold-brass-light);
  text-shadow: none;
  box-shadow: none;
}
.hero-credibility-chip {
  padding: 0.72rem 0.9rem;
  background: rgba(255, 251, 242, 0.08);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color var(--transition), color var(--transition);
}
body[data-home] .hero-credibility-chip__body,
body[data-home] .hero-credibility-chip__summary,
body[data-home] .hero-credibility-chip__detail {
  display: none;
}
a.hero-credibility-chip:hover,
a.hero-credibility-chip:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent-text);
}
@media (max-width: 47.98em) {
  .hero-credibility-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 30em) {
  .hero-credibility-chips {
    grid-template-columns: 1fr;
  }
}

.concept-page-back {
  margin: var(--space-xl) 0 0;
  text-align: center;
}
.concept-page-back a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color var(--transition);
}
.concept-page-back a:hover,
.concept-page-back a:focus-visible {
  color: var(--color-accent-text);
  text-decoration: underline;
}
body[data-concept] .concept-page {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-2xl);
}

/* ---------- Impact (At a Glance) ---------- */
.method-strip {
  max-width: 80ch;
  margin-top: var(--space-md);
}
#main .philosophy .method-strip {
  max-width: min(40rem, 100%);
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--space-lg);
}
.method-strip__intro {
  color: var(--color-text-muted);
  font-size: var(--text-body);
  line-height: 1.6;
  margin: 0 0 var(--space-md);
  max-width: 70ch;
}
#main .philosophy .method-strip__intro {
  max-width: min(52ch, 100%);
  margin-left: auto;
  margin-right: auto;
}
#main .philosophy .method-strip__heading {
  max-width: min(52ch, 100%);
  margin-left: auto;
  margin-right: auto;
}
#main .philosophy .method-stages {
  margin-left: auto;
  margin-right: auto;
  max-width: 38rem;
}
.method-strip__heading {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-sm);
  color: var(--color-text);
}
.method-stages {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  padding-left: calc(var(--space-md) + 10px);
}
.method-stages::before {
  content: '';
  position: absolute;
  left: calc(var(--space-md) + 2px);
  top: 0.25rem;
  bottom: 0.25rem;
  width: 2px;
  background: rgba(255, 251, 242, 0.1);
  border-radius: 999px;
}
.method-stage {
  position: relative;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: rgba(255, 251, 242, 0.04);
  overflow: clip;
}
.method-stage::before {
  content: '';
  position: absolute;
  left: calc(-1 * (var(--space-md) + 10px) + var(--space-md));
  top: 1.1rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 251, 242, 0.2);
  border: 1px solid rgba(255, 251, 242, 0.14);
}
.method-stage__button {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-xs);
  cursor: pointer;
}
.method-stage__button:hover {
  background: rgba(255, 251, 242, 0.05);
}
.method-stage__button:focus-visible {
  outline: 2px solid rgba(255, 251, 242, 0.28);
  outline-offset: 2px;
}
.method-stage__title {
  font-weight: 600;
  line-height: 1.35;
}
.method-stage__toggle {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  align-self: start;
  padding-top: 0.05rem;
}
.method-stage__panel {
  padding: 0 var(--space-md);
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
  transition: max-height 320ms ease, opacity 220ms ease;
}
.method-stage__panel-inner {
  padding: 0 0 var(--space-md);
  color: var(--color-text);
}
.method-stage__panel p {
  margin: var(--space-sm) 0 0;
  line-height: 1.6;
  color: var(--color-text);
}
.method-stage__example {
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
  font-size: 0.95rem;
}
.method-stage__example a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.method-stage.is-open .method-stage__panel {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .method-stage__panel {
    transition: none;
  }
  .method-stage__button:hover {
    background: transparent;
  }
}

.impact-list,
.philosophy-list {
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  max-width: 70ch;
}
.impact-list li,
.philosophy-list li {
  position: relative;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius);
  color: var(--color-text);
}

/* ---------- Sections ---------- */
/* Section padding matches hero-to-content gap: space-md + space-md (base), space-lg + space-lg (48em) */
.section {
  padding: var(--space-md) 0;
  text-align: left;
}
@media (min-width: 48em) {
  .section {
    padding: var(--space-lg) 0;
  }
}
/* First section after hero: extra top padding for breathing room */
#main > .section:first-of-type {
  padding-top: var(--space-xl);
}
@media (min-width: 48em) {
  #main > .section:first-of-type {
    padding-top: var(--space-2xl);
  }
}
/* Case studies: visual separation from foundational work above */
#main .case-studies {
  border-top: 1px solid var(--color-line);
}
/* Philosophy: hairline on interior index only; homepage uses continuous background */
#main .philosophy {
  border-top: 1px solid var(--color-line);
}
body[data-home] #main .philosophy {
  border-top: none;
}
.section .container {
  text-align: left;
}
/* Homepage sections (below hero): same content rail as interior; hero unchanged */
body[data-home] #main > .section > .container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
body[data-home] #main > .section > .container > * {
  max-width: min(var(--content-rail-max), 100%);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
body[data-home] #main > .section > .container > .visually-hidden {
  width: 1px;
  max-width: 1px;
  margin: -1px;
}
.reveal-target {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
  will-change: opacity, transform;
}
.reveal-target.is-visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-target {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}
.section-title {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  font-weight: 400;
  margin: 0 0 var(--space-sm);
  letter-spacing: 0.07em;
  line-height: 1.3;
}
/* Structural rule under section headings — centered, nav-aligned gold fade */
.section-title::after {
  content: "";
  display: block;
  width: var(--structural-rule-w);
  max-width: 240px;
  min-width: 120px;
  height: var(--structural-rule-h);
  margin: var(--space-md) auto var(--space-lg);
  background: var(--structural-rule-gradient);
  opacity: var(--structural-rule-opacity);
}
@media (min-width: 30em) {
  .section-title {
    letter-spacing: 0.08em;
  }
}
/* No title underline where headings are not primary section anchors */
.section-title--plain::after {
  content: none;
  display: none;
}
.section-intro {
  color: var(--color-text-muted);
  font-size: var(--text-body);
  line-height: 1.6;
  margin: 0 auto var(--space-xl);
  max-width: 100%;
}

/* More breathing room between subtitle and grids/cards */
.case-studies .section-intro,
.impact .section-intro,
.pillars .section-intro,
.leadership .section-intro,
.featured-work .section-intro,
.philosophy .section-intro {
  margin-bottom: calc((var(--space-xl) + var(--space-2xs)) * 0.5);
}

/* Systems Philosophy: full rail width; copy stays centered per section rules */
.philosophy-narrative {
  max-width: 100%;
  margin: 0 auto;
  color: var(--color-text-muted);
  font-size: var(--text-body);
  line-height: 1.65;
  text-align: center;
}
.philosophy-narrative p:not(.philosophy-pull) {
  margin: 0;
  text-align: center;
}
.philosophy-narrative > p:last-child:not(.philosophy-pull) {
  margin-bottom: 0;
}
.method-strip__more-wrap {
  margin: var(--space-md) 0 0;
  text-align: center;
}
.method-strip__more-btn {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--metal-silver-border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
body[data-home] .method-strip__more-btn:hover,
body[data-home] .method-strip__more-btn:focus-visible {
  border-color: var(--gold-brass-border);
  color: var(--gold-brass-light);
  background: rgba(38, 44, 58, 0.35);
}
.method-stages--more {
  margin-top: var(--space-sm);
}
.philosophy-pull {
  font-weight: 600;
  font-size: clamp(1rem, 2.2vw, 1.0625rem);
  letter-spacing: 0.02em;
  color: var(--color-text);
  border-left: none;
  padding: var(--space-md) var(--space-md);
  margin: var(--space-xl) auto !important;
  max-width: min(44ch, 100%);
  border-top: var(--structural-hairline) solid var(--structural-divider);
  border-bottom: var(--structural-hairline) solid var(--structural-divider);
  background: color-mix(in srgb, var(--structural-divider) 28%, transparent);
  border-radius: var(--radius);
}
.philosophy-pillars-lead {
  margin-top: var(--space-xl) !important;
  margin-bottom: var(--space-sm) !important;
  color: var(--color-text);
  font-weight: 500;
  text-align: center;
}
.philosophy-pillar-ties {
  margin: var(--space-xs) auto var(--space-lg);
  padding-left: 1.35rem;
  list-style: disc;
  list-style-position: outside;
  color: var(--color-text-muted);
  max-width: min(48ch, 100%);
  text-align: left;
  display: table;
}
.philosophy-pillar-ties li {
  margin-bottom: var(--space-sm);
}
.philosophy-pillar-ties li:last-child {
  margin-bottom: 0;
}
.philosophy-closing {
  margin-top: var(--space-xl) !important;
  color: var(--color-text);
  text-align: center;
}

/* ---------- Capabilities ---------- */
.capability-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.capability-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xs) 0;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-line);
  transition: background var(--transition);
}
@media (min-width: 36em) {
  .capability-item {
    grid-template-columns: 12rem 1fr;
    gap: 0 var(--space-lg);
  }
}
@media (min-width: 48em) {
  .capability-item {
    grid-template-columns: 14rem 1fr;
  }
}
.capability-item:hover {
  background: rgba(255, 251, 242, 0.05);
}
.capability-label {
  font-weight: 600;
  font-size: 1rem;
}
.capability-desc {
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.6;
}
/* ---------- At a Glance (microproof strip) ---------- */
.microproof-strip {
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--color-line);
  background: var(--color-surface);
}
.microproof-heading {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 400;
  margin: 0 0 var(--space-sm);
  letter-spacing: 0.06em;
}
.microproof-intro {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-lg);
  line-height: 1.5;
}
.microproof-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 36em) {
  .microproof-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 64em) {
  .microproof-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.microproof-item {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-line);
}
.microproof-item:last-child {
  border-bottom: none;
}

/* ---------- What I Do ---------- */
.what-i-do-list {
  max-width: 40rem;
}
.what-i-do-list li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: var(--space-sm);
}
.what-i-do-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ---------- Foundation ---------- */
.foundation-list {
  max-width: 40rem;
}
.foundation-list li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: var(--space-sm);
}
.foundation-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ---------- Case Studies (2-col desktop) ---------- */
.case-studies-trajectory {
  margin: -0.25rem 0 var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: rgba(255, 251, 242, 0.06);
  max-width: 70ch;
  margin-inline: auto;
  text-align: center;
}
.case-studies-trajectory-title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-xs);
}
.case-studies-trajectory-body {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Case study grids: compact nav tiles; up to 4 columns on desktop when viewport allows */
.case-study-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
@media (min-width: 36em) {
  .case-study-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
  }
}
@media (min-width: 52em) {
  .case-study-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
  }
}
@media (min-width: 70em) {
  .case-study-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-md);
  }
}

/*
 * Pillar featured grids: keep the same tile width as the default 4-up row (each cell = (100% − 3×gap) / 4),
 * but when there are only three cards at the widest breakpoint, use three columns and center the row
 * so the trio is not left-weighted with an empty fourth track.
 */
@media (min-width: 70em) {
  body:not([data-home]) .detail-section.pillar-section .case-study-grid:has(> .case-study-card:nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: calc((100% - 3 * var(--space-md)) * 3 / 4 + 2 * var(--space-md));
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Main page: center-justified copy */
#main .section .container {
  text-align: center;
}

.section .section-title,
.section .subsection-title,
.section .section-intro {
  text-align: center;
}

/* Keep card content centered within grid cells */
#main .case-study-card,
#main .module-card {
  text-align: center;
}

/* Philosophy method strip and lists: center blocks and text */
#main .method-strip,
#main .philosophy-list {
  margin-left: auto;
  margin-right: auto;
}

#main .method-strip__intro,
#main .method-strip__heading,
#main .method-strip p,
#main .philosophy-list,
#main .philosophy-list li {
  text-align: center;
}

#main .pillars-grid,
#main .pillar-card,
#main .featured-work-grid,
#main .featured-card-link,
#main .work-category,
#main .work-category .work-category-name,
#main .work-category .work-category-desc {
  text-align: center;
}

#main .about-text,
#main .closing-inner,
#main .closing-body {
  text-align: center;
}

#main .case-studies-trajectory {
  text-align: center;
}

/* Center block elements with max-width */
#main .section-intro,
#main .method-strip__intro,
#main .about-text {
  margin-left: auto;
  margin-right: auto;
}

/* Philosophy method stages: override left-aligned button and panel content */
#main .method-stage__button {
  text-align: center;
}

#main .method-stage__panel-inner,
#main .method-stage__panel p,
#main .method-stage__example {
  text-align: center;
}

.expand-toggle {
  margin: var(--space-lg) auto 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--touch-min) + 14px);
  padding: 0.95rem 1.4rem;
  border-radius: 999px;
  border: 1px solid rgba(201, 169, 98, 0.45);
  background: rgba(201, 169, 98, 0.10);
  color: var(--color-text);
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.expand-toggle:hover,
.expand-toggle:focus-visible {
  background: rgba(201, 169, 98, 0.16);
  border-color: rgba(201, 169, 98, 0.7);
}

.expand-toggle--sub {
  margin-top: var(--space-md);
}

.expand-panel {
  overflow: hidden;
  opacity: 0;
  max-height: 0px;
  padding: 0;
  margin: 0;
  transition: max-height var(--transition), opacity var(--transition);
}

.expand-panel[hidden] {
  display: none;
}

/* Expand panel: align with primary grid gap */
#case-studies-more .case-study-grid {
  margin-top: var(--space-md);
}
@media (min-width: 36em) {
  #case-studies-more .case-study-grid {
    margin-top: var(--space-md);
  }
}

.modules-block .expand-panel .module-grid {
  margin-top: var(--space-sm);
}
@media (min-width: 36em) {
  .modules-block .expand-panel .module-grid {
    margin-top: var(--space-md);
  }
}
@media (min-width: 56em) {
  .modules-block .expand-panel .module-grid {
    margin-top: var(--space-md);
  }
}
@media (min-width: 72em) {
  .modules-block .expand-panel .module-grid {
    margin-top: var(--space-sm);
  }
}
.case-study-card {
  border-radius: var(--site-card-radius);
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.case-study-card .case-study-card-link,
.case-study-card .case-study-card-title {
  color: inherit;
}
@media (hover: hover) {
  .case-study-card:hover {
    transform: translateY(-2px) scale(1.03);
  }
  .case-study-card:focus-within {
    transform: translateY(-2px) scale(1.03);
  }
}
@media (hover: none) {
  .case-study-card:active {
    transform: scale(0.99);
  }
}
.case-study-link {
  display: flex;
  flex-direction: column;
  padding: var(--space-sm) var(--space-md);
  min-height: var(--site-card-min-h);
  min-block-size: var(--site-card-min-h);
  height: 100%;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 48em) {
  .case-study-link {
    padding: var(--space-sm) var(--space-md);
    min-height: 6.5rem;
    min-block-size: 6.5rem;
  }
}
.case-study-number {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-accent-text);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-xs);
}
.case-study-pillar {
  display: block;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2xs);
}
.case-study-title {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.65vw, 1.2rem);
  font-weight: 400;
  margin: 0 0 var(--space-2xs);
  letter-spacing: 0.055em;
  line-height: 1.28;
}
.case-study-excerpt {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.case-study-cta {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-accent-text);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  transition: gap var(--transition);
  margin-top: auto;
}
.case-study-arrow {
  transition: transform var(--transition);
}
@media (hover: hover) {
  .case-study-card:hover .case-study-arrow {
    transform: translateX(4px);
  }
}
.case-study-card:focus-within .case-study-arrow {
  transform: translateX(4px);
}

/*
 * Compact tiles: keep supporting sentences in DOM for AT / SEO; hide from layout.
 * (Homepage injects shorter cards; pillar/creative pages may still ship descriptions in HTML.)
 */
.case-study-card-desc,
.module-desc,
.case-study-excerpt,
.pillar-proof,
.featured-card-subtitle,
.featured-card-outcome {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Supporting Modules (homepage + case pages) ---------- */
.modules-block {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-line);
}
.subsection-title {
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 3vw, 1.5rem);
  font-weight: 400;
  margin: 0 0 var(--space-md);
  letter-spacing: 0.07em;
  line-height: 1.3;
}
/* Supporting modules layout (used on case study pages).
   Homepage uses strips and overrides this via #case-studies .module-grid. */
.module-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}
@media (min-width: 36em) {
  .module-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
}
@media (min-width: 56em) {
  .module-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }
}
@media (min-width: 72em) {
  .module-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
  }
}
.module-card {
  border-radius: var(--site-card-radius);
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
@media (hover: hover) {
  .module-card:hover {
    transform: translateY(-2px) scale(1.03);
  }
  .module-card:focus-within {
    transform: translateY(-2px) scale(1.03);
  }
}
.module-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-sm) var(--space-md);
  height: 100%;
  -webkit-tap-highlight-color: transparent;
  min-height: var(--site-card-min-h);
  min-block-size: var(--site-card-min-h);
}
@media (min-width: 48em) {
  .module-link {
    padding: var(--space-sm) var(--space-md);
    min-height: 6.5rem;
    min-block-size: 6.5rem;
  }
}
.module-kicker {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-accent-text);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2xs);
}
.module-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(0.9375rem, 1.5vw, 1.1rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.055em;
}
.module-desc {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Case Study Modal ---------- */
body[data-case-study-scroll-lock] {
  overflow: hidden;
}
.case-study-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  overflow: auto;
}
.case-study-modal[hidden] {
  display: none;
}
.case-study-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  cursor: pointer;
}
.case-study-modal-panel {
  position: relative;
  width: 100%;
  max-width: 36rem;
  max-height: calc(100vh - 2rem);
  overflow: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}
.case-study-modal-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 3;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius);
}
.case-study-modal-close:hover,
.case-study-modal-close:focus-visible {
  color: var(--color-text);
  background: rgba(255, 251, 242, 0.14);
}
.case-study-modal-content {
  position: relative;
  z-index: 1;
  padding-right: var(--space-2xl);
}
.case-study-modal-title {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 400;
  margin: 0 0 var(--space-xs);
  letter-spacing: 0.06em;
}
.case-study-modal-subtitle {
  font-size: 1rem;
  color: var(--color-accent-text);
  margin: 0 0 var(--space-lg);
}
.case-study-modal-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.case-study-modal-row {
  margin: 0;
}
.case-study-modal-row dt {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent-text);
  margin-bottom: var(--space-2xs);
}
.case-study-modal-row dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.case-study-modal-decisions-heading {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent-text);
  margin: var(--space-xl) 0 var(--space-sm);
}
.case-study-modal-decisions {
  margin: 0 0 var(--space-xl);
  padding-left: var(--space-lg);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.case-study-modal-decisions li {
  margin-bottom: var(--space-xs);
}
.case-study-modal-decisions li:last-child {
  margin-bottom: 0;
}
.case-study-modal-actions {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-line);
}
.case-study-copy-link {
  padding: var(--space-sm) var(--space-md);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-accent-text);
  background: transparent;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  cursor: pointer;
}
.case-study-copy-link:hover,
.case-study-copy-link:focus-visible {
  background: rgba(201, 169, 98, 0.1);
}

/* ---------- Document sample modal (e.g. illustrative agreement) ---------- */
.document-sample-wrap {
  margin-top: var(--space-lg);
}
.document-sample-open {
  display: inline;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 500;
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
  text-align: left;
}
.document-sample-open:hover,
.document-sample-open:focus-visible {
  color: var(--color-text);
}
.document-modal.case-study-modal {
  overflow: hidden;
}
.document-modal.case-study-modal .case-study-modal-panel {
  z-index: 1;
  max-width: min(52rem, calc(100vw - 1.5rem));
  max-height: calc(100vh - 1.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--space-lg);
  padding-top: var(--space-2xl);
}
.document-modal .document-modal-body {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  padding-right: var(--space-sm);
  margin-top: var(--space-2xs);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}
.document-modal .document-modal-body strong {
  color: var(--color-text);
  font-weight: 600;
}
.document-modal-doc-pretitle {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin: calc(var(--space-xs) * -1) 0 var(--space-md);
}
.document-modal-doc-title {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 400;
  margin: 0 0 var(--space-xs);
  color: var(--color-text);
  letter-spacing: 0.04em;
}
.document-modal-disclaimer {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-accent-text);
  margin: 0 0 var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: rgba(255, 251, 242, 0.05);
}
.document-modal-section {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  margin: var(--space-xl) 0 var(--space-sm);
  color: var(--color-text);
  letter-spacing: 0.02em;
}
.document-modal-section:first-of-type {
  margin-top: var(--space-md);
}
.document-modal-body hr.document-modal-hr {
  border: none;
  border-top: 1px solid var(--color-line);
  margin: var(--space-lg) 0;
}
.document-modal-body ul {
  margin: var(--space-sm) 0 var(--space-md);
  padding-left: var(--space-lg);
}
.document-modal-body li {
  margin-bottom: var(--space-2xs);
}
.document-modal-signatures {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
}

/* ---------- Creative Work (categories) ---------- */
.creative-work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 36em) {
  .creative-work-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 64em) {
  .creative-work-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.work-category {
  display: block;
  padding: var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}
@media (min-width: 48em) {
  .work-category {
    padding: var(--space-md);
  }
}
.work-category:hover,
.work-category:focus-visible {
  border-color: var(--color-accent);
  background: rgba(201, 169, 98, 0.04);
}
.work-category-name {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0 0 var(--space-xs);
}
.work-category-desc {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.45;
}

/* ---------- Pillars (4 across) ---------- */
/* Deep links from subpages (breadcrumbs) — clear fixed nav */
body[data-home] #pillar-design,
body[data-home] #pillar-creative-systems,
body[data-home] #pillar-fabrication,
body[data-home] #pillar-automation,
body[data-home] #pillars,
body[data-home] #supporting-capabilities {
  scroll-margin-top: var(--nav-scroll-offset);
}
/* Pillar landing: deep link targets for case cards (system map → music, etc.) */
body[data-pillar] .case-study-card[id] {
  scroll-margin-top: calc(var(--nav-height-scrolled) + var(--space-md));
}
body[data-pillar] .detail-section[id] {
  scroll-margin-top: calc(var(--nav-height-scrolled) + var(--space-md));
}
.design-drill-downs__intro {
  margin: 0 0 var(--space-md);
  max-width: 52ch;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}
.pillars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 36em) {
  .pillars-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
}
@media (min-width: 56em) {
  .pillars-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
}
@media (min-width: 72em) {
  .pillars-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
  }
}
.pillar-card {
  display: block;
  padding: var(--space-lg);
  border-radius: var(--site-card-radius);
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition),
    color var(--transition),
    background 0.48s ease;
  overflow: hidden;
}
/* Structural corners: shared .pillar-card::before in Structural Accent Line System */
@media (hover: hover) {
  body:not([data-home]) .pillar-card:hover,
  body:not([data-home]) .pillar-card:focus-visible {
    transform: translateY(-2px) scale(1.03);
  }
}
.pillar-card-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.25;
}
.pillar-proof {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0 0 var(--space-sm);
}
.pillar-card-cta {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-accent-text);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}
.pillar-arrow {
  transition: transform var(--transition);
}
.pillar-card:hover .pillar-arrow {
  transform: translateX(2px);
}

/* ---------- Featured Work / Systems Across Domains grid ---------- */
/* Same column widths as .pillars-grid (homepage-only grids share this track) */
.featured-work-grid,
.leadership-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 36em) {
  .leadership-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
  .featured-work-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
}
@media (min-width: 56em) {
  .leadership-grid {
    gap: var(--space-lg);
  }
  /* Systems Across Domains: five in one row from tablet landscape up */
  .featured-work-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-sm);
  }
}
@media (min-width: 72em) {
  .leadership-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
  }
}
/* Homepage: tighter cards + type scale for five-across layout */
@media (min-width: 56em) {
  body[data-home] #main .section.featured-work .featured-work-grid > .featured-card {
    min-height: 6.75rem;
  }
  body[data-home] #main .section.featured-work .featured-card .home-module {
    padding: var(--space-xs) var(--space-sm);
  }
  body[data-home] #main .section.featured-work .home-module__footer {
    padding-top: var(--space-2xs);
  }
  body[data-home] #main .section.featured-work .home-module__body {
    gap: 0.2rem;
  }
  body[data-home] #main .section.featured-work .featured-card-pillar {
    font-size: 0.5625rem;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-2xs);
  }
  body[data-home] #main .section.featured-work .featured-card-title {
    font-size: clamp(0.72rem, 0.85vw, 0.875rem);
    line-height: 1.28;
  }
  body[data-home] #main .section.featured-work .featured-card-cta {
    font-size: 0.65rem;
    letter-spacing: 0.02em;
  }
}

/* Leadership case cards: scene cards use homepage grid rules above */
@media (min-width: 72em) {
  body[data-home] #main .section.leadership .leadership-grid {
    grid-template-columns: repeat(3, minmax(0, 11.25rem));
    max-width: calc(3 * 11.25rem + 2 * clamp(var(--space-sm), 2.2vw, var(--space-md)));
    justify-content: center;
  }
}

/* ---------- Leadership (Creative Direction) ---------- */
.leadership-tieback {
  margin-top: var(--space-xl);
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 60ch;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
#main .leadership .section-intro,
#main .leadership .section-title,
#main .leadership .leadership-grid,
#main .leadership .leadership-tieback,
#main .leadership .leadership-cta {
  text-align: center;
}
.leadership-cta {
  margin-top: var(--space-md);
  margin-bottom: 0;
}
.leadership-cta a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-accent-text);
}
.leadership-cta a:hover,
.leadership-cta a:focus-visible {
  text-decoration: underline;
}

.featured-card {
  border-radius: var(--site-card-radius);
  overflow: hidden;
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition),
    color var(--transition),
    background 0.48s ease;
}
@media (hover: hover) {
  body:not([data-home]) .featured-card:hover {
    transform: translateY(-2px) scale(1.03);
  }
}
.featured-card-link {
  display: block;
  padding: var(--space-lg);
  color: inherit;
  text-decoration: none;
}
.featured-card-pillar {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent-text);
  margin-bottom: var(--space-xs);
}
.featured-card-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 var(--space-xs);
  text-wrap: balance;
}
@media (max-width: 48em) {
  .featured-card-title {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }
}
.featured-card-subtitle {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm);
  line-height: 1.45;
}
.featured-card-outcome {
  font-size: 0.8125rem;
  color: var(--color-text);
  margin: 0 0 var(--space-sm);
  line-height: 1.5;
  font-style: italic;
}
.featured-card-cta {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-accent-text);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}
.featured-arrow {
  transition: transform var(--transition);
}
.featured-card-link:hover .featured-arrow {
  transform: translateX(2px);
}

/* ---------- Foundational Work (legacy, kept for subpages) ---------- */
.foundational-work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}
@media (min-width: 36em) {
  .foundational-work-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
}
@media (min-width: 56em) {
  .foundational-work-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }
}
@media (min-width: 72em) {
  .foundational-work-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
  }
}
.foundational-work-category {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.foundational-work-highlight {
  margin-top: var(--space-sm);
  padding: var(--space-md);
  background: rgba(201, 169, 98, 0.04);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.foundational-work-highlight-title {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0 0 var(--space-xs);
}
.foundational-work-highlight-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm);
  line-height: 1.5;
}
.foundational-work-highlight-scope {
  margin: 0 0 var(--space-sm);
  padding-left: 1.25rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.foundational-work-highlight-scope li {
  margin-bottom: var(--space-xs);
}
.foundational-work-highlight-note {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin: 0;
}

/* ---------- What I'm Looking For (legacy) ---------- */
.looking-for {
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
}
.looking-for-list li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: var(--space-sm);
}
.looking-for-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent);
}
.looking-for-titles {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin: var(--space-md) 0 var(--space-lg);
  font-style: italic;
}
.looking-for-cta {
  display: inline-block;
  font-weight: 600;
  color: var(--color-accent-text);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-accent);
  transition: opacity var(--transition);
}
.looking-for-cta:hover,
.looking-for-cta:focus-visible {
  opacity: 0.85;
}

/* ---------- Skills & Systems (stacked blocks) ---------- */
.skills-and-systems .section-intro {
  margin-bottom: calc(var(--space-xl) * 0.35);
}
.skills-and-systems #skills-matrix-grid {
  margin-top: 0;
}
.skills-matrix-grid {
  display: block;
}
.skills-block {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-line);
}
.skills-block:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.skills-block-title {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--color-accent-text);
  margin: 0 0 var(--space-md);
}
.skills-block-list {
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
}
.skills-block-item {
  margin-bottom: var(--space-xs);
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--color-text-muted);
}
.skills-block-item:last-child {
  margin-bottom: 0;
}

/* ---------- Closing CTA (homepage) ---------- */
.closing {
  scroll-margin-top: var(--space-lg);
}
.closing-inner {
  max-width: 60rem;
  margin: 0 auto;
}
body[data-home] .closing-inner {
  max-width: none;
}
.closing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: stretch;
}
body[data-home] .closing-grid {
  gap: var(--home-frame-gutter);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 44rem;
  margin-inline: auto;
}
body[data-home] .closing-card {
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 3.4rem;
  gap: 0.18rem;
  padding: 0.42rem 1.1rem 0.4rem;
}
body[data-home] .closing-card__kicker {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1;
  transform: scaleY(0.8);
  transform-origin: center;
  margin-block: -0.08em;
}
body[data-home] .closing-card__title {
  margin-bottom: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.25rem, 2.5vw, 1.55rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-transform: none;
  text-align: center;
}
.closing-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.45rem;
  min-height: 8.25rem;
  height: 100%;
  padding: 1rem 1.1rem;
  border-radius: 10px;
  border: 1px solid rgba(168, 182, 198, 0.16);
  background: rgba(10, 18, 28, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 42px rgba(0, 0, 0, 0.18);
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.closing-card:hover,
.closing-card:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(196, 168, 120, 0.4);
  background: rgba(16, 24, 36, 0.84);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(196, 168, 120, 0.12), 0 22px 48px rgba(0, 0, 0, 0.24);
}
.closing-card--single {
  justify-content: center;
}
.closing-card__kicker {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted-quiet);
}
.closing-card__title {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  line-height: 1.18;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}
@media (min-width: 48em) {
  .closing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body[data-home] .closing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 44rem;
  }
  body[data-home] .closing-card {
    min-height: 3.55rem;
  }
  .closing-card {
    min-height: 9.25rem;
  }
}
.footer-inner--copyright {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2xs);
  padding: 0;
}
.footer:has(.footer-inner--copyright) {
  padding: var(--space-sm) 0;
}
.footer-site-map {
  margin: 0;
  line-height: 1.2;
  width: 100%;
  text-align: center;
}
.footer-system-map-link {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition);
}
.footer-system-map-link:hover,
.footer-system-map-link:focus-visible {
  color: var(--color-text);
  text-decoration: underline;
}
.footer-inner--copyright .footer-copy {
  width: 100%;
  text-align: center;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--color-text-muted);
}
body[data-home] .footer-inner--copyright {
  padding-top: 0;
}
body[data-home] .footer-inner--copyright .footer-copy {
  width: 100%;
  text-align: center;
  margin: 0;
}

/* ---------- Contact / About (subpages / legacy) ---------- */
.contact {
  border-top: 1px solid var(--color-line);
}
.about-text {
  max-width: min(52ch, 100%);
  margin: 0 auto var(--space-lg);
  line-height: 1.65;
}
.about-text p {
  margin: 0 0 var(--space-md);
}
.about-text p:last-child {
  margin-bottom: 0;
}
/* ---------- CTA normalization ---------- */
.cta-link,
.contact-cta a,
.case-study-cta {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-accent-text);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  transition: color var(--transition), opacity var(--transition);
}
.contact-cta {
  margin: var(--space-sm) 0 0;
}
.contact-cta a:hover,
.contact-cta a:focus-visible {
  opacity: 0.9;
}

/* ---------- Footer ---------- */
.footer {
  padding: var(--space-xl) 0;
  border-top: 1px solid color-mix(in srgb, var(--color-line) 88%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-bg) 72%, transparent) 0%,
    var(--color-surface) 22%,
    var(--color-surface) 100%
  );
}
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
@media (min-width: 36em) {
  .footer-inner:not(.footer-inner--site):not(.footer-inner--copyright) {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.footer-inner--site {
  flex-direction: column;
  gap: var(--space-lg);
  align-items: stretch;
}
.footer-primary {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: center;
  text-align: center;
}
@media (min-width: 42em) {
  .footer-primary {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    text-align: left;
  }
  .footer-inner--site .footer-links {
    justify-content: flex-end;
  }
  .footer-inner--site .footer-copy-simple {
    text-align: left;
  }
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.footer-brand-name {
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.03em;
  color: var(--color-text);
}
.footer-brand-role {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-xl);
  justify-content: center;
}
.footer-links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--color-accent-text);
}
body[data-home] .footer-links a:hover,
body[data-home] .footer-links a:focus-visible {
  color: var(--accent-gold);
}
.footer-copy-simple {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: 0;
  opacity: 0.92;
  text-align: center;
}
.footer-text {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0;
}
.footer-text a {
  color: inherit;
  font-weight: 500;
  text-decoration: none;
  text-shadow: none;
  transition: color 0.2s ease;
}
.footer-text a:hover,
.footer-text a:focus-visible {
  color: var(--color-text);
}
body[data-home] .footer-text a:hover,
body[data-home] .footer-text a:focus-visible {
  color: var(--gold-brass-light);
}
.footer-sep {
  margin: 0 var(--space-xs);
}
.footer-copy {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0;
}
body[data-home] .footer {
  position: relative;
  border-top-color: rgba(168, 176, 188, 0.12);
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(9, 15, 24, 0.22) 100%
  );
}
body[data-home] .footer .footer-inner {
  position: relative;
  z-index: 1;
}
@media (max-width: 35.99em) {
  body[data-home] .footer .footer-inner:not(.footer-inner--copyright) {
    align-items: flex-start;
    text-align: left;
  }
}

/* ---------- Case Study Page ---------- */
.case-breadcrumb {
  margin: 0 0 var(--space-md);
  padding: 0 0 var(--space-sm);
}
.case-breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.case-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}
.case-breadcrumb__item:not(:first-child)::before {
  content: "/";
  margin-right: var(--space-sm);
  color: var(--color-text-muted);
  opacity: 0.45;
  font-weight: 400;
  pointer-events: none;
}
.case-breadcrumb__item a {
  color: var(--color-text-muted);
  text-decoration: none;
  text-shadow: none;
  transition: color 0.2s ease;
}
.case-breadcrumb__item a:hover,
.case-breadcrumb__item a:focus-visible {
  color: var(--color-text);
  text-decoration: underline;
}
.case-breadcrumb__item[aria-current="page"] {
  color: var(--color-text);
  font-weight: 600;
}
.page-header {
  padding: var(--space-2xl) 0 var(--space-xl);
  border-bottom: 1px solid var(--color-line);
}

/*
 * Portfolio interior layout (all pages except body[data-home]):
 * Outer .container = centered shell (site-wide). Inner measure = reading column for
 * headings, copy, panels, cards, and image groups—left-aligned, one rhythm.
 */
body:not([data-home]) main .page-header .container > * {
  box-sizing: border-box;
  max-width: min(var(--content-rail-max), 100%);
  width: 100%;
  margin-inline: auto;
  text-align: left;
}
body:not([data-home]) main > .container:not(.system-arch-body) > * {
  box-sizing: border-box;
  max-width: min(var(--content-rail-max), 100%);
  width: 100%;
  margin-inline: auto;
  text-align: left;
}
/* Main body column: vertical padding (replaces per-page inline styles) */
body:not([data-home]) main > .container:not(.system-arch-body) {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-2xl);
}
body:not([data-home]) .page-header .page-subtitle {
  margin-bottom: var(--space-lg);
}
body:not([data-home]) .page-header .system-arch-lede {
  max-width: 100%;
}
body:not([data-home]) .overview-panel.overview-panel--discipline {
  margin: var(--space-lg) 0 var(--space-xl);
  width: 100%;
  box-sizing: border-box;
}
/* Prose fills the rail (no nested narrowing) */
body:not([data-home]) main .detail-section p,
body:not([data-home]) main .detail-section ul,
body:not([data-home]) main .detail-section ol,
body:not([data-home]) main .detail-section__kicker {
  max-width: 100%;
}
/* Section rhythm: direct children of main body container only */
body:not([data-home]) main > .container:not(.system-arch-body) > .detail-section {
  margin-bottom: 0;
  padding-bottom: var(--space-xl);
}
body:not([data-home]) main > .container:not(.system-arch-body) > .detail-section:not(:last-of-type) {
  border-bottom: 1px solid var(--color-line);
}
body:not([data-home]) main > .container:not(.system-arch-body) > .detail-section:last-of-type {
  border-bottom: none;
  padding-bottom: var(--space-lg);
}
body:not([data-home]) main > .container:not(.system-arch-body) > .detail-section h2 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
}
body:not([data-home]) main > .container:not(.system-arch-body) > .detail-section > h2:first-child {
  margin-top: 0;
}
body:not([data-home]) main .detail-section p + h2,
body:not([data-home]) main .detail-section figure + h2,
body:not([data-home]) main .detail-section ul + h2 {
  margin-top: var(--space-lg);
}
body:not([data-home]) main .detail-section h2 + p {
  margin-top: 0;
}
body:not([data-home]) main .detail-section p + p {
  margin-top: var(--space-md);
}
body:not([data-home]) main > .container .case-nav {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-line);
}
body:not([data-home]) .evidence-grid--environmental-trio {
  margin-top: var(--space-lg);
  gap: var(--space-lg);
  max-width: 100% !important;
  width: 100%;
}
@media (min-width: 48em) {
  body:not([data-home]) .evidence-grid--environmental-trio .evidence-item:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 100%;
    width: 100%;
    justify-self: stretch;
  }
}
/* Subpages: footer copy aligns to the same rail as main content */
body:not([data-home]) footer.footer .container.footer-inner {
  max-width: min(var(--site-frame-max), var(--container));
  margin-inline: auto;
}
body:not([data-home]) .page-title,
body:not([data-home]) .page-subtitle,
body:not([data-home]) .system-arch-title,
body:not([data-home]) .system-arch-tagline {
  text-align: left;
}
body:not([data-home]) .page-header .case-breadcrumb {
  text-align: left;
}
body:not([data-home]) .detail-section h2,
body:not([data-home]) .case-nav,
body:not([data-home]) .cross-pillar-links {
  text-align: left;
}
/* Overview & visual blocks: fill the reading column (no competing max-widths) */
body:not([data-home]) .overview-panel {
  max-width: 100% !important;
}
@media (min-width: 48em) {
  body:not([data-home]) .overview-panel {
    max-width: 100% !important;
  }
}
body:not([data-home]) .evidence-grid,
body:not([data-home]) .module-grid,
body:not([data-home]) .case-study-grid {
  max-width: 100% !important;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-items: stretch;
}

/* Case-study module bands: centered headings + intro; uniform card columns (no orphan asymmetry) */
body:not([data-home]) .case-study-content .detail-section:has(.module-grid) > h2 {
  text-align: center;
}
body:not([data-home]) .case-study-content .detail-section:has(.module-grid) > p,
body:not([data-home]) .case-study-content .detail-section:has(.module-grid) > .detail-section__kicker {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
body:not([data-home]) .case-study-content .module-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  justify-content: center;
  justify-items: stretch;
  width: 100%;
  max-width: 100% !important;
  margin-inline: auto !important;
  /* Match Image Correction Core Modules: breathing room after heading / intro */
  margin-top: clamp(2rem, 5vw, 3.25rem);
}
@media (min-width: 30em) {
  body:not([data-home]) .case-study-content .module-grid {
    grid-template-columns: repeat(auto-fit, minmax(16.5rem, 19.25rem));
    gap: var(--space-md);
  }
}
/* Three modules in a 2-column auto-fit grid: lone third row card stays same width as peers, centered */
@media (min-width: 37.5rem) {
  body:not([data-home])
    .case-study-content
    .module-grid:has(> .module-card:nth-child(3):last-child)
    > .module-card:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(19.25rem, 100%);
    max-width: 19.25rem;
  }
}
body:not([data-home]) .case-study-content .module-grid .module-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}
body:not([data-home]) .case-study-content .module-grid .module-link {
  flex: 1 1 auto;
  height: auto;
}
body:not([data-home]) .page-lede,
body:not([data-home]) .page-value-statement,
body:not([data-home]) .pillar-why-matters,
body:not([data-home]) .system-arch-lede {
  max-width: 100%;
}
/* System map: diagram body stays full .container width (intro uses reading measure in header) */
body:not([data-home]) main > .container.system-arch-body > * {
  max-width: none !important;
  width: 100%;
  margin-inline: 0 !important;
  text-align: left;
}
.page-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 400;
  margin: 0 0 var(--space-xs);
  letter-spacing: 0.07em;
}
@media (min-width: 30em) {
  .page-title {
    letter-spacing: 0.08em;
  }
}
.page-subtitle {
  font-size: 1rem;
  color: var(--color-accent-text);
  margin: 0;
}
.page-lede {
  margin: var(--space-sm) 0 0;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: min(var(--reading-measure), 100%);
  text-align: left;
}
/* Case study overview: compact editorial summary (~70% prior height; width/border preserved) */
.overview-panel {
  --overview-cell-bg: color-mix(in srgb, var(--color-surface) 22%, var(--color-bg));
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: row;
  gap: 1px;
  padding: 0;
  margin: calc(var(--space-lg) * 0.7) 0 calc(var(--space-xl) * 0.7);
  max-width: 72ch;
  border: 1px solid var(--color-line);
  border-radius: 0;
  background: var(--color-line);
  box-shadow: none;
  overflow: hidden;
}
.overview-panel .overview-item {
  margin: 0;
  padding: calc(var(--space-md) * 0.72) calc(var(--space-lg) * 0.78);
  background: var(--overview-cell-bg);
}
.overview-panel .overview-item:nth-child(1)::before,
.overview-panel .overview-item:nth-child(3)::before {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent-text);
  margin-bottom: calc(var(--space-xs) * 0.7);
}
.overview-panel .overview-item:nth-child(1)::before {
  content: "The challenge";
}
.overview-panel .overview-item:nth-child(3)::before {
  content: "The response";
}
.overview-item dt {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 0.125rem;
}
.overview-item dd {
  margin: 0;
  font-size: 0.84375rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--color-text-muted) 86%, var(--color-text) 14%);
}
.overview-panel .overview-item__list {
  margin: calc(var(--space-xs) * 0.7) 0 0;
  padding-left: 1.25rem;
  list-style: disc;
}
.overview-panel .overview-item__list li {
  margin-bottom: 0.125rem;
}
.overview-panel .overview-item__list li:last-child {
  margin-bottom: 0;
}
.overview-item--tools {
  text-align: left;
}
.overview-item--tools dt {
  margin-left: 0;
  margin-right: 0;
  color: var(--color-text-muted);
}
.overview-item--tools dd {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  font-size: 0.78125rem;
  line-height: 1.38;
}

/* Discipline: no challenge/response ribbons; single column when not a five-block panel */
.overview-panel--discipline .overview-item:nth-child(1)::before,
.overview-panel--discipline .overview-item:nth-child(3)::before {
  content: none;
  display: none;
}
.overview-panel.overview-panel--discipline:not(:has(.overview-item:nth-child(5):last-child)) {
  grid-template-columns: 1fr;
}
@media (min-width: 48em) {
  .overview-panel.overview-panel--discipline:not(:has(.overview-item:nth-child(5):last-child)) .overview-item {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  /* Five cells + full-width tools */
  .overview-panel:has(.overview-item:nth-child(5):last-child) {
    grid-template-columns: 1fr 1fr;
    max-width: none;
  }
  .overview-panel:has(.overview-item:nth-child(5):last-child) .overview-item:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .overview-panel:has(.overview-item:nth-child(5):last-child) .overview-item:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .overview-panel:has(.overview-item:nth-child(5):last-child) .overview-item:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
  }
  .overview-panel:has(.overview-item:nth-child(5):last-child) .overview-item:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
  }
  .overview-panel:has(.overview-item:nth-child(5):last-child) .overview-item:nth-child(5) {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  /* Six cells + full-width tools (e.g. Outcome in addition to Why it mattered) */
  .overview-panel:has(.overview-item:nth-child(6):last-child) .overview-item:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .overview-panel:has(.overview-item:nth-child(6):last-child) .overview-item:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .overview-panel:has(.overview-item:nth-child(6):last-child) .overview-item:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
  }
  .overview-panel:has(.overview-item:nth-child(6):last-child) .overview-item:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
  }
  .overview-panel:has(.overview-item:nth-child(6):last-child) .overview-item:nth-child(5) {
    grid-column: 2;
    grid-row: 3;
  }
  .overview-panel:has(.overview-item:nth-child(6):last-child) .overview-item:nth-child(6) {
    grid-column: 1 / -1;
    grid-row: 4;
  }
}

/* ---------- Audio Timeline (Case Study component) ---------- */
.audio-timeline {
  margin-top: var(--space-md);
  display: grid;
  gap: var(--space-md);
}
.audio-timeline-controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.audio-timeline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius);
  border: 1px solid var(--color-line);
  background: rgba(255, 251, 242, 0.06);
  color: var(--color-text);
  font-weight: 600;
  cursor: pointer;
}
.audio-timeline-btn:hover,
.audio-timeline-btn:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent-text);
  background: rgba(201, 169, 98, 0.06);
}
.audio-timeline-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.audio-timeline-time {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.audio-timeline-audio {
  display: none;
}
.audio-timeline-wave {
  position: relative;
  height: 120px;
  border-radius: var(--radius);
  border: 1px solid var(--color-line);
  overflow: hidden;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}
.audio-timeline-canvas {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.audio-timeline-scrub {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  /* Keyboard accessible; pointer scrubbing is handled on .audio-timeline-wave */
  pointer-events: none;
}
.audio-timeline-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--color-accent);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
.audio-timeline-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.audio-timeline-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(252, 247, 236, 0.22);
}
.audio-timeline-marker::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(252, 247, 236, 0.28);
  border: 1px solid rgba(252, 247, 236, 0.22);
}
.audio-timeline-marker.is-active {
  background: rgba(201, 169, 98, 0.6);
}
.audio-timeline-marker.is-active::after {
  background: rgba(201, 169, 98, 0.85);
  border-color: rgba(201, 169, 98, 0.6);
}
.audio-timeline-cards {
  display: grid;
  min-height: 220px;
}
.audio-timeline-card {
  grid-area: 1 / 1;
  padding: var(--space-md);
  border-radius: var(--radius);
  border: 1px solid var(--color-line);
  background: rgba(255, 251, 242, 0.05);
  opacity: 0;
  transform: translateY(0);
  transition: none;
  pointer-events: none;
}
.audio-timeline-card.is-active {
  opacity: 1;
  pointer-events: auto;
}
.audio-timeline-card-date {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2xs);
}
.audio-timeline-card-kicker {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2xs);
}
.audio-timeline-card-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  color: var(--color-text);
  margin-bottom: var(--space-2xs);
}
.audio-timeline-card-subtitle {
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: var(--space-sm);
}
.audio-timeline-card-desc {
  color: var(--color-text-muted);
  line-height: 1.6;
}
.audio-timeline-card-block {
  margin-top: var(--space-sm);
}
.audio-timeline-card-list {
  margin: var(--space-2xs) 0 0;
  padding-left: 1.15rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}
.audio-timeline-card-list li {
  margin-bottom: 0.25rem;
}
.audio-timeline-card-list li:last-child {
  margin-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
  .audio-timeline-card {
    transition: opacity 1ms linear;
  }
}
.detail-section {
  margin-bottom: var(--space-xl);
}
.detail-section h2 {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent-text);
  margin: 0 0 var(--space-sm);
}
.detail-section__kicker {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
  max-width: min(var(--reading-measure), 100%);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}
.detail-section p {
  margin: 0;
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: min(var(--reading-measure), 100%);
  text-align: left;
}
.detail-section p strong {
  color: var(--color-text);
}
.detail-section p + p {
  margin-top: var(--space-sm);
}
.detail-section ul + p,
.detail-section ol + p {
  margin-top: var(--space-sm);
}
.detail-section p + ul,
.detail-section p + ol {
  margin-top: var(--space-sm);
}
.detail-section ul {
  margin: var(--space-sm) 0 0;
  padding-left: 1.5rem;
  max-width: min(var(--reading-measure), 100%);
  text-align: left;
}
.detail-section ul li {
  position: relative;
  margin-bottom: var(--space-xs);
  list-style: disc;
}
.detail-section ul li::before {
  display: none;
}
/* Case study: embedded PDF feature (print / event materials) */
.case-study-pdf-feature {
  margin: var(--space-md) 0 0;
  max-width: min(56rem, 100%);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: color-mix(in srgb, var(--color-surface) 92%, var(--color-bg));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.case-study-pdf-feature__frame {
  width: 100%;
  min-height: 24rem;
  height: min(70vh, 48rem);
  border: 0;
  display: block;
  background: var(--color-bg);
}
.case-study-pdf-feature__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--color-line);
  background: color-mix(in srgb, var(--color-surface) 88%, var(--color-bg));
}
.case-study-pdf-feature__link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-accent-text);
  text-decoration: none;
}
.case-study-pdf-feature__link:hover,
.case-study-pdf-feature__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* Honest attribution: automation code authored with AI coding assistants, validated in production */
.implementation-disclosure {
  max-width: min(var(--reading-measure), 100%);
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-surface) 92%, var(--color-bg));
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}
.implementation-disclosure p {
  margin: 0;
}
.implementation-disclosure strong {
  color: var(--color-text);
  font-weight: 600;
}
/* Pillar page sections */
.pillar-header--ai .page-value-statement { border-left-color: var(--pillar-ai); }
.pillar-header--graphic .page-value-statement { border-left-color: var(--pillar-graphic); }
.pillar-header--creative-systems .page-value-statement { border-left-color: var(--pillar-creative-systems); }
.pillar-header--fabrication .page-value-statement { border-left-color: var(--pillar-fabrication); }
.pillar-header--leadership .page-value-statement { border-left-color: var(--color-accent); }
/* Pillar hub: unified opener + case-study heading */
body[data-pillar] .pillar-summary {
  margin: var(--space-sm) 0 0;
  padding: 0;
  border: none;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: min(var(--reading-measure), 100%);
  text-align: left;
  text-indent: 0;
}
body[data-pillar] .pillar-case-heading {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent-text);
  margin: 0 0 var(--space-md);
  text-align: left;
}
body[data-pillar] .pillar-case-heading::before {
  content: "";
  width: 1.35rem;
  height: 2px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--color-accent-text) 72%, transparent);
  border-radius: 1px;
}
/* Pillar hub: flush sibling case-study rail (no staircase indent) */
body[data-pillar] .pillar-case-nav {
  --pillar-case-card-width: min(63%, 33rem); /* ~528px cap */
  --pillar-case-move: 0.45rem; /* ~7px */
  --pillar-case-duration: 180ms;
  counter-reset: pillar-case;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.7rem;
  width: 100%;
  max-width: 100%;
  margin: 0 0 var(--space-md);
  padding: 0 0 var(--space-sm);
  text-align: left;
  scroll-margin-top: calc(var(--nav-height-scrolled) + var(--space-md));
}
body[data-pillar] main > .container > .pillar-case-heading:first-child {
  margin-top: 0;
}
body[data-pillar] .pillar-case-heading + .pillar-case-nav {
  margin-top: 0;
}
body[data-pillar] .pillar-case-nav + .case-nav,
body[data-pillar] .pillar-case-nav + .implementation-disclosure + .case-nav {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
}
body[data-pillar] .pillar-case-nav .hero-credibility-chip {
  counter-increment: pillar-case;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr) 1.25rem;
  align-items: center;
  column-gap: 0.75rem;
  width: var(--pillar-case-card-width);
  max-width: 33.75rem;
  min-height: 4.0625rem; /* 65px */
  margin-inline-start: 0;
  padding: 0.85rem 1.25rem; /* ~20px horizontal */
  border-radius: 3px;
  background: color-mix(in srgb, var(--color-surface) 55%, rgba(28, 34, 46, 0.72));
  border: 1px solid rgba(168, 176, 188, 0.3);
  font-size: 1rem; /* 16px title */
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-text);
  white-space: normal;
  flex-shrink: 0;
  text-align: left;
  text-decoration: none;
  text-shadow: none;
  box-shadow: none;
  transform: translateX(0);
  transition:
    border-color var(--pillar-case-duration) ease,
    background var(--pillar-case-duration) ease,
    color var(--pillar-case-duration) ease,
    transform var(--pillar-case-duration) ease;
}
/* Featured flagship: first card — typography/border, not indentation */
body[data-pillar] .pillar-case-nav .hero-credibility-chip:first-child,
body[data-pillar] .pillar-case-nav .hero-credibility-chip[data-featured="true"] {
  font-weight: 600;
  border-color: color-mix(in srgb, var(--gold-brass-border, rgba(196, 168, 120, 0.55)) 55%, rgba(168, 176, 188, 0.35));
  background: color-mix(in srgb, var(--color-surface) 48%, rgba(36, 42, 54, 0.82));
}
body[data-pillar] .pillar-case-nav .hero-credibility-chip:first-child::before,
body[data-pillar] .pillar-case-nav .hero-credibility-chip[data-featured="true"]::before {
  color: var(--color-accent-text);
}
body[data-pillar] .pillar-case-nav .hero-credibility-chip::before {
  content: counter(pillar-case, decimal-leading-zero);
  grid-column: 1;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  line-height: 1;
}
body[data-pillar] .pillar-case-nav .hero-credibility-chip::after {
  content: "→";
  display: block;
  grid-column: 3;
  justify-self: end;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-text-muted);
  transform: translateX(0);
  transition:
    transform var(--pillar-case-duration) ease,
    color var(--pillar-case-duration) ease;
}
body[data-pillar] .pillar-case-nav a.hero-credibility-chip:hover,
body[data-pillar] .pillar-case-nav a.hero-credibility-chip:focus-visible {
  background: color-mix(in srgb, var(--color-surface) 72%, rgba(40, 48, 62, 0.88));
  border-color: color-mix(in srgb, var(--gold-brass-border, rgba(196, 168, 120, 0.55)) 70%, rgba(168, 176, 188, 0.45));
  color: var(--color-text);
  text-shadow: none;
  box-shadow: none;
  transform: translateX(var(--pillar-case-move));
}
body[data-pillar] .pillar-case-nav a.hero-credibility-chip:hover::after,
body[data-pillar] .pillar-case-nav a.hero-credibility-chip:focus-visible::after {
  transform: translateX(0.3rem);
  color: var(--color-accent-text);
}
body[data-pillar] .pillar-case-nav a.hero-credibility-chip:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-accent-text) 80%, white);
  outline-offset: 3px;
}
@media (max-width: 45em) {
  body[data-pillar] .pillar-case-nav {
    --pillar-case-card-width: 100%;
    gap: 0.7rem; /* ~11px */
  }
  body[data-pillar] .pillar-case-nav .hero-credibility-chip {
    width: 100%;
    max-width: none;
    min-height: 3.8125rem; /* ~61px */
    padding: 0.8rem 1rem;
    font-size: 0.9375rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-pillar] .pillar-case-nav .hero-credibility-chip,
  body[data-pillar] .pillar-case-nav .hero-credibility-chip::after {
    transition: border-color var(--pillar-case-duration) ease, background var(--pillar-case-duration) ease, color var(--pillar-case-duration) ease;
  }
  body[data-pillar] .pillar-case-nav a.hero-credibility-chip:hover,
  body[data-pillar] .pillar-case-nav a.hero-credibility-chip:focus-visible {
    transform: none;
  }
  body[data-pillar] .pillar-case-nav a.hero-credibility-chip:hover::after,
  body[data-pillar] .pillar-case-nav a.hero-credibility-chip:focus-visible::after {
    transform: none;
  }
}

/* ---------- Pillar project preview gallery ---------- */
.project-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  width: 100%;
  max-width: 100%;
  margin: 0 0 var(--space-md);
  padding: 0 0 var(--space-sm);
  scroll-margin-top: calc(var(--nav-height-scrolled) + var(--space-md));
}
@media (min-width: 48em) {
  .project-gallery {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 1.35rem;
  }
}
.project-preview-stash {
  display: none !important;
}
.project-preview-drawer {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--gold-brass-border) 70%, rgba(168, 176, 188, 0.35));
  border-radius: 3px;
  background: color-mix(in srgb, var(--color-surface) 62%, rgba(28, 34, 46, 0.92));
  overflow: hidden;
}
.project-preview-drawer[hidden] {
  display: none !important;
}
.project-preview {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid rgba(168, 176, 188, 0.28);
  border-radius: 3px;
  background: color-mix(in srgb, var(--color-surface) 48%, rgba(22, 28, 38, 0.78));
  overflow: hidden;
  transition: border-color 180ms ease, background 180ms ease;
  /* Closed cards keep a stable footprint — never host the expanded drawer. */
  align-self: start;
}
.project-preview.is-open {
  border-color: color-mix(in srgb, var(--gold-brass-border) 75%, rgba(168, 176, 188, 0.4));
  background: color-mix(in srgb, var(--color-surface) 62%, rgba(28, 34, 46, 0.9));
}
.project-preview__surface {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.project-preview__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: color-mix(in srgb, var(--color-bg) 70%, #000);
  overflow: hidden;
}
.project-preview__media--portrait {
  aspect-ratio: 4 / 5;
}
.project-preview__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.project-preview__media--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(168, 176, 188, 0.22);
}
.project-preview__media--pair img {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
}
.project-preview__body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem 1.1rem 1.15rem;
  text-align: left;
}
.project-preview__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: var(--color-text);
}
.project-preview__desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}
.project-preview__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  margin-top: 0.35rem;
}
.project-preview__toggle,
.project-preview__case-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.45rem 0.9rem;
  border-radius: 2px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.project-preview__toggle {
  border: 1px solid rgba(168, 176, 188, 0.38);
  background: color-mix(in srgb, var(--color-bg) 55%, transparent);
  color: var(--color-text);
}
.project-preview__toggle:hover,
.project-preview__toggle:focus-visible {
  border-color: var(--gold-brass-border-strong);
  background: color-mix(in srgb, var(--color-surface) 70%, rgba(40, 48, 62, 0.85));
  color: var(--color-text);
}
.project-preview__toggle:focus-visible,
.project-preview__case-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-accent-text) 80%, white);
  outline-offset: 3px;
}
.project-preview__case-link {
  border: 1px solid transparent;
  color: var(--color-accent-text);
  padding-inline: 0.15rem;
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 500;
  font-size: 0.875rem;
}
.project-preview__case-link:hover,
.project-preview__case-link:focus-visible {
  color: var(--color-text);
  text-decoration: underline;
}
.project-preview__panel {
  width: 100%;
  min-width: 0;
}
.project-preview__panel-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1.05rem 1.1rem 1.2rem;
}
@media (min-width: 48em) {
  .project-preview__panel-inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1.25rem 1.5rem;
    padding: 1.2rem 1.35rem 1.35rem;
    align-items: start;
  }
  .project-preview__panel-inner--doc {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
  .project-preview__panel-inner--featured {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }
}
.project-preview__pair-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  min-width: 0;
}
@media (min-width: 40em) {
  .project-preview__pair-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.project-preview__pair {
  margin: 0;
  min-width: 0;
}
.project-preview__pair-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: rgba(168, 176, 188, 0.22);
}
.project-preview__pair-imgs img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: color-mix(in srgb, var(--color-bg) 70%, #000);
}
.project-preview__pair figcaption,
.project-preview__thumbs figcaption,
.project-preview__featured-main figcaption {
  margin-top: 0.3rem;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.project-preview__thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  min-width: 0;
}
.project-preview__thumbs--rail {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.project-preview__thumbs--support {
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.project-preview__thumbs figure,
.project-preview__featured-main {
  margin: 0;
  min-width: 0;
}
.project-preview__thumbs img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 9.5rem;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border: 1px solid rgba(168, 176, 188, 0.22);
  background: color-mix(in srgb, var(--color-bg) 70%, #000);
}
.project-preview__featured {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 0.65rem;
  min-width: 0;
  align-items: start;
}
.project-preview__featured-main img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 18rem;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  object-position: center top;
  border: 1px solid rgba(168, 176, 188, 0.22);
  background: #11161e;
}
.project-preview__thumbs--support img {
  max-height: 8.5rem;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: #11161e;
}
.project-preview__doc {
  padding: 1rem 1.05rem;
  border: 1px solid rgba(168, 176, 188, 0.24);
  background: color-mix(in srgb, var(--color-bg) 55%, rgba(20, 26, 34, 0.9));
  text-align: left;
}
.project-preview__doc-label {
  margin: 0 0 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.project-preview__doc-title {
  margin: 0 0 0.55rem;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--color-text);
}
.project-preview__doc-note {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.project-preview__doc-actions {
  margin: 0;
}
.project-preview__doc-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.4rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(168, 176, 188, 0.38);
  border-radius: 2px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-bg) 55%, transparent);
}
.project-preview__doc-link:hover,
.project-preview__doc-link:focus-visible {
  border-color: var(--gold-brass-border-strong);
  color: var(--color-text);
}
.project-preview__copy {
  min-width: 0;
  text-align: left;
}
.project-preview__copy p {
  margin: 0 0 0.7rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.project-preview__copy p:last-child {
  margin-bottom: 0;
}
.project-preview__meta {
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0.65rem 0;
  display: grid;
  gap: 0.35rem;
  border-top: 1px solid rgba(168, 176, 188, 0.18);
  border-bottom: 1px solid rgba(168, 176, 188, 0.18);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}
.project-preview__meta span {
  display: inline-block;
  min-width: 3.5rem;
  margin-right: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  color: var(--color-accent-text);
}
.project-preview__panel-link a {
  font-weight: 500;
  color: var(--color-accent-text);
}
.project-preview__panel-link a:hover,
.project-preview__panel-link a:focus-visible {
  color: var(--color-text);
}
body[data-pillar] .project-gallery + .case-nav {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
}
@media (max-width: 47.99em) {
  .project-preview__thumbs,
  .project-preview__thumbs--rail,
  .project-preview__thumbs--support,
  .project-preview__featured {
    grid-template-columns: 1fr;
  }
  .project-preview__media,
  .project-preview__media--portrait {
    aspect-ratio: 16 / 10;
  }
  .project-preview__featured-main img,
  .project-preview__thumbs--support img {
    max-height: none;
    aspect-ratio: auto;
    object-fit: contain;
  }
}
@media (prefers-reduced-motion: reduce) {
  .project-preview,
  .project-preview__toggle {
    transition: none;
  }
}

/* ---------- Compact case-study quick-look strip ---------- */
.quick-look {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  width: 100%;
  max-width: 100%;
  margin: var(--space-md) 0 var(--space-lg);
  padding: 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  background: transparent;
}
.quick-look__item {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.65rem 0.85rem;
  align-items: baseline;
  margin: 0;
  padding: 0.55rem 0;
  border-top: 1px solid color-mix(in srgb, var(--color-line) 70%, transparent);
}
.quick-look__item:first-child {
  border-top: none;
}
.quick-look__item dt {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.quick-look__item dd {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--color-text-muted);
}
@media (min-width: 48em) {
  .quick-look {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 0;
    max-height: none;
  }
  .quick-look__item {
    grid-template-columns: 1fr;
    gap: 0.3rem;
    padding: 0.7rem 0.85rem 0.75rem 0;
    border-top: none;
    border-left: 1px solid color-mix(in srgb, var(--color-line) 70%, transparent);
  }
  .quick-look__item:first-child {
    border-left: none;
    padding-left: 0;
  }
  .quick-look {
    /* Target ~100–140px total desktop height including padding */
    padding: 0.15rem 0;
  }
}
.case-hero-evidence {
  margin: var(--space-md) 0 0;
  max-width: 100%;
}
.case-hero-evidence__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.case-hero-evidence img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid rgba(168, 176, 188, 0.24);
  background: color-mix(in srgb, var(--color-bg) 70%, #000);
}
.case-hero-evidence--portrait img {
  aspect-ratio: 3 / 4;
  object-fit: contain;
  max-height: 22rem;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}
.case-hero-evidence figcaption {
  margin-top: 0.45rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
body[data-pillar] .page-header .quick-look {
  margin-bottom: var(--space-md);
}
body[data-pillar="creative-systems"] .page-catalog-anchor {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  max-width: min(var(--reading-measure), 100%);
  margin: var(--space-md) 0 0;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-line);
}
body[data-pillar="creative-systems"] .page-catalog-anchor strong {
  font-weight: 600;
  color: var(--color-text);
}
body[data-pillar="creative-systems"] .pillar-identity-context {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  max-width: min(40rem, 100%);
  margin: var(--space-md) 0;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-surface) 85%, var(--color-bg));
}
body[data-pillar="creative-systems"] .pillar-identity-context__mark {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--color-line);
  opacity: 0.92;
}
body[data-pillar="creative-systems"] .pillar-identity-context__body {
  min-width: 0;
}
body[data-pillar="creative-systems"] .pillar-identity-context__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2xs);
  line-height: 1.35;
}
body[data-pillar="creative-systems"] .pillar-identity-context__note {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}
body[data-pillar="creative-systems"] .release-covers-continuity {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: var(--space-sm) 0 var(--space-md);
  max-width: min(var(--reading-measure), 100%);
  line-height: 1.5;
}
.page-value-statement {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-md);
  margin: var(--space-sm) 0 0;
  line-height: 1.5;
  max-width: min(var(--reading-measure), 100%);
  text-align: left;
}
.deliver-list {
  margin: var(--space-sm) 0 0;
  padding-left: 1.5rem;
  list-style: disc;
  max-width: min(var(--reading-measure), 100%);
  text-align: left;
}
.deliver-list li {
  margin-bottom: var(--space-xs);
}
/* Pillar / landing: same surface + bracket language as other site cards (description clipped, not hover-swapped) */
.detail-section .case-study-card {
  border-radius: var(--site-card-radius);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
@media (hover: hover) {
  .detail-section .case-study-card:hover,
  .detail-section .case-study-card:focus-within {
    transform: translateY(-2px) scale(1.03);
    border-color: rgba(198, 169, 107, 0.38);
    box-shadow:
      0 0 0 1px rgba(198, 169, 107, 0.12),
      0 10px 26px rgba(0, 0, 0, 0.32),
      0 0 28px -8px rgba(198, 169, 107, 0.14);
  }
}
.detail-section .case-study-card-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-md);
  min-height: var(--site-card-min-h);
  min-block-size: var(--site-card-min-h);
  height: 100%;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  gap: 0;
}
@media (min-width: 48em) {
  .detail-section .case-study-card-link {
    min-height: 6.5rem;
    min-block-size: 6.5rem;
  }
}
.detail-section .case-study-card-title {
  font-family: var(--font-serif);
  font-size: clamp(0.9375rem, 1.4vw, 1.125rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.055em;
  text-align: center;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
}

/* Hide parenthetical subtitles in card titles on small screens (full text in HTML for SEO/a11y). */
@media (max-width: 48em) {
  .card-title-paren {
    display: none !important;
  }
}
.case-study-block {
  margin-bottom: var(--space-xl);
  padding: var(--space-lg) var(--space-md);
  padding-bottom: var(--space-xl);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-surface) 72%, transparent);
  border: 1px solid var(--color-line);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.case-study-block:last-of-type {
  margin-bottom: 0;
}
.case-study-block h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 var(--space-sm);
}
.case-study-block h3 + p {
  margin-top: 0;
}
.case-study-block p {
  max-width: 100%;
  text-align: left;
}
.case-study-block h3 a {
  color: inherit;
  text-decoration: none;
}
.case-study-block h3 a:hover {
  color: var(--color-accent-text);
  text-decoration: underline;
}
/* Text CTA inside case-study-block only — avoid clashing with card anchor .case-study-link */
.case-study-block .case-study-link {
  display: inline-block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-accent-text);
  margin-top: var(--space-sm);
}
.case-study-block .case-study-link:hover,
.case-study-block .case-study-link:focus-visible {
  text-decoration: underline;
}
.cross-pillar-section {
  position: relative;
  background: color-mix(in srgb, var(--color-surface) 97%, var(--color-bg));
  padding: var(--space-lg);
  border-radius: var(--radius);
  border: 1px solid var(--color-line);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.cross-pillar-section::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 1px;
  border-radius: calc(var(--radius) - 1px);
  z-index: 0;
  opacity: calc(var(--structural-op-module) * 0.85);
  --_line: var(--structural-line);
  --_ah: calc(var(--structural-arm-h-module) * 0.95);
  --_av: calc(var(--structural-arm-v-module) * 0.95);
  background:
    linear-gradient(to right, var(--_line), var(--_line)) left top / var(--_ah) var(--structural-hairline) no-repeat,
    linear-gradient(to bottom, var(--_line), var(--_line)) left top / var(--structural-hairline) var(--_av) no-repeat,
    linear-gradient(to left, var(--_line), var(--_line)) right top / var(--_ah) var(--structural-hairline) no-repeat,
    linear-gradient(to bottom, var(--_line), var(--_line)) right top / var(--structural-hairline) var(--_av) no-repeat,
    linear-gradient(to right, var(--_line), var(--_line)) left bottom / var(--_ah) var(--structural-hairline) no-repeat,
    linear-gradient(to top, var(--_line), var(--_line)) left bottom / var(--structural-hairline) var(--_av) no-repeat,
    linear-gradient(to left, var(--_line), var(--_line)) right bottom / var(--_ah) var(--structural-hairline) no-repeat,
    linear-gradient(to top, var(--_line), var(--_line)) right bottom / var(--structural-hairline) var(--_av) no-repeat;
}
.cross-pillar-section > * {
  position: relative;
  z-index: 1;
}
.cross-pillar-links {
  margin: var(--space-sm) 0 0;
  padding-left: 0;
  list-style: none;
  max-width: min(var(--content-rail-max), 100%);
  text-align: left;
}
.cross-pillar-links li {
  margin-bottom: var(--space-xs);
}
.cross-pillar-links a {
  color: var(--color-accent-text);
}
.cross-pillar-links a:hover { text-decoration: underline; }
.work-list {
  max-width: min(var(--reading-measure), 100%);
  text-align: left;
}
.work-list li {
  margin-bottom: var(--space-md);
}
.work-list li:last-child {
  margin-bottom: 0;
}
.evidence-heading {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent-text);
  margin: var(--space-md) 0 var(--space-xs);
}
.evidence-heading + p,
.evidence-intro {
  margin: 0 0 var(--space-md);
  max-width: 68ch;
  text-align: left;
}
.evidence-subheading {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  margin: var(--space-md) 0 var(--space-xs);
}
.evidence-subheading + .evidence-intro {
  margin-top: 0;
}
.evidence-grid + p {
  margin-top: var(--space-lg);
  margin-bottom: 0;
}
.evidence-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-md);
  align-items: start;
  justify-items: start;
}
@media (min-width: 36em) {
  .evidence-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 64em) {
  .evidence-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.evidence-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.evidence-item img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}
.evidence-item figcaption {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
  text-align: left;
}
.evidence-grid--thumbs .evidence-item img {
  max-width: 200px;
  width: auto;
  height: auto;
}
.evidence-item--featured {
  margin-top: var(--space-lg);
}
.evidence-item--featured img {
  max-width: 100%;
  width: auto;
  height: auto;
}

/* Case study: responsive public video proof */
.video-showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-lg);
}
.video-showcase {
  margin: 0;
  min-width: 0;
}
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #000;
}
.video-embed iframe,
.video-embed video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-showcase figcaption {
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.video-showcase figcaption strong {
  color: var(--color-text);
}
.video-showcase > p {
  margin-top: var(--space-xs) !important;
  font-size: 0.875rem;
}
#selected-catalog .catalog-strategy {
  margin-top: var(--space-xl) !important;
}
@media (min-width: 64em) {
  .video-showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .video-showcase--featured {
    grid-column: 1 / -1;
  }
}

/* Case study: album artwork wall across Pombrah eras */
.album-art-wall {
  column-count: 1;
  column-gap: var(--space-md);
  margin-top: var(--space-lg);
}
.album-art-wall__item {
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--space-md);
  break-inside: avoid;
  vertical-align: top;
}
.album-art-wall__media {
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #080a0f;
}
.album-art-wall__media img {
  display: block;
  width: 100%;
  height: auto;
}
.album-art-wall__media--player-crop {
  aspect-ratio: 1.45 / 1;
}
.album-art-wall__media--player-crop img {
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.album-art-wall__item figcaption {
  margin-top: var(--space-xs);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}
.album-art-wall__item figcaption span {
  display: block;
  color: var(--color-accent-text);
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (min-width: 36em) {
  .album-art-wall {
    column-count: 2;
  }
}
@media (min-width: 64em) {
  .album-art-wall {
    column-count: 3;
  }
}
@media (min-width: 80em) {
  .album-art-wall {
    column-count: 4;
  }
}

/* Case study: Pombrah identity system and brand development */
.pombrah-brand-history {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}
.pombrah-brand-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-surface) 92%, #000);
}
.pombrah-brand-card__media {
  display: grid;
  place-items: center;
  width: 100%;
  padding: clamp(1rem, 3vw, 2.5rem);
  overflow: hidden;
}
.pombrah-brand-card__media--light {
  background: #fff;
}
.pombrah-brand-card__media--dark {
  background: #050608;
}
.pombrah-brand-card__media--banner {
  min-height: clamp(10rem, 22vw, 17rem);
}
.pombrah-brand-card__media--square {
  aspect-ratio: 1;
}
.pombrah-brand-card__media img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}
.pombrah-brand-card figcaption {
  padding: var(--space-md);
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.55;
}
.pombrah-brand-card figcaption > span {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--color-accent-text);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pombrah-brand-card figcaption > strong {
  display: block;
  color: var(--color-text);
  font-size: 1rem;
}
.pombrah-brand-card figcaption > p {
  margin-top: var(--space-xs) !important;
  font-size: 0.875rem;
}
.pombrah-brand-principle {
  margin-top: var(--space-lg) !important;
  padding: var(--space-md);
  border-left: 2px solid var(--color-accent);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
}
@media (min-width: 48em) {
  .pombrah-brand-history {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pombrah-brand-card--feature {
    grid-column: 1 / -1;
  }
}

/* Pillar pages: images at native dimensions, scaled down */
.evidence-grid--timeline {
  grid-template-columns: 1fr;
  max-width: 42rem;
  margin-top: var(--space-lg);
  align-items: start;
}
.evidence-grid--timeline .evidence-item img {
  max-width: 100%;
  width: auto;
  height: auto;
}
@media (min-width: 36em) {
  .evidence-grid--timeline {
    grid-template-columns: repeat(2, 1fr);
  }
}
.evidence-grid--album {
  align-items: start;
  justify-items: start;
  max-width: 48rem;
}
.evidence-grid--album .evidence-item img {
  max-width: 280px;
  width: auto;
  height: auto;
}

/* Case study: correction before/after pairs */
.cc-example-block {
  margin-top: var(--space-lg);
}
.cc-example-block:first-of-type {
  margin-top: var(--space-md);
}
/* Image Correction case: overview hierarchy + callout + samples (body.page-case-cc) */
.page-case-cc .overview-panel--cc > .overview-item::before {
  content: none !important;
  display: none !important;
}
@media (min-width: 48em) {
  .page-case-cc .overview-panel--cc .overview-item--outcome {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  .page-case-cc .overview-panel--cc .overview-item--system {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  .page-case-cc .overview-panel--cc .overview-item--environment {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  .page-case-cc .overview-panel--cc .overview-item--failure {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
  .page-case-cc .overview-panel--cc .overview-item--tools {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }
}
.page-case-cc .overview-panel--cc .overview-item--lead dt {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.055em;
}
.page-case-cc .overview-panel--cc .overview-item--lead dd {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-text);
}
.page-case-cc .overview-panel--cc .overview-item--muted dt {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-text-muted);
  opacity: 0.9;
}
.page-case-cc .overview-panel--cc .overview-item--muted dd {
  font-size: 0.78125rem;
  line-height: 1.38;
  color: var(--color-text-muted);
  opacity: 0.88;
}
.case-signature-callout {
  margin: var(--space-xl) 0 var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border: none;
  border-left: 3px solid rgba(198, 169, 107, 0.75);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 2.1vw, 1.28rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.035em;
  line-height: 1.45;
  color: var(--color-text);
  max-width: min(52ch, 100%);
}
.page-case-cc .case-prose-breath .case-signature-callout {
  margin: clamp(2rem, 5vw, 3rem) 0 clamp(2rem, 4.5vw, 2.75rem);
  padding: clamp(1.25rem, 3vw, 1.65rem) clamp(1.35rem, 3.5vw, 2.25rem);
  font-size: clamp(1.125rem, 2.65vw, 1.48rem);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.045em;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 92%, var(--color-accent) 8%);
  border-left-width: 3px;
  border-left-color: rgba(198, 169, 107, 0.88);
  background: color-mix(in srgb, var(--color-surface) 82%, rgba(198, 169, 107, 0.06) 18%);
  max-width: min(48ch, 100%);
}
.case-prose-breath p {
  margin: 0 0 var(--space-md);
  max-width: min(62ch, 100%);
}
.case-prose-breath p:last-child {
  margin-bottom: 0;
}
.case-closing-line {
  margin: var(--space-2xl) 0 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-line);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text);
  max-width: min(52ch, 100%);
}

/* Image Correction: extra rhythm before Core Modules (grid/cards use global case-study module rules) */
.page-case-cc .detail-section--modules-centered {
  padding-top: clamp(1.75rem, 4.5vw, 3.25rem);
  margin-top: clamp(0.5rem, 1.5vw, 1rem);
}
.page-case-cc .detail-section--modules-centered .detail-section__kicker {
  max-width: min(46rem, 100%);
  margin-bottom: 0;
}
.cc-system-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--color-accent-text);
  margin: 0 0 var(--space-2xs);
}
.cc-example-note {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm);
  max-width: 48ch;
  line-height: 1.45;
}

/* Image Correction: representative output grid — hero pair + supporting 2-up */
.cc-visual-section {
  margin-top: var(--space-xl);
  max-width: 100%;
}
.cc-visual-section .cc-visual-section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.28rem, 2.9vw, 1.72rem);
  font-weight: 400;
  letter-spacing: 0.052em;
  margin: 0 0 var(--space-sm);
  color: var(--color-text);
  line-height: 1.25;
}
.cc-sample-disclosure {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-lg);
  max-width: min(56ch, 100%);
}
.cc-visual-system-statement {
  margin: 0 0 clamp(2rem, 4.5vw, 3rem);
  padding-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
  border-bottom: 1px solid var(--color-line);
  max-width: min(58ch, 100%);
}
.cc-visual-system-statement p {
  margin: 0 0 var(--space-sm);
  font-size: 0.9375rem;
  line-height: 1.58;
  color: var(--color-text);
}
.cc-visual-system-statement p:last-child {
  margin-bottom: 0;
}
.cc-hero-pair {
  margin: 0 auto clamp(2.25rem, 5vw, 3rem);
  max-width: min(56rem, 100%);
}
.cc-hero-pair .cc-condition-title,
.cc-hero-pair .cc-action-line {
  text-align: center;
}
.cc-condition-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
  line-height: 1.35;
}
.cc-pair-frame {
  margin: 0 0 var(--space-md);
}
.cc-pair-frame--hero {
  margin: 0 auto var(--space-md);
  padding: 0 clamp(0, 2vw, var(--space-sm));
}
.cc-ba-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-md), 3vw, var(--space-xl));
  align-items: start;
}
@media (max-width: 36em) {
  .cc-ba-row {
    grid-template-columns: 1fr;
  }
}
.cc-ba-cell {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.cc-ba-cell img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(230, 234, 240, 0.11);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.cc-pair-frame--hero .cc-ba-cell img {
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.24);
}
.cc-ba-label {
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
  opacity: 0.72;
}
.cc-action-line {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--color-text) 82%, var(--color-accent) 18%);
  margin: 0;
  line-height: 1.45;
}
.cc-support-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 48em) {
  .cc-support-grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.75rem, 3.5vw, 3rem);
    align-items: start;
  }
}
.cc-pair-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cc-pair-block .cc-pair-frame {
  flex: 0 0 auto;
}
.cc-visual-insight {
  margin: clamp(2rem, 4.5vw, 3rem) 0 0;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--color-line);
  font-size: 1.03125rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text);
  max-width: min(54ch, 100%);
}
.cc-visual-footer-note {
  margin: var(--space-md) 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  font-style: italic;
  max-width: min(52ch, 100%);
  opacity: 0.92;
}

.evidence-grid--cc-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-sm);
  max-width: min(56rem, 100%);
}
@media (min-width: 40em) {
  .evidence-grid--cc-pair {
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }
}
.evidence-grid--cc-pair .evidence-item {
  margin: 0;
}
.evidence-grid--cc-pair .evidence-item img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}
.evidence-grid--cc-pair .evidence-item figcaption {
  margin-top: var(--space-xs);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Pillar / case study: release cover artwork row */
.evidence-grid--release-covers {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-md);
  max-width: min(72rem, 100%);
}
@media (min-width: 48em) {
  .evidence-grid--release-covers {
    grid-template-columns: repeat(3, 1fr);
  }
}
.evidence-grid--release-covers .evidence-item {
  margin: 0;
}
.evidence-grid--release-covers .evidence-item img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}
.evidence-grid--release-covers .evidence-item figcaption {
  margin-top: var(--space-xs);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}

/* Case study: environmental photography — large proof images, CAD-level polish */
.evidence-grid--environmental {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
  max-width: min(64rem, 100%);
  margin-left: auto;
  margin-right: auto;
}
.evidence-grid--environmental .evidence-item {
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.evidence-grid--environmental .evidence-item img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}
.evidence-grid--environmental .evidence-item figcaption {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}

/* Two on top, one centered below; consistent cell sizing */
.evidence-grid--environmental-trio {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
  max-width: min(72rem, 100%);
  margin-left: auto;
  margin-right: auto;
}
.evidence-grid--environmental-trio .evidence-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.evidence-grid--environmental-trio .evidence-item img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}
.evidence-grid--environmental-trio .evidence-item figcaption {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
  text-align: left;
}
@media (min-width: 48em) {
  .evidence-grid--environmental-trio {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
  .evidence-grid--environmental-trio .evidence-item:nth-child(3) {
    grid-column: 1 / -1;
    max-width: calc(50% - var(--space-xl) / 2);
    justify-self: center;
    width: 100%;
  }
}

/* Photography page: expandable, category-scoped collections */
.photo-collections {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.photo-collection {
  overflow: clip;
  border: 1px solid var(--color-line);
  border-radius: calc(var(--radius) * 1.35);
  background: color-mix(in srgb, var(--color-surface) 86%, transparent);
}
.photo-collection summary {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 15rem;
  cursor: pointer;
  list-style: none;
}
.photo-collection summary::-webkit-details-marker {
  display: none;
}
.photo-collection summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -3px;
}
.photo-collection__cover {
  display: block;
  min-height: 15rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-bg) 76%, #000);
}
.photo-collection__cover img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 15rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 420ms ease;
}
.photo-collection__cover--portrait img {
  object-position: center 30%;
}
.photo-collection summary:hover .photo-collection__cover img {
  transform: scale(1.025);
}
.photo-collection__intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.55rem;
  padding: clamp(1.25rem, 3vw, 2.25rem);
}
.photo-collection__eyebrow {
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.photo-collection__title {
  color: var(--color-text);
  font-family: var(--font-serif);
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  line-height: 1.05;
}
.photo-collection__description {
  max-width: 46rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}
.photo-collection__action {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.35rem;
  color: var(--color-accent);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
.photo-collection__action::after {
  content: "+";
  font-size: 1.15rem;
  line-height: 1;
}
.photo-collection[open] .photo-collection__action::after {
  content: "−";
}
.photo-collection[open] summary {
  border-bottom: 1px solid var(--color-line);
}
.photo-collection__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  padding: clamp(1rem, 2.5vw, 1.75rem);
}
.photo-gallery-item {
  min-width: 0;
  margin: 0;
}
.photo-gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-bg) 74%, #000);
}
.photo-gallery-item--portrait img {
  aspect-ratio: 3 / 4;
  object-position: center 24%;
}
.photo-gallery-item figcaption {
  margin-top: 0.55rem;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}
@media (min-width: 42em) {
  .photo-collection__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 52em) {
  .photo-collection summary {
    grid-template-columns: minmax(17rem, 0.85fr) minmax(0, 1.15fr);
  }
  .photo-collection__cover,
  .photo-collection__cover img {
    min-height: 18rem;
  }
  .photo-collection__cover img {
    aspect-ratio: auto;
  }
}
@media (min-width: 68em) {
  .photo-collection__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .photo-gallery-item--wide {
    grid-column: span 2;
  }
  .photo-gallery-item--wide img {
    aspect-ratio: 16 / 9;
  }
}
@media (prefers-reduced-motion: reduce) {
  .photo-collection__cover img {
    transition: none;
  }
}

/* Composition page: archival studio source/final pair and supporting views */
.artist-work-gallery {
  display: grid;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}
.artist-work-gallery__pair,
.artist-work-gallery__supporting {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
.artist-work-gallery .evidence-item {
  min-width: 0;
  margin: 0;
}
.artist-work-gallery .evidence-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.artist-work-gallery .evidence-item--portrait img {
  aspect-ratio: 4 / 5;
  object-position: center 24%;
}
.artist-work-gallery figcaption strong {
  color: var(--color-text);
}
@media (min-width: 42em) {
  .artist-work-gallery__pair,
  .artist-work-gallery__supporting {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 68em) {
  .artist-work-gallery__supporting {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Music page: smaller timeline images with text wrap */
.detail-section--timelines .evidence-item--featured {
  float: left;
  max-width: 280px;
  margin: 0 var(--space-lg) var(--space-md) 0;
}
.detail-section--timelines .evidence-item--featured img {
  width: auto;
  max-width: 280px;
  height: auto;
}
.detail-section--timelines .evidence-item--featured figcaption {
  font-size: 0.8125rem;
}
.detail-section--timelines h3 {
  clear: left;
}
@media (max-width: 44em) {
  .detail-section--timelines .evidence-item--featured {
    float: none;
    max-width: 100%;
    margin: var(--space-md) 0;
  }
  .detail-section--timelines .evidence-item--featured img {
    max-width: 100%;
  }
}
.evidence-note {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: var(--space-lg);
  margin-bottom: 0;
}
.case-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-line);
}
.case-nav a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-accent-text);
}
.case-nav a:hover,
.case-nav a:focus-visible {
  text-decoration: underline;
}

/*
 * Workflow guidance module (image correction): parent case anchor + grouped footer nav.
 * Scoped to body.page-module-ic-wg — matches accent / surface vocabulary, not a loud CTA.
 */
body.page-module-ic-wg .parent-case-anchor {
  margin: var(--space-md) 0 var(--space-sm);
  max-width: min(var(--reading-measure), 100%);
}
body.page-module-ic-wg .parent-case-anchor__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2xs);
}
body.page-module-ic-wg .parent-case-anchor__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.5rem 1rem 0.5rem 0.85rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: color-mix(in srgb, var(--color-text) 90%, var(--color-accent) 10%);
  text-decoration: none;
  background: color-mix(in srgb, var(--color-surface) 88%, var(--color-accent) 12%);
  border: 1px solid color-mix(in srgb, var(--color-line) 55%, var(--color-accent) 45%);
  border-radius: var(--radius-lg);
  border-left: 3px solid color-mix(in srgb, var(--color-accent) 72%, transparent);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
  transition: color var(--transition), background var(--transition), border-color var(--transition),
    box-shadow var(--transition);
}
body.page-module-ic-wg .parent-case-anchor__link:hover,
body.page-module-ic-wg .parent-case-anchor__link:focus-visible {
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-surface) 80%, var(--color-accent) 18%);
  border-color: color-mix(in srgb, var(--color-accent) 32%, var(--color-line));
  box-shadow: 0 3px 18px rgba(0, 0, 0, 0.28);
  text-decoration: none;
}
body.page-module-ic-wg .parent-case-anchor__chev {
  font-size: 0.92em;
  opacity: 0.55;
  font-weight: 500;
}
body.page-module-ic-wg .page-header .page-lede {
  margin-top: var(--space-xs);
}
body.page-module-ic-wg .page-header .page-subtitle {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
  max-width: min(62ch, 100%);
}
body.page-module-ic-wg .page-header .page-subtitle a {
  color: var(--color-accent-text);
  font-weight: 500;
}
body.page-module-ic-wg .page-header .page-subtitle a:hover,
body.page-module-ic-wg .page-header .page-subtitle a:focus-visible {
  color: color-mix(in srgb, var(--color-accent-text) 55%, var(--color-text) 45%);
  text-decoration: underline;
}
body.page-module-ic-wg .case-nav.case-nav--grouped {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  align-items: stretch;
}
body.page-module-ic-wg .case-nav__group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-md) 0;
}
body.page-module-ic-wg .case-nav__group--context {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}
body.page-module-ic-wg .case-nav__group:first-child {
  padding-top: 0;
}
body.page-module-ic-wg .case-nav__group + .case-nav__group {
  border-top: 1px solid var(--color-line);
}
body.page-module-ic-wg .case-nav__group--sequence {
  justify-content: flex-start;
  gap: var(--space-lg);
}
body.page-module-ic-wg .case-nav__links-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
}
body.page-module-ic-wg .case-nav a.case-nav__case-primary {
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-surface) 86%, var(--color-accent) 14%);
  border: 1px solid color-mix(in srgb, var(--color-line) 50%, var(--color-accent) 50%);
  text-decoration: none;
  color: color-mix(in srgb, var(--color-text) 88%, var(--color-accent) 12%);
}
body.page-module-ic-wg .case-nav a.case-nav__case-primary:hover,
body.page-module-ic-wg .case-nav a.case-nav__case-primary:focus-visible {
  background: color-mix(in srgb, var(--color-surface) 78%, var(--color-accent) 22%);
  color: var(--color-text);
  text-decoration: none;
}
body.page-module-ic-wg .case-nav__hint {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
}

/* ---------- Hero: optional System Map pathway (homepage) ---------- */
.hero-arch-link-wrap {
  margin: var(--space-lg) auto 0;
  padding-top: var(--space-md);
  text-align: center;
  max-width: 36rem;
}
.hero-arch-link {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  opacity: 0.55;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.hero-arch-link:hover,
.hero-arch-link:focus-visible {
  color: var(--structural-line);
  opacity: 0.95;
  text-decoration: none;
}

/* ---------- Footer: System Map link (same tone as other footer links) ---------- */
.footer-site-links {
  margin: 0 0 var(--space-sm);
  text-align: center;
  font-size: 0.875rem;
}
.footer-site-links a {
  color: var(--color-text-muted);
  font-weight: 500;
  text-decoration: none;
}
.footer-site-links a:hover,
.footer-site-links a:focus-visible {
  color: var(--color-text);
  text-decoration: underline;
}
.footer-text .footer-system-map {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}
a.footer-system-map:hover,
a.footer-system-map:focus-visible {
  text-decoration: underline;
}
.footer-system-map--current {
  color: var(--color-text);
  font-weight: 600;
}

/* ---------- System Architecture page (system-map.html) ---------- */
.system-map-page {
  --sys-arch-accent: rgba(61, 90, 108, 0.4);
  --sys-arch-accent-strong: rgba(47, 74, 92, 0.55);
}
.system-arch-header {
  padding-bottom: var(--space-xl);
}
.system-arch-header .page-title {
  font-family: var(--font-serif);
  letter-spacing: 0.06em;
  max-width: 20ch;
}
.system-arch-title {
  margin-bottom: var(--space-sm);
}
.system-arch-tagline {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sys-arch-accent-strong);
  margin: 0 0 var(--space-md);
}
.system-arch-lede {
  margin: 0;
  max-width: 62ch;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}
.system-arch-body {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-2xl);
}
.system-arch-diagram {
  position: relative;
  margin-top: var(--space-xl);
}
.system-arch-wires {
  display: none;
  width: 100%;
  height: 120px;
  margin-bottom: var(--space-md);
  pointer-events: none;
}
@media (min-width: 60em) {
  .system-arch-wires {
    display: block;
  }
}
.system-arch-wire {
  transition: stroke-opacity 0.35s ease, stroke 0.35s ease;
}
.system-arch-wire--cross {
  stroke-opacity: 0.35;
}
.system-arch--bridging .system-arch-wire--cross,
.system-arch--bridging .system-arch-wire {
  stroke: rgba(198, 169, 107, 0.55);
  stroke-opacity: 0.85;
}
.system-arch-columns {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
}
@media (min-width: 48em) {
  .system-arch-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 72em) {
  .system-arch-columns {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
  }
}
.system-arch-column {
  position: relative;
  padding: var(--space-md);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 92%, var(--color-bg));
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.system-arch-pillar {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 400;
  margin: 0 0 var(--space-2xs);
  letter-spacing: 0.05em;
}
.system-arch-pillar a {
  color: var(--color-text);
  text-decoration: none;
}
.system-arch-pillar a:hover,
.system-arch-pillar a:focus-visible {
  color: var(--structural-line);
}
.system-arch-pillar-note {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
  line-height: 1.4;
}
.system-arch-node {
  margin-bottom: var(--space-md);
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--color-line);
  transition: border-color 0.25s ease, background 0.25s ease;
  border-radius: var(--radius-sm);
}
.system-arch-node:last-child {
  margin-bottom: 0;
}
.system-arch-node.is-sys-share-active {
  background: color-mix(in srgb, var(--color-surface) 88%, rgba(198, 169, 107, 0.08));
  border-color: rgba(198, 169, 107, 0.22);
  box-shadow: inset 0 0 0 1px rgba(198, 169, 107, 0.08);
}
.system-arch-case {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent-text);
  text-decoration: none;
  line-height: 1.35;
}
.system-arch-case:hover,
.system-arch-case:focus-visible {
  text-decoration: underline;
  color: var(--structural-line);
}
.system-arch-node-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin: var(--space-xs) 0 0;
  font-style: italic;
}
.system-arch-modules {
  margin: var(--space-xs) 0 0;
  padding-left: 1.1rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}
.system-arch-modules a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.system-arch-modules a:hover,
.system-arch-modules a:focus-visible {
  color: var(--color-accent-text);
  text-decoration: underline;
}
.system-arch-sublinks {
  font-size: 0.75rem;
  margin: var(--space-md) 0 0;
  line-height: 1.5;
  padding: var(--space-xs) var(--space-sm);
  margin-left: calc(-1 * var(--space-sm));
  margin-right: calc(-1 * var(--space-sm));
  border-radius: var(--radius-sm);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.system-arch-sublinks.is-sys-share-active {
  background: color-mix(in srgb, var(--color-surface) 88%, rgba(198, 169, 107, 0.08));
  box-shadow: inset 0 0 0 1px rgba(198, 169, 107, 0.08);
}
.system-arch-sublinks a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.system-arch-sublinks a:hover,
.system-arch-sublinks a:focus-visible {
  color: var(--color-accent-text);
  text-decoration: underline;
}
.system-arch-crosscut {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-line);
}
.system-arch-subhead {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
  margin: 0 0 var(--space-xs);
  letter-spacing: 0.05em;
}
.system-arch-subhead a {
  color: inherit;
  text-decoration: none;
}
.system-arch-subhead a:hover,
.system-arch-subhead a:focus-visible {
  color: var(--structural-line);
  text-decoration: underline;
  text-underline-offset: 0.14em;
}
.system-arch-crosscut-lede {
  margin: 0 0 var(--space-lg);
  color: var(--color-text-muted);
  max-width: 52ch;
  font-size: 0.9rem;
}
.system-arch-crosscut-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}
@media (min-width: 48em) {
  .system-arch-crosscut-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.system-arch-node--flat {
  padding: var(--space-md);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  margin-bottom: 0;
}
.system-arch-pillar-cta {
  margin: var(--space-lg) 0 0;
  font-size: 0.9rem;
}
.system-arch-pillar-cta a {
  color: var(--color-accent-text);
  font-weight: 500;
  text-decoration: none;
}
.system-arch-pillar-cta a:hover,
.system-arch-pillar-cta a:focus-visible {
  text-decoration: underline;
}
.system-arch-pillar-cta--minor {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}
.system-arch-pillar-cta--minor a {
  color: var(--color-text-muted);
  font-weight: 500;
}
.system-arch-pillar-cta--minor .system-arch-pillar-note {
  font-weight: 400;
  opacity: 0.9;
}
.system-arch-legend {
  margin-top: var(--space-2xl);
  padding: var(--space-lg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-bg) 96%, var(--color-surface));
  max-width: 52rem;
}
.system-arch-legend-title {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sys-arch-accent);
  margin: 0 0 var(--space-sm);
}
.system-arch-legend-text {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
  line-height: 1.55;
}
.system-arch-legend-list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}
.system-arch-legend-list li {
  margin-bottom: var(--space-sm);
}
.system-arch-legend-list strong {
  color: var(--color-text);
  font-weight: 600;
  cursor: default;
}
.system-arch-legend-list li[data-sys-share] {
  cursor: default;
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-xs);
  margin-left: calc(-1 * var(--space-xs));
  outline: none;
}
.system-arch-legend-list li[data-sys-share]:focus-visible {
  box-shadow: 0 0 0 2px var(--color-accent);
}
.system-arch-legend-list li.is-sys-share-active {
  background: color-mix(in srgb, var(--color-surface) 90%, rgba(198, 169, 107, 0.06));
}
.system-arch-legend-list li.is-sys-share-active strong {
  color: var(--accent-gold, #c6a96b);
}

body[data-home] #home-system-map .system-arch-body--home-expanded {
  padding-top: 0;
  padding-bottom: 0;
}
body[data-home] #home-system-map .system-arch-diagram--home-expanded .system-arch-node-hint {
  font-size: 0.72rem;
  line-height: 1.45;
  margin: 0.35rem 0 0;
  color: var(--color-text-muted);
}
body[data-home] #home-system-map .system-arch-diagram--home-expanded .system-arch-sublinks {
  margin-top: 0;
  padding-top: 0;
}
body[data-home] #home-system-map .system-arch-body--home {
  padding-top: 0;
  padding-bottom: 0;
}
body[data-home] #home-system-map .system-arch-diagram {
  margin-top: 0;
}
body[data-home] #home-system-map .system-arch-columns {
  gap: var(--home-frame-gutter);
  align-items: stretch;
}
body[data-home] #home-system-map .system-arch-column {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  padding: clamp(0.85rem, 1.8vw, 1rem);
  border-radius: 10px;
  background: rgba(11, 18, 28, 0.84);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 40px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

/* Four-pillar strip — stable grid + simple card hover */
body[data-home] #home-system-map .pillar-strip {
  --pillar-strip-min-height: 0;
  --pillar-strip-locked-height: auto;
  --pillar-hover-transition: 0.28s cubic-bezier(0.33, 0, 0.2, 1);
  --unified-pillar-scene-opacity: 0;
  --unified-pillar-overlay-opacity: 0;
}

body[data-home] #home-system-map .unified-pillar-card,
body[data-home] #home-system-map .unified-pillar-card:hover,
body[data-home] #home-system-map .unified-pillar-card:focus-within,
body[data-home] #home-system-map .unified-pillar-card.is-scene-active {
  background: rgba(11, 18, 28, 0.84) !important;
  background-image: none !important;
}

body[data-home] #home-system-map .unified-pillar-card {
  position: relative;
  padding: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(168, 176, 188, 0.2);
  --pillar-type-scale: 1;
  transition:
    transform var(--pillar-hover-transition),
    border-color var(--pillar-hover-transition),
    box-shadow var(--pillar-hover-transition),
    z-index 0s;
}

body[data-home] #home-system-map .unified-pillar-card__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--unified-pillar-scene-opacity);
  transition: opacity 0.35s ease;
}

body[data-home] #home-system-map .unified-pillar-card__scene .home-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: unset;
  align-self: stretch;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: var(--scene-bg, #1a222c);
  overflow: hidden;
}

body[data-home] #home-system-map .unified-pillar-card__scene .home-scene__svg {
  width: 100%;
  height: 100%;
  display: block;
}

body[data-home] #home-system-map .unified-pillar-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--unified-pillar-overlay-opacity);
  transition: opacity 0.28s ease;
  background:
    radial-gradient(ellipse 75% 60% at 50% 38%, rgba(4, 8, 14, 0.2) 0%, rgba(4, 8, 14, 0.5) 100%),
    linear-gradient(
      180deg,
      rgba(4, 8, 14, 0.42) 0%,
      rgba(4, 8, 14, 0.62) 50%,
      rgba(4, 8, 14, 0.82) 100%
    );
}

body[data-home] #home-system-map .unified-pillar-card__content {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-sm);
  padding: clamp(1rem, 2vw, 1.25rem) clamp(1rem, 2vw, 1.25rem) 0.65rem;
  min-height: 0;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

body[data-home] #home-system-map .unified-pillar-card__content > .system-arch-pillar,
body[data-home] #home-system-map .unified-pillar-card__content > .system-arch-pillar-note,
body[data-home] #home-system-map .unified-pillar-card__content > .system-arch-flagship,
body[data-home] #home-system-map .unified-pillar-card__content > .system-arch-modules--supporting {
  flex: 0 0 auto;
}

body[data-home] #home-system-map .unified-pillar-card__content > .system-arch-outcome {
  flex: 0 0 auto;
  margin-top: 0;
}

body[data-home] #home-system-map .unified-pillar-card__content > .system-arch-node {
  flex: 0 0 auto;
  display: block;
  margin-bottom: 0;
}

body[data-home] #home-system-map .unified-pillar-card__content > .system-arch-node--related .system-arch-case {
  color: var(--color-text-muted);
  font-size: calc(0.8125rem * var(--pillar-type-scale, 1));
}

body[data-home] #home-system-map .unified-pillar-card__content .system-arch-pillar {
  font-size: calc(1.0625rem * var(--pillar-type-scale, 1));
  line-height: 1.28;
  letter-spacing: 0.04em;
}

body[data-home] #home-system-map .unified-pillar-card__content .system-arch-pillar-note {
  font-size: calc(0.72rem * var(--pillar-type-scale, 1));
  line-height: 1.45;
  margin-bottom: 0;
  height: auto;
  max-height: none;
  overflow: visible;
}

body[data-home] #home-system-map .unified-pillar-card__content .system-arch-case {
  font-size: calc(0.8125rem * var(--pillar-type-scale, 1));
}

body[data-home] #home-system-map .unified-pillar-card__content .system-arch-flagship-label {
  font-size: calc(0.62rem * var(--pillar-type-scale, 1));
}

body[data-home] #home-system-map .unified-pillar-card__content .system-arch-flagship-desc {
  font-size: calc(0.7rem * var(--pillar-type-scale, 1));
  line-height: 1.45;
}

body[data-home] #home-system-map .unified-pillar-card__content .system-arch-node-hint {
  font-size: calc(0.72rem * var(--pillar-type-scale, 1));
}

body[data-home] #home-system-map .unified-pillar-card__content .system-arch-modules {
  font-size: calc(0.75rem * var(--pillar-type-scale, 1));
  line-height: 1.4;
}

body[data-home] #home-system-map .unified-pillar-card__content .system-arch-outcome {
  font-size: calc(0.68rem * var(--pillar-type-scale, 1));
  line-height: 1.4;
}

body[data-home] #home-system-map .system-arch-flagship {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
}

body[data-home] #home-system-map .system-arch-flagship-label {
  margin: 0 0 0.2rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(196, 168, 120, 0.62);
}

body[data-home] #home-system-map .system-arch-flagship .system-arch-case {
  display: inline;
  font-weight: 600;
  color: var(--color-accent-text);
  text-decoration: none;
  padding: 0;
  background: none;
  border: none;
}

body[data-home] #home-system-map .system-arch-flagship .system-arch-case:hover,
body[data-home] #home-system-map .system-arch-flagship .system-arch-case:focus-visible {
  text-decoration: underline;
  color: var(--structural-line);
}

body[data-home] #home-system-map .system-arch-flagship-desc {
  margin: 0.35rem 0 0;
  line-height: 1.52;
  color: var(--color-text-muted);
}

body[data-home] #home-system-map .system-arch-modules--supporting {
  display: flex;
  flex-direction: column;
  gap: 0.48rem;
  margin: 0;
  padding-left: 0;
  line-height: 1.55;
  list-style: none;
}

body[data-home] #home-system-map .system-arch-modules--supporting li {
  margin: 0;
  padding: 0;
}

body[data-home] #home-system-map .system-arch-modules--supporting a {
  display: inline;
  padding: 0;
  margin: 0;
  border-radius: 0;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

body[data-home] #home-system-map .system-arch-modules--supporting a:hover {
  color: var(--color-accent-text);
  text-decoration: underline;
  background: none;
}

body[data-home] #home-system-map .system-arch-modules--supporting a:focus-visible {
  color: var(--color-accent-text);
  text-decoration: underline;
  background: rgba(26, 38, 52, 0.35);
  outline: none;
}

body[data-home] #home-system-map .system-arch-outcome {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  line-height: 1.48;
  color: var(--color-text-muted);
  font-style: italic;
}

body[data-home] #home-system-map .pillar-band-divider {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(196, 168, 120, 0.11);
  align-self: stretch;
}

body[data-home] #home-system-map .system-arch-flagship.is-sys-share-active {
  background: none;
  box-shadow: none;
}

body[data-home] #home-system-map .system-arch-flagship.is-sys-share-active .system-arch-flagship-label,
body[data-home] #home-system-map .system-arch-flagship.is-sys-share-active .system-arch-case {
  color: var(--color-accent-text);
  text-shadow: 0 0 18px rgba(196, 168, 120, 0.18);
}

body[data-home] #home-system-map .unified-pillar-card:hover,
body[data-home] #home-system-map .unified-pillar-card:focus-within,
body[data-home] #home-system-map .unified-pillar-card.is-scene-active {
  --unified-pillar-scene-opacity: 0.48;
  --unified-pillar-overlay-opacity: 1;
  z-index: 4;
  transform: translateY(-0.35rem) scale(1.015);
  border-color: var(--scene-border-active, rgba(198, 175, 130, 0.45));
  box-shadow:
    inset 0 0 0 1px var(--scene-glow, rgba(198, 175, 130, 0.12)),
    0 0 28px rgba(196, 168, 120, 0.14),
    0 18px 40px rgba(0, 0, 0, 0.2);
}

body[data-home] #home-system-map .unified-pillar-card:hover .unified-pillar-card__scene .home-scene,
body[data-home] #home-system-map .unified-pillar-card:focus-within .unified-pillar-card__scene .home-scene,
body[data-home] #home-system-map .unified-pillar-card.is-scene-active .unified-pillar-card__scene .home-scene {
  filter: brightness(0.88);
}

body[data-home] #home-system-map .unified-pillar-card:hover .unified-pillar-card__content,
body[data-home] #home-system-map .unified-pillar-card:focus-within .unified-pillar-card__content,
body[data-home] #home-system-map .unified-pillar-card.is-scene-active .unified-pillar-card__content {
  text-shadow: 0 1px 3px rgba(4, 8, 14, 0.55);
}

body[data-home] #home-system-map .unified-pillar-card .system-arch-pillar {
  margin-top: 0;
}

body[data-home] #home-system-map .pillar-title-link.concept-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  gap: 0.15rem;
  padding-bottom: 0.15rem;
  color: var(--color-text);
  text-align: center;
}

body[data-home] #home-system-map .pillar-title-link .concept-link__line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
}

body[data-home] #home-system-map .unified-pillar-card:hover .pillar-title-link .concept-link__line,
body[data-home] #home-system-map .unified-pillar-card:focus-within .pillar-title-link .concept-link__line,
body[data-home] #home-system-map .unified-pillar-card.is-scene-active .pillar-title-link .concept-link__line,
body[data-home] #home-system-map .pillar-title-link:hover .concept-link__line,
body[data-home] #home-system-map .pillar-title-link:focus-visible .concept-link__line {
  transform: scaleX(1);
  transform-origin: center center;
  opacity: 1;
}

body[data-home] #home-system-map .unified-pillar-card:not(:hover):not(:focus-within):not(.is-scene-active) .pillar-title-link:not(:hover):not(:focus-visible):not(.is-arming) .concept-link__line {
  transform-origin: center center;
}

/* Desktop: fixed four-column grid + card-local hover only */
@media (min-width: 72em) {
  body[data-home] #home-system-map .system-arch-columns.pillar-strip {
    --pillar-menu-section-gap: 0.6rem;
    --pillar-menu-footer-gap: 0.65rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--pillar-strip-gap, var(--home-frame-gutter));
    align-items: stretch;
    overflow: visible;
    min-height: var(--pillar-strip-min-height);
  }

  body[data-home] #home-system-map .pillar-strip .unified-pillar-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    max-width: none;
  }

  body[data-home] #home-system-map .pillar-strip .unified-pillar-card__content {
    position: relative;
    z-index: 3;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1px auto auto 1px auto;
    gap: 0;
    align-content: center;
    height: 100%;
    min-height: 0;
    min-width: 0;
    width: 100%;
    padding: clamp(0.9rem, 1.7vw, 1.15rem) clamp(0.9rem, 1.7vw, 1.15rem) 0.65rem;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
  }

  body[data-home] #home-system-map .pillar-strip .unified-pillar-card__content > .system-arch-pillar {
    grid-row: 1;
    align-self: start;
    margin: 0;
    min-width: 0;
    width: 100%;
    max-width: min(18.7rem, 100%);
    margin-inline: auto;
    box-sizing: border-box;
    overflow: hidden;
    padding-bottom: var(--space-xs);
  }

  body[data-home] #home-system-map .pillar-strip .unified-pillar-card__content > .system-arch-pillar-note {
    grid-row: 2;
    align-self: start;
    margin: 0;
    min-width: 0;
    width: 100%;
    max-width: min(18.7rem, 100%);
    margin-inline: auto;
    box-sizing: border-box;
    height: auto;
    max-height: none;
    overflow: visible;
    padding-bottom: var(--space-xs);
  }

  body[data-home] #home-system-map .pillar-strip .unified-pillar-card__content > .pillar-band-divider:first-of-type {
    grid-row: 3;
    align-self: stretch;
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  body[data-home] #home-system-map .pillar-strip .unified-pillar-card__content > .system-arch-flagship {
    grid-row: 4;
    align-self: start;
    margin: 0;
    min-width: 0;
    min-height: 0;
    width: 100%;
    max-width: min(18.7rem, 100%);
    margin-inline: auto;
    box-sizing: border-box;
    overflow: hidden;
    padding-top: var(--space-xs);
    padding-bottom: var(--pillar-menu-section-gap);
  }

  body[data-home] #home-system-map .pillar-strip .unified-pillar-card__content > .system-arch-modules--supporting {
    grid-row: 5;
    align-self: stretch;
    align-items: center;
    margin: 0;
    min-width: 0;
    min-height: 0;
    width: 100%;
    max-width: min(18.7rem, 100%);
    margin-inline: auto;
    box-sizing: border-box;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: var(--pillar-menu-section-gap);
    gap: 0.35rem;
  }

  body[data-home] #home-system-map .pillar-strip .unified-pillar-card__content > .pillar-band-divider:last-of-type {
    grid-row: 6;
    align-self: stretch;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    margin-top: 0;
    margin-bottom: 0;
  }

  body[data-home] #home-system-map .pillar-strip .unified-pillar-card__content > .system-arch-outcome {
    grid-row: 7;
    align-self: start;
    margin-top: 0;
    margin-bottom: 0;
    min-width: 0;
    width: 100%;
    max-width: min(18.7rem, 100%);
    margin-inline: auto;
    box-sizing: border-box;
    overflow: visible;
    height: auto;
    padding-top: var(--pillar-menu-footer-gap);
    padding-bottom: 0;
  }

  body[data-home] #home-system-map .pillar-strip .system-arch-modules--supporting {
    margin: 0;
  }

  body[data-home] #home-system-map .pillar-strip .system-arch-outcome {
    margin-top: 0;
  }

  body[data-home] #home-system-map .pillar-strip .system-arch-pillar-note {
    display: -webkit-box;
    height: auto;
    max-height: calc(2 * 1.45em);
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  body[data-home] #home-system-map .pillar-strip .system-arch-flagship-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    opacity: 0.86;
  }

  body[data-home] #home-system-map .pillar-strip .system-arch-modules--supporting a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
  }

  body[data-home] #home-system-map .pillar-strip .system-arch-outcome {
    display: block;
    opacity: 0.86;
    overflow: visible;
  }

  body[data-home] #home-system-map .pillar-strip.is-pillar-strip-height-locked {
    height: var(--pillar-strip-locked-height);
    min-height: var(--pillar-strip-locked-height);
    max-height: var(--pillar-strip-locked-height);
  }

  body[data-home] #home-system-map .pillar-strip.is-pillar-strip-height-locked .unified-pillar-card {
    height: var(--pillar-strip-locked-height);
    min-height: var(--pillar-strip-locked-height);
    max-height: var(--pillar-strip-locked-height);
  }

}

/* Mobile/tablet: readable without hover expansion */
@media (max-width: 71.98em) {
  body[data-home] #home-system-map .unified-pillar-card__content {
    padding: clamp(1rem, 2.2vw, 1.25rem) clamp(1rem, 2.2vw, 1.25rem) 0.65rem;
    gap: var(--space-sm);
  }

  body[data-home] #home-system-map .unified-pillar-card__content > .system-arch-modules--supporting {
    padding-bottom: 0.15rem;
  }

  body[data-home] #home-system-map .unified-pillar-card__content > .system-arch-outcome {
    margin-top: 0;
    padding-top: 0.35rem;
  }

  body[data-home] #home-system-map .unified-pillar-card__content .system-arch-pillar-note,
  body[data-home] #home-system-map .unified-pillar-card__content .system-arch-flagship-desc,
  body[data-home] #home-system-map .unified-pillar-card__content .system-arch-outcome {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    opacity: 1;
  }

  body[data-home] #home-system-map .unified-pillar-card__content .system-arch-pillar-note {
    line-height: 1.52;
  }

  body[data-home] #home-system-map .unified-pillar-card__content .system-arch-flagship-desc {
    line-height: 1.55;
  }

  body[data-home] #home-system-map .unified-pillar-card__content .system-arch-modules--supporting {
    gap: 0.5rem;
    line-height: 1.52;
  }

  body[data-home] #home-system-map .unified-pillar-card__content .system-arch-modules--supporting a {
    display: inline;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-home] #home-system-map .pillar-strip .unified-pillar-card,
  body[data-home] #home-system-map .unified-pillar-card__scene,
  body[data-home] #home-system-map .unified-pillar-card__overlay {
    --pillar-hover-transition: 0.01ms;
    transition-duration: 0.01ms;
  }

  body[data-home] #home-system-map .unified-pillar-card:hover,
  body[data-home] #home-system-map .unified-pillar-card:focus-within,
  body[data-home] #home-system-map .unified-pillar-card.is-scene-active {
    transform: none;
  }
}
body[data-home] #home-system-map .system-arch-column.is-sys-share-active .pillar-title-link,
body[data-home] #home-system-map .system-arch-column:has(.is-sys-share-active) .pillar-title-link {
  color: var(--gold-brass-light);
}
body[data-home] #home-system-map .system-arch-node:last-child {
  margin-bottom: 0;
}
body[data-home] #home-system-map .system-arch-column::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
body[data-home] #home-system-map .system-arch-body--home.has-sys-share-active .system-arch-column::after {
  opacity: 0.6;
}
body[data-home] #home-system-map .system-arch-column.is-sys-share-active,
body[data-home] #home-system-map .system-arch-column:has(.is-sys-share-active) {
  border-color: rgba(198, 169, 107, 0.48);
  box-shadow: inset 0 0 0 1px rgba(198, 169, 107, 0.18), 0 0 32px rgba(196, 168, 120, 0.14);
}
body[data-home] #home-system-map .system-arch-column.is-sys-share-active::after,
body[data-home] #home-system-map .system-arch-column:has(.is-sys-share-active)::after {
  opacity: 0;
}
body[data-home] #home-system-map .system-arch-pillar {
  font-size: 1rem;
}
body[data-home] #home-system-map .system-arch-column.is-sys-share-active .system-arch-pillar a,
body[data-home] #home-system-map .system-arch-column:has(.is-sys-share-active) .system-arch-pillar a {
  color: var(--gold-brass-light);
  text-shadow: 0 0 18px rgba(196, 168, 120, 0.22);
}
body[data-home] #home-system-map .system-arch-pillar-note {
  margin-bottom: 0;
}
body[data-home] #home-system-map .system-arch-node {
  margin-bottom: 0;
  padding: calc(var(--space-xs) + 0.05rem) 0;
}
body[data-home] #home-system-map .system-arch-node.is-sys-share-active {
  background: rgba(26, 38, 52, 0.72);
  border-color: rgba(196, 168, 120, 0.22);
  box-shadow: inset 0 0 0 1px rgba(196, 168, 120, 0.1), 0 0 18px rgba(196, 168, 120, 0.08);
}
body[data-home] #home-system-map .system-arch-modules {
  margin-top: calc(var(--space-2xs) + 0.05rem);
}
body[data-home] #home-system-map .system-arch-modules li {
  padding: 0.1rem 0.2rem;
  border-radius: var(--radius-sm);
  transition: background 0.25s ease, color 0.25s ease;
}

body[data-home] #home-system-map .system-arch-modules--supporting li {
  padding: 0;
  border-radius: 0;
}
body[data-home] #home-system-map .system-arch-modules li.is-sys-share-active {
  background: color-mix(in srgb, var(--color-surface) 88%, rgba(198, 169, 107, 0.08));
}
body[data-home] #home-system-map .system-arch-modules li.is-sys-share-active a {
  color: var(--color-accent-text);
}
body[data-home] .pillar-card--scene.is-sys-share-active .home-scene {
  border-color: var(--scene-border-active, rgba(198, 175, 130, 0.45));
  box-shadow:
    0 0 0 1px var(--scene-glow, rgba(198, 175, 130, 0.12)),
    0 0 28px rgba(196, 168, 120, 0.14),
    0 4px 18px rgba(0, 0, 0, 0.32);
}
@media (max-width: 47.98em) {
  body[data-home] #home-system-map .system-arch-columns {
    grid-template-columns: 1fr;
  }
  body[data-home] #home-system-map .unified-pillar-card {
    min-height: 24rem;
  }
}
@media (min-width: 48em) and (max-width: 71.98em) {
  body[data-home] #home-system-map .system-arch-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body[data-home] #home-system-map .unified-pillar-card {
    min-height: 24rem;
  }
}
@media (min-width: 72em) {
  body[data-home] #home-system-map .system-arch-columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--home-frame-gutter);
  }
}

/* Compact skill-filter strip: same width as .system-arch-body / diagram */
.system-arch-skill-panel {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 var(--space-sm);
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(168, 176, 188, 0.22);
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
}
.system-arch-skill-panel__title {
  margin: 0 0 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted-quiet, var(--color-text-muted));
}
.system-arch-skill-groups {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.7rem;
  max-width: 100%;
}
.system-arch-skill-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.35rem;
  max-width: 100%;
}
.system-arch-skill-group--compact {
  max-width: 100%;
}
.system-arch-skill-group__title {
  flex: 0 0 auto;
  margin: 0;
  margin-inline-end: 0.1rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-muted-quiet, var(--color-text-muted));
}
.system-arch-skill-group__chips {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.system-arch-skill-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.55rem;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(168, 182, 198, 0.18);
  background: rgba(17, 25, 36, 0.68);
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.72rem;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.system-arch-skill-chip:hover,
.system-arch-skill-chip:focus-visible,
.system-arch-skill-chip.is-sys-share-active {
  color: var(--gold-brass-light);
  border-color: rgba(196, 168, 120, 0.42);
  background: rgba(30, 40, 54, 0.84);
  box-shadow: 0 0 0 1px rgba(196, 168, 120, 0.12), 0 0 24px rgba(196, 168, 120, 0.1);
}

/* System map: tighter vertical rhythm so four columns + legend fit without zoom */
.system-map-page .page-header {
  padding: var(--space-md) 0 var(--space-sm);
}
.system-map-page .system-arch-header {
  padding-bottom: 0;
}
.system-map-page .system-arch-title {
  margin-bottom: var(--space-2xs);
}
.system-map-page .system-arch-tagline {
  margin: 0 0 var(--space-sm);
}
.system-map-page .system-arch-lede {
  line-height: 1.55;
  font-size: 0.875rem;
}
.system-map-page .system-arch-body {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-lg);
}
.system-map-page .system-arch-diagram {
  margin-top: 0;
}
.system-map-page .system-arch-columns {
  gap: var(--space-sm);
}
.system-map-page .system-arch-column {
  padding: var(--space-xs) var(--space-sm) var(--space-sm);
}
.system-map-page .system-arch-pillar {
  font-size: 1.0625rem;
  margin: 0 0 0.1rem;
}
.system-map-page .system-arch-pillar-note {
  margin: 0 0 var(--space-xs);
  line-height: 1.35;
  font-size: 0.6875rem;
}
.system-map-page .system-arch-node {
  margin-bottom: var(--space-xs);
  padding: 0.4rem 0;
}
.system-map-page .system-arch-node-hint {
  margin: 0.3rem 0 0;
  line-height: 1.4;
  font-size: 0.7rem;
}
.system-map-page .system-arch-modules {
  margin: var(--space-2xs) 0 0;
  line-height: 1.34;
  font-size: 0.78rem;
}
.system-map-page .system-arch-sublinks {
  margin: var(--space-sm) 0 0;
  padding: var(--space-2xs) var(--space-xs);
  line-height: 1.45;
}
.system-map-page .system-arch-crosscut {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
}
.system-map-page .system-arch-subhead {
  font-size: 1.125rem;
  margin: 0 0 var(--space-2xs);
}
.system-map-page .system-arch-crosscut-lede {
  margin: 0 0 var(--space-sm);
  max-width: none;
  font-size: 0.85rem;
  line-height: 1.5;
}
@media (min-width: 48em) {
  .system-map-page .system-arch-crosscut-lede {
    white-space: nowrap;
  }
}
.system-map-page .system-arch-crosscut-grid {
  gap: var(--space-sm);
}
.system-map-page .system-arch-node--flat {
  padding: var(--space-sm);
}
.system-map-page .system-arch-pillar-cta {
  margin: var(--space-sm) 0 0;
  font-size: 0.875rem;
}
.system-map-page .system-arch-legend {
  margin-top: var(--space-md);
  padding: var(--space-sm);
}
.system-map-page .system-arch-legend-title {
  margin: 0 0 var(--space-xs);
}
.system-map-page .system-arch-legend-text {
  margin: 0 0 var(--space-sm);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.system-map-page .system-arch-legend-list {
  font-size: 0.78rem;
  line-height: 1.5;
}
.system-map-page .system-arch-legend-list li {
  margin-bottom: var(--space-xs);
}

.system-map-page .system-arch-legend--controls {
  display: grid;
  gap: 0.4rem 0.75rem;
  max-width: none;
  margin: 0 0 var(--space-sm);
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
}
.system-map-page .system-arch-legend__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.55rem;
}
.system-map-page .system-arch-legend--controls .system-arch-legend-title,
.system-map-page .system-arch-legend--controls .system-arch-legend-text {
  margin: 0;
}
.system-map-page .system-arch-legend--controls .system-arch-legend-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.3;
}
.system-map-page .system-arch-legend--controls .system-arch-legend-list li {
  margin: 0;
  padding: 0.2rem 0.5rem;
  border: 1px solid rgba(168, 182, 198, 0.18);
  border-radius: 999px;
  background: rgba(17, 25, 36, 0.68);
}
@media (min-width: 60em) {
  .system-map-page .system-arch-skill-panel,
  .system-map-page .system-arch-legend--controls {
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
  }
  .system-map-page .system-arch-skill-panel {
    display: grid;
    gap: 0.35rem 0.8rem;
  }
  .system-map-page .system-arch-skill-panel__title {
    margin: 0.16rem 0 0;
    white-space: nowrap;
  }
  .system-map-page .system-arch-legend--controls {
    align-items: center;
  }
}


/* Full System Map: make shared-practice and skill-filter relationships unmistakable. */
.system-map-page .system-arch-column,
.system-map-page .system-arch-node,
.system-map-page .system-arch-modules li {
  transition: opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.system-map-page .system-arch-body.has-sys-share-active .system-arch-column {
  opacity: 0.24;
}
.system-map-page .system-arch-body.has-sys-share-active .system-arch-column.is-sys-share-active,
.system-map-page .system-arch-body.has-sys-share-active .system-arch-column:has(.is-sys-share-active) {
  opacity: 1;
  border-color: rgba(198, 169, 107, 0.48);
  box-shadow: inset 0 0 0 1px rgba(198, 169, 107, 0.14), 0 0 24px rgba(196, 168, 120, 0.1);
}
.system-map-page .system-arch-body.has-sys-share-active .system-arch-column.is-sys-share-active .system-arch-pillar a,
.system-map-page .system-arch-body.has-sys-share-active .system-arch-column:has(.is-sys-share-active) .system-arch-pillar a {
  color: var(--gold-brass-light);
}
.system-map-page .system-arch-modules li.is-sys-share-active {
  background: color-mix(in srgb, var(--color-surface) 82%, rgba(198, 169, 107, 0.14));
  box-shadow: inset 0 0 0 1px rgba(198, 169, 107, 0.1);
}
.system-map-page .system-arch-modules li.is-sys-share-active a {
  color: var(--gold-brass-light);
}
.system-map-page .system-arch-legend-list li[data-sys-share] {
  cursor: pointer;
}
.system-map-page .system-arch-legend-list li[data-sys-share]:hover,
.system-map-page .system-arch-legend-list li[data-sys-share]:focus-visible,
.system-map-page .system-arch-legend-list li[data-sys-share].is-sys-share-active {
  background: color-mix(in srgb, var(--color-surface) 84%, rgba(198, 169, 107, 0.12));
  box-shadow: inset 0 0 0 1px rgba(198, 169, 107, 0.1);
}
@media (max-width: 59.99em) {
  .system-map-page .system-arch-skill-chip,
  .system-map-page .system-arch-legend-list li[data-sys-share] {
    min-height: var(--touch-min);
    display: inline-flex;
    align-items: center;
  }

  .system-map-page .system-arch-skill-chip {
    padding-block: 0.45rem;
  }
}

/* ---------- Brand System: multi-brand brochure gallery ---------- */
html[data-broch-gallery-lock],
html[data-broch-gallery-lock] body {
  overflow: hidden;
}

/* Brochure gallery sits inside .detail-section like a supporting module */
.broch-gallery-module {
  margin-top: 0;
  max-width: min(var(--reading-measure), 100%);
}

.broch-gallery-intro {
  max-width: 52rem;
  margin: 0 0 var(--space-sm);
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.65;
}

.broch-gallery-intro--support {
  margin-bottom: var(--space-lg);
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.broch-gallery-teasers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

@media (max-width: 900px) {
  .broch-gallery-teasers {
    grid-template-columns: 1fr;
  }
}

.broch-gallery-teaser {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  border-radius: var(--radius-lg);
}

.broch-gallery-teaser:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.broch-gallery-teaser-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.broch-gallery-teaser:hover .broch-gallery-teaser-inner,
.broch-gallery-teaser:focus-visible .broch-gallery-teaser-inner {
  border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-line));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28), 0 0 0 1px color-mix(in srgb, var(--featured-border-brass) 25%, transparent);
  transform: translateY(-2px);
}

.broch-gallery-teaser-thumb {
  position: relative;
  aspect-ratio: 8.5 / 11;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--color-line);
  margin-bottom: var(--space-sm);
}

.broch-gallery-teaser-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}

.broch-gallery-teaser-name {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-2xs);
  color: var(--color-text);
}

.broch-gallery-teaser-caption {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm);
  flex-grow: 1;
}

.broch-gallery-teaser-cta {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent-text);
}

.broch-gallery-open-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-xl);
}

.broch-gallery-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: 0.65rem 1.75rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.broch-gallery-open:hover,
.broch-gallery-open:focus-visible {
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-line));
  background: color-mix(in srgb, var(--color-surface) 100%, transparent);
  color: var(--color-text);
}

.broch-gallery-open:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.broch-gallery-disclaimer {
  max-width: min(var(--reading-measure), 100%);
  margin: 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-line);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* Modal */
.broch-gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-md);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.broch-gallery-modal[hidden] {
  display: none;
}

.broch-gallery-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  cursor: pointer;
}

.broch-gallery-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 77.5rem;
  /* Fit inside dynamic viewport; allow inner scroll so grid never clips without a scrollbar */
  max-height: min(88vh, calc(100dvh - 2 * var(--space-md)));
  margin-block: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.5);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

/* Grid + viewer stacks fill panel height so inner scroll regions get a bounded flex parent */
#broch-gallery-view-grid:not([hidden]),
#broch-gallery-view-viewer:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.broch-gallery-modal__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 5;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  background: rgba(0, 0, 0, 0.2);
  color: var(--color-text-muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius);
  transition: color var(--transition), background var(--transition);
}

.broch-gallery-modal__close:hover,
.broch-gallery-modal__close:focus-visible {
  color: var(--color-text);
  background: rgba(255, 251, 242, 0.12);
}

.broch-gallery-modal__close:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.broch-gallery-modal__head {
  flex-shrink: 0;
  padding: var(--space-lg) var(--space-xl) var(--space-md);
  padding-right: 3.5rem;
  border-bottom: 1px solid var(--color-line);
}

.broch-gallery-modal__head--viewer {
  padding-bottom: var(--space-sm);
}

.broch-gallery-modal__title {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight: 400;
  margin: 0 0 var(--space-2xs);
  letter-spacing: 0.05em;
  color: var(--color-text);
}

.broch-gallery-modal__subtitle {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 42rem;
}

.broch-gallery-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.broch-gallery-modal__body--viewer {
  padding-top: 2.5rem;
}

.broch-gallery-modal__grid-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--space-lg) var(--space-xl);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.broch-gallery-modal__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

@media (max-width: 960px) {
  .broch-gallery-modal__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .broch-gallery-modal__grid {
    grid-template-columns: 1fr;
  }
}

.broch-gallery-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  border-radius: var(--radius-lg);
}

.broch-gallery-tile:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.broch-gallery-tile-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-md);
  background: color-mix(in srgb, var(--color-bg) 55%, var(--color-surface));
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.broch-gallery-tile:hover .broch-gallery-tile-inner,
.broch-gallery-tile:focus-visible .broch-gallery-tile-inner {
  border-color: color-mix(in srgb, var(--color-accent) 32%, var(--color-line));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
  transform: translateY(-3px);
}

.broch-gallery-tile-thumb {
  aspect-ratio: 8.5 / 11;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--color-line);
  margin-bottom: var(--space-sm);
}

.broch-gallery-tile-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}

.broch-gallery-tile-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  margin: 0 0 var(--space-2xs);
  letter-spacing: 0.03em;
  color: var(--color-text);
}

.broch-gallery-tile-caption {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  margin: 0;
}

/* Viewer */
.broch-gallery-viewer {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: row;
}

@media (max-width: 900px) {
  .broch-gallery-viewer {
    flex-direction: column;
    overflow-y: auto;
  }
}

.broch-gallery-viewer__stage {
  position: relative;
  flex: 1 1 72%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-md) var(--space-lg);
  background: color-mix(in srgb, var(--color-bg) 70%, transparent);
  border-right: 1px solid var(--color-line);
}

@media (max-width: 900px) {
  .broch-gallery-viewer__stage {
    flex: 0 0 auto;
    border-right: none;
    border-bottom: 1px solid var(--color-line);
  }
}

.broch-gallery-viewer__frame {
  position: relative;
  flex: 1 1 auto;
  min-height: min(52vh, 640px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  border-radius: var(--radius);
  border: 1px solid var(--color-line);
  background: rgba(0, 0, 0, 0.32);
}

.broch-gallery-viewer__frame img {
  max-width: 100%;
  max-height: min(52vh, 640px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.broch-gallery-viewer__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  color: var(--color-text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  z-index: 2;
}

.broch-gallery-viewer__arrow:hover,
.broch-gallery-viewer__arrow:focus-visible {
  border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-line));
  background: var(--color-surface);
}

.broch-gallery-viewer__arrow:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.broch-gallery-viewer__arrow--prev {
  left: var(--space-sm);
}

.broch-gallery-viewer__arrow--next {
  right: var(--space-sm);
}

.broch-gallery-viewer__strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-line);
}

.broch-gallery-viewer__strip-label {
  width: 100%;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2xs);
}

.broch-gallery-strip-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  width: 4.75rem;
  padding: 2px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.broch-gallery-strip-btn:hover,
.broch-gallery-strip-btn:focus-visible {
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-line));
}

.broch-gallery-strip-btn[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--featured-border-brass) 55%, var(--color-line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--featured-border-brass) 35%, transparent);
}

.broch-gallery-strip-btn img {
  display: block;
  width: 100%;
  aspect-ratio: 8.5 / 11;
  object-fit: contain;
  object-position: center top;
  border-radius: 2px;
}

.broch-gallery-strip-btn span {
  display: block;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-top: 4px;
  text-align: center;
}

.broch-gallery-viewer__meta {
  flex: 0 0 28%;
  max-width: 22rem;
  min-width: min(100%, 17rem);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  overflow-y: auto;
}

@media (max-width: 900px) {
  .broch-gallery-viewer__meta {
    flex: 1 1 auto;
    max-width: none;
  }
}

.broch-gallery-meta__title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  margin: 0;
  letter-spacing: 0.04em;
}

.broch-gallery-meta__caption {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.broch-gallery-meta__note {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-text);
}

.broch-gallery-meta__note2 {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.broch-gallery-meta__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-md);
}

.broch-gallery-meta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.broch-gallery-meta__btn--primary {
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-line);
}

.broch-gallery-meta__btn--primary:hover,
.broch-gallery-meta__btn--primary:focus-visible {
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-line));
  background: rgba(255, 251, 242, 0.08);
}

.broch-gallery-meta__btn--ghost {
  color: var(--color-accent-text);
  background: transparent;
  border: 1px solid transparent;
  text-transform: none;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.broch-gallery-meta__btn--ghost:hover,
.broch-gallery-meta__btn--ghost:focus-visible {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.broch-gallery-meta__btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

a.broch-gallery-meta__btn {
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
}

a.broch-gallery-meta__btn--primary {
  color: var(--color-text);
}

.broch-gallery-meta__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.broch-gallery-meta__row .broch-gallery-meta__btn {
  flex: 1 1 auto;
}

/* ---------- Structured Review Log module: sanitized worksheet mockup (1.html) ---------- */
.worksheet-artifact-section {
  max-width: var(--content-rail-max);
  margin-inline: auto;
  padding: 0 var(--space-md) var(--space-xl);
}

.worksheet-artifact {
  margin: 0;
}

.worksheet-mockup {
  position: relative;
  margin: 0;
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1rem, 3vw, 1.5rem) clamp(1.25rem, 3vw, 1.75rem);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 94%, var(--color-bg));
  border: 1px solid var(--color-line);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--color-text) 4%, transparent),
    0 12px 40px color-mix(in srgb, #000 35%, transparent);
}

/* Ingestion → extraction → paste → log (operator mental model) */
.worksheet-mockup__flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.45rem;
  margin-bottom: var(--space-md);
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--color-line) 150%, transparent);
  background: color-mix(in srgb, var(--color-bg) 72%, transparent);
  font-family: var(--font-sans);
  font-size: clamp(0.58rem, 1.9vw, 0.68rem);
  line-height: 1.35;
  color: var(--color-text-muted);
}

.worksheet-mockup__flow-node {
  color: color-mix(in srgb, var(--color-text) 88%, var(--color-text-muted));
  font-weight: 500;
  text-align: center;
}

.worksheet-mockup__flow-bracket {
  color: var(--color-text-muted);
  font-weight: 400;
  opacity: 0.72;
}

.worksheet-mockup__flow-arrow {
  color: color-mix(in srgb, var(--pillar-ai) 65%, var(--color-text-muted));
  font-weight: 400;
  opacity: 0.88;
  user-select: none;
}

.worksheet-mockup__panel {
  position: relative;
  z-index: 1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-line) 180%, transparent);
  background: color-mix(in srgb, var(--color-bg) 92%, #1a1f28);
}

.worksheet-mockup__grid {
  display: grid;
  grid-template-columns: minmax(7.25rem, 9rem) repeat(5, minmax(0, 1fr));
  grid-auto-rows: minmax(2.35rem, auto);
  font-family: var(--font-sans);
  font-size: 0.7rem;
}

@media (min-width: 640px) {
  .worksheet-mockup__grid {
    font-size: 0.75rem;
  }
}

.worksheet-mockup__cell {
  padding: 0.45rem 0.4rem;
  border-right: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}

.worksheet-mockup__cell--corner {
  justify-content: flex-start;
  padding-left: 0.5rem;
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  color: var(--color-text-muted);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.worksheet-mockup__cell--h {
  font-weight: 600;
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  letter-spacing: 0.02em;
}

.worksheet-mockup__cell--h.worksheet-mockup__cell--formula-col {
  background: color-mix(in srgb, var(--pillar-ai) 20%, var(--color-surface));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--pillar-ai) 55%, transparent);
}

.worksheet-mockup__formula-hint {
  display: inline-block;
  margin-left: 0.2em;
  font-size: 0.72em;
  font-weight: 700;
  vertical-align: super;
  color: color-mix(in srgb, var(--pillar-ai) 75%, var(--color-text-muted));
  opacity: 0.95;
}

.worksheet-mockup__inline-hint {
  display: inline;
  font-size: 0.78em;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-text-muted);
}

.worksheet-mockup__section {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.42rem 0.55rem 0.32rem;
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-muted) 95%, transparent);
  background: color-mix(in srgb, var(--color-bg) 52%, var(--color-surface));
  border-top: 1px solid color-mix(in srgb, var(--color-line) 200%, transparent);
  border-bottom: 1px solid var(--color-line);
}

#ws-section-input {
  border-top-color: color-mix(in srgb, var(--color-line) 140%, transparent);
}

.worksheet-mockup__cell--formula-col {
  background: color-mix(in srgb, var(--pillar-ai) 11%, transparent);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--pillar-ai) 48%, transparent);
}

.worksheet-mockup__cell--rollup.worksheet-mockup__cell--formula-col,
.worksheet-mockup__cell--summary.worksheet-mockup__cell--formula-col {
  background: color-mix(in srgb, var(--pillar-ai) 18%, var(--color-surface));
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--pillar-ai) 55%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--pillar-ai) 22%, transparent);
}

.worksheet-mockup__cell--label {
  justify-content: flex-start;
  padding-left: 0.55rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--color-text) 88%, var(--color-text-muted));
  background: color-mix(in srgb, var(--color-surface) 40%, transparent);
  font-size: 0.68rem;
}

.worksheet-mockup__cell--muted {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.worksheet-mockup__cell--rollup {
  background: color-mix(in srgb, var(--pillar-ai) 12%, var(--color-surface));
  color: var(--color-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pillar-ai) 22%, transparent);
}

.worksheet-mockup__footer-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.55rem 0.65rem;
  font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;
  font-size: 0.6rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-text-muted);
  background: color-mix(in srgb, var(--color-bg) 78%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--color-line) 180%, transparent);
  letter-spacing: 0.01em;
}

.worksheet-mockup__cell--summary {
  background: color-mix(in srgb, var(--structural-line) 8%, var(--color-surface));
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  position: relative;
}

.worksheet-mockup__cell--summary::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 2px;
  border: 1px solid color-mix(in srgb, var(--structural-line) 35%, transparent);
  pointer-events: none;
}

.worksheet-mockup__cell--out-strong {
  background: color-mix(in srgb, var(--structural-line) 10%, var(--color-surface));
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  position: relative;
}

.worksheet-mockup__cell--out-strong::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 2px;
  border: 1px solid color-mix(in srgb, var(--structural-line) 42%, transparent);
  pointer-events: none;
}

.worksheet-mockup__cell--out-strong.worksheet-mockup__cell--formula-col {
  background: color-mix(in srgb, var(--pillar-ai) 16%, var(--color-surface));
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--pillar-ai) 58%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--pillar-ai) 26%, transparent);
}

.worksheet-mockup__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.worksheet-mockup__chip--active {
  color: color-mix(in srgb, #a8d4b8 75%, var(--color-text));
  background: color-mix(in srgb, #2d4a38 45%, var(--color-bg));
  border: 1px solid color-mix(in srgb, #5a8f6a 35%, transparent);
}

.worksheet-mockup__chip--review {
  color: color-mix(in srgb, #e8d4a8 85%, var(--color-text));
  background: color-mix(in srgb, #4a3d22 50%, var(--color-bg));
  border: 1px solid color-mix(in srgb, #8f7a4a 32%, transparent);
}

.worksheet-mockup__chip--complete {
  color: color-mix(in srgb, #b8c8dc 90%, var(--color-text));
  background: color-mix(in srgb, #2a3548 55%, var(--color-bg));
  border: 1px solid color-mix(in srgb, var(--color-accent) 28%, transparent);
}

.worksheet-mockup__chip--hold {
  color: color-mix(in srgb, var(--color-text-muted) 92%, var(--color-text));
  background: color-mix(in srgb, var(--color-surface) 80%, var(--color-bg));
  border: 1px solid var(--color-line);
}

.worksheet-mockup__check {
  display: inline-flex;
  width: 0.85rem;
  height: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  border-radius: 2px;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  color: color-mix(in srgb, var(--color-accent-text) 80%, var(--color-text));
}

.worksheet-mockup__check--on::after {
  content: "✓";
  line-height: 1;
}

.worksheet-artifact__caption {
  margin-top: var(--space-md);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 48rem;
}

@media (max-width: 639px) {
  .worksheet-mockup {
    padding: var(--space-sm) 0.65rem;
  }

  .worksheet-mockup__flow {
    justify-content: flex-start;
    padding: 0.5rem 0.55rem;
  }

  .worksheet-mockup__flow-arrow {
    flex: 0 0 auto;
  }
}

/* ---------- Page image gallery (opt-in: main[data-page-gallery]) ---------- */
body.page-image-gallery-open {
  overflow: hidden;
}

/* [hidden] must win: a plain display:grid here overrides the UA hidden rule */
.page-image-gallery[hidden] {
  display: none !important;
}

.page-image-gallery {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  justify-items: center;
  padding: var(--space-md);
  box-sizing: border-box;
}

.page-image-gallery__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 12, 0.94);
  cursor: zoom-out;
}

.page-image-gallery__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(230, 234, 240, 0.18);
  border-radius: 8px;
  background: rgba(18, 20, 26, 0.85);
  color: rgba(236, 238, 242, 0.92);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.page-image-gallery__close:hover,
.page-image-gallery__close:focus-visible {
  background: rgba(32, 36, 44, 0.95);
  border-color: rgba(198, 169, 107, 0.35);
  outline: none;
}

.page-image-gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.75rem;
  height: min(4.5rem, 18vh);
  border: 1px solid rgba(230, 234, 240, 0.15);
  border-radius: 8px;
  background: rgba(18, 20, 26, 0.72);
  color: rgba(236, 238, 242, 0.9);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.page-image-gallery__arrow:hover,
.page-image-gallery__arrow:focus-visible {
  background: rgba(32, 36, 44, 0.92);
  border-color: rgba(198, 169, 107, 0.32);
  outline: none;
}

.page-image-gallery__arrow--prev {
  left: max(var(--space-sm), env(safe-area-inset-left));
}

.page-image-gallery__arrow--next {
  right: max(var(--space-sm), env(safe-area-inset-right));
}

.page-image-gallery__subtitle {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0 0 var(--space-sm);
  padding: 0 var(--space-lg);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(198, 169, 107, 0.88);
  text-align: center;
  max-width: min(40rem, 100%);
  line-height: 1.4;
}

.page-image-gallery__subtitle[hidden] {
  display: none !important;
}

.page-image-gallery__stage {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  max-width: 100%;
  max-height: min(86vh, calc(100vh - 7rem));
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.page-image-gallery__single:not([hidden]) {
  display: contents;
}

.page-image-gallery__single[hidden] {
  display: none !important;
}

.page-image-gallery__compare {
  position: relative;
  max-width: 100%;
  max-height: inherit;
}

.page-image-gallery__compare[hidden] {
  display: none !important;
}

.page-image-gallery__compare-inner {
  position: relative;
  display: inline-block;
  max-width: min(96vw, 100%);
  width: min(60vw, 72rem);
  max-height: min(84vh, calc(100vh - 8rem));
  vertical-align: middle;
  --compare-pct: 50%;
  --compare-pct-inv: 50%;
  touch-action: none;
  cursor: grab;
}

.page-image-gallery__compare-inner:active {
  cursor: grabbing;
}

.page-image-gallery__img-before {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(84vh, calc(100vh - 8rem));
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid rgba(230, 234, 240, 0.12);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  user-select: none;
}

.page-image-gallery__img-after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 10px;
  border: 1px solid rgba(230, 234, 240, 0.12);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  clip-path: inset(0 var(--compare-pct-inv) 0 0);
  pointer-events: none;
  user-select: none;
}

.page-image-gallery__compare-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--compare-pct);
  width: 2px;
  transform: translateX(-50%);
  background: rgba(250, 251, 252, 0.92);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 0 20px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 2;
}

.page-image-gallery__compare-handle {
  position: absolute;
  top: 50%;
  left: var(--compare-pct);
  z-index: 3;
  transform: translate(-50%, -50%);
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(230, 234, 240, 0.25);
  border-radius: 999px;
  background: rgba(18, 20, 26, 0.88);
  color: rgba(236, 238, 242, 0.95);
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.page-image-gallery__compare-handle::before {
  content: '';
  display: block;
  width: 0.35rem;
  height: 1.1rem;
  border-inline: 2px solid currentColor;
  border-block: 0;
  box-sizing: border-box;
  opacity: 0.85;
}

.page-image-gallery__compare-handle:hover,
.page-image-gallery__compare-handle:focus-visible {
  background: rgba(32, 36, 44, 0.95);
  border-color: rgba(198, 169, 107, 0.4);
  outline: none;
}

.page-image-gallery__compare-handle:active {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(0.98);
}

.page-image-gallery__img {
  max-width: 100%;
  max-height: min(88vh, calc(100vh - 6rem));
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid rgba(230, 234, 240, 0.12);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

.page-image-gallery__img--leaving {
  transition: opacity 0.15s ease, transform 0.15s ease;
  opacity: 0;
  transform: translateX(var(--gallery-leave-x, -24px));
}

.page-image-gallery__img--entering {
  animation: pageImageGalleryEnter 0.28s ease forwards;
}

@keyframes pageImageGalleryEnter {
  from {
    opacity: 0;
    transform: translateX(var(--gallery-enter-x, 24px));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-image-gallery__img--leaving,
  .page-image-gallery__img--entering,
  .page-image-gallery__img-before.page-image-gallery__img--leaving,
  .page-image-gallery__img-after.page-image-gallery__img--leaving,
  .page-image-gallery__img-before.page-image-gallery__img--entering,
  .page-image-gallery__img-after.page-image-gallery__img--entering {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.page-image-gallery__img-before.page-image-gallery__img--leaving,
.page-image-gallery__img-after.page-image-gallery__img--leaving {
  transition: opacity 0.15s ease, transform 0.15s ease;
  opacity: 0;
  transform: translateX(var(--gallery-leave-x, -24px));
}

.page-image-gallery__img-before.page-image-gallery__img--entering,
.page-image-gallery__img-after.page-image-gallery__img--entering {
  animation: pageImageGalleryEnter 0.28s ease forwards;
}

.page-image-gallery__caption {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  grid-row: 3;
  margin: var(--space-md) 0 0;
  padding: 0 var(--space-xl);
  max-width: min(52rem, 100%);
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(210, 214, 222, 0.88);
  text-align: center;
}

.page-image-gallery__caption:empty {
  display: none;
}

.page-image-gallery__counter {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  grid-row: 4;
  margin: var(--space-xs) 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: rgba(180, 186, 198, 0.72);
  text-align: center;
}

.page-image-gallery__counter:empty {
  display: none;
}

.page-image-gallery-source {
  cursor: zoom-in;
}

.page-image-gallery-source:focus-visible {
  outline: 2px solid rgba(198, 169, 107, 0.55);
  outline-offset: 3px;
}

@media (max-width: 36em) {
  .page-image-gallery__arrow {
    width: 2.25rem;
    height: min(4rem, 22vh);
    font-size: 1.4rem;
  }

  .page-image-gallery__compare-inner {
    width: min(96vw, 100%);
  }
}

/* ---------- Creative Practice (editorial width hierarchy) ---------- */
body.creative-practice-page .practice-opening {
  max-width: 45rem;
  margin: var(--space-sm) auto 0;
  text-align: left;
}
body.creative-practice-page .practice-opening__lead {
  margin: 0 0 0.85rem;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  line-height: 1.45;
  color: var(--text-primary);
}
body.creative-practice-page .practice-opening__support {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

body.creative-practice-page .practice-opening__support:last-child {
  margin-bottom: 0;
}
body.creative-practice-page .practice-notebook {
  max-width: 62rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 2.4rem) clamp(3rem, 6vw, 4.5rem);
}
body.creative-practice-page .practice-section {
  padding: clamp(1.5rem, 3.5vw, 2.25rem) 0;
  border-top: 1px solid rgba(168, 182, 198, 0.12);
}
body.creative-practice-page .practice-section:first-of-type {
  border-top: none;
}
/* Section rhythm */
body.creative-practice-page #music.practice-section {
  padding-top: clamp(0.75rem, 2vw, 1.15rem);
  padding-bottom: clamp(1.25rem, 3vw, 1.75rem);
}
body.creative-practice-page #how-the-work-evolved.practice-section {
  padding-top: clamp(2.5rem, 5.5vw, 3.75rem);
  padding-bottom: clamp(1.75rem, 4vw, 2.5rem);
}
body.creative-practice-page #visual-worlds.practice-section,
body.creative-practice-page #writing.practice-section {
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
  padding-bottom: clamp(1.5rem, 3.5vw, 2.15rem);
}
body.creative-practice-page #why-systems.practice-section {
  padding-top: clamp(2.75rem, 6vw, 4rem);
  padding-bottom: clamp(2.25rem, 5vw, 3.25rem);
}
/* Prose measure: titles + notes */
body.creative-practice-page .practice-section__title {
  margin: 0 auto 0.65rem;
  max-width: 41rem;
  font-family: var(--font-sans);
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--gold-brass-muted);
}
body.creative-practice-page .practice-section__note {
  margin: 0 auto 1.25rem;
  max-width: 41rem;
  font-size: 0.95rem;
  line-height: 1.55;
  text-align: left;
  color: var(--text-secondary);
}
body.creative-practice-page .practice-section__note:last-child {
  margin-bottom: 0;
}
/* Feature measure: timeline */
body.creative-practice-page #how-the-work-evolved .audio-timeline {
  width: 100%;
  max-width: 60rem;
  margin-inline: auto;
}
/* Denser timeline cards (page-scoped) */
body.creative-practice-page .audio-timeline-cards {
  min-height: 0;
}
body.creative-practice-page .audio-timeline-card {
  padding: var(--space-sm) var(--space-md);
}
body.creative-practice-page .audio-timeline-card-block {
  margin-top: var(--space-xs);
}
body.creative-practice-page .audio-timeline-card-subtitle {
  margin-bottom: var(--space-xs);
}
@media (min-width: 54em) {
  body.creative-practice-page .audio-timeline-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
    row-gap: 0.35rem;
    align-content: start;
  }
  body.creative-practice-page .audio-timeline-card-date,
  body.creative-practice-page .audio-timeline-card-title,
  body.creative-practice-page .audio-timeline-card-subtitle {
    grid-column: 1 / -1;
  }
  /* List blocks use full measure — avoid skinny multi-item columns */
  body.creative-practice-page .audio-timeline-card-block:has(.audio-timeline-card-list) {
    grid-column: 1 / -1;
  }
}
/* Nav measure: selected-work lists */
body.creative-practice-page .practice-work-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  width: 100%;
  max-width: 56rem;
  grid-template-columns: minmax(0, 1fr);
}

/* Evidence-led career progression: readable without JavaScript. */
body.creative-practice-page .practice-evolution {
  position: relative;
  display: grid;
  gap: var(--space-md);
  width: 100%;
  max-width: 60rem;
  margin: var(--space-lg) auto 0;
  padding: 0;
  list-style: none;
  counter-reset: practice-stage;
}

body.creative-practice-page .practice-evolution__item {
  position: relative;
  counter-increment: practice-stage;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: rgba(255, 251, 242, 0.035);
}

body.creative-practice-page .practice-evolution__item::before {
  content: counter(practice-stage, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--gold-brass-light);
  font-family: var(--font-serif);
  font-size: 1.4rem;
  line-height: 1;
}

body.creative-practice-page .practice-evolution__stage {
  margin: 0 0 0.2rem;
  color: var(--color-text-muted);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

body.creative-practice-page .practice-evolution__title {
  margin: 0 0 var(--space-xs);
  color: var(--color-text);
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
  font-weight: 400;
  line-height: 1.2;
}

body.creative-practice-page .practice-evolution__item > p:not(.practice-evolution__stage) {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.65;
}

body.creative-practice-page .practice-evolution__link {
  display: inline-block;
  margin-top: var(--space-sm);
  color: var(--gold-brass-light);
  font-size: 0.88rem;
  font-weight: 600;
  text-underline-offset: 0.2em;
}

body.creative-practice-page .practice-evolution__link:hover,
body.creative-practice-page .practice-evolution__link:focus-visible {
  color: var(--color-text);
}

@media (min-width: 48em) {
  body.creative-practice-page .practice-evolution {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.creative-practice-page .practice-evolution__item:last-child {
    grid-column: 1 / -1;
  }
}
body.creative-practice-page .practice-work-list > li {
  min-width: 0;
  display: flex;
}
@media (min-width: 54em) {
  body.creative-practice-page .practice-work-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
}
body.creative-practice-page .practice-work-list__link {
  display: grid;
  gap: 0.35rem;
  align-content: start;
  width: 100%;
  height: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(168, 182, 198, 0.18);
  border-radius: 3px;
  background: rgba(11, 18, 28, 0.35);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, background 0.2s ease;
}
body.creative-practice-page .practice-work-list__link:hover,
body.creative-practice-page .practice-work-list__link:focus-visible {
  border-color: rgba(196, 168, 120, 0.4);
  background: rgba(20, 28, 40, 0.55);
}
body.creative-practice-page .practice-work-list__title {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text, var(--text-primary));
}
body.creative-practice-page .practice-work-list__desc {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-secondary);
}
body.creative-practice-page .practice-back {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  text-align: center;
}
body.creative-practice-page .practice-back a {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--gold-brass-light);
  text-decoration: none;
}
body.creative-practice-page .practice-back a:hover,
body.creative-practice-page .practice-back a:focus-visible {
  text-decoration: underline;
}

/* ---------- Print ---------- */
@media print {
  .page-image-gallery {
    display: none !important;
  }
  .skip-link,
  .site-nav,
  .nav-toggle,
  #pageFade,
  .hero-ctas,
  .hero-credibility,
  .hero-arch-link-wrap {
    display: none !important;
  }
  body {
    background: #faf6ec;
    color: #111;
  }
  a {
    color: #111;
  }
  .hero {
    min-height: auto;
    padding: 2rem 0;
  }
  .section {
    padding: 1.5rem 0;
  }
  .footer {
    border-top: 1px solid #ccc;
    background: #f2ede3;
  }
  .footer-text,
  .footer-copy {
    color: #333;
  }
}