@import url("./assets/vendor/fonts.css");
:root {
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #081821;
  color: #f6f0dd;
  font:
    16px/1.75 Manrope,
    system-ui,
    sans-serif;
}
main {
  max-width: 760px;
  margin: auto;
  padding: 64px 24px 90px;
}
h1 {
  font:
    400 clamp(40px, 8vw, 68px)/1.06 "Cormorant Garamond",
    serif;
  margin: 36px 0 24px;
}
h2 {
  font:
    500 30px/1.2 "Cormorant Garamond",
    serif;
  margin-top: 40px;
}
a {
  color: #d7b775;
  text-underline-offset: 4px;
}
a:focus-visible {
  outline: 2px solid #f6f0dd;
  outline-offset: 5px;
}
p,
li {
  color: #d2ddd8;
}
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #d7b775;
}
nav {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
footer {
  border-top: 1px solid #d7b77540;
  margin-top: 48px;
  padding-top: 24px;
  font-size: 13px;
}

/* Match the story chapters so cross-page navigation completes consistently. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}