/* Shared by home, work grid and project pages. Tokens and base come from base.css (the home page design language). */
.dd{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block;background:var(--accent)}
.more-row,.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,4vw,44px)}
.more-row{justify-content:center}
.btn-row.center{justify-content:center}
.b3.ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--line),0 10px 16px -12px rgb(var(--shadow)/.4)}
.b3.ghost:hover{background:var(--fg);color:var(--bg)}
a.drow{text-decoration:none;color:inherit}
.fval a{text-decoration:none;border-bottom:1px solid var(--line)}
.fval a:hover{color:var(--accent-ink);border-color:var(--accent)}

/* ---------- work page: category index + one project per screen (photographer-portfolio structure, home page type and colour) ---------- */
.wk{padding-top:clamp(20px,3vw,40px)}
.wk-index{position:relative;min-height:min(78vh,720px);padding:clamp(40px,8vw,110px) 0 clamp(36px,5vw,64px)}
.wk-index .eyebrow{margin-bottom:clamp(22px,3vw,36px)}
.wk-cats{margin:0;max-width:min(100%,1000px);font-family:var(--serif);font-weight:400;font-size:clamp(46px,8.2vw,112px);line-height:.98;letter-spacing:-.02em;text-wrap:balance}
.wk-cats .tab{all:unset;cursor:pointer;color:var(--fg);opacity:.32;transition:opacity .3s,color .3s}
.wk-cats .tab:hover,.wk-cats .tab:focus-visible{opacity:.8}
.wk-cats .tab[aria-selected="true"]{opacity:1}
.wk-cats .tab:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
.wk-cats .tab::after{content:attr(data-sep)}
.wk-cats .tab:last-of-type::after{color:var(--accent)}
.wk-cats .tab{margin-right:.2em}
.wk-peek{position:absolute;right:clamp(0px,3vw,48px);bottom:clamp(24px,4vw,56px);width:clamp(130px,17vw,230px);aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:linear-gradient(150deg,var(--ph),var(--ph2));box-shadow:0 30px 50px -28px rgb(var(--shadow)/.6);transform:rotate(3deg);transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .3s}
.wk-peek.swap{transform:rotate(-2deg) scale(.96)}
.wk-peek.none{opacity:0}
.wk-peek img{width:100%;height:100%;object-fit:cover;display:block}
.wk-list{display:flex;flex-direction:column;padding-bottom:clamp(96px,12vw,140px)}
.wk-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(16px,3vw,48px);min-height:clamp(440px,88vh,860px);padding:clamp(24px,4vw,56px) 0;border-top:1px solid var(--line-soft);text-decoration:none;color:inherit}
.wk-row.in{animation:up .6s cubic-bezier(.2,.7,.2,1) backwards}
.wk-l{display:flex;flex-direction:column;gap:12px;align-self:center}
.wk-idx{color:var(--faint)}
.wk-name{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,52px);line-height:1.02;letter-spacing:-.012em;text-wrap:balance;max-width:11ch}
.wk-sub{font-size:14px;color:var(--muted)}
.wk-c{display:grid;place-items:center}
.wk-img{position:relative;display:grid;place-items:center;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.wk-img img{display:block;height:clamp(260px,58vh,580px);width:auto;max-width:min(100%,62vw);object-fit:contain;border-radius:6px;box-shadow:0 40px 60px -38px rgb(var(--shadow)/.6)}
.wk-tile{height:clamp(260px,58vh,580px);aspect-ratio:4/5;max-width:100%;padding:clamp(18px,2.4vw,30px);display:flex;flex-direction:column;justify-content:space-between;gap:16px;border-radius:6px;background:linear-gradient(150deg,var(--ph),var(--ph2));position:relative;overflow:hidden;box-shadow:0 40px 60px -38px rgb(var(--shadow)/.5)}
.wk-tile .mono{font-size:10px;color:var(--faint)}
.wk-tile b{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.2vw,60px);line-height:1;letter-spacing:-.015em;text-wrap:balance}
.wk-tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#FF3EA5,#FFAA00,#0644E8,#8EC9FF);opacity:.8}
.wk-view{position:absolute;inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);padding:9px 14px;border-radius:999px;background:var(--fg);color:var(--bg);opacity:0;transition:opacity .3s;white-space:nowrap}
.wk-row:hover .wk-view,.wk-row:focus-visible .wk-view{opacity:1}
.wk-row:hover .wk-img{transform:scale(1.015)}
.wk-r{display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right}
.wk-r .mono{color:var(--fg)}.wk-r .wk-flag{color:var(--faint)}
@media (max-width:860px){
  .wk-row{grid-template-columns:1fr;min-height:0;gap:16px;padding:28px 0 36px}
  .wk-l{order:1;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:6px 14px}.wk-sub{width:100%}.wk-name{max-width:none;font-size:clamp(30px,8vw,40px)}
  .wk-c{order:2}.wk-r{order:3;flex-direction:row;justify-content:space-between;align-items:baseline}
  .wk-img img{height:auto;width:100%;max-width:100%;max-height:70vh}.wk-tile{height:auto;width:100%;aspect-ratio:4/3}
  .wk-peek{display:none}.wk-index{min-height:0}
}

/* ---------- bottom dock (the reference's floating dark pill) ---------- */
.dock{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:40;transform:translateX(-50%);display:flex;align-items:center;gap:2px;padding:5px;border-radius:999px;background:var(--fg);color:var(--bg);
  max-width:calc(100vw - 24px);overflow-x:auto;scrollbar-width:none;box-shadow:0 22px 40px -16px rgb(0 0 0/.5),0 0 0 1px rgb(255 255 255/.06);transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .3s}
.dock::-webkit-scrollbar{display:none}
.dock.off{transform:translate(-50%,160%);opacity:0;pointer-events:none}
.dock a,.dock button{flex:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:inherit;font:500 13px/1 var(--sans);text-decoration:none;white-space:nowrap;opacity:.66;transition:opacity .2s,background .25s}
.dock a:hover,.dock button:hover{opacity:1}
.dock [aria-pressed="true"]{opacity:1;background:color-mix(in srgb,var(--bg) 20%,transparent)}
.dock .dk-back{padding-left:10px;opacity:.5}
.dock svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dock :focus-visible{outline-color:var(--accent);outline-offset:-2px}

/* ---------- project pages ---------- */
.proj{padding-top:clamp(20px,3vw,36px);padding-bottom:clamp(96px,12vw,140px)}
.back{display:inline-block;margin-top:clamp(12px,2vw,24px);color:var(--faint);text-decoration:none;padding:12px 0;transition:color .2s}
.back:hover{color:var(--accent-ink)}
.phead{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;padding:clamp(12px,2vw,28px) 0 clamp(32px,5vw,56px)}
.phead .eyebrow{margin-bottom:18px}
.phead .ttl{font-size:clamp(44px,7vw,96px)}
.cbody{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:start}
.intro-big{font-family:var(--serif);font-size:clamp(26px,3.2vw,40px);line-height:1.22;letter-spacing:-.008em;text-wrap:pretty}
.cbody .meta{margin-top:6px}
.mval a{text-decoration:none;border-bottom:1px solid var(--line)}.mval a:hover{color:var(--accent-ink);border-color:var(--accent)}
.selhead{margin-top:clamp(48px,7vw,88px);margin-bottom:22px}
.sel{columns:3;column-gap:clamp(10px,1.6vw,22px)}
.sel .gph{break-inside:avoid;margin:0 0 clamp(10px,1.6vw,22px)}
.gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.6vw,22px);grid-auto-flow:dense;align-items:center}
.gph{margin:0;aspect-ratio:var(--r);border-radius:14px;overflow:hidden;background:linear-gradient(150deg,var(--ph),var(--ph2));box-shadow:0 26px 40px -30px rgb(var(--shadow)/.5);scroll-margin-top:96px}
.gal .gph.left{grid-column:1}.gal .gph.right{grid-column:2}
.gal .gph.wide{grid-column:1/-1;justify-self:center;width:min(100%,calc(78vh*var(--rn)))}
.gbtn{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
a.gbtn{cursor:pointer}
.gph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.gph:hover img{transform:scale(1.025)}
.empty{padding:48px 0;color:var(--muted)}
.next{margin-top:clamp(64px,9vw,120px);padding-top:24px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.nextlink{display:flex;justify-content:space-between;align-items:baseline;gap:16px;text-decoration:none;color:inherit}
.nextlink .go{font-size:clamp(26px,3vw,40px);transition:transform .3s}
.nextlink:hover .go{transform:translateX(8px);color:var(--accent-ink)}
@media (max-width:860px){.phead,.cbody{grid-template-columns:1fr}.sel{columns:2}}
@media (max-width:560px){.gal{grid-template-columns:1fr}.gal .gph.left,.gal .gph.right,.gal .gph.wide{grid-column:1;width:100%}}

/* lightbox */
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgb(12 12 11/.94);color:#F2EFE8}
.lb:not([open]){display:none}
.lb::backdrop{background:transparent}
.lb figure{position:absolute;inset:56px 72px 64px;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.lb img{max-width:100%;max-height:calc(100% - 32px);object-fit:contain;border-radius:6px}
.lb figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:rgb(242 239 232/.6);min-height:16px}
.lb button{position:absolute;width:48px;height:48px;border-radius:50%;border:1px solid rgb(255 255 255/.2);background:rgb(255 255 255/.06);color:inherit;font-size:26px;line-height:1;display:grid;place-items:center;transition:background .2s}
.lb button:hover{background:rgb(255 255 255/.16)}
.lb-x{top:12px;right:12px}.lb-p{left:12px;top:50%;margin-top:-24px}.lb-n{right:12px;top:50%;margin-top:-24px}
@media (max-width:700px){.lb figure{inset:64px 8px 72px}.lb-p,.lb-n{top:auto;bottom:12px;margin:0}.lb-p{left:calc(50% - 56px)}.lb-n{right:calc(50% - 56px)}}

/* ---------- album pages: horizontal photo strip, driven by vertical scroll ---------- */
.hzwrap{display:none}
@media (min-width:900px) and (hover:hover) and (prefers-reduced-motion:no-preference){
  .fallback{display:none}
  .hzpage .nav{position:fixed;top:max(10px,env(safe-area-inset-top,0px));left:16px;right:16px;max-width:1200px;margin:0 auto}
  .hzpage .page{min-height:0}
  .hzpage .curtain{clip-path:none;margin-bottom:0}
  .hzwrap{display:block;position:relative;z-index:0}
  .hz-pin{position:sticky;top:0;height:100vh;overflow:hidden}
  .hz-track{display:flex;align-items:center;gap:clamp(14px,1.6vw,26px);width:max-content;height:100%;padding:92px clamp(16px,3vw,48px) 84px;will-change:transform}
  .hz-slide{flex:none;margin:0;height:100%}
  .hz-slide img{display:block;height:100%;width:auto;max-width:none;border-radius:6px;box-shadow:0 30px 50px -34px rgb(var(--shadow)/.6)}
  .hz-title{flex:none;width:min(40vw,560px);display:flex;flex-direction:column;justify-content:center;gap:16px;padding:0 clamp(12px,3vw,48px)}
  .hz-title .mono{color:var(--faint)}
  .hz-h{font-family:var(--serif);font-weight:400;font-size:clamp(44px,6vw,92px);line-height:.98;letter-spacing:-.02em;text-wrap:balance}
  .hz-meta{color:var(--fg)!important}
  .hz-hint{margin-top:18px;color:var(--accent-ink)!important}
  .hz-next{flex:none;width:min(46vw,640px);height:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 clamp(16px,3vw,48px);padding:0 clamp(16px,4vw,64px);text-decoration:none;color:inherit;align-content:center}
  .hz-next .mono{grid-column:1/-1;color:var(--faint);margin-bottom:16px}
  .hz-next b{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.4vw,68px);line-height:1;letter-spacing:-.015em;text-wrap:balance}
  .hz-next img{width:clamp(120px,14vw,200px);height:auto;max-width:none;border-radius:6px;transform:rotate(7deg);box-shadow:0 30px 50px -28px rgb(var(--shadow)/.6);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .hz-next:hover img{transform:rotate(0) scale(1.05)}
  .hz-next:hover b{color:var(--accent-ink)}
}

.hzpage .curtain{clip-path:none;margin-bottom:0}

/* websites index: static headline, text-first tiles with feature chips */
.wk-index.short{min-height:0;padding-bottom:clamp(24px,4vw,48px)}
.wk-static .end{color:var(--accent)}
.wk-static{max-width:min(100%,1000px)}
.wk-chips{display:flex;flex-wrap:wrap;gap:6px}
.wk-chips i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 10px}
.wk-tile{aspect-ratio:4/5}
.wk-tile[style*="--cv"]{background:linear-gradient(150deg,color-mix(in srgb,var(--cv) 30%,var(--ph)),var(--ph2) 85%)}