/* =========================================================================
   responsive.css — breakpoint behaviour
   Layouts are authored desktop-first for the large editorial compositions and
   deliberately re-composed (not merely shrunk) at each step down.
   Load order: main.css → responsive.css → animations.css
   ========================================================================= */

/* -------------------------------------------------------------------------
   Large desktop — give the widest screens more air, not just more width
   ---------------------------------------------------------------------- */

@media (min-width: 1600px) {
  :root {
    --w-page: 1280px;
    --w-wide: 1460px;
    --section-y: 4rem;
  }
  .hero__book { --book-w: 430px; }
}

/* -------------------------------------------------------------------------
   Laptop — 1180px and below
   ---------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .site-footer__top { grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
  .book-layout { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .theme-row { grid-template-columns: auto minmax(0, 1fr); }
  .theme-row__body { grid-column: 2; }
}

/* -------------------------------------------------------------------------
   Tablet landscape — 1024px and below
   Navigation collapses here: eight top-level links plus a purchase button
   stop fitting comfortably before the layout does.
   ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .nav__list,
  .header-cta { display: none; }
  .nav-toggle { display: inline-flex; }

  .hero { min-height: auto; }
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.75rem, 6vw, 4rem);
  }
  .hero__body { order: 1; }
  .hero__book-wrap { order: 2; justify-self: center; }
  .hero__book { --book-w: min(66vw, 330px); }
  .hero__copy { max-width: 52ch; }
  .hero__rail { display: none; }
  .hero__ghost { font-size: clamp(11rem, 58vw, 22rem); opacity: 0.7; }
  .scroll-cue { display: none; }

  .statement__grid,
  .feature-book,
  .author-intro,
  .final-cta,
  .journal-featured,
  .contact-layout,
  .buy-hero__grid,
  .newsletter,
  .split,
  .split--wide-left,
  .split--wide-right {
    grid-template-columns: minmax(0, 1fr);
  }
  .statement__grid { gap: 1.75rem; }
  .feature-book { --book-w: min(66vw, 330px); }
  .feature-book__media,
  .final-cta__book,
  .buy-hero__book { justify-self: center; width: 100%; max-width: var(--book-w); }

  .book-layout { grid-template-columns: minmax(0, 1fr); }
  .book-layout__aside { justify-self: center; max-width: 30rem; width: 100%; }
  .sticky-col { position: static; }

  .legal { grid-template-columns: minmax(0, 1fr); }
  .legal__toc {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    padding-bottom: 0.75rem;
    gap: 1.25rem;
  }
  .legal__toc a { border-left: 0; padding-left: 0; border-bottom: 1px solid var(--rule); padding-bottom: 0.4rem; white-space: nowrap; }

  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------------------
   Tablet portrait — 860px and below
   ---------------------------------------------------------------------- */

@media (max-width: 860px) {
  :root { --section-y: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); }

  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .book-card {
    --book-w: 13rem;
    gap: 1.75rem;
  }

  .media-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
  }
  .media-item__action { justify-self: start; }

  .site-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
  }

  .newsletter { padding: clamp(1.75rem, 5vw, 2.5rem); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------------------
   Large mobile — 640px and below
   Decorative density drops; the book stays prominent.
   ---------------------------------------------------------------------- */

@media (max-width: 640px) {
  :root {
    --gutter: 1.25rem;
    --lh-body: 1.68;
  }

  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: minmax(0, 1fr); }

  .hero { padding-top: 6.5rem; }
  .hero__book { --book-w: min(74vw, 290px); }
  .hero__meta { gap: 0.5rem 1.25rem; }
  .hero__arch { display: none; }

  .book-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
  .book-card { --book-w: min(60vw, 15rem); }
  .book-card__media { max-width: var(--book-w); }

  .theme-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
  }
  .theme-row .numeral { font-size: 2.35rem; }

  .book-brief__list > div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }

  .numbered__item { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }

  .author-note { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .author-note__mark { width: 62px; height: 62px; }

  .facts { grid-template-columns: minmax(0, 1fr); }

  .review--featured { padding: 1.75rem 1.35rem; }

  /* Sideways reveals push content past a narrow viewport; rise instead */
  [data-reveal="left"]:not(.is-in),
  [data-reveal="right"]:not(.is-in) { transform: translate3d(0, 26px, 0); }

  /* Decoration is reduced rather than removed — enough to keep the character */
  .decor-word { font-size: clamp(8rem, 46vw, 13rem); opacity: 0.4; }
  .decor-arch { display: none; }
  .hero-leaves-tr { display: none; }
  .hero-church { opacity: 0.1; right: -18%; }
  .page-edges::before,
  .page-edges::after { display: none; }

  /* Compact bottom purchase bar */
  .buy-bar {
    left: 0; right: 0;
    bottom: 0;
    width: 100%;
    transform: translateY(140%);
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 0.65rem 0.75rem;
    gap: 0.75rem;
  }
  .buy-bar.is-visible { transform: translateY(0); }
  .buy-bar__cover { width: 34px; }
  .buy-bar__sub { display: none; }
  .buy-bar .btn { padding-inline: 1.1rem; }

  .site-footer__top { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .site-footer__bottom { justify-content: flex-start; }

  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .link-arrow { justify-content: center; margin-top: 0.5rem; }
  .buy-bar .btn,
  .newsletter__form .btn,
  .nav-toggle,
  .filter,
  .share a,
  .share button { width: auto; }
}

/* -------------------------------------------------------------------------
   Small mobile — 380px and below (iPhone SE / 320–375 class devices)
   ---------------------------------------------------------------------- */

@media (max-width: 380px) {
  :root { --gutter: 1rem; }
  .hero__book { --book-w: 76vw; }
  .mobile-nav__link { font-size: 1.75rem; }
  .mobile-nav__body { gap: 0; }
  .brand__sub { letter-spacing: 0.2em; font-size: 0.55rem; }
  .buy-bar__title { font-size: 0.92rem; }
  .empty-state { padding: 2rem 1.25rem; }
}

/* -------------------------------------------------------------------------
   Short viewports — keep the mobile menu usable in landscape
   ---------------------------------------------------------------------- */

@media (max-height: 560px) and (max-width: 1024px) {
  .mobile-nav__body { justify-content: flex-start; padding-block: 1.25rem; }
  .mobile-nav__link { font-size: 1.5rem; padding-block: 0.3rem; }
  .mobile-nav__book { display: none; }
}

/* -------------------------------------------------------------------------
   Pointer capability
   The book's pointer-tracked perspective is a fine-pointer enhancement only.
   ---------------------------------------------------------------------- */

@media (hover: none) or (pointer: coarse) {
  .book { transition: none; }
  .card:hover .card__media img { transform: none; }
}

/* -------------------------------------------------------------------------
   Print — a clean reading copy
   ---------------------------------------------------------------------- */

@media print {
  .site-header,
  .mobile-nav,
  .buy-bar,
  .read-progress,
  .scroll-cue,
  .decor,
  .site-footer__top .socials { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .section, .page-hero, .hero { padding-block: 1.5rem; background: #fff !important; color: #000 !important; }
  .page-hero h1, .hero__title, h1, h2, h3 { color: #000 !important; }
  a { text-decoration: underline; }
  .btn { border: 1px solid #000; color: #000 !important; background: none !important; }
}