/* Manuel Re · The notebook · August 2026
   Sheet 2 of the Company31 drawing. Where company31.com is a working drawing —
   blue ink, squared paper, an engineer's instruments — this is the notebook the
   drawing was thought out in: laid rag paper, iron-gall brown, red chalk for the
   annotations, and the sketches pushed out into the margins where they belong.
   Same system, different hand. The type is the same house cut. */

/* The house faces, shared with company31.com. Company31 Sans is our own cut of
   Bricolage Grotesque, pinned at the 31-point optical master; Company31 Mono is
   our own grade of Spline Sans Mono at weight 460 with a slashed zero. Both are
   renamed derivatives under the SIL OFL 1.1 — see fonts/OFL-company31.txt.
   Newsreader carries the body text, as it does on sheet 1. */
@font-face {
    font-family: "Company31 Sans";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("fonts/company31-sans.woff2") format("woff2");
}

@font-face {
    font-family: "Company31 Mono";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("fonts/company31-mono.woff2") format("woff2");
}

@font-face {
    font-family: "Newsreader";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("fonts/newsreader-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Newsreader";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/newsreader-italic-latin.woff2") format("woff2");
}

/* Tokens. Iron-gall brown on tinted rag; red chalk reserved for annotation.
   Every pairing measured against WCAG 2.1 AA (1.4.3, 4.5:1 for text; 1.4.11,
   3:1 for controls). Light: ink 15.0:1 on paper, ink-soft 7.1:1, accent 6.5:1,
   faint 4.8:1. Dark: ink 14.9:1, ink-soft 8.3:1, accent 7.3:1, faint 5.0:1.
   --line is for rules only and must never carry text; --faint is the lightest
   tone that may. The marginalia colours (--sketch, --chain, --sanguine) are
   pure decoration inside an aria-hidden layer and are exempt. */
:root {
    --paper: #F4F0E6;
    --paper-deep: #E9E1CF;
    --ink: #1E1C17;
    --ink-soft: #55503F;
    --line: #C8BEA7;
    --faint: #726855;
    --accent: #94381F;
    --accent-soft: #DFC5B7;
    --selection: #E0D2AE;
    --rule: rgba(120, 96, 52, 0.055);
    --chain: rgba(120, 96, 52, 0.085);
    --sketch: rgba(94, 76, 46, 0.20);
    --sanguine: rgba(148, 56, 31, 0.30);
    --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --sans: "Company31 Sans", "Bricolage Grotesque", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --mono: "Company31 Mono", "Spline Sans Mono", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --paper: #191713;
        --paper-deep: #24211A;
        --ink: #F0EADA;
        --ink-soft: #BAB09B;
        --line: #46412F;
    --faint: #8E8672;
        --accent: #E2907A;
        --accent-soft: #6C3E34;
        --selection: #5E5040;
        --rule: rgba(226, 205, 160, 0.05);
        --chain: rgba(226, 205, 160, 0.075);
        --sketch: rgba(226, 205, 160, 0.17);
        --sanguine: rgba(226, 144, 122, 0.26);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --paper: #191713;
    --paper-deep: #24211A;
    --ink: #F0EADA;
    --ink-soft: #BAB09B;
    --line: #46412F;
    --faint: #8E8672;
    --accent: #E2907A;
    --accent-soft: #6C3E34;
    --selection: #5E5040;
    --rule: rgba(226, 205, 160, 0.05);
    --chain: rgba(226, 205, 160, 0.075);
    --sketch: rgba(226, 205, 160, 0.17);
    --sanguine: rgba(226, 144, 122, 0.26);
    color-scheme: dark;
}

:root[data-theme="light"] {
    --paper: #F4F0E6;
    --paper-deep: #E9E1CF;
    --ink: #1E1C17;
    --ink-soft: #55503F;
    --line: #C8BEA7;
    --faint: #726855;
    --accent: #94381F;
    --accent-soft: #DFC5B7;
    --selection: #E0D2AE;
    --rule: rgba(120, 96, 52, 0.055);
    --chain: rgba(120, 96, 52, 0.085);
    --sketch: rgba(94, 76, 46, 0.20);
    --sanguine: rgba(148, 56, 31, 0.30);
    color-scheme: light;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 2rem;
    background: var(--paper);
}

/* The paper itself: laid lines every 26px, the same rhythm the squared paper on
   sheet 1 is ruled to, so the two sheets come off the same pad. */
body {
    margin: 0;
    background-color: var(--paper);
    background-image: repeating-linear-gradient(to bottom, transparent 0 25px, var(--rule) 25px 26px);
    color: var(--ink);
    font-family: var(--serif);
    font-size: clamp(1rem, 0.97rem + 0.2vw, 1.08rem);
    line-height: 1.7;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* The sheet edge. One hairline inside the viewport, as on sheet 1. */
body::before {
    content: "";
    position: fixed;
    inset: 12px;
    z-index: 40;
    border: 1px solid var(--line);
    opacity: 0.55;
    pointer-events: none;
}

/* The scribe's margin rules: the two verticals that bound a ruled text block in
   a manuscript. They only appear once there is room for them. */
body::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 0;
    display: none;
    width: 46rem;
    transform: translateX(-50%);
    border-left: 1px solid var(--chain);
    border-right: 1px solid var(--chain);
    pointer-events: none;
}

@media (min-width: 900px) {
    body::after {
        display: block;
    }
}

::selection {
    background: var(--selection);
    color: var(--ink);
}

a {
    color: inherit;
    text-decoration-color: color-mix(in srgb, var(--ink) 34%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
}

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

button,
input,
textarea,
select {
    font: inherit;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* ---- marginalia ----------------------------------------------------------
   The sketches live where Leonardo put them: in the margins, beside the text,
   never behind it. Each one is anchored to the edge of the text column rather
   than to the viewport, so they hold their distance from the writing at any
   width. Decoration only — fixed, inert, hidden from assistive technology, and
   absent until the margins are wide enough to hold them. */
.marginalia {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: none;
    pointer-events: none;
}

@media (min-width: 1160px) {
    .marginalia {
        display: block;
    }
}

.sketch {
    position: absolute;
    display: block;
}

.sketch path,
.sketch circle,
.sketch ellipse {
    fill: none;
    stroke: var(--sketch);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.sketch .faint {
    stroke: var(--chain);
}

.sketch .dashed {
    stroke-dasharray: 5 6;
}

.sketch .chalk {
    stroke: var(--sanguine);
}

.sketch-study {
    top: 14vh;
    right: calc(50% + 23rem);
    width: 10.5rem;
    transform: rotate(-3deg);
}

.sketch-quill {
    bottom: 20vh;
    right: calc(50% + 22.5rem);
    width: 12rem;
    transform: rotate(-8deg);
}

.sketch-inkwell {
    bottom: 12vh;
    right: calc(50% + 24.5rem);
    width: 5rem;
}

.sketch-dividers {
    top: 12vh;
    left: calc(50% + 23.5rem);
    width: 7rem;
    transform: rotate(6deg);
}

.sketch-spiral {
    bottom: 16vh;
    left: calc(50% + 23rem);
    width: 11rem;
    transform: rotate(2deg);
}

/* Written backwards, the way he wrote everything. Sheet 1 is at company31.com. */
.mirror {
    position: absolute;
    top: 46vh;
    left: calc(50% + 23.5rem);
    color: var(--sketch);
    font-family: var(--serif);
    font-size: 0.8rem;
    font-style: italic;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transform: scaleX(-1);
}

.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 100;
    padding: 0.55rem 0.85rem;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--sans);
    font-weight: 600;
    font-size: 0.85rem;
    transform: translateY(-180%);
    transition: transform 160ms ease;
}

.skip-link:focus {
    transform: translateY(0);
}

.site-shell {
    position: relative;
    z-index: 1;
    width: min(100% - 2.5rem, 41rem);
    margin-inline: auto;
}

.site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding-block: 2.75rem 0;
}

.wordmark {
    color: var(--ink);
    text-decoration: none;
}

.wordmark-name {
    font-family: var(--sans);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.wordmark-mark {
    display: none;
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.35rem;
}

.site-nav > a {
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

.site-nav > a:hover {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.theme-toggle {
    display: grid;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    place-items: center;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.theme-toggle-track {
    position: relative;
    width: 2.15rem;
    height: 1.15rem;
    border: 1px solid var(--ink-soft);
    border-radius: 999px;
}

.theme-toggle-track span {
    position: absolute;
    top: 0.16rem;
    left: 0.18rem;
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 50%;
    background: var(--ink);
    transition: transform 180ms ease, background 180ms ease;
}

.theme-toggle[aria-pressed="true"] .theme-toggle-track span {
    background: var(--accent);
    transform: translateX(0.93rem);
}

main {
    display: block;
}

.intro,
.featured-writing,
.writing,
.about,
.not-found {
    width: 100%;
}

.intro {
    padding-block: clamp(3.5rem, 8vw, 5.5rem) 0;
}

/* Every small label on the sheet is set in the mono, in red chalk, the way a
   figure number is called out on a drawing. */
.eyebrow,
.section-label,
.post-meta,
.about-year,
.rss-link,
.back-link,
.text-link,
.elsewhere,
.article-end,
.article-body h4,
.article-body figcaption,
.site-footer nav a,
.site-footer .footer-small {
    font-family: var(--mono);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.eyebrow,
.section-label {
    margin: 0 0 1rem;
    color: var(--accent);
    font-size: 0.68rem;
    line-height: 1.6;
}

.eyebrow span {
    padding-inline: 0.4rem;
    color: var(--faint);
}

h1,
h2,
h3,
h4,
p {
    overflow-wrap: break-word;
}

h1,
h2,
h3,
h4 {
    margin-top: 0;
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.intro h1 {
    max-width: 24ch;
    margin-bottom: 0;
    font-size: clamp(1.7rem, 3.4vw, 2.25rem);
}

.featured-writing {
    margin-top: clamp(3rem, 7vw, 4.5rem);
    border-top: 1px solid var(--line);
    padding-top: 1.15rem;
    transition: border-top-color 250ms ease;
}

.featured-writing:hover {
    border-top-color: var(--accent);
}

.featured-writing .section-label {
    margin-bottom: 0.6rem;
}

.featured-link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    color: var(--ink);
    text-decoration: none;
}

.featured-copy {
    min-width: 0;
}

.featured-link h2 {
    margin-bottom: 0.45rem;
    font-size: clamp(1.25rem, 2.6vw, 1.5rem);
}

.featured-link p {
    margin: 0;
    color: var(--ink-soft);
    font-family: var(--serif);
    font-size: 0.95em;
    line-height: 1.6;
}

.featured-link .arrow {
    color: var(--accent);
    font-family: var(--mono);
    font-size: 0.95rem;
}

.featured-link:hover h2 {
    color: var(--accent);
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.55rem;
    margin: 0.7rem 0 0;
    color: var(--ink-soft);
    font-size: 0.63rem;
    letter-spacing: 0.15em;
    line-height: 1.6;
}

.writing,
.about {
    padding-block: clamp(3.5rem, 8vw, 5.5rem) 0;
}

.about {
    padding-bottom: clamp(3.5rem, 8vw, 5.5rem);
}

/* The figure caption, as on sheet 1: a called-out label, a modest title, and a
   rule running out to the margin. */
.section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.2rem;
    margin-bottom: 0.4rem;
}

.section-heading > div {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 1.1rem;
    min-width: 0;
}

.section-heading > div::after {
    content: "";
    flex: 1 1 2rem;
    align-self: center;
    min-width: 2rem;
    border-top: 1px solid var(--line);
}

.section-heading .section-label {
    flex: none;
    margin: 0;
}

.section-heading h2 {
    flex: none;
    margin: 0;
    font-size: clamp(1.2rem, 2.3vw, 1.45rem);
}

.rss-link,
.back-link,
.text-link {
    color: var(--accent);
    font-size: 0.66rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

.rss-link:hover,
.back-link:hover,
.text-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* The archive, numbered the way plates in a notebook are numbered. The numeral
   hangs out into the margin once there is room for it. */
.writing-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: plate;
}

.writing-list li {
    position: relative;
    padding-block: 1.5rem;
    border-top: 1px solid var(--line);
    counter-increment: plate;
    transition: border-top-color 250ms ease;
}

.writing-list li:last-child {
    border-bottom: 1px solid var(--line);
}

.writing-list li:hover {
    border-top-color: var(--accent);
}

.writing-list li::before {
    content: counter(plate, decimal-leading-zero);
    position: absolute;
    top: 1.55rem;
    left: -4.3rem;
    display: none;
    color: var(--faint);
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
}

@media (min-width: 900px) {
    .writing-list li::before {
        display: block;
    }
}

.writing-list li:hover::before {
    color: var(--accent);
}

.writing-list a {
    display: block;
    color: var(--ink);
    text-decoration: none;
}

.writing-title {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--sans);
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.32;
    letter-spacing: -0.015em;
}

.writing-list a:hover .writing-title {
    color: var(--accent);
}

.writing-description {
    display: block;
    color: var(--ink-soft);
    font-size: 0.95em;
    line-height: 1.6;
}

.writing-list .post-meta {
    margin-top: 0.6rem;
}

.empty-state {
    padding-block: 1.5rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    font-style: italic;
}

.about-year {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.66rem;
}

.about-grid {
    padding-block: 1.75rem 0;
}

.about-copy p {
    margin: 0 0 1.3em;
}

.about-copy cite {
    font-style: italic;
}

.about-facts {
    margin-top: 2.25rem;
    border-top: 1px solid var(--line);
    padding-top: 0.4rem;
}

.about-facts dl {
    margin: 0;
}

.about-facts dl > div {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 1rem;
    padding-block: 0.6rem;
    border-bottom: 1px solid var(--chain);
}

.about-facts dl > div:last-child {
    border-bottom: 0;
}

.about-facts dt {
    color: var(--accent);
    font-family: var(--mono);
    font-size: 0.63rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding-top: 0.45em;
}

.about-facts dd {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.92em;
    line-height: 1.6;
}

.elsewhere {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin: 2.25rem 0 0;
    font-size: 0.66rem;
}

.elsewhere span {
    color: var(--ink-soft);
}

.elsewhere a {
    color: var(--accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

.elsewhere a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* The colophon. */
.site-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
    padding-block: 1.75rem 2.5rem;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.86rem;
    line-height: 1.65;
}

.site-footer p {
    max-width: 30rem;
    margin: 0.25rem 0;
}

.site-footer .footer-name {
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
}

.site-footer nav {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: end;
    gap: 1.2rem;
}

.site-footer nav a {
    color: var(--accent);
    font-size: 0.66rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

.site-footer nav a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.site-footer .footer-small {
    grid-column: 1 / -1;
    padding-top: 0.9rem;
    font-size: 0.6rem;
    letter-spacing: 0.16em;
}

.article-main {
    padding-block: clamp(3.5rem, 8vw, 5.5rem) clamp(4rem, 9vw, 7rem);
}

.article {
    width: 100%;
    margin-inline: auto;
}

.article-header {
    padding-bottom: clamp(2.25rem, 5vw, 3.5rem);
    border-bottom: 1px solid var(--line);
}

.back-link {
    display: inline-flex;
    margin-bottom: clamp(2.25rem, 6vw, 4rem);
}

.article-header .section-label {
    margin-bottom: 0.85rem;
}

.article-header h1 {
    max-width: 22ch;
    margin-bottom: 1.1rem;
    font-size: clamp(1.8rem, 4.4vw, 2.6rem);
    line-height: 1.12;
}

.article-title {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}

.article-title h1 {
    margin-bottom: 1.1rem;
}

.listen-toggle {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    margin-top: 0.15rem;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--accent);
    text-decoration: none;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.listen-toggle:hover {
    border-color: var(--accent);
    background-color: var(--paper-deep);
}

.listen-toggle svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: currentColor;
}

.listen-toggle .icon-pause,
.listen-toggle.is-playing .icon-play {
    display: none;
}

.listen-toggle.is-playing .icon-pause {
    display: block;
}

.article-deck {
    max-width: 38rem;
    margin: 0;
    color: var(--ink-soft);
    font-size: clamp(1.05rem, 1.8vw, 1.2rem);
    font-style: italic;
    line-height: 1.55;
}

.article-meta {
    margin-top: 1.5rem;
}

.article-body {
    padding-block: clamp(2.5rem, 6vw, 4rem);
    font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem);
    line-height: 1.75;
}

.article-body > * {
    max-width: 42rem;
    margin-inline: auto;
}

/* The opening letter, set large in red chalk, as a scribe would. */
.article-body > p:first-of-type::first-letter {
    float: left;
    margin: 0.05em 0.08em 0 0;
    color: var(--accent);
    font-family: var(--serif);
    font-size: 3.4em;
    font-weight: 400;
    line-height: 0.82;
}

.article-body h2,
.article-body h3,
.article-body h4 {
    margin-top: 2.25em;
    margin-bottom: 0.65em;
}

.article-body h2 {
    font-size: 1.4rem;
}

.article-body h3 {
    font-size: 1.15rem;
}

.article-body h4 {
    color: var(--accent);
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 500;
}

.article-body p,
.article-body ul,
.article-body ol,
.article-body blockquote,
.article-body pre,
.article-body figure {
    margin-top: 0;
    margin-bottom: 1.5em;
}

.article-body ul,
.article-body ol {
    padding-left: 1.35em;
}

.article-body li {
    padding-left: 0.25em;
    margin-bottom: 0.55em;
}

.article-body li::marker {
    color: var(--accent);
}

.article-body blockquote {
    padding: 0.2rem 0 0.2rem 1.4rem;
    border-left: 1px solid var(--accent);
    color: var(--ink-soft);
    font-style: italic;
}

.article-body blockquote p {
    margin: 0;
}

.article-body hr {
    width: 4rem;
    margin: 3rem auto;
    border: 0;
    border-top: 1px solid var(--line);
}

.article-body code {
    padding: 0.12em 0.28em;
    background: var(--paper-deep);
    font-family: var(--mono);
    font-size: 0.86em;
    letter-spacing: 0;
}

.article-body pre {
    overflow-x: auto;
    padding: 1.25rem;
    border: 1px solid var(--line);
    background: var(--paper-deep);
    font-size: 0.85rem;
    line-height: 1.6;
}

.article-body pre code {
    padding: 0;
    background: transparent;
}

.article-body img {
    display: block;
    width: 100%;
    height: auto;
}

.article-body figcaption {
    margin-top: 0.65rem;
    color: var(--ink-soft);
    font-size: 0.63rem;
    line-height: 1.7;
}

.article-listen {
    margin-bottom: clamp(2.5rem, 6vw, 3.5rem);
    padding-top: 2rem;
    border-top: 1px solid var(--line);
    scroll-margin-top: 2rem;
}

.article-listen .section-label {
    margin-bottom: 0.85rem;
}

.article-listen audio {
    display: block;
    width: 100%;
    max-width: 42rem;
}

.article-footer {
    padding-top: 2.5rem;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.9em;
}

.article-footer p {
    max-width: 34rem;
    margin-inline: auto;
}

.article-end {
    color: var(--accent);
    font-size: 0.72rem;
    text-align: center;
}

.not-found {
    min-height: 55vh;
    padding-block: clamp(4rem, 10vw, 7rem);
}

.not-found h1 {
    max-width: 18ch;
    margin-bottom: 1.1rem;
    font-size: clamp(1.75rem, 4.5vw, 2.4rem);
}

.not-found > p:not(.section-label) {
    max-width: 33rem;
    color: var(--ink-soft);
}

.not-found .text-link {
    display: inline-flex;
    margin-top: 1.5rem;
}

@media (max-width: 720px) {
    .site-shell {
        width: min(100% - 1.75rem, 41rem);
    }

    .site-header {
        padding-block: 1.75rem 0;
    }

    .site-nav {
        gap: 1rem;
    }

    .site-nav > a {
        font-size: 0.63rem;
        letter-spacing: 0.14em;
    }

    .featured-link {
        gap: 0.75rem;
    }

    .section-heading {
        flex-wrap: wrap;
        gap: 0.4rem 1.2rem;
    }

    .site-footer {
        grid-template-columns: 1fr;
    }

    .site-footer nav {
        justify-content: start;
    }

    .site-footer .footer-small {
        grid-column: auto;
        padding-top: 0.5rem;
    }
}

@media (max-width: 560px) {
    .about-facts dl > div {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }

    .article-body > p:first-of-type::first-letter {
        font-size: 2.9em;
    }
}

@media (max-width: 430px) {
    .site-nav {
        gap: 0.85rem;
    }

    /* The eyebrow wraps to two lines here, so the separator has to stay: the
       phrases either side of it run together without it. */
    .eyebrow {
        letter-spacing: 0.12em;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    :root,
    :root[data-theme="dark"] {
        --paper: #ffffff;
        --paper-deep: #f4f4f4;
        --ink: #000000;
        --ink-soft: #333333;
        --line: #bbbbbb;
        --faint: #444444;
        --accent: #000000;
        --rule: transparent;
        --chain: transparent;
        --sketch: transparent;
        --sanguine: transparent;
        color-scheme: light;
    }

    body {
        background: #ffffff;
        background-image: none;
        font-size: 11pt;
    }

    body::before,
    body::after,
    .marginalia {
        display: none;
    }

    .site-header,
    .site-footer,
    .back-link,
    .listen-toggle,
    .article-listen,
    .article-footer {
        display: none;
    }

    .article-main,
    .article-body {
        padding-block: 0;
    }

    .article-header h1 {
        font-size: 24pt;
    }

    a {
        color: #000000;
    }
}