:root { color-scheme: light; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #292e30; background: #fff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
.masthead { width: 100%; min-height: 86px; padding: 34px 5.4vw 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark { width: 54.4px; height: 20.8px; object-fit: contain; object-position: left center; }
.edition { color: #70787a; font-size: 11px; letter-spacing: .2em; }
main { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 24px 55px; }
.geometry { width: min(590px, 87vw); margin: 0 0 10px; }
.geometry svg { width: 100%; height: auto; display: block; overflow: visible; }
.orbit { transform-origin: 320px 205px; }
.orbit-back { animation: drift-back 4s ease-in-out both; }
.orbit-front { animation: drift-front 4s ease-in-out both; }
h1 { text-align: center; margin: 0; font-size: clamp(30px, 3.7vw, 54px); font-weight: 400; line-height: 1.13; letter-spacing: -.045em; }
h1 span { color: #7b8385; }
.coming { margin: 32px 0 0; font-size: 11px; font-weight: 500; letter-spacing: .27em; color: #286e87; }
footer { padding: 0 5.4vw 28px; display: flex; justify-content: space-between; gap: 20px; color: #727a7c; font-size: 12px; line-height: 1.5; }
@keyframes drift-back { from { transform: rotate(-7deg); opacity: .2; } to { transform: rotate(0); opacity: 1; } }
@keyframes drift-front { from { transform: rotate(7deg); opacity: .2; } to { transform: rotate(0); opacity: 1; } }
@media (max-width: 600px) { .masthead { min-height: 68px; padding: 22px 24px 0; } .wordmark { width: 48px; height: 18.4px; } .edition { font-size: 10px; letter-spacing: .14em; } main { padding: 24px 20px 64px; } .geometry { width: min(540px, 100%); margin-bottom: 26px; } footer { padding: 0 24px 24px; font-size: 12px; } h1 { font-size: clamp(28px, 6.8vw, 40px); } }
@media (max-width: 360px) { .edition { display: none; } }
@media (prefers-reduced-motion: reduce) { .orbit { animation: none; } }