/* ==============================================================
   TOKENS — the single source for every design value.
   Loaded FIRST (before site.css). Other CSS files only USE these with var(--name); they never declare tokens.
   To change a colour, size, gutter or breakpoint value: change it here and nowhere else.
   Checked by: node tools/tokens/snapshot.mjs  (+ compare.mjs against an earlier snapshot)
   Generated from the old per-file blocks by tools/tokens/extract.mjs, tidied by tools/tokens/curate.mjs.
   ============================================================== */

/* ---- Colour ---- */
:root {
  --black: #000000;
  --ink: #0A0A0A;
  --dark: #131313;
  --night: #050503;
  --ink-secondary: #373737;
  --muted: #6b6b6b;
  --gray-faint: #979797;
  --line: #CDCDCD;
  --surface: #F5F5F5;
  --surface-raised: #F6F6F6;
  --paper: #FFFFFF;
  --white: #FFFFFF;
  --white-20: rgb(255 255 255 / 20%);
  --white-70: rgb(255 255 255 / 72%);
  --muted-on-dark: #a3a3a3;
  --scrim: rgb(0 0 0 / 45%);
  --shadow-float: 0 0.625rem 1.875rem rgb(0 0 0 / 12%);
  --red: #F53500;
  --success: #009E47;
  --blue: var(--red);
}
html.editorial {
  --paper: #f7f7f5;
  --ink: #101110;
  --line: #d9dad5;
  --red: #f0390a;
  --highlight: #f65e37;
  --scrim-strong: rgb(0 0 0 / 65%);
  --glass: rgb(16 17 16 / 48%);
}

/* ---- Font families and weights ---- */
:root {
  --display: "Inter Display", "InterVariable", "Inter", Arial, sans-serif;
  --body: "InterVariable", "Inter", Arial, sans-serif;
  --font-regular: 400;
  --font-medium: 400;
  --font-semibold: 400;
}
html.editorial {
  --serif: "Instrument Serif","Times New Roman",Georgia,serif;
}

/* ---- Type scale: Inter, measured from the Craftica reference (desktop 1440 / base / tablet / phone) ---- */
:root {
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --heading-md: clamp(2.25rem,3.3vw,3.5rem);
  --type-counter: 0.75rem;
  --type-button-small: 0.875rem;
  --type-button: 1rem;
  --type-body: 1.05rem;
  --type-text-link: 1.125rem;
  --type-faq: 1.25rem;
  --type-service: 1.375rem;
  --type-process: 1.75rem;
  --type-project: 2rem;
  --type-blog: 2.375rem;
  --type-section: 2.5rem;
  --type-more: 3rem;
  --type-wordmark: 17.1rem;
  --lh-section: 2.8rem;
  --tracking-body: -.02em;
  --tracking-display: -.04em;
  --fs-h2: 2.5rem;
  --lh-h2: 2.8rem;
  --ls-h2: -0.125rem;
  --fs-stat: 2.5rem;
  --lh-stat: 2.8rem;
  --ls-stat: -0.05rem;
  --fs-title: 2rem;
  --lh-title: 2.32rem;
  --ls-title: -0.08rem;
  --fs-statement: 2.5rem;
  --lh-statement: 2.8rem;
  --ls-statement: -0.125rem;
  --fs-blog: 2.375rem;
  --lh-blog: 2.96875rem;
  --ls-blog: -0.11875rem;
  --fs-md: 1.75rem;
  --lh-md: 1.89rem;
  --ls-md: -0.0875rem;
  --fs-list: 1.375rem;
  --lh-list: 1.815rem;
  --ls-list: -0.04125rem;
  --fs-faq: 1.25rem;
  --lh-faq: 1.65rem;
  --ls-faq: -0.0375rem;
  --fs-link: 1.125rem;
  --lh-link: 1.17rem;
  --ls-link: -0.05625rem;
  --fs-body: 1.05rem;
  --lh-body: 1.302rem;
  --ls-body: -0.021rem;
  --fs-meta: 1rem;
  --lh-meta: 1.2rem;
  --ls-meta: -0.04rem;
  --fs-text: 1rem;
  --lh-text: 1.5rem;
  --ls-text: -0.04rem;
  --fs-pill: 0.875rem;
  --lh-pill: 1.085rem;
  --ls-pill: -0.035rem;
  --fs-tiny: 0.75rem;
  --lh-tiny: 0.9rem;
  --ls-tiny: -0.03rem;
  --fs-btn: 0.875rem;
  --lh-btn: 1.085rem;
  --ls-btn: -0.035rem;
  /* Paragraph text: 18px at 1440px (owner rule, 2026-11-04); steps down on smaller screens */
  --fs-paragraph: 1.125rem;
  --lh-paragraph: 1.575rem;
  --ls-paragraph: -0.0225rem;
}
@media(min-width:1400px) {
  :root {
    --fs-h2: 3.63rem;
    --lh-h2: 4.0656rem;
    --ls-h2: -0.1815rem;
    --fs-stat: 3.63rem;
    --lh-stat: 4.0656rem;
    --ls-stat: -0.1815rem;
    --fs-title: 3rem;
    --lh-title: 3.48rem;
    --ls-title: -0.12rem;
  }
}
@media(max-width:999px) {
  :root {
    --fs-h2: 2.34375rem;
    --lh-h2: 2.625rem;
    --ls-h2: -0.11719rem;
    --fs-statement: 2.34375rem;
    --lh-statement: 2.625rem;
    --ls-statement: -0.11719rem;
    --fs-blog: 1.5rem;
    --lh-blog: 1.875rem;
    --ls-blog: -0.075rem;
    --fs-md: 1.5rem;
    --lh-md: 1.62rem;
    --ls-md: -0.075rem;
    --fs-faq: 1.1875rem;
    --lh-faq: 1.5675rem;
    --ls-faq: -0.03562rem;
    --fs-body: 0.98438rem;
    --lh-body: 1.22063rem;
    --ls-body: -0.01969rem;
    --fs-meta: 0.9375rem;
    --lh-meta: 1.125rem;
    --ls-meta: -0.0375rem;
    --fs-text: 0.9375rem;
    --lh-text: 1.40625rem;
    --ls-text: -0.0375rem;
    --fs-paragraph: 1.0625rem;
    --lh-paragraph: 1.4875rem;
    --ls-paragraph: -0.02125rem;
  }
}
@media(max-width:700px) {
  :root {
    --fs-h2: 1.75rem;
    --lh-h2: 1.96rem;
    --ls-h2: -0.0875rem;
    --fs-statement: 1.75rem;
    --lh-statement: 1.96rem;
    --ls-statement: -0.0875rem;
    --fs-stat: 1.75rem;
    --lh-stat: 1.96rem;
    --ls-stat: -0.035rem;
    --fs-title: 1.75rem;
    --lh-title: 2.03rem;
    --ls-title: -0.07rem;
    --fs-blog: 1.25rem;
    --lh-blog: 1.5625rem;
    --ls-blog: -1px;
    --fs-md: 1.25rem;
    --lh-md: 1.375rem;
    --ls-md: -1px;
    --fs-faq: 0.9375rem;
    --lh-faq: 1.2375rem;
    --ls-faq: -0.02813rem;
    --fs-body: 0.875rem;
    --lh-body: 1.085rem;
    --ls-body: -0.0175rem;
    --fs-meta: 0.875rem;
    --lh-meta: 1.05rem;
    --ls-meta: -0.035rem;
    --fs-text: 0.875rem;
    --lh-text: 1.3125rem;
    --ls-text: -0.035rem;
    --fs-paragraph: 0.9375rem;
    --lh-paragraph: 1.3125rem;
    --ls-paragraph: -0.01875rem;
  }
}

/* ---- Editorial layer: Instrument Serif display scale (only active under html.editorial) ---- */
html.editorial {
  --sf-h2: 3rem;
  --sf-h2-lh: 1.05;
  --sf-title: 2.625rem;
  --sf-title-lh: 1.05;
  --sf-statement: 3.125rem;
  --sf-statement-lh: 1.08;
  --sf-md: 2.25rem;
  --sf-md-lh: 1.08;
  --sf-stat: 3.75rem;
  --sf-stat-lh: 1;
  --sf-name: 1.875rem;
  --sf-name-lh: 1.05;
  --sf-ls: -.012em;
}
@media(min-width:1400px) {
  html.editorial {
    --sf-h2: 4.5rem;
    --sf-title: 3.625rem;
    --sf-statement: 3.625rem;
    --sf-md: 2.625rem;
    --sf-stat: 5.25rem;
    --sf-name: 2.125rem;
  }
}
@media(max-width:999px) {
  html.editorial {
    --sf-h2: 2.875rem;
    --sf-title: 2.5rem;
    --sf-statement: 2.75rem;
    --sf-md: 2.125rem;
    --sf-stat: 3.5rem;
    --sf-name: 1.75rem;
  }
}
@media(max-width:700px) {
  html.editorial {
    --sf-h2: 2.375rem;
    --sf-title: 2.25rem;
    --sf-statement: 2.25rem;
    --sf-md: 1.875rem;
    --sf-stat: 2.875rem;
    --sf-name: 1.625rem;
  }
}

/* ---- Layout: grid, gutters, hero and wordmark ---- */
:root {
  --radius: 1.25rem;
  --side: clamp(1.125rem,2.6vw,3.5rem);
  --hero-gutter: 0.375rem;
  --nav-gutter: 0.5rem;
  --section-gap: clamp(6.875rem,12vw,13.125rem);
  --section-pad-top: clamp(4.5rem,10.4vw,9.375rem);
  --section-pad-bottom: clamp(4.5rem,10.4vw,9.375rem);
  --head-gap: clamp(3rem,6.94vw,6.25rem);
  --block-gap: clamp(4.5rem,10.4vw,9.375rem);
  --card-gap: clamp(2.5rem,5.2vw,4.6875rem);
  --display-size: clamp(4.25rem,14.6vw,15rem);
  --hero-h: clamp(25rem,40vw,40rem);
  --cols: 12;
  --margin: 2.5rem;
  --gutter: 1.5625rem;
  --col: calc((100% - 11 * var(--gutter)) / 12);
}
html.editorial {
  --fs-brand-narrow: 8.4vw;
  --fs-brand-narrower: 7.4vw;
  --header-h: 4.25rem;
  --wm-h: min(18.1vw,23.75rem);
  --hero-h: max(30rem, calc(100svh - var(--header-h) - var(--hero-gutter)));
  --wine: #260c15;
  --shadow-sheet: 0 1.75rem 4.375rem rgb(0 0 0 / 16%);
  --ask-w: 45rem;
  --ask-gap: 1.25rem;
  --sheet-w: 40rem;
  --nav-gap: clamp(2rem,3.25vw,3.625rem);
  --menu-size: 3rem;
  --menu-inset: 0.75rem;
  --hero-pad: 1.8125rem;
  --hero-edge: calc(var(--margin) - var(--hero-gutter));   /* hero tagline and time sit on the page grid: column 1 left, column 12 right */
  --hero-wordmark-size: calc((100cqw - 2 * var(--hero-pad)) / 5.359);
  --footer-wordmark-size: calc(100cqw / 4.82);
}
@media(max-width:999px) {
  :root {
    --margin: 1.5rem;
    --gutter: 1rem;
  }
}
@media(max-width:700px) {
  :root {
    --side: 1.0625rem;
    --hero-gutter: 0.3125rem;
    --nav-gutter: 0.625rem;
    --display-size: 14vw;
  }
}
@media(max-width:700px) {
  html.editorial {
    --header-h: 4.0625rem;
    --wm-h: 17.2vw;
    --hero-pad: 1.25rem;
  }
}
@media(max-width:699px) {
  :root {
    --margin: 1.25rem;
    --gutter: 0.75rem;
  }
}