*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

[hidden] {
    display: none !important;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scrollbar-color: var(--ink-4) var(--ink-1);
}

body {
    min-height: 100dvh;
    background: var(--ground);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--size-body);
    font-weight: var(--weight-body);
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--edition);
    color: var(--on-edition);
}

:focus-visible {
    outline: var(--edge) solid var(--focus);
    outline-offset: 3px;
}

input,
button {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

/* A song title inside a sentence: the title of a work. */
cite {
    font-style: italic;
    font-weight: var(--weight-medium);
}

a {
    color: inherit;
    text-decoration-thickness: var(--hairline);
    text-underline-offset: 0.2em;
}

.icon {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
}

/* Tier: the narrow caps line every super carries. */
.tier {
    font-stretch: var(--narrow);
    font-size: var(--size-tier);
    font-weight: var(--weight-strong);
    letter-spacing: var(--track-tier);
    line-height: 1.2;
    text-transform: uppercase;
}

/* Credit: the mixed-case second tier for names and artists, which run long. */
.credit {
    font-stretch: var(--narrow);
    font-size: var(--size-small);
    font-weight: var(--weight-strong);
    letter-spacing: 0.01em;
    line-height: 1.3;
}

/* Countdown: the figures carry the read; each unit follows as a muted cap. Each clock sets --figure and --unit;
   --raise lifts a unit (or a tier beside the figures) so its caps centre on theirs: Archivo's caps are 0.7em. */
[data-clock] {
    --raise: calc((var(--figure) - var(--unit)) * 0.35);
}

[data-clock] time {
    font-size: var(--figure);
}

.countdown__unit {
    color: var(--text-muted);
    font-size: var(--unit);
    font-weight: var(--weight-strong);
    letter-spacing: var(--track-tier);
    text-transform: uppercase;
    vertical-align: var(--raise);
}

/* The Sign Rule: a selected vote is filled by its sign (tokens --sign, --on-sign); sign_class() sets it. */
.sign--negative {
    --sign: var(--vermilion);
    --on-sign: var(--on-vermilion);
}

.sign--positive {
    --sign: var(--edition);
    --on-sign: var(--on-edition);
}

.sign--joker {
    --sign: var(--spotlight);
    --on-sign: var(--on-spotlight);
}

/* Band: the edition slab, run to the edge of the frame. */
.band {
    background: var(--edition);
    color: var(--on-edition);
}

.band--failure {
    background: var(--vermilion);
    color: var(--on-vermilion);
}

/* Slab: a key the voter presses. */
.slab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: var(--control);
    padding: 0 var(--space-5);
    border: 0;
    background: var(--ink-10);
    color: var(--ink-0);
    text-decoration: none;
    font-stretch: var(--narrow);
    font-size: var(--size-small);
    font-weight: var(--weight-super);
    letter-spacing: var(--track-tier);
    text-transform: uppercase;
    transition: background-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out);
}

.slab:hover {
    background: var(--edition);
    color: var(--on-edition);
}

.slab--quiet {
    background: var(--ink-2);
    color: var(--text);
}

.slab--quiet:hover {
    background: var(--ink-3);
    color: var(--text);
}

/* Motion grammar: a masked wipe for slabs, a masked rise for type, a settle for the rest.
   Both ends of a wipe are insets: from an inset to `none` clip-path does not interpolate, it jumps. */
@keyframes wipe {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0);
    }
}

@keyframes unwipe {
    from {
        clip-path: inset(0);
    }

    to {
        clip-path: inset(0 0 0 100%);
    }
}

@keyframes rise {
    from {
        transform: translateY(105%);
    }
}

@keyframes settle {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }
}

.wipe {
    animation: wipe var(--dur-wipe) var(--ease-out) backwards;
    animation-delay: calc(var(--step, 0) * var(--stagger));
}

.rise {
    display: block;
    overflow: clip;
}

.rise > span {
    display: block;
    animation: rise var(--dur-rise) var(--ease-out) backwards;
    animation-delay: calc(var(--step, 0) * var(--stagger));
}

.settle {
    animation: settle var(--dur-rise) var(--ease-out) backwards;
    animation-delay: calc(var(--step, 0) * var(--stagger));
}

/* Masthead: the persistent broadcast bar of a signed-in voter. */
.masthead {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--space-5);
    min-height: var(--masthead);
    padding: 0 var(--gutter);
    background: var(--ink-0);
    box-shadow: inset 0 calc(-1 * var(--hairline)) 0 var(--rule);
}

.masthead__mark {
    order: -2;
    font-stretch: var(--wide);
    font-size: var(--size-small);
    font-weight: var(--weight-super);
    letter-spacing: 0.02em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.masthead__mark b {
    margin-left: 0.15em;
    padding: 0.1em 0.3em;
    background: var(--edition);
    color: var(--on-edition);
    font-weight: inherit;
}

/* Inline, the pages, the voter and the sign-out join the bar; folded, they drop from the « Menu » key. */
.masthead__pages {
    display: contents;
}

.masthead__menu {
    display: none;
    margin-left: auto;
    padding: 0 var(--space-4);
}

.masthead__menu .icon:nth-of-type(2),
.masthead:has(.masthead__pages:popover-open) .masthead__menu .icon:first-of-type {
    display: none;
}

.masthead:has(.masthead__pages:popover-open) .masthead__menu .icon:nth-of-type(2) {
    display: block;
}

.site-nav {
    order: -1;
    align-self: stretch;
    display: flex;
    margin-left: calc(-1 * var(--space-2));
}

.site-nav__link {
    display: flex;
    align-items: center;
    padding: 0 var(--space-3);
    color: var(--text-muted);
    text-decoration: none;
    font-stretch: var(--narrow);
    font-size: var(--size-small);
    font-weight: var(--weight-strong);
    letter-spacing: var(--track-tier);
    text-transform: uppercase;
    white-space: nowrap;
    transition: color var(--dur-quick) var(--ease-out), background-color var(--dur-quick) var(--ease-out);
}

.site-nav__link:hover,
.site-nav__link[aria-current] {
    color: var(--text);
}

/* The current page carries the edition edge on the masthead's rule. */
.site-nav__link[aria-current] {
    box-shadow: inset 0 calc(-1 * var(--edge)) 0 var(--edition);
}

.site-nav__link:focus-visible {
    outline-offset: -3px;
}

.masthead__voter {
    min-width: 0;
    margin-left: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.masthead__out {
    width: var(--control);
    min-height: var(--control);
    padding: 0;
}

/* Folded: a panel under the bar, the pages as a running order, the current one on its edition slab. */
.masthead__pages:popover-open {
    position: fixed;
    inset: var(--masthead) 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    width: auto;
    max-height: calc(100dvh - var(--masthead));
    margin: 0;
    padding: 0 0 var(--space-4);
    overflow-y: auto;
    border: 0;
    background: var(--ink-1);
    color: var(--text);
    box-shadow: inset 0 calc(-1 * var(--hairline)) 0 var(--rule);
    animation: wipe var(--dur-wipe) var(--ease-out);
}

.masthead__pages:popover-open .site-nav {
    grid-column: 1 / -1;
    display: grid;
    margin: 0 0 var(--space-4);
}

.masthead__pages:popover-open .site-nav__link {
    min-height: 3.5rem;
    padding: 0 var(--gutter);
    color: var(--text);
    font-stretch: var(--wide);
    font-size: var(--size-lead);
    font-weight: var(--weight-super);
    letter-spacing: 0.02em;
    box-shadow: inset 0 calc(-1 * var(--hairline)) 0 var(--ink-2);
    animation: settle var(--dur-rise) var(--ease-out) backwards;
    animation-delay: calc(var(--step, 0) * var(--stagger));
}

.masthead__pages:popover-open .site-nav__link:nth-child(2) {
    --step: 1;
}

.masthead__pages:popover-open .site-nav__link:nth-child(3) {
    --step: 2;
}

.masthead__pages:popover-open .site-nav__link[aria-current] {
    background: var(--edition);
    color: var(--on-edition);
    box-shadow: none;
}

.masthead__pages:popover-open .masthead__voter {
    margin: 0;
    padding: 0 var(--space-4) 0 var(--gutter);
    color: var(--text-muted);
    white-space: normal;
}

.masthead__pages:popover-open .masthead__exit {
    margin-right: var(--gutter);
}

@media (hover: hover) {
    .masthead__pages:popover-open .site-nav__link:not([aria-current]):hover {
        background: var(--ink-2);
    }
}

@media (max-width: 48rem) {
    .masthead__menu {
        display: inline-flex;
    }

    .masthead__pages:not(:popover-open) {
        display: none;
    }
}

@media (max-width: 30rem) {
    .masthead {
        gap: var(--space-3);
    }

    .masthead__mark {
        font-size: var(--size-tier);
    }
}

/* Title card: the opening graphic, and every full-screen statement after it. */
.title-card {
    display: grid;
    align-content: center;
    gap: var(--space-7);
    min-height: 100dvh;
    padding: var(--space-7) 0;
}

.masthead + main .title-card {
    min-height: calc(100dvh - var(--masthead));
}

.title-card__super {
    font-stretch: var(--wide);
    font-size: var(--size-super);
    font-weight: var(--weight-super);
    letter-spacing: var(--track-super);
    line-height: 0.92;
    text-transform: uppercase;
}

.title-card__super > .rise:first-child {
    padding: 0 var(--safe) 0.08em;
}

.title-card__super > .band {
    --step: 2;
    padding: 0.12em var(--safe) 0.1em;
}

.title-card__super > .band > span {
    --step: 4;
}

.title-card__tier {
    --step: 6;
    margin-top: var(--space-4);
    padding: 0 var(--safe);
    color: var(--text-muted);
}

.title-card__action {
    --step: 7;
    justify-self: start;
    margin-left: var(--safe);
}

/* Entry: the login field, built as a two-tier lower third. The bar wipes in, then its tier.
   Capped at 40rem: a secret is three or four words. */
.entry {
    display: grid;
    justify-items: start;
    max-width: calc(40rem + 2 * var(--safe));
    padding: 0 var(--safe);
}

.entry__label {
    --step: 9;
    padding: var(--space-2) var(--space-3);
    background: var(--edition);
    color: var(--on-edition);
}

.entry__bar {
    --step: 7;
    display: flex;
    width: 100%;
    background: var(--ink-2);
    box-shadow: inset 0 calc(-1 * var(--edge)) 0 var(--ink-4);
    transition: box-shadow var(--dur-quick) var(--ease-out);
}

.entry__bar:focus-within {
    box-shadow: inset 0 calc(-1 * var(--edge)) 0 var(--edition-hover);
}

.entry__input {
    flex: 1;
    min-width: 0;
    min-height: 4rem;
    padding: 0 var(--space-4);
    border: 0;
    background: transparent;
    font-size: var(--size-lead);
    font-weight: var(--weight-medium);
    letter-spacing: 0.01em;
    caret-color: var(--spotlight);
}

.entry__input:focus-visible {
    outline: none;
}

.entry__go {
    min-height: 4rem;
}

.entry__error {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
    margin-top: var(--space-3);
}

.entry__error strong {
    padding: var(--space-1) var(--space-2);
    background: var(--vermilion);
    color: var(--on-vermilion);
}

.entry__error span {
    color: var(--text-muted);
    font-size: var(--size-small);
}

@media (max-width: 30rem) {
    .entry__go {
        padding: 0 var(--space-4);
    }
}

/* Labels that give way to their icon on phones; screen readers keep them. */
@media (max-width: 30rem) {
    .narrow-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}