/* ==========================================================================
   Meaningful Vibes — theme.css
   Paint layer only. Loaded after base.css and layout.css.
   -------------------------------------------------------------------------
   Palette (4 canonical HEX — DS-2):
     #F7F5F0  Parchment   — light bg / card surfaces
     #1C1A27  Deep Ink    — primary text / dark-mode bg / footer
     #E8494A  Signal Red  — accents, pull-quote rules, CTA borders
     #3A7FD4  Clear Horizon — category tags, metadata, secondary links
   Up to ~8 distinct HEX across the two themes (DS-2 dual-scheme allowance).

   Flair note: this build leans into expressive GRADIENTS — gradient-filled
   display text, soft gradient glow blocks (hero / page-hero / footer), gradient
   card stripes + hover glows. Every gradient is built ONLY from the four brand
   colors blended `in oklab` (vivid midpoint, no muddy gray), so nothing leaves
   the palette.
   ========================================================================== */

/* --- Web Fonts (DS-3 / DS-6) --------------------------------------------- */
/* Cormorant Garamond: high-contrast editorial serif for display / headlines  */
/* DM Sans: clean humanist sans for body copy and UI labels                   */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&display=swap');

/* --- Font role tokens + brand-constant color tokens (DS-6 / DS-10) -------- */
:root {
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:  'DM Sans', 'Helvetica Neue', Helvetica, sans-serif;

  /* Theme-constant brand tokens (same value in light + dark):
     defined here so the rest of the file never spells a raw paint hex (DS-17). */
  --color-horizon:  #3A7FD4;   /* Clear Horizon — category / metadata blue     */
  --color-ink:      #1C1A27;   /* Deep Ink — constant footer/contrast surface  */
  --color-ink-lift: #272433;   /* Deep Ink lifted — footer gradient end        */
  --color-on-dark:  #F7F5F0;   /* Parchment — text/icons on ink/accent fills   */

  /* Signature brand gradients — Signal Red → Clear Horizon, interpolated in
     oklab so the midpoint stays a clean violet instead of muddy gray. */
  --gradient-brand:   linear-gradient(115deg in oklab, var(--color-accent) 0%, var(--color-horizon) 100%);
  --gradient-brand-h: linear-gradient(90deg in oklab,  var(--color-accent) 0%, var(--color-horizon) 100%);
}

/* --- Dual-theme color-variable contract (DS-1) ---------------------------- */

/* LIGHT theme — default scheme */
:root[data-theme="light"] {
  --color-bg:      #F7F5F0;   /* Parchment: warm page background              */
  --color-text:    #1C1A27;   /* Deep Ink: near-black body copy               */
  --color-accent:  #E8494A;   /* Signal Red: links, CTAs, pull rules, active  */
  --color-surface: #ECEAE4;   /* Parchment darkened: card / raised surface    */
  --color-border:  #D6D3CA;   /* Warm hairline gray derived from Parchment    */
}

/* DARK theme — inverted scheme, shared brand accent */
:root[data-theme="dark"] {
  --color-bg:      #1C1A27;   /* Deep Ink: deep page background               */
  --color-text:    #F7F5F0;   /* Parchment: near-white body copy              */
  --color-accent:  #E8494A;   /* Signal Red: same brand accent across themes  */
  --color-surface: #272433;   /* Deep Ink lifted: raised card surface         */
  --color-border:  #38354A;   /* Deep Ink opened: hairlines on dark bg        */
}

/* --- Gradient-text helper (display copy) ---------------------------------- */
/* Fills the glyphs with the brand gradient. Grouped here so every display
   element that wants the treatment shares one source of truth. */
.hero__title,
.section-title,
.section-label,
.kicker,
.hero__kicker,
.page-title,
.prose h2,
.prose > p:first-of-type::first-letter {
  background-image: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Shrink-to-fit so gradient headings sit tight under their gradient underlines */
.section-title,
.section-label,
.kicker,
.hero__kicker,
.page-title,
.prose h2 {
  width: fit-content;
  max-width: 100%;
}

/* --- Base page paint ------------------------------------------------------ */
body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
}

.page {
  background: var(--color-bg);
  color: var(--color-text);
}

/* --- Global link treatment ------------------------------------------------ */
a {
  color: var(--color-text);
  transition: color 0.18s ease;
}

a:hover,
a:focus-visible {
  color: var(--color-accent);
}

/* --- Headings: serif display treatment ------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
}

h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--text-xs);
  color: var(--color-accent);
}

/* --- Site header / nav ---------------------------------------------------- */
.site-header {
  background: var(--color-bg);
  border-block-end: var(--border-width) solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
  /* Subtle backdrop so content scrolls cleanly under the sticky bar */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--color-bg) 90%, transparent);
}

.site-nav {
  padding-block: var(--space-sm);
}

/* Brand wordmark — serif, confident weight */
.nav-brand {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-decoration: none;
}

.nav-brand:hover {
  color: var(--color-accent);
}

/* Nav links — compact sans, Small Caps optical feel */
.nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-links a {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text);
  padding-block: var(--space-3xs);
  position: relative;
  transition: color 0.18s ease;
}

/* Animated underline on nav links — brand gradient, slides in from left */
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-brand-h);
  transition: width 0.22s ease;
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after {
  width: 100%;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--color-accent);
}

/* --- Theme toggle — pill shape per dev prompt (DS-12) -------------------- */
/* Override the base.css square starter into the brand's pill control */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  height: 2rem;
  padding-inline: var(--space-sm);
  border-radius: 100px;                    /* pill */
  border: 1.5px solid var(--color-accent); /* Signal Red border in light    */
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  width: auto;                             /* override base.css fixed width  */
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* Hover fills the pill with the brand gradient */
.theme-toggle:hover {
  opacity: 1;                              /* override base.css 0.7 fade     */
  background: var(--gradient-brand-h);
  color: var(--color-on-dark);
  border-color: transparent;
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Icon sizing refined for the pill */
.theme-toggle__icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* --- Burger / nav-toggle — pill treatment matching theme-toggle ----------- */
.nav-toggle {
  height: 2rem;
  width: auto;
  padding-inline: var(--space-xs);
  border-radius: 100px;                    /* pill, matching theme-toggle    */
  border: 1.5px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  transition: border-color 0.18s ease, background 0.18s ease;
}

.nav-toggle:hover {
  opacity: 1;
  border-color: var(--color-accent);
  background: transparent;
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* --- Hero section — gradient glow block ----------------------------------- */
.hero {
  padding-block: var(--space-2xl);           /* ≤ --space-2xl per DS rule   */
  position: relative;
  overflow: hidden;
  /* Layered accent + horizon glows wash behind the gradient headline. */
  background:
    radial-gradient(120% 85% at 10% -10%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0%, transparent 55%),
    radial-gradient(110% 90% at 105% 110%, color-mix(in srgb, var(--color-horizon) 16%, transparent) 0%, transparent 52%),
    var(--color-bg);
}

/* Editorial texture: large angled typographic watermark */
.hero::before {
  content: 'MV';
  position: absolute;
  right: -0.05em;
  bottom: -0.15em;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(12rem, 25vw, 24rem);
  line-height: 1;
  color: var(--color-border);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.05em;
}

/* Kicker / eyebrow above hero title — gradient text (see helper above) */
.hero__kicker,
.kicker {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-block-end: var(--space-xs);
}

.hero__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  max-width: 14ch;
  /* room for the slow gradient pan (see motion block) */
  background-size: 220% auto;
}

/* An <em> in the hero title opts back into a solid accent so the emphasis
   still reads rather than dissolving into the gradient. */
.hero__title em {
  font-style: italic;
  color: var(--color-accent);
  -webkit-text-fill-color: var(--color-accent);
}

.hero__lead {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  font-weight: 300;
  max-width: 50ch;
  color: var(--color-text);
  opacity: 0.8;
  margin-block-start: var(--space-md);
}

/* Decorative gradient rule beneath hero intro */
.hero__rule,
.hero::after {
  content: '';
  display: block;
  width: 4.5rem;
  height: 3px;
  border-radius: 100px;
  background: var(--gradient-brand-h);
  margin-block-start: var(--space-lg);
}

/* --- Section headings ----------------------------------------------------- */
.section-title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: -0.015em;
  position: relative;
  padding-block-end: var(--space-sm);
}

/* Gradient ruled line under section headings */
.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 3rem;
  height: 3px;
  border-radius: 100px;
  background: var(--gradient-brand-h);
}

/* Section label / eyebrow above section title — gradient text (helper above) */
.section-label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-block-end: var(--space-xs);
}

/* --- Articles grid + cards ------------------------------------------------ */
.articles-section {
  padding-block: var(--space-xl);
}

.article-card {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  /* 3px gradient bar pinned to the top edge, over a faintly tinted surface. */
  background:
    var(--gradient-brand-h) top left / 100% 3px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 6%, var(--color-surface)) 0%, var(--color-surface) 55%);
}

/* All cards share the neutral 1px outline; the gradient top bar (background)
   now carries the color accent, so the old solid colored top borders are gone. */
.article-card:first-child,
.article-card:not(:first-child) {
  border-top: var(--border-width) solid var(--color-border);
}

.article-card:hover {
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
  box-shadow:
    0 12px 38px color-mix(in srgb, var(--color-accent) 16%, transparent),
    0 4px 16px color-mix(in srgb, var(--color-horizon) 14%, transparent);
}

.article-card__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .article-card__title {
    font-size: var(--text-xl);
  }
}

/* Card link — "Read more" voice in Clear Horizon */
.article-card__link {
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-horizon);
  transition: color 0.18s ease;
}

/* NOTE: Do NOT set position:absolute; inset:0 on .article-card__link::after
   — layout.css uses ::after for the "→" arrow and the two rules would conflict
   (DS CSS conflict note in the design system). Leave ::after untouched here. */

.article-card__link:hover {
  color: var(--color-accent);
}

/* --- Article list page ---------------------------------------------------- */
.articles-index {
  padding-block: var(--space-xl);
}

.article-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.article-list__item {
  border-block-end: var(--border-width) solid var(--color-border);
  padding-block: var(--space-md);
  transition: background 0.15s ease, transform 0.2s ease;
}

.article-list__item:first-child {
  border-block-start: var(--border-width) solid var(--color-border);
}

.article-list__item:hover {
  background: var(--color-surface);
  transform: translateY(-2px);
}

.article-list__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  margin-block-end: var(--space-3xs);
}

@media (min-width: 768px) {
  .article-list__title {
    font-size: var(--text-xl);
  }
}

.article-list__link {
  text-decoration: none;
  color: var(--color-text);
  transition: color 0.18s ease;
}

.article-list__link:hover {
  color: var(--color-accent);
}

/* --- Article page hero — soft rounded gradient panel ---------------------- */
.page-hero {
  padding-block: var(--space-xl);
  padding-inline: var(--space-md);
  position: relative;
  border-block-end: 0;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 110% at 0% 0%, color-mix(in srgb, var(--color-accent) 11%, transparent) 0%, transparent 55%),
    radial-gradient(120% 110% at 100% 100%, color-mix(in srgb, var(--color-horizon) 12%, transparent) 0%, transparent 55%),
    var(--color-bg);
}

/* Gradient rule before the page title */
.page-hero::before {
  content: '';
  display: block;
  width: 3.5rem;
  height: 3px;
  border-radius: 100px;
  background: var(--gradient-brand-h);
  margin-block-end: var(--space-md);
}

.page-title {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: var(--leading-snug);
  letter-spacing: -0.02em;
}

/* --- Prose / article body ------------------------------------------------- */
.prose {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

/* DS-6 override: prose h1 scaled for a long-form reading column (kept solid
   for a calm reading hierarchy — h2 carries the gradient accent instead) */
.prose h1 {
  font-size: var(--text-2xl);
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: var(--leading-snug);
  color: var(--color-text);
}

@media (min-width: 768px) {
  .prose h1 {
    font-size: var(--text-3xl);
  }
}

/* Prose h2 — gradient text (see helper above) */
.prose h2 {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: -0.015em;
}

.prose h3 {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.prose h4 {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
}

/* H5/H6 in prose — sans, uppercase, Clear Horizon accent for sub-labels */
.prose h5,
.prose h6 {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-horizon);
}

/* Prose body links — Clear Horizon, underline */
.prose a {
  color: var(--color-horizon);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-horizon) 45%, transparent);
  text-underline-offset: 0.2em;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.prose a:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

/* Pull-quote / blockquote — soft gradient block with a gradient edge rule */
.prose blockquote {
  position: relative;
  margin-inline: 0;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 300;
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--color-text);
  opacity: 0.95;
  /* 3px gradient rule on the inline-start edge + a faint gradient wash bg. */
  background:
    var(--gradient-brand) left / 3px 100% no-repeat,
    linear-gradient(120deg,
      color-mix(in srgb, var(--color-accent) 8%, transparent) 0%,
      color-mix(in srgb, var(--color-horizon) 8%, transparent) 100%);
}

/* Drop-cap on first paragraph — gradient-filled (see helper above) */
.prose > p:first-of-type::first-letter {
  font-family: var(--font-serif);
  font-size: 3.5em;
  font-weight: 300;
  line-height: 0.8;
  float: left;
  margin-inline-end: 0.08em;
  margin-block-start: 0.06em;
}

/* --- Category / metadata tags -------------------------------------------- */
/* "Clear Horizon" blue for category labels and metadata — DS-2 usage */
.tag,
.article-tag,
.meta,
.article-meta,
.article-card__meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-horizon);
}

/* Inline tag pill variant */
.tag {
  display: inline-block;
  padding: 0.2em 0.65em;
  border-radius: 100px;
  border: 1px solid var(--color-horizon);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Hover fills the pill with the brand gradient */
.tag:hover {
  background: var(--gradient-brand-h);
  border-color: transparent;
  color: var(--color-on-dark);
  -webkit-text-fill-color: var(--color-on-dark);
}

/* --- Page-level hero for non-home pages ----------------------------------- */
.page-hero .page-title {
  font-size: var(--text-3xl);
  font-family: var(--font-serif);
  font-weight: 400;
}

@media (min-width: 768px) {
  .page-hero .page-title {
    font-size: var(--text-4xl);
  }
}

/* --- Site footer — full gradient block ------------------------------------ */
.site-footer {
  color: var(--color-on-dark);            /* Parchment text on the dark block  */
  padding-block: var(--space-lg);         /* ≤ --space-lg per DS rule          */
  border-block-start: 0;                  /* replaced by the ::before gradient  */
  position: relative;
  background:
    radial-gradient(90% 150% at 100% 0%, color-mix(in srgb, var(--color-accent) 24%, transparent) 0%, transparent 55%),
    radial-gradient(80% 130% at 0% 120%, color-mix(in srgb, var(--color-horizon) 22%, transparent) 0%, transparent 52%),
    linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-lift) 100%);
}

/* Gradient top edge on the footer */
.site-footer::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--gradient-brand-h);
}

/* Decorative gradient accent stripe in the footer */
.site-footer .footer-accent-bar {
  width: 3rem;
  height: 2px;
  border-radius: 100px;
  background: var(--gradient-brand-h);
  margin-block-end: var(--space-md);
}

.site-footer a {
  color: var(--color-on-dark);
  transition: color 0.18s ease;
}

.site-footer a:hover {
  color: var(--color-accent);
}

.footer-copy {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.04em;
  opacity: 0.65;
  color: var(--color-on-dark);
}

/* Footer nav links — Clear Horizon accent on hover */
.site-footer nav a {
  color: var(--color-on-dark);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.8;
  transition: color 0.18s ease, opacity 0.18s ease;
}

.site-footer nav a:hover {
  color: var(--color-horizon);
  opacity: 1;
}

/* Footer brand mark */
.site-footer .nav-brand {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-on-dark);
  text-decoration: none;
  letter-spacing: -0.015em;
}

.site-footer .nav-brand:hover {
  color: var(--color-accent);
}

/* --- Micro-interactions (DS-5) -------------------------------------------- */
/* 1. Article card lift — elevation shift on hover */
@media (hover: hover) {
  .article-card {
    transition: border-color 0.22s ease,
                box-shadow 0.22s ease,
                transform 0.22s ease;
  }

  .article-card:hover {
    transform: translateY(-3px);
    box-shadow:
      0 16px 40px color-mix(in srgb, var(--color-accent) 16%, transparent),
      0 6px 18px color-mix(in srgb, var(--color-horizon) 14%, transparent);
  }
}

/* 2. Hero text cinematic reveal + a slow gradient pan on the headline */
@media (prefers-reduced-motion: no-preference) {
  .hero__title {
    animation:
      reveal-fade 0.7s cubic-bezier(0.22, 1, 0.36, 1) both,
      gradient-pan 9s ease-in-out 0.7s infinite alternate;
  }

  .hero__lead {
    animation: reveal-fade 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
  }
}

@keyframes reveal-fade {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gradient-pan {
  from { background-position: 0% center; }
  to   { background-position: 100% center; }
}

/* Reduced motion: kill all custom animations (base.css handles the global
   reduction; this ensures our keyframe animations are also suppressed) */
@media (prefers-reduced-motion: reduce) {
  .hero__title {
    animation: none;
    background-position: 0% center;
  }

  .hero__lead {
    animation: none;
  }

  .article-card {
    transition: border-color 0.01ms, box-shadow 0.01ms;
  }
}

/* --- Dark-mode surface refinements --------------------------------------- */
/* Cards in dark mode: tinted gradient surface + subtle inner glow */
:root[data-theme="dark"] .article-card {
  box-shadow: inset 0 0 0 1px var(--color-border);
  background:
    var(--gradient-brand-h) top left / 100% 3px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 10%, var(--color-surface)) 0%, var(--color-surface) 55%);
}

:root[data-theme="dark"] .article-card:hover {
  box-shadow: 0 8px 30px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

:root[data-theme="dark"] .site-header {
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  border-block-end-color: var(--color-border);
}

/* Dark mode nav-toggle border uses the lighter surface border */
:root[data-theme="dark"] .nav-toggle {
  border-color: var(--color-border);
}

/* Dark mode hero watermark — slightly more visible */
:root[data-theme="dark"] .hero::before {
  opacity: 0.08;
}

/* Dark mode: intensify the hero glow block so it reads on Deep Ink */
:root[data-theme="dark"] .hero {
  background:
    radial-gradient(120% 85% at 10% -10%, color-mix(in srgb, var(--color-accent) 24%, transparent) 0%, transparent 55%),
    radial-gradient(110% 90% at 105% 110%, color-mix(in srgb, var(--color-horizon) 26%, transparent) 0%, transparent 52%),
    var(--color-bg);
}

/* Dark mode: intensify the page-hero glow panel */
:root[data-theme="dark"] .page-hero {
  background:
    radial-gradient(120% 110% at 0% 0%, color-mix(in srgb, var(--color-accent) 18%, transparent) 0%, transparent 55%),
    radial-gradient(120% 110% at 100% 100%, color-mix(in srgb, var(--color-horizon) 18%, transparent) 0%, transparent 55%),
    var(--color-bg);
}