/* GENERATED by scratchpad/design-2026/build-library-2026.sh from library-2026/library.css. Change that, not this. */
/* The Library, October 2026 (resources/js/pages/issues/library-2.tsx).

   Hand-written. This file is the source; scratchpad/design-2026/build-library-2026.sh copies it to
   public/design-css/_library.css, which is the one stylesheet the page loads. Change this, run that.

   The chrome, the tokens and the bands are _shared.css's. Everything here is lib-. No type under 17px
   but the small capital labels; everything stacks on a phone. */

.band.lib-top,
.band.lib-band,
.band.lib-join {
    padding: clamp(56px, 6vw, 104px) 0;
}

.band.lib-band:not(.stone) {
    background: var(--paper);
}

/* ---- the top: the name, the one button, and the newest issue */
.lib-top-two {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: clamp(32px, 7vw, 130px);
    align-items: center;
}

.band h1.lib-h1 {
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(48px, 6.2vw, 104px), 28px + (clamp(48px, 6.2vw, 104px) - 28px) * 0.6);
    line-height: 1;
    margin: 0 0 26px;
    color: var(--ink);
}

.band p.lib-lead {
    font-size: clamp(19px, 1.5vw, 23px);
    line-height: 1.5;
    margin: 0 0 36px;
    max-width: 34ch;
    color: var(--ink-75);
}

.lib-go {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 28px;
}

.lib-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 0 40px;
    background: var(--forest);
    color: var(--paper);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    transition: background .22s;
}

.lib-btn:hover {
    background: var(--moss);
}

.lib-btn.is-paper {
    background: var(--paper);
    color: var(--ink);
}

.lib-btn.is-paper:hover {
    background: var(--stone);
}

.lib-link {
    font-size: 17px;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: var(--ink-35);
}

.lib-link:hover {
    text-decoration-color: var(--ink);
}

.lib-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 34px;
    margin: clamp(40px, 5vw, 72px) 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--ink-20);
}

.lib-jump a {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--ink);
}

.lib-jump a:hover {
    text-decoration: underline;
    text-underline-offset: 6px;
}

.lib-new {
    display: flex;
    flex-direction: column;
    color: var(--ink);
}

.lib-new img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--stone-2);
    margin: 0 0 20px;
}

.lib-new b {
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(26px, 2.2vw, 34px), 28px + (clamp(26px, 2.2vw, 34px) - 28px) * 0.6);
    line-height: 1.1;
    margin: 0 0 6px;
}

/* ---- the Library's opening: the bookshop aisle, dark, the name in the middle */
.lib-hero {
    position: relative;
    min-height: min(86vh, 880px);
    display: flex;
    align-items: center;
    background: #414042;
    color: var(--paper);
    text-align: center;
    overflow: hidden;
}

.lib-hero video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* the film darkened by a wash over it, so the words read over its bright doorway */
.lib-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(20, 16, 13, .74);
}

.lib-hero .in {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: calc(var(--bar) + 40px);
    padding-bottom: 72px;
}

.lib-hero h1.lib-h1 {
    color: var(--paper);
    font-size: min(clamp(56px, 7.6vw, 132px), 28px + (clamp(56px, 7.6vw, 132px) - 28px) * 0.6);
}

.lib-hero p.lib-lead {
    color: rgba(251, 249, 246, .9);
    font-size: clamp(19px, 1.5vw, 23px);
    line-height: 1.5;
    max-width: 34ch;
    margin: 0 auto 36px;
    text-wrap: balance;
}

.lib-hero h1.lib-h1 {
    font-family: var(--face);
    font-weight: 400;
    line-height: 1;
    margin: 0 0 26px;
}

.lib-hero .lib-go {
    justify-content: center;
}

.lib-hero .lib-jump {
    justify-content: center;
    border-top: 0;
    padding-top: 0;
    margin-top: clamp(36px, 4vw, 56px);
}

.lib-hero .lib-jump a {
    color: var(--paper);
    padding: 10px 0;
}

/* a subject's opening: the same, a little shorter, with the way back above the name */
.lib-hero.is-room {
    min-height: min(72vh, 720px);
}

.lib-hero.is-room::after {
    background: rgba(20, 16, 13, .5);
}

.lib-hero .lib-back {
    color: var(--paper);
}

.lib-hero.is-room p.lib-lead {
    margin-bottom: 0;
}

/* the three shelves, as cards standing in front of the film */
.lib-doors {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 28px);
    margin: clamp(44px, 5vw, 80px) 0 0;
    text-align: left;
}

.lib-doors a {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    padding: 18px;
    background: rgba(251, 249, 246, .96);
    color: var(--ink);
    transition: transform .3s ease;
}

.lib-doors a:hover {
    transform: translateY(-6px);
}

.lib-doors img {
    display: block;
    width: 96px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.lib-doors b {
    display: block;
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(24px, 2vw, 32px), 28px + (clamp(24px, 2vw, 32px) - 28px) * 0.6);
    line-height: 1.1;
    margin: 0 0 6px;
}

.lib-doors span span {
    font-size: 17px;
    line-height: 1.4;
    color: var(--ink-75);
}

.lib-credit {
    position: absolute;
    right: var(--edge);
    bottom: 22px;
    z-index: 2;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(251, 249, 246, .7);
}

/* a shelf jumped to stops under the bar, not behind it */
#magazines,
#guidebooks,
#articles {
    scroll-margin-top: var(--bar, 76px);
}

/* ---- the small words: a label above a name, a line beneath it */
.lib-eye {
    display: block;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-75);
    margin: 0 0 10px;
}

.lib-said {
    display: block;
    font-size: 17px;
    line-height: 1.45;
    color: var(--ink-75);
}

/* ---- a shelf's heading, and what goes at its right */
.lib-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 32px;
    margin: 0 0 36px;
}

.lib-head.is-second {
    margin-top: clamp(48px, 5vw, 80px);
}

.band h2.lib-h2 {
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(32px, 3.3vw, 52px), 28px + (clamp(32px, 3.3vw, 52px) - 28px) * 0.6);
    line-height: 1.1;
    margin: 0;
    color: var(--ink);
}

.band h3.lib-h3 {
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(26px, 2.2vw, 34px), 28px + (clamp(26px, 2.2vw, 34px) - 28px) * 0.6);
    line-height: 1.1;
    margin: 0;
    color: var(--ink);
}

.band p.lib-sub {
    font-size: 19px;
    line-height: 1.5;
    margin: 0;
    color: var(--ink-75);
}

/* ---- the magazines: every cover, six to a row */
.band ul.lib-shelf {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(28px, 3vw, 48px) clamp(16px, 1.7vw, 28px);
}

.lib-shelf a,
.lib-cards a {
    display: block;
    color: var(--ink);
}

.lib-cover {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--stone-2);
    margin: 0 0 16px;
}

.lib-cover img,
.lib-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s ease;
}

.lib-shelf a:hover img,
.lib-cards a:hover img,
.lib-new:hover img {
    transform: scale(1.03);
}

.lib-shelf b {
    display: block;
    font-family: var(--face);
    font-weight: 400;
    font-size: clamp(20px, 1.5vw, 24px);
    line-height: 1.15;
    margin: 0 0 4px;
}

/* ---- cards of things to read: four to a row, or three */
.band ul.lib-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(28px, 3vw, 48px) clamp(18px, 2vw, 32px);
}

.band ul.lib-cards.is-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lib-shot {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--stone-2);
    margin: 0 0 18px;
}

.lib-cards b {
    display: block;
    font-family: var(--face);
    font-weight: 400;
    font-size: clamp(22px, 1.7vw, 28px);
    line-height: 1.18;
    text-wrap: balance;
}

/* ---- our latest issue: its cover, its welcome, and the button that opens it */
.lib-latest {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: clamp(32px, 7vw, 130px);
    align-items: center;
}

.lib-latest-cover img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--stone-2);
}

.band h2.lib-h2.is-big {
    font-size: min(clamp(44px, 5.4vw, 92px), 28px + (clamp(44px, 5.4vw, 92px) - 28px) * 0.6);
    line-height: 1;
    margin: 0 0 14px;
}

.lib-said.is-under {
    margin: 0 0 26px;
}

.lib-latest p.lib-lead {
    max-width: 44ch;
}

/* ---- a row to go along with arrows (Inside Issue 13) */
.lib-along {
    --gap: clamp(18px, 2vw, 32px);
}

.band ul.lib-cards.is-row {
    display: flex;
    gap: var(--gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.lib-cards.is-row::-webkit-scrollbar {
    display: none;
}

.lib-cards.is-row li {
    flex: 0 0 calc((100% - 3 * var(--gap)) / 4);
    scroll-snap-align: start;
}

.lib-arrows {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin: 30px 0 0;
}

.lib-arrows button {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 1px solid var(--ink);
    background: none;
    color: var(--ink);
    cursor: pointer;
    transition: background .22s, color .22s;
}

.lib-arrows button:hover:not(:disabled) {
    background: var(--forest);
    border-color: var(--forest);
    color: var(--paper);
}

.lib-arrows button:disabled {
    border-color: var(--ink-20);
    color: var(--ink-35);
    cursor: default;
}

.lib-arrows svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

/* ---- the articles: find one, or go in by what it is about */
.lib-find {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: min(100%, 460px);
}

.lib-find label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.lib-find input {
    flex: 1;
    min-width: 0;
    height: 56px;
    padding: 0 18px;
    font: 19px var(--serif);
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--ink-35);
    border-right: 0;
    border-radius: 0;
}

.lib-find button {
    height: 56px;
    padding: 0 26px;
    border: 0;
    background: var(--forest);
    color: var(--paper);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    cursor: pointer;
}

.band ul.lib-subjects {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 1.4vw, 22px);
}

.lib-subjects a {
    position: relative;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--forest);
    color: var(--paper);
    padding: clamp(16px, 1.6vw, 24px);
}

.lib-subjects img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.62);
    transition: transform .9s ease, filter .4s;
}

.lib-subjects a:hover img {
    transform: scale(1.04);
    filter: brightness(.5);
}

.lib-subjects b {
    position: relative;
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(24px, 2vw, 32px), 28px + (clamp(24px, 2vw, 32px) - 28px) * 0.6);
    line-height: 1.1;
}

/* ---- for somebody who is not a member */
.band.forest.lib-join {
    text-align: center;
}

.band.forest.lib-join h2.lib-h2 {
    color: var(--paper);
    margin: 0 0 18px;
}

.band.forest.lib-join p.lib-lead {
    color: rgba(251, 249, 246, .86);
    margin-left: auto;
    margin-right: auto;
    max-width: 40ch;
}

/* ---- one issue or one guidebook (issue-2.tsx) */
.lib-back {
    display: inline-block;
    margin: 0 0 28px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--ink);
}

.lib-back:hover {
    text-decoration: underline;
    text-underline-offset: 6px;
}

.band h1.lib-h1.is-issue {
    font-size: min(clamp(44px, 5.4vw, 92px), 28px + (clamp(44px, 5.4vw, 92px) - 28px) * 0.6);
    margin: 0 0 16px;
    text-wrap: balance;
}

.band p.lib-lead.is-wide {
    max-width: 44ch;
}

.lib-top .lib-eye.is-under {
    margin: 0 0 26px;
    font-size: 13px;
}

.lib-cover-big {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--stone-2);
}

.band ul.lib-cards.is-three b {
    margin: 0 0 8px;
}

.lib-by {
    display: block;
    font-size: 17px;
    line-height: 1.45;
    color: var(--ink-75);
}

.lib-cards .lib-at,
.lib-lines .lib-at {
    display: inline-block;
    margin: 12px 0 0;
    font-size: 17px;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: var(--ink-35);
}

/* the pieces with no photograph of their own: lines, two columns, in page order */
.band ul.lib-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 6vw, 110px);
    border-top: 1px solid var(--ink-20);
}

.lib-lines li {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 14px;
    align-items: baseline;
    padding: 20px 0;
    border-bottom: 1px solid var(--ink-20);
}

.lib-lines li.no-page {
    grid-template-columns: minmax(0, 1fr);
}

.lib-lines i {
    font-style: normal;
    font-family: var(--face);
    font-size: 26px;
    line-height: 1.1;
    color: var(--ink-55);
}

.lib-lines a.lib-t {
    color: var(--ink);
}

.lib-lines b {
    display: block;
    font-family: var(--face);
    font-weight: 400;
    font-size: clamp(22px, 1.7vw, 26px);
    line-height: 1.2;
    margin: 0 0 6px;
}

.lib-lines a.lib-t:hover b,
.lib-cards a:hover b,
.lib-shelf a:hover b {
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
}

/* ---- one subject, a room of the Library (topic-2.tsx) */
.band.lib-top.is-topic {
    padding-bottom: clamp(36px, 4vw, 56px);
}

.lib-rooms {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 10px;
    margin: clamp(28px, 3vw, 44px) 0 0;
}

.lib-rooms a {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 0 20px;
    border: 1px solid var(--ink-35);
    font-size: 17px;
    color: var(--ink);
    transition: background .2s, color .2s;
}

.lib-rooms a:hover,
.lib-rooms a.on {
    background: var(--forest);
    border-color: var(--forest);
    color: var(--paper);
}

/* the newest piece, large */
.lib-lead-piece {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 90px);
    align-items: center;
    color: var(--ink);
}

.lib-lead-piece .lib-shot {
    aspect-ratio: 3 / 2;
    margin: 0;
}

.lib-lead-piece b {
    display: block;
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(32px, 3.3vw, 52px), 28px + (clamp(32px, 3.3vw, 52px) - 28px) * 0.6);
    line-height: 1.08;
    margin: 0 0 18px;
    text-wrap: balance;
}

.lib-lead-line {
    display: block;
    font-size: 19px;
    line-height: 1.55;
    color: var(--ink-75);
    margin: 0 0 14px;
}

.lib-lead-piece .lib-link {
    display: inline-block;
    margin-top: 22px;
}

.lib-lead-piece:hover img {
    transform: scale(1.03);
}

.lib-more {
    display: flex;
    justify-content: center;
    margin: clamp(40px, 4vw, 64px) 0 0;
}

.lib-more .lib-btn {
    border: 0;
    cursor: pointer;
}

@media (max-width: 1100px) {
    .band ul.lib-shelf {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .band ul.lib-cards,
    .band ul.lib-subjects {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lib-cards.is-row li {
        flex-basis: calc((100% - var(--gap)) / 2);
    }

    .band ul.lib-cards.is-three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .lib-top-two {
        grid-template-columns: 1fr;
    }

    .lib-latest {
        grid-template-columns: 1fr;
    }

    .lib-lead-piece {
        grid-template-columns: 1fr;
    }

    .lib-latest-cover {
        max-width: 280px;
    }

    .band ul.lib-lines {
        grid-template-columns: 1fr;
    }

    .lib-cover-big {
        max-width: 320px;
    }

    .lib-new {
        max-width: 320px;
    }

    .lib-doors {
        grid-template-columns: 1fr;
    }

    .lib-doors a {
        grid-template-columns: 64px minmax(0, 1fr);
        padding: 12px;
    }

    .lib-doors img {
        width: 64px;
    }

    .lib-hero .in {
        padding-bottom: 64px;
    }

    /* clear of the bell at the corner */
    .lib-credit {
        right: auto;
        left: var(--edge);
    }

    .band ul.lib-cards.is-three {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .band ul.lib-shelf {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .band ul.lib-cards {
        grid-template-columns: 1fr;
    }

    .lib-cards.is-row li {
        flex-basis: 78%;
    }

    .lib-btn {
        width: 100%;
    }
}

/* ---- A ROOM OF THE LIBRARY, AS THE SHEET'S B (7 October 2026). Jack: "lets go sections", "do that for all of them",
   then "this doesnt look same as your mock up": the first try drew it in the Library's older parts (a 1280 column,
   132px names, 104px bands) and drifted. These are the sheet's own rules (/design-2026/library-room/, option B, the
   tuner at its defaults), copied value for value, each class with lr- before it so the site's own .band, .hero and
   .card never reach in. Measured against the sheet with its diff.js, at 1920. */
.lr {
    --lr-edge: clamp(16px, 5.4vw, 78px);
    --lr-oat: #EFEBE4;
    --lr-stone: #D9D2C7;
    --lr-tweed: #414042;
    --lr-forest: #2B301D;
    --lr-shell: #F6F1E8;
    --lr-paper: #FBF9F6;
    --lr-ink: #414042;
    background: var(--lr-paper);
    color: var(--lr-ink);
    font-family: 'Lora', Georgia, serif;
    font-size: 16px;
    line-height: normal;
}
.lr a { color: inherit; text-decoration: none; }
.lr img, .lr video { display: block; }

/* the room's film */
.lr-hero { position: relative; height: 72vh; min-height: 520px; max-height: 780px; overflow: hidden; background: #2b301d; color: #fff; isolation: isolate; }
/* under the glass bar, as the mock and the home page's hero (the bar is 76px, --bar where the page sets it) */
.lr-hero { margin-top: calc(-1 * var(--bar, 76px)); }
.lr-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.lr-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 12, 10, .55), rgba(10, 12, 10, .25) 40%, rgba(10, 12, 10, .6)); z-index: -1; }
.lr-w { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px; }
.lr-back { font: 500 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; opacity: .85; margin-bottom: 22px; }
.lr-back::before { content: "← "; letter-spacing: 0; }
.lr-hero h1 { font: 400 min(clamp(54px, 7vw, 104px), 28px + (clamp(54px, 7vw, 104px) - 28px) * 0.6)/1 var(--face); margin: 0; letter-spacing: -.015em; color: #fff; }
.lr-hero p { font: 400 clamp(17px, 1.5vw, 21px)/1.5 'Lora', Georgia, serif; margin: 18px 0 0; max-width: 620px; opacity: .92; color: #fff; }

/* the bands */
.lr-kick { font: 500 12px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--lr-tweed); }
.lr-band { padding: 72px var(--lr-edge); background: var(--lr-paper); }
.lr-band.lr-stone { background: var(--lr-oat); }
.lr-band.lr-forest { background: var(--lr-forest); color: var(--lr-shell); }
.lr-band.lr-forest .lr-kick { color: rgba(246, 241, 232, .7); }
.lr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
.lr-head h2 { font: 400 min(clamp(30px, 2.8vw, 44px), 28px + (clamp(30px, 2.8vw, 44px) - 28px) * 0.6)/1.08 var(--face); margin: 10px 0 0; color: inherit; }
.lr-morebtn { display: block; margin: 34px auto 0; font: 500 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--lr-ink);
    background: none; border: 0; border-bottom: 1px solid currentColor; padding: 1px 6px 4px; cursor: pointer; }

/* the newest, large */
.lr-lead { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.lr-lead .lr-ph { aspect-ratio: 4 / 3; overflow: hidden; background: var(--lr-stone); }
.lr-lead .lr-ph img { width: 100%; height: 100%; object-fit: cover; }
.lr-lead h3 { font: 400 min(clamp(34px, 3.4vw, 54px), 28px + (clamp(34px, 3.4vw, 54px) - 28px) * 0.6)/1.06 var(--face); margin: 14px 0 16px; }
.lr-lead p { font: 400 18px/1.6 'Lora', Georgia, serif; margin: 0 0 24px; color: #414042; }
.lr-btn { display: inline-block; font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; padding: 16px 22px; background: var(--lr-ink); color: #fff !important; }

/* the cards: four across, upright, the title on the picture */
.lr-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 22px; }
.lr-card { display: block; position: relative; }
.lr-card .lr-ph { aspect-ratio: 4 / 5; overflow: hidden; background: var(--lr-stone); position: relative; }
.lr-card .lr-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.lr-card:hover .lr-ph img { transform: scale(1.04); }
.lr-card .lr-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10, 10, 8, .72)); }
.lr-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; color: #fff; z-index: 1; }
.lr-eye { font: 500 11px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .82); margin: 0 0 8px; }
.lr-t { font: 400 24px/1.18 var(--face); margin: 0; color: #fff; }
.lr-noimg { position: absolute; inset: 0; background: var(--lr-forest); }

/* the other rooms, as the site's spines */
.lr-spines { display: flex; gap: 10px; height: 300px; }
.lr-sp { position: relative; flex: 1; overflow: hidden; transition: flex .5s ease; background: #222; color: #fff; min-width: 0; }
.lr a.lr-sp { color: #fff; }
.lr-sp:hover { flex: 3.2; }
.lr-sp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.lr-sp::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .65)); }
.lr-sp span { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1; font: 400 22px/1.1 var(--face); }
.lr-foot-back { display: flex; justify-content: space-between; align-items: baseline; margin-top: 34px; font: 500 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 900px) {
    .lr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lr-lead { grid-template-columns: 1fr; }
    .lr-spines { height: 220px; }
}


/* THE FOLKLORE AND HISTORY ROOMS AS ONE GRID OF TALE CARDS (Jack, 11 October 2026: "it should simple be a page showing
   all the articles ... I think the cards are too big also i think and bring the margins in its too close to the side -
   work on making this page much nicer"). A column of 1,240px, centred, with at least the room's edge either side, so
   the cards are about 295px at 1920 (the /stories shelf's size, where the card was chosen); four across, three under
   1100, two on a phone. Generous air above and below, nothing between the film and the cards but space. */
.lr-band.lr-tales { padding: clamp(56px, 6vw, 96px) var(--lr-edge) clamp(72px, 7vw, 120px); }
.lr-tale-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.lr-tales .lr-morebtn { margin-top: clamp(40px, 4vw, 56px); }
@media (max-width: 1100px) { .lr-tale-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .lr-tale-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* THE ROOM'S INTRO, ITS SUBJECTS AND WHERE (Jack, 11 October 2026: "add a nice intro for these articles so it will go
   centered below the hero and above the first careds", "for history there hsould probably be tabs", "filter by region").
   The intro is a paragraph set like the site's other page intros, centred in a reading column. The subjects are words in
   the label face, the one showing marked with the olive line the top bar uses; Where is a plain square select. */
.lr-intro { max-width: 720px; margin: 0 auto clamp(40px, 4vw, 60px); text-align: center; font: 400 clamp(18px, 1.25vw, 21px)/1.75 'Lora', Georgia, serif; color: var(--lr-ink); text-wrap: pretty; }
.lr-filters { max-width: 1240px; margin: 0 auto clamp(22px, 2.2vw, 30px); display: flex; justify-content: space-between; align-items: center; gap: 18px 32px; flex-wrap: wrap; }
.lr-filters:not(:has(.lr-tabs)) { justify-content: center; }
/* THE FILTER WORDS, as the site's filters are (DESIGN-SYSTEM section 12, "Tabs and choices", chosen by Jack on 3 October
   2026: "words in Larken 300 ... the rest in ink-55, the one you are on in ink with a 2px bracken line under it", .bm-kinds).
   They were small spaced capitals here, which no other filter on the site wears (Jack, 12 October 2026: "tabs system is
   not the one we use"). */
.lr-tabs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 32px; }
.lr-tab { padding: 0 0 6px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; white-space: nowrap; font: 300 min(clamp(26px, 2.2vw, 32px), 28px + (clamp(26px, 2.2vw, 32px) - 28px) * 0.6)/1.15 var(--face); letter-spacing: -.005em; color: rgba(65, 64, 66, .55); transition: color .2s, border-color .2s; }
.lr-tab:hover { color: var(--lr-ink); }
.lr-tab.on { color: var(--lr-ink); border-bottom-color: #C08C3D; }
.lr-tab:focus-visible { outline: 2px solid #C08C3D; outline-offset: 3px; }
.lr-where { display: inline-flex; align-items: center; gap: 14px; }
.lr-where span { font: 500 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(65, 64, 66, .6); }
.lr-where select { appearance: none; -webkit-appearance: none; border: 1px solid rgba(65, 64, 66, .28); border-radius: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23414042' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 12px center / 12px; padding: 11px 40px 11px 14px; min-width: 220px; font: 400 16px/1.2 'Lora', Georgia, serif; color: var(--lr-ink); cursor: pointer; }
.lr-where select:focus-visible { outline: 2px solid #AFA065; outline-offset: 2px; }
.lr-none { text-align: center; font: 400 18px/1.6 'Lora', Georgia, serif; color: var(--lr-ink); margin: 20px 0 40px; }
.lr-none button { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
@media (max-width: 760px) {
    .lr-filters { justify-content: flex-start; }
    .lr-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--lr-edge)); padding: 0 var(--lr-edge); width: calc(100% + 2 * var(--lr-edge)); }
    .lr-tabs::-webkit-scrollbar { display: none; }
    .lr-tab { white-space: nowrap; font-size: 20px; }
    .lr-tabs { gap: 6px 18px; }
    .lr-where, .lr-where select { width: 100%; }
}