/* ==========================================================================
   Studio Solstice — Proposal Site
   Theme tokens live at the top — swap these once brand colors/logo arrive.
   ========================================================================== */

:root{
  /* --- Brand palette: client-supplied (Midnight / Lilac / Dusk / Solstice / Gold / Pearl) ---
     Roles kept from the original proposal palette (--violet, --mint, --pink, --gold) are
     repointed to the closest official swatch so every button/hover/accent below inherits
     the real brand color without a page-by-page rewrite. --mint-soft/--pink-soft are
     lightened tints of Solstice/Dusk for text-on-dark legibility, not separate brand colors. */
  --ink:            #0a0810;   /* Midnight */
  --ink-2:          #150e1f;   /* Midnight, lifted a touch for elevated surfaces */
  --plum:           #241a30;   /* Midnight → Lilac, dark step */
  --plum-2:         #423253;   /* Midnight → Lilac, mid step */
  --violet:         #836494;   /* Lilac */
  --mint:           #e69a86;   /* Solstice — primary CTA/accent */
  --mint-soft:      #f0c2b6;   /* Solstice, lightened */
  --pink:           #dcc0d4;   /* Dusk, lightened for legible text-on-dark */
  --pink-soft:      #ecdce7;   /* Dusk, lightened further */
  --pearl:          #e7d0d4;   /* Pearl — reserved for future highlight use */
  --gold:           #e3b871;   /* Gold */

  --bg:             var(--ink);
  --bg-elev:        var(--ink-2);
  --text:           #f4eef8;
  --text-dim:       #c9bcd8;
  --text-faint:     #9284a8;
  --line:           rgba(244,238,248,0.12);

  --grad-hero: radial-gradient(60% 60% at 50% 30%, rgba(58,31,92,.55) 0%, rgba(36,18,63,.4) 35%, rgba(20,10,34,.15) 68%, transparent 100%);
  --grad-accent: linear-gradient(135deg, var(--violet), var(--pink) 55%, var(--mint) 100%);
  --veil-soft: rgba(20,10,34,.55);   /* translucent section tint — lets the galaxy show through */
  --veil-strong: rgba(11,7,18,.72);

  --font-display: "Italiana", "Cormorant Garamond", serif;
  --font-alt:     "Cormorant Garamond", serif;
  --font-body:    "Jost", sans-serif;

  --container: 1180px;
  --radius: 2px;
  --radius-btn: 10px;
  --ease: cubic-bezier(.22,.68,.16,.98);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background:
    radial-gradient(140% 70% at 15% 0%, rgba(58,31,92,.35) 0%, transparent 55%),
    radial-gradient(120% 60% at 90% 30%, rgba(109,63,160,.22) 0%, transparent 50%),
    radial-gradient(110% 90% at 50% 100%, rgba(36,18,63,.4) 0%, transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3{ font-family: var(--font-display); font-weight:400; letter-spacing:.01em; margin:0; }
p{ margin:0; }
button{ font-family: inherit; cursor:pointer; }

::selection{ background: var(--violet); color: var(--text); }

/* --- texture layers: a continuous "galaxy" backdrop behind every section ---
   A purple nebula (no mint/pink here — those stay UI accents, not sky color)
   plus a faint diagonal Milky-Way haze band, both heavily blurred so they
   read as soft atmosphere rather than distinct graphic shapes. */
.nebula{
  position: fixed; inset: -15%; z-index: -1; pointer-events:none;
  background:
    radial-gradient(42% 34% at 18% 22%, rgba(139,84,196,.26) 0%, transparent 72%),
    radial-gradient(38% 30% at 85% 15%, rgba(88,42,140,.22) 0%, transparent 70%),
    radial-gradient(46% 36% at 78% 68%, rgba(109,63,160,.24) 0%, transparent 72%),
    radial-gradient(40% 32% at 15% 82%, rgba(70,35,120,.22) 0%, transparent 70%),
    radial-gradient(50% 40% at 50% 50%, rgba(58,31,92,.16) 0%, transparent 75%),
    linear-gradient(128deg, transparent 30%, rgba(139,94,190,.09) 46%, rgba(180,140,210,.05) 54%, transparent 70%);
  filter: blur(46px);
  animation: drift 120s ease-in-out infinite alternate;
}
@keyframes drift{
  0%{ transform: translate3d(0,0,0) scale(1); }
  100%{ transform: translate3d(-3%, 3%, 0) scale(1.08); }
}
.grain-overlay{
  position: fixed; inset:0; pointer-events:none; z-index: 3; opacity:.05; 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");
}
.stars{
  position: fixed; inset:0; z-index:-1; pointer-events:none;
}
.stars span{
  position:absolute; background:#fff; border-radius:50%;
  animation: twinkle linear infinite;
}
.stars span.is-bright{ box-shadow: 0 0 4px 1px rgba(244,238,248,.55); }
@keyframes twinkle{
  0%, 100%{ opacity: var(--min-op, .15); }
  50%{ opacity: var(--max-op, .9); }
}

/* ==========================================================================
   DECORATIVE MOTIFS — a small moon/sparkle sprig accent from the client's
   moodboard. Ornamental only — aria-hidden and pointer-events:none.
   ========================================================================== */
.motif{ position:absolute; z-index:0; pointer-events:none; }
.motif svg{ display:block; width:100%; height:100%; }
.motif-sprig{ width: 46px; height: 46px; color: var(--gold); opacity:.6; }

.motif.corner-tr{ right: -16px; top: -12px; transform: scale(-1,-1); }

@media (max-width: 720px){
  .motif-sprig{ display:none; }
}

/* ==========================================================================
   NAV
   ========================================================================== */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 40;
  padding: 22px 0;
  transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled{
  background: rgba(11,7,18,0.82);
  backdrop-filter: blur(10px);
  padding: 14px 0;
  border-bottom-color: var(--line);
}
.nav-wrap{
  max-width: var(--container); margin:0 auto; padding: 0 28px;
  display:flex; align-items:center; justify-content:space-between;
}
.wordmark{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display); font-size: 1.3rem; letter-spacing:.06em;
  color: var(--text);
}
.crescent{ width:20px; height:30px; flex-shrink:0; object-fit: contain; }

.primary-nav{ display:flex; align-items:center; gap: 34px; }
.primary-nav a{
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-dim); position:relative; padding: 4px 0;
  transition: color .3s var(--ease);
}
.primary-nav a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background: var(--mint); transform: scaleX(0); transform-origin:left;
  transition: transform .35s var(--ease);
}
.primary-nav a:not(.nav-cta):hover{ color: var(--text); }
.primary-nav a:not(.nav-cta):hover::after{ transform: scaleX(1); }

.nav-cta{
  border: 1px solid var(--mint); padding: 9px 18px !important; border-radius: var(--radius-btn);
  color: var(--mint) !important; transition: all .3s var(--ease);
}
.nav-cta:hover{ background: var(--mint); color: var(--ink) !important; }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; padding: 6px;
}
.nav-toggle span{ width:24px; height:1px; background: var(--text); transition: all .3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.nav-actions{ display:flex; align-items:center; gap: 18px; }
.cart-toggle{
  position:relative; background:none; border:none; padding: 4px; color: var(--text);
  display:flex; align-items:center; cursor:pointer;
}
.cart-toggle svg{ width: 22px; height: 22px; }
.cart-count{
  position:absolute; top:-6px; right:-8px; min-width: 16px; height:16px; padding: 0 3px;
  background: var(--mint); color: var(--ink); border-radius: 50%;
  font-size: .64rem; font-weight:600; display:flex; align-items:center; justify-content:center;
  line-height:1;
}
.cart-count[hidden]{ display:none; }
.cart-count.bump{ animation: cart-bump .4s var(--ease); }
@keyframes cart-bump{ 0%{ transform: scale(1); } 40%{ transform: scale(1.5); } 100%{ transform: scale(1); } }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size: .82rem; letter-spacing:.14em; text-transform: uppercase;
  padding: 15px 32px; border-radius: var(--radius-btn); border: 1px solid transparent;
  transition: all .35s var(--ease); white-space: nowrap;
}
.btn-primary{
  background: var(--mint); color: var(--ink);
}
.btn-primary:hover{ background: var(--pink); transform: translateY(-2px); box-shadow: 0 10px 30px -10px rgba(230,154,134,.4); }
.btn-ghost{
  border-color: var(--line); color: var(--text);
}
.btn-ghost:hover{ border-color: var(--mint); color: var(--mint); }
.btn-small{ padding: 10px 18px; font-size: .72rem; }
/* a piece with no Stripe price yet — visibly present, deliberately not buyable */
.btn-soon, .btn-soon:hover{
  background: transparent; border-color: var(--line); color: var(--text-faint);
  cursor: not-allowed; transform: none; box-shadow: none;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position: relative; min-height: 100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding: 140px 24px 60px; background: var(--grad-hero); overflow:hidden;
}
.hero-halo{
  position:absolute; width: 900px; height:900px; border-radius:50%;
  top: -320px; left:50%; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(230,154,134,.16) 0%, rgba(230,154,134,0) 60%);
  filter: blur(10px); z-index:0;
}
.hero-content{ position:relative; z-index:1; max-width: 760px; }
.hero-emblem{
  width: 180px; margin: 0 auto 28px; filter: drop-shadow(0 0 34px rgba(230,154,134,.28));
}
.eyebrow{
  font-size: .78rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--mint); margin-bottom: 22px; font-weight:400;
}
.hero-title{
  font-size: clamp(3.4rem, 9vw, 7.2rem); line-height: .95; color: var(--text);
}
.hero-title .line{ display:block; }
.hero-title .italic{ font-family: var(--font-alt); font-style: italic; color: var(--pink); }
.hero-sub{
  margin: 30px auto 0; max-width: 520px; color: var(--text-dim); font-size: 1.05rem;
}
.hero-tagline{
  margin-top: 22px; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold);
}
.hero-tagline span{ color: var(--text-faint); margin: 0 4px; }
.hero-actions{
  margin-top: 44px; display:flex; gap: 18px; justify-content:center; flex-wrap: wrap;
}
.phase-strip{
  position: relative; z-index:1; margin-top: 74px; display:flex; gap: 22px; align-items:center;
}
.phase{ width: 20px; height:20px; border-radius:50%; background: var(--text); position:relative; overflow:hidden; opacity:.65; }
.phase-new{ background: transparent; border:1px solid var(--text-faint); }
.phase-crescent::before{ content:""; position:absolute; inset:0; background:var(--ink); border-radius:50%; transform: translateX(-55%); }
.phase-quarter::before{ content:""; position:absolute; inset:0 0 0 50%; background:var(--ink); }
.phase-gibbous::before{ content:""; position:absolute; inset:0; background:var(--ink); border-radius:50%; transform: translateX(55%); }
.phase-full{ opacity: 1; box-shadow: 0 0 16px 2px rgba(244,238,248,.5); }

.scroll-cue{
  position:absolute; bottom: 34px; left:50%; transform: translateX(-50%); z-index:1;
  width: 1px; height: 46px; background: var(--line);
}
.scroll-cue span{
  position:absolute; top:0; left:-2px; width:5px; height:5px; border-radius:50%;
  background: var(--mint); animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue{ 0%{ top:0; opacity:1; } 90%{ opacity:0; } 100%{ top:100%; opacity:0; } }

/* ==========================================================================
   SECTION SHARED
   ========================================================================== */
section{ position: relative; z-index:1; padding: 140px 24px; }
.section-head{ max-width: var(--container); margin: 0 auto 64px; }
.section-head h2{ font-size: clamp(2.2rem, 4.5vw, 3.4rem); margin-top: 14px; }
.section-sub{ margin-top: 16px; max-width: 520px; color: var(--text-dim); }
.br-desktop{ display:inline; }

/* ==========================================================================
   STORY
   ========================================================================== */
.story{ background: var(--veil-soft); }
.story-grid{
  max-width: var(--container); margin:0 auto;
  display:grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items:center;
}
.story-copy h2{ font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: 26px; }
.story-copy p{ color: var(--text-dim); margin-bottom: 18px; max-width: 540px; }
/* Replaced .story-stats / .stat-num, which rendered invented figures ("03
   Collections released", "∞ Phases of the moon"). These are three plain claims
   about how the clothes are made, so they get a quiet gold mark rather than the
   typographic weight a real number would have earned. */
.story-marks{
  list-style:none; margin: 38px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap: 14px 30px;
}
.story-marks li{
  display:flex; align-items:center; gap: 9px;
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim);
}
.story-marks .mark{ color: var(--gold); font-size: .72rem; line-height:1; }
.about-copy .story-marks{ flex-direction: column; gap: 12px; margin-top: 30px; }
.story-more{ margin-top: 26px; }
.story-more a{
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mint);
  border-bottom: 1px solid transparent; transition: border-color .3s var(--ease);
}
.story-more a:hover{ border-bottom-color: var(--mint); }

.story-visual{ display:flex; justify-content:center; }
.badge{
  position:relative; width: 320px; height: 320px; border-radius:50%; overflow:hidden;
  box-shadow: 0 0 90px rgba(109,63,160,.45);
  animation: float 7s ease-in-out infinite;
}
.badge-photo{ width:100%; height:100%; object-fit: cover; }
@keyframes float{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-16px);} }
@keyframes spin{ to{ transform: rotate(360deg);} }

/* ==========================================================================
   LOOKBOOK
   ========================================================================== */
.look-grid{
  max-width: var(--container); margin:0 auto;
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.look-card{
  position:relative; border-radius: var(--radius); overflow:hidden; aspect-ratio: 3/4;
  transition: transform .5s var(--ease);
}
.look-card:hover{ transform: translateY(-8px); }
.look-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit: cover; object-position: top center;
  transition: transform .6s var(--ease);
}
.look-card:hover .look-photo{ transform: scale(1.06); }
.look-link{ display:block; position:absolute; inset:0; }
.look-meta{
  position:absolute; left:0; right:0; bottom:0; padding: 18px 20px;
  display:flex; justify-content:space-between; align-items:baseline;
  background: linear-gradient(to top, rgba(11,7,18,.85), transparent);
  font-size: .78rem; letter-spacing:.06em; text-transform: uppercase;
}
.look-meta span:first-child{ color: var(--text-faint); }
.look-meta span:last-child{ font-family: var(--font-alt); font-style: italic; font-size: 1rem; text-transform:none; letter-spacing:0; color: var(--text); }

/* ==========================================================================
   SHOP
   ========================================================================== */
.shop{ background: var(--veil-soft); }
.product-grid{
  max-width: var(--container); margin:0 auto;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
}
.product-card{
  background: rgba(255,255,255,.02); border: 1px solid var(--line); border-radius: var(--radius);
  overflow:hidden; transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.product-card:hover{ border-color: rgba(230,154,134,.4); transform: translateY(-6px); }
/* height:auto matters: the <img> carries width/height attributes so the browser
   can reserve space, and a height attribute becomes a CSS height unless one is
   set here — which rendered every card photo at its full 1,300–1,700px. */
.product-photo{ display:block; width:100%; height:auto; aspect-ratio: 1/1.1; object-fit: cover; object-position: top center; }
.product-info{ padding: 18px 18px 22px; }
.product-info h3{ font-size: 1.15rem; margin-bottom: 8px; }
.product-desc{ color: var(--text-faint); font-size: .84rem; min-height: 38px; }
.product-row{ margin-top: 16px; display:flex; align-items:center; justify-content:space-between; gap: 12px; }
.price{ font-family: var(--font-alt); font-style: italic; color: var(--pink); font-size: 1.05rem; }
.add-to-cart.is-added{ background: var(--pink); }

.cart-note{
  max-width: var(--container); margin: 40px auto 0; padding: 16px 20px;
  border: 1px dashed var(--line); border-radius: var(--radius);
  color: var(--text-faint); font-size: .84rem; text-align:center;
}

/* ==========================================================================
   RITUAL / INSTAGRAM
   ========================================================================== */
.follow{ text-align:center; }
.follow-inner{ max-width: var(--container); margin:0 auto; }
.follow .section-sub{ margin-left:auto; margin-right:auto; }
.insta-grid{
  margin: 54px 0 44px; display:grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
}
.insta-tile{
  aspect-ratio: 1/1; border-radius: var(--radius); overflow:hidden; display:block;
  position:relative;
}
.insta-tile img{
  width:100%; height:100%; object-fit: cover; object-position: center;
  transition: transform .6s var(--ease), opacity .4s var(--ease);
}
.insta-tile:hover img{ transform: scale(1.07); opacity: .82; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background: var(--veil-strong); border-top: 1px solid var(--line); padding: 90px 24px 30px; }
.footer-grid{
  max-width: var(--container); margin: 0 auto;
  display:grid; grid-template-columns: 1.4fr 1.2fr .8fr .8fr; gap: 50px;
}
.footer-brand .wordmark{ margin-bottom: 16px; }
.footer-tag{ color: var(--text-faint); font-size: .9rem; max-width: 260px; }
.footer-signup h3, .footer-links h3, .footer-contact h3{
  font-family: var(--font-body); font-weight:500; font-size: .78rem; letter-spacing:.14em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 18px;
}
.footer-signup p{ color: var(--text-faint); font-size: .88rem; margin-bottom: 18px; max-width: 320px; }
.signup-form{ display:flex; gap: 10px; max-width: 360px; }
.signup-form input{
  flex:1; background: transparent; border: 1px solid var(--line); border-radius: var(--radius-btn);
  padding: 13px 16px; color: var(--text); font-family: inherit; font-size: .9rem;
}
.signup-form input:focus{ outline: none; border-color: var(--mint); }
/* A text input's default width is its min-content in a flex row; without this
   the Subscribe button was pushed 4px off-screen in the two-column footer
   (721–980px) and the whole page scrolled sideways. */
.signup-form input{ min-width: 0; }
.form-note{ margin-top: 12px; font-size: .82rem; color: var(--mint); min-height: 1.2em; }
.form-note.is-error{ color: var(--gold); }

/* Honeypot. Not display:none — some bots skip hidden fields, and a few screen
   readers would still reach it. Pushed out of view and out of the tab order. */
.hp-field{
  position:absolute !important; left:-9999px !important;
  width:1px; height:1px; opacity:0; pointer-events:none;
}

.footer-links, .footer-contact{ display:flex; flex-direction:column; gap: 12px; }
.footer-links a, .footer-contact a{ color: var(--text-dim); font-size: .92rem; transition: color .3s; }
.footer-links a:hover, .footer-contact a:hover{ color: var(--mint); }
.social-row{ display:flex; gap: 14px; margin-top: 6px; }
.social-row a{
  width:34px; height:34px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.7rem; letter-spacing:.05em;
}
.social-row a:hover{ border-color: var(--mint); color: var(--mint); }

.footer-bottom{
  max-width: var(--container); margin: 70px auto 0; padding-top: 26px; border-top: 1px solid var(--line);
  color: var(--text-faint); font-size: .78rem;
}

/* ==========================================================================
   INNER PAGES (shop, product)
   ========================================================================== */
.site-header.solid{
  background: rgba(11,7,18,0.82);
  backdrop-filter: blur(10px);
  padding: 14px 0;
  border-bottom-color: var(--line);
}
.primary-nav a.is-current{ color: var(--text); }
.primary-nav a.is-current::after{ transform: scaleX(1); }

.page{
  position:relative; z-index:1;
  max-width: var(--container); margin: 0 auto;
  padding: 150px 24px 120px;
}
.page-head{ position:relative; margin-bottom: 56px; }
.page-head h1{ font-size: clamp(2.4rem, 5vw, 3.6rem); margin-top: 14px; }
.page-head .section-sub{ margin-top: 16px; }

.product-grid-wide{ grid-template-columns: repeat(3, 1fr); }
.shop-all{ max-width: var(--container); margin: 54px auto 0; text-align:center; }
.shop-footnote{
  margin-top: 54px; text-align:center; color: var(--text-faint); font-size: .84rem;
}

.breadcrumb{
  font-size: .76rem; letter-spacing:.12em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 36px;
}
.breadcrumb a{ color: var(--text-dim); }
.breadcrumb a:hover{ color: var(--mint); }
.breadcrumb span{ margin: 0 8px; }

/* product.html ships with an empty #productMain that js/product-page.js fills.
   Without a reserved height the footer renders near the top of the window and
   is then shoved off-screen the moment the content lands — a 0.4 layout shift,
   which is a Core Web Vitals failure on its own. Holding the space keeps the
   footer below the fold from the first paint. */
#productMain{ min-height: 100vh; }

.product-detail{
  display:grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items:start;
}
/* The hero shows the piece whole. Bri frames each shot to the garment — a tube
   top close in, the Vortex pants head to hem — so a fixed 3/4 crop from the top
   cut the bottom off the longer pieces, and the pants were unviewable on their
   own page. Cards keep a uniform crop for the grid; this deliberately does not.
   max-height keeps a very tall shot from pushing the price below the fold. */
.product-hero-photo{
  display:block; width:100%; height:auto; margin-inline:auto;
  border-radius: var(--radius);
}
.product-thumbs{ display:flex; gap: 12px; margin-top: 14px; }
.product-thumb{
  width: 74px; padding:0; border: 1px solid var(--line); background:none; cursor:pointer;
  border-radius: var(--radius); overflow:hidden; line-height:0;
  transition: border-color .3s var(--ease);
}
.product-thumb img{ width:100%; height:auto; aspect-ratio: 3/4; object-fit: cover; object-position: top center; }
.product-thumb.is-active, .product-thumb:hover{ border-color: var(--mint); }

.product-detail-info h1{ font-size: clamp(2.2rem, 4.5vw, 3.2rem); }
.product-detail-price{
  font-family: var(--font-alt); font-style: italic; color: var(--pink);
  font-size: 1.5rem; margin-top: 12px;
}
.product-detail-desc{ margin-top: 26px; color: var(--text-dim); max-width: 46ch; }
.product-detail-list{
  margin: 26px 0 0; padding: 0; list-style:none;
  display:flex; flex-direction:column; gap: 9px;
}
.product-detail-list li{
  color: var(--text-faint); font-size: .86rem; padding-left: 18px; position:relative;
}
.product-detail-list li::before{
  content:"✦"; position:absolute; left:0; color: var(--gold); font-size: .7rem; top: 3px;
}
.product-detail-add{ margin-top: 34px; width: 100%; max-width: 320px; }
.product-detail-note{ margin-top: 16px; color: var(--text-faint); font-size: .78rem; max-width: 42ch; }

.product-related{ margin-top: 80px; }
.product-related h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 34px; }

.product-missing{ text-align:center; padding: 60px 0 100px; }
.product-missing h1{ font-size: clamp(2.2rem, 5vw, 3.2rem); }
.product-missing .section-sub{ margin: 16px auto 34px; }

/* ==========================================================================
   CART DRAWER
   ========================================================================== */
.cart-scrim{
  position: fixed; inset:0; z-index: 70; background: rgba(11,7,18,.6);
  opacity:0; transition: opacity .3s var(--ease);
}
.cart-scrim.visible{ opacity:1; }

.cart-drawer{
  position: fixed; top:0; right:0; height:100vh; width: min(420px, 100vw); z-index: 71;
  background: var(--ink-2); border-left: 1px solid var(--line);
  display:flex; flex-direction:column;
  transform: translateX(100%); transition: transform .4s var(--ease);
}
.cart-drawer.open{ transform: translateX(0); }

.cart-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 26px 26px 18px; border-bottom: 1px solid var(--line);
}
.cart-drawer-head h3{ font-size: 1.3rem; }
.cart-head-actions{ display:flex; align-items:center; gap: 14px; }
.cart-close{ background:none; border:none; color: var(--text); font-size: 1.6rem; line-height:1; cursor:pointer; padding: 4px; }
.cart-close:hover{ color: var(--mint); }

/* Quiet by design — it sits beside the close X and empties the whole bag, so it
   should never compete with Checkout. Turns gold once armed for the second tap. */
.cart-clear{
  background:none; border:none; cursor:pointer;
  /* Padded to a ~44px touch target — it is a small label sitting next to the
     close X, and a mis-tap either way is annoying. */
  display:flex; align-items:center; min-height: 44px; padding: 0 2px; margin: -12px 0;
  color: var(--text-faint); font-family: inherit; font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase;
  /* Underline via text-decoration, not a border: the padding above is there for
     the touch target, and a border would sit 12px adrift under the label. */
  text-decoration: underline solid transparent; text-underline-offset: 5px;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
/* An author `display` beats the UA stylesheet's [hidden]{display:none}, so
   without this the button stays on screen after the bag is emptied. */
.cart-clear[hidden]{ display:none; }
.cart-clear:hover{ color: var(--text); text-decoration-color: var(--line); }
.cart-clear.is-armed{ color: var(--gold); text-decoration-color: var(--gold); }

.cart-items{ flex:1; overflow-y:auto; padding: 10px 26px; }
.cart-empty{ color: var(--text-faint); font-size: .92rem; padding: 30px 0; text-align:center; }

.cart-item{
  display:grid; grid-template-columns: 62px 1fr auto; gap: 14px; align-items:flex-start;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.cart-item-photo{ width:62px; height:74px; object-fit:cover; border-radius: var(--radius); }
.cart-item-name{ font-size: .92rem; color: var(--text); }
.cart-item-price{ font-family: var(--font-alt); font-style: italic; color: var(--pink); font-size: .88rem; margin-top: 4px; }
.cart-item-qty{ display:flex; align-items:center; gap: 10px; margin-top: 10px; font-size: .84rem; }
.qty-btn{
  width:22px; height:22px; border: 1px solid var(--line); background:none; color: var(--text);
  border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size: .9rem;
  line-height:1; padding:0;
}
.qty-btn:hover{ border-color: var(--mint); color: var(--mint); }
.cart-item-remove{
  background:none; border:none; color: var(--text-faint); font-size: 1.3rem; line-height:1; cursor:pointer; padding: 2px 4px;
}
.cart-item-remove:hover{ color: var(--pink); }

.cart-drawer-foot{ padding: 20px 26px 26px; border-top: 1px solid var(--line); }
.cart-subtotal-row{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 6px;
}
.cart-shipping-note{ color: var(--text-faint); font-size: .76rem; margin-bottom: 18px; }
.cart-checkout{ width:100%; }
.cart-checkout:disabled{ opacity:.5; cursor:not-allowed; }
.cart-status{ margin-top: 12px; font-size: .8rem; color: var(--gold); text-align:center; min-height: 1.2em; }

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform: translateY(0); }
.hero .reveal.is-visible{ transition-delay: calc(var(--d, 0) * 90ms); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 980px){
  .story-grid{ grid-template-columns: 1fr; gap: 60px; }
  .story-visual{ order: -1; }
  .product-grid{ grid-template-columns: repeat(2, 1fr); }
  .product-grid-wide{ grid-template-columns: repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .insta-grid{ grid-template-columns: repeat(3, 1fr); }
  .product-detail{ grid-template-columns: 1fr; gap: 40px; }
  .product-detail-add{ max-width: none; }
  .page{ padding: 130px 24px 90px; }
  .product-related{ margin-top: 90px; }
}

@media (max-width: 720px){
  .primary-nav{
    position:fixed; top: 0; right: 0; height: 100vh; width: min(78vw, 320px);
    background: var(--ink-2); flex-direction:column; justify-content:center; align-items:flex-start;
    gap: 30px; padding: 40px; transform: translateX(100%); transition: transform .4s var(--ease);
    border-left: 1px solid var(--line);
  }
  .primary-nav.open{ transform: translateX(0); }
  .nav-toggle{ display:flex; z-index: 60; }
  .cart-drawer{ width: 100vw; }
  .hero-emblem{ width: 130px; margin-bottom: 18px; }
  .look-grid{ grid-template-columns: repeat(2, 1fr); }
  .look-meta{ flex-direction: column; align-items:flex-start; gap: 4px; padding: 14px 16px; }
  .look-meta span:last-child{ font-size: .92rem; }
  .product-grid{ grid-template-columns: 1fr 1fr; }
  .product-grid-wide{ grid-template-columns: 1fr 1fr; }
  .product-row{ flex-direction: column; align-items: flex-start; gap: 10px; }
  .product-row .btn-small{ width: 100%; }
  .page{ padding: 120px 20px 80px; }
  .footer-grid{ grid-template-columns: 1fr; gap: 40px; }
  .signup-form{ flex-direction: column; }
  .signup-form .btn{ width:100%; }
  section{ padding: 90px 20px; }
  .hero{ padding-top: 120px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}


/* ==========================================================================
   INFO PAGES — About, FAQ, Care Guide, Disclaimer
   Reference material, not a shop window: these are set for reading. Narrower
   measure, more line-height, and none of the hover motion the product grid
   uses. They inherit the same galaxy backdrop and type scale so they still
   read as the same site.
   ========================================================================== */
.info-page{ max-width: 980px; }
/* The global `section { padding: 90px 20px }` is tuned for the full-bleed bands
   on the home page. Inside an info page the sections are just blocks of a single
   column, and that padding opened a ~140px hole under every heading and indented
   the rules that are meant to line up with the text. */
.info-page > section{ padding: 0; }
.info-hero{ margin-bottom: 64px; max-width: 720px; }
.info-hero h1{ font-size: clamp(2.4rem, 5.5vw, 3.6rem); margin-top: 14px; }
.info-lead{ margin-top: 20px; color: var(--text-dim); font-size: 1.05rem; max-width: 60ch; }

/* --- long-form prose (Disclaimer) --- */
.prose{ max-width: 68ch; }
.prose h2{
  font-size: 1.5rem; margin: 48px 0 14px;
  padding-top: 26px; border-top: 1px solid var(--line);
}
.prose h2:first-child{ margin-top:0; padding-top:0; border-top:none; }
.prose p{ color: var(--text-dim); line-height: 1.8; }
.prose a{ color: var(--mint); border-bottom: 1px solid rgba(230,154,134,.35); }
.prose a:hover{ border-bottom-color: var(--mint); }

/* --- FAQ accordion ---
   Native <details>, so it opens with no JS and is keyboard-operable for free.
   The shared name= makes them exclusive where the browser supports it, and
   degrades to independently-open panels where it doesn't. */
.faq-list{ max-width: 68ch; border-top: 1px solid var(--line); }
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap: 20px;
  padding: 22px 2px; cursor:pointer; list-style:none;
  font-family: var(--font-alt); font-size: 1.18rem; color: var(--text);
  transition: color .3s var(--ease);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color: var(--mint); }
.faq-chev{
  flex-shrink:0; width:11px; height:11px; border-right:1px solid currentColor;
  border-bottom:1px solid currentColor; transform: rotate(45deg) translate(-2px,-2px);
  transition: transform .3s var(--ease); color: var(--text-faint);
}
.faq-item[open] .faq-chev{ transform: rotate(-135deg) translate(-3px,-3px); color: var(--mint); }
.faq-answer{ padding: 0 2px 26px; max-width: 62ch; }
.faq-answer p{ color: var(--text-dim); line-height: 1.8; }
.faq-answer a{ color: var(--mint); border-bottom: 1px solid rgba(230,154,134,.35); }
.faq-answer a:hover{ border-bottom-color: var(--mint); }

/* --- Care guide cards --- */
.care-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.care-card{
  background: rgba(255,255,255,.02); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 30px 26px;
}
.care-card h2{ font-size: 1.35rem; display:flex; align-items:baseline; gap: 12px; }
.care-num{
  font-family: var(--font-body); font-size: .72rem; letter-spacing: .14em;
  color: var(--gold);
}
.care-card ul{ margin: 18px 0 0; padding-left: 18px; }
.care-card li{ color: var(--text-dim); line-height: 1.75; margin-bottom: 9px; font-size: .95rem; }
.care-card li::marker{ color: var(--violet); }

/* --- About --- */
.about-layout{ display:grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items:start; }
.about-copy p{ color: var(--text-dim); line-height: 1.85; margin-bottom: 18px; }

.process{ margin-top: 92px; }
.process .section-head{ margin-bottom: 46px; }
.process-steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 34px 46px;
}
.process-steps li{ position:relative; padding-top: 22px; border-top: 1px solid var(--line); }
.process-num{
  font-size: .72rem; letter-spacing: .16em; color: var(--gold);
}
.process-steps h3{ font-size: 1.3rem; margin: 10px 0 10px; }
.process-steps p{ color: var(--text-dim); font-size: .95rem; line-height: 1.75; }

/* --- shared closing call-to-action --- */
.faq-list ~ .info-cta,
.prose ~ .info-cta{ max-width: 68ch; }
.info-cta{
  margin-top: 80px; padding: 38px 34px; text-align:center;
  background: rgba(255,255,255,.02); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.info-cta p{ color: var(--text-dim); margin-bottom: 22px; }
.info-cta a:not(.btn){ color: var(--mint); border-bottom: 1px solid rgba(230,154,134,.35); }
.info-cta a:not(.btn):hover{ border-bottom-color: var(--mint); }

@media (max-width: 900px){
  .about-layout{ grid-template-columns: 1fr; gap: 40px; }
  .about-visual{ max-width: 320px; }
}
@media (max-width: 760px){
  .care-grid{ grid-template-columns: 1fr; }
  .process-steps{ grid-template-columns: 1fr; gap: 28px; }
  .info-hero{ margin-bottom: 46px; }
  .process{ margin-top: 76px; }
  .info-cta{ margin-top: 56px; padding: 30px 22px; }
  .faq-item summary{ font-size: 1.05rem; padding: 19px 2px; }
}


/* ==========================================================================
   POINT-OF-SALE TERMS
   The final-sale policy is stated on the product page, again in the cart, and
   once more above Stripe's pay button. A policy the buyer never saw is the one
   a card issuer reverses, so it is deliberately repeated rather than tucked
   into a page nobody opens.
   ========================================================================== */
.product-terms{
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line);
  display:flex; flex-direction:column; gap: 12px;
}
.product-terms p{ font-size: .84rem; line-height: 1.7; color: var(--text-faint); }
.product-terms-variation{ color: var(--text-dim) !important; }
.product-terms-final{ color: var(--text-dim) !important; }
.product-terms-final strong{ color: var(--gold); font-weight: 400; }
.product-terms a{ color: var(--mint); border-bottom: 1px solid rgba(230,154,134,.35); }
.product-terms a:hover{ border-bottom-color: var(--mint); }

.cart-terms{
  font-size: .74rem; line-height: 1.6; color: var(--text-faint);
  margin: -8px 0 16px;
}
.cart-terms strong{ color: var(--gold); font-weight: 400; }
.cart-terms a{ color: var(--mint); }
.cart-terms a:hover{ text-decoration: underline; }

/* ==========================================================================
   CLIENT-WRITTEN CONTENT BLOCKS
   ========================================================================== */
/* Care guide: Bri's list is five lines. It is set large and given room rather
   than padded out with invented laundry advice to fill a page. */
.care-single{ max-width: 56ch; }
.care-list{ list-style:none; margin:0; padding:0; border-top: 1px solid var(--line); }
.care-list li{
  position:relative; padding: 20px 0 20px 34px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-alt); font-size: 1.25rem; color: var(--text);
}
.care-list li::before{
  content:"\2726"; position:absolute; left:4px; top: 22px;
  color: var(--gold); font-size: .8rem; font-family: var(--font-body);
}
.care-sign{
  margin-top: 34px; font-family: var(--font-alt); font-style: italic;
  font-size: 1.15rem; color: var(--pink);
}

.faq-signoff{
  margin-top: 14px; font-family: var(--font-alt); font-style: italic;
  font-size: 1.05rem; color: var(--pink);
}

.story-signoff{
  margin-top: 22px; font-family: var(--font-alt); font-size: 1.1rem;
  color: var(--pink); letter-spacing: .01em;
}
.about-story{ margin-top: 92px; }
.about-story .prose{ max-width: 68ch; }
.about-story .prose p{ margin-bottom: 18px; }

@media (max-width: 760px){
  .care-list li{ font-size: 1.1rem; padding: 17px 0 17px 30px; }
  .about-story{ margin-top: 72px; }
}


/* ==========================================================================
   PORTRAIT FRAME — photos of Bri on the Story and About sections
   The .badge these replaced is a 320px circle, which crops a seated
   mother-and-child shot badly. A soft-cornered rectangle keeps the whole frame
   and reuses the badge's violet glow so it still sits in the same night sky.
   No float animation here: it reads as charming on a logo and odd on a person.
   ========================================================================== */
.portrait{
  margin: 0; width: 100%; max-width: 460px;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 0 80px rgba(109,63,160,.38);
}
.portrait img{ display:block; width: 100%; height: auto; }

/* The Story grid centres its visual column; the About page runs it flush to the
   text it belongs to. */
.story-visual .portrait{ max-width: 420px; }
.about-visual .portrait{ max-width: 100%; }

@media (max-width: 900px){
  /* .about-visual is capped at 320px further up, which is too small for a
     photograph once it stacks above the copy. */
  .about-visual{ max-width: 380px; }
}
@media (max-width: 760px){
  .story-visual .portrait{ max-width: 340px; }
  .about-visual{ max-width: 100%; }
}


/* ==========================================================================
   DROPS — banner, countdown, badges, pre-release product page
   ========================================================================== */
/* An author display value beats the UA's [hidden]{display:none}; say it
   explicitly so an empty slot never takes space. */
.drop-banner-slot[hidden]{ display:none !important; }
.drop-banner-slot{ padding: 0 20px; }
.drop-banner-home{ padding-top: 10px; padding-bottom: 10px; }
.page .drop-banner-slot{ padding: 0; margin: 0 0 46px; }

.drop-banner{
  max-width: var(--container); margin: 0 auto; text-align:center;
  padding: 44px 28px 40px;
  border: 1px solid rgba(227,184,113,.35); border-radius: var(--radius);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(131,100,148,.28), transparent 70%),
    rgba(20,10,34,.55);
  box-shadow: 0 0 80px rgba(109,63,160,.28);
}
.drop-banner .eyebrow{ color: var(--gold); }
.drop-banner h2{ font-size: clamp(2rem, 4.5vw, 3rem); margin-top: 10px; }
.drop-when{ margin-top: 12px; color: var(--text-dim); letter-spacing: .02em; }
.drop-countdown{
  margin: 18px 0 26px; font-family: var(--font-alt); font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  color: var(--pink); font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.drop-banner.is-live h2{ margin-bottom: 24px; }

.product-photo-link{ position:relative; display:block; }
.product-badge{
  position:absolute; top: 12px; left: 12px; z-index: 1;
  padding: 5px 10px; border-radius: 999px;
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  background: var(--gold); color: var(--ink); font-weight: 500;
}
.product-badge.is-soon{ background: rgba(11,7,18,.8); color: var(--gold); border: 1px solid var(--gold); }

.product-new-flag{ color: var(--gold); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 8px; }
.product-drop-teaser{ margin-top: 26px; }
.product-drop-teaser .eyebrow{ color: var(--gold); }
.product-drop-when{ margin: 8px 0 16px; color: var(--text-dim); }

/* ==========================================================================
   SIZES — picker, cart line, size guide
   ========================================================================== */
.size-picker{ border: 0; margin: 26px 0 0; padding: 0; min-width: 0; }
.size-picker legend{
  display:flex; justify-content:space-between; align-items:baseline; width:100%;
  padding:0; margin-bottom: 12px;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim);
}
.size-guide-link{ text-transform:none; letter-spacing:.02em; font-size:.84rem; color: var(--mint);
  border-bottom: 1px solid rgba(230,154,134,.35); }
.size-guide-link:hover{ border-bottom-color: var(--mint); }
.size-options{ display:flex; flex-wrap:wrap; gap: 10px; }
.size-option{ position:relative; cursor:pointer; }
/* The real radio stays in the page (focusable, announced, arrow-key operable);
   only its drawing is replaced by the chip. */
.size-option input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.size-option span{
  display:flex; align-items:center; justify-content:center;
  min-width: 52px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--radius-btn);
  color: var(--text); font-size: .9rem; letter-spacing: .06em;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.size-option:hover span{ border-color: var(--text-dim); }
.size-option input:checked + span{ background: var(--mint); border-color: var(--mint); color: var(--ink); }
.size-option input:focus-visible + span{ outline: 2px solid var(--gold); outline-offset: 2px; }
.size-error{ min-height: 1.3em; margin-top: 10px; font-size: .84rem; color: var(--gold); }
.size-picker + .product-detail-add{ margin-top: 14px; }

.cart-item-size{ font-size: .78rem; color: var(--text-dim); margin: 2px 0 4px; letter-spacing: .03em; }
.cart-item-size.is-missing a{ color: var(--gold); border-bottom: 1px solid var(--gold); }
.cart-status a{ color: var(--mint); text-decoration: underline; }

.size-section{ margin-bottom: 64px; }
.size-section h2{ font-size: 1.7rem; margin-bottom: 22px; }
.size-chart-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.size-chart-card{
  background: rgba(255,255,255,.02); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px 24px 22px;
}
.size-chart-card h3{ font-size: 1.3rem; margin-bottom: 10px; }
.size-chart-pending{ color: var(--text-faint); font-size: .92rem; line-height: 1.7; }
.size-chart-pending a{ color: var(--mint); border-bottom: 1px solid rgba(230,154,134,.35); }
.measure-list{ list-style:none; margin:0; padding:0; max-width: 64ch; border-top: 1px solid var(--line); }
.measure-list li{ padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--text-dim); line-height: 1.7; }
.measure-list strong{
  display:inline-block; min-width: 88px; color: var(--text); font-weight: 400;
  font-family: var(--font-alt); font-size: 1.12rem;
}
.measure-tip{ margin-top: 16px; color: var(--text-faint); font-size: .9rem; }

@media (max-width: 900px){
  .size-chart-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .drop-banner{ padding: 34px 20px 32px; }
  .measure-list strong{ display:block; margin-bottom: 2px; }
}


/* ==========================================================================
   SHARED UTILITIES
   ========================================================================== */
/* Any author `display` beats the browser's own [hidden] rule, which has bitten
   this site before (cart-clear, drop banner). Make hidden mean hidden. */
[hidden]{ display:none !important; }
.visually-hidden{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip: rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Five nav items only fit beside the wordmark at full width; between the
   phone menu (≤720px) and desktop they tighten instead of wrapping. */
@media (min-width: 721px) and (max-width: 1100px){
  .primary-nav{ gap: 20px; }
  .primary-nav a{ letter-spacing: .1em; font-size: .76rem; }
  .nav-cta{ padding: 8px 12px !important; }
  .nav-wrap{ padding: 0 20px; }
  .nav-actions{ gap: 12px; margin-left: 14px; }
}
@media (min-width: 721px) and (max-width: 860px){
  .wordmark span{ display:none; }
}

.signup-more{ margin-top: 6px; font-size: .8rem; }
.signup-more a{ color: var(--text-dim); border-bottom: 1px solid var(--line); }
.signup-more a:hover{ color: var(--mint); border-bottom-color: var(--mint); }
.form-note a{ color: inherit; text-decoration: underline; }

.prose h3{ font-family: var(--font-alt); font-size: 1.2rem; margin: 26px 0 8px; color: var(--text); }
.prose-list{ margin: 14px 0 0; padding-left: 20px; }
.prose-list li{ color: var(--text-dim); line-height: 1.8; margin-bottom: 8px; }
.prose-list li::marker{ color: var(--violet); }
.prose strong{ color: var(--text); font-weight: 400; }
.prose + .prose{ margin-top: 64px; }

/* ==========================================================================
   CUSTOMS
   ========================================================================== */
.customs-section{ margin-bottom: 72px; }
.customs-section h2{ font-size: 1.7rem; margin-bottom: 22px; }
.customs-note{ color: var(--text-faint); font-size: .92rem; margin: -8px 0 20px; }
.customs-note a, .customs-fine a{ color: var(--mint); border-bottom: 1px solid rgba(230,154,134,.35); }
.customs-prose{ color: var(--text-dim); line-height: 1.8; max-width: 62ch; }

.deposit-list{ border-top: 1px solid var(--line); max-width: 760px; }
.deposit-row{
  display:grid; grid-template-columns: 1fr auto auto; align-items:center; gap: 24px;
  padding: 18px 2px; border-bottom: 1px solid var(--line);
}
.deposit-name{ font-family: var(--font-alt); font-size: 1.25rem; }
.deposit-amount{ color: var(--text); letter-spacing: .02em; }
.deposit-amount.is-tbd{ color: var(--text-faint); font-size: .9rem; }
.deposit-action{ min-width: 170px; text-align:right; }
.deposit-soon{ font-size: .78rem; letter-spacing: .08em; color: var(--gold); }
.deposit-terms{
  margin-top: 28px; max-width: 760px; padding: 24px 26px;
  border: 1px solid rgba(227,184,113,.35); border-radius: var(--radius);
}
.deposit-terms h3{ font-size: 1.2rem; margin-bottom: 10px; }
.deposit-terms p{ color: var(--text-dim); line-height: 1.75; margin-bottom: 10px; }

.customs-start h2{ font-size: 1.8rem; margin-bottom: 14px; }
.customs-actions{ display:flex; gap: 14px; justify-content:center; flex-wrap:wrap; }
.customs-address{ margin: 18px 0 0 !important; font-size: .88rem; }
.customs-address strong{ color: var(--text); font-weight: 400; letter-spacing: .02em; user-select: all; }
.customs-fine{ margin: 10px 0 0 !important; font-size: .8rem; color: var(--text-faint) !important; }

@media (max-width: 760px){
  .deposit-row{ grid-template-columns: 1fr auto; gap: 6px 16px; }
  .deposit-action{ grid-column: 1 / -1; text-align:left; min-width: 0; }
}

/* ==========================================================================
   SEE YOURSELF IN IT
   ========================================================================== */
.community-page{ max-width: var(--container); }
.community-jump{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 26px; }
.community-jump a{
  padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px;
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.community-jump a:hover{ border-color: var(--mint); color: var(--mint); }
.community-section{ margin-bottom: 80px; scroll-margin-top: 110px; }
.community-section h2{ font-size: clamp(1.7rem, 3.4vw, 2.2rem); margin-bottom: 22px; }
.community-sub{ color: var(--text-dim); margin: -12px 0 22px; }
.community-empty{
  padding: 30px 28px; border: 1px dashed var(--line); border-radius: var(--radius);
  color: var(--text-dim); text-align:center; max-width: 720px;
}
.community-empty a{ color: var(--mint); border-bottom: 1px solid rgba(230,154,134,.35); }

.reel-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.reel{ margin:0; }
.reel-link{ position:relative; display:block; border-radius: var(--radius); overflow:hidden; }
.reel-media{
  display:block; width:100%; aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--ink-2);
}
.reel-play{
  position:absolute; left:50%; top:50%; width: 58px; height: 58px; transform: translate(-50%,-50%);
  border-radius:50%; background: rgba(11,7,18,.6); border: 1px solid rgba(244,238,248,.6);
  transition: background .3s var(--ease);
}
.reel-play::after{
  content:""; position:absolute; left: 23px; top: 18px;
  border-left: 16px solid var(--text); border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
.reel-link:hover .reel-play, .reel-link:focus-visible .reel-play{ background: var(--mint); }
.reel figcaption{ display:flex; flex-direction:column; gap: 2px; margin-top: 10px; }
.reel-title{ font-family: var(--font-alt); font-size: 1.1rem; color: var(--text); }
.reel-src{ font-size: .76rem; letter-spacing: .08em; color: var(--text-faint); }
a.reel-src:hover{ color: var(--mint); }

.showcase-grid{ columns: 3 240px; column-gap: 18px; }
.showcase{ margin: 0 0 18px; break-inside: avoid; }
.showcase-media{ display:block; width:100%; height:auto; border-radius: var(--radius); border: 1px solid var(--line); }
.showcase figcaption{ margin-top: 8px; font-size: .84rem; color: var(--text-dim); }
.showcase figcaption a{ color: var(--mint); }
.testimonial-list{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 26px; }
.testimonial{
  margin:0; padding: 24px 24px 20px; border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(255,255,255,.02);
}
.testimonial p{ font-family: var(--font-alt); font-size: 1.2rem; line-height: 1.5; color: var(--text); }
.testimonial footer{ margin-top: 12px; font-size: .84rem; color: var(--text-faint); }
.testimonial footer a{ color: var(--mint); }

.event-list{ list-style:none; margin:0; padding:0; border-top: 1px solid var(--line); max-width: 860px; }
.event{
  display:grid; grid-template-columns: 84px 1fr; gap: 26px; padding: 26px 0;
  border-bottom: 1px solid var(--line); scroll-margin-top: 110px;
}
.event-date{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 2px;
  height: 96px; border: 1px solid rgba(227,184,113,.4); border-radius: var(--radius);
  font-size: .68rem; letter-spacing: .16em; color: var(--gold);
}
.event-date strong{ font-family: var(--font-display); font-size: 2rem; font-weight: 400; color: var(--text); letter-spacing: 0; line-height: 1.1; }
.event-kind{ font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.event-body h3{ font-size: 1.5rem; }
.event-when{ margin-top: 6px; color: var(--text); }
.event-where{ margin-top: 4px; color: var(--text-dim); line-height: 1.6; }
.event-where a{ color: var(--text-dim); border-bottom: 1px solid var(--line); }
.event-where a:hover{ color: var(--mint); }
.event-details{ margin-top: 10px; color: var(--text-dim); line-height: 1.7; max-width: 60ch; }
.event-actions{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 16px; }

.next-event-slot{ position:relative; z-index:1; padding: 0 20px; margin: 10px 0 0; }
.next-event{
  max-width: var(--container); margin: 0 auto; display:flex; align-items:center; flex-wrap:wrap; gap: 8px 22px;
  padding: 18px 26px; border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(20,10,34,.55); transition: border-color .3s var(--ease);
}
.next-event:hover{ border-color: var(--mint); }
.next-event-label{ font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.next-event-name{ font-family: var(--font-alt); font-size: 1.25rem; color: var(--text); }
.next-event-meta{ color: var(--text-dim); font-size: .9rem; }
.next-event-go{ margin-left:auto; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mint); }

@media (max-width: 760px){
  .event{ grid-template-columns: 64px 1fr; gap: 16px; }
  .event-date{ height: 78px; }
  .event-date strong{ font-size: 1.6rem; }
  .reel-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .next-event-go{ margin-left: 0; }
}

/* ==========================================================================
   SUBSCRIBE + PREFERENCES FORMS
   ========================================================================== */
.sub-form{ max-width: 640px; }
.sub-fieldset{ border:0; padding:0; margin: 0 0 40px; min-width:0; }
.sub-fieldset legend{ font-family: var(--font-display); font-size: 1.6rem; margin-bottom: 8px; padding:0; }
.sub-hint{ color: var(--text-faint); font-size: .9rem; margin-bottom: 18px; }
.sub-field{ margin-bottom: 18px; }
.sub-field label{ display:block; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; }
.sub-optional{ text-transform:none; letter-spacing: .02em; color: var(--text-faint); margin-left: 6px; }
.sub-form input[type="email"], .sub-form input[type="tel"], .admin input, .admin select, .admin textarea{
  width:100%; background: rgba(255,255,255,.02); border: 1px solid var(--line); border-radius: var(--radius-btn);
  padding: 13px 16px; color: var(--text); font-family: inherit; font-size: 1rem;
}
.sub-form input:focus-visible, .admin input:focus-visible, .admin select:focus-visible, .admin textarea:focus-visible{
  outline: 2px solid var(--gold); outline-offset: 1px; border-color: transparent;
}
.sub-form input[aria-invalid="true"]{ border-color: var(--gold); }
.field-error{ min-height: 1.2em; margin-top: 6px; font-size: .84rem; color: var(--gold); }
.field-error:empty{ min-height: 0; margin: 0; }

.sms-consent{ margin-top: 6px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.02); }
.consent-option, .channel-option{ display:flex; gap: 12px; align-items:flex-start; cursor:pointer; }
.consent-option input, .channel-option input, .topic-option input{
  flex-shrink:0; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--mint); cursor:pointer;
}
.consent-option span{ font-size: .82rem; line-height: 1.65; color: var(--text-dim); }
.consent-option a{ color: var(--mint); text-decoration: underline; }
.channel-option{ padding: 14px 0; border-bottom: 1px solid var(--line); }
.channel-option span{ color: var(--text-dim); }
.channel-option strong{ color: var(--text); font-weight: 400; letter-spacing: .03em; }

.topic-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 14px; }
.topic-option{
  display:flex; gap: 12px; align-items:flex-start; cursor:pointer;
  padding: 16px 16px; border: 1px solid var(--line); border-radius: var(--radius-btn);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.topic-option:hover{ border-color: var(--text-dim); }
.topic-option:has(input:checked){ border-color: var(--mint); background: rgba(230,154,134,.06); }
.topic-option:has(input:focus-visible){ outline: 2px solid var(--gold); outline-offset: 2px; }
.topic-option span{ display:flex; flex-direction:column; gap: 2px; }
.topic-option strong{ font-weight: 400; color: var(--text); letter-spacing: .03em; }
.topic-option small{ color: var(--text-faint); font-size: .78rem; }

.sub-status{ margin-top: 14px; }
.sub-done{ padding: 34px 30px; border: 1px solid rgba(230,154,134,.45); border-radius: var(--radius); outline: none; }
.sub-done h2{ font-size: 2rem; margin-bottom: 12px; }
.sub-done p{ color: var(--text-dim); margin-top: 8px; line-height: 1.7; }
.sub-done a{ color: var(--mint); text-decoration: underline; }

.prefs-loading{ color: var(--text-dim); }
.prefs-problem{ max-width: 640px; padding: 28px; border: 1px solid rgba(227,184,113,.4); border-radius: var(--radius); }
.prefs-problem p{ color: var(--text-dim); margin-bottom: 18px; }
.prefs-leave{ margin-top: 64px !important; padding-top: 36px !important; border-top: 1px solid var(--line); }
.prefs-leave h2{ font-size: 1.6rem; margin-bottom: 8px; }
.prefs-leave > p{ color: var(--text-dim); margin-bottom: 16px; }
.prefs-delete{ margin-top: 26px; }
.prefs-delete summary{ cursor:pointer; color: var(--text-faint); font-size: .86rem; }
.prefs-delete p{ color: var(--text-dim); font-size: .9rem; margin: 12px 0 14px; max-width: 56ch; }

@media (max-width: 560px){
  .topic-grid{ grid-template-columns: 1fr; }
  .sub-form .btn{ width: 100%; }
}

/* ==========================================================================
   ADMIN (owner-only page — plain and functional)
   ========================================================================== */
.admin-body{ background: var(--ink); }
.admin{ max-width: 860px; margin: 0 auto; padding: 48px 20px 80px; }
.admin-head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 16px; flex-wrap:wrap; margin-bottom: 26px; }
.admin-head h1{ font-size: 2.4rem; flex: 1; }
.admin-card{ padding: 26px 26px 22px; margin-bottom: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-2); }
.admin-card h2{ font-size: 1.5rem; margin-bottom: 14px; }
.admin-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap: 12px; flex-wrap:wrap; }
.admin label, .admin legend{ display:block; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin: 16px 0 6px; padding: 0; }
.admin textarea{ resize: vertical; line-height: 1.6; }
.admin select option{ background: var(--ink-2); }
.admin .btn{ margin-top: 16px; }
.admin-channels{ border:0; padding:0; margin: 0; }
.admin-channels label{ display:inline-flex; align-items:center; gap: 8px; margin: 4px 22px 0 0; text-transform:none; letter-spacing: .02em; font-size: .95rem; color: var(--text); }
.admin-channels input{ width: 18px; height: 18px; accent-color: var(--mint); }
.admin-channels input:disabled + *{ opacity:.5; }
.admin-hint{ color: var(--text-faint); font-size: .86rem; margin-top: 6px; }
.admin-count{ color: var(--gold); }
.admin-stats{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 6px 0 18px; }
.admin-stat{ padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.admin-stat strong{ display:block; font-family: var(--font-display); font-size: 2rem; font-weight: 400; }
.admin-stat span{ font-size: .78rem; color: var(--text-dim); }
.admin-table-wrap{ overflow-x:auto; }
.admin-table{ width:100%; border-collapse: collapse; font-size: .9rem; }
.admin-table th, .admin-table td{ text-align:left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.admin-table thead th{ font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); font-weight: 400; }
.admin-table tbody th{ font-weight: 400; }
.admin-live{ margin-top: 14px; font-size: .86rem; color: var(--text-dim); }
.admin-confirm, .admin-progress{ margin-top: 18px; padding: 16px 18px; border: 1px solid rgba(227,184,113,.45); border-radius: var(--radius); }
.admin-confirm p, .admin-progress p{ color: var(--text); }
.admin-confirm .btn{ margin: 12px 10px 0 0; }
@media (max-width: 600px){ .admin-stats{ grid-template-columns: repeat(2, 1fr); } }

/* Drop pieces sold through Bri's Stripe Payment Links (New Moon drop). */
.buy-now-note{ margin-top: 12px; font-size: .84rem; color: var(--text-dim); max-width: 340px; line-height: 1.6; }
.buy-now-note a{ color: var(--mint); border-bottom: 1px solid rgba(230,154,134,.35); }

/* Size charts (size-guide.html) */
.size-callout{
  max-width: 760px; margin: 0 0 28px; padding: 18px 22px;
  border: 1px solid rgba(227,184,113,.4); border-radius: var(--radius); background: rgba(227,184,113,.05);
}
.size-callout p{ color: var(--text-dim); line-height: 1.7; }
.size-callout p + p{ margin-top: 6px; font-size: .9rem; }
.size-callout strong{ color: var(--gold); font-weight: 500; }
.size-chart-grid{ grid-template-columns: minmax(0, 1fr); }
.size-chart-card{ min-width: 0; }
.size-table-wrap{ overflow-x: auto; margin: 6px 0 18px; }
.size-table{ width: 100%; border-collapse: collapse; font-size: .92rem; font-variant-numeric: tabular-nums; }
.size-table caption{ text-align: left; font-family: var(--font-alt); font-size: 1.1rem; color: var(--text); padding: 4px 0 10px; }
.size-table th, .size-table td{ padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.size-table thead th{ font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); font-weight: 400; }
.size-table tbody th{ color: var(--gold); font-weight: 500; }
.size-table td{ color: var(--text-dim); }

/* Preorders (COVEN) */
.drop-limit{ margin-top: 6px; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.drop-banner.is-sold-out .drop-countdown{ opacity: .75; }
.drop-preorder-terms{ margin: 10px auto 0; max-width: 46ch; font-size: .88rem; color: var(--text-dim); line-height: 1.6; }
.drop-launch{ margin: 22px 0 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.drop-countdown-label{ font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); }
.drop-launch .drop-countdown{ margin-top: 4px; }
.drop-launch .drop-when{ margin-top: 6px; font-size: .86rem; }
.preorder-policy{ margin-top: 16px; max-width: 420px; padding: 14px 16px; border: 1px solid rgba(214,178,106,.45); border-radius: 10px; }
.preorder-policy .eyebrow{ margin-bottom: 6px; color: var(--gold); }
.preorder-policy p:last-child{ font-size: .86rem; line-height: 1.6; color: var(--text); }
.cart-preorder-policy{ margin-top: -8px; color: var(--text) !important; }
.cart-item-preorder{ display:inline-block; margin: 2px 0 4px; padding: 2px 8px; border-radius: 999px;
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; background: var(--gold); color: var(--ink); }
.cart-preorder-note{ margin-top: -8px; }

/* ===== Sale (sale.html, and sale prices everywhere) =====
   The old price is struck through in the faint text colour; the sale price
   takes the Solstice accent. "Sale" badge in Solstice so it reads apart from
   the gold New/Preorder badges. */
.price-was{ color: var(--text-faint); text-decoration-thickness: 1px; margin-right: .3em; font-size: .9em; }
.price.is-sale .price-now, .product-detail-price.is-sale .price-now, .cart-item-price.is-sale .price-now{ color: var(--mint); }
.product-badge.is-sale{ background: var(--mint); color: var(--ink); }
.product-sale-note{ margin-top: 6px; color: var(--mint); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
/* The nav link only shows while something is on sale (js/products.js). */
.primary-nav a[hidden], .footer-links a[hidden]{ display:none !important; }
.primary-nav a.nav-sale{ color: var(--mint); }
.primary-nav a.nav-sale:hover, .primary-nav a.nav-sale.is-current{ color: var(--mint-soft); }
.sale-empty{ text-align:center; padding: 40px 20px 20px; max-width: 560px; margin: 0 auto; }
.sale-empty[hidden]{ display:none !important; }
.sale-empty h2{ font-size: clamp(1.8rem, 4vw, 2.4rem); }
.sale-empty .section-sub{ margin: 14px auto 0; }
.sale-empty-actions{ display:flex; gap: 14px; justify-content:center; flex-wrap: wrap; margin-top: 28px; }

/* Sale strip (Home, Shop) and Sale page header — only while a sale runs. */
.sale-banner-slot[hidden]{ display:none !important; }
.sale-banner-slot{ padding: 0 20px; }
.sale-banner-home{ padding-top: 10px; padding-bottom: 10px; }
.page .sale-banner-slot{ padding: 0; margin: -18px 0 46px; }
.sale-strip{
  max-width: var(--container); margin: 0 auto;
  display:flex; align-items:center; justify-content:center; flex-wrap: wrap; gap: 10px 26px;
  padding: 18px 26px; text-align:center;
  border: 1px solid rgba(230,154,134,.45); border-radius: var(--radius);
  background:
    radial-gradient(90% 160% at 50% 0%, rgba(230,154,134,.16), transparent 70%),
    rgba(20,10,34,.55);
  box-shadow: 0 0 60px rgba(230,154,134,.12);
}
.sale-strip-headline{
  font-family: var(--font-display, inherit); font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  color: var(--mint); letter-spacing: .04em;
}
.sale-strip-line{ font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); }

.sale-head.is-on{ text-align:center; margin-left:auto; margin-right:auto; }
.sale-head.is-on .eyebrow{ color: var(--mint); }
.sale-head.is-on h1{ color: var(--text); }
.sale-head-line{ margin-top: 14px; font-size: .9rem; letter-spacing: .18em; text-transform: uppercase; color: var(--mint-soft); }
.sale-head-line[hidden], .sale-countdown[hidden]{ display:none !important; }
.sale-countdown{ margin: 16px 0 0; }