/* ==========================================================================
   NITRATE — ANIME.  Stylesheet for anime.js.  Nothing else.

   THE ONE JOB
   The first version of this page was a compliance board and a fifty-one row
   table.  John: "still doesn't feel like cinema … rebuild it so it feels more
   'anime'."  So the page is now made of the artwork and of the one fact that
   is true here and nowhere else in the house: THE RUN.  Six episodes to 1,172,
   a hundred and ninety-five times, and six shows are half the shelf.

   THE DIMINUENDO IS THE ARGUMENT
   Card size is not decoration here, it is the data.  The institutions are
   backdrop PANELS, the long runs are 196px posters, a year or less is 156px,
   one cour is 124px.  A six-episode OVA is a physically smaller object than
   One Piece and the page says so by being smaller.  One knob per band, at the
   top of each rule, so the four sizes can never drift apart.

   THE TALLY IS ONE PITCH
   Every cour mark on this page is 4px wide with a 2px gap — masthead legend,
   panel, card, everywhere — so a run compares to any other by eye.  Marks WRAP
   instead of shrinking, because a wrapped tally is still honest by area and a
   squeezed one is a lie.  This is why no run is drawn as a bar scaled to its
   own row.

   COLOUR.  Every value is a token from tokens.css and none are redefined here.
   Safety orange has exactly one meaning in this block — A RULE THAT FAILED, or
   THE RULE YOU ARE MARKING BY.  It is never a heading, never a hover, never a
   chart series.  Poster tints appear only as the ground a print sits on, never
   as a signal, so fifty-one sampled colours can never compete with the one
   orange.  Shape carries the signal too: a failure is a FILLED square, a pass
   is a hairline, so the page survives a monochrome print.

   GEOMETRY.  Hairlines, no border-radius anywhere, tabular figures on every
   number.  The block takes the host's gutter (--pad-x, which the landing view
   does not define — it gutters its own wrap) and claims no outer margin.
   ========================================================================== */

.an {
  display: block;
  position: relative;
  padding: 0 var(--pad-x, 0px);
  margin: 0;

  /* THE ONE PITCH — the cour mark.  Changing these two changes every tally on
     the page at once, which is the only way they can stay comparable. */
  --tick: 4px;
  --tick-h: 10px;
  --tick-gap: 2px;
}

.an-empty {
  font-family: var(--font-mono);
  color: var(--muted);
  padding: 40px 0;
}

/* =========================================================== 1. THE RUN ===
   The masthead.  Type, four figures, and the shelf drawn once in proportion.
   No backdrop: the catalogue hero directly above this block is already a
   full-bleed plate, and two in a row would read as a slideshow rather than a
   page.  This one is paper. */
.an-mast {
  border-top: var(--hair) solid var(--rule);
  padding: 18px 0 26px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 8px 44px;
  align-items: start;
}
.an-mast-l { min-width: 0; }

.an-mast-h {
  font-family: var(--font-marquee);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 76px);
  line-height: .86;
  letter-spacing: -.012em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.an-lede {
  margin: 0;
  max-width: 62ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.an-lede b { color: var(--ink); font-weight: 700; }

/* --- the four figures ----------------------------------------------------- */
.an-figs {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: var(--hair) solid var(--rule);
  border-left: var(--hair) solid var(--rule);
}
.an-fig {
  border-right: var(--hair) solid var(--rule);
  border-bottom: var(--hair) solid var(--rule);
  padding: 9px 12px 10px;
  min-width: 0;
}
.an-fig-k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted);
  text-transform: uppercase;
}
.an-fig-v {
  margin: 2px 0 0;
  font-family: var(--font-marquee);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1;
  letter-spacing: 0;
}
.an-fig-s {
  margin: 3px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

/* --- the shelf in proportion ---------------------------------------------
   Segments are COURS, not titles.  Counting titles would make the institutions
   the smallest band on the page, which is exactly the misreading this shelf
   invites and the reason the page exists.  Bands are told apart by fill
   density and a hairline, not by hue — orange is not a chart colour here. */
.an-prop {
  grid-column: 1 / -1;
  margin-top: 22px;
  border-top: var(--hair) solid var(--rule);
  padding-top: 12px;
}
.an-prop-k {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.an-prop-bar {
  display: flex;
  width: 100%;
  height: 34px;
  border: var(--hair) solid var(--rule);
}
.an-prop-seg { display: block; min-width: 2px; }
.an-prop-seg + .an-prop-seg { border-left: var(--hair) solid var(--rule); }
.an-prop-in { display: block; height: 100%; opacity: .84; }
.an-prop-seg[data-band="inst"] .an-prop-in { background: var(--ink-2); }
.an-prop-seg[data-band="long"] .an-prop-in {
  background: repeating-linear-gradient(90deg,
    var(--ink-2) 0 3px, transparent 3px 6px);
}
.an-prop-seg[data-band="year"] .an-prop-in {
  background: repeating-linear-gradient(90deg,
    var(--ink-2) 0 2px, transparent 2px 8px);
}
.an-prop-seg[data-band="cour"] .an-prop-in {
  background: repeating-linear-gradient(90deg,
    var(--ink-2) 0 1px, transparent 1px 9px);
}

.an-prop-key {
  list-style: none;
  margin: 9px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
  font-size: 11px;
}
.an-prop-ki { display: flex; align-items: center; gap: 7px; }
.an-prop-sw {
  width: 13px; height: 9px;
  border: var(--hair) solid var(--rule);
  flex: 0 0 auto;
}
.an-prop-ki:nth-child(1) .an-prop-sw { background: var(--ink-2); }
.an-prop-ki:nth-child(2) .an-prop-sw {
  background: repeating-linear-gradient(90deg, var(--ink-2) 0 3px, transparent 3px 6px);
}
.an-prop-ki:nth-child(3) .an-prop-sw {
  background: repeating-linear-gradient(90deg, var(--ink-2) 0 2px, transparent 2px 8px);
}
.an-prop-ki:nth-child(4) .an-prop-sw {
  background: repeating-linear-gradient(90deg, var(--ink-2) 0 1px, transparent 1px 9px);
}
.an-prop-kn { letter-spacing: .06em; color: var(--ink-2); }
.an-prop-kc, .an-prop-kp { color: var(--muted); }
.an-prop-kp { min-width: 3.4em; }

.an-prop-say {
  margin: 12px 0 0;
  max-width: 74ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
}
/* the swatch has to sit ON the reading line, not above it: a flex legend put
   the one mark on a line of its own the moment the sentence wrapped */
.an-legend {
  margin: 8px 0 0;
  max-width: 78ch;
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
}
.an-legend .an-tally-legend {
  vertical-align: -1px;
  margin-right: 5px;
}

/* ===================================================== THE TALLY (the ruler)
   One mark, one cour.  Same pitch in every context on the page. */
.an-tally {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--tick-gap);
  max-width: 100%;
}
.an-tally > i {
  display: block;
  width: var(--tick);
  height: var(--tick-h);
  background: var(--ink-2);
  opacity: .72;
  flex: 0 0 auto;
}
.an-tally.is-card { margin-top: 7px; --tick-h: 9px; }
.an-tally.is-pan { margin-top: 10px; --tick-h: 14px; max-width: 460px; }
.an-tally-legend { display: inline-flex; }
.an-tally-legend > i { opacity: 1; }

/* ====================================================== section furniture ==
   Every band states its rule and its size in the same shape, so the four
   sections read as one instrument with a scale changing under it. */
.an-sec { margin: 0 0 46px; }
.an-sec:last-child { margin-bottom: 10px; }

.an-sh {
  border-top: var(--hair) solid var(--rule);
  padding: 13px 0 12px;
  position: relative;
}
.an-sh-top {
  display: flex;
  align-items: baseline;
  gap: 6px 20px;
  flex-wrap: wrap;
}
.an-sh-h {
  font-family: var(--font-marquee);
  font-weight: 800;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: .95;
  letter-spacing: -.005em;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.an-sh-m {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.an-sh-n { color: var(--ink-2); }
.an-sh-lede {
  margin: 8px 0 0;
  max-width: 68ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* the rail controls sit at the right of the header, off the reading line */
.an-ctl {
  position: absolute;
  right: 0;
  top: 11px;
  display: flex;
  gap: 6px;
}
.an-arrow, .an-open {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink-2);
  background: var(--panel);
  border: var(--hair) solid var(--rule);
  min-height: 30px;
  padding: 0 10px;
  line-height: 1;
}
.an-arrow { width: 30px; padding: 0; font-size: 15px; }
.an-arrow:hover:not(:disabled), .an-open:hover {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.an-arrow:disabled {
  color: var(--rule); cursor: default; background: transparent;
}
/* a shelf that already shows everything it holds gets no controls at all */
.an-sec-rack.is-full .an-ctl { display: none; }

/* ================================================= 2. THE INSTITUTIONS =====
   The biggest objects on any NITRATE page.  A backdrop plate, the poster in a
   lit case on top of it, and the run written at marquee size — because 1,172
   is the number this whole page is about and it deserves to be readable from
   across a room. */
/* TWO across at desktop, never three.  At three the panel fell to 430px, the
   poster to a thumbnail and the backdrop to a smear — which made the six
   biggest objects in the house the same size as the racks below them and threw
   away the only argument this page has. */
.an-pans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(560px, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.an-panw { position: relative; min-width: 0; }

.an-pan {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  border: var(--hair) solid var(--rule);
  background: var(--panel);
  color: inherit;
  overflow: hidden;
}
.an-pan:hover { border-color: var(--ink-2); }
.an-pan:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the plate.  A backdrop where one is cached, the extracted tint where there
   is not — one title in 51, so the wash is a designed state, not a fallback. */
.an-pan-plate {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--tint, var(--panel-2));
  overflow: hidden;
}
.an-pan-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .46;
  filter: saturate(.6) contrast(1.05);
  transition: opacity .35s ease, transform .5s ease;
}
.an-pan:hover .an-pan-shot { opacity: .58; transform: scale(1.02); }
.an-pan-plate.is-wash { opacity: .34; }
/* the text has to survive whatever the backdrop is: a graded scrim, not a
   flat overlay, so the picture is still there where the type is not */
.an-pan-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    var(--panel) 0%, var(--panel) 27%,
    color-mix(in srgb, var(--panel) 80%, transparent) 58%,
    color-mix(in srgb, var(--panel) 34%, transparent) 100%);
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .an-pan-plate::after { background: var(--panel); opacity: .82; }
}

.an-pan-body {
  position: relative;
  display: flex;
  gap: 20px;
  padding: 18px;
  align-items: flex-start;
  min-height: 278px;
}

/* the lit case: a poster with a hairline and a shadow, the way a print sits
   under glass */
.an-pan-case {
  flex: 0 0 160px;
  width: 160px;
  aspect-ratio: 2 / 3;
  display: block;
  overflow: hidden;
  border: var(--hair) solid var(--rule);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .30);
  background: var(--panel-2);
}
.an-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.an-pan-txt { min-width: 0; display: block; flex: 1 1 auto; }
.an-pan-t {
  display: block;
  font-family: var(--font-marquee);
  font-weight: 700;
  font-size: clamp(24px, 2.5vw, 34px);
  /* ⭐ THE ONLY DISPLAY HEADING IN THE HOUSE THAT ACTUALLY RAGS.  A measured
     pass over every element set in --font-marquee at >=19px, across seven
     views at 1440/768/390, found exactly one that wraps: this one, onto two
     lines at 390.  The other eleven stylesheets carrying the face were left
     alone rather than balanced on principle. */
  text-wrap: balance;
  line-height: .96;
  letter-spacing: -.005em;
  text-transform: uppercase;
}
.an-pan-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 12px;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.an-pan-st.is-air { color: var(--ink-2); }

.an-pan-run {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 12px;
}
.an-big {
  font-family: var(--font-marquee);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: clamp(44px, 5.2vw, 66px);
  line-height: .82;
  letter-spacing: -.02em;
}
.an-big-k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--muted);
}
.an-pan-m {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 14px;
  margin-top: 11px;
  font-size: 11px;
  /* this line sits ON the picture, so it takes the brighter ink — --muted is
     a paper colour and disappears over a backdrop */
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* ============================================================= 3-5. RACKS ==
   One rail per band.  The knob is --an-w and it is the only thing that changes
   between the three racks — the shrinking IS the data. */
.an-sec-rack { --an-w: 156px; --an-gap: 14px; }
.an-sec-rack[data-band="long"] { --an-w: 196px; }
.an-sec-rack[data-band="year"] { --an-w: 156px; }
.an-sec-rack[data-band="cour"] { --an-w: 124px; }

.an-rail {
  position: relative;
  display: flex;
  gap: var(--an-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: 12px 0 14px;
  scrollbar-width: thin;
}
.an-rail:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* OPEN SHELF — the rail becomes the whole shelf, wrapped. */
.is-open .an-rail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--an-w), 1fr));
  overflow: visible;
  scroll-snap-type: none;
}
.is-open .an-cardw { flex: initial; }

.an-cardw {
  position: relative;
  flex: 0 0 var(--an-w);
  width: var(--an-w);
  scroll-snap-align: start;
  min-width: 0;
}
.is-open .an-cardw { width: auto; }

.an-card {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  background: transparent;
  border: 0;
  color: inherit;
}
.an-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.an-art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--panel-2);
  border: var(--hair) solid var(--rule);
}
.an-card:hover .an-art { border-color: var(--ink-2); }
.an-art .an-img { transition: transform .4s ease; }
.an-card:hover .an-art .an-img { transform: scale(1.03); }

.an-cap { display: block; padding: 8px 0 0; }
.an-t {
  display: block;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.25;
  color: var(--ink);
  /* two lines, then the tooltip and the sheet carry the rest */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.an-m {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .04em;
}
.an-ep { color: var(--ink-2); }
.an-short {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--muted);
  border-top: var(--hair) solid var(--rule);
  padding-top: 4px;
}
.an-sec-rack[data-band="cour"] .an-t { font-size: 12.5px; }

/* --- the marks that ride on artwork ---------------------------------------
   Shape first: ON AIR is a hairline chip, a played show is a filled square in
   ink, a failing title is a filled ORANGE square carrying the count.  The only
   orange on the page, and it always means the same thing. */
.an-marks {
  position: absolute;
  left: 5px;
  bottom: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 10px);
}
.an-mk {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: .08em;
  padding: 3px 4px;
  background: var(--panel);
  border: var(--hair) solid var(--rule);
  color: var(--ink-2);
}
.an-mk-seen { padding: 3px 4px; }
.an-mk-bad {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  font-weight: 700;
  min-width: 15px;
  text-align: center;
}
.an-marks.is-big {
  position: static;
  margin-top: 12px;
  max-width: none;
}
.an-marks.is-big .an-mk { font-size: 11px; padding: 4px 6px; }

/* --- the parked play/cast pair ------------------------------------------- */
.an-rail > .nact.an-act-rail {
  position: absolute;
  z-index: 3;
  gap: 4px;
  background: var(--panel);
  border: var(--hair) solid var(--rule);
}
.an-panw > .nact.an-act-pan {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  gap: 4px;
  background: var(--panel);
  border: var(--hair) solid var(--rule);
}
.an-act .plexlink:hover, .an-act .plexlink:focus-visible,
.an-act .nstream-btn:hover, .an-act .nstream-btn:focus-visible {
  background: var(--accent);
}

/* ======================================================== 6. STILL ON AIR ==
   Not artwork at size — by this point the room has been shown and the question
   is a ledger question: how long has it been quiet? */
.an-air {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  border-top: var(--hair) solid var(--rule);
}
.an-air-r { display: block; }
.an-air-b {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 5.5em minmax(90px, 1.1fr) 6.5em 6.5em;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  padding: 5px 4px;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: var(--hair) solid var(--rule);
  color: inherit;
}
.an-air-b:hover { background: var(--panel); }
.an-air-b:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.an-air-th {
  width: 34px;
  aspect-ratio: 2 / 3;
  display: block;
  overflow: hidden;
  border: var(--hair) solid var(--rule);
  background: var(--panel-2);
}
.an-air-t {
  font-weight: 700;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.an-air-n { font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-align: right; }
.an-air-track {
  display: block;
  height: 6px;
  background: var(--panel-2);
  border: var(--hair) solid var(--rule);
}
.an-air-track > i { display: block; height: 100%; background: var(--ink-2); opacity: .7; }
.an-air-d { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); text-align: right; }
.an-air-w { font-size: 11px; color: var(--muted); text-align: right; }

/* ================================================================= PHONES ==
   Desktop is the priority — this page is a room — but nothing may break and
   nothing may scroll the body sideways.  The panels drop to one column, the
   posters shrink but keep their ORDER of sizes (the diminuendo is the
   argument and it survives), and every control keeps a thumb. */
@media (max-width: 1080px) {
  .an-mast { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .an-pans { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .an-sec-rack[data-band="long"] { --an-w: 158px; }
  .an-sec-rack[data-band="year"] { --an-w: 134px; }
  .an-sec-rack[data-band="cour"] { --an-w: 112px; }
  .an-sec-rack { --an-gap: 10px; }
  .an-pan-case { flex-basis: 100px; width: 100px; }
  .an-pan-body { min-height: 0; gap: 14px; }
  /* the ledger loses its bar before it loses a figure */
  .an-air-b { grid-template-columns: 30px minmax(0, 1fr) 5em 6em; }
  .an-air-track, .an-air-w { display: none; }
}

/* THE MOBILE TIER.  Was 620 — one of the twenty-four numbers MOBILE_SPEC §1
   exists to kill.  Folded to 760 unchanged: everything in here is what a
   phone-shaped column needs, and 620–760 is a phone-shaped column.
   ⛔ The 860 and 1080 blocks above are untouched. */
@media (max-width: 760px) {
  .an-figs { grid-template-columns: minmax(0, 1fr); }
  .an-ctl { position: static; margin-top: 10px; }
  .an-sh { padding-bottom: 4px; }
  .an-sec-rack[data-band="long"] { --an-w: 140px; }
  .an-sec-rack[data-band="year"] { --an-w: 120px; }
  .an-sec-rack[data-band="cour"] { --an-w: 104px; }
  .an-pan-body { padding: 12px; }
  .an-tally.is-pan { --tick-h: 11px; }
  .an-prop-bar { height: 26px; }
  .an-air-b { grid-template-columns: 28px minmax(0, 1fr) 4.6em 5.6em; gap: 8px; }

  /* 🔴 THE TITLE STOPPED BEING A TITLE.  STILL ON AIR is a list of ten shows
     and the show's NAME is the only reason to read a row, but the cell is
     `nowrap` + ellipsis and at 390px it has 205px for a 216px name — so
     "Kimetsu no Yaiba: Hashira Geiko-hen" arrived as "Kimetsu no Yaiba: Has…".
     Nothing is gained by holding the row to one line here: the row is already
     46px, a second line costs 15px on ten rows, and the desk (which has the
     width) keeps the single line it was drawn for. */
  .an-air-t {
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.25;
  }
}

/* THE NARROW TIER.  Was 400 — folded to 430 (MOBILE_SPEC §1): an iPhone 16
   Pro Max is 430 CSS px, and every one of these rules is a rule that a 390px
   phone and a 430px phone both want.  A 430 viewport still gets two posters
   and a readable tally. */
@media (max-width: 430px) {
  .an-sec-rack[data-band="long"] { --an-w: 128px; }
  .an-sec-rack[data-band="year"] { --an-w: 112px; }
  .an-sec-rack[data-band="cour"] { --an-w: 98px; }
  .an { --tick: 3px; --tick-gap: 2px; }
  .an-air-b { grid-template-columns: 26px minmax(0, 1fr) 5.4em; }
  .an-air-n { display: none; }
}

/* ================================================================== TOUCH ==
   The parked play/cast pair is a POINTER affordance and the shell only hides
   the four .nact placements it knows about, so this block has to hide its own
   two or a tap would leave a pair stranded over a card.  Nothing is lost: the
   sheet every card opens carries the same pair, focusable and labelled.  The
   controls grow to a thumb, exactly as the racks and the programme do. */
@media (hover: none) {
  .an-rail > .nact.an-act-rail,
  .an-panw > .nact.an-act-pan { display: none; }
  .an-arrow { width: 44px; height: 44px; font-size: 20px; }
  .an-open { min-height: 44px; padding: 0 14px; }
  .an-card:hover .an-art { border-color: var(--rule); }
  .an-card:hover .an-art .an-img { transform: none; }
  .an-pan:hover .an-pan-shot { opacity: .30; transform: none; }
}

/* ================================================================= MOTION ==
   tokens.css already kills durations under prefers-reduced-motion; the poster
   scale and the plate drift are the two things that would still MOVE, so they
   are removed rather than shortened. */
@media (prefers-reduced-motion: reduce) {
  .an-card:hover .an-art .an-img,
  .an-pan:hover .an-pan-shot { transform: none; }
  .an-rail { scroll-behavior: auto; }
}