/* ==========================================================================
   BrewerRepair — design system
   No build step. Semantic class names, CSS custom properties, three theme
   states (light / dark via toggle / dark via OS preference).
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root {
    /* Coffee palette */
    --ivory:#F7F3EC;   --beige:#E9E0D2;      --lightcoffee:#D6C0A5;
    --espresso:#2A1E18;--deepcoffee:#3A2820; --charcoal:#242424;
    --roasted:#6B4226; --caramel:#B77A45;    --copper:#C58A5A; --olive:#394237;

    /* Status layer — a repair site needs these, a review site does not */
    --easy:#2F6B4F; --medium:#B45309; --hard:#9A3412; --danger:#B91C1C;
    --amazon:#FF9900; --amazon-dark:#E48A00;

    /* Semantic roles (light) */
    --bg:var(--ivory);
    --surface:#FFFFFF;
    --surface-alt:var(--ivory);
    --surface-invert:var(--espresso);
    --text:var(--charcoal);
    --text-muted:rgba(36,36,36,.70);
    --text-faint:rgba(36,36,36,.52);
    --heading:var(--espresso);
    --border:var(--beige);
    --border-soft:rgba(233,224,210,.6);
    --accent:var(--caramel);
    --accent-strong:var(--roasted);
    --on-invert:var(--ivory);
    --on-invert-muted:rgba(233,224,210,.75);

    --radius-sm:.4rem; --radius:.75rem; --radius-lg:1rem; --radius-xl:1.5rem;
    --shadow:0 4px 20px -2px rgba(42,30,24,.05);
    --shadow-lg:0 12px 30px -4px rgba(42,30,24,.10);

    --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
    --font-serif:'Playfair Display',Georgia,'Times New Roman',serif;
    --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

    --wrap:1320px;
    --gutter:1rem;
}

@media (min-width:1024px) { :root { --gutter:2rem; } }

/* Dark via explicit toggle */
html[data-theme="dark"] {
    --bg:#171412;
    --surface:#211C18;
    --surface-alt:#171412;
    --surface-invert:#211C18;
    --text:#F4EEE6;
    --text-muted:rgba(233,224,210,.72);
    --text-faint:rgba(233,224,210,.5);
    --heading:#F7F3EC;
    --border:#332C25;
    --border-soft:rgba(51,44,37,.7);
    --accent:var(--caramel);
    --accent-strong:var(--copper);
    --on-invert:#F4EEE6;
    --on-invert-muted:rgba(233,224,210,.72);
    --easy:#5FAE85; --medium:#E0A458; --hard:#E08B62; --danger:#EF7A7A;
    --shadow:0 4px 20px -2px rgba(0,0,0,.35);
    --shadow-lg:0 12px 30px -4px rgba(0,0,0,.45);
}

/* Dark via OS preference, unless the user explicitly chose light */
@media (prefers-color-scheme:dark) {
    html:not([data-theme="light"]) {
        --bg:#171412;
        --surface:#211C18;
        --surface-alt:#171412;
        --surface-invert:#211C18;
        --text:#F4EEE6;
        --text-muted:rgba(233,224,210,.72);
        --text-faint:rgba(233,224,210,.5);
        --heading:#F7F3EC;
        --border:#332C25;
        --border-soft:rgba(51,44,37,.7);
        --accent-strong:var(--copper);
        --on-invert:#F4EEE6;
        --on-invert-muted:rgba(233,224,210,.72);
        --easy:#5FAE85; --medium:#E0A458; --hard:#E08B62; --danger:#EF7A7A;
        --shadow:0 4px 20px -2px rgba(0,0,0,.35);
        --shadow-lg:0 12px 30px -4px rgba(0,0,0,.45);
    }
}

/* ----------------------------------------------------------- 2. Base reset */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-sans);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    transition:background-color .3s,color .3s;
}
img,svg,video { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--accent); }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; background:none; border:none; padding:0; }
h1,h2,h3,h4 { font-family:var(--font-serif); color:var(--heading); margin:0; line-height:1.15; font-weight:700; }
p { margin:0; }
ul,ol { margin:0; padding:0; }
table { border-collapse:collapse; width:100%; }
hr { border:0; border-top:1px solid var(--border); margin:2rem 0; }

::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--lightcoffee); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--caramel); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background:var(--deepcoffee); }

:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:2px; }

.br-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.br-skip { position:absolute; left:-9999px; top:0; z-index:200; background:var(--espresso); color:var(--ivory); padding:.75rem 1.25rem; border-radius:0 0 var(--radius-sm) 0; font-weight:600; }
.br-skip:focus { left:0; }

@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* --------------------------------------------------------------- 3. Layout */
.br-wrap { max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.br-section { padding-block:3rem; }
.br-section--tight { padding-block:1.5rem; }
.br-section--line { border-top:1px solid var(--border); }
.br-stack { display:flex; flex-direction:column; }
.br-gap-sm { gap:.75rem; } .br-gap { gap:1.25rem; } .br-gap-lg { gap:2rem; }

.br-grid { display:grid; gap:1.25rem; }
@media (min-width:640px)  { .br-grid--2 { grid-template-columns:repeat(2,1fr); } }
@media (min-width:768px)  { .br-grid--3 { grid-template-columns:repeat(3,1fr); } }
@media (min-width:640px)  { .br-grid--hubs { grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px) { .br-grid--hubs { grid-template-columns:repeat(6,1fr); } }
@media (min-width:1024px) { .br-grid--main { grid-template-columns:8fr 4fr; gap:2.5rem; } }
@media (min-width:1024px) { .br-grid--split { grid-template-columns:1fr 1fr; gap:2.5rem; } }
@media (min-width:1024px) { .br-grid--split-7 { grid-template-columns:7fr 5fr; gap:2.5rem; } }
@media (min-width:1024px) { .br-grid--split-5 { grid-template-columns:5fr 7fr; gap:2.5rem; } }

.br-section__head { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.br-section__title { font-size:clamp(1.6rem,3.2vw,2.25rem); display:flex; align-items:center; gap:.65rem; }
.br-section__title .br-i { color:var(--accent); width:1.6rem; height:1.6rem; flex:0 0 auto; }
.br-section__lede { color:var(--text-muted); font-size:.9rem; margin-top:.5rem; max-width:42rem; }

/* ---------------------------------------------------------------- 4. Icons */
.br-i { width:1.15em; height:1.15em; display:inline-block; vertical-align:-.18em; flex:0 0 auto; }
.br-sprite { position:absolute; width:0; height:0; overflow:hidden; }

/* -------------------------------------------------------------- 5. Buttons */
.br-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.85rem 1.5rem; border-radius:var(--radius);
    font-size:.875rem; font-weight:600; line-height:1;
    border:1px solid transparent; transition:background-color .2s,border-color .2s,color .2s;
}
.br-btn--primary { background:var(--accent); color:#fff; }
.br-btn--primary:hover { background:var(--accent-strong); color:#fff; }
.br-btn--dark { background:var(--espresso); color:var(--ivory); }
.br-btn--dark:hover { background:var(--roasted); color:var(--ivory); }
html[data-theme="dark"] .br-btn--dark { background:var(--caramel); color:var(--espresso); }
html[data-theme="dark"] .br-btn--dark:hover { background:var(--ivory); }
.br-btn--ghost { background:var(--surface); color:var(--heading); border-color:var(--border); }
.br-btn--ghost:hover { border-color:var(--accent); color:var(--accent); }
.br-btn--amazon { background:var(--amazon); color:#111; font-weight:700; }
.br-btn--amazon:hover { background:var(--amazon-dark); color:#111; }
.br-btn--sm { padding:.55rem 1rem; font-size:.78rem; border-radius:var(--radius-sm); }
.br-btn--block { width:100%; }
.br-btn[disabled] { opacity:.4; cursor:not-allowed; }

.br-more { display:inline-flex; align-items:center; gap:.35rem; font-size:.85rem; font-weight:600; color:var(--accent); }
.br-more:hover { color:var(--accent-strong); }

/* --------------------------------------------------------------- 6. Chrome */
.br-topbar { background:var(--espresso); color:var(--ivory); font-size:.72rem; font-weight:500; padding:.5rem 0; }
html[data-theme="dark"] .br-topbar { background:#0A0807; }
.br-topbar__inner { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.br-topbar a { display:inline-flex; align-items:center; gap:.3rem; }
.br-topbar a:hover { color:var(--caramel); }
.br-topbar__links { display:none; gap:1.5rem; }
@media (min-width:768px) { .br-topbar__links { display:flex; } }
.br-topbar__right { display:flex; align-items:center; gap:1rem; justify-content:space-between; width:100%; }
@media (min-width:768px) { .br-topbar__right { width:auto; } }

.br-header {
    position:sticky; top:0; z-index:50;
    background:color-mix(in srgb, var(--bg) 95%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
}
@supports not (background:color-mix(in srgb, red 50%, transparent)) { .br-header { background:var(--bg); } }
.br-header__inner { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-block:.85rem; }

.br-logo { display:flex; align-items:center; gap:.65rem; flex:0 0 auto; }
.br-logo__mark { position:relative; width:2.25rem; height:2.25rem; border-radius:var(--radius-sm); background:var(--espresso); color:var(--ivory); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
html[data-theme="dark"] .br-logo__mark { background:var(--caramel); color:var(--espresso); }
.br-logo__mark .br-i { width:1.15rem; height:1.15rem; }
.br-logo__name { font-family:var(--font-serif); font-weight:700; font-size:1.25rem; line-height:1; letter-spacing:-.02em; color:var(--heading); }
.br-logo__name span { color:var(--accent-strong); }
html[data-theme="dark"] .br-logo__name span { color:var(--caramel); }
/* Never remove or shorten this line: it is what stops "brewer" reading as beer-brewing. */
.br-logo__desc { display:block; font-size:.5rem; text-transform:uppercase; letter-spacing:.16em; font-weight:600; color:var(--accent-strong); margin-top:.28rem; }
html[data-theme="dark"] .br-logo__desc { color:var(--lightcoffee); }

.br-nav { display:none; align-items:center; gap:1.5rem; font-size:.8rem; font-weight:600; }
@media (min-width:1280px) { .br-nav { display:flex; } }
.br-nav a,.br-nav button { padding-block:.85rem; display:inline-flex; align-items:center; gap:.3rem; color:var(--deepcoffee); }
html[data-theme="dark"] .br-nav a,html[data-theme="dark"] .br-nav button { color:var(--beige); }
.br-nav a:hover,.br-nav button:hover { color:var(--accent); }

.br-has-mega { position:relative; }
.br-mega {
    position:absolute; top:100%; left:0; z-index:60;
    min-width:22rem; padding:1.5rem;
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius-xl); box-shadow:var(--shadow-lg);
    display:grid; gap:.1rem 2rem;
    opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .18s,transform .18s,visibility .18s;
}
.br-mega--2 { grid-template-columns:1fr 1fr; width:34rem; }
.br-mega--3 { grid-template-columns:repeat(3,1fr); width:36rem; left:50%; transform:translate(-50%,6px); }
.br-has-mega:hover .br-mega,.br-has-mega:focus-within .br-mega { opacity:1; visibility:visible; transform:translateY(0); }
.br-has-mega:hover .br-mega--3,.br-has-mega:focus-within .br-mega--3 { transform:translate(-50%,0); }
.br-mega a { padding-block:.45rem; font-weight:500; }
.br-mega__label { grid-column:1/-1; font-size:.6rem; text-transform:uppercase; letter-spacing:.14em; color:var(--text-faint); margin-bottom:.5rem; }
.br-mega__foot { grid-column:1/-1; margin-top:.75rem; padding-top:.75rem; border-top:1px solid var(--border); }

.br-header__actions { display:flex; align-items:center; gap:.75rem; }
.br-iconbtn { color:var(--deepcoffee); display:flex; align-items:center; }
html[data-theme="dark"] .br-iconbtn { color:var(--beige); }
.br-iconbtn:hover { color:var(--accent); }
.br-iconbtn .br-i { width:1.35rem; height:1.35rem; }
.br-header__cta { display:none; }
@media (min-width:768px) { .br-header__cta { display:inline-flex; padding:.65rem 1.1rem; border-radius:999px; font-size:.8rem; } }
.br-burger { display:flex; }
@media (min-width:1280px) { .br-burger { display:none; } }

.br-panel { border-top:1px solid var(--border); background:var(--surface); }
.br-panel[hidden] { display:none; }
.br-panel__inner { padding-block:1.25rem; }
.br-mobilenav { display:flex; flex-direction:column; font-size:.9rem; font-weight:600; }
.br-mobilenav a { padding:.85rem 0; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:.6rem; }
.br-mobilenav a:last-child { border-bottom:0; }
.br-mobilenav .br-i { color:var(--accent); }

/* --------------------------------------------------------------- 7. Fields */
.br-field { position:relative; }
.br-field .br-i { position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color:var(--text-faint); width:1.1rem; height:1.1rem; }
.br-input,.br-select,.br-textarea {
    width:100%; padding:.85rem 1rem; border-radius:var(--radius);
    background:var(--surface-alt); border:1px solid var(--border); font-size:.875rem;
    transition:border-color .2s;
}
.br-field .br-input { padding-left:2.6rem; }
.br-input:focus,.br-select:focus,.br-textarea:focus { outline:none; border-color:var(--accent); }
.br-select:disabled { opacity:.5; cursor:not-allowed; }

/* --------------------------------------------------------------- 8. Badges */
.br-badge {
    display:inline-flex; align-items:center; gap:.3rem;
    font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
    padding:.3rem .5rem; border-radius:var(--radius-sm);
}
.br-badge--easy     { background:color-mix(in srgb,var(--easy) 12%,transparent);   color:var(--easy); }
.br-badge--moderate { background:color-mix(in srgb,var(--medium) 12%,transparent); color:var(--medium); }
.br-badge--advanced { background:color-mix(in srgb,var(--hard) 12%,transparent);   color:var(--hard); }
.br-badge--accent   { background:color-mix(in srgb,var(--accent) 12%,transparent); color:var(--accent-strong); }
html[data-theme="dark"] .br-badge--accent { color:var(--caramel); }
.br-badge--solid    { background:var(--espresso); color:var(--ivory); border-radius:999px; padding:.35rem .85rem; }
html[data-theme="dark"] .br-badge--solid { background:var(--caramel); color:var(--espresso); }
.br-badge--olive    { background:var(--olive); color:#fff; border-radius:999px; padding:.35rem .85rem; }

.br-eyebrow { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--accent-strong); }
html[data-theme="dark"] .br-eyebrow { color:var(--caramel); }
.br-kicker { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--text-faint); }

/* Part number chip — monospace is a deliberate trust signal on a parts site */
.br-pn {
    font-family:var(--font-mono); font-size:.78rem; letter-spacing:-.02em; white-space:nowrap;
    background:rgba(74,85,104,.09); border:1px solid rgba(74,85,104,.2);
    padding:.1rem .45rem; border-radius:var(--radius-sm);
}
html[data-theme="dark"] .br-pn { background:rgba(214,192,165,.08); border-color:rgba(214,192,165,.18); }

.br-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; font-size:.72rem; color:var(--text-faint); }
.br-meta span { display:inline-flex; align-items:center; gap:.3rem; }

/* ---------------------------------------------------------------- 9. Cards */
.br-card {
    position:relative; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius-xl); padding:1.25rem;
    transition:border-color .2s,box-shadow .2s;
    display:flex; flex-direction:column;
}
.br-card:hover { border-color:var(--accent); box-shadow:var(--shadow); }
.br-card__title { font-size:1.15rem; line-height:1.3; margin-block:.5rem; }
.br-card:hover .br-card__title { color:var(--accent); }
.br-card__excerpt { font-size:.85rem; color:var(--text-muted); flex:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.br-card__foot { margin-top:1rem; padding-top:.75rem; border-top:1px solid var(--border); font-size:.75rem; display:flex; flex-wrap:wrap; gap:.35rem; }
.br-card__ribbon { position:absolute; top:-.75rem; left:1.25rem; font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; box-shadow:var(--shadow); }
/* Stretched link: the whole card is clickable, inner links opt back out with .br-z */
.br-stretch::after { content:""; position:absolute; inset:0; }
.br-z { position:relative; z-index:1; }

.br-hub { display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1rem; transition:border-color .2s; }
.br-hub:hover { border-color:var(--accent); }
.br-hub__name { font-family:var(--font-serif); font-weight:700; font-size:1.05rem; color:var(--heading); }
.br-hub:hover .br-hub__name { color:var(--accent); }
.br-hub__count { font-size:.72rem; color:var(--text-faint); margin-top:.25rem; }

.br-linkrow { display:flex; align-items:center; gap:1rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; transition:border-color .2s; }
.br-linkrow:hover { border-color:var(--accent); }
.br-linkrow__icon { width:2.75rem; height:2.75rem; border-radius:var(--radius-sm); background:color-mix(in srgb,var(--accent) 10%,transparent); color:var(--accent); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.br-linkrow__title { font-family:var(--font-serif); font-weight:700; color:var(--heading); display:block; }
.br-linkrow:hover .br-linkrow__title { color:var(--accent); }
.br-linkrow__sub { font-size:.75rem; color:var(--text-faint); margin-top:.15rem; display:block; }
.br-linkrow__arrow { color:var(--text-faint); margin-left:auto; }
.br-linkrow:hover .br-linkrow__arrow { color:var(--accent); }

.br-thumb { overflow:hidden; border-radius:var(--radius); }
.br-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.br-thumb:hover img,a:hover .br-thumb img { transform:scale(1.03); }

/* -------------------------------------------------------------- 10. Notice */
.br-notice { display:flex; gap:1rem; align-items:flex-start; padding:1.15rem; border-radius:var(--radius-xl); border:1px solid; font-size:.875rem; line-height:1.6; }
.br-notice .br-i { width:1.4rem; height:1.4rem; flex:0 0 auto; margin-top:.15rem; }
.br-notice__title { font-weight:700; font-size:.85rem; margin-bottom:.2rem; display:block; }
.br-notice--danger { background:color-mix(in srgb,var(--danger) 6%,transparent); border-color:color-mix(in srgb,var(--danger) 25%,transparent); }
.br-notice--danger .br-i,.br-notice--danger .br-notice__title { color:var(--danger); }
.br-notice--info { background:var(--surface); border-color:var(--border); }
.br-notice--info .br-i { color:var(--accent); }
.br-notice--easy { background:color-mix(in srgb,var(--easy) 7%,transparent); border-color:color-mix(in srgb,var(--easy) 25%,transparent); }
.br-notice--easy .br-i,.br-notice--easy .br-notice__title { color:var(--easy); }

/* --------------------------------------------------------------- 11. Table */
.br-tablecard { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); overflow:hidden; }
.br-tablecard__head { padding:1.25rem; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:.75rem; }
@media (min-width:640px) { .br-tablecard__head { flex-direction:row; } .br-tablecard__head .br-field { flex:1; } .br-tablecard__head .br-select { width:13rem; } }
.br-tablecard__foot { padding:1.25rem; border-top:1px solid var(--border); background:var(--surface-alt); display:flex; flex-wrap:wrap; gap:.75rem; justify-content:space-between; align-items:center; }
.br-tablewrap { overflow-x:auto; }
.br-table { min-width:44rem; font-size:.875rem; text-align:left; }
.br-table thead tr { background:var(--surface-alt); border-bottom:1px solid var(--border); }
.br-table th { padding:.75rem 1.25rem; font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--text-faint); white-space:nowrap; }
.br-table td { padding:.9rem 1.25rem; border-top:1px solid var(--border-soft); vertical-align:top; }
.br-table tbody tr:hover { background:var(--surface-alt); }
.br-table__sub { font-size:.72rem; color:var(--text-faint); margin-top:.2rem; }
.br-table__fits { font-size:.75rem; color:var(--text-muted); line-height:1.5; }
.br-table--plain { min-width:0; }
.br-table--plain th,.br-table--plain td { padding:.7rem .9rem; }
.br-empty { display:none; text-align:center; font-size:.875rem; color:var(--text-faint); padding:2.5rem 1rem; }
.br-empty.is-on { display:block; }

/* ------------------------------------------------------------ 12. Diagnoser */
.br-diagnoser { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); padding:1.25rem; box-shadow:var(--shadow); }
.br-diagnoser__grid { display:grid; gap:.75rem; }
@media (min-width:640px) { .br-diagnoser__grid { grid-template-columns:repeat(3,1fr); } }
.br-diagnoser__result { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border); }
.br-diagnoser__result[hidden] { display:none; }
.br-causes { list-style:none; display:flex; flex-direction:column; gap:.5rem; font-size:.875rem; margin-bottom:1rem; }
.br-causes li { display:flex; gap:.65rem; align-items:flex-start; }
.br-causes span:first-child { font-family:var(--font-mono); font-size:.65rem; font-weight:700; color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); border-radius:var(--radius-sm); padding:.15rem .4rem; flex:0 0 auto; margin-top:.15rem; }
.br-diagnoser__actions { display:flex; flex-direction:column; gap:.65rem; }
@media (min-width:640px) { .br-diagnoser__actions { flex-direction:row; } .br-diagnoser__actions>* { flex:1; } }

/* ---------------------------------------------------------------- 13. Hero */
.br-hero { display:grid; gap:2.5rem; align-items:center; padding-block:2.5rem 2rem; }
@media (min-width:1024px) { .br-hero { grid-template-columns:1fr 1fr; gap:2rem; padding-block:4rem 2rem; } }
.br-hero__title { font-size:clamp(2.1rem,5vw,3.4rem); line-height:1.08; text-wrap:balance; margin-block:1.25rem; }
.br-hero__title em { font-style:italic; color:var(--accent-strong); }
html[data-theme="dark"] .br-hero__title em { color:var(--caramel); }
.br-hero__lede { font-size:1.05rem; color:var(--text-muted); max-width:36rem; margin-bottom:1.75rem; }
.br-hero__lede strong { color:var(--heading); }
.br-hero__media { position:relative; }
.br-hero__media img { width:100%; height:clamp(320px,42vw,520px); object-fit:cover; border-radius:2rem; box-shadow:var(--shadow); }
.br-hero__float { position:absolute; bottom:1.5rem; left:-1rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow); display:none; align-items:center; gap:1rem; }
@media (min-width:768px) { .br-hero__float { display:flex; } }
.br-pill { display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .8rem; border-radius:999px; background:var(--beige); color:var(--accent-strong); font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
html[data-theme="dark"] .br-pill { background:var(--surface); color:var(--caramel); }
.br-pill i { width:.5rem; height:.5rem; border-radius:999px; background:var(--caramel); display:block; }

.br-trust { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:3rem; padding-top:2rem; border-top:1px solid var(--border); }
@media (min-width:1024px) { .br-trust { grid-template-columns:repeat(4,1fr); } }
.br-trust__item { display:flex; gap:.75rem; align-items:flex-start; }
.br-trust__item .br-i { width:1.5rem; height:1.5rem; color:var(--accent); margin-top:.15rem; }
.br-trust__item b { display:block; font-size:.85rem; color:var(--heading); }
.br-trust__item small { font-size:.72rem; color:var(--text-faint); }

/* ------------------------------------------------------------- 14. Article */
.br-breadcrumb { font-size:.75rem; color:var(--text-faint); padding-block:1rem; display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.br-breadcrumb a:hover { color:var(--accent); }
.br-breadcrumb .br-i { width:.8rem; height:.8rem; opacity:.5; }

.br-article__header { padding-bottom:1.5rem; border-bottom:1px solid var(--border); margin-bottom:1.75rem; }
.br-article__title { font-size:clamp(1.9rem,4vw,2.9rem); line-height:1.1; text-wrap:balance; margin-block:.75rem; }
.br-byline { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; font-size:.78rem; color:var(--text-faint); }
.br-byline img { width:2rem; height:2rem; border-radius:999px; }
.br-byline a { font-weight:600; color:var(--text-muted); }

/* Quick answer = the featured-snippet target. Keep it 40–60 words. */
.br-quick { background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:var(--radius); padding:1.25rem 1.35rem; margin-bottom:1.75rem; }
.br-quick__label { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--accent-strong); margin-bottom:.4rem; display:block; }
html[data-theme="dark"] .br-quick__label { color:var(--caramel); }
.br-quick p { font-size:1rem; line-height:1.65; }

.br-specs { display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; margin-bottom:1.75rem; }
@media (min-width:640px) { .br-specs { grid-template-columns:repeat(4,1fr); } }
.br-specs__item { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:.85rem 1rem; }
.br-specs__k { font-size:.6rem; text-transform:uppercase; letter-spacing:.12em; color:var(--text-faint); display:block; margin-bottom:.3rem; }
.br-specs__v { font-weight:700; color:var(--heading); font-size:.9rem; }

.br-toc { background:var(--surface-alt); border:1px solid var(--border); border-radius:var(--radius); padding:1.15rem 1.35rem; margin-bottom:1.75rem; }
.br-toc__label { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--text-faint); margin-bottom:.6rem; display:block; }
.br-toc ol { list-style:none; counter-reset:toc; display:flex; flex-direction:column; gap:.4rem; font-size:.875rem; }
.br-toc li { counter-increment:toc; }
.br-toc li::before { content:counter(toc) ". "; color:var(--accent); font-family:var(--font-mono); font-size:.75rem; }

/* Long-form typography */
.br-prose { font-size:1.0125rem; line-height:1.75; color:var(--text); }
.br-prose > * + * { margin-top:1.15rem; }
.br-prose h2 { font-size:1.65rem; margin-top:2.5rem; scroll-margin-top:6rem; }
.br-prose h3 { font-size:1.3rem; margin-top:1.85rem; scroll-margin-top:6rem; }
.br-prose h4 { font-size:1.05rem; font-family:var(--font-sans); font-weight:700; margin-top:1.5rem; }
.br-prose p { color:var(--text-muted); }
.br-prose strong { color:var(--heading); font-weight:600; }
.br-prose a { color:var(--accent-strong); text-decoration:underline; text-underline-offset:2px; }
html[data-theme="dark"] .br-prose a { color:var(--caramel); }
.br-prose ul,.br-prose ol { padding-left:1.35rem; color:var(--text-muted); }
.br-prose li + li { margin-top:.45rem; }
.br-prose ul { list-style:disc; } .br-prose ol { list-style:decimal; }
.br-prose img { border-radius:var(--radius); margin-block:1.5rem; }
.br-prose figure { margin:1.5rem 0; }
.br-prose figcaption { font-size:.78rem; color:var(--text-faint); margin-top:.5rem; text-align:center; }
.br-prose blockquote { border-left:3px solid var(--accent); padding-left:1.15rem; font-style:italic; color:var(--text-muted); }
.br-prose code { font-family:var(--font-mono); font-size:.85em; background:var(--surface-alt); padding:.1rem .35rem; border-radius:var(--radius-sm); }
.br-prose table { font-size:.875rem; margin-block:1.5rem; }
.br-prose th,.br-prose td { padding:.65rem .85rem; border:1px solid var(--border); text-align:left; }
.br-prose th { background:var(--surface-alt); font-weight:700; color:var(--heading); }

/* Ordered repair steps */
.br-steps { list-style:none; counter-reset:step; display:flex; flex-direction:column; gap:1.25rem; margin-block:1.5rem; }
.br-step { counter-increment:step; position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.25rem 1.35rem 1.25rem 3.75rem; }
.br-step::before {
    content:counter(step); position:absolute; left:1.15rem; top:1.15rem;
    width:1.85rem; height:1.85rem; border-radius:999px;
    background:var(--espresso); color:var(--ivory);
    font-family:var(--font-mono); font-size:.8rem; font-weight:700;
    display:flex; align-items:center; justify-content:center;
}
html[data-theme="dark"] .br-step::before { background:var(--caramel); color:var(--espresso); }
.br-step__title { font-size:1.05rem; margin-bottom:.4rem; }
.br-step__body { font-size:.9rem; color:var(--text-muted); }

/* Causes, ranked by likelihood — the defining module of a symptom guide */
.br-ranked { list-style:none; counter-reset:rank; display:flex; flex-direction:column; gap:.75rem; margin-block:1.25rem; }
.br-ranked li { counter-increment:rank; display:flex; gap:.85rem; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:.9rem 1.1rem; }
.br-ranked li::before { content:counter(rank); font-family:var(--font-mono); font-size:.7rem; font-weight:700; color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); border-radius:var(--radius-sm); padding:.2rem .45rem; flex:0 0 auto; }

/* ---------------------------------------------------------- 15. Amazon box */
.br-buybox { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); padding:1.35rem; position:relative; }
.br-buybox__grid { display:grid; gap:1.25rem; align-items:center; }
@media (min-width:640px) { .br-buybox__grid { grid-template-columns:8rem 1fr; } }
.br-buybox__img { border-radius:var(--radius); overflow:hidden; background:#fff; }
.br-buybox__img img { width:100%; height:8rem; object-fit:contain; padding:.5rem; }
.br-buybox__brand { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--text-faint); }
.br-buybox__title { font-size:1.15rem; margin-block:.25rem .5rem; }
.br-buybox__price { font-size:1.2rem; font-weight:700; color:var(--heading); }
.br-buybox__foot { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--border-soft); }
.br-buybox__note { font-size:.68rem; color:var(--text-faint); margin-top:.75rem; }

.br-kit { background:linear-gradient(135deg,var(--surface-alt),var(--beige)); border:1px solid color-mix(in srgb,var(--accent) 25%,transparent); border-radius:var(--radius-xl); padding:1.5rem; height:100%; }
html[data-theme="dark"] .br-kit { background:linear-gradient(135deg,var(--surface),#2A241F); }
.br-kitrow { display:flex; gap:.75rem; align-items:center; background:var(--surface); border:1px solid transparent; border-radius:var(--radius); padding:.65rem; transition:border-color .2s,box-shadow .2s; }
html[data-theme="dark"] .br-kitrow { background:var(--bg); }
.br-kitrow:hover { border-color:color-mix(in srgb,var(--accent) 40%,transparent); box-shadow:var(--shadow); }
.br-kitrow img { width:3.5rem; height:3.5rem; border-radius:var(--radius-sm); object-fit:cover; flex:0 0 auto; }
.br-kitrow__body { flex:1; min-width:0; }
.br-kitrow__name { font-size:.85rem; font-weight:600; color:var(--heading); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.br-kitrow:hover .br-kitrow__name { color:var(--accent); }
.br-kitrow__sub { font-size:.72rem; color:var(--text-faint); display:block; margin-top:.15rem; }
.br-kitrow__freq { font-size:.58rem; font-weight:700; letter-spacing:.06em; color:var(--copper); background:color-mix(in srgb,var(--copper) 12%,transparent); border-radius:var(--radius-sm); padding:.1rem .35rem; display:inline-block; margin-bottom:.25rem; }

.br-disclosure { font-size:.68rem; color:var(--text-faint); line-height:1.6; }

/* ---------------------------------------------------------------- 16. FAQ */
.br-faq { display:flex; flex-direction:column; gap:.75rem; max-width:48rem; }
.br-faq details { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.25rem; }
.br-faq summary { display:flex; justify-content:space-between; align-items:center; gap:1rem; list-style:none; cursor:pointer; }
.br-faq summary::-webkit-details-marker { display:none; }
.br-faq summary h3,.br-faq summary h2 { font-family:var(--font-sans); font-size:.95rem; font-weight:600; color:var(--heading); }
.br-faq summary .br-i { color:var(--accent); transition:transform .2s; flex:0 0 auto; }
.br-faq details[open] summary .br-i { transform:rotate(180deg); }
.br-faq__a { font-size:.875rem; color:var(--text-muted); margin-top:.75rem; line-height:1.7; }

/* ------------------------------------------------------ 17. Verdict / E-E-A-T */
.br-verdict { background:var(--surface-invert); color:var(--on-invert); border-radius:var(--radius-xl); padding:1.5rem; }
.br-verdict__label { font-size:.62rem; text-transform:uppercase; letter-spacing:.14em; color:var(--on-invert-muted); margin-bottom:.75rem; display:block; }
.br-verdict__rule { font-family:var(--font-serif); font-size:1.5rem; font-weight:700; line-height:1.3; color:var(--beige); margin-bottom:1rem; }
.br-verdict__rule b { color:var(--caramel); }
.br-verdict ul { list-style:none; display:flex; flex-direction:column; gap:.65rem; font-size:.875rem; color:var(--on-invert-muted); }
.br-verdict li { display:flex; gap:.65rem; align-items:flex-start; }
.br-verdict li .br-i { margin-top:.2rem; flex:0 0 auto; }

.br-authorbox { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); padding:1.5rem; display:grid; gap:1.5rem; }
@media (min-width:1024px) { .br-authorbox { grid-template-columns:4fr 8fr; padding:2rem; } }
.br-authorbox__who { display:flex; gap:1rem; align-items:center; }
.br-authorbox__who img { width:5rem; height:5rem; border-radius:999px; object-fit:cover; border:2px solid var(--border); flex:0 0 auto; }
.br-method { display:grid; gap:1.5rem; }
@media (min-width:640px) { .br-method { grid-template-columns:repeat(3,1fr); } }
.br-method .br-i { width:1.5rem; height:1.5rem; color:var(--accent); margin-bottom:.5rem; }
.br-method b { display:block; font-size:.85rem; color:var(--heading); margin-bottom:.25rem; }
.br-method small { font-size:.75rem; color:var(--text-faint); line-height:1.6; display:block; }

/* --------------------------------------------------------------- 18. Sidebar */
.br-widget { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); padding:1.25rem; }
.br-widget__title { font-size:1.05rem; margin-bottom:1rem; display:flex; align-items:center; gap:.5rem; }
.br-widget__title .br-i { color:var(--copper); }
.br-ranklist { list-style:none; display:flex; flex-direction:column; gap:1rem; }
.br-ranklist li { display:flex; gap:.75rem; align-items:flex-start; }
.br-ranklist span { font-family:var(--font-mono); font-size:.72rem; font-weight:700; color:var(--accent); padding-top:.15rem; }
.br-ranklist a { font-size:.875rem; font-weight:600; color:var(--heading); line-height:1.35; }
.br-ranklist a:hover { color:var(--accent); }
.br-tags { display:flex; flex-wrap:wrap; gap:.5rem; }
.br-tag { padding:.4rem .85rem; background:var(--surface); border:1px solid var(--border); border-radius:999px; font-size:.75rem; font-weight:500; transition:border-color .2s,color .2s; }
.br-tag:hover { border-color:var(--accent); color:var(--accent); }

/* --------------------------------------------------------------- 19. CTA band */
.br-cta { position:relative; background:var(--espresso); padding-block:4rem; margin-top:2rem; overflow:hidden; }
.br-cta__bg { position:absolute; inset:0; opacity:.2; }
.br-cta__bg img { width:100%; height:100%; object-fit:cover; }
.br-cta__veil { position:absolute; inset:0; background:linear-gradient(to right,var(--espresso),rgba(42,30,24,.92),transparent); }
.br-cta__inner { position:relative; display:grid; gap:2.5rem; align-items:center; }
@media (min-width:768px) { .br-cta__inner { grid-template-columns:1fr 1fr; } }
.br-cta h2 { font-size:clamp(1.8rem,4vw,3rem); color:var(--ivory); text-wrap:balance; margin-bottom:1rem; }
.br-cta p { color:var(--beige); max-width:30rem; margin-bottom:1.75rem; }
.br-cta form { display:flex; flex-direction:column; gap:.75rem; }
@media (min-width:640px) { .br-cta form { flex-direction:row; } }
.br-cta input[type=email] { flex:1; padding:1rem 1.25rem; border-radius:var(--radius); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:var(--ivory); }
.br-cta input[type=email]::placeholder { color:rgba(233,224,210,.5); }
.br-cta input[type=email]:focus { outline:none; border-color:var(--caramel); background:rgba(255,255,255,.18); }
.br-cta small { display:block; font-size:.72rem; color:rgba(233,224,210,.5); margin-top:.75rem; }

/* ---------------------------------------------------------------- 20. Footer */
.br-footer { background:var(--surface); border-top:1px solid var(--border); padding-block:3.5rem 2rem; }
html[data-theme="dark"] .br-footer { background:var(--bg); }
.br-footer__cols { display:grid; gap:2.5rem; margin-bottom:3rem; }
@media (min-width:768px)  { .br-footer__cols { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px) { .br-footer__cols { grid-template-columns:repeat(4,1fr); } }
.br-footer h2 { font-family:var(--font-sans); font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; margin-bottom:1rem; }
.br-footer ul { list-style:none; display:flex; flex-direction:column; gap:.65rem; font-size:.875rem; color:var(--text-muted); }
.br-footer__about { font-size:.875rem; color:var(--text-muted); margin-block:1rem 1.25rem; }
.br-footer__social { display:flex; gap:1rem; }
.br-footer__social .br-i { width:1.3rem; height:1.3rem; }
.br-footer__legal { font-size:.68rem; color:var(--text-faint); line-height:1.6; background:color-mix(in srgb,var(--beige) 30%,transparent); padding:1rem; border-radius:var(--radius); }
html[data-theme="dark"] .br-footer__legal { background:var(--surface); }
.br-footer__safety { font-size:.66rem; color:var(--text-faint); line-height:1.6; background:color-mix(in srgb,var(--danger) 6%,transparent); border:1px solid color-mix(in srgb,var(--danger) 20%,transparent); padding:.75rem; border-radius:var(--radius); margin-top:.75rem; }
.br-footer__safety strong { color:var(--danger); }
.br-footer__bottom { display:flex; flex-direction:column; gap:1rem; align-items:center; justify-content:space-between; padding-top:2rem; border-top:1px solid var(--border); font-size:.72rem; color:var(--text-faint); }
@media (min-width:768px) { .br-footer__bottom { flex-direction:row; } }
.br-footer__bottom div { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }

/* ------------------------------------------------------------ 21. Pagination */
.br-pagination { display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin-top:2.5rem; }
.br-pagination .page-numbers {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:2.5rem; height:2.5rem; padding:0 .75rem;
    border:1px solid var(--border); border-radius:var(--radius-sm);
    background:var(--surface); font-size:.85rem; font-weight:600;
}
.br-pagination .page-numbers:hover { border-color:var(--accent); color:var(--accent); }
.br-pagination .page-numbers.current { background:var(--espresso); color:var(--ivory); border-color:var(--espresso); }
html[data-theme="dark"] .br-pagination .page-numbers.current { background:var(--caramel); color:var(--espresso); border-color:var(--caramel); }

/* ------------------------------------------------------------- 22. Utilities */
.br-center { text-align:center; }
.br-mt   { margin-top:1.25rem; }  .br-mt-lg { margin-top:2rem; }
.br-mb   { margin-bottom:1.25rem; } .br-mb-lg { margin-bottom:2rem; }
.br-muted { color:var(--text-muted); }
.br-faint { color:var(--text-faint); }
.br-small { font-size:.8rem; }
.br-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.br-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* WordPress core classes */
.alignleft  { float:left; margin:.5rem 1.5rem 1rem 0; }
.alignright { float:right; margin:.5rem 0 1rem 1.5rem; }
.aligncenter{ display:block; margin-inline:auto; }
.alignwide,.alignfull { max-width:100%; }
.wp-caption-text { font-size:.78rem; color:var(--text-faint); text-align:center; }
.screen-reader-text { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.br-legalmenu { list-style:none; display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }

/* Hero placeholder shown until a hero image is set in the Customizer */
.br-hero__empty {
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
    gap:.5rem; padding:2rem;
    height:clamp(320px,42vw,520px); border-radius:2rem;
    background:var(--surface); border:2px dashed var(--border); color:var(--text-faint);
}
.br-hero__empty .br-i { width:2.5rem; height:2.5rem; color:var(--accent); }
.br-hero__empty p { font-family:var(--font-serif); font-size:1.15rem; font-weight:700; color:var(--heading); }
.br-hero__empty small { font-size:.8rem; max-width:22rem; line-height:1.5; }

/* ==========================================================================
   23. Interactive tools
   ========================================================================== */

.br-tool__panel {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius-xl); padding:1.75rem; box-shadow:var(--shadow);
}
.br-tool__label {
    display:block; font-size:.7rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.12em; color:var(--text-faint); margin-bottom:.5rem;
}

/* Step ribbon above the diagnoser selects */
.br-tool__steps {
    list-style:none; display:flex; flex-wrap:wrap; gap:1.25rem;
    margin-bottom:1.25rem; padding-bottom:1rem; border-bottom:1px solid var(--border);
    font-size:.75rem; font-weight:600; color:var(--text-faint);
}
.br-tool__steps li { display:flex; align-items:center; gap:.45rem; }
.br-tool__steps span {
    width:1.35rem; height:1.35rem; border-radius:999px;
    background:color-mix(in srgb,var(--accent) 12%,transparent); color:var(--accent);
    font-family:var(--font-mono); font-size:.68rem; font-weight:700;
    display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.br-diagnoser--full { padding:1.75rem; }

/* Large search field for the fit checker */
.br-field--lg .br-i { left:1.1rem; width:1.3rem; height:1.3rem; }
.br-input--lg { padding:1.15rem 1.25rem 1.15rem 3.1rem; font-size:1.05rem; border-radius:var(--radius-lg); }
.br-mt-sm { margin-top:.5rem; }

/* Fit checker results */
.br-fit-card {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius-lg); padding:1.15rem 1.25rem;
    display:flex; flex-direction:column; gap:.65rem;
}
.br-fit-card__head { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; }
.br-fit-card__title { font-size:1.05rem; line-height:1.3; }
.br-fit-card__title a:hover { color:var(--accent); }
.br-fit-card__verdict { font-size:.875rem; color:var(--text-muted); line-height:1.55; }
.br-fit-card__verdict strong { color:var(--heading); }
.br-fit-card__foot { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:auto; padding-top:.5rem; }

/* Calculator */
.br-calc__grid { display:grid; gap:1.25rem; }
@media (min-width:640px) { .br-calc__grid { grid-template-columns:1fr 1fr; } }

.br-calc__out { margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid var(--border); }
.br-calc__headline { display:flex; align-items:baseline; flex-wrap:wrap; gap:.5rem .65rem; }
.br-calc__num {
    font-family:var(--font-serif); font-size:clamp(3rem,9vw,4.5rem); font-weight:700;
    line-height:1; color:var(--accent-strong);
}
html[data-theme="dark"] .br-calc__num { color:var(--caramel); }
.br-calc__unit { font-family:var(--font-serif); font-size:1.5rem; font-weight:700; color:var(--heading); }
.br-calc__sub { width:100%; font-size:.85rem; color:var(--text-faint); }
.br-calc__next { margin-top:1rem; font-weight:600; color:var(--heading); }
.br-calc__caveat {
    margin-top:1rem; font-size:.8rem; line-height:1.6; color:var(--medium);
    background:color-mix(in srgb,var(--medium) 8%,transparent);
    border:1px solid color-mix(in srgb,var(--medium) 22%,transparent);
    border-radius:var(--radius); padding:.75rem .9rem;
}
.br-calc__buy { margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:.75rem; align-items:flex-start; }

.br-schedule { margin-top:1.5rem; }
.br-schedule ul {
    list-style:none; margin-top:.65rem;
    display:grid; gap:.4rem; grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));
}
.br-schedule li {
    display:flex; align-items:center; gap:.6rem;
    font-size:.85rem; color:var(--text-muted);
    background:var(--surface-alt); border:1px solid var(--border);
    border-radius:var(--radius-sm); padding:.5rem .7rem;
}
.br-schedule li span {
    font-family:var(--font-mono); font-size:.68rem; font-weight:700;
    color:var(--accent); flex:0 0 auto;
}

/* Buttons used as filter chips need to look like the anchor version */
button.br-tag { font:inherit; font-size:.75rem; font-weight:500; cursor:pointer; }

/* ==========================================================================
   24. Editorial layer
   Magazine furniture — overlay feature card, category tiles, ranked picks —
   carrying funnel content rather than lifestyle content.
   ========================================================================== */

/* ---- Image placeholder. Used wherever a post has no featured image yet, so a
   fresh install looks composed instead of broken. Pure CSS: no request. ---- */
.br-ph { position:relative; display:grid; place-items:center; overflow:hidden; background:var(--espresso); }
.br-ph::after {
    content:""; position:absolute; inset:0;
    background:radial-gradient(120% 90% at 20% 10%, rgba(255,255,255,.10), transparent 60%);
}
.br-ph .br-i { width:2.25rem; height:2.25rem; color:var(--lightcoffee); opacity:.32; position:relative; z-index:1; }
.br-ph--1 { background:linear-gradient(135deg,#6B4226,#2A1E18); }
.br-ph--2 { background:linear-gradient(135deg,#B77A45,#3A2820); }
.br-ph--3 { background:linear-gradient(135deg,#394237,#211C18); }
.br-ph--4 { background:linear-gradient(135deg,#C58A5A,#4A3427); }
.br-ph--5 { background:linear-gradient(135deg,#3A2820,#171412); }
.br-ph--6 { background:linear-gradient(135deg,#8A6244,#2A1E18); }

/* ---- Featured block: one large overlay card + a stack of four ---- */
.br-featured { display:grid; gap:1.25rem; }
@media (min-width:1024px) { .br-featured { grid-template-columns:8fr 4fr; } }

.br-feature {
    position:relative; overflow:hidden; border-radius:var(--radius-xl);
    box-shadow:var(--shadow); min-height:26rem; display:flex;
}
@media (min-width:1024px) { .br-feature { min-height:31rem; } }
.br-feature .br-ph, .br-feature img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.br-feature img { transition:transform .6s ease; }
.br-feature:hover img { transform:scale(1.04); }
.br-feature__veil {
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(23,20,18,.94) 8%, rgba(23,20,18,.55) 45%, rgba(23,20,18,.08) 100%);
}
.br-feature__body { position:relative; align-self:flex-end; padding:1.75rem; width:100%; }
@media (min-width:768px) { .br-feature__body { padding:2.5rem; max-width:80%; } }
.br-feature__title {
    font-size:clamp(1.6rem,3.4vw,2.4rem); line-height:1.14; color:var(--ivory);
    text-wrap:balance; margin-block:.85rem .65rem;
}
.br-feature:hover .br-feature__title { text-decoration:underline; text-decoration-color:var(--caramel); text-decoration-thickness:2px; text-underline-offset:4px; }
.br-feature__dek { color:rgba(233,224,210,.9); font-size:.95rem; display:none; }
@media (min-width:768px) { .br-feature__dek { display:block; } }
.br-feature__meta { display:flex; flex-wrap:wrap; gap:1rem; margin-top:1rem; font-size:.75rem; color:var(--beige); }
.br-feature__meta span { display:inline-flex; align-items:center; gap:.35rem; }
.br-tag-solid {
    display:inline-block; background:var(--caramel); color:#fff;
    font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
    padding:.35rem .7rem; border-radius:var(--radius-sm);
}

.br-featurelist { display:flex; flex-direction:column; gap:1.25rem; }
.br-featurelist .br-mini {
    position:relative; display:flex; gap:1rem; align-items:center; flex:1;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:.75rem; transition:border-color .2s;
}
.br-mini:hover { border-color:var(--accent); }
.br-mini__thumb { width:5.25rem; height:5.25rem; border-radius:var(--radius-sm); overflow:hidden; flex:0 0 auto; }
.br-mini__thumb img, .br-mini__thumb .br-ph { width:100%; height:100%; object-fit:cover; }
.br-mini__thumb .br-i { width:1.5rem; height:1.5rem; }
.br-mini__title { font-family:var(--font-serif); font-weight:700; font-size:.98rem; line-height:1.25; color:var(--heading); }
.br-mini:hover .br-mini__title { color:var(--accent); }

/* ---- Category tiles ---- */
.br-cats { display:grid; gap:1rem; }
@media (min-width:640px)  { .br-cats { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px) { .br-cats { grid-template-columns:repeat(3,1fr); } }
.br-cats--lead { grid-column:span 1; }
@media (min-width:1024px) { .br-cats--lead { grid-column:span 3; } }
@media (min-width:1024px) { .br-cats--half { grid-column:span 3; } }

.br-cat {
    position:relative; display:block; overflow:hidden;
    border-radius:var(--radius-xl); min-height:11rem;
    box-shadow:var(--shadow);
}
.br-cat--tall { min-height:15rem; }
.br-cat .br-ph, .br-cat img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.br-cat img { transition:transform .55s ease; }
.br-cat:hover img { transform:scale(1.05); }
.br-cat__veil { position:absolute; inset:0; background:linear-gradient(to top, rgba(23,20,18,.88), rgba(23,20,18,.15) 70%); }
.br-cat__body { position:absolute; inset:auto 0 0 0; padding:1.15rem 1.25rem; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; }
.br-cat__name { font-family:var(--font-serif); font-weight:700; font-size:1.2rem; color:var(--ivory); line-height:1.2; }
.br-cat__count { font-size:.72rem; color:rgba(233,224,210,.75); margin-top:.2rem; display:block; }
.br-cat__go {
    width:2rem; height:2rem; border-radius:999px; flex:0 0 auto;
    background:rgba(247,243,236,.16); color:var(--ivory);
    display:flex; align-items:center; justify-content:center;
    transition:background-color .2s;
}
.br-cat:hover .br-cat__go { background:var(--caramel); }

/* ---- Ranked picks, dark panel ---- */
.br-picks { background:var(--espresso); color:var(--beige); border-radius:var(--radius-xl); padding:1.5rem; }
html[data-theme="dark"] .br-picks { background:var(--surface); }
.br-picks__title { font-size:1.35rem; color:var(--beige); margin-bottom:1.25rem; }
.br-picks ol { list-style:none; display:flex; flex-direction:column; gap:1.15rem; }
.br-picks li { display:flex; gap:1rem; align-items:flex-start; }
.br-picks__n { font-family:var(--font-serif); font-size:1.5rem; font-weight:700; color:var(--caramel); line-height:1; flex:0 0 auto; }
.br-picks li:nth-child(2) .br-picks__n { opacity:.8; }
.br-picks li:nth-child(3) .br-picks__n { opacity:.62; }
.br-picks li:nth-child(4) .br-picks__n { opacity:.48; }
.br-picks li:nth-child(5) .br-picks__n { opacity:.36; }
.br-picks__name { font-weight:600; color:var(--ivory); display:block; line-height:1.3; }
.br-picks li:hover .br-picks__name { color:var(--caramel); }
.br-picks__sub { font-size:.75rem; color:rgba(233,224,210,.7); margin-top:.25rem; display:block; }

/* ---- Editorial news card ---- */
.br-news { display:block; }
.br-news__thumb { border-radius:var(--radius); overflow:hidden; height:11rem; margin-bottom:.9rem; }
.br-news__thumb img, .br-news__thumb .br-ph { width:100%; height:100%; object-fit:cover; }
.br-news__thumb img { transition:transform .5s ease; }
.br-news:hover .br-news__thumb img { transform:scale(1.04); }
.br-news__title { font-size:1.12rem; line-height:1.3; margin-block:.5rem .45rem; }
.br-news:hover .br-news__title { color:var(--accent); }
.br-news__dek { font-size:.85rem; color:var(--text-muted); }

/* ==========================================================================
   25. Reference layout
   Structures taken from the supplied design: offset hero stack, bento
   category grid, and the split section whose headline box overlaps its image.
   ========================================================================== */

:root { --ink-blue:#395697; }
html[data-theme="dark"] { --ink-blue:#6A92D2; }
@media (prefers-color-scheme:dark) { html:not([data-theme="light"]) { --ink-blue:#6A92D2; } }

/* ---- Hero: image sits on an offset tint block, badge floats over it ---- */
.br-hero__frame { position:relative; }
.br-hero__frame::before {
    content:""; position:absolute; inset:0; z-index:-1;
    border-radius:2rem; transform:translate(1rem,1rem);
    background:linear-gradient(to top right, color-mix(in srgb,var(--accent) 20%,transparent), transparent);
    transition:transform .4s ease;
}
.br-hero__frame:hover::before { transform:translate(1.5rem,1.5rem); }
.br-hero__shot { overflow:hidden; border-radius:2rem; box-shadow:var(--shadow); }
.br-hero__shot img, .br-hero__shot .br-ph {
    width:100%; height:clamp(320px,44vw,600px); object-fit:cover;
    transition:transform .7s ease;
}
.br-hero__frame:hover .br-hero__shot img { transform:scale(1.05); }

.br-hero__badge {
    position:absolute; bottom:2rem; left:-1.5rem;
    display:none; align-items:center; gap:1rem;
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow);
}
@media (min-width:768px) { .br-hero__badge { display:flex; } }
.br-hero__badge-ic {
    width:3rem; height:3rem; border-radius:999px; flex:0 0 auto;
    background:var(--surface-alt); color:var(--accent);
    display:flex; align-items:center; justify-content:center;
}
.br-hero__badge b { display:block; font-family:var(--font-serif); font-size:1.1rem; color:var(--heading); line-height:1.2; }
.br-hero__badge small { font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; font-weight:600; color:var(--text-faint); }

/* ---- Bento category grid: 7 / 5 then 4 / 4 / 4 ---- */
.br-bento { display:grid; gap:1rem; }
@media (min-width:768px)  { .br-bento { grid-template-columns:repeat(12,1fr); } }
@media (min-width:1024px) { .br-bento { gap:1.5rem; } }
.br-bento .br-cat { min-height:250px; }
@media (min-width:768px) {
    .br-bento__a { grid-column:span 7; }
    .br-bento__b { grid-column:span 5; }
    .br-bento__c { grid-column:span 4; }
    .br-bento__a .br-cat, .br-bento__b .br-cat, .br-bento .br-cat--lg { min-height:340px; }
    .br-bento__c .br-cat, .br-bento .br-cat--sm { min-height:260px; }
}
.br-cat--sm .br-cat__name { font-size:1.15rem; }
.br-cat--sm .br-cat__count { text-transform:uppercase; letter-spacing:.08em; font-size:.66rem; font-weight:600; }
.br-cat--lg .br-cat__name { font-size:clamp(1.35rem,2.4vw,1.85rem); }
.br-cat__go--glass { background:rgba(247,243,236,.2); backdrop-filter:blur(4px); width:2.5rem; height:2.5rem; box-shadow:var(--shadow); }

/* ---- Split: two compact list items beside one overlapping-headline story ---- */
.br-split { display:grid; gap:2rem; }
@media (min-width:1024px) { .br-split { grid-template-columns:5fr 7fr; } }
.br-splitcol { display:flex; flex-direction:column; justify-content:space-between; gap:1.5rem; }

.br-listitem { display:flex; gap:1rem; align-items:flex-start; padding-bottom:1.5rem; border-bottom:1px solid var(--border-soft); }
.br-listitem:last-child { border-bottom:0; padding-bottom:0; }
.br-listitem__body { flex:1; min-width:0; }
.br-listitem__kicker { display:block; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-blue); margin-bottom:.4rem; }
.br-listitem__title { font-size:1.06rem; line-height:1.35; margin-bottom:.5rem; }
.br-listitem:hover .br-listitem__title { color:var(--ink-blue); }
.br-listitem__dek { font-size:.78rem; line-height:1.6; color:var(--text-muted); margin-bottom:.75rem; }
.br-listitem__meta { display:flex; flex-wrap:wrap; gap:.85rem; font-size:.68rem; font-weight:500; color:var(--text-faint); }
.br-listitem__meta span { display:inline-flex; align-items:center; gap:.25rem; }
.br-listitem__thumb { width:110px; height:80px; flex:0 0 auto; overflow:hidden; box-shadow:var(--shadow); margin-top:.25rem; }
.br-listitem__thumb img, .br-listitem__thumb .br-ph { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.br-listitem:hover .br-listitem__thumb img { transform:scale(1.03); }

/* The headline block deliberately overlaps the image below it. */
.br-overlap { position:relative; display:flex; flex-direction:column; min-height:320px; }
.br-overlap__head { position:relative; z-index:10; margin-bottom:-1.25rem; margin-left:.75rem; max-width:95%; padding-top:.25rem; }
@media (min-width:768px) { .br-overlap__head { margin-bottom:-1.5rem; margin-left:1rem; } }
.br-overlap__title { font-size:clamp(1.35rem,2.6vw,1.875rem); line-height:1.3; letter-spacing:-.01em; }
.br-overlap__title span {
    background:#fff; color:#111;
    -webkit-box-decoration-break:clone; box-decoration-break:clone;
    padding:.25rem .55rem; box-shadow:var(--shadow);
    transition:color .2s;
}
@media (min-width:768px) { .br-overlap__title span { padding:.25rem .625rem; } }
html[data-theme="dark"] .br-overlap__title span { background:var(--beige); color:var(--darkbg,#171412); }
@media (prefers-color-scheme:dark) { html:not([data-theme="light"]) .br-overlap__title span { background:var(--beige); color:#171412; } }
.br-overlap:hover .br-overlap__title span { color:var(--ink-blue); }
.br-overlap__img { position:relative; z-index:0; flex:1; min-height:260px; overflow:hidden; box-shadow:var(--shadow); }
.br-overlap__img img, .br-overlap__img .br-ph { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.br-overlap:hover .br-overlap__img img { transform:scale(1.03); }

/* ---- Deal row: discount chip, live price, struck-through was-price ---- */
.br-deal__off {
    display:inline-block; font-size:.66rem; font-weight:700;
    background:color-mix(in srgb,var(--copper) 12%,transparent); color:var(--copper);
    padding:.1rem .4rem; border-radius:var(--radius-sm); margin-bottom:.25rem;
}
.br-deal__prices { display:flex; align-items:center; gap:.5rem; margin-top:.25rem; }
.br-deal__now { font-size:.85rem; font-weight:700; color:var(--amazon); }
.br-deal__was { font-size:.72rem; color:var(--text-faint); text-decoration:line-through; }

/* Picks panel runs to six on the reference layout */
.br-picks li:nth-child(6) .br-picks__n { opacity:.28; }

/* CTA band carries a background image at low opacity */
.br-cta__bg { position:absolute; inset:0; opacity:.2; }
.br-cta__bg img, .br-cta__bg .br-ph { width:100%; height:100%; object-fit:cover; }

/* Featured small cards: 96px thumb, matching the reference */
.br-mini__thumb { width:6rem; height:6rem; }
.br-flame { color:var(--copper); width:1.25rem; height:1.25rem; }

/* ==========================================================================
   26. Split section — refinement
   The reference establishes the idea (headline block overlapping its image).
   These rules settle it: balanced line breaks so no orphan word is left on
   its own row, softened corners to match the rest of the theme, and a scrim
   so the white block meets a darker area of the picture instead of floating.
   ========================================================================== */

@media (min-width:1024px) { .br-split { gap:3rem; } }
.br-splitcol { gap:2rem; }

/* ---- List items ---- */
.br-listitem {
    gap:1.25rem; padding-bottom:1.75rem;
    border-bottom:0; position:relative;
    transition:transform .25s ease;
}
/* A hairline that fades out at both ends reads softer than a full rule. */
.br-listitem:not(:last-child)::after {
    content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
    background:linear-gradient(to right, transparent, var(--border) 12%, var(--border) 88%, transparent);
}
.br-listitem:hover { transform:translateX(2px); }

.br-listitem__kicker { letter-spacing:.16em; margin-bottom:.5rem; }
.br-listitem__title { font-size:1.1rem; line-height:1.38; letter-spacing:-.005em; text-wrap:balance; margin-bottom:.55rem; }
.br-listitem__dek { line-height:1.7; margin-bottom:.9rem; }
.br-listitem__meta { gap:1rem; font-variant-numeric:tabular-nums; }
.br-listitem__meta .br-i { width:.85rem; height:.85rem; opacity:.6; }

.br-listitem__thumb {
    width:116px; height:88px; border-radius:var(--radius);
    box-shadow:0 6px 18px -10px rgba(42,30,24,.45);
    transition:box-shadow .25s ease;
}
html[data-theme="dark"] .br-listitem__thumb { box-shadow:0 6px 18px -10px rgba(0,0,0,.7); }
.br-listitem:hover .br-listitem__thumb { box-shadow:0 10px 24px -10px rgba(42,30,24,.55); }

/* ---- Overlapping headline ---- */
.br-overlap__head { margin-left:1.25rem; margin-bottom:-1.6rem; max-width:88%; }
@media (min-width:768px) { .br-overlap__head { margin-left:1.5rem; margin-bottom:-2rem; } }

.br-overlap__title {
    /* balance keeps the last line from stranding a single short word */
    text-wrap:balance;
    font-size:clamp(1.3rem,2.3vw,1.7rem);
    line-height:1.42; letter-spacing:-.012em;
}
.br-overlap__title span {
    border-radius:4px;
    padding:.3rem .7rem;
    box-shadow:0 12px 32px -14px rgba(42,30,24,.55);
    /* the clone box-decoration leaves rows touching; a little breathing room
       between them is what stops the stack reading as a jagged staircase */
    line-height:2.05;
}
html[data-theme="dark"] .br-overlap__title span { box-shadow:0 12px 32px -14px rgba(0,0,0,.8); }

.br-overlap__img { border-radius:var(--radius-xl); box-shadow:0 18px 40px -22px rgba(42,30,24,.5); }
html[data-theme="dark"] .br-overlap__img { box-shadow:0 18px 40px -22px rgba(0,0,0,.75); }
/* Darken the top of the picture so the white block lands on contrast. */
.br-overlap__img::after {
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(to bottom, rgba(23,20,18,.42), rgba(23,20,18,0) 38%);
}

/* ==========================================================================
   27. Placeholder polish
   A missing photo should look like a designed panel, not a dead rectangle.
   Two faint rings plus a warm sheen give it depth at zero request cost.
   ========================================================================== */
.br-ph::before {
    content:""; position:absolute; z-index:0;
    width:min(120%,26rem); aspect-ratio:1; border-radius:50%;
    border:1px solid rgba(247,243,236,.08);
    box-shadow:0 0 0 1px rgba(247,243,236,.04) inset,
               0 0 0 3.5rem rgba(247,243,236,.028) inset;
    transform:translate(18%,22%);
}
.br-ph::after {
    background:
        radial-gradient(80% 60% at 22% 8%, rgba(255,244,228,.16), transparent 62%),
        radial-gradient(60% 50% at 88% 96%, rgba(0,0,0,.28), transparent 60%);
}
.br-ph .br-i { width:2.75rem; height:2.75rem; opacity:.22; stroke-width:1.2; }
.br-mini__thumb .br-ph .br-i,
.br-listitem__thumb .br-ph .br-i,
.br-kitrow .br-ph .br-i { width:1.5rem; height:1.5rem; }
.br-mini__thumb .br-ph::before,
.br-listitem__thumb .br-ph::before,
.br-kitrow .br-ph::before { width:150%; transform:translate(22%,26%); }

/* Warmer, less muddy placeholder gradients */
.br-ph--1 { background:linear-gradient(142deg,#7A4C2C 0%,#4A3122 55%,#2A1E18 100%); }
.br-ph--2 { background:linear-gradient(142deg,#C08A54 0%,#7A5334 55%,#3A2820 100%); }
.br-ph--3 { background:linear-gradient(142deg,#4C5A48 0%,#33402F 55%,#211C18 100%); }
.br-ph--4 { background:linear-gradient(142deg,#D09A68 0%,#8A6242 55%,#4A3427 100%); }
.br-ph--5 { background:linear-gradient(142deg,#5A4034 0%,#33251E 55%,#171412 100%); }
.br-ph--6 { background:linear-gradient(142deg,#9C7150 0%,#5E432F 55%,#2A1E18 100%); }

/* ==========================================================================
   28. News card — fix and finish
   The thumb is a <span> so the markup stays valid inside the wrapping <a>.
   Without display:block it stays inline, which silently kills both the fixed
   height and the corner clipping, and lets the title collide with the image.
   ========================================================================== */
.br-news { display:block; }
.br-news__thumb { display:block; height:12rem; margin-bottom:1rem; border-radius:var(--radius); }
.br-news .br-eyebrow { display:block; margin-bottom:.45rem; }
.br-news__title { font-size:1.22rem; line-height:1.32; text-wrap:balance; margin:0 0 .5rem; }
.br-news__dek { font-size:.875rem; line-height:1.65; }

/* Generous row rhythm, tighter columns — the reference sets them separately. */
.br-newsgrid { display:grid; gap:2.5rem 1.5rem; }
@media (min-width:640px) { .br-newsgrid { grid-template-columns:repeat(2,1fr); } }

/* ==========================================================================
   29. Index columns
   A dense two-column listing: thumb left, two-line title, date + read time.
   Titles here use the sans face on purpose — this block is scanned, not read,
   and Playfair at this size and density gets noisy. The serif stays on the
   feature and news cards, which is where reading actually happens.
   ========================================================================== */
.br-index { display:grid; gap:2.5rem; }
@media (min-width:768px) { .br-index { grid-template-columns:repeat(2,1fr); gap:3rem; } }

.br-index__head {
    display:flex; align-items:center; gap:.6rem;
    padding-bottom:.85rem; margin-bottom:1.35rem;
    border-bottom:1px solid var(--border);
}
.br-index__head .br-i { width:1.15rem; height:1.15rem; color:var(--text-faint); flex:0 0 auto; }
.br-index__title {
    font-family:var(--font-sans); font-size:1.3rem; font-weight:700;
    letter-spacing:-.015em; color:var(--heading); line-height:1.2;
}
.br-index__more { margin-left:auto; font-size:.75rem; }

.br-index__list { display:flex; flex-direction:column; gap:1.35rem; }

.br-idx { display:flex; gap:1rem; align-items:flex-start; }
.br-idx__thumb {
    display:block; width:104px; height:76px; flex:0 0 auto;
    border-radius:5px; overflow:hidden;
}
.br-idx__thumb img, .br-idx__thumb .br-ph { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.br-idx:hover .br-idx__thumb img { transform:scale(1.05); }
.br-idx__thumb .br-ph .br-i { width:1.35rem; height:1.35rem; }
.br-idx__thumb .br-ph::before { width:170%; transform:translate(26%,28%); }

.br-idx__body { flex:1; min-width:0; padding-top:.1rem; }
.br-idx__title {
    font-family:var(--font-sans); font-size:.95rem; font-weight:700;
    line-height:1.42; letter-spacing:-.005em; color:var(--heading);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    transition:color .18s;
}
.br-idx:hover .br-idx__title { color:var(--accent-strong); }
html[data-theme="dark"] .br-idx:hover .br-idx__title { color:var(--caramel); }

.br-idx__meta {
    display:flex; align-items:center; gap:.45rem;
    margin-top:.45rem; font-size:.78rem; color:var(--text-faint);
    font-variant-numeric:tabular-nums;
}
.br-idx__meta i { width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.6; display:block; }

/* ==========================================================================
   30. Serif everywhere a title appears
   One face for titles across the whole theme. Playfair needs slightly more
   size and leading than Inter to stay legible at list density, and none of
   the negative tracking that a grotesque wants — so the sizes are re-set
   here rather than only the family being swapped.
   ========================================================================== */
.br-index__title {
    font-family:var(--font-serif);
    font-size:1.4rem; font-weight:700; letter-spacing:0; line-height:1.18;
}
.br-idx__title {
    font-family:var(--font-serif);
    font-size:1.02rem; font-weight:700; letter-spacing:0; line-height:1.4;
}
.br-prose h4 { font-family:var(--font-serif); font-size:1.12rem; font-weight:700; }
.br-faq summary h3,
.br-faq summary h2 { font-family:var(--font-serif); font-size:1.02rem; font-weight:700; letter-spacing:0; }

/* Uppercase micro-labels stay on the sans face. At 10px with wide tracking a
   serif loses its hairlines and the label stops being readable — these are
   labels, not titles, so they are not part of the same system. */
/* These two inherit from body rather than from a heading tag, so the family
   has to be stated explicitly or they silently stay on the sans face. */
.br-picks__name { font-family:var(--font-serif); font-weight:700; font-size:1rem; line-height:1.32; }
.br-kitrow__name { font-family:var(--font-serif); font-weight:700; }

/* Inline diagrams inside article prose */
.br-prose .br-fig { margin:2rem 0; }
.br-prose .br-fig svg { width:100%; height:auto; display:block; }
.br-prose .br-fig figcaption { font-size:.78rem; color:var(--text-faint); margin-top:.6rem; text-align:center; }

/* ---------------------------------------------------------------------------
   25. Grid overflow guard
   `fr` tracks default to min-width:auto, so a single wide child sets the floor
   for the whole column. The monospace spec chips did exactly that: the article
   column demanded 1296px inside a 1256px grid, and the sidebar was crushed to
   141px. Three fixes, in order of importance: let grid children shrink below
   their content, let the spec tracks shrink, and let long values wrap.
--------------------------------------------------------------------------- */
.br-grid > * { min-width:0; }
.br-specs { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:640px) { .br-specs { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.br-specs__v { overflow-wrap:anywhere; }
.br-widget__title { overflow-wrap:normal; }
/* `.br-pn` is nowrap so short part numbers stay on one line. Inside a spec
   chip the value is often a whole phrase, which then overflowed the card and
   was clipped mid-word. Let it wrap there only. */
.br-specs .br-pn { white-space:normal; overflow-wrap:anywhere; }

/* Mobile overflow, measured at 375px and fixed in this order:
   the buy box grid item sized itself to the image's intrinsic width; the
   plugin's product-card thumbnail strip ran past the viewport instead of
   scrolling; and `.br-pn` inside `.br-meta` refused to wrap. Each one alone
   pushed the document to 426px wide. */
.br-buybox__grid > * { min-width:0; }
.br-buybox__img, .br-buybox__img img { max-width:100%; }
.br-meta { flex-wrap:wrap; }
.br-meta > * { min-width:0; overflow-wrap:anywhere; }
.br-meta .br-pn { white-space:normal; overflow-wrap:anywhere; }
.acms-card__gallery-thumbs { max-width:100%; overflow-x:auto; }
.acms-card__gallery, .acms-card__inner, .acms-card__features { min-width:0; max-width:100%; }

/* `.br-footer ul` sets flex-direction:column for the footer link columns, and
   it outranks `.br-legalmenu` on specificity (two selectors beat one class).
   The legal row therefore stacked. Restate the direction with enough weight,
   and let it wrap onto two lines on narrow screens rather than overflowing. */
.br-footer .br-legalmenu { flex-direction:row; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:center; }