/* ============================================================
   MeetBG background detail pages + library hub
   Layout only — colours come from theme-*.css tokens.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.5px;color:var(--nt-muted);padding:8px 0 0}
.crumbs a{color:var(--nt-muted);text-decoration:none}
.crumbs a:hover{color:var(--nt-accent2)}
.crumbs span[aria-current]{color:var(--nt-ink)}

.bp{padding:28px 0 64px}
.bp-top{padding-top:8px}

.bp-hero{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:32px;align-items:start;margin-bottom:40px}
.bp-figure{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--nt-line);background:var(--nt-surface);box-shadow:0 24px 60px rgba(0,0,0,.35)}
.bp-figure img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

.eyebrow{display:inline-block;margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--nt-accent2)}
.bp h1{font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.12;letter-spacing:-.02em;margin:0 0 12px}
.lede{margin:0 0 20px;font-size:1rem;line-height:1.6;color:var(--nt-muted)}

.bp-download{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:15px 22px;border-radius:12px;background:var(--nt-accent);color:#1a0f05 !important;font-weight:800;font-size:15px;text-decoration:none;box-shadow:0 10px 26px rgba(255,140,46,.28)}
.bp-download:hover{background:var(--nt-accent2)}

.spec-table{width:100%;border-collapse:collapse;margin-top:20px;font-size:13px}
.spec-table th,.spec-table td{padding:9px 0;border-bottom:1px solid var(--nt-line);text-align:left;vertical-align:top}
.spec-table th{width:38%;font-weight:600;color:var(--nt-muted)}
.spec-table td{color:var(--nt-ink)}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}

.bp-block{margin:0 0 40px}
.bp-block h2{font-size:1.35rem;margin:0 0 12px;letter-spacing:-.01em}
.bp-block h2 .count{font-size:.85rem;font-weight:600;color:var(--nt-muted);margin-left:6px}
.section-sub{margin:-6px 0 18px;color:var(--nt-muted);font-size:.95rem}
.bp-block p{margin:0 0 12px;line-height:1.7;color:var(--nt-muted)}
.bp-block p a{color:var(--nt-accent2)}

.bp-list{margin:0 0 14px;padding-left:20px;line-height:1.8;color:var(--nt-muted)}
.bp-steps{margin:0;padding-left:22px;line-height:1.75;color:var(--nt-muted)}
.bp-steps li{margin-bottom:8px}
.bp-steps b{color:var(--nt-ink)}

.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.jump a{display:inline-flex;gap:8px;align-items:center;padding:8px 14px;border:1px solid var(--nt-line);border-radius:999px;background:var(--nt-surface);color:var(--nt-ink);text-decoration:none;font-size:13px;font-weight:600}
.jump a span{color:var(--nt-muted);font-weight:500}
.jump a:hover{border-color:var(--nt-accent);color:var(--nt-accent2)}

.bpgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.bgcard{display:block;border:1px solid var(--nt-line);border-radius:14px;overflow:hidden;background:var(--nt-surface);text-decoration:none;transition:transform .15s ease,border-color .15s ease}
.bgcard:hover{transform:translateY(-2px);border-color:var(--nt-accent)}
.bgcard img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.bgname{display:block;padding:9px 11px 11px;font-size:12.5px;font-weight:600;color:var(--nt-ink);line-height:1.35}

.bp-more{margin-top:16px !important;font-size:.92rem}

@media(max-width:900px){
  .bp-hero{grid-template-columns:1fr;gap:22px}
  .bpgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  .wrap{padding:0 16px}
  .bpgrid{grid-template-columns:1fr 1fr;gap:10px}
  .bgname{font-size:11.5px;padding:7px 9px 9px}
  .bp{padding:18px 0 44px}
}

/* keep the floating Halloween decorations off content pages */
body[data-theme="halloween"]::before,
body[data-theme="halloween"]::after{display:none}
footer{padding-bottom:54px}