/* bsxc, editorial magazine archetype */

:root {
 --bsxc-bg: #FFFEF9;
 --bsxc-fg: #1A1614;
 --bsxc-muted: #6E5B47;
 --bsxc-accent: #8B0000;
 --bsxc-border: #E5DCC9;
 --bsxc-rule: #C9BFAB;
 --bsxc-paper: #FAF5EA;

 --bsxc-font-display: 'Fraunces', 'Georgia', serif;
 --bsxc-font-body: 'Source Sans 3', system-ui, sans-serif;

 --bsxc-content-width: 720px;
 --bsxc-wide-width: 1040px;
}

* { box-sizing: border-box; }

html, body {
 margin: 0;
 padding: 0;
 font-family: var(--bsxc-font-body);
 font-size: 18px;
 line-height: 1.6;
 color: var(--bsxc-fg);
 background: var(--bsxc-bg);
 -webkit-font-smoothing: antialiased;
}

a { color: var(--bsxc-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

.bsxc-container {
 max-width: var(--bsxc-content-width);
 margin: 0 auto;
 padding: 0 24px;
}

/* === HEADER === */
.bsxc-header {
 background: var(--bsxc-bg);
 border-bottom: 1px solid var(--bsxc-rule);
 padding: 20px 0;
 position: sticky;
 top: 0;
 z-index: 10;
}
.bsxc-header-inner {
 max-width: var(--bsxc-wide-width);
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 24px;
 flex-wrap: wrap;
}
.bsxc-brand {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 font-family: var(--bsxc-font-display);
 font-weight: 800;
 font-size: 1.05rem;
 letter-spacing: -0.01em;
 color: var(--bsxc-fg);
 text-decoration: none;
}
.bsxc-brand-mark {
 display: inline-flex;
 width: 32px;
 height: 32px;
 align-items: center;
 justify-content: center;
 background: var(--bsxc-fg);
 color: var(--bsxc-bg);
 font-family: var(--bsxc-font-display);
 font-style: italic;
 font-weight: 600;
 border-radius: 50%;
 font-size: 1rem;
}
.bsxc-nav {
 display: flex;
 gap: 24px;
 flex-wrap: wrap;
 font-size: 0.95rem;
}
.bsxc-nav a {
 color: var(--bsxc-fg);
 text-decoration: none;
 border-bottom: 1px solid transparent;
 padding-bottom: 2px;
 transition: border-color 120ms ease;
}
.bsxc-nav a:hover { border-bottom-color: var(--bsxc-accent); }

/* === RULE === */
.bsxc-rule {
 max-width: var(--bsxc-content-width);
 margin: 56px auto;
 border: 0;
 border-top: 1px solid var(--bsxc-rule);
}

/* === HERO === */
.bsxc-hero {
 padding: 80px 24px 64px;
 text-align: left;
}
.bsxc-eyebrow {
 font-family: var(--bsxc-font-body);
 font-size: 0.78rem;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--bsxc-muted);
 margin: 0 0 24px;
 font-weight: 600;
}
.bsxc-eyebrow-accent { color: var(--bsxc-accent); }

.bsxc-display {
 font-family: var(--bsxc-font-display);
 font-style: italic;
 font-weight: 600;
 font-size: clamp(2.5rem, 5.5vw, 4.5rem);
 line-height: 1.05;
 letter-spacing: -0.025em;
 margin: 0 0 28px;
}

.bsxc-deck {
 font-family: var(--bsxc-font-display);
 font-size: 1.35rem;
 font-weight: 400;
 line-height: 1.55;
 color: var(--bsxc-fg);
 margin: 0 0 32px;
 max-width: 620px;
}

.bsxc-byline {
 font-size: 0.85rem;
 color: var(--bsxc-muted);
 letter-spacing: 0.02em;
 margin: 0;
}

/* === TOP PICK === */
.bsxc-toppick {
 background: var(--bsxc-paper);
 padding: 56px 40px;
 border-radius: 2px;
 border: 1px solid var(--bsxc-border);
}
.bsxc-toppick-title {
 font-family: var(--bsxc-font-display);
 font-weight: 800;
 font-size: clamp(2rem, 4vw, 3rem);
 line-height: 1.05;
 margin: 8px 0 16px;
 letter-spacing: -0.02em;
}
.bsxc-toppick-deck {
 font-family: var(--bsxc-font-display);
 font-style: italic;
 font-size: 1.2rem;
 line-height: 1.55;
 margin: 0 0 32px;
 max-width: 580px;
 color: var(--bsxc-fg);
}
.bsxc-toppick-row {
 display: grid;
 grid-template-columns: auto 1fr auto;
 gap: 32px;
 align-items: center;
 padding-top: 24px;
 border-top: 1px solid var(--bsxc-border);
}
.bsxc-score-block {
 display: flex;
 align-items: baseline;
 gap: 4px;
 font-family: var(--bsxc-font-display);
}
.bsxc-score-num {
 font-size: 3rem;
 font-weight: 800;
 color: var(--bsxc-accent);
 line-height: 1;
 letter-spacing: -0.02em;
}
.bsxc-score-out {
 font-size: 1.2rem;
 color: var(--bsxc-muted);
}
.bsxc-toppick-meta {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 18px;
 font-size: 0.92rem;
}
.bsxc-toppick-meta > div {
 display: flex;
 flex-direction: column;
 gap: 2px;
}
.bsxc-meta-label {
 font-size: 0.72rem;
 text-transform: uppercase;
 letter-spacing: 0.12em;
 color: var(--bsxc-muted);
 font-weight: 600;
}
.bsxc-meta-value {
 font-weight: 500;
}
.bsxc-cta {
 display: inline-block;
 padding: 12px 22px;
 background: var(--bsxc-fg);
 color: var(--bsxc-bg);
 text-decoration: none;
 font-weight: 600;
 font-size: 0.95rem;
 border-radius: 2px;
 white-space: nowrap;
 transition: background 120ms ease;
}
.bsxc-cta:hover {
 background: var(--bsxc-accent);
}

@media (max-width: 720px) {
 .bsxc-toppick {
 padding: 32px 24px;
 }
 .bsxc-toppick-row {
 grid-template-columns: 1fr;
 gap: 24px;
 }
 .bsxc-toppick-meta {
 grid-template-columns: 1fr 1fr;
 }
}

/* === SECTION TITLE === */
.bsxc-section-title {
 font-family: var(--bsxc-font-display);
 font-weight: 800;
 font-size: clamp(1.7rem, 3vw, 2.4rem);
 line-height: 1.1;
 letter-spacing: -0.02em;
 margin: 0 0 16px;
}
.bsxc-section-deck {
 font-family: var(--bsxc-font-display);
 font-style: italic;
 font-size: 1.15rem;
 color: var(--bsxc-muted);
 margin: 0 0 40px;
 max-width: 580px;
 line-height: 1.55;
}

/* === REVIEWS LIST === */
.bsxc-review-list {
 list-style: none;
 padding: 0;
 margin: 0;
}
.bsxc-review {
 display: grid;
 grid-template-columns: 64px 1fr;
 gap: 24px;
 padding: 32px 0;
 border-top: 1px solid var(--bsxc-rule);
}
.bsxc-review:last-child { border-bottom: 1px solid var(--bsxc-rule); }
.bsxc-review-rank {
 font-family: var(--bsxc-font-display);
 font-style: italic;
 font-weight: 400;
 font-size: 2.5rem;
 color: var(--bsxc-muted);
 line-height: 1;
}
.bsxc-review-title {
 font-family: var(--bsxc-font-display);
 font-weight: 700;
 font-size: 1.6rem;
 line-height: 1.15;
 margin: 0 0 12px;
 letter-spacing: -0.015em;
}
.bsxc-review-title a {
 color: var(--bsxc-fg);
 text-decoration: none;
}
.bsxc-review-title a:hover {
 color: var(--bsxc-accent);
}
.bsxc-review-deck {
 font-family: var(--bsxc-font-display);
 font-style: italic;
 font-size: 1.08rem;
 line-height: 1.55;
 margin: 0 0 16px;
 color: var(--bsxc-fg);
 max-width: 540px;
}
.bsxc-review-meta {
 font-size: 0.88rem;
 color: var(--bsxc-muted);
 margin: 0;
}
.bsxc-review-meta strong {
 color: var(--bsxc-fg);
}

/* === PULLQUOTE === */
.bsxc-pullquote {
 text-align: center;
 padding: 24px 24px;
}
.bsxc-pullquote blockquote {
 margin: 0;
 border-left: none;
 padding: 0;
}
.bsxc-pullquote p {
 font-family: var(--bsxc-font-display);
 font-style: italic;
 font-weight: 400;
 font-size: clamp(1.4rem, 3vw, 2rem);
 line-height: 1.35;
 letter-spacing: -0.01em;
 color: var(--bsxc-fg);
 max-width: 640px;
 margin: 0 auto 20px;
}
.bsxc-pullquote cite {
 font-style: normal;
 font-size: 0.85rem;
 color: var(--bsxc-muted);
 letter-spacing: 0.02em;
}

/* === METHODOLOGY === */
.bsxc-method-body {
 font-family: var(--bsxc-font-display);
 font-size: 1.18rem;
 line-height: 1.65;
 color: var(--bsxc-fg);
 max-width: 620px;
 margin: 0 0 20px;
}
.bsxc-link-arrow {
 display: inline-block;
 font-family: var(--bsxc-font-body);
 font-weight: 600;
 font-size: 0.98rem;
 color: var(--bsxc-accent);
}

/* === BRAND HERO === */
.bsxc-brand-hero {
 padding: 64px 24px 48px;
}
.bsxc-brand-name {
 font-family: var(--bsxc-font-display);
 font-weight: 800;
 font-size: clamp(3rem, 6vw, 5rem);
 line-height: 1;
 letter-spacing: -0.03em;
 margin: 8px 0 24px;
}
.bsxc-brand-meta-row {
 display: grid;
 grid-template-columns: auto 1fr;
 gap: 48px;
 align-items: center;
 padding-top: 24px;
 border-top: 1px solid var(--bsxc-rule);
}
.bsxc-brand-hero .bsxc-toppick-meta {
 grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 720px) {
 .bsxc-brand-meta-row {
 grid-template-columns: 1fr;
 gap: 24px;
 }
 .bsxc-brand-hero .bsxc-toppick-meta {
 grid-template-columns: 1fr 1fr;
 }
}

/* === ARTICLE BODY === */
.bsxc-article {
 font-family: var(--bsxc-font-display);
 font-size: 1.18rem;
 line-height: 1.7;
}
.bsxc-article p {
 margin: 0 0 24px;
}
.bsxc-article a {
 color: var(--bsxc-accent);
}
.bsxc-article strong { font-weight: 700; }
.bsxc-article em { font-style: italic; }
.bsxc-h2 {
 font-family: var(--bsxc-font-display);
 font-style: italic;
 font-weight: 600;
 font-size: 1.85rem;
 line-height: 1.2;
 margin: 48px 0 20px;
 letter-spacing: -0.015em;
}
.bsxc-lead {
 font-size: 1.32rem;
 line-height: 1.6;
}
.bsxc-dropcap .bsxc-drop {
 float: left;
 font-family: var(--bsxc-font-display);
 font-weight: 800;
 font-size: 5.5rem;
 line-height: 0.85;
 margin: 6px 12px 0 0;
 color: var(--bsxc-accent);
 font-style: normal;
}

.bsxc-byline-block {
 padding: 16px 24px;
}

/* === FOOTER === */
.bsxc-footer {
 margin-top: 80px;
 padding: 48px 0 56px;
 border-top: 1px solid var(--bsxc-rule);
 background: var(--bsxc-paper);
}
.bsxc-footer-mast {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-bottom: 16px;
 flex-wrap: wrap;
}
.bsxc-footer-tag {
 font-family: var(--bsxc-font-display);
 font-style: italic;
 color: var(--bsxc-muted);
 font-size: 0.95rem;
}
.bsxc-footer-nav {
 display: flex;
 gap: 20px;
 font-size: 0.9rem;
 margin-bottom: 18px;
 flex-wrap: wrap;
}
.bsxc-footer-nav a {
 color: var(--bsxc-fg);
 text-decoration: none;
 border-bottom: 1px solid var(--bsxc-rule);
 padding-bottom: 2px;
}
.bsxc-footer-fine {
 font-size: 0.82rem;
 color: var(--bsxc-muted);
 margin: 0;
}
.bsxc-footer-cols {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 28px;
 margin: 20px 0 24px;
}
@media (max-width: 720px) {
 .bsxc-footer-cols { grid-template-columns: 1fr; gap: 18px; }
}
.bsxc-footer-col-title {
 font-family: var(--bsxc-font-display);
 font-size: 0.95rem;
 font-weight: 700;
 margin: 0 0 10px;
 color: var(--bsxc-fg);
}
.bsxc-footer-col a {
 display: block;
 font-size: 0.9rem;
 color: var(--bsxc-fg);
 text-decoration: none;
 padding: 4px 0;
 border-bottom: 1px solid transparent;
}
.bsxc-footer-col a:hover {
 border-bottom-color: var(--bsxc-rule);
}
.bsxc-breadcrumb {
 padding: 18px 24px 0;
 font-size: 0.82rem;
 color: var(--bsxc-muted);
}
.bsxc-breadcrumb ol {
 list-style: none;
 padding: 0;
 margin: 0;
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
}
.bsxc-breadcrumb li {
 display: inline;
}
.bsxc-breadcrumb a {
 color: var(--bsxc-muted);
 text-decoration: none;
 border-bottom: 1px dotted var(--bsxc-rule);
}
.bsxc-breadcrumb a:hover {
 color: var(--bsxc-accent);
 border-bottom-color: var(--bsxc-accent);
}
.bsxc-breadcrumb [aria-current="page"] {
 color: var(--bsxc-fg);
 font-weight: 600;
}

/* === MODERN CARDS v2 (Luca review) === */
.bsxc-toppick--v2 { padding: 28px; border: 1px solid var(--bsxc-border); background: var(--bsxc-paper); margin: 32px 0; }
.bsxc-toppick-grid { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; }
@media (max-width: 760px) { .bsxc-toppick-grid { grid-template-columns: 1fr; } }
.bsxc-toppick-thumb { display: block; border-radius: 4px; overflow: hidden; box-shadow: var(--bsxc-shadow-soft); transition: transform 240ms ease; }
.bsxc-toppick-thumb img { width: 100%; height: 180px; object-fit: cover; display: block; }
.bsxc-toppick-thumb:hover { transform: translateY(-4px) scale(1.01); }
.bsxc-toppick-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.bsxc-visit-cta--ghost { background: transparent; color: var(--bsxc-accent); border: 1.5px solid var(--bsxc-accent); }
.bsxc-visit-cta--ghost:hover { background: var(--bsxc-accent); color: #fff; }

.bsxc-score-circle {
 display: inline-flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 width: 74px; height: 74px;
 border-radius: 50%;
 color: #fff;
 font-family: var(--bsxc-font-display);
 line-height: 1;
 box-shadow: 0 4px 14px rgba(0,0,0,0.15);
 flex-shrink: 0;
}
.bsxc-score-circle .bsxc-score-num { font-size: 1.8rem; font-weight: 700; }
.bsxc-score-circle .bsxc-score-out { font-size: 0.7rem; opacity: 0.8; margin-top: 2px; }
.bsxc-score-circle--sm { width: 56px; height: 56px; }
.bsxc-score-circle--sm .bsxc-score-num { font-size: 1.3rem; }

.bsxc-review-list--v2 { display: flex; flex-direction: column; gap: 0; }
.bsxc-review--v2 {
 display: grid;
 grid-template-columns: 160px 1fr 80px;
 gap: 24px;
 align-items: center;
 padding: 22px 0;
 border-bottom: 1px solid var(--bsxc-rule);
 transition: background 200ms ease;
}
.bsxc-review--v2:hover { background: var(--bsxc-paper); }
@media (max-width: 760px) {
 .bsxc-review--v2 { grid-template-columns: 100px 1fr; }
 .bsxc-review--v2 .bsxc-score-circle--sm { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; }
 .bsxc-review--v2 .bsxc-review-body { grid-column: 1 / -1; }
}
.bsxc-review-thumb { display: block; border-radius: 3px; overflow: hidden; box-shadow: var(--bsxc-shadow-soft); }
.bsxc-review-thumb img { width: 100%; height: 110px; object-fit: cover; display: block; transition: transform 300ms ease; }
.bsxc-review-thumb:hover img { transform: scale(1.04); }
.bsxc-review--v2 .bsxc-review-rank { font-family: var(--bsxc-font-display); font-style: italic; color: var(--bsxc-muted); font-size: 0.85rem; margin-bottom: 4px; }
.bsxc-review--v2 .bsxc-review-title { margin: 0 0 4px; font-size: 1.4rem; }
.bsxc-review--v2 .bsxc-review-deck { margin: 0 0 8px; font-size: 0.95rem; }
.bsxc-review--v2 .bsxc-review-meta { margin: 0 0 8px; font-size: 0.85rem; color: var(--bsxc-muted); }
.bsxc-review--v2 .bsxc-review-actions { margin: 0; font-size: 0.88rem; }

/* === STICKY REVIEW BAR === */
.bsxc-sticky-bar {
 position: fixed; top: 0; left: 0; right: 0; z-index: 50;
 background: var(--bsxc-bg);
 border-bottom: 1px solid var(--bsxc-rule);
 box-shadow: 0 2px 8px rgba(0,0,0,0.06);
 transform: translateY(-100%);
 transition: transform 240ms ease;
 padding: 10px 0;
}
.bsxc-sticky-bar.is-visible { transform: translateY(0); }
.bsxc-sticky-inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bsxc-sticky-name { font-family: var(--bsxc-font-display); font-weight: 600; font-size: 1.1rem; }
.bsxc-sticky-score { font-weight: 700; color: var(--bsxc-accent); }
.bsxc-sticky-cta { margin-left: auto; padding: 8px 18px; background: var(--bsxc-accent); color: #fff !important; border-radius: 3px; text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.bsxc-sticky-cta:hover { background: var(--bsxc-fg); }
.bsxc-sticky-bar { z-index: 200 !important; }
.bsxc-header { z-index: 50; }

/* === BODY BLOCKS (Luca round 2) === */
.bsxc-body-main { padding: 48px 24px; }
.bsxc-cta-strip {
 display: flex; align-items: center; justify-content: space-between; gap: 18px;
 padding: 22px 26px; margin: 0 0 36px;
 background: var(--bsxc-paper); border: 1px solid var(--bsxc-border); border-left: 4px solid var(--bsxc-accent);
 flex-wrap: wrap;
}
.bsxc-cta-strip-label { margin: 0; font-size: 0.85rem; color: var(--bsxc-muted); }
.bsxc-cta-strip-price { margin: 4px 0 0; font-family: var(--bsxc-font-display); font-size: 1.4rem; font-weight: 700; color: var(--bsxc-fg); }
.bsxc-cta-strip-btn {
 padding: 14px 28px; background: var(--bsxc-accent); color: #fff !important; text-decoration: none;
 font-family: var(--bsxc-font-display); font-weight: 700; font-size: 1.05rem; border-radius: 2px;
 transition: background 200ms ease, transform 150ms ease;
}
.bsxc-cta-strip-btn:hover { background: var(--bsxc-fg); transform: translateY(-1px); }

.bsxc-procon-grid {
 display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 0 0 40px;
}
@media (max-width: 720px) { .bsxc-procon-grid { grid-template-columns: 1fr; } }
.bsxc-procon { padding: 24px 26px; background: var(--bsxc-paper); border-radius: 2px; }
.bsxc-procon--pros { border-top: 4px solid #2E7D32; }
.bsxc-procon--cons { border-top: 4px solid #C62828; }
.bsxc-procon-title { font-family: var(--bsxc-font-display); font-weight: 700; font-size: 1.15rem; margin: 0 0 14px; color: var(--bsxc-fg); }
.bsxc-procon ul { margin: 0; padding-left: 1.2em; line-height: 1.7; }
.bsxc-procon li { margin-bottom: 6px; }

.bsxc-verdict-block { margin: 0 0 40px; }
.bsxc-skip-if { padding: 14px 18px; background: var(--bsxc-bg); border-left: 3px solid var(--bsxc-muted); margin: 18px 0 0; color: var(--bsxc-muted); }

.bsxc-faq { margin: 0 0 40px; }
.bsxc-faq-item {
 border-bottom: 1px solid var(--bsxc-rule);
 padding: 16px 0;
}
.bsxc-faq-item summary {
 cursor: pointer; font-family: var(--bsxc-font-display); font-weight: 600; font-size: 1.1rem;
 color: var(--bsxc-fg); list-style: none; padding-right: 24px; position: relative;
}
.bsxc-faq-item summary::-webkit-details-marker { display: none; }
.bsxc-faq-item summary::after {
 content: '+'; position: absolute; right: 0; top: 0; font-size: 1.4rem; font-weight: 400; color: var(--bsxc-accent);
 transition: transform 200ms ease;
}
.bsxc-faq-item[open] summary::after { content: '−'; }
.bsxc-faq-item p { margin: 14px 0 0; color: var(--bsxc-muted); line-height: 1.65; }

.bsxc-related { margin: 0 0 32px; }
.bsxc-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin-top: 18px; }
.bsxc-related-card {
 display: flex; flex-direction: column; gap: 8px;
 padding: 14px; background: var(--bsxc-paper); border: 1px solid var(--bsxc-border);
 text-decoration: none; color: var(--bsxc-fg);
 transition: transform 200ms ease, box-shadow 200ms ease;
}
.bsxc-related-card:hover { transform: translateY(-3px); box-shadow: var(--bsxc-shadow-soft); }
.bsxc-related-thumb { display: block; width: 100%; height: 110px; overflow: hidden; border-radius: 2px; }
.bsxc-related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bsxc-related-name { font-family: var(--bsxc-font-display); font-weight: 700; font-size: 1.05rem; }
.bsxc-related-score { color: var(--bsxc-accent); font-weight: 600; font-size: 0.85rem; }
.bsxc-related-tag { color: var(--bsxc-muted); font-size: 0.85rem; line-height: 1.4; }

.bsxc-disclosure { font-size: 0.8rem; color: var(--bsxc-muted); border-top: 1px dashed var(--bsxc-rule); padding-top: 18px; margin-top: 36px; }

.bsxc-byline-block { margin: 40px auto 24px; padding: 28px 26px; background: var(--bsxc-paper); border-left: 4px solid var(--bsxc-accent); }
.bsxc-byline-row { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.bsxc-byline-avatar {
 flex: 0 0 64px; height: 64px; width: 64px; border-radius: 50%;
 background: var(--bsxc-accent); color: #fff;
 display: flex; align-items: center; justify-content: center;
 font-family: var(--bsxc-font-display); font-weight: 700; font-size: 1.4rem;
}
.bsxc-byline-body { flex: 1; min-width: 0; }
.bsxc-byline-name { margin: 0 0 4px; font-family: var(--bsxc-font-display); font-weight: 700; font-size: 1.1rem; color: var(--bsxc-fg); }
.bsxc-byline-role { font-weight: 400; color: var(--bsxc-muted); font-size: 0.95rem; }
.bsxc-byline-bio { margin: 0 0 8px; line-height: 1.55; color: var(--bsxc-fg); }
.bsxc-byline-meta { margin: 0; font-size: 0.82rem; color: var(--bsxc-muted); }
.bsxc-byline-meta a { color: var(--bsxc-accent); }

/* === Top-pick with thumbnail === */
.bsxc-toppick-grid {
 display: grid;
 grid-template-columns: 1.4fr 1fr;
 gap: 36px;
 align-items: start;
}
@media (max-width: 820px) {
 .bsxc-toppick-grid { grid-template-columns: 1fr; }
}
.bsxc-toppick-title a { color: inherit; text-decoration: none; }
.bsxc-toppick-title a:hover { color: var(--bsxc-accent); }
.bsxc-toppick-thumb {
 display: block;
 overflow: hidden;
 border: 1px solid var(--bsxc-border);
 box-shadow: var(--bsxc-shadow-soft);
 background: var(--bsxc-paper);
}
.bsxc-toppick-thumb img {
 display: block;
 width: 100%;
 height: auto;
 aspect-ratio: 4 / 3;
 object-fit: cover;
 transition: transform 600ms ease;
}
.bsxc-toppick-thumb:hover img { transform: scale(1.03); }

/* === Other reviews with thumbnail === */
.bsxc-review { display: grid; grid-template-columns: 56px 110px 1fr; gap: 18px; align-items: start; }
@media (max-width: 720px) {
 .bsxc-review { grid-template-columns: 40px 86px 1fr; gap: 12px; }
}
.bsxc-review-thumb {
 display: block;
 width: 110px; height: 80px; overflow: hidden;
 border: 1px solid var(--bsxc-border);
}
@media (max-width: 720px) {
 .bsxc-review-thumb { width: 86px; height: 64px; }
}
.bsxc-review-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ─── bsxc — paper-warm magazine frame ──────────────────────────────── */
.bsxc-shot-frame {
  margin: 32px 0;
  padding: 12px;
  background: var(--bsxc-paper);
  border: 1px solid var(--bsxc-border);
  border-radius: 2px;
  box-shadow: var(--bsxc-shadow-soft);
}
.bsxc-shot-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}
.bsxc-shot-caption {
  font-family: var(--bsxc-font-body);
  font-size: 0.78rem;
  color: var(--bsxc-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 12px 0 0;
  text-align: center;
}

/* ─── Mobile shot side-by-side variant (all archetypes) ─────────────── */
.shot-pair {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  margin: 32px 0;
}
.shot-pair .shot-desktop { grid-column: 1 / 2; }
.shot-pair .shot-mobile { grid-column: 2 / 3; }
@media (max-width: 760px) {
  .shot-pair { grid-template-columns: 1fr; }
}

/* Visit-site CTA buttons per archetype */
.bsxc-visit-cta {
  display: inline-block;
  padding: 12px 22px;
  background: var(--bsxc-fg);
  color: var(--bsxc-bg);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 2px;
  transition: background 120ms ease;
}
.bsxc-visit-cta:hover {
  background: var(--bsxc-accent);
  color: var(--bsxc-bg);
}



/* ─── Brand shot: solo desktop su desktop, solo mobile su mobile (no side-by-side) ─── */
.shot-pair {
  display: block;
  grid-template-columns: none;
}
.shot-pair .shot-desktop { display: block; }
.shot-pair .shot-mobile { display: none; }
@media (max-width: 760px) {
  .shot-pair .shot-desktop { display: none; }
  .shot-pair .shot-mobile { display: block; max-width: 390px; margin: 0 auto; }
}

/* ─── Hamburger mobile menu (no JS framework, vanilla) ─── */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  position: relative;
  z-index: 20;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  margin: 5px 0;
  transition: transform 200ms ease, opacity 200ms ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .bsxc-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    padding: 16px 24px;
    background: var(--bsxc-bg);
    border-bottom: 1px solid var(--bsxc-rule);
    gap: 16px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  }
  .bsxc-nav.is-open { display: flex; }
  .bsxc-header { position: relative; }
  .bsxc-header-inner { position: relative; }
}