/* The five chapter links are frames from the journey, with their native aspect. */
.journey-chapter h2{text-wrap:balance}
.journey-console .era-route{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:7px;
  margin-top:20px;
  padding:14px 9px 12px;
  border:1px solid rgb(var(--journey-accent) / .16);
  border-radius:13px;
  background:rgb(var(--journey-bg) / .78);
  box-shadow:0 7px 22px #0002;
  isolation:isolate;
}
.journey-console .era-route::before,
.journey-console .era-route::after{
  content:"";
  position:absolute;
  left:9px;
  right:9px;
  height:3px;
  background:radial-gradient(ellipse,rgb(var(--journey-accent) / .29) 47%,transparent 53%) 0 0/13px 3px;
  pointer-events:none;
}
.journey-console .era-route::before{top:5px}
.journey-console .era-route::after{bottom:4px}
.journey-console .era-route a{
  display:grid;
  grid-template-rows:auto auto;
  align-content:start;
  gap:6px;
  min-width:0;
  min-height:44px;
  padding:0;
  border-radius:6px;
  color:#c3c4b9;
  background:transparent;
  transition:color .22s,transform .22s;
}
.journey-console .era-route .era-frame{
  position:relative;
  display:block;
  width:100%;
  max-width:112px;
  aspect-ratio:16/9;
  overflow:hidden;
  border:1px solid rgb(var(--journey-accent) / .15);
  border-radius:5px;
  background:#000;
  box-shadow:0 2px 6px #0003;
  transition:border-color .22s,box-shadow .22s;
}
.journey-console .era-route img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering:pixelated;
  opacity:.66;
  transition:opacity .22s;
}
.journey-console .era-route .era-frame-number{
  position:absolute;
  left:3px;
  bottom:3px;
  padding:2px 3px;
  border-radius:3px;
  background:#10120ed9;
  color:#f4e4bf;
  font:7px Consolas,monospace;
  letter-spacing:.4px;
  line-height:1;
}
.journey-console .era-route .era-route-label{
  color:inherit;
  font:9px Consolas,monospace;
  letter-spacing:0;
  line-height:1.35;
  white-space:nowrap;
}
.journey-console .era-route a.is-current,
.journey-console .era-route a:hover{
  background:transparent;
  color:rgb(var(--journey-accent));
  transform:translateY(-3px);
}
.journey-console .era-route a.is-current .era-frame{
  border-color:rgb(var(--journey-accent) / .85);
  box-shadow:0 0 0 1px rgb(var(--journey-accent) / .16),0 4px 12px #0005;
}
.journey-console .era-route a:is(.is-current,:hover,:focus-visible) img{opacity:1}
.journey-console .journey-progress{margin-top:9px}
.motion-paused .journey-console .era-route a,
.motion-paused .journey-console .era-route .era-frame,
.motion-paused .journey-console .era-route img{transition:none}
@media(max-width:800px){
  .journey-console .era-route{gap:6px;margin-top:11px;padding:12px 7px 10px}
  .journey-console .era-route .era-frame{max-width:95px}
  .journey-console .era-route .era-route-label{font-size:9px}
  .journey-console .journey-progress{margin-top:7px}
}
@media(max-width:480px){
  .journey-console .era-route{gap:5px;margin-top:9px;padding-inline:5px;border-radius:10px}
  .journey-console .era-route a{gap:5px}
  .journey-console .era-route .era-route-label{font-size:8px}
  .journey-console .era-route .era-frame-number{font-size:6px;left:2px;bottom:2px;padding:2px}
}
@media(max-width:360px){
  .journey-console .era-route{gap:4px}
  .journey-console .era-route .era-route-label{font-size:7px}
}
@media(max-height:560px){
  .journey-console .era-route{margin-top:7px;padding-block:11px 9px}
  .journey-console .era-route .era-frame{max-width:64px}
  .journey-console .era-route a{gap:4px}
  .journey-console .era-route .era-route-label{font-size:8px}
  .journey-console .journey-progress{margin-top:6px}
}
@media(prefers-reduced-motion:reduce){
  .journey-console .era-route a,
  .journey-console .era-route .era-frame,
  .journey-console .era-route img{transition:none}
}