.kicker { font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 14px; letter-spacing: .1em; color: var(--red); margin-bottom: 22px; }

.opener {
  position: relative; height: 64vh; min-height: 480px; max-height: 720px;
  overflow: hidden; background: var(--black); display: flex; align-items: center;
}
.opener-media { position: absolute; inset: 0; }
.opener-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: .6; }
.opener-scrim {
  position: absolute; inset: 0; z-index: 10;
  background: linear-gradient(to top, rgba(0,0,0,.74), rgba(0,0,0,.3) 55%, rgba(0,0,0,.34));
}
.opener-grid {
  position: absolute; inset: 0; z-index: 10; opacity: .5; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 50px 50px;
}
.opener-content { position: relative; z-index: 20; padding-top: 40px; }
.opener-kicker {
  font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 15px; color: var(--red);
  letter-spacing: .5em; text-transform: uppercase; margin-bottom: 16px;
}
.opener-title {
  font-size: clamp(56px, 8vw, 120px); line-height: .8; font-weight: 900;
  letter-spacing: -.04em; text-transform: uppercase; color: var(--white);
}
.opener-title .line { display: block; }
.opener-title .line-outline { color: transparent; -webkit-text-stroke: 2px var(--white); transition: color .5s; }
.opener-title .line-outline:hover { color: var(--white); }

.opener-kicker, .opener-title .line { animation: rise 1s cubic-bezier(.16,1,.3,1) both; }
.opener-title .line-outline { animation-delay: .15s; }
@keyframes rise { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }

.who { padding-block: var(--sect); background: var(--white); }
.who-top { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.who-head h2 {
  font-size: clamp(44px, 4.6vw, 68px); font-weight: 900; text-transform: uppercase;
  line-height: .88; letter-spacing: -.03em; color: var(--slate-900);
}
.who-head h2 .outline { color: transparent; -webkit-text-stroke: 1px var(--black); }
.who-body p { font-size: 18px; line-height: 1.65; color: var(--slate-600); max-width: 34em; }
.who-body p + p { margin-top: 20px; }

.mvv-band { background: var(--white); }
.mvv-list { list-style: none; }
.mvv-row {
  display: grid; grid-template-columns: 52px minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 44px; align-items: center; padding-block: 44px;
  border-top: 1px solid var(--slate-900);
}
.mvv-row:last-child { border-bottom: 1px solid var(--slate-900); }
.mvv-idx { font-size: 14px; font-weight: 700; color: var(--red); font-variant-numeric: tabular-nums; }
.mvv-word {
  font-size: clamp(34px, 3.8vw, 56px); font-weight: 900; line-height: .92;
  letter-spacing: -.03em; text-transform: uppercase; color: var(--slate-900);
  transition: color .35s;
}
.mvv-row:hover .mvv-word { color: var(--red); }
.mvv-copy {
  max-width: 46ch;
  font-size: 17px; line-height: 1.65; color: var(--slate-600);
}

.lead { padding-block: var(--sect); background: var(--zinc-50); }
.lead-head { margin-bottom: 56px; }
.lead-head h2 {
  font-size: clamp(40px, 5vw, 72px); font-weight: 900; text-transform: uppercase;
  line-height: .86; letter-spacing: -.03em; color: var(--slate-900);
}
.lead-head h2 .outline { color: transparent; -webkit-text-stroke: 1px var(--black); }
.lead-sub { margin-top: 26px; font-size: 18px; color: var(--slate-600); max-width: 620px; }

.lead-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--slate-200); border: 1px solid var(--slate-200);
}
.person { background: var(--white); display: flex; flex-direction: column; }
.person-media { aspect-ratio: 4 / 3; overflow: hidden; }
.person-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.person:hover .person-media img { transform: scale(1.04); }
.person-body { padding: 32px; }
.person-body h3 { font-size: 30px; font-weight: 900; letter-spacing: -.025em; color: var(--slate-900); }
.person-role { margin-top: 6px; margin-bottom: 22px; font-size: 15px; font-weight: 500; color: var(--red); }
.person-body > p { font-size: 15px; line-height: 1.68; color: var(--slate-600); }
.person-body blockquote {
  margin-top: 24px; padding-left: 22px; border-left: 1px solid var(--slate-200);
  font-size: 16px; line-height: 1.6; color: var(--slate-900);
}
.person-body blockquote::before { content: "\201C"; }
.person-body blockquote::after { content: "\201D"; }

.awards {
  position: relative; overflow: hidden; padding-block: var(--sect);
  background: var(--zinc-950); color: var(--white);
}
.awards .zone-glow {
  background: radial-gradient(ellipse 74% 50% at 50% 42%,
    rgba(237, 29, 36, .18), rgba(237, 29, 36, .06) 58%, transparent 80%);
}
.awards .container { position: relative; z-index: 10; }
.awards-head { max-width: 760px; margin-bottom: 56px; }
.awards-head h2 {
  font-size: clamp(38px, 5vw, 72px); font-weight: 900; text-transform: uppercase;
  line-height: .86; letter-spacing: -.03em;
}
.awards-head h2 .outline { color: transparent; -webkit-text-stroke: 1px var(--white); }
.awards-head p { margin-top: 26px; font-size: 17px; line-height: 1.65; color: var(--zinc-400); max-width: 34em; }
.awards-head .kicker { color: var(--red); }
.aw-marquee {
  position: relative; z-index: 10; overflow: hidden;
  border-top: 1px solid var(--zinc-800); border-bottom: 1px solid var(--zinc-800);
}
.aw-row { display: flex; align-items: stretch; width: max-content; padding-block: 22px; }
.aw-row + .aw-row { border-top: 1px solid var(--zinc-800); padding-top: 22px; }
.aw-card {
  flex: none; margin-right: 14px; padding: 10px 10px 12px;
  background: var(--zinc-900); border: 1px solid var(--zinc-800);
}
.aw-card img { display: block; height: 208px; width: auto; }
.aw-card figcaption {
  margin-top: 10px; max-width: 294px; font-size: 13px; line-height: 1.4;
  color: var(--zinc-400); white-space: normal;
}
.aw-row-a { animation: marquee 74s linear infinite; }
.aw-row-b { animation: marquee 74s linear infinite reverse; }
@media (prefers-reduced-motion: reduce) {
  .aw-row { animation: none; flex-wrap: wrap; width: auto; }
  .mvv-word { transition: none; }
}

.jrn {
  position: relative; padding-block: var(--sect);
  background: var(--zinc-950); color: var(--white);
}
.jrn .zone-glow {
  background: radial-gradient(ellipse 62% 20% at 50% 10%,
    rgba(237, 29, 36, .22), rgba(237, 29, 36, .08) 55%, transparent 78%);
}
.jrn .container { position: relative; z-index: 10; }
.jrn-head { max-width: 760px; margin-bottom: 72px; }
.jrn-head h2 {
  font-size: clamp(56px, 6.6vw, 96px); font-weight: 900; text-transform: uppercase;
  line-height: .84; letter-spacing: -.04em;
}
.jrn-head h2 .outline { color: transparent; -webkit-text-stroke: 1px var(--white); }
.jrn-sub { margin-top: 28px; font-size: 17px; line-height: 1.65; color: var(--zinc-400); max-width: 620px; }

.jrn-track { display: grid; grid-template-columns: 1fr 480px; gap: 72px; }

.jrn-side { position: relative; padding-left: 56px; }
.jrn-rail { position: absolute; left: 9px; top: 0; bottom: 0; width: 0; }

.jrn-bar {
  position: absolute; left: -9px; top: 0; width: 18px;
  height: calc(var(--draw, 0) * 1%); min-height: 34px;
}
.bar-body {
  position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 90px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 90px);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, rgba(0,0,0,.045) 1px 2px),
    linear-gradient(90deg, transparent 58%, rgba(255,255,255,.16) 72%, transparent 86%),
    linear-gradient(90deg, transparent 80%, rgba(237,29,36,.12) 91%, transparent 100%),
    linear-gradient(178deg,
      transparent 0%, rgba(255,255,255,.05) 26%, transparent 44%,
      rgba(0,0,0,.07) 62%, transparent 80%, rgba(255,255,255,.04) 92%, transparent 100%),
    linear-gradient(90deg,
      #3d4247 0%, rgba(255,255,255,.30) 2%, #202327 4%, #33373c 8%,
      #4c5156 12%, #878e94 22%, #c6cbcf 31%,
      #e9ecee 37%, #d6dadd 43%, #aab0b5 51%, #82888e 59%, #5d6267 68%,
      #41454a 78%, #2b2e32 87%, #3d4147 94%, rgba(255,255,255,.16) 98%, #24272b 100%);
  box-shadow:
    inset 0 14px 12px -10px rgba(0,0,0,.4),
    inset 0 -16px 14px -12px rgba(0,0,0,.35),
    8px 5px 18px rgba(0,0,0,.5);
}
.bar-heat {
  position: absolute; left: 0; right: 0; bottom: 0; height: 280px; max-height: 100%;
  background: linear-gradient(90deg,
    rgba(140, 30, 8, .0) 0%, rgba(224, 74, 18, .55) 14%,
    rgba(255, 146, 40, .9) 30%, rgba(255, 224, 150, .98) 37%,
    rgba(255, 170, 60, .9) 48%, rgba(238, 96, 24, .6) 66%,
    rgba(150, 36, 10, .35) 85%, rgba(120, 24, 6, .0) 100%);
  -webkit-mask-image: linear-gradient(to top, #000 0, #000 22%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0, #000 22%, transparent 100%);
  opacity: var(--jheat, 0);
}
.bar-glint {
  position: absolute; left: -30px; right: -30px; bottom: -34px; height: 220px;
  background: radial-gradient(ellipse 52% 44% at 50% 72%,
    rgba(255, 120, 40, .34), rgba(237, 60, 20, .14) 55%, transparent 80%);
  opacity: var(--jheat, 0);
}
.bar-tip {
  position: absolute; left: 0; bottom: -9px; width: 18px; height: 18px; border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(0,0,0,.16) 0 1px, transparent 1px 2.5px),
    radial-gradient(circle at 36% 30%, #f2f4f6, #c6cbcf 40%, #969ca2 66%, #63686e 86%, #3d4146 100%);
  box-shadow: 0 4px 7px rgba(0,0,0,.65);
}
.bar-tip::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border-top: 1px solid rgba(255,255,255,.55);
  border-bottom: 1px solid rgba(0,0,0,.5);
}
.bar-tip::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(ellipse at 45% 35%,
    #fff3d0, rgba(255, 172, 62, .95) 45%, rgba(224, 74, 18, .85) 100%);
  opacity: var(--jheat, 0);
}

.jrn-list { list-style: none; }
.jm {
  position: relative; display: grid; grid-template-columns: 76px 1fr;
  column-gap: 32px; align-items: baseline; padding-block: 17px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.jm:last-child { border-bottom: none; }
.jm::before {
  content: ""; position: absolute; left: -32px; top: 1.35em; width: 18px; height: 1px;
  background: rgba(255,255,255,.22); transition: background .45s, width .45s;
}
.jm.is-past::before { background: rgba(198,200,202,.6); }
.jm.is-live::before { background: var(--red); width: 27px; }
.jm-year {
  font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 15px;
  color: rgba(255,255,255,.38); transition: color .45s;
}
.jm.is-past .jm-year { color: rgba(255,255,255,.55); }
.jm.is-live .jm-year { color: var(--red); }
.jm-body p {
  font-size: 16px; line-height: 1.5; max-width: 34em;
  color: rgba(255,255,255,.48); transition: color .45s;
}
.jm.is-past .jm-body p { color: rgba(255,255,255,.62); }
.jm.is-live .jm-body p { color: rgba(255,255,255,.95); }
.jm-end .jm-year { font-family: var(--sans); font-size: 14px; font-weight: 700; }

.jrn-panel {
  position: sticky; top: 96px; height: min(620px, calc(100svh - 120px)); overflow: hidden;
  border: 1px solid var(--zinc-800); background: var(--zinc-900);
}
.jrn-panel .jrn-photo {
  position: absolute; top: 56px; left: 50%; width: 272px; height: 332px;
  transform: translateX(-50%); object-fit: cover;
  border: 1px solid var(--zinc-800); background: var(--zinc-900);
  box-shadow: 0 18px 40px rgba(0,0,0,.5);
  opacity: 0; transition: opacity .7s cubic-bezier(.16,1,.3,1);
}
.jrn-panel .print-s { width: 208px; height: 256px; top: 84px; }
.jrn-panel .ph { top: 48px; }
.jrn-panel .ph-1 { width: 348px; height: 262px; top: 96px; }
.jrn-panel .ph-2 { width: 360px; height: 452px; top: 48px; }
.jrn-panel .ph-3 { width: 388px; height: 292px; top: 88px; }
.jrn-panel .ph-4 { width: 408px; height: 308px; top: 80px; }
.jrn-panel .ph-5 { width: 428px; height: 316px; top: 76px; }
.jrn-panel .ph-6 { width: 444px; height: 374px; top: 52px; }
.jrn-panel .ph-7 { width: 458px; height: 402px; top: 44px; }
.jrn-panel .ph-8 { width: 472px; height: 418px; top: 38px; }
.jrn-panel .jrn-photo--full {
  top: 0; left: 0; width: 100%; height: 100%; transform: none;
  border: none; box-shadow: none;
}
.jrn-panel .jrn-photo.is-on { opacity: 1; }
.jrn-panel-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.42) 20%, transparent 44%);
}
.jrn-panel-meta { position: absolute; left: 28px; right: 28px; bottom: 24px; }
.jrn-year-big {
  display: block; font-size: 120px; font-weight: 900; line-height: .9;
  letter-spacing: -.04em; color: var(--white);
}
.jrn-year-big.word { font-size: 64px; line-height: 1.2; letter-spacing: -.02em; }
.jrn-year-big.tick { animation: yeartick .45s cubic-bezier(.16,1,.3,1); }
@keyframes yeartick {
  from { opacity: 0; transform: translateY(.28em); }
  to { opacity: 1; transform: none; }
}
.jrn-panel-rule { margin-top: 14px; width: 56px; height: 3px; background: var(--red); }

.marquee-process .marquee-track { animation-duration: 113s; }

@media (max-width: 1023px) {
  .who-top, .recog { grid-template-columns: 1fr; gap: 40px; }
  .lead-grid { grid-template-columns: 1fr; }
  .mvv-row { grid-template-columns: 40px 1fr; row-gap: 18px; }
  .mvv-copy { grid-column: 2; padding-bottom: 0; }
  .jrn-track { grid-template-columns: 1fr; gap: 0; }
  .jrn-panel { display: none; }
}

@media (max-width: 767px) {
  .opener { height: 56vh; min-height: 420px; }
  .opener-kicker { font-size: 13px; }
  .mvv-row { padding-block: 30px; }
  .aw-card img { height: 150px; }
  .aw-card figcaption { max-width: 212px; font-size: 12px; }
  .jrn-head { margin-bottom: 48px; }
  .jrn-side { padding-left: 44px; }
  .jm { grid-template-columns: 1fr; row-gap: 6px; padding-block: 15px; }
  .jm::before { left: -22px; top: 1em; width: 12px; }
  .jm.is-live::before { width: 16px; }
  .jm-body p { font-size: 15px; }
  .person-body { padding: 24px; }
}

@media (max-width: 559px) {
  .lead-head h2 { font-size: clamp(30px, 11.8vw, 40px); }
}