/* ===== fonts.css — self-hosted, latin subset ===== */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/newsreader-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/newsreader-italic-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/spacemono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/spacemono-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --font-core: "Newsreader", Georgia, "Times New Roman", serif;
  --font-meta: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* ===== colors.css ===== */
:root {
  /* ---- Shell: warm paper, the colour of dry sand and bleached paper. ---- */
  --shell-050: #F7F3EA;
  --shell-100: #EFE9DC;
  --shell-200: #E2D9C8;
  --shell-300: #CFC3AE;

  /* ---- Ink: a cool deep blue-black. Type, never pure black. ------------- */
  --ink-900: #131A22;
  --ink-700: #2C3844;
  --ink-600: #46525E;
  --ink-500: #6B7885;
  --ink-300: #9AA5B0;

  /* ---- Marine: the brand. Deep harbour navy through riso blue to haze. -- */
  --marine-900: #0C1E33;
  --marine-700: #17416E;   /* the brand surface — covers, footers, proof strips */
  --marine-600: #2A62A8;   /* riso blue — links, rules on navy, accents */
  --marine-300: #8FAFD4;   /* washed denim — muted type on navy */
  --marine-200: #C2D5E8;
  --marine-100: #DDE8F3;

  /* ---- Sand: the highlight. Cream paper stock, used sparingly. ---------- */
  --sand-300: #E8D9B6;
  --sand-100: #F4EBD8;

  /* ---- Sea glass and coral: the two semantic hues. ---------------------- */
  --seaglass-600: #2F6D5E;
  --seaglass-100: #DCE9E3;
  --coral-600: #A8442F;
  --coral-100: #F2DED6;

  /* ---- Semantic aliases ------------------------------------------------ */
  --text-heading: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-meta: var(--ink-500);
  --text-inverse: var(--shell-050);
  --text-link: var(--marine-600);
  --text-link-hover: var(--ink-900);
  --text-success: var(--seaglass-600);
  --text-error: var(--coral-600);

  --surface-page: var(--shell-050);
  --surface-card: #FDFAF4;
  --surface-sunk: var(--shell-100);
  --surface-inverse: var(--marine-700);
  --surface-highlight: var(--sand-300);
  --surface-success: var(--seaglass-100);
  --surface-error: var(--coral-100);

  --rule-hair: var(--shell-200);
  --rule-mid: var(--shell-300);
  --rule-strong: var(--ink-900);

  --btn-primary-bg: var(--marine-700);
  --btn-primary-fg: var(--shell-050);
  --btn-primary-bg-hover: var(--marine-900);
  --btn-secondary-fg: var(--ink-900);
  --btn-secondary-border: var(--ink-900);
  --btn-secondary-bg-hover: var(--shell-100);
}

/* ===== typography.css ===== */
:root {
  /* Newsreader is a serif, so tracking is near-neutral — the negative tracking of
     the previous grotesque would close the counters. Display sizes run large. */
  --step-poster: 60px;  --step-poster-lg: 108px;
  --step-h1: 38px;      --step-h1-lg: 62px;
  --step-h2: 28px;      --step-h2-lg: 40px;
  --step-h3: 21px;      --step-h3-lg: 25px;
  --step-h4: 18px;      --step-h4-lg: 19px;
  --step-lead: 20px;    --step-lead-lg: 24px;
  --step-body: 17px; /* @kind font */
  --step-body-lg: 19px;
  --step-small: 16px; /* @kind font */
  --step-meta: 11px; /* @kind font */
  --step-legal: 14px; /* @kind font */
  --step-figure: 54px;  --step-figure-lg: 88px;

  --leading-poster: 0.94;
  --leading-tight: 1.06;
  --leading-heading: 1.16;
  --leading-snug: 1.38;
  --leading-body: 1.6;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 500;
  --weight-bold: 600;

  --tracking-poster: -0.015em;
  --tracking-display: -0.01em;
  --tracking-heading: -0.005em;
  --tracking-body: 0em;
  --tracking-meta: 0.14em;
  --tracking-wide: 0.05em;

  --measure-prose: 34rem;
  --measure-narrow: 24rem;
}

/* ===== spacing.css ===== */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 88px;
  --space-10: 120px;
  --space-11: 160px;

  --gutter: var(--space-5);
  --gutter-lg: var(--space-7);
  --section-y: var(--space-8);
  --section-y-lg: var(--space-10);

  --max-page: 1180px;
  --max-doc: 660px;

  /* The poster frame: every full-bleed block sits inside this inset. */
  --frame-inset: var(--space-5);
  --frame-inset-lg: var(--space-6);
}

/* ===== surfaces.css ===== */
:root {
  /* Nothing is rounded. Edges are cut, not softened. */
  --radius-0: 0px;
  --radius-pill: 999px;

  --stroke-hair: 1px;
  --stroke-medium: 1.5px;
  --stroke-heavy: 3px;

  --shadow-none: none;
  --shadow-focus: 0 0 0 3px rgba(23, 65, 110, 0.24);

  /* Paper grain — the tooth of uncoated stock. Two lines of SVG, no image request. */
  --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"); /* @kind other */
  --grain-opacity: 0.06; /* @kind other */
}

/* ===== motion.css ===== */
:root {
  /* Motion is functional only. Colour and rule-weight change; nothing moves. */
  --duration-fast: 90ms;   /* @kind other */
  --duration-base: 160ms;  /* @kind other */
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);  /* @kind other */
  --transition-state: color var(--duration-base) var(--ease-standard),
                      background-color var(--duration-base) var(--ease-standard),
                      border-color var(--duration-base) var(--ease-standard);
}

/* ===== base.css ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-core);
  font-size: var(--step-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 800px) { body { font-size: var(--step-body-lg); } }

h1, h2, h3, h4 { color: var(--text-heading); font-weight: var(--weight-bold); margin: 0 0 var(--space-4); text-wrap: balance; }
h1 { font-size: var(--step-h1); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--step-h2); line-height: var(--leading-heading); letter-spacing: var(--tracking-display); }
h3 { font-size: var(--step-h3); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
h4 { font-size: var(--step-h4); line-height: var(--leading-snug); font-weight: var(--weight-semibold); }
@media (min-width: 800px) {
  h1 { font-size: var(--step-h1-lg); }
  h2 { font-size: var(--step-h2-lg); }
  h3 { font-size: var(--step-h3-lg); }
  h4 { font-size: var(--step-h4-lg); }
}
p { margin: 0 0 var(--space-4); max-width: var(--measure-prose); text-wrap: pretty; }

a { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: var(--transition-state); }
a:hover { color: var(--text-link-hover); text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 1.5px solid var(--marine-700); outline-offset: 3px;
}
hr { border: 0; border-top: var(--stroke-hair) solid var(--rule-hair); margin: var(--space-6) 0; }

/* The mono micro-label — the most-used text style in the system. */
.sm-meta {
  font-family: var(--font-meta);
  font-size: var(--step-meta);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--text-meta);
  line-height: 1.4;
}
.sm-legal { font-size: var(--step-legal); line-height: var(--leading-snug); color: var(--text-muted); }
.sm-lead { font-size: var(--step-lead); line-height: var(--leading-snug); color: var(--text-body); }
@media (min-width: 800px) { .sm-lead { font-size: var(--step-lead-lg); } }

/* Poster type: the serif set large, mixed case, with an italic sub-line. */
.sm-poster {
  font-size: var(--step-poster); line-height: var(--leading-poster);
  letter-spacing: var(--tracking-poster); font-weight: var(--weight-regular);
  color: var(--ink-900); margin: 0;
}
@media (min-width: 800px) { .sm-poster { font-size: var(--step-poster-lg); } }
.sm-poster-sub { font-style: italic; font-weight: var(--weight-regular); }

.sm-grain { position: relative; }
.sm-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--texture-grain); opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ===== print.css ===== */
@media print {
  body { background: #fff; color: #131A22; font-size: 10.5pt; line-height: 1.5; }
  h1 { font-size: 30pt; } h2 { font-size: 18pt; } h3 { font-size: 13pt; } h4 { font-size: 11pt; }
  h1, h2, h3, h4 { break-after: avoid-page; }
  table, figure, aside, li { break-inside: avoid; }
  a { color: #131A22; text-decoration: underline; }
  .sm-grain::after { display: none; }
  .sm-print-hide { display: none !important; }
  @page { margin: 16mm 15mm 18mm; }
}