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; } .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(239,233,218,.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(239,233,218,.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); display: grid; place-items: center; flex: 0 0 auto; box-shadow: 0 8px 22px -10px rgba(122,31,43,.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: relative; font-family: 'Playfair Display', Georgia, serif; font-size: 34px; font-weight: 700; color: var(--brx-ink); line-height: 1; letter-spacing: -0.01em; } .brx-rating-num small { font-size: 13px; font-weight: 400; color: var(--brx-text-sub); margin-left: 2px; letter-spacing: 0; } .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

; (b) older renderContentBlocks → mixes

,
, , 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
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-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-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(122,31,43,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(122,31,43,.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); } / ─── Reduced motion ─────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .brx-cover { transform: none !important; transition: none; } .brx-share-btn, .brx-cta { transition: none; } }