:root { --bg: #0b0b0b; --fg: #eee; --dim: #7a7a7a; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); }
body { font: 15px/1.4 system-ui, sans-serif; display: flex; flex-direction: column; height: 100dvh; overflow: hidden;
       -webkit-tap-highlight-color: transparent; user-select: none; }

main { position: relative; flex: 1; min-height: 0; cursor: pointer; }
#slide { margin: 0; height: 100%; display: flex; flex-direction: column; opacity: 0; transition: opacity .6s ease; }
#slide.on { opacity: 1; }
#frame { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 4vh 4vw 0; }
#img { width: 100%; height: 100%; object-fit: contain; }
#caption { font: 400 clamp(19px, 2.6vw, 30px)/1.35 Georgia, "Times New Roman", serif; text-align: center;
           padding: 1.2rem 8vw 1rem; min-height: 4.5rem; text-wrap: balance; }

#beat, #loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
                  color: var(--dim); letter-spacing: .6em; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
#beat.on, #loading.on { opacity: 1; }
#loading { letter-spacing: .15em; font-family: Georgia, serif; }

footer { font-size: 11px; color: var(--dim); text-align: center; padding: 0 1rem .4rem; min-height: 1.6em;
         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
footer a { color: var(--dim); }

nav { display: flex; justify-content: space-between; padding: .2rem 1rem calc(.6rem + env(safe-area-inset-bottom)); }
nav button, nav a { background: none; border: 0; color: var(--dim); font: inherit; font-size: 12px; cursor: pointer;
                    text-decoration: none; padding: .3rem 0; }
nav button:hover, nav a:hover { color: var(--fg); }

/* about page */
.page { overflow: auto; height: auto; min-height: 100dvh; display: block; user-select: text; }
.page article { max-width: 36rem; margin: 0 auto; padding: 3rem 1.5rem 4rem; font: 17px/1.6 Georgia, serif; }
.page h1 { font-weight: 400; letter-spacing: .05em; }
.page a { color: var(--fg); }
.page .dim { color: var(--dim); font-size: 14px; }