/* Design tokens. Noon is the default; night is set by [data-theme="night"].
   --pond-* colour the pond from Monet's Water Lilies: blue koi and food, green lily
   pads. They are read by the pond's canvas (pond/engine.ts), so keep them as hex. */
:root {
  --bg: #f7f7f3;
  --ink: #22323d;
  --muted: #5b6d76;
  --line: #ccd8d3;
  --accent: #7363aa;
  --on-pond: #fbf8f1;
  /* Her favourite blue: the flat block behind a hovered link or her name. */
  --highlight: #cfe6ff;
  --on-highlight: #22323d;

  --pond-deep: #3f6f8a; /* deep water */
  --pond-mid: #6f9fbd; /* open water */
  --pond-pale: #9fb6d8; /* sky reflected, a touch of lilac */
  --pond-eye: #22323d;
  --pond-pad: #5f8f5c; /* lily pads, in three greens */
  --pond-pad-deep: #3f6b47;
  --pond-pad-light: #93b97f;

  --font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, Menlo, monospace;

  --column: 36rem; /* the one text column every page sits in */
  --ease-squish: cubic-bezier(0.3, 1.6, 0.5, 1);
  --fade: background-color 0.9s ease, color 0.9s ease, border-color 0.9s ease;
}

:root[data-theme='night'] {
  --bg: #10161f;
  --ink: #eee6d6;
  --muted: #a79e8d;
  --line: #2a3446;
  --accent: #e3a55b;

  --pond-deep: #8fb3d6; /* at night the strongest blue is the lightest one */
  --pond-mid: #5f88ad;
  --pond-pale: #b9c9e6;
  --pond-eye: #070a10;
  --pond-pad: #5e8f68;
  --pond-pad-deep: #3e6a4c;
  --pond-pad-light: #8fb987;
  color-scheme: dark;
}

/* First-load choreography. The pond paints itself in first; once it's ready the page
   gets [data-entered] and the groups arrive, each settling as one:
     text    the column settles in, block by block (set --i on each for its beat)
     chrome  the noon/night pearl and the peeking iPod/camera fade in last */

[data-enter] {
  transition-property: opacity, translate;
  transition-timing-function: cubic-bezier(0.2, 0.7, 0.1, 1);
}

[data-enter='text'] { transition-duration: 0.8s; transition-delay: calc(var(--i, 0) * 70ms); }
[data-enter='chrome'] { transition-duration: 0.7s; transition-delay: 0.55s; }

:root:not([data-entered]) [data-enter='text'] { opacity: 0; translate: 0 10px; }
:root:not([data-entered]) [data-enter='chrome'] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  [data-enter] { opacity: 1 !important; translate: none !important; }
}

/* Later pages in the same visit: everything is simply there, and pages crossfade
   into each other (browsers without cross-document view transitions just swap). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; animation-timing-function: ease; }
:root[data-entered='return'] [data-enter] { transition: none; }
/* The pond is the same water on both pages: no crossfade, so it never dips. */
::view-transition-group(pond), ::view-transition-old(pond), ::view-transition-new(pond) { animation: none; }
::view-transition-old(pond) { display: none; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 var(--font-body);
  transition: var(--fade);
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 400; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* A quiet link that gets her blue block on hover. The padding gives the block room;
   pull it back with a negative margin where the text has to line up. */
.block-link { padding: 2px 6px; color: var(--muted); text-decoration: none; transition: background-color 0.2s, color 0.2s; }
.block-link:hover, .block-link:focus-visible { background: var(--highlight); color: var(--on-highlight); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.mode[data-astro-cid-lvnbcmra] {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  color: var(--on-pond);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}

.mode[data-astro-cid-lvnbcmra]:hover {
  transform: translateY(-2px);
}

.mode[data-astro-cid-lvnbcmra]:active {
  transform: scale(.92);
}

.orb[data-astro-cid-lvnbcmra] {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #fff 0 8%, #f6eef2 22%, #dfe3ef 55%, #b9c3d6 85%, #a3aec4);
  box-shadow: 0 0 10px #fff8f0b3, 0 2px 5px #0f162259;
  transition: background .9s, box-shadow .9s, filter .9s;
}

.sheen[data-astro-cid-lvnbcmra] {
  position: absolute;
  inset: -40%;
  background: linear-gradient(115deg, #0000 40%, #ffffffd9 50%, #0000 60%);
  animation: 5s ease-in-out infinite sheen;
}

@keyframes sheen {
  0%, 55% {
    translate: -60%;
  }

  85%, 100% {
    translate: 60%;
  }
}

[data-theme="night"] .orb[data-astro-cid-lvnbcmra] {
  filter: saturate(.4) brightness(.62);
  box-shadow: 0 2px 5px #0006;
}

[data-theme="night"] .sheen[data-astro-cid-lvnbcmra] {
  animation: none;
  opacity: 0;
}
.mode[data-astro-cid-hkbrpulz] {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
  z-index: 40;
}
.pond[data-astro-cid-rymfkrdg] {
  view-transition-name: pond;
  position: fixed;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  font-family: var(--font-mono);
}
main[data-astro-cid-ybatimd6] {
  display: grid;
  gap: 48px;
  width: min(100%, var(--column));
  margin: 0 auto;
  padding: clamp(40px, 9vh, 88px) 20px 64px;
  font-size: .97rem;
}

main[data-astro-cid-ybatimd6] section > h2 {
  margin-bottom: 14px;
  font: 500 1.05rem/1.2 var(--font-display);
  letter-spacing: -.01em;
  color: var(--ink);
}
.id[data-astro-cid-fzpbxy5g] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}

h1[data-astro-cid-fzpbxy5g] {
  font: 500 1.25rem/1.2 var(--font-display);
  letter-spacing: -.02em;
  color: var(--ink);
}

h1[data-astro-cid-fzpbxy5g] a[data-astro-cid-fzpbxy5g] {
  margin-left: -6px;
  color: inherit;
  transition: background-color .2s, color .2s, letter-spacing .3s var(--ease-squish);
}

h1[data-astro-cid-fzpbxy5g] a[data-astro-cid-fzpbxy5g]:hover, h1[data-astro-cid-fzpbxy5g] a[data-astro-cid-fzpbxy5g]:focus-visible {
  color: var(--on-highlight);
  letter-spacing: -.04em;
}

nav[data-astro-cid-fzpbxy5g] {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .88rem;
}

nav[data-astro-cid-fzpbxy5g] a[data-astro-cid-fzpbxy5g][aria-current]:not(:hover, :focus-visible) {
  color: var(--ink);
}

nav[data-astro-cid-fzpbxy5g] a[data-astro-cid-fzpbxy5g]:last-child {
  margin-right: -6px;
}