html, body {
    margin: 0;
    height: 100%;
    background: black;
    color: white;
}

main {
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

/* --ratio is set per event in event.html. Fit the taller of viewport width or height, leaving room for the lines below. */
#flier {
    position: relative;
    display: block;
    aspect-ratio: var(--ratio);
    width: min(100%, calc((100vh - 140px) * var(--ratio)));
    width: min(100%, calc((100dvh - 140px) * var(--ratio)));
}

#flier img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* Linear so the change is spread evenly across the fade; eased curves bunch it in the middle and read as a jump. */
    transition: opacity 3.5s linear;
}

/* The incoming frame is stacked on top via inline z-index from event.html; the outgoing one stays opaque beneath it. */
#flier img.on {
    opacity: 1;
}

#credit {
    margin: 0;
    font: 11px/1.4 ui-monospace, Menlo, Consolas, monospace;
    letter-spacing: 0.04em;
    color: #777;
}

#credit a {
    color: inherit;
    text-decoration: none;
}

#credit a:hover {
    color: #ccc;
    text-decoration: underline;
}

/* Signup: same voice as the credit line, one field and an arrow. */
#signup {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font: 11px/1.4 ui-monospace, Menlo, Consolas, monospace;
    letter-spacing: 0.04em;
    color: #777;
}

#signup input[name="website"] {
    position: absolute;
    left: -9999px;
}

#signup input[name="email"] {
    width: 25ch;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #333;
    padding: 2px 0;
    font: inherit;
    letter-spacing: inherit;
    color: #ccc;
    outline: none;
}

#signup input[name="email"]::placeholder {
    color: #555;
}

#signup input[name="email"]:focus {
    border-bottom-color: #777;
}

#signup button {
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    color: #777;
    cursor: pointer;
}

#signup button:hover {
    color: #ccc;
}

/* Every event, newest first. Same voice again; the one you are looking at is lit. */
#events {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 2ch;
    font: 11px/1.4 ui-monospace, Menlo, Consolas, monospace;
    letter-spacing: 0.04em;
}

#events a {
    color: #777;
    text-decoration: none;
}

#events a:hover {
    color: #ccc;
    text-decoration: underline;
}

#events a[aria-current] {
    color: #ccc;
}