/* ============================================================
   MIEL — lived-in femininity
   sand ground, ink-brown type, blue as weather, honey as a wink
   ============================================================ */

:root {
  --sand: #f5f0e8;
  --sand-deep: #ede4d6;
  --cream: #ecd5c2;
  --ink: #21180e;
  --brown: #593828;
  --taupe: #b6a597;
  --sky: #a1c4df;
  --steel: #97aab6;
  --navy: #283d59;
  --honey: #c9962e;       /* bright honey: plate fills, hovers, honey words */
  --mauve: #7d5570;       /* soft mauve accent for manifesto emphasis (5.4:1 on sand) */
  --plum: #6a4763;        /* muted dusty plum accent (6.9:1 on sand) */

  --serif: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --sans: "Figtree", "Segoe UI", system-ui, sans-serif;

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  /* symmetric: width has to leave and arrive gently. --ease-out is expo and
     spends ~85% of its range in the first 15% of the duration, which snaps. */
  --ease-collapse: cubic-bezier(0.65, 0, 0.35, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink);
  background: var(--sand);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

::selection { background: var(--cream); color: var(--brown); }

/* ---------- type utilities ---------- */

.label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brown);
}

.serif-xl {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: 0.01em;
}

/* ---------- nav ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem var(--gutter);
  transition: background 0.5s ease, box-shadow 0.5s ease, padding 0.5s ease;
}

.nav.scrolled {
  background: rgba(245, 240, 232, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0.8rem var(--gutter);
  box-shadow: 0 1px 0 rgba(33, 24, 14, 0.07);
}

.nav-wordmark {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  padding-left: 0.34em; /* optical centering vs tracking */
  transition: opacity 0.5s ease;
}

/* over the hero (nav still transparent) the wordmark is unreadable and
   duplicates the hero title; it fades in with the nav background */
.nav:not(.scrolled) .nav-wordmark {
  opacity: 0;
  pointer-events: none;
}

.nav-links {
  display: flex;
  gap: 2.2rem;
  align-items: center;
}

.nav-links a, .nav-links button {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  position: relative;
  padding: 0.25rem 0;
}

/* at the top of the page (transparent nav) the links read in white over the video */
.nav:not(.scrolled) .nav-links a,
.nav:not(.scrolled) .nav-links button {
  color: #fff;
  text-shadow: 0 1px 12px rgba(33, 24, 14, 0.35);
}

.nav:not(.scrolled) .nav-links a::after,
.nav:not(.scrolled) .nav-links button::after {
  background: #fff;
}

.nav:not(.scrolled) .cart-count {
  background: #fff;
  color: var(--ink);
}

.nav-links a::after, .nav-links button::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}

.nav-links a:hover::after, .nav-links button:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.cart-count {
  display: inline-block;
  min-width: 1.15rem;
  margin-left: 0.35rem;
  padding: 0.05rem 0.25rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--sand);
  font-size: 0.625rem;
  text-align: center;
  transition: transform 0.3s var(--ease-out);
}

.cart-count.bump { transform: scale(1.35); }

@media (max-width: 640px) {
  .nav-links { gap: 1.2rem; }
  .nav-links .hide-mobile { display: none; }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  height: 175vh; /* runway for the shrink */
}

.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 0;
  /* JS drives transform/inset via --shrink */
}

.hero-media img,
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(245,240,232,0) 45%, rgba(245,240,232,0.55) 100%);
}

.hero-title {
  position: absolute;
  inset: 0;
  z-index: 2;
  text-align: center;
  /* wordmark above the swimmer, tagline below her, open water behind both */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: calc(15vh + 100px) 0 17vh;
}

.hero-wordmark {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3.5rem, 13vw, 10.4rem);
  letter-spacing: 0.08em;
  line-height: 1.1;
  color: var(--ink);
  white-space: nowrap;
}

/* narrow screens: pull the wide MIA + ELLE phase in from the edges */
@media (max-width: 560px) {
  .hero-wordmark {
    letter-spacing: 0.04em;
  }
}

.hero-wordmark .char {
  display: inline-block;
  opacity: 0;
  transition: opacity 0.9s var(--ease-out);
  vertical-align: bottom;
}

.loaded .hero-wordmark .char {
  opacity: 1;
}

/* MIA + ELLE collapses: the ghost letters (A, +, LE) drop away into MIEL.

   Two beats, deliberately overlapped:
     1. fade  — ghosts dissolve and shrink in place, staggered left to right
     2. close — every gap collapses at once, in one synchronized motion

   The fade leads the close so no glyph is ever clipped while it is still
   legible. Collapsing an opaque letter under overflow:hidden reads as a
   vertical slice through the letterform, which is what made this feel choppy.

   --w is the glyph's true rendered width, measured in JS once webfonts land.
   Starting the width transition anywhere above it (this used to be a flat
   1.2em, ~2.5x the width of the +) buys a dead interval of a different length
   for every letter, so they all break loose at different times. Hence the snap. */
.hero-wordmark .char.ghost { color: var(--ink); }
.hero-wordmark .char.plus { margin: 0 0.05em; }

.hero-wordmark .char.drop {
  max-width: var(--w, 1.2em);
  overflow: hidden;
  transition:
    opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) var(--d, 0s),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) var(--d, 0s),
    max-width 0.85s var(--ease-collapse) 0.55s,
    margin 0.85s var(--ease-collapse) 0.55s;
}

.hero-wordmark.merged .char.drop {
  opacity: 0;
  transform: scale(0.86);
  max-width: 0;
  margin: 0;
}

/* only while the merge is in flight, then dropped so the hero can't stay
   promoted to its own layer for the life of the page */
.hero-wordmark.merging .char.drop { will-change: max-width, opacity, transform; }

.hero-tag {
  margin-top: 1.4rem;
  opacity: 0;
  transform: translateY(0.6rem);
  transition: opacity 1s var(--ease-out) 0.9s, transform 1s var(--ease-out) 0.9s;
}

.loaded .hero-tag { opacity: 1; transform: none; }

.hero-tag em {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.02em;
  margin-bottom: 0.6rem;
}

/* legibility over the moving water: ink type with a soft sand halo (tag only,
   the wordmark stays pure black) */
.hero-tag em,
.hero-tag .label {
  color: var(--ink);
  text-shadow:
    0 0 6px rgba(245, 240, 232, 0.85),
    0 0 18px rgba(245, 240, 232, 0.75),
    0 0 36px rgba(245, 240, 232, 0.6);
}

.hero-scrollcue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  opacity: 0;
  transition: opacity 1s ease 1.6s;
}

.loaded .hero-scrollcue { opacity: 1; }

.hero-scrollcue span {
  display: block;
  width: 1px;
  height: 3rem;
  margin: 0.5rem auto 0;
  background: var(--ink);
  transform-origin: top;
  animation: cue 2.2s var(--ease-out) infinite;
}

@keyframes cue {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- section scaffolding ---------- */

section { position: relative; }

.section-pad {
  padding: clamp(5rem, 12vh, 9rem) var(--gutter);
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
}

.section-head .rule {
  flex: 1;
  height: 1px;
  background: rgba(33, 24, 14, 0.18);
}

/* ---------- manifesto / why MIEL exists ---------- */

.manifesto {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  color: var(--ink);
  background-image:
    linear-gradient(rgba(245, 240, 232, 0.6), rgba(245, 240, 232, 0.6)),
    url("../assets/why-bg-sand.jpg");
  background-size: cover;
  background-position: center;
}

/* The water texture is high-frequency, so body copy laid straight over it has
   no stable ground to read against. Rather than flatten the whole image with a
   heavier wash, pool the sand under the copy column and let it clear off before
   it reaches the photo. */
.manifesto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(245, 240, 232, 0.66) 0%,
    rgba(245, 240, 232, 0.58) 34%,
    rgba(245, 240, 232, 0.28) 58%,
    rgba(245, 240, 232, 0) 74%
  );
}

@media (max-width: 860px) {
  /* one column: the copy sits over the whole width, so the wash has to as well */
  .manifesto::before {
    background: linear-gradient(
      rgba(245, 240, 232, 0.66) 0%,
      rgba(245, 240, 232, 0.6) 55%,
      rgba(245, 240, 232, 0.34) 100%
    );
  }
}

/* absolutely-positioned ::before paints above in-flow siblings without this */
.manifesto-grid { width: 100%; position: relative; z-index: 1; }

.manifesto-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.manifesto-media {
  overflow: hidden;
  aspect-ratio: 3 / 4;
  align-self: stretch;
}

.manifesto-media img {
  width: 100%;
  height: 112%;
  object-fit: cover;
  will-change: transform;
}

/* desktop: shrink the "why it exists" image and center it in its column */
@media (min-width: 861px) {
  .manifesto-media {
    align-self: center;
    max-width: 62%;
    margin-inline: auto;
  }
}

@media (max-width: 860px) {
  .manifesto-grid { grid-template-columns: 1fr; }
  .manifesto-media { aspect-ratio: 4 / 3.4; margin-top: 2.5rem; }
}

.manifesto-line {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  line-height: 1.25;
  margin-bottom: 0.4em;
}

.manifesto-line em {
  font-style: italic;
  color: var(--mauve);
}

.manifesto-aside {
  margin-top: 3.5rem;
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: 0.004em;
  /* was 0.72 alpha over a photo. translucent ink on a moving texture is what
     made this hard to read; the weight is carried by the wash above instead. */
  color: var(--ink);
}

.manifesto .label { color: var(--brown); }

/* ---------- pillars ---------- */

.pillars { background: var(--sand); }

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 2.5rem);
}

.pillar-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4.2;
}

.pillar-media img {
  width: 100%;
  height: 112%;
  object-fit: cover;
  will-change: transform;
}

.pillar-caption { padding: 1.4rem 0 0; }

.pillar-caption h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  line-height: 1.15;
  margin: 0.5rem 0 0.7rem;
}

.pillar-caption p {
  font-size: 0.875rem;
  line-height: 1.8;
  color: rgba(33, 24, 14, 0.72);
  max-width: 30ch;
}

/* desktop: hold the pillar trio to a narrower centered band so the images read smaller */
@media (min-width: 801px) {
  .pillars-grid { max-width: 70%; margin-inline: auto; }
}

@media (max-width: 800px) {
  .pillars-grid { grid-template-columns: 1fr; }
  .pillar-media { aspect-ratio: 4 / 4.6; }
}

/* ---------- image reveal (wipe) ---------- */

/* clip the INNER image, not the container: Chrome's IntersectionObserver
   respects clip-path, so a fully-clipped observed element never intersects */
.wipe img, .settle img {
  transition: clip-path 1.2s var(--ease-out), transform 1.6s var(--ease-out);
}

.wipe img { clip-path: inset(100% 0 0 0); }
.wipe.in-view img { clip-path: inset(0 0 0 0); }

.fade-up {
  opacity: 0;
  transform: translateY(2.2rem);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}

.fade-up.in-view { opacity: 1; transform: none; }

/* Vero-style settle: image starts slightly zoomed, settles as it enters */
.settle img { transform: scale(1.14); }
.settle.in-view img { transform: scale(1); }

/* ---------- reveal variants: each photo owns one, so the page never
   repeats itself twice in a row ---------- */

/* directional wipes: the clip opens from the side instead of the bottom */
.wipe.from-left img { clip-path: inset(0 100% 0 0); }
.wipe.from-right img { clip-path: inset(0 0 0 100%); }
/* these sit after .wipe.in-view img in the cascade, so the reveal needs
   restating at the same weight or the side-clip wins forever */
.wipe.from-left.in-view img,
.wipe.from-right.in-view img { clip-path: inset(0 0 0 0); }

/* the container also drifts in from its side */
.slide-l, .slide-r {
  opacity: 0;
  transition: opacity 1.1s var(--ease-out), transform 1.3s var(--ease-out);
}
.slide-l { transform: translateX(-3.5rem); }
.slide-r { transform: translateX(3.5rem); }
.slide-l.in-view, .slide-r.in-view { opacity: 1; transform: none; }

/* on narrow screens the pre-reveal shift would push past the right edge and
   widen the page; shrink the travel so nothing overflows the viewport */
@media (max-width: 560px) {
  .slide-l { transform: translateX(-1.25rem); }
  .slide-r { transform: translateX(1.25rem); }
}

/* scale-up reveal: blooms into place */
.zoom-in {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 1.1s var(--ease-out), transform 1.4s var(--ease-out);
}
.zoom-in.in-view { opacity: 1; transform: scale(1); }

/* stagger helpers */
[data-delay="1"] { transition-delay: 0.12s; }
[data-delay="2"] { transition-delay: 0.24s; }
[data-delay="3"] { transition-delay: 0.36s; }

/* ---------- shop ---------- */

.shop { background: var(--sand-deep); }

.shop-intro {
  max-width: 36rem;
  font-size: 0.95rem;
  line-height: 1.85;
  color: rgba(33, 24, 14, 0.72);
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 2.5vw, 2.5rem);
}

/* desktop: hold the tiles to a narrower centered band so the images read smaller */
@media (min-width: 901px) {
  .product-grid { max-width: 62%; margin-inline: auto; }
}
@media (max-width: 900px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .product-grid { grid-template-columns: 1fr; } }

.product-card { position: relative; }

.product-figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--cream);
}

.product-figure img,
.product-figure video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.7s ease, transform 1.4s var(--ease-out);
}

.product-figure .img-shadow {
  opacity: 0;
}

.product-card:hover .product-figure .img-main { transform: scale(1.04); }
.product-card:hover .product-figure .img-shadow { opacity: 1; }
.product-card:hover .product-figure .img-shadow + .img-main { opacity: 0; }

.product-figure .quick-add {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translate(-50%, 0.6rem);
  z-index: 2;
  opacity: 0;
  background: rgba(245, 240, 232, 0.94);
  padding: 0.65rem 1.4rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: opacity 0.4s ease, transform 0.5s var(--ease-out), background 0.3s ease;
}

.product-card:hover .quick-add { opacity: 1; transform: translate(-50%, 0); }
.quick-add:hover { background: var(--ink); color: var(--sand); }

.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1rem 0 0;
}

.product-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.15rem;
}

.product-name a:hover { color: var(--brown); }

.product-price {
  font-size: 0.8125rem;
  color: rgba(33, 24, 14, 0.72);
}

.product-tag {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brown);
}

.shop-note {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--brown);
}

/* ---------- honey ---------- */

.honey-section {
  background: var(--sand);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(5rem, 12vh, 9rem) var(--gutter);
  /* the frame + its peeking gold plate can bleed a few px past the viewport
     on narrow screens; contain it here (no sticky lives in this section) */
  overflow-x: clip;
}

.honey-frame {
  position: relative;
  max-width: 34rem;
  width: 100%;
  justify-self: end;
  /* room for the plate to peek out */
  margin: 2.5rem 0 2.5rem 2.5rem;
}

/* the honey-gold plate: sweeps in from the left, sits behind the photo */
.honey-plate {
  position: absolute;
  top: -2.5rem;
  bottom: -2.5rem;
  left: -2.5rem;
  width: 72%;
  background: var(--honey);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.3s var(--ease-out) 0.1s, background 0.8s ease;
}

/* temporary A/B: hover the honey block to preview the plate in brand sky blue,
   and the honey-gold words follow it */
.honey-frame:hover .honey-plate { background: var(--sky); }

.honey-epigraph em,
.honey-copy h2 em { transition: color 0.8s ease; }

.honey-frame:hover ~ .honey-copy .honey-epigraph em,
.honey-frame:hover ~ .honey-copy h2 em { color: var(--sky); }

.honey-plate.in-view { transform: scaleX(1); }

.honey-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
}

.honey-media img { width: 100%; height: 100%; object-fit: cover; }

.honey-copy { max-width: 30rem; }

/* "The name" now leads the block, above the epigraph, so give it room */
.honey-copy > .label { display: block; margin-bottom: 1rem; }

/* .honey-copy p would out-rank a lone class and shrink this to body size,
   so the selector carries the parent */
.honey-copy .honey-epigraph,
.honey-epigraph {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--brown);
  margin-bottom: 1.8rem;
}

.honey-epigraph em { font-style: italic; color: var(--honey); }

.honey-copy h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.15;
  margin: 1rem 0 1.4rem;
}

.honey-copy h2 em { font-style: italic; color: var(--honey); }

.honey-copy p {
  font-size: 0.95rem;
  line-height: 1.85;
  color: rgba(33, 24, 14, 0.72);
  margin-bottom: 1rem;
}

@media (max-width: 800px) {
  .honey-section { grid-template-columns: 1fr; }
  .honey-frame { justify-self: start; margin-left: 1.5rem; }
  .honey-plate { left: -1.5rem; top: -1.5rem; bottom: -1.5rem; }
}

/* ---------- story ---------- */

.story {
  background: var(--cream);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
  padding: clamp(5rem, 12vh, 9rem) var(--gutter);
}

.story-media {
  overflow: hidden;
  aspect-ratio: 3 / 4.4;
  max-width: 26rem;
}

.story-media img { width: 100%; height: 112%; object-fit: cover; will-change: transform; }

.story-copy h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.18;
  margin: 1rem 0 1.6rem;
  max-width: 18ch;
}

.story-copy p {
  max-width: 46ch;
  font-size: 0.95rem;
  line-height: 1.9;
  color: rgba(33, 24, 14, 0.78);
  margin-bottom: 1.1rem;
}

/* carry the parent so this beats `.story-copy p` (which would otherwise
   shrink the signature to body size and make it hard to read) */
.story-copy .story-sign {
  margin-top: 2rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--brown);
}

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

/* ---------- footer ---------- */

.footer {
  background: var(--ink);
  color: var(--sand);
  padding: clamp(4rem, 10vh, 7rem) var(--gutter) 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: clamp(3rem, 8vh, 5rem);
}

.footer-word {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(4rem, 12vw, 10rem);
  letter-spacing: 0.18em;
  line-height: 0.9;
  color: var(--cream);
}

.footer-signup p {
  font-size: 0.875rem;
  color: rgba(245, 240, 232, 0.7);
  margin-bottom: 1.2rem;
  max-width: 34ch;
}

.signup-form {
  display: flex;
  border-bottom: 1px solid rgba(245, 240, 232, 0.4);
}

.signup-form input {
  flex: 1;
  background: none;
  border: none;
  color: var(--sand);
  font: inherit;
  font-size: 0.9rem;
  padding: 0.7rem 0;
  outline: none;
}

.signup-form input::placeholder { color: rgba(245, 240, 232, 0.4); }

.signup-form button {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream);
  padding: 0 0.5rem;
}

.signup-form button:hover { color: var(--honey); }

.signup-done {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--honey);
  padding: 0.7rem 0;
}

.footer-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(245, 240, 232, 0.15);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.55);
}

.footer-base a:hover { color: var(--cream); }

@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr; align-items: start; }
}

/* ---------- cart drawer ---------- */

.cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(33, 24, 14, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.cart-overlay.open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 71;
  width: min(26rem, 92vw);
  background: var(--sand);
  transform: translateX(100%);
  /* hidden while closed so its off-screen controls are out of the tab order
     and it cannot extend the page width */
  visibility: hidden;
  transition: transform 0.55s var(--ease-out), visibility 0s linear 0.55s;
  display: flex;
  flex-direction: column;
}

.cart-drawer.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.55s var(--ease-out);
  box-shadow: -20px 0 60px rgba(33, 24, 14, 0.18);
}

.cart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.4rem 1.6rem;
  border-bottom: 1px solid rgba(33, 24, 14, 0.1);
}

.cart-head h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
}

.cart-close { font-size: 1.4rem; line-height: 1; padding: 0.2rem 0.4rem; }

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 1.2rem 1.6rem;
}

.cart-empty {
  font-family: var(--serif);
  font-style: italic;
  color: var(--brown);
  font-size: 1.1rem;
  text-align: center;
  margin-top: 3rem;
}

.cart-item {
  display: grid;
  grid-template-columns: 4.4rem 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(33, 24, 14, 0.08);
}

.cart-item img {
  width: 4.4rem;
  height: 5.4rem;
  object-fit: cover;
}

.cart-item-name {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 400;
}

.cart-item-size { font-size: 0.75rem; color: rgba(33,24,14,0.72); }

.cart-qty {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.4rem;
}

.cart-qty button {
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid rgba(33, 24, 14, 0.25);
  border-radius: 50%;
  font-size: 0.8rem;
  line-height: 1;
  display: grid;
  place-items: center;
}

.cart-qty button:hover { background: var(--ink); color: var(--sand); border-color: var(--ink); }

.cart-item-right { text-align: right; font-size: 0.85rem; }

.cart-remove {
  display: block;
  margin-top: 0.5rem;
  margin-left: auto;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(33, 24, 14, 0.72);
}

.cart-remove:hover { color: var(--brown); text-decoration: underline; }

.cart-foot {
  padding: 1.3rem 1.6rem 1.6rem;
  border-top: 1px solid rgba(33, 24, 14, 0.12);
  background: var(--sand-deep);
}

.cart-subtotal {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.cart-subtotal strong { font-weight: 500; }

.btn-primary {
  display: block;
  width: 100%;
  padding: 1rem;
  background: var(--ink);
  color: var(--sand);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  transition: background 0.3s ease;
}

.btn-primary:hover { background: var(--brown); }

.cart-checkout-note {
  margin-top: 0.9rem;
  font-size: 0.78rem;
  line-height: 1.6;
  color: rgba(33, 24, 14, 0.72);
  text-align: center;
}

/* checkout-coming-soon state inside drawer */
.cart-soon { padding: 1rem 0; text-align: center; }

.cart-soon h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
  color: var(--brown);
}

.cart-soon p { font-size: 0.82rem; color: rgba(33,24,14,0.65); margin-bottom: 1rem; }

.cart-soon .signup-form { border-color: rgba(33, 24, 14, 0.35); }
.cart-soon .signup-form input { color: var(--ink); }
.cart-soon .signup-form input::placeholder { color: rgba(33, 24, 14, 0.35); }
.cart-soon .signup-form button { color: var(--brown); }

/* toast */
.toast {
  position: fixed;
  bottom: 1.6rem;
  left: 50%;
  transform: translate(-50%, 200%);
  z-index: 80;
  background: var(--ink);
  color: var(--sand);
  padding: 0.8rem 1.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  transition: transform 0.5s var(--ease-out);
}

.toast.show { transform: translate(-50%, 0); }

/* ---------- shop page / product page ---------- */

.page-head {
  padding: clamp(8rem, 18vh, 11rem) var(--gutter) clamp(2rem, 5vh, 3rem);
}

.page-head h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.6rem, 7vw, 5rem);
  letter-spacing: 0.05em;
  line-height: 1.05;
  margin-top: 0.8rem;
}

.page-head p {
  max-width: 40rem;
  margin-top: 1.2rem;
  font-size: 0.95rem;
  line-height: 1.85;
  color: rgba(33, 24, 14, 0.7);
}

.pdp {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(7rem, 16vh, 10rem) var(--gutter) clamp(4rem, 10vh, 7rem);
  align-items: start;
}

.pdp-media {
  position: sticky;
  top: 5.5rem;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.pdp-media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity 0.7s ease;
}

.pdp-media .img-shadow { opacity: 0; }
.pdp-media:hover .img-shadow { opacity: 1; }

.pdp-info { padding-top: 1rem; max-width: 28rem; }

.pdp-info h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.1;
  margin: 0.6rem 0 0.8rem;
}

.pdp-price { font-size: 1rem; color: rgba(33, 24, 14, 0.65); margin-bottom: 1.6rem; }

.pdp-desc {
  font-size: 0.92rem;
  line-height: 1.85;
  color: rgba(33, 24, 14, 0.75);
  margin-bottom: 1.8rem;
}

.pdp-sizes { margin-bottom: 1.8rem; }

.pdp-sizes .label { display: block; margin-bottom: 0.8rem; }

.size-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.size-btn {
  min-width: 2.8rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(33, 24, 14, 0.25);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  transition: all 0.25s ease;
}

.size-btn:hover { border-color: var(--ink); }

.size-btn.selected,
.size-btn[aria-checked="true"] { background: var(--ink); color: var(--sand); border-color: var(--ink); }

.pdp-note {
  margin-top: 1rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.98rem;
  color: var(--brown);
}

.pdp-back {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(33, 24, 14, 0.72);
}

.pdp-back:hover { color: var(--ink); }

@media (max-width: 800px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp-media { position: static; }
}

/* ---------- glimpses: overlapping collage, images drifting at different depths ---------- */

.glimpses { background: var(--sand); }

.glimpses-stage {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto;
  gap: 0;
  align-items: start;
}

.glimpse { overflow: hidden; }

.glimpse img,
.glimpse video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

/* the anchor image: large, calm, slow */
.glimpse-a {
  grid-column: 1 / 8;
  grid-row: 1 / 3;
  aspect-ratio: 4 / 5;
}

/* the drifting one: overlaps the anchor's edge, moves faster, floats */
.glimpse-b {
  grid-column: 6 / 9;
  grid-row: 2;
  z-index: 2;
  aspect-ratio: 3 / 4;
  margin-top: -34%;
  box-shadow: 0 30px 60px rgba(33, 24, 14, 0.18);
}

/* the high one: smaller, sits up and to the right */
.glimpse-c {
  grid-column: 10 / 13;
  grid-row: 1;
  aspect-ratio: 3 / 4;
  margin-top: 12%;
}

.glimpses-line {
  grid-column: 9 / 13;
  grid-row: 2;
  align-self: end;
  padding: 0 0 4% 8%;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.glimpses-line em {
  font-style: italic;
  color: var(--plum);
}

@media (max-width: 800px) {
  .glimpses-stage { grid-template-columns: repeat(6, 1fr); }
  .glimpse-a { grid-column: 1 / 6; grid-row: 1; }
  .glimpse-b { grid-column: 3 / 7; grid-row: 2; margin-top: -22%; }
  .glimpse-c { display: none; }
  .glimpses-line { grid-column: 1 / 7; grid-row: 3; padding: 2rem 0 0; }
}

/* ---------- interlude: full-bleed golden hour with a floating image ---------- */

.interlude {
  position: relative;
  min-height: 92vh;
  display: grid;
  align-items: end;
}

.interlude-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.interlude-media img {
  width: 100%;
  height: 118%;
  object-fit: cover;
  object-position: 50% 40%;
  will-change: transform;
}

.interlude-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(33, 24, 14, 0.35), rgba(33, 24, 14, 0) 45%);
}

.interlude-float {
  position: relative;
  z-index: 2;
  justify-self: end;
  width: clamp(180px, 24vw, 340px);
  aspect-ratio: 3 / 4;
  margin: 0 var(--gutter) -3.5rem 0;
  overflow: hidden;
  box-shadow: 0 34px 70px rgba(33, 24, 14, 0.35);
}

.interlude-float img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.interlude-line {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(3rem, 9vh, 6rem);
  z-index: 2;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1.15;
  color: var(--sand);
  text-shadow: 0 2px 30px rgba(33, 24, 14, 0.45);
}

.interlude-line em {
  font-style: italic;
  color: var(--cream);
}

@media (max-width: 800px) {
  .interlude { min-height: 70vh; }
  /* sit the card fully on the dark interlude, above the dark-to-cream seam,
     so that seam no longer cuts a pink sliver across the bottom of the photo */
  .interlude-float { width: 42vw; margin-right: var(--gutter); margin-bottom: 3rem; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .wipe img { clip-path: inset(0 0 0 0); }
  .fade-up { opacity: 1; transform: none; }
  .settle img { transform: none; }
  .slide-l, .slide-r, .zoom-in { opacity: 1; transform: none; }
  .honey-plate { transform: none; }
  .hero-wordmark .char { opacity: 1; transform: none; }
  .hero-tag { opacity: 1; transform: none; }
}

/* no-js failsafe: the reveal states below are hidden until the script adds
   .in-view. If JS is disabled or blocked, <html> keeps its .no-js class and
   everything is shown immediately so no content is lost. */
.no-js .fade-up { opacity: 1; transform: none; }
.no-js .wipe img,
.no-js .wipe.from-left img,
.no-js .wipe.from-right img { clip-path: inset(0 0 0 0); }
.no-js .settle img { transform: none; }
.no-js .slide-l,
.no-js .slide-r,
.no-js .zoom-in { opacity: 1; transform: none; }
.no-js .honey-plate { transform: none; }
.no-js .hero-wordmark .char { opacity: 1; transform: none; }
.no-js .hero-tag { opacity: 1; transform: none; }
.no-js .hero-scrollcue { opacity: 1; }

/* visible keyboard focus */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--brown);
  outline-offset: 3px;
}