/* Shared by /colophon and every part of it. Loaded after /styles.css. */
@font-face {
    font-family: 'EMH Serif';
    src: url('https://cdn.evanhollander.org/fonts/EMHSerif.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.back {
    align-self: flex-start;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-family: 'EMH Mono', ui-monospace, monospace;
    font-size: 0.8125rem;
    text-decoration: none;
}
.back:hover { background: rgba(255, 255, 255, 0.28); }
.back:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.hero { min-height: clamp(13rem, 26vw, 19rem); }
.hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.hero h1 { font-size: clamp(2.75rem, 11vw, 8rem); overflow-wrap: anywhere; }
.numeral {
    font-family: 'EMH Serif', Georgia, serif;
    font-size: clamp(4.5rem, 18vw, 13rem);
    line-height: 0.75;
    color: var(--yellow);
}

.prose { grid-column: 1 / -1; padding: clamp(1.25rem, 3vw, 2.25rem); }
.prose > * { max-width: 42rem; }
.prose p, .prose li { font-size: 1.125rem; line-height: 1.55; }
.prose p { margin: 0 0 1rem; }
.prose h3 { margin: 1.5rem 0 0.5rem; font-size: 1.125rem; font-weight: 700; }
.prose ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.prose li { margin-bottom: 0.4rem; }
.small-h {
    margin: 0 0 1rem;
    font-family: 'EMH Mono', ui-monospace, monospace;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
}

.more {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-self: start;
}
.more a {
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-family: 'EMH Mono', ui-monospace, monospace;
    font-size: 0.8125rem;
    text-decoration: none;
    transition: transform 0.2s cubic-bezier(.3,1.6,.5,1);
}
.more a.all { background: var(--cobalt); }
.more a:hover { transform: translateY(-2px); }
.more a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (prefers-color-scheme: dark) {
    .more a { background: #1d1d3d; }
    .more a:focus-visible { outline-color: #fff; }
}

@media (prefers-reduced-motion: reduce) { .more a { transition: none; } }