/* ============================================================
   RestartME, Layout primitives
   ============================================================ */

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

/* Vertical section rhythm, generous by default (non-compact) */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* Dark section wrapper (used sparingly, e.g. footer-adjacent) */
.section--dark {
  background: var(--ink);
  color: var(--bone);
}
.section--navy { background: var(--navy); color: var(--bone); }
.section--tint { background: color-mix(in srgb, var(--sky-soft) 55%, transparent); }
/* Elevated: a soft frosted band so the silk still glows faintly through */
.section--elevated { background: color-mix(in srgb, var(--warm-white) 78%, transparent); }
/* Luminous: transparent over the silk with a soft sky bloom rising from top */
.section--luminous {
  position: relative;
  background:
    radial-gradient(120% 120% at 50% -10%, color-mix(in srgb, var(--sky-soft) 70%, transparent) 0%, transparent 58%);
}

/* Stacks & clusters */
.stack > * + * { margin-top: var(--space-md); }
.stack-lg > * + * { margin-top: var(--space-lg); }
.stack-xl > * + * { margin-top: var(--space-xl); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

/* Grids */
.grid { display: grid; gap: var(--gutter); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }

/* Split (asymmetric editorial) */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.split--editorial { grid-template-columns: 1.15fr 0.85fr; }
.split--narrow-left { grid-template-columns: 0.8fr 1.2fr; }

/* Section heading block */
.section-head { max-width: 720px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: var(--space-md); }
.section-head h2 { margin-bottom: var(--space-md); }

/* Spacing helpers */
.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.center { text-align: center; }

/* ---- Scroll-reveal (used site-wide) ---------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 90ms; }
.reveal[data-delay="2"] { transition-delay: 180ms; }
.reveal[data-delay="3"] { transition-delay: 270ms; }
.reveal[data-delay="4"] { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- SPA page transition --------------------------------- */
#app { transition: opacity 160ms var(--ease-out); }
#app.is-leaving { opacity: 0; }

/* Page hero clears the fixed header */
.page-hero { padding-top: clamp(7rem, 6rem + 4vw, 10rem); }

/* Responsive collapse for grids/splits lives in responsive.css */