/* The Backs blog. White page, black type, rounded boxed pictures that are always a real Backs new tab; no accent colour,
   the playfulness lives inside the pictures. Everything sits under .bl so Admin can show an article as a preview with this
   same file. Values are the design hand-off's: design/blog/README.md. Pages are built by functions/lib/articleRender.js. */
.bl { --ink:#111; --body:#333; --secondary:#555; --muted:#777; --border:#E2E2E2; --divider:#EEE; --wash:#F4F4F4;
  font:400 15px/1.5 'Be Vietnam Pro', sans-serif; color:var(--ink); background:#fff; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body.bl { margin:0; min-height:100vh; display:flex; flex-direction:column; }
.bl *, .bl *::before, .bl *::after { box-sizing:border-box; }
.bl a { color:inherit; }
.bl :focus-visible { outline:2px solid var(--ink); outline-offset:2px; border-radius:4px; }
.bl-visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.bl-skip { position:absolute; left:-9999px; top:8px; padding:10px 14px; background:var(--ink); color:#fff !important; border-radius:10px; font-weight:700; z-index:10; }
.bl-skip:focus { left:8px; }
@media (min-width:721px) { .bl .bl-narrow { display:none !important; } }
@media (max-width:720px) { .bl .bl-wide { display:none !important; } }

/* header */
.bl-header { border-bottom:1px solid var(--divider); }
.bl-header__inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; }
.bl-brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.bl-brand__name { font:700 19px/1 'Be Vietnam Pro', sans-serif; }
.bl-brand__rule { width:1px; height:18px; background:#D6D6D6; }
.bl-brand__section { font:400 19px/1 'Be Vietnam Pro', sans-serif; color:var(--secondary); }
.bl-nav { display:flex; align-items:center; gap:28px; }
.bl-nav > a:not(.bl-btn) { font:700 14px/1 'Be Vietnam Pro', sans-serif; text-decoration:none; }
.bl-nav > a:not(.bl-btn):hover { color:var(--secondary); }
@media (max-width:720px) { .bl-brand__name, .bl-brand__section { font-size:17px; } }

/* buttons, chips */
.bl-btn { display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border:0; border-radius:12px; background:var(--ink); color:#fff !important;
  font:700 13px/1 'Be Vietnam Pro', sans-serif; text-decoration:none; white-space:nowrap; cursor:pointer; }
.bl-btn:hover { background:#333; }
.bl-btn--quiet { border:2px solid var(--border); background:#fff; color:var(--ink) !important; font-size:14px; padding:0 22px; }
.bl-btn--quiet:hover { background:var(--wash); }
.bl-chip { flex:none; display:inline-flex; align-items:center; height:44px; padding:0 14px; border-radius:10px; border:2px solid var(--border); background:#fff; font:700 13px/1 'Be Vietnam Pro', sans-serif; text-decoration:none; cursor:pointer; }
.bl-chip:hover { background:var(--wash); }
.bl-chip.is-on { border-color:var(--ink); background:var(--ink); color:#fff; }
.bl-chip.is-on:hover { background:#333; border-color:#333; }
.bl-label { font:700 12px/1 'Be Vietnam Pro', sans-serif; color:var(--muted); }

/* pictures and the Backons on them */
.bl-pic { position:relative; display:block; overflow:hidden; border-radius:22px; background-color:var(--wash); background-size:cover; background-repeat:no-repeat; transition:box-shadow .2s ease; }
.bl-fade { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.62) 100%); }
.bl-pic--featured, .bl-pic--missing { min-height:clamp(420px, 42vw, 520px); box-shadow:0 20px 44px -22px rgba(0,0,0,.35); }
.bl-pic--missing { min-height:0; aspect-ratio:2/1; }
.bl-pic--card { aspect-ratio:16/10; box-shadow:0 14px 34px -20px rgba(0,0,0,.35); }
.bl-pic--cover { aspect-ratio:2/1; box-shadow:0 20px 44px -22px rgba(0,0,0,.35); }
.bl-pic--figure { aspect-ratio:2/1; }
.bl-pic--inner { aspect-ratio:16/9; border-radius:16px; }
.bl-pic--try { height:126px; border-radius:16px; }
.bl-layer, .bl-backon, .bl-card__backon { position:absolute; display:block; height:auto; }
.bl-layer--featured { right:clamp(22px, 3.08vw, 40px); top:clamp(22px, 3.08vw, 40px); width:clamp(294px, 41vw, 534px); }
.bl-layer--featured-narrow { left:22px; top:22px; width:189px; }
.bl-layer--cover { inset:0; width:100%; height:100%; }
.bl-layer--cover-narrow { left:22px; top:22px; width:min(310px, calc(100% - 44px)); }
.bl-layer--cover-narrow.is-right { left:auto; right:22px; }
.bl-card__backon { left:18px; top:18px; width:calc(var(--w) * .6px); }
.bl-backon { top:24px; width:calc(var(--w) * .8px); }
.bl-backon--1 { left:24px; }
.bl-backon--2 { right:24px; }
.bl-try__backon { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }
@media (max-width:720px) {
  .bl-pic--featured { min-height:0; aspect-ratio:4/5; }
  .bl-pic--missing, .bl-pic--cover, .bl-pic--figure { aspect-ratio:4/3; }
  .bl-pic--try { height:110px; }
  .bl-card__backon { width:calc(var(--w) * .55px); }
  .bl-backon { top:16px; width:calc(var(--w) * .55px); }
  .bl-backon--1 { left:16px; } .bl-backon--2 { right:16px; }
}

/* index */
.bl-main { flex:1; width:100%; max-width:1200px; margin:0 auto; padding:28px 20px 72px; display:flex; flex-direction:column; gap:32px; }
.bl-main:focus { outline:none; }
.bl-card { display:flex; flex-direction:column; gap:12px; text-decoration:none; color:var(--ink); transition:transform .2s ease; }
.bl-card:hover { transform:translateY(-2px); }
.bl-card:hover .bl-pic { box-shadow:0 22px 44px -20px rgba(0,0,0,.45); }
.bl-card__title { position:absolute; left:20px; right:20px; bottom:18px; margin:0; color:#fff; font:700 22px/1.15 'Be Vietnam Pro', sans-serif; letter-spacing:-.025em; text-wrap:balance; text-shadow:0 1px 2px rgba(0,0,0,.2); }
.bl-card__meta { font-size:13px; color:var(--muted); padding:0 4px; }
.bl-featured__text { position:absolute; left:clamp(22px, 3vw, 40px); right:clamp(22px, 3vw, 40px); bottom:clamp(22px, 3vw, 36px); display:flex; flex-direction:column; gap:12px; max-width:700px; color:#fff; }
.bl-featured__meta { font:500 13px/1 'Be Vietnam Pro', sans-serif; color:rgba(255,255,255,.9); }
.bl-featured__title { margin:0; font:700 clamp(30px, 3.6vw, 44px)/1.05 'Be Vietnam Pro', sans-serif; letter-spacing:-.035em; text-wrap:balance; text-shadow:0 1px 2px rgba(0,0,0,.2); }
.bl-filter { display:flex; align-items:center; justify-content:space-between; gap:12px 16px; flex-wrap:wrap; }
.bl-chips { display:flex; gap:8px; overflow:auto; scrollbar-width:none; max-width:100%; }
.bl-chips::-webkit-scrollbar { display:none; }
.bl-filter__side { display:flex; align-items:center; gap:16px; flex:1 1 auto; justify-content:flex-end; }
.bl-search { width:280px; max-width:100%; height:44px; padding:0 14px; border:2px solid var(--border); border-radius:12px; font:400 14px/1 'Be Vietnam Pro', sans-serif; color:var(--ink); background:#fff; outline:none; }
.bl-search:focus { border-color:var(--ink); }
.bl-count { font-size:13px; color:var(--muted); white-space:nowrap; }
.bl-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap:32px 28px; }
.bl-grid > [hidden] { display:none; }
.bl-more { display:flex; flex-direction:column; align-items:center; gap:12px; padding-top:8px; }
.bl-more[hidden], .bl-empty[hidden] { display:none; }
.bl-more__label { font-size:13px; color:var(--muted); }
.bl-empty { display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:40px 0 24px; max-width:480px; }
.bl-empty h3 { margin:0; font:700 22px/1.2 'Be Vietnam Pro', sans-serif; letter-spacing:-.02em; }
.bl-empty p { margin:0; font-size:15px; color:var(--secondary); }
@media (max-width:720px) {
  .bl-main { gap:24px; }
  .bl-card__title { font-size:20px; }
  .bl-filter__side { order:-1; flex:1 1 100%; }
  .bl-search { width:100%; }
  .bl-more .bl-btn { width:100%; height:48px; }
}

/* article */
.bl-main:has(.bl-head) { padding-top:clamp(28px, 4vw, 48px); gap:clamp(24px, 3vw, 40px); }
.bl-head { max-width:800px; width:100%; margin:0 auto; display:flex; flex-direction:column; gap:18px; align-items:flex-start; }
.bl-kind { display:inline-flex; align-items:center; height:30px; padding:0 12px; border-radius:8px; border:2px solid var(--ink); font:700 12px/1 'Be Vietnam Pro', sans-serif; text-decoration:none; }
.bl-kind:hover { background:var(--wash); }
.bl-title { margin:0; font:700 clamp(34px, 4.4vw, 52px)/1.06 'Be Vietnam Pro', sans-serif; letter-spacing:-.035em; text-wrap:balance; }
.bl-intro { margin:0; font:300 clamp(18px, 1.8vw, 21px)/1.45 'Be Vietnam Pro', sans-serif; color:var(--body); text-wrap:pretty; }
.bl-byline { display:flex; align-items:center; gap:14px; padding-top:4px; font-size:14px; line-height:1.45; color:var(--secondary); }
.bl-byline b { color:var(--ink); font-weight:700; }
.bl-avatar { flex:none; width:36px; height:36px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font:700 14px/1 'Be Vietnam Pro', sans-serif; }
.bl-body { display:grid; grid-template-columns:200px minmax(0, 720px); gap:40px; justify-content:center; align-items:start; }
.bl-toc { position:sticky; top:24px; display:flex; flex-direction:column; gap:10px; padding-top:8px; font-size:13px; line-height:1.4; }
.bl-toc .bl-label { margin-bottom:4px; }
.bl-toc a { color:var(--secondary); text-decoration:none; }
.bl-toc a:hover, .bl-toc a.is-current { color:var(--ink); }
.bl-toc a.is-current { font-weight:700; }
.bl-article { display:flex; flex-direction:column; gap:28px; color:var(--body); min-width:0; font:400 17px/1.7 'Be Vietnam Pro', sans-serif; }
.bl-article p { margin:0; }
.bl-article a { font-weight:700; text-decoration:none; }
.bl-article a:hover { text-decoration:underline; }
.bl-article strong { font-weight:700; color:var(--ink); }
.bl-h2 { margin:12px 0 -8px; font:700 clamp(26px, 2.6vw, 30px)/1.15 'Be Vietnam Pro', sans-serif; letter-spacing:-.03em; color:var(--ink); scroll-margin-top:24px; }
.bl-h3 { margin:6px 0 0; font:700 21px/1.25 'Be Vietnam Pro', sans-serif; letter-spacing:-.02em; color:var(--ink); scroll-margin-top:24px; }
.bl-article > .bl-h3 { margin:4px 0 -12px; }
.bl-list { margin:0; padding-left:22px; display:flex; flex-direction:column; gap:6px; }
.bl-note { background:var(--wash); border-radius:16px; padding:20px 24px; display:flex; flex-direction:column; gap:6px; }
.bl-note__label { font:700 13px/1.3 'Be Vietnam Pro', sans-serif; color:var(--ink); }
.bl-note p { font-size:15px; line-height:1.6; }
.bl-ranked { display:grid; grid-template-columns:72px minmax(0, 1fr); gap:16px 24px; padding:clamp(20px, 3vw, 28px); border:2px solid var(--border); border-radius:22px; }
.bl-ranked__number { font:800 clamp(44px, 5vw, 60px)/1 'Be Vietnam Pro', sans-serif; letter-spacing:-.04em; color:var(--ink); }
.bl-ranked__body { display:flex; flex-direction:column; gap:16px; min-width:0; }
.bl-ranked__head { display:flex; align-items:baseline; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; }
.bl-ranked__name { margin:0; font:700 26px/1.15 'Be Vietnam Pro', sans-serif; letter-spacing:-.025em; color:var(--ink); }
.bl-ranked__price { font-size:14px; color:var(--muted); }
.bl-ranked__verdict { font-size:17px; color:var(--ink); }
.bl-ranked__fit { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap:16px 24px; font-size:15px; line-height:1.55; }
.bl-ranked__fit > div { display:flex; flex-direction:column; gap:4px; }
.bl-article a.bl-store { align-self:flex-start; font:700 14px/1.2 'Be Vietnam Pro', sans-serif; color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.bl-table { border:2px solid var(--border); border-radius:16px; overflow:hidden; }
.bl-table table { width:100%; border-collapse:collapse; font-size:15px; line-height:1.4; }
.bl-table thead tr { background:var(--wash); }
.bl-table thead th { text-align:left; padding:12px 18px; font:700 12px/1 'Be Vietnam Pro', sans-serif; color:var(--muted); }
.bl-table tbody tr { border-top:1px solid var(--divider); }
.bl-table tbody th { text-align:left; padding:14px 18px; font-weight:700; color:var(--ink); }
.bl-table td { padding:14px 18px; font-variant-numeric:tabular-nums; }
.bl-compare { display:flex; flex-direction:column; gap:10px; }
.bl-compare__card { border:2px solid var(--border); border-radius:16px; padding:16px 18px; display:flex; flex-direction:column; gap:10px; font-size:14px; line-height:1.4; }
.bl-compare__name { font:700 16px/1.2 'Be Vietnam Pro', sans-serif; color:var(--ink); }
.bl-compare__grid { display:grid; grid-template-columns:96px minmax(0, 1fr); gap:6px 12px; }
.bl-compare__grid > span:nth-child(odd) { color:var(--muted); }
.bl-step { display:grid; grid-template-columns:48px minmax(0, 1fr); gap:20px; }
.bl-step__number { width:44px; height:44px; border:2px solid var(--ink); border-radius:12px; display:grid; place-items:center; font:700 16px/1 'Be Vietnam Pro', sans-serif; color:var(--ink); }
.bl-step__body { display:flex; flex-direction:column; gap:12px; min-width:0; }
.bl-figure { margin:0; display:flex; flex-direction:column; gap:10px; }
.bl-figure figcaption { display:flex; justify-content:space-between; gap:6px 16px; flex-wrap:wrap; font-size:13px; line-height:1.5; color:var(--muted); padding:0 4px; }
.bl-credit { font-size:13px; color:var(--muted); white-space:nowrap; }
.bl-article .bl-credit a, .bl-article figcaption a { font-weight:400; text-decoration:underline; text-underline-offset:2px; }
.bl-credit--cover { margin-top:-8px !important; }
.bl-faq { margin:0; display:flex; flex-direction:column; }
.bl-faq > div { padding:18px 0; border-top:1px solid var(--divider); display:flex; flex-direction:column; gap:6px; }
.bl-faq > div:last-child { border-bottom:1px solid var(--divider); }
.bl-faq dt { font:700 17px/1.35 'Be Vietnam Pro', sans-serif; color:var(--ink); }
.bl-faq dd { margin:0; font-size:15px; line-height:1.6; }
.bl-try { display:grid; grid-template-columns:200px minmax(0, 1fr); gap:16px 24px; align-items:center; padding:24px 0; border-top:1px solid var(--divider); border-bottom:1px solid var(--divider); }
.bl-try__body { display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.bl-try__line { font:700 18px/1.3 'Be Vietnam Pro', sans-serif; letter-spacing:-.02em; color:var(--ink); }
.bl-related { display:flex; flex-direction:column; gap:24px; padding-top:40px; border-top:1px solid var(--divider); }
.bl-related__title { margin:0; font:700 28px/1.15 'Be Vietnam Pro', sans-serif; letter-spacing:-.03em; }
.bl-missing { display:flex; flex-direction:column; gap:16px; }
.bl-missing p { margin:0; font-size:15px; color:var(--secondary); }
.bl-missing__title { margin:0; font:700 30px/1.1 'Be Vietnam Pro', sans-serif; letter-spacing:-.03em; text-shadow:0 1px 2px rgba(0,0,0,.2); }
.bl-missing__actions { display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width:1100px) { .bl-toc { display:none; } .bl-body { grid-template-columns:minmax(0, 720px); } }
@media (max-width:720px) {
  .bl-byline { font-size:13px; }
  .bl-article { font-size:16px; line-height:1.65; }
  .bl-h3 { font-size:19px; }
  .bl-ranked { grid-template-columns:minmax(0, 1fr); gap:14px; padding:22px; }
  .bl-ranked__name { font-size:22px; }
  .bl-ranked__verdict { font-size:16px; }
  .bl-ranked__fit { font-size:14px; }
  .bl-note p, .bl-faq dd { font-size:14px; }
  .bl-faq dt { font-size:16px; }
  .bl-try { grid-template-columns:minmax(0, 1fr); }
  .bl-try__line { font-size:17px; }
  .bl-related__title { font-size:24px; }
  .bl-figure figcaption { flex-direction:column; }
}

/* footer */
.bl-footer { background:var(--ink); color:#fff; }
.bl-footer__inner { max-width:1200px; margin:0 auto; padding:56px 20px 32px; display:flex; flex-direction:column; gap:44px; }
.bl-footer__grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:40px 32px; }
.bl-footer__brand { display:flex; flex-direction:column; gap:12px; }
.bl-footer__mark { display:flex; align-items:center; gap:10px; font:700 18px/1 'Be Vietnam Pro', sans-serif; }
.bl-footer__brand p { margin:0; font-size:14px; color:rgba(255,255,255,.75); max-width:260px; }
.bl-footer__col { display:flex; flex-direction:column; gap:12px; font-size:14px; }
.bl-footer__col a { color:#fff; text-decoration:none; }
.bl-footer__col a:hover { text-decoration:underline; }
.bl-footer__heading { font:700 12px/1 'Be Vietnam Pro', sans-serif; color:rgba(255,255,255,.7); }
.bl-footer__bottom { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:22px; border-top:1px solid rgba(255,255,255,.15); font-size:13px; color:rgba(255,255,255,.75); }
.bl-footer__bottom a { color:inherit; text-decoration:none; }
.bl-footer :focus-visible { outline-color:#fff; }

@media (prefers-reduced-motion: reduce) { .bl-card, .bl-pic { transition:none; } .bl-card:hover { transform:none; } }