/* #region Tokens & typography */
.library-page .luxury-book {
    --book-cream: #e8e2d2;
    --book-line: var(--hairline-mid);
}

    .library-page .luxury-book > section:not(.hero-cinematic) {
        position: relative;
        padding-block: var(--section-space);
    }

    /* The book's own sections only. The concierge is the shared partial every product page draws, and these
       resets outweigh its rules (two classes against one), so on this page alone its heading lost the gap
       above the conversation and took this page's tracking. The :where keeps the weight these rules always
       had, so nothing the book's sections set for themselves changes. */
    .library-page .luxury-book h2:where(:not(.home-concierge *)),
    .library-page .luxury-book h3:where(:not(.home-concierge *)),
    .library-page .luxury-book p:where(:not(.home-concierge *)),
    .library-page .luxury-book blockquote:where(:not(.home-concierge *)) {
        margin-block: 0;
    }

    .library-page .luxury-book h2:where(:not(.home-concierge *)) {
        color: var(--white);
        font-family: var(--font-display);
        font-size: var(--section-title-size);
        font-weight: 300;
        letter-spacing: -.04em;
        line-height: var(--section-title-line-height);
    }

        .library-page .luxury-book h2 i,
        .library-page .luxury-book h3 i,
        .library-page .luxury-book blockquote i {
            color: var(--gold);
            font-weight: inherit;
        }
/* #endregion */

/* #region Hero */
/* No height of its own: this restated max(760px, 100svh), which is exactly what
   .hero-cinematic--exhibit already sets. A copy of a shared value is a drift waiting to happen. */

/* No lattice of its own. This page drew the house pattern at 54px and settled it at .42 opacity —
   against the shared 72px at .82 it read, next to any other hero, as a hero with no pattern at all.
   The shared rule in site.css handles it, like every other screen. */

/* No grid of its own. The home page and every product page open on minmax(0, 500px) 1fr with a
   clamp(4rem, 8vw, 9rem) gap; this page alone widened the copy to 540px, gave the right-hand column
   a 420px floor and opened the gap to 10rem — which is why its exhibit sat at a different size and
   in a different place from the same figure everywhere else. The shared rule handles it. */

/* No typography of its own. A tighter margin than the house's 4vh on the headline, and a lead set narrower
   (560px against 500px), smaller and a whole tone dimmer — --text-muted where every other hero's lead is
   --white-soft — leaves the one paragraph that has to sell a book reading weaker than the paragraph selling a
   cube. */

/* The figure keeps the house width — min(52vw, 760px) — which .hero-exhibit and the home page's
   .home-hero-square both set. Narrowed here to min(45vw, 700px) the same figure comes out visibly smaller on
   this page than on any other.
   What stays below is the cover's own treatment, which is this page's character rather than its
   geometry: the warm ground behind the book and the inset the jacket sits in. */
.library-page .luxury-book-hero .hero-exhibit-stage {
    overflow: visible;
    background: radial-gradient(circle at 50% 42%, var(--tint-raised), transparent 58%), var(--black-deep);
}

/* No treatment of its own on the picture either: the shared .hero-exhibit-image handles the inset, the
   grade and the shadow. An override here sits the cover at 2.5% where every other hero sits its exhibit at
   5%, and a gold hairline on the image's own edge is the ring the shop's entry refuses a screen earlier,
   for the same reason: the file is a gold key rendered on black, so a ring on its edge outlines a field of
   black on a black page and is the only part of it a reader can see.

   No .hero-exhibit-stage::before override here: --library switches the stage's outer hairline off with
   `content: none`, so a rule setting only inset and border-color colours a pseudo-element that is never
   generated. */

.library-page .luxury-book-cover-note {
    position: absolute;
    right: -5%;
    bottom: 7%;
    z-index: 4;
    display: grid;
    width: min(48%, 280px);
    padding: clamp(1.2rem, 2vw, 2rem);
    color: var(--white);
    font-family: var(--font);
    background: rgba(5, 5, 5, .9);
    border: 1px solid var(--book-line);
    backdrop-filter: blur(16px);
}

    /* A person, set as a person — the display face, which is what the house uses for names. The eyebrow
       treatment, uppercase and letterspaced, turns „dr hab. inż. Marcin Jamro" into DR HAB. INŻ. MARCIN
       JAMRO: a label rather than a name, with an academic degree shouted. */
    .library-page .luxury-book-cover-note strong {
        font-family: var(--font-display);
        font-size: clamp(1.15rem, 1.35vw, 1.4rem);
        font-weight: 400;
        line-height: 1.3;
    }

        /* The degree on its own line, above the name and smaller — a title page's arrangement. It is
           not a <br /> in the copy, which is what makes a string untranslatable: the <small> marks
           WHICH part is the qualifier, and each place that prints
           the author decides what to do with it. Here it becomes a line; in the bookshop's entry it
           stays inline. A language that puts the degree after the name writes it after the name, and
           this arrangement still holds — the qualifier simply lands under it instead of over it.
           Sized in em, so it follows the name whenever that is retuned. */
        .library-page .luxury-book-cover-note strong small {
            display: block;
            margin-bottom: .15rem;
            color: var(--text-muted);
            font-family: var(--font);
            font-size: .52em;
            font-weight: 300;
            letter-spacing: .04em;
        }

    /* .65rem is ten pixels — a size for a legal footnote, not for the line that says who wrote the
       book, and it sat directly under a name now set at a full rem. */
    .library-page .luxury-book-cover-note small {
        margin-top: .55rem;
        color: var(--text-muted);
        font-size: clamp(.78rem, .82vw, .85rem);
        font-weight: 300;
        line-height: 1.6;
    }

    /* The address and its arrow belong together, so the link is laid out inline rather than with
       space-between: on a 280px plate that would push „marcin.com" and the mark that says it opens
       elsewhere to the two ends and they would read as two unrelated things. */
    .library-page .luxury-book-cover-note a {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        margin-top: 1.4rem;
        padding-bottom: .35rem;
        color: var(--white);
        font-family: var(--font);
        font-size: clamp(.78rem, .85vw, .86rem);
        font-weight: 500;
        letter-spacing: .04em;
        text-decoration: none;
        border-bottom: 1px solid var(--hairline-strong);
        transition: color var(--motion-quick) var(--ease-house), border-color var(--motion-quick) var(--ease-house);
    }

        .library-page .luxury-book-cover-note a span,
        .library-page .luxury-book-author-bio a span {
            transition: transform var(--motion-quick) var(--ease-house);
        }

        /* The rule sits under the words, where a link's line belongs, and gold arrives on both under the
           hand. Above the link and only as wide as its text it is a dash floating over a line of ten-pixel
           type, which is what a card footer looks like when it has no card. */
        /* The bio's link is an .ep-cta and answers a pointer the way every other one does; only the
           plate on the cover keeps its own, because it is a caption and not a closing link. */
        .library-page .luxury-book-cover-note a:hover,
        .library-page .luxury-book-cover-note a:focus-visible {
            color: var(--gold);
            border-bottom-color: var(--gold);
        }

            .library-page .luxury-book-cover-note a:hover span,
            .library-page .luxury-book-author-bio a:hover span {
                transform: translate(3px, -3px);
            }

/* Every heading block on this page is a grid, which is what doubles the space under an eyebrow that keeps
   its margin. site.css says it in as many words at .h-tag: „One owner: the eyebrow carries the gap" — the
   distance to the title is its own margin-bottom, written once so nobody has to keep two numbers in step. A
   grid gap does not replace that margin, it adds to it, so an eyebrow here would stand at
   --section-tag-gap PLUS the container's gap. Inside these blocks the gap is the owner and the eyebrow
   gives its margin up. */
.library-page .luxury-book-section-head > .h-tag,
.library-page .luxury-book-heading-copy > .h-tag,
.library-page .luxury-book-author-heading > .h-tag,
.library-page .luxury-book-assurance > .h-tag {
    margin-bottom: 0;
}

/* The closing block is the same arrangement and reaches the same fault by a second route: it inherits
   filmable.css, where .filmable-closing h2 carries `margin: 1.5rem 0 2.5rem`. The house contract is that an
   h2 following an eyebrow has no top margin at all — the eyebrow owns that distance — so left alone this
   heading measures itself against a rule written for a section with no eyebrow above it. One grid, one gap,
   every margin inside it surrendered, exactly like the three heading blocks above. */
.library-page .luxury-book-assurance {
    display: grid;
    gap: 1.8rem;
}

    .library-page .luxury-book-assurance h2 {
        max-width: none;
        margin: 0;
    }

    .library-page .luxury-book-assurance ul {
        margin-top: 0;
    }

.library-page .luxury-book-section-head {
    display: grid;
    gap: 1.8rem;
}

.library-page .luxury-book-heading-copy {
    display: grid;
    max-width: 920px;
    gap: 1.8rem;
}

.library-page .luxury-book-section-head .h-tag {
    margin-bottom: 0;
}

.library-page .luxury-book-section-head h2 {
    max-width: 15ch;
}

.library-page .luxury-book-section-head > p,
.library-page .luxury-book-heading-copy > p {
    max-width: 52ch;
    color: var(--text-muted);
    font-family: var(--font);
    font-size: clamp(1rem, 1.12vw, 1.12rem);
    font-weight: 300;
    line-height: 1.8;
}

/* #endregion */

/* #region Tension & risk */
.library-page .luxury-book-tension {
    background: linear-gradient(150deg, var(--tint), transparent 44%), var(--surface-editorial);
}

    .library-page .luxury-book-tension .luxury-book-section-head {
        display: block;
    }

/* The stack, exactly as the home page piles its worlds: every card sticks at the same offset, so
   scrolling brings one to rest and slides the next over it. Three tall columns side by side asked
   the reader to read three stories at once — these are situations, and a situation wants the whole
   screen. Pure CSS: no script decides what is shown, and where sticky is unsupported the cards
   simply stand one under another, which is a perfectly good fallback. */
.library-page .luxury-book-risk-list {
    display: flex;
    flex-direction: column;
    gap: clamp(1.4rem, 3vh, 2.2rem);
    margin-top: clamp(4rem, 9vw, 9rem);
}

.library-page .luxury-book-risk {
    position: sticky;
    /* Each card rests a few pixels lower than the one before it, so the edges of those underneath
       stay visible — the pile reads as a pile rather than as one replaced panel. */
    top: calc(clamp(4.5rem, 12vh, 8rem) + var(--card-index, 0) * 10px);
    display: grid;
    grid-template-columns: minmax(0, .5fr) minmax(0, 1.5fr);
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: start;
    padding: clamp(1.8rem, 3vw, 3rem);
    overflow: hidden;
    /* Opaque on purpose: a translucent card would let the one beneath show through as it slides. */
    background: linear-gradient(150deg, var(--tint), transparent 45%), var(--black-soft);
    border: 1px solid var(--book-line);
    transition: border-color var(--motion) var(--ease-house);
}

    /* No lift on hover: a card that is resting against the top of the viewport must not move.  */
    .library-page .luxury-book-risk:hover {
        border-color: var(--gold-border);
    }

/* The card's own column now: the number and what kind of situation it is, standing beside the story
   rather than over it. The rule closes the column instead of underlining a row. */
/* The card's left column is a printed page's margin, and the rule down it is a margin rule. It used
   to be a stub: the card aligns its items to the start, so the border stopped two lines down while
   the story beside it ran on, and a line that ends in the middle of nothing reads as unfinished
   rather than as a division. Stretching the column is the whole fix — the rule now runs the height
   of the card and the folio sits at the top of its own margin. */
.library-page .luxury-book-risk-signature {
    align-self: stretch;
    display: grid;
    align-content: start;
    gap: .9rem;
    padding-right: clamp(1rem, 2vw, 2rem);
    border-right: 1px solid var(--book-line);
}

    /* A folio, so it is set like one — large enough to be the thing you see first. The column is a
       quarter of the card, which is room the number should use; at a text size it is merely a number
       standing in a column. */
    .library-page .luxury-book-risk-signature span {
        color: var(--white);
        font-family: var(--font-display);
        font-size: clamp(3.2rem, 5.5vw, 6.2rem);
        font-weight: 200;
        letter-spacing: -.02em;
        line-height: .9;
        transition: color var(--motion) var(--ease-house);
    }

    .library-page .luxury-book-risk:hover .luxury-book-risk-signature span {
        color: var(--gold);
    }

    /* No ellipsis and no width cap: the kind has a column of its own and can simply wrap. Nor is it
       small print — at .58rem it is nine pixels for the word that says what the story is. */
    .library-page .luxury-book-risk-signature small {
        color: var(--white-soft);
        font-family: var(--font);
        font-size: clamp(.68rem, .75vw, .76rem);
        font-weight: 500;
        letter-spacing: .18em;
        text-transform: uppercase;
    }

.library-page .luxury-book-risk-copy {
    position: relative;
    z-index: 1;
}

.library-page .luxury-book-risk h3 {
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 2.35vw, 2.8rem);
    font-weight: 300;
    letter-spacing: -.03em;
    line-height: 1.1;
}

.library-page .luxury-book-risk p {
    max-width: 42ch;
    margin-top: 1.5rem;
    color: var(--text-muted);
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.8;
}

/* The word behind each risk — PRESJA, POZORY, WYGODA — set large in Playfair, laid across the foot of
   the card and cropped by its edge the way an oversized word is cropped by the page it is printed on.
   It sits under the copy (which holds z-index 1) at an opacity where it reads as paper rather than as
   text. Sized and offset in em, so the crop stays proportional at every width.

   The positioning is the whole rule: without it the word falls into the card's grid as a third item,
   lands in the narrow left column under the number and is clipped away by the card's own overflow —
   the one dramatic element of the section rendered as a sliver, leaving three bordered boxes and a
   gradient. */
.library-page .luxury-book-risk-word {
    position: absolute;
    right: clamp(1rem, 2vw, 2.4rem);
    bottom: -.18em;
    z-index: 0;
    color: var(--tint);
    font-family: var(--font-display);
    font-size: clamp(4rem, 9.5vw, 10rem);
    font-weight: 300;
    letter-spacing: .04em;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

/* #endregion */

/* #region Statement */
.library-page .luxury-book-statement {
    overflow: hidden;
    text-align: center;
    background: var(--black);
}

    .library-page .luxury-book-statement .container {
        display: grid;
        justify-items: center;
    }

/* „ is a low-9 glyph: its ink sits down at the baseline, in the bottom quarter of the em box. So the
   top three quarters of this element are empty by construction, and at 12rem that is several
   centimetres of nothing standing between the section's own padding and the thesis. A tight
   line-height cannot remove it: under about .9 the baseline falls below the box itself and the mark
   is drawn onto the first line of the thesis. So the line box holds the whole glyph, a negative top margin
   takes away the empty top, and a small bottom margin keeps the ink off the sentence — all in em, so
   it stays in proportion at every size the clamp gives. */
.library-page .luxury-book-statement-mark {
    margin-top: -.8em;
    margin-bottom: .15em;
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(6rem, 11vw, 12rem);
    font-weight: 200;
    line-height: 1.15;
    opacity: .3;
}

/* A shade smaller. At 6.5rem the thesis filled the screen edge to edge and read as a poster; the
   sentence is worth more when it can be taken in at once. */
.library-page .luxury-book-statement blockquote {
    max-width: 20ch;
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.6vw, 5.2rem);
    font-weight: 200;
    letter-spacing: -.045em;
    line-height: 1.05;
}

.library-page .luxury-book-statement p {
    max-width: 62ch;
    margin-top: clamp(2.5rem, 5vw, 4.5rem);
    padding-top: 2rem;
    color: var(--text-muted);
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.8;
    border-top: 1px solid var(--book-line);
}

/* #endregion */

/* #region Closing assurances */
/* Facts beside the buy box, each one a doubt removed. A tick in front of every line, because
   what they answer is „is this included?" — and the answer is drawn once and reused, rather than a
   glyph typed into the copy where a translator would have to carry it. */
.library-page .luxury-book-assurance ul {
    display: grid;
    gap: clamp(1.1rem, 2vw, 1.6rem);
    margin: clamp(2.2rem, 4vw, 3.2rem) 0 0;
    padding: 0;
    list-style: none;
}

    .library-page .luxury-book-assurance li {
        display: grid;
        grid-template-columns: 1.4rem minmax(0, 1fr);
        gap: .2rem 1rem;
    }

        .library-page .luxury-book-assurance li::before {
            grid-row: span 2;
            width: 1.4rem;
            height: 1.4rem;
            margin-top: .1rem;
            content: "";
            background: var(--white-soft);
            /* A tick, drawn rather than typed. */
            -webkit-mask: no-repeat center / 74% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.6l5.2 5.2L20 7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            mask: no-repeat center / 74% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.6l5.2 5.2L20 7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        }

        /* Set like every other list title on the page (.luxury-book-benefits strong): one title in
           another face reads as a font that failed to load. */
        .library-page .luxury-book-assurance strong {
            color: var(--white);
            font-family: var(--font-display);
            font-size: clamp(1.15rem, 1.4vw, 1.35rem);
            font-weight: 300;
            line-height: 1.2;
        }

        .library-page .luxury-book-assurance li > span {
            color: var(--text-muted);
            font-family: var(--font);
            font-size: clamp(.92rem, .98vw, 1rem);
            font-weight: 300;
            line-height: 1.65;
        }
/* #endregion */

/* #region Preview & story steps */
.library-page .luxury-book-preview {
    background: var(--surface-editorial);
}

/* The same pile as the risks above. As a column of separate panels, one of them flipping its two halves on
   every second card, three long stories read as three unrelated layouts and the section the reader has just
   taken as a pile starts again as a list. */
.library-page .luxury-book-story-list {
    display: flex;
    flex-direction: column;
    gap: clamp(1.4rem, 3vh, 2.2rem);
    margin-top: clamp(4rem, 9vw, 9rem);
}

.library-page .luxury-book-story {
    position: sticky;
    top: calc(clamp(4.5rem, 12vh, 8rem) + var(--card-index, 0) * 10px);
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
    gap: clamp(3rem, 7vw, 9rem);
    padding: clamp(2rem, 5vw, 5.5rem);
    overflow: hidden;
    /* Opaque, like the risk cards: the story underneath must not show through the one on top. */
    background: linear-gradient(130deg, var(--tint), transparent 50%), var(--black);
    border: 1px solid var(--book-line);
    transition: border-color var(--motion) var(--ease-house);
}

    .library-page .luxury-book-story:hover {
        border-color: var(--gold-border);
    }

    .library-page .luxury-book-story header {
        display: grid;
        align-content: start;
        gap: clamp(2rem, 5vw, 5rem);
    }

    .library-page .luxury-book-story h3 {
        max-width: 11ch;
        color: var(--white);
        font-family: var(--font-display);
        font-size: clamp(2.3rem, 4.5vw, 5.2rem);
        font-weight: 300;
        letter-spacing: -.045em;
        line-height: .98;
    }

.library-page .luxury-book-story-copy {
    position: relative;
    display: grid;
    align-content: start;
}

/* Decision, consequence, rule are one chain, and the section never showed it: three rows with a
   hairline under each read as a list of three unrelated notes, and the whole point of a story here
   is that the second follows from the first and the third follows from both.

   The marker is a ring on a line running down the column, filled at the rule, which is where the story
   arrives. It has to actually exist in the markup: a rule for a `> span` with no span behind it, plus a
   narrow-screen rule opening a 28px first column for it, squeezes every step's text into those 28 pixels on
   a phone. */
.library-page .luxury-book-story-step {
    position: relative;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: clamp(1rem, 1.6vw, 1.6rem);
    padding: 1.6rem 1.4rem 1.6rem 0;
    border-bottom: 1px solid var(--line);
}

    /* Open at both ends. The hairlines between the steps divide one beat from the next, which is
       work; a line above the first and below the last only drew a box round something that already
       sits inside one — the card's own border is two centimetres away on either side. */
    .library-page .luxury-book-story-step:last-child {
        border-bottom: 0;
    }

    /* The line itself, behind the rings and through the whole step, so the chain is continuous
       across the hairlines that divide the rows. It starts at the first ring and stops at the last
       rather than running out into the padding at either end. */
    .library-page .luxury-book-story-step::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 13px;
        width: 1px;
        background: var(--book-line);
    }

    .library-page .luxury-book-story-step:first-child::before {
        top: 2.2rem;
    }

    .library-page .luxury-book-story-step:last-child::before {
        bottom: auto;
        height: 2.2rem;
    }

    /* The ring, punched out of the line — an opaque centre, so the chain passes behind it and not
       through it. */
    .library-page .luxury-book-story-step > span {
        position: relative;
        z-index: 1;
        align-self: start;
        justify-self: center;
        width: 9px;
        height: 9px;
        /* Level with the label beside it: the step's own top padding is 1.6rem, so this puts the
           ring's centre at 2.2rem — which is where the line above starts and stops. */
        margin-top: .3rem;
        background: var(--black);
        border: 1px solid var(--gold);
        border-radius: 50%;
    }

    .library-page .luxury-book-story-step > div {
        display: grid;
        gap: .4rem;
    }

    /* .58rem is nine pixels — small print, and what this labels is the three beats the whole section is
       built on. */
    .library-page .luxury-book-story-step strong {
        color: var(--text-muted);
        font-family: var(--font);
        font-size: clamp(.68rem, .74vw, .74rem);
        font-weight: 500;
        letter-spacing: .16em;
        text-transform: uppercase;
    }

    /* The three beats are not three rows. A story here goes: an ordinary decision, the moment it
       turns, and the rule that would have stopped it — and the section was setting all three at one
       size, one weight and one colour, so the turn read like the caption of a form field. The arc is
       written in type instead of in ornament: quiet, then loud, then firm. This is the quiet one.
       All three stay in the interface face — the arc is size, weight and colour alone, because a
       change of face inside one list reads as three different fonts. */
    .library-page .luxury-book-story-step p {
        margin: 0;
        color: var(--text-muted);
        font-family: var(--font);
        font-size: clamp(1rem, 1.05vw, 1.08rem);
        font-weight: 300;
        line-height: 1.75;
    }

/* Loud. This is where the reader is meant to stop, so it is the largest line in the card, in full
   white, large enough to be read before the eye chooses to. */
.library-page .luxury-book-story-copy .luxury-book-turn p {
    color: var(--white);
    font-size: clamp(1.15rem, 1.45vw, 1.45rem);
    font-weight: 400;
    line-height: 1.5;
}

    .library-page .luxury-book-story-copy .luxury-book-turn strong {
        color: var(--white-soft);
    }

/* The chain arrives here, so the ring is filled rather than open — the one closed link in it. */
.library-page .luxury-book-story-copy .luxury-book-rule > span {
    background: var(--gold);
}

.library-page .luxury-book-story-copy .luxury-book-rule strong {
    color: var(--white-soft);
}

/* Firm. After the turn the story does not get louder, it gets certain — so the rule comes back to the
   size of ordinary speech, set heavier in full white, and its
   filled ring carries the gold. A maxim is short and said once; making it bigger than the turn would
   have been a second climax. */
.library-page .luxury-book-story-copy .luxury-book-rule p {
    color: var(--white);
    font-size: clamp(1.02rem, 1.1vw, 1.12rem);
    font-weight: 500;
    letter-spacing: .005em;
    line-height: 1.6;
}

/* #endregion */

/* #region Outcomes & benefits */
.library-page .luxury-book-outcomes {
    background: linear-gradient(135deg, var(--tint), transparent 45%), var(--black);
}

.library-page .luxury-book-outcomes-grid {
    display: grid;
    grid-template-columns: minmax(300px, .72fr) minmax(440px, 1.28fr);
    align-items: start;
    gap: clamp(4rem, 10vw, 12rem);
}

/* The hairlines between the four cells are the grid; the frame around the outside is not. Closed on
   all four sides it read as a table dropped into the section — the cells divide themselves. */
.library-page .luxury-book-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--book-line);
}

    /* The number beside the sentence, both starting at the top. In a 260px cell with the count pinned
       to its ceiling and the words to its floor, four short benefits read as four mostly-empty boxes and
       the hole in the middle is the loudest thing in the section. */
    /* One column: the numeral left the flow when it became a watermark, so a column held open for it
       would only squeeze the sentence into the other one. The tile clips, because the numeral is
       drawn larger than it is. */
    .library-page .luxury-book-benefits li {
        position: relative;
        overflow: hidden;
        display: grid;
        align-content: start;
        padding: clamp(1.5rem, 3vw, 2.4rem);
        background: var(--black-deep);
    }

        /* No corner bracket, and so no extra bottom padding to reserve room for one. Two gold hairlines in
           the bottom right of every cell, four times over, mark nothing and point at nothing — the cells
           are already divided by the grid's own hairlines, which is the one line in this section that
           does work. */

        .library-page .luxury-book-benefits li > div {
            display: grid;
            align-content: start;
            gap: .5rem;
        }

    /* The numeral as a watermark, which is the house's own device for a numbered tile — it is drawn
       once in segment.css for the scenario tiles and this is the same thing, so the two read as one
       language. Set far larger than the tile, pushed past its bottom-right corner and cropped by the
       edge, as a faint white tint that warms to gold under the hand: a texture behind the words rather than a figure competing
       with them, the way a magazine sets a folio.

       Set inline instead, these are nine pixels of gold held in a 42px column — a lot of structure open
       for almost nothing — while the audience tiles below carry a 340px floor, so the emptiness the
       watermark fills is already there. Out of the flow, so it costs neither tile any height. */
    .library-page .luxury-book-benefits li > span,
    .library-page .luxury-book-audience-list article > span {
        position: absolute;
        right: -.04em;
        bottom: -.1em;
        z-index: 0;
        color: var(--tint);
        font-family: var(--font-display);
        font-size: clamp(6rem, 9vw, 9.5rem);
        font-weight: 400;
        letter-spacing: -.04em;
        line-height: .8;
        pointer-events: none;
        user-select: none;
        transition: color var(--motion) var(--ease-house);
    }

    /* Everything the reader reads stands above it. */
    .library-page .luxury-book-benefits li > :not(span),
    .library-page .luxury-book-audience-list article > :not(span) {
        position: relative;
        z-index: 1;
    }

    .library-page .luxury-book-benefits li:hover > span,
    .library-page .luxury-book-audience-list article:hover > span {
        color: rgba(var(--gold-rgb), .085);
    }

    /* One font-family, not two: a second declaration on the next line makes the first dead on arrival. */
    .library-page .luxury-book-benefits strong {
        color: var(--white);
        font-family: var(--font-display);
        font-size: clamp(1.35rem, 2vw, 2.1rem);
        font-weight: 300;
        line-height: 1.15;
    }

    .library-page .luxury-book-benefits p {
        margin-top: 1rem;
        color: var(--text-muted);
        font-family: var(--font);
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.7;
    }

/* #endregion */

/* #region Audience */
.library-page .luxury-book-audience {
    background: var(--surface-editorial);
}

/* Opened at the foot: the rule under the three columns fell just above the section's own end and
   read as a second, shorter version of it. */
.library-page .luxury-book-audience-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: clamp(4rem, 8vw, 8rem);
    border-top: 1px solid var(--book-line);
}

    .library-page .luxury-book-audience-list article {
        position: relative;
        overflow: hidden;
        min-height: 340px;
        padding: clamp(2rem, 4vw, 4rem);
    }

        .library-page .luxury-book-audience-list article + article {
            border-left: 1px solid var(--book-line);
        }

    /* A modest top margin, not the clamp(4rem, 8vw, 8rem) that holds a place for a numeral standing in the
       flow above this heading. The numeral is a watermark and takes no room, so that whole gap is left
       over. */
    .library-page .luxury-book-audience-list h3 {
        margin-top: clamp(1rem, 2vw, 1.8rem);
        color: var(--white);
        font-family: var(--font-display);
        font-size: clamp(1.7rem, 2.4vw, 2.8rem);
        font-weight: 300;
        letter-spacing: -.035em;
        line-height: 1.05;
    }

    .library-page .luxury-book-audience-list p {
        margin-top: 1.4rem;
        color: var(--text-muted);
        font-family: var(--font);
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.75;
    }

/* #endregion */

/* #region Author */
.library-page .luxury-book-author {
    background: var(--black);
}

.library-page .luxury-book-author-grid {
    display: grid;
    grid-template-columns: minmax(220px, .42fr) minmax(280px, .68fr) minmax(320px, .9fr);
    align-items: end;
    gap: clamp(3rem, 8vw, 10rem);
}

/* An author's portrait on the flap of a jacket, which is what this is. Square, because the house's
   imagery is square; ivory, because of what the file actually contains.

   The picture is a cut-out lifted from a light studio background, and the man in it wears a black suit. Both
   facts point the same way: on a near-black ground the suit dissolves into the page and leaves a head floating
   over a wedge of white shirt, while every ragged light pixel left along the hair and the shoulders by the
   cut-out lights up against the dark. On cream the suit is a suit again and the fringe disappears into the
   ground it was cut from. The square also crops away the hands, which is where an automatic cut-out is always
   at its worst. */
/* The figure steps out of its own frame, and that is the whole idea — it is the one thing a cut-out can do
   that a photograph cannot, so the alpha channel is the material here rather than a defect to hide.

   The plate is a square, bottom-aligned. The file is 922×1046, so at the plate's width the picture
   is about an eighth taller than the plate is — and because it stands on the plate's floor, that
   eighth is the head, which rises above the top edge and onto the page. Nothing is cropped and
   nothing is contrived: the proportions of the file do it. No overflow clipping, for the same
   reason. */
.library-page .luxury-book-author-portrait {
    position: relative;
    /* 300px, not the 380 a plain photograph in a column would take. The source is a tight head-and-
       shoulders crop, so at that width the head alone is 150px and dominates the section — and standing
       proud of the plate it draws the eye straight to it. Everything else here is proportional, so the
       break-out keeps its ratio at either scale. */
    width: min(100%, 300px);
    margin: 0;
}

    /* What he stands in: a lit backdrop with a hairline edge, and he crosses it. */
    .library-page .luxury-book-author-portrait::before {
        content: "";
        position: absolute;
        inset: auto 0 0 0;
        z-index: 0;
        aspect-ratio: 1;
        background: radial-gradient(76% 60% at 50% 32%, #3b342b, transparent 74%),
                    linear-gradient(180deg, #22201b, #141310);
        border: 1px solid var(--book-line);
        transition: border-color var(--motion) var(--ease-house);
    }

    .library-page .luxury-book-author-grid:hover .luxury-book-author-portrait::before {
        border-color: var(--gold-border);
    }

    /* The file is a cut-out — a real alpha channel, the figure lifted off its original background — so it is
       never shown as if it were an ordinary photograph. On a near-black page that means a
       man floating in nothing, with the ragged edge of the cut-out on show, a hard hairline ruled
       across the bottom of his arms, and grayscale(.3) draining a face that is the one thing in this
       section a reader wants to look at.

       So: a ground for him to stand in, lit from where the light in the photograph comes from; the
       plate and the figure dissolving together at the foot instead of being cut and underlined; and
       the house grade alone, which keeps the portrait in the palette without taking its colour. */
    /* Its own proportions, kept — no square crop and no ground of its own. The picture is the figure
       and nothing else; the plate behind it is a separate element, which is what lets him overlap it.
       The foot dissolves so the file's own bottom edge, where the hands are and where an automatic
       cut-out is always at its worst, is never a cut. */
    .library-page .luxury-book-author-portrait img {
        position: relative;
        z-index: 1;
        display: block;
        width: 100%;
        height: auto;
        -webkit-mask-image: linear-gradient(180deg, #050505 86%, transparent 100%);
        mask-image: linear-gradient(180deg, #050505 86%, transparent 100%);
        filter: var(--photo-grade);
        transform-origin: 50% 100%;
        transition: filter var(--motion-slow) var(--ease-house), transform 1.8s var(--ease-house);
    }

/* He rises a little further out of the frame under the pointer — grown from the plate's floor, so the
   movement is the break-out itself rather than a lift. */
.library-page .luxury-book-author-grid:hover .luxury-book-author-portrait img {
    filter: var(--photo-lifted);
    transform: scale(1.02);
}

.library-page .luxury-book-author-heading h2 {
    display: grid;
    gap: .35rem;
}

.library-page .luxury-book-author-degree {
    color: var(--white);
    font-family: var(--font-display);
    font-size: .35em;
    font-weight: 300;
    letter-spacing: -.01em;
    line-height: 1.2;
}

.library-page .luxury-book-author-portrait small {
    color: var(--text-muted);
    font-family: var(--font);
    font-size: .56rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* The eyebrow sits closer than a section's does. 1.8rem is the distance between „Autor" and a display
   headline; what follows it here is the degree, set at .35em — a small line, so the same measured gap
   read as a hole. */
/* „Autor", the degree and the name are one stack of three lines, each larger than the last — not an
   eyebrow standing over a heading. So the distance between the first and the second is the same as
   between the second and the third (the h2's own .35rem), and the three read as one block. Anything
   wider split the stack in two and left the eyebrow floating above it. */
/* The house distance, and nothing invented. --section-tag-gap is what carries every other eyebrow in
   the site to its title, and this block now stands at exactly that — no tightened leading, no hand-
   picked rem, so the space here is the same one a reader has already seen on every screen before it.

   The number is not where this goes wrong. This container is a grid, so the eyebrow's own margin-bottom
   (--section-tag-gap, zeroed above) does not collapse into the container's gap the way it does in ordinary
   flow — it adds to it, and the eyebrow then stands at twice the house measure. Tuning this value instead
   chases a total that has two parts. */
.library-page .luxury-book-author-heading {
    display: grid;
    gap: var(--section-tag-gap);
}

.library-page .luxury-book-author-bio {
    padding-left: clamp(1.5rem, 3vw, 3rem);
    border-left: 1px solid var(--book-line);
}

    .library-page .luxury-book-author-bio p {
        color: var(--text-muted);
        font-family: var(--font);
        font-size: clamp(1rem, 1.12vw, 1.12rem);
        font-weight: 300;
        line-height: 1.85;
    }

        .library-page .luxury-book-author-bio p + p {
            margin-top: 1rem;
        }

    /* Spacing only. The size, the colour, the tracking and the rule underneath all come from .ep-cta —
       restated here, this link ends up a size and a tone apart from every other closing link. */
    .library-page .luxury-book-author-bio a {
        margin-top: 1.8rem;
    }

/* #endregion */

/* #region Closing & offer */
.library-page .luxury-book-closing {
    background: radial-gradient(circle at 76% 50%, var(--tint), transparent 32%), var(--black-deep);
}

.library-page .luxury-book-closing-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr);
    align-items: center;
    gap: clamp(4rem, 10vw, 13rem);
}

    .library-page .luxury-book-closing-grid > div:first-child {
        display: grid;
        gap: 1.8rem;
    }

.library-page .luxury-book-closing h2 {
    max-width: 13ch;
}

.library-page .luxury-book-offer {
    position: relative;
    display: grid;
    padding: clamp(2rem, 3.5vw, 3.5rem);
    border: 1px solid var(--book-line);
    overflow: hidden;
    background: linear-gradient(145deg, var(--tint), transparent 44%), rgba(5, 5, 5, .88);
    box-shadow: 0 2rem 6rem rgba(5, 5, 5, .32);
}

    .library-page .luxury-book-offer::after {
        position: absolute;
        top: -46px;
        right: -46px;
        width: 110px;
        aspect-ratio: 1;
        content: "";
        border: 1px solid var(--hairline-mid);
        transform: rotate(45deg);
    }

.library-page .luxury-book-offer-label {
    color: var(--text-muted);
    font-family: var(--font);
    font-size: .6rem;
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase;
}

    /* What is being bought, picked out of what is being promised about it. The two halves of this
       line answer different questions — „what is it" and „when do I have it" — and only the first
       needs to be read at a glance. */
    .library-page .luxury-book-offer-label b {
        color: var(--white);
        font-weight: 500;
    }

.library-page .luxury-book-offer-price {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    margin: 1.5rem 0 2rem;
}

    .library-page .luxury-book-offer-price > strong {
        color: var(--white);
        font-family: var(--font-display);
        font-size: clamp(2.5rem, 4vw, 4.4rem);
        font-weight: 200;
        letter-spacing: -.04em;
        line-height: .85;
    }

    .library-page .luxury-book-offer-price > span {
        color: var(--text-muted);
        font-family: var(--font);
        font-size: .6rem;
        letter-spacing: .12em;
        line-height: 1.2;
        text-transform: uppercase;
    }

/* The price is a statement and the picker is a control — two different kinds of thing, so they do not sit
   a paragraph's 2rem apart. The box is a grid with no gap, so this margin adds to the price's rather than
   collapsing into it. */
.library-page .luxury-book-offer-language {
    margin-top: clamp(1.2rem, 2.2vw, 1.8rem);
    margin-bottom: .6rem;
    color: var(--text-muted);
    font-family: var(--font);
    font-size: .6rem;
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.library-page .luxury-book-offer-language-select {
    width: 100%;
    margin-bottom: 1.4rem;
    padding: .8rem 1rem;
    border: 1px solid var(--book-line);
    color: var(--white);
    background: rgba(5, 5, 5, .88);
    font-family: var(--font);
    font-size: .8rem;
}

/* The offer card cuts its fields smaller and darker than the rest of the site, so the dropdown the
   site draws over this <select> (see the Global select region in site.css) is cut with them. The
   space below the field belongs to the wrapper, because the select itself is out of the flow. */
.library-page .luxury-book-offer .odo-picker {
    margin-bottom: 1.4rem;
}

.library-page .luxury-book-offer .odo-picker-toggle {
    min-height: 0;
    padding: .8rem 1rem;
    border-color: var(--book-line);
    background: rgba(5, 5, 5, .88);
    font-size: .8rem;
}

.library-page .luxury-book-offer .odo-button {
    justify-content: center;
    width: 100%;
}

.library-page .luxury-book-offer p {
    margin-top: 1.4rem;
    color: var(--text-muted);
    font-family: var(--font);
    font-size: .72rem;
    font-weight: 300;
    line-height: 1.7;
    text-align: center;
}

/* #endregion */

/* #region Responsive */
/* The hero has no breakpoint of its own: the house's stacking, and its own figure width when stacked,
   handle it. At 1100px the house stacks every hero — copy above, exhibit below — so a rule cancelling that
   to hold two columns down to 900px with a 360px floor under the picture opens the page about a book in a
   layout no other page in the house uses, with the copy squeezed into what is left. */

@media (min-width: 901px) and (max-width: 1139px) {
    .library-page .luxury-book-outcomes-grid {
        grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
        gap: clamp(2.5rem, 6vw, 4.5rem);
    }

    .library-page .luxury-book-author-grid {
        grid-template-columns: minmax(180px, .42fr) minmax(0, .68fr) minmax(0, .9fr);
        gap: clamp(2rem, 4.5vw, 3.5rem);
    }
}

@media (max-width: 900px) {
    .library-page .luxury-book-outcomes-grid,
    .library-page .luxury-book-author-grid,
    .library-page .luxury-book-closing-grid,
    .library-page .luxury-book-story {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The heading column's 280px floor left the story's steps a column of some 120–160px. */
    .library-page .luxury-book-story {
        gap: 2.5rem;
    }

    /* Centred, the thesis stood as a poster between sections that all read from the left edge, and its
       paragraph broke into a ragged column on both sides. On a narrow screen it keeps that edge too. */
    .library-page .luxury-book-statement {
        text-align: left;
    }

        .library-page .luxury-book-statement .container {
            justify-items: start;
        }

    /* Neither the stacked hero's gap and padding nor its figure width are set here: the house gives both —
       7vh and 17vh/15vh at 1100, min(100%, 620px) justified right — and restating them on this page puts
       the two a few pixels apart. */

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

    .library-page .luxury-book-audience-list {
        grid-template-columns: 1fr;
    }

        .library-page .luxury-book-audience-list article {
            min-height: 0;
        }

            .library-page .luxury-book-audience-list article + article {
                border-top: 1px solid var(--book-line);
                border-left: 0;
            }

        /* Nothing to clear on a narrow screen either — the base margin reads as spacing rather than as
           room reserved for a numeral, which is out of the flow. */


    .library-page .luxury-book-author-portrait {
        width: min(42vw, 220px);
    }

    .library-page .luxury-book-author-bio {
        padding-top: 2rem;
        padding-left: 0;
        border-top: 1px solid var(--book-line);
        border-left: 0;
    }

    /* Below 16px iOS Safari zooms the page on focus and never zooms back out. The drawn dropdown
       standing in front of the field is set to the same size, so the card reads as one control. */
    .library-page .luxury-book-offer-language-select,
    .library-page .luxury-book-offer .odo-picker-toggle {
        font-size: 1rem;
    }
}

@media (max-width: 640px) {
    .library-page .library-book {
        grid-template-columns: minmax(0, 1fr);
    }

    .library-page .library-book-content {
        padding: 2.2rem 1.5rem 2.6rem;
    }

    .library-page .library-book-footer {
        flex-wrap: wrap;
        row-gap: 1.2rem;
    }

    .library-page .luxury-book > section:not(.hero-cinematic) {
        padding-block: clamp(5rem, 16vw, 7rem);
    }

    /* The single column, the content width and the top padding all come from the house at this size.
       What stays below is this hero's own furniture: a buy button and the note beside it. */

    .library-page .luxury-book-hero .hero-cta-row {
        align-items: stretch;
        flex-direction: column;
    }

    .library-page .luxury-book-hero .odo-button {
        justify-content: center;
        width: 100%;
    }

    .library-page .luxury-book-hero .hero-cta-note {
        line-height: 1.6;
    }

    .library-page .luxury-book-cover-note {
        right: 0;
        bottom: 2%;
        width: 56%;
        padding: 1.1rem;
    }

    /* On a phone the role runs to four lines and the plate covers most of the cover; the name and the
       link stay, and the author section further down says who he is. */
    @media (max-width: 480px) {
        .library-page .luxury-book-cover-note > small {
            display: none;
        }

        .library-page .luxury-book-cover-note a {
            margin-top: .8rem;
        }
    }

    .library-page .luxury-book-tension .luxury-book-section-head,
    .library-page .luxury-book-story,
    .library-page .luxury-book-risk {
        grid-template-columns: minmax(0, 1fr);
    }

        .library-page .luxury-book-tension .luxury-book-section-head > p,
        .library-page .luxury-book-risk p {
            grid-column: auto;
        }

    .library-page .luxury-book-risk {
        gap: 1.2rem;
    }

    .library-page .luxury-book-story {
        gap: 2.5rem;
        padding: 1.5rem 1.25rem;
    }

        .library-page .luxury-book-story header {
            gap: 1.8rem;
        }

    /* The step's own columns are the same at every width — the marker column exists in the base rule
       and has a marker in it. Opening that column on a narrow screen alone lays the whole of a step's
       text into 28 pixels. */


    /* Nothing to reflow: the tile is one column at every width now. */


    .library-page .luxury-book-author-portrait {
        width: min(65vw, 260px);
    }

    /* Still the card's own word, still cropped by its edge — only the scale changes with the screen. */
    .library-page .luxury-book-risk-word {
        font-size: clamp(2.6rem, 15vw, 5rem);
    }

    /* The signature is a full-width row once the card is a single column, and a rule down its right
       edge then closes nothing — it becomes a stray vertical line beside a heading. It closes the
       row underneath instead. */
    .library-page .luxury-book-risk-signature {
        padding-right: 0;
        padding-bottom: 1rem;
        border-right: 0;
        border-bottom: 1px solid var(--book-line);
    }

    .library-page .luxury-book-offer {
        padding: 1.5rem;
    }
}

/* The stacked cards only work while a card fits the screen under its sticky offset; a taller one is
   covered by the next before its lower lines are ever shown. The page's script measures that and marks
   a list that does not fit; a phone, and a phone held sideways, are settled here without waiting for
   it. Unstacked, the cards simply follow one another. Relative, not static: the risk card's large word
   is positioned inside it. */
@media (max-width: 640px), (max-height: 500px) {
    .library-page .luxury-book-risk,
    .library-page .luxury-book-story {
        position: relative;
        top: auto;
    }
}

.library-page .is-unstacked .luxury-book-risk,
.library-page .is-unstacked .luxury-book-story {
    position: relative;
    top: auto;
}

@media (prefers-reduced-motion: reduce) {
    .library-page .luxury-book-hero .hero-exhibit-stage::after {
        animation: none;
    }

    .library-page .luxury-book-risk,
    .library-page .luxury-book-story,
    .library-page .luxury-book-author-portrait img,
    .library-page .luxury-book-cover-note a,
    .library-page .luxury-book-author-bio a,
    .library-page .luxury-book-cover-note a span,
    .library-page .luxury-book-author-bio a span,
    .library-page .luxury-book-benefits li > span,
    .library-page .luxury-book-audience-list article > span {
        transition: none;
    }
}
/* #endregion */