:root{
  /* Tuned for fluid responsiveness */
  --paper:#ffffff;
  --ink:#0a0a0a;
  --ink-60:#4e4e4e;
  --maxw:1360px;

  --gap-x:clamp(24px, 6vw, 60px);
  --gap-y:clamp(36px, 7vw, 80px);
  --thumb-w:clamp(118px, 17vw, 180px);

  --hover-bg:none;
}

/* Base / reset */
*,*::before,*::after{ box-sizing:border-box }
html,body{
  margin:0;
  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;
  min-height:100%;
}
@supports (content-visibility:auto){
  main .project{ content-visibility:auto; contain-intrinsic-size: 300px 220px; }
}

/* Immersive list-view background image (via custom prop) */
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; }
@media (prefers-reduced-motion: reduce){ body::before{ transition:none; } }

a{ color:inherit; text-decoration:none; }

/* Layering */
.topbar,.layout-switch,.gallery,.foot{ position:relative; z-index:1; }

.skip{ position:absolute; left:-9999px; top:0; }
.skip:focus{ left:16px; top:16px; background:#fff; color:#000; padding:8px 12px; border:1px solid #000; }

/* Header / nav */
.topbar{
  max-width:var(--maxw);
  margin:env(safe-area-inset-top) auto 0;
  padding:20px 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; }

/* Desktop nav */
.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); }

/* Mobile menu trigger (hidden on desktop) */
.menu-toggle{
  display:none;
  background:none; border:0; cursor:pointer; user-select:none;
  font-family:"Inter",sans-serif; font-size:20px; line-height:1;
  letter-spacing:2px;
  padding:8px 10px;
}

/* Toggle (centered) */
.layout-switch{
  display:block;
  width:fit-content;
  margin:6px auto 0;
  padding:0;
  text-align:center;
  font-family:"Cormorant Garamond",serif;
  font-size:14px;
  cursor:pointer; user-select:none;
  background:none; border:0;
}
.layout-switch:focus-visible,
.menu-toggle:focus-visible,
.menu-close:focus-visible{
  outline:1px dotted var(--ink-60); outline-offset:4px;
}

/* ===== Grid / List gallery ===== */
.gallery{
  max-width:var(--maxw);
  margin:clamp(48px, 9vw, 120px) auto clamp(64px, 10vw, 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:1240px){ .gallery{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:980px){ .gallery{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px){ .gallery{ grid-template-columns:1fr; } }

.project{
  display:flex; align-items:flex-start; gap:22px;
  transform:translateZ(0);
}
.project:focus-visible{ outline:1px dashed var(--ink-60); outline-offset:4px; }

/* Thumb column fixed; text flexes */
.thumb{ width:var(--thumb-w); flex-shrink:0; display:block; perspective:600px; }
.thumb img{
  display:block; width:100%; height:auto; object-fit:cover; aspect-ratio:3/4;
  filter:contrast(1.02) saturate(.98); will-change:transform,filter;
  transition:filter .16s ease;
}
@media (hover:hover){
  .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);
  will-change:transform,opacity;
}
.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); }

/* List view style (title-only over full-screen BG) */
.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:black;
  mix-blend-mode:difference;
}

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

/* ===== 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-close:focus-visible{ outline:1px dotted #fff; outline-offset:4px; }

.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;
}

/* Sticky blended title/desc */
.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; }

/* Editorial header typography override (kept) */
.topbar .name {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.topbar .nav a {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

/* ===== MOBILE MENU (… sheet) ===== */
.menu-sheet{
  position:fixed; inset:0; z-index:9998;
  display:none;
}
.menu-sheet[aria-hidden="false"]{ display:block; }
.menu-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.3); opacity:0; transition:opacity .25s ease;
}
.menu-panel{
  position:absolute; top:0; right:0; height:100%; width:min(86vw, 360px);
  background:#fff; transform:translateX(100%); transition:transform .28s ease;
  display:flex; flex-direction:column; padding:16px 18px 24px;
  box-shadow: -8px 0 28px rgba(0,0,0,.12);
}
.menu-sheet[aria-hidden="false"] .menu-backdrop{ opacity:1; }
.menu-sheet[aria-hidden="false"] .menu-panel{ transform:translateX(0); }

.menu-head{ display:flex; align-items:center; justify-content:space-between; padding:8px 2px 16px; }
.menu-title{
  margin:0; font-family:"Inter",sans-serif; font-size:12px; letter-spacing:2px; text-transform:uppercase;
}
.menu-close{
  background:none; border:0; cursor:pointer; font-size:28px; line-height:1; padding:4px 8px;
}
.mnav{
  display:flex; flex-direction:column; gap:14px; margin-top:6px;
}
.mnav a{
  font-family:"Cormorant Garamond",serif; font-size:18px; line-height:1.1;
}

/* Show hamburger on small screens, hide desktop nav */
@media (max-width: 820px){
  .nav{ display:none; }
  .menu-toggle{ display:inline-block; }
}