/* Speck, the dive. One canvas, one dot, sixteen worlds. The parts themselves live in speck.css. */
body{overscroll-behavior:none}

#gl{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block;z-index:0}

body.atmark .mark{opacity:0;transform:translateY(-12px);pointer-events:none}

/* the finder */
.finder{position:fixed;left:0;top:0;z-index:15;width:var(--d);height:var(--d);margin:calc(var(--d)/-2) 0 0 calc(var(--d)/-2);border-radius:50%;padding:0;border:0;background:none;cursor:pointer;transition:opacity .35s;--d:34px}
.finder.off{opacity:0;pointer-events:none}
.finder.bare span{display:none}
.finder.flip span{left:auto;right:-4px;top:calc(100% + 10px)}

/* chapters */
.ch{position:fixed;inset:0;z-index:10;pointer-events:none;opacity:0;transition:opacity .45s}
.ch *{pointer-events:none!important}
.ch.on{opacity:1;transition:opacity .6s .1s}
.ch.on .card,.ch.on .open,.ch.on .strip,.ch.on .loupe{pointer-events:auto!important}
.ch.on .card *,.ch.on .open *,.ch.on .strip *{pointer-events:auto!important}
.card{position:absolute;left:var(--pad);bottom:var(--pad);width:min(400px,calc(100vw - var(--pad)*2 - 30px));transform:translateY(26px);transition:transform .7s var(--ease)}
.p-br .card{left:auto;right:calc(var(--pad) + 34px)}
.p-bc .card{left:50%;margin-left:max(-200px,calc(var(--pad) + 15px - 50vw))}
.ch.on .card{transform:none}
/* a wide label, for a painting that is one long horizon */
.p-wide .card{width:min(840px,calc(100vw - var(--pad)*2 - 60px));grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:30px}
.p-wide .card .no,.p-wide .card h2{grid-column:1/-1}
.p-wide .card .msgs{align-self:start}

/* the loupe on the first screen: a button the size of the enlarged full stop, with its caption underneath */
.loupe{position:absolute;border:0;padding:0;border-radius:50%;background:none;cursor:pointer;transition:opacity .3s}
.loupe[hidden]{display:none}
.loupe.off,.ch.on .loupe.off{opacity:0;pointer-events:none!important}
.loupe span{position:absolute;left:50%;top:calc(100% + 13px);transform:translateX(-50%);white-space:nowrap;font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.loupe:hover span,.loupe:focus-visible span{color:var(--pink)}

/* the paintings, as dots, on the first screen */
.strip{position:absolute;left:max(16px,5vw);right:calc(var(--pad) + 40px);bottom:var(--pad)}

.open{position:absolute;left:max(16px,5vw);top:48%;width:min(520px,calc(100vw - 32px - var(--pad)));display:grid;gap:14px;justify-items:start;pointer-events:auto}
.open p{font-size:16.5px;line-height:1.45;max-width:44ch}
.end .open{width:min(820px,calc(100vw - 32px - var(--pad) - 40px));top:44.5%;gap:12px}
@media (max-height:860px){.end .strip{display:none}}
.rsv-open .end .strip{display:none}
.end .stub{align-content:center}
@media (max-height:640px){.strip{display:none}}

@media (max-width:700px){
  .card,.p-br .card,.p-bc .card,.p-wide .card{left:10px;right:10px;bottom:10px;width:auto;margin:0}
  .p-wide .card{grid-template-columns:minmax(0,1fr)}
  .strip{left:16px;right:30px;bottom:14px}
  .open{top:35%;left:16px}
  .end .open{top:28%}
  .end .strip{display:none}
  .end .shot{display:none}
  .rsv-open .end .ticket>div:first-of-type,.rsv-open .end .tag{display:none}
  .rsv-open .end .open{top:30%}
  .rsv-done .end .tag{display:none}
}
@media (max-width:700px) and (max-height:740px){
  .end .tag{display:none}
  .end .open{top:27.5%;gap:10px}
  .end .ticket>div{padding:10px 14px}
  .end .ticket ul{font-size:13px;gap:2px}
  .end .ticket h2{margin-bottom:6px}
  .end .stub{padding-top:22px!important}
  .end .stub b{font-size:44px}
  .end .legal{padding:6px 14px;font-size:10px!important}
}
@media (min-width:701px) and (max-height:780px){.rsv-open .end .links{display:none}}