/* Keep the approved desktop composition intact. Mobile artwork has its own
   space so content can grow without covering the subject or the controls. */
@media (max-width: 800px) {
  .header-inner { gap: 8px; }
  .header-actions { gap: 6px; }
  .menu-toggle { width: 44px; height: 44px; padding: 0; }
  .primary-nav { padding: 12px 20px; gap: 0; }
  .primary-nav a { display: flex; align-items: center; min-height: 48px; }

  .hero { height: auto; background-image: none; }
  .hero::before { display: none; }
  .hero::after {
    content: ''; display: block; height: clamp(340px, 94vw, 470px);
    background: url('../assets/hero-pfp.webp') 66% bottom / auto 100% no-repeat;
  }
  .hero-inner { height: auto; }
  .hero-copy { padding: 30px 0 24px; }
  .hero h1 { font-size: clamp(80px, 24vw, 110px); }
  .hero-note { top: 72px; right: 0; font-size: clamp(19px, 5.6vw, 25px); }
  .hero-buttons, .closing-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 390px; gap: 10px; }
  .hero-buttons .button, .closing-buttons .button { min-width: 0; padding: 14px 10px; gap: 10px; }
  .hero .pair-pill { min-height: 44px; }

  .meaning-card { min-width: 0; }
  .meaning-card > div:last-child { min-width: 0; }
  .meaning-tags { flex-wrap: wrap; }
  .meaning-tags .tag { font-size: 9px; }

  .market { background-image: none; }
  .market-main { height: auto; padding-top: 30px; }
  .market-main::before {
    content: ''; position: absolute; bottom: 0; left: 50%; width: 100vw;
    height: clamp(320px, 80vw, 400px); transform: translateX(-50%);
    background: url('../assets/market-pfp.webp') 82% bottom / auto 100% no-repeat;
  }
  .market-copy { position: relative; z-index: 1; }
  .market h2 { font-size: clamp(42px, 12.6vw, 64px); }
  .market-copy > p:last-child { font-size: 15px; }
  .market-copy > p:last-child br { display: none; }
  .market-value { position: relative; top: auto; left: auto; width: max-content; align-items: center; justify-content: center; height: clamp(320px, 80vw, 400px); margin-top: 24px; }
  .market-value strong { font-size: clamp(102px, 30vw, 150px); }
  .market-note { top: auto; bottom: 220px; right: 0; font-size: 19px; }
  .market-features { position: relative; background: #0e1317; column-gap: 14px; }
  .market-features > div { gap: 9px; }
  .market-features p { font-size: 12px; }
  .market-features small { font-size: 11px; }

  .pairing { height: auto; padding-bottom: 34px; }
  .pair-heading h2 { font-size: clamp(38px, 11.8vw, 60px); }
  .pair-stage { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 16px 12px; margin-top: 24px; }
  .pair-ribbons, .coin { display: none; }
  .pair-artwork { display: block; grid-column: 1 / -1; width: 100%; height: auto; mix-blend-mode: darken; }
  .pair-together { position: static; grid-column: 1 / -1; grid-row: 2; transform: none; width: auto; min-height: 0; padding: 0 0 8px; background: none; font-size: 22px; }
  .pair-together br { display: none; }
  .pair-panel { position: static; width: auto; height: auto; min-width: 0; padding: 20px 14px; border-radius: 20px; justify-content: flex-start; align-items: flex-start; }
  .pair-panel-left { grid-column: 1; grid-row: 3; }
  .pair-panel-right { grid-column: 2; grid-row: 3; }
  .pair-panel h3 { font-size: clamp(16px, 4.6vw, 24px); line-height: 1.25; }
  .pair-panel h3 > span { font-size: 40px; margin-bottom: 6px; }
  .pair-panel p { font-size: 13px; }
  .pair-panel p br { display: none; }
  .pair-panel-right h3, .pair-panel-right p, .pair-panel-right .pair-tags { width: auto; }
  .pair-tags { max-width: none; gap: 5px; }
  .pair-tags .tag { font-size: 9px; padding: 5px 7px; }

  .research, .closing { --art-height: clamp(300px, 82vw, 420px); height: auto; background-size: auto var(--art-height); background-position: 82% bottom; }
  .research .container, .closing > .container { height: auto; padding-bottom: var(--art-height); }
  .research-copy, .closing-copy { padding: 32px 0 28px; }
  .research h2 { font-size: clamp(38px, 11.6vw, 60px); }
  .research-lead { font-size: 20px; }
  .research-copy p br { display: none; }
  .research-copy > p:not(.dark-label):not(.research-lead) { font-size: 15px; }
  .research .button { min-width: 0; max-width: 100%; }
  .research-glass-copy { bottom: 20px; font-size: 16px; text-shadow: 0 2px 5px #07121f, 0 0 12px #07121f; }
  .closing { background-position: 75% bottom; }
  .closing h2 { font-size: clamp(51px, 15.5vw, 72px); }
  .closing-aside { right: 0; bottom: 16px; }
  .closing-manifesto { margin-top: 0; }

  .steps-card h3 { white-space: normal; line-height: 1.1; }
  .steps-card { height: auto; }
  .meme-controls { flex-wrap: wrap; gap: 12px; }
  .meme-filters { flex: 1 0 100%; justify-content: space-between; gap: 0; }
  .meme-filters button { font-size: 10px; padding: 10px; min-width: 44px; min-height: 44px; }
  .meme-arrows { margin-left: auto; gap: 10px; }
  .meme-arrows button { width: 44px; height: 44px; font-size: 23px; }
  .meme-card { flex: 0 0 92%; min-width: 0; aspect-ratio: 3 / 2; }
  .meme-card > img { object-fit: contain; }

  .footer-main { gap: 16px 8px; }
  .footer-brand { flex-basis: 100%; }
  .footer-socials { order: 2; margin-left: 0; gap: 4px; }
  .footer-socials .social { width: 44px; height: 44px; }
  .site-footer .pair-pill { order: 2; min-width: 0; min-height: 44px; padding: 9px 12px; }
  .site-footer nav { gap: 8px; }
  .site-footer nav a { display: flex; align-items: center; min-height: 44px; }
  .footer-bottom { gap: 16px; font-size: 10px; }
  .footer-bottom p { max-width: none; }
  .footer-values { flex-wrap: wrap; gap: 6px; }
}

@media (min-width: 600px) and (max-width: 800px) {
  .hero-note { right: 18%; }
  .pair-artwork { max-width: 600px; justify-self: center; }
  .pair-panel { padding: 24px; }
  .meme-card { flex-basis: 65%; }
  .meme-filters { flex: 0 1 auto; gap: 8px; }
}