@font-face {
    font-family: 'EMH Grotesk';
    src: url('https://cdn.evanhollander.org/fonts/EMHGroteskItalic.woff2') format('woff2-variations'),
         url('https://cdn.evanhollander.org/fonts/EMHGroteskItalic.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}
@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;
}
@font-face {
    font-family: 'EMH Serif';
    src: url('https://cdn.evanhollander.org/fonts/EMHSerifItalic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    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(14rem, 30vw, 22rem); }
.hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.hero h1 { font-size: clamp(3.25rem, 14vw, 10rem); }
.aa {
    font-family: 'EMH Serif', Georgia, serif;
    font-size: clamp(5rem, 22vw, 16rem);
    line-height: 0.7;
    color: var(--yellow);
}

.fam { grid-column: 1 / -1; gap: 0.5rem; padding: clamp(1.25rem, 3vw, 2.25rem); }
.fam h2 {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1;
    letter-spacing: -0.02em;
}
.grotesk h2 { font-family: 'EMH Grotesk', system-ui, sans-serif; font-weight: 800; }
.serif h2   { font-family: 'EMH Serif', Georgia, serif; font-weight: 400; letter-spacing: -0.01em; }
.mono-fam h2 { font-family: 'EMH Mono', ui-monospace, monospace; font-weight: 600; letter-spacing: -0.04em; }
.grotesk  { background: var(--blue); }
.serif    { background: var(--red); }
.mono-fam { background: var(--green); }

.big-sample {
    margin: 0.75rem 0 0.25rem;
    font-size: clamp(2.5rem, 9vw, 7rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    outline: none;
    overflow-wrap: anywhere;
}
.grotesk .big-sample { font-family: 'EMH Grotesk', system-ui, sans-serif; font-weight: 400; min-height: 2.04em; }
.serif .big-sample { font-family: 'EMH Serif', Georgia, serif; letter-spacing: -0.015em; }
.mono-fam .big-sample { font-family: 'EMH Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -0.04em; }
.big-sample:focus-visible { outline: 3px dashed rgba(255, 255, 255, 0.7); outline-offset: 6px; border-radius: 6px; }

.alpha { margin: 0.5rem 0; font-size: clamp(1rem, 2.2vw, 1.5rem); line-height: 1.35; overflow-wrap: anywhere; }
.grotesk .alpha { font-family: 'EMH Grotesk', system-ui, sans-serif; }
.serif .alpha   { font-family: 'EMH Serif', Georgia, serif; }
.mono-fam .alpha { font-family: 'EMH Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: clamp(0.9rem, 2vw, 1.25rem); }

.sc {
    margin: 0.25rem 0 0.5rem;
    font-family: 'EMH Serif', Georgia, serif;
    font-size: clamp(1.25rem, 3vw, 2rem);
    font-variant-caps: all-small-caps;
    letter-spacing: 0.06em;
}

.slider { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; max-width: 28rem; margin-top: 0.75rem; }
.slider output { font-variant-numeric: tabular-nums; }
.slider input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 2.25rem;
    margin: 0;
    background: transparent;
    cursor: ew-resize;
    --p: 40%;
}
.slider input::-webkit-slider-runnable-track {
    height: 0.625rem;
    border-radius: 999px;
    background: linear-gradient(to right, var(--yellow) var(--p), rgba(255, 255, 255, 0.28) var(--p));
}
.slider input::-moz-range-track {
    height: 0.625rem;
    border-radius: 999px;
    background: linear-gradient(to right, var(--yellow) var(--p), rgba(255, 255, 255, 0.28) var(--p));
}
.slider input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 2rem;
    height: 2rem;
    margin-top: -0.6875rem;
    border-radius: 50%;
    border: 0;
    background: #fff;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28);
    transition: transform 0.15s cubic-bezier(.3, 1.6, .5, 1);
}
.slider input::-moz-range-thumb {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 0;
    background: #fff;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28);
    transition: transform 0.15s cubic-bezier(.3, 1.6, .5, 1);
}
.slider input:hover::-webkit-slider-thumb, .slider input:active::-webkit-slider-thumb { transform: scale(1.12); }
.slider input:hover::-moz-range-thumb, .slider input:active::-moz-range-thumb { transform: scale(1.12); }
.slider input:focus-visible { outline: none; }
.slider input:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--yellow); outline-offset: 3px; }
.slider input:focus-visible::-moz-range-thumb { outline: 3px solid var(--yellow); outline-offset: 3px; }

.ladder {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 0.5rem 0;
    font-family: 'EMH Grotesk', system-ui, sans-serif;
    font-size: clamp(1.75rem, 4.5vw, 3rem);
    line-height: 1.1;
}

.note { margin: 0.5rem 0 0; max-width: 40rem; font-size: 0.9375rem; line-height: 1.45; opacity: 0.92; }
.swap { color: var(--yellow); font-weight: 700; }
.grotesk .note em { font-family: 'EMH Grotesk', system-ui, sans-serif; font-style: italic; }
.zero {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    margin: 0.5rem 0 0;
    font-family: 'EMH Grotesk', system-ui, sans-serif;
    font-size: 1.125rem;
}
.zero span:last-child { font-feature-settings: 'zero' 1; font-variant-numeric: tabular-nums; }

.files, .credits { grid-column: span 2; background: var(--ink); }
@media (prefers-color-scheme: dark) { .files, .credits { background: #1d1d3d; } }
.small-h {
    margin: 0 0 0.75rem;
    font-family: 'EMH Mono', ui-monospace, monospace;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.8;
}
.files ul { margin: 0; padding: 0; list-style: none; }
.files li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-top: 1px solid rgba(255, 255, 255, 0.18); font-family: 'EMH Mono', ui-monospace, monospace; font-size: 0.875rem; }
.files li span { opacity: 0.65; font-variant-numeric: tabular-nums; }
.credits p { margin: 0 0 0.75rem; font-size: 0.9375rem; line-height: 1.5; }

@media (max-width: 52rem) {
    .files, .credits { grid-column: 1 / -1; }
}