:root {
    --dusty-grape: #54428eff;
    --lavender-purple: #8963baff;
    --celadon: #afe3c0ff;
    --willow-green: #90c290ff;
    --dusty-olive: #688b58ff;

    --text-primary: #2b2540;
    --text-secondary: #6b6182;
    --bg-primary: #fdfcfb;
    --bg-secondary: #f3f0ec;
    --bg-accent: #efeafc;
    --accent: var(--lavender-purple);
    --accent-strong: var(--dusty-grape);
    --accent-hover: var(--dusty-grape);
    --border-color: #ddd6ee;
    --section-divider: #e4deef;
    --link-color: var(--dusty-grape);
    --visited-color: var(--dusty-olive);
    --highlight-bg: #f0faf2;
    --highlight-border: var(--celadon);

    --mono-font: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", "Roboto Mono", "Liberation Mono", "Noto Sans Mono", Menlo, monospace;
    --sans-font: ui-sans-serif, "SF Pro Text", "Segoe UI", "Open Sans", Roboto, "Liberation Sans", "Noto Sans", sans-serif;
    --serif-font: ui-serif, "New York", "Liberation Serif", "Noto Serif", "Roboto Slab", serif;

    --font-body: var(--serif-font);
    --font-headings: var(--sans-font);

    --max-width: 45rem;
    --padding-x: clamp(1rem, 5vw, 2rem);
    --padding-y: 2rem;
}
@media (prefers-color-scheme: dark) {
    :root {
        --dusty-grape: #9d89d6ff;
        --lavender-purple: #b89de0ff;
        --celadon: #5a9a6aff;
        --willow-green: #6fa86fff;
        --dusty-olive: #94b274ff;

        --text-primary: #e6e2f0;
        --text-secondary: #ada4c4;
        --bg-primary: #181424;
        --bg-secondary: #221d33;
        --bg-accent: #2a2340;
        --accent: var(--lavender-purple);
        --accent-strong: var(--dusty-grape);
        --accent-hover: var(--celadon);
        --border-color: #363050;
        --section-divider: #2e2840;
        --link-color: var(--lavender-purple);
        --visited-color: var(--dusty-olive);
        --highlight-bg: #1d2a1d;
        --highlight-border: var(--willow-green);
    }
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.15rem + 0.3vw, 1.2rem);
    line-height: 1.7;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.skip-link {
    position: absolute;
    top: -100vh;
    left: 0;
    padding: 0.75rem 1.5rem;
    background: var(--accent-strong);
    color: #fff;
    font-family: var(--font-headings);
    text-decoration: none;
    z-index: 1000;
}
.skip-link:focus {
    top: 0;
}

header {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--padding-y) var(--padding-x) 1rem;
}

.breadcrumbs {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-family: var(--font-headings);
    font-size: 0.9rem;
}
.breadcrumbs li:not(:last-child)::after {
    content: ' ›';
    margin-left: 0.5rem;
    color: var(--text-secondary);
}

.breadcrumbs a {
    color: var(--link-color);
    text-decoration: none;
}
.breadcrumbs a:hover {
    text-decoration: underline;
}

.breadcrumbs [aria-current] {
    color: var(--text-secondary);
}

main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--padding-x) var(--padding-y);
}

article > header {
    padding-top: 1rem;
    text-align: center;
}

article > header h1 {
    font-family: var(--font-headings);
    font-size: clamp(1.6rem, 1.2rem + 2vw, 2.5rem);
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.byline {
    font-family: var(--font-headings);
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.pub-date {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

section {
    margin-top: 2.5rem;
}

h2,
h3 {
    font-family: var(--font-headings);
    line-height: 1.3;
}

h2 {
    font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
    border-bottom: 1px solid var(--section-divider);
    padding-bottom: 0.4rem;
    margin-bottom: 1.5rem;
}

h3 {
    font-size: 1.2rem;
    margin: 1.5rem 0 0.75rem;
}

p {
    margin-bottom: 1.25rem;
    hyphens: auto;
    text-align: justify;
}

h2 + p,
h3 + p {
    text-indent: 0;
}

em {
    font-style: italic;
}

strong {
    font-weight: bold;
}

a {
    color: var(--link-color);
    text-decoration: underline;
    text-underline-offset: 0.1em;
}
a:visited {
    color: var(--visited-color);
}
a:hover {
    color: var(--accent-hover);
}

sup a {
    text-decoration: none;
    font-size: 0.75em;
}

code,
kbd,
samp {
    font-family: var(--mono-font);
    font-size: 0.9em;
}

.footnotes {
    list-style: decimal;
    padding-left: 1.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.footnotes li {
    margin-bottom: 0.5rem;
}

.footnotes a {
    text-decoration: none;
}

footer {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--padding-y) var(--padding-x);
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: center;
}

footer hr {
    border: none;
    border-top: 1px solid var(--section-divider);
    margin-bottom: 1.5rem;
}

footer a {
    color: var(--link-color);
    text-decoration: none;
}
footer a:hover {
    text-decoration: underline;
}

.site-tagline {
    font-family: var(--font-headings);
    font-style: italic;
    margin-bottom: 0.75rem;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    font-family: var(--font-headings);
}
.footer-links li:not(:last-child)::after {
    content: ' ·';
    color: var(--text-secondary);
}

.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    background: var(--bg-accent);
    border: 1px solid var(--border-color);
    font-family: var(--font-headings);
    font-size: 0.8rem;
    color: var(--text-secondary);
}
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}

:root {
    --dusty-grape: #54428eff;
    --lavender-purple: #8963baff;
    --celadon: #afe3c0ff;
    --willow-green: #90c290ff;
    --dusty-olive: #688b58ff;

    --text-primary: #2b2540;
    --text-secondary: #6b6182;
    --bg-primary: #fdfcfb;
    --bg-secondary: #f3f0ec;
    --bg-accent: #efeafc;
    --accent: var(--lavender-purple);
    --accent-strong: var(--dusty-grape);
    --accent-hover: var(--dusty-grape);
    --border-color: #ddd6ee;
    --section-divider: #e4deef;
    --link-color: var(--dusty-grape);
    --visited-color: var(--dusty-olive);
    --highlight-bg: #f0faf2;
    --highlight-border: var(--celadon);

    --mono-font: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", "Roboto Mono", "Liberation Mono", "Noto Sans Mono", Menlo, monospace;
    --sans-font: ui-sans-serif, "SF Pro Text", "Segoe UI", "Open Sans", Roboto, "Liberation Sans", "Noto Sans", sans-serif;
    --serif-font: ui-serif, "New York", "Liberation Serif", "Noto Serif", "Roboto Slab", serif;

    --font-body: var(--serif-font);
    --font-headings: var(--sans-font);

    --max-width: 45rem;
    --padding-x: clamp(1rem, 5vw, 2rem);
    --padding-y: 2rem;
}
@media (prefers-color-scheme: dark) {
    :root {
        --dusty-grape: #9d89d6ff;
        --lavender-purple: #b89de0ff;
        --celadon: #5a9a6aff;
        --willow-green: #6fa86fff;
        --dusty-olive: #94b274ff;

        --text-primary: #e6e2f0;
        --text-secondary: #ada4c4;
        --bg-primary: #181424;
        --bg-secondary: #221d33;
        --bg-accent: #2a2340;
        --accent: var(--lavender-purple);
        --accent-strong: var(--dusty-grape);
        --accent-hover: var(--celadon);
        --border-color: #363050;
        --section-divider: #2e2840;
        --link-color: var(--lavender-purple);
        --visited-color: var(--dusty-olive);
        --highlight-bg: #1d2a1d;
        --highlight-border: var(--willow-green);
    }
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.15rem + 0.3vw, 1.2rem);
    line-height: 1.7;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.skip-link {
    position: absolute;
    top: -100vh;
    left: 0;
    padding: 0.75rem 1.5rem;
    background: var(--accent-strong);
    color: #fff;
    font-family: var(--font-headings);
    text-decoration: none;
    z-index: 1000;
}
.skip-link:focus {
    top: 0;
}

header {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--padding-y) var(--padding-x) 1rem;
}

.breadcrumbs {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-family: var(--font-headings);
    font-size: 0.9rem;
}
.breadcrumbs li:not(:last-child)::after {
    content: ' ›';
    margin-left: 0.5rem;
    color: var(--text-secondary);
}

.breadcrumbs a {
    color: var(--link-color);
    text-decoration: none;
}
.breadcrumbs a:hover {
    text-decoration: underline;
}

.breadcrumbs [aria-current] {
    color: var(--text-secondary);
}

main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--padding-x) var(--padding-y);
}

article > header {
    padding-top: 1rem;
    text-align: center;
}

article > header h1 {
    font-family: var(--font-headings);
    font-size: clamp(1.6rem, 1.2rem + 2vw, 2.5rem);
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.byline {
    font-family: var(--font-headings);
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.pub-date {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

section {
    margin-top: 2.5rem;
}

h2,
h3 {
    font-family: var(--font-headings);
    line-height: 1.3;
}

h2 {
    font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
    border-bottom: 1px solid var(--section-divider);
    padding-bottom: 0.4rem;
    margin-bottom: 1.5rem;
}

h3 {
    font-size: 1.2rem;
    margin: 1.5rem 0 0.75rem;
}

p {
    margin-bottom: 1.25rem;
    hyphens: auto;
    text-align: justify;
}

h2 + p,
h3 + p {
    text-indent: 0;
}

em {
    font-style: italic;
}

strong {
    font-weight: bold;
}

a {
    color: var(--link-color);
    text-decoration: underline;
    text-underline-offset: 0.1em;
}
a:visited {
    color: var(--visited-color);
}
a:hover {
    color: var(--accent-hover);
}

sup a {
    text-decoration: none;
    font-size: 0.75em;
}

code,
kbd,
samp {
    font-family: var(--mono-font);
    font-size: 0.9em;
}

.footnotes {
    list-style: decimal;
    padding-left: 1.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.footnotes li {
    margin-bottom: 0.5rem;
}

.footnotes a {
    text-decoration: none;
}

footer {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--padding-y) var(--padding-x);
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: center;
}

footer hr {
    border: none;
    border-top: 1px solid var(--section-divider);
    margin-bottom: 1.5rem;
}

footer a {
    color: var(--link-color);
    text-decoration: none;
}
footer a:hover {
    text-decoration: underline;
}

.site-tagline {
    font-family: var(--font-headings);
    font-style: italic;
    margin-bottom: 0.75rem;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    font-family: var(--font-headings);
}
.footer-links li:not(:last-child)::after {
    content: ' ·';
    color: var(--text-secondary);
}

.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    background: var(--bg-accent);
    border: 1px solid var(--border-color);
    font-family: var(--font-headings);
    font-size: 0.8rem;
    color: var(--text-secondary);
}
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}
/* ── Book catalogue entries ───────────────────────────────── */

.book-entry {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--section-divider);
}
.book-entry:last-child {
    border-bottom: none;
}

.book-entry h3 {
    margin-bottom: 0.25rem;
}

.book-entry h3 a {
    color: var(--link-color);
    text-decoration: none;
}
.book-entry h3 a:hover {
    text-decoration: underline;
}

.book-author {
    font-family: var(--font-headings);
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.book-date {
    font-family: var(--font-headings);
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.book-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}