/* Meta-minimal theme layer for the newsletter. Overrides two Astryx tokens
   at the root — --font-family-* and --color-background-* — which every real
   Astryx component (Heading, Text, Table, Badge, Card, Banner…) already
   reads internally, so Cairo + a pure-white surface cascade through the
   entire component tree without touching component code. Selector
   specificity (html[data-astryx-theme="neutral"], 0-1-1) intentionally beats
   astryx-theme.css's @scope([data-astryx-theme="neutral"]) rules (0-1-0),
   and this file loads last, so it wins on both counts. */
html[data-astryx-theme="neutral"] {
  --font-family-body: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-family-heading: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --color-background-body: #ffffff;
  --color-background-surface: #ffffff;
}

html { scroll-behavior: smooth; background: #ffffff; }
body {
  font-family: var(--font-family-body);
  background: #ffffff;
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Cairo covers Latin too — this only isolates bidi direction, no font swap. */
.lat { direction: ltr; unicode-bidi: isolate; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  top: -48px;
  inset-inline-end: 16px;
  z-index: 100;
  background: var(--color-accent);
  color: #ffffff;
  padding: var(--spacing-3) var(--spacing-5);
  border-radius: 0 0 var(--radius-container) var(--radius-container);
  font-size: var(--font-size-sm);
  font-weight: 700;
  transition: top 0.15s;
}
.skip-link:focus { top: 0; }

.a-eyebrow {
  font-size: var(--font-size-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: var(--spacing-3);
}

#signup-counter { font-size: var(--font-size-xs); color: var(--color-text-secondary); }

/* ── Platform filter chips (progressive enhancement — see the inline script
   in render.tsx's document shell). Every card renders in the HTML regardless
   of JS; the script only toggles visibility, so nothing is hidden from
   view-source or a no-JS reader. ── */
.filter-chip {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.filter-chip:hover { border-color: rgba(0,0,0,0.28); }
.filter-chip[aria-pressed="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #ffffff;
}
.story-row[data-filtered-out="true"] { display: none; }

/* ── Paywall prompt (teaser variant only) ── */
.paywall {
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: var(--radius-container);
  padding: var(--spacing-8) var(--spacing-6);
  text-align: center;
  background: var(--color-background-blue);
}
.paywall h3 { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.paywall p { font-size: 14.5px; color: var(--color-text-secondary); line-height: 1.8; max-width: 44ch; margin: 0 auto 20px; }
.paywall a.subscribe-cta {
  display: inline-block; background: var(--color-accent); color: #ffffff;
  font-weight: 700; font-size: 14px; padding: 12px 28px; border-radius: 999px; text-decoration: none;
}