/* ───────────────────────────────────────────────────────────────────────────
   Books — the shelf, the title page, and the cover-opening transition.

   Loaded only on /books, never site-wide: it is ~6 KB and no video page has
   any use for it.

   The shop this is adapted from is warm paper on cream. That look cannot come
   along — dropped into 6Tube it reads as a different website in an iframe. So
   the palette is the site's own Deep Zinc and the site's red, and what carries
   over is the physical treatment: a book is a book because of the shadow it
   casts, the darker gutter where the spine folds, and the sliver of page block
   at the fore edge. Those three survive any palette.
   ─────────────────────────────────────────────────────────────────────────── */

.books-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--spacing-md) 40px;
}

/* ── intro ─────────────────────────────────────────────────────────────── */

.books-intro {
    padding: 28px 0 20px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 22px;
}

.books-intro h1 {
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.books-intro p {
    color: var(--color-text-secondary);
    max-width: 62ch;
    line-height: 1.6;
}

/* ── category chips ────────────────────────────────────────────────────── */

.books-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 26px;
}

.book-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.book-chip span {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-muted);
}

.book-chip:hover {
    border-color: var(--color-primary);
    color: var(--color-text-primary);
}

.book-chip.is-on {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.book-chip.is-on span {
    color: rgba(255, 255, 255, 0.75);
}

/* ── the book object ───────────────────────────────────────────────────── */

.book {
    position: relative;
    aspect-ratio: 2 / 3;
    background: var(--color-bg-tertiary);
    border-radius: 1px 3px 3px 1px;
    /* Contact shadow plus cast shadow. On a near-black ground a soft grey
       shadow does nothing, so both are pure black and the lift comes from the
       fore-edge highlight instead. */
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.6),
        0 12px 24px -12px rgba(0, 0, 0, 0.9);
    transition: transform 320ms cubic-bezier(.22, .8, .3, 1),
                box-shadow 320ms cubic-bezier(.22, .8, .3, 1);
}

.book__art {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
}

.book__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Spine gutter left, page block right. Drawn over the artwork so a photographic
   cover gets the same physical read as a plain one. */
.book::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.45) 0,
            rgba(0, 0, 0, 0.18) 1.5%,
            rgba(0, 0, 0, 0) 4.5%),
        linear-gradient(90deg,
            rgba(255, 255, 255, 0) 96%,
            rgba(255, 255, 255, 0.14) 99%,
            rgba(255, 255, 255, 0.26) 100%);
    z-index: 2;
}

/* Hairline edge. Inset rather than a border so it never adds layout size. */
.book::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
    pointer-events: none;
    z-index: 3;
}

@media (hover: hover) and (pointer: fine) {
    .group:hover .book {
        transform: translateY(-5px);
        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.6),
            0 24px 38px -14px rgba(0, 0, 0, 0.95);
    }

    .group:hover .books-shelf__title {
        color: var(--color-primary);
    }
}

/* ── the shelf ─────────────────────────────────────────────────────────── */

.books-shelf {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 26px 20px;
}

.books-shelf__item {
    display: block;
    /* The cover is what is clicked; give the whole tile the pointer. */
    cursor: pointer;
}

.books-shelf__line {
    margin-top: 11px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.books-shelf__title {
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-primary);
    transition: color 160ms ease;
    /* Two lines, then ellipsis: a runaway title must not shove the row below
       it out of alignment. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.books-shelf__author {
    font-size: 0.74rem;
    color: var(--color-text-muted);
}

.books-shelf__price {
    margin-top: 3px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-primary);
}

.books-note {
    margin-top: 34px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.78rem;
    line-height: 1.6;
    max-width: 70ch;
}

/* ── one title ─────────────────────────────────────────────────────────── */

.books-crumb {
    padding: 20px 0 14px;
}

.books-crumb a {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
}

.books-crumb a:hover {
    color: var(--color-primary);
}

.book-detail {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.book-detail__cover {
    position: sticky;
    top: calc(var(--header-height) + 16px);
}

.book-detail__title {
    font-size: clamp(1.6rem, 3.6vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.book-detail__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 22px;
}

.book-detail__blurb p {
    color: var(--color-text-secondary);
    line-height: 1.75;
    margin-bottom: 14px;
    max-width: 68ch;
}

.book-detail__blurb p:first-child {
    color: var(--color-text-primary);
    font-size: 1.06rem;
}

.book-detail__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 30px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
}

.book-tag {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 3px 8px;
}

/* ── buy ───────────────────────────────────────────────────────────────── */

.book-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 20px;
    border-radius: 8px;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1;
    box-shadow: 0 6px 18px -8px rgba(239, 68, 68, 0.9);
    transition: background 160ms ease, transform 160ms ease;
}

.book-buy:hover {
    background: #f05a5a;
    transform: translateY(-1px);
}

.book-buy--wide {
    display: flex;
    width: 100%;
    margin-top: 16px;
}

/* Author and price on one line under the title. The price used to sit inside
   the buy button; it belongs with the book, not with the click. */
.book-detail__meta {
    margin-top: 8px;
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}

.book-detail__author {
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.book-detail__price {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-primary);
}

/* ── the reading sample ────────────────────────────────────────────────── */

.book-sample {
    margin-top: 38px;
}

.book-sample__head {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 16px;
}

.book-sample__rule {
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

/* The one place on the site that is deliberately paper. A sample is meant to be
   read, and long prose in light-on-black is where readers stop. It sits inside
   its own sheet so it reads as an object lifted out of the book, not as the
   page having changed theme. */
.book-sample__sheet {
    background: #f7f3ec;
    color: #1b1813;
    border-radius: 4px;
    padding: clamp(22px, 4vw, 44px);
    box-shadow:
        inset 14px 0 26px -20px rgba(0, 0, 0, 0.55),
        0 18px 40px -22px rgba(0, 0, 0, 0.9);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.02rem;
    line-height: 1.78;
    /* Scrollable as the no-JS fallback. The clamp below replaces this with a
       fade and a button as soon as the script runs. */
    max-height: 62vh;
    overflow-y: auto;
}

.book-sample__wrap {
    position: relative;
}

/* Clamped state: no inner scrollbar, a fade into the page, and a button. An
   inner scroll box on a phone steals the swipe that was meant for the page. */
.book-sample__wrap.is-clamped .book-sample__sheet {
    max-height: 46vh;
    overflow: hidden;
}

.book-sample__wrap.is-clamped::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 140px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(to bottom, rgba(247, 243, 236, 0) 0%, rgba(247, 243, 236, 0.92) 62%, #f7f3ec 100%);
    pointer-events: none;
}

.book-sample__expand {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 2;
    padding: 9px 18px;
    border: 1px solid rgba(27, 24, 19, 0.22);
    border-radius: 999px;
    background: #fffdf9;
    color: #1b1813;
    font: 600 0.82rem/1 var(--font-main);
    cursor: pointer;
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.5);
    transition: border-color 160ms ease, background 160ms ease;
}

.book-sample__expand:hover {
    border-color: rgba(27, 24, 19, 0.45);
    background: #fff;
}

/* Unclamped, the sheet is as long as the sample is. */
.book-sample__wrap:not(.is-clamped) .book-sample__sheet {
    max-height: none;
    overflow: visible;
}

.book-sample__sheet h1,
.book-sample__sheet h2,
.book-sample__sheet h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 26px 0 12px;
    color: #1b1813;
}

.book-sample__sheet h1:first-child,
.book-sample__sheet h2:first-child,
.book-sample__sheet h3:first-child {
    margin-top: 0;
}

.book-sample__sheet p {
    margin-bottom: 1em;
}

/* Prose sets its own first-line indent rather than paragraph spacing after the
   opening paragraph — the convention every printed book uses. */
.book-sample__sheet p + p {
    text-indent: 1.4em;
    margin-bottom: 0;
}

.book-sample__sheet em { font-style: italic; }
.book-sample__sheet strong { font-weight: 700; }

.book-sample__pages {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.book-sample__pages img {
    width: 100%;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.9);
}

.book-sample__end {
    margin-top: 20px;
    padding: 18px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.book-sample__end p {
    color: var(--color-text-secondary);
    font-size: 0.88rem;
}

/* ── cover-opening transition ──────────────────────────────────────────────
   Clicking a cover clones the book into a fixed overlay, swings the front board
   open on its spine, and flies into the page behind it. The browser starts
   loading the real title page while the last third is still running, so what
   you land on is the page, not a picture of one.
   ────────────────────────────────────────────────────────────────────────── */

.bt-stage {
    position: fixed;
    inset: 0;
    /* Under the header (100) and far under any ad, but over the shelf. */
    z-index: 90;
    perspective: 1700px;
    perspective-origin: 50% 45%;
    pointer-events: none;
}

/* Without the veil the book opens against a shelf of other books and reads as
   flat. Dimming for the flight gives it edges, then clears as it passes. */
/* Near-opaque on purpose. It is not just a dimmer: at the end of the flight it
   is what the destination page appears out of, so it has to reach roughly the
   page's own background. */
.bt-veil {
    position: absolute;
    inset: 0;
    background: rgba(9, 9, 11, 0.92);
    opacity: 0;
    will-change: opacity;
}

.bt-book {
    position: absolute;
    transform-style: preserve-3d;
    will-change: transform;
}

/* The page revealed under the cover. */
.bt-page {
    position: absolute;
    inset: 0;
    background: #f7f3ec;
    border-radius: 1px 3px 3px 1px;
    overflow: hidden;
    box-shadow:
        inset 14px 0 26px -18px rgba(0, 0, 0, 0.8),
        0 2px 4px rgba(0, 0, 0, 0.25),
        0 30px 60px -20px rgba(0, 0, 0, 0.7);
}

.bt-page img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* No sample page image for most titles — they are EPUBs. Opening onto blank
   paper reads as a loading failure, so the book opens on its half-title. */
.bt-halftitle {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6%;
    padding: 12%;
    text-align: center;
    color: #1b1813;
}

.bt-halftitle__title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(0.8rem, 1.6vw, 1.3rem);
    font-weight: 700;
    line-height: 1.15;
}

.bt-halftitle__rule {
    width: 34%;
    height: 1px;
    background: rgba(27, 24, 19, 0.28);
}

.bt-halftitle__author {
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(27, 24, 19, 0.6);
}

/* Front board: two faces on one plane, so the back of the swinging board is
   paper rather than a mirrored image of the cover art. */
.bt-cover {
    position: absolute;
    inset: 0;
    transform-origin: left center;
    transform-style: preserve-3d;
    will-change: transform;
}

.bt-cover__face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.bt-cover__face--back {
    transform: rotateY(180deg);
    background: #f2ece2;
    border-radius: 3px 1px 1px 3px;
    box-shadow:
        inset -16px 0 24px -18px rgba(0, 0, 0, 0.6),
        0 2px 6px rgba(0, 0, 0, 0.3);
}

/* A board swinging away from the camera casts more, not less. The clone must
   also drop .book's own transition — two engines animating one transform is the
   single biggest source of stutter here. */
.bt-cover__face--front > .book {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 44px -18px rgba(0, 0, 0, 0.8);
    transition: none !important;
    transform: none !important;
}

.bt-book,
.bt-cover {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* What the cover opened onto. */
@keyframes bt-inside {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

.bt-inside {
    animation: bt-inside 420ms cubic-bezier(.22, .8, .3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .book { transition: none; }
    .group:hover .book { transform: none; }
    .bt-inside { animation: none; }
    .book-buy:hover { transform: none; }
}

/* ── narrow ────────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
    .book-detail {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .book-detail__cover {
        position: static;
        max-width: 220px;
        margin: 0 auto;
    }
}

@media (max-width: 560px) {
    .books-shelf {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 20px 14px;
    }

    .book-sample__sheet {
        font-size: 0.98rem;
    }
}