/*
 * Teodora Ravelle: HOME. Seven sections, seven compositions (LESSONS 17):
 *   poster  one sheet across the whole first frame: RAVELLE cropped by the sheet edge, the drawn
 *           figure overprinting it, the headline, three stacked actions, the countdown plate
 *   press   an ink room: a tray of prints on the left, the run sheet on the right
 *   tide    a full-width chart, the five marks riding the line, then five gauges
 *   plan    four strips: left, right, full-bleed pink, ruled ledger
 *   events  a sticky header column beside a pinned row of ticket stubs
 *   knock   the map and choices beside the clipboard that fills in
 *   close   the ink panel
 * Every value is a token. Plates overprint with multiply: that IS the riso look.
 */

/* ==== 1. THE POSTER ========================================================================== */
.tr-poster { padding: 0 var(--s-gutter) var(--s-space-l); }
.tr-poster__sheet {
    position: relative; overflow: hidden;
    height: clamp(var(--s-first-frame-min), var(--s-first-frame), var(--s-first-frame-max));
    margin-inline: auto; max-width: calc(var(--s-max) + var(--s-gutter) * 2);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 0.95fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas: "top top top" "title title ." "name name name" "actions lede ." "print print print";
    column-gap: var(--s-space-2xl);
    padding: var(--s-sheet-pad) var(--s-sheet-pad) var(--s-space-s);
    background: var(--s-paper);
    border-inline: var(--s-rule) solid var(--s-ink-faint);
    border-bottom: var(--s-rule) solid var(--s-ink-faint);
}
.tr-poster__sheet .tr-crop--tl, .tr-poster__sheet .tr-crop--tr { top: var(--s-space-xs); }

/* The name: the pink drum, enormous, the R cut by the sheet edge. It prints LAST, over the
   drawing, with a hair of paper trapped round each letter, so the whole surname survives where
   it crosses the crane and the low sun (a knockout, as a printer would set it). */
.tr-poster__c { grid-area: name; position: relative; z-index: calc(var(--s-z-lift) + 1); margin-left: calc(var(--s-sheet-pad) * -1.5); margin-block: var(--s-space-l) var(--s-space-m); pointer-events: none; }
.tr-name {
    font: var(--s-weight-black) var(--s-size-name)/var(--s-leading-solid) var(--s-font-display);
    text-box: trim-both cap alphabetic;
    letter-spacing: var(--s-track-name); text-transform: uppercase; white-space: nowrap;
    color: var(--s-cerise);
    text-shadow:
        var(--s-trap) 0 0 var(--s-paper), calc(var(--s-trap) * -1) 0 0 var(--s-paper),
        0 var(--s-trap) 0 var(--s-paper), 0 calc(var(--s-trap) * -1) 0 var(--s-paper),
        var(--s-trap) var(--s-trap) 0 var(--s-paper), calc(var(--s-trap) * -1) calc(var(--s-trap) * -1) 0 var(--s-paper),
        var(--s-trap) calc(var(--s-trap) * -1) 0 var(--s-paper), calc(var(--s-trap) * -1) var(--s-trap) 0 var(--s-paper);
    transform: translate(var(--s-reg-x), var(--s-reg-y));
}
.tr-name__p { display: none; }

/* The drawing: two plates, the pink a hair off the ink, both overprinting. */
.tr-poster__art {
    position: absolute; z-index: var(--s-z-lift);
    right: var(--s-sheet-pad); top: calc(var(--s-sheet-pad) + var(--s-space-3xl)); bottom: var(--s-space-xl);
    width: min(44%, calc((var(--s-first-frame) - var(--s-space-4xl)) * 0.94));
}
.tr-poster__plate { position: absolute; inset: 0; mix-blend-mode: multiply; }
.tr-poster__plate--c { transform: translate(var(--s-reg-x), var(--s-reg-y)); }

.tr-poster__top {
    grid-area: top; position: relative; z-index: var(--s-z-top);
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-space-l);
    padding-top: var(--s-space-s);
}
.tr-poster__ticket {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-space-xs) var(--s-space-m);
    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;
}
.tr-poster__first { padding: var(--s-space-2xs) var(--s-space-xs); background: var(--s-ink); color: var(--s-bright); }

/* The countdown plate: a little screwed-on sign, tilted, hanging over the sky of the drawing. */
.tr-plate-count {
    position: absolute; z-index: var(--s-z-top); right: 0; top: var(--s-space-s);
    display: grid; gap: var(--s-space-2xs);
    padding: var(--s-space-s) var(--s-space-m) var(--s-space-m);
    background: var(--s-ink); color: var(--s-bright);
    transform: rotate(var(--s-tilt-plate));
    box-shadow: var(--s-shadow-x) var(--s-shadow-y) 0 var(--s-cerise);
}
.tr-plate-count::before, .tr-plate-count::after {
    content: ""; position: absolute; top: var(--s-space-xs); width: var(--s-space-xs); height: var(--s-space-xs);
    border-radius: 50%; background: var(--s-paper-edge);
}
.tr-plate-count::before { left: var(--s-space-xs); }
.tr-plate-count::after { right: var(--s-space-xs); }
.tr-plate-count__label { font: var(--s-weight-black) var(--s-size-label)/var(--s-leading-tight) var(--s-font-display); letter-spacing: var(--s-track-wide); text-transform: uppercase; color: var(--s-screen); padding-inline: var(--s-space-m); }
.tr-plate-count__date { font-size: var(--s-size-small); padding-inline: var(--s-space-m); }
.tr-plate-count__units { display: flex; gap: var(--s-space-s); margin-top: var(--s-space-2xs); }
.tr-plate-count__units li { display: grid; justify-items: center; min-width: var(--s-tap); }
.tr-plate-count__n {
    display: block; min-width: 2ch; text-align: center; overflow: hidden;
    font: var(--s-weight-black) var(--s-size-count)/var(--s-leading-solid) var(--s-font-display);
    font-variant-numeric: tabular-nums;
}
.tr-plate-count__n.is-tick { animation: tr-tick var(--s-dur-tick) var(--s-ease); }
@keyframes tr-tick { from { transform: translateY(var(--s-tick-y)); opacity: 0; } to { transform: none; opacity: 1; } }
.tr-plate-count__u { font: var(--s-weight-bold) var(--s-size-micro)/var(--s-leading-solid) var(--s-font-display); letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-bright-soft); }
.tr-plate-count__polls { font-size: var(--s-size-micro); color: var(--s-bright-soft); padding-inline: var(--s-space-xs); }
.tr-nojs .tr-plate-count__units { display: none; }

.tr-poster__copy { display: contents; }
.tr-poster__title {
    grid-area: title; position: relative; z-index: var(--s-z-top); align-self: end;
    font: var(--s-weight-black) var(--s-size-poster)/var(--s-leading-poster) var(--s-font-display);
    letter-spacing: var(--s-track-display); text-transform: uppercase;
    padding-top: var(--s-space-l);
}
.tr-poster__line { display: block; }
.tr-poster__line--1 { color: var(--s-cerise); mix-blend-mode: multiply; transform: translate(var(--s-reg-x), 0); }
.tr-poster__lede { grid-area: lede; position: relative; z-index: var(--s-z-top); align-self: end; max-width: var(--s-measure-narrow); font-size: var(--s-size-lede); padding-bottom: var(--s-space-s); }
.tr-actions { grid-area: actions; position: relative; z-index: var(--s-z-top); align-self: end; display: grid; gap: var(--s-space-s); justify-items: start; padding-bottom: var(--s-space-s); }
.tr-actions .tr-slab { min-width: calc(var(--s-amount-w) * 3); justify-content: flex-start; }
.tr-poster__print {
    grid-area: print; justify-self: end; position: relative; z-index: var(--s-z-top);
    font: var(--s-weight-bold) var(--s-size-micro)/var(--s-leading-solid) var(--s-font-display);
    letter-spacing: var(--s-track-wide); text-transform: uppercase; color: var(--s-ink-soft);
}

/* The first print: the plates arrive like a pull off the drum (motion only, once; keyframes in site.css). */
.tr-motion .tr-poster__plate--k.tr-only-wide, .tr-motion .tr-poster__plate--k.tr-only-phone { animation: tr-ink-in var(--s-dur-ink) var(--s-ease-drop) both; }
.tr-motion .tr-poster__plate--c.tr-only-wide, .tr-motion .tr-poster__plate--c.tr-only-phone,
.tr-motion .tr-name { animation: tr-pink-in var(--s-dur-pink) var(--s-ease) both; animation-delay: var(--s-dur-gap); }

/* ==== 2. SIGNATURE: THE PRESS ==================================================================== */
.tr-press {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center;
    gap: var(--s-space-3xl);
    padding: var(--s-section) max(var(--s-gutter), calc((100% - var(--s-max)) / 2)) calc(var(--s-section) / 2);
    background: var(--s-ink); color: var(--s-bright);
}
.tr-press__tray {
    position: relative; display: grid; place-items: center;
    min-height: calc(var(--s-press-sheet) * 1.42);
    padding: var(--s-tray-pad);
    background:
        repeating-linear-gradient(90deg, var(--s-ink-rule) 0 var(--s-rule), transparent var(--s-rule) var(--s-space-4xl)),
        var(--s-ink);
    box-shadow: inset 0 0 0 var(--s-rule) var(--s-ink-rule);
}
.tr-press__roller {
    position: absolute; z-index: var(--s-z-top); top: var(--s-space-m); left: 50%;
    width: calc(var(--s-press-sheet) + var(--s-space-2xl)); height: var(--s-space-l);
    transform: translateX(-50%);
    background: linear-gradient(var(--s-ink-soft), var(--s-paper-edge) 45%, var(--s-ink-soft));
    border-radius: var(--s-space-l);
}
.tr-press__roller.is-turning { animation: tr-roll var(--s-dur-shudder) var(--s-ease-step) 2; }
@keyframes tr-roll { 50% { transform: translateX(-50%) scaleY(var(--s-press-scale)); } }

.tr-sheet {
    grid-area: 1 / 1; position: relative;
    width: var(--s-press-sheet); aspect-ratio: 3 / 4;
    container-type: inline-size;
    background: var(--s-paper); overflow: hidden;
    box-shadow: 0 var(--s-space-xs) var(--s-space-l) var(--s-ink-shade);
}
.tr-sheet--stack-1 { transform: rotate(var(--s-stack-a)) translate(calc(var(--s-stack-shift) * -1), var(--s-stack-shift)); }
.tr-sheet--stack-2 { transform: rotate(var(--s-stack-b)) translate(var(--s-stack-shift), var(--s-stack-shift)); }
.tr-sheet--live { z-index: var(--s-z-lift); }
.tr-sheet--live.is-under { z-index: 1; transform: rotate(var(--s-stack-b)) translateY(calc(var(--s-stack-shift) * 0.5)); }
.tr-sheet--live.is-top { z-index: var(--s-z-top); }
.tr-sheet__plate { position: absolute; inset: 0; mix-blend-mode: multiply; }
.tr-sheet__plate--c { color: var(--s-cerise); transform: translate(var(--s-reg-x), var(--s-reg-y)); }
.tr-sheet__plate--k { color: var(--s-ink); }
.tr-sheet__art { position: absolute; inset: 0; }
.tr-sheet__plate--c .tr-sheet__art { color: var(--s-cerise); }
.tr-sheet__plate--k .tr-sheet__art { color: var(--s-ink); }
.tr-sheet__name {
    position: absolute; left: -2cqw; top: 7cqw;
    font: var(--s-weight-black) var(--s-sheet-name)/var(--s-leading-solid) var(--s-font-display);
    text-box: trim-both cap alphabetic;
    letter-spacing: var(--s-track-name); text-transform: uppercase; white-space: nowrap;
}
.tr-sheet__bar { position: absolute; left: 0; right: 0; top: 0; height: 1.6cqw; background: currentColor; }
.tr-sheet__ticket {
    position: absolute; right: 5cqw; top: 3cqw;
    font: var(--s-weight-black) var(--s-sheet-small)/var(--s-leading-solid) var(--s-font-display);
    letter-spacing: var(--s-track-wide); text-transform: uppercase; color: var(--s-ink);
}
/* The slogan is knocked out of the sea wall: paper showing through the ink. */
.tr-sheet__line {
    position: absolute; left: 5cqw; right: 5cqw; bottom: 9cqw;
    font: var(--s-weight-black) var(--s-sheet-line)/var(--s-leading-poster) var(--s-font-display);
    letter-spacing: var(--s-track-display); text-transform: uppercase; color: var(--s-paper);
}
.tr-sheet__line span { display: block; }
.tr-sheet__for {
    position: absolute; left: 5cqw; bottom: 4cqw;
    font: var(--s-weight-heavy) var(--s-sheet-small)/var(--s-leading-solid) var(--s-font-display);
    letter-spacing: var(--s-track-wide); text-transform: uppercase; color: var(--s-screen);
}

.tr-press__desk { display: grid; gap: var(--s-space-l); align-content: center; max-width: var(--s-max-text); }
.tr-press__lede { font-size: var(--s-size-lede); color: var(--s-bright-soft); max-width: var(--s-measure-lede); }
.tr-run { display: grid; gap: var(--s-space-xs); counter-reset: run; }
.tr-run__step {
    display: flex; align-items: center; gap: var(--s-space-s);
    font: var(--s-weight-heavy) var(--s-size-button-s)/var(--s-leading-tight) var(--s-font-display);
    letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-bright-soft);
}
.tr-run__lamp { width: var(--s-space-m); height: var(--s-space-m); border-radius: 50%; box-shadow: inset 0 0 0 var(--s-rule-mark) var(--s-bright-soft); }
.tr-run__step.is-on { color: var(--s-bright); }
.tr-run__step.is-on .tr-run__lamp { background: var(--s-cerise); box-shadow: 0 0 0 var(--s-space-2xs) var(--s-ink-rule); }
.tr-run__step.is-done .tr-run__lamp { background: var(--s-screen); box-shadow: none; }
.tr-lines { display: flex; flex-wrap: wrap; gap: var(--s-space-xs); }
.tr-lines legend { width: 100%; }
.tr-line-pick { position: relative; display: inline-flex; }
.tr-line-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.tr-line-pick span {
    display: inline-flex; align-items: center; gap: var(--s-space-xs);
    min-height: var(--s-tap); padding: 0 var(--s-space-m);
    box-shadow: inset 0 0 0 var(--s-rule-mark) var(--s-ink-rule);
    font: var(--s-weight-heavy) var(--s-size-button-s)/var(--s-leading-tight) var(--s-font-display);
    letter-spacing: var(--s-track-label); text-transform: uppercase;
    transition: background-color var(--s-dur-fast) var(--s-ease), box-shadow var(--s-dur-fast) var(--s-ease);
}
.tr-line-pick b { color: var(--s-cerise); }
.tr-line-pick input:hover + span { box-shadow: inset 0 0 0 var(--s-rule-mark) var(--s-bright); }
.tr-line-pick input:checked + span { background: var(--s-bright); color: var(--s-ink); }
.tr-line-pick input:checked + span b { color: var(--s-cerise-ink); }
.tr-line-pick input:focus-visible + span { outline: var(--s-focus-w) solid var(--s-focus-on-ink); outline-offset: var(--s-focus-offset); }
.tr-press__go { display: flex; flex-wrap: wrap; gap: var(--s-space-l); }
.tr-press__count { 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-screen); font-variant-numeric: tabular-nums; }
.tr-press__status { min-height: var(--s-size-body); font-size: var(--s-size-small); color: var(--s-bright); }

/* ==== 3. WHO SHE IS: THE TIDE CHART ============================================================== */
.tr-tide { padding: calc(var(--s-section) / 2) var(--s-gutter) var(--s-section); }
.tr-tide__head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; gap: var(--s-space-l) var(--s-space-3xl); margin-bottom: var(--s-space-2xl); }
.tr-tide__head .tr-kicker { grid-column: 1 / -1; margin-bottom: 0; }
.tr-tide__axis { font-style: italic; font-size: var(--s-size-lede); color: var(--s-ink-soft); max-width: var(--s-measure-narrow); }
.tr-chart {
    position: relative; height: var(--s-chart-h);
    margin-top: var(--s-space-3xl); margin-left: var(--s-space-2xl); /* the metre labels sit inside the gutter */
    border-left: var(--s-rule-heavy) solid var(--s-ink); border-bottom: var(--s-rule-heavy) solid var(--s-ink);
}
.tr-chart__datum {
    position: absolute; right: 0; top: calc(var(--s-space-xl) * -1);
    font: var(--s-weight-heavy) var(--s-size-micro)/var(--s-leading-tight) var(--s-font-display);
    letter-spacing: var(--s-track-wide); text-transform: uppercase; color: var(--s-ink-soft);
}
.tr-chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tr-chart__grid { stroke: var(--s-ink-faint); stroke-width: var(--s-rule); vector-effect: non-scaling-stroke; stroke-dasharray: 2 6; }
.tr-chart__area { fill: url(#tr-dots-m); color: var(--s-cerise); opacity: 0.5; }
.tr-chart__line { fill: none; stroke: var(--s-cerise); stroke-width: var(--s-rule-heavy); vector-effect: non-scaling-stroke; stroke-linejoin: round; }
/* Dash longer than the path: non-scaling-stroke measures in screen space, so pathLength=1 alone
   can leave the last stretch undrawn. */
.tr-motion .tr-chart__line { stroke-dasharray: 1.5; stroke-dashoffset: 1.5; transition: stroke-dashoffset var(--s-dur-line) var(--s-ease-feed); }
.tr-motion .tr-chart__area { opacity: 0; transition: opacity var(--s-dur-slow) var(--s-ease); transition-delay: var(--s-dur-slow); }
.tr-motion .tr-tide.is-in .tr-chart__line { stroke-dashoffset: 0; }
.tr-motion .tr-tide.is-in .tr-chart__area { opacity: 0.5; }
.tr-chart__scale li {
    position: absolute; left: calc(var(--s-space-2xl) * -1); top: var(--tr-y); transform: translateY(-50%);
    font: var(--s-weight-bold) var(--s-size-micro)/var(--s-leading-solid) var(--s-font-display); color: var(--s-ink-soft);
    font-variant-numeric: tabular-nums;
}
.tr-mark { position: absolute; left: var(--tr-x); top: var(--tr-y); }
.tr-mark__dot {
    position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
    display: grid; place-items: center; width: var(--s-mark-dot); height: var(--s-mark-dot);
    border-radius: 50%; background: var(--s-ink); color: var(--s-bright);
    font: var(--s-weight-black) var(--s-size-small)/var(--s-leading-solid) var(--s-font-display);
    box-shadow: 0 0 0 var(--s-space-2xs) var(--s-paper);
}
.tr-mark__year {
    position: absolute; left: 0; transform: translateX(-50%);
    font: var(--s-weight-black) var(--s-size-button-s)/var(--s-leading-solid) var(--s-font-display);
    font-variant-numeric: tabular-nums;
}
.tr-mark--up .tr-mark__year { bottom: calc(var(--s-mark-dot) * 0.8); }
.tr-mark--down .tr-mark__year { top: calc(var(--s-mark-dot) * 0.8); }
.tr-motion .tr-mark { opacity: 0; transform: scale(0.6); transition: opacity var(--s-dur) var(--s-ease), transform var(--s-dur) var(--s-ease-drop); transition-delay: calc(var(--s-dur-line) * 0.18 * var(--tr-i)); }
.tr-motion .tr-tide.is-in .tr-mark { opacity: 1; transform: none; }

.tr-moments { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-space-l); margin-top: var(--s-space-4xl); }
.tr-moment { position: relative; display: grid; align-content: start; gap: var(--s-space-xs); padding-top: var(--s-space-l); border-top: var(--s-rule-heavy) solid var(--s-ink); }
.tr-moment__n {
    position: absolute; top: calc(var(--s-mark-dot) * -0.5); left: 0;
    display: grid; place-items: center; width: var(--s-mark-dot); height: var(--s-mark-dot);
    border-radius: 50%; background: var(--s-ink); color: var(--s-bright);
    font: var(--s-weight-black) var(--s-size-small)/var(--s-leading-solid) var(--s-font-display);
}
.tr-moment__year { font: var(--s-weight-black) var(--s-size-figure)/var(--s-leading-solid) var(--s-font-display); color: var(--s-cerise-ink); font-variant-numeric: tabular-nums; }
.tr-moment__title { font: var(--s-weight-black) var(--s-size-button)/var(--s-leading-tight) var(--s-font-display); text-transform: uppercase; }
.tr-moment__body { font-size: var(--s-size-small); color: var(--s-ink-soft); }
.tr-moment__gauge {
    height: var(--s-gauge-h); margin-top: var(--s-space-s); background: var(--s-ink-faint); position: relative; overflow: hidden;
}
.tr-moment__gauge::after { content: ""; position: absolute; inset: 0; background: var(--s-cerise); transform: scaleX(var(--tr-h)); transform-origin: left; }
.tr-quote {
    display: grid; grid-template-columns: var(--s-space-4xl) minmax(0, 1fr); gap: var(--s-space-l);
    max-width: var(--s-max-text); margin: var(--s-space-4xl) 0 0 auto;
}
.tr-quote::before { content: ""; height: var(--s-rule-heavy); margin-top: var(--s-space-m); background: var(--s-cerise); }
.tr-quote p { font: italic var(--s-weight-regular) var(--s-size-quote)/var(--s-leading-tight) var(--s-font-body); }
.tr-quote footer { grid-column: 2; font-size: var(--s-size-small); color: var(--s-ink-soft); }

/* ==== 4. THE PLAN: FOUR STRIPS =================================================================== */
.tr-plan { padding: var(--s-section) var(--s-gutter) 0; border-top: var(--s-rule-heavy) solid var(--s-ink); }
.tr-plan__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--s-measure-lede)); align-items: end; gap: var(--s-space-l) var(--s-space-3xl); margin-bottom: var(--s-space-3xl); }
.tr-plan__head .tr-kicker { grid-column: 1 / -1; margin-bottom: 0; }
.tr-plan__lede { font-size: var(--s-size-lede); color: var(--s-ink-soft); }
.tr-strips { display: grid; overflow-x: clip; } /* the numerals' slide-in start never widens the page */
.tr-strip {
    position: relative;
    display: grid; grid-template-columns: auto minmax(0, 1fr) var(--s-strip-art);
    align-items: center; gap: var(--s-space-2xl);
    padding: var(--s-space-3xl) 0;
    border-top: var(--s-rule-heavy) solid var(--s-ink);
}
.tr-strip__n {
    font: var(--s-weight-black) var(--s-size-numeral)/var(--s-leading-name) var(--s-font-display);
    font-variant-numeric: tabular-nums; color: var(--s-cerise); mix-blend-mode: multiply;
}
.tr-strip__line {
    font: var(--s-weight-black) var(--s-size-strip)/var(--s-leading-display) var(--s-font-display);
    letter-spacing: var(--s-track-display); text-transform: uppercase; max-width: var(--s-measure-strip);
}
.tr-strip__copy { display: grid; gap: var(--s-space-l); }
.tr-strip__facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-space-l) var(--s-space-2xl); max-width: var(--s-max-text); }
.tr-strip__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-cerise-ink); margin-bottom: var(--s-space-2xs); }
.tr-strip__facts dd { font-size: var(--s-size-small); }
.tr-strip__facts .tr-strip__cost { font: var(--s-weight-black) var(--s-size-h3)/var(--s-leading-tight) var(--s-font-display); }

/* Strip 2: right aligned on the pale pink screen */
.tr-strip--2 {
    grid-template-columns: var(--s-strip-art) minmax(0, 1fr) auto;
    text-align: right; padding-inline: var(--s-space-2xl);
    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);
    border-top: 0;
}
.tr-strip--2 .tr-strip__n { order: 3; color: var(--s-ink); mix-blend-mode: normal; }
.tr-strip--2 .tr-strip__copy { order: 2; justify-items: end; }
.tr-strip--2 .tr-strip__art { order: 1; transform: scaleX(-1); }
.tr-strip--2 .tr-strip__facts { text-align: left; }
/* Strip 3: full bleed, all pink, the numeral as an ink outline */
.tr-strip--3 {
    grid-template-columns: minmax(0, 1fr) auto;
    margin-inline: calc(50% - 50vw); padding: var(--s-space-4xl) max(var(--s-gutter), calc(50vw - var(--s-max) / 2));
    background: var(--s-cerise); color: var(--s-bright); border-top: 0;
}
.tr-strip--3 .tr-strip__n { order: 2; color: transparent; -webkit-text-stroke: var(--s-rule-heavy) var(--s-ink); mix-blend-mode: normal; font-size: calc(var(--s-size-numeral) * 1.3); }
.tr-strip--3 .tr-strip__copy { order: 1; }
.tr-strip--3 .tr-strip__art { display: none; }
.tr-strip--3 .tr-strip__facts dt { color: var(--s-ink); }
.tr-strip--3 .tr-strip__line { max-width: none; font-size: calc(var(--s-size-strip) * 1.15); }
.tr-strip--3 :focus-visible { outline-color: var(--s-focus-on-ink); }
/* Strip 4: a ruled ledger sheet; the number boxed in pink */
.tr-strip--4 {
    grid-template-columns: auto minmax(0, 1fr) var(--s-strip-art);
    background: repeating-linear-gradient(var(--s-paper) 0 calc(var(--s-ledger) - var(--s-rule)), var(--s-ink-faint) calc(var(--s-ledger) - var(--s-rule)) var(--s-ledger));
    border-top: 0; border-bottom: var(--s-rule-heavy) solid var(--s-ink);
    border-left: var(--s-space-xs) solid var(--s-cerise); padding-left: var(--s-space-2xl);
}
.tr-strip--4 .tr-strip__n {
    display: grid; place-items: center; min-width: calc(var(--s-size-numeral) * 0.6); aspect-ratio: 1;
    background: var(--s-cerise); color: var(--s-bright); mix-blend-mode: normal; font-size: calc(var(--s-size-numeral) * 0.55);
    transform: rotate(var(--s-tilt-a));
}
.tr-motion .tr-strip[data-tr-reveal] .tr-strip__n { transition: transform var(--s-dur-slow) var(--s-ease-drop); transform: translateX(var(--s-reg-in-x)); }
.tr-motion .tr-strip[data-tr-reveal].is-in .tr-strip__n { transform: none; }
.tr-motion .tr-strip--4[data-tr-reveal].is-in .tr-strip__n { transform: rotate(var(--s-tilt-a)); }

/* ==== 5. EVENTS: sticky header beside the stubs ================================================== */
.tr-events {
    display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: var(--s-space-3xl);
    padding: var(--s-section) max(var(--s-gutter), calc((100% - var(--s-max)) / 2));
}
.tr-events > * { max-width: none; margin: 0; }
.tr-events__head { position: sticky; top: calc(var(--s-nav-h) + var(--s-space-2xl)); align-self: start; display: grid; gap: var(--s-space-l); justify-items: start; }
.tr-events__head .tr-kicker { margin-bottom: 0; }
.tr-events__lede { color: var(--s-ink-soft); max-width: var(--s-measure-narrow); }
.tr-events__status { grid-column: 2; min-height: var(--s-size-body); font-size: var(--s-size-small); }

/* ==== 6. KNOCK: the walk list ==================================================================== */
.tr-knock { padding: var(--s-section) var(--s-gutter); background: var(--s-paper-deep); border-top: var(--s-rule-heavy) solid var(--s-ink); }
.tr-knock__head { display: grid; gap: var(--s-space-l); margin-bottom: var(--s-space-3xl); }
.tr-knock__head .tr-kicker { margin-bottom: 0; }
.tr-knock__lede { color: var(--s-ink-soft); max-width: var(--s-measure-lede); font-size: var(--s-size-lede); }
.tr-walk { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-space-3xl); align-items: start; }
.tr-walk__pick { display: grid; gap: var(--s-space-2xl); }
.tr-walk__map { padding: var(--s-space-m); background: var(--s-paper); box-shadow: var(--s-shadow-x) var(--s-shadow-y) 0 var(--s-ink); max-width: var(--s-map-max); }
.tr-walk__set { display: flex; flex-wrap: wrap; gap: var(--s-space-xs); }
.tr-walk__set legend { width: 100%; }
.tr-board { position: sticky; top: calc(var(--s-nav-h) + var(--s-space-xl)); padding: var(--s-board-pad); padding-top: calc(var(--s-clip-h) + var(--s-space-m)); background: var(--s-ink); transform: rotate(var(--s-tilt-b)); }
.tr-board__clip {
    position: absolute; top: calc(var(--s-clip-h) * -0.4); left: 50%; transform: translateX(-50%);
    width: var(--s-clip-w); height: var(--s-clip-h);
    background: linear-gradient(var(--s-paper-edge), var(--s-ink-soft));
    clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
    z-index: var(--s-z-lift);
}
.tr-board__sheet {
    position: relative; display: grid; gap: var(--s-space-l);
    padding: var(--s-space-xl) var(--s-space-l);
    background: repeating-linear-gradient(var(--s-paper) 0 calc(var(--s-ledger) - var(--s-rule)), var(--s-ink-faint) calc(var(--s-ledger) - var(--s-rule)) var(--s-ledger));
}
.tr-board__title { display: flex; justify-content: space-between; font: var(--s-weight-black) var(--s-size-h3)/var(--s-leading-solid) var(--s-font-display); text-transform: uppercase; }
.tr-board__no { color: var(--s-cerise-ink); font-size: var(--s-size-button-s); }
.tr-board__rows { display: grid; }
.tr-board__row { display: grid; grid-template-columns: calc(var(--s-amount-w) * 1.2) minmax(0, 1fr); align-items: baseline; gap: var(--s-space-m); min-height: var(--s-ledger); }
.tr-board__row 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-board__row dd { font: italic var(--s-weight-semi) var(--s-size-lede)/var(--s-leading-tight) var(--s-font-body); color: var(--s-cerise-ink); }
.tr-board__row dd.is-blank { color: var(--s-ink-faint); }
.tr-board__row dd.is-filled { animation: tr-write var(--s-dur-fill) var(--s-ease) both; }
@keyframes tr-write { from { opacity: 0; transform: translateX(calc(var(--s-hover-nudge) * -3)); } to { opacity: 1; transform: none; } }
.tr-board__status { min-height: var(--s-size-body); font-size: var(--s-size-small); }
.tr-board__status.is-error { color: var(--s-cerise-ink); font-weight: var(--s-weight-bold); }
.tr-board__tally { 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-board__tally b { color: var(--s-ink); font-size: var(--s-size-button); }
.tr-board.is-booked .tr-board__sheet::after {
    content: ""; position: absolute; right: var(--s-space-l); top: var(--s-space-3xl);
    width: var(--s-space-4xl); height: var(--s-space-4xl); border-radius: 50%;
    box-shadow: inset 0 0 0 var(--s-rule-heavy) var(--s-cerise);
    animation: tr-stamp var(--s-dur-stamp) var(--s-ease-drop) both;
}
@keyframes tr-stamp { from { transform: scale(var(--s-stamp-from)) rotate(var(--s-tilt-stamp)); opacity: 0; } to { transform: rotate(var(--s-tilt-stamp)); opacity: 1; } }

/* ==== 7. CLOSE: chip in on the ink panel ========================================================= */
.tr-close { padding: 0 var(--s-gutter) var(--s-section); background: var(--s-paper-deep); }
.tr-close__panel {
    max-width: var(--s-max); margin-inline: auto;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-space-3xl);
    padding: var(--s-space-4xl) var(--s-space-3xl);
    background: var(--s-ink); color: var(--s-bright);
    box-shadow: var(--s-shadow-x) var(--s-shadow-y) 0 var(--s-cerise);
}
.tr-close__head { display: grid; gap: var(--s-space-l); align-content: start; justify-items: start; }
.tr-close__head .tr-kicker { margin-bottom: 0; }
.tr-close__lede { color: var(--s-bright-soft); max-width: var(--s-measure-lede); }

/* ==== Tablet ===================================================================================== */
@media (max-width: 1079px) {
    .tr-poster__sheet { grid-template-columns: auto minmax(0, 1fr) minmax(0, 0.6fr); grid-template-areas: "top top top" "title title title" "name name name" "actions lede lede" "print print print"; }
    .tr-poster__art { width: 40%; }
    .tr-press { grid-template-columns: 1fr; }
    .tr-moments { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tr-events { grid-template-columns: 1fr; }
    .tr-events__head { position: static; }
    .tr-events__status { grid-column: 1; }
    .tr-walk { grid-template-columns: 1fr; }
    .tr-board { position: relative; top: 0; }
    .tr-close__panel { grid-template-columns: 1fr; }
}

/* ==== Phone: the portrait poster ================================================================= */
@media (max-width: 719px) {
    .tr-poster { padding: 0 0 var(--s-space-m); }
    .tr-poster__sheet {
        height: auto; min-height: min(var(--s-first-frame), var(--s-first-frame-max));
        grid-template-columns: minmax(0, 1fr) var(--s-poster-art-p);
        grid-template-rows: auto;
        grid-template-areas: "top top" "name art" "title title" "lede lede" "actions actions" "print print";
        column-gap: var(--s-space-s);
        padding: var(--s-space-s) var(--s-gutter) var(--s-space-s);
        border-inline: 0;
    }
    .tr-poster__top { align-items: flex-start; }
    .tr-poster__ticket { max-width: 45%; font-size: var(--s-size-micro); }
    .tr-plate-count { position: relative; top: 0; padding: var(--s-space-xs) var(--s-space-s) var(--s-space-s); }
    .tr-plate-count__date, .tr-plate-count__polls { display: none; }
    .tr-plate-count__label { padding-inline: var(--s-space-s); }
    .tr-plate-count__units { gap: var(--s-space-2xs); }
    .tr-plate-count__units li { min-width: var(--s-space-2xl); }
    .tr-name { font-size: var(--s-size-name-p); line-height: var(--s-leading-name); text-box: trim-both cap alphabetic; text-shadow: none; }
    .tr-name__l { display: none; }
    .tr-name__p { display: block; }
    .tr-name__p span { display: block; }
    .tr-name__p span + span { margin-top: var(--s-space-2xs); }
    /* The portrait crop stands BESIDE the stacked name, never over it: her head, the hat in her
       hand, the harbour wall under her boots. The name sits on clean paper. */
    .tr-poster__art { position: relative; grid-area: art; inset: auto; width: auto; align-self: end; aspect-ratio: 220 / 460; margin-bottom: calc(var(--s-space-xs) * -1); }
    .tr-poster__c { margin: var(--s-space-m) 0 0; align-self: end; }
    .tr-poster__title { font-size: var(--s-size-poster-p); padding-top: var(--s-space-m); }
    .tr-poster__lede { font-size: var(--s-size-small); max-width: none; padding: var(--s-space-s) 0 var(--s-space-m); }
    .tr-actions { justify-items: stretch; }
    .tr-actions .tr-slab { min-width: 0; justify-content: center; }
    .tr-actions .tr-arrow { justify-self: center; }
    .tr-poster__print { justify-self: start; }

    .tr-press { padding: var(--s-section-s) var(--s-gutter); gap: var(--s-space-2xl); }
    .tr-press__tray { min-height: calc(var(--s-press-sheet) * 1.45); padding: var(--s-space-2xl) var(--s-space-s) var(--s-space-l); }
    .tr-press__go .tr-slab { flex: 1 1 100%; }

    .tr-tide__head { grid-template-columns: 1fr; }
    .tr-chart { height: var(--s-chart-h-p); margin-left: var(--s-space-2xl); }
    .tr-mark__year { display: none; }
    .tr-moments { grid-template-columns: 1fr; gap: var(--s-space-2xl); margin-top: var(--s-space-3xl); }
    .tr-moment { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-space-m); padding-left: var(--s-space-xl); }
    .tr-moment__year { grid-row: span 2; font-size: var(--s-size-h3); }
    .tr-moment__body, .tr-moment__gauge { grid-column: 2; }
    .tr-quote { grid-template-columns: 1fr; margin-top: var(--s-space-3xl); }
    .tr-quote::before { width: var(--s-space-4xl); }
    .tr-quote footer { grid-column: 1; }

    .tr-plan__head { grid-template-columns: 1fr; }
    .tr-strip, .tr-strip--2, .tr-strip--4 { grid-template-columns: 1fr; gap: var(--s-space-l); padding-block: var(--s-space-2xl); text-align: left; }
    .tr-strip--2 { padding-inline: var(--s-space-l); }
    .tr-strip--2 .tr-strip__copy { justify-items: start; }
    .tr-strip--2 .tr-strip__n, .tr-strip--2 .tr-strip__art { order: 0; }
    .tr-strip__art { max-width: calc(var(--s-strip-art) * 0.7); }
    .tr-strip--3 { grid-template-columns: 1fr; padding-block: var(--s-space-3xl); }
    .tr-strip--3 .tr-strip__n { order: 0; font-size: var(--s-size-numeral); }
    .tr-strip__facts { grid-template-columns: 1fr; gap: var(--s-space-m); }
    .tr-strip--4 .tr-strip__n { justify-self: start; }

    .tr-events { padding: var(--s-section-s) var(--s-gutter); gap: var(--s-space-2xl); }
    .tr-knock { padding: var(--s-section-s) var(--s-gutter); }
    .tr-board { transform: none; padding: var(--s-space-s); padding-top: calc(var(--s-clip-h) + var(--s-space-s)); }
    .tr-board__sheet { padding: var(--s-space-l) var(--s-space-m); }
    .tr-board__row { grid-template-columns: var(--s-amount-w) minmax(0, 1fr); }
    .tr-board .tr-slab { width: 100%; }
    .tr-close { padding: 0 0 var(--s-section-s); }
    .tr-close__panel { padding: var(--s-space-3xl) var(--s-gutter); box-shadow: none; }
}

/* ==== Reduced motion: the finished print, nothing arriving ======================================= */
@media (prefers-reduced-motion: reduce) {
    .tr-poster__plate, .tr-name, .tr-plate-count__n, .tr-board__row dd, .tr-press__roller { animation: none !important; }
    .tr-chart__line { stroke-dashoffset: 0 !important; }
    .tr-mark { opacity: 1 !important; transform: none !important; }
}