:root {
    /* Paper stock: FT salmon. --cream keeps its name so every existing rule
       picks up the new stock without a rename. */
    --cream: #fff1e5;
    --light-taupe: #ecd9c6;
    --warm-gray: #9c8877;
    --dark-gray: #4a4038;
    --accent: #8a2b1c;          /* oxblood — links and hovers only */
    --soft-black: #1d1712;

    --display: 'Newsreader', Georgia, serif;
    --headline: 'Libre Bodoni', var(--display);   /* front-page story headlines */

    /* Book covers as offset-printed plates: colour pulled back and warmed,
       but detail and hue kept legible. Not greyscale. */
    --plate: saturate(0.58) sepia(0.16) contrast(0.95) brightness(1.03);
    --plate-hover: saturate(0.85) sepia(0.05) contrast(1) brightness(1);
}

/* Always reserve the scrollbar gutter. Without it a page shifts sideways by
   half a scrollbar the moment one appears (covers finishing loading, a filter
   hiding tiles), which reads as a jolt right after a page turn lands. */
html {
    scrollbar-gutter: stable;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Libre Baskerville', Georgia, serif;
    background-color: var(--cream);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23b)' opacity='0.035'/%3E%3C/svg%3E");
    color: var(--soft-black);
    line-height: 1.6;
}

/* Header & Navigation */
header {
    background-color: var(--cream);
    border-bottom: 1px solid var(--light-taupe);
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 1.5rem 2rem;
}

nav {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: 'Libre Bodoni', var(--display);
    font-size: 1.55rem;
    font-weight: 500;
    font-style: italic;
    color: var(--soft-black);
    letter-spacing: 0;
}

nav a {
    color: var(--dark-gray);
    text-decoration: none;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-left: 1.4rem;
    padding: 0.5rem 0.75rem;
    border-radius: 2px;
    transition: background-color 0.25s ease, color 0.25s ease;
}

nav a:hover,
nav a:focus-visible {
    background-color: var(--accent);
    color: var(--cream);
}

/* Hamburger button — hidden on desktop, shown at ≤640px. */
.nav-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--dark-gray);
    padding: 0;
    transition: color 0.3s;
}

.nav-hamburger:hover {
    color: var(--accent);
}

/* Mobile: collapse the links into a hamburger-toggled vertical dropdown.
   The header already has a border-bottom that separates the open menu from
   the page content below. */
@media (max-width: 640px) {
    nav { flex-wrap: wrap; }

    .nav-hamburger { display: block; }

    .nav-links {
        display: flex;
        flex-direction: column;
        flex-basis: 100%;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        transition: max-height 0.28s ease, opacity 0.2s ease;
    }

    nav.nav-open .nav-links {
        max-height: 240px;
        opacity: 1;
        pointer-events: auto;
        margin-top: 1rem;
        border-top: 1px solid var(--light-taupe);
    }

    nav.nav-open .nav-links a {
        margin-left: 0;
        padding: 0.8rem 0.25rem;
        font-size: 1rem;
        border-bottom: 1px solid var(--light-taupe);
    }
}

/* ── NEWSPAPER HERO ──────────────────────────────────── */
.newspaper-hero {
    position: relative;
    border-bottom: 4px solid #111;
    /* Aged newsprint: warm uneven tint + foxing + fine grain. */
    background-color: #fbe4d2;
    background-image:
        radial-gradient(120% 90% at 18% 8%, rgba(214,196,158,0.30) 0%, transparent 45%),
        radial-gradient(110% 80% at 92% 96%, rgba(204,182,140,0.34) 0%, transparent 50%),
        radial-gradient(140% 120% at 50% 50%, transparent 58%, rgba(120,96,58,0.10) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

/* Top hairline rule above the masthead — FT-style trim. */
.newspaper-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: #111;
    box-shadow: 0 4px 0 -2.5px #111;  /* thin companion rule below */
}

/* Masthead */
.masthead {
    padding: 1.4rem 3rem 0;
    text-align: center;
}

.masthead-vol {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.68rem;
    color: #666;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
}

.masthead-name {
    font-family: 'IM Fell English', var(--display);
    font-size: clamp(2.6rem, 6.5vw, 5.2rem);
    color: #0a0a0a;
    line-height: 0.9;
    letter-spacing: -3px;
    margin: 0 0 0.6rem;
}

.masthead-rule {
    border: none;
    border-top: 4px double #111;   /* classic newspaper double rule */
    margin: 0;
}

.masthead-strapline {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.78rem;
    font-style: italic;
    color: var(--accent);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    margin: 0 auto 0.7rem;
    max-width: 46ch;
}

.masthead-tagline {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.7rem;
    color: #666;
    font-style: italic;
    padding: 0.3rem 0 0.9rem;
}

/* Section banner */
.section-banner {
    background: #111;
    color: #f2efe8;
    text-align: center;
    padding: 0.28rem 3rem;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.65rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

.newspaper-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Headlines are links, but no newspaper ever printed a blue underlined
   headline. The whole story block is clickable; hover supplies the affordance. */
.newspaper-content a {
    color: inherit;
    text-decoration: none;
}

.newspaper-content a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ── REPORT EXHIBIT ──────────────────────────────────────
   A printed chart in the annual-report idiom: solid ink for finished work,
   oxblood for work in hand, hatched outline for what is only on the ledger.
   No script, no chart library — the bars are divs with heights. */
.exhibit {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 2rem 1.6rem;
    border-bottom: 1px solid var(--light-taupe);
}

.exhibit-head {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #111;
    margin-bottom: 1.6rem;
}

.exhibit-rule {
    flex: 1;
    height: 0;
    border-top: 1px solid var(--light-taupe);
}

.exhibit-count {
    font-weight: 400;
    letter-spacing: 0.12em;
    color: var(--warm-gray);
}

/* Plot left, key and footnote set beside it — the report-exhibit arrangement,
   and it uses the width the bars alone would leave empty. */
.exhibit-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 17rem;
    gap: 3rem;
    align-items: end;
}

.exhibit-plot {
    display: flex;
    align-items: flex-end;
    gap: 2.5rem;
    /* Baseline the columns stand on. */
    border-bottom: 2px solid #111;
    padding: 0 0.5rem;
}

.exhibit-col {
    flex: 1;
    max-width: 132px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.exhibit-total {
    font-family: var(--display);
    font-size: 1.35rem;
    font-weight: 700;
    color: #111;
    line-height: 1;
    margin-bottom: 0.4rem;
}

.exhibit-stack {
    display: flex;
    flex-direction: column;
}

.seg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.62rem;
    line-height: 1;
}

.seg-read    { background: #241c15; color: #fff1e5; }
.seg-reading { background: var(--accent); color: #fff1e5; }
.seg-list {
    color: #241c15;
    border: 1px solid #241c15;
    background: repeating-linear-gradient(
        45deg, transparent 0 3px, rgba(36,28,21,0.28) 3px 4px);
}

/* Knock the hatching out behind the figure so it stays readable. */
.seg-list span {
    background: var(--cream);
    padding: 0 0.25rem;
}

.exhibit-name {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #111;
    padding-top: 0.5rem;
}

.exhibit-key {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.4rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--light-taupe);
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dark-gray);
}

.exhibit-key-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.exhibit-key i {
    width: 15px;
    height: 9px;
    display: inline-block;
}

.exhibit-note {
    margin-top: 0.7rem;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.65rem;
    font-style: italic;
    color: var(--warm-gray);
    max-width: 62ch;
}

@media (max-width: 860px) {
    .exhibit-body { grid-template-columns: 1fr; gap: 1.2rem; }
}

@media (max-width: 640px) {
    .exhibit { padding: 1.5rem 1.2rem 1.2rem; }
    .exhibit-plot { gap: 1rem; }
    .exhibit-total { font-size: 1.1rem; }
    .exhibit-name { font-size: 0.52rem; letter-spacing: 0.08em; }
}

/* About this publication */
.about-publication {
    background-color: var(--cream);
    border-bottom: 1px solid var(--light-taupe);
}

.about-inner {
    max-width: 1280px;
    margin: 0 auto;
    /* Sits on the same measure as the newspaper grid above it, set as a
       two-column standfirst rather than a centred block. */
    padding: 2rem 2rem 2.5rem;
    text-align: left;
    columns: 2;
    column-gap: 2.5rem;
    column-rule: 1px solid var(--light-taupe);
}

.about-heading {
    column-span: all;
    border-bottom: 2px solid #111;
    padding-bottom: 0.4rem;
    font-family: var(--display);
    font-size: 1.4rem;
    color: var(--soft-black);
    letter-spacing: -0.3px;
    margin-bottom: 1rem;
}

.about-inner p {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.95rem;
    color: var(--dark-gray);
    line-height: 1.75;
    margin-bottom: 0.9rem;
    break-inside: avoid;   /* keep a paragraph in one column */
}

.about-inner a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--light-taupe);
    transition: color 0.3s;
}

.about-inner a:hover {
    color: var(--soft-black);
}

.about-links {
    column-span: all;
    margin-top: 1.2rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--light-taupe);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.about-links span {
    color: var(--warm-gray);
    margin: 0 0.5rem;
}

/* Top grid: a wide column (the lead, with the smaller stories directly under
   it) beside a narrow column of side stories. Each column sizes itself, so
   the lead never floats above a gap. */
.newspaper-top {
    display: grid;
    grid-template-columns: 2fr 1fr;
    border-bottom: 2px solid #222;
}

.story-main-col {
    min-width: 0;
    border-right: 1px solid var(--light-taupe);
}

.story-side-col {
    min-width: 0;
}

.story-lead {
    padding: 1.5rem 2rem 1.5rem 0;
    cursor: pointer;
    transition: background 0.2s;
}

.story-side {
    padding: 1.2rem 0 1.2rem 1.5rem;
    cursor: pointer;
    transition: background 0.2s;
}

.story-side + .story-side {
    border-top: 1px solid var(--light-taupe);
}

/* Smaller stories, two across, directly beneath the lead */
.newspaper-bottom-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--light-taupe);
}

.story-main-col .story-bottom:first-child {
    padding-left: 0;
}

.story-bottom {
    padding: 1.1rem 1.4rem 1.4rem;
    cursor: pointer;
    transition: background 0.2s;
}

.story-bottom + .story-bottom {
    border-left: 1px solid var(--light-taupe);
}

/* Hover states */
.story-lead:hover,
.story-side:hover,
.story-bottom:hover {
    background: rgba(0, 0, 0, 0.025);
}

.story-lead:hover .story-headline-lead,
.story-side:hover .story-headline,
.story-bottom:hover .story-headline-sm {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

/* Story typography */
.story-kicker {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    color: #111;
    border-bottom: 2px solid #111;
    display: inline-block;
    padding-bottom: 2px;
    margin-bottom: 0.7rem;
}

.story-headline-lead {
    font-family: var(--headline);
    font-size: clamp(1.55rem, 2.6vw, 2.3rem);
    line-height: 1.12;
    color: #0a0a0a;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.story-headline {
    font-family: var(--headline);
    font-size: 1.1rem;
    line-height: 1.22;
    color: #0a0a0a;
    margin-bottom: 0.35rem;
    font-weight: 500;
}

.story-headline-sm {
    font-family: var(--headline);
    font-size: 0.98rem;
    line-height: 1.25;
    color: #0a0a0a;
    margin-bottom: 0.3rem;
    font-weight: 500;
}

.story-deck {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-style: italic;
    font-size: 0.85rem;
    color: #444;
    margin-bottom: 0.7rem;
    line-height: 1.55;
}

.story-byline {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.63rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #777;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--light-taupe);
    margin-bottom: 0.85rem;
}

.story-body {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.82rem;
    line-height: 1.72;
    color: #222;
    text-align: justify;
}

.story-body::first-letter {
    font-family: var(--display);
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 0.78;
    float: left;
    margin-right: 0.08em;
    margin-top: 0.06em;
    color: #0a0a0a;
}

/* A print standfirst, not a UI pill — the boxed chip was the one element
   on the page a 1978 report could not have printed. */
.story-progress {
    display: block;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.64rem;
    color: var(--warm-gray);
    font-style: italic;
    margin-top: 0.7rem;
}

/* Book covers, printed as muted plates (see --plate) */
.story-img-lead {
    float: right;
    width: 172px;
    height: 240px;
    margin: 0 0 1rem 1.5rem;
    overflow: hidden;
    border: 1px solid #bbb;
    flex-shrink: 0;
}

.story-img-lead img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: var(--plate);
    display: block;
    transition: filter 0.3s;
}

.story-lead:hover .story-img-lead img {
    filter: var(--plate-hover);
}

.story-img-sm {
    float: right;
    width: 84px;
    height: 120px;
    margin: 0 0 0.6rem 1rem;
    overflow: hidden;
    border: 1px solid #bbb;
}

.story-img-sm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: var(--plate);
    display: block;
    transition: filter 0.3s;
}

.story-side:hover .story-img-sm img,
.story-bottom:hover .story-img-sm img {
    filter: var(--plate-hover);
}

/* Page-load animation */
@keyframes newsEntrance {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.newspaper-hero { animation: newsEntrance 0.45s ease forwards; }
.flip-arriving .newspaper-hero { animation: none; }

/* Mobile */
@media (max-width: 768px) {
    .masthead { padding: 1rem 1.5rem 0; }
    .masthead-name { font-size: 2.4rem; letter-spacing: -1px; }
    .masthead-vol { flex-direction: column; gap: 0.15rem; text-align: center; }
    .newspaper-top { grid-template-columns: 1fr; }
    .story-main-col { border-right: none; border-bottom: 1px solid var(--light-taupe); }
    .story-lead { padding-right: 0; }
    .story-img-lead { float: none; width: 138px; height: 196px; margin: 0 0 1rem; }
    .about-inner { columns: 1; }
    /* justified text opens rivers at this measure */
    .story-body { text-align: left; }
    .story-side { padding-left: 0; border-top: 1px solid var(--light-taupe); }
    .newspaper-bottom-row { grid-template-columns: 1fr; }
    .story-bottom { padding-left: 0; padding-right: 0; }
    .story-bottom + .story-bottom { border-left: none; border-top: 1px solid var(--light-taupe); }
}

/* Main Content */
main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

.library-section {
    margin-bottom: 5rem;
}

.library-section h2 {
    font-family: var(--display);
    font-size: 2rem;
    margin-bottom: 2rem;
    color: var(--soft-black);
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--light-taupe);
    letter-spacing: -0.5px;
}

.books-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Book Card */
.book-card {
    background: white;
    border: 1px solid var(--light-taupe);
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

.book-card:hover {
    box-shadow: 0 4px 16px rgba(42, 36, 32, 0.06);
    border-color: var(--accent);
}

.book-header {
    padding: 1.5rem;
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.book-title-group {
    flex: 1;
}

.book-title {
    font-family: var(--display);
    font-size: 1.25rem;
    color: var(--soft-black);
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.book-author {
    font-size: 0.95rem;
    color: var(--warm-gray);
    font-weight: 500;
}

.book-status {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    border-radius: 3px;
    margin-left: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.status-read {
    background-color: #f0f0f0;
    color: #666;
}

.status-reading {
    background-color: #fffbeb;
    color: #92400e;
}

.status-list {
    background-color: #f3f4f6;
    color: #4b5563;
}

.expand-icon {
    margin-left: 1rem;
    color: var(--accent);
    font-size: 1.2rem;
    transition: transform 0.3s;
}

.book-card.expanded .expand-icon {
    transform: rotate(180deg);
}

/* Expanded Content */
.book-details {
    display: none;
    padding: 0 1.5rem 1.5rem;
    border-top: 1px solid var(--light-taupe);
    background-color: #fafaf8;
}

.book-card:has(.status-read) .book-details {
    background-color: #f0f8f0;
}

.book-card:has(.status-reading) .book-details {
    background-color: #fdfbee;
}

.book-card:has(.status-list) .book-details {
    background-color: #fdf4f4;
}

.book-card.expanded .book-details {
    display: block;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.book-content {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.book-cover {
    width: 150px;
    height: 225px;
    background: linear-gradient(135deg, var(--light-taupe), var(--cream));
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.book-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: var(--plate);
}

.book-cover.no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--warm-gray);
    font-size: 0.9rem;
    text-align: center;
    padding: 1rem;
}

.book-text {
    flex: 1;
}

.my-notes {
    margin-bottom: 1.5rem;
}

.my-notes-label {
    font-weight: 600;
    color: var(--dark-gray);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    display: block;
}

.my-notes-text {
    font-style: italic;
    color: var(--dark-gray);
    line-height: 1.7;
}

.summary {
    margin-bottom: 2rem;
}

.summary-label {
    font-weight: 600;
    color: var(--dark-gray);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    display: block;
}

.summary-text {
    color: var(--dark-gray);
    line-height: 1.7;
}

/* Footer — newspaper colophon */
footer {
    background-color: transparent;
    border-top: 1px solid var(--light-taupe);
    padding: 1.6rem 2rem;
    margin-top: 0;
}

footer p {
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Libre Baskerville', Georgia, serif;
    color: var(--warm-gray);
    font-size: 0.75rem;
    text-align: center;
}

/* Mobile */
@media (max-width: 768px) {
    .book-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .book-status {
        margin-left: 0;
        margin-top: 1rem;
    }

    .book-content {
        grid-template-columns: 1fr;
    }

    .book-cover {
        margin: 0 auto;
    }
}

/* ── LIBRARY PAGE (library.html) ──────────────────────── */
.library-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3.5rem 2rem 4rem;
}

.book-tiles-grid {
    display: grid;
    /* Mobile-first: 2 across, growing to a maximum of 4 on wider screens. */
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem 1.6rem;
}

@media (min-width: 640px) {
    .book-tiles-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 960px) {
    .book-tiles-grid { grid-template-columns: repeat(4, 1fr); }
}

.book-tile {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease;
}

.book-tile[hidden] {
    display: none !important;
}

.book-tile:hover {
    transform: translateY(-3px);
}

.tile-cover {
    width: 100%;
    aspect-ratio: 2 / 3;
    background: linear-gradient(135deg, var(--light-taupe), var(--cream));
    border: 1px solid var(--light-taupe);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(42, 36, 32, 0.06);
    transition: box-shadow 0.25s ease;
}

.book-tile:hover .tile-cover {
    box-shadow: 0 8px 22px rgba(42, 36, 32, 0.14);
}

.tile-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: var(--plate);
}

.tile-cover.no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--warm-gray);
    font-size: 0.85rem;
    text-align: center;
    padding: 1rem;
}

.tile-meta {
    padding-top: 0.75rem;
}

.tile-title {
    font-family: var(--display);
    font-size: 1rem;
    line-height: 1.3;
    color: var(--soft-black);
    margin-bottom: 0.2rem;
}

.book-tile:hover .tile-title {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.tile-author {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-style: italic;
    font-size: 0.8rem;
    color: var(--warm-gray);
    margin-bottom: 0.55rem;
}

.book-tile .book-status {
    display: inline-block;
    margin-left: 0;
    font-size: 0.62rem;
    padding: 0.25rem 0.55rem;
}

@media (max-width: 768px) {
    .library-page { padding: 2.5rem 1.2rem 3rem; }
    .book-tiles-grid { gap: 1.8rem 1.1rem; }
}

/* ── LIBRARY FILTER BAR ─────────────────────────────────── */
.lib-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--light-taupe);
}

.lib-search-input {
    width: 100%;
    max-width: 400px;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid var(--warm-gray);
    padding: 0.45rem 0.1rem 0.4rem;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.88rem;
    color: var(--soft-black);
    outline: none;
    transition: border-color 0.2s;
}

.lib-search-input::placeholder {
    color: var(--warm-gray);
    font-style: italic;
}

.lib-search-input:focus {
    border-bottom-color: var(--soft-black);
}

.lib-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.lib-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.lib-filter-btn {
    background: none;
    border: 1px solid var(--light-taupe);
    padding: 0.28rem 0.85rem;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dark-gray);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.lib-filter-btn:hover,
.lib-filter-btn:focus-visible {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--cream);
}

.lib-filter-btn.active {
    background: var(--soft-black);
    border-color: var(--soft-black);
    color: var(--cream);
}

/* Empty state shown when no tiles match */
.lib-empty-state {
    display: none;
    text-align: center;
    padding: 4rem 2rem;
    font-family: 'IM Fell English', Georgia, serif;
    font-style: italic;
    color: var(--warm-gray);
    font-size: 1.1rem;
}

.lib-empty-state:not([hidden]) {
    display: block;
}

/* Tile reveal animation when filter changes */
@keyframes tileReveal {
    from { opacity: 0; transform: scale(0.97) translateY(5px); }
    to   { opacity: 1; transform: none; }
}

.book-tiles-grid.is-filtering .book-tile:not([hidden]) {
    animation: tileReveal 0.18s ease forwards;
}

@media (max-width: 640px) {
    .lib-search-input { max-width: 100%; }
    .lib-filter-btn {
        padding: 0.25rem 0.65rem;
        font-size: 0.62rem;
    }
}

/* ── PER-BOOK PAGE (books/[slug].html) ────────────────── */
.book-page-hero .masthead {
    padding: 1.3rem 2rem;
}

.book-page-hero .masthead-name {
    font-size: clamp(1.8rem, 4vw, 3rem);
    letter-spacing: -2px;
    margin: 0;
}

.book-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 2.5rem 2rem 4rem;
}

.back-to-library {
    display: inline-block;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
    margin-bottom: 2.5rem;
    transition: color 0.3s;
}

.back-to-library:hover {
    color: var(--soft-black);
}

.detail-labels {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.detail-section {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    color: #111;
    border-bottom: 2px solid #111;
    padding-bottom: 2px;
}

.book-detail .book-status {
    display: inline-block;
    margin-left: 0;
}

.detail-title {
    font-family: var(--display);
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.12;
    color: var(--soft-black);
    letter-spacing: -0.5px;
    margin-bottom: 0.5rem;
}

.detail-author {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-style: italic;
    font-size: 1.05rem;
    color: var(--warm-gray);
    margin-bottom: 2.2rem;
}

.detail-body {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2.5rem;
    align-items: start;
}

.detail-cover {
    width: 220px;
    aspect-ratio: 2 / 3;
    background: linear-gradient(135deg, var(--light-taupe), var(--cream));
    border: 1px solid var(--light-taupe);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(42, 36, 32, 0.10);
}

.detail-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: var(--plate);
}

.detail-cover.no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--warm-gray);
    font-size: 0.9rem;
    text-align: center;
    padding: 1rem;
}

.detail-notes-label {
    display: block;
    font-weight: 600;
    color: var(--dark-gray);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.8rem;
}

.detail-notes-text {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1rem;
    line-height: 1.85;
    color: var(--dark-gray);
    text-align: justify;
}

/* The global reset zeroes <p> margins, so rendered notes ran together as a
   single block. Indent successive paragraphs instead of spacing them — this
   is a printed page, not a web article. */
.detail-notes-text p + p {
    text-indent: 1.6em;
}

.detail-notes-text ul,
.detail-notes-text ol {
    margin: 0.9rem 0 0.9rem 1.6em;
}

.detail-notes-text li {
    margin-bottom: 0.35rem;
}

.detail-notes-empty {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-style: italic;
    color: var(--warm-gray);
}

@media (max-width: 768px) {
    .book-page { padding: 2rem 1.2rem 3rem; }
    .detail-body { grid-template-columns: 1fr; gap: 1.5rem; }
    .detail-cover { margin: 0 auto; }
}

/* ── ESSAYS LISTING (essays/index.html) ───────────────── */
.essays-page {
    max-width: 1040px;
    margin: 0 auto;
    padding: 3.5rem 2rem 4rem;
}

/* Category chips — same pill shape as book status, tinted per category. */
.essay-category {
    display: inline-block;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.62rem;
    padding: 0.25rem 0.6rem;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    background-color: #f0f0f0;
    color: #666;
}

.essay-category-software    { background-color: #eef1f4; color: #3b5566; }
.essay-category-engineering { background-color: #f0f1ec; color: #5a5f3a; }
.essay-category-finance     { background-color: #eef3ee; color: #3a5a40; }
.essay-category-philosophy  { background-color: #f3eef2; color: #5b3a52; }

.essay-date {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--warm-gray);
}

/* Featured essay (newest) — full-width hero, the whole block is a link. */
.essay-featured {
    display: block;
    text-decoration: none;
    color: inherit;
    border-top: 4px double #111;
    padding: 2.2rem 0 2.4rem;
}

.essay-kicker {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    color: #111;
    border-bottom: 2px solid #111;
    display: inline-block;
    padding-bottom: 2px;
    margin-bottom: 0.9rem;
}

.essay-featured-headline {
    font-family: var(--display);
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    line-height: 1.12;
    color: #0a0a0a;
    font-weight: 700;
    margin-bottom: 0.6rem;
}

.essay-featured:hover .essay-featured-headline {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.essay-featured-deck {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-style: italic;
    font-size: 0.95rem;
    color: #444;
    line-height: 1.6;
    max-width: 60ch;
    margin-bottom: 0.9rem;
}

.essays-divider {
    border: none;
    border-top: 1px solid var(--light-taupe);
    margin: 0;
}

/* Chronological two-column grid (gap 0; rules separate the tiles). */
.essay-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.essay-tile {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 1.6rem 0;
    border-bottom: 1px solid var(--light-taupe);
    transition: background 0.2s;
}

.essay-tile:nth-child(odd) {
    border-right: 1px solid var(--light-taupe);
    padding-right: 2rem;
}

.essay-tile:nth-child(even) {
    padding-left: 2rem;
}

.essay-tile:hover {
    background: rgba(0, 0, 0, 0.02);
}

.essay-tile-title {
    font-family: var(--display);
    font-size: 1.05rem;
    line-height: 1.25;
    color: var(--soft-black);
    font-weight: 700;
    margin: 0.6rem 0 0.5rem;
}

.essay-tile:hover .essay-tile-title {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.essays-empty {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-style: italic;
    color: var(--warm-gray);
    padding: 2rem 0;
}

@media (max-width: 768px) {
    .essays-page { padding: 2.5rem 1.2rem 3rem; }
    .essay-grid { grid-template-columns: 1fr; }
    .essay-tile:nth-child(odd) { border-right: none; padding-right: 0; }
    .essay-tile:nth-child(even) { padding-left: 0; }
}

/* ── INDIVIDUAL ESSAY PAGE (essays/[slug].html) ───────── */
.essay-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 2.5rem 2rem 4rem;
}

.essay-detail-labels {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.essay-detail-title {
    font-family: var(--display);
    font-size: clamp(1.9rem, 4.2vw, 2.8rem);
    line-height: 1.14;
    color: var(--soft-black);
    letter-spacing: -0.5px;
    margin-bottom: 0.7rem;
}

.essay-detail-deck {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--warm-gray);
    line-height: 1.5;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--light-taupe);
}

.essay-detail-body {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1rem;
    line-height: 1.85;
    color: var(--dark-gray);
    text-align: justify;
}

.essay-detail-body p {
    margin-bottom: 1.2rem;
}

.essay-detail-body h2,
.essay-detail-body h3 {
    font-family: var(--display);
    color: var(--soft-black);
    text-align: left;
    line-height: 1.25;
    margin: 2rem 0 0.8rem;
}

.essay-detail-body h2 { font-size: 1.5rem; }
.essay-detail-body h3 { font-size: 1.2rem; }

.essay-detail-body blockquote {
    border-left: 3px solid var(--accent);
    margin: 1.5rem 0;
    padding: 0.2rem 0 0.2rem 1.4rem;
    font-style: italic;
    color: var(--accent);
    text-align: left;
}

.essay-detail-body ul,
.essay-detail-body ol {
    margin: 0 0 1.2rem 1.4rem;
    text-align: left;
}

.essay-detail-body li {
    margin-bottom: 0.4rem;
}

.essay-detail-body a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--light-taupe);
}

.essay-detail-body a:hover {
    color: var(--soft-black);
}

.essay-detail-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.8rem auto;
    border: 1px solid var(--light-taupe);
    filter: sepia(0.2);
}

@media (max-width: 768px) {
    .essay-page { padding: 2rem 1.2rem 3rem; }
}

/* ── In the Galleries ─────────────────────────────────────────────────────── */

.galleries-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 3rem 2rem 4rem;
}

.gallery-visit-list {
    display: flex;
    flex-direction: column;
}

.visit-tile {
    display: block;
    padding: 1.6rem 0;
    border-bottom: 1px solid var(--light-taupe);
    color: inherit;
    text-decoration: none;
    transition: background-color 0.2s;
}

.visit-tile:hover { background-color: rgba(138, 43, 28, 0.04); }

.visit-date {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--warm-gray);
    margin-bottom: 0.35rem;
}

.visit-title {
    font-family: var(--display);
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--soft-black);
    margin: 0 0 0.4rem;
}

.visit-tile:hover .visit-title { color: var(--accent); }

.visit-venue {
    font-style: italic;
    color: var(--dark-gray);
    font-size: 0.98rem;
    margin-bottom: 0.35rem;
}

.visit-count {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--warm-gray);
}

.gallery-visit-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 2.5rem 2rem 4rem;
}

.visit-detail {
    padding-top: 1.5rem;
}

.visit-detail-date {
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--warm-gray);
    margin-bottom: 0.6rem;
}

.visit-detail-title {
    font-family: var(--display);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--soft-black);
    margin: 0 0 0.6rem;
}

.visit-detail-venue {
    font-style: italic;
    font-size: 1.05rem;
    color: var(--dark-gray);
    margin-bottom: 1rem;
}

.visit-detail-intro {
    font-size: 1rem;
    color: var(--dark-gray);
    margin: 1rem 0 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--light-taupe);
}

.artwork-list {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.artwork {
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--light-taupe);
}

.artwork:last-child { border-bottom: none; }

.artwork-imgs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.artwork-imgs:has(.artwork-fig:only-child),
.artwork-imgs:has(.artwork-noimg) {
    grid-template-columns: 1fr;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.artwork-fig {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.artwork-fig img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--light-taupe);
    background: var(--cream);
    display: block;
}

.artwork-ref img { filter: var(--plate); }

.artwork-fig figcaption {
    margin-top: 0.5rem;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-style: italic;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: var(--warm-gray);
    text-align: center;
}

.artwork-noimg {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--warm-gray);
    font-style: italic;
    border: 1px dashed var(--light-taupe);
}

.artwork-name {
    font-family: var(--display);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--soft-black);
    margin: 0 0 0.25rem;
}

.artwork-meta {
    font-size: 0.9rem;
    color: var(--dark-gray);
    margin-bottom: 0.6rem;
}

.artwork-notes {
    font-size: 0.95rem;
    color: var(--dark-gray);
    line-height: 1.7;
}

.artwork-notes p { margin-bottom: 0.7rem; }

.galleries-empty, .visit-empty {
    text-align: center;
    color: var(--warm-gray);
    font-style: italic;
    padding: 3rem 0;
}

@media (max-width: 640px) {
    .galleries-page, .gallery-visit-page { padding: 2rem 1.2rem 3rem; }
    .visit-detail-title { font-size: 1.9rem; }
    .artwork-imgs { grid-template-columns: 1fr; }
}

/* ── Marginalia ───────────────────────────────────────────────────────────── */

.marginalia-page {
    max-width: 980px;
    margin: 0 auto;
    padding: 3rem 2rem 4rem;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 3.5rem;
    align-items: start;
}

.marg-toc {
    position: sticky;
    top: 5.5rem;
    font-family: 'Libre Baskerville', Georgia, serif;
    background: var(--soft-black);
    color: var(--cream);
    padding: 1.1rem 0;
    max-height: calc(100vh - 7rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}

.marg-toc-head {
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 241, 229, 0.55);
    padding: 0 1.1rem 0.85rem;
    border-bottom: 1px solid rgba(255, 241, 229, 0.12);
    margin-bottom: 0.4rem;
}

.marg-toc-list {
    list-style: none;
    padding: 0.2rem 0;
    margin: 0;
    counter-reset: mtoc;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 241, 229, 0.25) transparent;
}

.marg-toc-list::-webkit-scrollbar { width: 6px; }
.marg-toc-list::-webkit-scrollbar-thumb {
    background: rgba(255, 241, 229, 0.25);
    border-radius: 3px;
}

.marg-toc-list li {
    counter-increment: mtoc;
    line-height: 1.35;
}

.marg-toc-list a {
    display: block;
    color: rgba(255, 241, 229, 0.88);
    text-decoration: none;
    font-size: 0.8rem;
    padding: 0.55rem 1.1rem 0.55rem 2.6rem;
    position: relative;
    transition: background-color 0.18s ease, color 0.18s ease;
    border-left: 2px solid transparent;
}

.marg-toc-list a::before {
    content: counter(mtoc, decimal-leading-zero);
    position: absolute;
    left: 1.1rem;
    top: 0.6rem;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: rgba(255, 241, 229, 0.4);
    font-variant-numeric: tabular-nums;
}

.marg-toc-list a:hover,
.marg-toc-list a:focus-visible {
    background: var(--accent);
    color: var(--cream);
    border-left-color: var(--cream);
}

.marg-toc-list a:hover::before,
.marg-toc-list a:focus-visible::before {
    color: rgba(255, 241, 229, 0.85);
}

.marg-entries { min-width: 0; }

.marg-entry {
    padding: 2.4rem 0;
    border-bottom: 1px solid var(--light-taupe);
}

.marg-entry:first-child { padding-top: 1rem; }
.marg-entry:last-child  { border-bottom: none; }

.marg-kicker {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--warm-gray);
    margin-bottom: 0.4rem;
}

.marg-title {
    font-family: var(--display);
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: var(--soft-black);
    margin: 0 0 1rem;
}

.marg-body {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--dark-gray);
}

.marg-body p        { margin-bottom: 1rem; }
.marg-body p:last-child { margin-bottom: 0; }

.marg-body blockquote {
    margin: 0 0 1rem 0;
    padding: 0.1rem 0 0.1rem 1.1rem;
    border-left: 2px solid var(--light-taupe);
    color: var(--soft-black);
    font-style: italic;
}

.marg-body ol, .marg-body ul {
    padding-left: 1.4rem;
    margin-bottom: 1rem;
}

.marg-body li { margin-bottom: 0.35rem; }

.marg-body em { font-style: italic; }

.marg-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.4rem auto;
    border: 1px solid var(--light-taupe);
}

.marginalia-empty {
    text-align: center;
    color: var(--warm-gray);
    font-style: italic;
    padding: 3rem 0;
}

@media (max-width: 820px) {
    .marginalia-page {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 2rem 1.2rem 3rem;
    }
    .marg-toc {
        position: static;
        border-bottom: 1px solid var(--light-taupe);
        padding-bottom: 1rem;
    }
    .marg-toc-list { columns: 2; column-gap: 1.5rem; }
    .marg-title { font-size: 1.45rem; }
}