/* ═══════════════════════════════════════════════════════════════
   KOVΔ · docs.css
   Standalone stylesheet for legal/merchant documents.
   Reuses KOVA design tokens but ships without the full animated
   hero stack — readability first.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ink-bg:    #050508;
  --gold:      #D4B896;
  --gold-hi:   #EFD9B1;
  --cream:     #f5f5f5;
  --cream-hi:  rgba(255, 255, 245, 0.95);
  --font-mono:    'IBM Plex Mono', monospace;
  --font-serif:   'Cormorant Garamond', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100svh; }
body {
  background: var(--ink-bg);
  color: var(--cream);
  font-family: var(--font-mono);
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
}

.doc-main {
  max-width: 820px;
  margin: 0 auto;
  padding: 80px 24px 120px;
}

.doc-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 245, 225, 0.65);
  text-decoration: none;
  margin-bottom: 48px;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.doc-back:hover {
  color: rgba(255, 252, 240, 1);
  text-shadow:
    0 0 6px rgba(255, 250, 240, 0.55),
    0 0 18px rgba(255, 230, 180, 0.25);
}

.doc-lang-switch {
  display: inline-flex;
  gap: 8px;
  margin-left: 18px;
  margin-bottom: 48px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.7;
  vertical-align: baseline;
}
.doc-lang-link {
  text-decoration: none;
  color: rgba(255, 245, 225, 0.65);
  padding: 2px 6px;
  transition: color 0.3s ease;
}
.doc-lang-link.is-active {
  font-weight: 400;
  color: var(--cream-hi);
  opacity: 1;
}
.doc-lang-link:hover { text-decoration: underline; }
.doc-lang-sep { opacity: 0.4; color: rgba(255, 245, 225, 0.4); }

.doc-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(32px, 4.6vw, 46px);
  line-height: 1.15;
  color: var(--cream-hi);
  margin-bottom: 12px;
  text-shadow:
    0 0 6px rgba(255,255,245,0.35),
    0 0 22px rgba(255,230,180,0.12);
}
.doc-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 240, 215, 0.55);
  margin-bottom: 48px;
}

.doc-article h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 22px;
  color: var(--gold-hi);
  margin: 40px 0 14px;
  letter-spacing: 0.01em;
}
.doc-article h3 {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 240, 215, 0.78);
  margin: 28px 0 10px;
}
.doc-article p,
.doc-article li {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 300;
  color: rgba(245, 245, 245, 0.82);
  margin-bottom: 12px;
}
.doc-article ul, .doc-article ol {
  padding-left: 22px;
  margin-bottom: 16px;
}
.doc-article a {
  color: var(--gold-hi);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(212, 184, 150, 0.35);
  transition: text-decoration-color 0.3s ease;
}
.doc-article a:hover { text-decoration-color: var(--gold-hi); }

.doc-article strong { color: var(--cream-hi); font-weight: 400; }

.doc-placeholder {
  margin-top: 40px;
  padding: 20px 24px;
  border: 1px dashed rgba(212, 184, 150, 0.25);
  border-radius: 10px;
  background: rgba(212, 184, 150, 0.03);
  font-size: 12px;
  color: rgba(255, 230, 190, 0.7);
  letter-spacing: 0.08em;
}

.doc-meta {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid rgba(212, 184, 150, 0.12);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 240, 215, 0.5);
}

@media (max-width: 560px) {
  .doc-main { padding: 48px 18px 80px; }
  .doc-back { margin-bottom: 32px; }
  .doc-sub  { margin-bottom: 32px; }
  .doc-article h2 { font-size: 18px; margin-top: 32px; }
}