/* layout.css — page structure, sections, grid */

html { scroll-behavior: smooth; }

body {
  overflow-x: hidden;
}

.l-container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.l-container--prose {
  max-width: var(--max-w-prose);
}

section {
  position: relative;
  padding-block: var(--sp-9);
}

/* Cream sections break the charcoal flow */
section.is-cream {
  background: var(--color-ivory);
  color: var(--color-charcoal);
}
section.is-cream .eyebrow { color: var(--color-gold-soft); }

section.is-charcoal {
  background: var(--color-charcoal);
  color: var(--color-ivory);
}

/* Section dividers — thin gold hairlines */
.l-divider {
  width: 100%;
  max-width: 120px;
  height: 1px;
  background: var(--color-gold);
  margin: var(--sp-5) auto;
  opacity: 0.7;
}

/* Hero layout — full viewport */
#hero-section {
  padding: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}

/* About layout — asymmetric 2 col on desktop */
#about-section .l-about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
  align-items: center;
}

@media (min-width: 900px) {
  #about-section .l-about-grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--sp-8);
  }
}

@media (min-width: 1200px) {
  #about-section .l-about-grid {
    gap: var(--sp-9);
  }
}

/* Scroll fade-in utility */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}