/*
  Blog template family (Rinncrest Journal): /blog and /blog/<slug>.
  Generated by build/build-blog-pages.cjs (build/lib/blog-pages.cjs); behaviour in blog.js.
  Loads after: tailwind.css, site.css, launch.css, consumer-bar.css.
  Sections: Shared (meta line, covers), Hero and search, Featured carousel, Section headings,
  New articles, All articles and filters, Article card, Empty state, Article page, Share rail, Section dashes,
  Article body, Related articles, Responsive.
  Reuses tokens from site.css / launch.css (--navy, --forest, --teal, --mist, --line, --muted, --ink-body, --teal-*).
*/

/* ---------- Shared ---------- */
.blog-page main:focus {
  outline: none;
}
.blog-page {
  --blog-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}
/* Search and topic filters need blog.js; they stay invisible (no layout shift) until it runs. */
html:not(.blog-js) [data-blog-enhance] {
  visibility: hidden;
}
.blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}
.blog-meta__dot {
  color: #9aa7b3;
}
.blog-cover-empty {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--teal-tint), #d5ebe4);
}
.blog-cover-empty img {
  width: 56px;
  height: 56px;
  opacity: 0.55;
}
.blog-cover-empty--credit-health {
  background: linear-gradient(135deg, #e3f1e0, #c9e3c5);
}
.blog-cover-empty--safety {
  background: linear-gradient(135deg, #e6f0f7, #c9dceb);
}

/* ---------- Hero and search ---------- */
.blog-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
  padding-block: 28px 22px;
}
.blog-hero__title {
  font-size: clamp(38px, 4.4vw, 58px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--midnight);
}
/* "Journal" in IBM Plex Mono (self-hosted in site.css, regular upright only, so no faked italic or bold). */
.blog-hero__accent {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.06em;
  color: var(--forest);
}
.blog-hero__intro {
  margin-top: 8px;
  color: var(--muted);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.5;
}
.blog-search {
  position: relative;
  flex: 0 1 360px;
  margin-bottom: 10px;
}
.blog-search__icon {
  position: absolute;
  left: 15px;
  top: 50%;
  width: 19px;
  height: 19px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  pointer-events: none;
}
.blog-search__input {
  width: 100%;
  min-height: 46px;
  padding: 10px 16px 10px 44px;
  border: 1.5px solid #c9d4d2;
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  font-size: 15px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.blog-search__input::placeholder {
  color: var(--muted);
}
.blog-search__input:hover {
  border-color: #9fb2b0;
}
.blog-search__input:focus {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px var(--teal-tint);
  outline: none;
}

/* ---------- Featured carousel ---------- */
/* One slide per featured article: a green panel (title, link), then its featured image (a short, wide image or
   infographic, about 3:1) or its cover. Slides share one grid cell and cross-fade; the eyebrow (over the panel) and the
   progress dots (bottom centre of the card) stay put while the slides change (blog.js). */
.blog-carousel {
  --blog-cream: #fdf1da;
  --stub-pad: 36px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: var(--panel, var(--forest));
  transition:
    background-color 0.6s ease,
    opacity 0.3s ease;
}
/* The panel's colour comes from the picture (blog.js), which needs the picture loaded first. Until then the card is
   hidden (its space kept), so the brand-green fallback never flashes before the photo's colour; blog.js adds .is-ready
   once the colour is in place. Colour transitions are off until then, so the first colour does not fade in from green.
   If the script never runs, the card shows after 2s anyway. */
.blog-carousel:not(.is-ready) {
  opacity: 0;
  animation: blog-carousel-reveal 0s 2s forwards;
}
.blog-carousel:not(.is-ready),
.blog-carousel:not(.is-ready) * {
  transition: none;
}
@keyframes blog-carousel-reveal {
  to {
    opacity: 1;
  }
}
.blog-carousel__track {
  display: grid;
}
.blog-slide {
  position: relative;
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 32fr) minmax(0, 68fr);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.6s ease,
    visibility 0s linear 0.6s;
}
.blog-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease;
}
.blog-slide__stub {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 62px 40px 44px var(--stub-pad);
  background: var(--panel, var(--forest));
  color: #fff;
  transition: background-color 0.6s ease;
}
.blog-carousel__eyebrow {
  position: absolute;
  top: 28px;
  left: var(--stub-pad);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 18px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.blog-slide__title {
  font-family: var(--blog-serif);
  font-size: clamp(24px, 2.3vw, 32px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
/* Side by side, the card's height comes from the picture: the 68% column at 3:1 (272px on a 1200px card). The panel
   must fit inside that height, or the card grows and the 3:1 picture is zoomed and cut at both sides. So a long title is
   smaller, with its spacing (under the eyebrow, above the button) budgeted to fit four lines in that height. */
@media (min-width: 1024px) {
  .blog-slide__title--long {
    font-size: clamp(19px, 1.6vw + 2px, 23px);
    line-height: 1.2;
    letter-spacing: 0;
  }
  .blog-slide__stub:has(.blog-slide__title--long) {
    padding-block: 64px 30px;
  }
  .blog-slide__stub:has(.blog-slide__title--long) .blog-slide__cta {
    margin-top: 14px;
  }
}
.blog-slide__cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin-top: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.blog-slide__cta .icon {
  width: 18px;
  height: 18px;
  transition: transform 0.2s;
}
/* The whole slide opens its article: the button's link is stretched over the slide (.blog-slide is the containing
   block). The dots come later with the same z-index, so they stay clickable above it. */
.blog-slide__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
.blog-slide:hover .blog-slide__cta .icon {
  transform: translateX(4px);
}
.blog-slide__cta:focus-visible {
  outline-color: #fff;
}
/* Stretched both ways: an item with an aspect ratio would otherwise keep its own size and leave a gap under it. */
.blog-slide__media {
  position: relative;
  place-self: stretch;
  aspect-ratio: 3 / 1;
  /* The panel colour, so a join on a fraction of a pixel (scaled screens) never shows as a line. */
  background: var(--panel, var(--forest));
}
/* One pixel past the edge: on scaled screens the picture's last pixels would otherwise show as a thin line.
   The fade is eased (many stops on a smooth curve, not a straight line), so neither its start beside the panel nor its
   end in the picture shows as an edge. --fade holds the stops; the direction is set per layout. */
.blog-slide__media--photo::before {
  --p: var(--panel, var(--forest));
  --fade:
    var(--p) 0%, color-mix(in srgb, var(--p) 98.7%, transparent) 8.1%,
    color-mix(in srgb, var(--p) 95.1%, transparent) 15.5%, color-mix(in srgb, var(--p) 89.6%, transparent) 22.5%,
    color-mix(in srgb, var(--p) 82.5%, transparent) 29%, color-mix(in srgb, var(--p) 74.1%, transparent) 35.3%,
    color-mix(in srgb, var(--p) 64.8%, transparent) 41.2%, color-mix(in srgb, var(--p) 55%, transparent) 47.1%,
    color-mix(in srgb, var(--p) 45%, transparent) 52.9%, color-mix(in srgb, var(--p) 35.2%, transparent) 58.8%,
    color-mix(in srgb, var(--p) 25.9%, transparent) 64.7%, color-mix(in srgb, var(--p) 17.5%, transparent) 71%,
    color-mix(in srgb, var(--p) 10.4%, transparent) 77.5%, color-mix(in srgb, var(--p) 4.9%, transparent) 84.5%,
    color-mix(in srgb, var(--p) 1.3%, transparent) 91.9%, transparent 100%;
  content: "";
  position: absolute;
  inset: 0 auto 0 -1px;
  z-index: 1;
  width: 26%;
  background: linear-gradient(90deg, var(--fade));
  pointer-events: none;
}
/* Set by blog.js on a picture with a pale left edge: a shorter fade, so less of the picture turns muddy. */
.blog-slide__media--pale-edge::before {
  width: 20%;
}
.blog-slide__img,
.blog-slide__media .blog-cover-empty {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-carousel__controls {
  position: absolute;
  bottom: 14px;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  transform: translateX(-50%);
}
.blog-carousel__dot:focus-visible {
  outline-color: #fff;
  outline-offset: 2px;
}
.blog-carousel__dots {
  display: flex;
  align-items: center;
}
/* Each dot is a 24px target; the visible pill is its span. The current dot grows and fills over --slide-ms. */
.blog-carousel__dot {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
}
.blog-carousel__dot-fill {
  position: relative;
  display: block;
  width: 8px;
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(13, 27, 42, 0.12), 0 1px 3px rgba(13, 27, 42, 0.3);
  transition:
    width 0.3s ease,
    background 0.2s;
}
.blog-carousel__dot:hover .blog-carousel__dot-fill {
  background: rgba(255, 255, 255, 0.8);
}
.blog-carousel__dot[aria-current="true"] .blog-carousel__dot-fill {
  width: 32px;
}
.blog-carousel__dot[aria-current="true"] .blog-carousel__dot-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff;
  transform-origin: left;
}
.blog-carousel.is-ticking .blog-carousel__dot[aria-current="true"] .blog-carousel__dot-fill::after {
  animation: blog-slide-progress var(--slide-ms, 6s) linear both;
}
.blog-carousel.is-paused .blog-carousel__dot[aria-current="true"] .blog-carousel__dot-fill::after {
  animation-play-state: paused;
}
@keyframes blog-slide-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* ---------- Section headings (New articles, All articles) ---------- */
.blog-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.blog-section-title {
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--midnight);
}

/* ---------- New articles ---------- */
/* Compact cards: a small picture beside the headline, so all three headlines show without scrolling. */
.blog-picks {
  padding-top: 36px;
}
.blog-picks__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 20px;
  padding: 0;
  list-style: none;
}
.blog-pick__link {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  color: inherit;
  text-decoration: none;
}
.blog-pick__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
  background: var(--mist);
}
.blog-pick__img,
.blog-pick__media .blog-cover-empty {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.blog-pick__link:hover .blog-pick__img {
  transform: scale(1.04);
}
.blog-pick__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.blog-pick__body .blog-meta {
  font-size: 11px;
}
.blog-pick__title {
  color: var(--midnight);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.blog-pick__link:hover .blog-pick__title {
  color: var(--forest);
}
.blog-pick__excerpt {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* ---------- All articles and filters ---------- */
.blog-latest {
  padding-block: 40px 80px;
}
.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.blog-filter {
  min-height: 40px;
  padding: 6px 14px;
  border-radius: 7px;
  color: var(--navy);
  font-size: 15px;
  font-weight: 500;
  transition:
    background 0.2s,
    color 0.2s;
}
.blog-filter:hover {
  background: var(--mist);
}
.blog-filter[aria-pressed="true"] {
  background: var(--teal-tint);
  color: var(--forest);
  font-weight: 700;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 24px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}

/* ---------- Article card ---------- */
.blog-card__link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.blog-card__media {
  display: block;
  aspect-ratio: 5 / 2;
  overflow: hidden;
  border-radius: 4px;
  background: var(--mist);
}
.blog-card__img,
.blog-card__media .blog-cover-empty {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.blog-card__link:hover .blog-card__img {
  transform: scale(1.035);
}
.blog-card__link .blog-meta {
  margin-top: 6px;
}
.blog-card__title {
  font-size: clamp(19px, 1.45vw, 22px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--midnight);
  text-wrap: balance;
}
.blog-card__link:hover .blog-card__title {
  color: var(--forest);
}
.blog-card__excerpt {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media (prefers-reduced-motion: reduce) {
  .blog-card__img,
  .blog-pick__img,
  .blog-carousel,
  .blog-slide__stub,
  .blog-slide,
  .blog-slide.is-active,
  .blog-carousel__dot-fill,
  .blog-slide__cta .icon,
  .blog-back__icon,
  .blog-share__link,
  .blog-dashes__link::after,
  .blog-dashes__label {
    transition: none;
  }
  .blog-card__link:hover .blog-card__img,
  .blog-pick__link:hover .blog-pick__img {
    transform: none;
  }
}

/* ---------- Empty state ---------- */
.blog-empty {
  margin-top: 32px;
  padding: 40px 24px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  text-align: center;
  color: var(--muted);
}
.blog-empty__title {
  color: var(--navy);
  font-size: 18px;
  font-weight: 700;
}
.blog-empty .button {
  margin-top: 18px;
  min-height: 46px;
  border: 1.5px solid var(--forest);
  color: var(--forest);
}
.blog-empty .button:hover {
  background: var(--teal-wash);
}

/* ---------- Article page ---------- */
/* One reading column (--read) for the header and the text; the cover is wider. The share rail sits left of the text
   and the section dashes right of it, both sticky on desktop. */
.blog-post {
  --read: 720px;
}
.blog-article__head {
  max-width: var(--read);
  padding-block: 28px 40px;
}
.blog-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}
.blog-back:hover {
  color: var(--forest);
}
.blog-back__icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s;
}
.blog-back:hover .blog-back__icon {
  transform: translateX(-3px);
}
.blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.blog-tag {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--forest);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.blog-tag:hover {
  border-color: var(--teal-line);
  background: var(--teal-wash);
}
.blog-article__title {
  margin-top: 16px;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--midnight);
  /* Lines run the full column, so the title and the summary share the same left and right edges. */
  text-wrap: pretty;
}
.blog-article__lede {
  max-width: 33em;
  margin-top: 20px;
  color: var(--muted);
  font-size: clamp(18px, 1.45vw, 20px);
  line-height: 1.5;
  text-wrap: pretty;
}
.blog-article__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin-top: 26px;
  color: var(--muted);
  font-size: 14px;
}
.blog-article__author {
  color: var(--navy);
  font-weight: 700;
}
/* The cover is wider than the reading column, so it frames the article. It shows the whole image at its own aspect
   ratio (never cropped); the width/height attributes reserve the space until it loads. */
.blog-article__cover {
  max-width: 1004px;
  margin-bottom: 8px;
}
.blog-article__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  background: var(--mist);
}
/* No cover image: the brand fallback art keeps a fixed banner shape. */
.blog-article__img.blog-cover-empty {
  aspect-ratio: 12 / 5;
}
.blog-article__layout {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, var(--read)) 56px;
  justify-content: space-between;
  padding-block: 48px 24px;
}
.blog-article__layout .blog-article__body {
  grid-column: 2;
}

/* ---------- Share rail ---------- */
.blog-share {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: 140px;
  align-self: start;
}
.blog-share__toggle {
  display: none;
}
.blog-share__list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 30px -18px rgba(23, 40, 62, 0.35);
  list-style: none;
}
.blog-share__link {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: var(--muted);
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.2s;
}
.blog-share__link:hover {
  background: var(--mist);
  transform: translateY(-1px);
}
.blog-share__link--whatsapp:hover {
  color: #1a9e4b;
}
.blog-share__link--facebook:hover {
  color: #1877f2;
}
.blog-share__link--x:hover {
  color: #0d1b2a;
}
.blog-share__link--linkedin:hover {
  color: #0a66c2;
}
.blog-share__link--email:hover,
.blog-share__link--print:hover {
  color: var(--forest);
}
.blog-share__icon {
  width: 19px;
  height: 19px;
}

/* ---------- Section dashes ---------- */
/* One dash per section at the right edge; the current one (blog.js) is darker and longer; hover or focus shows the
   section title to its left. */
.blog-dashes {
  grid-column: 3;
  grid-row: 1;
  position: sticky;
  top: 45vh;
  align-self: start;
  justify-self: end;
}
.blog-dashes__list {
  display: grid;
  justify-items: end;
  margin: 0;
  padding: 0;
  list-style: none;
}
.blog-dashes__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 32px;
  height: 14px;
}
.blog-dashes__link::after {
  content: "";
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: #c3ccd3;
  transition:
    width 0.25s ease,
    background 0.25s ease;
}
.blog-dashes__link:hover::after {
  background: var(--muted);
}
.blog-dashes__link[aria-current="true"]::after {
  width: 24px;
  background: var(--midnight);
}
.blog-dashes__label {
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  width: max-content;
  max-width: 240px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--midnight);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translate(4px, -50%);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}
.blog-dashes__link:hover .blog-dashes__label,
.blog-dashes__link:focus-visible .blog-dashes__label {
  opacity: 1;
  transform: translate(0, -50%);
}

/* ---------- Article body ---------- */
.blog-article__body {
  min-width: 0;
  color: var(--ink-body);
  font-size: 18px;
  line-height: 1.75;
}
.blog-article__body > * + * {
  margin-top: 20px;
}
.blog-article__body h2 {
  margin-top: 44px;
  scroll-margin-top: 110px;
  color: var(--midnight);
  font-size: clamp(22px, 1.8vw, 26px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
}
.blog-article__body h3 {
  margin-top: 30px;
  scroll-margin-top: 110px;
  color: var(--midnight);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}
.blog-article__body h2 + *,
.blog-article__body h3 + * {
  margin-top: 14px;
}
.blog-article__body > :first-child {
  margin-top: 0;
}
/* No underline: the colour and heavier weight mark a link, and hover adds a soft tint. */
.blog-article__body a {
  border-radius: 3px;
  color: var(--forest);
  font-weight: 600;
  text-decoration: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-color 0.2s;
}
.blog-article__body a:hover {
  background-color: var(--teal-tint);
}
.blog-article__body strong {
  color: var(--navy);
  font-weight: 700;
}
.blog-article__body :is(ul, ol) {
  padding-left: 1.4em;
}
.blog-article__body ul {
  list-style: disc;
}
.blog-article__body ol {
  list-style: decimal;
}
.blog-article__body li + li {
  margin-top: 10px;
}
.blog-article__body li::marker {
  color: var(--forest);
  font-weight: 700;
}
.blog-article__body code {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--mist);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.88em;
}
.blog-article__body hr {
  margin-block: 40px;
  border: 0;
  border-top: 1px solid var(--line);
}
.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.article-callout {
  padding: 18px 22px;
  border-left: 4px solid var(--forest);
  border-radius: 0 12px 12px 0;
  background: var(--teal-wash);
}
.article-callout > * + * {
  margin-top: 10px;
}
.article-table {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.article-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.5;
}
.article-table :is(th, td) {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.article-table thead th {
  background: var(--mist);
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
}
.article-table tbody th {
  color: var(--navy);
  font-weight: 700;
}
.article-table tbody tr:last-child :is(th, td) {
  border-bottom: 0;
}
.blog-article__note {
  margin-top: 48px !important;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--mist);
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

/* ---------- Related articles ---------- */
.blog-related {
  padding-block: 48px 80px;
}
.blog-related__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.blog-related__title {
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--midnight);
}
.blog-related__all .icon {
  width: 18px;
  height: 18px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .blog-slide {
    grid-template-columns: 1fr;
  }
  .blog-slide__stub {
    --stub-pad: 28px;
    padding: 58px 28px 30px;
  }
  .blog-carousel__eyebrow {
    top: 26px;
    left: 28px;
  }
  .blog-slide__media--photo::before {
    inset: -1px 0 auto;
    width: auto;
    height: 40%;
    background: linear-gradient(180deg, var(--fade));
  }
  /* Stacked: a thin strip under the picture holds the dots, so they never cover an infographic's text. */
  .blog-carousel:has(.blog-carousel__controls:not([hidden])) {
    padding-bottom: 34px;
  }
  .blog-carousel__controls {
    bottom: 6px;
  }
  .blog-picks__list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .blog-pick__link {
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: center;
  }
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .blog-article__layout {
    grid-template-columns: minmax(0, var(--read));
    justify-content: center;
    padding-top: 36px;
  }
  .blog-article__layout .blog-article__body {
    grid-column: 1;
  }
  .blog-dashes {
    display: none;
  }
  /* Without JS the share links sit under the article, in a row. */
  .blog-share {
    position: static;
    grid-row: 2;
    margin-top: 28px;
  }
  .blog-share__list {
    display: flex;
    flex-wrap: wrap;
    width: max-content;
  }
  /* With JS: one floating Share button; it opens the phone's share sheet, or this stack. */
  .blog-js .blog-share {
    position: fixed;
    top: auto;
    right: 16px;
    bottom: calc(24px + env(safe-area-inset-bottom));
    z-index: 30;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 10px;
    margin: 0;
  }
  .blog-js .blog-share__toggle {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--forest);
    color: #fff;
    box-shadow: 0 10px 24px -10px rgba(15, 92, 69, 0.7);
  }
  .blog-js .blog-share__toggle .blog-share__icon {
    width: 20px;
    height: 20px;
  }
  .blog-js .blog-share__toggle .blog-share__icon:last-of-type,
  .blog-js .blog-share.is-open .blog-share__toggle .blog-share__icon:first-of-type {
    display: none;
  }
  .blog-js .blog-share.is-open .blog-share__toggle .blog-share__icon:last-of-type {
    display: block;
  }
  .blog-js .blog-share__list {
    display: none;
    flex-direction: column;
  }
  .blog-js .blog-share.is-open .blog-share__list {
    display: flex;
  }
}
/* No Rinn banner on phones (the only width it shows at on these pages), so the footer drops the space launch.css keeps for it. */
@media (max-width: 767px) {
  .blog-page .consumer-bar {
    display: none;
  }
  .blog-page .site-footer {
    padding-bottom: 28px;
  }
  /* Featured card on phones: the picture on top (8:5), a panel in the picture's colour below, the dots beside the button.
     Slides share one grid cell, so the button is pinned to the bottom and stays put however long a title is. */
  .blog-carousel {
    --panel-accent: #d6e9a9;
    --dots-row: 0px;
    --dots-bottom: 30px;
    container-type: inline-size;
    border-radius: 16px;
  }
  .blog-carousel:has(.blog-carousel__controls:not([hidden])) {
    padding-bottom: 0;
  }
  /* Five or more dots do not fit beside the button: they get a row of their own. */
  .blog-carousel:has(.blog-carousel__dot:nth-child(5)) {
    --dots-row: 30px;
    --dots-bottom: 8px;
  }
  .blog-slide {
    grid-template-rows: auto 1fr;
  }
  .blog-slide__media {
    order: -1;
    aspect-ratio: 8 / 5;
  }
  .blog-slide__media::before {
    content: "";
    position: absolute;
    inset: auto 0 -1px;
    z-index: 1;
    width: auto;
    height: 36%;
    /* Eased stops: an even fade from a light picture to a dark panel shows as a band where it meets the picture. */
    background: linear-gradient(
      0deg,
      var(--panel, var(--forest)) 0%,
      var(--panel, var(--forest)) 6%,
      color-mix(in srgb, var(--panel, var(--forest)) 86%, transparent) 18%,
      color-mix(in srgb, var(--panel, var(--forest)) 62%, transparent) 34%,
      color-mix(in srgb, var(--panel, var(--forest)) 36%, transparent) 52%,
      color-mix(in srgb, var(--panel, var(--forest)) 14%, transparent) 74%,
      transparent 100%
    );
    pointer-events: none;
  }
  /* A light blur that fades in towards the panel, so the picture's detail melts into the colour. */
  .blog-slide__media::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    height: 22%;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    /* Off at the very bottom: blurring there would pull lighter picture pixels over the solid panel colour. */
    -webkit-mask-image: linear-gradient(0deg, transparent 0%, transparent 16%, #000 42%, transparent 100%);
    mask-image: linear-gradient(0deg, transparent 0%, transparent 16%, #000 42%, transparent 100%);
    pointer-events: none;
  }
  .blog-slide__stub {
    justify-content: flex-start;
    padding: 46px 20px calc(18px + var(--dots-row));
  }
  .blog-carousel__eyebrow {
    top: calc(62.5cqw + 16px);
    left: 20px;
    color: var(--panel-accent);
    transition: color 0.6s ease;
  }
  .blog-slide__title {
    margin-bottom: 14px;
    color: var(--blog-cream);
    font-size: clamp(24px, 6.8vw, 32px);
  }
  .blog-slide__title--long {
    font-size: clamp(20px, 5.6vw, 26px);
    line-height: 1.16;
  }
  .blog-slide__cta {
    gap: 8px;
    margin-top: auto;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 99px;
    background: var(--panel-accent);
    color: var(--panel, var(--forest));
    transition:
      background-color 0.6s ease,
      color 0.6s ease;
  }
  .blog-slide__cta:focus-visible {
    outline-offset: 2px;
  }
  .blog-carousel__controls {
    right: 14px;
    bottom: var(--dots-bottom);
    left: auto;
    transform: none;
  }
  .blog-carousel__dot[aria-current="true"] .blog-carousel__dot-fill {
    width: 24px;
  }
}
@media (max-width: 339px) {
  /* A narrow phone has no room for any dots beside the button. */
  .blog-carousel:has(.blog-carousel__dot:nth-child(2)) {
    --dots-row: 30px;
    --dots-bottom: 8px;
  }
}
@media (max-width: 640px) {
  .blog-hero {
    padding-block: 26px 24px;
  }
  .blog-search {
    flex-basis: 100%;
    margin-bottom: 0;
  }
  .blog-picks {
    padding-top: 32px;
  }
  .blog-pick__link {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 14px;
  }
  .blog-pick__title {
    font-size: 16px;
  }
  .blog-pick__excerpt {
    display: none;
  }
  .blog-latest {
    padding-block: 32px 72px;
  }
  .blog-filters {
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .blog-filters::-webkit-scrollbar {
    display: none;
  }
  .blog-filter {
    flex: none;
    font-size: 14px;
    padding-inline: 14px;
  }
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .blog-article__body {
    font-size: 17px;
  }
  .blog-article__head {
    padding-block: 18px 24px;
  }
  .blog-tags {
    margin-top: 12px;
  }
  /* The author takes its own line and spaces replace the dots, so a wrapped line never ends on a stray dot. */
  .blog-article__byline {
    gap: 2px 14px;
  }
  .blog-article__author {
    flex-basis: 100%;
  }
  .blog-article__byline .blog-meta__dot {
    display: none;
  }
  .blog-article__img {
    border-radius: 10px;
  }
}