@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400&family=Italiana&family=Montserrat:wght@400;500;600&display=swap');

:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { background: #151311; color: #f4f0e8; font-family: Montserrat, Arial, sans-serif; }
.hero { isolation: isolate; min-height: 100svh; overflow: hidden; position: relative; display: grid; place-items: center; }
.hero-image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14,12,10,.65) 0%, rgba(18,15,12,.17) 54%, rgba(19,15,11,.22) 100%), linear-gradient(0deg, rgba(12,10,8,.34), transparent 38%); }
.site-header { position: absolute; top: 0; left: 0; width: 100%; padding: 35px 5.5vw; }
.wordmark { color: inherit; font-size: 11px; font-weight: 600; letter-spacing: .34em; text-decoration: none; }
.hero-content { align-items: center; display: flex; flex-direction: column; gap: 26px; margin-top: 20px; text-align: center; }
.eyebrow { font-size: 9px; letter-spacing: .31em; margin: 0; }
h1 { font-family: Italiana, Georgia, serif; font-size: clamp(66px, 9.3vw, 148px); font-weight: 400; letter-spacing: -.035em; line-height: .81; margin: 0 0 14px; }
.cta { border: 1px solid rgba(244,240,232,.9); color: #fff; font-size: 10px; font-weight: 500; letter-spacing: .18em; padding: 17px 22px 16px 24px; text-decoration: none; transition: background .25s ease, color .25s ease; }
.cta span { display: inline-block; font-size: 13px; margin-left: 12px; transition: transform .25s ease; }
.cta:hover, .cta:focus-visible { background: #f4f0e8; color: #171310; outline: none; }
.cta:hover span, .cta:focus-visible span { transform: translate(2px, -2px); }
.edition { bottom: 28px; font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .22em; margin: 0; position: absolute; right: 5.5vw; }
@media (max-width: 600px) { .site-header { padding: 28px 7vw; } .wordmark { font-size: 9px; } .hero-content { gap: 22px; margin-top: 12px; } h1 { font-size: clamp(62px, 19vw, 96px); } .edition { bottom: 24px; right: 7vw; } }