/* =============================================================
   INTERMEDIARY ARTS- REDESIGN
   A dusky candlelit still-life rooted in the current site's DNA.
   Color, depth, engagement, finish.
   ============================================================= */

/* Sparky Dream (Letterhend Studio)- the house face, licensed via
   Fontspring (April 2026), self-hosted. Ligatures and kerning ship
   in the file; swash alternates were not part of this webfont, so
   there is nothing extra to enable beyond liga/kern (both on by
   default). Fallbacks below cover loading and the decorative
   glyphs (star, moon, arrows) Sparky Dream does not carry. */
@font-face {
  font-family: 'Sparky Dream';
  src: url('sparky-dream.woff2') format('woff2'),
       url('sparky-dream.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Core palette- deep plum with candlelight warmth */
  --ink-deep:    #0f0712;    /* near-black with violet undertone */
  --plum-900:    #1a0f24;
  --plum-800:    #241431;
  --plum-700:    #30193f;
  --plum-600:    #3d1f4e;
  --aubergine:   #4a2456;
  --mauve-ash:   #a085a8;

  /* Warmth- candlelight, dried petal, worn gilt */
  --candle:      #ffc079;    /* flame core */
  --ember:       #ff9340;    /* glow */
  --gilt:        #d9b26a;    /* worn gold */
  --gilt-bright: #f2cf88;
  --gilt-deep:   #8a6a3a;
  --dried-rose:  #b97d8d;
  --lavender:    #b8a1c9;

  /* Text */
  --paper:       #eedfab;    /* light candlelit yellow- was #f3e7d3 off-white then #f0e2bd, nudged yellower on request; the off-white read as jarring white against the room (Tillie, July 2026) */
  --paper-dim:   #d9c6a8;
  --ink-body:    #e9d9b8;

  /* Type- Sparky Dream everywhere (Tillie's favorite, July 2026);
     the previous faces stay as fallbacks while the font loads and
     for glyphs Sparky Dream lacks. Header images are baked art and
     unaffected. */
  --f-script: "Sparky Dream", "Great Vibes", "Italianno", cursive;
  --f-display: "Sparky Dream", "Cinzel", "Cormorant Garamond", serif;
  --f-body: "Sparky Dream", "Cormorant Garamond", "EB Garamond", Georgia, serif;

  /* Rhythm */
  --rail: min(1200px, 92vw);
}

* { box-sizing: border-box; }
/* picture wrappers exist only to offer webp- they must not affect layout */
picture { display: contents; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--f-body);
  color: var(--ink-body);
  background: var(--ink-deep);
  overflow-x: hidden;
  min-height: 100vh;
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===== ATMOSPHERIC BACKGROUND =============================== */
/* Multiple fixed layers to create depth: base gradient,
   warm window-glow in one corner, soft mist, plus the
   drifting dust-motes in <canvas>. */
.bg-stage {
  position: fixed; inset: 0; z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 60% at 85% 8%,
      rgba(255, 176, 92, 0.14) 0%,
      rgba(255, 140, 60, 0.06) 28%,
      rgba(0,0,0,0) 60%),
    radial-gradient(ellipse 70% 50% at 10% 90%,
      rgba(140, 80, 160, 0.18) 0%,
      rgba(60, 25, 80, 0.1) 40%,
      rgba(0,0,0,0) 70%),
    linear-gradient(180deg,
      #0c0610 0%,
      #180a22 14%,
      #241330 32%,
      #2f1840 52%,
      #261234 74%,
      #140820 100%);
}
.bg-stage::after {
  /* subtle film grain */
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  opacity: 0.35;
  mix-blend-mode: overlay;
}

/* Vignette at edges */
.bg-vignette {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 100% 100% at 50% 50%,
    transparent 45%,
    rgba(0,0,0,0.55) 100%);
}

/* Cursor-following warm aura */
.aura {
  position: fixed; z-index: -2;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 180, 100, 0.10) 0%,
    rgba(255, 140, 80, 0.04) 30%,
    rgba(0,0,0,0) 65%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: blur(8px);
  transition: opacity 600ms ease;
  opacity: 0;
}
body.aura-on .aura { opacity: 1; }

/* Dust-mote canvas- sits ABOVE the hero placeholder but BELOW content */
#motes {
  position: fixed; inset: 0; z-index: 5;
  pointer-events: none;
}

/* ===== TOP NAV =============================================== */
.topnav {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 40px;
  z-index: 50;
  transition: background 400ms ease, backdrop-filter 400ms ease;
}
.topnav.scrolled {
  background: linear-gradient(180deg, rgba(12,6,16,0.75), rgba(12,6,16,0));
  backdrop-filter: blur(8px);
}
.wordmark {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.28em;
  color: var(--gilt-bright);
  line-height: 1.1;
}
.wordmark .small {
  display: block;
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--gilt);
  opacity: 0.85;
}
.topnav .right { display: flex; align-items: center; gap: 28px; }
.sigil-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  color: var(--gilt);
  cursor: pointer;
  transition: color 200ms, transform 300ms;
}
.sigil-btn:hover { color: var(--gilt-bright); transform: rotate(15deg); }
.sigil-btn svg { width: 20px; height: 20px; }
.avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, #5a3366, #8a5a6e);
  border: 1.5px solid var(--gilt);
  box-shadow: 0 0 20px rgba(217, 178, 106, 0.3);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.avatar::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.15), transparent 60%);
}
.avatar-dot {
  position: absolute; bottom: 2px; right: 2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #d9546a;
  border: 1.5px solid var(--plum-900);
}

/* ===== HERO ================================================== */
.hero {
  min-height: auto;
  display: block;
  padding: 40px 0 20px;
  position: relative;
  overflow: visible;
}
.hero-image-wrap {
  position: relative;
  width: 100%;
  max-width: 1880px;
  margin: 0 auto;
  padding: 0 12px;
}
.hero-image-wrap img,
.hero-image-wrap .tr-video,
.hero-image-wrap .tr-sparks {
  display: block;
  width: 100%;
  height: auto;
  /* Two masks, intersected: radial softens corners, linears soften sides/top/bottom */
  -webkit-mask:
    radial-gradient(ellipse 75% 70% at 50% 50%, black 0%, rgba(0,0,0,0.9) 55%, rgba(0,0,0,0.5) 85%, transparent 100%),
    linear-gradient(90deg,  transparent 0%, black 15%, black 85%, transparent 100%),
    linear-gradient(180deg, transparent 0%, black 15%, black 85%, transparent 100%);
  -webkit-mask-composite: source-in, source-in;
          mask:
    radial-gradient(ellipse 75% 70% at 50% 50%, black 0%, rgba(0,0,0,0.9) 55%, rgba(0,0,0,0.5) 85%, transparent 100%),
    linear-gradient(90deg,  transparent 0%, black 15%, black 85%, transparent 100%),
    linear-gradient(180deg, transparent 0%, black 15%, black 85%, transparent 100%);
          mask-composite: intersect, intersect;
}
.hero-image-wrap::after {
  display: none;
}

/* Small playbill credit for the home-page ambient harp track.
   Sits between the hero image and the hero-inner copy- subtle, charming,
   present without being loud. Edit the wording in Intermediary Arts.html
   when the track changes. */
.hero-harp-credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  width: min(640px, 88%);
  margin: 14px auto 0;
  padding: 0;
  font-family: var(--f-body);
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0.05em;
  color: var(--paper-dim);
  opacity: 0.78;
  text-align: center;
}
.hero-harp-credit em {
  font-style: italic;
  color: var(--gilt);
  font-weight: 500;
}
.hero-harp-credit-text {
  white-space: nowrap;
}
.hero-harp-credit-rule {
  flex: 1;
  height: 1px;
  max-width: 90px;
  background: linear-gradient(to right, transparent, rgba(217, 178, 106, 0.32), transparent);
}
@media (max-width: 520px) {
  .hero-harp-credit {
    font-size: 12px;
    gap: 0.55rem;
  }
  .hero-harp-credit-text { white-space: normal; }
  .hero-harp-credit-rule { max-width: 40px; }
}

.hero-inner-below {
  position: relative;
  z-index: 2;
  width: min(960px, 92%);
  margin: 24px auto 0;
  padding: 0 20px;
  text-align: center;
}
.hero-credo {
  font-family: var(--f-script);
  font-weight: 400;
  font-size: clamp(44px, 6.5vw, 84px);
  line-height: 1.5;
  margin: 0 0 14px;
  padding: 0.25em 24px 0.15em;
  color: transparent;
  background: linear-gradient(180deg,
    #f8e6b5 0%,
    #f2cf88 30%,
    #d9a155 60%,
    #a87736 90%,
    #7a5226 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 3px 18px rgba(255, 180, 90, 0.22));
  letter-spacing: 0.01em;
  overflow: visible;
}

/* Photographic still-life backdrop (receives user's uploaded image) */
.hero-photo {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-photo.has-image {
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}
.hero-photo-darken {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(10, 5, 16, 0) 0%,
      rgba(10, 5, 16, 0) 50%,
      rgba(10, 5, 16, 0.55) 85%,
      rgba(10, 5, 16, 0.92) 100%);
  -webkit-mask: linear-gradient(180deg, black 0%, black 70%, transparent 100%);
          mask: linear-gradient(180deg, black 0%, black 70%, transparent 100%);
}
.hero-inner { position: relative; z-index: 2; }

/* Painterly placeholder: dusk floral impression while awaiting real photo */
/* Now kept very soft so it blends into the body gradient without a hard seam */
.hero-photo-placeholder {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 100%,
      rgba(80, 40, 100, 0.35),
      transparent 80%),
    radial-gradient(ellipse 50% 60% at 15% 100%,
      rgba(180, 100, 160, 0.18), transparent 70%),
    radial-gradient(ellipse 50% 60% at 85% 100%,
      rgba(120, 80, 160, 0.18), transparent 70%);
  filter: blur(1px);
  -webkit-mask: linear-gradient(180deg, black 0%, black 55%, transparent 95%);
          mask: linear-gradient(180deg, black 0%, black 55%, transparent 95%);
}
.bokeh {
  position: absolute; border-radius: 50%;
  filter: blur(18px);
  mix-blend-mode: screen;
  opacity: 0.75;
}
.bokeh.b1 { width: 120px; height: 120px; left: 12%; bottom: 8%;
  background: radial-gradient(circle, rgba(220,160,200,0.9), transparent 60%); }
.bokeh.b2 { width: 80px; height: 80px; left: 24%; bottom: 18%;
  background: radial-gradient(circle, rgba(170,130,200,0.8), transparent 60%); }
.bokeh.b3 { width: 140px; height: 140px; left: 72%; bottom: 6%;
  background: radial-gradient(circle, rgba(200,140,190,0.85), transparent 60%); }
.bokeh.b4 { width: 90px; height: 90px; left: 86%; bottom: 22%;
  background: radial-gradient(circle, rgba(180,150,220,0.7), transparent 60%); }
.bokeh.b5 { width: 60px; height: 60px; left: 42%; bottom: 14%;
  background: radial-gradient(circle, rgba(230,200,220,0.8), transparent 60%); }
.bokeh.b6 { width: 100px; height: 100px; left: 58%; bottom: 4%;
  background: radial-gradient(circle, rgba(210,160,190,0.8), transparent 60%); }
.bokeh.b7 { width: 50px; height: 50px; left: 6%;  bottom: 32%;
  background: radial-gradient(circle, rgba(180,140,200,0.6), transparent 60%); }
.bokeh.b8 { width: 70px; height: 70px; left: 94%; bottom: 40%;
  background: radial-gradient(circle, rgba(200,170,220,0.6), transparent 60%); }

.candle-glow {
  position: absolute; border-radius: 50%;
  filter: blur(16px);
  mix-blend-mode: screen;
  animation: flicker 4s ease-in-out infinite;
}
.candle-glow.c1 { width: 180px; height: 220px; left: 8%; top: 40%;
  background: radial-gradient(ellipse, rgba(255,180,100,0.7), rgba(255,140,60,0.3) 40%, transparent 70%); }
.candle-glow.c2 { width: 160px; height: 200px; right: 10%; top: 35%;
  background: radial-gradient(ellipse, rgba(255,190,120,0.65), rgba(255,150,80,0.25) 40%, transparent 70%);
  animation-delay: -1.5s;
}
@keyframes flicker {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  45% { opacity: 1; transform: scale(1.04); }
  55% { opacity: 0.9; transform: scale(0.98); }
}
.window-warmth {
  position: absolute; top: -10%; right: -5%;
  width: 50%; height: 70%;
  background: radial-gradient(ellipse at top right,
    rgba(255, 200, 140, 0.35),
    rgba(255, 170, 100, 0.15) 40%,
    transparent 70%);
  filter: blur(8px);
  mix-blend-mode: screen;
}
.photo-note {
  position: absolute; top: 20px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-display);
  font-size: 9px;
  letter-spacing: 0.32em;
  color: rgba(243, 231, 211, 0.3);
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1px dashed rgba(243, 231, 211, 0.2);
  border-radius: 2px;
}
.hero-photo.has-image .hero-photo-placeholder { display: none; }

/* Parchment banner wrap */
.parchment-wrap {
  width: min(900px, 88vw);
  margin: 0 auto 36px;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.6));
  transition: transform 1200ms cubic-bezier(.2,.7,.2,1);
}
.parchment-wrap:hover {
  transform: translateY(-4px) rotate(-0.3deg);
}
.parchment { width: 100%; height: auto; display: block; }
.hero-inner {
  text-align: center;
  position: relative;
  z-index: 2;
  max-width: 900px;
}

/* Small superscript eyebrow */
.eyebrow {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.48em;
  color: var(--gilt);
  text-transform: uppercase;
  margin-bottom: 36px;
  display: inline-flex; align-items: center; gap: 18px;
}
.eyebrow::before, .eyebrow::after {
  content: ""; width: 40px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gilt), transparent);
}

/* Heart sigil- an elegant re-imagining, smaller scale */
.sigil {
  position: relative;
  width: 420px; height: 380px;
  margin: 0 auto 28px;
}
.sigil-glow {
  position: absolute; inset: -40px;
  background: radial-gradient(ellipse 60% 55% at 50% 50%,
    rgba(255, 170, 90, 0.28),
    rgba(200, 120, 160, 0.15) 40%,
    transparent 70%);
  filter: blur(20px);
  animation: breathe 8s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

.sigil svg { width: 100%; height: 100%; display: block; position: relative; }

/* Headline- "Emerge Enlightened." */
.hero-script {
  font-family: var(--f-script);
  font-size: clamp(48px, 8vw, 120px);
  line-height: 1.3;
  padding: 0.25em 24px 0.35em;
  margin: 0;
  word-break: keep-all;
  overflow-wrap: normal;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
  display: block;
  color: transparent;
  background: linear-gradient(180deg,
    #f8e6b5 0%,
    #f2cf88 25%,
    #d9a155 55%,
    #a87736 85%,
    #7a5226 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 4px 24px rgba(255, 180, 90, 0.25));
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.hero-sub {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.38em;
  color: var(--paper-dim);
  margin: 22px 0 0;
  text-transform: uppercase;
}
.hero-sub span { color: var(--gilt-bright); }

.hero-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin: 36px auto 30px;
  opacity: 0.85;
}
.hero-divider::before, .hero-divider::after {
  content: ""; width: 80px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gilt));
}
.hero-divider::after {
  background: linear-gradient(90deg, var(--gilt), transparent);
}
.hero-divider-diamond {
  width: 7px; height: 7px;
  background: var(--gilt-bright);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(242, 207, 136, 0.7);
}

.hero-lede {
  font-family: var(--f-body);
  font-style: italic;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.75;
  color: var(--ink-body);
  max-width: 560px;
  margin: 0 auto 44px;
  text-wrap: pretty;
  opacity: 0.95;
}

/* Nav links under hero- refined */
.hero-nav {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 0;
  margin-top: 20px;
}
.hero-nav a {
  font-family: var(--f-display);
  font-size: 10.5px;
  letter-spacing: 0.28em;
  color: var(--paper-dim);
  text-decoration: none;
  padding: 14px 18px;
  position: relative;
  text-transform: uppercase;
  transition: color 300ms;
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .hero-nav a { padding: 12px 14px; letter-spacing: 0.22em; font-size: 10px; }
}
.hero-nav a:hover { color: var(--gilt-bright); }
.hero-nav a + a::before {
  content: ""; position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--gilt);
  opacity: 0.6;
}

/* Scroll cue */
.scroll-cue {
  position: absolute; bottom: 32px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-display);
  font-size: 9px;
  letter-spacing: 0.42em;
  color: var(--gilt);
  opacity: 0.6;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.scroll-cue::after {
  content: ""; width: 1px; height: 40px;
  background: linear-gradient(180deg, var(--gilt), transparent);
  animation: drip 2.4s ease-in-out infinite;
}
@keyframes drip {
  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; }
}

/* ===== SECTION CHROME ======================================== */
.section {
  position: relative;
  padding: 120px 20px;
}
.section-inner { width: var(--rail); margin: 0 auto; position: relative; }
.section.counter-strip { padding-top: 40px; }
.section.counter-strip .section-head { margin-bottom: 48px; }

.section-head { text-align: center; margin-bottom: 72px; display: flex; flex-direction: column; align-items: center; }
.section-eyebrow {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.48em;
  color: var(--gilt);
  text-transform: uppercase;
  margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 16px;
}
.section-eyebrow::before, .section-eyebrow::after {
  content: ""; width: 28px; height: 1px;
  background: var(--gilt); opacity: 0.6;
}
.section-title {
  font-family: var(--f-script);
  font-size: clamp(48px, 6vw, 92px);
  line-height: 1.25;
  padding: 0.2em 24px 0.3em;
  margin: 0;
  color: transparent;
  background: linear-gradient(180deg, #f8e6b5, #d9a155 55%, #8a5e2a);
  -webkit-background-clip: text;
  background-clip: text;
  font-weight: 400;
  filter: drop-shadow(0 3px 18px rgba(255, 180, 90, 0.18));
  overflow: visible;
  display: inline-block;
  max-width: 100%;
  position: relative;
}

/* ---- Sparkles placed near script titles ---- */
.sparkle-field {
  position: relative;
  display: inline-block;
}
.sparkle {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  line-height: 0;
  z-index: 3;
  transform-origin: center;
  will-change: opacity, transform;
  animation: sparkleTwinkle var(--sp-dur, 3.2s) ease-in-out infinite;
  animation-delay: var(--sp-delay, 0s);
  filter: drop-shadow(0 0 3px rgba(255, 220, 150, 0.85))
          drop-shadow(0 0 8px rgba(255, 190, 110, 0.55));
}
.sparkle svg {
  display: block;
  width: var(--sp-size, 10px);
  height: var(--sp-size, 10px);
}
@keyframes sparkleTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.15) rotate(0deg); }
  40%      { opacity: 0.85; transform: scale(0.9) rotate(35deg); }
  55%      { opacity: 1;    transform: scale(1) rotate(45deg); }
  72%      { opacity: 0.5;  transform: scale(0.75) rotate(60deg); }
}
.section-title-serif {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 68px);
  letter-spacing: 0.04em;
  color: var(--gilt-bright);
  margin: 0;
  text-transform: uppercase;
}
.section-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin: 22px auto 26px;
}
.section-divider::before, .section-divider::after {
  content: ""; width: 60px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gilt));
}
.section-divider::after { background: linear-gradient(90deg, var(--gilt), transparent); }
.section-divider-orn {
  color: var(--gilt); font-size: 12px; transform: translateY(-1px);
  letter-spacing: 0.5em;
}
.section-lede {
  max-width: 640px; margin: 0 auto;
  font-family: var(--f-body);
  font-style: italic;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.7;
  color: var(--ink-body);
  text-wrap: pretty;
}

/* ===== COUNTER STRIP (FROM THE COUNTER TODAY) ================ */
.counter-strip {
  padding: 80px 20px 40px;
}
.counter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  width: var(--rail);
  margin: 0 auto;
}
.counter-card {
  position: relative;
  padding: 42px 32px 36px;
  text-align: center;
  background:
    radial-gradient(ellipse 130% 80% at 50% 0%,
      rgba(217, 178, 106, 0.08),
      transparent 60%),
    linear-gradient(180deg,
      rgba(255, 245, 220, 0.04),
      rgba(40, 20, 55, 0.15));
  border: 1px solid rgba(217, 178, 106, 0.22);
  border-radius: 3px;
  backdrop-filter: blur(6px);
  overflow: hidden;
  transition: transform 500ms cubic-bezier(.2,.7,.2,1), border-color 400ms, box-shadow 500ms;
}
.counter-card::before {
  /* corner flourishes */
  content: "";
  position: absolute; inset: 8px;
  border: 1px solid rgba(217, 178, 106, 0.14);
  pointer-events: none;
  border-radius: 2px;
}
.counter-card::after {
  /* light shift on hover */
  content: "";
  position: absolute; inset: -2px;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 200, 120, 0.18),
    transparent 45%);
  opacity: 0;
  transition: opacity 400ms;
  pointer-events: none;
}
.counter-card:hover {
  border-color: rgba(242, 207, 136, 0.5);
  box-shadow:
    0 20px 50px rgba(0,0,0,0.4),
    0 0 40px rgba(255, 170, 80, 0.15);
  transform: translateY(-4px);
}
.counter-card:hover::after { opacity: 1; }

.counter-label {
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.38em;
  color: var(--gilt);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.counter-body {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 15px;
  line-height: 1.72;
  color: var(--paper-dim);
  margin: 0 0 18px;
}
.counter-meta {
  font-family: var(--f-display);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--gilt);
  text-transform: uppercase;
  opacity: 0.85;
}

/* ===== FRAGRANCES ============================================ */
.fragrance-frame {
  position: relative;
  margin: 40px auto 0;
  padding: 64px 56px 56px;
  max-width: 880px;
  border: 1px solid rgba(217, 178, 106, 0.3);
  border-radius: 4px;
  background:
    linear-gradient(180deg,
      rgba(40, 20, 55, 0.45),
      rgba(20, 10, 30, 0.2));
  backdrop-filter: blur(4px);
  box-shadow:
    inset 0 0 60px rgba(0,0,0,0.35),
    0 30px 80px rgba(0,0,0,0.45);
}
/* Ornate gold corners */
.fragrance-frame::before,
.fragrance-frame::after {
  content: "";
  position: absolute;
  width: 60px; height: 60px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23d9b26a' stroke-width='0.8'><path d='M2 30 Q2 2 30 2' opacity='0.8'/><path d='M8 30 Q8 8 30 8' opacity='0.5'/><circle cx='6' cy='6' r='1.5' fill='%23d9b26a' stroke='none'/><path d='M14 4 Q20 10 14 16 Q8 10 14 4' fill='%23d9b26a' fill-opacity='0.2'/></svg>");
  background-repeat: no-repeat;
}
.fragrance-frame::before { top: -1px; left: -1px; }
.fragrance-frame::after {
  bottom: -1px; right: -1px;
  transform: rotate(180deg);
}

/* The illustrated product card */
.product-illustration {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  max-width: 460px;
  margin: 0 auto;
  background: #1a0f0a;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.7),
    0 0 0 1px rgba(30, 18, 14, 0.9);
  transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(.2,.7,.2,1);
}
.product-illustration img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.product-illustration:not(:has(img))::before {
  /* Placeholder for cards without a real illustration image */
  content: "";
  position: absolute; inset: 0;
  background:
    /* subtle confetti- flowers/chocolates hint */
    radial-gradient(circle at 12% 28%, rgba(200, 80, 100, 0.4) 0 4px, transparent 5px),
    radial-gradient(circle at 88% 22%, rgba(255, 200, 100, 0.5) 0 3px, transparent 4px),
    radial-gradient(circle at 18% 78%, rgba(140, 90, 60, 0.6) 0 5px, transparent 6px),
    radial-gradient(circle at 82% 82%, rgba(220, 160, 80, 0.45) 0 4px, transparent 5px),
    radial-gradient(circle at 50% 90%, rgba(255, 215, 140, 0.5) 0 6px, transparent 7px),
    radial-gradient(ellipse 40% 55% at 50% 55%, rgba(60, 40, 28, 0.6), transparent 70%);
}
.product-illustration-content {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: rgba(243, 231, 211, 0.4);
  font-family: var(--f-body);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: center;
}
.product-illustration-content b {
  display: block;
  font-family: var(--f-script);
  font-style: normal;
  font-size: 52px;
  color: rgba(255, 230, 180, 0.85);
  font-weight: 400;
  letter-spacing: 0;
  margin-top: 6px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.product-illustration-content small {
  display: block;
  opacity: 0.7;
  margin-bottom: 4px;
}
/* Ornate inner border */
.product-illustration-border {
  position: absolute; inset: 12px;
  border: 1px solid rgba(217, 178, 106, 0.4);
  border-radius: 2px;
  pointer-events: none;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
}
.product-illustration-name-plate {
  position: absolute; bottom: 20px; left: 50%;
  transform: translateX(-50%);
  padding: 6px 40px;
  background: linear-gradient(180deg, #d9a155, #8a5e2a);
  color: #2a1505;
  font-family: var(--f-script);
  font-size: 24px;
  border-radius: 2px;
  border: 1px solid rgba(60, 30, 10, 0.5);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,230,180,0.6);
  letter-spacing: 0.02em;
}

/* Product meta beneath */
.product-name {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.32em;
  color: var(--gilt-bright);
  margin-top: 36px;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.product-kind {
  font-family: var(--f-body);
  font-style: italic;
  color: var(--paper-dim);
  font-size: 14px;
  margin-bottom: 22px;
  letter-spacing: 0.06em;
}
.product-desc {
  font-size: 17px; line-height: 1.72;
  color: var(--ink-body);
  margin: 0 0 18px;
  max-width: 60ch;
  text-wrap: pretty;
}
.product-notes {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 14px;
  color: var(--dried-rose);
  opacity: 0.85;
  margin-bottom: 26px;
  letter-spacing: 0.03em;
}
.product-price {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 26px;
  color: var(--gilt-bright);
  margin-bottom: 8px;
}
.product-stock {
  font-family: var(--f-body);
  font-style: italic;
  color: var(--ember);
  font-size: 14px;
  margin-bottom: 22px;
  opacity: 0.9;
}

/* Add-to-cart- refined gold button */
.gilt-btn {
  display: inline-block;
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gilt-bright);
  background: transparent;
  border: 1px solid var(--gilt);
  padding: 16px 38px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 300ms, letter-spacing 400ms;
  text-decoration: none;
}
.gilt-btn::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--gilt-deep), var(--gilt), var(--gilt-bright), var(--gilt));
  background-size: 200% 100%;
  transform: translateY(100%);
  transition: transform 400ms cubic-bezier(.2,.7,.2,1);
  z-index: -1;
}
.gilt-btn:hover {
  color: #2a1505;
  letter-spacing: 0.44em;
}
.gilt-btn:hover::before {
  transform: translateY(0);
  animation: shimmer 2s ease infinite;
}
@keyframes shimmer {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}

/* Ghost variant- borderless invite-style link, no filled bg on hover */
.gilt-btn-ghost {
  border: none;
  padding: 10px 0;
  color: var(--gilt-bright);
  letter-spacing: 0.32em;
  font-size: 12px;
  border-bottom: 1px solid rgba(217, 178, 106, 0.35);
  border-radius: 0;
}
.gilt-btn-ghost::before { display: none; }
.gilt-btn-ghost:hover {
  color: var(--gilt-bright);
  letter-spacing: 0.38em;
  border-bottom-color: var(--gilt-bright);
  background: transparent;
}

.reviews-row {
  display: flex; align-items: center; gap: 14px;
  margin-top: 28px;
  color: var(--gilt);
  font-size: 14px;
  opacity: 0.85;
}
.stars { letter-spacing: 2px; color: var(--gilt); opacity: 0.6; }
.review-links {
  margin-left: auto;
  display: flex; gap: 20px;
  font-family: var(--f-display);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--gilt);
  text-transform: uppercase;
}
.review-links a {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms, color 200ms;
}
.review-links a:hover { color: var(--gilt-bright); border-color: var(--gilt); }

/* ===== INNER TABLE ========================================== */
.inner-table {
  padding: 140px 20px;
  position: relative;
}
.inner-table::before {
  /* a soft vertical glow lane */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 40% 80% at 50% 50%,
      rgba(255, 150, 80, 0.07),
      transparent 70%);
  pointer-events: none;
}

.inner-table-layout {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 48px;
  align-items: stretch;
  width: min(1080px, 92vw);
  margin: 0 auto;
}

.subscribe-card {
  position: relative;
  padding: 56px 48px;
  display: flex; flex-direction: column; justify-content: center;
  background:
    linear-gradient(180deg,
      rgba(45, 22, 60, 0.55),
      rgba(20, 10, 30, 0.3));
  border: 1px solid rgba(217, 178, 106, 0.3);
  border-radius: 3px;
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.3);
}
.subscribe-card::before, .subscribe-card::after {
  content: ""; position: absolute;
  width: 36px; height: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='%23d9b26a' stroke-width='0.6'><path d='M2 18 Q2 2 18 2' /><path d='M6 18 Q6 6 18 6'/><circle cx='4' cy='4' r='1' fill='%23d9b26a'/></svg>");
}
.subscribe-card::before { top: -1px; left: -1px; }
.subscribe-card::after { bottom: -1px; right: -1px; transform: rotate(180deg); }

.tier-label {
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: 0.42em;
  color: var(--gilt);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.tier-price {
  font-family: var(--f-script);
  font-size: 72px; line-height: 1;
  color: transparent;
  background: linear-gradient(180deg, #f8e6b5, #d9a155);
  -webkit-background-clip: text; background-clip: text;
  font-weight: 400;
  margin-bottom: 4px;
}
.tier-price small {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 18px;
  color: var(--paper-dim);
  background: none;
  -webkit-text-fill-color: var(--paper-dim);
  margin-left: 6px;
}
.tier-list {
  list-style: none;
  padding: 0;
  margin: 36px 0 36px;
  border-top: 1px solid rgba(217, 178, 106, 0.22);
  border-bottom: 1px solid rgba(217, 178, 106, 0.22);
  padding: 24px 0;
}
.tier-list li {
  padding: 10px 0;
  margin: 2px 0;
  font-size: 15px;
  color: var(--ink-body);
  display: flex; gap: 14px;
  align-items: flex-start;
  line-height: 1.55;
}
.tier-list li::before {
  content: "✦";
  color: var(--gilt);
  font-size: 11px;
  margin-top: 4px;
  opacity: 0.85;
}

/* Selkie card stage- supports slide-to-reveal Annual */
.selkie-stage {
  position: relative;
  display: grid; place-items: center;
  padding: 20px;
  perspective: 1200px;
  min-height: 560px;
  /* The card slides 120% rightward on reveal- clip it INSIDE the stage or
     it widens the whole page on mobile and wrecks the layout. clip (not
     hidden) keeps the vertical overflow (the prompt above) visible. */
  overflow-x: clip;
}
.selkie-stage::before {
  /* Altar-light warm backdrop */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%,
      rgba(255, 170, 90, 0.16),
      rgba(160, 80, 130, 0.08) 40%,
      transparent 75%);
  filter: blur(2px);
  pointer-events: none;
}

/* Annual reveal (sits beneath the card, exposed as card slides) */
.annual-reveal {
  position: absolute; inset: 20px;
  padding: 40px 36px;
  display: flex; flex-direction: column; justify-content: center;
  background:
    linear-gradient(180deg,
      rgba(55, 28, 72, 0.55),
      rgba(25, 12, 36, 0.3));
  border: 1px solid rgba(217, 178, 106, 0.3);
  border-radius: 3px;
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.3);
  z-index: 1;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 500ms ease 120ms, transform 600ms cubic-bezier(.2,.7,.2,1) 120ms;
  pointer-events: none;
}
.annual-eyebrow {
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--gilt);
  text-transform: uppercase;
  margin-bottom: 10px;
  opacity: 0.85;
}
.annual-savings {
  font-family: var(--f-body);
  font-style: italic;
  color: var(--dried-rose);
  font-size: 15px;
  margin: -2px 0 20px;
  opacity: 0.95;
}
.annual-list {
  margin: 0 0 24px !important;
  padding: 18px 0 !important;
  font-size: 14px;
}
.annual-list li { padding: 6px 0; font-size: 14px; }
.selkie-stage.revealed .annual-reveal {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.selkie-prompt {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--gilt);
  text-align: center;
  position: absolute;
  top: -12px;
  left: 0; right: 0;
  margin: 0 auto;
  max-width: 520px;
  opacity: 0.92;
  z-index: 5;
  pointer-events: none;
}
.tarot-card {
  position: relative;
  width: 320px; aspect-ratio: 3 / 4.6;
  border-radius: 10px;
  background: #1a2030 center/cover no-repeat;
  background-image: url("selkie-card.png");
  background-image: -webkit-image-set(url("selkie-card.webp") type("image/webp"), url("selkie-card.png") type("image/png"));
  background-image: image-set(url("selkie-card.webp") type("image/webp"), url("selkie-card.png") type("image/png"));
  box-shadow:
    0 40px 80px rgba(0,0,0,0.6),
    0 10px 30px rgba(0,0,0,0.4),
    0 0 0 1px rgba(217, 178, 106, 0.5),
    inset 0 0 0 6px rgba(20, 20, 30, 0.35),
    inset 0 0 0 7px rgba(217, 178, 106, 0.3);
  transform: rotate(-2deg);
  transition: transform 700ms cubic-bezier(.2,.7,.2,1), box-shadow 500ms, opacity 500ms;
  overflow: hidden;
  cursor: grab;
  z-index: 2;
  user-select: none;
  touch-action: pan-y;
}
.tarot-card:active { cursor: grabbing; }
.tarot-card.dragging { transition: none; }
.tarot-card.flown {
  transform: translateX(120%) rotate(10deg);
  opacity: 0.15;
  pointer-events: none;
}
.selkie-stage.revealed .tarot-card {
  transform: translateX(120%) rotate(10deg) scale(0.85);
  opacity: 0;
  pointer-events: none;
}

/* Swipe hint */
.tarot-hint {
  position: absolute; bottom: 20px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  padding: 6px 14px;
  font-family: var(--f-display);
  font-size: 9px;
  letter-spacing: 0.36em;
  color: rgba(243, 231, 211, 0.85);
  background: rgba(20, 14, 30, 0.55);
  border: 1px solid rgba(217, 178, 106, 0.4);
  border-radius: 40px;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 3;
  backdrop-filter: blur(4px);
  animation: hintPulse 2.6s ease-in-out infinite;
}
.tarot-hint-arrow {
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--gilt-bright);
  animation: hintNudge 2s ease-in-out infinite;
}
.tarot-hint-arrow:first-child { animation-delay: 0.15s; }
@keyframes hintPulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}
@keyframes hintNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}
.tarot-card::before,
.tarot-card::after,
.tarot-scroll,
.tarot-tag { display: none; }

.selkie-stage:hover .tarot-card:not(.dragging) {
  box-shadow:
    0 60px 100px rgba(0,0,0,0.7),
    0 20px 40px rgba(255, 170, 90, 0.2),
    0 0 0 1px rgba(242, 207, 136, 0.7),
    inset 0 0 0 6px rgba(20, 20, 30, 0.4),
    inset 0 0 0 7px rgba(242, 207, 136, 0.5);
}

.browsing-note {
  text-align: center;
  margin-top: 68px;
  font-family: var(--f-body);
  font-style: italic;
  color: var(--paper-dim);
  font-size: 16px;
}
.browsing-note strong {
  color: var(--gilt-bright);
  font-weight: 500;
  font-style: normal;
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: 0.32em;
  margin-right: 10px;
  text-transform: uppercase;
}

/* ===== LITTLE FRAGMENTS- CARDS STRIP (candles, teas, etc) == */
.shelf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  width: var(--rail);
  margin: 0 auto;
}
.shelf-card {
  position: relative;
  padding: 38px 28px 34px;
  text-align: center;
  background:
    linear-gradient(180deg,
      rgba(40, 20, 55, 0.3),
      rgba(20, 10, 30, 0.15));
  border: 1px solid rgba(217, 178, 106, 0.2);
  border-radius: 3px;
  backdrop-filter: blur(6px);
  overflow: hidden;
  transition: transform 500ms, border-color 400ms, box-shadow 500ms;
}
.shelf-card:hover {
  transform: translateY(-6px);
  border-color: rgba(242, 207, 136, 0.5);
  box-shadow: 0 30px 60px rgba(0,0,0,0.45), 0 0 40px rgba(255, 170, 80, 0.14);
}
.shelf-card::after {
  content: "";
  position: absolute; inset: -2px;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 200, 120, 0.18),
    transparent 45%);
  opacity: 0;
  transition: opacity 400ms;
  pointer-events: none;
}
.shelf-card:hover::after { opacity: 1; }

.shelf-card h3 {
  font-family: var(--f-display);
  font-size: 13px;
  letter-spacing: 0.38em;
  color: var(--gilt-bright);
  text-transform: uppercase;
  margin: 0 0 18px;
  font-weight: 500;
}
.shelf-card p {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 15px;
  line-height: 1.7;
  color: var(--paper-dim);
  margin: 0 0 16px;
}
.shelf-card .price {
  font-family: var(--f-body);
  font-style: italic;
  color: var(--gilt);
  font-size: 14px;
}

/* ===== FOOTER ================================================ */
.site-foot {
  padding: 100px 20px 60px;
  text-align: center;
  position: relative;
  border-top: 1px solid rgba(217, 178, 106, 0.15);
  margin-top: 80px;
}
.site-foot::before {
  content: "";
  position: absolute; top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 12px; height: 12px;
  background: var(--gilt);
  transform: translateX(-50%) rotate(45deg);
  margin-top: -6px;
  opacity: 0.5;
}
.site-foot .mark {
  font-family: var(--f-script);
  font-size: 42px;
  color: var(--gilt-bright);
  margin-bottom: 16px;
}
.site-foot small {
  font-family: var(--f-display);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--gilt);
  text-transform: uppercase;
  opacity: 0.7;
}

/* ===== REVEAL ON SCROLL =====================================
   Uses a keyframe animation (not a CSS transition) so a pending
   transition can never get stuck at offset 0 after class toggles. */
.reveal {
  opacity: 0;
  transform: translateY(30px);
}
.reveal.in {
  animation: revealIn 900ms cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes revealIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal[data-delay="1"].in { animation-delay: 120ms; }
.reveal[data-delay="2"].in { animation-delay: 240ms; }
.reveal[data-delay="3"].in { animation-delay: 360ms; }

/* ===== TWEAKS PANEL ========================================== */
#tweaks-panel {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 300px;
  padding: 22px 22px 18px;
  background: rgba(24, 12, 32, 0.94);
  border: 1px solid rgba(217, 178, 106, 0.45);
  border-radius: 4px;
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 30px rgba(255, 170, 80, 0.12);
  font-family: var(--f-body);
  color: var(--paper-dim);
  z-index: 100;
  display: none;
}
#tweaks-panel.on { display: block; }
#tweaks-panel h4 {
  font-family: var(--f-display);
  font-size: 11px; letter-spacing: 0.4em;
  color: var(--gilt-bright);
  text-transform: uppercase;
  margin: 0 0 16px;
  text-align: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(217, 178, 106, 0.2);
}
#tweaks-panel label {
  display: block;
  font-family: var(--f-display);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--gilt);
  text-transform: uppercase;
  margin: 14px 0 6px;
}
#tweaks-panel select, #tweaks-panel input[type=range] {
  width: 100%;
  background: rgba(10, 5, 14, 0.7);
  border: 1px solid rgba(217, 178, 106, 0.3);
  color: var(--paper);
  padding: 6px 8px;
  font-family: var(--f-body);
  font-size: 13px;
  border-radius: 2px;
  font-style: italic;
}
#tweaks-panel input[type=range] { padding: 0; accent-color: var(--gilt); }
#tweaks-panel .toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-style: italic;
  color: var(--paper-dim);
  margin-top: 14px;
}
#tweaks-panel .toggle-row input { accent-color: var(--gilt); }

/* ===== PALETTE VARIANTS ===================================== */
body[data-palette="aubergine-ink"] .bg-stage {
  background:
    radial-gradient(ellipse 90% 60% at 85% 8%, rgba(240, 160, 100, 0.15), transparent 60%),
    radial-gradient(ellipse 70% 50% at 10% 90%, rgba(100, 55, 75, 0.2), transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 50%, #2a1018 0%, #180a10 45%, #08050a 85%);
}
body[data-palette="moonlit"] .bg-stage {
  background:
    radial-gradient(ellipse 90% 60% at 85% 8%, rgba(180, 200, 255, 0.12), transparent 60%),
    radial-gradient(ellipse 70% 50% at 10% 90%, rgba(110, 130, 180, 0.15), transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 50%, #1a2338 0%, #0f1524 45%, #060810 85%);
}

/* ===== RESPONSIVE =========================================== */
@media (max-width: 860px) {
  .counter-grid, .shelf-grid { grid-template-columns: 1fr; }
  .inner-table-layout { grid-template-columns: 1fr; }
  .fragrance-frame { padding: 44px 28px 40px; }
  .topnav { padding: 14px 20px; }
  .sigil { width: 300px; height: 280px; }
  .hero-nav a { padding: 10px 14px; }
}

/* =============================================================
   PRODUCT DETAIL PAGE
   Editorial two-column layout + carousel of related items
   ============================================================= */

.pd-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 160px 48px 80px;
  position: relative;
  z-index: 2;
}

.pd-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gilt);
  text-decoration: none;
  padding: 10px 0;
  transition: color 300ms, letter-spacing 300ms, transform 300ms;
  margin-bottom: 48px;
}
.pd-back:hover {
  color: var(--gilt-bright);
  letter-spacing: 0.38em;
  transform: translateX(-2px);
}
.pd-back-arrow {
  display: inline-block;
  transition: transform 300ms;
}
.pd-back:hover .pd-back-arrow { transform: translateX(-3px); }

.pd-main {
  display: grid;
  grid-template-columns: minmax(340px, 1fr) 1.25fr;
  gap: 80px;
  align-items: start;
  margin-bottom: 120px;
}
@media (max-width: 900px) {
  .pd-main {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .pd-wrap { padding: 120px 28px 60px; }
}

/* Left: cover image w/ ornate frame */
.pd-cover {
  position: relative;
  aspect-ratio: auto;
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
}
.pd-cover-glow {
  position: absolute;
  inset: -40px;
  background: radial-gradient(ellipse at center, rgba(255,192,121,0.18) 0%, rgba(255,192,121,0.05) 35%, transparent 65%);
  filter: blur(20px);
  z-index: -1;
  opacity: 0.9;
  pointer-events: none;
}
/* Narrow screens: the full -40px halo pokes past the viewport edge and
   makes the page rock sideways. A tighter halo stays inside the glass. */
@media (max-width: 700px) {
  .pd-cover-glow { inset: -12px; }
}
.pd-cover img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid rgba(217, 178, 106, 0.28);
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,0.7),
    0 10px 30px -8px rgba(26, 15, 36, 0.6),
    inset 0 1px 0 rgba(255, 192, 121, 0.08);
}

/* Tea cover- primary real-leaf photo, secondary illustration beneath */
.pd-cover.tea-cover img {
  border: 1px solid rgba(217, 178, 106, 0.32);
}
.pd-cover-specimen {
  margin: 28px 0 0;
  padding: 0;
  text-align: center;
}
.pd-cover-specimen img {
  width: 72%;
  max-width: 340px;
  height: auto;
  margin: 0 auto;
  display: block;
  border: none;
  box-shadow:
    0 24px 60px -18px rgba(0,0,0,0.6),
    0 8px 24px -8px rgba(26, 15, 36, 0.5);
  background: transparent;
}
.pd-cover-specimen figcaption {
  font-family: var(--f-display);
  font-size: 9.5px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--gilt);
  margin-top: 14px;
  opacity: 0.85;
}

/* Right: details column */
.pd-details {
  padding-top: 20px;
}
.pd-eyebrow {
  font-family: var(--f-display);
  font-size: 10.5px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gilt);
  margin-bottom: 20px;
  opacity: 0.85;
}
.pd-title {
  font-family: var(--f-script);
  font-size: clamp(56px, 8vw, 88px);
  line-height: 0.95;
  color: var(--gilt-bright);
  margin: 0 0 10px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.pd-subtitle {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 18px;
  color: var(--mauve-ash);
  margin-bottom: 28px;
  line-height: 1.4;
}
.pd-price-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid rgba(217, 178, 106, 0.18);
  border-bottom: 1px solid rgba(217, 178, 106, 0.18);
  margin-bottom: 36px;
}
.pd-price {
  font-family: var(--f-display);
  font-size: 30px;
  color: var(--gilt-bright);
  letter-spacing: 0.04em;
  font-weight: 500;
}
.pd-price-sub {
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--mauve-ash);
  font-style: italic;
  letter-spacing: 0.08em;
}
.pd-desc {
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.75;
  color: rgba(248, 236, 210, 0.88);
  margin-bottom: 22px;
  text-wrap: pretty;
}
.pd-desc + .pd-desc { margin-top: -6px; }
.pd-notes {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--mauve-ash);
  margin: 28px 0 36px;
  padding: 18px 22px;
  border-left: 1px solid rgba(217, 178, 106, 0.3);
  background: rgba(26, 15, 36, 0.3);
}
.pd-cta-row {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

/* ---- Related carousel ---- */
.pd-related {
  margin-top: 80px;
  padding-top: 60px;
  border-top: 1px solid rgba(217, 178, 106, 0.15);
  position: relative;
}
.pd-related-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
  gap: 30px;
}
.pd-related-title {
  font-family: var(--f-script);
  font-size: clamp(36px, 5vw, 52px);
  color: var(--gilt-bright);
  margin: 0;
  font-weight: 400;
  line-height: 1;
}
.pd-related-eyebrow {
  font-family: var(--f-display);
  font-size: 10.5px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gilt);
  opacity: 0.85;
  margin-bottom: 10px;
}
.pd-carousel-nav {
  display: flex;
  gap: 10px;
}
.pd-carousel-nav button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(217, 178, 106, 0.4);
  color: var(--gilt);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 300ms;
  font-family: var(--f-display);
  font-size: 16px;
}
.pd-carousel-nav button:hover {
  border-color: var(--gilt-bright);
  color: var(--gilt-bright);
  background: rgba(217, 178, 106, 0.08);
}
.pd-carousel-nav button:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.pd-carousel-viewport {
  overflow: hidden;
  margin: 0 -12px;
  padding: 8px 12px 24px;
  cursor: grab;
}
.pd-carousel-viewport.dragging { cursor: grabbing; }
.pd-carousel-track {
  display: flex;
  gap: 28px;
  transition: transform 500ms cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.pd-carousel-track.no-transition { transition: none; }

.pd-rec-card {
  flex: 0 0 300px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 400ms;
  user-select: none;
}
.pd-rec-card:hover { transform: translateY(-4px); }
.pd-rec-cover {
  position: relative;
  aspect-ratio: 2/3;
  overflow: hidden;
  margin-bottom: 18px;
  border: 1px solid rgba(217, 178, 106, 0.22);
  box-shadow:
    0 20px 40px -12px rgba(0,0,0,0.6),
    0 6px 16px -4px rgba(26, 15, 36, 0.5);
  background: var(--plum-900);
}
.pd-rec-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 700ms cubic-bezier(.2,.7,.2,1), filter 500ms;
  pointer-events: none;
}
.pd-rec-card:hover .pd-rec-cover img {
  transform: scale(1.04);
  filter: brightness(1.06);
}
.pd-rec-cover::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(15, 7, 18, 0.5) 100%);
  pointer-events: none;
}
.pd-rec-name {
  font-family: var(--f-script);
  font-size: 30px;
  color: var(--gilt-bright);
  line-height: 1;
  margin: 0 0 6px;
  font-weight: 400;
}
.pd-rec-kind {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 13px;
  color: var(--mauve-ash);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.pd-rec-blurb {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(248, 236, 210, 0.75);
  margin: 0;
}

/* Discreet add-to-cart button under each recommended card */
.pd-rec-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 14px;
  font-family: var(--f-display);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gilt);
  background: transparent;
  border: 1px solid rgba(217, 178, 106, 0.32);
  border-radius: 2px;
  cursor: pointer;
  transition: color 220ms ease, border-color 220ms ease, background 220ms ease, letter-spacing 220ms ease;
  text-decoration: none;
  line-height: 1;
}
.pd-rec-add .pd-rec-add-plus {
  font-family: var(--f-body);
  font-size: 14px;
  letter-spacing: 0;
  line-height: 1;
  margin-top: -1px;
  opacity: 0.9;
}
.pd-rec-add:hover {
  color: var(--gilt-bright);
  border-color: var(--gilt-bright);
  background: rgba(217, 178, 106, 0.06);
}
.pd-rec-add.added {
  color: #f8ecd2;
  border-color: rgba(217, 178, 106, 0.55);
  background: rgba(217, 178, 106, 0.1);
}
.pd-rec-add.added .pd-rec-add-plus { opacity: 1; }

/* ---- Stub pages (Coming Soon treatment) ---- */
.pd-stub-banner {
  display: inline-block;
  font-family: var(--f-display);
  font-size: 10px;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--candle);
  background: rgba(255, 147, 64, 0.08);
  border: 1px solid rgba(255, 147, 64, 0.3);
  padding: 8px 16px;
  margin-bottom: 28px;
}


/* ===== SHOPPE PAGE =========================================== */
.shoppe-header {
  text-align: center;
  padding: 80px 20px 24px;
  max-width: 900px;
  margin: 0 auto;
}
.shoppe-header .section-eyebrow { margin-bottom: 14px; }
.shoppe-header .section-title { margin: 0 0 16px; }
.shoppe-header .shoppe-lede {
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--paper);
  opacity: 0.84;
  max-width: 640px;
  margin: 0 auto;
}

.shoppe-category {
  padding: 56px 20px 24px;
  max-width: 1400px;
  margin: 0 auto;
}
.shoppe-category-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: 0 4px 18px;
  border-bottom: 1px solid rgba(201, 162, 79, 0.22);
  margin-bottom: 32px;
}
.shoppe-category-name {
  font-family: var(--f-display);
  font-size: 15px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gilt-bright);
  margin: 0;
}
.shoppe-category-count {
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.55;
}

.shoppe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 36px 28px;
}

.shoppe-card {
  position: relative;
  display: flex; flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 400ms ease;
}
.shoppe-card:hover { transform: translateY(-4px); }

.shoppe-cover {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 4px;
  background: linear-gradient(160deg, #1a0f24, #0e0716);
  box-shadow:
    0 18px 40px -20px rgba(0,0,0,0.7),
    inset 0 0 0 1px rgba(201,162,79,0.18);
  transition: box-shadow 500ms ease;
}
.shoppe-card:hover .shoppe-cover {
  box-shadow:
    0 24px 56px -18px rgba(0,0,0,0.8),
    0 0 0 1px rgba(201,162,79,0.45),
    inset 0 0 40px rgba(255, 180, 100, 0.08);
}
.shoppe-cover img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.shoppe-cover-glow {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 60% 30%, rgba(255, 190, 120, 0.18), transparent 60%);
  opacity: 0; transition: opacity 500ms ease;
}
.shoppe-card:hover .shoppe-cover-glow { opacity: 1; }

.shoppe-meta {
  padding: 16px 2px 0;
}
.shoppe-category-tag {
  font-family: var(--f-display);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gilt);
  opacity: 0.72;
  margin-bottom: 6px;
}
.shoppe-title {
  font-family: var(--f-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--paper);
  margin: 0 0 4px;
  line-height: 1.25;
}
.shoppe-author {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 14px;
  color: var(--paper);
  opacity: 0.65;
  margin: 0 0 10px;
}
.shoppe-price-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}
.shoppe-price {
  font-family: var(--f-serif);
  font-size: 17px;
  color: var(--gilt-bright);
  letter-spacing: 0.02em;
}
.shoppe-stock {
  font-family: var(--f-display);
  font-size: 9.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--candle);
  opacity: 0.82;
}
.shoppe-stock.low { color: #e89c5a; }
.shoppe-stock.out { color: rgba(233, 217, 184, 0.45); }

/* One-click add button under each purchasable Shoppe card (injected by
   brand.js- cards that are Sold Out or Coming Soon never receive one) */
.shoppe-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 14px;
  font-family: var(--f-display);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gilt);
  background: transparent;
  border: 1px solid rgba(217, 178, 106, 0.32);
  border-radius: 2px;
  cursor: pointer;
  transition: color 220ms ease, border-color 220ms ease, background 220ms ease;
}
.shoppe-add:hover {
  color: var(--gilt-bright);
  border-color: var(--gilt-bright);
  background: rgba(217, 178, 106, 0.06);
}
.shoppe-add .shoppe-add-plus {
  font-family: var(--f-body);
  font-size: 14px;
  letter-spacing: 0;
  line-height: 1;
  margin-top: -1px;
  opacity: 0.9;
}

/* Coming Soon placeholder card */
.shoppe-card.coming-soon .shoppe-cover {
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(201,162,79,0.08), transparent 60%),
    linear-gradient(160deg, #1f1229, #0c0614);
}
.shoppe-card.coming-soon .shoppe-cover::before {
  content: '';
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(201,162,79,0.22);
  border-radius: 2px;
  pointer-events: none;
}
.shoppe-coming-glyph {
  font-family: var(--f-script);
  font-size: 58px;
  color: var(--gilt);
  opacity: 0.55;
  transform: translateY(-4px);
}

/* ----- Candle "Coming Soon" placeholder ----- */
.candle-placeholder {
  position: relative;
  aspect-ratio: 2/3;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 2rem 1.5rem;
  background:
    radial-gradient(ellipse 65% 42% at center 72%, rgba(255, 165, 90, 0.16), transparent 72%),
    linear-gradient(180deg, rgba(26, 15, 36, 0.55), rgba(26, 15, 36, 0.90));
  border: 1px solid rgba(217, 178, 106, 0.38);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.28);
}
.candle-placeholder::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(217, 178, 106, 0.20);
  border-radius: 2px;
  pointer-events: none;
}
.candle-placeholder-flame {
  width: 42%;
  max-width: 120px;
  height: auto;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 20px rgba(255, 175, 100, 0.45));
  animation: candlePlaceholderFlicker 2.8s ease-in-out infinite;
}
@keyframes candlePlaceholderFlicker {
  0%, 100% { opacity: 0.92; transform: translateY(0); }
  48% { opacity: 0.82; transform: translateY(-0.5px); }
  55% { opacity: 1; transform: translateY(0); }
  72% { opacity: 0.85; transform: translateY(0.5px); }
}
.candle-placeholder-label {
  font-family: var(--f-display);
  font-size: 10.5px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gilt);
  opacity: 0.88;
  z-index: 1;
  text-align: center;
  position: relative;
}

/* Size variant: shoppe grid card */
.shoppe-cover .candle-placeholder {
  gap: 14px;
  padding: 1.5rem 1rem;
}
.shoppe-cover .candle-placeholder-flame {
  width: 38%;
  max-width: 90px;
}
.shoppe-cover .candle-placeholder-label {
  font-size: 9.5px;
  letter-spacing: 0.34em;
}

/* Size variant: related-carousel small card */
.pd-rec-cover .candle-placeholder {
  gap: 10px;
  padding: 1rem 0.75rem;
}
.pd-rec-cover .candle-placeholder::before {
  inset: 6px;
}
.pd-rec-cover .candle-placeholder-flame {
  width: 36%;
  max-width: 56px;
}
.pd-rec-cover .candle-placeholder-label {
  font-size: 8.5px;
  letter-spacing: 0.3em;
}
.shoppe-coming-label {
  position: absolute;
  bottom: 28px; left: 0; right: 0;
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--gilt);
  opacity: 0.68;
  text-align: center;
}
.shoppe-card.coming-soon {
  cursor: default;
}
.shoppe-card.coming-soon:hover { transform: none; }

@media (max-width: 720px) {
  .shoppe-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 28px 18px; }
  .shoppe-category { padding: 40px 16px 16px; }
  .shoppe-header { padding: 60px 16px 16px; }
}


/* ----- Expanded site footer (nav, social, copyright) ----- */
.site-foot-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  margin: 32px auto 22px;
  max-width: 760px;
}
.site-foot-nav a {
  font-family: var(--f-display);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--paper-dim);
  text-decoration: none;
  padding: 8px 14px;
  position: relative;
  transition: color 300ms;
  white-space: nowrap;
}
.site-foot-nav a:hover { color: var(--gilt-bright); }
.site-foot-nav a + a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gilt);
  opacity: 0.5;
}
.site-foot-social {
  margin: 0 0 26px;
  font-family: var(--f-display);
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
}
.site-foot-social a {
  color: var(--gilt);
  text-decoration: none;
  padding: 0 14px;
  transition: color 300ms;
}
.site-foot-social a:hover { color: var(--gilt-bright); }
.site-foot-social .dot {
  color: var(--gilt);
  opacity: 0.5;
}
.site-foot-copyright {
  font-family: var(--f-body);
  font-size: 12px;
  color: var(--paper-dim);
  opacity: 0.7;
  letter-spacing: 0.05em;
  margin-top: 8px;
}

/* ----- Tea scroll guide preview callout ----- */
.pd-scroll-preview {
  margin: 0 0 28px;
  padding: 16px 22px;
  border-left: 1px solid rgba(217, 178, 106, 0.35);
  background: linear-gradient(90deg, rgba(26, 15, 36, 0.4), rgba(26, 15, 36, 0.05));
}
.pd-scroll-preview-eyebrow {
  font-family: var(--f-display);
  font-size: 9.5px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gilt);
  margin-bottom: 8px;
  opacity: 0.88;
}
.pd-scroll-preview-text {
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-body);
  margin: 0;
  font-style: italic;
}

/* ----- Floating praise card ----- */
.floating-praise {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  max-width: 340px;
  padding: 22px 26px 20px;
  background:
    linear-gradient(180deg, rgba(40, 26, 56, 0.96), rgba(20, 12, 28, 0.98));
  border: 1px solid rgba(217, 178, 106, 0.45);
  border-radius: 2px;
  box-shadow:
    0 24px 60px -12px rgba(0, 0, 0, 0.7),
    0 8px 24px -6px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 192, 121, 0.06);
  transform: translateY(140%);
  opacity: 0;
  transition: transform 700ms cubic-bezier(.2,.7,.2,1), opacity 700ms ease;
  font-family: var(--f-body);
  pointer-events: auto;
}
.floating-praise.is-visible {
  transform: translateY(0);
  opacity: 1;
}
.floating-praise::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(217, 178, 106, 0.16);
  border-radius: 2px;
  pointer-events: none;
}
.floating-praise-close {
  position: absolute;
  top: 4px;
  right: 8px;
  background: none;
  border: none;
  color: var(--mauve-ash);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 300ms;
  z-index: 2;
}
.floating-praise-close:hover {
  color: var(--gilt-bright);
}
.floating-praise-category {
  font-family: var(--f-display);
  font-size: 8.5px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gilt);
  opacity: 0.88;
  margin-bottom: 10px;
  position: relative;
}
.floating-praise-quote {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--paper);
  margin: 0 0 12px;
  position: relative;
}
.floating-praise-author {
  font-family: var(--f-display);
  font-size: 9px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gilt-bright);
  opacity: 0.92;
  position: relative;
}
@media (max-width: 640px) {
  .floating-praise {
    bottom: 16px;
    right: 16px;
    left: 16px;
    max-width: none;
    padding: 18px 20px 16px;
  }
  .floating-praise-quote { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .floating-praise { transition: opacity 200ms; transform: translateY(0); }
}

/* ===== Sound toggle ============================================
   Auto-injected by brand.js into every page's topnav. Defaults to
   ON; clicking mutes both the ambient bed and click sounds.
   ============================================================== */
.sound-toggle {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid rgba(217, 178, 106, 0.28);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  color: var(--gilt);
  cursor: pointer;
  padding: 0;
  margin-right: 4px;
  transition: color 220ms ease, border-color 220ms ease, background-color 220ms ease, transform 220ms ease;
  position: relative;
}
.sound-toggle:hover {
  color: var(--gilt-bright);
  border-color: rgba(242, 207, 136, 0.6);
  background-color: rgba(217, 178, 106, 0.06);
}
.sound-toggle:focus-visible {
  outline: 2px solid var(--gilt-bright);
  outline-offset: 3px;
}
.sound-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}
/* Show the right icon for the current state */
.sound-toggle .sound-off { display: none; }
.sound-toggle[data-muted="true"] .sound-on { display: none; }
.sound-toggle[data-muted="true"] .sound-off { display: block; }
.sound-toggle[data-muted="true"] {
  color: var(--mauve-ash);
  border-color: rgba(160, 133, 168, 0.32);
}
.sound-toggle[data-muted="true"]:hover {
  color: var(--paper-dim);
  border-color: rgba(217, 178, 106, 0.45);
}
/* Soft candlelight glow when sound is on, drawing the eye gently */
.sound-toggle[data-muted="false"]::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 192, 121, 0.22);
  pointer-events: none;
  opacity: 0;
  animation: soundToggleBreathe 4.2s ease-in-out infinite;
}
@keyframes soundToggleBreathe {
  0%, 100% { opacity: 0.0; }
  50%      { opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
  .sound-toggle[data-muted="false"]::after { animation: none; opacity: 0.4; }
}
@media (max-width: 640px) {
  .sound-toggle { width: 32px; height: 32px; }
  .sound-toggle svg { width: 16px; height: 16px; }
}

/* =============================================================
   SPLASH BEGIN PROMPT
   --------------------------------------------------------------
   Whispered single-line invitation that sits at the bottom of the
   door splash. Browsers block unmuted audio until a real user
   gesture (click/tap/keydown) - mousemove, hover, and pointermove
   don't count - so the splash needs SOMETHING for the visitor to
   click in order for the "behind the door" ambient (door-ambient.mp3,
   layered birds + chatter + occasional laughter, low-pass-filtered)
   to start. The prompt fades in 1.5s after the splash mounts (so
   the painted door is the first thing seen) and fades back out the
   instant the visitor clicks anywhere on the splash that isn't the
   brass handle - clicking the handle dismisses normally. Italianno
   gives it a flowing, whispered feel rather than a UI-label feel.
   ============================================================= */
.splash-begin-prompt {
  position: absolute;
  left: 50%;
  bottom: 38px;
  transform: translateX(-50%);
  font-family: 'Italianno', 'Cormorant Garamond', cursive, serif;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(242, 207, 136, 0.85);
  text-align: center;
  white-space: nowrap;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.85),
    0 2px 14px rgba(8, 4, 2, 0.85);
  opacity: 0;
  transition: opacity 1.2s ease-out;
  pointer-events: none;
  z-index: 3;
}
/* Tiny gilt flourishes flank the line. Kept low-opacity so they
   read as decoration, not as bullet points. */
.splash-begin-prompt::before,
.splash-begin-prompt::after {
  content: '\2726';   /* ✦ */
  font-family: serif;
  font-size: 0.55em;
  vertical-align: 0.25em;
  opacity: 0.55;
  margin: 0 0.55em;
}
.splash-begin-prompt.visible {
  opacity: 0.7;
}
/* Once the visitor has clicked, or once the door is dismissing,
   fade the line out faster than it came in so it doesn't loiter. */
.splash-begin-prompt.is-faded,
#door-splash.is-opening .splash-begin-prompt {
  opacity: 0 !important;
  transition: opacity 0.55s ease;
}
@media (max-width: 600px) {
  .splash-begin-prompt {
    bottom: 30px;
    font-size: 19px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .splash-begin-prompt { transition-duration: 0s !important; }
}

/* =============================================================
   HAMBURGER MENU
   The trigger reuses the existing .sigil-btn slot in .topnav .right
   and adds class .nav-toggle for proper morph animation + a11y.
   The menu panel (#nav-menu) and backdrop are injected once into
   <body> by brand.js so every page shares the same markup.
   ============================================================= */

/* Hamburger button- icon morphs to an X when expanded */
.nav-toggle {
  background: transparent;
  border: none;
  padding: 0;
}
.nav-toggle svg { width: 22px; height: 16px; overflow: visible; }
.nav-toggle line {
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  transition: transform 360ms cubic-bezier(.5,.05,.2,1),
              opacity 240ms ease;
  transform-origin: 12px 8px;
}
.nav-toggle[aria-expanded="true"] line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] line:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}
.nav-toggle:hover { color: var(--gilt-bright); transform: none; }

/* While the menu is open, lift the topnav above the panel so the
   trigger stays clickable, and clear its translucent background so
   the menu reads cleanly. Other topnav controls dim to indicate
   they're inert during the menu. */
body.nav-menu-open .topnav {
  z-index: 200;
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.nav-menu-open .topnav .wordmark,
body.nav-menu-open .topnav .avatar,
body.nav-menu-open .topnav .sound-toggle {
  opacity: 0.4;
  transition: opacity 280ms ease;
}

/* Backdrop scrim- click anywhere outside the panel to close */
.nav-menu-backdrop {
  position: fixed; inset: 0;
  z-index: 90;
  background:
    radial-gradient(ellipse 80% 70% at 50% 35%,
      rgba(36, 20, 49, 0.78),
      rgba(10, 5, 15, 0.95));
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease;
}
.nav-menu-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Menu panel- soft fade + slide-in, candlelit gradient frame */
#nav-menu {
  position: fixed;
  z-index: 100;
  top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% + 18px));
  width: min(560px, 92vw);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 44px 40px 36px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,
      rgba(255, 192, 121, 0.10) 0%,
      rgba(255, 147, 64, 0.04) 30%,
      transparent 70%),
    linear-gradient(180deg,
      rgba(36, 20, 49, 0.62),
      rgba(20, 8, 32, 0.68));
  border: 1px solid rgba(217, 178, 106, 0.24);
  border-radius: 6px;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.6),
    0 0 70px rgba(255, 180, 90, 0.08),
    inset 0 0 40px rgba(255, 180, 90, 0.04);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 420ms ease,
              transform 540ms cubic-bezier(.2, .7, .2, 1),
              visibility 0s linear 540ms;
}
#nav-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  transition: opacity 420ms ease,
              transform 540ms cubic-bezier(.2, .7, .2, 1),
              visibility 0s;
}

/* Decorative eyebrow above the list */
.nav-menu-mark {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gilt);
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 0 0 24px;
}
.nav-menu-mark::before,
.nav-menu-mark::after {
  content: "";
  width: 36px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gilt));
}
.nav-menu-mark::after {
  background: linear-gradient(90deg, var(--gilt), transparent);
}

/* List + items */
.nav-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu-item {
  margin: 0;
  text-align: center;
}
.nav-menu-item + .nav-menu-item { margin-top: 2px; }
.nav-menu-item-sub + .nav-menu-item-top { margin-top: 14px; }

/* Top-level link- Cinzel uppercase, gilt */
.nav-menu-link {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gilt);
  text-decoration: none;
  padding: 10px 18px 4px;
  position: relative;
  transition: color 240ms ease, letter-spacing 380ms ease,
              text-shadow 380ms ease;
}
.nav-menu-link:hover,
.nav-menu-link:focus-visible {
  color: var(--gilt-bright);
  letter-spacing: 0.26em;
  text-shadow: 0 0 14px rgba(255, 192, 121, 0.5);
  outline: none;
}

/* Sub-items- italic Cormorant, paper-dim */
.nav-menu-item-sub .nav-menu-link {
  font-family: var(--f-body);
  font-weight: 400;
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--paper-dim);
  padding: 3px 18px;
}
.nav-menu-item-sub .nav-menu-link:hover,
.nav-menu-item-sub .nav-menu-link:focus-visible {
  color: var(--paper);
  letter-spacing: 0.09em;
  text-shadow: 0 0 12px rgba(243, 231, 211, 0.35);
}

/* Subscriber-only star- candlelight, sparkles applied via brand.js */
.sub-star {
  display: inline-block;
  color: var(--candle);
  font-size: 0.95em;
  line-height: 1;
  text-shadow:
    0 0 6px rgba(255, 192, 121, 0.7),
    0 0 14px rgba(255, 147, 64, 0.4);
  transform: translateY(-1px);
}

/* "Subscribers Only" disclaimer- small mauve italic */
.subs-only {
  display: block;
  font-family: var(--f-body);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mauve-ash);
  opacity: 0.78;
  margin: 1px 0 0;
  line-height: 1;
}

/* Sparkle-mini wrap- sized for the ★ inside menu links */
.sparkle-field-mini {
  display: inline-block;
  position: relative;
  vertical-align: middle;
}

/* Body scroll lock while menu is open */
body.nav-menu-open { overflow: hidden; }

/* Mobile- full-bleed sheet */
@media (max-width: 640px) {
  #nav-menu {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    top: 0; left: 0;
    transform: translate(0, 18px);
    border-radius: 0;
    border: none;
    padding: 80px 24px 40px;
  }
  #nav-menu.is-open { transform: translate(0, 0); }
  .nav-menu-link { font-size: 17px; }
  .nav-menu-item-sub .nav-menu-link { font-size: 15px; }
}

/* Reduced motion- skip the slide, keep the fade short */
@media (prefers-reduced-motion: reduce) {
  #nav-menu,
  .nav-menu-backdrop,
  .nav-toggle line,
  .nav-menu-link {
    transition-duration: 80ms;
  }
}

/* =============================================================
   SHARED "BACK TO THE PARLOUR" LINKS
   .shoppe-back and .bio-back are reused across multiple
   secondary pages (Library, Journal, Press, Testimonials,
   Contact, Shipping and Returns, Shoppe, Whos Behind the
   Counter). Extracted from page-local style blocks so every
   page renders the styled link instead of a default browser
   link.
   ============================================================= */
.shoppe-back {
  position: absolute;
  top: 90px; left: 40px;
  font-family: var(--f-display);
  font-size: 10.5px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gilt);
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 220ms, color 220ms;
  z-index: 20;
}
.shoppe-back:hover { color: var(--gilt-bright); opacity: 1; }
.shoppe-back-arrow { margin-right: 6px; }

@media (max-width: 720px) {
  .shoppe-back { position: relative; top: 0; left: 0; display: inline-block; margin: 90px 16px 0; }
}

.bio-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* 90px top clears the fixed topnav (matches .shoppe-back)- at 20px the
     link sat on the wordmark on Journal/Press/Testimonials/Bios. */
  margin: 90px 0 8px 40px;
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gilt);
  text-decoration: none;
  opacity: 0.78;
  transition: opacity 240ms ease, color 240ms ease;
}
.bio-back:hover { opacity: 1; color: var(--gilt-bright); }
.bio-back-arrow { font-size: 16px; line-height: 1; }

@media (max-width: 640px) {
  .bio-back { margin-left: 20px; }
}

/* =============================================================
   LIBRARY HERO TITLE - gradient fix
   .lib-hero-title combines with .section-title (which sets
   color:transparent + background-clip:text for the gradient
   effect). Without -webkit-text-fill-color the title can
   render invisible. Make the gradient fill the text.
   ============================================================= */
.lib-hero-title {
  -webkit-text-fill-color: transparent;
}



/* ================== IA CART ================== */
.cart-toggle {
  position: relative;
  width: 38px; height: 38px;
  border: 1px solid rgba(217,178,106,0.35);
  border-radius: 50%;
  background: transparent;
  color: var(--gilt);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 300ms, border-color 300ms;
  margin-right: 6px;
}
.cart-toggle svg { width: 18px; height: 18px; }
.cart-toggle:hover { color: var(--gilt-bright); border-color: var(--gilt-bright); }
.cart-count {
  position: absolute; top: -5px; right: -5px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px;
  background: var(--gilt-bright); color: #140b1c;
  font-family: var(--f-display); font-size: 10px; line-height: 16px;
  text-align: center;
}
.cart-drawer { position: fixed; inset: 0; z-index: 4500; }
.cart-drawer[hidden] { display: none; }
.cart-drawer-backdrop { position: absolute; inset: 0; background: rgba(8,4,12,0.6); backdrop-filter: blur(2px); }
.cart-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 94vw);
  background: linear-gradient(170deg, #1d1226 0%, #120a1a 80%);
  border-left: 1px solid rgba(217,178,106,0.3);
  box-shadow: -18px 0 50px rgba(0,0,0,0.5);
  display: flex; flex-direction: column;
  padding: 22px 22px 18px;
  overflow-y: auto;
}
.cart-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cart-drawer-title { font-family: var(--f-display); font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gilt-bright); }
.cart-drawer-close { border: none; background: transparent; color: var(--gilt); font-size: 26px; cursor: pointer; line-height: 1; }
.cart-drawer-close:hover { color: var(--gilt-bright); }
.cart-empty { font-family: var(--f-body); font-style: italic; color: var(--paper-dim); text-align: center; margin: 40px 0; }
.cart-item { padding: 12px 0; border-bottom: 1px solid rgba(217,178,106,0.14); }
.cart-item-info { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cart-item-name { font-family: var(--f-body); font-size: 15.5px; color: var(--ink-body); }
.cart-item-price { font-family: var(--f-body); font-size: 13.5px; color: var(--paper-dim); white-space: nowrap; }
.cart-item-controls { display: flex; align-items: center; gap: 10px; }
.cart-qty-btn {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(217,178,106,0.35); background: transparent;
  color: var(--gilt); cursor: pointer; font-size: 14px; line-height: 1;
}
.cart-qty-btn:hover { color: var(--gilt-bright); border-color: var(--gilt-bright); }
.cart-item-qty { font-family: var(--f-display); font-size: 13px; color: var(--ink-body); min-width: 18px; text-align: center; }
.cart-item-line { margin-left: auto; font-family: var(--f-body); font-size: 14.5px; color: var(--gilt-bright); }
.cart-remove { border: none; background: transparent; color: var(--paper-dim); font-size: 18px; cursor: pointer; line-height: 1; }
.cart-remove:hover { color: var(--gilt-bright); }
.cart-totals { margin-top: 16px; }
.cart-total-row { display: flex; justify-content: space-between; font-family: var(--f-body); font-size: 14.5px; color: var(--paper-dim); padding: 4px 0; }
.cart-total-row span:last-child { color: var(--ink-body); }
.cart-total-grand { border-top: 1px solid rgba(217,178,106,0.25); margin-top: 8px; padding-top: 10px; font-family: var(--f-display); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gilt-bright); }
.cart-total-grand span:last-child { color: var(--gilt-bright); }
.cart-foot { margin-top: 20px; text-align: center; }
.cart-foot .cart-checkout { display: inline-block; opacity: 0.55; pointer-events: none; }
.cart-foot-note { font-family: var(--f-body); font-size: 12.5px; font-style: italic; line-height: 1.6; color: var(--paper-dim); margin: 12px 0 0; }


/* =====================================================================
   DO NOT MODIFY - Intermediary eye-blink (CSS half)
   ---------------------------------------------------------------------
   The two eye pairs (eye-pair-l and eye-pair-r) are deliberately placed
   at distinct positions in the painted artwork - one in the upper-right
   shadows, one in the middle-left archway. They are TWO DIFFERENT
   CREATURES watching from different parts of the card. Their blink
   timing is driven ambiently from the engine in brand.js; DO NOT add
   hover gates, animation-play-state pauses, or shared @keyframes that
   would force them to blink in lockstep. If anything looks wrong,
   hard-refresh first. Tillie has explicitly approved the positions and
   the staggered ambient timing.
   Promoted from the home page (July 2026) so the SAME watchers live on
   the home feature card, the Shoppe card, and the product page cover-
   any [data-blink] element containing .eye-overlay divs gets the effect.
   Percentages are calibrated to fragrance-intermediary.png and carry
   across surfaces because all three show the same uncropped painting.
   ===================================================================== */
[data-blink] .product-illustration,
[data-blink] .shoppe-cover,
.pd-cover[data-blink] {
  position: relative;
}
.eye-overlay {
  position: absolute;
  pointer-events: none;
  /* closest-side keeps each circle bounded by the rectangle's shorter edge so
     the two gradients render as TWO distinct round dots rather than overlapping
     into a continuous bar. Stops are tight: solid black out to 70%, hard fade
     to transparent by 100% - reads as crisp solid-black dots, not a feathered
     blob. */
  background:
    radial-gradient(circle closest-side at 25% 50%,
      #000 0%,
      #000 70%,
      transparent 100%),
    radial-gradient(circle closest-side at 75% 50%,
      #000 0%,
      #000 70%,
      transparent 100%);
  opacity: 0;
  transition: opacity 110ms ease-out;
  z-index: 2;
}
/* Upper-right pair- two yellow eyes in the dark shadows above the
   woman's right shoulder (~80.5% and 86.3% horizontal, ~18% vertical). */
.eye-overlay.eye-pair-r {
  top: 15.53%; left: 77.84%;
  width: 11.26%;
  height: 5%;
}
/* Middle-left pair- two yellow eyes peeking from the archway shadow
   (~9.3% and 14.5% horizontal, ~41.7% vertical). */
.eye-overlay.eye-pair-l {
  top: 39.23%; left: 5.36%;
  width: 11.88%;
  height: 5%;
}
.eye-overlay.is-closed {
  opacity: 1;
  transition: opacity 90ms ease-in;
}
@media (prefers-reduced-motion: reduce) {
  .eye-overlay { display: none !important; }
}

/* ================== MOBILE TOPNAV SQUEEZE ==================
   On narrow screens the right-side nav cluster (text links + sound +
   cart + sigils + avatar) overflowed the viewport by ~32px, giving
   every page a horizontal wobble. Phones keep the three buttons that
   matter- sound, cart, menu- and shed the decorations. */
@media (max-width: 520px) {
  .topnav { padding-left: 12px; padding-right: 10px; }
  .topnav .right { gap: 6px; }
  .topnav .right > a[href] { display: none; }
  .topnav .avatar { display: none; }
  .topnav .right .sigil-btn:not(.nav-toggle) { display: none; }
}

/* -------- Maison Lilas- the house name treatment --------
   Every appearance of the house name wears this: Italianno script,
   a soft lavender glow, and three tiny sparkles on their own slow
   clocks (Tillie, July 2026). Use:
   <span class="maison-name">Maison Lilas<span class="sp s1">&#10022;</span
   ><span class="sp s2 l">&#10023;</span><span class="sp s3">&#10022;</span></span> */
.maison-name {
  position: relative;
  display: inline-block;
  font-family: "Italianno", "Great Vibes", cursive;
  font-size: 1.9em;
  line-height: 0.9;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--gilt-bright);
  text-shadow: 0 0 18px rgba(184, 161, 201, 0.45);
  white-space: nowrap;
}
.maison-name .sp {
  position: absolute;
  font-family: serif;
  font-size: 0.38em;
  color: var(--gilt-bright);
  animation: maison-twinkle 2.6s ease-in-out infinite;
  pointer-events: none;
}
.maison-name .sp.l { color: var(--lavender); }
.maison-name .s1 { top: -0.42em; left: -0.55em; }
.maison-name .s2 { top: -0.28em; right: -0.62em; font-size: 0.5em; animation-delay: 0.9s; animation-duration: 3.2s; }
.maison-name .s3 { bottom: -0.18em; right: 18%; font-size: 0.3em; animation-delay: 1.7s; animation-duration: 2.1s; }
@keyframes maison-twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.6) rotate(0deg); }
  50%      { opacity: 1;    transform: scale(1.15) rotate(18deg); }
}
a:hover .maison-name {
  color: #fff3d6;
  text-shadow: 0 0 26px rgba(242, 207, 136, 0.8);
}
@media (prefers-reduced-motion: reduce) {
  .maison-name .sp { animation: none; opacity: 0.7; }
}