/* ============================================================
   LAYOUT — Grid, sections, full-bleed, responsive
   ============================================================ */

/* --- Container --- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 80px);
  position: relative;
  z-index: 1;
}

/* --- Section base --- */
section {
  padding-block: var(--section-pad);
  position: relative;
  border-top: var(--rule);
}

section:first-of-type {
  border-top: none;
}

/* --- Blueprint annotations (side margins) --- */
.blueprint-note {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--bone-dim);
  letter-spacing: 0.08em;
  line-height: 1.8;
  opacity: 0.6;
}

@media (min-width: 1100px) {
  .has-annotation {
    display: grid;
    grid-template-columns: 1fr minmax(0, var(--max-w)) 160px;
    gap: 0 40px;
  }
  .has-annotation .container {
    grid-column: 2;
  }
  .has-annotation .annotation {
    grid-column: 3;
    align-self: start;
    padding-top: var(--section-pad);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: rgba(244,237,228,0.35);
    letter-spacing: 0.1em;
    line-height: 2;
    text-transform: uppercase;
    border-left: var(--rule);
    padding-left: 16px;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    height: 300px;
    overflow: hidden;
  }
}

/* --- Two-column editorial grid --- */
.editorial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

@media (max-width: 768px) {
  .editorial-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Three-column card grid --- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

/* --- Full-bleed image container --- */
.full-bleed {
  width: 100vw;
  margin-inline: calc(-1 * clamp(20px, 5vw, 80px));
  position: relative;
  overflow: hidden;
}

/* --- Document pagination footer per section --- */
.section-pagination {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: rgba(244,237,228,0.3);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 80px;
  padding-top: 16px;
  border-top: var(--rule);
}

/* --- Stat block --- */
.stat-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background-color: var(--bone-faint);
  border: var(--rule);
  margin-block: 2rem;
}

.stat-item {
  background-color: var(--navy);
  padding: 20px 24px;
}

.stat-value {
  font-family: var(--font-mono);
  font-size: clamp(1.2rem, 3vw, 2rem);
  color: var(--amber);
  font-weight: 700;
  display: block;
  line-height: 1;
  margin-bottom: 6px;
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--bone-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --- Responsive --- */
@media (max-width: 375px) {
  :root { --section-pad: 48px; }
  .stat-block { grid-template-columns: 1fr 1fr; }
}