/* Bman's Landing — dark, clean, fast. System fonts only, no images except the posts' own. */
.bbr-home, .bbr-daily, .bbr-grid, .bbr-bestof {
  --bg: #0e0c0a; --panel: #17130f; --line: #2c241b; --text: #ebe5da; --muted: #a89c8a; --accent: #e2a93b; --accent-2: #8fd3c9;
  color: var(--text); font: 16px/1.55 Georgia, "Times New Roman", serif; box-sizing: border-box;
}
.bbr-home *, .bbr-daily *, .bbr-grid *, .bbr-bestof * { box-sizing: border-box; }
.bbr-home a, .bbr-daily a, .bbr-grid a, .bbr-bestof a { color: inherit; text-decoration: none; }

/* ----- review feed (Stereophile-style: label, headline, short deck, date) ----- */
.bbr-daily { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); background: var(--bg); padding: 16px; }
@media (min-width: 900px) { .bbr-daily:not(.bbr-compact) { grid-template-columns: minmax(0, 1fr) 300px; padding: 28px; } }
.bbr-compact { padding: 0; background: none; gap: 0; }
.bbr-item { border-bottom: 1px solid var(--line); }
.bbr-link { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 16px 0; }
.bbr-link img { width: 112px; height: 112px; object-fit: cover; border-radius: 3px; background: var(--line); }
.bbr-label { display: block; font: 600 11px/1.2 -apple-system, "Segoe UI", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.bbr-text h3 { margin: 0 0 6px; font-size: 19px; line-height: 1.25; font-weight: 700; }
.bbr-link:hover h3, .bbr-link:focus-visible h3 { color: var(--accent-2); }
.bbr-text p { margin: 0 0 6px; color: var(--muted); font-size: 15px; }
.bbr-text time { font: 12px -apple-system, "Segoe UI", Arial, sans-serif; color: var(--muted); }
.bbr-hero .bbr-link { grid-template-columns: 1fr; gap: 12px; }
.bbr-hero .bbr-link img { width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 440px; }
.bbr-hero h3 { font-size: 26px; }
@media (min-width: 900px) { .bbr-hero h3 { font-size: 32px; } .bbr-link { grid-template-columns: 160px minmax(0, 1fr); } .bbr-link img { width: 160px; height: 120px; } }
/* in the small landing window: text only, no pictures */
.bbr-compact .bbr-link { grid-template-columns: 1fr; padding: 12px 0; }
.bbr-compact img, .bbr-compact .bbr-text p { display: none; }
.bbr-compact .bbr-text h3, .bbr-compact .bbr-hero h3 { font-size: 17px; }
.bbr-compact .bbr-item:last-child { border-bottom: 0; }

/* ----- ads: reserve space so the page doesn't jump while ads load ----- */
.bbr-side { position: relative; }
.bbr-ad-sidebar { position: sticky; top: 16px; min-height: 250px; }
.bbr-infeed:empty { display: none; }
.bbr-ad-infeed { min-height: 100px; margin: 12px 0; text-align: center; }
@media (min-width: 900px) { .bbr-infeed { display: none; } }   /* desktop uses the sidebar instead */

/* ----- video ----- */
.bbr-video { margin: 0; }
.bbr-yt { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 4px; overflow: hidden; }
.bbr-yt button, .bbr-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: none; cursor: pointer; }
.bbr-yt img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .15s; transform: scale(1.34); }  /* YouTube previews have black bars baked in; crop them */
.bbr-yt button:hover img, .bbr-yt button:focus-visible img { opacity: 1; }
.bbr-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 44px; margin: -22px 0 0 -32px; border-radius: 10px; background: #c4302b; }
.bbr-play::after { content: ""; position: absolute; left: 25px; top: 12px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.bbr-video figcaption { padding-top: 10px; display: grid; gap: 2px; font-size: 15px; }
.bbr-video figcaption span, .bbr-video time { color: var(--muted); font-size: 14px; }
.bbr-empty { padding: 40px 16px; text-align: center; color: var(--muted); border: 1px dashed var(--line); }
.bbr-grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); padding: 16px; background: var(--bg); }
@media (min-width: 700px) { .bbr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .bbr-grid { grid-template-columns: repeat(3, 1fr); padding: 28px; } }

/* ----- best-of list ----- */
.bbr-bestof ul { list-style: none; margin: 0 0 14px; padding: 0; }
.bbr-bestof li { border-bottom: 1px solid var(--line); }
.bbr-bestof li a { display: block; padding: 10px 0; font-size: 16px; }
.bbr-bestof li a:hover, .bbr-bestof li a:focus-visible { color: var(--accent-2); }
.bbr-btn { display: inline-block; padding: 9px 16px; border-radius: 999px; background: var(--accent); color: #17130f !important; font: 700 14px -apple-system, "Segoe UI", Arial, sans-serif; }

/* ----- pagination ----- */
.bbr-pages { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 20px 16px; background: var(--bg); font: 14px -apple-system, "Segoe UI", Arial, sans-serif; }
.bbr-pages a, .bbr-pages span { padding: 6px 12px; border: 1px solid var(--line); border-radius: 4px; color: var(--text); text-decoration: none; }
.bbr-pages .current { background: var(--accent); color: #17130f; border-color: var(--accent); }

/* ----- click-to-play player inside old posts ----- */
.entry-content .bbr-yt, .post .bbr-yt { max-width: 640px; margin: 1em auto; }

@media (prefers-reduced-motion: reduce) { .bbr-yt img { transition: none; } }

/* Wide content: sections centre themselves at 1280px inside whatever full-width area the theme/Divi section gives them. */
.bbr-home, .bbr-daily:not(.bbr-compact), .bbr-grid { max-width: 1280px; margin-left: auto; margin-right: auto; }
.bbr-home a, .bbr-daily a { overflow-wrap: anywhere; }

/* ===== Daily Reviews: magazine layout (one stacked column + ad column), light ===== */
.bbr-mag { --text: #2b2b2b; --muted: #6b6b6b; --line: #d9d9d9; --accent: #b3261e; --page: #efefef;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; background: var(--page); color: var(--text); padding: 16px; font: 17px/1.55 Arial, Helvetica, sans-serif; }
.bbr-mag .bbr-main { background: #fff; border-radius: 14px; padding: 20px 16px 8px; min-width: 0; }
.bbr-mag a { color: inherit; text-decoration: none; }
.bbr-heading { margin: 0 0 6px; padding-bottom: 8px; border-bottom: 2px dotted var(--line); font: 600 15px/1 Arial, Helvetica, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.bbr-heading::before { content: ""; display: inline-block; width: 22px; height: 22px; margin-right: 10px; border-radius: 50%; vertical-align: -5px;   /* a small dartboard: 20 sections, doubles ring, bull */
  background: radial-gradient(circle, #b3261e 0 2px, #1f6f43 2.5px 4px, transparent 4.5px), radial-gradient(circle, transparent 0 6px, rgba(179, 38, 30, .9) 6.5px 7.5px, transparent 8px),
    repeating-conic-gradient(#1b1b1b 0 9deg, #efe3c8 9deg 18deg); box-shadow: 0 0 0 2px #1b1b1b, 0 0 0 3px var(--accent); }
.bbr-sort { margin: 6px 0 4px; text-align: right; font-size: 13px; color: var(--muted); }
.bbr-sort a { margin-left: 6px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 4px; }
.bbr-sort a[aria-current] { border-color: var(--accent); color: var(--accent); }
.bbr-card { padding: 22px 0 6px; border-bottom: 2px dotted var(--line); display: grid; gap: 8px; justify-items: start; }
.bbr-pill { padding: 1px 8px; border: 1px solid #9a9a9a; border-radius: 4px; font-size: 12px; line-height: 1.6; color: #6b6b6b; background: #fff; }
.bbr-card h3 { margin: 0; font: 700 30px/1.12 "Arial Narrow", "Roboto Condensed", "Helvetica Neue Condensed", Oswald, Arial, sans-serif; color: #000; }
.bbr-card h3 a:hover, .bbr-card h3 a:focus-visible { color: var(--accent); }
.bbr-card time { font-size: 13px; color: var(--muted); }
.bbr-cardimg { display: block; width: 100%; margin: 6px 0; }
.bbr-cardimg img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: contain; background: #f4f4f4; }
.bbr-card p { margin: 0; color: var(--text); }
.bbr-button { display: inline-block; margin: 6px 0 18px; padding: 9px 16px; border-radius: 6px; background: var(--accent); color: #fff !important; font-weight: 700; font-size: 15px; }
.bbr-button:hover, .bbr-button:focus-visible { background: #8f1d17; }
.bbr-infeed { padding: 14px 0; border-bottom: 2px dotted var(--line); }
.bbr-ad-top { display: block; }
.bbr-mag .bbr-ad { min-height: 100px; text-align: center; }
.bbr-mag .bbr-ad-top:empty, .bbr-mag .bbr-infeed:empty { display: none; }
.bbr-mag .bbr-side { display: none; }
/* page controls: 1 2 3 4 ... next > last >> */
.bbr-pages { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; padding: 22px 0 10px; background: none; font: 15px Arial, Helvetica, sans-serif; }
.bbr-pages a, .bbr-pages span { padding: 3px 9px; border: 1px solid transparent; border-radius: 4px; color: var(--accent); }
.bbr-pages a.page-numbers:not(.next):not(.prev) { border-color: var(--accent); }
.bbr-pages .current { color: #000; font-weight: 700; background: none; border-color: transparent; }
.bbr-pages .dots { color: var(--muted); }
.bbr-mag .bbr-live { margin-top: 16px; }
@media (min-width: 900px) {
  .bbr-mag { grid-template-columns: minmax(0, 720px) 340px; justify-content: center; padding: 28px; gap: 36px; }
  .bbr-mag .bbr-main { padding: 28px 32px 12px; }
  .bbr-mag .bbr-side { display: block; }
  .bbr-mag .bbr-ad-top, .bbr-mag .bbr-infeed { display: none; }     /* desktop uses the ad column instead */
  .bbr-mag .bbr-side { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }   /* ads spread down the whole column */
  .bbr-mag .bbr-ad-sidebar { min-height: 250px; }
}
.bbr-ad-menu { min-height: 100px; text-align: center; margin: 12px 0; }

/* ===== Reading sheet: a white page on a light-grey background, like the current posts ===== */
body.bbr-sheet { background: #e9e9e9; }
body.bbr-sheet .entry-content, body.bbr-sheet .wp-block-post-content, body.bbr-sheet .post-content {
  background: #fff; color: #111; max-width: 780px; margin: 0 auto 40px; padding: 28px clamp(16px, 5vw, 56px) 40px;
  font-family: Georgia, "Times New Roman", serif; font-size: 18px; line-height: 1.7; box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
body.bbr-sheet .entry-content img, body.bbr-sheet .wp-block-post-content img { max-width: 100%; height: auto; }
/* newer posts already contain their own big title, so hide the theme's duplicate */
body.bbr-editorial .entry-title, body.bbr-editorial .wp-block-post-title, body.bbr-editorial .post-title { display: none; }

/* ===== Landing page: three windows ===== */
.bbr-home { --bg: #0e0c0a; --panel: #16120e; --line: #2a231b; --text: #f0ebe1; --muted: #a79b89; --accent: #e2a93b;
  display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); padding: 16px; background: var(--bg); }
.bbr-w { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.bbr-wh { display: flex; align-items: center; gap: 8px; font: 600 12px/1 -apple-system, "Segoe UI", Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.bbr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.bbr-w h3 { margin: 0; font: 700 21px/1.25 Georgia, "Times New Roman", serif; color: var(--text); }
.bbr-w p { margin: 0; color: var(--muted); font-size: 15px; }
.bbr-lead { display: flex; flex-direction: column; gap: 10px; }
.bbr-lead img { display: block; width: 100%; aspect-ratio: 4 / 3; max-height: 260px; object-fit: cover; border-radius: 8px; background: var(--line); }
.bbr-lead:hover h3, .bbr-lead:focus-visible h3 { color: var(--accent); }
.bbr-w .bbr-pill { align-self: flex-start; padding: 2px 9px; border: 1px solid #5b5042; border-radius: 4px; font: 600 11px/1.6 -apple-system, "Segoe UI", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: none; }
.bbr-mini { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--line); }
.bbr-mini li { border-bottom: 1px solid var(--line); }
.bbr-mini a { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; font: 15px/1.35 Georgia, "Times New Roman", serif; color: var(--text); }
.bbr-mini a:hover span, .bbr-mini a:focus-visible span { color: var(--accent); }
.bbr-mini time { flex: none; font: 12px -apple-system, "Segoe UI", Arial, sans-serif; color: var(--muted); padding-top: 3px; }
.bbr-cta { margin-top: auto; padding-top: 6px; font: 700 14px -apple-system, "Segoe UI", Arial, sans-serif; color: var(--accent); }
.bbr-cta:hover, .bbr-cta:focus-visible { text-decoration: underline; }
.bbr-w .bbr-yt { flex: none; width: 100%; border-radius: 8px; }
.bbr-w .bbr-kicker { font: 600 12px/1 -apple-system, "Segoe UI", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.bbr-covers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bbr-covers a { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px; background: var(--line); }
.bbr-covers img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.bbr-covers a:hover img, .bbr-covers a:focus-visible img { transform: scale(1.06); }
.bbr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bbr-chips a { padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; font: 600 13px -apple-system, "Segoe UI", Arial, sans-serif; color: var(--text); }
.bbr-chips a:hover, .bbr-chips a:focus-visible { border-color: var(--accent); color: var(--accent); }
@media (min-width: 1000px) {
  .bbr-home { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; padding: 28px; align-items: stretch; }
  .bbr-w { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) { .bbr-covers img { transition: none; } }

/* ===== Video Library + Listening Room pages ===== */
.bbr-lib, .bbr-room { --bg: #0e0c0a; --panel: #16120e; --line: #2a231b; --text: #f0ebe1; --muted: #a79b89; --accent: #e2a93b;
  background: var(--bg); color: var(--text); padding: 16px; font: 16px/1.55 Georgia, "Times New Roman", serif; box-sizing: border-box; }
.bbr-lib *, .bbr-room * { box-sizing: border-box; }
.bbr-lib a, .bbr-room a { color: inherit; text-decoration: none; }
.bbr-libnav, .bbr-roomnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.bbr-libnav a { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; font: 600 14px -apple-system, "Segoe UI", Arial, sans-serif; }
.bbr-libnav a:hover, .bbr-libnav a:focus-visible { border-color: var(--accent); color: var(--accent); }
.bbr-libpart, .bbr-year { margin: 0 0 30px; scroll-margin-top: 20px; }
.bbr-libhead, .bbr-year h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 600 13px/1 -apple-system, "Segoe UI", Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.bbr-lib .bbr-grid { padding: 0; background: none; max-width: none; margin: 0; }
.bbr-lib .bbr-video figcaption strong { font-size: 17px; line-height: 1.3; }
.bbr-year { padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 14px; }
.bbr-year header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.bbr-year h2 { margin: 0; }
.bbr-covers8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bbr-sp { position: relative; }
.bbr-sp button { padding: 9px 16px; border: 0; border-radius: 999px; background: #1db954; color: #04130a; font: 700 14px -apple-system, "Segoe UI", Arial, sans-serif; cursor: pointer; }
.bbr-sp button:hover, .bbr-sp button:focus-visible { background: #1ed760; }
.bbr-sp iframe { display: block; width: 100%; height: 152px; border: 0; border-radius: 12px; }
.bbr-aud { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.bbr-audcard { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
@media (min-width: 700px) { .bbr-covers8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .bbr-aud { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .bbr-lib, .bbr-room { max-width: 1280px; margin-left: auto; margin-right: auto; padding: 28px; } }

/* ===== Page background that matches the sections (no white box around a dark section) ===== */
body.bbr-dark { background: #0e0c0a; }
body.bbr-light { background: #efefef; }
body.bbr-dark .entry-title, body.bbr-dark .wp-block-post-title, body.bbr-dark .page-title, body.bbr-light .entry-title, body.bbr-light .wp-block-post-title, body.bbr-light .page-title { display: none; }
body.bbr-dark main, body.bbr-light main { margin-top: 0 !important; }
body.bbr-dark .wp-block-post-content, body.bbr-dark .entry-content, body.bbr-light .wp-block-post-content, body.bbr-light .entry-content { padding-top: 0; }

/* ===== Imported Blogger pages (best-of lists, interviews, ...): fit any screen ===== */
body.bbr-wide .entry-content, body.bbr-wide .wp-block-post-content, body.bbr-wide .post-content { max-width: 1040px; }
.bbr-page { max-width: 100%; overflow-wrap: anywhere; }
.bbr-page img { max-width: 100% !important; height: auto !important; }
.bbr-page iframe { max-width: 100%; }
.bbr-page table, .bbr-page tbody { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; }
.bbr-page tr { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 14px; width: 100% !important; height: auto !important; margin: 0 0 18px; }
.bbr-page td, .bbr-page th { display: block !important; box-sizing: border-box; width: auto !important; height: auto !important; min-width: 0 !important; max-width: 100% !important;
  flex: 1 1 calc(50% - 14px); text-align: center; padding: 4px !important; font-size: 15px; line-height: 1.35; }
.bbr-page td a, .bbr-page td span { overflow-wrap: anywhere; }
@media (min-width: 700px) { .bbr-page td, .bbr-page th { flex: 1 1 calc(25% - 14px); } }
@media (min-width: 1000px) { .bbr-page td, .bbr-page th { flex: 1 1 calc(20% - 14px); max-width: calc(20% - 14px) !important; } }
/* Blogger page boxes carry inline widths such as 936px; never let them exceed the screen. */
.bbr-page div, .bbr-page p, .bbr-page h2, .bbr-page h3 { max-width: 100% !important; box-sizing: border-box; }
.bbr-page .post-body { width: auto !important; position: static !important; }
.bbr-page h2 { font-size: 20px !important; line-height: 1.3 !important; overflow: hidden; }
.bbr-page h2 .separator a { float: left; }
.bbr-page h2 img { max-height: 220px; width: auto !important; }

/* ===== Video Room: shared pieces (thumbnails, actions under the large screen) ===== */
.bbr-vroom { --bg: #000; --panel: #16120e; --line: #2a231b; --text: #f0ebe1; --muted: #a79b89; --accent: #e2a93b; }
.bbr-vthumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #000; }
.bbr-vthumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.34); opacity: .85; transition: opacity .15s; }
.bbr-vtitle { font: 700 18px/1.3 Georgia, "Times New Roman", serif; color: var(--text); }
html.bbr-lock { overflow: hidden; }
.bbr-t-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.bbr-act { display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 6px; background: #334155; color: #e2e8f0; font: 600 .8rem -apple-system, "Segoe UI", Arial, sans-serif; text-decoration: none; cursor: pointer; }
.bbr-act[hidden] { display: none; }
.bbr-act:hover, .bbr-act:focus-visible { background: #475569; color: #fff; }
.bbr-act-store { background: #2563eb; border-color: transparent; }
.bbr-act-tip { background: #10b981; border-color: transparent; color: #04130a; }
@media (max-width: 600px) { .bbr-t-actions .bbr-act { flex: 1 1 100%; justify-content: center; } }

/* ===== Listening Room volumes ===== */
.bbr-room { --bg: #0e0c0a; --panel: #16120e; --line: #2a231b; --text: #f0ebe1; --muted: #a79b89; --accent: #e2a93b; }
.bbr-gateway { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.bbr-yearaxis { display: flex; flex-direction: column; }
.bbr-yearrow { display: flex; align-items: baseline; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--line); opacity: .55; transition: opacity .2s; }
.bbr-yearrow:hover, .bbr-yearrow:focus-visible, .bbr-yearrow.is-on { opacity: 1; }
.bbr-yearaxis:hover .bbr-yearrow:not(:hover) { opacity: .3; }
.bbr-ynum { font: 300 34px/1 Georgia, "Times New Roman", serif; letter-spacing: .02em; min-width: 3.2em; }
.bbr-ymeta { font: 600 12px -apple-system, "Segoe UI", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.bbr-quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bbr-quadslot { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; background: var(--panel); }
.bbr-quadslot img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .bbr-gateway { grid-template-columns: 1fr 1fr; gap: 48px; } .bbr-quad { position: sticky; top: 60px; } }

.bbr-volume { padding-bottom: 24px; }
.bbr-vintro { max-width: 760px; margin: 0 auto 28px; color: var(--text); font-size: 18px; line-height: 1.7; }
.bbr-matrix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1200px; margin: 0 auto; }
@media (min-width: 1025px) { .bbr-matrix { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } }
.bbr-acell { transition: opacity .5s ease, filter .5s ease; }
.bbr-album { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; background: #141414; box-shadow: 0 12px 35px rgba(0, 0, 0, .25);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s ease; }
.bbr-album-link, .bbr-album img { display: block; width: 100%; height: 100%; }
.bbr-album img { object-fit: cover; }
.bbr-cap { margin-top: 8px; font: 600 13px/1.35 -apple-system, "Segoe UI", Arial, sans-serif; color: var(--muted); text-align: center; }
.bbr-instant { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(0, 0, 0, .65); color: #fff; font: 13px -apple-system, "Segoe UI", Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; opacity: 0; transition: opacity .4s ease; cursor: pointer; }
.bbr-instant:hover, .bbr-instant:focus-visible { opacity: 1; }
.bbr-album:hover .bbr-instant { opacity: 1; }
@media (hover: hover) and (min-width: 601px) {
  .bbr-matrix:hover .bbr-acell { opacity: .4; filter: brightness(.85); }
  .bbr-matrix .bbr-acell:hover { opacity: 1; filter: none; position: relative; z-index: 2; }
  .bbr-acell:hover .bbr-album { transform: scale(1.06); box-shadow: 0 30px 60px rgba(0, 0, 0, .45); }
}
@media (hover: none) { /* touch screens have no hover: show a small always-visible play button instead of the veil */
  .bbr-instant { inset: auto 8px 8px auto; width: auto; padding: 8px 12px; border-radius: 999px; opacity: 1; letter-spacing: .08em; font-size: 12px; }
}
.bbr-savelink { max-width: 1200px; margin: 26px auto 0; text-align: center; font: 600 15px -apple-system, "Segoe UI", Arial, sans-serif; }
.bbr-savelink a { color: var(--accent); }
.bbr-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; padding: 8px 12px 10px; background: rgba(10, 9, 8, .96); border-top: 1px solid #2a231b; }
.bbr-dock[hidden] { display: none; }
.bbr-dock #bbr-master { max-width: 900px; margin: 0 auto; }
.bbr-dock iframe { width: 100%; }
.bbr-dock-x { position: absolute; top: 2px; right: 8px; width: 32px; height: 32px; border: 0; background: none; color: #fff; font-size: 26px; line-height: 1; opacity: .7; cursor: pointer; }
.bbr-dock-x:hover, .bbr-dock-x:focus-visible { opacity: 1; }
html.bbr-docked body { padding-bottom: 170px; }

/* ===== Forum entry points ===== */
.bbr-gate { max-width: 800px; margin: 35px auto; padding: 24px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; text-align: center; font-family: -apple-system, "Segoe UI", Arial, sans-serif; box-sizing: border-box; }
.bbr-gate-tag { display: inline-block; padding: 3px 10px; border-radius: 20px; background: #ef4444; color: #fff; font-size: .65rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.bbr-gate h3 { margin: 10px 0 6px; color: #0f172a; font-size: 1.4rem; font-weight: 800; }
.bbr-gate p { max-width: 600px; margin: 0 auto 18px; color: #475569; font-size: .95rem; line-height: 1.5; }
.bbr-gate-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.bbr-gbtn { display: block; padding: 12px; border-radius: 6px; background: #0f172a; color: #fff !important; font-size: .85rem; font-weight: 700; text-decoration: none; }
.bbr-gbtn:hover, .bbr-gbtn:focus-visible { background: #1e293b; }
.bbr-gate-btns .bbr-gbtn:nth-child(2) { background: #059669; }
.bbr-gate-btns .bbr-gbtn:nth-child(3) { background: #2563eb; }
.bbr-live { padding: 16px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; font-family: -apple-system, "Segoe UI", Arial, sans-serif; color: #0f172a; }
.bbr-live h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: #475569; }
.bbr-livedot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; }
.bbr-live-list { list-style: none; margin: 0; padding: 0; }
.bbr-live-list li { border-top: 1px solid #eef2f6; }
.bbr-live-list a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; color: inherit; text-decoration: none; font-size: .9rem; line-height: 1.35; }
.bbr-live-list a:hover span { color: #b3261e; }
.bbr-live-list time { flex: none; color: #64748b; font-size: .75rem; padding-top: 2px; }
.bbr-live-empty { margin: 0 0 10px; color: #64748b; font-size: .9rem; }
.bbr-live-more { font-weight: 700; font-size: .85rem; color: #b3261e; text-decoration: none; }
.bbr-gbtn-head { display: inline-block; padding: 8px 14px; }

/* Volume pages: keep the headline (a dashboard field) and make it readable on the dark page */
body.bbr-volume-page .entry-title, body.bbr-volume-page .wp-block-post-title, body.bbr-volume-page .page-title { display: block !important; color: #f0ebe1; text-align: center; font-family: Georgia, "Times New Roman", serif; margin: 28px auto 18px; max-width: 1200px; }
body.bbr-volume-page .wp-block-post-content, body.bbr-volume-page .entry-content { max-width: none; }
body.bbr-volume-page .wp-block-post-author-name, body.bbr-volume-page .wp-block-post-author, body.bbr-volume-page .wp-block-post-date, body.bbr-volume-page .wp-block-post-terms, body.bbr-volume-page .entry-meta { display: none !important; }

/* ===== Site header: black logo bar + the white stripe menu from the Blogger site (desktop); logo bar + hamburger + search (phones) ===== */
/* the theme's own header is hidden by a rule printed with this header (includes/header.php), so it stays if ours is not printed */
.bbr-site { position: relative; z-index: 1000; background: #000; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.bbr-site *, .bbr-site *::before, .bbr-site *::after { box-sizing: border-box; }
.bbr-ico { display: block; flex: none; }
.bbr-brand { padding: 34px 16px 24px; text-align: center; }
.bbr-logo { color: #e8eefc; font: 600 46px/1.1 Montserrat, "Segoe UI", Arial, sans-serif; letter-spacing: .2px; text-decoration: none; }
.bbr-logo:hover, .bbr-logo:focus-visible { color: #fff; }
.bbr-tagline { margin: 8px 0 0; color: #a9b1bf; font: 600 15px/1.3 Georgia, "Times New Roman", serif; }
.bbr-stripe { position: relative; background: #fff; border-top: 1px solid #cbd5e1; border-bottom: 1px solid #94a3b8; box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .55); }
.bbr-stripe > ul { display: flex; flex-wrap: nowrap; justify-content: center; max-width: 1280px; margin: 0 auto; padding: 0; list-style: none; white-space: nowrap; }
.bbr-stripe li { position: relative; margin: 0; }
.bbr-sbtn { display: inline-flex; align-items: center; gap: 4px; height: 52px; padding: 0 15px; border: 0; border-right: 1px solid #e2e8f0; border-radius: 0; background: #fff;
  color: #0f172a; font: 700 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: .5px; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.bbr-stripe > ul > li:first-child > .bbr-sbtn { border-left: 1px solid #e2e8f0; }
.bbr-sbtn .bbr-ico { width: 15px; height: 15px; }
.bbr-home-btn, .bbr-find { padding: 0 14px; }
.bbr-home-btn .bbr-ico, .bbr-find .bbr-ico { width: 18px; height: 18px; }
.bbr-sbtn:hover, .bbr-sbtn:focus-visible, .bbr-has-sub.is-open > .bbr-sbtn, .bbr-find[aria-expanded="true"] { background: #f1f5f9; color: #0f172a; }
.bbr-sbtn:focus-visible { outline: 2px solid #0f172a; outline-offset: -2px; }
.bbr-sub { display: none; position: absolute; top: 100%; left: 0; z-index: 1001; min-width: 240px; max-height: 70vh; overflow-y: auto; margin: 0; padding: 0; list-style: none;
  background: #fff; border: 1px solid #cbd5e1; box-shadow: 0 6px 12px rgba(15, 23, 42, .15); white-space: normal; }
.bbr-stripe > ul > li:nth-last-child(-n+4) > .bbr-sub { left: auto; right: 0; }
.bbr-sub-wide { min-width: 360px; }   /* Popular Posts: long titles */
@media (hover: hover) { .bbr-has-sub:hover > .bbr-sub { display: block; } }
.bbr-has-sub.is-open > .bbr-sub { display: block; }
.bbr-sub a { display: block; padding: 11px 16px; border-bottom: 1px solid #f1f5f9; background: #fff; color: #334155; font: 500 12px/1.35 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; text-decoration: none; }
.bbr-sub li:last-child a { border-bottom: 0; }
.bbr-sub a:hover, .bbr-sub a:focus-visible { background: #0f172a; color: #fff; }
.bbr-findbox { padding: 12px 16px; background: #fff; border-bottom: 1px solid #cbd5e1; }
.bbr-findbox[hidden], .bbr-drawer[hidden] { display: none; }
.bbr-search { display: flex; gap: 8px; max-width: 640px; margin: 0 auto; }
.bbr-search input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; color: #0f172a; font: 16px -apple-system, "Segoe UI", Arial, sans-serif; }
.bbr-search button { height: 40px; padding: 0 16px; border: 0; border-radius: 4px; background: #0f172a; color: #fff; font: 700 13px -apple-system, "Segoe UI", Arial, sans-serif; letter-spacing: .5px; text-transform: uppercase; cursor: pointer; }
.bbr-mbar { display: none; }
.bbr-burger, .bbr-mfind { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.bbr-burger .bbr-ico, .bbr-mfind .bbr-ico { width: 24px; height: 24px; }
.bbr-drawer { position: fixed; top: 56px; left: 0; right: 0; bottom: 0; z-index: 1002; overflow-y: auto; padding: 4px 0 28px; background: #fff; }
.bbr-drawer ul { margin: 0; padding: 0; list-style: none; }
.bbr-drawer a, .bbr-drawer button { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 15px 20px; border: 0; border-bottom: 1px solid #e2e8f0; background: none;
  color: #0f172a; font: 700 13px/1.3 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: .6px; text-transform: uppercase; text-align: left; text-decoration: none; cursor: pointer; }
.bbr-drawer button[aria-expanded="true"] .bbr-ico { transform: rotate(180deg); }
.bbr-drawer ul ul a { padding-left: 34px; background: #f8fafc; color: #334155; font-weight: 500; letter-spacing: 0; text-transform: none; }
.bbr-drawer .bbr-ad { margin: 18px 16px 0; }
@media (max-width: 1099px) {
  .bbr-brand, .bbr-stripe { display: none; }
  .bbr-site { position: sticky; top: 0; }
  .bbr-mbar { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; height: 56px; padding: 0 4px; border-bottom: 1px solid #1f1f1f; }
  .bbr-mbar .bbr-logo { font-size: clamp(18px, 5.6vw, 26px); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 1100px) and (max-width: 1279px) { .bbr-sbtn { padding: 0 9px; letter-spacing: .2px; font-size: 11.5px; } .bbr-home-btn, .bbr-find { padding: 0 11px; } }

/* ===== Landing page: black screen, three quiet windows (phones: pinned video + review stream) ===== */
body.bbr-dark { background: #000; }
.bbr-lib, .bbr-room { --bg: #000; }
.bbr-home2 { background: #000; color: #f0ebe1; font: 16px/1.5 Georgia, "Times New Roman", serif; }
.bbr-home2 *, .bbr-home2 *::before, .bbr-home2 *::after { box-sizing: border-box; }
.bbr-wins { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.78fr) minmax(0, 1fr); gap: 28px; align-items: start; max-width: 1320px; margin: 0 auto; padding: 48px 28px 64px; }
.bbr-win { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bbr-home2 .bbr-wlabel { margin: 0; color: #8d8578; font: 600 12px/1 -apple-system, "Segoe UI", Arial, sans-serif; letter-spacing: .24em; text-transform: uppercase; text-align: center; }
.bbr-wmedia { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; background: #111; box-shadow: 0 0 0 1px #1d1d1d, 0 24px 60px rgba(0, 0, 0, .7); }
.bbr-win-video .bbr-wmedia { aspect-ratio: 16 / 9; }
.bbr-cover { display: block; height: 100%; color: #fff; text-decoration: none; }
.bbr-home2 .bbr-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.bbr-home2 .bbr-cover:hover img, .bbr-home2 .bbr-cover:focus-visible img { transform: scale(1.04); }
.bbr-cover-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); font: 700 16px/1.3 Georgia, serif;
  opacity: 0; transition: opacity .3s; }
.bbr-cover-cap em, .bbr-show-cap em { display: block; margin-bottom: 3px; color: #e2a93b; font: 600 11px/1.2 -apple-system, "Segoe UI", Arial, sans-serif; font-style: normal; letter-spacing: .14em; text-transform: uppercase; }
.bbr-cover:hover .bbr-cover-cap, .bbr-cover:focus-visible .bbr-cover-cap { opacity: 1; }
.bbr-hot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; color: #5f584e; font: 600 12px/1.4 -apple-system, "Segoe UI", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.bbr-hot a { color: #d9d2c5; text-decoration: none; }
.bbr-hot a:hover, .bbr-hot a:focus-visible { color: #e2a93b; }
.bbr-qshuffle { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; height: 100%; }
.bbr-qshuffle a { display: block; overflow: hidden; background: #141414; }
.bbr-home2 .bbr-qshuffle img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .4s ease, transform .4s ease; }
.bbr-home2 .bbr-qshuffle a.is-swap img { opacity: 0; transform: scale(.97); }
.bbr-home2 .bbr-qshuffle a:hover img, .bbr-home2 .bbr-qshuffle a:focus-visible img { transform: scale(1.05); }

/* the featured screen (also pinned on phones) */
.bbr-show { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; }
.bbr-show-screen { position: absolute; inset: 0; }
.bbr-show-slide { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #000; color: #fff; text-align: left; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 1s; }
.bbr-show-slide.is-on { opacity: 1; visibility: visible; }
.bbr-show .bbr-show-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.34); opacity: .9; }   /* YouTube previews carry black bars: crop them */
.bbr-show-slide:hover img, .bbr-show-slide:focus-visible img { opacity: 1; }
.bbr-show-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 16px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); font: 700 15px/1.3 Georgia, serif; }
.bbr-show-dots { position: absolute; right: 12px; top: 12px; display: flex; gap: 6px; }
.bbr-show-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.bbr-show-dots span.is-on { background: #fff; }
.bbr-show iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bbr-show.is-playing .bbr-show-dots { display: none; }
.bbr-show-pin { aspect-ratio: 16 / 9; height: auto; }

/* phones: the white Latest Additions stream replaces the three windows */
.bbr-mhome { display: none; }
.bbr-phone-only { display: none; }
@media (max-width: 899px) {
  .bbr-wins { display: none; }
  .bbr-mhome { display: block; }
  .bbr-phone-only { display: block; }
  .bbr-show-pin { position: sticky; top: 56px; z-index: 50; }
  .bbr-mag { display: block; }                      /* sticky needs a block parent, not a grid row */
  .bbr-mag > .bbr-show-pin { width: auto; margin: -16px -16px 16px; }
  .bbr-mag > .bbr-main + .bbr-side { margin-top: 16px; }
}
/* review pages: white sheet + ad column (computers); on phones only the forum box stays, under the review */
body.bbr-read-page .entry-content, body.bbr-read-page .wp-block-post-content, body.bbr-read-page .post-content { max-width: 1180px; padding: 0; background: none; box-shadow: none; }
.bbr-read { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; width: 100%; max-width: 1180px !important; }   /* block themes cap content blocks at 645px */
.bbr-read-main { min-width: 0; padding: 28px clamp(16px, 5vw, 56px) 40px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.bbr-read-side .bbr-ad { display: none; }
.bbr-read-side .bbr-sidevideo { display: none; }
.bbr-read-side .bbr-live { font-size: 16px; line-height: 1.4; }
@media (min-width: 1000px) {
  .bbr-read { grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; }
  .bbr-read-side { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
  .bbr-read-side .bbr-ad, .bbr-read-side .bbr-sidevideo { display: block; }
  .bbr-read-side .bbr-ad { min-height: 250px; margin-bottom: 16px; }
}
/* Divi's own sidebar and narrow column on single posts */
body.bbr-read-page #sidebar { display: none; }
body.bbr-read-page #left-area { width: 100% !important; padding-right: 0 !important; float: none; }
body.bbr-read-page #main-content .container::before { display: none; }

@media (min-width: 900px) and (max-width: 1099px) { .bbr-wins { gap: 18px; padding: 32px 18px 48px; } }

/* ===== Daily Reviews additions ===== */
.bbr-sidevideo { margin-bottom: 16px; }
.bbr-sidevideo .bbr-yt { border-radius: 6px; }
.bbr-none { margin: 22px 0; color: var(--muted); }
.bbr-sort .bbr-allcols { float: left; margin: 0; border: 0; padding: 2px 0; color: var(--accent); }

/* ===== Video Library: rooms, one large screen, thumbnail strip ===== */
.bbr-stage { max-width: 1060px; margin: 0 auto; }
.bbr-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: #000; box-shadow: 0 0 0 1px #1d1d1d, 0 25px 50px -12px rgba(0, 0, 0, .8); }
.bbr-screen-play, .bbr-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.bbr-screen .bbr-screen-play img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.34); opacity: .9; }
.bbr-screen-play:hover img, .bbr-screen-play:focus-visible img { opacity: 1; }
.bbr-screen .bbr-play { width: 84px; height: 58px; margin: -29px 0 0 -42px; border-radius: 14px; }
.bbr-screen .bbr-play::after { left: 33px; top: 16px; border-width: 13px 0 13px 22px; }
.bbr-stage-info { padding: 18px 2px 0; color: #cbd5e1; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.bbr-vroom .bbr-stage-info h2 { margin: 0; color: #f8f4ec; font: 700 26px/1.25 Georgia, "Times New Roman", serif; }
.bbr-s-desc { margin: 10px 0 0; font-size: 15px; line-height: 1.6; }
.bbr-s-desc[hidden] { display: none; }
.bbr-strip { display: flex; align-items: center; gap: 10px; }
.bbr-strip-track { display: flex; flex: 1; gap: 14px; min-width: 0; margin: 0; padding: 4px 2px 12px; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #3a3128 transparent; }
.bbr-strip-track li { flex: 0 0 210px; scroll-snap-align: start; }
.bbr-thumb { display: grid; gap: 8px; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.bbr-thumb .bbr-vthumb { border-radius: 4px; }
.bbr-thumb .bbr-vthumb img { transform: none; }
.bbr-thumb[aria-current] .bbr-vthumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.bbr-thumb[aria-current] .bbr-vthumb img { opacity: 1; }
.bbr-thumb .bbr-vtitle { font-size: 14px; line-height: 1.3; }
.bbr-thumb:hover .bbr-vtitle, .bbr-thumb:focus-visible .bbr-vtitle { color: var(--accent); }
.bbr-strip-btn { flex: none; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--text); font: 26px/1 Georgia, serif; cursor: pointer; }
.bbr-strip-btn:hover, .bbr-strip-btn:focus-visible { border-color: var(--accent); color: var(--accent); }
.bbr-strip-btn[hidden] { display: none; }
@media (max-width: 699px) { .bbr-strip-btn { display: none; } .bbr-strip-track li { flex-basis: 62%; } .bbr-vroom .bbr-stage-info h2 { font-size: 21px; } }

/* ===== Listening Room gateway: scrolling years, four covers, the year's playlist ===== */
.bbr-gateway { grid-template-columns: minmax(0, 1fr); grid-template-areas: "player" "years" "quad"; gap: 18px; }
.bbr-gplayer { grid-area: player; }
.bbr-yearaxis { grid-area: years; }
.bbr-quadwrap { grid-area: quad; display: grid; gap: 14px; }
.bbr-gplay { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border: 0; border-radius: 999px; background: #1db954; color: #04130a; font: 700 14px -apple-system, "Segoe UI", Arial, sans-serif; cursor: pointer; }
.bbr-gplay:hover, .bbr-gplay:focus-visible { background: #1ed760; }
.bbr-gicon { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent currentColor; }
.bbr-gplay[hidden], .bbr-gnone[hidden] { display: none; }
.bbr-gplay:not([hidden]) ~ iframe { margin-top: 10px; }   /* another year's playlist offered above the one playing */
.bbr-gnone { margin: 0; color: var(--muted); font: 14px -apple-system, "Segoe UI", Arial, sans-serif; }
.bbr-gplayer iframe { display: block; width: 100%; height: 152px; border: 0; border-radius: 12px; }
.bbr-gopen { justify-self: start; color: var(--accent); font: 700 14px -apple-system, "Segoe UI", Arial, sans-serif; letter-spacing: .06em; }
.bbr-gopen:hover, .bbr-gopen:focus-visible { text-decoration: underline; }
.bbr-yearrow { scroll-snap-align: start; }
@media (max-width: 899px) {
  .bbr-yearaxis { flex-direction: row; gap: 4px; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .bbr-yearrow { flex: none; padding: 10px 12px; border-bottom: 2px solid transparent; }
  .bbr-yearrow.is-on { border-bottom-color: var(--accent); }
  .bbr-ynum { min-width: 0; font-size: 26px; }
  .bbr-ymeta { display: none; }
  .bbr-yearaxis:hover .bbr-yearrow:not(:hover) { opacity: .55; }
}
@media (min-width: 900px) {
  .bbr-gateway { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "years quad" "years player"; gap: 22px 56px; }
  .bbr-gplayer { align-self: start; }
  .bbr-yearaxis { max-height: 640px; overflow-y: auto; padding-right: 10px; scroll-snap-type: y proximity; scrollbar-width: thin; scrollbar-color: #3a3128 transparent;
    -webkit-mask-image: linear-gradient(#000 calc(100% - 56px), transparent); mask-image: linear-gradient(#000 calc(100% - 56px), transparent); }
  .bbr-quad { position: static; }
}
.bbr-playlists { margin-top: 8px; }
.bbr-room.bbr-playlists .bbr-libhead { margin: 0 0 16px; font-size: 13px; }

/* one volume: its playlist at the top */
.bbr-vplayer { max-width: 900px; margin: 0 auto 26px; }
.bbr-vplayer iframe { display: block; width: 100%; height: 152px; border: 0; border-radius: 12px; }

/* Theme spacing around our full pages (block themes put 70px above the content; Divi sections carry their own) */
body.bbr-dark main > .wp-block-group, body.bbr-light main > .wp-block-group { padding-top: 0 !important; }
body.bbr-dark .wp-block-post-content, body.bbr-light .wp-block-post-content { margin-top: 0; }
@media (max-width: 899px) {   /* phones: edge to edge, whatever padding the theme adds */
  .bbr-home2, .bbr-mag, .bbr-lib, .bbr-room { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; }   /* block themes force margin:auto !important on content */
}

/* ===== Nov 5 notes: billboard ad, full-screen video, video rows, Listening Room selector and ad column ===== */
.bbr-billboard { padding: 10px 16px; background: #000; text-align: center; }
.bbr-billboard .bbr-ad { display: flex; justify-content: center; align-items: center; max-width: 970px; min-height: 90px; margin: 0 auto; overflow: hidden; }
@media (max-width: 899px) { .bbr-billboard { padding: 6px 8px; } .bbr-billboard .bbr-ad { min-height: 50px; } }

.bbr-full { position: fixed; inset: 0; z-index: 100000; display: flex; justify-content: center; align-items: center; padding-top: 56px; background: #000; }
.bbr-full[hidden] { display: none; }
.bbr-full-frame { position: relative; width: min(100vw, calc((100vh - 56px) * 16 / 9)); aspect-ratio: 16 / 9; }
.bbr-full-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bbr-full-x { position: absolute; top: 9px; right: 14px; display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 10px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px;
  background: rgba(255, 255, 255, .08); color: #fff; font: 600 13px -apple-system, "Segoe UI", Arial, sans-serif; cursor: pointer; }
.bbr-full-x span { font: 300 28px/1 -apple-system, "Segoe UI", Arial, sans-serif; }
.bbr-full-x small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.bbr-full-x:hover, .bbr-full-x:focus-visible { background: rgba(255, 255, 255, .2); outline: 2px solid #dfe7f2; outline-offset: 2px; }

/* room buttons under the large screen, in the light blue-silver of the logo; one carousel row per room */
.bbr-rooms { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1060px; margin: 26px auto 4px; }
.bbr-rooms a { padding: 9px 20px; border: 1px solid #b9c6d8; border-radius: 999px; background: linear-gradient(#f3f6fb, #d3deeb); color: #0f172a;
  font: 700 12px/1.2 -apple-system, "Segoe UI", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; }
.bbr-rooms a:hover, .bbr-rooms a:focus-visible { background: #fff; border-color: #fff; color: #0f172a; }
.bbr-rooms a[aria-current] { background: #e8eefc; border-color: #fff; box-shadow: 0 0 0 3px rgba(232, 238, 252, .35); }
.bbr-vrow { max-width: 1060px; margin: 30px auto 0; scroll-margin-top: 24px; }
.bbr-vrow-head { margin: 0 0 12px; color: #dfe7f2; font: 700 13px/1.2 -apple-system, "Segoe UI", Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.bbr-vrow-head span { margin-left: 6px; color: #7d8696; font-weight: 600; letter-spacing: 0; }
.bbr-thumb .bbr-play { transform: scale(.6); opacity: 0; transition: opacity .15s; }
.bbr-thumb:hover .bbr-play, .bbr-thumb:focus-visible .bbr-play { opacity: 1; }
.bbr-thumb:focus-visible { outline: 2px solid #dfe7f2; outline-offset: 4px; border-radius: 6px; }
@media (max-width: 699px) { .bbr-rooms a { padding: 8px 14px; } }

/* Listening Room: Best Of / Audiophile Standards selector, ad column on the right */
.bbr-lroom { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.bbr-lside { display: none; }
@media (min-width: 1100px) {
  .bbr-lroom { grid-template-columns: minmax(0, 1fr) 300px; }
  .bbr-lside { display: block; }
  .bbr-lside .bbr-ad { position: sticky; top: 16px; min-height: 600px; }
}
.bbr-ltabs { display: flex; gap: 4px; margin: 0 0 26px; border-bottom: 1px solid var(--line); }
.bbr-ltabs button { margin-bottom: -1px; padding: 12px 18px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted);
  font: 700 13px/1.2 -apple-system, "Segoe UI", Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.bbr-ltabs button:hover, .bbr-ltabs button:focus-visible { color: #e8eefc; }
.bbr-ltabs button[aria-selected="true"] { border-bottom-color: #e8eefc; color: #e8eefc; }
[role="tabpanel"][hidden] { display: none; }
@media (max-width: 899px) { .bbr-ltabs button { flex: 1; padding: 12px 6px; font-size: 12px; letter-spacing: .08em; } }

/* phones: the home page is the white Latest Additions stream */
@media (max-width: 899px) {
  body.bbr-home-page { background: #efefef; }
  .bbr-home2 { background: none; }
}
.bbr-morebtn { display: block; margin: 18px 0 22px; text-align: center; }

/* Divi: every page of ours uses the whole width. Divi's widget sidebar and its narrow column stay out of the way (they are hidden, not changed). */
body.bbr-dark #sidebar, body.bbr-light #sidebar, body.bbr-sheet #sidebar { display: none; }
body.bbr-dark #left-area, body.bbr-light #left-area, body.bbr-sheet #left-area { width: 100% !important; padding: 0 !important; float: none; }
body.bbr-dark #main-content .container::before, body.bbr-light #main-content .container::before, body.bbr-sheet #main-content .container::before { display: none; }
body.bbr-dark #main-content .container, body.bbr-light #main-content .container { width: 100%; max-width: none; padding: 0 !important; }
body.bbr-dark #main-content, body.bbr-light #main-content, body.bbr-sheet #main-content { background: transparent; }
body.bbr-dark #content-area, body.bbr-light #content-area { display: block; }