/* ============================================================
   Nik Sharma — Brand Book v3.0
   Sans Supremacy · 6 Palettes × 3 Emblems
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

:root {
  /* Shared — identical across all 6 palettes */
  --paper: #F4F1EC;
  --bg: #F4F1EC;
  --bg-deep: #ECE7DF;
  --ink: #111111;
  --ink-soft: #1B1B1B;
  --mute: rgba(17,17,17,0.55);
  --mute-2: rgba(17,17,17,0.40);
  --line: rgba(17,17,17,0.10);
  --line-strong: rgba(17,17,17,0.25);
  --line-hair: rgba(17,17,17,0.06);
  --danger: #C8403F;
  --danger-soft: rgba(200,64,63,0.10);
  --ok: #1F7A4A;

  /* Default accent (Violet) — overridden per palette */
  --accent: #5E5BE7;
  --accent-strong: #4C49CC;
  --accent-hi: #4C49CC;
  --accent-muted: rgba(94,91,231,0.08);
  --accent-ghost: rgba(94,91,231,0.04);

  /* Typography — Sans Supremacy, single system */
  --f-display: "Inter Display", "Inter Variable", "Inter var", "Inter", system-ui, sans-serif;
  --f-body: "Inter Variable", "Inter var", "Inter", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  --display-weight: 900;
  --display-track: -0.04em;
  --display-line: 0.92;

  --h2-size: clamp(36px, 5.5vw, 72px);
  --h1-size: clamp(48px, 9vw, 132px);
}

/* ============================================================
   PALETTES — swap accent only; paper/ink/line tokens stay
   ============================================================ */
body[data-color="violet"] {
  --accent: #5E5BE7;
  --accent-strong: #4C49CC;
  --accent-hi: #4C49CC;
  --accent-muted: rgba(94,91,231,0.08);
  --accent-ghost: rgba(94,91,231,0.04);
}
body[data-color="blue"] {
  --accent: #2563EB;
  --accent-strong: #1D4ED8;
  --accent-hi: #1D4ED8;
  --accent-muted: rgba(37,99,235,0.08);
  --accent-ghost: rgba(37,99,235,0.04);
}
body[data-color="green"] {
  --accent: #15803D;
  --accent-strong: #166534;
  --accent-hi: #166534;
  --accent-muted: rgba(21,128,61,0.08);
  --accent-ghost: rgba(21,128,61,0.04);
}
body[data-color="red"] {
  --accent: #DC2626;
  --accent-strong: #B91C1C;
  --accent-hi: #B91C1C;
  --accent-muted: rgba(220,38,38,0.08);
  --accent-ghost: rgba(220,38,38,0.04);
}
body[data-color="ember"] {
  --accent: #EA580C;
  --accent-strong: #C2410C;
  --accent-hi: #C2410C;
  --accent-muted: rgba(234,88,12,0.08);
  --accent-ghost: rgba(234,88,12,0.04);
}
body[data-color="ink"] {
  --accent: #111111;
  --accent-strong: #000000;
  --accent-hi: #000000;
  --accent-muted: rgba(17,17,17,0.06);
  --accent-ghost: rgba(17,17,17,0.03);
  --mute: rgba(17,17,17,0.55);
  --mute-2: #6B6B6B;
}

/* Ink palette overrides — editorial pure: thicker rules, no color fade */
body[data-color="ink"] .eyebrow::after {
  background: var(--ink);
  height: 2px;
  max-width: 60px;
}
body[data-color="ink"] .rule-accent {
  height: 2px;
  background: var(--ink);
  width: 120px;
}
body[data-color="ink"] .eyebrow,
body[data-color="ink"] .spread-section-label,
body[data-color="ink"] .toc-list .num,
body[data-color="ink"] .pillar .num,
body[data-color="ink"] .customer-card .meta,
body[data-color="ink"] .personality-cell .num,
body[data-color="ink"] .type-scale .meta,
body[data-color="ink"] .pairing-block .mono-sample,
body[data-color="ink"] .callout .tag,
body[data-color="ink"] .quote-block .a,
body[data-color="ink"] .bk-table th,
body[data-color="ink"] .version-table th,
body[data-color="ink"] .prop-card .url,
body[data-color="ink"] .ed-card .eye,
body[data-color="ink"] .signature .sig-meta,
body[data-color="ink"] .vms-hero .label,
body[data-color="ink"] .pdp-layout .info .sub,
body[data-color="ink"] .sample-page .tag {
  color: var(--ink);
}
body[data-color="ink"] .nav-brand .accent-ink {
  color: var(--ink);
}

/* ============================================================
   BASE
   ============================================================ */
body {
  font-family: var(--f-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  font-weight: 400;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11", "kern";
}

body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(17,17,17,0.015) 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, rgba(17,17,17,0.015) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  opacity: 0.6;
}

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

/* ============================================================
   MARK SYSTEM — one canonical mark (nS × Portrait stencil).
   Every mark occurrence in HTML uses <span class="em"> wrapping
   an <svg><use href="#em-svg"/></svg>. The <symbol id="em-svg">
   is loaded from ./lock/mark-master.svg by app.js on page load.
   ============================================================ */
.emblem { display: inline-flex; align-items: center; justify-content: center; color: currentColor; line-height: 0; }
.emblem svg { display: block; width: 100%; height: 100%; }
.em { display: inline-flex; width: 100%; height: 100%; }
.em svg { display: block; width: 100%; height: 100%; }

/* Size presets — all respect the portrait aspect (3:4) of the mark. */
.emblem.sz-nav { width: 21px; height: 28px; }
.emblem.sz-sig { width: 27px; height: 36px; }
.emblem.sz-hero { width: clamp(180px, 20vw, 240px); height: clamp(240px, 26.6vw, 320px); }
.emblem.sz-md { width: 60px; height: 80px; }
.emblem.sz-showcase { width: 180px; height: 240px; }
.emblem.sz-hero-mark { width: clamp(240px, 30vw, 400px); height: clamp(320px, 40vw, 534px); }

/* Emblem accent recoloring (use currentColor so any parent color takes effect).
   When on-paper default, use --ink. When stage is paper (light) override to ink. */
.emblem { color: var(--ink); }
.emblem.on-paper { color: var(--ink); }
.emblem.on-ink { color: var(--paper); }
.emblem.on-accent { color: var(--accent); }
.emblem.on-bg-deep { color: var(--ink); }

/* Ink-palette adjustment: emblems default ink already, but for accent uses we swap */
body[data-color="ink"] .emblem.accent-bearing { color: var(--ink); }



/* ============================================================
   SWITCH BAR (sticky top) — color + emblem
   ============================================================ */
.switch-bar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex; justify-content: center;
  padding: 10px 24px;
  background: rgba(244,241,236,0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.switch-bar .inner {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  max-width: 1400px; width: 100%;
  justify-content: center;
}
.switch-bar .group {
  display: flex; align-items: center; gap: 6px;
}
.switch-bar .tag { color: var(--mute); margin-right: 6px; }
.switch-bar button {
  appearance: none; border: 1px solid var(--line-strong);
  background: transparent; color: var(--ink);
  padding: 7px 12px; border-radius: 999px;
  font-family: inherit; font-size: inherit; letter-spacing: inherit; text-transform: inherit;
  cursor: pointer; transition: all 160ms ease;
}
.switch-bar button:hover { background: var(--accent-muted); border-color: var(--accent); }
.switch-bar button.active {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.switch-bar .color-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
body[data-color="ink"] .switch-bar .color-pill.active { color: var(--paper); }
.switch-bar .hint {
  color: var(--mute-2); font-size: 9.5px;
}
@media (max-width: 780px) {
  .switch-bar .hint { display: none; }
  .switch-bar .inner { gap: 10px; }
  .switch-bar button { padding: 6px 9px; font-size: 9.5px; }
}

/* ============================================================
   NAV (sticky, below switch bar)
   ============================================================ */
.nav {
  position: sticky; top: 50px; z-index: 50;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  background: rgba(244,241,236,0.85);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 14px 40px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.nav-brand {
  font-family: var(--f-display);
  font-size: 18px; font-weight: var(--display-weight);
  color: var(--ink); text-decoration: none;
  letter-spacing: var(--display-track);
  display: inline-flex; align-items: center; gap: 10px;
}
.nav-brand .slash { color: var(--accent); font-weight: 400; }
.nav-brand .ver {
  font-family: var(--f-mono); font-size: 10px;
  color: var(--mute); letter-spacing: 0.2em;
  margin-left: 8px; text-transform: uppercase; font-weight: 400;
}
.nav-brand .emblem { color: var(--accent); }
.nav-links {
  display: flex; gap: 22px;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  overflow-x: auto;
}
.nav-links a {
  color: var(--mute); text-decoration: none;
  padding: 4px 0; border-bottom: 1px solid transparent;
  white-space: nowrap; transition: all 160ms ease;
}
.nav-links a:hover {
  color: var(--accent); border-bottom-color: var(--accent);
}
@media (max-width: 900px) { .nav-links { display: none; } }

/* ============================================================
   SPREAD SYSTEM
   ============================================================ */
.spread {
  max-width: 1400px; margin: 0 auto;
  padding: 140px 60px;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 1;
}
@media (max-width: 700px) { .spread { padding: 80px 24px; } }

.spread-num {
  position: absolute; top: 40px; right: 60px;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.3em;
  color: var(--mute-2);
}
.spread-section-label {
  position: absolute; top: 40px; left: 60px;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent);
}
@media (max-width: 700px) {
  .spread-num, .spread-section-label { top: 20px; font-size: 9px; }
  .spread-section-label { left: 24px; }
  .spread-num { right: 24px; }
}

/* ============================================================
   TYPOGRAPHY PRIMITIVES
   ============================================================ */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 28px;
  display: flex; align-items: center; gap: 16px;
}
.eyebrow::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(to right, var(--accent), transparent);
  max-width: 120px;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: var(--display-weight);
  color: var(--ink);
  line-height: var(--display-line);
  letter-spacing: var(--display-track);
}
h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); margin-bottom: 32px; }
h2 em, h1 em {
  color: var(--accent);
  font-style: normal;
  font-weight: inherit;
  /* Sans Supremacy — emphasis comes from color/weight, not italic shift */
}
body[data-color="ink"] h2 em,
body[data-color="ink"] h1 em {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 0.12em;
}
h3 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 14px; }
h4 { font-size: 16px; margin-bottom: 10px; font-weight: 600; font-family: var(--f-body); letter-spacing: -0.005em; }

.lead {
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: 62ch;
  margin-bottom: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

p {
  max-width: 65ch;
  color: var(--mute);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 14px;
}
p.intro { color: var(--ink-soft); font-size: 16.5px; }

.mono {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.1em;
}

.rule { height: 1px; background: var(--line); margin: 60px 0; }
.rule-accent {
  height: 1px; width: 160px;
  background: linear-gradient(90deg, var(--accent), transparent);
  margin: 40px 0;
}

/* ============================================================
   COVER
   ============================================================ */
.cover {
  min-height: calc(100vh - 50px);
  padding: 100px 60px 60px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
  background: var(--bg);
}
.cover::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 900px 600px at 85% 95%, var(--accent-muted), transparent 60%),
    radial-gradient(circle at 10% 10%, rgba(17,17,17,0.03), transparent 40%);
  pointer-events: none;
}
body[data-color="ink"] .cover::before {
  background:
    radial-gradient(ellipse 900px 600px at 85% 95%, rgba(17,17,17,0.06), transparent 60%),
    radial-gradient(circle at 10% 10%, rgba(17,17,17,0.03), transparent 40%);
}
.cover::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 25% 35%, rgba(17,17,17,0.18), transparent),
    radial-gradient(1px 1px at 65% 72%, rgba(17,17,17,0.14), transparent),
    radial-gradient(1px 1px at 82% 22%, var(--accent-muted), transparent),
    radial-gradient(1.5px 1.5px at 14% 62%, var(--accent-muted), transparent),
    radial-gradient(1px 1px at 92% 58%, rgba(17,17,17,0.12), transparent);
  opacity: 0.7; pointer-events: none;
}
.cover-top, .cover-bottom {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-start;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--mute);
  gap: 20px; flex-wrap: wrap;
}
.cover-bottom { align-items: flex-end; }
.cover-center {
  position: relative; z-index: 2;
  flex: 1; display: flex; flex-direction: column;
  justify-content: center; padding: 40px 0;
  gap: 24px;
}
.cover-hero-mark {
  color: var(--accent);
  margin-bottom: 12px;
}
body[data-color="ink"] .cover-hero-mark { color: var(--ink); }
.cover-wordmark {
  font-family: var(--f-display);
  font-weight: var(--display-weight);
  font-size: clamp(80px, 16vw, 240px);
  color: var(--ink);
  letter-spacing: var(--display-track);
  line-height: 0.9;
}
.cover-sub {
  font-family: var(--f-display);
  font-size: clamp(28px, 4.5vw, 56px);
  color: var(--accent);
  font-weight: var(--display-weight);
  line-height: 1;
  letter-spacing: var(--display-track);
  margin-top: 12px;
}
body[data-color="ink"] .cover-sub {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 0.14em;
}

.cover-chips {
  display: inline-flex; gap: 14px; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--mute);
}
.cover-chips .k { color: var(--accent); }
body[data-color="ink"] .cover-chips .k { color: var(--ink); }

/* ============================================================
   CONTENTS (§ 00)
   ============================================================ */
.toc-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  margin-top: 50px;
}
@media (max-width: 800px) { .toc-grid { grid-template-columns: 1fr; gap: 20px; } }
.toc-list { list-style: none; }
.toc-list li {
  display: flex; align-items: baseline; gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  color: var(--ink);
}
.toc-list .num {
  font-family: var(--f-mono); font-size: 11px;
  color: var(--accent); letter-spacing: 0.2em;
  min-width: 50px; font-weight: 500;
}
.toc-list .dots {
  flex: 1; border-bottom: 1px dotted rgba(17,17,17,0.25);
  align-self: center;
}
.toc-list .pg {
  font-family: var(--f-mono); font-size: 11px;
  color: var(--mute); letter-spacing: 0.15em;
}

/* ============================================================
   GRIDS
   ============================================================ */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; align-items: start; }
.four-col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sidebar-col { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start; }
.asym { display: grid; grid-template-columns: 2fr 1fr; gap: 60px; align-items: start; }
@media (max-width: 900px) {
  .two-col, .three-col, .four-col, .sidebar-col, .asym { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================================
   PILLARS (§ 01)
   ============================================================ */
.pillar {
  padding: 40px 32px 36px;
  border: 1px solid var(--line);
  background: #fff;
  position: relative;
  min-height: 280px;
  display: flex; flex-direction: column;
}
.pillar .num {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.3em;
  color: var(--accent); margin-bottom: 24px;
}
.pillar h3 { margin-bottom: 12px; font-size: 24px; }
.pillar p { font-size: 14.5px; margin-bottom: 18px; color: var(--mute); }
.pillar .datapoint {
  margin-top: auto;
  font-family: var(--f-display);
  font-size: 32px; font-weight: var(--display-weight);
  color: var(--accent);
  letter-spacing: var(--display-track);
  line-height: 1;
}
body[data-color="ink"] .pillar .datapoint { color: var(--ink); }
.pillar .datapoint span {
  font-family: var(--f-mono); font-size: 10px;
  color: var(--mute); letter-spacing: 0.2em;
  display: block; margin-top: 8px; font-weight: 400;
}

/* ============================================================
   CUSTOMER CARD (§ 02)
   ============================================================ */
.customer-card {
  padding: 48px 44px;
  background: #fff;
  border: 1px solid var(--line);
  position: relative;
}
.customer-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: var(--f-display);
  font-size: 30px; font-weight: var(--display-weight);
  margin-bottom: 22px;
  letter-spacing: -0.02em;
}
body[data-color="ink"] .customer-avatar { color: var(--paper); }
.customer-card h4 { font-size: 22px; margin-bottom: 4px; font-family: var(--f-display); font-weight: var(--display-weight); letter-spacing: var(--display-track); }
.customer-card .meta {
  font-family: var(--f-mono); font-size: 11px; color: var(--accent);
  letter-spacing: 0.18em; margin-bottom: 20px; text-transform: uppercase;
}
.customer-card ul { list-style: none; }
.customer-card ul li {
  font-size: 14px; padding: 7px 0;
  color: var(--ink-soft);
  display: flex; gap: 12px;
  border-bottom: 1px solid var(--line-hair);
}
.customer-card ul li:last-child { border-bottom: none; }
.customer-card ul li::before {
  content: "→"; color: var(--accent); flex-shrink: 0;
  font-family: var(--f-mono);
}

.pullquote {
  padding: 80px 40px;
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 60px 0 20px;
}
.pullquote .mark-top, .pullquote .mark-bottom {
  width: 80px; height: 1px;
  background: var(--accent);
  margin: 0 auto 30px;
}
body[data-color="ink"] .pullquote .mark-top,
body[data-color="ink"] .pullquote .mark-bottom {
  height: 2px;
  background: var(--ink);
}
.pullquote .mark-bottom { margin: 30px auto 0; }
.pullquote .q {
  font-family: var(--f-display);
  font-size: clamp(32px, 5vw, 62px);
  font-weight: var(--display-weight);
  line-height: 1.1;
  letter-spacing: var(--display-track);
  max-width: 24ch; margin: 0 auto;
  color: var(--ink);
}
.pullquote .q em { color: var(--accent); font-style: normal; }
body[data-color="ink"] .pullquote .q em {
  color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.12em;
}
.pullquote .attr {
  margin-top: 30px;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent);
}

/* ============================================================
   PERSONALITY GRID (§ 03)
   ============================================================ */
.personality-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line-strong);
  border: 1px solid var(--line-strong);
  margin-top: 40px;
}
@media (max-width: 800px) { .personality-grid { grid-template-columns: 1fr 1fr; } }
.personality-cell {
  padding: 44px 32px;
  background: var(--bg);
  min-height: 220px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.personality-cell .num {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.28em; color: var(--accent);
}
.personality-cell .trait {
  font-family: var(--f-display);
  font-size: 34px;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  color: var(--ink);
  margin: 22px 0 12px;
  line-height: 1;
}
.personality-cell .desc {
  font-size: 13.5px; color: var(--mute);
  line-height: 1.55;
  max-width: 28ch;
}

/* ============================================================
   WORDMARK / LOGO (§ 04)
   ============================================================ */
.wordmark-stage {
  padding: 120px 40px;
  min-height: 480px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.wordmark-stage.dark { background: var(--ink); }
.wordmark-stage.accent-bg { background: var(--accent); }
.wordmark-stage.bg { background: var(--bg-deep); }
.wordmark-stage .caption {
  position: absolute; bottom: 20px; left: 24px;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mute);
}
.wordmark-stage.dark .caption { color: rgba(244,241,236,0.55); }
.wordmark-stage.accent-bg .caption { color: rgba(255,255,255,0.8); }
body[data-color="ink"] .wordmark-stage.accent-bg .caption { color: rgba(244,241,236,0.7); }

.wordmark-xl {
  font-family: var(--f-display);
  font-size: clamp(80px, 14vw, 200px);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  line-height: 1;
  color: var(--ink);
}
.wordmark-lg {
  font-family: var(--f-display);
  font-size: clamp(60px, 12vw, 160px);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  line-height: 1;
  color: var(--ink);
}
.wordmark-lg.on-dark, .wordmark-xl.on-dark { color: var(--bg); }
.wordmark-lg.on-accent, .wordmark-xl.on-accent { color: #fff; }
body[data-color="ink"] .wordmark-lg.on-accent,
body[data-color="ink"] .wordmark-xl.on-accent { color: var(--paper); }

.wordmark-md {
  font-family: var(--f-display); font-weight: var(--display-weight);
  font-size: 56px; letter-spacing: var(--display-track); line-height: 1;
}
.wordmark-sm {
  font-family: var(--f-display); font-weight: var(--display-weight);
  font-size: 22px; letter-spacing: var(--display-track); line-height: 1;
}

.construction-stage {
  padding: 60px;
  background: #fff;
  border: 1px solid var(--line);
  position: relative;
  min-height: 320px;
  display: flex; align-items: center; justify-content: center;
  background-image:
    linear-gradient(to right, var(--accent-muted) 1px, transparent 1px),
    linear-gradient(to bottom, var(--accent-muted) 1px, transparent 1px);
  background-size: 20px 20px;
}
.construction-stage .measure {
  position: absolute;
  font-family: var(--f-mono); font-size: 9px;
  color: var(--accent); letter-spacing: 0.2em;
}
.construction-stage .measure.t { top: 20px; left: 50%; transform: translateX(-50%); }
.construction-stage .measure.b { bottom: 20px; left: 50%; transform: translateX(-50%); }
.construction-stage .measure.l { left: 20px; top: 50%; transform: translateY(-50%) rotate(-90deg); }
.construction-stage .measure.r { right: 20px; top: 50%; transform: translateY(-50%) rotate(90deg); }

/* Wordmark guide overlay (§ 04) */
.wm-guide {
  position: relative;
  width: 100%;
  padding: 40px 0;
}
.wm-guide .baseline,
.wm-guide .cap,
.wm-guide .x-line {
  position: absolute; left: 0; right: 0;
  border-top: 1px dashed var(--accent);
  pointer-events: none;
}
.wm-guide .label {
  position: absolute; right: 12px;
  font-family: var(--f-mono); font-size: 9px;
  color: var(--accent); letter-spacing: 0.2em; text-transform: uppercase;
  transform: translateY(-50%);
}

/* ============================================================
   MARK SHOWCASE (§ 05) — 3 emblem comparison
   ============================================================ */
.mark-stage {
  padding: 60px 40px; min-height: 420px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative;
  border: 1px solid var(--line);
  gap: 16px;
}
.mark-stage.light { background: var(--bg); }
.mark-stage.deep { background: var(--bg-deep); }
.mark-stage.dark { background: var(--ink); }
.mark-stage.accent-bg { background: var(--accent); }
.mark-stage .caption {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mute);
  text-align: center;
}
.mark-stage.dark .caption { color: rgba(244,241,236,0.6); }
.mark-stage.accent-bg .caption { color: rgba(255,255,255,0.85); }
body[data-color="ink"] .mark-stage.accent-bg .caption { color: rgba(244,241,236,0.7); }

.emblem-showcase {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: 40px;
}
@media (max-width: 900px) { .emblem-showcase { grid-template-columns: 1fr; } }
.emblem-card {
  background: #fff; border: 1px solid var(--line);
  padding: 50px 30px 30px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  min-height: 360px;
}
.emblem-card .big { color: var(--ink); }
.emblem-card .name {
  font-family: var(--f-display); font-weight: var(--display-weight);
  font-size: 20px; letter-spacing: var(--display-track);
  text-align: center;
}
.emblem-card .use {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mute);
  text-align: center;
  line-height: 1.6;
}
.emblem-card .use strong { color: var(--accent); font-weight: 500; }

/* ============================================================
   MARK SHOWCASE (§ 05) — single canonical mark
   ============================================================ */
.mark-hero {
  margin-top: 40px;
  padding: 80px 40px;
  background: var(--bg);
  border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 32px;
  min-height: 560px;
}
.mark-hero .caption {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mute);
}

.size-ladder {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 16px; margin-top: 30px;
  align-items: end;
}
@media (max-width: 900px) { .size-ladder { grid-template-columns: repeat(2, 1fr); } }
.size-cell {
  background: #fff; border: 1px solid var(--line);
  padding: 30px 16px 20px;
  min-height: 220px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 16px;
}
.size-cell .caption {
  font-family: var(--f-mono); font-size: 9.5px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--mute);
  text-align: center; line-height: 1.5;
}

.clearspace-diagram {
  margin-top: 30px;
  padding: 60px 40px;
  background: var(--bg);
  border: 1px solid var(--line);
}
.cs-frame {
  position: relative;
  width: 234px; height: 312px;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  outline: 1px dashed var(--accent);
  outline-offset: 0;
}
.cs-frame::before {
  content: ""; position: absolute; inset: 0;
  border: 2px solid var(--accent);
  pointer-events: none;
}
.cs-pad {
  position: absolute;
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent);
  background: var(--bg);
  padding: 2px 6px;
}
.cs-pad.cs-t { top: -7px; left: 50%; transform: translateX(-50%); }
.cs-pad.cs-b { bottom: -7px; left: 50%; transform: translateX(-50%); }
.cs-pad.cs-l { left: -28px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: center; }
.cs-pad.cs-r { right: -28px; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: center; }

/* ============================================================
   MISUSE GRID (§ 07)
   ============================================================ */
.usage-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-top: 40px;
}
@media (max-width: 900px) { .usage-grid { grid-template-columns: 1fr 1fr; } }
.usage-cell {
  padding: 40px 20px;
  min-height: 220px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative;
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
}
.usage-cell .badge {
  position: absolute; top: 12px; right: 12px;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  font-family: var(--f-mono);
}
.usage-cell .badge.x { background: var(--danger-soft); color: var(--danger); }
.usage-cell .badge.ok { background: rgba(31,122,74,0.12); color: var(--ok); }
.usage-cell .label {
  position: absolute; bottom: 12px; left: 14px; right: 14px;
  font-family: var(--f-mono);
  font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--mute); text-align: center;
}
.usage-cell .sample {
  font-family: var(--f-display);
  font-weight: var(--display-weight);
  font-size: 34px;
  letter-spacing: var(--display-track);
  line-height: 1;
  color: var(--ink);
}
.usage-cell.stretch .sample { transform: scaleX(1.8); }
.usage-cell.color-bad .sample { color: hotpink; }
.usage-cell.rotate-bad .sample { transform: rotate(-10deg); }
.usage-cell.outline-bad .sample {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
}
.usage-cell.shadow-bad .sample { text-shadow: 3px 3px 0 var(--danger); }
.usage-cell.gradient-bad .sample {
  background: linear-gradient(90deg, orange, deeppink);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.usage-cell.bg-bad { background: #7afcab; }

/* ============================================================
   COLOR SYSTEM (§ 08)
   ============================================================ */
.swatch {
  padding: 36px 30px; min-height: 300px;
  display: flex; flex-direction: column; justify-content: space-between;
  border: 1px solid var(--line);
  position: relative;
}
.swatch .name {
  font-family: var(--f-display);
  font-size: 28px; font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
}
.swatch .role {
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  opacity: 0.8;
}
.swatch .values {
  font-family: var(--f-mono);
  font-size: 11px; line-height: 1.9; letter-spacing: 0.04em;
}
.swatch .values span { opacity: 0.6; display: inline-block; min-width: 44px; }
.swatch-bg { background: var(--bg); color: var(--ink); }
.swatch-ink { background: var(--ink); color: var(--bg); }
.swatch-accent { background: var(--accent); color: #fff; }
body[data-color="ink"] .swatch-accent { color: var(--paper); }
.swatch-bg-deep { background: var(--bg-deep); color: var(--ink); }
.swatch-soft { background: #fff; color: var(--ink); }
.swatch-mute { background: #E9E6E0; color: var(--ink); }

.ratio-bar {
  display: flex; height: 80px; margin-top: 24px;
  border: 1px solid var(--line);
}
.ratio-bar div {
  display: flex; align-items: flex-end; padding: 14px 18px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em;
}
.ratio-bar .r-bg { flex: 70; background: var(--bg); color: var(--ink); }
.ratio-bar .r-ink { flex: 25; background: var(--ink); color: var(--bg); }
.ratio-bar .r-accent { flex: 5; background: var(--accent); color: #fff; }
body[data-color="ink"] .ratio-bar .r-accent { color: var(--paper); }

.gradient-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-top: 40px;
}
@media (max-width: 700px) { .gradient-row { grid-template-columns: 1fr; } }
.gradient-card {
  height: 160px; border: 1px solid var(--line);
  padding: 18px 20px;
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink);
}
.gradient-card.g1 { background: linear-gradient(135deg, var(--bg) 0%, var(--accent-muted) 100%); }
.gradient-card.g2 { background: linear-gradient(135deg, var(--ink) 0%, #24237a 100%); color: var(--bg); }
body[data-color="ink"] .gradient-card.g2 { background: linear-gradient(135deg, var(--ink) 0%, #333 100%); }
.gradient-card.g3 { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%); color: #fff; }
body[data-color="ink"] .gradient-card.g3 { color: var(--paper); }

/* Palette preview row (§ 08) */
.palette-row {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
  margin-top: 20px;
}
@media (max-width: 900px) { .palette-row { grid-template-columns: repeat(3, 1fr); } }
.palette-chip {
  height: 80px; padding: 10px 12px;
  display: flex; align-items: flex-end;
  border: 1px solid var(--line);
  font-family: var(--f-mono); font-size: 9.5px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: #fff;
}
.palette-chip.p-violet { background: #5E5BE7; }
.palette-chip.p-blue   { background: #2563EB; }
.palette-chip.p-green  { background: #15803D; }
.palette-chip.p-red    { background: #DC2626; }
.palette-chip.p-ember  { background: #EA580C; }
.palette-chip.p-ink    { background: #111111; }

/* ============================================================
   TYPOGRAPHY SPECIMENS (§ 09)
   ============================================================ */
.type-hero {
  padding: 80px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
}
.type-hero .sample {
  font-family: var(--f-display);
  font-size: clamp(72px, 14vw, 180px);
  line-height: 0.9;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
}
.type-hero .sample em { color: var(--accent); font-style: normal; }
body[data-color="ink"] .type-hero .sample em {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 6px;
  text-underline-offset: 0.1em;
}

.type-scale {
  display: grid; grid-template-columns: 160px 1fr;
  gap: 40px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.type-scale .meta {
  font-family: var(--f-mono);
  font-size: 10px; color: var(--accent);
  letter-spacing: 0.2em; text-transform: uppercase;
  line-height: 1.7;
}
.type-scale .meta span { display: block; color: var(--mute); }
.type-scale .spec { color: var(--ink); font-family: var(--f-display); font-weight: var(--display-weight); letter-spacing: var(--display-track); line-height: 1; }
.type-scale .spec.body-style { font-family: var(--f-body); font-weight: 400; line-height: 1.5; letter-spacing: 0; }
.type-scale .spec.mono-style { font-family: var(--f-mono); font-weight: 400; letter-spacing: 0.06em; }
@media (max-width: 700px) { .type-scale { grid-template-columns: 1fr; gap: 8px; } }

.pairing-block {
  padding: 40px 36px;
  background: #fff;
  border: 1px solid var(--line);
  margin-top: 20px;
}
.pairing-block .headline {
  font-family: var(--f-display);
  font-size: 42px; font-weight: var(--display-weight);
  letter-spacing: var(--display-track); line-height: 1.05;
  margin-bottom: 14px;
}
.pairing-block .headline em { color: var(--accent); font-style: normal; }
body[data-color="ink"] .pairing-block .headline em { color: var(--ink); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.1em; }
.pairing-block .body-sample {
  font-family: var(--f-body); font-size: 15px;
  line-height: 1.6; color: var(--mute);
  max-width: 60ch; margin-bottom: 18px;
}
.pairing-block .mono-sample {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.1em; color: var(--accent);
  text-transform: uppercase;
}

/* ============================================================
   IN THE WILD (§ 10)
   ============================================================ */
.screen {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  min-height: 420px;
  position: relative;
  display: flex; flex-direction: column;
}
.screen .chrome {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-deep);
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.15em; color: var(--mute);
  display: flex; gap: 8px; align-items: center;
}
.screen .chrome .dots { display: flex; gap: 5px; }
.screen .chrome .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); display: inline-block; }
.screen .body-area { padding: 40px 28px; flex: 1; }
.screen .report-eye { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.24em; color: var(--accent); text-transform: uppercase; margin-bottom: 14px; }
.screen .report-h {
  font-family: var(--f-display); font-weight: var(--display-weight);
  font-size: clamp(22px, 3vw, 38px); letter-spacing: var(--display-track);
  line-height: 1; color: var(--ink); margin-bottom: 14px;
}
.screen .report-h em { color: var(--accent); font-style: normal; }
body[data-color="ink"] .screen .report-h em { color: var(--ink); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.1em; }
.screen .report-l { font-size: 14px; color: var(--mute); max-width: 48ch; margin-bottom: 18px; line-height: 1.55; }
.screen .chip {
  display: inline-flex; gap: 8px; align-items: center;
  padding: 4px 10px; border-radius: 999px;
  background: var(--accent-muted); color: var(--accent);
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.15em; text-transform: uppercase;
}
.screen .cta {
  display: inline-flex; gap: 10px; padding: 12px 20px;
  background: var(--ink); color: var(--bg); border: none;
  font-family: var(--f-body); font-size: 13px; font-weight: 600;
  margin-top: 14px; cursor: pointer; letter-spacing: 0.04em;
}
.screen .pdp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.screen .pdp-img {
  aspect-ratio: 1/1; background: linear-gradient(135deg, var(--accent-muted), var(--bg-deep));
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 10px; color: var(--mute);
  letter-spacing: 0.2em;
}
.screen .price {
  font-family: var(--f-display); font-weight: var(--display-weight);
  font-size: 22px; letter-spacing: var(--display-track);
}
.screen .price span { color: var(--mute); font-size: 13px; margin-left: 6px; font-weight: 400; }
.screen .dash-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.screen .tile {
  padding: 16px; background: #fff; border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
}
.screen .tile .k { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.22em; color: var(--mute); text-transform: uppercase; }
.screen .tile .v { font-family: var(--f-display); font-weight: var(--display-weight); font-size: 26px; letter-spacing: var(--display-track); }
.screen .tile .v em { color: var(--accent); font-style: normal; }
body[data-color="ink"] .screen .tile .v em { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; }
.screen .tile .delta { font-family: var(--f-mono); font-size: 10px; color: var(--ok); letter-spacing: 0.1em; }
.screen .tile .delta.down { color: var(--danger); }

.vs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
@media (max-width: 800px) { .vs-row { grid-template-columns: 1fr; } }
.vs-card {
  padding: 24px; border: 1px solid var(--line); background: #fff;
}
.vs-card.good { border-color: var(--ok); }
.vs-card.bad { border-color: var(--danger); opacity: 0.9; }
.vs-card .tag {
  display: inline-block; padding: 3px 9px; border-radius: 3px;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase;
  margin-bottom: 14px;
}
.vs-card.good .tag { background: rgba(31,122,74,0.12); color: var(--ok); }
.vs-card.bad .tag { background: var(--danger-soft); color: var(--danger); }
.vs-card .demo-h {
  font-family: var(--f-display); font-weight: var(--display-weight);
  font-size: 26px; letter-spacing: var(--display-track); line-height: 1.05;
  color: var(--ink); margin-bottom: 10px;
}
.vs-card.bad .demo-h { font-family: "Times New Roman", serif; font-weight: 400; color: #555; }
.vs-card .demo-p { font-size: 13.5px; color: var(--mute); line-height: 1.55; }
.vs-card.bad .demo-p { font-style: italic; }

/* ============================================================
   VOICE & COPY (§ 11)
   ============================================================ */
.voice-rule {
  padding: 30px 32px;
  border: 1px solid var(--line);
  background: #fff;
  display: grid; grid-template-columns: 60px 1fr;
  gap: 24px; align-items: start;
  margin-bottom: 14px;
}
.voice-rule .num {
  font-family: var(--f-mono); font-size: 12px;
  color: var(--accent); letter-spacing: 0.2em; font-weight: 500;
}
.voice-rule h4 {
  font-family: var(--f-display); font-weight: var(--display-weight);
  font-size: 22px; letter-spacing: var(--display-track);
  margin-bottom: 10px;
}
.voice-rule p { font-size: 14.5px; color: var(--mute); margin-bottom: 14px; }
.voice-rule .ex {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 14px;
}
@media (max-width: 700px) { .voice-rule .ex { grid-template-columns: 1fr; } }
.voice-rule .ex > div {
  padding: 14px 16px;
  font-size: 14px; line-height: 1.5;
  border-left: 3px solid var(--line-strong);
  background: var(--bg-deep);
}
.voice-rule .ex .do { border-left-color: var(--ok); }
.voice-rule .ex .dont { border-left-color: var(--danger); text-decoration: line-through; color: var(--mute); }
.voice-rule .ex .tag {
  display: block;
  font-family: var(--f-mono); font-size: 9.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  margin-bottom: 6px;
}
.voice-rule .ex .do .tag { color: var(--ok); }
.voice-rule .ex .dont .tag { color: var(--danger); }

/* ============================================================
   COMPONENTS (§ 12)
   ============================================================ */
.component-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin-top: 40px;
}
@media (max-width: 800px) { .component-grid { grid-template-columns: 1fr; } }
.comp-card {
  padding: 32px; background: #fff; border: 1px solid var(--line);
}
.comp-card h4 {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 22px; font-weight: 500;
}
.comp-card .demo {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  margin-bottom: 18px;
}

.btn {
  appearance: none; border: 1px solid var(--ink);
  background: var(--ink); color: var(--bg);
  padding: 12px 22px; border-radius: 2px;
  font-family: var(--f-body); font-size: 13px; font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer; transition: all 160ms ease;
}
.btn:hover { background: var(--accent); border-color: var(--accent); }
body[data-color="ink"] .btn:hover { background: #333; border-color: #333; }
.btn.secondary { background: transparent; color: var(--ink); }
.btn.secondary:hover { background: var(--ink); color: var(--bg); }
.btn.ghost { background: transparent; color: var(--ink); border-color: transparent; }
.btn.ghost:hover { border-color: var(--line-strong); }
.btn.destructive { background: var(--danger); border-color: var(--danger); }
.btn.destructive:hover { background: #a83332; border-color: #a83332; }
.btn.small { padding: 7px 14px; font-size: 11px; }

.input {
  appearance: none;
  padding: 12px 14px; border: 1px solid var(--line-strong);
  background: #fff; color: var(--ink);
  font-family: var(--f-body); font-size: 14px;
  min-width: 260px; outline: none;
  transition: border-color 160ms ease;
}
.input:focus { border-color: var(--accent); }
.input.error { border-color: var(--danger); }
.input-err { color: var(--danger); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; margin-top: 6px; text-transform: uppercase; }

.chip-nav {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--bg-deep); border-radius: 999px;
  border: 1px solid var(--line);
}
.chip-nav a {
  padding: 8px 16px; border-radius: 999px;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--mute); text-decoration: none;
}
.chip-nav a.active { background: var(--ink); color: var(--bg); }

.callout {
  padding: 20px 24px;
  border-left: 3px solid var(--accent);
  background: var(--accent-muted);
  font-size: 14px; color: var(--ink-soft);
  line-height: 1.55;
}
body[data-color="ink"] .callout { border-left-width: 4px; }
.callout .tag {
  display: block; font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.24em;
  color: var(--accent); text-transform: uppercase;
  margin-bottom: 6px;
}

.quote-block {
  padding: 28px 32px;
  border-left: 3px solid var(--ink);
  background: #fff;
}
.quote-block .q {
  font-family: var(--f-display); font-weight: var(--display-weight);
  font-size: 22px; letter-spacing: var(--display-track);
  line-height: 1.2; color: var(--ink); margin-bottom: 12px;
}
.quote-block .a {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.2em; color: var(--accent);
  text-transform: uppercase;
}

.bk-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--f-body); font-size: 13.5px;
}
.bk-table th, .bk-table td {
  text-align: left; padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.bk-table th {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); font-weight: 500;
  border-bottom: 1px solid var(--line-strong);
}
.bk-table td.val {
  font-family: var(--f-mono); color: var(--ink-soft);
  white-space: nowrap;
}
.bk-table td.em { color: var(--accent); }
body[data-color="ink"] .bk-table td.em { color: var(--ink); font-weight: 600; }

.ed-card {
  padding: 24px; background: #fff; border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.ed-card .eye { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--accent); text-transform: uppercase; }
.ed-card h5 { font-family: var(--f-display); font-weight: var(--display-weight); font-size: 22px; letter-spacing: var(--display-track); line-height: 1.1; }
.ed-card p { font-size: 13.5px; color: var(--mute); margin: 0; }
.ed-card .meta { font-family: var(--f-mono); font-size: 10px; color: var(--mute); letter-spacing: 0.18em; text-transform: uppercase; }

.data-card {
  padding: 24px; background: #fff; border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
.data-card .k { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--mute); text-transform: uppercase; }
.data-card .v { font-family: var(--f-display); font-weight: var(--display-weight); font-size: 48px; letter-spacing: var(--display-track); line-height: 1; }
.data-card .v em { color: var(--accent); font-style: normal; }
body[data-color="ink"] .data-card .v em { color: var(--ink); text-decoration: underline; text-decoration-thickness: 3px; }
.data-card .note { font-family: var(--f-mono); font-size: 10px; color: var(--ok); letter-spacing: 0.1em; }

.prod-card {
  padding: 0; background: #fff; border: 1px solid var(--line);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.prod-card .prod-img {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--accent-muted), var(--bg-deep));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.2em;
  color: var(--mute); text-transform: uppercase;
}
.prod-card .prod-body { padding: 20px 22px 24px; }
.prod-card h5 { font-family: var(--f-display); font-weight: var(--display-weight); font-size: 22px; letter-spacing: var(--display-track); margin-bottom: 6px; }
.prod-card p { font-size: 13.5px; color: var(--mute); margin-bottom: 12px; }
.prod-card .price { font-family: var(--f-mono); font-size: 13px; color: var(--ink); letter-spacing: 0.1em; }

/* ============================================================
   SAMPLE PAGES (§ 13)
   ============================================================ */
.sample-page {
  border: 1px solid var(--line);
  background: var(--bg);
  overflow: hidden;
  margin-top: 40px;
}
.sample-page .tag {
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  background: var(--bg-deep);
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent);
}

.vms-hero {
  padding: 80px 60px;
  display: grid; grid-template-columns: 2fr 1fr; gap: 60px;
  align-items: center;
}
@media (max-width: 900px) { .vms-hero { grid-template-columns: 1fr; padding: 40px 24px; } }
.vms-hero .label { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.28em; color: var(--accent); text-transform: uppercase; margin-bottom: 18px; }
.vms-hero h3 {
  font-family: var(--f-display); font-weight: var(--display-weight);
  font-size: clamp(36px, 5vw, 64px); letter-spacing: var(--display-track);
  line-height: 1; margin-bottom: 20px;
}
.vms-hero h3 em { color: var(--accent); font-style: normal; }
body[data-color="ink"] .vms-hero h3 em { color: var(--ink); text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 0.1em; }
.vms-hero p { font-size: 17px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 22px; max-width: 48ch; }
.vms-hero .stat { padding: 24px; background: #fff; border: 1px solid var(--line); }
.vms-hero .stat .k { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--mute); text-transform: uppercase; margin-bottom: 10px; }
.vms-hero .stat .v {
  font-family: var(--f-display); font-weight: var(--display-weight);
  font-size: 52px; letter-spacing: var(--display-track); line-height: 1;
  color: var(--accent);
}
body[data-color="ink"] .vms-hero .stat .v { color: var(--ink); }
.vms-hero .stat .note { font-family: var(--f-mono); font-size: 10px; color: var(--mute); letter-spacing: 0.1em; margin-top: 8px; }

.pdp-layout {
  padding: 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
}
@media (max-width: 900px) { .pdp-layout { grid-template-columns: 1fr; padding: 30px 24px; gap: 30px; } }
.pdp-layout .pic {
  aspect-ratio: 1/1;
  background: linear-gradient(135deg, var(--accent-muted), var(--bg-deep));
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.22em; color: var(--mute); text-transform: uppercase;
}
.pdp-layout .info h3 {
  font-family: var(--f-display); font-weight: var(--display-weight);
  font-size: clamp(34px, 4.5vw, 56px); letter-spacing: var(--display-track);
  line-height: 1; margin-bottom: 10px;
}
.pdp-layout .info h3 em { color: var(--accent); font-style: normal; }
body[data-color="ink"] .pdp-layout .info h3 em { color: var(--ink); text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 0.1em; }
.pdp-layout .info .sub { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--accent); text-transform: uppercase; margin-bottom: 18px; }
.pdp-layout .info p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 20px; max-width: 40ch; }
.pdp-layout .price-row { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.pdp-layout .price-row .price { font-family: var(--f-display); font-weight: var(--display-weight); font-size: 34px; letter-spacing: var(--display-track); }
.pdp-layout .brag-bar {
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px;
  padding-top: 18px; border-top: 1px solid var(--line);
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.18em; color: var(--mute); text-transform: uppercase;
}
.pdp-layout .brag-bar span::before { content: "▸ "; color: var(--accent); }

.dash-layout {
  padding: 40px; display: grid; gap: 20px;
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 900px) { .dash-layout { grid-template-columns: 1fr 1fr; padding: 24px; } }
.dash-layout .kpi { padding: 22px 24px; background: #fff; border: 1px solid var(--line); }
.dash-layout .kpi.wide { grid-column: span 3; }
@media (max-width: 900px) { .dash-layout .kpi.wide { grid-column: span 2; } }
.dash-layout .kpi .k { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--mute); text-transform: uppercase; margin-bottom: 10px; }
.dash-layout .kpi .v { font-family: var(--f-display); font-weight: var(--display-weight); font-size: 42px; letter-spacing: var(--display-track); line-height: 1; color: var(--ink); }
.dash-layout .kpi .v em { color: var(--accent); font-style: normal; }
body[data-color="ink"] .dash-layout .kpi .v em { color: var(--ink); text-decoration: underline; text-decoration-thickness: 3px; }
.dash-layout .kpi .delta { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ok); margin-top: 8px; }
.dash-layout .kpi .delta.down { color: var(--danger); }
.dash-layout .kpi.wide .chart {
  height: 80px; margin-top: 12px;
  background:
    linear-gradient(to top, var(--accent-muted), transparent),
    repeating-linear-gradient(to right, transparent 0 20%, var(--line) 20% calc(20% + 1px));
  border-bottom: 1px solid var(--line-strong);
  position: relative;
}
.dash-layout .kpi.wide .chart::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 60%;
  background: linear-gradient(115deg, transparent 0%, var(--accent) 50%, transparent 100%);
  opacity: 0.25;
  clip-path: polygon(0 80%, 10% 60%, 20% 70%, 30% 40%, 40% 50%, 50% 30%, 60% 45%, 70% 25%, 80% 35%, 90% 15%, 100% 20%, 100% 100%, 0 100%);
}

/* ============================================================
   USAGE ACROSS PROPERTIES (§ 14)
   ============================================================ */
.prop-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; margin-top: 40px;
}
@media (max-width: 900px) { .prop-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .prop-grid { grid-template-columns: 1fr; } }
.prop-card {
  padding: 26px 24px;
  background: #fff; border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 14px;
  min-height: 180px;
  position: relative;
  overflow: hidden;
}
.prop-card .swatch-row { display: flex; gap: 4px; height: 6px; }
.prop-card .swatch-row i { flex: 1; display: block; }
.prop-card .swatch-row i.bg { background: var(--bg); border: 1px solid var(--line); }
.prop-card .swatch-row i.ink { background: var(--ink); }
.prop-card .swatch-row i.accent { background: var(--accent); }
.prop-card .url {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.12em; color: var(--accent);
  text-transform: lowercase;
}
.prop-card h5 {
  font-family: var(--f-display); font-weight: var(--display-weight);
  font-size: 20px; letter-spacing: var(--display-track);
  line-height: 1.1;
}
.prop-card p { font-size: 13.5px; color: var(--mute); margin: 0; line-height: 1.5; }

/* ============================================================
   CLOSING (§ 15)
   ============================================================ */
.closing-h {
  font-family: var(--f-display);
  font-weight: var(--display-weight);
  font-size: clamp(48px, 8vw, 120px);
  letter-spacing: var(--display-track);
  line-height: 1;
  margin-bottom: 36px;
}
.closing-h em { color: var(--accent); font-style: normal; }
body[data-color="ink"] .closing-h em { color: var(--ink); text-decoration: underline; text-decoration-thickness: 6px; text-underline-offset: 0.1em; }

.version-table {
  width: 100%; border-collapse: collapse; margin-top: 30px;
  font-family: var(--f-body); font-size: 14px;
}
.version-table th, .version-table td {
  padding: 14px 16px; text-align: left;
  border-bottom: 1px solid var(--line);
}
.version-table th {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); font-weight: 500;
}
.version-table td.mono { font-family: var(--f-mono); letter-spacing: 0.04em; }

.signature {
  margin-top: 60px;
  display: flex; justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid var(--line-strong);
  padding-top: 30px;
  gap: 30px; flex-wrap: wrap;
}
.signature .sig-name {
  font-family: var(--f-display); font-weight: var(--display-weight);
  font-size: 32px; letter-spacing: var(--display-track);
  display: inline-flex; align-items: center; gap: 10px;
}
.signature .sig-meta {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.22em; color: var(--mute);
  text-transform: uppercase;
  line-height: 1.8;
}

footer.foot {
  padding: 30px 40px;
  text-align: center;
  font-family: var(--f-mono); font-size: 10px;
  color: var(--mute); letter-spacing: 0.22em;
  text-transform: uppercase;
  border-top: 1px solid var(--line);
  display: flex; justify-content: center; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
footer.foot .accent-slash { color: var(--accent); }

/* ============================================================
   UTILITY
   ============================================================ */
.tight { margin-bottom: 8px; }
.big-num {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.28em;
  color: var(--accent); margin-bottom: 20px; text-transform: uppercase;
}
.note-row {
  display: flex; gap: 20px; flex-wrap: wrap;
  margin-top: 30px;
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mute);
}
.note-row span::before { content: "▸ "; color: var(--accent); }