/* ============================================================================
   names.css — NameCurve's signature layer

   AUDIENCE-LED REDESIGN (2026-08-04). The first cut was a "registrar's
   archive": hairline ledger rules, small caps, austere paper. Correct for the
   ring's Identity A, wrong for who actually lands here — people choosing a
   name for a baby, usually on a phone, usually excited.

   So: warmer, brighter, rounder, with real colour doing real work. What does
   NOT change is the credibility layer — dated source lines, reporting-floor
   honesty, tabular numerals on every figure. The data stays serious; the
   room it sits in gets the lights turned on.

   DELIBERATE DEPARTURE from Identity A's austerity, taken on audience
   grounds. NameCurve is the warm outlier in the ring by intent, not drift.
   ========================================================================== */

:root {
  /* the new palette — modern, warm, not nursery-cliché.
     Violet leads (calm, premium), coral warms it, mint keeps it fresh. */
  --nc:        #6C4BD8;   /* primary violet   */
  --nc-deep:   #4B31A8;   /* text-safe violet */
  --nc-2:      #FF7A59;   /* coral            */
  --nc-3:      #17B3A3;   /* mint             */
  --nc-4:      #FFB020;   /* amber            */

  /* INK VARIANTS — the same hues darkened until white text on them clears
     WCAG AA (4.5:1). The bright values above are for fills, tints and curves,
     where the ratio does not apply; anything carrying WHITE TEXT must use one
     of these. Measured, not eyeballed: coral 5.18, mint 5.47, rose 5.51,
     blue 5.67, violet 5.78. The bright coral and mint were 2.57 and 2.62. */
    --nc-1-ink:  #6C4BD8;   /* pill ground — TEXT-SAFE, never inverted (see below) */
--nc-2-ink:  #C2410C;
  --nc-3-ink:  #0F766E;
  --nc-f-ink:  #BE3455;
  --nc-m-ink:  #2563C9;

  /* curve colours: a refined rose/blue pair rather than nursery pink/blue.
     They still read instantly as girls/boys, which is the functional job. */
  --nc-f:      #E8548A;
  --nc-m:      #3C82D9;

  --nc-rule:   #EAE4F2;
  --nc-soft:   #F6F2FD;   /* tinted surface  */
  --nc-fg:    #241D33;
  /* TWO gradients. --nc-grad is DECORATIVE (ticks, ribbons, hero wash, the
     text-clipped numeral) and may end bright. --nc-grad-btn is for anything
     CARRYING WHITE TEXT: it ends on the ink coral so the label stays legible
     across the whole sweep. The shortlist button and the current-letter tile
     used --nc-grad and so had white text at 2.57:1 on their far end — the same
     failure the ink palette was introduced to stop, hiding inside a gradient. */
  --nc-grad:     linear-gradient(135deg, #6C4BD8 0%, #9B5FD0 45%, #FF7A59 100%);
  --nc-grad-btn: linear-gradient(135deg, #6C4BD8 0%, #7B3FA8 50%, #C2410C 100%);
  --nc-shadow: 0 1px 2px rgba(36,29,51,.05), 0 8px 24px -8px rgba(108,75,216,.18);
  --nc-shadow-lift: 0 2px 6px rgba(36,29,51,.07), 0 18px 44px -14px rgba(108,75,216,.32);
  --nc-r:      18px;      /* the corner radius that sets the whole tone */
}
@media (prefers-color-scheme: dark) {
  :root {
    --nc: #A78BFA; --nc-deep: #C4B5FD; --nc-2: #FF9878; --nc-3: #34D3C2;
    --nc-rule: #3B3350; --nc-soft: #241E38; --nc-fg: #EDE9F7;
    --nc-f: #FF7BA8; --nc-m: #6BA6F0;
    --nc-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.5);
    --nc-shadow-lift: 0 2px 6px rgba(0,0,0,.35), 0 18px 44px -14px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --nc: #A78BFA; --nc-deep: #C4B5FD; --nc-2: #FF9878; --nc-3: #34D3C2;
  --nc-rule: #3B3350; --nc-soft: #241E38; --nc-fg: #EDE9F7;
  --nc-f: #FF7BA8; --nc-m: #6BA6F0;
}
:root[data-theme="light"] {
  --nc: #6C4BD8; --nc-deep: #4B31A8; --nc-2: #FF7A59; --nc-3: #17B3A3;
  --nc-rule: #EAE4F2; --nc-soft: #F6F2FD; --nc-fg: #241D33;
  --nc-f: #E8548A; --nc-m: #3C82D9;
}

/* --- section heads: a coloured tick, not a ledger rule -------------------- */
.nc-h {
  position: relative; padding-left: .85rem; margin-top: 2.8rem;
  letter-spacing: -.015em;
}
.nc-h::before {
  content: ""; position: absolute; left: 0; top: .18em; bottom: .18em;
  width: 5px; border-radius: 99px; background: var(--nc-grad);
}

/* --- THE SET PIECE: the record card, now a bright hero ------------------- */
.nc-record {
  border: 1px solid var(--nc-rule);
  border-radius: var(--nc-r);
  padding: clamp(1.2rem, 3.5vw, 2.3rem);
  margin: 1.2rem 0 2rem;
  background:
    radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--nc) 11%, transparent) 0%, transparent 58%),
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--nc-2) 13%, transparent) 0%, transparent 55%),
    var(--nc-soft);
  box-shadow: var(--nc-shadow);
  position: relative; overflow: hidden;
}
/* the ribbon that makes it feel designed rather than boxed */
.nc-record::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: var(--nc-grad);
}
.nc-stamp {
  font: 650 .72rem/1 Inter, system-ui, sans-serif; letter-spacing: .1em;
  text-transform: uppercase; color: var(--nc-deep);
  display: inline-flex; gap: .45rem; align-items: center; flex-wrap: wrap;
  margin: .25rem 0 .9rem;
  background: color-mix(in srgb, var(--nc) 12%, transparent);
  padding: .4rem .75rem; border-radius: 99px;
}
.nc-stamp i { width: 15px; height: 15px; display: inline-block; }
.nc-answer {
  font-family: Fraunces, Georgia, serif; font-weight: 600;
  font-size: clamp(3rem, 11vw, 5.4rem); line-height: .92;
  letter-spacing: -.035em; margin: 0;
  background: var(--nc-grad); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}
/* the gradient text must not disappear if background-clip is unsupported */
@supports not (background-clip: text) { .nc-answer { color: var(--nc-deep); } }
.nc-answer sup { font-size: .4em; vertical-align: .68em; letter-spacing: 0; }
.nc-qual {
  font: 500 1rem/1.55 Inter, system-ui, sans-serif;
  color: var(--muted, #6b6478); margin: .65rem 0 0; max-width: 48ch;
}
.nc-qual a { color: var(--nc-deep); text-decoration-thickness: 2px; text-underline-offset: 2px; }

/* --- charts -------------------------------------------------------------- */
/* THE DRAWING HAND — a registrar's ledger, not an instrument panel.
   Ruled horizontals run the full width of the plot; the left gutter carries a
   margin rule; strokes have SQUARE terminals and mitred joins. That hand is
   deliberately unlike any sibling's: `grow` owns shaded percentile channels,
   the global ring owns round-cap instrument strokes. There is exactly ONE
   shaded region on a NameCurve chart and it always means the same thing —
   the registrar published nothing here. */
.chart { margin: 1.5rem 0 .4rem; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .gl { stroke: var(--nc-rule); stroke-width: 1; }
.chart .gh { stroke-dasharray: 2 4; }

/* ledger rules: the full-width horizontals + the left margin rule */
.chart .led  { stroke: var(--nc-rule); stroke-width: 1; }
.chart .ledb { stroke: color-mix(in srgb, var(--nc-fg) 42%, transparent); stroke-width: 1.2; }
.chart .ledm { stroke: color-mix(in srgb, var(--nc-2) 55%, transparent); stroke-width: 1.2; }

/* THE REPORTING FLOOR. The one shaded region. Everything under this line is
   territory the registrar does not publish — so a curve that ends here has
   left the record, it has not fallen to zero. Drawn from the real year totals
   (five births was 5.5 per 100,000 in 1880 and 0.3 today), which is why it
   slopes. Hatched rather than solid so it never reads as data. */
.chart .fl {
  fill: color-mix(in srgb, var(--nc-fg) 13%, transparent);
}
.chart .fle {
  stroke: color-mix(in srgb, var(--nc-fg) 45%, transparent);
  stroke-width: 1; stroke-dasharray: 4 3;
}
.chart .flx {
  font: 700 8.5px/1 ui-monospace, "SF Mono", Consolas, Menlo, monospace;
  letter-spacing: .09em; fill: var(--muted, #6b6478);
}
/* the suppressed years, marked ON the floor line instead of skipped silently */
.chart .gapx { fill: color-mix(in srgb, var(--nc-fg) 50%, transparent); }
@media (prefers-color-scheme: dark) {
  .chart .fl  { fill: color-mix(in srgb, var(--nc-fg) 10%, transparent); }
}
.chart .ax {
  font: 600 11px/1 Inter, system-ui, sans-serif;
  fill: var(--muted, #6b6478); text-anchor: middle;
}
.chart .ay { text-anchor: end; }
.chart figcaption {
  font: 500 .82rem/1.55 Inter, system-ui, sans-serif;
  color: var(--muted, #6b6478); margin-top: .6rem;
}
.chart .pk { stroke: var(--nc-2); stroke-width: 1.5; stroke-dasharray: 3 3; }
.chart .pkd { fill: var(--nc-2); }
.chart .pkl {
  font: 700 11px/1 Inter, system-ui, sans-serif; fill: var(--nc-2);
  letter-spacing: .06em; text-transform: uppercase;
}
.legend {
  display: flex; gap: .6rem; flex-wrap: wrap;
  font: 600 .82rem/1 Inter, system-ui, sans-serif; margin: .5rem 0 .1rem;
}
.legend span {
  display: inline-flex; align-items: center; gap: .45rem;
  background: color-mix(in srgb, currentColor 9%, transparent);
  padding: .35rem .7rem; border-radius: 99px;
}
.legend i { width: 12px; height: 12px; border-radius: 99px; display: inline-block; }

/* --- stat tiles: rounded, tinted, each with its own accent --------------- */
.statrow {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  gap: .7rem; margin: 1.4rem 0; border: 0;
}
.stat {
  padding: .95rem 1rem; min-width: 0;
  border: 1px solid var(--nc-rule); border-radius: 14px;
  background: var(--card, transparent);
  transition: transform .16s ease, box-shadow .16s ease;
}
.stat:nth-child(5n+1) { border-top: 3px solid var(--nc); }
.stat:nth-child(5n+2) { border-top: 3px solid var(--nc-2); }
.stat:nth-child(5n+3) { border-top: 3px solid var(--nc-3); }
.stat:nth-child(5n+4) { border-top: 3px solid var(--nc-4); }
.stat:nth-child(5n+5) { border-top: 3px solid var(--nc-f); }
.stat:hover { transform: translateY(-2px); box-shadow: var(--nc-shadow); }
.stat b {
  display: block; font-family: Fraunces, Georgia, serif; font-size: 1.62rem;
  font-weight: 600; line-height: 1.08; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.stat span {
  display: block; font: 500 .77rem/1.4 Inter, system-ui, sans-serif;
  color: var(--muted, #6b6478); margin-top: .3rem;
}

/* --- shortlist: the friendliest thing on the page ------------------------ */
.shortlist {
  border: 1px dashed color-mix(in srgb, var(--nc) 40%, transparent);
  border-radius: var(--nc-r); padding: .85rem 1rem;
  display: flex; gap: .8rem; align-items: center; flex-wrap: wrap;
  margin: 1.3rem 0; background: color-mix(in srgb, var(--nc) 5%, transparent);
}
.sl-btn {
  font: 700 .92rem/1 Inter, system-ui, sans-serif; cursor: pointer;
  border: 0; background: var(--nc-grad-btn); color: #fff;
  border-radius: 99px; padding: .72rem 1.2rem;
  box-shadow: 0 2px 10px -2px rgba(108,75,216,.5);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s;
}
.sl-btn:hover { transform: translateY(-1px); box-shadow: var(--nc-shadow-lift); }
.sl-btn:active { transform: translateY(0); }
.sl-btn[aria-pressed="true"] {
  background: none; background-color: color-mix(in srgb, var(--nc-3) 18%, transparent);
  color: var(--nc-fg); box-shadow: none;
  border: 1px solid color-mix(in srgb, var(--nc-3) 55%, transparent);
}

/* --- tables -------------------------------------------------------------- */
.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tbl th, .tbl td { text-align: left; padding: .62rem .7rem; border-bottom: 1px solid var(--nc-rule); }
.tbl thead th {
  font: 700 .72rem/1 Inter, system-ui, sans-serif; letter-spacing: .09em;
  text-transform: uppercase; color: var(--nc-deep);
  background: color-mix(in srgb, var(--nc) 7%, transparent);
}
.tbl thead th:first-child { border-radius: 10px 0 0 0; }
.tbl thead th:last-child { border-radius: 0 10px 0 0; }
.tbl td.n, .tbl th.n { text-align: right; }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--nc) 5%, transparent); }
.scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* grid children default to min-width:auto, so a wide table pushes the whole
   page sideways on mobile — the CoverCheck lesson, guarded here. */
.with-rail > * { min-width: 0; }

.absent { color: var(--muted, #6b6478); font-style: italic; }

/* --- cards: rounder, lifting, colour-cycled ------------------------------ */
.cardgrid .card {
  border-radius: 16px; transition: transform .16s ease, box-shadow .16s ease, border-color .16s;
}
.cardgrid .card:hover {
  transform: translateY(-3px); box-shadow: var(--nc-shadow-lift);
  border-color: color-mix(in srgb, var(--nc) 45%, transparent);
}

/* --- the compare bench --------------------------------------------------- */
.cmp-bar { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; margin: .9rem 0; }
.cmp-bar input {
  font: 500 1rem/1 Inter, system-ui, sans-serif; padding: .78rem 1rem;
  border: 1.5px solid var(--nc-rule); border-radius: 99px; background: transparent;
  color: inherit; min-width: min(280px, 100%);
  transition: border-color .16s, box-shadow .16s;
}
.cmp-bar input:focus {
  outline: 0; border-color: var(--nc);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--nc) 18%, transparent);
}
/* The chip is a FILLED pill: white label on the series colour. The JS sets
   `background` inline from the AA-safe ink palette. It was previously setting
   `color`, which left the chip transparent and rendered bright text on paper
   at 3.6-4.1:1 — under AA for body text. */
.cmp-chip {
  display: inline-flex; align-items: center; gap: .45rem; border-radius: 99px;
  padding: .42rem .55rem .42rem .85rem; font: 700 .88rem/1 Inter, sans-serif;
  border: 0; color: #fff;
}
.cmp-chip button {
  border: 0; background: rgba(255,255,255,.28); color: inherit; cursor: pointer;
  font-size: .95rem; line-height: 1; padding: .1rem .32rem; border-radius: 99px;
}
.cmp-sug {
  position: absolute; z-index: 20; background: var(--paper, #fff);
  border: 1px solid var(--nc-rule); border-radius: 14px; margin-top: .3rem;
  max-height: 280px; overflow: auto; min-width: 280px;
  box-shadow: var(--nc-shadow-lift); padding: .3rem;
}
.cmp-sug button {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  color: inherit; padding: .58rem .8rem; cursor: pointer; border-radius: 10px;
  font: 550 .95rem/1.2 Inter, system-ui, sans-serif;
}
.cmp-sug button:hover { background: color-mix(in srgb, var(--nc) 12%, transparent); }
.cmp-wrap { position: relative; }

/* --- related names: colourful pills -------------------------------------- */
.nc-rel { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.nc-rel a {
  border: 1px solid var(--nc-rule); border-radius: 99px; padding: .55rem .95rem;
  font: 600 .95rem/1 Inter, system-ui, sans-serif; text-decoration: none;
  display: inline-flex; gap: .5rem; align-items: baseline;
  transition: transform .14s ease, border-color .14s, background .14s;
}
.nc-rel a:nth-child(4n+1):hover { background: color-mix(in srgb, var(--nc) 13%, transparent); }
.nc-rel a:nth-child(4n+2):hover { background: color-mix(in srgb, var(--nc-2) 15%, transparent); }
.nc-rel a:nth-child(4n+3):hover { background: color-mix(in srgb, var(--nc-3) 15%, transparent); }
.nc-rel a:nth-child(4n+4):hover { background: color-mix(in srgb, var(--nc-4) 18%, transparent); }
.nc-rel a:hover { transform: translateY(-2px); border-color: transparent; }
.nc-rel a em {
  font-style: normal; font-size: .8rem; color: var(--muted, #6b6478);
  font-variant-numeric: tabular-nums;
}

/* --- letter index: a colourful alphabet --------------------------------- */
.nc-alpha { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.1rem 0 1.6rem; }
.nc-alpha a, .nc-alpha strong {
  width: 2.9rem; height: 2.9rem; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 1.05rem/1 Inter, system-ui, sans-serif; text-decoration: none;
  border: 1px solid var(--nc-rule); transition: transform .14s, box-shadow .14s;
}
.nc-alpha a:nth-child(5n+1) { background: color-mix(in srgb, var(--nc)   10%, transparent); }
.nc-alpha a:nth-child(5n+2) { background: color-mix(in srgb, var(--nc-2) 12%, transparent); }
.nc-alpha a:nth-child(5n+3) { background: color-mix(in srgb, var(--nc-3) 12%, transparent); }
.nc-alpha a:nth-child(5n+4) { background: color-mix(in srgb, var(--nc-4) 14%, transparent); }
.nc-alpha a:nth-child(5n+5) { background: color-mix(in srgb, var(--nc-f) 11%, transparent); }
.nc-alpha a:hover { transform: translateY(-2px); box-shadow: var(--nc-shadow); }
.nc-alpha strong { background: var(--nc-grad-btn); color: #fff; border-color: transparent; }

/* --- homepage hero ------------------------------------------------------- */
.nc-hero {
  border-radius: 24px; padding: clamp(1.6rem, 5vw, 3.2rem);
  background:
    radial-gradient(90% 130% at 8% 0%, color-mix(in srgb, var(--nc) 16%, transparent) 0%, transparent 60%),
    radial-gradient(90% 120% at 100% 10%, color-mix(in srgb, var(--nc-2) 16%, transparent) 0%, transparent 58%),
    radial-gradient(70% 110% at 60% 100%, color-mix(in srgb, var(--nc-3) 13%, transparent) 0%, transparent 60%),
    var(--nc-soft);
  border: 1px solid var(--nc-rule); margin-bottom: 1.6rem;
}
.nc-hero h2 { margin-top: 0; }
.nc-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }
.nc-pills a {
  padding: .6rem 1.05rem; border-radius: 99px; text-decoration: none;
  font: 650 .95rem/1 Inter, system-ui, sans-serif; color: #fff;
  transition: transform .14s, box-shadow .14s;
}
.nc-pills a:hover { transform: translateY(-2px); box-shadow: var(--nc-shadow-lift); }
/* --nc-1-ink, NOT --nc. DESIGN-MODERNISATION-2026-08 §3.4: --nc inverts to a
   light tint (#A78BFA) in dark mode, and this pill carries WHITE text — it was
   measuring 2.72:1 in a real browser while the other three (which already use
   -ink tokens) were fine. The -ink cut is the same violet in both themes,
   which is the whole point of the suffix. Registered in contrast-check.mjs. */
.nc-pills a:nth-child(4n+1) { background: var(--nc-1-ink); }
.nc-pills a:nth-child(4n+2) { background: var(--nc-2-ink); }
.nc-pills a:nth-child(4n+3) { background: var(--nc-3-ink); }
.nc-pills a:nth-child(4n+4) { background: var(--nc-f-ink); }

/* --- confident emptiness ------------------------------------------------- */
.nc-breathe { padding: clamp(2.2rem, 7vw, 4.5rem) 0; }

/* ==========================================================================
   AAA+++ MECHANICS, adopted into NameCurve's own identity (2026-08-04)

   The shared mechanics layer (datasite.css §20) is Identity A's austere
   register. NameCurve deliberately departs from that palette on audience
   grounds — so the mechanics are ADOPTED, not the skin: the answer block, the
   mono spec voice, tabular numerals, the keel, the reveal choreography and the
   breathe all apply, re-expressed in violet/coral rather than warm paper.
   ========================================================================== */

/* §20.10 unboxes `.answer.aaa`. Here the record card IS the answer block, and
   its box is the set piece's frame — so restore the frame and, crucially,
   restore the gradient numeral that `.answer .stat-display` (0,2,0) would
   otherwise overrule back to flat ink at the shared display size. */
.answer.nc-record { background: var(--nc-soft); border: 1px solid var(--nc-rule); padding: clamp(1.2rem, 3.5vw, 2.3rem); border-radius: var(--nc-r); }
.answer .nc-answer, .answer p.nc-answer {
  font-size: clamp(3rem, 11vw, 5.4rem); line-height: .92;
  color: transparent; font-weight: 600;
  font-variation-settings: normal;
}
@supports not (background-clip: text) { .answer .nc-answer { color: var(--nc-deep); } }
/* the mono unit that rides the display numeral (§20.2 `.stat-display .u`) */
.nc-answer .u {
  display: block; margin: .55rem 0 0;
  font: 650 .72rem/1.4 ui-monospace, "SF Mono", Consolas, Menlo, monospace;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted, #6b6478); vertical-align: baseline;
  -webkit-text-fill-color: var(--muted, #6b6478);
}
.answer.nc-record > .srcline { margin-top: 1.1rem; border-top-color: var(--nc-rule); }

/* The keel. Identity A draws a 44x2 accent rule above every h2.sec; NameCurve
   already draws a full-height gradient tick to the LEFT of the head (.nc-h),
   which is the same datum idea in this site's hand. Suppress the shared rule
   only where the site's own mark is present, so the two never double up. */
h2.sec.nc-h::before { display: none; }

/* A heading the contract needs and the design does not: the hero IS the
   answer, so its h2 is present for the outline and hidden from the eye. */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* table caption + the mono vintage chip (§4) */
.nc-cap {
  caption-side: top; text-align: left; padding: 0 0 .55rem;
  font: 600 .84rem/1.4 Inter, system-ui, sans-serif; color: var(--muted, #6b6478);
}
.nc-cap .vintage {
  display: inline-block; margin-left: .5rem; padding: 2px 7px;
  border: 1px solid var(--nc-rule); border-radius: 8px;
  font: 650 .68rem/1.5 ui-monospace, "SF Mono", Consolas, Menlo, monospace;
  letter-spacing: .09em; text-transform: uppercase;
}

/* the method mini-spec, in this site's palette rather than hairline grey */
.method { margin: 2rem 0; }
.method ol { list-style: none; margin: 0; padding: 0; counter-reset: mstep; }
.method li {
  counter-increment: mstep; position: relative;
  border-top: 1px solid var(--nc-rule); padding: .95rem 0 .95rem 2.6rem;
  font-size: .96rem; line-height: 1.6;
}
.method li::before {
  content: counter(mstep); position: absolute; left: 0; top: .95rem;
  width: 1.75rem; height: 1.75rem; border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 .78rem/1 ui-monospace, "SF Mono", Consolas, Menlo, monospace;
  background: color-mix(in srgb, var(--nc) 13%, transparent); color: var(--nc-deep);
}
.method .formula {
  margin: 1rem 0 .2rem; padding: .85rem 1rem; border-radius: 12px;
  background: color-mix(in srgb, var(--nc) 7%, transparent);
  border: 1px solid var(--nc-rule); overflow-x: auto;
  font: 500 .8rem/1.7 ui-monospace, "SF Mono", Consolas, Menlo, monospace;
  white-space: pre-wrap;
}

/* the FAQ — §6.2 wants it visible wherever FAQPage is emitted */
.nc-faq details {
  border: 1px solid var(--nc-rule); border-radius: 14px;
  padding: .85rem 1.1rem; margin: .55rem 0;
  background: color-mix(in srgb, var(--nc) 4%, transparent);
}
.nc-faq summary {
  cursor: pointer; font: 650 1rem/1.45 Inter, system-ui, sans-serif;
  color: var(--nc-fg);
}
.nc-faq summary::marker { color: var(--nc); }
.nc-faq p { margin: .6rem 0 0; color: var(--muted, #6b6478); line-height: 1.6; }

/* §3.6 the underline that draws, in violet */
a.draw {
  text-decoration: none;
  background: linear-gradient(var(--nc), var(--nc)) 0 100% / 0 1.5px no-repeat;
  transition: background-size .22s cubic-bezier(.25, 1, .4, 1);
}
a.draw:hover, a.draw:focus-visible { background-size: 100% 1.5px; }

/* §3.4 anything a reader compares */
.num, td.n, th.n, .tbl td, .tbl th { font-variant-numeric: tabular-nums lining-nums; }
.stat b.num { font-variant-numeric: tabular-nums lining-nums; }

/* §3.7 entrance choreography — above the fold only, and only for readers who
   have not asked for less motion. Server-rendered content is visible by
   default; the animation starts FROM visible when motion is reduced. */
@media (prefers-reduced-motion: no-preference) {
  .reveal, .reveal-2, .reveal-3 { animation: nc-rise .42s cubic-bezier(.25, 1, .4, 1) both; }
  .reveal-2 { animation-delay: 60ms; }
  .reveal-3 { animation-delay: 120ms; }
  @keyframes nc-rise { from { opacity: 0; transform: translateY(10px); } }
}

/* --- touch targets ------------------------------------------------------
   Measured on the built page: the shortlist button came out at 39.8px and the
   related-name pills at 35.4px. Both are under the 44px minimum, on a site
   whose readers are overwhelmingly one-handed on a phone. Raise every tappable
   pill on coarse pointers only, so the desktop rhythm is untouched. */
@media (pointer: coarse) {
  .sl-btn, .nc-rel a, .nc-pills a, .cmp-sug button, .cmp-chip {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .nc-alpha a, .nc-alpha strong { width: 3rem; height: 3rem; }
  .cmp-chip button { min-width: 30px; min-height: 30px; justify-content: center; }
}

/* --- motion respect ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .stat, .sl-btn, .cardgrid .card, .nc-rel a, .nc-alpha a, .nc-pills a { transition: none; }
  .stat:hover, .sl-btn:hover, .cardgrid .card:hover, .nc-rel a:hover,
  .nc-alpha a:hover, .nc-pills a:hover { transform: none; }
}

/* --- the hero set piece (DESIGN-MODERNISATION-2026-08 §3.3) --------------- */
/* Measured at 375x812 the first visual on this home page was at 3296px, on a
   site whose whole proposition is a drawn curve. This frames the miniature.
   Existing tokens only — no new colour pair enters the palette. */
.nc-heroset { margin: 1.1rem 0 0; padding: .9rem 1rem 1rem; border: 1px solid var(--nc-rule); border-radius: var(--nc-r); background: var(--nc-soft); }
.nc-heroset svg { display: block; width: 100%; height: auto; }
.nc-heroset-k { font: 650 .72rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--nc-deep); margin: 0 0 .4rem; }
.nc-heroset-n { font: 400 .86rem/1.5 Inter, system-ui, sans-serif; color: var(--nc-fg); margin: .5rem 0 0; }
.nc-heroset-n a { color: var(--nc-deep); text-decoration: none; border-bottom: 1px solid var(--nc-rule); }
.nc-heroset-n a:hover { border-bottom-color: var(--nc-deep); }