/* Hallmark · macrostructure: Long Document · genre: editorial · tone: luxury editorial · anchor hue: antique brass · nav: N9 edge-aligned · footer: Ft5 statement · contrast: pass (40–41) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57) · pre-emit critique: P5 H4 E4 S5 R4 V5 */

:root {
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  --font-data: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --color-ink: #101f24;
  --color-ink-soft: #1f3537;
  --color-deep: #13282c;
  --color-night: #08161c;
  --color-night-mid: #0c1d24;
  --color-night-light: #17313a;
  --color-instrument-blue: #07181f;
  --color-instrument-blue-mid: #0b222b;
  --color-instrument-blue-raised: #112e37;
  --color-paper: #f2eddf;
  --color-paper-light: #faf5e8;
  --color-paper-warm: #f8f1df;
  --color-paper-deep: #e7dfcc;
  --color-sage-paper: #d8ddce;
  --color-journal: #d8cbb2;
  --color-accent: #b9934f;
  --color-accent-ink: #101f24;
  --color-accent-text: #765b24;
  --color-accent-bright: #dfc47f;
  --color-accent-hover: #ead69f;
  --color-terracotta: #8a4d36;
  --color-text: #172323;
  --color-text-muted: #4f5d59;
  --color-text-subtle: #625c50;
  --color-text-dark: #f5f0e3;
  --color-text-dark-muted: #b6c2bf;
  --color-text-dark-subtle: #9dadaa;
  --color-rule: #bfb295;
  --color-rule-soft: #d3c6ab;
  --color-rule-dark: #526765;
  --color-focus: #f0d58f;
  --color-error: #8f2f2f;
  --color-success: #315f4a;
  --color-product-brown: #4a3024;
  --color-product-cream: #d3c7ae;
  --color-product-feather: #6b3c29;
  --color-grid: rgba(191, 160, 94, 0.16);
  --color-rule-glass: rgba(212, 185, 121, 0.35);
  --color-rule-faint: rgba(212, 185, 121, 0.18);
  --color-glow: rgba(187, 148, 76, 0.06);
  --color-surface-glass: rgba(9, 24, 30, 0.96);
  --color-paper-glass: rgba(255, 255, 255, 0.38);
  --color-shadow: rgba(59, 44, 27, 0.16);
  --color-shadow-dark: rgba(4, 12, 15, 0.28);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-display: clamp(3.5rem, 7.1vw, 6rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  --rule-hairline: 1px;
  --radius-control: 0.125rem;
  --touch-target: 2.75rem;
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body { margin: 0; min-width: 20rem; color: var(--color-text); background: var(--color-instrument-blue); font-family: var(--font-body); font-synthesis: none; }
::selection { color: var(--color-ink); background: var(--color-accent-bright); }
* { scrollbar-color: var(--color-accent) var(--color-paper-deep); scrollbar-width: thin; }

button, input, select, textarea { font: inherit; }
button { min-block-size: var(--touch-target); color: inherit; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: not-allowed; opacity: 0.48; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
button:active:not(:disabled) { transform: translateY(1px); }
textarea { caret-color: var(--color-terracotta); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, blockquote { min-width: 0; overflow-wrap: anywhere; font-family: var(--font-display); font-style: normal; font-weight: 400; }

.skip-link { position: fixed; z-index: 100; top: var(--space-3); left: var(--space-3); padding: var(--space-3) var(--space-4); color: var(--color-ink); background: var(--color-focus); transform: translateY(-200%); transition: transform var(--dur-fast) var(--ease-out); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: fixed; z-index: 50; inset: 0 0 auto; height: 5.25rem; display: flex; align-items: center; justify-content: space-between; padding: 0 4.5vw; color: var(--color-text-dark); background: var(--color-surface-glass); border-bottom: var(--rule-hairline) solid var(--color-rule-faint); box-shadow: 0 0.5rem 1.8rem var(--color-shadow-dark); }
.brand { display: flex; align-items: center; gap: var(--space-3); padding: 0; color: inherit; text-align: left; background: none; border: 0; }
.brand .compass-mark { width: 3.15rem; }
.brand strong { display: block; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; line-height: 1; letter-spacing: 0.04em; white-space: nowrap; }
.brand strong span { color: var(--color-accent-bright); }
.brand small { display: block; margin-top: var(--space-1); color: var(--color-text-dark-muted); font-size: var(--text-xs); font-weight: 600; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; }
.site-header nav { display: flex; align-items: center; gap: clamp(var(--space-4), 2vw, var(--space-8)); }
.site-header nav button, .site-header nav a { display: inline-flex; min-height: var(--touch-target); padding: var(--space-3) var(--space-2); align-items: center; color: var(--color-text-dark); font-size: var(--text-xs); font-weight: 650; letter-spacing: 0.08em; white-space: nowrap; text-decoration: none; text-transform: uppercase; background: none; border: 0; transition: color var(--dur-fast) var(--ease-out); }
.site-header nav button:hover, .site-header nav a:hover { color: var(--color-accent-bright); }
.site-header nav .nav-cta { padding-inline: var(--space-5); color: var(--color-accent-bright); border: var(--rule-hairline) solid var(--color-accent-bright); }
.menu-button { display: none; width: var(--touch-target); padding: 0; color: var(--color-text-dark); background: none; border: 0; place-items: center; }

.compass-mark { width: min(35vw, 26.875rem); height: auto; display: block; object-fit: contain; filter: drop-shadow(0 0.9rem 1.4rem var(--color-shadow-dark)); }

.living-instrument-site { color: var(--color-text-dark); background: var(--color-instrument-blue); }
.living-instrument-site > section:not(.hero-section) { position: relative; isolation: isolate; overflow: hidden; }
.living-instrument-site > section:not(.hero-section)::before { position: absolute; z-index: -1; inset: 0; content: ""; pointer-events: none; opacity: 0.42; background-image: radial-gradient(circle at 13% 24%, transparent 0 10.7rem, var(--color-rule-faint) 10.75rem 10.82rem, transparent 10.87rem), radial-gradient(circle at 87% 71%, transparent 0 17rem, var(--color-rule-faint) 17.05rem 17.12rem, transparent 17.17rem), linear-gradient(var(--color-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid) 1px, transparent 1px); background-size: auto, auto, 7rem 7rem, 7rem 7rem; mask-image: linear-gradient(90deg, rgba(0,0,0,.75), rgba(0,0,0,.12) 45%, rgba(0,0,0,.68)); }
.hero-section { min-height: 50rem; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: center; padding: 7rem 7vw 9.25rem; color: var(--color-text-dark); background: var(--color-instrument-blue); }
.hero-instrument-background { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.hero-section::after { position: absolute; z-index: 1; inset: 0; content: ""; pointer-events: none; background: linear-gradient(90deg, rgba(5, 18, 24, .97) 0%, rgba(5, 18, 24, .89) 30%, rgba(5, 18, 24, .34) 55%, rgba(5, 18, 24, .05) 76%), linear-gradient(0deg, rgba(5, 18, 24, .38), transparent 38%); }
.celestial-lines { z-index: 1; position: absolute; inset: 0; opacity: 0.17; background-image: linear-gradient(var(--color-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid) 1px, transparent 1px); background-size: 11.11vw 11.11vw; mask-image: linear-gradient(90deg, #000, transparent 57%); }
.celestial-lines::before, .celestial-lines::after { content: ""; position: absolute; width: 65vw; aspect-ratio: 1; right: -4vw; top: 12%; border: var(--rule-hairline) solid var(--color-rule-glass); border-radius: 50%; }
.celestial-lines::after { width: 42vw; right: 7.5vw; top: 23%; }
@media (prefers-reduced-motion: no-preference) {
  .celestial-lines::before {
    border-top-color: rgba(223, 196, 127, .78);
    border-bottom-color: rgba(223, 196, 127, .07);
    animation: cartographic-orbit 96s linear infinite;
  }
  .celestial-lines::after {
    border-right-color: rgba(223, 196, 127, .75);
    border-left-color: rgba(223, 196, 127, .07);
    animation: cartographic-orbit 128s linear infinite reverse;
  }
}
@keyframes cartographic-orbit { to { transform: rotate(1turn); } }
.hero-copy { position: relative; z-index: 2; max-width: 45rem; min-width: 0; }
.dedication { max-width: 33rem; display: flex; justify-content: space-between; padding-bottom: var(--space-3); color: var(--color-accent-bright); border-bottom: var(--rule-hairline) solid var(--color-rule-glass); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.hero-copy h1 { margin: var(--space-10) 0 var(--space-8); font-size: var(--text-display); line-height: 0.92; letter-spacing: -0.04em; }
.hero-copy h1 span { color: var(--color-accent-bright); }
.hero-lead { max-width: 38rem; color: var(--color-text-dark-muted); font-size: clamp(var(--text-base), 1.4vw, 1.3125rem); font-weight: 350; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: var(--space-8); margin-top: var(--space-8); }
.button { min-height: var(--touch-target); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); font-size: var(--text-xs); font-weight: 750; letter-spacing: 0.08em; white-space: nowrap; text-decoration: none; text-transform: uppercase; border: 0; transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.button.brass { color: var(--color-accent-ink); background: var(--color-accent-bright); }
.button.brass:hover { background: var(--color-accent-hover); }
.button.ink { color: var(--color-text-dark); background: var(--color-ink); }
.button.ink:hover { background: var(--color-deep); }
.button.secondary { color: var(--color-ink); background: transparent; border: var(--rule-hairline) solid var(--color-rule); }
.button.secondary:hover { background: var(--color-paper-deep); }
.text-button { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) 0; color: var(--color-text-dark); font-size: var(--text-xs); font-weight: 650; letter-spacing: 0.06em; white-space: nowrap; text-transform: uppercase; background: none; border: 0; }
.hero-emblem { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; }
.hero-emblem::before { content: ""; position: absolute; width: 88%; aspect-ratio: 1; background: var(--color-glow); border-radius: 50%; filter: blur(2rem); }
.hero-logo { position: relative; width: min(43vw, 38rem); height: auto; display: block; border: var(--rule-hairline) solid var(--color-rule-faint); box-shadow: 0 2.2rem 5rem var(--color-shadow-dark); }

.need-gateway { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(var(--space-10), 6vw, var(--space-24)); padding: 5.5rem 8vw; color: var(--color-text-dark); background: var(--color-ink); border-top: var(--rule-hairline) solid var(--color-rule-dark); }
.need-intro h2 { max-width: 29rem; margin-bottom: var(--space-5); font-size: clamp(2.4rem, 4vw, 4rem); line-height: 1.02; letter-spacing: -0.035em; }
.need-intro p { max-width: 31rem; color: var(--color-text-dark-muted); font-size: var(--text-sm); line-height: 1.7; }
.need-list { border-top: var(--rule-hairline) solid var(--color-rule-dark); }
.need-list button { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-2); color: var(--color-text-dark); text-align: left; background: transparent; border: 0; border-bottom: var(--rule-hairline) solid var(--color-rule-dark); transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.need-list button:hover { color: var(--color-accent-bright); background: var(--color-deep); }
.need-list button > svg:first-child { color: var(--color-accent-bright); stroke-width: 1.4; }
.need-list button > svg:last-child { width: 1rem; }
.need-list button span { min-width: 0; }
.need-list button strong, .need-list button small { display: block; }
.need-list button strong { margin-bottom: var(--space-1); font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; }
.need-list button small { color: var(--color-text-dark-muted); font-size: var(--text-xs); line-height: 1.4; }

.legacy-section { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 7vw; padding: 8rem 8vw; color: var(--color-text-dark); background: var(--color-instrument-blue-mid); border-top: var(--rule-hairline) solid var(--color-rule-faint); }
.legacy-heading h2 { margin: 0; font-size: clamp(2.4rem, 4.3vw, 4.25rem); line-height: 1.08; letter-spacing: -0.035em; }
.legacy-heading h2 span { color: var(--color-accent-bright); }
.legacy-body { padding-top: var(--space-12); color: var(--color-text-dark-muted); font-size: var(--text-sm); line-height: 1.9; }
.legacy-body p { max-width: 43rem; }
.signature { margin-top: var(--space-8); color: var(--color-accent-bright); font-family: var(--font-display); font-size: 2.125rem; font-style: italic; }
.signature span { display: block; margin-top: var(--space-2); color: var(--color-text-dark-subtle); font-family: var(--font-body); font-size: var(--text-xs); font-style: normal; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.path-section { padding: 5.5rem 8vw 6.5rem; background: var(--color-instrument-blue-raised); border-block: var(--rule-hairline) solid var(--color-rule-faint); }
.path-intro { display: flex; justify-content: flex-end; margin-bottom: var(--space-12); }
.path-intro h2 { width: min(100%, 41rem); margin: 0; font-size: clamp(2.1rem, 3.3vw, 3.25rem); line-height: 1.08; letter-spacing: -0.025em; }
.path-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: rgba(6, 22, 28, .44); border: var(--rule-hairline) solid var(--color-rule-glass); box-shadow: inset 0 0 3rem rgba(3, 12, 16, .2); }
.path-grid > button { min-height: 16rem; position: relative; padding: var(--space-6); color: var(--color-text-dark); text-align: left; background: transparent; border: 0; border-right: var(--rule-hairline) solid var(--color-rule-glass); transition: color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.path-grid > button:last-child { border-right: 0; }
.path-grid > button:hover { color: var(--color-text-dark); background: rgba(7, 24, 31, .9); box-shadow: inset 0 -0.18rem 0 var(--color-accent-bright); }
.path-grid > button > span { color: var(--color-accent-bright); font-family: var(--font-data); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.path-grid > button > svg:first-of-type { display: block; width: 2.125rem; height: 2.125rem; margin: 3.25rem 0 1.75rem; color: var(--color-accent-bright); stroke-width: 1.3; }
.path-grid strong { display: block; font-family: var(--font-display); font-size: 1.8rem; font-weight: 400; }
.path-grid small { display: block; margin-top: var(--space-2); color: var(--color-text-dark-muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; }
.path-grid > button:hover small { color: var(--color-text-dark-muted); }
.path-grid > button > svg:last-child { position: absolute; right: var(--space-5); bottom: var(--space-5); width: 1.05rem; }

.wisdom-section { padding: 8rem 8vw; background: var(--color-instrument-blue); }
.section-topline { display: flex; justify-content: space-between; align-items: end; gap: var(--space-20); margin-bottom: 4.5rem; }
.section-topline h2 { max-width: 49rem; margin: 0; font-size: clamp(2.5rem, 4.5vw, 4.3rem); line-height: 1.02; letter-spacing: -0.04em; }
.section-topline > p { max-width: 25rem; margin-bottom: 0; color: var(--color-text-dark-muted); font-size: var(--text-sm); line-height: 1.8; }
.insight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rule-hairline); background: var(--color-rule-glass); border: var(--rule-hairline) solid var(--color-rule-glass); }
.insight-grid article { min-height: 22rem; display: flex; flex-direction: column; padding: var(--space-8); background: rgba(17, 46, 55, .94); }
.insight-grid article.feature { grid-column: span 2; color: var(--color-text-dark); background: var(--color-deep); }
.insight-grid article:last-child { grid-column: span 2; }
.insight-meta { display: flex; align-items: center; gap: var(--space-2); color: var(--color-accent-bright); font-family: var(--font-data); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.feature .insight-meta { color: var(--color-accent-bright); }
.insight-meta b { margin-left: auto; color: var(--color-text-dark-subtle); font-weight: 500; font-variant-numeric: tabular-nums; }
.feature .insight-meta b { color: var(--color-text-dark-muted); }
.insight-grid h3 { margin: auto 0 var(--space-3); font-size: clamp(1.8rem, 3vw, 2.875rem); letter-spacing: -0.025em; }
.insight-grid p { max-width: 34rem; color: var(--color-text-dark-muted); font-size: var(--text-sm); line-height: 1.7; }
.insight-grid .feature p { color: var(--color-text-dark-muted); font-size: var(--text-base); }
.insight-grid article > button { min-height: var(--touch-target); align-self: flex-start; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; color: var(--color-accent-bright); font-size: var(--text-xs); font-weight: 750; letter-spacing: 0.06em; white-space: nowrap; text-transform: uppercase; background: none; border: 0; border-bottom: var(--rule-hairline) solid currentColor; }
.insight-grid .feature > button { color: var(--color-accent-bright); }

.listening-module { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 5rem; margin-top: 7.5rem; padding: 4.5rem; background: rgba(17, 46, 55, .94); border: var(--rule-hairline) solid var(--color-rule-glass); box-shadow: inset 0 0 4rem rgba(3, 12, 16, .2); }
.listening-module h2 { max-width: 33rem; margin: 0; font-size: clamp(2.25rem, 3.4vw, 3.25rem); line-height: 1.08; letter-spacing: -0.025em; }
.listening-module ol { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hairline) solid var(--color-rule-glass); }
.listening-module li { display: flex; gap: var(--space-5); padding: var(--space-5) 0; border-bottom: var(--rule-hairline) solid var(--color-rule-glass); }
.listening-module li > span { padding-top: var(--space-1); color: var(--color-accent-bright); font-family: var(--font-data); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.listening-module strong { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; }
.listening-module li p { margin: var(--space-1) 0 0; color: var(--color-text-dark-muted); font-size: var(--text-xs); line-height: 1.55; }

.laws-module { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); align-items: center; margin-top: 7.5rem; padding: 5rem; color: var(--color-text-dark); background: var(--color-ink); }
.module-watermark { position: absolute; width: min(35rem, 55vw); height: auto; right: -9rem; top: 50%; opacity: 0.1; transform: translateY(-50%); filter: saturate(0.72); }
.laws-heading h2 { font-size: clamp(2.6rem, 4vw, 3.5rem); line-height: 1.05; letter-spacing: -0.025em; }
.law-card { position: relative; z-index: 2; padding: var(--space-4) var(--space-12); border-left: var(--rule-hairline) solid var(--color-rule-glass); animation: fade-up var(--dur-slow) var(--ease-out); }
@keyframes fade-up { from { opacity: 0; transform: translateY(0.5rem); } }
.law-card > span { color: var(--color-accent-bright); font-family: var(--font-data); font-size: var(--text-xs); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.law-card h3 { margin: var(--space-6) 0 var(--space-3); color: var(--color-text-dark-muted); font-size: 1.6rem; }
.law-card blockquote { max-width: 43rem; margin: 0 0 var(--space-10); font-size: clamp(1.9rem, 3vw, 2.4rem); line-height: 1.2; }
.law-card div { max-width: 31rem; }
.law-card small { color: var(--color-accent-bright); font-family: var(--font-data); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.law-card div p { margin-top: var(--space-2); color: var(--color-text-dark-muted); font-size: var(--text-sm); line-height: 1.6; }
.carousel-controls { position: relative; z-index: 3; grid-column: 2; display: flex; align-items: center; gap: var(--space-3); padding-left: var(--space-12); margin-top: var(--space-6); }
.carousel-controls > button, .carousel-controls > div button { width: var(--touch-target); height: var(--touch-target); display: grid; place-items: center; padding: 0; color: var(--color-text-dark); background: transparent; border: var(--rule-hairline) solid var(--color-rule-dark); }
.carousel-controls > div { display: flex; gap: 0; }
.carousel-controls > div button { position: relative; border-color: transparent; }
.carousel-controls > div button::after { content: ""; width: 1.5rem; height: 0.125rem; background: var(--color-rule-dark); transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.carousel-controls > div button.active::after { background: var(--color-accent-bright); transform: scaleX(1.15); }

.breather-section { min-height: 47.5rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 10vw; padding: 7.5rem 10vw; color: var(--color-text-dark); background: var(--color-ink-soft); }
.breather-copy h2 { max-width: 41rem; font-size: clamp(2.75rem, 5vw, 4.5rem); line-height: 1.03; letter-spacing: -0.035em; }
.breather-copy > p { max-width: 34rem; color: var(--color-text-dark-muted); font-size: var(--text-sm); line-height: 1.8; }
.breath-guide { display: flex; gap: var(--space-4); padding-top: var(--space-5); margin-top: var(--space-10); color: var(--color-accent-bright); border-top: var(--rule-hairline) solid var(--color-rule-dark); }
.breath-guide span { display: flex; flex-direction: column; gap: var(--space-1); }
.breath-guide strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; }
.breath-guide small { color: var(--color-text-dark-muted); font-size: var(--text-xs); }
.breather-tool { position: relative; text-align: center; }
.breath-orbit { position: relative; width: min(21rem, 70vw); aspect-ratio: 1; display: grid; place-items: center; margin: auto; border: var(--rule-hairline) solid var(--color-rule-glass); border-radius: 50%; }
.breath-orbit::before, .breath-orbit::after { content: ""; position: absolute; inset: 1.9rem; border: var(--rule-hairline) solid var(--color-rule-faint); border-radius: 50%; }
.breath-orbit::after { inset: -2rem; }
.breath-orbit.running::before { background: var(--color-glow); animation: breathe 10s var(--ease-in-out) infinite; }
@keyframes breathe { 0%, 100% { transform: scale(0.55); } 40%, 60% { transform: scale(1); } }
.breath-medallion { position: absolute; width: 132%; height: 132%; object-fit: contain; opacity: 0.22; filter: saturate(0.7) drop-shadow(0 0.7rem 1.2rem var(--color-shadow-dark)); }
.breath-core { position: relative; z-index: 2; width: 9.7rem; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--color-deep); border-radius: 50%; box-shadow: 0 0.8rem 2.4rem var(--color-shadow-dark); }
.breath-core span { color: var(--color-accent-bright); font-family: var(--font-display); font-size: 3.45rem; font-variant-numeric: tabular-nums; }
.breath-core small { color: var(--color-text-dark-muted); font-family: var(--font-data); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.breather-tool h3 { margin: 3.75rem 0 var(--space-1); font-size: 1.7rem; }
.breather-tool > p { color: var(--color-text-dark-muted); font-size: var(--text-xs); }
.timer-controls { display: flex; justify-content: center; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.icon-button { width: var(--touch-target); height: var(--touch-target); display: grid; place-items: center; padding: 0; color: var(--color-text-dark); background: transparent; border: var(--rule-hairline) solid var(--color-rule-dark); }
.icon-button svg { width: 1.05rem; }

.journal-section { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 8vw; align-items: start; padding: 8rem 8vw; background: var(--color-instrument-blue-mid); }
.journal-intro { position: sticky; top: 8rem; }
.journal-intro h2 { margin-bottom: var(--space-10); font-size: clamp(3.2rem, 6vw, 5.25rem); line-height: 0.98; letter-spacing: -0.04em; }
.journal-intro h2 span { color: var(--color-accent-bright); }
.journal-intro blockquote { margin: 0 0 var(--space-6); padding-left: var(--space-5); font-size: 1.55rem; line-height: 1.45; border-left: 2px solid var(--color-accent-text); }
.journal-intro > p { color: var(--color-text-dark-muted); font-size: var(--text-sm); line-height: 1.7; }
.privacy-note { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-8); color: var(--color-text-dark-muted); font-size: var(--text-xs); line-height: 1.5; }
.worksheet { padding: 2.8rem 3.4rem; color: var(--color-text); background: var(--color-paper-warm); border: var(--rule-hairline) solid rgba(223, 196, 127, .22); border-top: 0.3rem solid var(--color-accent); box-shadow: 0 1.5rem 4.3rem var(--color-shadow-dark); }
.worksheet-head { display: flex; justify-content: space-between; padding-bottom: var(--space-4); color: var(--color-text-subtle); border-bottom: var(--rule-hairline) solid var(--color-rule); font-family: var(--font-data); font-size: var(--text-xs); font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.worksheet fieldset { margin: 0; padding: 2.6rem 0; border: 0; border-bottom: var(--rule-hairline) solid var(--color-rule-soft); }
.worksheet legend { margin-bottom: var(--space-6); color: var(--color-ink); font-family: var(--font-display); font-size: 1.8rem; }
.worksheet legend span { margin-right: var(--space-4); color: var(--color-accent-text); font-family: var(--font-data); font-size: var(--text-xs); vertical-align: middle; font-variant-numeric: tabular-nums; }
.worksheet label { display: block; margin-bottom: var(--space-5); color: var(--color-text-subtle); font-size: var(--text-xs); font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; }
.worksheet textarea { width: 100%; min-height: 5.5rem; display: block; margin-top: var(--space-2); padding: var(--space-4); color: var(--color-ink); background: var(--color-paper-glass); border: var(--rule-hairline) solid var(--color-rule); resize: vertical; outline: 0; font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.55; }
.worksheet textarea:focus-visible { border-color: var(--color-accent-text); }
.worksheet textarea::placeholder { color: var(--color-text-subtle); opacity: 0.9; }
.two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.field-help { color: var(--color-text-muted); font-size: var(--text-sm); }
.error-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.error-grid button { min-height: var(--touch-target); display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); color: var(--color-text-muted); text-align: left; background: transparent; border: var(--rule-hairline) solid var(--color-rule); font-size: var(--text-xs); transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.error-grid button > span { width: 1rem; height: 1rem; flex: 0 0 auto; display: grid; place-items: center; border: var(--rule-hairline) solid var(--color-rule); }
.error-grid button.selected { color: var(--color-ink); background: var(--color-paper-deep); border-color: var(--color-accent-text); }
.error-grid button.selected > span { color: var(--color-text-dark); background: var(--color-accent-text); border-color: var(--color-accent-text); }
.action-label textarea { border-color: var(--color-accent-text); }
.worksheet-actions { padding-top: var(--space-8); }
.primary-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.data-actions { margin-top: var(--space-3); }
.data-actions button { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 700; background: none; border: 0; }
.data-actions button:not(:disabled):hover { color: var(--color-terracotta); }
.save-status { min-height: 1.5rem; margin: var(--space-4) 0 0; color: var(--color-text-muted); font-size: var(--text-xs); line-height: 1.5; }
.save-status.saving { color: var(--color-accent-text); }
.save-status.error { color: var(--color-error); font-weight: 700; }
.save-status.saved { color: var(--color-success); }

.heirlooms-section { padding: 8rem 8vw; color: var(--color-text-dark); background: var(--color-ink); }
.section-topline.light > p { color: var(--color-text-dark-muted); }
.product-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); grid-template-rows: repeat(2, minmax(17rem, auto)); gap: var(--rule-hairline); background: var(--color-rule-dark); }
.product { min-width: 0; background: var(--color-deep); }
.product:first-child { grid-row: span 2; display: grid; grid-template-rows: minmax(28rem, 1fr) auto; }
.product:nth-child(n + 2) { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.product-art { min-height: 17rem; position: relative; overflow: hidden; background: var(--color-night); }
.product-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: var(--rule-hairline) solid var(--color-rule-faint); box-shadow: inset 0 -3.5rem 5rem var(--color-shadow-dark); }
.product-art img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out); }
.product:hover .product-art img { transform: scale(1.018); filter: saturate(1.06); }
.compass-product .product-art img { object-position: 48% 50%; }
.journal-product .product-art img { object-position: 52% 48%; }
.letter-product .product-art img { object-position: 48% 50%; }
.product > div:last-child { padding: var(--space-8); }
.product > div:last-child > span { color: var(--color-accent-bright); font-family: var(--font-data); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.product h3 { margin: var(--space-4) 0 var(--space-2); font-size: clamp(1.7rem, 2.5vw, 2.4rem); letter-spacing: -0.02em; }
.product p { color: var(--color-text-dark-muted); font-size: var(--text-sm); line-height: 1.6; }
.development-status { display: inline-block; margin-top: var(--space-3); color: var(--color-text-dark-muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }

.membership-section { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(var(--space-12), 7vw, var(--space-32)); padding: 8rem 8vw; background: var(--color-instrument-blue); border-top: var(--rule-hairline) solid var(--color-rule-faint); }
.membership-intro { position: sticky; top: 8rem; align-self: start; }
.membership-intro > p:first-child { color: var(--color-accent-bright); font-family: var(--font-display); font-size: 1.35rem; }
.membership-intro h2 { max-width: 39rem; margin: var(--space-4) 0 var(--space-6); font-size: clamp(2.6rem, 4.4vw, 4.25rem); line-height: 1.03; letter-spacing: -0.035em; }
.membership-intro > p:not(:first-child) { max-width: 35rem; color: var(--color-text-dark-muted); font-size: var(--text-sm); line-height: 1.8; }
.membership-trust { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-8); padding-top: var(--space-5); color: var(--color-text-dark-muted); border-top: var(--rule-hairline) solid var(--color-rule-dark); font-size: var(--text-xs); line-height: 1.5; }
.membership-trust svg { flex: 0 0 auto; color: var(--color-accent-text); }
.membership-flow { min-width: 0; padding: var(--space-10); color: var(--color-text); background: var(--color-paper-warm); border: var(--rule-hairline) solid rgba(223, 196, 127, .22); border-top: 0.3rem solid var(--color-accent); box-shadow: 0 1.5rem 4.3rem var(--color-shadow-dark); }
.membership-availability h3 { margin: var(--space-5) 0; color: var(--color-ink); font-family: var(--font-display); font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1.1; }
.membership-availability > p:not(.evidence-label) { max-width: 42rem; color: var(--color-text-muted); line-height: 1.7; }
.membership-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-5); margin: var(--space-8) 0; }
.membership-availability-note { padding-top: var(--space-5); border-top: var(--rule-hairline) solid var(--color-rule); font-size: var(--text-xs); }
.flow-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-bottom: var(--space-8); color: var(--color-text-subtle); border-bottom: var(--rule-hairline) solid var(--color-rule); font-family: var(--font-data); font-size: var(--text-xs); }
.flow-steps span { display: flex; align-items: center; gap: var(--space-2); }
.flow-steps b { font-family: var(--font-body); font-weight: 650; }
.flow-steps .active { color: var(--color-ink); }
.flow-steps .done { color: var(--color-success); }
.onboarding-form { padding-top: var(--space-8); }
.onboarding-form label { display: block; margin-bottom: var(--space-5); color: var(--color-text-subtle); font-size: var(--text-xs); font-weight: 750; letter-spacing: 0.04em; }
.onboarding-form input:not([type="checkbox"]), .onboarding-form select, .onboarding-form textarea { width: 100%; min-height: var(--touch-target); display: block; margin-top: var(--space-2); padding: var(--space-3) var(--space-4); color: var(--color-ink); background: var(--color-paper-glass); border: var(--rule-hairline) solid var(--color-rule); border-radius: 0; }
.onboarding-form textarea { min-height: 8rem; resize: vertical; line-height: 1.55; }
.onboarding-form input:focus-visible, .onboarding-form select:focus-visible, .onboarding-form textarea:focus-visible { border-color: var(--color-accent-text); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.consent-field { display: grid !important; grid-template-columns: 1.25rem minmax(0, 1fr); align-items: start; gap: var(--space-3); color: var(--color-text-muted) !important; font-weight: 500 !important; line-height: 1.55; letter-spacing: 0 !important; }
.consent-field input { width: 1.2rem; height: 1.2rem; margin: 0.08rem 0 0; accent-color: var(--color-accent-text); }
.honeypot { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.5rem; margin: var(--space-4) 0 0; color: var(--color-text-muted); font-size: var(--text-xs); line-height: 1.5; }
.form-status.sending { color: var(--color-accent-text); }
.form-status.success { color: var(--color-success); }
.form-status.error { color: var(--color-error); font-weight: 700; }
.membership-plans { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--rule-hairline); padding-top: var(--space-8); background: var(--color-rule); }
.membership-plans article { min-width: 0; padding: var(--space-8); background: var(--color-paper-light); }
.membership-plans article.featured-plan { color: var(--color-text-dark); background: var(--color-deep); }
.membership-plans article > span { color: var(--color-accent-text); font-family: var(--font-data); font-size: var(--text-xs); }
.membership-plans .featured-plan > span { color: var(--color-accent-bright); }
.membership-plans h3 { margin: var(--space-8) 0 var(--space-3); font-size: 2rem; }
.membership-plans p, .membership-plans li { color: var(--color-text-muted); font-size: var(--text-xs); line-height: 1.65; }
.membership-plans .featured-plan p, .membership-plans .featured-plan li { color: var(--color-text-dark-muted); }
.membership-plans ul { min-height: 8rem; margin: var(--space-6) 0; padding-left: var(--space-5); }
.membership-plans .form-status { grid-column: 1 / -1; margin: 0; padding: var(--space-4); background: var(--color-paper-warm); }

.portal-page, .crm-page { min-height: 100vh; padding: clamp(var(--space-6), 6vw, var(--space-20)); color: var(--color-text-dark); background: radial-gradient(circle at 80% 10%, var(--color-night-light), var(--color-night) 62%); }
.portal-brand { width: fit-content; display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-dark); font-family: var(--font-display); font-size: 1.25rem; text-decoration: none; }
.portal-brand .compass-mark { width: 4rem; }
.portal-brand b { color: var(--color-accent-bright); font-weight: 400; }
.portal-card { width: min(100%, 54rem); margin: clamp(4rem, 10vh, 8rem) auto; padding: clamp(var(--space-8), 6vw, var(--space-16)); color: var(--color-text); background: var(--color-paper-warm); border-top: 0.3rem solid var(--color-accent); box-shadow: 0 2rem 6rem var(--color-shadow-dark); }
.portal-kicker { color: var(--color-accent-text); font-family: var(--font-data); font-size: var(--text-xs); letter-spacing: 0.07em; text-transform: uppercase; }
.portal-card h1 { max-width: 42rem; margin: var(--space-6) 0 var(--space-10); font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.02; letter-spacing: -0.035em; }
.member-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: var(--rule-hairline) solid var(--color-rule); border-bottom: var(--rule-hairline) solid var(--color-rule); }
.member-details div { min-width: 0; padding: var(--space-5); border-right: var(--rule-hairline) solid var(--color-rule); }
.member-details div:last-child { border: 0; }
.member-details dt { color: var(--color-text-subtle); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; }
.member-details dd { margin: var(--space-2) 0 0; overflow-wrap: anywhere; font-family: var(--font-display); font-size: 1.2rem; }
.portal-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }

.crm-page { padding-inline: clamp(var(--space-5), 4vw, var(--space-12)); }
.crm-head { display: flex; justify-content: space-between; align-items: center; }
.crm-head > div { display: flex; align-items: flex-end; flex-direction: column; gap: var(--space-1); color: var(--color-text-dark-muted); font-size: var(--text-xs); }
.crm-head small { color: var(--color-accent-bright); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.crm-message { max-width: 42rem; margin: 18vh auto; color: var(--color-text-dark-muted); text-align: center; }
.crm-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rule-hairline); margin: var(--space-16) 0 var(--space-8); background: var(--color-rule-dark); }
.crm-metrics article { min-height: 9rem; display: flex; justify-content: space-between; flex-direction: column; padding: var(--space-5); background: var(--color-deep); }
.crm-metrics span { color: var(--color-text-dark-muted); font-size: var(--text-xs); text-transform: uppercase; }
.crm-metrics strong { color: var(--color-accent-bright); font-family: var(--font-display); font-size: 2.5rem; font-weight: 400; }
.crm-toolbar { display: grid; grid-template-columns: minmax(18rem, 1fr) minmax(12rem, 0.35fr) auto; align-items: end; gap: var(--space-4); padding: var(--space-5); color: var(--color-text-dark); background: var(--color-deep); border: var(--rule-hairline) solid var(--color-rule-dark); }
.crm-toolbar label { min-width: 0; color: var(--color-text-dark-muted); font-size: var(--text-xs); font-weight: 700; }
.crm-toolbar label > span { display: block; margin-bottom: var(--space-2); }
.crm-toolbar label > div { min-height: var(--touch-target); display: flex; align-items: center; gap: var(--space-2); padding-inline: var(--space-3); color: var(--color-text-dark-muted); background: var(--color-night); border: var(--rule-hairline) solid var(--color-rule-dark); }
.crm-toolbar input, .crm-toolbar select { width: 100%; min-height: var(--touch-target); color: var(--color-text-dark); background: var(--color-night); border: var(--rule-hairline) solid var(--color-rule-dark); }
.crm-toolbar input { min-height: 2.5rem; padding: 0; border: 0; outline: 0; }
.crm-toolbar select { padding: var(--space-2) var(--space-3); }
.crm-toolbar input::placeholder { color: var(--color-text-dark-subtle); }
.crm-toolbar .button { color: var(--color-text-dark); border-color: var(--color-rule-dark); }
.crm-toolbar .button:hover { background: var(--color-night); }
.crm-live-status { min-height: 1.4rem; margin: var(--space-3) 0 0; color: var(--color-text-dark-muted); font-size: var(--text-xs); }
.crm-panel { margin-top: var(--space-8); padding: var(--space-8); color: var(--color-text); background: var(--color-paper-warm); }
.crm-title { display: flex; justify-content: space-between; align-items: end; gap: var(--space-4); margin-bottom: var(--space-6); }
.crm-title h1, .crm-title h2 { margin: 0; font-size: 2rem; }
.crm-title span { color: var(--color-text-muted); font-size: var(--text-xs); }
.crm-table-wrap { overflow-x: auto; }
.crm-panel table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.crm-panel th { color: var(--color-text-subtle); text-align: left; text-transform: uppercase; }
.crm-panel th, .crm-panel td { min-width: 8rem; padding: var(--space-4); vertical-align: top; border-bottom: var(--rule-hairline) solid var(--color-rule-soft); }
.crm-panel th:first-child, .crm-panel td:first-child { padding-left: 0; }
.crm-panel td strong, .crm-panel td a { display: block; }
.crm-panel td a { margin-top: var(--space-1); color: var(--color-accent-text); }
.record-button { min-height: var(--touch-target); display: block; margin-top: var(--space-2); padding: var(--space-2) 0; color: var(--color-terracotta); font-size: var(--text-xs); font-weight: 750; background: none; border: 0; text-decoration: underline; text-underline-offset: 0.2rem; }
.crm-panel select { min-height: var(--touch-target); padding: var(--space-2); color: var(--color-ink); background: var(--color-paper-light); border: var(--rule-hairline) solid var(--color-rule); }
.crm-empty { margin: var(--space-6) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.crm-record { margin-top: var(--space-8); padding: clamp(var(--space-6), 4vw, var(--space-10)); color: var(--color-text); background: var(--color-journal); border-top: 0.3rem solid var(--color-accent); }
.crm-record-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-6); }
.crm-record-head span { color: var(--color-accent-text); font-family: var(--font-data); font-size: var(--text-xs); text-transform: uppercase; }
.crm-record-head h2 { margin: var(--space-2) 0; font-size: clamp(2rem, 4vw, 3.2rem); }
.crm-record-head a { color: var(--color-accent-text); }
.crm-record-head .icon-button { color: var(--color-ink); border-color: var(--color-rule); }
.crm-record dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--space-8) 0; border-top: var(--rule-hairline) solid var(--color-rule); border-left: var(--rule-hairline) solid var(--color-rule); }
.crm-record dl > div { min-width: 0; padding: var(--space-5); background: var(--color-paper-glass); border-right: var(--rule-hairline) solid var(--color-rule); border-bottom: var(--rule-hairline) solid var(--color-rule); }
.crm-record dl > div.wide { grid-column: span 2; }
.crm-record dt { color: var(--color-text-subtle); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; }
.crm-record dd { margin: var(--space-2) 0 0; line-height: 1.6; overflow-wrap: anywhere; }
.crm-record-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.crm-record-columns > div { min-width: 0; }
.crm-record h3 { margin: 0 0 var(--space-5); font-size: 1.6rem; }
.crm-note-form label { display: block; color: var(--color-text-subtle); font-size: var(--text-xs); font-weight: 700; }
.crm-note-form textarea { width: 100%; min-height: 7rem; display: block; margin: var(--space-2) 0 var(--space-3); padding: var(--space-4); color: var(--color-ink); background: var(--color-paper-light); border: var(--rule-hairline) solid var(--color-rule); resize: vertical; }
.crm-timeline { margin: var(--space-6) 0 0; padding: 0; list-style: none; border-top: var(--rule-hairline) solid var(--color-rule); }
.crm-timeline li { position: relative; padding: var(--space-4) 0 var(--space-4) var(--space-5); border-bottom: var(--rule-hairline) solid var(--color-rule); }
.crm-timeline li::before { content: ""; position: absolute; width: 0.45rem; height: 0.45rem; left: 0; top: 1.35rem; background: var(--color-accent-text); border-radius: 50%; }
.crm-timeline p { margin-bottom: var(--space-2); font-size: var(--text-sm); line-height: 1.55; }
.crm-timeline small { color: var(--color-text-muted); font-size: var(--text-xs); }

footer { padding: 6.25rem 8vw 1.9rem; color: var(--color-text-dark); text-align: center; background: var(--color-night); }
footer > .compass-mark { width: 8.75rem; margin: 0 auto var(--space-8); }
footer h2 { margin-bottom: 5.5rem; font-size: clamp(2.4rem, 4.7vw, 4.2rem); line-height: 1.18; letter-spacing: -0.03em; }
footer h2 span { color: var(--color-accent-bright); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-6); color: var(--color-text-dark-muted); border-top: var(--rule-hairline) solid var(--color-rule-dark); font-size: var(--text-xs); font-weight: 650; letter-spacing: 0.05em; }
.footer-bottom > span { white-space: nowrap; }
.footer-bottom button { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; color: var(--color-text-dark); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; text-transform: uppercase; background: none; border: 0; }
.footer-bottom svg { width: 0.9rem; }

@media (max-width: 61.25rem) {
  .hero-section { grid-template-columns: minmax(0, 1fr); padding-top: 7rem; }
  .hero-copy { padding-bottom: var(--space-10); }
  .hero-logo { width: min(34rem, 82vw); }
  .need-gateway, .legacy-section { grid-template-columns: minmax(0, 1fr); }
  .legacy-body { max-width: 42rem; padding-top: 0; }
  .path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .path-grid > button:nth-child(2) { border-right: 0; }
  .path-grid > button:nth-child(-n + 2) { border-bottom: var(--rule-hairline) solid var(--color-rule-glass); }
  .insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insight-grid article.feature { grid-column: span 2; }
  .listening-module { padding: var(--space-12); }
  .laws-module { grid-template-columns: minmax(0, 1fr); padding: var(--space-12); }
  .law-card { padding: var(--space-8) 0; border-top: var(--rule-hairline) solid var(--color-rule-glass); border-left: 0; }
  .carousel-controls { grid-column: 1; padding-left: 0; }
  .breather-section, .journal-section, .membership-section { grid-template-columns: minmax(0, 1fr); gap: var(--space-20); }
  .journal-intro { position: static; }
  .membership-intro { position: static; }
  .product-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .product:first-child { grid-row: auto; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); grid-template-rows: auto; }
  .product:nth-child(n + 2) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 45rem) {
  html { scroll-padding-top: 4.7rem; }
  .site-header { height: 4.4rem; padding: 0 var(--space-5); }
  .site-header nav { display: none; position: absolute; inset: 4.4rem 0 auto; padding: var(--space-4) var(--space-5) var(--space-6); flex-direction: column; align-items: stretch; gap: 0; background: var(--color-surface-glass); border-bottom: var(--rule-hairline) solid var(--color-rule-dark); box-shadow: 0 1.2rem 2rem var(--color-shadow-dark); }
  .site-header nav.open { display: flex; }
  .site-header nav button, .site-header nav a { width: 100%; padding: var(--space-3) var(--space-4); text-align: left; }
  .menu-button { display: grid; }
  .hero-section { min-height: 45rem; padding: 6.5rem var(--space-6) 8.5rem; }
  .hero-instrument-background { width: 47rem; height: auto; inset: auto -16rem -1rem auto; object-fit: contain; opacity: .42; }
  .hero-section::after { background: linear-gradient(90deg, rgba(5, 18, 24, .98), rgba(5, 18, 24, .78)), linear-gradient(0deg, rgba(5, 18, 24, .5), transparent 45%); }
  .hero-copy h1 { font-size: clamp(3.2rem, 16vw, 4.9rem); }
  .hero-lead { font-size: var(--text-base); }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: var(--space-3); }
  .hero-emblem { margin-top: var(--space-4); }
  .hero-logo { width: min(29rem, 92vw); }
  .dedication span:last-child { display: none; }
  .need-gateway, .legacy-section, .wisdom-section, .journal-section, .heirlooms-section, .membership-section { padding: 5.5rem var(--space-6); }
  .need-list button { padding-inline: 0; }
  .legacy-section { gap: var(--space-8); }
  .path-section { padding: 4.75rem var(--space-6); }
  .path-intro, .section-topline { align-items: flex-start; flex-direction: column; gap: var(--space-5); }
  .path-intro { justify-content: flex-start; }
  .path-grid { grid-template-columns: minmax(0, 1fr); }
  .path-grid > button { min-height: 13.5rem; border-right: 0; border-bottom: var(--rule-hairline) solid var(--color-rule-glass); }
  .path-grid > button:last-child { border-bottom: 0; }
  .insight-grid { grid-template-columns: minmax(0, 1fr); }
  .insight-grid article.feature { grid-column: 1; }
  .insight-grid article:last-child { grid-column: 1; }
  .insight-grid article { min-height: 19rem; padding: var(--space-6); }
  .listening-module { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); margin-top: 5rem; padding: var(--space-8) var(--space-6); }
  .laws-module { margin-top: 5rem; padding: var(--space-10) var(--space-6); }
  .law-card blockquote { font-size: 1.85rem; }
  .carousel-controls { flex-wrap: wrap; }
  .carousel-controls > div { order: 3; width: 100%; justify-content: center; }
  .breather-section { padding: 6rem var(--space-6); }
  .breath-orbit { width: min(16.8rem, 76vw); }
  .worksheet { padding: var(--space-8) var(--space-5); }
  .worksheet-head { gap: var(--space-3); }
  .two-column, .error-grid { grid-template-columns: minmax(0, 1fr); }
  .primary-actions { align-items: stretch; flex-direction: column; }
  .primary-actions .button { width: 100%; }
  .product-grid, .product:first-child, .product:nth-child(n + 2) { grid-template-columns: minmax(0, 1fr); }
  .product:first-child { grid-template-rows: auto; }
  .product-art { min-height: 17rem; }
  .membership-flow { padding: var(--space-8) var(--space-5); }
  .flow-steps { gap: var(--space-2); }
  .flow-steps span { align-items: flex-start; flex-direction: column; }
  .form-grid, .membership-plans { grid-template-columns: minmax(0, 1fr); }
  .membership-plans ul { min-height: 0; }
  .member-details, .crm-metrics { grid-template-columns: minmax(0, 1fr); }
  .member-details div { border-right: 0; border-bottom: var(--rule-hairline) solid var(--color-rule); }
  .portal-actions { align-items: stretch; flex-direction: column; }
  .portal-actions .button { width: 100%; }
  .crm-head { align-items: flex-start; flex-direction: column; gap: var(--space-5); }
  .crm-head > div { align-items: flex-start; }
  .crm-title { align-items: flex-start; flex-direction: column; }
  .crm-toolbar, .crm-record-columns { grid-template-columns: minmax(0, 1fr); }
  .crm-toolbar .button { width: 100%; }
  .crm-record dl { grid-template-columns: minmax(0, 1fr); }
  .crm-record dl > div.wide { grid-column: 1; }
  footer { padding: 5rem var(--space-6) var(--space-6); }
  .footer-bottom { flex-direction: column; gap: var(--space-4); }
}

@media (max-width: 23.5rem) {
  .brand small { display: none; }
  .hero-section { padding-inline: var(--space-5); }
  .need-gateway, .legacy-section, .wisdom-section, .journal-section, .heirlooms-section, .membership-section, .path-section, .breather-section { padding-inline: var(--space-5); }
  .worksheet { padding-inline: var(--space-4); }
  .worksheet-head { align-items: flex-start; flex-direction: column; }
  .carousel-controls { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0ms !important; }
  .breath-orbit.running::before { animation: none; transform: scale(0.78); }
  .product:hover .product-art img { transform: none; }
}

/* Public archive routes */
.archive-header { position: sticky; z-index: 30; top: 0; display: flex; min-height: 5.4rem; padding: 0 6vw; align-items: center; justify-content: space-between; color: var(--color-text-dark); background: rgba(8, 22, 28, 0.96); border-bottom: 1px solid var(--color-rule-faint); backdrop-filter: blur(18px); }
.archive-brand { display: flex; min-height: var(--touch-target); align-items: center; gap: var(--space-3); color: inherit; text-decoration: none; }
.archive-brand img { width: 3.2rem; height: 3.2rem; object-fit: contain; }
.archive-brand span { display: flex; flex-direction: column; }
.archive-brand strong { font-family: var(--font-display); font-size: 1.12rem; letter-spacing: 0.02em; }
.archive-brand small { color: var(--color-text-dark-muted); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }
.archive-header nav { display: flex; align-items: center; gap: clamp(var(--space-3), 2.8vw, var(--space-8)); }
.archive-header nav a { display: inline-flex; min-height: var(--touch-target); align-items: center; color: var(--color-text-dark-muted); font-size: var(--text-sm); text-decoration: none; }
.archive-header nav a:hover { color: var(--color-accent-hover); }
.archive-page { background: var(--color-paper); }
.archive-hero { position: relative; display: grid; min-height: 38rem; padding: clamp(6rem, 10vw, 9rem) 8vw; overflow: hidden; grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr); align-items: center; gap: 6vw; color: var(--color-text-dark); background: radial-gradient(circle at 78% 48%, rgba(185,147,79,.13), transparent 27rem), var(--color-night); }
.archive-hero::before { position: absolute; inset: 0; content: ''; pointer-events: none; opacity: .32; background-image: linear-gradient(var(--color-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid) 1px, transparent 1px); background-size: 5rem 5rem; mask-image: linear-gradient(90deg, transparent, #000 30%, #000); }
.archive-hero > div:not(.archive-orbit):not(.instrument-motion), .archive-hero > img { position: relative; z-index: 3; }
.archive-hero > div > p:first-child, .evidence-label { margin: 0 0 var(--space-5); color: var(--color-accent-bright); font-family: var(--font-data); font-size: var(--text-xs); letter-spacing: .16em; text-transform: uppercase; }
.archive-hero h1 { max-width: 13ch; margin: 0; font-family: var(--font-display); font-size: clamp(3.3rem, 7vw, 6.9rem); font-weight: 400; line-height: .96; letter-spacing: -.045em; }
.archive-rule { width: 7rem; height: 1px; margin: var(--space-8) 0; background: var(--color-accent); }
.archive-lead { max-width: 44rem; margin: 0; color: var(--color-text-dark-muted); font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.7; }
.archive-hero > img { justify-self: center; width: min(30rem, 36vw); filter: drop-shadow(0 2rem 3rem rgba(0,0,0,.38)); animation: medallion-enter 1000ms var(--ease-out) both; }
.archive-hero.has-art::after { position: absolute; z-index: 1; inset: 0; content: ''; background: linear-gradient(90deg, rgba(8,22,28,.96) 0%, rgba(8,22,28,.86) 42%, rgba(8,22,28,.18) 73%, rgba(8,22,28,.08)); }
.archive-hero.has-art .archive-orbit { display: none; }
.archive-hero > img.archive-hero-art { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; filter: none; animation: art-reveal 1200ms var(--ease-out) both; }
@keyframes art-reveal { from { opacity: 0; transform: scale(1.025); } to { opacity: 1; transform: none; } }
.archive-hero > .instrument-motion { position: absolute; z-index: 2; top: 55.5%; left: 74.2%; width: clamp(27rem, 37vw, 43rem); aspect-ratio: 1; pointer-events: none; transform: translate(-50%, -50%); filter: drop-shadow(0 0 1.4rem rgba(219, 183, 102, .12)); }
.instrument-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(226, 199, 131, .24); box-shadow: inset 0 0 1.8rem rgba(226, 199, 131, .05), 0 0 1.2rem rgba(226, 199, 131, .06); }
.instrument-ring::before, .instrument-ring::after { position: absolute; top: 50%; left: 50%; width: .42rem; height: .42rem; content: ''; background: #c7a45d; border: 1px solid rgba(247, 225, 168, .66); border-radius: 50%; box-shadow: 0 0 .8rem rgba(223, 196, 127, .35); transform: translate(-50%, -50%); }
.instrument-ring::before { top: 0; }
.instrument-ring::after { top: 100%; }
.instrument-ring--outer { inset: 4.5%; border-style: dashed; animation: instrument-turn 72s linear infinite; }
.instrument-ring--inner { inset: 19%; border-color: rgba(226, 199, 131, .18); }
.instrument-needle { position: absolute; top: 18%; bottom: 18%; left: calc(50% - .5px); width: 1px; opacity: .68; background: linear-gradient(to bottom, transparent 0 4%, #ead7a5 14% 48%, #8f6b2e 51% 86%, transparent 96%); transform-origin: 50% 50%; animation: instrument-calibrate 4.5s var(--ease-in-out) 1.1s both; }
.instrument-needle::before { position: absolute; top: 0; left: 50%; width: .55rem; height: .55rem; content: ''; border-top: 1px solid #ead7a5; border-left: 1px solid #ead7a5; transform: translateX(-50%) rotate(45deg); }
.instrument-pivot { position: absolute; top: 50%; left: 50%; width: 1.25rem; aspect-ratio: 1; background: radial-gradient(circle at 38% 32%, #f1dc9b, #9f7836 38%, #3b2a16 72%); border: 1px solid rgba(245, 220, 153, .7); border-radius: 50%; box-shadow: 0 0 1.1rem rgba(220, 177, 80, .28); transform: translate(-50%, -50%); }
@keyframes instrument-turn { to { transform: rotate(360deg); } }
@keyframes instrument-calibrate { 0% { transform: rotate(-7deg); } 48% { transform: rotate(5deg); } 68% { transform: rotate(3deg); } 86% { transform: rotate(7deg); } 100% { transform: rotate(4deg); } }
.archive-orbit { position: absolute; z-index: 1; right: -7rem; width: 43rem; aspect-ratio: 1; border: 1px solid var(--color-rule-faint); border-radius: 50%; animation: orbit-drift 18s linear infinite; }
.archive-orbit::before, .archive-orbit::after, .archive-orbit span { position: absolute; inset: 12%; content: ''; border: 1px solid var(--color-rule-faint); border-radius: 50%; }
.archive-orbit::after { inset: 26%; }
.archive-orbit span:nth-child(1) { inset: 49% -10% auto; height: 1px; border: 0; border-top: 1px solid var(--color-rule-glass); border-radius: 0; }
.archive-orbit span:nth-child(2) { inset: -10% 49% auto; width: 1px; height: 120%; border: 0; border-left: 1px solid var(--color-rule-glass); border-radius: 0; }
.archive-orbit span:nth-child(3) { inset: 5%; border-style: dashed; }
@keyframes medallion-enter { from { opacity: 0; transform: translateY(2rem) rotate(-4deg) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes orbit-drift { to { transform: rotate(360deg); } }

.standalone-breather { display: grid; padding: 7rem 8vw; grid-template-columns: minmax(18rem,.8fr) minmax(0,1fr); align-items: center; gap: 8vw; color: var(--color-text-dark); background: var(--color-night-light); }
.standalone-breather .breath-orbit { margin: auto; }
.standalone-breather h2 { margin: 0 0 var(--space-5); font-size: clamp(2.7rem, 5vw, 5.2rem); font-weight: 400; line-height: 1; }
.standalone-breather > div:last-child > p:not(.evidence-label) { max-width: 37rem; color: var(--color-text-dark-muted); font-size: var(--text-lg); line-height: 1.7; }
.article-layout { display: grid; max-width: 94rem; margin: auto; padding: 7rem 8vw; grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem); gap: 8vw; }
.article-layout article { max-width: 48rem; }
.article-layout article > h2 { margin: 4rem 0 var(--space-5); font-family: var(--font-display); font-size: clamp(2rem, 3.6vw, 3.2rem); font-weight: 400; line-height: 1.08; }
.article-layout article > h3 { margin: var(--space-8) 0 var(--space-2); font-size: var(--text-lg); }
.article-layout article > p, .article-layout article > ul { color: var(--color-text-muted); font-size: 1.04rem; line-height: 1.8; }
.answer-first { margin: 0 0 4rem; padding: var(--space-8); color: var(--color-text) !important; font-family: var(--font-display); font-size: 1.4rem !important; background: var(--color-paper-light); border-left: .25rem solid var(--color-accent); box-shadow: 0 1rem 3rem var(--color-shadow); }
.article-steps { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--color-rule); }
.article-steps > div { padding: var(--space-6); border-right: 1px solid var(--color-rule); }
.article-steps > div:last-child { border: 0; }
.article-steps span { color: var(--color-accent-text); font-family: var(--font-data); font-size: var(--text-xs); }
.article-steps h3 { margin: var(--space-4) 0 var(--space-2); font-family: var(--font-display); font-size: 1.5rem; }
.article-steps p { margin: 0; color: var(--color-text-muted); line-height: 1.6; }
.feature-quote { margin: 4rem 0; padding: clamp(2rem,5vw,4rem); color: var(--color-text-dark); font-family: var(--font-display); font-size: clamp(2rem,4vw,3.5rem); line-height: 1.13; background: var(--color-ink); border: 0; }
.feature-quote cite { display: block; margin-top: var(--space-6); color: var(--color-accent-bright); font-family: var(--font-data); font-size: var(--text-xs); font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.source-panel { margin-top: 4rem; padding: var(--space-8); background: var(--color-paper-deep); border-top: .25rem solid var(--color-ink); }
.source-panel h2 { margin-top: 0 !important; font-size: 1.8rem !important; }
.source-panel a, .safety-card a, .related-card a { color: inherit; text-underline-offset: .22em; }
.safety-card, .related-card { position: sticky; top: 7rem; padding: var(--space-8); color: var(--color-text-dark); background: var(--color-ink); }
.safety-card > svg { color: var(--color-accent-bright); }
.safety-card h2, .related-card h2 { font-family: var(--font-display); font-size: 1.65rem; font-weight: 400; }
.safety-card p { color: var(--color-text-dark-muted); line-height: 1.7; }
.safety-card > a { display: inline-flex; min-height: var(--touch-target); align-items: center; gap: var(--space-2); color: var(--color-accent-hover); }
.related-card { position: static; margin-top: var(--space-5); color: var(--color-text); background: var(--color-paper-deep); }
.related-card a { display: block; min-height: var(--touch-target); padding: var(--space-3) 0; border-top: 1px solid var(--color-rule); }

/* The 90-second page extends the hero's living-instrument art direction throughout. */
.archive-page--instrument { color: var(--color-text-dark); background: var(--color-night-mid); }
.archive-page--instrument .standalone-breather { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(circle at 23% 50%, rgba(185,147,79,.12), transparent 24rem), linear-gradient(145deg, #102b34, #0a1c23 72%); border-block: 1px solid var(--color-rule-faint); }
.archive-page--instrument .standalone-breather::before { position: absolute; z-index: -1; inset: 0; content: ''; opacity: .28; background-image: radial-gradient(circle at 23% 50%, transparent 0 12rem, rgba(216,183,111,.18) 12.05rem 12.1rem, transparent 12.15rem), linear-gradient(rgba(191,160,94,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(191,160,94,.09) 1px, transparent 1px); background-size: auto, 6rem 6rem, 6rem 6rem; }
.archive-page--instrument .article-layout { position: relative; max-width: none; background: radial-gradient(circle at 82% 16%, rgba(185,147,79,.08), transparent 30rem), var(--color-night-mid); }
.archive-page--instrument .article-layout::before { position: absolute; inset: 0; content: ''; pointer-events: none; opacity: .16; background-image: linear-gradient(rgba(191,160,94,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(191,160,94,.13) 1px, transparent 1px); background-size: 8rem 8rem; mask-image: linear-gradient(90deg, transparent, #000 60%, transparent); }
.archive-page--instrument .article-layout > * { position: relative; z-index: 1; }
.archive-page--instrument .article-layout article > h2 { color: var(--color-text-dark); }
.archive-page--instrument .article-layout article > h3 { color: var(--color-accent-hover); }
.archive-page--instrument .article-layout article > p,
.archive-page--instrument .article-layout article > ul { color: var(--color-text-dark-muted); }
.archive-page--instrument .answer-first { color: var(--color-text-dark) !important; background: linear-gradient(135deg, rgba(31,53,55,.94), rgba(16,31,36,.96)); border: 1px solid var(--color-rule-faint); border-left: .25rem solid var(--color-accent); box-shadow: 0 1.5rem 4rem rgba(0,0,0,.24); }
.archive-page--instrument .article-steps { border-color: var(--color-rule-faint); }
.archive-page--instrument .article-steps > div { border-color: var(--color-rule-faint); }
.archive-page--instrument .article-steps span { color: var(--color-accent-bright); }
.archive-page--instrument .article-steps h3 { color: var(--color-text-dark); }
.archive-page--instrument .article-steps p { color: var(--color-text-dark-muted); }
.archive-page--instrument .feature-quote { background: linear-gradient(145deg, #1a3740, #0a1b22); border: 1px solid var(--color-rule-faint); box-shadow: inset 0 0 0 .45rem rgba(185,147,79,.035), 0 1.5rem 4rem rgba(0,0,0,.22); }
.archive-page--instrument .source-panel { color: var(--color-text-dark); background: rgba(23,49,58,.76); border: 1px solid var(--color-rule-faint); border-top: .25rem solid var(--color-accent); }
.archive-page--instrument .source-panel p,
.archive-page--instrument .source-panel li { color: var(--color-text-dark-muted); }
.archive-page--instrument .safety-card { background: linear-gradient(145deg, #1a3740, #0b1c23); border: 1px solid var(--color-rule-faint); box-shadow: 0 1.5rem 4rem rgba(0,0,0,.24); }
.archive-page--instrument .related-card { color: var(--color-text-dark); background: rgba(31,53,55,.72); border: 1px solid var(--color-rule-faint); }
.archive-page--instrument .related-card a { color: var(--color-text-dark-muted); border-color: var(--color-rule-faint); }
.archive-page--instrument .related-card a:hover { color: var(--color-accent-hover); }

.repository-distinction, .content-boundary { display: grid; padding: 6rem 8vw; grid-template-columns: repeat(3,1fr); gap: var(--space-6); background: var(--color-paper-deep); }
.repository-distinction article { padding: var(--space-8); background: var(--color-paper-light); border-top: .22rem solid var(--color-accent); }
.repository-distinction svg, .provenance-note svg, .content-boundary svg { color: var(--color-accent-text); }
.repository-distinction h2, .content-boundary h2 { font-family: var(--font-display); font-weight: 400; }
.repository-distinction p, .content-boundary p { color: var(--color-text-muted); line-height: 1.7; }
.bearing-list { max-width: 88rem; margin: auto; padding: 7rem 8vw; }
.bearing-list article { display: grid; padding: var(--space-8) 0; grid-template-columns: minmax(10rem,.45fr) minmax(15rem,.7fr) minmax(15rem,1fr) auto; align-items: start; gap: var(--space-6); border-top: 1px solid var(--color-rule); }
.bearing-list article > span, .bearing-list article > small { color: var(--color-accent-text); font-family: var(--font-data); font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; }
.bearing-list h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem,2.7vw,2.5rem); font-weight: 400; }
.bearing-list p { margin: 0; color: var(--color-text-muted); line-height: 1.7; }
.bearing-list a { display: inline-flex; min-height: var(--touch-target); align-items: center; gap: var(--space-2); color: var(--color-text); font-size: var(--text-sm); }
.bearing-list.personal article { grid-template-columns: minmax(8rem,.3fr) minmax(15rem,.7fr) minmax(15rem,1fr); }
.bearing-list.personal small { grid-column: 2 / -1; }
.provenance-note, .commerce-honesty { display: flex; max-width: 74rem; margin: 5rem auto 0; padding: var(--space-6) var(--space-8); align-items: flex-start; gap: var(--space-4); background: var(--color-paper-light); border: 1px solid var(--color-rule); }
.provenance-note p { margin-bottom: 0; color: var(--color-text-muted); }
.original-notes-link { display: flex; max-width: 74rem; min-height: 6rem; margin: 0 auto 7rem; padding: var(--space-6) var(--space-8); align-items: center; gap: var(--space-4); color: var(--color-text-dark); font-family: var(--font-display); font-size: 1.35rem; text-decoration: none; background: var(--color-ink); }
.original-notes-link svg:last-child { margin-left: auto; }
.source-lock, .policy-copy, .category-intro { max-width: 60rem; margin: 7rem auto; padding: clamp(2rem,6vw,5rem); background: var(--color-paper-light); border-top: .3rem solid var(--color-accent); box-shadow: 0 1.4rem 4rem var(--color-shadow); }
.source-lock > svg { color: var(--color-accent-text); }
.source-lock h2 { font-family: var(--font-display); font-size: 2.5rem; font-weight: 400; }
.source-lock p, .policy-copy p, .category-intro p { color: var(--color-text-muted); font-size: 1.08rem; line-height: 1.8; }
.category-grid { max-width: 88rem; margin: auto; padding: 7rem 8vw; }
.category-grid > a { display: grid; min-height: 9rem; padding: var(--space-6) 0; grid-template-columns: 4rem 1fr auto; align-items: center; gap: var(--space-6); color: inherit; text-decoration: none; border-top: 1px solid var(--color-rule); }
.category-grid > a > span { color: var(--color-accent-text); font-family: var(--font-data); }
.category-grid h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.7rem,3vw,2.8rem); font-weight: 400; }
.category-grid p { margin-bottom: 0; color: var(--color-text-muted); }
.category-intro div { display: flex; margin-top: var(--space-8); flex-wrap: wrap; gap: var(--space-4); }
.category-intro a { display: inline-flex; min-height: var(--touch-target); padding: 0 var(--space-4); align-items: center; color: var(--color-text-dark); background: var(--color-ink); }

.compass-console { max-width: 64rem; margin: 7rem auto; padding: 0 5vw; }
.compass-assurance { display: flex; margin-bottom: var(--space-8); padding: var(--space-6); gap: var(--space-4); background: var(--color-paper-deep); border-left: .25rem solid var(--color-accent); }
.compass-assurance p { margin-bottom: 0; color: var(--color-text-muted); }
.compass-console form { padding: clamp(2rem,6vw,4.5rem); color: var(--color-text-dark); background: var(--color-ink); box-shadow: 0 1.5rem 4rem var(--color-shadow-dark); }
.compass-console label { display: block; margin-bottom: var(--space-5); font-family: var(--font-display); font-size: 2rem; }
.compass-console textarea { width: 100%; min-height: 11rem; padding: var(--space-5); color: var(--color-text); font: inherit; line-height: 1.6; background: var(--color-paper-light); border: 1px solid var(--color-rule-dark); resize: vertical; }
.compass-console form > div { display: flex; margin-top: var(--space-5); align-items: center; justify-content: space-between; gap: var(--space-4); }
.compass-console form > div > span { color: var(--color-text-dark-subtle); font-size: var(--text-xs); }
.compass-answer, .urgent-response { margin-top: var(--space-6); padding: clamp(2rem,5vw,3.5rem); background: var(--color-paper-light); border-top: .3rem solid var(--color-accent); }
.compass-answer > p:first-child { color: var(--color-accent-text); font-family: var(--font-data); font-size: var(--text-xs); text-transform: uppercase; }
.compass-answer h2, .urgent-response h2 { font-family: var(--font-display); font-size: 2.4rem; font-weight: 400; }
.compass-answer > div { display: flex; margin: var(--space-6) 0; padding: var(--space-5); flex-direction: column; gap: var(--space-2); background: var(--color-paper-deep); }
.compass-answer > a { display: inline-flex; min-height: var(--touch-target); align-items: center; gap: var(--space-2); color: var(--color-text); }
.compass-answer > button { display: block; min-height: var(--touch-target); margin-top: var(--space-5); padding: 0; color: var(--color-accent-text); background: transparent; border: 0; text-decoration: underline; cursor: pointer; }
.urgent-response { color: var(--color-text-dark); background: var(--color-error); border: 0; }
.urgent-response a { color: white; }
.content-boundary { grid-template-columns: repeat(2,1fr); }
.content-boundary > div { padding: var(--space-8); background: var(--color-paper-light); }
.merch-editorial { max-width: 88rem; margin: auto; padding: 7rem 8vw; }
.merch-editorial article { display: grid; min-height: 26rem; grid-template-columns: minmax(18rem,1.15fr) minmax(18rem,.85fr); background: var(--color-paper-light); }
.merch-editorial article:nth-child(even) { grid-template-columns: minmax(18rem,.85fr) minmax(18rem,1.15fr); }
.merch-editorial article:nth-child(even) img { order: 2; }
.merch-editorial img { width: 100%; height: 100%; min-height: 26rem; object-fit: cover; }
.merch-editorial article > div { display: flex; padding: clamp(2rem,5vw,4rem); flex-direction: column; justify-content: center; }
.merch-editorial span { color: var(--color-accent-text); font-family: var(--font-data); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; }
.merch-editorial h2 { font-family: var(--font-display); font-size: clamp(2.2rem,4vw,4rem); font-weight: 400; }
.merch-editorial p { color: var(--color-text-muted); line-height: 1.7; }
.commerce-honesty { margin-top: 0; margin-bottom: 7rem; }
.archive-footer { display: grid; min-height: auto; padding: 5rem 8vw 3rem; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: var(--space-8); color: var(--color-text-dark); background: var(--color-night); }
.archive-footer > img { width: 5rem; }
.archive-footer > p { max-width: 38rem; margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem,3vw,2.5rem); line-height: 1.2; }
.archive-footer > div { display: flex; flex-direction: column; }
.archive-footer a { display: inline-flex; min-height: var(--touch-target); align-items: center; color: var(--color-text-dark-muted); }

@media (max-width: 62rem) {
  .archive-header nav { display: none; }
  .archive-hero { min-height: 34rem; grid-template-columns: 1fr; }
  .archive-hero > img { position: absolute; right: -4rem; bottom: -5rem; width: 22rem; opacity: .34; }
  .archive-hero.has-art > img.archive-hero-art { right: auto; bottom: auto; opacity: 1; }
  .instrument-motion { left: 75%; width: clamp(23rem, 60vw, 35rem); opacity: .72; }
  .standalone-breather, .article-layout { grid-template-columns: 1fr; }
  .article-layout article { max-width: none; }
  .safety-card { position: static; }
  .repository-distinction { grid-template-columns: 1fr; }
  .bearing-list article, .bearing-list.personal article { grid-template-columns: 8rem 1fr; }
  .bearing-list article p, .bearing-list article a { grid-column: 2; }
  .bearing-list.personal small { grid-column: 2; }
  .archive-footer { grid-template-columns: auto 1fr; }
  .archive-footer > div { grid-column: 2; flex-direction: row; flex-wrap: wrap; gap: var(--space-5); }
}

@media (max-width: 45rem) {
  .archive-header { min-height: 4.5rem; padding: 0 var(--space-5); }
  .archive-brand img { width: 2.7rem; height: 2.7rem; }
  .archive-brand small { display: none; }
  .archive-hero { min-height: 31rem; padding: 6rem var(--space-6); }
  .archive-hero h1 { font-size: clamp(3rem,14vw,4.7rem); }
  .archive-hero.has-art::after { background: linear-gradient(90deg, rgba(8,22,28,.98), rgba(8,22,28,.78) 72%, rgba(8,22,28,.42)); }
  .archive-hero > img.archive-hero-art { object-position: 64% center; }
  .instrument-motion { top: 54%; left: 78%; width: 29rem; opacity: .48; }
  .standalone-breather { padding: 5rem var(--space-6); }
  .article-layout, .bearing-list, .category-grid, .merch-editorial { padding: 5rem var(--space-6); }
  .article-steps, .content-boundary { grid-template-columns: 1fr; }
  .article-steps > div { border-right: 0; border-bottom: 1px solid var(--color-rule); }
  .bearing-list article, .bearing-list.personal article { grid-template-columns: 1fr; }
  .bearing-list article p, .bearing-list article a, .bearing-list.personal small { grid-column: 1; }
  .category-grid > a { grid-template-columns: 2.5rem 1fr; }
  .category-grid > a > svg { display: none; }
  .compass-console { margin-block: 5rem; padding-inline: var(--space-5); }
  .compass-console form > div { align-items: flex-start; flex-direction: column; }
  .merch-editorial article, .merch-editorial article:nth-child(even) { grid-template-columns: 1fr; }
  .merch-editorial article:nth-child(even) img { order: 0; }
  .merch-editorial img { min-height: 20rem; }
  .archive-footer { grid-template-columns: 1fr; padding-inline: var(--space-6); }
  .archive-footer > div { grid-column: 1; }
}

.origin-story {
  --story-night: var(--color-night, #08161c);
  --story-night-mid: var(--color-night-mid, #0c1d24);
  --story-deep: var(--color-deep, #13282c);
  --story-brass: var(--color-accent-bright, #dfc47f);
  --story-brass-mid: var(--color-accent, #b9934f);
  --story-text: var(--color-text-dark, #f5f0e3);
  --story-muted: var(--color-text-dark-muted, #b6c2bf);
  --story-rule: var(--color-rule-glass, rgba(212, 185, 121, 0.35));
  position: relative;
  overflow: hidden;
  padding: clamp(5rem, 9vw, 8rem) 6vw;
  color: var(--story-text);
  background:
    radial-gradient(circle at 82% 12%, rgba(185, 147, 79, 0.12), transparent 26rem),
    linear-gradient(150deg, var(--story-night-mid), var(--story-night) 58%);
}

.origin-story::before {
  position: absolute;
  inset: 0;
  content: '';
  pointer-events: none;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(212, 185, 121, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 185, 121, 0.09) 1px, transparent 1px);
  background-size: 7.5rem 7.5rem;
  mask-image: radial-gradient(circle at 72% 48%, #000, transparent 74%);
}

.origin-story__introduction,
.origin-story__stage,
.origin-story__help,
.origin-story__transcript {
  position: relative;
  z-index: 1;
  width: min(100%, 88rem);
  margin-inline: auto;
}

.origin-story__introduction {
  display: grid;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
  align-items: end;
  gap: 8vw;
}

.origin-story__introduction > div > p,
.origin-story__copy > p:first-child {
  margin: 0 0 1.25rem;
  color: var(--story-brass);
  font-family: var(--font-data, monospace);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.origin-story__introduction h2 {
  max-width: 13ch;
  margin: 0;
  color: var(--story-text);
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(2.8rem, 5.5vw, 5.7rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.origin-story__introduction > p {
  max-width: 34rem;
  margin: 0;
  color: var(--story-muted);
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  line-height: 1.75;
}

.origin-story__stage {
  isolation: isolate;
  min-height: clamp(33rem, 60vw, 49rem);
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--story-night);
  border: 1px solid rgba(212, 185, 121, 0.28);
  box-shadow: 0 2.5rem 7rem rgba(0, 0, 0, 0.38);
  outline: none;
}

.origin-story__stage:focus-visible {
  outline: 3px solid var(--color-focus, #f0d58f);
  outline-offset: 4px;
}

.origin-story__stage::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  content: '';
  opacity: 0.48;
  background: url('/90-second-chronometer.jpg') center / cover no-repeat;
  filter: saturate(0.82) contrast(1.04);
  transform: scale(1.015);
}

.origin-story__stage::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: '';
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 22, 28, 0.99) 0%, rgba(8, 22, 28, 0.93) 43%, rgba(8, 22, 28, 0.42) 72%, rgba(8, 22, 28, 0.69)),
    linear-gradient(0deg, rgba(8, 22, 28, 0.9), transparent 28%);
}

.origin-story__map {
  position: absolute;
  z-index: 0;
  width: min(48rem, 58vw);
  aspect-ratio: 1;
  right: -8rem;
  top: 48%;
  border: 1px solid rgba(212, 185, 121, 0.15);
  border-radius: 50%;
  transform: translateY(-50%);
}

.origin-story__map::before,
.origin-story__map::after {
  position: absolute;
  content: '';
  border: 1px solid rgba(212, 185, 121, 0.12);
  border-radius: inherit;
}

.origin-story__map::before { inset: 12%; }
.origin-story__map::after { inset: 28%; border-style: dashed; }

.origin-story__scene {
  position: relative;
  z-index: 2;
  min-height: 0;
  display: grid;
  padding: clamp(3rem, 7vw, 7rem);
  grid-template-columns: minmax(0, 1.02fr) minmax(18rem, 0.98fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  animation: origin-story-enter 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.origin-story__copy {
  max-width: 43rem;
}

.origin-story__copy h3 {
  margin: 0;
  color: var(--story-text);
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(2.5rem, 5.3vw, 5.7rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.origin-story__bearing {
  width: 8rem;
  height: 1px;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0;
  background: linear-gradient(90deg, var(--story-brass-mid), transparent);
}

.origin-story__body {
  max-width: 38rem;
  margin: 0;
  color: var(--story-muted);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.7;
}

.origin-story__body--time {
  color: var(--story-brass);
  font-family: var(--font-data, monospace);
  font-size: clamp(2.5rem, 7vw, 6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.26em;
}

.origin-story__art {
  position: relative;
  min-height: 24rem;
  display: grid;
  place-items: center;
}

.origin-story__instrument {
  position: relative;
  width: min(27rem, 31vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.origin-story__instrument img {
  position: relative;
  z-index: 2;
  width: 88%;
  height: 88%;
  object-fit: contain;
  opacity: 0.92;
  filter: saturate(0.85) drop-shadow(0 1.8rem 2.5rem rgba(0, 0, 0, 0.42));
}

.origin-story__calibration-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(223, 196, 127, 0.45);
  border-radius: 50%;
  background: repeating-conic-gradient(from -1deg, rgba(223, 196, 127, 0.62) 0 0.24deg, transparent 0.24deg 5deg);
  mask: radial-gradient(circle, transparent 69%, #000 69.4% 70.5%, transparent 71%);
}

.is-playing .origin-story__calibration-ring {
  animation: origin-story-calibrate 64s linear infinite;
}

.origin-story__north,
.origin-story__legacy-mark {
  position: absolute;
  z-index: 3;
  top: -0.9rem;
  color: var(--story-brass);
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.1rem;
}

.origin-story__legacy-mark {
  inset: auto auto -0.3rem;
  padding: 0 1rem;
  background: var(--story-night);
  font-family: var(--font-data, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
}

.origin-story__line-art {
  width: min(28rem, 33vw);
  overflow: visible;
  fill: none;
  stroke: var(--story-brass-mid);
  stroke-width: 1.4;
  filter: drop-shadow(0 1.5rem 2.5rem rgba(0, 0, 0, 0.35));
}

.origin-story__line-art circle { opacity: 0.35; }
.origin-story__construction { opacity: 0.2; stroke-dasharray: 2 8; }
.origin-story__draw { stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 900; animation: origin-story-draw 1800ms ease-out both; }
.origin-story__draw--late { animation-delay: 340ms; }

.origin-story__notes {
  width: min(27rem, 32vw);
  perspective: 60rem;
}

.origin-story__notes span {
  position: relative;
  min-height: 5.5rem;
  display: flex;
  margin-top: -0.3rem;
  padding: 1.4rem 1.6rem 1.3rem 3.1rem;
  align-items: center;
  color: #25302d;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1rem;
  line-height: 1.45;
  background: #e7dfcc;
  border-top: 1px solid rgba(185, 147, 79, 0.75);
  box-shadow: 0 1.3rem 2.2rem rgba(0, 0, 0, 0.18);
  transform: rotate(-1.2deg);
  animation: origin-story-note 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.origin-story__notes span:nth-child(2) { transform: translateX(1.5rem) rotate(1.1deg); animation-delay: 180ms; }
.origin-story__notes span:nth-child(3) { transform: translateX(0.4rem) rotate(-0.4deg); animation-delay: 360ms; }
.origin-story__notes i { position: absolute; left: 1.45rem; width: 0.55rem; aspect-ratio: 1; border: 1px solid #765b24; border-radius: 50%; }

.origin-story__time-mark {
  width: min(25rem, 31vw);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px solid rgba(223, 196, 127, 0.42);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.4rem rgba(8, 22, 28, 0.62), inset 0 0 0 1.45rem rgba(223, 196, 127, 0.24);
}

.origin-story__time-mark::before {
  position: absolute;
  width: inherit;
  aspect-ratio: 1;
  content: '';
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(223, 196, 127, 0.64) 0 0.35deg, transparent 0.35deg 6deg);
  mask: radial-gradient(circle, transparent 77%, #000 77.5% 79%, transparent 79.5%);
}

.origin-story__time-mark span { color: var(--story-brass); font-family: var(--font-display, Georgia, serif); font-size: clamp(2.8rem, 6vw, 5.8rem); letter-spacing: 0.12em; }
.origin-story__time-mark small { max-width: 12rem; margin-top: 0.8rem; color: var(--story-muted); font-family: var(--font-data, monospace); font-size: 0.68rem; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; }

.origin-story__children {
  position: relative;
  width: min(26rem, 32vw);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.25rem;
  border: 1px solid rgba(223, 196, 127, 0.28);
  border-radius: 50%;
}

.origin-story__children::before,
.origin-story__children::after {
  position: absolute;
  content: '';
  border: 1px solid rgba(223, 196, 127, 0.18);
  border-radius: 50%;
}

.origin-story__children::before { inset: 12%; }
.origin-story__children::after { inset: 30%; border-style: dashed; }
.origin-story__children > div { z-index: 2; width: 4.5rem; aspect-ratio: 1; display: grid; place-items: center; color: var(--story-night); background: var(--story-brass); border-radius: 50%; box-shadow: 0 0 2.5rem rgba(223, 196, 127, 0.28); }
.origin-story__children > div:last-child { color: var(--story-brass); background: var(--story-deep); border: 1px solid var(--story-brass); }
.origin-story__children span { font-family: var(--font-display, Georgia, serif); font-size: 1.75rem; }
.origin-story__children i { z-index: 2; width: 3rem; height: 1px; background: linear-gradient(90deg, var(--story-brass), rgba(223, 196, 127, 0.24), var(--story-brass)); }

.origin-story__controls {
  position: relative;
  z-index: 5;
  min-height: 5.6rem;
  display: grid;
  padding: 1rem clamp(1rem, 3vw, 2rem);
  grid-template-columns: 2.75rem auto 2.75rem minmax(7rem, 1fr) auto auto;
  align-items: center;
  gap: 0.75rem;
  background: rgba(5, 15, 20, 0.94);
  border-top: 1px solid rgba(212, 185, 121, 0.22);
  backdrop-filter: blur(1rem);
}

.origin-story__controls button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: inline-flex;
  padding: 0;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: var(--story-muted);
  background: transparent;
  border: 1px solid rgba(212, 185, 121, 0.28);
}

.origin-story__controls button:hover:not(:disabled) { color: var(--story-brass); border-color: var(--story-brass-mid); }
.origin-story__controls button:disabled { opacity: 0.35; }
.origin-story__controls svg { width: 1rem; height: 1rem; }

.origin-story__controls .origin-story__primary-control {
  min-width: 9.4rem;
  padding-inline: 1.1rem;
  color: var(--story-night);
  background: var(--story-brass);
  border-color: var(--story-brass);
  font-family: var(--font-data, monospace);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.origin-story__controls .origin-story__primary-control:hover:not(:disabled) { color: var(--story-night); background: #ead69f; }

.origin-story__progress { min-width: 6rem; display: flex; align-items: center; }
.origin-story__progress input { width: 100%; height: 2.75rem; margin: 0; accent-color: var(--story-brass); cursor: pointer; }
.origin-story__timecode { min-width: 6.5rem; color: var(--story-muted); font-family: var(--font-data, monospace); font-size: 0.68rem; font-variant-numeric: tabular-nums; text-align: right; }
.origin-story__replay { padding-inline: 0.85rem !important; }
.origin-story__replay span { font-family: var(--font-data, monospace); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; }

.origin-story__status {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: -1px !important;
  padding: 0 !important;
  white-space: nowrap !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
}

.origin-story__help {
  display: flex;
  margin-top: 1rem;
  justify-content: space-between;
  gap: 2rem;
  color: var(--story-muted);
  font-family: var(--font-data, monospace);
  font-size: 0.68rem;
  line-height: 1.5;
}

.origin-story__transcript {
  margin-top: 2.5rem;
  border-block: 1px solid rgba(212, 185, 121, 0.22);
}

.origin-story__transcript summary {
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--story-text);
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.2rem;
  cursor: pointer;
}

.origin-story__transcript summary::marker { color: var(--story-brass); }
.origin-story__transcript summary svg { width: 1rem; color: var(--story-brass); }
.origin-story__transcript ol { margin: 0; padding: 0 0 2.5rem; list-style: none; }
.origin-story__transcript li { display: grid; padding: 1.25rem 0; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; border-top: 1px solid rgba(212, 185, 121, 0.16); }
.origin-story__transcript li > span { color: var(--story-brass); font-family: var(--font-data, monospace); font-size: 0.7rem; }
.origin-story__transcript strong { font-family: var(--font-display, Georgia, serif); font-size: 1.2rem; font-weight: 400; }
.origin-story__transcript p { max-width: 48rem; margin: 0.45rem 0 0; color: var(--story-muted); line-height: 1.65; }

@keyframes origin-story-enter {
  from { opacity: 0; transform: translateY(0.8rem); }
  to { opacity: 1; transform: none; }
}

@keyframes origin-story-calibrate { to { transform: rotate(360deg); } }
@keyframes origin-story-draw { from { opacity: 0; stroke-dashoffset: 900; } to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes origin-story-note { from { opacity: 0; transform: translateY(1.1rem) rotate(0deg); } }

@media (max-width: 62rem) {
  .origin-story__introduction { grid-template-columns: 1fr; gap: 1.5rem; }
  .origin-story__introduction > p { max-width: 44rem; }
  .origin-story__scene { grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.75fr); }
  .origin-story__instrument,
  .origin-story__line-art,
  .origin-story__notes,
  .origin-story__time-mark,
  .origin-story__children { width: min(23rem, 36vw); }
  .origin-story__copy h3 { font-size: clamp(2.4rem, 6.8vw, 4.7rem); }
}

@media (max-width: 45rem) {
  .origin-story { padding: 4.5rem 1.25rem; }
  .origin-story__stage { min-height: 44rem; }
  .origin-story__stage::before { opacity: 0.28; background-position: 67% center; }
  .origin-story__stage::after { background: linear-gradient(0deg, rgba(8, 22, 28, 0.97) 0%, rgba(8, 22, 28, 0.8) 55%, rgba(8, 22, 28, 0.62)); }
  .origin-story__map { width: 31rem; right: -17rem; top: 28%; }
  .origin-story__scene { padding: 3rem 1.5rem 2rem; grid-template-columns: 1fr; grid-template-rows: auto minmax(10rem, 1fr); align-items: start; gap: 1rem; }
  .origin-story__copy h3 { font-size: clamp(2.35rem, 12vw, 3.6rem); }
  .origin-story__body { font-size: 0.98rem; }
  .origin-story__art { min-height: 12rem; place-items: center; }
  .origin-story__instrument,
  .origin-story__line-art,
  .origin-story__notes,
  .origin-story__time-mark,
  .origin-story__children { width: min(14rem, 62vw); }
  .origin-story__notes span { min-height: 3.8rem; padding: 0.8rem 0.9rem 0.8rem 2.4rem; font-size: 0.72rem; }
  .origin-story__notes i { left: 1rem; }
  .origin-story__children { gap: 1.5rem; }
  .origin-story__children > div { width: 3.25rem; }
  .origin-story__controls { grid-template-columns: 2.75rem minmax(8rem, 1fr) 2.75rem; }
  .origin-story__progress { grid-column: 1 / -1; grid-row: 2; }
  .origin-story__timecode { grid-column: 1 / 3; min-width: 0; text-align: left; }
  .origin-story__replay { grid-column: 3; }
  .origin-story__replay span { display: none; }
  .origin-story__help { flex-direction: column; gap: 0.4rem; }
}

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

  .origin-story__stage::before { transform: none; }
  .is-playing .origin-story__calibration-ring { animation: none; }
}

/* Shared cartographic field: uses the approved artwork itself, with quiet text surfaces. */
.living-instrument-site, .archive-page {
  --color-text: #f5f0e3;
  --color-text-muted: #b6c2bf;
  --color-text-subtle: #9dadaa;
  --color-accent-text: #dfc47f;
  --color-paper: #07181f;
  --color-paper-light: #102932;
  --color-paper-deep: #0b222b;
  --color-rule: rgba(212,185,121,.3);
  color: var(--color-text);
  background: #07181f;
}
.archive-page { display: flow-root; }
.living-instrument-site > section:not(.hero-section), .archive-page > section:not(.archive-hero) { position: relative; isolation: isolate; }
.living-instrument-site > section:not(.hero-section)::before,
.archive-page > section:not(.archive-hero)::before {
  position: absolute; content: ''; z-index: -1; inset: 0; pointer-events: none;
  opacity: .42; background-image: url('/90-second-chronometer.jpg'); background-size: max(1600px, 220%) auto;
  background-position: left bottom; background-repeat: repeat-y;
  mask-image: linear-gradient(90deg, #000, rgba(0,0,0,.16) 48%, #000);
}
.archive-page .archive-hero::before { background-image: url('/90-second-chronometer.jpg'); background-size: cover; background-position: left bottom; opacity: .28; }
.archive-page .archive-hero.has-art::before { background: none; }
.archive-page .repository-distinction, .archive-page .content-boundary { background-color: #0b222b; }
.archive-page .repository-distinction article, .archive-page .content-boundary > div, .archive-page .merch-editorial article { background: rgba(16,41,50,.92); }
.archive-page .compass-console textarea { color: #f5f0e3; }
.archive-page .compass-answer a { color: #dcc18a; text-underline-offset: .2em; }
.archive-page .compass-answer > a { margin-inline-end: 1.4rem; }
.archive-page .compass-answer a:focus-visible { outline: 2px solid #dcc18a; outline-offset: 4px; }
.archive-page .button.secondary { color: #f5f0e3; }
.archive-page .merch-editorial p, .archive-page .merch-editorial li { line-height: 1.7; color: #b6c2bf; }
.archive-page .merch-editorial article { margin-bottom: 2rem; border: 1px solid var(--color-rule); }
.archive-page .merch-editorial article img { height: 100%; object-fit: cover; }
.archive-page .commerce-honesty { margin-bottom: 4rem; }
.archive-header { gap: 1.5rem; }
.archive-header nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem 1.5rem; }
.archive-footer { background-image: linear-gradient(rgba(7,24,31,.88),rgba(7,24,31,.88)),url('/90-second-chronometer.jpg'); background-size: cover; background-position: left bottom; }
.living-instrument-site .worksheet, .living-instrument-site .membership-flow {
  --color-text: #172323; --color-text-muted: #4f5d59; --color-text-subtle: #625c50;
  --color-accent-text: #765b24; --color-paper-light: #faf5e8; --color-paper-deep: #e7dfcc; --color-rule: #bfb295;
}
.featured-insight { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3rem; padding: 5rem 8vw; border-block: 1px solid var(--color-rule); background: #0b222b; }
.featured-insight h2 { max-width: 24ch; margin-bottom: 1.4rem; font-size: clamp(2.1rem,4vw,3.8rem); line-height: 1.13; }
.featured-insight p:not(.evidence-label) { max-width: 38rem; color: #b6c2bf; line-height: 1.7; }
.insight-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.journal-section-links { max-width: 80rem; margin: 0 auto; padding: 1.5rem 8vw 0; }
.journal-section-links a, .archive-page .provenance-note a { color: #dfc47f; text-underline-offset: .3em; }
.journal-section-links a:focus-visible, .archive-page .provenance-note a:focus-visible { outline: 2px solid #dfc47f; outline-offset: 5px; }
.featured-insight .insight-actions { flex-direction: column; align-items: flex-start; }
.insight-doorways { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; padding: 3rem 8vw; }
.insight-doorways > a { display: block; padding: 2rem; color: #f5f0e3; text-decoration: none; border: 1px solid var(--color-rule); background: rgba(11,34,43,.82); }
.insight-doorways span { color: #dfc47f; font: .7rem var(--font-data); text-transform: uppercase; letter-spacing: .12em; }
.insight-doorways h2 { font-size: 2rem; margin: 1.2rem 0; }
.insight-doorways p { color: #b6c2bf; line-height: 1.65; }
.insight-doorways > a:hover { background: #15313a; }
.insights-workspace { max-width: 80rem; margin: auto; padding: 5rem 8vw 7rem; }
.insights-workspace h2 { font-size: clamp(2rem,4vw,3.5rem); }
.insights-workspace p { line-height: 1.75; color: #b6c2bf; }
.insights-workspace a:not(.button) { color: #dfc47f; text-underline-offset: .3em; }
.collection-intro { max-width: 53rem; margin-bottom: 3rem; }
.source-pending { margin-top: 3rem; padding: clamp(1.5rem,4vw,3rem); border: 1px solid var(--color-rule); background: rgba(11,34,43,.9); }
.personal-list-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; margin: 2rem 0; }
.personal-list-toolbar label { flex: 1 1 100%; }
.insights-workspace label { display: block; color: #dfc47f; font-size: .85rem; line-height: 1.6; }
.insights-workspace input, .insights-workspace textarea { display: block; width: 100%; margin: .6rem 0 1rem; padding: 1rem; color: #f5f0e3; background: #07181f; border: 1px solid #526765; border-radius: 0; font: inherit; }
.insights-workspace textarea { min-height: 7rem; resize: vertical; }
.insights-workspace textarea::placeholder { color: #9dadaa; }
.insight-compose { border-block: 1px solid var(--color-rule); padding: 2rem 0; }
.insight-compose > button { margin-right: 1rem; }
.personal-list-status { min-height: 1.5rem; }
.personal-insights, .original-insights { list-style: none; padding: 0; }
.personal-insights li, .original-insights li { padding: 2rem; margin-top: 1rem; border: 1px solid var(--color-rule); background: rgba(11,34,43,.93); scroll-margin-top: 8rem; }
.personal-insights li > p, .original-insights li > p { white-space: pre-wrap; overflow-wrap: anywhere; color: #f5f0e3; font: 1.6rem/1.5 var(--font-display); }
.insight-number, .original-insights li > span { color: #dfc47f; font: .8rem var(--font-data); display: flex; flex-wrap: wrap; gap: 1rem; }
.entry-controls { display: flex; flex-wrap: wrap; gap: .5rem; }
.entry-controls button { color: #f5f0e3; border: 1px solid #526765; background: transparent; padding: .5rem 1rem; }
.membership-preview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin-top: 4rem; }
.membership-preview article { padding: 1.5rem; border: 1px solid var(--color-rule); background: #0b222b; }
.membership-preview h3 { font-size: 1.7rem; }
@media(max-width: 62rem) {
  .archive-header { flex-direction: column; padding-block: 1rem; }
  .archive-header nav { justify-content: center; }
  .featured-insight { grid-template-columns: 1fr; }
  .insight-doorways, .membership-preview { grid-template-columns: 1fr; }
}
@media(max-width: 45rem) {
  .archive-header { position: relative; }
  .archive-header nav { gap: .3rem 1rem; }
  .archive-header nav a { font-size: .8rem; }
  .featured-insight, .insights-workspace { padding: 3.5rem 1.5rem; }
  .insight-doorways { padding: 1.5rem; }
  .personal-insights li, .original-insights li { padding: 1.25rem; }
  .personal-list-toolbar .button { white-space: normal; }
}
.postal-preview { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--color-rule); }
.postal-preview > div { max-width: 42rem; }
.postal-preview h3 { font-family: var(--font-display); font-size: 2rem; margin: .5rem 0; }
.postal-preview p { line-height: 1.7; }
@media (max-width: 700px) { .postal-preview { flex-direction: column; align-items: flex-start; } }
.original-context { margin: 2rem 0; padding: 1.4rem 0; border-block: 1px solid var(--color-rule); }
.original-context summary { cursor: pointer; color: #dfc47f; font-size: 1.15rem; }
.original-context > div { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; margin-top: 1.5rem; color: #b6c2bf; }
.source-import-note { font-size: .8rem; }
.assembly-launch { display: block; padding: 1rem 5vw; text-align: center; color: #f4e1af; background: #193640; border-bottom: 1px solid #b29558; font-size: .95rem; }
.archive-header nav { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.archive-header { gap: 1.5rem; }
.heirloom-intro { padding: clamp(3rem, 7vw, 7rem) 8vw 2rem; }
.heirloom-intro h1 { font-family: var(--font-display); font-size: clamp(2.8rem, 6vw, 5.8rem); max-width: 15ch; line-height: 1.05; margin: 1rem 0; }
.heirloom-intro > p:last-child { font-size: 1.25rem; line-height: 1.6; max-width: 42rem; color: #b6c2bf; }
.heirloom-siblings { display: flex; flex-wrap: wrap; gap: 2rem; padding: 2rem 8vw 4rem; }
.heirloom-siblings a { color: #dfc47f; min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 901px) { .site-header nav { gap: clamp(.7rem, 1.3vw, 1.5rem); } .site-header nav a { font-size: .72rem; } }
.not-found-page { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.not-found-page h1 { font-size: clamp(2.3rem, 6vw, 4.5rem); line-height: 1.1; max-width: 12ch; margin: 1rem 0; }
.not-found-page > p { max-width: 45ch; line-height: 1.65; }
.not-found-page a { color: #dfbd80; text-underline-offset: .3em; display: inline-block; padding: .7rem 0; }
.not-found-page a:hover { color: #fff1d1; }
.not-found-page a:focus-visible { outline: 2px solid #dfbd80; outline-offset: 5px; }
.not-found-page nav { border-top: 1px solid #dfbd8050; margin-top: 1rem; padding-top: 1rem; }
.not-found-page nav p { margin: 0; }
.archive-page .article-layout article p a { color: #dfbd80; text-underline-offset: .22em; }
.archive-page .article-layout article p a:hover { color: #fff1d1; }
.archive-page .article-layout article p a:focus-visible { outline: 2px solid #dfbd80; outline-offset: 4px; }
.archive-page .article-layout h2[id] { scroll-margin-top: 7rem; }
.family-worksheet { max-width: 980px; margin: 0 auto; padding: 0 24px 64px; }
.worksheet-tools { max-width: 66ch; margin: 0 0 40px; line-height: 1.7; }
.worksheet-tools .button { margin: 16px 0; }
.worksheet-sheet { padding: clamp(24px, 5vw, 56px); margin: 28px 0; color: #263a40; background: #eee5d3; border: 1px solid #b79a62; }
.worksheet-sheet h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.2; margin: 16px 0; }
.worksheet-sheet h3 { font-size: 1rem; margin: 0 0 8px; }
.worksheet-sheet p { line-height: 1.65; margin: 12px 0; }
.worksheet-sheet .evidence-label { color: #72552d; font-size: .7rem; }
.worksheet-prompts { padding-left: 22px; margin: 24px 0; }
.worksheet-prompts li { padding-left: 8px; margin: 20px 0; }
.worksheet-prompts p { margin: 0; }
.worksheet-writing { margin: 22px 0; break-inside: avoid; }
.worksheet-writing span { display: block; height: 24px; border-bottom: 1px solid #8a8173; }
.worksheet-footnote { font-size: .84rem; }
.worksheet-further { padding: 28px 0; }
.worksheet-further a { color: #dfbd80; text-decoration: underline; text-underline-offset: .2em; }
.worksheet-further nav { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
@page family-worksheet { size: A4; margin: 14mm; }
@media print {
  body:has(.family-worksheet), body:has(.family-worksheet) #root, body:has(.family-worksheet) .archive-page { background: white !important; color: black !important; margin: 0 !important; padding: 0 !important; }
  body:has(.family-worksheet) .archive-header, body:has(.family-worksheet) .archive-footer, body:has(.family-worksheet) .archive-hero, body:has(.family-worksheet) .skip-link, .worksheet-tools, .worksheet-further { display: none !important; }
  body:has(.family-worksheet)::before, body:has(.family-worksheet)::after, body:has(.family-worksheet) .archive-page::before, body:has(.family-worksheet) .archive-page::after { display: none !important; }
  .family-worksheet { max-width: none; margin: 0; padding: 0; }
  .worksheet-sheet { page: family-worksheet; background: white; color: black; padding: 0; border: 0; margin: 0; break-after: page; font-size: 10pt; }
  .worksheet-sheet:has(#worksheet-care) { break-after: auto; }
  .worksheet-sheet h2 { font-size: 19pt; margin: 10pt 0; }
  .worksheet-sheet h3 { font-size: 11pt; }
  .worksheet-sheet p { line-height: 1.4; margin: 8pt 0; }
  .worksheet-prompts { margin: 12pt 0; }
  .worksheet-prompts li { margin: 12pt 0; break-inside: avoid; }
  .worksheet-writing { margin: 12pt 0; }
  .worksheet-writing span { height: 6mm; }
  .worksheet-footnote { font-size: 9pt; }
}

.compass-console label.compass-consent { font: inherit; line-height: 1.65; margin-bottom: 2rem; display: flex; gap: 1rem; align-items: flex-start; }
.compass-consent input { flex: 0 0 auto; width: 1.3rem; height: 1.3rem; margin-top: .25rem; accent-color: #dcc18a; }
.compass-console button:disabled, .compass-console textarea:disabled { opacity: .55; cursor: not-allowed; }
.compass-chat-text { white-space: pre-wrap; overflow-wrap: anywhere; }