/* metric-matched fallbacks: keep layout stable while the web fonts load (display=swap) */
@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial");
  size-adjust: 108.5%;
}
@font-face {
  font-family: "Lora Fallback";
  src: local("Georgia");
  size-adjust: 103%;
}
/* measured: Times New Roman is 4.4% wider than Cormorant Garamond 500 on mixed uk/en copy */
@font-face {
  font-family: "Cormorant Fallback";
  src: local("Times New Roman");
  size-adjust: 95.8%;
  ascent-override: 92%;
  descent-override: 29%;
}

:root {
  --color-bg: #faf7f2;             /* warm ivory */
  --color-text: #2f2b27;           /* 13.1:1 on --color-bg */
  --color-muted: #6a635b;          /* 5.5:1 on --color-bg, 4.9:1 on --color-panel */
  --color-dark: #2f2b27;           /* buttons */
  --color-panel: #f0e9df;          /* sand panel */
  --color-border: #e2d9cc;
  --color-accent: #8c4a35;         /* terracotta: 6.2:1 on --color-bg, white text on it 6.7:1 */
  --color-number: var(--color-accent); /* step numbers */
  --color-white: #ffffff;
  --radius-pill: 999px;

  --font-head: "Montserrat", "Montserrat Fallback", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Lora", "Lora Fallback", Georgia, "Times New Roman", serif;
  /* headings, logo, hero and banner titles: mixed case serif */
  --font-display: "Cormorant Garamond", "Cormorant Fallback", "Times New Roman", serif;

  /* the display serif has a small x-height, so heading sizes sit above the sans values */
  --fs-hero: clamp(44px, 6.4vw, 84px);
  --fs-banner: clamp(34px, 4.2vw, 54px);
  --fs-page-title: clamp(34px, 3.9vw, 50px);
  --fs-h2: clamp(30px, 3.4vw, 44px);
  --fs-h3: clamp(24px, 2.3vw, 30px);
  --fs-names: clamp(16px, 1.6vw, 20px);
  --fs-price: 18px;
  --fs-body: 14px;
  --fs-body-sm: 13px;
  --fs-small: 12px;
  --fs-nav: 11px;
  --fs-eyebrow: 10px;
  --fs-button: 10px;

  --lh-body: 1.85;
  --lh-head: 1.12;
  --ls-hero: 0;
  --ls-head: 0.005em;
  --ls-nav: 0.2em;
  --ls-eyebrow: 0.32em;
  --ls-button: 0.22em;

  --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;
  --section-y: clamp(64px, 8vw, 112px);
  --gutter: clamp(16px, 4vw, 40px);
  --container: 1140px;
  --container-wide: 1274px;
  --grid-gap: 16px;                /* 10px on phones, see below */
  --works-offset: 56px;           /* middle column drop in the favourite frames grid */

  --header-h: 88px;
  --header-h-scrolled: 72px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 200ms;
  --dur: 400ms;
  --dur-slow: 800ms;
  --reveal-shift: 18px;

  --z-header: 100;
  --z-menu: 200;
  --z-edit: 300;
}
@media (max-width: 1023px) {
  :root { --header-h: 64px; --header-h-scrolled: 64px; }
}
/* phones: raise the small text sizes for legibility; desktop reference values stay above */
@media (max-width: 767px) {
  :root {
    --fs-body: 16px;
    --fs-body-sm: 15px;
    --fs-eyebrow: 11px;
    --fs-button: 11px;
    --grid-gap: 10px;
    --works-offset: 32px;
  }
}
/* below 375px the 3-column footer nav (uk labels) only fits the gutter at 11px */
@media (min-width: 375px) and (max-width: 767px) {
  :root { --fs-nav: 12px; }
}