/* responsive composition. The copy comes first, then the catalog. */
@media (max-width: 900px) {
  .page-header,
  .page-footer {
    padding-inline: 20px;
  }

  .hero {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-copy,
  .sheet {
    padding-inline: max(20px, calc((100% - 760px) / 2));
  }

  .hero-copy {
    gap: 16px;
    padding-block: 40px 36px;
  }

  .hero h1 {
    max-width: none;
    font-size: clamp(44px, 9vw, 72px);
  }

  .hero-lede {
    max-width: 30ch;
    padding-top: 0;
  }

  .catalog-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  }
}

/* DESIGN.md's phone catalog: each card becomes a compact row */
@media (max-width: 560px) {
  .brand {
    font-size: 20px;
  }

  .brand svg {
    width: 25px;
    height: 25px;
  }

  .hero-copy {
    padding-block: 28px 30px;
  }

  .hero h1 {
    font-size: clamp(40px, 12.6vw, 56px);
  }

  .hero-lede {
    font-size: 20px;
  }

  .sheet {
    padding-block: 18px 22px;
  }

  .catalog-grid {
    gap: 10px;
  }

  .card {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    grid-template-areas:
      "shot body"
      "shot foot";
  }

  .card-live {
    grid-template-areas:
      "shot body"
      "shot foot"
      "share share";
  }

  .card-window {
    grid-area: shot;
    min-width: 0;
    border-right: 1px solid var(--line-soft);
    border-bottom: 0;
  }

  .window-bar,
  .shot-facts,
  .frame-no,
  .mini .w {
    display: none;
  }

  .thumb {
    height: 100%;
    min-height: 108px;
    aspect-ratio: auto;
  }

  .card-body {
    grid-area: body;
    padding: 11px 13px 2px;
  }

  .card-slug {
    display: block;
  }

  .card-foot {
    grid-area: foot;
    padding: 6px 13px 10px;
    border-top: 0;
    background: transparent;
  }

  .card-share {
    grid-area: share;
    background: var(--paper);
  }

  .page-footer {
    gap: 0 16px;
  }

  .register {
    flex-basis: 100%;
    margin-left: 0;
    padding-bottom: 8px;
    font-size: 12px;
  }
}

/* Wide screens: the catalog fills its column and rolls slowly downward, new
   cards entering at the top. The track holds three equal lists, each padded by
   one grid gap, so moving it by a third lands on an identical frame. Reduced
   motion keeps the four still cards. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .sheet {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }

  .catalog-roll {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    contain: size;
    mask-image: linear-gradient(
      to bottom,
      transparent,
      var(--ink) 40px,
      var(--ink) calc(100% - 64px),
      transparent
    );
  }

  .catalog-track {
    animation: catalog-roll var(--t-roll) linear infinite;
    will-change: transform;
  }

  .catalog-roll:hover .catalog-track {
    animation-play-state: paused;
  }

  .catalog-track .catalog-grid {
    padding-bottom: 14px;
  }

  .catalog-grid .card-more {
    display: flex;
  }

  .catalog-copy {
    display: grid;
  }
}

@keyframes catalog-roll {
  from {
    transform: translateY(calc(-100% / 3));
  }

  to {
    transform: translateY(0);
  }
}