/* Four Mirrors v5: shared system. Every page loads this file.
   Layers: 1 primitives, 2 semantic tokens, 3 component tokens, then base and components.
   Documented in _build/DESIGN.md. No em dashes anywhere, by house rule. */

/* ---------- Fonts: self-hosted, subset to Basic Latin plus typographic punctuation ---------- */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/cinzel-400.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/cormorant-500.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/cormorant-400i.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ebgaramond-400.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/ebgaramond-400i.woff2') format('woff2'); }
/* Metric-matched fallbacks so lines wrap the same before and after the swap (no layout shift) */
@font-face { font-family: 'Cormorant Fallback'; src: local('Georgia'); size-adjust: 87%; ascent-override: 92%; descent-override: 28%; }
@font-face { font-family: 'Cormorant Fallback'; font-style: italic; src: local('Georgia Italic'), local('Georgia-Italic'); size-adjust: 80%; ascent-override: 98%; descent-override: 30%; }
@font-face { font-family: 'Garamond Fallback'; src: local('Georgia'); size-adjust: 89%; ascent-override: 98%; descent-override: 30%; }
@font-face { font-family: 'Garamond Fallback'; font-style: italic; src: local('Georgia Italic'), local('Georgia-Italic'); size-adjust: 86%; ascent-override: 100%; descent-override: 30%; }
@font-face { font-family: 'Cinzel Fallback'; src: local('Georgia'); size-adjust: 112%; ascent-override: 84%; descent-override: 26%; }

:root {
  color-scheme: dark;

  /* 1. Primitives (raw values; components never use these directly) */
  --midnight-950: #04070E;   /* the ground; every image edge is stitched to this */
  --midnight-900: #070B15;
  --midnight-850: #0A0F1C;
  --gold-100: #F0E0B4;       /* brightest display type, 15.4:1 on ground */
  --gold-200: #E3C77E;       /* display headings, 12.2:1 */
  --gold-300: #DDBF73;       /* button fill */
  --gold-400: #C9A24A;       /* labels and lines, 8.4:1 */
  --gold-600: #8E7339;       /* hairlines only, 4.47:1, never text */
  --ivory-100: #EFE6D0;      /* body, 16.2:1 */
  --ivory-300: #BDB4A0;      /* secondary text, 9.8:1 */
  --ivory-500: #A39B8A;      /* fine print, 7.3:1 */
  --maroon-700: #6B1E24;     /* velvet atmosphere, never a fill under text */
  --scarlet-500: #C9382A;    /* one moon, one star: icons only, 3.9:1 */

  /* 2. Semantic tokens */
  --color-ground: var(--midnight-950);
  --color-surface: var(--midnight-900);
  --color-veil: var(--midnight-950);   /* the phone menu: the ground itself, never a lighter navy */
  --color-ink: var(--ivory-100);
  --color-ink-soft: var(--ivory-300);
  --color-ink-faint: var(--ivory-500);
  --color-display: var(--gold-200);
  --color-display-bright: var(--gold-100);
  --color-accent: var(--gold-400);
  --color-accent-fill: var(--gold-300);
  --color-accent-ink: var(--midnight-950);
  --color-line: rgba(201, 162, 74, 0.72);
  --color-line-soft: rgba(142, 115, 57, 0.5);
  --color-line-faint: rgba(142, 115, 57, 0.3);
  --color-glow: rgba(227, 199, 126, 0.16);
  --color-signal: var(--scarlet-500);
  --color-focus: var(--gold-100);
  --color-selection: rgba(201, 162, 74, 0.34);

  /* Type families */
  --font-caps: 'Cinzel', 'Cinzel Fallback', Georgia, 'Times New Roman', serif;
  --font-display: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, 'Times New Roman', serif;
  --font-text: 'EB Garamond', 'Garamond Fallback', Georgia, 'Times New Roman', serif;

  /* Type scale: five working sizes plus the hero. Fluid between 360 and 1440 */
  --text-label: 0.8125rem;                                        /* 13px Cinzel caps */
  --text-small: 1rem;                                             /* 16px notes, captions */
  --text-body: clamp(1.0625rem, 1.01rem + 0.25vw, 1.1875rem);     /* 17 to 19px */
  --text-lead: clamp(1.1875rem, 1.06rem + 0.55vw, 1.4375rem);     /* 19 to 23px */
  --text-h3: clamp(1.5rem, 1.33rem + 0.75vw, 2rem);               /* 24 to 32px */
  --text-h4: clamp(1.3125rem, 1.2rem + 0.45vw, 1.5625rem);        /* 21 to 25px: FAQ questions, short detail lines */
  --text-h2: clamp(2.25rem, 1.65rem + 2.65vw, 3.75rem);           /* 36 to 60px */
  --text-statement: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);      /* pull lines, quotes */
  --text-hero: clamp(3rem, 1.75rem + 5.6vw, 6rem);                /* 48 to 96px, the one hero moment */
  --leading-tight: 1.06;
  --leading-display: 1.16;
  --leading-body: 1.66;
  --track-caps: 0.3em;
  --track-display: -0.005em;

  /* Spacing: 4px base */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
  --section-y: clamp(72px, 8vw, 120px);
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));

  /* Layout */
  --measure: 60ch;
  --wrap: 1120px;
  --wrap-wide: 1360px;
  --head-h: 72px;

  /* Shape, depth */
  --radius-btn: 2px;
  --radius-arch: 999px 999px 2px 2px / 999px 999px 2px 2px;
  --shadow-page: 0 30px 50px -22px rgba(1, 3, 8, 0.95), 0 0 0 1px rgba(201, 162, 74, 0.22);
  --shadow-btn: 0 14px 26px -14px rgba(1, 3, 8, 0.9);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 700ms;

  /* Layers */
  --z-content: 1; --z-header: 50; --z-menu: 60; --z-skip: 100;

  /* 3. Component tokens */
  --btn-h: 52px;
  --btn-h-sm: 44px;
  --btn-fill: var(--color-accent-fill);
  --btn-fill-hover: #E8CE8A;
  --btn-ink: var(--color-accent-ink);
  --frame-line: var(--color-line);
  --frame-line-inner: var(--color-line-soft);
  --ring-size: 54px;
}
@media (max-width: 899.98px) { :root { --head-h: 62px; } }
@media (min-width: 900px) { :root { --gutter: max(clamp(24px, 3.4vw, 48px), env(safe-area-inset-left, 0px)); --gutter-r: max(clamp(24px, 3.4vw, 48px), env(safe-area-inset-right, 0px)); } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background-color: var(--color-ground);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: calc(var(--head-h) + 12px);
  scrollbar-color: var(--gold-600) var(--color-ground);
  -webkit-tap-highlight-color: rgba(201, 162, 74, 0.16);
  overflow-x: clip; /* no element may widen the phone layout viewport */
}
body {
  margin: 0;
  background-color: var(--color-ground);
  color: var(--color-ink);
  font-family: var(--font-text);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: 0.005em;               /* light text on dark: a touch more tracking */
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  caret-color: var(--color-display);
}
/* The night sky: two seamless star tiles, fixed so the stars sit infinitely far behind the page */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.55;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620'%3E%3Cg fill='%23EFE6D0'%3E%3Ccircle cx='148' cy='337' r='.7' opacity='.51'/%3E%3Ccircle cx='617' cy='292' r='.9' opacity='.6'/%3E%3Ccircle cx='93' cy='394' r='.9' opacity='.26'/%3E%3Ccircle cx='511' cy='167' r='.9' opacity='.73'/%3E%3Ccircle cx='443' cy='571' r='.8' opacity='.57'/%3E%3Ccircle cx='134' cy='599' r='.8' opacity='.72'/%3E%3Ccircle cx='261' cy='517' r='.9' opacity='.57'/%3E%3Ccircle cx='362' cy='561' r='1.1' opacity='.27'/%3E%3Ccircle cx='556' cy='12' r='.8' opacity='.73'/%3E%3Ccircle cx='27' cy='381' r='.5' opacity='.57'/%3E%3Ccircle cx='192' cy='48' r='.9' opacity='.77'/%3E%3Ccircle cx='538' cy='195' r='.6' opacity='.46'/%3E%3Ccircle cx='286' cy='322' r='1.1' opacity='.62'/%3E%3Ccircle cx='340' cy='7' r='.8' opacity='.42'/%3E%3Ccircle cx='289' cy='421' r='.7' opacity='.4'/%3E%3Ccircle cx='65' cy='504' r='.9' opacity='.32'/%3E%3C/g%3E%3Cg fill='%23E3C77E'%3E%3Ccircle cx='360' cy='376' r='.8' opacity='.38'/%3E%3Ccircle cx='482' cy='99' r='.9' opacity='.68'/%3E%3Ccircle cx='598' cy='83' r='.7' opacity='.32'/%3E%3Ccircle cx='173' cy='376' r='1.1' opacity='.72'/%3E%3Ccircle cx='598' cy='561' r='.9' opacity='.61'/%3E%3Ccircle cx='64' cy='603' r='.9' opacity='.6'/%3E%3Ccircle cx='304' cy='365' r='1.1' opacity='.45'/%3E%3Ccircle cx='389' cy='185' r='.9' opacity='.45'/%3E%3Ccircle cx='194' cy='229' r='.9' opacity='.68'/%3E%3Ccircle cx='418' cy='139' r='.6' opacity='.66'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1010' height='1010'%3E%3Cg fill='%23EFE6D0'%3E%3Ccircle cx='457' cy='565' r='.8' opacity='.72'/%3E%3Ccircle cx='192' cy='812' r='.8' opacity='.69'/%3E%3Ccircle cx='95' cy='306' r='.5' opacity='.74'/%3E%3Ccircle cx='641' cy='601' r='.8' opacity='.61'/%3E%3Ccircle cx='518' cy='30' r='.9' opacity='.47'/%3E%3Ccircle cx='212' cy='919' r='.8' opacity='.64'/%3E%3Ccircle cx='88' cy='336' r='.8' opacity='.31'/%3E%3Ccircle cx='132' cy='650' r='.5' opacity='.79'/%3E%3Ccircle cx='245' cy='607' r='.7' opacity='.32'/%3E%3C/g%3E%3Cg fill='%23E3C77E'%3E%3Ccircle cx='36' cy='888' r='.9' opacity='.51'/%3E%3Ccircle cx='445' cy='851' r='.9' opacity='.41'/%3E%3Ccircle cx='5' cy='86' r='1.1' opacity='.8'/%3E%3Ccircle cx='1006' cy='849' r='1.1' opacity='.67'/%3E%3Ccircle cx='689' cy='190' r='.9' opacity='.65'/%3E%3Ccircle cx='999' cy='215' r='.7' opacity='.59'/%3E%3Ccircle cx='839' cy='390' r='.5' opacity='.57'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 620px 620px, 1010px 1010px;
}
main, .site-foot { position: relative; z-index: var(--z-content); }
img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 500; }
ul, ol { margin: 0; padding: 0; }
::selection { background-color: var(--color-selection); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 1px; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Lenis (smooth scroll) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Skip link ---------- */
.skip {
  position: fixed; left: 50%; top: 10px; z-index: var(--z-skip);
  transform: translate(-50%, -180%);
  padding: 12px 20px; min-height: 44px; display: inline-flex; align-items: center;
  background: var(--color-display-bright); color: var(--color-accent-ink);
  font-family: var(--font-caps); font-size: var(--text-label); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out);
}
.skip:focus, .skip:focus-visible { transform: translate(-50%, 0); outline-offset: 2px; }

/* ---------- Layout ---------- */
.wrap { position: relative; max-width: var(--wrap); margin-inline: auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.wrap--wide { max-width: var(--wrap-wide); }
.chapter { position: relative; padding-block: var(--section-y); scroll-margin-top: var(--head-h); }
.chapter__head { text-align: center; }
.chapter__head .title + .prose, .chapter__head + .prose { margin-top: var(--space-6); }
.chapter__body { margin-top: clamp(40px, 5vw, 64px); }  /* the first block after a chapter head */
.statement--center, .caption--center { display: block; text-align: center; }
.caption--center { margin-top: 14px; }

/* ---------- Type roles ---------- */
.label {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 0 0 var(--space-5);
  font-family: var(--font-caps); font-weight: 400; font-size: var(--text-label);
  line-height: 1.5; letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--color-accent);
  padding-left: var(--track-caps); /* optical centring: tracking adds space after the last letter */
}
.label::before, .label::after { content: ""; flex: 0 0 44px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-600)); }
.label::after { background: linear-gradient(270deg, transparent, var(--gold-600)); }
@media (max-width: 479.98px) { .label { letter-spacing: 0.22em; padding-left: 0.22em; gap: 12px; } .label::before, .label::after { flex-basis: 24px; } }
.title {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--text-h2); line-height: var(--leading-display); letter-spacing: var(--track-display);
  color: var(--color-display); text-align: center; text-wrap: balance;
}
.lead { font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink); text-wrap: balance; }
.statement {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: var(--text-statement); line-height: 1.3; color: var(--color-ink); text-wrap: balance;
}
.caption {
  font-family: var(--font-caps); font-size: 0.75rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--color-accent); padding-left: 0.26em;
}
.note { font-family: var(--font-text); font-style: italic; font-size: var(--text-small); line-height: 1.55; color: var(--color-ink-soft); text-wrap: balance; }
.h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-h3); line-height: 1.18; color: var(--color-display); text-wrap: balance; }

/* Prose: justified with hyphenation where the measure allows, centred last line */
.prose { max-width: var(--measure); margin-inline: auto; }
.prose p {
  text-align: justify; text-align-last: center;
  hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 6 3 2;
  text-wrap: pretty;
}
.prose p + p { margin-top: 1em; }
.prose a { color: var(--color-display); text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--gold-600); transition: text-decoration-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.prose a:hover { color: var(--color-display-bright); text-decoration-color: var(--color-display); }
.prose--left p { text-align: left; text-align-last: auto; }
@media (max-width: 479.98px) {
  /* a 16px gutter leaves about 40 characters: justification makes rivers, so the narrow column reads ragged-right, centred last line kept off */
  .prose p { text-align: left; text-align-last: auto; hyphens: manual; }
}

/* ---------- Buttons and links ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--btn-h); padding: 0 30px 0 calc(30px + 0.22em);
  font-family: var(--font-caps); font-weight: 400; font-size: var(--text-label);
  letter-spacing: 0.22em; text-transform: uppercase; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 0; border-radius: var(--radius-btn);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--gold {
  color: var(--btn-ink); background-color: var(--btn-fill);
  box-shadow: inset 0 1px 0 rgba(255, 249, 230, 0.6), inset 0 -1px 0 rgba(120, 90, 30, 0.35), var(--shadow-btn);
}
.btn--gold:hover { background-color: var(--btn-fill-hover); box-shadow: inset 0 1px 0 rgba(255, 249, 230, 0.7), inset 0 -1px 0 rgba(120, 90, 30, 0.3), 0 18px 30px -14px rgba(1, 3, 8, 0.95); }
.btn--gold:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.btn--line { color: var(--color-display); background-color: rgba(4, 7, 14, 0.25); box-shadow: inset 0 0 0 1px var(--color-line); }
.btn--line:hover { color: var(--color-display-bright); background-color: rgba(201, 162, 74, 0.12); box-shadow: inset 0 0 0 1px var(--color-display); }
.btn--sm { min-height: var(--btn-h-sm); padding: 0 20px 0 calc(20px + 0.2em); font-size: 0.78rem; letter-spacing: 0.2em; }
.btn--block { width: 100%; }
.link-quiet {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.3125rem; line-height: 1.3;
  color: var(--color-ink); text-decoration: none;
  background: linear-gradient(90deg, var(--gold-600), var(--color-display), var(--gold-600)) left calc(100% - 8px) / 100% 1px no-repeat;
  transition: color var(--dur-fast) var(--ease-out);
}
.link-quiet:hover { color: var(--color-display-bright); }

/* ---------- Header ---------- */
.site-head { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header); }
.site-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(4, 7, 14, 0.78), rgba(4, 7, 14, 0));
  transition: background-color var(--dur-slow) var(--ease-out);
}
.site-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: -1;
  background: linear-gradient(90deg, transparent, var(--color-line-faint) 20%, var(--color-line-faint) 80%, transparent);
  opacity: 0; transition: opacity var(--dur-slow) var(--ease-out);
}
.site-head.is-solid::before { background-color: rgba(4, 7, 14, 0.94); }
.site-head.is-solid::after { opacity: 1; }
.site-head__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-5);
  height: var(--head-h); max-width: var(--wrap-wide); margin-inline: auto;
  padding-left: var(--gutter); padding-right: var(--gutter-r);
}
.brand {
  justify-self: start; display: inline-flex; align-items: center; gap: 13px; min-height: 44px;
  font-family: var(--font-caps); font-weight: 400; font-size: 0.875rem; letter-spacing: 0.3em;
  color: var(--color-ink); text-decoration: none; white-space: nowrap;
}
.brand svg { width: 32px; height: 32px; flex: none; }
.site-nav__list { display: flex; gap: clamp(24px, 2.8vw, 42px); list-style: none; }
.site-nav__list a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-caps); font-size: var(--text-label); letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--color-ink-soft); text-decoration: none; transition: color var(--dur-base) var(--ease-out);
}
.site-nav__list a::after {
  content: ""; position: absolute; left: 0; right: 0.24em; bottom: 9px; height: 1px;
  background: var(--color-accent); transform: scaleX(0); transition: transform var(--dur-slow) var(--ease-out);
}
.site-nav__list a:hover, .site-nav__list a[aria-current="true"], .site-nav__list a[aria-current="page"] { color: var(--color-display); }
.site-nav__list a:hover::after, .site-nav__list a[aria-current="true"]::after, .site-nav__list a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav__cta { display: none; }
.head-cta { justify-self: end; }
.nav-toggle { display: none; }

@media (max-width: 899.98px) {
  .site-head__inner { grid-template-columns: 1fr auto; }
  .brand { font-size: 0.8125rem; letter-spacing: 0.28em; gap: 11px; }
  .brand svg { width: 30px; height: 30px; }
  .head-cta { display: none; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 7px;
    width: 48px; height: 48px; margin-right: -8px; padding: 0 8px;
    background: transparent; border: 0; cursor: pointer; color: var(--color-display);
  }
  /* Both lines are 26px and change length with scaleX, so the toggle animates transforms only */
  .nav-toggle span { display: block; width: 26px; height: 1px; background: currentColor; transition: transform var(--dur-base) var(--ease-out); }
  .nav-toggle span:last-child { transform: translateX(4.5px) scaleX(0.654); }
  .menu-open .nav-toggle span:first-child { transform: translateY(4px) rotate(45deg) scaleX(0.846); }
  .menu-open .nav-toggle span:last-child { transform: translateY(-4px) rotate(-45deg) scaleX(0.846); }
  /* The phone menu is a full-screen veil with large serif links */
  .site-nav {
    position: fixed; inset: 0; z-index: -2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: var(--head-h) 24px 48px;
    background-color: var(--color-veil);
    background-image: radial-gradient(60% 40% at 50% 45%, rgba(227, 199, 126, 0.07), rgba(227, 199, 126, 0) 72%);
    opacity: 0; visibility: hidden;
    transition: opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
  }
  .menu-open .site-nav { opacity: 1; visibility: visible; transition: opacity var(--dur-slow) var(--ease-out), visibility 0s; }
  .site-nav__list { flex-direction: column; align-items: center; gap: 6px; }
  .site-nav__list a { font-family: var(--font-display); font-size: 2.125rem; letter-spacing: 0.01em; text-transform: none; color: var(--color-ink); min-height: 56px; }
  .site-nav__list a::after { display: none; }
  .site-nav__cta { display: block; margin-top: 30px; }
  html:not(.js) .site-head { position: relative; }
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .site-nav { position: static; opacity: 1; visibility: visible; padding: 0; background: none; z-index: auto; }
  html:not(.js) .site-head__inner { grid-template-columns: 1fr; height: auto; padding-top: 10px; padding-bottom: 10px; justify-items: center; }
  html:not(.js) .site-nav__list { flex-direction: row; gap: 18px; }
  html:not(.js) .site-nav__list a { font-family: var(--font-caps); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; min-height: 44px; }
  html:not(.js) .site-nav__cta { display: none; }
}

/* ---------- Footer ---------- */
.site-foot { padding: var(--space-8) 0 calc(var(--space-7) + env(safe-area-inset-bottom, 0px)); text-align: center; }
.site-foot::before {
  content: ""; display: block; height: 1px; max-width: var(--wrap); margin: 0 auto var(--space-7);
  background: linear-gradient(90deg, transparent, var(--color-line-faint) 20%, var(--color-line-faint) 80%, transparent);
}
.foot-brand { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; font-family: var(--font-caps); font-size: 0.8125rem; letter-spacing: 0.3em; color: var(--color-ink); }
.foot-brand svg { width: 30px; height: 30px; }
.foot-brand .dot { color: var(--gold-600); letter-spacing: 0; }
.foot-brand em { font-family: var(--font-display); font-style: italic; font-size: 1.1875rem; letter-spacing: 0.01em; color: var(--color-ink-soft); }
.foot-links { list-style: none; margin-top: var(--space-5); display: flex; flex-wrap: wrap; justify-content: center; gap: 0 30px; }
.foot-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
  font-family: var(--font-caps); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-ink-soft); text-decoration: none; transition: color var(--dur-base) var(--ease-out);
}
.foot-links a:hover { color: var(--color-display); }
.fine { margin-top: var(--space-5); font-size: 0.875rem; line-height: 1.6; color: var(--color-ink-faint); }
@media (max-width: 699.98px) {
  .foot-brand { flex-direction: column; gap: 12px; }
  .foot-brand .dot { display: none; }
  .foot-links { gap: 0 24px; }
}

/* ---------- Star divider ---------- */
.star-divider { display: flex; align-items: center; justify-content: center; gap: 16px; width: min(260px, 70vw); margin: 0 auto; color: var(--color-accent); }
.star-divider::before, .star-divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-600)); }
.star-divider::after { background: linear-gradient(90deg, var(--gold-600), transparent); }
.star-divider svg { width: 15px; height: 15px; flex: none; fill: currentColor; }
.star { width: 15px; height: 15px; fill: currentColor; }

/* ---------- Icon ring ---------- */
.ic {
  display: grid; place-items: center; flex: none;
  width: var(--ring-size); height: var(--ring-size); border-radius: 50%;
  color: var(--color-display);
  background: radial-gradient(circle, rgba(227, 199, 126, 0.1), rgba(227, 199, 126, 0) 68%);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 74, 0.66);
}
.ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- The reading-page frame (gold double hairline, corner diamonds, keystone star) ---------- */
.gframe {
  position: relative;
  padding: clamp(64px, 8vw, 104px) clamp(20px, 7vw, 96px) clamp(56px, 7vw, 96px);
  border: 1px solid var(--frame-line);
  box-shadow: inset 0 0 0 6px var(--color-ground), inset 0 0 0 7px var(--frame-line-inner);
}
.gframe.has-svg { border-color: transparent; box-shadow: none; }
.gframe > .frame-svg { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); pointer-events: none; overflow: visible; }
.frame-svg path { fill: none; vector-effect: non-scaling-stroke; }
.frame-svg .fo { stroke: var(--gold-400); stroke-opacity: 0.85; stroke-width: 1; }
.frame-svg .fi { stroke: var(--gold-600); stroke-opacity: 0.95; stroke-width: 1; }
.frame-svg .fd { fill: var(--gold-400); stroke: none; }
.frame-svg .fs { fill: var(--gold-200); stroke: none; }
.frame-svg .ln { stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s var(--ease-in-out); }
.frame-svg .fi.ln { transition-delay: 0.3s; }
.frame-svg .orn, .frame-svg .fs { transform-box: fill-box; transform-origin: center; transition: opacity 1.2s var(--ease-out) 1.9s, transform 1.4s var(--ease-out) 1.8s; }
.gframe.is-pending .frame-svg .ln { stroke-dashoffset: 1; }
.gframe.is-pending .frame-svg .orn { opacity: 0; transform: scale(0.4); }
.gframe.is-pending .frame-svg .fs { opacity: 0; transform: rotate(-90deg) scale(0.3); }
@media (max-width: 719.98px) { .gframe { padding: 72px 18px 52px; } }

/* ---------- Arch card (editions and any priced or chosen item) ---------- */
.arch-card {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(64px, 7vw, 84px) clamp(22px, 2.6vw, 36px) clamp(30px, 3vw, 40px);
  border-radius: var(--radius-arch);
  box-shadow: inset 0 0 0 1px var(--color-line-soft);
  background: radial-gradient(70% 22% at 50% 0%, rgba(227, 199, 126, 0.07), rgba(227, 199, 126, 0) 75%);
  transition: box-shadow var(--dur-slow) var(--ease-out);
}
.arch-card::before { /* the inner line, concentric with the outer (999px radius keeps it a true semicircle) */
  content: ""; position: absolute; inset: 7px; pointer-events: none; border-radius: var(--radius-arch);
  box-shadow: inset 0 0 0 1px rgba(142, 115, 57, 0.4);
}
.arch-card:focus-within { box-shadow: inset 0 0 0 1px var(--color-accent); }
.arch-card--lit {
  box-shadow: inset 0 0 0 1px var(--color-display), 0 0 80px -30px rgba(227, 199, 126, 0.55);
  background: radial-gradient(70% 26% at 50% 0%, rgba(227, 199, 126, 0.14), rgba(227, 199, 126, 0) 75%);
}
.arch-card--lit::before { box-shadow: inset 0 0 0 1px rgba(227, 199, 126, 0.55); }
/* Pointer glow along the border (ported from 21st.dev 1567, Aceternity Glowing Effect; vanilla, gold, fine pointers only) */
.glow-edge { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: var(--glow-on, 0); transition: opacity 360ms var(--ease-out); }
.glow-edge::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1.5px solid transparent;
  background: conic-gradient(from calc((var(--glow-angle, 0) - 34) * 1deg), rgba(240, 224, 180, 0) 0deg, rgba(240, 224, 180, 0.95) 34deg, rgba(240, 224, 180, 0) 68deg) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box; -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0) border-box;
  filter: drop-shadow(0 0 6px rgba(227, 199, 126, 0.55));
}

.arch-card__star { width: 15px; height: 15px; margin-bottom: 18px; color: var(--color-accent); fill: currentColor; }
.arch-card__note { margin-top: var(--space-3); max-width: 30ch; font-size: 1.03rem; line-height: 1.6; color: var(--color-ink-soft); text-wrap: pretty; }
.arch-card__btn { margin-top: auto; width: 100%; max-width: 250px; padding-inline: 18px; }
.arch-card__note + .arch-card__btn { margin-top: var(--space-6); }

/* ---------- Ledger (a ruled grid of linked items; no card boxes) ---------- */
.ledger { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; margin-inline: auto; }
.ledger > li { display: flex; }
.ledger__item {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(36px, 4.4vw, 52px) clamp(20px, 4vw, 52px);
  border-top: 1px solid var(--color-line-faint); text-decoration: none; overflow: hidden;
}
.ledger > li:nth-child(odd) .ledger__item { border-right: 1px solid var(--color-line-faint); }
.ledger > li:nth-last-child(-n+2) .ledger__item { border-bottom: 1px solid var(--color-line-faint); }
.ledger__item::before { /* candle spotlight under the pointer (fine pointers only, set by site.js) */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(227, 199, 126, 0.1), rgba(227, 199, 126, 0) 70%);
  transition: opacity var(--dur-slow) var(--ease-out);
}
a.ledger__item:hover::before, a.ledger__item:focus-visible::before { opacity: 1; }
.ledger__item .ic { margin-bottom: var(--space-5); outline: 1px solid transparent; outline-offset: 4px; transition: box-shadow var(--dur-slow) var(--ease-out), outline-color var(--dur-slow) var(--ease-out); }
a.ledger__item:hover .ic { box-shadow: inset 0 0 0 1px var(--color-display); outline: 1px solid rgba(227, 199, 126, 0.3); outline-offset: 4px; }
.ledger__item h3 { position: relative; font-family: var(--font-display); font-weight: 500; font-size: var(--text-h3); line-height: 1.3; color: var(--color-display); text-wrap: balance; }
.ledger__item p { position: relative; margin-top: var(--space-3); max-width: 34ch; font-size: 1.03rem; line-height: 1.6; color: var(--color-ink-soft); text-wrap: pretty; }
.ledger__arrow { display: inline-block; width: 12px; height: 12px; margin-left: 8px; vertical-align: 0.12em; color: var(--color-accent); fill: none; stroke: currentColor; stroke-width: 1.1; }
.ledger__soon { position: relative; margin-top: auto; padding-top: var(--space-5); font-family: var(--font-caps); font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-accent); padding-left: 0.24em; }
@media (max-width: 719.98px) {
  .ledger { grid-template-columns: 1fr; }
  .ledger > li:nth-child(odd) .ledger__item { border-right: 0; }
  .ledger > li:nth-last-child(-n+2) .ledger__item { border-bottom: 0; }
  .ledger > li:last-child .ledger__item { border-bottom: 1px solid var(--color-line-faint); }
}

/* ---------- FAQ (native details; height eased by site.js, ported from 21st.dev 19545) ---------- */
.faq { max-width: 760px; margin-inline: auto; text-align: left; }
.qa:first-child { border-top: 1px solid var(--color-line-soft); }
.qa { border-bottom: 1px solid var(--color-line-soft); }
.qa summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  min-height: 64px; padding: 20px 4px;
  font-family: var(--font-display); font-weight: 500; font-size: var(--text-h4); line-height: 1.25;
  color: var(--color-ink); transition: color var(--dur-base) var(--ease-out);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover, .qa[open] summary { color: var(--color-display); }
.qa summary:focus-visible { outline-offset: -2px; }
.pm { position: relative; flex: none; width: 16px; height: 16px; }
.pm::before, .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--color-accent); transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.pm::after { transform: rotate(90deg); }
.qa[open] .pm::after { transform: rotate(0deg); opacity: 0; }
.qa__a { display: grid; grid-template-rows: 1fr; }
.qa__a > div { overflow: hidden; }
.qa__a p { max-width: 64ch; padding: 0 44px 28px 4px; font-size: 1.09rem; line-height: 1.66; color: var(--color-ink-soft); }
.js-motion .qa__a { transition: grid-template-rows 420ms var(--ease-out); }
.js-motion .qa.is-closing .qa__a, .js-motion .qa.is-opening .qa__a { grid-template-rows: 0fr; }
@media (max-width: 699.98px) { .qa summary { padding: 18px 2px; } .qa__a p { padding-right: 8px; } }

/* ---------- Figure: a reading page shown as an object ---------- */
.page-figure { margin: 0; }
.page-figure__page { position: relative; aspect-ratio: 2 / 3; box-shadow: var(--shadow-page); background: var(--color-surface); }
.page-figure__page img { width: 100%; height: 100%; object-fit: cover; }
.page-figure figcaption { margin-top: var(--space-4); text-align: center; }

/* ---------- Page head: the title page of an inner page (no media above the fold) ---------- */
.page-head { position: relative; padding: calc(var(--head-h) + clamp(56px, 9vw, 120px)) 0 clamp(48px, 6vw, 88px); text-align: center; }
.page-head__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.75rem, 1.6rem + 4.4vw, 5rem); line-height: var(--leading-tight); letter-spacing: -0.01em;
  color: var(--color-display); text-wrap: balance;
}
.page-head__lead { max-width: 34em; margin: var(--space-5) auto 0; }
.page-head__actions { margin-top: var(--space-6); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 28px; }

/* ---------- Closing invitation: the mark, one sentence, one button ---------- */
.cta-band { text-align: center; padding-block: var(--section-y); overflow-x: clip; }
.cta-band__mark { position: relative; width: 112px; height: 112px; margin: 0 auto var(--space-6); }
.cta-band__mark::before { content: ""; position: absolute; inset: -70%; background: radial-gradient(closest-side, rgba(227, 199, 126, 0.15), rgba(4, 7, 14, 0)); pointer-events: none; }
.cta-band__mark svg { position: relative; width: 100%; height: 100%; }
.cta-band .title { max-width: 16em; margin-inline: auto; }
.cta-band .btn { margin-top: var(--space-6); }

/* ---------- Reveal helper (opt-in, data-reveal): opacity and a 14px rise, once ---------- */
[data-reveal] { transition: opacity 760ms var(--ease-out), transform 760ms var(--ease-out); }
.js-motion [data-reveal].is-pending { opacity: 0; transform: translateY(14px); }

@media print { .gframe.is-pending .frame-svg .ln { stroke-dashoffset: 0; } .gframe.is-pending .frame-svg .orn, .gframe.is-pending .frame-svg .fs { opacity: 1; transform: none; } .js-motion [data-reveal].is-pending { opacity: 1; transform: none; } }

/* ---------- Reduced motion: fewer and gentler, never a blanket kill of feedback ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .btn, .skip, .nav-toggle span, .site-nav__list a::after { transition-property: color, background-color, box-shadow, opacity !important; }
  .btn:active { transform: none; }
  .glow-edge { display: none; }
}

/* Footer: second row linking the tradition pages (orchestrator, 28 Oct) */
.foot-links--mirrors { margin-top: var(--space-3); }