/* ==========================================================================
   RESPONSIVE ADJUSTMENTS — Mobile-first overrides
   ========================================================================== */

/* ── Mobile Layout (< 640px) ─────────────────────────────────────────────── */
@media (max-width: 639px) {
  .section-card:nth-child(5) {
    grid-column: span 2;
    max-width: 240px;
    margin: 0 auto;
    width: 100%;
  }
}

/* ── Very Small Screens (< 400px) ────────────────────────────────────────── */
@media (max-width: 400px) {
  :root {
    --space-sm: 0.75rem;
    --space-md: 1.1rem;
    --space-lg: 1.8rem;
  }

  .sections-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }

  .section-card {
    padding: var(--space-xs);
  }

  .medallion-icon-circle {
    width: 48px;
    height: 48px;
  }

  .parchment-sheet {
    padding: 1.5rem 1rem;
  }

  .splash-bonnet-svg {
    width: 200px;
  }
}

/* ── Tablets (640px - 1023px) ────────────────────────────────────────────── */
@media (min-width: 640px) and (max-width: 1023px) {
  .hero-section {
    padding: var(--space-lg) 0;
  }

  .writing-list {
    grid-template-columns: 1fr;
  }
}

/* ── Desktop (≥ 1024px) ──────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .site-main {
    padding: 0 var(--space-md);
  }

  .parchment-sheet {
    margin: var(--space-md) auto;
  }
}

/* ── Print Styles ────────────────────────────────────────────────────────── */
@media print {
  .splash-screen,
  .site-header,
  .site-footer,
  .writing-controls,
  .post-nav,
  .font-toggle {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
  }

  .parchment-sheet {
    box-shadow: none !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
  }
}