:root {
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-text: "EB Garamond", "Iowan Old Style", Palatino, serif;
  --font-sign: "La Belle Aurore", "Segoe Script", cursive;
  --ink: #15304a;
  --body: #274660;
  --muted: #52708a;
  --accent: #b04a36;
  --accent-deep: #8a3526;
  --rule: rgba(21, 48, 74, 0.2);
  --halo: 0 0 1px rgba(236, 247, 255, 0.9), 0 0 14px rgba(214, 236, 253, 0.95),
    0 0 28px rgba(214, 236, 253, 0.7);
  --sky: #b6e0fd;
  --measure: 40rem;
  color-scheme: light;
}

html[data-theme="night"] {
  --ink: #f6f0e1;
  --body: #dde2f0;
  --muted: #c0c9e0;
  --accent: #f2c46d;
  --accent-deep: #ffdca0;
  --rule: rgba(246, 240, 225, 0.22);
  --halo: 0 0 1px rgba(1, 10, 34, 0.9), 0 0 14px rgba(1, 12, 38, 0.95),
    0 0 30px rgba(1, 12, 38, 0.75);
  --sky: #02193c;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--sky);
  scrollbar-color: color-mix(in srgb, var(--ink) 35%, transparent) transparent;
}

h1 {
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

body {
  margin: 0;
  min-height: 100svh;
  color: var(--body);
  background: transparent;
  font-family: var(--font-text), "Iowan Old Style", Palatino, serif;
  font-size: 1.25rem;
  font-weight: 450;
  line-height: 1.68;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-shadow: var(--halo);
  -webkit-font-smoothing: antialiased;
  transition: color 700ms ease;
}

/* Both paintings are 1983×779 (39.3vw tall at full width). On landscape screens they span the full width,
   anchored to the bottom, and their sky is continued upward so the villas at
   both edges stay in frame. */
.scenery {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse min(46rem, 92vw) 100% at 50% 40%,
      var(--reading-light),
      transparent 70%
    ),
    linear-gradient(to top, var(--shore), transparent 22%);
}

.scene-day {
  --reading-light: rgba(214, 236, 253, 0.34);
  --shore: rgba(236, 247, 255, 0.42);
}

.scene-night {
  --reading-light: rgba(1, 12, 38, 0.52);
  --shore: rgba(1, 8, 28, 0.5);
}

.scene {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position:
    center bottom,
    center bottom,
    0 0;
  background-size:
    100% 39.3vw,
    100% auto,
    100% calc(100% - 39.3vw + 1px);
  transition: opacity 900ms ease;
}

.scene-day {
  background-color: #b6e0fd;
  background-image:
    linear-gradient(180deg, #b6e0fd 0%, rgba(182, 224, 253, 0) 40%),
    url("../images/lakeside.webp"),
    linear-gradient(180deg, #a7d8fc 0%, #b6e0fd 100%);
}

.scene-night {
  opacity: 0;
  background-color: #011a3d;
  background-image:
    linear-gradient(180deg, #011a3d 0%, rgba(1, 26, 61, 0) 40%),
    url("../images/lakeside-night.webp"),
    linear-gradient(180deg, #000d28 0%, #011a3d 100%);
}

html[data-theme="night"] .scene-night {
  opacity: 1;
}

.stars::before,
.stars::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  opacity: 0.8;
  animation: twinkle 4.2s ease-in-out infinite alternate;
}

.stars::before {
  box-shadow:
    3vw 6vh 0 rgba(255, 249, 232, 0.9),
    11vw 18vh 0 rgba(255, 249, 232, 0.6),
    17vw 4vh 0 rgba(255, 249, 232, 0.8),
    24vw 12vh 0 rgba(255, 249, 232, 0.5),
    31vw 22vh 0 rgba(255, 249, 232, 0.7),
    38vw 7vh 0 rgba(255, 249, 232, 0.9),
    46vw 16vh 0 rgba(255, 249, 232, 0.5),
    52vw 3vh 0 rgba(255, 249, 232, 0.8),
    59vw 20vh 0 rgba(255, 249, 232, 0.6),
    66vw 9vh 0 rgba(255, 249, 232, 0.9),
    73vw 25vh 0 rgba(255, 249, 232, 0.5),
    81vw 5vh 0 rgba(255, 249, 232, 0.8),
    88vw 14vh 0 rgba(255, 249, 232, 0.6),
    95vw 21vh 0 rgba(255, 249, 232, 0.7);
}

.stars::after {
  width: 1.5px;
  height: 1.5px;
  animation-duration: 6.5s;
  animation-delay: -3s;
  box-shadow:
    7vw 13vh 0 rgba(214, 226, 255, 0.8),
    14vw 26vh 0 rgba(214, 226, 255, 0.5),
    21vw 9vh 0 rgba(214, 226, 255, 0.7),
    28vw 3vh 0 rgba(214, 226, 255, 0.9),
    35vw 15vh 0 rgba(214, 226, 255, 0.5),
    42vw 24vh 0 rgba(214, 226, 255, 0.6),
    49vw 10vh 0 rgba(214, 226, 255, 0.8),
    56vw 27vh 0 rgba(214, 226, 255, 0.5),
    63vw 5vh 0 rgba(214, 226, 255, 0.9),
    70vw 17vh 0 rgba(214, 226, 255, 0.6),
    77vw 11vh 0 rgba(214, 226, 255, 0.8),
    84vw 23vh 0 rgba(214, 226, 255, 0.5),
    91vw 7vh 0 rgba(214, 226, 255, 0.7),
    98vw 16vh 0 rgba(214, 226, 255, 0.6);
}

@keyframes twinkle {
  from {
    opacity: 0.25;
  }
  to {
    opacity: 1;
  }
}

.shooting-star {
  position: absolute;
  top: 9vh;
  left: 58vw;
  width: 7rem;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, rgba(255, 249, 232, 0.95), rgba(255, 249, 232, 0));
  transform: rotate(-16deg);
  transform-origin: right center;
  animation: shoot 17s linear 6s infinite;
}

@keyframes shoot {
  0%,
  94% {
    opacity: 0;
    transform: rotate(-16deg) translateX(0);
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(-16deg) translateX(-22vw);
  }
}

@media (max-aspect-ratio: 5/4) {
  .scene {
    background-position: center bottom;
    background-size: cover;
  }

  .scene-day {
    --reading-light: rgba(214, 236, 253, 0.5);
    --shore: rgba(236, 247, 255, 0.62);
    background-image: url("../images/lakeside.webp");
  }

  .scene-night {
    --reading-light: rgba(1, 12, 38, 0.68);
    --shore: rgba(1, 8, 28, 0.66);
    background-image: url("../images/lakeside-night.webp");
  }

  .scene::after {
    background:
      radial-gradient(ellipse 130% 78% at 50% 34%, var(--reading-light), transparent 72%),
      linear-gradient(to top, var(--shore), transparent 46%);
  }
}

::selection {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--ink);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 300ms ease;
}

a:hover {
  color: var(--accent-deep);
}

.story a,
.lede a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
  transition:
    color 300ms ease,
    text-decoration-color 300ms ease,
    text-underline-offset 300ms ease;
}

.story a:hover,
.lede a:hover {
  text-decoration-color: currentColor;
  text-underline-offset: 0.16em;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: 0.75rem;
  z-index: 3;
  transform: translateY(-160%);
  background: var(--sky);
  color: var(--ink);
  padding: 0.4rem 0.7rem;
  font-size: 0.9rem;
}

.skip-link:focus {
  transform: none;
}

.page {
  position: relative;
  z-index: 1;
  width: min(100% - 3rem, var(--measure));
  margin: 0 auto;
  padding: max(1.5rem, env(safe-area-inset-top)) 0 max(7rem, calc(5rem + env(safe-area-inset-bottom)));
}

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.5rem;
  margin-bottom: clamp(2.5rem, 9vh, 5.5rem);
}

.home-link {
  color: var(--ink);
  font-family: var(--font-display), Georgia, serif;
  font-size: 1.55rem;
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.01em;
}

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

.theme-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: auto;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
  border-radius: 999px;
  color: var(--ink);
  background: color-mix(in srgb, var(--sky) 55%, transparent);
  box-shadow: 0 1px 10px color-mix(in srgb, var(--ink) 16%, transparent);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.theme-toggle:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--sky) 78%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

.theme-toggle svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.2rem;
  height: 1.2rem;
  margin: -0.6rem 0 0 -0.6rem;
  transition:
    opacity 500ms ease,
    transform 700ms ease;
}

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

html[data-theme="night"] .theme-toggle .icon-sun {
  opacity: 1;
  transform: none;
}

html[data-theme="night"] .theme-toggle .icon-moon {
  opacity: 0;
  transform: rotate(40deg) scale(0.7);
}

html[data-theme="night"] {
  --halo-drop: 0 0 6px rgba(1, 12, 38, 0.9);
}

.intro {
  margin-bottom: 2rem;
}

.intro h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display), Georgia, serif;
  font-size: clamp(3.1rem, 8vw, 4.9rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  transition: color 700ms ease;
}

.heading-dot {
  color: var(--accent);
}

.site-nav {
  display: flex;
  gap: 1.6rem;
  margin-top: 1rem;
  font-family: var(--font-display), Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.12em;
}

.site-nav a {
  color: var(--accent);
  padding: 0.35rem 0;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition:
    color 300ms ease,
    background-size 300ms ease;
}

.site-nav a:hover {
  color: var(--ink);
  background-size: 100% 1px;
}

.story {
  max-width: 62ch;
}

.story p,
.lede {
  margin: 0 0 1.15rem;
}

.lede {
  max-width: 58ch;
}

.opening::first-line {
  color: var(--ink);
  font-variant: small-caps;
  letter-spacing: 0.035em;
}

.ornament {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  max-width: 16rem;
  margin: 2.4rem 0 0;
  color: var(--accent);
  animation: rise 900ms ease 240ms both;
}

.ornament-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule) 30%, var(--rule) 70%, transparent);
}

.ornament-crane {
  width: 2rem;
  height: auto;
  filter: drop-shadow(var(--halo-drop, 0 0 6px rgba(214, 236, 253, 0.9)));
}

.motto {
  margin: 1.4rem 0 0;
  color: var(--ink);
  font-family: var(--font-display), Georgia, serif;
  font-size: 1.65rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.35;
}

.signoff {
  display: inline-block;
  margin-top: 1.4rem;
  color: var(--ink);
}

.signoff-name {
  display: block;
  font-family: var(--font-sign), "Segoe Script", cursive;
  font-size: 3.1rem;
  font-weight: 400;
  line-height: 1.1;
  padding: 0.1em 0.25em 0 0;
  transform: rotate(-6deg);
  transform-origin: 0 80%;
  animation: write 1.3s cubic-bezier(0.5, 0, 0.3, 1) 700ms both;
}

.signoff-swash {
  display: block;
  width: 8.25rem;
  height: 1rem;
  margin: -0.1rem 0 0 0.5rem;
  overflow: visible;
}

.signoff-stroke {
  stroke-dasharray: 1;
  animation: draw 1s ease-out 1.8s both;
}

.signoff-dot {
  fill: var(--accent);
  transform-box: fill-box;
  transform-origin: center;
  animation: land 500ms cubic-bezier(0.3, 1.6, 0.5, 1) 2.6s both;
}

@keyframes write {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes land {
  from {
    opacity: 0;
    transform: scale(0);
  }
}

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin-top: 1.4rem;
  font-size: 1.05rem;
}

.socials a {
  color: var(--ink);
  padding: 0.45rem 0.15rem;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
  transition:
    color 300ms ease,
    text-decoration-color 300ms ease;
}

.socials a:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

.index,
.writing {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
}

.index a,
.writing a {
  display: grid;
  gap: 0.1rem 1.2rem;
  margin-inline: -0.7rem;
  padding: 0.95rem 0.7rem;
  border-bottom: 1px solid var(--rule);
  border-radius: 0.45rem;
  color: var(--ink);
  transition: background-color 300ms ease;
}

.index a:hover,
.writing a:hover,
.index a:focus-visible,
.writing a:focus-visible {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}

.index li:first-child a,
.writing li:first-child a {
  border-top: 1px solid var(--rule);
}

.index a {
  grid-template-columns: 2rem 1fr;
}

.writing a {
  grid-template-columns: 7.4rem 1fr;
  align-items: baseline;
}

.index-no,
.writing time {
  color: var(--muted);
  font-size: 0.95rem;
  font-style: italic;
  font-variant-numeric: oldstyle-nums;
}

.index-name,
.writing-title {
  font-family: var(--font-display), Georgia, serif;
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.2;
  transition:
    color 300ms ease,
    transform 400ms ease;
}

.index a:hover .index-name,
.writing a:hover .writing-title {
  transform: translateX(0.3rem);
}

.index a:hover .index-name,
.writing a:hover .writing-title {
  color: var(--accent);
}

.index-note {
  grid-column: 2;
  color: var(--body);
  font-size: 1.1rem;
  line-height: 1.5;
}

.quote {
  margin: 1.8rem 0 0;
  color: var(--ink);
  font-family: var(--font-display), Georgia, serif;
  font-size: 1.65rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.35;
}

.quote footer {
  margin-top: 0.6rem;
  color: var(--muted);
  font-family: var(--font-text), Georgia, serif;
  font-size: 1.05rem;
  font-style: normal;
  font-variant: small-caps;
  letter-spacing: 0.06em;
}

.quote footer::before {
  content: "— ";
}

.back-link {
  display: inline-block;
  margin-top: 1.8rem;
  font-family: var(--font-display), Georgia, serif;
  font-size: 1.3rem;
  font-style: italic;
  font-weight: 600;
}

.colophon {
  margin-top: 5rem;
  color: var(--ink);
  font-size: 0.95rem;
  font-style: italic;
}

.intro,
.story,
.lede,
.motto,
.signoff,
.socials,
.index,
.writing,
.back-link {
  animation: rise 900ms ease both;
}

.story,
.lede {
  animation-delay: 120ms;
}

.motto,
.index,
.writing {
  animation-delay: 240ms;
}

.signoff,
.back-link {
  animation-delay: 360ms;
}

.socials {
  animation-delay: 460ms;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (max-width: 640px) {
  body {
    font-size: 1.16rem;
  }

  .page {
    width: min(100% - 2rem, var(--measure));
    padding-bottom: max(5rem, calc(4rem + env(safe-area-inset-bottom)));
  }

  .intro h1 {
    font-size: clamp(2.65rem, 12vw, 3.5rem);
  }

  .masthead {
    margin-bottom: 2.5rem;
  }

  .writing a,
  .index a {
    grid-template-columns: 1fr;
  }

  .index-note {
    grid-column: 1;
  }

  .writing time {
    order: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .theme-toggle {
    border: 1px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
    box-shadow: none;
    backdrop-filter: none;
  }
}