:root {
  --space-0: 0px;
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-135: 13.5px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-23: 23px;
  --space-25: 25px;
  --space-28: 28px;
  --space-30: 30px;
  --space-40: 40px;
  --space-44: 44px;
  --space-50: 50px;
  --space-54: 54px;
  --space-100: 100px;
  --space-120: 120px;
  --space-140: 140px;
  --space-200: 200px;
  --space-207: 207px;
  --space-250: 250px;
  --space-350: 350px;

  --main-spacing: var(--space-20);
  --main-spacing-mobile: var(--space-10);
  --main-margin: 0;
  --main-padding: var(--space-5);
  --main-gap: var(--space-15);
  --main-gap-mobile: var(--space-15);

  --font-family-sans: var(--font-sans), sans-serif;
  --font-family-parc: var(--font-parc), sans-serif;
  --font-family-not-today: var(--font-not-today), serif;

  --font-size-mobile: 11.5px;
  --font-size-desktop: 10px;

  --line-height-mobile: normal;
  --line-height-desktop: normal;

  --font-weight-674: 674;

  --font-size-8: 8px;
  --font-size-9: 9px;
  --font-size-10: 10px;
  --font-size-10-5: 10.5px;
  --font-size-11: 11px;
  --font-size-11-5: 11.5px;
  --font-size-12: 12px;
  --font-size-12-5: 12.5px;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-14-5: 14.5px;
  --font-size-15: 15px;
  --font-size-16: 16px;
  --font-size-17: 17px;
  --font-size-18: 18px;
  --font-size-19: 19px;
  --font-size-20: 20px;
  --font-size-21: 21px;
  --font-size-22: 22px;

  --line-height-normal: normal;
  --line-height-5-40: 5.4px;
  --line-height-7-40: 7.4px;
  --line-height-7-50: 7.5px;
  --line-height-11: 11px;
  --line-height-13: 13px;
  --line-height-13-5: 13.5px;
  --line-height-14-5: 14.5px;
  --line-height-16: 16px;
  --line-height-18: 18px;
  --line-height-19: 19px;
  --line-height-20: 20px;
  --line-height-24: 24px;

  --letter-spacing-0-16: -0.16px;
  --letter-spacing-0-15: -0.15px;
  --letter-spacing-0-15: -0.145px;
  --letter-spacing-0-13: -0.13px;
  --letter-spacing-0-12: -0.12px;
  --letter-spacing-0-11: -0.11px;
  --letter-spacing-0-08: -0.08px;
  --letter-spacing-0-22: 0.22px;
  --letter-spacing-0-23: 0.23px;
  --letter-spacing-0-25: 0.25px;
  --letter-spacing-0-251: 0.251px;
  --letter-spacing-0-316: 0.316px;
  --letter-spacing-0-26: 0.26px;
  --letter-spacing-0-30: 0.3px;
  --letter-spacing-0-70: 0.7px;
  --letter-spacing-0-85: 0.85px;

  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-628: 628;
  --font-weight-624: 624;
  --font-weight-700: 700;

  --type-uppercase-ui-font-family: var(--font-family-sans);
  --type-uppercase-ui-font-weight: var(--font-weight-628);
  --type-uppercase-ui-font-size: var(--font-size-10);
  --type-uppercase-ui-letter-spacing: var(--letter-spacing-0-251);

  --color-white: #fff;
  --color-black: #000;
  --color-grey: #bababa;
  --color-lime: #b1d539;
  --color-border: #f6f6f6;
  --color-light-grey: #f2f2f2;
  --color-grid-overlay: rgba(196, 95, 95, 0.3);
  --color-grid-line: rgba(196, 95, 95, 0.7);

  --in-out: cubic-bezier(0.83, 0, 0.17, 1);
  --ease: cubic-bezier(0.645, 0.045, 0.355, 1);
  --transition-duration: 0.3s;
  --transition-duration-300: 0.3s;
  --transition-duration-400: 0.4s;
  --transition-duration-800: 0.8s;

  /* Single knob for every page-to-page transition on mobile: the
     <main> opacity fade, the .projects-titles-shell opacity fade
     when leaving / entering the projects section, the case-study
     rail transform snap, the navigate() transitionend fallback in
     PrimaryNav (read via getPageTransitionMs() in constants.ts),
     and the GSAP tap-flow durations in ProjectsList. Change this
     value and every page-transition rhythm scales together. */
  --page-transition-duration: 0.4s;

  --opacity-40: 0.4;
  --opacity-70: 0.7;
  --opacity-20: 0.2;

  --border-hairline: 0.5px;
  --radius-media: 2.82px;
  --radius-media-card: 5.33px;
  --radius-media-card-mobile: 5px;
  --radius-hero: 3.91px;
  --radius-hero-mobile: 1.97px;
  --aspect-ratio-media-card: 1.66;

  --rotate-1: 1deg;
  --rotate-180: 180deg;

  --z-index-modal: 200;
  --z-index-header: 100;
  --z-index-nav: 20;
  --z-index-cta: 21;
  --z-index-mobile-link: 60;
  --z-index-debug: 99999;

  --shadow-card-up: 0px -100px 100px 5px var(--color-white);
  --shadow-card-up-mobile: 0px -100px 100px 10px var(--color-white);
  --shadow-card-up-tight: var(--space-0) calc(-1 * var(--space-40)) var(--space-40) var(--space-0)
    var(--color-white);
  --shadow-card-up-tight-mobile: var(--space-0) calc(-1 * var(--space-44)) var(--space-44)
    var(--space-0) var(--color-white);
  --z-index: 0;
  --z-index-above: 1;
  --z-index-below: -1;

  --header-line-top: 56vh;
  --header-line-top-mobile: 56vh;
  --header-line-top-mobile: 56lvh;
  --header-line-bottom-offset: calc(100vh - var(--header-line-top));
  --header-line-bottom-offset-mobile: calc(100vh - var(--header-line-top-mobile));
  --header-line-bottom-offset-mobile: calc(100lvh - var(--header-line-top-mobile));

  --section-height-60vh: 60vh;

  --breakpoint-sm: 768px;
}

/* Mobile font-size scale: 1.26× of the desktop values (dialed in on
   device via MobileFontTuner). Applied as a media-query override of the
   --font-size-* tokens at :root, so every component that reads a token
   inherits the larger value on mobile without changing any usage site.
   Desktop is unaffected. */
@media (max-width: 768px) {
  :root {
    --font-size-mobile: 14.49px;
    --font-size-8: 10.08px;
    --font-size-9: 11.34px;
    --font-size-10: 12.6px;
    --font-size-10-5: 13.23px;
    --font-size-11: 13.86px;
    --font-size-11-5: 14.49px;
    --font-size-12: 15.12px;
    --font-size-12-5: 15.75px;
    --font-size-13: 16.38px;
    --font-size-14: 17.64px;
    --font-size-14-5: 18.27px;
    --font-size-15: 18.9px;
    --font-size-16: 20.16px;
    --font-size-17: 21.42px;
    --font-size-18: 22.68px;
    --font-size-19: 23.94px;
    --font-size-20: 25.2px;
    --font-size-21: 26.46px;
    --font-size-22: 27.72px;

    /* Mobile line-height scale: same 1.26× factor as the font-size
       scale above, so every component that pairs a --font-size-* token
       with a --line-height-* token gets the IDENTICAL line-height ÷
       font-size ratio it has on desktop. Without this override the
       text was bigger on mobile (1.26× scale) but the leading stayed
       at the desktop pixel value, collapsing the visual rhythm — text
       cap-trimmed too tight relative to its size, baseline grid out of
       sync with the project-titles-list pitch, body copy reading
       crammed compared to desktop's editorial spacing. Scaling all
       line-height tokens by the same factor restores the desktop
       typographic ratios on mobile (project-title 0.75, body 1.167,
       hero 1.2075, etc.) while keeping the 1.26× larger text sizes. */
    --line-height-5-40: 6.804px; /* 5.4 × 1.26 */
    --line-height-7-40: 9.324px; /* 7.4 × 1.26 */
    --line-height-7-50: 9.45px; /* 7.5 × 1.26 */
    --line-height-11: 13.86px; /* 11 × 1.26 */
    --line-height-13: 16.38px; /* 13 × 1.26 */
    --line-height-13-5: 17.01px; /* 13.5 × 1.26 */
    --line-height-14-5: 18.27px; /* 14.5 × 1.26 */
    --line-height-16: 20.16px; /* 16 × 1.26 */
    --line-height-18: 22.68px; /* 18 × 1.26 */
    --line-height-19: 23.94px; /* 19 × 1.26 */
    --line-height-20: 25.2px; /* 20 × 1.26 */
    --line-height-24: 30.24px; /* 24 × 1.26 */

    /* Letter-spacing tokens: same 1.26× scale as font-size + line-height,
       so the per-em tracking ratio stays identical to desktop on every
       element that pairs a --font-size-* with a --letter-spacing-*. The
       raw 0.251px tracking baked into the editorial uppercase styles
       (project titles, primary nav links, credits values, CTA…) is
       updated separately in each mobile media query — same factor. */
    --letter-spacing-0-16: -0.2016px; /* -0.16 × 1.26 */
    --letter-spacing-0-15: -0.1827px; /* -0.145 × 1.26 (the duplicate value) */
    --letter-spacing-0-13: -0.1638px; /* -0.13 × 1.26 */
    --letter-spacing-0-12: -0.1512px; /* -0.12 × 1.26 */
    --letter-spacing-0-11: -0.1386px; /* -0.11 × 1.26 */
    --letter-spacing-0-08: -0.1008px; /* -0.08 × 1.26 */
    --letter-spacing-0-22: 0.2772px; /* 0.22 × 1.26 */
    --letter-spacing-0-23: 0.2898px; /* 0.23 × 1.26 */
    --letter-spacing-0-25: 0.315px; /* 0.25 × 1.26 */
    --letter-spacing-0-251: 0.31626px; /* 0.251 × 1.26 */
    --letter-spacing-0-316: 0.39816px; /* 0.316 × 1.26 */
    --letter-spacing-0-26: 0.3276px; /* 0.26 × 1.26 */
    --letter-spacing-0-30: 0.378px; /* 0.3 × 1.26 */
    --letter-spacing-0-70: 0.882px; /* 0.7 × 1.26 */
    --letter-spacing-0-85: 1.071px; /* 0.85 × 1.26 */

    --type-uppercase-ui-letter-spacing: var(--letter-spacing-0-251);
  }
}