/* The gate pages (the Obstacle Course and the Cloud Waterfall): built on the Trials' storm theme */
.gpage{position:relative;max-width:1180px;margin:0 auto;padding:40px 20px 60px}
.plate.center{max-width:780px;margin:0 auto;text-align:center}
.plate.center .links{justify-content:center}
.gpage .note{text-align:left}

/* the course gauge: four stretches */
.gauge.course a{min-width:110px}
.gauge.course b{font-size:.92rem}

/* a stretch of five obstacles */
.stretch{margin:70px 0 0;scroll-margin-top:70px}
.stbanner{position:relative;margin:0;border-radius:18px;overflow:hidden;box-shadow:0 0 0 1px rgba(243,208,138,.35),0 24px 60px rgba(0,0,0,.5)}
.stbanner img{display:block;width:100%;height:clamp(200px,34vw,380px);object-fit:cover}
.stbanner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,15,43,0) 45%,rgba(20,15,43,.85) 100%)}
.stbanner figcaption{position:absolute;z-index:1;left:24px;bottom:18px;display:flex;flex-direction:column;gap:2px}
.stbanner figcaption span{font-weight:700;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:#f3d08a}
.stbanner figcaption b{font-family:'Cinzel',serif;font-size:clamp(1.5rem,3.6vw,2.4rem);color:#fff6e0;text-shadow:0 0 14px rgba(243,208,138,.7),0 0 30px rgba(20,15,43,.8)}
.stretch-intro{margin:16px auto 18px;max-width:760px;text-align:center;font-family:'Cormorant Garamond','GFS Didot',Georgia,serif;font-style:italic;font-size:1.25rem;color:#efe4fa}
.obs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.ob{position:relative;display:flex;flex-direction:column;padding:16px 16px 14px;border-radius:16px;background:linear-gradient(160deg,rgba(38,29,78,.9),rgba(28,21,64,.94));border:1px solid rgba(243,208,138,.35);box-shadow:0 14px 34px rgba(0,0,0,.35)}
.ob .num{display:grid;place-items:center;width:40px;height:40px;margin-bottom:10px;border-radius:50%;font-family:'Cinzel',serif;font-weight:700;font-size:1rem;color:#2a1f57;background:radial-gradient(circle at 35% 30%,#fff8e6,#f3d08a 55%,#b9822f);border:3px solid #2a1f57;box-shadow:0 0 0 1.5px #f3d08a,0 0 16px rgba(243,208,138,.5)}
.ob h3{font-size:1.02rem;line-height:1.25;margin-bottom:6px}
.ob p{font-size:.88rem;line-height:1.5;color:#d9cfee;flex:1}
.ob .t{align-self:flex-start;margin-top:10px;padding:3px 11px;border-radius:999px;font-size:.74rem;color:#2a1f57;background:linear-gradient(90deg,#f3d08a,#f0c2dc)}
.finish{margin-top:80px}
.through.finish,.sometimes{display:block}
.sometimes{margin:60px 0}

/* the Cloud Waterfall: fair skies at the top of the page, the tempest at the bottom */
body.cwf{background:linear-gradient(180deg,#2c3a6e 0%,#2a2760 30%,#211a4c 60%,#140f2b 100%)}
.cwf .through.launch{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.cwf .through.launch>img{order:2}
.badday{position:relative;background:#0d0a1f}
.badday video{display:block;width:100%;height:min(82vh,760px);object-fit:cover}
.badday::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#140f2b 0%,rgba(20,15,43,0) 22%,rgba(20,15,43,0) 55%,rgba(20,15,43,.85) 100%)}
.bd-words{position:absolute;z-index:2;left:0;right:0;bottom:6%;text-align:center;padding:0 16px}
.bd-words h2{font-size:clamp(1.6rem,4.6vw,3rem);color:#fff6e0;text-shadow:0 0 6px rgba(255,246,224,.9),0 0 22px rgba(243,208,138,.8),0 0 50px rgba(240,169,207,.55)}
.bd-words .eyebrow{text-shadow:0 0 10px rgba(20,15,43,.9)}
.bd-words .links{justify-content:center}

@media (max-width:1000px){.obs{grid-template-columns:repeat(2,minmax(0,1fr))}.obs .ob:last-child{grid-column:1/3}}
@media (max-width:860px){
  .cwf .through.launch{grid-template-columns:minmax(0,1fr)}.cwf .through.launch>img{order:0}
  .gauge.course a{min-width:0}
  .badday video{height:min(70vh,520px)}
  .bd-words{bottom:4%}
}
@media (max-width:560px){.obs{grid-template-columns:minmax(0,1fr)}.obs .ob:last-child{grid-column:auto}.stbanner figcaption{left:16px;bottom:12px}}
@media (max-width:760px){
  .bd-words .links{gap:6px}
  .bd-words .links .play{padding:6px 12px;font-size:.78rem}
  .bd-words h2{margin-bottom:2px}
}
/* the Tempest buttons, smaller everywhere */
.bd-words .links{gap:8px}
.bd-words .links .play{padding:6px 14px;font-size:.8rem}
@media (max-width:760px){.bd-words .links{gap:5px}.bd-words .links .play{padding:4px 10px;font-size:.68rem}}
.bd-words .links .play{margin:0;line-height:1.3}