/* ===========================================================
   DESIGN TOKENS — v2 (art-direction pass)

   Base palette is deliberately near-monochrome. There is no
   global accent colour: FANG crimson is the only saturated
   colour in the site, and appears only inside the FANG case
   study. That restraint is what makes the dark transition land.
=========================================================== */

:root{
  /* --- paper environment --- */
  --paper:        #F0EEE9;
  --paper-2:      #E7E4DD;
  --ink:          #14120E;
  --ink-70:       #4A463E;
  --ink-45:       #7E786C;
  --ink-25:       #B4AEA1;
  --line:         #DAD5CB;
  --line-2:       #C6C0B2;

  /* --- FANG dark environment (scoped) --- */
  --fang-bg:      #0A0908;
  --fang-bg-2:    #131110;
  --fang-ink:     #EFEAE0;
  --fang-ink-60:  #97907F;
  --fang-ink-35:  #5C564C;
  --fang-line:    #262220;
  --crimson:      #A5303F;
  --crimson-dim:  #6E2029;

  /* --- type --- */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --display-wdth: 116;
  --display-lh: 0.86;
  --display-tr: -0.035em;

  /* --- scale: strong display/body contrast --- */
  --t-mega:  clamp(2.3rem, 11vw, 9.5rem);
  --t-xxl:   clamp(2.6rem, 8.5vw, 7rem);
  --t-xl:    clamp(2rem, 5vw, 3.9rem);
  --t-lg:    clamp(1.4rem, 2.6vw, 2.1rem);

  --t-body:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --t-sm:    0.875rem;
  --t-xs:    0.75rem;
  --t-meta:  0.6875rem;

  /* --- grid & rhythm --- */
  --pad: clamp(20px, 5vw, 80px);
  --gap: clamp(14px, 1.6vw, 26px);
  --band: clamp(90px, 14vh, 190px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* Display type — expanded grotesk, tight leading. Signature move. */
.display{
  font-family: var(--display);
  font-variation-settings: 'wdth' var(--display-wdth), 'wght' 620;
  font-weight: 620;
  line-height: var(--display-lh);
  letter-spacing: var(--display-tr);
  text-wrap: balance;
}
.display-tight{ --display-lh: 0.82; }

/* Uppercase metadata — deliberately rare. */
.meta{
  font-family: var(--body);
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-weight: 600;
  color: var(--ink-45);
}