/* Mobile reference: the selected concert sits above a centered bottom portrait. */
@media (max-width: 700px) {
  .site-header { height: 100px; gap: 16px; }
  .brand img { width: clamp(92px, 29vw, 114px); }
  .site-header nav { gap: clamp(12px, 4.5vw, 19px); }
  main {
    padding-top: 114px;
    padding-bottom: max(250px, calc(100dvh - 330px));
  }
  .section-title { margin-bottom: 28px; }
  .concert-list { gap: 24px; }
  .event-card { padding-block: 8px; opacity: .24; }
  .event-card:hover { opacity: .24; transform: none; }
  .event-card.is-active, .event-card.is-active:hover, .event-card:focus-visible { opacity: 1; }
  .event-name, .event-city {
    font-size: clamp(22px, 7vw, 38px);
    line-height: 1.06;
  }

  .portrait-stage, .portrait-stage.is-secret {
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: min(43dvh, 410px);
    max-height: calc(100dvh - 300px);
    opacity: 1;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .portrait-stage::before {
    inset: -12% 0 0;
    background: linear-gradient(180deg, transparent 0%, #0003 30%, #0009 76%, #000c 100%);
    filter: none;
  }
  .portrait-stage > .artist-portrait,
  .portrait-stage > .artist-portrait[data-position] {
    width: 100%;
    height: 100%;
    right: 0;
    bottom: 0;
    object-fit: contain;
    object-position: center bottom;
    transform: translateY(12px);
    filter: brightness(.96) contrast(1.025) saturate(.9) drop-shadow(0 6px 22px #0008);
    mask-image: linear-gradient(#000 0%, #000 91%, transparent 100%);
    -webkit-mask-image: linear-gradient(#000 0%, #000 91%, transparent 100%);
  }
  .portrait-stage > .artist-portrait.is-visible { transform: translateY(0); }
  .portrait-stage > .secret-portrait { transform: translateY(12px); }
  .portrait-stage.is-secret > .secret-portrait { transform: translateY(0); }
  .portrait-stage .secret-figure { max-width: 100%; }
  .portrait-stage .secret-question--center { font-size: clamp(40px, 6.6dvh, 62px); }
  .portrait-stage .secret-question--left,
  .portrait-stage .secret-question--right { font-size: clamp(24px, 3.8dvh, 35px); }

  .site-footer {
    height: calc(76px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: linear-gradient(transparent, #0008);
  }
  .follow-menu { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}