:root { color-scheme: dark; --ink: #f5f2e9; --gold: #d7ce91; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #05090e; }
body { color: var(--ink); font-family: "Cormorant Garamond", Georgia, serif; overflow-x: hidden; }
.landing-page { position: relative; isolation: isolate; min-height: 100svh; overflow: hidden; background: #05090e; }
.hero-art, .atmosphere { position: absolute; inset: 0; pointer-events: none; }
.hero-art { z-index: -2; background: #07101a url("/dhilume-mobile.jpg") center top / cover no-repeat; }
.atmosphere { z-index: -1; background: linear-gradient(180deg, rgba(3, 12, 22, .14) 0%, rgba(3, 9, 15, .02) 42%, rgba(2, 5, 8, .58) 61%, #030507 82%), linear-gradient(90deg, rgba(0, 0, 0, .14), transparent 48%, rgba(0, 0, 0, .08)); }
.site-header { position: absolute; top: max(2.9rem, env(safe-area-inset-top)); right: clamp(1.55rem, 6.1vw, 6.5rem); left: clamp(1.55rem, 6.1vw, 6.5rem); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.wordmark { grid-column: 2; color: var(--ink); font-size: clamp(1.45rem, 4.8vw, 2.2rem); font-weight: 400; line-height: 1; letter-spacing: .39em; padding-left: .39em; text-decoration: none; }
.statement { position: absolute; right: clamp(1.55rem, 6.1vw, 10rem); bottom: clamp(5.5rem, 14.2svh, 11rem); left: clamp(1.55rem, 6.1vw, 10rem); max-width: 44rem; }
.statement-rule { width: 3.8rem; height: 2px; margin: 0 0 1rem; background: var(--gold); }
h1, p { margin: 0; }
h1 { margin-left: -.04em; font-size: clamp(3.4rem, 12.6vw, 7.2rem); font-weight: 500; letter-spacing: -.058em; line-height: .79; text-wrap: balance; }
p { margin-top: .9rem; font-size: clamp(1.35rem, 5.6vw, 2.2rem); font-weight: 500; line-height: .95; letter-spacing: -.025em; }
footer { position: absolute; right: clamp(1.55rem, 6.1vw, 10rem); bottom: max(1.55rem, env(safe-area-inset-bottom)); left: clamp(1.55rem, 6.1vw, 10rem); color: var(--ink); font-size: clamp(.82rem, 3.7vw, 1.1rem); letter-spacing: .19em; word-spacing: .25em; }
footer span + span { margin-left: 1.25rem; }
@media (min-width: 700px) { .hero-art { background-image: url("/dhilume-landscape.jpg"); background-size: auto 100%; background-position: center 42%; background-color: #07101a; } .atmosphere { background: linear-gradient(180deg, rgba(3, 12, 22, .13), rgba(3, 9, 15, .02) 45%, rgba(2, 5, 8, .56) 71%, #030507 100%), linear-gradient(90deg, #03070c 0%, rgba(3, 7, 12, .72) 11%, transparent 37%, transparent 63%, rgba(3, 7, 12, .72) 89%, #03070c 100%); } .statement { bottom: clamp(7.5rem, 16vh, 12rem); } .mobile-break { display: none; } }
@media (min-width: 1100px) { .site-header { top: 3.4rem; } .statement { max-width: 52rem; } h1 { font-size: clamp(5rem, 8.25vw, 8.8rem); } p { margin-top: 1.25rem; font-size: clamp(2rem, 2.5vw, 2.85rem); line-height: .9; } .statement-rule { margin-bottom: 1.35rem; width: 4.4rem; } }