/* ══ THE HOMEPAGE ON A PHONE, 16 Oct 2026 ═══════════════════════════════════
   Daniel: "Now use design critique on mobile to make extremely mobile
   friendly", then "yes". Review: yoked/REVIEW-2026-10-16-mobile-homepage.md.
   Loaded after main.css and hero.css, phone widths only, so desktop is
   untouched. What it does:
     1. Tighter section spacing (the page was ~11 thumb scrolls).
     2. A shorter hero phone, the note still fully readable.
     3. Long paragraphs left aligned (rule, know someone, footer notes).
     4. Event chips wrap; the sideways ticker is gone (Daniel: no marquees
        or tickers anywhere he ships).
     5. Every link and button a 44px thumb target.
     6. 13px minimum for real text.
     7. A shorter, tidier footer.
   ⚠️ NOT TOUCHED: the Texas dating safety disclosure box in the footer (bold
   capital heading is the law, see the note in index.html). No sticky bottom
   Apply bar (Daniel, 3 Oct). No copy changes. */

@media (max-width: 640px) {

  /* ── 1. rhythm ── */
  .manifesto { padding: 56px 0; }
  .how, .founders, .events, .plans, .membership, .different { padding-top: 56px; padding-bottom: 56px; }
  .rule, .nominate { padding-top: 56px; padding-bottom: 56px; }
  .safety { padding-top: 52px; padding-bottom: 60px; }
  .postscript { padding-top: 44px; padding-bottom: 44px; }
  .sec-head { margin-bottom: 28px; }
  .manifesto .foot { margin-top: 18px; }
  .founders-grid { gap: 26px; }
  .events .note { margin-top: 24px; }
  footer { padding: 40px 0 28px; }
  .std { padding: 18px 0; gap: 16px; }
  .std h4 { font-size: 1.15rem; margin-bottom: 4px; }
  .std p { line-height: 1.6; }
  .step { padding: 20px 18px; }
  .step h3 { margin-bottom: 6px; }
  .member-inner { padding: 28px 20px; }
  .member-list { margin: 18px 0 22px; }
  .foot-grid img { height: 40px; }

  /* ── 3. read left to right ──
     Centered text is fine for a headline and hard work for a paragraph in a
     narrow column. The two sections that are mostly paragraphs go fully left
     aligned (kicker, headline and copy together, so nothing looks orphaned). */
  .rule, .nominate { text-align: left; }
  .rule h2, .nominate h2 { text-align: left; }
  .rule-lead, .rule-sub, .rule-fine,
  .nominate > .wrap > p, .nominate-inner > p, .nom-foot { text-align: left; margin-left: 0; margin-right: 0; }
  .nominate-inner { text-align: left; }
  .nom-foot { max-width: none; margin-top: 28px !important; }
  .rule-sub, .nominate-inner > p:not(.nom-foot) { max-width: none; }
  .foot-legal { text-align: left; }

  /* ── 4. event chips: wrap, no ticker ── */
  .events { overflow: visible; }
  .event-chips {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
    width: auto; margin-inline: 0; animation: none;
  }
  .chip { margin-right: 0; }
  .chip.chip-dup { display: none; }

  /* ── 5. thumb targets (44px) ── */
  /* The nav Apply pill stays small on purpose (Daniel: "huge... can have a
     smaller pill"), so it gets an invisible 44px hit area instead. */
  .nav .btn { position: relative; font-size: .78rem; padding: 8px 14px; }
  .nav .btn::after { content: ""; position: absolute; inset: -6px -4px; }
  .nav-burger { padding: 14px 12px; margin-left: -8px; }
  .nav-logo { display: inline-flex; align-items: center; min-height: 44px; }
  .hx-link { min-height: 44px; border-bottom: 0; padding-bottom: 0;
    text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px;
    text-decoration-color: rgba(27,21,48,.3); }
  .nominate-line a, .postscript .nominate-line a { display: inline-block; padding: 12px 0; }
  .foot-mail { display: inline-flex; align-items: center; min-height: 44px; }

  /* ── 7. footer: a two column grid of big tap rows ── */
  .foot-grid { gap: 14px; }
  .foot-links {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; width: 100%;
    justify-items: stretch; text-align: left;
  }
  .foot-links li { border-bottom: 1px solid rgba(78,31,166,.08); }
  .foot-links a { display: flex; align-items: center; min-height: 44px; font-size: .95rem; color: var(--ink); }
  .foot-legal { font-size: .84rem; line-height: 1.5; }
  .foot-legal a { display: inline-block; padding: 9px 2px; }
  .foot-verse { margin-top: 18px; }

  /* ── 6. no real text under 13px ── */
  .hx-eyebrow { font-size: .82rem; }
  .cta p.cta-assure { font-size: .84rem; }
  .hx-assure { font-size: .9rem; }

  /* ── 2. the hero phone, shorter ──
     The photo strip shrinks and the phone gets narrower; the note is the
     point and stays whole. "Say hello" fades out under the mask. */
  .hx-main { padding-top: 92px; }
  .hx-stage { height: 530px; padding-top: 58px; }
  .hx-phone { width: 262px; }
  .hx-top { height: 112px; }
  .hx-eyebrow2 { top: 40px; }
  .hx-why p { font-size: 12px; }
  .hx-note { top: 6px; }
  .hx-proof ul { gap: 8px; padding: 16px 0 18px; }
}

/* iPhone SE and other small phones */
@media (max-width: 380px) {
  .hx h1 { font-size: 2.55rem; }
  .hx-sub { font-size: 1rem; }
  .hx-phone { width: 248px; }
  .hx-note { width: 236px; margin-left: -140px; }
  .foot-links a { font-size: .9rem; }
}