/* =========================================================
   AFTERCARE — design system
   Fictional brand. Static mockup, no external assets.
   ========================================================= */

:root{
  /* --- Palette: deep ink base, bone paper, calm accents --- */
  --ink:        #0B0C0E;   /* page base */
  --ink-2:      #121317;   /* raised surfaces */
  --ink-3:      #1B1D22;   /* cards, hairlines base */
  --bone:       #F4F1EA;   /* primary text on dark */
  --mist:       #A8A49C;   /* secondary text */
  --mist-dim:   #6E6B66;   /* tertiary text */
  --line:       rgba(244,241,234,.14);

  --gold:       #D8B26A;   /* accent — warmth, luxury */
  --lilac:      #9A8CB0;   /* accent — calm */
  --sage:       #79907F;   /* accent — growth */

  /* --- Type: system stacks only, zero network requests --- */
  --font-display: "Helvetica Neue", Helvetica, "Segoe UI", Arial, system-ui, sans-serif;
  --font-serif:   "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-ui:      system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- Rhythm --- */
  --wrap: 1240px;
  --gut: 32px;
  --r: 4px;          /* editorial, near-square corners */
  --r-lg: 10px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; overflow-x:hidden; }

.hide-sm{ display:inline; }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:500; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--bone); color:var(--ink); padding:10px 16px;
}
.skip-link:focus{ left:12px; top:12px; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* =========================================================
   Announcement bar
   ========================================================= */
.announce{
  background:linear-gradient(90deg,#15161A,#1D1F25 45%,#15161A);
  border-bottom:1px solid var(--line);
  text-align:center;
}
.announce p{
  margin:0; padding:9px 20px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mist);
}

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(11,12,14,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled{
  background:rgba(9,10,12,.94);
  box-shadow:0 12px 40px -24px rgba(0,0,0,.9);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; height:70px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ color:var(--gold); display:flex; }
.brand-word{
  font-family:var(--font-display);
  font-size:19px; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase;
  padding-left:.28em; /* optical balance for tracking */
}
.nav{
  display:flex; gap:34px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mist);
}
.nav a{ position:relative; padding:6px 0; transition:color .25s ease; }
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold); transition:width .3s ease;
}
.nav a:hover{ color:var(--bone); }
.nav a:hover::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:18px; color:var(--mist); }
.icon-link{ position:relative; display:flex; transition:color .25s ease; }
.icon-link:hover{ color:var(--bone); }
.cart-count{
  position:absolute; top:-6px; right:-9px;
  min-width:16px; height:16px; padding:0 4px;
  display:grid; place-items:center;
  background:var(--gold); color:var(--ink);
  border-radius:99px; font-size:10px; font-weight:700; line-height:1;
}

/* =========================================================
   Mobile navigation
   ========================================================= */
.nav-toggle{
  display:none;               /* shown only below 820px */
  align-items:center; justify-content:center;
  width:44px; height:44px; margin-right:-11px;  /* 44px touch target, optically aligned */
  padding:0; border:0; background:transparent;
  color:var(--bone); cursor:pointer;
  transition:color .25s ease;
}
.nav-toggle:hover{ color:var(--gold); }

.nav-close{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin-right:-11px;
  padding:0; border:0; background:transparent;
  color:var(--bone); cursor:pointer;
  transition:color .25s ease, transform .25s ease;
}
.nav-close:hover{ color:var(--gold); transform:rotate(90deg); }

.mobile-nav{
  position:fixed; inset:0; z-index:60;
  display:flex; flex-direction:column;
  padding:0 var(--gut) calc(var(--gut) + 8px);
  background:#0A0B0D;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .34s ease, transform .34s ease, visibility .34s;
}
body.nav-open .mobile-nav{ opacity:1; visibility:visible; transform:none; }
body.nav-open{ overflow:hidden; }

.mobile-nav-aura{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(52% 34% at 82% 8%,  rgba(154,140,176,.26), transparent 70%),
    radial-gradient(46% 30% at 6% 96%,  rgba(121,144,127,.22), transparent 72%),
    radial-gradient(40% 26% at 50% 50%, rgba(216,178,106,.08), transparent 74%);
}

.mobile-nav-top,
.mobile-nav-links,
.mobile-nav-sub,
.mobile-nav-foot{ position:relative; z-index:1; }

.mobile-nav-top{
  display:flex; align-items:center; justify-content:space-between;
  height:62px; flex:none;
}

/* Links hang from the top bar — centring them left a dead gap under the logo. */
.mobile-nav-links{
  display:flex; flex-direction:column; justify-content:flex-start;
  flex:1 1 auto; min-height:0;
  margin-top:26px;
}
.mobile-nav-links a{
  display:flex; align-items:baseline; gap:16px;
  padding:25px 0;
  border-bottom:1px solid var(--line);
  font-family:var(--font-display);
  font-size:clamp(24px,6.6vw,32px);
  line-height:1.1; letter-spacing:-.02em; text-transform:uppercase; font-weight:600;
  transition:color .25s ease, padding-left .3s ease;
}
.mobile-nav-links a:first-child{ border-top:1px solid var(--line); }
.mobile-nav-links a:hover{ color:var(--gold); padding-left:8px; }
.link-num{
  flex:none; width:24px;
  font-size:10.5px; letter-spacing:.18em; font-weight:500; color:var(--gold);
}

/* links rise in, one after another */
body.nav-open .mobile-nav-links a{ animation:navRise .45s both; }
body.nav-open .mobile-nav-links a:nth-child(1){ animation-delay:.06s; }
body.nav-open .mobile-nav-links a:nth-child(2){ animation-delay:.12s; }
body.nav-open .mobile-nav-links a:nth-child(3){ animation-delay:.18s; }
body.nav-open .mobile-nav-links a:nth-child(4){ animation-delay:.24s; }
@keyframes navRise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.mobile-nav-sub{
  flex:none; display:flex; flex-wrap:wrap; gap:12px 26px;
  margin-top:26px;
}
.mobile-nav-sub a{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--mist);
  transition:color .25s ease;
}
.mobile-nav-sub a:hover{ color:var(--gold); }
.sub-count{
  display:grid; place-items:center;
  min-width:16px; height:16px; padding:0 4px;
  border-radius:99px; background:var(--gold); color:var(--ink);
  font-size:10px; font-weight:700; line-height:1;
}

.mobile-nav-foot{ flex:none; padding-top:22px; border-top:1px solid var(--line); }
.mobile-nav-tag{
  font-family:var(--font-serif); font-style:italic;
  font-size:17px; color:var(--bone);
}
.mobile-nav-note{
  margin-top:8px;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mist-dim);
}

@media (max-width:820px){
  .nav-toggle{ display:inline-flex; }
}
@media (prefers-reduced-motion:reduce){
  body.nav-open .mobile-nav-links a{ animation:none; }
}

/* =========================================================
   Hero — the top half does the whole job
   ========================================================= */
.hero{ position:relative; overflow:hidden; }

/* layered gradient "aura": calm light bleeding into the ink */
.hero-aura{
  position:absolute; inset:-20% -10% auto -10%; height:150%;
  background:
    radial-gradient(58% 46% at 72% 22%, rgba(154,140,176,.28), transparent 70%),
    radial-gradient(46% 40% at 18% 8%,  rgba(216,178,106,.16), transparent 70%),
    radial-gradient(64% 52% at 40% 96%, rgba(121,144,127,.20), transparent 72%);
  filter:blur(6px);
  pointer-events:none;
}

.hero-grid{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:56px; align-items:center;
  padding-block:56px 52px;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold);
  padding:7px 14px 7px 12px;
  border:1px solid rgba(216,178,106,.32);
  border-radius:99px;
  background:rgba(216,178,106,.06);
}
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 4px rgba(216,178,106,.16);
}

.hero-title{
  font-family:var(--font-display);
  font-size:clamp(48px, 6.4vw, 92px);
  line-height:.96;
  letter-spacing:-.035em;
  text-transform:uppercase;
  font-weight:600;
  margin:26px 0 0;
}
.hero-title em{
  font-family:var(--font-serif);
  font-style:italic; font-weight:400;
  text-transform:lowercase;
  letter-spacing:-.01em;
  background:linear-gradient(100deg,var(--gold),var(--lilac) 60%,var(--sage));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  padding-right:.06em;
}

.hero-lede{
  margin-top:24px;
  max-width:50ch;
  font-size:clamp(15px,1.15vw,17.5px);
  line-height:1.72;
  color:var(--mist);
}

.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 28px;
  border-radius:var(--r);
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  border:1px solid transparent;
  transition:transform .2s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn-primary{ background:var(--bone); color:var(--ink); }
.btn-primary:hover{ background:var(--gold); transform:translateY(-2px); }
.btn-ghost{ border-color:var(--line); color:var(--bone); }
.btn-ghost:hover{ border-color:var(--bone); transform:translateY(-2px); }

.hero-trust{
  display:flex; flex-wrap:wrap; gap:10px 20px;
  margin-top:34px; padding-top:24px;
  border-top:1px solid var(--line);
  font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--mist-dim);
}
.hero-trust li{ display:flex; align-items:center; gap:9px; }
.hero-trust li::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--sage); flex:none;
}

/* --- Hero visual --- */
.hero-visual{ display:flex; justify-content:center; }
.hero-plate{
  position:relative; width:100%; max-width:470px;
  padding:22px 22px 18px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:
    linear-gradient(160deg, rgba(244,241,234,.05), rgba(244,241,234,0) 42%),
    linear-gradient(180deg,#141519,#0D0E11);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}
/* capped so the whole hero clears a 800px-tall fold */
.garment{ width:100%; height:auto; max-height:min(52vh,420px); }

.plate-tag{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  margin-top:14px; padding-top:14px;
  border-top:1px solid var(--line);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mist-dim);
}
.plate-tag strong{
  font-weight:500; letter-spacing:.1em; color:var(--bone);
}

/* --- Marquee: mantra strip closing the fold --- */
.marquee{
  position:relative;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:rgba(244,241,234,.02);
  overflow:hidden;
  padding:14px 0;
}
.marquee-track{
  display:flex; width:max-content;
  animation:slide 42s linear infinite;
}
.marquee-track span{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:17px;
  color:var(--mist);
  white-space:nowrap;
  padding-right:28px;
}
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

@media (prefers-reduced-motion:reduce){
  .marquee-track{ animation:none; }
  *{ transition-duration:.01ms !important; }
}

/* =========================================================
   Sections
   ========================================================= */
.section{ padding-block:96px; }

.section-label{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--mist-dim);
}
.section-label em{ font-style:italic; font-family:var(--font-serif); text-transform:none; letter-spacing:.04em; color:var(--gold); }

.section-title{
  font-family:var(--font-display);
  font-size:clamp(30px,3.4vw,46px);
  letter-spacing:-.02em; text-transform:uppercase; font-weight:600;
  margin-top:10px;
}

.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; margin-bottom:44px;
}
.link-arrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mist); padding-bottom:4px;
  border-bottom:1px solid var(--line);
  transition:color .25s ease, border-color .25s ease;
}
.link-arrow:hover{ color:var(--gold); border-color:var(--gold); }

/* --- Mission --- */
.mission{ border-top:1px solid var(--line); }
.mission-grid{
  display:grid; grid-template-columns:200px minmax(0,1fr); gap:48px;
}
.mission-statement{
  font-family:var(--font-display);
  font-size:clamp(26px,2.9vw,40px);
  line-height:1.18; letter-spacing:-.02em; font-weight:500;
  max-width:20ch;
}
.mission-statement em{
  font-family:var(--font-serif); font-style:italic; font-weight:400;
  color:var(--gold); letter-spacing:0;
}
.mission-body{
  margin-top:24px; max-width:56ch;
  color:var(--mist); font-size:16px; line-height:1.78;
}

/* --- Pillars --- */
.pillars{ padding-top:0; }
.pillar-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.pillar{
  background:var(--ink-2);
  padding:38px 32px 42px;
  transition:background .3s ease;
}
.pillar:hover{ background:var(--ink-3); }
.pillar-num{
  font-family:var(--font-display);
  font-size:12px; letter-spacing:.2em; color:var(--gold);
}
.pillar h3{
  margin-top:18px;
  font-family:var(--font-display);
  font-size:19px; letter-spacing:.02em; font-weight:600;
}
.pillar p{ margin-top:12px; color:var(--mist); font-size:14.5px; line-height:1.7; }

/* --- Collection teaser --- */
.collection{ border-top:1px solid var(--line); }
.product-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px;
}
.product-card{ display:block; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.product-art{
  aspect-ratio:4/5;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  display:grid; place-items:center;
  transition:transform .4s ease, border-color .4s ease;
}
/* fill/stroke must be INHERITED: CSS selectors don't reach inside a <use> shadow tree */
.art-svg{ width:78%; height:78%; fill:currentColor; opacity:.2; }
.product-card:hover .product-art{ transform:translateY(-6px); border-color:rgba(216,178,106,.4); }

/* Product "photography" built from gradients only */
.art-1{
  color:#F4F1EA;
  background:
    radial-gradient(70% 55% at 50% 42%, rgba(154,140,176,.32), transparent 72%),
    linear-gradient(165deg,#24262C,#101116 70%);
}
.art-2{
  color:#0B0C0E;
  background:
    radial-gradient(66% 52% at 46% 40%, rgba(216,178,106,.28), transparent 70%),
    linear-gradient(165deg,#E8E3D8,#BDB6A8 78%);
}
.art-3{
  color:#F4F1EA;
  background:
    radial-gradient(70% 55% at 54% 44%, rgba(121,144,127,.42), transparent 72%),
    linear-gradient(165deg,#39423B,#141715 74%);
}

.product-meta{ padding-top:16px; }
.product-meta h3{
  font-family:var(--font-display);
  font-size:15.5px; letter-spacing:.04em; font-weight:600;
}
.product-meta p{ margin-top:5px; color:var(--mist-dim); font-size:13px; }
.price{ display:inline-block; margin-top:9px; font-size:14px; color:var(--gold); letter-spacing:.06em; }

/* =========================================================
   Product page (producto.html)
   ========================================================= */
.breadcrumb{
  display:flex; align-items:center; gap:10px;
  padding-top:26px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mist-dim);
}
.breadcrumb a{ transition:color .25s ease; }
.breadcrumb a:hover{ color:var(--gold); }
.breadcrumb span[aria-current]{ color:var(--mist); }

.pdp{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:56px; align-items:start;
  padding-block:32px 96px;
}

/* --- Gallery --- */
.pdp-gallery{ position:sticky; top:96px; }
.pdp-stage{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:26px;
  background:
    radial-gradient(72% 58% at 50% 34%, rgba(154,140,176,.16), transparent 72%),
    linear-gradient(180deg,#141519,#0D0E11);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}
.stage-badge{
  position:absolute; top:18px; left:18px; z-index:2;
  padding:6px 12px;
  border:1px solid rgba(216,178,106,.3);
  border-radius:99px;
  background:rgba(216,178,106,.07);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
}
.pdp-garment{ width:100%; height:auto; max-height:min(64vh,520px); }
.pdp-view.is-hidden{ display:none; }

.pdp-thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; }
.thumb{
  display:grid; justify-items:center; gap:6px;
  padding:12px 8px 10px;
  border:1px solid var(--line); border-radius:var(--r);
  background:rgba(244,241,234,.02);
  color:var(--mist-dim);
  font-family:inherit; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer;
  transition:border-color .25s ease, color .25s ease, background .25s ease;
}
.thumb:hover{ border-color:rgba(244,241,234,.3); color:var(--mist); }
.thumb.is-active{ border-color:var(--gold); color:var(--gold); background:rgba(216,178,106,.06); }
/* The garment art stays tonal even when the thumb is selected —
   only the frame and the label pick up the gold. */
.thumb-svg{ width:56px; height:62px; fill:var(--mist); opacity:.4; }
.thumb.is-active .thumb-svg{ fill:var(--bone); opacity:.7; }
.thumb-mark{ fill:none; stroke:var(--mist); opacity:.55; }
.thumb.is-active .thumb-mark{ stroke:var(--bone); opacity:.8; }

/* --- Buy box --- */
.pdp-title{
  font-family:var(--font-display);
  font-size:clamp(30px,3.2vw,44px);
  line-height:1.04; letter-spacing:-.03em; text-transform:uppercase; font-weight:600;
  margin-top:12px;
}
.pdp-price-row{ display:flex; align-items:baseline; gap:14px; margin-top:16px; }
.pdp-price{ font-size:26px; color:var(--bone); letter-spacing:.02em; }
.pdp-price-note{ font-size:12px; letter-spacing:.08em; color:var(--mist-dim); }

.pdp-lede{
  margin-top:20px; max-width:52ch;
  color:var(--mist); font-size:15.5px; line-height:1.75;
}

.option-block{ margin-top:32px; }
/* Label and its value read as one unit; secondary links get pushed right. */
.option-head{
  display:flex; align-items:baseline; gap:12px;
  margin-bottom:14px;
}
.option-link{ margin-left:auto; }
.option-label{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mist);
}
.option-value{ font-size:12.5px; color:var(--bone); letter-spacing:.06em; }
.option-link{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mist-dim); border-bottom:1px solid var(--line);
  transition:color .25s ease, border-color .25s ease;
}
.option-link:hover{ color:var(--gold); border-color:var(--gold); }

.swatches{ display:flex; gap:12px; }
.swatch{
  width:34px; height:34px; padding:0; cursor:pointer;
  border-radius:50%;
  background:var(--sw);
  border:1px solid rgba(244,241,234,.22);
  box-shadow:0 0 0 0 rgba(216,178,106,0);
  transition:box-shadow .25s ease, transform .2s ease;
}
.swatch:hover{ transform:translateY(-2px); }
.swatch.is-active{ box-shadow:0 0 0 2px var(--ink), 0 0 0 3.5px var(--gold); }

.sizes{ display:flex; flex-wrap:wrap; gap:10px; }
.size{
  min-width:60px; min-height:48px; padding:0 16px;
  border:1px solid var(--line); border-radius:var(--r);
  background:transparent; color:var(--bone);
  font-family:inherit; font-size:13px; letter-spacing:.1em; font-weight:600;
  cursor:pointer;
  transition:border-color .25s ease, background .25s ease, color .25s ease;
}
.size:hover{ border-color:rgba(244,241,234,.45); }
.size.is-active{ background:var(--bone); color:var(--ink); border-color:var(--bone); }
.size.is-out{
  color:var(--mist-dim); cursor:not-allowed;
  background:
    linear-gradient(to top left, transparent 47.5%, rgba(244,241,234,.22) 49%, rgba(244,241,234,.22) 51%, transparent 52.5%);
}
.size-note{ margin-top:12px; font-size:12px; color:var(--mist-dim); }

.btn-cart{ width:100%; margin-top:32px; min-height:58px; }
.cart-note{
  margin-top:12px; text-align:center;
  font-size:11.5px; letter-spacing:.08em; color:var(--mist-dim);
}
.cart-note.is-loud{ color:var(--gold); }

.badges{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;
  margin-top:28px; padding:20px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.badges li{
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mist-dim);
}
.badges svg{ color:var(--sage); }

/* --- Accordion --- */
.accordion{ margin-top:12px; }
.accordion details{ border-bottom:1px solid var(--line); }
.accordion summary{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0; cursor:pointer; list-style:none;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--bone);
}
.accordion summary::-webkit-details-marker{ display:none; }
.accordion summary::after{
  content:"+"; font-size:18px; color:var(--mist-dim); line-height:1;
}
.accordion details[open] summary::after{ content:"\2013"; }
.acc-body{ padding-bottom:22px; }
.acc-body p{ color:var(--mist); font-size:14.5px; line-height:1.75; max-width:56ch; }

/* --- Story --- */
.story{ border-top:1px solid var(--line); }
.story-grid{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:56px; align-items:start;
}
.story-title{
  font-family:var(--font-display);
  font-size:clamp(26px,2.8vw,38px);
  line-height:1.16; letter-spacing:-.02em; font-weight:500;
  margin-top:12px; max-width:22ch;
}
.story-title em{
  font-family:var(--font-serif); font-style:italic; font-weight:400;
  color:var(--gold); letter-spacing:0;
}
.story-copy p{
  margin-top:22px; max-width:60ch;
  color:var(--mist); font-size:16px; line-height:1.8;
}
.story-sign{
  font-family:var(--font-serif); font-style:italic;
  color:var(--mist-dim) !important;
}
.story-card{
  padding:26px;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg,#141519,#0D0E11);
}
.card-eyebrow{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
.card-art{
  width:100%; height:auto; margin-top:16px;
  border-radius:var(--r);
}
.story-card h3{
  margin-top:20px;
  font-family:var(--font-display);
  font-size:17px; letter-spacing:.03em; font-weight:600;
}
.story-card p{ margin-top:10px; color:var(--mist); font-size:14px; line-height:1.7; }

/* --- Reviews (clearly flagged as sample copy) --- */
.reviews{ border-top:1px solid var(--line); padding-top:80px; }
.mock-flag{
  max-width:44ch; padding:12px 16px; line-height:1.7;
  border:1px dashed rgba(216,178,106,.45); border-radius:var(--r);
  background:rgba(216,178,106,.05);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold);
}
.review-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.review{
  padding:28px 26px 24px;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--ink-2);
}
.stars{ color:var(--gold); }
.review-text{
  margin-top:18px;
  font-family:var(--font-serif); font-size:16.5px; line-height:1.65; color:var(--bone);
}
.review-meta{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--line);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--mist-dim);
}
.sample-tag{
  display:inline-block; margin-right:8px; padding:3px 8px;
  border:1px solid rgba(216,178,106,.4); border-radius:3px;
  color:var(--gold); font-size:9.5px; letter-spacing:.1em;
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,#0D0E11,#08090B);
  padding-top:64px;
}
.footer-inner{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:48px; padding-bottom:52px;
}
.footer-brand p{ margin-top:16px; max-width:40ch; color:var(--mist-dim); font-size:14px; }
.footer-nav{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
.footer-nav h4{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mist);
  margin-bottom:16px;
}
.footer-nav a{
  display:block; padding:5px 0; color:var(--mist-dim); font-size:14px;
  transition:color .25s ease;
}
.footer-nav a:hover{ color:var(--bone); }

.footer-base{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px;
  padding-block:22px;
  border-top:1px solid var(--line);
  font-size:11.5px; letter-spacing:.08em; color:var(--mist-dim);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1024px){
  .hero-grid{ gap:40px; padding-block:60px 52px; }
  .nav{ gap:24px; }
  .mission-grid{ grid-template-columns:1fr; gap:20px; }
  .pdp{ gap:36px; }
  .story-grid{ grid-template-columns:1fr; gap:36px; }
  .review-grid{ grid-template-columns:1fr; }
}

@media (max-width:820px){
  :root{ --gut:22px; }
  .nav{ display:none; }
  /* On phones the message comes first — the garment follows it. */
  .hero-grid{ grid-template-columns:1fr; padding-block:40px; gap:40px; }
  .hero-plate{ max-width:360px; margin-inline:auto; padding:16px 16px 14px; }
  .garment{ max-height:none; }
  .hero-title{ font-size:clamp(42px,12.5vw,64px); }
  .hero-lede{ font-size:15.5px; }
  .section{ padding-block:68px; }
  .pillar-grid{ grid-template-columns:1fr; }
  .product-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .footer-inner{ grid-template-columns:1fr; gap:36px; }

  /* Product page: one column, image first (that is what a phone shopper wants) */
  .pdp{ grid-template-columns:1fr; gap:36px; padding-block:24px 64px; }
  .pdp-gallery{ position:static; }
  .pdp-stage{ padding:18px; }
  .pdp-garment{ max-height:none; }
  .reviews{ padding-top:64px; }
}

@media (max-width:520px){
  .hide-sm{ display:none; }
  .header-inner{ height:62px; }
  .brand-word{ font-size:16px; letter-spacing:.24em; }
  .announce p{ font-size:10px; letter-spacing:.1em; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .btn{ width:100%; }
  .hero-trust{ flex-direction:column; gap:10px; }
  .section-head{ flex-direction:column; align-items:flex-start; }
  .product-grid{ grid-template-columns:1fr; gap:24px; }
  .marquee-track span{ font-size:15px; }

  .breadcrumb{ font-size:10px; letter-spacing:.1em; gap:7px; }
  .pdp-price{ font-size:23px; }
  /* Grid, not wrapping flex: a lone size on the last row must not stretch full width */
  .sizes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .size{ min-width:0; }
  .badges{ grid-template-columns:1fr; gap:16px; }
  .badges li{ flex-direction:row; justify-content:flex-start; text-align:left; gap:12px; }
  .mock-flag{ max-width:none; }
}