/* responsive.css — mobile layout for the static subpages
   (Work / Travel / Modeling / Contact / Art).
   Loaded AFTER each page's own <style> so it overrides cleanly.
   Desktop layout is untouched above 880px. */

/* fluid wordmark everywhere */
.wordmark { font-size: clamp(64px, 17vw, 184px); }

@media (max-width: 880px) {
  /* top bar: let the nav wrap / scroll instead of overflowing */
  .topbar {
    flex-direction: column; align-items: flex-start; gap: 14px;
    padding: 20px 24px;
  }
  .topbar-right {
    gap: 18px; flex-wrap: wrap;
    font-size: 10px; letter-spacing: 0.14em;
  }

  /* hero collapses to a single column, photo under the text */
  .hero {
    grid-template-columns: 1fr; gap: 24px;
    padding: 32px 24px 28px;
    min-height: 0;
  }
  .hero-meta { animation-delay: 500ms; }
  .lead { font-size: 20px; max-width: none; }

  /* section headers + body padding */
  .section-head { padding: 22px 24px; font-size: 10px; }
  .body, .work-list, .travel-grid, .shots, .gallery,
  .model-top, .stats, .contact-grid, .socials { padding-left: 24px; padding-right: 24px; }
  .foot { padding: 24px; flex-direction: column; gap: 8px; }

  /* WORK rows: drop the spacer column, stack year + title */
  .work-row {
    grid-template-columns: 1fr auto;
    gap: 6px 16px;
    padding: 22px 0;
  }
  .work-row .year { grid-column: 1; }
  .work-row .client { grid-column: 1; font-size: 24px; }
  .work-row .role { grid-column: 1; }
  .work-row .arrow { grid-column: 2; grid-row: 1 / span 3; align-self: center; }

  /* TRAVEL grid: 1 column */
  .travel-grid { grid-template-columns: 1fr; gap: 28px; }
  .trip .place { font-size: 22px; }

  /* MODELING */
  .model-top { grid-template-columns: 1fr; gap: 16px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats .stat:nth-child(2n) { border-right: none; }
  .shots { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hero .model-reel, .model-reel { height: 60vh; }

  /* ART gallery */
  .gallery { grid-template-columns: 1fr; gap: 28px; }

  /* CONTACT form: single column */
  .contact-grid { grid-template-columns: 1fr; }
  .field-full { grid-column: 1; }
  .socials { grid-template-columns: repeat(2, 1fr); }
  .socials .soc { border-right: 1px solid var(--a-ink); }
  .soc { font-size: 22px; padding: 24px 12px 18px; }
}

@media (max-width: 480px) {
  .topbar-right { gap: 14px; }
  .shots { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr; }
  .stats .stat { border-right: none; }
  .socials { grid-template-columns: 1fr; }
  .socials .soc { border-right: none; }
}