/* ==========================================================================
   Design tokens — the single source of truth for the whole site.

   Two decisions hold the typography together:
   1. ONE text face. Inter Tight does every job; JetBrains Mono is used only
      for labels, numbers and metadata, never for reading text.
   2. SIX sizes. Every piece of type on every page is one of the steps below,
      built on a 1.25 ratio. Nothing is sized ad hoc.
   ========================================================================== */

:root {
  /* --- Surface ----------------------------------------------------------- */
  /* Measured against the portrait: its dark backdrop sits at 0.3/255, so the
     page has to be black too or the photograph reads as a rectangle against a
     lighter page. Every portrait on this site is shot on true black — measured
     at 0.0–1.6 out of 255 — so the ground is true black as well. The warmth here comes from the ink and the dust,
     never from the ground. */
  --bg:            #000000;
  --bg-raise:      #0C0C0C;
  --bg-elev:       #141414;

  /* --- Ink --------------------------------------------------------------- */
  --text:          #EDE8DE;
  --text-dim:      #948D83;
  --text-faint:    #635D55;

  /* --- Accent (brass — hover and focus only) ------------------------------ */
  --accent:        #C2A15C;
  --accent-dim:    #8A7038;
  --accent-glow:   rgba(194, 161, 92, .14);

  /* --- Hairlines --------------------------------------------------------- */
  --rule:          rgba(237, 232, 222, .13);
  --rule-soft:     rgba(237, 232, 222, .07);
  --rule-strong:   rgba(237, 232, 222, .28);

  /* --- Type ------------------------------------------------------------- */
  --font:          'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* the six steps — 1.25 ratio, fluid between 375px and 1680px */
  --fs-mono:       .6875rem;                                   /* 11px  labels */
  --fs-sm:         clamp(.875rem, .84rem + .16vw, 1rem);       /* 14–16 small  */
  --fs-md:         clamp(1.0625rem, 1rem + .26vw, 1.25rem);    /* 17–20 body   */
  --fs-lg:         clamp(1.375rem, 1.19rem + .78vw, 2rem);     /* 22–32 subhead*/
  --fs-xl:         clamp(1.875rem, 1.5rem + 1.6vw, 3.125rem);  /* 30–50 heading*/
  --fs-display:    clamp(2.75rem, 1.9rem + 3.6vw, 5.5rem);     /* 44–88 page   */

  /* the name on the first screen is the only size tied to viewport height */
  --fs-hero:       clamp(2.5rem, min(7.4vw, 10.8vh), 7.5rem);

  --tracking-tight: -.035em;
  --tracking-wide:  .2em;

  --leading-tight:  1.06;
  --leading-snug:   1.28;
  --leading-normal: 1.62;

  /* --- Space & layout ---------------------------------------------------- */
  --gutter:        clamp(1.25rem, 4vw, 4.5rem);
  --maxw:          105rem;      /* 1680px at the default root, and it grows with it */
  --nav-h:         clamp(62px, 6vw, 5.125rem);
  /* The air between blocks. It was 144px a side at 1440, which put nearly
     300 pixels of nothing between the end of one block and the next heading —
     a third of a screen, enough that a reader can believe the page has ended.
     94 a side keeps the blocks apart without hiding them from each other. */
  --section-y:     clamp(3.3rem, 6.4vw, 5.75rem);
  --col-gap:       clamp(1rem, 2vw, 2rem);

  /* --- Motion ------------------------------------------------------------ */
  --ease:          cubic-bezier(.16, 1, .3, 1);
  --ease-out:      cubic-bezier(.22, .61, .36, 1);
  /* The calm one. --ease is an expo-out: it is more than half way there in
     an eighth of its own duration, which is right for something arriving —
     a panel, a line drawing itself — and wrong for something a hand is
     holding. A card under a pointer that snaps has been startled. This one
     leaves gently, does its travelling in the middle, and settles. */
  --ease-soft:     cubic-bezier(.35, .1, .35, 1);
  --dur-fast:      .28s;
  --dur:           .6s;
  --dur-slow:      .9s;

  --z-nav:         100;
  --z-menu:        200;
  --z-overlay:     300;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: .01ms; --dur: .01ms; --dur-slow: .01ms; }
}