/* ========================================================================== 
   MEYOUSH BOUTIQUE — ATELIER EDITION
   A restrained couture layer over the core experience. The visual language
   is built around ink, ivory, antique gold, precise type, and quiet motion.
   ========================================================================== */

:root {
  --cream: #fbf8f1;
  --parch: #f3ede2;
  --sand: #e7dccb;
  --blanc: #fffefa;
  --ink: #100d0a;
  --umb: #44392f;
  --muted: rgba(16, 13, 10, .64);
  --faint: rgba(16, 13, 10, .18);
  --gold: #a8842e;
  --gold-ink: #775d1f;
  --gold-rich: #c7a65a;
  --gold-light: #ddc787;
  --gold-pale: #f1e2b8;
  --gold-dim: rgba(168, 132, 46, .12);
  --gold-glow: rgba(199, 166, 90, .18);
  --gold-gradient: linear-gradient(125deg, #6f5215 0%, #a8842e 28%, #dec77e 52%, #a8842e 76%, #6f5215 100%);
  --gold-text: linear-gradient(118deg, #71551b 0%, #a8842e 30%, #d8bd70 52%, #947323 74%, #71551b 100%);
  --border: rgba(119, 93, 31, .24);
  --border-sub: rgba(16, 13, 10, .10);
  --noir: #080604;
  --ff-display: 'Bodoni Moda', Didot, 'Times New Roman', serif;
  --ff-script: 'Cormorant Garamond', Georgia, serif;
  --ff-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --shadow-couture: 0 28px 80px rgba(24, 17, 10, .13);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

html {
  background: var(--noir);
  color-scheme: light;
}

body {
  background:
    radial-gradient(circle at 8% 4%, rgba(199, 166, 90, .06), transparent 24rem),
    var(--cream);
  color: var(--ink);
  font-size: clamp(.96rem, .25vw + .91rem, 1.06rem);
  line-height: 1.72;
  cursor: auto;
}

::selection {
  background: var(--gold-rich);
  color: var(--noir);
}

h1, h2, h3,
.nav-brand, .loader-name, #intro-name,
.prod-name, .story-name, .reel-name {
  font-optical-sizing: auto;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a, button, [role="button"], input, textarea, select { cursor: pointer; }

:where(a, button, [role="button"], input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--gold-rich);
  outline-offset: 4px;
}

.skip-link:focus {
  top: 12px;
  left: 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--gold-rich);
}

/* The custom cursor is desktop ornamentation, never a touch dependency. */
.cursor { display: none; }

@media (hover: hover) and (pointer: fine) {
  body, a, button, [role="button"] { cursor: none; }
  .cursor { display: block; }
}

/* Wordmark and navigation */
.loader-name,
#intro-name,
.nav-brand,
.footer-brand {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  letter-spacing: .015em;
}

.loader-name { font-size: clamp(1.55rem, 2.3vw, 2.15rem); }

.nav {
  height: 76px;
  padding-inline: clamp(20px, 5vw, 80px);
  border-bottom: 1px solid transparent;
  transition: background-color .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.nav.scrolled {
  background: rgba(251, 248, 241, .92);
  border-bottom-color: rgba(119, 93, 31, .20);
  box-shadow: 0 12px 36px rgba(16, 13, 10, .045);
}

.nav-brand {
  font-size: clamp(1.25rem, 1.45vw, 1.55rem);
  line-height: 1;
}

.nav-links { gap: clamp(20px, 2.35vw, 38px); }

.nav-links a,
.nav-ig,
.nav-shop,
.sect-label,
.page-hero-eyebrow,
.page-hero-label {
  font-weight: 500;
  letter-spacing: .19em;
}

.nav-links a {
  padding-block: 12px;
  color: rgba(16, 13, 10, .72);
}

.nav-shop,
.nav-cart,
.nav-sound,
.nav-toggle {
  min-width: 44px;
  min-height: 44px;
}

.nav-shop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 22px;
  border-color: rgba(119, 93, 31, .55);
  color: var(--gold-ink);
}

.nav-shop:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

/* Editorial hero */
.hero {
  min-height: 92svh;
  grid-template-columns: minmax(420px, 43fr) 57fr;
  border-bottom: 1px solid var(--border-sub);
}

.hero-l {
  padding: clamp(112px, 12vh, 154px) clamp(34px, 5vw, 88px) clamp(108px, 13vh, 150px) clamp(28px, 6vw, 106px);
  background:
    radial-gradient(circle at 15% 28%, rgba(216, 189, 112, .10), transparent 22rem),
    linear-gradient(135deg, #fffdf8 0%, var(--cream) 74%);
}

.hero-l::after {
  content: '';
  position: absolute;
  top: 14%;
  right: 0;
  bottom: 14%;
  width: 1px;
  background: linear-gradient(transparent, rgba(119, 93, 31, .34), transparent);
}

.h-eyebrow {
  gap: 16px;
  margin-bottom: clamp(24px, 3.2vh, 38px);
  font-size: .61rem;
  font-weight: 500;
  letter-spacing: .25em;
  color: var(--gold-ink);
}

.h-eyebrow::before { width: 46px; }

.h-title {
  max-width: 7.3ch;
  margin-bottom: clamp(26px, 3.4vh, 40px);
  font-size: clamp(4.2rem, 7.25vw, 8.45rem);
  font-weight: 500;
  line-height: .90;
  letter-spacing: -.045em;
}

.h-title em,
.h-title .clip-line--gold { font-weight: 400; }

.line-mask { padding: .02em .05em .11em 0; }

.h-divider {
  width: 64px;
  margin-bottom: 24px;
}

.h-sub {
  max-width: 41ch;
  margin-bottom: 34px;
  font-size: clamp(.95rem, .3vw + .88rem, 1.08rem);
  line-height: 1.82;
  color: rgba(68, 57, 47, .88);
}

.hero-r { background: #19130e; }

.hero-r::after {
  content: '';
  position: absolute;
  inset: 18px;
  z-index: 2;
  border: 1px solid rgba(241, 226, 184, .28);
  pointer-events: none;
}

.hero-r-inner img {
  transform: scale(1.015);
  filter: saturate(.90) contrast(1.04);
}

.hero-r-fade {
  background:
    linear-gradient(to right, var(--cream) 0%, rgba(251, 248, 241, .52) 10%, transparent 30%),
    linear-gradient(to top, rgba(8, 6, 4, .18), transparent 40%);
}

.hero-strip {
  gap: clamp(14px, 2vw, 28px);
  padding: 17px clamp(20px, 6vw, 106px);
  background: rgba(251, 248, 241, .91);
  border-top-color: rgba(119, 93, 31, .18);
}

.strip-item {
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .19em;
}

.strip-num {
  font-family: var(--ff-display);
  font-size: 1.12rem;
  font-weight: 500;
}

/* Buttons: tailored edges, tactile motion, consistent hit areas */
.btn-gold,
.btn-ghost,
.btn-ig,
.cart-add-btn,
.prod-overlay-btn,
.story-cart-btn,
.story-dm-btn,
.order-copy-btn,
.order-ig-btn,
.quiz-open-btn {
  min-height: 48px;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  letter-spacing: .18em;
  transition: color .24s ease, background-color .24s ease, border-color .24s ease, transform .24s var(--ease), box-shadow .24s ease;
}

.btn-gold {
  background: var(--ink);
  color: var(--cream);
  border: 1px solid var(--ink);
}

.btn-gold:hover {
  background: var(--gold-ink);
  border-color: var(--gold-ink);
  color: #fff;
  box-shadow: 0 12px 28px rgba(119, 93, 31, .18);
}

.btn-ghost { border-color: rgba(16, 13, 10, .45); }

.btn-ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

/* Collection and product presentation */
.collection {
  padding: clamp(84px, 10vw, 144px) clamp(20px, 6vw, 106px);
  background:
    linear-gradient(rgba(119, 93, 31, .055) 1px, transparent 1px) 0 0 / 100% 9rem,
    var(--blanc);
}

.col-head {
  max-width: 1380px;
  margin: 0 auto clamp(50px, 7vw, 88px);
}

.col-h2,
.feat-h2,
.look-h2,
.showcase-h2,
.page-hero h1,
.page-hero-h1 {
  font-weight: 500;
  letter-spacing: -.035em;
}

.sect-label {
  margin-bottom: 20px;
  font-size: .58rem;
  color: var(--gold-ink);
}

.sect-label::before { width: 42px; }

.coll-grid,
.grid-3 {
  max-width: 1380px;
  gap: clamp(24px, 2.6vw, 44px);
}

.prod-card {
  gap: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(119, 93, 31, .24);
}

.prod-frame {
  border: 1px solid rgba(119, 93, 31, .14);
  box-shadow: 0 10px 34px rgba(16, 13, 10, .07);
}

.prod-frame::after {
  content: '';
  position: absolute;
  inset: 10px;
  z-index: 1;
  border: 1px solid rgba(255, 254, 250, .22);
  pointer-events: none;
  transition: border-color .28s ease;
}

.prod-card:hover .prod-frame {
  box-shadow: var(--shadow-couture);
}

.prod-card:hover .prod-frame::after {
  border-color: rgba(241, 226, 184, .46);
}

.prod-img {
  transition: transform .72s var(--ease), filter .4s ease;
  filter: saturate(.93) contrast(1.015);
}

.prod-card:hover .prod-img {
  transform: scale(1.035);
  filter: saturate(1) contrast(1.02);
}

.prod-overlay {
  z-index: 3;
  padding: 28px;
  background: linear-gradient(to top, rgba(8, 6, 4, .78), rgba(8, 6, 4, .08) 58%, transparent);
}

.prod-card:focus-within .prod-overlay { opacity: 1; }

.cart-add-btn,
.prod-overlay-btn {
  min-width: min(100%, 190px);
  padding-inline: 24px;
  border: 1px solid rgba(255, 254, 250, .72);
  background: rgba(8, 6, 4, .20);
  color: #fff;
  backdrop-filter: blur(8px);
}

.cart-add-btn:hover,
.prod-overlay-btn:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--ink);
}

.prod-pill {
  top: 18px;
  left: 18px;
  padding: 8px 14px;
  background: rgba(8, 6, 4, .88);
  backdrop-filter: blur(8px);
}

.prod-name {
  margin-top: 8px;
  font-size: clamp(1.08rem, .6vw + .95rem, 1.4rem);
  font-weight: 500;
  letter-spacing: -.018em;
}

.prod-sub {
  color: rgba(119, 93, 31, .88);
  font-weight: 500;
  letter-spacing: .16em;
}

.prod-price {
  font-family: var(--ff-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
}

/* Quietly luxurious supporting sections */
.editorial {
  padding-block: clamp(80px, 9vw, 132px);
  background:
    radial-gradient(circle at center, rgba(216, 189, 112, .13), transparent 34rem),
    var(--parch);
}

.ed-quote { font-weight: 500; }

.genesis-reveal,
.showcase-room,
.page-content {
  background:
    radial-gradient(circle at 50% 0%, rgba(199, 166, 90, .10), transparent 34rem),
    #080604;
}

.genesis-h2,
.showcase-h2,
.page-hero h1,
.page-hero-h1,
.faq-q {
  font-weight: 500 !important;
}

.page-hero p,
.page-body p,
.page-body li,
.page-section p,
.page-section li,
.faq-a {
  color: rgba(255, 255, 255, .68) !important;
}

.faq-item {
  padding-block: clamp(30px, 4vw, 44px) !important;
  border-bottom-color: rgba(199, 166, 90, .18) !important;
}

.tryon-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 500;
  letter-spacing: .16em;
}

.tryon-badge-mark {
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  transform: rotate(45deg);
}

.feat-badge { animation-duration: 28s; }
.marquee-track { animation-duration: 42s; }
.char-shimmer { animation-duration: 7s !important; }

/* Responsive art direction */
@media (max-width: 1000px) {
  .hero {
    grid-template-columns: 1fr 1.1fr;
  }

  .h-title { font-size: clamp(3.8rem, 7.5vw, 6.2rem); }
}

@media (max-width: 768px) {
  .nav {
    height: 66px;
    padding-inline: 18px;
  }

  .nav-left { min-width: 0; }

  .nav-brand {
    display: block;
    max-width: none;
    overflow: visible;
    font-size: 1.08rem;
    line-height: 1;
    white-space: nowrap;
  }

  .nav-right { gap: 8px; }

  .nav-shop,
  .nav-sound { display: none; }

  .nav-toggle { padding: 10px; }

  .hero {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .hero-l {
    min-height: 70svh;
    padding: 104px 22px 58px;
  }

  .hero-l::after { display: none; }

  .h-eyebrow {
    margin-bottom: 22px;
    font-size: .54rem;
    letter-spacing: .19em;
  }

  .h-eyebrow::before { width: 28px; }

  .h-title {
    max-width: 7ch;
    margin-bottom: 22px;
    font-size: clamp(3.25rem, 15vw, 5.25rem);
    line-height: .91;
  }

  .h-sub {
    max-width: 34rem;
    margin-bottom: 28px;
    font-size: .94rem;
    line-height: 1.72;
  }

  .hero-r {
    min-height: 64svh;
    border-top: 1px solid rgba(119, 93, 31, .2);
  }

  .hero-r::after { inset: 12px; }

  .hero-r-fade {
    background: linear-gradient(to bottom, var(--cream) 0%, transparent 17%, rgba(8, 6, 4, .12));
  }

  .hero-strip {
    position: relative;
    padding: 16px 20px;
  }

  .strip-divider { display: none; }

  .collection {
    padding: 74px 18px 82px;
  }

  .col-head { margin-bottom: 42px; }

  .coll-grid,
  .grid-3 { gap: 16px 12px; }

  .prod-card {
    gap: 7px;
    padding-bottom: 14px;
  }

  .prod-frame::after { inset: 6px; }

  .prod-name {
    margin-top: 5px;
    font-size: clamp(.91rem, 3.7vw, 1.12rem) !important;
  }

  .prod-sub {
    font-size: .48rem !important;
    letter-spacing: .12em !important;
    line-height: 1.55;
  }

  .prod-price { font-size: .9rem; }

  .prod-pill {
    top: 10px;
    left: 10px;
    padding: 6px 8px;
  }

  .prod-overlay { padding: 12px; }

  .cart-add-btn,
  .prod-overlay-btn {
    min-width: 100%;
    min-height: 44px;
    padding: 9px 10px !important;
    font-size: .48rem !important;
  }
}

@media (max-width: 430px) {
  .h-cta { gap: 10px; }
  .btn-gold, .btn-ghost { min-height: 48px; }
  .hero-strip { gap: 9px 18px; }
  .strip-item { font-size: .5rem; }
}

/* Respect visitors who request a still, predictable experience. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  .marquee-track,
  .feat-badge,
  .char-shimmer,
  .story-left,
  .story-ambient-sheen,
  .mono-stroke,
  .mono-thread,
  .mono-serif,
  .mono-bead {
    animation: none !important;
  }

  .prod-img,
  .prod-frame,
  .btn-gold,
  .btn-ghost,
  .cart-add-btn,
  .prod-overlay-btn {
    transition-duration: .01ms !important;
  }

  .prod-card:hover .prod-img,
  .hero-r-inner img { transform: none !important; }
}

.prod-name-link { color: inherit; text-decoration: none; transition: color .22s ease; }
.prod-name-link:hover { color: var(--gold); }