/* ============================================================================
   georgy.finance — design system
   ----------------------------------------------------------------------------
   PAPER-FIRST. The previous system read as a luxury personal brand: black
   ground, billboard-scale Playfair, gold italic display lines, a shimmer sweep
   across every button. This one reads as a firm — white reading surface, light
   chrome, and one accent used with restraint.

   THE TOKEN RULE: no page may introduce its own spacing, type or colour value.
   Everything a page needs is a token or a component below. If something is
   missing, add it HERE — never in a page.

   Band model
     .band            paper (the default; most content lives here)
     .band--alt       paper, subtly tinted, for alternating adjacent sections
   The chrome is light too (owner 2026-08-31): the header is paper, the footer
   is the alt tint over a hairline. Black survives as an ink colour, not as a
   surface — there is no black band anywhere on the site.

   THE COLOUR LAW (owner 2026-08-31, following rolex.com)
   Gold is not in this stylesheet. It exists in exactly one place on the whole
   site — the logo artwork under images/, which carries its own dark ground.
   That is the model: on rolex.com the crown is the only gold on the page.
   Do not reintroduce a gold token. If something needs an accent, it is green.

   --green #006039 is now the entire accent, in every role: brand, interaction,
   hover, focus, fill and outcome. Measured 7.69:1 on paper, 7.05:1 on the alt
   band, and 7.69:1 with white on top of it — so unlike gold it is free to be
   text, a fill or a rule. The old "gold is a FILL, never text" law existed only
   because gold could not carry contrast on white; it retired with the colour
   that needed it.

   Green is used with restraint, the way the reference does: nav hover and the
   current page, the primary button, kickers, focus, and outcome. It is not a
   background for whole sections.

   --caution #8c4f0a is NOT brand colour. It is the middle tier of the
   calculators' red-amber-green scale. It is deliberately a burnt amber and NOT
   the old --gold-dk #7d6720: keeping that hex under a new name would have been
   gold surviving by relabelling, and scripts/harness/layout.mjs correctly
   failed it. 5.95:1 on the alt band, sitting between green 7.05 and red 8.72.

   EDITORIAL PRECISION (2026-08-29). Large, confident type on white; generous
   margins; hairlines in three roles only (kicker, row divider, one ink rule
   above a cell); tabular numerals; figures in display sizes with a monospace
   unit; the footer set as a colophon. Cards are ruled cells, not boxes — no
   shadow, no radius, no coloured border.
   ========================================================================== */

:root{
  /* --- ground -------------------------------------------------------------- */
  --paper:#ffffff;         /* primary reading surface */
  --paper-alt:#f6f5f2;     /* alternating band, warm so it reads as paper not grey */
  --paper-deep:#edeae4;    /* callouts, table headers */
  /* --black / --black-2 removed 2026-08-31. The header and footer went light,
     which left nothing on the site standing on a dark surface. Black lives on
     only as ink (--ink #0f1114). Do not reintroduce a dark ground without also
     reintroducing an on-dark text scale — the light-on-light regression this
     caused is exactly what scripts/harness/layout.mjs caught. */

  /* --- ink ----------------------------------------------------------------- */
  --ink:#0f1114;           /* headings on paper */
  --ink-body:#22262b;      /* body copy on paper — 13.9:1 on white */
  --ink-mute:#4a4f56;      /* secondary copy — 8.6:1 on white */
  --ink-faint:#55595f;     /* labels, meta — 7.2:1. Was #868b92 (3.4:1), which failed. */

  /* --- accent: green, and green only (owner 2026-08-31) --------------------
     Gold left the stylesheet entirely. It survives in exactly one place — the
     logo artwork (images/*.png), which carries its own dark ground. That is
     the rolex.com model: the crown is the only gold on the page.
     Green is now the WHOLE accent: brand, interaction, hover, focus, outcome.
     It is a text colour, a fill and a rule — the old "gold is a fill, never
     text" law existed because gold could not carry contrast on paper. Green
     can, so the law retires with the colour that needed it. */
  --green:#006039;         /* 7.69:1 on paper, 7.05:1 on the alt band, 7.69:1 under white */
                           /* NOT for figures. Prices and calculator answers are
                              INK: they are facts, not outcomes, and rolex.com
                              runs ~3:1 foreground-to-background — green earns its
                              weight by staying on interaction. Reverted 2026-08-31
                              after being tried on .fee-n/.svc-price-n/.guide-price/
                              .result-big-value; do not re-colour them. */
  --green-dk:#004a2c;      /* a green fill DARKENS under the pointer. rolex.com does the
                              same (--gradient-dark-green-*); it never lightens. */
  --green-tint:#eaf3ef;    /* success panel fill */
  --green-line:#a9cdbd;    /* success panel border */

  /* --- state: the calculators' three-tier scale ---------------------------
     Not brand colour. The middle tier of red-amber-green sits between --green
     (safe) and the warning red. A burnt amber, deliberately not the retired
     gold — see the colour law above. Merging it into green would collapse two
     tiers of a scale the calculators actually compute. */
  --caution:#8c4f0a;

  /* --- rules --------------------------------------------------------------- */
  --rule:rgba(20,22,26,.11);
  --rule-mid:rgba(20,22,26,.2);
  --rule-strong:rgba(20,22,26,.34);
  --rule-head:rgba(20,22,26,.14);  /* the hairline under the header bar */

  /* --- spacing scale ------------------------------------------------------- */
  --s1:.3rem; --s2:.55rem; --s3:.9rem; --s4:1.3rem; --s5:1.9rem; --s6:2.8rem; --s7:3.6rem; --s8:4.8rem;
  --band-y:clamp(2.4rem,4vw,3.4rem);   /* one rhythm between sections: small-to-medium (owner, 2026-08-29) */
  --band-y-tight:clamp(1.3rem,2.2vw,1.8rem); /* the tight rhythm — a band that is one short line of content (owner 2026-08-31) */
  --gutter:clamp(1.2rem,5vw,2.6rem);
  --wrap-max:1120px;
  /* Measures: running text, ledes, fee notes; column widths for the article
     and the form pages. Editorial precision (2026-08-29). */
  --measure:66ch;
  --measure-lede:52ch;
  --measure-note:44ch;
  --col-read:45rem;
  --col-form:40rem;
  --btn-min:8.5rem;

  /* --- motion (2026-08-29, modern premium) --------------------------------
     One easing for everything that settles, one spring for the rare pop,
     three durations. Every transition and animation on the site is built from
     these; prefers-reduced-motion turns them all off in one block at the end. */
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --dur-1:160ms; --dur-2:220ms; --dur-3:420ms;
  /* How long the workflow player holds each step. Read by js/own.js through
     getComputedStyle, so the timer and the progress bar cannot drift apart. */
  --wf-step:4200ms;
  --lift:-3px;
  /* the 2026-08-29 composition tokens (stack, rail, float, tilt) left on 2026-08-30 with the rules that used them */
  --head-h:74px;           /* the header bar; compacts to --head-h-compact on scroll */
  --head-h-compact:60px;

  /* --- hairlines (2026-08-29) ---------------------------------------------
     Whole border values, so a rule is one token. Three roles only: the
     kicker under a section (mid), row dividers in lists (rule), and ONE ink
     rule above a card, figure or column (ink). Never four sides. */
  --hairline:1px solid var(--rule);
  --hairline-mid:1px solid var(--rule-mid);
  --hairline-ink:1px solid var(--ink);

  /* --- surfaces (2026-08-28) --------------------------------------------------
     Radius and elevation, new to this system. The owner pointed at
     beautifului.dev / transitions.dev: rounded cards on a light ground with a
     hairline and a soft shadow, gliding hover, rolling numbers. Gold stays a
     fill. Black stays chrome. */
  /* Corners are square to match the buttons (owner, 2026-08-28); the tokens
     stay so a later decision is one line. */
  --radius-lg:0;
  --radius:0;
  --radius-sm:0;
  /* Depth (2026-08-29): two layers — a tight ambient shadow that seats the
     card, and a soft key shadow that lifts it. Hover moves up one step. */
  --shadow-sm:0 1px 2px rgba(11,12,14,.06),0 4px 10px -6px rgba(11,12,14,.12);
  --shadow:0 1px 2px rgba(11,12,14,.05),0 10px 24px -12px rgba(11,12,14,.18),0 24px 48px -28px rgba(11,12,14,.14);
  --shadow-lg:0 2px 4px rgba(11,12,14,.06),0 18px 36px -16px rgba(11,12,14,.24),0 40px 64px -32px rgba(11,12,14,.22);

  /* --- type ---------------------------------------------------------------- */
  /* One grotesque for everything, its monospace sibling for labels and figures.
     Playfair Display is gone: a didone display serif reads as fashion, not
     finance, and it was the loudest thing on the old site. */
  --disp:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --body:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  /* Interface labels — nav, eyebrows, buttons, form labels, meta. Sans, not
     monospace: the old setting read as a terminal rather than a publication. */
  --mono:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --figure:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  /* Display sizes sit below the old ceiling (was 5rem/80px). Institutional
     pages do not shout; the substance has to carry the page. Raised 2026-08-28
     (h1 2.85 → 3.75rem, h2 1.95 → 2.3rem): the homepage statement now carries
     the page on its own, with no image beside it. */
  /* Editorial precision (2026-08-29): a full scale, every role named. The h1
     is confident (46px on a phone, 72px on a desk) with tight leading; list and
     card titles share one h3; figures get display sizes of their own. */
  --t-h1:clamp(2.75rem,2rem + 3.6vw,4.5rem);        /* 46px @390 · 72px @1440 */
  --t-h2:clamp(1.75rem,1.35rem + 1.7vw,2.6rem);     /* 28px · 41.6px */
  --t-h3:clamp(1.25rem,1.1rem + .75vw,1.625rem);    /* 20px · 26px — every card/list title */
  --t-display:clamp(2.75rem,2rem + 3.2vw,4.25rem);  /* the page-level fee figure */
  --t-figure:clamp(1.75rem,1.3rem + 2vw,3rem);      /* in-card figure */
  --t-display-xl:clamp(5rem,3rem + 10vw,9rem);      /* 404 only */
  --t-lede:clamp(1.1rem,1.02rem + .4vw,1.3rem);     /* page-sub, lede, quote */
  --t-prose:1.125rem;                               /* article body */
  --t-body:1.0625rem;
  --t-fact:clamp(1.625rem,1.225rem + 1.7vw,2.475rem); /* the 3 stats: --t-h2 minus 2px (owner 2026-08-30) */
  --t-fact-s:1.125rem;     /* phone stats: --t-h3 minus 2px */
  --t-sm:.9375rem;
  --t-meta:.8125rem;                                /* running meta: disclaimers, form notes */
  --t-label:.6875rem;                               /* uppercase labels */
  --lh-display:1.02; --lh-h2:1.12; --lh-h3:1.25; --lh-lede:1.5; --lh-body:1.6; --lh-prose:1.7; --lh-label:1.4;
  --track-display:-.025em; --track-h2:-.02em; --track-h3:-.01em; --track-figure:-.03em; --track-label:.12em;

  /* --- back-compat aliases (older rules/pages still reference these) -------- */
  --hair:var(--rule-head); --hair-d:var(--rule);
}