:root{--paper:#f0efe9;--ink:#111110;--line:#c9c8c2;--orange:#ff4a00;--acid:#f4ef38;--pad:clamp(20px,3vw,48px);--font:Avenir,"Avenir Next",system-ui,-apple-system,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.35}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
button{font:inherit}
.shell{padding:0 var(--pad)}
.site-header{position:fixed;z-index:50;top:0;left:0;right:0;display:grid;grid-template-columns:1fr auto;align-items:start;padding:22px var(--pad);color:var(--ink);transition:color .25s ease}
.site-header.on-dark{color:var(--paper)}
.brand{display:block;width:clamp(54px,5.4vw,82px);line-height:0}
.brand img{display:block;width:100%;height:auto}
.brand .logo-neg{display:none}
.site-header.on-dark .logo-pos{display:none}
.site-header.on-dark .logo-neg{display:block}
.site-header nav{display:flex;gap:clamp(20px,3vw,54px);font-size:.8rem}
.site-header nav a:hover{opacity:.55}
.menu{display:none;border:0;background:transparent;color:inherit;padding:0;text-transform:uppercase;font-size:.75rem}
.section-grid{padding:120px var(--pad) var(--pad);min-height:100svh;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto 1fr auto;gap:20px}
.meta{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);font-size:.67rem;letter-spacing:.09em}
.meta span:last-child{text-align:right}
.hero h1{grid-column:1/-1;align-self:center;font-size:clamp(3.7rem,9.5vw,9rem);letter-spacing:-.075em;line-height:.83;font-weight:500}
.hero h1 span{display:block;opacity:0;transform:translateY(28px);animation:reveal .75s cubic-bezier(.2,.8,.2,1) forwards}
.hero h1 span:nth-child(2){animation-delay:.12s}
.hero h1 span:nth-child(3){animation-delay:.24s}
@keyframes reveal{to{opacity:1;transform:none}
}
.hero-copy{grid-column:7/11;font-size:clamp(1rem,1.35vw,1.3rem)}
.scroll-mark{grid-column:12;font-size:.62rem;letter-spacing:.08em;text-align:right;align-self:end}
.section-head{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;padding:28px 0 7rem;border-top:1px solid var(--line)}
.section-head>span{grid-column:1/4;font-size:.67rem;letter-spacing:.1em}
.section-head h2{grid-column:4/-1;font-size:clamp(3.2rem,7.4vw,7.3rem);line-height:.9;letter-spacing:-.06em;font-weight:500}
.work{padding-top:4rem;padding-bottom:12rem}
.project{margin-bottom:10rem}
.project-visual{position:relative;min-height:75vh;overflow:hidden;background:#d7d4ca}
.project-visual i{position:absolute;bottom:18px;left:20px;font-size:.6rem;letter-spacing:.12em;font-style:normal}
.nyfors{display:grid;place-items:center;background:repeating-linear-gradient(90deg,#d8d6ce 0,#d8d6ce 9.8%,#252524 10%,#252524 10.5%)}
.nyfors-logo-panel{width:min(58%,760px);padding:clamp(28px,5vw,76px);background:var(--paper);transform:rotate(-3deg);box-shadow:0 1px 0 rgba(0,0,0,.12)}
.nyfors-logo-panel img{display:block;width:100%;height:auto}
.project-meta{display:grid;grid-template-columns:2fr 1fr 1fr auto;padding-top:16px;border-top:1px solid var(--ink);gap:20px}
.project-meta h3{font-size:1.4rem;font-weight:500}
.project-meta p,.project-meta span{text-transform:uppercase;font-size:.68rem;letter-spacing:.08em}
.project-split{width:68%;margin-left:auto}
.project-split .project-visual{min-height:70vh}
.jupiter{background:#d5261b;color:#f4e9d4;display:flex;align-items:flex-end;padding:4vw}
.jupiter b{font-size:clamp(4rem,10vw,9rem);line-height:.76;letter-spacing:-.07em}
.work-coming{display:grid;grid-template-columns:3fr 6fr 3fr;align-items:start;border-top:1px solid var(--ink);padding-top:18px;margin-top:-3rem}
.work-coming span{font-size:.65rem;letter-spacing:.1em}
.work-coming p{font-size:clamp(1.4rem,2.4vw,2.5rem);line-height:1.05}
.disciplines{background:var(--ink);color:var(--paper);padding-top:6rem;padding-bottom:9rem}
.disciplines .section-head{border-color:#444}
.discipline-list article{display:grid;grid-template-columns:5fr 5fr 1fr;gap:20px;align-items:center;border-top:1px solid #454543;padding:20px 0;transition:.25s}
.discipline-list article:last-child{border-bottom:1px solid #454543}
.discipline-list h3{font-size:clamp(3.4rem,8vw,8rem);letter-spacing:-.065em;line-height:.9;font-weight:500}
.discipline-list p{color:#a4a39e}
.discipline-list span{text-align:right;font-size:.65rem}
.discipline-list article:hover,.discipline-list article:focus{color:var(--acid);padding-left:1vw;outline:none}
.culture-note{display:grid;grid-template-columns:3fr 6fr 3fr;margin-top:8rem}
.culture-note span{font-size:.65rem;letter-spacing:.1em}
.culture-note p{font-size:clamp(1.5rem,2.6vw,2.7rem);line-height:1.1}
.client-line{list-style:none;padding:5rem 0 0;margin:0;display:flex;gap:1rem;flex-wrap:wrap}
.client-line li{border:1px solid #555;border-radius:100%;padding:.8rem 1.4rem;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em}
.projects-intro{padding-top:9rem;padding-bottom:6rem}
.venture{position:relative;min-height:100svh;padding:var(--pad);overflow:hidden;display:grid;grid-template-columns:repeat(12,1fr);align-items:end}
.venture-label{position:absolute;left:var(--pad);top:2rem;font-size:.65rem;letter-spacing:.1em}
.venture-copy{grid-column:1/7;position:relative;z-index:2}
.venture-copy .eyebrow{font-size:.7rem;letter-spacing:.12em;margin-bottom:2rem}
.venture-copy h2{font-size:clamp(4rem,8vw,8rem);line-height:.82;letter-spacing:-.07em;font-weight:600}
.venture-copy>p:not(.eyebrow){font-size:1.1rem;max-width:440px;margin:2rem 0 4rem}
.venture-copy a{text-transform:uppercase;font-size:.75rem;letter-spacing:.1em;border-bottom:1px solid;padding-bottom:8px}
.venture-copy a span{margin-left:2rem}
.smiley{background:var(--acid);color:#121212}
.smiley-mark{position:absolute;right:-7vw;top:6vh;width:min(62vw,800px);aspect-ratio:1}
.smiley-mark img{display:block;width:100%;height:100%;object-fit:contain}
.bookr{background:var(--orange);color:#0a0a0a}
.bookr-status{position:absolute;z-index:3;top:2rem;right:var(--pad);display:flex;gap:2rem;font-size:.65rem;letter-spacing:.1em}
.bookr-word{position:absolute;top:9%;left:var(--pad);font-size:clamp(7rem,20vw,20rem);font-weight:800;line-height:.8;letter-spacing:-.09em;white-space:nowrap}
.bookr-word span{font-size:1rem;vertical-align:top;margin-left:1rem}
.bookr .venture-copy{grid-column:1/8}
.booking-slip{position:absolute;right:6vw;bottom:10vh;width:min(28vw,360px);height:45vh;background:#f4f0e8;padding:24px;display:flex;flex-direction:column;box-shadow:18px 18px 0 #111;transform:rotate(3deg)}
.booking-slip small{font-size:.6rem;letter-spacing:.12em}
.booking-slip strong{font-size:clamp(2rem,4vw,4rem);line-height:.9;margin:auto 0}
.booking-slip span{font-size:.7rem}
.booking-slip i{font-size:3rem;align-self:flex-end;font-style:normal}
.about{padding-top:9rem;padding-bottom:12rem}
.about-grid{display:grid;grid-template-columns:3fr 5fr 4fr;gap:20px;margin-bottom:7rem}
.about-grid>p{grid-column:4/9;font-size:clamp(1.2rem,2vw,1.8rem)}
.founder{grid-column:10/-1;display:flex;flex-direction:column;justify-content:flex-end}
.founder span{font-size:.65rem;letter-spacing:.1em;margin-bottom:1rem}
.founder strong{font-size:1.25rem;font-weight:500}
.studio-photo{width:78%;margin:0 0 0 auto}
.studio-photo img{display:block;width:100%;height:auto;filter:grayscale(1);background:#c8c8c8}
.studio-photo figcaption{display:flex;justify-content:space-between;padding-top:12px;border-top:1px solid var(--ink);font-size:.65rem;letter-spacing:.1em}
.archive{padding-bottom:11rem}
.timeline{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid}
.timeline article{min-height:310px;padding:20px;border-right:1px solid;display:flex;flex-direction:column}
.timeline article:first-child{border-left:1px solid}
.timeline time{font-size:clamp(2rem,4vw,4rem);letter-spacing:-.05em}
.timeline h3{font-size:1.5rem;font-weight:500;margin:auto 0}
.timeline span{font-size:.62rem;letter-spacing:.1em}
.timeline-open{background:#d8d6cf}
.contact{background:var(--ink);color:var(--paper);padding-top:7rem;min-height:100svh;display:flex;flex-direction:column}
.contact .section-head{border-color:#444;padding-bottom:4rem}
.contact h2{font-size:clamp(4rem,10vw,10rem);line-height:.84;letter-spacing:-.07em;font-weight:500}
.contact-mail{font-size:clamp(1.4rem,3vw,3.5rem);border-bottom:1px solid #555;padding:5rem 0 1rem;margin-top:auto}
.contact-mail span{float:right}
.contact-note{font-size:.68rem;color:#898984;max-width:420px;margin-top:12px}
.contact footer{border-top:1px solid #444;margin-top:5rem;padding:24px 0;display:grid;grid-template-columns:2fr 1fr 1fr;font-size:.65rem;letter-spacing:.08em}
.contact footer div{display:flex;flex-direction:column;gap:6px}

@media(max-width:750px){.site-header nav{display:none}
.menu{display:block}
.site-header.open{background:var(--ink);color:var(--paper);bottom:0}
.site-header.open .logo-pos{display:none}
.site-header.open .logo-neg{display:block}
.site-header.open nav{display:flex;position:absolute;left:var(--pad);top:28%;flex-direction:column;font-size:2.8rem;letter-spacing:-.05em}
.section-grid{padding-top:100px;grid-template-rows:auto 1fr auto auto}
.meta{grid-template-columns:1fr 1fr}
.meta span:nth-child(2){display:none}
.hero h1{font-size:clamp(3.5rem,16vw,6rem)}
.hero-copy{grid-column:1/-1}
.scroll-mark{grid-column:12}
.section-head{display:block;padding-bottom:4rem}
.section-head>span{display:block;margin-bottom:2rem}
.section-head h2{font-size:3.5rem}
.work{padding-top:2rem;padding-bottom:5rem}
.project{margin-bottom:5rem}
.project-visual{min-height:55vh}
.project-meta{grid-template-columns:1fr 1fr}
.project-meta h3{grid-column:1/-1}
.project-meta span{text-align:right}
.project-split{width:100%}
.project-split .project-visual{min-height:55vh}
.jupiter{padding:6vw 6vw 68px}
.jupiter b{font-size:clamp(3.2rem,14.3vw,3.85rem);line-height:.8}
.work-coming{grid-template-columns:1fr 2fr;margin-top:-1rem}
.work-coming p{font-size:1.35rem}
.discipline-list article{grid-template-columns:1fr auto}
.discipline-list h3{font-size:3.7rem}
.discipline-list p{grid-column:1/-1}
.culture-note{display:block;margin-top:5rem}
.culture-note span{display:block;margin-bottom:2rem}
.client-line{padding-top:3rem}
.venture{min-height:850px}
.venture-copy,.bookr .venture-copy{grid-column:1/-1}
.venture-copy h2{font-size:3.7rem}
.smiley-mark{width:84vw;right:-20vw;top:10vh}
.bookr{min-height:auto;display:block;padding-top:7rem;padding-bottom:4rem}
.bookr-status{top:4.5rem;left:var(--pad);right:auto;gap:1rem;width:calc(100% - var(--pad)*2);justify-content:space-between;font-size:.6rem}
.bookr-word{position:static;font-size:24vw;margin:4.5rem 0 5rem;white-space:nowrap}
.bookr .venture-copy h2{font-size:clamp(2.75rem,12.5vw,3.35rem);line-height:.88}
.bookr .venture-copy>p:not(.eyebrow){margin:1.5rem 0 2.75rem}
.booking-slip{position:relative;width:calc(100% - 14px);height:280px;bottom:auto;right:auto;margin:4.5rem 0 14px;transform:rotate(1deg);box-shadow:12px 12px 0 #111}
.about-grid{display:block}
.about-grid>p{font-size:1.25rem}
.founder{margin-top:4rem}
.studio-photo{width:100%;margin-top:4rem}
.timeline{grid-template-columns:1fr}
.timeline article{min-height:220px;border-left:1px solid;border-bottom:1px solid}
.contact h2{font-size:16vw}
.contact footer{grid-template-columns:1fr 1fr;gap:2rem}
.contact footer>span{grid-column:1/-1}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.hero h1 span{animation:none;opacity:1;transform:none}
}