/* The Laing Label — Design Tokens
   Source of truth: brand-guide-ll-2026/index.html
   Edit only when the brand guide itself changes. */

/* Accent face — Chantal (self-hosted).
   NOTE: current file is the OnlineWebFonts re-host (CC-BY-4.0 / possible trial).
   Replace assets/fonts/chantal-medium.* with a properly licensed file when available. */
@font-face {
  font-family: 'Chantal';
  src: url('../fonts/chantal-medium.woff2') format('woff2'),
       url('../fonts/chantal-medium.woff') format('woff');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color */
  --black: #000000;
  --white: #FFFFFF;
  --charcoal: #1A1A1A;
  --paper: #F3F1EC;
  --gray: #D9D9D9;
  --gray-mid: #999999;
  --red: #B22222;
  --red-dark: #8B1A1A;

  /* Typography */
  --font-display: 'Epilogue', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-accent: 'Chantal', 'Caveat', cursive;

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Layout */
  --page-pad-x: clamp(24px, 5vw, 80px);
  --section-pad-y: clamp(64px, 9vw, 128px);
  --max-w: 1280px;
  --reading-w: 720px;
  --sidebar: 252px;

  /* Type scale (fluid) */
  --fs-hero: clamp(72px, 9vw, 128px);
  --fs-h1: clamp(44px, 5.5vw, 76px);
  --fs-h2: clamp(32px, 3.8vw, 48px);
  --fs-h3: clamp(22px, 2vw, 28px);
  --fs-body: 15px;
  --fs-body-lg: 17px;
  --fs-label: 11px;
  --fs-label-lg: 13px;
  --fs-accent: clamp(24px, 3vw, 40px);

  /* Transitions */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 180ms;
  --dur-med: 320ms;
  --dur-slow: 600ms;

  /* Borders */
  --hairline: 1px solid var(--charcoal);
  --hairline-light: 1px solid rgba(255, 255, 255, 0.18);
  --hairline-paper: 1px solid rgba(0, 0, 0, 0.12);
}

/* Mobile: the hero/cover display size needs a much lower floor so long
   single words (DISTINGUISHED, REMEMBER.) don't clip on phone screens.
   Drives .home-hero__title, .video-hero__title, .case-cover__title, .svc-hero__title. */
@media (max-width: 600px) {
  :root { --fs-hero: clamp(34px, 10vw, 58px); }
}