@font-face { font-family: Northframe; src: local("Arial"); font-display: swap; }
:root { color-scheme: dark; --ink:#f0eee8; --muted:#a8a8a2; --line:#303238; --bg:#0a0d12; --accent:#d9ff52; font-family: Northframe, Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); }
a { color: inherit; text-decoration: none; }
.topbar { height: 72px; padding: 0 clamp(20px,4vw,68px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.13); position:absolute; inset:0 0 auto; z-index:5; }
.brand { font-size:.88rem; font-weight:800; letter-spacing:.22em; }
nav { display:flex; gap:clamp(18px,3vw,42px); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; }
nav a { opacity:.72; transition:opacity .2s; } nav a:hover { opacity:1; }
.hero { min-height:100svh; position:relative; display:grid; align-items:end; overflow:hidden; }
.hero picture,.hero img,.veil { position:absolute; inset:0; width:100%; height:100%; }
.hero img { object-fit:cover; object-position:center; }
.veil { background:linear-gradient(90deg,rgba(3,6,10,.67) 0%,rgba(3,6,10,.2) 52%,rgba(3,6,10,.05)),linear-gradient(0deg,rgba(3,6,10,.73),transparent 42%); }
.hero-copy { position:relative; z-index:2; padding:140px clamp(20px,6vw,96px) clamp(94px,10vh,132px); }
.kicker,.section-label { margin:0 0 22px; color:var(--accent); font-size:.72rem; text-transform:uppercase; letter-spacing:.18em; }
h1 { margin:0; max-width:900px; font-size:clamp(3.8rem,10vw,9.5rem); font-weight:500; line-height:.82; letter-spacing:-.075em; }
.watch { display:inline-flex; gap:12px; align-items:center; margin-top:42px; font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; }
.watch span { display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(255,255,255,.6); border-radius:50%; font-size:.62rem; }
.hero-meta { position:absolute; z-index:2; right:clamp(20px,4vw,68px); bottom:30px; margin:0; color:#d5d5d0; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; }
.intro { display:grid; grid-template-columns:1fr 2.3fr 1fr; gap:clamp(28px,5vw,84px); padding:clamp(90px,12vw,180px) clamp(20px,6vw,96px); border-bottom:1px solid var(--line); }
.statement { margin:0; font-size:clamp(2rem,4.5vw,5rem); line-height:1.04; letter-spacing:-.04em; }
.details { align-self:end; margin:0; color:var(--muted); font-size:.86rem; line-height:1.7; }
.collection { padding:clamp(80px,10vw,150px) clamp(20px,4vw,68px); }
.section-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:36px; border-bottom:1px solid var(--line); padding-bottom:20px; }
.section-head h2 { margin:0; font-size:clamp(1.7rem,3vw,3.2rem); font-weight:500; letter-spacing:-.04em; }
.section-head p { margin:0; color:var(--muted); font-size:.72rem; letter-spacing:.14em; }
.grid { display:grid; grid-template-columns:1.35fr .8fr; gap:16px; }
.card { position:relative; min-height:330px; overflow:hidden; background:#14181f; }
.card-wide { grid-row:span 2; min-height:720px; }
.card picture,.card img { width:100%; height:100%; display:block; }
.card img { object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s; }
.card:hover img { transform:scale(1.018); filter:brightness(1.08); }
.card-copy { position:absolute; inset:auto 0 0; padding:24px; background:linear-gradient(transparent,rgba(0,0,0,.78)); }
.card-copy h3 { margin:34px 0 6px; font-size:1.35rem; font-weight:500; }
.card-copy p,.card-copy span { margin:0; font-size:.67rem; letter-spacing:.1em; color:#d2d2cc; text-transform:uppercase; }
.card-copy span { position:absolute; right:24px; bottom:24px; }
.card-quote { padding:36px; display:flex; flex-direction:column; justify-content:space-between; background:var(--accent); color:#11140c; }
.card-quote p { max-width:14ch; margin:0; font-size:clamp(1.8rem,3vw,3.2rem); line-height:1.05; letter-spacing:-.045em; }
.card-quote span { font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; }
.archive { margin:0 clamp(20px,4vw,68px); padding:clamp(70px,8vw,120px) 0; border-top:1px solid var(--line); display:grid; grid-template-columns:2fr 1fr; gap:80px; }
.archive h2 { margin:0; font-size:clamp(3rem,7vw,7.5rem); font-weight:500; line-height:.92; letter-spacing:-.065em; }
.archive > p { align-self:end; max-width:32rem; margin:0; color:var(--muted); line-height:1.7; }
footer { margin:0 clamp(20px,4vw,68px); padding:28px 0 42px; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:var(--muted); font-size:.66rem; letter-spacing:.11em; text-transform:uppercase; }
@media (max-width:800px) { .topbar nav { display:none; } .hero-meta { display:none; } .intro { grid-template-columns:1fr; } .details { max-width:32rem; } .grid { grid-template-columns:1fr; } .card-wide { min-height:70vh; grid-row:auto; } .card { min-height:420px; } .archive { grid-template-columns:1fr; gap:48px; } footer { display:block; line-height:1.8; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .card img { transition:none; } }