/* The course landing's programme composition (a hero in the `programme`
   variant): the live workshop of a series set as an event programme. Linked
   by many_ways/course_landings/show after course_landing.css, only when the
   page is a programme; builds on its pieces (the bar, the purchase card, the
   band's pills). Layout, the ticket and the plates live here; controls and
   type come from the .sl-* vocabulary, every UI colour from the tokens.

   The grid is visible on purpose: hairline cells in the hero, ruled rows
   with a label column below. Two things break it, both the way to book:
   the hero's ticket across the seam, and the purchase card across the
   pricing row's rule. The plates paint with their own palette (--pl-*,
   the teachers' colours) from programme_plates.css, defined once for the
   day and once for the night; nothing else on the page reads it. Motion:
   the lead plate assembles once on arrival (rings open, the petals turn
   into place); stilled by reduced motion and ?static=1. */

.clp {
  --clp-label: 280px;
  --clp-gap: 64px;
}

.clp-wrap, .clp-row { max-width: 1152px; margin: 0 auto; padding: 0 32px; }

/* ── the plates ── the palette (--pl-*) and the plates' assembly live in
   programme_plates.css, linked before this sheet by every page that shows
   plates (the root carries `plates`); here only the lead plate's motion */

/* the one authored moment: the lead plate assembles — rings open, the
   petals turn through the quadrants into place (each quadrant keeps its
   colours, so a petal changes colour as it crosses an axis), the core
   settles last. From a visible start, eased out. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.sl-static) .clp-plate--lead .pl-rings,
  html:not(.sl-static) .clp-plate--lead .pl-petals,
  html:not(.sl-static) .clp-plate--lead .pl-core { transform-box: view-box; transform-origin: 100px 100px; }
  html:not(.sl-static) .clp-plate--lead .pl-rings { animation: clp-open 1.4s cubic-bezier(.16, 1, .3, 1) both; }
  html:not(.sl-static) .clp-plate--lead .pl-petals { animation: clp-turn 2.2s cubic-bezier(.16, 1, .3, 1) .1s both; }
  html:not(.sl-static) .clp-plate--lead .pl-core { animation: clp-open 1.2s cubic-bezier(.16, 1, .3, 1) .5s both; }
}
@keyframes clp-open { from { transform: scale(.9); opacity: .4; } }
@keyframes clp-turn { from { transform: rotate(-90deg) scale(.92); opacity: .5; } }

/* ── the hero: two ruled cells and the ticket across their seam ── */
.clp-hero { position: relative; }
.clp-hero__grid {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
  grid-template-rows: auto auto; border-bottom: 1px solid var(--line);
}
/* the seam between the words and the plate: the rule the ticket breaks */
.clp-hero__grid::before {
  content: ""; position: absolute; top: 0; bottom: 0; pointer-events: none;
  left: calc((100% - 264px) * 7 / 12 + 156px); border-left: 1px solid var(--line);
}
.clp-hero__text { grid-column: 1 / span 7; grid-row: 1; padding: 52px 48px 36px 0; min-width: 0; }
.clp-title { font-size: clamp(48px, 5.6vw, 76px); line-height: .98; letter-spacing: -0.038em; text-wrap: balance; }
.clp-title em { font-style: normal; color: var(--lav); }
.clp-sub {
  margin: 26px 0 0; max-width: 24em; font-size: 22px; line-height: 1.32; letter-spacing: -0.016em;
  font-weight: 500; color: var(--ink2); text-wrap: balance;
}
.clp-by { display: flex; align-items: center; gap: 14px; margin-top: 32px; }
/* the faces never give way to the names: an engine that counts the
   portraits' min-content as nothing (Firefox) would otherwise shrink the
   row and slide the names over the second face */
.clp-by__faces { display: flex; flex: none; }
.clp-by__faces > * + * { margin-left: -12px; }
.clp-by__faces > * { outline: 3px solid var(--paper); }
.clp-by__names { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.012em; color: var(--ink); }
.clp-by__link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lav-edge); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.clp-by__link:hover { color: var(--accent-hover); text-decoration-color: var(--lav); }
.clp-by__amp { color: var(--ink2); font-weight: 500; }

/* the plate's cell: the series' line at the top, level with the title; the
   plate standing at the foot of the hero, so the ticket (the row under the
   words) always lands on its lower-left corner, whatever the title's length */
.clp-hero__plate { grid-column: 8 / span 5; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 28px; padding: 52px 0 64px 36px; }
.clp-hero__plate .clp-plate { margin-top: auto; }
.clp-hero__series { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 14.5px; font-weight: 500; color: var(--ink2); }
.clp-hero__series a { color: var(--ink); font-weight: 600; text-decoration: none; text-wrap: balance; }
.clp-hero__series a:hover { color: var(--accent-hover); }
.clp-hero__series span { flex: none; font-variant-numeric: tabular-nums; }

/* the ticket: date | price and the call, a perforated stub, notched where
   the stub tears off; turned a little off the grid it crosses */
.clp-ticket {
  --stub: 236px; --notch: 12px;
  grid-column: 3 / span 7; grid-row: 2; align-self: end; position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--stub);
  margin: 8px 0 -64px; border-radius: 20px;
  background: var(--sun-card); color: var(--on-sun-card);
  transform: rotate(-1.8deg); transform-origin: 40% 50%;
  -webkit-mask:
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, transparent 98%, black) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, transparent 98%, black) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, transparent 98%, black) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, transparent 98%, black) bottom / 100% 51% no-repeat;
}
/* by night the ticket keeps its colour: the night ochre, ink on it, the
   call a dark pill */
:root[data-theme="dark"] .clp-ticket:not(.clp-ticket--quiet) { background: var(--sun); color: var(--on-sun); --warm-ring: var(--on-sun); }
:root[data-theme="dark"] .clp-ticket:not(.clp-ticket--quiet) .sl-btn--dark { background: var(--paper); color: var(--ink); }
:root[data-theme="dark"] .clp-buy.cl-card--sun { background: var(--sun); color: var(--on-sun); --warm-ring: var(--on-sun); }
:root[data-theme="dark"] .clp-buy .sl-btn--dark { background: var(--paper); color: var(--ink); }
/* the stamp keeps the call's colours by night, and the email field stays
   a light field on the ochre so it never reads as a second button */
:root[data-theme="dark"] .clp-ticket:not(.clp-ticket--quiet) .sl-badge--ink,
:root[data-theme="dark"] .clp-buy .sl-badge--ink { background: var(--paper); color: var(--ink); }
:root[data-theme="dark"] .clp-buy .cl-join .sl-input { background: var(--ink); color: var(--paper); border-color: transparent; }
:root[data-theme="dark"] .clp-buy .cl-join .sl-input::placeholder { color: color-mix(in srgb, var(--paper) 72%, var(--ink)); }
.clp-ticket--quiet { background: var(--card); color: var(--ink); outline: 1px solid var(--line2); outline-offset: -1px; }
.clp-ticket__when { padding: 26px 28px 26px 30px; min-width: 0; }
.clp-ticket__date { display: flex; align-items: center; gap: 14px; margin: 0; }
.clp-ticket__day { font-size: 76px; font-weight: 700; line-height: .82; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.clp-ticket__month { font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.clp-ticket__time { margin: 18px 0 0; font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; }
.clp-ticket__time b { font-weight: 700; }
.clp-ticket__yours { margin: 6px 0 0; font-size: 14.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.clp-ticket__yours b { font-weight: 700; }
.clp-ticket__stub { position: relative; padding: 24px 26px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.clp-ticket__stub::before {
  content: ""; position: absolute; left: -1px; top: 20px; bottom: 20px; width: 2px;
  background: radial-gradient(circle, currentColor 1px, transparent 1.4px) 0 0 / 2px 8px repeat-y; opacity: .4;
}
.clp-ticket__price { margin: 0; font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.clp-ticket__go { width: 100%; }
.clp-ticket__seats, .clp-ticket__state, .clp-ticket__note { margin: 0; font-size: 13.5px; font-weight: 500; }
.clp-ticket .sl-badge { align-self: flex-start; }
/* before booking opens the stub carries the fares, one line each, the way
   a ticket prints its fares: a wider stub, the name, the leader, the price */
.clp-ticket--fares { --stub: 288px; }
.clp-ticket .cl-fares { margin: 2px 0 4px; }
.clp-ticket .cl-fare { grid-template-areas: "name leader price"; column-gap: 8px; padding: 6px 0; }
.clp-ticket .cl-fare + .cl-fare { border-top: 0; }
.clp-ticket .cl-fare__name { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.clp-ticket .cl-fare__leader { margin-bottom: 4px; }
.clp-ticket .cl-fare__price { font-size: 30px; letter-spacing: -0.03em; }
.clp-ticket__note { margin-top: -6px; text-align: right; }
/* the warm ticket's focus ring is its own ink (teal on ochre is under 3:1) */
.clp-ticket:not(.clp-ticket--quiet) { --warm-ring: var(--on-sun-card); }
.clp-ticket:not(.clp-ticket--quiet) :focus-visible { outline-color: var(--warm-ring); }

/* the hero photograph and its caption */
.clp-photo { margin-top: 20px; }
.clp-photo__frame { aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden; background: var(--shelf); }
.clp-photo__frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.clp-photo__caption { margin-top: 14px; font-size: 14.5px; font-weight: 500; color: var(--ink2); }

/* ── the rows: a label column, a rule, the body ── */
.clp-rows { padding: 56px 0 96px; }
.clp-row__grid {
  position: relative; display: grid; grid-template-columns: var(--clp-label) minmax(0, 1fr); column-gap: var(--clp-gap);
  padding: 60px 0 76px; border-top: 1px solid var(--line);
}
.clp-row__grid::before {
  content: ""; position: absolute; top: 0; bottom: 0; pointer-events: none;
  left: calc(var(--clp-label) + var(--clp-gap) / 2); border-left: 1px solid var(--line);
}
.clp-row__label, .clp-row__body { min-width: 0; }
.clp-h2 { margin: 0; font-size: 24px; line-height: 1.16; letter-spacing: -0.022em; font-weight: 700; color: var(--ink); text-wrap: balance; }
/* a type without a programme partial keeps its own head and body, ruled like the rest */
.clp-row:not(:has(.clp-row__grid)):not(:has(.clp-band)) { padding-top: 60px; padding-bottom: 76px; border-top: 1px solid var(--line); }

.clp-prose p { margin: 0 0 18px; max-width: 64ch; font-size: 18px; line-height: 1.6; letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; }
.clp-prose p:last-child { margin-bottom: 0; }
.clp-prose .clp-lead { font-size: 22px; line-height: 1.45; letter-spacing: -0.016em; font-weight: 500; }
.clp-prose--cols { columns: 2 300px; column-gap: 48px; }
.clp-prose--cols p { break-inside: avoid; }
.clp-list { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--line); }
.clp-list li { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 17px; color: var(--ink); }

/* the statement row: the workshop's own words, set large */
.clp-statement p { margin: 0 0 20px; max-width: 33em; font-size: clamp(20px, 2vw, 24px); line-height: 1.42; letter-spacing: -0.018em; font-weight: 500; color: var(--ink); text-wrap: pretty; }
.clp-statement p:last-child { margin-bottom: 0; }

/* the afternoon: the date set large beside the span of its hours */
.clp-day { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 36px; align-items: center; }
.clp-day__date { display: flex; align-items: center; gap: 14px; margin: 0; }
.clp-day__num { font-size: 76px; font-weight: 700; line-height: .8; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; color: var(--ink); }
.clp-day__month { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.clp-span { position: relative; min-width: 0; container-type: inline-size; }
.clp-span__ends { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink); }
.clp-span__track { position: relative; display: flex; height: 44px; }
.clp-span__on { flex: var(--a) 1 0; background: var(--lavt); border: 1px solid var(--lav-edge); }
.clp-span__on:first-child { border-radius: 999px 0 0 999px; }
.clp-span__on:last-of-type { flex-grow: var(--b); border-radius: 0 999px 999px 0; }
.clp-span__on:first-child:last-of-type { border-radius: 999px; }
.clp-span__pause {
  flex: var(--g) 1 0; border-block: 1px dashed var(--line2);
  background: repeating-linear-gradient(-45deg, transparent 0 7px, var(--line) 7px 8px);
}
.clp-span__tick { position: absolute; bottom: -7px; width: 1px; height: 6px; background: var(--line2); }
.clp-span__caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 14px 0 0; font-size: 14.5px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.clp-span__caption b { color: var(--ink); font-weight: 600; }
.clp-span__break { position: absolute; left: 50%; transform: translateX(-50%); color: var(--ink); font-weight: 500; white-space: nowrap; }
/* a span too narrow to hang the break under the hatch without touching the
   hours (a phone, or the tablet's label column): the break steps into line
   at the caption's far end, keyed to the hatch by a swatch of it */
@container (max-width: 480px) {
  .clp-span__break { position: static; transform: none; display: inline-flex; align-items: center; gap: 7px; }
  .clp-span__break::before {
    content: ""; flex: none; width: 18px; height: 11px; border: 1px dashed var(--line2);
    background: repeating-linear-gradient(-45deg, transparent 0 3px, var(--line2) 3px 4px);
  }
}
.clp-span__yours { margin: 6px 0 0; font-size: 14.5px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.clp-span__yours b { color: var(--ink); font-weight: 700; }
.clp-zones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; margin: 40px 0 0; }
.clp-zones__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.clp-zones dt { font-size: 14.5px; color: var(--ink2); }
.clp-zones dd { margin: 0; font-size: 14.5px; color: var(--ink2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.clp-zones dd b { font-size: 17px; font-weight: 600; color: var(--ink); }
.clp-note { margin: 22px 0 0; max-width: 60ch; font-size: 16px; line-height: 1.55; color: var(--ink2); }

/* the teachers: faces and names in the label column */
.clp-faces { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.clp-faces li { display: flex; align-items: center; gap: 14px; }
.clp-faces__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.clp-faces__name { font-size: 16px; font-weight: 700; letter-spacing: -0.012em; color: var(--ink); text-decoration: none; }
a.clp-faces__name:hover { color: var(--accent-hover); }
.clp-faces__place { font-size: 14px; color: var(--ink2); }
.clp-figure { margin: 0 0 36px; aspect-ratio: 3 / 2; border-radius: 20px; overflow: hidden; background: var(--shelf); }
.clp-figure img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

/* ── the fold: a long body shown as one line until asked — the lead clipped
   to a single line with the button beside it (under it on a narrow column);
   open, the whole text with "Show less" at its end ── */
.clp-fold.is-folded { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; }
.clp-fold.is-folded .clp-fold__lead { flex: 1 1 320px; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clp-fold.is-folded .clp-fold__toggle { flex: none; }
.clp-fold__toggle { appearance: none; background: none; border: 0; padding: 0; }
.clp-fold__rest:not([hidden]) + .clp-fold__toggle { margin-top: 18px; }
.clp-fold__toggle svg { width: 18px; height: 18px; transition: transform .25s ease; }
.clp-fold__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.clp-fold__toggle[aria-expanded="true"] .clp-fold__more,
.clp-fold__toggle[aria-expanded="false"] .clp-fold__less { display: none; }

/* the reading: the book's citation — in the workshop's row, a label over
   it and a smaller cut under a hairline */
.clp-book { max-width: 40em; }
.clp-book--inset { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--line); }
.clp-book__label { margin: 0 0 12px; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink2); }
.clp-book--inset .clp-book__title { font-size: 24px; }
.clp-book--inset .clp-book__author { margin-top: 6px; font-size: 17px; }
.clp-book--inset .clp-book__detail { margin-top: 14px; font-size: 17px; }
.clp-book__title { margin: 0; font-size: 30px; line-height: 1.15; letter-spacing: -0.026em; font-weight: 700; color: var(--ink); text-wrap: balance; }
.clp-book__author { margin: 10px 0 0; font-size: 18px; color: var(--ink2); }
.clp-book__detail { margin: 20px 0 0; font-size: 18px; line-height: 1.55; color: var(--ink); }

/* the year: twelve Sundays as a ruled list, the page's own the warm row */
.clp-year { list-style: none; margin: 0 0 76px; padding: 0; border-top: 1px solid var(--line); }
.clp-year__row {
  display: grid; grid-template-columns: 64px 112px minmax(0, 1fr) 210px 128px 150px; gap: 24px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.clp-year__row.is-current { margin: -1px -20px 0; padding: 18px 20px; border-radius: 18px; border-bottom-color: transparent; background: var(--sun-wash); position: relative; }
.clp-year__plate { width: 64px; }
.clp-year__date { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.clp-year__date b { font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; min-width: 1.3em; }
.clp-year__date span { font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--ink2); }
.clp-year__what { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.clp-year__title { font-size: 17px; font-weight: 700; letter-spacing: -0.016em; line-height: 1.3; color: var(--ink); text-wrap: balance; }
.clp-year__sub { font-size: 14.5px; line-height: 1.4; color: var(--ink2); }
.clp-year__who { font-size: 14.5px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.clp-year__time { font-size: 14px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.clp-year__time b { font-weight: 600; color: var(--ink); }
.clp-year__go { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

/* the purchase row: the card steps across the rule — the second break */
/* the purchase row: the heading in the label cell, the card under it set
   from the middle of the label column across the rule — the second break,
   in the ticket's own grammar: notched where its halves meet, the seam
   perforated, a counter-turn to the hero's */
.clp-row__grid--ticket { grid-template-rows: auto auto; }
.clp-row__grid--ticket .clp-row__label { grid-row: 1; grid-column: 1; }
.clp-row__grid--ticket .clp-row__body { grid-row: 2; grid-column: 1 / -1; margin-top: 30px; padding-left: calc(var(--clp-label) / 2); }
.clp-buy { position: relative; z-index: 1; max-width: none; }
@media (min-width: 901px) {
  /* the shell turns, the contents stay level: the consent, the fine print
     and the button never sit on a slant */
  .clp-buy.cl-card--buy, :root[data-theme="dark"] .clp-buy.cl-card--buy { position: relative; isolation: isolate; background: none; }
  .clp-buy.cl-card--buy::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background: var(--sun-card);
    --notch: 13px;
    transform: rotate(.8deg);
    -webkit-mask:
      radial-gradient(circle var(--notch) at calc(50% + 24px) 0, transparent 98%, black) top / 100% 51% no-repeat,
      radial-gradient(circle var(--notch) at calc(50% + 24px) 100%, transparent 98%, black) bottom / 100% 51% no-repeat;
    mask:
      radial-gradient(circle var(--notch) at calc(50% + 24px) 0, transparent 98%, black) top / 100% 51% no-repeat,
      radial-gradient(circle var(--notch) at calc(50% + 24px) 100%, transparent 98%, black) bottom / 100% 51% no-repeat;
  }
  :root[data-theme="dark"] .clp-buy.cl-card--buy::before { background: var(--sun); }
  .clp-buy .cl-buy__act { position: relative; border-left: 0; }
  .clp-buy .cl-buy__act::before {
    content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px;
    background: radial-gradient(circle, currentColor 1px, transparent 1.4px) 0 0 / 2px 8px repeat-y; opacity: .4;
  }
}

/* the close: the band, the plate rising out of its edge */
.clp-band {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: center; gap: 40px;
  margin-top: 40px; padding: 80px 0 80px 64px; border-radius: 28px; background: var(--band); color: var(--band-fg);
}
.clp-band__h { margin: 0; max-width: 21em; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.25; letter-spacing: -0.022em; font-weight: 700; color: var(--band-fg); text-wrap: balance; }
.clp-band__p { margin: 16px 0 0; max-width: 56ch; font-size: 17px; line-height: 1.55; opacity: .9; }
.clp-band .cl-cta { margin-top: 32px; }
.clp-band__contact { margin: 22px 0 0; font-size: 15px; font-weight: 500; opacity: .9; }
.clp-band__mail { color: var(--band-fg); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--band-fg) 50%, transparent); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.clp-band__mail:hover { text-decoration-color: var(--band-fg); }
.clp-band__plate { align-self: stretch; position: relative; }
.clp-band__plate .clp-plate { position: absolute; top: 50%; left: 0; width: 420px; transform: translateY(-50%) rotate(8deg); }

/* ── tablet and phone ── */
@media (max-width: 1100px) {
  .clp { --clp-label: 220px; --clp-gap: 48px; }
  .clp-year__row { grid-template-columns: 56px 104px minmax(0, 1fr) 180px 140px; }
  .clp-year__time { display: none; }
}
@media (max-width: 900px) {
  .clp-wrap, .clp-row { padding: 0 20px; }
  .clp-hero__grid { grid-template-columns: minmax(0, 1fr); border-bottom: 0; }
  .clp-hero__grid::before { display: none; }
  .clp-hero__text { grid-column: 1; order: 1; padding: 36px 0 0; }
  .clp-title { font-size: clamp(40px, 10vw, 56px); }
  .clp-sub { font-size: 20px; margin-top: 18px; }
  /* on the phone the ticket comes straight after the words, so the date, the
     price and the call are on the first screen; it breaks over the plate's
     top edge instead, and the series' line goes under the plate */
  .clp-ticket { grid-column: 1; grid-row: auto; order: 2; margin: 28px 6px -40px; transform: rotate(-1.2deg); }
  .clp-hero__plate { grid-column: 1; grid-row: auto; order: 3; flex-direction: column-reverse; padding: 0; gap: 16px; width: min(100%, 520px); justify-self: center; }
  .clp-hero__plate .clp-plate { margin-top: 0; }
  .clp-hero__series { padding: 14px 0 0; border-bottom: 0; border-top: 1px solid var(--line); }
  .clp-photo { margin-top: 32px; }
  .clp-photo__frame { aspect-ratio: 4 / 3; border-radius: 24px; }
  .clp-rows { padding-top: 32px; }
  .clp-row__grid { grid-template-columns: minmax(0, 1fr); row-gap: 22px; padding: 40px 0 52px; }
  .clp-row__grid::before { display: none; }
  .clp-row__grid--statement .clp-row__label { display: none; }
  .clp-day { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .clp-zones { grid-template-columns: minmax(0, 1fr); }
  .clp-prose--cols { columns: 1; }
  .clp-row__grid--ticket .clp-row__body { grid-column: 1; padding-left: 0; margin-top: 4px; }
  .clp-year__row { grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "plate date" "plate what" "plate who" "plate go"; row-gap: 6px; align-items: start; }
  .clp-year__plate { grid-area: plate; width: 52px; }
  .clp-year__date { grid-area: date; }
  .clp-year__what { grid-area: what; }
  .clp-year__who { grid-area: who; }
  .clp-year__go { grid-area: go; flex-direction: row; align-items: center; gap: 12px; }
  .clp-year__go:empty { display: none; }
  .clp-year__date b { font-size: 24px; }
  .clp-year__row.is-current { margin: -1px -12px 0; padding: 16px 12px; }
  .clp-band { grid-template-columns: minmax(0, 1fr); padding: 48px 24px 0; gap: 0; }
  .clp-band__plate { height: 180px; }
  .clp-band__plate .clp-plate { top: 24px; left: auto; right: -60px; width: 300px; transform: rotate(8deg); }
}
@media (max-width: 520px) {
  .clp-ticket { --stub: 100%; grid-template-columns: minmax(0, 1fr); -webkit-mask: none; mask: none; margin: 24px 0 -32px; }
  .clp-ticket__stub { padding-top: 22px; margin: 0 4px; }
  /* the stub tears off along the width on the phone */
  .clp-ticket__stub::before { left: 20px; right: 20px; top: -1px; bottom: auto; width: auto; height: 2px; background-size: 8px 2px; background-repeat: repeat-x; }
  .clp-ticket__day { font-size: 64px; }
  .clp-day__num { font-size: 64px; }
  .clp-book__title { font-size: 24px; }
}