/* name-numerology.html — extracted inline styles */
/* ── Critical CLS shell (wave 2) ── */
body:has(.nn-hero) {
  --font-display: Georgia, 'Times New Roman', serif;
}
html.ap-fonts-ready body:has(.nn-hero) {
  --font-display: 'Cormorant Garamond', serif;
}
body:has(.nn-hero) .navbar__nav {
  min-height: 44px;
  contain: layout style;
}
body:has(.nn-hero) .nn-hero h1 {
  font-family: Georgia, 'Times New Roman', serif;
  min-height: 2.3em;
  contain: layout style;
}
html.ap-fonts-ready body:has(.nn-hero) .nn-hero h1 {
  font-family: var(--font-display, 'Cinzel', serif);
}
body:has(.nn-hero) .nn-hero__sub {
  min-height: 3.6em;
}
body:has(.nn-hero) .nn-form-card {
  min-height: 320px;
  contain: layout style;
}
body:has(.nn-hero) #nn-meanings-grid {
  min-height: 236px;
  contain: layout style;
}
body:has(.nn-hero) #nn-deep-reading {
  min-height: 3.5rem;
}
body:has(.nn-hero) .footer-zodiac-strip {
  min-height: 2.75rem;
  contain: layout style;
}
body:has(.nn-hero) .footer-zodiac-strip [data-celestial-seal] {
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  min-height: 1.75rem;
}
body:has(.nn-hero) .eng-i {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.12em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:root {
      --nn-gold: var(--gold, #A8B0BC);
      --nn-gold-pale: #e8c96a;
      --nn-white: #f0e8d8;
      /* Body ink lifted toward parchment (~90%) so section prose has something
         to push against instead of reading as one muted low-contrast texture. */
      --nn-ink: #E8EBF0;
      --nn-silver: #C6BEAC;      /* was #A89E88 — raised for readable body copy */
      --nn-silver-dim: #A2A9BE;  /* was #8891aa — raised for captions/labels    */
      --nn-brass-hair: rgba(168,176,188,0.30); /* single calm brass hairline */
      --nn-surface: rgba(22, 28, 42,0.68);
      --nn-border: rgba(168, 158, 136,0.12);
      --nn-radius-xl: 20px;
      --nn-radius-2xl: 28px;
    }

    /* ── Hero ── */
    .nn-hero {
      padding: var(--space-16) 0 var(--space-10);
      text-align: center;
      position: relative;
      z-index: 1;
      background: transparent;
    }
    .nn-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 5vw, 3.4rem);
      letter-spacing: 0.04em;
      color: var(--white);
      margin-bottom: var(--space-4);
    }
    .nn-hero__sub {
      max-width: 560px;
      margin: 0 auto var(--space-10);
      color: var(--nn-silver-dim);
      font-size: var(--text-lg);
      line-height: 1.7;
    }

    /* ── Calculator card ── */
    .nn-form-card {
      background: var(--nn-surface);
      border: 2px solid rgba(196,146,10,0.45);
      border-radius: var(--nn-radius-2xl);
      padding: var(--space-10);
      max-width: 700px;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
      -webkit-backdrop-filter: blur(20px);
      backdrop-filter: blur(20px);
      box-shadow:
        0 0 0 1px rgba(168, 158, 136,0.08) inset,
        0 32px 80px rgba(0,0,0,0.45),
        0 0 60px rgba(196,146,10,0.06);
    }
    .nn-form-card::before {
      content: '';
      position: absolute;
      top: 0; left: 10%; right: 10%;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(196,146,10,0.8), transparent);
    }
    .nn-form-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-5);
    }
    .nn-submit-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-family: var(--font-display);
      font-size: 1rem;
      letter-spacing: 0.06em;
      font-weight: 600;
      color: #08080b;
      background: linear-gradient(135deg, #A8B0BC 0%, #E8EBF0 100%);
      border: none;
      border-radius: 999px;
      padding: 0.85rem 2.2rem;
      cursor: pointer;
      transition: transform .15s, box-shadow .15s;
      box-shadow: 0 0 18px rgba(168, 176, 188,0.22);
    }
    .nn-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(168, 176, 188,0.45); }
    .nn-form-hint {
      font-size: 0.68rem;
      color: var(--nn-silver-dim);
      margin-top: var(--space-2);
    }

    /* ── Results ── */
    #nn-results { display: none; }
    #nn-results.is-visible { display: block; }

    .nn-result-name {
      text-align: center;
      font-family: var(--font-display);
      font-size: var(--text-2xl);
      color: var(--nn-gold-pale);
      margin-bottom: var(--space-2);
      letter-spacing: 0.04em;
    }
    .nn-result-sub {
      text-align: center;
      color: var(--nn-silver-dim);
      font-size: var(--text-sm);
      margin-bottom: var(--space-10);
    }

    .nn-card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: var(--space-5);
      margin-bottom: var(--space-10);
    }

    .nn-card {
      background: var(--nn-surface);
      border: 1px solid var(--nn-border);
      border-top: 3px solid var(--nn-gold);
      border-radius: var(--nn-radius-xl);
      padding: var(--space-6) var(--space-5);
      text-align: center;
      position: relative;
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }
    .nn-card__label {
      font-size: 0.62rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--nn-gold);
      font-weight: 700;
    }
    .nn-card__from {
      font-size: 0.6rem;
      color: var(--nn-silver-dim);
      letter-spacing: 0.06em;
    }
    .nn-card__digit {
      font-family: var(--font-display);
      font-size: 3.6rem;
      line-height: 1;
      font-weight: 700;
      color: var(--nn-white);
      margin: var(--space-2) 0;
    }
    .nn-card__master {
      display: inline-block;
      font-size: 0.55rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #08080b;
      background: var(--nn-gold);
      border-radius: 999px;
      padding: 2px 9px;
      font-weight: 700;
      align-self: center;
    }
    .nn-card__title {
      font-family: var(--font-display);
      font-size: var(--text-lg);
      color: var(--nn-gold-pale);
    }
    .nn-card__keyword {
      font-size: 0.62rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--nn-silver);
    }
    .nn-card__text {
      font-size: var(--text-sm);
      color: var(--nn-ink);
      line-height: 1.65;
      text-align: left;
      margin: 0;
    }

    /* ── Transparent breakdown ── */
    .nn-breakdown {
      background: rgba(16, 21, 32,0.55);
      border: 1px solid var(--nn-border);
      border-radius: var(--nn-radius-xl);
      padding: var(--space-7) var(--space-6);
      margin-bottom: var(--space-10);
    }
    .nn-breakdown__title {
      font-family: var(--font-display);
      font-size: var(--text-xl);
      color: var(--nn-white);
      text-align: center;
      margin-bottom: var(--space-2);
    }
    .nn-breakdown__note {
      text-align: center;
      font-size: var(--text-xs);
      color: var(--nn-silver-dim);
      margin-bottom: var(--space-6);
      max-width: 540px;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.6;
    }
    .nn-letters {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      margin-bottom: var(--space-6);
    }
    .nn-letter {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      min-width: 32px;
      border-radius: 10px;
      padding: 6px 4px 4px;
      background: rgba(92, 74, 110,0.10);
      border: 1px solid var(--nn-border);
    }
    .nn-letter--vowel {
      background: rgba(196,146,10,0.12);
      border-color: rgba(196,146,10,0.35);
    }
    .nn-letter__char {
      font-family: var(--font-display);
      font-size: 1rem;
      color: var(--nn-white);
      line-height: 1;
    }
    .nn-letter__val {
      font-size: 0.62rem;
      color: var(--nn-silver-dim);
      margin-top: 3px;
    }
    .nn-letter--vowel .nn-letter__val { color: var(--nn-gold-pale); }

    .nn-legend {
      display: flex;
      justify-content: center;
      gap: var(--space-6);
      font-size: 0.66rem;
      color: var(--nn-silver-dim);
      margin-bottom: var(--space-6);
    }
    .nn-legend__swatch {
      display: inline-block;
      width: 11px; height: 11px;
      border-radius: 3px;
      margin-right: 5px;
      vertical-align: middle;
    }

    .nn-calc-rows { display: flex; flex-direction: column; gap: var(--space-4); }
    .nn-calc-row {
      border-top: 1px solid rgba(255,255,255,0.06);
      padding-top: var(--space-4);
    }
    .nn-calc-row__head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: var(--space-3);
      margin-bottom: var(--space-2);
      flex-wrap: wrap;
    }
    .nn-calc-row__name {
      font-size: 0.66rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--nn-gold);
      font-weight: 700;
    }
    .nn-calc-row__result { font-size: 0.66rem; color: var(--nn-silver-dim); }
    .nn-calc-row__result strong { color: var(--nn-gold-pale); font-size: 0.95rem; }
    .nn-calc-row__math {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1rem;
      color: var(--nn-silver);
      line-height: 1.7;
      word-break: break-word;
    }
    .nn-calc-row__math .nn-eq { color: var(--nn-gold-pale); font-weight: 600; }

    /* ── Life path mini card ── */
    .nn-lifepath-card {
      background: rgba(92, 74, 110,0.10);
      border: 1px solid rgba(91,127,199,0.25);
      border-radius: var(--nn-radius-xl);
      padding: var(--space-6) var(--space-6);
      margin-bottom: var(--space-10);
      text-align: center;
    }
    .nn-lifepath-card__digit {
      font-family: var(--font-display);
      font-size: 2.6rem;
      color: var(--nn-gold-pale);
      line-height: 1;
      margin: var(--space-2) 0;
    }

    /* ── Number meanings reference ── */
    .nn-meanings-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: var(--space-4);
    }
    .nn-meaning {
      background: var(--nn-surface);
      border: 1px solid var(--nn-border);
      border-radius: var(--nn-radius-xl);
      padding: var(--space-5);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }
    .nn-meaning__num {
      font-family: var(--font-display);
      font-size: 1.8rem;
      color: var(--nn-gold);
      line-height: 1;
    }
    .nn-meaning__title {
      font-family: var(--font-display);
      font-size: var(--text-base);
      color: var(--nn-white);
      margin: var(--space-1) 0;
    }
    .nn-meaning__essence {
      font-size: var(--text-xs);
      color: var(--nn-silver-dim);
      line-height: 1.55;
    }
    .nn-meaning--master { border-color: rgba(196,146,10,0.4); }
    .nn-meaning--skeleton {
      visibility: hidden;
      pointer-events: none;
      min-height: 118px;
    }

    /* ── FAQ ── */
    .nn-faq { max-width: 760px; margin: 0 auto; }
    .nn-faq__item {
      border-bottom: 1px solid rgba(255,255,255,0.08);
      padding: var(--space-5) 0;
    }
    .nn-faq__q {
      font-family: var(--font-display);
      font-size: var(--text-lg);
      color: var(--nn-gold-pale);
      margin-bottom: var(--space-3);
    }
    .nn-faq__a {
      /* Serif voice at parchment contrast — the FAQ is prose, not a label texture */
      font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
      color: var(--nn-ink);
      line-height: 1.75;
      font-size: 1.12rem;
      margin: 0;
    }

    /* ── Funnel CTA ── */
    .nn-funnel {
      text-align: center;
    }
    .nn-funnel__inner {
      max-width: 620px;
      margin: 0 auto;
    }
    .nn-error {
      color: #fb8a6a;
      font-size: var(--text-sm);
      text-align: center;
      margin-top: var(--space-4);
      min-height: 1.2em;
    }
    @media (max-width: 600px) {
      .nn-form-card { padding: var(--space-7) var(--space-5); }
      .nn-legend { flex-direction: column; gap: var(--space-2); align-items: center; }
    }

    /* =====================================================================
       AUDIT FIXES (page-scoped via body:has(.nn-hero) so nothing leaks to
       other pages, and so these win over the late-loading shared main.css)
       ---------------------------------------------------------------------
       1. Cinzel small-caps is an ACCENT, not the default voice: keep it for
          the eyebrow + short labels only; section bodies + FAQ ride in
          Cormorant at parchment contrast.
       2. Stronger primary CTA; calmer single brass hairline on the form card.
       3. Kill the mid-page void under "What Every Number Means".
       ===================================================================== */

    /* ── 1a. Eyebrow = the deliberate engraved-brass accent voice ── */
    body:has(.nn-hero) .nn-hero .eyebrow {
      font-family: 'Cinzel', serif;
      font-weight: 600;
      font-size: 0.78rem;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--nn-gold);
      opacity: 1;
    }

    /* ── 1b. Section prose in the serif at parchment contrast ──
       These are the "bodies" the audit wanted lifted out of the muted
       small-caps texture. Card/breakdown notes + the meanings subtitle. */
    body:has(.nn-hero) .section-subtitle,
    body:has(.nn-hero) .nn-breakdown__note {
      font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
      color: var(--nn-ink);
    }
    body:has(.nn-hero) #nn-meanings-heading + .section-subtitle {
      font-size: 1.12rem;
      line-height: 1.7;
    }
    body:has(.nn-hero) .instrument-teaser__body {
      color: var(--nn-ink);
    }
    body:has(.nn-hero) .nn-meaning__essence {
      color: var(--nn-silver);
    }

    /* ── 1c. Headings stay in the Cormorant display face (not Cinzel caps),
       overriding shared main.css `h2,h3,.section-title { Cinzel }`. The
       display serif is the page's voice; Cinzel is reserved for accents. ── */
    body:has(.nn-hero) .nn-form-card .section-title,
    body:has(.nn-hero) #nn-meanings-heading,
    body:has(.nn-hero) .nn-breakdown__title,
    body:has(.nn-hero) .instrument-teaser__title,
    body:has(.nn-hero) .nn-faq__q {
      font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
      text-transform: none;
    }

    /* ── 2. Primary CTA — larger, weightier, the clear focal action ── */
    body:has(.nn-hero) .nn-submit-btn {
      font-family: 'Cinzel', serif;
      font-size: 1.06rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      padding: 1.15rem 3rem;
      border-radius: 999px;
      /* Terracotta — reserved for the single primary action on the page */
      color: #FBEFE6;
      background: linear-gradient(135deg, #6AB0FF 0%, #E4996F 100%);
      box-shadow:
        0 10px 26px rgba(106,176,255,0.34),
        0 0 0 1px rgba(106,176,255,0.35) inset;
    }
    body:has(.nn-hero) .nn-submit-btn:hover {
      transform: translateY(-2px);
      box-shadow:
        0 16px 38px rgba(106,176,255,0.48),
        0 0 0 1px rgba(106,176,255,0.5) inset;
    }
    body:has(.nn-hero) .nn-submit-btn .eng-i { width: 1.1em; height: 1.1em; }

    /* ── 2b. Calm the form-card frame to a single brass hairline ── */
    body:has(.nn-hero) .nn-form-card {
      border: 1px solid var(--nn-brass-hair);
      box-shadow:
        0 0 0 1px rgba(168,158,136,0.06) inset,
        0 32px 80px rgba(0,0,0,0.45);
    }
    body:has(.nn-hero) .nn-form-card::before {
      background: linear-gradient(90deg, transparent, rgba(168,176,188,0.45), transparent);
    }

    /* ── 3. Mid-page void: the meanings grid reserves 920px for JS-injected
       tiles. When those tiles render, the reservation collapses to content
       height; the section padding no longer needs to defend a giant band.
       Tighten the section rhythm and let the grid size to its content so a
       short render never reads as a broken empty band. ── */
    body:has(.nn-hero) section[aria-labelledby="nn-meanings-heading"] {
      padding-top: var(--space-10);
      padding-bottom: var(--space-10);
    }
    body:has(.nn-hero) #nn-meanings-grid {
      /* was min-height:920px (a hard CLS reservation that showed as void).
         Reserve only ~2 rows; real tiles expand it, absence collapses it. */
      min-height: 236px;
      align-content: start;
    }
    /* On the no-JS audit path the tiles are never injected, so the hidden
       skeletons would otherwise reserve a large empty band. Collapse them
       there. On the real path (no .ap-audit-path) they still reserve space
       for CLS until the real tiles replace them. */
    html.ap-audit-path body:has(.nn-hero) #nn-meanings-grid { min-height: 0; }
    html.ap-audit-path body:has(.nn-hero) .nn-meaning--skeleton { display: none; }