/* ==========================================================================
   base.css — self-hosted fonts, element defaults, layout primitives,
   and the handful of utilities used across every page.
   ========================================================================== */

/* ---- Self-hosted fonts --------------------------------------------------
   Downloaded from the original site and subset to `latin`. The original
   loaded these from a dead staging host, so they never rendered in
   production — see NOTES.md → "Webfonts never loaded".
   The `latin-ext` subsets were dropped because no page uses a glyph from
   that range; add them back if you introduce accented copy.             */

@font-face {
  font-family: "Abhaya Libre";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/abhayalibre-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Abhaya Libre";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/abhayalibre-500-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Abhaya Libre";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/abhayalibre-600-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Abhaya Libre";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/abhayalibre-700-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-500-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-700-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/intertight-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/intertight-500-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/intertight-600-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/intertight-700-latin.woff2") format("woff2");
}

/* ---- Document ----------------------------------------------------------- */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Every numeral on this site is a figure in a ledger: same width, lining,
   so columns of numbers align down the page. */
.figure,
.counter__value,
.counter__suffix,
.price__amount,
.site-footer__contact,
time {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ---- Headings -----------------------------------------------------------
   Display type is spruce, not black: it reads as considered rather than
   default, and holds 12.9:1 on the paper ground. Body copy stays ink. */

h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-semibold); }

h1 {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--color-spruce);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--fs-page-title);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--color-spruce);
}

h3, h4 {
  font-family: var(--font-heading);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--color-spruce);
}

h5 {
  font-family: var(--font-heading);
  font-size: var(--fs-lede);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-wide);
  color: var(--color-spruce);
}

h6 {
  font-family: var(--font-display);
  font-size: var(--fs-step);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--color-spruce-soft);
}

p { margin-block-end: var(--space-16); }
p:last-child { margin-block-end: 0; }

strong, b { font-weight: var(--fw-bold); }

a { color: var(--color-link); transition: color var(--transition-fast); }
a:hover { color: var(--color-link-hover); }

/* ---- Layout primitives -------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-py); }
.section--lead { padding-block-start: var(--section-py-lg); }
.section--flush-top { padding-block-start: 0; }
.section--flush-bottom { padding-block-end: 0; }

.section--surface { background-color: var(--color-surface); }  /* legacy alias */
.section--ledger  { background-color: var(--color-ledger); }
.section--spruce  { background-color: var(--color-spruce); color: var(--color-on-spruce); }
.section--gold    { background-color: var(--color-primary); color: var(--color-on-gold); }

.section--spruce h1,
.section--spruce h2,
.section--spruce h3,
.section--spruce h4,
.section--spruce h5 { color: var(--color-on-spruce); }

.stack > * + * { margin-block-start: var(--stack); }

/* ---- Shared type utilities ---------------------------------------------- */

/* The ledger column head: spruce micro-caps sitting on a gold rule. The
   original ran this role at three different sizes (12/500-600, 15/600,
   18/500) inside a black box; normalised here — see NOTES.md. */
.eyebrow {
  display: inline-block;
  padding-block-end: var(--space-8);
  border-block-end: var(--rule-head);
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-spruce);
}

/* On a dark or gold ground the rule stays gold but the label goes light. */
.eyebrow--invert { color: var(--color-on-spruce); }
.eyebrow--gold {
  color: var(--color-on-gold);
  border-block-end-color: var(--color-ink);
}

/* Two-tone section title: plain text is gold, the <span> stays ink. */
.section-title--split { color: var(--color-gold-display); }
.section-title--split span { color: var(--color-spruce); }

.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-page-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

.subtitle {
  font-family: var(--font-display);
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-regular);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.lede {
  font-family: var(--font-body);
  font-size: var(--fs-lede);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-tight);
  color: var(--color-muted);
  max-width: var(--measure);
}

.text-muted { color: var(--color-text-muted); }
.text-gold  { color: var(--color-gold-text); }
.text-center { text-align: center; }
.measure { max-width: var(--measure); }

/* ---- Rules — the system's only separators -------------------------------
   A hairline between entries, a gold rule under a column head, and a double
   rule under a total. Nothing else in this project draws a line. */

.rule-total { border-block-end: var(--rule-total); }
.rule-hair  { border-block-end: var(--border-hairline); }

/* ---- Accessibility helpers ---------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-8);
  inset-block-start: calc(-1 * var(--space-64));
  z-index: var(--z-skip);
  padding: var(--space-12) var(--space-20);
  background-color: var(--color-ink);
  color: var(--color-text-inverse);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  transition: inset-block-start var(--transition-base);
}

.skip-link:focus {
  inset-block-start: var(--space-8);
  color: var(--color-text-inverse);
}

/* ---- Responsive type ----------------------------------------------------
   Breakpoints mirror --bp-* in tokens.css (see the note there).           */

@media (max-width: 1366px) {
  :root {
    --fs-hero:       var(--fs-8xl);
    --fs-counter:    var(--fs-7xl);
  }
}

@media (max-width: 1024px) {
  :root {
    --fs-hero:       var(--fs-6xl);
    --fs-page-title: var(--fs-5xl);
    --fs-subtitle:   var(--fs-3xl);
    --fs-step:       var(--fs-4xl);
    --fs-counter:    var(--fs-7xl);
    --section-py:    var(--space-80);
    --section-py-lg: var(--space-80);
    --gutter:        var(--space-24);
  }
}

@media (max-width: 767px) {
  :root {
    --fs-hero:       var(--fs-5xl);
    --fs-page-title: var(--fs-4xl);
    --fs-subtitle:   var(--fs-2xl);
    --fs-card-title: var(--fs-lg);
    --fs-counter:    var(--fs-6xl);
    --section-py:    var(--space-64);
    --section-py-lg: var(--space-64);
    --gutter:        var(--space-20);
  }
}