/* ==========================================================================
   MILA INNOVATIONS: token file for the site
   --------------------------------------------------------------------------
   Authority : Portfolio Aesthetic Doctrine v1.1. Mila has no ratified Canon;
               nothing in this file ratifies one.
   Palette   : ML-D6 "Soil and hemp", the five values the Founder chose. This
               surface uses four, one per Doctrine role (Principle V): limewash
               the light ground, hemp the dark ground, soil the accent, ink the
               type. Tailings is kept and unused here.
   Direction : the planted name (the Atelier, 2026-09-23, ML-D25). "Mila" stands
               on the soil line and its strokes go on under the ground as roots.
               Replaces the photo rise, which is archived whole in
               09-Archive/mila-landing-2026-09-17/photo-rise-2026-09-17/.
   Family    : the Pair (ADR-0094, 2026-10-16; the Graft before it, ADR-0081,
               is archived). kushOS the left page, Rootstock the right, side by
               side the M of Mila. The header carries Mila's wide lockup,
               limewash and tailings on hemp, and the favicons are the family's
               icons: files under marks/, copied from the Mila marks, never
               redrawn. Beside Clubs and Grow with Mila stand the kushOS and
               Rootstock marks.
   Rule      : no colour, size or duration appears in index.html that is not
               named here. A quieter tone is a mix of two tokens, never a hex.
               The theme-color meta cannot read a custom property; it repeats
               hemp by value.
   ========================================================================== */
:root {
  /* Palette, ML-D6 */
  --soil:     #8A3A24;
  --tailings: #CDBF98;
  --hemp:     #2C3B24;
  --ink:      #151513;
  --limewash: #E8E8E1;

  /* Quiet tones: a mix of two tokens, each at AA or better on its own ground */
  --quiet-on-paper: color-mix(in srgb, var(--ink) 66%, var(--limewash));      /* 5.4:1 */
  --rule-on-paper:  color-mix(in srgb, var(--ink) 18%, var(--limewash));
  --quiet-on-hemp:  color-mix(in srgb, var(--limewash) 72%, var(--hemp));     /* 5.9:1 */
  --rule-on-hemp:   color-mix(in srgb, var(--limewash) 24%, var(--hemp));
  --quiet-on-soil:  color-mix(in srgb, var(--limewash) 80%, var(--soil));     /* 4.6:1 */
  --rule-on-soil:   color-mix(in srgb, var(--limewash) 34%, var(--soil));
  --root-tone:      color-mix(in srgb, var(--limewash) 86%, var(--soil));     /* the name, underground */
  --quiet-on-ink:   color-mix(in srgb, var(--limewash) 66%, var(--ink));      /* 7.0:1 */
  --rule-on-ink:    color-mix(in srgb, var(--limewash) 20%, var(--ink));

  /* Type: one display face, one text face (Doctrine §3, requirement 2).
     IBM Plex Sans, the Mila family's one grotesk (ADR-0081 D5), stands the
     words up; Newsreader carries the sentences. Nothing in light uppercase:
     a label in capitals is set at the medium weight. */
  --display: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --text:    "Newsreader", Georgia, "Times New Roman", serif;
  --w-name: 200;
  --w-door: 400;   /* the menu's staff doors; kushOS and Rootstock there are their lockups */
  --w-label: 500;
  --w-statement: 300;
  --w-body: 400;
  --wide: 100%;   /* Plex has no width axis; the family is set at its own width */
  --track-name: -.02em;
  --track-label: .22em;
  --track-statement: -.012em;

  /* The name fills the width it is given. --name-ratio is the inked width of
     "Mila" in ems at weight 200 in Plex, with its tracking, plus a hair,
     measured in the browser (1.64em); --name-indent pulls the M's left side
     bearing (.10em) back to the margin. */
  --name-ratio: 1.68;
  --name-indent: -.1em;
  --size-name: min(calc((100vw - 2 * var(--edge)) / var(--name-ratio)), 52svh);

  --size-label:     max(11px, .6875rem);
  --size-small:     15px;
  --size-body:      clamp(17px, 1.2vw, 19px);
  --size-lead:      clamp(19px, 1.55vw, 23px);
  --size-meaning:   clamp(22px, 2.3vw, 34px);
  --size-statement: clamp(40px, 6.8vw, 104px);
  --size-part:      clamp(60px, 16vw, 196px);
  --size-menu:      clamp(40px, 10.5vw, 88px);
  --size-menu-short: clamp(30px, 8vw, 60px);  /* the menu on a screen under 900 px tall */
  --size-door:      clamp(28px, 6.6vw, 44px);
  --size-write:     min(15vw, 176px);

  /* The four places grow in size as the ambition grows (section 4) */
  --place-1: min(9vw, 72px);
  --place-2: min(11.5vw, 108px);
  --place-3: min(15vw, 150px);
  --place-4: min(21vw, 216px);

  /* Layout */
  --edge: clamp(20px, 3.4vw, 48px);
  --gutter: clamp(20px, 4vw, 64px);
  --section-pad: clamp(96px, 16svh, 184px);
  --measure: 32rem;
  --statement-max: 12em;
  --hero-min: 560px;
  --soil-h: 50svh;
  --wide-at: 900px;   /* must match the min-width in index.html's media queries */

  /* Space */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 112px;

  /* Controls */
  --tap: 48px;
  --corner: 2px;
  --hair: 1px;
  --bar: 1.5px;
  --bar-w: 20px;
  --bar-gap: 8px;
  --nudge: 6px;

  /* Motion. The name rises out of the soil once; its roots follow it down.
     Nothing else moves on its own. */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-quick: 180ms;
  --dur-menu: 420ms;
  --dur-reveal: 1100ms;
  --dur-rise: 1000ms;
  --stagger: 70ms;
  --lift: 24px;
  --lift-small: 12px;
  --root-delay: 700ms;
  --root-grow: 2800ms;

  /* The site around the name (ML-D26): GrowOne's structure, Mila's grammar.
     The veil is hemp laid flat over a photograph so its words read. It is
     one tone at one strength, never a gradient. */
  --veil: color-mix(in srgb, var(--hemp) 60%, transparent);
  /* The same veil at the strength a paler photograph needs: the Clubs stalk
     and the Grow bricks left limewash text at 3.2:1 under --veil; at 75% the
     palest 1% of either hero, measured under its text, reads at 4.7:1. Still
     one flat tone. The home hero keeps --veil, as on board C-1. */
  --veil-strong: color-mix(in srgb, var(--hemp) 75%, transparent);
  --header-h: 80px;
  --max: 1320px;
  --hero-photo-h: min(86svh, 820px);
  --ratio-photo: 4 / 3;
  --brand-h: 48px;     /* the wide lockup, flat; 32px until the Founder asked for it bigger, 2026-11-10 */
  --nav-mark-h: 13px;  /* the kushOS and Rootstock small forms beside their words */
  --role-mark-h: 22px; /* the products' wide lockups over their cards */
  --door-mark-h: 26px; /* the same lockups on the menu's staff sign-in */
  /* How far kushOS's name sits above Rootstock's when their wide lockups are
     set at one height. Under the Graft it was 0.4614 (kushOS's name at the
     head of its piece, Rootstock's at the foot). Under the Pair both lockups
     stand on the family's full height with the name on its centre line, so
     the names already share a line: 0. The rules that read it stay, so a
     future family can set it again. */
  --graft-drop: 0;
  /* Where the products' names stand in their wide lockups: the baseline is
     0.3 of the lockup's height above its foot (5.4 of 18 units, from the
     mark files' viewBoxes), so a row aligned on baselines drops the images
     by that much to put the names on the text's line. */
  --name-foot: .3;
  --cell-mark-h: 13px;
  --mark-quiet: .72;   /* a mark laid at --quiet-on-hemp's strength (72% limewash) */
  --btn-mark-h: 13px;  /* a product's small lockup inside a button, at the capitals' height */
  --copy-w: 13rem;           /* the copy button, the same width in each of its states */
  --frame-phone-max: 20rem;  /* a phone's screen, stacked on a phone, at no more than this */
  --size-hero: clamp(40px, 6vw, 92px);
  --size-h2: clamp(32px, 4.2vw, 60px);
  --size-h3: clamp(21px, 1.7vw, 26px);
  --size-step: clamp(44px, 4.6vw, 68px);
  --w-heading: 300;
  --w-h3: 400;
  --rung-step: clamp(12px, 5vw, 96px);
  --pm: 14px;
  --size-mail: clamp(22px, 3.4vw, 44px);
  --size-type-hero: clamp(48px, 8.4vw, 144px);
  --type-hero-h: min(72svh, 680px);

  /* The story, the home page (2026-10-16): one seed through four places,
     drawn in three.js behind the words (story.js reads the palette above).
     A chapter holds its card for --story-hold; between chapters lies
     --story-gap of open scene, where the camera travels. */
  --story-hold: 150svh;
  --story-gap: 45svh;
  --story-card-top: 22svh;
  --story-card-w: 31rem;
  --story-veil: color-mix(in srgb, var(--ink) 74%, transparent);
  --rail-gap: 10px;
  --rail-tick: 14px;
  /* The OnlyGramz room, the story's chapter 04 (Founder, 2026-10-16: "the
     last room it must be the og room", named on the page; ML-D94). Copied by
     value from the OnlyGramz Brand System v3.1, sections 4 to 6, never
     re-mixed into Mila's palette; nothing outside chapter 04 uses them. */
  --og-void:  #0A0806;
  --og-paper: #F0EAD8;
  --og-brass: #B8875A;
  --og-ash:   #6E665A;
  --og-face: "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* The room landing's own type (storefront RoomLanding.module.css): the
     act labels, the large line, the whisper under it */
  --og-size-chrome: .625rem;
  --og-size-whisper: .8125rem;
  --og-size-large: clamp(2.25rem, 5.2vw, 5.5rem);
  --og-track-chrome: .5em;
  --og-track-label: .4em;
  --og-track-large: -.03em;
  --og-track-body: .02em;
  --og-lead-large: .92;
  --og-lead-whisper: 1.65;
  --og-prose: color-mix(in srgb, var(--og-paper) 82%, var(--og-void));   /* its alpha-prose, .82 */
  --quiet-on-void: color-mix(in srgb, var(--og-paper) 60%, var(--og-void)); /* its alpha-quiet, .6 */
  --og-veil: color-mix(in srgb, var(--og-void) 78%, transparent);         /* a phone only: words over the lit bar */

  /* The story's Cinematic mode (ADR-0091, proposed; ruled for this page,
     ML-D93): glass over the scene. */
  --story-glass: color-mix(in srgb, var(--ink) 34%, transparent);
  --story-blur: 18px;
  --story-round: 20px;
  --story-shadow: 0 24px 64px color-mix(in srgb, var(--ink) 55%, transparent);
}

@media (min-width: 900px) {
  :root { --soil-h: 44svh; }
}