/* ==========================================================================
   Tokens — self-hosted faces from the Illustrator package, plus the custom
   properties every other stylesheet reads.

   The values here are defaults. On boot, js/lib/theme.js overwrites them from
   data/theme.json, so the site still renders correctly if that fetch fails.
   ========================================================================== */

/* Montagu Slab ships as a variable font with weight + optical size axes,
   so one file covers the Light statement type and the SemiBold headlines. */
@font-face {
  font-family: "Montagu Slab";
  src: url("../assets/fonts/MontaguSlab-Variable.ttf?v=r1102e") format("truetype");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

/* Large optical size so headlines match the Illustrator comp (144pt axis).
   wght must be listed — setting only opsz resets the weight axis, and
   Android then fake-bolds the default cut, which doubles the last letters. */
.tb-hero__heading,
.tb-split__heading,
.tb-menu__link {
  font-optical-sizing: none;
  font-variation-settings: "opsz" 144, "wght" 500;
}
.tb-statement__heading,
.tb-flavor__heading {
  font-optical-sizing: none;
  font-variation-settings: "opsz" 144, "wght" 300;
}

/* AUTHENTIC Sans numbers its cuts by weight: 130 is the text weight, 150 the
   bolder one. They are mapped onto normal/bold so CSS can use font-weight. */
@font-face {
  font-family: "Authentic Sans";
  src: url("../assets/fonts/AUTHENTICSans-130.otf?v=r1102e") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: "Authentic Sans";
  src: url("../assets/fonts/AUTHENTICSans-150.otf?v=r1102e") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: "Authentic Sans Condensed";
  src: url("../assets/fonts/AUTHENTICSans-Condensed-90.otf?v=r1102e") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: "Authentic Sans Condensed";
  src: url("../assets/fonts/AUTHENTICSans-Condensed-150.otf?v=r1102e") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: fallback;
}

@font-face {
  font-family: "Breite Grotesk";
  src: url("../assets/fonts/BreiteGrotesk-Regular.otf?v=r1102e") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Syne";
  src: url("../assets/fonts/Syne-Bold.otf?v=r1102e") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inknut Antiqua";
  src: url("../assets/fonts/InknutAntiqua-Black.ttf?v=r1102e") format("truetype");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

html {
  font-synthesis: none;
}

:root {
  /* Sampled directly from the artwork */
  --c-green: #00543a;
  --c-green-deep: #00432e;
  --c-green-soft: #0a6448;
  --c-cream: #efece7;
  --c-cream-warm: #f4f1ec;
  --c-white: #ffffff;
  --c-ink: #141414;
  --c-rule: rgba(239, 236, 231, 0.32);
  --c-rule-dark: rgba(0, 84, 58, 0.24);

  --f-display: "Montagu Slab", "Iowan Old Style", Georgia, serif;
  --f-body: "Authentic Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-label: "Authentic Sans Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-alt: "Breite Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-accent: "Syne", "Helvetica Neue", Arial, sans-serif;
  --f-ornament: "Inknut Antiqua", Georgia, serif;

  /* One design pixel from the 1920px JPEG. Every space and type size is
     N * --u, so resizing the window scales the page as a whole. */
  --artboard: 1920;
  --u: calc(100vw / var(--artboard));

  --max-width: none;
  --gutter: calc(86 * var(--u));

  --header-h: calc(80 * var(--u));
  --header-h-scrolled: calc(64 * var(--u));
  --logo-h: calc(44 * var(--u));

  --motion-duration: 1000ms;
  --motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-stagger: 110ms;
  --motion-distance: calc(34 * var(--u));

  /* White type on photos: a tight, mid-opacity edge so glyphs hold on pale
     areas, plus a soft bloom. No box, no stroke, no hard black rim. */
  --type-on-photo-shadow:
    0 0 0.03em rgba(0, 0, 0, 0.48),
    0 0.5px 0.1em rgba(0, 0, 0, 0.38),
    0 1px 0.22em rgba(0, 0, 0, 0.22);

  /* Flipped to 0 when the user prefers reduced motion, so a single
     multiplier can neutralise every transform-based reveal at once. */
  --motion-scale: 1;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-scale: 0;
    --motion-duration: 1ms;
  }
}

/* Phone: still width-proportional, but from a narrower artboard so type
   stays readable after the layout stacks. */
@media (max-width: 860px) {
  :root {
    --u: calc(100vw / 430);
    --gutter: 5.6vw;
    --header-h: 14.2vw;
    --header-h-scrolled: 13vw;
    --logo-h: 8.2vw;
  }

  .tb-hero__heading,
  .tb-split__heading,
  .tb-statement__heading,
  .tb-flavor__heading,
  .tb-menu__link,
  .tb-header__page,
  .tb-reserve__col,
  .tb-reserve__line,
  .tb-reserve__label {
    font-optical-sizing: auto;
    font-variation-settings: normal;
    letter-spacing: 0 !important;
  }
}