/* #region Tokens */
.library-page {
    --research-nav-offset: 78px;
    --flag-1: var(--gold);
    --flag-2: var(--white);
    --flag-3: var(--gold);
    --flag-stops: var(--flag-1) 0 33.33%, var(--flag-2) 33.33% 66.66%, var(--flag-3) 66.66%;
}
    /* #endregion */

    /* #region Shell */
    .library-page [hidden] {
        display: none !important;
    }

    .library-page .research-shell {
        overflow: clip;
        background: var(--black);
    }

        .library-page .research-shell > section:not(.hero-cinematic),
        .library-page .research-shell > nav,
        .library-page .research-shell > aside {
            border-bottom: 1px solid var(--line);
        }

        .library-page .research-shell .container:not(.hero-content) {
            width: min(90vw, var(--section-content-max));
            max-width: none;
            margin-inline: auto;
            padding-inline: 0;
        }
    /* #endregion */

    /* #region Hero — standard inside the shared exhibit square */
    /* The bookshop's own modifier, never „--research": this hero shares the research page's markup, and
       hanging the shelf's title measure on another area's class name is how one moves the other. */
    .library-page .hero-cinematic--library .h-title {
        max-width: 11ch;
    }

    .library-page .research-exhibit .hero-exhibit-stage {
        background: linear-gradient(158deg, var(--black-mid), var(--black-deep));
    }

    .library-page .research-standard {
        position: absolute;
        inset: 5%;
        overflow: hidden;
        isolation: isolate;
        background: var(--black-deep);
    }

    .library-page .research-standard-photo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        filter: var(--photo-mute) var(--photo-at-rest);
    }

    .library-page .research-standard-field {
        position: absolute;
        inset: 0;
        background: linear-gradient(158deg, color-mix(in srgb, var(--black-deep) 62%, transparent), color-mix(in srgb, var(--black-deep) 88%, transparent)), radial-gradient(88% 72% at 88% 8%, var(--tint-raised), transparent 62%), radial-gradient(70% 62% at 6% 96%, var(--tint), transparent 60%);
    }

    .library-page .research-standard-frame {
        position: absolute;
        inset: 7%;
        border: 1px solid var(--hairline-mid);
    }

        .library-page .research-standard-frame::before {
            position: absolute;
            inset: 4%;
            content: "";
            border: 1px solid var(--hairline-faint);
        }

    .library-page .research-standard-bars {
        position: absolute;
        top: 7%;
        bottom: 7%;
        left: 7%;
        width: 14px;
        overflow: hidden;
        background: linear-gradient(180deg, var(--flag-stops));
        opacity: .82;
    }

        .library-page .research-standard-bars i {
            display: none;
        }
    /* #endregion */

    /* #region Editorial statement */
    .library-page .research-thesis {
        padding-block: var(--section-space);
        background: var(--surface-editorial);
    }

    .library-page .research-thesis-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(3rem, 6vw, 7rem);
    }

    .library-page .research-thesis-block {
        position: relative;
        padding-top: 2.6rem;
        border-top: 1px solid var(--line);
    }

        .library-page .research-thesis-block::before {
            position: absolute;
            top: -1px;
            left: 0;
            width: 52px;
            height: 1px;
            content: "";
            background: var(--gold);
        }

    .library-page .research-thesis-number {
        display: block;
        margin-bottom: 2rem;
        color: rgba(245, 245, 245, .5);
        font-family: var(--font);
        font-size: .62rem;
        font-weight: 500;
        letter-spacing: .18em;
    }


    .library-page .research-thesis h2 {
        max-width: 14ch;
        color: var(--white);
        font-family: var(--font-display);
        font-size: var(--section-title-size);
        font-weight: 300;
        letter-spacing: -.035em;
        line-height: var(--section-title-line-height);
    }

    .library-page .research-thesis p {
        max-width: 58ch;
        margin-top: 2.2rem;
        color: var(--text-muted);
        font-family: var(--font);
        font-size: clamp(1rem, 1.1vw, 1.1rem);
        font-weight: 300;
        line-height: 1.9;
    }
    /* #endregion */

    /* #region Library catalog */
    /* The shop stands on the page, not in a box. As a slab of its own — an editorial surface, a rule
       above and below the list, a border down both sides of every entry and a diagonal gold wash
       inside it — a catalogue of one title reads as a framed exhibit rather than as a section of the
       site. What belongs here is the ordinary arrangement every other
       section uses: a heading, then the content on the page's own ground. The hairline between two
       entries stays, because a rule that separates is not a rule that encloses. */
    .library-page .library-catalog-list {
        display: grid;
    }

    /* An article, not a link. Only the picture and the call to action lead anywhere; the copy
       between them is text a reader can select. */
    .library-page .library-book {
        position: relative;
        display: grid;
        grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
        overflow: hidden;
    }

        .library-page .library-book + .library-book {
            margin-top: clamp(2.5rem, 5vw, 4.5rem);
            padding-top: clamp(2.5rem, 5vw, 4.5rem);
            border-top: 1px solid var(--line);
        }

    .library-page .library-book-visual {
        position: relative;
        display: grid;
        aspect-ratio: 1;
        margin: 0;
        overflow: hidden;
        place-items: center;
        isolation: isolate;
    }

        /* The frame is the house's closed passe-partout and nothing else — a hairline set in from the edge,
           defined once in product-sections.css, where .library-book-visual is named in the selector lists,
           so the mount here is the same one the Atelier films and the research tiles wear and it opens on
           hover with them. The point of that device is that a mount sits inside the frame rather than on
           the picture's edge, carrying the eye inward instead of stopping it at a border.

           So: no second box around the cover, no corner bracket, and above all no gold ring drawn tight on
           the image's own edge under a deep drop shadow. That is how you present a physical object somebody
           could pick up, and this file is a gold key rendered on black — the ring outlines a field of black
           on a black page and is the only part of it a reader can see. No shrink either: at 68% the key
           reads as a speck.

           `contain` rather than `cover`: if a publication ever arrives with a real cover, it keeps its own
           proportions instead of being cropped to this square. */
        .library-page .library-book-visual img {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            object-fit: contain;
            filter: var(--photo-at-rest);
            transform: translateY(0);
            transition: filter var(--motion-slow) var(--ease-house), transform 1.8s var(--ease-house);
        }

    /* Keyed on the picture's own link, not on the whole entry: pointing at the blurb is not pointing at the
       cover, and the entry is not one control. The cover comes closer; it does not lift. */
    .library-page .library-book-visual:hover img,
    .library-page .library-book-visual:focus-visible img {
        filter: var(--photo-lifted);
        transform: scale(1.02);
    }

    /* No numbered plate. Numbering an entry „01" tells the reader they are looking at item one of a series,
       which is a catalogue's gesture; a section of a site lists what it has and lets the reader count. */

    .library-page .library-book-content {
        display: flex;
        min-width: 0;
        /* Only the gap between the cover and the copy. An even inset on all four sides is the padding of a
           card, and there is no card here — it only pushes the text away from its picture. */
        padding-left: clamp(2rem, 4.5vw, 4.5rem);
        flex-direction: column;
        justify-content: center;
    }

        .library-page .library-book-content .h-tag {
            margin-bottom: .6rem;
        }

    .library-page .library-book-title {
        max-width: 12ch;
        margin-top: .4rem;
        color: var(--white);
        font-family: var(--font-display);
        font-size: var(--section-title-size);
        font-weight: 300;
        letter-spacing: -.035em;
        line-height: var(--section-title-line-height);
    }

    /* A book's subtitle is part of its title page, so it is set the way a title page sets one:
       Playfair, italic — the house's editorial emphasis rather than another line of interface. */
    .library-page .library-book-subtitle {
        max-width: 34ch;
        margin-top: 1.5rem;
        color: var(--white-soft);
        font-family: var(--font-display);
        font-size: clamp(1.15rem, 1.5vw, 1.45rem);
        font-style: italic;
        font-weight: 300;
        line-height: 1.5;
    }

    /* A byline, not a second eyebrow. The block already opens with one in uppercase and letterspaced
       caps; setting the author the same way would give the reader two labels and no person. */
    .library-page .library-book-author {
        margin-top: 1.2rem;
        color: var(--white-soft);
        font-family: var(--font);
        font-size: clamp(.9rem, .95vw, 1rem);
        font-weight: 300;
        letter-spacing: .02em;
    }

        /* The <small> around the degree marks it as the qualifier, not as smaller print. On the shelf the
           byline is one inline line, so it keeps the byline's size; the book's own page is where the degree
           gets a line of its own above the name. Left to the browser's default it shrinks here too, on the
           one line that did not ask for it. */
        .library-page .library-book-author small {
            font-size: inherit;
        }

        /* Quiet until it is pointed at, like the trail's links: a byline that arrived underlined in
           gold would compete with the title above it. */
        .library-page .library-book-author a {
            color: inherit;
            text-decoration: none;
            border-bottom: 1px solid var(--hairline);
            transition: color var(--motion-quick) var(--ease-house), border-color var(--motion-quick) var(--ease-house);
        }

            .library-page .library-book-author a:hover,
            .library-page .library-book-author a:focus-visible {
                color: var(--gold);
                border-bottom-color: var(--gold);
            }

    .library-page .library-book-description {
        max-width: 58ch;
        margin-top: 1.4rem;
        color: var(--text-muted);
        font-family: var(--font);
        font-size: clamp(1rem, 1vw, 1.05rem);
        font-weight: 300;
        line-height: 1.85;
    }

    .library-page .library-book-footer {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: clamp(1.6rem, 3vw, 2.8rem);
        margin-top: clamp(2.2rem, 4vw, 3.6rem);
    }

    .library-page .library-book-price {
        display: grid;
        gap: .45rem;
    }

        .library-page .library-book-price small {
            color: var(--text-muted);
            font-family: var(--font);
            font-size: .58rem;
            font-weight: 500;
            letter-spacing: .15em;
            text-transform: uppercase;
        }

        .library-page .library-book-price strong {
            color: var(--white);
            font-family: var(--font-display);
            font-size: clamp(1.4rem, 2vw, 2rem);
            font-weight: 300;
        }

    /* No uppercase text link with a gold arrow closing this entry, and no footer framing it — the
       action is .odo-button, which is what the house presses. */

/* #endregion */

/* The bookshop's opening photograph is not set here. The hero is the shared partial, which renders
   /img/library/product.webp as a real element the browser can see and prioritise, so a rule naming that
   same file as a background would be a second address for one picture. */

/* #region Responsive */
/* The catalog page loads library.css without luxury-book.css, so the .library-book collapse must live here. */
@media (max-width: 780px) {
    .library-page .research-thesis-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .library-page .library-book {
        grid-template-columns: minmax(0, 1fr);
    }

    .library-page .library-book-content {
        padding: 2.4rem 0 0;
    }

}
/* #endregion */