/* Portrait layouts: keep content readable and controls reachable on narrow screens. */
@media (max-width: 767px) {
  :root { scroll-padding-top: calc(92px + env(safe-area-inset-top)); }
  .wrap { width: auto; margin-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)); }
  .nav {
    position: sticky; top: 0; height: calc(76px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
    background: #0c1526f5; backdrop-filter: blur(12px);
  }
  .nav .brand { gap: 6px; min-width: 0; }
  .nav .brand img { width: 40px; height: 40px; }
  .nav .brand > span { font-size: 14px; letter-spacing: .5px; }
  .nav .brand small { font-size: 7px; letter-spacing: 2px; }
  .language-switch { margin: 0 6px; padding: 2px; gap: 0; }
  .language-switch button { min-width: 44px; min-height: 44px; padding: 4px; font-size: 12px; }
  .menu-toggle { min-width: 44px; min-height: 44px; padding: 4px; }
  .nav nav { top: 100%; max-height: calc(100vh - 76px - env(safe-area-inset-top)); max-height: calc(100dvh - 76px - env(safe-area-inset-top)); overflow-y: auto; overscroll-behavior: contain; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .nav nav > a { min-height: 48px; display: flex; align-items: center; }
  .hero {
    height: auto; min-height: max(590px, calc(100svh - 76px - env(safe-area-inset-top))); max-height: none;
    flex-direction: column; align-items: stretch; justify-content: center;
    padding: 44px 0 24px; background-position: 60% center;
  }
  .hero-copy { padding: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; }
  .hero .eyebrow { max-width: 100%; font-size: 9px; line-height: 1.8; letter-spacing: 1.4px; gap: 9px; margin-bottom: 23px; }
  .hero .dot { flex-shrink: 0; }
  .hero h1 { font-size: clamp(40px, 11vw, 58px); line-height: 1.2; }
  html[lang="en"] .hero h1 { font-size: clamp(35px, 9.5vw, 54px); letter-spacing: -1.5px; }
  .hero-intro { font-size: 14px; line-height: 1.9; margin-top: 22px; }
  .hero-intro br { display: none; }
  .hero .actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 25px; }
  .button { min-height: 48px; padding: 12px 14px; font-size: 13px; gap: 12px; text-align: center; }
  .button span { flex-shrink: 0; }
  .hero .game-tags { flex-wrap: wrap; font-size: 8px; line-height: 1.8; gap: 6px 10px; letter-spacing: .7px; margin-top: 23px; }
  .hero-bottom { position: static; margin-top: 28px; gap: 16px; font-size: 8px; letter-spacing: .6px; }
  .hero-bottom > span { max-width: 52%; text-align: right; }
  .hero-bottom a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; }
  .hero-bottom a span { margin-left: 14px; }
  .numbers { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 28px; }
  .number-intro { padding-bottom: 18px; }
  .stat, .stat:last-child { grid-column: auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px 0; border-left: 0; border-top: 1px solid var(--line); }
  .stat strong { font-size: clamp(21px, 6vw, 29px); overflow-wrap: anywhere; }
  .stat > span { font-size: 13px; text-align: right; }
  .stat small { font-size: 9px; margin-top: 1px; }
  .section { padding-block: 50px; }
  h2 { font-size: clamp(25px, 7vw, 32px); letter-spacing: -.6px; }
  .about { gap: 28px; }
  .about-photo > img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
  .about-copy > p:not(.eyebrow), .features p { font-size: 14px; line-height: 1.9; }
  .photo-label { left: 20px; bottom: 20px; }
  .chips { flex-wrap: wrap; }
  .text-link { min-height: 44px; white-space: normal; gap: 16px; }
  .text-link span { flex-shrink: 0; }
  .features { gap: 14px; }
  .features article { padding: 24px; }
  .features a, .event-info a { min-height: 44px; align-items: center; }
  .event-toolbar { gap: 14px; }
  .tabs { width: 100%; }
  .tabs button { min-height: 44px; flex: 1; font-size: 13px; }
  .event-photo { height: auto; aspect-ratio: 16 / 9; }
  .event-info { padding: 20px; }
  .event-info h3 { min-height: 0; }
  .event-info p, .event-info time { font-size: 13px; }
  .gallery-grid { grid-template-rows: none; grid-auto-rows: auto; gap: 14px; }
  .gallery-item { aspect-ratio: 4 / 3; }
  .gallery-item > span { left: 20px; right: 20px; bottom: 20px; }
  .join-banner { padding: 28px 22px; gap: 28px; }
  .join-banner .button { width: 100%; }
  .join-banner .eyebrow { overflow-wrap: anywhere; line-height: 1.8; }
  .join-steps > div { gap: 14px; }
  .join-steps > div > span { flex-shrink: 0; }
  .join-steps .text-link { margin-left: 0; }
  .hub-section { padding-bottom: 30px; }
  .hub-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; font-size: 13px; }
  .hub-links a { min-height: 44px; display: flex; align-items: center; }
  footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-block: 25px max(25px, env(safe-area-inset-bottom)); }
  footer .brand { grid-column: 1 / -1; }
  footer .health-link, footer > a:last-child { min-height: 44px; display: flex; align-items: center; font-size: 12px; }
  footer > a:last-child { justify-self: end; }
  footer > span { grid-column: 1 / -1; font-size: 11px; }
  dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); padding: 50px 12px 20px; }
  dialog img { max-height: 65vh; max-height: 65dvh; }
  .lightbox-close { min-width: 44px; min-height: 44px; top: 3px; right: 4px; }
}
@media (max-width: 359px) {
  .wrap { margin-inline: 16px; }
  .nav { padding-inline: 10px; }
  .nav .brand img { width: 34px; height: 34px; }
  .nav .brand > span { font-size: 12px; }
  .nav .brand small { font-size: 6px; letter-spacing: 1.4px; }
  .hero .actions { grid-template-columns: minmax(0, 1fr); }
  .hero .game-tags i { display: none; }
  .hero .game-tags { flex-direction: column; align-items: flex-start; }
}
/* Portrait tablets retain a readable two-column layout where space permits. */
@media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
  .hero { height: auto; min-height: 680px; height: 78svh; max-height: 900px; }
  .wrap { width: calc(100% - 64px); }
  .features, .event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features article:last-child { grid-column: 1 / -1; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 300px 230px; }
  .gallery-large { grid-column: 1 / -1; }
  .language-switch button { min-height: 44px; min-width: 44px; }
  .menu-toggle { min-height: 44px; min-width: 44px; }
}