/* Zack Ambrosio — Light. One look: warm sketch-paper ground, graphite ink, photos carry the color. */
:root{
  --paper:#f3eee6; --band:#eae3d8; --ink:#2b3036; --muted:#5d646c; --line:#ddd5c8;
  --on-photo:#f2f1ea; --scrim:12,14,17;
  --display:'Anton','Haettenschweiler','Arial Narrow Bold',Impact,sans-serif;
  --sans:'Geist','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'Geist Mono','SFMono-Regular',Menlo,Consolas,monospace;
  --gutter:clamp(16px,5.6vw,80px);
  --hero-h:100vh;
  color-scheme:light;
}
@supports (height:100svh){:root{--hero-h:100svh}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.wrap{padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.mono{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.muted{color:var(--muted)}

/* ---------- Hero (pinned, fades out) ---------- */
.hero{position:sticky;top:0;z-index:0;height:var(--hero-h);min-height:520px;background:var(--paper);overflow:hidden}
.hero__fade{position:absolute;inset:0;will-change:opacity}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.hero__vid{opacity:0;transition:opacity .8s ease}
.hero__vid.is-on{opacity:1}
.hero__scrim{position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(to top,rgba(var(--scrim),.72),rgba(var(--scrim),.45) 45%,rgba(var(--scrim),0))}
.hero__scrim-top{position:absolute;left:0;right:0;top:0;height:clamp(150px,22vh,240px);background:linear-gradient(to bottom,rgba(var(--scrim),.5),rgba(var(--scrim),.26) 45%,rgba(var(--scrim),0));pointer-events:none}
.nav{position:absolute;top:max(22px,env(safe-area-inset-top,0px));right:max(var(--gutter),env(safe-area-inset-right,0px));display:flex;gap:clamp(18px,3vw,40px);font-family:var(--mono);font-size:15px;letter-spacing:.02em;text-transform:uppercase;color:var(--on-photo);z-index:2}
.nav a{padding:6px 0;text-shadow:0 1px 14px rgba(var(--scrim),.45),0 0 2px rgba(var(--scrim),.25)}
.hero__text{position:absolute;left:max(var(--gutter),env(safe-area-inset-left,0px));right:var(--gutter);bottom:52px;display:flex;flex-direction:column;gap:22px;font-family:var(--mono);font-size:15px;line-height:1.3;text-transform:uppercase;letter-spacing:.02em;color:var(--on-photo);will-change:transform}
.hero__text h1{margin:0;font-size:inherit;font-weight:400}

/* ---------- Statement ---------- */
.about{position:relative;z-index:1;padding-block:clamp(96px,11vw,160px);display:flex;flex-direction:column;gap:32px;background:var(--paper)}
.about h2{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(64px,12.2vw,176px);line-height:.88;text-transform:uppercase;letter-spacing:-.01em;white-space:pre-line}
.about__body{align-self:flex-end;width:min(620px,100%);display:flex;flex-direction:column;gap:28px}
.about__body p{margin:0;font-size:clamp(20px,2.1vw,30px);line-height:1.38}
.ulink{align-self:flex-start;padding-bottom:3px;border-bottom:1px solid currentColor;font-family:var(--mono);font-size:15px;letter-spacing:.04em;text-transform:uppercase}

/* ---------- Selected Work (pinned, slides sideways) ---------- */
.selected{position:relative;z-index:1;background:var(--paper)}
.selected__stage{position:sticky;top:0;height:var(--hero-h);min-height:520px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,3vw,40px)}
.selected h2{margin:0;font-size:clamp(40px,5vw,72px);line-height:1;font-weight:600;letter-spacing:-.035em}
.track{display:flex;gap:24px;will-change:transform}
.card{flex-shrink:0;width:min(760px,82vw);display:flex;flex-direction:column;gap:16px}
.card__meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.card__title{font-size:clamp(18px,1.7vw,24px);font-weight:600;letter-spacing:-.02em}

/* Color-first tiles */
.tile{position:relative;overflow:hidden;background:var(--c,#ccc)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;opacity:0;transition:opacity .9s ease}
.tile.is-in img{opacity:1}
.tile__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;opacity:0;transition:opacity .45s ease;pointer-events:none}
.tile.is-playing .tile__vid{opacity:1}
.card .tile{aspect-ratio:16/9}

/* ---------- Collaborators ---------- */
.collab{position:relative;z-index:1;padding-block:clamp(80px,8vw,120px) clamp(90px,10vw,140px);background:var(--paper)}
.collab h2{margin:0 0 44px;font-family:var(--mono);font-size:15px;font-weight:400;text-transform:uppercase;letter-spacing:.02em}
.collab__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.collab__cell{height:164px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:0 12px;text-align:center}
.collab__cell img{max-width:min(160px,70%);max-height:56px;object-fit:contain}
.collab__cell span{font-family:var(--mono);font-size:17px;font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.collab__cell span.bold{font-weight:700;letter-spacing:.08em}
.collab p{margin:48px 0 0;max-width:340px;font-size:20px;line-height:1.4}

/* ---------- Contact ---------- */
.contact{position:relative;z-index:1;padding-block:clamp(96px,10vw,140px);background:var(--band);display:flex;flex-direction:column;gap:32px}
.contact h2{margin:0;font-size:clamp(52px,10vw,144px);line-height:.92;font-weight:600;letter-spacing:-.05em;white-space:pre-line}
.btn{align-self:flex-start;margin-top:16px;padding:18px 28px;background:var(--ink);color:var(--paper);font-size:17px;font-weight:500;overflow-wrap:anywhere}

/* ---------- More Work ---------- */
.more{position:relative;z-index:1;padding-block:clamp(80px,8vw,120px) 100px;display:flex;flex-direction:column;gap:32px;background:var(--paper)}
.more__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.more__item{display:flex;flex-direction:column;gap:14px}
.more__item .tile{height:clamp(220px,24vw,350px)}
.more__item span{font-size:20px;font-weight:600}

/* ---------- Footer ---------- */
.foot{position:relative;z-index:1;padding-block:56px 48px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:56px;background:var(--paper)}
.foot__row{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
.foot__brand{display:flex;flex-direction:column;gap:8px}
.foot__brand strong{font-size:18px;font-weight:600}
.foot__links{display:flex;gap:96px;font-size:16px}
.foot__links nav,.foot__links div{display:flex;flex-direction:column;gap:10px}
.foot small{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* ---------- Work page ---------- */
.topbar{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:15px;text-transform:uppercase;letter-spacing:.02em}
.topbar nav{display:flex;gap:clamp(18px,3vw,40px)}
.topbar.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.work{padding-block:40px 120px;display:flex;flex-direction:column;gap:36px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.work__head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 32px;flex-wrap:wrap}
.work__head h1{margin:0;font-size:clamp(40px,5vw,72px);line-height:1;font-weight:600;letter-spacing:-.035em}
.filters{display:flex;gap:4px 28px;flex-wrap:wrap}
.filters button{background:none;border:0;padding:12px 0 6px;min-height:44px;cursor:pointer;font-family:var(--mono);font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);border-bottom:1px solid transparent}
.filters button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.filters button span{color:#6e6a63}
.rows{display:flex;flex-direction:column;gap:40px}
.row{display:flex;gap:16px}
.wtile{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:14px}
.row--2 .tile{height:clamp(240px,27vw,392px)}
.row--3 .tile{height:clamp(160px,18vw,258px)}
.wtile__meta{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.wtile__title{font-size:20px;font-weight:500;letter-spacing:-.015em}
.wtile__meta .mono{min-width:0}
.empty{padding:60px 0;text-align:center}

/* ---------- Tablet ---------- */
@media (max-width:1024px){
  .foot__links{gap:56px}
}

/* ---------- Phone ---------- */
@media (max-width:700px){
  .nav,.topbar{font-size:13px}
  .hero__text{bottom:36px;font-size:13px;gap:16px}
  .about__body{align-self:stretch}
  .card{width:84vw}
  .card__meta{flex-direction:column;gap:4px}
  .collab__cell{height:120px}
  .collab__cell img{max-height:40px;max-width:80%}
  .collab__cell span{font-size:12px}
  .collab p{font-size:17px}
  .more__grid{grid-template-columns:1fr}
  .more__item .tile{height:auto;aspect-ratio:16/9}
  .foot__links{gap:48px}
  .row{flex-direction:column;gap:32px}
  .rows{gap:32px}
  .row .tile{height:auto !important;aspect-ratio:16/10}
  .topbar .who{display:none}
}

@media (prefers-reduced-motion:reduce){
  .tile img{transition:none}
}