/* ==========================================================================
   LAYOUT
   ==========================================================================
   Structural primitives: containers, section rhythm, and grid utilities.
   These control *where things sit*, never how they look (color/type/
   shadow belong in components.css). Every page is built by composing
   .section + a .container variant + content.
   ========================================================================== */

/* ---- Containers ----------------------------------------------------------
   Four widths, chosen deliberately per content type — see tokens.css
   for rationale. Default padding uses the gutter tokens so content
   never touches the viewport edge. */

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


@media (min-width: 768px) {
  .container {
    padding-inline: var(--container-gutter-lg);
  }
}

.container--reading { max-width: calc(var(--container-reading) + (var(--container-gutter-lg) * 2)); }
.container--narrow  { max-width: calc(var(--container-narrow)  + (var(--container-gutter-lg) * 2)); }
.container--content { max-width: calc(var(--container-content) + (var(--container-gutter-lg) * 2)); }
.container--wide    { max-width: calc(var(--container-wide)    + (var(--container-gutter-lg) * 2)); }

/* ---- Section -------------------------------------------------------------
   The fundamental vertical rhythm unit of the site. Every distinct
   "screen" of content on a page is a .section. Background variants are
   the *only* thing that visually separates sections — never a hard
   rule or shadow, to preserve the "continuous scroll" feeling from the
   Design Language doc. */

.section {
  padding-block: var(--space-section-y-sm);
}

@media (max-width: 767px) {
  .section {
    padding-block: var(--space-9);
  }
}

@media (min-width: 1024px) {
  .section {
    padding-block: var(--space-section-y);
  }
}

.section--tight {
  padding-block: var(--space-7);
}

.section--paper   { background-color: #3d1a39; }
.section--plum    { background-color: #2c1732; }
.section--plum2    { background-color: #241228; }
.section--deep    { background-color: #290924; }
.section--blush   { background-color: #d5c4c4; }
.section--slate   { background-color: #2b1538; }
/* ---- Stack -----------------------------------------------------------
   Vertical rhythm utility for flow content within a section — applies
   consistent spacing between direct children without needing margin
   utilities scattered through markup. */

.stack > * + * {
  margin-top: var(--space-content-gap);
}

.stack--sm > * + * { margin-top: var(--space-3); }
.stack--lg > * + * { margin-top: var(--space-7); }

/* ---- Grid ----------------------------------------------------------------
   A minimal, restrained grid utility for the cases that need genuine
   multi-column layout (service cards, footer columns). Prose content
   should almost never use this — it belongs in a single reading column. */

.grid {
  display: grid;
  gap: var(--space-6);
}

@media (max-width: 767px) {
  .grid {
    gap: var(--space-4);
  }
}

.grid--2 { grid-template-columns: repeat(1, 1fr); }
.grid--3 { grid-template-columns: repeat(1, 1fr); }
.grid--4 { grid-template-columns: repeat(1, 1fr); }

@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Flex row utility ------------------------------------------------
   For nav items, button groups, meta rows — small horizontal groupings
   that don't need full grid semantics. */

.row {
  display: flex;
  align-items: center;
  gap: var(--space-inline-gap);
}

.row--wrap {
  flex-wrap: wrap;
}

.row--between {
  justify-content: space-between;
}

/* ---- Page shell ----------------------------------------------------------
   Ensures the footer stays pinned to the bottom on short pages without
   using JS, and gives every page one consistent top-level structure. */

.page-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-shell__main {
  flex: 1 0 auto;
}

/* ---- Finale: extra exhale before the footer ----------------------------
   For the final content section on any page — deliberately more bottom
   padding than the standard .section rhythm, so the page's last breath
   isn't cut short right before the footer begins. */

.section--finale {
  padding-bottom: var(--space-11);
}

@media (max-width: 767px) {
  .section--finale {
    padding-bottom: var(--space-9);
  }
}



/* v2: dark, rich background for 1-2 high-impact moments per page.
   Requires light text — this block sets sensible defaults for
   headings/body/whisper/eyebrow so pages don't need to override
   color per-element every time they use this background. */



.section--plum .lead {
  color: var(--color-paper);
}

.section--plum .whisper {
  color: var(--color-blush); /* warm light accent, distinct from body text color */
}

.section--plum .eyebrow {
  color: var(--color-gold); /* passes AA on plum (5.04:1) — the one context where gold-as-text is safe */
}

.section--plum a:not(.btn) {
  color: var(--color-gold-tint);
  text-decoration-color: var(--color-gold);
}

.section--plum a:not(.btn):hover {
  color: var(--color-paper);
}