/* =====================================================================
   ByeCore · Legal — shared stylesheet  ·  v4 "Atelier"
   Aesthetic: Anthropic-inspired warm editorial — ivory paper ground,
   clay/terracotta accent, literary serif display, flat & calm surfaces.
   Theme: System / Light / Dark  (driven by html[data-theme] + the inline
   no-FOUC head script; the segmented control lives in the top bar).
   Used by: agreement.html · privacy.html · about.html
   ===================================================================== */

/* ===================== design tokens ===================== */
:root {
  color-scheme: light;

  /* ground & surfaces — flat: panels sit close to the paper */
  --bg: #f4f1ea;            /* warm ivory paper */
  --bg-deep: #ece7db;       /* deeper edge / footer */
  --surface: #f7f4ed;       /* panel surface, barely above paper */
  --surface-2: #efeade;     /* secondary surface (code, insets) */
  --raise: rgba(40, 33, 22, 0.03);

  /* hairlines */
  --line: rgba(40, 33, 22, 0.12);
  --line-strong: rgba(40, 33, 22, 0.20);

  /* ink */
  --text: #1a1714;
  --muted: #5e564a;
  --faint: #8c8270;

  /* clay accent */
  --accent: #c15b3c;
  --accent-deep: #9d4527;
  --accent-soft: rgba(193, 91, 60, 0.10);
  --accent-line: rgba(193, 91, 60, 0.30);

  /* caution + secondary */
  --warn: #b23b26;
  --warn-soft: rgba(178, 59, 38, 0.08);

  /* code */
  --code-bg: #f1ece0;
  --code-text: #463f31;

  /* type */
  --font-display: "Fraunces", "Noto Serif SC", "Songti SC", "STSong",
    "SimSun", "PingFang SC", serif;
  --font-ui: "Hanken Grotesk", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular",
    Menlo, Consolas, monospace;

  /* metrics — wider reading measure, flatter cards */
  --radius-xl: 16px;
  --radius-lg: 13px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --topbar-h: 62px;
  --measure: 50rem;

  --shadow-card: none;
}

/* ---- dark (explicit) ---- */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1b1a17;            /* warm charcoal, never pure black */
  --bg-deep: #141310;
  --surface: #201f1c;       /* flat: close to ground */
  --surface-2: #27251f;
  --raise: rgba(255, 247, 233, 0.04);

  --line: rgba(236, 230, 216, 0.12);
  --line-strong: rgba(236, 230, 216, 0.22);

  --text: #ece6da;
  --muted: #a79d8b;
  --faint: #756c5c;

  --accent: #dd8a66;
  --accent-deep: #c16a47;
  --accent-soft: rgba(221, 138, 102, 0.12);
  --accent-line: rgba(221, 138, 102, 0.32);

  --warn: #e58e72;
  --warn-soft: rgba(229, 142, 114, 0.10);

  --code-bg: #15140f;
  --code-text: #ddd4c2;

  --shadow-card: none;
}

/* ---- no-JS / pre-paint fallback: honour the OS when no choice stored ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #1b1a17; --bg-deep: #141310; --surface: #201f1c; --surface-2: #27251f;
    --raise: rgba(255, 247, 233, 0.04);
    --line: rgba(236, 230, 216, 0.12); --line-strong: rgba(236, 230, 216, 0.22);
    --text: #ece6da; --muted: #a79d8b; --faint: #756c5c;
    --accent: #dd8a66; --accent-deep: #c16a47;
    --accent-soft: rgba(221, 138, 102, 0.12); --accent-line: rgba(221, 138, 102, 0.32);
    --warn: #e58e72; --warn-soft: rgba(229, 142, 114, 0.10);
    --code-bg: #15140f; --code-text: #ddd4c2;
    --shadow-card: none;
  }
}

/* ===================== base ===================== */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 0.4s ease, color 0.4s ease;
}

/* atmosphere — calm warm paper: one soft top glow + whisper grain */
.backdrop {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -8%, var(--accent-soft), transparent 46%),
    radial-gradient(100% 100% at 50% 0%, var(--bg) 0%, var(--bg) 60%, var(--bg-deep) 100%);
}
body::after {                                 /* faint paper grain */
  content: ""; position: fixed; inset: 0; z-index: 60;
  pointer-events: none; opacity: 0.03; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="dark"] body::after { mix-blend-mode: overlay; opacity: 0.04; }

::selection { background: var(--accent-soft); color: var(--accent-deep); }
html[data-theme="dark"] ::selection { color: var(--text); }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
strong, b { color: var(--text); font-weight: 650; }

code, kbd { font-family: var(--font-mono); }
p code, li code, dd code, td code {
  padding: 1px 6px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--accent-deep); font-size: 0.85em; word-break: break-word;
}

/* inline prose link — animated clay underline */
.lk {
  color: var(--accent-deep); font-weight: 550;
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0% 1.5px no-repeat;
  padding-bottom: 1px;
  transition: background-size 0.25s ease, color 0.2s ease;
}
.lk:hover { background-size: 100% 1.5px; color: var(--accent); }

/* ===================== reading progress ===================== */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 90;
  pointer-events: none; background: transparent;
}
.progress i {
  display: block; height: 100%; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: var(--accent);
}

/* ===================== top bar — centered logo, functions split ===================== */
.topbar {
  position: sticky; top: 0; z-index: 70;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  height: var(--topbar-h);
  padding: 0 clamp(18px, 3vw, 36px);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.bar-left { display: flex; align-items: center; gap: 8px; justify-self: start; min-width: 0; }
.bar-right { display: flex; align-items: center; gap: 8px; justify-self: end; min-width: 0; }
.brand { display: inline-flex; align-items: center; gap: 11px; white-space: nowrap; justify-self: center; }
.brand-mark, .brand .bm {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid var(--line-strong); overflow: hidden;
  background: var(--surface-2); color: var(--accent);
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: 18px; line-height: 1;
}
.brand-mark img, .brand .bm img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-text, .brand .bt {
  display: inline-flex; flex-direction: column; line-height: 1.05;
  font-family: var(--font-display); font-weight: 600; font-size: 18px;
  letter-spacing: 0; color: var(--text);
}
.brand-text small, .brand .bt small {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--faint); margin-top: 3px;
}

/* document switch (协议 / 隐私 / 关于) */
.doc-switch { display: inline-flex; gap: 2px; }
.doc-switch a {
  padding: 6px 13px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  color: var(--muted);
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.doc-switch a:hover { color: var(--text); background: var(--raise); }
.doc-switch a.cur {
  color: var(--accent-deep); background: var(--accent-soft);
  border-color: var(--accent-line);
}

/* segmented theme control */
.theme-seg {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--raise);
}
.ts-btn {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--faint); cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease;
}
.ts-btn svg { width: 15px; height: 15px; display: block; }
.ts-btn:hover { color: var(--text); }
html[data-theme-pref="system"] .ts-btn[data-theme-set="system"],
html[data-theme-pref="light"]  .ts-btn[data-theme-set="light"],
html[data-theme-pref="dark"]   .ts-btn[data-theme-set="dark"] {
  background: var(--surface); color: var(--accent-deep);
  box-shadow: 0 1px 2px rgba(40, 33, 22, 0.10);
}
html[data-theme="dark"][data-theme-pref="system"] .ts-btn[data-theme-set="system"],
html[data-theme="dark"][data-theme-pref="light"]  .ts-btn[data-theme-set="light"],
html[data-theme="dark"][data-theme-pref="dark"]   .ts-btn[data-theme-set="dark"] {
  color: var(--accent); box-shadow: none;
}

/* segmented language control (中 / EN) */
.lang-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--raise); }
.lang-btn {
  min-width: 30px; height: 28px; padding: 0 9px;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--faint); font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em; cursor: pointer; transition: color 0.18s ease, background 0.18s ease;
}
.lang-btn:hover { color: var(--text); }
html[data-lang="zh"] .lang-btn[data-lang-set="zh"],
html[data-lang="en"] .lang-btn[data-lang-set="en"] {
  background: var(--surface); color: var(--accent-deep); box-shadow: 0 1px 2px rgba(40, 33, 22, 0.10);
}
html[data-theme="dark"][data-lang="zh"] .lang-btn[data-lang-set="zh"],
html[data-theme="dark"][data-lang="en"] .lang-btn[data-lang-set="en"] { color: var(--accent); box-shadow: none; }

/* bilingual visibility — controlled by html[data-lang] */
[data-lang="zh"] .only-en { display: none !important; }
[data-lang="en"] .only-zh { display: none !important; }

.tool-btn {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--raise);
  color: var(--muted); font-size: 15px; cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.tool-btn:hover { color: var(--accent-deep); border-color: var(--line-strong); }
.cta {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.cta:hover {
  background: var(--accent-deep); transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px var(--accent-line);
}

/* ===================== shell: sticky sidebar + wide content (matches index.html) ===================== */
.shell {
  display: grid; grid-template-columns: 248px minmax(0, 1fr);
  gap: clamp(24px, 3vw, 44px);
  max-width: 1480px; margin: 0 auto;
  padding: clamp(20px, 3vw, 36px) clamp(20px, 3vw, 36px) 0;
  align-items: start;
}

/* left chapter rail — now an in-flow sticky sidebar */
.rail {
  position: sticky; top: calc(var(--topbar-h) + 20px); align-self: start;
  z-index: 40; display: flex; flex-direction: column;
  max-height: calc(100vh - var(--topbar-h) - 40px); overflow-y: auto;
  padding: 4px 6px 24px 0;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.rail::-webkit-scrollbar { width: 4px; }
.rail::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
.rail a {
  position: relative; display: flex; align-items: baseline; gap: 10px;
  padding: 7px 12px 7px 16px; border-left: 1px solid var(--line);
  color: var(--muted); font-family: var(--font-ui); font-size: 13.5px; line-height: 1.55;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.rail a::before {
  content: ""; position: absolute; left: -1px; top: 50%;
  height: 0; width: 2px; background: var(--accent);
  transform: translateY(-50%); transition: height 0.22s ease;
}
.rail a .rn { font-family: var(--font-mono); font-size: 11px; color: var(--faint); width: 1.6em; flex-shrink: 0; }
.rail a:hover { color: var(--text); }
.rail a.on { color: var(--accent-deep); border-left-color: transparent; }
.rail a.on::before { height: 64%; }
.rail a.on .rn { color: var(--accent); }

/* ===================== document column ===================== */
.doc { min-width: 0; padding: 0 0 clamp(60px, 9vw, 110px); }
.wrap { max-width: var(--measure); }

/* scroll reveal */
.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.65, 0.3, 1),
              transform 0.7s cubic-bezier(0.22, 0.65, 0.3, 1);
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* shared flat surface */
.preamble, .pledge, .creed, .chapter, .appendix, .toc {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-xl);
  background: var(--surface); box-shadow: var(--shadow-card);
}

/* ===================== hero ===================== */
.hero {
  position: relative; overflow: hidden;
  margin-top: clamp(18px, 3vw, 34px);
  padding: clamp(40px, 6vw, 78px) clamp(26px, 4.4vw, 58px) clamp(34px, 4.6vw, 56px);
  border: 1px solid var(--line); border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--accent-soft), transparent 50%),
    var(--surface);
  box-shadow: var(--shadow-card);
}
.hero > * { position: relative; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  color: var(--accent-deep); font-family: var(--font-ui);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em;
}
.hero-badge .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-line); animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--accent-line); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.hero-title {
  margin: 26px 0 0;
  font-family: var(--font-display); font-weight: 420;
  font-size: clamp(40px, 7vw, 72px); line-height: 1.06;
  letter-spacing: -0.015em; color: var(--text);
}
.hero-title em {
  font-style: italic; font-weight: 460; color: var(--accent);
}
.hero-sub {
  margin: 18px 0 0;
  font-family: var(--font-mono); font-size: clamp(11.5px, 1.7vw, 13px);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint);
}
.hero-lead {
  margin: 20px 0 0; max-width: 52ch;
  color: var(--muted); font-size: 17px; line-height: 1.74;
}
.hero-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin: 30px 0 0; padding-top: 24px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint);
}
.hero-meta b { color: var(--accent-deep); font-weight: 600; }
.hero-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); }

/* ===================== preamble ===================== */
.preamble {
  margin: clamp(20px, 3vw, 34px) 0;
  padding: clamp(26px, 3.6vw, 42px);
  border-left: 3px solid var(--accent);
}
.eyebrow {
  font-family: var(--font-mono); font-weight: 600;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--accent-deep); margin: 0 0 14px;
}
.preamble p { margin: 0 0 14px; color: var(--muted); }
.preamble p:last-child { margin-bottom: 0; }
.uline {
  color: var(--text); font-weight: 600;
  background: linear-gradient(var(--accent-line), var(--accent-line)) bottom / 100% 1.5px no-repeat;
  padding-bottom: 1px;
}

/* ===================== compliance pledge ===================== */
.pledge {
  margin: clamp(20px, 3vw, 34px) 0;
  padding: clamp(28px, 3.8vw, 46px);
}
.pledge-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pledge-head .eyebrow { margin: 0; }
.pledge-head::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}
.pledge-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(22px, 3vw, 31px); line-height: 1.24;
  letter-spacing: -0.01em; color: var(--text); margin: 0 0 14px;
}
.pledge p { margin: 0; color: var(--muted); }
.pledge-points {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.pledge-points li {
  position: relative;
  padding: 20px 18px 18px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface-2);
  transition: border-color 0.22s ease, transform 0.22s ease;
}
.pledge-points li:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.pledge-points b {
  display: block; font-family: var(--font-ui); font-weight: 700;
  color: var(--text); font-size: 15px; margin-bottom: 6px;
}
.pledge-points b::before {
  content: ""; display: inline-block; width: 16px; height: 1.5px;
  background: var(--accent); vertical-align: middle; margin-right: 9px;
}
.pledge-points span { display: block; font-size: 13.5px; line-height: 1.66; color: var(--muted); }

/* ===================== covenant / creed (privacy) ===================== */
.creed { margin: clamp(20px, 3vw, 34px) 0; padding: clamp(30px, 4vw, 48px); }
.creed-head { margin-bottom: 8px; }
.creed-head .eyebrow { color: var(--accent-deep); }
.creed-head h2 {
  font-family: var(--font-display); font-weight: 480;
  font-size: clamp(27px, 4vw, 40px); letter-spacing: -0.015em;
  margin: 6px 0 0; color: var(--text);
}
.vows { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 24px; }
.vow {
  display: flex; gap: 16px; padding: 20px 22px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface-2);
  transition: border-color 0.22s ease, transform 0.22s ease;
}
.vow:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.vow .vn {
  font-family: var(--font-display); font-style: italic;
  font-size: 30px; line-height: 1; color: var(--accent);
  flex-shrink: 0; width: 1.2em;
}
.vow b { display: block; font-family: var(--font-ui); font-weight: 700; color: var(--text); font-size: 15.5px; margin-bottom: 4px; }
.vow p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.66; }

/* inline badge */
.badge {
  display: inline-block; font-family: var(--font-mono); font-weight: 600;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-deep); border: 1px solid var(--accent-line);
  border-radius: 999px; padding: 1px 9px; margin: 0 2px;
  vertical-align: 2px; background: var(--accent-soft);
}

/* ===================== table of contents ===================== */
.toc { margin: clamp(22px, 3vw, 38px) 0; padding: clamp(26px, 3.4vw, 42px); }
.toc-eyebrow {
  font-family: var(--font-mono); font-weight: 600;
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 6px;
}
.toc-eyebrow + .toc-zh {
  font-family: var(--font-display); font-weight: 480;
  font-size: clamp(27px, 4vw, 38px); color: var(--text); margin: 0 0 20px; letter-spacing: -0.01em;
}
.toc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.toc-list li { border-bottom: 1px solid var(--line); }
.toc-list a {
  display: grid; grid-template-columns: 2.6rem 1fr auto;
  align-items: baseline; gap: 4px 16px; padding: 15px 10px;
  border-radius: var(--radius-md);
  transition: background 0.2s ease, padding 0.2s ease;
}
.toc-list a:hover { background: var(--raise); padding-left: 16px; }
.toc-num { font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--accent); }
.toc-list a.appx .toc-num { font-style: normal; font-family: var(--font-mono); font-size: 13px; color: var(--faint); letter-spacing: 0.1em; }
.toc-main { min-width: 0; }
.toc-label { font-family: var(--font-ui); font-weight: 650; color: var(--text); font-size: 16px; }
.toc-sub { display: block; font-size: 12.5px; color: var(--faint); margin-top: 2px; }
.toc-page {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--faint); white-space: nowrap;
}

/* ===================== chapter ===================== */
.chapter {
  margin-top: clamp(22px, 3vw, 38px);
  padding: clamp(28px, 3.6vw, 52px);
  scroll-margin-top: calc(var(--topbar-h) + 22px);
}
.ch-head { position: relative; z-index: 1; margin-bottom: clamp(22px, 3vw, 32px); }
.ch-num {
  position: absolute; top: clamp(-40px, -4vw, -26px); right: -6px; z-index: 0;
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(92px, 14vw, 188px); line-height: 1; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1px var(--accent-line);
  opacity: 0.5; pointer-events: none; user-select: none;
}
.ch-kicker {
  font-family: var(--font-mono); font-weight: 600;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 8px;
}
.ch-title {
  font-family: var(--font-display); font-weight: 480;
  font-size: clamp(28px, 4.4vw, 44px); line-height: 1.16;
  letter-spacing: -0.02em; margin: 0; color: var(--text);
}
.ch-head .hr { position: relative; height: 1px; margin-top: clamp(20px, 3vw, 28px); background: var(--line); }
.ch-head .hr::before {
  content: ""; position: absolute; left: 0; top: 0; width: 52px; height: 1px; background: var(--accent);
}
.ch-intro {
  position: relative; z-index: 1;
  color: var(--muted); font-size: clamp(16px, 1.8vw, 17.5px); line-height: 1.78;
  max-width: var(--measure); margin: 0 0 clamp(20px, 3vw, 30px);
}
.ch-intro .drop {
  float: left; font-family: var(--font-display); font-weight: 460;
  font-size: 3.4em; line-height: 0.78; color: var(--accent);
  padding: 6px 14px 0 0; margin: 4px 0 0;
}

/* ===================== article ===================== */
.article { padding-top: clamp(26px, 3.2vw, 38px); }
.article + .article { border-top: 1px solid var(--line); margin-top: clamp(10px, 1.4vw, 16px); }
.art-no {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-weight: 600;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-deep); margin: 0 0 8px;
}
.art-no::before { content: ""; width: 18px; height: 1px; background: var(--accent); }
.art-title {
  font-family: var(--font-display); font-weight: 520;
  font-size: clamp(19px, 2.4vw, 24px); line-height: 1.32;
  letter-spacing: -0.01em; margin: 0 0 14px; color: var(--text);
}
.article > p { margin: 0 0 14px; color: var(--muted); }
.article > p:last-child { margin-bottom: 0; }

/* clause list */
ol.clauses { list-style: none; counter-reset: cl; margin: 16px 0; padding: 0; }
ol.clauses > li { counter-increment: cl; position: relative; padding-left: 2.7em; margin: 0 0 13px; color: var(--muted); }
ol.clauses > li::before {
  content: counter(cl, decimal-leading-zero);
  position: absolute; left: 0; top: 0.18em;
  font-family: var(--font-mono); font-weight: 600; font-size: 0.72em;
  color: var(--accent-deep);
  border: 1px solid var(--accent-line); border-radius: 6px;
  min-width: 2em; height: 1.85em; line-height: 1.75em; text-align: center;
  background: var(--accent-soft);
}
ol.clauses ol.sub { list-style: none; counter-reset: sub; margin: 10px 0 0; padding: 0; }
ol.clauses ol.sub > li { counter-increment: sub; position: relative; padding-left: 2em; margin: 0 0 7px; font-size: 0.97em; }
ol.clauses ol.sub > li::before { content: counter(sub, lower-alpha) ")"; position: absolute; left: 0; font-family: var(--font-mono); font-weight: 600; color: var(--faint); }

/* ===================== glossary ===================== */
dl.glossary {
  margin: 18px 0; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--surface-2);
}
dl.glossary > div {
  display: grid; grid-template-columns: minmax(9rem, 0.32fr) 1fr;
  gap: 4px 24px; padding: 16px 18px; border-bottom: 1px solid var(--line);
}
dl.glossary > div:last-child { border-bottom: 0; }
dl.glossary dt { font-family: var(--font-ui); font-weight: 700; color: var(--text); font-size: 15px; }
dl.glossary dt small {
  display: block; font-family: var(--font-mono); font-weight: 400;
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-deep); margin-top: 3px;
}
dl.glossary dd { margin: 0; color: var(--muted); font-size: 15px; }

/* ===================== note callout ===================== */
.note {
  position: relative; margin: 18px 0; padding: 16px 20px 16px 50px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius-md); background: var(--surface-2);
  color: var(--muted); font-size: 14.5px; line-height: 1.74;
}
.note::before {
  content: "✦"; position: absolute; left: 19px; top: 15px;
  color: var(--accent); font-size: 14px;
}
.note b {
  display: block; font-family: var(--font-mono); font-weight: 600;
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-deep); margin-bottom: 5px;
}
.note.warn { border-left-color: var(--warn); background: var(--warn-soft); }
.note.warn::before { content: "▲"; color: var(--warn); font-size: 11px; top: 18px; }
.note.warn b { color: var(--warn); }

/* ===================== ledger / table ===================== */
.ledger {
  width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 14.5px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
}
.ledger caption {
  text-align: left; font-family: var(--font-mono); font-weight: 600;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 12px;
}
.ledger th, .ledger td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.ledger thead th {
  font-family: var(--font-mono); font-weight: 600; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint);
  background: var(--surface-2); white-space: nowrap;
}
.ledger tbody td { color: var(--muted); }
.ledger tbody td b { color: var(--text); }
.ledger tbody tr:last-child td { border-bottom: 0; }
.ledger tbody tr { transition: background 0.16s ease; }
.ledger tbody tr:hover td { background: var(--raise); }
.ledger .v { font-family: var(--font-mono); font-size: 0.9em; white-space: nowrap; color: var(--faint); }
.ledger .v b { color: var(--accent-deep); }

/* ===================== rights grid (privacy) ===================== */
.rights { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 24px 0; }
.right-card {
  position: relative; padding: 22px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface-2);
  transition: border-color 0.22s ease, transform 0.22s ease;
}
.right-card:hover { border-color: var(--accent-line); transform: translateY(-3px); }
.right-card .rn { font-family: var(--font-display); font-style: italic; font-size: 24px; color: var(--accent); line-height: 1; }
.right-card h4 { font-family: var(--font-ui); font-weight: 700; color: var(--text); font-size: 15.5px; margin: 10px 0 6px; }
.right-card p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.66; }

/* ===================== chapter divider ===================== */
.ch-end { display: flex; align-items: center; justify-content: center; gap: 16px; margin: clamp(32px, 4vw, 50px) 0 0; color: var(--accent); }
.ch-end::before, .ch-end::after { content: ""; width: 40px; height: 1px; background: var(--line-strong); }
.ch-end span { font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--accent); }

/* ===================== appendix ===================== */
.appendix {
  margin-top: clamp(22px, 3vw, 38px);
  padding: clamp(28px, 3.6vw, 52px);
  scroll-margin-top: calc(var(--topbar-h) + 22px);
}
.appx-head { margin-bottom: clamp(20px, 3vw, 28px); }
.appx-tab {
  font-family: var(--font-mono); font-weight: 600;
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 8px;
}
.appx-head h2 {
  font-family: var(--font-display); font-weight: 480;
  font-size: clamp(27px, 4.4vw, 38px); letter-spacing: -0.015em; margin: 0; color: var(--text);
}

/* ===================== endmark + colophon ===================== */
.endmark {
  margin: clamp(44px, 6vw, 86px) 0 clamp(-12px, -1vw, -6px);
  text-align: center; font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(48px, 12vw, 130px); line-height: 1; letter-spacing: -0.03em;
  color: transparent; -webkit-text-stroke: 1px var(--accent-line);
  opacity: 0.55; user-select: none; pointer-events: none;
}
.colophon {
  margin-top: clamp(28px, 4vw, 46px); padding-top: clamp(30px, 4vw, 46px);
  border-top: 1px solid var(--line); text-align: center;
}
.colophon .mark { font-family: var(--font-display); font-style: italic; font-size: 30px; color: var(--accent); margin-bottom: 12px; }
.colophon .end {
  font-family: var(--font-display); font-weight: 500; font-style: italic;
  font-size: clamp(22px, 3.4vw, 30px); letter-spacing: -0.01em; color: var(--text); margin: 0 0 6px;
}
.colophon > p { color: var(--muted); max-width: 38rem; margin: 8px auto; font-size: 14.5px; }
.colophon .sig { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 50px; margin: 30px 0 8px; text-align: left; }
.colophon .sig div { min-width: 12rem; }
.colophon .sig b {
  display: block; font-family: var(--font-mono); font-weight: 600;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 5px;
}
.colophon .sig span { color: var(--text); font-size: 15px; }
.colophon .sig span a { color: var(--accent-deep); }
.colophon .fine { margin-top: 28px; font-size: 12.5px; color: var(--faint); line-height: 1.72; }

/* ===================== mobile drawer + fab + totop ===================== */
.toc-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 80; display: none;
  align-items: center; gap: 8px; padding: 12px 20px;
  border: 1px solid var(--accent-line); border-radius: 999px;
  background: var(--surface); color: var(--accent-deep);
  font-family: var(--font-ui); font-weight: 700; font-size: 14px; cursor: pointer;
  box-shadow: 0 14px 36px -16px rgba(40, 33, 22, 0.4);
  backdrop-filter: blur(10px);
}
.drawer {
  position: fixed; inset: 0; z-index: 95;
  background: color-mix(in srgb, var(--bg-deep) 70%, transparent); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;
}
.drawer.open { opacity: 1; visibility: visible; }
.drawer-panel {
  position: absolute; inset: 0 0 0 auto; width: min(360px, 86vw);
  background: var(--surface); border-left: 1px solid var(--line);
  padding: 26px 24px; overflow-y: auto;
  transform: translateX(102%); transition: transform 0.34s cubic-bezier(0.3, 0.7, 0.2, 1);
  box-shadow: -28px 0 60px -30px rgba(40, 33, 22, 0.5);
}
.drawer.open .drawer-panel { transform: none; }
.drawer-panel h3 { font-family: var(--font-display); font-style: italic; font-size: 26px; margin: 0 0 2px; color: var(--text); }
.drawer-panel .dz { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--faint); margin: 0 0 18px; }
.drawer-panel a {
  display: flex; align-items: baseline; gap: 12px;
  padding: 12px 2px; border-bottom: 1px solid var(--line);
  color: var(--text); font-family: var(--font-ui); font-size: 15px;
}
.drawer-panel a .dn { font-family: var(--font-mono); color: var(--accent); font-size: 12px; width: 1.8em; flex-shrink: 0; }
.drawer-close {
  position: absolute; top: 16px; right: 16px; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface-2);
  color: var(--text); font-size: 16px; cursor: pointer;
}
.totop {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--accent-deep); font-size: 17px; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  box-shadow: var(--shadow-card);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s, color 0.2s, border-color 0.2s;
}
.totop.show { opacity: 1; visibility: visible; transform: none; }
.totop:hover { color: var(--accent); border-color: var(--accent-line); }

/* ===================== responsive ===================== */
@media (max-width: 1180px) {
  .shell { grid-template-columns: 1fr; padding-top: clamp(16px, 3vw, 28px); }
  .rail { display: none; }
  .toc-fab { display: inline-flex; }
}
@media (max-width: 860px) {
  .vows, .rights, .pledge-points { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  body { font-size: 16px; line-height: 1.74; }
  .topbar { gap: 6px; padding: 0 12px; }
  .doc-switch a { padding: 6px 8px; font-size: 12.5px; }
  .brand-text small, .brand .bt small { display: none; }
  .cta { display: none; }
  #print-btn { display: none; }
  .totop { bottom: 76px; }
  .toc-list a { grid-template-columns: 2.2rem 1fr; }
  .toc-page { grid-column: 2; justify-self: start; margin-top: 2px; }
  dl.glossary > div { grid-template-columns: 1fr; gap: 2px; }
  .ledger { font-size: 13.5px; }
  .ledger th, .ledger td { padding: 11px 12px; }
  .chapter, .appendix { padding: clamp(24px, 5vw, 32px) clamp(18px, 5vw, 24px); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ===================== print ===================== */
@media print {
  :root {
    --bg: #fff; --bg-deep: #fff; --surface: #fff; --surface-2: #fff; --raise: #fff;
    --text: #000; --muted: #1c1c1c; --faint: #555;
    --line: rgba(0, 0, 0, 0.16); --line-strong: rgba(0, 0, 0, 0.3);
    --accent: #9d4527; --accent-deep: #7c3a1f; --warn: #8a2f1f;
    --accent-line: rgba(157, 69, 39, 0.4); --accent-soft: rgba(157, 69, 39, 0.06);
  }
  body { background: #fff; color: #000; font-size: 11pt; }
  .backdrop, body::after { display: none !important; }
  .topbar, .rail, .toc-fab, .totop, .drawer, .progress, .endmark { display: none !important; }
  .doc { max-width: 100%; padding: 0; }
  .preamble, .pledge, .creed, .chapter, .appendix, .toc, .hero {
    box-shadow: none; border: 1px solid #ccc; background: #fff;
  }
  .ch-num { display: none; }
  .article, .right-card, .vow, .pledge-points li { page-break-inside: avoid; }
  .reveal { opacity: 1 !important; transform: none !important; }
  a { color: #000; }
}