/* ===================================================================
   NOVA · layout.css
   Container, sections, grid scaffolding
   =================================================================== */

.nova-main {
  position: relative;
  z-index: var(--z-content);
}

/* ─── Section base ────────────────────────────────────────────────── */
.about,
.philosophy,
.live,
.lifestyle,
.gallery {
  position: relative;
  padding-block: var(--section-spacing);
  overflow: hidden;
}

/* Section index marker (rotated number in corner) */
.section__index {
  position: absolute;
  top: var(--space-7);
  right: var(--container-padding);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  z-index: 2;
}

.section__index span {
  display: block;
}

.section__index--light {
  color: var(--color-bone-faint);
}

/* Container utility */
.about__container,
.philosophy__container,
.live__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  position: relative;
  z-index: 2;
}

/* ─── Section title (shared) ─────────────────────────────────────── */
.section__title {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}

.section__title em {
  font-style: italic;
  color: var(--text-accent);
  font-weight: 300;
}

/* ─── Section background variants ────────────────────────────────── */
.about      { background-color: var(--color-graphite); }
.philosophy { background-color: var(--color-charcoal); }
.live       { background-color: var(--color-graphite); }
.lifestyle  { background-color: var(--color-charcoal); }
.gallery    { background-color: var(--color-graphite); }
/* .cta intentionally NOT set here — it owns its own themed background
   via [data-theme] in sections.css */

/* Subtle gradient transition between sections (cinematic stitching) */
.about::before,
.philosophy::before,
.live::before,
.lifestyle::before,
.gallery::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold-faint) 50%, transparent);
  z-index: 1;
}