/* =====================================================
   book-review-article.css — dedicated detail layout
   Activated by JS adding .is-book-review to <body data-page="article">.
   ALL selectors below are scoped to that combo so they can't leak
   into normal article pages.
   ===================================================== */

body[data-page="article"].is-book-review {
    /* Match the slate site palette; the book-review accent is the wine
       used on the /book-reviews index, scoped to this template only. */
    --brx-ink:        #0e1117;
    --brx-ink-soft:   #181d28;
    --brx-paper:      #fbfaf6;     /* warm jacket-paper */
    --brx-paper-off:  #f1ede2;
    --brx-paper-line: #e3ddcd;
    --brx-text:       #1a1d24;
    --brx-text-muted: #4a4f5c;
    --brx-text-sub:   #7a808d;
    --brx-accent:     #41566e;
    --brx-accent-soft:#8a98ab;
    --brx-on-dark:    #efe9da;

    background: var(--brx-paper);
    color: var(--brx-text);
}

/* Tone down the global "bg-blobs" decoration so it doesn't fight the
   book-jacket aesthetic. The blobs live behind the article page on
   normal stories — for book reviews we want clean paper. */
body[data-page="article"].is-book-review .bg-blobs { display: none; }
body[data-page="article"].is-book-review .dc-capitol,
body[data-page="article"].is-book-review .dc-silhouette { display: none; }

/* Hide the default related-articles strip; the in-template CTA points
   readers back to /book-reviews instead, which is the right next step. */
body[data-page="article"].is-book-review .related-articles-wrap { display: none; }

body[data-page="article"].is-book-review .article-page {
    background: var(--brx-paper);
    padding-top: 56px;
    padding-bottom: 120px;
}
/* article-premium.css resets .article-page > .container to max-width:none;
   padding:0 (full-bleed for normal stories). Book reviews aren't full-bleed
   editorial spreads — they're column reads with a cover rail — so restore
   normal gutters and a sensible max-width on this template only. */
body[data-page="article"].is-book-review .article-page .container {
    max-width: 1200px;
    padding-left: 32px;
    padding-right: 32px;
}
@media (max-width: 720px) {
    body[data-page="article"].is-book-review .article-page {
        padding-top: 32px;
        padding-bottom: 72px;
    }
    body[data-page="article"].is-book-review .article-page .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media (max-width: 420px) {
    body[data-page="article"].is-book-review .article-page .container {
        padding-left: 16px;
        padding-right: 16px;
    }
}
body[data-page="article"].is-book-review .back-link {
    color: var(--brx-accent);
    font-weight: 600;
}
body[data-page="article"].is-book-review .back-link:hover {
    color: var(--brx-accent-soft);
}

/* The renderer drops <article class="brx"> into #article-detail, so
   everything below is scoped under .brx (defensive against future changes
   to .article-detail). */

.brx {
    --col-gap: 64px;
    font-family: 'Inter', system-ui, sans-serif;
}

/* ─── HERO ─────────────────────────────────────────────────────── */
.brx-hero {
    padding: 24px 0 48px;
    border-bottom: 1px solid var(--brx-paper-line);
    margin-bottom: 56px;
    position: relative;
}
.brx-hero::after {
    /* a deliberate hairline accent under the kicker — a small detail
       that signals "this is a column, not just an article" */
    content: '';
    position: absolute;
    left: 0; bottom: -1px;
    width: 80px; height: 3px;
    background: var(--brx-accent);
    border-radius: 2px;
}

.brx-hero-inner {
    max-width: 920px;
}
.brx-hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 18px;
    margin-bottom: 24px;
}
.brx-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--brx-accent);
    margin: 0;
}
.brx-kicker::before {
    content: '';
    width: 28px; height: 1px;
    background: var(--brx-accent);
}
.brx-genre-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brx-ink);
    background: var(--brx-paper-off);
    border: 1px solid var(--brx-paper-line);
    border-radius: 999px;
}

.brx-title {
    font-family: 'Playfair Display', 'Source Serif Pro', Georgia, serif;
    font-weight: 700;
    font-size: clamp(38px, 6vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.022em;
    color: var(--brx-ink);
    margin: 0 0 14px;
    /* Wrap long, single-token-rich titles cleanly. balance keeps the
       last line from looking like an orphan when the size shrinks. */
    text-wrap: balance;
}
/* Long-title shrinks. JS tags .brx-title with data-length based on
   character count so the largest editorial scale stays for short
   titles (where it reads as impact) and falls back to comfortable
   reading sizes once the title would otherwise blow up the hero. */
.brx-title[data-length="medium"] {
    font-size: clamp(34px, 4.8vw, 58px);
    line-height: 1.06;
}
.brx-title[data-length="long"] {
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.1;
    letter-spacing: -0.018em;
}
.brx-title[data-length="xlong"] {
    font-size: clamp(24px, 2.8vw, 36px);
    line-height: 1.18;
    letter-spacing: -0.014em;
}

.brx-book-author {
    font-style: italic;
    font-family: 'Playfair Display', 'Source Serif Pro', Georgia, serif;
    font-size: clamp(20px, 2.4vw, 28px);
    color: var(--brx-text-muted);
    margin: 0 0 28px;
}
.brx-book-author strong {
    color: var(--brx-ink);
    font-weight: 600;
    font-style: normal;
}

.brx-deck {
    font-family: 'Playfair Display', 'Source Serif Pro', Georgia, serif;
    font-style: italic;
    font-size: clamp(18px, 1.5vw, 23px);
    line-height: 1.45;
    color: var(--brx-text);
    margin: 0 0 36px;
    max-width: 720px;
    padding-left: 18px;
    border-left: 3px solid var(--brx-accent);
}

.brx-byline {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 36px;
    padding-top: 24px;
    border-top: 1px solid var(--brx-paper-line);
}
.brx-byline-pair { display: flex; flex-direction: column; gap: 4px; }
.brx-byline-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--brx-text-sub);
}
.brx-byline-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--brx-ink);
}

/* ─── SPREAD: cover + verdict + body ────────────────────────────
   The body prose lives in the right column too, so the cover stays
   next to the opening of the review instead of dropping below it. */
.brx-spread {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
    margin-bottom: 0;
    position: relative;
}
@media (max-width: 880px) {
    .brx-spread {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.brx-cover-wrap {
    position: sticky;
    top: 96px;
    z-index: 1;
}
@media (max-width: 880px) {
    .brx-cover-wrap { position: static; max-width: 280px; margin: 0 auto; }
}

.brx-cover {
    position: relative;
    /* Most book covers are taller than 2:3 (closer to 6.4 × 9.6 ≈ 2:3.0,
       but trade-paperback scans skew 5.5 × 8.5 ≈ 2:3.1). Letting the
       container be slightly taller and using object-fit: contain means
       we never crop the spine or top off a cover. */
    aspect-ratio: 2 / 3.05;
    border-radius: 4px;
    overflow: hidden;
    /* Warm paper tone behind the cover so the moment between load
       states reads as a book on a shelf rather than a blank rectangle. */
    background:
        radial-gradient(circle at 50% 30%, rgba(238,241,245,.08), transparent 60%),
        var(--brx-ink-soft);
    box-shadow:
        0 50px 60px -30px rgba(14,17,23,.45),
        0 0 0 1px var(--brx-paper-line);
    transform: rotate(-1.5deg);
    transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.brx-cover:hover { transform: rotate(0) scale(1.015); }
.brx-cover-img {
    width: 100%; height: 100%;
    /* contain (not cover) preserves the full book jacket — never
       crops the title or spine. Pairs with the slightly tall
       aspect-ratio above so most scans fill the frame edge-to-edge. */
    object-fit: contain;
    display: block;
    opacity: 0;
    transition: opacity .5s ease;
    /* High-DPI sharpness hints. WebKit + Blink honor -webkit-optimize-contrast;
       Firefox honors crisp-edges (only for upscaling). When the source
       file is already high enough resolution these are no-ops, so they
       only kick in when we're stretching a smaller scan. */
    image-rendering: -webkit-optimize-contrast;
}
.brx-cover-img.loaded { opacity: 1; }
.brx-cover-img.failed {
    /* When Open Library has no cover, the image errors out — show a
       paper-tone placeholder with a tiny book glyph instead of an X. */
    opacity: 1;
    object-fit: contain;
    padding: 30%;
    background:
        radial-gradient(circle at 50% 40%, rgba(238,241,245,.04), transparent 60%),
        var(--brx-ink-soft);
}
.brx-cover::after {
    /* Spine highlight on the left edge — pure CSS, no asset */
    content: '';
    position: absolute; inset: 0 auto 0 0;
    width: 14px;
    background: linear-gradient(90deg, rgba(0,0,0,.35), transparent);
    pointer-events: none;
}
.brx-cover-shadow {
    position: absolute;
    inset: auto -8% -10% 4%;
    height: 24px;
    border-radius: 50%;
    background: rgba(14,17,23,.25);
    filter: blur(18px);
    pointer-events: none;
    z-index: -1;
}

/* ─── VERDICT (rating + meta + pullquote + body) ───────────────
   This is the right column of the spread. Verdict elements stack
   compactly at the top, then the body prose flows below — so the
   cover sits beside the rating AND the first half of the read. */
.brx-verdict {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-top: 4px;
    min-width: 0; /* let long words/code break inside the grid column */
}

.brx-verdict-card {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    padding: 0 0 28px;
    border-bottom: 1px solid var(--brx-paper-line);
    position: relative;
}
.brx-verdict-eyebrow {
    display: none; /* visually replaced by the more compact rating-caption */
}
.brx-verdict-row {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.brx-rating-dial {
    position: relative;
    width: 104px; height: 104px;
    border-radius: 50%;
    background: conic-gradient(var(--brx-accent) calc(var(--score, 0) * 1%), var(--brx-paper-line) 0);
    flex: 0 0 auto;
    box-shadow: 0 8px 22px -10px rgba(65,86,110,.35);
}
.brx-rating-dial::before {
    content: '';
    position: absolute; inset: 8px;
    border-radius: 50%;
    background: var(--brx-paper);
    box-shadow: inset 0 0 0 1px var(--brx-paper-line);
}
.brx-rating-num {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 34px;
    font-weight: 700;
    color: var(--brx-ink);
    line-height: 1;
    letter-spacing: -0.01em;
    z-index: 1;
    white-space: nowrap;
}

.brx-rating-detail {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 140px;
}
.brx-rating-stars {
    display: inline-flex;
    gap: 4px;
    color: var(--brx-accent);
}
.brx-rating-caption {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--brx-text-sub);
}

.brx-star {
    display: inline-grid;
    place-items: center;
    width: 22px; height: 22px;
}
.brx-star svg { width: 100%; height: 100%; }

/* The meta list replaces the old card-style quickfacts. It's a tight
   key/value list with hairline separators — feels editorial, not formy. */
.brx-meta-list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.brx-meta-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: baseline;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--brx-paper-line);
}
.brx-meta-row:first-child { padding-top: 0; }
.brx-meta-row:last-child { border-bottom: 0; }
.brx-meta-row dt {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--brx-text-sub);
    margin: 0;
}
.brx-meta-row dd {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--brx-ink);
}
.brx-meta-row dd code {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 12px;
    background: var(--brx-paper-off);
    border: 1px solid var(--brx-paper-line);
    padding: 3px 9px;
    border-radius: 6px;
    color: var(--brx-ink);
    font-weight: 500;
}

/* Editorial pullquote — a confident detail that lifts the spread.
   Hidden when the hero already shows the deck (deck and pullquote
   would be duplicate), and shown only as a graceful fallback. */
.brx-pullquote {
    position: relative;
    padding: 22px 0 0 36px;
    color: var(--brx-text-muted);
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.6;
    border-top: 1px solid var(--brx-paper-line);
}
.brx-pullquote[aria-hidden="true"] { display: none; }
.brx-pullquote p { margin: 0; }
.brx-pullquote-mark {
    position: absolute;
    left: 0;
    top: 26px;
    width: 26px;
    height: 26px;
    color: var(--brx-accent);
    opacity: .85;
}

/* ─── BODY ────────────────────────────────────────────────────────── */
/* Wraps the coda + CTA only — body prose lives inside .brx-verdict. */
.brx-body-wrap {
    margin: 56px 0 0;
}
.brx-body {
    font-family: 'Source Serif Pro', Georgia, serif;
    font-size: clamp(16px, 1.05vw, 18px);
    line-height: 1.72;
    color: var(--brx-text);
    margin-top: 4px;
}

/* The body content can come from two pipelines:
   (a) writer composer → wraps every paragraph in <p>;
   (b) older renderContentBlocks → mixes <p>, <h2>, <blockquote>, <img>, etc.
   Style both, scoped to .brx-body so it doesn't fight article-premium.css. */
.brx-body > * + * { margin-top: 1.1em; }
.brx-body p {
    margin: 0 0 1.1em;
}
.brx-body p:first-child::first-letter {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 3.6em;
    float: left;
    line-height: 0.9;
    padding-right: 10px;
    padding-top: 4px;
    color: var(--brx-accent);
}
.brx-body h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(24px, 2.4vw, 32px);
    color: var(--brx-ink);
    margin: 2em 0 0.6em;
    letter-spacing: -0.012em;
}
.brx-body h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(20px, 1.8vw, 24px);
    color: var(--brx-ink);
    margin: 1.6em 0 0.5em;
}
/* Pullquote — a standalone quoted line gets promoted to <blockquote>
   automatically (see promotePullquotes in js/main.js). The treatment
   reads as editorial, not as plain indentation. */
.brx-body blockquote {
    position: relative;
    margin: 2em 0;
    padding: 14px 8px 14px 44px;
    border-left: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.22em;
    line-height: 1.5;
    color: var(--brx-ink);
    letter-spacing: -0.005em;
}
.brx-body blockquote::before {
    content: '\201C'; /* big left double-quote */
    position: absolute;
    left: -2px;
    top: -14px;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 3.6em;
    line-height: 1;
    color: var(--brx-accent);
    opacity: .9;
}
.brx-body blockquote::after {
    /* hairline rule under the quote so it visually closes the block */
    content: '';
    position: absolute;
    left: 44px;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--brx-paper-line);
}
@media (max-width: 720px) {
    .brx-body blockquote { font-size: 1.12em; padding-left: 36px; }
    .brx-body blockquote::before { font-size: 2.8em; top: -8px; }
}

/* ─── Mobile fine-tuning ────────────────────────────────────────
   The container gutter is restored above, so .brx only needs to tame
   internal max-widths and rhythm; never assume the container has 0
   side-padding when adding values here. */
@media (max-width: 720px) {
    .brx { --col-gap: 32px; }
    .brx-hero { padding: 8px 0 32px; margin-bottom: 36px; }
    .brx-title { font-size: clamp(30px, 8vw, 44px); }
    .brx-title[data-length="medium"] { font-size: clamp(26px, 6.6vw, 36px); }
    .brx-title[data-length="long"]   { font-size: clamp(22px, 5.4vw, 30px); }
    .brx-title[data-length="xlong"]  { font-size: clamp(20px, 4.6vw, 26px); }
    .brx-book-author { font-size: clamp(18px, 4.6vw, 22px); margin-bottom: 22px; }
    .brx-deck {
        font-size: clamp(16px, 4vw, 19px);
        padding-left: 14px;
        margin-bottom: 28px;
    }
    .brx-byline { gap: 12px 24px; padding-top: 18px; }
    .brx-spread { gap: 32px; }
    .brx-cover-wrap { max-width: 220px; }
    .brx-verdict-card { gap: 18px; padding-bottom: 22px; }
    .brx-rating-dial { width: 88px; height: 88px; }
    .brx-rating-num { font-size: 28px; }
    .brx-meta-row {
        grid-template-columns: 100px 1fr;
        gap: 12px;
        padding: 10px 0;
    }
    .brx-coda { margin-top: 44px; padding: 20px 0; }
}
@media (max-width: 420px) {
    .brx-title { font-size: clamp(26px, 9vw, 36px); letter-spacing: -0.018em; }
    .brx-title[data-length="medium"] { font-size: clamp(23px, 7.4vw, 30px); }
    .brx-title[data-length="long"]   { font-size: clamp(20px, 6.2vw, 26px); }
    .brx-title[data-length="xlong"]  { font-size: clamp(19px, 5.4vw, 23px); }
    .brx-hero-meta { gap: 10px 14px; margin-bottom: 18px; }
    .brx-kicker { font-size: 11px; letter-spacing: .22em; }
    .brx-kicker::before { width: 20px; }
    .brx-cover-wrap { max-width: 190px; }
    .brx-meta-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 10px 0;
    }
    .brx-meta-row dd { font-size: 13.5px; }
}
.brx-body a {
    color: var(--brx-accent);
    border-bottom: 1px solid rgba(65,86,110,0.3);
    text-decoration: none;
    transition: border-color .2s;
}
.brx-body a:hover { border-bottom-color: var(--brx-accent); }
.brx-body img {
    max-width: 100%;
    border-radius: 6px;
    margin: 1.4em auto;
    display: block;
    box-shadow: 0 20px 32px -16px rgba(14,17,23,.2);
}
.brx-body ul, .brx-body ol {
    padding-left: 1.4em;
    margin: 1.1em 0;
}
.brx-body li { margin-bottom: .4em; }

/* ─── CODA (review footer) ───────────────────────────────────────
   Sits below the body. Editorial sign-off on the left, share on the
   right. Replaces the old wide share bar that felt like a toolbar. */
.brx-coda {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 64px;
    padding: 24px 0;
    border-top: 1px solid var(--brx-paper-line);
    border-bottom: 1px solid var(--brx-paper-line);
}
.brx-coda-byline {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.brx-coda-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--brx-text-sub);
}
.brx-coda-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 19px;
    font-weight: 600;
    color: var(--brx-ink);
    letter-spacing: -0.005em;
}

.brx-share {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.brx-share-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--brx-text-sub);
    margin-right: 6px;
}
.brx-share-btn {
    appearance: none;
    background: transparent;
    border: 1px solid var(--brx-paper-line);
    color: var(--brx-text-muted);
    width: 38px; height: 38px;
    border-radius: 50%;
    display: grid; place-items: center;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
    text-decoration: none;
}
.brx-share-btn:hover {
    background: var(--brx-ink);
    border-color: var(--brx-ink);
    color: var(--brx-on-dark);
    transform: translateY(-2px);
}
.brx-share-btn:focus-visible {
    outline: 2px solid var(--brx-accent);
    outline-offset: 3px;
}

.brx-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 40px;
    background: var(--brx-ink);
    color: var(--brx-on-dark);
    padding: 16px 28px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.brx-cta:hover {
    background: var(--brx-accent);
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -12px rgba(65,86,110,.45);
}
.brx-cta:focus-visible {
    outline: 2px solid var(--brx-accent);
    outline-offset: 3px;
}
.brx-cta svg { transition: transform .25s ease; }
.brx-cta:hover svg { transform: translateX(4px); }

/* ─── Related-books shelf ─────────────────────────────────────
   "Other books you might enjoy" — appears under the coda/share
   row, above the .brx-cta back-to-reviews button. Hidden by JS
   if there are no other reviews to recommend.
   ============================================================ */
.brx-shelf {
    margin: 72px 0 48px;
    padding-top: 56px;
    border-top: 1px solid var(--brx-paper-line);
}
.brx-shelf[hidden] { display: none; }

.brx-shelf-head {
    text-align: center;
    margin-bottom: 36px;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}
.brx-shelf-eyebrow {
    display: inline-block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--brx-accent);
    margin-bottom: 14px;
}
.brx-shelf-title {
    font-family: 'Source Serif Pro', Georgia, serif;
    font-size: clamp(26px, 3.6vw, 36px);
    line-height: 1.18;
    letter-spacing: -.01em;
    color: var(--brx-ink);
    margin: 0 0 12px;
    font-weight: 600;
}
.brx-shelf-deck {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--brx-text-muted);
    margin: 0;
}

.brx-shelf-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}
@media (max-width: 900px) {
    .brx-shelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* If only 1 card surfaces (rare), keep it left-anchored. */
    .brx-shelf-grid > .brx-shelf-card:only-child { max-width: 360px; }
}
@media (max-width: 560px) {
    .brx-shelf-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .brx-shelf { margin-top: 56px; padding-top: 40px; }
}

.brx-shelf-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    background: var(--brx-paper);
    border: 1px solid var(--brx-paper-line);
    border-radius: 14px;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.brx-shelf-card:hover {
    transform: translateY(-4px);
    border-color: rgba(65,86,110,.32);
    box-shadow: 0 22px 44px -22px rgba(14,17,23,.18);
}
.brx-shelf-card:focus-visible {
    outline: 2px solid var(--brx-accent);
    outline-offset: 3px;
}

.brx-shelf-cover {
    aspect-ratio: 2 / 3;
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
    background: var(--brx-paper-off);
    box-shadow:
        0 1px 0 rgba(14,17,23,.08),
        0 14px 28px -14px rgba(14,17,23,.35);
    position: relative;
}
.brx-shelf-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.brx-shelf-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.brx-shelf-genre {
    align-self: flex-start;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brx-accent);
    background: rgba(65,86,110,.08);
    padding: 4px 9px;
    border-radius: 999px;
    margin-bottom: 6px;
}
.brx-shelf-book {
    font-family: 'Source Serif Pro', Georgia, serif;
    font-size: 18px;
    line-height: 1.28;
    letter-spacing: -.005em;
    color: var(--brx-ink);
    margin: 0;
    font-weight: 600;
    /* Cap to two lines so cards stay aligned in the grid. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.brx-shelf-author {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: var(--brx-text-muted);
    margin: 0;
    font-style: italic;
}
.brx-shelf-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    color: var(--brx-text-sub);
    flex-wrap: wrap;
}
.brx-shelf-rating {
    color: var(--brx-accent);
    font-weight: 700;
    letter-spacing: .02em;
}
.brx-shelf-byline {
    color: var(--brx-text-muted);
}

/* ─── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .brx-cover { transform: none !important; transition: none; }
    .brx-share-btn, .brx-cta { transition: none; }
    .brx-shelf-card { transition: none; }
    .brx-shelf-card:hover { transform: none; }
}