/* ==========================================================================
   Blog listings — the blog index (page-blog-redesign.php), topic archives
   (category.php) and industry archives (tag.php). Everything is scoped to .vwbr / .vwbr-* so nothing leaks into the theme, and
   the theme's global rules (* { margin:0 }, a { transition:.5s }) are restated
   where they would otherwise bleed in.

   The theme registers each Saans weight as its own family (Saans-Regular,
   Saans-Medium, Saans-SemiBold), so weight is chosen by family, not by
   font-weight — asking a single-weight family for 600 makes the browser
   synthesise a fake bold.
   ========================================================================== */

.vwbr,
.vwbr-player,
.vwbr-reader {
  --ink: #151515; --ink-2: #4C4C4C; --muted: #6B6C6F;
  --paper: #FFFFFF; --canvas: #F5F5F5; --line: #E4E2E0; --line-2: #CFCBC7;
  --dark: #1B1616; --dark-2: #2A2323;
  --orange: #F06A00; --orange-deep: #A83F00; --wash: #FFF2E6;
  --r-lg: 26px; --r: 18px;
  --f-reg: "Saans-Regular", "Saans-Regular-fb", Arial, sans-serif;
  --f-med: "Saans-Medium", "Saans-Medium-fb", Arial, sans-serif;
  --f-semi: "Saans-SemiBold", "Saans-SemiBold-fb", Arial, sans-serif;
}

/* Components set display:grid/flex, which beats the browser's own [hidden]
   rule — so hidden panels would still render without this. */
.vwbr [hidden], .vwbr-player[hidden], .vwbr-reader[hidden] { display: none !important; }

.vwbr { background: var(--paper); color: var(--ink); font-family: var(--f-reg); font-size: 16px; line-height: 1.55; }
.vwbr *, .vwbr *::before, .vwbr *::after { box-sizing: border-box; }
.vwbr a { color: inherit; transition: none; }
.vwbr :focus-visible, .vwbr-player :focus-visible, .vwbr-reader :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 6px; }

/* Same measure as the rest of the site: the theme gives .post-content and the
   post banner a 1430px content box with 40px gutters (20px on phones), so the
   blog matches them rather than the narrower 1200px of the mockup, whose frame
   was only 1440px wide to begin with.
   Top padding clears the site header, which is absolutely positioned. */
.vwbr__wrap { max-width: 1510px; margin-inline: auto; padding: clamp(116px, 11vw, 150px) clamp(20px, 3vw, 40px) 72px; }

.vwbr-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 22px; padding: 10px 14px;
  border: 1px dashed var(--line-2); border-radius: 12px; font-size: 13.5px; color: var(--ink-2); }
.vwbr-preview b { font-family: var(--f-semi); font-weight: normal; color: var(--orange-deep); letter-spacing: .06em; text-transform: uppercase; font-size: 12px; }

/* ---------- breadcrumb + hero ---------- */
.vwbr-crumbs { font-size: 14px; color: var(--muted); }
.vwbr-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vwbr-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line-2); }
.vwbr-crumbs a { color: var(--ink-2); }
.vwbr-crumbs [aria-current] { color: var(--ink); }

.vwbr-hero { display: grid; gap: 16px; padding: 18px 0 26px; }
.vwbr-eyebrow { margin: 0; font-family: var(--f-med); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.vwbr h1 { margin: 0; max-width: 20ch; font-family: var(--f-semi); font-weight: normal; font-size: clamp(2.3rem, 4.6vw, 3.7rem);
  line-height: 1.04; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.vwbr h1 em { font-style: normal; color: var(--orange); }
.vwbr-lede { margin: 0; max-width: 62ch; font-size: clamp(16.5px, 1.5vw, 19px); color: var(--ink-2); }

.vwbr-lock form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; max-width: 520px; }
.vwbr-lock p { margin: 0 0 12px; color: var(--ink-2); }
.vwbr-lock input[type="password"] { height: 46px; min-width: 240px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 10px; font-family: var(--f-reg); font-size: 16px; }
.vwbr-lock input[type="submit"] { height: 46px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--orange); color: #fff; font-family: var(--f-semi); font-size: 15.5px; cursor: pointer; }

/* ---------- service links (topic and industry archives) ---------- */
.vwbr-svc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 4px; }
.vwbr-svc__label { margin: 0; font-family: var(--f-med); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.vwbr-svc__main { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--wash);
  font-family: var(--f-semi); font-size: 15.5px; line-height: 1.2; color: var(--orange-deep) !important; }
.vwbr-svc__main:hover { background: #FFE4CC; }
.vwbr-svc__rel { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.vwbr-svc__rel li { list-style: none; }
.vwbr-svc__rel a { font-family: var(--f-med); font-size: 14.5px; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2);
  text-underline-offset: 4px; }
.vwbr-svc__rel a:hover { color: var(--ink); text-decoration-color: currentColor; }

/* ---------- topic bar ---------- */
.vwbr-topics { border-block: 1px solid var(--line); margin-bottom: 34px; }
.vwbr-topics__scroll { overflow-x: auto; scrollbar-width: thin; }
.vwbr-topics ul { list-style: none; margin: 0; padding: 14px 0; display: flex; gap: 8px; width: max-content; }
.vwbr-chip { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--paper); font-family: var(--f-med); font-size: 14.5px; color: var(--ink); white-space: nowrap; }
/* six chips with full topic names outgrow a desktop row — wrap there, scroll sideways on phones */
@media (min-width: 1000px) { .vwbr-topics ul { flex-wrap: wrap; width: auto; } }
.vwbr-chip:hover { border-color: var(--ink-2); }
.vwbr-chip__n { font-size: 12.5px; color: var(--muted); }
.vwbr-chip[aria-current="page"] { background: var(--dark); border-color: var(--dark); color: #fff; }
.vwbr-chip[aria-current="page"] .vwbr-chip__n { color: rgba(255, 255, 255, .62); }

/* ---------- pills ---------- */
.vwbr-pill { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 999px; white-space: nowrap;
  font-family: var(--f-semi); font-weight: normal; line-height: 1; cursor: pointer; }
/* Not var(--orange) here: white on #F06A00 measures 3.1:1 and fails WCAG AA, which wants
   4.5:1 at this size. #C44600 measures 4.97:1 and is already a published brand colour on
   the site (homepage author names). --orange itself is left alone - its other uses in this
   file are borders, icons and washes where text contrast is not in play. */
.vwbr-pill--cta { background: #C44600; color: #fff !important; padding: 15px 28px; font-size: 16px; border: 0; }
.vwbr-pill--cta:hover { filter: brightness(1.06); }
.vwbr-pill--ghost { background: var(--paper); color: var(--ink); border: 1px solid var(--line-2); padding: 14px 24px; font-size: 15.5px; }
.vwbr-pill--listen { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .34); padding: 13px 22px; font-size: 15.5px; }
.vwbr-pill--listen:hover { border-color: #fff; }
.vwbr-pill--listen svg { width: 17px; height: 17px; }
.vwbr-pill--listen.is-active { background: #fff; border-color: #fff; color: var(--dark); }

/* ---------- featured ---------- */
.vwbr-feat { position: relative; overflow: hidden; margin-bottom: 46px; padding: clamp(28px, 4.5vw, 58px); border-radius: var(--r-lg);
  background: var(--dark); color: #fff;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 280px); align-items: center; gap: 28px clamp(28px, 5vw, 72px); }
.vwbr-feat::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(240, 106, 0, .42) 1.25px, transparent 1.45px); background-size: 15px 15px;
  -webkit-mask-image: linear-gradient(100deg, transparent 38%, #000 78%); mask-image: linear-gradient(100deg, transparent 38%, #000 78%); }
.vwbr-feat__body { position: relative; display: grid; gap: 16px; max-width: 680px; }
.vwbr-feat__label { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-family: var(--f-med); font-size: 12.5px;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.vwbr-feat__label b { font-family: var(--f-semi); font-weight: normal; color: var(--orange); }
.vwbr-feat h2 { margin: 0; font-family: var(--f-semi); font-weight: normal; font-size: clamp(1.8rem, 3.4vw, 2.75rem); line-height: 1.08;
  letter-spacing: -.025em; color: #fff; text-wrap: balance; }
.vwbr-feat h2 a { color: #fff; }
.vwbr-feat h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.vwbr-feat__ex { margin: 0; max-width: 58ch; font-size: 17.5px; line-height: 1.55; color: rgba(255, 255, 255, .8); }
.vwbr-feat__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 6px; }
.vwbr-feat__meta .vwbr-meta { color: rgba(255, 255, 255, .66); }

/* Headphone art with its Listen button directly beneath — one object. Always
   headphones: the topic is named in the label, and a Listen button under a
   shield or a cloud would read as nonsense. A strip under the text on phones. */
.vwbr-feat__listen { position: relative; display: grid; justify-items: center; align-content: center; gap: 24px; }
.vwbr-feat__phones { display: block; width: clamp(130px, 14vw, 200px); height: auto; color: var(--orange); opacity: .62; stroke-width: 1.1;
  transition: opacity .25s ease; }
.vwbr-feat.is-playing .vwbr-feat__phones { opacity: 1; }
.no-tts .vwbr-feat { grid-template-columns: minmax(0, 1fr); }
.no-tts .vwbr-feat__listen, .no-tts [data-listen] { display: none; }

@media (max-width: 980px) {
  .vwbr-feat { grid-template-columns: minmax(0, 1fr) auto; }
  .vwbr-feat__phones { width: 112px; }
}
@media (max-width: 700px) {
  .vwbr-feat { grid-template-columns: minmax(0, 1fr); }
  .vwbr-feat__listen { grid-auto-flow: column; justify-content: start; justify-items: start; align-items: center; gap: 14px;
    padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); }
  .vwbr-feat__phones { width: 42px; opacity: .95; stroke-width: 1.7; }
  .vwbr-feat::before { -webkit-mask-image: linear-gradient(180deg, transparent 45%, #000); mask-image: linear-gradient(180deg, transparent 45%, #000); }
}

/* ---------- section head ---------- */
.vwbr-sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 24px; margin-bottom: 22px; }
.vwbr-sec-head h2 { margin: 0; font-family: var(--f-semi); font-weight: normal; font-size: clamp(1.55rem, 2.6vw, 2.05rem); letter-spacing: -.02em;
  line-height: 1.15; color: var(--ink); }
.vwbr-count { font-size: 14px; color: var(--muted); white-space: nowrap; }

/* ---------- cards ---------- */
.vwbr-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1000px) { .vwbr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .vwbr-grid { grid-template-columns: 1fr; } }

.vwbr-card { position: relative; display: flex; flex-direction: column; gap: 13px; padding: 22px 22px 18px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--paper); transition: border-color .15s ease, transform .15s ease; }
.vwbr-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.vwbr-card:focus-within { border-color: var(--orange); }
.vwbr-card.is-playing { border-color: var(--orange); }
.vwbr-card__topic { margin: 0; display: flex; align-items: center; gap: 10px; font-family: var(--f-med); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--orange-deep); }
.vwbr-glyph { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--wash); color: var(--orange-deep); }
.vwbr-glyph svg { width: 19px; height: 19px; }
.vwbr-ind { margin-left: auto; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--canvas);
  font-family: var(--f-med); font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.vwbr-card h3 { margin: 0; font-family: var(--f-semi); font-weight: normal; font-size: 19.5px; line-height: 1.24; letter-spacing: -.012em;
  color: var(--ink); text-wrap: balance; }
.vwbr-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); }
.vwbr-card h3 a:focus-visible { outline: none; }
.vwbr-card__ex { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.vwbr-card__foot { margin-top: auto; padding-top: 13px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.vwbr-meta { font-size: 13.5px; color: var(--muted); }
.vwbr-stale { padding: 3px 10px; border: 1px solid #F1D9A0; border-radius: 999px; background: #FFF7E0; font-family: var(--f-med); font-size: 12px; color: #7A5200; }

.vwbr-listen { position: relative; z-index: 2; margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 10px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font-family: var(--f-med); font-size: 13px; line-height: 1; cursor: pointer; }
.vwbr-listen:hover { border-color: var(--ink-2); }
.vwbr-listen svg { width: 15px; height: 15px; }
.vwbr-listen.is-active { background: var(--dark); border-color: var(--dark); color: #fff; }

.vwbr-eq { display: none; align-items: flex-end; gap: 2px; width: 15px; height: 13px; }
.vwbr-eq i { display: block; width: 3px; height: 100%; border-radius: 1px; background: currentColor; transform-origin: bottom; animation: vwbr-eq .9s ease-in-out infinite; }
.vwbr-eq i:nth-child(2) { animation-delay: -.3s; }
.vwbr-eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes vwbr-eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
[data-listen].is-playing .vwbr-eq { display: inline-flex; }
[data-listen].is-playing .vwbr-listen__icon { display: none; }

/* ---------- pagination ---------- */
.vwbr-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 40px; }
.vwbr-pager a, .vwbr-pager span { display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 16px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--paper); font-family: var(--f-med); font-size: 15px; color: var(--ink); }
.vwbr-pager a:hover { border-color: var(--ink-2); }
.vwbr-pager [aria-current="page"] { background: var(--dark); border-color: var(--dark); color: #fff; }
.vwbr-pager [aria-disabled="true"] { background: transparent; color: var(--line-2); }
.vwbr-pager__status { width: 100%; margin: 6px 0 0; text-align: center; font-size: 13.5px; color: var(--muted); }

/* ---------- CTA ---------- */
.vwbr-cta { margin-top: 64px; padding: clamp(26px, 4vw, 46px); border-radius: var(--r-lg); background: var(--wash);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 36px; }
.vwbr-cta h2 { margin: 0 0 6px; font-family: var(--f-semi); font-weight: normal; font-size: clamp(1.45rem, 2.4vw, 1.9rem); letter-spacing: -.02em;
  line-height: 1.15; color: var(--ink); text-wrap: balance; }
.vwbr-cta p { margin: 0; max-width: 52ch; color: var(--ink-2); }
.vwbr-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

@media (prefers-reduced-motion: reduce) {
  .vwbr *, .vwbr-player *, .vwbr-reader * { transition: none !important; }
  .vwbr-eq i { animation: none; transform: scaleY(.7); }
}

/* ================= player ================= */
/* ChatBeacon's launcher is fixed bottom-right at the maximum z-index — exactly
   where the player's close button lands on anything narrower than a wide
   desktop. While the player is open, lift the launcher clear of it rather than
   hiding chat. This stylesheet only loads on this template, so chat elsewhere
   on the site is untouched. */
body.vwbr-has-player chatbeacon-button {
  top: auto !important;
  bottom: calc(var(--vwbr-player-h, 0px) + 16px) !important;
  transition: bottom .2s ease;
}

.vwbr-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
body.vwbr-has-player { padding-bottom: calc(var(--vwbr-player-h, 0px) + 20px); }

.vwbr-player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2100; /* above the site header (2001) */ pointer-events: none;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px)); font-family: var(--f-reg); }
.vwbr-player__inner { pointer-events: auto; max-width: 1000px; margin-inline: auto; padding: 12px 14px 12px 12px; border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 22px; background: var(--dark); color: #fff; box-shadow: 0 18px 44px -14px rgba(21, 21, 21, .5), 0 2px 6px rgba(21, 21, 21, .18);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "play info ctrl" "play seek seek"; column-gap: 14px; row-gap: 8px; align-items: center; }
.vwbr-player p { margin: 0; }
.vwbr-player__play { grid-area: play; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; cursor: pointer; }
.vwbr-player__play:hover { filter: brightness(1.07); }
.vwbr-player__play svg { width: 23px; height: 23px; }
.vwbr-player__info { grid-area: info; min-width: 0; }
.vwbr-player__kicker { display: flex; flex-wrap: wrap; gap: 2px 10px; font-family: var(--f-med); font-size: 11.5px; line-height: 1.35; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.vwbr-player__kicker b { font-family: var(--f-semi); font-weight: normal; color: var(--orange); }
.vwbr-player__title { margin-top: 3px !important; font-family: var(--f-semi); font-size: 15.5px; line-height: 1.3; color: #fff; text-wrap: balance; }
.vwbr-player__ctrl { grid-area: ctrl; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.vwbr-pbtn { height: 36px; min-width: 36px; padding: 0 11px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: transparent; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--f-med); font-size: 13px; line-height: 1; white-space: nowrap; cursor: pointer; }
.vwbr-pbtn:hover { border-color: rgba(255, 255, 255, .55); }
.vwbr-pbtn svg { width: 16px; height: 16px; }
.vwbr-pbtn__ico { display: inline-flex; }
.vwbr-pbtn[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--dark); }
#vwbr-rate { min-width: 58px; }
.vwbr-pselect { height: 36px; max-width: 190px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: var(--dark-2); color: #fff;
  font-family: var(--f-med); font-size: 13px; }
.vwbr-player__seek { grid-area: seek; display: flex; align-items: center; gap: 10px; font-family: var(--f-med); font-size: 12.5px; line-height: 1; color: rgba(255, 255, 255, .66); }
.vwbr-player__seek input { flex: 1; min-width: 0; height: 22px; margin: 0; accent-color: var(--orange); cursor: pointer; }
.vwbr-player__where { padding-left: 4px; white-space: nowrap; }
@media (max-width: 780px) {
  .vwbr-player__inner { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "play info" "seek seek" "ctrl ctrl"; }
  .vwbr-player__ctrl { justify-content: flex-start; }
  .vwbr-pselect { flex: 1 1 140px; max-width: none; }
  .vwbr-player__where { display: none; }
}

/* ================= read along ================= */
.vwbr-reader { position: fixed; z-index: 2099; top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px; bottom: calc(var(--vwbr-player-h, 0px) + 10px);
  width: min(460px, calc(100vw - 32px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 22px;
  background: var(--paper); color: var(--ink); box-shadow: 0 26px 60px -22px rgba(21, 21, 21, .38); font-family: var(--f-reg); }
.vwbr-reader p, .vwbr-reader h2, .vwbr-reader h3 { margin: 0; }
.vwbr-reader__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 22px; border-bottom: 1px solid var(--line); }
.vwbr-reader__cap { font-family: var(--f-med); font-size: 12px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.vwbr-reader__cap span { font-size: 13px; letter-spacing: 0; text-transform: none; }
.vwbr-rbtn { flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.vwbr-rbtn:hover { border-color: var(--ink-2); }
.vwbr-rbtn svg { width: 16px; height: 16px; }
.vwbr-reader__body { position: relative; overflow-y: auto; padding: 20px 24px 32px; font-size: 16px; line-height: 1.62; }
.vwbr-reader__body h2 { margin-bottom: 6px; font-family: var(--f-semi); font-weight: normal; font-size: 22px; line-height: 1.2; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.vwbr-reader__meta { margin-bottom: 20px !important; font-size: 13.5px; color: var(--muted); }
.vwbr-reader__body h3 { margin: 24px 0 8px; font-family: var(--f-semi); font-weight: normal; font-size: 17px; line-height: 1.3; color: var(--ink); }
.vwbr-reader__body p { margin-bottom: 12px; color: var(--ink-2); }
.vwbr-reader__body p.li { position: relative; padding-left: 18px; }
.vwbr-reader__body p.li::before { content: ""; position: absolute; left: 3px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }
.vwbr-reader__loading { color: var(--muted); }
.vwbr-s { border-radius: 4px; cursor: pointer; transition: background-color .15s ease; }
.vwbr-s:hover { background: var(--canvas); }
.vwbr-s.is-now { background: var(--wash); color: var(--ink); box-shadow: 0 0 0 3px var(--wash); }
@media (max-width: 780px) { .vwbr-reader { top: 12px; left: 12px; right: 12px; width: auto; } }