:root { --paper:#eee9df; --ink:#20211e; --graphite:#30322f; --navy:#182a36; --accent:#c95438; --line:rgba(32,33,30,.22); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'Space Grotesk', sans-serif; }
a { color:inherit; }
.site-nav { position:fixed; z-index:10; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:26px 4vw; color:#fff; mix-blend-mode:difference; }
.wordmark { font-size:1.45rem; font-weight:700; letter-spacing:.16em; text-decoration:none; }.wordmark span { color:var(--accent); }
.nav-cta,.text-link { text-decoration:none; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; }.nav-cta span,.text-link span { color:var(--accent); font-size:1.15rem; margin-left:8px; }
.image-panel { min-height:100svh; position:relative; color:#fff; isolation:isolate; background-image:linear-gradient(90deg,rgba(18,20,18,.4),rgba(18,20,18,.04)),var(--image); background-position:center; background-size:cover; }
.image-panel::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(0,0,0,.24),transparent 30%,rgba(0,0,0,.28)); }
.hero-copy { position:absolute; left:8vw; top:32%; width:min(520px,42vw); }.eyebrow { margin:0 0 24px; font-family:'DM Mono',monospace; font-size:.66rem; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); }.hero h1 { margin:0 0 10px; font-size:clamp(6rem,18vw,15rem); line-height:.8; letter-spacing:-.09em; }.hero-line { max-width:390px; margin:32px 0 38px; font-size:clamp(1.15rem,2vw,1.65rem); line-height:1.15; }.image-note { position:absolute; right:4vw; bottom:28px; margin:0; font-family:'DM Mono',monospace; font-size:.62rem; text-transform:uppercase; letter-spacing:.1em; opacity:.75; }
.section-light,.section-dark { min-height:100svh; padding:12vw 8vw 10vw; position:relative; }.section-light { background:var(--paper); }.section-dark { background:var(--navy); color:var(--paper); }.section-index { position:absolute; top:45px; right:8vw; font: .62rem 'DM Mono',monospace; color:var(--accent); }
.intro { display:grid; grid-template-columns:1fr 2fr; gap:4vw; align-content:center; }.intro-heading h2,.difference h2,.closing h2 { max-width:720px; margin:0; font-size:clamp(2.5rem,5.8vw,6.5rem); line-height:.92; letter-spacing:-.07em; font-weight:500; }.three-blocks { grid-column:2; display:grid; grid-template-columns:repeat(3,1fr); gap:3vw; margin-top:12vw; border-top:1px solid var(--line); }.three-blocks article { padding-top:22px; }.three-blocks span { font: .65rem 'DM Mono',monospace; color:var(--accent); }.three-blocks h3 { font-size:1.15rem; font-weight:500; margin:40px 0 14px; }.three-blocks p { max-width:210px; font-size:.9rem; line-height:1.45; color:#5c5c56; }
.detail-panel { min-height:100svh; }.image-quote { position:absolute; left:8vw; bottom:11vw; max-width:460px; font-size:clamp(1.8rem,3.6vw,4rem); line-height:.98; letter-spacing:-.055em; }
.difference { display:grid; grid-template-columns:1fr 2fr; gap:4vw; align-content:center; }.difference-content h2 { max-width:650px; color:var(--paper); }.large-copy { max-width:720px; margin:70px 0 0; font-size:clamp(1.1rem,1.9vw,1.65rem); line-height:1.3; color:#c7c8bd; }.facts { display:flex; gap:7vw; margin-top:90px; padding-top:22px; border-top:1px solid rgba(238,233,223,.27); }.facts div { display:flex; align-items:baseline; gap:13px; }.facts strong { font-size:3.4rem; font-weight:400; color:var(--accent); letter-spacing:-.08em; }.facts span { font: .62rem 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.06em; color:#aeb4af; }
.city-copy { position:absolute; left:8vw; bottom:11vw; max-width:500px; }.city-copy p:last-child { margin:0; font-size:clamp(1.8rem,4vw,4.6rem); line-height:.94; letter-spacing:-.06em; }.closing { display:grid; grid-template-columns:1fr 2fr; gap:4vw; align-content:center; min-height:88svh; }.closing-content p:not(.eyebrow) { max-width:530px; margin:46px 0 38px; color:#5c5c56; font-size:1.1rem; line-height:1.4; }.button { display:inline-flex; align-items:center; gap:45px; padding:17px 22px; background:var(--ink); color:var(--paper); text-decoration:none; text-transform:uppercase; font-size:.72rem; letter-spacing:.12em; }.button span { color:var(--accent); font-size:1.1rem; }.closing footer { grid-column:1/-1; display:flex; justify-content:space-between; gap:20px; align-items:center; margin-top:12vw; padding-top:20px; border-top:1px solid var(--line); font: .62rem 'DM Mono',monospace; text-transform:uppercase; color:#6a6a62; }.closing footer span:first-child { color:var(--ink); font:700 1rem 'Space Grotesk',sans-serif; letter-spacing:.16em; }
.fade-up { animation:rise .9s ease both; } @keyframes rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@media (max-width:760px) { .site-nav { padding:20px 6vw; }.hero-copy { left:7vw; top:27%; width:80vw; }.hero h1 { font-size:clamp(6rem,30vw,10rem); }.hero-line { max-width:285px; }.section-light,.section-dark { padding:110px 7vw 80px; }.intro,.difference,.closing { display:block; }.section-index { top:30px; right:7vw; }.intro-heading h2,.difference h2,.closing h2 { font-size:clamp(3rem,13vw,5rem); }.three-blocks { grid-template-columns:1fr; gap:0; margin-top:80px; }.three-blocks article { border-top:1px solid var(--line); padding:20px 0 22px; }.three-blocks h3 { margin:24px 0 8px; }.three-blocks p { margin:0; max-width:300px; }.image-quote,.city-copy { left:7vw; bottom:13vw; max-width:77vw; }.large-copy { margin-top:55px; }.facts { gap:20px; margin-top:60px; flex-wrap:wrap; }.facts strong { font-size:2.8rem; }.closing-content p:not(.eyebrow) { margin-top:38px; }.closing footer { margin-top:110px; display:grid; grid-template-columns:1fr 1fr; }.closing footer span:nth-child(2) { grid-column:1/-1; grid-row:2; }.closing footer span:last-child { grid-column:2; grid-row:1; text-align:right; } }