/* Shared header and footer; the reading page keeps its own body typography. */
.site-header, .site-footer {
    color: var(--muted, var(--seed-muted));
    font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
    font-size: .86rem;
    line-height: 1.75;
}
.site-header { position: static; border: 0; background: transparent; backdrop-filter: none; }
.site-header .shell, .site-footer .shell {
    width: min(var(--site-shell-width, 70rem), calc(100% - 3rem));
    margin-inline: auto;
}
.header-inner {
    min-height: 4.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .25rem 1.5rem;
    padding-block: .65rem;
}
.brand {
    flex: none;
    color: var(--ink, var(--seed-ink));
    font: 700 1.4rem/1.75 "Yu Mincho", "Hiragino Mincho ProN", serif;
    letter-spacing: .04em;
    white-space: nowrap;
}
.site-header nav, .site-footer nav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.5rem; font-size: inherit; }
.site-header a, .site-footer a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.site-header .brand { color: var(--ink, var(--seed-ink)); }
.site-header a:is([aria-current="page"], [aria-current="location"]) { color: var(--ink, var(--seed-ink)); text-decoration: underline; text-decoration-thickness: 1px; }
.site-header a:hover, .site-footer a:hover { text-decoration: underline; }
.site-footer { border: 0; padding-block: 1rem 3rem; }
.site-footer .shell { display: block; }
.site-footer p { margin: 0 0 .6rem; }
.page-words { --site-shell-width: 43rem; }
@media (max-width: 23rem) {
    .header-inner { align-items: flex-start; flex-direction: column; }
}