:root {
  --ink: #24150d;
  --ink-soft: #563622;
  --blood: #6c1d16;
  --paper: #c9a66d;
  --paper-light: #dfc38e;
  --brass: #a47a3f;
  --night: #070503;
  --ratio: 1.3333;
  color-scheme: dark;
  font-family: Georgia, "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--night);
}

body {
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  color: #c9ad76;
  background:
    radial-gradient(ellipse at 50% 34%, rgba(113, 67, 31, .24), transparent 42%),
    linear-gradient(124deg, #030201, #120b07 48%, #050302);
}

button,
summary,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

.room-shadow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 42%, rgba(0, 0, 0, .62) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .38), transparent 15% 85%, rgba(0, 0, 0, .38));
}

.reader {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 2.4rem minmax(0, 1fr) 2.6rem;
  width: 100%;
  min-height: 100svh;
  padding: .5rem clamp(.5rem, 2.2vw, 2rem) .65rem;
}

.reader-head,
.turning-controls {
  display: grid;
  grid-template-columns: 9rem 1fr 9rem;
  align-items: center;
  width: min(96vw, 96rem);
  margin: 0 auto;
}

.reader-head {
  color: rgba(200, 174, 121, .68);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.text-button,
.turn-label {
  width: max-content;
  padding: .35rem .15rem;
  color: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.text-button:hover,
.text-button:focus-visible,
.turn-label:hover,
.turn-label:focus-visible {
  color: #e1c58d;
  border-bottom-color: rgba(202, 163, 95, .52);
  outline: none;
}

.running-title {
  margin: 0;
  text-align: center;
}

.spread-counter {
  margin: 0;
  text-align: right;
}

.book-frame {
  position: relative;
  display: flex;
  min-height: 0;
  align-items: center;
  justify-content: center;
  perspective: 2400px;
}

.spread-mount {
  --spread-image: none;
  position: relative;
  width: min(92vw, calc((100svh - 7rem) * var(--ratio)));
  aspect-ratio: var(--ratio);
  overflow: hidden;
  isolation: isolate;
  background-image: var(--spread-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: drop-shadow(0 2.2rem 2.2rem rgba(0, 0, 0, .72));
}

.spread-mount::after {
  position: absolute;
  z-index: 9;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(90deg, transparent 47.8%, rgba(20, 9, 4, .36) 49.4%, rgba(0, 0, 0, .56) 50%, rgba(255, 225, 167, .12) 50.65%, transparent 52.3%),
    linear-gradient(90deg, rgba(0, 0, 0, .23), transparent 2.8% 97.2%, rgba(0, 0, 0, .28));
  mix-blend-mode: multiply;
}

.desktop-spread {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.desktop-leaf {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.ink-panel {
  position: absolute;
  inset: 9%;
  display: flex;
  min-height: 0;
  padding: clamp(.7rem, 1.05vw, 1.2rem) clamp(.8rem, 1.2vw, 1.35rem);
  flex-direction: column;
  isolation: isolate;
  color: var(--ink);
  text-shadow: 0 1px rgba(244, 225, 180, .36);
}

.ink-panel::before {
  position: absolute;
  z-index: -2;
  inset: -.42rem -.55rem;
  content: "";
  background:
    linear-gradient(96deg, rgba(89, 50, 25, .12), transparent 7% 93%, rgba(72, 37, 18, .14)),
    radial-gradient(ellipse at 48% 42%, rgba(229, 207, 165, .97) 0 42%, rgba(212, 179, 126, .95) 72%, rgba(181, 133, 76, .88) 100%);
  box-shadow:
    inset 0 0 1.25rem rgba(76, 39, 19, .25),
    0 .22rem .5rem rgba(36, 17, 8, .32);
  clip-path: polygon(1.1% .7%, 17% 0, 41% .8%, 66% .2%, 98.7% 1.2%, 100% 17%, 99.2% 44%, 100% 72%, 98.4% 99%, 73% 99.4%, 46% 100%, 22% 99.1%, .7% 100%, 0 78%, .8% 52%, 0 27%);
  filter: saturate(.84);
}

.ink-panel::after {
  position: absolute;
  z-index: -1;
  inset: -.08rem;
  pointer-events: none;
  content: "";
  border: 1px solid rgba(91, 51, 27, .3);
  border-radius: 48% 3% 46% 2% / 3% 46% 2% 48%;
  box-shadow: inset 0 0 .55rem rgba(100, 56, 28, .16);
}

.spread--introduction .desktop-leaf--left .ink-panel {
  inset: 12% 8% 22% 18%;
  justify-content: center;
  text-align: center;
}

.spread--introduction .desktop-leaf--right .ink-panel {
  inset: 12% 8% 16% 15%;
}

.spread--edenic-inversion .desktop-leaf--left .ink-panel {
  inset: 8% 4% 36% 34%;
}

.spread--edenic-inversion .desktop-leaf--right .ink-panel {
  inset: 8% 31% 25% 4%;
}

.spread--pursuit-and-consequence .desktop-leaf--left .ink-panel {
  inset: 8% 4% 9% 42%;
}

.spread--pursuit-and-consequence .desktop-leaf--right .ink-panel {
  inset: 8% 43% 1% 5%;
}

.spread--creature-and-ai .desktop-leaf--left .ink-panel {
  inset: 8% 47% 9% 5%;
}

.spread--creature-and-ai .desktop-leaf--right .ink-panel {
  inset: 5% 4% 0 54%;
}

.spread--tending-the-garden .desktop-leaf--left .ink-panel {
  inset: 13% 13% 11% 18%;
}

.spread--tending-the-garden .desktop-leaf--right .ink-panel {
  inset: 10% 31% 2.5% 6%;
}

.leaf-heading {
  flex: 0 0 auto;
  margin-bottom: .6rem;
  text-align: center;
}

.leaf-label {
  margin: 0 0 .28rem;
  color: var(--blood);
  font-size: clamp(.48rem, .56vw, .7rem);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.leaf-heading h1,
.leaf-heading h2 {
  margin: 0;
  color: #2b180d;
  font-family: Baskerville, "Palatino Linotype", Georgia, serif;
  font-weight: 500;
  line-height: .98;
  text-wrap: balance;
}

.leaf-heading h1 {
  font-size: clamp(1.35rem, 2.65vw, 3.35rem);
}

.spread--introduction .leaf-heading h1 {
  font-size: clamp(1.35rem, 2.05vw, 2.55rem);
  line-height: 1.02;
}

.leaf-heading h2 {
  font-size: clamp(1rem, 1.65vw, 2rem);
}

.leaf-subtitle {
  margin: .42rem 0 0;
  color: var(--ink-soft);
  font-size: clamp(.72rem, .92vw, 1.05rem);
  font-style: italic;
}

.leaf-copy {
  min-height: 0;
  overflow-y: auto;
  padding: .15rem .35rem .45rem .15rem;
  scrollbar-color: rgba(82, 44, 22, .42) transparent;
  scrollbar-width: thin;
  font-size: clamp(.7rem, .76vw, .87rem);
  line-height: 1.48;
  text-align: left;
  text-wrap: pretty;
}

.spread--creature-and-ai .leaf-copy {
  font-size: clamp(.68rem, .72vw, .82rem);
  line-height: 1.46;
}

.leaf-copy p {
  margin: 0 0 .68em;
}

.leaf-copy em {
  font-style: italic;
}

.pull-line {
  margin: .9rem 5% .25rem !important;
  color: var(--blood);
  font-family: Baskerville, Georgia, serif;
  font-size: 1.08em;
  font-style: italic;
  text-align: center;
}

.spread--edenic-inversion .marginal-verdict {
  margin: .55rem auto .3rem !important;
  padding: .45rem 4%;
}

.spread--tending-the-garden .closing-seal {
  margin: .55rem auto !important;
  padding: .45rem 5%;
}

.dropcap::first-letter {
  float: left;
  margin: .08em .09em 0 0;
  color: var(--blood);
  font-family: Baskerville, Georgia, serif;
  font-size: 3.8em;
  line-height: .68;
}

blockquote {
  margin: .6rem 4% .8rem;
  color: #3b2416;
  font-style: italic;
}

blockquote cite {
  display: block;
  margin-top: .55rem;
  font-size: .82em;
  font-style: normal;
  letter-spacing: .06em;
}

.opening-epigraph {
  margin: .85rem 5%;
  font-size: clamp(.74rem, 1.02vw, 1.15rem);
  line-height: 1.45;
}

.thesis-seal,
.closing-seal,
.marginal-verdict {
  margin: 1rem auto !important;
  padding: .7rem 6%;
  max-width: 28rem;
  color: #4f1b14;
  border-block: 1px solid rgba(100, 45, 27, .46);
  font-family: "Snell Roundhand", "Segoe Script", cursive;
  font-size: clamp(.76rem, 1.02vw, 1.15rem);
  line-height: 1.45;
  text-align: center;
  transform: rotate(-.35deg);
}

.byline {
  margin-top: 1.2rem !important;
  color: #64432b;
  font-size: clamp(.52rem, .6vw, .7rem);
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

.record-insert {
  margin: .75rem 1% .35rem;
  padding: .45rem .55rem .35rem;
  color: #4d3020;
  background: rgba(157, 111, 62, .13);
  border-block: 1px solid rgba(86, 45, 24, .26);
  font-size: .88em;
}

.record-insert summary {
  width: max-content;
  cursor: pointer;
  color: var(--blood);
  font-family: "Snell Roundhand", "Segoe Script", cursive;
  font-size: 1.02em;
  transform: rotate(-.4deg);
}

.record-insert__copy {
  max-height: 12rem;
  margin-top: .55rem;
  padding-right: .35rem;
  overflow-y: auto;
  scrollbar-color: rgba(82, 44, 22, .42) transparent;
  scrollbar-width: thin;
}

.record-insert__copy p:last-child {
  margin-bottom: .2rem;
}

.source-notes {
  margin-top: .9rem;
  padding-top: .48rem;
  border-top: 1px solid rgba(67, 36, 20, .34);
  color: #573825;
  font-size: .78em;
}

.source-notes summary {
  width: max-content;
  cursor: pointer;
  color: var(--blood);
  font-style: italic;
  letter-spacing: .04em;
}

.source-notes ol {
  margin: .55rem 0 0;
  padding-left: 1.25rem;
}

.source-notes li {
  margin-bottom: .35rem;
}

.source-notes a {
  color: #60231a;
  text-decoration-color: rgba(96, 35, 26, .45);
  text-underline-offset: .13em;
}

.edge-control {
  position: absolute;
  z-index: 20;
  top: 50%;
  width: clamp(2rem, 3.5vw, 3.7rem);
  height: 36%;
  padding: 0;
  color: rgba(207, 173, 107, .38);
  background: transparent;
  border: 0;
  cursor: pointer;
  transform: translateY(-50%);
}

.edge-control span {
  font-size: clamp(2rem, 4vw, 4.5rem);
  font-weight: 300;
}

.edge-control:hover,
.edge-control:focus-visible {
  color: rgba(231, 199, 137, .88);
  outline: none;
}

.edge-control:disabled,
.turn-label:disabled {
  visibility: hidden;
}

.edge-control--previous {
  left: 0;
}

.edge-control--next {
  right: 0;
}

.turning-controls {
  color: rgba(194, 158, 95, .65);
  font-size: .6rem;
}

.turning-controls .turn-label:last-child {
  justify-self: end;
}

.spread-marks {
  display: flex;
  justify-content: center;
  gap: .72rem;
}

.spread-mark {
  width: .55rem;
  height: .55rem;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(197, 158, 91, .44);
  border-radius: 50%;
  cursor: pointer;
  transform: rotate(45deg);
}

.spread-mark[aria-current="true"] {
  background: #8f532d;
  border-color: #c1914e;
  box-shadow: 0 0 .65rem rgba(169, 95, 42, .48);
}

.spread-mark:focus-visible {
  outline: 1px solid #e0b872;
  outline-offset: .2rem;
}

.contents-dialog {
  width: min(92vw, 38rem);
  max-height: min(90vh, 46rem);
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  overflow: visible;
}

.contents-dialog::backdrop {
  background: rgba(3, 2, 1, .82);
  backdrop-filter: blur(3px);
}

.contents-leaf {
  position: relative;
  padding: clamp(2rem, 6vw, 4.5rem);
  background:
    linear-gradient(100deg, rgba(72, 34, 15, .17), transparent 10% 90%, rgba(72, 34, 15, .18)),
    #c9a56b;
  border: 1px solid #5c331c;
  box-shadow: inset 0 0 3rem rgba(74, 36, 17, .32), 0 2rem 5rem #000;
  clip-path: polygon(1% 0, 99% 1%, 100% 98%, 97% 100%, 2% 99%, 0 2%);
}

.contents-close {
  position: absolute;
  top: .8rem;
  right: 1rem;
  color: #5d2b1d;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 1.5rem;
}

.contents-kicker {
  margin: 0;
  color: var(--blood);
  font-size: .65rem;
  letter-spacing: .18em;
  text-align: center;
  text-transform: uppercase;
}

.contents-leaf h2 {
  margin: .55rem 0 1.5rem;
  font-family: Baskerville, Georgia, serif;
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 500;
  text-align: center;
}

.contents-leaf ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(65, 35, 20, .38);
}

.contents-leaf li {
  border-bottom: 1px solid rgba(65, 35, 20, .3);
}

.contents-link {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: .8rem;
  align-items: baseline;
  padding: .75rem .25rem;
  color: var(--ink);
  text-decoration: none;
}

.contents-link:hover,
.contents-link:focus-visible {
  color: var(--blood);
  outline: none;
}

.contents-link span:first-child,
.contents-link span:last-child {
  color: #704632;
  font-size: .72rem;
}

.contents-instruction {
  margin: 1.25rem 0 0;
  color: #684832;
  font-size: .72rem;
  font-style: italic;
  text-align: center;
}

.mobile-spread {
  display: none;
}

.page-fixed,
.page-turn {
  position: absolute;
  z-index: 30;
  top: 0;
  width: 50%;
  height: 100%;
  background-image: var(--old-image);
  background-repeat: no-repeat;
  background-size: 200% 100%;
}

.page-fixed--left {
  left: 0;
  background-position: left center;
}

.page-fixed--right {
  right: 0;
  background-position: right center;
}

.page-turn {
  transform-style: preserve-3d;
}

.page-turn--forward {
  left: 50%;
  transform-origin: left center;
  animation: turn-forward .72s cubic-bezier(.55, .1, .32, 1) forwards;
}

.page-turn--backward {
  left: 0;
  transform-origin: right center;
  animation: turn-backward .72s cubic-bezier(.55, .1, .32, 1) forwards;
}

.turn-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: 200% 100%;
  backface-visibility: hidden;
  box-shadow: inset 0 0 1.5rem rgba(25, 12, 5, .3);
}

.page-turn--forward .turn-face--front {
  background-image: var(--old-image);
  background-position: right center;
}

.page-turn--forward .turn-face--back {
  background-image: var(--new-image);
  background-position: left center;
  transform: rotateY(180deg);
}

.page-turn--backward .turn-face--front {
  background-image: var(--old-image);
  background-position: left center;
}

.page-turn--backward .turn-face--back {
  background-image: var(--new-image);
  background-position: right center;
  transform: rotateY(180deg);
}

@keyframes turn-forward {
  0% { transform: rotateY(0); }
  48% { box-shadow: -1.3rem 0 2rem rgba(0, 0, 0, .38); }
  100% { transform: rotateY(-180deg); }
}

@keyframes turn-backward {
  0% { transform: rotateY(0); }
  48% { box-shadow: 1.3rem 0 2rem rgba(0, 0, 0, .38); }
  100% { transform: rotateY(180deg); }
}

.noscript-note {
  position: fixed;
  z-index: 100;
  inset: 40% 20% auto;
  padding: 1rem;
  color: var(--ink);
  background: var(--paper-light);
  text-align: center;
}

@media (max-width: 780px) {
  body {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .reader {
    display: block;
    min-height: 100svh;
    padding: 0;
  }

  .reader-head {
    position: sticky;
    z-index: 50;
    top: 0;
    grid-template-columns: 1fr auto;
    width: 100%;
    height: 2.8rem;
    padding: 0 .9rem;
    background: rgba(8, 5, 3, .92);
    border-bottom: 1px solid rgba(165, 117, 57, .25);
    backdrop-filter: blur(8px);
  }

  .running-title {
    display: none;
  }

  .book-frame {
    display: block;
    min-height: 0;
  }

  .spread-mount {
    width: 100%;
    aspect-ratio: auto;
    overflow: visible;
    filter: none;
  }

  .spread-mount::after,
  .desktop-spread,
  .edge-control,
  .page-fixed,
  .page-turn {
    display: none;
  }

  .mobile-spread {
    display: block;
  }

  .mobile-leaf {
    position: relative;
    min-height: 145vw;
    padding: 8vw 5vw;
    color: var(--ink);
    background-image:
      linear-gradient(rgba(192, 148, 86, .06), rgba(192, 148, 86, .06)),
      var(--spread-image);
    background-position: left center, left center;
    background-repeat: no-repeat;
    background-size: 200% 100%, 200% 100%;
    box-shadow: inset 0 0 2.2rem rgba(48, 20, 8, .36);
  }

  .mobile-leaf--right {
    background-position: right center, right center;
  }

  .mobile-leaf .ink-panel {
    position: relative;
    inset: auto !important;
    min-height: calc(145vw - 16vw);
  }

  .leaf-heading {
    margin-bottom: 1rem;
  }

  .leaf-heading h1 {
    font-size: clamp(2rem, 10vw, 3.15rem);
  }

  .leaf-heading h2 {
    font-size: clamp(1.55rem, 7vw, 2.45rem);
  }

  .leaf-label {
    font-size: .62rem;
  }

  .leaf-subtitle {
    font-size: 1rem;
  }

  .leaf-copy,
  .spread--creature-and-ai .leaf-copy {
    overflow: visible;
    padding: 0 .35rem 1rem;
    font-size: clamp(.98rem, 4.15vw, 1.12rem);
    line-height: 1.55;
  }

  .opening-epigraph,
  .thesis-seal,
  .closing-seal,
  .marginal-verdict {
    font-size: 1.02rem;
  }

  .turning-controls {
    position: sticky;
    z-index: 45;
    bottom: 0;
    grid-template-columns: 5.5rem 1fr 5.5rem;
    width: 100%;
    min-height: 3.2rem;
    padding: .4rem .75rem;
    background: rgba(8, 5, 3, .94);
    border-top: 1px solid rgba(165, 117, 57, .25);
    backdrop-filter: blur(8px);
  }

  .turn-label {
    max-width: 5.5rem;
    font-size: .53rem;
    line-height: 1.35;
  }

  .spread-marks {
    gap: .58rem;
  }

  .spread-mark {
    width: .48rem;
    height: .48rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print {
  body {
    overflow: visible;
    background: white;
  }

  .reader-head,
  .turning-controls,
  .edge-control {
    display: none;
  }
}