/* TVREV Design System — global entry point.
 * Consumers link THIS file. It is import-only; all rules live in the imported
 * token + base files. Order matters: fonts → tokens → base/prose. */
/* TVREV — Webfonts
 * Display: Fraunces (variable old-style display serif — opsz/wght/SOFT/WONK axes)
 *          headlines, section heads, pull quotes, big numerals
 * Body:    Newsreader (long-read serif)
 * Mono:    IBM Plex Mono (kickers, bylines, data labels)
 * Self-hosting note: loaded from Google Fonts' CDN. For true offline self-hosting,
 * drop the .woff2 binaries into assets/fonts/ and replace this @import with local
 * @font-face rules. Fraunces is requested with its full axis ranges (opsz 9..144,
 * wght 100..900, SOFT 0..100, WONK 0..1) so display tooling can drive them live. */
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/font_00.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: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/font_01.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: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/font_02.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: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/font_03.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: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/font_04.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: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/font_05.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: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/font_06.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: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/font_07.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: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/font_08.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: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/font_09.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: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/font_10.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_11.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_12.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_13.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_14.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_15.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_16.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_17.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_18.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_19.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_20.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: 600;
  font-display: swap;
  src: url("../fonts/font_21.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: 600;
  font-display: swap;
  src: url("../fonts/font_22.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: 600;
  font-display: swap;
  src: url("../fonts/font_23.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: 600;
  font-display: swap;
  src: url("../fonts/font_24.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: 600;
  font-display: swap;
  src: url("../fonts/font_25.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: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/font_26.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: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/font_27.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: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/font_28.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: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/font_26.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: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/font_27.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: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/font_28.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: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/font_29.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: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/font_30.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: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/font_31.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: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/font_29.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: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/font_30.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: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/font_31.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: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/font_29.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: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/font_30.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: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/font_31.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;
}


/* TVREV — Color System
 * ~90% warm neutrals (near-black ink on warm white), one electric signal-blue.
 * Two equal native themes: light (.theme-light / :root) and dark (.theme-dark).
 * Semantic aliases below should be used in components — never the raw scale. */

:root {
  /* ---- Raw neutral scale (warm-tinted) ---- */
  --warm-1000: #100e0a;  /* deepest ink */
  --warm-950:  #16140f;  /* near-black ink */
  --warm-900:  #221f18;
  --warm-800:  #343027;
  --warm-700:  #423d33;
  --warm-600:  #5c5648;
  --warm-500:  #7a7464;
  --warm-400:  #9a9382;
  --warm-300:  #bdb6a4;
  --warm-250:  #d2cbb9;
  --warm-200:  #e0dacb;
  --warm-150:  #ebe6da;
  --warm-100:  #f3efe6;
  --warm-50:   #faf8f4;  /* warm white paper */
  --warm-0:    #ffffff;

  /* ---- Signal blue (electric accent) ---- */
  --signal-700: #143ad6;
  --signal-600: #1c4ef2;
  --signal-500: #2456ff;  /* primary accent */
  --signal-400: #5a7dff;
  --signal-300: #9fb3ff;
  --signal-100: #e4eaff;
  --signal-tint: #eef2ff;

  /* ---- Supporting semantic hues (used sparingly) ---- */
  --live-500:  #e0322d;  /* "live" / breaking marker (used rarely) */
  --pos-600:   #1f7a4d;
  --neg-600:   #c0392f;
}

/* ===================== LIGHT THEME ===================== */
:root,
.theme-light {
  color-scheme: light;

  --bg:            var(--warm-50);
  --bg-sunken:     var(--warm-100);
  --surface:       var(--warm-0);
  --surface-alt:   var(--warm-100);
  --surface-inverse:var(--warm-950);

  --text-strong:   var(--warm-950);
  --text-body:     var(--warm-900);
  --text-muted:    var(--warm-600);
  --text-faint:    var(--warm-500);
  --text-ondark:   var(--warm-50);

  --rule:          var(--warm-200);   /* hairline dividers */
  --rule-strong:   var(--warm-300);
  --rule-ink:      var(--warm-950);   /* emphatic full-ink rule */
  --border-field:  var(--warm-300);

  --accent:        var(--signal-500);
  --accent-hover:  var(--signal-600);
  --accent-press:  var(--signal-700);
  --accent-text:   var(--signal-600);  /* links on paper (AA) */
  --accent-tint:   var(--signal-tint);
  --accent-on:     var(--warm-0);       /* text on accent fill */

  --live:          var(--live-500);

  /* ---- Feature panel (newsletter / promo block) ----
   * A dark, distinct panel that works on paper. Light theme: near-black ink box.
   * Eyebrow uses a light signal tint that pops on the dark fill. */
  --feature-surface:      var(--warm-950);
  --feature-text:         var(--warm-50);
  --feature-muted:        color-mix(in srgb, var(--warm-50) 60%, transparent);
  --feature-eyebrow:      var(--signal-300);
  --feature-border:       transparent;
  --feature-field-border: color-mix(in srgb, var(--warm-50) 28%, transparent);

  --selection:     var(--signal-100);
  --code-bg:       var(--warm-100);
}

/* ===================== DARK THEME ====================== */
.theme-dark {
  color-scheme: dark;

  --bg:            #100e0a;
  --bg-sunken:     #0a0907;
  --surface:       #1a1712;
  --surface-alt:   #221e17;
  --surface-inverse:var(--warm-50);

  --text-strong:   #f5f1e8;
  --text-body:     #e6e0d2;
  --text-muted:    #a39c8a;
  --text-faint:    #7d7666;
  --text-ondark:   #f5f1e8;

  --rule:          #2c281f;
  --rule-strong:   #3a352a;
  --rule-ink:      #f5f1e8;
  --border-field:  #3a352a;

  --accent:        var(--signal-400);
  --accent-hover:  #7d99ff;
  --accent-press:  var(--signal-300);
  --accent-text:   #88a2ff;   /* links on dark (AA) */
  --accent-tint:   #18203f;
  --accent-on:     #0a0907;

  --live:          #ff5a54;

  /* ---- Feature panel (newsletter / promo block) ----
   * Dark theme: a RAISED WARM CHARCOAL panel — not the harsh inverted white.
   * Sits a step above --surface, carries a hairline warm border, and lets the
   * eyebrow pop in full electric signal blue. */
  --feature-surface:      #26201a;
  --feature-text:         var(--text-strong);
  --feature-muted:        var(--text-muted);
  --feature-eyebrow:      var(--accent);
  --feature-border:       var(--rule-strong);
  --feature-field-border: color-mix(in srgb, var(--warm-50) 18%, transparent);

  --selection:     #1d2752;
  --code-bg:       #221e17;
}

/* Note: apply an explicit `.theme-light` / `.theme-dark` class (the documented
 * API). To auto-honor OS preference, a consumer can add:
 *   <script>matchMedia('(prefers-color-scheme:dark)').matches &&
 *     document.documentElement.classList.add('theme-dark')</script>
 * (kept out of token CSS so every property stays a registered theme token). */

/* ===================== ACCENT SWAP (Customize toggle) ==================
 * "Red accent": electric blue and red trade places — accent family goes
 * red, the live/breaking marker goes signal blue. Nothing else changes. */
.accent-swap {
  --accent:        #e0322d;
  --accent-hover:  #c0392f;
  --accent-press:  #a02f27;
  --accent-text:   #c0392f;   /* AA on paper */
  --accent-tint:   #fdedec;
  --accent-on:     #ffffff;
  --live:          var(--signal-500);
  --feature-eyebrow: #f2a19c;
  --selection:     #fbdedd;
}
.theme-dark .accent-swap {
  --accent:        #ff5a54;
  --accent-hover:  #ff7770;
  --accent-press:  #ff938d;
  --accent-text:   #ff847d;   /* AA on dark */
  --accent-tint:   #3a1512;
  --accent-on:     #0a0907;
  --live:          var(--signal-400);
  --feature-eyebrow: var(--accent);
  --selection:     #52201d;
}

::selection { background: var(--selection); }

/* TVREV — Typography
 * Display: Fraunces (variable old-style display serif) — headlines, section heads, pull quotes
 * Body:    Newsreader (readable long-read serif) — article prose
 * Mono:    IBM Plex Mono — kickers, bylines, timestamps, data labels, code
 *
 * Scale is a major-third-ish editorial ramp. Display sizes use clamp()
 * so the article header is fluid between mobile and desktop. */

:root {
  /* ---- Families ---- */
  --font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  --font-body:    'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Weights ---- */
  --w-reg: 400;   /* @kind other */
  --w-med: 500;   /* @kind other */
  --w-semi: 600;  /* @kind other */
  --w-bold: 700;  /* @kind other */
  --w-black: 900; /* @kind other */

  /* ---- Display weight scale (Fraunces wght axis as a hierarchy tool) ---- */
  --w-display-hero:  660; /* @kind other */  /* article H1 / hero */
  --w-display:       600; /* @kind other */  /* section heads, card titles */
  --w-display-light: 480; /* @kind other */  /* pull quote, light display contrast */

  /* ---- Fluid display scale (headline system) ---- */
  --t-display:  clamp(2.75rem, 1.6rem + 5.7vw, 5.25rem);  /* @kind other */
  --t-title:    clamp(2.1rem, 1.4rem + 3.4vw, 3.5rem);    /* @kind other */
  --t-h2:       clamp(1.6rem, 1.2rem + 1.7vw, 2.2rem);    /* @kind other */
  --t-h3:       clamp(1.25rem, 1.05rem + 0.9vw, 1.55rem); /* @kind other */
  --t-dek:      clamp(1.2rem, 1.02rem + 0.85vw, 1.6rem);  /* @kind other */

  /* ---- Fixed body / utility scale ---- */
  --t-lead:     1.375rem;  /* @kind other */
  --t-body:     1.1875rem; /* @kind other */
  --t-body-sm:  1.0625rem; /* @kind other */
  --t-small:    0.9375rem; /* @kind other */
  --t-mono:     0.8125rem;  /* @kind other */
  --t-mono-sm:  0.6875rem;  /* @kind other */

  /* ---- Line heights ---- */
  --lh-tight:   0.98;   /* @kind other */
  --lh-snug:    1.16;   /* @kind other */
  --lh-body:    1.62;   /* @kind other */
  --lh-normal:  1.4;    /* @kind other */

  /* ---- Tracking ---- */
  --tr-kicker:  0.16em;  /* @kind other */
  --tr-label:   0.08em;  /* @kind other */
  --tr-tight:   -0.02em; /* @kind other */
  --tr-snug:    -0.01em; /* @kind other */

  /* (DM Serif Display has no opsz/weight axis; 400 is already heavy) */
  --opsz-display: 96; /* @kind other */
  --opsz-text: 16;     /* @kind other */
}

/* Utility type classes — usable directly in markup */
.t-kicker {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: var(--w-medium, 500);
  letter-spacing: var(--tr-kicker);
  text-transform: uppercase;
}
.t-label {
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}
.t-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: var(--w-display-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-optical-sizing: auto;
}
.t-title {
  font-family: var(--font-display);
  font-size: var(--t-title);
  font-weight: var(--w-display);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
}
.t-dek {
  font-family: var(--font-body);
  font-size: var(--t-dek);
  font-weight: var(--w-reg);
  line-height: 1.34;
  font-style: italic;
}

/* TVREV — Spacing, layout measures, radii, borders, shadows, motion
 * Editorial system: structure comes from a strict grid + hairline rules and
 * generous whitespace, NOT from heavy shadows or large radii. */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --sp-1:  0.25rem;   /* 4 */
  --sp-2:  0.5rem;    /* 8 */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.5rem;    /* 24 */
  --sp-6:  2rem;      /* 32 */
  --sp-7:  3rem;      /* 48 */
  --sp-8:  4rem;      /* 64 */
  --sp-9:  6rem;      /* 96 */
  --sp-10: 8rem;      /* 128 */

  /* ---- Layout measures ---- */
  --measure-text: 38rem;     /* @kind spacing */
  --measure-wide: 46rem;     /* @kind spacing */
  --container:    77rem;     /* @kind spacing */
  --gutter:       clamp(1.25rem, 5vw, 4rem); /* @kind spacing */

  /* ---- Radii (restrained / engineered) ---- */
  --r-none: 0;     /* @kind radius */
  --r-xs:   2px;   /* chips, tags, inputs — crisp */
  --r-sm:   4px;
  --r-md:   6px;   /* cards */
  --r-pill: 999px;

  /* ---- Borders ---- */
  --bw-hair: 1px;  /* @kind spacing */
  --bw-rule: 2px;  /* @kind spacing */

  /* ---- Shadows (minimal; used only for elevated/interactive surfaces) ---- */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(16,14,10,0.06);
  --shadow-md: 0 6px 24px -8px rgba(16,14,10,0.12);
  --shadow-pop: 0 12px 40px -12px rgba(16,14,10,0.22);

  /* ---- Motion (precise, no bounce) ---- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-med: 220ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); /* @kind shadow */
}

.theme-dark {
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 28px -10px rgba(0,0,0,0.6);
  --shadow-pop: 0 16px 48px -14px rgba(0,0,0,0.7);
}

/* TVREV — Base reset + long-read prose system
 * The `.prose` block styles a STANDARD article DOM (h2/h3, p, ul/ol, a,
 * blockquote, figure/figcaption, hr) so the whole article body is expressible
 * as CSS over plain blog markup — no bespoke per-element classes required.
 * Designed objects (pull quote, data callout, chart) get their own classes. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-xs);
}

/* ============================ PROSE ============================ */
.prose {
  max-width: var(--measure-text);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
.prose > * { margin: 0; }
.prose > * + * { margin-top: var(--sp-5); }

/* Lead / standfirst paragraph: first paragraph or .lead */
.prose > .lead,
.prose > p.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--text-strong);
}

/* Headings */
.prose h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: var(--w-display);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--text-strong);
  margin-top: var(--sp-8);
  scroll-margin-top: 6rem;
}
.prose h2 + p { margin-top: var(--sp-4); }
.prose h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--w-display);
  line-height: var(--lh-snug);
  color: var(--text-strong);
  margin-top: var(--sp-7);
}
.prose h3 + p { margin-top: var(--sp-3); }

/* A thin engineered rule that can sit above an H2 as a section marker */
.prose h2.section::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: var(--bw-rule);
  background: var(--accent);
  margin-bottom: var(--sp-4);
}

/* Inline links — signal blue, precise underline */
.prose a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transition: text-decoration-color var(--dur-fast) var(--ease-std), color var(--dur-fast);
}
.prose a:hover { text-decoration-color: var(--accent); }

/* Emphasis */
.prose strong { font-weight: var(--w-semi); color: var(--text-strong); }
.prose em { font-style: italic; }

/* Lists */
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: var(--sp-2); }
.prose ul > li::marker { color: var(--accent); }
.prose ol > li::marker { font-family: var(--font-mono); font-size: 0.85em; color: var(--text-muted); }

/* Blockquote — quiet, rule on the left */
.prose blockquote {
  border-left: var(--bw-rule) solid var(--rule-strong);
  padding-left: var(--sp-5);
  color: var(--text-muted);
  font-style: italic;
  font-size: var(--t-body-sm);
}
.prose blockquote cite {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-style: normal;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Figure + caption */
.prose figure { margin-top: var(--sp-6); }
.prose figure img { width: 100%; border-radius: var(--r-md); }
.prose figcaption {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--text-faint);
  padding-left: var(--sp-3);
  border-left: var(--bw-hair) solid var(--rule);
}

/* Horizontal rule / section break */
.prose hr {
  border: 0;
  height: var(--bw-hair);
  background: var(--rule);
  margin: var(--sp-8) 0;
}
/* Glyph divider variant */
.prose hr.glyph {
  height: auto; background: none; text-align: center;
}
.prose hr.glyph::before {
  content: "* * *";
  font-family: var(--font-mono);
  letter-spacing: 0.5em;
  color: var(--text-faint);
}

/* Drop the top margin on the very first child */
.prose > *:first-child { margin-top: 0; }

/* ============================ MARCONI WORDMARK ============================ */
/* The franchise wordmark is built from dark-navy circuit-board letters on a
 * transparent ground — legible on warm paper, but it disappears on the dark
 * theme. Give it a warm (never pure-white) paper plate there so it sits in the
 * palette instead of glaring. */
.theme-dark .marconi-wordmark {
  background: var(--warm-150);
  border: 1px solid var(--warm-300);
  padding: 0.4rem 0.6rem;
  border-radius: var(--r-sm);
  box-sizing: content-box;
}

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