/* ===========================================================================
   03 星辰 Career · 美国全职手册
   Two full-bleed filmstrips of handbook pages. Each sheet keeps its own
   width-to-height ratio: the row height is fixed, the width comes from the
   page, so nothing is stretched or cropped. The rows travel in opposite
   directions while the page scrolls; colour and hover stay untouched.
   =========================================================================== */

.b-marquee {
  --hm-h: clamp(220px, 22vw, 320px);
  --hm-gap: 12px;
  position: relative;
  margin-inline: calc(var(--gut) * -1);
  margin-block: clamp(6px, 1vw, 12px) clamp(18px, 2.6vw, 36px);
}

.hm-rows {
  display: grid;
  gap: var(--hm-gap);
}

.hm-row {
  width: 100%;
  overflow: hidden;
}

.hm-track {
  display: flex;
  width: max-content;
  height: var(--hm-h);
  backface-visibility: hidden;
}

/* one interval of the loop is exactly one set wide; the script stitches as
   many copies as the window needs */
.hm-set {
  display: flex;
  flex: none;
  height: 100%;
  gap: var(--hm-gap);
  padding-right: var(--hm-gap);
}

.hm-card {
  flex: none;
  width: calc(var(--hm-h) * var(--ar, 0.4615));
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--r-tile);
  background-color: #0c0e0f;
  -webkit-appearance: none;
  appearance: none;
}

.hm-card img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: opacity 0.5s var(--ease);
}

.hm-card:focus-visible {
  outline: 1px solid rgb(255 255 255 / 0.72);
  outline-offset: -2px;
}

@media (max-width: 820px) {
  .b-marquee { --hm-h: clamp(190px, 34vw, 240px); }
}

@media (max-width: 620px) {
  .b-marquee { --hm-h: clamp(180px, 46vw, 220px); }
}

/* print: flatten to a five-column grid, one real copy of each page */
@media print {
  .b-marquee { margin-inline: 0; }
  .hm-rows { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .hm-row,
  .hm-track,
  .hm-set { display: contents; }
  .hm-card[aria-hidden="true"] { display: none; }
  .hm-card {
    width: 100%;
    height: auto;
    break-inside: avoid;
  }
  .hm-card img { height: auto; object-fit: contain; }
}