:root { --ink:#0a0a0a; --paper:#f2f0ec; --pink:#ee88c2; --line:rgba(10,10,10,.22); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,"Helvetica Neue",Arial,sans-serif; }
body.modal-open { overflow:hidden; }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; }
.site-header { position:absolute; z-index:20; top:0; left:0; width:100%; display:flex; align-items:center; justify-content:space-between; padding:26px 34px; color:white; mix-blend-mode:difference; }
.wordmark { font-size:clamp(1.1rem,2vw,1.7rem); font-weight:600; letter-spacing:-.06em; }
.site-header nav { display:flex; gap:clamp(18px,3.5vw,52px); font:400 .72rem ui-monospace,SFMono-Regular,monospace; text-transform:uppercase; }
.site-header nav a { border-bottom:1px solid transparent; padding-bottom:4px; }
.site-header nav a:hover { border-color:currentColor; }
.hero { min-height:100svh; position:relative; overflow:hidden; background:#111; color:white; display:flex; align-items:flex-end; padding:34px; }
.hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:49% 37%; filter:grayscale(1) contrast(1.08); }
.hero-wash { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.38),transparent 55%),linear-gradient(0deg,rgba(0,0,0,.42),transparent 40%); }
.hero-kicker { position:absolute; z-index:2; top:19%; left:34px; margin:0; font:400 .68rem ui-monospace,SFMono-Regular,monospace; letter-spacing:.08em; text-transform:uppercase; writing-mode:vertical-rl; transform:rotate(180deg); }
.hero h1 { position:relative; z-index:2; margin:0 0 -.07em 6vw; font-size:clamp(4.8rem,12vw,12rem); font-weight:500; line-height:.7; letter-spacing:-.085em; text-transform:uppercase; }
.hero h1 em { color:var(--pink); font-family:Playfair Display,Georgia,serif; font-weight:500; text-transform:none; letter-spacing:-.05em; }
.hero-note { position:absolute; z-index:2; right:34px; bottom:34px; margin:0; text-align:right; font:400 .7rem/1.5 DM Mono,monospace; text-transform:uppercase; }
.hero-cta { position:absolute; z-index:2; right:34px; top:48%; border:1px solid rgba(255,255,255,.75); border-radius:100%; width:132px; height:132px; display:flex; align-items:center; justify-content:center; gap:10px; font:.67rem DM Mono,monospace; text-transform:uppercase; transition:.3s; }
.hero-cta:hover { color:#000; background:var(--pink); border-color:var(--pink); transform:rotate(-7deg); }
.frame-corner { position:absolute; z-index:2; width:46px; height:46px; opacity:.7; }
.frame-a { left:20px; bottom:20px; border-left:1px solid white; border-bottom:1px solid white; }
.frame-b { right:20px; top:90px; border-right:1px solid white; border-top:1px solid white; }
.manifesto { min-height:68vh; display:flex; flex-direction:column; justify-content:center; padding:10vw; border-bottom:1px solid var(--line); }
.manifesto p { max-width:1120px; margin:0; font-size:clamp(2.5rem,6vw,6.4rem); line-height:.98; letter-spacing:-.06em; }
.manifesto i { color:#a75c8a; font-family:Playfair Display,Georgia,serif; font-weight:500; }
.manifesto span,.eyebrow { margin-top:46px; font:.66rem DM Mono,monospace; text-transform:uppercase; letter-spacing:.08em; }
.work { padding:26px 20px 100px; }
.work-head { position:sticky; top:0; z-index:8; background:rgba(242,240,236,.9); backdrop-filter:blur(12px); display:flex; justify-content:space-between; align-items:flex-end; gap:30px; padding:24px 14px 20px; border-bottom:1px solid var(--line); }
.work-head h2 { margin:0; font-size:clamp(2.2rem,5vw,5.5rem); line-height:.75; letter-spacing:-.07em; text-transform:uppercase; }
.filters { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.filters button { cursor:pointer; border:1px solid var(--line); background:transparent; padding:8px 13px; border-radius:40px; font:.63rem DM Mono,monospace; text-transform:uppercase; transition:.2s; }
.filters button:hover,.filters button.active { background:var(--ink); color:white; border-color:var(--ink); }
.gallery { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(28px,6vw,90px) 16px; padding:72px 14px; align-items:start; }
.project { display:block; border:0; padding:0; background:none; text-align:left; cursor:zoom-in; grid-column:span 4; }
.project-0,.project-6 { grid-column:1/span 5; }
.project-1 { grid-column:8/span 4; margin-top:20vh; }
.project-2 { grid-column:2/span 3; }
.project-3 { grid-column:6/span 6; margin-top:14vh; }
.project-4 { grid-column:1/span 4; margin-top:18vh; }
.project-5 { grid-column:7/span 4; }
.project-image-wrap { position:relative; display:block; overflow:hidden; background:#ddd; }
.project img { display:block; width:100%; aspect-ratio:3/4; object-fit:cover; filter:grayscale(1); transition:filter .5s,transform .7s cubic-bezier(.2,.75,.25,1); }
.project:hover img,.project:focus-visible img { filter:grayscale(0); transform:scale(1.025); }
.project-index { position:absolute; top:8px; left:8px; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--pink); font:.6rem DM Mono,monospace; }
.project-meta { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-top:12px; border-top:1px solid var(--ink); }
.project-meta strong { font-size:clamp(1rem,1.5vw,1.4rem); letter-spacing:-.04em; text-transform:uppercase; }
.project-meta span { font:.58rem DM Mono,monospace; text-transform:uppercase; text-align:right; }
.about { padding:9vw 34px 11vw; background:var(--pink); }
.about .eyebrow { display:block; margin:0 0 8vw; }
.about-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:8vw; }
.about h2 { margin:0; font-size:clamp(4rem,10vw,10rem); line-height:.72; letter-spacing:-.08em; text-transform:uppercase; }
.about-lead { margin-top:0; font-size:clamp(1.4rem,2.4vw,2.5rem)!important; line-height:1.1!important; letter-spacing:-.04em; }
.about-grid div p { max-width:680px; font-size:.95rem; line-height:1.55; }
.about-grid a { display:inline-block; margin-top:28px; padding-bottom:7px; border-bottom:1px solid; font:.7rem DM Mono,monospace; text-transform:uppercase; }
footer { background:#0a0a0a; color:#fff; padding:10vw 34px 28px; }
footer>p { margin:0; font-size:clamp(4rem,11vw,11rem); line-height:.75; letter-spacing:-.08em; text-transform:uppercase; }
.mail { display:inline-block; margin:8vw 0 10vw; color:var(--pink); font-size:clamp(1.4rem,4vw,4.5rem); letter-spacing:-.05em; border-bottom:2px solid; }
.footer-row { display:grid; grid-template-columns:1fr auto 1fr; gap:24px; padding-top:20px; border-top:1px solid #444; align-items:end; font:.62rem/1.5 DM Mono,monospace; text-transform:uppercase; }
.footer-row div { display:flex; gap:30px; }.footer-row>span:last-child { text-align:right; }
.lightbox { position:fixed; z-index:100; inset:0; background:rgba(5,5,5,.97); color:white; display:flex; align-items:center; justify-content:center; padding:24px 84px; }
.lightbox[hidden] { display:none; }
.lightbox img { display:block; max-width:78vw; max-height:84vh; object-fit:contain; }
.lightbox-close { position:absolute; top:24px; right:28px; border:0; background:none; color:white; cursor:pointer; font:.7rem DM Mono,monospace; text-transform:uppercase; }
.lightbox-nav { position:absolute; top:50%; transform:translateY(-50%); border:1px solid #555; background:none; color:white; width:48px; height:48px; border-radius:50%; cursor:pointer; }.lightbox-nav:hover { background:var(--pink); color:black; border-color:var(--pink); }.prev { left:24px; }.next { right:24px; }
.lightbox-caption { position:absolute; left:28px; bottom:24px; display:flex; flex-direction:column; gap:4px; }.lightbox-caption strong { text-transform:uppercase; }.lightbox-caption span { font:.6rem DM Mono,monospace; text-transform:uppercase; color:#aaa; }
@media (max-width:760px) {
  .site-header { padding:20px; }.site-header nav { gap:14px; }.site-header nav a:nth-child(2) { display:none; }
  .hero { padding:20px; }.hero h1 { margin:0 0 18vh 0; font-size:clamp(4rem,22vw,7rem); }.hero-image { object-position:52% center; }.hero-kicker { left:16px; top:18%; }.hero-note { left:20px; right:auto; bottom:20px; text-align:left; }.hero-cta { top:auto; bottom:24px; right:20px; width:95px; height:95px; }.frame-corner { display:none; }
  .manifesto { min-height:60vh; padding:80px 20px; }.manifesto p { font-size:2.5rem; }
  .work { padding:18px 10px 70px; }.work-head { align-items:flex-start; flex-direction:column; padding:20px 10px; }.filters { justify-content:flex-start; }.gallery { display:block; padding:40px 10px; }.project { width:88%; margin:0 0 62px; }.project:nth-child(even) { margin-left:auto; }.project:nth-child(3n) { width:68%; }
  .about { padding:80px 20px; }.about-grid { grid-template-columns:1fr; gap:55px; }.about h2 { font-size:23vw; }
  footer { padding:80px 20px 24px; }.footer-row { grid-template-columns:1fr; }.footer-row>span:last-child { text-align:left; }.footer-row div { grid-row:1; }
  .lightbox { padding:70px 18px 120px; }.lightbox img { max-width:100%; max-height:72vh; }.lightbox-nav { top:auto; bottom:24px; }.prev { left:auto; right:84px; }.next { right:24px; }.lightbox-caption { left:20px; bottom:28px; max-width:55%; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }