/* ==============================================================
   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 10px 30px 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: 500;
  --font-semibold: 600;
}
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: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 20px;
  --heading-md: clamp(36px,3.3vw,56px);
  --type-counter: 12px;
  --type-button-small: 14px;
  --type-button: 16px;
  --type-body: 16.8px;
  --type-text-link: 18px;
  --type-faq: 20px;
  --type-service: 22px;
  --type-process: 28px;
  --type-project: 32px;
  --type-blog: 38px;
  --type-section: 40px;
  --type-more: 48px;
  --type-wordmark: 273.6px;
  --lh-section: 44.8px;
  --tracking-body: -.02em;
  --tracking-display: -.04em;
  --fs-h2: 40px;
  --lh-h2: 44.8px;
  --ls-h2: -2px;
  --fs-stat: 40px;
  --lh-stat: 44.8px;
  --ls-stat: -.8px;
  --fs-title: 32px;
  --lh-title: 37.12px;
  --ls-title: -1.28px;
  --fs-statement: 40px;
  --lh-statement: 44.8px;
  --ls-statement: -2px;
  --fs-blog: 38px;
  --lh-blog: 47.5px;
  --ls-blog: -1.9px;
  --fs-md: 28px;
  --lh-md: 30.24px;
  --ls-md: -1.4px;
  --fs-list: 22px;
  --lh-list: 29.04px;
  --ls-list: -.66px;
  --fs-faq: 20px;
  --lh-faq: 26.4px;
  --ls-faq: -.6px;
  --fs-link: 18px;
  --lh-link: 18.72px;
  --ls-link: -.9px;
  --fs-body: 16.8px;
  --lh-body: 20.832px;
  --ls-body: -.336px;
  --fs-meta: 16px;
  --lh-meta: 19.2px;
  --ls-meta: -.64px;
  --fs-text: 16px;
  --lh-text: 24px;
  --ls-text: -.64px;
  --fs-pill: 14px;
  --lh-pill: 17.36px;
  --ls-pill: -.56px;
  --fs-tiny: 12px;
  --lh-tiny: 14.4px;
  --ls-tiny: -.48px;
  --fs-btn: 14px;
  --lh-btn: 17.36px;
  --ls-btn: -.56px;
}
@media(min-width:1400px) {
  :root {
    --fs-h2: 58.08px;
    --lh-h2: 65.0496px;
    --ls-h2: -2.904px;
    --fs-stat: 58.08px;
    --lh-stat: 65.0496px;
    --ls-stat: -2.904px;
    --fs-title: 48px;
    --lh-title: 55.68px;
    --ls-title: -1.92px;
  }
}
@media(max-width:999px) {
  :root {
    --fs-h2: 37.5px;
    --lh-h2: 42px;
    --ls-h2: -1.875px;
    --fs-statement: 37.5px;
    --lh-statement: 42px;
    --ls-statement: -1.875px;
    --fs-blog: 24px;
    --lh-blog: 30px;
    --ls-blog: -1.2px;
    --fs-md: 24px;
    --lh-md: 25.92px;
    --ls-md: -1.2px;
    --fs-faq: 19px;
    --lh-faq: 25.08px;
    --ls-faq: -.57px;
    --fs-body: 15.75px;
    --lh-body: 19.53px;
    --ls-body: -.315px;
    --fs-meta: 15px;
    --lh-meta: 18px;
    --ls-meta: -.6px;
    --fs-text: 15px;
    --lh-text: 22.5px;
    --ls-text: -.6px;
  }
}
@media(max-width:700px) {
  :root {
    --fs-h2: 28px;
    --lh-h2: 31.36px;
    --ls-h2: -1.4px;
    --fs-statement: 28px;
    --lh-statement: 31.36px;
    --ls-statement: -1.4px;
    --fs-stat: 28px;
    --lh-stat: 31.36px;
    --ls-stat: -.56px;
    --fs-title: 28px;
    --lh-title: 32.48px;
    --ls-title: -1.12px;
    --fs-blog: 20px;
    --lh-blog: 25px;
    --ls-blog: -1px;
    --fs-md: 20px;
    --lh-md: 22px;
    --ls-md: -1px;
    --fs-faq: 15px;
    --lh-faq: 19.8px;
    --ls-faq: -.45px;
    --fs-body: 14px;
    --lh-body: 17.36px;
    --ls-body: -.28px;
    --fs-meta: 14px;
    --lh-meta: 16.8px;
    --ls-meta: -.56px;
    --fs-text: 14px;
    --lh-text: 21px;
    --ls-text: -.56px;
  }
}

/* ---- Editorial layer: Instrument Serif display scale (only active under html.editorial) ---- */
html.editorial {
  --sf-h2: 48px;
  --sf-h2-lh: 1.05;
  --sf-title: 42px;
  --sf-title-lh: 1.05;
  --sf-statement: 50px;
  --sf-statement-lh: 1.08;
  --sf-md: 36px;
  --sf-md-lh: 1.08;
  --sf-stat: 60px;
  --sf-stat-lh: 1;
  --sf-name: 30px;
  --sf-name-lh: 1.05;
  --sf-ls: -.012em;
}
@media(min-width:1400px) {
  html.editorial {
    --sf-h2: 72px;
    --sf-title: 58px;
    --sf-statement: 58px;
    --sf-md: 42px;
    --sf-stat: 84px;
    --sf-name: 34px;
  }
}
@media(max-width:999px) {
  html.editorial {
    --sf-h2: 46px;
    --sf-title: 40px;
    --sf-statement: 44px;
    --sf-md: 34px;
    --sf-stat: 56px;
    --sf-name: 28px;
  }
}
@media(max-width:700px) {
  html.editorial {
    --sf-h2: 38px;
    --sf-title: 36px;
    --sf-statement: 36px;
    --sf-md: 30px;
    --sf-stat: 46px;
    --sf-name: 26px;
  }
}

/* ---- Layout: grid, gutters, hero and wordmark ---- */
:root {
  --radius: 20px;
  --side: clamp(18px,2.6vw,56px);
  --hero-gutter: 6px;
  --nav-gutter: 8px;
  --section-gap: clamp(110px,12vw,210px);
  --section-pad-top: clamp(72px,10.4vw,150px);
  --section-pad-bottom: clamp(72px,10.4vw,150px);
  --head-gap: clamp(48px,6.94vw,100px);
  --block-gap: clamp(72px,10.4vw,150px);
  --card-gap: clamp(40px,5.2vw,75px);
  --display-size: clamp(68px,14.6vw,240px);
  --hero-h: clamp(400px,40vw,640px);
  --cols: 12;
  --margin: 40px;
  --gutter: 25px;
  --col: calc((100% - 11 * var(--gutter)) / 12);
}
html.editorial {
  --fs-brand-narrow: 8.4vw;
  --fs-brand-narrower: 7.4vw;
  --header-h: 68px;
  --wm-h: min(18.1vw,380px);
  --hero-h: max(480px, calc(100svh - var(--header-h) - var(--hero-gutter)));
  --wine: #260c15;
  --shadow-sheet: 0 28px 70px rgb(0 0 0 / 16%);
  --ask-w: 720px;
  --ask-gap: 20px;
  --menu-size: 48px;
  --menu-inset: 12px;
  --hero-pad: 29px;
  --hero-wordmark-size: calc((100cqw - 2 * var(--hero-pad)) / 5.359);
  --footer-wordmark-size: calc(100cqw / 4.82);
}
@media(min-width:1800px) {
  :root {
    --margin: 64px;
    --gutter: 32px;
  }
}
@media(max-width:1439px) {
  :root {
    --margin: 32px;
    --gutter: 20px;
  }
}
@media(max-width:999px) {
  :root {
    --margin: 24px;
    --gutter: 16px;
  }
}
@media(max-width:700px) {
  :root {
    --side: 17px;
    --hero-gutter: 5px;
    --nav-gutter: 10px;
    --display-size: 14vw;
  }
}
@media(max-width:700px) {
  html.editorial {
    --header-h: 65px;
    --wm-h: 17.2vw;
    --hero-pad: 20px;
  }
}
@media(max-width:699px) {
  :root {
    --margin: 20px;
    --gutter: 12px;
  }
}