/* =============================================================
   ATHAR — Editorial sections (Landing extended)
   Heavier typographic moments: drop caps, pull-quotes,
   asymmetric two-column layouts, materials grid, atelier.
   ============================================================= */

/* ----- Common editorial container ----- */
.ed {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(96px, 14vw, 200px) clamp(24px, 5vw, 80px);
}
.ed--tight  { padding: clamp(64px, 8vw, 120px) clamp(24px, 5vw, 80px); }
.ed--narrow { max-width: 920px; }
.ed--prose  { max-width: 720px; }

.ed-eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  font-family: var(--serif);
  display: block;
}
.ed-rule {
  width: 60px;
  height: 0;
  border: 0;
  border-top: 1px solid var(--gold);
  margin: 0;
}

/* ----- THE HOUSE — manifesto (two-column editorial) ----- */
.house {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 2.4fr);
  gap: clamp(48px, 8vw, 120px);
  align-items: start;
}
@media (max-width: 820px) { .house { grid-template-columns: 1fr; gap: 32px; } }

.house__aside {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (max-width: 820px) { .house__aside { position: static; } }
.house__aside-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  color: var(--cream);
  line-height: 1.2;
  font-weight: 400;
  margin-top: 8px;
}
.house__aside-ar {
  font-family: var(--arabic);
  font-size: 48px;
  color: var(--gold);
  direction: rtl;
  line-height: 1;
  margin-top: 16px;
  font-weight: 300;
}

.house__body {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.75;
  color: var(--cream);
  max-width: 60ch;
  text-wrap: pretty;
}
.house__body p { margin: 0; }
.house__body p + p { margin-top: 28px; }

.dropcap::first-letter {
  /* legacy fallback only — the explicit .dropcap__letter span is the real driver */
}
.dropcap__letter {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 5.6em;
  line-height: 0.78;
  float: left;
  padding: 6px 14px 0 0;
  color: var(--gold);
}

/* ----- PULL QUOTE — big italic editorial moment ----- */
.pullquote {
  text-align: center;
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(80px, 12vw, 160px) clamp(24px, 5vw, 64px);
  position: relative;
}
.pullquote__mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 140px;
  color: var(--gold);
  line-height: 0.6;
  display: block;
  margin-bottom: 24px;
  font-weight: 400;
}
.pullquote__text {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(34px, 4.5vw, 58px);
  line-height: 1.2;
  color: var(--cream);
  font-weight: 400;
  text-wrap: balance;
  letter-spacing: -0.005em;
}
.pullquote__attr {
  display: block;
  margin-top: 40px;
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  font-style: normal;
  font-weight: 500;
}

/* ----- PERFUMER'S NOTE ----- */
.note-block {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2.2fr);
  gap: clamp(48px, 8vw, 120px);
  align-items: start;
}
@media (max-width: 820px) { .note-block { grid-template-columns: 1fr; gap: 24px; } }
.note-block__label {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  font-family: var(--serif);
}
.note-block__quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.6;
  color: var(--cream);
  max-width: 56ch;
  text-wrap: pretty;
  font-weight: 400;
}
.note-block__sig {
  margin-top: 32px;
  font-family: var(--serif);
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 0.06em;
}
.note-block__sig strong {
  color: var(--cream);
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* ----- THE SIX (refined) ----- */
.six {
  text-align: center;
}
.six__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-bottom: 80px;
}
.six__title {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(36px, 5vw, 56px);
  color: var(--cream);
  font-weight: 400;
  text-wrap: balance;
  max-width: 18ch;
  line-height: 1.15;
}
.six__intro {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 52ch;
  margin: 0 auto;
}
.six__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 32px 24px;
  align-items: end;
}
@media (max-width: 1000px) { .six__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .six__grid { grid-template-columns: repeat(2, 1fr); } }
.six__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  padding: 8px;
  cursor: pointer;
  transition: filter var(--dur) var(--ease);
}
.six__item:hover { filter: brightness(1.08); }
.six__item svg { height: 200px; width: auto; max-width: 100%; }
.six__item-num {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--gold);
  letter-spacing: -0.02em;
}
.six__item-ar {
  font-family: var(--arabic);
  font-size: 17px;
  color: var(--cream);
  direction: rtl;
  margin-top: -4px;
}
.six__item-mood {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  font-weight: 500;
  font-family: var(--serif);
  line-height: 1.5;
  text-wrap: balance;
}
.six__foot {
  display: flex;
  justify-content: center;
  margin-top: 80px;
}

/* ----- THE RITUAL — vertical editorial numbered list ----- */
.ritual { display: flex; flex-direction: column; }
.ritual__row {
  display: grid;
  grid-template-columns: 96px minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: baseline;
  padding: 56px 0;
  border-top: 1px solid var(--line);
}
.ritual__row:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 820px) {
  .ritual__row {
    grid-template-columns: 64px 1fr;
    gap: 24px 32px;
    padding: 40px 0;
  }
  .ritual__row > :nth-child(3) { grid-column: 1 / -1; padding-left: 96px; }
}
@media (max-width: 520px) {
  .ritual__row { grid-template-columns: 48px 1fr; }
  .ritual__row > :nth-child(3) { padding-left: 0; }
}
.ritual__num {
  font-family: var(--serif);
  font-size: clamp(56px, 7vw, 88px);
  color: var(--gold);
  line-height: 0.9;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.ritual__title {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 3vw, 32px);
  color: var(--cream);
  font-weight: 400;
  line-height: 1.2;
  text-wrap: balance;
}
.ritual__body {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.7;
  color: var(--muted);
  font-weight: 400;
  text-wrap: pretty;
}

/* ----- MATERIALS / PROVENANCE ----- */
.materials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 760px) { .materials { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .materials { grid-template-columns: 1fr; } }
.material {
  background: var(--bg);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.material__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.material__name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  color: var(--cream);
  font-weight: 400;
}
.material__origin {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  font-family: var(--serif);
  text-align: right;
}
.material__body {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 4px;
}

/* ----- THE LETTER / single editorial line ----- */
.letter {
  text-align: center;
  padding: clamp(96px, 14vw, 180px) clamp(24px, 5vw, 64px);
}
.letter__line {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(28px, 4vw, 44px);
  color: var(--cream);
  max-width: 22ch;
  margin: 0 auto;
  line-height: 1.3;
  text-wrap: balance;
}
.letter__attr {
  display: block;
  margin-top: 40px;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--serif);
  font-weight: 500;
}

/* ----- ATELIER ----- */
.atelier {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 8vw, 120px);
  align-items: center;
}
@media (max-width: 820px) { .atelier { grid-template-columns: 1fr; gap: 48px; text-align: center; } }
.atelier__title {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(36px, 5vw, 56px);
  color: var(--cream);
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
}
.atelier__body {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.7;
  color: var(--muted);
  margin-top: 24px;
  max-width: 48ch;
}
@media (max-width: 820px) { .atelier__body { margin-left: auto; margin-right: auto; } }
.atelier__list {
  display: grid;
  grid-template-columns: 100px 1fr;
  row-gap: 20px;
  column-gap: 32px;
}
@media (max-width: 820px) { .atelier__list { max-width: 360px; margin: 0 auto; text-align: left; } }
.atelier__list dt {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  font-family: var(--serif);
  padding-top: 6px;
}
.atelier__list dd {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--cream);
  margin: 0;
  line-height: 1.4;
}
.atelier__list dd small {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: 0.02em;
}

/* ----- NEWSLETTER (the catalogue) ----- */
.subscribe {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(64px, 8vw, 96px) clamp(24px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
}
@media (max-width: 820px) { .subscribe { grid-template-columns: 1fr; gap: 32px; text-align: center; } }
.subscribe__title {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 40px);
  color: var(--cream);
  font-weight: 400;
  line-height: 1.2;
  text-wrap: balance;
}
.subscribe__body {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--muted);
  line-height: 1.65;
  margin-top: 16px;
  max-width: 44ch;
}
@media (max-width: 820px) { .subscribe__body { margin-left: auto; margin-right: auto; } }
.subscribe__form {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}
@media (max-width: 540px) {
  .subscribe__form { flex-direction: column; align-items: stretch; }
}
.subscribe__form input {
  flex: 1;
  padding: 12px 0;
  font-size: 18px;
}
.subscribe__form .btn {
  flex: 0 0 auto;
  padding: 16px 32px;
  white-space: nowrap;
}

/* =============================================================
   SCROLL REVEALS — fade + rise as elements enter viewport.
   Default visible; only with .js-ready do elements start hidden.
   ============================================================= */
.js-ready [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1100ms var(--ease),
    transform 1100ms var(--ease);
  will-change: opacity, transform;
}
.js-ready [data-reveal].is-in {
  opacity: 1;
  transform: none;
}
.js-ready [data-reveal][data-reveal-delay="1"] { transition-delay:  80ms; }
.js-ready [data-reveal][data-reveal-delay="2"] { transition-delay: 160ms; }
.js-ready [data-reveal][data-reveal-delay="3"] { transition-delay: 240ms; }
.js-ready [data-reveal][data-reveal-delay="4"] { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .js-ready [data-reveal] {
    opacity: 1; transform: none; transition: none;
  }
}

/* =============================================================
   HERO AMBIENT — slow drifting gold motes (decorative)
   ============================================================= */
.landing { position: relative; overflow: hidden; }
.landing__motes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.landing__mote {
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--gold);
  border-radius: 50%;
  opacity: 0.4;
  filter: blur(0.4px);
  box-shadow: 0 0 22px 4px rgba(168,134,46,0.35);
  animation: drift 22s ease-in-out infinite alternate;
}
.landing__mote--a { top: 22%; left: 18%; animation-duration: 18s; }
.landing__mote--b { top: 68%; left: 76%; animation-duration: 26s; animation-delay: 4s; opacity: 0.28; }
.landing__mote--c { top: 38%; left: 84%; animation-duration: 20s; animation-delay: 7s; opacity: 0.32; }
.landing__mote--d { top: 78%; left: 28%; animation-duration: 24s; animation-delay: 11s; opacity: 0.22; }
@keyframes drift {
  0%   { transform: translate(0, 0); }
  35%  { transform: translate(40px, -55px); }
  70%  { transform: translate(-25px, -110px); }
  100% { transform: translate(20px, -150px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .landing__mote { animation: none; }
}

/* Make sure hero content sits above motes */
.landing > *:not(.landing__motes) { position: relative; z-index: 1; }

/* =============================================================
   FILM SECTION — stock-footage moment
   ============================================================= */
.film {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px;
}
.film__frame {
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--gold-on-dark);
  position: relative;
  overflow: hidden;
  background: #08070a;
}
.film__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.film__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.0) 35%, rgba(0,0,0,0.55) 100%),
    rgba(19,16,10,0.20);
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 32px 36px;
}
.film__chap {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--cream-light);
  line-height: 1.2;
  text-shadow: 0 1px 12px rgba(0,0,0,0.6);
  max-width: 40ch;
  text-align: left;
}
.film__meta {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-on-dark);
  font-family: var(--serif);
  font-weight: 500;
}
.film__chapters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  width: 100%;
  max-width: 1100px;
  margin-top: 24px;
}
@media (max-width: 760px) {
  .film__chapters { grid-template-columns: 1fr; }
  .film__overlay { padding: 20px 22px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .film__chap { font-size: 18px; }
}
.film__chapter {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--line-dark);
  text-align: left;
}
.film__chapter-num {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-on-dark);
  font-family: var(--serif);
  font-weight: 500;
}
.film__chapter-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--cream-light);
  font-weight: 400;
  line-height: 1.2;
}
.film__chapter-body {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--muted-on-dark);
  line-height: 1.6;
}

/* Ambient looping clip inside the Atelier image well */
.atelier__video {
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  display: block;
  border: 1px solid var(--line);
  background: #08070a;
}
   Text colors swap inside; gold lifts; lines deepen.
   Wrap the <section> itself (or use ed--bleed).
   ============================================================= */
.surface-dark,
.surface-burgundy,
.surface-sage { position: relative; }

.surface-dark    { background: var(--bg-dark); color: var(--cream-light); }
.surface-burgundy { background: var(--bg-burgundy); color: var(--cream-light); }
.surface-sage    { background: var(--bg-sage); color: var(--cream-light); }

/* Text/role colors within dark surfaces */
.surface-dark .ed-eyebrow,
.surface-burgundy .ed-eyebrow,
.surface-sage .ed-eyebrow {
  color: var(--gold-on-dark);
}
.surface-dark .pullquote__mark,
.surface-burgundy .pullquote__mark,
.surface-sage .pullquote__mark {
  color: var(--gold-on-dark);
}
.surface-dark .pullquote__text,
.surface-burgundy .pullquote__text,
.surface-sage .pullquote__text,
.surface-dark .letter__line,
.surface-burgundy .letter__line,
.surface-sage .letter__line,
.surface-dark .six__title,
.surface-burgundy .six__title,
.surface-sage .six__title,
.surface-dark .faq__title,
.surface-burgundy .faq__title,
.surface-sage .faq__title,
.surface-dark .atelier__title,
.surface-burgundy .atelier__title,
.surface-sage .atelier__title,
.surface-dark .house__aside-title,
.surface-burgundy .house__aside-title,
.surface-sage .house__aside-title,
.surface-dark .gift__title,
.surface-burgundy .gift__title,
.surface-sage .gift__title,
.surface-dark .press__quote,
.surface-burgundy .press__quote,
.surface-sage .press__quote,
.surface-dark .note-block__quote,
.surface-burgundy .note-block__quote,
.surface-sage .note-block__quote {
  color: var(--cream-light);
}
.surface-dark .pullquote__attr,
.surface-burgundy .pullquote__attr,
.surface-sage .pullquote__attr,
.surface-dark .letter__attr,
.surface-burgundy .letter__attr,
.surface-sage .letter__attr,
.surface-dark .six__intro,
.surface-burgundy .six__intro,
.surface-sage .six__intro,
.surface-dark .gift__body,
.surface-burgundy .gift__body,
.surface-sage .gift__body,
.surface-dark .press__org,
.surface-burgundy .press__org,
.surface-sage .press__org,
.surface-dark .note-block__sig,
.surface-burgundy .note-block__sig,
.surface-sage .note-block__sig {
  color: var(--muted-on-dark);
}
.surface-dark .note-block__sig strong,
.surface-burgundy .note-block__sig strong,
.surface-sage .note-block__sig strong {
  color: var(--cream-light);
}
/* Lines + borders flip darker so they remain visible without overpowering */
.surface-dark .gift,
.surface-burgundy .gift,
.surface-sage .gift {
  background: transparent;
}
.surface-dark .gifts,
.surface-burgundy .gifts,
.surface-sage .gifts {
  background: var(--line-dark);
  border-color: var(--line-dark);
}
.surface-dark .gift__price-row,
.surface-burgundy .gift__price-row,
.surface-sage .gift__price-row {
  border-top-color: var(--line-dark);
}
.surface-dark .price,
.surface-burgundy .price,
.surface-sage .price {
  color: var(--cream-light);
}
.surface-dark .press__item,
.surface-burgundy .press__item,
.surface-sage .press__item {
  border-top-color: var(--gold-on-dark);
}
.surface-dark .gift__saving,
.surface-burgundy .gift__saving,
.surface-sage .gift__saving {
  color: var(--gold-on-dark);
}
/* Buttons on dark surfaces lift gold + flip hover text */
.surface-dark .btn,
.surface-burgundy .btn,
.surface-sage .btn {
  border-color: var(--gold-on-dark);
  color: var(--gold-on-dark);
}
.surface-dark .btn:hover,
.surface-burgundy .btn:hover,
.surface-sage .btn:hover {
  background: var(--gold-on-dark);
  color: var(--bg-dark);
}

/* House aside ar mark + Arabic glyphs lift to warm gold on dark */
.surface-dark .house__aside-ar,
.surface-burgundy .house__aside-ar,
.surface-sage .house__aside-ar {
  color: var(--gold-on-dark);
}

/* =============================================================
   IMAGE SLOTS — drag-and-drop placeholders for real photography
   ============================================================= */
.img-slot {
  display: block;
  width: 100%;
  background: rgba(74, 63, 45, 0.10);
  border: 1px solid var(--line);
  --image-slot-placeholder-color: var(--muted);
}
.surface-dark .img-slot,
.surface-burgundy .img-slot,
.surface-sage .img-slot {
  background: rgba(255,255,255,0.04);
  border-color: var(--line-dark);
  --image-slot-placeholder-color: var(--muted-on-dark);
}
.img-slot--portrait { aspect-ratio: 4 / 5; }
.img-slot--square   { aspect-ratio: 1 / 1; }
.img-slot--wide     { aspect-ratio: 16 / 9; }
.img-slot--tall     { aspect-ratio: 3 / 4; }
.img-slot--cover    { width: 100%; height: 100%; }

/* Materials origin thumbnails */
.material__img {
  margin-bottom: 16px;
  aspect-ratio: 16 / 10;
  background: rgba(74,63,45,0.08);
  border-bottom: 1px solid var(--line);
}

/* Journal article hero */
.journal__hero {
  aspect-ratio: 4 / 3;
  margin: -48px -40px 8px;
  background: rgba(74,63,45,0.10);
  border-bottom: 1px solid var(--line);
}

/* Gift set product image */
.gift__img {
  aspect-ratio: 5 / 4;
  background: rgba(74,63,45,0.10);
  border: 1px solid var(--line);
  margin-bottom: 4px;
}
.surface-burgundy .gift__img {
  background: rgba(255,255,255,0.05);
  border-color: var(--line-dark);
}

/* Hero background image (subtle) */
.landing__hero-img {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.18;
  width: 100%;
  height: 100%;
}

/* Atelier large image slot */
.atelier__img {
  aspect-ratio: 5 / 6;
  background: rgba(74,63,45,0.10);
  border: 1px solid var(--line);
}
.begin {
  text-align: center;
  padding: clamp(96px, 14vw, 180px) 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.begin__word {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(64px, 10vw, 128px);
  color: var(--gold);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.begin__body {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--muted);
  max-width: 44ch;
  line-height: 1.6;
}

/* =============================================================
   ECOMMERCE — featured release, gift sets, press, journal,
   care strip, FAQ, prices
   ============================================================= */

/* Currency / price formatting */
.price {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--cream);
  letter-spacing: 0.04em;
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}
.price--lg {
  font-size: 22px;
}
.price--strike {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: var(--muted);
  margin-right: 10px;
}

/* ----- FEATURED RELEASE — slim banner under hero ----- */
.release {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px clamp(24px, 5vw, 64px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
}
@media (max-width: 760px) {
  .release { grid-template-columns: 1fr; text-align: center; gap: 14px; padding: 24px; }
}
.release__eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-family: var(--serif);
  font-weight: 500;
}
.release__line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--cream);
  line-height: 1.4;
}
.release__line strong {
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.release__cta {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-family: var(--serif);
  font-weight: 500;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.release__cta:hover { color: var(--gold-soft); border-bottom-color: var(--gold-soft); }
@media (max-width: 760px) { .release__cta { justify-self: center; } }

/* Six grid — add price line */
.six__item-price {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 0.06em;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* ----- GIFT SETS — three product cards ----- */
.gifts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 900px) { .gifts { grid-template-columns: 1fr; } }
.gift {
  background: var(--bg);
  padding: 56px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left;
}
.gift__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gift__title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 36px;
  color: var(--cream);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1;
}
.gift__nums {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--serif);
  color: var(--gold);
  font-size: 15px;
  letter-spacing: 0.02em;
}
.gift__nums span { white-space: nowrap; }
.gift__nums span + span:before { content: '·'; margin-right: 10px; color: var(--muted); }
.gift__body {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--muted);
  line-height: 1.65;
  flex: 1;
}
.gift__price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-top: 8px;
}
.gift__saving {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  font-family: var(--serif);
  font-weight: 500;
}

/* ----- PRESS — four columns of quotes ----- */
.press {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}
@media (max-width: 1000px) { .press { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .press { grid-template-columns: 1fr; } }
.press__item {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--gold);
}
.press__quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--cream);
  font-weight: 400;
  text-wrap: pretty;
}
.press__org {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--serif);
  font-weight: 500;
  margin-top: auto;
}

/* ----- JOURNAL — three article cards ----- */
.journal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
@media (max-width: 900px) { .journal { grid-template-columns: 1fr; } }
.journal__item {
  padding: 48px 40px 56px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.journal__item:last-child { border-right: 0; }
@media (max-width: 900px) {
  .journal__item { border-right: 0; }
}
.journal__item:hover { background: rgba(168,134,46,0.05); }
.journal__eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-family: var(--serif);
  font-weight: 500;
}
.journal__title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  line-height: 1.2;
  color: var(--cream);
  font-weight: 400;
  text-wrap: balance;
}
.journal__body {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--muted);
  line-height: 1.6;
}
.journal__meta {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-dim);
  font-family: var(--serif);
  font-weight: 500;
  margin-top: auto;
}
.journal__read {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-family: var(--serif);
  font-weight: 500;
  align-self: flex-start;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
}

/* ----- CARE / SHIPPING / RETURNS — 4-column trust strip ----- */
.care {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 900px) { .care { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .care { grid-template-columns: 1fr; } }
.care__cell {
  background: var(--bg);
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  align-items: center;
}
.care__head {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-family: var(--serif);
  font-weight: 500;
}
.care__title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--cream);
  line-height: 1.25;
  text-wrap: balance;
  font-weight: 400;
}
.care__body {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 28ch;
}

/* ----- FAQ — definition list with hairlines ----- */
.faq__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 64px;
  text-align: center;
}
.faq__title {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(32px, 4.5vw, 52px);
  color: var(--cream);
  font-weight: 400;
  line-height: 1.15;
}
.faq {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.faq__row {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: baseline;
  padding: 40px 0;
  border-top: 1px solid var(--line);
}
.faq__row:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 760px) {
  .faq__row { grid-template-columns: 1fr; gap: 14px; padding: 32px 0; }
}
.faq__q {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--cream);
  font-weight: 400;
  line-height: 1.3;
  text-wrap: balance;
}
.faq__a {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--muted);
  line-height: 1.7;
  text-wrap: pretty;
}

/* ----- STOCKISTS — small editorial list ----- */
.stockists {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 48px;
}
@media (max-width: 900px) { .stockists { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .stockists { grid-template-columns: 1fr; } }
.stockist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.stockist__city {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-family: var(--serif);
  font-weight: 500;
}
.stockist__name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--cream);
  font-weight: 400;
}
.stockist__addr {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

/* ----- Nav cart link ----- */
.nav__cart {
  justify-self: end;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  font-family: var(--serif);
  background: none;
  border: 0;
  padding: 8px 0;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
  text-decoration: none;
}
.nav__cart:hover { color: var(--gold); }
.nav__cart-count { color: var(--gold); margin-left: 6px; font-variant-numeric: tabular-nums; }

/* Perfume reveal — price treatment in info column */
.reveal-info__price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 24px;
  gap: 24px;
}
.reveal-info__price {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.reveal-info__size {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  font-family: var(--serif);
}