/* Rayn — Signature differentiator: "Shop the Look"  (Kai)
   Self-contained, mounted into <section id="signature">. Every rule scoped under #signature.
   Their styled vignettes are the gold asset: tap a hotspot on the vignette to reveal the piece.
   Airy, elevated modern-farmhouse. The scene is a swap-ready placeholder (a real vignette photo
   drops into --scene-img); the hotspots + reveal card carry the interaction. NO review count.
   Local palette scoped to #signature. */

#signature{
  --rn-greige:#B9BDB9; --rn-white:#F2F0EA; --rn-charcoal:#1A1A1A; --rn-rattan:#B98A5E;
  --rn-leaf:#7A8A5F; --rn-brass:#B08D57; --rn-paper:#FBFAF6; --rn-ink:#26261F;
}

#signature .stl{
  max-width:72rem; margin-inline:auto; padding:clamp(1.5rem, 4vw, 2.6rem);
  border-radius:14px; color:var(--rn-ink); background:var(--rn-paper);
  box-shadow:0 12px 34px rgba(38,38,31,.12), inset 0 0 0 1px rgba(38,38,31,.06);
}
#signature .stl__eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--rn-brass); margin:0 0 .4rem;
}
#signature .stl__title{
  margin:0 0 1.2rem; font-family:Georgia,"Times New Roman",serif; font-weight:600;
  font-size:clamp(1.6rem, 1.1rem + 2.2vw, 2.5rem); color:var(--rn-charcoal);
}
#signature .stl__layout{ display:grid; gap:1.3rem; grid-template-columns:1fr; }

#signature .stl__scene{
  position:relative; aspect-ratio:16/11; border-radius:10px; overflow:hidden;
  background:
    var(--scene-img, none),
    radial-gradient(80% 60% at 72% 30%, rgba(176,141,87,.16), transparent 60%),
    linear-gradient(160deg, var(--rn-white) 0%, var(--rn-greige) 100%);
  background-size:cover; background-position:center;
  box-shadow:inset 0 0 0 1px rgba(38,38,31,.08);
}
#signature .stl__scene::after{  /* a soft styled-corner suggestion so the empty scene still reads */
  content:""; position:absolute; right:0; bottom:0; width:44%; height:64%;
  background:linear-gradient(160deg, transparent, rgba(122,138,95,.18));
  border-top-left-radius:40% 60%;
}
#signature .stl__hotspot{
  position:absolute; width:1.9rem; height:1.9rem; transform:translate(-50%,-50%); cursor:pointer;
  border:2px solid var(--rn-white); border-radius:50%; background:rgba(26,26,26,.78); color:var(--rn-white);
  font-size:1rem; line-height:1; display:flex; align-items:center; justify-content:center; z-index:2;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
#signature .stl__hotspot::before{
  content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(242,240,234,.7);
  animation:stl-pulse 2.2s ease-out infinite;
}
@keyframes stl-pulse{ 0%{ transform:scale(.7); opacity:.9 } 100%{ transform:scale(1.5); opacity:0 } }
#signature .stl__hotspot:hover, #signature .stl__hotspot:focus-visible{ background:var(--rn-charcoal); outline:2px solid var(--rn-brass); outline-offset:2px; }
#signature .stl__hotspot.is-on{ background:var(--rn-brass); }

#signature .stl__card{
  align-self:center; padding:1.1rem 1.2rem; border-radius:10px;
  background:var(--rn-white); border:1px solid rgba(38,38,31,.1); min-height:6rem;
}
#signature .stl__card-kicker{ font-size:.66rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--rn-leaf); }
#signature .stl__card-name{ display:block; margin:.35rem 0 .35rem; font-family:Georgia,serif; font-weight:600; font-size:1.35rem; color:var(--rn-charcoal); }
#signature .stl__card-blurb{ margin:0; color:#4d4d44; font-size:.96rem; line-height:1.45; }

@media (min-width:760px){
  #signature .stl__layout{ grid-template-columns:1.4fr .9fr; align-items:stretch; }
  #signature .stl__scene{ aspect-ratio:4/3; }
}

@media (prefers-reduced-motion:reduce){
  #signature .stl__hotspot::before{ animation:none; }
}