/* layout.css — the page frame: centred shell, the three-track ledger grid (rail / body /
   figure-gutter), the oxblood margin rule, and the deliberately uneven section rhythm.
   Chrome (header, footer, buttons) is styled in components.css; here we only place. */

.shell {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--side-pad);
  position: relative;
}

/* Every <section> is full-bleed width (its background reaches both edges); the shell holds
   the 1240px measure. Deliberately varied vertical padding gives the page its breathing. */
.section { position: relative; }
.section--hero      { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(72px, 9vw, 128px); }
.section--problems  { padding-block: clamp(96px, 12vw, 160px); }
.section--method    { padding-block: clamp(64px, 8vw, 112px); }
.section--services  { padding-block: clamp(80px, 10vw, 128px); }
.section--proof     { padding-block: clamp(112px, 13vw, 168px); }
.section--about     { padding-block: clamp(72px, 9vw, 120px); }
.section--cta       { padding-block: clamp(96px, 11vw, 144px); }
.section--work      { padding-block: clamp(80px, 10vw, 128px); }
.section--book      { padding-block: clamp(72px, 9vw, 120px); }

/* ---- The ledger grid: [rail] margin strip · [body] 7-col measure · [gutter] figures ---- */
.ledger {
  display: grid;
  grid-template-columns: [rail] var(--rail-w) [body] minmax(0, 1fr) [gutter] var(--ledger-gutter);
  column-gap: var(--gutter);
  position: relative;
}

/* The margin rule: 1px oxblood at the right edge of the rail, spanning this section's full
   height. Sections abut, so the rule reads as one continuous spine down the page. */
.ledger::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--rail-w);
  width: 1px;
  background: var(--margin-rule);
  pointer-events: none;
}

.ledger__rail {
  grid-column: rail;
  position: relative;
  text-align: right;
  padding-right: 14px;
}
.ledger__num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-meta);
  letter-spacing: 0.06em;
  color: var(--oxblood);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
}
.ledger__body { grid-column: body; min-width: 0; }
.ledger__gutter { grid-column: gutter; min-width: 0; }

/* Prose measure: 62–68ch, offset into the body track. */
.prose { max-width: var(--measure); }
.prose p { color: var(--ink); }
.prose p + p { margin-top: 1.1em; }

/* ---- Tablet: rail shrinks to a 32px number strip; the figure gutter folds under body ---- */
@media (max-width: 1024px) {
  :root { --rail-w: 32px; }
  .ledger {
    grid-template-columns: [rail] var(--rail-w) [body] minmax(0, 1fr);
    column-gap: 16px;
  }
  .ledger__rail { padding-right: 8px; }
  .ledger__gutter {
    grid-column: body;
    margin-top: var(--s-6);
  }
  .ledger__num { font-size: 0.6875rem; }
}

/* ---- Mobile: no rail; margin rule becomes a top hairline progress rule (see components).
   Single column, tighter gutter. ---- */
@media (max-width: 640px) {
  .ledger {
    grid-template-columns: [body] minmax(0, 1fr);
    column-gap: 0;
  }
  .ledger::before { display: none; }
  .ledger__rail {
    grid-column: body;
    text-align: left;
    padding-right: 0;
    margin-bottom: var(--s-2);
  }
  .ledger__num { color: var(--oxblood); }
}