/* Kiosk: full-screen collage of the birds heard at one station, on a cream "plate" background */
:root {
    --kiosk-bg: #f1ece0;
    --kiosk-ink: #2b2620;
    --kiosk-muted: #7a7062;
}

html, body { margin: 0; height: 100%; overflow: hidden; background: var(--kiosk-bg); color: var(--kiosk-ink); }
body { font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; }

/* Top inset keeps the birds below the toolbar (1rem offset + ~1.75rem pills + gap) */
.kiosk { position: fixed; inset: 3.5rem 0 2rem 0; }

.kiosk-bird {
    position: absolute;
    margin: 0;
    transition: left .8s ease, top .8s ease, width .8s ease, opacity .8s ease;
    opacity: 0;
}
.kiosk-bird.is-placed { opacity: 1; }
.kiosk-bird img { display: block; width: 100%; height: auto; }
.kiosk-bird figcaption {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    font-style: italic;
    white-space: nowrap;
    line-height: 1.2;
}
.kiosk-bird figcaption small { color: var(--kiosk-muted); font-size: .7em; margin-left: .3em; }

.kiosk-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 1.5rem;
    padding: 2rem 2rem 4rem;
    font-style: italic;
    font-size: 1.5rem;
    color: var(--kiosk-muted);
}
/* The twig plate is drawn on white: multiply blends it into the cream background */
.kiosk-empty img { width: min(60vw, 60vh); height: auto; mix-blend-mode: multiply; }
.kiosk-empty p { margin: 0; text-align: center; }

.kiosk-caption {
    position: fixed;
    inset: auto 0 0 0;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    font-size: .85rem;
    font-style: italic;
    color: var(--kiosk-muted);
}
.kiosk-caption a { color: inherit; }

/* Top right: back to the station + period toggle, quiet pills that only stand out on hover */
.kiosk-toolbar {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.kiosk-back {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: rgb(43 38 32 / .05);
    color: var(--kiosk-muted);
    opacity: .55;
    transition: opacity .3s ease, color .3s ease;
}
.kiosk-back:hover, .kiosk-back:focus-visible { opacity: 1; color: var(--kiosk-ink); }
.kiosk-back svg { width: .9rem; height: .9rem; }
.kiosk-periods {
    display: flex;
    gap: .15rem;
    padding: .2rem;
    border-radius: 999px;
    background: rgb(43 38 32 / .05);
    opacity: .55;
    transition: opacity .3s ease;
}
.kiosk-periods:hover, .kiosk-periods:focus-within { opacity: 1; }
.kiosk-periods a {
    padding: .25rem .7rem;
    border-radius: 999px;
    font: 600 .7rem/1.2 system-ui, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--kiosk-muted);
}
.kiosk-periods a:hover { color: var(--kiosk-ink); }
.kiosk-periods a[aria-current="true"] { background: var(--kiosk-ink); color: var(--kiosk-bg); }