/* The Daily Grift (theme page-the-daily-grift.php). Converted 10 Oct 2026 (stage 4, session 4) from the approved
   test page (_artifacts/redesign-2026-10/pages/the-daily-grift.css, rulings of 9 Oct). Theme changes:
   - the tape heights follow the longest episode in data/shows.json (--rt-max, set by the template), not a typed 1180;
   - the "Change the hour" link is gone with the footer hour dial it pointed to (the light follows the reader's clock);
   - the test-only NEEDS YOUR CALL marker rules are gone.
   Everything else is the approved file unchanged. The body carries the class "tdg" (added by the template).

   The Daily Grift: the screening room (test page, 8 Oct 2026)
   Spec: direction.md 5.4 + orchestrator-rulings.md. Built on shared/ratc.css.
   Rule of this file, same as the foundation: the FINISHED, STILL page is the
   default CSS. Every move is added only inside
   @media (prefers-reduced-motion: no-preference) and :root:not([data-motion="still"]).
   Ambient loops (rain, lamp, smoke) are art layers only, need scripts (Still lives
   in ratc.js) and run only while their scene is on screen (.is-live).
   No animation library. */

.tdg {
  --rain-far: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg stroke='%23F7D8A5' stroke-linecap='round' fill='none'%3E%3Cpath d='M43.9 98.0V109.7' stroke-width='0.98' stroke-opacity='0.66'/%3E%3Cpath d='M13.5 2.4V18.8' stroke-width='0.88' stroke-opacity='0.47'/%3E%3Cpath d='M177.2 84.6V101.0' stroke-width='0.94' stroke-opacity='0.67'/%3E%3Cpath d='M28.5 114.3V131.0' stroke-width='0.96' stroke-opacity='0.72'/%3E%3Cpath d='M120.2 11.5V27.1' stroke-width='0.98' stroke-opacity='0.5'/%3E%3Cpath d='M7.5 155.8V168.5' stroke-width='1.02' stroke-opacity='0.79'/%3E%3Cpath d='M127.7 165.8V177.7' stroke-width='1.04' stroke-opacity='0.57'/%3E%3Cpath d='M166.7 158.2V167.2' stroke-width='0.84' stroke-opacity='0.46'/%3E%3Cpath d='M171.9 78.5V92.8' stroke-width='0.89' stroke-opacity='0.6'/%3E%3Cpath d='M69.9 63.2V77.1' stroke-width='0.98' stroke-opacity='0.8'/%3E%3Cpath d='M122.0 167.2V180' stroke-width='1.1' stroke-opacity='0.69'/%3E%3Cpath d='M122.0 0V3.8' stroke-width='1.1' stroke-opacity='0.69'/%3E%3Cpath d='M30.7 154.9V172.5' stroke-width='1.07' stroke-opacity='0.63'/%3E%3Cpath d='M127.6 38.0V54.3' stroke-width='0.97' stroke-opacity='0.49'/%3E%3Cpath d='M13.2 153.7V171.6' stroke-width='0.83' stroke-opacity='0.75'/%3E%3Cpath d='M74.2 27.1V38.0' stroke-width='1.03' stroke-opacity='0.79'/%3E%3Cpath d='M9.8 110.6V119.0' stroke-width='1.02' stroke-opacity='0.52'/%3E%3Cpath d='M157.0 176.5V180' stroke-width='1.1' stroke-opacity='0.5'/%3E%3Cpath d='M157.0 0V9.6' stroke-width='1.1' stroke-opacity='0.5'/%3E%3Cpath d='M15.5 108.0V116.3' stroke-width='0.86' stroke-opacity='0.55'/%3E%3Cpath d='M109.4 28.1V36.5' stroke-width='1.06' stroke-opacity='0.51'/%3E%3Cpath d='M170.7 161.4V173.2' stroke-width='0.94' stroke-opacity='0.61'/%3E%3Cpath d='M115.3 107.2V120.8' stroke-width='0.99' stroke-opacity='0.82'/%3E%3Cpath d='M91.2 77.6V92.8' stroke-width='0.87' stroke-opacity='0.5'/%3E%3C/g%3E%3C/svg%3E");
  --rain-near: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cg stroke='%23F7D8A5' stroke-linecap='round' fill='none'%3E%3Cpath d='M148.3 119.5V144.5' stroke-width='1.53' stroke-opacity='0.35'/%3E%3Cpath d='M160.9 287.5V311.3' stroke-width='1.38' stroke-opacity='0.66'/%3E%3Cpath d='M14.9 121.3V158.8' stroke-width='1.33' stroke-opacity='0.71'/%3E%3Cpath d='M51.7 76.2V100.6' stroke-width='1.35' stroke-opacity='0.81'/%3E%3Cpath d='M188.6 247.7V278.1' stroke-width='1.47' stroke-opacity='0.4'/%3E%3Cpath d='M94.0 215.8V253.8' stroke-width='1.31' stroke-opacity='0.39'/%3E%3Cpath d='M86.3 67.2V95.4' stroke-width='1.5' stroke-opacity='0.45'/%3E%3Cpath d='M282.1 281.4V304.6' stroke-width='1.29' stroke-opacity='0.6'/%3E%3Cpath d='M9.4 135.9V177.8' stroke-width='1.16' stroke-opacity='0.65'/%3E%3Cpath d='M40.3 185.2V226.9' stroke-width='1.2' stroke-opacity='0.35'/%3E%3Cpath d='M28.4 172.7V195.1' stroke-width='1.14' stroke-opacity='0.6'/%3E%3Cpath d='M293.0 134.4V165.2' stroke-width='1.42' stroke-opacity='0.4'/%3E%3Cpath d='M185.2 55.2V90.6' stroke-width='1.58' stroke-opacity='0.38'/%3E%3Cpath d='M177.4 194.0V219.3' stroke-width='1.23' stroke-opacity='0.85'/%3E%3C/g%3E%3C/svg%3E");
}

/* the section you are in */
.site-nav__btn[aria-controls="menu-shows"]::after { transform: scaleX(1); }

/* ---------- stage: like object-fit: cover, but children sit in the image's own coordinates
   (so the lamp glow, the smoke and the light wedge stay on the right spot at every size).
   The host must have a definite size and container-type: size. ---------- */
.stage-host { container-type: size; }
.stage {
  position: absolute;
  left: var(--px, 50%); top: var(--py, 50%);
  width: calc(max(100cqw, 100cqh * 1.7758) * var(--zoom, 1));
  aspect-ratio: 1600 / 901;
  transform: translate(calc(-1 * var(--px, 50%)), calc(-1 * var(--py, 50%)));
}
.stage > picture { display: contents; } /* the opening picture's AVIF wrapper (10 Oct) */
.stage > img, .stage > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }

/* decorative light layers (art only) */
.glow { position: absolute; z-index: 1; pointer-events: none; border-radius: 50%; mix-blend-mode: screen; transform: translate(-50%, -50%); }
.glow--lamp {
  left: 65.5%; top: 48%; width: 24%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgb(217 140 66 / .42), rgb(217 140 66 / .14) 55%, rgb(217 140 66 / 0));
  opacity: .75;
}
.glow--street {
  left: 27%; top: 30%; width: 26%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgb(247 216 165 / .42), rgb(247 216 165 / .12) 60%, rgb(247 216 165 / 0));
  opacity: .7;
}

/* ==========================================================================
   1. Opening: the office door
   ========================================================================== */
.tdg-open { position: relative; overflow: hidden; --open-h: clamp(560px, calc(100svh - var(--header-h)), 920px); }
.tdg-open__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: var(--open-h); }
.tdg-open__text {
  align-self: center; position: relative; z-index: 1;
  padding: 56px clamp(28px, 4vw, 72px) 64px max(var(--gutter), calc((100vw - var(--wrap)) / 2));
}
.tdg-title { margin: 0 0 26px; gap: 0; }
.tdg-title .tdg-title__the { font-size: clamp(2.6rem, 1.3rem + 3.4vw, 4.75rem); letter-spacing: .015em; }
.tdg-title .tdg-title__grift { font-size: clamp(6rem, 1rem + 10.5vw, 11rem); line-height: .8; margin: .02em 0 0 -.035em; }
.tdg-open__intro { max-width: 37ch; margin: 0 0 24px; color: var(--text); }
.tdg-open__stamp { margin: 0 0 30px 2px; white-space: nowrap; max-width: 100%; }
.tdg-open__actions { gap: 14px 24px; }

.tdg-open__artwrap { position: relative; min-width: 0; outline-offset: -14px; }
.tdg-open__art {
  position: absolute; inset: 0; margin: 0; border-radius: 0;
  container-type: size;
  --px: 46%; --py: 50%;
  --grain-opacity: .24;
  view-transition-name: tdg-art;
}
/* the art is a print torn off along the edge that meets the text (ground-black tears into it).
   Polish, 9 Oct: the tear now shows a bone paper edge between the black and the art, so it reads at every
   width (around 1024px the art behind it is dark and the black tear vanished). One element: the outer mask
   is the bone tear, the black tear is a background layer (the same drawing, filled ground black) set 8px
   deeper and a few px along, so the bone fibre edge varies in width like real torn paper. */
.tdg-open__art {
  --tear-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='24' viewBox='0 0 600 24' preserveAspectRatio='none'%3E%3Cpath fill='%230E080D' d='M0 24L0 10L0 14L9 4L23 7L36 6L45 14L53 13L72 4L78 5L90 7L112 13L118 12L130 15L149 7L169 13L183 4L194 15L213 9L227 6L239 9L248 5L266 5L283 9L297 4L317 12L326 10L334 12L349 14L366 13L378 15L386 4L399 8L407 7L416 10L430 11L447 6L464 9L476 14L490 15L498 13L509 12L522 6L542 10L556 14L569 14L585 4L598 4L600 9L600 24Z'/%3E%3Cpath fill='%230E080D' d='M410 2h2v1h-1zM580 5h3v1h-1zM511 3h4v2h-1zM146 2h2v1h-1zM574 4h3v2h-1zM408 2h2v1h-1zM521 3h2v1h-1zM112 1h4v1h-1zM432 4h2v2h-1zM390 4h3v2h-1zM566 0h4v1h-1zM549 2h4v2h-1zM114 2h3v1h-1zM464 0h4v2h-1zM512 1h4v1h-1zM305 5h4v1h-1zM156 2h2v1h-1zM331 3h2v1h-1zM371 2h2v1h-1zM246 4h2v1h-1zM497 0h4v1h-1zM131 5h3v1h-1z'/%3E%3C/svg%3E");
}
.tdg-open__art::before {
  --tear: 32px;
  content: ""; position: absolute; z-index: 4; left: 0; top: 0;
  width: 100cqh; height: var(--tear);
  background:
    url("../assets/texture/grain-256.webp") 0 0 / 256px 256px,
    var(--tear-ink) 0 100% / 600px 24px repeat-x,
    linear-gradient(var(--ground-black), var(--ground-black)) 0 100% / 100% 6px no-repeat,
    var(--bone);
  background-blend-mode: overlay, normal, normal, normal;
  -webkit-mask: var(--edge-torn) 5px 0 / 600px 24px repeat-x, linear-gradient(#000, #000) 0 20px / 100% calc(100% - 20px) no-repeat;
  mask: var(--edge-torn) 5px 0 / 600px 24px repeat-x, linear-gradient(#000, #000) 0 20px / 100% calc(100% - 20px) no-repeat;
  transform-origin: 0 0; transform: rotate(90deg) translateY(calc(-1 * var(--tear)));
  pointer-events: none;
}
/* blinds and light wedge exist only while motion is allowed (default: none) */
.blinds, .tdg-wedge { display: none; }

/* ==========================================================================
   2. Newest episode: the big screen
   ========================================================================== */
.tdg-newest__head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 20px 56px; align-items: end; margin-bottom: 44px;
}
.tdg-kicker { margin: 0 0 14px; }
.tdg-newest__title { max-width: 17ch; }
.tdg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 14px; color: var(--label); }
.tdg-meta__rt { display: inline-flex; align-items: center; gap: 7px; }
.tdg-meta__rt svg { width: 15px; height: 15px; flex: none; }
.tdg-newest__syn { margin: 0; max-width: 46ch; }
.tdg-screen { position: relative; padding: clamp(8px, 1.2vw, 16px); background: var(--ground-black); border: 2px solid var(--bone); }
.tdg-screen::before { /* a thin inner rule, like the edge of a projection screen */
  content: ""; position: absolute; inset: clamp(3px, .5vw, 7px); border: 1px solid var(--dusk-violet); pointer-events: none;
}

/* players on this page: the play badge stays off faces */
.tdg-player { container-type: size; }
.tdg-player .player__play { gap: 10px; }
.tdg-player--l .player__play { align-items: flex-start; justify-content: flex-end; padding: clamp(14px, 2.4vw, 28px); }
.tdg-player--r .player__play { align-items: flex-end; justify-content: flex-end; padding: clamp(14px, 2.4vw, 28px); }
.tdg-player--l .player__play, .tdg-player--r .player__play { background: linear-gradient(rgb(14 8 13 / 0) 45%, rgb(14 8 13 / .6)); }
.tdg-player--lm .player__play { align-items: flex-start; justify-content: center; padding-left: 7%; background: linear-gradient(90deg, rgb(14 8 13 / .5), rgb(14 8 13 / 0) 42%); }
.tdg-player--screen .player__badge { width: clamp(72px, 9vw, 124px); border-width: 4px; }
.tdg-player .player__cta { padding: 5px 11px; }

/* iris ring: a bone edge riding the iris as the episode opens (added by the page script).
   Rulings 9 Oct: the ring lives INSIDE the stage, the box that goes full screen, so it is seen in
   full screen too. It is sized from the stage (the stage is its size container) to the iris's own
   circle (circle(75%) = 0.5303 of the stage diagonal), and both lines are drawn on the inside of
   that circle, so the stage's own iris clip never cuts them. Without hypot() the ring is larger
   than the iris and is simply clipped away: no ring, nothing broken. */
.tdg-player .player__stage { container-type: size; overflow: clip; }
.tdg-iris-ring {
  position: absolute; z-index: 4; left: 50%; top: 50%;
  width: 160cqw; width: calc(hypot(100cqw, 100cqh) * 1.0607);
  aspect-ratio: 1; translate: -50% -50%;
  border: 4px solid var(--bone); border-radius: 50%;
  pointer-events: none; transform: scale(0);
}
.tdg-iris-ring::after { /* the mustard line, 3px inside the bone edge */
  content: ""; position: absolute; inset: 3px; border: 2px solid var(--mustard); border-radius: 50%;
}

/* ==========================================================================
   3. Establishing band: the scene follows the hour
   ========================================================================== */
.tdg-band { position: relative; view-timeline: --band block; }
.tdg-band__frame { position: relative; height: clamp(300px, 48vh, 540px); border-radius: 0; overflow: clip; --grain-opacity: .2; }
.band-drift { position: absolute; left: 0; right: 0; top: -5%; bottom: -5%; }
.band-img { display: none; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: brightness(var(--art-bright)); }
:root[data-hour="daylight"] .band-img--daylight,
:root[data-hour="dusk"] .band-img--dusk,
:root[data-hour="midnight"] .band-img--midnight,
:root[data-hour="three"] .band-img--three,
:root[data-hour="dawn"] .band-img--dawn { display: block; }
.band-img--daylight { object-position: 50% 58%; }
.band-img--dusk { object-position: 50% 52%; }
.band-img--midnight { object-position: 50% 74%; }
.band-img--three { object-position: 50% 55%; }
.band-img--dawn { object-position: 50% 56%; }
/* where each scene's own light is, for the hour overlay */
:root[data-hour="daylight"] .tdg-band__frame { --lamp-x: 70%; --lamp-y: 20%; }
:root[data-hour="dusk"] .tdg-band__frame { --lamp-x: 78%; --lamp-y: 30%; }
:root[data-hour="midnight"] .tdg-band__frame { --lamp-x: 82%; --lamp-y: 20%; }
:root[data-hour="three"] .tdg-band__frame { --lamp-x: 20%; --lamp-y: 40%; }
:root[data-hour="dawn"] .tdg-band__frame { --window-x: 50%; --window-y: 30%; }

.tdg-band__plate {
  --ground: var(--ground-black); --label: var(--bone); --call-color: var(--mustard);
  position: absolute; z-index: 5;
  left: max(var(--gutter), calc((100% - var(--wrap)) / 2)); bottom: 28px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  padding: 10px 16px; background: var(--ground-black); border: 2px solid var(--bone);
  color: var(--cream);
}
/* the plate sits in each scene's empty side */
:root[data-hour="three"] .tdg-band__plate,
:root[data-hour="dawn"] .tdg-band__plate { left: auto; right: calc(max(var(--gutter), (100% - var(--wrap)) / 2) + 11%); } /* clear of the Memphis column drawn into those two scenes */
:root[data-hour="daylight"] .tdg-band__frame { --slat-a: .07; }
/* the plate reads as a film slate: the hour in big Anton */
.tdg-band__plate { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 22px 12px; }
.tdg-band__plate .tdg-band__hour {
  margin: 0; font: 400 clamp(2.25rem, 1.4rem + 2.4vw, 3.5rem)/.92 var(--font-display);
  letter-spacing: .02em; text-transform: uppercase; color: var(--bone);
}
.band-hour { display: none; }
:root[data-hour="daylight"] .band-hour--daylight,
:root[data-hour="dusk"] .band-hour--dusk,
:root[data-hour="midnight"] .band-hour--midnight,
:root[data-hour="three"] .band-hour--three,
:root[data-hour="dawn"] .band-hour--dawn { display: inline; }

/* rain: art layer only, shown only while motion runs */
.rain { display: none; position: absolute; left: -20%; right: -20%; top: -45%; bottom: -45%; z-index: 2; pointer-events: none; }
.rain--far  { background: var(--rain-far) 0 0 / 180px 180px repeat; opacity: .3; }
.rain--near { background: var(--rain-near) 0 0 / 320px 320px repeat; opacity: .4; }

/* ==========================================================================
   4. Every episode
   ========================================================================== */
.tdg-every { padding-bottom: calc(var(--section-pad) * .5); }
.tdg-every.edge-torn::after { z-index: 6; }
.tdg-every__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding-bottom: 8px; }
.tdg-every__title { margin: 0; }
.tdg-every__sub { margin: 0; }

.ep {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 28px 56px; align-items: center;
  padding-block: 56px;
  border-top: 2px solid var(--rule);
  scroll-margin-top: 0; /* the shared scroll-padding already clears the header (it was counted twice) */
}
.tdg-rows > .ep:first-child { border-top: 0; }
.ep--r { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.ep--r .ep__media { order: 2; }
.ep__media { min-width: 0; }
.ep__title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.04; color: var(--display); margin: 0 0 16px; text-wrap: balance; letter-spacing: .005em; }
.ep__syn { margin: 0; max-width: 48ch; }
.ep:focus-visible { outline-offset: 10px; }
.ep.is-target .ep__title, .tdg-newest.is-target .tdg-newest__title { text-decoration: underline 3px var(--mustard); text-underline-offset: .16em; }

/* cutaways: full-bleed noir scenes between every third row (decorative) */
.cut { position: relative; height: clamp(260px, 42vh, 480px); margin: 0; border-radius: 0; container-type: size; overflow: clip; --grain-opacity: .22; }
.cut + .tdg-rows > .ep:first-child { border-top: 0; }

/* smoke from the ashtray (art layer, only while motion runs) */
.smoke { display: none; position: absolute; left: 21.5%; top: 71%; width: 10%; height: 52%; transform: translate(-50%, -100%); z-index: 1; pointer-events: none; }
.smoke i {
  position: absolute; left: 50%; bottom: 0; width: 80%; aspect-ratio: 1 / 1.9; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(247 216 165 / .42), rgb(247 216 165 / .12) 55%, rgb(247 216 165 / 0));
  opacity: 0; transform: translate(-50%, 0) scale(.5);
}

/* ==========================================================================
   5. The tape shelf
   ========================================================================== */
.tdg-shelf { --mp-desk-h: 150px; }
.tdg-shelf__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 28px; }
.tdg-shelf__head h2 { margin: 0; }
.tdg-shelf__hint { margin: 0; }
/* Polish, 9 Oct: taller tapes (500px for the longest, was 380) and a short first-words label on each spine
   (at most two lines, no "…"); the full title still shows under the shelf on hover and focus, and screen
   readers get it in full. Spines are 56px with 5px gaps so all 15 fit without sideways scroll at 1024. */
.shelf { --shelf-max: 500px; --spine-min: 56px; --spine-gap: 5px; position: relative; overflow-x: auto; overscroll-behavior-x: contain; }
.shelf__inner { position: relative; min-width: calc(var(--n, 15) * var(--spine-min) + (var(--n, 15) - 1) * var(--spine-gap) + 20px); }
.shelf__row { list-style: none; display: flex; align-items: flex-end; gap: var(--spine-gap); padding: 28px 10px 0; min-height: calc(var(--shelf-max) + 28px); }
.shelf__row > li { flex: 1 0 var(--spine-min); min-width: 0; max-width: 78px; display: flex; align-items: flex-end; }
.spine {
  --body: var(--wine);
  position: relative; display: flex; flex-direction: column;
  width: 100%; height: calc(var(--rt) / var(--rt-max) * var(--shelf-max));   /* theme: --rt-max = the longest runtime, from the data */
  padding: 9px 5px 0;
  background: var(--body); color: var(--cream);
  border: 2px solid var(--bone); border-bottom: 0; border-radius: 4px 4px 0 0;
  text-decoration: none;
}
.spine::before { /* two ridges at the top of the case */
  content: ""; position: absolute; left: 6px; right: 6px; top: 3px; height: 3px;
  border-top: 1px solid rgb(247 216 165 / .35); border-bottom: 1px solid rgb(247 216 165 / .2);
}
.spine--wine { --body: var(--wine); }
.spine--teal { --body: var(--slate-teal); }
.spine--mulberry { --body: var(--mulberry); }
.spine--red { --body: var(--dark-red); }
.spine--black { --body: var(--ground-black); }
.spine__label {
  flex: 1 1 auto; min-height: 0; display: flex; justify-content: center;
  padding: 9px 3px; background: var(--cream); border-radius: 2px; overflow: hidden;
}
.spine__title {
  writing-mode: vertical-rl; text-orientation: sideways;
  display: block; max-width: 100%; max-height: 100%;
  font: 400 .9375rem/1.06 var(--font-display); letter-spacing: .02em;
  color: var(--ink-plum); text-wrap: pretty;
}
.spine__foot { flex: none; display: grid; gap: 2px; margin-inline: -5px; padding: 8px 0 10px; text-align: center; font: 600 .875rem/1.15 var(--font-mono); letter-spacing: -.02em; white-space: nowrap; }   /* polish: the foot uses the spine's full inside width, so "APR 27" fits a 56px tape */
.spine:hover, .spine:focus { transform: translateY(-14px); }
.spine:focus-visible { outline-offset: 4px; }
.shelf__plank {
  position: relative; height: 22px; margin-top: -1px;
  background: linear-gradient(var(--mulberry) 0 9px, var(--wine) 9px 100%);
  border-top: 2px solid var(--bone);
}
.shelf__plank::after { /* the plank's front lip */
  content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: rgb(14 8 13 / .45);
}
.shelf__readout { min-height: 1.3em; margin: 18px 0 0; }
.shelf__total { margin: 22px 0 64px; font: 700 var(--fs-h3)/1.3 var(--font-body); color: var(--display); max-width: max-content; }

/* ==========================================================================
   6. Subscribe
   ========================================================================== */
.tdg-sub__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px 64px; align-items: center; }
.tdg-sub__text h2 { margin: 0 0 18px; }
.tdg-sub__text p { max-width: 40ch; margin: 0 0 26px; }
.tdg-sub__art { border: 2px solid var(--bone); }

/* ==========================================================================
   Middle widths and phone recomposition
   ========================================================================== */
@media (max-width: 1099px) and (min-width: 900px) {
  .tdg-open__stamp { letter-spacing: .04em; }
  .tdg-open__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  .ep, .ep--r { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 36px; }
}
@media (max-width: 899px) {
  /* minmax(0, 1fr), not 1fr: a plain 1fr column grew to the stamp's one-line width (411px),
     so on a 320 to 390px phone the stamp and "Every episode" were cut off at the right edge */
  .tdg-open__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .tdg-open__stamp { white-space: normal; letter-spacing: .02em; }
  .tdg-open__stamp :is(time, .tdg-nw) { white-space: nowrap; }
  .tdg-open__artwrap { order: -1; height: 56svh; min-height: 340px; max-height: 560px; }
  .tdg-open__art { --px: 41%; }
  .tdg-open__art::before { top: auto; bottom: -1px; width: 100%; transform: none; }
  .tdg-open__text { padding: 30px var(--gutter) 52px; }
  .tdg-title { margin-bottom: 20px; }
  .tdg-open__intro { margin-bottom: 20px; }

  .tdg-newest__head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 26px; }
  .tdg-screen { margin-inline: calc(-1 * var(--gutter) + 6px); padding: 6px; }
  .tdg-player--screen:not(.tdg-player--thumb) .player__play { align-items: flex-start; justify-content: flex-end; padding: 14px; }   /* a thumbnail keeps the button in the middle (10 Oct) */

  .tdg-band__frame { height: clamp(240px, 40svh, 360px); }
  .tdg-band__plate, :root[data-hour] .tdg-band__plate { position: relative; left: auto; right: auto; bottom: auto; margin: 14px var(--gutter) 0; }
  .tdg-band { padding-bottom: 8px; background: var(--ground-black); }
  .band-img--daylight { object-position: 76% 58%; }
  .band-img--dusk { object-position: 80% 52%; }
  .band-img--midnight { object-position: 72% 74%; }
  .band-img--three { object-position: 24% 55%; }
  .band-img--dawn { object-position: 30% 56%; }

  .ep, .ep--r { grid-template-columns: 1fr; gap: 18px; padding-block: 40px; }
  .ep--r .ep__media { order: 0; }
  .ep__media { margin-inline: calc(-1 * var(--gutter) + 6px); }
  .cut { height: 30svh; min-height: 200px; }

  .shelf { --shelf-max: 380px; --spine-min: 58px; --spine-gap: 6px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .shelf__inner { width: max-content; }
  .shelf__row > li { flex: 0 0 var(--spine-min); max-width: none; }
  .spine__more { display: none; }   /* phone tapes are shorter: first words only */
  .shelf__row { padding-top: 22px; }

  .tdg-sub__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   MOTION. Nothing below runs under reduced motion or Still. Text never moves
   on its own and is never animated from invisible. Only transform, opacity,
   clip-path and mask move.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* Blinds: "you are entering The Daily Grift". We are inside the office: eight slat
     shadows lie across the detective, with light between them, then the blinds open and
     the shadows shrink to nothing, top to bottom. Pure CSS with a fill, so a failed script
     can never leave them shut. The page script pauses them (--blinds-play) until the art
     has loaded. Text is never under them. */
  :root.js:not([data-motion="still"]) .blinds {
    display: grid; grid-template-rows: repeat(8, minmax(0, 1fr));
    position: absolute; inset: -14% -9%; z-index: 3; pointer-events: none;
    transform: rotate(-6deg);
  }
  :root.js:not([data-motion="still"]) .blinds > i {
    display: block;
    background: linear-gradient(rgb(14 8 13 / 0), rgb(14 8 13 / .94) 10%, rgb(20 11 18 / .94) 90%, rgb(14 8 13 / 0));
    transform-origin: 50% 50%;
    animation: tdg-slat 920ms cubic-bezier(.6, .04, .3, 1) calc(520ms + var(--i) * 70ms) both;
    animation-play-state: var(--blinds-play, running);
  }
  :root.js:not([data-motion="still"]) .blinds__cord { display: none; }

  /* One red light wedge sweeps the floor once, as the blinds finish */
  :root.js:not([data-motion="still"]) .tdg-wedge {
    display: block; position: absolute; z-index: 2; left: 0; bottom: 0; width: 44%; height: 74%;
    background: linear-gradient(90deg, rgb(152 55 51 / 0), rgb(196 103 74 / .62) 44%, rgb(152 55 51 / .4) 62%, rgb(152 55 51 / 0));
    clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
    mix-blend-mode: screen; pointer-events: none;
    animation: tdg-wedge 1200ms ease-in-out 1250ms both;
    animation-play-state: var(--blinds-play, running);
  }

  /* hover or focus on an episode: the camera eases in on the poster (art only) */
  :root:not([data-motion="still"]) .tdg-player .player__poster { transition: transform 700ms var(--ease-out); }
  :root:not([data-motion="still"]) .tdg-player:is(:hover, :focus-within) .player__poster { transform: scale(1.035); }

  /* iris ring rides the iris edge (450ms, same curve), then lets go */
  :root:not([data-motion="still"]) .tdg-iris-ring { animation: tdg-ring 600ms both; }

  /* the band drifts a little slower than the page */
  @supports (animation-timeline: view()) {
    :root:not([data-motion="still"]) .band-drift {
      animation: tdg-drift linear both;
      animation-timeline: --band;
      animation-range: cover 0% cover 100%;
    }
  }
  /* the hour changed (the reader's clock moved into the next time of day): the new scene wipes in */
  :root:not([data-motion="still"]) .tdg-band.is-swapping .band-img { animation: tdg-swap 760ms var(--ease-folder) both; }

  /* spines lift on hover or focus */
  :root:not([data-motion="still"]) .spine { transition: transform 180ms var(--ease-out); }

  /* Ambient life: art layers only, slow, stopped by Still, and only while on screen */
  :root.ratc-ready:not([data-motion="still"]) .is-live .rain { display: block; }
  :root.ratc-ready:not([data-motion="still"]) .is-live .rain--far  { animation: tdg-rain-far 1.6s linear infinite; }
  :root.ratc-ready:not([data-motion="still"]) .is-live .rain--near { animation: tdg-rain-near 1.1s linear infinite; }
  :root.ratc-ready:not([data-motion="still"]) .is-live .glow--lamp,
  :root.ratc-ready:not([data-motion="still"]) .is-live .glow--street { animation: tdg-breathe 6.5s ease-in-out infinite; }
  :root.ratc-ready:not([data-motion="still"]) .is-live .smoke { display: block; }
  :root.ratc-ready:not([data-motion="still"]) .is-live .smoke i { animation: tdg-smoke 9s ease-out infinite; }
  :root.ratc-ready:not([data-motion="still"]) .is-live .smoke i:nth-child(2) { animation-delay: -3s; }
  :root.ratc-ready:not([data-motion="still"]) .is-live .smoke i:nth-child(3) { animation-delay: -6s; }
}

@keyframes tdg-slat {
  0%   { transform: scaleY(1); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: scaleY(0); opacity: 0; }
}
@keyframes tdg-fade { from { opacity: 1; } to { opacity: 0; } }
@keyframes tdg-wedge {
  0%   { transform: translateX(-105%); opacity: 0; }
  14%  { opacity: 1; }
  84%  { opacity: 1; }
  100% { transform: translateX(228%); opacity: 0; }
}
@keyframes tdg-ring {
  0%   { transform: scale(0); opacity: 1; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  75%  { transform: scale(1); opacity: 1; animation-timing-function: ease-out; }
  100% { transform: scale(1); opacity: 0; }
}
@keyframes tdg-drift { from { transform: translateY(-3%); } to { transform: translateY(3%); } }
@keyframes tdg-swap { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tdg-rain-far  { from { transform: rotate(9deg) translateY(-180px); } to { transform: rotate(9deg) translateY(0); } }
@keyframes tdg-rain-near { from { transform: rotate(11deg) translateY(-320px); } to { transform: rotate(11deg) translateY(0); } }
@keyframes tdg-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes tdg-smoke {
  0%   { transform: translate(-50%, 0) scale(.5); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translate(-28%, -175%) scale(1.7); opacity: 0; }
}