*{box-sizing:border-box;margin:0;padding:0}
:root{
  --font-ui:"Avenir Next","Avenir","Century Gothic",sans-serif;
  --font-serif:'Cormorant',Georgia,serif;
}
html,body{height:100%;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-ui);font-weight:300;background:#fff;color:#0a0a0a}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ── HEADER ── */
.pf-header{height:40px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 16px;position:fixed;top:0;left:0;right:0;z-index:600}
.pf-name{font-family:var(--font-ui);font-size:14px;font-weight:500;letter-spacing:0.07em;text-transform:uppercase;color:#0a0a0a;cursor:pointer;transition:opacity 0.2s;white-space:nowrap}
.pf-name:hover{opacity:0.5}
.nav-left{display:flex;gap:20px}
.nav-left span,.nav-right span{font-family:var(--font-ui);font-size:13px;font-weight:400;letter-spacing:0.1em;text-transform:uppercase;color:#0a0a0a;cursor:pointer;transition:color 0.2s}
.nav-left span.active,.nav-right span.active{color:#0a0a0a;font-weight:500}.nav-left span:hover,.nav-right span:hover{color:#0a0a0a}
.nav-right{display:flex;align-items:center}

/* ── PAGES ── */
.page{display:none;padding-top:40px}
.page.active{display:block}

/* ── WORK GRID ── */
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;padding:3px 12px 44px}
.cell{position:relative;overflow:hidden;cursor:pointer;aspect-ratio:3/4;background:#d8d5d0}
.cell img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s cubic-bezier(.25,.46,.45,.94),filter 0.35s}
.cell:hover img{transform:scale(1.04);filter:brightness(0.72)}
.cell-info{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:10px;opacity:0;transition:opacity 0.3s;background:linear-gradient(transparent 45%,rgba(0,0,0,0.45))}
.cell:hover .cell-info{opacity:1}
.cell-title{font-family:var(--font-serif);font-size:30px;font-style:italic;font-weight:bold;color:#fff;margin-bottom:2px}
.cell-sub{font-family:var(--font-ui);font-size:13px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#fff!important}

/* ── PHOTO LIGHTBOX ── */
.lb{position:fixed;top:0;left:0;right:0;bottom:0;z-index:500;background:#fff;opacity:0;pointer-events:none;transition:opacity 0.3s;display:flex;flex-direction:column;padding-top:40px}
.lb.open{opacity:1;pointer-events:all;z-index:700}
.lb-sub-header{height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;flex-shrink:0;border-bottom:0.5px solid #e8e8e8}
button.back-btn{font-family:var(--font-ui) !important;font-size:11.5px !important;font-weight:400 !important;letter-spacing:0.1em !important;text-transform:uppercase !important;color:#0a0a0a !important;background:none !important;border:none !important;padding:0 !important;cursor:pointer !important;transition:opacity 0.2s !important}
button.back-btn:hover{opacity:0.45 !important}
.lb-meta{position:absolute;left:50%;transform:translateX(-50%);text-align:center}
.lb-project{font-family:var(--font-ui);font-size:12.5px;font-style:italic;font-weight:400;letter-spacing:0.07em;color:#0a0a0a}
.lb-counter{font-family:var(--font-ui);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:#bbb;margin-top:1px}
.lb-dots{display:flex;gap:5px;align-items:center}
.lb-dot{width:4px;height:4px;border-radius:50%;background:#ddd;cursor:pointer;transition:background 0.2s}
.lb-dot.active{background:#0a0a0a}
.lb-body{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;min-height:0}
.lb-zone{position:absolute;top:0;bottom:0;width:50%;z-index:2;cursor:pointer}.lb-zone.left{cursor:w-resize}.lb-zone.right{cursor:e-resize}
.lb-zone.left{left:0}.lb-zone.right{right:0}
.lb-zone .arrow{position:absolute;top:50%;transform:translateY(-50%);font-size:20px;color:rgba(0,0,0,0.15);transition:color 0.2s;pointer-events:none}
.lb-zone.left .arrow{left:14px}.lb-zone.right .arrow{right:14px}
.lb-zone:hover .arrow{color:rgba(0,0,0,0.5)}
.lb-cursor{position:fixed;pointer-events:none;z-index:500;transform:translate(-50%,-50%);opacity:0;transition:opacity 0.15s;font-size:19px;color:#0a0a0a;font-family:var(--font-ui)}
.lb-cursor.visible{opacity:1}
.lb-img-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px 60px}
.lb-img-wrap img{max-width:100%;max-height:100%;object-fit:contain;user-select:none;pointer-events:none}

/* ── MOTION ── */
.motion-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:48px 40px;padding:60px 80px 80px}
.motion-thumb{position:relative;cursor:pointer;background:transparent;overflow:hidden}
.motion-thumb img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter 0.35s}
.motion-thumb:hover img.poster{filter:brightness(0.75)}
.thumb-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2}
.thumb-play svg{width:44px;height:44px;opacity:0.7;transition:opacity 0.2s}
.motion-thumb:hover .thumb-play svg{opacity:1}
.thumb-info{position:absolute;bottom:0;left:0;right:0;padding:12px 14px;background:linear-gradient(transparent,rgba(0,0,0,0.75));opacity:0;transition:opacity 0.3s;z-index:3}
.motion-thumb:hover .thumb-info{opacity:1}
.thumb-title{font-family:var(--font-serif);font-size:30px;font-style:italic;font-weight:bold;color:#fff;margin-bottom:2px}
.thumb-sub{font-family:var(--font-ui);font-size:16px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#fff}
.thumb-soon span{font-family:var(--font-ui);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.2)}

/* ── VIDEO LIGHTBOX ── */
.vlb{position:fixed;top:40px;left:0;right:0;bottom:0;z-index:500;background:#fff;opacity:0;pointer-events:none;transition:opacity 0.3s;display:flex;flex-direction:column;padding-top:40px}
.vlb.open{opacity:1;pointer-events:all}
.vlb-sub-header{height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;padding-top:40px;flex-shrink:0;position:relative;z-index:10;border-bottom:0.5px solid #e8e8e8}
.vlb-title-wrap{position:absolute;left:50%;transform:translateX(-50%);text-align:center}
.vlb-title{font-family:var(--font-ui);font-size:12.5px;font-style:italic;font-weight:400;letter-spacing:0.07em;color:#0a0a0a}
.vlb-sub{display:none;font-family:var(--font-ui);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:#bbb;margin-top:1px}
.vlb-body{flex:1;min-height:0;position:relative;overflow:hidden}
.video-wrap{position:absolute;inset:0;background:transparent}
.video-wrap::before{content:'';display:block;padding-top:56.25%}

.controls{position:absolute;bottom:0;left:0;right:0;padding:10px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,0.55));opacity:0;transition:opacity 0.3s}
.video-wrap:hover .controls,.video-wrap.paused .controls{opacity:1}
.progress-wrap{position:relative;height:2px;background:rgba(255,255,255,0.25);cursor:pointer;margin-bottom:10px}
.progress-fill{height:100%;background:#fff;width:0%;pointer-events:none;position:relative}
.progress-handle{position:absolute;top:50%;right:-4px;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:#fff}
.ctrl-row{display:flex;align-items:center;justify-content:space-between}
.ctrl-left,.ctrl-right{display:flex;align-items:center;gap:12px}
.ctrl-btn{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;opacity:0.75;transition:opacity 0.2s}
.ctrl-btn:hover{opacity:1}
.ctrl-btn svg{width:16px;height:16px}
.ctrl-time{font-family:var(--font-ui);font-size:10px;letter-spacing:0.06em;color:rgba(255,255,255,0.7)}
.vol-wrap{display:flex;align-items:center;gap:6px}
.vol-slider{-webkit-appearance:none;appearance:none;width:48px;height:2px;background:rgba(255,255,255,0.3);outline:none;cursor:pointer;border-radius:1px}
.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:8px;height:8px;border-radius:50%;background:#fff}

/* ── INFO ── */
.info-wrap{display:grid;grid-template-columns:1fr 1fr;padding:0 0 44px}
.info-col{padding:24px 20px}
.info-col+.info-col{border-left:0.5px solid #e0dfd9}
.info-section{margin-bottom:22px}
.info-lbl{font-family:var(--font-ui);font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#0a0a0a;margin-bottom:8px}
.info-section p,.info-section a{font-family:var(--font-ui);font-size:13px;font-weight:400;line-height:1.75;color:#0a0a0a}
.info-section a{color:#0a0a0a;border-bottom:1px solid #ddd;transition:color 0.2s}
.info-section a:hover{color:#0a0a0a}
.info-bold{font-family:var(--font-ui);font-weight:700;color:#0a0a0a;display:block;margin-bottom:2px;font-size:13px}
.exh-list{list-style:none}
.exh-list li{font-family:var(--font-ui);font-size:12.5px;font-weight:300;line-height:1.85;color:#0a0a0a}

/* ── INSTAGRAM ── */
.ig-link{position:fixed;bottom:12px;left:16px;font-family:var(--font-ui);font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;font-weight:700;color:#fff;transition:color 0.2s;z-index:10;text-decoration:none}
.ig-link:hover{color:#0a0a0a}

/* ── RESPONSIVE ── */
@media(max-width:900px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.grid{grid-template-columns:repeat(2,1fr)}.info-wrap{grid-template-columns:1fr}.info-col+.info-col{border-left:none;border-top:0.5px solid #e0dfd9}}

/* ── THUMBNAILS VIEW ── */
.lb-right { display:flex; align-items:center; gap:10px; }
.lb-thumb-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size:22.5px;
  color: var(--fg, #1a1a1a);
  opacity: 0.4;
  padding: 0 0 0 12px;
  transition: opacity 0.2s;
  line-height: 1;
  flex-shrink: 0;
}
.lb-thumb-toggle:hover, .lb-thumb-toggle.active { opacity: 1; }

.lb-thumbs {
  display: none;
  position: absolute;
  inset: 0;
  background:#fff;
  padding: 40px;
  overflow-y: auto;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  z-index: 2;
}
.lb-thumbs.open {
  display: grid;
}
.lb-thumbs img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  cursor: pointer;
  transition: opacity 0.2s;
}
.lb-thumbs img:hover { opacity: 0.8; }
.lb-thumbs img.active { outline: 1.5px solid var(--fg, #1a1a1a); }

#vimeoContainer{position:absolute;inset:0}
#vimeoContainer iframe{position:absolute;inset:0;width:100%;height:100%;border:none}
.lb-client{font-style:normal;font-weight:400}
.vlb-client{font-style:normal;font-weight:400}
.thumb-poster{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#e8e8e8}

.info-section p,.info-section a,.info-section li,.info-section span,.info-section ul{color:#0a0a0a!important;font-weight:400;font-size:13px}
/* ── BOOKS ── */
.books-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 40px;padding:60px 80px 80px}
.book-card{cursor:pointer}
.book-cover{width:100%;aspect-ratio:3/4;background:#f0ece8;overflow:hidden;margin-bottom:14px}
.book-cover img{width:100%;height:100%;object-fit:cover}
.book-title{font-family:var(--font-serif);font-size:18px;font-style:italic;font-weight:bold;color:#0a0a0a;margin-bottom:4px}
.book-sub{font-family:var(--font-ui);font-size:11px;font-weight:400;letter-spacing:0.08em;color:#0a0a0a;margin-bottom:2px}
.book-year{font-family:var(--font-ui);font-size:11px;font-weight:400;letter-spacing:0.08em;color:#666}

/* ── BOOKS OVERLAY & HOVER ── */
.book-cover{position:relative;overflow:hidden}
.book-overlay{position:absolute;inset:0;background:rgba(0,0,0,0);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s,background 0.3s}
.book-card:hover .book-overlay{opacity:1;background:rgba(0,0,0,0.35)}
.book-hover-title{font-family:var(--font-serif);font-size:43px;font-style:italic;font-weight:700;color:#fff;text-align:center;padding:0 32px;letter-spacing:0.02em}
/* ── BOOK DETAIL PAGE ── */
.book-detail-images{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;margin:60px auto 60px;max-width:900px}
.book-detail-images img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.book-detail-section{max-width:700px;margin:0 auto 40px}
.book-detail-title{font-family:var(--font-ui);font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#0a0a0a;margin-bottom:16px}
.book-section-lbl{font-family:var(--font-ui);font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#0a0a0a;margin-bottom:12px}
.book-detail-text{font-family:var(--font-ui);font-size:13px;font-weight:400;line-height:1.75;color:#0a0a0a;white-space:pre-line}
.book-press-item{font-family:var(--font-ui);font-size:13px;font-weight:400;line-height:1.75;color:#0a0a0a}
.book-order-btn{font-family:var(--font-ui);font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#0a0a0a;text-decoration:underline}
.book-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:60px auto 0;max-width:900px;width:100%}
.book-gallery-item{overflow:hidden}
.book-gallery-item img{width:100%;height:auto;display:block}
#bookDetail{padding:60px 0 80px}
#bookDetail > *:not(.book-detail-images):not(.book-gallery){max-width:600px;margin-left:auto;margin-right:auto;padding:0 40px}

@media (max-width:600px){
  header{padding:0 12px;flex-wrap:nowrap;gap:8px}
  .pf-name{font-size:10px;letter-spacing:0.04em;flex-shrink:0}
  .nav-left{gap:10px;flex-shrink:0}
  .nav-left span,.nav-right span{font-size:10px;letter-spacing:0.06em}
  .nav-right{flex-shrink:0}
  .motion-grid{grid-template-columns:1fr;gap:32px 0;padding:30px 16px 40px}
  .books-grid{grid-template-columns:1fr;gap:32px 0;padding:30px 16px 40px}
  .book-detail-images{margin:30px auto;max-width:100%}
  .book-gallery{max-width:100%;grid-template-columns:repeat(2,1fr)}
}