/* Site header and footer, shared by every page. Self-contained and scoped
   (--site-* tokens, .site-* classes) so it can sit on top of pages that bring
   their own stylesheet, like the exoplanets paper.

   Theme: the system setting applies until the header toggle sets
   <html data-theme="light|dark"> (theme.js), so dark values appear twice. */

:root {
  --site-bg: #faf8f5;
  --site-text: #1f1d1a;
  --site-muted: #6b6560;
  --site-line: #e7e2db;
  --site-accent: #c2410c;
  --site-coffee: #ff5e5b;
  --site-coffee-hover: #e54e4b;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --site-bg: #161514;
    --site-text: #ece8e3;
    --site-muted: #9c958d;
    --site-line: #2f2d2a;
    --site-accent: #fb923c;
  }
}

:root[data-theme="dark"] {
  --site-bg: #161514;
  --site-text: #ece8e3;
  --site-muted: #9c958d;
  --site-line: #2f2d2a;
  --site-accent: #fb923c;
  color-scheme: dark;
}

:root[data-theme="light"] { color-scheme: light; }

.site-header,
.site-footer {
  color: var(--site-text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
}

.site-wrap {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Header */

.site-header { border-bottom: 1px solid var(--site-line); font-size: 17px; }

.site-header .site-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.site-header .site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}

.site-header .brand {
  color: var(--site-text);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.site-header .projects {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}

.site-header .projects .label {
  color: var(--site-muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-header .projects a { color: var(--site-text); text-decoration: none; }
.site-header .projects a:hover { color: var(--site-accent); }
.site-header .projects a[aria-current="page"] {
  color: var(--site-accent);
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* Theme toggle: the icon shows the current mode, sun in light and moon in dark. */

.site-header .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--site-line);
  border-radius: 8px;
  background: transparent;
  color: var(--site-text);
  cursor: pointer;
}
.site-header .theme-toggle:hover { color: var(--site-accent); border-color: var(--site-accent); }
.site-header .theme-toggle svg { width: 18px; height: 18px; }

.site-header .theme-toggle .icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="light"]) .site-header .theme-toggle .icon-moon { display: block; }
}

:root[data-theme="dark"] .site-header .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .site-header .theme-toggle .icon-moon { display: block; }

/* Footer */

.site-footer {
  border-top: 1px solid var(--site-line);
  font-size: 15px;
}

.site-footer .site-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.site-footer .site-muted { color: var(--site-muted); }

.site-footer nav { display: flex; align-items: center; gap: 20px; }
.site-footer nav a:not(.coffee) { color: var(--site-muted); text-decoration: none; }
.site-footer nav a:not(.coffee):hover { color: var(--site-text); }

.site-footer .coffee {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 8px;
  background: var(--site-coffee);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.site-footer .coffee:hover { background: var(--site-coffee-hover); }