/* Theme surfaces are separate from the photograph/listening-room color tokens.
   Absence of a saved choice or JavaScript deliberately renders the dark theme. */
:root {
  --theme-ready: 1;
  --theme-canvas: #f2efe5;
  --theme-panel: #e8e5d7;
  --theme-text: #26352b;
  --theme-muted: #59664f;
  --theme-accent: #596747;
  --theme-border: #a9b19c;
  --theme-focus: #263c30;
  color-scheme: light;
}

:root:not([data-theme="light"]) {
  --theme-canvas: #131a16;
  --theme-section: #18211b;
  --theme-panel: #232e25;
  --theme-panel-hover: #2a382b;
  --theme-feature: #364834;
  --theme-text: #efece1;
  --theme-muted: #b8c2b0;
  --theme-accent: #c2d0a6;
  --theme-highlight: #e4c48e;
  --theme-border: #4b5a46;
  --theme-focus: #d7e0bd;
  color-scheme: dark;
}

/* The compact control follows the existing header grid in either theme. */
.site-header nav { margin-left: auto; }
.theme-toggle {
  display: inline-grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--theme-border);
  border-radius: 50%;
  background: var(--theme-panel);
  color: var(--theme-text);
  cursor: pointer;
  transition: border-color .18s;
}
.theme-toggle:hover { border-color: currentColor; }
.theme-toggle[hidden] { display: none; }
/* The early script reserves the control's space while deferred page scripts
   finish. Without JavaScript there is no inert button or empty header slot. */
html[data-theme] .theme-toggle[hidden] { display: inline-grid !important; visibility: hidden; }
.theme-toggle:focus-visible { outline: 3px solid var(--theme-focus); outline-offset: 4px; }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle [data-theme-icon] { display: none; }
:root:not([data-theme="light"]) .theme-toggle [data-theme-icon="light"],
:root[data-theme="light"] .theme-toggle [data-theme-icon="dark"] { display: block; }
.immersive-home > .site-header .theme-toggle { color: var(--paper); background: #17271ecc; border-color: #f2efe580; }
.immersive-home > .site-header .theme-toggle:hover { background: #314635; border-color: var(--paper); }
.immersive-home > .site-header .theme-toggle:focus-visible { outline-color: var(--paper); box-shadow: 0 0 0 7px #17271e; }
.page-tools { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; margin-bottom: 2rem; }
.page-tools > a { display: inline-flex; align-items: center; min-height: 44px; }
.not-found .page-tools { text-align: left; }
/* Color changes must be atomic: an old dark background must not linger behind
   newly light-theme text (or vice versa). Positional hover motion is retained. */
:root :is(.project-card, .note-card) { transition-property: transform, box-shadow, opacity; }
:root .project-filters button { transition: none; }

/* Dark overrides are scoped. The original light stylesheet remains the source
   for the explicit light choice; hero photos and the forest room stay intact. */
:root:not([data-theme="light"]) body { background: var(--theme-canvas); color: var(--theme-text); }
:root:not([data-theme="light"]) :is(.projects, .notes-index) { background: var(--theme-section); }
:root:not([data-theme="light"]) .notes { background: #1c271f; }
:root:not([data-theme="light"]) .about { background: var(--theme-canvas); }
:root:not([data-theme="light"]) :is(.projects, .notes, .about, .notes-index, .note-article, .audio-recording, .recording-page, .not-found, footer) { color: var(--theme-text); }
:root:not([data-theme="light"]) :is(.section:not(.sessions), .project-toolbar, .projects .text-link, .notes .text-link, .about .text-link, .notes-page .text-link, .companions, .companion-card figcaption, .note-link, .article-links) { border-color: var(--theme-border); }
:root:not([data-theme="light"]) :is(.projects, .notes, .about, .notes-index) :is(h1, h2, h3) em { color: var(--theme-accent); }
:root:not([data-theme="light"]) :is(.about-mark, .companions-heading h3 em, .companion-card figcaption) { color: var(--theme-accent); }
:root:not([data-theme="light"]) .companion-image { background: var(--theme-panel); }
:root:not([data-theme="light"]) .about-copy > p:nth-child(2),
:root:not([data-theme="light"]) .about-copy > p.hosting-note { color: var(--theme-muted); }
:root:not([data-theme="light"]) .about .status-dot { background: var(--theme-accent); }

:root:not([data-theme="light"]) .project-card { background: var(--theme-panel); border-color: var(--theme-border); color: var(--theme-text); }
:root:not([data-theme="light"]) .project-card.feature { background: var(--theme-feature); border-color: #6f805d; }
:root:not([data-theme="light"]) .project-card:is(:hover,:focus-within) { border-color: #81916d; box-shadow: 0 12px 25px #00000020; }
:root:not([data-theme="light"]) :is(.project-card p, .card-foot > span, .project-preview figcaption, #project-count) { color: var(--theme-muted); }
:root:not([data-theme="light"]) .project-card.feature :is(p, .card-foot > span, .project-preview figcaption) { color: #d7dfcc; }
:root:not([data-theme="light"]) :is(.card-foot, .project-preview) { border-color: var(--theme-border); }
:root:not([data-theme="light"]) .feature :is(.card-foot, .project-preview) { border-color: #83946c70; }
:root:not([data-theme="light"]) .project-preview svg { color: var(--theme-accent); }
:root:not([data-theme="light"]) .feature .project-preview svg { color: #e0e8cb; }
:root:not([data-theme="light"]) .project-card:is(:hover,:focus-within) .diagram-accent { stroke: var(--theme-highlight); }
:root:not([data-theme="light"]) .project-filters button { color: var(--theme-muted); }
:root:not([data-theme="light"]) .project-filters button:hover { background: var(--theme-panel-hover); color: var(--theme-text); }
:root:not([data-theme="light"]) .project-filters button[aria-pressed="true"] { color: #e4ebd6; background: #354531; border-color: #81916d; }

:root:not([data-theme="light"]) .notes-page .site-header { color: var(--theme-text); border-color: var(--theme-border); }
:root:not([data-theme="light"]) .notes-page .site-header nav a::after { background: var(--theme-accent); }
:root:not([data-theme="light"]) .note-card { color: var(--theme-text); background: var(--theme-panel); border-color: var(--theme-border); }
:root:not([data-theme="light"]) .note-card:is(:hover,:focus-visible) { background: var(--theme-panel-hover); border-color: #81916d; }
:root:not([data-theme="light"]) :is(.note-meta, .note-card p) { color: var(--theme-muted); }
:root:not([data-theme="light"]) .note-steps li { background: var(--theme-panel); border-color: var(--theme-border); }
:root:not([data-theme="light"]) .note-steps strong { color: var(--theme-accent); }
:root:not([data-theme="light"]) .note-article code { color: #dce7c5; background: #27362b; padding: .12em .28em; border-radius: 3px; }
:root:not([data-theme="light"]) .note-article pre { background: var(--theme-panel); border: 1px solid var(--theme-border); padding: 1rem; overflow-x: auto; }
:root:not([data-theme="light"]) .note-article pre code { padding: 0; background: transparent; }
:root:not([data-theme="light"]) footer { background: #101712; color: var(--theme-muted); }
:root:not([data-theme="light"]) footer a { color: var(--theme-accent); }

:root:not([data-theme="light"]) :is(.audio-recording, .recording-page, .not-found) .eyebrow { color: var(--theme-muted); }
:root:not([data-theme="light"]) :is(.audio-recording, .recording-page) a { color: var(--theme-accent); }
:root:not([data-theme="light"]) .not-found .button.primary { color: #17231a; background: var(--theme-accent); border-color: var(--theme-accent); }
:root:not([data-theme="light"]) .not-found .button.primary:hover { background: #d5dfbb; border-color: #d5dfbb; }
:root:not([data-theme="light"]) :is(.audio-recording, .recording-page, .not-found) .button.quiet { border-color: var(--theme-border); }
:root:not([data-theme="light"]) :is(.audio-recording, .recording-page, .not-found) .button.quiet:hover { background: var(--theme-panel-hover); }
:root:not([data-theme="light"]) audio { color-scheme: dark; accent-color: var(--theme-accent); }

/* Focus is visible on charcoal surfaces as well as the unchanged photographic
   header and forest player. Separator focus keeps its authored currentColor. */
:root:not([data-theme="light"]) :is(a, button, summary):focus-visible { outline-color: var(--theme-focus); }
:root:not([data-theme="light"]) ::selection { color: #162219; background: #c7d4af; }

@media (max-width: 760px) {
  .site-header .wordmark { order: 1; }
  .site-header .theme-toggle { order: 2; margin-left: auto; }
  .site-header nav { order: 3; width: 100%; margin-left: 0; }
  .page-tools { gap: .75rem; }
}