/* Mobile polish + safe overflow — loaded after inline styles */

html, body { overflow-x: hidden; }

/* Header / nav */
header .wrap { padding: 0 14px; }
.nav { gap: 10px; }
.nav a { margin-left: 12px; font-weight: 600; }
.brand { white-space: nowrap; }       /* avoid awkward wraps */
.toggle { padding: 6px 10px; }

/* Hero + layout */
@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; padding: 36px 0 24px; gap: 20px; }
  .logo{ max-width: 260px; margin: 10px auto 0; display: block; }
}

@media (max-width: 640px){
  /* Make the link row horizontally scrollable instead of wrapping off-screen */
  .nav { flex-wrap: wrap; }
  .nav > .brand { flex: 1 1 100%; margin-bottom: 6px; font-size: 1rem; }

  /* the <nav> (the links) is the second child in your header .wrap */
  header .wrap nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  header .wrap nav::-webkit-scrollbar { display: none; }

  .nav a { margin-left: 14px; font-size: .95rem; }
  .toggle { font-size: .8rem; }

  .hero h1 { font-size: clamp(26px, 8vw, 40px); line-height: 1.15; }
  .hero p.sub { font-size: 1rem; }
  .cta { gap: 10px; }
  .btn { padding: .85rem 1rem; border-radius: 12px; }
}

@media (max-width: 420px){
  .wrap { padding: 0 14px; }
  .cta .btn { width: 100%; text-align: center; } /* big tap targets */
}

/* Cards / ribbons */
.ribbon { padding: 0 4px 8px; } /* keep inner scroller off the edges */
.event-card { min-width: 246px; max-width: 246px; } /* slightly narrower on phones */
.event-card img { height: 110px; }

/* General image safety */
img { max-width: 100%; height: auto; }