* { box-sizing: border-box; }
html, body {
  height: 100%;
}

audio {
  outline: none;
}

.carousel {
  background: black;
  height: 100%;
}

.carousel-cell {
  width: 100%;
  height: 100%;
  min-height: 100% !important;
  /* flex-box, center image in cell */
  display: -webkit-box;
  display: -webkit-flex;
  display:         flex;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
}

.carousel-cell img {
  display: block;
  max-width: 108%;
  max-height: 100%;
  /* dim unselected */
  opacity: 0.7;
  -webkit-transform: scale(0.85);
          transform: scale(0.85);
  -webkit-filter: blur(5px) grayscale(100%);
          filter: blur(5px) grayscale(100%);
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s, transform 0.3s, -webkit-filter 0.3s, filter 0.3s;
          transition: opacity 0.3s, transform 0.3s, filter 0.3s;
}

/* brighten selected image */
.carousel-cell.is-selected img {
  max-width: 115%;
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-filter: none;
          filter: none;
  -webkit-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.5);
          box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.5);
  z-index: 10;
}

@media screen and ( min-width: 768px ) {
  .carousel-cell {
    height: 400px;
  }
}

@media screen and ( min-width: 960px ) {
  .carousel-cell {
    width: 50%;
  }
}

.slide-top, .carousel-cell p.slide {
  color: #fff;
  font-size: 4em;
  display: flex;
  position: absolute;
  align-self: flex-end;
  text-align: left;
  /* dim unselected */
  opacity: 0;
  -webkit-transform: scale(0.65);
          transform: scale(0.65);
  -webkit-filter: blur(5px);
          filter: blur(5px);
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s, transform 0.3s, -webkit-filter 0.3s, filter 0.3s;
          transition: opacity 0.3s, transform 0.3s, filter 0.3s;
  order: 1;
}

.carousel-cell p.slide {
  font-style: italic;
  font-size: 1em;
  margin-top: 20px;
  order: 2;
}

.shadow-inset-center {
  -webkit-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
     -moz-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
          box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
}

.carousel-cell.is-selected h1 {
  height: auto;
  font-size: 2.8vw;
  border-bottom: 2px solid #ffffff;
  color: #fff;
  margin-bottom: 25px;
  text-transform: uppercase;
}

.carousel-cell.is-selected p.tagline, .carousel-cell.is-selected p.intro {
  font-size: 2vw;
  color: #E79425;
  text-align: center;
  clear:both;
}

.carousel-cell.is-selected p.tagline span.animate1,
.carousel-cell.is-selected p.tagline span.animate2,
.carousel-cell.is-selected p.tagline span.animate3,
.carousel-cell.is-selected p.tagline span.animate4,
.carousel-cell.is-selected p.tagline span.animate5,
.carousel-cell.is-selected p.tagline span.animate6,
.carousel-cell.is-selected p.credits,
.carousel-cell.is-selected p.intro {
  opacity:0;
}

.carousel-cell.is-selected p.intro {
  max-width: 62%;
  color: #fff;
  text-align: center;
  font-size: 1.25vw;
}

.carousel-cell.is-selected p.credits {
  font-size: 0.9vw;
  color: #929292;
  margin-top:40px;
}


.carousel-cell .info-widget {
  display: flex;
  min-width: 100%;
  color: #fff;
  opacity: 0;
  margin-top:15px;
}

.carousel-cell .info-widget .left, .carousel-cell .info-widget .right {
  display: flex;
  color: #fff;
  align-items: center;
}

.carousel-cell .info-widget .left {
  min-width: 95%;
}

.carousel-cell .info-widget .right {
  min-width: 5%;
  justify-content: flex-end;
}

.carousel-cell .info-widget .left h4, .carousel-cell .info-widget .left p {
  margin:0;
  align-items: baseline;
}

.carousel-cell .info-widget .left h4 {
  color: #E79425;
}

.carousel-cell .info-widget .left p {
  font-style: italic;
  padding:0 0 0 25px;
  margin: 5px 0 0 0;
}

.carousel-cell .info-widget .right .icon:hover {
  fill: #E79425;
  cursor: pointer;
  -webkit-transition: fill 1s;
          transition: fill 1s;
}

.carousel-cell.is-selected .info-widget {
  min-width: 115%;
  opacity: 1;
  z-index: 11;
}

.carousel-cell .info-panel {
  position: absolute;
  display: none;
  background-color: rgba(0, 0, 0, 0.75);
  border: 8px solid #302e2f;
}

.carousel-cell.is-selected .info-panel {
  min-width:115%;
  padding:0px 40px;
  color: #fff;
  opacity: 1;
  z-index: 11;
  display:flex;
  flex-direction: column;
  justify-content: center;
}

.carousel-cell.is-selected .info-panel h5 {
  font-size: 1.25vw;
  color: #E79425;
}

.carousel-cell.is-selected .info-panel h5 .misc {
  color:#ffffff;
}

.carousel-cell.is-selected .info-panel p {
  font-size: 1.25vw;
}

.hide {
  opacity:0;
}

@-webkit-keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-60px);
            transform: translateY(-60px);
  }
}
@keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-40px);
            transform: translateY(-40px);
  }
}

/* buttons, no circle */
.flickity-prev-next-button {
  width: 60px;
  height: 60px;
  background: transparent;
  opacity: 0.6;
  -webkit-transition: opacity 1s;
          transition: opacity 1s;
}
.flickity-prev-next-button:hover {
  background: transparent;
  opacity: 1;
  -webkit-transition: opacity 1s;
          transition: opacity 1s;
}
/* arrow color */
.flickity-prev-next-button .arrow {
  fill: #E79425;
}
.flickity-prev-next-button.no-svg {
  color: #E79425;
}
/* closer to edge */
.flickity-prev-next-button.previous { left: 0; }
.flickity-prev-next-button.next { right: 0; }
/* hide disabled button */
.flickity-prev-next-button:disabled {
  display: none;
}

@media only screen and (max-width:420px) {
  .carousel-cell.is-selected h1 {
    font-size:5vw;
    margin-bottom: 10px;
  }

  .carousel-cell.is-selected p.tagline, .carousel-cell.is-selected p.intro {
    font-size: 3.8vw;
  }

  .carousel-cell.is-selected p.intro {
    font-size: 3.2vw;
  }

  .carousel-cell.is-selected p.credits {
    font-size: 2.2vw;
    margin-top:0px;
  }
  .carousel-cell.is-selected img {
    max-width: 100%;
  }
  .carousel-cell.is-selected .info-widget {
    min-width: 100%;
  }
}



@media only screen and (min-width:768px) {
  .carousel-cell .info-widget .left {
    padding-left: 25px;
  }

  .carousel-cell.is-selected h1 {
    font-size:4vw;
  }

  .carousel-cell.is-selected p.tagline, .carousel-cell.is-selected p.intro {
    font-size: 3.5vw;
  }

  .carousel-cell.is-selected p.intro {
    font-size: 2.5vw;
  }

  .carousel-cell.is-selected p.credits {
    font-size: 1.8vw;
  }
  .carousel-cell.is-selected img {
    max-width: 100%;
  }
  .carousel-cell.is-selected .info-widget {
    min-width: 100%;
  }

  .carousel-cell.is-selected .info-panel {
    padding: 0 200px;
  }

  .carousel-cell.is-selected .info-panel h5, .carousel-cell.is-selected .info-panel h5 .misc {
    font-size:3vw;
  }
  .carousel-cell.is-selected .info-panel p {
    font-size:2.25vw;
  }
}

@media only screen and (min-width:1024px) {
  .carousel-cell .info-widget .left {
    padding-left: 0px;
  }

  .carousel-cell.is-selected h1 {
    font-size:4vw;
  }

  .carousel-cell.is-selected p.tagline, .carousel-cell.is-selected p.intro {
    font-size: 2.5vw;
  }

  .carousel-cell.is-selected p.intro {
    font-size: 1.8vw;
  }

  .carousel-cell.is-selected p.credits {
    font-size: 1.25vw;
    margin-top:25px;
  }

  .carousel-cell.is-selected .info-panel {
    padding: 0 40px;
  }

  .carousel-cell.is-selected .info-panel h5, .carousel-cell.is-selected .info-panel h5 .misc {
    font-size:1.8vw;
  }
  .carousel-cell.is-selected .info-panel p {
    font-size:1.25vw;
  }
}

@media only screen and (min-width:1280px) {
  .carousel-cell.is-selected h1 {
    font-size:3vw;
  }

  .carousel-cell.is-selected p.tagline, .carousel-cell.is-selected p.intro {
    font-size: 1.8vw;
  }

  .carousel-cell.is-selected p.intro {
    font-size: 1.2vw;
  }

  .carousel-cell.is-selected p.credits {
    font-size: 1vw;
    margin-top:25px;
  }
}

/* Archive repair: keep every portrait and detail control within the viewport. */
.carousel{height:calc(100vh - 64px);min-height:520px;margin-top:64px}
.carousel-cell{width:100%;height:100%;padding:12px 54px 70px;overflow:hidden}
.carousel-cell img,.carousel-cell.is-selected img{max-width:100%;max-height:calc(100% - 84px);object-fit:contain;transform:none}
.carousel-cell .info-widget,.carousel-cell.is-selected .info-widget{width:100%;min-width:0;gap:16px;align-items:center;flex-shrink:0}
.carousel-cell .info-widget .left{min-width:0;flex:1;flex-wrap:wrap;padding:0;gap:4px 16px}
.carousel-cell .info-widget .left h4{font-size:clamp(18px,2vw,26px);line-height:1.3}
.carousel-cell .info-widget .left p{font-size:16px;line-height:1.4;padding:0;margin:0}
.carousel-cell .info-widget .right{min-width:44px;min-height:44px;padding:9px;border:2px solid #e79425;border-radius:6px;background:#111;cursor:pointer;flex-shrink:0}
.carousel-cell .info-widget .right:focus-visible{outline:3px solid #fff;outline-offset:4px}
.carousel-cell .info-panel,.carousel-cell.is-selected .info-panel{position:absolute;inset:12px 54px 120px;min-width:0;width:auto;height:auto!important;padding:24px;overflow:auto;border:2px solid #e79425;background:rgba(0,0,0,.94);justify-content:flex-start;display:flex}
.carousel .info-panel[hidden]{display:none!important}
.carousel-cell.is-selected .info-panel h5,.carousel-cell.is-selected .info-panel h5 .misc{font-size:20px;line-height:1.4}
.carousel-cell.is-selected .info-panel p{font-size:18px;line-height:1.6}
.carousel-cell.is-selected .info-panel audio{width:100%;min-height:48px;flex-shrink:0}
.carousel-cell.is-selected h1{font-size:clamp(25px,4vw,46px);text-align:center}
.carousel-cell.is-selected p.tagline,.carousel-cell.is-selected p.intro{font-size:clamp(17px,2.2vw,26px);max-width:850px;line-height:1.5;text-align:center}
.carousel-cell.is-selected p.credits{font-size:16px;line-height:1.5;margin-top:20px;text-align:center}
.carousel-cell.is-selected p.tagline span,.carousel-cell.is-selected p.intro,.carousel-cell.is-selected p.credits{opacity:1}
@media(max-width:520px){.carousel-cell{padding:12px 38px 65px}.carousel-cell .info-widget .left h4{font-size:18px}.carousel-cell .info-widget .left p{font-size:14px}.carousel-cell.is-selected .info-panel{inset:12px 38px 140px;padding:16px}.flickity-prev-next-button{width:38px}}
@media(prefers-reduced-motion:reduce){.carousel *{transition:none!important;animation:none!important}}

/* Native top-layer dialogs keep text inside the viewport and manage keyboard focus. */
.carousel-cell dialog.info-panel,.carousel-cell.is-selected dialog.info-panel{position:fixed;inset:82px max(16px,calc((100vw - 840px)/2)) 20px;margin:0;width:auto;min-width:0;max-width:840px;max-height:calc(100dvh - 102px);height:auto!important;box-sizing:border-box;padding:22px;overflow:auto;display:flex;color:#fff;background:#111;border:2px solid #e79425;justify-content:flex-start}
.carousel-cell dialog.info-panel::backdrop{background:rgba(0,0,0,.8)}
.carousel-cell dialog.info-panel>*{flex-shrink:0}
.portrait-close{align-self:flex-end;min-height:44px;margin:0 0 14px;padding:8px 14px;border:2px solid #e79425;border-radius:4px;background:#111;color:#fff;font:16px/1.4 system-ui,sans-serif;cursor:pointer}
@media(max-width:520px){.carousel-cell.is-selected dialog.info-panel{inset:78px 12px 12px;padding:18px;max-height:calc(100dvh - 90px)}}