/* ============================================================================
   FOLIO — responsive
   Desktop-first. Breakpoints: 1100 · 900 · 760 · 600 · 420
   ========================================================================== */

/* ===== 1100px ===== */
@media (max-width: 1100px) {
    .covers-grid { grid-template-columns: repeat(3, 1fr); }
    .story-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== 900px — tablet ===== */
@media (max-width: 900px) {
    .section { padding: 4.5rem 0; }
    :root { --space-xl: 4.5rem; }

    .cover-grid { grid-template-columns: 1fr; }
    .cover-rail {
        border-left: 0;
        padding-left: 0;
        border-top: 3px double var(--color-ink);
        padding-top: 1.6rem;
    }
    .rail-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1.5rem; }
    .rail-item { border-bottom: 1px solid var(--color-line); padding: 1rem 0; }

    .story-grid { gap: 2rem 1.5rem; }
    .letters-grid { grid-template-columns: 1fr; }
    .values-grid { grid-template-columns: repeat(2, 1fr); }
    .team-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.2rem; }
    .sunday-grid { grid-template-columns: 1fr; gap: 1.8rem; }

    .story-row { grid-template-columns: 1fr; gap: 0.4rem 1.5rem; }
    .story-row .sr-section { grid-column: 1 / -1; }
    .story-row .sr-main { grid-column: 1 / -1; }
    .story-row .sr-meta { grid-column: 1 / -1; text-align: left; display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; }
    .story-row .sr-meta span { display: inline; }
    .story-row .sr-meta .read { margin-top: 0; }
}

/* ===== 760px — nav collapses ===== */
@media (max-width: 760px) {
    .section-nav { display: none; }
    .nav-toggle { display: inline-flex; }
    .section-subscribe span { display: none; }
    .section-subscribe { padding-left: 1rem; }

    .utility-tagline { display: none; }
    .masthead { padding: 1.6rem 0 1.2rem; }

    .story-grid { grid-template-columns: 1fr; }
    .covers-grid { grid-template-columns: repeat(2, 1fr); }
    .form-grid { grid-template-columns: 1fr; }
    .form-field--full { grid-column: auto; }
    .contact-grid { grid-template-columns: 1fr; }
}

/* ===== 600px — large phone ===== */
@media (max-width: 600px) {
    :root { --space-xl: 3.5rem; }
    .masthead-wordmark { font-size: clamp(2.4rem, 11vw, 3.4rem); gap: 1rem; }
    .masthead-dateline { letter-spacing: 0.2em; font-size: 0.62rem; }
    .utility-actions .utility-link { display: none; }
    .utility-date { font-size: 0.62rem; }

    .cover-actions .btn, .hero-actions .btn { width: 100%; }
    .rail-items { grid-template-columns: 1fr; }

    .stats-row { grid-template-columns: repeat(2, 1fr); }
    .values-grid { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: 1fr; }

    .sunday-row { flex-direction: column; }
    .sunday-row .btn { width: 100%; }

    .story-row { grid-template-columns: 1fr; }
    .story-row .sr-section { grid-column: 1 / -1; }

    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-demo { margin-inline: auto; }

    .accordion-btn { font-size: 1.15rem; }
}

/* ===== 420px — small phone ===== */
@media (max-width: 420px) {
    .covers-grid { grid-template-columns: 1fr; }
    .block-head { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
}