/**
 * Aurora overlay — the 2026-08-29 redesign's shape-and-type layer.
 *
 * theme.css carries the Aurora COLOUR tokens; this file carries everything a
 * token cannot: the Gloock display face, gradient headline accents, pill
 * buttons, softened card radii, and the fixed aurora-sky backdrop. It loads
 * AFTER theme.css on every editorial-family page, so it wins over each page's
 * inline <style> without touching the markup.
 *
 * Deliberately NOT swapped: Manrope (body) and JetBrains Mono (data) stay —
 * they are already loaded by every page, sit well under Gloock, and keeping
 * them means zero flash-of-fallback risk on slow connections.
 *
 * Requires the Gloock stylesheet link next to this file's own <link>.
 */

:root {
  --lav: #A9B4FF;             /* aurora lavender — used only by this layer */
  --sky-1: rgba(169,180,255,.16);
  --sky-2: rgba(111,227,206,.10);
  --sky-3: rgba(255,181,158,.10);
}
:root[data-theme="light"] {
  --lav: #5D50D6;
  --sky-1: rgba(93,80,214,.07);
  --sky-2: rgba(14,124,111,.05);
  --sky-3: rgba(168,68,31,.05);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --lav: #5D50D6;
    --sky-1: rgba(93,80,214,.07);
    --sky-2: rgba(14,124,111,.05);
    --sky-3: rgba(168,68,31,.05);
  }
}

/* ------------------------------------------------------------ aurora sky */
/* Painted on the body background itself — no new stacking contexts, and the
   film-grain pseudo-element keeps sitting on top exactly as before. */
body {
  background-image:
    radial-gradient(42% 30% at 82% -4%, var(--sky-1), transparent 70%),
    radial-gradient(48% 34% at 6% -6%, var(--sky-2), transparent 70%),
    radial-gradient(56% 42% at 50% 108%, var(--sky-3), transparent 72%);
  background-attachment: fixed;
  background-color: var(--ink);
}

/* -------------------------------------------------------------- display */
html h1, html .hero-title, html h1.hero-title,
html h2, html .section-title, html h2.section-title,
html .cta h2,
html .footer-brand-txt {
  font-family: 'Gloock', 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-variation-settings: normal;
  letter-spacing: -.01em;
}
/* Gloock has no italic and carries more weight than Fraunces 300 — the giant
   hero sizes need one step down to keep their measure. */
html h1.hero-title { font-size: clamp(40px, 7vw, 104px); line-height: 1.0; }
html h1 em, html h1.hero-title em, html .hero-title em,
html h2 em, html .section-title em, html .cta h2 em {
  font-style: normal;
  font-variation-settings: normal;
  background: linear-gradient(100deg, var(--amber), var(--lav) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------------------------------------------------------------- shape */
.btn, .btn-primary, .btn-ghost,
.main-cta, .nav-cta {
  border-radius: 999px;
}
.btn-primary, .main-cta {
  background: linear-gradient(120deg, var(--amber), color-mix(in srgb, var(--amber) 72%, var(--coral)));
  color: var(--ink);
  border-color: transparent;
  box-shadow: 0 8px 32px color-mix(in srgb, var(--amber) 30%, transparent);
}
.btn-primary:hover, .main-cta:hover {
  box-shadow: 0 10px 44px color-mix(in srgb, var(--amber) 42%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .btn-primary, .main-cta { background: var(--amber); box-shadow: none; }
}

.toc,
.faq-list details,
.info-banner,
.preset-card,
.hub-link {
  border-radius: 18px;
}

/* the wordmark dot becomes the small aurora orb from the redesign comp */
.brand-dot {
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--signal), var(--lav) 60%, transparent 78%);
  box-shadow: 0 0 14px color-mix(in srgb, var(--lav) 55%, transparent);
}

/* cards lift a little more softly than the sharp editorial hover */
.preset-card, .toc, .faq-list details {
  transition: transform .3s ease, border-color .3s ease;
}