/* Works — selected photography + films (Practice pages / JP video)
   Uses site tokens only. No radii, no shadows — hairlines only. */
#photography,#film{scroll-margin-top:0}
.wk{padding:clamp(90px,12vw,180px) var(--pad);position:relative}
.wk-dark{background:#0d0c0a;color:var(--paper)}
.wk-dark .eyebrow{color:rgba(244,241,234,.55)}
.wk-soft{background:var(--paper-2)}
.wk-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,90px);align-items:end}
.wk-head h2{margin-top:26px}
.wk-head .wk-lead{font-size:15px;line-height:2;color:var(--muted);max-width:34em}
.wk-dark .wk-head .wk-lead{color:rgba(244,241,234,.62)}
@media (max-width:900px){.wk-head{grid-template-columns:minmax(0,1fr)}}
.wk-sub{margin-top:clamp(90px,10vw,150px);padding-top:clamp(40px,4vw,60px);border-top:1px solid var(--line-light)}

/* ---- selected photography ---- */
.wk-pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,22px);margin-top:clamp(44px,5vw,76px)}
.wk-ph{margin:0;display:flex;min-width:0}
.wk-ph a{position:relative;display:block;flex:1;overflow:hidden;background:#1b1916;aspect-ratio:4/5;cursor:zoom-in}
.wk-ph.w{grid-column:span 2}
.wk-ph.w a{aspect-ratio:3/2}
.wk-ph.t a{aspect-ratio:auto;min-height:100%}
.wk-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 2.4s cubic-bezier(.2,.7,.2,1)}
.wk-ph a:hover img{transform:scale(1.03)}
.wk-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--paper);background:linear-gradient(0deg,rgba(13,12,10,.55),rgba(13,12,10,0));pointer-events:none}
@media (max-width:760px){
  .wk-pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .wk-ph.t a{aspect-ratio:4/5;min-height:0}
  .wk-ph.mw{grid-column:span 2}
  .wk-ph.mw a{aspect-ratio:3/2}
  .wk-cap{padding:26px 12px 10px;font-size:9.5px;letter-spacing:.22em}
}

/* ---- films ---- */
.wk-films{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,3vw,48px) clamp(18px,2vw,32px);margin-top:clamp(44px,5vw,72px)}
@media (max-width:1000px){.wk-films{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.wk-films{grid-template-columns:minmax(0,1fr);gap:44px}}
.wk-film{min-width:0}
.wk-yt{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#000;cursor:pointer}
.wk-yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.74);transition:transform 2.4s cubic-bezier(.2,.7,.2,1),filter .8s}
.wk-yt:hover img,.wk-yt:focus-visible img{transform:scale(1.04);filter:brightness(.9)}
.wk-yt:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.wk-play{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border:1px solid rgba(244,241,234,.85);border-radius:50%;transition:background .5s,transform .5s}
.wk-play::after{content:"";position:absolute;left:50%;top:50%;margin:-8px 0 0 -4px;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent var(--paper)}
.wk-yt:hover .wk-play{background:rgba(244,241,234,.14);transform:scale(1.06)}
.wk-yt .wk-dur{position:absolute;left:14px;bottom:12px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:rgba(244,241,234,.8)}
.wk-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.wk-yt.on{cursor:auto}
.wk-k{margin-top:18px;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);line-height:1.8}
.wk-dark .wk-k{color:rgba(244,241,234,.5)}
.wk-film h3{font-family:var(--serif);font-weight:300;font-size:clamp(22px,2vw,30px);line-height:1.2;letter-spacing:.03em;margin-top:8px;overflow-wrap:anywhere}
.wk-film h3 small{display:block;font-family:var(--jp-serif,'Noto Serif JP',serif);font-size:13px;letter-spacing:.1em;margin-top:6px;opacity:.6}
.wk-d{margin-top:10px;font-size:13.5px;line-height:1.85;color:var(--muted)}
.wk-dark .wk-d{color:rgba(244,241,234,.62)}
.dark .wk-k{color:rgba(244,241,234,.5)}
.dark .wk-d{color:rgba(244,241,234,.62)}
.wk-film.jp h3{font-family:var(--jp-serif,'Noto Serif JP',serif);font-weight:400;font-size:clamp(18px,1.6vw,22px);letter-spacing:.08em;line-height:1.6}

/* ---- home entry (foreign TOPs) ---- */
.wk-home{background:var(--paper-2)}
.wk-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:14px 30px;margin-top:clamp(56px,6vw,90px);padding-top:22px;border-top:1px solid var(--line)}
.wk-bar h3{font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.2vw,32px);letter-spacing:.02em;line-height:1.2}
.wk-bar .more{margin-top:0}
.wk-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1vw,14px);margin-top:28px}
.wk-strip a{display:block;min-width:0}
.wk-strip .ph{aspect-ratio:4/5}
.wk-strip span{display:block;margin-top:12px;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.wk-home .wk-films{margin-top:28px}
@media (max-width:760px){.wk-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ---- lightbox (pages without the JP lightbox) ---- */
.wk-lb{position:fixed;inset:0;z-index:80;background:rgba(10,9,8,.96);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .5s}
.wk-lb.on{opacity:1;pointer-events:auto}
.wk-lb img{max-width:92vw;max-height:84vh;object-fit:contain}
.wk-lb button{position:absolute;background:none;border:0;color:var(--paper);font:inherit;font-size:11px;letter-spacing:.24em;cursor:pointer;padding:18px;opacity:.75}
.wk-lb button:hover{opacity:1}
.wk-lb .x{top:10px;right:10px}.wk-lb .pv{left:6px;top:50%;transform:translateY(-50%)}.wk-lb .nx{right:6px;top:50%;transform:translateY(-50%)}
.wk-lb .ct{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:var(--paper);font-size:11px;letter-spacing:.24em;opacity:.55}