:root {
  --gallery-bg: #15110f;
  --gallery-bg-2: #201812;
  --gallery-ivory: #efe7d8;
  --gallery-muted: #a99b89;
  --gallery-clay: #a85c3e;
  --gallery-copper: #b07a54;
}

.gallery-page { background: var(--gallery-bg); color: var(--gallery-ivory); }
.gallery-page .nav { color: var(--gallery-ivory); }
.gallery-page .nav.scrolled { background: rgba(21,17,15,.78); }
.gallery-page .nav-links a[aria-current="page"] { opacity: 1; }

.gallery-section {
  min-height: 100svh;
  padding: clamp(8rem, 13vh, 11rem) 0 clamp(7rem, 12vh, 10rem);
  background:
    radial-gradient(70% 40% at 72% 14%, rgba(176,122,84,.10), transparent 70%),
    radial-gradient(55% 45% at 12% 84%, rgba(168,92,62,.08), transparent 70%),
    var(--gallery-bg);
  overflow: clip;
}

.gallery-atmosphere { position:absolute; inset:0; pointer-events:none; opacity:.7; background:radial-gradient(28rem 24rem at 78% 48%, rgba(201,180,154,.045), transparent 70%); }
.gallery-wrap { width:min(1380px, 92vw); margin:auto; display:grid; grid-template-columns:minmax(220px, 24%) minmax(0, 1fr) 18px; gap:clamp(2rem, 4vw, 4.5rem); position:relative; }
.gallery-editorial { position:relative; }
.gallery-editorial-inner { position:sticky; top:50%; transform:translateY(-50%); padding:1rem 0; }
.gallery-editorial .eyebrow { color:var(--gallery-muted); margin-bottom:1.5rem; }
.gallery-editorial h1 { max-width:23rem; font-size:clamp(2rem, 3.2vw, 3.45rem); color:var(--gallery-ivory); }
.gallery-support { margin-top:1.6rem; max-width:18rem; color:#968a7b; font-size:.86rem; line-height:1.8; }
.gallery-main { min-width:0; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.25vw,18px); }
.gallery-item { display:block; width:100%; aspect-ratio:1/1; padding:0; border:0; background:#241c16; overflow:hidden; cursor:zoom-in; position:relative; opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.gallery-item.is-visible { opacity:1; transform:none; }
.gallery-item img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.22,.61,.36,1), filter .8s cubic-bezier(.22,.61,.36,1); }
.gallery-item:hover img, .gallery-item:focus-visible img { transform:scale(1.02); filter:brightness(1.045) contrast(1.015); }
.gallery-item:focus-visible { outline:1px solid var(--gallery-copper); outline-offset:4px; }

.gallery-progress { position:sticky; top:50%; height:min(38vh, 360px); transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:2px 0; }
.gallery-progress-track { width:1px; flex:1; margin:10px 0; background:rgba(201,180,154,.2); position:relative; }
.gallery-progress-fill { position:absolute; inset:0 0 auto; width:1px; height:0%; background:var(--gallery-copper); transition:height .12s linear; }
.gallery-progress-label { font:500 .52rem/1 var(--font-body); letter-spacing:.16em; color:#817466; writing-mode:vertical-rl; transform:rotate(180deg); }
.gallery-progress-end { color:#6f6357; }
.gallery-closing { padding:5rem 1.5rem 7rem; text-align:center; background:var(--gallery-bg-2); color:#b8aa98; }
.gallery-closing p { font:300 clamp(1.5rem,3vw,2.5rem)/1.2 var(--font-display); }

.gallery-viewer { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem); color:var(--gallery-ivory); }
.gallery-viewer.is-open { display:flex; }
.viewer-backdrop { position:absolute; inset:0; background:rgba(11,8,7,.96); }
.viewer-shell { position:relative; z-index:1; width:min(92vw,1400px); height:min(92svh,1000px); display:grid; grid-template-columns:4rem minmax(0,1fr) 4rem; align-items:center; gap:1rem; }
.viewer-figure { margin:0; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; }
.viewer-figure img { display:block; max-width:100%; max-height:calc(100% - 2.5rem); width:auto; height:auto; object-fit:contain; box-shadow:0 20px 80px rgba(0,0,0,.28); }
.viewer-figure figcaption { margin-top:1rem; font:500 .65rem/1 var(--font-body); letter-spacing:.22em; color:#a18f7b; }
.viewer-control { appearance:none; border:0; background:none; color:var(--gallery-ivory); cursor:pointer; font:300 1.7rem/1 var(--font-body); width:3.2rem; height:3.2rem; display:grid; place-items:center; transition:color .3s ease, opacity .3s ease; }
.viewer-control:hover, .viewer-control:focus-visible { color:var(--gallery-copper); }
.viewer-close { position:absolute; top:0; right:0; font-size:2.2rem; z-index:2; }
.viewer-prev { justify-self:start; }
.viewer-next { justify-self:end; }
body.viewer-lock { overflow:hidden; }

@media (max-width: 820px) {
  .gallery-section { padding-top:5.5rem; }
  .gallery-wrap { width:min(94vw, 680px); display:block; }
  .gallery-editorial { min-height:0; margin-bottom:2rem; }
  .gallery-editorial-inner { position:sticky; top:5.8rem; transform:none; z-index:5; padding:.25rem 0 1rem; background:linear-gradient(var(--gallery-bg) 78%, transparent); }
  .gallery-editorial h1 { max-width:31rem; font-size:clamp(1.8rem, 7vw, 2.6rem); }
  .gallery-support { margin-top:1rem; font-size:.78rem; }
  .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .gallery-progress { position:fixed; right:7px; top:50%; z-index:10; height:27vh; }
  .gallery-progress-label { font-size:.44rem; }
  .viewer-shell { width:100%; height:100%; grid-template-columns:3rem minmax(0,1fr) 3rem; gap:.25rem; }
  .viewer-figure img { max-width:100%; max-height:calc(100% - 3rem); }
  .viewer-control { width:2.7rem; height:2.7rem; font-size:1.45rem; }
  .viewer-close { top:.25rem; right:.25rem; }
  .gallery-editorial .eyebrow {
    padding-top: 3rem;
}
}

@media (prefers-reduced-motion: reduce) {
  .gallery-item, .gallery-item img, .viewer-control { transition:none; }
  .gallery-item { opacity:1; transform:none; }
  html { scroll-behavior:auto; }
}