/* ============================================================
   Vampires vs. Werewolves — typography-pro.css
   Opt-in display headings + fluid utilities + pro prose layer.

   ADDITIVE / OPT-IN ONLY.
   - Does NOT restyle global h1/h2 (those are owned by base.css).
   - Uses only already-loaded fonts (Cinzel / Crimson Pro) plus a
     decorative gothic fallback stack — NO new webfont link required.
   - Fully token-driven (variables.css). Respects reduced-motion.

   Usage:
     <h1 class="display-title">…</h1>          gothic display hero H1
     <h1 class="display-title display-title--gold">…</h1>  gold gradient
     <h2 class="display-sub">…</h2>            gothic display sub H2
     <p class="fluid-lead">…</p>               fluid lead paragraph
     <div class="prose-pro">…lore/blog body…</div>  drop-cap + OpenType
     <p class="lede-callout">…framed intro sentence…</p>
     <aside class="key-takeaways">…quick-facts box…</aside>
     <span class="step-marker">1</span>              HowTo step badge
     <figure>…</figure> inside .prose-pro          styled caption
   ============================================================ */

/* ── Sec 2 · Display-шрифт scale (hero / landing only, opt-in) ──
   Decorative gothic fallback stack. 'Cinzel Decorative' is used when
   present on the system/loaded; otherwise gracefully degrades to the
   already-loaded 'Cinzel', then generic serifs. */
.display-title,
.display-sub {
  --_display-stack: 'Cinzel Decorative', 'Cinzel', 'Times New Roman', serif;
  font-family: var(--_display-stack);
  font-weight: 700;
  line-height: 1.04;
  text-wrap: balance;
  color: var(--color-text);
  margin: 0 0 var(--space-4, 16px);
}

.display-title {
  font-size: var(--fluid-h1);
  letter-spacing: 0.04em;   /* heavier tracking for display gothic */
  text-transform: none;
}

.display-sub {
  font-size: var(--fluid-h2);
  letter-spacing: 0.03em;
  color: var(--color-text);
}

/* Optional gold text gradient variant.
   Fallback: solid gold for browsers without background-clip:text. */
.display-title--gold,
.display-sub--gold {
  color: var(--color-gold, #c8a84b);           /* fallback color */
  background: var(--grad-gold);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* subtle depth so gradient text keeps a gothic weight on dark bg */
  text-shadow: 0 0 0.6em var(--color-gold-glow, rgba(200, 168, 75, 0.3));
}

/* Guard: if background-clip:text is NOT supported, keep the solid gold
   color (revert the transparent fill) so text never disappears. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .display-title--gold,
  .display-sub--gold {
    background: none;
    color: var(--color-gold, #c8a84b);
    -webkit-text-fill-color: currentColor;
  }
}

/* ── Sec 2 · Fluid clamp typography utilities (any page, opt-in) ──
   Map directly onto the existing --fluid-* tokens in variables.css. */
.fluid-h1 { font-size: var(--fluid-h1); line-height: 1.06; }
.fluid-h2 { font-size: var(--fluid-h2); line-height: 1.12; }
.fluid-h3 { font-size: var(--fluid-h3); line-height: 1.2; }

.fluid-h1,
.fluid-h2,
.fluid-h3 {
  font-family: var(--font-gothic);
  font-weight: 700;
  text-wrap: balance;
  margin: 0 0 var(--space-4, 16px);
}

.fluid-lead {
  font-family: var(--font-body);
  font-size: var(--fluid-lead);
  line-height: 1.6;
  color: var(--color-text-muted, #8a8a9a);
  text-wrap: pretty;
  margin: 0 0 var(--space-5, 20px);
}

/* ── Sec 2 (task 3) · Pro prose layer (.prose-pro) ──
   Extends the drop-cap + OpenType treatment beyond .lore-prose so
   lore/blog bodies can opt in without touching base.css. */
.prose-pro {
  font-family: var(--font-body);
  color: var(--color-text);
  line-height: 1.7;
  font-feature-settings: 'liga' 1, 'clig' 1, 'onum' 1, 'kern' 1;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.prose-pro p {
  margin: 0 0 var(--space-5, 20px);
  text-wrap: pretty;
}

/* Drop cap — Cinzel, gold, soft glow — on the first paragraph. */
.prose-pro > p:first-of-type::first-letter {
  font-family: var(--font-gothic);
  font-size: 3.4em;
  float: left;
  line-height: 0.85;
  padding: 0.05em 0.12em 0 0;
  color: var(--color-gold, #c8a84b);
  font-weight: 700;
  text-shadow: 0 0 18px var(--color-gold-glow, rgba(200, 168, 75, 0.3));
}

/* Styled blockquote to match the lore treatment. */
.prose-pro blockquote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.1em;
  line-height: 1.55;
  border-left: 3px solid var(--color-gold, #c8a84b);
  padding: var(--space-2, 8px) var(--space-4, 16px);
  margin: var(--space-5, 20px) 0;
  color: #d4c8a8;
  background: rgba(200, 168, 75, 0.04);
  border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
}

.prose-pro blockquote p:last-child { margin-bottom: 0; }

/* Tabular figures where alignment matters (tables inside prose). */
.prose-pro table,
.prose-pro .tabular-nums {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ── Sec 3 (task 1) · .lede-callout — framed lead sentence ──
   Opt-in intro flourish for hub/landing pages. Purely additive:
   apply to a single <p> to give it a gold hairline + soft plate.
   Token-driven; AA-safe (uses --color-text on a near-bg plate). */
.lede-callout {
  font-family: var(--font-body);
  font-size: var(--fluid-lead);
  line-height: 1.65;
  color: var(--color-text);              /* 13.6:1 on bg — AAA */
  text-wrap: pretty;
  margin: 0 0 var(--space-6, 24px);
  padding: var(--space-4, 16px) var(--space-5, 20px);
  border: 1px solid var(--color-border, #2a2a3a);
  border-left: 3px solid var(--color-gold, #c8a84b);
  border-radius: 0 var(--radius, 8px) var(--radius, 8px) 0;
  background:
    linear-gradient(90deg, rgba(200, 168, 75, 0.06) 0%, transparent 60%),
    var(--color-surface, #12121a);
}

/* ── Sec 3 (task 1) · .key-takeaways — quick-facts / TL;DR box ──
   A bordered <aside> that fronts a page with its essentials. The
   heading is opt-in via .key-takeaways__title; list items get a
   gold marker. No global list/aside restyle. */
.key-takeaways {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-surface-2, #1a1a26);
  border: 1px solid var(--color-border, #2a2a3a);
  border-top: 2px solid var(--color-gold, #c8a84b);
  border-radius: var(--radius, 8px);
  padding: var(--space-5, 20px) var(--space-6, 24px);
  margin: 0 0 var(--space-6, 24px);
  box-shadow: var(--elev-1, 0 1px 2px rgba(0, 0, 0, 0.4));
}

.key-takeaways__title {
  font-family: var(--font-gothic);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold, #c8a84b);
  margin: 0 0 var(--space-3, 12px);
}

.key-takeaways ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.key-takeaways li {
  position: relative;
  padding-left: 1.5em;
  margin: 0 0 var(--space-2, 8px);
  line-height: 1.6;
  color: var(--color-text);              /* AAA on surface-2 */
}

.key-takeaways li:last-child { margin-bottom: 0; }

/* Diamond marker — decorative, hidden from AT. */
.key-takeaways li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.42em;
  height: 0.42em;
  background: var(--color-gold, #c8a84b);
  transform: rotate(45deg);
}

/* ── Sec 3 (task 1) · .step-marker — HowTo step badge ──
   Inline numbered gothic badge for step-by-step guide markup.
   Author supplies the number as text so it stays in the a11y tree. */
.step-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9em;
  height: 1.9em;
  flex-shrink: 0;
  font-family: var(--font-gothic);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-gold, #c8a84b);
  background: rgba(200, 168, 75, 0.14);
  border: 1px solid rgba(200, 168, 75, 0.4);
  border-radius: var(--radius-full, 9999px);
}

/* ── Sec 3 (task 1) · .prose-pro figure / figcaption ──
   Opt-in media framing scoped to .prose-pro only — never a global
   figure restyle. Image inherits rounded corners + a subtle plate;
   caption uses muted (AA-pass) text. */
.prose-pro figure {
  margin: var(--space-6, 24px) 0;
}

.prose-pro figure img,
.prose-pro figure svg,
.prose-pro figure picture {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius, 8px);
  border: 1px solid var(--color-border, #2a2a3a);
  background: var(--color-surface, #12121a);
}

.prose-pro figcaption {
  margin-top: var(--space-2, 8px);
  padding-left: var(--space-3, 12px);
  border-left: 2px solid var(--color-gold, #c8a84b);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--color-text-muted, #8a8a9a);  /* 5.8:1 on bg — AA */
  text-wrap: pretty;
}

/* ── Reduced-motion / print safety ──
   The gold gradient text carries only a static glow (no animation),
   but drop the decorative glow shadow under reduced-motion + print
   for a calmer, higher-contrast render. */
@media (prefers-reduced-motion: reduce) {
  .display-title--gold,
  .display-sub--gold {
    text-shadow: none;
  }
  /* New utilities carry no animation, but drop the box glow for a
     flatter, higher-contrast render when motion is reduced. */
  .key-takeaways { box-shadow: none; }
}

@media print {
  .display-title--gold,
  .display-sub--gold {
    background: none;
    color: #000;
    -webkit-text-fill-color: #000;
    text-shadow: none;
  }
  .prose-pro > p:first-of-type::first-letter {
    color: #000;
    text-shadow: none;
  }
  /* New utilities: flatten plates + gold to ink for legible print. */
  .lede-callout,
  .key-takeaways {
    background: none;
    color: #000;
    box-shadow: none;
    border-color: #000;
  }
  .key-takeaways__title { color: #000; }
  .key-takeaways li { color: #000; }
  .key-takeaways li::before { background: #000; }
  .step-marker {
    color: #000;
    background: none;
    border-color: #000;
  }
  .prose-pro figcaption { color: #000; }
}