/* ===========================================================================
   TIER 3 — COMPONENTS

   Component-specific decisions. The course is blunt about this tier: use it
   "really sparingly", and "when you find yourself adding tier three tokens,
   you should feel bad". The cautionary tale is a system with 4,000 tokens
   from minting one per property per variant per component.

   So this file stays short, and anything that turns out to be a job rather
   than a component's internals goes back up to tier 2. The card's type did
   exactly that: it is `--type-title-md-*` now, not a card token.

   References tier 2 by preference; tier 1 where the value is a literal rather
   than a decision — a measurement off the artwork, or a duration off the live
   site. Those have to come from definitions, because that is the only place a
   literal is allowed, however local the thing using it.
   =========================================================================== */

:root {
  /* The band — the logotype flanked by blocks of the iso. The block follows
     the window and everything else follows the block, so the whole row shrinks
     together instead of breaking up.

     Four mats, not two: the row sits inside the frame's mat and inside the
     footer's own margin, so twice that much of the window is already spoken
     for. This system carried two for a while and ran the band wider than the
     site's — measured against the home, which is where it ships.

     The name is --band-block-gap and not --band-gap because the home already
     uses --band-gap for something else: the air between the band and the lines
     under it, a vertical space on the footer. Two gaps on two axes cannot share
     a word. */
  --band-block: min(var(--band-block-max), (100vw - 4 * var(--space-mat)) / var(--band-ratio));
  --band-block-gap: calc(var(--band-block) * var(--band-block-gap-ratio));

  /* The band's cells. A letter arrives within a single frame, holds its colour,
     then goes out — and the going out is what gives the band its hand. These are
     decisions about this component, so they are tier 3; the numbers they point at
     are literals, so those are tier 1, the same split the geometry above makes.
     The hold is the one worth doubting: it was first read off a tab the browser
     was throttling, which stretches whatever it measures. */
  --band-cell-in: var(--duration-90);
  --band-cell-hold: var(--duration-560);
  --band-cell-fade: var(--duration-700);
}