/*
 * Teodora Ravelle for Mayor: shared layout and components, all five pages. Namespace .tr-*.
 * Every value is a --s-* token from tokens.css. The look is a two-drum riso print on newsprint:
 * ink black and fluorescent pink, overprinted with multiply so where they cross the paper goes
 * near black, and the pink always sits a few pixels off register.
 * Order: base · type · the slab button and links · chrome (concept strip, nav, menu) · shared
 * pieces (kicker, crop marks, stubs, map, chip form, switch, tags, fields) · footer ·
 * reveal · phone · reduced motion.
 */

/* ---- Base ------------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--s-paper); }
body.tr-page {
    margin: 0;
    background: var(--s-paper); color: var(--s-ink);
    font: var(--s-weight-regular) var(--s-size-body)/var(--s-leading-body) var(--s-font-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
figure { margin: 0; }
p, h1, h2, h3, h4, dl, dd, ol, ul, blockquote, fieldset { margin: 0; }
ol, ul { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: var(--s-focus-w) solid var(--s-focus); outline-offset: var(--s-focus-offset); }
[id] { scroll-margin-top: var(--s-anchor-offset); }
.tr-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.tr-sr {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tr-skip {
    position: absolute; left: var(--s-gutter); top: var(--s-space-xs); z-index: var(--s-z-skip);
    padding: var(--s-space-xs) var(--s-space-m);
    background: var(--s-ink); color: var(--s-bright);
    transform: translateY(-200%);
}
.tr-skip:focus { transform: none; }
.tr-only-phone { display: none; }

/* Sections share one width; each section decides its own rhythm. */
.tr-wrap,
main > section > header,
main > section > ol,
main > section > form,
main > section > div:not([class*="__sheet"]):not([class*="__panel"]) {
    width: 100%; max-width: var(--s-max); margin-inline: auto;
}

/* ---- Type ------------------------------------------------------------------------------ */
.tr-kicker {
    display: inline-flex; align-items: center; gap: var(--s-space-s);
    margin-bottom: var(--s-space-l);
    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-kicker::before {
    content: ""; width: var(--s-space-xl); height: var(--s-rule-heavy);
    background: currentColor;
}
.tr-kicker--on-ink { color: var(--s-screen); }

/* Headings carry the misregistration: a pink ghost of the ink, a few pixels off. */
.tr-h1, .tr-h2 {
    font-family: var(--s-font-display); font-weight: var(--s-weight-black);
    line-height: var(--s-leading-display); letter-spacing: var(--s-track-display);
    text-transform: uppercase;
    text-shadow: var(--s-reg-x) var(--s-reg-y) 0 var(--s-cerise);
    max-width: var(--s-measure-strip);
}
.tr-h1 { font-size: var(--s-size-h1); }
.tr-h2 { font-size: var(--s-size-h2); }
.tr-h2--on-ink { color: var(--s-bright); text-shadow: var(--s-reg-x) var(--s-reg-y) 0 var(--s-cerise); }
.tr-h3 {
    font: var(--s-weight-heavy) var(--s-size-h3)/var(--s-leading-tight) var(--s-font-display);
    text-transform: uppercase; letter-spacing: var(--s-track-display);
}
.tr-lede { font-size: var(--s-size-lede); line-height: var(--s-leading-body); max-width: var(--s-measure-lede); color: var(--s-ink-soft); }
.tr-label {
    display: block; margin-bottom: var(--s-space-s);
    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-label--on-ink { color: var(--s-screen); }

/* ---- The slab: a skewed poster parallelogram with a misregistered ink shadow ---------- */
.tr-slab {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--s-tap-l); padding: 0 var(--s-space-xl);
    border: 0; border-radius: 0;
    background: var(--s-cerise); color: var(--s-bright);
    font: var(--s-weight-black) var(--s-size-button)/var(--s-leading-solid) var(--s-font-display);
    letter-spacing: var(--s-track-label); text-transform: uppercase; text-decoration: none;
    transform: skewX(var(--s-skew));
    box-shadow: var(--s-shadow-x) var(--s-shadow-y) 0 var(--s-ink);
    cursor: pointer;
    transition: transform var(--s-dur-fast) var(--s-ease), box-shadow var(--s-dur-fast) var(--s-ease), background-color var(--s-dur-fast) var(--s-ease);
}
.tr-slab > span { display: block; transform: skewX(var(--s-skew-back)); }
.tr-slab:hover { transform: skewX(var(--s-skew)) translate(var(--s-shadow-press-x), var(--s-shadow-press-y)); box-shadow: var(--s-shadow-press-x) var(--s-shadow-press-y) 0 var(--s-ink); }
.tr-slab:active { transform: skewX(var(--s-skew)) translate(var(--s-shadow-x), var(--s-shadow-y)); box-shadow: none; }
.tr-slab--s { min-height: var(--s-tap); padding: 0 var(--s-space-l); font-size: var(--s-size-button-s); }
.tr-slab--l { min-height: var(--s-tap-l); }
.tr-slab--ghost {
    background: var(--s-paper); color: var(--s-ink);
    box-shadow: inset 0 0 0 var(--s-rule-heavy) var(--s-ink), var(--s-shadow-x) var(--s-shadow-y) 0 var(--s-cerise);
}
.tr-slab--ghost:hover { box-shadow: inset 0 0 0 var(--s-rule-heavy) var(--s-ink), var(--s-shadow-press-x) var(--s-shadow-press-y) 0 var(--s-cerise); }
.tr-slab--on-ink { box-shadow: var(--s-shadow-x) var(--s-shadow-y) 0 var(--s-screen); }
.tr-slab--on-ink:hover { box-shadow: var(--s-shadow-press-x) var(--s-shadow-press-y) 0 var(--s-screen); }
.tr-slab--on-ink:focus-visible, .tr-slab--ghost-ink:focus-visible { outline-color: var(--s-focus-on-ink); }
.tr-slab--ghost-ink {
    background: transparent; color: var(--s-bright);
    box-shadow: inset 0 0 0 var(--s-rule-heavy) var(--s-bright), var(--s-shadow-x) var(--s-shadow-y) 0 var(--s-cerise);
}
.tr-slab--ghost-ink:hover { box-shadow: inset 0 0 0 var(--s-rule-heavy) var(--s-bright), var(--s-shadow-press-x) var(--s-shadow-press-y) 0 var(--s-cerise); }
.tr-slab[disabled] { cursor: progress; }

/* The ruled arrow link: display caps, a heavy rule and a drawn arrowhead. */
.tr-arrow {
    display: inline-flex; align-items: center; gap: var(--s-space-s);
    min-height: var(--s-tap);
    font: var(--s-weight-heavy) var(--s-size-button-s)/var(--s-leading-solid) var(--s-font-display);
    letter-spacing: var(--s-track-label); text-transform: uppercase; text-decoration: none;
    color: var(--s-ink);
}
.tr-arrow::after {
    content: ""; flex: none;
    width: var(--s-arrow-w); height: var(--s-arrow-head);
    background:
        linear-gradient(currentColor, currentColor) left center / calc(100% - var(--s-rule-heavy)) var(--s-rule-heavy) no-repeat,
        linear-gradient(45deg, transparent 50%, currentColor 50%) right top / var(--s-arrow-head) 50% no-repeat,
        linear-gradient(135deg, currentColor 50%, transparent 50%) right bottom / var(--s-arrow-head) 50% no-repeat;
    transition: transform var(--s-dur-fast) var(--s-ease);
}
.tr-arrow:hover::after { transform: translateX(var(--s-hover-nudge)); }
.tr-arrow:hover { color: var(--s-cerise-ink); }
.tr-arrow--on-ink { color: var(--s-bright); }
.tr-arrow--on-ink:hover { color: var(--s-screen); }
.tr-arrow--on-ink:focus-visible, .tr-arrow--on-cerise:focus-visible { outline-color: var(--s-focus-on-ink); }
.tr-arrow--on-cerise { color: var(--s-bright); }
.tr-arrow--on-cerise:hover { color: var(--s-ink); }

/* ---- Chrome ---------------------------------------------------------------------------- */
.tr-concept {
    display: flex; align-items: center; justify-content: center;
    min-height: var(--s-strip-h); padding: 0 var(--s-gutter);
    background: var(--s-cerise); color: var(--s-bright);
    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; text-align: center;
}
.tr-nav {
    position: sticky; top: 0; z-index: var(--s-z-nav);
    display: flex; align-items: center; gap: var(--s-space-xl);
    min-height: var(--s-nav-h); padding: 0 var(--s-gutter);
    background: var(--s-paper);
    border-bottom: var(--s-rule-heavy) solid var(--s-ink);
}
.tr-wordmark {
    display: inline-flex; align-items: baseline; gap: var(--s-space-xs);
    min-height: var(--s-tap); padding-top: var(--s-space-s);
    text-decoration: none;
}
.tr-wordmark__name {
    font: var(--s-weight-black) var(--s-size-logo)/var(--s-leading-solid) var(--s-font-display);
    text-transform: uppercase; letter-spacing: var(--s-track-name);
    text-shadow: var(--s-reg-x) var(--s-reg-y) 0 var(--s-cerise);
}
.tr-wordmark__for {
    font: var(--s-weight-heavy) var(--s-size-label)/var(--s-leading-solid) var(--s-font-display);
    text-transform: uppercase; letter-spacing: var(--s-track-label); color: var(--s-cerise-ink);
}
.tr-nav__links { margin-left: auto; }
.tr-nav__links ul { display: flex; gap: var(--s-space-xs); }
.tr-nav__links a {
    position: relative; display: inline-flex; align-items: center;
    min-height: var(--s-tap); padding: 0 var(--s-space-s);
    font: var(--s-weight-heavy) var(--s-size-nav)/var(--s-leading-solid) var(--s-font-display);
    text-transform: uppercase; letter-spacing: var(--s-track-label); text-decoration: none;
}
.tr-nav__links a::after {
    content: ""; position: absolute; left: var(--s-space-s); right: var(--s-space-s); bottom: var(--s-space-xs);
    height: var(--s-rule-heavy); background: var(--s-cerise);
    transform: scaleX(0); transform-origin: left; transition: transform var(--s-dur) var(--s-ease);
}
.tr-nav__links a:hover::after, .tr-nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.tr-nav__cta { flex: none; }
.tr-menu { display: none; }
.tr-menu__btn {
    display: inline-flex; align-items: center; min-height: var(--s-tap); padding: 0 var(--s-space-m);
    list-style: none; cursor: pointer;
    font: var(--s-weight-black) var(--s-size-nav)/var(--s-leading-solid) var(--s-font-display);
    letter-spacing: var(--s-track-label); text-transform: uppercase;
    box-shadow: inset 0 0 0 var(--s-rule-heavy) var(--s-ink);
}
.tr-menu__btn::-webkit-details-marker { display: none; }
.tr-menu__close { display: none; }
.tr-menu[open] .tr-menu__open { display: none; }
.tr-menu[open] .tr-menu__close { display: inline; }
.tr-menu__sheet {
    position: fixed; inset: var(--s-nav-h) 0 0 0; z-index: var(--s-z-menu);
    padding: var(--s-space-xl) var(--s-gutter);
    background: var(--s-ink); color: var(--s-bright);
    overflow-y: auto;
}
.tr-menu__sheet a {
    display: flex; align-items: baseline; gap: var(--s-space-m);
    min-height: var(--s-tap-l); padding: var(--s-space-s) 0;
    border-bottom: var(--s-rule) solid var(--s-ink-rule);
    font: var(--s-weight-black) var(--s-size-h3)/var(--s-leading-solid) var(--s-font-display);
    text-transform: uppercase; text-decoration: none;
}
.tr-menu__sheet a[aria-current="page"] { color: var(--s-screen); }
.tr-menu__sheet a:focus-visible { outline-color: var(--s-focus-on-ink); }
.tr-menu__n { color: var(--s-cerise); font-size: var(--s-size-small); }

/* ---- Print furniture: crop marks, registration swatches -------------------------------- */
.tr-crop {
    position: absolute; width: var(--s-crop); height: var(--s-crop); pointer-events: none;
    border-color: var(--s-ink); border-style: solid; border-width: 0;
}
.tr-crop--tl { top: var(--s-crop-gap); left: var(--s-crop-gap); border-top-width: var(--s-rule); border-left-width: var(--s-rule); }
.tr-crop--tr { top: var(--s-crop-gap); right: var(--s-crop-gap); border-top-width: var(--s-rule); border-right-width: var(--s-rule); }
.tr-crop--bl { bottom: var(--s-crop-gap); left: var(--s-crop-gap); border-bottom-width: var(--s-rule); border-left-width: var(--s-rule); }
.tr-crop--br { bottom: var(--s-crop-gap); right: var(--s-crop-gap); border-bottom-width: var(--s-rule); border-right-width: var(--s-rule); }
.tr-swatch { display: inline-block; width: var(--s-space-m); height: var(--s-space-m); vertical-align: middle; margin-right: var(--s-space-2xs); }
.tr-swatch--k { background: var(--s-ink); }
.tr-swatch--c { background: var(--s-cerise); margin-right: var(--s-space-xs); }
.tr-art { width: 100%; height: 100%; }
.tr-art--c { color: var(--s-cerise); }
.tr-art--k { color: var(--s-ink); }
.tr-art--k .tr-knock { fill: var(--s-paper); }
.tr-art--k .tr-knock-line { stroke: var(--s-paper); }
.tr-defs pattern circle { fill: var(--s-cerise); }

/* ---- Pledge drawings (home strips + plan sheets): ink strokes, pink fills -------------- */
.tr-icon { width: 100%; height: auto; }
.tr-icon .tr-ic-ink { fill: none; stroke: var(--s-ink); stroke-width: var(--s-rule-heavy); stroke-linecap: round; stroke-linejoin: round; }
.tr-icon .tr-ic-fill { fill: var(--s-cerise); mix-blend-mode: multiply; transform: translate(var(--s-reg-x), var(--s-reg-y)); }
.tr-icon .tr-ic-fill-soft { fill: url(#tr-dots-m); color: var(--s-cerise); }
.tr-icon .tr-ic-dash { fill: none; stroke: var(--s-cerise); stroke-width: var(--s-rule-heavy); stroke-dasharray: 6 6; }
.tr-icon .tr-ic-paper { fill: none; stroke: var(--s-bright); stroke-width: var(--s-space-xs); stroke-linecap: round; stroke-linejoin: round; }
.tr-ic-stamp { transform-origin: 166px 140px; transform: rotate(var(--s-tilt-stamp)); }

/* ---- Ticket stubs (home + events) ------------------------------------------------------- */
.tr-stubs { display: grid; gap: var(--s-space-m); }
.tr-stub {
    position: relative;
    display: grid; grid-template-columns: var(--s-stub-date) 1fr auto; align-items: stretch;
    background: var(--s-paper-deep);
    transform: rotate(var(--s-tilt-a));
    transition: transform var(--s-dur) var(--s-ease);
}
.tr-stub:nth-child(even) { transform: rotate(var(--s-tilt-b)); }
.tr-stub:hover { transform: rotate(0deg) translateY(var(--s-hover-lift)); }
.tr-stub__date {
    position: relative;
    display: grid; align-content: center; justify-items: center; gap: var(--s-space-2xs);
    padding: var(--s-space-m) var(--s-space-s);
    background: var(--s-ink); color: var(--s-bright); text-align: center;
}
/* The perforation: a column of paper dots punched down the stub's edge. */
.tr-stub__date::after {
    content: ""; position: absolute; top: 0; bottom: 0; right: calc(var(--s-perf-dot) * -1);
    width: calc(var(--s-perf-dot) * 2);
    background: radial-gradient(circle, var(--s-paper) var(--s-perf-dot), transparent calc(var(--s-perf-dot) + 0.5px)) center top / 100% var(--s-perf) repeat-y;
}
.tr-stub__dow, .tr-stub__mon {
    font: var(--s-weight-heavy) var(--s-size-label)/var(--s-leading-solid) var(--s-font-display);
    letter-spacing: var(--s-track-label); text-transform: uppercase;
}
.tr-stub__dow { color: var(--s-screen); }
.tr-stub__day {
    font: var(--s-weight-black) var(--s-size-stub-day)/var(--s-leading-solid) var(--s-font-display);
    font-variant-numeric: tabular-nums;
}
.tr-stub__admit {
    margin-top: var(--s-space-xs);
    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-bright-soft);
}
.tr-stub__body { padding: var(--s-space-l) var(--s-space-xl); display: grid; gap: var(--s-space-xs); align-content: center; }
.tr-stub__kind {
    display: flex; flex-wrap: wrap; gap: var(--s-space-s);
    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);
}
.tr-stub__hood { color: var(--s-ink-soft); }
.tr-stub__title { font: var(--s-weight-black) var(--s-size-h3)/var(--s-leading-tight) var(--s-font-display); text-transform: uppercase; }
.tr-stub__where { font-size: var(--s-size-small); }
.tr-stub__time { font-weight: var(--s-weight-bold); }
.tr-stub__note { font-size: var(--s-size-small); color: var(--s-ink-soft); max-width: var(--s-measure-body); font-style: italic; }
.tr-stub__ics {
    align-self: stretch;
    display: grid; place-items: center;
    min-width: var(--s-tap); padding: var(--s-space-m) var(--s-space-l);
    border: 0; border-left: var(--s-rule-mark) dashed var(--s-ink-faint);
    background: transparent; cursor: pointer;
    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; color: var(--s-ink);
    transition: background-color var(--s-dur-fast) var(--s-ease), color var(--s-dur-fast) var(--s-ease);
}
.tr-stub__ics:hover { background: var(--s-cerise); color: var(--s-bright); }
.tr-stub__ics span { max-width: var(--s-space-4xl); text-align: center; }
.tr-stub.is-torn { animation: tr-tear var(--s-dur-slow) var(--s-ease); }
@keyframes tr-tear {
    40% { transform: rotate(var(--s-tilt-stamp)) translateX(var(--s-hover-nudge)); }
    100% { transform: rotate(0deg); }
}

/* ---- The drawn map (walk list + events filter) ------------------------------------------ */
.tr-map { width: 100%; max-width: var(--s-map-max); height: auto; }
.tr-map__sea { fill: url(#tr-dots-s); color: var(--s-cerise); }
.tr-map__land { fill: var(--s-paper); stroke: var(--s-ink); stroke-width: var(--s-rule-heavy); }
.tr-map__basin { fill: var(--s-screen); stroke: var(--s-ink); stroke-width: var(--s-rule-mark); }
.tr-map__wall { stroke: var(--s-ink); stroke-width: var(--s-space-xs); stroke-linecap: square; }
.tr-map__hood {
    fill: transparent; stroke: var(--s-ink); stroke-width: var(--s-rule-mark); stroke-dasharray: 4 3;
    cursor: pointer; transition: fill var(--s-dur-fast) var(--s-ease);
}
.tr-map__hood:hover { fill: var(--s-screen); }
.tr-map__hood.is-on { fill: var(--s-cerise); stroke-dasharray: none; }
.tr-map__label {
    font: var(--s-weight-heavy) var(--s-size-micro) var(--s-font-display);
    letter-spacing: var(--s-track-label); text-transform: uppercase; fill: var(--s-ink); pointer-events: none;
}
.tr-map__label.is-on { fill: var(--s-bright); }
.tr-map__sea-name, .tr-map__basin-name {
    font: italic var(--s-weight-regular) var(--s-size-micro) var(--s-font-body); fill: var(--s-ink);
}

/* ---- Tags: radio chips on paper ---------------------------------------------------------- */
.tr-tag { position: relative; display: inline-flex; }
.tr-tag input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tr-tag span {
    display: inline-flex; align-items: center;
    min-height: var(--s-tap); padding: 0 var(--s-space-m);
    background: var(--s-paper); box-shadow: inset 0 0 0 var(--s-rule-mark) var(--s-ink);
    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), color var(--s-dur-fast) var(--s-ease), transform var(--s-dur-fast) var(--s-ease);
}
.tr-tag input:hover + span { background: var(--s-screen); }
.tr-tag input:checked + span { background: var(--s-ink); color: var(--s-bright); transform: rotate(var(--s-tilt-a)); }
.tr-tag input:focus-visible + span { outline: var(--s-focus-w) solid var(--s-focus); outline-offset: var(--s-focus-offset); }
.tr-tag input:disabled + span { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }

.tr-field { display: grid; gap: var(--s-space-2xs); }
.tr-field input {
    min-height: var(--s-tap-l); padding: 0 var(--s-space-m);
    border: 0; border-bottom: var(--s-rule-heavy) solid var(--s-ink); border-radius: 0;
    background: var(--s-paper-deep);
    font: var(--s-weight-regular) var(--s-size-lede)/var(--s-leading-tight) var(--s-font-body);
}
.tr-field input:focus-visible { outline-offset: 0; }
.tr-field__hint { font-size: var(--s-size-small); color: var(--s-ink-soft); }

/* ---- Chip in: the amount picker on ink ---------------------------------------------------- */
.tr-chip { display: grid; gap: var(--s-space-l); color: var(--s-bright); }
.tr-chip__amounts { display: flex; flex-wrap: wrap; gap: var(--s-space-m); align-items: center; }
.tr-chip__amounts legend { width: 100%; }
.tr-amount { position: relative; display: inline-flex; }
.tr-amount input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.tr-amount__face {
    display: grid; place-items: center;
    min-width: var(--s-amount-w); min-height: var(--s-tap-l); padding: 0 var(--s-space-m);
    box-shadow: inset 0 0 0 var(--s-rule-heavy) var(--s-bright);
    font: var(--s-weight-black) var(--s-size-figure)/var(--s-leading-solid) var(--s-font-display);
    font-variant-numeric: tabular-nums;
    /* Halftone on hover: the dot grows, the way a darker screen reads on the drum. */
    background: radial-gradient(circle, var(--s-cerise) var(--s-dot), transparent calc(var(--s-dot) + 1%)) center / 0 0 repeat;
    transition: background-size var(--s-dur) var(--s-ease), color var(--s-dur-fast) var(--s-ease), transform var(--s-dur-fast) var(--s-ease);
}
.tr-amount input:hover + .tr-amount__face { background-size: var(--s-dot-cell) var(--s-dot-cell); }
.tr-amount input:checked + .tr-amount__face {
    background: var(--s-cerise); color: var(--s-bright);
    box-shadow: var(--s-shadow-x) var(--s-shadow-y) 0 var(--s-screen);
    transform: skewX(var(--s-skew));
}
.tr-amount input:focus-visible + .tr-amount__face { outline: var(--s-focus-w) solid var(--s-focus-on-ink); outline-offset: var(--s-focus-offset); }
.tr-amount--other .tr-amount__face { font-size: var(--s-size-h3); }
.tr-chip__other {
    display: inline-flex; align-items: center; gap: var(--s-space-xs);
    min-height: var(--s-tap-l); padding: 0 var(--s-space-m);
    border-bottom: var(--s-rule-heavy) solid var(--s-bright);
}
.tr-chip__other[hidden] { display: none; }
.tr-chip__cur { font: var(--s-weight-black) var(--s-size-figure)/var(--s-leading-solid) var(--s-font-display); color: var(--s-screen); }
.tr-chip__other input {
    width: calc(var(--s-amount-w) * 1.4); border: 0; background: transparent; color: var(--s-bright);
    font: var(--s-weight-black) var(--s-size-figure)/var(--s-leading-solid) var(--s-font-display);
}
.tr-chip__other input:focus-visible { outline-color: var(--s-focus-on-ink); }
.tr-chip__buys { min-height: calc(var(--s-size-lede) * 2); font-size: var(--s-size-lede); color: var(--s-bright); max-width: var(--s-measure-lede); }
.tr-chip__buys b { color: var(--s-screen); }
.tr-chip__go { justify-self: start; }
.tr-chip__concept {
    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-screen);
}
.tr-chip__status { min-height: var(--s-size-body); font-size: var(--s-size-small); color: var(--s-bright); max-width: var(--s-measure-lede); }
.tr-imprint {
    font-size: var(--s-size-micro); line-height: var(--s-leading-small);
    padding: var(--s-space-xs) var(--s-space-s);
    border: var(--s-rule) solid currentColor; justify-self: start;
}
.tr-imprint--on-ink { color: var(--s-bright-soft); }

/* The monthly switch */
.tr-switch { position: relative; display: inline-flex; align-items: center; gap: var(--s-space-m); min-height: var(--s-tap); cursor: pointer; }
.tr-switch input { position: absolute; opacity: 0; width: var(--s-switch-w); height: var(--s-switch-h); margin: 0; cursor: pointer; }
.tr-switch__track {
    flex: none; position: relative;
    width: var(--s-switch-w); height: var(--s-switch-h);
    box-shadow: inset 0 0 0 var(--s-rule-mark) var(--s-bright);
    transform: skewX(var(--s-skew));
    transition: background-color var(--s-dur-fast) var(--s-ease);
}
.tr-switch__knob {
    position: absolute; top: calc((var(--s-switch-h) - var(--s-switch-knob)) / 2); left: calc((var(--s-switch-h) - var(--s-switch-knob)) / 2);
    width: var(--s-switch-knob); height: var(--s-switch-knob); background: var(--s-bright);
    transition: transform var(--s-dur) var(--s-ease-drop);
}
.tr-switch input:checked + .tr-switch__track { background: var(--s-cerise); }
.tr-switch input:checked + .tr-switch__track .tr-switch__knob { transform: translateX(calc(var(--s-switch-w) - var(--s-switch-h))); }
.tr-switch input:focus-visible + .tr-switch__track { outline: var(--s-focus-w) solid var(--s-focus-on-ink); outline-offset: var(--s-focus-offset); }
.tr-switch__label { 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-switch__hint { display: block; font-size: var(--s-size-small); color: var(--s-bright-soft); }

/* ---- Footer: the surname outlined, cropped by the page --------------------------------------- */
.tr-foot {
    position: relative; overflow: hidden;
    padding: var(--s-section-s) var(--s-gutter) var(--s-space-2xl);
    background: var(--s-paper-deep);
    border-top: var(--s-rule-heavy) solid var(--s-ink);
}
.tr-foot__name {
    margin: 0 0 var(--s-space-2xl) calc(var(--s-gutter) * -0.5);
    font: var(--s-weight-black) var(--s-size-wordmark-foot)/var(--s-leading-name) var(--s-font-display);
    text-transform: uppercase; letter-spacing: var(--s-track-name); white-space: nowrap;
    color: transparent; -webkit-text-stroke: var(--s-outline-name) var(--s-cerise);
}
.tr-foot__grid {
    max-width: var(--s-max); margin-inline: auto;
    display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: var(--s-space-2xl) var(--s-gutter);
}
.tr-foot__line { font: var(--s-weight-black) var(--s-size-h3)/var(--s-leading-tight) var(--s-font-display); text-transform: uppercase; }
.tr-foot__ticket { margin-top: var(--s-space-s); color: var(--s-ink-soft); }
.tr-foot__h { margin-bottom: var(--s-space-s); 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-foot__pages a { display: inline-flex; align-items: center; min-height: var(--s-tap); text-decoration: none; font: var(--s-weight-heavy) var(--s-size-nav)/var(--s-leading-solid) var(--s-font-display); text-transform: uppercase; }
.tr-foot__pages a:hover, .tr-foot__pages a[aria-current="page"] { color: var(--s-cerise-ink); }
.tr-foot__imprint { display: grid; gap: var(--s-space-m); align-content: start; }
.tr-foot__printed { font-size: var(--s-size-small); color: var(--s-ink-soft); }
.tr-foot__concept {
    grid-column: 1 / -1; padding-top: var(--s-space-l);
    border-top: var(--s-rule) solid var(--s-ink-faint);
    font-size: var(--s-size-small); color: var(--s-ink-soft); max-width: var(--s-measure-body);
}
.tr-foot__top { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; min-height: var(--s-tap); font-weight: var(--s-weight-bold); }

/* ---- Sub-page head: the title beside its own print, the surname as a pink ground --------- */
.tr-subhead {
    position: relative; overflow: hidden;
    padding: var(--s-section-s) var(--s-gutter) var(--s-space-3xl);
    border-bottom: var(--s-rule-heavy) solid var(--s-ink);
}
.tr-subhead__inner {
    position: relative; z-index: var(--s-z-lift); max-width: var(--s-max); margin-inline: auto;
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: var(--s-space-4xl);
    row-gap: var(--s-space-l); align-items: end;
}
.tr-subhead__inner > :not(.tr-subart) { grid-column: 1; }
.tr-subhead__ghost {
    position: absolute; right: calc(var(--s-gutter) * -2); bottom: calc(var(--s-space-xl) * -1);
    font: var(--s-weight-black) var(--s-size-name)/var(--s-leading-solid) var(--s-font-display);
    text-transform: uppercase; letter-spacing: var(--s-track-name); white-space: nowrap;
    color: var(--s-screen); mix-blend-mode: multiply; pointer-events: none;
    text-box: trim-both cap alphabetic;
}
.tr-subhead .tr-h1 { max-width: var(--s-measure-strip); }
.tr-subart {
    grid-column: 2; grid-row: 1 / span 6; align-self: stretch;
    position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--s-space-s);
    padding: var(--s-space-xl) var(--s-space-xl) var(--s-space-m);
    background: var(--s-paper); box-shadow: 0 var(--s-space-xs) var(--s-space-l) var(--s-ink-shade);
    transform: rotate(var(--s-tilt-b));
    min-height: calc(var(--s-chart-h) * 1.1);
}
.tr-subart__print { position: relative; min-height: 0; }
.tr-subart__plate { position: absolute; inset: 0; mix-blend-mode: multiply; }
.tr-subart__plate--c { transform: translate(var(--s-reg-x), var(--s-reg-y)); }
.tr-subart__cap {
    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); justify-self: end;
}
.tr-motion .tr-subart__plate--k { animation: tr-ink-in var(--s-dur-ink) var(--s-ease-drop) both; }
.tr-motion .tr-subart__plate--c { animation: tr-pink-in var(--s-dur-pink) var(--s-ease) both; animation-delay: var(--s-dur-gap); }
@keyframes tr-ink-in { from { transform: translateY(var(--s-drop)); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tr-pink-in {
    0% { transform: translate(var(--s-reg-in-x), var(--s-reg-y)); opacity: 0; }
    55% { transform: translate(var(--s-reg-wobble-a), var(--s-reg-y)); opacity: 1; }
    75% { transform: translate(var(--s-reg-wobble-b), var(--s-reg-y)); }
    90% { transform: translate(var(--s-reg-wobble-c), var(--s-reg-y)); }
    100% { transform: translate(var(--s-reg-x), var(--s-reg-y)); }
}

/* ---- Reveal (JS + motion only) -------------------------------------------------------------- */
.tr-motion [data-tr-reveal] {
    opacity: 0; transform: translateY(var(--s-reveal-y));
    transition: opacity var(--s-dur-reveal) var(--s-ease), transform var(--s-dur-reveal) var(--s-ease);
}
.tr-motion [data-tr-reveal].is-in { opacity: 1; transform: none; }

/* ---- Tablet --------------------------------------------------------------------------------- */
@media (max-width: 1079px) {
    .tr-nav__links { display: none; }
    .tr-nav__cta { margin-left: auto; }
    .tr-menu { display: block; }
    .tr-foot__grid { grid-template-columns: 1fr 1fr; }
    .tr-foot__lead { grid-column: 1 / -1; }
}

/* ---- Phone ---------------------------------------------------------------------------------- */
@media (max-width: 719px) {
    .tr-only-wide { display: none; }
    .tr-only-phone { display: block; }
    .tr-nav { gap: var(--s-space-s); }
    .tr-nav__cta { display: none; }
    .tr-menu { margin-left: auto; }
    .tr-wordmark__for { display: none; }
    .tr-stub { grid-template-columns: var(--s-stub-date-p) 1fr; }
    .tr-stub__body { padding: var(--s-space-m); }
    .tr-stub__ics { grid-column: 1 / -1; min-height: var(--s-tap-l); border-left: 0; border-top: var(--s-rule-mark) dashed var(--s-ink-faint); }
    .tr-stub__ics span { max-width: none; }
    .tr-stub__admit { display: none; }
    .tr-chip__go { justify-self: stretch; }
    .tr-foot__grid { grid-template-columns: 1fr; }
    .tr-subhead { padding-top: var(--s-space-2xl); }
    .tr-subhead__inner { grid-template-columns: 1fr; }
    .tr-subart { grid-column: 1; grid-row: auto; order: -1; min-height: calc(var(--s-chart-h-p) * 1.2); padding: var(--s-space-m) var(--s-space-m) var(--s-space-s); transform: rotate(var(--s-tilt-a)); margin-bottom: var(--s-space-s); }
    .tr-subhead__ghost { display: none; }
}

/* ---- Reduced motion: a designed final state, not a broken one -------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; }
    .tr-stub, .tr-stub:nth-child(even), .tr-stub:hover { transform: rotate(var(--s-tilt-a)); }
}