:root { --pixel-ratio: 1; color-scheme: dark; background: #000; color: #fff; font-family: Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; position: relative; display: flex; flex-direction: column; isolation: isolate; }
.artwork { position: absolute; inset: 0; z-index: -1; background: #000; overflow: hidden; }
.artwork::before { content: ''; position: absolute; inset: 0; width: 100%; height: 100%; max-width: calc(3584px / var(--pixel-ratio)); max-height: calc(1184px / var(--pixel-ratio)); margin: auto; background: url('/assets/background.webp') 57% center / cover no-repeat; mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); mask-composite: intersect; }
main { flex: 1; display: flex; align-items: center; padding: 100px 8vw; min-height: 0; }
h1 { margin: 0 0 3vh; width: clamp(310px, 34vw, 560px); max-width: calc(910px / var(--pixel-ratio)); font-size: 0; }
.wordmark { display: block; width: 100%; height: auto; overflow: hidden; }
footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 4vw 28px; }
small { font-size: 12px; line-height: 1.5; letter-spacing: .02em; color: #d5dade; }
a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; min-width: 44px; color: #edf0f2; text-decoration: none; font-size: 16px; }
a:hover { text-decoration: underline; text-underline-offset: 5px; }
a:focus-visible { outline: 2px solid #fff; outline-offset: 5px; border-radius: 2px; }
a span { font-size: 17px; }
@media (max-width: 600px) {
  .artwork::before { background-position: 65% center; }
  main { padding: 76px 8vw 100px; align-items: flex-start; }
  h1 { width: 100%; max-width: min(420px, calc(910px / var(--pixel-ratio))); margin-top: 15svh; }
  footer { padding: 20px 7vw; gap: 12px; }
  small { max-width: 220px; font-size: 11px; }
}
@media (min-resolution: 1.25dppx) { :root { --pixel-ratio: 1.25; } }
@media (min-resolution: 1.5dppx) { :root { --pixel-ratio: 1.5; } }
@media (min-resolution: 2dppx) { :root { --pixel-ratio: 2; } }
@media (min-resolution: 3dppx) { :root { --pixel-ratio: 3; } }
@media (min-resolution: 4dppx) { :root { --pixel-ratio: 4; } }