@import url("reset.css");
@import url("tokens.css");

/* ============================================
   BASE
   ============================================ */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--ivory);
  background: var(--charcoal);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.italic {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 300;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-weight: 400;
  color: var(--gold);
  display: inline-block;
}

.eyebrow--muted { color: var(--muted); }

.lede {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.5;
  color: var(--ivory);
  letter-spacing: 0.005em;
}

a { transition: color var(--t-fast) var(--ease-out); }
a:hover { color: var(--gold); }

/* ============================================
   LAYOUT
   ============================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.container--reading { max-width: var(--container-reading); }

section { padding-block: var(--space-7); }
@media (max-width: 768px) { section { padding-block: var(--space-6); } }

.divider {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin-block: var(--space-5);
}

.section-head { text-align: center; margin-bottom: var(--space-5); }
.section-head h2 { font-size: var(--fs-display); margin-top: var(--space-2); }
.section-head .lede { max-width: 56ch; margin: var(--space-3) auto 0; }

.section-light {
  background: var(--ivory-soft);
  color: var(--ink);
  border-block: 1px solid rgba(23, 19, 13, 0.08);
}
.section-light .eyebrow {
  color: var(--gold-deep);
}
.section-light h1,
.section-light h2,
.section-light h3 {
  color: var(--ink);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  padding: 1rem 2rem;
  border: 1px solid var(--gold);
  color: var(--gold);
  background: transparent;
  cursor: pointer;
  transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), letter-spacing var(--t-base) var(--ease-out);
}
.btn:hover { background: var(--gold); color: var(--black); letter-spacing: 0.32em; }

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

.btn--ivory { border-color: var(--ivory); color: var(--ivory); }
.btn--ivory:hover { background: var(--ivory); color: var(--black); }

.btn .arrow {
  display: inline-block;
  transition: transform var(--t-base) var(--ease-out);
}
.btn:hover .arrow { transform: translateX(4px); }

/* ============================================
   NAVIGATION
   ============================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 1.2rem var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  background: transparent;
  transition: background var(--t-base) var(--ease-out), padding var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0.8rem var(--gutter);
  border-bottom-color: var(--rule);
}

.nav__brand {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-self: center;
}
.nav__brand-mark {
  width: 28px; height: 28px;
  display: inline-block;
}
.nav__brand-text {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
@media (max-width: 540px) {
  .nav__brand-text { font-size: 0.85rem; letter-spacing: 0.18em; }
}

.nav__menu {
  grid-column: 1;
  display: flex;
  gap: 2.2rem;
  align-items: center;
}
.nav__menu--right { grid-column: 3; justify-content: flex-end; }
.nav__link {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ivory);
  font-weight: 300;
  position: relative;
  padding-block: 0.2rem;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav__link:hover { color: var(--gold); }

.nav__toggle {
  grid-column: 1;
  display: none;
  width: 32px; height: 32px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  color: var(--ivory);
}
.nav__toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out);
}
.nav__toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
  .nav__menu { display: none; }
  .nav__toggle { display: flex; }
  .nav__brand { grid-column: 2; }
  /* Solid charcoal nav from the start on mobile (not transparent) so it reads as
     a fixed bar the hero photo starts beneath and scrolls up under. Matches the
     hero's charcoal so the bar + the strip above the photo are seamless. */
  .nav {
    background: var(--charcoal);
    border-bottom-color: var(--rule);
    padding: 0.9rem var(--gutter);
  }
  .nav.is-scrolled { padding: 0.9rem var(--gutter); }
  /* Gold wordmark text stays visible in the bar — it was hidden while the bar
     was transparent over the photo, but the bar is solid charcoal now so it
     reads cleanly. The existing 540px rule shrinks it to fit small phones. */
}

.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--black);
  z-index: 99;
  padding: 6rem var(--gutter) 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  transform: translateY(-100%);
  transition: transform var(--t-slow) var(--ease-in-out);
  overflow-y: auto;
}
.mobile-menu.is-open { transform: translateY(0); }
.mobile-menu__link {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  color: var(--ivory);
  border-bottom: 1px solid var(--rule);
  padding-block: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mobile-menu__link .arrow { color: var(--gold); font-size: 1rem; }
.mobile-menu__footer { margin-top: auto; padding-top: 2rem; color: var(--muted); font-size: var(--fs-small); }

/* ============================================
   HERO
   ============================================ */
.hero {
  min-height: 92vh;
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 7rem var(--gutter) 4rem;
  background: var(--charcoal);
  overflow: hidden;
  isolation: isolate;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Left-edge gradient: dark behind the wordmark + CTA on the left, fading to
     fully transparent before reaching Sarah on the right. Lets the photo stay
     at its natural brightness across most of the frame while still giving the
     gold wordmark and lede enough contrast to read. */
  background: linear-gradient(90deg,
    rgba(8, 8, 8, 0.85) 0%,
    rgba(8, 8, 8, 0.65) 22%,
    rgba(8, 8, 8, 0.28) 48%,
    rgba(8, 8, 8, 0) 66%);
}
.hero__background {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  /* Full opacity — the photo itself isn't darkened any more; all the contrast
     work for the text on top is now done by the .hero::after gradient alone. */
  opacity: 1;
  filter: saturate(1.05) contrast(1.05);
}
.hero__content {
  position: relative;
  z-index: 1;
}
.hero__emblem {
  width: clamp(80px, 12vw, 140px);
  margin-inline: auto;
  margin-bottom: var(--space-4);
  opacity: 0;
  animation: fadeUp 1.2s var(--ease-out) 0.2s forwards;
}
.hero__wordmark {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 400;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.04em;
  line-height: 1.15;
  padding-block: 0.08em;
  max-width: 14ch;
  margin-inline: auto;
  opacity: 0;
  animation: fadeUp 1.4s var(--ease-out) 0.5s forwards;
}
/* Trademarked slogan that sits just under the wordmark. Given a clear, prominent
   strapline treatment (Sarah asked for it to be noticeable): bright gold, larger,
   with a short gold rule beneath it so the eye lands on it. The ® is intentional —
   it's the legally registered trademark and must appear on the homepage. */
.hero__trademark {
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: var(--gold-light);
  padding-bottom: 0.85rem;
  position: relative;
  opacity: 0;
  animation: fadeUp 1.4s var(--ease-out) 0.75s forwards;
}
/* Short gold rule under the slogan to make it a clear feature. Centred by default
   (portrait/mobile), re-anchored left in the split desktop layout below. */
.hero__trademark::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: var(--gold);
}
.hero__trademark sup { font-size: 0.6em; }
.hero__tag {
  margin-top: var(--space-3);
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(1.2rem, 2.4vw, 1.8rem);
  color: var(--ivory);
  opacity: 0;
  animation: fadeUp 1.4s var(--ease-out) 0.95s forwards;
}
.hero__cta {
  margin-top: var(--space-4);
  opacity: 0;
  animation: fadeUp 1.4s var(--ease-out) 1.15s forwards;
}
.hero__meta {
  position: absolute;
  bottom: 2.5rem;
  left: 0;
  right: 0;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: min(90vw, 760px);
  justify-content: center;
  text-align: center;
  color: var(--gold);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  opacity: 0;
  animation: fadeUp 1.6s var(--ease-out) 1.4s forwards;
}
.hero__meta::before, .hero__meta::after {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--gold);
}

/* Landscape / desktop: split the hero into two columns. Left = a solid charcoal
   panel holding the wordmark, the "Living the Brand®" slogan, tagline and CTA.
   Right = Sarah's full-length portrait photo, shown whole and sharp with no
   cropping distortion or AI-extended scenery. Portrait phones/tablets keep the
   full-bleed background treatment above (a portrait photo fills a portrait
   screen perfectly). Gated at min-width:900 so only genuine landscape screens
   split; narrow landscape phones fall back to the stacked full-bleed layout. */
@media (orientation: landscape) and (min-width: 900px) {
  .hero {
    /* Fill the screen exactly so the photo bottom lands at the bottom of the
       viewport and nothing runs off. */
    min-height: 100vh;
    grid-template-columns: 1.02fr 0.98fr;
    place-items: stretch;
    text-align: center;
    padding: 0;
  }
  .hero__content {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Heavier bottom padding than top nudges the centred block a little upward,
       so it reads as centred within the area visible below the fixed nav bar
       rather than centred in the full section height (which sat slightly low). */
    padding: 4rem clamp(3rem, 6vw, 7rem) 9rem;
    background: var(--charcoal);
  }
  /* Smaller than the full --fs-hero here: in the ~half-width panel the 8rem
     default wrapped to four lines and dominated the panel. This size gives a
     tidy 2-line title centred in the panel. */
  .hero__wordmark {
    margin-inline: auto;
    max-width: 14ch;
    font-size: clamp(2.8rem, 4.6vw, 4.8rem);
  }
  /* Slogan rule centred under the centred slogan. */
  .hero__trademark::after { left: 50%; transform: translateX(-50%); }
  /* Photo column: show the WHOLE portrait, scaled to fit the height between the
     nav bar and the bottom of the screen (object-fit: contain, sized by height).
     Because the contained portrait is narrower than the column, it's nudged
     toward the left with a little charcoal margin around it so it's framed
     naturally rather than stretched edge-to-edge and cropped. */
  .hero__background {
    position: relative;
    inset: auto;
    grid-column: 2;
    grid-row: 1;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 5.5rem 0 2.5rem 2rem;
    background: var(--charcoal);
  }
  .hero__background img {
    /* Natural aspect, scaled DOWN to fit within the padded column so the whole
       portrait shows (head to feet) between the nav and the screen bottom.
       max-height is in vh (not %) because a % height won't resolve against the
       grid row — vh is always definite. The 8rem subtracts the column's top+
       bottom padding so the photo clears the nav and the screen bottom. */
    width: auto;
    height: auto;
    max-height: calc(100vh - 8rem);
    max-width: 100%;
    object-fit: contain;
    object-position: center;
  }
  /* Text is on its own solid panel now — the photo overlay gradient isn't needed. */
  .hero::after { display: none; }
  /* Keep the meta strip under the text panel (left half) rather than centred
     across the whole hero where it'd fall over the photo. */
  .hero__meta {
    width: 50%;
    left: 0;
    right: auto;
    margin-inline: 0;
  }
}

/* Portrait phones & portrait tablets: STACKED layout — Sarah's full portrait
   photo on top (shown completely clear, no text over it), then a charcoal panel
   below holding the wordmark, "Living the Brand®", tagline and CTA. This mirrors
   the desktop split but vertically, and directly answers Sarah's two asks: the
   photo is perfectly clear (nothing sits on top of it) and the trademark is
   prominent on its own panel. */
@media (max-width: 899px) and (orientation: portrait) {
  .hero {
    min-height: auto;
    /* Both rows auto: the photo row takes the image's own natural height (see
       img rule below) so the FULL photo shows — no fixed 66svh box, which was
       cover-cropping the top of Sarah's head and her feet on phone screens. */
    grid-template-rows: auto auto;
    place-items: stretch;
    text-align: center;
    /* Top padding clears the fixed nav so the photo starts just beneath the
       menu bar rather than behind it. The padding area is charcoal (hero bg),
       matching the solid nav above, so it reads as one continuous bar. As the
       page scrolls, the photo slides up under the fixed nav. */
    padding: 3.6rem 0 0;
    background: var(--charcoal);
  }
  /* No overlay gradient — the photo sits clean above the text panel. */
  .hero::after { display: none; }
  .hero__background {
    position: relative;
    inset: auto;
    grid-row: 1;
    z-index: 0;
  }
  /* Natural-flow sizing: full width, height follows the image's aspect ratio.
     Shows the entire photo head-to-heels regardless of what aspect Sarah's
     next hero shot has. */
  .hero__background img {
    width: 100%;
    height: auto;
    object-fit: unset;
    object-position: unset;
  }
  .hero__content {
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-5) var(--gutter) var(--space-6);
    background: var(--charcoal);
  }
  .hero__wordmark { max-width: 14ch; margin-inline: auto; }
  /* Slogan rule stays centred in the stacked panel. */
  .hero__trademark::after { left: 50%; transform: translateX(-50%); }
  /* Meta strip drops into the flow at the bottom of the text panel. */
  .hero__meta {
    position: static;
    width: 100%;
    margin: var(--space-4) 0 0;
    justify-content: center;
    animation: fadeUp 1.6s var(--ease-out) 1.4s forwards;
  }
}

@media (max-width: 540px) {
  .hero__cta {
    width: 100%;
    justify-content: center;
    padding-inline: 1rem;
    letter-spacing: 0.2em;
  }
  .hero__meta {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
  }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   VISION (split)
   ============================================ */
.vision {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  /* Align both columns at the TOP. The text column ends up taller than the image with
     Sarah's full copy + pullquote — that's expected; the pullquote sits below the photo
     and that's fine. Starting at the top makes the eyebrow + heading line up with the
     top of the image, which is what Sarah expects. */
  align-items: start;
}
.vision__image {
  position: relative;
  /* 2:3 to match Sarah's real riverbank atelier shot — same aspect as her photo
     so the whole frame shows with no crop. Was 4:5 when this used the AI
     studio shot, which was natively 4:5. */
  aspect-ratio: 2 / 3;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(23, 19, 13, 0.16);
}
.vision__image img { width: 100%; height: 100%; object-fit: cover; }
/* Vision heading deliberately mirrors the hero wordmark treatment: Playfair Display,
   gold gradient text, uppercase, slightly opened letter-spacing. Sarah specifically
   asked for the mid-page heading to match the top. */
.vision__copy h2 {
  font-size: var(--fs-display);
  margin-block: var(--space-3) var(--space-4);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-block: 0.08em;
  line-height: 1.12;
}
.vision__copy p { margin-bottom: var(--space-3); color: #373027; font-size: var(--fs-large); line-height: 1.75; }
.vision__pullquote {
  margin-top: var(--space-4);
  padding-left: var(--space-3);
  border-left: 1px solid var(--gold);
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  color: var(--gold-deep);
  line-height: 1.4;
}

@media (max-width: 880px) {
  .vision { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ============================================
   COLLECTION GRID
   ============================================ */
.collection-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--black);
}
.dress-card {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--black-soft);
  display: block;
}
.dress-card img, .dress-card__placeholder {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-base) var(--ease-out);
}
.dress-card__placeholder {
  display: grid; place-items: center;
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
  letter-spacing: 0.08em;
  text-align: center;
  padding: 1rem;
  border: 1px solid var(--rule);
}
.dress-card:hover img, .dress-card:hover .dress-card__placeholder { transform: scale(1.04); }
.dress-card__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-3);
  background: linear-gradient(180deg, transparent 0%, rgba(10,10,10,0.85) 70%);
  color: var(--ivory);
}
.dress-card__overlay .eyebrow { color: var(--gold); margin-bottom: 0.4rem; }
.dress-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 2rem);
  color: var(--ivory);
  letter-spacing: 0.04em;
}

@media (max-width: 960px) { .collection-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .collection-grid { grid-template-columns: 1fr; }
  .dress-card { min-height: 440px; }
  .dress-card__placeholder {
    font-size: clamp(2.4rem, 14vw, 3.6rem);
    overflow-wrap: anywhere;
  }
  .dress-card__overlay .eyebrow {
    font-size: 0.64rem;
    letter-spacing: 0.22em;
    line-height: 1.7;
  }
  .dress-card__name {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
  }
}

/* ============================================
   MAKER STRIP
   ============================================ */
.maker {
  background: var(--black-soft);
  padding-block: var(--space-7);
  border-block: 1px solid var(--rule);
}
.maker__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
.maker__image {
  /* Portrait 2:3 to match Sarah's riverbank atelier shot — she's standing
     fitting fabric to the mannequin, the river + boats fill the background.
     The photo IS 2:3, so this container shows the full frame with no crop. */
  aspect-ratio: 2 / 3;
  background: var(--black);
  border: 1px solid var(--rule);
  display: grid; place-items: center;
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--gold);
  text-align: center;
  padding: 2rem;
  font-size: 1.2rem;
}
.maker__image img,
.story__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.maker__copy h2 { font-size: var(--fs-display); margin-block: var(--space-3); }
.maker__copy p { font-size: var(--fs-large); line-height: 1.8; color: var(--ivory); margin-bottom: var(--space-3); }
.maker__numbers {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}
.maker__numbers div { flex: 1; min-width: 120px; }
.maker__numbers strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--gold);
  line-height: 1;
}
.maker__numbers span {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--muted);
}

@media (max-width: 880px) { .maker__inner { grid-template-columns: 1fr; gap: var(--space-4); } }

/* ============================================
   EDITS TILES
   ============================================ */
.edits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.edit-tile {
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  background: var(--black-soft);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-4);
  transition: border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
  text-align: left;
}
.edit-tile:hover { border-color: var(--gold); transform: translateY(-3px); }
.edit-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0.12) 0%, rgba(10, 10, 10, 0.3) 38%, rgba(10, 10, 10, 0.92) 100%),
    radial-gradient(circle at 50% 12%, rgba(201, 169, 97, 0.18), transparent 42%);
  z-index: 1;
}
.edit-tile__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  background-size: cover;
  background-position: center;
  opacity: 0.58;
  filter: saturate(1.05) contrast(1.08);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  z-index: 0;
}
.edit-tile:hover .edit-tile__bg { opacity: 0.78; transform: scale(1.04); }
/* Lift the text content above the background image, but NOT the image itself —
   if `.edit-tile > *` also matches `.edit-tile__bg` it overrides that rule's
   `position: absolute` (same specificity, later rule wins) which pushes the img
   into the flex flow and breaks the layout — tiles render blank. The :not()
   keeps the img absolute as the background, and only the text/eyebrow/cue get
   the relative+z-index stacking treatment. */
.edit-tile > *:not(.edit-tile__bg) { position: relative; z-index: 2; }
.edit-tile .eyebrow {
  width: fit-content;
  padding: 0.45rem 0.6rem;
  background: rgba(10, 10, 10, 0.68);
  border: 1px solid rgba(201, 169, 97, 0.46);
}
.edit-tile h3 {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  color: var(--ivory);
  margin-top: 0.4rem;
}
.edit-tile p { color: var(--ivory); margin-top: 0.6rem; font-size: var(--fs-small); text-shadow: 0 1px 16px rgba(0,0,0,0.65); }
.edit-tile__cue {
  margin-top: var(--space-3);
  color: var(--gold-light);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: transform var(--t-base) var(--ease-out);
}
.edit-tile:hover .edit-tile__cue { transform: translateX(4px); }

@media (max-width: 880px) { .edits { grid-template-columns: 1fr; } }

/* ============================================
   BESPOKE CTA BAND
   ============================================ */
.bespoke-band {
  background: var(--ivory);
  color: var(--black);
  padding-block: var(--space-7);
  text-align: center;
}
.bespoke-band h2 {
  font-size: var(--fs-display);
  color: var(--black);
  max-width: 18ch;
  margin: 0 auto var(--space-3);
}
.bespoke-band p {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  color: var(--black);
  max-width: 56ch;
  margin: 0 auto var(--space-4);
}
.bespoke-band .btn { border-color: var(--black); color: var(--black); }
.bespoke-band .btn:hover { background: var(--black); color: var(--gold); }

/* ============================================
   NEWSLETTER
   ============================================ */
.newsletter {
  background: var(--ivory-soft);
  padding-block: var(--space-6);
  text-align: center;
  border-block: 1px solid rgba(23, 19, 13, 0.08);
}
.newsletter h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--ink);
  max-width: 22ch;
  margin: var(--space-2) auto var(--space-2);
}
.newsletter p { color: #4B4438; max-width: 52ch; margin: 0 auto var(--space-4); font-size: var(--fs-large); }
.newsletter form {
  display: flex;
  max-width: 480px;
  margin: 0 auto;
  border-bottom: 1px solid var(--gold-deep);
}
.newsletter input {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 1rem 0;
  color: var(--ink);
  font-size: var(--fs-body);
}
.newsletter input::placeholder { color: #7B7164; }
.newsletter button {
  padding: 1rem 1.5rem;
  color: var(--gold-deep);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  background: transparent;
}
.newsletter button:hover { color: var(--black); }

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--black);
  padding: var(--space-7) var(--gutter) var(--space-4);
  border-top: 1px solid var(--rule);
}
.footer__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-5);
}
.footer__brand-mark {
  width: 60px;
  margin-bottom: var(--space-3);
}
.footer__brand-text {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-2);
}
.footer__brand p { color: var(--muted); font-size: var(--fs-small); line-height: 1.7; max-width: 28ch; }
.footer__col h4 {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--gold);
  margin-bottom: var(--space-3);
  font-weight: 400;
}
.footer__col ul { display: flex; flex-direction: column; gap: 0.7rem; }
.footer__col a { color: var(--ivory); font-size: var(--fs-small); }
.footer__col a:hover { color: var(--gold); }
.footer__bottom {
  max-width: var(--container);
  margin: var(--space-5) auto 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  color: var(--muted);
  font-size: var(--fs-small);
}
.footer__bottom a {
  color: var(--gold);
}
.footer__bottom a:hover {
  color: var(--gold-light);
}

@media (max-width: 880px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .footer__inner { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================================
   DRESS DETAIL PAGE
   ============================================
   One section, two columns. Left column = gallery (first photo spans both
   gallery columns, rest in a 2-col grid below). Right column = intro at top
   (eyebrow, title, lede, sizes pills, Shop button — scrolls naturally with the
   page) followed by a sticky story block that pins at top:100px once it reaches
   the top of the viewport, so the body copy / bullets / accordions stay visible
   while the user scrolls through the gallery. The old separate dress-hero
   section is gone — its content is now the .dress-story__intro at the top of
   the right column. The pill styles below are kept for that intro group.
   ============================================ */
.dress-story { padding-block: var(--space-6) var(--space-7); }
.dress-story__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-6);
  /* stretch so the right column matches the (taller) gallery, which gives the
     sticky story block its full scroll range. */
  align-items: stretch;
}
.dress-story__intro {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-5);
}
.dress-story__intro .eyebrow { display: block; margin-bottom: var(--space-2); }
.dress-story__title {
  font-size: clamp(3rem, 6vw, 5.5rem);
  color: var(--ivory);
  margin: 0 0 var(--space-3);
  line-height: 1.05;
  letter-spacing: -0.005em;
}
.dress-story__intro .lede { max-width: 38ch; margin-bottom: var(--space-4); color: var(--ivory); }
.dress-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: var(--space-4);
}
.dress-hero__pill {
  border: 1px solid var(--rule);
  padding: 0.5rem 1rem;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--gold);
  border-radius: 999px;
}
.dress-story__sticky {
  position: sticky;
  top: 100px;
}
.dress-story__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
}
.dress-story__gallery > div {
  aspect-ratio: 3 / 4;
  background: var(--black-soft);
  border: 1px solid var(--rule);
  display: grid; place-items: center;
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--muted);
  text-align: center;
  padding: 1rem;
  font-size: var(--fs-small);
}
.dress-story__gallery > div:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.dress-story__gallery img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  background: var(--black-soft);
  border: 1px solid var(--rule);
}
.dress-story__gallery img:first-child {
  /* Hero gallery slot — spans both columns AND uses a portrait aspect that matches
     Sarah's photos (~2:3), so the full image is visible. object-fit:contain
     guarantees nothing is cropped even if a particular shot is wider/narrower than
     2:3; the dark background blends with the section so any letterboxing is
     invisible. Result: this first photo reads as the hero of the page — taller
     than the smaller thumbnails below, but fully framed. */
  grid-column: 1 / -1;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  background: var(--black-soft);
}

.dress-story__info {
  /* The container — display:flex lets the sticky child measure its scroll range
     against this column's stretched height. Sticky is on .dress-story__sticky,
     not on info itself, because the intro group at the top scrolls naturally. */
  display: flex;
  flex-direction: column;
}
.dress-story__info h2 { font-size: var(--fs-h2); margin-bottom: var(--space-3); color: var(--ivory); }
.dress-story__info p { margin-bottom: var(--space-3); color: var(--ivory); line-height: 1.8; }
.dress-story__highlights {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 var(--space-4);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-3);
}
.dress-story__highlights li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.6rem;
  color: var(--ivory);
  line-height: 1.6;
}
.dress-story__highlights li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--gold);
}

.accordion { border-top: 1px solid var(--rule); }
.accordion:last-of-type { border-bottom: 1px solid var(--rule); }
.accordion__head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 0;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--ivory);
  text-align: left;
}
.accordion__head:hover { color: var(--gold); }
.accordion__icon { color: var(--gold); transition: transform var(--t-base) var(--ease-out); }
.accordion.is-open .accordion__icon { transform: rotate(45deg); }
.accordion__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-slow) var(--ease-out);
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.7;
}
.accordion.is-open .accordion__body { max-height: 600px; padding-bottom: 1.2rem; }

@media (max-width: 960px) {
  .dress-story__inner { grid-template-columns: 1fr; align-items: start; }
  .dress-story__info { position: static; }
  .dress-story__sticky { position: static; }
  .dress-story__intro { border-bottom: 0; padding-bottom: var(--space-3); margin-bottom: var(--space-3); }
}

/* ============================================
   GENERIC PAGE HERO
   ============================================ */
.page-hero {
  padding: 10rem var(--gutter) var(--space-6);
  text-align: center;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.page-hero h1 {
  font-size: clamp(2.6rem, 6vw, 5rem);
  color: var(--ivory);
  margin-block: var(--space-2);
  max-width: 22ch;
  margin-inline: auto;
}
.page-hero .lede { max-width: 56ch; margin-inline: auto; margin-top: var(--space-3); }

@media (max-width: 540px) {
  .page-hero {
    padding-top: 9rem;
  }
  .page-hero h1 {
    font-size: clamp(2.2rem, 11vw, 2.8rem);
    max-width: 10ch;
  }
  .page-hero .lede {
    font-size: 1.15rem;
    padding-inline: 0.2rem;
  }
}

/* ============================================
   STORY / EDITORIAL
   ============================================ */
.story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
  margin-bottom: var(--space-7);
}
.story:nth-child(even) { direction: rtl; }
.story:nth-child(even) > * { direction: ltr; }
.story__image {
  aspect-ratio: 4 / 5;
  background: var(--black-soft);
  border: 1px solid var(--rule);
  display: grid; place-items: center;
  color: var(--muted);
  font-family: var(--font-italic);
  font-style: italic;
  padding: 1.5rem;
  text-align: center;
}
.story__copy h2 { font-size: var(--fs-h1); color: var(--ivory); margin-bottom: var(--space-3); }
.story__copy p { color: var(--ivory); line-height: 1.85; margin-bottom: var(--space-3); font-size: var(--fs-large); }

@media (max-width: 880px) {
  .story { grid-template-columns: 1fr; direction: ltr; }
  .story:nth-child(even) { direction: ltr; }
}

/* ============================================
   FORMS
   ============================================ */
.form {
  max-width: 560px;
  margin-inline: auto;
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.form__field { margin-bottom: var(--space-3); }
.form__field label {
  display: block;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.form__field input, .form__field textarea, .form__field select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ivory);
  padding: 0.8rem 0;
  font-size: var(--fs-body);
  transition: border-color var(--t-base) var(--ease-out);
}
.form__field input:focus, .form__field textarea:focus, .form__field select:focus {
  outline: none;
  border-bottom-color: var(--gold);
}
.form__field textarea { resize: vertical; min-height: 120px; }
.form__field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(-45deg, transparent 50%, var(--gold) 50%); background-position: calc(100% - 14px) 50%, calc(100% - 8px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.form__actions { margin-top: var(--space-4); display: flex; justify-content: center; }

@media (max-width: 540px) {
  .form__row { grid-template-columns: 1fr; }
}

/* ============================================
   REVEAL ANIMATIONS
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }
.reveal--delay-4 { transition-delay: 0.4s; }

/* ============================================
   UTILITIES
   ============================================ */
.text-center { text-align: center; }
.text-gold { color: var(--gold); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ============================================
   NOW IN THE SHOP — Featured-product strip on the homepage.
   Sits between the Collection grid and the Maker section. Visually echoes
   .vision / .maker so it feels native to the rest of the page.
   ============================================ */
.shop-strip { padding-block: var(--space-7); }
.shop-strip__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
.shop-strip__image {
  aspect-ratio: 4 / 5;
  background: var(--black);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.shop-strip__image img { width: 100%; height: 100%; object-fit: cover; }
.shop-strip__copy h2 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  color: var(--ivory);
  margin-block: var(--space-3) var(--space-3);
  line-height: 1.1;
}
.shop-strip__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
}
.shop-strip__price {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: var(--gold);
}
.shop-strip__lead {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--muted);
}
.shop-strip__swatches {
  display: flex;
  gap: 0.6rem;
  margin-top: var(--space-3);
}
.shop-strip__swatch {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  display: inline-block;
}
.shop-strip__swatch--out {
  position: relative;
  opacity: 0.55;
}
.shop-strip__swatch--out::after {
  content: "";
  position: absolute;
  inset: 50% 0 50% 0;
  border-top: 1px solid var(--ivory);
  transform: rotate(-45deg);
}
.shop-strip__badge {
  display: inline-block;
  margin-top: var(--space-3);
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--rule);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--muted);
}
@media (max-width: 880px) {
  .shop-strip__inner { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ============================================
   SHOP PDP — the buyable product detail page (/shop/{slug}).
   Mirrors .dress-hero's two-column language but adds the colour + size picker.
   Wrapped in a max-width container so it doesn't stretch edge-to-edge on wide
   monitors. Two columns above 880px; stacked below.
   ============================================ */
.shop-pdp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: var(--space-5);
  align-items: start;
  max-width: var(--container);
  margin-inline: auto;
  padding: 7rem var(--gutter) var(--space-7);
  min-height: auto;
}
.shop-pdp__gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.shop-pdp__gallery .main-img {
  aspect-ratio: 3 / 4;
  background: var(--black-soft);
  border: 1px solid var(--rule);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.shop-pdp__gallery .main-img img { width: 100%; height: 100%; object-fit: cover; }
.shop-pdp__gallery .main-img > div { width: 100%; height: 100%; display: grid; place-items: center; }
.shop-pdp__gallery .thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.shop-pdp__gallery .thumbs:empty { display: none; }
.shop-pdp__gallery .thumbs button {
  aspect-ratio: 1;
  background: var(--black-soft);
  border: 1px solid var(--rule);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  min-width: 0;
}
.shop-pdp__gallery .thumbs button.is-active { border-color: var(--gold); }
.shop-pdp__gallery .thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-pdp__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: sticky;
  top: 6rem;
  min-width: 0;
}
.shop-pdp__copy .eyebrow { margin-bottom: 0.4rem; }
.shop-pdp__copy h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  color: var(--gold);
  margin: 0;
  line-height: 1.05;
}
.shop-pdp__price {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: var(--ivory);
  margin-bottom: var(--space-3);
}
.shop-pdp__field {
  border: 0; padding: 0; margin: 0 0 var(--space-3);
}
.shop-pdp__field legend {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--gold);
  margin-bottom: 0.6rem;
}
.swatch-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.swatch {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: border-color var(--t-fast) var(--ease-out);
}
.swatch:hover, .swatch.is-active { border-color: var(--gold); }
.swatch--out { position: relative; opacity: 0.55; }
.swatch--out::after {
  content: "";
  position: absolute;
  inset: 50% 0 50% 0;
  border-top: 1px solid var(--ivory);
  transform: rotate(-45deg);
}
.size-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.size-btn {
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ivory);
  cursor: pointer;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.size-btn:hover:not(.size-btn--out) { border-color: var(--gold); }
.size-btn.is-active { background: var(--gold); color: var(--black); border-color: var(--gold); }
.size-btn--out { opacity: 0.45; text-decoration: line-through; cursor: not-allowed; }
.shop-pdp__hint {
  font-size: var(--fs-small);
  color: var(--muted);
  margin-top: var(--space-3);
}
.shop-pdp__lead {
  margin-top: var(--space-2);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--muted);
}
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 880px) {
  .shop-pdp { grid-template-columns: 1fr; padding-top: 5rem; }
  .shop-pdp__copy { padding-top: var(--space-3); }
}

/* ============================================
   CART
   ============================================ */
.cart-line {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule);
}
.cart-line__img { aspect-ratio: 3/4; background: var(--black-soft); overflow: hidden; }
.cart-line__img img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__name { font-family: var(--font-display); font-size: 1.2rem; color: var(--gold); }
.cart-line__sub { color: var(--muted); font-size: var(--fs-small); margin-top: 0.3rem; }
.cart-line__qty { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; }
.cart-line__qty button { width: 28px; height: 28px; border: 1px solid var(--rule); color: var(--gold); background: transparent; cursor: pointer; }
.cart-line__qty button:hover { border-color: var(--gold); }
.cart-line__price { font-family: var(--font-display); color: var(--gold); }
.cart-line__remove { background:none; color: var(--muted); font-size: var(--fs-small); padding: 0; margin-top: 0.5rem; text-decoration: underline; border: 0; cursor: pointer; }
.cart-summary { padding-top: var(--space-3); border-top: 1px solid var(--rule); }
.cart-summary__row { display: flex; justify-content: space-between; padding: 0.6rem 0; }
.cart-summary__row--total { font-family: var(--font-display); font-size: 1.4rem; color: var(--gold); padding-top: var(--space-3); border-top: 1px solid var(--rule); margin-top: var(--space-2); }
@media (max-width: 540px) {
  .cart-line { grid-template-columns: 80px 1fr; }
  .cart-line__price { grid-column: 2; text-align: right; }
}