/* ==========================================================================
   PESU — Homepage
   ========================================================================== */

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  background: var(--ink);
  color: var(--alabaster);
}

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

/* Layered desert horizon — each layer drifts at its own rate on scroll */
.hero__layer {
  position: absolute;
  inset: 0;
  will-change: transform;
  transform: translate3d(0, calc(var(--scroll, 0) * var(--depth, 0) * 1px), 0);
}
.hero__sky {
  background:
    radial-gradient(120% 90% at 50% 108%, rgba(176,141,79,0.42), transparent 62%),
    radial-gradient(80% 60% at 78% 12%, rgba(214,188,139,0.16), transparent 70%),
    linear-gradient(180deg, #0B0A09 0%, #16130F 46%, #241D15 100%);
}
.hero__sun {
  position: absolute;
  left: 50%; bottom: 14%;
  width: min(52vw, 620px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(224,196,140,0.30), rgba(176,141,79,0.10) 46%, transparent 62%);
  filter: blur(6px);
  animation: sun-breathe 14s var(--ease-io) infinite;
}
@keyframes sun-breathe {
  0%, 100% { opacity: 0.85; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;    transform: translateX(-50%) scale(1.06); }
}
.hero__dune {
  position: absolute;
  left: -10%; right: -10%;
  bottom: var(--dune-bottom, -6%);
  height: var(--dune-h, 46%);
  border-radius: 50% 50% 0 0 / 88% 88% 0 0;
  background: var(--dune-bg);
  box-shadow: 0 -1px 0 rgba(247,243,237,0.06);
}
.hero__grain {
  position: absolute; inset: 0;
  opacity: 0.30;
  mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}
.hero__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(110% 80% at 50% 40%, transparent 40%, rgba(8,7,6,0.62) 100%);
  pointer-events: none;
}

.hero__center {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding-top: var(--header-h);
  gap: var(--sp-4);
}

/* Wordmark letters rise one by one */
.hero__wordmark { display: flex; overflow: hidden; padding-block: 0.12em; }
.hero__wordmark span {
  display: inline-block;
  transform: translate3d(0, 118%, 0);
  animation: letter-rise 1.5s var(--ease) forwards;
  animation-delay: calc(180ms + var(--i) * 130ms);
  background: linear-gradient(180deg, #FBF7F0 12%, #D9C69E 78%, #A98C55 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@keyframes letter-rise { to { transform: none; } }

.hero__tagline {
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(247,243,237,0.72);
  opacity: 0;
  animation: fade-up 1.4s var(--ease) 1s forwards;
}
.hero__sub {
  max-width: 40ch;
  color: rgba(247,243,237,0.58);
  font-size: var(--step-0);
  opacity: 0;
  animation: fade-up 1.4s var(--ease) 1.2s forwards;
}
.hero__cta { opacity: 0; animation: fade-up 1.4s var(--ease) 1.45s forwards; margin-top: var(--sp-2); }
@keyframes fade-up { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }

.hero__foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(247,243,237,0.5);
  opacity: 0;
  animation: fade-up 1.4s var(--ease) 1.7s forwards;
}
.hero__scroll { display: grid; justify-items: center; gap: 0.75rem; }
.hero__scroll i {
  display: block; width: 1px; height: 54px;
  background: linear-gradient(180deg, rgba(247,243,237,0.05), rgba(247,243,237,0.65));
  transform-origin: top;
  animation: scroll-pulse 2.4s var(--ease-io) infinite;
}
@keyframes scroll-pulse {
  0%   { transform: scaleY(0.2); opacity: 0.2; }
  45%  { transform: scaleY(1);   opacity: 1; }
  100% { transform: scaleY(1);   opacity: 0; transform-origin: bottom; }
}

/* --- Ticker ------------------------------------------------------------- */
.ticker {
  background: var(--ink);
  color: rgba(247,243,237,0.55);
  border-top: 1px solid rgba(247,243,237,0.10);
  border-bottom: 1px solid rgba(247,243,237,0.10);
  overflow: hidden;
  padding-block: 1.05rem;
  display: flex;
  white-space: nowrap;
}
.ticker__track {
  display: flex;
  gap: 3.5rem;
  padding-right: 3.5rem;
  flex: none;
  animation: ticker 42s linear infinite;
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.ticker__track span { display: inline-flex; align-items: center; gap: 3.5rem; }
.ticker__track span::after { content: "◆"; font-size: 0.5em; color: var(--gilt); opacity: 0.8; }
@keyframes ticker { to { transform: translate3d(-100%, 0, 0); } }
.ticker:hover .ticker__track { animation-play-state: paused; }

/* --- Manifesto ---------------------------------------------------------- */
.manifesto__grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 0.85fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: center;
}
.manifesto__statement { font-size: var(--step-3); }
.manifesto__statement .display { max-width: 18ch; }
.manifesto__body { display: grid; gap: var(--sp-4); }
.manifesto__sig {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--fg-muted);
}
.manifesto__media {
  aspect-ratio: 4 / 5;
  position: relative;
}
.manifesto__media figcaption {
  position: absolute;
  bottom: 1.1rem; left: 1.2rem;
  z-index: 3;
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(18,16,14,0.65);
}

/* --- Section headings --------------------------------------------------- */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.section-head__text { display: grid; gap: var(--sp-3); }

/* --- Collections -------------------------------------------------------- */
.collections__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.2vw, 2.25rem);
}
.collections__grid .tile:nth-child(2) { margin-top: clamp(1.5rem, 5vw, 5rem); }
.collection-tile .tile__media::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, transparent 45%, rgba(12,10,9,0.42));
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.collection-tile:hover .tile__media::after { opacity: 1; }
.collection-tile__cta {
  position: absolute;
  left: 1.4rem; bottom: 1.3rem; z-index: 3;
  color: var(--alabaster);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.collection-tile:hover .collection-tile__cta { opacity: 1; transform: none; }

/* --- Spotlight (featured object) ---------------------------------------- */
.spotlight { position: relative; overflow: hidden; }
.spotlight__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.spotlight__stage {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.spotlight__halo {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214,188,139,0.20), transparent 65%);
  filter: blur(20px);
}
.spotlight__object { position: relative; width: 86%; }
.spotlight__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-4);
  margin-top: var(--sp-5);
}
.spotlight__specs dt {
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 0.35rem;
}
.spotlight__specs dd { font-family: var(--font-display); font-size: var(--step-1); }

/* --- Configurator teaser ------------------------------------------------ */
.configure__grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.configure__preview {
  position: relative;
  aspect-ratio: 5 / 4;
  display: grid;
  place-items: center;
  transition: background var(--dur-slow) var(--ease);
}
.configure__preview .swatch-fill {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}
.configure__preview .swatch-fill.is-active { opacity: 1; }
.configure__object { position: relative; z-index: 3; width: 62%; filter: drop-shadow(0 40px 50px rgba(12,10,9,0.28)); }
.configure__caption {
  position: absolute;
  right: 1.2rem; bottom: 1.1rem; z-index: 4;
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(18,16,14,0.62);
}

.swatches { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.swatch {
  position: relative;
  width: 64px; height: 64px;
  border-radius: 50%;
  overflow: hidden;
  transition: transform var(--dur) var(--ease);
  isolation: isolate;
}
.swatch::before {
  content: "";
  position: absolute; inset: -4px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.86);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  z-index: 4;
}
.swatch[aria-pressed="true"]::before { opacity: 1; transform: none; }
.swatch:hover { transform: translateY(-3px); }
/* The chip itself clips its texture, so the caption lives outside it. */
.swatch-item { display: grid; justify-items: center; gap: 0.6rem; }
.swatch__label {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.swatch-item:has([aria-pressed="true"]) .swatch__label { color: var(--fg); }

/* --- Materials strip ---------------------------------------------------- */
.materials__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 30vw);
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-4);
  scrollbar-width: thin;
}
.materials__rail::-webkit-scrollbar { height: 2px; }
.materials__rail::-webkit-scrollbar-thumb { background: var(--line); }
.material-card { scroll-snap-align: start; }
.material-card .surface { aspect-ratio: 4 / 5; }
.material-card h3 { font-family: var(--font-display); font-size: var(--step-2); margin-top: var(--sp-3); font-weight: 300; }
.material-card p { color: var(--fg-muted); font-size: var(--step--1); margin-top: 0.4rem; max-width: 34ch; }
.material-card__origin {
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-top: 0.6rem;
  display: block;
}

/* --- Bespoke ------------------------------------------------------------ */
.bespoke { position: relative; overflow: hidden; }
.bespoke__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 120% at 82% 20%, rgba(176,141,79,0.30), transparent 58%),
    linear-gradient(160deg, #17130F, #0C0B0A);
}
.bespoke__inner { position: relative; z-index: 2; }
.bespoke__grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 0.9fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
}
.bespoke__steps { counter-reset: step; display: grid; gap: var(--sp-4); }
.bespoke__step {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.bespoke__step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  color: var(--accent);
}
.bespoke__step h3 { font-family: var(--font-display); font-weight: 300; font-size: var(--step-2); }
.bespoke__step p { color: var(--fg-muted); font-size: var(--step--1); margin-top: 0.4rem; max-width: 40ch; }

/* --- Concierge ---------------------------------------------------------- */
.concierge__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
.concierge__item { padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.concierge__item svg { width: 26px; height: 26px; stroke: var(--accent); fill: none; stroke-width: 1; margin-bottom: var(--sp-3); }
.concierge__item h3 { font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; }
.concierge__item p { color: var(--fg-muted); font-size: var(--step--1); margin-top: 0.5rem; }

/* --- Journal ------------------------------------------------------------ */
.journal__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 2.5rem); }
.journal-card .tile__media { --tile-ratio: 4 / 3; }
.journal-card h3 { font-family: var(--font-display); font-size: var(--step-2); font-weight: 300; margin-top: var(--sp-3); line-height: 1.15; }
.journal-card p { color: var(--fg-muted); font-size: var(--step--1); margin-top: 0.5rem; max-width: 38ch; }
.journal-card__kicker {
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-top: var(--sp-3);
  display: block;
}

/* --- Invitation / newsletter band --------------------------------------- */
.invitation { text-align: center; }
.invitation .newsletter { margin-inline: auto; justify-content: center; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1080px) {
  .collections__grid { grid-template-columns: repeat(2, 1fr); }
  .collections__grid .tile:nth-child(3) { grid-column: span 2; }
  .collections__grid .tile:nth-child(3) .tile__media { --tile-ratio: 16 / 9; }
  .concierge__grid { grid-template-columns: repeat(2, 1fr); }
  .journal__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
}
@media (max-width: 900px) {
  .manifesto__grid,
  .spotlight__grid,
  .configure__grid,
  .bespoke__grid { grid-template-columns: 1fr; }
  .manifesto__media { order: -1; aspect-ratio: 16 / 11; }
  /* Flatten the horizon: on a narrow viewport the dune radius would read as
     a circle rather than a ridge. */
  .hero__dune { left: -70% !important; right: -70% !important; }
  .hero__foot { font-size: 0.62rem; justify-content: center; }
  .hero__foot > p { display: none; }
}
@media (max-width: 640px) {
  .collections__grid { grid-template-columns: 1fr; }
  .collections__grid .tile:nth-child(2) { margin-top: 0; }
  .collections__grid .tile:nth-child(3) .tile__media { --tile-ratio: 3 / 4; }
  .concierge__grid { grid-template-columns: 1fr; }
  .spotlight__specs { grid-template-columns: 1fr; }
}

/* --- Four-up range grid ------------------------------------------------- */
.collections__grid--four { grid-template-columns: repeat(4, 1fr); }
.collections__grid--four .tile:nth-child(2) { margin-top: 0; }
.collections__grid--four .tile:nth-child(even) { margin-top: clamp(1rem, 3vw, 3rem); }

.tile__index {
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  mix-blend-mode: normal;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 12px rgba(18,16,14,.5);
}

/* Spotlight and material preview now hold photographs */
.spotlight__object--photo img,
.configure__object--photo img {
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.configure__object--photo { width: 72%; }

@media (max-width: 1080px) {
  .collections__grid--four { grid-template-columns: repeat(2, 1fr); }
  .collections__grid--four .tile:nth-child(3) { grid-column: auto; }
  .collections__grid--four .tile:nth-child(3) .tile__media { --tile-ratio: 3 / 4; }
}
@media (max-width: 640px) {
  .collections__grid--four { grid-template-columns: 1fr; }
  .collections__grid--four .tile:nth-child(even) { margin-top: 0; }
}