@font-face{
  font-family:"Clash Display";
  src:url("/static/fonts/clash-display-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Clash Display";
  src:url("/static/fonts/clash-display-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

/* DM Sans variable — body/UI sans. Replaces Inter (which was system-fallback
   only, never actually loaded). Self-hosted from Google Fonts v17, latin +
   latin-ext subsets, regular + italic. The browser picks the right subset
   per unicode-range, so most pages only fetch the 61KB basic-latin file. */
@font-face{
  font-family:"DM Sans";
  src:url("/static/fonts/dm-sans-regular-latin.woff2") format("woff2-variations");
  font-weight:100 1000; font-style:normal; font-display:swap;
  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:"DM Sans";
  src:url("/static/fonts/dm-sans-regular-latin-ext.woff2") format("woff2-variations");
  font-weight:100 1000; font-style:normal; font-display:swap;
  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;
}
@font-face{
  font-family:"DM Sans";
  src:url("/static/fonts/dm-sans-italic-latin.woff2") format("woff2-variations");
  font-weight:100 1000; font-style:italic; font-display:swap;
  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:"DM Sans";
  src:url("/static/fonts/dm-sans-italic-latin-ext.woff2") format("woff2-variations");
  font-weight:100 1000; font-style:italic; font-display:swap;
  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;
}

/* Newsreader variable — body serif. Replaces Georgia (system serif).
   Designed for long-form screen reading, with an optical-size axis that
   makes the same family feel right at 16px body and 28px pull-quote.
   Pairs with DM Sans by design; we ship latin + latin-ext × regular +
   italic. The browser only fetches the basic-latin file on most pages. */
@font-face{
  font-family:"Newsreader";
  src:url("/static/fonts/newsreader-regular-latin.woff2") format("woff2-variations");
  font-weight:200 800; font-style:normal; font-display:swap;
  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Newsreader";
  src:url("/static/fonts/newsreader-regular-latin-ext.woff2") format("woff2-variations");
  font-weight:200 800; font-style:normal; font-display:swap;
  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;
}
@font-face{
  font-family:"Newsreader";
  src:url("/static/fonts/newsreader-italic-latin.woff2") format("woff2-variations");
  font-weight:200 800; font-style:italic; font-display:swap;
  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Newsreader";
  src:url("/static/fonts/newsreader-italic-latin-ext.woff2") format("woff2-variations");
  font-weight:200 800; font-style:italic; font-display:swap;
  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;
}
:root {
  /* Let UA chrome (scrollbars, native form controls) flip with our theme.
     `light dark` instead of `light` because we ship both — the body class
     toggles which one is active at runtime. */
  color-scheme: light dark;

  --color-ink: #11110f;
  --color-text: #2f2c27;
  --color-muted: #6d695f;
  --color-paper: #f6f3ec;
  --color-surface: #fffdfa;
  --color-white: #ffffff;
  --color-wash: #ebe6db;
  --color-border: rgba(17, 17, 15, .14);
  --color-border-subtle: rgba(17, 17, 15, .12);
  --color-header-bg: rgba(246, 243, 236, .94);
  --color-accent: #d74227;
  /* Same hue family as --color-accent but darkened to 4.7:1 on --color-paper
     so .eyebrow labels (12px small caps) clear WCAG AA for normal text. */
  --color-accent-text: #b8341a;
  --color-link: #116a8c;
  --color-success: #50723c;
  --color-danger: #9d1f13;
  --color-warning-bg: #fff2cc;
  --color-warning-border: #e2c15b;
  --color-dark-panel: #171714;
  --color-dark-text: #faf7ef;
  --color-dark-muted: #e1ddd2;
  --color-sidebar-link: #efe9dc;
  --color-sidebar-rule: rgba(255, 255, 255, .12);
  --series-overlay-scrim: rgba(17, 17, 15, .62);

  --font-sans: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Default body weight — bumped from the implicit 400 to 500 so DM Sans
     reads with a touch more heft. Headings remain at 800 in site.css. */
  --font-weight-body: 500;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;

  --type-xs: 12px;
  --type-sm: 14px;
  --type-meta: 15px;
  --type-base: 16px;
  --type-md: 16px;
  --type-lg: 18px;
  --type-content-body: 18px;
  --type-nav: 12px;
  --type-nav-compact: 11px;
  --type-heading-small: 20px;
  --type-section: clamp(22px, 1.9vw, 30px);
  --type-title: clamp(26px, 2.4vw, 36px);
  --type-display: clamp(34px, 3.6vw, 50px);
  --type-detail-title: clamp(24px, 2.1vw, 34px);
  --type-content-h1: clamp(24px, 2vw, 32px);
  --type-content-h2: clamp(20px, 1.7vw, 26px);
  --type-content-h3: clamp(18px, 1.4vw, 22px);
  --type-card-title: clamp(20px, 1.6vw, 24px);
  --type-panel-title: clamp(22px, 1.8vw, 28px);
  --type-about-lede: clamp(19px, 1.5vw, 21px);
  --type-cv-entry: 17px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --page-x: clamp(14px, 2.6vw, 34px);
  --section-y: clamp(30px, 4vw, 56px);
  --measure: 68ch;
  --wide: 1120px;
  --richtext-hero-width: 780px;
  --richtext-hero-offset: 18px;
  --recent-intro-width: var(--wide);
  --embed-card-min: 320px;
  --radius: 2px;

  --control-height: 44px;
  --control-height-compact: 36px;
  --social-icon-size: 34px;
  --social-icon-glyph: 18px;
  --collection-card-min: 340px;
  --collection-card-min-tablet: 190px;
  --collection-card-min-mobile: 150px;
  --collection-select-width: 180px;
  --collection-row-thumb: 44px;
  --media-thumb: 70px;
  --admin-sidebar-width: 230px;
  --admin-login-width: 420px;
  --component-preview-card-width: 360px;

  --ink: var(--color-ink);
  --muted: var(--color-muted);
  --paper: var(--color-paper);
  --panel: var(--color-surface);
  --line: var(--color-border);
  --accent: var(--color-accent);
  --blue: var(--color-link);
  --green: var(--color-success);

  /* ── Cosmic surface + motion (starfield/comet) ── */
  --sky: #06060f;
  --ink-on-sky: #d4d1c8;
  --muted-on-sky: rgba(212, 209, 200, .78);
  --line-on-sky: rgba(255, 255, 255, .16);
  /* Frosted-glass header tint — low alpha so backdrop-filter:blur reads.
     Overridden in body.theme-light to a paper tint at the same alpha. */
  --header-glass-bg: rgba(6, 6, 15, .55);
  /* Eyebrow label on cosmic sky — coral-shifted accent that clears WCAG AA
     on #06060f (--color-accent-text fails to 3.4:1 here). Overridden in
     body.theme-light back to the paper-tuned --color-accent-text. */
  --color-eyebrow-on-sky: #ff7a5a;
  --star-accent-1: #35e0ea;
  --star-accent-2: #ff5cc4;
  --star-accent-3: #ffb02e;
  --star-base: #ffffff;
  --sky-nebula-1: #163a47;
  --sky-nebula-2: #1a1430;

  --ease-settle: cubic-bezier(.34, 1.28, .64, 1);
  --ease-comet: cubic-bezier(.36, 0, .5, 1);
  --dur-comet: 5000ms;
  --dur-twinkle: 4200ms;
  --comet-cooldown-ms: 28800000;

  --comet-rake-gradient: linear-gradient(
    100deg,
    rgba(255,255,255,0) 14%,
    rgba(53,224,234,.18) 26%,
    rgba(53,224,234,.5) 38%,
    rgba(150,240,250,.92) 46%,
    #ffffff 50%,
    rgba(180,245,255,.8) 53%,
    rgba(120,225,250,.32) 58%,
    rgba(255,255,255,0) 64%);

  --font-display: "Clash Display", var(--font-sans);

  --link-on-sky: #8fd6ec;
  --control-bg-on-sky: rgba(255,255,255,.06);
  --control-border-on-sky: rgba(255,255,255,.22);
  --surface-on-sky: rgba(255,255,255,.05);
  --shadow-on-sky: rgba(0,0,0,.7);
  --card-glow: rgba(53,224,234,.32);
  --card-sheen: linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.16) 50%, rgba(255,255,255,0) 62%);
  --cta-gradient: linear-gradient(95deg, #241a63 0%, #2e6fb0 50%, #35e0ea 100%);
  --cta-gradient-hover: linear-gradient(95deg, #34298c 0%, #3f86c8 50%, #6df0f5 100%);
  --radius-cosmic: 16px;
  --radius-field: 10px;

  /* annespalter.art, the .ART Award entry (plan 017; static/css/award.css).
     The four act colors are the work's own: dormantSun, ruptureGold,
     repairCyan and livingSun in Elsewhere, Again's source. */
  --award-ink: #ece8de;
  --award-muted: #aaa69c;
  --award-sky-raised: #0d0d18;
  --award-line: rgba(236, 232, 222, .16);
  --award-line-strong: rgba(236, 232, 222, .34);
  --award-header-bg: rgba(6, 6, 15, .86);
  --award-act-old: #9f426d;
  --award-act-rupture: #fff0c1;
  --award-act-repair: #91fff2;
  --award-act-return: #ffd58f;
  --award-draft-ink: #ffb238;
  --award-draft-bg: rgba(255, 178, 56, .12);
  --type-award-title: clamp(34px, 3.6vw, 50px);
  /* The hero title is exempt from the site's 50 px cap (scripts/visual_check.py
     caps award hero text at 96 px instead). */
  --type-award-display: clamp(44px, 6.6vw, 96px);
  --type-award-statement: clamp(27px, 3.1vw, 46px);
  --type-award-refrain: clamp(40px, 6.2vw, 92px);
  --type-award-numeral: clamp(30px, 2.8vw, 42px);
  --type-award-cta: clamp(18px, 1.4vw, 21px);
  --award-hero-scrim: linear-gradient(to bottom, rgba(6, 6, 15, .2) 0%, rgba(6, 6, 15, 0) 26%, rgba(6, 6, 15, .5) 58%, rgba(6, 6, 15, .94) 100%);
  --award-hero-text-shadow: 0 2px 28px rgba(6, 6, 15, .7);
  --award-enter-glow: 0 0 0 1px rgba(255, 213, 143, .5), 0 12px 48px rgba(255, 213, 143, .32);
  --award-enter-glow-hover: 0 0 0 1px rgba(255, 240, 193, .8), 0 14px 64px rgba(255, 213, 143, .55);
  --type-award-h2: clamp(44px, 6.2vw, 92px);
  --type-award-h3: clamp(26px, 2.3vw, 34px);
  --type-award-lede: clamp(21px, 1.9vw, 27px);
  --type-award-prose: clamp(18px, 1.3vw, 20px);
  --type-award-ui: 15px;
  --type-award-small: 14px;

  font-family: var(--font-sans);
}

/* ── Light theme (opt-in; default stays cosmic) ── */
html:has(body.theme-light), body.theme-light {
  --sky: var(--color-paper);
  --sky-nebula-1: transparent;
  --sky-nebula-2: transparent;
  --star-base: rgba(17, 17, 15, .85);
  --star-accent-1: rgba(17, 17, 15, .75);
  --star-accent-2: rgba(17, 17, 15, .75);
  --star-accent-3: rgba(17, 17, 15, .75);
  --ink-on-sky: var(--color-ink);
  --muted-on-sky: var(--color-muted);
  --line-on-sky: var(--color-border);
  --surface-on-sky: var(--color-surface);
  --link-on-sky: var(--color-link);
  --control-bg-on-sky: var(--color-surface);
  --control-border-on-sky: var(--color-border);
  /* Light-mode frosted header — paper tint at low alpha so the blur reads. */
  --header-glass-bg: rgba(246, 243, 236, .62);
  /* Light-mode eyebrow keeps its paper-tuned --color-accent-text (5.35:1). */
  --color-eyebrow-on-sky: var(--color-accent-text);
  --shadow-on-sky: rgba(17, 17, 15, .12);
  --card-glow: none;
  --card-sheen: transparent;
  --hero-panel-light: rgba(255, 253, 250, .5);
}