@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;
}
:root {
  --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;
  --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);

  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;

  --type-xs: 12px;
  --type-sm: 14px;
  --type-meta: 15px;
  --type-base: 16px;
  --type-md: 16px;
  --type-lg: 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);

  --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: 220px;
  --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);
  --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;

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