/* =====================================================================
   THE SWITCH — responsive.css
   Mobile-first breakpoints: 480 · 768 · 1024 · 1440
   ===================================================================== */

/* ---------- ≥ 480px ---------- */
@media (min-width: 480px) {
  :root { --gutter: 24px; }

  .form__row { grid-template-columns: 1fr 1fr; }

  .btn { white-space: nowrap; }
  .btn-row > .btn, .hero__ctas > .btn { flex: 0 0 auto; padding-block: 0; line-height: 1; }
  .hero__ctas { max-width: none; }
  .hero__formats { font-size: .64rem; letter-spacing: .3em; }
  .modal__body { padding: 44px 28px 32px; }
  .contact-card { padding: 30px 26px; }
  .download { grid-template-columns: 84px 1fr; gap: 18px; }
  .ghost-book { gap: 22px; }

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

  .trust { grid-template-columns: repeat(3, auto); justify-content: space-between; }

  .sticky-buy__thumb { width: 38px; }
}

/* ---------- ≥ 768px ---------- */
@media (min-width: 768px) {
  :root { --gutter: 36px; --header-h: 76px; }

  body { font-size: 1.1875rem; }

  .prose { font-size: 1.25rem; }
  .portrait::before { inset: 18px -18px -18px 18px; }
  .tabs__list { display: flex; overflow-x: auto; }
  .tab { padding: 18px 18px 16px; }
  .journey__pin-label { font-size: 31px; }
  .journey__grid text, .journey__sea text { display: inline; }

  .book3d { --w: 300px; --t: 36px; }

  .story__grid { grid-template-columns: 5fr 7fr; gap: 56px; }
  .story__book { padding-bottom: 0; }

  .formats__grid { grid-template-columns: repeat(4, 1fr); }
  .format-card { padding: 32px 26px 28px; gap: 8px; }
  .format-card .icon { width: 34px; height: 34px; margin-bottom: 10px; }
  .format-card .link-arrow { padding-top: 14px; }

  .cards { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  .retailer-grid { grid-template-columns: repeat(2, 1fr); }
  .retailer { display: flex; flex-direction: column; gap: 6px; padding: 26px 22px 22px; }
  .retailer__price { font-size: 2.3rem; margin: 14px 0 16px; }
  .retailer .btn { margin-top: auto; min-height: 52px; }
  .review-grid { grid-template-columns: repeat(3, 1fr); }

  .bundle { grid-template-columns: 1.3fr 1fr; padding: 40px; }

  .modal__grid { grid-template-columns: 280px 1fr; }
  .modal__book { display: grid; }
  .modal__body { padding: 52px 44px 40px; }

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

  .site-footer { padding-bottom: 32px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
  .social { width: auto; }

  .sticky-buy { bottom: 18px; }
  .sticky-buy__inner { padding: 10px 10px 10px 12px; gap: 16px; }

  .ghost-book { grid-template-columns: 110px 1fr; }
  .also-by { grid-template-columns: 1fr 1fr; }

  .continue { padding-inline: 0; }

  .motif--ticket { display: block; }
  .contact__grid > aside { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: start; }
  .contact__grid > aside .contact-card + .contact-card { margin-top: 0; }
  .motif--clock { right: -12%; }
  .motif--clock.motif--left { left: -12%; }
}

/* ---------- ≥ 1024px ---------- */
@media (min-width: 1024px) {
  :root { --gutter: 48px; }

  /* Desktop navigation: inline links with gold underline draw-in */
  .nav-toggle, .site-header__buy { display: none; }
  .site-nav {
    position: static;
    inset: auto;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    padding: 0;
    background: none;
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  .site-nav__list { display: flex; gap: 34px; }
  .site-nav__link {
    padding: 6px 0;
    font: 500 .7rem var(--font-sans);
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--color-cream);
  }
  .site-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--color-gold);
    transform: scaleX(0);
    transform-origin: left;
  }
  .site-nav__link:hover::after,
  .site-nav__link:focus-visible::after,
  .site-nav__link[aria-current="page"]::after { transform: scaleX(1); }
  .site-nav__link:hover, .site-nav__link[aria-current="page"] { color: var(--color-cream); }
  .site-nav__foot { display: none; }
  .nav-open { overflow: auto; }

  .book3d { --w: 340px; --t: 40px; }
  .book3d--sm { --w: 200px; --t: 24px; }
  .book3d--md { --w: 300px; --t: 34px; }

  .journey { grid-template-columns: 7fr 5fr; gap: 48px; align-items: center; }
  .journey--full { grid-template-columns: 6fr 5fr; }

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

  .book-hero__grid { grid-template-columns: 5fr 7fr; gap: 64px; }
  .author-hero__grid { grid-template-columns: 5fr 6fr; gap: 64px; }
  .bio { grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; }

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

  .contact__grid { grid-template-columns: 7fr 4fr; gap: 56px; align-items: start; }
  .contact__grid > aside { display: block; }
  .contact__grid > aside .contact-card + .contact-card { margin-top: 16px; }

  .site-footer__grid { grid-template-columns: 1.3fr .7fr 1fr; gap: 48px; }
  .site-footer__brand { grid-column: auto; }

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

/* ---------- ≥ 1440px ---------- */
@media (min-width: 1440px) {
  :root { --gutter: 56px; --maxw: 1320px; }

  body { font-size: 1.25rem; }

  .book3d { --w: 380px; --t: 44px; }

  .hero__switch { letter-spacing: .03em; }

  .formats__grid .format-card { padding: 40px 32px 34px; }
}

/* ---------- Desktop pointer: custom cursor ---------- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .cursor { display: block; }
}

/* ---------- Short landscape phones ---------- */
@media (max-height: 720px) {
  .scroll-cue { display: none; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: 640px; }
  .scroll-cue { display: none; }
}

/* ---------- Print: keep the excerpt readable ---------- */
@media print {
  .site-header, .site-footer, .sticky-buy, .grain, .cursor, .preloader, .reading-progress { display: none !important; }
  body, .reading { background: #fff; color: #000; }
  .prose__fade::after { display: none; }
}