/* The prototypes were built at desktop width and did not collapse. Most real
   traffic is a phone on a Friday afternoon, so this file is load-bearing.
   Breakpoint is 860px throughout — matching the sibling Kind Kitchen site.
   Load this LAST. */

/* ------------------------------------------------------------- ≤1080px ---- */
@media (max-width: 1080px) {
  :root { --gutter: 32px; }

  .section { padding-top: 72px; padding-bottom: 72px; }
  .status-hero .shell,
  .about-hero .shell { gap: 48px; }
  .split, .explainer .shell { gap: 48px; }
  .membership .shell { gap: 56px; }
  .callout { padding: 56px 40px; }
}

/* -------------------------------------------------------------- ≤860px ---- */
@media (max-width: 860px) {
  :root { --gutter: 24px; }

  h2 { font-size: 34px; }
  .membership-intro h2 { font-size: 36px; }

  /* Header: the four nav items are short, so they wrap rather than collapsing
     into a hamburger. Donate moves up beside the wordmark so the primary ask
     is never below the fold of the bar. */
  .site-header .shell {
    flex-wrap: wrap;
    gap: 14px 20px;
    padding-top: 18px;
    padding-bottom: 18px;
  }
  .wordmark-text { font-size: 19px; }
  .site-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    gap: 16px 22px;
  }
  .site-nav a { font-size: 12px; letter-spacing: 0.16em; }
  .header-donate {
    margin-left: auto;
    padding: 9px 18px;
    font-size: 12px;
    letter-spacing: 0.16em;
  }

  /* Status hero: the headline comes first and the photo follows it. The word
     is what people came for. */
  .status-hero .shell {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-top: 56px;
    padding-bottom: 60px;
  }
  .status-sub { font-size: 22px; margin-top: 28px; }
  .status-verified { margin-top: 34px; }
  .hero-photo .arch-frame { width: min(300px, 72vw); }

  .alerts .shell,
  .explainer .shell,
  .split,
  .membership .shell,
  .about-hero .shell {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .alerts .shell { padding-top: 56px; padding-bottom: 56px; }
  .alert-fields { grid-template-columns: 1fr; gap: 24px; }

  /* The big arch marker reads as clutter once it is stacked above the copy
     rather than beside it. */
  .explainer .arch-marker { display: none; }
  .explainer-body { max-width: none; }

  .map-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  #eruv-map { height: 380px; }

  .membership .shell { padding-top: 64px; padding-bottom: 68px; }
  /* Sticky is meaningless in one column and strands the heading mid-scroll. */
  .membership-intro { position: static; }

  /* Name and amount stay on one row; the blurb and "Choose" wrap beneath. */
  .tier, .tier-custom { gap: 10px 24px; padding: 22px 0; }
  .tier-name, .tier-amount { font-size: 26px; }
  .tier-blurb { grid-column: 1 / -1; max-width: none; }
  .tier-choose { grid-column: 1 / -1; text-align: left; }
  .amount-entry .currency, .amount-entry input { font-size: 26px; }

  .about-hero .shell { padding-top: 56px; padding-bottom: 48px; }
  .about-sub { font-size: 21px; }
  .about-photo .arch-frame { width: min(280px, 66vw); }

  .callout { padding: 48px 28px; }
  .pull-quote { font-size: 19px; }

  .site-footer .shell {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
  }
}

/* -------------------------------------------------------------- ≤520px ---- */
@media (max-width: 520px) {
  :root { --gutter: 20px; }

  .status-verified { flex-direction: column; gap: 18px; }

  /* On the narrowest screens the arch photo is decoration competing with the
     one sentence the site exists to deliver. Drop it. */
  .hero-photo { display: none; }

  .channel-choice { gap: 14px 20px; }
  .btn-solid { padding: 15px 30px; }
  .tier-name, .tier-amount { font-size: 23px; }
  .amount-entry .currency, .amount-entry input { font-size: 23px; }
  .form-success { font-size: 22px; }
  .callout { padding: 40px 20px; }
}

/* --------------------------------------------------------------- print ---- */
/* Someone printing this is printing the boundary or the status for the fridge. */
@media print {
  :root { --forest: #fff; --cream: #000; }
  body { background: #fff; color: #000; }
  .site-header, .site-footer, .alerts, .membership, .header-donate { display: none; }
  .status-hero { background-image: none; }
}

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