/*
 * Teodora Ravelle: THE PLAN. A budget document dressed as a print run: it opens on the row of
 * pull-tabs and a budget sheet ruled off to the four-year total, then one budget sheet per
 * pledge. Each sheet is a sticky poster column (the line you repeat) beside the working: why, what, the ledger, the money bar, the limits.
 * The four sheets alternate their ground: paper, screen, paper, deep paper.
 */

/* ---- The opening: the pull-tabs first, then the budget sheet on ledger paper ------------- */
.tr-planhead {
    padding: var(--s-space-2xl) var(--s-gutter) var(--s-space-3xl);
    background:
        repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--s-ledger) - var(--s-rule)), var(--s-ink-ghost) calc(var(--s-ledger) - var(--s-rule)), var(--s-ink-ghost) var(--s-ledger)),
        var(--s-paper);
    border-bottom: var(--s-rule-heavy) solid var(--s-ink);
}
.tr-planhead__inner {
    max-width: var(--s-max); margin-inline: auto;
    display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s-space-4xl); align-items: center;
}
.tr-planhead__copy { display: grid; gap: var(--s-space-l); align-content: start; }
.tr-planhead .tr-h1 { max-width: var(--s-measure-strip); }

.tr-bsheet {
    position: relative; display: grid; gap: var(--s-space-s);
    padding: var(--s-space-xl) var(--s-space-2xl) var(--s-space-l);
    background: var(--s-paper-deep); border-top: var(--s-rule-heavy) solid var(--s-ink);
    box-shadow: var(--s-shadow-x) var(--s-shadow-y) 0 var(--s-ink);
    transform: rotate(var(--s-tilt-b));
}
.tr-bsheet__title {
    font: var(--s-weight-black) var(--s-size-button)/var(--s-leading-tight) var(--s-font-display);
    text-transform: uppercase; letter-spacing: var(--s-track-wide);
}
.tr-bsheet__sub { font-size: var(--s-size-small); color: var(--s-ink-soft); }
.tr-bsheet__t { width: 100%; border-collapse: collapse; margin-top: var(--s-space-s); font-variant-numeric: tabular-nums; }
.tr-bsheet__t thead th {
    padding-bottom: var(--s-space-xs); border-bottom: var(--s-rule-heavy) solid var(--s-ink); text-align: left;
    font: var(--s-weight-heavy) var(--s-size-label)/var(--s-leading-tight) var(--s-font-display);
    letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-ink-soft);
}
.tr-bsheet__t tbody th, .tr-bsheet__t tbody td { padding-block: var(--s-space-xs); border-bottom: var(--s-rule) dashed var(--s-ink-faint); vertical-align: bottom; }
.tr-bsheet__t tbody th { width: 100%; text-align: left; font-weight: var(--s-weight-regular); }
.tr-bsheet__t tbody th a {
    display: inline-flex; align-items: center; gap: var(--s-space-s); min-height: var(--s-tap);
    font: var(--s-weight-black) var(--s-size-button)/var(--s-leading-tight) var(--s-font-display);
    text-transform: uppercase; letter-spacing: var(--s-track-label); color: var(--s-ink); text-decoration: none;
}
.tr-bsheet__t tbody th a:hover .tr-bsheet__n { transform: translateX(var(--s-hover-nudge)); }
.tr-bsheet__n { display: inline-block; min-width: 2ch; color: var(--s-cerise-ink); transition: transform var(--s-dur-fast) var(--s-ease); }
/* One bar per pledge, printed as a halftone screen and scaled to its four-year cost. */
.tr-bsheet__bar {
    display: block; height: var(--s-space-s); width: calc(var(--tr-share) * 1%);
    background: radial-gradient(circle, var(--s-cerise) var(--s-dot), transparent calc(var(--s-dot) + 1%)) 0 0 / var(--s-dot-cell) var(--s-dot-cell), var(--s-screen);
    box-shadow: inset 0 0 0 var(--s-rule) var(--s-cerise);
    transform-origin: left center;
}
.tr-motion .tr-bsheet__bar { transform: scaleX(0); transition: transform var(--s-dur-slow) var(--s-ease-drop); }
.tr-motion .tr-bsheet.is-in .tr-bsheet__bar { transform: none; }
.tr-motion .tr-bsheet.is-in tr:nth-child(2) .tr-bsheet__bar { transition-delay: var(--s-stagger); }
.tr-motion .tr-bsheet.is-in tr:nth-child(3) .tr-bsheet__bar { transition-delay: calc(var(--s-stagger) * 2); }
.tr-motion .tr-bsheet.is-in tr:nth-child(4) .tr-bsheet__bar { transition-delay: calc(var(--s-stagger) * 3); }
.tr-bsheet__fig { text-align: right; white-space: nowrap; padding-left: var(--s-space-l); font: var(--s-weight-black) var(--s-size-button)/var(--s-leading-solid) var(--s-font-display); }
.tr-bsheet__t thead th.tr-bsheet__fig { text-align: right; }
/* The total, ruled off twice like an accountant's sheet. */
.tr-bsheet__t tfoot th, .tr-bsheet__t tfoot td { padding-top: var(--s-space-l); border-top: calc(var(--s-rule) * 3) double var(--s-ink); vertical-align: bottom; }
.tr-bsheet__t tfoot th {
    text-align: left; font: var(--s-weight-heavy) var(--s-size-label)/var(--s-leading-tight) var(--s-font-display);
    letter-spacing: var(--s-track-label); text-transform: uppercase;
}
.tr-bsheet__total {
    font: var(--s-weight-black) calc(var(--s-size-numeral) * 0.42)/var(--s-leading-solid) var(--s-font-display);
    color: var(--s-cerise-ink); text-box: trim-both cap alphabetic;
}
.tr-bsheet__facts { display: flex; flex-wrap: wrap; gap: var(--s-space-s) var(--s-space-2xl); margin-top: var(--s-space-s); }
.tr-bsheet__facts div { display: flex; align-items: baseline; gap: var(--s-space-xs); }
.tr-bsheet__facts dd { order: -1; font: var(--s-weight-black) var(--s-size-h3)/var(--s-leading-solid) var(--s-font-display); }
.tr-bsheet__facts dt { font: var(--s-weight-heavy) var(--s-size-label)/var(--s-leading-tight) var(--s-font-display); letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-ink-soft); }
.tr-bsheet__note { font-size: var(--s-size-micro); color: var(--s-ink-soft); max-width: var(--s-measure-body); }

/* ---- Pull-tabs: four little posters across the page --------------------------------------- */
.tr-tabs { position: sticky; top: var(--s-nav-h); z-index: var(--s-z-top); background: var(--s-ink); padding: 0 var(--s-gutter); }
.tr-tabs ol { max-width: var(--s-max); margin-inline: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tr-tab {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--s-space-s);
    min-height: var(--s-tap-l); padding: var(--s-space-s) var(--s-space-m);
    color: var(--s-bright); text-decoration: none;
    border-left: var(--s-rule) solid var(--s-ink-rule);
    transition: background-color var(--s-dur-fast) var(--s-ease);
}
.tr-tab:hover { background: var(--s-ink-soft); }
.tr-tab.is-current { background: var(--s-cerise); }
.tr-tab:focus-visible { outline-color: var(--s-focus-on-ink); outline-offset: calc(var(--s-focus-w) * -1); }
.tr-tab__n { grid-row: span 2; font: var(--s-weight-black) var(--s-size-figure)/var(--s-leading-solid) var(--s-font-display); color: var(--s-screen); }
.tr-tab.is-current .tr-tab__n { color: var(--s-ink); }
.tr-tab__t { font: var(--s-weight-black) var(--s-size-button-s)/var(--s-leading-tight) var(--s-font-display); text-transform: uppercase; letter-spacing: var(--s-track-label); }
.tr-tab__c { font-size: var(--s-size-micro); color: var(--s-bright-soft); font-variant-numeric: tabular-nums; }
.tr-tab.is-current .tr-tab__c { color: var(--s-bright); }

/* ---- One budget sheet ------------------------------------------------------------------- */
.tr-budget {
    display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: var(--s-space-4xl);
    padding: var(--s-section) max(var(--s-gutter), calc((100% - var(--s-max)) / 2));
    border-bottom: var(--s-rule-heavy) solid var(--s-ink);
    scroll-margin-top: calc(var(--s-nav-h) + var(--s-tap-l) + var(--s-space-l));
}
.tr-budget--2 { background: radial-gradient(circle, var(--s-screen-dot) var(--s-dot), transparent calc(var(--s-dot) + 1%)) 0 0 / var(--s-dot-cell-l) var(--s-dot-cell-l), var(--s-screen); }
.tr-budget--4 { background: var(--s-paper-deep); }
.tr-budget__poster {
    position: sticky; top: calc(var(--s-nav-h) + var(--s-tap-l) + var(--s-space-2xl)); align-self: start;
    display: grid; gap: var(--s-space-l); justify-items: start;
}
.tr-budget__n {
    font: var(--s-weight-black) var(--s-size-numeral)/var(--s-leading-name) var(--s-font-display);
    color: var(--s-cerise); mix-blend-mode: multiply; text-box: trim-both cap alphabetic;
}
.tr-budget--2 .tr-budget__n { color: var(--s-ink); }
.tr-budget__short { font: var(--s-weight-heavy) var(--s-size-label)/var(--s-leading-tight) var(--s-font-display); letter-spacing: var(--s-track-wide); text-transform: uppercase; color: var(--s-cerise-ink); }
.tr-budget--2 .tr-budget__short { color: var(--s-ink); }
.tr-budget__line {
    font: var(--s-weight-black) var(--s-size-strip)/var(--s-leading-display) var(--s-font-display);
    text-transform: uppercase; letter-spacing: var(--s-track-display);
    text-shadow: var(--s-reg-x) var(--s-reg-y) 0 var(--s-cerise);
}
.tr-budget--2 .tr-budget__line { text-shadow: none; }
.tr-budget__art { width: min(100%, var(--s-strip-art)); }

.tr-budget__body { display: grid; gap: var(--s-space-3xl); align-content: start; }
.tr-budget__problem { font-size: var(--s-size-lede); max-width: var(--s-measure-body); }
.tr-budget__problem::first-letter {
    float: left; margin: var(--s-space-2xs) var(--s-space-s) 0 0;
    font: var(--s-weight-black) var(--s-size-figure)/var(--s-leading-solid) var(--s-font-display); color: var(--s-cerise-ink);
}
.tr-steps { display: grid; gap: var(--s-space-m); counter-reset: step; }
.tr-steps li { display: grid; grid-template-columns: var(--s-tap) minmax(0, 1fr); gap: var(--s-space-m); align-items: baseline; max-width: var(--s-measure-body); }
.tr-steps__n {
    display: grid; place-items: center; width: var(--s-tap); height: var(--s-tap);
    background: var(--s-ink); color: var(--s-bright);
    font: var(--s-weight-black) var(--s-size-button-s)/var(--s-leading-solid) var(--s-font-display);
    transform: skewX(var(--s-skew));
}

/* The ledger: ruled like the walk list, the cost column in display figures. */
.tr-ledger { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tr-ledger th, .tr-ledger td { padding: var(--s-space-s) var(--s-space-s) var(--s-space-s) 0; text-align: left; vertical-align: baseline; border-bottom: var(--s-rule) solid var(--s-ink-faint); }
.tr-ledger thead th { font: var(--s-weight-heavy) var(--s-size-label)/var(--s-leading-tight) var(--s-font-display); letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-ink-soft); border-bottom: var(--s-rule-heavy) solid var(--s-ink); }
.tr-ledger tbody th { font-weight: var(--s-weight-regular); }
.tr-ledger td { font-size: var(--s-size-small); color: var(--s-ink-soft); white-space: nowrap; }
.tr-ledger .tr-ledger__cost { text-align: right; padding-right: 0; }
.tr-ledger td.tr-ledger__cost { font: var(--s-weight-black) var(--s-size-button)/var(--s-leading-solid) var(--s-font-display); color: var(--s-ink); }
.tr-ledger tfoot th, .tr-ledger tfoot td { border-bottom: 0; border-top: var(--s-rule-heavy) double var(--s-ink); padding-top: var(--s-space-m); }
.tr-ledger tfoot th { font: var(--s-weight-black) var(--s-size-button-s)/var(--s-leading-tight) var(--s-font-display); letter-spacing: var(--s-track-label); text-transform: uppercase; }
.tr-ledger tfoot td.tr-ledger__cost { font-size: var(--s-size-figure); color: var(--s-cerise-ink); }

/* The money: one stacked bar, three inks. */
.tr-bar { display: flex; height: var(--s-space-2xl); background: var(--s-ink-faint); overflow: hidden; }
.tr-bar__seg { flex: var(--tr-share) 1 0; transform-origin: left; }
.tr-bar__seg--0, .tr-bar__chip--0 { background: var(--s-ink); }
.tr-bar__seg--1, .tr-bar__chip--1 { background: var(--s-cerise); }
.tr-bar__seg--2, .tr-bar__chip--2 { background: radial-gradient(circle, var(--s-cerise) var(--s-dot-hover), transparent calc(var(--s-dot-hover) + 1%)) 0 0 / var(--s-dot-cell) var(--s-dot-cell), var(--s-paper); }
.tr-motion .tr-budget__money .tr-bar__seg { transform: scaleX(0); transition: transform var(--s-dur-slow) var(--s-ease); }
.tr-motion .tr-budget__money.is-in .tr-bar__seg { transform: none; }
.tr-motion .tr-budget__money.is-in .tr-bar__seg--1 { transition-delay: var(--s-stagger); }
.tr-motion .tr-budget__money.is-in .tr-bar__seg--2 { transition-delay: calc(var(--s-stagger) * 2); }
.tr-bar__key { display: grid; gap: var(--s-space-xs); margin-top: var(--s-space-m); }
.tr-bar__key li { display: grid; grid-template-columns: var(--s-space-l) minmax(0, 1fr) auto auto; gap: var(--s-space-s); align-items: center; font-size: var(--s-size-small); }
.tr-bar__chip { width: var(--s-space-l); height: var(--s-space-m); box-shadow: inset 0 0 0 var(--s-rule) var(--s-ink); }
.tr-bar__key b { font: var(--s-weight-black) var(--s-size-button-s)/var(--s-leading-solid) var(--s-font-display); font-variant-numeric: tabular-nums; }
.tr-bar__pct { min-width: 4ch; text-align: right; color: var(--s-ink-soft); font-variant-numeric: tabular-nums; }

.tr-budget__wont { display: grid; gap: var(--s-space-2xs); padding: var(--s-space-m) var(--s-space-l); box-shadow: inset var(--s-space-xs) 0 0 var(--s-ink); background: var(--s-paper); font-style: italic; max-width: var(--s-measure-body); }
.tr-budget__wont .tr-label { font-style: normal; margin-bottom: 0; }
.tr-budget__repeat { display: grid; gap: var(--s-space-xs); padding: var(--s-space-xl); background: var(--s-ink); color: var(--s-bright); transform: rotate(var(--s-tilt-a)); box-shadow: var(--s-shadow-x) var(--s-shadow-y) 0 var(--s-cerise); }
.tr-budget__repeat .tr-label { color: var(--s-screen); margin-bottom: 0; }
.tr-budget__say { font: var(--s-weight-black) var(--s-size-h3)/var(--s-leading-tight) var(--s-font-display); text-transform: uppercase; letter-spacing: var(--s-track-display); }

/* ---- Tablet + phone ------------------------------------------------------------------------ */
@media (max-width: 1079px) {
    .tr-planhead__inner { grid-template-columns: 1fr; gap: var(--s-space-2xl); }
    /* Narrow: the title, then the sheet with its total, then the long lede. */
    .tr-planhead__copy { display: contents; }
    .tr-planhead .tr-lede { order: 1; }
    .tr-budget { grid-template-columns: 1fr; gap: var(--s-space-2xl); }
    .tr-budget__poster { position: static; }
}
@media (max-width: 719px) {
    .tr-tabs { padding: 0; }
    .tr-planhead { padding: var(--s-space-2xl) var(--s-gutter) var(--s-section-s); }
    .tr-bsheet { padding: var(--s-space-l) var(--s-space-m) var(--s-space-m); transform: none; box-shadow: var(--s-shadow-x) var(--s-shadow-y) 0 var(--s-ink); }
    .tr-bsheet__t tbody th a { font-size: var(--s-size-button-s); }
    .tr-bsheet__fig { padding-left: var(--s-space-s); font-size: var(--s-size-button-s); }
    .tr-bsheet__total { font-size: var(--s-size-figure); }
    .tr-tabs ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tr-tab { grid-template-columns: 1fr; justify-items: center; padding: var(--s-space-xs) var(--s-space-2xs); text-align: center; }
    .tr-tab__n { grid-row: auto; font-size: var(--s-size-h3); }
    .tr-tab__t { font-size: var(--s-size-micro); }
    .tr-tab__c { display: none; }
    .tr-budget { padding: var(--s-section-s) var(--s-gutter); }
    .tr-budget__n { font-size: calc(var(--s-size-numeral) * 0.8); }
    .tr-budget__art { width: calc(var(--s-strip-art) * 0.6); }
    .tr-ledger td:nth-child(2), .tr-ledger thead th:nth-child(2) { display: none; }
    .tr-ledger tfoot th { white-space: nowrap; }
    .tr-bar__key li { grid-template-columns: var(--s-space-l) minmax(0, 1fr) auto; }
    .tr-bar__pct { display: none; }
    .tr-budget__repeat { transform: none; }
}