:root{
  --ink:#0e0e0d; --ink-2:#1b1b19; --line:#2a2a27;
  --paper:#eeebe4; --paper-2:#d9d5cc; --mute:#8a877f;
  --film:#121110; --edge:#d6ae5c;
  --serif:'Instrument Serif', Georgia, 'Times New Roman', serif;
  --mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --gut:48px; --bg:var(--ink);
  --ease:cubic-bezier(.65,0,.2,1);
}
@media (max-width:760px){ :root{ --gut:18px } }
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--paper);font-family:var(--serif);-webkit-font-smoothing:antialiased;min-height:100vh;transition:background .6s var(--ease),color .6s var(--ease)}
body.light{--bg:var(--paper);color:var(--ink)}
body.lock{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
@media (max-width:760px){ .hide-sm{display:none !important} }
/* photos can't be dragged out or long-pressed to save */
/* ---------- download protection (as on the original site) ----------
   Photos ignore the pointer, so right-click / long-press lands on the frame or a transparent shield
   instead of the <img>: no "Save image" / "Save to Photos" option appears. */
.th img,.v-pic img,.v-thumb img,.fly{pointer-events:none}
.th img,.v-stage img,.v-strip img,.fly,.home .slide,.work .bg,.about .ph{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.th .im::after{content:'';position:absolute;inset:0;z-index:2}   /* shield */
@media print{ img,.home,.work,.about .ph,.viewer,.fly{display:none !important} }

/* ---------- header ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;justify-content:space-between;align-items:baseline;padding:30px var(--gut);
  transition:left .9s var(--ease),padding .9s var(--ease),transform .45s var(--ease),background .4s,color .6s var(--ease)}
.top .name{font-size:26px;letter-spacing:.01em;white-space:nowrap}
.top nav{display:flex;gap:34px}
.top nav a{opacity:.8;transition:opacity .2s;padding-bottom:3px;border-bottom:1px solid transparent}
.top nav a:hover{opacity:1}
.top nav a.on{opacity:1;border-bottom-color:currentColor}
.top.solid{background:color-mix(in srgb, var(--bg) 92%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}   /* same size as before: turning solid never nudges anything */
.top.away{transform:translateY(-110%)}
.menu{display:none;width:30px;height:20px;position:relative;align-self:center}
.menu span{position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .4s var(--ease)}
.menu span:first-child{top:6px}.menu span:last-child{top:14px}
body.nav-open .menu span:first-child{transform:translateY(4px) rotate(45deg)}
body.nav-open .menu span:last-child{transform:translateY(-4px) rotate(-45deg)}
@media (min-width:901px){ body.pg-about .top{left:39%;padding-left:96px} }
@media (max-width:760px){
  .top{padding:20px var(--gut);align-items:center}
  .top .name{font-size:22px}
  .menu{display:block}
  .top nav{position:fixed;inset:0;z-index:-1;height:100dvh;flex-direction:column;justify-content:center;gap:6px;padding:0 var(--gut);background:var(--ink);color:var(--paper);font-family:var(--serif);font-size:56px;text-transform:none;letter-spacing:-.01em;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
  .top nav a{border:0}
  body.nav-open .top nav{opacity:1;pointer-events:auto}
  body.nav-open .top{color:var(--paper);background:none;backdrop-filter:none;transform:none}
}

/* ---------- page transitions ---------- */
#app{transition:opacity .45s var(--ease)}
#app.out{opacity:0}

/* ---------- home ---------- */
.home{position:fixed;inset:0;overflow:hidden;background:#000;cursor:pointer}
.home .slide{position:absolute;inset:-2px;background-size:cover;background-position:center;opacity:0;transform:scale(1.06);transition:opacity 1.8s var(--ease),transform 9s linear}
.home .slide.on{opacity:1;transform:scale(1)}
.home.leaving::after{opacity:0;transition:opacity .7s var(--ease)}
.home::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 50%,rgba(0,0,0,.72) 100%);pointer-events:none}
.home .tag{position:absolute;left:var(--gut);bottom:110px;z-index:3;font-weight:400;font-size:clamp(44px,6.4vw,92px);line-height:.98;letter-spacing:-.01em;max-width:13ch}
.home .tag em{color:var(--paper-2)}
.home .tag .ln{display:block;overflow:hidden}
.home .tag .ln > span{display:block;transform:translateY(105%);animation:rise 1.4s var(--ease) forwards}
.home .tag .ln:nth-child(2) > span{animation-delay:.18s}
@keyframes rise{to{transform:none}}
.home .progress{position:absolute;left:var(--gut);right:var(--gut);bottom:76px;z-index:3;display:flex;gap:6px}
.home .progress i{flex:1;height:1px;background:rgba(238,235,228,.22);position:relative;overflow:hidden}
.home .progress i b{position:absolute;inset:0;background:var(--paper);transform:scaleX(0);transform-origin:left}
.home .progress i.done b{transform:scaleX(1)}
.home .progress i.on b{animation:fill 6s linear forwards}
@keyframes fill{to{transform:scaleX(1)}}
.home .foot{position:absolute;left:var(--gut);right:var(--gut);bottom:40px;z-index:3;display:flex;justify-content:space-between;align-items:center;color:var(--paper-2)}
.home .foot b{color:var(--paper);font-weight:500}
.home .enter{display:flex;align-items:center;gap:12px}
.home .enter i{display:block;width:1px;height:28px;background:var(--paper);animation:drip 2.2s var(--ease) infinite;transform-origin:top}
@keyframes drip{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.intro{position:fixed;inset:0;z-index:50;background:var(--ink);display:flex;align-items:center;justify-content:center;pointer-events:none;clip-path:inset(0 0 0 0);animation:intro 1.6s var(--ease) .5s forwards}
.intro span{font-size:28px;opacity:0;animation:fadein .6s var(--ease) forwards}
@keyframes intro{to{clip-path:inset(0 0 100% 0)}}
@keyframes fadein{to{opacity:1}}
@media (max-width:760px){ .home .tag{bottom:96px} .home .foot{bottom:28px} .home .progress{bottom:64px} }

/* ---------- work: one series per screen, page-turn transitions ---------- */
:root{--turn:cubic-bezier(.76,0,.24,1)}
.work{position:fixed;inset:0;overflow:hidden;background:#000;touch-action:none;overscroll-behavior:none}
.panel{position:absolute;inset:0;overflow:hidden;display:flex;align-items:flex-end;padding:0 var(--gut) 64px;cursor:pointer;visibility:hidden;will-change:transform}
.panel.cur{visibility:visible}
.panel .bg{position:absolute;inset:-2px;background-size:cover;background-position:center;filter:brightness(.62);transition:filter 1.2s var(--ease);will-change:transform}
.panel .shade{position:absolute;inset:0;background:#000;opacity:0;transition:opacity 1.15s var(--turn);pointer-events:none}
.panel.dim .shade{opacity:.55}
@media (hover:hover){ .panel.cur:hover .bg{filter:brightness(.72)} }
.panel .meta{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto;gap:20px;width:100%;align-items:end}
.panel h2{font-weight:400;font-size:clamp(60px,12vw,190px);line-height:.86;letter-spacing:-.025em;opacity:0;transform:translateY(50px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.panel.in h2{opacity:1;transform:none;transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.panel .n{display:block;margin-bottom:18px;color:var(--paper-2)}
.panel p{font-size:24px;font-style:italic;color:var(--paper-2);max-width:380px;text-align:right;opacity:0;transition:opacity .4s var(--ease)}
.panel.in p{opacity:1;transition:opacity 1s var(--ease) .35s}
.panel p .mono{display:block;font-style:normal;margin-top:12px;color:var(--paper)}
.work .dots{position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;gap:12px}
.work .dots a{color:var(--paper-2);opacity:.45;transition:opacity .4s}
.work .dots a.on{opacity:1;color:var(--paper)}
.work .wcount{position:absolute;right:var(--gut);bottom:30px;z-index:5;color:var(--paper-2);display:none}
.work .wcount b{color:var(--paper);font-weight:500}
.home.leaving .tag,.home.leaving .foot,.home.leaving .progress{opacity:0;transition:opacity .35s var(--ease)}
@media (max-width:760px){
  .panel{padding-bottom:48px}
  .panel .meta{grid-template-columns:1fr}
  .panel p{text-align:left;font-size:20px}
  .work .dots{display:none}
  .work .wcount{display:block;top:26px;bottom:auto;right:64px}
}

/* ---------- index: contact sheets that look like 35mm negative strips ---------- */
.idx{padding:150px var(--gut) 120px;min-height:100vh}
.idx .head{display:flex;justify-content:space-between;align-items:baseline;color:var(--mute);border-bottom:1px solid var(--paper-2);padding-bottom:14px;flex-wrap:wrap;gap:12px}
.idx .head h1{font-weight:400;font-size:clamp(40px,5vw,64px);color:var(--ink);letter-spacing:-.01em;text-transform:none;font-family:var(--serif)}
.tabs{display:flex;gap:8px;align-items:center}
.tabs a{padding:2px 0;border-bottom:1px solid transparent}
.tabs a.on{color:var(--ink);border-bottom-color:var(--ink)}
.roll{margin-top:44px}
.roll h3{font-weight:400;font-size:30px;display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:12px}
.roll h3 .mono{color:var(--mute)}
.roll h3 a:hover{font-style:italic}
.film{--hole:var(--bg);position:relative;background:var(--film);padding:22px 0 30px;margin-bottom:10px;overflow:hidden}
.film::before,.film::after{content:'';position:absolute;left:0;right:0;height:9px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='9'%3E%3Crect x='6' y='0' width='10' height='9' rx='2' fill='%23eeebe4'/%3E%3C/svg%3E") repeat-x}
.film::before{top:7px}.film::after{bottom:7px}
body:not(.light) .film::before,body:not(.light) .film::after{filter:brightness(.1)}
.film .edge{position:absolute;left:14px;right:14px;bottom:17px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;color:var(--edge);opacity:.75;pointer-events:none}
.film .frames{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding:0 10px}
.film .th .im{aspect-ratio:3/2 !important;background:#000}
.film .th img{object-fit:contain}
.film .th .fn{position:absolute;left:2px;bottom:-15px;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;color:var(--edge);opacity:.85}
@media (max-width:760px){
  .idx{padding-top:96px}
  .film .frames{grid-template-columns:repeat(3,1fr);gap:6px;padding:0 6px}
  .film{padding:18px 0 28px}
  .film .edge span:nth-child(n+3){display:none}
  .roll h3{font-size:24px}
}

/* ---------- thumbs ---------- */
.th{position:relative;display:block;cursor:zoom-in}
.th .im{position:relative;overflow:hidden;background:#141413}
.th img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease-out,filter .9s var(--ease),transform .9s var(--ease)}
.th img.ld{opacity:1}
.th .cap{position:absolute;left:0;right:0;bottom:-22px;display:flex;justify-content:space-between;color:var(--mute);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:0;transform:translateY(-4px);transition:opacity .35s,transform .35s var(--ease);pointer-events:none}

/* hover: with a mouse, the other photos dim slightly so the one under the cursor stands forward, and its caption
   slides in. No blur. Touch screens get no hover effect, so scrolling never changes anything. */
.th .fl,.th .sh{display:none}
@media (hover:hover) and (pointer:fine){
  .grid:has(.th:hover) .th:not(:hover) img.ld,
  .frames:has(.th:hover) .th:not(:hover) img.ld{filter:brightness(.72)}
  .grid .th:hover img.ld{transform:scale(1.015)}
  .grid .th:hover .cap{opacity:1;transform:none}
}
.th.act img.ld{transform:scale(.97);filter:brightness(.8);transition-duration:.15s}

/* ---------- series page ---------- */
.series .head{padding:170px var(--gut) 64px;display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:40px}
.series h1{font-weight:400;font-size:clamp(60px,9.5vw,140px);line-height:.9;letter-spacing:-.02em}
.series h1 small{display:block;font-size:12px;font-family:var(--mono);letter-spacing:.14em;color:var(--mute);margin-bottom:22px}
.series .desc{font-size:26px;font-style:italic;color:var(--paper-2);max-width:460px}
.series .meta{margin-top:26px;color:var(--mute);display:flex;gap:28px;flex-wrap:wrap}
.series .meta a.on{color:var(--paper);border-bottom:1px solid var(--paper)}
.grid{padding:0 var(--gut) 40px;display:flex;flex-direction:column;gap:6px}
.grid .r{display:flex;gap:6px}
.grid .th{min-width:0}
.series .film{margin:0 var(--gut) 10px}
.nextser{display:flex;justify-content:space-between;align-items:baseline;margin:50px var(--gut) 0;padding:44px 0 110px;border-top:1px solid var(--line);gap:20px}
.nextser .mono{color:var(--mute)}
.nextser a{font-size:clamp(40px,5vw,66px);font-style:italic}
.nextser a:hover{opacity:.7}
@media (max-width:760px){
  .series .head{grid-template-columns:1fr;padding-top:110px;gap:18px;padding-bottom:36px}
  .series .desc{font-size:21px}
  .grid,.grid .r{gap:10px}
  .grid .r{flex-direction:column}
  .grid .r .th{flex:none !important;width:100%}
  .nextser{flex-direction:column;padding-bottom:120px}
}

/* ---------- viewer: big photo + momentum strip (vertical on desktop, horizontal on phones) ---------- */
.viewer{position:fixed;inset:0;z-index:40;background:#060606;color:var(--paper);display:grid;
  grid-template-columns:1fr 120px;grid-template-rows:70px 1fr 64px;grid-template-areas:"bar bar" "stage strip" "cap strip";
  opacity:0;transition:opacity .45s var(--ease)}
.viewer.on{opacity:1}
.viewer[hidden]{display:none}
.v-bar{grid-area:bar;display:flex;justify-content:space-between;align-items:center;padding:0 var(--gut);color:var(--paper-2)}
.v-bar b{color:var(--paper);font-weight:500}
.v-bar > span{flex:1}.v-bar > span:nth-child(2){text-align:center}.v-bar > span:last-child{text-align:right}
.v-bar a:hover{color:var(--paper)}
.v-stage{grid-area:stage;position:relative;min-height:0;margin:0 24px 0 var(--gut);touch-action:none;cursor:grab;user-select:none}
.v-stage:active{cursor:grabbing}
.v-pic{position:absolute;inset:0;opacity:0;transition:opacity .3s cubic-bezier(.6,0,.9,1);background:var(--x,0) var(--y,0)/var(--w,0) var(--h,0) no-repeat}
.v-pic.show{opacity:1;transition:opacity .3s cubic-bezier(.1,.6,.3,1)}
.v-pic img{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);object-fit:fill;pointer-events:none}
.v-pic img:not([src]){visibility:hidden}
.v-pic .hi{opacity:0;transition:opacity .35s cubic-bezier(.4,0,.2,1)}
.v-pic .hi.in{opacity:1}
.v-pic .hi.instant{transition:none}
.v-cap{grid-area:cap;display:flex;justify-content:space-between;align-items:center;padding:0 24px 0 var(--gut);color:var(--mute)}
.v-place{font-size:26px;font-style:italic;color:var(--paper)}
.v-strip{grid-area:strip;position:relative;overflow:hidden;touch-action:none;cursor:grab;user-select:none}
.v-strip:active{cursor:grabbing}
.v-track{position:absolute;left:50%;top:50%;will-change:transform}
.v-thumb{position:absolute;left:0;top:0;width:72px;height:48px;overflow:hidden;background:#151514 center/cover no-repeat;opacity:.38;transition:opacity .3s;contain:strict}
.v-thumb img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.v-thumb.on{opacity:1}
.v-frame{position:absolute;left:50%;top:50%;width:84px;height:60px;transform:translate(-50%,-50%);border:1px solid rgba(238,235,228,.55);pointer-events:none}
.v-strip::before,.v-strip::after{content:'';position:absolute;z-index:2;pointer-events:none}
.v-strip::before{left:0;right:0;top:0;height:90px;background:linear-gradient(#060606,transparent)}
.v-strip::after{left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,#060606)}
.fly{position:fixed;z-index:45;object-fit:cover;pointer-events:none;transition:all .65s var(--ease)}
@media (max-width:760px){
  .viewer{grid-template-columns:1fr;grid-template-rows:58px 1fr 54px 74px;grid-template-areas:"bar" "stage" "cap" "strip"}
  .v-stage{margin:0}
  .v-cap{padding:0 var(--gut)}
  .v-place{font-size:21px}
  .v-strip{margin-bottom:env(safe-area-inset-bottom)}
  .v-strip::before{top:0;bottom:0;left:0;right:auto;width:60px;height:auto;background:linear-gradient(90deg,#060606,transparent)}
  .v-strip::after{top:0;bottom:0;right:0;left:auto;width:60px;height:auto;background:linear-gradient(-90deg,#060606,transparent)}
  .v-thumb{width:54px;height:36px}
  .v-frame{width:64px;height:46px}
}

/* ---------- about ---------- */
.about{min-height:100vh;display:grid;grid-template-columns:minmax(320px,39%) 1fr}
.about .ph{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;background:#000}   /* lvh: the full screen height, which stays put while Safari's toolbar shrinks and grows */
.about .ph .s{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.6s var(--ease)}
.about .ph .s.on{opacity:1}
.about .ph span{position:absolute;left:24px;bottom:22px;color:var(--paper);z-index:2;transition:opacity .6s}
.about .txt{padding:170px 96px 60px;display:flex;flex-direction:column}
.about h1{font-weight:400;font-size:clamp(46px,5vw,72px);line-height:1;letter-spacing:-.015em}
.about h1 em{color:#6d6a63}
.about .where{margin:30px 0 34px;color:var(--mute)}
.about .where b{color:var(--ink);font-weight:500}
.about .bio{font-size:22px;line-height:1.45;max-width:620px}
.about .bio + .bio{margin-top:16px}
.about .cols{margin-top:auto;padding-top:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;border-top:1px solid var(--paper-2)}
.about .cols h4{color:var(--mute);margin-bottom:10px;font-weight:400}
.about .cols p,.about .cols a,.about .cols button{font-size:22px}
.about .cols a:hover,.about .cols button:hover{font-style:italic}
.about .spacer{height:80px}
/* touch screens wide enough for the side-by-side layout (phones in landscape, tablets): only the text
   column scrolls, so the page never scrolls, Safari never collapses its toolbar, and the photo never shifts */
@media (min-width:901px) and (hover:none){
  .about{position:fixed;inset:0;min-height:0;grid-template-rows:100%}
  .about .ph{position:relative;height:100%}
  .about .txt{height:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
}
@media (max-width:900px){
  .about{grid-template-columns:1fr}
  /* phones (stacked): the photo scrolls away with the page like everything else; its height is set once in px
     (app.js) so Safari's toolbar shrinking or growing never resizes it */
  .about .ph{position:relative;height:64vh;height:64svh}
  .about .txt{padding:40px var(--gut) 60px}
  .about .bio{font-size:20px}
  .about .cols{grid-template-columns:1fr;gap:22px;margin-top:40px}
  .about .spacer{display:none}
}

/* film: edge printing in the top rebate, frame numbers in the bottom one; no blur beside upright frames */
.film{padding:31px 0 30px}
.film .edge{top:17px;bottom:auto}
.film .th .im{background:#000 !important}
@media (max-width:760px){ .film{padding:29px 0 28px} .film .edge{top:16px} }
/* about on phones: the name sits on the photo until you scroll */
@media (max-width:900px){ body.pg-about .top:not(.solid){color:var(--paper)} }