/* goonbate: the release calendar (/releases/). sits on css/style.css: the tokens, the age gate, the header and footer, the
   living type (js/proximity.js) and the CD itself (.cd and its layers) all come from there.
   2026-10-19 rework, on the owner's notes ("major UI/CSS work"; the hook question is blasé; "where: patreon" is the dumbest
   thing; icons, tier badges, proper type; title, then the calendar, then the discs, wiggly separators between):
     the wobbly title > the month calendar > coming up (the next release in full, then the nights after) > just out,
     a hand-drawn wiggle between each.
   type: the site's own and nothing else. the condensed bold, lowercase, for everything that is a name or a number; the
   quiet Helvetica Neue for what a file does; Franklin capitals, tracked, only for the tiny labels; Roboto Flex for the two
   living headings, as "new to goonbate." on the home page.
   colour: black ground, the site's off-white ink in alphas, red as the accent; every other colour is the release art, the
   tier badges (Patreon's own, images/tiers) and each audience tag's colour. hover is the house inversion, as a hard cut.
   motion: cuts. the title and the wiggles boil (two drawings swapped on the home page's 240ms tick), the countdown cuts on
   the second, a disc angles toward the pointer over it. nothing spins. */
body.rel { overflow-x: hidden; }
.rel main { display: block; overflow-x: clip; }
html.touch { scroll-snap-type: none; }
html.touch .site-footer { scroll-snap-align: none; scroll-snap-stop: normal; }
.rel-header { position: relative; z-index: 5; }
.site-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--red); }
.site-nav a[aria-current="page"]:hover, .site-nav a[aria-current="page"]:focus-visible { box-shadow: none; }
.rel-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* one measure for the whole page, the home page's (1240 wide plus the frame) */
.rel { --max: calc(min(1240px, 92vw) + var(--frame) * 2); --cd: 200px; }
.rel-top, .rel-cal-sec, .rel-all, .rel-out, .rel-join { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--frame); padding-right: var(--frame); }

/* ---------- the hand-drawn marks: icons, arrows, the wiggles ---------- */
.rel-ic { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.rel-ic-a { stroke-width: 2; } .rel-ic-b { stroke-width: 1.3; }
.rel-wig { display: block; width: min(1240px, calc(100% - var(--frame) * 2)); height: 26px; margin: clamp(2.8rem, 8vh, 5.4rem) auto; overflow: visible; }
.rel-wig path { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rel-wig-b, .rel-wig.boil .rel-wig-a { visibility: hidden; } .rel-wig.boil .rel-wig-b { visibility: visible; }

/* ---------- 0. the title ---------- */
/* sized in container units on one unbreakable line so it fills the measure at every width; the wobble is an svg turbulence
   drawing on the letters, two of them, swapped on the boil tick (with motion off it holds the first: still wobbly, still) */
.rel-top { container-type: inline-size; padding-top: clamp(1.6rem, 6vh, 4rem); }
.rel-title { position: relative; font-family: var(--display); font-stretch: condensed; font-weight: 700; text-transform: lowercase; color: var(--ink);
  font-size: 15.6cqi; line-height: .84; letter-spacing: -.02em; word-spacing: -.05em; }
.rel-title span { display: block; white-space: nowrap; padding: .04em 0 .08em; }
/* SPEED (2026-10-19, owner: "the wiggly titles are laggy"): swapping the filter on the heading made Safari run the turbulence
   on the whole title four times a second, in software. now the two drawings are two copies, each filtered once on a layer of
   its own (will-change), and the boil only swaps which is seen (opacity, which the compositor does without repainting) */
.rel-title > span { filter: url(#wobA); will-change: transform; }
.rel-title > .rel-title-b { position: absolute; left: 0; top: 0; width: 100%; filter: url(#wobB); opacity: 0; }
.rel-title.boil > span:first-child { opacity: 0; } .rel-title.boil > .rel-title-b { opacity: 1; }
@media (max-width: 700px) { .rel-title > span { filter: url(#wobAs); } .rel-title > .rel-title-b { filter: url(#wobBs); } }
.rel-lede { margin-top: clamp(1.2rem, 3vh, 2rem); font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.5; color: var(--ink-60); }
/* under the title: the counts, each with its mark, then the line from now to the last night booked */
.rel-span-c { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem clamp(1.4rem, 3vw, 2.6rem); }
.rel-span-k { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--display); font-stretch: condensed; font-weight: 700; text-transform: lowercase; color: var(--ink); line-height: .9; }
.rel-span-k .rel-ic { width: clamp(2.2rem, 3.6vw, 3.2rem); height: clamp(2.2rem, 3.6vw, 3.2rem); color: var(--red); }
.rel-span-k .rel-ic-a { stroke-width: 1.7; } .rel-span-k .rel-ic-b { stroke-width: 1.2; }
.rel-span-k b { font-size: clamp(2.8rem, 5.4vw, 4.6rem); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rel-span-k i { font-style: normal; font-size: clamp(1.3rem, 2.2vw, 1.9rem); color: var(--ink-60); }
.rel-span-w { font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: clamp(1.3rem, 2.2vw, 1.9rem); line-height: 1; text-transform: lowercase; color: var(--ink-60); }
.rel-span-w b { color: var(--ink); }
.rel-span-none { font-size: clamp(1.1rem, 1.4vw, 1.3rem); color: var(--ink-60); }

/* ---------- the disc on this page: the site's CD, still until the pointer is over it ---------- */
.rel .cd-float, .rel .cd-edge, .rel .cd-mirror, .rel .cd-sheen, .rel .cd-glare > i { will-change: auto; }
.rel .cd-float { transition: transform .45s cubic-bezier(.16, .84, .24, 1); }
/* SPEED (2026-10-19, owner: "giant floating discs are laggy"): the home page's disc wears two drop-shadow FILTERS, and its
   light (sheen, glare) is BLENDED (screen). Safari does both in software: with ~40 discs here, and the big ones tilting
   under the pointer, every frame repainted them. here: no filter, no blend. the shadow is a soft gradient painted once
   under the disc, and the light is laid on plainly (a touch lower, since screen no longer brightens it) */
.rel .cd-float { filter: none; }
.rel .cd-float::before { content: ''; position: absolute; left: 4%; right: 4%; top: 14%; bottom: -12%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .7), rgba(0, 0, 0, .35) 55%, transparent); transform: translateY(6%); }
.rel .cd-sheen, .rel .cd-glare { mix-blend-mode: normal; }
.rel .cd-sheen { opacity: .55; }
.rel .cd-glare { opacity: calc(.12 + var(--lift, 0) * .4); }

.rel .cd-body { overflow: hidden; }          /* the turned layers have square corners that poke out on phones */
.rel-cd .cd-art { background: var(--accent, var(--red)); }
.rel-cd .cd-art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* the printed face under the art (no art yet, or still loading): the title big across the face, as the real discs print theirs */
.rel-blank { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; padding: 0 12%; text-align: center;
  font-family: var(--display); font-stretch: condensed; font-weight: 700; color: #000; text-transform: uppercase; }
.rel-blank span { font-size: calc(var(--cd) * .118); line-height: .86; letter-spacing: -.01em; max-width: 9ch; text-wrap: balance; margin-bottom: calc(var(--cd) * .3); }
.rel-blank i { position: absolute; top: 12%; font-style: normal; font-size: calc(var(--cd) * .05); letter-spacing: .08em; padding: .15em .45em; background: #000; color: var(--accent, var(--red)); }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .rel-pick:hover .cd-float, .rel-next-disc:hover .cd-float { will-change: transform; }
  .rel-pick:hover .cd-glare, .rel-next-disc:hover .cd-glare { opacity: .8; }
}
@media (prefers-reduced-motion: reduce) { .rel .cd-float { transition: none; } }
.rel-pick { display: block; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.rel-pick:focus-visible, .rel-next-disc:focus-visible { outline: 3px solid var(--red); outline-offset: 6px; border-radius: 50%; }
/* a small disc: the art with a black hole, ringed in black so they can overlap */
.rel-mini { --m: 34px; width: var(--m); height: var(--m); border-radius: 50%; overflow: hidden; background: var(--accent, #222); box-shadow: 0 0 0 2px #000; flex: none; position: relative; display: block; }
.rel-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rel-mini::after { content: ''; position: absolute; inset: 40%; border-radius: 50%; background: #000; }

/* ---------- labels and names ---------- */
.rel-kicker { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; align-items: baseline; font-family: 'Franklin Gothic Bold', var(--display); font-weight: 700;
  font-size: clamp(.8rem, .92vw, .9rem); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-60); }
.rel-kicker-n { color: var(--red); }
.rel-t-tag { color: var(--accent, var(--red)); }
.rel-lead { font-family: 'Roboto Flex', var(--display); font-weight: 620; font-stretch: 25%; font-variation-settings: 'wght' 620, 'wdth' 25;
  text-transform: lowercase; font-size: clamp(3rem, 7vw, 6.4rem); line-height: .9; letter-spacing: -.01em; color: var(--ink); white-space: nowrap;
  pointer-events: none; user-select: none; -webkit-user-select: none; }

/* ---------- 1. the month ---------- */
.rel-cal-top { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: clamp(1rem, 2.4vh, 1.6rem); }
.rel-cal-h { order: 1; font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: .9; letter-spacing: -.015em; text-transform: lowercase; min-width: 7ch; }
.rel-arrow[data-m="-1"] { order: 2; } .rel-arrow[data-m="1"] { order: 3; }
.rel-cal-n { order: 4; margin-left: auto; font-family: 'Franklin Gothic Bold', var(--display); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-40); }
.rel-arrow { width: 3.2rem; height: 2.6rem; display: grid; place-items: center; border: 0; background: none; color: var(--ink); cursor: pointer; border-radius: 10px; }
.rel-arrow svg { width: 2.4rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.rel-arrow svg path { stroke-width: 2.4; }
.rel-arrow:hover:not(:disabled), .rel-arrow:focus-visible { background: var(--red); color: #000; outline: none; }
.rel-arrow:disabled { color: var(--ink-12); cursor: default; }
.rel-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.rel-dow { padding: .75rem .7rem .6rem; font-family: 'Franklin Gothic Bold', var(--display); font-weight: 700; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-40); border-bottom: 1px solid var(--ink-12); }
.rel-day { position: relative; min-height: clamp(5.4rem, 9.4vw, 8.6rem); padding: .6rem .7rem .7rem; border: 0; border-bottom: 1px solid var(--ink-12); border-right: 1px solid var(--ink-12);
  background: none; color: var(--ink-40); text-align: left; font: inherit; display: flex; flex-direction: column; justify-content: space-between; gap: .5rem; }
.rel-day.has { color: var(--ink); cursor: pointer; }
.rel-day.past { color: var(--ink-60); }
.rel-day.past .rel-mini { filter: saturate(.35) brightness(.7); }
.rel-dn { display: flex; align-items: baseline; gap: .5rem; font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: clamp(1.3rem, 1.9vw, 1.75rem); line-height: 1; font-variant-numeric: tabular-nums; }
.rel-dn em { font-style: normal; font-family: 'Franklin Gothic Bold', var(--display); font-size: .5em; letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.rel-day.today .rel-dn { color: var(--red); }
/* the next release's night: ringed in red, so it is found before anything is pressed */
.rel-day.next { box-shadow: inset 0 0 0 2px var(--red); }
.rel-dots { display: flex; align-items: center; }
.rel-dots .rel-mini { --m: clamp(26px, 3.3vw, 46px); }
.rel-dots .rel-mini + .rel-mini { margin-left: calc(var(--m) * -.32); }
.rel-dots i { font-style: normal; margin-left: .45rem; font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: 1.05rem; color: var(--ink-60); }
.rel-day.has:hover, .rel-day.has:focus-visible { background: var(--ink); color: #000; outline: none; }
.rel-day.on { background: var(--red); color: #000; box-shadow: none; }
.rel-day.on .rel-dn, .rel-day.on .rel-dn em, .rel-day.has:hover .rel-dn, .rel-day.has:hover .rel-dn em, .rel-day.on .rel-dots i, .rel-day.has:hover .rel-dots i { color: #000; }
.rel-day.on .rel-mini, .rel-day.has:hover .rel-mini { box-shadow: 0 0 0 2px currentColor; filter: none; }
.rel-day--pad { pointer-events: none; }
/* the grid's right edge: no rule after the seventh column (the day cells are the cal's 8th child on, after 7 day names) */
.rel-cal > :nth-child(7n) { border-right: 0; }

/* the night that is picked: its running order, one row a release */
.rel-cal-day { margin-top: clamp(1.4rem, 3.6vh, 2.4rem); }
.rel-run-h { display: flex; align-items: baseline; gap: .9rem; margin-bottom: .8rem; font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1; text-transform: lowercase; }
.rel-run-h i { font-style: normal; font-family: 'Franklin Gothic Bold', var(--display); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-40); }
.rel-run { list-style: none; border-top: 1px solid var(--ink-12); }
.rel-run li { border-bottom: 1px solid var(--ink-12); }
.rel-run-b { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 1.2rem; padding: .8rem .5rem; border: 0; background: none; color: var(--ink); cursor: pointer; text-align: left; font: inherit; }
.rel-run-b .rel-mini { --m: 56px; }
.rel-run-t { font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 1.95rem); line-height: 1; text-transform: lowercase; }
.rel-run-m { display: flex; align-items: center; gap: .9rem; }
.rel-run-m .rel-col--s { font-size: 1.1rem; }
.rel-run-w { min-width: 6.6rem; text-align: right; font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: 1.25rem; text-transform: lowercase; color: var(--ink-60); }
.rel-run-b:hover, .rel-run-b:focus-visible { background: var(--ink); color: #000; outline: none; }
.rel-run-b:hover *, .rel-run-b:focus-visible * { color: #000; }

/* the plain list the server writes in (what shows without javascript, and what search engines read) */
.rel-ladder { list-style: none; border-top: 1px solid var(--ink-12); }
.rel-ladder li { border-bottom: 1px solid var(--ink-12); }
.rel-lrow { width: 100%; display: grid; grid-template-columns: 8.5rem 7.5rem minmax(0, 1fr) 11rem; align-items: baseline; gap: 1rem; padding: .85rem .4rem; }
.rel-l-day { font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: 1rem; text-transform: lowercase; }
.rel-l-time { font-size: .85rem; color: var(--ink-60); }
.rel-l-t { font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: clamp(1.1rem, 1.6vw, 1.45rem); line-height: 1; text-transform: lowercase; }
.rel-l-c { font-size: .8rem; color: var(--ink-40); }
.rel-lrow .rel-c:empty { display: none; }

/* ---------- 2. coming up: the next release, in full ---------- */
.rel-all { padding-bottom: clamp(1rem, 3vh, 2rem); }
.rel-all > .rel-lead { padding-bottom: 1.1rem; border-bottom: 2px solid var(--ink); }
.rel-next { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5.5rem); padding: clamp(2.4rem, 6vh, 4rem) 0 clamp(2.6rem, 7vh, 4.4rem); }
.rel-next-disc { --cd: min(40vw, 62svh, 600px); width: var(--cd); aspect-ratio: 1; cursor: pointer; border-radius: 50%; perspective: 1100px; }
.rel-next-disc .rel-cd--big, .rel-sheet-disc .rel-cd--big { --cd: inherit; }
.rel-next-col, .rel-sheet-col { min-width: 0; max-width: 37rem; }
.rel-next-title, .rel-sheet-title { margin: .8rem 0 1rem; font-family: var(--display); font-stretch: condensed; font-weight: 700;
  font-size: clamp(3rem, 6vw, 6.4rem); line-height: .86; letter-spacing: -.02em; word-spacing: -.06em; text-transform: lowercase; text-wrap: balance; }
/* what the file does: the quiet face, full ink, the one paragraph on the block */
.rel-desc { max-width: 31em; font-size: clamp(1.15rem, 1.45vw, 1.4rem); line-height: 1.5; color: var(--ink); }
/* when: the countdown, and under it both times, each with its mark */
.rel-when-box { margin: clamp(1.4rem, 3.4vh, 2.2rem) 0; padding: 1.1rem 0 1rem; border-top: 1px solid var(--ink-12); border-bottom: 1px solid var(--ink-12); }
.rel-count { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); min-height: clamp(3.4rem, 6vw, 6rem); }
.rel-count > span { display: grid; }
.rel-count b { font-family: var(--display); font-stretch: condensed; font-weight: 700; font-variant-numeric: tabular-nums; font-size: clamp(2.6rem, 5vw, 5.2rem); line-height: .9; letter-spacing: -.01em; }
.rel-count i { font-style: normal; font-family: 'Franklin Gothic Bold', var(--display); font-weight: 700; font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-40); margin-top: .45rem; }
.rel-count > span:last-child b { color: var(--red); }
.rel-out-now { font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: clamp(2rem, 4vw, 4rem); line-height: .9; text-transform: lowercase; color: var(--red); }
.rel-whens { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin-top: 1rem; }
.rel-w { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: clamp(1.15rem, 1.5vw, 1.35rem); text-transform: lowercase; color: var(--ink); }
.rel-w .rel-ic { color: var(--red); }
.rel-w--you { color: var(--ink-60); } .rel-w--you .rel-ic { color: var(--ink-60); }
/* who gets it and where it lives: Patreon's own tier badge, then the collection with its mark, then the length */
.rel-metas { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; margin-bottom: 1.1rem; }
.rel-tier { display: inline-flex; align-items: center; gap: .55rem; }
.rel-tier img { display: block; height: clamp(76px, 7.4vw, 96px); width: auto; }
.rel-tier-w { font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: 1.25rem; text-transform: lowercase; color: var(--ink-60); }
.rel-tier--s img { height: 40px; }
.rel-col { display: inline-flex; align-items: center; gap: .45rem; padding: .4em .75em .4em .6em; border-radius: 10px; background: rgba(242, 237, 228, .07); box-shadow: inset 0 0 0 1px var(--ink-12);
  font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: 1.2rem; line-height: 1; text-transform: lowercase; color: var(--ink); white-space: nowrap; }
.rel-col .rel-ic { width: 1.25em; height: 1.25em; }
.rel-col--s { padding: 0; background: none; box-shadow: none; gap: .35rem; font-size: 1.08rem; color: var(--ink-60); }
.rel-col--s .rel-ic { width: 1.1em; height: 1.1em; }
/* tags: soft boxes, never pills; the audience first, in its own colour, with the tag mark */
.rel-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.rel-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3em .65em; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--ink-12);
  font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: 1.06rem; line-height: 1; text-transform: lowercase; color: var(--ink-60); }
.rel-chip--aud { color: var(--accent, var(--red)); box-shadow: inset 0 0 0 1.5px var(--accent, var(--red)); }
.rel-chip .rel-ic { width: 1.05em; height: 1.05em; }
.rel-go { margin-top: clamp(1.4rem, 3vh, 2rem); }
.rel-go a { display: inline-flex; align-items: center; gap: .55rem; padding: .3em .55em .3em .5em; margin-left: -.5em; border-radius: 10px; font-family: var(--display); font-stretch: condensed; font-weight: 700;
  font-size: clamp(1.25rem, 1.8vw, 1.55rem); line-height: 1; text-transform: lowercase; color: var(--ink); text-decoration: none; }
.rel-go a svg { width: 2.1rem; height: 1.3rem; fill: none; stroke: var(--red); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rel-go a:hover, .rel-go a:focus-visible { background: var(--red); color: #000; outline: none; }
.rel-go a:hover svg, .rel-go a:focus-visible svg { stroke: #000; }

/* ---------- the nights after it ---------- */
.rel-night { display: grid; grid-template-columns: clamp(8rem, 13vw, 12rem) minmax(0, 1fr); gap: 0 clamp(1.4rem, 3vw, 2.6rem); padding: clamp(1.8rem, 4vh, 2.6rem) 0; border-top: 1px solid var(--ink-12); }
.rel-night-h { align-self: start; position: sticky; top: 1.2rem; display: grid; gap: .1rem; font-family: var(--display); font-stretch: condensed; font-weight: 700; text-transform: lowercase; line-height: .9; }
.rel-night-h b { font-size: clamp(2.6rem, 4.6vw, 4.4rem); letter-spacing: -.02em; }
.rel-night-h span { font-size: clamp(1.3rem, 2vw, 1.8rem); letter-spacing: -.01em; color: var(--ink-60); }
.rel-night-h i { margin-top: .7rem; font-style: normal; font-family: 'Franklin Gothic Bold', var(--display); font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-40); }
.rel-row { --cols: 3; --gap: clamp(1rem, 2vw, 1.8rem); list-style: none; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(1.6rem, 3vh, 2.2rem) var(--gap); container-type: inline-size; }
.rel-row .rel-item { --cd: calc((100cqi - (var(--cols) - 1) * var(--gap)) / var(--cols)); }
.rel-item { min-width: 0; }
.rel-item .rel-pick { perspective: 900px; }
.rel-meta { display: grid; gap: .45rem; margin-top: 1.1rem; justify-items: start; }
.rel-meta p { margin: 0; }
.rel-t { font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: clamp(1.4rem, 1.9vw, 1.75rem); line-height: .98; letter-spacing: -.01em; text-transform: lowercase; text-wrap: balance; }
.rel-t-pav { display: inline-block; vertical-align: .18em; margin-left: .15em; padding: .16em .38em .12em; border-radius: 6px; background: var(--ink); color: #000;
  font-family: 'Franklin Gothic Bold', var(--display); font-size: .42em; letter-spacing: .14em; text-transform: uppercase; line-height: 1; }
.rel-when { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: clamp(1.08rem, 1.3vw, 1.22rem); text-transform: lowercase; color: var(--ink); }
.rel-when .rel-ic { width: 1.1em; height: 1.1em; color: var(--red); }
.rel-when--out { font-size: 1rem; color: var(--ink-60); }
.rel-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; }
.rel-len { display: inline-flex; align-items: center; gap: .32rem; font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: 1.08rem; color: var(--ink-60); }
.rel-len .rel-ic { width: 1.05em; height: 1.05em; }
.rel-who { display: flex; align-items: center; gap: .5rem; margin-top: .15rem !important; font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: 1.02rem; text-transform: lowercase; color: var(--ink-60); }
.rel-c { font-family: var(--display); font-stretch: condensed; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.02rem; color: var(--ink-60); }
.rel-c::before { content: '·'; margin-right: .5rem; color: var(--ink-40); }
.rel-c:empty { display: none; }
.rel-c .rel-out-now { font-size: 1.02rem; }
.rel-empty { padding: 2rem 0; font-size: 1.05rem; color: var(--ink-60); }
/* every night after the first few: one line a night, its releases side by side, each opens it (replaced the
   "show the next 14 nights" button, 2026-10-19) */
.rel-later { border-top: 2px solid var(--ink); margin-top: clamp(.6rem, 2vh, 1.2rem); padding-top: clamp(1.2rem, 3vh, 1.8rem); }
.rel-later-h { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; margin-bottom: clamp(.6rem, 1.6vh, 1rem); font-family: var(--display); font-stretch: condensed; font-weight: 700;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1; text-transform: lowercase; }
.rel-later-h .rel-ic { width: 1.1em; height: 1.1em; color: var(--red); }
.rel-later-h i { margin-left: auto; font-style: normal; font-family: 'Franklin Gothic Bold', var(--display); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-40); }
.rel-lats { list-style: none; }
.rel-lat { display: grid; grid-template-columns: clamp(8rem, 13vw, 12rem) minmax(0, 1fr); gap: .6rem clamp(1.4rem, 3vw, 2.6rem); align-items: start; padding: 1rem 0; border-top: 1px solid var(--ink-12);
  content-visibility: auto; contain-intrinsic-size: auto 96px; }
.rel-lat .rel-night-h { position: static; display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .5rem; padding-top: .35rem; }
.rel-lat .rel-night-h b { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.rel-lat .rel-night-h span { font-size: clamp(1.15rem, 1.6vw, 1.4rem); }
.rel-lat .rel-night-h i { display: none; }
.rel-lat-r { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: .3rem .8rem; }
.rel-lat-b { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "d t" "d m"; align-items: center; gap: .15rem .85rem; padding: .5rem .6rem .5rem .45rem;
  border: 0; border-radius: 12px; background: none; color: var(--ink); cursor: pointer; text-align: left; font: inherit; -webkit-tap-highlight-color: transparent; }
.rel-lat-b .rel-mini { grid-area: d; --m: 54px; }
.rel-lat-t { grid-area: t; align-self: end; font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: clamp(1.2rem, 1.5vw, 1.38rem); line-height: 1; text-transform: lowercase; }
.rel-lat-m { grid-area: m; align-self: start; font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: 1rem; text-transform: lowercase; color: var(--ink-60); }
.rel-lat-b:hover, .rel-lat-b:focus-visible { background: var(--ink); color: #000; outline: none; }
.rel-lat-b:hover *, .rel-lat-b:focus-visible * { color: #000; }

/* ---------- 3. just out ---------- */
.rel-bar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .6rem 2rem; padding-bottom: 1.1rem; border-bottom: 2px solid var(--ink); margin-bottom: clamp(1.8rem, 4.4vh, 2.8rem); }
.rel-bar-go { padding: .1em .2em; margin-bottom: .3rem; font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  text-transform: lowercase; color: var(--ink); text-decoration: none; box-shadow: inset 0 -2px 0 var(--red); white-space: nowrap; }
.rel-bar-go:hover, .rel-bar-go:focus-visible { background: var(--red); color: #000; box-shadow: none; outline: none; }
.rel-rail { --cols: 3; --gap: clamp(1.4rem, 3vw, 3rem); list-style: none; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(2rem, 5vh, 3.4rem) var(--gap); container-type: inline-size; }
.rel-rail .rel-item { --cd: calc((100cqi - (var(--cols) - 1) * var(--gap)) / var(--cols)); }
.rel-meta--out { grid-template-columns: auto minmax(0, 1fr); column-gap: .7rem; align-items: baseline; }
.rel-meta--out > :not(.rel-n) { grid-column: 2; }
.rel-n { grid-row: 1; font-family: 'Franklin Gothic Bold', var(--display); font-weight: 700; font-size: .7rem; letter-spacing: .12em; color: var(--red); }
.rel-listen { justify-self: start; display: inline-flex; align-items: center; gap: .4rem; margin-top: .3rem; font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: 1.12rem; text-transform: lowercase; color: var(--ink); text-decoration: none; box-shadow: inset 0 -2px 0 var(--red); padding: 0 .1em .1em; }
.rel-listen svg { width: 1.6rem; height: 1rem; fill: none; stroke: var(--red); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rel-listen:hover svg, .rel-listen:focus-visible svg { stroke: #000; }
.rel-listen:hover, .rel-listen:focus-visible { background: var(--red); color: #000; box-shadow: none; outline: none; }
.rel-out { padding-bottom: clamp(4.5rem, 12vh, 8rem); }
.rel-noscript { padding: 2rem var(--frame); color: var(--ink-60); }
.rel-noscript a { color: var(--ink); }

/* ---------- 4. join: the tiers as a ladder, reading down ---------- */
.rel-out { padding-bottom: clamp(1rem, 3vh, 2rem); }
.rel-join { padding-bottom: clamp(4.5rem, 12vh, 8rem); }
.rel-join > .rel-lead { padding-bottom: 1.1rem; border-bottom: 2px solid var(--ink); }
.rel-join-lede { max-width: 34em; margin: clamp(1.2rem, 3vh, 1.8rem) 0 clamp(1.4rem, 3.4vh, 2.2rem); font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.5; color: var(--ink); }
.rel-ladder-j { list-style: none; display: grid; gap: .6rem; }
.rel-j { display: grid; grid-template-columns: clamp(200px, 21vw, 300px) minmax(0, 1fr) 7.5rem 15.5rem; align-items: center; gap: clamp(1rem, 2.6vw, 2.4rem);
  padding: clamp(1rem, 2.4vh, 1.4rem) clamp(.8rem, 1.6vw, 1.4rem); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--ink-12); }
.rel-j--hot { box-shadow: inset 0 0 0 2px var(--red); background: rgba(255, 0, 0, .06); }
.rel-j-badge { display: block; width: 100%; height: auto; }
.rel-j-mid { min-width: 0; display: grid; gap: .4rem; justify-items: start; }
.rel-j-flag { display: inline-flex; align-items: center; gap: .4rem; font-family: 'Franklin Gothic Bold', var(--display); font-weight: 700; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.rel-j-flag .rel-ic { width: 1.3em; height: 1.3em; }
.rel-j-head { font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: clamp(1.6rem, 2.8vw, 2.5rem); line-height: .92; letter-spacing: -.015em; text-transform: lowercase; color: var(--ink); }
/* a tier Patreon has that has no badge image yet: its name in the badge's place, in its colour (2026-10-19) */
.rel-j-badge--txt { display: inline-flex; align-items: center; padding: .5rem .8rem; border: 2px solid var(--tc); border-radius: 10px; font-family: 'Franklin Gothic Bold', var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--tc); }
.rel-j-adds { max-width: 34em; font-size: .95rem; line-height: 1.45; color: var(--ink-60); }
.rel-j-cols { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin-top: .2rem; }
.rel-j-price { display: grid; justify-items: end; }
.rel-j-price b { font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: clamp(2.2rem, 3.6vw, 3.2rem); line-height: .9; letter-spacing: -.01em; color: var(--tc); }
.rel-j-price i { font-style: normal; font-family: 'Franklin Gothic Bold', var(--display); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-40); margin-top: .35rem; }
.rel-j-go { display: inline-flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7em .9em; border-radius: 12px; background: var(--ink); color: #000; text-decoration: none; white-space: nowrap;
  font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1; text-transform: lowercase; }
.rel-j-go svg { width: 1.8rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rel-j--hot .rel-j-go { background: var(--red); }
.rel-j-go:hover, .rel-j-go:focus-visible { background: var(--tc); color: #000; outline: 2px solid var(--ink); outline-offset: 2px; }
.rel-join-fine { margin-top: 1.2rem; font-size: .92rem; color: var(--ink-40); }

/* ---------- the sheet: one release, a full screen of its own, in and out as a cut ---------- */
.rel-sheet { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000; color: var(--ink); overflow-y: auto; overscroll-behavior: contain; }
.rel-sheet::backdrop { background: #000; }
.rel-sheet-in:focus { outline: none; }
.rel-sheet-in { min-height: 100%; display: grid; grid-template-columns: auto minmax(0, 37rem); justify-content: center; align-items: center; gap: clamp(2rem, 5vw, 5rem); padding: clamp(4.5rem, 10vh, 6rem) var(--frame); }
.rel-sheet-disc { --cd: min(38vw, 62vh, 520px); width: var(--cd); }
.rel-sheet-title { font-size: clamp(2.6rem, 4.8vw, 5rem); }
.rel-x { position: fixed; top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); z-index: 2; width: 3.2rem; height: 3.2rem; border: 0; background: none; cursor: pointer; border-radius: 10px; }
.rel-x svg { width: 100%; height: 100%; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.rel-x:hover, .rel-x:focus-visible { background: var(--red); outline: none; } .rel-x:hover svg, .rel-x:focus-visible svg { stroke: #000; }
html.sheet-open, html.sheet-open body { overflow: hidden; }

/* ---------- the calendar under the finger (owner 2026-10-19: "animated touch effects") ----------
   pressed: the night squashes under the finger and springs back. picked or hovered: its little discs fan out from their
   stack and the date gets a loose hand-drawn ring, drawn on. changing month: the weeks come in one row after another, as
   cuts. the running order of a night: its rows arrive one after another, as cuts. all transform and opacity only */
.rel-day, .rel-run-b, .rel-lat-b, .rel-arrow { transition: transform .32s cubic-bezier(.16, .84, .24, 1); }
.rel-day.is-down, .rel-run-b.is-down, .rel-lat-b.is-down { transform: scale(.94); transition-duration: .08s; }
.rel-arrow.is-down { transform: scale(.86); transition-duration: .08s; }
.rel-day.has { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.rel-dn-n { position: relative; display: inline-block; }
.rel-day.has .rel-dn em { margin-left: .35em; }
.rel-ring { position: absolute; left: -.42em; top: -.32em; width: calc(100% + .84em); height: calc(100% + .58em); overflow: visible; pointer-events: none; visibility: hidden; }
.rel-ring path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.rel-day.on .rel-ring, .rel-day.has:hover .rel-ring { visibility: visible; }
.rel-day.on .rel-ring path, .rel-day.has:hover .rel-ring path { stroke-dashoffset: 0; }
.rel-dots .rel-mini { transition: transform .38s cubic-bezier(.16, .84, .24, 1); }
.rel-day.on .rel-dots .rel-mini, .rel-day.has:hover .rel-dots .rel-mini { transform: translate(calc(var(--i, 0) * var(--m) * .3), -3px) rotate(calc((var(--i, 0) - 1) * 7deg)); }
.rel-day.has:hover .rel-dots i, .rel-day.on .rel-dots i { transform: translateX(calc(var(--m) * .6)); }
.rel-dots i { transition: transform .38s cubic-bezier(.16, .84, .24, 1); }
@media (prefers-reduced-motion: no-preference) {
  .rel-day.on .rel-ring path, .rel-day.has:hover .rel-ring path { transition: stroke-dashoffset .42s cubic-bezier(.6, 0, .2, 1); }
  /* held invisible for its turn, then simply there (no fill: when the hold ends it is just itself again) */
  .rel-cal.flip .rel-day { animation: rel-hold calc(var(--r, 0) * 55ms) linear; }
  .rel-run li { animation: rel-hold calc(var(--i, 0) * 70ms) linear; }
}
@keyframes rel-hold { from, to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rel-day, .rel-run-b, .rel-lat-b, .rel-arrow, .rel-dots .rel-mini, .rel-dots i { transition: none; } }

/* ---------- a PAV: its own little player ----------
   borderless, the video edge to edge in a rounded screen, a soft shade along the bottom for the controls, a thin red line
   filling as the preview runs, the length bottom right; the play/pause (.tape-ctl, a sibling, so not inside the button that
   opens the release) sits over the bottom left. as wide as a disc is, 16:9 */
.tape { position: relative; display: block; width: var(--cd); aspect-ratio: 16 / 9; }
.tape-float { position: absolute; inset: 0; display: block; transition: transform .45s cubic-bezier(.16, .84, .24, 1); }
.tape-scr { position: absolute; inset: 0; display: block; border-radius: 12px; overflow: hidden; background: #0b0b0b; box-shadow: 0 16px 34px rgba(0, 0, 0, .65); }
.tape-glass { position: absolute; inset: 0; display: block; background: var(--accent); }
.tape-v, .tape-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tape-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; display: block; pointer-events: none; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); }
.tape-len { position: absolute; right: .75em; bottom: .7em; font-style: normal; font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: clamp(.95rem, calc(var(--cd) * .05), 1.4rem); line-height: 1; color: var(--ink); }
.tape-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; display: block; background: rgba(242, 237, 228, .18); }
.tape-prog i { position: absolute; inset: 0; display: block; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; }
.rel-media { position: relative; }
.tape-ctl { position: absolute; z-index: 2; left: .5rem; top: calc(var(--cd) * .5625 - 2.9rem - .45rem); width: 2.9rem; height: 2.9rem; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 10px; background: rgba(0, 0, 0, .35); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .32s cubic-bezier(.16, .84, .24, 1); }
.tape-ctl .rel-ic { width: 1.6rem; height: 1.6rem; } .tape-ctl .rel-ic-a { stroke-width: 2.6; }
.tape-ctl .tape-ic-pause, .tape-ctl.is-on .tape-ic-play { display: none; } .tape-ctl.is-on .tape-ic-pause { display: block; }
.tape-ctl:hover, .tape-ctl:focus-visible { background: var(--ink); color: #000; outline: none; }
.tape-ctl:active { transform: scale(.88); transition-duration: .08s; }
.tape--big ~ .tape-ctl { width: 3.6rem; height: 3.6rem; top: calc(var(--cd) * .5625 - 3.6rem - .8rem); left: .8rem; }
.tape--big ~ .tape-ctl .rel-ic { width: 2rem; height: 2rem; }
.tape--big .tape-scr { border-radius: 16px; }
.rel-next-disc, .rel-sheet-disc { position: relative; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .rel-pick--tape:hover .tape-float { transform: translateY(-4px); } }
.rel-pick--tape { border-radius: 12px; }
.rel-pick--tape:focus-visible { border-radius: 12px; }
.rel-item--pav .rel-pick { perspective: none; }
/* the small one (calendar, running orders): a 16:9 still */
.rel-mini--tape { width: calc(var(--m) * 1.5); height: calc(var(--m) * .84); border-radius: 5px; background: var(--accent); }
.rel-mini--tape::after { display: none; }
.rel-dots .rel-mini--tape + .rel-mini, .rel-dots .rel-mini + .rel-mini--tape { margin-left: calc(var(--m) * -.32); }
/* a PAV in the info block: the file it plays (a button that opens the file) */
.rel-col--of { cursor: pointer; font: inherit; font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: 1.2rem; border: 0; color: var(--ink); }
.rel-col--of:hover, .rel-col--of:focus-visible { background: var(--ink); color: #000; outline: none; box-shadow: none; }
.rel-next.is-pav .rel-next-disc, .rel-sheet.is-pav .rel-sheet-disc { border-radius: 16px; aspect-ratio: 16 / 9; height: auto; }

/* ---------- SPEED: work the browser can skip ----------
   sections below the screen are not laid out or painted until they come near (content-visibility); the living headings'
   letters re-flow on the beat, so each heading is fenced off (contain) and its re-flow never touches the rest of the page */
.rel-out, .rel-join { content-visibility: auto; contain-intrinsic-size: auto 1400px; }
.rel-night { content-visibility: auto; contain-intrinsic-size: auto 560px; }
.rel-lead { contain: layout paint; }

/* ---------- smaller windows ---------- */
@media (max-width: 1000px) {
  .rel-row { --cols: 3; }
  .rel-night { grid-template-columns: minmax(0, 1fr); }
  .rel-night-h { position: static; display: flex; align-items: baseline; gap: .7rem; margin-bottom: 1.2rem; }
  .rel-night-h b { font-size: clamp(2rem, 6vw, 3rem); }
  .rel-night-h i { margin: 0 0 0 auto; }
  .rel-rail { --cols: 3; }
  .rel-lrow { grid-template-columns: 7rem 6.5rem minmax(0, 1fr); }
  .rel-l-c { display: none; }
  .rel-run-b { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "d t w" "d m w"; row-gap: .35rem; }
  .rel-run-b .rel-mini { grid-area: d; } .rel-run-t { grid-area: t; } .rel-run-m { grid-area: m; } .rel-run-w { grid-area: w; }
}
@media (max-width: 820px), (orientation: portrait) {
  .rel-next { grid-template-columns: 1fr; justify-items: center; }
  .rel-next-disc { --cd: min(76vw, 46svh); }
  .rel-next-col { width: 100%; max-width: 40rem; }
  .rel-next-title { font-size: clamp(2.8rem, 10vw, 5.4rem); }
  .rel-count b { font-size: clamp(2.6rem, 9vw, 4.6rem); }
  .rel-sheet-in { grid-template-columns: 1fr; justify-items: center; align-content: start; }
  .rel-sheet-disc { --cd: min(68vw, 38svh); }
  .rel-sheet-col { width: 100%; }
}
@media (max-width: 1000px) {
  .rel-j { grid-template-columns: clamp(170px, 28vw, 250px) minmax(0, 1fr) auto; grid-template-areas: "b m p" "b m g"; row-gap: .8rem; }
  .rel-j-badge { grid-area: b; align-self: start; } .rel-j-mid { grid-area: m; } .rel-j-price { grid-area: p; } .rel-j-go { grid-area: g; justify-self: end; width: 15.5rem; }
}
@media (max-width: 640px) {
  .rel-j { grid-template-columns: 1fr auto; grid-template-areas: "b p" "m m" "g g"; }
  .rel-j-badge { width: min(230px, 58vw); }
  .rel-j-go { justify-self: stretch; width: auto; }
  .rel-row { --cols: 2; }
  .rel-cal-n { width: 100%; order: 5; margin-left: 0; }
  .rel-day { min-height: 4.2rem; padding: .4rem .35rem .45rem; gap: .3rem; }
  .rel-dow { padding: .55rem .35rem .45rem; font-size: .56rem; letter-spacing: .1em; }
  .rel-dn { font-size: 1rem; }
  .rel-dn em { display: none; }
  .rel-dots .rel-mini { --m: 24px; }
  .rel-dots .rel-mini + .rel-mini { display: none; }
  .rel-dots i { font-size: .78rem; margin-left: .2rem; }
  .rel-run-m { flex-wrap: wrap; gap: .5rem; }
  .rel-run-w { min-width: 0; font-size: .95rem; }
  .rel-run-b .rel-mini { --m: 46px; }
  .rel-lat { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
  .rel-lat-r { grid-template-columns: minmax(0, 1fr); }
  .rel-lat-b .rel-mini { --m: 48px; }
  .rel-span-k b { font-size: 2.6rem; }
  .rel-when .rel-c { flex-basis: 100%; padding-left: 1.6rem; } .rel-when .rel-c::before { display: none; }
  .rel-rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 1.2rem; margin: 0 calc(var(--frame) * -1); padding: 0 var(--frame) .4rem; container-type: normal; }
  .rel-rail::-webkit-scrollbar { display: none; }
  .rel-rail .rel-item { --cd: 58vw; flex: none; width: var(--cd); scroll-snap-align: start; scroll-margin-left: var(--frame); }
  .rel-tier img { height: 52px; }
  .rel-tier--s img { height: 26px; }
  .rel-count { gap: .9rem; }
  .rel-lrow { grid-template-columns: 1fr auto; grid-template-areas: 't tm' 'd tm'; gap: .3rem .8rem; }
  .rel-l-t { grid-area: t; } .rel-l-day { grid-area: d; font-size: .9rem; } .rel-l-time { grid-area: tm; text-align: right; }
}
/* a PAV in the big spots: a 16:9 player wants more width than a disc */
.rel-next.is-pav .rel-next-disc { --cd: min(46vw, 680px); }
.rel-sheet.is-pav .rel-sheet-disc { --cd: min(46vw, 640px); }
@media (max-width: 820px), (orientation: portrait) { .rel-next.is-pav .rel-next-disc, .rel-sheet.is-pav .rel-sheet-disc { --cd: calc(100vw - var(--frame) * 2); } }