/* 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;
  --title:'Courier Prime','Courier New',Courier,monospace;             /* titles: bold screenplay type, same as body */
  --sans:'Courier Prime','Courier New',Courier,monospace;               /* screenplay type for everything else */
  --mono:'Courier Prime','Courier New',Courier,monospace;
  --gutter:clamp(16px,5.6vw,80px);
  --hero-h:100vh;
  color-scheme:only light;
}
/* Opt out of forced dark modes (Samsung Internet, Chrome auto-dark): the site is designed light. */
@media (prefers-color-scheme:dark){:root{color-scheme:only light}html,body{background:var(--paper);color:var(--ink)}}
@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)}
/* Even out heading lines so no single word is left hanging */
h1,h2,.card__title,.wtile__title{text-wrap:balance}

/* ---------- 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}

/* Whole hero opens the Work page; nav stays clickable above it */
.hero__link{position:absolute;inset:0;z-index:1;cursor:pointer}
.hero__text{pointer-events:none}
.nav{z-index:3}
/* "Scroll" cue with a down chevron; fades out as you scroll (home hero and project pages) */
.cue,.case__cue{display:inline-flex;align-items:center;gap:8px}
.cue{position:absolute;left:50%;bottom:max(36px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:2;white-space:nowrap;color:var(--on-photo);text-shadow:0 1px 12px rgba(var(--scrim),.5);will-change:opacity}
.cue__chev{display:block;flex-shrink:0}

/* ---------- Statement ---------- */
.about{position:relative;z-index:1;padding-block:clamp(96px,11vw,160px);display:flex;flex-direction:column;gap:32px;background:transparent}
.about::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--a,1);will-change:opacity;background:linear-gradient(to bottom,rgba(243,238,230,0) 0,var(--paper) 280px,var(--paper) 100%)}
.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}
.actions{display:flex;align-items:center;flex-wrap:nowrap;gap:clamp(16px,2.4vw,32px)}
.actions>*{white-space:nowrap;flex-shrink:0}
.actions .btn{margin-top:0;padding:clamp(14px,1.3vw,18px) clamp(18px,2vw,28px);font-size:clamp(15px,1.2vw,17px)}
.contact .actions{margin-top:16px}
.btn--ink{background:var(--ink);color:var(--paper)}
.actions .ulink--bold{align-self:center;padding-bottom:3px;font-family:var(--sans);font-size:clamp(15px,1.2vw,17px);font-weight:600;letter-spacing:0;text-transform:none;border-bottom-width:2px}
.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}
.chev{display:inline-block;width:.55em;height:auto;vertical-align:.02em;flex-shrink:0}
.ulink--chev{display:inline-flex;align-items:center;gap:8px}
.case__next .mono{display:inline-flex;align-items:center;gap:8px}
.back{display:inline-flex;align-items:center;gap:8px;padding:10px 0}
.case__back{position:absolute;top:20px;left:max(16px,env(safe-area-inset-left,0px));z-index:2;font-size:15px;letter-spacing:.02em;color:var(--on-photo);text-shadow:0 1px 12px rgba(var(--scrim),.55)}
.back span{display:inline-flex;transition:transform .2s ease}
.back:hover span{transform:translateX(-3px)}
.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}
/* Tiles keep their row's size even when a row isn't full (e.g. one project left over at the end) */
.row--2 .wtile{flex:0 0 calc((100% - 16px) / 2)}
.row--3 .wtile{flex:0 0 calc((100% - 32px) / 3)}
.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}

/* ---------- Project page ---------- */
.case__bar{position:sticky;top:0;z-index:3;background:var(--paper)}
.case__media{position:fixed;left:0;right:0;top:64px;bottom:0;z-index:0;background:var(--c,#2b3036);overflow:hidden}
.case__media img,.case__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.case__media .case__vid{opacity:0;transition:opacity .6s ease}
.case__media .case__vid.is-on{opacity:1}
.case{position:relative;z-index:1;padding-top:calc(var(--hero-h) - 64px)}
.case__cue{position:fixed;left:50%;bottom:max(36px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);white-space:nowrap;color:var(--on-photo);text-shadow:0 1px 12px rgba(var(--scrim),.5);transition:opacity .15s linear}
.case__panel{position:relative;margin:0 0 0 auto;width:37.5%;min-height:calc(var(--hero-h) - 64px);padding:clamp(32px,4vw,64px) clamp(32px,5vw,80px) 64px;display:flex;flex-direction:column;gap:28px}
/* Frosted column: fixed to the right side at full height, so the backing is even top to bottom while the text scrolls over it.
   Only its left edge is feathered into the footage. */
.case__veil{position:fixed;top:64px;bottom:0;right:0;width:calc(37.5% + 230px);pointer-events:none;opacity:0;visibility:hidden;background:rgba(var(--tint,29,32,37),.86);-webkit-backdrop-filter:blur(28px) saturate(1.1);backdrop-filter:blur(28px) saturate(1.1);-webkit-mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.35) 110px,#000 230px);mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.35) 110px,#000 230px)}
.case__panel>*{opacity:var(--ca,1);transform:translateY(calc((1 - var(--ca,1)) * 40px))}
.case__actions{display:flex;align-items:center;flex-wrap:nowrap;gap:clamp(16px,2.4vw,32px);margin-top:4px}
.case__actions>*{white-space:nowrap;flex-shrink:0}
.case__actions .btn{padding:clamp(14px,1.3vw,18px) clamp(18px,2vw,28px);font-size:clamp(15px,1.2vw,17px)}
.case__actions .btn{margin-top:0}
.case__actions .ulink{align-self:center}
.case__panel h1{margin:0;font-size:clamp(40px,5vw,72px);line-height:1;font-weight:600;letter-spacing:-.035em}
.case__meta{margin-top:-14px}
.case__block{display:flex;flex-direction:column;gap:10px}
.case__panel{color:#fff}
.case__panel h1{color:#fff}
.case__block>.mono,.case__panel .muted{color:#fff;opacity:.72}
.case__panel .lofi i{background:rgba(255,255,255,.32)}
.case__panel .case__foot{border-top-color:rgba(255,255,255,.22)}
.case__panel .case__all{color:#fff;opacity:.72}
.case__actions .ulink{font-family:var(--sans);font-size:clamp(15px,1.2vw,17px);font-weight:600;letter-spacing:0;text-transform:none;color:#fff;border-bottom-width:2px}
.case__panel.is-light,.case__panel.is-light h1,.case__panel.is-light .ulink{color:var(--ink)}
.case__panel.is-light .case__block>.mono,.case__panel.is-light .muted{color:var(--ink);opacity:.72}
.case__panel.is-light .lofi i{background:rgba(43,48,54,.25)}
.case__panel.is-light .case__foot{border-top-color:rgba(43,48,54,.2)}
.case__panel.is-light .btn{box-shadow:inset 0 0 0 1.5px var(--ink)}
.case__role{margin:0;font-size:17px;font-weight:400;line-height:1.5}
.case__text{margin:0;font-size:17px;line-height:1.5;text-wrap:pretty}
.case__link{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.case__foot{margin-top:auto;padding-top:28px;border-top:1px solid rgba(43,48,54,.18);display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.case__all{display:inline-flex;align-items:center;gap:8px;padding:2px 0;white-space:nowrap}
.case__all .chev{transition:transform .2s ease}
.case__all:hover .chev{transform:translateX(-3px)}
.case__next{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right;min-width:0}
.case__next span:last-child{font-size:20px;font-weight:500}
.case~.foot{z-index:2}
.lofi{display:flex;flex-direction:column;gap:9px}
.lofi i{display:block;height:11px;border-radius:2px;background:rgba(43,48,54,.2)}

/* Email fallback popup */
.mailpop{position:fixed;z-index:50;width:min(320px,calc(100vw - 24px));padding:20px 20px 18px;background:var(--paper);color:var(--ink);border:1px solid var(--line);box-shadow:0 12px 40px rgba(12,14,17,.18);display:flex;flex-direction:column;gap:8px}
.mailpop p{margin:0}
.mailpop .mono{color:var(--muted)}
.mailpop__addr{font-size:17px;font-weight:500;overflow-wrap:anywhere}
.mailpop__row{display:flex;align-items:center;gap:20px;margin-top:8px}
.mailpop__row .btn{margin:0;padding:12px 18px;font-size:15px}
.mailpop__row .ulink{background:none;border:0;border-bottom:2px solid currentColor;padding:0 0 3px;cursor:pointer;color:var(--ink);font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none}
.mailpop__x{position:absolute;top:8px;right:10px;background:none;border:0;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;padding:4px}

/* ---------- Tablet ---------- */
@media (max-width:1024px){
  .hero__text{bottom:92px}
  .case__panel{width:50%}
  .case__veil{width:calc(50% + 230px);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .foot__links{gap:56px}
}

/* ---------- Phone ---------- */
@media (max-width:700px){
  .nav,.topbar,.case__back{font-size:13px}
  .hero__text{bottom:84px;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}
  .row .wtile{flex:none}
  .rows{gap:32px}
  .row .tile{height:auto !important;aspect-ratio:16/10}
  .topbar .who{display:none}
  .case__panel{width:100%;padding-left:24px;padding-right:24px}
  .case__veil{width:100%;-webkit-mask-image:none;mask-image:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(var(--tint,29,32,37),.92)}
}

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

/* ---------- Watch Video: full film plays in place of the loop ---------- */
button.btn{border:0;line-height:inherit;border-radius:0;cursor:pointer;font-family:var(--sans);-webkit-appearance:none;appearance:none}
.case__media .case__full{z-index:1;object-fit:contain;background:#000}
body.is-watching{overflow:hidden}
body.is-watching .case__media{background:#000}
body.is-watching .case,body.is-watching .case~.foot{visibility:hidden}
.case__close{position:fixed;top:calc(64px + 16px);right:max(16px,env(safe-area-inset-right,0px));z-index:4;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:rgba(12,14,17,.6);color:#fff;font-size:14px;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.case__close span{font-size:20px;line-height:1}
.case__close:hover{background:rgba(12,14,17,.8)}

/* Long project titles (e.g. a full episode name) get a smaller size so they don't fill the panel */
.case__panel h1.is-long{font-size:clamp(32px,3.4vw,50px);line-height:1.05}

/* ---------- Screenplay type: titles stay in Geist; small labels a touch bigger and darker so Courier reads clearly ---------- */
h1,h2,.card__title,.wtile__title,.case__next span:last-child{font-family:var(--title)}
:root{--muted:#50575f}
.mono{font-size:14px;letter-spacing:.03em}
.foot small{font-size:13px;letter-spacing:.03em}
.filters button{font-size:15px;letter-spacing:.02em}
@media (max-width:700px){.collab__cell span{font-size:13px}}

/* Big headlines ("A filmmaker first." / "Let's make something real.") in bold screenplay type.
   Size is capped so each line fits the screen: "A FILMMAKER" stays on one line on phones. */
.about h2{font-family:var(--mono);font-weight:700;letter-spacing:0;line-height:.95;font-size:min(176px,calc((100vw - 2 * var(--gutter)) / 6.7))}
.contact h2{font-family:var(--mono);font-weight:700;letter-spacing:0;line-height:1;font-size:min(144px,calc((100vw - 2 * var(--gutter)) / 9.3))}

/* All headlines in bold screenplay type. Monospace needs normal letter spacing (no tight tracking). */
.selected h2,.work__head h1,.case__panel h1,.card__title,.wtile__title,.case__next span:last-child{font-weight:700;letter-spacing:0}
.selected h2,.work__head h1{font-size:clamp(36px,4.4vw,64px)}
.case__panel h1{font-size:clamp(34px,4vw,58px);line-height:1.02}
.case__panel h1.is-long{font-size:clamp(26px,2.8vw,40px);line-height:1.08}
/* Zack's name in the hero: bold and a step bigger than the lines under it */
.hero__text h1{font-weight:700;font-size:clamp(20px,1.9vw,28px);letter-spacing:.03em}