/* Mobile overrides — single breakpoint, applies below 768px.
   Every rule here overrides an inline style set in the matching .jsx file,
   so !important is required and intentional throughout this file.
   Above 768px this file does nothing — desktop rendering is untouched. */
@media (max-width: 768px) {

  /* Shared: 32px side padding -> 20px on every section wrapper */
  .pov-shell { padding-left: 20px !important; padding-right: 20px !important; }

  /* MagazineHeader.jsx */
  .pov-header-row { grid-template-columns: 1fr !important; row-gap: 12px !important; padding-top: 14px !important; padding-bottom: 14px !important; }
  .pov-header-nav { flex-wrap: wrap !important; justify-content: center !important; gap: 14px !important; }
  .pov-header-wordmark { display: none !important; }

  /* Cover.jsx */
  .pov-cover-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .pov-cover-rail { display: none !important; }
  .pov-cover-headline { font-size: 56px !important; line-height: 1 !important; }
  .pov-cover-side { align-items: flex-start !important; margin-top: 28px !important; }
  .pov-cover-side-text { text-align: left !important; }
  .pov-cover-byline { font-size: 22px !important; }
  .pov-cover-quote { max-width: 100% !important; }
  .pov-cover-stamp { width: 84px !important; height: 84px !important; }

  /* IndexOfIssue.jsx */
  .pov-toc-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .pov-toc-headline { font-size: 34px !important; }
  .pov-toc-intro-copy { max-width: 100% !important; }
  .pov-toc-row { grid-template-columns: 1fr !important; gap: 4px !important; padding: 16px 0 !important; }
  .pov-toc-title { font-size: 20px !important; line-height: 1.25 !important; }

  /* FeaturedPOV.jsx */
  .pov-featured-top-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .pov-featured-title-col { grid-column: 1 !important; }
  .pov-featured-headline { font-size: 44px !important; }
  .pov-featured-quote-mark { font-size: 56px !important; }
  .pov-featured-quote-text { font-size: 19px !important; }
  .pov-featured-steps-grid { grid-template-columns: 1fr !important; gap: 32px !important; margin-top: 28px !important; }
  .pov-featured-step { border-right: none !important; padding-right: 0 !important; }
  .pov-featured-step:not(:last-child) { border-bottom: 1px solid rgba(251,246,239,0.4) !important; padding-bottom: 24px !important; }
  .pov-featured-step-num { font-size: 32px !important; }

  /* POVArchive.jsx */
  .pov-archive-header-row { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
  .pov-archive-headline { font-size: 38px !important; }
  .pov-archive-grid { grid-template-columns: 1fr !important; gap: 22px !important; }
  .pov-archive-card-big-title { font-size: 34px !important; line-height: 1.05 !important; }
  .pov-more-builds-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }

  /* Manifesto.jsx (DOM order unchanged: letter then portrait) */
  .pov-manifesto-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .pov-manifesto-headline { font-size: 34px !important; }
  .pov-manifesto-signature { font-size: 38px !important; }

  /* CourseLetterpress.jsx */
  .pov-course-headline { font-size: 38px !important; }
  .pov-course-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .pov-course-card { padding: 24px 20px !important; }

  /* Subscriber.jsx */
  .pov-subscriber-grid { grid-template-columns: 1fr !important; }
  .pov-subscriber-left { padding: 32px 20px !important; }
  .pov-subscriber-headline { font-size: 32px !important; }
  .pov-subscriber-form { flex-direction: column !important; gap: 10px !important; }
  .pov-subscriber-submit { width: 100% !important; justify-content: center !important; }
  .pov-subscriber-right { padding: 22px 18px !important; border-top: none !important; }
  .pov-subscriber-perf {
    left: 12px !important; right: 12px !important; top: -1px !important; bottom: auto !important;
    border-left: none !important; border-top: 2px dashed #1A1714 !important;
  }
  .pov-subscriber-stamp { width: 64px !important; height: 64px !important; }
  .pov-subscriber-script { font-size: 26px !important; }

  /* Colophon.jsx (DOM order unchanged: brand, then WORK, SERVICES, CONTACT) */
  .pov-colophon-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .pov-colophon-wordmark-tag { font-size: 18px !important; }
  .pov-colophon-wordmark-name { font-size: 32px !important; }
}