/* =========================================================================
   THE SHONEN TABLE — DASHBOARD STYLES

   A separate stylesheet on purpose. Every class here starts with `tstd-`,
   so nothing in this file can collide with, override or undo anything in
   styles.css. Delete this file and the dashboard simply goes unstyled —
   the rest of the Hub is untouched either way.

   Colours are read from the variables the Hub already defines, each with a
   fallback, so the dashboard picks up the site's palette automatically and
   still looks right if a variable is ever renamed.
   ========================================================================= */

.tstd-section {
  --d-ink:    var(--hub-ink, #0A0A09);
  --d-cream:  var(--hub-cream, #F4F1EA);
  --d-dim:    var(--hub-cream-dim, rgba(244, 241, 234, 0.68));
  --d-faint:  var(--hub-cream-faint, rgba(244, 241, 234, 0.42));
  --d-red:    var(--hub-red, #C8102E);
  --d-gold:   var(--hub-gold, #E3A93B);
  --d-radius: var(--hub-radius, 18px);
  --d-ease:   var(--hub-ease, cubic-bezier(0.4, 0, 0.2, 1));
  --d-gutter: var(--hub-gutter, 18px);

  --d-panel:  rgba(244, 241, 234, 0.035);
  --d-panel2: rgba(244, 241, 234, 0.055);
  --d-edge:   rgba(244, 241, 234, 0.1);

  position: relative;
  z-index: 1;
  padding-block: 34px;
  box-sizing: border-box;
}

.tstd-section[hidden] { display: none !important; }

/* Before the dashboard has built itself — and for anyone with JavaScript
   switched off — the five sections are empty. An empty one takes up no room
   rather than leaving five bands of blank page. */
.tstd-section:empty { display: none; }

.tstd-wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--d-gutter);
  box-sizing: border-box;
}

.tstd-section *,
.tstd-section *::before,
.tstd-section *::after { box-sizing: border-box; }

/* ---------------------------------------------------------- reveal */
.tstd-in {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 0.55s var(--d-ease), transform 0.55s var(--d-ease);
}
.tstd-in.is-in { opacity: 1; transform: none; }

/* The dossier folder-wipe, same trick as .tst-hub-in--mast in styles.css —
   used only on the section masthead (head()), not on every card, since
   clip-path is worth reserving for the handful of "opening a new file"
   moments per page rather than every reveal. */
.tstd-in--mast {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: opacity 0.6s var(--d-ease), clip-path 0.7s var(--d-ease);
}
.tstd-in--mast.is-in { opacity: 1; clip-path: inset(0 0 0% 0); }

/* ---------------------------------------------------- section heads */
.tstd-head { margin-bottom: 16px; }

.tstd-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-family: var(--hub-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--d-faint);
}
.tstd-eyebrow::before {
  content: "\2022";
  color: var(--d-red);
  font-size: 13px;
  line-height: 1;
}
.tstd-eyebrow::after {
  content: "";
  flex: 1 1 24px;
  max-width: 48px;
  height: 1px;
  background: var(--d-edge);
}

.tstd-title {
  margin: 0 0 6px;
  font-family: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  font-size: clamp(22px, 5vw, 36px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: var(--d-cream);
}

.tstd-sub {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--d-dim);
}

/* --------------------------------------------------------- panels */
.tstd-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 18px 16px 16px;
  border: 1px solid var(--d-edge);
  border-radius: var(--d-radius);
  background: var(--d-panel);
}

.tstd-panel__title {
  margin: 0;
  font-family: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--d-cream);
}

.tstd-empty {
  margin: 0;
  padding: 10px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--d-faint);
}

.tstd-source {
  margin: 10px 0 0;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--d-faint);
}

.tstd-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border: 1px solid var(--d-edge);
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--d-dim);
  white-space: nowrap;
}

/* --------------------------------------------------------- ratings */
.tstd-rate {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid var(--d-edge);
  border-radius: 999px;
  background: var(--d-panel2);
  white-space: nowrap;
}
.tstd-rate b { font-size: 12.5px; font-weight: 700; line-height: 1; color: var(--d-cream); }
.tstd-rate span {
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--d-faint);
}
/* A score the table gave, not AniList's community average. */
.tstd-rate--tst { border-color: rgba(227, 169, 59, 0.3); }
.tstd-rate--tst b { color: var(--d-gold); }

/* ----------------------------------------------------- status pills
   In the card body rather than floating over the poster: the poster is a
   64px thumbnail in the row layouts and a pill on top of it would spill
   straight across the title. */
.tstd-pill {
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 3px 8px;
  border: 1px solid var(--d-edge);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--d-dim);
  white-space: nowrap;
}
.tstd-pill--soon { border-color: rgba(200, 16, 46, 0.6); background: rgba(200, 16, 46, 0.85); color: #fff; }
.tstd-pill--available { border-color: rgba(244, 241, 234, 0.4); color: var(--d-cream); }
.tstd-pill--tba,
.tstd-pill--finished,
.tstd-pill--watched { color: var(--d-faint); }
.tstd-pill--break { border-color: rgba(227, 169, 59, 0.4); color: var(--d-gold); }

/* ------------------------------------------------------- countdowns */
.tstd-count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  margin: 0;
  font-size: 13px;
  color: var(--d-cream);
}
.tstd-count__label {
  white-space: nowrap;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--d-faint);
}
.tstd-count__clock { font-variant-numeric: tabular-nums; font-weight: 700; }

.tstd-count--big { flex-direction: column; align-items: flex-start; gap: 2px; margin-block: 4px 2px; }
/* Sized for the longest thing it can say ("29 minutes"), not the shortest. */
.tstd-count--big .tstd-count__clock {
  font-family: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  font-size: clamp(23px, 5.2vw, 36px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.tstd-count--tba { font-size: 12px; color: var(--d-faint); }
.tstd-count--live {
  align-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--d-cream);
}

.tstd-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--d-red);
  animation: tstd-ping 2.4s var(--d-ease) infinite;
}
@keyframes tstd-ping {
  0%   { box-shadow: 0 0 0 0 rgba(200, 16, 46, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(200, 16, 46, 0); }
  100% { box-shadow: 0 0 0 0 rgba(200, 16, 46, 0); }
}

/* Under the hour, the clock picks up the accent — the one moment the
   dashboard raises its voice. */
.tstd-count.is-soon .tstd-count__clock { color: #FF5C72; }

/* ---------------------------------------------------------- posters */
.tstd-poster {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(244, 241, 234, 0.05);
}
.tstd-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tstd-poster--none { background: rgba(244, 241, 234, 0.05); }

/* ================================================== TODAY AND NEXT UP */
.tstd-today__head { margin-bottom: 16px; }

.tstd-today__date {
  margin: 4px 0;
  font-family: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  font-size: clamp(26px, 6.4vw, 44px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--d-cream);
}

.tstd-today__meta { margin: 0; font-size: 13px; color: var(--d-dim); }

.tstd-today__grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }

.tstd-next {
  display: grid;
  grid-template-columns: minmax(0, 118px) minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(200, 16, 46, 0.28);
  border-radius: var(--d-radius);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(126, 12, 30, 0.34) 0%, transparent 62%),
    var(--d-panel);
  overflow: hidden;
}
.tstd-next--quiet { grid-template-columns: minmax(0, 1fr); border-color: var(--d-edge); background: var(--d-panel); }

.tstd-next__art { position: relative; min-width: 0; }

.tstd-stampwrap {
  position: absolute;
  left: -6px;
  bottom: 10px;
  z-index: 2;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
}
.tstd-stampwrap .tst-stamp {
  background: rgba(10, 10, 9, 0.82);
  backdrop-filter: blur(3px);
}
@media screen and (max-width: 619px) {
  .tstd-stampwrap { display: none; }
}
.tstd-next__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tstd-next__eyebrow { color: #FF5C72; }
.tstd-next__eyebrow::before { color: #FF5C72; }

.tstd-next__title {
  margin: 0;
  font-family: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  font-size: clamp(19px, 4.6vw, 30px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--d-cream);
  overflow-wrap: anywhere;
}

.tstd-next__ep {
  margin: 0; font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--d-dim);
}
.tstd-next__when, .tstd-next__after { margin: 0; font-size: 12px; line-height: 1.45; color: var(--d-dim); }
.tstd-next__after b { color: var(--d-cream); }
.tstd-next__rates { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

.tstd-next__link {
  display: inline-block;
  margin-top: 4px; padding: 6px 0; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--d-dim); text-decoration: none;
  transition: color 0.22s var(--d-ease);
}
.tstd-next__link:hover { color: var(--d-cream); }

.tstd-today__rest { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.tstd-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: 4px;
  margin-inline: calc(var(--d-gutter) * -1);
  padding-inline: var(--d-gutter);
}
.tstd-rail::-webkit-scrollbar { display: none; }

/* -------------------------------------------------------- show cards */
.tstd-show {
  position: relative;
  min-width: 0;
  border: 1px solid var(--d-edge);
  border-radius: 14px;
  background: var(--d-panel);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.24s var(--d-ease), background-color 0.24s var(--d-ease),
    transform 0.24s var(--d-ease);
}
a.tstd-show:hover {
  border-color: rgba(244, 241, 234, 0.24);
  background: var(--d-panel2);
  transform: translateY(-2px);
}

.tstd-show__art { position: relative; min-width: 0; }
.tstd-show__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 12px 12px; }

.tstd-show__title {
  margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.25;
  color: var(--d-cream); overflow-wrap: anywhere;
}
.tstd-show__meta { margin: 0; font-size: 11px; letter-spacing: 0.03em; color: var(--d-dim); }
.tstd-show__note { margin: 0; font-size: 10.5px; line-height: 1.35; color: var(--d-faint); }
.tstd-show__rates { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }

/* compact card for today's swipe row — square crop, or a column of tall
   posters makes the row taller than the thing it is secondary to */
.tstd-show--sm { flex: 0 0 auto; width: 146px; scroll-snap-align: start; }
.tstd-show--sm .tstd-poster { aspect-ratio: 1 / 1; }

/* the standard row: thumbnail beside the text */
.tstd-show--md { display: grid; grid-template-columns: 74px minmax(0, 1fr); }
.tstd-show--md .tstd-poster { border-radius: 0; }

.tstd-show--available,
.tstd-show--watched,
.tstd-show--finished,
.tstd-show--tba { opacity: 0.82; }

/* ============================================================ OUR WEEK */
.tstd-week__tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 14px;
  margin-inline: calc(var(--d-gutter) * -1);
  padding-inline: var(--d-gutter);
}
.tstd-week__tabs::-webkit-scrollbar { display: none; }

/* Folder tabs, not pills — the active day "lifts" above the row like a
   manila tab pulled forward, complete with the file-tab's own little peak.
   clip-path draws the peak; nothing here costs more than a pill did. */
.tstd-day {
  position: relative;
  flex: 1 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 56px; min-height: 52px;
  padding: 10px 10px 8px;
  margin-top: 6px;
  border: 1px solid var(--d-edge);
  border-bottom: none;
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
  background: var(--d-panel);
  color: var(--d-dim);
  font: inherit;
  cursor: pointer;
  transition: color 0.22s var(--d-ease), background-color 0.22s var(--d-ease),
    transform 0.22s var(--d-ease);
}
.tstd-day__name { font-family: var(--hub-mono, ui-monospace, monospace); font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.tstd-day__count { font-size: 10px; color: var(--d-faint); }
.tstd-day:hover { color: var(--d-cream); background: var(--d-panel2); transform: translateY(-2px); }
.tstd-day.is-today { box-shadow: inset 0 2px 0 rgba(200, 16, 46, 0.6); }
.tstd-day.is-today .tstd-day__name { color: #FF5C72; }
.tstd-day.is-active { background: var(--d-cream); transform: translateY(-3px); }
.tstd-day.is-active .tstd-day__name,
.tstd-day.is-active .tstd-day__count { color: var(--d-ink); }

@media (prefers-reduced-motion: reduce) {
  .tstd-day.is-active, .tstd-day:hover { transform: none; }
}

.tstd-week__grid { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }

/* ===================================================== MANUEL/GUFFAR
   THE VERDICT — a head-to-head, not two lists that happen to sit near each
   other. A shuriken VS mark divides the two panels; each panel carries a
   faint duotone wash (red for the first host, neutral cream for the
   second) — never a second saturated colour, just enough tint to read as
   "two sides" at a glance. */
.tstd-versus { display: grid; align-items: stretch; gap: 14px; grid-template-columns: minmax(0, 1fr); }

.tstd-rank--a {
  background:
    radial-gradient(140% 100% at 0% 0%, rgba(200, 16, 46, 0.1) 0%, transparent 60%),
    var(--d-panel);
}
.tstd-rank--b {
  background:
    radial-gradient(140% 100% at 100% 0%, rgba(244, 241, 234, 0.055) 0%, transparent 60%),
    var(--d-panel);
}

.tstd-versus__vs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 0;
}
.tstd-versus__mark {
  position: relative;
  display: inline-flex;
  width: 30px;
  height: 30px;
  color: var(--d-faint);
  animation: tst-spin 22s linear infinite;
}
.tstd-versus__mark svg { width: 100%; height: 100%; fill: currentColor; }
.tstd-versus__label {
  font-family: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--d-faint);
}
@media (prefers-reduced-motion: reduce) {
  .tstd-versus__mark { animation: none; }
}

.tstd-rank__verdict {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--d-edge);
  font-size: 12px;
  color: var(--d-dim);
}
.tstd-rank__verdict b { color: var(--d-cream); }

.tstd-rank__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }

.tstd-rank__row {
  display: grid;
  grid-template-columns: 22px 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 10px;
  background: rgba(244, 241, 234, 0.02);
}
.tstd-rank__row.is-first {
  padding: 7px 5px;
  border: 1px solid rgba(227, 169, 59, 0.2);
  background: rgba(227, 169, 59, 0.08);
}
.tstd-rank__num {
  font-family: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  font-size: 15px; text-align: center; color: var(--d-faint);
}
.tstd-rank__row.is-first .tstd-rank__num { color: var(--d-gold); }
.tstd-rank__art { display: block; min-width: 0; }
.tstd-rank__art .tstd-poster { border-radius: 6px; }
.tstd-rank__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tstd-rank__text b { font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--d-cream); overflow-wrap: anywhere; }
.tstd-rank__text span { font-size: 10.5px; color: var(--d-faint); }

/* ================================================ TOP ANIME RIGHT NOW */
.tstd-wire__live {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: -6px 0 14px;
  font-family: var(--hub-mono, ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--d-faint);
}

.tstd-trend { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }

.tstd-trend__card {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  min-width: 0;
  border: 1px solid var(--d-edge);
  border-radius: 14px;
  background: var(--d-panel);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.24s var(--d-ease), background-color 0.24s var(--d-ease),
    transform 0.24s var(--d-ease);
}
a.tstd-trend__card:hover {
  border-color: rgba(244, 241, 234, 0.24);
  background: var(--d-panel2);
  transform: translateY(-2px);
}
.tstd-trend__art { position: relative; display: block; min-width: 0; }
.tstd-trend__art .tstd-poster { border-radius: 0; }
.tstd-trend__num {
  position: absolute; left: 0; top: 0;
  min-width: 26px; padding: 3px 7px;
  border-bottom-right-radius: 8px;
  background: rgba(10, 10, 9, 0.86);
  font-family: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  font-size: 15px; line-height: 1.4; text-align: center; color: var(--d-red);
}
.tstd-trend__text {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 5px; min-width: 0; padding: 10px 12px;
}
.tstd-trend__text b { font-size: 13px; font-weight: 700; line-height: 1.24; color: var(--d-cream); overflow-wrap: anywhere; }
.tstd-trend__text > span { font-size: 10.5px; line-height: 1.35; color: var(--d-faint); }

/* ================================================================ NEWS
   DISPATCHES — #1 runs as a large editorial lead, #2-3 medium, #4-5
   compact. One grid, three sizes of the same card, driven by
   .tstd-news__card--hero/--med/--sm so the markup stays a single
   component rather than three different ones. */
.tstd-news {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
}

.tstd-news__card {
  position: relative;
  display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--d-edge);
  border-radius: 14px;
  background: var(--d-panel);
  color: inherit; text-decoration: none; overflow: hidden;
  transition: border-color 0.24s var(--d-ease), background-color 0.24s var(--d-ease),
    transform 0.24s var(--d-ease);
}
a.tstd-news__card:hover {
  border-color: rgba(244, 241, 234, 0.24);
  background: var(--d-panel2);
  transform: translateY(-2px);
}
.tstd-news__art { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: rgba(244, 241, 234, 0.05); }
.tstd-news__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tstd-news__body { display: flex; flex-direction: column; gap: 7px; padding: 14px; }
.tstd-news__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--d-faint);
}
.tstd-news__headline { font-size: 14.5px; font-weight: 700; line-height: 1.28; color: var(--d-cream); }
.tstd-news__sum { font-size: 12.5px; line-height: 1.5; color: var(--d-dim); }
.tstd-news__why {
  font-size: 11.5px; line-height: 1.5; color: var(--d-faint);
  padding-top: 6px; border-top: 1px dashed var(--d-edge);
}
.tstd-news__why b { color: var(--d-dim); font-weight: 700; }
.tstd-news__foot {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 10px;
  margin-top: 2px; padding-top: 10px;
  border-top: 1px solid var(--d-edge);
  font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--d-faint);
}
.tstd-news__cta { color: var(--d-dim); font-weight: 700; white-space: nowrap; }
.tstd-news__sources { display: flex; flex-wrap: wrap; gap: 6px; }
.tstd-news__chip {
  padding: 2px 7px;
  border: 1px solid var(--d-edge);
  border-radius: 999px;
  font-weight: 700;
  color: var(--d-dim);
}
.tstd-news__chip--muted { color: var(--d-faint); border-style: dashed; }

/* A live/buzz badge next to the category — the ONLY place a computed word
   like "Trending" appears; it is never a number, see NEWS-METHODOLOGY.md. */
.tstd-badge--live {
  border-color: rgba(200, 16, 46, 0.55);
  color: #FF5C72;
}

/* The rank numeral — big enough to bleed behind the headline on the lead
   story, a quiet corner tag on the rest. */
.tstd-news__rank {
  position: absolute;
  font-family: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  color: var(--d-faint);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
}
.tstd-news__card--sm .tstd-news__rank,
.tstd-news__card--med .tstd-news__rank {
  top: 10px; right: 12px;
  font-size: 22px;
  opacity: 0.4;
}
.tstd-news__card--hero .tstd-news__rank {
  top: -0.12em; left: 16px;
  font-size: clamp(64px, 18vw, 132px);
  opacity: 0.14;
  color: var(--d-cream);
}
.tstd-news__card--hero .tstd-news__body,
.tstd-news__card--hero .tstd-news__art { position: relative; z-index: 1; }

/* Compact rows (#4-5): thumbnail beside the text, no big rank bleed. */
.tstd-news__card--sm { flex-direction: row; }
.tstd-news__card--sm .tstd-news__art { flex: 0 0 96px; aspect-ratio: 1 / 1; }
.tstd-news__card--sm .tstd-news__body { padding: 10px 12px; gap: 4px; }
.tstd-news__card--sm .tstd-news__headline { font-size: 13px; }
.tstd-news__card--sm .tstd-news__sum,
.tstd-news__card--sm .tstd-news__why { display: none; }

/* The lead story (#1): full-width editorial hero */
.tstd-news__card--hero .tstd-news__art { aspect-ratio: 21 / 9; }
.tstd-news__card--hero .tstd-news__headline { font-size: clamp(19px, 4vw, 27px); line-height: 1.14; }
.tstd-news__card--hero .tstd-news__body { padding: 18px 20px 20px; gap: 9px; }

/* =========================================================== SKELETON */
.tstd-skel__next {
  display: flex; flex-direction: column; gap: 12px;
  min-height: 170px; padding: 18px;
  border: 1px solid var(--d-edge);
  border-radius: var(--d-radius);
  background: var(--d-panel);
}
.tstd-skel__bar {
  display: block; height: 16px; border-radius: 6px;
  background: linear-gradient(90deg,
    rgba(244, 241, 234, 0.04) 0%, rgba(244, 241, 234, 0.09) 50%, rgba(244, 241, 234, 0.04) 100%);
  background-size: 220% 100%;
  animation: tstd-shimmer 1.5s var(--d-ease) infinite;
}
.tstd-skel__next .tstd-skel__bar:first-child { width: 42%; }
.tstd-skel__next .tstd-skel__bar:nth-child(2) { width: 72%; height: 38px; }
.tstd-skel__next .tstd-skel__bar:last-child { width: 56%; }
@keyframes tstd-shimmer {
  0%   { background-position: 130% 0; }
  100% { background-position: -30% 0; }
}

/* ======================================================= WIDER SCREENS */
@media screen and (min-width: 620px) {
  .tstd-week__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tstd-news       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tstd-news__card--hero { grid-column: 1 / -1; }
  .tstd-trend      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tstd-next       { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); padding: 20px; }
}

@media screen and (min-width: 900px) {
  .tstd-section { padding-block: 44px; }
  .tstd-versus  { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0; }
  .tstd-versus__vs { flex-direction: column; padding-inline: 18px; }
  .tstd-versus__mark { width: 38px; height: 38px; }
  .tstd-trend   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tstd-today__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }

  /* Today's other shows become a column beside Next Up rather than a swipe
     row, and turn on their side: a grid of tall posters next to one big
     card leaves a long empty gap under it. */
  .tstd-today__rest .tstd-rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 10px;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .tstd-today__rest .tstd-show--sm { width: auto; display: grid; grid-template-columns: 64px minmax(0, 1fr); }
  .tstd-today__rest .tstd-show--sm .tstd-poster { aspect-ratio: 2 / 3; border-radius: 0; }
}

@media screen and (min-width: 1100px) {
  .tstd-week__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tstd-news       { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tstd-news__card--hero { grid-column: 1 / -1; }
  .tstd-trend      { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tstd-next       { grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 22px; padding: 24px; }
  .tstd-panel      { padding: 20px 18px 18px; }
}

/* Small phones: give the text the room instead of the poster. */
@media screen and (max-width: 359px) {
  .tstd-next      { grid-template-columns: minmax(0, 92px) minmax(0, 1fr); gap: 12px; padding: 14px; }
  .tstd-show--md  { grid-template-columns: 62px minmax(0, 1fr); }
  .tstd-day       { min-width: 48px; padding: 8px 6px; }
  .tstd-rank__row { grid-template-columns: 18px 28px minmax(0, 1fr) auto; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .tstd-in, .tstd-in--mast { opacity: 1; transform: none; clip-path: none; transition: none; }
  .tstd-dot, .tstd-skel__bar { animation: none !important; }
  a.tstd-show:hover, a.tstd-news__card:hover, a.tstd-trend__card:hover { transform: none; }
}