/* ============================================================
   PROOF / 26 — Typographic system
   Single source of truth for type, type spacing and layout rhythm.
   Component layout/colour lives in v2.css.

   References studied:
   - Remarque: strict type roles, 17px body floor, token tiers,
     generous leading, real-capital labels, self-hosted fonts.
   - Typographics: fluid body/heading endpoints, baseline rhythm,
     local scaling via custom properties.
   - Recursive: variable-axis discipline; weight/width as hierarchy.
   - Fontsource: self-host, version-lock, licence-first font handling.
   ============================================================ */

/* ---------- Faces ---------- */

@font-face {
  font-family: "Panchang";
  src: url("assets/fonts/next/panchang-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Panchang";
  src: url("assets/fonts/next/panchang-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Panchang";
  src: url("assets/fonts/next/panchang-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/next/manrope-400_600.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("assets/fonts/next/space-grotesk-400_600.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Author";
  src: url("assets/fonts/next/author-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Author";
  src: url("assets/fonts/next/author-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Author";
  src: url("assets/fonts/next/author-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Azeret Mono";
  src: url("assets/fonts/next/azeret-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Azeret Mono";
  src: url("assets/fonts/next/azeret-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Core tokens ---------- */

:root {
  --font-display: "Author", "Helvetica Neue", system-ui, sans-serif;
  --font-accent: "Panchang", "Arial Black", system-ui, sans-serif;
  --font-body: "Author", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-display: 500;
  --weight-card: 600;
  --weight-accent: 500;

  --transform-display: none;
  --transform-label: uppercase;
  --transform-ui: uppercase;
  --transform-body: none;

  /* Display / editorial */
  --text-hero: clamp(4rem, 5.8vw, 5.5rem);
  --text-identity: clamp(1.75rem, 2.4vw, 2.25rem);
  --text-intro: clamp(4rem, 7vw, 6rem);
  --text-page: clamp(3.5rem, 5.6vw, 5.5rem);
  --text-display-section: clamp(3.25rem, 4.6vw, 4.25rem);
  --text-display-about: clamp(3rem, 4vw, 4rem);
  --text-display-contact: clamp(3.5rem, 4.8vw, 4.5rem);
  --text-display-more: clamp(3.5rem, 4.8vw, 4.5rem);

  /* Headings / cards */
  --text-title-card: clamp(1.5rem, 2vw, 2rem);
  --text-title-card-wide: clamp(1.7rem, 2.2vw, 2rem);
  --text-title-more: clamp(1.6rem, 2.2vw, 2rem);
  --text-title-feature: clamp(1.15rem, 1.5vw, 1.5rem);
  --text-section: clamp(2rem, 2.6vw, 2.4rem);
  --text-section-small: clamp(1.5rem, 2.2vw, 2rem);
  --text-case-contact: clamp(2.5rem, 3.2vw, 3rem);
  --text-mark: 1.125rem;
  --text-number: 1rem;
  --text-specimen: clamp(2.75rem, 4.5vw, 4.5rem);
  --text-face-sample: clamp(2.5rem, 5vw, 4.5rem);

  /* Reading */
  --text-promise: clamp(1.75rem, 2.5vw, 2.5rem);
  --text-lead: clamp(1.15rem, 1.6vw, 1.5rem);
  --text-body-lg: clamp(1.15rem, 1.6vw, 1.35rem);
  --text-body: clamp(1.0625rem, 1.25vw, 1.125rem);
  --text-small: clamp(0.9375rem, 1vw, 1rem);

  /* Utility / interface — 11px floor for meta, 10px for micro */
  --text-meta: clamp(0.6875rem, 0.72vw, 0.75rem);
  --text-micro: clamp(0.625rem, 0.66vw, 0.6875rem);
  --text-label: clamp(0.6875rem, 0.72vw, 0.75rem);
  --text-nav: clamp(0.6875rem, 0.72vw, 0.75rem);
  --text-button: clamp(0.6875rem, 0.72vw, 0.75rem);
  --text-status: clamp(0.625rem, 0.66vw, 0.6875rem);

  /* Leading */
  --leading-hero: 0.95;
  --leading-identity: 1.08;
  --leading-intro: 0.96;
  --leading-page: 0.98;
  --leading-display-section: 1;
  --leading-display-about: 1.04;
  --leading-display-contact: 1;
  --leading-display-more: 1;
  --leading-title-card: 1.18;
  --leading-title-card-wide: 1.12;
  --leading-title-more: 1.12;
  --leading-title-feature: 1.1;
  --leading-section: 1.15;
  --leading-section-small: 1.15;
  --leading-case-contact: 1.05;
  --leading-heading: 1.05;
  --leading-promise: 1.1;
  --leading-lead: 1.35;
  --leading-body: 1.65;
  --leading-body-lg: 1.55;
  --leading-small: 1.5;
  --leading-meta: 1.45;
  --leading-label: 1.4;
  --leading-micro: 1.4;
  --leading-nav: 1.2;
  --leading-button: 1;
  --leading-status: 1.3;
  --leading-number: 1;

  /* Tracking */
  --tracking-hero: -0.025em;
  --tracking-identity: -0.02em;
  --tracking-intro: -0.03em;
  --tracking-page: -0.03em;
  --tracking-display-section: -0.02em;
  --tracking-display-about: -0.02em;
  --tracking-display-contact: -0.025em;
  --tracking-display-more: -0.025em;
  --tracking-title-card: -0.01em;
  --tracking-title-card-wide: -0.015em;
  --tracking-title-more: -0.015em;
  --tracking-title-feature: -0.01em;
  --tracking-section: -0.005em;
  --tracking-case-contact: -0.02em;
  --tracking-heading: -0.02em;
  --tracking-promise: -0.02em;
  --tracking-lead: -0.01em;
  --tracking-body: 0em;
  --tracking-small: 0em;
  --tracking-meta: 0.08em;
  --tracking-micro: 0.06em;
  --tracking-label: 0.13em;
  --tracking-nav: 0.12em;
  --tracking-button: 0.1em;
  --tracking-status: 0.08em;
  --tracking-number: -0.02em;
  --tracking-mark: -0.025em;
  --tracking-accent: -0.035em;
  --offset-line: clamp(0rem, 4vw, 4rem);

  /* ---------- Spacing ---------- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6rem;
  --space-13: 8rem;
  --space-14: 10rem;

  --space-text-xs: var(--space-1);
  --space-text-sm: var(--space-2);
  --space-text: var(--space-3);
  --space-text-lg: var(--space-4);
  --space-text-xl: var(--space-6);
  --space-component-sm: var(--space-3);
  --space-component: var(--space-5);
  --space-component-lg: var(--space-7);
  --space-block-sm: var(--space-8);
  --space-block: var(--space-10);
  --space-block-lg: var(--space-12);
  --space-section-sm: clamp(3rem, 5vw, 5rem);
  --space-section: clamp(4.5rem, 8vw, 8rem);
  --space-section-lg: clamp(6rem, 10vw, 10rem);
  --page-pad: clamp(1.125rem, 3.4vw, 3rem);
  --gutter: clamp(1rem, 2vw, 1.75rem);
  --measure: 62ch;
  --measure-narrow: 44ch;
  --measure-wide: 56ch;
  --shell-max: 92.5rem;
  --header-h: 4.25rem;
}

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  font-synthesis: none;
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-transform: var(--transform-display);
  font-synthesis: none;
  text-wrap: balance;
}

p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
li { list-style: none; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
img { display: block; max-width: 100%; height: auto; }
strong { font-weight: var(--weight-semibold); }
small { font-size: var(--text-small); line-height: var(--leading-small); }

::selection { background: var(--red); color: var(--paper-light); }

/* ---------- Role classes ---------- */

.type-display-hero,
.type-display-intro,
.type-display-page,
.type-display-section,
.type-display-about,
.type-display-contact,
.type-display-more,
.type-display-specimen {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-transform: var(--transform-display);
  font-synthesis: none;
  text-wrap: balance;
}

.type-display-hero {
  font-size: var(--text-hero);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-hero);
}
.type-display-intro {
  font-size: var(--text-intro);
  line-height: var(--leading-intro);
  letter-spacing: var(--tracking-intro);
}
.type-display-page {
  font-size: var(--text-page);
  line-height: var(--leading-page);
  letter-spacing: var(--tracking-page);
}
.type-display-section {
  font-size: var(--text-display-section);
  line-height: var(--leading-display-section);
  letter-spacing: var(--tracking-display-section);
}
.type-display-about {
  font-size: var(--text-display-about);
  line-height: var(--leading-display-about);
  letter-spacing: var(--tracking-display-about);
}
.type-display-contact {
  font-size: var(--text-display-contact);
  line-height: var(--leading-display-contact);
  letter-spacing: var(--tracking-display-contact);
}
.type-display-more {
  font-size: var(--text-display-more);
  line-height: var(--leading-display-more);
  letter-spacing: var(--tracking-display-more);
}
.type-display-specimen {
  font-size: var(--text-specimen);
  line-height: var(--leading-display-section);
  letter-spacing: var(--tracking-display-section);
}

.type-identity {
  font-family: var(--font-display);
  font-size: var(--text-identity);
  font-weight: var(--weight-display);
  line-height: var(--leading-identity);
  letter-spacing: var(--tracking-identity);
  text-transform: none;
  font-synthesis: none;
  text-wrap: balance;
}

.type-title-card,
.type-title-more,
.type-title-card--wide,
.type-section,
.type-section--small,
.type-case-contact {
  font-synthesis: none;
  text-wrap: balance;
}

.type-title-card,
.type-title-more,
.type-title-card--wide {
  font-family: var(--font-display);
  font-weight: var(--weight-card);
  text-transform: var(--transform-display);
}
.type-title-card {
  font-size: var(--text-title-card);
  line-height: var(--leading-title-card);
  letter-spacing: var(--tracking-title-card);
}
.type-title-card--wide {
  font-size: var(--text-title-card-wide);
  line-height: var(--leading-title-card-wide);
  letter-spacing: var(--tracking-title-card-wide);
}
.type-title-more {
  font-size: var(--text-title-more);
  line-height: var(--leading-title-more);
  letter-spacing: var(--tracking-title-more);
}

.type-title-feature {
  font-family: var(--font-display);
  font-size: var(--text-title-feature);
  font-weight: var(--weight-card);
  line-height: var(--leading-title-feature);
  letter-spacing: var(--tracking-title-feature);
  text-transform: var(--transform-display);
  font-synthesis: none;
}

.type-section,
.type-section--small {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-section);
  letter-spacing: var(--tracking-section);
  text-transform: var(--transform-display);
}
.type-section { font-size: var(--text-section); }
.type-section--small {
  font-size: var(--text-section-small);
  line-height: var(--leading-section-small);
}

.type-case-contact {
  font-family: var(--font-display);
  font-size: var(--text-case-contact);
  font-weight: var(--weight-medium);
  line-height: var(--leading-case-contact);
  letter-spacing: var(--tracking-case-contact);
  text-transform: var(--transform-display);
}

.type-promise {
  font-family: var(--font-body);
  font-size: var(--text-promise);
  font-weight: var(--weight-medium);
  line-height: var(--leading-promise);
  letter-spacing: var(--tracking-promise);
  text-transform: var(--transform-body);
  text-wrap: balance;
}

.type-lead {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  font-weight: var(--weight-medium);
  line-height: var(--leading-lead);
  letter-spacing: var(--tracking-lead);
  text-transform: var(--transform-body);
  text-wrap: pretty;
}

.type-body-lg,
.type-body,
.type-small {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  text-transform: var(--transform-body);
  font-synthesis: none;
}
.type-body-lg {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  letter-spacing: var(--tracking-body);
  text-wrap: pretty;
}
.type-body {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  text-wrap: pretty;
}
.type-small {
  font-size: var(--text-small);
  line-height: var(--leading-small);
  letter-spacing: var(--tracking-small);
  text-wrap: pretty;
}

.type-meta,
.type-micro,
.type-label,
.type-status,
.type-nav,
.type-button {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  text-transform: var(--transform-ui);
  font-synthesis: none;
  font-variant-numeric: tabular-nums lining-nums;
}
.type-meta {
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
  letter-spacing: var(--tracking-meta);
}
.type-micro {
  font-size: var(--text-micro);
  line-height: var(--leading-micro);
  letter-spacing: var(--tracking-micro);
}
.type-label {
  font-size: var(--text-label);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-label);
}
.type-nav {
  font-size: var(--text-nav);
  line-height: var(--leading-nav);
  letter-spacing: var(--tracking-nav);
}
.type-button {
  font-size: var(--text-button);
  line-height: var(--leading-button);
  letter-spacing: var(--tracking-button);
}
.type-status {
  font-size: var(--text-status);
  line-height: var(--leading-status);
  letter-spacing: var(--tracking-status);
}

.type-number {
  font-family: var(--font-accent);
  font-size: var(--text-number);
  font-weight: var(--weight-medium);
  line-height: var(--leading-number);
  letter-spacing: var(--tracking-number);
  font-variant-numeric: tabular-nums;
}
.type-mark {
  font-family: var(--font-display);
  font-size: var(--text-mark);
  font-weight: var(--weight-bold);
  line-height: var(--leading-number);
  letter-spacing: var(--tracking-mark);
  text-transform: var(--transform-display);
}

.type-accent,
.display-accent {
  font-family: var(--font-accent);
  font-weight: var(--weight-accent);
  letter-spacing: var(--tracking-accent);
  text-transform: none;
  font-style: normal;
  font-synthesis: none;
}
.display-accent--hero {
  font-size: 0.78em;
  font-weight: var(--weight-bold);
  line-height: 0.92;
  letter-spacing: -0.03em;
}

/* Common semantic classes map onto the roles. */
.kicker,
.label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-label);
  text-transform: var(--transform-label);
  font-variant-numeric: tabular-nums lining-nums;
}

.status {
  font-family: var(--font-mono);
  font-size: var(--text-status);
  font-weight: var(--weight-medium);
  line-height: var(--leading-status);
  letter-spacing: var(--tracking-status);
  text-transform: var(--transform-ui);
  font-variant-numeric: tabular-nums lining-nums;
}

.nav,
.mobile-menu summary,
.skip-link {
  font-family: var(--font-mono);
  font-size: var(--text-nav);
  font-weight: var(--weight-medium);
  line-height: var(--leading-nav);
  letter-spacing: var(--tracking-nav);
  text-transform: var(--transform-ui);
}

.btn,
.text-link,
.nav__cta,
.intro__skip {
  font-family: var(--font-mono);
  font-size: var(--text-button);
  font-weight: var(--weight-medium);
  line-height: var(--leading-button);
  letter-spacing: var(--tracking-button);
  text-transform: var(--transform-ui);
}

.mobile-menu nav {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  text-transform: var(--transform-body);
}

.mark {
  font-family: var(--font-accent);
  font-size: var(--text-mark);
  font-weight: var(--weight-bold);
  line-height: var(--leading-number);
  letter-spacing: var(--tracking-mark);
  text-transform: var(--transform-display);
}

/* ---------- Responsive type tokens ---------- */

@media (max-width: 1100px) {
  :root {
    --text-hero: clamp(4rem, 6vw, 5rem);
  }
}

@media (max-width: 900px) {
  :root {
    --text-hero: clamp(3.5rem, 8vw, 4.5rem);
    --text-intro: clamp(3.5rem, 8vw, 4.5rem);
    --text-page: clamp(3.25rem, 6vw, 4rem);
    --text-display-section: clamp(2.75rem, 5vw, 3.25rem);
    --text-display-about: clamp(2.5rem, 4.8vw, 3rem);
    --text-display-contact: clamp(2.75rem, 5.2vw, 3.5rem);
    --text-display-more: clamp(2.75rem, 5.2vw, 3.5rem);
    --text-title-card: clamp(1.5rem, 2.2vw, 1.7rem);
    --text-title-card-wide: clamp(1.6rem, 2.4vw, 1.85rem);
    --text-title-more: clamp(1.6rem, 2.4vw, 1.85rem);
    --text-title-feature: clamp(1.1rem, 1.5vw, 1.35rem);
    --text-section: clamp(1.75rem, 2.6vw, 2rem);
    --text-section-small: clamp(1.35rem, 2vw, 1.5rem);
    --text-case-contact: clamp(2rem, 3vw, 2.5rem);
    --text-promise: clamp(1.5rem, 2.2vw, 1.75rem);
    --text-lead: clamp(1.15rem, 1.8vw, 1.35rem);
    --offset-line: clamp(0rem, 3vw, 2.5rem);
    --header-h: 3.75rem;
  }
}

@media (max-width: 680px) {
  :root {
    --text-hero: clamp(3rem, 12vw, 3.75rem);
    --text-intro: clamp(3rem, 10vw, 4rem);
    --text-page: clamp(2.5rem, 10vw, 3.25rem);
    --text-display-section: clamp(2.25rem, 8vw, 2.75rem);
    --text-display-about: clamp(2.1rem, 8.5vw, 2.75rem);
    --text-display-contact: clamp(2.35rem, 9vw, 3rem);
    --text-display-more: clamp(2.35rem, 9vw, 3rem);
    --text-title-card: clamp(1.35rem, 6vw, 1.65rem);
    --text-title-card-wide: clamp(1.4rem, 6.2vw, 1.7rem);
    --text-title-more: clamp(1.4rem, 6.2vw, 1.7rem);
    --text-title-feature: 1.15rem;
    --text-section: clamp(1.65rem, 6.5vw, 2rem);
    --text-section-small: clamp(1.3rem, 5vw, 1.5rem);
    --text-case-contact: clamp(1.75rem, 7vw, 2.1rem);
    --text-promise: clamp(1.5rem, 5.5vw, 2rem);
    --text-lead: 1.15rem;
    --text-body: 1.0625rem;
    --text-body-lg: 1.125rem;
    --text-small: 0.9375rem;
    --text-meta: 0.6875rem;
    --text-micro: 0.625rem;
    --text-label: 0.6875rem;
    --text-nav: 0.6875rem;
    --text-button: 0.6875rem;
    --offset-line: 0.5rem;
  }
}

@media (max-width: 380px) {
  :root {
    --text-hero: 3rem;
    --text-display-contact: 2.25rem;
    --text-page: 2.5rem;
    --text-title-card: 1.35rem;
    --text-title-card-wide: 1.35rem;
    --text-title-more: 1.35rem;
  }
}

/* ---------- Print ---------- */

@media print {
  :root {
    --text-hero: 28pt;
    --text-intro: 30pt;
    --text-page: 24pt;
    --text-display-section: 20pt;
    --text-display-about: 18pt;
    --text-display-contact: 20pt;
    --text-display-more: 20pt;
    --text-title-card: 11pt;
    --text-title-card-wide: 12pt;
    --text-title-more: 12pt;
    --text-title-feature: 9pt;
    --text-section: 12pt;
    --text-section-small: 10pt;
    --text-case-contact: 15pt;
    --text-promise: 14pt;
    --text-lead: 10.5pt;
    --text-body-lg: 11pt;
    --text-body: 10.5pt;
    --text-small: 9pt;
    --text-meta: 7pt;
    --text-micro: 6.5pt;
    --text-label: 7pt;
    --text-nav: 7pt;
    --text-button: 7pt;
    --text-status: 6.5pt;
    --space-section: 18pt;
    --space-section-sm: 12pt;
    --space-block: 12pt;
    --space-block-sm: 9pt;
    --space-component: 6pt;
    --offset-line: 0;
  }
  body { line-height: 1.45; }
}