/* Tokens */
:root {
  --bg: #ffffff;
  --ink: #0b0b0b;
  --muted: rgba(11, 11, 11, 0.48);
  --hairline: rgba(11, 11, 11, 0.12);
  --paper: #ece8e0;
  --cool: #dde6e7;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(16px, 4vw, 48px);
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --card-w: clamp(200px, 15vw, 240px);
  --card-w-active: clamp(280px, 22vw, 350px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
a:focus-visible, [tabindex]:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.skip-link { position: absolute; left: var(--gutter); top: 10px; z-index: 50; background: var(--bg); border: 1px solid var(--hairline); padding: 8px 12px; transform: translateY(-160%); transition: transform .2s var(--ease); }
.skip-link:focus { transform: none; }

/* Header */
.site-header { position: relative; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 18px; padding: clamp(14px, 3vw, 30px) var(--gutter) 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; }
.site-header nav ul { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; }
.site-header nav a { color: var(--muted); font-weight: 500; transition: color .2s var(--ease); }
.site-header nav li + li::before { content: ","; color: var(--muted); margin-right: .3em; font-weight: 500; }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { color: var(--ink); }
.site-header .contact-link { justify-self: end; }
.uline { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat, linear-gradient(currentColor, currentColor) 0 calc(100% - 3px) / 100% 1px no-repeat; padding-bottom: 5px; transition: background-size .35s var(--ease); }
.uline:hover { background-size: 0% 1px, 100% 1px; }
.menu-button { display: none; justify-self: end; font-weight: 600; }

/* Mobile menu (inverted palette) */
.mobile-menu { position: fixed; inset: 0; z-index: 40; background: var(--ink); color: var(--bg); display: flex; flex-direction: column; padding: clamp(14px, 3vw, 30px) var(--gutter); clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--ease); visibility: hidden; }
.mobile-menu.is-open { clip-path: inset(0); visibility: visible; }
.mobile-menu__top { display: flex; justify-content: space-between; font-weight: 600; }
.mobile-menu__nav { display: flex; flex-direction: column; gap: 6px; margin-top: 12vh; font-size: clamp(2.4rem, 10vw, 4rem); font-weight: 600; letter-spacing: -0.04em; }
.mobile-menu__wordmark { margin-top: auto; }

/* Wordmark */
.wordmark { margin: 0; display: flex; flex-wrap: nowrap; justify-content: center; align-items: baseline; gap: .08em; line-height: .82; font-weight: normal; white-space: nowrap; }
.wordmark__sans { font-family: var(--sans); font-weight: 650; font-size: .8em; letter-spacing: -0.055em; }
.wordmark__serif { font-family: var(--serif); font-style: italic; font-size: 1.12em; letter-spacing: -0.02em; }
.wordmark .ch { display: inline-block; }
.mobile-menu__wordmark .wordmark { justify-content: flex-start; font-size: clamp(3.6rem, 17vw, 9rem); }

/* Home layout */
.is-home body { overflow: hidden; }
.home { position: relative; height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
.home main { position: relative; flex: 1; min-height: 0; }
.home-footer { position: absolute; left: 0; right: 0; bottom: -0.06em; z-index: 1; font-size: clamp(2.4rem, 15.4vw, 17rem); pointer-events: none; }

.work { position: relative; z-index: 2; height: 100%; }
.work-scroller { height: 100%; display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 calc(50vw - var(--card-w-active) / 2); cursor: grab; }
.work-scroller::-webkit-scrollbar { display: none; }
.work-scroller.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.work-scroller.is-dragging a { pointer-events: none; }
.work-card { flex: 0 0 auto; width: var(--card-w); scroll-snap-align: center; transition: width .7s var(--ease); margin-top: -8vh; }
.work-card.is-active { width: var(--card-w-active); }
.work-card a { display: block; }
.work-meta { font-size: .86rem; line-height: 1.15; margin-bottom: 8px; opacity: .55; transition: opacity .4s var(--ease); }
.work-card.is-active .work-meta { opacity: 1; }
.work-meta__row { display: flex; gap: .4em; font-weight: 600; letter-spacing: -0.01em; }
.work-meta__index { font-variant-numeric: tabular-nums; }
.work-meta__tag { color: var(--muted); text-transform: uppercase; font-size: .72rem; letter-spacing: .02em; margin-top: 2px; }
.work-media { aspect-ratio: 5 / 7; overflow: hidden; position: relative; background: var(--paper); }
.work-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.1s var(--ease); }
.work-card a:hover .work-media img { transform: scale(1); }
.work-media--dark { background: #000; }
.work-media--dark img { object-fit: contain; }


/* Posters for work without public images */
.poster { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 14px; }
.poster--paper { background: var(--paper); color: var(--ink); }
.poster--cool { background: var(--cool); color: var(--ink); }
.poster--ink { background: var(--ink); color: var(--bg); }
.poster__word { font-family: var(--serif); font-style: italic; font-size: clamp(2.6rem, 4.4vw, 4.4rem); line-height: .9; letter-spacing: -0.02em; }
.poster__note { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; opacity: .6; }
.poster svg { width: 100%; height: auto; }
.poster .wave-path { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 3.2s var(--ease) .6s forwards; }
.poster .bar { transform-box: fill-box; transform-origin: center; animation: pulse 1.8s ease-in-out infinite alternate; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pulse { from { transform: scaleY(.35); } to { transform: scaleY(1); } }

/* Intro: the footer wordmark starts in the middle of the screen, letters rise, then it settles at the bottom */
.has-intro .home-footer { transform: translateY(-38svh); }
.has-intro .home-footer .ch { transform: translateY(105%); }
.has-intro .home-footer .wordmark__sans, .has-intro .home-footer .wordmark__serif { overflow: hidden; display: inline-block; padding-bottom: .04em; }
.has-intro .work-card, .has-intro .site-header { opacity: 0; }
.intro-letters .home-footer .ch { transform: none; transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.intro-settle .home-footer { transform: none; transition: transform 1.2s var(--ease); }
.intro-settle .work-card { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform 1.1s var(--ease), width .7s var(--ease); transition-delay: calc(.35s + var(--i) * 70ms); }
.has-intro:not(.intro-settle) .work-card { transform: translateY(40px); }
.intro-settle .site-header { opacity: 1; transition: opacity .8s var(--ease) .6s; }

/* Inner pages */
.page { min-height: 100svh; display: flex; flex-direction: column; }
.page main { flex: 1; padding: clamp(48px, 9vw, 120px) var(--gutter) 64px; }
.page-footer { padding: 0 var(--gutter); font-size: clamp(2.2rem, 14.6vw, 17rem); overflow: hidden; margin-top: 40px; }
.page-footer .wordmark { transform: translateY(.06em); }

/* Project page */
.project-head { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 1200px; }
.project-tag { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.project-title { margin: 0; font-size: clamp(2.6rem, 7vw, 6.4rem); line-height: .95; font-weight: 600; letter-spacing: -0.045em; text-wrap: balance; }
.project-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; }
.project-title .l { display: inline-block; transform: translateY(105%); transition: transform .9s var(--ease); transition-delay: calc(var(--i) * 22ms); }
.is-ready .project-title .l { transform: none; }
.project-lead { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1.12; max-width: 30ch; margin: 22px 0 0; letter-spacing: -0.01em; }
.project-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); margin-top: clamp(40px, 7vw, 90px); align-items: start; }
.project-text p { font-size: 1.05rem; line-height: 1.5; margin: 0 0 1em; max-width: 46ch; }
.project-methods { margin-top: 28px; border-top: 1px solid var(--hairline); padding-top: 14px; }
.project-methods h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 500; margin: 0 0 10px; }
.project-methods ul { margin: 0; padding: 0; list-style: none; font-size: .95rem; line-height: 1.45; }
.project-methods li { padding: 5px 0; border-bottom: 1px solid var(--hairline); }
.project-link { display: inline-block; margin-top: 22px; font-weight: 600; }
.figures { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 20px); }
.figure { margin: 0; }
.figure:first-child:nth-last-child(odd), .figure--wide { grid-column: 1 / -1; }
.figure__media { aspect-ratio: 1; overflow: hidden; background: var(--bg); }
.figure__media--dark { background: #000; }
.figure__media img { width: 100%; height: 100%; object-fit: contain; }
.figure__media--crop img { object-fit: cover; transform: scale(1.32) translateY(1.5%); }
.figure figcaption { font-size: .8rem; line-height: 1.35; color: var(--muted); margin-top: 7px; }
.figures-empty { aspect-ratio: 5 / 4; position: relative; }
.figures-empty .work-media { position: absolute; inset: 0; aspect-ratio: auto; }
.figures-empty .poster__word { font-size: clamp(3.4rem, 8vw, 7rem); }

.reveal { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--ease); }
.reveal.is-in { clip-path: inset(0); }
.fade { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.fade.is-in { opacity: 1; transform: none; }

.next-project { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-top: clamp(60px, 10vw, 130px); padding-top: 16px; border-top: 1px solid var(--ink); }
.next-project span { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.next-project b { font-size: clamp(1.6rem, 4vw, 3.2rem); letter-spacing: -0.04em; font-weight: 600; }
.next-project b em { font-family: var(--serif); font-weight: normal; }

/* About */
.about-hero { margin: 0; font-size: clamp(2.2rem, 5.6vw, 5.2rem); line-height: 1.02; font-weight: 600; letter-spacing: -0.045em; max-width: 17ch; }
.about-hero em { font-family: var(--serif); font-weight: normal; font-size: 1.1em; letter-spacing: -0.02em; line-height: .8; }
.about-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 60px); margin-top: clamp(48px, 8vw, 100px); }
.about-grid h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 500; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--hairline); }
.about-grid p { margin: 0 0 .8em; line-height: 1.5; }

/* Contact (inverted) */
.is-contact body { background: var(--ink); color: var(--bg); }
.is-contact .site-header nav a, .is-contact .site-header nav li + li::before { color: rgba(255,255,255,.5); }
.is-contact .site-header nav a:hover { color: var(--bg); }
.contact-hero { margin: 0; font-size: clamp(2.6rem, 7vw, 6.6rem); line-height: 1; font-weight: 600; letter-spacing: -0.045em; max-width: 14ch; }
.contact-hero em { font-family: var(--serif); font-weight: normal; font-size: 1.1em; }
.contact-list { margin-top: clamp(40px, 7vw, 90px); display: grid; gap: 0; max-width: 760px; }
.contact-item { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.18); font-size: clamp(1.1rem, 2vw, 1.5rem); }
.contact-item span { color: rgba(255,255,255,.5); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; align-self: center; }
.is-contact .page-footer { color: var(--bg); }

/* Wipe used when opening Contact */
.wipe { position: fixed; inset: 0; z-index: 60; background: var(--ink); clip-path: inset(100% 0 0 0); pointer-events: none; transition: clip-path .7s var(--ease); }
.wipe.is-on { clip-path: inset(0); }
.page-leave main, .page-leave .home-footer, .page-leave .page-footer { opacity: 0; transition: opacity .35s var(--ease); }

/* Mobile */
@media (max-width: 860px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav, .site-header .contact-link { display: none; }
  .menu-button { display: block; }
  .project-grid, .about-grid { grid-template-columns: 1fr; }
  .work-card { margin-top: -18vh; }
  :root { --card-w: 46vw; --card-w-active: 66vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { clip-path: none; }
  .fade { opacity: 1; transform: none; }
  .project-title .l { transform: none; }
}

/* generative covers (shared with the home pages) */
.gc{display:block;width:100%;height:100%}
.gc-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:gc-draw 2.6s var(--ease) forwards}
@keyframes gc-draw{to{stroke-dashoffset:0}}
.gc-pop{transform:scale(0);animation:gc-pop .8s var(--ease) forwards}
@keyframes gc-pop{to{transform:scale(1)}}
.gc-bar{transform-box:fill-box;transform-origin:center;animation:gc-bar 1.7s ease-in-out infinite alternate}
@keyframes gc-bar{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
.figures-empty{aspect-ratio:4/5;max-height:80vh}
@media (prefers-reduced-motion:reduce){.gc-draw{stroke-dashoffset:0}.gc-pop{transform:none}}

/* header: name top-left (larger), simple nav on the right */
.site-header{display:flex;justify-content:space-between;align-items:center}
.site-header .brand,.mobile-menu .brand{font-size:1.4rem;font-weight:650;letter-spacing:-.025em}
.site-header nav ul{gap:1.4em}
.site-header nav li + li::before{content:none}

/* ---------- Project page, layout B: sticky title column, content scrolls ---------- */
html[data-layout="b"] #project { display: grid; grid-template-columns: minmax(260px, 32%) 1fr; column-gap: clamp(28px, 5vw, 80px); align-items: start; }
html[data-layout="b"] .project-head { position: sticky; top: 24px; }
html[data-layout="b"] .project-title { font-size: clamp(2rem, 3.6vw, 3.4rem); }
html[data-layout="b"] .project-lead { font-size: clamp(1.2rem, 1.7vw, 1.5rem); }
html[data-layout="b"] .project-grid { grid-template-columns: 1fr; margin-top: 0; }
html[data-layout="b"] .next-project { grid-column: 1 / -1; }

/* ---------- Project page, layout C: atlas plates ---------- */
html[data-layout="c"] .project-head { grid-template-columns: 1.2fr 1fr; column-gap: var(--gutter); align-items: end; padding-bottom: 24px; border-bottom: 1px solid var(--ink); max-width: none; }
html[data-layout="c"] .project-tag { grid-column: 1 / -1; }
html[data-layout="c"] .project-lead { margin: 0; }
html[data-layout="c"] .project-grid { grid-template-columns: 1fr; margin-top: 28px; }
html[data-layout="c"] .project-grid > :last-child { order: -1; }
html[data-layout="c"] .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: fig; }
html[data-layout="c"] .figure:first-child:nth-last-child(odd) { grid-column: auto; }
html[data-layout="c"] .figure { counter-increment: fig; }
html[data-layout="c"] .figure figcaption::before { content: "Fig. " counter(fig) "\00a0\00a0"; font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--ink); }
html[data-layout="c"] .figures-empty { max-width: 460px; }
html[data-layout="c"] .project-text { column-count: 2; column-gap: var(--gutter); }
html[data-layout="c"] .project-text p { max-width: none; break-inside: avoid; }
html[data-layout="c"] .project-methods { break-inside: avoid; }

@media (max-width: 860px) {
  html[data-layout="c"] .project-head { grid-template-columns: 1fr; }
  html[data-layout="c"] .project-lead { margin-top: 12px; }
  html[data-layout="b"] #project { grid-template-columns: minmax(220px, 36%) 1fr; }
}
@media (max-width: 700px) {
  html[data-layout] #project { display: block; }
  html[data-layout] .project-head { position: static; display: grid; grid-template-columns: 1fr; }
  html[data-layout] .project-grid { margin-top: 36px; }
  html[data-layout="c"] .figures { grid-template-columns: 1fr 1fr; }
  html[data-layout="c"] .project-text { column-count: 1; }
}
html[data-layout="c"] .project-title { font-size: clamp(2.4rem, 4.8vw, 4.6rem); }
html[data-layout="b"] .figures { max-width: 760px; }

@media (max-width: 860px) {
  .project-grid { grid-template-columns: 1fr; }
  .site-header .brand { font-size: 1.25rem; }
}
.figure__svg { overflow-x: auto; border: 1px solid var(--hairline); }
.figure__svg svg { display: block; width: 100%; max-width: 640px; margin: 0 auto; height: auto; padding: 8px; }
html[data-layout="c"] .figure--wide { grid-column: 1 / -1; }
.sil-bar:hover rect:first-of-type { fill: rgba(11,11,11,.04); }
.project-links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 22px; }
.project-links .project-link { margin-top: 0; }
html[data-layout="c"] .figure:only-child { grid-column: 1 / -1; max-width: 760px; }