/* Arcmill Studio design tokens: the only place colour, type and spacing values are defined.
   Values come from the standing design package (desktop 1152px, mobile 390px).
   The mobile block at the bottom redefines tokens below the layout breakpoint; the
   breakpoint itself is repeated in site.css because custom properties cannot be
   used inside a media query. */

:root {
  /* ---- colour: brand suite, light ---- */
  --color-ink: #1c1c17;
  --color-ink-soft: #6b6a60;
  --color-ink-75: rgba(28, 28, 23, 0.75);
  --color-ink-85: rgba(28, 28, 23, 0.85);
  --color-paper: #eeede8;
  --color-paper-85: rgba(238, 237, 232, 0.85);
  --color-paper-raised: #f5f4ef;
  --color-rule: #d8d6cd;
  --color-rule-page: #cfcdc3;
  --color-accent: #343815;
  --color-accent-tint: #b4b87a;
  --color-accent-tint-30: rgba(180, 184, 122, 0.3);
  --color-accent-tint-40: rgba(180, 184, 122, 0.4);
  --color-accent-soft: #d9dbb8;
  --color-accent-soft-06: rgba(217, 219, 184, 0.06);
  --color-olive: #747746;
  --color-rust: #b4623a;
  --color-rust-soft: #e8c9b4;
  --color-rust-hover: #a83a1f;
  --color-stripe: #e4e2db;
  --color-on-dark: #eeede8;
  --color-on-dark-85: rgba(238, 237, 232, 0.85);
  --color-on-dark-72: rgba(238, 237, 232, 0.72);

  /* ---- type: families and weights ---- */
  --font-display: Manrope, system-ui, sans-serif;
  --font-body: Inter, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;

  /* ---- type: scale ---- */
  --text-h1: clamp(44px, 7vw, 92px);
  --text-h2: 48px;
  --text-h2-contact: 64px;
  --text-project-name: 56px;
  --text-title-bar: 44px;
  --text-pull: 28px;
  --text-lead: 24px;
  --text-menu: 20px;
  --text-hero: 20px;
  --text-lede: 18px;
  --text-tagline: 18px;
  --text-body: 16px;
  --text-small: 14px;
  --text-nav: 14px;
  --text-nav-pill: 13px;
  --text-eyebrow: 12px;
  --text-label: 11px;

  /* ---- type: line height ---- */
  --leading-h1: 1.02;
  --leading-h2: 1.05;
  --leading-h2-contact: 1.03;
  --leading-project-name: 1.05;
  --leading-pull: 1.3;
  --leading-lead: 1.4;
  --leading-tagline: 1.55;
  --leading-hero: 1.6;
  --leading-lede: 1.6;
  --leading-note: 1.6;
  --leading-small: 1.65;
  --leading-body: 1.7;

  /* ---- type: tracking ---- */
  --tracking-h1: -0.03em;
  --tracking-h2: -0.025em;
  --tracking-h2-contact: -0.03em;
  --tracking-eyebrow: 0.14em;
  --tracking-title-bar: 0.14em;
  --tracking-caption: 0.08em;

  /* ---- layout ---- */
  --container-max: 1152px;
  --container-pad: 32px;
  --header-height: 64px;
  --scroll-offset: 56px;
  --grid-5-7: 5fr 7fr;
  --grid-7-5: 7fr 5fr;
  --grid-half: 1fr 1fr;
  --grid-project-row: 2fr 6fr 4fr;
  --grid-project-panel: repeat(3, 1fr);
  --grid-rows-head-fill: auto 1fr;
  --measure-hero: min(680px, calc(100% - var(--hero-logo-width) - var(--container-pad)));
  --measure-projects-h2: 720px;
  --measure-lede: 440px;
  --measure-note: 420px;
  --portrait-max: 384px;
  --portrait-ratio: 4 / 5;
  --z-header: 40;

  /* ---- spacing: sections ---- */
  --space-section: 128px;
  --space-section-founder: 128px;
  --space-section-joely: 128px;
  --space-section-team: 96px;
  --space-hero-top: 96px;
  --space-hero-bottom: 88px;
  --space-projects-head-end: 24px;
  --space-projects-list-start: 56px;
  --space-projects-list-end: 64px;
  --space-project-row: 56px;
  --space-project-panel-end: 56px;

  /* ---- spacing: gaps ---- */
  --gap-grid: 64px;
  --gap-project-row: 24px;
  --gap-project-panel: 40px;
  --gap-prose: 20px;
  --gap-header: 24px;
  --gap-nav: 28px;
  --gap-actions: 28px;
  --gap-eyebrow: 10px;
  --gap-cta-icon: 8px;
  --gap-project-meta: 16px;
  --gap-footer: 24px;
  --gap-footer-links: 24px;
  --gap-footer-brand: 14px;

  /* ---- spacing: stacked margins ---- */
  --space-eyebrow-to-h2: 20px;
  --space-h2-to-role: 12px;
  --space-joely-role-to-bio: 12px;
  --space-portrait-top: 32px;
  --space-hero-copy: 32px;
  --space-hero-actions: 36px;
  --space-projects-h2: 24px;
  --space-tagline: 14px;
  --space-description: 0;
  --space-read-more: 24px;
  --space-panel-label-pad: 20px;
  --space-panel-text: 12px;
  --space-panel-link: 20px;
  --space-pull-pad: 28px;
  --space-work-prose-top: 8px;
  --space-contact-lede: 20px;
  --space-contact-actions-top: 16px;
  --space-contact-note: 24px;
  --space-underline: 2px;
  --space-project-name: 0;
  --space-footer-top: 40px;
  --space-footer-bottom: 40px;

  /* ---- components ---- */
  --logo-header: 40px;
  --logo-footer: 34px;
  --hero-logo-width: clamp(180px, 24vw, 300px);
  --hero-logo-right: 32px;
  --hero-logo-bottom: 72px;
  --title-bar-height: 56px;
  --title-bar-stroke: 14px;
  --title-bar-bleed: -32px;
  --title-bar-pad: 24px;
  --dot: 6px;
  --pill-radius: 999px;
  --pill-pad-block: 14px;
  --pill-pad-inline: 26px;
  --nav-pill-pad-block: 9px;
  --nav-pill-pad-inline: 18px;
  --portrait-pad: 16px;
  --stripe-a: 12px;
  --stripe-b: 24px;
  --stripe-angle: 135deg;
  --hairline: 1px;
  --menu-bar-width: 24px;
  --menu-bar-height: 2px;
  --menu-bar-gap: 6px;
  --tap-target: 44px;
  --header-blur: 10px;
  --hover-fade: 0.7;
  --focus-ring: 2px;
  --focus-offset: 3px;
  --round: 50%;
}

/* ---- mobile, from the 390px design ---- */
@media (max-width: 900px) {
  :root {
    --text-h1: 44px;
    --text-h2: 34px;
    --text-h2-contact: 44px;
    --text-project-name: 40px;
    --text-title-bar: 24px;
    --text-pull: 24px;
    --text-lead: 21px;
    --text-hero: 17px;
    --text-lede: 17px;
    --text-tagline: 17px;

    --leading-h1: 1.04;
    --leading-h2: 1.08;
    --leading-tagline: 1.5;
    --tracking-title-bar: 0.1em;

    --container-pad: 20px;
    --header-height: 60px;
    --scroll-offset: 60px;

    --space-section: 72px;
    --space-section-founder: 64px;
    --space-section-joely: 64px;
    --space-section-team: 56px;
    --space-hero-top: 48px;
    --space-hero-bottom: 56px;
    --space-projects-head-end: 8px;
    --space-projects-list-start: 36px;
    --space-projects-list-end: 40px;
    --space-project-row: 32px;
    --space-project-panel-end: 36px;

    --gap-prose: 18px;
    --gap-project-meta: 14px;
    --gap-project-panel: 24px;
    --gap-footer: 20px;
    --gap-footer-links: 20px;

    --space-eyebrow-to-h2: 16px;
    --space-h2-to-role: 10px;
    --space-portrait-top: 24px;
    --space-prose-top: 28px;
    --space-hero-copy: 24px;
    --space-hero-logo: 48px;
    --space-hero-actions: 28px;
    --space-projects-h2: 28px;
    --space-tagline: 10px;
    --space-description: 14px;
    --space-read-more: 20px;
    --space-panel-label-pad: 16px;
    --space-panel-text: 10px;
    --space-panel-link: 16px;
    --space-pull-pad: 22px;
    --space-contact-lede: 16px;
    --space-contact-email: 20px;
    --space-contact-note: 20px;
    --space-menu-top: 8px;
    --space-menu-bottom: 24px;
    --space-menu-link: 14px;
    --space-menu-pill: 20px;
    --space-footer-top: 32px;
    --space-project-name: 14px;
    --space-contact-cta: 28px;
    --pill-pad-block-wide: 16px;

    --logo-header: 34px;
    --logo-footer: 30px;
    --hero-logo-width: 220px;
    --title-bar-height: 44px;
    --title-bar-stroke: 10px;
    --title-bar-bleed: -20px;
    --title-bar-pad: 14px;
    --portrait-pad: 14px;
  }
}