/* ─────────────────────────────────────────────────────────────────────────
     Nuqleus design system.
       #F4F5F7 paper · #EF5A5C signal red · Instrument Sans.
     The page is printed, not lit. It is deliberately achromatic — cool paper,
     press-black ink, an interface in black and white — with ONE hot accent in
     about six small marks per full scroll (the wordmark dot, the Listen button,
     the marker highlight, the takeaway rules, the player eyebrow). That ratio —
     ~97% ink and paper, ~3% accent — is what reads as calm and authoritative.
     The accent and the fire are ONE hue. The core is that signal red at full
     strength and the shells are the same red stepped down against the paper, all
     of it FLAT — solid fills and plain marks. So the nucleus is a printed
     diagram, not a lit one. The single exception is the RIM: the outermost shell
     is the one thing on the page allowed a gradient, because it has to dissolve
     into the paper instead of closing the chart with a hard circle. It is the
     same red as everything else — the fade is the treatment, not the hue.
     Heat is flat; the edge of the field is not an edge.
     What separates the core from the interface is therefore not hue but SCALE
     and PLACE: the accent is spent in about six small marks per scroll, and the
     core is the one large field of it on the page. (Until 2026-09 these were two
     hues told apart by treatment — a cool red that was always flat and an
     amber-orange fire that was always a glow. Both halves of that rule are gone;
     if a warm value turns up anywhere it is a leftover, not the system.)
     Three independent channels, never conflated (see README):
       urgency = distance from the core + heat   (--act … --dismiss)
       verdict = the arrow's SHAPE               (▲ ▬ ▼, no colour of its own)
       lens    = the marker's COLOUR             (--grow … --reinvent)
     Heat and lens are also told apart by ROLE, not only by hue: heat is only
     ever a tinted pill or a ring inside the core, lens is only ever a dot and
     an uppercase label.
     ───────────────────────────────────────────────────────────────────────── */
  :root{
    /* surfaces — cool paper, near white, three weights of it */
    --bg:#F4F5F7;            /* ground */
    --bg-hero:#E9EBEF;       /* one step darker than the sheet: the hero's only edge is this step */
    --bg-read:#FFFFFF;       /* analysis: the clean white sheet, the reading zone */
    --bg-card:#FFFFFF;
    --bg-card-2:#FAFBFC;
    --bg-note:#F8F9FA;       /* the key's closing note: off the card white, so it reads as the
                                quietest panel in the column rather than a fourth answer */
    --bg-raise:#EEF0F3;
    /* THE dark surface, and the only one. The footer is where the light site already goes
       dark, so the two full-screen visualizations sit on that same value rather than on a
       near-miss of it: two dark grounds a few points apart is what makes one publication read
       as two sites. Declared here so the footer and viz.css cannot drift apart again. */
    --bg-dark:#0E1218;
    /* three strengths of hairline, faintest first */
    --line-soft:rgba(16,21,28,.07);
    --line:rgba(16,21,28,.12);
    --line-2:rgba(16,21,28,.20);

    /* ink — press black, which is never neutral: it carries a little blue */
    --ink:#10151C;
    --ink-read:#232B36;      /* long-form body, one step off black so a long read isn't harsh */
    /* Contrast against the #F4F5F7 ground, measured: ink 16.9:1, ink-read 12.9:1, ink-2 9.1:1,
       muted 5.1:1, dim 3.3:1. --muted is the single token behind every secondary line on the
       page — section decks, readout summaries, dates, sources, the footer — so it is the one
       to move when the page reads faint, and moving it moves all of them together. */
    --ink-2:#39434F;
    --muted:#5F6975;
    --dim:#7E8894;
    --ink-inv:#FBFCFD;       /* type on an ink or ember fill */
    --wave-track:#AFB7C1;    /* the unplayed half of the waveform: lighter than --dim, which
                                carries text and cannot go this pale */

    /* the accent — a cool signal red, always flat, never warm-orange */
    --red:#EF5A5C;           /* solid blocks and marks, and display-size type */
    --red-ink:#CC3234;       /* the same red as SMALL TYPE: 4.7:1 on paper, the fill is only 3.2 */
    --red-deep:#A82527;      /* hover: on paper a control darkens, it does not brighten */
    --red-wash:rgba(239,90,92,.09);
    --red-line:rgba(239,90,92,.34);
    --red-mark:rgba(239,90,92,.22);   /* the marker-pen highlight */
    --red-glow:rgba(239,90,92,.05);

    /* the core = the accent, in FLAT steps. Every value is PRE-MIXED against the paper rather
       than being the red at an opacity: the nucleus paints its shells as four stacked discs, and
       four translucent discs compound into tones nobody chose — the outer ring would stop being
       the value it is named after the moment one more disc landed on top of it.
       --ember-4 is the floor for legibility: the ACT label rides it in --ink-2 at 5.3:1. */
    --ember:#EF5A5C;         /* the hue itself, = --red */
    /* The fire PEAKS AT THE ACT RING, not at the centre. The core is a white-hot point, the steps
       darken outward through it, the deepest ink lands exactly on ACT, and everything past ACT
       cools away. That is the shape the gradient this replaced had (near-white at 0%, #DA4A12 at
       28%, dying by the rim) and it is the shape the CHIPS have: ACT is the one that fills solid
       and reverses to white, so it has to be the darkest thing in the chart too. A ramp that ran
       simply darkest-at-centre put ACT third and disagreed with its own chip.
       So --ember-4 IS --act, the chip's value, not a tint of it. The inside reads point, step,
       peak — the old white/orange/red in this palette's terms. Outside the peak every value is
       --track mixed against the paper, at 26, 15 and 8%, cooling to nothing.
       Labels: ACT reverses to --ink-inv on the peak (6.9:1) — the same inversion its chip makes —
       and the outer three take press black (11.4, 13.5, 14.9:1). */
    --ember-1:#F1E5E7;       /* DISMISS — the rim, and the only thing on the page with a gradient */
    --ember-2:#EED8DA;       /* SCAN */
    --ember-3:#EAC2C4;       /* TRACK */
    --ember-4:#A82527;       /* ACT — the peak, and literally the ACT chip */
    --ember-5:#BA6C70;       /* the one step between the point and the peak — where the old fire
                                had its orange. NOT the brand red: at full accent strength this
                                ring fought the ACT peak beside it, and two loud reds touching
                                read as an error rather than a step. This is a dusty middle value,
                                dark enough to be a real step down from the peak and desaturated
                                enough not to compete with it. THREE levels inside the ACT ring and
                                no more: point, step, peak. Stepping it further only smuggles the
                                gradient back in as a staircase. */
    --ember-eye:#FFFFFF;     /* the point itself: white-hot, the one thing lighter than paper */

    /* urgency = heat, as worn by the READOUT chips — the same channel the nucleus draws as rings,
       so it is drawn in the same hue. The ramp is the accent cooling OUT OF ITSELF: two reds, and
       then it leaves the hue altogether for slate and grey, which is the chip-sized version of
       what the chart does when its rim dissolves into the paper. Nothing here is warm any more;
       an orange in this ramp is a leftover from the amber system, not a step.
       Three of the four are the page's own tokens rather than new values — deep red, small-type
       red, muted — so the ramp cannot drift away from the palette it belongs to.
       These are the LABEL values. Each one is worn as a chip whose background is the same hue at
       ~12%, so the friendly, light colour is the chip and the readable, deep one is the word —
       which is how a chip stays soft without going illegible. ACT is the exception: it fills
       solid and reverses to white, because it is the one that has to be loudest.
       Measured on their own tints: 4.3, 6.3 and 4.8:1, and white on the ACT fill is 6.9:1 —
       every one of them above the ramp this replaced, which topped out at 4.6 and bottomed at 4.0. */
    --act:#A82527;      /* = --red-deep, filled solid */
    --track:#CC3234;    /* = --red-ink */
    --scan:#4A5563;     /* out of the hue: cold slate */
    --dismiss:#5F6975;  /* = --muted, the ash end */

    /* lens = domain. Softer than the first jewel set — the deep crimsons and browns read as
       hard on a light page — and each one is worn as a chip on the same 12% tint. All four clear
       4.5:1 against the paper; against their own tint they land near 4.2. */
    --grow:#0E7C73; --optimize:#6547D6; --protect:#BE3455; --reinvent:#96690A;

    /* type */
    /* Two faces, which is a change of position: Geologica is the parent brand's, and moving off
       it leans Nuqleus toward being its own sub-brand. That question is still open — see the
       brand-hierarchy note. The pairing is the way a printed briefing is set: a display
       grotesque with personality for the headings, a quiet refined text face for everything that
       has to be read. Labels earn their voice from tracking, case and weight, never from a third
       family. The display face is a SERIF now, and serifs need room: every display tracking value
       in article.css was opened up when it changed, because the negative tracking that suited a
       grotesque jams a serif's brackets into its neighbours. Domine has no optical-size axis and
       a large x-height, so it sets sturdier and slightly wider than Newsreader did — the tracking
       comes back in a touch and the leading closes up to match. */
    --display:'Domine','Instrument Sans',Georgia,serif;
    --text:'Instrument Sans',system-ui,-apple-system,Segoe UI,sans-serif;
    --sans:var(--text);      /* label voice, and what the visualizations read */

    /* One radius for every rectangular surface on the site — tag, button, panel, tooltip, modal.
       Circles (the dot, the play control, the lens marks) and the square heat swatch are shapes,
       not surfaces, and keep theirs. */
    --radius:0.2rem;
    /* the key cards beside the nucleus, and only those: the reference they are cut from has a
       visibly rounded corner, and --radius at 0.2rem reads as a square one. Kept as its own
       token so the softer corner cannot leak into the chips, the panels or the player. */
    --radius-card:0.625rem;

    /* The hero's foot and the next band's head are the same value, so the gap between two
       sections is one number and cannot drift apart. */
    --band-gap:clamp(3.75rem,7.5vw,7rem);
    /* the measure of the page, declared once. .wrap is built from these two, and anything that
       has to line up with the column edge — the hero photograph, say — is built from them too,
       rather than from a number copied out of the .wrap rule and left to go stale. */
    --topbar-h:3.875rem;     /* the masthead's height, declared once: the hero's art reaches up
                                THROUGH the bar to the top of the page, so it has to know it */
    --wrap-max:80rem;
    --wrap-pad:clamp(1.25rem,4vw,3.25rem);
  }