/* ==========================================================================
   Hero — the threshold
   One dominant suspended photograph, five supporting pieces of real
   book material, large negative space. Desktop tracks the cursor (each
   layer parallaxes at its own depth) and the scroll position (the
   camera moves forward as the visitor scrolls, carrying the headline
   out with it into the still memorial section). Mobile gets its own,
   sparser portrait arrangement — see the media query at the end of
   this block. Driven by assets/js/hero-room.js. Fully static under
   prefers-reduced-motion.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--paper);
  overflow: hidden;
}

.hero-room {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-room__bg {
  position: absolute;
  inset: -3%;
}

.hero-room__bg picture {
  /* <picture> is an inline wrapper by default and won't pass a
     resolvable height down to the img's height:100% below — it was
     rendering at the image's own intrinsic ratio instead of filling
     the hero, which is why the mobile photo looked wrong. display:
     contents removes the wrapper from layout entirely so the img
     sizes against .hero-room__bg directly, exactly as before the
     <picture> source swap was added. */
  display: contents;
}

.hero-room__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: grayscale(0.35) brightness(0.34) contrast(1.1);
}

.hero-room__light {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 18% 10%, rgba(232, 214, 186, 0.12), transparent 60%),
    radial-gradient(ellipse 55% 50% at 85% 95%, rgba(104, 25, 35, 0.26), transparent 65%);
  mix-blend-mode: screen;
}

.hero-room__layer {
  position: absolute;
  z-index: 2;
  border: 0.3rem solid var(--paper);
  background: var(--paper);
  box-shadow: 0 2rem 4rem -1.5rem rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.hero-room__layer img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-room__pin {
  position: absolute;
  top: -0.5rem;
  left: 50%;
  z-index: 1;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 35% 32%, var(--accent-bright), var(--accent) 72%);
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.5);
}

/* Supporting — small, quiet */
.hero-room__layer--doc {
  top: 8%;
  right: 24%;
  width: min(9vw, 7.5rem);
  opacity: 0.8;
  border-width: 0.2rem;
  rotate: 2deg;
}

.hero-room__layer--binoculars {
  top: 38%;
  left: 3%;
  width: min(14vw, 11.5rem);
  opacity: 0.55;
  filter: blur(0.5px);
  rotate: -3deg;
}

.hero-room__layer--corridor {
  top: 12%;
  right: 5%;
  width: min(14vw, 11.5rem);
  opacity: 0.55;
  filter: blur(0.5px);
  rotate: 4deg;
}

.hero-room__layer--wall {
  bottom: 8%;
  left: -3%;
  width: min(18vw, 14.5rem);
  opacity: 0.85;
  border-width: 0.35rem;
  rotate: 5deg;
}

/* Dominant — the one large, close photograph the room is built around */
.hero-room__layer--dusk {
  bottom: -2%;
  right: -4%;
  width: min(30vw, 24rem);
  border-width: 0.5rem;
  rotate: -3deg;
}

.hero-room__layer--sway {
  animation: hero-sway 8s ease-in-out infinite alternate;
}

@keyframes hero-sway {
  0% { rotate: -6deg; }
  100% { rotate: -2deg; }
}

.hero-room__grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.13;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(
    to bottom,
    rgba(11, 11, 11, 0.66) 0%,
    rgba(11, 11, 11, 0.32) 32%,
    rgba(11, 11, 11, 0.5) 62%,
    rgba(11, 11, 11, 0.96) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-bottom: clamp(3.5rem, 8vh, 6rem);
  padding-top: 6rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.hero__title {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  max-width: 18ch;
}

.hero__title-he {
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  color: var(--paper);
  opacity: 0.92;
}

.hero__actions {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.hero__mark {
  position: absolute;
  right: clamp(1.25rem, 4vw, 3rem);
  bottom: clamp(1.25rem, 4vw, 2.5rem);
  z-index: 6;
  height: clamp(1.5rem, 3vw, 2.25rem);
  width: auto;
  opacity: 0.28;
  filter: brightness(0) invert(1);
  pointer-events: none;
}

@media (max-width: 899px) {
  .hero-room__layer--doc,
  .hero-room__layer--corridor {
    display: none;
  }

  .hero-room__layer--binoculars {
    top: auto;
    bottom: 32%;
    left: -8%;
    width: 38vw;
    max-width: 10.5rem;
    opacity: 0.5;
  }

  .hero-room__layer--wall {
    top: 10%;
    bottom: auto;
    right: -8%;
    left: auto;
    width: 40vw;
    max-width: 11rem;
  }

  .hero-room__layer--dusk {
    top: 6%;
    bottom: auto;
    left: 50%;
    right: auto;
    width: 72vw;
    max-width: 20rem;
    margin-left: calc(-1 * min(36vw, 10rem));
    rotate: 0deg;
    opacity: 0.6;
    filter: blur(0.4px);
  }

  .hero__title {
    max-width: 14ch;
  }
}

/* Phone widths only — narrower than the shared 899px mobile breakpoint
   above. Content gap widened so the remaining eyebrow/title/CTA group
   still reads as one deliberate composition.

   The phone hero also drops the whole layered collage in favor of one
   full-screen photograph (swapped in via the <picture> source in
   index.html) — a different image from any used in the desktop
   collage, not that collage flattened into a background. */
@media (max-width: 599px) {
  .hero__content {
    gap: 1.85rem;
  }

  .hero-room__layer,
  .hero-room__light {
    display: none;
  }

  /* The silhouette sits low enough in frame that a full-height cover
     crop plants it directly behind the headline — there's no crop
     that both keeps the figure recognizable and clears the text. A
     deliberate image band across the top of the hero instead: the
     photo owns the opening beat, a fade carries into solid ink, and
     the text sits in genuine negative space rather than competing
     with the subject. */
  .hero {
    background: var(--ink);
  }

  .hero-room__bg {
    inset: auto;
    top: 0;
    left: -3%;
    right: -3%;
    height: 44vh;
  }

  .hero-room__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, var(--ink) 92%);
  }

  .hero-room__bg img {
    object-position: 8% 20%;
    /* Keeping the dusk blue/orange in the photo (not desaturating it
       away) reads as moody and dark on its own — desaturating a deep
       blue sky flattens it into a washed grey instead. */
    filter: grayscale(0.05) brightness(0.55) contrast(1.15);
  }

  /* The shared scrim dips to its most transparent (0.5) around 32%
     down the hero, which is exactly where the eyebrow sits once the
     supporting sentence is gone. This one holds strong opacity
     through the whole content zone instead of dipping mid-frame; the
     image band above already carries its own fade into ink. */
  .hero__scrim {
    background: linear-gradient(
      to bottom,
      rgba(11, 11, 11, 0.5) 0%,
      rgba(11, 11, 11, 0.82) 26%,
      rgba(11, 11, 11, 0.88) 60%,
      rgba(11, 11, 11, 0.96) 100%
    );
  }
}

/* ==========================================================================
   Dedication band — a thin transition, hero → memorial
   Deliberately not a "section": no heading, no reveal, no imagery —
   just the dedication line the hero used to carry, given its own
   quiet moment of stillness before the memorial. Height is held
   tightly (64–76px mobile, 72–90px desktop) so it reads as a ribbon,
   not a content section.
   ========================================================================== */

.dedication-band {
  background: var(--ink-soft);
  border-top: 1px solid var(--line-on-ink);
  border-bottom: 1px solid var(--line-on-ink);
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--gutter);
  padding-block: 0.75rem;
  text-align: center;
}

.dedication-band__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.dedication-band__en {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.92;
}

.dedication-band__he {
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--grey-on-ink);
  opacity: 0.85;
}

.dedication-band__sep {
  display: none;
}

@media (min-width: 900px) {
  .dedication-band {
    min-height: 84px;
  }

  .dedication-band__text {
    flex-direction: row;
    align-items: baseline;
    gap: 1rem;
  }

  .dedication-band__sep {
    display: inline-block;
    width: 1px;
    height: 0.85em;
    background: var(--line-strong-on-ink);
    align-self: center;
  }

  .dedication-band__he {
    font-size: 1.0625rem;
  }
}

/* ==========================================================================
   Memorial (mandatory, reserved)
   ========================================================================== */

.memorial {
  background: var(--ink);
  color: var(--paper);
}

.memorial__intro {
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.memorial__heading {
  font-size: var(--fs-h2);
  text-transform: uppercase;
}

.memorial__frame {
  position: relative;
  width: 100%;
  margin: 0;
  border: 1px solid var(--line-on-ink);
  padding: clamp(0.5rem, 1.5vw, 1rem);
}

.memorial__frame::before,
.memorial__frame::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--accent-bright);
  border-style: solid;
  z-index: 1;
}

.memorial__frame::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
}

.memorial__frame::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0;
}

/* The complete memorial composition, at its own true aspect ratio, never
   cropped or forced into a shape that would cut anyone out. */
.memorial__image {
  display: block;
  width: 100%;
  height: auto;
}

.memorial__zoom {
  position: absolute;
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  background: rgba(11, 11, 11, 0.72);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line-strong-on-ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  transition: border-color var(--dur-base) var(--ease-out);
}

.memorial__zoom:hover,
.memorial__zoom:focus-visible {
  border-color: var(--accent-bright);
}

.memorial__zoom svg {
  width: 1rem;
  height: 1rem;
}

.memorial-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(11, 11, 11, 0.97);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}

.memorial-lightbox[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

.memorial-lightbox__image {
  flex: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  overflow: auto;
}

.memorial-lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem var(--gutter);
  color: var(--paper);
}

.memorial-lightbox__hint {
  font-size: var(--fs-small);
  color: var(--grey-on-ink);
}

.memorial-lightbox__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line-on-ink);
  color: var(--paper);
}

.memorial-lightbox__close:hover,
.memorial-lightbox__close:focus-visible {
  border-color: var(--accent-bright);
}

.memorial-lightbox__close svg {
  width: 1.15rem;
  height: 1.15rem;
}

.memorial__statement {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  margin-bottom: clamp(0.5rem, 2vw, 1rem);
}

.memorial__statement-lead {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(2rem, 3vw + 1rem, 3.25rem);
  line-height: 1.1;
  color: var(--paper);
}

.memorial__statement-he {
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  color: var(--grey-on-ink);
  opacity: 0.85;
}

.memorial__statement-body {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--fs-body-lg);
  line-height: 1.8;
  color: var(--grey-on-ink);
}

.memorial__categories {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line-on-ink);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2rem;
}

.memorial__category {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  letter-spacing: 0.03em;
  color: var(--grey-on-ink);
}

/* ==========================================================================
   The Book Reveal — cover and spreads as monumental editorial elements
   ========================================================================== */

.book-reveal {
  background: var(--paper);
  color: var(--ink);
}

.book-reveal__head {
  max-width: 46rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.book-reveal__heading {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-h2);
  text-transform: uppercase;
  margin-top: 0.75rem;
}

.book-reveal__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 900px) {
  .book-reveal__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
  }
}

.book-reveal__cover {
  margin: 0;
}

.book-reveal__cover img {
  width: 100%;
  box-shadow: 0 3rem 6rem -2.5rem rgba(11, 11, 11, 0.35);
}

.book-reveal__caption {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  color: var(--grey-on-paper);
}

.book-reveal__spreads {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.book-reveal__spread {
  margin: 0;
  overflow: hidden;
}

.book-reveal__spread img {
  width: 100%;
  transition: transform var(--dur-slow) var(--ease-out);
}

.book-reveal__spread:hover img {
  transform: scale(1.02);
}

/* ==========================================================================
   Enter the Archive — transition into the chapters
   ========================================================================== */

.archive-lead {
  padding-block: clamp(6rem, 12vw, 10rem);
  text-align: center;
}

.archive-lead__he {
  margin-top: 0.5rem;
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  color: var(--grey-on-ink);
  opacity: 0.85;
}

.archive-lead__heading {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  font-size: var(--fs-h2);
  text-transform: uppercase;
  max-width: 20ch;
  margin-inline: auto;
}

.archive-lead .body-lead {
  margin-inline: auto;
}

/* ==========================================================================
   Chapters — a cinematic timeline
   Five full-screen historical scenes stacked in normal document flow
   (no scroll-hijacking, no pinned camera): one dominant full-bleed
   photograph per chapter, the chapter's own real divider page as a
   small supporting document, and explicit prev/next buttons. Desktop
   reveals the summary on hover/focus of the active-looking record;
   mobile reveals it on tap. A side rail tracks which chapter is
   currently in view via IntersectionObserver — see
   assets/js/chapters.js.
   ========================================================================== */

.chapters {
  position: relative;
  background: var(--ink);
}

.chapters__rail {
  position: fixed;
  top: 50%;
  right: clamp(1rem, 3vw, 2.5rem);
  z-index: 20;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}

.chapters[data-in-view="true"] .chapters__rail {
  opacity: 1;
}

.chapters__rail-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.chapters__rail-list li {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--grey-on-ink);
  opacity: 0.45;
  transition: opacity var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.chapters__rail-list li[data-active="true"] {
  opacity: 1;
  color: var(--accent-bright);
}

@media (max-width: 899px) {
  .chapters__rail {
    display: none;
  }
}

.chapter {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line-on-ink);
}

.chapter:last-child {
  border-bottom: 0;
}

.chapter__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.chapter__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(0.25) brightness(0.62) contrast(1.06);
}

/* Chapter 2: a much darker source photograph than the others (a night
   interior), so it needs a gentler brightness reduction here than the
   shared chapter filter above applies, or it reads as excessively
   dark. object-position is set separately per breakpoint to keep the
   frame's genuine negative space (the van's open doorway, left of the
   silhouette) behind the record text, not the console detail on the
   right. */
.chapter__media--doorway img {
  object-position: 32% center;
  filter: grayscale(0.25) brightness(0.88) contrast(1.04);
}

@media (max-width: 899px) {
  .chapter__media--doorway img {
    object-position: 38% center;
  }
}

.chapter__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(11, 11, 11, 0.92) 0%,
    rgba(11, 11, 11, 0.35) 42%,
    rgba(11, 11, 11, 0.55) 100%
  );
}

.chapter__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(4rem, 10vh, 6rem);
  color: var(--paper);
  max-width: 34rem;
}

.chapter__number {
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  line-height: 1;
  -webkit-text-stroke: 1.5px var(--accent-bright);
  color: transparent;
}

.chapter__period {
  margin-top: 0.5rem;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  color: var(--accent-bright);
}

.chapter__title {
  margin-top: 0.5rem;
  font-size: var(--fs-h2);
  text-transform: uppercase;
}

.chapter__title-he {
  margin-top: 0.4rem;
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  color: var(--grey-on-ink);
  opacity: 0.85;
}

.chapter__toggle {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--line-strong-on-ink);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
  transition: border-color var(--dur-base) var(--ease-out);
}

.chapter__toggle svg {
  width: 0.9rem;
  height: 0.9rem;
  transition: transform var(--dur-base) var(--ease-out);
}

.chapter__toggle[aria-expanded="true"] svg {
  transform: rotate(45deg);
}

.chapter__toggle:hover,
.chapter__toggle:focus-visible {
  border-color: var(--accent-bright);
}

.chapter__summary {
  margin-top: 1rem;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.5s var(--ease-in-out), opacity 0.35s var(--ease-out);
}

.chapter__summary > p {
  overflow: hidden;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--grey-on-ink);
  padding-top: 0.35rem;
  max-width: 36ch;
}

.chapter__summary[data-expanded="true"] {
  grid-template-rows: 1fr;
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .chapter__content:hover .chapter__summary,
  .chapter__content:focus-within .chapter__summary {
    grid-template-rows: 1fr;
    opacity: 1;
  }
}

.chapter__doc {
  position: absolute;
  z-index: 2;
  right: clamp(2rem, 6vw, 6rem);
  bottom: clamp(2rem, 6vh, 4rem);
  width: min(22vw, 17rem);
  margin: 0;
  border: 0.3rem solid var(--paper);
  box-shadow: 0 2rem 4rem -1.5rem rgba(0, 0, 0, 0.7);
  opacity: 0.92;
  transition: transform var(--dur-slow) var(--ease-out);
}

.chapter__doc img {
  display: block;
  width: 100%;
}

.chapter:hover .chapter__doc {
  transform: translateY(-0.4rem);
}

.chapter__nav {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--line-strong-on-ink);
  color: var(--paper);
  background: rgba(11, 11, 11, 0.4);
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.chapter__nav:hover,
.chapter__nav:focus-visible {
  border-color: var(--accent-bright);
  background: rgba(11, 11, 11, 0.7);
}

.chapter__nav svg {
  width: 1.1rem;
  height: 1.1rem;
}

.chapter__nav--prev {
  left: clamp(1rem, 3vw, 2rem);
}

.chapter__nav--next {
  right: clamp(4.5rem, 8vw, 6.5rem);
}

@media (max-width: 899px) {
  .chapter__content {
    max-width: 100%;
    padding-block: clamp(5rem, 20vh, 7rem) clamp(6rem, 22vh, 8rem);
  }

  .chapter__doc {
    display: none;
  }

  .chapter__nav {
    width: 2.75rem;
    height: 2.75rem;
    top: auto;
    bottom: clamp(1.5rem, 5vh, 2.5rem);
    transform: none;
  }

  .chapter__summary {
    grid-template-rows: 0fr;
  }
}

/* ==========================================================================
   Voices from the Book — one quotation per near-full viewport
   ========================================================================== */

.voice {
  position: relative;
  min-height: 92vh;
  min-height: 92dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.voice__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.voice__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.4) brightness(0.3) contrast(1.05);
}

.voice__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(11, 11, 11, 0.75) 0%, rgba(11, 11, 11, 0.6) 100%);
}

.voice__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
  color: var(--paper);
}

.voice__quote p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw + 1rem, 2.75rem);
  line-height: 1.28;
  text-wrap: balance;
}

.voice__attribution {
  margin-top: 1.5rem;
  font-size: var(--fs-small);
  letter-spacing: 0.03em;
  color: var(--grey-on-ink);
}

/* ==========================================================================
   Return to the Present
   ========================================================================== */

.present {
  position: relative;
  color: var(--paper);
  overflow: hidden;
}

.present__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.present__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.3) brightness(0.4) contrast(1.05);
}

.present__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(11, 11, 11, 0.72);
}

.present .wrap {
  position: relative;
  z-index: 2;
}

.present__inner {
  max-width: 38rem;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.present__he {
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  color: var(--grey-on-ink);
  opacity: 0.85;
}

.present__he--sub {
  margin-top: 0.1rem;
  margin-bottom: 0.5rem;
}

.present__heading {
  margin-top: 0.5rem;
  font-size: var(--fs-h2);
  text-transform: uppercase;
}

.present__body {
  margin-top: 0.5rem;
  font-size: var(--fs-body-lg);
  color: var(--grey-on-ink);
}

/* ==========================================================================
   Presale
   ========================================================================== */

.presale {
  background: var(--accent-deep);
  color: var(--paper);
}

.presale__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 900px) {
  .presale__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    align-items: start;
  }
}

.presale__heading {
  margin-top: 0.75rem;
  font-size: var(--fs-h2);
  text-transform: uppercase;
}

.presale__body {
  margin-top: 1.25rem;
  font-size: var(--fs-body-lg);
  color: var(--paper);
  opacity: 0.85;
  max-width: 32rem;
}

.presale__he {
  margin-top: 1rem;
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  color: var(--grey-on-ink);
  opacity: 0.85;
}

.presale__microcopy {
  margin-top: 0.5rem;
  font-size: var(--fs-small);
  color: var(--paper);
  opacity: 0.8;
}

.presale .field__input {
  background: rgba(11, 11, 11, 0.25);
}

.form__privacy-link {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--ink);
  color: var(--grey-on-ink);
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line-on-ink);
}

.site-footer__mark {
  height: 1.75rem;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

.site-footer__links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.site-footer__bottom {
  padding-top: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  font-size: var(--fs-small);
}

.site-footer__privacy {
  opacity: 0.7;
}