/* milkinside-study tokens — serialized from milkinside.com/lets-talk 2026-08-19,
   regularized to a system scale 2026-08-20.

   Grid: 1920 x 1048 design grid shipped fluid. Horizontal values are px / 19.2
   as vw; the lower block anchors to viewport height, so its values are
   px / 10.48 as svh. Every px in the comments is a value from the scales below.

   The real Aktiv Grotesk renders here: Dalton Maag's own trial, installed to
   ~/Library/Fonts on 2026-08-20. The trial ships Light as a SEPARATE family, so
   font-weight cannot reach it through "Aktiv Grotesk Trial" — these three rules
   rebuild one weighted family from the installed static faces. The variable
   font is deliberately unused: its 300 instance measures 786.5 against the
   site's 800.3 (-1.7%), while the static Light measures 805.1 (+0.6%). */
@font-face {
  font-family: "Aktiv Grotesk Study";
  src: local("Aktiv Grotesk Trial Light");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Aktiv Grotesk Study";
  src: local("Aktiv Grotesk Trial");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Aktiv Grotesk Study";
  src: local("Aktiv Grotesk Trial Bold");
  font-weight: 700;
  font-style: normal;
}

:root {
  /* ---- Color ------------------------------------------------------------ */
  --bg-base: #020202;
  --glow-top: #2e3855;
  --glow-peak: #414d61;
  --glow-core-warm: #413b41;
  --glow-deep: #1e2739;
  --glow-tint-violet: #0c0913;
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.5);
  --muted-steel: rgba(99, 102, 122, 0.5);
  --accent-error: #ff0055;

  /* ---- Font ------------------------------------------------------------- */
  /* Fallback order is decided by LETTERFORM, not by metrics. Aktiv's lowercase
     'a' ends in a flat stem with no tail, and it draws tittles, colons and
     periods as RECTANGLES — measured on the live page at fill 0.999 (1.00 =
     square, 0.785 = circle), aspect 0.771. Manrope draws both the same way
     (aspect 0.767); Inter draws a circle (0.792), which is why it kept reading
     as the wrong typeface however well the metrics were tuned. Helvetica Neue
     stays third: it matches Aktiv's x-height, cap ratio and stem weight to
     0.2%, so it is the better shape-blind match if Manrope is missing too. */
  --font-family: "Aktiv Grotesk", "aktivGrotesk", "Aktiv Grotesk Study",
                 "Manrope", "Helvetica Neue", Arial, sans-serif;

  /* ---- Type scale ------------------------------------------------------- */
  /* 14 · 18 · 24 · 30 · 62 · 100 — the reference's own desktop-band values,
     read from its CSS (0.729 / 0.938 / 1.563 / 3.229 / 5.208 vw). The first
     cut regularized these to multiples of 4 and the owner read the whole page
     as slightly small — type keeps the measured values; the 4-grid stays for
     spacing only. Line-heights keep the measured ratios, scaled with each
     size. De-regularized 2026-08-20. */
  --fs-nav: 0.7292vw;         /* 14  — the reference declares 0.729vw */
  --lh-nav: 0.9375vw;         /* 18  */
  --fs-body: 0.9375vw;        /* 18  */
  --lh-body: 1.5vw;           /* 28.8 — measured on the reference */
  --lh-body-single: 0.9375vw; /* 18  — footer, one line, measured 18/18 */
  --lh-body-stacked: 1.25vw;  /* 24  — + space/8 gap = the 32px stack advance */
  --fs-wordmark: 1.25vw;      /* 24  */
  --lh-wordmark: 1.25vw;      /* 24  */
  --fs-heading: 1.5625vw;     /* 30  */
  --lh-heading: 1.875vw;      /* 36  — measured */
  --fs-clock: 3.2292vw;       /* 62  */
  --lh-clock: 3.5521vw;       /* 68.2 — measured */
  --fs-display: 5.2083vw;     /* 100 */
  --lh-display: 5.7292vw;     /* 110 — measured */

  /* ---- Tracking --------------------------------------------------------- */
  /* Steps of 0.01em. The reference's own per-element values land between
     -0.0103em and +0.0098em, so one step in each direction carries all of it;
     the wordmark is the single outlier the site actually declares wide. */
  --ls-tight: -0.01em;
  --ls-wide: 0.01em;
  --ls-wordmark: 0.12em;

  /* ---- Space ----------------------------------------------------------- */
  /* Ten steps, every one a multiple of 4, named by the px they carry on the
     1920 grid. Expressed against the width so they scale with the page. */
  --space-4: 0.2083vw;
  --space-8: 0.4167vw;
  --space-16: 0.8333vw;
  --space-24: 1.25vw;
  --space-32: 1.6667vw;
  --space-48: 2.5vw;
  --space-64: 3.3333vw;
  --space-80: 4.1667vw;
  --space-96: 5vw;
  --space-128: 6.6667vw;

  /* ---- Layout ----------------------------------------------------------- */
  --pad-inline: var(--space-48);
  --col-2: 26.4583vw;         /* 508  */
  --col-3: 50.625vw;          /* 972  */
  --col-4: 74.7917vw;         /* 1436 */

  /* Vertical anchors. The top block rides the width, the lower block rides the
     height — the reference does the same, and it is what keeps the clocks off
     the footer on a short viewport. Each px below is on the 4-grid. */
  --y-logo: 2.2917vw;         /* 44  */
  --y-nav: 2.5vw;             /* 48  */
  --y-heading: 9.1667vw;      /* 176 */
  --y-copy: 11.875vw;         /* 228 */
  --y-input: 18.125vw;        /* 348 */
  --y-divider: 26.25vw;       /* 504 */
  --y-error: 28.125vw;        /* 540 */
  --y-clock: 67.18svh;        /* 704 of 1048 */
  --y-clock-meta: 74.81svh;   /* 784 of 1048 */
  --y-footer: 5.73svh;        /* 60 of 1048, from the bottom */

  /* ---- Page transition -------------------------------------------------- */
  /* Serialized from the reference's own overlay component: a fixed black layer
     at z-index 999, idle at opacity 0 / visibility hidden, driven with GSAP
     autoAlpha for 0.4s on ease power2.inOut. GSAP's power2 is the cubic curve,
     so power2.inOut IS easeInOutCubic — the same bezier the site publishes as
     eases.cubic.inOut and sets on ::view-transition-group(*). */
  --curtain-bg: #000000;
  --curtain-duration: 0.4s;
  --curtain-ease: cubic-bezier(0.645, 0.045, 0.355, 1);
  --z-curtain: 999;
}