@font-face{font-family:Montserrat;src:url('assets/montserrat-400.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Montserrat;src:url('assets/montserrat-800.ttf') format('truetype');font-style:normal;font-weight:800;font-display:swap}
:root{--ink:#0b0d10;--paper:#f5efe7;--muted:#c4c2bf;--gold:#c9a85a;--gutter:clamp(28px,4.5vw,96px);--crossfade:320ms;--ease:cubic-bezier(.2,.65,.3,1)}
*{box-sizing:border-box}
html{background:var(--ink);color:var(--paper);font-family:Montserrat,Arial,sans-serif}
body{margin:0}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--gold);outline-offset:8px}
.hero{isolation:isolate;position:relative;width:100%;height:100vh;height:100dvh;min-height:760px;overflow:hidden;background:var(--ink)}
.portraits{position:absolute;inset:0;z-index:-2}
.portrait{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.portrait-groucho{opacity:0;transition:opacity var(--crossfade) ease-in-out}
.hero.hero-alt-active .portrait-groucho{opacity:1}
.hero:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.1),transparent 62%)}
.header{position:relative;display:flex;align-items:flex-start;justify-content:space-between;padding:38px var(--gutter);gap:24px;animation:arrive 650ms var(--ease) both}
.brand{display:block;width:122px}
.brand img{display:block;width:100%;height:auto}
.nav-link{font-size:14px;display:inline-block;position:relative;padding:12px 0;letter-spacing:.02em}
.nav-link:after{content:"";position:absolute;left:0;bottom:3px;width:100%;height:1px;background:var(--gold);transform:scaleX(.4);transform-origin:left;transition:transform 220ms ease}
.nav-link:hover:after,.nav-link:focus-visible:after{transform:scaleX(1)}
.intro{position:absolute;left:var(--gutter);top:39%;width:56%;animation:arrive 800ms 90ms var(--ease) both}
h1{margin:0 0 38px;font-size:clamp(60px,8.1vw,168px);line-height:1.02;font-weight:800;letter-spacing:-.065em}
h1 span{display:block}
h1 span:first-child{letter-spacing:-.055em}
.statement{font-size:clamp(20px,1.8vw,32px);line-height:1.35;letter-spacing:-.035em;margin:0 0 17px}
.description{font-size:clamp(16px,1.12vw,20px);line-height:1.65;color:var(--muted);max-width:31em;margin:0;letter-spacing:-.02em}
@media(hover:hover) and (pointer:fine){.hero:hover .portrait-groucho{opacity:1}}
@keyframes arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px) and (min-width:701px){.intro{top:auto;bottom:9%;width:85%}.portrait{object-position:67% center}.hero:after{background:linear-gradient(0deg,rgba(4,6,8,.9),transparent 66%)}h1{font-size:10vw}.statement{font-size:25px}}
@media(max-width:700px){
 :root{--gutter:24px}
 .hero{min-height:780px;min-height:max(780px,100svh)}
 .header{padding-top:25px}.brand{width:92px}
 .portraits{height:74%}
 .portrait{object-position:76% top}
 .hero:after{background:linear-gradient(0deg,var(--ink) 14%,rgba(11,13,16,.98) 24%,rgba(11,13,16,.78) 34%,transparent 55%)}
 .intro{top:auto;bottom:42px;width:calc(100% - 2 * var(--gutter))}
 h1{font-size:12.35vw;line-height:1.08;letter-spacing:-.065em;margin-bottom:25px}
 .statement{font-size:20px;max-width:19em;margin-bottom:13px}
 .description{font-size:16px;max-width:24em;line-height:1.55}
 .desktop-break{display:none}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}