.delivery-film-label, .delivery-clock {
  font: 600 10px / 1.25 var(--font);
  letter-spacing: .13em;
}
.delivery-film { margin: 0; border: 1px solid var(--line); background: #171a1c; border-radius: 2px; overflow: hidden; }
.delivery-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.delivery-controls { display: flex; align-items: center; gap: 18px; padding: 4px 20px 4px 8px; min-height: 55px; background: #1a1a1c; }
.delivery-controls[hidden] { display: none; }
.delivery-toggle { display: grid; place-items: center; width: 46px; height: 44px; flex-shrink: 0; color: #fbf7f2; border-radius: 2px; }
.delivery-toggle:hover { background: #292727; }
.delivery-volume { display: grid; width: 44px; height: 44px; flex-shrink: 0; place-items: center; color: #fbf7f2; }
.delivery-expand { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; color: #fbf7f2; }
.delivery-expand svg { width: 19px; height: 19px; }
.delivery-expand .shrink-mark, .delivery-expand.is-expanded .expand-mark { display: none; }
.delivery-expand.is-expanded .shrink-mark { display: inline; }
.delivery-film:fullscreen { display: flex; flex-direction: column; border: 0; border-radius: 0; background: #080a09; }
.delivery-film:fullscreen video { flex: 1; min-height: 0; height: 0; width: 100%; object-fit: contain; }
.delivery-film:fullscreen .delivery-controls { flex-shrink: 0; }
.delivery-expand:hover, .delivery-volume:hover { background: #292727; }
.delivery-volume svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.delivery-volume[hidden], .delivery-volume .sound-on, .delivery-volume[aria-pressed="true"] .sound-off { display: none; }
.delivery-volume[aria-pressed="true"] .sound-on { display: inline; }
.delivery-toggle svg { width: 21px; height: 21px; }
.delivery-toggle .play-mark { fill: currentColor; stroke: none; }
.delivery-toggle .pause-mark, .delivery-toggle .replay-mark { display: none; fill: none; stroke: currentColor; stroke-width: 2; }
.delivery-toggle[data-state="playing"] .play-mark, .delivery-toggle[data-state="ended"] .play-mark { display: none; }
.delivery-toggle[data-state="playing"] .pause-mark, .delivery-toggle[data-state="ended"] .replay-mark { display: inline; }
.delivery-film-label { flex: 0 0 119px; font-size: 9px; white-space: nowrap; color: #d7d4d0; }
.delivery-clock { font-variant-numeric: tabular-nums; letter-spacing: .06em; font-size: 10px; white-space: nowrap; color: #d5d3d0; }
input.delivery-seek {
  --played: 0%;
  flex: 1;
  appearance: none;
  width: 100%;
  min-width: 30px;
  height: 44px;
  margin: 0;
  border: 0;
  cursor: pointer;
  background: linear-gradient(to right, var(--red) 0 var(--played), #555 var(--played) 100%) center / 100% 3px no-repeat;
}
.delivery-seek::-webkit-slider-thumb { appearance: none; border: 0; border-radius: 50%; width: 10px; height: 10px; background: #f8f4ed; }
.delivery-seek::-moz-range-thumb { border: 0; border-radius: 50%; width: 10px; height: 10px; background: #f8f4ed; }
.delivery-controls :focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

.delivery-heading { display: flex; justify-content: space-between; align-items: flex-end; column-gap: 33px; margin-bottom: clamp(22px,2.5vw,42px); }
.delivery-heading .eyebrow { margin-bottom: 17px; }
.delivery-heading h2 { font: 825 clamp(42px,6.1vw,104px)/.99 var(--display); letter-spacing: -.048em; }
.route-arrow { color: var(--red); font-weight: 480; }
.route-intro { text-align: right; color: #454548; font-size: clamp(13px,1.08vw,17px); line-height: 1.6; }
.route-intro strong { color: #4a494b; font-size: .82em; font-weight: 720; }
.delivery-film { --line: #39393b; --red: #f60410; color: #fffaf5; }
.delivery-cues { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(12px,1.65vw,26px); margin-top: 21px; }
.delivery-cues button { position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 8px 0 6px; border-top: 2px solid #b9b0a8; text-align: left; color: var(--ink); }
.delivery-cues button[aria-current=true] { border-color: var(--red-ink); }
.delivery-cues button:hover .cue-name { text-decoration: underline; text-underline-offset: 3px; }
.delivery-cues button:focus-visible { outline-color: var(--red-ink); }
.cue-preview { position: relative; display: block; width: 100%; margin-bottom: 8px; }
.cue-still { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 1px; background: #c8c2b8; }
.cue-time { position: absolute; inset: auto 6px 6px auto; display: inline-flex; align-items: center; gap: 5px; border-radius: 2px; padding: 2px 5px; color: white; background: #17171be8; font: 650 10px/1.45 var(--font); font-variant-numeric: tabular-nums; }
.cue-time::before { content: ''; width: 0; height: 0; border-block: 3px solid transparent; border-left: 4px solid currentColor; }
.cue-place { display: flex; align-items: baseline; gap: 9px; color: #555457; font: 700 9px/1.4 var(--font); letter-spacing: .085em; text-transform: uppercase; }
.cue-number { color: var(--red-ink); font-variant-numeric: tabular-nums; }
.cue-number::after { content: '/'; margin-left: 9px; opacity: .55; }
.cue-name { font: 640 clamp(12px,1.22vw,21px)/1.23 var(--display); letter-spacing: -.03em; }
.delivery-credits { margin-top: 21px; color: #555457; font: 500 12px/1.7 var(--font); }
.delivery-credits summary { width: max-content; cursor: pointer; padding: 5px 0; }
.delivery-credits p { margin: 9px 0 0; max-width: 82ch; }
.delivery-credits a { text-decoration: underline; text-underline-offset: 3px; }
@media(max-width: 760px) {
  .delivery-heading { align-items: flex-start; flex-direction: column; gap: 11px; }
  .delivery-heading h2 { font-size: clamp(34px,7.65vw,60px); }
  .route-intro { text-align: left; font-size: 13px; }
  .route-intro br { display: none; }
  .route-intro strong { display: inline-block; margin-left: .5em; }
  .delivery-cues { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 16px; }
  .cue-name { font-size: clamp(13px,2.4vw,18px); }
  .cue-preview { margin-bottom: 4px; }
  .cue-time { inset: auto 4px 4px auto; font-size: 9px; }
}
@media(max-width: 680px) {
  .delivery-film-label { display: none; }
  .delivery-film video { aspect-ratio: 4 / 3; }
  .delivery-controls { gap: 11px; padding: 2px 11px 2px 3px; min-height: 48px; }
}
@media(max-width: 540px) {
  .cue-make { display: none; }
  .delivery-heading .eyebrow { margin-bottom: 13px; }
  .delivery-heading h2 { font-size: clamp(35px,9.15vw,49px); }
  .delivery-cues { column-gap: 12px; }
  .cue-place { font-size: 8px; }
  .route-intro strong { display: block; margin-left: 0; }
}