/* =========================================================================
   LAYOUTS.CSS — Page templates
   --------------------------------------------------------------------------
   Every page template wraps a single US-Letter .page. Tokens from
   design-tokens.css drive all geometry. Components.css provides the blocks.
   ========================================================================= */

/* ---------- Page shell --------------------------------------------------- */

.page {
  width: var(--page-width);
  height: var(--page-height);
  background: var(--color-surface);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2pt 8pt rgba(10,22,40,0.08), 0 0 0 0.5pt var(--color-rule);
  page-break-after: always;
  margin: 0 auto 0.3in auto;
}
.page__body {
  position: absolute;
  top: var(--page-margin-top);
  bottom: var(--page-margin-bottom);
  left: var(--page-margin-inside);
  right: var(--page-margin-outside);
}
/* Odd (right) pages in a real spread would flip inside/outside.
   For the showcase we present as right-page recto. */
.page--verso .page__body {
  left: var(--page-margin-outside);
  right: var(--page-margin-inside);
}

/* ---------- L1. Cover ---------------------------------------------------- */

.layout-cover { padding: 0; }
.layout-cover .page__body { position: absolute; inset: 0; padding: 0; top:0; bottom:0; left:0; right:0; }

/* ---------- L2. Inside cover / credits ---------------------------------- */

.layout-inside-cover .page__body { display: flex; flex-direction: column; }

/* ---------- L3. Table of contents --------------------------------------- */

.layout-toc .page__body { display: flex; flex-direction: column; }

/* ---------- L4. Executive summary --------------------------------------- */

.layout-exec-summary .page__body > * + * { margin-top: 0; }

/* ---------- L5. Part opener (full-bleed two-column) --------------------- */

.layout-part-opener { padding: 0; }
.layout-part-opener .page__body { position: absolute; inset: 0; padding: 0; top:0;bottom:0;left:0;right:0; }

/* ---------- L6. Chapter opener ------------------------------------------ */

.layout-chapter-opener .page__body { padding-top: 0; }

/* ---------- L7. Chapter body -------------------------------------------- */

.layout-chapter-body .page__body { }

/* ---------- L8. Appendix page ------------------------------------------- */

.layout-appendix .page__body { font-size: 9.5pt; }
.layout-appendix .chapter__title { font-size: 24pt; }

/* ---------- L9. Back cover ---------------------------------------------- */

.layout-back-cover { padding: 0; }
.layout-back-cover .page__body { position: absolute; inset: 0; padding: 0; top:0;bottom:0;left:0;right:0; }


/* ---------- Running header / footer per layout -------------------------- */

.layout-chapter-body .running-header,
.layout-appendix .running-header {
  left: var(--page-margin-inside);
}
.page--verso .running-header { left: var(--page-margin-outside); right: auto; }

/* ---------- Two-column body --------------------------------------------- */

.two-col { column-count: 2; column-gap: var(--space-6); column-rule: 0.25pt solid var(--color-rule); }
.two-col p { break-inside: avoid-column; }

/* ---------- Figure -------------------------------------------------------- */

.figure { margin: var(--space-5) 0; }
.figure__title {
  font-family: var(--font-mono); font-size: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-primary); font-weight: var(--weight-semibold);
  margin-bottom: var(--space-3);
}
.figure__caption { font-family: var(--font-serif); font-style: italic; font-size: 9.5pt; color: var(--color-ink-muted); margin-top: var(--space-3); max-width: 38em; }
.figure__source  { font-family: var(--font-mono); font-size: 8pt; color: var(--color-ink-subtle); margin-top: var(--space-2); }

/* ---------- Showcase chrome (screen-only wrapper) ----------------------- */

.showcase {
  font-family: var(--font-sans);
  background: var(--color-rule);
  min-height: 100vh;
  padding: 0.6in 0;
}
.showcase__header {
  max-width: var(--page-width);
  margin: 0 auto 0.4in auto;
  padding: 0 0.2in;
  color: var(--color-ink);
}
.showcase__kicker {
  font-family: var(--font-mono); font-size: 10pt;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-ink-subtle);
}
.showcase__title {
  font-family: var(--font-sans); font-weight: var(--weight-bold);
  font-size: 28pt; color: var(--color-primary);
  letter-spacing: var(--tracking-tight);
  margin: 8pt 0 6pt 0;
}
.showcase__sub { font-family: var(--font-serif); font-style: italic; font-size: 13pt; color: var(--color-ink-muted); max-width: 34em; }
.showcase__marker {
  font-family: var(--font-mono); font-size: 8.5pt;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-ink-subtle);
  max-width: var(--page-width); margin: 0 auto;
  padding: 10pt 0.2in 4pt 0.2in;
  display: flex; justify-content: space-between;
  border-top: 0.5pt solid var(--color-rule-strong);
}