/* Evidicia design system.
 *
 * Ported verbatim from the design prototypes' <helmet><style> blocks
 * (Evidicia Home.dc.html + Evidicia Topic.dc.html), merged. This file is
 * the palette (light + dark via data-theme), the shared utility classes
 * and keyframes, and the responsive !important layer keyed to ev-*
 * classes. Per-element styling stays inline in the templates — see
 * .claude/rules/templates-and-css.md. Reuse these tokens; don't invent. */

* { box-sizing: border-box; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

.site {
  --blue: #1f5cf0; --purple: #7a2fe0; --coral: #ff4f37;
  --bg: #eef1f8; --surface: #ffffff; --ink: #0a1322; --muted: #586484; --line: #dde3ef; --soft: #e6ebf6; --logo-l: block; --logo-d: none;
  --hero-bg: #edf1fb; --hero-ink: #0a1322; --hero-sub: #48566f; --hero-grid-1: rgba(10,19,34,.135); --hero-grid-2: rgba(10,19,34,.075); --hero-grid-3: rgba(10,19,34,.032); --hero-glow-b: rgba(31,92,240,.16); --hero-glow-c: rgba(255,79,55,.14); --hero-bd: rgba(10,19,34,.14); --hero-chip: rgba(10,19,34,.04); --hero-chip-txt: #586484; --hero-cta-bg: #0a1322; --hero-cta-txt: #ffffff; --hero-cta2-bd: rgba(10,19,34,.22); --hero-cta2-txt: #0a1322; --hero-field-bg: rgba(10,19,34,.04); --hero-field-bd: rgba(10,19,34,.14); --hero-field-txt: #7a869c; --hero-sketch: rgba(10,19,34,.30);
}
.site[data-theme="dark"] {
  --bg: #060c17; --surface: #0d1726; --ink: #eaf0fb; --muted: #8593ad; --line: #1c2a42; --soft: #0a1322; --logo-l: none; --logo-d: block;
  --hero-bg: #070d18; --hero-ink: #ffffff; --hero-sub: #c4cde0; --hero-grid-1: rgba(255,255,255,.17); --hero-grid-2: rgba(255,255,255,.095); --hero-grid-3: rgba(255,255,255,.04); --hero-glow-b: rgba(31,92,240,.40); --hero-glow-c: rgba(255,79,55,.34); --hero-bd: rgba(255,255,255,.16); --hero-chip: rgba(255,255,255,.05); --hero-chip-txt: #aeb9d0; --hero-cta-bg: #ffffff; --hero-cta-txt: #0a1322; --hero-cta2-bd: rgba(255,255,255,.28); --hero-cta2-txt: #ffffff; --hero-field-bg: rgba(255,255,255,.07); --hero-field-bd: rgba(255,255,255,.16); --hero-field-txt: #8593ad; --hero-sketch: rgba(255,255,255,.32);
}

.site img.logo-l { display: var(--logo-l); }
.site img.logo-d { display: var(--logo-d); }
.site img.mark-l { display: var(--logo-l); }
.site img.mark-d { display: var(--logo-d); }

.navlink { font: 500 11px/1 'IBM Plex Mono'; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); transition: color .2s; }
.navlink:hover { color: var(--ink); }

/* Gradient-clipped highlight phrase (hero subtitle, about headline). */
.ev-grad { background: linear-gradient(95deg, #3a76ff, #7a2fe0 55%, #ff4f37); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Theme control: a three-way System / Light / Dark segmented pill.
   Lives inside the header nav (desktop) and the mobile menu — no longer a
   floating button, so it can't overlap the Subscribe CTA. */
.ev-themeseg { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 3px; }
.ev-themeseg button { border: none; background: transparent; color: var(--muted); border-radius: 999px; padding: 6px 11px; font: 600 11px/1 'IBM Plex Sans', sans-serif; cursor: pointer; }
.ev-themeseg button:hover { color: var(--ink); }
.ev-themeseg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(12,20,40,.16); }
.ev-themeseg--block { display: flex; margin-top: 8px; }
.ev-themeseg--block button { flex: 1; text-align: center; padding: 11px 8px; font-size: 12.5px; }
.ev-burger { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 10px; cursor: pointer; }

/* Mobile menu: hidden until toggled; the desktop media query forces it off. */
.ev-nav-mobile { display: none; }
.ev-nav-mobile.is-open { display: flex; }

.tcard { transition: transform .25s, box-shadow .25s; }
.tcard:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(10,19,34,.16); }

/* RichText normalisation so editor prose matches the designed paragraphs. */
.rich-text p { margin: 0 0 16px; }
.rich-text p:last-child { margin-bottom: 0; }

/* Topic summary: first paragraph in ink, the rest muted (theme-aware). */
.ev-summary p { font: 400 16px/1.7 'IBM Plex Sans'; margin: 0 0 16px; color: var(--ink); }
.ev-summary p:not(:first-child) { color: var(--muted); }
.ev-summary p:last-child { margin-bottom: 0; }

@keyframes evpulse { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: .85; transform: scale(1.06); } }
@keyframes evfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---- responsive layer (mobile overrides only; desktop unchanged) ---- */
@media (min-width: 861px) { .ev-nav-mobile { display: none !important; } }
@media (max-width: 980px) { .ev-sketches { display: none !important; } }
@media (max-width: 860px) {
  .ev-nav-desktop { display: none !important; }
  .ev-burger { display: flex !important; }
  .ev-header { padding: 14px 20px !important; }
  .ev-section { padding: 56px 30px !important; }
  .ev-hero { padding: 72px 26px 84px !important; }
  .ev-grid3 { grid-template-columns: repeat(2, 1fr) !important; }
  .ev-grid4 { grid-template-columns: repeat(2, 1fr) !important; }
  .ev-pillars { grid-template-columns: repeat(2, 1fr) !important; }
  .ev-method { grid-template-columns: 1fr !important; gap: 30px !important; }
  .ev-method-aside { position: static !important; }
  .ev-two { grid-template-columns: 1fr !important; gap: 30px !important; }
  .ev-footer { grid-template-columns: 1fr 1fr !important; }
  .ev-h2-lg { font-size: 30px !important; }
  .ev-topichdr { padding: 36px 22px 40px !important; }
  .ev-body { grid-template-columns: 1fr !important; gap: 36px !important; padding: 44px 24px !important; }
  .ev-aside { position: static !important; }
  .ev-h1 { font-size: 40px !important; }
}
@media (max-width: 560px) {
  .ev-section { padding: 44px 20px !important; }
  .ev-hero { padding: 52px 18px 60px !important; }
  .ev-grid3, .ev-grid4, .ev-pillars, .ev-grid2, .ev-footer { grid-template-columns: 1fr !important; }
  .ev-showhead { flex-direction: column !important; align-items: flex-start !important; }
  .ev-shownote { text-align: left !important; max-width: none !important; }
  .ev-herocta { flex-direction: column !important; align-items: stretch !important; }
  .ev-herocta a { text-align: center !important; }
  .ev-hsub { font-size: 16px !important; }
  .ev-h2 { font-size: 24px !important; }
  .ev-h2-lg { font-size: 25px !important; }
  .ev-h2-cta { font-size: 25px !important; }
  .ev-h1 { font-size: 30px !important; }
  .ev-figcap { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }
  .ev-infogimg { height: auto !important; aspect-ratio: 4/5 !important; }
}