@charset "utf-8";
/* ============================================================
   FILE: /sites/mhl/assets/css/blog_post.css
   Single post page — layout, body, galleries, older/newer,
   sidebar (DEV_PLAN §14 step 5)
   ------------------------------------------------------------
   After the live motorhomelife.eu post page: main column plus a
   sidebar, galleries three across with captions on the image.

   ⚠ COLOURS ARE A FIRST PASS, like blog_listing.css — they route
   through the custom properties on .post-page, which default to
   the site's gold tokens.

   The gallery rules moved here from steel.css, deleted in step 5.
   The lightbox is core: /core_assets/css/lightbox.css.
   ============================================================ */

.post-page {
  --post-accent:      var(--mwd-gold-dark, #a8843f);
  --post-accent-soft: var(--mwd-gold, #C9A96E);
  --post-text:        #3f4449;
  --post-muted:       #6b7076;
  --post-border:      #ebe8e1;
  --post-radius:      var(--img-border-radius, 7px);

  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
}

/* ------------------------------------------------------------
   Layout — main column + sidebar; sidebar drops below on
   narrower screens
------------------------------------------------------------ */
.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 3.5rem;
  align-items: start;
}
@media only screen and (max-width: 900px) {
  .post-layout { grid-template-columns: 1fr; gap: 2.5rem; }
}
/* 2.4.8.3 (DEV_PLAN_Stage3 §4.1 decision 8): the sticky Subscribe box (sidebar.css) needs the
   sidebar as tall as the post; align-items:start above leaves it only as tall as its boxes.
   Post AND review pages (both use .post-layout). Previous: "blog_post - v1 (pre-2.4.8.3).css". */
@media only screen and (min-width: 901px) {
  .post-sidebar { align-self: stretch; }
}

/* ------------------------------------------------------------
   Header
------------------------------------------------------------ */
/* ⚠ UNUSED SINCE 2.5.1 — the breadcrumb trail below took the back link's place. Kept for Ben to
   decide (DEV_PLAN_Stage3 §4.14). */
.post__back { margin: 0 0 1.5rem; font-size: .9rem; }
.post__back a { color: var(--post-accent); text-decoration: none; }
.post__back a:hover { text-decoration: underline; }

/* 2.5.1 (DEV_PLAN_Stage3 §4.14, Ben, 19 October 2026): the breadcrumb trail
   (components/breadcrumbs.php), in the old back link's place and look (Ben: A) — the links in
   the accent, the page's title in the muted grey, › between. Inline text, so on a phone it wraps
   like a sentence (Ben: A, "for now"). The class names are core's (core navigation.css), which
   MHL does not load. Post AND review pages. Previous: "blog_post - v4 (pre-2.5.1).css". */
.post__trail { margin: 0 0 1.5rem; }
.post__trail .breadcrumbs {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--post-muted);
  font-size: .9rem;
  line-height: 1.5;
}
.post__trail .breadcrumb-item       { display: inline; }
.post__trail .breadcrumb-link       { color: var(--post-accent); text-decoration: none; }
.post__trail .breadcrumb-link:hover { text-decoration: underline; }
.post__trail .breadcrumb-separator  { margin: 0 .45em; }

/* 2.5.2.1 (DEV_PLAN_Stage3 §4.15 item 1, Ben, 20 October 2026): a post's title is IN THE PAGE
   again, under the photos or the slim band — components/title_block.php, styled in
   header_footer_v2.css ("title block"). The page starts closer to the hero (the boards' 22px;
   16px on phones), and the top reaction bar sits straight under the gold rule, as on board E.
   .post-page--titled is the post view's — and the review view's since 2.5.3.1 (its green band,
   its title in the page). Previous: "blog_post - v5 (pre-2.5.2.1).css". */
.post-page.post-page--titled { padding-top: 1.4rem; }
.post-page--titled .post__header { margin: 0 0 1.5rem; }   /* scoped: a review's header is .post__header too */
.post-page--titled .post__header .reactions--top { margin-top: 0; }
@media only screen and (max-width: 600px) {
  .post-page.post-page--titled { padding-top: 1.15rem; }   /* 16px — rem is 14px here (core base.css) */
}

/* ⚠ UNUSED SINCE 2.4.2 — the title went into the hero then, and since 2.5.2.1 it is the
   title block's (above). Kept for Ben to decide. */
.post__date {
  margin: 0;
  color: var(--post-accent);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.post__header .accent-line { margin: .6rem 0 1rem; }
.post__title { margin: 0 0 .75rem; line-height: 1.2; }

/* The countries line under the title. Posts stopped drawing it in 2.5.2.1 (Ben: the breadcrumb
   names the countries); the review page still does. */
.post__countries {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin: 0 0 2rem;
  color: var(--post-muted);
  font-size: .95rem;
}
.post__countries a       { color: var(--post-accent); text-decoration: none; }
.post__countries a:hover { text-decoration: underline; }
.post__icon { width: 15px; height: 15px; opacity: .6; }

/* ------------------------------------------------------------
   Body
------------------------------------------------------------ */
/* 2.5.4 (DEV_PLAN_Stage3 §4.15, the reading column, Ben, 21 October 2026; his numbers from the
   canvas boards "Reading column"):
   - the text 18px on a computer, 17px on a tablet, 16px on a phone (line height 1.8, phones 1.7).
     In px, not rem: rem is 16 / 15 / 14px at those widths (core base.css). Was 1.05rem / 1.8.
   - a line at most 90 characters: 43.2em, as Open Sans averages 0.48em a character in the posts
     (measured on the Dijon text). About 778px of the 804px column on a computer, 734px of 782px
     on a tablet; a phone is narrower anyway. Paragraphs only — the galleries and the review cards
     (between the .post__body runs) keep the full column (Ben).
   - the gap between paragraphs grows with the text: 1.333em, the old 1.4rem at 16.8px.
   - bold softened: 450 — Ben's own edit after the board's 600 (the browser's bold is 700; the
     text around it is core .frame's 350), the same darker colour.
   Previous: "blog_post - v8 (pre-2.5.4).css". */
.post__body {
  color: var(--post-text);
  font-size: 18px;
  line-height: 1.8;
}
.post__body p      { margin: 0 0 1.333em; }
.post__body > p    { max-width: 43.2em; }
.post__body a      { color: var(--post-accent); }
.post__body strong { color: #222; font-weight: 450; }

/* 2.5.4: the section titles are WordPress Heading blocks (<h2 class="wp-block-heading">), turned
   from bold paragraphs in the database by tools/post-headings. Quicksand (MHL main.css h1–h4) at
   32 / 30 / 26px, with room above — a heading starts a new part of the post. A post that OPENS
   with one (2 on live) keeps the usual gap under the reactions; the two-class rule beats the
   sizes below at every width. */
.post__body h2 {
  margin: 60px 0 14px;
  color: #20242b;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.post__header + .post__body > h2:first-child { margin-top: 0; }

@media only screen and (max-width: 1024px) {   /* tablet — rem is 15px here */
  .post__body    { font-size: 17px; }
  .post__body h2 { margin-top: 56px; font-size: 30px; }
}
@media only screen and (max-width: 768px) {    /* phone — rem is 14px here */
  .post__body    { font-size: 16px; line-height: 1.7; }
  .post__body h2 { margin-top: 50px; margin-bottom: 12px; font-size: 26px; }
  /* 20px sides (Ben's board; 1.25rem = 17.5px before). Posts only — a review keeps its own (Ben). */
  .post-page:not(.review-page) { padding-left: 20px; padding-right: 20px; }
}

/* ------------------------------------------------------------
   A site review placed in the text — components/post_review.php
   2.5.0 (DEV_PLAN_Stage3 §4.13). It sits BETWEEN two .post__body
   runs, so the link colour above never reaches the card or the
   button. The card's own shapes are in review_card.css.
   Previous: "blog_post - v2 (pre-2.5.0).css".
------------------------------------------------------------ */
.post-review { margin: .25rem 0 2rem; }
.post-review__label {
  margin: 0 0 .5rem;
  color: var(--post-accent);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.post-review--button { margin: 0 0 2rem; }

/* The "Button" size on two lines — 2.5.0.2 (Ben, option B). The main button's gold, border and
   ► (buttons.css), but a rounded box: "READ OUR REVIEW" in its capitals, the review's name
   under it in normal case. Two-class rules, so they win .btn's ties whatever the load order.
   Full width on phones, where a long name wraps under the label instead of squeezing it.
   Previous: "blog_post - v3 (pre-2.5.0.2).css". */
.post-review__btn.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5em;
  max-width: 100%;
  padding: 1.05em 3.4em 1.1em 1.7em;
  border-radius: 14px;
  text-align: left;
}
.post-review__btn-name {
  font-family: "Quicksand", "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 1.4em;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
}
@media only screen and (max-width: 600px) {
  .post-review__btn.btn { display: flex; width: 100%; }
}

/* ------------------------------------------------------------
   Galleries (SimplyGrid markup) — three across, square
   thumbnails, caption on the image. Clicking opens the lightbox.
------------------------------------------------------------ */
.mhl-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
  margin: 0 0 2rem;
}
@media only screen and (max-width: 600px) {
  .mhl-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mhl-gallery__item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  background: #ececec;   /* shows the box while lazy images load */
}
.mhl-gallery__link {
  display: block;
  aspect-ratio: 1 / 1;
}
.mhl-gallery__link:focus-visible {
  outline: 3px solid var(--post-accent-soft);
  outline-offset: -3px;
}
.mhl-gallery__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.mhl-gallery__link:hover .mhl-gallery__image { transform: scale(1.04); }

/* On the image, top left, as live. pointer-events:none so a click still opens the image. */
.mhl-gallery__caption {
  position: absolute;
  top: .5rem;
  left: .5rem;
  max-width: calc(100% - 1rem);
  padding: .25rem .5rem;
  border-radius: 3px;
  background: rgba(255, 255, 255, .92);
  color: #222;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.3;
  pointer-events: none;
}

/* ------------------------------------------------------------
   The mosaic — 2.5.3 (DEV_PLAN_Stage3 §4.15 item 4, Ben,
   20 October 2026; board G5). A POST's galleries only:
   SimplyGrid adds .mhl-gallery--mosaic, and every rule here is
   under it — the review page's galleries (review_gallery.php)
   share the rules above and stay three across.
   Twelve columns. Each photo carries its place on a computer
   (is-d-*) and on a phone (is-p-*); no role is the plain square
   (a third of the row on a computer, half on a phone). The ratios
   are the board's tiles: in an 804px column the mosaic is 430px
   high (two rows of 210.5px), on a 390px phone the big photo is
   236px high.
   CLOSED (with JavaScript only — .js, swapped in the layout's
   <head>, so no flash): the photos marked is-d-more / is-p-more
   hide, and the last one shown carries "+N" (inside its link;
   gallery.js opens the rest in place). Hidden lazy photos are
   never downloaded until the gallery is opened. Without
   JavaScript every photo shows and no "+N".
   Previous: "blog_post - v6 (pre-2.5.3).css".
------------------------------------------------------------ */
.mhl-gallery--mosaic {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 9px;
}
.mhl-gallery--mosaic .mhl-gallery__item {
  grid-column: span 4;
  aspect-ratio: 1 / 1;
  background: #dfe3ea;   /* shows the box while lazy images load */
}
.mhl-gallery--mosaic .mhl-gallery__link { aspect-ratio: auto; height: 100%; }

@media only screen and (min-width: 601px) {
  .mhl-gallery--mosaic .is-d-solo  { grid-column: span 12; aspect-ratio: 15 / 8; }
  .mhl-gallery--mosaic .is-d-half  { grid-column: span 6;  aspect-ratio: 4 / 3; }
  .mhl-gallery--mosaic .is-d-big   { grid-column: span 6;  grid-row: span 2; aspect-ratio: auto; }
  .mhl-gallery--mosaic .is-d-small { grid-column: span 3;  aspect-ratio: 194 / 210; }
  .mhl-gallery--mosaic .is-d-wide  { grid-column: span 6;  aspect-ratio: 398 / 210; }
  .mhl-gallery--mosaic .is-d-big3  { grid-column: span 8;  grid-row: span 2; aspect-ratio: auto; }
  .mhl-gallery--mosaic .is-d-side  { grid-column: span 4;  aspect-ratio: 262 / 210; }
  .mhl-gallery--mosaic .is-d-fill1 { grid-column: span 12; aspect-ratio: 3 / 1; }
  .mhl-gallery--mosaic .is-d-fill2 { grid-column: span 6;  aspect-ratio: 3 / 2; }

  /* The big photo fills the two rows its neighbours make; it must not size them itself
     (a portrait photo stretched both rows, 2.7.3.1). */
  .mhl-gallery--mosaic .is-d-big .mhl-gallery__link,
  .mhl-gallery--mosaic .is-d-big3 .mhl-gallery__link { position: absolute; inset: 0; height: auto; }

  .js .mhl-gallery--mosaic:not(.is-open) .is-d-more { display: none; }
  .js .mhl-gallery--mosaic:not(.is-open) .mhl-gallery__plus--d { display: flex; }
  .js .mhl-gallery--mosaic:not(.is-open) .has-d-plus .mhl-gallery__caption { display: none; }
}
@media only screen and (max-width: 600px) {
  .mhl-gallery--mosaic { gap: 8px; }
  .mhl-gallery--mosaic .mhl-gallery__item { grid-column: span 6; }
  .mhl-gallery--mosaic .is-p-solo  { grid-column: span 12; aspect-ratio: 3 / 2; }
  .mhl-gallery--mosaic .is-p-half  { grid-column: span 6;  aspect-ratio: 1 / 1; }
  .mhl-gallery--mosaic .is-p-big   { grid-column: span 12; aspect-ratio: 3 / 2; }
  .mhl-gallery--mosaic .is-p-small { grid-column: span 6;  aspect-ratio: 4 / 3; }
  .mhl-gallery--mosaic .is-p-third { grid-column: span 4;  aspect-ratio: 1 / 1; }
  .mhl-gallery--mosaic .is-p-fill  { grid-column: span 12; aspect-ratio: 2 / 1; }

  .js .mhl-gallery--mosaic:not(.is-open) .is-p-more { display: none; }
  .js .mhl-gallery--mosaic:not(.is-open) .mhl-gallery__plus--p { display: flex; }
  .js .mhl-gallery--mosaic:not(.is-open) .has-p-plus .mhl-gallery__caption { display: none; }
}

/* "+N more photos" over the last photo shown. Shown only by the rules above. ⚠ Its colour is
   set here: it sits inside a link, and .post__body colours every link. */
.mhl-gallery__plus {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: rgba(8, 30, 66, .62);
  color: #fff;
  text-align: center;
  text-decoration: none;
}
.mhl-gallery__plus-n {
  font-family: "Quicksand", "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
}
.mhl-gallery__plus-label { font-size: 13px; font-weight: 600; line-height: 1.3; }
@media only screen and (max-width: 600px) {
  .mhl-gallery__plus-n     { font-size: 28px; }
  .mhl-gallery__plus-label { font-size: 12px; }
}

/* "Show fewer photos" — under an opened gallery, across the whole grid. Starts [hidden];
   gallery.js shows it. ⚠ :not([hidden]) on the display rule. */
.mhl-gallery__fewer:not([hidden]) {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-top: 5px;
}
.mhl-gallery__fewer-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid #c9d6ea;
  border-radius: 999px;
  background: #eaf2fc;
  color: #0f3f7d;
  font: 600 14px/1 "Open Sans", Helvetica, Arial, sans-serif;
  cursor: pointer;
}
.mhl-gallery__fewer-btn:hover { background: #dbe9fa; }
.mhl-gallery__fewer-btn:focus-visible { outline: 2px solid var(--journal-mid, #0861c4); outline-offset: 2px; }

/* ------------------------------------------------------------
   Keep reading — 2.5.4.1 (DEV_PLAN_Stage3 §4.15, Ben, 21 October
   2026; canvas boards "End of the post + comments")
   components/keep_reading.php: the previous and next stops (the
   posts Older / Newer linked), then a card to each of the post's
   countries' pages, in a two-column grid. A country card alone on
   the last row runs the full width (--wide, set by the component);
   beside a single stop it fills the row. Phones: one column.
   The labels are the dark gold #8a5a18 (Ben: "Gold"; 5.6:1 on
   white — the critique's text gold, P6). No ruled line above it:
   the space and the heading part it from the reactions box.
   Previous: "blog_post - v9 (pre-2.5.4.1).css".
------------------------------------------------------------ */
.keep-reading { margin: 3.5rem 0 0; }
.keep-reading__heading {
  margin: 0 0 18px;
  color: #20242b;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
}
.keep-reading__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.keep-reading__card {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  transition: box-shadow .2s ease;
}
.keep-reading__card:hover { box-shadow: 0 6px 18px rgba(16, 32, 56, .08); }
.keep-reading__card:focus-visible { outline: 3px solid var(--journal-mid, #0861c4); outline-offset: 2px; }

/* A stop: the photo 16:9, then the label, the title and the date. */
.keep-reading__stop { background: #fff; border: 1px solid #e3e6ec; }
.keep-reading__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #dfe3ea;   /* shows the box while the lazy photo loads, and stands in for none */
}
.keep-reading__body { display: block; padding: 14px 18px 16px; }
.keep-reading__label {
  display: block;
  color: #8a5a18;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.keep-reading__title {
  display: block;
  margin-top: 6px;
  color: #20242b;
  font-family: "Quicksand", "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
.keep-reading__date {
  display: block;
  margin-top: 4px;
  color: var(--post-muted);
  font-size: 13.5px;
  font-weight: 400;
}

/* A country: the country page's photo, darkened from the left, the text white on it. The photo,
   the shade (::before) and the text are stacked in that order. */
.keep-reading__country {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 160px;
  background: var(--journal-deep, #054a99);   /* under the photo while it loads */
}
.keep-reading__country--wide { grid-column: 1 / -1; }
.keep-reading__country-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.keep-reading__country::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(5, 30, 66, .84) 0%, rgba(5, 30, 66, .5) 50%, rgba(5, 30, 66, .08) 100%);
}
.keep-reading__country-text {
  position: relative;
  z-index: 2;
  display: block;
  padding: 22px 26px;
  color: #fff;
}
.keep-reading__country-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.keep-reading__country-name {
  display: block;
  margin-top: 2px;
  font-family: "Quicksand", "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.15;
}
.keep-reading__country-all { display: block; margin-top: 6px; font-size: 15px; font-weight: 600; }

@media only screen and (max-width: 768px) {   /* rem is 14px here — the sizes are px */
  .keep-reading__heading { margin-bottom: 14px; font-size: 22px; }
}
@media only screen and (max-width: 600px) {
  .keep-reading__grid { grid-template-columns: 1fr; gap: 12px; }
  .keep-reading__body { padding: 12px 16px 14px; }
  .keep-reading__label { font-size: 11.5px; }
  .keep-reading__title { margin-top: 5px; font-size: 17px; }
  .keep-reading__date { margin-top: 3px; font-size: 13px; }
  .keep-reading__country { min-height: 140px; }
  .keep-reading__country-text { padding: 18px 20px; }
  .keep-reading__country-label { font-size: 11.5px; }
  .keep-reading__country-name { font-size: 28px; }
  .keep-reading__country-all { margin-top: 5px; font-size: 14.5px; }
}

/* ------------------------------------------------------------
   Older / newer — older left, newer right, as live
   ⚠ UNUSED SINCE 2.5.4.1 — "Keep reading" above took its place.
   Kept for Ben to decide, with the strings blog.post.nav_label /
   older / newer.
------------------------------------------------------------ */
.post-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 3rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--post-border);
}
.post-nav__link {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--post-border);
  border-radius: var(--post-radius);
  color: inherit;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.post-nav__link:hover {
  border-color: var(--post-accent-soft);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}
.post-nav__link--newer { grid-column: 2; text-align: right; }
.post-nav__label {
  color: var(--post-accent);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.post-nav__title { font-weight: 600; line-height: 1.35; }

@media only screen and (max-width: 600px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav__link--newer { grid-column: auto; }
}

/* ------------------------------------------------------------
   Sidebar
   The box rules moved to sidebar.css on 15 September 2026 so the
   homepage can share them. Here the post page only points the
   sidebar's own tokens at this page's palette, so it renders
   exactly as before.
------------------------------------------------------------ */
.post-page .sidebar-box {
  --sidebar-accent: var(--post-accent);
  --sidebar-text:   var(--post-text);
  --sidebar-muted:  var(--post-muted);
  --sidebar-border: var(--post-border);
  --sidebar-radius: var(--post-radius);
}

@media (prefers-reduced-motion: reduce) {
  .mhl-gallery__image,
  .keep-reading__card,
  .post-nav__link { transition: none; }
  .mhl-gallery__link:hover .mhl-gallery__image { transform: none; }
}

/* Arriving from the featured card's 👍 ❤️ 💬 (2.7.0.07): the reaction bar and the thread stop
   below the fixed header, not under it — as the review page's anchors (review_page.css).
   main.js repeats the jump once the photos above have loaded. */
#reactions,
#comments { scroll-margin-top: calc(var(--header-height, 80px) + 1rem); }