.block-history {
  display: block;
  background: var(--jct-white);
  color: var(--jct-black);
  /* Shared 8-column metric for both the header and the poster track:
     16px+16px padding and 7 gaps reserved across 8 columns (144px).
     Redefined for 4 columns at the mobile breakpoint below. */
  --history-col: calc((var(--history-vw, 100vw) - 144px) / 8);
}

/* Decade header: two 1px rules, 220px tall @1920, nav arrows at the
   outer edges, decade title between them, all on one row. */
.decade-header {
  display: grid;
  grid-template-columns: repeat(8, var(--history-col));
  column-gap: 16px;
  align-items: center;
  height: 220px;
  padding: 0 16px;
  box-sizing: border-box;
  border-top: 1px solid var(--jct-black);
  border-bottom: 1px solid var(--jct-black);
}
.decade-title {
  grid-column: 2 / 8;
  margin: 0;
  font: var(--h1);
}
.decade-nav {
  appearance: none;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  font: var(--h1);
  line-height: 1;
  color: var(--jct-grey-4);
  cursor: default;
}
.decade-nav.is-active {
  color: var(--jct-black);
  cursor: pointer;
}
.decade-nav-prev {
  grid-column: 1 / 2;
  justify-self: start;
}
.decade-nav-next {
  grid-column: 8 / 9;
  justify-self: end;
}

/* Poster scroller: a real 8-column grid sharing --history-col with the
   header. Groups auto-flow past the 8th column; since padding (unlike
   a hard clip) still renders scrolled-past content, a 9th column's
   edge peeks into the right padding for free once there's a 3rd
   group - no separate peek-width math needed. */
.poster-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--history-col);
  column-gap: 16px;
  margin: 0;
  padding: 0 16px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.poster-track::-webkit-scrollbar {
  display: none;
}
/* Chromium/Firefox drop a scroll-snap container's *leading* padding
   once its content actually needs to scroll - .poster-track's own
   padding-left renders as if it weren't there, while its padding-
   right keeps working. Only decades with more than one poster can
   ever overflow/scroll, so the script below adds this class to
   exactly those; every poster-group in it then reconstructs the
   missing 16px itself instead of relying on the (dropped) track
   padding - applied uniformly (not just the first) so every poster is
   shifted by the same amount, keeping the whole sequence, including
   later peeks, consistent with each other. */
.history-decade.has-multiple-posters .poster-group {
  padding-left: 16px;
  /* Widens to compensate, same as the image/year/cta bleeds below -
     otherwise this box-sizing:border-box padding would eat 16px from
     the fixed-width internal grid and force it to overflow. The extra
     16px lands in the gap before the next poster's image, which
     already bleeds left by the same amount to sit flush against it -
     so nothing visible changes because of it. */
  width: calc(100% + 16px);
}
.poster-group {
  grid-column: span 4;
  scroll-snap-align: start;
  box-sizing: border-box;
  position: relative;
  display: grid;
  /* Not subgrid: this needs to stay a real box for scroll-snap-align to
     have something to snap to (display: contents, which would let the
     children be direct items of .poster-track instead, drops the box
     scroll-snap needs). Instead it just reuses the same --history-col
     and column-gap the parent track uses, which lines the columns up
     exactly without relying on subgrid's inheritance. */
  grid-template-columns: repeat(4, var(--history-col));
  column-gap: 16px;
}
.poster-image {
  grid-column: span 2;
  /* Bleeds 16px into the gap before it, same as the year/cta bleeds
     below, so each poster starts in the previous group's trailing gap
     instead of at its column's nominal edge. For the very first poster
     that gap is the track's own left padding (or, in a decade with
     more than one poster, each poster-group's own reconstruction of
     it - see .has-multiple-posters .poster-group above), so it bleeds
     through that instead and lands flush at the true left edge - no
     special-casing needed, and every poster keeps the same width (and
     so the same aspect-ratio-derived height). */
  margin-left: -16px;
  width: calc(100% + 16px);
  /* 460 : 659 at the 1920px reference (2 columns + the 16px gap
     between them, over the poster's height - the width above just
     adds the leading 16px bleed on top of that), kept as a fixed
     ratio so proportions hold as --history-col scales with the
     viewport. The rest of the group (year, cta) stretches to match
     this (very slightly bleed-inflated) height. */
  aspect-ratio: 460 / 659;
  height: auto;
  background: center center no-repeat;
  background-size: contain;
}
/* The 2020s decade's source images are cropped to a slightly different
   ratio than every other decade's, so only this decade needs its own
   aspect-ratio to avoid letterboxing/cropping against the shared 460:659
   ratio above. */
.history-decade[data-decade="2020"] .poster-image {
  aspect-ratio: 470 / 659;
}
.poster-year {
  grid-column: span 1;
  height: 100%;
  margin-left: -16px;
  width: calc(100% + 16px);
  display: flex;
  align-items: flex-start;
}
.poster-year > span {
  display: block;
  padding-top: 16px;
  writing-mode: vertical-rl;
  text-orientation: sideways;
  text-box-trim: trim-both;
  /* Scales down from 200px at the 1920px reference width, floored at
     90px (the --h1 size - --h1 itself isn't reusable here since this
     needs the "Cortese" family, not --font-display) so a wide year
     like "2000" can't push the poster-group taller on small screens. */
  font:
    200 clamp(90px, calc(200px * (var(--history-vw, 100vw) / 1920px)), 200px) /
    1 "Cortese",
    sans-serif;
  color: var(--jct-black);
  white-space: nowrap;
}
.poster-cta-wrap {
  grid-column: span 1;
  align-self: end;
  margin-left: -16px;
  width: calc(100% + 16px);
  border-top: 1px solid var(--jct-black);
}
.poster-cta.button.more-link {
  width: 100%;
  padding-right: 16px;
  color: var(--jct-black);
  border-color: var(--jct-black);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.poster-cta.button.more-link:hover {
  background: var(--jct-black);
  color: var(--jct-white);
  border-color: var(--jct-black);
}

/* Info modal (reuses each item's image + WYSIWYG content). z-index is
   set above every other stacking context in the theme (highest
   elsewhere is .mfp-wrap at 100001) so it covers the site header/menu
   too. */
.history-modal {
  /* Full-bleed column metric for the modal specifically: 8 columns
     and 7 gaps only, no left/right inset, unlike the (padded)
     --history-col the header/poster track share - the modal spans
     the entire screen edge to edge with no dead space outside the
     column structure. Computed from --history-vw (a root-level
     property) rather than inherited from .block-history, so it still
     works once the modal is moved to a direct child of <body> on
     open (see the script below), which escapes #main's stacking
     context so the modal can render above #site-nav (z-index: 1500). */
  --modal-col: calc((var(--history-vw, 100vw) - 7 * 16px) / 8);
  /* Poster width: 3 columns + 2 internal gaps, plus ~12.5% of the
     next column bled in past its edge, matching the Figma spec of
     "a little over three columns". The poster's height then follows
     from that width via its fixed 460:659 crop ratio (the same ratio
     the thumbnail posters use), and the dialog's own height is set
     to match the poster's height exactly - so the modal's overall
     size is driven by the poster, not the viewport. */
  --modal-poster-w: calc(
    3 * var(--modal-col) + 2 * 16px + 0.125 * var(--modal-col)
  );
  --modal-poster-h: calc(var(--modal-poster-w) * 659 / 460);
  position: fixed;
  inset: 0;
  z-index: 100010;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.history-modal[hidden] {
  display: none;
}
.history-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 6, 0.8);
}
/* Full-bleed width, height set to the poster's own height (see
   --modal-poster-h above), capped at the viewport height so it can
   never run taller than the screen regardless of poster/viewport
   proportions - overflow-y then handles that rare case. */
.history-modal-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  height: var(--modal-poster-h);
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  box-sizing: border-box;
  background: var(--jct-white);
  color: var(--jct-black);
}
.history-modal-close {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  width: 76px;
  height: 76px;
  padding: 12px;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  appearance: none;
  border: none;
  background: var(--jct-black);
  font: var(--h4);
  line-height: 1;
  color: var(--jct-white);
  cursor: pointer;
}
.history-modal-body {
  display: grid;
  grid-template-columns: repeat(8, var(--modal-col));
  column-gap: 16px;
  height: 100%;
}
/* Sized to --modal-poster-w (see .history-modal above). The grid area
   is only the nominal 3 columns (1 / 4) - d-content's cell starts
   right after, at column 4 - and the image's true width (a little
   over 3 columns) is left to overflow that cell visually via
   justify-self: start; grid doesn't clip the overflow, so the bleed
   just reads as the poster running a touch into column 4, and
   d-content's own left padding keeps clear of it. Spanning the cell
   itself to column 4 too would have the grid reserve that column for
   the image, pushing d-content's explicit column-4 start onto a new
   row instead of alongside it. */
.history-modal-body .img-content {
  grid-column: 1 / 4;
  justify-self: start;
  width: var(--modal-poster-w);
  height: 100%;
}
.history-modal-body .img-content img {
  display: block;
  width: 100%;
  object-fit: contain;
}
.history-modal-body .d-content {
  grid-column: 4 / 9;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 40px;
  box-sizing: border-box;
  /* Starts about a third of the way down the poster. */
  padding-top: calc(var(--modal-poster-h) / 4);
  font: var(--body3);
}
body.modal-open {
  overflow: hidden;
}

@media (max-width: 768px) {
  .block-history {
    /* Same shared-metric idea as desktop, redefined for 4 columns:
       16px+16px padding and 3 gaps reserved across 4 columns (80px). */
    --history-col: calc((var(--history-vw, 100vw) - 80px) / 4);
  }
  .decade-header {
    grid-template-columns: repeat(4, var(--history-col));
    height: 96px;
  }
  .decade-title {
    grid-column: 2 / 4;
    font: var(--h2);
  }
  .decade-nav {
    font: var(--h2);
  }
  .decade-nav-next {
    grid-column: 4 / 5;
  }
  .poster-image {
    grid-column: span 3;
    grid-row: 1;
  }
  .poster-year {
    grid-row: 1;
  }
  .poster-cta-wrap {
    grid-column: span 4;
    grid-row: 2;
  }
  /* A decade with more than one poster gets its right edge pushed to
     the true edge as a side effect of .has-multiple-posters .poster-
     group's own width fix above (every group, including the last,
     grows 16px to the right). A single-poster decade never gets that
     class, so its lone poster-group's - and thus this wrap's - right
     edge stops 16px short of it instead; this bleeds the extra 16px
     directly since there's no group-level fix to piggyback on here. */
  .history-decade:not(.has-multiple-posters) .poster-cta-wrap {
    width: calc(100% + 32px);
    box-sizing: border-box;
    padding-right: 16px;
  }
  .poster-cta.button.more-link {
    /* poster-cta-wrap now spans the full row and bleeds left the same
       way poster-image does, so without this the button's text would
       start flush at the true edge instead of the first column. The
       wrap's right edge is already at its normal (unbled) position
       here, so the desktop padding-right - meant to inset the "+" off
       an internal column boundary - would double up with it. */
    padding-right: 0;
    padding-left: 16px;
  }
  .history-modal-dialog {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
  }
  .history-modal-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: auto;
  }
  .history-modal-body .img-content {
    height: auto;
    aspect-ratio: 460 / 659;
    width: 100%;
  }
  .history-modal-body .d-content {
    padding-top: 0;
    padding-left: 16px;
    padding-right: 16px;
  }
  /* Matches .site-nav-toggle-mobile's placement (css/site-nav.css):
     fixed to the viewport, bottom-center, instead of the desktop
     top-right corner of the dialog. */
  .history-modal-close {
    position: fixed;
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 400px) {
  .poster-year > span {
    font:
      200 clamp(80px, calc(200px * (var(--history-vw, 100vw) / 1920px)), 200px) /
      1 "Cortese",
      sans-serif;
  }
}