:root { --ink:#111; --paper:#f4f3ef; --muted:#777; --line:#c9c8c2; --font:"Helvetica Neue",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; background:#000; color:#f4f3ef; }
body { min-width:320px; font-family:var(--font); background:#000; color:#f4f3ef; }
a { color:inherit; }
.site-header { position:fixed; z-index:20; inset:0 0 auto; height:72px; padding:0 2.5vw; display:grid; grid-template-columns:1fr auto; align-items:center; border-bottom:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.35); color:#fff; backdrop-filter:blur(16px); opacity:0; pointer-events:none; transition:background .35s,color .35s,border-color .35s,opacity .35s; }
.site-header.is-light { border-color:rgba(255,255,255,.18); background:rgba(0,0,0,.78); color:#fff; opacity:1; pointer-events:auto; }
.wordmark { font-size:18px; font-weight:700; text-decoration:none; letter-spacing:-.04em; }
.header-actions { display:flex; align-items:center; gap:2.5vw; font-size:12px; }
.contact-link { font-size:12px; text-decoration:none; }
.landing { --spot-x:20%; --spot-y:50%; --spot-size:7vw; --collage-progress:0; height:150svh; background:#000; color:#fff; }
.landing-stage { position:sticky; top:0; height:100svh; overflow:hidden; }
.landing-stage::after { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(to bottom,transparent 42%,rgba(0,0,0,.15) 61%,rgba(0,0,0,.72) 82%,#000 98%); }
.landing-intro { position:absolute; z-index:2; top:50%; right:4vw; width:min(42vw,620px); color:#111; transform:translateY(-50%); }
.landing-intro h1 { margin-left:2vw; font-family:var(--font); font-size:clamp(25px,2.8vw,42px); font-weight:400; line-height:.92; letter-spacing:.015em; color:#333; }
.portfolio-word { display:block; width:min(100%,620px); height:auto; margin-top:-10px; transform:translateY(calc(var(--collage-progress) * -9px)) rotate(calc(var(--collage-progress) * -.35deg)); }
.intro-star { position:absolute; z-index:-1; height:auto; pointer-events:none; }
.intro-star-one { width:clamp(72px,7vw,108px); top:72%; right:2%; transform:translate(calc(var(--collage-progress) * -12px),calc(var(--collage-progress) * 18px)) rotate(calc(8deg + (var(--collage-progress) * 10deg))); }
.intro-star-two { width:clamp(110px,11vw,165px); top:94%; right:16%; transform:translate(calc(var(--collage-progress) * 16px),calc(var(--collage-progress) * -14px)) rotate(calc(-13deg + (var(--collage-progress) * -9deg))); }
.landing-intro p { max-width:340px; margin-top:7px; margin-left:3vw; font-size:clamp(15px,1.2vw,19px); line-height:1.38; color:#333; }
.landing-collage { position:absolute; inset:0; z-index:1; pointer-events:none; }
.collage-piece { position:absolute; overflow:hidden; background:#d8d6d0; will-change:transform; }
.collage-piece img { width:100%; height:100%; display:block; object-fit:contain; filter:grayscale(1) contrast(1.08); }
.collage-face { inset:-3vh -3vw; background:transparent; transform:translateY(calc(var(--collage-progress) * -20px)) scale(calc(1.04 + (var(--collage-progress) * .025))); transform-origin:center; }
.collage-face img { object-fit:cover; object-position:center; filter:grayscale(1) contrast(1.06) brightness(1.18); transform:scale(1.12) translateX(-7%); }
.work { --work-progress:0; position:relative; min-height:100vh; padding:180px 2.5vw; overflow:hidden; color:#f4f3ef; }
.work-heading { display:flex; justify-content:space-between; margin-bottom:9vh; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.editorial-grid { display:flex; flex-direction:column; align-items:center; gap:14vh; }
.project-tile { position:relative; display:block; color:#f4f3ef; text-decoration:none; }
.project-star { position:absolute; z-index:2; width:clamp(105px,12vw,180px); height:auto; pointer-events:none; }
.project-star.star-left { right:calc(100% + 2vw); }
.project-star.star-right { left:calc(100% + 2vw); }
.star-one { width:clamp(120px,14vw,205px); top:-5%; right:calc(100% + .5vw)!important; transform:translateY(calc(var(--work-progress) * 8px)) rotate(-13deg); }
.star-two { width:clamp(145px,17vw,235px); top:18%; left:calc(100% + .5vw)!important; transform:translateY(calc(var(--work-progress) * -7px)) rotate(17deg); }
.star-three { width:clamp(90px,10vw,145px); top:48%; right:calc(100% + 4vw)!important; transform:translateY(calc(var(--work-progress) * 9px)) rotate(-25deg); }
.star-four { width:clamp(130px,15vw,215px); top:-3%; left:calc(100% + 1vw)!important; transform:translateY(calc(var(--work-progress) * -8px)) rotate(8deg); }
.star-five { width:clamp(100px,11vw,165px); top:25%; right:calc(100% + 3vw)!important; transform:translateY(calc(var(--work-progress) * 7px)) rotate(21deg); }
.project-tile figure { overflow:hidden; background:#ddd; }
.project-tile img { display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.78); transition:transform .7s cubic-bezier(.16,1,.3,1),filter .4s ease; }
.project-tile:hover img,.project-tile:focus-visible img { transform:scale(1.018); filter:saturate(1); }
.project-tile:focus-visible { outline:1px solid var(--ink); outline-offset:7px; }
.tile-caption { margin-top:15px; padding-top:12px; display:grid; grid-template-columns:36px 1fr auto 22px; gap:12px; align-items:baseline; border-top:1px solid currentColor; }
.tile-caption span,.tile-caption p,.tile-caption i { font-size:11px; font-style:normal; }
.tile-caption h2 { font-size:clamp(24px,2.5vw,46px); font-weight:400; letter-spacing:-.045em; }
.tile-caption p { color:#999; }
.tile-caption i { text-align:right; }
.project-tile { width:50%; }
.project-tile figure { aspect-ratio:1.45/1; }
footer { min-height:130px; padding:38px 2.5vw; display:flex; justify-content:space-between; align-items:flex-end; border-top:1px solid #333; color:#f4f3ef; font-size:12px; }
footer a { text-decoration:none; }
@media (max-width:760px) {
  .header-location { display:none; }
  .landing { height:125svh; }
  .landing-stage::after { background:linear-gradient(to bottom,transparent 33%,rgba(0,0,0,.18) 46%,rgba(0,0,0,.82) 58%,#000 70%); }
  .landing-intro { top:55svh; right:7vw; bottom:auto; left:7vw; width:auto; color:#f4f3ef; transform:none; }
  .landing-intro h1 { margin-left:1vw; font-size:clamp(24px,7vw,34px); color:#c8c8c4; }
  .portfolio-word { width:min(94%,390px); margin-top:-7px; filter:invert(1); }
  .intro-star-one { width:55px; top:72%; right:1%; }
  .intro-star-two { width:76px; top:96%; right:18%; }
  .landing-intro p { margin-top:7px; margin-left:1vw; max-width:250px; font-size:14px; color:#aaa; }
  .collage-face { top:-2vh; right:-5vw; bottom:auto; left:-5vw; height:61svh; }
  .collage-face img { object-position:44% center; transform:scale(1.04); }
  .work { padding-top:100px; }
  .project-star { display:none; }
  .editorial-grid { gap:70px; }
  .project-tile { width:100%; }
  .project-tile figure { aspect-ratio:1.45/1; }
  .tile-caption { grid-template-columns:28px 1fr 20px; }
  .tile-caption p { display:none; }
  .tile-caption h2 { font-size:clamp(28px,9vw,48px); }
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.project-tile img{transition:none}.collage-face{transform:none} }