@font-face {
  font-family: Anybody;
  src: url('assets/fonts/anybody-latin-variable.woff2') format('woff2');
  font-weight: 400 900;
  font-stretch: 50% 150%;
  font-display: swap;
}
@font-face {
  font-family: 'Sofia Sans';
  src: url('assets/fonts/sofia-sans-latin-variable.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}
* { box-sizing: border-box; }
html { background: var(--studio); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--text); font: 400 18px/1.45 var(--font-body); }
::selection { background: var(--yellow); color: var(--ink); }
.page { width: min(100% - 112px, 1280px); margin-inline: auto; min-height: 100svh; display: flex; flex-direction: column; }
.topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 34px; font-size: 17px; font-weight: 700; }
.status { display: inline-flex; align-items: center; gap: 10px; }
.status-mark { width: 9px; height: 9px; flex: none; background: var(--yellow); }
main { flex: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 40px; padding-block: 24px 48px; }
.hero { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: stretch; }
.intro { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 34px; }
.wordmark { display: block; width: 100%; flex: none; aspect-ratio: 435.39 / 68.5; background: var(--yellow); mask: url('assets/wordmark.svg') left center / contain no-repeat; -webkit-mask: url('assets/wordmark.svg') left center / contain no-repeat; }
h1 { margin: 0; font-family: var(--font-display); font-weight: 800; font-stretch: 94%; font-size: clamp(34px, 3.3vw, 48px); line-height: 1.1; letter-spacing: -.045em; }
h1 span { display: block; }
.purpose { max-width: 37ch; margin: 24px 0 0; color: var(--text-2); font-size: 21px; line-height: 1.45; text-wrap: pretty; }
.release { margin-top: 0; }
.coming-soon { margin: 0; color: var(--yellow); font: 800 27px/1.1 var(--font-display); font-stretch: 105%; letter-spacing: -.025em; text-transform: uppercase; }
.platform { display: flex; align-items: center; gap: 7px; font-size: 17px; margin: 10px 0 0; }
.platform svg { width: 19px; height: 19px; }
.artwork { min-width: 0; width: 100%; max-width: 500px; justify-self: end; margin: 0; }
/* Bound the rotated artwork, whose vertical extent is -6.53% to 89.84% of scene width. */
.card-stage { position: relative; width: 100%; aspect-ratio: 1.0377; isolation: isolate; }
.card-scene { position: absolute; top: 6.774%; left: 0; width: 100%; aspect-ratio: 1.1; }
.hero-card { position: absolute; transform-origin: center; }
.hero-card svg { display: block; width: 100%; height: auto; }
.hero-card--recent { width: 34%; left: 4%; top: 28%; transform: rotate(-12deg); z-index: 1; }
.hero-card--old { width: 31%; left: 14%; top: 4%; transform: rotate(-6deg); z-index: 2; }
.hero-card--dare { width: 33%; left: 62%; top: -4%; transform: rotate(12deg); z-index: 3; }
.hero-card--photo { width: 37%; left: 48%; top: 36%; transform: rotate(6deg); z-index: 4; }
@media (min-width: 901px) {
  /* A compact card cluster sets the row height; the copy keeps a natural rhythm. */
  .artwork { max-width: clamp(390px, 30.55vw, 440px); justify-self: center; }
  .card-stage { aspect-ratio: 1.32175; }
  .card-scene { top: 8.28066%; }
  .hero-card--recent { top: 16%; }
  .hero-card--dare { width: 30%; left: 65%; }
  .hero-card--photo { width: 32%; top: 22%; }
  /* Align visible letter edges rather than the fonts' extra line-box space. */
  h1 span:first-child { text-box-trim: trim-start; text-box-edge: cap alphabetic; }
  .platform { align-items: flex-end; }
  .platform-label { text-box-trim: trim-both; text-box-edge: cap alphabetic; }
}
@media (min-width: 1700px) {
  .page { width: min(100% - 160px, 1440px); }
  .hero { gap: 96px; }
  h1 { font-size: 52px; }
  .purpose { font-size: 22px; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .page { width: calc(100% - 72px); }
  .hero { gap: 40px; }
  h1 { font-size: 33px; }
  .purpose { font-size: 19px; }
}
@media (max-width: 900px) {
  .page { width: min(100% - 64px, 640px); }
  .topline { padding-block: 28px; font-size: 16px; }
  main { padding-block: 34px 48px; align-items: flex-start; gap: 32px; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .intro { display: block; }
  .release { margin-top: 34px; }
  h1 { font-size: clamp(32px, 5.5vw, 44px); }
  .purpose { max-width: 37ch; font-size: 20px; }
  .artwork { max-width: 560px; justify-self: start; }
}
@media (max-width: 520px) {
  .page { width: calc(100% - 40px); }
  .topline { padding-block: 24px; font-size: 15px; }
  .status { gap: 8px; }
  .status-mark { width: 8px; height: 8px; }
  main { padding-block: 26px 32px; gap: 28px; }
  .hero { gap: 42px; }
  h1 { font-size: clamp(28px, 7.6vw, 38px); font-stretch: 95%; }
  .purpose { margin-top: 20px; font-size: 19px; line-height: 1.5; }
  .release { margin-top: 28px; }
  .coming-soon { font-size: 24px; }
  .platform { margin-top: 8px; font-size: 16px; }
}
@media (prefers-contrast: more) {
  .purpose { color: var(--text); }
}