/* ==========================================================================
   DKL Adorned — Design System & Stylesheet
   Art Direction: Warm artisanal atelier luxury pairing botanical jewel tones
   (rich garnet burgundy and antique patina teal over textured warm linen cream)
   with editorial optical serif typography (Fraunces) and understated modern
   geometric sans (Outfit), celebrating the organic textures, resin swirls,
   and intimate tactile craft of handmade jewelry.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS (CSS Variables)
   -------------------------------------------------------------------------- */
:root {
  /* Color System: Canvas & Surfaces */
  --color-canvas: #f8f4ee;
  --color-canvas-subtle: #f0e9df;
  --color-canvas-warm: #ede3d4;
  --color-surface: #fffcf9;
  --color-surface-elevated: #ffffff;
  --color-surface-translucent: rgba(248, 244, 238, 0.88);
  --color-surface-dark: #241215;
  --color-surface-dark-card: #2e181c;

  /* Color System: Typography & Contrast (WCAG AA & AAA verified) */
  --color-ink: #2b171a;           /* 13.5:1 on canvas (AAA) */
  --color-ink-soft: #5c4749;      /* 6.9:1 on canvas (AA) */
  --color-ink-muted: #7d686a;     /* 4.7:1 on canvas (AA) */
  --color-ink-faint: #ad9a9c;
  --color-text-inverse: #fdfbf7;  /* 15.2:1 on dark (AAA) */
  --color-text-inverse-soft: #ded1cf; /* 10.8:1 on dark (AAA) */

  /* Color System: Brand Jewels (Burgundy / Garnet) */
  --color-garnet: #7c2334;        /* 6.8:1 on canvas (AA) */
  --color-garnet-deep: #4e141f;   /* 10.9:1 on canvas (AAA) */
  --color-garnet-light: #9a3245;
  --color-garnet-tint: rgba(124, 35, 52, 0.08);
  --color-garnet-glow: rgba(124, 35, 52, 0.18);

  /* Color System: Mineral Accent (Patina Teal) */
  --color-teal: #206763;          /* 5.6:1 on canvas (AA) */
  --color-teal-deep: #164946;
  --color-teal-light: #328782;
  --color-teal-tint: rgba(32, 103, 99, 0.09);

  /* Color System: Metallic Accent (Atelier Warm Gold / Brass) */
  --color-gold: #9d7331;          /* 4.6:1 on canvas (AA large text) */
  --color-gold-deep: #785621;
  --color-gold-light: #c29853;
  --color-gold-tint: rgba(157, 115, 49, 0.12);
  --color-gold-border: rgba(157, 115, 49, 0.28);

  /* Color System: Hairlines & Borders */
  --color-border-subtle: #ebdcd0;
  --color-border: #dfcfc2;
  --color-border-strong: #c8b6a6;

  /* Backward Compatibility Aliases */
  --cream: var(--color-canvas);
  --cream-deep: var(--color-canvas-subtle);
  --ink: var(--color-ink);
  --ink-soft: var(--color-ink-soft);
  --burgundy: var(--color-garnet);
  --burgundy-deep: var(--color-garnet-deep);
  --teal: var(--color-teal);
  --line: var(--color-border);
  --white: var(--color-surface);

  /* Typography: Type Families (Max 2 fonts: Fraunces + Outfit) */
  --font-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --font-sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: var(--font-serif);
  --sans: var(--font-sans);

  /* Typography: Fluid Modular Scale */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --text-sm: clamp(0.85rem, 0.82rem + 0.18vw, 0.94rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --text-md: clamp(1.12rem, 1.05rem + 0.35vw, 1.25rem);
  --text-lg: clamp(1.3rem, 1.18rem + 0.6vw, 1.55rem);
  --text-xl: clamp(1.55rem, 1.35rem + 1vw, 2rem);
  --text-2xl: clamp(1.9rem, 1.6rem + 1.5vw, 2.6rem);
  --text-3xl: clamp(2.4rem, 1.9rem + 2.5vw, 3.6rem);

  /* Spacing Scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6rem;

  /* Shape Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Shadows & Atmospheric Elevation */
  --shadow-xs: 0 1px 3px rgba(43, 23, 26, 0.04);
  --shadow-sm: 0 4px 12px rgba(43, 23, 26, 0.05), 0 1px 3px rgba(43, 23, 26, 0.03);
  --shadow-md: 0 10px 28px rgba(43, 23, 26, 0.07), 0 2px 6px rgba(124, 35, 52, 0.04);
  --shadow-lg: 0 20px 48px rgba(43, 23, 26, 0.09), 0 4px 14px rgba(124, 35, 52, 0.06);
  --shadow-lift: 0 24px 56px rgba(43, 23, 26, 0.12), 0 6px 18px rgba(124, 35, 52, 0.08);
  --shadow-dark: 0 20px 48px rgba(20, 8, 10, 0.35);
  --shadow: var(--shadow-md);

  /* Layout Limits */
  --max: 1140px;
  --header-height: 72px;

  /* Animation & Motion Curves */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 180ms;
  --duration-normal: 300ms;
  --duration-slow: 600ms;
}

/* --------------------------------------------------------------------------
   2. CSS RESET & GLOBAL RESILIENCE
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-canvas);
  background-image:
    radial-gradient(1100px 520px at 95% -4%, rgba(157, 115, 49, 0.07), transparent 60%),
    radial-gradient(850px 460px at -5% 12%, rgba(124, 35, 52, 0.06), transparent 55%),
    radial-gradient(900px 500px at 105% 55%, rgba(32, 103, 99, 0.05), transparent 60%),
    radial-gradient(700px 400px at 15% 95%, rgba(124, 35, 52, 0.05), transparent 50%);
  background-attachment: fixed;
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 380;
  line-height: 1.7;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  flex: 1 0 auto;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-garnet);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--color-garnet-deep);
}

/* --------------------------------------------------------------------------
   3. ACCESSIBILITY & FOCUS MANAGEMENT
   -------------------------------------------------------------------------- */
.skip {
  position: absolute;
  left: 1rem;
  top: 1rem;
  transform: translateY(-200%);
  background: var(--color-garnet-deep);
  color: var(--color-text-inverse);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-gold-border);
  z-index: 100;
  transition: transform var(--duration-normal) var(--ease-spring);
}

.skip:focus,
.skip:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--color-gold-light);
  outline-offset: 2px;
}

:focus-visible {
  outline: 2px solid var(--color-garnet);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY SYSTEM
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 460;
  letter-spacing: -0.025em;
  line-height: 1.18;
  color: var(--color-garnet-deep);
  margin: 0 0 0.55em;
  font-feature-settings: "liga" 1, "dlig" 1;
}

h1 {
  font-size: var(--text-3xl);
  line-height: 1.1;
}

h2 {
  font-size: var(--text-2xl);
  line-height: 1.18;
}

h3 {
  font-size: var(--text-lg);
  line-height: 1.28;
}

p {
  margin: 0 0 1.25em;
  color: var(--color-ink-soft);
}

.lede {
  font-size: var(--text-md);
  color: var(--color-ink-soft);
  max-width: 42rem;
  margin-inline: auto;
  line-height: 1.62;
  font-weight: 380;
}

.tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-garnet-deep);
  letter-spacing: -0.01em;
  line-height: 1.35;
  text-align: center;
  margin: 2rem 0 0;
}

.rule {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border), transparent);
  margin: var(--space-xl) auto;
  max-width: var(--max);
}

/* --------------------------------------------------------------------------
   5. CONTAINER & LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
  width: min(var(--max), calc(100% - 2.8rem));
  margin-inline: auto;
}

section {
  padding: var(--space-xl) 0;
  position: relative;
}

.center {
  text-align: center;
}

/* --------------------------------------------------------------------------
   6. SITE HEADER & NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--color-surface-translucent);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background-color var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}

.site-header.scrolled {
  background: rgba(255, 252, 249, 0.94);
  border-bottom-color: var(--color-border);
  box-shadow: 0 8px 30px rgba(43, 23, 26, 0.06), 0 1px 3px rgba(157, 115, 49, 0.05);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
  padding: 0.4rem 0;
}

/* Wordmark with artisanal hallmark dot */
.wordmark {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 560;
  letter-spacing: 0.02em;
  color: var(--color-garnet-deep);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  position: relative;
  transition: transform var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.wordmark::after {
  content: "•";
  font-size: 0.9rem;
  color: var(--color-gold);
  opacity: 0.85;
}

.wordmark:hover {
  color: var(--color-garnet);
  transform: translateY(-1px);
}

/* Desktop Navigation */
.nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav a {
  position: relative;
  color: var(--color-ink-soft);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.94rem;
  font-weight: 440;
  letter-spacing: 0.02em;
  padding: 0.55rem 0.95rem;
  border-radius: var(--radius-full);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-garnet);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--duration-normal) var(--ease-out);
}

.nav a:hover {
  color: var(--color-garnet-deep);
  background-color: var(--color-garnet-tint);
}

.nav a:hover::after {
  transform: scaleX(0.7);
}

.nav a[aria-current="page"] {
  color: var(--color-garnet-deep);
  font-weight: 560;
  background-color: rgba(124, 35, 52, 0.06);
}

.nav a[aria-current="page"]::after {
  transform: scaleX(1);
  background: var(--color-garnet);
}

/* Mobile Nav Toggle Button */
.nav-toggle {
  display: none;
  min-height: 44px;
  min-width: 44px;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.45rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-garnet-deep);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.nav-toggle:hover {
  background-color: var(--color-surface-elevated);
  border-color: var(--color-garnet);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   7. HERO COMPOSITION: MEET THE MAKER (index.html signature moment)
   -------------------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 1.08fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  min-height: calc(100svh - var(--header-height));
  padding: clamp(2rem, 4vw, 4rem) 0;
  max-width: var(--max);
  margin-inline: auto;
  width: min(var(--max), calc(100% - 2.8rem));
}

.hero-photo {
  position: relative;
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Arched architectural atelier portrait frame */
.hero-photo picture {
  display: block;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 3 / 4;
  border-radius: 240px 240px var(--radius-xl) var(--radius-xl);
  overflow: hidden;
  position: relative;
  background-color: var(--color-canvas-subtle);
  border: 6px solid var(--color-surface);
  outline: 1px solid var(--color-border);
  box-shadow: var(--shadow-lift),
              0 0 0 1px rgba(157, 115, 49, 0.2),
              0 30px 60px rgba(124, 35, 52, 0.12);
  transition: transform var(--duration-slow) var(--ease-out),
              box-shadow var(--duration-slow) var(--ease-out);
}

.hero-photo:hover picture {
  transform: translateY(-4px) scale(1.008);
  box-shadow: 0 32px 70px rgba(43, 23, 26, 0.14),
              0 0 0 1px var(--color-gold-border),
              0 36px 72px rgba(124, 35, 52, 0.16);
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease-out);
}

.hero-photo:hover img {
  transform: scale(1.06);
}

/* Soft atmospheric vignette inside picture frame */
.hero-photo picture::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, transparent 60%, rgba(43, 23, 26, 0.18) 100%),
              linear-gradient(180deg, transparent 70%, rgba(43, 23, 26, 0.22) 100%);
  pointer-events: none;
}

.hero-copy {
  display: flex;
  align-items: center;
  padding: clamp(1rem, 2vw, 2.5rem) 0;
}

.story {
  max-width: 38rem;
}

.story h1 {
  margin-bottom: 1.4rem;
  position: relative;
  display: inline-block;
}

.story h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.45rem;
  width: 3.5rem;
  height: 2px;
  background: linear-gradient(90deg, var(--color-gold), transparent);
}

/* Elegant editorial illuminated drop cap */
.story p:first-of-type::first-letter {
  font-family: var(--font-serif);
  font-size: 3.6rem;
  font-weight: 560;
  float: left;
  line-height: 0.8;
  padding: 0.35rem 0.65rem 0.1rem 0;
  color: var(--color-garnet);
  text-shadow: 1px 2px 8px rgba(124, 35, 52, 0.12);
}

.story p {
  font-size: var(--text-base);
  line-height: 1.76;
  margin-bottom: 1.4rem;
}

/* Artist signature quote plaque */
.story .tagline {
  position: relative;
  margin-top: 2.6rem;
  padding: 1.4rem 1.8rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.story .tagline::before,
.story .tagline::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border), transparent);
}

/* --------------------------------------------------------------------------
   8. CATEGORY BANNER PAVILION (Category Pages signature header)
   -------------------------------------------------------------------------- */
.banner {
  margin: 1.2rem auto 2.4rem;
  max-width: 860px;
  padding: clamp(1.8rem, 4vw, 3rem) clamp(1.2rem, 3vw, 2.5rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* Ambient jewel tone glow within banner */
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 15%, rgba(157, 115, 49, 0.08), transparent 60%),
    radial-gradient(circle at 80% 85%, rgba(124, 35, 52, 0.05), transparent 50%),
    radial-gradient(circle at 20% 85%, rgba(32, 103, 99, 0.05), transparent 50%);
  pointer-events: none;
}

/* Top hairline accent */
.banner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-gold-border), transparent);
}

/* Daria's Calligraphy Artwork: 1:1 crisp display */
.banner img {
  width: 100%;
  max-width: 707px;
  height: auto;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.banner-head {
  display: block;
  filter: drop-shadow(0 2px 8px rgba(78, 20, 31, 0.08));
}

.banner-foot {
  display: block;
  margin-top: 0.6rem;
  opacity: 0.9;
}

.banner-desc {
  max-width: 600px;
  margin: 0.8rem auto 0.4rem;
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--color-ink-soft);
  position: relative;
  z-index: 1;
  font-style: normal;
}

.banner-desc strong {
  color: var(--color-garnet-deep);
  font-weight: 560;
}

/* --------------------------------------------------------------------------
   9. PRODUCT GALLERY: JEWELER'S EXHIBITION PLINTHS
   -------------------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: clamp(1.4rem, 2.8vw, 2.2rem);
  margin-bottom: var(--space-xl);
}

/* Museum plinth card */
.shot {
  margin: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}

.shot:hover {
  transform: translateY(-6px);
  border-color: var(--color-gold-border);
  box-shadow: var(--shadow-lift), 0 0 24px rgba(157, 115, 49, 0.12);
}

/* Zoom Button wrapper */
.shot button {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: var(--color-canvas-subtle);
  cursor: zoom-in;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid var(--color-border-subtle);
}

.shot picture {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-canvas-subtle);
}

.shot img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.75s var(--ease-out);
}

.shot:hover img,
.shot button:focus-visible img {
  transform: scale(1.07);
}

/* Tactile Jeweler's Loupe / Inspect cue badge */
.shot-zoom-cue {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  background: rgba(255, 252, 249, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--color-border);
  color: var(--color-garnet-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-spring);
}

.shot:hover .shot-zoom-cue,
.shot button:focus-visible .shot-zoom-cue {
  opacity: 1;
  transform: scale(1);
}

/* Caption styling with atelier mark */
.shot figcaption {
  padding: 1rem 1.25rem 1.15rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 450;
  color: var(--color-ink-soft);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  transition: color var(--duration-fast) var(--ease-out);
}

.shot figcaption::before {
  content: "✦";
  font-size: 0.75rem;
  color: var(--color-gold);
  transition: transform var(--duration-normal) var(--ease-spring);
}

.shot:hover figcaption {
  color: var(--color-garnet-deep);
}

.shot:hover figcaption::before {
  transform: rotate(45deg);
  color: var(--color-garnet);
}

/* --------------------------------------------------------------------------
   10. BOUTIQUE STOCKIST SALON: ARTSY HEART (earrings.html signature card)
   -------------------------------------------------------------------------- */
.stockist-section {
  margin: var(--space-lg) auto;
  max-width: 780px;
}

.stockist-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-md);
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}

.stockist-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.stockist-card::before {
  content: "ATELIER STOCKIST";
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  margin-bottom: 0.75rem;
}

.stockist-card h2 {
  margin-bottom: 0.6rem;
}

.stockist-card .lede {
  color: var(--color-ink);
  font-size: var(--text-md);
  font-weight: 420;
}

/* --------------------------------------------------------------------------
   11. BESPOKE COMMISSION INVITATION (The .band CTA)
   -------------------------------------------------------------------------- */
.band {
  background: linear-gradient(135deg, var(--color-surface-dark) 0%, var(--color-surface-dark-card) 100%);
  color: var(--color-text-inverse);
  border: 1px solid var(--color-gold-border);
  border-radius: var(--radius-xl);
  padding: clamp(2.4rem, 5vw, 3.4rem) clamp(1.8rem, 4vw, 3.2rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  box-shadow: var(--shadow-dark), 0 0 32px rgba(124, 35, 52, 0.15);
  position: relative;
  overflow: hidden;
  margin: var(--space-xl) 0;
}

.band::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(157, 115, 49, 0.16), transparent 70%);
  pointer-events: none;
}

.band h2 {
  color: var(--color-text-inverse);
  font-size: var(--text-2xl);
  margin-bottom: 0.4rem;
}

.band p {
  color: var(--color-text-inverse-soft);
  font-size: var(--text-base);
  margin: 0;
  max-width: 32rem;
}

.band .btn-primary {
  background: var(--color-surface);
  color: var(--color-garnet-deep);
  border-color: var(--color-gold-border);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.24);
}

.band .btn-primary:hover {
  background: var(--color-surface-elevated);
  color: var(--color-garnet);
  border-color: var(--color-gold);
  box-shadow: 0 8px 24px rgba(157, 115, 49, 0.35);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   12. BESPOKE COMMISSION SUITE: custom.html & gameday.html
   -------------------------------------------------------------------------- */
.contact-card,
.gameday-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  box-shadow: var(--shadow-md);
  text-align: center;
  max-width: 680px;
  margin: 2rem auto;
  position: relative;
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}

.contact-card:hover,
.gameday-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.contact-card::before,
.gameday-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-gold-border), transparent);
}

/* Email Address Link */
.email-link {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  font-weight: 560;
  color: var(--color-garnet-deep);
  text-decoration: none;
  border-bottom: 2px solid var(--color-gold);
  margin: 0.5rem 0 1.2rem;
  word-break: break-all;
  padding-bottom: 0.2rem;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.email-link:hover {
  color: var(--color-garnet);
  border-bottom-color: var(--color-garnet);
}

.contact-card p,
.gameday-card p {
  color: var(--color-ink-soft);
  max-width: 480px;
  margin: 0 auto 1.6rem;
  font-size: var(--text-base);
  line-height: 1.65;
}

/* How It Works: 3-step jeweler's roadmap */
.steps {
  max-width: 800px;
  margin: 2.4rem auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.8rem);
  counter-reset: step-counter;
}

.steps li {
  counter-increment: step-counter;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.8rem 1.4rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-ink-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}

.steps li:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-gold-border);
}

/* Numbered Jeweler Seal */
.steps li::before {
  content: "0" counter(step-counter);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 560;
  color: var(--color-garnet);
  background: var(--color-garnet-tint);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  border: 1px solid rgba(124, 35, 52, 0.16);
}

/* Atelier Studio Dispatch Note */
.note {
  max-width: 580px;
  margin: 1.8rem auto 0;
  padding: 1.1rem 1.4rem;
  border-left: 3px solid var(--color-teal);
  background: var(--color-canvas-subtle);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  line-height: 1.6;
  text-align: left;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* --------------------------------------------------------------------------
   13. BUTTONS & INTERACTION STYLES
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.8rem;
  border-radius: var(--radius-full);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 46px;
  transition: transform var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.btn-primary {
  background: var(--color-garnet);
  color: var(--color-text-inverse);
  box-shadow: 0 4px 14px rgba(124, 35, 52, 0.22);
}

.btn-primary:hover {
  background: var(--color-garnet-deep);
  color: var(--color-text-inverse);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(124, 35, 52, 0.32);
}

.btn-ghost {
  background: transparent;
  border-color: var(--color-garnet);
  color: var(--color-garnet-deep);
}

.btn-ghost:hover {
  background: var(--color-garnet);
  color: var(--color-text-inverse);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(124, 35, 52, 0.18);
}

.actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.8rem;
}

/* --------------------------------------------------------------------------
   14. SITE FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  margin-top: var(--space-2xl);
  padding: 2.4rem 0 3rem;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  position: relative;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 30%;
  right: 30%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold-border), transparent);
}

.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.site-footer a {
  color: var(--color-ink-soft);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.site-footer a:hover {
  color: var(--color-garnet-deep);
  text-decoration: underline;
}

.site-footer .brand {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--color-garnet-deep);
}

/* --------------------------------------------------------------------------
   15. LIGHTBOX MODAL: ATELIER STUDIO LOUPE
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(26, 13, 16, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: clamp(1rem, 3vw, 2.5rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-out),
              visibility var(--duration-normal) var(--ease-out);
}

.lightbox.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lightbox img {
  max-width: min(1080px, 92vw);
  max-height: 86vh;
  border-radius: var(--radius-md);
  border: 4px solid var(--color-surface);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--color-gold-border);
  transform: scale(0.94) translateY(12px);
  transition: transform var(--duration-normal) var(--ease-spring);
}

.lightbox.open img {
  transform: scale(1) translateY(0);
}

.lightbox button {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: rgba(255, 252, 249, 0.12);
  border: 1px solid rgba(255, 252, 249, 0.35);
  color: var(--color-text-inverse);
  border-radius: var(--radius-full);
  width: 48px;
  height: 48px;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.lightbox button:hover {
  background: rgba(255, 252, 249, 0.28);
  border-color: var(--color-gold-light);
  transform: scale(1.08);
}

.lightbox button:focus-visible {
  outline: 2px solid var(--color-gold-light);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   16. RESPONSIVE BEHAVIOR
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 1.8rem;
    gap: 2.2rem;
  }

  .hero-photo picture {
    max-width: 360px;
    border-radius: 180px 180px var(--radius-lg) var(--radius-lg);
  }

  .hero-copy {
    text-align: center;
    padding: 0;
  }

  .story {
    margin-inline: auto;
  }

  .story h1::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .story p:first-of-type::first-letter {
    float: none;
    display: inline;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    text-shadow: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav {
    display: none;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(255, 252, 249, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--color-border);
    padding: 0.8rem 1.4rem 1.4rem;
    box-shadow: var(--shadow-lg);
  }

  .nav.open {
    display: flex;
    animation: menu-slide var(--duration-normal) var(--ease-out) both;
  }

  .nav a {
    width: 100%;
    padding: 0.85rem 0.6rem;
    border-radius: var(--radius-sm);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .nav a::after {
    display: none;
  }

  .steps {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .band {
    padding: 2rem 1.6rem;
    text-align: center;
    justify-content: center;
  }

  .band p {
    margin-inline: auto;
  }

  .site-footer .wrap {
    flex-direction: column;
    text-align: center;
    gap: 0.8rem;
  }
}

@keyframes menu-slide {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   17. PURPOSEFUL MOTION & PREFERS-REDUCED-MOTION
   -------------------------------------------------------------------------- */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.banner {
  animation: rise 0.8s var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .hero-photo:hover picture,
  .hero-photo:hover img,
  .shot:hover,
  .shot:hover img,
  .btn:hover {
    transform: none !important;
  }
}