/* Release page. Rides on app.css for the shared shell — header, buttons,
   tags, toast — and only adds what the page itself needs. */

.release { max-width: 1120px; margin: 0 auto; padding: 20px 22px 90px; }

/* The release page is narrower than the catalogue and has no filter column, so
   its header lines up with 1120px and the wordmark keeps its natural width. */
.top.narrow .topin { max-width: 1120px; grid-template-columns: auto minmax(0, 1fr); gap: 18px; }

.crumbs { font-size: 12.5px; color: var(--dim-2); margin-bottom: 16px; }
.crumbs a { color: var(--dim); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs span { margin: 0 7px; }
.crumbs b { color: var(--dim); font-weight: 500; }

/* ---- hero ---- */

.hero { margin-bottom: 0; }
.hero .stage {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--tint, #05070a);
  transition: background-color 650ms ease-in-out;
}
.hero .layer {
  position: absolute; inset: 0;
  background-image: var(--sprite);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 var(--pos, 0%);
  opacity: 0;
  transition: opacity 650ms ease-in-out;
}
.hero .layer[data-on] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero .layer { transition: none; } }

.hero noscript img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero .dots { position: absolute; right: 14px; bottom: 13px; display: flex; gap: 5px; z-index: 2; }
.hero .dot { all: unset; cursor: pointer; padding: 6px 3px; }
.hero .dot i { display: block; width: 26px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.32); transition: background 200ms; }
.hero .dot[aria-current="true"] i { background: var(--accent); }
.hero .vlabel {
  position: absolute; left: 16px; bottom: 14px; z-index: 2;
  font-size: 12px; letter-spacing: .04em; color: rgba(255,255,255,.82);
  text-shadow: 0 1px 6px rgba(0,0,0,.8);
}

/* ---- the play button and the frame it becomes ---- */

.hero .play {
  all: unset; cursor: pointer;
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center;
  transition: background 200ms;
}
.hero .play:hover { background: rgba(0, 0, 0, .18); }
.hero .play svg { width: 74px; height: 52px; filter: drop-shadow(0 2px 10px rgba(0,0,0,.5)); }
.hero .play .pbg { fill: #1e2229; opacity: .82; transition: fill 160ms, opacity 160ms; }
.hero .play .parrow { fill: #fff; }
.hero .play:hover .pbg { fill: #cc0000; opacity: 1; }
.hero .play:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

.hero iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 4; }

/* Once the video is running the slide markers would fight it for the corner. */
.hero.playing .dots,
.hero.playing .vlabel { display: none; }

/* ---- the top row: the map on the left, everything you came for on the right ----
   Title, tags, facts and the two buttons all sit beside the video, so nothing
   that matters needs scrolling to. What follows is reference material and gets
   the full width. */

.toprow {
  display: grid; grid-template-columns: minmax(0, 1fr) 330px;
  gap: 32px; align-items: start; margin-bottom: 38px;
}
/* The column holds a title, four facts and two buttons — a fixed ~370px. The
   video shrinks with the window, so below this width it would end above the
   column's bottom edge. Rather than let the right side dangle, stack. */
@media (max-width: 1160px) { .toprow { grid-template-columns: 1fr; gap: 22px; } }

.wide { max-width: 100%; }

.release h1 { font-size: 25px; font-weight: 650; margin: -4px 0 10px; letter-spacing: -.01em; line-height: 1.18; }
.release h2 { font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.release .wide h2 + * { margin-bottom: 30px; }

/* Under the video, not in the column: a release can carry two tags or eight,
   and in the column that swing decided how tall the whole right side was. */
.release .tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; }
.release .tags a {
  display: inline-block; text-decoration: none;
  font-size: 12px; color: #a9b1be; background: var(--panel-2);
  border: 1px solid var(--line); padding: 3px 10px; border-radius: 20px;
  transition: color 140ms, border-color 140ms;
}
.release .tags a:hover { color: var(--accent); border-color: rgba(217,164,65,.5); }

.versions {
  list-style: none; margin: 0 0 30px; padding: 0;
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.versions li {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 8px;
  background: #05070a;
}
/* Each thumbnail is a window onto the strip the hero already loaded, offset to
   its own frame. One file, no extra requests. */
.versions .shot {
  display: block; aspect-ratio: 16 / 9;
  background-image: var(--sprite);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 var(--pos, 0%);
}
.versions .shot { background-color: #05070a; }
.versions .noshot { background: var(--panel-2); }
.versions .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 10px 7px;
  font-size: 11.5px; letter-spacing: .03em; color: rgba(255,255,255,.85);
  background: linear-gradient(to top, rgba(5,7,10,.85), transparent);
}

.steps { margin: 0; padding-left: 20px; color: var(--dim); font-size: 14px; }
.steps li { margin-bottom: 9px; }
.steps b { color: var(--ink); font-weight: 600; }
.steps code {
  background: var(--panel-2); border: 1px solid var(--line);
  padding: 1px 5px; border-radius: 4px; font-size: .9em; color: #b6bdc9;
}

/* ---- sidebar ----
   Not sticky any more: it starts at the top of the page, so there is nothing
   for it to follow. */

.facts { margin: 0 0 18px; display: grid; gap: 0; }
.facts div {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 8px 0; border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.facts div:last-child { border-bottom: none; }
.facts dt { color: var(--dim-2); margin: 0; }
.facts dd { margin: 0; color: var(--ink); text-align: right; }

.buy { display: grid; gap: 9px; }
.buy .dl { width: 100%; padding: 11px 4px; }
.buy .hint:not(:empty) { margin: 0 0 4px; font-size: 12px; color: var(--dim-2); line-height: 1.45; }

.buy .dl[data-free] { background: #2f8f4e; color: #f2fff6; }