:root {
  color-scheme: dark;
  --bg: #0c1117;
  --shell-surface: #090d12;
  --surface: #151c23;
  --surface-raised: #1c252f;
  --banner-base: #18212a;
  --text: #f2f5f7;
  --muted: #b4bec8;
  --line: #303c47;
  --field-border: #71808e;
  --bar-surface: #111820;
  --brand-color: #a2a9eb;
  --focus-color: #a2a9eb;
  --button-default: #a2a9eb;
  --control-hover: #27333f;
  --control-radius: 9px;
  --card-radius: 12px;
  /* 4px foundation; semantic roles below keep component intent explicit. */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-128: 128px;
  --gap-inline: var(--space-8);
  --gap-controls: var(--space-12);
  --gap-cards: var(--space-16);
  --control-padding-block: var(--space-12);
  --control-padding-inline: var(--space-20);
  --card-padding: var(--space-32);
  --editor-card-padding: var(--space-24);
  --content-gutter: clamp(var(--space-24), 5vw, var(--space-80));
  --section-gap: clamp(var(--space-48), 6vw, var(--space-96));
  --inline-radius: 4px;
  --entrance-duration: 200ms;
  --type-display: clamp(2.2rem, 4.6vw, 5.2rem);
  --type-display-compact: clamp(1.7rem, 2.7vw, 3.2rem);
  --type-article: clamp(2.2rem, 3.7vw, 3.9rem);
  --type-title-bar: clamp(1rem, 1.4vw, 1.2rem);
  --type-section: clamp(1.6rem, 2.6vw, 2.2rem);
  --type-card: clamp(1.35rem, 2.2vw, 2.1rem);
  --type-editor-title: clamp(2rem, 3vw, 3rem);
  --type-hero-body: clamp(1.05rem, 1.45vw, 1.34rem);
  --type-card-lead: clamp(1.25rem, 1.6vw, 1.65rem);
  --type-card-compact: clamp(1rem, 1.4vw, 1.25rem);
  --type-profile-name: clamp(1.35rem, 2.2vw, 1.8rem);
  --type-standfirst: clamp(1.1rem, 1.7vw, 1.4rem);
  --type-body: 1rem;
  --type-body-large: 1.125rem;
  --type-support: .875rem;
  --type-caption: .75rem;
  --type-rich-h1: clamp(1.75rem, 2.8vw, 2.5rem);
  --type-rich-h2: clamp(1.5rem, 2.3vw, 2rem);
  --type-rich-h3: clamp(1.25rem, 1.8vw, 1.5rem);
  --leading-display: 1.08;
  --leading-title: 1.25;
  --leading-body: 1.6;
  --leading-reading: 1.75;
  --weight-medium: 500;
  --weight-heading: 600;
  --weight-strong: 700;
  --weight-body: 400;
  --tracking-heading: -.035em;
  --tracking-display: -.045em;
  --tracking-article: -.04em;
  --tracking-card: -.025em;
  font-family: Lexend, Arial, sans-serif;
  /* Lexend's bundled files are upright only; allow an italic face for emphasis. */
  font-synthesis: style;
}

/* Shared compact dismiss/remove control for menus, editor dialogs, and toasts. */
button.icon-x-button { position: relative; display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 1px solid #af5968; border-radius: 50%; background: #71303c; color: #fff; transition: background-color .2s ease, border-color .2s ease; }
button.icon-x-button:hover, button.icon-x-button:focus-visible { border-color: #d88291; background: #8e3b4a; }
button.icon-x-button::before, button.icon-x-button::after { content: ''; position: absolute; top: 50%; left: 50%; width: 13px; height: 2px; border-radius: 2px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
button.icon-x-button::after { transform: translate(-50%, -50%) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { button.icon-x-button { transition: none; } }

@media (max-width: 700px) {
  :root {
    --type-display: clamp(2.2rem, 11vw, 3.6rem);
    --type-display-compact: var(--type-display);
    --type-article: clamp(2rem, 8vw, 2.85rem);
    --type-title-bar: 1.25rem;
    --content-gutter: var(--space-24);
  }
}

/* Explicit disclosure indicators shared by public and editor panels. */
summary.disclosure-summary { display: flex; align-items: center; gap: var(--gap-controls); list-style: none; }
summary.disclosure-summary::-webkit-details-marker { display: none; }
summary.disclosure-summary::after { content: ''; flex: none; width: 11px; height: 8px; margin-left: auto; background: currentColor; clip-path: polygon(0 0, 100% 0, 50% 100%); transform: rotate(0deg); transition: transform .24s ease; }
details[open]:not([data-collapsing]) > summary.disclosure-summary::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { summary.disclosure-summary::after { transition: none; } }