/* ===================================================================
   Twilight Trinkets — stylesheet
   =================================================================== */

:root {
  --midnight: #0a0c1c;
  --midnight-2: #12142b;
  --twilight: #1b1a35;
  --ivory: #faf5ec;
  --ivory-2: #f2e9db;
  --blush: #e9d3ca;
  --gold: #c9a668;
  --gold-light: #e6cd9c;
  --charcoal: #2c2a30;
  --charcoal-soft: #5a5560;

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  --max-width: 1180px;
}

* { box-sizing: border-box; }

/* The UA's [hidden] rule is only `display: none` at zero specificity, so any
   author rule that sets display (.modal is display:flex) silently defeats it
   and leaves an invisible element still eating clicks. Restore it globally. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.75rem;
  position: relative;
  z-index: 2;
}

.eyebrow {
  font-family: var(--font-body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--gold-light);
  margin: 0 0 1rem;
}
.eyebrow-dark { color: var(--gold); }

.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  margin: 0 0 1rem;
  color: var(--charcoal);
}
.section-title-light { color: var(--ivory); }

.section-subtitle {
  font-size: 1rem;
  color: var(--charcoal-soft);
  margin: 0 0 2.75rem;
  max-width: 46ch;
}
.section-subtitle-light { color: rgba(250, 245, 236, 0.72); }

section {
  position: relative;
  padding: 6.5rem 0;
  overflow: hidden;
}

/* ===================================================================
   Ambient sparkle layer (site-wide)
   =================================================================== */

.ambient-sparkles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.sparkle {
  position: absolute;
  width: 16px;
  height: 16px;
  fill: var(--gold-light);
  opacity: 0;
  will-change: transform, opacity;
  animation: sparkle-flicker 9s ease-in-out infinite,
             sparkle-tumble 26s linear infinite;
}

@keyframes sparkle-flicker {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.55; }
}

@keyframes sparkle-tumble {
  0%   { transform: rotate(0deg) translate(0, 0); }
  50%  { transform: rotate(180deg) translate(6px, -8px); }
  100% { transform: rotate(360deg) translate(0, 0); }
}

/* hand-placed positions / sizes / timing per sparkle for organic scatter */
.s1  { top: 6%;  left: 8%;   width: 14px; height: 14px; animation-delay: 0s, 0s; }
.s2  { top: 18%; left: 88%;  width: 20px; height: 20px; animation-delay: 1.2s, 2s; }
.s3  { top: 32%; left: 22%;  width: 10px; height: 10px; animation-delay: 2.4s, 1s; }
.s4  { top: 44%; left: 68%;  width: 16px; height: 16px; animation-delay: 3.6s, 4s; }
.s5  { top: 58%; left: 4%;   width: 12px; height: 12px; animation-delay: 0.8s, 3s; }
.s6  { top: 66%; left: 92%;  width: 18px; height: 18px; animation-delay: 4.5s, 0.5s; }
.s7  { top: 78%; left: 34%;  width: 11px; height: 11px; animation-delay: 2s,   5s; }
.s8  { top: 88%; left: 76%;  width: 15px; height: 15px; animation-delay: 5.2s, 2.6s; }
.s9  { top: 12%; left: 52%;  width: 13px; height: 13px; animation-delay: 3.1s, 1.8s; }
.s10 { top: 96%; left: 12%;  width: 17px; height: 17px; animation-delay: 1.6s, 3.4s; }
.s11 { top: 24%; left: 40%;  width: 9px;  height: 9px;  animation-delay: 4.8s, 2.2s; }
.s12 { top: 70%; left: 55%;  width: 14px; height: 14px; animation-delay: 0.4s, 4.6s; }
.s13 { top: 40%; left: 6%;   width: 12px; height: 12px; animation-delay: 2.9s, 0.9s; }
.s14 { top: 84%; left: 48%;  width: 16px; height: 16px; animation-delay: 3.8s, 1.4s; }

@media (max-width: 640px) {
  .sparkle { animation-duration: 9s, 30s; }
  .s3, .s5, .s7, .s9, .s11, .s13 { display: none; } /* halve the count on mobile */
}

@media (prefers-reduced-motion: reduce) {
  .sparkle { animation: none; opacity: 0.25; }
}

/* ===================================================================
   Site-wide grain texture -- a static (not per-frame-animated, so it costs
   nothing on mobile) SVG feTurbulence tile, blended over everything so the
   flat color sections pick up a tactile, faintly vintage-photograph feel.
   Bumped up from a near-invisible first pass (0.035) to something you
   actually notice at a glance without ever affecting text contrast.
   =================================================================== */

.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.14;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 120px 120px;
}

@media (max-width: 640px) {
  .grain-overlay { opacity: 0.1; }
}

/* ===================================================================
   Header / Nav
   =================================================================== */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: linear-gradient(to bottom, rgba(10, 12, 28, 0.55), rgba(10, 12, 28, 0));
  padding-top: 0.25rem;
}

.nav {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.75rem;
}

.nav-brand {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  color: var(--ivory);
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 2.25rem;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250, 245, 236, 0.85);
  transition: color 0.25s ease;
}
.nav-links a:hover { color: var(--gold-light); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  width: 22px;
  height: 1.5px;
  background: var(--ivory);
  display: block;
}

@media (max-width: 760px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute;
    top: 100%;
    right: 1.75rem;
    left: 1.75rem;
    background: var(--midnight-2);
    border-radius: 10px;
    flex-direction: column;
    gap: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  }
  /* padding lives here, not on the base rule -- max-height can't compress
     padding to fit, so a nonzero padding on the collapsed state always
     rendered a visible sliver of the pill even at max-height:0 */
  .nav-links.open { max-height: 260px; padding: 0.5rem 0; }
  .nav-links li { border-top: 1px solid rgba(255,255,255,0.06); }
  .nav-links li:first-child { border-top: none; }
  .nav-links a { display: block; padding: 0.9rem 1.25rem; }
}

/* ===================================================================
   Hero
   =================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem 1.5rem 4rem;
  background: linear-gradient(180deg, #05060f 0%, #0d0f26 45%, #191b3d 100%);
  isolation: isolate;
}

.hero-sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.stars {
  position: absolute;
  inset: 0;
  background-repeat: repeat;
}

.stars-small {
  background-image: radial-gradient(1px 1px at 10% 20%, #fff, transparent),
    radial-gradient(1px 1px at 30% 65%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 50% 15%, #fff, transparent),
    radial-gradient(1px 1px at 70% 80%, #fff, transparent),
    radial-gradient(1px 1px at 85% 35%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 15% 85%, #fff, transparent),
    radial-gradient(1px 1px at 95% 60%, #fff, transparent),
    radial-gradient(1px 1px at 40% 40%, #fff, transparent),
    radial-gradient(1px 1px at 60% 92%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 25% 10%, #fff, transparent);
  opacity: 0.55;
}

.stars-medium {
  background-image: radial-gradient(1.6px 1.6px at 20% 30%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 78% 22%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 55% 75%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 90% 88%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 8% 55%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 65% 10%, #fff, transparent);
  opacity: 0.75;
}

.stars-twinkle span {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 6px 1px rgba(230, 205, 156, 0.8);
  animation: star-twinkle 4s ease-in-out infinite;
}
.stars-twinkle span:nth-child(1) { top: 14%; left: 18%; animation-delay: 0s; }
.stars-twinkle span:nth-child(2) { top: 22%; left: 72%; animation-delay: 1.1s; }
.stars-twinkle span:nth-child(3) { top: 40%; left: 45%; animation-delay: 2.2s; }
.stars-twinkle span:nth-child(4) { top: 60%; left: 82%; animation-delay: 0.6s; }
.stars-twinkle span:nth-child(5) { top: 70%; left: 12%; animation-delay: 1.8s; }
.stars-twinkle span:nth-child(6) { top: 30%; left: 90%; animation-delay: 2.8s; }

@keyframes star-twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.4); }
}

/* Shooting stars -- each one sits invisible at its start point for nearly
   its whole cycle and only streaks across during a brief window near the
   end (see the keyframes below), so with three staggered, differently-timed
   stars you get an occasional streak every few seconds rather than a
   constant effect. */
.shooting-stars {
  position: absolute;
  inset: 0;
}

.shooting-star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.9);
  opacity: 0;
}

.shooting-star::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 90px;
  height: 1px;
  transform-origin: right center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(250, 245, 236, 0.85) 100%);
}

.ss1 { top: 14%; left: 8%; animation: shoot-1 9s ease-in infinite; animation-delay: 1.5s; }
.ss1::before { width: 90px; transform: translateY(-50%) rotate(25deg); }

.ss2 { top: 8%; left: 52%; animation: shoot-2 13s ease-in infinite; animation-delay: 5s; }
.ss2::before { width: 70px; transform: translateY(-50%) rotate(18deg); }

.ss3 { top: 27%; left: 74%; animation: shoot-3 16s ease-in infinite; animation-delay: 9s; }
.ss3::before { width: 100px; transform: translateY(-50%) rotate(32deg); }

@keyframes shoot-1 {
  0%, 96%, 100% { opacity: 0; transform: translate(0, 0); }
  97% { opacity: 1; }
  99.5% { opacity: 0; transform: translate(210px, 98px); }
}
@keyframes shoot-2 {
  0%, 92%, 100% { opacity: 0; transform: translate(0, 0); }
  93% { opacity: 1; }
  96% { opacity: 0; transform: translate(160px, 52px); }
}
@keyframes shoot-3 {
  0%, 94%, 100% { opacity: 0; transform: translate(0, 0); }
  95% { opacity: 1; }
  98% { opacity: 0; transform: translate(235px, 147px); }
}

@media (max-width: 640px) {
  .ss3 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .shooting-star { animation: none; opacity: 0; }
}

.moon {
  position: absolute;
  top: 12%;
  right: 12%;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fdf8ee 0%, #e9dcc0 75%);
  box-shadow: 0 0 55px 14px rgba(253, 248, 238, 0.18);
  animation: moon-glow 7s ease-in-out infinite;
}

/* Soft craters/grain on the lit surface -- a handful of small radial-gradient
   blotches multiplied over the base gradient, rather than a flat circle.
   Sits under ::after so the crescent cutout still reads correctly. */
.moon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 62% 24%, rgba(150, 128, 92, 0.4) 0%, transparent 10%),
    radial-gradient(circle at 30% 52%, rgba(150, 128, 92, 0.32) 0%, transparent 8%),
    radial-gradient(circle at 70% 68%, rgba(150, 128, 92, 0.34) 0%, transparent 7%),
    radial-gradient(circle at 46% 38%, rgba(150, 128, 92, 0.2) 0%, transparent 13%),
    radial-gradient(circle at 22% 22%, rgba(255, 255, 255, 0.3) 0%, transparent 16%);
  mix-blend-mode: multiply;
  opacity: 0.75;
}

.moon::after {
  content: "";
  position: absolute;
  top: -8%;
  left: -22%;
  width: 108%;
  height: 108%;
  border-radius: 50%;
  background: #0a0c1e;
}

@keyframes moon-glow {
  0%, 100% { box-shadow: 0 0 55px 14px rgba(253, 248, 238, 0.18); filter: brightness(1); }
  50% { box-shadow: 0 0 76px 22px rgba(253, 248, 238, 0.3); filter: brightness(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .moon { animation: none; }
}

/* Moths — drifting silhouettes with fluttering wings */
.moth-field {
  position: absolute;
  inset: 0;
}

.moth {
  position: absolute;
  width: 46px;
  aspect-ratio: 100 / 60;
  overflow: visible;
  opacity: 0.85;
  --moth-wing-fill: rgba(250, 245, 236, 0.58);
  --moth-wing-stroke: rgba(230, 205, 156, 0.9);
  --moth-body-fill: var(--ivory-2);
  --moth-line: rgba(230, 205, 156, 0.7);
}

.moth .wing-left {
  transform-box: fill-box;
  transform-origin: 100% 50%;
  animation: wing-flutter-l 1.6s ease-in-out infinite;
}
.moth .wing-right {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: wing-flutter-r 1.6s ease-in-out infinite;
}

@keyframes wing-flutter-l {
  0%, 100% { transform: scaleX(1) rotate(0deg); }
  50% { transform: scaleX(0.55) rotate(6deg); }
}
@keyframes wing-flutter-r {
  0%, 100% { transform: scaleX(1) rotate(0deg); }
  50% { transform: scaleX(0.55) rotate(-6deg); }
}

.m1 { top: 22%; left: 10%; animation: drift-1 34s ease-in-out infinite; }
.m2 { top: 55%; left: 78%; width: 34px; animation: drift-2 40s ease-in-out infinite; animation-delay: -6s; }
.m3 { top: 68%; left: 22%; width: 30px; animation: drift-3 46s ease-in-out infinite; animation-delay: -18s; }
.m4 { top: 15%; left: 60%; width: 38px; animation: drift-4 38s ease-in-out infinite; animation-delay: -10s; }

@keyframes drift-1 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(90px, 40px) rotate(8deg); }
  50%  { transform: translate(40px, 110px) rotate(-4deg); }
  75%  { transform: translate(130px, 60px) rotate(6deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes drift-2 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  30%  { transform: translate(-110px, -50px) rotate(-6deg); }
  60%  { transform: translate(-50px, -120px) rotate(5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes drift-3 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  40%  { transform: translate(70px, -60px) rotate(5deg); }
  70%  { transform: translate(140px, -10px) rotate(-6deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes drift-4 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  35%  { transform: translate(-80px, 70px) rotate(-5deg); }
  65%  { transform: translate(-140px, 20px) rotate(6deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@media (max-width: 640px) {
  .m3, .m4 { display: none; } /* fewer moths on small screens */
  .moth { animation-duration: 24s !important; }
}

@media (prefers-reduced-motion: reduce) {
  .moth, .wing-left, .wing-right { animation: none; }
  .stars-twinkle span { animation: none; opacity: 0.6; }
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  color: var(--ivory);
  margin: 0 0 1.1rem;
  letter-spacing: 0.01em;
}

.hero-tagline {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: rgba(250, 245, 236, 0.78);
  line-height: 1.7;
  margin: 0 0 2.4rem;
  font-weight: 300;
}

.scroll-cue {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.scroll-cue span {
  display: block;
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, rgba(230,205,156,0.8), transparent);
  animation: scroll-cue-move 2.2s ease-in-out infinite;
}
@keyframes scroll-cue-move {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue span { animation: none; opacity: 0.5; }
}

/* ===================================================================
   Buttons
   =================================================================== */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.95rem 2.1rem;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.btn-outline {
  color: var(--ivory);
  border-color: rgba(230, 205, 156, 0.55);
  background: transparent;
}
.btn-outline:hover {
  background: rgba(230, 205, 156, 0.12);
  border-color: var(--gold-light);
}

.btn-solid {
  color: var(--midnight);
  background: var(--gold-light);
  border-color: var(--gold-light);
}
.btn-solid:hover {
  background: var(--gold);
  border-color: var(--gold);
}

/* ===================================================================
   Lace overlay -- delicate lace trim layered ON TOP of the hero and footer
   (only those two, per direction), not a flush divider block between every
   section. A genuine lace motif this time: a scalloped main thread with
   floral 4-petal florets on stems, a finer secondary scalloped thread,
   picot loops, and a faint diagonal net-mesh ground -- built and reviewed
   at actual tile scale before wiring in. Transparent (no background fill
   of its own) and low-opacity so it reads as lace floating over the scene,
   and drifts slowly rightward.
   =================================================================== */

.lace-overlay {
  position: absolute;
  left: 0;
  right: 0;
  height: 44px;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.hero .lace-overlay { bottom: 0; }
.site-footer .lace-overlay { top: 0; }

.lace-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='44'%3E%3Cg stroke='%23f7f1e6' stroke-opacity='0.16' stroke-width='0.35'%3E%3Cpath d='M0,4 L10,14 M10,4 L20,14 M20,4 L30,14 M30,4 L40,14 M40,4 L50,14 M50,4 L60,14 M60,4 L70,14 M70,4 L80,14'/%3E%3Cpath d='M0,14 L10,4 M10,14 L20,4 M20,14 L30,4 M30,14 L40,4 M40,14 L50,4 M50,14 L60,4 M60,14 L70,4 M70,14 L80,4'/%3E%3C/g%3E%3Cg fill='%23f7f1e6' fill-opacity='0.82'%3E%3Cg transform='translate(10,9)'%3E%3Ccircle cx='-1.5' cy='0' r='1.1'/%3E%3Ccircle cx='1.5' cy='0' r='1.1'/%3E%3Ccircle cx='0' cy='-1.5' r='1.1'/%3E%3Ccircle cx='0' cy='1.5' r='1.1'/%3E%3Ccircle r='0.9'/%3E%3C/g%3E%3Cg transform='translate(30,9)'%3E%3Ccircle cx='-1.5' cy='0' r='1.1'/%3E%3Ccircle cx='1.5' cy='0' r='1.1'/%3E%3Ccircle cx='0' cy='-1.5' r='1.1'/%3E%3Ccircle cx='0' cy='1.5' r='1.1'/%3E%3Ccircle r='0.9'/%3E%3C/g%3E%3Cg transform='translate(50,9)'%3E%3Ccircle cx='-1.5' cy='0' r='1.1'/%3E%3Ccircle cx='1.5' cy='0' r='1.1'/%3E%3Ccircle cx='0' cy='-1.5' r='1.1'/%3E%3Ccircle cx='0' cy='1.5' r='1.1'/%3E%3Ccircle r='0.9'/%3E%3C/g%3E%3Cg transform='translate(70,9)'%3E%3Ccircle cx='-1.5' cy='0' r='1.1'/%3E%3Ccircle cx='1.5' cy='0' r='1.1'/%3E%3Ccircle cx='0' cy='-1.5' r='1.1'/%3E%3Ccircle cx='0' cy='1.5' r='1.1'/%3E%3Ccircle r='0.9'/%3E%3C/g%3E%3C/g%3E%3Cg stroke='%23f7f1e6' stroke-opacity='0.5' stroke-width='0.5'%3E%3Cpath d='M10,11 L10,22 M30,11 L30,22 M50,11 L50,22 M70,11 L70,22'/%3E%3C/g%3E%3Cpath d='M0,22 A10,10 0 0 1 20,22 A10,10 0 0 1 40,22 A10,10 0 0 1 60,22 A10,10 0 0 1 80,22' fill='none' stroke='%23f7f1e6' stroke-opacity='0.85' stroke-width='0.9'/%3E%3Cg fill='%23f7f1e6' fill-opacity='0.85'%3E%3Ccircle cx='0' cy='22' r='0.9'/%3E%3Ccircle cx='20' cy='22' r='0.9'/%3E%3Ccircle cx='40' cy='22' r='0.9'/%3E%3Ccircle cx='60' cy='22' r='0.9'/%3E%3Ccircle cx='80' cy='22' r='0.9'/%3E%3C/g%3E%3Cpath d='M0,30 A6,6 0 0 0 12,30 A6,6 0 0 0 24,30 A6,6 0 0 0 36,30 A6,6 0 0 0 48,30 A6,6 0 0 0 60,30 A6,6 0 0 0 72,30 A6,6 0 0 0 80,30' fill='none' stroke='%23f7f1e6' stroke-opacity='0.5' stroke-width='0.55'/%3E%3Cg fill='none' stroke='%23f7f1e6' stroke-opacity='0.45' stroke-width='0.45'%3E%3Ccircle cx='6' cy='34' r='1.6'/%3E%3Ccircle cx='26' cy='34' r='1.6'/%3E%3Ccircle cx='46' cy='34' r='1.6'/%3E%3Ccircle cx='66' cy='34' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: 0 center;
  background-size: 80px 44px;
  opacity: 0.55;
  animation: lace-drift 46s linear infinite;
}

@keyframes lace-drift {
  from { background-position-x: 0; }
  to { background-position-x: 800px; }
}

@media (prefers-reduced-motion: reduce) {
  .lace-overlay::before { animation: none; }
}

/* ===================================================================
   Charm accents -- small jewelry-charm silhouettes (star/sparkle/moon/moth
   -- no chain shapes) scattered through section backgrounds, swaying
   gently like they're hanging from a thread. Sit behind .section-inner's
   content (z-index 2) so they never interfere with text even where they
   overlap it horizontally on narrow screens. Five per section, mixed
   symbols/sizes/timing, deliberately more numerous than a first pass so
   the page reads as populated rather than sparse.
   =================================================================== */

.charm-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.charm {
  position: absolute;
  aspect-ratio: 1;
  transform-origin: top center;
  opacity: 0.42;
  animation: charm-sway 6.5s ease-in-out infinite;
  /* Defaults, so a charm-field added to a new section degrades to "a small
     gold charm in the wrong spot" rather than a full-page black shape.
     Per-section rules below still override both. */
  width: 22px;
  fill: var(--gold);
}

/* the moth symbol's viewBox is 100/60, not square like star/moon/sparkle */
.charm-moth {
  aspect-ratio: 100 / 60;
}

@keyframes charm-sway {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}

.about .charm, .shop .charm, .reviews .charm {
  fill: var(--gold);
  --moth-wing-fill: rgba(201, 166, 104, 0.4);
  --moth-wing-stroke: var(--gold);
  --moth-body-fill: var(--gold);
  --moth-line: var(--gold);
}
.contact .charm, .site-footer .charm {
  fill: var(--gold-light);
  --moth-wing-fill: rgba(230, 205, 156, 0.4);
  --moth-wing-stroke: var(--gold-light);
  --moth-body-fill: var(--gold-light);
  --moth-line: var(--gold-light);
}

.about .charm-a { top: 10%;  left: 4%;   width: 26px; animation-duration: 7s; }
.about .charm-b { bottom: 8%; right: 5%;  width: 30px; animation-duration: 5.5s; animation-delay: -2s; }
.about .charm-c { top: 46%;  right: 9%;   width: 40px; animation-duration: 6.3s; animation-delay: -3.5s; }
.about .charm-d { bottom: 16%; left: 9%;  width: 22px; animation-duration: 5s;   animation-delay: -1.2s; }
.about .charm-e { top: 24%;  right: 22%;  width: 18px; animation-duration: 7.8s; animation-delay: -4.6s; }

.shop .charm-a { top: 6%;    right: 4%;  width: 28px; animation-duration: 6s;   animation-delay: -1s; }
.shop .charm-b { bottom: 6%; left: 3%;   width: 40px; animation-duration: 7.5s; animation-delay: -4s; }
.shop .charm-c { top: 42%;   left: 6%;   width: 20px; animation-duration: 5.4s; animation-delay: -2.8s; }
.shop .charm-d { bottom: 32%; right: 11%; width: 24px; animation-duration: 6.9s; animation-delay: -0.6s; }
.shop .charm-e { top: 16%;   left: 38%;  width: 16px; animation-duration: 8.2s; animation-delay: -5.3s; }

.reviews .charm-a { top: 14%;   right: 6%;  width: 24px; animation-duration: 6.6s; animation-delay: -1.4s; }
.reviews .charm-b { bottom: 12%; left: 4%;   width: 34px; animation-duration: 7.8s; animation-delay: -3.6s; }
.reviews .charm-c { top: 52%;   right: 16%; width: 16px; animation-duration: 5.7s; animation-delay: -2.1s; }
.reviews .charm-d { bottom: 34%; right: 4%;  width: 20px; animation-duration: 7.2s; animation-delay: -4.8s; }
.reviews .charm-e { top: 20%;   left: 30%;  width: 13px; animation-duration: 8.4s; animation-delay: -0.7s; }

.contact .charm-a { top: 8%;    left: 4%;   width: 34px; animation-duration: 6.8s; animation-delay: -3s; }
.contact .charm-b { bottom: 10%; right: 5%;  width: 24px; animation-duration: 5.8s; animation-delay: -1.5s; }
.contact .charm-c { top: 36%;   right: 16%; width: 18px; animation-duration: 7.1s; animation-delay: -4.2s; }
.contact .charm-d { bottom: 26%; left: 13%;  width: 26px; animation-duration: 6.1s; animation-delay: -0.9s; }
.contact .charm-e { top: 58%;   right: 6%;   width: 16px; animation-duration: 8.6s; animation-delay: -2.3s; }

.site-footer .charm-a { top: 12%;   left: 6%;   width: 22px; animation-duration: 7.2s; }
.site-footer .charm-b { top: 18%;   right: 6%;  width: 36px; animation-duration: 6.2s; animation-delay: -2.5s; }
.site-footer .charm-c { bottom: 16%; left: 22%; width: 18px; animation-duration: 5.6s; animation-delay: -3.8s; }
.site-footer .charm-d { bottom: 12%; right: 26%; width: 24px; animation-duration: 7.9s; animation-delay: -1.4s; }
.site-footer .charm-e { top: 42%;   left: 46%;  width: 14px; animation-duration: 6.6s; animation-delay: -4.9s; }

@media (max-width: 640px) {
  .charm-field { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .charm { animation: none; }
}

/* ===================================================================
   About
   =================================================================== */

.about {
  background: var(--ivory);
  text-align: left;
}
.about::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -8%;
  width: 55%;
  height: 70%;
  background: radial-gradient(ellipse closest-side, rgba(233, 211, 202, 0.55) 0%, transparent 70%);
  z-index: 0;
}

.about-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

.about-text p {
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--charcoal-soft);
  margin: 0 0 1.3rem;
}

.about-emblem {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
}
.emblem-moth {
  width: 100%;
  max-width: 180px;
  fill: none;
  --moth-wing-fill: rgba(201, 166, 104, 0.18);
  --moth-wing-stroke: var(--gold);
  --moth-body-fill: var(--gold);
  --moth-line: var(--gold);
  animation: emblem-moth-wander 14s ease-in-out infinite;
}

/* Slow, gentle flutter -- much slower than the hero moths' 1.6s so it reads
   as a moth idly resting/breathing rather than actively flying. */
.emblem-moth .wing-left {
  transform-box: fill-box;
  transform-origin: 100% 50%;
  animation: wing-flutter-l 3.4s ease-in-out infinite;
}
.emblem-moth .wing-right {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: wing-flutter-r 3.4s ease-in-out infinite;
}

/* Small, contained wander -- stays near its resting spot rather than
   drifting away like the hero moths do. */
@keyframes emblem-moth-wander {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(6px, -4px) rotate(1.5deg); }
  50%  { transform: translate(-4px, 3px) rotate(-1deg); }
  75%  { transform: translate(3px, 5px) rotate(1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .emblem-moth, .emblem-moth .wing-left, .emblem-moth .wing-right { animation: none; }
}

@media (max-width: 760px) {
  .about-grid { grid-template-columns: 1fr; gap: 2rem; }
  /* No "order" override here (unlike desktop) -- on mobile the moth should
     follow the text in natural DOM order, not jump above/between it. */
  .about-emblem { padding: 1rem 0 0; }
  .emblem-moth { max-width: 120px; }
}
/* ===================================================================
   Shop — filters, category sections, product cards
   =================================================================== */

.shop {
  background: linear-gradient(180deg, var(--ivory-2), #ece0d0);
  text-align: left;
}
.shop::before {
  content: "";
  position: absolute;
  bottom: 8%;
  right: -10%;
  width: 50%;
  /* Capped rather than a percentage: this section grows with the catalog,
     and a 65% glow on a 4000px section stops reading as a glow. */
  height: min(65%, 900px);
  background: radial-gradient(ellipse closest-side, rgba(201, 166, 104, 0.18) 0%, transparent 70%);
  z-index: 0;
}

/* --- filter chips --- */

.filter-bar {
  margin: 2.5rem 0 1rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(201, 166, 104, 0.3);
}

.chip-rows {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.chip-row {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 0.9rem;
  align-items: baseline;
}

.chip-row-label {
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  padding-top: 0.45rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(201, 166, 104, 0.5);
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.55);
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--charcoal);
  cursor: pointer;
  transition: transform 0.18s ease, background 0.22s ease,
              border-color 0.22s ease, color 0.22s ease;
}
.chip:hover {
  border-color: var(--gold);
  background: #fff;
  transform: translateY(-1px);
}
.chip:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.chip-count {
  font-size: 0.66rem;
  min-width: 1.1rem;
  padding: 0.05rem 0.3rem;
  border-radius: 20px;
  background: rgba(201, 166, 104, 0.2);
  color: var(--charcoal-soft);
  text-align: center;
  transition: background 0.22s ease, color 0.22s ease;
}

.chip.is-active {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--ivory);
}
.chip.is-active .chip-count {
  background: rgba(230, 205, 156, 0.28);
  color: var(--gold-light);
}

/* A star quietly appears on the selected chip. */
.chip.is-active .chip-label::before {
  content: "✦";
  margin-right: 0.35rem;
  color: var(--gold-light);
  font-size: 0.72em;
}

.chip-all { font-weight: 500; }

.filter-tail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px dashed rgba(201, 166, 104, 0.35);
}

.sort-control {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
}

.sort-control select {
  font-family: var(--font-body);
  font-size: 0.84rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--charcoal);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(201, 166, 104, 0.45);
  border-radius: 40px;
  padding: 0.45rem 2rem 0.45rem 0.9rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23c9a668' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 10px;
}
.sort-control select:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.filter-count {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--charcoal-soft);
}

/* --- the way back out, at the bottom --- */

.filter-footer {
  margin: 3.5rem auto 0;
  padding: 2rem 1.5rem;
  max-width: 480px;
  text-align: center;
  border-top: 1px solid rgba(201, 166, 104, 0.35);
}
.filter-footer-text {
  margin: 0 0 1.2rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--charcoal-soft);
}

.btn-outline-dark {
  border-color: var(--charcoal);
  color: var(--charcoal);
}
.btn-outline-dark:hover { background: var(--charcoal); color: var(--ivory); }

/* --- charms scattered between category sections --- */

.section-charm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding: 2.5rem 0 0.5rem;
  opacity: 0.5;
  pointer-events: none;
}
.section-charm .sc { fill: var(--gold); }
.section-charm .sc-1 { width: 10px; animation: sc-twinkle 4s ease-in-out infinite; }
.section-charm .sc-2 { width: 14px; animation: sc-twinkle 5.2s ease-in-out infinite -2s; }
.section-charm .sc-moth {
  width: 30px;
  --moth-wing-fill: rgba(201, 166, 104, 0.22);
  --moth-wing-stroke: rgba(201, 166, 104, 0.7);
  --moth-body-fill: rgba(201, 166, 104, 0.75);
  --moth-line: rgba(201, 166, 104, 0.6);
  animation: sc-bob 6s ease-in-out infinite;
}
@keyframes sc-twinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.1); }
}
@keyframes sc-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-7px) rotate(3deg); }
}

@media (max-width: 700px) {
  .chip-row { grid-template-columns: 1fr; gap: 0.45rem; }
  .chip-row-label { padding-top: 0; }
  .filter-tail { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
  .section-charm { gap: 1.6rem; padding-top: 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .chip, .section-charm .sc { transition: none; animation: none; }
}

.shop-loading,
.shop-error {
  padding: 3rem 0;
  color: var(--charcoal-soft);
  font-style: italic;
}

/* --- category sections --- */

.shop-category {
  padding-top: 2.5rem;
  /* Clears the fixed header when a jump-nav link lands here. */
  scroll-margin-top: 5rem;
}
.shop-category.is-empty { padding-bottom: 1rem; }

.shop-category-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--charcoal);
  margin: 0 0 1.6rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.shop-category-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(201, 166, 104, 0.5), transparent);
}

.shop-empty {
  color: var(--charcoal-soft);
  font-style: italic;
  margin: 0;
}

.shop-footnote {
  margin: 3.5rem 0 0;
  font-size: 0.86rem;
  color: var(--charcoal-soft);
  border-top: 1px solid rgba(201, 166, 104, 0.3);
  padding-top: 1.4rem;
}
.shop-footnote a {
  color: var(--charcoal);
  border-bottom: 1px solid var(--gold);
}
.shop-footnote a:hover { color: var(--gold); }

/* --- product cards --- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 2.2rem 1.8rem;
}

.product-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(44, 42, 48, 0.14);
}

.product-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: none;
  background: #e6dccd;
  cursor: pointer;
  overflow: hidden;
}
.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.product-card:hover .product-media img { transform: scale(1.045); }

.product-badge {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.32rem 0.6rem;
  border-radius: 2px;
  backdrop-filter: blur(4px);
}
.badge-unique { background: rgba(10, 12, 28, 0.72); color: var(--gold-light); }
.badge-made   { background: rgba(250, 245, 236, 0.85); color: var(--charcoal); }
.badge-sold   { background: rgba(90, 85, 96, 0.85); color: var(--ivory); }

.product-count {
  position: absolute;
  bottom: 0.7rem;
  right: 0.7rem;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--ivory);
  background: rgba(10, 12, 28, 0.55);
  padding: 0.25rem 0.5rem;
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.product-card:hover .product-count { opacity: 1; }

.product-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.1rem 1.1rem 1.3rem;
}

.product-name { margin: 0 0 0.3rem; }
.product-name-btn {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.06rem;
  line-height: 1.35;
  color: var(--charcoal);
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.product-name-btn:hover { color: var(--gold); }

.product-meta {
  margin: 0 0 0.7rem;
  font-size: 0.76rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
}

.product-price {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--charcoal);
}

/* Pushes the button to the bottom so cards of differing text length still
   line their calls-to-action up across a row. */
.btn-add,
.btn-ask {
  margin-top: auto;
  width: 100%;
  text-align: center;
  font-size: 0.76rem;
  padding: 0.75rem 1rem;
  background: none;
  border: 1px solid var(--charcoal);
  color: var(--charcoal);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.btn-add:hover,
.btn-ask:hover {
  background: var(--charcoal);
  color: var(--ivory);
}

.product-lead {
  margin: 0.7rem 0 0;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--charcoal-soft);
}

@media (max-width: 640px) {
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.5rem 1rem; }
  .product-body { padding: 0.9rem 0.8rem 1.1rem; }
  .filter-bar { gap: 0.9rem; }
  .filter-group { flex: 1 1 45%; }
  .filter-count { margin-left: 0; flex-basis: 100%; }
}

/* ===================================================================
   Contact
   =================================================================== */

.contact {
  background: linear-gradient(180deg, #14172f, #1c1a3a);
  text-align: left;
}
.contact::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -12%;
  width: 55%;
  height: 75%;
  background: radial-gradient(ellipse closest-side, rgba(230, 205, 156, 0.09) 0%, transparent 70%);
  z-index: 0;
}

.contact-form {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-row label {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250, 245, 236, 0.7);
}

.form-row input,
.form-row select,
.form-row textarea {
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--ivory);
  background: rgba(250, 245, 236, 0.06);
  border: 1px solid rgba(230, 205, 156, 0.3);
  border-radius: 3px;
  padding: 0.8rem 0.9rem;
  outline: none;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--gold-light);
  background: rgba(250, 245, 236, 0.1);
}

.form-row select option { color: #1a1a1a; }

.form-row textarea { resize: vertical; min-height: 120px; }

.contact-form .btn-solid {
  align-self: flex-start;
  border: none;
}

.form-note {
  font-size: 0.85rem;
  color: var(--gold-light);
  min-height: 1.2em;
  margin: 0;
}

/* ===================================================================
   Footer
   =================================================================== */

.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--midnight);
  padding: 3.5rem 0 2.5rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-wordmark {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--ivory);
  margin: 0 0 0.3rem;
}
.footer-tagline {
  font-size: 0.85rem;
  color: rgba(250, 245, 236, 0.55);
  margin: 0;
}

.footer-social {
  display: flex;
  gap: 1.6rem;
}
.social-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: rgba(250, 245, 236, 0.75);
  transition: color 0.25s ease;
}
.social-link:hover { color: var(--gold-light); }

.footer-contact {
  text-align: right;
  font-size: 0.85rem;
}
.footer-contact a {
  color: var(--gold-light);
  display: block;
  margin-bottom: 0.6rem;
}
.footer-copy {
  color: rgba(250, 245, 236, 0.4);
  margin: 0;
  font-size: 0.78rem;
}

@media (max-width: 640px) {
  .footer-inner { flex-direction: column; text-align: left; }
  .footer-contact { text-align: left; }
}

/* ===================================================================
   Responsive tune-ups
   =================================================================== */

@media (max-width: 480px) {
  section { padding: 4.5rem 0; }
  .section-inner { padding: 0 1.25rem; }
}

/* ===================================================================
   Cart, drawer, product modal, toast
   =================================================================== */

body.no-scroll { overflow: hidden; }

/* --- header additions --- */

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cart-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  color: var(--ivory);
  cursor: pointer;
  transition: color 0.25s ease;
}
.cart-toggle:hover { color: var(--gold-light); }

.cart-count {
  position: absolute;
  top: 3px;
  right: 1px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--gold);
  color: var(--midnight);
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 17px;
  text-align: center;
}

.nav-sublinks {
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0 0 0 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border-left: 1px solid rgba(230, 205, 156, 0.3);
}
.nav-sublinks a {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: rgba(250, 245, 236, 0.6);
}
.nav-sublinks a:hover { color: var(--gold-light); }

/* On desktop the sub-links would crowd the bar, so they only appear
   inside the open hamburger panel. */
@media (min-width: 761px) {
  .nav-sublinks { display: none; }
}

/* --- drawer --- */

.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(10, 12, 28, 0.5);
  backdrop-filter: blur(2px);
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  width: min(400px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--ivory);
  box-shadow: -12px 0 40px rgba(10, 12, 28, 0.28);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  /* Hidden from AT and the tab order until opened, since it stays in the
     DOM at all times to keep the slide animation. */
  visibility: hidden;
}
.cart-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 1.5rem 1rem;
  border-bottom: 1px solid rgba(201, 166, 104, 0.35);
}
.cart-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
}

.icon-btn {
  background: none;
  border: none;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--charcoal-soft);
  cursor: pointer;
  padding: 0 0.25rem;
}
.icon-btn:hover { color: var(--charcoal); }

.cart-empty {
  padding: 2.5rem 1.5rem;
  margin: 0;
  color: var(--charcoal-soft);
  font-style: italic;
  line-height: 1.6;
}

.cart-lines {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 1.5rem;
}

.cart-line {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 0.9rem;
  align-items: start;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(201, 166, 104, 0.22);
}

.cart-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
}

.cart-line-info { min-width: 0; }
.cart-line-name {
  margin: 0 0 0.2rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.3;
}
.cart-line-price {
  margin: 0 0 0.45rem;
  font-size: 0.88rem;
  color: var(--charcoal);
}
.cart-line-note {
  margin: 0.4rem 0 0;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
}

.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(201, 166, 104, 0.5);
  border-radius: 3px;
}
.qty-btn {
  width: 26px;
  height: 26px;
  background: none;
  border: none;
  color: var(--charcoal);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}
.qty-btn:disabled { opacity: 0.3; cursor: default; }
.qty-value {
  min-width: 24px;
  text-align: center;
  font-size: 0.85rem;
}

.cart-remove {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--charcoal-soft);
  text-decoration: underline;
  cursor: pointer;
}
.cart-remove:hover { color: var(--charcoal); }

.cart-foot {
  padding: 1.2rem 1.5rem 1.5rem;
  border-top: 1px solid rgba(201, 166, 104, 0.35);
  background: rgba(242, 233, 219, 0.6);
}

.cart-lead {
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--charcoal-soft);
}

.cart-totals {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem 1rem;
  margin: 0 0 1.1rem;
  font-size: 0.9rem;
}
.cart-totals dt { color: var(--charcoal-soft); }
.cart-totals dd { margin: 0; text-align: right; }
.cart-totals .is-total {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--charcoal);
  padding-top: 0.4rem;
  border-top: 1px solid rgba(201, 166, 104, 0.35);
}

.cart-checkout { width: 100%; }
.cart-checkout:disabled { opacity: 0.6; cursor: wait; }

.cart-error {
  margin: 0.8rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #9c3a3a;
}
.cart-error:empty { margin: 0; }

.cart-note {
  margin: 0.9rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--charcoal-soft);
  text-align: center;
}

/* --- product modal --- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(10, 12, 28, 0.66);
  backdrop-filter: blur(3px);
  overflow-y: auto;
}

.modal-panel {
  position: relative;
  width: min(940px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--ivory);
  border-radius: 6px;
  box-shadow: 0 24px 70px rgba(10, 12, 28, 0.45);
}

.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.9rem;
  z-index: 2;
  font-size: 2rem;
  color: var(--charcoal);
}

.modal-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 2rem;
}

.modal-main-image {
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  overflow: hidden;
  background: #e6dccd;
}
.modal-main-image img { width: 100%; height: 100%; object-fit: cover; }

.modal-thumbs {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.modal-thumb {
  width: 62px;
  height: 62px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.modal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.modal-thumb:hover { opacity: 1; }
.modal-thumb.is-active { opacity: 1; border-color: var(--gold); }

.modal-info { padding-top: 0.5rem; }

.modal-badge {
  display: inline-block;
  margin: 0 0 0.8rem;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.32rem 0.6rem;
  border-radius: 2px;
}

.modal-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.25;
}

.modal-price {
  margin: 0 0 1.2rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--gold);
}

.modal-description {
  margin: 0 0 1.4rem;
  line-height: 1.75;
  color: var(--charcoal-soft);
}

.modal-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1.2rem;
  margin: 0 0 1.6rem;
  padding: 1.1rem 0;
  border-top: 1px solid rgba(201, 166, 104, 0.3);
  border-bottom: 1px solid rgba(201, 166, 104, 0.3);
  font-size: 0.86rem;
}
.modal-details dt {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  padding-top: 0.15rem;
}
.modal-details dd { margin: 0; color: var(--charcoal); }

.modal-add { width: 100%; }

.modal-lead,
.modal-care {
  margin: 0.9rem 0 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--charcoal-soft);
}

.modal-pairs { margin-top: 1.8rem; }
.modal-pairs h4 {
  margin: 0 0 0.8rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  font-weight: 500;
}
.modal-pairs-row { display: flex; flex-wrap: wrap; gap: 0.7rem; }

.pair-chip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.8rem 0.35rem 0.35rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(201, 166, 104, 0.4);
  border-radius: 40px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--charcoal);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.pair-chip:hover { border-color: var(--gold); background: #fff; }
.pair-chip img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }

@media (max-width: 800px) {
  .modal-body { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem; }
  .modal-panel { max-height: 94vh; }
}

/* --- toast --- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.75rem;
  z-index: 120;
  transform: translate(-50%, 1.5rem);
  max-width: min(420px, calc(100vw - 2rem));
  padding: 0.85rem 1.4rem;
  border-radius: 40px;
  background: var(--midnight-2);
  color: var(--ivory);
  font-size: 0.85rem;
  text-align: center;
  box-shadow: 0 12px 34px rgba(10, 12, 28, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* --- misc additions --- */

.contact-lead {
  max-width: 560px;
  margin: -0.5rem 0 2rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(250, 245, 236, 0.65);
}

.footer-policy-link {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 0.8rem;
  color: rgba(250, 245, 236, 0.7);
  border-bottom: 1px solid rgba(201, 166, 104, 0.4);
  padding-bottom: 2px;
}
.footer-policy-link:hover { color: var(--gold-light); }

@media (prefers-reduced-motion: reduce) {
  .cart-drawer,
  .toast,
  .product-media img,
  .product-card { transition: none; }
}

/* ===================================================================
   Thank-you page
   =================================================================== */

.thanks-page {
  background: radial-gradient(ellipse at 50% 0%, #1b1a35 0%, var(--midnight) 70%);
  color: var(--ivory);
  min-height: 100vh;
}

/* Sits above everything, catches nothing. */
.trail-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 60;
}

/* The stage the name is drawn on. The heading underneath stays in the DOM
   for screen readers; once the canvas takes over it is hidden visually
   only, never removed. */
.constellation-stage {
  position: relative;
  width: 100%;
  height: clamp(150px, 26vw, 250px);
  margin: 0 0 0.5rem;
}
.constellation-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.constellation-stage .thanks-title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
/* Only hidden once JS has confirmed it can actually draw. */
.constellation-stage.is-drawing .thanks-title {
  opacity: 0;
  pointer-events: none;
}

.thanks {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: clamp(3rem, 9vh, 6rem) 1.5rem 4rem;
}

.thanks-inner {
  width: min(620px, 100%);
  text-align: center;
}

.thanks-title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
/* Only hidden once JS has confirmed it can actually draw. */
.constellation-stage.is-drawing .thanks-title {
  opacity: 0;
  pointer-events: none;
}

.thanks {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: clamp(3rem, 9vh, 6rem) 1.5rem 4rem;
}

.thanks-inner {
  width: min(620px, 100%);
  text-align: center;
}

.thanks-moth {
  width: 96px;
  margin: 0 auto 1.75rem;
  animation: thanks-flutter 5s ease-in-out infinite;
}
@keyframes thanks-flutter {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-10px) rotate(2deg); }
}

.thanks-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 6vw, 3.1rem);
  margin: 0 0 1rem;
  color: var(--ivory);
}

.thanks-lede {
  margin: 0 auto 2.5rem;
  max-width: 44ch;
  line-height: 1.8;
  color: rgba(250, 245, 236, 0.72);
}

.thanks-order,
.thanks-next {
  text-align: left;
  margin: 0 0 2rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid rgba(201, 166, 104, 0.28);
  border-radius: 6px;
  background: rgba(250, 245, 236, 0.04);
}

.thanks-order h2,
.thanks-next h2 {
  margin: 0 0 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gold-light);
}

.thanks-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.thanks-items li {
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(201, 166, 104, 0.16);
  font-family: var(--font-display);
  font-size: 1.02rem;
}
.thanks-items li:last-child { border-bottom: none; }

.thanks-total {
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(201, 166, 104, 0.3);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  color: var(--gold-light);
}

.thanks-next ol {
  margin: 0;
  padding-left: 1.2rem;
  color: rgba(250, 245, 236, 0.75);
  line-height: 1.75;
}
.thanks-next li { padding-left: 0.3rem; margin-bottom: 0.5rem; }
.thanks-next li:last-child { margin-bottom: 0; }

.thanks-care {
  margin: 0 auto 2.25rem;
  max-width: 46ch;
  font-size: 0.84rem;
  line-height: 1.7;
  color: rgba(250, 245, 236, 0.55);
}
.thanks-care a,
.thanks-lede a {
  color: var(--gold-light);
  border-bottom: 1px solid rgba(201, 166, 104, 0.5);
}

/* ===================================================================
   Document pages (policies)
   =================================================================== */

.doc-page { background: var(--ivory); }

.doc-header {
  position: static;
  background: var(--midnight);
}
.doc-header .nav-links { display: flex; }

.doc {
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem 4rem;
}

.doc-inner {
  max-width: 720px;
  margin: 0 auto;
}

.doc-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 2.9rem);
  margin: 0 0 1rem;
  color: var(--charcoal);
}

.doc-lede {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--charcoal-soft);
  margin: 0 0 2.5rem;
}

.doc-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  padding: 1.25rem 0;
  margin-bottom: 1rem;
  border-top: 1px solid rgba(201, 166, 104, 0.35);
  border-bottom: 1px solid rgba(201, 166, 104, 0.35);
}
.doc-toc a {
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(201, 166, 104, 0.4);
  border-radius: 40px;
  transition: background 0.2s ease, color 0.2s ease;
}
.doc-toc a:hover {
  background: var(--charcoal);
  color: var(--ivory);
}

.doc-section {
  padding-top: 2.75rem;
  scroll-margin-top: 1.5rem;
}

.doc-section h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.55rem;
  margin: 0 0 1.1rem;
  color: var(--charcoal);
}

.doc-section h3 {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gold);
  margin: 1.9rem 0 0.6rem;
}

.doc-section p {
  line-height: 1.85;
  color: var(--charcoal-soft);
  margin: 0 0 1.15rem;
}
.doc-section strong { color: var(--charcoal); font-weight: 500; }
.doc-section a {
  color: var(--charcoal);
  border-bottom: 1px solid var(--gold);
}
.doc-section a:hover { color: var(--gold); }

.doc-aside {
  padding: 1.1rem 1.4rem;
  border-left: 2px solid var(--gold);
  background: rgba(201, 166, 104, 0.07);
  font-style: italic;
}

.doc-updated {
  margin: 3rem 0 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(201, 166, 104, 0.35);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--charcoal-soft);
}

.doc-footer { padding-top: 3rem; }

/* The header is transparent so it can sit over the hero's night sky, but
   the page below it is cream — white nav text on cream is unreadable. Once
   the hero is scrolled past, give it a real background. */
.site-header {
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-scrolled {
  background: rgba(10, 12, 28, 0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 20px rgba(10, 12, 28, 0.25);
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}

/* Anchored sections must clear the fixed header when jumped to. */
#shop, #about, #contact { scroll-margin-top: 4.5rem; }

/* ===================================================================
   Thank-you page
   =================================================================== */

.thanks-page {
  background: radial-gradient(ellipse at 50% 0%, #1b1a35 0%, var(--midnight) 70%);
  color: var(--ivory);
  min-height: 100vh;
}

/* Sits above everything, catches nothing. */
.trail-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 60;
}

/* The stage the name is drawn on. The heading underneath stays in the DOM
   for screen readers; once the canvas takes over it is hidden visually
   only, never removed. */
.constellation-stage {
  position: relative;
  width: 100%;
  height: clamp(150px, 26vw, 250px);
  margin: 0 0 0.5rem;
}
.constellation-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.constellation-stage .thanks-title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
/* Only hidden once JS has confirmed it can actually draw. */
.constellation-stage.is-drawing .thanks-title {
  opacity: 0;
  pointer-events: none;
}

.thanks {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: clamp(3rem, 9vh, 6rem) 1.5rem 4rem;
}

.thanks-inner {
  width: min(620px, 100%);
  text-align: center;
}

.thanks-moth {
  width: 96px;
  margin: 0 auto 1.75rem;
  animation: thanks-flutter 5s ease-in-out infinite;
}
@keyframes thanks-flutter {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-10px) rotate(2deg); }
}

.thanks-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 6vw, 3.1rem);
  margin: 0 0 1rem;
  color: var(--ivory);
}

.thanks-lede {
  margin: 0 auto 2.5rem;
  max-width: 44ch;
  line-height: 1.8;
  color: rgba(250, 245, 236, 0.72);
}

.thanks-order,
.thanks-next {
  text-align: left;
  margin: 0 0 2rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid rgba(201, 166, 104, 0.28);
  border-radius: 6px;
  background: rgba(250, 245, 236, 0.04);
}

.thanks-order h2,
.thanks-next h2 {
  margin: 0 0 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gold-light);
}

.thanks-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.thanks-items li {
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(201, 166, 104, 0.16);
  font-family: var(--font-display);
  font-size: 1.02rem;
}
.thanks-items li:last-child { border-bottom: none; }

.thanks-total {
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(201, 166, 104, 0.3);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  color: var(--gold-light);
}

.thanks-next ol {
  margin: 0;
  padding-left: 1.2rem;
  color: rgba(250, 245, 236, 0.75);
  line-height: 1.75;
}
.thanks-next li { padding-left: 0.3rem; margin-bottom: 0.5rem; }
.thanks-next li:last-child { margin-bottom: 0; }

.thanks-care {
  margin: 0 auto 2.25rem;
  max-width: 46ch;
  font-size: 0.84rem;
  line-height: 1.7;
  color: rgba(250, 245, 236, 0.55);
}
.thanks-care a,
.thanks-lede a {
  color: var(--gold-light);
  border-bottom: 1px solid rgba(201, 166, 104, 0.5);
}

/* ===================================================================
   Document pages (policies)
   =================================================================== */

.doc-page { background: var(--ivory); }

.doc-header {
  position: static;
  background: var(--midnight);
}
.doc-header .nav-links { display: flex; }

.doc {
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem 4rem;
}

.doc-inner {
  max-width: 720px;
  margin: 0 auto;
}

.doc-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 2.9rem);
  margin: 0 0 1rem;
  color: var(--charcoal);
}

.doc-lede {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--charcoal-soft);
  margin: 0 0 2.5rem;
}

.doc-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  padding: 1.25rem 0;
  margin-bottom: 1rem;
  border-top: 1px solid rgba(201, 166, 104, 0.35);
  border-bottom: 1px solid rgba(201, 166, 104, 0.35);
}
.doc-toc a {
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(201, 166, 104, 0.4);
  border-radius: 40px;
  transition: background 0.2s ease, color 0.2s ease;
}
.doc-toc a:hover {
  background: var(--charcoal);
  color: var(--ivory);
}

.doc-section {
  padding-top: 2.75rem;
  scroll-margin-top: 1.5rem;
}

.doc-section h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.55rem;
  margin: 0 0 1.1rem;
  color: var(--charcoal);
}

.doc-section h3 {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gold);
  margin: 1.9rem 0 0.6rem;
}

.doc-section p {
  line-height: 1.85;
  color: var(--charcoal-soft);
  margin: 0 0 1.15rem;
}
.doc-section strong { color: var(--charcoal); font-weight: 500; }
.doc-section a {
  color: var(--charcoal);
  border-bottom: 1px solid var(--gold);
}
.doc-section a:hover { color: var(--gold); }

.doc-aside {
  padding: 1.1rem 1.4rem;
  border-left: 2px solid var(--gold);
  background: rgba(201, 166, 104, 0.07);
  font-style: italic;
}

.doc-updated {
  margin: 3rem 0 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(201, 166, 104, 0.35);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--charcoal-soft);
}

.doc-footer { padding-top: 3rem; }

/* The header is transparent so it can sit over the hero's night sky, but
   the page below it is cream — white nav text on cream is unreadable. Once
   the hero is scrolled past, give it a real background. */
.site-header {
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-scrolled {
  background: rgba(10, 12, 28, 0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 20px rgba(10, 12, 28, 0.25);
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}

/* Anchored sections must clear the fixed header when jumped to. */
#shop, #about, #contact { scroll-margin-top: 4.5rem; }

/* ===================================================================
   Empty result state
   =================================================================== */

/* A filter that finds nothing is a person telling us exactly what they
   want. Give it room and a route to a custom order, not a bare line of
   grey text. */
.no-results {
  margin: 3rem auto;
  max-width: 520px;
  padding: 2.5rem 2rem;
  text-align: center;
  border: 1px solid rgba(201, 166, 104, 0.45);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.5);
}

.no-results-title {
  margin: 0 0 0.8rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--charcoal);
}

.no-results-body {
  margin: 0 0 1.8rem;
  line-height: 1.75;
  color: var(--charcoal-soft);
}

.no-results-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
.no-results-actions .btn { flex: 0 1 auto; }

/* The outline button is drawn for the dark hero; on the cream shop
   background it needs the ink colours instead. */
.btn-outline-dark {
  border-color: var(--charcoal);
  color: var(--charcoal);
}
.btn-outline-dark:hover {
  background: var(--charcoal);
  color: var(--ivory);
}

.footer-location {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(250, 245, 236, 0.55);
}
.footer-location span { color: var(--gold-light); }

/* ===================================================================
   Ambient particle fields
   =================================================================== */

.particle-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Sits above the star layers but below the moths and the hero copy. */
.particle-hero { z-index: 2; }

.particle-moth {
  /* Bleeds past the emblem box so motes drift out around the moth rather
     than stopping at an invisible edge. */
  inset: -18%;
  width: 136%;
  height: 136%;
  z-index: 0;
}

/* The about-section moth was reading as a heavy grey slab. Thin the wing
   fill right down and let the outline carry the shape instead. */
.about-emblem { position: relative; }
.emblem-moth {
  position: relative;
  z-index: 1;
  opacity: 0.62;
  --moth-wing-fill: rgba(250, 245, 236, 0.14);
  --moth-wing-stroke: rgba(201, 166, 104, 0.55);
  --moth-body-fill: rgba(242, 233, 219, 0.55);
  --moth-line: rgba(201, 166, 104, 0.45);
}

/* Extra charms for the shop section — the grid has generous gutters and
   they were reading as dead space. Kept low-contrast and behind the cards
   so they decorate without competing with the photography. */
.shop .charm-f { top: 30%;    right: 3%;  width: 14px; animation-duration: 7.4s; animation-delay: -2.2s; }
.shop .charm-g { top: 62%;    left: 2%;   width: 26px; animation-duration: 8.1s; animation-delay: -5.1s; }
.shop .charm-h { bottom: 14%; right: 6%;  width: 18px; animation-duration: 6.4s; animation-delay: -3.3s; }
.shop .charm-i { top: 78%;    right: 14%; width: 16px; animation-duration: 7.7s; animation-delay: -1.1s; }
.shop .charm-j { bottom: 42%; left: 12%;  width: 12px; animation-duration: 5.9s; animation-delay: -4.4s; }

.chip-more {
  border-style: dashed;
  background: none;
  color: var(--charcoal-soft);
}
.chip-more:hover { color: var(--charcoal); background: rgba(255,255,255,0.6); }

/* ===================================================================
   Reviews
   =================================================================== */

.reviews {
  background: linear-gradient(180deg, #ece0d0, var(--ivory-2));
  text-align: left;
}

.review-summary {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: -0.4rem 0 2rem;
}
.review-average {
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  color: var(--charcoal-soft);
}

.stars {
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: 0.12em;
}

.review-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.review-card {
  padding: 1.6rem 1.5rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(201, 166, 104, 0.3);
  border-radius: 6px;
}

.review-text {
  margin: 0.7rem 0 1rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.7;
  color: var(--charcoal);
}

.review-meta {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--charcoal-soft);
}
.review-name { font-weight: 500; color: var(--charcoal); }
.review-piece { border-bottom: 1px solid var(--gold); }
.review-piece:hover { color: var(--gold); }

.review-empty {
  margin: 0;
  padding: 2rem 0;
  font-style: italic;
  line-height: 1.7;
  color: var(--charcoal-soft);
}

.review-cta {
  margin-top: 2.2rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(201, 166, 104, 0.3);
}

@media (max-width: 640px) {
  .review-list { grid-template-columns: 1fr; gap: 1rem; }
  .review-card { padding: 1.3rem 1.2rem; }
  .review-cta .btn { width: 100%; text-align: center; }
}

/* Anchored sections must clear the fixed header when jumped to. */
#shop, #about, #contact, #reviews,
#sets, #necklaces, #earrings, #bracelets { scroll-margin-top: 5rem; }

/* ===================================================================
   Mobile refinements
   -------------------------------------------------------------------
   Touch targets and minimum type sizes. Apple and Google both put the
   comfortable target at ~44px; several controls here were landing near
   30px, which is fine with a mouse and fiddly with a thumb.
   =================================================================== */

@media (max-width: 760px) {
  /* The hamburger is the primary navigation control on a phone and was
     38x31 — the single most important thing on this list to fix. */
  .nav-toggle {
    width: 44px;
    height: 44px;
    align-items: center;
    padding: 0;
  }
  .cart-toggle { width: 44px; height: 44px; }

  .nav-brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Filter chips are tapped constantly; give them a thumb-sized row. */
  .chip {
    min-height: 40px;
    padding: 0.5rem 0.95rem;
    font-size: 0.85rem;
  }
  .chip-count { font-size: 0.72rem; }
  .chip-row-label { font-size: 0.7rem; }

  /* Badges were under 10px — legible on a desktop monitor, not in a hand. */
  .modal-badge { font-size: 0.72rem; }
  .cart-line-note { font-size: 0.72rem; }

  /* Policy page table of contents: same reasoning as the chips. */
  .doc-toc a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
  }

  /* The scroll cue was a 1px-wide anchor. Keep the hairline, widen the
     part a thumb has to find. */
  .scroll-cue {
    padding: 0 18px;
    display: flex;
    justify-content: center;
  }

  /* Cart drawer controls */
  .qty-btn { width: 36px; height: 36px; }
  .cart-remove { padding: 0.5rem 0; }
  .icon-btn { min-width: 44px; min-height: 44px; }

  /* Footer links sit close together; space them for thumbs. */
  .social-link,
  .footer-policy-link,
  .footer-contact a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* The sort control is a real target, not decoration. */
  .sort-control select { min-height: 42px; padding-block: 0.6rem; }
  .sort-control { font-size: 0.7rem; }

  /* The card image above it opens the same detail view and is a large
     target, so this only needs enough padding to stop being fiddly. */
  .product-name-btn { padding: 0.45rem 0; }

  .product-badge,
  .product-count { font-size: 0.72rem; }

  /* Give the shop a little more room by trimming section padding. */
  .shop-category { padding-top: 1.8rem; }
  .filter-bar { margin-top: 1.8rem; }
}

/* Very narrow phones: two columns is still right for jewelry (you want to
   compare pieces), but the cards need to give up some padding. */
@media (max-width: 400px) {
  .product-grid { gap: 1.2rem 0.8rem; }
  .product-body { padding: 0.8rem 0.7rem 1rem; }
  .product-name-btn { font-size: 0.95rem; }
  .btn-add, .btn-ask { font-size: 0.7rem; padding: 0.7rem 0.5rem; }
  .section-inner { padding: 0 1.1rem; }
}

/* ===================================================================
   Sold pieces
   -------------------------------------------------------------------
   Kept on the page on purpose. A sold-out piece is evidence the work
   sells, and it routes an interested visitor toward a commission — so it
   is dimmed and moved to the end, never hidden.
   =================================================================== */

.product-card.is-sold { background: rgba(255, 255, 255, 0.28); }

.product-card.is-sold .product-media img {
  filter: grayscale(0.55) brightness(0.94);
  opacity: 0.72;
  transition: filter 0.4s ease, opacity 0.4s ease;
}
/* Restore it on hover — someone who lingers is interested, and the piece
   should look its best when they do. */
.product-card.is-sold:hover .product-media img {
  filter: grayscale(0.15) brightness(1);
  opacity: 0.92;
}

.product-card.is-sold .product-name-btn,
.product-card.is-sold .product-price { color: var(--charcoal-soft); }
.product-card.is-sold .product-price { text-decoration: line-through; }

.badge-sold {
  background: rgba(44, 42, 48, 0.82);
  color: var(--ivory);
  letter-spacing: 0.18em;
}

/* Marks where the sold pieces start within a category. */
.product-card.starts-sold {
  position: relative;
  margin-top: 2.6rem;
}
.product-card.starts-sold::before {
  content: "Already found homes";
  position: absolute;
  top: -1.9rem;
  left: 0;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .product-card.is-sold .product-media img { transition: none; }
}