/* Personal-site shell over the research article's existing native figures.
   Semantic plot colors stay fixed; theme colors apply to reading surfaces. */
:root {
  --paper: #fdf6e3;
  --white: #fffaf0;
  --ink: #4e636b;
  --soft: #4e636b;
  --muted: #52636b;
  --line: #ded8c5;
  --safe: #096b63;
  --caption: #eee8d5;
  --heading: #073642;
}
html[data-palette="white"] {
  --paper: #ffffff;
  --white: #f8fafb;
  --ink: #1f2d33;
  --soft: #4d5d65;
  --muted: #52636b;
  --line: #e1e7ea;
  --safe: #096b63;
  --caption: #f2f5f5;
  --heading: #1f2d33;
}
body { background: var(--paper); color: var(--ink); }
.personal-masthead { width: min(1120px, calc(100% - 64px)); height: auto; min-height: 90px; gap: 28px; flex-wrap: wrap; padding: 18px 0; }
.personal-masthead .brand, .site-footer .brand { font: 400 25px/1.3 Georgia, serif; letter-spacing: -.6px; gap: 0; color: #073642; }
.personal-masthead .project-wordmark { font:400 24px/1.2 var(--serif); letter-spacing:-1px; color:var(--ink); }
.project-wordmark span { color:var(--risk); margin:0 1px; font-style:italic; }
.personal-brand-dot { color: var(--safe); }
.personal-masthead .masthead-links { margin-left: auto; gap: 24px; }
.palette-switch { display: flex; border: 1px solid var(--line); border-radius: 20px; padding: 3px; gap: 3px; }
.palette-switch button { border: 0; border-radius: 16px; padding: 5px 9px; font: 11px/1.4 var(--sans); background: transparent; color: var(--muted); cursor: pointer; }
.palette-switch button[aria-pressed="true"] { background: var(--caption); color: #073642; }
.palette-switch button:focus-visible { outline: 2px solid var(--safe); outline-offset: 2px; }
.hero h1, .prose h2 { color: var(--heading); }
.hero .eyebrow { font-size: 12px; }
.hero-experiment, .results-figure, .method-figure, .transfer-figure, .case-figure { background: var(--white); }
figcaption { color: var(--muted); background: var(--caption); }
.resource-links a { background: var(--white); border-color: var(--line); }
.resource-links a:first-child { background: #073642; }
.prose p, .prose li { overflow-wrap: break-word; }
@media (max-width: 650px) {
  .personal-masthead { width: calc(100% - 32px); gap: 14px 20px; }
  .personal-masthead .brand { font-size: 22px; }
  .personal-masthead .masthead-links { order: 3; flex-basis: 100%; margin-left: 0; }
  .palette-switch { margin-left: auto; }
}

/* Preserve policy hues while giving small labels sufficient contrast. */
:root { --base: #586964; --task: #a84a30; --risk: #a5442b; }
html[data-palette="solarized"] .contents a.active,
html[data-palette="solarized"] .chapter-index { color:var(--safe); }