@media (max-width: 1120px) {
  .desktop-nav {
    gap: 22px;
  }

  .loop-layout,
  .control-layout {
    gap: 58px;
  }

  .coil-card {
    min-height: 470px;
  }
}

@media (max-width: 900px) {
  .desktop-nav a {
    font-size: 12px;
  }

  .section-heading,
  .section-heading--wide,
  .section-intro,
  .loop-layout,
  .control-layout {
    grid-template-columns: 1fr;
  }

  .section-heading,
  .section-intro {
    gap: 26px;
  }

  .section-heading > p,
  .section-intro > div > p {
    max-width: 720px;
  }

  .loop-layout {
    gap: 62px;
  }

  .loop-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 0;
  }

  .loop-steps li {
    min-height: 100%;
    grid-template-columns: 58px minmax(0, 1fr);
    padding: 20px;
    border: 1px solid rgba(176, 233, 235, 0.16);
  }

  .loop-steps li + li {
    border-left: 0;
  }

  .loop-steps img {
    width: 52px;
    height: 52px;
  }

  .gameplay-window {
    transform: none;
  }

  .control-layout {
    gap: 52px;
  }

  .coil-gallery {
    grid-template-columns: repeat(3, minmax(320px, 72vw));
    gap: 20px;
    width: calc(100vw - ((100vw - min(calc(100vw - 56px), var(--shell))) / 2));
    overflow-x: auto;
    padding: 0 28px 24px 0;
    scroll-padding-inline: 0 28px;
    scroll-snap-type: x mandatory;
    scrollbar-color: var(--gold) rgba(255, 255, 255, 0.08);
  }

  .coil-gallery-hint {
    display: flex;
  }

  .coil-card {
    min-height: 520px;
    scroll-snap-align: start;
  }

  .proof-grid {
    grid-template-columns: 1fr;
  }

  .proof-card,
  .proof-card--wide {
    width: 100%;
    grid-column: auto;
  }

  .footer-shell {
    grid-template-columns: minmax(170px, 0.7fr) minmax(220px, 1fr);
  }

  .footer-shell nav {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  html {
    scroll-padding-top: 90px;
  }

  .section-shell,
  .footer-shell {
    width: min(calc(100% - 32px), var(--shell));
  }

  .site-header {
    padding: 12px 12px 0;
  }

  .nav-shell {
    min-height: 66px;
    gap: 16px;
    padding: 8px 9px 8px 17px;
  }

  .brand-lockup {
    min-width: 166px;
    min-height: 44px;
  }

  .brand-lockup .brand-identity__icon {
    width: 42px;
  }

  .brand-lockup .brand-identity__name {
    font-size: 18px;
  }

  .desktop-nav {
    display: none;
  }

  .mobile-nav {
    display: block;
  }

  .hero {
    min-height: 1020px;
  }

  .hero-copy {
    width: min(calc(100% - 32px), 620px);
    padding-top: 168px;
  }

  .hero h1 {
    font-size: clamp(62px, 18.6vw, 108px);
    line-height: 0.88;
    white-space: normal;
  }

  .hero-copy > p {
    max-width: 520px;
    margin-top: 24px;
    font-size: 17px;
  }

  .hero-actions {
    gap: 12px;
    margin-top: 28px;
  }

  .release-chip,
  .coral-button {
    min-height: 54px;
    font-size: 12px;
  }

  .hero-reef {
    bottom: -2%;
    width: min(46vw, 360px);
  }

  .hero-reef--left {
    left: -12%;
  }

  .hero-reef--right {
    right: -12%;
  }

  .hero-pellet--one {
    top: 18%;
    left: 4%;
  }

  .hero-pellet--two {
    top: 36%;
    right: 4%;
  }

  .hero-pellet--three {
    right: 16%;
    bottom: 20%;
  }

  .hero-key-art {
    bottom: 32px;
    width: clamp(210px, 52vw, 280px);
  }

  .loop-section,
  .coils-section,
  .rewards-section {
    padding-block: 96px;
  }

  .section-heading h2,
  .section-intro h2 {
    font-size: clamp(48px, 15vw, 78px);
  }

  .section-heading > p,
  .section-intro > div > p {
    font-size: 18px;
  }

  .loop-layout,
  .coil-gallery,
  .proof-grid {
    margin-top: 58px;
  }

  .loop-steps {
    grid-template-columns: 1fr;
  }

  .loop-steps li {
    grid-template-columns: 64px minmax(0, 1fr);
    padding: 20px 0;
    border-inline: 0;
  }

  .loop-steps li + li {
    border-left: 0;
  }

  .gameplay-window {
    padding: 7px;
    border-radius: 22px;
  }

  .gameplay-window > img {
    border-radius: 15px;
  }

  .gameplay-window figcaption {
    display: grid;
    gap: 7px;
    padding: 14px 9px 7px;
  }

  .control-band {
    padding-block: 88px;
  }

  .control-layout h2 {
    font-size: clamp(54px, 16vw, 82px);
  }

  .control-ledger {
    grid-template-columns: 1fr;
  }

  .control-ledger div,
  .control-ledger div:nth-child(even) {
    min-height: 0;
    padding: 24px 0;
    border-left: 0;
  }

  .coil-gallery {
    grid-template-columns: repeat(3, minmax(280px, 82vw));
    width: calc(100vw - 16px);
    padding-right: 16px;
  }

  .coil-card {
    min-height: 440px;
    border-radius: 26px;
  }

  .coil-card > div {
    padding: 26px;
  }

  .proof-card {
    min-height: 0;
    padding: 8px;
    border-radius: 22px;
  }

  .proof-card img {
    border-radius: 15px;
  }

  .release-section {
    min-height: 700px;
    padding: 94px 20px;
  }

  .release-content h2 {
    font-size: clamp(58px, 18vw, 92px);
  }

  .release-content > p {
    font-size: 18px;
  }

  .platform-row {
    display: grid;
  }

  .platform-row span {
    min-width: min(100%, 280px);
  }

  .release-reef {
    width: min(46vw, 340px);
  }

  .release-reef--left {
    left: -14%;
  }

  .release-reef--right {
    right: -14%;
  }

  .footer-shell {
    grid-template-columns: 1fr;
  }

  .footer-shell nav,
  .footer-shell .copyright {
    grid-column: auto;
  }
}

@media (max-width: 480px) {
  .mobile-nav summary {
    min-width: 86px;
  }

  .mobile-nav summary span {
    font-size: 11px;
  }

  .hero {
    min-height: 980px;
  }

  .hero h1 {
    font-size: clamp(58px, 20vw, 82px);
  }

  .hero-actions {
    display: grid;
  }

  .release-chip,
  .coral-button {
    width: min(100%, 292px);
    min-width: 0;
  }

  .hero-key-art {
    bottom: 24px;
    width: min(232px, 62vw);
  }

  .coil-card {
    min-height: 400px;
  }

  .proof-card > strong {
    font-size: 20px;
  }
}