/* ═══════════════════════════════════════════════════════════════════════════
   NOVUS — DESIGN TOKENS
   The public site runs on one system. Nothing below is decorative: every
   colour carries meaning, every size is fluid AND capped, every radius is
   deliberate. If a value is not here, it does not belong in the site.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{

  /* ── SURFACE ──────────────────────────────────────────────────────────────
     Near-black with a blue undertone, so the site sits in the same family as
     the NOVUS mark without ever reading as "blue". Three steps only. */
  --black:#07080A;
  --bg:#0A0B0E;
  --bg-2:#0D0F13;
  --bg-3:#12141A;
  --navy:#0E2456;

  /* ── INK ──────────────────────────────────────────────────────────────────
     Warm off-white. Warmth is what stops a dark site feeling clinical. */
  --ink:#F1EDE6;
  --ink-2:rgba(241,237,230,.70);
  --ink-3:rgba(241,237,230,.48);
  --ink-4:rgba(241,237,230,.31);
  --ink-5:rgba(241,237,230,.17);

  /* ── HAIRLINES ────────────────────────────────────────────────────────────
     Structure comes from 1px rules, not from boxes. */
  --hair:rgba(241,237,230,.085);
  --hair-2:rgba(241,237,230,.14);
  --hair-soft:rgba(241,237,230,.05);

  /* ── MEANING ──────────────────────────────────────────────────────────────
     blue    NOVUS / intelligence / system / active state
     amber   an opportunity that exists and is not yet progressed
     red     a genuine miss or risk — used sparingly, never for emphasis
     Nothing else is coloured. Ever.

     The blue is drawn from the canonical mark, then pulled back: the logo is
     allowed to be vivid, the interface around it is not. --blue-vivid exists
     only for the few places that sit directly against the mark. */
  --blue:#4E9BFF;
  --blue-hi:#93C4FF;
  --blue-vivid:#1E82FA;
  --blue-deep:#0B4ED6;
  --blue-dim:rgba(78,155,255,.58);
  --blue-tint:rgba(78,155,255,.072);
  --blue-line:rgba(78,155,255,.30);

  --amber:#D6A76B;
  --amber-tint:rgba(214,167,107,.075);
  --amber-line:rgba(214,167,107,.28);

  --red:#C5817A;
  --red-tint:rgba(197,129,122,.07);
  --red-line:rgba(197,129,122,.26);

  /* ── TYPE FACES ───────────────────────────────────────────────────────────
     Fraunces carries every major statement. Inter carries every piece of
     interface, evidence and data. A system mono handles machine timestamps
     and identifiers — no third webfont, no perf cost. */
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  /* ── TYPE SCALE ───────────────────────────────────────────────────────────
     Fluid between a laptop and a large monitor, capped at both ends. A big
     display never runs away; a small laptop never gets an unreadable page. */
  --t-display:clamp(2.55rem,1.45rem + 4.6vw,5.4rem);
  --t-h1:clamp(2.05rem,1.35rem + 3vw,3.9rem);
  --t-h2:clamp(1.72rem,1.28rem + 1.9vw,2.95rem);
  --t-h3:clamp(1.14rem,1.02rem + .52vw,1.55rem);
  --t-h4:clamp(1rem,.95rem + .22vw,1.15rem);
  --t-lede:clamp(1.02rem,.96rem + .3vw,1.24rem);
  --t-body:clamp(.945rem,.92rem + .14vw,1.045rem);
  --t-sm:clamp(.83rem,.81rem + .09vw,.895rem);
  --t-xs:.785rem;
  --t-label:.685rem;
  --t-micro:.645rem;

  /* ── RHYTHM ───────────────────────────────────────────────────────────────
     One frame, one gutter, one section height. Whitespace is the product. */
  --frame:1320px;
  --frame-wide:1560px;
  --frame-narrow:960px;
  --gutter:clamp(20px,4.2vw,64px);
  --sec-y:clamp(56px,6vw,100px);
  --sec-y-lg:clamp(76px,7.6vw,126px);
  --sec-y-sm:clamp(44px,4.6vw,74px);
  --measure:34em;
  --measure-wide:44em;

  /* ── FORM ─────────────────────────────────────────────────────────────────
     Controlled radii. Nothing is a pill unless it is genuinely a status. */
  --r-xs:3px;
  --r-sm:6px;
  --r-md:10px;
  --r-lg:14px;
  --r-full:100px;

  /* ── MOTION ───────────────────────────────────────────────────────────────
     Movement means the system is thinking. Two curves, no more. */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --dur:.55s;
  --dur-slow:1.1s;
}

/* A laptop has far less usable height than its width implies. Tighten the
   vertical rhythm there — the type does not shrink, because smaller text is
   not the same thing as better density. */
@media (min-width:1000px) and (max-height:940px){
  :root{
    --sec-y:clamp(48px,5vw,80px);
    --sec-y-lg:clamp(62px,6.2vw,100px);
    --sec-y-sm:clamp(36px,3.8vw,56px);
  }
}