@font-face {
    font-family: 'Noto Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/theme-assets/text/fonts/noto-serif-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Noto Serif';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/theme-assets/text/fonts/noto-serif-bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Noto Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/theme-assets/text/fonts/noto-serif-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Noto Serif';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('/theme-assets/text/fonts/noto-serif-bold-italic.woff2') format('woff2');
}

:root {
    --font: 'Noto Serif', serif;
    --font-size: 16px;
    --max-width: 80ch;
    --margin: 8px;
    --bg: #fff;
    --nav-gap: 2em;
}

html {
    font-family: var(--font);
    font-size: var(--font-size);
    line-height: normal;
}

body {
    margin: var(--margin);
    max-width: var(--max-width);
}

body > :first-child {
    margin-top: 0;
}

header { display: flex; align-items: center; gap: .5em; }
#m { display: none; }
header > label, h1 { position: relative; z-index: 2; user-select: none; }
h1 { margin: 0; font-size: 1.5em; font-weight: normal; font-style: italic; }
h1 label { color: inherit; text-decoration: none; cursor: pointer; }
header > label {
    font-size: 1.5em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.55em;
    height: 1.4em;
}
header > label::before {
    content: '';
    width: .55em;
    height: 2px;
    background: currentColor;
    box-shadow: 0 .2em 0 currentColor, 0 -.2em 0 currentColor;
}
header nav {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--bg);
    flex-direction: column;
    align-items: flex-start;
    padding: calc(var(--margin) + 3em) var(--margin) var(--margin);
    gap: var(--nav-gap);
    font-size: 1.17em;
    max-width: var(--max-width);
}
#m:checked ~ nav { display: flex; z-index: 1; }
body:has(#m:checked) { overflow: hidden; }