/* =========================================================
   PEWARISTOTO × ZINO JEWELRY — Immersive campaign styles
   ========================================================= */

:root{
  --black:        #050403;
  --off-black:    #0d0a06;
  --ink:          #1a140c;
  --paper:        #ede4cf;
  --paper-dim:    #c9beA6;
  --gold:         #d9b46a;
  --gold-hot:     #f4d97e;
  --gold-deep:    #8a5f1a;
  --gold-ink:     #3a2609;
  --diamond:      #dfeeff;

  --serif: 'Fraunces', 'Cormorant Garamond', serif;
  --script: 'Cormorant Garamond', serif;
  --sans:  'Inter', system-ui, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, monospace;

  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-inout: cubic-bezier(.7,0,.3,1);

  --nav-h: 74px;
  --pad-x: clamp(20px, 5vw, 96px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{
  background: var(--black);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;                            /* was: hidden — 'hidden' kills position:sticky in Chrome */
}
html{ scroll-behavior: auto; }
body{ min-height: 100vh; line-height: 1.5; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection{ background: var(--gold); color: var(--black); }

/* film grain overlay across whole page */
body::before{
  content:"";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 90;
  background-image:
    radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  opacity: .35;
}

/* =========================================================
   LOADER
   ========================================================= */
.loader{
  position: fixed; inset: 0;
  background: var(--black);
  z-index: 1000;
  display: grid;
  place-items: center;
  gap: 26px;
  grid-template-rows: 1fr auto auto 1fr;
  padding: 40px;
}
.loader__mark{
  grid-row: 2;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(46px, 8vw, 96px);
  letter-spacing: .02em;
  display: flex; gap: 14px; align-items: baseline;
  color: var(--paper);
}
.loader__mark i{
  font-style: normal;
  color: var(--gold);
  font-size: .55em;
  transform: translateY(-.2em);
}
.loader__bar{
  grid-row: 3;
  width: min(360px, 60vw);
  height: 1px;
  background: rgba(255,255,255,.15);
  overflow: hidden;
}
.loader__bar span{
  display:block; height:100%; width:0%;
  background: linear-gradient(90deg, var(--gold-hot), var(--gold), var(--gold-deep));
}
.loader__meta{
  position: absolute;
  bottom: 32px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .28em;
  color: rgba(237,228,207,.5);
}
body.is-ready .loader{ pointer-events: none; }

/* =========================================================
   CUSTOM CURSOR (desktop only)
   ========================================================= */
.cursor{
  position: fixed;
  top: 0; left: 0;
  z-index: 950;
  pointer-events: none;
  mix-blend-mode: difference;
  will-change: transform;
}
.cursor__dot{
  position: absolute; top:-3px; left:-3px;
  width: 6px; height:6px; border-radius:50%;
  background: #fff;
}
.cursor__ring{
  position: absolute; top: -20px; left: -20px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.6);
  transition: width .35s var(--ease-out), height .35s var(--ease-out),
              top .35s var(--ease-out), left .35s var(--ease-out),
              border-color .3s;
}
.cursor__label{
  position: absolute;
  top: -8px; left: 26px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  color: #fff;
  opacity: 0;
  white-space: nowrap;
  transition: opacity .25s var(--ease-out);
  text-transform: uppercase;
}
.cursor.is-hover .cursor__ring{
  width: 62px; height: 62px; top: -31px; left: -31px;
  border-color: var(--gold);
}
.cursor.is-hover .cursor__label{ opacity: 1; }
.cursor.is-down .cursor__ring{ transform: scale(.6); }
@media (hover: none){ .cursor{ display: none; } }

/* =========================================================
   PARTICLES
   ========================================================= */
.particles{
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 5;
  opacity: .9;
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h);
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  z-index: 100;
  color: var(--paper);
  transition: background .5s var(--ease-out), backdrop-filter .5s var(--ease-out), border-color .5s;
  border-bottom: 1px solid transparent;
}
.nav.is-solid{
  background: rgba(5,4,3,.75);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(217,180,106,.15);
}
.nav__logo{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .06em;
  display: flex; align-items: baseline; gap: 8px;
}
.nav__logo i{
  color: var(--gold);
  font-style: normal;
  font-size: 10px;
  transform: translateY(-1px);
}
.nav__menu{
  justify-self: center;
  display: flex; gap: clamp(18px, 3vw, 42px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.nav__menu a{
  position: relative;
  padding: 10px 2px;
  color: rgba(237,228,207,.72);
  transition: color .3s;
}
.nav__menu a::after{
  content:"";
  position: absolute; left: 0; bottom: 4px;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.nav__menu a:hover{ color: var(--paper); }
.nav__menu a:hover::after{ transform: scaleX(1); }
.nav__cta{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 12px 20px;
  border: 1px solid rgba(217,180,106,.35);
  color: var(--gold);
  transition: background .3s, color .3s, border-color .3s;
}
.nav__cta:hover{
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
}
@media (max-width: 860px){
  .nav__menu{ display:none; }
  .nav{ grid-template-columns: 1fr auto; }
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  padding: 18px 28px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .35s, color .35s, border-color .35s, transform .35s;
  white-space: nowrap;
}
.btn--primary{
  background: var(--gold);
  color: var(--black);
}
.btn--primary:hover{
  background: var(--gold-hot);
  transform: translateY(-2px);
}
.btn--ghost{
  border-color: rgba(237,228,207,.35);
  color: var(--paper);
}
.btn--ghost:hover{
  border-color: var(--gold);
  color: var(--gold);
}

/* =========================================================
   01 · HERO
   ========================================================= */
.hero{
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--nav-h) + 40px) var(--pad-x) 80px;
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg{ position: absolute; inset: 0; z-index: -1; }
.hero__grain{
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(217,180,106,.12), transparent 60%),
    radial-gradient(ellipse 40% 30% at 20% 20%, rgba(244,217,126,.08), transparent 70%),
    linear-gradient(180deg, #050403 0%, #0d0a06 60%, #050403 100%);
}
.hero__vignette{
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 55%, transparent 40%, rgba(0,0,0,.85) 100%);
}
.hero__glow{
  position: absolute;
  left: 50%; top: 55%;
  transform: translate(-50%,-50%);
  width: 60vmin; height: 60vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,217,126,.28), rgba(217,180,106,.05) 45%, transparent 70%);
  filter: blur(20px);
}

.hero__ring{
  position: absolute;
  left: 50%; top: 52%;
  /* centering handled by GSAP xPercent/yPercent so scroll tweens don't fight CSS translate */
  width: min(78vmin, 900px);
  height: min(78vmin, 900px);
  z-index: 1;
  will-change: transform;
  filter: drop-shadow(0 40px 80px rgba(0,0,0,.6));
}

.hero__type{
  position: relative;
  z-index: 2;
  align-self: end;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto auto;
  gap: 24px 40px;
  padding-top: 30vh;
}
.hero__eyebrow{
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(237,228,207,.6);
  display: flex; align-items: center; gap: 12px;
}
.hero__eyebrow .dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity: .3; transform: scale(.9); }
  50%{ opacity: 1; transform: scale(1.15); }
}

.hero__title{
  grid-column: 1 / -1;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(48px, 11vw, 178px);
  line-height: .92;
  letter-spacing: -.02em;
  color: var(--paper);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .3em;
}
.hero__title .line{
  display: inline-block;
  overflow: hidden;
}
.hero__title .line-x{
  color: var(--gold);
  font-family: var(--serif);
  font-style: italic;
  font-size: .7em;
  font-weight: 300;
  transform: translateY(-.08em);
}
.hero__title .line-2{
  font-style: italic;
  font-weight: 400;
}

.hero__lede{
  grid-column: 1;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(20px, 2.2vw, 34px);
  line-height: 1.15;
  max-width: 520px;
  color: var(--paper);
}
.hero__lede em{
  font-style: italic;
  color: rgba(237,228,207,.65);
  display: block;
}
.hero__lede strong{
  font-weight: 400;
  color: var(--gold);
  font-style: italic;
}

.hero__sub{
  grid-column: 2;
  align-self: end;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  max-width: 320px;
  color: rgba(237,228,207,.65);
  text-align: right;
}

.hero__ctas{
  grid-column: 1 / -1;
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: 8px;
}

.hero__scroll{
  position: absolute;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .3em;
  color: rgba(237,228,207,.5);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  z-index: 3;
}
.hero__scroll i{
  width: 1px; height: 40px;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{ transform: scaleY(0); transform-origin: top; }
  50%{ transform: scaleY(1); transform-origin: top; }
  51%{ transform: scaleY(1); transform-origin: bottom; }
  100%{ transform: scaleY(0); transform-origin: bottom; }
}
.hero__side{
  position: absolute;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .3em;
  color: rgba(237,228,207,.4);
  top: 50%;
  writing-mode: vertical-rl;
  transform: rotate(180deg) translateY(50%);
  z-index: 3;
}
.hero__side--l{ left: 24px; }
.hero__side--r{ right: 24px; transform: translateY(-50%); writing-mode: vertical-rl; }

@media (max-width: 860px){
  .hero__type{ grid-template-columns: 1fr; padding-top: 22vh; }
  .hero__sub{ grid-column: 1; text-align: left; }
  .hero__side{ display: none; }
  .hero__ring{ width: 92vmin; height: 92vmin; top: 48%; }
}

/* =========================================================
   02 · TRANSITION (through the gem)
   ========================================================= */
.transition{
  position: relative;
  min-height: 130vh;
  background: radial-gradient(ellipse at center, #0a0806 0%, #050403 60%);
  display: grid; place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.transition__gem{
  position: sticky;
  top: 50%;
  /* centering via GSAP yPercent so scrub scale/rotate don't wipe the translate */
  width: min(55vmin, 720px);
  aspect-ratio: 1 / 1;
  will-change: transform, opacity;
  filter: drop-shadow(0 30px 80px rgba(180,220,255,.15));
}
.transition__label{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .3em;
  color: rgba(237,228,207,.5);
  display: flex; align-items: center; gap: 18px;
  z-index: 2;
}
.transition__label em{ color: var(--gold); font-style: normal; }
.transition__wash{
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,.9) 0%, transparent 30%);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

/* =========================================================
   03 · TWO WORLDS
   ========================================================= */
.two-worlds{
  position: relative;
  padding: 160px var(--pad-x) 200px;
  background: linear-gradient(180deg, #050403 0%, #0f0b06 100%);
  isolation: isolate;
  overflow: hidden;
}
.two-worlds__chapter{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .3em;
  color: rgba(237,228,207,.45);
  margin-bottom: 40px;
}
.two-worlds__title{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(56px, 9vw, 148px);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--paper);
  margin-bottom: 120px;
  max-width: 1200px;
}
.two-worlds__title .tw-line{ display: block; }
.two-worlds__title em{
  font-style: italic;
  color: var(--gold);
}

.two-worlds__grid{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(20px, 6vw, 100px);
  align-items: start;
  position: relative;
}
.world{
  padding: 40px 0;
  will-change: transform;
}
.world--left{ text-align: right; }
.world--right{ text-align: left; }
.world__eyebrow{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .28em;
  color: var(--gold);
  margin-bottom: 40px;
}
.world__body{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(28px, 4vw, 58px);
  line-height: 1.1;
  color: var(--paper);
}
.world__body .world__word{
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
}
.world__quote{
  margin-top: 48px;
  font-family: var(--script);
  font-style: italic;
  font-size: 18px;
  color: rgba(237,228,207,.55);
  max-width: 380px;
  line-height: 1.6;
}
.world--left .world__quote{ margin-left: auto; }

.two-worlds__merge{
  position: sticky;
  top: 40vh;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,217,126,.28) 0%, rgba(217,180,106,.04) 50%, transparent 75%);
  display: grid; place-items: center;
  align-self: start;
  margin-top: 60px;
}
.tw-mark{
  font-family: var(--serif);
  font-size: 32px;
  color: var(--gold);
  letter-spacing: .04em;
  display: flex; gap: 10px; align-items: baseline;
  opacity: 0;
  transform: scale(.6);
}
.tw-mark i{
  font-style: normal;
  font-size: 18px;
  color: var(--paper);
  transform: translateY(-2px);
}

.two-worlds__foot{
  margin-top: 160px;
  display: flex; justify-content: center; align-items: center;
  gap: 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .3em;
  color: rgba(237,228,207,.45);
  flex-wrap: wrap;
  text-align: center;
}

@media (max-width: 860px){
  .two-worlds__grid{ grid-template-columns: 1fr; }
  .world--left, .world--right{ text-align: left; }
  .world--left .world__quote{ margin-left: 0; }
  .two-worlds__merge{ position: relative; top: auto; margin: 0 auto; }
}

/* =========================================================
   04 · TYPOGRAPHIC MOMENT
   ========================================================= */
.typo{
  position: relative;
  min-height: 130vh;
  padding: 120px var(--pad-x);
  background: #050403;
  overflow: hidden;
  display: grid;
  align-content: center;
  isolation: isolate;
}
.typo__ring{
  position: absolute;
  top: 50%; left: 50%;
  /* centering via GSAP xPercent/yPercent */
  width: min(60vmin, 700px);
  aspect-ratio: 1 / 1;
  z-index: 1;
  opacity: .85;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.6));
}
.typo__word{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(70px, 18vw, 320px);
  line-height: .85;
  letter-spacing: -.03em;
  color: var(--paper);
  text-align: center;
  position: relative;
  z-index: 2;
  display: flex; justify-content: center;
  flex-wrap: wrap;
  gap: 0 .02em;
}
.typo__word--2{
  font-style: italic;
  color: var(--gold);
  margin-top: .2em;
}
.typo__word--2 em{
  font-style: italic;
  font-weight: 300;
  color: rgba(237,228,207,.5);
  font-size: .4em;
  margin-right: .3em;
  align-self: center;
}
.typo__word span{
  display: inline-block;
  will-change: transform, opacity;
}
.typo__foot{
  position: absolute;
  bottom: 40px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .3em;
  color: rgba(237,228,207,.35);
  z-index: 2;
}

/* =========================================================
   05 · CRAFT (pinned 5-scene)
   ========================================================= */
.craft{
  position: relative;
  height: 350vh;
  background: #050403;
}
.craft__sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding: var(--nav-h) var(--pad-x) 60px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 30px;
}
.craft__head{
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 30px; flex-wrap: wrap;
}
.craft__chapter{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .3em;
  color: rgba(237,228,207,.45);
}
.craft__head h2{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(32px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--paper);
  text-align: right;
  max-width: 800px;
}
.craft__head h2 em{
  font-style: italic;
  color: var(--gold);
  display: block;
}

.craft__stage{
  position: relative;
  width: 100%;
  height: 100%;
}
.craft__scene{
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px 40px;
  align-items: center;
  opacity: 0;
  will-change: opacity, transform;
}
.craft__scene.is-active{ opacity: 1; }
.craft__num{
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .3em;
  color: var(--gold);
  grid-row: 1; grid-column: 1;
}
.craft__name{
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(28px, 4vw, 56px);
  color: var(--paper);
  grid-row: 1; grid-column: 2;
  align-self: end;
}
.craft__art{
  grid-row: 2; grid-column: 1 / -1;
  width: 100%;
  height: 100%;
  min-height: 400px;
  border: 1px solid rgba(217,180,106,.12);
  display: grid; place-items: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.craft__art svg{
  width: min(50vh, 60%);
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.6));
}
.craft__art--raw{
  background:
    radial-gradient(ellipse at 30% 30%, rgba(244,217,126,.35), transparent 55%),
    radial-gradient(ellipse at 70% 70%, rgba(138,95,26,.4), transparent 55%),
    linear-gradient(135deg, #2a1a04, #0a0703);
}
.craft__art--raw::after{
  content:""; position: absolute; inset: 20%;
  border-radius: 40% 60% 45% 55%;
  background: radial-gradient(ellipse at 35% 30%, #f4d97e, #a67222 40%, #4a3210 80%);
  box-shadow: 0 40px 80px rgba(244,217,126,.25);
}
.craft__art--form{
  background: linear-gradient(180deg, #14100b, #050403);
}
.craft__art--fire{
  background:
    radial-gradient(circle at 50% 60%, rgba(255,120,40,.6), rgba(255,60,10,.2) 30%, transparent 55%),
    radial-gradient(circle at 50% 70%, rgba(255,210,80,.5), transparent 40%),
    linear-gradient(180deg, #0a0403, #1a0a04);
}
.craft__art--fire::after{
  content:""; position: absolute; inset: 30%;
  border-radius: 50%;
  background: radial-gradient(circle, #ffb84a, #ff6a10 40%, #6a2004 100%);
  filter: blur(2px);
  animation: fireFlicker 2s ease-in-out infinite alternate;
}
@keyframes fireFlicker{
  0%{ transform: scale(1); opacity: .95; }
  100%{ transform: scale(1.05); opacity: 1; }
}
.craft__art--polish{
  background:
    radial-gradient(ellipse at 40% 40%, rgba(255,255,255,.35), transparent 40%),
    radial-gradient(ellipse at 60% 60%, rgba(244,217,126,.4), transparent 50%),
    linear-gradient(135deg, #3a2609, #0a0703);
}
.craft__art--polish::after{
  content:""; position: absolute; inset: 25%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 30% 30%, #ffffff, #f4d97e 15%, #a67222 60%, #3a2609);
}
.craft__art--finish{
  background:
    radial-gradient(ellipse at center, rgba(244,217,126,.15), transparent 65%),
    #050403;
}
.craft__cap{
  grid-row: 3; grid-column: 1 / -1;
  font-family: var(--script);
  font-style: italic;
  font-size: 16px;
  color: rgba(237,228,207,.6);
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.craft__progress{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid rgba(217,180,106,.15);
  position: relative;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .28em;
  color: rgba(237,228,207,.35);
}
.craft__step{ transition: color .35s; }
.craft__step.is-active{ color: var(--gold); }
.craft__bar{
  grid-column: 1 / -1;
  height: 1px;
  background: rgba(217,180,106,.15);
  overflow: hidden;
}
.craft__bar i{
  display: block; height: 100%; width: 0%;
  background: var(--gold);
}

/* =========================================================
   06 · SHOWCASE (pinned choreography of 4 pieces)
   ========================================================= */
.showcase{
  position: relative;
  height: 280vh;
  background: linear-gradient(180deg, #050403 0%, #0a0806 100%);
}
.showcase__sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  padding: var(--nav-h) var(--pad-x) 40px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  isolation: isolate;
}
.showcase__chapter{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .3em;
  color: rgba(237,228,207,.45);
}
.showcase__stage{
  position: relative;
}
.showcase__piece{
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s var(--ease-out), visibility .8s;
}
.showcase__piece.is-active{ opacity: 1; visibility: visible; }
.showcase__no{
  grid-column: 1; grid-row: 1;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(60px, 10vw, 180px);
  line-height: 1;
  color: rgba(237,228,207,.06);
  letter-spacing: -.02em;
}
.showcase__name{
  grid-column: 1; grid-row: 2;
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(36px, 6vw, 96px);
  line-height: .95;
  color: var(--paper);
  align-self: end;
}
.showcase__art{
  grid-column: 2; grid-row: 1 / -1;
  display: grid; place-items: center;
  height: 100%;
  filter: drop-shadow(0 40px 80px rgba(0,0,0,.7));
}
.showcase__art svg{
  width: 100%;
  max-width: 640px;
  height: auto;
  max-height: 70vh;
  will-change: transform;
  animation: floatSlow 8s ease-in-out infinite;
}
.showcase__art--pair{
  display: flex; gap: 60px; justify-content: center;
}
.showcase__art--pair svg{ height: 60vh; width: auto; }
.ear-l{ animation: floatSlow 8s ease-in-out infinite; }
.ear-r{ animation: floatSlow 8s ease-in-out 1s infinite; }
@keyframes floatSlow{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-20px) rotate(2deg); }
}
.showcase__meta{
  grid-column: 3; grid-row: 2;
  list-style: none;
  align-self: end;
  text-align: right;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .24em;
  color: rgba(237,228,207,.55);
  display: grid;
  gap: 12px;
}
.showcase__meta li{
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(217,180,106,.12);
}
.showcase__nav{
  display: flex; gap: 14px; justify-content: center;
  padding: 30px 0 0;
}
.showcase__dot{
  width: 40px; height: 1px;
  background: rgba(237,228,207,.25);
  cursor: pointer;
  transition: background .3s;
}
.showcase__dot.is-active{ background: var(--gold); height: 2px; }

@media (max-width: 860px){
  .showcase__piece{ grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; }
  .showcase__no{ grid-row: auto; grid-column: 1; }
  .showcase__name{ grid-row: auto; grid-column: 1; }
  .showcase__art{ grid-row: auto; grid-column: 1; max-height: 40vh; }
  .showcase__meta{ grid-row: auto; grid-column: 1; text-align: left; }
}

/* =========================================================
   07 · HORIZONTAL GALLERY
   ========================================================= */
.hgallery{
  position: relative;
  height: 380vh;
  background: #050403;
}
.hgallery__sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
}
.hgallery__strip{
  display: flex;
  height: 100%;
  will-change: transform;
}
.hg-panel{
  flex-shrink: 0;
  width: 80vw;
  height: 100%;
  padding: 8vh 5vw;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
  border-right: 1px solid rgba(217,180,106,.08);
}
.hg-panel__num{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--gold);
}
.hg-panel__cap{
  font-family: var(--script);
  font-style: italic;
  font-size: 16px;
  color: rgba(237,228,207,.65);
}
.hg-panel__art{ display: grid; place-items: center; }
.hg-panel__art svg{
  width: min(60vh, 600px);
  height: auto;
  filter: drop-shadow(0 20px 60px rgba(0,0,0,.6));
}
.hg-panel__portrait{
  background:
    radial-gradient(ellipse 40% 60% at 50% 45%, rgba(237,228,207,.5), transparent 70%),
    radial-gradient(circle at 50% 30%, rgba(244,217,126,.25), transparent 40%),
    linear-gradient(180deg, #14100b, #050403);
  border: 1px solid rgba(217,180,106,.15);
  position: relative;
  overflow: hidden;
}
.hg-panel__portrait::after{
  content:"";
  position: absolute;
  left: 50%; top: 20%;
  width: 30%; height: 55%;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at 40% 30%, #c9beA6, #6a5a3a 60%, #2a1a08);
  border-radius: 45% 45% 50% 50%;
  filter: blur(1px);
}
.hg-panel__portrait--alt::after{ background: radial-gradient(ellipse at 30% 30%, #d4c4a2, #4a3a1a 70%, #1a0a04); }

.hg-panel__workshop{
  background:
    radial-gradient(ellipse at 30% 40%, rgba(255,140,40,.35), transparent 45%),
    radial-gradient(ellipse at 70% 60%, rgba(244,217,126,.2), transparent 45%),
    linear-gradient(135deg, #1a0e04, #0a0503);
  position: relative;
  overflow: hidden;
}
.hg-panel__workshop::before,
.hg-panel__workshop::after{
  content:""; position: absolute;
  background: linear-gradient(135deg, #7a5a2a, #2a1a08);
}
.hg-panel__workshop::before{
  left: 10%; top: 40%;
  width: 40%; height: 4px;
  transform: rotate(-12deg);
  box-shadow: 0 0 30px rgba(255,140,40,.5);
}
.hg-panel__workshop::after{
  left: 40%; top: 55%;
  width: 30%; height: 4px;
  transform: rotate(24deg);
}
.hg-panel__gold{
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.4), transparent 30%),
    radial-gradient(ellipse at 60% 50%, rgba(244,217,126,.6), transparent 50%),
    linear-gradient(135deg, #a67222, #3a2609);
  position: relative;
}
.hg-panel__cover{
  display: grid;
  place-items: center;
  gap: 40px;
  align-content: center;
  background:
    radial-gradient(ellipse at center, rgba(244,217,126,.2), transparent 55%),
    linear-gradient(135deg, #14100b, #050403);
  padding: 80px;
}
.hg-panel__mark{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(56px, 8vw, 148px);
  color: var(--gold);
  letter-spacing: .02em;
  display: flex; gap: 20px; align-items: baseline;
}
.hg-panel__mark i{
  font-style: normal;
  color: var(--paper);
  font-size: .5em;
  transform: translateY(-.15em);
}
.hg-panel__pw{
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  color: rgba(237,228,207,.7);
}

.hgallery__hud{
  padding: 20px var(--pad-x);
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .3em;
  color: rgba(237,228,207,.4);
  border-top: 1px solid rgba(217,180,106,.1);
}
.hgallery__pbar{
  flex: 1;
  max-width: 400px;
  height: 1px;
  background: rgba(217,180,106,.15);
  overflow: hidden;
}
.hgallery__pbar i{
  display: block; height: 100%; width: 0%;
  background: var(--gold);
}

/* =========================================================
   08 · ZINO INTRO
   ========================================================= */
.zino{
  position: relative;
  padding: 180px var(--pad-x) 200px;
  background: linear-gradient(180deg, #050403 0%, #14100b 50%, #050403 100%);
  isolation: isolate;
  overflow: hidden;
}
.zino__chapter{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .3em;
  color: rgba(237,228,207,.45);
  margin-bottom: 40px;
}
.zino__title{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(72px, 14vw, 220px);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--paper);
  margin-bottom: 60px;
  display: flex; align-items: baseline; gap: .3em;
  flex-wrap: wrap;
}
.zino__title em{
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}
.zino__lede{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(20px, 2.4vw, 36px);
  line-height: 1.35;
  color: rgba(237,228,207,.75);
  max-width: 820px;
  margin-bottom: 100px;
}
.zino__lede mark{
  background: transparent;
  color: var(--gold);
  font-style: italic;
}
.zino__services{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  border-top: 1px solid rgba(217,180,106,.15);
  border-bottom: 1px solid rgba(217,180,106,.15);
}
.zino__svc{
  padding: 60px 40px;
  display: grid; gap: 24px;
  border-left: 1px solid rgba(217,180,106,.1);
  position: relative;
  transition: background .4s;
  min-height: 320px;
}
.zino__svc:first-child{ border-left: 0; }
.zino__svc:hover{ background: rgba(244,217,126,.03); }
.zino__svc span{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--gold);
}
.zino__svc h3{
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(28px, 3.5vw, 48px);
  color: var(--paper);
  line-height: 1;
}
.zino__svc p{
  font-family: var(--serif);
  font-size: 18px;
  color: rgba(237,228,207,.6);
  align-self: end;
}
.zino__svc::after{
  content:"→";
  position: absolute;
  right: 40px; bottom: 40px;
  color: var(--gold);
  opacity: 0;
  transform: translateX(-10px);
  transition: transform .4s var(--ease-out), opacity .4s;
}
.zino__svc:hover::after{ opacity: 1; transform: translateX(0); }

@media (max-width: 860px){
  .zino__services{ grid-template-columns: 1fr; }
  .zino__svc{ border-left: 0; border-top: 1px solid rgba(217,180,106,.1); }
  .zino__svc:first-child{ border-top: 0; }
}

/* =========================================================
   09-11 · STORY SECTIONS (custom / repair / buy)
   ========================================================= */
.story{
  position: relative;
  min-height: 120vh;
  padding: 140px var(--pad-x);
  overflow: hidden;
  isolation: isolate;
}
.story--custom{ background: linear-gradient(180deg, #050403, #0a0806); }
.story--repair{ background: linear-gradient(180deg, #0a0806, #14100b); }
.story--buy{ background: linear-gradient(180deg, #14100b, #050403); }
.story__eyebrow{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--gold);
  margin-bottom: 30px;
}
.story__title{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(48px, 8vw, 128px);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--paper);
  margin-bottom: 80px;
  max-width: 1200px;
}
.story__title em{
  font-style: italic;
  color: var(--gold);
  display: block;
}
.story__stage{
  position: relative;
  height: 60vh;
  min-height: 500px;
  display: grid; place-items: center;
}
.story__layer{
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  will-change: opacity, transform, filter;
}
.story__layer svg{
  width: min(50vh, 500px);
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.7));
}
.story__layer--sketch{ opacity: 1; }
.story__layer--sketch svg{
  filter: drop-shadow(0 0 20px rgba(237,228,207,.1));
}
.story__layer--final{ opacity: 0; }

.repair-damaged{
  filter: grayscale(.7) brightness(.6) contrast(.9);
  transform: rotate(-6deg);
}
.story__layer--damaged{ opacity: 1; }
.story__layer--restored{ opacity: 0; }

.story__steps{
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .3em;
  color: rgba(237,228,207,.45);
}
.story__steps i{ color: var(--gold); font-style: normal; }
.story__foot{
  margin-top: 60px;
  font-family: var(--script);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 32px);
  color: var(--gold);
  text-align: center;
}

.buy__stage{
  position: relative;
  height: 65vh;
  min-height: 500px;
}
.buy__item{
  position: absolute;
  width: 30vmin;
  min-width: 220px;
  height: auto;
  will-change: transform, opacity;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.6));
}
.buy__item--r{ left: 6%;  top: 8%; }
.buy__item--n{ left: 40%; top: 4%; width: 40vmin; }
.buy__item--b{ right: 8%; top: 20%; }
.buy__item--e{ left: 22%; bottom: 6%; width: 14vmin; }
.buy__item--g{ right: 22%; bottom: 4%; width: 22vmin; }

/* =========================================================
   12 · CAMPAIGN VISUAL
   ========================================================= */
.campaign{
  position: relative;
  min-height: 130vh;
  padding: 120px var(--pad-x);
  background: #050403;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  align-content: center;
}
.campaign__bg{
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 30% 40%, rgba(244,217,126,.15), transparent 70%),
    radial-gradient(ellipse 40% 30% at 80% 70%, rgba(180,220,255,.05), transparent 70%),
    linear-gradient(135deg, #050403 0%, #14100b 50%, #050403 100%);
  z-index: 0;
}
.campaign__figure{
  position: absolute;
  right: 5%; top: 10%;
  width: 40vmin;
  height: 80%;
  z-index: 1;
  background:
    radial-gradient(ellipse 40% 60% at 50% 30%, rgba(237,228,207,.7), transparent 70%),
    radial-gradient(ellipse 30% 40% at 50% 55%, rgba(237,228,207,.4), transparent 70%),
    linear-gradient(180deg, rgba(237,228,207,.15), transparent 60%);
  filter: blur(2px);
  opacity: .85;
  will-change: transform;
}
.campaign__jewel{
  position: absolute;
  right: 15%; top: 40%;
  width: 30vmin;
  z-index: 2;
  filter: drop-shadow(0 20px 50px rgba(0,0,0,.7));
  will-change: transform;
}
.campaign__type{
  position: relative;
  z-index: 3;
  max-width: 900px;
}
.campaign__mark{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--gold);
  margin-bottom: 30px;
}
.campaign__type h2{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(48px, 8vw, 128px);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--paper);
  margin-bottom: 40px;
}
.campaign__type h2 em{
  font-style: italic;
  color: var(--gold);
  display: block;
}
.campaign__meta{
  position: absolute;
  bottom: 40px; left: var(--pad-x);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .3em;
  color: rgba(237,228,207,.4);
  z-index: 3;
}

/* =========================================================
   13 · FINAL SCENE
   ========================================================= */
.final{
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: 120px var(--pad-x) 80px;
  background: radial-gradient(ellipse at center, #0a0806 0%, #000 80%);
  display: grid;
  place-items: center;
  gap: 40px;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.final__ring{
  position: absolute;
  top: 50%; left: 50%;
  /* centering via GSAP xPercent/yPercent */
  width: min(80vmin, 900px);
  aspect-ratio: 1 / 1;
  opacity: .5;
  filter: drop-shadow(0 30px 100px rgba(244,217,126,.15));
  will-change: transform;
  z-index: 1;
}
.final__title{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(60px, 12vw, 200px);
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--paper);
  position: relative;
  z-index: 2;
}
.final__title em{
  font-style: italic;
  color: var(--gold);
  display: block;
}
.final__mark{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .32em;
  color: rgba(237,228,207,.55);
  position: relative;
  z-index: 2;
}
.final__ctas{
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
  position: relative;
  z-index: 2;
}

/* =========================================================
   14 · LOCATION
   ========================================================= */
.location{
  padding: 160px var(--pad-x);
  background: #050403;
}
.location__grid{
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: center;
  max-width: 1600px;
  margin: 0 auto;
}
.location__chapter{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .3em;
  color: rgba(237,228,207,.45);
  margin-bottom: 30px;
}
.location__title{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(48px, 7vw, 108px);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--paper);
  margin-bottom: 40px;
}
.location__title em{
  font-style: italic;
  color: var(--gold);
  display: block;
}
.location__addr{
  font-family: var(--serif);
  font-style: normal;
  font-size: 22px;
  line-height: 1.6;
  color: var(--paper);
  margin-bottom: 40px;
}
.location__addr strong{
  font-weight: 500;
  color: var(--gold);
}
.location__contact{
  display: flex; gap: 24px; flex-wrap: wrap;
  margin-bottom: 60px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.location__contact a{
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gold);
  color: var(--gold);
  transition: color .3s;
}
.location__contact a:hover{ color: var(--paper); }
.location__hours{
  display: grid; gap: 12px;
  max-width: 340px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(237,228,207,.7);
}
.location__hours div{
  display: flex; justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(217,180,106,.2);
}

/* mini stylized map */
.location__map{
  position: relative;
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, #0f0b06 0%, #050403 100%);
  border: 1px solid rgba(217,180,106,.15);
  overflow: hidden;
  isolation: isolate;
}
.map__grid{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(217,180,106,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217,180,106,.05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.map__street{
  position: absolute;
  background: rgba(237,228,207,.08);
}
.map__street--h1{ left: 0; right: 0; top: 40%; height: 22px; }
.map__street--h2{ left: 0; right: 0; top: 62%; height: 14px; opacity: .6; }
.map__street--v1{ top: 0; bottom: 0; left: 34%; width: 22px; }
.map__street--v2{ top: 0; bottom: 0; left: 68%; width: 14px; opacity: .6; }
.map__label{
  position: absolute;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .3em;
  color: rgba(237,228,207,.55);
}
.map__label--st{ top: 34%; left: 30px; }
.map__label--lb{ top: 20px; left: 38%; writing-mode: vertical-rl; }
.map__compass{
  position: absolute;
  top: 20px; right: 24px;
  width: 32px; height: 32px;
  border: 1px solid rgba(237,228,207,.35);
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(237,228,207,.7);
}
.map__pin{
  position: absolute;
  left: 34%; top: 40%;
  transform: translate(-50%,-100%);
  display: grid; place-items: center;
}
.map__pin-dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 20px rgba(244,217,126,.8);
  grid-area: 1 / 1;
}
.map__pin-ring{
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--gold);
  grid-area: 1 / 1;
  animation: pinPulse 2.5s ease-in-out infinite;
}
@keyframes pinPulse{
  0%{ transform: scale(.5); opacity: 1; }
  100%{ transform: scale(2.2); opacity: 0; }
}
.map__pin-lbl{
  position: absolute;
  top: 30px; left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .28em;
  color: var(--gold);
  padding: 6px 10px;
  background: rgba(5,4,3,.85);
  border: 1px solid rgba(217,180,106,.35);
}

@media (max-width: 860px){
  .location__grid{ grid-template-columns: 1fr; gap: 40px; }
  .location__map{ aspect-ratio: 4 / 3; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{
  padding: 120px var(--pad-x) 40px;
  background: #030201;
  border-top: 1px solid rgba(217,180,106,.15);
}
.foot__mark{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(48px, 9vw, 160px);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--paper);
  display: flex; align-items: baseline; gap: 20px;
  margin-bottom: 100px;
  flex-wrap: wrap;
}
.foot__mark i{
  font-style: normal;
  color: var(--gold);
  font-size: .5em;
  transform: translateY(-.2em);
}
.foot__cols{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(217,180,106,.1);
  margin-bottom: 30px;
}
.foot__cols h4{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--gold);
  margin-bottom: 20px;
  font-weight: 400;
}
.foot__cols a{
  display: block;
  font-family: var(--serif);
  font-size: 17px;
  color: rgba(237,228,207,.7);
  padding: 6px 0;
  transition: color .3s;
}
.foot__cols a:hover{ color: var(--gold); }
.foot__meta{
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .28em;
  color: rgba(237,228,207,.35);
}

@media (max-width: 860px){
  .foot__cols{ grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
  .hero__ring, .typo__ring, .final__ring{ transform: translate(-50%,-50%) !important; }
}

/* =========================================================================
   PART II · REAL PHOTOGRAPHY OVERRIDES
   The homepage originally rendered inline SVG jewelry inside animated
   wrapper divs. We now inject <img> tags into those same wrappers, so
   selectors that only targeted `svg` need to also match `img`.
   ========================================================================= */

/* --- hero / typo / final ring wrappers: img fills the wrapper --- */
.hero__ring img,
.typo__ring img,
.final__ring img,
.transition__gem img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  will-change: transform;
}

/* transition gem is on black; drop white if any */
.transition__gem img{
  filter: drop-shadow(0 30px 80px rgba(180,220,255,.25));
}

/* --- two-worlds photos: framed portrait blocks --- */
.world__photo{
  margin: 0 0 40px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid rgba(217,180,106,.15);
  position: relative;
  isolation: isolate;
}
.world__photo::after{
  content:"";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(5,4,3,.5) 100%);
  pointer-events: none;
}
.world__photo img{
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.9) contrast(1.05);
  transition: transform 1.2s var(--ease-out), filter 1.2s var(--ease-out);
}
.world:hover .world__photo img{
  transform: scale(1.04);
  filter: brightness(1) contrast(1.05);
}
.world--left .world__photo{ margin-left: auto; max-width: 380px; }
.world--right .world__photo{ margin-right: auto; max-width: 380px; }
.world__body{ font-size: clamp(24px, 3.2vw, 44px); }

/* --- craft scenes: replace CSS gradient placeholders with real photos --- */
.craft__art{
  border: 1px solid rgba(217,180,106,.15);
  background: #000;
  overflow: hidden;
}
.craft__art--raw, .craft__art--form, .craft__art--fire,
.craft__art--polish, .craft__art--finish{
  background: #050403 !important;
}
.craft__art--raw::after,
.craft__art--fire::after,
.craft__art--polish::after{ content: none; }
.craft__art img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.95) contrast(1.05) saturate(1.05);
}

/* --- SHOWCASE · paper (editorial spread on cream) --- */
.showcase--paper{
  background: url('./assets/tex-paper.png') center/cover, #ede4cf;
  color: var(--ink);
}
.showcase--paper::before{
  content:"";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(237,228,207,.85) 0%, rgba(237,228,207,.7) 50%, rgba(237,228,207,.85) 100%);
  z-index: 0;
  pointer-events: none;
}
.showcase--paper .showcase__sticky{ position: sticky; z-index: 1; }
.showcase--paper .showcase__chapter{ color: rgba(26,20,12,.55); }
.showcase--paper .showcase__no{ color: rgba(26,20,12,.06); }
.showcase--paper .showcase__name{ color: var(--ink); }
.showcase--paper .showcase__meta{ color: rgba(26,20,12,.7); }
.showcase--paper .showcase__meta li{ border-bottom-color: rgba(138,95,26,.2); }
.showcase--paper .showcase__meta a{
  color: var(--gold-deep);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.showcase--paper .showcase__dot{ background: rgba(26,20,12,.2); }
.showcase--paper .showcase__dot.is-active{ background: var(--gold-deep); }
.showcase__head{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.showcase__shop{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-deep);
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}

.showcase__art img{
  width: 100%;
  max-width: 640px;
  height: auto;
  max-height: 68vh;
  object-fit: contain;
  will-change: transform;
  animation: floatSlow 8s ease-in-out infinite;
  mix-blend-mode: multiply;                 /* drops the white product-shot bg on paper cream */
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.15));
}

/* --- story cards (cream frame for white-bg product photos in custom/repair) --- */
.story__card{
  background: #ede4cf;
  padding: clamp(16px, 3vw, 40px);
  border: 1px solid rgba(217,180,106,.2);
  max-width: min(520px, 90%);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  position: relative;
}
.story__card::after{
  content:"";
  position: absolute;
  bottom: 12px; left: 12px; right: 12px;
  height: 1px;
  background: rgba(138,95,26,.3);
}
.story__layer img{
  width: 100%;
  height: auto;
  max-height: 50vh;
  object-fit: contain;
  display: block;
}
.story__layer--sketch img{ filter: none; max-width: 620px; }
.story__layer--damaged .repair-damaged,
.story__layer--damaged img{
  filter: sepia(.3) brightness(.85) contrast(1.05);
}

/* --- horizontal gallery: real photos in the panels --- */
.hg-panel__art--full{ height: 100%; display: grid; place-items: center; padding: 4vh 0; }
.hg-panel__art img{
  width: 100%;
  max-width: 720px;
  height: auto;
  max-height: 76vh;
  object-fit: contain;
  filter: drop-shadow(0 30px 80px rgba(0,0,0,.6));
}
.hg-panel__portrait,
.hg-panel__workshop,
.hg-panel__gold{
  border: 1px solid rgba(217,180,106,.15);
  overflow: hidden;
  position: relative;
}
.hg-panel__portrait::before,
.hg-panel__portrait::after,
.hg-panel__workshop::before,
.hg-panel__workshop::after{ content: none !important; }
.hg-panel__portrait img,
.hg-panel__workshop img,
.hg-panel__gold img{
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
.hg-panel__cover{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(217,180,106,.2);
  padding: 0;
}
.hg-panel__coverbg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.55);
}
.hg-panel__coverin{
  position: relative;
  z-index: 2;
  display: grid; place-items: center;
  gap: 32px;
  align-content: center;
  height: 100%;
  padding: 40px;
  text-align: center;
}

/* --- buy gold: hero + info grid (replaces scattered layout) --- */
.buy__stage{ display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; min-height: 50vh; height: auto; }
.buy__hero{
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid rgba(217,180,106,.15);
}
.buy__hero img{
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.95) contrast(1.05);
  will-change: transform;
}
.buy__grid{
  display: grid;
  gap: 30px;
}
.buy__cell{
  display: grid; gap: 8px;
  padding: 24px 0;
  border-top: 1px solid rgba(217,180,106,.2);
  font-family: var(--serif);
}
.buy__cell:last-child{ border-bottom: 1px solid rgba(217,180,106,.2); }
.buy__cell strong{
  font-weight: 400;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--gold);
}
.buy__cell span{
  font-family: var(--sans);
  font-size: 14px;
  color: rgba(237,228,207,.7);
  line-height: 1.5;
}

/* --- campaign figure: real photo, not gradient --- */
img.campaign__figure{
  right: 5%; top: 10%;
  width: 42vmin;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: brightness(1) contrast(1.05);
  background: none;
  border: 1px solid rgba(217,180,106,.15);
}

/* --- location: real storefront replaces stylized map --- */
.location__store{
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(217,180,106,.15);
}
.location__store img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.location__store:hover img{ transform: scale(1.03); }
.location__store-hud{
  position: absolute;
  bottom: 20px; left: 20px;
  padding: 10px 16px;
  background: rgba(5,4,3,.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(217,180,106,.3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--gold);
  display: flex; gap: 10px; align-items: center;
}
.location__store-hud em{ color: rgba(237,228,207,.4); font-style: normal; }
@media (max-width: 860px){
  .location__store{ aspect-ratio: 4 / 3; }
  .buy__stage{ grid-template-columns: 1fr; }
}

/* =========================================================================
   PART VII · PERFORMANCE + LAYOUT PATCHES
   ========================================================================= */

/* --- Craft scene: grid+place-items was collapsing images to intrinsic size.
       Switch to absolute-fill so all 5 scene photos actually render. --- */
.craft__art{
  display: block !important;
  position: relative !important;
  place-items: initial !important;
}
.craft__art img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* --- Showcase art: drop mix-blend + floatSlow on the animated pieces.
       Blend-mode + moving transform + drop-shadow is the slowest CSS combo.
       Keep the paper background; let the white product-shot bg read as a
       soft card behind the piece. --- */
.showcase__art img{
  mix-blend-mode: normal;
  animation: none;
  filter: none;
  max-width: 78%;
  max-height: 62vh;
  object-fit: contain;
}
.showcase--paper .showcase__art{
  background: #ede4cf;
  padding: 20px;
  border: 1px solid rgba(138,95,26,.15);
  box-shadow: 0 30px 60px rgba(0,0,0,.25);
  max-width: 640px;
  margin: 0 auto;
  aspect-ratio: 4 / 5;
  height: auto;
  display: grid; place-items: center;
}

/* Showcase piece — remove CSS opacity/visibility transitions so GSAP owns them fully */
.showcase__piece{ transition: none; visibility: visible; }

/* Reduce top/bottom padding inside pinned sticky heads so the visible area
   feels dense, not empty */
.craft__sticky{ padding-top: 84px; padding-bottom: 30px; gap: 20px; }
.showcase__sticky{ padding-top: 84px; padding-bottom: 30px; }

/* --- particle overlay layer (gold particle field over hero glow) --- */
.hero::after{
  content:"";
  position: absolute; inset: 0;
  background: url('./assets/particles-overlay.png') center/cover no-repeat;
  mix-blend-mode: screen;
  opacity: .18;
  pointer-events: none;
  z-index: 2;
}

/* =========================================================================
   PART III · PAGE SHELL (used by /shop/, /category/news/, /product/*/)
   ========================================================================= */

.page{
  padding-top: var(--nav-h);
  min-height: 100vh;
}
.page__head{
  padding: 100px var(--pad-x) 60px;
  border-bottom: 1px solid rgba(217,180,106,.12);
}
.page__crumbs{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(237,228,207,.5);
  margin-bottom: 24px;
}
.page__crumbs a{
  color: rgba(237,228,207,.75);
  transition: color .3s;
}
.page__crumbs a:hover{ color: var(--gold); }
.page__crumbs em{ font-style: normal; margin: 0 8px; color: rgba(237,228,207,.35); }
.page__title{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(56px, 9vw, 148px);
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--paper);
  margin-bottom: 32px;
  display: flex; align-items: baseline; gap: .3em;
  flex-wrap: wrap;
}
.page__title em{ font-style: italic; color: var(--gold); font-weight: 400; }
.page__lede{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.4;
  color: rgba(237,228,207,.7);
  max-width: 720px;
  margin-bottom: 40px;
}
.page__eyebrow{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
.nav__menu a.is-current{ color: var(--gold); }
.nav__menu a.is-current::after{ transform: scaleX(1); background: var(--gold); }

/* =========================================================================
   PART IV · SHOP
   ========================================================================= */

.shop__filter{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.chip{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(237,228,207,.7);
  border: 1px solid rgba(217,180,106,.25);
  padding: 12px 18px;
  background: transparent;
  transition: background .3s, color .3s, border-color .3s;
  display: inline-flex; align-items: center; gap: 10px;
}
.chip span{ color: rgba(237,228,207,.4); font-size: 10px; }
.chip:hover{ border-color: var(--gold); color: var(--gold); }
.chip.is-active{ background: var(--gold); color: var(--black); border-color: var(--gold); }
.chip.is-active span{ color: rgba(5,4,3,.5); }

.shop__grid{
  padding: 60px var(--pad-x);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px 40px;
}
@media (min-width: 1100px){ .shop__grid{ grid-template-columns: repeat(4, 1fr); gap: 40px 30px; } }
@media (max-width: 640px){ .shop__grid{ grid-template-columns: 1fr; } }

.prod{
  display: grid;
  gap: 20px;
  color: var(--paper);
  transition: transform .5s var(--ease-out);
}
.prod:hover{ transform: translateY(-4px); }
.prod__mediawrap{
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #0a0806;
  border: 1px solid rgba(217,180,106,.1);
  display: grid;
  place-items: center;
  isolation: isolate;
}
.prod__mediawrap--paper{
  background:
    url('./assets/tex-paper.png') center/cover,
    #ede4cf;
}
.prod__mediawrap--paper::before{
  content:"";
  position: absolute; inset: 0;
  background: rgba(237,228,207,.7);
  z-index: 0;
}
.prod__no{
  position: absolute;
  top: 20px; left: 24px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .3em;
  color: rgba(26,20,12,.4);
  z-index: 2;
}
.prod__media{
  position: relative;
  z-index: 1;
  width: 80%;
  height: 80%;
  display: grid;
  place-items: center;
}
.prod__media img{
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 15px 30px rgba(0,0,0,.15));
  transition: transform .8s var(--ease-out), filter .8s var(--ease-out);
}
.prod__media--silver img{ filter: grayscale(1) brightness(1) contrast(1.05) drop-shadow(0 15px 30px rgba(0,0,0,.15)); }
.prod:hover .prod__media img{ transform: scale(1.05) rotate(-2deg); }
.prod__hover{
  position: absolute;
  bottom: 20px; right: 24px;
  z-index: 3;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 8px 12px;
  background: #ede4cf;
  border: 1px solid var(--gold-deep);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s, transform .35s;
}
.prod:hover .prod__hover{ opacity: 1; transform: translateY(0); }
.prod__meta{ display: grid; gap: 6px; }
.prod__name{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.1;
  color: var(--paper);
}
.prod__name em{ font-style: italic; color: var(--gold); font-weight: 300; }
.prod__mat{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(237,228,207,.55);
}
.prod__price{
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  font-size: 18px;
  margin-top: 4px;
}

/* Shop editorial band */
.shop__band{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  background: #0a0806;
  border-top: 1px solid rgba(217,180,106,.1);
  border-bottom: 1px solid rgba(217,180,106,.1);
}
.shop__band-img{
  width: 100%; height: 100%;
  object-fit: cover;
  min-height: 60vh;
}
.shop__band-type{
  padding: 80px var(--pad-x);
  display: grid; align-content: center; gap: 24px;
}
.shop__band-type h2{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 6vw, 82px);
  line-height: .95;
  color: var(--paper);
}
.shop__band-type h2 em{ font-style: italic; color: var(--gold); display: block; }
.shop__band-type p{
  font-family: var(--serif);
  font-size: 18px;
  color: rgba(237,228,207,.65);
  max-width: 480px;
}
.shop__band-type .btn{ justify-self: start; }
@media (max-width: 860px){ .shop__band{ grid-template-columns: 1fr; } }

/* Shop services */
.shop__svc{
  padding: 120px var(--pad-x);
  border-top: 1px solid rgba(217,180,106,.1);
}
.shop__svc-title{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 6vw, 82px);
  line-height: .95;
  color: var(--paper);
  margin-bottom: 60px;
  max-width: 800px;
}
.shop__svc-title em{ font-style: italic; color: var(--gold); display: block; }
.shop__svc-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.shop__svc-card{
  padding: 40px 0;
  border-top: 1px solid rgba(217,180,106,.15);
  display: grid; gap: 14px;
  transition: color .3s;
}
.shop__svc-card:hover{ color: var(--gold); }
.shop__svc-card span{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--gold);
}
.shop__svc-card h3{
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(24px, 3vw, 36px);
  color: var(--paper);
}
.shop__svc-card p{
  font-family: var(--serif);
  color: rgba(237,228,207,.6);
  font-size: 17px;
  max-width: 300px;
}
@media (max-width: 860px){ .shop__svc-grid{ grid-template-columns: 1fr; } }

/* =========================================================================
   PART V · NEWS / JOURNAL
   ========================================================================= */

.news__hero{
  padding: 60px var(--pad-x);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: center;
  border-bottom: 1px solid rgba(217,180,106,.12);
}
.news__hero-link{
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(217,180,106,.15);
}
.news__hero-link img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.news__hero-link:hover img{ transform: scale(1.03); }
.news__tag, .post__tag{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--gold);
  margin-bottom: 20px;
}
.news__hero-meta h2{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.1;
  color: var(--paper);
  margin-bottom: 20px;
}
.news__hero-meta h2 a{ transition: color .3s; }
.news__hero-meta h2 a:hover{ color: var(--gold); }
.news__hero-meta p{
  font-family: var(--serif);
  color: rgba(237,228,207,.65);
  font-size: 18px;
  line-height: 1.55;
  margin-bottom: 24px;
}
.news__foot, .post__foot{
  display: flex; gap: 10px; align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .28em;
  color: rgba(237,228,207,.4);
  text-transform: uppercase;
}
.news__foot em, .post__foot em{ font-style: normal; }

.news__list{
  padding: 80px var(--pad-x);
  display: grid;
  gap: 60px;
}
.post{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: center;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(217,180,106,.08);
}
.post:last-child{ border-bottom: 0; }
.post__media{
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(217,180,106,.12);
}
.post__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.post__media:hover img{ transform: scale(1.04); }
.post__meta h3{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.15;
  color: var(--paper);
  margin-bottom: 14px;
}
.post__meta h3 a{ transition: color .3s; }
.post__meta h3 a:hover{ color: var(--gold); }
.post__meta p{
  font-family: var(--serif);
  color: rgba(237,228,207,.6);
  font-size: 16px;
  line-height: 1.55;
  margin-bottom: 18px;
}
@media (max-width: 860px){
  .news__hero{ grid-template-columns: 1fr; }
  .post{ grid-template-columns: 1fr; }
}

.news__cta{
  padding: 120px var(--pad-x);
  background: #0a0806;
  border-top: 1px solid rgba(217,180,106,.12);
  text-align: center;
}
.news__cta h2{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1;
  color: var(--paper);
  margin-bottom: 20px;
}
.news__cta h2 em{ font-style: italic; color: var(--gold); display: block; }
.news__cta p{
  font-family: var(--serif);
  color: rgba(237,228,207,.65);
  font-size: 18px;
  margin-bottom: 40px;
  max-width: 500px;
  margin-left: auto; margin-right: auto;
}
.news__form{
  display: flex;
  gap: 0;
  max-width: 480px;
  margin: 0 auto;
  border: 1px solid rgba(217,180,106,.35);
}
.news__form input{
  flex: 1;
  padding: 18px 20px;
  background: transparent;
  color: var(--paper);
  border: 0;
  outline: 0;
  font-family: var(--sans);
  font-size: 14px;
}
.news__form input::placeholder{ color: rgba(237,228,207,.4); }
.news__form button{
  padding: 18px 22px;
  background: var(--gold);
  color: var(--black);
  border: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s;
}
.news__form button:hover{ background: var(--gold-hot); }

/* =========================================================================
   PART VI · PRODUCT PAGE
   ========================================================================= */

.prodpg{
  padding: 40px var(--pad-x) 100px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 80px;
  align-items: start;
  max-width: 1600px;
  margin: 0 auto;
}
@media (max-width: 960px){ .prodpg{ grid-template-columns: 1fr; gap: 40px; } }

.prodpg__gallery{ position: sticky; top: calc(var(--nav-h) + 24px); }
@media (max-width: 960px){ .prodpg__gallery{ position: relative; top: auto; } }

.prodpg__hero{
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid rgba(217,180,106,.15);
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  background: #0a0806;
}
.prodpg__hero--paper{
  background: url('./assets/tex-paper.png') center/cover, #ede4cf;
}
.prodpg__hero--paper::before{
  content:"";
  position: absolute; inset: 0;
  background: rgba(237,228,207,.75);
  z-index: 0;
}
.prodpg__hero img{
  position: relative; z-index: 1;
  max-width: 88%; max-height: 88%;
  width: auto; height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.2));
}
.prodpg__thumbs{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.thumb{
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid rgba(217,180,106,.15);
  background: #0a0806;
  padding: 0;
  cursor: pointer;
  transition: border-color .3s;
}
.thumb.is-active{ border-color: var(--gold); }
.thumb:hover{ border-color: var(--gold-hot); }
.thumb img{ width: 100%; height: 100%; object-fit: cover; }

.prodpg__info{ padding-top: 8px; }
.prodpg__info .page__crumbs{ margin-bottom: 30px; }
.prodpg__eyebrow{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
.prodpg__name{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(44px, 6vw, 84px);
  line-height: .95;
  letter-spacing: -.01em;
  color: var(--paper);
  margin-bottom: 20px;
}
.prodpg__name span{ display: block; }
.prodpg__name em{ font-style: italic; color: var(--gold); font-weight: 400; }
.prodpg__price{
  font-family: var(--serif);
  font-size: 26px;
  color: var(--paper);
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(217,180,106,.2);
}
.prodpg__lede{
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.55;
  color: rgba(237,228,207,.75);
  margin-bottom: 36px;
  max-width: 520px;
}
.prodpg__spec{
  display: grid;
  gap: 0;
  margin-bottom: 40px;
}
.prodpg__spec div{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px dashed rgba(217,180,106,.18);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(237,228,207,.85);
}
.prodpg__spec dt{
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: 10px;
  color: rgba(237,228,207,.5);
}
.prodpg__cta{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.prodpg__notes{
  list-style: none;
  display: grid;
  gap: 10px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: rgba(237,228,207,.55);
}

/* product editorial band */
.prodband{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: #0a0806;
  border-top: 1px solid rgba(217,180,106,.1);
  border-bottom: 1px solid rgba(217,180,106,.1);
}
.prodband img{
  width: 100%; height: 100%;
  object-fit: cover;
  min-height: 60vh;
}
.prodband__type{
  padding: 80px var(--pad-x);
  display: grid; align-content: center; gap: 24px;
}
.prodband__type h2{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 5vw, 68px);
  line-height: .95;
  color: var(--paper);
}
.prodband__type h2 em{ font-style: italic; color: var(--gold); display: block; }
.prodband__type p{
  font-family: var(--serif);
  color: rgba(237,228,207,.65);
  font-size: 17px;
  max-width: 460px;
}
.prodband__type .btn{ justify-self: start; }
@media (max-width: 860px){ .prodband{ grid-template-columns: 1fr; } }

/* related */
.related{
  padding: 100px var(--pad-x);
  border-top: 1px solid rgba(217,180,106,.1);
}
.related__head{
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 40px;
  gap: 20px; flex-wrap: wrap;
}
.related__head h3{
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(28px, 3.6vw, 48px);
  color: var(--paper);
}
.related__head a{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}
.related__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
@media (max-width: 860px){ .related__grid{ grid-template-columns: 1fr; } }

/* =========================================================================
   PART VIII · ABOUT + FAQ (bilingual SEO body copy)
   ========================================================================= */

.about, .faq{
  padding: 140px var(--pad-x);
  background: #050403;
  border-top: 1px solid rgba(217,180,106,.1);
  color: var(--paper);
}
.faq{ background: #0a0806; }

.about__head, .faq__head{
  max-width: 900px;
  margin-bottom: 60px;
}
.about__title, .faq__title{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(44px, 7vw, 108px);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--paper);
}
.about__title em, .faq__title em{
  font-style: italic;
  color: var(--gold);
  display: inline;
}
.faq__lede{
  font-family: var(--serif);
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.5;
  color: rgba(237,228,207,.7);
  margin-top: 20px;
  max-width: 720px;
}

.about__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.about__col{
  padding: 40px;
  border: 1px solid rgba(217,180,106,.15);
  background: rgba(255,255,255,.015);
  display: grid;
  gap: 20px;
  align-content: start;
}
.about__col:hover{ border-color: rgba(217,180,106,.35); background: rgba(255,255,255,.03); transition: all .5s var(--ease-out); }
.about__flag{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .28em;
  color: var(--gold);
  margin-bottom: 8px;
}
.about__col p{
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  color: rgba(237,228,207,.85);
}
.about__col p strong{ color: var(--paper); font-weight: 400; }
.about__col p em{ font-style: italic; color: var(--gold); }
.about__list{
  list-style: none;
  display: grid;
  gap: 10px;
  padding: 20px 0;
  border-top: 1px dashed rgba(217,180,106,.2);
  border-bottom: 1px dashed rgba(217,180,106,.2);
  font-family: var(--sans);
  font-size: 14px;
  color: rgba(237,228,207,.75);
}
.about__list li{ padding-left: 20px; position: relative; }
.about__list li::before{
  content:"·";
  position: absolute; left: 0; top: 0;
  color: var(--gold);
  font-size: 20px;
  line-height: 1;
}
.about__list li strong{ color: var(--paper); font-weight: 500; }
.about__col .btn{ justify-self: start; margin-top: 8px; }

@media (max-width: 860px){
  .about__grid{ grid-template-columns: 1fr; gap: 30px; }
  .about__col{ padding: 30px 24px; }
}

/* FAQ · accordion */
.faq__list{
  max-width: 1000px;
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(217,180,106,.15);
}
.faq__item{
  border-bottom: 1px solid rgba(217,180,106,.15);
  transition: background .3s;
}
.faq__item:hover{ background: rgba(217,180,106,.03); }
.faq__item summary{
  padding: 28px 60px 28px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(19px, 2.2vw, 28px);
  line-height: 1.3;
  color: var(--paper);
  position: relative;
  transition: color .3s;
}
.faq__item summary::-webkit-details-marker{ display: none; }
.faq__item summary::marker{ display: none; }
.faq__item summary::after{
  content:"+";
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 32px;
  color: var(--gold);
  transition: transform .35s var(--ease-out);
}
.faq__item[open] summary::after{ content:"−"; }
.faq__item[open] summary{ color: var(--gold); }
.faq__answer{
  padding: 0 60px 32px 0;
  display: grid;
  gap: 14px;
}
.faq__answer p{
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.65;
  color: rgba(237,228,207,.75);
}
.faq__answer p strong{ color: var(--gold); font-weight: 500; letter-spacing: .05em; }
.faq__answer p[lang="en"]{ color: rgba(237,228,207,.55); font-style: italic; }
.faq__answer a{ color: var(--gold); border-bottom: 1px solid currentColor; }

@media (max-width: 640px){
  .faq__item summary{ font-size: 17px; padding-right: 40px; }
  .faq__answer{ padding-right: 0; }
}

/* =========================================================================
   PART IX · PIN LAYOUT FIXES — force art cells to actually fill the pin
   ========================================================================= */

/* --- CRAFT: force stage + art to stretch full height of the pin --- */
.craft__scene{
  align-items: stretch !important;        /* was: center — collapsed row 2 to intrinsic */
}
.craft__art{
  align-self: stretch !important;
  height: 100% !important;
  min-height: 55vh !important;
  width: 100%;
}
.craft__num, .craft__name{ align-self: end; }
.craft__cap{ align-self: start; }

/* --- SHOWCASE: rebuild piece layout so the art cell dominates & slides --- */
.showcase__piece{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 640px) minmax(0, 1fr) !important;
  grid-template-rows: auto 1fr auto !important;
  gap: 30px 40px !important;
  align-items: stretch !important;
  justify-items: center !important;
  padding: 20px 0 !important;
  will-change: transform, opacity;
}
.showcase__no{
  grid-column: 1; grid-row: 1;
  justify-self: end; align-self: end;
}
.showcase__name{
  grid-column: 1; grid-row: 2;
  justify-self: end; align-self: center;
  text-align: right;
  padding-right: 20px;
}
.showcase__art{
  grid-column: 2 !important;
  grid-row: 1 / -1 !important;
  align-self: center !important;
  justify-self: center !important;
  height: auto !important;
  width: 100% !important;
  max-width: 640px !important;
  aspect-ratio: 4 / 5;
  display: grid !important;
  place-items: center !important;
  max-height: 78vh !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  animation: none !important;
}
.showcase--paper .showcase__art{
  background: #ede4cf !important;
  padding: 30px !important;
  border: 1px solid rgba(138,95,26,.2) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.35) !important;
}
.showcase__art img{
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  mix-blend-mode: normal !important;
  animation: none !important;
  filter: none !important;
}
.showcase__meta{
  grid-column: 3; grid-row: 2;
  justify-self: start; align-self: center;
  text-align: left;
  padding-left: 20px;
  min-width: 200px;
}
@media (max-width: 860px){
  .showcase__piece{
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto 1fr auto !important;
  }
  .showcase__no, .showcase__name, .showcase__meta{
    grid-column: 1 !important; grid-row: auto !important;
    justify-self: start !important; text-align: left !important;
    padding: 0 !important;
  }
  .showcase__art{ grid-row: auto !important; max-height: 50vh !important; }
}

/* =========================================================================
   PART X · LANGUAGE SWITCHER (nav)
   ========================================================================= */
.nav__right{
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav__lang{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(237,228,207,.6);
  padding: 12px 12px;
  border: 1px solid rgba(217,180,106,.25);
  transition: color .3s, border-color .3s, background .3s;
}
.nav__lang:hover{
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(217,180,106,.06);
}