/* Theme copy of the approved pages/home-a.css (10 Oct 2026). Changed: the city's sizes and the sky's places read the
   drawing's own settings (set on the section by inc/home-city.php; the fallbacks are the approved 24-month city), and
   one folder-tab hover rule is kept to this design (both homepages share the page). */
/* home-a.html "And the City" - page-only styles (8 Oct 2026). Sits on shared/ratc.css.
   Rule of this file, same as the foundation: the finished, still page is the default CSS.
   Motion lives in the MOTION block at the end, inside
   @media (prefers-reduced-motion: no-preference) and :root:not([data-motion="still"]). */

.home-a main { display: block; }

/* =========================================================================
   1. THE STUDIO (opening)
   ========================================================================= */
.studio {
  position: relative;
  padding-block: clamp(2.25rem, 4.5vw, 4.5rem) clamp(5rem, 8vw, 7rem);
  min-height: min(calc(100svh - var(--header-h)), 940px);
  display: flex; align-items: center;
}
.press-filters { position: absolute; width: 0; height: 0; overflow: hidden; }
.studio__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 72px); align-items: center;
}
.studio__copy { display: grid; gap: clamp(16px, 1.8vw, 24px); align-content: center; }
.studio__hello { gap: .02em; }
.studio__hello .s-s { font-size: var(--fs-h2); color: var(--display); }
.studio__hello .s-l { font-size: var(--fs-display); line-height: .92; }
.studio__line { margin: 0; max-width: 34ch; font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem); line-height: 1.45; color: var(--text); }
.studio__lead { display: grid; gap: 14px; margin-top: clamp(4px, 1vw, 14px); padding-top: clamp(14px, 1.6vw, 22px); border-top: 2px solid var(--rule); }
.studio__stamp { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0; }
.studio__stamp .stamp { color: var(--accent); }
.studio__stamp-time { white-space: nowrap; }
/* where the stamp cannot fit one line, it breaks before the time on purpose (review 9 Oct; it used to split "7:44 / p.m.") */
@media (max-width: 1099px) {
  .studio__stamp-sep { display: none; }
  .studio__stamp-time { display: block; }
}
.studio__newclip { display: inline-flex; overflow: hidden; }
.studio__headline { max-width: 15em; }
.studio__headline a { text-decoration: none; }
.studio__headline a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--accent); text-underline-offset: .12em; }
.studio__read { margin: 4px 0 0; }

/* the print: the art sits on its own registration sheet */
.studio__print {
  position: relative; justify-self: end;
  width: 100%; max-width: min(700px, calc((min(100vw, 1400px) - 2 * var(--gutter)) / 2 + 40px));
}
.studio__art {
  --lamp-x: 40%; --lamp-y: 74%; --window-x: 16%; --window-y: 24%;
  --grain-opacity: .22;
  background: var(--scene-ground);
}
.press > .press__art { position: relative; z-index: 0; display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.press > .press__plate {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  visibility: hidden;
}
.press > .press__plate--teal   { filter: url(#plate-teal); }
.press > .press__plate--purple { filter: url(#plate-purple); }
.press > .press__plate--bone   { filter: url(#plate-bone); }

/* printer's registration marks at the corners of the sheet (decoration) */
.regmark {
  position: absolute; width: 26px; height: 26px; pointer-events: none;
  background:
    radial-gradient(circle, transparent 0 6px, var(--bone) 6.5px 8px, transparent 8.5px),
    linear-gradient(var(--bone), var(--bone)) 50% 50% / 1.5px 100% no-repeat,
    linear-gradient(var(--bone), var(--bone)) 50% 50% / 100% 1.5px no-repeat;
  opacity: .8;
}
.regmark--tl { left: -22px; top: -22px; }
.regmark--tr { right: -22px; top: -22px; }
.regmark--bl { left: -22px; bottom: -22px; }
.regmark--br { right: -22px; bottom: -22px; }

/* =========================================================================
   2. ON AIR: THE SHOWS
   ========================================================================= */
.shows { position: relative; isolation: isolate; --mosaic-from: var(--scene-ground); background: var(--night-plum); }
.shows .mosaic-band { z-index: 2; }
.shows__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
}
.shows__title { grid-column: 1; grid-row: 1; position: relative; z-index: 1; align-self: end;
  padding: clamp(4.5rem, 8vw, 6.5rem) clamp(24px, 3.5vw, 56px) 0 max(var(--gutter), calc((100vw - 1400px) / 2 + var(--gutter))); }
.show {
  grid-row: 1 / span 4; display: grid; grid-template-rows: subgrid; row-gap: 0;
  padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
}
.show--gdy { grid-column: 1; padding-left: max(var(--gutter), calc((100vw - 1400px) / 2 + var(--gutter))); padding-right: clamp(24px, 3.5vw, 56px); }
.show--tdg { grid-column: 2; padding-right: max(var(--gutter), calc((100vw - 1400px) / 2 + var(--gutter))); padding-left: clamp(24px, 3.5vw, 56px); }
.show__inner { display: contents; }
.show__head { grid-row: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-top: 1.75rem; padding-bottom: 18px; }
.show__head .label { margin: 0 0 6px; }
.show__name { font: 400 clamp(2rem, 1.4rem + 2vw, 3.25rem)/.95 var(--font-display); text-transform: uppercase; color: var(--display); text-wrap: balance; }
.show__art { grid-row: 3; position: relative; outline-offset: 4px; }
/* review tag sits under the poster, never over the faces (review 9 Oct) */
.show__art.needs-call--inside::after { position: static; display: block; transform: none; width: auto; max-width: none; margin-top: 10px; }
/* play control in the lower left, clear of the faces; the whole poster is still the button */
.show__player .player__play { flex-direction: row; align-items: flex-end; justify-content: flex-start; gap: 14px; padding: clamp(14px, 1.6vw, 22px); }
.show__player .player__badge { width: clamp(56px, 5.2vw, 76px); flex: none; }
.show__player .player__cta { margin-bottom: 4px; }
.show__art:has(.is-playing)::after { content: none; }
.show__art:has(.is-playing) { outline: 0; }
.show__player .player__poster { transition: transform 600ms var(--ease-out); transform-origin: 50% 40%; }
.show__meta { grid-row: 4; display: grid; gap: 10px; align-content: start; padding-top: 20px; }
.show__meta > * { margin: 0; }
.show__ep { font: 700 var(--fs-h3)/1.2 var(--font-body); color: var(--text); text-wrap: balance; }
.show__syn { max-width: 60ch; font-size: 1.0625rem; line-height: 1.55; }
.show__date { color: var(--label); }
.show--gdy .show__date { color: var(--lift-teal); }

/* the ON AIR sign: a real object, lit on the show with an episode in the last 7 days */
.onair {
  position: relative; isolation: isolate; flex: none;
  display: inline-grid; place-items: center;
  margin-bottom: 4px; padding: 7px 14px 6px;
  border: 2px solid var(--dusk-violet); border-radius: 7px;
  background: #160d14;
  font: 400 1.125rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase;
  color: #8f7a8b;  /* unlit, but still 4.83:1 on the sign (review 9 Oct; was 2.95) */
}
.onair::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 5px; background: var(--heart-red); opacity: 0; }
.onair__glow { position: absolute; inset: -22px -34px; z-index: -2; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(152 55 51 / .55), rgb(152 55 51 / .18) 60%, rgb(152 55 51 / 0)); opacity: 0; pointer-events: none; }
.onair--lit { border-color: var(--bone); color: var(--cream); }
.onair--lit::before, .onair--lit .onair__glow { opacity: 1; }
.onair__text { position: relative; }

/* =========================================================================
   3. THE DESK: NEWEST
   ========================================================================= */
.desk__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.desk__main > .t-h2 { margin-bottom: 1.25rem; }
.desk__list { list-style: none; border-top: 2px solid var(--rule); }
.desk__row { border-bottom: 2px solid var(--rule); }
.desk__row > a {
  display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 4px 20px; align-items: baseline;
  padding: 16px 6px 17px; color: var(--text); text-decoration: none;
}
.desk__row > a:hover { background: var(--night-plum); }
.desk__row > a:hover .desk__title { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.desk__row > a:focus-visible { outline-offset: -2px; }
.desk__when { display: contents; }
.desk__when .label { grid-column: 1; grid-row: 1; color: var(--lift-teal); }
.desk__title { grid-column: 2; grid-row: 1; }
.desk__tabclip { grid-column: 2; grid-row: 2; justify-self: start; display: none; overflow: hidden; padding-top: 6px; }
.desk__row.is-new .desk__tabclip { display: flex; }
.desk__title { font-size: clamp(1.1875rem, 1.05rem + .45vw, 1.4375rem); }
.desk__all { margin: 1.5rem 0 0; }

.desk__side { padding-top: calc(var(--fs-h2) * 1.05 + 1.25rem); align-self: stretch; }
/* the card rides along beside the list instead of leaving a dead column under it (review 9 Oct) */
.yearcard { position: sticky; top: calc(var(--header-h) + 28px); padding-top: 32px; }
.yearcard__tab { position: absolute; top: 0; left: 0; }
h3.yearcard__tab { font: 600 var(--fs-label)/1.2 var(--font-mono); letter-spacing: .08em; }
.yearcard__body { display: grid; gap: 10px; padding: 22px 22px 24px; background: var(--night-plum); border: 2px solid var(--mustard); }
.yearcard__body > * { margin: 0; }
.yearcard__date { color: var(--lift-teal); }
.yearcard__title { font: 400 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.05 var(--font-display); color: var(--display); text-wrap: balance; }
.yearcard__title a { text-decoration: none; }
.yearcard__title a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

/* =========================================================================
   4. THE CITY (volume moment)
   ========================================================================= */
.city {
  position: relative; isolation: isolate; overflow-x: clip;
  padding-top: clamp(2.75rem, 4.5vw, 4.25rem);
  --mosaic-from: var(--ink-plum);
  /* polish 9 Oct: the head sits on the hour's flat ground; the sky gradient now lives on the stage, so it fills the taller sky */
  background: var(--scene-ground);
  /* the sky follows the hour (art only). Daylight is the scripts-off default: flat bone sun behind a cloud, no moon, no stars */
  --sky-dusk: none; --sky-dawn: none;
  --path-x: var(--city-sun-x, 84.2%); --path-w: var(--city-sun-w, 4.2%); --path-c: rgb(232 195 146 / .13);
}
:root[data-hour="dusk"] .city { --sky-dusk: inline; --path-x: var(--city-dusk-x, 9.7%); --path-w: var(--city-dusk-w, 17%); --path-c: rgb(217 140 66 / .3); }
:root[data-hour="midnight"] .city, :root[data-hour="three"] .city { --path-x: var(--city-moon-x, 85.9%); --path-w: var(--city-moon-w, 3.6%); --path-c: rgb(232 195 146 / .22); }
:root[data-hour="dawn"] .city { --sky-dawn: inline; --path-x: var(--city-dawn-x, 21.8%); --path-w: var(--city-dawn-w, 7%); --path-c: rgb(232 195 146 / .2); }
.city__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px clamp(28px, 4vw, 64px); align-items: end;
  position: relative; z-index: 3;
}
.city__intro { display: grid; gap: 12px; }
.city__intro > * { margin: 0; }
.city__title { line-height: .9; }
.city__caption { max-width: 44ch; font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); line-height: 1.45; }
.city__controls { display: grid; gap: 12px; justify-items: start; }
.city__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.city__chip-btn { min-height: 40px; padding: 0 14px; background: var(--ground); }
.city__chip-btn[aria-pressed="true"] { background: var(--bone); }
.city__find { display: grid; gap: 6px; width: min(100%, 440px); }
.city__input {
  width: 100%; min-height: 48px; padding: 8px 14px;
  background: var(--ink-plum); color: var(--cream);
  border: 2px solid var(--bone); border-radius: 0;
  font: 400 1.1875rem/1.2 var(--font-body);
}
.city__input:focus-visible { outline-offset: 2px; }
.city__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; width: 100%; }
.city__status { margin: 0; min-height: 1.3em; color: var(--label); }

.city__stage {
  position: relative; margin-top: clamp(4px, 1.5vw, 20px); overflow-x: clip;
  background: linear-gradient(to bottom, var(--scene-ground) 0, color-mix(in srgb, var(--scene-ground) 82%, var(--ground-black)) 34%, color-mix(in srgb, var(--scene-ground) 50%, var(--ground-black)) 58%, color-mix(in srgb, var(--scene-ground) 26%, var(--ground-black)) 73.4%);
}
/* the list opens on black, full width, as it did before the sky moved onto the stage */
.city__list { background: var(--ground-black); box-shadow: 0 0 0 100vmax var(--ground-black); clip-path: inset(0 -100vmax); }
/* full-bleed quay and river behind the centred scene (percentages match the scene's own: ground 440 of 600, river 496) */
.city__stage::before, .city__stage::after { content: ""; position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none; }
.city__stage::before { top: var(--city-ground, 73.333%); height: var(--city-quay, 9.333%); background: #140a12; border-top: 1px solid #4b3745; }
.city__stage::after { top: var(--city-river, 82.667%); bottom: 0; background: linear-gradient(#0e080d, #120a11 60%, #0e080d); }
.city__haze {
  position: absolute; left: 0; right: 0; top: 30%; height: 43.33%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 30% 75% at 66% 100%, rgb(217 140 66 / .2), rgb(217 140 66 / 0) 72%),
    radial-gradient(ellipse 62% 70% at 48% 100%, rgb(115 54 58 / .5), rgb(115 54 58 / 0) 78%);
}
.city__clouds { position: absolute; left: 0; right: 0; top: 0; height: 40%; z-index: 0; pointer-events: none; }
/* clouds as flat printed streaks (hard edges, one low-contrast ink), not soft airbrush blobs (review 9 Oct) */
.cloud { position: absolute; display: block; height: 10px; border-radius: 10px; background: var(--scene-mp); opacity: .7; }
.cloud::before, .cloud::after { content: ""; position: absolute; height: 10px; border-radius: 10px; background: inherit; }
.cloud--1 { left: 40%; top: 62%; width: 230px; }   /* below the big month label (polish 9 Oct) */
.cloud--1::before { left: 46px; top: -17px; width: 118px; }
.cloud--1::after { left: 112px; top: 17px; width: 160px; }
.cloud--2 { left: 63%; top: 50%; width: 290px; opacity: .55; }
.cloud--2::before { left: 70px; top: -17px; width: 150px; }
.cloud--2::after { left: -48px; top: 17px; width: 176px; }
.cloud--3 { left: 83%; top: 12%; width: 160px; opacity: .55; }
.cloud--3::before { left: 34px; top: 17px; width: 96px; }

/* polish 9 Oct: a taller scene (1029 x 600, buildings 1.5x taller) sized to fill the screen; March 2026 reaches near its top */
.city__scene {
  position: relative; z-index: 1;
  width: min(100%, 1800px, calc((100svh - 104px) * var(--city-ratio, 1.715)));
  margin-inline: auto; aspect-ratio: var(--city-w, 1029) / var(--city-h, 600);
}
/* the art layer (skyline, glow, river) in one box, so the camera push moves art only, never the labels */
.city__art { position: absolute; inset: 0; z-index: 0; transform-origin: 50% var(--city-ground, 73.3%); }
.city__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.city__bloom { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; filter: blur(7px); mix-blend-mode: screen; opacity: .8; }
.b:nth-child(even) .b__body { fill: #20121e; }
.city__stars { fill: none; stroke: var(--bone); stroke-width: 1.5; opacity: .32; }
/* sky bodies by the hour: flat inks, no glow (polish 9 Oct) */
.sky, .city__stars { display: none; }
:root:not([data-hour]) .sky--day, :root[data-hour="daylight"] .sky--day,
:root[data-hour="midnight"] .sky--moon, :root[data-hour="three"] .sky--moon,
:root[data-hour="three"] .city__stars { display: inline; }
.sky--dusk { display: var(--sky-dusk, none); fill: var(--mustard); }      /* custom properties reach the river's mirror copy too */
.sky--dawn { display: var(--sky-dawn, none); fill: var(--bone); }
.sky__sun { fill: var(--bone); }
.sky__cloud rect { fill: var(--dusk-violet); }
.sky__cloud rect:nth-child(2) { fill: #3d2b38; }
.city__halo { fill: url(#moon-halo); }
.city__crescent { fill: var(--bone); opacity: .92; }
.city__far { fill: #170e16; stroke: #22151f; stroke-width: 1; }
.city__pyr { fill: #1a1019; stroke: #3b2a37; stroke-width: 1; }
.city__pyr-lines { fill: none; stroke: #2c1d29; stroke-width: 1; }
.b__body, .b__crown { fill: var(--ink-plum); stroke: var(--dusk-violet); stroke-width: 1; }
.b__door { fill: #2a1a27; }
.b__mast { fill: none; stroke: var(--dusk-violet); stroke-width: 1.5; }
.b__mp { fill: none; stroke: #3d2b38; stroke-width: 1.5; stroke-linejoin: round; }
.lot__line { stroke: var(--dusk-violet); stroke-width: 1.5; stroke-dasharray: 3 3; fill: none; }
.lot__fence { stroke: #3d2b38; stroke-width: 1.5; fill: none; }
.city__wins rect { fill: var(--lit, var(--mustard)); }
/* lit windows in three warm inks, mustard to bone (one per piece, fixed, never changing) */
.city__wins .w2, .floor__wins .w2 { --lit: var(--bone); }
.city__wins .w3, .floor__wins .w3 { --lit: #E0A76A; }
.city__quay { fill: #140a12; }
.city__quay-edge { stroke: var(--dusk-violet); stroke-width: 1.5; fill: none; }
.city__quay-edge--low { stroke: #2a1a27; }
.city__quay-mp { stroke: #2a1a27; stroke-width: 1.5; fill: none; }

/* the river: the skyline mirrored behind broken water lines */
.city__river { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.city__reflect {
  display: block; width: 100%; height: auto; aspect-ratio: var(--city-w, 1029) / 104; overflow: visible;
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / .42) 0, rgb(0 0 0 / .16) 45%, rgb(0 0 0 / 0) 92%), repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 5px, #000 5px 9px, transparent 9px 10px);
  mask-image: linear-gradient(to bottom, rgb(0 0 0 / .42) 0, rgb(0 0 0 / .16) 45%, rgb(0 0 0 / 0) 92%), repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 5px, #000 5px 9px, transparent 9px 10px);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.city__waves {
  position: absolute; left: -120px; right: -120px; height: 10px;
  background: var(--dusk-violet); opacity: .32;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='10' viewBox='0 0 60 10'%3E%3Cpath d='M0 7l7.5-4 7.5 4 7.5-4 7.5 4 7.5-4 7.5 4 7.5-4 7.5 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") 0 0 / 60px 10px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='10' viewBox='0 0 60 10'%3E%3Cpath d='M0 7l7.5-4 7.5 4 7.5-4 7.5 4 7.5-4 7.5 4 7.5-4 7.5 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") 0 0 / 60px 10px repeat-x;
}
.city__waves--1 { top: 46%; }
.city__waves--2 { top: 74%; opacity: .22; }
.city__moonpath {
  position: absolute; left: calc(var(--path-x) - var(--path-w) / 2); width: var(--path-w); top: 8%; height: 80%;
  background: repeating-linear-gradient(to bottom, var(--path-c) 0 2px, transparent 2px 7px);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent);
}
.glint { position: absolute; display: block; width: 18px; height: 2px; background: var(--bone); opacity: .18; }

/* months: each building is a button; the label chip sits on the quay.
   Rulings 9 Oct: the month buttons and the year labels sit in boxes the size of the art layer, with its transform origin,
   so the camera push moves them with their buildings (they used to drift up to 25px off in the first second). */
.city__months, .city__years { position: absolute; inset: 0; margin: 0; padding: 0; transform-origin: 50% var(--city-ground, 73.3%); pointer-events: none; }
.city__months { list-style: none; }
.city__bldg {
  position: absolute; z-index: 2; pointer-events: auto;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0; border: 0; border-radius: 2px; background: none; color: var(--bone);
}
.city__bldg:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.city__chip {
  display: block; padding: 3px 1px 2px; transform: translateY(2px);
  font: 600 .875rem/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--bone);
  white-space: nowrap;
}
.city__bldg:hover .city__chip, .city__bldg:focus-visible .city__chip { color: var(--cream); text-decoration: underline; text-decoration-color: var(--mustard); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .city__bldg { pointer-events: none; }
  .city__chip { pointer-events: auto; cursor: pointer; }
  .city__svg .b, .city__wins rect { cursor: pointer; }
}
.city__years { pointer-events: none; }
.city__year {
  position: absolute; z-index: 2; display: block;
  border-top: 2px solid var(--dusk-violet); padding-top: 3px;
  font: 600 .875rem/1 var(--font-mono); letter-spacing: .1em; color: var(--lift-teal);
}
/* the month being lit: big stacked-poster type in the sky, on the content's left edge (review 9 Oct; was small mono in the corner) */
/* polish 9 Oct: bigger still, stacked month over year, lined up with the heading's left edge */
.city__ticker {
  position: absolute; z-index: 3; top: 4%; margin: 0;
  left: max(var(--gutter), calc(max(var(--gutter), (100vw - 1400px) / 2 + var(--gutter)) - (100vw - 100%) / 2));
  font: 400 clamp(3rem, 1rem + 5.4vw, 7.5rem)/.84 var(--font-display); letter-spacing: .01em; text-transform: uppercase; color: var(--display);
  pointer-events: none;
}
.city__ticker span { display: block; }
.city__ticker .tk-y { margin-top: .12em; font-size: .46em; letter-spacing: .08em; }

/* searchlights: two flat print-ink beams behind the March 2026 tower. Art layer only.
   Shown once the city is lit; they sweep slowly only while the city is alive; Still and reduced motion leave them at rest. */
.city__beams {
  position: absolute; z-index: 0; top: 0; height: var(--city-ground, 73.4%); pointer-events: none;
  left: calc(50% + var(--city-tower, .1837) * min(100%, 1800px, calc((100svh - 104px) * var(--city-ratio, 1.715))));
  width: 0;
}
/* no searchlights by day or at dawn */
:root:not([data-hour]) .city__beams, :root[data-hour="daylight"] .city__beams, :root[data-hour="dawn"] .city__beams { display: none; }
.beam {
  position: absolute; bottom: 0; left: 0; display: block;
  width: clamp(180px, 22vw, 360px); height: 100%; margin-left: calc(clamp(180px, 22vw, 360px) / -2);
  transform-origin: 50% 100%;
  clip-path: polygon(48.5% 100%, 51.5% 100%, 100% 0, 0 0);
  background: linear-gradient(to top, rgb(232 195 146 / .2), rgb(232 195 146 / .09) 55%, rgb(232 195 146 / 0) 96%);
}
.beam--1 { transform: rotate(-17deg); }
.beam--2 { transform: rotate(13deg); opacity: .8; }
.city__tip {
  position: absolute; z-index: 6; left: 0; top: 0;
  width: max-content; max-width: min(320px, 70vw);
  padding: 8px 12px 9px;
  background: var(--ink-plum); border: 2px solid var(--bone); color: var(--cream);
  transform: translate(-50%, calc(-100% - 12px));
  pointer-events: none;
}
.city__tip .label { display: block; margin-bottom: 3px; color: var(--lift-teal); }
.city__tip b { display: block; font: 700 1rem/1.3 var(--font-body); }

/* window states: lit is the default (finished) state */
.city.is-armed .city__wins rect, .city.is-armed .floor__wins i { fill: #33201f; background: #33201f; }  /* unlit: mustard at about 12% */
.city.is-armed .city__wins rect.is-on, .city.is-armed .floor__wins i.is-on { fill: var(--lit, var(--mustard)); background: var(--lit, var(--mustard)); }
.city__wins rect.is-dim, .floor__wins i.is-dim { fill: var(--dusk-violet); background: var(--dusk-violet); }
.city__wins rect.is-match, .floor__wins i.is-match { fill: var(--bone); background: var(--bone); }
.city__hl { fill: var(--cream); pointer-events: none; }
/* the copies of the windows (glow and river) only appear once the city has finished lighting */
.city.is-armed .city__bloom, .city.is-armed .city__reflect, .city.is-armed .city__beams { opacity: 0; }

/* list view */
.city__list { position: relative; z-index: 2; padding-block: 2rem 1rem; }
.city__list-all { margin: 0 0 1.5rem; }
.mlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 28px 40px; }
.mlist__month h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 2px solid var(--dusk-violet);
  font: 400 1.5rem/1.1 var(--font-display); text-transform: uppercase; color: var(--display); }
.mlist__month h3 .label { color: var(--lift-teal); }
.mlist__month ul { list-style: none; }
.mlist__month li a { display: grid; gap: 1px; padding: 7px 0; color: var(--cream); text-decoration: none; border-bottom: 1px solid #2a1a27; }
.mlist__month li a:hover b { text-decoration: underline; text-decoration-color: var(--mustard); }
.mlist__month li .label { color: var(--lift-teal); }
.mlist__month li b { font: 700 1.0625rem/1.3 var(--font-body); }
.mlist__empty { font-size: 1rem; color: var(--cream); margin: 6px 0 0; }

/* phone tower (built for both; shown under 900px) */
.tower { display: none; }

/* month panel (dialog) */
.month-panel {
  width: min(760px, 100% - 32px); max-height: min(86vh, 900px);
  margin: 8vh auto auto; padding: 0;
  border: 2px solid var(--bone); border-top: 6px solid var(--mustard); border-radius: 0;
  background: var(--night-plum); color: var(--cream);
  overflow: hidden;
}
.month-panel::backdrop { background: rgb(14 8 13 / .82); }
.month-panel__inner { display: flex; flex-direction: column; max-height: inherit; padding: 18px 22px 22px; }
.month-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--dusk-violet); }
.month-panel__head .label { margin: 0 0 4px; color: var(--lift-teal); }
.month-panel__head h2:focus { outline: none; }
.month-panel__head h2:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.month-panel__list { list-style: none; overflow: auto; overscroll-behavior: contain; margin: 4px -8px 0; padding: 0 8px 4px; }
.month-panel__list a { display: grid; gap: 2px; padding: 10px 6px; color: var(--cream); text-decoration: none; border-bottom: 1px solid var(--dusk-violet); }
.month-panel__list a:hover { background: var(--wine); }
.month-panel__list a:focus-visible { outline-offset: -2px; background: var(--wine); }
.month-panel__list .label { color: var(--lift-teal); }
.month-panel__list a:hover .label, .month-panel__list a:focus-visible .label { color: var(--cream); }
.month-panel__list b { font: 700 1.125rem/1.3 var(--font-body); }
.month-panel__list li.is-match b { color: var(--bone); }
.month-panel__list li.is-match b::before { content: ""; display: inline-block; width: 8px; height: 10px; margin-right: 8px; background: var(--bone); vertical-align: 1px; }
.month-panel__none { padding: 14px 0 4px; font-size: 1.0625rem; }

/* =========================================================================
   5. THE ROOMS
   ========================================================================= */
.room__copy > * { margin: 0; }
.room__copy { display: grid; gap: 12px; align-content: start; }
.rooms__title { margin-bottom: 1.25rem !important; }
.room__kicker { color: var(--label); }
.room__name { font: 400 var(--fs-h2)/1.02 var(--font-display); text-transform: uppercase; color: var(--display); }
.room__big { font: 400 clamp(2rem, 1.3rem + 2.6vw, 3.75rem)/1 var(--font-display); color: var(--display); text-wrap: balance; max-width: 16em; }
.room__line { max-width: 52ch; font-size: clamp(1.125rem, 1.05rem + .3vw, 1.25rem); line-height: 1.55; }
.room__all { margin: 2rem 0 0; }

/* GriftMatrix: her line, three doors, and the mini two-shot */
.room__grid--gm { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.doors { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px !important; }
.door {
  position: relative; display: flex; align-items: flex-end;
  width: clamp(6.5rem, 5rem + 4vw, 9rem); height: clamp(8.5rem, 7rem + 4vw, 11rem);
  padding: 12px 14px; border: 2px solid var(--cream); border-radius: 0;
  background: rgb(14 8 13 / .2);
  font: 400 clamp(1.125rem, 1rem + .5vw, 1.5rem)/1 var(--font-display); text-transform: uppercase; color: var(--cream);
  text-decoration: none;
}
.door::before { content: ""; position: absolute; left: 8px; right: 8px; top: 8px; height: 38%; border: 2px solid rgb(247 216 165 / .35); }
.door__knob { position: absolute; right: 12px; top: 54%; width: 9px; height: 9px; border-radius: 50%; background: var(--mustard); border: 1.5px solid var(--cream); }
.door:hover { background: var(--cream); color: var(--ink-plum); }
.door:hover::before { border-color: rgb(27 15 25 / .35); }
.minishot { display: block; position: relative; color: var(--cream); text-decoration: none; padding: 6px; }
.minishot__pair { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 96px; padding-bottom: 92px; margin-bottom: 8px; view-transition-name: two-shot; }
.minishot__card {
  position: relative; z-index: 1; display: block; padding: 16px 16px 14px;
  background: var(--cream); color: var(--ink-plum); border: 2px solid var(--bone);
  font: 400 clamp(1.25rem, 1rem + 1vw, 1.875rem)/1 var(--font-display); text-transform: uppercase;
}
.minishot__card:nth-child(2) { margin-top: 34px; }
.minishot .string-label { background: var(--ground); color: var(--cream); border-color: var(--cream); }
.minishot__line { display: block; max-width: 34ch; font-size: clamp(1.125rem, 1.05rem + .4vw, 1.3125rem); line-height: 1.45; }
.minishot:hover .minishot__line { text-decoration: underline; text-decoration-color: var(--cream); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.minishot:focus-visible { outline-offset: 6px; }

/* The Receipts: a time rail of the 11 live parts (Part B dropped 9 Oct, so 12 columns: 11 stops, each two wide, one step apart) */
.room__copy--rc { max-width: 900px; }
.room__big--rc { max-width: none; }
.rail {
  list-style: none; position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 40px auto;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.rail::before { content: ""; position: absolute; left: 0; right: calc(100% / 12); top: 50%; height: 2px; background: var(--cream); transform: translateY(-1px); }
.rail { --rail-mid: 0; }
.rail__stop { position: relative; grid-column: calc(var(--i) + 1) / span 2; }
.rail__stop:nth-child(odd) { grid-row: 1; align-self: end; }
.rail__stop:nth-child(even) { grid-row: 3; align-self: start; }
.rail__stop > a, .rail__ghost {
  position: relative; display: grid; gap: 4px; align-content: start;
  padding: 0 10px 10px 14px; border-left: 2px solid var(--cream);
  color: var(--cream); text-decoration: none;
}
.rail__stop:nth-child(even) > a, .rail__stop:nth-child(even) .rail__ghost { padding: 10px 10px 0 14px; }
.rail__stop > a:hover .rail__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.rail__stop > a:focus-visible { outline-offset: 2px; }
.rail__mark {
  position: absolute; left: -9px; width: 16px; height: 16px;
  background: var(--mustard); border: 2px solid var(--cream); transform: rotate(45deg);
}
.rail__stop:nth-child(odd) .rail__mark { bottom: -28px; }
.rail__stop:nth-child(even) .rail__mark { top: -28px; }
.rail__act { color: var(--cream); }
.rail__name { font: 400 clamp(1.125rem, .95rem + .55vw, 1.5rem)/1.02 var(--font-display); text-transform: uppercase; color: var(--display); text-wrap: balance; }
.rail__line { font-size: .9375rem; line-height: 1.35; max-width: 22ch; }
.rail__stop--here .rail__mark { width: 20px; height: 20px; left: -11px; background: var(--bone); }
.rail__stop--here > a { view-transition-name: act-ix; }
.rail__stop--ghost .rail__mark { background: transparent; border-style: dashed; }
.rail__ghost { border-left-style: dashed; }
.rail__ghost .rail__act { opacity: 1; }

/* The Epstein Files: drawer tabs over the records room */
.room--ef { overflow: hidden; }
.room__bg { position: absolute; inset: 0 0 0 38%; z-index: -1; pointer-events: none; }
.room__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; opacity: .3;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 45%); mask-image: linear-gradient(to right, transparent 0, #000 45%); }
.room__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--dark-red) 0, rgb(112 4 4 / .35) 50%, rgb(112 4 4 / .5)); }
.room__ef { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.room__copy--ef { max-width: 760px; background: none; }
.room__big--ef { font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); line-height: 1.04; }
.drawer { max-width: 980px; }
.drawer__tabs { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 4px; padding-left: 10px; overflow: hidden; padding-top: 4px; }
.drawer__tabs .folder-tab { min-height: 40px; padding: 9px 20px 8px; font-size: .9375rem; }
.home--a a.folder-tab:hover::before, .home--a a.folder-tab:focus-visible::before { background: var(--bone); }
.drawer__front { padding: 26px 24px 30px; border: 2px solid var(--cream); border-top-width: 4px; background: rgb(14 8 13 / .28); }
.drawer__start { margin: 0; display: inline-block; }

/* The xAI Files and The AI Files: plain link cards, no motion */
.xcards { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.xcard { display: grid; align-content: start; gap: 10px; border: 2px solid var(--dusk-violet); background: var(--ink-plum); color: var(--cream); text-decoration: none; }
.xcard--xai { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.xcard__art { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.xcard__body { display: grid; gap: 10px; align-content: start; padding: 24px; }
.xcard__body > * { margin: 0; }
.xcard--ai { padding: 24px; }
.xcard__name { font: 400 var(--fs-h2)/1.02 var(--font-display); text-transform: uppercase; color: var(--display); }
.xcard__name a { text-decoration: none; }
.xcard__name a:hover, a.xcard:hover .xcard__name { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--mustard); text-underline-offset: .12em; }
.xcard__line { font-size: 1.125rem; line-height: 1.5; }
.xcard__room { margin-top: 10px !important; padding-top: 14px; border-top: 2px solid var(--dusk-violet); color: var(--lift-teal); }
.xcard__big { font: 700 var(--fs-h3)/1.25 var(--font-body); color: var(--bone); }
a.xcard:focus-visible { outline-offset: 4px; }

/* =========================================================================
   6. TOOLS
   ========================================================================= */
.tools { --mp-desk-h: 7rem; padding-bottom: 8rem; }
.tools__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.tool { display: grid; gap: 14px; align-content: start; }
.tool > p, .tool__copy > p { margin: 0; }
.tool--ct { grid-template-columns: minmax(0, 1fr); }
.tool__copy { display: grid; gap: 14px; }
.tool__art { --grain-opacity: .2; }
.tool__count { display: inline-block; justify-self: start; font-weight: 700; }
.tool__first { display: grid; gap: 4px; }
.tool__first a { font: 700 var(--fs-h3)/1.25 var(--font-body); color: var(--cream); }
.tool__resume { display: none; }
:root[data-returning="on"] .tool__resume { display: block; }
.tool--jic { padding-top: 6px; }
.tool--jic .t-h2 { max-width: 14em; }
.tool__figures { justify-self: start; }

/* =========================================================================
   7. SUBSCRIBE
   ========================================================================= */
.subscribe__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; max-width: 980px; }
.subscribe__env { width: clamp(150px, 16vw, 220px); height: auto; transform: rotate(-4deg); }
.subscribe__copy { display: grid; gap: 14px; }
.subscribe__copy > * { margin: 0; }
.subscribe__copy p:first-of-type { max-width: 46ch; }

/* shorter and narrower desktops: the opening still fits the first screen (Read it included) */
@media (min-width: 900px) and (max-width: 1279px) {
  .studio__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 900px) and (max-height: 860px) {
  .studio { padding-block: 1.25rem 4.25rem; }
  .studio__copy { gap: 14px; }
  .studio__hello .s-s { font-size: clamp(1.75rem, 4.6vh, 2.75rem); }
  .studio__hello .s-l { font-size: clamp(2.5rem, 8.8vh, 5.5rem); }
  .studio__line { font-size: 1.125rem; }
  .studio__lead { gap: 10px; padding-top: 12px; margin-top: 0; }
  .studio__headline { font-size: clamp(2rem, 6.3vh, 4rem); }
}

/* =========================================================================
   PHONE (under 900px): recomposed, not shrunk
   ========================================================================= */
@media (max-width: 899px) {
  .studio { min-height: 0; display: block; padding-top: 0; padding-bottom: 4.5rem; }
  .studio__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .studio__print { order: -1; justify-self: stretch; max-width: none; margin-inline: calc(-1 * var(--gutter)); width: auto; }
  .studio__art { border-radius: 0; border-width: 0 0 2px; }
  /* 34svh shows the whole picture (hair to desk) and keeps her line clear of the Review button (review 9 Oct) */
  .press > .press__art { aspect-ratio: auto; height: clamp(220px, 34svh, 380px); object-position: 40% 32%; }
  .press > .press__plate { object-position: 40% 32%; }
  .regmark { display: none; }
  .studio__copy { gap: 12px; }
  .studio__hello .s-s { font-size: 1.75rem; }
  .studio__line { order: 9; font-size: 1.125rem; }
  .studio__lead { order: 2; border-top: 0; padding-top: 0; margin-top: 2px; gap: 10px; }
  .studio__headline { font-size: clamp(1.875rem, 1.2rem + 3vw, 2.5rem); }
  .studio__stamp .stamp { letter-spacing: .06em; padding-inline: 8px; }

  .shows { background: var(--night-plum); }
  .shows__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .shows__title { grid-column: 1; grid-row: auto; padding: 4rem var(--gutter) 0; }
  .show { grid-row: auto; grid-column: 1 !important; display: block; padding: 0 var(--gutter) 3.5rem !important; }
  .show__inner { display: grid; }
  .show--tdg { padding-top: 0 !important; }
  .show--tdg .show__head { padding-top: 3.5rem; }
  .show__head { padding-top: 1rem; }
  .show__player .player__play { padding: 12px; gap: 10px; }

  .desk__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .desk__row > a { grid-template-columns: minmax(0, 1fr); padding: 14px 2px 15px; }
  .desk__when .label, .desk__title, .desk__tabclip { grid-column: 1; grid-row: auto; }
  .desk__side { padding-top: 0; }

  .city { padding-top: 4rem; background: linear-gradient(to bottom, var(--scene-ground) 0, color-mix(in srgb, var(--scene-ground) 50%, var(--ground-black)) 22%, var(--ground-black) 44%); }
  .city__head { grid-template-columns: minmax(0, 1fr); }
  .city__chips { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter); width: calc(100% + 2 * var(--gutter)); }
  .city__chips::-webkit-scrollbar { display: none; }
  .city__chip-btn { flex: none; }
  .city__controls { justify-items: stretch; }
  .city__find { width: 100%; }
  .city__stage { margin-top: 2rem; padding: 0 var(--gutter) 0; background: none; }
  .city__stage::before, .city__stage::after, .city__haze, .city__beams { display: none; }
  .city__clouds { display: none; }  /* the printed streaks read as ledges beside the phone tower (review 9 Oct) */
  .city__scene { display: none; }
  .tower { display: block; position: relative; z-index: 1; width: min(100%, 300px); margin: 0 auto; }
  .tower__crown { display: block; width: 100%; height: auto; overflow: visible; }
  .tower__floors {
    list-style: none; position: relative; z-index: 1;
    background: var(--ink-plum); border: 1px solid var(--dusk-violet); border-bottom: 0;
    -webkit-box-reflect: below 26px linear-gradient(transparent 86%, rgb(0 0 0 / .24));
  }
  .floor__btn {
    display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: end; gap: 8px;
    width: 100%; min-height: 34px; padding: 7px 10px 7px 10px;
    background: none; border: 0; border-top: 2px solid #2a1a27; color: var(--bone); text-align: left;
  }
  .floor:first-child .floor__btn { border-top: 0; }
  .floor__btn:focus-visible { outline-offset: -3px; }
  .floor__label { font: 600 .875rem/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; padding-bottom: 1px; }
  .floor__wins { display: flex; flex-wrap: wrap-reverse; gap: 3px; width: 177px; justify-self: end; }
  .floor__wins i { display: block; width: 12px; height: 15px; background: var(--lit, var(--mustard)); }
  .floor--empty .floor__btn { min-height: 30px; }
  .floor--empty .floor__wins { height: 2px; border-top: 2px dashed var(--dusk-violet); align-self: center; }
  .tower__quay { height: 26px; margin-inline: -24px; background: #140a12; border-top: 1px solid var(--dusk-violet); position: relative; z-index: 2; }
  .tower__river { position: relative; height: 150px; margin-inline: calc(-1 * var(--gutter) - 40px); overflow: hidden; }
  .tower__river .city__waves--1 { top: 34%; }
  .tower__river .city__waves--2 { top: 68%; }
  .city__list { padding-top: 1.5rem; }

  .room__grid--gm { grid-template-columns: minmax(0, 1fr); }
  .doors { gap: 10px; }
  .doors li { flex: 1 1 0; min-width: 0; }
  .door { width: 100%; height: 8.5rem; padding: 10px; font-size: 1.0625rem; }
  .minishot__pair { grid-template-columns: minmax(0, 1fr); gap: 84px; padding-bottom: 6px; margin-bottom: 18px; }
  .minishot__card { padding: 12px 14px; width: 70%; }
  .minishot__card:nth-child(2) { margin: 0 0 0 30%; }

  .rail { display: block; margin-top: 2rem; padding-left: 14px; }
  .rail::before { left: 14px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; transform: none; }
  .rail__stop { grid-column: auto; }
  .rail__stop > a, .rail__ghost, .rail__stop:nth-child(even) > a, .rail__stop:nth-child(even) .rail__ghost { padding: 6px 0 18px 26px; border-left: 0; }
  .rail__stop:nth-child(odd) .rail__mark, .rail__stop:nth-child(even) .rail__mark { top: 10px; bottom: auto; left: -7px; }
  .rail__stop--here .rail__mark { left: -9px; }
  .rail__line { max-width: none; }

  .room__bg { inset: 0 0 auto 0; height: 260px; }
  .room__bg img { -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent); mask-image: linear-gradient(to bottom, #000 30%, transparent); }
  .room__bg::after { background: linear-gradient(to bottom, rgb(112 4 4 / .45), var(--dark-red)); }
  .room__copy--ef { padding-top: 120px; }
  .drawer__tabs { padding-left: 0; }
  .drawer__front { padding: 20px 16px 24px; }

  .xcards { grid-template-columns: minmax(0, 1fr); }
  .room--x { padding-bottom: 7rem; }
  .room--rc .room__all { margin-top: 4.5rem; }
  .xcard--xai { grid-template-columns: minmax(0, 1fr); }
  .xcard__art { aspect-ratio: 16 / 9; height: auto; }

  .tools__grid { grid-template-columns: minmax(0, 1fr); gap: 3.5rem; }
  .subscribe__grid { grid-template-columns: minmax(0, 1fr); }
  .subscribe__env { width: 140px; }
}

/* =========================================================================
   MOTION. Only when the device allows it and Still is off.
   Text never moves on its own and is never animated from invisible.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* 1a. The screenprint: three tinted plates of the same art are pulled one after another, top to bottom like a squeegee
         pass (teal, then purple, then bone), each laid down slightly out of register and sliding in; then full colour settles.
         Polish 9 Oct: the plates used to appear all at once as three offset copies, which read as a doubled picture. */
  :root:not([data-motion="still"]) .press > .press__plate {
    visibility: visible;
    animation: ha-pull 340ms cubic-bezier(.3, 0, .35, 1) var(--pd, 0ms) both, ha-plate 820ms var(--ease-out) var(--pd, 0ms) both, ha-plate-off 1ms linear 1700ms forwards;
  }
  :root:not([data-motion="still"]) .press > .press__plate--teal   { --dx: -16px; --dy: 10px; --pd: 0ms; }
  :root:not([data-motion="still"]) .press > .press__plate--purple { --dx: 14px;  --dy: -9px; --pd: 170ms; }
  :root:not([data-motion="still"]) .press > .press__plate--bone   { --dx: 6px;   --dy: 12px; --pd: 340ms; animation-duration: 340ms, 600ms, 1ms; }
  :root:not([data-motion="still"]) .press > .press__art { animation: ha-settle 560ms ease-out 980ms both; }
  :root:not([data-motion="still"]) .regmark { animation: ha-mark 900ms var(--ease-out) 140ms both; }

  /* 1b. The lamp grows to the hour's size */
  :root:not([data-motion="still"]) .studio .hour-lit::before { animation: ha-lamp 800ms var(--ease-out) 900ms both; }

  /* 1c. The pixel band in the wallpaper sharpens */
  :root:not([data-motion="still"]) .studio.mp-pixel-dissolve-bottom::before { transform-origin: 50% 100%; animation: ha-pixels 900ms var(--ease-out) 300ms both; }

  /* 1d. On scroll out, the camera eases toward the window */
  @supports (animation-timeline: view()) {
    :root:not([data-motion="still"]) .studio__art .press__art {
      transform-origin: 16% 26%;
      animation: ha-settle 560ms ease-out 980ms both, ha-push linear both;
      animation-timeline: auto, view();
      animation-range: normal, exit 0% exit 100%;
    }
  }

  /* 2. The lit sign warms on once as its panel enters; art leans in on hover or focus */
  :root.ratc-ready:not([data-motion="still"]) .show .onair--lit::before,
  :root.ratc-ready:not([data-motion="still"]) .show .onair--lit .onair__glow { transition: opacity 1.2s ease-in-out; }
  :root.ratc-ready:not([data-motion="still"]) .show:not(.is-in) .onair--lit::before,
  :root.ratc-ready:not([data-motion="still"]) .show:not(.is-in) .onair--lit .onair__glow { opacity: 0; }
  /* individual scale/translate so the lean-in composes with the scroll-linked print-in transform (review 9 Oct) */
  :root:not([data-motion="still"]) .show__player .player__poster { transition: scale 600ms var(--ease-out), translate 600ms var(--ease-out); }
  :root:not([data-motion="still"]) .show:is(:hover, :focus-within) .show__player:not(.is-playing) .player__poster { scale: 1.03; translate: 0 -2%; }
  @supports (animation-timeline: view()) {
    :root:not([data-motion="still"]) .show__player .player__poster { animation: ha-print linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  }

  /* 3. Rows print in (text keeps full opacity); new tabs slide out from behind */
  @supports (animation-timeline: view()) {
    :root:not([data-motion="still"]) .desk__row { animation: ha-row linear both; animation-timeline: view(); animation-range: entry calc(var(--i) * 4%) cover calc(18% + var(--i) * 4%); }
  }
  :root.ratc-ready:not([data-motion="still"]) .desk__tabclip .new-tab { transition: transform 350ms cubic-bezier(.25, .46, .45, .94); transition-delay: calc(var(--i, 1) * 80ms); }
  :root.ratc-ready:not([data-motion="still"]) .desk__list:not(.is-in) .new-tab,
  :root.ratc-ready:not([data-motion="still"]) .studio__lead:not(.is-in) .new-tab { transform: translateX(-105%); }
  :root.ratc-ready:not([data-motion="still"]) .studio__newclip .new-tab { transition: transform 350ms cubic-bezier(.25, .46, .45, .94) 1200ms; }

  /* 4. The city: windows switch on once (JS adds .is-on in publishing order), then the city breathes */
  :root:not([data-motion="still"]) .city.is-armed .city__wins rect { transition: fill 80ms steps(2, jump-end); }
  :root:not([data-motion="still"]) .city.is-armed .floor__wins i { transition: background-color 80ms steps(2, jump-end); }
  :root:not([data-motion="still"]) .city:not(.is-armed) .city__wins rect { transition: fill 250ms ease; }
  :root:not([data-motion="still"]) .city:not(.is-armed) .floor__wins i { transition: background-color 250ms ease; }
  /* the camera pushes slowly in on the skyline while it lights. The month and year labels on the quay ride with their
     buildings (rulings 9 Oct); the big month label in the sky never moves */
  :root:not([data-motion="still"]) .city.is-armed :is(.city__art, .city__months, .city__years) { transform: scale(.96); }
  :root:not([data-motion="still"]) .city.is-lighting :is(.city__art, .city__months, .city__years) { transform: none; transition: transform 3800ms cubic-bezier(.33, .15, .45, 1); }
  :root:not([data-motion="still"]) .city .city__bloom { transition: opacity 1400ms ease-in-out 200ms; }
  :root:not([data-motion="still"]) .city .city__reflect { transition: opacity 1800ms ease-in-out; }
  :root:not([data-motion="still"]) .city.is-armed .city__haze { opacity: .15; }
  :root:not([data-motion="still"]) .city .city__haze { transition: opacity 1600ms ease-in-out; }
  /* the month label appears at full strength (never faded up from invisible, polish 9 Oct) */
  /* ambient life, art layers only, after the lighting finishes; Still stops it */
  :root.ratc-ready:not([data-motion="still"]) .city.is-alive .cloud--1 { animation: ha-drift 96s ease-in-out infinite alternate; }
  :root.ratc-ready:not([data-motion="still"]) .city.is-alive .cloud--2 { animation: ha-drift 130s ease-in-out -40s infinite alternate-reverse; }
  :root.ratc-ready:not([data-motion="still"]) .city.is-alive .cloud--3 { animation: ha-drift 80s ease-in-out -12s infinite alternate; }
  :root.ratc-ready:not([data-motion="still"]) .city.is-alive .city__reflect { animation: ha-ripple 7s ease-in-out infinite alternate; }
  :root.ratc-ready:not([data-motion="still"]) .city.is-alive .city__waves--1 { animation: ha-flow 26s linear infinite; }
  :root.ratc-ready:not([data-motion="still"]) .city.is-alive .city__waves--2 { animation: ha-flow 38s linear infinite reverse; }
  :root.ratc-ready:not([data-motion="still"]) .city.is-alive .glint { animation: ha-glint var(--gd, 8s) ease-in-out var(--gl, 0s) infinite; }
  :root.ratc-ready:not([data-motion="still"]) .city.is-alive .city__moonpath { animation: ha-moonpath 9s ease-in-out infinite alternate; }
  :root:not([data-motion="still"]) .city .city__beams { transition: opacity 2400ms ease-in-out 600ms; }
  :root.ratc-ready:not([data-motion="still"]) .city.is-alive .beam--1 { animation: ha-beam-1 19s ease-in-out infinite alternate; }
  :root.ratc-ready:not([data-motion="still"]) .city.is-alive .beam--2 { animation: ha-beam-2 25s ease-in-out -9s infinite alternate; }

  /* 5. GriftMatrix doors; Receipts markers print in left to right; Epstein tabs slide up like drawer tabs */
  @supports (animation-timeline: view()) {
    :root:not([data-motion="still"]) .rail__mark { animation: ha-mark-in linear both; animation-timeline: view(); animation-range: entry calc(10% + var(--i) * 3%) cover calc(28% + var(--i) * 3%); }
  }
  :root.ratc-ready:not([data-motion="still"]) .drawer__tabs li { transition: transform 300ms var(--ease-out); transition-delay: calc(var(--i) * 60ms); }
  :root.ratc-ready:not([data-motion="still"]) .drawer:not(.is-in) .drawer__tabs li { transform: translateY(105%); }
}

@keyframes ha-plate { from { transform: translate(var(--dx, 0), var(--dy, 0)); } to { transform: none; } }
@keyframes ha-pull { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ha-plate-off { from, to { opacity: 0; visibility: hidden; } }
@keyframes ha-settle { from { opacity: 0; } to { opacity: 1; } }
@keyframes ha-mark {
  from { filter: drop-shadow(-6px 4px 0 var(--lift-purple)) drop-shadow(6px -4px 0 var(--lift-teal)); }
  70% { filter: drop-shadow(0 0 0 var(--lift-purple)) drop-shadow(0 0 0 var(--lift-teal)); }
  to { filter: none; }
}
@keyframes ha-lamp { from { --lamp: 0%; } }
@keyframes ha-pixels { from { transform: scale(.6); } to { transform: none; } }
@keyframes ha-push { from { transform: none; } to { transform: scale(1.05) translateY(-3%); } }
@keyframes ha-print { from { clip-path: inset(0 0 8% 0); transform: translateY(24px); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes ha-row { from { transform: translateY(16px); } to { transform: none; } }
@keyframes ha-drift { from { transform: translateX(-70px); } to { transform: translateX(70px); } }
@keyframes ha-ripple { from { transform: skewX(-.9deg) scaleY(1); } to { transform: skewX(.9deg) scaleY(1.03); } }
@keyframes ha-flow { from { transform: translateX(0); } to { transform: translateX(-60px); } }
@keyframes ha-glint { 0%, 100% { opacity: .06; } 50% { opacity: .34; } }
@keyframes ha-moonpath { from { opacity: .7; transform: scaleX(1); } to { opacity: 1; transform: scaleX(1.3); } }
@keyframes ha-mark-in { from { transform: rotate(45deg) scale(0); } to { transform: rotate(45deg) scale(1); } }
@keyframes ha-beam-1 { from { transform: rotate(-17deg); } to { transform: rotate(-3deg); } }
@keyframes ha-beam-2 { from { transform: rotate(13deg); } to { transform: rotate(27deg); } }

/* named morph to the-daily-grift.html (spec 5.4: tdg-art matches the homepage panel) */
.show--tdg .show__player { view-transition-name: tdg-art; }

/* review panel line: which homepage this visit got (prototype only, rulings 9 Oct) */
.review__home .label { margin: 0; }