/* ==========================================================================
   Gravy — design tokens, reset and primitives
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/assets/fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/assets/fonts/instrument-serif-latin-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Apple-style stack: SF on Apple hardware, Inter everywhere else. */
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: var(--font-display);

  --bg: #ffffff;
  --bg-soft: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --ink: #1d1d1f;
  --ink-2: #515154;
  --ink-3: #86868b;
  --line: #e6e6e9;
  --line-strong: #d2d2d7;
  --accent: #206bea;
  --accent-ink: #1a56bb;
  --accent-soft: #e9f1fd;
  --accent-contrast: #ffffff;
  --success: #1f7a53;
  --warning: #b4741b;
  --danger: #c0392b;
  --shadow-sm: 0 1px 2px rgba(20, 22, 26, 0.05);
  --shadow-md: 0 10px 30px -18px rgba(20, 22, 26, 0.35);
  --shadow-lg: 0 30px 80px -40px rgba(20, 22, 26, 0.45);

  --radius-xs: 6px;
  --radius-card: 10px;
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 10px;
  --radius-pill: 980px;
  --btn-radius: 8px;
  --btn-radius-cta: 32px;

  --container: 1180px;
  --gap: clamp(16px, 2vw, 26px);
  --header-h: 58px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

[data-theme='dark'] {
  --bg: #000000;
  --bg-soft: #0a0a0a;
  --surface: #1d1d1f;
  --surface-2: #161617;
  --ink: #f5f5f7;
  --ink-2: #a1a1a6;
  --ink-3: #86868b;
  --line: #2a2a2d;
  --line-strong: #3a3a3d;
  --accent: #6ba1f2;
  --accent-ink: #9dc0f7;
  --accent-soft: #16243c;
  --accent-contrast: #ffffff;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 30px -18px rgba(0, 0, 0, 0.8);
  --shadow-lg: 0 30px 80px -30px rgba(0, 0, 0, 0.9);
  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.55;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv05' 1, 'ss03' 1;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 620;
  letter-spacing: -0.022em;
  line-height: 1.15;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
h3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 620; }
small { font-size: 0.82em; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip-link {
  position: fixed;
  top: -100px; left: 16px;
  z-index: 200;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* --------------------------------------------------------------- layout */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(18px, 3vw, 40px);
}
.container--narrow { max-width: 780px; }
.stack > * + * { margin-top: var(--stack, 16px); }

.section { padding-block: clamp(40px, 6vw, 76px); }
.section--tight { padding-block: clamp(28px, 4vw, 48px); }
.section--soft { background: var(--bg-soft); }

.grid { display: grid; gap: var(--gap); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------ typography */
.eyebrow,
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.kicker::before {
  content: '';
  width: 18px; height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.serif { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
.serif-italic { font-family: var(--font-display); font-style: italic; font-weight: 600; }
.lede { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--ink-2); line-height: 1.65; }
.muted { color: var(--ink-3); }
.small { font-size: 0.86rem; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(20px, 3vw, 34px);
}
.section-head h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.section-head p { margin: 6px 0 0; color: var(--ink-3); font-size: 0.95rem; }
.section-head__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.86rem; font-weight: 560; color: var(--ink-2);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line-strong);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), gap 0.2s var(--ease);
  white-space: nowrap;
}
.section-head__link:hover { color: var(--accent); border-color: var(--accent); gap: 12px; }

/* --------------------------------------------------------------- buttons */
/* Buttons follow the demo: 8px corners, compact padding, one blue. */
.btn {
  --btn-bg: var(--accent);
  --btn-bg-hover: #3b7ded;
  --btn-fg: #ffffff;
  --btn-ring: rgba(32, 107, 234, 0.2);
  --btn-r: var(--btn-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--btn-r);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.83rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.25;
  border: 1px solid transparent;
  transition: background-color 0.22s var(--ease), color 0.22s var(--ease),
              border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
  white-space: nowrap;
  user-select: none;
}
.btn:hover { background: var(--btn-bg-hover); box-shadow: 0 0 0 3px var(--btn-ring); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn svg { width: 14px; height: 14px; flex: none; }
.btn--accent { --btn-bg: var(--accent); --btn-fg: #ffffff; }
.btn--ghost {
  --btn-bg: #e1e7f0;
  --btn-bg-hover: #d6dee9;
  --btn-fg: #161616;
  --btn-ring: rgba(22, 22, 22, 0.1);
}
[data-theme='dark'] .btn--ghost { --btn-bg: #2c2c2e; --btn-bg-hover: #353538; --btn-fg: #f5f5f7; --btn-ring: rgba(255, 255, 255, 0.12); }
/*
  Destructive actions.

  A tinted background rather than a solid red one: a button that removes a news
  source sits in a row next to two harmless buttons, and three equally loud
  fills would make the row unreadable. The colour carries the warning, the
  restraint keeps it in the family. Same four custom properties as every other
  modifier, so hover, ring and disabled all compose rather than being restated.
*/
.btn--danger {
  --btn-bg: #fbe9e7;
  --btn-bg-hover: #f6d5d0;
  --btn-fg: #a93425;
  --btn-ring: rgba(169, 52, 37, 0.16);
}
[data-theme='dark'] .btn--danger { --btn-bg: #33191a; --btn-bg-hover: #43211f; --btn-fg: #f0a49a; --btn-ring: rgba(240, 164, 154, 0.16); }
.btn--soft { --btn-bg: var(--surface-2); --btn-bg-hover: var(--surface-2); --btn-fg: var(--ink); --btn-ring: rgba(0, 0, 0, 0.08); border-color: var(--line); }
.btn--sm { padding: 6px 12px; font-size: 0.76rem; }
.btn--sm.btn--cta { padding: 6px 14px; }
.btn--lg { padding: 11px 20px; font-size: 0.9rem; }
/* The theme keeps a wider radius for calls to action (32px) and 8px for
   everything else; setting it as a variable makes the two compose. */
.btn--cta { --btn-r: var(--btn-radius-cta); padding: 9px 18px; font-size: 0.84rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.55; pointer-events: none; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink-2);
  background: var(--surface);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
}
.icon-btn:hover { color: var(--ink); border-color: var(--line-strong); transform: translateY(-1px); }
.icon-btn svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.68rem;
  font-weight: 560;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}
a.chip:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.chip--accent { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
.chip__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------------------------------------------------------------- forms */
.field { display: block; }
.field + .field { margin-top: 18px; }
.field > span,
.label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  margin-bottom: 7px;
}
.input,
.textarea,
.select {
  width: 100%;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 0.9rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); opacity: 0.75; }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237d858f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }
.help { font-size: 0.78rem; color: var(--ink-3); margin-top: 6px; }

.checkbox { display: inline-flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--ink-2); cursor: pointer; }
.checkbox input { width: 17px; height: 17px; accent-color: var(--accent); }

/* ---------------------------------------------------------------- alerts */
.alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.9rem;
}
.alert--success { border-color: color-mix(in srgb, var(--success) 30%, var(--line)); background: color-mix(in srgb, var(--success) 8%, var(--surface)); }
.alert--error { border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
.alert--warning { border-color: color-mix(in srgb, var(--warning) 30%, var(--line)); background: color-mix(in srgb, var(--warning) 8%, var(--surface)); }
.alert--info { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); background: var(--accent-soft); }

/* ---------------------------------------------------------------- toasts */
/*
  Lives in base.css rather than site.css on purpose: both the public layout and
  the admin layout link base.css, but only the public one links site.css. When
  these rules sat in site.css the Studio got no toast styling at all, so the
  stack admin.js appends to <body> was an unstyled block element — it added
  height to the document (a visible scroll jump) and the message rendered below
  the fold, out of sight.

  `position: fixed` is what keeps the stack out of flow, so showing a toast can
  never move the page. 150 sits above the admin modal (130) and below the
  skip-link (200).
*/
.toast-stack { position: fixed; right: 20px; bottom: 20px; z-index: 150; display: grid; gap: 10px; max-width: min(380px, calc(100vw - 40px)); }
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  font-size: 0.88rem;
  animation: toast-in 0.3s var(--ease);
}
.toast--success { border-left: 3px solid var(--success); }
.toast--error { border-left: 3px solid var(--danger); }
.toast--info { border-left: 3px solid var(--accent); }
.toast__close { margin-left: auto; color: var(--ink-3); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

/* ------------------------------------------------------------- tag cloud */
/*
  Shared rather than public-only: the editor's tag picker (views/admin/editor.ejs)
  uses the same markup as the public category, home, list and post views. These
  sat in site.css, which the admin layout does not link, so the editor's tag
  cloud rendered as an unstyled column of links.

  `.empty__suggest .tag-cloud` stays in site.css — that wrapper is public-only,
  and site.css loads after base.css so its higher specificity still wins.
*/
.tag-cloud { display: flex; flex-wrap: wrap; gap: 7px; }
.tag-cloud a {
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid transparent;
  font-size: 0.78rem;
  color: var(--ink-2);
  transition: all 0.2s var(--ease);
}
.tag-cloud a:hover { background: var(--accent-soft); color: var(--accent-ink); }
.tag-cloud a span { color: var(--ink-3); font-size: 0.72rem; margin-left: 4px; }

/* -------------------------------------------------------- 404 / status */
/*
  Shared for the same reason: views/admin/error.ejs and views/public/error.ejs
  (plus db-error.ejs) all use this markup, but the admin error page renders
  under the admin layout, which never loaded site.css.
*/
.status-page { display: grid; place-items: center; text-align: center; padding-block: clamp(60px, 12vw, 140px); gap: 16px; }
.status-page__code { font-family: var(--font-display); font-weight: 680; font-size: clamp(4.4rem, 14vw, 9.5rem); line-height: 0.85; letter-spacing: -0.04em; color: var(--accent); }
.status-page h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.status-page p { color: var(--ink-3); max-width: 46ch; margin-inline: auto; }

/* ------------------------------------------------------------- utilities */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; }
.text-center { text-align: center; }
.w-full { width: 100%; }
.hide { display: none !important; }
.divider { height: 1px; background: var(--line); border: 0; margin: clamp(28px, 4vw, 48px) 0; }

/* scroll reveal */
/* Progressive enhancement: content is visible unless JS is running. */
[data-reveal] { opacity: 1; }
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
html.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   Shared components used by both the public site and the Studio
   ========================================================================== */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__mark {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 640;
  line-height: 1;
  padding-bottom: 1px;
  letter-spacing: -0.02em;
  transition: transform 0.4s var(--ease), background 0.2s var(--ease);
}
.brand:hover .brand__mark { transform: rotate(-6deg); background: var(--accent); }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1;
  padding-bottom: 3px;
}
.brand__tag {
  display: none;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* avatar */
.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
  flex: none;
}
.avatar--initials {
  display: inline-grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 620;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--accent);
  text-transform: uppercase;
}
.avatar--lg { width: 56px; height: 56px; }
.avatar--xl { width: 84px; height: 84px; font-size: 1.1rem; }

/* prose */
.prose { font-size: clamp(1.02rem, 1.3vw, 1.13rem); line-height: 1.78; color: var(--ink); }
.prose > * + * { margin-top: 1.25em; }
.prose p { margin: 0; }
.prose > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 620;
  font-size: 3.1em;
  line-height: 0.86;
  float: left;
  padding: 0.04em 0.1em 0 0;
  color: var(--ink);
}
.prose h2 {
  font-family: var(--font-display);
  font-weight: 640;
  font-size: clamp(1.45rem, 2.1vw, 1.8rem);
  letter-spacing: -0.028em;
  line-height: 1.16;
  letter-spacing: -0.015em;
  margin-top: 2em;
  scroll-margin-top: calc(var(--header-h) + 28px);
}
.prose h3 {
  font-size: 1.2rem;
  font-weight: 620;
  margin-top: 1.8em;
  scroll-margin-top: calc(var(--header-h) + 28px);
}
.prose h4 { font-size: 1.02rem; margin-top: 1.6em; }
.prose a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); transition: text-decoration-color 0.2s; }
.prose a:hover { text-decoration-color: var(--accent); }
.prose strong { font-weight: 640; }
.prose em { font-style: italic; }
.prose ul, .prose ol { padding-left: 1.35em; margin: 0; }
.prose li + li { margin-top: 0.5em; }
.prose li::marker { color: var(--accent); }
.prose blockquote {
  margin: 2em 0;
  padding: 4px 0 4px 26px;
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.prose blockquote p + p { margin-top: 0.6em; }
.prose blockquote cite { display: block; margin-top: 12px; font-family: var(--font-sans); font-size: 0.78rem; font-style: normal; color: var(--ink-3); letter-spacing: 0; }
.prose img { border-radius: var(--radius); margin: 1.8em auto 0.6em; }
.prose figure { margin: 2em 0; }
.prose figcaption { font-size: 0.8rem; color: var(--ink-3); text-align: center; margin-top: 10px; }
.prose code {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: 0.85em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.15em 0.4em;
}
.prose pre {
  position: relative;
  background: #12151c;
  color: #e6e9f2;
  border-radius: var(--radius);
  padding: 20px 22px;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.7;
  margin: 1.8em 0;
}
.prose pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.prose hr { margin: 2.4em auto; border: 0; border-top: 1px solid var(--line); width: 100%; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 1.8em 0; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.prose th { font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 650; }
.prose mark { background: color-mix(in srgb, var(--accent) 18%, transparent); color: inherit; padding: 0 0.2em; border-radius: 3px; }
.prose > p + p { margin-top: 1.25em; }



.link-btn {
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 520;
}
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------- color-mix fallbacks */
/* Older engines do not support color-mix(); these give a sane fallback. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .site-header { background: var(--bg); }
  .hero-card .chip { background: rgba(255, 255, 255, 0.16); }
  .post-card__media .chip { background: #fff; color: var(--ink); }
  .category-tile { color: #fff; }
  .alert--success { background: #effaf4; }
  .alert--error { background: #fdf1ef; }
  .alert--warning { background: #fdf7ec; }
  .chip--accent { background: var(--accent-soft); }
  .prose a { text-decoration-color: var(--accent); }
  .prose mark { background: #dfe7ff; }
  [data-theme='dark'] .prose mark { background: #23305a; }
}

/* chart fallback for engines without color-mix() */
.chart__bar span { background: linear-gradient(180deg, var(--admin-accent) 0%, #9db3ff 100%); }
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .chart__bar span { background: linear-gradient(180deg, var(--admin-accent), color-mix(in srgb, var(--admin-accent) 45%, #fff)); }
}


/* theme toggle: moon in light mode, sun in dark mode */
.ttx { display: inline-flex; }
.ttx--sun { display: none; }
[data-theme='dark'] .ttx--moon { display: none; }
[data-theme='dark'] .ttx--sun { display: inline-flex; }

/* ==========================================================================
   Theme cross-fade — a short, deliberate transition when the mode switches
   ========================================================================== */
html.theme-anim,
html.theme-anim body,
html.theme-anim .site-header,
html.theme-anim .site-footer,
html.theme-anim .panel,
html.theme-anim .card,
html.theme-anim .post-card,
html.theme-anim .section,
html.theme-anim h1,
html.theme-anim h2,
html.theme-anim h3,
html.theme-anim p,
html.theme-anim a,
html.theme-anim span,
html.theme-anim .chip,
html.theme-anim .btn,
html.theme-anim .icon-btn,
html.theme-anim .input {
  transition: background-color 420ms cubic-bezier(0.22, 1, 0.36, 1),
              color 420ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 420ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-anim,
  html.theme-anim body { transition-duration: 1ms !important; }
}