.trailer-archive {
  --archive-accent: var(--actual);
  position: relative;
  z-index: 4;
  min-height: 100svh;
  padding: clamp(76px, 9vw, 118px) clamp(20px, 5vw, 70px) clamp(100px, 12vw, 160px);
  overflow: hidden;
  background:
    radial-gradient(ellipse 58% 58% at 68% 42%, color-mix(in srgb, var(--archive-accent) 9%, transparent), transparent 72%),
    linear-gradient(180deg, rgba(1, 4, 8, .7), rgba(2, 7, 12, .2) 42%, rgba(1, 4, 8, .62));
  transition: background .7s ease;
}

/* Let YouTube's own title/control chrome settle away during ambient playback. */
.trailer-archive.is-player-passive.has-visible-player .trailer-media iframe {
  pointer-events: none;
}

/* Playback is image-first: retire the orange receiver accents while it runs. */
.trailer-archive.has-projection {
  --archive-accent: #82cdfc !important;
}

/* The unfolded trailer drawer belongs to the official/actual ice-blue system. */
.trailer-archive:not(.is-collapsed) {
  --archive-accent: #82cdfc !important;
}

.trailer-archive:not(.is-collapsed) .trailer-wall .trailer-rail-item,
.trailer-archive:not(.is-collapsed) .trailer-wall .trailer-rail-item:hover,
.trailer-archive:not(.is-collapsed) .trailer-wall .trailer-rail-item:focus-visible,
.trailer-archive:not(.is-collapsed) .trailer-wall .trailer-rail-item[aria-current="true"] {
  --item-accent: #82cdfc !important;
  --wall-signal: #82cdfc;
}

.trailer-archive:not(.is-collapsed) .trailer-wall .trailer-rail-item[aria-current="true"] {
  box-shadow: inset 0 0 0 1px rgba(130, 205, 252, .2), 0 0 14px rgba(130, 205, 252, .06);
}

.trailer-archive.has-projection .trailer-archive-inner::before,
.trailer-archive.has-projection .trailer-archive-inner::after {
  opacity: 0;
  box-shadow: none;
  animation: none;
}

.trailer-archive.has-projection .trailer-live-dot {
  box-shadow: none;
  animation: none;
}

.trailer-archive.has-projection .trailer-wall .trailer-rail-item,
.trailer-archive.has-projection .trailer-wall .trailer-rail-item:hover,
.trailer-archive.has-projection .trailer-wall .trailer-rail-item:focus-visible,
.trailer-archive.has-projection .trailer-wall .trailer-rail-item[aria-current="true"] {
  --wall-signal: #82cdfc;
}

.trailer-archive.has-projection .trailer-wall .trailer-rail-item[aria-current="true"],
.trailer-archive.has-projection .trailer-wall .trailer-rail-item.is-now-playing {
  box-shadow: inset 0 0 0 1px rgba(130, 205, 252, .2), 0 0 14px rgba(130, 205, 252, .06);
}

.trailer-archive.has-projection .trailer-wall .trailer-rail-item.is-now-playing:not(.is-sending)::before {
  border-color: rgba(130, 205, 252, .58);
  color: #a9ddfb;
}

.trailer-archive-visible .timeline-legend {
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

.trailer-archive-inner {
  position: relative;
  width: min(840px, calc(100% - var(--axis-x) - 90px));
  margin-left: calc(var(--axis-x) + 54px);
}

.trailer-archive-inner::before {
  position: absolute;
  top: var(--trailer-connector-y, 24px);
  right: 100%;
  width: 54px;
  height: 1px;
  background: linear-gradient(90deg, rgba(130, 205, 252, .26), var(--archive-accent));
  box-shadow: 0 0 13px color-mix(in srgb, var(--archive-accent) 28%, transparent);
  content: "";
}

.trailer-archive-inner::after {
  position: absolute;
  top: calc(var(--trailer-connector-y, 24px) - 4px);
  right: calc(100% + 50px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--archive-accent);
  box-shadow: 0 0 15px 3px color-mix(in srgb, var(--archive-accent) 42%, transparent);
  content: "";
}

.trailer-archive-head,
.trailer-feature-meta,
.trailer-feature-actions,
.trailer-archive-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.trailer-archive-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--archive-accent);
  font: 700 10px/1 var(--mono);
  letter-spacing: .23em;
}

.trailer-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
  animation: trailer-signal-breathe 2.8s ease-in-out infinite;
}

.trailer-archive-head h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: clamp(25px, 3.2vw, 42px);
  font-weight: 350;
  letter-spacing: .065em;
}

.trailer-settings-open,
.trailer-icon-button,
.trailer-settings-dialog button,
.trailer-settings-dialog select,
.trailer-settings-dialog input,
.trailer-settings-dialog textarea {
  font: inherit;
}

.trailer-settings-open {
  flex: none;
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--archive-accent) 34%, transparent);
  background: color-mix(in srgb, var(--archive-accent) 7%, rgba(3, 8, 13, .84));
  padding: 9px 12px;
  color: color-mix(in srgb, var(--archive-accent) 82%, var(--text));
  cursor: pointer;
  font: 700 9px/1 var(--mono);
  letter-spacing: .16em;
}

.trailer-settings-open:hover,
.trailer-settings-open:focus-visible {
  border-color: var(--archive-accent);
  outline: none;
}

.trailer-feature {
  margin-top: 28px;
}

.trailer-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--archive-accent) 52%, transparent);
  background: #02060a;
  box-shadow:
    0 28px 72px rgba(0, 0, 0, .46),
    0 0 42px color-mix(in srgb, var(--archive-accent) 7%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, .035);
}

.trailer-media::before,
.trailer-media::after {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  content: "";
}

.trailer-media::before {
  inset: 0;
  background:
    linear-gradient(90deg, rgba(213, 242, 255, .1), transparent 9%, transparent 86%, rgba(0, 0, 0, .25)),
    linear-gradient(180deg, rgba(0, 0, 0, .08), transparent 22%, transparent 72%, rgba(0, 0, 0, .38));
  box-shadow: inset 18px 0 28px -26px var(--archive-accent);
}

.trailer-media::after {
  left: 0;
  right: 0;
  top: -18%;
  height: 18%;
  opacity: .62;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--archive-accent) 52%, transparent), transparent);
  filter: blur(6px);
  animation: trailer-scan 9s ease-in-out infinite;
}

.trailer-poster,
.trailer-player,
.trailer-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.trailer-player { z-index: 1; }

.trailer-poster {
  z-index: 3;
  display: block;
  object-fit: cover;
  opacity: 1;
  filter: saturate(.72) brightness(.68) contrast(1.08);
  transition: opacity .55s ease, filter .55s ease, transform 1.2s ease;
}

.trailer-media.is-playing .trailer-poster {
  opacity: 0;
  filter: saturate(1) brightness(1) contrast(1);
  transform: scale(1.012);
  pointer-events: none;
}

.trailer-media-topline {
  position: absolute;
  z-index: 6;
  top: 14px;
  right: 14px;
  left: 14px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  color: rgba(224, 245, 255, .76);
  font: 700 8px/1 var(--mono);
  letter-spacing: .19em;
  text-shadow: 0 1px 10px #000;
}

.trailer-media-state {
  color: var(--archive-accent);
}

.trailer-empty {
  position: absolute;
  z-index: 7;
  inset: 0;
  display: none;
  place-items: center;
  text-align: center;
  background: rgba(2, 7, 12, .86);
  color: var(--muted);
  font: 700 10px/1.8 var(--mono);
  letter-spacing: .2em;
}

.trailer-archive.is-empty .trailer-empty { display: grid; }
.trailer-archive.is-empty .trailer-poster,
.trailer-archive.is-empty .trailer-player { display: none; }

.trailer-feature-meta {
  align-items: flex-end;
  padding: 18px 1px 16px;
  border-bottom: 1px solid rgba(130, 205, 252, .13);
}

.trailer-title-block { min-width: 0; }

.trailer-title-block time {
  display: block;
  margin-bottom: 8px;
  color: var(--archive-accent);
  font: 650 9px/1 var(--mono);
  letter-spacing: .15em;
}

.trailer-title-block h3 {
  margin: 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--text) 95%, var(--archive-accent));
  font-size: clamp(15px, 2vw, 22px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .055em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trailer-feature-actions { flex: none; }

.trailer-icon-button {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(130, 205, 252, .18);
  background: rgba(4, 10, 16, .72);
  color: var(--archive-accent);
  cursor: pointer;
  font: 500 13px/1 var(--mono);
}

.trailer-icon-button:hover:not(:disabled),
.trailer-icon-button:focus-visible {
  border-color: var(--archive-accent);
  background: color-mix(in srgb, var(--archive-accent) 9%, rgba(4, 10, 16, .82));
  outline: none;
}

.trailer-icon-button:disabled { opacity: .25; cursor: default; }

.trailer-youtube-link {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--archive-accent) 44%, transparent);
  padding: 8px 12px;
  color: color-mix(in srgb, var(--archive-accent) 88%, #fff);
  text-decoration: none;
  font: 700 9px/1 var(--mono);
  letter-spacing: .14em;
  white-space: nowrap;
}

.trailer-youtube-link:hover,
.trailer-youtube-link:focus-visible {
  border-color: var(--archive-accent);
  background: color-mix(in srgb, var(--archive-accent) 10%, transparent);
  outline: none;
}

.trailer-archive-rail-head {
  margin-top: 18px;
  color: var(--muted);
  font: 650 8px/1 var(--mono);
  letter-spacing: .18em;
}

.trailer-archive-rail {
  display: grid;
  grid-auto-columns: minmax(128px, 1fr);
  grid-auto-flow: column;
  gap: 8px;
  margin-top: 10px;
  padding: 0 0 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--archive-accent) 28%, transparent) transparent;
}

.trailer-rail-item {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-rows: auto 1fr;
  gap: 8px;
  padding: 0 0 9px;
  overflow: hidden;
  border: 1px solid rgba(130, 205, 252, .12);
  background: rgba(3, 9, 15, .68);
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}

.trailer-rail-item:hover,
.trailer-rail-item:focus-visible,
.trailer-rail-item[aria-current="true"] {
  border-color: color-mix(in srgb, var(--item-accent, var(--archive-accent)) 62%, transparent);
  color: var(--text);
  outline: none;
}

.trailer-rail-item[aria-current="true"] {
  transform: translateY(-3px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .22);
}

.trailer-rail-item::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--item-accent, var(--archive-accent));
  opacity: .2;
  content: "";
}

.trailer-rail-item[aria-current="true"]::after { opacity: 1; }

.trailer-rail-item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: .52;
  filter: saturate(.45) contrast(1.08);
  transition: opacity .25s ease, filter .25s ease;
}

.trailer-rail-item:hover img,
.trailer-rail-item[aria-current="true"] img {
  opacity: .9;
  filter: saturate(.88) contrast(1.04);
}

.trailer-rail-item span {
  display: block;
  min-width: 0;
  padding: 0 9px;
  overflow: hidden;
  font: 650 8px/1.45 var(--mono);
  letter-spacing: .08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trailer-settings-dialog {
  width: min(860px, calc(100vw - 24px));
  max-height: calc(100svh - 24px);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(130, 205, 252, .28);
  background: #050b12;
  color: var(--text);
  box-shadow: 0 34px 110px rgba(0, 0, 0, .7);
}

.trailer-settings-dialog::backdrop {
  background: rgba(1, 4, 8, .82);
  backdrop-filter: blur(12px);
}

.trailer-settings-form {
  display: grid;
  max-height: calc(100svh - 24px);
  grid-template-rows: auto auto auto minmax(120px, 1fr) auto;
}

.trailer-settings-head,
.trailer-settings-add,
.trailer-settings-options,
.trailer-settings-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.trailer-settings-head {
  padding: 22px 24px;
  border-bottom: 1px solid rgba(130, 205, 252, .13);
}

.trailer-settings-head p {
  margin: 0 0 7px;
  color: var(--actual);
  font: 700 9px/1 var(--mono);
  letter-spacing: .2em;
}

.trailer-settings-head h2 { margin: 0; font-size: 22px; font-weight: 450; letter-spacing: .07em; }

.trailer-settings-close {
  width: 42px;
  height: 42px;
  flex: none;
  border: 1px solid rgba(130, 205, 252, .18);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
}

.trailer-settings-add {
  align-items: stretch;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(130, 205, 252, .1);
}

.trailer-settings-add label { display: grid; flex: 1; gap: 7px; color: var(--muted); font-size: 10px; }

.trailer-settings-add textarea {
  width: 100%;
  min-height: 66px;
  resize: vertical;
  border: 1px solid rgba(130, 205, 252, .17);
  background: rgba(10, 20, 31, .88);
  padding: 10px 12px;
  color: var(--text);
  line-height: 1.6;
}

.trailer-url-error {
  color: #ff9b86;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: .025em;
}

.trailer-settings-add textarea[aria-invalid="true"] {
  border-color: rgba(255, 155, 134, .72);
  box-shadow: 0 0 0 1px rgba(255, 155, 134, .12);
}

.trailer-settings-add button {
  align-self: end;
  min-height: 42px;
  border: 1px solid var(--actual);
  background: var(--actual-soft);
  padding: 9px 15px;
  color: var(--actual);
  cursor: pointer;
  font: 700 10px/1 var(--mono);
  letter-spacing: .11em;
}

.trailer-settings-list {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 14px 24px;
  overflow-y: auto;
}

.trailer-settings-row {
  display: grid;
  grid-template-columns: 88px minmax(180px, 1fr) 132px auto;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid rgba(130, 205, 252, .11);
  background: rgba(9, 17, 26, .74);
}

.trailer-settings-row.is-newly-added {
  scroll-margin-block: 96px;
  border-color: rgba(130, 205, 252, .68);
  box-shadow: inset 3px 0 0 var(--actual), 0 0 22px rgba(130, 205, 252, .12);
  animation: trailerSettingsAdded 2.4s ease-out both;
}

@keyframes trailerSettingsAdded {
  0%, 32% {
    border-color: rgba(130, 205, 252, .9);
    background: rgba(130, 205, 252, .2);
    box-shadow: inset 4px 0 0 var(--actual), 0 0 30px rgba(130, 205, 252, .2);
  }
  100% { background: rgba(9, 17, 26, .74); }
}

.trailer-settings-row img { width: 88px; aspect-ratio: 16 / 9; object-fit: cover; opacity: .76; }

.trailer-settings-row label { display: grid; min-width: 0; gap: 5px; color: var(--muted); font-size: 8px; letter-spacing: .08em; }

.trailer-settings-row input,
.trailer-settings-options select {
  min-width: 0;
  border: 1px solid rgba(130, 205, 252, .16);
  background: #0a141f;
  padding: 8px 9px;
  color: var(--text);
}

.trailer-settings-row-actions { display: flex; gap: 4px; }

.trailer-settings-row-actions button {
  width: 31px;
  height: 31px;
  border: 1px solid rgba(130, 205, 252, .14);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: 600 11px/1 var(--mono);
}

.trailer-settings-row-actions button:hover,
.trailer-settings-row-actions button:focus-visible { border-color: var(--actual); color: var(--actual); outline: none; }

.trailer-settings-empty { padding: 34px 10px; text-align: center; color: var(--muted); font-size: 11px; }

.trailer-settings-footer {
  padding: 17px 24px 20px;
  border-top: 1px solid rgba(130, 205, 252, .13);
  background: rgba(3, 8, 13, .92);
}

.trailer-settings-options { justify-content: flex-start; flex-wrap: wrap; }
.trailer-settings-options label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.trailer-settings-options label:first-child { margin-right: auto; }
.trailer-settings-options input[type="checkbox"] { accent-color: var(--actual); }
.trailer-settings-options select { min-height: 36px; }

.trailer-settings-actions { margin-top: 16px; }
.trailer-settings-note { margin: 0; color: #526374; font-size: 9px; line-height: 1.6; }

.trailer-settings-save {
  min-height: 42px;
  border: 1px solid #f0f7fb;
  background: #e5edf2;
  padding: 10px 18px;
  color: #06131c;
  cursor: pointer;
  font: 800 10px/1 var(--sans);
  font-weight: 800 !important;
  letter-spacing: .04em;
  text-shadow: none;
}

.trailer-settings-save .trailer-ja {
  font-weight: 800;
}

html[lang="ja"] .trailer-en,
html[lang="en"] .trailer-ja { display: none !important; }

@keyframes trailer-signal-breathe { 50% { opacity: .34; box-shadow: 0 0 5px currentColor; } }
@keyframes trailer-scan { 0%, 18% { transform: translateY(0); opacity: 0; } 25% { opacity: .62; } 55% { opacity: .34; } 70%, 100% { transform: translateY(690%); opacity: 0; } }

/* Hero placement: occupy the intentionally open surface above the timelines. */
.crossroad-hero > .trailer-archive {
  position: absolute;
  z-index: 9;
  top: clamp(42px, 4svh, 60px);
  right: auto;
  left: calc(var(--axis-x) + 54px);
  width: min(660px, calc(100% - var(--axis-x) - 170px));
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: none;
}

.crossroad-hero > .trailer-archive .trailer-archive-inner {
  width: 100%;
  max-width: none;
  margin-left: 0;
}

.crossroad-hero > .trailer-archive .trailer-archive-head h2 {
  margin-top: 8px;
  font-size: clamp(22px, 2.2vw, 34px);
}

.crossroad-hero > .trailer-archive .trailer-feature { margin-top: 16px; }
.crossroad-hero > .trailer-archive .trailer-feature-meta { padding-block: 11px; }
.crossroad-hero > .trailer-archive .trailer-archive-rail-head { margin-top: 11px; }
.crossroad-hero > .trailer-archive .trailer-archive-rail { margin-top: 7px; }
.crossroad-hero > .trailer-archive .trailer-rail-item { grid-template-rows: minmax(0, auto) 1fr; }
.crossroad-hero > .trailer-archive .trailer-rail-item img { aspect-ratio: 2.2 / 1; }

@media (min-width: 761px) and (max-height: 900px) {
  .crossroad-hero > .trailer-archive {
    top: 38px;
    right: auto;
    width: min(390px, calc(100% - var(--axis-x) - 126px));
  }

  .crossroad-hero > .trailer-archive .trailer-archive-kicker { font-size: 8px; }
  .crossroad-hero > .trailer-archive .trailer-archive-head h2 { font-size: 22px; }
  .crossroad-hero > .trailer-archive .trailer-feature { position: relative; margin-top: 10px; }
  .crossroad-hero > .trailer-archive .trailer-feature-meta {
    position: absolute;
    z-index: 8;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 28px 10px 9px;
    border-bottom: 0;
    background: linear-gradient(transparent, rgba(2, 6, 10, .94));
  }
  .crossroad-hero > .trailer-archive .trailer-title-block time { margin-bottom: 4px; }
  .crossroad-hero > .trailer-archive .trailer-title-block h3 { font-size: 14px; }
  .crossroad-hero > .trailer-archive .trailer-archive-rail-head,
  .crossroad-hero > .trailer-archive .trailer-archive-rail { display: none; }
}

@media (max-width: 760px) {
  .trailer-archive { min-height: auto; padding: 80px 14px 110px; }
  .trailer-archive-inner { width: calc(100% - var(--axis-x) - 46px); margin-left: calc(var(--axis-x) + 32px); }
  .trailer-archive-inner::before { width: 32px; }
  .trailer-archive-inner::after { right: calc(100% + 28px); }
  .trailer-archive-head { align-items: flex-start; }
  .trailer-archive-head h2 { font-size: clamp(22px, 6vw, 32px); }
  .trailer-settings-open { padding-inline: 9px; }
  .trailer-feature-meta { align-items: stretch; flex-direction: column; }
  .trailer-feature-actions { justify-content: flex-start; }
  .trailer-title-block h3 { font-size: 14px; white-space: normal; }
  .trailer-archive-rail { grid-auto-columns: minmax(116px, 42%); }
  .trailer-settings-dialog { width: calc(100vw - 12px); max-height: calc(100svh - 12px); }
  .trailer-settings-form { max-height: calc(100svh - 12px); }
  .trailer-settings-head, .trailer-settings-add, .trailer-settings-footer { padding-inline: 14px; }
  .trailer-settings-add { flex-direction: column; }
  .trailer-settings-add button { align-self: stretch; }
  .trailer-settings-list { padding-inline: 14px; }
  .trailer-settings-row { grid-template-columns: 70px minmax(0, 1fr) auto; }
  .trailer-settings-row img { width: 70px; }
  .trailer-settings-row .trailer-date-field { grid-column: 2; }
  .trailer-settings-row-actions { grid-column: 3; grid-row: 1 / 3; flex-direction: column; }
  .trailer-settings-actions { align-items: stretch; flex-direction: column; }
  .trailer-settings-save { width: 100%; }

  .crossroad-hero > .trailer-archive {
    top: max(78px, 8svh);
    right: 12px;
    left: calc(var(--axis-x) + 24px);
    width: auto;
    padding: 0;
  }

  .crossroad-hero > .trailer-archive .trailer-archive-inner {
    width: 100%;
    margin-left: 0;
  }

  .crossroad-hero > .trailer-archive .trailer-archive-inner::before { width: 24px; }
  .crossroad-hero > .trailer-archive .trailer-archive-inner::after { right: calc(100% + 20px); }
  .crossroad-hero > .trailer-archive .trailer-archive-kicker { font-size: 7px; letter-spacing: .15em; }
  .crossroad-hero > .trailer-archive .trailer-archive-head h2 { font-size: clamp(17px, 5vw, 23px); }
  .crossroad-hero > .trailer-archive .trailer-settings-open { min-height: 32px; padding: 7px 8px; }
  .crossroad-hero > .trailer-archive .trailer-feature { margin-top: 10px; }
  .crossroad-hero > .trailer-archive .trailer-media-topline { top: 8px; right: 8px; left: 8px; font-size: 6px; }
  .crossroad-hero > .trailer-archive .trailer-feature-meta { gap: 8px; padding-block: 8px; }
  .crossroad-hero > .trailer-archive .trailer-title-block time { margin-bottom: 4px; font-size: 7px; }
  .crossroad-hero > .trailer-archive .trailer-title-block h3 { font-size: 11px; line-height: 1.35; }
  .crossroad-hero > .trailer-archive .trailer-icon-button { width: 30px; height: 30px; }
  .crossroad-hero > .trailer-archive .trailer-youtube-link { min-height: 30px; padding: 7px 8px; font-size: 7px; }
  .crossroad-hero > .trailer-archive .trailer-archive-rail-head,
  .crossroad-hero > .trailer-archive .trailer-archive-rail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .trailer-live-dot,
  .trailer-media::after { animation: none; }
  .trailer-archive,
  .trailer-poster,
  .trailer-rail-item { transition: none; }
}

/* Transmission Wall — the archive is the hero, not a single oversized player. */
.crossroad-hero > .trailer-archive {
  top: clamp(54px, 5svh, 72px);
  width: min(660px, calc(100% - var(--axis-x) - 150px));
}

.crossroad-hero > .trailer-archive .trailer-archive-head h2 {
  margin-top: 7px;
  font-size: clamp(20px, 2vw, 29px);
}

.crossroad-hero > .trailer-archive .trailer-settings-open {
  min-height: 34px;
  padding: 8px 10px;
}

.crossroad-hero > .trailer-archive .trailer-archive-rail-head {
  margin: 15px 0 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(130, 205, 252, .12);
}

.trailer-wall {
  display: grid;
  grid-template-rows: repeat(var(--wall-rows, 1), minmax(0, 1fr));
  grid-auto-columns: calc((100% - (var(--wall-columns, 4) - 1) * 8px) / var(--wall-columns, 4));
  grid-auto-flow: column;
  gap: 8px;
  padding: 3px 1px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--archive-accent) 30%, transparent) transparent;
}

.trailer-wall .trailer-archive-rail { display: contents; }

.trailer-wall .trailer-feature,
.trailer-wall .trailer-rail-item {
  grid-row: var(--wall-row, auto);
  grid-column: var(--wall-column, auto);
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
  border: 1px solid rgba(130, 205, 252, .16);
  background: linear-gradient(150deg, rgba(9, 20, 31, .9), rgba(2, 7, 12, .96));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
}

.trailer-wall .trailer-feature {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--archive-accent) 78%, transparent);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, .32),
    0 0 22px color-mix(in srgb, var(--archive-accent) 10%, transparent);
}

.trailer-wall .trailer-feature::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--archive-accent);
  box-shadow: 0 0 10px var(--archive-accent);
  content: "";
}

.trailer-wall .trailer-media {
  aspect-ratio: 16 / 9;
  border: 0;
  box-shadow: none;
}

.trailer-wall .trailer-media-topline {
  top: 8px;
  right: 8px;
  left: 8px;
  font-size: 6px;
  letter-spacing: .14em;
}

.trailer-wall .trailer-feature-meta {
  position: relative;
  inset: auto;
  display: block;
  min-height: 52px;
  padding: 8px 8px 10px;
  border: 0;
  background: transparent;
}

.trailer-wall .trailer-title-block time,
.trailer-wall .trailer-rail-date {
  display: block;
  margin: 0 0 5px;
  color: color-mix(in srgb, var(--archive-accent) 82%, var(--text));
  font: 700 7px/1 var(--mono);
  letter-spacing: .11em;
}

.trailer-wall .trailer-title-block h3,
.trailer-wall .trailer-rail-title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font: 650 9px/1.35 var(--mono);
  letter-spacing: .035em;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.trailer-wall .trailer-feature-actions {
  position: absolute;
  z-index: 9;
  top: -32px;
  right: 6px;
  display: block;
}

.trailer-wall .trailer-icon-button { display: none; }

.trailer-wall .trailer-youtube-link {
  min-height: 25px;
  border-color: color-mix(in srgb, var(--archive-accent) 56%, transparent);
  background: rgba(2, 7, 12, .82);
  padding: 6px 8px;
  font-size: 6px;
  letter-spacing: .1em;
  backdrop-filter: blur(8px);
}

.trailer-wall .trailer-rail-item {
  position: relative;
  display: grid;
  grid-template: auto auto 1fr / 34px 1fr;
  gap: 0;
  padding: 0 0 9px;
  overflow: hidden;
  text-align: left;
  transform: none;
}

.trailer-wall .trailer-rail-item:hover,
.trailer-wall .trailer-rail-item:focus-visible {
  border-color: color-mix(in srgb, var(--item-accent, var(--archive-accent)) 66%, transparent);
  background: linear-gradient(150deg, color-mix(in srgb, var(--item-accent, var(--archive-accent)) 10%, rgba(9, 20, 31, .92)), rgba(2, 7, 12, .98));
  transform: translateY(-2px);
}

.trailer-wall .trailer-rail-item img {
  grid-column: 1 / -1;
  width: 100%;
  aspect-ratio: 16 / 9;
  opacity: .68;
  filter: saturate(.5) contrast(1.08) brightness(.76);
}

.trailer-wall .trailer-rail-item:hover img,
.trailer-wall .trailer-rail-item:focus-visible img {
  opacity: .95;
  filter: saturate(.9) contrast(1.04) brightness(.9);
}

.trailer-wall .trailer-rail-item > span,
.trailer-wall .trailer-rail-item > time { padding: 0; }

.trailer-wall .trailer-rail-index {
  grid-row: 2 / 4;
  align-self: stretch;
  padding: 9px 6px 0 8px !important;
  color: var(--item-accent, var(--archive-accent));
  font: 800 8px/1 var(--mono) !important;
  letter-spacing: .08em !important;
}

.trailer-wall .trailer-rail-date {
  grid-column: 2;
  margin: 0;
  padding: 8px 7px 4px 0 !important;
  color: var(--muted);
  font-size: 6px;
}

.trailer-wall .trailer-rail-title {
  grid-column: 2;
  padding-right: 7px !important;
}

.trailer-wall .trailer-rail-item::after { opacity: .35; }

@media (min-width: 761px) and (max-height: 900px) {
  .crossroad-hero > .trailer-archive {
    top: 32px;
    width: min(660px, calc(100% - var(--axis-x) - 130px));
  }

  .crossroad-hero > .trailer-archive .trailer-archive-head h2 { font-size: 21px; }
  .crossroad-hero > .trailer-archive .trailer-archive-rail-head { display: flex; margin-top: 8px; }
  .trailer-wall { grid-template-rows: minmax(0, 1fr); grid-auto-columns: calc((100% - 24px) / 4); }
  .trailer-wall .trailer-feature,
  .trailer-wall .trailer-rail-item { grid-row: 1; grid-column: auto; }
  .crossroad-hero > .trailer-archive .trailer-wall .trailer-archive-rail { display: contents; }
  .trailer-wall .trailer-feature-meta {
    position: relative;
    inset: auto;
    min-height: 42px;
    padding: 7px 8px 8px;
    background: transparent;
  }
  .trailer-wall .trailer-title-block h3,
  .trailer-wall .trailer-rail-title { font-size: 8px; }
}

@media (max-width: 760px) {
  .crossroad-hero > .trailer-archive {
    top: max(74px, 8svh);
    right: 10px;
    left: calc(var(--axis-x) + 20px);
    width: auto;
  }

  .crossroad-hero > .trailer-archive .trailer-archive-head h2 { font-size: clamp(16px, 4.7vw, 21px); }
  .crossroad-hero > .trailer-archive .trailer-archive-kicker { font-size: 6px; }
  .crossroad-hero > .trailer-archive .trailer-archive-rail-head { display: flex; margin-top: 10px; font-size: 6px; }
  .trailer-wall { grid-template-rows: minmax(0, 1fr); grid-auto-columns: calc((100% - 8px) / 2); }
  .trailer-wall .trailer-feature,
  .trailer-wall .trailer-rail-item { grid-row: 1; grid-column: auto; }
  .crossroad-hero > .trailer-archive .trailer-wall .trailer-archive-rail { display: contents; }
  .trailer-wall .trailer-feature-meta {
    position: relative;
    inset: auto;
    display: block;
    min-height: 47px;
    padding: 7px;
    background: transparent;
  }
  .trailer-wall .trailer-title-block h3,
  .trailer-wall .trailer-rail-title { font-size: 8px; }
  .trailer-wall .trailer-feature-actions { top: -29px; }
}

/* Stable receiver layout: the player never replaces or reorders a list card. */
.trailer-wall {
  display: block;
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
}

.trailer-wall .trailer-feature {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(190px, 232px) minmax(0, 1fr);
  grid-template-rows: 1fr;
  height: 132px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--archive-accent) 42%, rgba(130, 205, 252, .16));
  background: linear-gradient(115deg, rgba(4, 11, 18, .96), rgba(7, 17, 26, .84));
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
}

.trailer-wall .trailer-feature::before {
  position: absolute;
  z-index: 10;
  top: 9px;
  left: 9px;
  padding: 4px 6px;
  border: 1px solid color-mix(in srgb, var(--archive-accent) 48%, transparent);
  background: rgba(2, 7, 12, .72);
  color: var(--archive-accent);
  content: "LIVE RECEIVER";
  font: 750 6px/1 var(--mono);
  letter-spacing: .15em;
  pointer-events: none;
}

.trailer-wall .trailer-media {
  width: 100%;
  height: 100%;
  min-height: 130px;
  aspect-ratio: 16 / 9;
}

.trailer-wall .trailer-feature-meta {
  position: relative;
  inset: auto;
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding: 15px 16px;
  border-left: 1px solid rgba(130, 205, 252, .12);
  background: linear-gradient(90deg, rgba(130, 205, 252, .035), transparent);
}

.trailer-wall .trailer-title-block time { margin-bottom: 8px; }

.trailer-wall .trailer-title-block h3 {
  font: 600 12px/1.45 var(--mono);
  -webkit-line-clamp: 3;
}

.trailer-wall .trailer-feature-actions {
  position: static;
  display: flex;
  margin-top: 13px;
  gap: 5px;
}

.trailer-wall .trailer-icon-button {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  font-size: 9px;
}

.trailer-wall .trailer-youtube-link {
  min-height: 28px;
  padding: 7px 9px;
  font-size: 7px;
}

.crossroad-hero > .trailer-archive .trailer-wall .trailer-archive-rail {
  display: grid;
  height: calc(var(--wall-rows, 1) * 146px + (var(--wall-rows, 1) - 1) * 8px);
  grid-template-rows: repeat(var(--wall-rows, 1), 146px);
  grid-auto-columns: calc((100% - (var(--wall-columns, 4) - 1) * 8px) / var(--wall-columns, 4));
  grid-auto-flow: column;
  gap: 8px;
  margin-top: 9px;
  padding: 0 1px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.trailer-wall .trailer-rail-item {
  height: 146px;
  scroll-snap-align: start;
  transform: none;
}

.trailer-wall .trailer-rail-item[aria-current="true"] {
  border-color: var(--item-accent, var(--archive-accent));
  background: linear-gradient(150deg, color-mix(in srgb, var(--item-accent, var(--archive-accent)) 9%, rgba(9, 20, 31, .94)), rgba(2, 7, 12, .98));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--item-accent, var(--archive-accent)) 20%, transparent), 0 0 18px color-mix(in srgb, var(--item-accent, var(--archive-accent)) 8%, transparent);
  transform: none;
}

.trailer-wall .trailer-rail-item[aria-current="true"] img {
  opacity: .92;
  filter: saturate(.82) contrast(1.05) brightness(.86);
}

@media (min-width: 761px) and (max-height: 900px) {
  .trailer-wall .trailer-feature { height: 102px; grid-template-columns: 180px minmax(0, 1fr); }
  .trailer-wall .trailer-media { min-height: 101px; }
  .trailer-wall .trailer-feature-meta { min-height: 0; padding: 10px 12px; }
  .trailer-wall .trailer-title-block time { margin-bottom: 5px; }
  .trailer-wall .trailer-title-block h3 { font-size: 10px; -webkit-line-clamp: 2; }
  .trailer-wall .trailer-feature-actions { margin-top: 8px; }
  .crossroad-hero > .trailer-archive .trailer-wall .trailer-archive-rail {
    display: grid;
    height: 119px;
    grid-template-rows: 111px;
    grid-auto-columns: calc((100% - 24px) / 4);
  }
  .trailer-wall .trailer-rail-item { height: 111px; }
  .trailer-wall .trailer-rail-item img { aspect-ratio: 2.15 / 1; }
  .trailer-wall .trailer-rail-date { padding-top: 5px !important; }
  .trailer-wall .trailer-rail-title { -webkit-line-clamp: 1; }
}

@media (max-width: 760px) {
  .trailer-wall .trailer-feature {
    height: 88px;
    grid-template-columns: minmax(108px, 42%) minmax(0, 1fr);
    grid-template-rows: 1fr;
  }
  .trailer-wall .trailer-media { min-height: 86px; }
  .trailer-wall .trailer-feature-meta { min-height: 0; padding: 8px; }
  .trailer-wall .trailer-title-block time { margin-bottom: 4px; }
  .trailer-wall .trailer-title-block h3 { font-size: 8px; -webkit-line-clamp: 2; }
  .trailer-wall .trailer-feature-actions { margin-top: 6px; }
  .trailer-wall .trailer-icon-button { width: 24px; height: 24px; }
  .trailer-wall .trailer-youtube-link { min-height: 24px; padding: 6px; font-size: 6px; }
  .crossroad-hero > .trailer-archive .trailer-wall .trailer-archive-rail {
    display: grid;
    height: 112px;
    grid-template-rows: 104px;
    grid-auto-columns: calc((100% - 8px) / 2);
  }
  .trailer-wall .trailer-rail-item { height: 104px; }
  .trailer-wall .trailer-rail-item img { aspect-ratio: 2.05 / 1; }
  .trailer-wall .trailer-rail-date { padding-top: 5px !important; }
  .trailer-wall .trailer-rail-title { font-size: 7px; -webkit-line-clamp: 1; }
}

/* Projection interaction: calm on arrival, deliberate after selecting a signal. */
.trailer-standby {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 18px;
  text-align: center;
  background:
    linear-gradient(rgba(5, 15, 23, .9), rgba(1, 7, 11, .97)),
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(130, 205, 252, .035) 4px 5px);
  color: rgba(169, 199, 216, .48);
  transition: opacity .28s ease, visibility .28s ease;
}

.trailer-standby span {
  font: 700 6px/1 var(--mono);
  letter-spacing: .2em;
}

.trailer-standby strong {
  color: rgba(211, 231, 242, .76);
  font: 650 9px/1.25 var(--mono);
  letter-spacing: .13em;
}

.trailer-archive.has-projection .trailer-standby {
  opacity: 0;
  visibility: hidden;
}

.trailer-archive:not(.has-projection) .trailer-poster { opacity: 0; }

.trailer-archive:not(.has-projection) .trailer-feature-meta .trailer-title-block,
.trailer-archive:not(.has-projection) .trailer-feature-meta .trailer-feature-actions {
  opacity: 0;
  visibility: hidden;
}

.trailer-feature-meta::before {
  position: absolute;
  left: 16px;
  color: rgba(183, 209, 223, .5);
  content: "TAP A TRANSMISSION TO PROJECT";
  font: 700 7px/1.5 var(--mono);
  letter-spacing: .14em;
  transition: opacity .2s ease;
}

.trailer-archive.has-projection .trailer-feature-meta::before { opacity: 0; }

.trailer-archive.is-projecting .trailer-media {
  animation: trailer-project-screen .7s cubic-bezier(.22, .8, .28, 1);
}

.trailer-wall .trailer-rail-item,
.trailer-wall .trailer-rail-item:hover,
.trailer-wall .trailer-rail-item:focus-visible,
.trailer-wall .trailer-rail-item[aria-current="true"] {
  --wall-signal: #ff6a4d;
  border-color: rgba(130, 205, 252, .18);
  background: linear-gradient(150deg, rgba(9, 20, 31, .92), rgba(2, 7, 12, .98));
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
}

.trailer-wall .trailer-rail-item:hover,
.trailer-wall .trailer-rail-item:focus-visible,
.trailer-wall .trailer-rail-item[aria-current="true"] {
  border-color: var(--wall-signal);
}

.trailer-wall .trailer-rail-item[aria-current="true"] {
  box-shadow: inset 0 0 0 1px rgba(255, 106, 77, .16), 0 0 16px rgba(255, 106, 77, .08);
}

.trailer-wall .trailer-rail-item::after { background: var(--wall-signal); }

.trailer-wall .trailer-rail-item {
  grid-template: auto 30px / 38px 1fr;
}

.trailer-wall .trailer-rail-index {
  grid-row: 2;
  grid-column: 1;
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: 0 5px 0 9px !important;
  color: var(--wall-signal) !important;
  font-size: 8px !important;
}

.trailer-wall .trailer-rail-date {
  grid-row: 2;
  grid-column: 2;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 8px 0 0 !important;
  color: #dce8ef;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  white-space: nowrap;
}

.trailer-wall .trailer-rail-title {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 38px 10px 11px !important;
  background: linear-gradient(transparent 18%, rgba(2, 7, 12, .96) 84%);
  color: #f2f6f8;
  font: 650 9px/1.45 var(--mono);
  letter-spacing: .035em;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
  -webkit-line-clamp: unset;
}

.trailer-wall .trailer-rail-item:hover .trailer-rail-title,
.trailer-wall .trailer-rail-item:focus-visible .trailer-rail-title {
  opacity: 1;
  transform: translateY(0);
}

.trailer-wall .trailer-rail-item.is-sending::before {
  position: absolute;
  z-index: 7;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 106, 77, .28), rgba(212, 239, 252, .5), transparent);
  content: "";
  transform: translateX(-115%);
  animation: trailer-send-signal .7s ease-out;
  pointer-events: none;
}

.crossroad-hero > .trailer-archive .trailer-wall .trailer-archive-rail {
  height: calc(var(--wall-rows, 1) * 120px + (var(--wall-rows, 1) - 1) * 8px);
  grid-template-rows: repeat(var(--wall-rows, 1), 120px);
}

.trailer-wall .trailer-rail-item { height: 120px; }

@keyframes trailer-send-signal {
  0% { opacity: 0; transform: translateX(-115%); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateX(115%); }
}

@keyframes trailer-project-screen {
  0% { filter: brightness(.55) saturate(.3); box-shadow: inset 0 0 0 1px rgba(130, 205, 252, .66), 0 0 0 rgba(130, 205, 252, 0); }
  34% { filter: brightness(1.38) saturate(.7); box-shadow: inset 0 0 0 1px #82cdfc, 0 0 28px rgba(130, 205, 252, .2); }
  100% { filter: brightness(1) saturate(1); box-shadow: inset 0 0 0 1px rgba(130, 205, 252, .26), 0 0 0 rgba(130, 205, 252, 0); }
}

@media (min-width: 761px) and (max-height: 900px) {
  .crossroad-hero > .trailer-archive .trailer-wall .trailer-archive-rail {
    height: 106px;
    grid-template-rows: 98px;
  }
  .trailer-wall .trailer-rail-item { height: 98px; }
  .trailer-wall .trailer-rail-item { grid-template-rows: auto 26px; }
  .trailer-wall .trailer-rail-date { font-size: 10px; }
}

@media (max-width: 760px) {
  .trailer-feature-meta::before { left: 8px; font-size: 6px; }
  .crossroad-hero > .trailer-archive .trailer-wall .trailer-archive-rail {
    height: 92px;
    grid-template-rows: 84px;
  }
  .trailer-wall .trailer-rail-item { height: 84px; grid-template-rows: auto 24px; }
  .trailer-wall .trailer-rail-date { font-size: 9px; letter-spacing: .02em; }
  .trailer-wall .trailer-rail-title { display: none; }
}

@media (hover: none) {
  .trailer-wall .trailer-rail-title { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .trailer-archive.is-projecting .trailer-media,
  .trailer-wall .trailer-rail-item.is-sending::before { animation: none; }
}

/* The receiver screen itself is always a true 16:9 surface. */
.trailer-wall .trailer-feature {
  height: 168.75px;
  grid-template-columns: 300px minmax(0, 1fr);
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.trailer-wall .trailer-feature::after { display: none; }

.trailer-wall .trailer-media {
  box-sizing: border-box;
  width: 300px;
  height: 168.75px;
  min-height: 0;
  aspect-ratio: 16 / 9;
  border: 1px solid color-mix(in srgb, var(--archive-accent) 64%, transparent);
  background: #02070b;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .32), 0 0 20px rgba(255, 106, 77, .07);
}

.trailer-wall .trailer-feature-meta {
  height: 168.75px;
  padding: 17px 18px;
  border: 0;
  background: linear-gradient(90deg, rgba(130, 205, 252, .035), transparent 70%);
}

@media (min-width: 761px) and (max-height: 900px) {
  .trailer-wall .trailer-feature {
    height: 146.25px;
    grid-template-columns: 260px minmax(0, 1fr);
  }
  .trailer-wall .trailer-media { width: 260px; height: 146.25px; min-height: 0; }
  .trailer-wall .trailer-feature-meta { height: 146.25px; padding: 14px 16px; }
}

@media (max-width: 760px) {
  .trailer-wall .trailer-feature {
    height: auto;
    grid-template-columns: minmax(110px, 46%) minmax(0, 1fr);
  }
  .trailer-wall .trailer-media {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  .trailer-wall .trailer-feature-meta { height: auto; min-height: 0; padding: 8px; }
}

/* Keep the active transmission obvious without dimming its release date. */
.trailer-wall .trailer-rail-item.is-now-playing img {
  opacity: .26;
  filter: brightness(.42) saturate(.35);
  transition: opacity .2s ease, filter .2s ease;
}

.trailer-wall .trailer-rail-item.is-now-playing:not(.is-sending)::before {
  position: absolute;
  z-index: 7;
  top: calc((100% - 27px) / 2);
  left: 50%;
  width: max-content;
  padding: 4px 7px 3px;
  border: 1px solid rgba(255, 106, 77, .72);
  background: rgba(2, 7, 11, .84);
  color: #ff765c;
  content: "NOW PLAYING";
  font: 700 7px/1 var(--mono);
  letter-spacing: .13em;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.trailer-wall .trailer-rail-item.is-now-playing {
  box-shadow: inset 0 0 0 1px rgba(255, 106, 77, .3);
}

/* A file:// page cannot provide YouTube's required HTTP origin. */
.trailer-archive.is-file-preview.has-projection .trailer-standby {
  visibility: visible;
  opacity: 1;
  background: linear-gradient(135deg, rgba(1, 7, 11, .84), rgba(5, 20, 29, .92));
}

@media (max-width: 760px) {
  .trailer-wall .trailer-rail-item.is-now-playing:not(.is-sending)::before {
    top: calc((100% - 24px) / 2);
    padding: 3px 5px;
    font-size: 6px;
  }
}

/* Ambient archive experiment: every layer can be disabled independently. */
.trailer-ambient-glow {
  position: absolute;
  z-index: -1;
  inset: -88px -150px -118px -108px;
  overflow: hidden;
  opacity: 0;
  background-position: center;
  background-size: cover;
  filter: blur(48px) saturate(1.55) brightness(.72);
  mix-blend-mode: screen;
  pointer-events: none;
  transform: scale(1.08);
  transition: opacity 2s ease, background-image .8s ease;
  -webkit-mask-image: radial-gradient(ellipse 72% 68% at 44% 44%, #000 0 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 72% 68% at 44% 44%, #000 0 30%, transparent 78%);
}

.trailer-ambient-glow::after {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 42% 62% at 28% 46%, color-mix(in srgb, var(--ambient-accent) 54%, transparent), transparent 72%),
    linear-gradient(90deg, rgba(6, 25, 37, .38), transparent 68%);
  content: "";
}

.trailer-archive.fx-ambient-glow.is-ambient-playing .trailer-ambient-glow {
  animation: trailer-ambient-breathe 7.5s ease-in-out infinite;
  opacity: .19;
}

.trailer-archive.fx-ambient-glow.is-ambient-playing .trailer-media {
  box-shadow:
    0 16px 38px rgba(0, 0, 0, .38),
    0 0 38px color-mix(in srgb, var(--ambient-accent) 18%, transparent),
    0 0 82px color-mix(in srgb, var(--ambient-accent) 9%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, .035);
  transition: box-shadow 1.8s ease;
}

.trailer-archive.fx-ambient-glow.is-ambient-playing .trailer-archive-inner::before {
  background: linear-gradient(90deg, rgba(130, 205, 252, .3), color-mix(in srgb, var(--ambient-accent) 58%, #82cdfc));
  box-shadow: 0 0 18px color-mix(in srgb, var(--ambient-accent) 32%, transparent);
}

.trailer-archive.fx-sink-ui .trailer-archive-head,
.trailer-archive.fx-sink-ui .trailer-archive-rail-head,
.trailer-archive.fx-sink-ui .trailer-feature-meta,
.trailer-archive.fx-sink-ui .trailer-archive-rail,
.trailer-archive.fx-sink-ui .trailer-media-topline,
.trailer-archive.fx-sink-ui .trailer-feature::before {
  transition:
    opacity 1.8s cubic-bezier(.22, .72, .24, 1),
    transform 1.8s cubic-bezier(.22, .72, .24, 1),
    filter 1.8s ease,
    visibility 1.8s step-end;
}

.trailer-archive.fx-sink-ui.is-ui-submerged .trailer-archive-head,
.trailer-archive.fx-sink-ui.is-ui-submerged .trailer-archive-rail-head,
.trailer-archive.fx-sink-ui.is-ui-submerged .trailer-feature-meta,
.trailer-archive.fx-sink-ui.is-ui-submerged .trailer-archive-rail,
.trailer-archive.fx-sink-ui.is-ui-submerged .trailer-media-topline {
  visibility: hidden;
  opacity: 0;
  filter: blur(1.35px);
  pointer-events: none;
  transform: translate3d(0, 17px, 0);
}

.trailer-archive.fx-sink-ui.is-ui-submerged .trailer-feature::before {
  opacity: 0;
  filter: blur(1px);
  transform: translate3d(0, 10px, 0);
}

.trailer-archive.fx-sink-ui::after {
  position: absolute;
  z-index: 30;
  top: var(--wake-y, 52%);
  left: var(--wake-x, 50%);
  width: 78px;
  height: 82px;
  opacity: 0;
  background:
    radial-gradient(circle at 20% 74%, transparent 0 3px, rgba(193, 233, 252, .52) 3.5px 4px, transparent 4.5px),
    radial-gradient(circle at 53% 56%, transparent 0 2px, rgba(193, 233, 252, .42) 2.5px 3px, transparent 3.5px),
    radial-gradient(circle at 73% 83%, transparent 0 4px, rgba(193, 233, 252, .34) 4.5px 5px, transparent 5.5px),
    radial-gradient(circle at 43% 91%, transparent 0 1px, rgba(225, 246, 255, .58) 1.5px 2px, transparent 2.5px);
  content: "";
  pointer-events: none;
  transform: translate(-50%, -10%);
}

.trailer-archive.fx-sink-ui.is-ui-waking::after {
  animation: trailer-ui-bubbles 1.45s ease-out;
}

.trailer-standby small {
  position: relative;
  z-index: 1;
  color: rgba(130, 205, 252, .36);
  font: 650 6px/1 var(--mono);
  letter-spacing: .18em;
}

.trailer-archive.fx-off-air .trailer-standby {
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse 74% 90% at 50% 122%, rgba(50, 130, 174, .12), transparent 64%),
    linear-gradient(rgba(2, 10, 16, .91), rgba(1, 6, 10, .98)),
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(130, 205, 252, .04) 4px 5px);
}

.trailer-archive.fx-off-air .trailer-standby::before {
  position: absolute;
  z-index: 0;
  inset: -30%;
  opacity: .32;
  background:
    repeating-radial-gradient(ellipse at 48% 55%, transparent 0 13px, rgba(130, 205, 252, .025) 14px 15px, transparent 16px 28px),
    linear-gradient(105deg, transparent 22%, rgba(130, 205, 252, .045) 43%, transparent 61%);
  content: "";
  animation: trailer-off-air-drift 12s linear infinite;
}

.trailer-archive.fx-off-air .trailer-standby > span,
.trailer-archive.fx-off-air .trailer-standby > strong {
  position: relative;
  z-index: 1;
}

@keyframes trailer-ambient-breathe {
  0%, 100% { opacity: .13; transform: scale(1.06) translate3d(-.5%, 0, 0); }
  48% { opacity: .23; transform: scale(1.105) translate3d(1%, -1%, 0); }
}

@keyframes trailer-ui-bubbles {
  0% { opacity: 0; transform: translate(-50%, 2%) scale(.76); }
  18% { opacity: .72; }
  100% { opacity: 0; transform: translate(-50%, -78%) scale(1.08); }
}

@keyframes trailer-off-air-drift {
  0% { transform: translate3d(-2%, 0, 0) rotate(-.2deg); }
  50% { transform: translate3d(2%, -4%, 0) rotate(.2deg); }
  100% { transform: translate3d(-2%, -8%, 0) rotate(-.2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .trailer-archive.fx-ambient-glow.is-ambient-playing .trailer-ambient-glow,
  .trailer-archive.fx-sink-ui.is-ui-waking::after,
  .trailer-archive.fx-off-air .trailer-standby::before { animation: none; }

  .trailer-archive.fx-sink-ui .trailer-archive-head,
  .trailer-archive.fx-sink-ui .trailer-archive-rail-head,
  .trailer-archive.fx-sink-ui .trailer-feature-meta,
  .trailer-archive.fx-sink-ui .trailer-archive-rail,
  .trailer-archive.fx-sink-ui .trailer-media-topline { transition-duration: .01ms; }
}

/* Submerged focus: the receiver comes slightly closer while the UI recedes. */
.trailer-archive {
  --submerged-media-scale: 1.12;
}

.trailer-wall .trailer-media,
.trailer-archive.fx-ambient-glow.is-ambient-playing .trailer-media {
  border-color: rgba(130, 205, 252, .24);
}

.trailer-archive.fx-sink-ui .trailer-media {
  transform: scale(1);
  transform-origin: left center;
  transition:
    transform 1.8s cubic-bezier(.22, .72, .24, 1),
    border-color 1.4s ease,
    box-shadow 1.8s ease;
}

.trailer-archive.fx-sink-ui.is-ui-submerged .trailer-media {
  border-color: rgba(130, 205, 252, .16);
  transform: scale(var(--submerged-media-scale));
}

.trailer-archive.fx-sink-ui .trailer-archive-inner::before {
  transition: opacity 1.55s ease, filter 1.55s ease;
}

.trailer-archive.fx-sink-ui.is-ui-submerged .trailer-archive-inner::before {
  opacity: 0;
  filter: blur(2px);
}

@media (max-width: 760px) {
  .trailer-archive { --submerged-media-scale: 1.06; }
}

@media (min-width: 761px) and (max-width: 1099px) {
  .trailer-archive { --submerged-media-scale: 1.09; }
}

@media (min-width: 1100px) and (max-width: 1499px) {
  .trailer-archive { --submerged-media-scale: 1.12; }
}

@media (min-width: 1500px) {
  .trailer-archive { --submerged-media-scale: 1.16; }
}

@media (prefers-reduced-motion: reduce) {
  .trailer-archive.fx-sink-ui.is-ui-submerged .trailer-media { transform: scale(1.04); }
}

/* YouTube playback integrity: keep the live iframe unobscured and large enough. */
.trailer-archive {
  --youtube-player-width: clamp(356px, 27vw, 420px);
  --youtube-player-height: calc(var(--youtube-player-width) * .5625);
}

.trailer-wall .trailer-media,
.trailer-archive.fx-ambient-glow.is-ambient-playing .trailer-media {
  border: 0;
  outline: 1px solid rgba(130, 205, 252, .22);
  outline-offset: 1px;
}

.trailer-archive:not(.has-visible-player) #trailer-player {
  visibility: hidden;
}

.trailer-archive.has-visible-player .trailer-media::before,
.trailer-archive.has-visible-player .trailer-media::after {
  display: none;
  animation: none;
}

.trailer-archive.has-visible-player .trailer-media-topline,
.trailer-archive.has-visible-player .trailer-feature::before {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.crossroad-hero > .trailer-archive {
  z-index: 10;
  top: clamp(58px, 8svh, 84px);
  transition: top .9s cubic-bezier(.22, .72, .24, 1);
}

.crossroad-hero > .trailer-archive.has-visible-player {
  top: clamp(52px, 7svh, 76px);
}

.trailer-archive.has-visible-player .trailer-wall .trailer-feature {
  height: var(--youtube-player-height);
  margin-top: 6px;
  grid-template-columns: var(--youtube-player-width) minmax(0, 1fr);
}

.trailer-archive.has-visible-player .trailer-wall .trailer-media {
  width: var(--youtube-player-width);
  height: var(--youtube-player-height);
  min-width: 356px;
  min-height: 200.25px;
  aspect-ratio: 16 / 9;
}

.trailer-archive.has-visible-player .trailer-wall .trailer-feature-meta {
  height: var(--youtube-player-height);
}

.trailer-rail-youtube {
  position: absolute;
  z-index: 6;
  top: 6px;
  right: 6px;
  padding: 3px 4px 2px;
  border: 1px solid rgba(214, 239, 251, .2);
  background: rgba(2, 7, 11, .66);
  color: rgba(222, 242, 252, .58);
  font: 700 5px/1 var(--mono);
  letter-spacing: .1em;
  pointer-events: none;
}

@media (max-width: 1199px), (max-height: 900px) {
  .trailer-archive.has-visible-player .trailer-wall .trailer-feature-meta {
    visibility: hidden;
    width: 0;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 760px) {
  .crossroad-hero > .trailer-archive.has-visible-player {
    right: auto;
    left: 50%;
    width: 356px;
    transform: translateX(-50%);
  }

  .crossroad-hero > .trailer-archive .trailer-wall .trailer-archive-rail {
    height: 102px;
    grid-template-rows: 94px;
    grid-auto-columns: max(120px, calc((100% - 8px) / 2));
  }

  .trailer-wall .trailer-rail-item {
    height: 94px;
    grid-template-rows: 70px 24px;
  }

  .trailer-wall .trailer-rail-item img { min-height: 70px; }
}

/* The compliant base size is already larger; sinking adds only a quiet push-in. */
@media (max-width: 760px) {
  .trailer-archive { --submerged-media-scale: 1.02; }
}

@media (min-width: 761px) and (max-width: 1099px) {
  .trailer-archive { --submerged-media-scale: 1.04; }
}

@media (min-width: 1100px) and (max-width: 1499px) {
  .trailer-archive { --submerged-media-scale: 1.06; }
}

@media (min-width: 1500px) {
  .trailer-archive { --submerged-media-scale: 1.08; }
}

@media (prefers-reduced-motion: reduce) {
  .trailer-archive.fx-sink-ui.is-ui-submerged .trailer-media { transform: scale(1.02); }
}

/* The travelling axis light also energizes the trailer receiver junction. */
.trailer-archive-inner::after {
  transform-origin: center;
}

.trailer-archive-inner.is-light-hit::after {
  animation: trailer-receiver-node-hit .78s ease-out;
}

.trailer-archive-inner.is-light-hit::before {
  animation: trailer-receiver-line-hit .78s ease-out;
}

.trailer-archive-inner.is-light-hit .trailer-media {
  animation: trailer-receiver-screen-hit .78s ease-out;
}

.trailer-archive.fx-sink-ui.is-ui-submerged .trailer-archive-inner.is-light-hit::before {
  opacity: 0;
  animation: none;
}

@keyframes trailer-receiver-node-hit {
  0% { transform: scale(1); }
  36% {
    background: color-mix(in srgb, var(--archive-accent) 38%, white);
    box-shadow:
      0 0 8px 2px color-mix(in srgb, var(--archive-accent) 24%, white),
      0 0 28px 10px color-mix(in srgb, var(--archive-accent) 58%, transparent);
    transform: scale(2.05);
  }
  100% { transform: scale(1); }
}

@keyframes trailer-receiver-line-hit {
  0%, 100% { filter: brightness(1); }
  38% {
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--archive-accent) 20%, transparent),
      color-mix(in srgb, var(--archive-accent) 68%, white)
    );
    box-shadow: 0 0 10px 2px color-mix(in srgb, var(--archive-accent) 46%, transparent);
    filter: brightness(1.65);
  }
}

@keyframes trailer-receiver-screen-hit {
  0%, 100% { outline-color: color-mix(in srgb, var(--archive-accent) 22%, transparent); }
  42% {
    outline-color: color-mix(in srgb, var(--archive-accent) 70%, white);
    box-shadow:
      0 0 18px color-mix(in srgb, var(--archive-accent) 24%, transparent),
      0 0 54px color-mix(in srgb, var(--archive-accent) 10%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .trailer-archive-inner.is-light-hit::after,
  .trailer-archive-inner.is-light-hit::before,
.trailer-archive-inner.is-light-hit .trailer-media { animation: none; }
}

/* Compact receiver: the archive stays quiet until the user asks for it. */
.crossroad-hero > .trailer-archive {
  --trailer-distance-opacity: 1;
  opacity: var(--trailer-distance-opacity);
  transition: top .9s cubic-bezier(.22, .72, .24, 1), opacity .3s ease-out;
}

/* An opened player is the current focus, regardless of rail distance. */
.crossroad-hero > .trailer-archive:not(.is-collapsed) {
  --trailer-distance-opacity: 1 !important;
}

.trailer-archive-toggle {
  position: relative;
  z-index: 12;
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid color-mix(in srgb, var(--archive-accent) 34%, transparent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--archive-accent) 8%, rgba(3, 8, 13, .94)), rgba(3, 8, 13, .82)),
    rgba(3, 8, 13, .9);
  padding: 0 16px;
  color: color-mix(in srgb, var(--archive-accent) 74%, var(--text));
  font: 650 12px/1.2 var(--mono);
  letter-spacing: .14em;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 18px 0 28px -28px var(--archive-accent), 0 12px 30px rgba(0, 0, 0, .18);
  transition: border-color .22s ease-out, background-color .22s ease-out, color .22s ease-out;
}

.trailer-archive-toggle::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  translate: 0 -50%;
  background: var(--archive-accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--archive-accent) 48%, transparent);
}

.trailer-archive-toggle:hover,
.trailer-archive-toggle:focus-visible {
  border-color: color-mix(in srgb, var(--archive-accent) 72%, transparent);
  color: color-mix(in srgb, var(--archive-accent) 90%, #fff);
  outline: none;
}

.trailer-archive-toggle:focus-visible {
  box-shadow: 0 0 0 1px var(--archive-accent), 0 0 22px color-mix(in srgb, var(--archive-accent) 14%, transparent);
}

.trailer-archive-toggle-copy { min-width: 0; }

.trailer-archive-toggle-mark {
  flex: 0 0 auto;
  color: var(--archive-accent);
  font: 500 18px/1 var(--mono);
  transform: rotate(0deg);
  transition: transform .3s ease-out;
}

.trailer-archive-body {
  max-height: 720px;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transform-origin: top center;
  transition: max-height .32s ease-out, opacity .22s ease-out, transform .32s ease-out, visibility 0s linear 0s;
}

.trailer-archive:not(.is-collapsed) .trailer-archive-toggle { margin-bottom: 12px; }
.trailer-archive:not(.is-collapsed) .trailer-archive-toggle-mark { transform: rotate(180deg); }

.trailer-archive.is-collapsed .trailer-archive-body {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: max-height .32s ease-out, opacity .18s ease-out, transform .32s ease-out, visibility 0s linear .32s;
}

@media (max-width: 760px) {
  .trailer-archive-toggle {
    min-height: 44px;
    gap: 10px;
    padding-inline: 12px;
    font-size: 10px;
    letter-spacing: .1em;
  }

  .trailer-archive-toggle-mark { font-size: 16px; }
  .trailer-archive-body { max-height: 560px; }
}

@media (prefers-reduced-motion: reduce) {
  .crossroad-hero > .trailer-archive,
  .trailer-archive-toggle,
  .trailer-archive-toggle-mark,
  .trailer-archive-body,
  .trailer-archive.is-collapsed .trailer-archive-body {
    transition: none !important;
  }
}

/* Readability rule: micro type is not used as decoration in the viewing UI. */
.trailer-archive-kicker,
.trailer-settings-open,
.trailer-media-topline,
.trailer-archive-rail-head,
.trailer-youtube-link,
.trailer-settings-head p,
.trailer-settings-add button,
.trailer-settings-save {
  font-size: 12px !important;
  line-height: 1.25;
}

.trailer-archive-kicker,
.trailer-media-topline,
.trailer-archive-rail-head {
  letter-spacing: .13em;
}

.trailer-empty,
.trailer-rail-item span,
.trailer-settings-add label,
.trailer-settings-row label,
.trailer-settings-options label,
.trailer-settings-note {
  font-size: 12px !important;
}

.trailer-title-block time,
.trailer-wall .trailer-title-block time,
.trailer-wall .trailer-rail-date {
  font-size: 12px !important;
  line-height: 1.2;
}

/* Keep the trailer controls attached to the heading as a single compact unit. */
.trailer-archive-head {
  justify-content: flex-start;
  gap: 10px;
}

.trailer-settings-open.trailer-settings-icon,
.crossroad-hero > .trailer-archive .trailer-settings-open.trailer-settings-icon {
  display: grid;
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  margin-top: 7px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  box-shadow: none;
  letter-spacing: 0;
}

.trailer-settings-gear {
  display: block;
  font-family: "Arial Unicode MS", "Segoe UI Symbol", sans-serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
  transform-origin: center;
  transition: color .18s ease, filter .18s ease, transform .18s ease;
}

.trailer-settings-icon:hover .trailer-settings-gear,
.trailer-settings-icon:focus-visible .trailer-settings-gear {
  color: var(--archive-accent);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--archive-accent) 52%, transparent));
  transform: rotate(22deg) scale(1.06);
}

@media (max-width: 760px) {
  .trailer-settings-open.trailer-settings-icon,
  .crossroad-hero > .trailer-archive .trailer-settings-open.trailer-settings-icon {
    width: 38px;
    min-width: 38px;
    min-height: 38px;
  }

  .trailer-settings-gear { font-size: 24px; }
}

.trailer-wall .trailer-feature::before,
.trailer-wall .trailer-media-topline,
.trailer-standby span,
.trailer-standby small,
.trailer-feature-meta::before,
.trailer-rail-youtube,
.trailer-wall .trailer-rail-index,
.trailer-wall .trailer-rail-title,
.trailer-wall .trailer-rail-item.is-now-playing:not(.is-sending)::before {
  font-size: 11px !important;
  line-height: 1.25;
}

/* These duplicated the live state and standby message once type became readable. */
.trailer-wall .trailer-feature::before,
.trailer-feature-meta::before {
  display: none;
}

/* The section heading and the screen already explain the state. */
.trailer-archive-rail-head,
.trailer-archive.is-off-air .trailer-media-topline {
  display: none !important;
}

.trailer-archive:not(.has-projection) .trailer-media-topline {
  display: none !important;
}

/* Do not leave an empty dark metadata panel beside the OFF AIR receiver. */
.trailer-archive:not(.has-projection) .trailer-feature-meta {
  display: none;
}

.trailer-standby {
  gap: 12px;
}

.trailer-standby strong {
  font-size: 14px !important;
  line-height: 1.3;
}

.trailer-archive.is-off-air .trailer-standby span {
  color: rgba(211, 231, 242, .76);
  font-size: 14px !important;
  letter-spacing: .22em;
}

.trailer-wall .trailer-title-block h3 {
  font-size: 13px !important;
}

.trailer-wall .trailer-rail-item {
  grid-template: auto 38px / 42px 1fr;
}

.trailer-wall .trailer-rail-index {
  padding-left: 10px !important;
}

.trailer-wall .trailer-rail-date {
  padding-right: 10px !important;
  letter-spacing: .06em;
}

.trailer-wall .trailer-rail-title {
  padding: 42px 12px 13px !important;
}

.trailer-rail-youtube {
  padding: 4px 6px 3px;
  letter-spacing: .06em;
}

.trailer-wall .trailer-rail-item.is-now-playing:not(.is-sending)::before {
  top: calc((100% - 38px) / 2);
  padding: 5px 8px 4px;
}

@media (max-width: 760px) {
  .crossroad-hero > .trailer-archive .trailer-archive-kicker,
  .crossroad-hero > .trailer-archive .trailer-archive-rail-head,
  .crossroad-hero > .trailer-archive .trailer-media-topline,
  .crossroad-hero > .trailer-archive .trailer-youtube-link {
    font-size: 11px !important;
  }

  .trailer-wall .trailer-title-block h3,
  .trailer-wall .trailer-rail-date { font-size: 12px !important; }
}

/* Settings are a reading and editing surface, not a dense telemetry panel. */
.trailer-settings-dialog {
  width: min(1040px, calc(100vw - 32px));
}

.trailer-settings-head {
  padding: 28px 30px;
}

.trailer-settings-head p {
  margin-bottom: 10px;
  font-size: 14px !important;
  letter-spacing: .14em;
}

.trailer-settings-head h2 {
  font-size: 30px;
  line-height: 1.25;
}

.trailer-settings-close {
  position: relative;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border-color: rgba(190, 231, 255, .52);
  background: rgba(130, 205, 252, .065);
  color: transparent;
  font-size: 0;
  box-shadow: 0 0 18px rgba(130, 205, 252, .08);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.trailer-settings-close::before,
.trailer-settings-close::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: #e7f7ff;
  box-shadow: 0 0 8px rgba(130, 205, 252, .55);
}

.trailer-settings-close::before { transform: rotate(45deg); }
.trailer-settings-close::after { transform: rotate(-45deg); }

.trailer-settings-close:hover,
.trailer-settings-close:focus-visible {
  border-color: var(--actual);
  background: rgba(130, 205, 252, .13);
  box-shadow: 0 0 22px rgba(130, 205, 252, .2);
  outline: none;
}

.trailer-settings-add {
  gap: 20px;
  padding: 22px 30px;
}

.trailer-settings-add label,
.trailer-settings-row label,
.trailer-settings-options label {
  color: #9babb9;
  font-size: 15px !important;
  line-height: 1.4;
  letter-spacing: .035em;
}

.trailer-settings-add textarea,
.trailer-settings-row input,
.trailer-settings-options select {
  font-size: 16px;
  line-height: 1.45;
}

.trailer-settings-add textarea {
  height: 82px;
  min-height: 82px;
  padding: 14px 16px;
}

.trailer-settings-add button,
.trailer-settings-save {
  padding: 12px 20px;
  font-size: 16px !important;
}

.trailer-settings-add button {
  height: 82px;
  min-height: 82px;
}

.trailer-settings-save {
  min-height: 50px;
}

.trailer-settings-list {
  gap: 8px;
  padding: 18px 30px;
}

.trailer-settings-row {
  grid-template-columns: 104px minmax(220px, 1fr) 150px auto;
  gap: 12px;
  padding: 12px;
}

.trailer-settings-row img {
  width: 104px;
}

.trailer-settings-row input,
.trailer-settings-options select {
  min-height: 44px;
  padding: 10px 12px;
}

.trailer-settings-row-actions {
  gap: 6px;
}

.trailer-settings-row-actions button {
  width: 40px;
  height: 40px;
  font-size: 16px;
}

.trailer-settings-footer {
  padding: 22px 30px 26px;
}

.trailer-settings-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px 24px;
  align-items: center;
}

.trailer-settings-options label:first-child {
  margin-right: 0;
}

.trailer-settings-options input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: none;
}

.trailer-settings-actions {
  gap: 22px;
  margin-top: 22px;
}

.trailer-settings-note {
  color: #7d90a1;
  font-size: 14px !important;
  line-height: 1.55;
}

.trailer-settings-dialog textarea::placeholder,
.trailer-settings-dialog input::placeholder {
  color: #718495;
  opacity: 1;
}

/* 一覧を主役にする。文字級数は保ち、余白と入力部の高さで密度を上げる。 */
@media (min-width: 761px) {
  .trailer-settings-dialog,
  .trailer-settings-form {
    height: calc(100svh - 24px);
  }

  .trailer-settings-head {
    padding: 17px 24px;
  }

  .trailer-settings-head p {
    margin-bottom: 6px;
    font-size: 13px !important;
  }

  .trailer-settings-head h2 {
    font-size: 27px;
  }

  .trailer-settings-close {
    width: 46px;
    height: 46px;
  }

  .trailer-settings-add {
    gap: 14px;
    padding: 12px 24px;
  }

  .trailer-settings-add label {
    gap: 5px;
    font-size: 14px !important;
  }

  .trailer-settings-add textarea {
    box-sizing: border-box !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 9px 12px;
  }

  .trailer-settings-add button {
    box-sizing: border-box;
    height: 54px;
    min-height: 54px;
    padding: 10px 16px;
    font-size: 14px !important;
  }

  .trailer-settings-list {
    gap: 6px;
    padding: 10px 24px;
  }

  .trailer-settings-row {
    grid-template-columns: 88px minmax(220px, 1fr) 138px auto;
    gap: 10px;
    padding: 6px 8px;
  }

  .trailer-settings-row img {
    width: 88px;
  }

  .trailer-settings-row label {
    gap: 3px;
    font-size: 13px !important;
    line-height: 1.25;
  }

  .trailer-settings-row input {
    min-height: 36px;
    padding: 7px 9px;
    font-size: 14px;
  }

  .trailer-settings-row-actions {
    gap: 5px;
  }

  .trailer-settings-row-actions button {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }

  .trailer-settings-footer {
    padding: 13px 24px 15px;
  }

  .trailer-settings-options {
    grid-template-columns: minmax(190px, 220px) repeat(4, minmax(0, auto));
    gap: 8px 18px;
    padding: 10px 24px;
    border-bottom: 1px solid rgba(130, 205, 252, .12);
    background: rgba(3, 11, 17, .46);
  }

  .trailer-settings-options label {
    gap: 6px;
    font-size: 12px !important;
    white-space: nowrap;
  }

  .trailer-settings-options select {
    min-height: 34px;
    padding: 6px 8px;
    font-size: 13px;
  }

  .trailer-settings-actions {
    margin-top: 0;
  }

  .trailer-settings-note {
    font-size: 13px !important;
  }

  .trailer-settings-save {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px !important;
  }
}

@media (max-width: 760px) {
  .trailer-settings-dialog {
    width: calc(100vw - 12px);
  }

  .trailer-settings-head,
  .trailer-settings-add,
  .trailer-settings-footer {
    padding-inline: 18px;
  }

  .trailer-settings-head h2 { font-size: 25px; }
  .trailer-settings-head p { font-size: 13px !important; }

  .trailer-settings-add label,
  .trailer-settings-row label,
  .trailer-settings-options label { font-size: 14px !important; }

  .trailer-settings-add textarea,
  .trailer-settings-row input,
  .trailer-settings-options select { font-size: 16px; }

  .trailer-settings-list { padding-inline: 18px; }

  .trailer-settings-row {
    grid-template-columns: 78px minmax(0, 1fr) auto;
  }

  .trailer-settings-row img { width: 78px; }
  .trailer-settings-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    padding: 10px 18px;
  }
  .trailer-settings-options label:first-child { grid-column: 1 / -1; }
  .trailer-settings-options label { font-size: 12px !important; white-space: normal; }
  .trailer-settings-note { font-size: 13px !important; }
}

/* Three-stage surface receiver: terminal, free thumbnail rail, then screening space. */
.crossroad-hero > .trailer-archive {
  width: min(720px, calc(100% - var(--axis-x) - 118px));
  transition: width .32s ease-out, top .32s ease-out, opacity .3s ease-out;
}

.crossroad-hero > .trailer-archive.is-collapsed {
  width: 190px;
}

.crossroad-hero > .trailer-archive .trailer-archive-toggle {
  width: 190px;
  min-height: 38px;
  padding-inline: 12px 10px;
  gap: 12px;
  font-size: 10px;
  letter-spacing: .12em;
  white-space: nowrap;
}

.crossroad-hero > .trailer-archive .trailer-archive-toggle-mark {
  font-size: 20px;
  transform: rotate(0deg);
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-toggle {
  margin-bottom: 8px;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-toggle-mark {
  transform: rotate(180deg);
}

.crossroad-hero > .trailer-archive .trailer-archive-head,
.crossroad-hero > .trailer-archive .trailer-archive-rail-head {
  display: none !important;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed):not(.has-projection) .trailer-archive-body {
  max-height: 112px;
}

.crossroad-hero > .trailer-archive.has-projection .trailer-archive-body {
  max-height: 720px;
}

.crossroad-hero > .trailer-archive .trailer-wall {
  display: grid;
  grid-template: auto auto / minmax(0, 1fr);
  gap: 8px;
  padding: 0;
  overflow: visible;
}

.crossroad-hero > .trailer-archive:not(.has-projection) .trailer-wall .trailer-feature {
  display: none !important;
}

.crossroad-hero > .trailer-archive .trailer-wall .trailer-archive-rail {
  display: grid !important;
  grid-row: auto;
  grid-template-rows: 96px;
  grid-auto-flow: column;
  grid-auto-columns: 168px;
  gap: 8px;
  width: 100%;
  height: 102px;
  margin: 0;
  padding: 0 0 6px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: none;
  scrollbar-width: thin;
  cursor: grab;
}

.crossroad-hero > .trailer-archive .trailer-wall .trailer-archive-rail:active {
  cursor: grabbing;
}

.crossroad-hero > .trailer-archive .trailer-wall .trailer-rail-item {
  grid-row: 1;
  grid-column: auto;
  width: 168px;
  height: 96px;
  min-height: 0;
  grid-template: 68px 28px / 42px 1fr;
}

.crossroad-hero > .trailer-archive .trailer-wall .trailer-rail-item img {
  min-height: 68px;
  height: 68px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.crossroad-hero > .trailer-archive.has-projection .trailer-wall .trailer-feature {
  display: grid !important;
  grid-template: auto auto / minmax(0, 1fr) !important;
  width: min(100%, 660px);
  height: auto !important;
  margin: 0;
}

.crossroad-hero > .trailer-archive.has-projection .trailer-wall .trailer-media,
.crossroad-hero > .trailer-archive.has-visible-player .trailer-wall .trailer-media {
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9;
}

.crossroad-hero > .trailer-archive.has-projection .trailer-wall .trailer-feature-meta {
  position: relative;
  inset: auto;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 44px;
  padding: 7px 9px;
  visibility: visible;
  opacity: 1;
}

@media (max-width: 760px) {
  .crossroad-hero > .trailer-archive {
    right: 10px;
    left: calc(var(--axis-x) + 20px);
    width: auto;
  }

  .crossroad-hero > .trailer-archive.is-collapsed {
    width: 166px;
  }

  .crossroad-hero > .trailer-archive .trailer-archive-toggle {
    width: 166px;
    min-height: 34px;
    padding-inline: 10px 8px;
    font-size: 9px;
    letter-spacing: .08em;
  }

  .crossroad-hero > .trailer-archive:not(.is-collapsed):not(.has-projection) .trailer-archive-body {
    max-height: 98px;
  }

  .crossroad-hero > .trailer-archive .trailer-wall .trailer-archive-rail {
    grid-template-rows: 84px;
    grid-auto-columns: 144px;
    height: 90px;
  }

  .crossroad-hero > .trailer-archive .trailer-wall .trailer-rail-item {
    width: 144px;
    height: 84px;
    grid-template: 60px 24px / 38px 1fr;
  }

  .crossroad-hero > .trailer-archive .trailer-wall .trailer-rail-item img {
    min-height: 60px;
    height: 60px;
  }

  .crossroad-hero > .trailer-archive.has-projection .trailer-wall .trailer-feature {
    width: 100%;
  }

  .crossroad-hero > .trailer-archive.has-projection .trailer-wall .trailer-feature-meta {
    min-height: 38px;
    padding: 6px 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crossroad-hero > .trailer-archive {
    transition: none !important;
  }
}

@media (max-width: 760px) {
  .crossroad-hero > .trailer-archive.has-projection,
  .crossroad-hero > .trailer-archive.has-visible-player {
    right: 10px;
    left: 10px;
    width: auto;
    transform: none;
  }

  .crossroad-hero > .trailer-archive.has-projection .trailer-archive-toggle,
  .crossroad-hero > .trailer-archive.has-visible-player .trailer-archive-toggle {
    margin-left: calc(var(--axis-x) + 2px);
  }
}

/* Collapsed archive: a labelled stack makes the hidden trailer volume legible. */
.crossroad-hero > .trailer-archive.is-collapsed {
  width: 206px;
}

.crossroad-hero > .trailer-archive .trailer-archive-toggle {
  width: 190px;
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  justify-items: start;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #06131d;
  box-shadow: none;
  overflow: visible;
}

.crossroad-hero > .trailer-archive .trailer-archive-toggle::before {
  display: none;
}

.crossroad-hero > .trailer-archive .trailer-archive-toggle-heading {
  position: relative;
  z-index: 6;
  width: 190px;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px 0 16px;
  clip-path: polygon(10px 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%, 10px 50%);
  background: var(--actual);
  color: #06131d;
  box-shadow: 0 0 22px color-mix(in srgb, var(--actual) 18%, transparent);
}

.crossroad-hero > .trailer-archive .trailer-archive-toggle-copy {
  color: inherit;
  font: 700 15px/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: 2.2px;
}

.crossroad-hero > .trailer-archive .trailer-archive-toggle-mark {
  color: inherit;
  font-size: 20px;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle {
  width: 206px;
  min-height: 148px;
  touch-action: manipulation;
}

.crossroad-hero > .trailer-archive .trailer-collapsed-preview {
  position: relative;
  display: none;
  width: 198px;
  height: 102px;
  margin-left: 1px;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-collapsed-preview {
  display: block;
  pointer-events: none;
}

.crossroad-hero > .trailer-archive .trailer-preview-stack,
.crossroad-hero > .trailer-archive .trailer-preview-motion,
.crossroad-hero > .trailer-archive .trailer-preview-action,
.crossroad-hero > .trailer-archive .trailer-preview-image,
.crossroad-hero > .trailer-archive .trailer-preview-count {
  pointer-events: none;
}

.crossroad-hero > .trailer-archive .trailer-preview-stack {
  position: absolute;
  inset: 0;
}

.crossroad-hero > .trailer-archive .trailer-preview-motion {
  position: absolute;
  z-index: 4;
  inset: 0 auto auto 0;
  width: 168px;
  height: 94px;
  overflow: hidden;
  background: #02070b;
  opacity: 0;
  transition: opacity .28s ease-out;
}

.crossroad-hero > .trailer-archive.is-previewing .trailer-preview-motion {
  opacity: 1;
}

.crossroad-hero > .trailer-archive .trailer-preview-motion iframe {
  width: 100%;
  height: 100%;
  border: 0;
  transform: scale(1.18);
}

.crossroad-hero > .trailer-archive .trailer-preview-action {
  position: absolute;
  z-index: 6;
  left: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px 4px;
  background: rgba(2, 8, 13, .84);
  color: #dcecf6;
  font: 700 8px/1 var(--mono);
  letter-spacing: .1em;
  backdrop-filter: blur(4px);
}

.crossroad-hero > .trailer-archive .trailer-preview-action em {
  color: var(--actual);
  font-style: normal;
}

.crossroad-hero > .trailer-archive .trailer-preview-image {
  position: absolute;
  width: 168px;
  height: 94px;
  border: 1px solid color-mix(in srgb, var(--actual) 34%, rgba(0, 0, 0, .7));
  background: #02070b;
  object-fit: cover;
  object-position: center;
  transition: filter .24s ease-out, opacity .24s ease-out, translate .24s ease-out;
}

.crossroad-hero > .trailer-archive .trailer-preview-image.is-depth-0 {
  z-index: 3;
  inset: 0 auto auto 0;
  filter: brightness(.82) saturate(.86);
  opacity: .96;
}

.crossroad-hero > .trailer-archive .trailer-preview-image.is-depth-1 {
  z-index: 2;
  inset: 6px auto auto 12px;
  filter: brightness(.4) saturate(.48);
  opacity: .82;
}

.crossroad-hero > .trailer-archive .trailer-preview-image.is-depth-2 {
  z-index: 1;
  inset: 12px auto auto 24px;
  filter: brightness(.28) saturate(.32);
  opacity: .7;
}

.crossroad-hero > .trailer-archive .trailer-preview-count {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  min-width: 30px;
  padding: 4px 6px 3px;
  border: 1px solid color-mix(in srgb, var(--actual) 48%, transparent);
  background: rgba(2, 8, 13, .9);
  color: var(--actual);
  font: 700 10px/1 var(--mono);
  letter-spacing: .08em;
  text-align: center;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle:hover .trailer-preview-image.is-depth-0,
.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle:focus-visible .trailer-preview-image.is-depth-0 {
  filter: brightness(.96) saturate(1);
  translate: 2px 0;
}

.crossroad-hero > .trailer-archive .trailer-archive-toggle:focus-visible {
  outline: 1px solid var(--actual);
  outline-offset: 5px;
  box-shadow: none;
}

@media (max-width: 760px) {
  .crossroad-hero > .trailer-archive.is-collapsed {
    width: 174px;
  }

  .crossroad-hero > .trailer-archive .trailer-archive-toggle,
  .crossroad-hero > .trailer-archive .trailer-archive-toggle-heading {
    width: 166px;
  }

  .crossroad-hero > .trailer-archive .trailer-archive-toggle-heading {
    min-height: 34px;
    padding-inline: 14px 15px;
  }

  .crossroad-hero > .trailer-archive .trailer-archive-toggle-copy {
    font-size: 13px;
  }

  .crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle {
    width: 174px;
    min-height: 126px;
  }

  .crossroad-hero > .trailer-archive .trailer-collapsed-preview {
    width: 174px;
    height: 84px;
  }

  .crossroad-hero > .trailer-archive .trailer-preview-image {
    width: 144px;
    height: 81px;
  }

  .crossroad-hero > .trailer-archive .trailer-preview-motion {
    display: none;
  }

  .crossroad-hero > .trailer-archive .trailer-preview-action {
    bottom: 5px;
    font-size: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crossroad-hero > .trailer-archive .trailer-preview-motion { display: none; }
}

/* Settings rows use one control grid so date and action boxes land on exact pixels. */
@media (min-width: 761px) {
  .trailer-settings-row {
    --settings-row-box: 38px;
    align-items: end;
  }

  .trailer-settings-row input {
    box-sizing: border-box;
    height: var(--settings-row-box);
    min-height: var(--settings-row-box);
  }

  .trailer-settings-row-actions {
    align-self: end;
    display: grid;
    grid-template-columns: repeat(3, var(--settings-row-box));
    gap: 6px;
  }

  .trailer-settings-row-actions button {
    box-sizing: border-box;
    display: grid;
    width: var(--settings-row-box);
    min-width: var(--settings-row-box);
    height: var(--settings-row-box);
    min-height: var(--settings-row-box);
    margin: 0;
    padding: 0;
    place-items: center;
    line-height: 1;
  }
}

@media (max-width: 760px) {
  .trailer-settings-row {
    --settings-row-box: 44px;
    align-items: end;
  }

  .trailer-settings-row input {
    box-sizing: border-box;
    height: var(--settings-row-box);
    min-height: var(--settings-row-box);
  }

  .trailer-settings-row-actions {
    align-self: stretch;
    display: grid;
    grid-template-columns: var(--settings-row-box);
    grid-auto-rows: var(--settings-row-box);
    align-content: space-between;
    gap: 6px;
  }

  .trailer-settings-row-actions button {
    box-sizing: border-box;
    display: grid;
    width: var(--settings-row-box);
    min-width: var(--settings-row-box);
    height: var(--settings-row-box);
    min-height: var(--settings-row-box);
    margin: 0;
    padding: 0;
    place-items: center;
    line-height: 1;
  }
}

/* Final placement for the always-available trailer settings control. */
.crossroad-hero > .trailer-archive .trailer-settings-open.trailer-settings-icon.trailer-settings-float {
  position: absolute;
  z-index: 20;
  top: 3px;
  left: 196px;
  display: grid !important;
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--actual) 34%, transparent);
  background: rgba(2, 9, 14, .76);
  color: color-mix(in srgb, var(--actual) 72%, white);
  box-shadow: 0 0 15px color-mix(in srgb, var(--actual) 9%, transparent);
}

.crossroad-hero > .trailer-archive .trailer-settings-float .trailer-settings-gear {
  font-size: 18px;
}

@media (min-width: 761px) {
  .crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-settings-open.trailer-settings-icon.trailer-settings-float {
    left: 156px;
  }
}

@media (max-width: 760px) {
  .crossroad-hero > .trailer-archive .trailer-settings-open.trailer-settings-icon.trailer-settings-float {
    top: 2px;
    left: 172px;
    width: 30px;
    min-width: 30px;
    min-height: 30px;
  }

  .crossroad-hero > .trailer-archive:not(.is-collapsed):not(.has-projection):not(.has-visible-player) .trailer-settings-open.trailer-settings-icon.trailer-settings-float {
    left: 164px;
  }

  .crossroad-hero > .trailer-archive.has-projection .trailer-settings-open.trailer-settings-icon.trailer-settings-float,
  .crossroad-hero > .trailer-archive.has-visible-player .trailer-settings-open.trailer-settings-icon.trailer-settings-float {
    left: calc(var(--axis-x) + 174px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .crossroad-hero > .trailer-archive .trailer-preview-image {
    transition: none !important;
  }
}

/* Keep a folded rail out of the paint tree; hidden overflow plus lazy paint could
   otherwise leave the first expansion blank until the next browser repaint. */
.crossroad-hero > .trailer-archive .trailer-archive-body {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-body {
  display: none;
}

.crossroad-hero > .trailer-archive:not(.is-collapsed):not(.has-projection) .trailer-archive-body {
  display: block;
  animation: trailer-rail-reveal .26s ease-out both;
}

@keyframes trailer-rail-reveal {
  from { opacity: .01; translate: 0 -5px; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .crossroad-hero > .trailer-archive:not(.is-collapsed):not(.has-projection) .trailer-archive-body {
    animation: none !important;
  }
}

/* Official trailers branch from the actual spine in the same ice-blue language. */
.crossroad-hero > .trailer-archive {
  --archive-accent: var(--actual) !important;
}

@media (min-width: 761px) {
  .crossroad-hero > .trailer-archive.is-collapsed {
    left: calc(var(--axis-x) + 14px);
  }

  .crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-inner::before {
    width: 14px;
  }

  .crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-inner::after {
    right: calc(100% + 10px);
  }

  .crossroad-hero > .trailer-archive:not(.is-collapsed) .trailer-archive-toggle {
    margin-left: -40px;
  }
}

@media (max-width: 760px) {
  .crossroad-hero > .trailer-archive.is-collapsed {
    right: auto;
    left: calc(var(--axis-x) + 12px);
  }

  .crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-inner::before {
    width: 12px;
  }

  .crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-inner::after {
    right: calc(100% + 8px);
  }

  .crossroad-hero > .trailer-archive:not(.is-collapsed):not(.has-projection):not(.has-visible-player) .trailer-archive-toggle {
    margin-left: -8px;
  }
}