/* Trends — the poster wall. Card hue follows the family, so risers from the
   same corner of the map visibly rhyme. All text on cards is ink. */


/* the wall: №1 card then the grid, one consistent rhythm */
.trends-wall { padding: var(--sp-6) 0 0; }
.trends-wall .section-head { margin: 0 var(--gutter) var(--sp-5); }
.trends-wall .top-card { margin: 0 var(--gutter); }
.wall {
  padding: 0 var(--gutter);
  margin-top: var(--sp-5);
  display: grid;
  gap: var(--sp-5);
}
/* the grid sizes itself to the month: three runners share a row, two split
   it wider, one goes full bleed — and an empty grid leaves no blank band */
.wall--grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.wall:empty { display: none; }
/* every card is a column so its imagery pins to the foot: ribbons and
   sleeve rows land on one line across the row whatever the text above */
.wall--grid .card { display: flex; flex-direction: column; }
.wall--grid .card .card-board, .wall--grid .card .card-covers { margin-top: auto; }
.wall--grid .card .card-desc { margin-bottom: var(--sp-3); }
/* number first: the stat band opens every card on one shared rule, the
   title sits snug over its tags below it — no reserved space anywhere */
.wall--grid .card .card-stat { margin-top: 0; padding-right: 2.5rem;
  flex-wrap: nowrap; }
.wall--grid .card .card-stat .usual { overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.wall--grid .card .card-name { margin-top: var(--sp-2); }

/* archive pages */
.month-list { list-style: none; padding: 0; }
.month-list li { border-bottom: 1px solid var(--line); }
.month-link {
  display: block;
  padding: var(--sp-4) 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--display-3);
  color: var(--ink);
  text-decoration: none;
}
.month-link:hover { text-decoration: underline; }

/* ---- cards ---- */
.card {
  position: relative;
  --cut: var(--cut-sm);
  padding: var(--sp-5);
}
.card a { color: var(--ink); }
.card .rank {
  position: absolute;
  top: -0.12em;
  right: 0.12em;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 4.2rem;
  line-height: 1;
  opacity: 0.15;
  pointer-events: none;
}
.card-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--display-3);
  line-height: 1.12;
  padding-right: 2.5rem;      /* room for the ghost rank */
}
.card-name a { text-decoration: none; }
.card-name a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  align-items: baseline;
  margin-top: var(--sp-2);
  font-size: var(--text--1);
}
.card-tags .kind {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: var(--text-tag);
}
.card-stat {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  flex-wrap: wrap;
}
.card .ratio {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.1rem;
  line-height: 1;
}
.card .usual { font-size: var(--text--1); color: var(--ink-soft); }
.card .spark { width: 100%; height: auto; margin-top: var(--sp-3); }
.card-desc {
  margin-top: var(--sp-3);
  font-size: var(--text--1);
}
.card-why { margin-top: var(--sp-2); font-size: var(--text--1); color: var(--ink-soft); }
.card-why a { color: inherit; }
.card-why .new { font-weight: 700; color: var(--ink); }
/* moodboard ribbon: an aesthetic card closes on a slice of its own imagery */
.card-board {
  display: block; width: 100%; height: 56px; object-fit: cover;
  margin-top: var(--sp-3);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
/* on the № 1 poster the multiplier reads as the chart's own label: numeral
   and sparkline share one baseline, the freed height goes to the imagery */
.top-card .stat-lockup {
  display: flex; align-items: flex-end; gap: var(--sp-4);
}
.top-card .stat-lockup .ratio { flex: none; }
.top-card .stat-lockup .spark {
  flex: 1 1 0; min-width: 0; width: auto;
  margin: 0 0 0.6rem; opacity: 0.55;
}
/* flex-basis 0px (a length — 0% would resolve to content height in an
   auto-height column) plus an explicit min-height replacing the img's
   automatic minimum: the TEXT column sets the card height and the picture
   flexes to meet its foot instead of propping the card open */
.top-card .card-board--top {
  flex: 1 1 0px; min-height: 150px; margin-top: var(--sp-4);
}
/* a №1 without imagery centers its stat cluster instead of leaving a void */
.top-card--bare .col-stat { justify-content: center; }
/* the genre counterpart: a row of covered sleeves closes the card */
.card-covers { display: flex; gap: 4px; margin-top: var(--sp-3); }
/* the genre №1: the sleeves grow into the freed column and pin to its foot,
   the same budget the board poster spends on its full-height ribbon */
.top-card .card-covers--top {
  flex: 1 1 0px; align-items: flex-end; margin-top: var(--sp-4);
}
.card-covers img {
  width: calc((100% - 8px) / 3); aspect-ratio: 1 / 1; object-fit: cover;
  display: block; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* ---- the number one poster ---- */
.top-card {
  margin: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--sp-6);
  padding: var(--sp-6);
}
.top-card .card-name { font-size: var(--display-2); line-height: 1.05; padding-right: 0; }
.top-card .ratio { font-size: var(--mega); line-height: 0.9; }
.top-card .card-desc { font-size: var(--text-0); }
.top-card .rank { display: none; }
.top-card .col-stat { display: flex; flex-direction: column; gap: var(--sp-3); justify-content: center; }
@media (max-width: 820px) {
  .top-card { grid-template-columns: 1fr; }
}

/* ---- just landed ---- */
.fresh-band {
  margin-top: var(--sp-7);
  --cut: var(--cut-md);
}
/* the loudest arrival: one wide snapshot before the pinboard */
.fresh-spot {
  background: var(--paper);
  --cut: 0.8rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut) / 0.21256) 100%, 0 100%);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--sp-5); padding: var(--sp-5) var(--sp-5) calc(var(--sp-5) + 0.8rem);
  margin-top: var(--sp-5); max-width: 56rem;
}
.fresh-spot-media .fresh-media { margin-bottom: 0; }
.fresh-spot-body { display: flex; flex-direction: column; gap: var(--sp-2);
  align-items: flex-start; }
.fresh-spot-name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.7rem; line-height: 1.1;
}
.fresh-spot-name a { color: var(--ink); text-decoration: none; }
.fresh-spot-name a:hover { text-decoration: underline; }
.fresh-spot .fresh-desc { -webkit-line-clamp: 4; }
.fresh-spot .fresh-foot { margin-top: auto; }
@media (max-width: 640px) { .fresh-spot { grid-template-columns: 1fr; } }
/* auto-fill, not auto-fit: one or two arrivals stay card-sized instead of
   stretching across the band */
.fresh-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
/* arrivals as snapshots pinned to the butter plate: the picture leads,
   a short caption follows — every card gets a face, even if it is just
   the entity's initial on paper */
.fresh-card {
  background: var(--paper);
  padding: var(--sp-3) var(--sp-3) calc(var(--sp-3) + 0.8rem);
  --cut: 0.8rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut) / 0.21256) 100%, 0 100%);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.fresh-media {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  margin-bottom: var(--sp-1);
}
.fresh-media--empty {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 2.6rem;
  color: var(--ink); background: var(--butter);
}
.fresh-desc {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.fresh-card a { color: var(--ink); }
.fresh-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.15;
}
.fresh-name a { text-decoration: none; }
.fresh-name a:hover { text-decoration: underline; }
.fresh-stat { font-size: var(--text--1); color: var(--ink-soft); }
.fresh-stat .views {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.35rem;
  color: var(--ink);
}
.fresh-desc {
  font-size: var(--text--1);
}
.fresh-foot { margin-top: auto; }

/* ---- family rows ---- */
.family-rows { list-style: none; padding: 0; max-width: 64rem; }
.family-rows li {
  border-left: 6px solid var(--hue, var(--peri));
  border-bottom: 1px solid var(--line);
  padding: var(--sp-4) var(--sp-5);
}
.family-rows .row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.family-rows .family-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--ink);
  text-decoration: none;
}
.family-rows .family-name:hover { text-decoration: underline; }
.family-rows .ratio { font-family: var(--font-display); font-weight: 900; font-size: 1.35rem; }
.family-rows .sub { font-size: var(--text--1); color: var(--ink-soft); }
.family-rows .movers { margin-top: var(--sp-1); font-size: var(--text--1); color: var(--ink-soft); }
/* the scene of the month: its imagery at poster size, the story beside it */
.heat-spot {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--sp-6); padding: var(--sp-6); margin-bottom: var(--sp-6);
  max-width: 64rem;
}
.heat-spot-media { display: flex; flex-direction: column; gap: 4px; }
.heat-spot-media .spot-board {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.heat-spot-media .spot-covers { display: flex; gap: 4px; }
.heat-spot-media .spot-covers img {
  width: calc((100% - 8px) / 3); aspect-ratio: 1 / 1; object-fit: cover;
  display: block; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
/* covers-only spotlight: the sleeves are the poster, two-up and large */
.heat-spot-media .spot-covers--solo img { width: calc((100% - 4px) / 2); }
.heat-spot-body { display: flex; flex-direction: column; align-items: flex-start; }
.heat-spot-name {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--display-3); line-height: 1.08; margin-top: 2px;
}
.heat-spot-name a { color: var(--ink); text-decoration: none; }
.heat-spot-name a:hover { text-decoration: underline; }
.heat-spot .ratio { font-family: var(--font-display); font-weight: 900; font-size: 2.4rem; }
.heat-spot .heat-family { font-size: var(--text--1); color: var(--ink-soft);
  text-decoration: none; margin-top: var(--sp-2); }
.heat-spot .heat-family:hover { text-decoration: underline; }
.heat-spot .movers { margin-top: var(--sp-3); font-size: var(--text--1); color: var(--ink-soft); }
.heat-spot--bare { grid-template-columns: 1fr; }
@media (max-width: 820px) { .heat-spot { grid-template-columns: 1fr; } }
/* the runners-up: filmstrip rows, board first, then covered sleeves. The
   strip is a fixed slot (three 76px frames) whether a row fills it or not,
   so every name starts on the same left rule */
.family-rows .heat-li { display: flex; gap: var(--sp-5); align-items: center; }
.family-rows li { padding: var(--sp-5); }
.heat-media { display: flex; flex: none; gap: 4px; width: 236px; }
.heat-media img {
  width: 76px; height: 76px; object-fit: cover; display: block;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.family-rows .heat-text { flex: 1; min-width: 0; }
.family-rows .heat-li .family-name { font-size: 1.55rem; }
.family-rows .heat-li .ratio { font-size: 1.55rem; }
/* ratio and views travel as one right-aligned unit, mirroring the family
   on line two; if line one must wrap, the whole stat steps down together */
.family-rows .heat-stat { display: inline-flex; align-items: baseline;
  gap: var(--sp-3); white-space: nowrap; flex: none; margin-left: auto; }
/* line two, every row the same: what moved it on the left, where it lives
   on the right — no wrap lottery */
.family-rows .heat-sub { margin-top: var(--sp-1); flex-wrap: nowrap; }
.family-rows .heat-sub .movers { margin-top: 0; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.family-rows .heat-family { color: var(--ink-soft); margin-left: auto;
  text-decoration: none; flex: none; }
.family-rows .heat-family:hover { text-decoration: underline; }
/* ---- phones: the filmstrip reflows under its row instead of vanishing ---- */
@media (max-width: 640px) {
  .family-rows .heat-li { flex-wrap: wrap; gap: var(--sp-3); }
  .heat-media { order: 2; width: 100%; }
  .heat-media img {
    width: calc((100% - 8px) / 3); height: auto; aspect-ratio: 1 / 1;
  }
  .family-rows .heat-text { flex: 1 1 100%; }
  /* line two may wrap: the family steps down to its own right-aligned line */
  .family-rows .heat-sub { flex-wrap: wrap; }
  .family-rows .heat-li .family-name,
  .family-rows .heat-li .ratio { font-size: 1.35rem; }
  .family-rows li { padding: var(--sp-4) var(--sp-3) var(--sp-4) var(--sp-4); }
  /* the ghost numeral keeps its place at half the tax on a narrow card */
  .card .rank { font-size: 3rem; }
  .card-name { padding-right: 1.75rem; }
}