/* ============================================================
   Sections
   ============================================================ */

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

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(var(--header-h) + 40px) var(--page-x) 60px;
  overflow: hidden;
  text-align: center;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg video,
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  transform: scale(1.08);
  animation: hero-settle 3.2s 0.2s var(--ease-out-expo) forwards;
}

@keyframes hero-settle {
  to { transform: scale(1); }
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Light enough to read the footage, heavy enough behind the headline. */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-cream-100) 70%, transparent) 0%,
      color-mix(in srgb, var(--color-cream-100) 30%, transparent) 22%,
      color-mix(in srgb, var(--color-cream-100) 62%, transparent) 48%,
      color-mix(in srgb, var(--color-cream-100) 34%, transparent) 78%,
      color-mix(in srgb, var(--color-cream-100) 62%, transparent) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  max-width: 1100px;
}

.hero__title {
  font: var(--font-header);
  text-transform: lowercase;
}

.hero__title em { color: var(--color-pink-700); }

.hero__tagline {
  max-width: 46ch;
  color: var(--color-brown);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- centred editorial block ---------- */

.edito { text-align: center; }

.edito__inner {
  max-width: 1000px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

.edito h2 {
  font: var(--font-display-3);
  text-transform: lowercase;
  max-width: 16ch;
}

.edito h2 em { color: var(--color-pink-700); }

.edito p { color: var(--color-brown); max-width: 60ch; }

.edito__price {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.edito__price strong { font: var(--font-display-2); font-weight: 400; }

/* ---------- what we make: category rail ---------- */

.cats__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  margin-bottom: 60px;
}

.cats__head h2 {
  font: var(--font-display-3);
  text-transform: lowercase;
  max-width: 15ch;
}

.cats__head h2 em { color: var(--color-pink-700); }

.cats {
  display: grid;
  gap: 40px var(--grid-gap);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .cats { grid-template-columns: repeat(4, 1fr); }
  .cats > :nth-child(even) { transform: translateY(44px); }
}

.cat { display: flex; flex-direction: column; gap: 16px; }

.cat .media { aspect-ratio: 3 / 4; }

.cat img { transition: transform 1.2s var(--ease-out-expo); }

.cat:hover img { transform: scale(1.05); }

.cat h3 {
  font: var(--font-display-5);
  font-weight: 400;
  text-transform: lowercase;
}

.cat p { font: var(--font-label-2); color: var(--color-brown); }

/* ---------- statement ---------- */

.statement { text-align: center; }

.statement__type {
  font: var(--font-header);
  text-transform: lowercase;
  margin-inline: auto;
  max-width: 18ch;
}

.statement__type em { color: var(--color-pink-700); }

.statement__figure {
  margin-top: 64px;
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .statement__figure { grid-template-columns: repeat(3, 1fr); align-items: end; }
  .statement__figure > :nth-child(2) { transform: translateY(-44px); }
}

/* ---------- three steps ---------- */

.essence__head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  text-align: center;
  margin-bottom: 70px;
}

.essence__head h2 {
  font: var(--font-display-3);
  text-transform: lowercase;
  max-width: 14ch;
}

.essence__head h2 em { color: var(--color-pink-700); }

.steps {
  display: grid;
  gap: 44px var(--grid-gap);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}

.step { display: flex; flex-direction: column; gap: 20px; }

.step__media { aspect-ratio: 3 / 4; }

.step__head { display: flex; align-items: baseline; gap: 14px; }

.step__num { font: var(--font-tiny-1); letter-spacing: 0.14em; color: var(--color-pink-700); }

.step h3 { font: var(--font-display-5); font-weight: 400; text-transform: lowercase; }

.step p { font: var(--font-label-2); color: var(--color-brown); }

/* ============================================================
   The turntable: the spinning garment
   ============================================================ */

.turntable {
  position: relative;
  height: 360vh;
  background: var(--color-background-secondary);
}

.turntable__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.turntable__stage {
  position: absolute;
  inset: calc(var(--header-h) * 0.6) 0 180px 0;
  display: grid;
  place-items: center;
  perspective: 1500px;
  perspective-origin: 50% 50%;
}

/* Scrim so the type at the bottom always has something to sit on,
   whatever photo happens to be facing us. */
.turntable__sticky::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 340px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top,
    var(--color-sand-300) 28%,
    color-mix(in srgb, var(--color-sand-300) 70%, transparent) 58%,
    transparent 100%);
}

.turntable__ring {
  position: relative;
  width: var(--panel-w);
  height: var(--panel-h);
  transform-style: preserve-3d;
  transform: rotateX(-7deg) rotateY(var(--spin, 0deg));

  /* 8 panels need a radius of at least 1.21 × panel width to avoid
     intersecting each other; 1.45 leaves a deliberate gap. */
  --panel-h: clamp(210px, 40vh, 300px);
  --panel-w: calc(var(--panel-h) * 0.7);
  --radius: calc(var(--panel-w) * 1.45);
}

@media (min-width: 768px) {
  .turntable__ring { --panel-h: clamp(260px, 46vh, 400px); }
}

.turntable__panel {
  position: absolute;
  inset: 0;
  transform: rotateY(calc(var(--i) * var(--step, 45deg))) translateZ(var(--radius));
  overflow: hidden;
  background: var(--color-sand-400);
  box-shadow: 0 30px 60px -30px rgb(42 36 31 / 45%);
}

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

/* --f is the facing factor (1 = square to camera, 0 = edge on),
   written per frame by js/turntable.js */
.turntable__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-sand-300);
  opacity: calc(0.72 - 0.72 * var(--f, 1));
}

.turntable__floor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--radius, 430px) * 2.5);
  height: calc(var(--radius, 430px) * 2.5);
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--color-brown) 24%, transparent), transparent 72%);
  transform: rotateX(84deg) translateZ(calc(var(--panel-h, 430px) / -2));
  pointer-events: none;
}

.turntable__type {
  position: absolute;
  left: 50%;
  bottom: 96px;
  translate: -50% 0;
  z-index: 3;
  width: calc(100% - 40px);
  max-width: 900px;
  text-align: center;
  pointer-events: none;
}

/* The slot must be taller than the cap height or the mask crops the
   descenders off words like "heads". */
.turntable__slot {
  position: relative;
  height: 1.45em;
  font: var(--font-display-2);
  font-size: clamp(1.75rem, 4.2vw, 3.4rem);
}

.turntable__text {
  position: absolute;
  inset: 0;
  font: inherit;
  line-height: 1.45;
  text-transform: lowercase;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.turntable__text > span {
  display: block;
  transition: transform 0.9s var(--ease-out-expo);
}

.turntable__text.is-up > span { transform: translateY(-110%); }
.turntable__text.is-down > span { transform: translateY(110%); }
.turntable__text.is-visible > span { transform: translateY(0); }

.turntable__text em { color: var(--color-pink-700); }

.turntable__caption {
  margin-top: 18px;
  font: var(--font-tiny-1);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-brown);
}

.turntable__progress {
  position: absolute;
  left: 50%;
  bottom: 46px;
  translate: -50% 0;
  width: 120px;
  height: 1px;
  background: color-mix(in srgb, var(--color-brown) 25%, transparent);
  z-index: 3;
}

.turntable__progress i {
  display: block;
  height: 100%;
  background: var(--color-pink-700);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
}

/* ============================================================
   Expand: one image grows to fill, then two slide in beside it
   Driven by js/expand.js writing --e1 (grow) and --e2 (open out).
   ============================================================ */

.expand {
  position: relative;
  height: 320vh;
  background: var(--color-background-primary);
}

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

.expand__row {
  display: grid;
  /* --e1 grows the middle panel, --e2 opens the two side panels.
     0,0 → 28% wide card · 1,0 → full bleed · 1,1 → even thirds */
  grid-template-columns:
    calc(var(--e2, 0) * 33.33%)
    calc(28% + var(--e1, 0) * 72% - var(--e2, 0) * 66.66%)
    calc(var(--e2, 0) * 33.33%);
  justify-content: center; /* keeps the card centred while it's narrower than the row */
  width: 100%;
  /* Tops out at 76vh so the caption below it never lands on the photos. */
  height: calc(40vh + var(--e1, 0) * 36vh);
  gap: 0;
}

.expand__panel {
  position: relative;
  overflow: hidden;
  height: 100%;
  background: var(--color-sand-300);
}

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

/* the side panels drift in from their own edge as they open */
.expand__panel--left img { transform: translateX(calc((1 - var(--e2, 0)) * -22%)); }
.expand__panel--right img { transform: translateX(calc((1 - var(--e2, 0)) * 22%)); }

.expand__caption {
  position: absolute;
  left: 50%;
  bottom: 52px;
  translate: -50% 0;
  z-index: 3;
  text-align: center;
  width: calc(100% - 40px);
  pointer-events: none;
  opacity: var(--cap, 1);
  transition: opacity 0.4s var(--ease-out-quart);
}

.expand__caption p {
  font: var(--font-display-5);
  text-transform: lowercase;
  color: var(--color-ink);
  display: inline-block;
  background: color-mix(in srgb, var(--color-cream-100) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 12px 26px;
  border-radius: 999px;
}

/* ============================================================
   Masterpiece: big centred line + a floating parallax image field
   ============================================================ */

.masterpiece {
  background: var(--color-cream-200);
  overflow: hidden;
  padding-block: var(--section-y);
}

.masterpiece__type {
  font: var(--font-header);
  text-transform: lowercase;
  text-align: center;
  max-width: 16ch;
  margin: 0 auto 20px;
}

.masterpiece__type em { color: var(--color-pink-700); }

.masterpiece__sub {
  text-align: center;
  color: var(--color-brown);
  max-width: 48ch;
  margin: 0 auto;
}

.float-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px var(--grid-gap);
  margin-block: 70px;
}

@media (min-width: 768px) {
  .float-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 6.6vw, 115px) clamp(16px, 5vw, 90px);
  }
}

/* --multiplier sets how far each tile drifts; js/parallax.js writes --y */
.float-grid__item {
  --multiplier: 1.2;
  transform: translate3d(0, calc(var(--y, 0) * var(--multiplier) * 1px), 0);
  will-change: transform;
}

.float-grid__item:nth-child(4n + 1),
.float-grid__item:nth-child(4n + 4) { --multiplier: 2.4; }

.float-grid__item .media { aspect-ratio: 3 / 4; }

.float-grid__item:nth-child(3n + 2) .media { aspect-ratio: 1 / 1; }
.float-grid__item:nth-child(5n + 3) .media { aspect-ratio: 4 / 5; }

.float-grid__item img { transition: transform 1.2s var(--ease-out-expo); }
.float-grid__item:hover img { transform: scale(1.05); }

.float-grid__item figcaption {
  margin-top: 12px;
  font: var(--font-tiny-1);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-grey-500);
}

.masterpiece__actions { display: flex; justify-content: center; }

/* ---------- process ---------- */

.process__grid { row-gap: 50px; align-items: start; }

.process__intro { grid-column: 1 / -1; }

@media (min-width: 768px) {
  .process__intro { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + 40px); }
  .process__list { grid-column: 7 / span 6; }
}

.process__intro h2 {
  font: var(--font-display-3);
  text-transform: lowercase;
  max-width: 11ch;
  margin-bottom: 24px;
}

.process__intro h2 em { color: var(--color-pink-700); }

.process__intro p { color: var(--color-brown); max-width: 40ch; }

.process__item {
  display: flex;
  gap: 22px;
  padding-block: 34px;
  border-bottom: 1px solid var(--color-grey-300);
}

.process__item:first-child { border-top: 1px solid var(--color-grey-300); }

.process__item-num {
  font: var(--font-tiny-1);
  letter-spacing: 0.14em;
  color: var(--color-pink-700);
  padding-top: 6px;
  flex: none;
}

.process__item h3 {
  font: var(--font-display-5);
  font-weight: 400;
  text-transform: lowercase;
  margin-bottom: 10px;
}

.process__item p { font: var(--font-label-2); color: var(--color-brown); }

/* ---------- quote ---------- */

.quote { text-align: center; }

.quote__mark { width: 54px; margin: 0 auto 30px; opacity: 0.85; }

.quote blockquote {
  font: var(--font-display-2);
  font-style: italic;
  max-width: 20ch;
  margin-inline: auto;
}

.quote figcaption {
  margin-top: 30px;
  font: var(--font-tiny-1);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-grey-500);
}

.quote figcaption strong { color: var(--color-ink); font-weight: 400; }

/* ---------- closing CTA ---------- */

.cta { text-align: center; background: var(--color-background-secondary); }

.cta h2 {
  font: var(--font-header);
  text-transform: lowercase;
  max-width: 16ch;
  margin: 0 auto 22px;
}

.cta h2 em { color: var(--color-pink-700); }

.cta p { color: var(--color-brown); max-width: 46ch; margin: 0 auto 40px; }

.cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- interior page header ---------- */

.page-head {
  padding-top: calc(var(--header-h) + 90px);
  padding-bottom: 60px;
  text-align: center;
}

.page-head h1 {
  font: var(--font-header);
  text-transform: lowercase;
  max-width: 16ch;
  margin-inline: auto;
}

.page-head h1 em { color: var(--color-pink-700); }

.page-head p {
  margin: 26px auto 0;
  max-width: 56ch;
  color: var(--color-brown);
}

.page-head--left { text-align: left; }
.page-head--left h1, .page-head--left p { margin-inline: 0; }

/* ---------- two-column editorial (about) ---------- */

.split { row-gap: 50px; align-items: center; }

.split__media { grid-column: 1 / -1; }
.split__body { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 22px; }

@media (min-width: 768px) {
  .split__media { grid-column: 1 / span 6; }
  .split__body { grid-column: 8 / span 5; }
  .split--flip .split__media { grid-column: 7 / span 6; order: 2; }
  .split--flip .split__body { grid-column: 1 / span 5; order: 1; }
}

.split__body h2 {
  font: var(--font-display-3);
  text-transform: lowercase;
  max-width: 12ch;
}

.split__body h2 em { color: var(--color-pink-700); }

.split__body p { color: var(--color-brown); }

/* ---------- stat row ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px var(--grid-gap);
}

@media (min-width: 768px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
}

.stat { display: flex; flex-direction: column; gap: 8px; }

.stat strong { font: var(--font-display-2); font-weight: 400; }

.stat span { font: var(--font-tiny-1); text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-grey-500); }

/* ---------- gallery page ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 44px;
  justify-content: center;
}

.filter {
  padding: 9px 18px;
  border: 1px solid var(--color-grey-300);
  border-radius: 999px;
  font: var(--font-tiny-1);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: all 0.4s var(--ease-out-quart);
}

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

.filter.is-active {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-cream-100);
}

.masonry {
  display: grid;
  gap: 30px var(--grid-gap);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .masonry { grid-template-columns: repeat(3, 1fr); }
}

.masonry__item { transition: opacity 0.5s var(--ease-out-quart); }
.masonry__item.is-hidden { display: none; }
.masonry__item .media { aspect-ratio: 3 / 4; }
.masonry__item img { transition: transform 1.1s var(--ease-out-expo); }
.masonry__item:hover img { transform: scale(1.05); }

.masonry__item figcaption {
  margin-top: 12px;
  font: var(--font-tiny-1);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-grey-500);
}

/* ---------- order page ---------- */

.order__grid { row-gap: 60px; align-items: start; }

.order__form { grid-column: 1 / -1; }
.order__aside { grid-column: 1 / -1; }

@media (min-width: 768px) {
  .order__form { grid-column: 1 / span 7; }
  .order__aside { grid-column: 9 / span 4; position: sticky; top: calc(var(--header-h) + 40px); }
}

.order__fields {
  display: grid;
  gap: 30px var(--grid-gap);
  grid-template-columns: repeat(2, 1fr);
}

.order__fields .field--full { grid-column: 1 / -1; }

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

.order__aside-card {
  background: var(--color-background-secondary);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.order__aside-card h3 { font: var(--font-display-5); font-weight: 400; text-transform: lowercase; }

.order__aside-card p { font: var(--font-label-2); color: var(--color-brown); }

.order__aside-card dl { display: flex; flex-direction: column; gap: 12px; }

.order__aside-card div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-brown) 20%, transparent);
  font: var(--font-label-2);
}

.order__aside-card dt { color: var(--color-brown); }

.form-note { margin-top: 26px; font: var(--font-tiny-1); color: var(--color-grey-500); }

.form-status { margin-top: 20px; font: var(--font-label-2); color: var(--color-pink-700); }

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

@media (prefers-reduced-motion: reduce) {
  .hero__bg video, .hero__bg img { animation: none; transform: none; }
  .float-grid__item { transform: none !important; }
  .expand__row {
    grid-template-columns: 33.33% 33.34% 33.33%;
    height: 70vh;
  }
  .expand__panel img { transform: none !important; }
}