@font-face { font-family: Gotham; src: url('/assets/fonts/Gotham-Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
* { box-sizing: border-box; }
body { margin: 0; background: #131313; color: #eee; font-family: Gotham, Arial, sans-serif; }
header { padding: 26px 32px; }
header img { display: block; width: 146px; height: auto; }
main { width: min(382px, calc(100% - 64px)); margin: 48px auto; }
.preview { position: relative; width: 100%; aspect-ratio: 3 / 2; background: #000; border: 1px solid #393939; }
.media { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
[hidden] { display: none !important; }
.play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%; background: rgba(85,85,85,.94); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.play svg { width: 28px; height: 28px; margin-left: 4px; }
.play:focus-visible { outline: 2px solid white; outline-offset: 4px; }
h1 { font-size: 20px; line-height: 1.45; font-weight: 300; margin: 24px 0 0; padding-bottom: 24px; border-bottom: 1px solid #655538; }
@media (max-width: 600px) { header img { width: 156px; margin: auto; } main { margin-top: 36px; } h1 { font-size: 19px; } }