/* A restrained opening cue: the manuscript settles into view, then the
   feel-bad line is read in three quiet beats. */
.hero-eyebrow-stack .hero-eyebrow {
  opacity: 0;
  transform-origin: left center;
  animation: owner-manuscript-peel 950ms cubic-bezier(.22, 1, .36, 1) 340ms both;
}

.hero-motion-line {
  opacity: 1;
  animation: none;
}

.hero-motion-line > span {
  display: inline-block;
	vertical-align: baseline;
  opacity: 0;
  filter: blur(3px);
  transform: translateY(3px);
  animation: owner-word-arrive 520ms cubic-bezier(.22, 1, .36, 1) both;
}

.hero-motion-line > span:nth-child(1) { animation-delay: 1.2s; }
.hero-motion-line > span:nth-child(2) { animation-delay: 1.62s; }
.hero-motion-line > span:nth-child(3) {
  margin-left: .22em;
  animation-delay: 2.04s;
}

/* This remains a grid: Good and Bad occupy the same cell and trade places. */
.hero-motion-line > .hero-motion-swap {
  display: inline-grid;
  vertical-align: baseline;
}

/* Preserve the original editorial rhythm: Good is legible first; fog then
   changes it to Bad, before Good returns in the long, quiet loop. */
.hero-motion-good { animation: feel-good-loop 18s 2.04s var(--ease) infinite; }
.hero-motion-bad { animation: feel-bad-loop 18s 2.04s var(--ease) infinite; }
.hero-motion-swap::after { animation: feel-fog-loop 18s 2.04s var(--ease) infinite; }

@keyframes owner-manuscript-peel {
  from { opacity: 0; filter: blur(5px); transform: perspective(300px) rotateX(-14deg) translateY(-5px); clip-path: inset(0 100% 0 0); }
  to { opacity: 1; filter: blur(0); transform: perspective(300px) rotateX(0) translateY(0); clip-path: inset(0 0 0 0); }
}

@keyframes owner-word-arrive {
  from { opacity: 0; filter: blur(3px); transform: translateY(3px); clip-path: inset(0 100% 0 0); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); clip-path: inset(0 0 0 0); }
}

@keyframes owner-good-loop {
  0%, 78% { opacity: 0; filter: blur(5px); transform: translateX(4px); }
  84%, 93% { opacity: 1; filter: blur(0); transform: translateX(0); }
  100% { opacity: 0; filter: blur(5px); transform: translateX(4px); }
}

@keyframes owner-bad-loop {
  0%, 77% { opacity: 1; filter: blur(0); transform: translateY(-1px) rotate(-2deg); clip-path: inset(0 0 0 0); }
  84%, 93% { opacity: 0; filter: blur(5px); transform: translateY(-1px) rotate(-2deg); clip-path: inset(0 0 0 100%); }
  100% { opacity: 1; filter: blur(0); transform: translateY(-1px) rotate(-2deg); clip-path: inset(0 0 0 0); }
}

@keyframes owner-fog-loop {
  0%, 76%, 97%, 100% { opacity: 0; transform: translateX(-72%) scaleX(.35); }
  83%, 94% { opacity: .84; }
  90% { opacity: 0; transform: translateX(76%) scaleX(.55); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow-stack .hero-eyebrow,
  .hero-motion-line > span {
    opacity: 1;
    filter: none;
    transform: none;
    clip-path: none;
    animation: none !important;
  }

  .hero-motion-good { display: none; }
  .hero-motion-bad { opacity: 1; }
  .hero-motion-swap::after { display: none; }
}

/* Andy's excerpt is one quoted voice, separated from the site's narrator. */
.afterword-excerpt blockquote {
  position: relative;
}

.afterword-excerpt blockquote::before,
.afterword-excerpt blockquote::after {
  position: absolute;
  color: rgba(224, 149, 104, .72);
  font-family: var(--serif);
  font-size: clamp(3.1rem, 4.2vw, 4.8rem);
  font-style: italic;
  font-weight: 400;
  line-height: .7;
  pointer-events: none;
}

.afterword-excerpt blockquote::before {
  content: "“";
  top: -.12em;
  left: -.55em;
}

.afterword-excerpt blockquote::after {
  content: "”";
  right: -.08em;
  bottom: -.42em;
}

@media (max-width: 760px) {
  .afterword-excerpt blockquote::before { left: -.3em; }
  .afterword-excerpt blockquote::after { right: 0; }
}

/* Phones are reading devices, not reduced desktop canvases. Let a chapter
   breathe vertically and reserve the fixed navigation for moving between
   chapters rather than forcing every line into a single viewport. */
@media (max-width: 760px) {
  .site-experience,
  .chapter-experience {
    height: 100dvh;
    min-height: 100svh;
  }

  .chapter-panel {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-bottom: 66px;
  }

  .chapter-panel > section,
  .chapter-panel > footer {
    min-height: calc(100svh - 66px);
  }

  .chapter-arrow-controls {
    z-index: 110;
    padding: 7px;
    border-radius: 24px;
    background: color-mix(in srgb, var(--stage-color) 72%, transparent);
    box-shadow: 0 8px 22px rgba(18, 12, 19, .12);
  }

  .next-chapter-line {
    z-index: 109;
    min-height: 44px;
    padding-inline: 10px 14px;
    background: color-mix(in srgb, var(--stage-color) 74%, transparent);
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(104px, .42fr);
    gap: 17px 18px;
    min-height: calc(100svh - 66px);
    padding: 88px 0 76px;
  }

  .hero-eyebrow-stack {
    margin-bottom: 7px;
  }

  .hero-motion-line {
    margin-left: 0;
    font-size: .78rem;
  }

  .hero h1 {
    font-size: clamp(2.45rem, 11vw, 3.45rem);
    line-height: .96;
  }

  .hero-question-line {
    margin-left: 0;
    font-size: .86rem;
    line-height: 1.32;
  }

  .cover-stage {
    align-self: end;
    width: min(100%, 146px);
    margin-bottom: 6px;
  }

  .hero-intro {
    max-width: 19rem;
    font-size: .98rem;
    line-height: 1.42;
  }

  .hero .button--primary {
    min-height: 42px;
    padding-inline: 13px;
  }

  .chapter-panel .manuscript {
    padding-top: 92px;
    padding-bottom: 82px;
  }

  .manuscript-grid {
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: start;
    gap: 19px;
    min-height: auto;
  }

  .paper-composition {
    min-height: 218px;
    margin-top: 112px;
    opacity: .78;
  }

  .manuscript-copy h2 {
    margin-bottom: 18px;
    font-size: clamp(2.3rem, 10vw, 3rem);
    line-height: .93;
  }

  .manuscript-copy .lead {
    font-size: 1rem;
    line-height: 1.42;
  }

  .manuscript-copy blockquote {
    margin-top: 20px;
    padding: 11px 0 11px 14px;
    font-size: .99rem;
    line-height: 1.42;
  }

  .manuscript-read {
    min-height: 42px;
    margin-top: 15px;
  }

  .chapter-panel .identity,
  .chapter-panel .afterword,
  .story-act {
    min-height: calc(100svh - 66px);
  }

  .story-act--novel,
  .story-act--instruction,
  .story-act--book {
    padding-top: 92px;
    padding-bottom: 82px;
  }

  .theme-orbit {
    margin-bottom: 26px;
  }

  .afterword-grid {
    padding-bottom: 18px;
  }
}

.instruction-letter .afsp-affiliation {
  margin: 1.1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(36, 27, 36, .16);
  color: rgba(36, 27, 36, .64);
  font-family: var(--sans);
  font-size: .72rem;
  line-height: 1.5;
}

/* Content calls to action: one square, editorial treatment that reverses
   cleanly with the chapter's light or dark page. Navigation remains separate. */
.hero .button--primary,
.story-state--afterword .afterword .button--primary,
.story-state--manuscript .manuscript-read,
.story-state--book .book-act-postscript > a,
.story-state--book .bookshop-preorder {
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid currentColor;
  border-radius: 0;
  font-family: var(--sans);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: lowercase;
  text-decoration: none;
  transition: transform 220ms var(--ease), box-shadow 220ms ease, background 220ms ease, color 220ms ease;
}

.hero .button--primary {
  background: var(--ink-deep);
  border-color: var(--ink-deep);
  color: var(--fog-pale);
}

.story-state--afterword .afterword .button--primary,
.story-state--manuscript .manuscript-read,
.story-state--book .book-act-postscript > a,
.story-state--book .bookshop-preorder {
  background: var(--fog-pale);
  border-color: var(--fog-pale);
  color: var(--ink-deep);
}

.hero .button--primary:hover,
.story-state--afterword .afterword .button--primary:hover,
.story-state--manuscript .manuscript-read:hover,
.story-state--book .book-act-postscript > a:hover,
.story-state--book .bookshop-preorder:hover {
  box-shadow: 0 10px 24px rgba(17, 12, 18, .28);
  transform: translateY(-2px);
}

.hero .button--primary:focus-visible,
.story-state--afterword .afterword .button--primary:focus-visible,
.story-state--manuscript .manuscript-read:focus-visible,
.story-state--book .book-act-postscript > a:focus-visible,
.story-state--book .bookshop-preorder:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 4px;
}

/* The final control closes the journey; it should read as a compact return,
   not a second large call to action. */
.next-chapter-line {
  display: none !important;
}

.story-state--book .book-act-postscript > a {
  min-height: 36px;
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  justify-content: flex-start;
  align-items: center;
  padding: 0 0 1px;
  gap: 9px;
  border: 0;
  border-bottom: 1px solid rgba(226, 223, 227, .48);
  background: transparent;
  color: rgba(226, 223, 227, .84);
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .085em;
  white-space: nowrap;
  box-shadow: none;
}

.story-state--book .book-act-postscript > a:hover {
  border-bottom-color: var(--coral);
  background: transparent;
  box-shadow: none;
  color: var(--fog-pale);
  transform: translateX(-2px);
}

.book-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.book-info-trigger {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 0 0 2px;
  border: 0;
  border-bottom: 1px solid rgba(226, 223, 227, .56);
  border-radius: 0;
  background: transparent;
  color: var(--fog-pale);
  font-family: var(--sans);
  font-size: .54rem;
  letter-spacing: .075em;
  line-height: 1;
  white-space: nowrap;
}

/* Confirmed edition data belongs to the book screen, but the preorder action
   remains one clear path out of the story. */
.story-state--book .bookshop-preorder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 33px;
  margin-top: 14px;
  padding: 0 11px;
  font-size: .54rem;
  letter-spacing: .085em;
  white-space: nowrap;
}

.book-act-cover .purchase-note {
  margin: 16px 0 0;
  color: var(--ember);
  font-family: var(--sans);
  font-size: .63rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .045em;
  line-height: 1.4;
  transform: none;
}

.book-act-cover .book-info-trigger {
  position: relative;
  z-index: 6;
  min-height: 36px;
  margin-top: 12px;
  padding: 0 10px;
  border: 1px solid rgba(226, 223, 227, .62);
  background: rgba(226, 223, 227, .1);
  color: var(--fog-pale);
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .085em;
  cursor: pointer;
  pointer-events: auto;
}

.story-state--book .inquiry-email {
  display: inline;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--fog-pale);
  font-size: inherit;
  letter-spacing: inherit;
  text-decoration-color: rgba(226, 223, 227, .45);
  text-underline-offset: 3px;
}

/* Edition details deliberately borrow the site's existing reader treatment. */
.book-details-reader .reader-content {
  padding-bottom: clamp(64px, 8vw, 110px);
}

.edition-details-list {
  display: grid;
  max-width: 680px;
  margin: 0 auto;
}

.edition-details-list > div {
  padding: 15px 0;
  border-bottom: 1px solid rgba(226, 223, 227, .18);
}

.edition-details-list dt {
  margin-bottom: 5px;
  color: var(--mauve);
  font-family: var(--sans);
  font-size: .56rem;
  letter-spacing: .14em;
  text-transform: lowercase;
}

.edition-details-list dd {
  margin: 0;
  color: var(--fog-pale);
  font-family: var(--serif);
  font-size: clamp(1rem, 1.45vw, 1.25rem);
}

.book-details-reader .reader-content > .reader-signoff {
  margin-top: 28px;
  color: var(--ember);
  font-family: var(--sans);
  font-size: .68rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .055em;
  line-height: 1.4;
}

.book-details-reader .reader-content > .reader-signoff:nth-of-type(2)::first-letter {
  float: none;
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

@media (max-width: 760px) {
  /* The export hid the latter edition cells on phones. Keep all confirmed
     formats available and let the one-column layout carry them cleanly. */
  .story-state--book .book-act-details > div:nth-child(n + 3) {
    display: block;
  }

  .story-state--book .book-act-details dd {
    font-size: .8rem;
  }

  .story-state--book .bookshop-preorder {
    min-height: 33px;
    margin-top: 12px;
    padding-inline: 9px;
    font-size: .5rem;
  }

  .story-state--book .book-act-postscript {
    display: none;
  }

  .book-actions {
    flex-wrap: nowrap;
    gap: 15px;
  }

  .book-act-cover .purchase-note {
    display: none;
  }

  .book-act-cover .book-info-trigger {
    margin-top: 0;
  }

  .book-info-trigger {
    display: inline-flex;
    align-items: center;
    min-height: 35px;
    padding: 0 0 0 2px;
    border: 0;
    border-bottom: 1px solid rgba(226, 223, 227, .56);
    border-radius: 0;
    background: transparent;
    color: var(--fog-pale);
    font-family: var(--sans);
    font-size: .5rem;
    letter-spacing: .07em;
    line-height: 1;
    white-space: nowrap;
  }

  .book-details-dialog {
    width: min(92vw, 28rem);
    max-height: min(82svh, 42rem);
    margin: auto;
    overflow: auto;
    border: 1px solid rgba(226, 223, 227, .26);
    border-radius: 0;
    background: #211b24;
    color: var(--fog-pale);
    box-shadow: 0 24px 72px rgba(8, 5, 10, .58);
  }

  .book-details-dialog::backdrop {
    background: rgba(15, 11, 17, .72);
    backdrop-filter: blur(7px);
  }

  .book-details-dialog__inner {
    padding: 24px 22px 26px;
  }

  .book-details-dialog__close {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    float: right;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--fog-pale);
    font-family: var(--sans);
    font-size: .58rem;
    letter-spacing: .09em;
    text-transform: uppercase;
  }

  .book-details-dialog .eyebrow {
    margin: 0 0 14px;
  }

  .book-details-dialog h2 {
    margin: 0 0 22px;
    font-size: 2.25rem;
    line-height: .94;
  }

  .book-details-dialog dl {
    display: grid;
    gap: 12px;
    margin: 0 0 22px;
  }

  .book-details-dialog dl > div {
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(226, 223, 227, .16);
  }

  .book-details-dialog dt,
  .book-details-dialog p > span {
    display: block;
    margin-bottom: 4px;
    color: var(--mauve);
    font-family: var(--sans);
    font-size: .5rem;
    letter-spacing: .13em;
    text-transform: lowercase;
  }

  .book-details-dialog dd {
    margin: 0;
    font-family: var(--serif);
    font-size: .92rem;
  }

  .book-details-dialog p {
    color: rgba(226, 223, 227, .76);
    font-family: var(--sans);
    font-size: .72rem;
    line-height: 1.55;
  }

  .book-details-dialog p + p {
    margin-top: 18px;
  }

  .book-details-dialog a {
    color: var(--fog-pale);
    text-underline-offset: 3px;
  }
}

/* Keep each composition whole on short laptop windows and compact phones. */
@media (max-height: 760px) and (min-width: 761px) {
  .hero-grid {
    padding-block: 54px 46px;
  }

  .chapter-panel .manuscript {
    padding-block: 58px 42px;
  }

  .manuscript-grid {
    min-height: calc(100svh - 100px);
  }

  .paper-composition {
    min-height: 330px;
    transform: scale(.86);
  }

  .manuscript-copy h2 {
    margin-bottom: 18px;
    font-size: clamp(3.25rem, 5.2vw, 4.4rem);
  }

  .manuscript-copy .lead {
    font-size: clamp(1rem, 1.45vw, 1.2rem);
    line-height: 1.34;
  }

  .manuscript-copy blockquote {
    margin-top: 16px;
  }

  .story-act--instruction {
    padding-block: 58px 44px;
  }

  .instruction-heading h2 {
    font-size: clamp(3.1rem, 5vw, 4.25rem);
  }

  .instruction-letter {
    padding: 24px 30px;
  }
}

@media (max-width: 420px) {
  .chapter-panel .manuscript {
    padding-top: 64px;
    padding-bottom: 42px;
  }

  .manuscript-grid {
    min-height: calc(100svh - 106px);
  }

  .paper-composition {
    min-height: 222px;
  }

  .manuscript-copy h2 {
    margin-bottom: 14px;
    font-size: 2.12rem;
  }

  .manuscript-copy .lead {
    font-size: .9rem;
    line-height: 1.3;
  }

  .manuscript-copy blockquote {
    margin-top: 14px;
    padding-block: 7px;
    font-size: .79rem;
  }

  .manuscript-read {
    min-height: 38px;
    margin-top: 10px;
  }
}

/* Final mobile pass: these declarations intentionally come after the compact
   desktop-derived rules above, so phone layouts use room to read. */
@media (max-width: 760px) {
  .site-experience,
  .chapter-experience { height: 100dvh; min-height: 100svh; }
  .chapter-panel { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; padding-bottom: 66px; }
  .chapter-panel > section,
  .chapter-panel > footer { min-height: calc(100svh - 66px); }
  .chapter-arrow-controls { z-index: 110; padding: 7px; border-radius: 24px; background: color-mix(in srgb, var(--stage-color) 72%, transparent); box-shadow: 0 8px 22px rgba(18, 12, 19, .12); }
  .next-chapter-line { z-index: 109; min-height: 44px; padding-inline: 10px 14px; background: color-mix(in srgb, var(--stage-color) 74%, transparent); }

  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(104px, .42fr); gap: 17px 18px; min-height: calc(100svh - 66px); padding: 88px 0 76px; }
  .hero-eyebrow-stack { margin-bottom: 7px; }
  .hero-motion-line { margin-left: 0; font-size: .78rem; }
  .hero h1 { font-size: clamp(2.45rem, 11vw, 3.45rem); line-height: .96; }
  .hero-question-line { margin-left: 0; font-size: .86rem; line-height: 1.32; }
  .cover-stage { align-self: end; width: min(100%, 146px); margin-bottom: 6px; }
  .hero-intro { max-width: 19rem; font-size: .98rem; line-height: 1.42; }
  .hero .button--primary { min-height: 42px; padding-inline: 13px; }

  .chapter-panel .manuscript { padding-top: 92px; padding-bottom: 82px; }
  .manuscript-grid { grid-template-columns: 92px minmax(0, 1fr); align-items: start; gap: 19px; min-height: auto; }
  .paper-composition { min-height: 218px; margin-top: 112px; opacity: .55; transform: scale(.68); transform-origin: left 45%; }
  .manuscript-copy h2 { margin-bottom: 18px; font-size: clamp(2.3rem, 10vw, 3rem); line-height: .93; }
  .manuscript-copy .lead { font-size: 1rem; line-height: 1.42; }
  .manuscript-copy blockquote { margin-top: 20px; padding: 11px 0 11px 14px; font-size: .99rem; line-height: 1.42; }
  .manuscript-read { min-height: 42px; margin-top: 15px; }

  .chapter-panel .identity,
  .chapter-panel .afterword,
  .story-act { min-height: calc(100svh - 66px); }
  .story-act--novel,
  .story-act--instruction,
  .story-act--book { padding-top: 92px; padding-bottom: 82px; }
  .theme-orbit { margin-bottom: 26px; }
  .afterword-grid { padding-bottom: 18px; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: clamp(2.35rem, 11vw, 2.8rem); }
  .manuscript-grid { grid-template-columns: 78px minmax(0, 1fr); gap: 15px; }
  .paper-composition { min-height: 192px; transform: scale(.58); }
  .manuscript-copy h2 { font-size: 2.2rem; }
}

/* Mobile is a reading edition, not a reduced desktop composition. */
@media (max-width: 760px) {
  .chapter-panel { padding-bottom: 82px; }
  .chapter-panel > section,
  .chapter-panel > footer,
  .chapter-panel .identity,
  .chapter-panel .afterword,
  .story-act { min-height: auto; }

  .chapter-panel .section,
  .chapter-panel .story-act,
  .chapter-panel .manuscript,
  .chapter-panel .identity,
  .chapter-panel .afterword {
    padding-top: 104px;
    padding-bottom: 104px;
  }

  .hero-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: auto;
    padding-top: 98px;
    padding-bottom: 112px;
  }

  .hero-copy { display: contents; }
  .hero-eyebrow-stack { order: 1; margin-bottom: 28px; }
  .hero h1 { order: 2; margin: 0; font-size: clamp(3.05rem, 14vw, 4.2rem); line-height: .94; }
  .hero-intro { order: 3; max-width: 25rem; margin-top: 28px; font-size: 1.15rem; line-height: 1.42; }
  .hero-question-line { order: 4; margin: 22px 0 0 8%; font-size: .94rem; }
  .hero-actions { order: 5; margin-top: 23px; }
  .cover-stage { order: 6; align-self: center; width: min(72vw, 300px); margin: 50px 0 0; }

  .story-act--novel { display: block; }
  .act-copy h2,
  .instruction-heading h2,
  .book-act-copy h2 { font-size: clamp(3rem, 14vw, 4.4rem); line-height: .93; }
  .act-lede { margin: 31px 0 0; font-size: 1.25rem; line-height: 1.42; }
  .act-detail { margin: 20px 0 0 8%; font-size: .85rem; }
  .theme-orbit { grid-template-columns: 1fr; gap: 0; min-height: auto; margin: 58px 0 0; }
  .theme-word,
  .theme-word--1,
  .theme-word--2,
  .theme-word--3,
  .theme-word--4 { width: 100%; min-height: 0; padding: 0 0 23px 24px; position: relative; inset: auto; }
  .theme-word h3 { font-size: 2rem; }
  .theme-word p { display: block; font-size: .95rem; }

  .manuscript-grid { display: flex; flex-direction: column; gap: 46px; min-height: auto; }
  .manuscript-copy { order: 1; max-width: none; }
  .paper-composition { order: 2; align-self: center; width: min(64vw, 270px); min-height: 350px; margin: 0; opacity: .68; transform: none; }
  .manuscript-copy h2 { margin-bottom: 27px; font-size: clamp(3rem, 14vw, 4rem); }
  .manuscript-copy .lead { font-size: 1.16rem; line-height: 1.45; }
  .manuscript-copy blockquote { margin-top: 29px; padding: 15px 0 15px 18px; font-size: 1.12rem; line-height: 1.42; }
  .manuscript-read { margin-top: 24px; }

  .identity { display: flex; flex-direction: column; align-items: stretch; gap: 54px; }
  .identity-copy { order: 1; margin: 0; }
  .identity-copy h2 { margin-bottom: 29px; font-size: clamp(3rem, 14vw, 4rem); }
  .identity-copy .lead { font-size: 1.2rem; line-height: 1.4; }
  .identity-copy > p:last-child { font-size: .94rem; line-height: 1.5; }
  .absence { order: 2; width: min(72vw, 310px); margin: 0 auto; }

  .afterword-grid { display: block; }
  .afterword-heading { margin: 0; }
  .afterword-heading h2 { font-size: clamp(3rem, 14vw, 4rem); line-height: .94; }
  .afterword-excerpt { padding-top: 47px; }
  .afterword-excerpt blockquote p { margin-bottom: 23px; font-size: 1.1rem; line-height: 1.5; }
  .afterword-excerpt blockquote p:nth-child(2) { font-size: 1.45rem; }

  .story-act--instruction { display: block; }
  .instruction-heading { margin: 0 0 46px; }
  .instruction-letter { padding: 35px 25px; }
  .instruction-letter > p:first-child { font-size: 1.15rem; line-height: 1.42; }

  .story-act--book { display: flex; flex-direction: column; gap: 40px; }
  .book-act-cover { align-self: center; width: min(62vw, 265px); margin: 0; }
  .book-act-copy { width: 100%; }
  .book-act-intro { font-size: 1.14rem; line-height: 1.42; }
  .book-act-postscript { width: 100%; margin: 0; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: 3rem; }
  .manuscript-copy h2,
  .identity-copy h2,
  .afterword-heading h2 { font-size: 2.85rem; }
}

/* Reader overlays get their own generous, thumb-friendly mobile chrome. */
@media (max-width: 760px) {
  .reader-backdrop .reader {
    height: 100dvh;
    grid-template-rows: 72px minmax(0, 1fr);
  }

  .reader-backdrop .reader-rail {
    position: sticky;
    top: 0;
    z-index: 3;
    min-height: 72px;
    padding: 0 18px;
    background: #211a23;
  }

  .reader-backdrop .reader-rail > span {
    font-size: .62rem;
    letter-spacing: .12em;
  }

  .reader-backdrop .reader-rail button {
    width: 56px;
    height: 56px;
    border: 1px solid rgba(226, 223, 227, .58);
    background: rgba(226, 223, 227, .06);
  }

  .reader-backdrop .reader-rail button::after {
    content: "Close";
    position: absolute;
    right: 66px;
    color: rgba(226, 223, 227, .76);
    font-family: var(--sans);
    font-size: .58rem;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .reader-backdrop .reader-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 46px 24px 96px;
  }
}