:root {
  --bg: hsl(187, 22.5%, 94%);
  --text: hsl(187, 23%, 15.5%);
  --dim: hsl(187, 37%, 43%);

  --heading-family: 'PT Serif', serif;
  --heading-size: 1.22rem;
  --heading-weight: 400;
  --heading-lh: 1.55;
  --heading-ls: 0px;
  --heading-mb: 1.4rem;

  --body-family: 'PT Serif', serif;
  --body-size: 0.97rem;
  --body-weight: 400;
  --body-lh: 1.8;
  --body-ls: 0px;
  --body-ws: 0px;
  --body-indent: 0em;
  --body-align: left;
  --body-p-mb: 1.2rem;

  --wm-family: 'Josefin Sans', display;
  --wm-size: 1.5rem;
  --wm-weight: 600;
  --wm-spacing: 0.1em;
  --wm-transform: none;
  --wm-mb: 1.4rem;

  --email-family: -apple-system, system-ui, sans-serif;
  --email-size: 0.78rem;
  --email-spacing: 0.02em;
  --email-mt: 2.2rem;

  --nav-family: 'PT Serif', serif;
  --nav-size: 1.05rem;
  --nav-weight: 400;
  --nav-spacing: 0.02em;
  --nav-gap: 1.8rem;
  --nav-subtitle-size: 0.82rem;
  --nav-subtitle-lh: 1.5;
  --nav-right: max(4rem, 18.5vw);

  --content-max-w: 500px;
  --content-ml: max(4rem, 12vw);
  --body-pad-top: 3rem;
  --body-pad-side: 2rem;
  --transition-dur: 0.3s;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--body-family);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--body-pad-top) var(--body-pad-side);
  transition: background var(--transition-dur), color var(--transition-dur);
}

.content {
  max-width: var(--content-max-w);
  margin-left: var(--content-ml);
  position: relative;
  z-index: 1;
}

.wordmark {
  font-family: var(--wm-family);
  font-size: var(--wm-size);
  font-weight: var(--wm-weight);
  letter-spacing: var(--wm-spacing);
  text-transform: var(--wm-transform);
  color: var(--dim);
  margin-bottom: var(--wm-mb);
}

h1 {
  font-family: var(--heading-family);
  font-size: var(--heading-size);
  font-weight: var(--heading-weight);
  line-height: var(--heading-lh);
  letter-spacing: var(--heading-ls);
  margin-bottom: var(--heading-mb);
}

.body-text p {
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-lh);
  letter-spacing: var(--body-ls);
  word-spacing: var(--body-ws);
  text-indent: var(--body-indent);
  text-align: var(--body-align);
  margin-bottom: var(--body-p-mb);
}

.body-text p:last-child { margin-bottom: 0; }

.email { margin-top: var(--email-mt); }

.email a {
  font-family: var(--email-family);
  font-size: var(--email-size);
  color: var(--dim);
  text-decoration: none;
  letter-spacing: var(--email-spacing);
  transition: color 0.2s;
}

.email a:hover { color: var(--text); }

.mode-toggle {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 10;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--dim);
  background: var(--bg);
  color: var(--dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0.5;
  transition: opacity 0.2s, color 0.2s, border-color 0.2s, background 0.2s;
}

.mode-toggle:hover {
  opacity: 0.9;
}

.mode-icon { display: none; }
.mode-toggle[data-state="light"] .mode-icon--sun { display: block; }
.mode-toggle[data-state="dark"] .mode-icon--moon { display: block; }
.mode-toggle[data-state="auto"] .mode-icon--auto { display: block; }

/* --- Responsive: stacked layout when blocks would overlap --- */
body.layout-stacked {
  display: block;
  padding: 2rem 1.5rem;
}

body.layout-stacked .content {
  margin-left: 0;
  max-width: 100%;
}

canvas#rd {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.page-nav {
  position: fixed;
  right: var(--nav-right);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--nav-gap);
  z-index: 1;
  max-width: 260px;
}

.nav-item a {
  font-family: var(--nav-family);
  font-size: var(--nav-size);
  font-weight: var(--nav-weight);
  color: var(--text);
  text-decoration: none;
  letter-spacing: var(--nav-spacing);
  transition: color 0.2s;
}

.nav-item a:hover { color: var(--dim); }

.nav-subtitle {
  font-family: var(--nav-family);
  font-size: var(--nav-subtitle-size);
  font-style: italic;
  line-height: var(--nav-subtitle-lh);
  color: var(--dim);
  margin-top: 0.3rem;
}

.contact-email {
  display: none;
  font-style: normal;
}

body.layout-stacked .page-nav {
  position: relative;
  right: auto;
  top: auto;
  transform: none;
  max-width: 100%;
  margin-top: 3rem;
  z-index: 1;
}