:root {
  --bg: #f3efe6;          /* warm bone — main page */
  --paper: #f3efe6;
  --paper-2: #e9e2d5;     /* oatmeal — alternate section */
  --ink: #2c2822;         /* warm charcoal, never pure black */
  --ink-soft: #6c6557;    /* muted body copy */
  --fg: #f3efe6;          /* light text used over dark imagery */
  --muted: #9a917f;
  --sand: #a8855a;        /* accent, tuned for light backgrounds */
  --line: rgba(44, 40, 34, 0.13);
  --line-over: rgba(243, 239, 230, 0.22);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 300;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.kicker {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 22px;
}

/* ---------- Fixed frame ---------- */
.frame {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(18px, 4vw, 44px);
  background: transparent;
  transition: background 0.5s ease, padding 0.4s ease, border-color 0.5s ease;
  border-bottom: 1px solid transparent;
}
/* Solid state once scrolled off the hero */
.frame--solid {
  background: rgba(243, 239, 230, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
  padding-top: 16px;
  padding-bottom: 16px;
}

.frame__logo {
  position: absolute;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  display: block;
  line-height: 0;
  transition: top 0.4s ease;
}
.frame--solid .frame__logo { top: 11px; }
.frame__logo img {
  height: 40px;
  width: auto;
  transition: height 0.4s ease, opacity 0.4s ease;
}
.frame--solid .frame__logo img { height: 30px; }

/* Swap light/dark logo per state */
.frame__logo--dark { position: absolute; top: 0; left: 0; opacity: 0; }
.frame--solid .frame__logo--light { opacity: 0; }
.frame--solid .frame__logo--dark { opacity: 1; }

.frame__meta {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: #fff;
  transition: color 0.5s ease;
}
.frame--solid .frame__meta { color: var(--ink-soft); }

.frame__mark {
  height: 28px;
  width: auto;
  transition: filter 0.5s ease;
}
.frame--solid .frame__mark { filter: brightness(0) opacity(0.78); }
@media (max-width: 640px) {
  .frame__meta { display: none; }
  .frame__logo { top: 16px; }
  .frame__logo img { height: 32px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; background: #000; }
.hero__video {
  position: absolute;
  top: 50%; left: 50%;
  min-width: 100%; min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  filter: none;
}
.hero__veil {
  position: absolute; inset: 0;
  background: transparent;
}
.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
}
.hero__logo { width: min(72vw, 480px); height: auto; margin: 0 auto 26px; }
.hero__line {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(18px, 2.6vw, 24px);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(236, 231, 221, 0.9);
}

.scroll-cue {
  position: absolute;
  bottom: 34px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 1px; height: 52px;
  overflow: hidden;
}
.scroll-cue span {
  display: block;
  width: 1px; height: 52px;
  background: rgba(236, 231, 221, 0.4);
  animation: drop 2.4s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes drop {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* ---------- Statement ---------- */
.statement {
  padding: clamp(120px, 20vh, 220px) clamp(24px, 8vw, 120px);
  display: flex;
  justify-content: center;
}
.statement__inner { text-align: center; }
.statement__text {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 4.6vw, 54px);
  line-height: 1.22;
  letter-spacing: -0.005em;
  max-width: 940px;
  margin: 0 auto;
  text-wrap: balance;
  color: var(--ink);
}
.statement__text em {
  font-style: italic;
  color: var(--sand);
}

/* ---------- Wave motif (echoes the glyph printed on every garment) ---------- */
.wave {
  display: block;
  width: 46px;
  color: var(--sand);
  margin: 0 auto 30px;
}
.wave svg { display: block; width: 100%; height: auto; }
.wave path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.wave--muted { color: var(--muted); margin: 0; width: 34px; }

/* ---------- Film / paper grain (tactility) ---------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ---------- Editorial blocks (Prada-style) ---------- */
.editorial { border-top: 1px solid var(--line); }

/* Full-bleed image band */
.block-full {
  position: relative;
  width: 100%;
  height: 84vh;
  min-height: 460px;
  overflow: hidden;
}
.block-full--tall { height: 92vh; }
.block-full img,
.block-full video {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s cubic-bezier(.2,.8,.2,1);
}
.block-full:hover img,
.block-full:hover video { transform: scale(1.03); }

/* Split band: text + image, 50/50 */
.block-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-top: 1px solid var(--line);
}
.block-split__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 9vw, 120px) clamp(28px, 6vw, 96px);
}
.block-split__lead {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.25;
  margin-bottom: 24px;
  text-wrap: balance;
}
.block-split__text h2 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.25;
  margin-bottom: 24px;
  text-wrap: balance;
}
.block-split__body {
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.8;
  color: var(--ink-soft);
  font-weight: 300;
  max-width: 420px;
  text-wrap: pretty;
}
.block-split--reverse .block-split__body {
  max-width: 520px;
}
.block-split__media {
  position: relative;
  overflow: hidden;
  min-height: 56vh;
  border-left: 1px solid var(--line);
}
.block-split__media img,
.block-split__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s cubic-bezier(.2,.8,.2,1);
}
.block-split__media:hover img,
.block-split__media:hover video { transform: scale(1.03); }
.block-split__media-stack {
  display: grid;
  grid-auto-rows: 1fr;
  min-height: 64vh;
  background: #111;
}
.block-split__media-stack video + video {
  border-top: 1px solid var(--line);
}

/* Reversed split puts media on the left */
.block-split--reverse .block-split__media { order: -1; border-left: none; border-right: 1px solid var(--line); }

/* ---------- Islands index ---------- */
.islands {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(30px, 6vw, 80px);
  align-items: start;
  padding: clamp(80px, 14vh, 160px) clamp(28px, 6vw, 96px);
  border-top: 1px solid var(--line);
}
.islands__lead {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.3;
  color: var(--ink);
  max-width: 300px;
  text-wrap: balance;
}
.islands__list { list-style: none; }
.island {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.island__link {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 20px;
}
.island__link .island__name,
.island__link .island__coord {
  transition: color 0.25s ease;
}
.island__link:hover .island__name,
.island__link:hover .island__coord {
  color: var(--sand);
}
.island:last-child { border-bottom: 1px solid var(--line); }
.island__name {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(22px, 3vw, 34px);
  color: var(--ink);
}
.island__script {
  font-size: 18px;
  color: var(--ink-soft);
  justify-self: end;
  min-width: 90px;
  text-align: right;
}
.island__coord {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
  justify-self: end;
  white-space: nowrap;
  min-width: 150px;
  text-align: right;
}
.island--soon .island__name { color: var(--muted); font-style: italic; }
.island__wave {
  justify-self: end;
  width: 40px;
  color: var(--sand);
}
.island__wave svg { display: block; width: 100%; height: auto; }
.island__wave path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.garment h2 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.12;
  margin-bottom: 22px;
  text-wrap: balance;
}

.origin-note {
  min-height: clamp(380px, 56vh, 620px);
  display: grid;
  place-items: center;
  padding: clamp(70px, 10vw, 130px) clamp(24px, 8vw, 120px);
  text-align: center;
  border-top: 1px solid var(--line);
}

.origin-note a {
  display: grid;
  justify-items: center;
  gap: 18px;
}

.origin-note h2 {
  max-width: 9ch;
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(48px, 10vw, 132px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.018em;
}

.origin-note p {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.24em;
  line-height: 1.8;
  text-transform: uppercase;
}

.origin-note a h2,
.origin-note a p {
  transition: color 0.35s ease, transform 0.7s cubic-bezier(.2,.8,.2,1);
}

.origin-note a:hover h2 {
  transform: translateY(-4px);
}

.origin-note a:hover p {
  color: var(--sand);
}

/* ---------- Shop / product page ---------- */
.shop-page {
  background: var(--paper);
}

.shop-page .frame {
  position: sticky;
}

.frame__back {
  color: var(--ink-soft);
}

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

.shop {
  padding: clamp(28px, 5vw, 64px) clamp(18px, 4vw, 44px) 0;
}

.shop-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.7fr);
  gap: clamp(28px, 8vw, 120px);
  align-items: end;
  padding: clamp(34px, 6vw, 76px) 0 clamp(28px, 4.5vw, 54px);
  border-bottom: 1px solid var(--line);
}

.shop-hero h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(66px, 11vw, 132px);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.02em;
}

.shop-hero p {
  color: var(--ink-soft);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 300;
  line-height: 1.75;
  max-width: 430px;
  text-wrap: pretty;
}

.product {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(340px, 0.78fr);
  gap: clamp(24px, 4.5vw, 72px);
  padding: clamp(30px, 5vw, 72px) 0;
  border-bottom: 1px solid var(--line);
}

.product--reverse {
  grid-template-columns: minmax(340px, 0.78fr) minmax(0, 1.22fr);
}

.product--reverse .product__gallery {
  order: 2;
}

.product__gallery {
  display: grid;
  gap: 14px;
  align-self: start;
}

.product__image {
  background: var(--paper-2);
  min-height: clamp(440px, 68vw, 760px);
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
}

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

.product__thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.product__thumb {
  display: grid;
  gap: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font: inherit;
  padding: 0 0 10px;
  text-align: left;
}

.product__thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--paper-2);
  border: 1px solid var(--line);
  transition: border-color 0.25s ease, opacity 0.25s ease;
}

.product__thumb span {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.product__thumb.is-active img,
.product__thumb:hover img {
  border-color: rgba(44, 40, 34, 0.42);
}

.product__info {
  align-self: start;
  position: sticky;
  top: 96px;
  padding-top: 4px;
}

.product__eyebrow {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.product__info h2 {
  margin-top: 30px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(42px, 6vw, 82px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.01em;
}

.product__price {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.product__copy {
  margin-top: 24px;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.78;
  max-width: 390px;
}

.product__option {
  display: grid;
  gap: 12px;
  margin-top: 30px;
}

.product__option > span {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.swatches {
  display: flex;
  gap: 10px;
}

.swatch {
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  padding: 3px;
}

.swatch span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(44, 40, 34, 0.14);
}

.swatch.is-active,
.swatch:hover {
  border-color: rgba(44, 40, 34, 0.42);
}

.size-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  max-width: 360px;
}

.size-grid button {
  min-height: 42px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.14em;
}

.size-grid button.is-active,
.size-grid button:hover {
  border-color: rgba(44, 40, 34, 0.48);
  background: rgba(44, 40, 34, 0.035);
}

.preorder-btn {
  width: 100%;
  min-height: 54px;
  margin-top: 34px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition: background 0.25s ease, color 0.25s ease;
}

.preorder-btn:hover,
.preorder-btn.is-added {
  background: transparent;
  color: var(--ink);
}

.product__details {
  margin-top: 34px;
  border-top: 1px solid var(--line);
}

.product__details div {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.product__details dt {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.product__details dd {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.5;
}

.shop-note {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: clamp(74px, 13vw, 150px) 0;
  text-align: center;
}

.shop-note p {
  max-width: 560px;
  color: var(--ink-soft);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.25;
  text-wrap: balance;
}

.collection-picker {
  padding: clamp(30px, 5vw, 72px) 0;
  border-bottom: 1px solid var(--line);
}

.collection-picker__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 24px;
}

.collection-picker__head h2 {
  max-width: 420px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(34px, 4.8vw, 64px);
  font-weight: 400;
  line-height: 0.98;
  text-align: right;
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.collection-card {
  display: grid;
  gap: 14px;
  color: var(--ink);
}

.collection-card figure {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--line);
}

.collection-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.2,.8,.2,1), opacity 250ms ease;
}

.collection-card:hover img {
  transform: scale(1.025);
}

.collection-card div {
  display: grid;
  gap: 5px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.collection-card span,
.collection-card p {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.collection-card h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(24px, 2.7vw, 34px);
  font-weight: 400;
  line-height: 1;
}

.collection-card--soon {
  color: rgba(44, 40, 34, 0.56);
}

.collection-card--soon img {
  opacity: 0.58;
  filter: saturate(0.72);
}

/* ---------- Atelier product viewer ---------- */
.atelier {
  min-height: calc(100vh - 86px);
  max-width: 1440px;
  margin-inline: auto;
  padding: clamp(26px, 4vw, 54px) clamp(18px, 4vw, 44px) 0;
}

.atelier__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 1.8vw, 22px);
  padding: clamp(6px, 1.6vw, 22px) 0 0;
}

.atelier__intro h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(54px, 8vw, 104px);
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: -0.018em;
}

.atelier__intro p {
  max-width: 390px;
  color: var(--ink-soft);
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.8;
  text-wrap: pretty;
}

.atelier__viewer {
  min-height: clamp(460px, 60vh, 600px);
  display: grid;
  grid-template-columns: minmax(104px, 0.15fr) minmax(320px, 1fr) minmax(264px, 0.38fr);
  gap: clamp(20px, 3.5vw, 56px);
  align-items: center;
  padding: clamp(8px, 2vw, 28px) 0 clamp(32px, 4vw, 56px);
  position: relative;
}

.atelier__pieces {
  display: grid;
  gap: clamp(12px, 2vw, 22px);
  align-self: center;
}

.atelier__pieces button,
.atelier__views button {
  width: max-content;
  border: 0;
  background: transparent;
  color: rgba(44, 40, 34, 0.42);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.26em;
  line-height: 1.8;
  text-transform: uppercase;
  transition: color 0.35s ease, transform 0.35s ease;
}

.atelier__pieces button:hover,
.atelier__pieces button.is-active,
.atelier__views button:hover,
.atelier__views button.is-active {
  color: var(--ink);
}

.atelier__pieces button.is-active {
  transform: none;
}

.atelier__plate {
  position: absolute;
  left: 0;
  top: clamp(2px, 2vw, 26px);
  z-index: 1;
  display: grid;
  gap: 8px;
  color: rgba(108, 101, 87, 0.66);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  line-height: 1.7;
  text-transform: uppercase;
  pointer-events: none;
}

.atelier__object {
  position: relative;
  min-height: clamp(380px, 52vh, 560px);
  display: grid;
  place-items: center;
  isolation: isolate;
  transition: filter 520ms ease, transform 820ms cubic-bezier(.2,.8,.2,1);
}

.atelier__object::before {
  content: "";
  position: absolute;
  inset: 16% 18% 12%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(44, 40, 34, 0.09), transparent 58%);
  opacity: 0.72;
}

.atelier__image {
  position: absolute;
  width: auto;
  height: clamp(380px, 54vh, 560px);
  max-width: none;
  object-fit: contain;
  opacity: 0;
  mix-blend-mode: multiply;
  transform:
    translate3d(calc(var(--px, 0px) * 1), calc(var(--py, 0px) * 1), 0)
    translateY(18px)
    scale(0.985);
  transition:
    opacity 760ms ease,
    transform 1100ms cubic-bezier(.2,.8,.2,1),
    filter 760ms ease;
  will-change: opacity, transform;
  filter: blur(6px);
}

.atelier__image.is-active {
  opacity: 1;
  transform:
    translate3d(calc(var(--px, 0px) * 1), calc(var(--py, 0px) * 1), 0)
    translateY(0)
    scale(1);
  filter: blur(0);
}

.atelier.is-changing .atelier__object {
  filter: blur(1.5px);
  transform: translateY(2px);
}

.atelier__details > * {
  transition: opacity 420ms ease, transform 520ms cubic-bezier(.2,.8,.2,1);
}

.atelier.is-changing .atelier__details > * {
  opacity: 0.28;
  transform: translateY(4px);
}

.atelier__details {
  align-self: center;
  color: var(--ink);
}

.atelier__edition,
.atelier__price,
.atelier__meta,
.atelier__wishlist {
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.22em;
  line-height: 1.8;
  text-transform: uppercase;
}

.atelier__edition,
.atelier__meta {
  color: var(--muted);
}

.atelier__details h2 {
  margin-top: 18px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(42px, 5vw, 74px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.01em;
}

.atelier__price {
  margin-top: 14px;
  color: var(--ink);
}

.atelier__copy {
  max-width: 340px;
  margin-top: 28px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.85;
  text-wrap: pretty;
}

.atelier__views {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 34px;
}

.atelier__meta {
  display: grid;
  gap: 8px;
  margin-top: 38px;
}

.atelier__meta span:first-child {
  color: var(--ink);
}

.atelier__color-note {
  max-width: 330px;
  margin-top: 24px;
  color: var(--ink-soft);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(18px, 1.8vw, 24px);
  font-style: italic;
  line-height: 1.36;
  text-wrap: pretty;
}

.atelier__preorder {
  margin-top: 38px;
}

.atelier__reserve-context {
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1.7;
  text-transform: uppercase;
}

.atelier__wishlist {
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}

.atelier__wishlist::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 7px;
  background: currentColor;
  transform: scaleX(0.28);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.atelier__wishlist:hover::after,
.atelier__wishlist.is-added::after {
  transform: scaleX(1);
}

.atelier__email {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  max-width: 360px;
  margin-top: 22px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.atelier__email.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.atelier__email input {
  min-width: 0;
  border: 0;
  border-bottom: 1px solid rgba(44, 40, 34, 0.32);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  line-height: 1.6;
  outline: none;
  padding: 9px 0;
}

.atelier__email input::placeholder {
  color: rgba(108, 101, 87, 0.7);
}

.atelier__email button {
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.atelier__form-msg {
  min-height: 18px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.atelier__form-msg.is-error {
  color: #a8462f;
}

.atelier__note {
  display: grid;
  place-items: center;
  min-height: 34vh;
  padding: clamp(54px, 8vw, 110px) 0;
}

.atelier__note p {
  max-width: 620px;
  color: var(--ink-soft);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.26;
  text-align: center;
  text-wrap: balance;
}

/* ---------- Join / waitlist ---------- */
.join {
  background: var(--paper-2);
  color: var(--ink);
  padding: clamp(100px, 17vh, 190px) 24px;
  text-align: center;
  border-top: 1px solid var(--line);
}
.join .kicker { color: var(--sand); }
.join__inner { max-width: 560px; margin: 0 auto; }
.join h2 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(28px, 6.5vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
  white-space: nowrap;
}
.join__sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  font-weight: 300;
  margin-bottom: 40px;
  text-wrap: balance;
}

.waitlist { max-width: 440px; margin: 0 auto; }
.waitlist__field {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid rgba(44, 40, 34, 0.28);
  transition: border-color 0.3s;
}
.waitlist__field:focus-within { border-color: var(--ink); }
.waitlist__field input {
  flex: 1; min-width: 0;
  background: transparent;
  border: none; outline: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  padding: 14px 4px;
  letter-spacing: 0.01em;
}
.waitlist__field input::placeholder { color: #9a9183; }
.waitlist__btn {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 14px 6px 14px 20px;
  transition: color 0.25s, opacity 0.25s;
}
.waitlist__btn:hover { color: var(--sand); }
.waitlist__btn:disabled { opacity: 0.5; cursor: default; }
.waitlist__msg {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  min-height: 18px;
  margin-top: 16px;
  color: var(--ink-soft);
}
.waitlist__msg.is-error { color: #a8462f; }
.waitlist__msg.is-success { color: #5a6b4e; }

.socials {
  list-style: none;
  display: flex;
  gap: 28px;
  justify-content: center;
  margin-top: 48px;
}
.socials a {
  color: #7a7263;
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 0.2s;
}
.socials a:hover { color: var(--ink); }

/* ---------- Footer ---------- */
.footer {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 26px clamp(18px, 4vw, 44px);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1.25s ease, transform 1.25s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  .scroll-cue { display: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .place:hover img { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .block-split { grid-template-columns: 1fr; }
  .block-split__media {
    min-height: 0;
    aspect-ratio: 4 / 5;
    border-left: none;
    border-top: 1px solid var(--line);
    order: -1;
  }
  .block-split--reverse .block-split__media { border-right: none; }
  .block-full { height: 70vh; }
  .block-full--tall { height: 80vh; }
  .shop {
    padding-top: 28px;
  }
  .shop-hero,
  .product,
  .product--reverse {
    grid-template-columns: 1fr;
  }
  .atelier__intro {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .atelier__viewer {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 28px;
    padding-top: 46px;
  }
  .atelier__plate {
    position: static;
    order: 1;
  }
  .atelier__pieces {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    order: 2;
  }
  .atelier__object {
    min-height: 58vh;
    order: 3;
  }
  .atelier__details {
    order: 4;
  }
  .atelier__pieces button.is-active {
    transform: none;
  }
  .collection-picker__head {
    align-items: start;
    flex-direction: column;
  }
  .collection-picker__head h2 {
    text-align: left;
  }
  .collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product--reverse .product__gallery {
    order: initial;
  }
  .product__info {
    position: static;
  }
  .product__image {
    min-height: 0;
    aspect-ratio: 4 / 5;
  }
  .islands { grid-template-columns: 1fr; gap: 28px; }
  .island,
  .island__link { grid-template-columns: 1fr auto; gap: 12px 16px; }
  .island__script { grid-column: 2; min-width: 0; }
  .island__coord { grid-column: 1 / -1; justify-self: start; text-align: left; min-width: 0; }
}
@media (max-width: 540px) {
  .atelier {
    padding-inline: 18px;
  }
  .atelier__intro h1 {
    font-size: clamp(50px, 17vw, 88px);
  }
  .atelier__object {
    min-height: 52vh;
  }
  .atelier__image {
    width: auto;
    height: clamp(260px, 42vh, 400px);
    max-width: 92%;
  }
  .atelier__views {
    gap: 14px;
  }
  .shop-hero h1 {
    font-size: clamp(62px, 22vw, 98px);
  }
  .product__thumbs {
    gap: 8px;
  }
  .collection-grid {
    grid-template-columns: 1fr;
  }
  .collection-card figure {
    aspect-ratio: 4 / 5;
  }
  .product__thumb span,
  .collection-card span,
  .collection-card p,
  .product__eyebrow,
  .product__option > span,
  .product__details dt {
    letter-spacing: 0.16em;
  }
  .size-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .product__details div {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .footer { font-size: 9.5px; }
}

@media (min-width: 761px) and (max-width: 860px) {
  .atelier__intro {
    gap: clamp(14px, 2vw, 22px);
  }
  .atelier__viewer {
    grid-template-columns: minmax(96px, 0.2fr) minmax(260px, 1fr) minmax(220px, 0.38fr);
    min-height: 560px;
    gap: 28px;
  }
  .atelier__plate {
    position: absolute;
    order: initial;
    left: 8px;
    top: 20px;
  }
  .atelier__pieces {
    display: grid;
    order: initial;
  }
  .atelier__object {
    min-height: 440px;
    order: initial;
  }
  .atelier__details {
    order: initial;
  }
  .atelier__pieces button.is-active {
    transform: none;
  }
  .atelier__image {
    width: auto;
    height: clamp(300px, 44vh, 420px);
    max-width: 100%;
  }
}