/*
 * The landing page at tiehall.com (task 30.15): plain CSS, with no font file, no import and no address, in the
 * web UI's Navy & Gold palette. Every color is a token below, each the value of the same token in the web UI's dark
 * theme (packages/commands/assets/tiehall.css), or the live hall's own for its glow, and text is set in the web UI's
 * system font stack. tools/repo-checks/test/site.test.ts checks the tokens against the web UI's and the contrast of
 * every text and its background.
 */
:root {
  color-scheme: dark;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --ground: #0A1428;
  --surface: #111E38;
  --surface-2: #182748;
  --border: #24345A;
  --ink: #E9EDF5;
  --ink-2: #A9B3C8;
  --line: #9DB6EE;
  --line-hover: #C4D3F6;
  --focus: #F0CB6A;
  --button: #E3B341;
  --button-hover: #F0CB6A;
  --button-ink: #0A1428;
  --signal: #E3B341;
  --attention-glow: #E3B34140;
  --glow: #6E95F059;
  /* The live hall's lamps, as the web UI's dark theme draws a request's state on its map (D57). */
  --lamp-open: #7A849D;
  --lamp-claimed: #93A9DD;
  --lamp-in-progress: #6E95F0;
  --lamp-needs-info: #E3B341;
  --lamp-done: #8FE9BB;

  --duration-fast: 150ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --story: 12s;
  --radius: 8px;
  --radius-card: 12px;
  --page: 1120px;
  --page-gutter: 16px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--ground);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--line);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--line-hover);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  color: var(--ink);
  background: var(--surface-2);
}

h1,
h2,
h3 {
  color: var(--ink);
  line-height: 1.2;
}

p {
  max-width: 68ch;
}

/* The link that skips to the main content: the first the keyboard reaches, shown when it has the focus. */
.skip {
  position: absolute;
  left: var(--page-gutter);
  top: -64px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  color: var(--button-ink);
  background: var(--button);
}

.skip:focus {
  top: 12px;
}

.wrap {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

/* The top bar: the mark and the name, and the page's sections on wider screens. */
.top {
  border-bottom: 1px solid var(--border);
}

.top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
}

.brand:hover {
  color: var(--ink);
}

/* The mark's navy tile is the page's own ground, so an edge in the border color draws it, as on the social preview. */
.brand img,
.foot-brand img {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.foot-brand img {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}

.top ul {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.top nav a {
  text-decoration: none;
  color: var(--ink-2);
}

.top nav a:hover {
  color: var(--ink);
}

/* The hero: the name, the tagline, the README's sentence and the call to action, and under it the film, on the
   social preview's grid of dots. */
.hero,
.film-band {
  background-image: radial-gradient(var(--border) 1.2px, transparent 1.2px);
  background-size: 24px 24px;
}

.hero {
  padding: 48px 0 40px;
}

/* Behind the hero, the film and the bands: soft glows that drift, and in the hero, faint switchboards, rings, dots and
   a cord that float on paces of their own (the change landing-page-motion). None takes a pointer or a screen reader. */
.hero,
.film-band,
.band {
  position: relative;
  overflow: hidden;
}

.hero > .wrap,
.film-band > .wrap,
.band > .wrap {
  position: relative;
  z-index: 1;
}

.hero::before,
.hero::after,
.film-band::before,
#points::before,
#how::before {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}

.hero::before {
  width: 62vw;
  height: 62vw;
  max-width: 820px;
  max-height: 820px;
  top: -24vw;
  right: -16vw;
  background: radial-gradient(circle, var(--glow), transparent 66%);
  animation: drift-a 22s ease-in-out infinite alternate;
}

.hero::after {
  width: 48vw;
  height: 48vw;
  max-width: 620px;
  max-height: 620px;
  bottom: -26vw;
  left: -14vw;
  background: radial-gradient(circle, var(--attention-glow), transparent 64%);
  animation: drift-b 26s ease-in-out infinite alternate;
}

.film-band::before {
  width: 70vw;
  height: 40vw;
  max-width: 960px;
  max-height: 540px;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, var(--attention-glow), transparent 62%);
}

#points::before {
  width: 44vw;
  height: 44vw;
  max-width: 560px;
  max-height: 560px;
  top: -18vw;
  left: -16vw;
  background: radial-gradient(circle, var(--glow), transparent 64%);
  animation: drift-b 24s ease-in-out infinite alternate;
}

#how::before {
  width: 40vw;
  height: 40vw;
  max-width: 520px;
  max-height: 520px;
  bottom: -20vw;
  right: -12vw;
  background: radial-gradient(circle, var(--attention-glow), transparent 64%);
  animation: drift-a 20s ease-in-out infinite alternate;
}

.backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.shape {
  fill: none;
  stroke: var(--border);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: float 16s ease-in-out infinite alternate;
}

.shape-node {
  stroke: var(--lamp-open);
  opacity: 0.45;
}

.shape-ring {
  stroke: var(--lamp-claimed);
  opacity: 0.3;
}

.shape-dot {
  fill: var(--lamp-needs-info);
  stroke: none;
  opacity: 0.55;
}

.shape-cord {
  stroke: var(--lamp-in-progress);
  stroke-dasharray: 4 12;
  opacity: 0.35;
  animation: hall-flow 3.2s linear infinite;
}

.s2 {
  animation-duration: 19s;
  animation-delay: -6s;
}

.s3 {
  animation-duration: 13s;
  animation-delay: -3s;
}

.s4 {
  animation-duration: 21s;
  animation-delay: -9s;
}

.s5 {
  animation-duration: 17s;
  animation-delay: -4s;
}

.s6 {
  animation-duration: 15s;
  animation-delay: -11s;
}

.s7 {
  animation-duration: 9s;
}

.s8 {
  animation-duration: 11s;
  animation-delay: -5s;
}

.s9 {
  animation-duration: 12s;
  animation-delay: -2s;
}

@keyframes float {
  from {
    transform: translate(0, 0) rotate(0deg);
  }

  to {
    transform: translate(18px, -26px) rotate(8deg);
  }
}

@keyframes drift-a {
  from {
    transform: translate(0, 0) scale(1);
  }

  to {
    transform: translate(-6vw, 4vw) scale(1.12);
  }
}

@keyframes drift-b {
  from {
    transform: translate(0, 0) scale(1);
  }

  to {
    transform: translate(5vw, -3vw) scale(1.1);
  }
}

.hero-grid {
  display: grid;
  gap: 32px;
  align-items: center;
}

.hero-text {
  max-width: 760px;
}

/* The hall beside the text (the change landing-page-motion): the live hall of the web UI drawn for the page, six teams'
   switchboards on a ring and the cords between them. On one cord a request travels from BE to FE, which claims it;
   FE's question comes back and BE's switchboard glows gold while it waits; the answer follows, and the line turns green
   when the request is done. Two other cords carry work of their own. Everything moves through the animations below,
   on one 12-second story, and stops for people who ask for reduced motion. */
.hall-art {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}

.hall-cord {
  fill: none;
  stroke: var(--border);
  stroke-width: 2;
  stroke-linecap: round;
}

.cord-story {
  animation: hall-done var(--story) linear infinite;
}

.hall-flow {
  fill: none;
  stroke: var(--lamp-in-progress);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 6 10;
  opacity: 0.55;
  animation: hall-flow 1.6s linear infinite;
}

.flow-b {
  stroke: var(--lamp-claimed);
  animation-duration: 2.2s;
  animation-direction: reverse;
}

.hall-pulse {
  fill: none;
  stroke: var(--line);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 0.01 200;
  stroke-dashoffset: 0;
  opacity: 0;
}

.pulse-request {
  stroke: var(--lamp-in-progress);
  filter: drop-shadow(0 0 6px var(--lamp-in-progress));
  animation: hall-request var(--story) var(--ease) infinite;
}

.pulse-question {
  stroke: var(--lamp-needs-info);
  filter: drop-shadow(0 0 7px var(--lamp-needs-info));
  animation: hall-question var(--story) var(--ease) infinite;
}

.pulse-answer {
  stroke: var(--lamp-in-progress);
  filter: drop-shadow(0 0 6px var(--lamp-in-progress));
  animation: hall-answer var(--story) var(--ease) infinite;
}

.pulse-ambient {
  stroke: var(--lamp-claimed);
  filter: drop-shadow(0 0 5px var(--lamp-claimed));
  animation: hall-request var(--story) var(--ease) calc(var(--story) / -2) infinite;
}

/* The other teams' traffic, each cord on a pace of its own, so that the hall never stands still. */
.pulse-travel {
  stroke-width: 7;
  stroke: var(--line);
  filter: drop-shadow(0 0 4px var(--line));
  animation: hall-travel 6s var(--ease) infinite;
}

.travel-1 {
  stroke: var(--lamp-claimed);
  animation-duration: 5.5s;
  animation-delay: -1s;
}

.travel-2 {
  stroke: var(--lamp-in-progress);
  animation-duration: 7s;
  animation-delay: -3s;
}

.travel-3 {
  animation-duration: 6.5s;
  animation-delay: -4.5s;
}

.travel-4 {
  stroke: var(--lamp-claimed);
  animation-duration: 8s;
  animation-delay: -2s;
}

.travel-5 {
  stroke: var(--lamp-in-progress);
  animation-duration: 9s;
  animation-delay: -6s;
}

.hall-node rect {
  fill: var(--surface);
  stroke: var(--border);
  stroke-width: 1.5;
}

.hall-node text {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  fill: var(--ink);
}

.hall-lamp {
  fill: var(--lamp-open);
}

.node-fe .hall-lamp {
  animation: hall-fe-lamp var(--story) linear infinite;
}

.node-fe rect {
  animation: hall-working var(--story) linear infinite;
}

.node-be rect {
  animation: hall-asking var(--story) linear infinite;
}

.node-be .hall-lamp {
  animation: hall-be-lamp var(--story) linear infinite;
}

.node-pay .hall-lamp,
.node-ios .hall-lamp {
  fill: var(--lamp-in-progress);
}

.node-ops .hall-lamp {
  fill: var(--lamp-claimed);
}

@keyframes hall-flow {
  to {
    stroke-dashoffset: -32;
  }
}

@keyframes hall-request {
  0% {
    stroke-dashoffset: 0;
    opacity: 0;
  }

  3% {
    opacity: 1;
  }

  20% {
    stroke-dashoffset: -100;
    opacity: 1;
  }

  23%,
  100% {
    stroke-dashoffset: -100;
    opacity: 0;
  }
}

@keyframes hall-question {
  0%,
  30% {
    stroke-dashoffset: 0;
    opacity: 0;
  }

  33% {
    opacity: 1;
  }

  48% {
    stroke-dashoffset: -100;
    opacity: 1;
  }

  51%,
  100% {
    stroke-dashoffset: -100;
    opacity: 0;
  }
}

@keyframes hall-answer {
  0%,
  60% {
    stroke-dashoffset: 0;
    opacity: 0;
  }

  63% {
    opacity: 1;
  }

  76% {
    stroke-dashoffset: -100;
    opacity: 1;
  }

  79%,
  100% {
    stroke-dashoffset: -100;
    opacity: 0;
  }
}

@keyframes hall-done {
  0%,
  79% {
    stroke: var(--border);
    stroke-width: 2;
  }

  83%,
  94% {
    stroke: var(--lamp-done);
    stroke-width: 3;
  }

  100% {
    stroke: var(--border);
    stroke-width: 2;
  }
}

@keyframes hall-fe-lamp {
  0%,
  20% {
    fill: var(--lamp-open);
  }

  22%,
  48% {
    fill: var(--lamp-claimed);
  }

  50%,
  80% {
    fill: var(--lamp-in-progress);
  }

  83%,
  96% {
    fill: var(--lamp-done);
  }

  100% {
    fill: var(--lamp-open);
  }
}

@keyframes hall-asking {
  0%,
  47% {
    stroke: var(--border);
    filter: drop-shadow(0 0 0 var(--attention-glow));
  }

  50%,
  60% {
    stroke: var(--lamp-needs-info);
    filter: drop-shadow(0 0 14px var(--lamp-needs-info));
  }

  64%,
  100% {
    stroke: var(--border);
    filter: drop-shadow(0 0 0 var(--attention-glow));
  }
}

@keyframes hall-working {
  0%,
  20% {
    stroke: var(--border);
    filter: drop-shadow(0 0 0 var(--lamp-in-progress));
  }

  24%,
  46% {
    stroke: var(--lamp-claimed);
    filter: drop-shadow(0 0 10px var(--lamp-in-progress));
  }

  50%,
  80% {
    stroke: var(--border);
    filter: drop-shadow(0 0 0 var(--lamp-in-progress));
  }

  84%,
  94% {
    stroke: var(--lamp-done);
    filter: drop-shadow(0 0 12px var(--lamp-done));
  }

  100% {
    stroke: var(--border);
    filter: drop-shadow(0 0 0 var(--lamp-done));
  }
}

@keyframes hall-travel {
  0% {
    stroke-dashoffset: 0;
    opacity: 0;
  }

  6% {
    opacity: 1;
  }

  42% {
    stroke-dashoffset: -100;
    opacity: 1;
  }

  48%,
  100% {
    stroke-dashoffset: -100;
    opacity: 0;
  }
}

@keyframes hall-be-lamp {
  0%,
  47% {
    fill: var(--lamp-in-progress);
  }

  50%,
  54%,
  58% {
    fill: var(--lamp-needs-info);
  }

  52%,
  56% {
    fill: var(--surface);
  }

  62%,
  100% {
    fill: var(--lamp-in-progress);
  }
}

h1 {
  margin: 0;
  font-size: clamp(2.75rem, 1.75rem + 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.tagline {
  margin: 14px 0 0;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.625rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-2);
}

.lede {
  margin: 22px 0 0;
  font-size: 1.125rem;
}

.facts {
  margin: 16px 0 0;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.facts span {
  white-space: nowrap;
}

.actions {
  margin: 28px 0 0;
}

/* The page's one call to action, gold with navy ink, as a page's main action is in the web UI. */
.cta {
  display: inline-block;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--button-ink);
  background: var(--button);
  box-shadow: 0 8px 32px var(--attention-glow);
  transition: background-color var(--duration-fast);
}

.cta:hover {
  color: var(--button-ink);
  background: var(--button-hover);
}

.film-band {
  padding: 0 0 64px;
}

/* The film, as wide as the page's content: a 16:9 frame that holds the film's own page, film.html, which shows the
   poster until the visitor starts the film and then YouTube's privacy-enhanced player. */
.film {
  margin: 0;
}

.film-frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: 0 16px 48px var(--attention-glow);
  background: var(--surface);
}

.film-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* The film's own page, inside the frame: the poster filling it, with its label in a corner, clear of the mark. */
.film-page {
  margin: 0;
  overflow: hidden;
}

.film-start {
  position: relative;
  display: block;
  height: 100vh;
}

.film-start img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.film-start:focus-visible {
  outline-offset: -6px;
}

/* The poster's label, so that it reads as a film to start. */
.play {
  position: absolute;
  left: 3%;
  bottom: 5%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--button-ink);
  background: var(--button);
  box-shadow: 0 8px 32px var(--attention-glow);
}

.play::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--button-ink);
}

.film-start:hover .play {
  background: var(--button-hover);
}

.film figcaption {
  margin-top: 12px;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

/* The page's other parts, each a band under a line. */
.band {
  padding: 56px 0;
  border-top: 1px solid var(--border);
}

h2 {
  margin: 0 0 24px;
  font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
  letter-spacing: -0.01em;
}

h3 {
  margin: 0 0 8px;
  font-size: 1.125rem;
}

.cards {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cards li {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.cards li::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin-bottom: 18px;
  border-radius: 2px;
  background: var(--signal);
}

.cards p,
.steps p {
  margin: 0;
  color: var(--ink-2);
}

.steps {
  display: grid;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  align-content: start;
  column-gap: 16px;
}

.steps li > h3,
.steps li > p {
  grid-column: 1 / -1;
}

.steps li > h3 {
  margin-top: 14px;
}

/* Each step's small picture: a packet sent along the line, a question coming back, and the pull request merging,
   each on a loop of its own. */
.step-art {
  width: 112px;
  height: 46px;
  overflow: visible;
}

.step-track,
.step-branch {
  fill: none;
  stroke: var(--border);
  stroke-width: 2;
  stroke-linecap: round;
}

.step-dot {
  fill: var(--surface-2);
  stroke: var(--line);
  stroke-width: 1.5;
}

.step-card {
  fill: var(--lamp-in-progress);
  transform-box: fill-box;
  animation: step-send 3s var(--ease) infinite;
}

.step-dot-busy {
  stroke: var(--lamp-needs-info);
}

.step-question rect {
  fill: var(--lamp-needs-info);
}

.step-question text {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  fill: var(--button-ink);
  text-anchor: middle;
}

.step-question {
  animation: step-ask 3s var(--ease) infinite;
}

.step-branch {
  stroke: var(--lamp-claimed);
  stroke-dasharray: 60;
  animation: step-branch 3s var(--ease) infinite;
}

.step-merge {
  fill: var(--surface-2);
  stroke: var(--lamp-done);
  stroke-width: 2;
}

.step-check {
  fill: none;
  stroke: var(--lamp-done);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  animation: step-check 3s var(--ease) infinite;
}

@keyframes step-send {
  0% {
    transform: translateX(0);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  60% {
    transform: translateX(36px);
    opacity: 1;
  }

  75%,
  100% {
    transform: translateX(36px);
    opacity: 0;
  }
}

@keyframes step-ask {
  0% {
    transform: translateX(0);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  60% {
    transform: translateX(-44px);
    opacity: 1;
  }

  75%,
  100% {
    transform: translateX(-44px);
    opacity: 0;
  }
}

@keyframes step-branch {
  0% {
    stroke-dashoffset: 60;
  }

  50%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes step-check {
  0%,
  45% {
    stroke-dashoffset: 100;
  }

  70%,
  100% {
    stroke-dashoffset: 0;
  }
}

.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border: 2px solid var(--signal);
  border-radius: 50%;
  font-weight: 700;
  color: var(--signal);
}

.pair {
  display: grid;
  gap: 48px;
}

.pair section > p {
  color: var(--ink-2);
}

.clients {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.clients li {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
}

/* The footer: the repository, the docs, the security policy and the license. */
.foot {
  padding: 32px 0 48px;
  border-top: 1px solid var(--border);
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}

.foot-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 700;
  color: var(--ink);
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot-note {
  flex-basis: 100%;
  margin: 0;
}

/* The 404 page. */
.missing {
  padding: 72px 0 96px;
}

.missing .actions a + a {
  margin-left: 20px;
}

@media (max-width: 599px) {
  .top nav {
    display: none;
  }
}

@media (min-width: 640px) {
  :root {
    --page-gutter: 32px;
  }

  /* In the film's frame, as wide as the page's content on a wider screen, a larger label. */
  .play {
    gap: 12px;
    padding: 12px 22px 12px 18px;
    font-size: 1.125rem;
  }

  .play::before {
    border-width: 8px 0 8px 13px;
  }

  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 800px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

@media (min-width: 900px) {
  .hero {
    padding: 80px 0 56px;
  }

  .film-band {
    padding-bottom: 96px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 48px;
  }

  .pair {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}