/* ---------- opening: looping video hero ---------- */
.hero-vid{background:var(--black); color:var(--cream); overflow:hidden; isolation:isolate}
.vid-bg{position:absolute; inset:0; z-index:-2; overflow:hidden; pointer-events:none}
.vid-bg iframe{position:absolute; top:50%; left:50%; width:100vw; height:56.25vw; min-height:100%; min-width:177.78vh; transform:translate(-50%,-50%); border:0}
.vid-scrim{position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(10,10,10,.4) 0%, rgba(10,10,10,.05) 28%, rgba(10,10,10,.25) 55%, rgba(10,10,10,.82) 100%)}
.hero-vid .blurb h1{color:var(--cream)}
.hero-vid .blurb h1 em{color:var(--yellow)}
.hero-vid .tag{color:var(--pink)}
.hero-vid .cue{color:rgba(245,241,232,.75)}
.hero-vid .cue i{background:rgba(245,241,232,.4)}

.opening{min-height:100vh; position:relative; padding:clamp(100px,14vh,140px) var(--pad) clamp(32px,6vh,60px); display:grid; grid-template-columns:1fr minmax(260px,min(400px,32vw)); grid-template-rows:1fr auto; column-gap:clamp(24px,4vw,64px)}
.hero-name{grid-column:1/-1; grid-row:1; align-self:end; margin:0; display:flex; flex-direction:column; font-size:clamp(84px,17.5vw,300px); line-height:.8; letter-spacing:-.055em; font-weight:900; text-transform:uppercase; color:transparent; -webkit-text-stroke:clamp(1.5px,.18vw,3px) var(--yellow); transition-delay:.1s}
.hero-name span:last-child{margin-left:clamp(0px,9vw,170px)}
.blurb{grid-column:2; grid-row:2; justify-self:end; max-width:none; margin-top:clamp(18px,3vh,32px); padding-left:16px; border-left:3px solid var(--pink); transition-delay:.35s}
.hero-role{margin:0 0 10px; color:var(--yellow); font-size:10px}
.hero-line{margin:0; font-size:clamp(16px,1.35vw,21px); line-height:1.25; font-weight:700; letter-spacing:-.015em; color:var(--cream); text-wrap:balance}
.blurb h1 em{color:var(--pink)}
.polaroids{position:absolute; top:clamp(100px,14vh,150px); right:var(--pad); display:flex; gap:clamp(20px,2.4vw,40px); align-items:flex-start}
.pol{margin:0; width:clamp(220px,24vw,360px)}
.pol img{display:block; width:100%; height:auto; box-shadow:0 1px 1px oklch(30% 0.02 60 / .08), 0 16px 34px -16px oklch(30% 0.02 60 / .35); transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pol.p1 img{transform:rotate(-2.5deg)}
.pol.p2{margin-top:clamp(18px,3vh,40px); transition-delay:.25s}
.pol.p2 img{transform:rotate(2deg)}
.pol:hover img{transform:rotate(0) translateY(-4px)}
.cue{position:absolute; left:var(--pad); bottom:6vh; display:flex; align-items:center; gap:16px; text-decoration:none; color:var(--muted)}
.cue i{display:block; width:72px; height:1px; background:var(--muted); position:relative; overflow:hidden}
.cue i::after{content:''; position:absolute; inset:0; background:var(--pink); transform:translateX(-100%); animation:cue 2.8s cubic-bezier(.6,0,.2,1) infinite}
@keyframes cue{60%,100%{transform:translateX(100%)}}

@media (max-width:760px){
  .opening{grid-template-columns:1fr; padding-top:110px}
  .blurb{grid-column:1; justify-self:start}
  .hero-name span:last-child{margin-left:0}
  .polaroids{position:relative; top:auto; right:auto; margin:0 0 9vh auto; justify-content:flex-end}
  .pol{width:62vw}
  .blurb{max-width:none}
}

/* ---------- timeline: line across, lines down, projects ON the lines ---------- */
.timeline{padding:clamp(80px,12vh,130px) 0 clamp(50px,8vh,90px)}
.tl-head{padding:0 var(--pad)}
.tl-head .tag{margin-bottom:22px}
.tl-head h2{font-size:clamp(48px,7.4vw,124px)}
.tl-scroll{overflow-x:auto; overflow-y:hidden; margin-top:clamp(30px,5vh,56px); scrollbar-width:none}
.tl-scroll::-webkit-scrollbar{display:none}
.tl-line{position:relative; min-width:820px; outline:none}
.tl-line svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible; color:var(--ink); pointer-events:none}
.tl-line path{fill:none; stroke-width:2.5; stroke-dasharray:var(--plen); stroke-dashoffset:var(--plen); transition:stroke-dashoffset 2s cubic-bezier(.5,0,.2,1)}
.tl-line.drawn path{stroke-dashoffset:0}

.grp{position:absolute; top:26px; width:0; height:var(--len)}
.grp::before{content:''; position:absolute; left:-13px; width:26px; top:0; height:calc(var(--len) + 10px)}  /* hover hit-area */
.grp .drop{position:absolute; left:-.75px; top:0; width:1.5px; height:0; background:var(--ink); transition:height 1s cubic-bezier(.2,.7,.2,1), width .25s, left .25s; transition-delay:var(--d), 0s, 0s}
.tl-line.drawn .grp .drop{height:var(--len)}
.grp.open{z-index:5}
.grp.open .drop{width:3px; left:-1.5px}

.pj{all:unset; position:absolute; left:0; height:22px; transform:translateY(-50%); cursor:pointer; display:flex; align-items:center; gap:10px; white-space:nowrap}
.pj i{display:block; width:7px; height:7px; margin-left:-3.5px; background:var(--ink); transform:scale(0); transition:transform .5s cubic-bezier(.2,.7,.2,1), background .2s; transition-delay:calc(var(--d) + 500ms + var(--k) * 40ms), 0s}
.tl-line.drawn .pj i{transform:scale(1)}
.pj.story i{background:var(--pink); outline:1.5px solid var(--ink)}
.pj .nm{font-size:13px; font-weight:700; letter-spacing:-.01em; line-height:1; padding:4px 7px; max-width:250px; overflow:hidden; text-overflow:ellipsis; background:var(--paper); opacity:0; transform:translateX(-6px); pointer-events:none; transition:opacity .25s, transform .35s cubic-bezier(.2,.7,.2,1), background .2s, color .2s; transition-delay:calc(var(--k) * 22ms)}
.pj.dev .nm::after{content:' · in dev'; font-family:var(--mono); font-weight:400; font-size:9px; letter-spacing:.1em; text-transform:uppercase}
.grp.open .pj .nm{opacity:1; transform:none; pointer-events:auto}
.grp.flip .pj{flex-direction:row-reverse; transform:translate(-100%,-50%)}
.grp.flip .pj i{margin-left:0; margin-right:-3.5px}
.grp.flip .pj .nm{transform:translateX(6px)}
.grp.flip.open .pj .nm{transform:none}
.pj:hover i, .pj:focus-visible i{transform:scale(1.7); background:var(--pink)}
.pj:hover .nm, .pj:focus-visible .nm{background:var(--ink); color:var(--yellow)}
.tl-hint{padding:0 var(--pad); margin-top:18px}

/* ---------- diamonds ---------- */
.diamonds{padding:clamp(120px,20vh,240px) var(--pad) clamp(80px,12vh,160px)}
.d-intro{max-width:720px; margin-bottom:clamp(80px,12vh,140px)}
.d-intro h2{font-size:clamp(46px,6.4vw,104px); margin:22px 0 28px}
.lede{font-size:21px; color:var(--ink-2); max-width:52ch}
/* gallery: 7 tiles, asymmetric mosaic, fits ~one screen */
.diamonds{padding-bottom:clamp(70px,10vh,120px)}
.d-intro{margin-bottom:clamp(40px,6vh,70px)}
.gal{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); grid-auto-rows:auto; gap:clamp(8px,1vw,14px)}
.g-item{position:relative; overflow:hidden; background:#1b1b1b}
/* every tile is poster-shaped (3:4) so covers show whole; film I is the large feature tile */
.g-item{aspect-ratio:3/4}
.g1{grid-column:1/3; grid-row:1/3; aspect-ratio:auto}
.g-item image-slot{position:absolute; inset:0; width:100%; height:100% !important; background:#1b1b1b; transition:transform 1.2s cubic-bezier(.2,.7,.2,1), filter .6s}
.g-item:hover image-slot{transform:scale(1.04); filter:saturate(1.15)}
.g-item.dev image-slot{filter:grayscale(.7) blur(3px)}
.g-num{position:absolute; left:14px; top:12px; z-index:2; color:var(--cream); pointer-events:none; mix-blend-mode:difference}
.g-dev{position:absolute; right:12px; top:12px; z-index:2; background:var(--yellow); color:var(--black); padding:4px 8px; font-size:9.5px; pointer-events:none}
.g-ov{all:unset; box-sizing:border-box; position:absolute; inset:0; z-index:1; cursor:pointer; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; padding:clamp(14px,1.6vw,26px); background:var(--pink); color:var(--black); opacity:0; transition:opacity .35s}
.g-item:nth-child(3n+2) .g-ov{background:var(--yellow)}
.g-item:nth-child(3n) .g-ov{background:var(--cyan)}
.g-item:hover .g-ov, .g-ov:focus-visible{opacity:1}
.g-ov > *{transform:translateY(14px); transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.g-item:hover .g-ov > *, .g-ov:focus-visible > *{transform:none}
.g-meta{font-size:9.5px; letter-spacing:.12em}
.g-t{font-size:clamp(20px,2.1vw,38px); font-weight:900; text-transform:uppercase; letter-spacing:-.035em; line-height:.92}
.g-l{font-size:clamp(12px,.95vw,15px); line-height:1.35; font-weight:500; max-width:44ch; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
.g-go{font-size:10px; letter-spacing:.14em; margin-top:4px}
body.dragging .g-ov{pointer-events:none; opacity:0}
@media (max-width:860px){
  .gal{grid-template-columns:1fr 1fr}
  .g1{grid-column:1/-1; grid-row:auto; aspect-ratio:3/4}
  .g-ov{opacity:1; background:linear-gradient(transparent 30%, rgba(10,10,10,.85)) !important; color:var(--cream)}
  .g-l{display:none}
}


/* ---------- project window ---------- */
.win{position:fixed; inset:0; z-index:100; pointer-events:none}
.win-scrim{position:absolute; inset:0; background:oklch(24% 0.01 60 / .0); transition:background .6s}
.win-panel{position:absolute; inset:clamp(12px,3vw,40px); background:var(--paper); display:flex; flex-direction:column; opacity:0; transform:translateY(24px); transition:opacity .6s, transform .7s cubic-bezier(.2,.7,.2,1); box-shadow:0 40px 90px -30px oklch(20% 0.02 60 / .35)}
.win.open{pointer-events:auto}
.win.open .win-scrim{background:oklch(24% 0.01 60 / .42)}
.win.open .win-panel{opacity:1; transform:none}
.win-top{display:flex; justify-content:space-between; align-items:center; padding:16px clamp(20px,3vw,40px); background:var(--black); color:var(--cream)}
.win-top .win-nav button{color:var(--cream)}
.win-top .win-nav button:hover{border-color:var(--pink); color:var(--pink)}
.win-nav{display:flex; gap:6px}
.win-nav button{all:unset; cursor:pointer; padding:6px 12px; color:var(--ink); border:1px solid transparent; transition:border-color .3s}
.win-nav button:hover{border-color:var(--hair)}
.win-body{flex:1; overflow:auto; display:grid; grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr); gap:clamp(24px,4vw,64px); padding:clamp(20px,3vw,40px)}
.stills{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-content:start}
.stills image-slot{display:block; width:100%; aspect-ratio:3/2; background:var(--paper-2)}
.stills .big{grid-column:1/-1; aspect-ratio:16/9}
.stills .video{position:relative}
.stills .video::after{content:'▶  Film'; position:absolute; left:16px; bottom:14px; font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--black); background:var(--yellow); padding:6px 10px; pointer-events:none}
.refl{align-self:start; position:sticky; top:0}
.refl .yr{color:var(--muted)}
.refl h3{font-size:clamp(34px,3.6vw,60px); line-height:.95; text-transform:uppercase; font-weight:900; margin:12px 0 10px}
.refl .for{font-weight:600; color:var(--pink); margin:0 0 28px}
.refl dl{display:grid; grid-template-columns:auto 1fr; gap:8px 20px; margin:0 0 30px; padding:18px 0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.refl dt{color:var(--muted)} .refl dd{margin:0; font-size:16px}
.refl .voice p{font-size:18px; line-height:1.55; margin:0 0 1em}

.refl .sig{font-style:italic; color:var(--muted)}
.refl .ph{color:var(--muted); border:1px dashed var(--hair); padding:16px 18px; line-height:1.7; text-transform:none; letter-spacing:.02em; font-size:12px}
.refl .devnote{color:var(--accent); margin-bottom:24px}
@media (max-width:860px){ .win-body{grid-template-columns:1fr} .refl{position:static} }

/* ---------- people (scattered) ---------- */
.campaigns{padding:clamp(90px,14vh,170px) var(--pad) clamp(70px,10vh,120px); overflow:hidden}
.campaigns h2{font-size:clamp(40px,5.4vw,88px); margin:22px 0 0; max-width:14ch; position:relative; z-index:1}
.ppl{list-style:none; margin:clamp(-40px,-3vw,-10px) 0 0; padding:0; position:relative; height:clamp(560px,62vw,880px)}
.ppl li{position:absolute; display:flex; flex-direction:column; gap:6px; cursor:default; opacity:0; transform:translateY(18px); transition:opacity .9s, transform 1s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--k) * 70ms)}
.campaigns.seen .ppl li{opacity:1; transform:none}
.ppl .n{white-space:nowrap; font-weight:900; text-transform:uppercase; letter-spacing:-.04em; line-height:.9; transition:color .3s, transform .5s cubic-bezier(.2,.7,.2,1)}
.ppl .w{color:var(--yellow); font-size:10px; opacity:0; transition:opacity .3s}
.ppl li:hover .n{color:var(--yellow); transform:translateX(6px)}
.ppl li:hover .w{opacity:1}
/* odd placements: size · position · alignment vary per name */
.ppl li:nth-child(1){right:0; top:9%; align-items:flex-end; text-align:right} .ppl li:nth-child(1) .n{font-size:clamp(40px,5.4vw,92px)}
.ppl li:nth-child(2){left:6%; top:20%;} .ppl li:nth-child(2) .n{font-size:clamp(22px,2.4vw,40px)}
.ppl li:nth-child(3){left:20%; top:29%;} .ppl li:nth-child(3) .n{font-size:clamp(38px,5.2vw,90px)}
.ppl li:nth-child(4){right:2%; top:31%; align-items:flex-end; text-align:right} .ppl li:nth-child(4) .n{font-size:clamp(20px,2vw,34px); font-style:italic}
.ppl li:nth-child(5){left:68%; top:37%;} .ppl li:nth-child(5) .n{font-size:clamp(30px,3.8vw,64px)}
.ppl li:nth-child(6){left:0; top:44%;} .ppl li:nth-child(6) .n{font-size:clamp(48px,7.4vw,128px); color:transparent; -webkit-text-stroke:1.5px var(--cream)}
.ppl li:nth-child(6):hover .n{color:var(--yellow); -webkit-text-stroke:0}
.ppl li:nth-child(7){left:46%; top:57%;} .ppl li:nth-child(7) .n{font-size:clamp(18px,1.7vw,28px)}
.ppl li:nth-child(8){left:58%; top:64%;} .ppl li:nth-child(8) .n{font-size:clamp(34px,4.4vw,76px)}
.ppl li:nth-child(9){left:10%; top:68%;} .ppl li:nth-child(9) .n{font-size:clamp(26px,3vw,52px)}
.ppl li:nth-child(10){right:3%; top:78%; align-items:flex-end; text-align:right} .ppl li:nth-child(10) .n{font-size:clamp(40px,5.6vw,98px)}
.ppl li:nth-child(11){left:30%; top:83%;} .ppl li:nth-child(11) .n{font-size:clamp(18px,1.8vw,30px); font-style:italic}
.ppl li:nth-child(12){left:3%; top:90%;} .ppl li:nth-child(12) .n{font-size:clamp(20px,2.2vw,36px)}
.ppl li:nth-child(13){left:36%; top:12%;} .ppl li:nth-child(13) .n{font-size:clamp(14px,1.3vw,20px)}
.logos{list-style:none; margin:clamp(40px,7vh,80px) 0 0; padding:clamp(28px,4vh,44px) 0 0; border-top:1.5px solid var(--hair); display:flex; flex-wrap:wrap; justify-content:center; row-gap:clamp(22px,3vw,40px); --cols:8}
.logos li{flex:0 0 calc(100% / var(--cols)); padding:0 clamp(10px,1.4vw,22px); box-sizing:border-box; height:clamp(30px,3vw,42px); display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(10px); transition:opacity .7s, transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--k) * 35ms)}
.campaigns.seen .logos li{opacity:1; transform:none}
.logos .lg{display:block; width:100%; max-width:150px; height:100%; background:var(--cream); -webkit-mask:var(--src) center/contain no-repeat; mask:var(--src) center/contain no-repeat; transition:background .25s, transform .4s cubic-bezier(.2,.7,.2,1)}
.logos .wm span{font-weight:900; font-size:clamp(14px,1.35vw,19px); letter-spacing:-.03em; line-height:1; color:var(--cream); text-align:center; transition:color .25s}
.logos li:hover .lg{background:var(--yellow); transform:scale(1.08)}
.logos li.wm:hover span{color:var(--yellow)}
@media (max-width:760px){
  .ppl{height:auto; margin-top:30px; display:flex; flex-wrap:wrap; gap:14px 22px; align-items:baseline}
  .ppl li{position:static; text-align:left !important; align-items:flex-start !important}
  .ppl li .n{font-size:clamp(22px,7vw,40px) !important}
  .ppl li:nth-child(3n+1) .n{font-size:clamp(34px,11vw,56px) !important}
}

/* single-still project card */
.stills.one{display:block}
.stills.one .still{display:block; width:100%; aspect-ratio:16/10; height:auto !important; background:var(--paper-2)}
.refl dd{font-size:15px; text-transform:none; letter-spacing:0; font-family:var(--serif); font-weight:600}

/* film player inside the project card */
.player{position:relative; width:100%; aspect-ratio:16/9; background:var(--black)}
.player iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.refl .watch a{display:inline-block; margin-top:6px; padding:9px 14px; background:var(--black); color:var(--yellow); text-decoration:none}
.refl .watch a:hover{background:var(--pink); color:var(--black)}
/* timeline: marks with a film get a pink square */
.pj.film i{background:var(--pink); outline:1.5px solid var(--ink)}
.pj.film .nm::after{content:' ▶'; font-size:.8em; color:var(--pink)}
.grp.open .pj.film:hover .nm::after{color:var(--yellow)}
/* gallery: tiles with a film */
.g-item.film .g-go::before{content:'▶ '}

/* pop-up with no video or image: text only, no empty box */
.win-body.solo{grid-template-columns:minmax(0,760px); justify-content:center}

/* timeline pop-up images: shown whole; several images share one row height */
.tl-imgs{display:flex; gap:12px; align-items:flex-start}
.player + .tl-imgs{margin-top:12px}
.tl-imgs img{display:block; flex:1 1 0; width:0; height:auto; min-width:0; background:var(--paper-2)}
.tl-imgs.n1{display:block}
.tl-imgs.n1 img{width:auto; height:auto; max-width:100%; max-height:74vh; margin:0 auto}
.player + .tl-imgs.n1 img{max-height:40vh; margin:0}
/* several films stacked; many photos in a masonry of columns */
.stills .player + .player{margin-top:12px}
.tl-imgs.nmany{display:block; columns:3; column-gap:12px}
.tl-imgs.nmany img{width:100%; margin:0 0 12px; break-inside:avoid}
@media (max-width:560px){ .tl-imgs.nmany{columns:2} }

/* commercials I've loved making */
.cgal{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(8px,1vw,14px)}
.c-item{grid-column:span 2; aspect-ratio:16/10}
.c-item.half{grid-column:span 3}
.c-item img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.7,.2,1), filter .6s}
.c-item:hover img{transform:scale(1.04); filter:saturate(1.15)}
@media (max-width:860px){
  .cgal{grid-template-columns:1fr 1fr}
  .c-item, .c-item.half{grid-column:auto}
  .c-item:last-child:nth-child(odd){grid-column:1/-1}
}
.player video{position:absolute; inset:0; width:100%; height:100%; background:#000; object-fit:contain}
.tl-lead{display:block; width:100%; height:auto; margin:0 0 12px}

/* timeline hover: nearest line opens; the highlighted row is what a click opens */
.tl-line{cursor:pointer}
.grp.open .pj .nm{pointer-events:none}
.pj.hot i{transform:scale(1.7); background:var(--pink)}
.pj.hot .nm{background:var(--ink); color:var(--yellow)}
.grp.open .pj.film.hot .nm::after{color:var(--yellow)}

/* bigger, easier pop-up controls */
.win-nav{gap:8px; align-items:center}
.win-nav button{font-size:14px; padding:10px 16px; min-height:24px}
.win-top .win-nav button[data-close]{background:var(--yellow); color:var(--black); font-weight:500; letter-spacing:.14em; padding:12px 20px}
.win-top .win-nav button[data-close]:hover{background:var(--pink); color:var(--black); border-color:transparent}
@media (max-width:560px){ .win-nav button{padding:10px 12px} .win-top .win-nav button[data-close]{padding:12px 14px} }

/* timeline hover preview (replaces the text labels) */
.pj .nm{display:none}
.tl-peek{position:fixed; left:0; top:0; z-index:60; pointer-events:none; width:min(300px,40vw); background:var(--black); color:var(--cream);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.55); opacity:0; transition:opacity .18s, transform .12s cubic-bezier(.2,.7,.2,1)}
.tl-peek.on{opacity:1}
.tl-peek-m{position:relative; background:#111; display:flex; justify-content:center}
.tl-peek-m img, .tl-peek-m video{display:block; width:100%; height:auto; max-height:280px; object-fit:cover}
.tl-peek-play{position:absolute; left:10px; bottom:10px; font-size:10px; line-height:1; padding:6px 8px; background:var(--yellow); color:var(--black)}
.tl-peek-cap{display:block; padding:8px 10px 9px; font-size:10px; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tl-peek.noimg .tl-peek-m{aspect-ratio:16/10; align-items:center; padding:18px; background:var(--pink)}
.tl-peek-txt{font-weight:900; font-size:22px; line-height:1; text-transform:uppercase; color:var(--black); text-align:center}
@media (hover:none){ .tl-peek{display:none} }

#diamonds{padding-bottom:0}