/* ---- static build additions ----
   next/font isn't present here, so the families are named directly, and the
   home page lays its chapters out as grids instead of the app's JS carousel. */
:root { --font-display: "Cormorant Garamond"; --font-sans: "Manrope"; }

#main { scroll-margin-top: 80px; }

.home-chapters {
  padding: 100px clamp(18px, 5vw, 78px);
  background:
    radial-gradient(circle at 88% 8%, rgba(215,173,88,.1), transparent 22%),
    linear-gradient(180deg, #070706 0%, #0b0a08 58%, #080706 100%);
}

.home-chapter { max-width: 1450px; margin: 0 auto 96px; }
.home-chapter:last-child { margin-bottom: 0; }

.home-chapter-head {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 30px 70px;
  align-items: end;
  margin-bottom: 34px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}

.home-chapter-head h2 {
  margin-top: 16px;
  font-family: var(--display);
  font-size: clamp(3.2rem, 5.4vw, 5.6rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .82;
}

.home-chapter-head p { color: var(--muted); font-size: .92rem; line-height: 1.8; }

.chapter-link {
  display: block;
  margin-top: 18px;
  color: var(--gold-2);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.chapter-link:hover { color: var(--cream); }

/* Home cards use h3 (the chapter owns the h2); collection pages use h2. */
.scent-card-copy h3 {
  margin: 12px 0 0;
  font-family: var(--display);
  font-size: 2.9rem;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: .95;
}

/* Two stacked panels rather than the app's tabbed single panel. */
.room-panel.static {
  max-width: 1450px;
  margin: 0 auto 20px;
  border: 1px solid var(--line-soft);
  border-radius: 26px;
}

@media (max-width: 900px) {
  .home-chapter-head { grid-template-columns: 1fr; gap: 20px; }
  .home-chapters { padding: 70px 14px; }
  .home-chapter { margin-bottom: 70px; }
}

@media (max-width: 780px) {
  .scent-card-copy h3 { font-size: 2.4rem; }
}
/* No Tailwind. Every class in this file is hand-written, so the framework was
   shipping nothing but its Preflight reset — reproduced below at a fraction of
   the size. */

:root {
  --ink: #070706;
  --ink-2: #0d0c0a;
  --panel: #12110e;
  --cream: #f7efdf;
  --muted: #c3b9a7;
  /* Raised from #82796c: this sits under 10px uppercase type and needs the
     headroom to clear WCAG AA. */
  --soft: #9c9285;
  --gold: #d7ad58;
  --gold-2: #f0ce83;
  --line: rgba(215, 173, 88, .23);
  --line-soft: rgba(247, 239, 223, .1);
  --display: var(--font-display), "Times New Roman", serif;
  --sans: var(--font-sans), Arial, sans-serif;
}

* { box-sizing: border-box; }

/* --- reset (replaces Tailwind Preflight) --- */
h1, h2, h3, h4, h5, h6, p, blockquote, figure, ul, ol {
  margin: 0;
  padding: 0;
}
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
ul, ol { list-style: none; }
b, strong { font-weight: bolder; }
button { padding: 0; border: 0; background: transparent; }
button:disabled { cursor: not-allowed; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--cream); background: var(--ink); font-family: var(--sans); }
body::before { position: fixed; inset: 0; z-index: -1; content: ""; pointer-events: none; background: radial-gradient(circle at 83% 9%, rgba(215,173,88,.08), transparent 28%), linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px); background-size: auto, 68px 68px, 68px 68px; mask-image: linear-gradient(#000, transparent 88%); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
/* `height: auto` is required now that images carry width/height attributes —
   without it the attribute height wins and every image is squashed. Rules that
   set an explicit height (hero, slide art, room art, peeks) still override it. */
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 4px; }
section[id] { scroll-margin-top: 72px; }

.skip-link { position: fixed; left: -9999px; top: 0; z-index: 200; padding: 12px 20px; color: #171005; background: var(--gold); font-weight: 700; }
.skip-link:focus { left: 12px; top: 12px; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--gold); font-size: .66rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.eyebrow::before { width: 28px; height: 1px; content: ""; background: var(--gold); }

.nav { position: sticky; top: 0; z-index: 100; min-height: 72px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 clamp(20px, 4vw, 62px); border-bottom: 1px solid rgba(215,173,88,.18); background: rgba(7,7,6,.85); backdrop-filter: blur(20px); }
.brand { display: flex; align-items: center; gap: 13px; }
.brand-crest { width: 43px; height: 43px; object-fit: contain; }
.brand-wordmark { width: 145px; }
.nav-links { display: flex; align-items: center; gap: 30px; color: var(--muted); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.nav-links a { padding: 28px 0; transition: color .2s; }
.nav-links a:hover { color: var(--cream); }
.nav-actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
.saved-pill { min-width: 52px; height: 39px; display: inline-flex; align-items: baseline; justify-content: center; gap: 1px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--gold); background: rgba(255,255,255,.025); font-size: .7rem; font-weight: 700; line-height: 39px; }
.saved-pill span { color: var(--soft); font-size: .58rem; }
.menu-toggle { width: 43px; height: 43px; display: none; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; }

.hero { position: relative; min-height: calc(100vh - 72px); display: flex; align-items: center; overflow: hidden; }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; animation: heroSettle 1.5s ease both; }
@keyframes heroSettle { from { opacity: .5; transform: scale(1.035); } }
.hero-wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,3,3,.97) 0%, rgba(4,3,3,.82) 36%, rgba(4,3,3,.1) 70%), linear-gradient(0deg, rgba(5,4,3,.65), transparent 38%); }
.hero-copy { position: relative; z-index: 2; width: min(650px, calc(100% - 40px)); margin-left: clamp(25px, 8vw, 130px); padding: 75px 0; }
.hero h1 { margin: 25px 0 0; font-family: var(--display); font-size: clamp(5rem, 9vw, 9.5rem); font-weight: 500; letter-spacing: -.05em; line-height: .72; }
.hero h1 em { display: block; color: var(--gold-2); font-weight: 500; }
.hero-copy > p { max-width: 570px; margin: 30px 0 0; color: #d2c7b5; font-size: 1.02rem; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 31px; }
.button { min-height: 51px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 24px; border: 1px solid transparent; border-radius: 999px; background: transparent; cursor: pointer; font-size: .68rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; transition: transform .25s, background .25s, border-color .25s; }
.button:hover { transform: translateY(-2px); }
.button.gold { color: #171005; background: linear-gradient(135deg, #f1d394, #c58b3d); box-shadow: 0 15px 40px rgba(215,173,88,.18); }
.button.ghost { border-color: var(--line); color: var(--cream); background: rgba(255,255,255,.025); }
.proof-strip { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 43px; padding-top: 23px; border-top: 1px solid var(--line); }
.proof-strip div { display: grid; gap: 4px; }
.proof-strip strong { font-family: var(--display); font-size: 1.35rem; font-weight: 600; }
.proof-strip span { color: var(--soft); font-size: .61rem; letter-spacing: .13em; text-transform: uppercase; }
.hero-caption { position: absolute; right: 30px; bottom: 26px; z-index: 2; display: flex; gap: 20px; align-items: end; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.35); }
.hero-caption span { color: var(--gold-2); font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.hero-caption strong { font-family: var(--display); font-size: 2.2rem; font-weight: 600; }

.standard { max-width: 1340px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; align-items: end; margin: 0 auto; padding: 95px 25px; border-bottom: 1px solid var(--line); }
.standard h2 { max-width: 870px; margin: 20px 0 0; font-family: var(--display); font-size: clamp(3.8rem, 6.3vw, 7rem); font-weight: 500; letter-spacing: -.045em; line-height: .83; }
.standard h2 em { display: block; color: var(--gold-2); font-weight: 500; }
.standard > p { margin: 0; padding-left: 28px; border-left: 1px solid var(--line); color: #d7cbb8; line-height: 1.8; }
.standard p strong { display: block; margin-top: 22px; color: var(--gold); font-family: var(--display); font-size: 1.4rem; font-style: italic; font-weight: 500; }

@keyframes panelIn { from { opacity: .45; transform: translateY(10px); } }

.inside { padding: 100px clamp(18px, 5vw, 78px); background: var(--ink-2); }
.inside-heading { max-width: 1320px; display: grid; grid-template-columns: 1fr .8fr; gap: 25px 70px; align-items: end; margin: 0 auto 40px; }
.inside-heading .eyebrow { grid-column: 1 / -1; }
.inside-heading h2 { margin: 0; font-family: var(--display); font-size: clamp(4rem, 6vw, 6.8rem); font-weight: 500; letter-spacing: -.05em; line-height: .78; }
.inside-heading p { margin: 0; color: var(--muted); line-height: 1.75; }
.room-tabs { max-width: 1450px; display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 auto; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.room-tabs button { min-height: 74px; display: grid; grid-template-columns: auto 1fr auto; gap: 15px; align-items: center; padding: 0 22px; text-align: left; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; cursor: pointer; }
.room-tabs button span { color: var(--gold); font-size: .58rem; font-weight: 800; }
.room-tabs button i { font-style: normal; }
.room-tabs button.active { color: #171005; background: var(--gold); }
.room-tabs button.active span { color: #171005; }
.room-panel { max-width: 1450px; min-height: 600px; display: grid; grid-template-columns: 1.15fr .85fr; margin: 18px auto 0; overflow: hidden; border-radius: 0 0 30px 30px; background: #090807; animation: panelIn .5s ease both; }
.room-image { min-height: 600px; overflow: hidden; }
.room-image img { width: 100%; height: 100%; object-fit: cover; }
.room-copy { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(38px, 5vw, 70px); }
.room-copy h3 { margin: 17px 0 0; font-family: var(--display); font-size: clamp(3.7rem, 5.5vw, 6.2rem); font-weight: 500; letter-spacing: -.045em; line-height: .78; }
.room-copy > p { margin: 23px 0 0; color: var(--muted); line-height: 1.75; }
.flight-choices { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 28px; border-top: 1px solid var(--line-soft); border-left: 1px solid var(--line-soft); }
.flight-choices button { min-height: 55px; display: flex; gap: 10px; align-items: center; padding: 12px; border: 0; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: transparent; cursor: pointer; font-size: .7rem; }
.flight-choices button span { width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); }
.flight-choices button.chosen { background: rgba(255,255,255,.05); }
.flight-choices button.chosen span { color: #090807; background: var(--accent); }
.flight-price { display: flex; gap: 17px; align-items: center; margin: 25px 0 18px; }
.flight-price strong { color: var(--gold-2); font-family: var(--display); font-size: 3.6rem; font-weight: 500; }
.flight-price span { max-width: 160px; color: var(--soft); font-size: .61rem; line-height: 1.5; text-transform: uppercase; }
.request-state { margin-top: 16px; color: var(--soft); line-height: 1.55; }
.price-lines { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 30px; border-top: 1px solid var(--line-soft); border-left: 1px solid var(--line-soft); }
.price-lines span { min-height: 56px; display: flex; justify-content: space-between; gap: 15px; align-items: center; padding: 12px 15px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size: .7rem; }
.price-lines b { color: var(--gold); }
.full-ritual { width: 100%; display: flex; justify-content: space-between; align-items: center; margin: 26px 0 22px; padding: 20px 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: 1.5rem; }
.full-ritual strong { color: var(--gold-2); font-size: 2.7rem; font-weight: 500; }
.order { display: grid; grid-template-columns: 1.15fr .85fr; gap: 9vw; align-items: end; padding: 100px clamp(25px, 8vw, 130px); background: #11100d; }
.order h2 { max-width: 830px; margin: 18px 0 0; font-family: var(--display); font-size: clamp(4.5rem, 7vw, 7.8rem); font-weight: 500; letter-spacing: -.055em; line-height: .74; }
.order > div:last-child { display: grid; justify-items: start; gap: 23px; }
.order p { margin: 0; color: var(--muted); line-height: 1.8; }
.order small { color: var(--soft); line-height: 1.5; }

footer { display: grid; grid-template-columns: 1fr auto auto; gap: 25px 55px; align-items: center; padding: 42px clamp(25px, 5vw, 78px) 75px; border-top: 1px solid var(--line); }
.footer-brand { display: flex; gap: 13px; align-items: center; }
.footer-brand img:first-child { width: 40px; }
.footer-brand img:last-child { width: 135px; }
footer > span { color: var(--muted); font-family: var(--display); font-size: 1rem; font-style: italic; }
footer nav { display: flex; gap: 20px; color: var(--soft); font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
footer small { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid var(--line-soft); color: var(--soft); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; }
.mobile-order { display: none; }

@media (max-width: 1080px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav-links { position: fixed; top: 72px; left: 15px; right: 15px; display: none; flex-direction: column; gap: 0; padding: 12px 20px; border: 1px solid var(--line); background: #090807; }
  .nav-links.open { display: flex; }
  .nav-links a { width: 100%; padding: 15px 0; border-bottom: 1px solid var(--line-soft); }
  .menu-toggle { display: block; }
  .room-panel { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 780px) {
  .nav { min-height: 66px; padding: 0 16px; }
  .nav-links { top: 66px; }
  .brand-wordmark { width: 124px; }
  .hero { min-height: 790px; }
  .hero-wash { background: linear-gradient(90deg, rgba(4,3,3,.92), rgba(4,3,3,.4)), linear-gradient(0deg, rgba(5,4,3,.82), transparent 52%); }
  .hero-image { object-position: 62% center; }
  .hero-copy { width: calc(100% - 32px); margin-left: 16px; padding: 64px 18px; }
  .hero h1 { font-size: clamp(4.5rem, 18vw, 6.5rem); }
  .hero-caption { display: none; }
  .standard { grid-template-columns: 1fr; gap: 35px; padding: 75px 20px; }
  .standard > p { padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .standard h2 { font-size: clamp(3.5rem, 14vw, 5rem); }
  .inside { padding: 80px 14px; }
  .inside-heading { grid-template-columns: 1fr; padding: 0 7px; }
  .inside-heading .eyebrow { grid-column: 1; }
  .inside-heading h2 { font-size: clamp(3.7rem, 15vw, 5.4rem); }
  .room-tabs { display: flex; overflow-x: auto; border-left: 0; }
  .room-tabs button { min-width: 210px; border-left: 1px solid var(--line); }
  .room-panel { grid-template-columns: 1fr; border-radius: 0 0 22px 22px; }
  .room-image { min-height: 410px; }
  .room-copy { min-height: 520px; padding: 38px 25px; }
  .order { grid-template-columns: 1fr; padding: 82px 20px; }
  .order h2 { font-size: clamp(4rem, 16vw, 5.8rem); }
  footer { grid-template-columns: 1fr; padding-bottom: 90px; }
  footer nav { flex-wrap: wrap; }
  body { padding-bottom: 72px; }
  .mobile-order { position: fixed; left: 12px; right: 12px; bottom: 10px; z-index: 110; height: 56px; display: grid; grid-template-columns: 33px 1fr auto; gap: 12px; align-items: center; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: rgba(9,8,7,.94); backdrop-filter: blur(16px); box-shadow: 0 15px 50px rgba(0,0,0,.5); }
  .mobile-order > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; color: #171005; background: var(--gold); font-size: .65rem; font-weight: 800; }
  .mobile-order strong { font-size: .63rem; letter-spacing: .09em; text-transform: uppercase; }
  .mobile-order i { color: var(--gold); font-style: normal; }
}

@media (max-width: 480px) {
  .proof-strip { display: grid; grid-template-columns: 1fr 1fr; }
  .room-image { min-height: 330px; }
  .price-lines { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* V23 — data-driven collection carousels */
.carousel-shell {
  width: min(1650px, calc(100vw - 30px));
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 112px;
  gap: 14px;
  align-items: stretch;
  margin: 0 auto;
  touch-action: pan-y;
}

.carousel-shell:focus-visible {
  outline-offset: 8px;
}

.carousel-peek {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 24px;
  background: #090807;
  cursor: pointer;
  opacity: .48;
  transform: scale(.92);
  transition: opacity .3s, transform .35s, border-color .3s;
}

.carousel-peek:hover {
  opacity: .86;
  transform: scale(.96);
  border-color: var(--line);
}

.carousel-peek::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(0deg, rgba(5,4,3,.86), transparent 60%);
}

.carousel-peek img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.68);
}

.carousel-peek span {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 2;
  width: max-content;
  color: var(--cream);
  font-family: var(--display);
  font-size: 1.08rem;
  writing-mode: vertical-rl;
  transform: translateX(-50%) rotate(180deg);
}

.peek-right span {
  transform: translateX(-50%);
}

/* The slide has two shapes, chosen per scent by artOrientation() in catalog.ts.
   `.wide` is the full-bleed cinematic frame — right for 3:2 and 16:9 artwork.
   `.tall` splits into copy | art, because forcing square or portrait artwork
   into a ~1.94 letterbox was cropping away half of it (Paradise showed 39%),
   and the left-hand scrim was landing on faces. */
.core-slide {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 30px;
  background: #0a0908;
  box-shadow: 0 35px 110px rgba(0,0,0,.4);
  animation: carouselReveal .58s ease both;
}

@keyframes carouselReveal {
  from { opacity: .35; transform: translateX(16px) scale(.992); }
}

@keyframes carouselImage {
  from { transform: scale(1.035); filter: saturate(.72); }
}

.slide-art {
  position: relative;
  overflow: hidden;
}

.slide-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Slight upward bias: when portrait art has to lose something, lose the
     foreground rather than the face. */
  object-position: center 35%;
  animation: carouselImage .85s ease both;
}

.slide-shade {
  position: absolute;
  inset: 0;
}

/* --- wide: art fills, copy floats over it --- */
.core-slide.wide {
  min-height: 720px;
}

.core-slide.wide .slide-art {
  position: absolute;
  inset: 0;
}

.core-slide.wide .slide-shade {
  background:
    linear-gradient(90deg, rgba(5,4,3,.92) 0%, rgba(5,4,3,.68) 37%, transparent 70%),
    linear-gradient(0deg, rgba(5,4,3,.85), transparent 48%);
}

.core-slide.wide .slide-panel {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.core-slide.wide .slide-panel > * {
  pointer-events: auto;
}

.core-slide.wide .core-slide-copy {
  position: absolute;
  left: clamp(28px, 5vw, 74px);
  bottom: clamp(38px, 6vw, 82px);
  width: min(580px, 48%);
}

/* --- tall: copy gets its own column, art gets a frame it fits --- */
/* No fixed height here on purpose. A pixel height only suits one viewport — at
   1280 it cropped squares, at 1650 it re-cropped the portrait collages. Instead
   the art frame takes each artwork's own ratio (--art-ratio, set per scent from
   artW/artH), so the frame fits the art at every width instead of the reverse.
   If the copy column ends up taller, the art stretches to match and gives back
   a little of the edge — which is the right thing to lose. */
.core-slide.tall {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* The display size that works over a full-bleed image is too large for a
   ~450px copy column. */
.core-slide.tall .core-slide-copy h3 {
  font-size: clamp(3.4rem, 4.6vw, 5.6rem);
}

.core-slide.tall .core-slide-copy blockquote {
  font-size: clamp(1.7rem, 2.2vw, 2.5rem);
}

.core-slide.tall .slide-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(38px, 4.5vw, 68px);
  /* The panel is the second column, so the divider goes on its left. */
  border-left: 1px solid var(--line-soft);
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--accent) 11%, #0b0a08), #090807 64%);
}

/* The ::before spacer gives the column its natural height from the artwork's own
   ratio, while the image is absolutely positioned so it still fills the frame if
   the copy column turns out taller (narrow desktops, where text wraps more).
   Setting the height on the image itself instead would leave a band of empty
   background under square art. */
.core-slide.tall .slide-art::before {
  display: block;
  aspect-ratio: var(--art-ratio, 4 / 5);
  content: "";
}

.core-slide.tall .slide-art img {
  position: absolute;
  inset: 0;
}

/* Just enough to keep the collection stamp legible against bright collage. */
.core-slide.tall .slide-shade {
  background: linear-gradient(180deg, rgba(5,4,3,.6), transparent 24%);
}

.core-slide-copy {
  z-index: 2;
}

.core-slide-copy h3 {
  margin: 15px 0 0;
  font-family: var(--display);
  font-size: clamp(5rem, 8vw, 9rem);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: .7;
}

.core-slide-copy blockquote {
  margin: 29px 0 0;
  color: var(--accent);
  font-family: var(--display);
  font-size: clamp(1.9rem, 3vw, 3.25rem);
  line-height: .98;
}

.core-slide-copy > p {
  max-width: 540px;
  margin: 18px 0 0;
  color: #d2c6b5;
  font-size: .86rem;
  line-height: 1.75;
}

.core-slide-copy ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.core-slide-copy li {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.17);
  color: var(--cream);
  background: rgba(7,7,6,.35);
  font-size: .55rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.core-slide-buy {
  z-index: 3;
  display: grid;
  gap: 20px;
}

.core-slide.wide .core-slide-buy {
  position: absolute;
  right: clamp(28px, 5vw, 70px);
  bottom: clamp(38px, 6vw, 78px);
  justify-items: end;
}

.core-slide.wide .core-slide-buy > div {
  display: grid;
  justify-items: end;
}

.core-slide.tall .core-slide-buy {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-top: 38px;
  padding-top: 30px;
  border-top: 1px solid var(--line-soft);
}

.core-slide.tall .core-slide-buy > div {
  display: grid;
}

.core-slide-buy strong {
  color: var(--cream);
  font-family: var(--display);
  font-size: 4rem;
  font-weight: 500;
  line-height: .8;
}

.core-slide-buy span {
  margin-top: 9px;
  color: #bcb0a0;
  font-size: .57rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.carousel-nav {
  max-width: 1450px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 54px;
  gap: 14px;
  align-items: stretch;
  margin: 18px auto 0;
}

.round-arrow {
  width: 54px;
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--gold);
  background: rgba(255,255,255,.02);
  cursor: pointer;
  transition: color .25s, background .25s, transform .25s;
}

.round-arrow:hover {
  color: #171005;
  background: var(--gold);
  transform: translateY(-2px);
}

.feeling-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.feeling-rail button {
  position: relative;
  min-height: 88px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 11px;
  align-content: center;
  padding: 14px 17px;
  text-align: left;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.015);
  cursor: pointer;
  transition: color .25s, background .25s;
}

.feeling-rail button::after {
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  content: "";
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s;
}

.feeling-rail button.active {
  color: var(--cream);
  background: color-mix(in srgb, var(--accent) 14%, #090807);
}

.feeling-rail button.active::after {
  transform: scaleX(1);
}

.feeling-rail span {
  color: var(--gold);
  font-size: .58rem;
  font-weight: 800;
}

.feeling-rail strong {
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1;
}

.feeling-rail small {
  grid-column: 2;
  overflow: hidden;
  color: var(--soft);
  font-size: .58rem;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.room-tabs.compact {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1120px) {
  .carousel-shell {
    width: min(1500px, calc(100vw - 24px));
    grid-template-columns: 74px minmax(0, 1fr) 74px;
    gap: 9px;
  }

  .core-slide.wide .core-slide-copy {
    width: 58%;
  }

  .core-slide.wide .core-slide-buy {
    right: 38px;
  }

  /* Below this the two columns fight: the copy column needs a minimum readable
     width, and whatever is left squeezes the art frame tall and narrow (square
     artwork fell to 45% visible at 870px). Stack instead — the art keeps its
     own proportions and the copy gets the full width. */
  .core-slide.tall {
    display: block;
  }

  /* Capping the width rather than the height keeps the whole artwork visible
     while stopping a 3:4 collage from becoming a 1000px-tall wall. The margin
     either side reads as a mount. */
  .core-slide.tall .slide-art {
    max-width: min(100%, 620px);
    margin-inline: auto;
  }

  .core-slide.tall .slide-panel {
    display: block;
    padding: clamp(32px, 4vw, 56px);
    border-top: 1px solid var(--line-soft);
    border-left: 0;
  }

  .core-slide.tall .core-slide-copy h3 {
    font-size: clamp(3.6rem, 7vw, 5.6rem);
  }

  .core-slide.tall .core-slide-buy {
    margin-top: 30px;
    padding-top: 26px;
  }
}

@media (max-width: 820px) {
  .carousel-shell {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .carousel-peek {
    display: none;
  }

  /* On a phone the overlay had to hide the story and the notes to fit. Stack
     instead: art on top, copy in a real panel underneath, nothing deleted. */
  .core-slide,
  .core-slide.wide,
  .core-slide.tall {
    display: block;
    min-height: 0;
    border-radius: 22px;
  }

  .core-slide.wide .slide-art {
    position: relative;
    inset: auto;
    height: 74vw;
    min-height: 0;
    max-height: 460px;
  }

  /* Portrait and square art keep their own ratio here too — a fixed 74vw band
     would crop them exactly the way the desktop letterbox used to. */
  .core-slide.tall .slide-art {
    max-width: 100%;
    min-height: 0;
  }

  .core-slide .slide-shade,
  .core-slide.wide .slide-shade,
  .core-slide.tall .slide-shade {
    background: linear-gradient(180deg, rgba(5,4,3,.5), transparent 22%);
  }

  .core-slide.wide .slide-panel,
  .core-slide.tall .slide-panel {
    position: static;
    display: block;
    padding: 32px 24px 34px;
    border-left: 0;
    background: linear-gradient(170deg, color-mix(in srgb, var(--accent) 10%, #0b0a08), #090807 60%);
  }

  .core-slide.wide .core-slide-copy,
  .core-slide.tall .core-slide-copy {
    position: static;
    width: auto;
  }

  .core-slide-copy h3 {
    font-size: clamp(4.5rem, 17vw, 6.4rem);
  }

  .core-slide.wide .core-slide-buy,
  .core-slide.tall .core-slide-buy {
    position: static;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: end;
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--line-soft);
  }

  .core-slide.wide .core-slide-buy > div,
  .core-slide.tall .core-slide-buy > div {
    display: grid;
    justify-items: start;
  }

  .carousel-nav {
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    gap: 8px;
  }

  .round-arrow {
    width: 46px;
  }

  .feeling-rail {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .feeling-rail button {
    min-width: 165px;
    scroll-snap-align: start;
  }
}

@media (max-width: 480px) {
  .core-slide-copy blockquote {
    font-size: 1.75rem;
  }

  .core-slide-buy strong {
    font-size: 3.1rem;
  }

  .core-slide-buy .button {
    min-height: 46px;
    padding: 0 16px;
    font-size: .58rem;
  }
}

/* V24 — one collection gallery, art-directed editorial sections */
.collections {
  position: relative;
  overflow: hidden;
  padding: 105px clamp(18px, 5vw, 78px) 115px;
  background:
    radial-gradient(circle at 88% 8%, rgba(215,173,88,.1), transparent 22%),
    radial-gradient(circle at 4% 58%, rgba(21,154,163,.08), transparent 24%),
    linear-gradient(180deg, #070706 0%, #0b0a08 58%, #080706 100%);
}

.collections::before {
  position: absolute;
  top: 165px;
  left: -8vw;
  width: 36vw;
  height: 36vw;
  content: "";
  border: 1px solid rgba(215,173,88,.08);
  border-radius: 50%;
  box-shadow: 0 0 0 7vw rgba(215,173,88,.018), 0 0 0 14vw rgba(215,173,88,.012);
  pointer-events: none;
}

.collection-tabs {
  position: relative;
  z-index: 2;
  max-width: 1450px;
  display: grid;
  /* Driven by collections.length, so adding a chapter needs no CSS change. */
  grid-template-columns: repeat(var(--tab-count, 4), minmax(0, 1fr));
  margin: 0 auto;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  box-shadow: 0 25px 80px rgba(0,0,0,.22);
}

.collection-tabs button {
  position: relative;
  min-height: 112px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 14px;
  align-content: center;
  padding: 20px 22px;
  text-align: left;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.018);
  cursor: pointer;
  transition: color .3s, background .3s, transform .3s;
}

.collection-tabs button::after {
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  content: "";
  background: var(--collection-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s;
}

.collection-tabs button:hover,
.collection-tabs button.active {
  color: var(--cream);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--collection-accent) 14%, transparent), transparent 55%),
    #0c0b09;
}

.collection-tabs button.active::after {
  transform: scaleX(1);
}

.collection-tabs button > span {
  color: var(--collection-accent);
  font-size: .57rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.collection-tabs strong {
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1;
}

.collection-tabs small {
  grid-column: 2;
  color: var(--soft);
  font-size: .55rem;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.collection-editorial {
  position: relative;
  z-index: 1;
  max-width: 1450px;
  min-height: 340px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 70px;
  align-items: end;
  margin: 18px auto;
  overflow: hidden;
  padding: 70px clamp(35px, 6vw, 90px);
  border: 1px solid var(--line-soft);
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--collection-accent) 12%, #11100d), #090807 68%),
    #090807;
  animation: panelIn .52s ease both;
}

.collection-editorial::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 36%;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--collection-accent));
}

.collection-editorial > div,
.collection-editorial > p {
  position: relative;
  z-index: 2;
}

.collection-editorial h2 {
  max-width: 980px;
  margin: 18px 0 0;
  font-family: var(--display);
  font-size: clamp(4.2rem, 6.8vw, 7.6rem);
  font-weight: 500;
  letter-spacing: -.052em;
  line-height: .76;
}

.collection-editorial > p {
  margin: 0;
  padding: 26px 0 0 28px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  color: #c4b8a7;
  font-size: .9rem;
  line-height: 1.85;
}

.collection-ghost {
  position: absolute;
  right: 2vw;
  bottom: -13%;
  z-index: 0;
  color: color-mix(in srgb, var(--collection-accent) 8%, transparent);
  font-family: var(--display);
  font-size: clamp(14rem, 29vw, 30rem);
  font-weight: 500;
  line-height: .65;
  pointer-events: none;
}

.carousel-shell.single {
  max-width: 1450px;
  grid-template-columns: minmax(0, 1fr);
}

.collection-stamp {
  position: absolute;
  top: 28px;
  right: 30px;
  z-index: 3;
  display: grid;
  justify-items: end;
  gap: 7px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.2);
  color: var(--cream);
  background: rgba(7,7,6,.62);
  backdrop-filter: blur(14px);
}

.collection-stamp span {
  color: var(--accent);
  font-family: var(--display);
  font-size: 1.2rem;
  font-style: italic;
}

.collection-stamp strong {
  font-size: .55rem;
  letter-spacing: .16em;
}

.collection-carousel-nav.single {
  grid-template-columns: minmax(0, 1fr);
}

.collection-carousel-nav .feeling-rail {
  grid-template-columns: repeat(var(--rail-count), minmax(0, 1fr));
}

.art-directed {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.standard.art-directed {
  max-width: none;
  min-height: 630px;
  margin: 0;
  padding: 130px max(clamp(25px, 8vw, 130px), calc((100vw - 1450px) / 2));
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 82% 28%, rgba(215,173,88,.14), transparent 25%),
    linear-gradient(115deg, #0c0b09 0 56%, #17120b 56% 56.25%, #090807 56.25%);
}

.standard.art-directed::before {
  position: absolute;
  top: 50%;
  right: 11%;
  width: 300px;
  height: 300px;
  content: "";
  border: 1px solid rgba(215,173,88,.25);
  border-radius: 50%;
  box-shadow: inset 0 0 80px rgba(215,173,88,.06), 0 0 0 30px rgba(215,173,88,.018);
  transform: translateY(-50%);
}

.standard.art-directed > div,
.standard.art-directed > p {
  position: relative;
  z-index: 2;
}

.ghost-word,
.inside-ghost,
.order-ghost {
  position: absolute;
  z-index: 0;
  color: rgba(247,239,223,.025);
  font-family: var(--display);
  font-size: clamp(10rem, 25vw, 27rem);
  font-weight: 600;
  line-height: .65;
  letter-spacing: -.06em;
  pointer-events: none;
}

.ghost-word {
  left: -3vw;
  bottom: -2%;
}

.drop-cap {
  float: left;
  margin: -6px 9px 0 0;
  color: var(--gold-2);
  font-family: var(--display);
  font-size: 4.8rem;
  line-height: .78;
}

.inside.art-directed {
  background:
    radial-gradient(circle at 5% 5%, rgba(21,154,163,.1), transparent 24%),
    radial-gradient(circle at 90% 44%, rgba(215,173,88,.09), transparent 28%),
    linear-gradient(180deg, #0d0c0a, #090807);
}

.inside.art-directed::before {
  position: absolute;
  top: 60px;
  left: 50%;
  width: min(1450px, calc(100% - 36px));
  height: calc(100% - 120px);
  content: "";
  border: 1px solid rgba(215,173,88,.08);
  transform: translateX(-50%);
  pointer-events: none;
}

.inside-ghost {
  top: 120px;
  right: -4vw;
  color: rgba(215,173,88,.025);
}

.inside.art-directed .inside-heading,
.inside.art-directed .room-tabs,
.inside.art-directed .room-panel {
  position: relative;
  z-index: 2;
}

.inside.art-directed .inside-heading {
  padding: 45px 55px;
  border-left: 3px solid var(--gold);
  background: linear-gradient(100deg, rgba(255,255,255,.035), transparent 70%);
}

.order.art-directed {
  min-height: 680px;
  background:
    radial-gradient(circle at 80% 45%, rgba(215,173,88,.17), transparent 24%),
    linear-gradient(112deg, #11100d 0 58%, #19130b 58% 58.3%, #0a0908 58.3%);
}

.order.art-directed::after {
  position: absolute;
  right: 10%;
  bottom: -80px;
  width: 360px;
  height: 360px;
  content: "";
  border: 1px solid rgba(215,173,88,.21);
  border-radius: 50%;
  box-shadow: 0 0 0 45px rgba(215,173,88,.015), inset 0 0 100px rgba(215,173,88,.05);
}

.order.art-directed > div {
  position: relative;
  z-index: 2;
}

.order-ghost {
  left: -2vw;
  bottom: -4%;
}

@media (max-width: 900px) {
  .collection-tabs {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .collection-tabs button {
    min-width: 220px;
    scroll-snap-align: start;
  }

  .collection-editorial {
    min-height: 420px;
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 55px 28px;
  }

  .collection-editorial > p {
    padding: 22px 0 0;
    border-left: 0;
  }

  .standard.art-directed {
    min-height: 760px;
    padding: 100px 24px;
    background: radial-gradient(circle at 78% 78%, rgba(215,173,88,.13), transparent 26%), linear-gradient(155deg, #0c0b09, #12100c 62%, #090807 62.3%);
  }

  .standard.art-directed::before {
    top: auto;
    right: -80px;
    bottom: 20px;
    transform: none;
  }

  .inside.art-directed .inside-heading {
    padding: 35px 25px;
  }

  .order.art-directed {
    min-height: 760px;
  }
}

@media (max-width: 780px) {
  .collections {
    padding: 80px 14px;
  }

  .collection-editorial h2 {
    font-size: clamp(3.8rem, 15vw, 5.4rem);
  }

  .collection-stamp {
    top: 16px;
    right: 16px;
  }

  .collection-stamp span {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .collection-editorial {
    min-height: 390px;
  }

  .collection-editorial h2 {
    font-size: 3.7rem;
  }

  .collection-stamp {
    display: none;
  }

  .standard.art-directed h2 {
    font-size: 3.7rem;
  }
}

/* V21 — ordering, set building, and contact */

/* Progress toward the four-vial Discovery Set. */
.set-meter {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 26px;
}

.set-meter i {
  width: 26px;
  height: 4px;
  border-radius: 999px;
  background: rgba(247, 239, 223, .14);
  transition: background .3s;
}

.set-meter i.filled {
  background: var(--gold);
}

.set-meter b {
  margin-left: 8px;
  color: var(--soft);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.flight-choices button:disabled {
  opacity: .38;
}

.flight-choices button:disabled span {
  border-color: var(--line-soft);
  color: var(--soft);
}

.send-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

/* The house is reachable directly — no clipboard scavenger hunt. */
.contact-lines {
  width: 100%;
  display: grid;
  gap: 1px;
  margin: 4px 0 8px;
  border-top: 1px solid var(--line);
  background: var(--line);
}

.contact-lines a {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  align-items: baseline;
  padding: 16px 2px;
  background: var(--ink-2);
  transition: color .25s, padding-left .25s;
}

.contact-lines a:hover {
  color: var(--gold-2);
  padding-left: 10px;
}

.contact-lines strong {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.contact-label {
  min-width: 92px;
  color: var(--gold);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.order-summary {
  display: grid;
  gap: 10px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .022);
}

.order-summary strong {
  color: var(--cream);
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.25;
}

.order-body {
  display: grid;
  justify-items: start;
  gap: 24px;
}

.button.selected {
  box-shadow: 0 0 0 1px var(--gold-2), 0 15px 40px rgba(215, 173, 88, .18);
}

@media (max-width: 780px) {
  .contact-lines strong {
    font-size: 1.2rem;
  }

  .set-meter {
    flex-wrap: wrap;
  }
}

/* V21 — routed pages: /collections/[collection] and /scents/[scent] */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 34px;
  color: var(--soft);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.breadcrumb span {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}

.breadcrumb a:hover { color: var(--gold-2); }
.breadcrumb b { color: var(--cream); font-weight: 700; }
.breadcrumb i { color: var(--line); font-style: normal; }

.nav-order { min-height: 39px; padding: 0 18px; font-size: .6rem; }

.collection-page,
.scent-page {
  max-width: 1450px;
  margin: 0 auto;
  padding: 54px clamp(18px, 5vw, 78px) 100px;
}

/* --- collection page --- */
.collection-page-head {
  max-width: 900px;
  margin-bottom: 56px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}

.collection-page-head h1 {
  margin: 18px 0 0;
  font-family: var(--display);
  font-size: clamp(3.6rem, 6.4vw, 6.6rem);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: .8;
}

.collection-page-head p {
  margin-top: 24px;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.8;
}

.scent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.scent-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 24px;
  background: #0a0908;
  transition: transform .3s, border-color .3s;
}

.scent-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.scent-card-art {
  overflow: hidden;
  /* One consistent shape across a grid of mixed-ratio artwork. */
  aspect-ratio: 4 / 5;
}

.scent-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  transition: transform .5s;
}

.scent-card:hover .scent-card-art img { transform: scale(1.04); }

.scent-card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 28px 26px 26px;
}

.scent-card-copy h2 {
  margin: 12px 0 0;
  font-family: var(--display);
  font-size: 2.9rem;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: .95;
}

.scent-card-copy blockquote {
  margin-top: 12px;
  color: var(--accent);
  font-family: var(--display);
  font-size: 1.4rem;
  line-height: 1.15;
}

.scent-card-copy ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}

.scent-card-copy li {
  padding: 6px 9px;
  border: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: .54rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.scent-card-foot {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
  margin-top: auto;
  padding-top: 24px;
}

.scent-card-foot strong {
  font-family: var(--display);
  font-size: 2.2rem;
  font-weight: 500;
}

.scent-card-foot span {
  color: var(--soft);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.collection-page-cta {
  display: grid;
  justify-items: start;
  gap: 20px;
  margin-top: 56px;
  padding: 40px clamp(24px, 4vw, 56px);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .022);
}

.collection-page-cta p {
  max-width: 620px;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.8;
}

/* --- scent page --- */
.scent-detail {
  display: grid;
  gap: clamp(32px, 5vw, 70px);
  align-items: start;
}

.scent-detail.wide { grid-template-columns: minmax(0, 1fr); }
.scent-detail.tall { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }

.scent-detail-art {
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 26px;
  background: #0a0908;
}

/* No forced ratio — the artwork sets its own shape on its own page. */
.scent-detail-art img { width: 100%; }

.scent-detail-copy h1 {
  margin: 16px 0 0;
  font-family: var(--display);
  font-size: clamp(4rem, 7vw, 7.4rem);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: .78;
}

.scent-detail-copy blockquote {
  margin-top: 24px;
  color: var(--accent);
  font-family: var(--display);
  font-size: clamp(1.9rem, 3vw, 3rem);
  line-height: 1.05;
}

.scent-detail-copy > p {
  margin-top: 22px;
  max-width: 620px;
  color: var(--muted);
  font-size: .96rem;
  line-height: 1.85;
}

.scent-facts {
  display: grid;
  gap: 1px;
  margin-top: 34px;
  border-top: 1px solid var(--line);
  background: var(--line);
}

.scent-facts > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  align-items: baseline;
  padding: 16px 2px;
  background: var(--ink);
}

.scent-facts dt {
  min-width: 96px;
  color: var(--gold);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.scent-facts dd {
  margin: 0;
  color: var(--cream);
  font-family: var(--display);
  font-size: 1.3rem;
}

.scent-detail-buy {
  display: grid;
  gap: 20px;
  margin-top: 36px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

.scent-detail-buy > strong {
  font-family: var(--display);
  font-size: 3.4rem;
  font-weight: 500;
  line-height: .85;
}

.scent-siblings {
  margin-top: 90px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

.sibling-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  margin-top: 26px;
}

.sibling-grid a {
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: #0a0908;
  transition: transform .3s, border-color .3s;
}

.sibling-grid a:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.sibling-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 35%;
}

.sibling-grid span {
  display: grid;
  gap: 5px;
  padding: 16px 18px 18px;
}

.sibling-grid b { font-family: var(--display); font-size: 1.5rem; font-weight: 500; }
.sibling-grid i { color: var(--soft); font-size: .58rem; font-style: normal; letter-spacing: .1em; text-transform: uppercase; }

/* Link from the home carousel into the scent's own page. */
.slide-actions { display: grid; gap: 12px; justify-items: end; }

.slide-more {
  color: var(--gold-2);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.slide-more:hover { color: var(--cream); }

.core-slide.tall .slide-actions { justify-items: start; }

@media (max-width: 900px) {
  .scent-detail.tall { grid-template-columns: minmax(0, 1fr); }
  .scent-detail-art { max-width: 620px; }
  .slide-actions { justify-items: start; }
}

@media (max-width: 780px) {
  .collection-page,
  .scent-page { padding: 34px 16px 80px; }

  .scent-card-copy h2 { font-size: 2.4rem; }
  .scent-facts dd { font-size: 1.15rem; }
}

/* V21 — the founder section: who confirms the order, shown before the ask */
.founder {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 90px);
  align-items: center;
  padding: 110px clamp(25px, 8vw, 130px);
  background:
    radial-gradient(circle at 18% 30%, rgba(215,173,88,.12), transparent 26%),
    linear-gradient(160deg, #0c0b09, #090807 62%);
  border-top: 1px solid var(--line);
}

.founder-ghost {
  position: absolute;
  right: 3vw;
  bottom: -6%;
  z-index: 0;
  color: rgba(247, 239, 223, .022);
  font-family: var(--display);
  font-size: clamp(12rem, 30vw, 32rem);
  font-weight: 600;
  letter-spacing: -.06em;
  line-height: .65;
  pointer-events: none;
}

.founder-portrait,
.founder-copy {
  position: relative;
  z-index: 2;
}

.founder-portrait {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: #0a0908;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .45);
}

.founder-portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 25%;
}

.founder-copy h2 {
  margin: 18px 0 0;
  font-family: var(--display);
  font-size: clamp(3.2rem, 5.6vw, 6rem);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: .82;
}

.founder-copy p {
  max-width: 620px;
  margin-top: 24px;
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.85;
}

.founder-sign {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--gold);
  font-family: var(--display);
  font-size: 1.5rem;
  font-style: italic;
}

@media (max-width: 900px) {
  .founder {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 80px 24px;
  }

  .founder-portrait { max-width: 420px; }
  .founder-copy h2 { font-size: clamp(3rem, 12vw, 4.4rem); }
}