/* TSF golden-ratio system, 2026-08-01.
   Every size on the site comes from one of two sequences and nothing is picked by hand.

   TYPE  = 16px x phi^n          a geometric scale, so any two sizes are related by phi
   SPACE = the Fibonacci integers  8 13 21 34 55 89 144 233 377
   RATIO = phi, 1/phi, or 1:1    every rectangle, no exceptions

   Why two sequences rather than one: phi^n gives irrational pixel values, which is right for
   type (the browser sub-pixels it and the relationship is what matters) and wrong for
   layout, where a 55px gutter wants to be 55 and not 54.97. The Fibonacci integers ARE the
   phi scale rounded, converging on it as they climb, so the two agree without fighting.

   Usage: sizes come from var(), never from a literal. If a value is not on the scale it is
   not in the brand. */

:root{
  --phi: 1.618033988749895;

  /* ---- TYPE, 16px x phi^(n/3) --------------------------------------------------
     A full phi step between sizes is right for display type and far too coarse for UI:
     the jump from 9.9 straight to 16 leaves no room for the 11, 12 and 13px the site
     genuinely uses, and rounding them all to 9.9 would shrink every label by 10%.

     Third-steps fix that without weakening the ratio: EVERY THIRD RUNG IS STILL EXACTLY
     PHI (measured 1.615 to 1.625). The full-phi scale is still in here, it just has two
     intermediate stops between each pair.                                             */
  --t--3: 9.9px;    /* 16 / phi        , the phi rung , smallest labels              */
  --t--2: 11.6px;   /* 16 / phi^(2/3)  , labels, eyebrows                            */
  --t--1: 13.6px;   /* 16 / phi^(1/3)  , small copy, captions                        */
  --t-0:  16px;     /* base            , the phi rung , body copy                    */
  --t-1:  18.8px;   /* 16 * phi^(1/3)  , lead-in copy                                */
  --t-2:  22.1px;   /* 16 * phi^(2/3)  , small headings                              */
  --t-3:  25.9px;   /* 16 * phi        , the phi rung , lead paragraph               */
  --t-4:  35.7px;   /* 16 * phi^(5/3)                                                */
  --t-5:  41.9px;   /* 16 * phi^2      , the phi rung , section headings             */
  --t-6:  67.8px;   /* 16 * phi^3      , the phi rung , page headline                */
  --t-7:  109.7px;  /* 16 * phi^4      , the phi rung , the one hero line            */

  /* Fluid pairs, so the scale holds at every viewport instead of only at one.
     Each clamp runs between two ADJACENT rungs, never across a gap. */
  --t-1-f: clamp(20.6px, 2.0vw, 25.9px);
  --t-2-f: clamp(25.9px, 3.4vw, 41.9px);
  --t-3-f: clamp(41.9px, 5.6vw, 67.8px);
  --t-4-f: clamp(67.8px, 9.0vw, 109.7px);

  /* ---- SPACE, Fibonacci INTERLEAVED WITH LUCAS --------------------------------
     Fibonacci alone (8 13 21 34 55 89) is too coarse for real layout: the site's most
     common gap is 18px and the nearest Fibonacci value is 21, a 17% jump on 19 separate
     declarations. Migrating onto that would have been a redesign, not a migration.

     Lucas is Fibonacci's sister sequence: different seed (2,1 instead of 1,1), SAME limit
     phi. Interleaving the two gives a lattice where every value is on a phi sequence and
     every SECOND step is phi (measured 1.611 to 1.636, converging). And it turns out
     Timo's two most-used values, 11 and 18, are both Lucas numbers already.

     F = 8 13 21 34 55 89 144 233 377     L = 11 18 29 47 76 123 199 322            */
  --s-1:  8px;     /* F */
  --s-2:  11px;    /* L */
  --s-3:  13px;    /* F */
  --s-4:  18px;    /* L */
  --s-5:  21px;    /* F */
  --s-6:  29px;    /* L */
  --s-7:  34px;    /* F */
  --s-8:  47px;    /* L */
  --s-9:  55px;    /* F */
  --s-10: 76px;    /* L */
  --s-11: 89px;    /* F */
  --s-12: 123px;   /* L */
  --s-13: 144px;   /* F */
  --s-14: 233px;   /* F */
  --s-15: 377px;   /* F */

  /* ---- RATIO ------------------------------------------------------------------- */
  --r-land: 1.618 / 1;   /* landscape rectangle */
  --r-port: 1 / 1.618;   /* portrait rectangle  */
  --r-sq:   1 / 1;       /* the square, the step where the sequence turns */

  /* ---- LINE HEIGHT -------------------------------------------------------------
     Body sits at phi, which is the classic answer and genuinely reads well at 16px.
     Display type gets tighter as it grows, because leading that works at 16 looks
     like a gap at 68. */
  --lh-body:  1.618;
  --lh-lead:  1.382;   /* 2 - 1/phi^... , the complement, used for --t-1 and --t-2 */
  --lh-disp:  1.05;    /* --t-3 and up */

  /* ---- TRACKING ---------------------------------------------------------------
     Derived, not guessed: display tightens by 1/phi^N em, labels open by the same
     amount in the other direction. */
  --tr-disp:  -0.0344em;  /* -1/phi^7 = -0.03444 , display tightens                */
  --tr-body:   0em;       /*  phi^0 = 1, no adjustment at the base size            */
  --tr-label:  0.2361em;  /*  1/phi^3 =  0.23607 , labels open by the same logic   */
}

/* Applying the scale. These are the only type sizes on the site. */
.phi-label{font-size:var(--t--1);letter-spacing:var(--tr-label);text-transform:uppercase;line-height:var(--lh-body)}
.phi-body {font-size:var(--t-0); letter-spacing:var(--tr-body); line-height:var(--lh-body)}
.phi-lead {font-size:var(--t-1-f);letter-spacing:-0.0138em;    line-height:var(--lh-lead)}
.phi-h2   {font-size:var(--t-2-f);letter-spacing:-0.0191em;    line-height:var(--lh-lead)}
.phi-h1   {font-size:var(--t-3-f);letter-spacing:var(--tr-disp);line-height:var(--lh-disp)}
.phi-hero {font-size:var(--t-4-f);letter-spacing:var(--tr-disp);line-height:var(--lh-disp)}

/* Every rectangle. */
.phi-land{aspect-ratio:var(--r-land)}
.phi-port{aspect-ratio:var(--r-port)}
.phi-sq  {aspect-ratio:var(--r-sq)}