/* =========================================================
   BLOG pattern - hub (home.php) and article (single.php)

   Figma: Blog 559:376 and Blog - Single (Template) 559:616.
   Moved here from the two templates' inline <style> blocks as part of
   the figma-exact pass, so the render harness measures what ships.

   Scoping: every selector is under .bl-* (hub) or .bs-* (article).
   Those class prefixes exist in home.php and single.php only, which is
   the "section class unique to that pattern" functions.php asks for, so
   nothing here can reach another pattern's page.

   Every number below is read off a Figma layer, never rounded. Figma
   coordinates are frame absolute on a 1920 artboard, so a Figma y is the
   page y the gate asserts. Fixed pixel geometry lives in the
   min-width:1201px block; below that the layout goes fluid, because the
   file has no mobile frames.

   Known Figma oddities reproduced as drawn (see docs/fleet-issues/blog.md):
   - hub grid card 1 has a filled blue Read more, the other eight are outlined
   - hub featured card 2 carries an extra 20 percent black layer, card 1 does not
   - the hub hero photo layer is switched off in the design, the article's is on
   - hub lip y 567, article lip y 566
   - card internals jitter 1-8px between Figma rows, the majority value is built
   ========================================================= */

/* =========================================================
   1. SHARED BLOG HERO  (hub 559:377, article 559:617)
   ========================================================= */

.bl-hero,
.bs-hero {
  position: relative;
  z-index: 0;
  overflow: visible;
  color: #fff;
  background: #0c4a5f;
}
.bl-hero .bg,
.bs-hero .bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.bl-hero .bg img,
.bs-hero .bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Overlay 559:379 / 559:619 */
.bl-hero .bg .ov,
.bs-hero .bg .ov {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
}
/* 559:618 own overlay, article only: the design stacks a second layer.
   It sits between .bg and .lip in DOM order, so it paints over the photo
   and under the white panel without needing a z-index of its own. */
.bs-hero .ov2 {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}
/* Background 559:389 / 559:629: white panel with 28px top corners */
.bl-hero .lip,
.bs-hero .lip {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  background: #fff;
  border-radius: 28px;
}
.bl-hero .container,
.bs-hero .container {
  position: relative;
  z-index: 2;
}
.bl-hero .eyebrow,
.bs-hero .eyebrow {
  font-family: var(--font-display);
  font-weight: 400; /* Circular Std Book */
  color: #fff;
  white-space: nowrap;
}
.bl-hero .hero-title,
.bs-hero .hero-title {
  font-family: var(--font-display);
  font-weight: 700; /* Circular Std Bold */
  color: #fff;
  white-space: nowrap;
  margin: 0;
}

/* =========================================================
   2. HUB  (home.php, Figma 559:376)
   ========================================================= */

.bl-guide {
  position: relative;
  z-index: 1;
}
/* 559:390 */
.bl-guide h2 {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: #000;
}

/* ---- featured pair 559:391 ---- */
.bl-feat {
  display: grid;
}
.bl-fcard {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--band);
  color: #fff;
  text-decoration: none;
}
.bl-fcard img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* extra 20 percent black on card 2 only, 559:402 */
.bl-fcard .ovx {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}
.bl-feat .bl-fcard:nth-child(1) .ovx {
  display: none;
}
/* Background 559:394 / 559:403 */
.bl-fcard .sh {
  position: absolute;
  inset: 0;
  opacity: 0.7;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8) 100%);
}
.bl-fcard .fb {
  position: absolute;
  z-index: 2;
}
.bl-fcard h3 {
  font-family: var(--font-display);
  font-weight: 500; /* Circular Std Medium */
  color: #fff;
  margin: 0;
}
.bl-fcard p {
  font-family: var(--font-display);
  font-weight: 300; /* Circular Std Light */
  color: #fff;
  margin: 0;
}
/* btn 559:398: outlined pill, no fill */
.bl-fcard .btn {
  background: transparent;
  border: 1px solid #fff;
  font-family: var(--font-display);
  font-weight: 500;
  color: #fff;
}

/* ---- topic filter and keyword search 559:527 ---- */
.bl-filter label {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
}
.bl-filter .ctl {
  position: relative;
}
.bl-filter select,
.bl-filter input {
  display: block;
  width: 100%;
  background-color: #fff;
  border: 1px solid var(--pill-line); /* #b7b7b7 */
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--ink);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.bl-filter input::placeholder {
  color: var(--ink);
  opacity: 1;
}
/* Vector 559:532 and 559:537, the exported Figma glyphs. The design draws each
   vector ON TOP of its Rectangle 718, so the glyph is the FIELD's own
   background image: carried on the .ctl wrapper instead it is painted over by
   the field's opaque white fill and never shows. background-origin: border-box
   makes the field's background box equal the .ctl box, so every offset below is
   measured from the same edge the Figma vector is measured from. */
.bl-filter select {
  background-image: url("/wp-content/themes/evoheat/assets/img/figma/blog/icon-chevron.svg");
  background-repeat: no-repeat;
  background-origin: border-box;
}
.bl-filter .ctl.s input {
  background-image: url("/wp-content/themes/evoheat/assets/img/figma/blog/icon-search.svg");
  background-repeat: no-repeat;
  background-origin: border-box;
}

/* ---- card grid 559:410 ---- */
.bl-grid {
  display: grid;
}
.bl-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line); /* #d3d3d3 */
  display: block;
}
.bl-card .im {
  overflow: hidden;
}
.bl-card .im a {
  display: block;
  height: 100%;
}
.bl-card .im img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Rectangle 720 559:415: white panel lapping over the photo */
.bl-card .bd {
  position: relative;
  z-index: 2;
  background: #fff;
}
.bl-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}
.bl-card h3 a {
  color: inherit;
  text-decoration: none;
}
.bl-card p {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--ink);
  margin: 0;
}
/* The eight outlined Read more buttons are drawn with three different
   inks: #27272d at 50 percent on 559:464, 474, 484, 494 and 514, #18181e
   at 50 percent on 559:434 and 504, and a flat #b7b7b7 on 559:449. The
   majority, #27272d at 50 percent, ships on every card, which is also the
   ink the related-post cards 559:659 use. Listed in docs/fleet-issues/blog.md. */
.bl-card .rm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(39, 39, 45, 0.5); /* #27272d at 50%, 559:464 */
  font-family: var(--font-display);
  font-weight: 400; /* Circular Std Book */
  color: var(--ink);
  text-decoration: none;
}
/* card 1 is drawn filled, 559:424 */
.bl-grid .bl-card:first-child .rm {
  background: var(--blue-hero);
  border-color: transparent;
  color: #fff;
}

/* ---- pagination 559:516 ---- */
.bl-pager {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
}
.bl-pager li {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.bl-pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 300;
  color: #636363;
  text-decoration: none;
  background-repeat: no-repeat;
  background-position: center;
}
.bl-pager .page-numbers.current {
  background-color: var(--blue-hero);
  color: #fff;
  font-weight: 500;
}
.bl-pager .page-numbers.prev,
.bl-pager .page-numbers.next {
  color: transparent; /* the glyph is replaced by the Figma arrow */
}
.bl-pager .page-numbers.prev {
  border: 1px solid rgba(24, 24, 30, 0.5); /* 559:517 stroke */
  background-image: url("/wp-content/themes/evoheat/assets/img/figma/blog/pager-prev.svg");
}
/* Button - Previous 559:517 is drawn as a SOLID #18181e stroke with the whole
   button at opacity 0.5, so the arrow inside dims with the ring. That is how
   the design draws the disabled prev on the page-1 frame, and home.php emits
   that disabled span on page 1 only. Carrying the 50 percent on the stroke
   alone, as this rule used to, left the arrow at full ink and twice as dark as
   drawn. getComputedStyle has no opacity in the gate's vocabulary, so this one
   is held by the pixel diff and recorded in docs/fleet-issues/blog.md. */
.bl-pager .page-numbers.prev.disabled {
  border-color: #18181e;
  opacity: 0.5;
}
.bl-pager .page-numbers.next {
  background-color: var(--navy); /* #002b54, 559:520 */
  background-image: url("/wp-content/themes/evoheat/assets/img/figma/blog/pager-next.svg");
}
.bl-empty {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--ink);
}

/* =========================================================
   3. ARTICLE  (single.php, Figma 559:616)
   ========================================================= */

/* Background 559:629 is painted inside the hero's own stacking context at
   z-index 1 and reaches down to y 991, past the date at 684, the title at
   729 and the top of the featured image at 951. The article column has to
   raise itself above it, exactly as the hub's .bl-guide does, or the panel
   covers all three. Box geometry alone cannot show this: only the paint
   order changes. */
.bs-art {
  position: relative;
  z-index: 1;
}

/* 559:643 */
.bs-date {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  color: #000;
}
/* 559:642 */
.bs-title {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}
/* image 417 559:640 */
.bs-feat {
  overflow: hidden;
  background: linear-gradient(160deg, #e9edf0, #d4dbe0);
}
.bs-feat img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* contents 559:644 */
.bs-body h2 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
}
.bs-body p {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--ink);
}
.bs-body strong,
.bs-body b {
  font-weight: 700;
  color: var(--ink);
}
/* Figma draws every section heading of 559:645..559:649 in Circular Std
   Medium, and only runs INSIDE a paragraph in Circular Std Bold. The
   imported article bodies wrap each heading's own text in <strong>, which
   would render the heading Bold, so the heading keeps the drawn weight
   while inline bold in body copy stays Bold. */
.bs-body h2 strong,
.bs-body h2 b {
  font-weight: 500;
}
.bs-body a {
  color: inherit;
  text-decoration: underline;
  word-break: break-word;
}
.bs-body ul {
  list-style: disc;
}
.bs-body li {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--ink);
}

/* Videos 706:12949. Figma draws two empty placeholder boxes with a play
   glyph and no embed URL, so this renders only when a human sets
   _evoheat_video_1_url / _evoheat_video_2_url on a post. */
.bs-vids {
  display: grid;
}
.bs-embed {
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
}
.bs-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.bs-embed .play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: url("/wp-content/themes/evoheat/assets/img/figma/blog/play-button.svg") center / 100% 100% no-repeat;
}

/* Back-Socials 559:687 */
.bs-metabar {
  border-top: 1px solid #000; /* Line 1 559:697 */
}
.bs-metabar .row {
  position: relative;
}
.bs-back {
  position: absolute;
  display: block;
  text-decoration: none;
}
.bs-back .ar {
  position: absolute;
  display: block;
  font-family: var(--font-ui); /* Inter Medium 559:691 */
  font-weight: 500;
  color: #090909;
  transform: rotate(90deg);
}
.bs-back .lb {
  position: absolute;
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  color: #090909;
  white-space: nowrap;
}
.bs-share {
  position: absolute;
}
.bs-share .lbl {
  position: absolute;
  display: block;
  /* Figma 559:696 asks for General Sans Medium, which the theme does not
     ship. Inter Medium is the closest face already loaded. Flagged. */
  font-family: var(--font-ui);
  font-weight: 500;
  color: #090909;
  white-space: nowrap;
}
.bs-share a {
  position: absolute;
  display: block;
}
.bs-share img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Related 559:650 */
.bs-rel h2 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  text-align: left;
}
.bs-relrow {
  display: grid;
}
.bs-relcard {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  display: block;
}
.bs-relthumb {
  display: block;
  overflow: hidden;
}
.bs-relthumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bs-relbody {
  position: relative;
  z-index: 2;
  background: #fff;
}
.bs-relbody h3 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}
.bs-relbody p {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--ink);
  margin: 0;
}
.bs-readmore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(39, 39, 45, 0.5); /* #27272d at 50%, 559:659 */
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
}

/* =========================================================
   4. THE 1920 ARTBOARD: exact Figma geometry
   ========================================================= */

@media (min-width: 1201px) {

  /* ---- hero, both templates ---- */
  .bl-hero,
  .bs-hero {
    height: 600px;
    min-height: 0;
  }
  /* header 559:618 fill: 100% wide, 171.24% tall, offset -45.76% / 0.01% */
  .bl-hero .bg img,
  .bs-hero .bg img {
    position: absolute;
    left: 0.192px;
    top: -274.56px;
    width: 1920px;
    height: 1027.44px;
    max-width: none;
    object-fit: fill;
  }
  .bl-hero .lip,
  .bs-hero .lip {
    height: 425px;
  }
  .bl-hero .lip {
    top: 567px;
  }
  .bs-hero .lip {
    top: 566px;
  }
  .bl-hero .container,
  .bs-hero .container {
    padding-top: 300px;
  }
  .bl-hero .eyebrow,
  .bs-hero .eyebrow {
    margin: 0 0 2px -3px; /* container 200 -> Figma 197 */
    width: 138px;
    font-size: 20px;
    line-height: 25px;
  }
  .bl-hero .hero-title,
  .bs-hero .hero-title {
    margin-left: -3px;
    width: 151px;
    font-size: 75px;
    line-height: 89px;
    letter-spacing: -1.5px;
  }

  /* ---- hub: guide heading 559:390 ---- */
  .bl-guide {
    padding: 89px 0 71px; /* h2 at y 689, footer at y 3775 */
  }
  .bl-guide h2 {
    max-width: 1439px;
    margin: 0 auto;
    font-size: 50px;
    line-height: 71px;
    letter-spacing: -1.5px;
  }

  /* ---- hub: featured pair 559:391 ---- */
  .bl-feat {
    width: 1537px;
    margin: 100px 0 0 -9px; /* row at y 860, x 191 */
    grid-template-columns: 748.276px 748.276px;
    justify-content: space-between;
    gap: 0;
  }
  .bl-fcard {
    height: 539px;
    border-radius: 20px;
    aspect-ratio: auto;
  }
  .bl-fcard .ovx,
  .bl-fcard .sh {
    border-radius: 20px;
  }
  .bl-fcard .fb {
    left: 54.603px; /* card 191 -> btn 245.603 */
    top: 266px;     /* card 860 -> title 1126 */
    width: 602.665px; /* txt 559:395 */
    right: auto;
    bottom: auto;
    padding: 0;
  }
  /* The design's text slots are fixed boxes, so a one-line real title must
     not pull the copy and the button up. Height is set, not just clamped. */
  .bl-fcard h3 {
    margin-left: 10.108px; /* 245.603 -> 255.711 */
    width: 544.017px;
    height: 86px;
    font-size: 36px;
    line-height: 43px;
    letter-spacing: -1.44px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .bl-fcard p {
    margin: 8px 0 0 10.108px;
    width: 592.554px;
    height: 51px;
    font-size: 17px;
    line-height: 25.5px; /* Figma leading normal, 51px box over two lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .bl-fcard .btn {
    margin-top: 18px;
    width: 189.091px;
    height: 60px;
    border-radius: 50px;
    font-size: 20px;
  }

  /* ---- hub: filter row 559:527 ---- */
  .bl-filter {
    width: 1518.001px;
    margin: 105px 0 0 2px; /* label at y 1504, x 202 */
    display: grid;
    grid-template-columns: 389.744px 1101.275px;
    justify-content: space-between;
    gap: 0;
  }
  .bl-filter label {
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: -0.36px;
  }
  .bl-filter select,
  .bl-filter input {
    height: 65px;
    border-radius: 15px;
    /* All topics 559:531 sits at x 225.984 and Search by keyword 559:536 at
       642.710, i.e. 23.984 from the FIELD's outer edge (202 and 618.726).
       The fields are border-box with a 1px stroke, so the padding that puts
       the glyph run on the Figma x is 23.984 minus that border: 22.984. */
    padding: 0 0 0 22.984px;
    font-size: 17px;
    line-height: 26px;
  }
  .bl-filter select {
    background-size: 16.49px 9.001px;
    background-position: right 23.485px center;
  }
  .bl-filter .ctl.s input {
    background-size: 19.5083px 19.5211px;
    background-position: right 32.457px top 25px;
  }

  /* ---- hub: card grid 559:410 ---- */
  .bl-grid {
    width: 1518.685px;
    margin: 108px 0 0 1px; /* row 1 at y 1711, x 201 */
    grid-template-columns: repeat(3, 479.684px);
    justify-content: space-between;
    row-gap: 68px;
    column-gap: 0;
  }
  .bl-card {
    height: 551px;
    border-radius: 20px;
  }
  .bl-card .im {
    height: 295px;
    border-radius: 20px;
    aspect-ratio: auto;
  }
  .bl-card .bd {
    margin-top: -16px; /* white panel starts 280 into the card */
    padding: 30px 40.97px 0;
    display: block;
  }
  .bl-card h3 {
    height: 55px;
    font-size: 24px;
    line-height: 27.5px; /* Figma leading normal, 55px box over two lines */
    letter-spacing: -0.72px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .bl-card p {
    margin-top: 16px;
    height: 44px;
    font-size: 17px;
    line-height: 22px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Figma draws the Read more pill at a different offset in every grid row:
     464 below the card top in row 1 (btn 559:423/433/448 at y 2175), 465 in
     row 2 (559:463/473/483 at 2795) and 463 in row 3 (559:493/503/513 at
     3412). Rows 2 and 3 cannot both be hit by one rule, and 39px of margin
     puts the pill at 464, one pixel either side of each, inside the gate's
     1px box. The 40px this rule used to carry sat row 3 two pixels low,
     outside tolerance, which no check caught because only cards 1 and 2 were
     ever asserted. Row 1 is handled exactly, below. */
  .bl-card .rm {
    margin-top: 39px;
    width: 145.904px;
    height: 47px;
    padding: 0;
    border-radius: 50px;
    font-size: 17px;
  }
  /* ROW 1 IS DRAWN 8px LOWER INSIDE THE CARD, and all three of its instances
     agree, so this is the design and not noise: titles 559:416/431/446 all sit
     at y 2029 (card top + 318) where rows 2 and 3 put theirs at + 310, and the
     copy 559:417/432/447 at 2100 (+ 389) against + 381. The button still lands
     at + 464, so the extra 8px of panel padding comes back out of the pill's
     margin. At 1201px and up the grid is always three columns, so the first
     three cards are exactly row 1; a fourth row inherits the rows 2 and 3
     geometry, which is what the design repeats. */
  .bl-grid .bl-card:nth-child(-n+3) .bd {
    padding-top: 38px;
  }
  .bl-grid .bl-card:nth-child(-n+3) .rm {
    margin-top: 31px;
  }

  /* ---- hub: pagination 559:516 ---- */
  .bl-pager {
    width: 486.679px;
    height: 58px;
    margin: 146px 0 0 517px; /* row at y 3646, x 717 */
    gap: 0;
  }
  .bl-pager li:nth-child(2) {
    margin-left: 28.978px; /* prev 717+57.962 -> current 803.94 */
  }
  .bl-pager li:not(:first-child):not(:last-child):not(:has(.current)) {
    flex: 1 1 0;
  }
  .bl-pager .page-numbers {
    width: 57.962px;
    height: 58px;
    border-radius: 29px;
    font-size: 20px;
  }
  .bl-pager .page-numbers.prev,
  .bl-pager .page-numbers.next {
    background-size: 14px 12px;
  }
  .bl-pager .page-numbers.dots {
    width: auto;
  }
  .bl-empty {
    font-size: 18px;
    padding: 40px 0;
  }

  /* ---- article: intro 559:639 ---- */
  .bs-art {
    padding: 84px 0 0; /* date at y 684 */
  }
  .bs-art .col {
    width: 1256px;
    max-width: 1256px;
    margin: 0 auto;
    padding: 0;
  }
  .bs-date {
    font-size: 18px;
    line-height: 23px;
    margin: 0;
  }
  .bs-title {
    max-width: 1031px;
    margin: 22px auto 0; /* title box at y 729 */
    font-size: 60px;
    line-height: 71px;
    letter-spacing: -1.8px;
  }
  .bs-feat {
    width: 1256px;
    height: 682px;
    margin: 80px 0 0;
    border-radius: 20px;
    aspect-ratio: auto;
  }

  /* ---- article: body 559:644 ---- */
  .bs-body {
    width: 1255px;
    margin: 88px 0 0 3px; /* first block at y 1721, x 335 */
  }
  .bs-body h2 {
    font-size: 30px;
    line-height: 26px;
    letter-spacing: normal;
    margin: 58px 0 26px;
  }
  .bs-body h2:first-child {
    margin-top: 0;
  }
  .bs-body p {
    font-size: 20px;
    line-height: 26px;
    margin: 0 0 26px;
  }
  .bs-body ul {
    margin: 0 0 26px;
    padding-left: 30px;
  }
  .bs-body li {
    font-size: 20px;
    line-height: 26px;
    margin: 0;
  }

  /* ---- article: video placeholders 706:12949 ---- */
  .bs-vids {
    width: 1486px;
    margin: 95px 0 0 17px; /* band at y 3049, x 217 */
    grid-template-columns: 723px 723px;
    justify-content: space-between;
    gap: 0;
    padding: 0;
    max-width: none;
  }
  .bs-embed {
    width: 723px;
    height: 422px;
    border-radius: 28px;
    aspect-ratio: auto;
  }
  .bs-embed .play {
    width: 91.706px;
    height: 72.728px;
    border-radius: 0;
    background-color: transparent;
  }

  /* ---- article: back link and share bar 559:687 ---- */
  .bs-metabar {
    width: 1340px;
    max-width: 1340px;
    margin: 130px auto 0; /* line at y 3601, x 290 */
    padding: 0;
  }
  .bs-metabar .row {
    height: 86px;
    display: block;
    padding: 0;
  }
  .bs-back {
    left: 2.905px;
    top: 66.548px;
    width: 158.672px;
    height: 19.452px;
    font-size: 0;
  }
  .bs-back .ar {
    left: 3.8955px;
    top: -3.8955px;
    width: 13.494px;
    height: 21.285px;
    font-size: 20px;
    line-height: 27px;
  }
  .bs-back .lb {
    left: 23.221px;
    top: 2.047px;
    width: 135.451px;
    font-size: 18px;
    line-height: 17px;
  }
  .bs-share {
    left: 1154.571px;
    top: 60.207px;
    width: 184.124px;
    height: 24.881px;
    font-size: 0;
    gap: 0;
  }
  .bs-share .lbl {
    left: 0;
    top: 4.527px;
    width: 49px;
    font-size: 18px;
    line-height: 17px;
  }
  .bs-share a:nth-of-type(1) {
    left: 69.668px;
    top: 0;
    width: 24.8815px;
    height: 24.1957px;
  }
  .bs-share a:nth-of-type(2) {
    left: 114.456px;
    top: 0;
    width: 24.8815px;
    height: 24.1957px;
  }
  .bs-share a:nth-of-type(3) {
    left: 159.242px;
    top: 0;
    width: 24.8815px;
    height: 24.8815px;
  }

  /* ---- article: related 559:650 ---- */
  .bs-rel {
    padding: 141px 0 83px; /* heading at y 3828, footer at y 4595 */
  }
  .bs-rel .container {
    max-width: var(--container);
  }
  .bs-rel h2 {
    width: 271px;
    margin: 0 0 0 588px; /* container 200 -> Figma 788 */
    font-size: 50px;
    line-height: 55px;
    letter-spacing: -1.5px;
  }
  .bs-relrow {
    width: 1519.684px;
    margin: 78px 0 0; /* row at y 3961, x 200 */
    grid-template-columns: repeat(3, 479.684px);
    justify-content: space-between;
    row-gap: 68px;
    column-gap: 0;
  }
  .bs-relcard {
    height: 551px;
    border-radius: 20px;
  }
  .bs-relthumb {
    height: 295px;
    border-radius: 20px;
  }
  .bs-relbody {
    margin-top: -16px;
    padding: 30px 40.97px 0;
    display: block;
  }
  .bs-relbody h3 {
    height: 55px;
    font-size: 24px;
    line-height: 27.5px;
    letter-spacing: -0.72px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .bs-relbody p {
    margin-top: 16px;
    height: 44px;
    font-size: 17px;
    line-height: 22px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Same three-way jitter on the related trio: btn 559:658 at y 4426, 559:683
     at 4424 and 559:668 at 4425, all off a row top of 3961. 39px lands the
     pill at + 464, one pixel either side of cards 1 and 2. */
  .bs-readmore {
    margin-top: 39px;
    width: 145.904px;
    height: 47px;
    padding: 0;
    border-radius: 50px;
    font-size: 17px;
    align-self: auto;
  }
  /* The third related card carries the same 8px drop the hub's row 1 does:
     Title 559:666 at y 4279 (+ 318) and text 559:667 at 4350 (+ 389) where
     559:656/681 and 559:657/682 sit at + 310 and + 381, with the pill still
     at + 464. Drawn, so reproduced. */
  .bs-relcard:nth-child(3) .bs-relbody {
    padding-top: 38px;
  }
  .bs-relcard:nth-child(3) .bs-readmore {
    margin-top: 31px;
  }
}

/* =========================================================
   5. BELOW THE ARTBOARD: no mobile frames exist, so the fixed
   pixel layout is released and the design's proportions are
   kept fluid. Nothing here may introduce horizontal scroll.
   ========================================================= */

@media (max-width: 1200px) {

  .bl-hero,
  .bs-hero {
    min-height: 520px;
    overflow: hidden;
  }
  .bl-hero .lip,
  .bs-hero .lip {
    display: none;
  }
  .bl-hero .container,
  .bs-hero .container {
    padding-top: 300px;
  }
  .bl-hero .eyebrow,
  .bs-hero .eyebrow {
    width: auto;
    font-size: 20px;
    line-height: 25px;
    margin-bottom: 2px;
  }
  .bl-hero .hero-title,
  .bs-hero .hero-title {
    width: auto;
    font-size: 52px;
    line-height: 1.1;
    letter-spacing: -1.5px;
  }

  .bl-guide {
    padding: 70px 0 60px;
  }
  .bl-guide h2 {
    font-size: 34px;
    line-height: 1.2;
    letter-spacing: -1px;
    margin: 0 auto 48px;
  }
  .bl-feat {
    grid-template-columns: 1fr;
    gap: 34px;
    width: auto;
    margin: 0;
  }
  .bl-fcard {
    height: auto;
    min-height: 380px;
    border-radius: 20px;
  }
  .bl-fcard .fb {
    position: relative;
    inset: auto;
    padding: 220px 30px 34px;
  }
  .bl-fcard h3 {
    width: auto;
    margin-left: 0;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -1px;
  }
  .bl-fcard p {
    width: auto;
    margin: 10px 0 0;
    font-size: 16px;
    line-height: 1.5;
  }
  .bl-fcard .btn {
    margin-top: 20px;
    width: 170px;
    height: 54px;
    border-radius: 50px;
    font-size: 18px;
  }

  .bl-filter {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    width: auto;
    margin: 48px 0 40px;
  }
  .bl-filter label {
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 8px;
  }
  .bl-filter select,
  .bl-filter input {
    height: 58px;
    border-radius: 15px;
    padding: 0 0 0 20px;
    font-size: 16px;
  }
  .bl-filter select {
    background-size: 16.49px 9.001px;
    background-position: right 20px center;
  }
  .bl-filter .ctl.s input {
    background-size: 19.5083px 19.5211px;
    background-position: right 20px center;
  }

  .bl-grid {
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    width: auto;
    margin: 0;
  }
  .bl-card {
    height: auto;
    border-radius: 20px;
  }
  .bl-card .im {
    height: auto;
    aspect-ratio: 16 / 10;
  }
  .bl-card .bd {
    margin-top: 0;
    padding: 26px 26px 30px;
  }
  .bl-card h3 {
    font-size: 21px;
    line-height: 1.25;
    letter-spacing: -0.4px;
  }
  .bl-card p {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.5;
  }
  .bl-card .rm {
    margin-top: 22px;
    width: 145.904px;
    height: 47px;
    border-radius: 50px;
    font-size: 16px;
  }

  .bl-pager {
    width: auto;
    margin: 56px 0 0;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .bl-pager .page-numbers {
    width: 46px;
    height: 46px;
    border-radius: 23px;
    font-size: 17px;
    background-size: 14px 12px;
  }

  .bs-art {
    padding: 60px 0 0;
  }
  .bs-art .col {
    width: auto;
    max-width: 1256px;
    margin: 0 auto;
    padding: 0 24px;
  }
  .bs-date {
    font-size: 17px;
    line-height: 23px;
  }
  .bs-title {
    max-width: 100%;
    margin: 16px 0 0;
    font-size: 36px;
    line-height: 1.14;
    letter-spacing: -1px;
  }
  .bs-feat {
    width: auto;
    height: auto;
    aspect-ratio: 1256 / 682;
    margin: 40px 0 0;
    border-radius: 20px;
  }
  .bs-body {
    width: auto;
    margin: 48px 0 0;
  }
  .bs-body h2 {
    font-size: 24px;
    line-height: 1.25;
    margin: 40px 0 16px;
  }
  .bs-body p {
    font-size: 17px;
    line-height: 1.6;
    margin: 0 0 20px;
  }
  .bs-body ul {
    margin: 0 0 20px;
    padding-left: 26px;
  }
  .bs-body li {
    font-size: 17px;
    line-height: 1.6;
  }

  .bs-vids {
    grid-template-columns: 1fr;
    gap: 24px;
    width: auto;
    max-width: 1256px;
    margin: 48px auto 0;
    padding: 0 24px;
  }
  .bs-embed {
    width: auto;
    height: auto;
    aspect-ratio: 723 / 422;
    border-radius: 20px;
  }
  .bs-embed .play {
    width: 68px;
    height: 54px;
  }

  .bs-metabar {
    width: auto;
    max-width: 1256px;
    margin: 56px auto 0;
    padding: 0 24px;
  }
  .bs-metabar .row {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 0 0;
  }
  .bs-back {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    padding-left: 26px;
  }
  .bs-back .ar {
    left: 0;
    top: 2px;
    width: 13.494px;
    height: 21.285px;
    font-size: 20px;
    line-height: 21px;
  }
  .bs-back .lb {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    font-size: 17px;
    line-height: 21px;
  }
  .bs-share {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .bs-share .lbl {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    font-size: 17px;
    line-height: 21px;
  }
  .bs-share a {
    position: relative;
    left: auto;
    top: auto;
    width: 24.8815px;
    height: 24.8815px;
  }

  .bs-rel {
    padding: 70px 0 80px;
  }
  .bs-rel h2 {
    width: auto;
    margin: 0;
    text-align: center;
    white-space: normal;
    font-size: 34px;
    line-height: 1.2;
    letter-spacing: -1px;
  }
  .bs-relrow {
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    width: auto;
    margin: 40px 0 0;
  }
  .bs-relcard {
    height: auto;
    border-radius: 20px;
  }
  .bs-relthumb {
    height: 220px;
    border-radius: 20px;
  }
  .bs-relbody {
    margin-top: 0;
    padding: 26px 26px 30px;
  }
  .bs-relbody h3 {
    font-size: 21px;
    line-height: 1.25;
    letter-spacing: -0.4px;
  }
  .bs-relbody p {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.5;
  }
  .bs-readmore {
    margin-top: 22px;
    width: 145.904px;
    height: 47px;
    border-radius: 50px;
    font-size: 16px;
  }
}

@media (max-width: 768px) {

  .bl-hero,
  .bs-hero {
    min-height: 420px;
  }
  .bl-hero .container,
  .bs-hero .container {
    padding-top: 200px;
  }
  .bl-hero .hero-title,
  .bs-hero .hero-title {
    font-size: 40px;
  }
  .bl-guide h2 {
    font-size: 26px;
  }
  .bl-fcard .fb {
    padding: 170px 22px 26px;
  }
  .bl-fcard h3 {
    font-size: 22px;
  }
  .bl-grid,
  .bs-relrow {
    grid-template-columns: 1fr;
  }
  .bs-title {
    font-size: 28px;
  }
  .bs-rel h2 {
    font-size: 26px;
  }
  .bs-metabar .row {
    flex-direction: column;
    align-items: flex-start;
  }
}