:root {
    --paper: #FFFFFF;
    --ink: #203052; /* cube navy */
    --accent: #E8A403; /* cube amber */
    --muted: #5B6478;
    --font-ui: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --pad: clamp(1.25rem, 3.5vw, 2.75rem);
}

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

body {
    margin: 0;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pad);
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 0.9375rem;
    -webkit-font-smoothing: antialiased;
}

.page {
    width: 100%;
    max-width: 76rem;
    min-height: min(48rem, calc(100svh - 2 * var(--pad)));
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: clamp(1.5rem, 4vh, 3rem);
}

img {
    display: block;
    height: auto;
}

header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(0.875rem, 2.5vh, 1.5rem);
}

.logo-fair {
    width: clamp(150px, 18vw, 212px);
}

.logo-claim {
    width: clamp(162px, 19.4vw, 229px);
}

.stage {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.artwork {
    width: min(100%, 572px, 58svh);
}

footer {
    justify-self: end;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}

a {
    color: var(--ink);
    text-decoration-color: rgba(32, 48, 82, 0.35);
    text-underline-offset: 0.25em;
}

a:hover {
    text-decoration-color: var(--accent);
}

a:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
    border-radius: 2px;
}

details {
    text-align: right;
}

summary {
    cursor: pointer;
    list-style-position: inside;
}

details[open] summary {
    margin-bottom: 0.6rem;
}

/* Block stays right aligned, the lines inside align left so they do not flutter */
details p {
    width: fit-content;
    margin: 0 0 0 auto;
    text-align: left;
    line-height: 1.7;
    color: var(--muted);
}

/* Screen reader */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}