/* ------------------------------- Sections ------------------------------- */
section { position: relative; padding: clamp(70px, 13vh, 170px) clamp(18px, 5vw, 80px); }
.wrap { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }

/* Sections are translucent glass panes over the ambient color field.
   Each keeps its theme identity but lets light bleed through. */
.theme-dark, .theme-plum, .theme-cream, .theme-blush {
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* Translucent themes so the bg video reads through */
.theme-dark   { background: rgba(15, 10, 24, 0.28);   color: var(--text-on-dark); }
.theme-plum   { background: rgba(36, 19, 51, 0.26);   color: var(--text-on-dark); }
.theme-cream  { background: rgba(251, 249, 245, 0.42); color: var(--text-on-light); border-top-color: var(--glass-edge-light); }
.theme-blush  { background: rgba(244, 231, 230, 0.4);  color: var(--text-on-light); border-top-color: var(--glass-edge-light); }

/* Fallback: keep translucent so the test video still shows without blur */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .theme-dark  { background: rgba(15, 10, 24, 0.55); }
  .theme-plum  { background: rgba(36, 19, 51, 0.55); }
  .theme-cream { background: rgba(251, 249, 245, 0.58); }
  .theme-blush { background: rgba(244, 231, 230, 0.58); }
}

/* Soft continuous joins between adjacent dark glass panes.
   Masks fade the whole pane (fill + backdrop-filter) into the ambient field
   so ink→plum still shifts color without a hard seam. Cream/blush joins stay edged. */
.theme-dark:has(+ .theme-dark),
.theme-dark:has(+ .theme-plum),
.theme-plum:has(+ .theme-dark),
.theme-plum:has(+ .theme-plum) {
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 calc(100% - var(--section-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 calc(100% - var(--section-fade)),
    transparent 100%
  );
}

.theme-dark + .theme-dark,
.theme-dark + .theme-plum,
.theme-plum + .theme-dark,
.theme-plum + .theme-plum {
  border-top: none;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 var(--section-fade),
    #000 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 var(--section-fade),
    #000 100%
  );
}

/* Pane both preceded and followed by dark/plum: fade both ends */
.theme-dark + .theme-dark:has(+ .theme-dark),
.theme-dark + .theme-dark:has(+ .theme-plum),
.theme-dark + .theme-plum:has(+ .theme-dark),
.theme-dark + .theme-plum:has(+ .theme-plum),
.theme-plum + .theme-dark:has(+ .theme-dark),
.theme-plum + .theme-dark:has(+ .theme-plum),
.theme-plum + .theme-plum:has(+ .theme-dark),
.theme-plum + .theme-plum:has(+ .theme-plum) {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 var(--section-fade),
    #000 calc(100% - var(--section-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 var(--section-fade),
    #000 calc(100% - var(--section-fade)),
    transparent 100%
  );
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--gold); }
.theme-cream .eyebrow, .theme-blush .eyebrow { color: #9c7c14; }
.theme-cream .eyebrow::before, .theme-blush .eyebrow::before { background: #9c7c14; }
@media (min-width: 561px) {
  .eyebrow { gap: 14px; font-size: 12px; letter-spacing: 0.35em; margin-bottom: 22px; }
  .eyebrow::before { width: 42px; }
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.08; }

.heading-xl { font-size: clamp(38px, 7vw, 96px); letter-spacing: -0.01em; }
.heading-lg { font-size: clamp(30px, 4.6vw, 64px); margin-bottom: 18px; }
.lede { font-size: clamp(16px, 1.6vw, 21px); max-width: 620px; }
.theme-dark .lede, .theme-plum .lede { color: var(--text-dim-dark); }
.theme-cream .lede, .theme-blush .lede { color: var(--text-dim-light); }
@media (min-width: 561px) {
  .heading-lg { margin-bottom: 20px; }
}

.gold-italic { font-style: italic; color: var(--gold); }
.theme-cream .gold-italic, .theme-blush .gold-italic { color: #b8901c; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.12s; }
.reveal[data-delay="2"] { transition-delay: 0.24s; }
.reveal[data-delay="3"] { transition-delay: 0.36s; }
@media (min-width: 561px) {
  .reveal { transform: translateY(34px); }
}