/* Turbeings design tokens.
   The world is set by depth and time of day, not by a theme toggle.
   Every colour is sampled from the Sinai photographs; gold exists only as light inside images. */

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* The site's two faces, Heuvel Grotesk (MAIN) and CS Edna (ACCENT), are licensed from Envato
   Elements; their @font-face rules are in the block at the end of this file, written by
   tools/fonts-envato.py from assets-src/fonts-envato/. */

:root {
  /* ---------- Colour: the four place colours ---------- */
  --ink: #0b1a1c;          /* deep water, night */
  --reef: #123c3f;         /* mid water */
  --sand: #efe6d6;         /* paper, day, shore sections only */
  --granite: #b5573a;      /* mountains; the single action colour */

  /* Tints, derived from the four. Contrast noted against the surface they are used on. */
  --ink-2: #0f2427;        /* raised ink: form fields, map ground */
  --ink-3: #16302f;        /* hairlines on ink */
  --reef-2: #194a4d;       /* raised reef */
  --reef-3: #2a5b5c;       /* hairlines on reef */
  --sand-2: #b0c4c1;       /* secondary text on ink (9.8:1), reef (6.6:1), raised reef (5.4:1); tinted from the water's teal, never neutral grey */
  --sand-3: #879a97;       /* tertiary marks on dark, non-text only (UI-safe 4.1:1 on reef) */
  --sand-4: #e4d8c3;       /* shade of paper */
  --sand-5: #d3c4a9;       /* hairlines on sand */
  --ink-soft: #3d4a48;     /* secondary text on sand (8.2:1) */
  --granite-fill: #a04a30; /* button fill: sand label at 4.8:1 */
  --granite-press: #8c3f28;/* hover and pressed fill */
  --granite-line: #c4694b; /* granite marks on ink (non-text) */
  --night: #081315;        /* deepest night, footer ground */

  /* Text roles (the motion agent may retint these with depth) */
  --fg: var(--sand);
  --fg-2: var(--sand-2);
  --bg: var(--ink);
  --line: var(--ink-3);

  /* ---------- Time of day and depth ----------
     Dawn defaults. The motion agent interpolates these with scroll:
     dawn, noon, dusk, night on the shore; teal to ink with depth underwater. */
  --sky-top: #c9c2cf;      /* pale dawn violet-grey, top of the hero sky */
  --sky-bottom: #e9b47e;   /* dawn gold at the horizon (light, never UI) */
  --water: #123c3f;        /* the water colour at the current depth */
  --depth: 0;              /* metres, written by the gauge (unitless) */
  --daylight: 1;           /* 1 = full day, 0 = night */

  /* ---------- Type ----------
     Two faces, everywhere (Max, 2026-10-08). MAIN carries every heading's words and all body copy;
     ACCENT carries one or two words in a heading (<em class="accent">), never body copy. Mono stays
     only where text is data or a label: the gauge, depths, times, prices, coordinates, soundings and
     the small uppercase keys. Swap a face by its token, here or in the block at the end of the file. */
  --font-main: "Heuvel Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-accent: "CS Edna", "Heuvel Grotesk", ui-sans-serif, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* the old role names, kept so every selector follows the two faces */
  --font-display: var(--font-main);
  --font-body: var(--font-main);
  --font-chart: var(--font-main);       /* chart place names: the main face in italic */
  --font-hero-main: var(--font-main);
  --font-hero-accent: var(--font-accent);

  /* Weights (MAIN is variable). Light for display sizes, regular for reading: under 18px nothing
     goes lighter than 400; light text on dark water reads heavier, so headings sit at 300. */
  --w-display: 450;      /* h1, h2, statements, the film's lines: a step up from 300 (Max, 2026-10-08: "slightly bolder") */
  --w-title: 480;        /* large titles at 28 to 42px: plate, base, door and ledger names */
  --w-heading: 560;      /* h3 at 22 to 28px */
  --w-lead: 360;         /* leads at 18 to 21px */
  --w-body: 400;         /* body copy at 16 to 17px */
  --w-ui: 520;           /* nav links, arrow links, labels on fields */
  --w-strong: 600;
  --font-hero-main-weight: var(--w-display);

  /* The accent's optical match to MAIN (tools/fonts-envato.py writes the same values). The accent
     is CS Edna Italic, the true italic cut (Max, 2026-10-08), declared font-style: italic so no
     slant is synthesised. Beside Heuvel 300 its x-height is short and its letters narrow, so it
     is set 10% larger with a touch of open tracking; it shares the baseline. */
  --accent-style: italic;
  --accent-weight: 400;
  --accent-size: 1.1em;
  --accent-track: 0.01em;
  --accent-shift: 0em;   /* baseline nudge, if the accent sits high or low against MAIN */
  --hero-accent-style: var(--accent-style);
  --hero-accent-weight: var(--accent-weight);
  --hero-accent-size: var(--accent-size);

  --step-film: clamp(3rem, 1rem + 6.4vw, 7.5rem);          /* the film's title, 48 to 120 */
  --step-beat: clamp(2.25rem, 1rem + 4.2vw, 5.25rem);      /* the film's chapter lines, 36 to 84 */
  /* the intro's type is a third larger than the content's (Max, 2026-10-08: bigger, not bolder) */
  --film-scale: 1.33;

  /* Fluid scale, 390 to 1440 viewport */
  --step--2: 0.75rem;                                     /* 12px mono labels */
  --step--1: 0.875rem;                                    /* 14px captions */
  --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);     /* body 16 to 17 */
  --step-1: clamp(1.125rem, 1.05rem + 0.33vw, 1.3125rem); /* lead 18 to 21 */
  --step-2: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);     /* h3 22 to 28 */
  --step-3: clamp(1.75rem, 1.4rem + 1.5vw, 2.625rem);     /* small display 28 to 42 */
  --step-4: clamp(2.25rem, 1.6rem + 2.7vw, 3.75rem);      /* section display 36 to 60 */
  --step-5: clamp(2.5rem, 1.35rem + 4.6vw, 5.25rem);      /* the one statement 40 to 84 */
  --step-hero: clamp(2.875rem, 1.6rem + 5.2vw, 6rem);     /* hero 46 to 96 */
  --step-glyph: clamp(4.5rem, 2rem + 10vw, 11rem);        /* the nine letters */

  --lh-display: 0.98;     /* multi-line headings sit tight (Max, 2026-10-08) */
  --lh-hero: 0.96;        /* heroes, statements and the film's title */
  --lh-heading: 1.12;
  --lh-body: 1.6;          /* light text on dark water: a touch more leading than on paper */
  --track-display: -0.028em;  /* MAIN at 300 opens up at display sizes; pulled in */
  --track-heading: -0.012em;
  --track-label: 0.06em;
  --measure: 62ch;

  /* ---------- Space: 4px base ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px; --s-12: 192px;

  /* Section spacing weighted by importance (mobile drops a tier, keeps the weighting) */
  --section-connective: clamp(64px, 3rem + 3vw, 96px);
  --section-standard: clamp(80px, 3.5rem + 5vw, 128px);
  --section-pivotal: clamp(96px, 3rem + 9vw, 192px);

  --gutter: clamp(1.25rem, 0.6rem + 3.6vw, 4rem);
  --gap: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --wrap: 1440px;
  --nav-h: 68px;

  /* ---------- Radii: one system ----------
     Buttons are pills, fields 6px, media and plates stay square like printed plates. */
  --r-pill: 999px;
  --r-field: 6px;
  --r-media: 2px;

  /* ---------- Z-index scale ---------- */
  --z-below: -1;
  --z-base: 0;
  --z-raised: 1;
  --z-overlay: 10;      /* in-section overlays, map guard */
  --z-gauge: 40;
  --z-nav: 50;
  --z-dialog: 60;
  --z-preloader: 80;
  --z-grain: 90;        /* grain sits over everything, pointer-events none */
  --z-skip: 100;

  /* ---------- Motion ---------- */
  --dur-1: 0.4s;
  --dur-2: 0.8s;
  --dur-3: 1.2s;
  --dur-press: 0.14s;
  --dur-hover: 0.18s;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-inout: cubic-bezier(0.77, 0, 0.175, 1);

  color-scheme: dark;
}

/* envato-fonts:begin (written by tools/fonts-envato.py; do not edit by hand) */
@font-face {
  font-family: "Heuvel Grotesk";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/heuvel-grotesk-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Heuvel Grotesk";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/heuvel-grotesk-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Heuvel Grotesk";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/heuvel-grotesk-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Heuvel Grotesk";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/heuvel-grotesk-400-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "CS Edna";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cs-edna-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "CS Edna";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cs-edna-400-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --font-main: "Heuvel Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-accent: "CS Edna", "Heuvel Grotesk", ui-sans-serif, sans-serif;
  /* CS Edna Italic, a true italic cut of a high-contrast flared sans (Max, 2026-10-08). Next
     to Heuvel 300 its x-height is short and its letters narrow: 1.1em matches the
     x-heights, +0.01em keeps the condensed italic from clotting, same baseline. */
  --accent-style: italic;
  --accent-weight: 400;
  --accent-size: 1.1em;
  --accent-track: 0.01em;
  --accent-shift: 0em;
}
/* envato-fonts:end */