/* =============================================================================
   responsive.css — breakpoints
   ≥1600 large screens · ≤1180 navigation collapses · ≤1024 tablet landscape
   ≤900 tablet / single-column layouts · ≤760 phones (purchase bar) · ≤420 small phones
   ========================================================================== */

@media (min-width: 1600px) {
  :root { --container: 1400px; }
  .hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}

/* Navigation collapses before it can crowd the Buy button */
@media (max-width: 1180px) {
  .site-nav { display: none; }
  .nav-toggle { display: block; }
  .site-header__actions { margin-left: auto; }
  .no-js .site-nav { display: block; position: absolute; top: var(--header-h); left: 0; right: 0; padding: .8rem var(--gutter); background: var(--c-night); border-bottom: 1px solid var(--line); }
  .no-js .site-nav__list { flex-wrap: wrap; gap: .4rem 1.2rem; }
  .no-js .nav-toggle { display: none; }
}

@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
  .themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .four-up { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem; }
  .remembered { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3rem; }
  .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reading-layout { grid-template-columns: minmax(0, 1fr) 240px; }
  .site-footer__grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* Single column: the title can use the full width ("NOWHERE" = 6.74em) */
  :root { --header-h: 68px; --fs-hero: clamp(2.85rem, 12.8vw, 7rem); }
  .page-hero__title { font-size: clamp(2rem, 9vw, 4.2rem); }

  .statement__grid { grid-template-columns: minmax(0, 1fr); }
  .statement__visual { justify-self: start; max-width: 340px; }
  .split, .split--wide-left, .split--wide-right,
  .buy-section__grid, .finale__inner, .book-hero__grid, .buy-page__grid,
  .contact-grid, .excerpt-feature__grid, .reading-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Hero: title, then the book, then the hook and buttons */
  .hero { align-items: flex-start; min-height: auto; padding-bottom: clamp(3rem, 8vh, 4.5rem); }
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero__copy { display: contents; }
  .hero__titles { order: 1; }
  .hero__visual { order: 2; margin-block: 1.4rem .8rem; }
  .hero__body { order: 3; }
  .hero__shade { background: linear-gradient(180deg, rgba(5, 4, 3, .85) 0%, rgba(5, 4, 3, .45) 30%, rgba(5, 4, 3, .55) 60%, var(--c-obsidian) 100%); }
  .hero__sun { right: -30vmax; top: 18%; width: 80vmax; }
  .hero__township { width: 120%; left: -30%; bottom: 20%; opacity: .32; }
  .hero__wire { bottom: 28%; }
  .hero .skyline { --sky-h: 32vh; }
  .hero__cue { display: none; }

  .about__visual { min-height: 380px; }
  .about__photo { inset: 6% 0 14% 10%; }

  /* Escalation: one column, the stage word sits behind the text */
  .escalation__word { right: var(--gutter); top: 38%; font-size: clamp(2.6rem, 13vw, 5rem); opacity: .22; }
  .stage { min-height: 55vh; padding-block: 3vh; }
  .stage__inner { margin-left: 0; max-width: none; background: rgba(5, 4, 3, .62); }
  .escalation__outro-inner { margin-left: 0; }

  .claire__portrait { max-width: 380px; margin-inline: auto; }
  .author-portrait { max-width: 260px; }
  .site-footer__grid { gap: 2rem; }
  .site-footer__nav { gap: 1.4rem 1rem; }
  .people { grid-template-columns: minmax(0, 1fr); }

  /* Departure scene becomes a banner above the copy (no text over the bright horizon) */
  .decision { display: block; min-height: 0; }
  .decision__scene { position: relative; inset: auto; height: clamp(220px, 58vw, 420px); }
  .decision__scene::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(transparent, var(--c-obsidian)); }
  .decision__shade { display: none; }
  .decision .container { padding-top: 1rem; }

  .buy-page__visual { position: relative; top: auto; padding-block: 0 1rem; }
  .reading-aside { position: relative; top: auto; }
  .excerpt-feature__grid > :first-child { position: static; }
  .details-grid { grid-template-columns: minmax(0, 1fr); }
  .synopsis { columns: 1; }
  .book-promo { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .finale__book { order: -1; }
}

@media (max-width: 760px) {
  :root { --section-y: clamp(2.5rem, 10vw, 3.5rem); }

  /* Persistent purchase bar — space is reserved so it never covers content */
  body:not(.is-focus):not(.page-buy) { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .buybar { display: flex; }

  .statement__label .kicker::before { display: none; }
  .memory-map__note { display: none; }
  .memory-map__name { font-size: 22px; letter-spacing: .08em; }
  .memory-map__compass text, .memory-map__scale text { font-size: 18px; }
  .buybar__btn .icon { display: none; }
  .header-buy { min-height: 42px; padding: .6rem .9rem; }
  .header-buy__long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .header-buy__short { display: inline; }
  .site-header__inner { gap: .8rem; }
  .hero__visual .book--xl { --w: clamp(170px, 50vw, 220px); }
  .buy-page__visual .book--xl, .book-hero__visual .book--xl, .buy-section__visual .book--xl { --w: clamp(150px, 44vw, 200px); }
  .book-hero__sub, .buy-section__sub, .finale__sub { letter-spacing: .26em; font-size: .78rem; }
  .book-hero__by, .buy-section__by, .finale__by { letter-spacing: .34em; }
  .buybar { gap: .7rem; }
  .buybar__title { font-size: .74rem; letter-spacing: .02em; font-stretch: 105%; }
  .buybar__btn { padding-inline: 1rem; letter-spacing: .14em; }
  .memory-map__svg { overflow: hidden; }
  .wordmark__name { font-size: .82rem; letter-spacing: .28em; }
  .wordmark__book { font-size: .74rem; }

  .cta-group { flex-direction: column; align-items: stretch; }
  .cta-group .btn { width: 100%; }

  .form-row { grid-template-columns: minmax(0, 1fr); }
  .site-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__book { align-items: flex-start; }
  .themes, .four-up, .channels, .journal-grid { grid-template-columns: minmax(0, 1fr); }
  .titles-list { grid-template-columns: minmax(0, 1fr); }
  .remembered { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
  .remembered p { font-size: .94rem; }
  .places li { flex-direction: column; gap: .1rem; }
  .places li span:last-child { text-align: left; }
  .pub-table th { width: 44%; }
  .smoke span:nth-child(3) { display: none; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 4.8rem; transform: none; }
  .ticker { margin-top: 2rem; }
  .first-line { padding: 1.6rem; }
}

@media (max-width: 420px) {
  .hero__subtitle { letter-spacing: .3em; }
  .hero__author { letter-spacing: .36em; }
  .remembered { gap: 1.6rem .9rem; }
  .remembered .portrait { width: min(100%, 130px) !important; }
  .remembered p { font-size: .9rem; }
  .buybar__meta { display: none; }
  .site-footer__nav { gap: 1.4rem 1rem; }
}

/* Short landscape phones: keep the hero compact */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; }
  .escalation__backdrop .skyline { --sky-h: 30vh; }
}

/* Timeline — horizontal journey on wider screens (enabled by main.js) */
@media (min-width: 900px) {
  .timeline.is-enhanced .timeline__list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding-bottom: 13.5rem;
  }
  .timeline.is-enhanced .timeline__list::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 2.15rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-strong) 6%, var(--line-strong) 94%, transparent);
  }
  .timeline.is-enhanced .timeline__item { position: static; padding: 0; }
  .timeline.is-enhanced .timeline__item::before { display: none; }
  .timeline.is-enhanced .timeline__marker {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    width: 100%;
    padding: 1.6rem .2rem 1rem;
    cursor: pointer;
  }
  .timeline.is-enhanced .timeline__dot {
    position: relative;
    left: auto; top: auto;
    width: 1.1rem; height: 1.1rem;
    opacity: .55;
    transform: scale(.75);
    transition: transform .5s var(--ease-out), opacity .5s, box-shadow .5s;
  }
  .timeline.is-enhanced .timeline__marker:hover .timeline__dot { opacity: .9; transform: scale(.95); }
  .timeline.is-enhanced .timeline__marker[aria-expanded="true"] .timeline__dot { opacity: 1; transform: scale(1.45); box-shadow: 0 0 26px rgba(251, 202, 112, .8); }
  .timeline.is-enhanced .timeline__label { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-align: center; color: var(--text-faint); transition: color .4s; }
  .timeline.is-enhanced .timeline__marker:hover .timeline__label { color: var(--text-muted); }
  .timeline.is-enhanced .timeline__marker[aria-expanded="true"] .timeline__label { color: var(--c-gold); }
  .timeline.is-enhanced .timeline__panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 12rem;
    margin: 0;
    padding: 1.5rem clamp(1.4rem, 4vw, 2.5rem);
    display: grid;
    grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(1.5rem, 4vw, 4rem);
    align-content: start;
    border: 1px solid var(--line);
    background: linear-gradient(90deg, rgba(232, 154, 75, .07), transparent 55%), rgba(5, 4, 3, .4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), visibility .5s;
  }
  .timeline.is-enhanced .timeline__panel.is-active { opacity: 1; visibility: visible; transform: none; }
  .timeline.is-enhanced .timeline__panel::before {
    content: attr(data-marker);
    grid-row: 1 / -1;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    font-weight: 900;
    font-stretch: 122%;
    line-height: .9;
    text-transform: uppercase;
    color: var(--accent);
  }
  .timeline.is-enhanced .timeline__title { grid-column: 2; }
  .timeline.is-enhanced .timeline__text { grid-column: 2; }
  .timeline.is-enhanced .timeline__source { grid-column: 2; }
}