/* Keskuspuiston Grand · the one form of the site (lomake.js). White on the dark of an ending or of the pop-up.
   Where an ending holds the form, the film's lower part is darkened clearly under it. */
.avoin:has(.gl){background:linear-gradient(rgba(6,18,24,0),rgba(6,18,24,.45) 22%,rgba(6,18,24,.78) 48%,rgba(4,14,19,.92))}
.avoin:has(.gl) h2{font-size:3.6vw}

.gl{width:min(100%,44rem); margin:5vh auto 0; text-align:left; font-family:var(--sans); color:#fff}
.gl [hidden]{display:none !important}
.gl-otsikko{font-family:var(--antiikva); font-weight:300; font-size:3.4vw; line-height:1.05; letter-spacing:-.01em; text-align:center}
.gl-mita{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px; margin-top:26px}
.gl-mita button{display:inline-flex; align-items:center; gap:11px; padding:6px 0; font-family:var(--antiikva); font-style:italic; font-size:22px; line-height:1.1; color:#fff}
.gl-mita i{flex:none; position:relative; width:20px; height:20px; border:1.5px solid rgba(255,255,255,.85); border-radius:3px; transition:background .2s}
.gl-mita .valittu i{background:#efedeb; border-color:#efedeb}
.gl-mita .valittu i::after{content:""; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid #001f2e; border-width:0 2px 2px 0; transform:rotate(45deg)}
.gl-kentat{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:26px}
.gl-kentta{display:flex; flex-direction:column; gap:7px; min-width:0}
.gl-kentta span{font-size:13px; font-weight:500; letter-spacing:.02em; color:rgba(255,255,255,.88)}
.gl-kentta span::after{content:" *"; opacity:.7}
.gl-kentta input{width:100%; min-width:0; height:52px; padding:0 14px; border:1px solid rgba(255,255,255,.6); border-radius:3px; background:rgba(255,255,255,.1); color:#fff; font-family:var(--sans); font-size:17px; -webkit-appearance:none; appearance:none; transition:border-color .2s, background .2s}
.gl-kentta input:focus{outline:none; border-color:#fff; background:rgba(255,255,255,.16)}
.gl-kentta.puuttuu input{border-color:#f0b58f; background:rgba(240,181,143,.12)}
.gl-piilo{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.gl-laheta{display:flex; align-items:center; justify-content:center; gap:12px; width:100%; height:58px; margin-top:18px; border-radius:3px; background:#efedeb; color:#001f2e; font-family:var(--antiikva); font-style:italic; font-size:24px; transition:background .25s, opacity .25s}
.gl-laheta span{font-style:normal; transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.gl-laheta:hover{background:#fff}
.gl-laheta:hover span{transform:translateX(5px)}
.gl.lahtee .gl-laheta{opacity:.6; pointer-events:none}
.gl-viesti{margin-top:.9em; font-size:14px; font-weight:400; line-height:1.5; text-align:center}
.gl-viesti:empty{display:none}
.gl-kiitos{text-align:center; animation:gl-tulee .7s cubic-bezier(.2,.7,.2,1) both}
.gl-kiitos b{display:block; font-family:var(--antiikva); font-weight:300; font-size:3.4vw; line-height:1.1}
.gl-kiitos p{margin-top:.9em; font-size:15px; font-weight:400; line-height:1.5}
.gl-kiitos a{border-bottom:1px solid currentColor}
@keyframes gl-tulee{from{opacity:0; transform:translateY(14px)}}

/* the pop-up */
.gl-lukittu,.gl-lukittu body{overflow:hidden}
.gl-tausta{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:24px; overflow-y:auto; background:rgba(4,14,19,.82); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); opacity:0; transition:opacity .35s}
.gl-tausta.on{opacity:1}
.gl-ikkuna{position:relative; width:min(100%,50rem); padding:46px 48px 44px; transform:translateY(16px); transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.gl-tausta.on .gl-ikkuna{transform:none}
.gl-ikkuna .gl{margin-top:0}
.gl-kiinni{position:absolute; right:0; top:0; width:44px; height:44px; font-family:var(--sans); font-size:30px; font-weight:300; line-height:1; color:#fff; opacity:.8}
.gl-kiinni:hover{opacity:1}

@media (max-width:760px){
  .avoin:has(.gl){background:linear-gradient(rgba(6,18,24,0),rgba(6,18,24,.6) 10svh,rgba(6,18,24,.8) 30%,rgba(4,14,19,.93))}
  .avoin:has(.gl) h2{font-size:9vw}
  .avoin:has(.gl) .keski{padding-bottom:5svh}
  .gl{margin-top:7vw}
  .gl-otsikko,.gl-kiitos b{font-size:9.4vw}
  .gl-mita{flex-direction:column; align-items:flex-start; gap:4px; width:fit-content; margin:18px auto 0}
  .gl-mita button{font-size:21px}
  .gl-kentat{grid-template-columns:minmax(0,1fr); gap:12px; margin-top:20px}
  .gl-kentta input{height:50px; font-size:16px}
  .gl-tausta{place-items:start center; padding:56px 16px 24px}
  .gl-ikkuna{padding:8px 0 0}
  .gl-kiinni{top:-46px}
}