@font-face {
  font-family: Rhymes;
  src: url("media/rhymes.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: Rhymes;
  src: url("media/rhymes-light-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: Saans;
  src: url("media/saans.woff2") format("woff2");
  font-display: swap;
}

* { box-sizing: border-box; }
body { margin: 0; background: #e8e7e4; color: #191918; font: 14px Saans, sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid #21201f; outline-offset: 4px; }
.masthead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 20px clamp(20px, 4vw, 60px);
}
.masthead a { width: fit-content; }
.masthead a:hover { text-decoration: underline; }
.masthead a:last-child { justify-self: end; }
.brand { display: flex; gap: 8px; align-items: center; }
.brand img { width: 20px; }
main {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  min-height: calc(100svh - 56px);
  overflow: hidden;
  padding: clamp(34px, 5svh, 64px) 0 40px;
}
h1 {
  z-index: 10;
  margin: 0 16px;
  max-width: calc(100% - 32px);
  text-align: center;
  font: 400 clamp(34px, 4.1vw, 70px)/1.03 Rhymes, Georgia, serif;
  letter-spacing: -.04em;
}
.hero-replay { display: block; max-width: 100%; padding: 0; border: 0; background: none; letter-spacing: inherit; text-align: center; }
.hero-replay:disabled { cursor: default; }
.hero-replay:focus-visible { outline: 2px solid #2323b2; outline-offset: 5px; }
.hero-for { font-family: Saans, Arial, sans-serif; font-weight: 400; }
.intro h1 em { font-weight: 300; }
.hero-line { display: block; position: relative; }
.hero-lead { width: max-content; max-width: 100%; margin-inline: auto; }
.hero-tracker {
  position: absolute;
  top: -.27em;
  left: 50%;
  translate: -50% 0;
  width: 5.4em;
  height: auto;
  opacity: 0;
  pointer-events: none;
}
.hero-middle { clip-path: inset(0 -.1em); }
.hero-middle > span { display: block; }
.hero-alternate { position: absolute; inset: 0; visibility: hidden; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .hero-playing .hero-lead > span { animation: hero-type 4s step-end both; }
  .hero-playing .hero-tracker { animation: hero-tracker 4s step-end both; }
  .hero-playing .hero-middle > :first-child { animation: hero-roll-out 4s cubic-bezier(.23, 1, .32, 1); }
  .hero-playing .hero-alternate {
    visibility: visible;
    animation: hero-roll-in 4s cubic-bezier(.23, 1, .32, 1);
  }
}
@keyframes hero-type {
  0%, 45%, 100% { opacity: 1; }
  15% { opacity: 0; }
}
@keyframes hero-tracker {
  0%, 45%, 100% { opacity: 0; }
  15% { opacity: 1; }
}
@keyframes hero-roll-out {
  0%, 46%, 84%, 100% { transform: translateY(0); }
  52%, 78% { transform: translateY(-120%); }
}
@keyframes hero-roll-in {
  0%, 46%, 84%, 100% { transform: translateY(120%); }
  52%, 78% { transform: translateY(0); }
}
.hero-replay { font: inherit; }
.hero-replay:disabled { color: inherit; opacity: 1; }

.gallery {
  position: relative;
  width: 100%;
  height: clamp(330px, 42vw, 580px);
  perspective: 950px;
}
.card {
  position: absolute;
  top: 50%;
  left: var(--x);
  width: auto;
  height: var(--h);
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  transform: translate(-50%, -50%) rotateY(var(--turn, 0deg));
  background: #242329;
}
.card video { width: 100%; height: 100%; object-fit: cover; display: block; }
.card:hover, .card:focus-visible { filter: brightness(1.12); }
.left { --turn: 12deg; }
.right { --turn: -12deg; }
.card { aspect-ratio: 15 / 32; }
.outer { z-index: 6; --h: 91%; }
.outer.left { --x: 5%; }
.outer.right { --x: 95%; }
.middle { z-index: 5; --h: 72%; }
.middle.left { --x: 17%; }
.middle.right { --x: 83%; }
.inner { z-index: 4; --h: 54%; }
.inner.left { --x: 29%; }
.inner.right { --x: 71%; }
.lead {
  position: absolute;
  z-index: 7;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(225px, 30vw, 510px);
  aspect-ratio: 1.42;
  margin: 0;
}
.lead .hero-sketch { width: 100%; height: 100%; pointer-events: none; }
.lead figcaption {
  position: absolute;
  top: 9%;
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 12px;
  color: #272523;
}
.lead figcaption span { color: #5e5a54; }
.lead figcaption span::before { content: "·"; margin-right: 8px; }
.hero-platforms {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 19px;
  color: #605c56;
}
.hero-platforms svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
.hero-controls {
  z-index: 10;
  display: flex;
  gap: 6px;
  justify-self: center;
  margin-top: clamp(17px, 2.5svh, 25px);
}
.icon-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: #252321;
  border: 1px solid #27252324;
  border-radius: 50%;
  background: #f4f3ef;
}
.icon-button:hover, .icon-button[aria-pressed="true"] { color: #fff; background: #252321; }
.icon-button svg {
  grid-area: 1 / 1;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.play-icon, [data-paused] .pause-icon { visibility: hidden; }
[data-paused] .play-icon { visibility: visible; }

.gallery[data-phones] .card {
  background: #161616;
  border: clamp(2px, .24vw, 4px) solid #161616;
  border-radius: clamp(7px, 1.3vw, 18px);
  box-shadow: 0 0 0 .5px #77736d;
}
.gallery[data-phones] .card::after {
  content: "";
  position: absolute;
  top: 3%;
  left: 50%;
  translate: -50% 0;
  width: 26%;
  height: 1.5%;
  min-height: 2px;
  border-radius: 99px;
  background: #161616;
  pointer-events: none;
}

@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .gallery { container-type: inline-size; }
  .gallery[data-carousel] .card {
    left: 50%;
    height: 91%;
    animation: card-travel 9.6s linear infinite;
  }
  .gallery[data-carousel][data-frozen] .card { animation-play-state: paused; }
  .gallery[data-carousel]:has(:focus-visible) .card {
    animation: none;
    left: var(--x);
    height: var(--h);
  }
  .gallery[data-carousel] .left { --side: -1; --travel-turn: 22deg; }
  .gallery[data-carousel] .right { --side: 1; --travel-turn: -22deg; }
  .gallery[data-carousel] .middle { animation-delay: -4.4s; }
  .gallery[data-carousel] .inner { animation-delay: -1.2s; }
  .gallery[data-carousel] .outer { animation-delay: -7.6s; }

  @keyframes card-travel {
    0% {
      transform: translate(calc(-50% + var(--side) * 15cqw), -50%) scale(.12);
      opacity: 0;
      pointer-events: none;
      z-index: 1;
    }
    24% {
      transform: translate(calc(-50% + var(--side) * 19cqw), -50%) rotateY(calc(var(--travel-turn) * .4)) scale(.39);
      opacity: 1;
      pointer-events: auto;
      z-index: 2;
    }
    46% {
      transform: translate(calc(-50% + var(--side) * 29cqw), -50%) rotateY(calc(var(--travel-turn) * .7)) scale(.62);
      z-index: 3;
    }
    69% {
      transform: translate(calc(-50% + var(--side) * 44cqw), -50%) rotateY(var(--travel-turn)) scale(.93);
      z-index: 4;
    }
    88% {
      transform: translate(calc(-50% + var(--side) * 62cqw), -50%) rotateY(var(--travel-turn)) scale(1.12);
      z-index: 5;
    }
    100% {
      transform: translate(calc(-50% + var(--side) * 73cqw), -50%) rotateY(var(--travel-turn)) scale(1.16);
      z-index: 6;
    }
  }
}

dialog {
  width: min(760px, 95vw);
  max-height: 94dvh;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #0f0e15;
}
dialog::backdrop { background: #151515c9; }
dialog form { position: absolute; top: 8px; right: 8px; z-index: 1; }
.close { font-size: 20px; padding: 4px 12px; border: 0; border-radius: 99px; background: #1d1d1d; color: white; }
iframe, video { display: block; width: 100%; height: min(80dvh, 660px); border: 0; }
[hidden] { display: none; }

@media (max-width: 760px) {
  .masthead { padding: 17px 16px; }
  main { align-content: center; padding: 24px 0 clamp(64px, 13svh, 120px); }
  h1 { font-size: clamp(32px, 8vw, 52px); }
  .gallery { height: clamp(236px, 61vw, 405px); }
  .card, .lead { top: 49%; }
  .outer { --h: 74%; }
  .middle { --h: 59%; }
  .inner { --h: 46%; }
  .outer.left { --x: 0%; }
  .outer.right { --x: 100%; }
  .middle.left { --x: 10%; }
  .middle.right { --x: 90%; }
  .inner.left { --x: 22%; }
  .inner.right { --x: 78%; }
  .left { --turn: 9deg; }
  .right { --turn: -9deg; }
  .lead { width: min(47%, 310px); aspect-ratio: 1.1; }
  .lead figcaption { top: 4%; font-size: 11px; gap: 5px; }
  .lead figcaption span::before { margin-right: 5px; }
}