/* =========================================================
   GLOBAL BASE
========================================================= */
:root{
  --paper:#ffffff; --ink:#0a0a0a; --ink-60:#4e4e4e; --maxw:1360px;
  --gap-x:60px; --gap-y:80px; --thumb-w:160px;
  --hover-bg:none;
}
*{box-sizing:border-box}
html,body{
  margin:0; min-height:100%;
  background:var(--paper); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}
a{color:inherit;text-decoration:none}
a:focus{outline:1px dotted var(--ink-60);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:16px;background:#fff;color:#000;padding:8px 12px;border:1px solid #000}

.topbar,.layout-switch,.gallery,.foot{position:relative;z-index:1}
.topbar{
  max-width:var(--maxw);margin:0 auto;padding:28px;
  display:flex;justify-content:space-between;align-items:center
}
.name{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:18px;letter-spacing:.1px}
.nav{display:flex;gap:60px}
.nav a{font-family:"Cormorant Garamond",serif;font-size:14px;position:relative}
.nav a::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:transparent;transition:background-color .2s ease}
.nav a:hover::after,.nav a[aria-current="page"]::after{background:var(--ink)}
.layout-switch{
  max-width:var(--maxw);margin:6px auto 0;padding:0 28px;
  text-align:center;font-family:"Cormorant Garamond",serif;font-size:14px;cursor:pointer;user-select:none
}
.layout-switch:focus{outline:1px dotted var(--ink-60);outline-offset:4px}

.foot{max-width:var(--maxw);margin:18px auto 48px;padding:0 28px;font-size:12px;color:var(--ink-60)}

/* =========================================================
   HOMEPAGE — 3-video background + centered black box
========================================================= */
html.home, body.home{height:100%;overflow:hidden;background:#000}
.home .video-container{display:flex;width:100vw;height:100vh;position:fixed;inset:0;z-index:0;contain:layout paint;backface-visibility:hidden}
.home .video-container video{flex:1;height:100%;object-fit:cover;filter:contrast(1.02) saturate(.98);}

/* Center black square overlay */
.home .overlay{position:fixed;inset:0;display:grid;place-items:center;z-index:2;pointer-events:none}
.home .ovl-inner{
  pointer-events:auto;
  width:min(420px,80vw); height:min(420px,70vh);
  background:#000; color:#fff; border:1px solid rgba(255,255,255,.12);
  /* Blur can be expensive on mobile; we keep it only on larger screens */
  backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  transition:transform .28s ease, box-shadow .28s ease;
  font-family:"Cormorant Garamond",serif;
  will-change:transform;
}
@media (max-width: 820px){
  .home .ovl-inner{backdrop-filter:none;background:rgba(0,0,0,.86)}
}
.home .ovl-inner:hover{transform:translateY(-2px);box-shadow:0 18px 54px rgba(0,0,0,.42)}
.home .overlay-top,
.home .overlay-bottom-left,
.home .overlay-bottom-right{
  position:absolute;font-size:13px;letter-spacing:.4px;opacity:.92;font-style:italic
}
.home .overlay-top{top:18px;right:18px}
.home .overlay-bottom-left{bottom:18px;left:18px}
.home .overlay-bottom-right{bottom:18px;right:18px}
.home .overlay-center{
  font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:600;
  font-size:clamp(42px,8.2vmin,86px);line-height:1;letter-spacing:.6px
}

/* Minimal custom cursor */
.home #custom-cursor{
  position:fixed;pointer-events:none;transform:translate(12px,12px);
  font-size:14px;color:#fff;z-index:1000;opacity:.9;
  font-family:"Cormorant Garamond",serif;font-style:italic;letter-spacing:.2px;mix-blend-mode:difference;
  contain:paint;
}
.home .ovl-inner{cursor:pointer}

/* =========================================================
   PROJECTS — Grid / List gallery
========================================================= */
.gallery{
  max-width:var(--maxw);margin:120px auto 140px;padding:0 28px;
  display:grid;grid-template-columns:repeat(4,1fr);
  column-gap:var(--gap-x);row-gap:var(--gap-y)
}
@media (max-width:980px){.gallery{grid-template-columns:1fr}}
.project{
  display:flex;align-items:flex-start;gap:22px;transform:translateZ(0)
}
.project .thumb{width:var(--thumb-w);flex-shrink:0;display:block;perspective:600px}
.project .caption{flex:1}
.project:focus{outline:none}
.thumb img{display:block;width:100%;height:auto;object-fit:cover;aspect-ratio:3/4;filter:contrast(1.02) saturate(.98);transition:filter .16s ease}
.thumb:hover img{filter:contrast(1.04) saturate(1)}
.caption{font-family:"Cormorant Garamond",serif;line-height:1.25;letter-spacing:.1px;color:var(--ink)}
.caption .title{font-weight:600;font-size:14px;margin-bottom:2px}
.caption .subtitle{font-style:italic;font-size:12.5px;margin-bottom:2px;color:var(--ink)}
.caption .extra{font-size:11.5px;color:var(--ink-60)}

.gallery.list-view{grid-template-columns:1fr}
.gallery.list-view .thumb{display:none}
.gallery.list-view .project{align-items:center;gap:0;padding:8px 0;cursor:pointer}
.gallery.list-view .caption,.gallery.list-view .caption *{
  color:#000;mix-blend-mode:normal;text-shadow:none
}

/* =========================================================
   LIST-VIEW BACKGROUND PREVIEW
========================================================= */
body::before{
  content:"";position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  width:20vw;max-width:400px;height:auto;aspect-ratio:3/4;
  background-image:var(--hover-bg);background-size:contain;background-position:center;background-repeat:no-repeat;
  opacity:0;transition:opacity .25s ease;pointer-events:none;z-index:0
}
body.bg-on::before{opacity:1}

/* =========================================================
   SCROLLING LIGHTBOX
========================================================= */
#lightbox{
  position:fixed;inset:0;z-index:9999;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.9)
}
#lightbox[aria-hidden="false"]{display:flex}
.lb-close{
  position:absolute;top:8px;right:8px;z-index:2;background:transparent;color:#fff;border:0;cursor:pointer;
  font-size:36px;line-height:1;padding:8px 10px;opacity:.9
}
.lb-close:hover{opacity:1}
.lb-panel{
  position:relative;width:min(92vw,1100px);height:min(92vh,1000px);
  background:transparent;overflow:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;box-shadow:none
}
.lb-content{position:relative;max-width:800px;margin:0 auto;padding:40px 28px 48px}
.lb-header{
  position:sticky;top:0;z-index:1;margin:0 0 32px;padding:12px 0;text-align:center;
  background:transparent;mix-blend-mode:difference;color:#fff
}
.lb-title{
  font-family:"Cormorant Garamond",serif;font-style:italic;font-size:24px;font-weight:500;
  margin:0 0 8px;line-height:1.2;color:#fff;text-align:center;mix-blend-mode:difference
}
.lb-desc{
  font-family:"Cormorant Garamond",serif;font-style:italic;font-size:15px;line-height:1.55;
  margin:0;color:#fff;text-align:center;mix-blend-mode:difference
}
.lb-stack{display:block}
.lb-item{display:block;margin:42px 0}
.lb-item img,.lb-item video{
  width:100%;height:auto;display:block;border-radius:4px;outline:none;max-height:none
}
.lb-item video:focus{outline:1px dotted #000;outline-offset:2px}

/* =========================================================
   FOCUS / OUTLINES — tidy
========================================================= */
.project:focus,.project:focus-visible,
#layoutSwitch:focus,#layoutSwitch:focus-visible,
a:focus,a:focus-visible,button:focus,button:focus-visible{
  outline:none!important;box-shadow:none!important
}

/* =========================================================
   UTILITIES
========================================================= */