@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

/* =========================================================================
   Photography — quieter than the film pages, same palette and same chrome.
   Everything here is scoped to body.photo so the film side is untouched.
   ========================================================================= */
body.photo{
  --ink:#0c1417;
  --surface:#121e21;
  --surface-2:#1a2c30;
  --bone:#efead8;
  --bone-60:rgba(239,234,216,.62);
  --bone-40:rgba(239,234,216,.40);
  --rule:rgba(239,234,216,.13);
  --serif:"Instrument Serif","Libre Caslon Display",Georgia,serif;
  --gut:clamp(20px,4vw,64px);
  --maxw:1320px;
  background:var(--ink);
  color:var(--bone);
}
body.photo .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
body.photo .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--orange)}
body.photo .label{font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bone-40)}

/* ---------- hero: covers cross-fade, then dissolve into the page ---------- */
.photo-hero{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-end;
  padding-bottom:clamp(48px,8vw,96px);overflow:hidden}
.photo-hero__stack{position:absolute;inset:0;z-index:0}
.photo-hero__stack figure{position:absolute;inset:0;margin:0;opacity:0;animation:photoCycle 20s infinite}
.photo-hero__stack img{width:100%;height:100%;object-fit:cover}
.photo-hero__stack figure:nth-child(1){animation-delay:0s}
.photo-hero__stack figure:nth-child(2){animation-delay:4s}
.photo-hero__stack figure:nth-child(3){animation-delay:8s}
.photo-hero__stack figure:nth-child(4){animation-delay:12s}
.photo-hero__stack figure:nth-child(5){animation-delay:16s}
@keyframes photoCycle{0%{opacity:0}4%{opacity:1}20%{opacity:1}25%{opacity:0}100%{opacity:0}}
/* An even scrim plus a tall bottom fade, matching the film hero. No localized
   dark blob sitting behind the headline. */
.photo-hero__veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(12,20,23,.46) 0%,rgba(12,20,23,.16) 30%,rgba(12,20,23,.20) 60%,rgba(12,20,23,.34) 100%)}
.photo-hero__fade{position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
  height:clamp(180px,28vh,360px);
  background:linear-gradient(180deg,
    rgba(12,20,23,0) 0%,
    rgba(12,20,23,.30) 34%,
    rgba(12,20,23,.64) 62%,
    rgba(12,20,23,.89) 84%,
    var(--ink) 100%)}
.photo-hero__in{position:relative;z-index:3;width:100%}
.photo-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,7.4vw,84px);
  line-height:1.02;margin:20px 0 0;letter-spacing:-.01em;max-width:16ch}
.photo-hero h1 em{font-style:italic;display:block}
.photo-hero .lede{max-width:44ch;margin:22px 0 0;color:var(--bone-60);font-size:15.5px;line-height:1.65}
.photo-cta{display:inline-flex;align-items:center;gap:10px;margin-top:30px;
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  border-bottom:1px solid var(--copper);padding-bottom:7px;transition:border-color .3s,gap .3s}
.photo-cta:hover{border-color:var(--orange);gap:16px}

/* ---------- filters ---------- */
.photo-filters{display:flex;flex-wrap:wrap;gap:8px;padding:clamp(30px,5vw,54px) 0 26px}
.photo-filters button{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone-40);background:transparent;border:1px solid var(--rule);
  border-radius:999px;padding:9px 18px;cursor:pointer;transition:all .25s}
.photo-filters button:hover{color:var(--bone);border-color:rgba(239,234,216,.3)}
.photo-filters button[aria-pressed="true"]{background:var(--surface-2);color:var(--bone);border-color:transparent}

/* ---------- grid: one lead frame, then an even two-up ---------- */
.photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding-bottom:20px}
.photo-tile{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--rule);
  height:clamp(270px,29vw,420px);transition:border-color .35s}
.photo-tile.lead{grid-column:1 / -1;height:clamp(320px,37vw,540px)}
.photo-tile:hover{border-color:rgba(239,234,216,.28)}
.photo-tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.photo-tile:hover img{transform:scale(1.04)}
.photo-tile .cap{position:absolute;left:0;right:0;bottom:0;padding:24px;pointer-events:none;
  background:linear-gradient(to top,rgba(12,20,23,.92) 10%,rgba(12,20,23,.45) 58%,transparent)}
.photo-tile .cap h2{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2vw,26px);
  margin:0 0 6px;line-height:1.15}
.photo-tile .rule{position:absolute;left:24px;bottom:15px;height:1px;width:0;background:var(--orange);
  transition:width .5s cubic-bezier(.2,.8,.2,1)}
.photo-tile:hover .rule{width:36px}

/* ---------- project page ---------- */
.photo-back{display:inline-flex;align-items:center;gap:10px;font-family:'IBM Plex Mono',monospace;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-40);
  transition:color .25s,gap .25s}
.photo-back:hover{color:var(--bone);gap:16px}
.photo-head{padding-top:clamp(96px,11vw,132px)}
.photo-top{display:grid;grid-template-columns:minmax(0,4.6fr) minmax(0,7fr);
  gap:clamp(24px,4vw,56px);align-items:start;padding-top:36px}
.photo-title{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5vw,58px);
  line-height:1.04;margin:16px 0 0;letter-spacing:-.01em}
.photo-intro{color:var(--bone-60);margin:20px 0 0;max-width:44ch;line-height:1.65}
.photo-meta{display:flex;flex-wrap:wrap;margin-top:34px;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.photo-meta div{flex:1 1 130px;padding:18px 20px 18px 0}
.photo-meta div + div{border-left:1px solid var(--rule);padding-left:20px}
.photo-meta p{margin:9px 0 0;font-size:13.5px;line-height:1.5}
.photo-heroshot{overflow:hidden;height:clamp(280px,36vw,520px);border:1px solid var(--rule);
  animation:photoLetterbox 1.1s cubic-bezier(.2,.8,.2,1) both}
.photo-heroshot img{width:100%;height:100%;object-fit:cover}
@keyframes photoLetterbox{from{clip-path:inset(50% 0 50% 0)}to{clip-path:inset(0 0 0 0)}}

.photo-body{display:grid;grid-template-columns:minmax(0,4.6fr) minmax(0,7fr);
  gap:clamp(24px,4vw,56px);align-items:start;padding-top:clamp(44px,6vw,80px)}
.photo-narrative{position:sticky;top:104px}
.photo-block + .photo-block{margin-top:34px}
.photo-block h3{margin:0 0 10px;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--orange)}
.photo-block p{margin:0;color:var(--bone-60);font-size:14.5px;line-height:1.72}
.photo-closing{margin-top:42px;padding-top:26px;border-top:1px solid var(--rule)}
.photo-closing p{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.3vw,26px);
  line-height:1.35;color:var(--bone);margin:0}

.photo-mosaic{display:grid;gap:12px}
.mrow{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.mrow.mid{height:clamp(240px,30vw,430px)}
.mrow.tall{height:clamp(300px,40vw,560px)}
.cell{overflow:hidden;border:1px solid var(--rule);background:var(--surface);cursor:zoom-in}
.cell img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.cell:hover img{transform:scale(1.03)}
.c2{grid-column:span 2}.c3{grid-column:span 3}.c6{grid-column:span 6}
.photo-seeall{width:100%;margin-top:4px;padding:16px;background:transparent;color:var(--bone);
  border:1px solid var(--rule);font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.photo-seeall:hover{border-color:var(--orange);color:var(--orange)}

.photo-pager{margin-top:clamp(56px,8vw,104px);border-top:1px solid var(--rule);padding-top:30px;
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.photo-pager a{max-width:46%}
.photo-pager a.next{text-align:right;margin-left:auto}
.photo-pager .t{font-family:var(--serif);font-size:clamp(20px,3vw,34px);margin-top:8px;
  line-height:1.15;transition:color .3s}
.photo-pager a:hover .t{color:var(--orange)}

.photo-cta-block{padding:clamp(80px,12vw,150px) 0}
.photo-cta-block a{font-family:var(--serif);font-size:clamp(34px,6.6vw,76px);line-height:1.05;
  display:inline-block;transition:color .3s}
.photo-cta-block a:hover{color:var(--orange)}

/* ---------- viewer ---------- */
.lb{position:fixed;inset:0;z-index:11000;display:none;background:rgba(8,13,15,.97);backdrop-filter:blur(6px)}
.lb.open{display:block}
.lb-stage{position:absolute;inset:clamp(48px,7vh,90px) clamp(48px,7vw,110px)}
.lb-stage img{width:100%;height:100%;object-fit:contain;animation:lbIn .35s ease both}
@keyframes lbIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.lb button{position:absolute;background:transparent;border:1px solid var(--rule);color:var(--bone);
  cursor:pointer;transition:border-color .25s,color .25s}
.lb button:hover{border-color:var(--orange);color:var(--orange)}
.lb-close{top:20px;right:20px;width:42px;height:42px;font-size:18px;line-height:1}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);width:46px;height:64px;font-size:20px}
.lb-prev{left:14px}.lb-next{right:14px}
.lb-count{position:absolute;bottom:20px;left:0;right:0;text-align:center;
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.22em;color:var(--bone-40)}

@media(max-width:900px){
  .photo-grid{grid-template-columns:1fr}
  .photo-tile,.photo-tile.lead{grid-column:1 / -1;height:clamp(230px,50vw,340px)}
  .photo-top,.photo-body{grid-template-columns:1fr}
  .photo-narrative{position:static}
  .photo-mosaic{margin-top:26px}
  .photo-meta div{flex:1 1 46%}
  .photo-meta div + div{border-left:0;padding-left:0}
  .mrow{grid-template-columns:repeat(2,1fr)}
  .mrow.mid,.mrow.tall{height:auto}
  .c2,.c3{grid-column:span 1}
  .c6{grid-column:span 2}
  .cell{height:clamp(180px,46vw,260px)}
}
@media(max-width:760px){
  body.photo{font-size:14.5px}
  .photo-hero{min-height:78vh;padding-bottom:40px}
  .photo-hero h1{font-size:clamp(34px,10vw,46px);max-width:13ch}
  .photo-hero .lede{font-size:14px;max-width:34ch;margin-top:16px}
  .photo-filters{padding:26px 0 18px;gap:6px}
  .photo-filters button{padding:8px 14px;font-size:9.5px;letter-spacing:.14em}
  .photo-grid{gap:10px}
  .photo-tile,.photo-tile.lead{height:clamp(200px,46vw,290px)}
  .photo-tile .cap{padding:16px}
  .photo-tile .cap h2{font-size:19px}
  .photo-head{padding-top:88px}
  .photo-top{padding-top:22px}
  .photo-title{font-size:clamp(30px,8.5vw,40px)}
  .photo-intro{font-size:14px;max-width:36ch}
  .photo-meta{margin-top:22px}
  .photo-meta div{padding:14px 14px 14px 0}
  .photo-meta p{font-size:12.5px}
  .photo-heroshot{height:clamp(230px,58vw,340px);margin-top:20px}
  .photo-body{padding-top:30px}
  .photo-block + .photo-block{margin-top:24px}
  .photo-block p{font-size:14px;line-height:1.62}
  .photo-closing{margin-top:30px;padding-top:20px}
  .photo-closing p{font-size:19px}
  .photo-mosaic,.mrow{gap:10px}
  .photo-pager{margin-top:44px}
  .photo-pager a{max-width:100%}
  .photo-pager a.next{text-align:left;margin-left:0}
  .photo-cta-block{padding:64px 0}
  .lb-stage{inset:64px 10px 84px}
  .lb-prev,.lb-next{top:auto;bottom:16px;transform:none;width:52px;height:44px}
  .lb-prev{left:calc(50% - 60px)}.lb-next{right:calc(50% - 60px)}
  .lb-count{bottom:70px}
}
@media(prefers-reduced-motion:reduce){
  body.photo *{animation:none!important;transition:none!important}
}

/* =====================================================================
   Round 15 — mobile corrections
   ===================================================================== */
@media(max-width:900px){
  /* The floating nav sits over the page, so every photo page needs to start
     below it rather than behind it. */
  body.photo .photo-head{padding-top:clamp(124px,26vw,168px)!important}
  body.photo .photo-top{padding-top:26px}

  /* breathing room between the hero frame and The Ask */
  body.photo .photo-body{padding-top:clamp(44px,11vw,72px)!important}

  /* and between the pager and the closing line */
  body.photo .photo-cta-block{padding:clamp(84px,22vw,132px) 0 clamp(56px,14vw,88px)!important}
  body.photo .photo-pager{margin-top:clamp(52px,13vw,80px)}
}

@media(max-width:760px){
  /* headline broke mid-phrase and read as an indent; balance the lines */
  .photo-hero h1{
    font-size:clamp(35px,9.4vw,44px);
    line-height:1.06;
    max-width:14ch;
    text-wrap:balance;
    margin-top:14px;
  }
  .photo-hero h1 em{margin-top:2px}
  .photo-hero .lede{max-width:38ch;line-height:1.6}
  .photo-hero__in{padding-bottom:6px}
  .photo-cta{margin-top:26px}
}

/* the viewer swaps a thumbnail for the full file, so soften the handover */
.lb-stage img{transition:filter .25s ease}

/* =====================================================================
   Round 18
   ===================================================================== */

/* The nav pill is fixed and floats over the page, so the first element on a
   photo project page has to start below it at every width. This lives in the
   last stylesheet loaded so nothing earlier can win. */
body.photo .photo-head{padding-top:clamp(150px,13vw,196px)!important}
html{scroll-padding-top:110px}

/* Less dead air between the meta row and the first case-study heading. */
body.photo .photo-body{padding-top:clamp(26px,3vw,44px)!important}
body.photo .photo-meta{margin-top:26px}
body.photo .photo-heroshot{height:clamp(260px,32vw,440px)}

/* A visible break between the hero frame and the gallery below it. */
body.photo .photo-mosaic{margin-top:clamp(18px,2.4vw,34px)}

/* ---------- viewer: progressive zoom ---------- */
.lb-stage{cursor:zoom-in;overflow:hidden}
.lb-stage img{transform-origin:center center;transition:transform .28s cubic-bezier(.2,.8,.2,1);
  will-change:transform;user-select:none;-webkit-user-drag:none}
.lb.zoomed .lb-stage img{transition:transform .12s linear}
.lb-zoom{position:absolute;top:24px;left:26px;font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:.18em;color:var(--orange)}
.lb-hint{position:absolute;bottom:44px;left:0;right:0;text-align:center;
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(239,234,216,.34)}
@media(max-width:900px){
  .lb-hint{display:none}
  .lb-stage{cursor:default}
  body.photo .photo-head{padding-top:clamp(132px,26vw,172px)!important}
  body.photo .photo-heroshot{height:clamp(230px,58vw,340px)}
}
@media(prefers-reduced-motion:reduce){.lb-stage img{transition:none!important}}