@media (max-width: 1040px) {
  :root { --container: min(100% - 48px, 940px); }

  .brand-copy { display: none; }
  .site-nav { gap: 1rem; }
  .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-meta { max-width: 32rem; }
  .story-grid { grid-template-columns: 1fr 1fr; }
  .story-visual-main { min-height: 38rem; }
  .story-copy { padding-left: 1.5rem; }
  .game-layout { gap: 5rem; }
  .member-card { grid-template-columns: 1fr; }
  .member-image { min-height: 22rem; }
  .footer-main { grid-template-columns: 1fr auto; }
  .footer-meta { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
  :root { --container: min(100% - 32px, 720px); }

  .section { padding-block: 7rem; }
  .site-header { padding: 1rem; }
  .nav-shell { width: 100%; min-height: 3.9rem; padding: .35rem; backdrop-filter: none; }
  .brand img { width: 3.2rem; height: 3.2rem; }

  .menu-toggle {
    position: relative;
    z-index: 2;
    width: 3.2rem;
    height: 3.2rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
  }

  .menu-toggle span {
    position: absolute;
    width: 1.1rem;
    height: 1px;
    background: currentColor;
    transition: transform 600ms var(--ease-heavy);
  }

  .menu-toggle span:first-child { transform: translateY(-3px); }
  .menu-toggle span:last-child { transform: translateY(3px); }
  .menu-open .menu-toggle span:first-child { transform: rotate(45deg); }
  .menu-open .menu-toggle span:last-child { transform: rotate(-45deg); }

  .site-nav {
    position: fixed;
    z-index: 1;
    inset: 0;
    padding: 7.5rem 1.5rem 3rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    overflow-y: auto;
    background: rgba(8, 6, 7, .97);
    backdrop-filter: blur(22px);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-1rem);
    transition: opacity 650ms var(--ease-heavy), transform 650ms var(--ease-heavy);
  }

  .menu-open .site-nav { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .site-nav > a { width: 100%; padding: .8rem 0; transform: translateY(1.25rem); border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: clamp(1.8rem, 8vw, 3rem); opacity: 0; transition: opacity 550ms var(--ease-heavy), transform 550ms var(--ease-heavy), color 350ms var(--ease-heavy); }
  .menu-open .site-nav > a { opacity: 1; transform: translateY(0); }
  .menu-open .site-nav > a:nth-child(2) { transition-delay: 60ms; }
  .menu-open .site-nav > a:nth-child(3) { transition-delay: 120ms; }
  .menu-open .site-nav > a:nth-child(4) { transition-delay: 180ms; }
  .menu-open .site-nav > a:nth-child(5) { transition-delay: 240ms; }
  .menu-open .site-nav > a:nth-child(6) { transition-delay: 300ms; }
  .site-nav .nav-cta { width: fit-content; margin-top: 1.4rem; padding: .7rem 1.1rem; border: 0; font-family: var(--font-body); font-size: .85rem; }

  .hero { min-height: 100svh; }
  .hero-backdrop { background-image: linear-gradient(0deg, rgba(8, 6, 7, .96) 0%, rgba(8, 6, 7, .56) 62%, rgba(8, 6, 7, .15)), url("../images/scene-04.webp"); background-position: 57% center; }
  .hero-inner { padding: 9rem 0 3rem; }
  .hero h1 { font-size: clamp(3.25rem, 14vw, 5.6rem); }
  .hero-lead { font-size: .95rem; }
  .hero-meta { display: none; }
  .scroll-cue { display: none; }

  .news-layout, .game-layout, .download-layout { grid-template-columns: 1fr; }
  .news-layout { gap: 4rem; }
  .sticky-intro { position: static; }
  .news-card { grid-template-columns: 1fr 2.7rem; gap: 1rem; }
  .news-card time { grid-column: 1 / -1; }
  .news-card > a { grid-column: 2; grid-row: 2; align-self: center; }

  .story-heading { margin-left: 0; }
  .story-grid { margin-top: 4rem; display: flex; flex-direction: column; }
  .story-visual-main, .story-visual-side { width: 100%; min-height: auto; aspect-ratio: 4 / 3; margin-left: 0; transform: none; }
  .story-copy { padding: 2rem 0; }
  .story-copy > p { font-size: 1.18rem; }

  .game-layout { gap: 5rem; }
  .game-cover-shell { width: min(82vw, 30rem); margin-inline: auto; transform: none; }
  .cover-stamp { right: -1rem; }
  .game-copy h2 { font-size: clamp(4.5rem, 22vw, 7rem); }

  .gallery-head { grid-template-columns: 1fr; gap: 1rem; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-grid figure { min-height: auto; aspect-ratio: 16 / 10; }

  .team-cards { grid-template-columns: 1fr; }
  .member-card, .member-card-offset { transform: none; }
  .member-card { grid-template-columns: minmax(9rem, .75fr) 1fr; }
  .member-image { min-height: 24rem; }
  .download-section { padding-top: 8rem; }

  .footer-main { grid-template-columns: 1fr; gap: 2rem; }
  .footer-main nav, .footer-meta { grid-column: auto; flex-wrap: wrap; }
  .footer-bottom { flex-direction: column; gap: .55rem; }
}

@media (max-width: 520px) {
  :root { --container: calc(100% - 32px); }

  .section { padding-block: 6rem; }
  .eyebrow { font-size: .62rem; }
  .hero-inner { padding-bottom: 2rem; }
  .hero h1 { font-size: clamp(3rem, 15vw, 4.6rem); }
  .hero-actions { align-items: stretch; }
  .hero-actions .button { flex: 1 1 100%; }
  .news-card { padding-block: 1.6rem; }
  .news-card h3 { font-size: 1.35rem; }
  .story-heading h2, .team-intro h2, .download-intro h2 { font-size: clamp(2.8rem, 13vw, 4.2rem); }
  .story-visual figcaption { left: 1rem; bottom: 1rem; }
  .game-layout { gap: 4rem; }
  .game-cover-shell { width: 88vw; }
  .cover-stamp { right: -.25rem; bottom: 2rem; }
  .game-rating { align-items: flex-start; flex-direction: column; gap: .2rem; }
  .gallery-grid figure { aspect-ratio: 1 / .78; }
  .member-card { grid-template-columns: 1fr; }
  .member-image { min-height: 22rem; }
  .resource-card { grid-template-columns: 2rem 1fr; padding: 1.35rem; }
  .resource-card > i { display: none; }
  .mirror-links { flex-direction: column; align-items: flex-start; }
  .contact-inner h2 { font-size: clamp(3rem, 14vw, 4.7rem); }
  .contact-actions .button { width: 100%; }
  .social-list { gap: 1rem 1.35rem; }
  .trailer-dialog { width: calc(100vw - 16px); padding: .25rem; border-radius: 1rem; }
  .dialog-shell { padding: .55rem; }
  .dialog-head h2 { font-size: 1.05rem; }
  .footer-main nav { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1600px) {
  :root { --container: min(1440px, calc(100vw - 160px)); }
  .nav-shell { width: min(1320px, calc(100vw - 160px)); }
  .hero h1 { font-size: 8.4rem; }
  .hero-inner { padding-bottom: 8rem; }
}

@supports not (backdrop-filter: blur(1px)) {
  .nav-shell, .site-nav, .trailer-dialog::backdrop { background: rgba(11, 9, 10, .96); }
}
