@media (min-width: 760px) {
  .brand {
    font-size: 1.3rem;
  }

  .marker-text,
  .section-eyebrow {
    font-size: 1.28rem;
  }

  .hero-title {
    font-size: 7rem;
  }

  html[lang="en"] .hero-title {
    font-size: 5.8rem;
  }

  .hero-subtitle {
    font-size: 1.16rem;
  }

  .lead-text {
    font-size: 1.18rem;
  }

  .synopsis-copy {
    font-size: 1.1rem;
  }

  .synopsis-copy p:first-child {
    font-size: 1.24rem;
  }

  h2 {
    font-size: 4rem;
  }

  .two-column h2 {
    font-size: 3.35rem;
    line-height: 0.94;
  }

  .flow-card h3 {
    font-size: 2rem;
  }

  .modal-panel h2,
  .spoiler-dialog-panel h2 {
    font-size: 3rem;
  }

  .header-inner {
    grid-template-columns: auto 1fr auto;
  }

  .menu-toggle {
    display: none;
  }

  .site-nav,
  .header-actions {
    display: flex;
    align-items: center;
  }

  .site-nav {
    justify-content: center;
    gap: clamp(14px, 2.1vw, 26px);
  }

  .header-actions {
    justify-content: flex-end;
    gap: 10px;
  }

  .hero-inner {
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.78fr);
  }

  .experience-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .card-game-board {
    grid-template-columns: minmax(0, 0.95fr) minmax(260px, 0.55fr);
    align-items: start;
  }

  .two-column {
    grid-template-columns: minmax(210px, 0.72fr) minmax(0, 1.28fr);
    align-items: start;
  }

  .site-footer {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .flow-card {
    min-width: 0;
  }

  .flow-arrow {
    display: grid;
  }
}

@media (min-width: 1100px) {
  .hero-title {
    font-size: 9.6rem;
  }

  html[lang="en"] .hero-title {
    font-size: 7.6rem;
  }

  h2 {
    font-size: 4.9rem;
  }

  .two-column h2 {
    font-size: 3.9rem;
  }

  .flow-track {
    grid-auto-columns: minmax(260px, 292px);
  }
}

@media (max-width: 520px) {
  :root {
    --container: min(100vw - 24px, 1120px);
  }

  .hero {
    padding-top: 42px;
  }

  .hero-title {
    font-size: 3.5rem;
  }

  html[lang="en"] .hero-title {
    font-size: 3.05rem;
  }

  .hero-actions,
  .dialog-actions,
  .modal-nav {
    display: grid;
  }

  .button {
    width: 100%;
  }

  .table-scene {
    width: min(310px, 100%);
  }

  .text-panel,
  .character-list,
  .semantic-ending-list {
    padding-left: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}