@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');

:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #102a43; color: #f7f3ea; font-family: "DM Sans", Arial, sans-serif; }
.page { position: relative; isolation: isolate; min-height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(1.5rem, 4vw, 4rem); }
.grain { position: absolute; z-index: -1; inset: 0; opacity: .16; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); pointer-events: none; }
.page::before { content: ""; position: absolute; z-index: -2; width: min(70vw, 60rem); height: min(70vw, 60rem); right: -21rem; top: -23rem; border: 1px solid rgba(213,166,74,.38); border-radius: 50%; box-shadow: 0 0 0 5rem rgba(213,166,74,.035), 0 0 0 10rem rgba(213,166,74,.025); }
.header, footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font: 500 .75rem/1 "DM Mono", monospace; letter-spacing: .09em; text-transform: uppercase; }
.header p, footer { margin: 0; color: rgba(247,243,234,.72); }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: inherit; text-decoration: none; letter-spacing: .13em; }
.monogram { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border: 1px solid #d5a64a; color: #d5a64a; font: 500 1.2rem/1 "Playfair Display", serif; letter-spacing: 0; }
.hero { align-self: center; max-width: 62rem; padding: clamp(4rem, 11vh, 8rem) 0; }
.eyebrow { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.75rem; color: #d5a64a; font: 500 clamp(.65rem, 1vw, .76rem)/1.2 "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.eyebrow span { width: 2.5rem; height: 1px; background: currentColor; }
h1 { max-width: 8ch; margin: 0; font: 500 clamp(4.6rem, 13vw, 10.5rem)/.84 "Playfair Display", Georgia, serif; letter-spacing: -.07em; }
h1 em { color: #d5a64a; font-weight: 500; }
.intro { max-width: 30rem; margin: clamp(2.5rem, 6vw, 5rem) 0 0; color: rgba(247,243,234,.84); font-size: clamp(1rem, 1.7vw, 1.2rem); line-height: 1.65; }
footer { padding-top: 1rem; border-top: 1px solid rgba(247,243,234,.18); }
.separator { width: .25rem; height: .25rem; background: #d5a64a; border-radius: 50%; margin-right: auto; }
@media (max-width: 520px) { .page { padding: 1.5rem; } .header, footer { font-size: .65rem; } .hero { padding: 4rem 0; } h1 { font-size: clamp(4.25rem, 22vw, 6.5rem); } .intro { max-width: 19rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }