/* ---------------------------------------------------------------------------
   Knowledge Hub article
   ---------------------------------------------------------------------------
   The layout of a guide: category, title and standfirst across the top; then
   two columns - the author, a facts-and-share line, the hero and the guide on
   the left; the listen card and "In this guide" on the right, following the
   page. The guide itself is the CMS's own blocks, styled
   by main.css - this sheet only lays them out. Prefixed .kha throughout.
   Registered in EcommerceBase.Site.csproj.
   --------------------------------------------------------------------------- */

.kha {
  --kha-red: #ff0801;
  --kha-red-dark: #d40600;
  --kha-ink: #202020;
  --kha-body: #5b6068;
  --kha-soft: #878d97;
  --kha-line: #e3e6ec;
  --kha-grey: #f5f6f8;
  --kha-blush: #fff1f1;
  --kha-head: "Montserrat", "Inter", Helvetica, Arial, sans-serif;
  --kha-sans: "Inter", Helvetica, Arial, sans-serif;
  --kha-wrap: 1400px;
  --kha-side: 400px;
  padding: 22px 0 70px;
  background: #fff;
  font-family: var(--kha-sans);
  color: var(--kha-ink);
}
.kha *, .kha *::before, .kha *::after { box-sizing: border-box; }
.kha__wrap { max-width: var(--kha-wrap); margin: 0 auto; padding: 0 20px; }
@media (min-width: 1024px) { .kha { padding-top: 30px; } }

/* ----------------------------------------------------------------- head */

.kha__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-family: var(--kha-head);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kha-body);
  text-decoration: none;
}
.kha__eyebrow::before { content: ""; width: 3px; height: 16px; border-radius: 2px; background: var(--kha-red); }
.kha__eyebrow:hover { color: var(--kha-red); text-decoration: none; }
.kha__title {
  max-width: 980px;
  margin: 0 0 16px;
  padding: 0;
  font-family: var(--kha-head);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--kha-ink);
  text-wrap: balance;
}
@media (min-width: 768px) { .kha__title { font-size: 44px; } }
@media (min-width: 1024px) { .kha__title { font-size: 54px; } }
.kha__stand { max-width: 960px; margin: 0; font-size: 18px; line-height: 1.5; color: var(--kha-body); }
@media (min-width: 1024px) { .kha__stand { font-size: 21px; } }

/* ----------------------------------------------------------------- grid */

.kha__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 18px; }
@media (min-width: 1024px) {
  .kha__grid { grid-template-columns: minmax(0, 1fr) var(--kha-side); gap: 40px; align-items: start; margin-top: 20px; }
}
.kha__main { min-width: 0; }
.kha__side { min-width: 0; }

/* --------------------------------------------------------------- author */

/* main.css's block - photo, the two hover panels, the fact-checked line -
   set larger, without its rule beneath (the facts line carries one) */
.kha .article__author { margin: 0; padding: 12px 0 0; border: 0; gap: 18px; font-size: 14px; }
.kha .article__author-image { flex: 0 0 64px; }
.kha .article__author-img { width: 64px; height: 64px; }
.kha .article__author-checked { right: -2px; bottom: -2px; width: 22px; }
.kha .article__author-title { padding: 0; font-size: 17px; line-height: 1.35; color: var(--kha-ink); }
.kha .article__author-title span {
  font-weight: 400;
  text-decoration: underline dotted;
  text-decoration-color: #b6bcc7;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  cursor: help;
  transition: text-decoration-color 0.15s ease;
}
.kha .article__author-title span:hover { text-decoration-color: var(--kha-red); }
.kha .article__author-title span:last-of-type { font-weight: 700; }
.kha .article__author-description { margin-top: 5px; font-size: 12px; letter-spacing: 0.06em; color: var(--kha-soft); }

/* The author's two pop-up panels open on hover in main.css. A touch screen
   keeps a tapped element hovered until the next tap somewhere else, so on
   iOS a panel stuck open over the guide. Where there is no hover the panels
   open on a tap and close on the next (kh-article.js), and on a phone they
   sit as a sheet at the foot of the screen rather than hanging off its side. */
@media (hover: none) {
  .kha .article__author-title span:hover .article__author-popup { display: none; }
  .kha .article__author-title span.is-open .article__author-popup { display: block; }
  .kha .article__author-title span:hover { position: relative !important; z-index: 2; }
}
@media (max-width: 767px) {
  /* the open panel's span rises above everything - the reg pill, the
     header - so the dimmed page behind the sheet covers them too */
  .kha .article__author-title span.is-open { z-index: 1000; }
  .kha .article__author-popup {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    margin: 0;
    padding: 0;
  }
  .kha .article__author-popup::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(20, 22, 26, 0.45);
  }
  .kha .article__author-popup-panel {
    width: auto;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    padding: 12px 20px calc(22px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 40px rgba(20, 22, 26, 0.25);
    text-align: left;
  }
  /* main.css draws a great grey circle behind the panel's head and a red
     bar under it; here the circle becomes the sheet's handle */
  .kha .article__author-popup-panel::before {
    content: "";
    position: static;
    display: block;
    width: 40px;
    height: 4px;
    margin: 0 auto 16px;
    border-radius: 2px;
    background: #d9dde3;
  }
  .kha .article__author-popup-panel::after { height: 4px; }
  .kha .article__author-popup-profile,
  .kha .article__author-popup-checked {
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 0 12px;
    border-radius: 50%;
    object-fit: cover;
  }
  .kha .article__author-popup-checked { width: 44px; height: 44px; border-radius: 0; }
  .kha .article__author-popup-title { padding: 0 36px 10px 0; font-family: var(--kha-head); font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--kha-ink); }
  .kha .article__author-popup-description { font-size: 13.5px; line-height: 1.55; color: var(--kha-body); }
  .kha-sheet-close {
    position: absolute;
    top: 14px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--kha-grey);
    color: var(--kha-ink);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
}

/* ------------------------------------------------------- facts and share */

.kha__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 22px;
  padding: 14px 0;
  border-top: 1px solid var(--kha-line);
  border-bottom: 1px solid var(--kha-line);
}
.kha__facts { display: flex; flex-wrap: wrap; align-items: center; font-size: 15px; color: var(--kha-body); }
.kha__fact { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.kha__fact + .kha__fact { margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--kha-line); }
.kha__fact::before { content: ""; width: 17px; height: 17px; background-color: var(--kha-body); }
.kha__fact--time::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat; }
.kha__fact--date::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat; }
.kha__share { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.kha__share-label {
  margin-right: 6px;
  font-family: var(--kha-head);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kha-body);
}
.kha__share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--kha-line);
  border-radius: 50%;
  background: #fff;
  color: var(--kha-ink);
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.kha__share-btn:hover { border-color: var(--kha-red); color: var(--kha-red); background: #fff; text-decoration: none; transform: translateY(-1px); }
.kha__share-btn:focus-visible { outline: 2px solid var(--kha-red); outline-offset: 2px; }
.kha__share-btn::before { content: ""; width: 16px; height: 16px; background-color: currentColor; }
.kha__share-btn--x::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E") center / contain no-repeat; width: 13px; height: 13px; }
.kha__share-btn--facebook::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M13.5 22v-8.2h2.8l.4-3.3h-3.2V8.4c0-.9.3-1.6 1.6-1.6H17V3.9c-.3 0-1.3-.1-2.5-.1-2.5 0-4.2 1.5-4.2 4.3v2.4H7.5v3.3h2.8V22h3.2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M13.5 22v-8.2h2.8l.4-3.3h-3.2V8.4c0-.9.3-1.6 1.6-1.6H17V3.9c-.3 0-1.3-.1-2.5-.1-2.5 0-4.2 1.5-4.2 4.3v2.4H7.5v3.3h2.8V22h3.2z'/%3E%3C/svg%3E") center / contain no-repeat; width: 17px; height: 17px; }
.kha__share-btn--whatsapp::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E") center / contain no-repeat; width: 16px; height: 16px; }
.kha__share-btn--linkedin::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E") center / contain no-repeat; width: 15px; height: 15px; }
.kha__share-btn--mail::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") center / contain no-repeat; width: 16px; height: 16px; }
.kha__share-btn--link::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1.5 1.5'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1.5-1.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1.5 1.5'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1.5-1.5'/%3E%3C/svg%3E") center / contain no-repeat; width: 16px; height: 16px; }
.kha__share-btn.is-done { border-color: #1f9d55; color: #1f9d55; }
.kha__share-btn.is-done::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------------------------------------------------------------- guide */

.kha__main .article { padding-top: 0; }
.kha__main .article__image-wrap { margin: 24px 0 26px; }
/* the hero fills the column; the small Tyres.co.uk badge over its corner
   is an image in the same wrap and keeps main.css's size */
.kha__main .article__image-wrap img.article__image { width: 100%; height: auto; border-radius: 14px; }
.kha__main .article__description--large { font-size: 17px; line-height: 1.65; }
@media (min-width: 1024px) { .kha__main .article__description--large { font-size: 18px; } }
.kha__main .article__description h2 {
  margin: 6px 0 14px;
  font-family: var(--kha-head);
  font-size: 24px;
  line-height: 1.25;
  color: var(--kha-ink);
  /* a heading reached from the list stops under the site's header */
  scroll-margin-top: 96px;
}
.kha__main .article__description h2 b { font-weight: 800; }

/* the passage being read aloud: a soft rounded tint behind the words with
   room around them and a red bar down its left edge, drawn by a pseudo
   element so nothing moves; the tint stops short of the paragraph's own
   25px of padding below it, which main.css gives every paragraph here */
.kha-reading { position: relative; z-index: 0; }
.kha-reading::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -8px;
  right: -16px;
  bottom: -8px;
  left: -18px;
  border-left: 3px solid var(--kha-red);
  border-radius: 10px;
  background: #fff4f3;
}
.kha__main .article__description p.kha-reading::before { bottom: 17px; }

/* --------------------------------------------------------------- listen */

/* A card: the play button, what it does, and a little waveform that moves
   while it reads. Shown by kh-article.js only where the browser can speak. */
.kha__listen { position: relative; display: block; }
.kha__listen[hidden] { display: none; }
.kha__listen-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 16px 18px;
  border: 0;
  border-radius: 14px;
  background: var(--kha-blush);
  color: var(--kha-ink);
  font-family: var(--kha-sans);
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.15s ease;
}
.kha__listen-btn:hover { background: #ffe9e8; }
.kha__listen-btn:focus-visible { outline: 2px solid var(--kha-red); outline-offset: 2px; }
.kha__listen-icon { position: relative; flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; background: var(--kha-red); }
.kha__listen-icon::before { content: ""; position: absolute; inset: 0; background-color: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") center / 26px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") center / 26px no-repeat; }
.kha__listen.is-playing .kha__listen-icon::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='6' y='5' width='4.5' height='14' rx='1'/%3E%3Crect x='13.5' y='5' width='4.5' height='14' rx='1'/%3E%3C/svg%3E") center / 26px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='6' y='5' width='4.5' height='14' rx='1'/%3E%3Crect x='13.5' y='5' width='4.5' height='14' rx='1'/%3E%3C/svg%3E") center / 26px no-repeat; }
.kha__listen-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; }
.kha__listen-text b { font-family: var(--kha-head); font-size: 16px; font-weight: 800; line-height: 1.2; color: var(--kha-ink); }
.kha__listen-text span { font-size: 13.5px; line-height: 1.35; color: var(--kha-body); }
.kha__listen-wave { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; height: 30px; }
.kha__listen-wave i { display: block; width: 3px; height: 12px; border-radius: 2px; background: rgba(255, 8, 1, 0.32); }
.kha__listen-wave i:nth-child(1) { height: 10px; }
.kha__listen-wave i:nth-child(2) { height: 20px; }
.kha__listen-wave i:nth-child(3) { height: 28px; }
.kha__listen-wave i:nth-child(4) { height: 16px; }
.kha__listen-wave i:nth-child(5) { height: 22px; }
.kha__listen-wave i:nth-child(6) { height: 12px; }
.kha__listen.is-playing .kha__listen-wave i { background: var(--kha-red); animation: kha-wave 0.8s ease-in-out infinite alternate; }
.kha__listen.is-playing .kha__listen-wave i:nth-child(2) { animation-delay: 0.1s; }
.kha__listen.is-playing .kha__listen-wave i:nth-child(3) { animation-delay: 0.2s; }
.kha__listen.is-playing .kha__listen-wave i:nth-child(4) { animation-delay: 0.3s; }
.kha__listen.is-playing .kha__listen-wave i:nth-child(5) { animation-delay: 0.15s; }
.kha__listen.is-playing .kha__listen-wave i:nth-child(6) { animation-delay: 0.25s; }
@keyframes kha-wave { from { transform: scaleY(0.45); } to { transform: scaleY(1.15); } }
/* while it reads, a stop button sits where the wave was */
.kha__listen.is-active .kha__listen-btn { padding-right: 64px; }
.kha__listen.is-active .kha__listen-wave { display: none; }
.kha__listen-stop {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 36px;
  height: 36px;
  margin: -18px 0 0;
  padding: 0;
  border: 1px solid #f3c6c4;
  border-radius: 50%;
  background: #fff;
  color: var(--kha-ink);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.kha__listen-stop::before { content: ""; position: absolute; inset: 11px; border-radius: 2px; background: currentColor; }
.kha__listen-stop:hover { border-color: var(--kha-red); color: var(--kha-red); }
.kha__listen-stop:focus-visible { outline: 2px solid var(--kha-red); outline-offset: 2px; }

/* ------------------------------------------------------------------ toc */

.kha__toc { margin-top: 28px; }
.kha__toc-title { margin: 0 0 12px; font-family: var(--kha-head); font-size: 24px; font-weight: 800; line-height: 1.2; color: var(--kha-ink); }
.kha__toc-list { margin: 0; padding: 0; list-style: none; }
.kha__toc-item + .kha__toc-item { border-top: 1px solid var(--kha-line); }
.kha__toc-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 40px 15px 18px;
  font-size: 16px;
  line-height: 1.35;
  color: var(--kha-ink);
  text-decoration: none;
  transition: background 0.15s ease;
}
.kha__toc-link::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -5px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.45;
}
.kha__toc-num { flex: 0 0 auto; font-family: var(--kha-head); font-size: 13px; font-weight: 700; color: var(--kha-soft); }
.kha__toc-text { min-width: 0; }
.kha__toc-link:hover { background: var(--kha-grey); text-decoration: none; color: var(--kha-ink); }
.kha__toc-link.is-active { font-weight: 700; background: var(--kha-blush); box-shadow: inset 3px 0 0 var(--kha-red); }
.kha__toc-link.is-active .kha__toc-num { color: var(--kha-red); }
.kha__toc-link.is-active::after { color: var(--kha-red); opacity: 1; }

/* -------------------------------------------------------------- related */

.kha-related { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--kha-line); }
.kha-related__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.kha-related__title { margin: 0; font-family: var(--kha-head); font-size: 22px; font-weight: 800; line-height: 1.2; color: var(--kha-ink); }
.kha-related__all { font-family: var(--kha-head); font-size: 13px; font-weight: 800; color: var(--kha-red); text-decoration: none; white-space: nowrap; }
.kha-related__all:hover { color: var(--kha-red-dark); text-decoration: none; }
.kha-related__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.kha-related__item { min-width: 0; }
.kha-related__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--kha-line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  color: var(--kha-ink);
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.kha-related__card:hover { border-color: #d3d8e0; box-shadow: 0 10px 28px rgba(20, 22, 26, 0.09); color: var(--kha-ink); text-decoration: none; }
.kha-related__media { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--kha-grey); }
.kha-related__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform 0.35s ease; }
.kha-related__card:hover .kha-related__media img { transform: scale(1.04); }
.kha-related__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.kha-related__cat { font-family: var(--kha-head); font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kha-red); }
.kha-related__name { font-family: var(--kha-head); font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--kha-ink); }

/* ---------------------------------------------------------------- phone */

@media (max-width: 1023px) {
  /* kh-article.js moves the listen card and the list in under the facts line */
  .kha__side:empty { display: none; }
  .kha__side-holder { margin: 22px 0 4px; }
  .kha__toc { margin-top: 22px; }
}
@media (max-width: 639px) {
  /* a phone's width: a smaller photo, the fact-checked line on one line,
     the facts without their divider so they wrap cleanly if they must */
  .kha .article__author { gap: 12px; padding-top: 8px; }
  .kha .article__author-image { flex-basis: 46px; }
  .kha .article__author-img { width: 46px; height: 46px; }
  .kha .article__author-checked { width: 18px; }
  .kha .article__author-title { font-size: 14px; line-height: 1.3; }
  .kha .article__author-description { margin-top: 4px; font-size: 9px; letter-spacing: 0.03em; }
  .kha__meta { gap: 10px 16px; margin-top: 16px; padding: 12px 0; }
  .kha__facts { gap: 6px 16px; font-size: 13.5px; }
  .kha__fact + .kha__fact { margin-left: 0; padding-left: 0; border-left: 0; }
  .kha__fact::before { width: 15px; height: 15px; }
  .kha__share { width: 100%; margin-left: 0; }
  .kha__share-btn { width: 36px; height: 36px; }
  .kha__listen-icon { flex-basis: 48px; width: 48px; height: 48px; }
  .kha__listen-btn { padding: 14px 16px; gap: 14px; }
  .kha__toc-title { font-size: 20px; }
  .kha__toc-link { padding: 13px 36px 13px 14px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .kha * { transition: none !important; }
  .kha__listen-wave i { animation: none !important; }
}