@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root { --black:#080808; --white:#f3f3ef; --gray:#a4a4a0; --line:rgba(243,243,239,.22); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--black); }
body { margin:0; color:var(--white); background:var(--black); font-family:Inter,Arial,sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; height:auto; }
.skip-link { position:fixed; z-index:100; left:1rem; top:-4rem; padding:.8rem 1rem; background:var(--white); color:var(--black); }
.skip-link:focus { top:1rem; }
.site-header { position:absolute; inset:0 0 auto; z-index:10; display:flex; align-items:center; justify-content:space-between; padding:1.4rem 2rem; font-size:.72rem; letter-spacing:.16em; mix-blend-mode:difference; }
.site-header nav { display:flex; gap:2rem; }
.site-header a { padding:.5rem 0; border-bottom:1px solid transparent; }
.site-header a:hover,.site-header a:focus-visible { border-color:currentColor; }
.nav-name { font-weight:800; }
.hero { min-height:100svh; position:relative; background:#ddd; color:#070707; overflow:hidden; }
.hero-media { position:absolute; inset:0; }
.hero-media img { width:100%; height:100%; object-fit:cover; object-position:center; }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(244,244,240,.2),transparent 52%); pointer-events:none; }
.hero-type { position:absolute; z-index:2; left:clamp(1.25rem,5vw,5rem); top:50%; transform:translateY(-48%); }
.hero h1 { margin:0; font-size:clamp(5rem,13.5vw,13.8rem); line-height:.72; letter-spacing:-.09em; font-weight:900; }
.hero h1 span { display:block; opacity:0; transform:translateY(32px); animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards; }
.hero h1 span:nth-child(2) { animation-delay:.15s; }
.hero-type p { margin:2.2rem 0 0 .6vw; font-size:.75rem; letter-spacing:.38em; font-weight:600; opacity:0; animation:fade 1s .65s forwards; }
.scroll-cue { position:absolute; z-index:3; left:2rem; bottom:1.8rem; display:flex; gap:1rem; font-size:.65rem; letter-spacing:.18em; }
.release { min-height:100svh; display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:7vw; padding:10vw 8vw; border-top:1px solid var(--line); }
.eyebrow { margin:0 0 2rem; font-size:.69rem; letter-spacing:.3em; color:var(--gray); }
.release h2 { margin:0; max-width:10ch; font-size:clamp(3rem,7.2vw,7.5rem); line-height:.9; letter-spacing:-.07em; text-transform:uppercase; }
.release-date { margin:2.6rem 0 .45rem; font-size:clamp(1rem,1.4vw,1.3rem); letter-spacing:.08em; }
.release-status { margin:0; color:var(--gray); font-size:.7rem; letter-spacing:.28em; }
.cover { margin:0; width:min(100%,42rem); justify-self:end; box-shadow:0 2.5rem 6rem rgba(0,0,0,.45); }
.editorial { position:relative; min-height:130svh; background:var(--white); color:var(--black); display:grid; place-items:center; overflow:hidden; padding:12vh 8vw; }
.mirror { display:block; width:min(54vw,46rem); }
.editorial-index { position:absolute; top:3rem; left:3rem; font-size:.66rem; letter-spacing:.2em; }
.vertical-type { position:absolute; right:2.2rem; top:50%; margin:0; writing-mode:vertical-rl; font-size:.63rem; letter-spacing:.28em; }
.statement { min-height:115svh; display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:6vw; padding:10vw 8vw; }
.statement h2 { margin:0; font-size:clamp(5rem,12vw,13rem); line-height:.72; letter-spacing:-.09em; }
.statement-type>p:last-child { margin:3rem 0 0; letter-spacing:.3em; font-size:.72rem; color:var(--gray); }
.motion-portrait { width:min(100%,43rem); justify-self:end; }
.connect { min-height:72svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:var(--white); color:var(--black); padding:4rem 1.25rem; }
.connect .eyebrow { color:#666; }
.connect h2 { margin:0; font-size:clamp(3.5rem,11vw,11rem); line-height:1; letter-spacing:-.07em; }
.connect h2 span { font-size:.25em; vertical-align:top; margin-left:.5em; }
.connect a { display:inline-block; border-bottom:.06em solid transparent; transition:border-color .25s; }
.connect a:hover,.connect a:focus-visible { border-color:currentColor; }
footer { display:grid; grid-template-columns:1fr 1fr 1fr; padding:2rem; font-size:.63rem; letter-spacing:.16em; border-top:1px solid var(--line); }
footer p { margin:0; text-align:center; } footer a:last-child { text-align:right; }
.reveal { opacity:0; transform:translateY(36px); transition:opacity 1s ease,transform 1s cubic-bezier(.2,.8,.2,1); }
.reveal.in-view { opacity:1; transform:none; }
@keyframes rise { to { opacity:1; transform:none; } } @keyframes fade { to { opacity:1; } }

@media (max-width:760px) {
  .site-header { padding:1.1rem 1rem; } .site-header nav { gap:1rem; } .site-header nav a:last-child { display:none; }
  .hero { min-height:92svh; }
  .hero-media img { object-fit:cover; object-position:64% center; }
  .hero::after { background:linear-gradient(180deg,rgba(240,240,237,.26),transparent 42%); }
  .hero-type { top:auto; bottom:8.5rem; left:1.1rem; transform:none; }
  .hero h1 { font-size:clamp(4.75rem,25vw,7.5rem); line-height:.75; }
  .hero-type p { margin-top:1.7rem; font-size:.63rem; }
  .scroll-cue { left:1.1rem; bottom:1.2rem; }
  .release { grid-template-columns:1fr; gap:3rem; padding:7rem 1.2rem; }
  .release-copy { order:2; } .cover { order:1; }
  .release h2 { font-size:clamp(3.3rem,16vw,5.3rem); }
  .editorial { min-height:auto; padding:8rem 1.2rem; place-items:start; }
  .mirror { width:100%; }
  .editorial-index { left:1.2rem; top:2rem; }
  .vertical-type { right:.35rem; }
  .statement { min-height:auto; grid-template-columns:1fr; padding:7rem 1.2rem; }
  .statement-type { order:2; margin-top:1.5rem; }
  .statement h2 { font-size:clamp(5rem,27vw,8rem); }
  .motion-portrait { order:1; }
  .connect { min-height:58svh; }
  footer { grid-template-columns:1fr 1fr; gap:1rem; padding:1.5rem 1.2rem; }
  footer p { text-align:right; } footer a:last-child { display:none; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } .hero h1 span,.hero-type p,.reveal { opacity:1; transform:none; } }