/* ==========================================================================
   Responsive layout
   ========================================================================== */

/* Large laptops */
@media (max-width: 1180px) {
    .reasons__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
    .primary-nav__list { gap: 1.25rem; }
    .brand__author { display: none; }
}

/* Tablets & small laptops */
@media (max-width: 1023px) {
    :root { --header-h: 70px; }

    .primary-nav, .site-header__buy { display: none; }
    .menu-toggle { display: block; }
    .brand__author { display: flex; }

    .hero { padding-top: calc(var(--header-h) + 1.25rem); padding-bottom: 3rem; text-align: center; }
    .hero__inner { grid-template-columns: 1fr; }
    .hero__copy { order: 2; display: flex; flex-direction: column; align-items: center; }
    .hero__book { order: 1; }
    .hero__title-top, .hero__title-main { transform-origin: bottom center; }
    .hero__title-main { transform-origin: top center; }
    .hero__actions, .hero__meta { justify-content: center; }
    .hero__text { margin-inline: auto; }
    .book3d--lg { --bw: clamp(200px, 42vw, 300px); }

    .intro__grid, .showcase__grid, .author-teaser__grid, .final-cta__inner,
    .book-hero__grid, .buy-hero__grid, .split, .contact-grid, .reader-wrap { grid-template-columns: 1fr; }
    .intro__art { max-width: 320px; }
    .showcase__art { max-width: 340px; }
    .author-portrait { max-width: 340px; }
    .final-cta__inner { text-align: center; }
    .final-cta__text { margin-inline: auto; }
    .book3d--md { --bw: clamp(190px, 40vw, 260px); }

    .panel { min-height: 420px; }
    .panel__num { font-size: 2.6rem; }
    .panel__title { font-size: clamp(1.05rem, 0.6rem + 1.4vw, 1.35rem); }
    .panel__body { padding: 1.1rem; }
    .panel p { font-size: 0.9rem; }

    .casefile { grid-template-columns: 1fr; gap: 1.25rem; padding: 0 0 0 2rem; }
    .casefile::before { left: 0; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, var(--crimson), var(--metal) 50%, transparent); }
    .casefile li::before { top: 0.15rem; left: calc(-2rem - 5px); }

    .sticky-aside, .reader-tools { position: static; }
    .reader-tools { order: -1; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    .reader-buy { display: none; }

    .steps { grid-template-columns: 1fr; }
    .buy-bar { display: flex; }
    body { padding-bottom: 0; }
    .site-footer { padding-bottom: 5.5rem; }
}

/* Narrow tablets / large phones: stack the story panels */
@media (max-width: 699px) {
    .panels { grid-template-columns: 1fr; }
    .panel { min-height: 320px; }
    .panel__title { font-size: 1.4rem; }
    .panel__body { padding: 1.35rem; }
}

/* Phones */
@media (max-width: 640px) {
    :root { --gutter: 1rem; --header-h: 64px; }
    body { font-size: 1rem; }

    .brand__main { font-size: 1.3rem; }
    .brand__top { font-size: 0.55rem; }
    .brand__author { font-size: 0.55rem; padding-left: 0.7rem; letter-spacing: 0.24em; }

    .hero__actions { flex-direction: column; width: 100%; }
    .hero__actions .btn { width: 100%; }
    .hero__meta { flex-direction: column; align-items: center; gap: 0.45rem; font-size: 0.64rem; }
    .hero__meta li + li::before { display: none; }
    .scroll-cue { display: none; }

    .btn-row { flex-direction: column; align-items: stretch; }
    .btn-row .btn { width: 100%; }
    .btn { white-space: normal; text-align: center; line-height: 1.3; }
    .btn--text { justify-content: center; }
    .buy-bar .btn, .site-header .btn { white-space: nowrap; }

    /* Keep small uppercase labels legible on phones */
    .eyebrow, .hero__meta, .casefile__date, .intro__caption, .retailer__hint, .author-portrait__label,
    .journey__when, .character__role, .specs dt, .mini-specs dt, .breadcrumb, .final-cta__formats,
    .reader-chapter__num, .content-note__title, .faq-group__title, .format-tab__label { font-size: 0.72rem; }
    .brand__top { font-size: 0.6rem; }
    .brand__author { font-size: 0.6rem; }
    .btn--xl { white-space: normal; text-align: center; }

    .reasons__grid { grid-template-columns: 1fr; }
    .panels { grid-template-columns: 1fr; }
    .panel { min-height: 320px; }
    .retailers { grid-template-columns: 1fr; }
    .purchase__isbn { margin-left: 0; }
    .form__row { grid-template-columns: 1fr; }
    .site-footer__cta { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 1rem; }
    .site-footer__grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .site-footer__legal { flex-direction: column; align-items: flex-start; }
    .author-portrait::before { inset: 0.75rem -0.75rem -0.75rem 0.75rem; }
    .quote-band blockquote p { font-size: 1.65rem; }
    .content-note { flex-direction: column; gap: 0.5rem; }
    .reader-chapter > p:first-of-type::first-letter { font-size: 3.6em; }
    .specs { grid-template-columns: 1fr 1fr; }
    .final-cta__actions .btn { width: 100%; }

    /* Legal tables become stacked cards */
    .legal table, .legal tbody, .legal tr, .legal td { display: block; width: 100%; }
    .legal thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .legal tr { margin-bottom: 0.75rem; border: 1px solid var(--metal); border-radius: var(--radius); overflow: hidden; }
    .legal td { border: 0; border-bottom: 1px solid rgba(52, 56, 59, 0.6); }
    .legal td:last-child { border-bottom: 0; }
    .legal td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 0.2rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red-text); }
}

/* Small phones */
@media (max-width: 380px) {
    .brand__author { display: none; }
    .specs { grid-template-columns: 1fr; }
    .buy-bar__text span { display: none; }
}

/* Short landscape screens */
@media (max-height: 560px) and (orientation: landscape) and (max-width: 1023px) {
    .hero { min-height: auto; }
    .book3d--lg { --bw: 180px; }
}

/* Print: plain, ink-friendly */
@media print {
    .site-header, .site-footer, .buy-bar, .consent, .page-curtain, .hero__bg, .fog, .grain, .reader-tools, .reader-progress { display: none !important; }
    body { background: #fff; color: #000; }
    h1, h2, h3, .reader { color: #000; }
}