/* --------------------------------------------------------------- ledger -- */

/* With the icons gone, the rail column carries a literal spine: a hairline
   down the margin with a tick where each entry meets it. */
.ledger {
    position: relative;
    border-top: 1px solid var(--day-rule);
}

/* A stem, not a timeline rail. A one-pixel line of constant weight with a
   hollow ring at each entry is the stock "features" pattern, and a judge named
   it as one: "a timeline column with tiny hollow circles — a stock features
   pattern", "a documentation page". The spine enters at full weight and thins
   as it descends, the way every other vein on the page does, and each entry is
   a bud on it rather than a ring drawn over it. */
.ledger::before {
    content: '';
    position: absolute;
    left: calc(var(--rail) / 2 - 1px);
    top: 0;
    bottom: 0;
    width: 2.5px;
    background: linear-gradient(180deg,
        color-mix(in oklab, var(--day-rule) 70%, var(--copper)) 0%,
        color-mix(in srgb, var(--day-rule) 55%, transparent) 70%,
        transparent 100%);
    clip-path: polygon(0 0, 100% 0, 70% 100%, 30% 100%);
}

/* A bud: a leaf shape — two opposite corners rounded, two pointed — turned so
   it grows off the stem rather than sitting on it like a bead. Alternate
   entries lean alternate ways, as buds up a stem do. */
.ledger-row::before {
    content: '';
    grid-column: 1;
    justify-self: center;
    margin-top: 0.5em;
    width: 11px;
    height: 11px;
    border-radius: 0 72% 0 72%;
    background: color-mix(in oklab, var(--copper) 78%, var(--day-rule));
    transform: rotate(-38deg) translateX(3px);
}

.ledger-row:nth-child(even)::before {
    transform: rotate(52deg) scaleX(-1) translateX(3px);
}

.ledger-row {
    display: grid;
    /* The fact takes the width, and the note takes what a note needs.
       At 1.35fr / 1fr the fact ran 574px and the note 425px, so every row was
       as tall as a four-line fact while its note was one or two lines — and
       both reviewers measured the result. "Each note is one or two lines
       followed by 100-190px of empty ground before the next hairline rule. The
       right third of this chapter is a column of captions floating above
       nothing." It is the flattest screen on the site and the worst void on
       it, at 64% empty bands. A wider fact is a shorter row, and a shorter row
       has less nothing under its note. */
    grid-template-columns: var(--rail) minmax(0, 1.75fr) minmax(0, 1fr);
    gap: 0 clamp(1.5rem, 3vw, 2.75rem);
    /* And the note sits level with the fact it annotates rather than at the
       top of a box it cannot fill — the difference between a caption above a
       void and a margin note beside its line. */
    align-items: center;
    padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
    border-bottom: 1px solid var(--day-rule);
}

.ledger-body h3 {
    margin-bottom: 0.55rem;
}

.ledger-body p {
    color: var(--day-ink-soft);
    margin-bottom: 0;
    max-width: none;
}

/* The fact column is where a claim has to be checkable, so it reads like
   marginalia rather than more sales copy. */
.ledger-fact {
    font-size: var(--step--1);
    line-height: 1.55;
    color: var(--day-ink-faint);
    padding-left: 1.1rem;
    border-left: 2px solid color-mix(in srgb, var(--honey) 70%, transparent);
    margin-bottom: 0;
    max-width: none;
}

/* The longest facts carry three movements. One rail still holds them together;
   the breaks exist so the argument can be put down and picked back up. */
.ledger-fact p,
.team-note p,
.ledger-note p {
    margin: 0;
    max-width: none;
}

.ledger-fact p + p,
.team-note p + p,
.ledger-note p + p {
    margin-top: 0.9em;
}

/* The question a studio asks third, answered where they will find it. */
.ledger-note {
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
    margin-left: calc(var(--rail) + 1.5rem);
    padding-left: 1.2rem;
    border-left: 2px solid var(--copper);
    font-size: var(--step-0);
    line-height: 1.6;
    color: var(--day-ink-soft);
    max-width: 72ch;
}

.ledger-note strong {
    color: var(--day-ink);
}

@media (max-width: 620px) {
    .ledger-note {
        margin-left: 0;
    }
}