/* The compact ledger at the end of Early Days. */

.ledger {
  padding: 10vh 0 16vh;
  border-top: 1px solid var(--rule);
}

.ledger-head {
  row-gap: 16px;
  margin-bottom: 6vh;
}
.ledger-head .label { grid-column: 1 / span 6; }
.ledger-head h2 {
  grid-column: 1 / span 8;
  margin: 0;
  font-size: var(--step-3);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.ledger-head p {
  grid-column: 1 / span 5;
  max-width: 46ch;
  color: var(--muted);
}

.ledger-list {
  list-style: none;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.ledger-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 var(--gap);
  align-items: start;
  padding: 24px 0;
  border-top: 1px solid var(--rule);
}
.ledger-row:last-child { border-bottom: 1px solid var(--rule); }

.ledger-year {
  grid-column: 1 / span 2;
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.ledger-copy { grid-column: 3 / span 6; }
.ledger-copy h3 {
  margin: 0 0 8px;
  font-size: var(--step-1);
  font-weight: 300;
  letter-spacing: -0.01em;
}
.ledger-copy p {
  max-width: 52ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

.ledger-stack {
  grid-column: 10 / span 3;
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--stack-size);
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}

@media (max-width: 860px) {
  .ledger-head .label,
  .ledger-head h2,
  .ledger-head p { grid-column: 1 / -1; }

  .ledger-year,
  .ledger-copy,
  .ledger-stack { grid-column: 1 / -1; text-align: left; }
  .ledger-year { margin-bottom: 6px; }
  .ledger-stack { margin-top: 10px; }
}

/* ------------------------------------------------------------------
   Early Days: sticky horizontal carousel for the three drawn systems.
   The section supplies the scroll distance; the sticky viewport holds
   the frame; the track moves horizontally.
   ------------------------------------------------------------------ */

.early-carousel {
  position: relative;
  /* One viewport for the sticky frame, plus one pixel of scroll for every
     pixel the cards travel. carousel.js measures that distance from the
     card row, so the first card starts at the left edge and the last card
     ends at the right edge at every viewport width. */
  height: calc(100svh - var(--header-h) + var(--carousel-distance, 0px));
  border-top: 1px solid var(--rule);
}

.early-sticky {
  position: sticky;
  top: var(--header-h);
  height: calc(100svh - var(--header-h));
  overflow: hidden;
}

.early-track {
  display: flex;
  height: 100%;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.early-panel {
  flex: 0 0 min(70vw, 896px);
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.8vh, 22px);
  padding: 3vh var(--gutter) 4vh;
}

.early-media {
  width: 100%;
}
.early-media .iso-figure { padding: clamp(8px, 1.2vw, 16px); }

.early-copy {
  width: min(54ch, 100%);
  text-align: left;
}
.early-copy .label { margin-bottom: 0; }
.early-copy .chapter-title { margin: 4px 0 8px; }
.early-copy .chapter-body { max-width: 50ch; }
.early-copy .receipt { margin-top: 12px; padding-top: 10px; }
.early-copy .chapter-caption { margin-top: 10px; }

@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  .early-carousel { height: auto; }
  .early-sticky { position: static; height: auto; overflow: visible; }
  .early-track {
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    transform: none !important;
  }
  .early-panel {
    flex: 0 0 100%;
    width: auto;
    height: auto;
    scroll-snap-align: start;
    padding: 8vh var(--gutter);
  }
  .early-media { width: 100%; }
  .early-copy { width: 100%; }
}