:root { --paper:#e9e5dd; --ink:#111110; --soft:#6c6a65; --line:rgba(17,17,16,.18); --gold:#cba36a; --gold-light:#f5d49a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope, sans-serif; }
a { color:inherit; text-decoration:none; }
.hero { height:360vh; background:#0d0d0d; }
.hero-stage { --scroll:0; position:sticky; top:0; height:100vh; overflow:hidden; background:#0d0d0d; contain:paint; }
#watch-canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.grain { position:absolute; inset:0; opacity:.12; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' 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='.6'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; }
.hero-stage::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(2,2,2,.42) 0%,transparent 52%,rgba(0,0,0,.2)),linear-gradient(0deg,rgba(0,0,0,.35),transparent 30%); z-index:1; }
.nav,.hero-copy,.hero-meta,.scroll-line { position:absolute; z-index:2; }
.nav { left:clamp(24px,4vw,68px); right:clamp(24px,4vw,68px); top:28px; display:flex; align-items:center; justify-content:space-between; color:var(--gold-light); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.wordmark { font-size:18px; font-weight:600; letter-spacing:.22em; } .wordmark span { font-size:7px; vertical-align:top; margin-left:3px; }
.nav nav { position:absolute; left:50%; display:flex; gap:32px; margin:0; transform:translateX(-50%); } .nav nav a { opacity:.76; transition:opacity .2s; } .nav nav a:hover { opacity:1; }
.menu { display:flex; align-items:center; gap:10px; } .menu i { display:block; width:7px; height:7px; border:1px solid currentColor; border-radius:50%; }
.hero-copy { top:49%; left:clamp(24px,10vw,165px); transform:translateY(-50%); color:var(--gold-light); }
.hero-brand { margin:0 0 23px; color:rgba(245,212,154,.58); font:500 clamp(18px,2vw,30px)/1 'Playfair Display',serif; letter-spacing:.07em; text-transform:uppercase; }
.eyebrow,.section-kicker { margin:0 0 20px; font:500 10px/1 DM Mono,monospace; letter-spacing:.14em; text-transform:uppercase; }
h1,h2 { font:500 clamp(53px,7.4vw,122px)/.9 'Playfair Display',serif; letter-spacing:-.065em; margin:0; } h1 em,h2 em { font-weight:500; }
.hero-copy h1 { background:linear-gradient(105deg,#9c713e 6%,var(--gold-light) 35%,#ad7b42 57%,#f9dfaa 72%,#9b6a37 94%); background-position:calc(var(--scroll) * 170%) 50%; background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 3px 18px rgba(0,0,0,.25)); }
.hero-meta { left:clamp(24px,4vw,68px); right:clamp(24px,4vw,68px); bottom:31px; display:flex; align-items:center; justify-content:space-between; color:var(--gold-light); font:10px DM Mono,monospace; letter-spacing:.1em; text-transform:uppercase; opacity:.88; }
.dial-mark { width:28px; height:28px; border:1px solid rgba(245,212,154,.62); border-radius:50%; position:relative; }.dial-mark::before,.dial-mark::after { content:""; position:absolute; left:50%; top:50%; width:1px; height:8px; transform-origin:50% 100%; background:var(--gold-light); }.dial-mark::before { transform:translate(-50%,-100%) rotate(calc(25deg + var(--scroll) * 300deg)); }.dial-mark::after { height:6px; transform:translate(-50%,-100%) rotate(calc(145deg + var(--scroll) * 600deg)); }
.scroll-line { z-index:3; left:0; bottom:0; height:2px; width:100%; transform:scaleX(0); transform-origin:left center; background:linear-gradient(90deg,var(--gold),var(--gold-light)); will-change:transform; }
.intro { padding:clamp(90px,13vw,190px) clamp(24px,10vw,165px); contain:layout style; } .intro-grid { display:grid; grid-template-columns:1.55fr .65fr; gap:8vw; align-items:end; }
.intro h2,.closing h2 { font-size:clamp(44px,5.5vw,90px); } .intro-grid p { margin:0; color:#4d4b47; font-size:15px; line-height:1.8; max-width:390px; }
.text-link { display:inline-flex; gap:14px; margin-top:45px; border-bottom:1px solid var(--ink); padding-bottom:8px; font:500 11px DM Mono,monospace; text-transform:uppercase; letter-spacing:.08em; }
.details { border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); padding:0 clamp(24px,4vw,68px); }
.detail-card { min-height:360px; border-right:1px solid var(--line); padding:28px clamp(20px,3vw,52px); display:flex; flex-direction:column; contain:layout style paint; } .detail-card:last-child { border:0; }
.detail-card span { color:var(--soft); font:10px DM Mono,monospace; } .detail-card h3 { margin:auto 0 10px; font:500 clamp(42px,4vw,66px)/1 'Playfair Display',serif; letter-spacing:-.05em; } .detail-card p { margin:0; color:#595751; font-size:13px; line-height:1.7; max-width:210px; }
.closing { background:#171716; color:#f1ede5; min-height:78vh; padding:clamp(80px,10vw,150px) clamp(24px,10vw,165px); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; contain:layout style; } .closing h2 { margin-bottom:50px; }
.button { border:1px solid rgba(255,255,255,.55); border-radius:100px; padding:15px 19px; display:flex; gap:32px; font:500 11px DM Mono,monospace; text-transform:uppercase; letter-spacing:.07em; transition:background .2s,color .2s; }.button:hover { background:#f1ede5; color:#171716; }
@media (max-width:700px) { .hero { height:300vh; }.nav { top:21px; }.nav nav { display:none; }.wordmark { font-size:15px; }.hero-copy { left:24px; right:24px; top:51%; }.hero-copy h1 { font-size:clamp(50px,16vw,72px); }.hero-brand { margin-bottom:17px; }.hero-meta { bottom:22px; }.intro-grid { grid-template-columns:1fr; gap:42px; }.details { grid-template-columns:1fr; }.detail-card { min-height:245px; border-right:0; border-bottom:1px solid var(--line); padding:25px 0; }.detail-card:last-child { border-bottom:0; }.detail-card h3 { margin:auto 0 6px; } }