/* ──────────────────────────────────────────────────────────────
   The Remnant Agency — Foundational tokens
   v1.0 · May 2026
   Source: Brand Guidelines edition 01.
   Archivo + IBM Plex Mono are loaded from Google Fonts; no local
   font files were provided. If you ship to production, self-host.
   ────────────────────────────────────────────────────────────── */

/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-01.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-02.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-03.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;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-01.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-02.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-03.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;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-01.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-02.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-03.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;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-01.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-02.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-03.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/font-04.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/font-05.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/font-06.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/font-07.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/font-08.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/font-09.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/font-10.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/font-11.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/font-12.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/font-13.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 {
  /* ── Color · Paper, Ink, Red ─────────────────────────────── */
  --paper:        #F4F8FB;   /* page background (default surface) */
  --paper-pure:   #FFFFFF;   /* use sparingly — for inset cards   */
  --ink-900:      #222027;   /* primary type · interrupts          */
  --ink-850:      #2D2B31;   /* elevated dark surfaces             */
  --ink-800:      #3D3B41;   /* subtle dark · borders on dark      */
  --ink-600:      #6B6973;   /* secondary type                     */
  --ink-400:      #9C9AA3;   /* tertiary type · meta               */
  --ink-200:      #D7D5DC;   /* hairline borders on paper          */
  --ink-100:      #E8E6EC;   /* divider lines                      */

  --red:          #E90000;   /* brand accent · 600 base            */
  --red-800:      #B30000;   /* press / hover-darken               */
  --red-400:      #FF5A5A;   /* tint · rare                        */
  --red-100:      #FFE5E5;   /* tint background · rare             */

  /* ── Semantic aliases ────────────────────────────────────── */
  --fg-1:         var(--ink-900);
  --fg-2:         var(--ink-600);
  --fg-3:         var(--ink-400);
  --fg-on-dark:   var(--paper);
  --bg-page:      var(--paper);
  --bg-elevated:  var(--paper-pure);
  --bg-interrupt: var(--ink-900);
  --accent:       var(--red);
  --border:       var(--ink-200);
  --divider:      var(--ink-100);

  /* ── Type families ───────────────────────────────────────── */
  --font-sans:    'Archivo', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display: var(--font-sans);

  /* ── Type scale (px sizes per brand spec) ────────────────── */
  --type-display-xl: 700 64px/0.95 var(--font-display);
  --type-display:    700 44px/1.00 var(--font-display);
  --type-h1:         700 32px/1.05 var(--font-display);
  --type-h2:         700 22px/1.20 var(--font-display);
  --type-eyebrow:    500 11px/1.00 var(--font-sans);
  --type-lead:       400 19px/1.40 var(--font-sans);
  --type-body:       400 14px/1.55 var(--font-sans);
  --type-small:      500 12px/1.50 var(--font-sans);
  --type-mono:       500 13px/1.40 var(--font-mono);

  --track-display-xl: -0.03em;
  --track-display:    -0.025em;
  --track-h1:         -0.02em;
  --track-h2:         -0.015em;
  --track-lead:       -0.005em;
  --track-eyebrow:     0.06em;   /* slight expand for uppercase eyebrow */

  /* ── Spacing · 4-pt grid ─────────────────────────────────── */
  --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: 96px;

  /* ── Radii · sharp by default ────────────────────────────── */
  --radius-0:    0px;        /* default — cards, buttons        */
  --radius-1:    2px;
  --radius-2:    4px;
  --radius-3:    8px;
  --radius-pill: 999px;      /* tags only                       */

  /* ── Elevation · flat-first ──────────────────────────────── */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(34, 32, 39, 0.06),
              0 0 0 1px rgba(34, 32, 39, 0.06);
  --shadow-2: 0 8px 24px -8px rgba(34, 32, 39, 0.18),
              0 0 0 1px rgba(34, 32, 39, 0.06);

  /* Hairline border, used much more than shadow */
  --border-hairline: 1px solid var(--ink-200);
  --border-hairline-dark: 1px solid var(--ink-800);

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);  /* @kind other */
  --dur-fast:      120ms;  /* @kind other */
  --dur-base:      180ms;  /* @kind other */
  --dur-slow:      280ms;  /* @kind other */
}

/* ──────────────────────────────────────────────────────────────
   Base reset + semantic element styles.
   These are intentionally light — they style raw tags so you
   can drop bare markup into the page and it looks right.
   ────────────────────────────────────────────────────────────── */

html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font: var(--type-h1);
  letter-spacing: var(--track-h1);
  margin: 0;
}
h2, .h2 {
  font: var(--type-h2);
  letter-spacing: var(--track-h2);
  margin: 0;
}
h3, .h3 {
  font: var(--type-h2);
  font-size: 18px;
  letter-spacing: var(--track-h2);
  margin: 0;
}
.display-xl {
  font: var(--type-display-xl);
  letter-spacing: var(--track-display-xl);
}
.display {
  font: var(--type-display);
  letter-spacing: var(--track-display);
}
.lead {
  font: var(--type-lead);
  letter-spacing: var(--track-lead);
  color: var(--fg-2);
}
.eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--red);
  display: inline-block;
}
.eyebrow--ink { color: var(--ink-900); }
.small {
  font: var(--type-small);
  color: var(--fg-2);
}
.mono, code, kbd, samp {
  font: var(--type-mono);
  letter-spacing: 0;
}

p { margin: 0 0 var(--space-4) 0; }
hr { border: 0; border-top: var(--border-hairline); margin: var(--space-6) 0; }

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

/* Brand-red period helper — for headlines that terminate with .  */
.full-stop { color: var(--red); }