@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

:root {
  --bg:#0d0d0b; --bg2:#141410; --bg3:#1a1a16;
  --amber:#e8a830; --amber-dim:#c48a1a;
  --text:#f0ede6; --text-muted:#8a877e; --text-dim:#5a574f;
  --border:rgba(255,255,255,0.07);
  --serif:'Playfair Display',Georgia,serif;
  --sans:'DM Sans',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-weight:300;line-height:1.7;overflow-x:hidden;}
::selection{background:var(--amber);color:#0d0d0b;}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:1.1rem 3rem;background:rgba(13,13,11,0.92);backdrop-filter:blur(20px);border-bottom:0.5px solid var(--border);}
.nav-logo{font-family:var(--serif);font-weight:700;font-size:1.1rem;color:var(--text);text-decoration:none;}
.nav-logo span{color:var(--amber);}
.nav-back{font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);text-decoration:none;display:flex;align-items:center;gap:0.5rem;transition:color 0.25s;}
.nav-back:hover{color:var(--amber);}
.nav-back svg{transition:transform 0.25s;}
.nav-back:hover svg{transform:translateX(-3px);}

/* HERO */
.proj-hero{padding:9rem 3rem 5rem;border-bottom:0.5px solid var(--border);display:grid;grid-template-columns:1fr 380px;gap:6rem;align-items:end;}
.proj-eyebrow{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;}
.proj-eyebrow-line{width:30px;height:0.5px;background:var(--amber);}
.proj-eyebrow-co{font-size:0.68rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--amber);}
.proj-title{font-family:var(--serif);font-size:clamp(2.4rem,5vw,4.2rem);font-weight:900;line-height:1.05;letter-spacing:-0.02em;margin-bottom:1.5rem;}
.proj-title em{font-style:italic;color:var(--amber);}
.proj-desc{font-size:clamp(0.875rem,1.5vw,1.05rem);color:var(--text-muted);line-height:1.85;}
.proj-meta{display:flex;flex-direction:column;gap:0;}
.proj-meta-item{padding:1.25rem 0;border-bottom:0.5px solid var(--border);}
.proj-meta-item:first-child{border-top:0.5px solid var(--border);}
.proj-meta-label{font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-dim);margin-bottom:0.35rem;}
.proj-meta-value{font-size:0.88rem;color:var(--text);}
.proj-tags{display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:0.3rem;}
.tag{font-size:0.6rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);border:0.5px solid var(--border);padding:0.25rem 0.6rem;}

/* CONTENT */
.proj-content{width:100%;padding:5rem 3rem;}
.proj-section{margin-bottom:3rem;}
.proj-section-label{display:flex;align-items:center;gap:1rem;margin-bottom:2rem;}
.proj-section-label-line{width:24px;height:0.5px;background:var(--amber);}
.proj-section-label-txt{font-size:0.65rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--amber);}
.proj-section h2{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;line-height:1.15;margin-bottom:1.25rem;}
.proj-section p{font-size:0.95rem;color:var(--text-muted);line-height:1.9;margin-bottom:1.25rem;max-width:820px;}
.proj-section p strong{color:var(--text);font-weight:400;}
.proj-section ul{list-style:none;display:flex;flex-direction:column;gap:0.75rem;margin-bottom:1.5rem;}
.proj-section ul li{font-size:0.92rem;color:var(--text-muted);line-height:1.75;padding-left:1.25rem;position:relative;}
.proj-section ul li::before{content:'';position:absolute;left:0;top:0.65em;width:4px;height:4px;background:var(--amber);border-radius:50%;}
.panel ul li::before,.dt-anatomy ul li::before,.sg ul li::before{display:none;position:static;}

/* IMAGE GRID */
/* ── Gallery / masonry ── */
.gallery{
  --gap: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  margin-bottom: 5rem;
  margin-left: -3rem;
  margin-right: -3rem;
  width: calc(100% + 6rem);
  align-items: flex-start;
}
.gallery-item{
  overflow: hidden;
  background: var(--bg3);
  position: relative;
  /* Snappy column reflow animation */
  transition: width 0.22s cubic-bezier(0.4,0,0.2,1),
              flex-basis 0.22s cubic-bezier(0.4,0,0.2,1),
              opacity 0.28s ease;
}
.gallery-item img{
  width: 100%;
  display: block;
  transition: transform 0.4s ease;
}
.gallery-item:hover img{ transform: scale(1.03); }

/* Solo items always full width */
.gallery-item.solo,
.gallery-item[data-cols="1"]{
  flex: 0 0 100% !important;
  width: 100% !important;
}

/* JS-assigned column widths — calc accounts for gaps between cols */
.gallery-item[data-cols="2"]{
  flex: 0 0 calc(50% - var(--gap) / 2);
  width: calc(50% - var(--gap) / 2);
}
.gallery-item[data-cols="3"]{
  flex: 0 0 calc(33.333% - var(--gap) * 2 / 3);
  width: calc(33.333% - var(--gap) * 2 / 3);
}
.gallery-item[data-cols="4"]{
  flex: 0 0 calc(25% - var(--gap) * 3 / 4);
  width: calc(25% - var(--gap) * 3 / 4);
}

/* Default before JS runs: match the ≤1920px breakpoint (2 cols) */
.gallery-item:not(.solo):not([data-cols]){
  flex: 0 0 calc(50% - var(--gap) / 2);
  width: calc(50% - var(--gap) / 2);
}

/* Entrance animation */
@keyframes galleryFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gallery.visible .gallery-item{
  animation: galleryFadeIn 0.35s ease both;
}
.gallery.visible .gallery-item:nth-child(1){ animation-delay: 0.00s; }
.gallery.visible .gallery-item:nth-child(2){ animation-delay: 0.04s; }
.gallery.visible .gallery-item:nth-child(3){ animation-delay: 0.08s; }
.gallery.visible .gallery-item:nth-child(4){ animation-delay: 0.12s; }
.gallery.visible .gallery-item:nth-child(5){ animation-delay: 0.16s; }
.gallery.visible .gallery-item:nth-child(6){ animation-delay: 0.20s; }
.gallery.visible .gallery-item:nth-child(7){ animation-delay: 0.24s; }
.gallery.visible .gallery-item:nth-child(8){ animation-delay: 0.28s; }
.gallery.visible .gallery-item:nth-child(n+9){ animation-delay: 0.30s; }

/* Section galleries keep spacing */
.gallery + .proj-section{ margin-top: 4rem; }

/* Legacy img-grid — keep for cs1/cs2/cs3 panel pages that don't use gallery */
.img-grid{display:grid;gap:16px;margin-bottom:16px;}
.img-grid:last-of-type{margin-bottom:5rem;}
.img-grid.cols-1{grid-template-columns:1fr;}
.img-grid.cols-2{grid-template-columns:1fr 1fr;}
.img-grid.cols-3{grid-template-columns:1fr 1fr 1fr;}
.img-grid img{width:100%;display:block;background:var(--bg3);}
.img-grid .span-2{grid-column:span 2;}
.img-caption{font-size:0.75rem;color:var(--text-dim);letter-spacing:0.05em;padding:0.75rem 0 2rem;border-bottom:0.5px solid var(--border);margin-bottom:2rem;}

/* CALLOUT */
.callout{background:var(--bg2);border:0.5px solid var(--border);border-left:2px solid var(--amber);padding:2rem 2.5rem;margin:2.5rem 0;}
.callout p{font-family:var(--serif);font-size:1.1rem;font-style:italic;color:var(--text);line-height:1.7;margin:0;}

/* PREV/NEXT */
.proj-nav{display:grid;grid-template-columns:1fr 1fr;border-top:0.5px solid var(--border);}
.proj-nav-item{padding:2.5rem 3rem;text-decoration:none;display:flex;flex-direction:column;gap:0.5rem;transition:background 0.25s;}
.proj-nav-item:hover{background:var(--bg2);}
.proj-nav-item:first-child{border-right:0.5px solid var(--border);}
.proj-nav-dir{font-size:0.65rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-dim);display:flex;align-items:center;gap:0.5rem;}
.proj-nav-title{font-family:var(--serif);font-size:1.1rem;font-weight:700;color:var(--text);}
.proj-nav-co{font-size:0.78rem;color:var(--text-muted);}

/* CURSOR */
.cursor-dot{position:fixed;width:6px;height:6px;background:var(--amber);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);mix-blend-mode:screen;transition:width 0.3s,height 0.3s;}
.cursor-ring{position:fixed;width:36px;height:36px;border:0.5px solid rgba(232,168,48,0.4);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width 0.3s,height 0.3s;}

/* REVEAL */
.reveal{opacity:0;transform:translateY(20px);transition:opacity 0.65s ease,transform 0.65s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}

@media(max-width:900px){
  nav{padding:1rem 1.5rem;}
  .proj-hero{grid-template-columns:1fr;gap:3rem;padding:8rem 1.5rem 3rem;}
  .proj-content{padding:3rem 1.5rem;}
  .img-grid.cols-2,.img-grid.cols-3{grid-template-columns:1fr;}
  .img-grid .span-2{grid-column:span 1;}
  .img-grid{gap:2px;margin-bottom:12px;}
  .img-grid:last-of-type{margin-bottom:3rem;}
  .img-grid.cols-2 img,.img-grid.cols-3 img{max-height:none;}
  .gallery{
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    width: calc(100% + 3rem);
  }
  /* ≤900px: JS already sets data-cols=1 for ≤720px;
     this CSS reinforces single-column on narrow screens */
  .gallery-item:not(.solo)[data-cols="1"],
  .gallery-item:not(.solo):not([data-cols]){
    flex: 0 0 100% !important;
    width: 100% !important;
  }
  .gallery-item:not(.solo)[data-cols="2"],
  .gallery-item:not(.solo)[data-cols="3"],
  .gallery-item:not(.solo)[data-cols="4"]{
    flex: 0 0 100% !important;
    width: 100% !important;
  }
  .proj-nav{grid-template-columns:1fr;}
  .proj-nav-item:first-child{border-right:none;border-bottom:0.5px solid var(--border);}
  .proj-nav-item{padding:2rem 1.5rem;}
}