/* ==========================================================================
   ATRAVOX — atravox.com
   The aesthetic system, locked per Master Strategy RevM:
   Void Black grounds · the gold triad · Phantom Platinum
   Cinzel display · Cormorant Garamond text · JetBrains Mono system
   No shadows. No gradients on glyphs. No photography. No faces.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --void:        #0A0B0E;   /* the ground */
  --void-2:      #0F1116;   /* elevated panels */
  --or-sombre:   #8C6D33;   /* deep gold — rules, borders, understatement */
  --or:          #C4A257;   /* primary gold — the voice */
  --or-clair:    #E8D5A8;   /* pale gold — highlights, the motto */
  --platinum:    #E6E4DF;   /* body text on void */

  --or-70: rgba(196, 162, 87, .70);
  --or-40: rgba(196, 162, 87, .40);
  --or-18: rgba(196, 162, 87, .18);
  --sombre-60: rgba(140, 109, 51, .60);
  --sombre-35: rgba(140, 109, 51, .35);
  --platinum-72: rgba(230, 228, 223, .72);
  --platinum-55: rgba(230, 228, 223, .55);

  --font-display: "Cinzel", "TeX Gyre Pagella", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-text: "Cormorant Garamond", "EB Garamond", Garamond, "TeX Gyre Pagella", "Palatino Linotype", Palatino, Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-jp: "Noto Serif JP", "Noto Serif CJK JP", "Hiragino Mincho ProN", "Yu Mincho", serif;

  --nav-h: 76px;
  --measure: 46rem;      /* prose measure */
  --container: 71.25rem; /* 1140px */
}

/* ---------- Reset, ground ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--void);
  color: var(--platinum);
  font-family: var(--font-text);
  font-size: clamp(1.15rem, 1.06rem + 0.4vw, 1.32rem);
  font-weight: 400;
  line-height: 1.66;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

::selection { background: var(--or); color: var(--void); }

img, svg { display: block; max-width: 100%; }

a { color: var(--or-clair); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--or); }

:focus-visible {
  outline: 1px solid var(--or);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--void-2); color: var(--or-clair);
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  padding: .9em 1.4em; border: 1px solid var(--or); z-index: 200;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Type ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; color: var(--or); }

.display {
  font-size: clamp(2.35rem, 1.6rem + 3.9vw, 4.35rem);
  line-height: 1.14;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
}

.section-title {
  font-size: clamp(1.7rem, 1.3rem + 2vw, 2.7rem);
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.2;
  font-weight: 500;
}

.label {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--or);
}

.label--sombre { color: var(--or-70); }

.lead {
  font-size: clamp(1.3rem, 1.15rem + 0.75vw, 1.66rem);
  line-height: 1.55;
  color: var(--platinum);
}

.ital { font-style: italic; }
.gold { color: var(--or); }
.pale { color: var(--or-clair); }
.muted { color: var(--platinum-72); }

.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.15em; }
.prose strong { color: var(--or-clair); font-weight: 600; }
.prose em { color: var(--platinum); }

/* Apex dot — the house punctuation */
.apex { color: var(--or-clair); }
.apex-dot {
  display: block; width: 8px; height: 8px;
  background: var(--or-clair); margin-inline: auto;
  transform: rotate(45deg);
}

/* ---------- Layout ---------- */
.container { width: min(100% - 3rem, var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 3rem, 56rem); margin-inline: auto; }

section { position: relative; }
.section { padding-block: clamp(6rem, 13vh, 10.5rem); }
[id] { scroll-margin-top: calc(var(--nav-h) + 44px); }

.rule {
  border: 0; height: 1px;
  background: var(--sombre-60);
  margin: 0;
}
.rule--short { width: 72px; }
.rule--center { margin-inline: auto; }

/* Section heading block — echoes the strategy document's part headers */
.part-head { text-align: center; margin-bottom: clamp(3.2rem, 7vh, 5.2rem); }
.part-head .label { display: block; margin-bottom: 1.6rem; }
.part-head .numeral {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  color: var(--platinum-55);
  letter-spacing: .08em;
  line-height: 1;
  display: block; margin-bottom: 1.1rem;
}
.part-head .section-title { margin-bottom: 0; }
.part-head .rule--short { margin-top: 2rem; }

/* Corner brackets — the framed field from the covers */
.frame { position: relative; }
.frame::before, .frame::after,
.frame > .frame-b::before, .frame > .frame-b::after {
  content: ""; position: absolute; width: 30px; height: 30px;
  border-color: var(--or-sombre); border-style: solid;
}
.frame::before { top: 0; left: 0; border-width: 2px 0 0 2px; }
.frame::after { top: 0; right: 0; border-width: 2px 2px 0 0; }
.frame > .frame-b::before { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.frame > .frame-b::after { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

/* Ghost kamon watermark */
.watermark {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  opacity: .03;
}
.watermark img { width: 100%; height: 100%; }

/* ---------- Utilities (CSP-clean: no inline styles anywhere) ---------- */
.center { text-align: center; }
.prose--wide { max-width: none; }
.sp-xs { height: 1.2rem; } .sp-sm { height: 1.5rem; } .sp-md { height: 2.3rem; }
.sp-lg { height: 3.5rem; } .sp-xl { height: 4.2rem; }
.mt-xl { margin-top: 3.6rem; }
.section--elevated { background: var(--void-2); border-block: 1px solid var(--sombre-35); }
.section--flush-top { padding-top: 0; }
.section--tight-top { padding-top: 2rem; }
.section-intro { text-align: center; margin-bottom: clamp(3rem, 6vw, 4.2rem); }
.section-outro { margin-top: 3.4rem; text-align: center; }
.section-outro p { font-size: 1.08rem; }

/* ---------- Charter line (the graceful-aging element) ---------- */
.charter-line {
  position: relative; z-index: 60;
  background: var(--void-2);
  border-bottom: 1px solid var(--sombre-35);
  text-align: center;
  padding: .72em 1em;
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--or);
}
.charter-line .sep { color: var(--or-40); padding-inline: .9em; }

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; left: 0; right: 0; z-index: 80;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(10, 11, 14, .82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .4s ease, background .4s ease;
}
.nav.is-scrolled { border-bottom-color: var(--sombre-35); background: rgba(10, 11, 14, .92); }

.nav-inner {
  width: min(100% - 3rem, 87.5rem);
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}

.nav-home { display: inline-flex; align-items: center; gap: .95rem; }
.nav-home img { width: 40px; height: 40px; }
.nav-home .nav-word {
  font-family: var(--font-display);
  font-size: 1.18rem; letter-spacing: .3em; text-indent: .3em;
  color: var(--or); text-transform: uppercase; font-weight: 500;
  transform: translateY(1px);
}

.nav-links { display: flex; align-items: center; gap: 2.1rem; list-style: none; }
.nav-links a {
  font-family: var(--font-mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--platinum-72);
}
.nav-links a:hover { color: var(--or-clair); }
.nav-links .nav-join {
  color: var(--or);
  border: 1px solid var(--or-sombre);
  padding: .78em 1.5em;
  transition: all .3s ease;
}
.nav-links .nav-join:hover { background: var(--or); color: var(--void); border-color: var(--or); }

.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; position: relative;
}
.nav-toggle span {
  position: absolute; left: 10px; right: 10px; height: 1px;
  background: var(--or); transition: transform .3s ease, opacity .3s ease;
}
.nav-toggle span:nth-child(1) { top: 18px; }
.nav-toggle span:nth-child(2) { top: 26px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

.nav-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: var(--void);
  display: none;
  align-items: center; justify-content: center;
}
.nav-overlay.is-open { display: flex; }
.nav-overlay ul { list-style: none; text-align: center; display: grid; gap: 2.2rem; }
.nav-overlay a {
  font-family: var(--font-display); font-size: 1.5rem;
  letter-spacing: .22em; text-indent: .22em; text-transform: uppercase;
  color: var(--platinum);
}
.nav-overlay a:hover { color: var(--or); }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
}

/* ---------- Hero ---------- */
.hero {
  min-height: calc(100svh - var(--nav-h) - 2rem);
  display: flex; align-items: center;
  padding-top: clamp(3rem, 6vh, 5rem);
  padding-bottom: 4.5rem;
  overflow: hidden;
}
.hero .watermark {
  top: 50%; right: -16vmin; transform: translateY(-50%);
  width: 74vmin; height: 74vmin;
}
.hero-field {
  position: relative; z-index: 1;
  width: min(100% - 3rem, 76rem);
  margin-inline: auto;
  text-align: center;
  padding: clamp(2.4rem, 4.5vw, 3.6rem) clamp(1.4rem, 5vw, 5rem);
}
.hero .apex-dot { margin-bottom: 1.5rem; }
.hero-kamon { width: clamp(100px, 12vw, 118px); margin-inline: auto; margin-bottom: 1.8rem; }
.hero-eyebrow { display: block; margin-bottom: 1.6rem; }
.hero h1 { margin-bottom: 1.35rem; }
.hero .lead { max-width: 44rem; margin-inline: auto; }
.hero-etym {
  margin-top: 1rem;
  font-style: italic;
  color: var(--platinum-55);
  font-size: 1.05rem;
  letter-spacing: .04em;
}

.hero-capture { margin-top: 2.2rem; }

/* ---------- Capture form ---------- */
.capture { max-width: 34rem; margin-inline: auto; }
.capture-row { display: flex; gap: .8rem; }
.capture input[type="email"] {
  flex: 1; min-width: 0;
  background: var(--void-2);
  border: 1px solid var(--sombre-60);
  color: var(--platinum);
  font-family: var(--font-text);
  font-size: 1.12rem;
  padding: .86em 1.15em;
  border-radius: 0;
  transition: border-color .3s ease;
  appearance: none;
}
.capture input[type="email"]::placeholder { color: var(--platinum-55); font-style: italic; }
.capture input[type="email"]:focus { border-color: var(--or); outline: none; }
.capture .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.capture-note {
  margin-top: 1.05rem;
  font-family: var(--font-mono);
  font-size: .62rem; font-weight: 400;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--platinum-55);
}
.capture-note .sep { color: var(--sombre-60); padding-inline: .7em; }

.capture-confirm {
  border: 1px solid var(--sombre-60);
  background: var(--void-2);
  padding: 1.6rem 1.8rem;
  font-size: 1.18rem;
}
.capture-confirm .label { display: block; margin-bottom: .7rem; }

.capture-error {
  margin-top: .9rem;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .18em;
  color: var(--or-clair);
}
.capture-error a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 560px) {
  .capture-row { flex-direction: column; }
  .display br { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .7rem; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase; text-indent: .28em;
  color: var(--or);
  background: transparent;
  border: 1px solid var(--or);
  padding: 1em 2.1em;
  cursor: pointer;
  border-radius: 0;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.btn:hover { background: var(--or); color: var(--void); }

.btn--solid { background: var(--or); color: var(--void); }
.btn--solid:hover { background: var(--or-clair); border-color: var(--or-clair); color: var(--void); }

.btn--sombre { border-color: var(--or-sombre); color: var(--or-70); }
.btn--sombre:hover { background: transparent; border-color: var(--or); color: var(--or); }

.btn[disabled] { opacity: .55; cursor: wait; }

/* ---------- The engines line (transition band) ---------- */
.engines {
  padding-block: clamp(4.2rem, 9vh, 7rem);
  border-block: 1px solid var(--sombre-35);
  background: var(--void-2);
  text-align: center;
}
.engines p {
  font-family: var(--font-text); font-style: italic;
  font-size: clamp(1.42rem, 1.2rem + 1.2vw, 2rem);
  color: var(--or-clair);
  letter-spacing: .02em;
}
.engines .label { display: block; margin-top: 1.7rem; }

/* ---------- Position trio (not / not / not) ---------- */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--sombre-35); border: 1px solid var(--sombre-35); }
.trio > div { background: var(--void); padding: 2.4rem 2.1rem 2.6rem; }
.trio .label { display: block; margin-bottom: 1.15rem; }
.trio p { font-size: 1.13rem; line-height: 1.6; color: var(--platinum-72); }
.trio p strong { color: var(--platinum); font-weight: 600; }
@media (max-width: 860px) { .trio { grid-template-columns: 1fr; } }

/* ---------- Essence panel — the bordered doctrine box ---------- */
.essence {
  border: 1px solid var(--sombre-60);
  background: var(--void-2);
  padding: clamp(2.1rem, 5vw, 3.4rem) clamp(1.8rem, 5vw, 3.8rem);
  position: relative;
}
.essence .label { display: block; margin-bottom: 1.5rem; }
.essence p {
  font-size: clamp(1.28rem, 1.14rem + .7vw, 1.62rem);
  line-height: 1.58;
}
.essence p .pale { font-style: italic; }

/* ---------- Cards — the ladder ---------- */
.cards { display: grid; gap: 1.4rem; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 960px) { .cards--3 { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .cards--2 { grid-template-columns: 1fr; } }

.card {
  border: 1px solid var(--sombre-35);
  background: var(--void-2);
  padding: 2.5rem 2.3rem 2.6rem;
  display: flex; flex-direction: column;
  transition: border-color .35s ease;
}
.card:hover { border-color: var(--or-sombre); }
.card--feature { border-color: var(--or-sombre); }

.card .card-tier {
  font-family: var(--font-display);
  font-size: 1.28rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--or); font-weight: 500;
  margin-bottom: .55rem;
}
.card .card-price {
  font-family: var(--font-mono); font-size: .74rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--or-clair);
  margin-bottom: 1.6rem;
}
.card .card-price .per { color: var(--platinum-55); }
.card p { font-size: 1.12rem; line-height: 1.62; color: var(--platinum-72); }
.card p strong { color: var(--platinum); font-weight: 600; }
.card ul { list-style: none; margin-top: 1.2rem; display: grid; gap: .65rem; }
.card ul li {
  font-size: 1.06rem; color: var(--platinum-72);
  padding-left: 1.35rem; position: relative;
}
.card ul li::before {
  content: "·"; position: absolute; left: .2rem; top: -.1rem;
  color: var(--or); font-size: 1.4rem; line-height: 1.3;
}
.card .card-cta { margin-top: auto; padding-top: 2rem; }
.card .card-cta .btn { width: 100%; text-align: center; }

.card-flag {
  font-family: var(--font-mono); font-size: .6rem; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--or); border: 1px solid var(--sombre-60);
  padding: .5em .95em; display: inline-block; margin-bottom: 1.7rem;
  align-self: flex-start;
}

/* ---------- Wide panel (Estate) ---------- */
.panel-wide {
  border: 1px solid var(--sombre-60);
  background: var(--void-2);
  padding: clamp(2.6rem, 6vw, 4.2rem);
  position: relative; overflow: hidden;
}
.panel-wide .watermark { top: 50%; right: -10rem; transform: translateY(-50%); width: 30rem; height: 30rem; opacity: .04; }
.panel-wide > :not(.watermark) { position: relative; z-index: 1; }

/* ---------- Code tenets ---------- */
.tenets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--sombre-35); border: 1px solid var(--sombre-35); }
.tenets > div { background: var(--void); padding: 2.3rem 2.2rem; }
.tenets h3 {
  font-size: 1.1rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--or); font-weight: 500; margin-bottom: .95rem;
}
.tenets p { font-size: 1.1rem; line-height: 1.6; color: var(--platinum-72); }
@media (max-width: 760px) { .tenets { grid-template-columns: 1fr; } }

.code-spine {
  text-align: center;
  font-family: var(--font-text); font-style: italic;
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.3rem);
  color: var(--or-clair);
  line-height: 1.45;
  max-width: 46rem; margin-inline: auto;
}

/* ---------- Voice band ---------- */
.voice-band { text-align: center; }
.voice-band .seal-mark { width: 96px; margin-inline: auto; margin-bottom: 2.2rem; opacity: .92; }
.voice-band .name {
  font-family: var(--font-display); font-size: 1.6rem;
  letter-spacing: .2em; text-indent: .2em; text-transform: uppercase;
  color: var(--or); margin-bottom: .8rem;
}
.voice-band .handle {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .2em;
  color: var(--platinum-55);
}
.voice-band .handle a { color: var(--or-70); }
.voice-band .handle a:hover { color: var(--or-clair); }
.voice-band .prose { margin-inline: auto; margin-top: 1.9rem; text-align: center; }

/* ---------- Questions ---------- */
.qa { border-top: 1px solid var(--sombre-35); }
.qa details { border-bottom: 1px solid var(--sombre-35); }
.qa summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; justify-content: space-between; gap: 2rem;
  padding: 1.7rem .4rem;
  font-family: var(--font-display);
  font-size: 1.18rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--platinum);
  transition: color .3s ease;
}
.qa summary:hover { color: var(--or-clair); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "·"; color: var(--or); font-size: 2rem; line-height: 0;
  transition: transform .3s ease; flex-shrink: 0;
}
.qa details[open] summary { color: var(--or); }
.qa details[open] summary::after { transform: rotate(90deg) scale(1.4); }
.qa .qa-body { padding: 0 .4rem 2rem; max-width: var(--measure); }
.qa .qa-body p { font-size: 1.14rem; line-height: 1.64; color: var(--platinum-72); }
.qa .qa-body p + p { margin-top: .9em; }
.qa .qa-body em { color: var(--platinum); }

/* ---------- The knot (closing capture band) ---------- */
.knot { text-align: center; }
.knot .knot-field {
  position: relative;
  padding: clamp(3.4rem, 8vw, 6rem) clamp(1.6rem, 6vw, 5rem);
}
.knot .hero-kamon { width: 92px; margin-bottom: 2.4rem; }
.knot .section-title { margin-bottom: 1.2rem; }
.knot .lead { max-width: 40rem; margin-inline: auto; color: var(--platinum-72); }
.knot .capture { margin-top: 2.8rem; }

/* ---------- Colophon ---------- */
.colophon {
  border-top: 1px solid var(--sombre-35);
  padding-block: clamp(4.5rem, 9vh, 7rem) 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.colophon .seal { width: clamp(150px, 20vw, 190px); margin-inline: auto; margin-bottom: 2.6rem; }
.colophon .motto {
  font-family: var(--font-display);
  color: var(--or-clair);
  letter-spacing: .42em; text-indent: .42em;
  font-size: .95rem; text-transform: uppercase;
  margin-bottom: .9rem;
}
.colophon .motto-jp {
  font-family: var(--font-jp);
  color: var(--platinum-55);
  letter-spacing: .3em; text-indent: .3em;
  font-size: .8rem;
  margin-bottom: 3.2rem;
}
.colophon .foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem 2.4rem; margin-bottom: 2.6rem; list-style: none; }
.colophon .foot-nav a {
  font-family: var(--font-mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--platinum-55);
}
.colophon .foot-nav a:hover { color: var(--or); }
.colophon .fine {
  font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--platinum-55);
  line-height: 2.3;
}
.colophon .fine .sep { color: var(--sombre-60); padding-inline: .8em; }
.colophon .fine a { color: var(--platinum-55); }
.colophon .fine a:hover { color: var(--or); }

/* ---------- Inner pages (Code, Frame, Ledger) ---------- */
.page-head {
  padding-top: clamp(4.5rem, 9vh, 7rem);
  padding-bottom: clamp(3.4rem, 7vh, 5.4rem);
  text-align: center;
}
.page-head .apex-dot { margin-bottom: 2.2rem; }
.page-head .label { display: block; margin-bottom: 1.7rem; }
.page-head .display { font-size: clamp(2rem, 1.5rem + 2.6vw, 3.4rem); }
.page-head .lead { max-width: 42rem; margin-inline: auto; margin-top: 1.7rem; color: var(--platinum-72); }

.page-body { padding-bottom: clamp(5rem, 11vh, 9rem); }
.page-body .prose { margin-inline: auto; }
.page-body h2 {
  font-size: 1.32rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 500; color: var(--or);
  margin: 2.9em 0 .9em;
}
.page-body h2:first-child { margin-top: 0; }
.page-body .prose > .label { display: block; margin: 3.2em 0 1.1em; }
.page-body ul { margin: 1.1em 0 1.1em; list-style: none; display: grid; gap: .7rem; }
.page-body ul li { padding-left: 1.4rem; position: relative; color: var(--platinum-72); }
.page-body ul li::before {
  content: "·"; position: absolute; left: .15rem; top: -.12rem;
  color: var(--or); font-size: 1.5rem;
}
.page-body ul li strong { color: var(--platinum); }

/* ---------- 404 ---------- */
.void-page {
  min-height: 100svh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 2rem;
  position: relative; overflow: hidden;
}
.void-page .watermark { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 92vmin; height: 92vmin; opacity: .035; }
.void-page > :not(.watermark) { position: relative; z-index: 1; }
.void-page .hero-kamon { width: 110px; margin-bottom: 2.6rem; opacity: .9; }
.void-page p:last-of-type { margin-bottom: 0; }
.void-page .display { margin-bottom: 1.4rem; font-size: clamp(1.8rem, 5vw, 2.8rem); }
.void-page p { color: var(--platinum-72); max-width: 34rem; margin-bottom: 2.6rem; }

/* ---------- Reveals (JS adds .js to <html>) ---------- */
html.menu-open, html.menu-open body { overflow: hidden; }

html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease; }
html.js .reveal.is-visible { opacity: 1; transform: none; }
html.js .reveal-stagger > * { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
html.js .reveal-stagger.is-visible > * { opacity: 1; transform: none; }
html.js .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .12s; }
html.js .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .24s; }
html.js .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal, html.js .reveal-stagger > * {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .btn, a, .card { transition: none !important; }
}

/* ---------- Print ---------- */
@media print {
  .charter-line, .nav, .nav-overlay, .capture, .btn { display: none !important; }
  body { background: #fff; color: #111; }
}