/* ==========================================================================
   movaindus — design system v5  ·  "Future Rustic Knowledge Lab"
   Modern research precision + editorial readability + natural warmth.
   Palette, type and texture follow the project specification (§12):
   Warm Ivory, Deep Forest, Charcoal, Muted Copper, Soft Sage, Pale Sand.
   Mobile-first. Light and dark are both first-class.
   ========================================================================== */























:root {
  color-scheme: light dark;

  /* §12.2 — the specified palette */
  --ivory: #f5f0e6;
  --forest: #173b32;
  --charcoal: #242824;
  --copper: #b46a45;
  --sage: #c8d5c3;
  --sand: #e8dfd0;

  --bg: var(--ivory);
  --surface: #fbf8f1;
  --surface-2: var(--sand);
  --text: var(--charcoal);
  --muted: #5c6259;
  --faint: #5b6258;
  /* Semantic states. Chosen for contrast on the ivory surface, and never used
     on their own to carry meaning — every state also has a word. */
  --ok: #1f5c48;
  --warn: #8a4a24;
  --danger: #9b2c2c;      /* darkened from #8a9088 to clear 4.5:1 on ivory */
  --border: #e0d6c4;
  --border-2: #cfc3ac;

  --focus: #2b6de9;       /* keyboard focus, deliberately not the brand accent */
  --primary: var(--forest);
  --accent: var(--copper);
  --copper-ink: #9a5636;  /* same hue, dark enough for body-size text */
  --copper-deep: #8a4f24; /* same hue again, dark enough for white text on it */
  --forest-ink: #173b32;  /* and the same for the brand green, as text */
  --accent-2: #44705f;    /* link green, darkened to clear 4.5:1 */
  --on-primary: #f7f4ec;

  --topbar-h: 62px;       /* the sticky bar's height; the rails stick below it */
  --radius-xl: 24px;      /* the composer and the largest panels */
  --radius-lg: 20px;      /* cards and answer panels */
  --radius: 16px;         /* the default surface */
  --radius-sm: 14px;      /* small panels and inputs */
  --radius-xs: 12px;      /* chips, buttons, the focus ring */

  --shadow-sm: 0 1px 2px rgba(36, 40, 36, .06);
  --shadow: 0 1px 2px rgba(36, 40, 36, .05), 0 12px 28px -14px rgba(23, 59, 50, .22);
  --shadow-lg: 0 2px 6px rgba(36, 40, 36, .06), 0 34px 60px -30px rgba(23, 59, 50, .38);

  --maxw: 1200px;

  /* §12.3 — Lora for editorial headings, Inter for body and UI.
     Tiro Devanagari Hindi gives Hindi headings a matching serif voice. */
  --font-head: 'Lora', 'Tiro Devanagari Hindi', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans Devanagari', 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}























[data-theme="dark"] {
  --bg: #101713;
  --surface: #1a2620;
  --surface-2: #21302a;
  --text: #ede8dd;
  --muted: #a9b0a6;
  --faint: #848c84;
  --ok: #7fc4a5;
  --warn: #e0a271;
  --danger: #f08a8a;
  --border: #2a382f;
  --border-2: #3a4a40;

  --primary: var(--sage);
  --accent: #d08a62;
  --copper-ink: #d08a62;  /* in dark mode the bright copper is already text-safe */
  --copper-deep: #8a4f24; /* but a filled copper still needs its own depth for white */
  --forest-ink: #a8d5c0;  /* a lifted green: the brand one is a surface, not text */
  --accent-2: #7fb3a0;
  --on-primary: #101713;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 28px -14px rgba(0, 0, 0, .7);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .45), 0 34px 60px -30px rgba(0, 0, 0, .9);
}























* { box-sizing: border-box; }























html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }























body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}























/* §12.4 — a calm geometric grid, warm colour washes, and a paper grain so
   light the body text never loses contrast. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(56vw 40vw at 10% -6%, color-mix(in srgb, var(--sage) 42%, transparent), transparent 62%),
    radial-gradient(46vw 36vw at 96% 0%, color-mix(in srgb, var(--copper) 16%, transparent), transparent 58%);
}























body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--forest) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--forest) 6%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(78% 55% at 50% 0%, #000 22%, transparent 100%);
  mask-image: radial-gradient(78% 55% at 50% 0%, #000 22%, transparent 100%);
}























.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}























[data-theme="dark"] .grain { mix-blend-mode: screen; opacity: .16; }























a { color: var(--accent-2); text-decoration: none; }























a:hover { text-decoration: underline; }























h1, h2, h3, h4 { font-family: var(--font-head); letter-spacing: -.01em; line-height: 1.18; font-weight: 600; }























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























.skip-link { position: absolute; left: -999px; top: 0; z-index: 99; background: var(--primary); color: var(--on-primary); padding: 10px 16px; border-radius: 0 0 var(--radius-sm) 0; }























.skip-link:focus { left: 0; }























/* ---------- buttons ---------- */
.btn {
  font: inherit; font-family: var(--font-body); font-size: 14.5px; font-weight: 500; cursor: pointer;
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  padding: 10px 16px; line-height: 1.15; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: transform .12s ease, border-color .16s, background .16s, color .16s;
  white-space: nowrap; -webkit-tap-highlight-color: transparent;
}























.btn:hover { border-color: var(--accent); text-decoration: none; }























.btn:active { transform: scale(.985); }























/* --primary and --on-primary are a MATCHED PAIR, redefined together in every
   theme. --forest is not: it stays the dark brand green in dark mode, while
   --on-primary flips to near-black for the sage that --primary becomes. So a
   button written against --forest was dark-on-dark in dark mode — measured at
   1.48:1. Anything that fills with a theme colour and writes on it uses the
   pair. */
.btn-primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }























.btn-primary:hover { background: var(--copper-deep); border-color: var(--copper-deep); color: #fff; }























[data-theme="dark"] .btn-primary { background: var(--sage); color: var(--on-primary); border-color: var(--sage); }























[data-theme="dark"] .btn-primary:hover { background: var(--copper-ink); border-color: var(--copper-ink); color: var(--on-primary); }























.btn-ghost { background: transparent; border-color: var(--border-2); }























.btn-ghost:hover { background: var(--surface-2); }























.btn-icon { padding: 9px; width: 40px; height: 40px; }























.btn svg { width: 17px; height: 17px; fill: currentColor; display: block; }























/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.3) blur(14px);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  border-bottom: 1px solid var(--border-2);
}























.topbar-inner { max-width: var(--maxw); margin: 0 auto; padding: 11px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }























.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }























.brand:hover { text-decoration: none; }























.brand-mark { width: 34px; height: 34px; flex: none; border-radius: var(--radius-sm); display: grid; place-items: center; }























.brand-mark svg { width: 100%; height: 100%; display: block; border-radius: var(--radius-sm); }























.brand-text { display: flex; flex-direction: column; line-height: 1.1; }























.brand-text strong { font-family: var(--font-head); font-size: 18px; font-weight: 600; letter-spacing: -.01em; }























.brand-text small { color: var(--faint); font-size: 10.5px; letter-spacing: .03em; }























/* ---------- search ---------- */
.searchbar {
  flex: 1 1 320px; display: flex; align-items: flex-end; gap: 8px;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--radius); padding: 7px 8px 7px 14px; min-width: 200px;
  box-shadow: var(--shadow-sm); transition: border-color .18s, box-shadow .18s;
}























.searchbar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }























.searchbar textarea, .searchbar input {
  flex: 1; border: 0; background: transparent; color: var(--text); font: inherit; font-family: var(--font-body);
  font-size: 15px; min-width: 50px; padding: 6px 2px; resize: none; max-height: 140px; overflow-y: auto;
}























.searchbar textarea::placeholder, .searchbar input::placeholder { color: var(--faint); }























.searchbar textarea:focus, .searchbar input:focus { outline: none; }




















/* The field is inside a bordered capsule, so the ring goes on the capsule —
   but it must go somewhere, and it must be visible. */
.searchbar:has(textarea:focus-visible), .searchbar:has(input:focus-visible) {
  outline: 2px solid var(--focus); outline-offset: 2px;
}























.searchbar input::-webkit-search-cancel-button { -webkit-appearance: none; }























.mode { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-xs); background: var(--surface-2); flex: none; align-self: center; }























.mode-btn { font: inherit; font-family: var(--font-body); font-size: 12.5px; font-weight: 500; cursor: pointer; border: 0; background: transparent; color: var(--muted); padding: 6px 10px; border-radius: var(--radius-xs); line-height: 1; }























.mode-btn.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }























/* §8.3 / §6.4 — answer depth */
.depth { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }























.depth-label { font-size: 12px; color: var(--faint); }























.depth-btn {
  font: inherit; font-family: var(--font-body); font-size: 12.5px; font-weight: 500; cursor: pointer;
  border: 1px solid var(--border-2); background: var(--surface); color: var(--muted);
  padding: 7px 12px; border-radius: 999px; line-height: 1;
}























.depth-btn:hover { border-color: var(--accent); color: var(--text); }























.depth-btn.is-active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }























[data-theme="dark"] .depth-btn.is-active { background: var(--sage); border-color: var(--sage); color: var(--on-primary); }























/* ---------- nav ---------- */
.topnav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }























.topnav a { color: var(--muted); padding: 8px 11px; font-size: 14px; font-weight: 500; border-radius: var(--radius-xs); }























.topnav a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }























.nav-sep { width: 1px; height: 20px; background: var(--border-2); margin: 0 4px; }























/* ---------- language bar ---------- */
.langbar { border-bottom: 1px solid var(--border); background: var(--surface); }























.langbar-inner { max-width: var(--maxw); margin: 0 auto; padding: 9px 16px; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); }























.langbar select, .select { font: inherit; font-family: var(--font-body); padding: 7px 10px; border-radius: var(--radius-xs); border: 1px solid var(--border-2); background: var(--surface); color: var(--text); max-width: 260px; }























/* ---------- suggestions ---------- */
.suggest {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: min(720px, calc(100% - 20px)); top: 100%; margin-top: 8px;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden; z-index: 70;
}























.suggest-item { display: flex; gap: 12px; padding: 12px 16px; cursor: pointer; border-bottom: 1px solid var(--border); color: var(--text); }























.suggest-item:last-child { border-bottom: 0; }























.suggest-item:hover, .suggest-item.active { background: var(--surface-2); text-decoration: none; }























.suggest-item.active { box-shadow: inset 3px 0 0 var(--accent); }























.suggest-item .si-title { font-weight: 600; }























.suggest-item .si-desc { color: var(--muted); font-size: 13px; }























/* ---------- layout ---------- */
main { display: block; min-height: 62vh; }























.wrap { max-width: var(--maxw); margin: 0 auto; padding: 26px 16px 72px; }























.wrap-narrow { max-width: 820px; margin: 0 auto; padding: 26px 16px 72px; }























/* ---------- hero ---------- */
.hero { padding: 56px 16px 8px; text-align: center; position: relative; }


































.kicker {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500;
  color: var(--muted); border: 1px solid var(--border-2); border-radius: 999px;
  padding: 6px 13px; margin-bottom: 20px; background: var(--surface);
}























.kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--copper); }























.hero h1 { font-size: clamp(34px, 7vw, 62px); margin: 0 0 16px; font-weight: 600; letter-spacing: -.02em; }























.hero h1 .grad { color: var(--copper); font-style: italic; }























.hero p.lede { font-size: clamp(15.5px, 2vw, 18.5px); color: var(--muted); margin: 0 auto 26px; max-width: 660px; }


































.chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 26px; }























.chip {
  border: 1px solid var(--border-2); background: var(--surface); color: var(--text);
  padding: 8px 14px; font-size: 13.5px; font-weight: 400; cursor: pointer; text-decoration: none;
  border-radius: 999px; transition: transform .12s, border-color .16s, color .16s;
}























.chip:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); text-decoration: none; }























/* ---------- language nudge ---------- */
.nudge {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--surface);
  padding: 12px 16px; margin-bottom: 20px;
}























.nudge span { color: var(--muted); font-size: 14px; }























/* ---------- sections ---------- */
.sec { margin-top: 46px; animation: rise .45s ease both; }























.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--border-2); padding-bottom: 9px; }























.sec-head h2 { font-size: 22px; margin: 0; font-weight: 600; }























@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }























/* ---------- article of the day ---------- */
.aotd {
  display: grid; grid-template-columns: 1fr; overflow: hidden;
  border: 1px solid var(--border-2); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow);
}























@media (min-width: 820px) { .aotd { grid-template-columns: 1.05fr .95fr; align-items: stretch; } }























/* A fixed aspect ratio keeps the card stable and stops the picture being
   stretched to fill whatever height the text happens to need. */







.aotd-credit a { color: inherit; text-decoration: none; }























.aotd-credit a:hover { text-decoration: underline; }





























.aotd-body { padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 12px; }























.aotd-body h2 { font-size: clamp(23px, 3.2vw, 33px); margin: 0; }























.aotd-body p { color: var(--muted); margin: 0; font-size: 15px; }























.aotd-body .row-cta { margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; }























/* ---------- how it works (§8.5) ---------- */
.howsteps { display: grid; gap: 14px; grid-template-columns: 1fr; counter-reset: how; }























@media (min-width: 620px) { .howsteps { grid-template-columns: repeat(2, 1fr); } }























@media (min-width: 1000px) { .howsteps { grid-template-columns: repeat(4, 1fr); } }























.howstep {
  position: relative; border: 1px solid var(--border-2); border-radius: var(--radius);
  background: var(--surface); padding: 20px 18px 18px;
}























.howstep::before {
  counter-increment: how; content: counter(how);
  display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 10px;
  border-radius: 50%; background: var(--primary); color: var(--on-primary);
  font-family: var(--font-head); font-size: 15px; font-weight: 600;
}























[data-theme="dark"] .howstep::before { background: var(--sage); color: var(--on-primary); }























.howstep h3 { margin: 0 0 6px; font-size: 17px; }























.howstep p { margin: 0; color: var(--muted); font-size: 13.5px; }























/* a restrained connecting line between the steps */
@media (min-width: 1000px) {
  .howstep:not(:last-child)::after {
    content: ''; position: absolute; top: 34px; right: -14px; width: 14px; height: 1px; background: var(--border-2);
  }
}























/* ---------- explore topics (§8.4) ---------- */
.topics-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }























@media (min-width: 760px) { .topics-grid { grid-template-columns: repeat(4, 1fr); } }























.topic-card {
  display: flex; flex-direction: column; gap: 8px; padding: 16px;
  border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--surface);
  color: var(--text); text-decoration: none; transition: transform .14s, border-color .16s;
}























.topic-card:hover { transform: translateY(-2px); border-color: var(--accent); text-decoration: none; }























.topic-card .ic { width: 32px; height: 32px; border-radius: var(--radius-xs); display: grid; place-items: center; background: color-mix(in srgb, var(--sage) 55%, transparent); color: var(--forest-ink); }























[data-theme="dark"] .topic-card .ic { background: color-mix(in srgb, var(--sage) 22%, transparent); color: var(--sage); }























.topic-card .ic svg { width: 17px; height: 17px; fill: currentColor; }























.topic-card h3 { margin: 0; font-size: 15.5px; }























.topic-card p { margin: 0; color: var(--muted); font-size: 12.5px; }























.feature .ic {
  width: 36px; height: 36px; border-radius: var(--radius-xs); display: grid; place-items: center;
  background: color-mix(in srgb, var(--sage) 55%, transparent); color: var(--forest-ink); margin-bottom: 4px;
}























[data-theme="dark"] .feature .ic { background: color-mix(in srgb, var(--sage) 22%, transparent); color: var(--sage); }























.feature .ic svg { width: 18px; height: 18px; fill: currentColor; }























.feature h3 { margin: 0; font-size: 16px; }























.feature p { margin: 0; color: var(--muted); font-size: 13.5px; }























/* ---------- cards ---------- */
.grid { display: grid; gap: 16px; grid-template-columns: 1fr; }























@media (min-width: 560px) { .grid { grid-template-columns: repeat(2, 1fr); } }























@media (min-width: 900px) { .grid { grid-template-columns: repeat(3, 1fr); } }























@media (min-width: 1200px) { .grid { grid-template-columns: repeat(4, 1fr); } }























.card {
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; color: var(--text);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}























.card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow); }























a.card { text-decoration: none; }























.card-thumb { aspect-ratio: 16/9; background: var(--surface-2); overflow: hidden; }























.card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }























.card:hover .card-thumb img { transform: scale(1.04); }























.card-thumb.placeholder { display: grid; place-items: center; }























.card-thumb.placeholder svg { width: 30px; height: 30px; }























.card-body { padding: 15px 16px 17px; display: flex; flex-direction: column; gap: 7px; flex: 1; }























.card-body h3 { margin: 0; font-size: 16px; font-weight: 600; }























.card-body p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }























.card-meta { margin-top: auto; color: var(--faint); font-size: 12px; }























/* ---------- badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500;
  border-radius: 999px; padding: 5px 11px;
  background: color-mix(in srgb, var(--sage) 55%, transparent); color: var(--forest-ink);
}























[data-theme="dark"] .badge { background: color-mix(in srgb, var(--sage) 22%, transparent); color: var(--sage); }























.badge.accent { background: var(--copper-deep); color: #fff; }























[data-theme="dark"] .badge.accent { color: var(--on-primary); }























/* ---------- article ---------- */
.article-head { margin-bottom: 4px; }























.article-title { font-size: clamp(28px, 5vw, 44px); margin: 0 0 8px; font-weight: 600; }























.article-sub { color: var(--muted); margin: 0 0 18px; font-size: 13.5px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }























.article-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 24px; }























/* The article reads at full width. The contents-and-related rail is closed by
   default and opens from the "Contents & related" button in the action row. */
.article-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }























.article-grid .toc-rail { display: none; }























.article-grid.rail-open .toc-rail { display: grid; order: -1; }























@media (min-width: 960px) {
  .article-grid.rail-open { grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; }
  .article-grid.rail-open .toc-rail { order: 0; }
}























.answer-card {
  border: 1px solid var(--border-2); border-radius: var(--radius-lg); background: var(--surface);
  padding: 22px; box-shadow: var(--shadow); position: relative; overflow: hidden;
}























.answer-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--copper); }























.answer-card h2 { margin: 0 0 14px; font-family: var(--font-body); font-size: 11.5px; text-transform: uppercase; letter-spacing: .13em; color: var(--copper-ink); font-weight: 600; }























.answer-card .core { font-size: 17px; line-height: 1.75; max-width: var(--measure); }























.answer-card .core p { margin: 0 0 11px; }























.answer-card .core p:last-child { margin-bottom: 0; }































































.factbox { border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--surface); overflow: hidden; }























.factbox h3 { margin: 0; padding: 12px 15px; font-family: var(--font-body); font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; background: var(--surface-2); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; gap: 8px; align-items: center; color: var(--muted); font-weight: 600; }























.factbox-src { font-size: 11px; letter-spacing: 0; text-transform: none; }























.factbox dl { margin: 0; }























.factbox .row { display: grid; grid-template-columns: 40% 1fr; gap: 10px; padding: 10px 15px; border-bottom: 1px solid var(--border); font-size: 13.5px; }























.factbox .row:last-child { border-bottom: 0; }























.factbox dt { color: var(--muted); }























.factbox dd { margin: 0; word-break: break-word; }























.toc-rail { position: sticky; top: 86px; display: grid; gap: 16px; }























.toc { border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--surface); padding: 7px; max-height: 46vh; overflow: auto; }























.toc h3 { margin: 7px 11px; font-family: var(--font-body); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); font-weight: 600; }























.toc a { display: block; padding: 7px 11px; color: var(--muted); font-size: 13.5px; border-radius: var(--radius-xs); }























.toc a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }























.toc a.lvl3 { padding-left: 24px; font-size: 13px; }























.toc a.active { background: color-mix(in srgb, var(--sage) 55%, transparent); color: var(--forest-ink); font-weight: 600; }























[data-theme="dark"] .toc a.active { background: color-mix(in srgb, var(--sage) 22%, transparent); color: var(--sage); }























/* ---------- prose ---------- */
/* The article is a QA document now, so .prose only wraps the fallback line.
   It keeps a reading measure and a table guard; the Wikipedia furniture it used
   to style can no longer reach a page. */
.prose { max-width: var(--measure); }
.prose table { display: block; max-width: 100%; overflow-x: auto; }























.prose h2 { font-size: 25px; margin: 36px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-2); }























.prose p { margin: 0 0 15px; }























/* ---------- tabs ---------- */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px; margin: 10px 0 24px; width: fit-content; max-width: 100%; }























.tab { border: 0; background: transparent; font: inherit; font-family: var(--font-body); font-size: 13.5px; font-weight: 500; color: var(--muted); cursor: pointer; padding: 9px 15px; border-radius: var(--radius-xs); }























.tab:hover { color: var(--text); }























.tabpanel[hidden] { display: none; }























.tabpanel { animation: rise .3s ease both; }























/* ---------- gallery + image credits (§4.3, §19) ---------- */
.gallery { columns: 2 150px; column-gap: 12px; }























@media (min-width: 800px) { .gallery { columns: 3 200px; } }























.gallery figure { break-inside: avoid; margin: 0 0 14px; }























.gallery img { width: 100%; display: block; border-radius: var(--radius-sm); background: var(--surface-2); }























.gallery figcaption { font-size: 12px; color: var(--muted); padding: 7px 2px 0; line-height: 1.5; }























.gallery .imgcredit { display: block; color: var(--faint); font-size: 11.5px; }























.gallery .imgcredit a { color: inherit; text-decoration: underline; }























/* ---------- timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }























.timeline li { position: relative; padding: 0 0 20px 26px; border-left: 1px solid var(--border-2); }























.timeline li::before { content: ''; position: absolute; left: -5px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--copper); }























.timeline .yr { font-family: var(--font-head); font-weight: 600; color: var(--copper-ink); margin-right: 7px; font-variant-numeric: tabular-nums; }























/* ---------- states ---------- */
.state { text-align: center; padding: 60px 20px; color: var(--muted); }























.spinner { width: 28px; height: 28px; margin: 0 auto 14px; border: 3px solid var(--border-2); border-top-color: var(--copper); border-radius: 50%; animation: spin .8s linear infinite; }























@keyframes spin { to { transform: rotate(360deg); } }























.error-box { border: 1px solid color-mix(in srgb, #a5432a 40%, var(--border-2)); border-radius: var(--radius); background: color-mix(in srgb, #a5432a 7%, var(--surface)); padding: 20px; }























.error-box h2 { margin: 0 0 8px; font-size: 18px; }























.error-box p { margin: 0 0 12px; color: var(--muted); }























/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--border-2); background: var(--surface); margin-top: 60px; }























.foot-inner { max-width: var(--maxw); margin: 0 auto; padding: 38px 16px 12px; display: grid; grid-template-columns: 1fr; gap: 26px; }























@media (min-width: 720px) { .foot-inner { grid-template-columns: 1.7fr 1fr 1fr; } }























.foot-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }























.foot-brand .brand-mark { width: 28px; height: 28px; }























.foot-brand strong { font-family: var(--font-head); font-size: 16px; }























.foot-col strong { display: block; margin-bottom: 10px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); font-weight: 600; }























.foot-col p { color: var(--muted); font-size: 13.5px; margin: 0; max-width: 44ch; }























.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }























.foot-col a { color: var(--muted); font-size: 13.5px; }























.foot-col a:hover { color: var(--accent); }























.foot-legal { max-width: var(--maxw); margin: 0 auto; padding: 14px 16px 30px; }























.foot-legal p { color: var(--faint); font-size: 12px; margin: 0 0 6px; max-width: 95ch; }























/* ---------- static pages (§8.6) ---------- */
.page { max-width: 760px; margin: 0 auto; }























.page h1 { font-size: clamp(28px, 5vw, 40px); margin: 0 0 10px; }























.page h2 { font-size: 22px; margin: 32px 0 10px; }























.page h3 { font-size: 17px; margin: 22px 0 8px; }























.page p, .page li { color: var(--text); }























.page .lead { color: var(--muted); font-size: 17px; margin: 0 0 22px; }























.page ul, .page ol { padding-left: 22px; }























.page li { margin-bottom: 8px; }























.page .updated { color: var(--faint); font-size: 12.5px; margin-top: 34px; border-top: 1px solid var(--border); padding-top: 14px; }























/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--primary); color: var(--on-primary); padding: 12px 20px; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); z-index: 200; font-size: 14px; max-width: 90vw;
}























[data-theme="dark"] .toast { background: var(--sage); color: var(--on-primary); }























/* ---------- pills ---------- */
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; }























.pill { border: 1px solid var(--border-2); border-radius: 999px; padding: 6px 13px; font-size: 13px; color: var(--muted); background: var(--surface); }























.pill:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }























.hr { height: 1px; background: var(--border-2); border: 0; margin: 30px 0; }























.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }























/* ---------- ask view ---------- */
.ask-head { margin-bottom: 22px; }























.ask-head .article-sub { margin-bottom: 0; }























.ask-question { font-family: var(--font-head); font-size: 20px; font-weight: 600; margin: 0 0 16px; }

































.ask-note { margin-top: 22px; padding: 13px 16px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); color: var(--muted); font-size: 12.5px; max-width: var(--measure); background: var(--surface); }























.topic-block { border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--surface); padding: 16px 18px; margin-bottom: 14px; }























.topic-block h3 { margin: 0 0 12px; font-size: 17px; display: flex; gap: 10px; align-items: baseline; }























/* ---------- rendered Markdown ---------- */
.md { max-width: var(--measure); }























.md h2 { font-family: var(--font-body); font-size: 11.5px; text-transform: uppercase; letter-spacing: .13em; color: var(--copper-ink); margin: 24px 0 10px; font-weight: 600; }























.md h3 { font-size: 19px; margin: 22px 0 10px; }























.md p { margin: 0 0 14px; }























.md ul, .md ol { padding-left: 24px; margin: 0 0 14px; }























.md li { margin-bottom: 7px; }























.md code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; font-family: var(--mono); font-size: .92em; }























.md blockquote { margin: 16px 0; padding: 8px 16px; border-left: 3px solid var(--copper); color: var(--muted); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }























.md hr { border: 0; border-top: 1px solid var(--border-2); margin: 22px 0; }























.md strong { font-weight: 600; }























.md-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 0; }























.md-raw {
  margin-top: 14px; border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: 14px 16px; white-space: pre-wrap; word-break: break-word;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: var(--muted); max-width: var(--measure);
}























/* ---------- mobile polish (§12.6) ---------- */
@media (max-width: 700px) {
  .topbar-inner { gap: 8px; padding: 10px 12px; }
  .brand-text small { display: none; }
  .topnav { margin-left: auto; }
  .topnav a { padding: 8px 10px; font-size: 13px; }
  .nav-sep { display: none; }
  .hero { padding-top: 36px; }
  .wrap { padding: 22px 12px 64px; }
  .aotd-body { padding: 20px 18px 22px; }
  .btn { padding: 10px 15px; }
  .factbox .row { grid-template-columns: 1fr; gap: 2px; }
}























@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}























@media print {
  .topbar, .site-foot, .toc-rail, .article-actions, .tabs, .mode, .depth, .md-actions, .toast, .grain, .nudge { display: none !important; }
  body { background: #fff; }
  body::before, body::after { display: none; }
}























/* ---------- saved lists: bookmarks + history (each row deletable) ---------- */
.btn-sm { padding: 7px 12px; font-size: 13px; }























.saved-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }























.saved-item {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--surface); padding: 10px 12px;
}























.saved-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: var(--text); text-decoration: none; }























.saved-main:hover { text-decoration: none; }























.saved-main img { width: 54px; height: 54px; object-fit: cover; border-radius: var(--radius-xs); flex: none; }























.saved-ph { width: 54px; height: 54px; border-radius: var(--radius-xs); background: color-mix(in srgb, var(--sage) 55%, transparent); flex: none; }























.saved-text { display: flex; flex-direction: column; min-width: 0; }























.saved-text strong { font-family: var(--font-head); font-size: 15.5px; font-weight: 600; }























.saved-text small {
  color: var(--muted); font-size: 12.5px; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}























.saved-del { flex: none; color: var(--muted); }























.saved-del:hover { color: var(--copper-ink); border-color: var(--copper-ink); }























/* ---------- open sources panel ---------- */
.src-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }























@media (min-width: 700px) { .src-grid { grid-template-columns: repeat(2, 1fr); } }























.src-group { border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--surface); padding: 16px; }























.src-facts { margin: 0; }























.src-facts .row { display: grid; grid-template-columns: 40% 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }























.src-facts .row:last-child { border-bottom: 0; }























.src-facts dt { color: var(--muted); }























.src-facts dd { margin: 0; word-break: break-word; }























.src-line { margin: 0; font-size: 15px; }























.src-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }























.src-list li { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }























.src-list a { color: var(--accent-2); }























.src-list small { color: var(--faint); font-size: 12px; }























.src-credit { margin: 12px 0 0; color: var(--faint); font-size: 11.5px; }























.src-credit a { color: inherit; text-decoration: underline; }























/* ==========================================================================
   Chat-style composer
   The question box lives in the page, like an assistant waiting for a prompt.
   ========================================================================== */
.composer { position: relative; max-width: 760px; margin: 0 auto; text-align: left; }























.composer .searchbar {
  display: block; padding: 15px 16px 12px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--border-2);
  box-shadow: var(--shadow); transition: border-color .18s, box-shadow .18s;
}























.composer .searchbar textarea {
  display: block; width: 100%; font-size: 16.5px; line-height: 1.6;
  min-height: 30px; max-height: 200px; padding: 2px 0; resize: none;
}























.composer-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }























.composer .suggest { left: 0; transform: none; width: 100%; top: 100%; margin-top: 8px; }























.composer-sm .searchbar { padding: 11px 13px 9px; border-radius: 16px; box-shadow: var(--shadow-sm); }























.composer-sm .searchbar textarea { font-size: 15px; min-height: 26px; }























.composer-sm .composer-tools { margin-top: 9px; }























/* ==========================================================================
   Centred reading column
   The article and the answer sit in the middle of the page, not against the
   left edge with empty space beside them.
   ========================================================================== */
.article-grid { max-width: 780px; margin-left: auto; margin-right: auto; }























.article-grid.rail-open { max-width: var(--maxw); }























.article-head, .ask-head, .article-actions, .tabs,
.answer-card, .md-actions, .md-raw, .ask-note {
  max-width: 780px; margin-left: auto; margin-right: auto;
}























.prose { max-width: 100%; }























.page { max-width: 780px; }























/* ---------- point by point ---------- */
.points-list { list-style: none; counter-reset: pt; margin: 0; padding: 0; display: grid; gap: 12px; }























.points-list > li {
  counter-increment: pt; position: relative; padding: 14px 16px 14px 52px;
  border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--surface);
}























.points-list > li::before {
  content: counter(pt); position: absolute; left: 14px; top: 13px;
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--forest) 12%, transparent); color: var(--forest-ink);
  font-family: var(--font-head); font-size: 13px; font-weight: 600;
}























[data-theme="dark"] .points-list > li::before { background: color-mix(in srgb, var(--sage) 20%, transparent); color: var(--text); }

































.point-q { display: block; margin-bottom: 6px; font-family: var(--font-head); font-size: 16px; }























.point-from { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--faint); }























/* ---------- opt-in semantic search toggle ---------- */
.chip-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 500;
  padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--border-2); background: var(--surface); color: var(--muted);
  transition: border-color .16s, color .16s, background .16s;
}























.chip-btn svg { width: 15px; height: 15px; fill: currentColor; flex: none; }























.chip-btn:hover { color: var(--text); border-color: var(--accent); }























.chip-btn.is-active {
  background: var(--primary); border-color: var(--primary); color: var(--on-primary);
}























.deep-btn { margin-left: 8px; }























/* ---------- running version, shown in the footer ---------- */
.foot-version { margin: 10px 0 0; color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }























/* ---------- background meaning-refinement status ---------- */
.deep-status { margin: 10px 0 0; color: var(--faint); font-size: 12.5px; min-height: 1em; }























.deep-status:empty { display: none; }























/* ==========================================================================
   Modernisation pass — softer surfaces, calmer depth, tidier rhythm.
   Nothing structural changes; this only refines what was already there.
   ========================================================================== */

/* The top bar reads as a floating pane rather than a hard strip. */
.topbar {
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}























/* Cards lift a touch more gently, and the shadow reads as light, not outline. */
.card, .topic-card, .aotd, .src-group, .answer-card, .points-list > li {
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s;
}























.card:hover, .topic-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border-2));
}























/* Section headings get a consistent, quieter rhythm. */
.sec-head { gap: 14px; }























.sec-head h2 { letter-spacing: -.015em; }























.sec-head .more { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }























/* The article-of-the-day card sits a little further off the page. */
.aotd { box-shadow: var(--shadow); border-radius: var(--radius-lg); overflow: hidden; }





























/* A calmer focus ring, and roomier tap targets on small screens. */
@media (max-width: 700px) {
  .btn { min-height: 44px; }
  .chip-btn { min-height: 40px; }
  .sec { margin-bottom: 34px; }
}























@media (prefers-reduced-motion: reduce) {
}























/* ---------- the sources page ---------- */
.src-list { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 10px; }























.src-list li {
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); font-size: 14.5px; line-height: 1.55;
}























.src-list .src-licence { display: block; margin-top: 4px; color: var(--faint); font-size: 12px; }























.src-list .badge { margin-left: 6px; font-size: 11px; padding: 2px 7px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border-2); }























/* ==========================================================================
   Reading column — the fixes for content that overflowed to the right.
   Wikimedia markup carries inline widths and floats; even after those are
   stripped from the HTML, these rules are the belt-and-braces guarantee that
   nothing can ever push the text off the edge of the screen.
   ========================================================================== */

.prose, .prose p, .prose li, .prose dd, .prose dt, .prose td, .prose th, .prose blockquote {
  overflow-wrap: break-word;
  word-break: normal;
}























.prose > *, .prose .mw-parser-output > * { max-width: 100%; }























/* A floated, fixed-width box (an infobox, a thumbnail) must never squeeze the
   text or jut past the right edge. */
.prose .infobox,
.prose table.infobox,
.prose .thumb,
.prose .thumbinner,
.prose .thumb.tright,
.prose .thumb.tleft,
.prose figure,
.prose .gallerybox,
.prose .sidebar,
.prose .side-box {
  float: none !important;
  clear: both !important;
  width: auto !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}























.prose img, .prose video, .prose svg, .prose math {
  max-width: 100% !important;
  height: auto !important;
}























/* Wide tables scroll inside their own box instead of dragging the page. */
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 18px 0;
}























.table-scroll > table { margin: 0; }























/* A long unbroken string (a URL, a formula, an ID) wraps rather than pushing. */
.prose code, .prose pre, .prose samp, .prose kbd { overflow-wrap: break-word; white-space: pre-wrap; }























.prose pre { overflow-x: auto; max-width: 100%; }























/* --------------------------------------------------------------------------
   Sepia — a third reading mode, kinder on the eyes at night than pure white.
   -------------------------------------------------------------------------- */
[data-theme="sepia"] {
  --focus: #1f5bd0;
  --aura-1: color-mix(in srgb, var(--sand) 42%, transparent);
  --aura-2: color-mix(in srgb, var(--copper) 14%, transparent);
  --aura-3: color-mix(in srgb, var(--sage) 20%, transparent);
  color-scheme: light;
  --bg: #f3e9d2;
  --surface: #faf3e2;
  --surface-2: #e9dcbd;
  --text: #3a3226;
  --muted: #675c48;
  --faint: #685c46;
  --border: #ddcfae;
  --border-2: #cdbb94;
  --primary: #3f4a34;
  --accent: #a8642f;
  --copper-ink: #8a4f24;
  --copper-deep: #7d451f;
  --forest-ink: #173b32;
  --accent-2: #4a6b4a;
  --on-primary: #faf3e2;
  --shadow-sm: 0 1px 2px rgba(80, 62, 30, .07);
  --shadow: 0 1px 2px rgba(80, 62, 30, .06), 0 12px 28px -14px rgba(80, 62, 30, .25);
  --shadow-lg: 0 2px 6px rgba(80, 62, 30, .08), 0 34px 60px -30px rgba(80, 62, 30, .35);
}























[data-theme="sepia"] .grain { mix-blend-mode: multiply; opacity: .22; }























/* --------------------------------------------------------------------------
   Reading progress — how far through the article you are.
   -------------------------------------------------------------------------- */
.read-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  background: transparent; pointer-events: none;
}























.read-progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--forest), var(--copper));
  transition: width .1s linear;
}























[data-theme="dark"] .read-progress span,
[data-theme="sepia"] .read-progress span { background: linear-gradient(90deg, var(--accent-2), var(--accent)); }























/* --------------------------------------------------------------------------
   Mobile bottom navigation — one-handed reach on a phone.
   -------------------------------------------------------------------------- */
.bottom-nav { display: none; }























@media (max-width: 700px) {
  .bottom-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    border-top: 1px solid var(--border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .bottom-nav a {
    display: grid; justify-items: center; gap: 3px;
    padding: 6px 2px; border-radius: var(--radius-sm);
    font-size: 11px; color: var(--muted); text-decoration: none;
  }
  /* Filled with the deep copper and written on in white — a matched pair that
   holds in every theme. Writing in the copper on a theme surface works in light
   and fails in dark, which is exactly what the pair test caught. */
.bottom-nav a[aria-current="page"] { background: var(--copper-deep); color: #fff; }
  .bottom-nav svg { width: 21px; height: 21px; }
  /* keep the last of the page clear of the bar */
  .site-foot { padding-bottom: 84px; }
}























/* ==========================================================================
   ONE DESIGN LANGUAGE
   ==========================================================================
   Every block of content — the core answer, the key points, the topic
   breakdown, the full article, the media, the related topics, the open
   sources and the answers read from papers — uses the same card: the same
   surface, the same rounded corner, the same copper rule along the top, and
   the same small uppercase heading. Nothing on the page should look like it
   came from a different site.
   ========================================================================== */

.panel {
  position: relative;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 24px 24px 26px;
  overflow: hidden;
}























/* the copper rule, the same on every card */
.panel::before,
.answer-card::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--forest), var(--copper));
}























.panel + .panel,
.panel + .sec,
.sec + .panel { margin-top: 20px; }























/* the same small uppercase heading as the core answer uses */
.panel-head {
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--copper-ink);
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}























.panel-head .more {
  font-size: 11px; letter-spacing: .05em; text-transform: none;
  color: var(--faint); font-weight: 400;
}























/* The full article reads inside the same card as everything else. */
.panel .prose { max-width: 100%; }























.panel .prose > h2:first-child,
.panel .prose > .mw-parser-output > h2:first-child { margin-top: 0; }























/* Key points and every other list keep their own row look, inside a card. */
.panel .points-list { margin-top: 4px; }























/* Open sources and the answers read from papers are cards too. */
.src-group {
  position: relative;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 20px 20px 22px;
  overflow: hidden;
}























.src-group::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--forest), var(--copper));
}























.src-group h3 {
  margin: 0 0 12px;
  font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .13em; color: var(--copper-ink);
}























.src-group h3 a { color: inherit; }























/* The card's own prose voice, so a source answer reads like the core answer. */
.src-group .point-text,




















.src-group .src-credit { color: var(--faint); font-size: 12px; margin: 8px 0 0; }























/* A little breathing room between stacked cards everywhere. */
.src-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }























/* The topic breakdown reads as a set of cards, like the answer. */
.topic-block {
  position: relative;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px;
  overflow: hidden;
}























.topic-block::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--forest), var(--copper));
}























.topic-block h3 {
  margin: 0 0 10px; font-size: 18px;
  font-family: var(--font-head);
}























.topic-block p { margin: 0; color: var(--text); font-size: 16px; line-height: 1.7; }























.topic-block + .topic-block { margin-top: 16px; }























/* ==========================================================================
   Every section adopts the core-answer card.
   ==========================================================================
   The core answer is a card: a surface, a rounded corner, a copper rule along
   the top, and a small uppercase copper heading. Rather than hand-editing
   every section in the app, :has() turns each one into that same card, so the
   home page, the article page and the answer page all read alike. Where :has()
   is unavailable the sections simply keep their previous look — nothing breaks.
   ========================================================================== */

.sec:has(> .sec-head) {
  position: relative;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 24px 24px 26px;
  overflow: hidden;
  margin-top: 22px;
}























.sec:has(> .sec-head)::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--forest), var(--copper));
}























/* The heading takes the core answer's voice: small, uppercase, copper. */
.sec:has(> .sec-head) > .sec-head {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 16px;
  align-items: baseline;
}























.sec:has(> .sec-head) > .sec-head h2 {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--copper-ink);
  line-height: 1.5;
}























.sec:has(> .sec-head) > .sec-head .more {
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: none;
  color: var(--faint);
}























/* A card that follows another card keeps an even rhythm. */
.sec:has(> .sec-head) + .sec:has(> .sec-head) { margin-top: 20px; }























/* Inside the article column the cards keep the column's width. */
.article-grid .sec:has(> .sec-head),
.article-grid .panel { max-width: 100%; }























/* The first card on a page needs no extra lead-in. */
.wrap > .sec:has(> .sec-head):first-child,
#homeBody > .sec:has(> .sec-head):first-child { margin-top: 0; }























/* ==========================================================================
   One line per fact
   ==========================================================================
   Sentences are shown one to a line, each with its own marker, stacked
   vertically — so a set of separate facts reads as a list you can scan rather
   than one run-on paragraph you have to unpick.
   ========================================================================== */

.line-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}























.line-list > li {
  position: relative;
  padding-left: 24px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text);
}























.line-list > li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: .68em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--copper);
}























/* The same shape everywhere a list of facts appears. */
.answer-card .core .line-list > li { font-size: 17px; }























.src-group .line-list > li { font-size: 16px; }























.points-list .line-list { gap: 8px; margin-top: 6px; }























.points-list .line-list > li { padding-left: 22px; font-size: 16px; }























.points-list .line-list > li::before { top: .62em; width: 6px; height: 6px; background: var(--accent-2); }























/* ==========================================================================
   ONE CARD SPREAD
   ==========================================================================
   The front page set the width: the article of the day, the topic grid and
   "how it works" all span the same container. Every other page now uses that
   same container too, so a card on an article page is exactly as wide as a
   card on the home page. Text inside a wide card keeps a comfortable measure,
   because a line of 1150px is not something anyone can read.
   ========================================================================== */

:root {
  --card-w: 1200px;   /* the card spread the front page set, used everywhere */
  --measure: 720px;   /* the reading column: the brief's 720px grid, so a line
                         never runs past comfortable eye tracking */
}























.wrap,
.wrap-narrow { max-width: var(--card-w); }























.article-grid,
.article-grid.rail-open { max-width: var(--card-w); }























.article-head,
.ask-head,
.article-actions,
.tabs,
.answer-card,
.md-actions,
.md-raw,
.ask-note { max-width: var(--card-w); }























/* A static page is a card too, in the same design. */
.page {
  max-width: var(--card-w);
  position: relative;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 30px 32px 34px;
  overflow: hidden;
}























.page::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--forest), var(--copper));
}























/* The readable measure inside a wide card. */
.panel .prose,
.panel .md,
.answer-card .core,
.answer-card .md,
.page > p,
.page > ul,
.page > ol,
.page > blockquote { max-width: var(--measure); }























.page > h2, .page > h3 { max-width: var(--measure); }























/* The article's own prose, inside its card. */
.panel /* The article is a QA document now, so .prose only wraps the fallback line.
   It keeps a reading measure and a table guard; the Wikipedia furniture it used
   to style can no longer reach a page. */
.prose { max-width: var(--measure); }
.prose table { display: block; max-width: 100%; overflow-x: auto; }























.article-grid.rail-open .panel .prose { max-width: 100%; }























/* The contents rail keeps its column at the same breakpoint as before. */
@media (min-width: 960px) {
  .article-grid.rail-open { grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; }
}























/* On a phone everything is full width; the card padding tightens. */
@media (max-width: 700px) {
  .page { padding: 22px 18px 26px; }
  .panel, .sec:has(> .sec-head) { padding: 20px 18px 22px; }
  .answer-card { padding: 20px 18px 22px; }
}
























/* ---------- article-of-the-day loading skeleton ---------- */
.aotd-skeleton { display: grid; gap: 12px; }






















.sk-line { height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 55%, var(--bg)), var(--surface-2)); background-size: 200% 100%; animation: sk 1.4s ease-in-out infinite; }






















.sk-60 { width: 60%; }





















 .sk-80 { width: 80%; }





















 .sk-90 { width: 90%; }






















@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }






















@media (prefers-reduced-motion: reduce) { .sk-line { animation: none; } }























/* The answer's source line, and the section link under each point. */


















button.point-from {
  font: inherit; font-size: 12.5px; color: var(--accent-2);
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}






















button.point-from:hover { text-decoration: underline; }























/* The content-language field, inside the language bar. */
.langbar-inner input#langSelect {
  font: inherit; font-size: 14px; padding: 7px 10px;
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); min-width: 9ch; max-width: 22ch;
}























/* ==========================================================================
   Rendering performance
   ==========================================================================
   Two things make the longest pages cheaper without changing how they look:
   the browser is told to skip the layout of sections that are nowhere near the
   viewport, and every image is given an intrinsic ratio so it cannot move the
   page as it loads.
   ========================================================================== */

/* Sections far down a long page are not laid out until they are approached.
   contain-intrinsic-size gives the browser a size to assume in the meantime,
   which is what keeps this from causing a shift of its own. */
.sec,
.topic-block,
.src-group,
/* Panels are rendered eagerly. `content-visibility: auto` was tried here for a
   small paint saving, but it lets the browser skip off-screen panels — which on
   a narrow screen is the content being scrolled towards, and which shows blank
   when the intrinsic-size estimate is wrong. Not worth it. */



/* The article body is long, and its paragraphs are cheap; its images are not. */
.prose figure,
.prose .thumb,
.prose img {
  contain-intrinsic-size: auto 260px;
}























/* An image without dimensions still gets a reserved ratio, so a page does not
   jump while pictures arrive. Images that do carry width and height use those
   instead, which is exact. */
.prose img:not([width]) {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--surface-2);
}























/* The very first screen must never be skipped. */
.dash-hero,
.article-head,
.answer-card {
  content-visibility: visible;
  contain-intrinsic-size: none;
}























/* ==========================================================================
   Evidence state, source cards and the method note
   ==========================================================================
   The report's highest-priority redesign: an answer that shows what it is
   standing on. The state is carried by a word as well as a colour, so it still
   reads for anyone who cannot tell the colours apart.
   ========================================================================== */

.evidence {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid var(--border-2);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  max-width: var(--card-w);
}






















.evidence-note { font-size: 13.5px; color: var(--muted); flex: 1 1 320px; }























.evidence.is-ok   { border-left-color: var(--ok); }






















.evidence.is-warn { border-left-color: var(--warn); }






















.evidence.is-err  { border-left-color: var(--danger); }























/* ---------- the method, on the answer page ---------- */
.method-note {
  max-width: var(--card-w);
  margin: 22px 0 0;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0;
}






















.method-note > summary {
  cursor: pointer;
  padding: 13px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--copper-ink);
}






















.method-note > ul, .method-note > p { padding: 0 16px; }






















.method-note > ul { margin: 4px 0 0; }






















.method-note > p { margin: 10px 0 14px; }























/* ---------- the source card (§10.1) ---------- */
.source-card {
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px 16px;
  margin-bottom: 12px;
}






















.sc-title { margin: 0 0 6px; font-size: 15.5px; font-family: var(--font-body); font-weight: 600; }






















.sc-title a { text-decoration: none; }






















.sc-title a:hover { text-decoration: underline; }






















.sc-kind {
  margin-left: 8px; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
  border: 1px solid var(--border-2); border-radius: 999px; padding: 1px 8px;
}






















.sc-excerpt {
  margin: 8px 0; padding: 8px 12px;
  border-left: 3px solid var(--copper);
  background: var(--surface-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14px; color: var(--muted);
}






















.sc-meta { margin: 8px 0 0; display: grid; gap: 4px; }






















.sc-meta .row { display: flex; gap: 10px; font-size: 12.5px; }






















.sc-meta dt { color: var(--faint); min-width: 92px; }






















.sc-meta dd { margin: 0; color: var(--muted); }






















.sc-meta code { font-family: var(--mono); font-size: 12px; }























/* ---------- homepage: trust strip, examples, method ---------- */


















.trust-strip {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  justify-content: center;
  margin: 16px 0 0; padding: 0; list-style: none;
  font-size: 13px; color: var(--muted);
}














.trust-strip li::before { content: '\2713'; color: var(--forest-ink); font-weight: 700; }

















































.example-prompts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0 0; padding: 0; list-style: none; }






















.example-prompts button {
  font: inherit; font-size: 13.5px;
  border: 1px solid var(--border-2); border-radius: 999px;
  background: var(--surface); color: var(--text);
  padding: 8px 14px; min-height: 40px; cursor: pointer;
}






















.example-prompts button:hover { border-color: var(--accent); color: var(--accent-2); }























/* Empty and failure states carry their own actions (§8.3). */
.state-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; }






















.state.is-err strong { color: var(--danger); }























/* The hero is centred, so its example prompts and trust statement are centred
   with it. Inside a section, which is left-aligned, the method steps are too. */










/* §09 — the access status is a fact about the source, so it reads as one. */
.sc-meta .row:first-child dd { font-weight: 600; color: var(--text); }






















.sc-kind { text-transform: none; letter-spacing: 0; font-size: 11.5px; }























/* §12 — the scope note. Calm, not alarming: it states a boundary, it does not
   dramatise the question. */
.scope-note {
  max-width: var(--card-w);
  margin: 0 0 14px;
  padding: 13px 16px;
  border: 1px solid var(--border-2);
  border-left: 4px solid var(--copper);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 13.5px;
  color: var(--muted);
}






















.scope-note p { margin: 0 0 6px; }






















.scope-note p:last-child { margin: 0; }























/* ==========================================================================
   The QA answer — one shape on every surface
   ==========================================================================
   The brief asks that the answer pattern be the same everywhere: the full
   article, a short read, a deep dive and the Ask view. These rules describe
   that one shape, so a reader who learns it once never has to learn it again.
   ========================================================================== */

.qa { display: grid; gap: 0; }























/* 1 — the question, kept visible so a mismatch can be seen */
.qa-q { margin: 0 0 14px; }






















.qa-label {
  display: block; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; color: var(--copper-ink); margin-bottom: 6px;
}






















.qa-question {
  font-family: var(--font-head); font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.25; margin: 0; letter-spacing: -.01em;
}






















.qa-alt { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }























/* 3 — the direct answer */
.qa-answer { margin-bottom: 16px; }























/* An inline citation pill: the number of the source, one tap from the claim. */
.cite-pill {
  display: inline-grid; place-items: center;
  min-width: 19px; height: 19px; padding: 0 5px; margin-left: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sage) 62%, transparent);
  color: var(--forest-ink);
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  line-height: 1; text-decoration: none; vertical-align: 1px;
}






















.cite-pill:hover { background: var(--copper-deep); color: #fff; }






















[data-theme="dark"] .cite-pill { background: color-mix(in srgb, var(--sage) 30%, transparent); color: var(--sage); }























/* The number on the source card the pill points at. */
.sc-num {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; margin-right: 8px;
  border-radius: 999px; background: var(--surface-2);
  color: var(--muted); font-size: 11px; font-weight: 700;
}






















.point-from-static { font-size: 12px; color: var(--faint); }























/* The pill's target must not be hidden behind the sticky top bar. */
.source-card { scroll-margin-top: 88px; }























/* §14 — curated material is labelled, so a hand-picked page is never mistaken
   for a live provider result. */
.curated {
  margin-top: 18px; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--faint);
}























/* The microphone: quiet when idle, clearly active when listening. The state is
   carried by the ring and the label, never by colour alone. */
.mic-btn { position: relative; flex: none; }






















.mic-btn.is-listening { color: var(--copper-ink); border-color: var(--copper); }






















.mic-btn.is-listening::after {
  content: ''; position: absolute; inset: -3px; border-radius: inherit;
  border: 2px solid var(--copper); animation: micPulse 1.4s ease-out infinite;
}






















@keyframes micPulse {
  0% { opacity: .8; transform: scale(.96); }
  100% { opacity: 0; transform: scale(1.12); }
}






















@media (prefers-reduced-motion: reduce) { .mic-btn.is-listening::after { animation: none; opacity: .5; } }






















.voice-status:empty { display: none; }






















.voice-status { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }























/* ==========================================================================
   MODERNISATION LAYER
   ==========================================================================
   Added on top of the palette rather than in place of it. The identity stays —
   forest, copper, ivory, the editorial serif — and what changes is how it
   moves, how it is layered, and how it responds. Nothing here removes a rule
   above it; this layer only adds.

   The one rule this file keeps: everything animated is decoration, is behind
   the content, and stops entirely when the reader has asked for reduced motion.
   ========================================================================== */

:root {
  /* A modern display voice for headings and controls. Space Grotesk has no
     Devanagari, so a Hindi heading falls through to Tiro, which is what we
     want — the same editorial voice, not a mismatched sans. */
  --font-display: 'Space Grotesk', 'Lora', 'Tiro Devanagari Hindi', Georgia, serif;
  --aura-1: color-mix(in srgb, var(--sage) 37%, transparent);
  --aura-2: color-mix(in srgb, var(--copper) 16%, transparent);
  --aura-3: color-mix(in srgb, var(--forest) 10%, transparent);
  --glow: 0 0 0 1px color-mix(in srgb, var(--copper) 34%, transparent),
          0 0 22px -6px color-mix(in srgb, var(--copper) 45%, transparent);
  --ease: cubic-bezier(.22, .61, .36, 1);
}























[data-theme="dark"] {
  --focus: #8fb4ff;
  /* A true dark: a near-black canvas with surfaces that are lifted from it,
     rather than a dark green that reads as "light mode, dimmed". */
  --bg: #070b09;
  --surface: #121a16;
  --surface-2: #1a241e;
  --border: #22302a;
  --border-2: #2e3f36;
  --aura-1: color-mix(in srgb, var(--forest) 27%, transparent);
  --aura-2: color-mix(in srgb, var(--copper) 21%, transparent);
  --aura-3: color-mix(in srgb, var(--sage) 10%, transparent);
}























/* ---------- the ambient layer ---------- */
/* Three slow, soft fields of colour behind everything. They drift, so the page
   never looks like a flat sheet; they are blurred far past recognition, so they
   never compete with the text. */
body::before {
  background:
    radial-gradient(52vw 38vw at 12% -4%, var(--aura-1), transparent 64%),
    radial-gradient(46vw 34vw at 92% 6%, var(--aura-2), transparent 62%),
    radial-gradient(60vw 44vw at 50% 108%, var(--aura-3), transparent 66%);
  animation: auraDrift 34s var(--ease) infinite alternate;
  will-change: transform;
}
























@keyframes auraDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2.5%, 1.8%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -2.2%, 0) scale(1.02); }
}
























/* The faint grid stays, but quieter — it is a texture, not a feature. */
body::after { opacity: .55; }























/* ---------- type ---------- */
/* The display face is for display. Anything a reader reads at small size —
   buttons, tabs, labels, badges — keeps the body face, because a geometric
   face at 11px costs legibility for nothing. */
h1, h2, h3, .article-title, .qa-question, .hero h1, .brand strong, .sec-head h2 {
  font-family: var(--font-display);
}


















.panel-head, .qa-label, .kicker, .btn, .tab, .mode-btn, .badge, .sc-kind, .src-credit {
  font-family: var(--font-body);
}























h1, .hero h1, .article-title, .qa-question {
  letter-spacing: -.025em;
  font-weight: 600;
}























/* Space Grotesk is narrower than Lora, so the display sizes get a little more
   room back to keep the same presence on the page. */
.hero h1 { font-size: clamp(36px, 7.2vw, 66px); line-height: 1.06; }






















.qa-question { font-size: clamp(25px, 3.5vw, 36px); line-height: 1.18; }






















.article-title { line-height: 1.12; }























/* Small caps labels read as UI, not as prose — tracking, not a different face. */
.kicker, .qa-label, .panel-head, .sec-head .more, .badge, .sc-kind {
  letter-spacing: .1em;
  font-weight: 600;
}























/* ---------- surfaces ---------- */
/* Cards get a modern depth: a hairline that catches light at the top, a softer
   shadow, and a slightly larger radius. The spread is untouched. */
.panel, .answer-card, .sec:has(> .sec-head), .source-card, .page, .card, .topic-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: box-shadow .24s var(--ease), transform .24s var(--ease), border-color .24s var(--ease);
}
























/* A card lifts when it is a link and the pointer is on it — never when it is
   not interactive, so nothing looks clickable that is not. */
a.card:hover, .topic-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}























/* ---------- controls ---------- */
.btn, .tab, .mode-btn, .chip-btn, .pill, button.point-from, .example-prompts button {
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}























.btn:not(:disabled):hover { transform: translateY(-1px); }






















.btn:not(:disabled):active { transform: translateY(0); }























/* A focus ring that is unmistakable on every surface, in both themes. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}























/* The composer is the one control that should feel like the centre of the page. */
.composer .searchbar {
  transition: box-shadow .24s var(--ease), border-color .24s var(--ease);
}






















.composer .searchbar:focus-within {
  border-color: color-mix(in srgb, var(--copper) 55%, var(--border-2));
  box-shadow: var(--glow);
}























/* The top bar picks up a little more glass as the page scrolls under it. */
.topbar { box-shadow: 0 8px 24px -22px rgba(0, 0, 0, .55); }























/* ---------- the reading column ---------- */
.prose a, .md a { text-underline-offset: 3px; text-decoration-thickness: 1px; }























/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .btn, .card, .topic-card, .panel, .answer-card, .source-card { transition: none; }
  a.card:hover, .topic-card:hover { transform: none; }
}























/* The article of the day always carries a picture now, so the media panel is a
   figure with a caption rather than a bare image. */



.aotd-credit {
  margin: 8px 0 0;
  font-size: 11.5px; line-height: 1.45; color: var(--faint);
  overflow-wrap: anywhere;
}






















/* §11 — the evidence state. The label must not read like a fact-checking
   certificate, so the explainer sits with it rather than in a tooltip nobody
   opens, and the state is carried by a word and a shape as well as a colour. */
.evidence { margin: 0 0 14px; padding: 12px 15px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-2); background: var(--surface); }





















.evidence-head { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }





















.evidence-label { font-weight: 600; font-size: 14px; }





















.evidence-label::before { content: ''; display: inline-block; width: 8px; height: 8px;
  margin-right: 7px; border-radius: 2px; vertical-align: 1px; background: currentColor; }





















.evidence-note { font-size: 13.5px; color: var(--muted); }





















.evidence-explainer { margin: 6px 0 0; font-size: 12px; color: var(--faint); line-height: 1.5; }





















.evidence.is-ok .evidence-label { color: var(--ok); }





















.evidence.is-warn .evidence-label { color: var(--warn); }





















.evidence.is-err .evidence-label { color: var(--danger); }






















/* ==========================================================================
   TAP TARGETS
   ==========================================================================
   WCAG 2.2 sets the minimum target at 24x24 CSS px. That is a floor, not a
   comfortable size: a control you are meant to hit with a thumb wants about 44.
   So controls get the comfortable height on any pointer that is not a mouse,
   and a sensible one everywhere else — never below the floor.
   ========================================================================== */
.btn, .mic-btn, .depth-btn, .mode-btn, .bottom-nav a, .rail-btn {
  min-height: 36px;
}





















@media (pointer: coarse) {
  .btn, .mic-btn, .depth-btn, .mode-btn, .bottom-nav a, .rail-btn { min-height: 44px; }
  /* Small chips are exempt from the comfortable size but not from the floor. */
  .pill, .tab, .badge { min-height: 24px; }
}





















/* A pointer that is not fine but is not a thumb either — a stylus, a remote. */
@media (pointer: coarse) and (min-width: 900px) {
  .btn, .mic-btn, .depth-btn, .mode-btn, .rail-btn { min-height: 40px; }
}





















/* ==========================================================================
   THE ARTICLE OF THE DAY PICTURE
   ==========================================================================
   The picture was being cut: a fixed 16:10 frame with `object-fit: cover` crops
   whatever does not fit, and a portrait photo loses most of itself. A knowledge
   site should show the picture it is talking about, so nothing is cropped now —
   the whole image is centred in its panel, and the caption sits underneath it
   rather than over it.
   ========================================================================== */
.aotd-media {
  margin: 0;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  overflow: hidden;
}




















.aotd-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  /* contain, not cover: the whole picture, centred, never cropped. */
  object-fit: contain;
  object-position: center;
}




















.aotd-credit {
  /* The caption is a block under the picture, not an overlay on it — an overlay
     covers the very thing it is describing. */
  margin: 0;
  padding: 8px 12px 10px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--faint);
  text-align: center;
  overflow-wrap: anywhere;
  border-top: 1px solid var(--border);
  background: var(--surface);
}





















/* ==========================================================================
   THE ANSWER IS THE LARGEST THING ON THE PAGE
   ==========================================================================
   The direct answer is what the reader came for, so it is set larger than the
   supporting material around it. The key points stay comfortably readable but
   sit one step down, so the hierarchy is obvious at a glance.
   ========================================================================== */
.qa-answer .line-list li {
  font-size: 18px;
  line-height: 1.72;
  padding: 10px 0 10px 18px;
}




















.qa-answer .line-list li + li { border-top: 1px solid var(--border); }




















.qa-answer h2 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--copper-ink); }





















/* The points panel is the detail layer: a step down from the answer, a step up
   from body copy. */
.qa .panel .line-list li { font-size: 16.5px; line-height: 1.68; }





















@media (max-width: 560px) {
  .qa-answer .line-list li { font-size: 16.5px; padding: 9px 0 9px 16px; }
  .qa .panel .line-list li { font-size: 15.5px; }
}





















/* ==========================================================================
   FEEDBACK
   ==========================================================================
   The reactions are ordinary Unicode characters, so they render from whatever
   the device already has — nothing to download, nothing to fail. Each carries a
   written label, so the meaning does not depend on reading an emoji the same
   way the designer did, and the pressed state is a word plus a border as well
   as a colour.
   ========================================================================== */
.fb-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }




















.fb-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-2); background: var(--surface); color: var(--text);
  font: inherit; font-size: 14px;
  transition: border-color .18s var(--ease), background-color .18s var(--ease), transform .18s var(--ease);
}




















.fb-btn:hover { border-color: var(--copper); transform: translateY(-1px); }




















.fb-btn.is-on { border-color: var(--primary); background: color-mix(in srgb, var(--sage) 42%, var(--surface)); font-weight: 600; }




















.fb-emoji { font-size: 18px; line-height: 1; }




















.feedback-ask { margin: 0 0 10px; color: var(--muted); font-size: 14.5px; }




















.fb-note { margin-top: 6px; }




















.fb-note label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }




















.fb-note textarea {
  width: 100%; max-width: 560px; padding: 10px 12px; font: inherit; font-size: 15px;
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); resize: vertical;
}




















.fb-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }




















.fb-thanks { margin: 10px 0 0; font-size: 13.5px; color: var(--ok); min-height: 1em; }




















.fb-thanks:empty { display: none; }





















/* ==========================================================================
   iOS-INSPIRED TOUCH AND FLUIDITY
   ==========================================================================
   Three things taken from the iPhone architecture brief, and one deliberately
   left alone.

   TAKEN: the 48px touch target (the brief's own number, above the 44 the
   platform guidance asks for); squircle radii in the 12-24 range, which the
   scale above now uses; and spatial continuity — an element that appears
   expands from where it came from rather than snapping into place.

   LEFT ALONE: the monochrome palette with a single blue accent. That would
   replace the forest/copper/ivory identity, which the project's own
   specification defines and the earlier UX brief asked to keep.
   ========================================================================== */

/* The brief asks for 48px, not 44. */
@media (pointer: coarse) {
  .btn, .mic-btn, .depth-btn, .mode-btn, .bottom-nav a, .rail-btn, .fb-btn, .suggest-item {
    min-height: 48px;
  }
  .pill, .tab, .badge { min-height: 28px; }
}



















@media (pointer: coarse) and (min-width: 900px) {
  .btn, .mic-btn, .depth-btn, .mode-btn, .bottom-nav a, .rail-btn { min-height: 44px; }
}




















/* Spatial continuity: things grow from their origin, they do not snap in. The
   suggestion list drops from the composer it belongs to; a note expands from
   the control that revealed it. */
.suggest {
  transform-origin: top center;
  animation: growFromOrigin .18s var(--ease) both;
}



















.fb-note:not([hidden]) {
  transform-origin: top left;
  animation: growFromOrigin .18s var(--ease) both;
}



















@keyframes growFromOrigin {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}




















/* Depth: the brief asks for real layers separated by soft shadow and blur, so
   the bottom bar gets the same frosted treatment as the top one. */
@media (max-width: 900px) {
  .bottom-nav {
    backdrop-filter: saturate(1.4) blur(18px);
    -webkit-backdrop-filter: saturate(1.4) blur(18px);
    background: color-mix(in srgb, var(--bg) 78%, transparent);
  }
}




















/* The composer is the one element that gets the largest radius. */
.composer .searchbar { border-radius: var(--radius-xl); }




















@media (prefers-reduced-motion: reduce) {
  .suggest, .fb-note:not([hidden]) { animation: none; }
}




















/* ==========================================================================
   LEGIBILITY OVER THE GLASS
   ==========================================================================
   A frosted bar is only legible if the thing behind it cannot vary enough to
   matter. Two guards:

   1. Where backdrop-filter is unsupported, the bar falls back to an almost
      solid background rather than staying translucent over whatever scrolls
      under it.
   2. The translucent value itself is high enough that the worst case — the
      strongest ambient blob behind the most transparent bar — still clears
      4.5:1 for every text token. Measured, not assumed.
   ========================================================================== */
.topbar, .bottom-nav {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
}


















@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .topbar { background: color-mix(in srgb, var(--bg) 84%, transparent); }
  .bottom-nav { background: color-mix(in srgb, var(--bg) 84%, transparent); }
}


















/* Never let a blurred bar sit over text with nothing behind it. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar, .bottom-nav { background: var(--bg); }
}



















/* The status strip: invisible until it has something true to say. */
.status-strip {
  position: sticky; top: 0; z-index: 58;
  padding: 7px 16px;
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  text-align: center; line-height: 1.45;
  border-bottom: 1px solid var(--border-2);
  background: var(--surface-2); color: var(--text);
}


















.status-strip[hidden] { display: none; }


















.status-strip.is-warn { background: color-mix(in srgb, var(--warn) 16%, var(--surface)); border-bottom-color: var(--warn); }


















.status-strip.is-ok { background: color-mix(in srgb, var(--ok) 14%, var(--surface)); border-bottom-color: var(--ok); }



















/* ==========================================================================
   THE TOPIC-WISE BREAKDOWN
   ==========================================================================
   Every topic is a panel in the same design as the answer: a numbered heading,
   its sentences one to a line, a citation on each, and a link to that exact
   section of the full article. It is built from prose, so a table of
   coordinates can no longer appear in it as "9532 1245".
   ========================================================================== */
.topic-head { display: flex; align-items: center; gap: 10px; min-width: 0; }

















.topic-head > span:last-child { overflow-wrap: anywhere; }

















.topic-num {
  flex: none; display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: var(--radius-xs);
  background: var(--surface-2); color: var(--muted);
  font-family: var(--font-body); font-size: 12.5px; font-weight: 700;
}

















.topic-goto { border: 0; background: none; cursor: pointer; color: var(--copper-ink); font: inherit; font-size: 12.5px; white-space: nowrap; }

















.topic-goto:hover { text-decoration: underline; }

















.topic-block { margin-bottom: 14px; }

















.topic-block .line-list { margin: 4px 0 0; }


















/* An open source answered in the same shape as the answer. */
.source-answer { padding-top: 4px; }

















.source-answer .src-credit { margin-top: 8px; }


















/* The records stay available without crowding the answers. */
.src-records { margin-top: 18px; }

















.src-records > summary {
  cursor: pointer; font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--copper-ink); padding: 8px 0; list-style: none;
}

















.src-records > summary::-webkit-details-marker { display: none; }

















.src-records > summary::before { content: '▸ '; display: inline-block; transition: transform .18s var(--ease); }

















.src-records[open] > summary::before { content: '▾ '; }


















/* ==========================================================================
   THE GLASS LAYER
   ==========================================================================
   Glassmorphism, applied where it belongs.

   The production brief and every 2026 source agree on one thing, and it is the
   opposite of how glass is usually shipped: glass belongs on FLOATING,
   STRUCTURAL layers — navigation, overlays, the composer — and not on content.
   "Use glass on floating layers only, like modals, tooltips, and nav bars.
   Applying it everywhere kills the hierarchy." And a practical ceiling of two
   to three glass surfaces per view, because every `backdrop-filter` is its own
   GPU compositing pass.

   So: the top bar, the bottom bar, the status strip, the composer and the toast
   are glass. Every surface that carries prose — panels, answer cards, source
   records, the reading column — stays solid. That is what keeps every word
   readable, which is the condition this was asked for under.

   Tokens are per theme, because dark mode is a separate material problem: the
   brief is explicit that reusing light values on a dark canvas yields an
   illegible milky grey. Dark glass gets a lower fill and a brighter edge.
   ========================================================================== */
:root {
  --glass-fill: 88%;          /* high enough that text has a stable backing */
  --glass-blur: 20px;
  --glass-sat: 150%;
  --glass-edge: color-mix(in srgb, var(--copper) 22%, var(--border-2));
  --glass-top: color-mix(in srgb, #ffffff 55%, transparent);   /* the light-catching top edge */
  --glass-shadow: 0 1px 2px rgba(36, 40, 36, .05), 0 18px 40px -26px rgba(23, 59, 50, .4);
}
















[data-theme="dark"] {
  --glass-fill: 80%;
  --glass-sat: 140%;
  --glass-edge: color-mix(in srgb, #ffffff 22%, transparent);   /* the edge carries the separation */
  --glass-top: color-mix(in srgb, #ffffff 26%, transparent);
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 22px 48px -28px rgba(0, 0, 0, .8);
}
















[data-theme="sepia"] {
  --glass-fill: 90%;
  --glass-edge: color-mix(in srgb, var(--copper) 26%, var(--border-2));
}

















@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass {
    background: color-mix(in srgb, var(--bg) var(--glass-fill), transparent);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    border: 1px solid var(--glass-edge);
    box-shadow: var(--glass-shadow);
    /* The top edge catches light, the way a real pane does. */
    background-image: linear-gradient(180deg, var(--glass-top), transparent 42%);
    /* Stops the engine repainting the whole frame while content scrolls under. */
    contain: layout style paint;
  }
}
















/* Without backdrop-filter there is nothing to blur, so the surface must carry
   the separation itself — an almost solid panel rather than a see-through one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--bg); border: 1px solid var(--border-2); }
}

















/* The structural layers that become glass. */
.topbar, .bottom-nav, .status-strip, .composer .searchbar, .toast {
  border-radius: 0;
}
















.topbar { border-radius: 0; }
















.composer .searchbar, .toast { border-radius: var(--radius-xl); }

















/* The reading column, the answer and every record stay solid — prose is not
   something to put behind frosted glass. */
.panel, .answer-card, .source-card, .sec:has(> .sec-head), .prose, .topic-block {
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

















/* The operating system already has a setting for this, and the brief is
   specific that a serious deployment must honour it rather than fight it. */
@media (prefers-reduced-transparency: reduce) {
  .glass, .topbar, .bottom-nav, .status-strip, .composer .searchbar, .toast {
    background: var(--bg) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--border-2) !important;
    box-shadow: none !important;
  }
}

















/* ==========================================================================
   THE BENTO GRID
   ==========================================================================
   Tiles of different sizes on one grid, so importance is carried by size. The
   DOM order is the reading order and the size comes from grid spans — the rule
   the pattern lives or dies by, because a layout whose visual order comes from
   placement alone reads differently to a screen reader than it looks on screen.

   The tiles themselves are solid. Only the floating layers above them are
   glass; a bento of frosted tiles would be exactly the "glass everywhere" that
   costs legibility and GPU time.
   ========================================================================== */





































































/* Mobile: one column, and the size hierarchy goes away rather than pretending
   to be a mosaic on a 360px screen. */





/* ==========================================================================
   THE METHOD BLOCKS AND THE TRENDING LIST
   ==========================================================================
   The method used to be four numbered steps, which told the reader the order
   and nothing else. It is four blocks now, each with its own heading and a
   sentence saying what actually happens — the words were there before and were
   removed by mistake.
   ========================================================================== */






/* The day's most-viewed list: a rank, then the article. The rank is decoration,
   so it is hidden from assistive technology — the list is already ordered. */





/* ==========================================================================
   READING COMFORT
   ==========================================================================
   The research dossier is explicit that `prefers-reduced-transparency` cannot
   be relied on: browser support is limited, and a reader who wants less
   transparency should not have to change an operating-system setting to get it.
   So there is a control of their own.

   It is one attribute on the root element. When it is set, every glass surface
   becomes a solid one — no blur, no translucency, no exception. That is the
   acceptance test the dossier sets: "Manually enable the preference and verify
   there is no translucent prose layer left behind."
   ========================================================================== */
[data-comfort="opaque"] .glass,
[data-comfort="opaque"] .topbar,
[data-comfort="opaque"] .bottom-nav,
[data-comfort="opaque"] .status-strip,
[data-comfort="opaque"] .composer .searchbar,
[data-comfort="opaque"] .toast {
  background: var(--bg) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--border-2) !important;
  box-shadow: none !important;
}














/* And the decorative ambient layer goes with it: less visual complexity was
   asked for, not just less blur. */
[data-comfort="opaque"] body::before { display: none !important; }














[data-comfort="opaque"] body::after { opacity: .25 !important; }















/* The control itself: pressed state is carried by fill and a ring, never by
   colour alone. */
#comfortBtn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--copper) 16%, transparent);
  border-color: var(--copper-ink);
  color: var(--copper-ink);
}















/* ==========================================================================
   THE BENTO RESPONDS TO ITS OWN WIDTH
   ==========================================================================
   The dossier's rule: a breakpoint should respond to when a layout stops
   working, not to a device name. A tablet in split-screen is a phone-sized
   viewport, and a reader at 200% zoom has half the width they started with —
   a container query sees both, a media query sees neither.

   The threshold is where the tiles stop fitting their own text.
   ========================================================================== */








/* A browser without container queries falls back to the viewport, which is the
   older behaviour and still correct. */



/* The key points taken from an open source, above the points themselves. */
.src-points-label {
  margin: 8px 0 4px; font-family: var(--font-body); font-size: 12px; font-weight: 650;
  letter-spacing: .06em; text-transform: uppercase; color: var(--faint);
}














/* ==========================================================================
   THE APP SHELL
   ==========================================================================
   Three columns on a wide screen: a navigation rail, the page, and a discovery
   rail. This is the layout from the mockup, and it is the reason the site now
   has a home that looks like a product rather than a search box on a page.

   The rails are chrome, not content. They are hidden below the width at which
   they would squeeze the reading column, and the bottom bar takes over the
   navigation on a phone — so an article still gets the full width it needs.
   ========================================================================== */
.app-shell {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  align-items: start;
  max-width: 1720px;
  margin: 0 auto;
  width: 100%;
}












/* The discovery rail only exists when a view fills it. */
.app-shell:has(.app-rail:not(:empty)) {
  grid-template-columns: 236px minmax(0, 1fr) 304px;
}












.app-main { min-width: 0; display: flex; flex-direction: column; min-height: 60vh; }













/* ---- the navigation rail ---- */
.app-side {
  position: sticky; top: var(--topbar-h, 64px);
  align-self: start;
  max-height: calc(100vh - var(--topbar-h, 64px));
  overflow-y: auto;
  padding: 18px 12px 28px;
  display: flex; flex-direction: column; gap: 22px;
}












.side-group { display: flex; flex-direction: column; gap: 2px; }












.side-label {
  margin: 0 0 6px 10px; font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}












.side-link {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  border: 1px solid transparent;
  transition: background .16s var(--ease), border-color .16s var(--ease);
}












.side-link:hover { background: var(--surface-2); }












.side-link[aria-current="page"] {
  background: color-mix(in srgb, var(--forest) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--forest) 26%, transparent);
  font-weight: 650;
}












.side-link svg { flex: none; width: 18px; height: 18px; opacity: .78; }












.side-link[aria-current="page"] svg { opacity: 1; }












.side-badge {
  margin-left: auto; padding: 1px 7px; border-radius: 999px;
  /* copper is the same in every theme, so its own ink is too — and it has to
     clear 4.5:1 as small bold text, which --on-primary did not (3.7–4.4). */
  background: var(--copper-deep); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
}













/* The rail's own cards. */
.rail-card {
  padding: 15px 16px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}












.rail-card + .rail-card { margin-top: 14px; }












.rail-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 11px;
}












.rail-head h2, .rail-head h3 {
  margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 700;
  letter-spacing: -.01em;
}












.rail-more { font-size: 12px; color: var(--copper-ink); text-decoration: none; white-space: nowrap; }












.rail-more:hover { text-decoration: underline; }













/* Trending: a rank, a name, a figure, and a small trend line. */
.trend-row { display: flex; align-items: center; gap: 11px; padding: 7px 0; text-decoration: none; color: var(--text); }












.trend-row + .trend-row { border-top: 1px solid var(--border); }












.trend-row:hover .trend-name { color: var(--copper-ink); text-decoration: underline; }












.trend-rank {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 7px; background: var(--surface-2); color: var(--muted);
  font-family: var(--font-body); font-size: 11.5px; font-weight: 700;
}












.trend-body { min-width: 0; flex: 1; }












.trend-name { display: block; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }












.trend-meta { display: block; font-size: 11.5px; color: var(--faint); margin-top: 1px; }












.trend-spark { flex: none; width: 46px; height: 20px; color: var(--copper); opacity: .75; }













/* Latest from sources: the real registry, not a list of invented ones. */
.src-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }












.src-row + .src-row { border-top: 1px solid var(--border); }












.src-mark {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 8px; background: var(--surface-2); color: var(--muted);
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
}












.src-body { min-width: 0; flex: 1; }












.src-name { display: block; font-size: 13.5px; font-weight: 600; }












.src-kind { display: block; font-size: 11.5px; color: var(--faint); }













/* Today's wisdom. */
.wisdom blockquote {
  margin: 0; font-family: var(--font-display); font-size: 16px; line-height: 1.5;
  letter-spacing: -.01em; color: var(--text);
}












.wisdom cite { display: block; margin-top: 9px; font-size: 12.5px; color: var(--faint); font-style: normal; }













/* The shell narrows: the rail first, then the navigation rail. */
@media (max-width: 1420px) {
  .app-shell:has(.app-rail:not(:empty)) { grid-template-columns: 236px minmax(0, 1fr); }
  .app-rail { display: none; }
}












@media (max-width: 1040px) {
  .app-shell, .app-shell:has(.app-rail:not(:empty)) { grid-template-columns: minmax(0, 1fr); }
  .app-side { display: none; }
}













/* ==========================================================================
   THE HOME DASHBOARD
   ==========================================================================
   The mockup's home, built on this site's own palette rather than its navy —
   the dossier is explicit that the ivory/forest/copper identity should be kept
   and matured, and a wholesale recolour would replace the brand rather than
   modernise it.

   Two things in the mockup are deliberately NOT reproduced, because the site
   cannot show them truthfully: an "AI powered" badge (no model writes these
   answers, which is the site's whole position) and view/like counts on the
   question cards (there is no such data). Everything else maps to something
   real.
   ========================================================================== */
.dash { display: flex; flex-direction: column; gap: 22px; padding: 18px 20px 8px; }













/* ---- the hero ---- */
.dash-hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  min-height: 330px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 26px 28px 24px;
  /* A dark ground of its own, not the page's surface.
     The hero's type is white because it is designed to sit on a photograph under
     a scrim. It used to take its ground from --surface-2, which is LIGHT in the
     light theme — so if the picture was slow, blocked, or simply absent, the
     white type sat on a pale panel and every word in the hero became invisible.
     The ground is now dark in every theme, so the words are readable before the
     picture arrives, if it never arrives, and in the reader's own theme. */
  background: #0e1a15;
  isolation: isolate;
}












.dash-hero-img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}












/* A scrim, not a tint: the text sits on this and its contrast is measured
   against it, so it has to be strong enough to carry white type. */
.dash-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(9, 20, 16, .55) 0%, rgba(9, 20, 16, .72) 55%, rgba(9, 20, 16, .9) 100%),
    linear-gradient(90deg, rgba(9, 20, 16, .72) 0%, rgba(9, 20, 16, .3) 60%, rgba(9, 20, 16, .5) 100%);
}












.dash-hero-badge {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff; font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: .02em; margin-bottom: 14px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}












.dash-hero h1 {
  margin: 0 0 10px; color: #fff;
  font-family: var(--font-display); font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08; letter-spacing: -.025em; max-width: 15ch;
}












.dash-hero h1 .dash-grad {
  background: linear-gradient(96deg, var(--sand), var(--copper) 55%, var(--sage));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}












.dash-hero p {
  margin: 0 0 18px; color: rgba(255, 255, 255, .9);
  font-size: 15px; line-height: 1.55; max-width: 56ch;
}












.dash-hero-ask { max-width: 720px; }












.dash-hero-ask .searchbar {
  background: rgba(255, 255, 255, .96);
  border-color: rgba(255, 255, 255, .5);
}












/* The corner chips: the weather, which is real, and the quote, which is real. */
















/* ---- the quick-action row ---- */
.dash-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }












.dash-action {
  display: flex; flex-direction: column; gap: 4px;
  padding: 15px 16px 16px; border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); text-decoration: none;
  transition: transform .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
}












.dash-action:hover { transform: translateY(-2px); border-color: var(--border-2); box-shadow: var(--shadow); }












.dash-action .ic {
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--forest) 12%, var(--surface-2));
  color: var(--forest-ink); margin-bottom: 6px;
}












.dash-action .ic svg { width: 18px; height: 18px; }












.dash-action h3 { margin: 0; font-size: 15px; font-family: var(--font-display); letter-spacing: -.01em; }












.dash-action p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }













/* ---- a titled band ---- */
.dash-band-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 13px;
}












.dash-band-head h2 {
  margin: 0; font-family: var(--font-display); font-size: 19px; font-weight: 700;
  letter-spacing: -.02em; display: flex; align-items: center; gap: 8px;
}












.dash-band-head h2 .ic { color: var(--copper); display: inline-grid; place-items: center; }












.dash-band-head h2 .ic svg { width: 19px; height: 19px; }












.dash-band-head p { margin: 3px 0 0; font-size: 13px; color: var(--muted); }













/* ---- the question cards ---- */
.q-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }












.q-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); color: var(--text); text-decoration: none;
  transition: transform .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
}












.q-card:hover { transform: translateY(-2px); border-color: var(--border-2); box-shadow: var(--shadow); }












.q-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; }












.q-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }












.q-tag {
  position: absolute; top: 10px; left: 10px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(9, 20, 16, .72); color: #fff;
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}












.q-body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 6px; flex: 1; }












.q-body h3 { margin: 0; font-size: 15px; font-family: var(--font-display); line-height: 1.3; letter-spacing: -.01em; }












.q-body p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; flex: 1; }












.q-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--faint); font-family: var(--font-body);
}












.q-foot .srcs { display: inline-flex; align-items: center; gap: 5px; }












.q-foot .srcs svg { width: 13px; height: 13px; }













/* ---- the category strip ---- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }












.cat-card {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 14px 10px; border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); text-decoration: none; text-align: center;
  transition: transform .16s var(--ease), border-color .16s var(--ease);
}












.cat-card:hover { transform: translateY(-2px); border-color: var(--border-2); }












.cat-card .ic {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--copper) 14%, var(--surface-2));
  color: var(--copper-ink);
}












.cat-card .ic svg { width: 17px; height: 17px; }












.cat-card strong { font-size: 13.5px; font-family: var(--font-display); }












.cat-card span { font-size: 11.5px; color: var(--faint); }













@media (max-width: 900px) {
  .dash { padding: 14px 14px 6px; gap: 18px; }
  .dash-hero { padding: 22px 18px 20px; min-height: 300px; }
}













/* The trust statement sits on the hero's scrim, so it is white on dark and its
   contrast is measured against the scrim rather than the page. */
.dash-hero .trust-strip { margin-top: 16px; color: rgba(255, 255, 255, .88); }












.dash-hero .trust-strip li::before { color: var(--sage); }













/* The answer-depth control, on the hero's dark scrim. */
.dash-depth { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }












/* Everything on the scrim carries its own fill. Setting only the ink left the
   depth buttons white-on-white in the light theme. */
.dash-hero .depth-btn {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .28);
  color: rgba(255, 255, 255, .92);
}

.dash-hero .depth-btn:hover { background: rgba(255, 255, 255, .24); color: #fff; }

.dash-hero .depth-bar { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); }












.dash-hero .depth-btn[aria-pressed="true"], .dash-hero .depth-btn.is-active { background: rgba(255, 255, 255, .95); color: var(--charcoal); border-color: rgba(255, 255, 255, .95); }












/* Everything that sits on the scrim is styled for the scrim, not for the page.
   The hero's ground is dark in every theme, so a control that takes --muted from
   a light theme is grey on near-black. */
.dash-hero .mode-btn { color: rgba(255, 255, 255, .78); }






.dash-hero .mode-btn.is-active { background: rgba(255, 255, 255, .95); color: var(--charcoal); box-shadow: none; }






.dash-hero .chip-btn {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .28);
  color: rgba(255, 255, 255, .92);
}






.dash-hero .chip-btn:hover { background: rgba(255, 255, 255, .24); color: #fff; }






.dash-hero .chip-btn.is-active { background: rgba(255, 255, 255, .95); color: var(--charcoal); border-color: rgba(255, 255, 255, .95); }






.dash-hero .chips .chip {
  background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .28); color: #fff;
}












.dash-hero .chips .chip:hover { background: rgba(255, 255, 255, .24); }












.dash-hero .chips > span { color: rgba(255, 255, 255, .75) !important; }













/* The reader's own clock and place, in the hero's corner. */













/* ==========================================================================
   THE DESIGN SYSTEM, SYNTHESISED
   ==========================================================================
   Twelve visual styles were put in front of this build, and asked to be mixed
   into one. What follows is which parts were taken, and why.

   TAKEN — Glassmorphism (the shell)
     Frosted navigation, composer and overlays; solid surfaces behind prose.
     Already in place, and the reason is recorded above.

   TAKEN — Aurora UI (the ambient field)
     Soft drifting colour behind everything, at a strength measured not to cost
     contrast. Already in place.

   TAKEN — Material Design (the elevation ladder)
     Three elevations instead of one shadow everywhere, so a card, a raised card
     and a floating layer read as different distances from the page.

   TAKEN — Typography Focused (the scale)
     A fluid modular scale. Type is the interface of a reading product; it should
     carry the hierarchy rather than borders doing it.

   TAKEN — Claymorphism (the surface feel)
     Generous radii and a soft inner light along the top edge, so a card reads as
     a made object rather than a rectangle with a border. Taken as surface
     feeling, not as the cartoon 3D — this is a knowledge product, not a toy.

   TAKEN — Minimalism (the restraint)
     Fewer rules. One hairline where there were two, more space where there was
     chrome, and nothing decorative that does not also carry meaning.

   TAKEN — Skeuomorphism (the light)
     A single consistent light direction — from the top — on every raised
     surface, so the depth is coherent rather than per-component.

   TAKEN — Illustrative UI, Dark Mode
     The icon set, and a dark theme designed as its own material.

   NOT TAKEN — Neumorphism
     It builds its affordances from low-contrast soft shadows, and low contrast
     is the one thing this site has spent the most effort removing. A control
     whose boundary you cannot see is not a modern control.

   NOT TAKEN — Brutalism
     Raw, heavy, deliberately confrontational. It is a strong voice for a
     portfolio and the wrong one for a site whose whole claim is that it is
     trustworthy about where its sentences came from.

   NOT TAKEN — Cyberpunk
     Neon on near-black fails contrast at the sizes this site sets its body text,
     and the palette would replace the identity rather than refine it.

   The rule the earlier research set still governs all of it: if the page is
   equally clear without an effect, the effect is not allowed to cost clarity.
   ========================================================================== */
:root {
  /* The elevation ladder. Three distances, and nothing in between. */
  --elev-1: 0 1px 2px rgba(36, 40, 36, .05);
  --elev-2: 0 1px 2px rgba(36, 40, 36, .05), 0 10px 24px -16px rgba(23, 59, 50, .28);
  --elev-3: 0 2px 4px rgba(36, 40, 36, .05), 0 22px 48px -22px rgba(23, 59, 50, .34);
  /* One light direction, from the top, on every raised surface. */
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 38%);
  /* A fluid scale, so type grows with the viewport instead of stepping. */
  --t-sm: clamp(12.5px, .78vw + 10px, 13.5px);
  --t-md: clamp(15px, .95vw + 12px, 17px);
  --t-xl: clamp(20px, 1.6vw + 14px, 26px);
}











[data-theme="dark"] {
  --elev-1: 0 1px 2px rgba(0, 0, 0, .4);
  --elev-2: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 24px -16px rgba(0, 0, 0, .8);
  --elev-3: 0 2px 4px rgba(0, 0, 0, .45), 0 22px 48px -22px rgba(0, 0, 0, .9);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 38%);
}











[data-theme="sepia"] {
  --elev-1: 0 1px 2px rgba(80, 62, 30, .06);
  --elev-2: 0 1px 2px rgba(80, 62, 30, .06), 0 10px 24px -16px rgba(80, 62, 30, .28);
  --elev-3: 0 2px 4px rgba(80, 62, 30, .06), 0 22px 48px -22px rgba(80, 62, 30, .32);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 38%);
}












/* The ladder, applied. Cards sit at two; the rail and the floating layers at
   three; a flat list at one. */
.dash-action, .q-card, .cat-card, .panel, .answer-card, .source-card, .howstep, .rail-card {
  box-shadow: var(--elev-1);
  background-image: var(--sheen);
  background-repeat: no-repeat;
  background-size: 100% 46px;
}











.dash-action:hover, .q-card:hover, .cat-card:hover {
  box-shadow: var(--elev-2);
  transform: translateY(-2px);
}











.rail-card, .toast { box-shadow: var(--elev-2); }











.dash-hero { box-shadow: var(--elev-3); }












/* The type scale, applied where it carries hierarchy. */
.dash-band-head h2 { font-size: var(--t-xl); }











.dash-action h3, .q-body h3 { font-size: var(--t-md); }











.dash-action p, .q-body p, .method-block p, .howstep p { font-size: var(--t-sm); }











.rail-head h2, .rail-head h3 { font-size: var(--t-md); }











.trend-name, .src-name { font-size: var(--t-sm); }











.cat-card strong { font-size: var(--t-sm); }












/* Minimalism: one hairline where there were two, and a little more air. */
.dash { gap: 26px; }











.dash-band-head { margin-bottom: 15px; }











.dash-action, .q-card, .cat-card, .rail-card, .howstep { border-color: transparent; }











.dash-action:hover, .q-card:hover, .cat-card:hover { border-color: var(--border-2); }











.dash-action .ic, .cat-card .ic { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }












/* Micro-interactions: short, and switched off for anyone who asked for that. */
.side-link, .trend-row, .src-row, .chip, .btn, .depth-btn {
  transition: background .16s var(--ease), border-color .16s var(--ease),
              color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease);
}











.side-link:hover { transform: translateX(2px); }











.trend-row:hover, .src-row:hover { background: var(--surface-2); border-radius: var(--radius-sm); }












@media (prefers-reduced-motion: reduce) {
  .dash-action:hover, .q-card:hover, .cat-card:hover, .side-link:hover { transform: none; }
}












/* ==========================================================================
   THE HERO'S CENTRE
   ==========================================================================
   The reader asked, in as many words, for the example questions and the trust
   statement to sit in the centre of the hero. The dashboard hero put them in a
   left-aligned column, which is where they had drifted to — so they are centred
   again, and the search box is centred with them so the whole block reads as
   one thing rather than a column with a ragged right edge.
   ========================================================================== */
.dash-hero { text-align: center; align-items: center; }










.dash-hero h1 { margin-inline: auto; }










.dash-hero p { margin-inline: auto; }










.dash-hero-ask { margin-inline: auto; width: 100%; }










.dash-hero .example-prompts, .dash-hero .trust-strip, .dash-hero .chips, .dash-hero .dash-depth {
  justify-content: center;
}










.dash-hero .dash-hero-badge { align-self: center; }












/* ==========================================================================
   THE TOP BAR, RESTORED
   ==========================================================================
   The glass layer had given the top bar the full floating-pane treatment — a
   border all the way round, a drop shadow, and a light-catching top edge. That
   is right for a composer, which floats over content, and wrong for a bar that
   spans the whole window: it read as a pane hovering over the page rather than
   as the edge of it.

   So the bar is back to what it was — a frosted strip with one hairline under
   it — and the legibility guarantee stays, because that is not decoration. The
   fill is still opaque enough that the navigation labels clear 4.5:1 over the
   worst backdrop the page can put behind them.
   ========================================================================== */
.topbar {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.35) blur(16px);
  -webkit-backdrop-filter: saturate(1.35) blur(16px);
  border: 0;
  border-bottom: 1px solid var(--border-2);
  border-radius: 0;
  box-shadow: none;
  background-image: none;
  contain: none;
}









@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: var(--bg); }
}










/* ==========================================================================
   THE HERO'S CLOCK
   ==========================================================================
   The reader asked for the time, and for everything else in that corner to go.
   So the weather chip, the location button and the quote are gone, and the clock
   sits in the hero's centred flow rather than pinned to a corner — which is
   where they wanted it, and where it stops competing with the search box.
   ========================================================================== */
.dash-clock-line { display: flex; justify-content: center; margin-top: 16px; }









.hero-clock {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 15px; border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .26);
  color: #fff; font-family: var(--font-body); font-size: 13.5px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}









.hero-clock svg { opacity: .82; flex: none; }









.hero-clock strong { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }









.hero-clock span { color: rgba(255, 255, 255, .86); }










/* ==========================================================================
   SELECTED STATE, AND SELECTED TEXT
   ==========================================================================
   Two things a reader does constantly, and neither had any styling at all.

   1. The article's tabs set aria-selected correctly and were wired correctly,
      but no rule ever read that attribute. So switching from Core answer to
      Topic-wise breakdown changed the panel and left the buttons looking
      identical — the reader pressed a tab and nothing appeared to happen.

   2. ::selection was never styled. Left to the browser, the highlight on a dark
      theme is the platform default, which on several platforms is a dark blue
      over dark text — the selection appears not to happen.

   Both are now themed, and both are defined from tokens so they follow the
   reader's theme rather than fighting it.
   ========================================================================== */
::selection { background: color-mix(in srgb, var(--copper) 42%, transparent); color: var(--text); }








[data-theme="dark"] ::selection { background: color-mix(in srgb, var(--copper) 55%, transparent); color: #fff; }









.tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--text);
  font-weight: 650;
  box-shadow: var(--elev-1);
}








.tab[aria-selected="true"]::after {
  content: ''; display: block; height: 2px; margin: 6px auto -9px;
  width: 60%; border-radius: 2px; background: var(--copper);
}








.tabs { gap: 2px; }









/* The same for any control that toggles with aria-pressed or aria-current. */
.chip-btn[aria-pressed="true"], .mode-btn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--forest) 14%, var(--surface));
  border-color: var(--forest-ink);
  color: var(--text);
  font-weight: 650;
}









/* ==========================================================================
   WHEN SOMEONE IS IN DISTRESS
   ==========================================================================
   A calm screen, not a dramatic one.

   The reader asked for the page to vanish and the help to appear. It does — but
   as a slow dissolve rather than a snap. Someone arriving here is already having
   the worst moment of their week; a violent, startling animation is the last
   thing they need, and a screen that looks like an error is worse than no screen
   at all. So the page settles away over most of a second, and what replaces it
   is quiet, dark, and still.

   The screen is deliberately NOT part of the theme system. It is dark in every
   theme, because at this moment the site should feel like a person talking
   quietly, not like a website.
   ========================================================================== */
.crisis {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: 32px 22px 40px;
  overflow-y: auto;
  background: #0a0c0b;
  color: #f2efe9;
  font-family: var(--font-body);
  animation: crisisIn .9s var(--ease) both;
}








@keyframes crisisIn { from { opacity: 0; } to { opacity: 1; } }









/* The page underneath settles away rather than being cut off. */
body.is-crisis #main, body.is-crisis .app-side, body.is-crisis .app-rail,
body.is-crisis .site-foot, body.is-crisis .topbar, body.is-crisis .bottom-nav {
  opacity: 0;
  filter: blur(6px);
  transition: opacity .8s var(--ease), filter .8s var(--ease);
  pointer-events: none;
}









/* ---- the companion ---- */
.crisis-figure { width: 92px; height: 92px; flex: none; }








.crisis-figure .body-shape { fill: #7fc9a8; }








.crisis-figure .face { fill: #0a0c0b; }








.crisis-figure .arm { stroke: #7fc9a8; stroke-width: 5; stroke-linecap: round; fill: none;
  transform-origin: 60px 40px; animation: wave 2.4s var(--ease) infinite; }








@keyframes wave {
  0%, 62%, 100% { transform: rotate(0deg); }
  72% { transform: rotate(-24deg); }
  84% { transform: rotate(6deg); }
  92% { transform: rotate(-14deg); }
}








.crisis-figure .blink { animation: blink 5.5s steps(1) infinite; }








@keyframes blink { 0%, 96%, 100% { transform: scaleY(1); } 98% { transform: scaleY(.12); } }









/* ---- the message ---- */
.crisis-message {
  max-width: 620px; text-align: center;
  font-family: var(--font-display); font-size: clamp(17px, 2.4vw, 23px);
  line-height: 1.6; letter-spacing: -.01em; color: #f2efe9;
  min-height: 4.5em;
}








.crisis-message .cursor {
  display: inline-block; width: 2px; height: 1em; vertical-align: -.12em;
  margin-left: 2px; background: #7fc9a8; animation: caret 1s steps(1) infinite;
}








@keyframes caret { 50% { opacity: 0; } }









/* ---- the numbers ---- */
.crisis-help { width: 100%; max-width: 620px; display: grid; gap: 11px; opacity: 0; }








.crisis-help.shown { animation: helpIn .7s var(--ease) .1s both; }








@keyframes helpIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }









.crisis-where { text-align: center; font-size: 13.5px; color: #9aa79f; margin: 0; }








.crisis-line {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 17px; border-radius: 16px;
  background: #141a17; border: 1px solid #232d28;
  text-decoration: none; color: inherit;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}








.crisis-line:hover { background: #1a221e; border-color: #33403a; }








.crisis-line .num {
  flex: none; font-family: var(--font-body); font-size: 19px; font-weight: 700;
  color: #a8e6c8; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}








.crisis-line .meta { min-width: 0; }








.crisis-line .name { display: block; font-size: 14.5px; font-weight: 600; }








.crisis-line .detail { display: block; font-size: 12.5px; color: #9aa79f; margin-top: 3px; line-height: 1.5; }








.crisis-emergency { text-align: center; font-size: 13.5px; color: #9aa79f; }








.crisis-emergency strong { color: #f2efe9; }









.crisis-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 4px; }








.crisis-btn {
  font: inherit; font-size: 13.5px; cursor: pointer;
  padding: 10px 18px; border-radius: 999px;
  background: transparent; color: #cfd8d2; border: 1px solid #33403a;
  transition: background .18s var(--ease), color .18s var(--ease);
}








.crisis-btn:hover { background: #1a221e; color: #f2efe9; }









@media (prefers-reduced-motion: reduce) {
  .crisis, .crisis-help.shown { animation: none; }
  .crisis-figure .arm, .crisis-figure .blink, .crisis-message .cursor { animation: none; }
  body.is-crisis #main, body.is-crisis .topbar { transition: none; }
}









/* ==========================================================================
   CLAYMORPHISM
   ==========================================================================
   The reader asked for this one by name, and it is a good fit — clay is soft,
   tactile and friendly, which is what a site that talks to people in plain
   language should feel like. But it has three traps, and all three are avoided
   here rather than discovered later.

   THE RECIPE. Clay is not a blur value; it is a three-layer contract:
     1. an outer drop shadow — the object's mass, and where it touches the page
     2. an inset shade on the FAR side (offset up from the bottom) — the wall's
        thickness, and the layer that actually separates clay from a flat
        pastel rectangle
     3. an inset light on the LIT side (offset down from the top) — the sheen
   The light always comes from the top. Mixing directions is the tell of
   uncoordinated shadows, so the drop falls down and the shade sits at the
   bottom, everywhere, without exception.

   TRAP ONE: the shadow colour. Pure black insets look like dirt on a soft
   surface. Every shadow here is a darker, desaturated derivation of the
   surface's own hue, through color-mix — so it follows the theme instead of
   fighting it.

   TRAP TWO: affordance collapse. If every card, banner and button gets the same
   inflated treatment, nothing reads as pressable any more. So the full
   three-layer stack is reserved for things you can actually press — the
   containers get the outer shadow alone.

   TRAP THREE: contrast. Clay palettes fail WCAG fast, because a pastel fill
   invites pastel text. Nothing here changes a text colour; the surfaces are
   lifted and the type keeps the contrast it already had. The suite still
   measures it.

   Dark mode is re-derived rather than inverted, because an inset highlight that
   sells the volume on a light surface reads as a grey smudge on a dark one.
   ========================================================================== */
:root {
  --clay-shade: color-mix(in srgb, var(--forest) 22%, transparent);
  --clay-light: rgba(255, 255, 255, .75);
}








[data-theme="dark"] {
  --clay-shade: rgba(0, 0, 0, .5);
  --clay-light: rgba(255, 255, 255, .07);
}








[data-theme="sepia"] {
  --clay-shade: color-mix(in srgb, #6b5327 22%, transparent);
  --clay-light: rgba(255, 255, 255, .7);
}









/* The three layers, as a reusable contract. */
.btn-primary, .depth-btn, .chip, .crisis-btn, .mode-btn, .tab {
  box-shadow:
    0 10px 20px -10px var(--clay-shade),
    inset 0 -6px 12px -8px var(--clay-shade),
    inset 0 8px 14px -8px var(--clay-light);
}








/* Pressing squashes the object rather than redrawing its shadows — animating a
   large blur is the one thing that makes clay expensive. */
.btn-primary:active, .depth-btn:active, .chip:active, .mode-btn:active {
  transform: translateY(1px) scale(.985);
}








/* A soft focus ring, never removed — clay's inset highlight can look vaguely
   like a focus state, and deleting the real one is how that goes wrong. */
.btn-primary:focus-visible, .depth-btn:focus-visible, .chip:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}









/* Containers: the outer shadow only, so they do not read as pressable. */
.dash-action, .q-card, .cat-card, .rail-card, .panel, .answer-card, .source-card, .howstep {
  box-shadow: 0 14px 26px -16px var(--clay-shade);
}








.dash-action:hover, .q-card:hover, .cat-card:hover {
  box-shadow:
    0 18px 30px -16px var(--clay-shade),
    inset 0 8px 14px -10px var(--clay-light);
}









/* The puffy geometry, only where it does not cost content area. */
.dash-action, .q-card, .cat-card, .rail-card { border-radius: var(--radius-lg); }








.btn-primary, .depth-btn, .chip { border-radius: 999px; }









@media (prefers-reduced-motion: reduce) {
  .btn-primary:active, .depth-btn:active, .chip:active, .mode-btn:active { transform: none; }
}









/* ==========================================================================
   COLOUR AND MOVEMENT
   ==========================================================================
   The reader asked for colour and life in the clay and the glass. What follows
   is colour used as light rather than as paint — every one of these is a
   gradient or a shadow, so nothing it touches changes the contrast of the type
   sitting on it. The pair test still measures every background and text colour
   the sheet declares.

   Movement is short and always in one direction — surfaces rise on hover, press
   down on tap, and settle. Nothing loops except the ambient field, which is
   behind everything and slow enough to read over. Every one of them is switched
   off for a reader who asked for that.
   ========================================================================== */
:root {
  /* The accent trio, per theme, as light rather than as fill. */
  --glow-a: color-mix(in srgb, var(--copper) 40%, transparent);
  --glow-b: color-mix(in srgb, var(--sage) 50%, transparent);
  --glow-c: color-mix(in srgb, var(--forest) 26%, transparent);
}






[data-theme="dark"] {
  --glow-a: color-mix(in srgb, var(--copper) 52%, transparent);
  --glow-b: color-mix(in srgb, var(--sage) 42%, transparent);
  --glow-c: color-mix(in srgb, var(--sage) 22%, transparent);
}







/* Glass: a light that travels across the surface once, on hover. */
.dash-hero .searchbar::after, .composer .searchbar::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .5) 48%, transparent 66%);
  background-size: 260% 100%; background-position: 130% 0;
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease), background-position .9s var(--ease);
}






.dash-hero .searchbar:focus-within::after, .composer .searchbar:focus-within::after {
  opacity: 1; background-position: -30% 0;
}







/* The bottom bar's active destination gets a coloured underline that grows. */
.bottom-nav a::before {
  content: ''; position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%);
  height: 2px; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--copper), var(--sage));
  transition: width .22s var(--ease);
}






.bottom-nav a[aria-current="page"]::before { width: 22px; }






.bottom-nav a { position: relative; }







/* Clay: a coloured bloom when a pressable thing is hovered, and a squash on
   press. The bloom is a shadow, so the type on the button is untouched. */




.btn-primary:hover, .depth-btn:hover {
  box-shadow:
    0 14px 26px -10px var(--glow-a),
    inset 0 -6px 12px -8px var(--clay-shade),
    inset 0 8px 14px -8px var(--clay-light);
  transform: translateY(-1px);
}







/* Cards rise with a colour under them rather than a grey smudge. */
.dash-action:hover, .q-card:hover, .cat-card:hover, .rail-card:hover, .howstep:hover {
  box-shadow:
    0 20px 34px -18px var(--glow-a),
    0 6px 14px -10px var(--glow-c),
    inset 0 8px 14px -10px var(--clay-light);
}






.dash-action .ic, .cat-card .ic { transition: transform .2s var(--ease), background .2s var(--ease); }






.dash-action:hover .ic, .cat-card:hover .ic { transform: translateY(-2px) scale(1.06); }







/* The rail's rows and the source rows get a tinted wash, not a grey one. */
.trend-row:hover, .src-row:hover {
  background: linear-gradient(90deg, var(--glow-b), transparent 70%);
}







/* The hero's badge and the clock carry a slow coloured sheen. */
.dash-hero-badge {
  background-image: linear-gradient(100deg, rgba(255, 255, 255, .16), var(--glow-a), rgba(255, 255, 255, .16));
  background-size: 200% 100%;
  animation: sheen 9s linear infinite;
}






@keyframes sheen { from { background-position: 200% 0; } to { background-position: -100% 0; } }







/* The ambient field drifts a little further, and takes the accent with it. */
body::before { animation-duration: 34s, 46s; }







@media (prefers-reduced-motion: reduce) {
  .dash-hero-badge { animation: none; }
  .dash-hero .searchbar::after, .composer .searchbar::after { transition: none; }
  .btn-primary:hover, .depth-btn:hover { transform: none; }
  .dash-action:hover .ic, .cat-card:hover .ic { transform: none; }
  .bottom-nav a::before { transition: none; }
}







/* ==========================================================================
   THE ARTICLE'S PICTURES AND TABLES
   ==========================================================================
   The reader asked for the article's media back, and for the pictures to be
   centred. Wikipedia's images arrive floated left or right, sized for a page
   width this site does not use — so they are taken out of the float, centred in
   the reading column, and capped so a tall portrait cannot dominate a section.

   Tables keep their own horizontal scroll. A wide table is the one thing that
   can push a reading column sideways, and a sideways-crushed page is the failure
   the reader reported before; here it scrolls inside its own box instead.
   ========================================================================== */
.art-media { margin: 16px 0 4px; display: grid; gap: 16px; }




.art-figure { margin: 0; display: grid; justify-items: center; gap: 7px; }




.art-figure img {
  display: block; max-width: 100%; height: auto;
  max-height: 440px; width: auto;
  border-radius: var(--radius); border: 1px solid var(--border-2);
  background: var(--surface-2);
}




.art-figure figcaption {
  font-size: 12.5px; color: var(--muted); line-height: 1.5;
  text-align: center; max-width: 62ch;
}




.art-table {
  overflow-x: auto; max-width: 100%;
  border: 1px solid var(--border-2); border-radius: var(--radius);
  background: var(--surface);
}




.art-table table { border-collapse: collapse; font-size: 13.5px; margin: 0; min-width: 100%; }




.art-table th, .art-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border-2); }




.art-table th { background: var(--surface-2); font-weight: 650; }




.art-table tr:last-child td { border-bottom: 0; }




.art-table:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }





/* ==========================================================================
   ANTIGRAVITY
   ==========================================================================
   Researched rather than guessed. The style has four principles, and this site
   takes the three that fit a reading surface:

     1. WEIGHTLESSNESS — layered, soft, widely-diffused drop shadows, so a card
        reads as floating above the page rather than sitting flush on it. The
        shadows here are longer and softer than the clay layer's, which is what
        makes the difference between "lifted" and "levitating".
     2. SPATIAL DEPTH — a perspective on the grids, so the rows behind read as
        further away than the row in front.
     3. GLASSMORPHISM — already here, in the composer and the bottom bar.

   The fourth is isometric snapping — tilting a dashboard into a 3D plane. It is
   refused: it is built for dashboards and card grids, and tilting a column of
   body text is unreadable.

   THE MOTION RULES ARE TAKEN AS WRITTEN:
     · no instant state change — a minimum of .3s ease-out on hover, focus and
       active, which is slower than this sheet's older .16s
     · entrances are staggered, so a grid arrives like dominoes rather than all
       at once
     · the ambient field already moves slower than the content, which is the
       parallax rule
     · and NOTHING animates a box-shadow or a filter continuously — those are the
       two properties the research names as the ones that cost frames. Hover
       transitions on them are fine, because they run once on a state change and
       then stop. `will-change` is set on the elements that do move, so the
       compositor can take them off the main thread.
   ========================================================================== */
:root {
  --float-1: 0 18px 38px -18px rgba(12, 30, 22, .22), 0 4px 10px -6px rgba(12, 30, 22, .12);
  --float-2: 0 30px 60px -26px rgba(12, 30, 22, .28), 0 8px 18px -10px rgba(12, 30, 22, .14);
}




[data-theme="dark"] {
  --float-1: 0 18px 38px -18px rgba(0, 0, 0, .62), 0 4px 10px -6px rgba(0, 0, 0, .4);
  --float-2: 0 30px 60px -26px rgba(0, 0, 0, .7), 0 8px 18px -10px rgba(0, 0, 0, .45);
}





/* Weightless surfaces: the card grids float rather than sit. */
.dash-action, .q-card, .cat-card, .rail-card, .howstep, .source-card {
  box-shadow: var(--float-1);
}




.dash-action:hover, .q-card:hover, .cat-card:hover, .rail-card:hover, .howstep:hover {
  box-shadow: var(--float-2);
}





/* Spatial depth: the grids sit on a shallow plane, so the rows behind read as
   further away. 1200px is deep enough to feel three-dimensional and shallow
   enough that nothing skews. */
.q-grid, .cat-grid, .topics-grid, .src-grid { perspective: 1200px; transform-style: preserve-3d; }




.q-grid > *, .cat-grid > *, .topics-grid > * { transform: translateZ(0); }





/* Staggered entrance — a grid arrives like dominoes, not all at once. */
@keyframes floatIn {
  from { opacity: 0; transform: translateY(14px) rotateX(3deg); }
  to { opacity: 1; transform: none; }
}




.dash-action, .cat-card, .q-card, .howstep, .rail-card {
  animation: floatIn .5s var(--ease) both;
}




.dash-action:nth-child(2), .cat-card:nth-child(2), .howstep:nth-child(2) { animation-delay: .07s; }




.dash-action:nth-child(3), .cat-card:nth-child(3), .howstep:nth-child(3) { animation-delay: .14s; }




.dash-action:nth-child(4), .cat-card:nth-child(4), .howstep:nth-child(4) { animation-delay: .21s; }




.dash-action:nth-child(5), .cat-card:nth-child(5) { animation-delay: .28s; }




.dash-action:nth-child(6), .cat-card:nth-child(6) { animation-delay: .35s; }





/* The motion rule: nothing changes state in under .3s. */
.btn-primary, .depth-btn, .chip, .chip-btn, .mode-btn, .tab, .btn,
.bottom-nav a, .dash-action, .q-card, .cat-card, .rail-card, .howstep {
  transition-duration: .3s;
  transition-timing-function: var(--ease);
}




/* And the elements that move get handed to the compositor. */
.btn-primary, .depth-btn, .chip, .dash-action, .cat-card, .q-card,
.rail-card, .howstep, .bottom-nav a { will-change: transform; }





@media (prefers-reduced-motion: reduce) {
  .dash-action, .cat-card, .q-card, .howstep, .rail-card { animation: none; }
  .btn-primary, .depth-btn, .chip, .chip-btn, .mode-btn, .tab, .btn,
  .bottom-nav a, .dash-action, .q-card, .cat-card, .rail-card, .howstep { will-change: auto; }
}