:root {
  --bg: #ffffff;
  --ink: #111111;
  --line: rgba(17, 17, 17, 0.25);
  --line-hover: rgba(200, 80, 45, 0.5);
  --accent: #c8502d;
  --quiet: rgba(17, 17, 17, 0.35);
  --measure: 34rem;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0e0e0e;
  --ink: #e9e9e9;
  --line: rgba(233, 233, 233, 0.25);
  --line-hover: rgba(226, 108, 66, 0.55);
  --accent: #e26c42;
  --quiet: rgba(233, 233, 233, 0.35);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color 0.35s ease, color 0.35s ease;
}

/* The pond sits behind everything. Pointer events stay on the page so that
   links keep working; interaction is handled on the document instead. */
#pond {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

main {
  position: relative;
  z-index: 1;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 15vh 7vw 3vh;
}

h1 {
  font-size: 1em;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 1.6em;
}

h2 {
  font-size: 1em;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 3em 0 1.2em;
}

p {
  margin: 0 0 1.6em;
  max-width: 62ch;
  /* Text needs a bit of breathing room from the pond behind it. */
  text-shadow: 0 0 14px var(--bg), 0 0 6px var(--bg), 0 0 3px var(--bg);
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.06em;
  transition: color 0.18s ease, border-color 0.18s ease;
}

a:hover,
a:focus-visible {
  color: var(--accent);
  border-color: var(--line-hover);
}

a:focus-visible {
  outline: 2px solid var(--line-hover);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Back link at the top of the inner pages. */
.back {
  display: inline-block;
  margin: 0 0 3.5em;
  color: var(--quiet);
  border-bottom-color: transparent;
  text-shadow: 0 0 14px var(--bg), 0 0 6px var(--bg);
}

.back:hover { color: var(--accent); border-bottom-color: transparent; }

/* Portrait. Ships at high resolution, shown small. */
.portrait {
  margin: 0 0 3em;
  max-width: 280px;
}

.portrait img {
  display: block;
  width: 100%;
  height: auto;
}

/* Lists of links — writing, press, talks. */
.links {
  list-style: none;
  margin: 0 0 1.6em;
  padding: 0;
  max-width: 62ch;
}

.links li {
  margin: 0 0 0.85em;
  text-shadow: 0 0 14px var(--bg), 0 0 6px var(--bg), 0 0 3px var(--bg);
}

.links .meta {
  color: var(--quiet);
}

/* Legal page: smaller, quieter, denser. */
.legal {
  font-size: 0.92em;
}

.legal h2 {
  margin: 2.6em 0 0.9em;
}

.legal p {
  margin-bottom: 1.2em;
}

.address {
  margin: 0 0 1.6em;
  font-style: normal;
  text-shadow: 0 0 14px var(--bg), 0 0 6px var(--bg), 0 0 3px var(--bg);
}

/* Optional: the same block as an image, to keep it out of crawlers' reach.
   The file is black text on transparent, so inverting it in dark mode turns it
   near-white without needing a second file. */
.address-img {
  display: block;
  margin: 0 0 1.6em;
  height: auto;
  max-width: 100%;
}

:root[data-theme="dark"] .address-img { filter: invert(1); }

/* ---- corner: navigation plus the light/dark switch --------------------- */

.corner {
  position: fixed;
  z-index: 2;
  left: max(1.1rem, 3.5vw);
  bottom: max(1.1rem, 3.5vh);
  display: flex;
  align-items: center;
  font-size: 0.85em;
  color: var(--quiet);
  text-shadow: 0 0 14px var(--bg), 0 0 6px var(--bg), 0 0 3px var(--bg);
}

.corner a {
  color: inherit;
  border-bottom-color: transparent;
}

.corner a:hover,
.corner a:focus-visible {
  color: var(--accent);
  border-bottom-color: transparent;
}

/* The page you are already on. */
.corner .here { opacity: 0.5; }

.corner .sep {
  padding: 0 0.55em;
  opacity: 0.45;
}

.toggle {
  position: static;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  /* The glyph is 18px inside a 44px tap target; pulling the button back by
     half the difference lines the moon up with the text margin. */
  margin: 0 0.15em 0 -13px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.18s ease;
}

.toggle:hover { color: var(--accent); }

/* Moon on the light page, sun on the dark one — they trade places with a
   short turn rather than a hard cut. */
.toggle .icon {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
}

.toggle svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 0.3s ease, transform 0.45s ease;
}

.i-sun {
  opacity: 0;
  transform: rotate(-60deg) scale(0.7);
}

:root[data-theme="dark"] .i-moon {
  opacity: 0;
  transform: rotate(60deg) scale(0.7);
}

:root[data-theme="dark"] .i-sun {
  opacity: 1;
  transform: none;
}

.toggle:focus-visible {
  outline: 2px solid var(--line-hover);
  outline-offset: 2px;
  border-radius: 50%;
}

/* ---- breakpoints ------------------------------------------------------- */

@media (min-width: 720px) {
  body { font-size: 18px; }
  main { padding: 17vh 0 3vh; }
}

/* Only once there is real margin beside the text column does the corner have
   somewhere to float. Below that it would sit on top of the text, so it goes
   under the content instead — same order, same alignment. */
@media (max-width: 1099px) {
  .corner {
    position: static;
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 7vw 9vh;
  }
}

@media (min-width: 720px) and (max-width: 1099px) {
  .corner { padding: 0 0 9vh; }
}

@media (min-width: 1100px) {
  main { padding-bottom: 12vh; }
}

@media (max-width: 480px) {
  main { padding: 11vh 8vw 3vh; }
  .corner { padding: 0 8vw 10vh; }
}

@media (prefers-reduced-motion: reduce) {
  #pond { display: none; }
  body, .toggle svg { transition: none; }
}