.year-masthead { padding: 48px 11vw 70px; background: var(--ink); color: var(--paper); }
.year-masthead-inner { max-width: 1320px; margin: 0 auto; }
.year-back { display: inline-block; margin-bottom: 60px; color: #c6c8bf; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.year-back:hover { color: var(--lime); }
.year-kicker { margin-bottom: 17px; color: var(--lime); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .13em; }
.year-masthead h1 { margin: 0; font: 300 clamp(58px, 8vw, 102px)/.98 var(--display); }
.year-masthead h1 span { color: var(--coral); }
.year-subtitle { max-width: 510px; margin: 24px 0 0; color: #c6c8bf; font-size: 14px; line-height: 1.7; }
.year-content { max-width: 1320px; margin: 0 auto; padding: 82px 11vw 110px; }
.year-section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 31px; }
.year-section-head .eyebrow { margin: 0; color: #777b73; }
.year-section-head h2 { font-size: clamp(34px, 4vw, 50px); }
.year-section-head h2 em { color: var(--coral); }
.year-content > section[aria-labelledby="plays-title"] { display: grid; grid-template-columns: minmax(210px, .62fr) minmax(0, 1.38fr); column-gap: 42px; align-items: start; }
.year-content > section[aria-labelledby="plays-title"] > .year-section-head { grid-column: 1 / -1; }
.year-poster { grid-column: 1; grid-row: 2; width: min(100%, 320px); margin: 0; }
.year-poster img { display: block; width: 100%; height: auto; background: #fff; object-fit: contain; }
.year-poster figcaption { margin-top: 9px; color: #777b73; font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.year-poster-composite { display: flex; flex-direction: column; gap: 0; }
.year-content > section[aria-labelledby="plays-title"] > .year-play-list { grid-column: 2; grid-row: 2; }
.year-play-list { border-top: 1px solid #c8c9c1; }
.year-play { min-height: 104px; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 20px; border-bottom: 1px solid #c8c9c1; }
.year-play-number { color: var(--coral); font: 11px var(--mono); }
.year-play h3 { margin: 0; font: 500 clamp(20px, 2.4vw, 30px)/1.2 var(--display); }
.year-play-link { justify-self: end; color: #555a52; font: 9px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.year-play-link:hover, .year-media-link:hover { color: var(--coral); }
.year-play-link span, .year-media-link span { color: var(--coral); margin-left: 7px; }
.year-media { margin-top: 85px; }
.year-media .year-section-head { margin-bottom: 28px; }
.year-media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px; }
.year-media-link { min-height: 148px; display: flex; align-items: center; justify-content: center; gap: 0; border-top: 1px solid #c8c9c1; font-size: 0; }
.year-media-link img { width: 224px; height: 148px; flex: 0 0 224px; object-fit: cover; background: #d7d6cc; }
.year-media-link span { margin-left: auto; font: 12px var(--mono); }
.year-media-link > span { display: none; }
.year-actions { display: flex; justify-content: flex-end; gap: 20px; margin-top: 65px; padding-top: 21px; border-top: 1px solid #c8c9c1; }
.year-actions a { color: #5b6058; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.year-actions a:hover { color: var(--coral); }

@media (max-width: 760px) {
  .year-masthead { padding: 30px 24px 54px; }
  .year-back { margin-bottom: 45px; }
  .year-masthead h1 { font-size: clamp(53px, 13vw, 78px); }
  .year-content { padding: 64px 24px 82px; }
  .year-section-head { align-items: flex-start; flex-direction: column; }
  .year-content > section[aria-labelledby="plays-title"] { grid-template-columns: 1fr; row-gap: 26px; }
  .year-content > section[aria-labelledby="plays-title"] > .year-section-head { grid-column: 1; }
  .year-poster { grid-column: 1; grid-row: 2; width: min(100%, 340px); margin: 0 auto; }
  .year-content > section[aria-labelledby="plays-title"] > .year-play-list { grid-column: 1; grid-row: 3; }
  .year-play { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 21px 0; }
  .year-play-link { grid-column: 2; justify-self: start; }
  .year-media { margin-top: 64px; }
  .year-media-grid { grid-template-columns: 1fr; }
  .year-media-link { min-height: 128px; }
  .year-media-link img { width: 192px; height: 128px; flex-basis: 192px; }
  .year-actions { flex-direction: column; }
}