/* ---------- 3D RING ---------- */
.ring-sec{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden}
.ring-scene{position:absolute;inset:0;perspective:1500px;display:grid;place-items:center;cursor:grab;touch-action:pan-y}
.ring-scene:active{cursor:grabbing}
.ring{--w:clamp(150px,17vw,280px);position:relative;width:var(--w);aspect-ratio:3/4;transform-style:preserve-3d;transform:rotateX(-9deg) rotateY(0deg)}
.ring figure{position:absolute;inset:0;margin:0;transform:rotateY(calc(var(--i) * 36deg)) translateZ(calc(var(--w) * 1.75));overflow:hidden;border-radius:4px}
.ring img{width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;-webkit-user-drag:none}
.ring figure::after{content:"";position:absolute;inset:0;background:var(--ink);opacity:var(--dim,0);transition:opacity .2s}
.ring-copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:44px;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at 50% 120%,rgba(23,19,15,.85),transparent 60%)}
.ring-copy .h-xl{mix-blend-mode:difference;color:var(--cream)}
.ring-copy .h-xl em{color:var(--gold);mix-blend-mode:normal}
.ring-sub{margin:20px 0 0;font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.8vw,24px);color:rgba(243,236,225,.8)}
.ring-copy .eyebrow{margin:0 0 20px}

/* ---------- FILTERS + GRID ---------- */
.gal{padding-top:90px;padding-bottom:140px}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:46px}
.filters button{padding:12px 22px;border-radius:999px;border:1px solid rgba(23,19,15,.2);font-size:12px;letter-spacing:.18em;text-transform:uppercase;transition:background .4s,color .4s,border-color .4s}
.filters button sup{font-family:var(--serif);font-style:italic;letter-spacing:0;font-size:12px;margin-left:2px;color:var(--terra)}
.filters button:hover{border-color:var(--ink)}
.filters button.is-active{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.filters button.is-active sup{color:var(--gold)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(160px,19vw,320px);grid-auto-flow:dense;gap:clamp(10px,1.4vw,20px)}
.g{position:relative;margin:0;overflow:hidden;background:var(--sand);cursor:zoom-in}
.g.w{grid-column:span 2}
.g.t{grid-row:span 2}
.g img,.g video{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out),filter .8s}
.g:hover img,.g:hover video{transform:scale(1.07)}
.g figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;color:var(--cream);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  background:linear-gradient(transparent,rgba(23,19,15,.7));transform:translateY(100%);transition:transform .6s var(--ease)}
.g:hover figcaption{transform:none}
.g:has(video)::before{content:"";position:absolute;top:14px;right:14px;z-index:2;width:30px;height:30px;border-radius:50%;
  background:rgba(243,236,225,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 2l5 3-5 3z' fill='%2317130F'/%3E%3C/svg%3E") center/12px no-repeat}
.g.is-hidden{display:none}
@media (hover:none){.g figcaption{transform:none}}
@media (max-width:800px){.grid{grid-template-columns:1fr 1fr;grid-auto-rows:42vw}}

/* ---------- LIGHTBOX ---------- */
.lb{position:fixed;inset:0;z-index:150;background:rgba(23,19,15,.96);visibility:hidden;opacity:0;transition:opacity .5s,visibility 0s .5s}
.lb.is-open{visibility:visible;opacity:1;transition:opacity .5s}
.lb-media{position:absolute;inset:7vh 7vw 14vh;display:grid;place-items:center}
.lb-media>*{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lb-ui{position:absolute;left:0;right:0;bottom:0;height:14vh;display:flex;align-items:center;gap:20px;padding:0 var(--gut);color:var(--cream)}
.lb-cap{margin:0;flex:1;font-family:var(--serif);font-style:italic;font-size:clamp(18px,2vw,28px)}
.lb-n{font-size:12px;letter-spacing:.2em;opacity:.6}
.lb-ui button{width:52px;height:52px;border-radius:50%;border:1px solid rgba(243,236,225,.35);display:grid;place-items:center;transition:background .3s}
.lb-ui button:hover{background:var(--terra);border-color:var(--terra)}
.lb-ui svg{width:16px;height:16px}
.lb-ui .lb-close{width:auto;padding:0 22px;border-radius:999px;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
@media (max-width:600px){.lb-cap{font-size:16px}.lb-n{display:none}}