@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Manrope:wght@400;500&display=swap');

:root { color-scheme: dark; font-family: Manrope, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #090d0f; color: #f4f0e8; }
.landing { min-height: 100svh; position: relative; display: grid; place-items: center; overflow: hidden; background: center bottom / cover no-repeat url('./public/assets/images/bg.jpg'); }
.veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 8, 10, .08), rgba(4, 8, 10, .38)); }
.content { position: absolute; top: 50%; left: 50%; width: min(840px, 90vw); transform: translate(-50%, -50%); text-align: center; animation: rise .9s ease-out both; }
.eyebrow { font-size: .68rem; letter-spacing: .32em; text-transform: uppercase; opacity: .78; margin: 0 0 2.2rem; }
h1 { font: 500 clamp(2.8rem, 4.2vw, 4.25rem)/.9 'Cormorant Garamond', Georgia, serif; letter-spacing: .19em; text-transform: uppercase; margin: 0; text-indent: .19em; }
.subtitle { font: 500 clamp(.95rem, 1.4vw, 1.35rem)/1 'Cormorant Garamond', Georgia, serif; letter-spacing: .5em; text-transform: uppercase; margin: 1.05rem 0 2.75rem; text-indent: .5em; }
.countdown { display: flex; align-items: center; justify-content: center; gap: clamp(.65rem, 2vw, 1.8rem); }
.time-block { min-width: clamp(3.2rem, 7vw, 5.4rem); }
.time-block strong { display: block; font: 500 clamp(1.7rem, 3.2vw, 2.7rem)/1 'Cormorant Garamond', Georgia, serif; letter-spacing: .05em; }
.time-block span { display: block; font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; opacity: .7; margin-top: .65rem; }
.separator { font: 400 2rem 'Cormorant Garamond', Georgia, serif; opacity: .6; align-self: flex-start; margin-top: .35rem; }
.launch-note { margin: 2.6rem 0 0; font-size: .65rem; letter-spacing: .22em; text-transform: uppercase; opacity: .7; }
.updates-link { display: inline-block; margin-top: 1.55rem; color: #f4f0e8; font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; opacity: .78; border-bottom: 1px solid rgba(244, 240, 232, .45); padding-bottom: .25rem; transition: opacity .2s ease, border-color .2s ease; }
.updates-link:hover, .updates-link:focus-visible { opacity: 1; border-color: #f4f0e8; }
@keyframes rise { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 600px) { .landing { background-image: url('./public/assets/images/bg-mobile.png'); } h1 { font-size: clamp(2.2rem, 9vw, 3.2rem); letter-spacing: .1em; text-indent: .1em; } .subtitle { font-size: .85rem; letter-spacing: .3em; text-indent: .3em; margin: .9rem 0 2rem; } .countdown { gap: .32rem; } .time-block { min-width: 3rem; } .time-block span { letter-spacing: .1em; font-size: .48rem; } .separator { font-size: 1.2rem; } .updates-link { margin-top: 1.25rem; font-size: .52rem; } }