/* Portfolio: one dark page, three categories stacked — Cinematic, Social Media, Brand Photography */
:root{
  color-scheme:dark;
  --line:rgba(255,255,255,.14);
  --mute:rgba(255,255,255,.55);
}
.pf-top h1,.pf-head h2,.pf-cta h2{overflow-wrap:anywhere;}
html.lb-lock{overflow:hidden;}
body{background:var(--ink);color:#fff;font-family:var(--serif);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img,video{display:block;max-width:100%;}
button{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--acid);outline-offset:3px;}

/* reveal */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .85s ease calc(var(--i,0) * 80ms), transform .85s cubic-bezier(.22,1,.36,1) calc(var(--i,0) * 80ms);}
[data-reveal].in{opacity:1;transform:none;}

/* masthead */
.pf-top{padding:calc(138px + env(safe-area-inset-top)) 20px 34px;max-width:1280px;margin:0 auto;}
.pf-top h1{font:600 clamp(68px,21vw,190px)/.9 var(--cond);text-transform:uppercase;letter-spacing:-.015em;}
.pf-top h1 em{display:block;font:italic 400 .36em/1.1 var(--serif);text-transform:none;letter-spacing:-.03em;color:var(--acid);margin-top:.28em;}
.pf-index{max-width:1280px;margin:26px auto 0;padding:0 20px;}
.pf-index a{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid var(--line);
  font:600 clamp(25px,7.4vw,44px)/1 var(--cond);text-transform:uppercase;letter-spacing:.01em;transition:color .3s ease,padding .4s cubic-bezier(.22,1,.36,1);
}
.pf-index li:last-child a{border-bottom:1px solid var(--line);}
.pf-index a span{font:italic 400 clamp(15px,4vw,19px)/1 var(--serif);text-transform:none;letter-spacing:0;color:var(--mute);white-space:nowrap;}
.pf-index a:hover{color:var(--acid);padding-left:10px;}

/* category sections */
.pf-sec{padding:92px 0 20px;scroll-margin-top:20px;}
.pf-head{max-width:1280px;margin:0 auto 34px;padding:0 20px;}
.pf-head h2{font:600 clamp(46px,13.5vw,120px)/.95 var(--cond);text-transform:uppercase;letter-spacing:-.01em;}
.pf-head h2 em{display:block;font:italic 400 .42em/1.15 var(--serif);text-transform:none;letter-spacing:-.03em;color:var(--acid);margin-top:.2em;}
.pf-head p{font:400 clamp(18px,4.8vw,22px)/1.35 var(--serif);color:rgba(255,255,255,.7);max-width:26em;margin-top:18px;}
.pf-cap{display:flex;flex-direction:column;gap:6px;margin-top:12px;text-align:left;}
.pf-cap b{font:600 15px/1.1 var(--cond);letter-spacing:.12em;text-transform:uppercase;}
.pf-cap span{font:italic 400 16px/1.2 var(--serif);color:var(--mute);}

/* cinematic — widescreen frames */
.cine{max-width:1280px;margin:0 auto;padding:0 20px;display:grid;gap:28px;}

.film-frame{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;}
.film-frame video{width:100%;height:100%;object-fit:cover;}
.film-frame .s-sound{right:14px;bottom:14px;}

/* social — tall cards; swipe sideways on a phone */
/* phone: the row scrolls sideways only. Cards waiting to slide in sit 28px low, which would otherwise
   make the row scrollable up and down and catch the thumb on the way to the next section. */
.social-row{
  display:flex;align-items:flex-start;gap:14px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;padding:4px 20px 22px;
  scroll-snap-type:x mandatory;scroll-padding-left:20px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.social-row::-webkit-scrollbar{display:none;}
.s-card{flex:0 0 70vw;max-width:320px;scroll-snap-align:start;}
.s-media{position:relative;border-radius:14px;overflow:hidden;background:#141417;border:1px solid var(--line);}
.s-media img,.s-media video{width:100%;height:100%;object-fit:cover;}
.r916{aspect-ratio:9/16;}
.s-sound{
  position:absolute;right:10px;bottom:10px;width:44px;height:44px;border-radius:50%;padding:0;
  display:grid;place-items:center;cursor:pointer;color:#fff;
  border:1px solid rgba(255,255,255,.5);background:rgba(12,12,14,.6);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.s-sound svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.s-sound .ic-on{display:none;}
.s-sound[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.s-sound[aria-pressed="true"] .ic-on{display:block;}
.s-sound[aria-pressed="true"] .ic-off{display:none;}
.s-sound:active{transform:scale(.94);}

/* brand photography — one group per brand, tap to enlarge */
.wall{max-width:1280px;margin:0 auto;padding:0 20px;display:grid;gap:12px;}
.wall-brand{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;}
.wall-brand .shot:first-child{grid-column:1 / -1;}
.wall .shot{display:block;width:100%;margin:0;border:0;background:#141417;padding:0;cursor:zoom-in;position:relative;overflow:hidden;}
.wall .shot img{width:100%;height:auto;transition:transform .9s cubic-bezier(.22,1,.36,1), filter .5s ease;}
.wall .shot:hover img{transform:scale(1.04);}

/* closing call + footer */
.pf-cta{max-width:1280px;margin:110px auto 0;padding:0 20px;}
.pf-cta h2{font:600 clamp(42px,12.5vw,96px)/.98 var(--cond);text-transform:uppercase;letter-spacing:-.01em;}
.pf-cta h2 em{display:block;font:italic 400 .8em/1.08 var(--serif);text-transform:none;letter-spacing:-.03em;color:var(--acid);}
.pf-btn{
  display:inline-flex;align-items:center;gap:12px;margin-top:30px;background:var(--paper);color:var(--ink);
  padding:17px 26px;border-radius:999px;font:600 14px/1 var(--cond);letter-spacing:.18em;text-transform:uppercase;
  transition:transform .35s cubic-bezier(.22,1.4,.36,1), background .3s ease;
}
.pf-btn:hover{transform:translateY(-3px);background:#fff;}
.pf-foot{
  max-width:1280px;margin:96px auto 0;padding:26px 20px 36px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font:500 10.5px/1.4 var(--cond);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.45);
}

/* lightbox */
.lb{position:fixed;inset:0;z-index:400;background:rgba(8,8,10,.96);display:none;flex-direction:column;align-items:center;justify-content:center;padding:70px 14px 84px;}
.lb.open{display:flex;}
.lb img{max-width:100%;max-height:100%;object-fit:contain;}
.lb-cap{position:absolute;left:20px;bottom:calc(24px + env(safe-area-inset-bottom));font:600 13px/1.2 var(--cond);letter-spacing:.16em;text-transform:uppercase;}
.lb-cap i{font:italic 400 15px/1 var(--serif);text-transform:none;letter-spacing:0;color:var(--mute);margin-left:10px;}
.lb-x,.lb-nav{position:absolute;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(12,12,14,.5);cursor:pointer;font:400 22px/1 var(--serif);}
.lb-x{top:calc(16px + env(safe-area-inset-top));right:20px;}
.lb-nav{bottom:calc(14px + env(safe-area-inset-bottom));}
.lb-prev{right:80px;}
.lb-next{right:20px;}

@media(min-width:900px){
  .pf-top{padding:190px 40px 50px;}
  .pf-index,.pf-head,.cine,.wall,.pf-cta{padding-left:40px;padding-right:40px;}
  .pf-index{display:block;}
  .pf-index ul{display:grid;grid-template-columns:repeat(3,1fr);gap:0 28px;}
  .pf-index li:last-child a{border-bottom:0;}
  .pf-index a{border-top:1px solid var(--line);flex-direction:column;gap:10px;align-items:flex-start;padding:20px 0;}
  .pf-sec{padding-top:150px;}
  .pf-head{margin-bottom:54px;}
  .social-row{max-width:1280px;margin:0 auto;padding:4px 40px 22px;overflow:visible;display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
  .s-card{max-width:none;flex:none;}
  .cine{grid-template-columns:1fr 1fr;gap:26px;}
  .wall,.wall-brand{gap:18px;}
  .wall-brand{grid-template-columns:repeat(3,1fr);}
  .wall-brand .shot:first-child{grid-column:auto;}
  .pf-cta{margin-top:170px;}
  .pf-foot{padding-left:40px;padding-right:40px;margin-top:130px;}
  .lb{padding:70px 90px;}
  .lb-nav{top:50%;bottom:auto;margin-top:-24px;}
  .lb-prev{left:24px;right:auto;}
  .lb-next{right:24px;}
}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}