/* A quiet film frame around the existing paper and watercolor story. */
html {
  scroll-snap-type: y proximity;
  --film-rail: #72573f;
}

body::after {
  position: fixed;
  z-index: 6;
  inset: 0;
  content: '';
  pointer-events: none;
  opacity: .32;
  background:
    radial-gradient(ellipse, #72573f38 0 1px, transparent 1.5px) left 0 top 8px / 8px 26px repeat-y,
    radial-gradient(ellipse, #72573f38 0 1px, transparent 1.5px) right 0 top 8px / 8px 26px repeat-y,
    linear-gradient(90deg, transparent 14vw, #72573f16 14.08vw, transparent 14.16vw),
    linear-gradient(90deg, transparent 39vw, #72573f10 39.06vw, transparent 39.12vw),
    linear-gradient(90deg, transparent 67vw, #72573f12 67.06vw, transparent 67.12vw),
    linear-gradient(90deg, transparent 86vw, #72573f16 86.08vw, transparent 86.16vw);
}

.chapter {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

.chapter-navigation {
  --rail-width: min(34rem, calc(100vw - 2rem));
  position: fixed;
  z-index: 7;
  left: 50%;
  bottom: calc(.75rem + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(var(--chapters, 5), minmax(0, 1fr));
  align-items: stretch;
  width: var(--rail-width);
  max-width: calc(100vw - 1rem);
  padding: .25rem;
  transform: translateX(-50%);
  border: 1px solid color-mix(in srgb, var(--line) 88%, var(--film-rail));
  border-radius: .35rem;
  background: color-mix(in srgb, var(--paper-light) 96%, transparent);
  box-shadow: 0 .35rem 1.2rem #3d2c1c18;
  -webkit-backdrop-filter: blur(.55rem);
  backdrop-filter: blur(.55rem);
}

.chapter-navigation .nav-current-title {
  grid-column: 1 / -1;
  position: relative;
  z-index: 1;
  display: block;
  height: 1.35rem;
  overflow: hidden;
  padding-inline: .65rem;
  color: var(--muted);
  font: italic .72rem/1.35rem var(--serif);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chapter-navigation a {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0;
  border-radius: .2rem;
  color: var(--muted);
  text-decoration: none;
  transition: color 220ms var(--ease);
}

.chapter-navigation .chapter-index {
  color: inherit;
  font: 600 .68rem/1 var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: .09em;
}

.chapter-navigation .chapter-dot,
.chapter-navigation .nav-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.chapter-navigation a[aria-current] {
  color: var(--accent-dark);
}

.chapter-navigation .nav-active-indicator {
  position: absolute;
  z-index: 0;
  top: 1.6rem;
  left: .25rem;
  width: calc((100% - .5rem) / var(--chapters, 5));
  height: 2.75rem;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: .2rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--paper-light));
  transform: translateX(var(--active-offset, 0%));
  transition: transform 340ms var(--ease);
  pointer-events: none;
}

.chapter-navigation a:hover { color: var(--accent); }
.chapter-navigation a:focus-visible { z-index: 2; }

@media (max-width: 700px) {
  .chapter {
    scroll-margin-top: max(43svh, 17rem);
    padding-bottom: calc(var(--space-10) + 4rem);
  }

  .chapter-navigation {
    --rail-width: min(31rem, calc(100vw - 1.25rem));
    bottom: calc(.45rem + env(safe-area-inset-bottom));
    border-radius: .3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
}

/* Chapter counts are set through data-count because the page forbids inline styles. */
.chapter-navigation[data-count='6'] { --chapters: 6; }
.chapter-navigation[data-count='7'] { --chapters: 7; }
.chapter-navigation[data-count='8'] { --chapters: 8; }