/* ───────────────────────────────────────────────────────────────────────────
   Caviar Maison — Homepage + shared header/footer
   Measurements ported from pages-maison.jsx (Maison direction).
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Content container ────────────────────────────────────────────────────────
   Homepage section content caps at the design column; shared chrome (announce,
   header/nav, footer) lives in layout.css. */
.m-collection > .m-sechead,
.m-collection__grid,
.m-ritual__grid,
.m-membership__head,
.m-membership__grid {
  max-width: var(--content-max);
  margin-inline: auto;
}

/* ── Hero (MHero) — full-bleed editorial macro ───────────────────────────────*/
.m-hero { background: var(--bg); position: relative; }
.m-hero--bleed {
  min-height: 660px; display: flex; align-items: center; overflow: hidden;
  background-color: var(--bg); background-size: cover; background-position: center;
}
/* Darkening scrim — heavier over the text (left) side, with a soft floor so the
   headline and CTAs stay legible over any photo. */
.m-hero--bleed::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(8,7,5,.94) 0%, rgba(8,7,5,.78) 34%, rgba(8,7,5,.2) 66%, rgba(8,7,5,.5) 100%),
    linear-gradient(0deg, rgba(8,7,5,.72), rgba(8,7,5,0) 42%);
}
.m-hero__inner {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--content-max); margin-inline: auto; padding: 72px var(--gutter);
}
.m-hero__eyebrow { margin-bottom: 24px; }
.m-hero__title {
  font-family: var(--serif); font-weight: 400; color: var(--ivory);
  font-size: clamp(40px, 5vw, 68px); line-height: 1.06; letter-spacing: -.01em; margin: 0;
}
.m-hero__lede {
  font-family: var(--serif); font-style: italic; color: var(--mute);
  font-size: 22px; line-height: 1.6; margin-top: 34px; max-width: 440px; font-weight: 300;
}
.m-hero__cta { display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; }

/* ── Marquee (MMarquee) ───────────────────────────────────────────────────────*/
.m-marquee {
  background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 22px 0; overflow: hidden; white-space: nowrap;
  font-family: var(--serif); font-size: 22px; color: var(--gold-light); letter-spacing: .32em;
}
.m-marquee__track { display: inline-flex; align-items: center; will-change: transform; animation: m-marquee 38s linear infinite; }
.m-marquee__item { padding: 0 36px; }
.m-marquee__sep { color: var(--gold); margin: 0 8px; }
@keyframes m-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .m-marquee__track { animation: none; } }

/* ── Collection (MCollection) ─────────────────────────────────────────────────*/
.m-collection { background: var(--bg); padding: 120px var(--gutter); }
.m-collection__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }

/* ── The Ritual (MRitual) ─────────────────────────────────────────────────────*/
.m-ritual { background: var(--bg-2); padding: 120px var(--gutter); }
.m-ritual__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: center; }
.m-ritual__media img { width: 100%; height: 620px; object-fit: cover; background: var(--bg-3); }
.m-ritual__title { font-family: var(--serif); font-weight: 400; font-size: 60px; color: var(--ivory); margin: 14px 0 26px; line-height: 1.02; }
.m-ritual__body { font-family: var(--serif); font-size: 19px; line-height: 1.65; color: var(--ivory); font-weight: 300; max-width: 460px; }
.m-ritual__steps { margin-top: 36px; }
.m-ritual__step { display: flex; gap: 22px; padding: 14px 0; border-top: 1px solid var(--line); }
.m-ritual__step-n { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--gold-light); width: 36px; flex: none; }
.m-ritual__step-t { font-family: var(--sans); font-size: 14px; color: var(--ivory); line-height: 1.6; }

/* Concierge block moved to components.css (shared across homepage, shop, cart…). */

/* ── Membership (MMembership) ─────────────────────────────────────────────────*/
.m-membership { background: var(--bg-2); padding: 120px var(--gutter); }
.m-membership__head { text-align: center; margin-bottom: 64px; }
.m-membership__title { font-family: var(--serif); font-weight: 400; font-size: 60px; color: var(--ivory); margin: 14px 0; }
.m-membership__sub { font-family: var(--serif); font-size: 17px; color: var(--mute); max-width: 560px; margin: 0 auto; font-style: italic; }
.m-membership__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.m-tier {
  background: var(--bg); color: var(--ivory); border: 1px solid var(--line);
  padding: 44px 36px; font-family: var(--sans); position: relative; min-height: 360px;
}
.m-tier--featured { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.m-tier__roman { font-family: var(--serif); font-size: var(--label); letter-spacing: .4em; text-transform: uppercase; opacity: .7; }
.m-tier__name { font-family: var(--serif); font-size: 44px; font-weight: 500; margin-top: 8px; font-style: italic; }
.m-tier__min { font-family: var(--sans); font-size: var(--meta); letter-spacing: .18em; text-transform: uppercase; margin-top: 6px; opacity: .7; }
.m-tier__rule { height: 1px; background: var(--line); margin: 24px 0; }
.m-tier--featured .m-tier__rule { background: rgba(0,0,0,.18); }
.m-tier__perks { display: flex; flex-direction: column; gap: 12px; }
.m-tier__perk { display: flex; gap: 10px; font-size: 13px; line-height: 1.5; }
.m-tier__perk .m-icon { margin-top: 2px; }

/* Footer styles live in layout.css (shared across all templates). */