/* ==========================================================================
   Issue as a volume — the number, the run, the chapters, the shelf.
   Shared by the home banner, /issues and /issues/:slug. Same tokens as
   issue-page.css (.fx) and home-page.css (.hx): #0a0a0b ground, #f40000 red,
   Roboto Mono readouts, 999px pills.
   ========================================================================== */

.iv,
.iv-run,
.iv-num,
.iv-shelf,
.iv-stats,
.iv-chapter {
  --iv-red: #f40000;
  --iv-red-hi: #ff2b2b;
  --iv-ink: #f3f3f5;
  --iv-mute: #8b8b96;
  --iv-line: rgba(255, 255, 255, 0.14);
  --iv-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* ------------------------------------------------------------- the number */

.iv-num {
  position: relative;
  display: inline-block;
  font: 900 clamp(5.5rem, 14vw, 12.5rem) / 0.8 "Roboto", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.045em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.5);
  user-select: none;
  font-variant-numeric: tabular-nums;
}
/* The same digits again, in red, shown up to how far the run has gone. */
.iv-num::after {
  content: attr(data-n);
  position: absolute;
  inset: 0;
  color: var(--iv-red);
  -webkit-text-stroke: 0;
  clip-path: inset(calc(100% - var(--fill, 0%)) 0 0 0);
  animation: iv-fill 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) both 0.25s;
  text-shadow: 0 0 40px rgba(244, 0, 0, 0.35);
}
.iv-num--done::after { color: rgba(243, 243, 245, 0.92); text-shadow: none; }
.iv-num--soon { -webkit-text-stroke-color: rgba(244, 0, 0, 0.7); }
.iv-num--soon::after { display: none; }
.iv-numwrap { display: inline-flex; flex-direction: column; align-items: inherit; }
.iv-num__pre {
  --iv-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  display: block;
  margin-bottom: 10px;
  font: 600 0.72rem/1 var(--iv-mono);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #8b8b96;
}
@keyframes iv-fill { from { clip-path: inset(100% 0 0 0); } }

/* ---------------------------------------------------------------- the run */

.iv-run { width: 100%; max-width: 640px; color: var(--iv-ink); }
.iv-run__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 12px;
  font: 500 0.72rem/1 var(--iv-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--iv-mute);
}
.iv-run__day b { color: var(--iv-ink); font-weight: 700; }
.iv-run__recent { color: var(--iv-red-hi); }

.iv-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  border: 1px solid var(--iv-line);
  border-radius: 999px;
  color: var(--iv-ink);
  background: rgba(10, 10, 11, 0.45);
  backdrop-filter: blur(6px);
}
.iv-state i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--iv-red);
  box-shadow: 0 0 0 0 rgba(244, 0, 0, 0.6);
  animation: iv-pulse 2s infinite;
}
.iv-state--live { border-color: rgba(244, 0, 0, 0.55); }
.iv-state--upcoming { color: var(--iv-red-hi); border-color: rgba(244, 0, 0, 0.4); }
@keyframes iv-pulse {
  0% { box-shadow: 0 0 0 0 rgba(244, 0, 0, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(244, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(244, 0, 0, 0); }
}

.iv-run__track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  margin-bottom: 30px;
}
.iv-run__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(244, 0, 0, 0.55), var(--iv-red));
  box-shadow: 0 0 14px rgba(244, 0, 0, 0.55);
  transform-origin: left;
  animation: iv-grow 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both 0.2s;
}
.iv-run--archived .iv-run__fill { background: rgba(243, 243, 245, 0.55); box-shadow: none; }
@keyframes iv-grow { from { transform: scaleX(0); } }

/* month ticks: a hairline at each month's start, its name under the bar */
.iv-run__month { position: absolute; top: 0; bottom: 0; border-left: 1px solid rgba(10, 10, 11, 0.9); }
.iv-run__month:first-child { border-left: 0; }
.iv-run__month i {
  position: absolute;
  top: 14px;
  left: 0;
  font: 500 0.66rem/1 var(--iv-mono);
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--iv-mute);
  white-space: nowrap;
}
.iv-run--onemonth .iv-run__month i { display: none; }
.iv-run--onemonth .iv-run__track { margin-bottom: 14px; }

/* a dot where works joined after the launch; a new one glows */
.iv-run__mark {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: #0a0a0b;
  border: 2px solid rgba(243, 243, 245, 0.85);
  z-index: 1;
}
.iv-run__mark.is-new { border-color: var(--iv-red-hi); box-shadow: 0 0 10px rgba(255, 43, 43, 0.8); }

/* today */
.iv-run__head {
  position: absolute;
  top: 50%;
  width: 3px;
  height: 22px;
  margin: -11px 0 0 -1.5px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.7);
  z-index: 2;
}

.iv-run__ends {
  display: flex;
  justify-content: space-between;
  font: 500 0.7rem/1 var(--iv-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(243, 243, 245, 0.7);
}

/* ------------------------------------------------------------- the stats */

.iv-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 500 0.74rem/1 var(--iv-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--iv-mute);
}
.iv-stats b {
  display: block;
  margin-bottom: 6px;
  font: 800 1.9rem/1 "Roboto", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.02em;
  color: var(--iv-ink);
}

/* ---------------------------------------------------- hero composition */

.iv-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 28px 48px;
  width: 100%;
  padding-top: 96px; /* clear of the fixed top bar when the hero grows past its minimum height */
}
.iv-hero__main { display: grid; gap: 22px; min-width: 0; justify-items: start; }
.iv-hero__main > .iv-run { justify-self: stretch; }
.iv-hero__side { display: grid; justify-items: end; text-align: right; }
.iv-hero .fx__hero__title { margin: 0; }
.iv-hero .fx__hero__date { margin: 0; }
@media (max-width: 900px) {
  .iv-hero { grid-template-columns: 1fr; gap: 22px; }
  .iv-hero__side { justify-items: start; text-align: left; }
  .iv-hero .iv-num { font-size: clamp(4rem, 22vw, 6rem); }
  .iv-run__top { font-size: 0.64rem; letter-spacing: 0.08em; gap: 8px 12px; }
  .iv-run__recent { flex-basis: 100%; }
}

/* --------------------------------------------------------- chapters */

.iv-chapter {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 46px 0 18px;
  font: 600 0.74rem/1 var(--iv-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--iv-ink);
}
.iv-chapter:first-child { margin-top: 8px; }
.iv-chapter::after { content: ""; flex: 1; height: 1px; background: var(--iv-line); }
.iv-chapter__count {
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--iv-line);
  color: var(--iv-mute);
  letter-spacing: 0.08em;
}
.iv-chapter--latest .iv-chapter__count { border-color: rgba(244, 0, 0, 0.6); color: var(--iv-red-hi); }
.iv-chapter__tag { color: var(--iv-mute); }

/* "New" on a work that joined in the last 7 days */
.iv-new {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 6;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f40000;
  color: #fff;
  font: 700 0.62rem/1 "Roboto Mono", ui-monospace, Menlo, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(244, 0, 0, 0.45);
}

/* ------------------------------------------------------------ the shelf */

.iv-shelf {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  overflow-x: auto;
  padding: 34px 2px 14px;
  margin: 0 0 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  border-bottom: 1px solid var(--iv-line);
}
.iv-spine {
  position: relative;
  flex: 0 0 auto;
  width: 13px;
  height: 92px;
  border-radius: 3px 3px 1px 1px;
  background-size: cover;
  background-position: center;
  filter: grayscale(1) brightness(0.55);
  transition: transform 0.25s ease, filter 0.25s ease, height 0.25s ease;
  outline: 1px solid rgba(255, 255, 255, 0.08);
}
.iv-spine--m2 { width: 26px; }
.iv-spine--m3 { width: 39px; }
.iv-spine:hover,
.iv-spine:focus-visible { filter: none; transform: translateY(-10px); height: 100px; z-index: 2; }
.iv-spine.is-current { filter: none; outline: 2px solid var(--iv-red); height: 104px; box-shadow: 0 0 22px rgba(244, 0, 0, 0.45); }
.iv-spine__n {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%) rotate(-90deg);
  transform-origin: center;
  font: 700 0.56rem/1 var(--iv-mono);
  color: #fff;
  text-shadow: 0 1px 3px #000;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.iv-spine:hover .iv-spine__n,
.iv-spine.is-current .iv-spine__n { opacity: 1; }
.iv-spine__year {
  position: absolute;
  top: -24px;
  left: 0;
  font: 600 0.62rem/1 var(--iv-mono);
  letter-spacing: 0.14em;
  color: var(--iv-mute);
  border-left: 1px solid var(--iv-line);
  padding-left: 4px;
  height: 18px;
}
.iv-shelf__legend {
  --iv-mono: "Roboto Mono", ui-monospace, Menlo, monospace;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font: 500 0.62rem/1 var(--iv-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--iv-mute);
  margin-bottom: 40px;
}
.iv-shelf__key { display: inline-flex; align-items: center; gap: 8px; }
.iv-shelf__key i { display: inline-block; height: 12px; background: rgba(255, 255, 255, 0.35); border-radius: 2px; }

/* ---------------------------------------------------- archive by year */

.iv-year { --iv-mono: "Roboto Mono", ui-monospace, Menlo, monospace; position: relative; margin-bottom: 56px; }
.iv-year__head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 18px; }
.iv-year__n {
  font: 900 clamp(2.6rem, 6vw, 4.2rem)/0.9 "Roboto", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.4);
}
.iv-year__count { font: 500 0.72rem/1 var(--iv-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--iv-mute); }

.iv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-auto-flow: dense;
  gap: 18px;
}
.iv-card {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: #141417;
  color: var(--iv-ink);
  text-decoration: none;
  isolation: isolate;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.iv-card--wide { grid-column: span 2; }
@media (max-width: 620px) { .iv-card--wide { grid-column: span 1; } }
.iv-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); color: var(--iv-ink); text-decoration: none; }
.iv-card__img {
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}
.iv-card--wide .iv-card__img { aspect-ratio: 32 / 9; }
@media (max-width: 620px) { .iv-card--wide .iv-card__img { aspect-ratio: 16 / 9; } }
.iv-card:hover .iv-card__img { transform: scale(1.05); }
.iv-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 11, 0) 35%, rgba(10, 10, 11, 0.92) 100%);
  z-index: 0;
}
.iv-card__n {
  position: absolute;
  right: 12px;
  top: 6px;
  z-index: 1;
  font: 900 3.6rem/1 "Roboto", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.7);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
  transition: color 0.3s ease, -webkit-text-stroke-color 0.3s ease;
}
.iv-card:hover .iv-card__n { color: var(--iv-red); -webkit-text-stroke-color: var(--iv-red); }
.iv-card__body { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; }
.iv-card__name { margin: 0 0 6px; font: 800 1.08rem/1.2 "Roboto", "Helvetica Neue", Arial, sans-serif; }
.iv-card__dates { font: 500 0.66rem/1 var(--iv-mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(243, 243, 245, 0.75); }
/* a strip under the card: one segment per month the issue ran */
.iv-card__span { display: flex; gap: 3px; margin-top: 10px; }
.iv-card__span i { flex: 1; height: 3px; border-radius: 2px; background: rgba(243, 243, 245, 0.55); max-width: 46px; }

@media (prefers-reduced-motion: reduce) {
  .iv-num::after, .iv-run__fill { animation: none; }
  .iv-state i { animation: none; }
}

/* ------------------------------------------------------------ home banner */

.iv-home { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; width: 100%; }
.iv-home__main { display: grid; gap: 18px; justify-items: start; max-width: 640px; flex: 1; min-width: 0; }
.iv-home__main .iv-run { max-width: 560px; }
.iv-home__side { text-align: right; }
.iv-home .iv-num { font-size: clamp(5rem, 12vw, 10.5rem); }
@media (max-width: 760px) {
  .iv-home { flex-direction: column-reverse; align-items: flex-start; }
  .iv-home__side { text-align: left; }
}