/* ==========================================================================
   Conspiratees — Responsive Styles
   Breakpoints:
     Tablet : max-width 1024px
     Mobile : max-width 768px
     Small  : max-width 480px
   ========================================================================== */


/* ==========================================================================
   TABLET (≤ 1024px)
   ========================================================================== */

@media (max-width: 1024px) {

  /* Section heads */
  .ct-section__head {
    padding: 48px 48px 24px;
    gap: 20px;
  }
  .ct-section__title { font-size: 64px; }

  /* Hero */
  .ct-hero { padding: 64px 48px 72px; min-height: 600px; }
  .ct-hero__title { font-size: 72px; }
  .ct-hero__inner { gap: 40px; }

  /* Products */
  .ct-prod__grid { padding: 0 48px; }
  .ct-pcard__op { font-size: 18px; }
  .ct-pcard__tee-print { font-size: 48px; }

  /* Archive */
  .ct-archive__grid { padding: 40px 48px 72px; gap: 20px; }
  .ct-fcard__title { font-size: 30px; }

  /* QR */
  .ct-qr { padding: 72px 48px; }
  .ct-qr__title { font-size: 64px; }
  .ct-qr__inner { gap: 48px; }

  /* Submit */
  .ct-submit { padding: 72px 48px; }
  .ct-submit__title { font-size: 64px; }
  .ct-submit__inner { gap: 48px; }

  /* Footer */
  .ct-footer { padding: 56px 48px 24px; }
  .ct-footer__inner { gap: 48px; }
  .ct-footer__wordmark { font-size: 36px; }
  .ct-footer__cols { gap: 24px; }
}


/* ==========================================================================
   MOBILE (≤ 768px)
   ========================================================================== */

@media (max-width: 768px) {

  /* --- Header --- */
  .ct-header__inner {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 0;
    padding: 12px 20px;
  }
  .ct-header__brand { grid-column: 1; grid-row: 1; }
  .ct-header__util  { grid-column: 2; grid-row: 1; }
  .ct-header__fileno { display: none; } /* hide file number on mobile */

  /* Nav collapses — toggled by JS via ct-header__nav--open */
  .ct-header__nav {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dur-slow) var(--ease);
    border-top: 0 solid var(--border-dark);
  }
  .ct-header__nav--open {
    max-height: 300px;
    border-top-width: 1px;
    padding: 12px 0;
  }
  .ct-header__nav a {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-dark);
  }
  .ct-header__nav a:last-child { border-bottom: none; }

  /* Mobile nav toggle — show on mobile */
  .ct-nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-left: 16px;
  }
  .ct-nav-toggle span {
    display: block;
    width: 22px;
    height: 1px;
    background: var(--bone);
    transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
  }

  /* --- Section heads --- */
  .ct-section__head {
    flex-direction: column;
    gap: 8px;
    padding: 40px 20px 20px;
  }
  .ct-section__title { font-size: 48px; }
  .ct-section__link  { align-self: flex-start; }

  /* --- Hero --- */
  .ct-hero {
    padding: 48px 20px 56px;
    min-height: auto;
  }
  .ct-hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ct-hero__title { font-size: 56px; margin-bottom: 28px; }
  .ct-hero__lede  { font-size: var(--t-mono-md); max-width: 100%; }
  .ct-hero__ctas  { flex-direction: column; gap: 10px; }
  .ct-hero__ctas .ds-btn { text-align: center; justify-content: center; }

  /* Hero art — scale down on mobile */
  .ct-hero__art { max-width: 320px; margin: 0 auto; width: 100%; }
  .ct-hero__art-tee-print-name { font-size: 24px; }

  /* --- Featured products: 2 columns on mobile --- */
  .ct-prod__grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 20px;
  }
  .ct-pcard { padding: 20px 16px 16px; }
  .ct-pcard__op { font-size: 15px; }
  .ct-pcard__tee-print { font-size: 40px; }

  /* --- Archive: 1 column on mobile --- */
  .ct-archive__grid {
    grid-template-columns: 1fr;
    padding: 32px 20px 56px;
    gap: 32px;
  }

  /* --- QR callout: stack vertically --- */
  .ct-qr { padding: 56px 20px; }
  .ct-qr__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ct-qr__title { font-size: 48px; }
  .ct-qr__lede  { font-size: var(--t-mono-md); max-width: 100%; }

  /* --- Submit: stack vertically --- */
  .ct-submit { padding: 56px 20px; }
  .ct-submit__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ct-submit__title { font-size: 48px; }
  .ct-submit__form {
    grid-template-columns: 1fr;
    padding: 24px 20px;
  }
  .ct-field--wide { grid-column: 1; }
  .ct-submit__actions { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* --- Footer: stack vertically --- */
  .ct-footer { padding: 48px 20px 24px; }
  .ct-footer__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ct-footer__wordmark { font-size: 32px; }
  .ct-footer__cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 20px;
  }
  .ct-footer__bar {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
}


/* ==========================================================================
   SMALL MOBILE (≤ 480px)
   ========================================================================== */

@media (max-width: 480px) {

  /* Further type reduction */
  .ct-section__title { font-size: 40px; }
  .ct-hero__title    { font-size: 44px; }
  .ct-qr__title      { font-size: 38px; }
  .ct-submit__title  { font-size: 38px; }

  /* Products: single column on small phones */
  .ct-prod__grid { grid-template-columns: 1fr; }

  /* Footer: single column */
  .ct-footer__cols { grid-template-columns: 1fr; }

  /* Buttons full width */
  .ct-hero__ctas .ds-btn { width: 100%; }

  /* Crop marks — hide on small screens, they clip oddly */
  .ct-hero__crop { display: none; }
}


/* ==========================================================================
   UTILITY — hide nav toggle on desktop
   ========================================================================== */

@media (min-width: 769px) {
  .ct-nav-toggle { display: none; }
}


/* ==========================================================================
   REDUCED MOTION — respect user preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}