/* Design tokens: one reading column, neutral surfaces, and a shared spacing scale. */
:root {
  color-scheme: light;
  --color-bg: #faf9f6;
  --color-text: #292925;
  --color-body: #52524c;
  --color-subtle: #72726a;
  --color-soft: #eeede7;
  --color-border: #deddd5;
  --color-accent: #5779b0;
  --reading-width: 680px;
  --space-half: 4px;
  --space-1: 8px;
  --control-size: 32px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 72px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #272727;
  --color-text: #f1f0eb;
  --color-body: #c8c8c1;
  --color-subtle: #a5a59d;
  --color-soft: #333330;
  --color-border: #454540;
  --color-accent: #5779b0;
}
*, *::before, *::after { box-sizing: border-box; }
/* Animate shared color tokens once so every surface stays in sync. */
@property --color-bg { syntax: "<color>"; inherits: true; initial-value: #faf9f6; }
@property --color-text { syntax: "<color>"; inherits: true; initial-value: #292925; }
@property --color-body { syntax: "<color>"; inherits: true; initial-value: #52524c; }
@property --color-subtle { syntax: "<color>"; inherits: true; initial-value: #72726a; }
@property --color-soft { syntax: "<color>"; inherits: true; initial-value: #eeede7; }
@property --color-border { syntax: "<color>"; inherits: true; initial-value: #deddd5; }
@media (prefers-reduced-motion: no-preference) {
  html[data-theme-transition] {
    transition: --color-bg 400ms ease, --color-text 400ms ease,
      --color-body 400ms ease, --color-subtle 400ms ease,
      --color-soft 400ms ease, --color-border 400ms ease;
  }
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  background: var(--color-bg);
  overflow-x: hidden;
  scrollbar-gutter: stable;
}
/* Clip sideways paint without creating a nested scroller around the sticky header.
   Keep native vertical scrolling and pinch zoom; suppress edge rubber-banding. */
html, body {
  overscroll-behavior: none;
  touch-action: pan-y pinch-zoom;
}
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}
body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
/* Background-drawn underlines share the animated palette, including visited links.
   Cloning the decoration keeps it on each line of wrapped article links. */
:where(.site-content, .course-page__list, .article-content) a:not(.icon-link) {
  text-decoration: none;
  padding-bottom: 1px;
  background-image: linear-gradient(var(--color-border), var(--color-border));
  background-size: 100% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
a:hover { color: var(--color-accent); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 5px; border-radius: 3px; }

/* Shared reading column and compact controls for every page. */
.site-shell, .reading-shell { width: min(var(--reading-width), calc(100% - 64px)); margin-inline: auto; }
.icon-link { display: inline-flex; align-items: center; justify-content: center; width: var(--control-size); height: var(--control-size); border-radius: 50%; color: var(--color-subtle); flex-shrink: 0; }
.icon-link:hover { background: var(--color-soft); color: var(--color-text); }
.icon-link svg { width: 18px; height: 18px; fill: currentColor; }
.icon-link .icon-email { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle { display: grid; place-items: center; width: var(--control-size); height: var(--control-size); padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-subtle); cursor: pointer; }
.theme-toggle:hover { color: var(--color-text); background: var(--color-soft); }
.theme-toggle__option { display: none; place-items: center; }
.theme-toggle__option svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Show the icon for the action: sun in dark mode, moon in light mode. */
[data-theme-active="dark"] .theme-toggle__light, [data-theme-active="light"] .theme-toggle__dark { display: grid; }
/* A viewport-wide fixed surface covers the safe area directly. No clipped
   pseudo-elements or oversized shadows are needed to hide scrolling content. */
.site-header, .subpage-topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: var(--color-bg);
}
.site-shell { padding-top: var(--fixed-header-height, 96px); }
.reading-shell { padding-top: var(--fixed-header-height, 64px); }

.subpage-topbar { isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 64px; padding-block: calc(var(--space-2) + env(safe-area-inset-top, 0px)) var(--space-2); padding-inline: max(24px, calc((100% - var(--reading-width)) / 2), env(safe-area-inset-left, 0px)) max(24px, calc((100% - var(--reading-width)) / 2), env(safe-area-inset-right, 0px)); background: var(--color-bg); }
.subpage-back { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-size); color: var(--color-subtle); font-size: 14px; text-decoration: none; }
.subpage-back::before { content: "←"; }
@media (max-width: 600px) {
  .site-shell, .reading-shell { width: calc(100% - 48px); }
  .subpage-topbar { min-height: calc(48px + env(safe-area-inset-top, 0px)); padding-block: calc(var(--space-1) + env(safe-area-inset-top, 0px)) var(--space-1); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Article content has its own layer below the fixed header. */
.article-content { position: relative; z-index: 0; }
.article-content :is(h1, h2, h3, h4) { scroll-margin-top: calc(88px + env(safe-area-inset-top, 0px)); }
@supports (padding: max(0px)) {
  .reading-shell { width: min(var(--reading-width), calc(100% - max(24px, env(safe-area-inset-left, 0px)) - max(24px, env(safe-area-inset-right, 0px)))); }
}