/* ==========================================================================
   RAJWADI KANGAN — style.css
   Base tokens, typography, layout and component styles.
   Palette, spacing and radii are all driven by CSS custom properties so the
   whole theme can be retuned from one place.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root{
  /* brand palette (exact hexes from brief) */
  --bg:#240A19;
  --maroon-dark:#2E0E20;
  --maroon-royal:#461D34;
  --purple-royal:#733960;
  --purple-soft:#B16AA2;
  --emerald:#0D4B3C;
  --gold:#D4AF37;
  --gold-light:#F4E3A2;
  --pearl:#F8F7F3;
  --glass:rgba(255,255,255,0.08);
  --glass-strong:rgba(255,255,255,0.12);
  --glass-border:rgba(244,227,162,0.18);
  --glass-border-strong:rgba(244,227,162,0.32);

  /* derived */
  --ink:var(--pearl);
  --ink-muted:rgba(248,247,243,0.68);
  --ink-faint:rgba(248,247,243,0.42);
  --shadow-soft:0 20px 60px rgba(0,0,0,0.45);
  --shadow-gold:0 0 40px rgba(212,175,55,0.28);
  --shadow-lift:0 30px 80px rgba(0,0,0,0.55);

  /* type */
  --font-display:'Cormorant Garamond', 'Georgia', serif;
  --font-accent:'Cinzel', 'Georgia', serif;
  --font-body:'Jost', 'Segoe UI', sans-serif;

  /* layout */
  --container-w:1240px;
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:10px;
  --nav-h:84px;

  /* motion */
  --ease-luxury:cubic-bezier(.22,.61,.14,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
body,h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button, input, textarea{ font:inherit; color:inherit; }
button{ background:none; border:none; cursor:pointer; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

/* velvet backdrop texture — layered radial glows, no external image needed */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(ellipse 80% 50% at 15% 0%, rgba(115,57,96,0.35), transparent 60%),
    radial-gradient(ellipse 70% 50% at 100% 20%, rgba(13,75,60,0.25), transparent 60%),
    radial-gradient(ellipse 60% 60% at 50% 100%, rgba(70,29,52,0.4), transparent 65%),
    var(--bg);
}
/* subtle velvet grain */
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  opacity:0.05;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.container{
  width:min(92%, var(--container-w));
  margin-inline:auto;
}

::selection{ background:var(--gold); color:var(--bg); }

/* focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:fixed; top:-60px; left:16px; z-index:9999;
  background:var(--gold); color:var(--bg); padding:10px 18px; border-radius:8px;
  font-family:var(--font-accent); font-size:0.8rem; letter-spacing:0.05em;
  transition:top .25s var(--ease-luxury);
}
.skip-link:focus{ top:16px; }

/* ---------- Typography ---------- */
.eyebrow{
  font-family:var(--font-accent);
  font-size:0.72rem;
  letter-spacing:0.38em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1rem;
}

.section__title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.1rem, 3.4vw, 3.4rem);
  color:var(--ink);
  margin-bottom:0.9rem;
  letter-spacing:0.01em;
}

.section__desc{
  color:var(--ink-muted);
  font-weight:300;
  font-size:clamp(0.95rem, 1vw, 1.05rem);
  max-width:46ch;
}

.section__head{
  max-width:640px;
  margin-bottom:clamp(2.5rem, 5vw, 4rem);
}
.section--alt .section__head,
.section--alt .section__desc{ margin-inline:auto; text-align:center; }
.section--alt .section__head{ max-width:560px; }

/* ---------- Loader ---------- */
.loader{
  position:fixed; inset:0; z-index:10000;
  background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px;
  transition:opacity .9s var(--ease-luxury), visibility .9s var(--ease-luxury);
}
.loader__mark{
  font-family:var(--font-display);
  font-size:2.2rem;
  letter-spacing:0.3em;
  color:var(--gold);
}
.loader__line{
  width:120px; height:1px; background:var(--glass-border-strong); position:relative; overflow:hidden;
}
.loader__line::after{
  content:''; position:absolute; inset:0; width:40%; background:var(--gold);
  animation:loaderSweep 1.1s ease-in-out infinite;
}
.loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }

/* ---------- Custom cursor ---------- */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; z-index:9998; pointer-events:none;
  border-radius:50%;
  transform:translate(-50%,-50%);
  will-change:transform;
}
.cursor-dot{
  width:6px; height:6px; background:var(--gold); box-shadow:0 0 10px var(--gold);
}
.cursor-ring{
  width:34px; height:34px; border:1px solid var(--glass-border-strong);
  transition:width .25s var(--ease-luxury), height .25s var(--ease-luxury), border-color .25s;
  backdrop-filter:blur(1px);
}
.cursor-ring.is-hover{
  width:56px; height:56px; border-color:var(--gold); background:rgba(212,175,55,0.08);
}
@media (pointer:coarse){
  .cursor-dot,.cursor-ring{ display:none; }
}

/* ---------- Scroll progress bar ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; width:100%; height:3px; z-index:9997;
  background:rgba(255,255,255,0.05);
}
.scroll-progress__bar{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--gold), var(--gold-light));
  box-shadow:0 0 12px rgba(212,175,55,0.6);
}

/* ---------- 3D pearl canvas ---------- */
#pearl-canvas{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:0.9;
}

/* everything else sits above the canvas */
.nav, main, .footer, .lightbox{ position:relative; z-index:1; }

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; width:100%; z-index:100;
  padding:22px 0;
  transition:padding .35s var(--ease-luxury), background .35s var(--ease-luxury), box-shadow .35s var(--ease-luxury);
}
.nav.is-scrolled{
  padding:12px 0;
  background:rgba(36,10,25,0.72);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 10px 40px rgba(0,0,0,0.35);
  border-bottom:1px solid var(--glass-border);
}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav__logo{
  font-family:var(--font-display);
  font-size:1.3rem;
  letter-spacing:0.12em;
  font-weight:500;
  color:var(--ink);
  white-space:nowrap;
}
.nav__logo span{ color:var(--gold); }

.nav__links{
  display:flex; align-items:center; gap:clamp(18px, 2.4vw, 34px);
  font-family:var(--font-accent);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
}
.nav__links a{
  position:relative; padding-bottom:4px; color:var(--ink-muted);
  transition:color .25s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold);
  transition:width .3s var(--ease-luxury);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ width:100%; }

.nav__actions{ display:flex; align-items:center; gap:14px; }
.nav__toggle{
  display:none; width:40px; height:40px; align-items:center; justify-content:center;
  border:1px solid var(--glass-border); border-radius:50%;
}
.nav__toggle img{ width:18px; height:18px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-accent);
  font-size:0.74rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  padding:16px 30px;
  border-radius:100px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:transform .35s var(--ease-luxury), box-shadow .35s var(--ease-luxury), background .35s, color .35s, border-color .35s;
  white-space:nowrap;
}
.btn__icon{ width:15px; height:15px; }

.btn--gold{
  background:linear-gradient(135deg, var(--gold-light), var(--gold));
  color:var(--maroon-dark);
  box-shadow:0 10px 30px rgba(212,175,55,0.25);
}
.btn--gold:hover{ transform:translateY(-3px); box-shadow:var(--shadow-gold), 0 18px 40px rgba(212,175,55,0.3); }

.btn--outline{
  border:1px solid var(--glass-border-strong);
  color:var(--ink);
  background:rgba(255,255,255,0.02);
}
.btn--outline:hover{
  border-color:var(--gold);
  box-shadow:var(--shadow-gold);
  transform:translateY(-3px);
}

.btn--ghost{
  color:var(--ink-muted);
  border:1px solid transparent;
}
.btn--ghost:hover{ color:var(--gold); }

.btn--sm{ padding:11px 20px; font-size:0.68rem; }

/* ripple */
.btn .ripple{
  position:absolute; border-radius:50%; transform:scale(0);
  background:rgba(255,255,255,0.45);
  animation:rippleAnim .65s ease-out forwards;
  pointer-events:none;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:calc(var(--nav-h) + 20px);
  overflow:hidden;
}
.hero__blobs{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.blob-wrap{ position:absolute; inset:0; will-change:transform; }
.blob{ position:absolute; border-radius:50%; filter:blur(60px); }

.hero__grid{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  align-items:center;
  gap:40px;
}

.hero__content{ max-width:640px; }
.hero__title{
  font-family:var(--font-display);
  font-weight:400;
  line-height:0.95;
  margin:0.4rem 0 1.1rem;
}
.hero__title-line{
  display:block;
  font-size:clamp(3.2rem, 8.4vw, 7.4rem);
  letter-spacing:0.02em;
  color:var(--ink);
}
.hero__title-line--gold{
  background:linear-gradient(135deg, var(--gold-light), var(--gold) 55%, var(--purple-soft));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__subtitle{
  font-family:var(--font-accent);
  font-size:clamp(0.85rem, 1.1vw, 1rem);
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--gold-light);
  margin-bottom:1.4rem;
}
.hero__lede{
  color:var(--ink-muted); max-width:46ch; margin-bottom:2.2rem;
  font-size:clamp(0.95rem, 1vw, 1.05rem);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:16px; }

.hero__showcase{
  position:relative; display:flex; align-items:center; justify-content:center;
  aspect-ratio:1/1;
}
.hero__ring{
  position:absolute; inset:6%;
  border:1px solid var(--glass-border);
  border-radius:50%;
  animation:spinSlow 40s linear infinite;
}
.hero__ring::before{
  content:''; position:absolute; inset:-1px; border-radius:50%;
  border:1px dashed var(--glass-border);
  animation:spinSlow 60s linear infinite reverse;
}
.hero__kangan{
  position:relative; z-index:1; width:88%;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,0.55));
  animation:floatY 7s ease-in-out infinite;
}

.hero__scroll-cue{
  position:relative; z-index:2;
  margin:60px auto 0; display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--font-accent); font-size:0.65rem; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--ink-faint);
}
.hero__scroll-line{
  width:1px; height:44px; background:linear-gradient(var(--gold), transparent);
  position:relative; overflow:hidden;
}
.hero__scroll-line::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--gold-light); animation:scrollCue 2.2s ease-in-out infinite;
}

/* ---------- Trust strip (marquee) ---------- */
.strip{
  position:relative; z-index:1;
  border-top:1px solid var(--glass-border);
  border-bottom:1px solid var(--glass-border);
  overflow:hidden;
  padding:18px 0;
  background:rgba(255,255,255,0.02);
}
.strip__track{
  display:flex; gap:60px; width:max-content;
  animation:marquee 26s linear infinite;
}
.strip__item{
  font-family:var(--font-accent);
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-muted);
  display:flex; align-items:center; gap:14px;
  white-space:nowrap;
}
.strip__item::before{
  content:'◆'; color:var(--gold); font-size:0.6rem;
}

/* ---------- Sections ---------- */
.section{ padding:clamp(70px, 10vw, 130px) 0; position:relative; z-index:1; }
.section--alt{ background:linear-gradient(180deg, transparent, rgba(46,14,32,0.35), transparent); }

/* ---------- Card grid ---------- */
.card-grid{ display:grid; gap:clamp(24px, 3vw, 40px); perspective:1400px; }
.card-grid--3{ grid-template-columns:repeat(3, 1fr); }

/* ---------- Product card / jharokha signature frame ---------- */
.product-card{
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:28px 26px 26px;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:var(--shadow-soft);
  transition:transform .1s linear, border-color .35s, box-shadow .35s;
  transform-style:preserve-3d;
  will-change:transform;
}
.product-card:hover{
  border-color:var(--glass-border-strong);
  box-shadow:var(--shadow-lift), var(--shadow-gold);
}
.product-card--glow:hover{ box-shadow:var(--shadow-lift), 0 0 60px rgba(212,175,55,0.35); }

/* jharokha arch frame — the site's signature shape, echoing a Rajasthani
   palace window: rounded arch top, gold finial, hairline border */
.jharokha-frame{
  position:relative;
  aspect-ratio:1/0.98;
  border-radius:50% 50% 12px 12px / 62% 62% 12px 12px;
  background:
    radial-gradient(circle at 50% 28%, rgba(212,175,55,0.14), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border:1px solid var(--glass-border);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px;
  isolation:isolate;
}
.jharokha-frame::before{ /* finial dot */
  content:''; position:absolute; top:-15px; left:50%; transform:translateX(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 10px var(--gold); z-index:2;
}
.jharokha-frame::after{ /* finial stem */
  content:''; position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  width:1px; height:11px; background:linear-gradient(var(--gold), transparent); z-index:2;
}
.jharokha-frame img{
  width:76%; height:76%; object-fit:contain;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,0.5));
  transition:transform .6s var(--ease-luxury);
}
.product-card:hover .jharokha-frame img{ transform:scale(1.06) rotate(-2deg); }

.product-card__title{
  font-family:var(--font-display);
  font-size:1.4rem;
  font-weight:500;
  margin-bottom:8px;
  color:var(--ink);
}
.product-card__desc{
  color:var(--ink-muted);
  font-size:0.9rem;
  margin-bottom:20px;
  min-height:2.7em;
}
.product-card__foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-top:18px; border-top:1px solid var(--glass-border);
}
.price{
  font-family:var(--font-display);
  font-size:1.3rem;
  color:var(--gold-light);
}

/* ---------- Masonry gallery ---------- */
.masonry{
  columns:3 260px;
  column-gap:22px;
}
.masonry__item{
  break-inside:avoid;
  margin-bottom:22px;
  position:relative;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--glass-border);
  background:var(--glass);
  cursor:pointer;
  transform-style:preserve-3d;
}
.masonry__item img{
  width:100%; height:auto; display:block;
  aspect-ratio:1/1;
  object-fit:contain;
  padding:18px;
  transition:transform .6s var(--ease-luxury);
  background:radial-gradient(circle at 50% 35%, rgba(212,175,55,0.1), transparent 70%);
}
.masonry__item--tall img{ aspect-ratio:1/1.3; }
.masonry__item figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 16px 12px;
  font-family:var(--font-accent);
  font-size:0.68rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink);
  background:linear-gradient(0deg, rgba(36,10,25,0.9), transparent);
  transform:translateY(100%);
  transition:transform .4s var(--ease-luxury);
}
.masonry__item:hover figcaption{ transform:translateY(0); }
.masonry__item:hover img{ transform:scale(1.08); }

/* ---------- CTA panel (catalogue) ---------- */
.cta-panel{
  padding:clamp(36px, 6vw, 64px);
  border-radius:var(--radius-lg);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:36px;
  position:relative;
  overflow:hidden;
}
.cta-panel::before{
  content:'';
  position:absolute; inset:0; z-index:-1;
  background:radial-gradient(circle at 85% 20%, rgba(212,175,55,0.14), transparent 55%);
}
.cta-panel__text{ max-width:480px; }
.cta-panel__text .section__title{ margin-bottom:0.6rem; }
.cta-panel__actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* glass base (shared) */
.glass{
  background:var(--glass);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:var(--shadow-soft);
}

/* ---------- Reseller form ---------- */
.reseller-form{
  border-radius:var(--radius-lg);
  padding:clamp(28px, 5vw, 52px);
  position:relative;
}
.reseller-form__honeypot{ position:absolute; left:-9999px; opacity:0; }
.reseller-form__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:24px 28px;
}
.field{ display:flex; flex-direction:column; gap:8px; position:relative; }
.field--full{ grid-column:1 / -1; }
.field label{
  font-family:var(--font-accent);
  font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-muted);
}
.field label span[aria-hidden]{ color:var(--gold); }
.field__optional{ text-transform:none; letter-spacing:0; color:var(--ink-faint); font-family:var(--font-body); }
.field input, .field textarea{
  background:rgba(255,255,255,0.04);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-sm);
  padding:14px 16px;
  color:var(--ink);
  transition:border-color .3s, box-shadow .3s, background .3s;
  resize:vertical;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-faint); }
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(212,175,55,0.15);
  background:rgba(255,255,255,0.06);
}
.field.has-error input, .field.has-error textarea{
  border-color:#d8695f;
  box-shadow:0 0 0 3px rgba(216,105,95,0.12);
}
.field__error{
  font-size:0.76rem; color:#e79a92; min-height:1em; display:block;
}
.reseller-form__foot{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top:28px; padding-top:24px; border-top:1px solid var(--glass-border);
}
.reseller-form__status{
  font-size:0.85rem; color:var(--ink-muted); min-height:1.2em;
}
.reseller-form__status.is-success{ color:#7fd6a8; }
.reseller-form__status.is-error{ color:#e79a92; }

/* ---------- Contact ---------- */
.contact-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:22px;
}
.contact-card{
  border-radius:var(--radius-md);
  padding:30px 22px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  transition:transform .1s linear, box-shadow .35s, border-color .35s;
}
.contact-card:hover{ box-shadow:var(--shadow-lift), var(--shadow-gold); border-color:var(--glass-border-strong); }
.contact-card__icon{ width:26px; height:26px; filter:invert(78%) sepia(45%) saturate(500%) hue-rotate(1deg) brightness(1.05); margin-bottom:6px; }
.contact-card__label{
  font-family:var(--font-accent); font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint);
}
.contact-card__value{ font-family:var(--font-display); font-size:1.15rem; color:var(--ink); }

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--glass-border); padding-top:60px; }
.footer__inner{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px; padding-bottom:40px;
}
.footer__brand p{ color:var(--ink-faint); margin-top:10px; max-width:32ch; font-size:0.9rem; }
.footer__links{ display:flex; flex-wrap:wrap; gap:18px 26px; align-self:center; }
.footer__links a{
  font-family:var(--font-accent); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-muted); transition:color .25s;
}
.footer__links a:hover{ color:var(--gold); }
.footer__social{ display:flex; gap:14px; align-self:center; }
.footer__social a{
  width:38px; height:38px; border:1px solid var(--glass-border); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .3s, transform .3s;
}
.footer__social a:hover{ border-color:var(--gold); transform:translateY(-3px); }
.footer__social img{ width:16px; height:16px; filter:invert(78%) sepia(45%) saturate(500%) hue-rotate(1deg) brightness(1.05); }
.footer__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px;
  padding:22px 0 30px;
  border-top:1px solid var(--glass-border);
  font-size:0.78rem; color:var(--ink-faint);
}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:9990;
  background:rgba(20,6,14,0.88);
  backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center;
  padding:40px;
}
.lightbox[hidden]{ display:none; }
.lightbox__figure{
  max-width:min(90vw, 620px);
  text-align:center;
}
.lightbox__figure img{
  max-height:70vh; margin-inline:auto;
  border-radius:var(--radius-md);
  background:radial-gradient(circle at 50% 35%, rgba(212,175,55,0.14), transparent 70%);
  padding:20px;
}
.lightbox__figure figcaption{
  margin-top:16px; font-family:var(--font-accent); letter-spacing:0.14em; text-transform:uppercase; font-size:0.78rem; color:var(--gold-light);
}
.lightbox__close{
  position:absolute; top:28px; right:28px;
  width:44px; height:44px; border:1px solid var(--glass-border-strong); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.lightbox__close img{ width:16px; height:16px; }
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border:1px solid var(--glass-border-strong); border-radius:50%;
  font-size:1.8rem; color:var(--ink); display:flex; align-items:center; justify-content:center;
  transition:border-color .3s, background .3s;
}
.lightbox__nav:hover{ border-color:var(--gold); background:rgba(212,175,55,0.08); }
.lightbox__nav--prev{ left:24px; }
.lightbox__nav--next{ right:24px; }