:root {
    --black: #050505;
    --ink: #0a0a0a;
    --paper: #f2f0ea;
    --muted: #b4b0a8;
    --line: rgba(242, 240, 234, 0.28);
    --safelight: #e44a32;
    font-family: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--black); scroll-behavior: smooth; }
body {
    min-width: 320px;
    margin: 0;
    overflow-x: hidden;
    background: var(--black);
    color: var(--paper);
}
a { color: inherit; }
img { display: block; width: 100%; height: 100%; }

.site-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 10;
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    min-height: 68px;
    padding: 0 28px;
    border-bottom: 1px solid rgba(242, 240, 234, 0.22);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent);
    font-size: 12px;
}
.brand { font-weight: 700; text-decoration: none; }
.site-header nav { display: flex; justify-content: flex-end; gap: clamp(20px, 4vw, 66px); }
.site-header nav a { position: relative; padding: 26px 0; text-decoration: none; }
.site-header nav a::after {
    position: absolute;
    right: 0;
    bottom: 18px;
    left: 0;
    height: 1px;
    background: currentColor;
    content: "";
    opacity: 0;
    transform: scaleX(0);
    transition: opacity 180ms ease, transform 180ms ease;
}
.site-header nav a:hover::after,
.site-header nav a[aria-current="page"]::after { opacity: 1; transform: scaleX(1); }

.hero {
    position: relative;
    min-height: min(980px, 100vh);
    overflow: hidden;
    background: #020202;
}
.hero-frame { position: absolute; overflow: hidden; background: #111; }
.hero-frame img { object-fit:contain; filter: saturate(0.76) contrast(1.06); }
.hero-frame--wide { inset: 0 28% 0 0; }
.hero-frame--portrait { inset: 20% 0 0 70%; border-left: 6px solid var(--black); }
.hero-frame--small { top: 68px; right: 0; width: 30%; height: 20%; border-bottom: 6px solid var(--black); border-left: 6px solid var(--black); }
.hero-frame--small img { object-position: center 56%; }
.hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.15) 42%, rgba(0,0,0,.56) 100%), linear-gradient(0deg, rgba(0,0,0,.78) 0%, transparent 52%);
}
.hero-copy { position: absolute; z-index: 2; top: 15%; left: 2.4%; width: 92%; }
.hero h1 {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(5.2rem, 13.3vw, 13.4rem);
    font-weight: 700;
    line-height: 0.82;
    letter-spacing: 0;
}
.hero-copy p {
    max-width: 680px;
    margin: 36px 0 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.8rem, 3vw, 3.25rem);
    font-style: italic;
    line-height: 1.1;
}
.hero-note {
    position: absolute;
    z-index: 2;
    right: 3%;
    bottom: 8%;
    width: min(440px, 36vw);
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1rem, 1.4vw, 1.35rem);
    line-height: 1.45;
}
.scroll-mark { position: absolute; z-index: 2; bottom: 7%; left: 3%; width: 1px; height: 68px; background: var(--paper); }
.scroll-mark::after { position: absolute; bottom: -1px; left: -4px; width: 9px; height: 9px; border-right: 1px solid var(--paper); border-bottom: 1px solid var(--paper); content: ""; transform: rotate(45deg); }

.projects { border-top: 1px solid var(--line); }
.project { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--black); }
.project h2,
.project p { margin-top: 0; }
.project h2 { margin-bottom: 34px; font-family: Arial, Helvetica, sans-serif; font-size: clamp(3.4rem, 6.5vw, 7.4rem); font-weight: 600; line-height: 0.88; letter-spacing: 0; }
.project h2 a { text-decoration: none; }
.project-number { margin-bottom: auto; font-family: Georgia, "Times New Roman", serif; font-size: 20px; }
.project-voice { max-width: 560px; margin-bottom: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.35rem, 2.1vw, 2.45rem); line-height: 1.14; }
.project-link { align-self: flex-start; margin-top: 48px; padding-bottom: 5px; border-bottom: 1px solid currentColor; font-size: 11px; font-weight: 700; text-decoration: none; text-transform: uppercase; }
.project-copy { display: flex; flex-direction: column; min-width: 0; padding: clamp(48px, 6vw, 108px); }
.project-media { display: block; min-width: 0; overflow: hidden; background: #101010; }
.project-media img,
.cinema-strip img,
.darkroom-images img,
.sequence-images img,
.quarantine-images img { object-fit:contain; transition: filter 450ms ease, transform 700ms cubic-bezier(.16, 1, .3, 1); }
.project a:hover img { filter: contrast(1.05) saturate(1.08); transform: scale(1.012); }

.project--immersive { min-height: 100vh; }
.project--immersive .project-media { position: absolute; inset: 0; }
.project--immersive .project-media::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.2) 58%), linear-gradient(0deg, rgba(0,0,0,.62), transparent 58%); content: ""; }
.project--immersive .project-media img { object-position: center 45%; }
.project-overlay { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 100vh; width: min(760px, 52vw); padding: clamp(70px, 8vw, 132px) 3%; }
.project-overlay .project-number { margin-bottom: auto; }
.project-overlay h2 { margin-bottom: 30px; }

.project--split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(400px, .75fr); min-height: 820px; }
.project--split.project--reverse { grid-template-columns: minmax(400px, .72fr) minmax(0, 1.28fr); }
.project--reverse .project-media { order: 2; }
.project--split .project-media img { object-position: center; }
.project--split .project-copy { justify-content: flex-end; }
.project--split .project-number { margin-bottom: auto; }

.project--cinema { min-height: 870px; padding: 4vw 0 5vw; }
.project--cinema .project-copy { display: grid; grid-template-columns: 70px minmax(260px, 1fr) minmax(260px, .68fr); gap: 36px; align-items: end; padding-top: 42px; padding-bottom: 62px; }
.project--cinema .project-copy h2 { margin: 0; }
.project--cinema .project-number { align-self: start; }
.project--cinema .project-link { grid-column: 3; }
.cinema-strip { display: grid; grid-template-columns: 1.5fr .72fr; gap: 8px; height: 500px; padding: 0 3%; }
.cinema-strip a { min-width: 0; overflow: hidden; }

.project--darkroom { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(390px, .85fr); min-height: 930px; background: #180807; }
.darkroom-images { display: grid; grid-template-columns: .78fr 1.22fr; gap: 8px; align-items: center; padding: 5vw 0 5vw 3vw; }
.darkroom-images a { height: 72%; overflow: hidden; }
.darkroom-images a:last-child { height: 94%; }
.project--darkroom .project-copy { justify-content: flex-end; }
.project--darkroom .project-number { margin-bottom: auto; color: var(--safelight); }

.project--panorama { display: grid; grid-template-rows: minmax(520px, 68vh) auto; }
.project--panorama .project-media img { object-position: center; }
.project--panorama .project-copy { display: grid; grid-template-columns: 70px minmax(300px, 1fr) minmax(300px, .65fr); gap: 36px; align-items: start; padding-top: 62px; padding-bottom: 70px; }
.project--panorama .project-copy .project-link { grid-column: 3; }

.project--human { background: #0b0905; }
.project--human .project-media { padding: 7vh 7vw; }
.project--human .project-media img { object-fit: contain; }

.project--sequence { display: grid; grid-template-columns: minmax(380px, .74fr) minmax(0, 1.26fr); min-height: 900px; background: #100c08; }
.project--sequence .project-copy { justify-content: flex-end; }
.project--sequence .project-number { margin-bottom: auto; }
.sequence-images { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; min-width: 0; padding: 3vw 3vw 3vw 0; }
.sequence-images img { min-width: 0; object-position: center; }

.project--quarantine { min-height: 920px; background: #080b0c; }
.quarantine-images { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; height: 640px; }
.quarantine-images a { overflow: hidden; }
.quarantine-images img { object-position: center; }
.project--quarantine .project-copy { display: grid; grid-template-columns: 70px minmax(300px, 1fr) minmax(300px, .7fr); gap: 36px; align-items: start; padding-top: 58px; padding-bottom: 72px; }
.project--quarantine .project-link { grid-column: 3; }

.page-footer { display: flex; justify-content: space-between; gap: 24px; padding: 34px 28px 42px; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.page-footer a { font-weight: 700; text-decoration: none; }
.page-footer p { margin: 0; }

@media (max-width: 980px) {
    .site-header { grid-template-columns: 120px 1fr; }
    .site-header nav { gap: 18px; }
    .project--split,
    .project--split.project--reverse,
    .project--darkroom,
    .project--sequence { grid-template-columns: 1fr; }
    .project--reverse .project-media { order: 0; }
    .project--split .project-media { min-height: 72vw; }
    .project--cinema .project-copy,
    .project--panorama .project-copy,
    .project--quarantine .project-copy { grid-template-columns: 50px 1fr; }
    .project--cinema .project-copy .project-voice,
    .project--panorama .project-copy .project-voice,
    .project--quarantine .project-copy .project-voice { grid-column: 2; }
    .project--cinema .project-copy .project-link,
    .project--panorama .project-copy .project-link,
    .project--quarantine .project-copy .project-link { grid-column: 2; }
    .darkroom-images { min-height: 700px; padding-right: 3vw; }
    .sequence-images { min-height: 720px; padding: 0 3vw 5vw; }
}

@media (max-width: 720px) {
    .site-header { position: relative; display: block; min-height: auto; padding: 18px 12px 14px; background: #050505; }
    .brand { display: block; margin-bottom: 17px; }
    .site-header nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
    .site-header nav a { padding: 7px 0; font-size: 10px; }
    .site-header nav a::after { bottom: 3px; }
    .hero { min-height: 720px; }
    .hero-frame--wide { inset: 0; }
    .hero-frame--portrait { right: 0; bottom: 0; left: 69%; opacity: .7; }
    .hero-frame--small { display: none; }
    .hero-shade { background: linear-gradient(0deg, rgba(0,0,0,.86), rgba(0,0,0,.04) 74%), linear-gradient(90deg, rgba(0,0,0,.15), rgba(0,0,0,.5)); }
    .hero-copy { top: 7%; left: 12px; width: calc(100% - 24px); }
    .hero h1 { font-size: clamp(3.35rem, 14.7vw, 4.35rem); }
    .hero-copy p { margin-top: 24px; max-width: 340px; font-size: 1.55rem; }
    .hero-note { right: 20px; bottom: 9%; width: calc(100% - 72px); font-size: 1rem; }
    .scroll-mark { bottom: 8%; left: 16px; height: 52px; }
    .project h2 { font-size: clamp(3rem, 14vw, 4.8rem); }
    .project-voice { font-size: 1.45rem; }
    .project-copy { padding: 48px 18px 62px; }
    .project--immersive { min-height: 760px; }
    .project--immersive .project-media img { object-position: 58% center; }
    .project-overlay { min-height: 760px; width: 100%; padding: 46px 18px 64px; }
    .project--immersive .project-media::after { background: linear-gradient(0deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.1) 76%); }
    .project--split { min-height: auto; }
    .project--split .project-media { min-height: 112vw; }
    .project--cinema { min-height: auto; padding: 0; }
    .project--cinema .project-copy,
    .project--panorama .project-copy,
    .project--quarantine .project-copy { display: flex; padding: 48px 18px 62px; }
    .project--cinema .project-number,
    .project--panorama .project-number,
    .project--quarantine .project-number { margin-bottom: 54px; }
    .cinema-strip { grid-template-columns: 1.35fr .65fr; height: 310px; padding: 0 0 5px; }
    .darkroom-images { min-height: 530px; padding: 18px 8px; }
    .project--panorama { grid-template-rows: 74vw auto; }
    .project--panorama .project-media img { object-position: 57% center; }
    .project--human .project-media { padding: 28px; min-height: 118vw; }
    .project--sequence { min-height: auto; }
    .sequence-images { min-height: 520px; padding: 0; gap: 2px; }
    .sequence-images img { object-position: center; }
    .quarantine-images { height: 94vw; }
    .quarantine-images img { object-position: 50% center; }
    .page-footer { flex-direction: column; padding-right: 12px; padding-left: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .project img { transition: none; }
}