/* mapemedia — multi-page site layout primitives.
 * Builds on colors_and_type.css. Honors the system: sharp edges,
 * band alternation, hairlines, no shadows, no gradient backgrounds.
 */

*{ box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font-sans); font-weight: 300; }

/* ---- layout primitives ---- */
.container { max-width: var(--max-content); margin: 0 auto; }
.band { padding: var(--space-section) var(--gutter-desktop); }
.band.dark   { background: var(--surface-dark); color: #fff; }
.band.deep   { background: var(--surface-dark-deep); padding: 32px 0; overflow: hidden; }
.band.soft   { background: var(--surface-soft); }
.band.canvas { background: var(--canvas); }

/* ---- eyebrow ---- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-sans); font-size: 10px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--primary);
}
.eyebrow::before { content: ""; display: block; width: 28px; height: 1px; background: var(--primary); flex-shrink: 0; }

/* ---- section heading pattern ---- */
.sec-head { max-width: 760px; display: flex; flex-direction: column; gap: 18px; margin-bottom: 56px; }
.sec-head.center { margin-left: auto; margin-right: auto; align-items: center; text-align: center; }
.sec-head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(32px,4vw,48px); line-height: 1.1; letter-spacing: 0; margin: 0; }
.sec-head h2 em { font-style: italic; color: var(--primary); }
.sec-head p { font-family: var(--font-sans); font-weight: 300; font-size: 15px; line-height: 1.75; color: var(--muted); max-width: 600px; margin: 0; }
.band.dark .sec-head p { color: rgba(255,255,255,.55); }
.band.dark .sec-head h2 { color: #fff; }

/* ---- reveal animation ---- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ---- marquee ---- */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- page top offset under fixed nav ---- */
.page { padding-top: 0; }

/* ---- image-slot defaults to fit the editorial look ---- */
image-slot { display: block; background: var(--surface-warm-grey); }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .band { padding: var(--space-xl) var(--gutter-mobile); }
}