/* Academic companion theme for the imported Medical VLM journey demos. */
@font-face {
  font-family: "Open Sans";
  src: url("../../fonts/open-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
}

@font-face {
  font-family: "Museo Sans";
  src: local("Museo Sans 500"), local("MuseoSans-500");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

@font-face {
  font-family: "Museo Sans";
  src: local("Museo Sans 700"), local("MuseoSans-700");
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
}

:root {
  --ink: #202020;
  --ink-2: #171717;
  --paper: #ffffff;
  --slate: #f2f1ed;
  --line: #d9d8d3;
  --text: #202020;
  --muted: #60605c;
  --navy: #202020;
  --navy2: #171717;
  --research-blue: #2563a8;
  --research-red: #b73a4b;
  --research-green: #267255;
  --research-amber: #9a5c08;
  --display: "Museo Sans", "MuseoSans", "Open Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

html,
body {
  font-family: var(--display);
  background: var(--paper);
  color: var(--text);
}

body:not(:has(#stage)) {
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}

a { color: var(--ink); text-underline-offset: 0.16em; }

/* Method-page header: the same quiet, ruled navigation used by the thesis. */
.bar {
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.bar .wrap { min-height: 58px; }
.bar .brand { color: var(--ink); text-decoration: none; font-weight: 600; }
.bar nav a { color: var(--muted); opacity: 1; }
.bar nav a:hover { color: var(--ink); }
.bar nav a[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }

.eyebrow { color: var(--muted); }
h1, h2, h3 { color: var(--ink); letter-spacing: -0.01em; }
h1 { font-weight: 540; }
h2, h3 { font-weight: 600; }
.lede { max-width: 44em; }
.hero { padding: 24px 0 12px; }
.hero .diagram { max-width: 840px; }
.method-intro { max-width: 840px; margin: 0 auto 14px; }
.method-intro .eyebrow { margin: 0 0 6px; }
.method-intro h1 { margin-top: 0; }
.method-intro .lede { margin-bottom: 0; }

.band {
  background: #faf9f6;
  border-color: var(--line);
}

.card,
.diagram,
.readout,
.formula,
.stepbox,
.steps button,
.playbtn,
.stepnav {
  border-color: var(--line);
  border-radius: 6px;
  box-shadow: none;
}

.steps button,
.playbtn,
.stepnav { color: var(--ink); }
.steps button:hover,
.playbtn:hover,
.stepnav:hover { border-color: #85847f; }
.steps button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }
input[type="range"] { accent-color: var(--ink); }

.note {
  border-left-color: #85847f;
  background: #efeee9;
  border-radius: 0 4px 4px 0;
}

.talk {
  border-left-color: var(--ink);
  background: var(--slate);
  border-radius: 0 4px 4px 0;
}

footer { padding: 14px 0 18px; border-top: 1px solid var(--line); }
footer p { margin: 0; }

/* Preserve meaningful chart colors, while replacing presentation-brand navy. */
svg text[font-family^="Nunito"] { font-family: var(--display); }
svg text[font-family^="JetBrains"] { font-family: var(--mono); }
svg [fill="#182457"],
svg [fill="#1e2d5f"],
svg [fill="#16224a"] { fill: var(--research-blue); }
svg [stroke="#182457"],
svg [stroke="#1e2d5f"],
svg [stroke="#16224a"] { stroke: var(--research-blue); }

/* The five-era animation remains a 16:9 stage inside the thesis explorer. */
body:has(#stage) { background: var(--paper); }

#stage {
  border: 1px solid var(--line);
  box-shadow: none;
}

#bar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

#bar h1 { color: var(--ink); font-size: 22px; font-weight: 600; white-space: nowrap; }
#bar .tag { color: var(--muted); font-size: 12.5px; }
#bar a { color: var(--ink); border-bottom-color: #85847f; }
#subtitle { color: var(--muted); }
#capSentence { color: var(--ink); font-weight: 600; }
#foot { background: var(--paper); border-top: 1px solid var(--line); color: var(--muted); }
#stage svg g[filter] { filter: none; }
#stage svg rect[rx="13"] { rx: 5px; }

@media (max-width: 760px) {
  .bar .wrap { align-items: flex-start; padding-block: 12px; }
  .bar nav { display: flex; flex-wrap: wrap; gap: 8px 14px; }
  .bar nav a { margin-left: 0; }
}

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