/* The blog: an index that is a shelf, and posts that are prose.

   The theme does colour, type and the bands. This is what a long piece of
   writing needs and the rest of the site has nowhere else - a measure, a
   rhythm between paragraphs, and a card to find one by. */

/* ---------- the library ---------- */

.lib {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--band-y) var(--band-x);
}

/* Nothing sits beside the title now, so it takes the width on its own and the
   cards start sooner. */
.lib-head {
  margin-bottom: 44px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lib-head .eyebrow,
.lib-head .h1 { margin: 0; }

/* ---------- narrowing it down ---------- */

/* Hidden in the markup and revealed by script, so without it the library is
   still a clean list rather than a row of buttons that do nothing.

   A grid rather than a flex row with an auto margin: the chips take whatever
   is left and wrap inside their own cell, and the box keeps its place at the
   end instead of being pushed to a second line the moment the chips grow. */
/* display beats the hidden attribute, so hidden has to be said again here -
   without this the chips and the box are on screen for anyone whose script
   never arrives, which is the one thing the markup hides them to avoid. */
.lib-tools[hidden] { display: none; }

.lib-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 24px;
  margin-bottom: 26px;
}

.lib-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lib-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border-medium);
  border-radius: 999px;
  background: transparent;
  color: var(--body-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.lib-chip:hover { border-color: var(--sage); color: var(--dark); }
.lib-chip:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }

.lib-chip[aria-pressed="true"] {
  background: var(--sage);
  border-color: var(--sage);
  color: var(--cream);
}

.lib-chip-n { font-size: 12px; font-weight: 700; opacity: 0.65; }

/* the box */
.lib-search { position: relative; display: flex; align-items: center; }

.lib-search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.lib-search-icon {
  position: absolute;
  left: 13px;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--label-muted);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

.lib-search-input {
  width: 212px;
  padding: 9px 14px 9px 36px;
  border: 1px solid var(--border-medium);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 14.5px;
  color: var(--dark);
  transition: border-color 0.14s ease, background-color 0.14s ease;
}

.lib-search-input:hover { border-color: var(--border-strong); }

.lib-search-input:focus {
  outline: none;
  border-color: var(--sage);
  background: #fff;
}

.lib-search-input::placeholder { color: var(--label-muted); }
.lib-search-input::-webkit-search-cancel-button { cursor: pointer; }

/* Only ever shown once something has been narrowed. "13 posts" above thirteen
   posts is a line of text that tells a reader what they can already see. */
.lib-count {
  margin: -8px 0 20px;
  color: var(--label-muted);
  font-size: 13.5px;
}

.lib-empty {
  margin: 8px 0 0;
  color: var(--body-muted);
  font-size: 17px;
}

.lib-chip-inline { padding: 4px 12px; font-size: 14px; }

/* ---------- the shelf ---------- */

/* The shelf grows a column at a time as the screen allows, rather than
   stretching three cards across a monitor. */
.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.lib-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px 28px 26px;
  background: #fff;
  border: 1px solid var(--border-medium);
  text-decoration: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.lib-card:hover {
  border-color: var(--sage);
  box-shadow: 0 14px 32px rgba(46, 51, 37, 0.09);
  text-decoration: none;
}

.lib-cat {
  color: var(--sage);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lib-card[hidden] { display: none; }

.lib-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--dark);
  text-wrap: balance;
}

.lib-blurb {
  margin: 0;
  flex: 1 1 auto;
  color: var(--body-muted);
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}

.lib-more {
  margin-top: 6px;
  color: var(--sage);
  font-size: 15px;
  font-weight: 700;
}

.lib-card:hover .lib-more { color: var(--dark); }

/* ---------- a post ---------- */

.post-wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 64px var(--band-x) 0;
}

/* Prose gets a measure whatever the screen is doing. A line the width of a
   monitor cannot be read, so the column stays put and the page grows around
   it. */
.post {
  max-width: 68ch;
  margin: 0 auto;
}

/* Where you are, above the headline. A post reached from a search result has
   no other way of saying which shelf it came off. */
.post-cat {
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--label-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.post-cat { flex-wrap: wrap; }
.post-cat a { color: var(--sage); text-decoration: none; }

/* The date reads as a date rather than a shelf label. */
.post-date { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; }
.post-cat a:hover { text-decoration: underline; }

/* on a phone the date takes its own line, so the dot before it would hang */
@media (max-width: 640px) {
  .post-cat > span[aria-hidden="true"]:has(+ .post-date) { display: none; }
  .post-cat .post-date { flex-basis: 100%; }
}

.post h1 {
  margin: 0 0 26px;
  font-family: var(--serif);
  font-size: clamp(34px, 4.2vw, 52px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.post h2 {
  margin: 48px 0 14px;
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.post h3 { margin: 32px 0 10px; font-size: 20px; font-weight: 700; }

.post p {
  margin: 0 0 20px;
  font-size: 18px;
  line-height: 1.68;
  text-wrap: pretty;
}

/* The opening line carries the piece, so it is set larger - the one bit of
   typographic emphasis a post gets. */
.post h1 + p {
  font-size: 21px;
  line-height: 1.55;
  color: var(--body-muted);
}

.post ul { margin: 0 0 20px; padding-left: 22px; }
.post li { margin-bottom: 9px; font-size: 18px; line-height: 1.6; }

.post a { color: var(--sage); font-weight: 600; }
.post a:hover { color: var(--dark); }

.post hr {
  margin: 44px 0;
  border: 0;
  border-top: 1px solid var(--border-medium);
}

.post-table {
  margin: 0 0 24px;
  overflow-x: auto;
  border: 1px solid var(--border-medium);
}

.post-table table { border-collapse: collapse; width: 100%; min-width: 560px; }

.post-table th,
.post-table td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  font-size: 15px;
  line-height: 1.5;
  border-bottom: 1px solid var(--border-light);
}

.post-table th { background: var(--cream-deep); font-weight: 700; white-space: nowrap; }
.post-table tr:last-child td { border-bottom: 0; }

/* ---------- pictures ---------- */

/* A post is a long column of prose, and a picture every few screens gives the
   eye somewhere to land. The top one is atmosphere; the ones further down
   carry a point the text is making, and their caption says it in words. */
.post-fig { margin: 38px 0 36px; }

.post-fig svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.post-fig figcaption {
  margin-top: 12px;
  color: var(--label-muted);
  font-size: 14.5px;
  line-height: 1.5;
  text-wrap: pretty;
}

/* A diagram is drawn at 640 across with type no smaller than 20, and shown
   no wider than this, so its labels read at about body size on a desk and
   are still legible on a phone. */
.post-fig:not(.post-hero) svg { max-width: 560px; margin: 0 auto; }

.post-hero { margin: 6px 0 42px; }

/* Words inside a diagram wear the page's type rather than whatever the SVG
   was drawn with, so a label sits in the same family as the sentence above. */
.post-fig .fig-label { font-family: var(--sans); font-weight: 600; fill: var(--dark); }
.post-fig .fig-muted { font-family: var(--sans); font-weight: 500; fill: var(--label-muted); }
.post-fig .fig-value { font-family: var(--serif); font-weight: 700; fill: var(--dark); }
.post-fig .fig-inverse { font-family: var(--sans); font-weight: 600; fill: var(--cream); }

/* The card shows the post's top picture as a still. */
.lib-art {
  display: block;
  margin: -30px -28px 8px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--cream-deep);
  border-bottom: 1px solid var(--border-light);
}

.lib-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(.2, .7, .2, 1);
}

.lib-card:hover .lib-art img { transform: scale(1.035); }

/* ---------- pictures that draw themselves ----------

   The head of the page adds .fx before anything paints, unless the reader has
   asked for less motion. Under .fx a picture waits, part-drawn, until it
   scrolls into view and the blog script marks it .is-in; without .fx it is
   simply there, whole and still, which is also what the card shows.

   An illustration uses only these classes, with --d to stagger them:
     fx-draw    a stroke drawing itself (the element needs pathLength="1")
     fx-grow    rising from its base       fx-grow-x  growing from its left
     fx-widen   opening out from its middle
     fx-pop     springing out from its centre
     fx-fade    arriving
   and, while it is on screen, at most a few of these gentle loops:
     fx-sway  fx-bob  fx-drip  fx-blink  fx-spin */

.fx .post-fig .fx-draw { stroke-dasharray: 1 2; stroke-dashoffset: 1.01; }

.fx .post-fig .fx-grow,
.fx .post-fig .fx-grow-x,
.fx .post-fig .fx-widen,
.fx .post-fig .fx-pop { transform-box: fill-box; }

.fx .post-fig .fx-grow { transform-origin: 50% 100%; transform: scaleY(0); }
.fx .post-fig .fx-grow-x { transform-origin: 0 50%; transform: scaleX(0); }
.fx .post-fig .fx-widen { transform-origin: 50% 50%; transform: scaleX(0); }
.fx .post-fig .fx-pop { transform-origin: 50% 50%; transform: scale(0); }
.fx .post-fig .fx-fade { opacity: 0; }

.fx .post-fig.is-in .fx-draw {
  animation: fx-draw var(--t, 1.3s) var(--d, 0s) cubic-bezier(.45, 0, .2, 1) forwards;
}

.fx .post-fig.is-in .fx-grow,
.fx .post-fig.is-in .fx-grow-x,
.fx .post-fig.is-in .fx-widen {
  animation: fx-settle var(--t, .9s) var(--d, 0s) cubic-bezier(.3, .7, .2, 1) forwards;
}

.fx .post-fig.is-in .fx-pop {
  animation: fx-settle var(--t, .6s) var(--d, 0s) cubic-bezier(.34, 1.5, .5, 1) forwards;
}

.fx .post-fig.is-in .fx-fade {
  animation: fx-arrive var(--t, .7s) var(--d, 0s) ease-out forwards;
}

@keyframes fx-draw { to { stroke-dashoffset: 0; } }
@keyframes fx-settle { to { transform: none; } }
@keyframes fx-arrive { to { opacity: 1; } }

/* The loops run only while the picture is on screen. */
.fx .post-fig .fx-sway,
.fx .post-fig .fx-bob,
.fx .post-fig .fx-spin { transform-box: fill-box; }

.fx .post-fig.is-live .fx-sway {
  transform-origin: 50% 100%;
  animation: fx-sway var(--t2, 4.8s) var(--d2, 1.6s) ease-in-out infinite alternate;
}

.fx .post-fig.is-live .fx-bob {
  animation: fx-bob var(--t2, 3.6s) var(--d2, 1.6s) ease-in-out infinite alternate;
}

.fx .post-fig.is-live .fx-drip {
  animation: fx-drip var(--t2, 2.4s) var(--d2, 1.6s) ease-in infinite;
}

.fx .post-fig.is-live .fx-blink {
  animation: fx-blink var(--t2, 2.2s) var(--d2, 1.6s) ease-in-out infinite alternate;
}

.fx .post-fig.is-live .fx-spin {
  transform-origin: 50% 50%;
  animation: fx-spin var(--t2, 14s) var(--d2, 1.6s) linear infinite;
}

@keyframes fx-sway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
@keyframes fx-bob { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes fx-blink { from { opacity: 1; } to { opacity: .35; } }
@keyframes fx-spin { to { transform: rotate(360deg); } }

@keyframes fx-drip {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(var(--fall, 30px)); opacity: 0; }
}

/* ---------- what to do next ---------- */

.post-cta {
  max-width: 68ch;
  margin: 64px auto 0;
  padding: 36px 34px 34px;
  background: var(--cream-deep);
  border: 1px solid var(--border-strong);
  text-align: center;
}

.post-cta-title {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.post-cta-lead {
  margin: 0 auto 22px;
  max-width: 46ch;
  color: var(--body-muted);
  font-size: 17px;
  line-height: 1.55;
}

.post-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ---------- more to read ---------- */

/* Three more posts under every one, from the same shelf first, so a reader
   who finished one has somewhere to go that is not back to the top. */
.post-more {
  margin: 80px 0 0;
  padding-top: 48px;
  border-top: 1px solid var(--border-medium);
}

.post-more-title {
  margin: 0 0 24px;
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.post-more .lib-title { font-size: 22px; }

/* Narrow enough and two columns leave the chips about a hundred pixels to work
   in, which stacks six of them down the page before a single post is visible.
   So they take the row and scroll sideways instead - one line whatever the
   count - and the box goes underneath at full width. */
@media (max-width: 900px) {
  .lib-tools { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  .lib-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .lib-filters::-webkit-scrollbar { display: none; }

  .lib-search { width: 100%; }
  .lib-search-input { width: 100%; }
}

@media (max-width: 640px) {
  .post-wrap { padding: 40px var(--band-x) 0; }
  .post-fig { margin: 30px 0 28px; }
  /* a diagram's labels are drawn into it, so on a phone it takes the whole
     width, margins included, to keep them readable; the caption stays put */
  .post-fig:not(.post-hero) svg {
    width: calc(100% + 2 * var(--band-x));
    max-width: none;
    margin: 0 calc(-1 * var(--band-x));
  }
  .post-more { margin-top: 56px; padding-top: 36px; }
  .post-fig figcaption { font-size: 13.5px; }
  .post p, .post li { font-size: 17px; }
  .post h1 + p { font-size: 19px; }
  .lib-head { margin-bottom: 32px; }
  .lib-grid { grid-template-columns: minmax(0, 1fr); }
  .post-cta { padding: 28px 20px 26px; margin-top: 48px; }
  .post-cta-actions { flex-direction: column; }
  .post-cta-actions > * { width: 100%; }
}

/* ---------- the blog index as a library ---------- */

/* The index uses the Learn page's library (sprout-learn.css). These are the
   parts that are the blog's own: the post's picture where Learn has a video,
   the way into the post, and the footer, which the library has no room for
   while it fills the screen. */
.blog-library .vl-shot.is-cover {
  display: block;
  aspect-ratio: 16 / 9;
}

.blog-library .vl-shot.is-cover img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background: #F1E6D3;
  box-shadow: 0 2px 10px rgba(31, 42, 26, 0.10), 0 10px 28px rgba(31, 42, 26, 0.07);
}

.blog-library .vl-title a { color: inherit; text-decoration: none; }
.blog-library .vl-title a:hover { color: var(--sage); }

.blog-library .vl-section { background: var(--cream-deep); stroke: var(--sage); }

/* reading the post is the main thing to do; moving along the shelf is second */
.blog-library .vl-nav { flex-wrap: wrap; }

.vl-readpost {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--sage);
  color: var(--cream);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}

.vl-readpost:hover { background: var(--dark); color: var(--cream); text-decoration: none; }
.vl-readpost:active { transform: scale(0.98); transition-duration: 0.06s; }
.vl-readpost:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.vl-readpost svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.blog-library .vl-upnext {
  background: var(--cream);
  color: var(--dark);
  border: 1px solid var(--border-medium);
}

.blog-library .vl-upnext:hover { background: var(--cream-deep); color: var(--dark); }
.blog-library .vl-upnext:active { background: var(--cream-deep); }
.blog-library .vl-upnext-k { color: var(--label-muted); }

@media (min-width: 901px) and (min-height: 620px) {
  .learn-fit .blog-library .foot,
  .learn-fit body.blog-library > .foot { display: none; }

  .learn-fit .blog-library .vl-shot.is-cover {
    aspect-ratio: auto;
    container-type: size;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .learn-fit .blog-library .vl-shot.is-cover img {
    width: min(100cqw, 100cqh * 16 / 9);
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* ---------- reading a post in the library ---------- */

/* Once a post has arrived its card makes way for the post itself, read in the
   right-hand pane. On a desk the pane scrolls on its own and the list on the
   left stays where it was; on a phone the page scrolls as usual. */
.blog-library .vl-panel.is-reading > .vl-shot,
.blog-library .vl-panel.is-reading > .vl-details { display: none; }

.blog-library .vl-panel.is-reading {
  display: block;
  background: var(--cream);
  border: 1px solid var(--border-medium);
  border-radius: 16px;
}

.vl-post {
  max-width: none;
  margin: 0;
  padding: 32px 44px 40px;
}

/* In the pane the post uses the width it is given. The cover and diagrams run
   the full width of the pane, and the words keep a comfortable line length,
   starting from the same left edge as everything else, so nothing floats in
   the middle with empty space either side. */
.vl-post > p,
.vl-post-text > p,
.vl-post-text > ul,
.vl-post-text > ol,
.vl-post-text > blockquote,
.vl-post-text > h2,
.vl-post-text > h3 { max-width: 72ch; }

.vl-post-text > :first-child { margin-top: 0; }

/* On a wide pane the post's body sits beside an outline of its sections,
   which stays in view as the post scrolls, so the width is used rather than
   left empty. Narrower, the outline stands down and the words run on. */
.blog-library .vl-panel.is-reading { container-type: inline-size; }

.vl-outline { display: none; }

@container (min-width: 1040px) {
  .vl-post-body {
    display: grid;
    grid-template-columns: minmax(0, 72ch) minmax(200px, 250px);
    justify-content: space-between;
    gap: 56px;
    align-items: start;
  }

  .vl-outline {
    display: block;
    position: sticky;
    top: 24px;
    padding: 16px 18px;
    background: var(--cream-deep);
    border-radius: 14px;
  }
}

.vl-outline-title,
.vl-post .vl-outline-title {
  margin: 0 0 10px;
  line-height: 1.3;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--label-muted);
}

.vl-outline ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vl-outline a {
  display: block;
  padding: 7px 10px;
  border-left: 2px solid var(--border-medium);
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--body-muted);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.vl-outline a:hover { color: var(--dark); background: rgba(251, 247, 239, 0.6); }
.vl-outline a.is-now { color: var(--dark); font-weight: 600; border-left-color: var(--sage); }

.vl-post .post-cat { max-width: none; }
.vl-post .post-fig { max-width: none; }
.vl-post .post-fig.post-hero { margin: 4px 0 34px; }
.vl-post .post-fig.post-hero svg { border-radius: 14px; overflow: hidden; }
.vl-post .post-fig:not(.post-hero) svg { margin: 0; max-width: 620px; }
.vl-post .post-fig figcaption { max-width: 72ch; }
.vl-post-foot { max-width: none; }

.vl-post .post-cat { margin-bottom: 14px; }

.vl-post-whole {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.vl-post-title {
  margin: 0 0 22px;
  font-family: var(--serif);
  font-size: clamp(30px, 2.8vw, 44px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.vl-post .vl-post-title + p { font-size: 20px; line-height: 1.55; color: var(--body-muted); }

.vl-post-foot {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border-medium);
}

.vl-post-foot .vl-nav { border-top: 0; padding-top: 0; margin-top: 0; }
.vl-post-foot .vl-readpost { display: none; }

/* a post arrives the way a picked video does */
.vl-panel.is-entering .vl-post { animation: vl-in-forward 0.34s cubic-bezier(0.2, 0.75, 0.2, 1) both; }
.vl-panel.is-entering[data-dir="back"] .vl-post { animation-name: vl-in-back; }

/* while it is on its way the card says so, quietly */
.vl-panel.is-fetching .vl-readpost { opacity: 0.75; }

@media (min-width: 901px) and (min-height: 620px) {
  .learn-fit .blog-library .vl-panel.is-active.is-reading {
    display: block;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
  }

  .learn-fit .blog-library .vl-panel.is-reading::-webkit-scrollbar { width: 10px; }
  .learn-fit .blog-library .vl-panel.is-reading::-webkit-scrollbar-track { background: transparent; }
  .learn-fit .blog-library .vl-panel.is-reading::-webkit-scrollbar-button { display: none; height: 0; }
  .learn-fit .blog-library .vl-panel.is-reading::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 999px;
    border: 3px solid var(--cream);
  }
}

@media (max-width: 900px) {
  .vl-post { padding: 20px 18px 28px; }
  .vl-post .post-fig:not(.post-hero) svg { margin: 0 auto; }
  .vl-post-whole { margin-left: 0; }
}