/* Digital Venue — design-system tokens and component classes. Ink-first: the
   dark ground is the default, paper is a declared inversion (.paper), and
   both resolve the same semantic variables. Retune here; see readme.md. */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* — semantic surface, on the ink ground — */
  --color-bg: #0b0d0e;
  --color-surface: #14171a;
  --color-surface-2: #1c2024;
  --color-text: #f1f3f4;
  --color-text-2: #a2a9ae;
  --color-text-3: #838b91;
  --color-line: #262b2f;
  --color-line-strong: #363c41;
  --color-accent: #f05a3a;      /* the on-ink step of the brand vermilion */
  --color-accent-quiet: #2a1613;
  --color-accent-text: #ff7a5c;
  --color-on-accent: #0b0d0e;   /* label colour on an accent fill: ink on the
                                   bright vermilion clears 5.8:1 where white
                                   only reached 3.4:1. See .btn-primary. */

  /* — the brand ramp. 600 is the brand vermilion #d84428; lighter steps carry
       it onto ink, deeper steps onto paper. — */
  --red-100: #fdefeb;
  --red-200: #fbd8cf;
  --red-300: #f7b3a1;
  --red-400: #f4886d;
  --red-500: #f05a3a;
  --red-600: #d84428;
  --red-700: #b0351f;
  --red-800: #7f2716;
  --red-900: #4a1a10;

  /* — neutrals, cool and near-desaturated — */
  --grey-000: #ffffff;
  --grey-050: #fafafa;
  --grey-100: #f1f3f4;
  --grey-200: #e3e6e8;
  --grey-300: #c8cdd1;
  --grey-400: #a2a9ae;
  --grey-500: #7c848a;
  --grey-600: #575e64;
  --grey-700: #383e43;
  --grey-800: #1c2024;
  --grey-900: #0b0d0e;

  /* — semantic status, muted to sit beside the accent without competing — */
  --color-ok: #4ea67e;
  --color-warn: #d8a13a;

  --font-sans: "Figtree", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --radius: 2px;
  --radius-lg: 3px;

  /* Elevation is a border and a ground change, not a shadow. The two shadows
     exist for things that genuinely float. */
  --shadow-md: 0 8px 24px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 24px 64px rgb(0 0 0 / 0.55);
}

/* The paper inversion. Put .paper on any section, panel or page root. */
.paper {
  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-surface-2: #f1f3f4;
  --color-text: #0b0d0e;
  --color-text-2: #575e64;
  --color-text-3: #656d73;
  --color-line: #e3e6e8;
  --color-line-strong: #c8cdd1;
  --color-accent: #d84428;
  --color-accent-quiet: #fdefeb;
  --color-accent-text: #b0351f;
  --color-on-accent: #ffffff;
  background: var(--color-bg);
  color: var(--color-text);
}

*, *::before, *::after { box-sizing: border-box }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.5;
  font-weight: 400; -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01" 1;
}

/* ══ type ═══════════════════════════════════════════════════════════════
   One family, three registers: display (huge, tight, weight 500), text
   (16px, weight 400), and mono (labels, figures, spec rows). No italics,
   no second family, no weight above 600. ═══════════════════════════════ */
h1, h2, h3, h4, h5 { font-weight: 500; margin: 0 0 var(--space-4); text-wrap: pretty }
h1 { font-size: clamp(40px, 5.2vw, 68px); line-height: 1.02; letter-spacing: -0.032em }
h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.06; letter-spacing: -0.028em }
h3 { font-size: 26px; line-height: 1.15; letter-spacing: -0.022em }
h4 { font-size: 20px; line-height: 1.25; letter-spacing: -0.016em }
h5 { font-size: 17px; line-height: 1.35; letter-spacing: -0.01em }
h6 {
  font-family: var(--font-mono); font-size: 12px; font-weight: 400;
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4;
  color: var(--color-text-2); margin: 0 0 var(--space-4);
}
p { margin: 0 0 var(--space-4) }
.display { font-size: clamp(52px, 7vw, 92px); line-height: 0.98; letter-spacing: -0.038em; font-weight: 500 }
.lede { font-size: 20px; line-height: 1.45; color: var(--color-text-2); max-width: 60ch }
.lede strong { color: var(--color-text); font-weight: 500 }
.text-2 { color: var(--color-text-2) }
.text-3 { color: var(--color-text-3) }
small, .small { font-size: 14px; line-height: 1.45 }

/* Eyebrow — the mono micro-label that opens a section, with the accent dot
   as its only ornament. */
.eyebrow {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-text-2); margin: 0 0 var(--space-6);
}
.eyebrow::before {
  content: ""; width: 5px; height: 5px; flex: none; border-radius: 50%;
  background: var(--color-accent);
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums }
.label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-text-3);
}

a { color: var(--color-text); text-decoration-color: var(--color-line-strong); text-underline-offset: 3px }
a:hover { color: var(--color-accent-text); text-decoration-color: currentColor }
img { display: block; max-width: 100% }
figure { margin: 0 }
figcaption { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-3); margin-top: var(--space-3) }
hr, .rule { height: 1px; border: 0; margin: var(--space-12) 0; background: var(--color-line) }
:focus { outline: none }
:focus-visible { outline: 1px solid var(--color-accent); outline-offset: 2px }
/* The accent is never a background field (see the accent budget), and white
   on the paper-ground vermilion is only 4.4:1 — the quiet step carries the
   selection on both grounds at >12:1. */
::selection { background: var(--color-accent-quiet); color: var(--color-text) }
code { font-family: var(--font-mono); font-size: 0.9em; background: var(--color-surface-2); padding: 1px 5px; border-radius: var(--radius) }

/* ══ the spec row — this system's structural motif ══════════════════════
   Label left in mono, value right, hairline between. Anything that can be
   stated as a fact is stated this way: capabilities, limits, hosting,
   plan contents, status. It replaces the feature card. ════════════════ */
.spec { display: grid; border-top: 1px solid var(--color-line) }
.spec-row {
  display: grid; grid-template-columns: minmax(140px, 22%) 1fr auto;
  gap: var(--space-4) var(--space-6); align-items: baseline;
  padding: var(--space-5) 0; border-bottom: 1px solid var(--color-line);
}
.spec-row:hover { background: var(--color-surface) }
.spec-key {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-text-3); padding-top: 2px;
}
.spec-val { font-size: 17px; letter-spacing: -0.01em }
.spec-val p { margin: var(--space-2) 0 0; font-size: 15px; color: var(--color-text-2); max-width: 58ch }
.spec-note { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-3); text-align: right; white-space: nowrap }
.spec-num { font-family: var(--font-mono); font-size: 12px; color: var(--color-accent); letter-spacing: 0.06em }
@media (max-width: 700px) {
  .spec-row { grid-template-columns: 1fr; gap: var(--space-2) }
  .spec-note { text-align: left }
}

/* — figures: mono-labelled numbers — */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border-top: 1px solid var(--color-line) }
.fig { padding: var(--space-6) var(--space-6) var(--space-6) 0 }
.fig + .fig { border-left: 1px solid var(--color-line); padding-left: var(--space-6) }
.fig-val { font-size: 40px; line-height: 1; letter-spacing: -0.03em; font-weight: 500; font-variant-numeric: tabular-nums }
.fig-val .u { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0; color: var(--color-text-2); margin-left: 3px }
.fig-key { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-3); margin-top: var(--space-4); line-height: 1.4 }

/* — panels: a ground change and a hairline, never a shadow — */
.panel {
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-lg); padding: var(--space-8);
}
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6) }
.panel-head > .tag, .panel-head > .label { margin-top: 3px }
.panel-title { font-size: 20px; font-weight: 500; letter-spacing: -0.016em }
.panel-tight { padding: var(--space-5) }
.panel-flush { padding: 0; overflow: hidden }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 500;
  letter-spacing: -0.006em; line-height: 1; cursor: pointer; text-decoration: none;
  color: var(--color-text); background: transparent;
  border: 1px solid transparent; border-radius: var(--radius);
  padding: 13px var(--space-5); min-height: 44px;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn svg { display: block }
.btn:disabled { opacity: 0.4; cursor: not-allowed }
/* The primary action carries text at 15px/500, so its label needs 4.5:1 — the
   site's WCAG 2.1 AA floor. White on the bright vermilion is only 3.4:1, so on
   the ink ground the fill stays bright and the label goes ink (5.8:1), and the
   states step LIGHTER rather than darker to hold that. On paper the polarity
   flips: a white label on --red-700 (6.3:1), stepping darker. Do not restore a
   white label on --color-accent. */
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent) }
.btn-primary:hover { background: var(--red-400); border-color: var(--red-400) }
.btn-primary:active { background: var(--red-300); border-color: var(--red-300) }
.paper .btn-primary { background: var(--red-700); border-color: var(--red-700) }
.paper .btn-primary:hover { background: var(--red-800); border-color: var(--red-800) }
.paper .btn-primary:active { background: var(--red-900); border-color: var(--red-900) }
.btn-solid { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg) }
.btn-solid:hover { background: var(--color-text-2); border-color: var(--color-text-2) }
.btn-outline { border-color: var(--color-line-strong) }
.btn-outline:hover { background: var(--color-surface); border-color: var(--color-text-3) }
.btn-outline:active { background: var(--color-surface-2) }
.btn-quiet { color: var(--color-text-2); padding-inline: var(--space-2) }
.btn-quiet:hover { color: var(--color-text) }
.btn-sm { min-height: 34px; padding: 9px var(--space-4); font-size: 14px }
.btn-icon { width: 44px; padding: 0 }
.btn-block { width: 100% }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 4px 8px; border-radius: var(--radius);
  border: 1px solid var(--color-line-strong); color: var(--color-text-2);
}
.tag-accent { border-color: var(--color-accent); color: var(--color-accent-text) }
.tag-solid { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg) }
.tag-live::before, .tag-dot::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--color-ok) }
.tag-accent.tag-dot::before { background: var(--color-accent) }

/* — forms — */
.field { display: grid; gap: 7px }
.field > label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-3) }
.input {
  width: 100%; min-height: 44px; padding: 11px var(--space-4);
  font-family: var(--font-sans); font-size: 15px; color: var(--color-text);
  caret-color: var(--color-accent); background: var(--color-surface);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius);
}
.input::placeholder { color: var(--color-text-3) }
.input:hover { border-color: var(--color-text-3) }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0 }
textarea.input { min-height: 108px; resize: vertical; line-height: 1.5 }
.radio { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px }
.radio input, .seg-opt input, .switch input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none }
.radio .dot { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1px solid var(--color-line-strong) }
.radio:hover .dot { border-color: var(--color-text-3) }
.radio input:checked + .dot { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 4px var(--color-bg) }
.radio input:focus-visible + .dot { outline: 1px solid var(--color-accent); outline-offset: 2px }
.seg { display: inline-flex; border: 1px solid var(--color-line-strong); border-radius: var(--radius); overflow: hidden }
.seg-opt {
  display: inline-flex; align-items: center; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 10px var(--space-4); color: var(--color-text-2);
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-line-strong) }
.seg-opt:has(input:checked) { background: var(--color-text); color: var(--color-bg) }
.seg-opt:not(:has(input:checked)):hover { background: var(--color-surface) }
.seg-opt:has(input:focus-visible) { outline: 1px solid var(--color-accent); outline-offset: -2px }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px }
.switch .track { width: 36px; height: 20px; flex: none; border-radius: 999px; background: var(--color-surface-2); border: 1px solid var(--color-line-strong); position: relative; transition: background 120ms ease, border-color 120ms ease }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-text-2); transition: transform 140ms ease, background 140ms ease }
.switch input:checked + .track { background: var(--color-accent); border-color: var(--color-accent) }
.switch input:checked + .track::after { transform: translateX(16px); background: #fff }
.switch input:focus-visible + .track { outline: 1px solid var(--color-accent); outline-offset: 2px }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 15px }
.table th {
  text-align: left; font-family: var(--font-mono); font-size: 11px; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-3);
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-line-strong);
}
.table td { padding: var(--space-4); border-bottom: 1px solid var(--color-line); vertical-align: top; color: var(--color-text-2) }
.table td:first-child, .table .cell-key { color: var(--color-text) }
.table tbody tr:hover { background: var(--color-surface) }
.table .cell-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--color-text) }
.table .cell-ours { color: var(--color-text); background: var(--color-accent-quiet) }
.table th.cell-ours { color: var(--color-accent-text) }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-6);
  padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-line);
}
.nav-brand { display: flex; align-items: center; gap: 9px; margin-right: auto; font-size: 16px; font-weight: 500; letter-spacing: -0.018em; color: var(--color-text); text-decoration: none }
.nav-brand::before { content: ""; width: 9px; height: 9px; background: var(--color-accent) }
.nav a:not(.nav-brand) { font-size: 15px; color: var(--color-text-2); text-decoration: none }
.nav a:not(.nav-brand):hover, .nav a[aria-current] { color: var(--color-text) }

/* — dialog — */
.dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-6); background: rgb(0 0 0 / 0.6) }
.dialog {
  width: min(480px, 100%); display: grid; gap: var(--space-5);
  padding: var(--space-8); background: var(--color-surface);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.dialog-title { font-size: 24px; font-weight: 500; letter-spacing: -0.022em; margin: 0 }
.dialog-body { color: var(--color-text-2); margin: 0 }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-3) }

/* ══ motion ═════════════════════════════════════════════════════════════
   Deliberate, not decorative. Transform and opacity only; every looping or
   entrance animation is gated on prefers-reduced-motion. The easing is one
   curve — cubic-bezier(.22,.61,.36,1), a slow settle — used everywhere so
   the whole surface moves with one hand. ═══════════════════════════════ */
:root { --ease: cubic-bezier(.22, .61, .36, 1) }

/* Nav links: an accent underline that draws in from the left. */
.nav a:not(.nav-brand) { position: relative; padding-bottom: 3px }
.nav a:not(.nav-brand)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left;
  transition: transform 260ms var(--ease);
}
.nav a:not(.nav-brand):hover::after, .nav a[aria-current]:not(.nav-brand)::after { transform: scaleX(1) }

/* Spec rows: a hairline accent slides down the left edge; the ground eases in. */
.spec-row { position: relative; transition: background 220ms ease }
.spec-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--color-accent); transform: scaleY(0); transform-origin: top;
  transition: transform 300ms var(--ease);
}
.spec-row:hover::before { transform: scaleY(1) }

/* Buttons gain transform in their transition; cards that lift declare intent. */
.btn { transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 200ms var(--ease) }
.dv-lift { transition: transform 420ms var(--ease), border-color 260ms ease }
.dv-lift img { transition: transform 620ms var(--ease) }

@media (prefers-reduced-motion: no-preference) {
  .btn-primary:hover, .btn-solid:hover, .btn-outline:hover { transform: translateY(-1px) }
  .btn:active { transform: translateY(0) }
  .dv-lift:hover { transform: translateY(-4px) }
  .dv-lift:hover img { transform: scale(1.03) }
}

/* Hero: a staggered settle on load, every page (an entrance, not scroll). */
@media (prefers-reduced-motion: no-preference) {
  @keyframes dvHeroIn { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
  .dv-hero-in { animation: dvHeroIn .9s var(--ease) both }
  .dv-hero-in.d2 { animation-delay: .09s }
  .dv-hero-in.d3 { animation-delay: .19s }
  .dv-hero-in.d4 { animation-delay: .30s }
  .dv-hero-in.d5 { animation-delay: .42s }
}

/* A live indicator that breathes — slow and calm, the one thing that loops. */
.dv-live-dot { display: inline-block; width: 6px; height: 6px; flex: none; border-radius: 50%;
  background: var(--color-accent); margin-right: 8px; vertical-align: middle }
@media (prefers-reduced-motion: no-preference) {
  @keyframes dvPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 55%, transparent) }
    70%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 0%, transparent) }
  }
  .dv-live-dot { animation: dvPulse 2.8s var(--ease) infinite }
}