/* =============================================================================
   RS Gonzales single post  --  "The Answer Desk"
   Generated by _blog-build\ship-post-answer-desk.ps1 from outputs\single-post.html,
   the finalized page. Do not hand-edit: edit parts\*.css and re-run.

   Load order on the live site:
     1. the shared master library   (already loaded by the other new pages)
     2. rsg-blog-shared.css         (cards, chips, bylines, .btn-outline-white)
     3. rsg-blog-post-answer-desk.css   (this file)

   THREE THINGS IN HERE EXIST FOR THE LIVE DOM AND CANNOT BE SEEN IN A PREVIEW.
   The preview builds the article by hand, so every paragraph and heading is a
   direct child of .art-body. The live article arrives from the_content() inside
   Elementor widget wrappers in 81 of 85 posts, which breaks any child selector
   aimed at the prose:
     - paragraph spacing, re-declared for wrapped content
     - the section rule on H2, widened from child to descendant
     - the wrappers themselves, stripped of their own gutters
   ============================================================================= */

/* ---------------------------------------------------------------------------
   post-supp.css ships WHOLE and deliberately unsliced. The template has to
   style whatever the_content() returns -- pull quotes, data tables, embeds --
   not only what the audited article happened to use.
   --------------------------------------------------------------------------- */
/* ============================================================
   SINGLE POST TEMPLATE -- supplemental components (August 2026)
   Namespace: art-   (verified 0 hits in master-css.txt + casestudies.html)
   Loads ON TOP of the shared master library AND of the blog archive's
   blg- primitives, so a card in "Keep Reading" is byte-for-byte the same
   component as a card on /blog/.
   Everything scoped under .rsg-page.
   ============================================================ */

/* ---- reading progress: a 3px rail pinned above the site header ---- */
.rsg-page .art-prog { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: transparent; z-index: 9999; pointer-events: none; }
.rsg-page .art-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green-500), #6EE7B7); transition: width .08s linear; }

/* ============================================================
   MASTHEAD
   ============================================================ */
.rsg-page .art-head { background: linear-gradient(180deg, #F7FAF8 0%, #FFFFFF 82%); padding: 46px 0 0; border-top: 3px solid var(--green-500); }
.rsg-page .art-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 700; color: var(--ink-500); margin-bottom: 26px; }
.rsg-page .art-crumbs a { color: var(--ink-500); transition: color .18s; }
.rsg-page .art-crumbs a:hover { color: var(--green-700); }
.rsg-page .art-crumbs span[aria-current] { color: var(--ink-900); }
.rsg-page .art-crumbs svg { width: 11px; height: 11px; color: var(--line); flex-shrink: 0; }

.rsg-page .art-headin { max-width: 860px; }
.rsg-page .art-head h1 { margin: 14px 0 20px; font-size: clamp(31px, 4.2vw, 50px); line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
.rsg-page .art-head h1 em { font-style: normal; color: var(--green-600); }
.rsg-page .art-stand { font-size: clamp(17px, 1.6vw, 19.5px); line-height: 1.62; color: var(--ink-2); margin: 0 0 30px; max-width: 62ch; }
.rsg-page .art-stand strong { color: var(--ink-900); font-weight: 700; }

/* byline strip -- author, date, read time on the left; share on the right */
.rsg-page .art-byline { display: flex; align-items: center; justify-content: space-between; gap: 20px 28px; flex-wrap: wrap; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rsg-page .art-au { display: flex; align-items: center; gap: 13px; min-width: 0; }
.rsg-page .art-au img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,0.14); }
.rsg-page .art-auname { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--ink-900); line-height: 1.25; display: block; }
.rsg-page .art-auname a { color: inherit; }
.rsg-page .art-auname a:hover { color: var(--green-700); }
.rsg-page .art-aurole { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--ink-500); display: block; margin-top: 3px; }
.rsg-page .art-facts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--ink-500); }
.rsg-page .art-facts span { display: inline-flex; align-items: center; gap: 6px; }
.rsg-page .art-facts svg { width: 13px; height: 13px; color: var(--green-500); flex-shrink: 0; }
.rsg-page .art-facts .art-rt { color: var(--green-700); }
.rsg-page .art-share { display: flex; align-items: center; gap: 8px; }
.rsg-page .art-share b { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--ink-500); margin-right: 2px; }
.rsg-page .art-sh { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: #fff; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-700); transition: background .18s, color .18s, border-color .18s, transform .18s; }
.rsg-page .art-sh svg { width: 15px; height: 15px; }
.rsg-page .art-sh:hover { background: var(--green-500); border-color: var(--green-500); color: #fff; transform: translateY(-2px); }

/* featured image -- framed, not bled */
.rsg-page .art-hero { margin: 34px 0 0; }
.rsg-page .art-hero figure { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); background: #fff; }
.rsg-page .art-hero img { width: 100%; display: block; aspect-ratio: 5 / 3; object-fit: cover; }
.rsg-page .art-hero figcaption { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 700; color: var(--ink-500); padding: 12px 18px; border-top: 1px solid var(--line-2); background: var(--paper-soft); }

/* ============================================================
   BODY LAYOUT -- sticky contents rail + measured column
   ============================================================ */
.rsg-page .art-wrap { padding: 56px 0 var(--section-y); }
.rsg-page .art-grid { display: grid; grid-template-columns: minmax(0, 246px) minmax(0, 760px); gap: 60px; justify-content: space-between; align-items: start; }

.rsg-page .art-toc { position: sticky; top: 24px; }
.rsg-page .art-tocbox { border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow-md); overflow: hidden; }
.rsg-page .art-toctitle { display: flex; align-items: center; gap: 9px; padding: 15px 18px 13px; border-bottom: 1px solid var(--line-2); font-family: var(--font-display); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; color: var(--ink-900); }
.rsg-page .art-toctitle svg { width: 14px; height: 14px; color: var(--green-500); flex-shrink: 0; }
.rsg-page .art-toclist { padding: 10px 8px 12px; max-height: 62vh; overflow-y: auto; }
.rsg-page .art-toclist a { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 9px; align-items: start; padding: 8px 10px; border-radius: 9px; font-size: 13px; line-height: 1.42; font-weight: 500; color: var(--ink-2); border-left: 2px solid transparent; transition: background .16s, color .16s, border-color .16s; }
.rsg-page .art-toclist a em { font-style: normal; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--ink-500); padding-top: 2px; }
.rsg-page .art-toclist a:hover { background: #F5F9F6; color: var(--ink-900); }
.rsg-page .art-toclist a.active { background: var(--green-50); color: var(--green-700); font-weight: 700; border-left-color: var(--green-500); }
.rsg-page .art-toclist a.active em { color: var(--green-600); }
.rsg-page .art-tocfoot { padding: 14px 18px; border-top: 1px solid var(--line-2); background: var(--paper-soft); }
.rsg-page .art-tocfoot .btn { width: 100%; justify-content: center; font-size: 13px; padding: 12px 16px; }

/* ============================================================
   ARTICLE TYPOGRAPHY
   ============================================================ */
.rsg-page .art-body { font-size: 17.5px; line-height: 1.75; color: var(--ink-2); }
.rsg-page .art-body > p { margin: 0 0 22px; }
.rsg-page .art-body > p.art-lede { font-size: 19px; line-height: 1.68; color: var(--ink-900); font-weight: 500; }
.rsg-page .art-body strong { color: var(--ink-900); font-weight: 700; }
.rsg-page .art-body em { font-style: italic; }
.rsg-page .art-body a { color: var(--green-600); font-weight: 600; border-bottom: 1px solid rgba(44,122,75,0.35); transition: color .18s, border-color .18s; }
.rsg-page .art-body a:hover { color: var(--green-700); border-color: var(--green-700); }
/* ...but the inline-link style must not reach the components that live inside
   the article. `.art-body a` scores (0,2,1) and would otherwise beat
   `.btn-primary` (0,2,0), repainting every in-article button's label green and
   drawing a rule under the video facade. Each is reset explicitly. */
.rsg-page .art-body a.btn { color: #fff; border-bottom: 0; }
.rsg-page .art-body a.btn:hover { color: #fff; }
.rsg-page .art-body a.blg-chip { color: var(--green-700); font-weight: 700; border-bottom: 0; }
.rsg-page .art-body a.art-video { border-bottom: 0; }
.rsg-page .art-body a.art-navc { color: inherit; font-weight: inherit; border-bottom: 0; }
.rsg-page .art-embed a { border-bottom: 0; }

.rsg-page .art-body h2 { font-size: clamp(25px, 2.7vw, 31px); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink-900); margin: 56px 0 18px; padding-top: 16px; scroll-margin-top: 90px; position: relative; }
.rsg-page .art-body h2::before { content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--green-500), var(--green-700)); }
.rsg-page .art-body h2:first-child { margin-top: 0; }
.rsg-page .art-body h3 { font-size: clamp(19px, 2vw, 22px); line-height: 1.3; letter-spacing: -0.014em; color: var(--ink-900); margin: 38px 0 14px; scroll-margin-top: 90px; }
.rsg-page .art-body h4 { font-family: var(--font-display); font-size: 16.5px; font-weight: 700; line-height: 1.35; color: var(--green-700); margin: 30px 0 12px; }

/* lists -- the master resets list-style, so markers are drawn */
.rsg-page .art-body ul { margin: 0 0 24px; padding: 0; display: grid; gap: 11px; }
.rsg-page .art-body ul > li { position: relative; padding-left: 32px; font-size: 16.5px; line-height: 1.66; color: var(--ink-2); }
.rsg-page .art-body ul > li::before { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 18px; border-radius: 6px; background: var(--green-50); border: 1px solid rgba(44,122,75,0.22); }
.rsg-page .art-body ul > li::after { content: ""; position: absolute; left: 6px; top: 13px; width: 6px; height: 3px; border-left: 2px solid var(--green-600); border-bottom: 2px solid var(--green-600); transform: rotate(-45deg); }
.rsg-page .art-body ol { margin: 0 0 24px; padding: 0; counter-reset: artol; display: grid; gap: 12px; }
.rsg-page .art-body ol > li { position: relative; padding-left: 40px; counter-increment: artol; font-size: 16.5px; line-height: 1.66; color: var(--ink-2); }
.rsg-page .art-body ol > li::before { content: counter(artol); position: absolute; left: 0; top: 2px; width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--green-500), var(--green-700)); color: #fff; font-family: var(--font-mono); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.rsg-page .art-body li strong { color: var(--ink-900); }

/* pull quote */
.rsg-page .art-body blockquote { margin: 34px 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--green-500); }
.rsg-page .art-body blockquote p { font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 1.42; letter-spacing: -0.015em; color: var(--ink-900); margin: 0 0 10px; }
.rsg-page .art-body blockquote p:last-child { margin-bottom: 0; }

/* figures */
.rsg-page .art-fig { margin: 34px 0; }
.rsg-page .art-fig img { width: 100%; display: block; border-radius: 16px; border: 1px solid var(--line); background: #fff; }
.rsg-page .art-fig figcaption { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 700; color: var(--ink-500); margin-top: 11px; padding-left: 2px; }

/* data table -- light chrome, no dark headers (house rule) */
.rsg-page .art-tablewrap { margin: 32px 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-md); background: #fff; }
.rsg-page .art-tscroll { overflow-x: auto; }
.rsg-page .art-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.rsg-page .art-table thead th { background: linear-gradient(180deg, #FBFCFB, #F3F7F4); text-align: left; font-family: var(--font-display); font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 800; color: var(--ink-900); padding: 15px 20px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rsg-page .art-table tbody td { padding: 15px 20px; border-bottom: 1px solid var(--line-2); color: var(--ink-2); line-height: 1.58; vertical-align: top; }
.rsg-page .art-table tbody tr:last-child td { border-bottom: 0; }
.rsg-page .art-table tbody tr:nth-child(even) { background: #FBFDFC; }
.rsg-page .art-table tbody td:first-child { font-weight: 600; color: var(--ink-900); }
.rsg-page .art-table tbody td + td { border-left: 1px solid var(--line-2); }

/* video facade -- no third-party frame until the visitor asks for it */
.rsg-page .art-video { margin: 32px 0; position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: #000; display: block; }
.rsg-page .art-video img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; opacity: 0.92; transition: opacity .2s, transform .3s; }
.rsg-page .art-video:hover img { opacity: 1; transform: scale(1.015); }
.rsg-page .art-vplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 74px; height: 74px; border-radius: 50%; background: rgba(44,122,75,0.94); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 34px rgba(0,0,0,0.42); transition: transform .2s, background .2s; }
.rsg-page .art-video:hover .art-vplay { transform: translate(-50%, -50%) scale(1.07); background: var(--green-500); }
.rsg-page .art-vplay svg { width: 26px; height: 26px; color: #fff; margin-left: 4px; }
.rsg-page .art-vcap { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 20px 15px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.78) 100%); color: #fff; font-family: var(--font-display); font-size: 14px; font-weight: 700; line-height: 1.35; }
.rsg-page .art-vcap span { display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: #9FE8BE; margin-bottom: 6px; }

/* ---- inline CTA callout (the article carries seven of these) ---- */
.rsg-page .art-cta { margin: 34px 0; border: 1px solid rgba(44,122,75,0.24); border-left: 3px solid var(--green-500); border-radius: 14px; background: linear-gradient(135deg, #F4FAF6 0%, #FFFFFF 62%); padding: 22px 24px; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: start; }
.rsg-page .art-ctaic { width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(135deg, var(--green-500), var(--green-700)); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(44,122,75,0.28); flex-shrink: 0; }
.rsg-page .art-ctaic svg { width: 19px; height: 19px; }
.rsg-page .art-ctaq { font-family: var(--font-display); font-size: 17px; font-weight: 800; line-height: 1.34; color: var(--ink-900); margin: 2px 0 7px; letter-spacing: -0.01em; }
.rsg-page .art-ctas { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0; }
.rsg-page .art-ctarow { display: flex; justify-content: flex-end; margin-top: 14px; }
.rsg-page .art-ctarow .btn { font-size: 13px; padding: 11px 20px; }

/* the post's own embedded widgets (diagnostic, checklist) sit in their own
   namespaces and must not be re-styled -- only given breathing room */
.rsg-page .art-embed { margin: 36px 0; }

/* ============================================================
   AFTER THE ARTICLE
   ============================================================ */
/* topic tags */
.rsg-page .art-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 44px 0 0; padding-top: 26px; border-top: 1px solid var(--line); }
.rsg-page .art-tags b { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--ink-500); margin-right: 4px; }

/* prev / next */
.rsg-page .art-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.rsg-page .art-navc { display: block; border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 18px 20px; box-shadow: var(--shadow-md); transition: transform .2s, border-color .2s, box-shadow .2s; min-width: 0; }
.rsg-page .art-navc:hover { transform: translateY(-3px); border-color: rgba(44,122,75,0.34); box-shadow: 0 16px 34px rgba(20,50,32,0.10); }
.rsg-page .art-navk { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--green-700); margin-bottom: 9px; }
.rsg-page .art-navk svg { width: 12px; height: 12px; flex-shrink: 0; }
.rsg-page .art-navt { display: block; font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 1.34; color: var(--ink-900); }
.rsg-page .art-navc.next { text-align: right; }
.rsg-page .art-navc.next .art-navk { justify-content: flex-end; }

/* dark author band */
.rsg-page .art-author { background: var(--dark-grad); color: #fff; padding: 72px 0; }
/* capped and centred: at the full 1152px container the bio's 62ch measure
   left a quarter of the band empty on the right */
.rsg-page .art-augrid { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 42px; align-items: center; max-width: 1000px; margin: 0 auto; }
.rsg-page .art-auphoto { border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 24px 60px rgba(0,0,0,0.42); }
.rsg-page .art-auphoto img { width: 100%; display: block; aspect-ratio: 1 / 1; object-fit: cover; }
.rsg-page .art-aukicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: #6EE7B7; margin: 0 0 12px; }
.rsg-page .art-author h2 { color: #fff; font-size: clamp(23px, 2.6vw, 30px); margin: 0 0 14px; }
.rsg-page .art-author h2 em { font-style: normal; color: #6EE7B7; }
.rsg-page .art-author p { color: rgba(255,255,255,0.76); font-size: 16px; line-height: 1.66; margin: 0 0 14px; max-width: 62ch; }
.rsg-page .art-author p strong { color: #fff; }
.rsg-page .art-auctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* keep-reading grid reuses the archive card verbatim */
.rsg-page .art-rel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

/* ============================================================
   RESPONSIVE -- house baseline 1024 / 768 / 480
   ============================================================ */
@media (max-width: 1024px) {
  .rsg-page .art-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .rsg-page .art-toc { position: static; }
  .rsg-page .art-toclist { max-height: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
  .rsg-page .art-body { max-width: 760px; }
  .rsg-page .art-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rsg-page .art-augrid { grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 768px) {
  .rsg-page .art-head { padding-top: 34px; }
  .rsg-page .art-hero img { aspect-ratio: 16 / 10; }
  .rsg-page .art-wrap { padding-top: 40px; }
  .rsg-page .art-toclist { grid-template-columns: minmax(0, 1fr); }
  .rsg-page .art-byline { gap: 16px; }
  .rsg-page .art-body { font-size: 16.5px; }
  .rsg-page .art-body > p.art-lede { font-size: 17.5px; }
  .rsg-page .art-body h2 { margin-top: 44px; }
  .rsg-page .art-nav { grid-template-columns: minmax(0, 1fr); }
  .rsg-page .art-navc.next { text-align: left; }
  .rsg-page .art-navc.next .art-navk { justify-content: flex-start; }
  .rsg-page .art-rel { grid-template-columns: minmax(0, 1fr); }
  .rsg-page .art-augrid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .rsg-page .art-auphoto { max-width: 180px; }
  .rsg-page .art-cta { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .rsg-page .art-ctarow { justify-content: flex-start; }
}
@media (max-width: 480px) {
  .rsg-page .art-head h1 { font-size: clamp(26px, 8vw, 32px); }
  .rsg-page .art-share b { display: none; }
  .rsg-page .art-body { font-size: 16px; }
  .rsg-page .art-body ul > li, .rsg-page .art-body ol > li { font-size: 15.5px; }
  .rsg-page .art-body blockquote p { font-size: 18px; }
  .rsg-page .art-cta { padding: 18px 18px; }
  .rsg-page .art-hero figure { border-radius: 16px; }
  .rsg-page .art-vplay { width: 58px; height: 58px; }
  .rsg-page .art-vplay svg { width: 21px; height: 21px; }
  .rsg-page .art-toclist a { font-size: 12.5px; }
}

/* =============================================================================
   V4 POST -- the "works on all 85" layer for geometry I.

   WHY THIS FILE EXISTS. The article sheets style .art-table, .art-fig,
   .art-tscroll and .art-embed -- classes that exist only in the hand-built
   preview. What the_content() actually returns, measured across all 85 posts,
   is BARE tags inside Elementor widget wrappers and no .art-* class anywhere:

       table       29 posts        figure      44 posts
       img         85 posts        figcaption  14 posts
       iframe      13 posts        hr           5 posts
       h5          38 posts        h6           5 posts
       b           45 posts        i           17 posts
       nested list  7 posts        code         1 post

   Every one of those rendered unstyled. These rules restyle the raw tags to
   match the reviewed .art-* components, so no post has to be edited and the
   PHP does not have to rewrite markup it does not own.
   ============================================================================= */

/* ---- Elementor wrappers -------------------------------------------------
   81 of 85 posts are Elementor-built, so the_content() hands us nested
   container divs around the prose. They must not add their own gutters
   inside an article column that already has one, and a boxed container must
   not re-cap a width the article column already caps. Typography is NOT set
   here -- it stays on .art-body's own tag rules, which reach the prose
   through these wrappers as ordinary descendants. */
.rsg-page .art-body .e-con,
.rsg-page .art-body .e-con-inner,
.rsg-page .art-body .elementor-widget-container { max-width: none; padding-left: 0; padding-right: 0; }
.rsg-page .art-body .elementor-element { margin-left: 0; margin-right: 0; }
.rsg-page .art-body .elementor-widget:not(:last-child) { margin-bottom: 0; }

/* ...BUT ZEROING IT KILLED THE GAP UNDER EVERY CONTENT IMAGE. The rule above
   exists so Elementor's widget gutters do not double the article's own rhythm,
   which is right for text widgets -- their paragraphs carry the 22px. An IMAGE
   widget has no such margin, so a screenshot and the paragraph explaining it
   ended up touching at exactly 0px. MEASURED: 226 of 824 content images on 47
   of 85 posts sat under 14px of clearance, the great majority at 0.
   Equal specificity to the rule above (both 0,4,0), so this wins on source
   order -- it has to stay BELOW it.
   Deliberately NOT applied to a caption: a figcaption measured 11px under its
   image and should hug it. Only the widget's outer bottom edge is opened up.
   NO :not(:last-child) HERE, and that is the whole point. Authors routinely
   wrap ONE image widget in its own flex container, so the image is the LAST
   child of that container and the gap that matters is between the containers.
   A :not(:last-child) guard excludes exactly those -- it left 11 images still
   touching on 7 posts. The base rule above does not match a last child at all,
   so there is nothing to double up against, and a trailing margin at the end of
   the article is absorbed by the tag row that follows. */
.rsg-page .art-body .elementor-widget.elementor-widget-image,
.rsg-page .art-body .elementor-widget.elementor-widget-image-box,
.rsg-page .art-body .elementor-widget.elementor-widget-image-gallery,
.rsg-page .art-body .elementor-widget.elementor-widget-video { margin-bottom: 28px; }
/* an image-box tile is a grid cell -- the grid's own gap spaces it */
.rsg-page .art-body .e-grid .elementor-widget.elementor-widget-image-box { margin-bottom: 0; }

/* RESPONSIVE VISIBILITY. The author hid widgets per breakpoint using
   Elementor's own classes, and the CSS that honours them is the plugin's, not
   ours -- so every one of them currently renders at every width. Measured, 4
   posts and 10 widgets:
     - how-to-choose-an-hvac-company-name-and-domain ships the SAME Sarah
       portrait twice, one copy marked hidden-desktop+hidden-tablet and one
       marked hidden-mobile. Both show, so the image appears twice on screen.
     - hvac-seo-keywords and what-to-expect-from-an-hvac-digital-marketing-agency
       each carry a widget marked hidden on desktop AND tablet AND mobile --
       content deliberately taken out of view, visible here.
   These are ELEMENTOR's default breakpoints (mobile <=767, tablet 768-1024,
   desktop >=1025), NOT this page's layout breakpoints, and deliberately so:
   the author authored against Elementor's, so reproducing them is what makes
   the page match what the live post is meant to show.
   The other visibility classes (widescreen / laptop / *_extra) have 0
   occurrences in this corpus, so they are not restated here. */
@media (max-width: 767px)  { .rsg-page .art-body .elementor-hidden-mobile  { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .rsg-page .art-body .elementor-hidden-tablet { display: none !important; } }
@media (min-width: 1025px) { .rsg-page .art-body .elementor-hidden-desktop { display: none !important; } }

/* PARAGRAPH SPACING IS THE ONE THING THOSE WRAPPERS BREAK OUTRIGHT.
   post-supp.css sets it as `.art-body > p`, a CHILD selector -- correct for the
   hand-built preview, where every paragraph is a direct child. Through the
   wrappers above it matches nothing, so in 81 of 85 posts every paragraph loses
   its 22px bottom margin and the article renders as one solid block of text.
   No screenshot of the preview can show this, because the preview has no
   wrappers.
   Scoped to a wrapper INSIDE .art-body rather than widened to
   `.art-body p`: the in-article components (.art-cta, .ad-answer, .art-tags)
   carry their own paragraph margins at (0,2,0) and a blanket (0,2,1) descendant
   rule would beat every one of them. The article's own prose is the only thing
   that arrives inside a widget container. */
.rsg-page .art-body .elementor-widget-container p,
.rsg-page .art-body .elementor-text-editor p,
.rsg-page .art-body .e-con-inner > p { margin: 0 0 22px; }

/* ---- breadcrumb ---------------------------------------------------------
   The shipped template hardcoded a short last crumb ("Optimize Or Rebuild").
   A real template gets the post title, and titles here run to 66 characters,
   which wrapped the breadcrumb onto a second line and collided with the
   category chip under it. Cap the current crumb instead of the whole trail. */
.rsg-page .v2p-crumbs [aria-current="page"] { display: inline-block; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
@media (max-width: 768px) {
  .rsg-page .v2p-crumbs [aria-current="page"] { max-width: 24ch; }
}

/* ---- headings the sheets never covered ---------------------------------- */
.rsg-page .art-body h5 { font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 1.34; letter-spacing: -0.01em; color: var(--ink-900); margin: 30px 0 10px; }
.rsg-page .art-body h6 { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-700); margin: 28px 0 8px; }
/* 31 posts carry an H1 INSIDE the content. The template already has the page
   H1, so the PHP demotes these to H2 -- this rule is the visual failsafe for
   the window before the snippet is active, and for any post the filter opts
   out of. */
.rsg-page .art-body h1 { font-family: var(--font-display); font-size: clamp(25px, 3vw, 31px); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink-900); margin: 44px 0 14px; }
/* 33 posts carry a heading with no text -- an empty bar, and under geometry I
   an empty question plate in front of it. :empty misses a heading holding an
   empty span, so both forms are covered. */
.rsg-page .art-body h1:empty, .rsg-page .art-body h2:empty,
.rsg-page .art-body h3:empty, .rsg-page .art-body h4:empty,
.rsg-page .art-body h5:empty, .rsg-page .art-body h6:empty { display: none; }

/* ---- media -------------------------------------------------------------- */
.rsg-page .art-body img { max-width: 100%; height: auto; }
.rsg-page .art-body figure { margin: 32px 0; max-width: 100%; }
/* MEASURED: width:100% here upscaled 24 images on 6 posts -- a 300x121 medium
   thumbnail stretched to 800x324, a 196x300 portrait screenshot to 800x1223.
   Those are WordPress "size-medium" images inside Squarespace-era figure
   markup (class sqs-block-image-figure), and blowing a 300px asset up
   2.7x renders it soft. width:auto + max-width:100% still FILLS the column for
   every asset at or above column width, which is what the reviewed design
   shows, and simply stops upscaling the ones below it. */
.rsg-page .art-body figure img { display: block; width: auto; max-width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); }
.rsg-page .art-body figcaption { margin-top: 11px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; letter-spacing: 0.03em; color: var(--ink-500); text-align: left; }
/* an image sitting on its own between paragraphs gets the figure treatment */
.rsg-page .art-body > p > img:only-child,
.rsg-page .art-body .elementor-widget-image img { display: block; border-radius: 14px; border: 1px solid var(--line); }

/* ELEMENTOR'S PER-POST CSS SHIPS IN A style TAG INSIDE THE CONTENT, so it lands
   after this sheet and wins at equal specificity -- the same trap as Link
   Whisper's inline block below. It carries, per element id:
       .elementor-NNNNN .elementor-element-XXXXXXX img { width: 100% }   (0,3,1)
   Our own `.art-body img` sets only max-width, which by definition never
   upscales, so their `width` runs unopposed: a 640px portrait measured 1010px,
   a 1.58x enlargement. Beat it at (0,4,1) and let the asset's own size stand,
   still capped to the column. An image at or above column width is unaffected;
   only the ones that were being stretched change. */
.rsg-page .art-body .elementor-widget .elementor-widget-container img,
.rsg-page .art-body .elementor-widget-image .elementor-widget-container img {
  width: auto; max-width: 100%; height: auto;
}

/* ---- inline icons in content widgets ------------------------------------
   MEASURED: 45 icons on 12 posts rendered up to 800x2133px -- a full-column
   Facebook square, 2000px-tall carets. Two causes, and a class-only fix
   catches just one of them:

     a) NO intrinsic size. Elementor's "e-font-icon-svg e-fas-*" and Premium
        Addons' "premium-drawable-icon" ship a viewBox and no width/height.
        Those plugins' stylesheets size them, and neither sheet is part of
        this deliverable, so the svg falls back to filling its container.
     b) A HARDCODED size. Custom icons uploaded into an icon-list or icon-box
        slot carry literal width="800px" height="800px" ON THE TAG. Nothing is
        missing for these -- 800px is what they were authored at.

   So the size is pinned on the SLOT, and !important is required: (b) is an
   attribute-presentation hint the browser applies as an author-level width,
   and a plain rule loses to nothing but reads as if it works on (a) only.
   Scoped to the icon containers, never to `.art-body svg`, so the article's
   own furniture (.ad-answer's 21px check, the CTA glyphs) is untouched. */
.rsg-page .art-body .e-font-icon-svg,
.rsg-page .art-body .premium-drawable-icon,
.rsg-page .art-body .elementor-icon > svg,
.rsg-page .art-body .elementor-icon-list-icon > svg,
.rsg-page .art-body .elementor-toggle-icon > svg,
.rsg-page .art-body .elementor-accordion-icon > svg,
.rsg-page .art-body .premium-button-text-icon-wrapper > svg {
  width: 1em !important; height: 1em !important;
  max-width: 1em; max-height: 1em;
  flex: 0 0 auto; vertical-align: -0.125em;
}
/* an icon-box icon is a feature mark, not a text glyph -- it reads as damage at
   1em. It is the only slot here with its own scale. */
.rsg-page .art-body .elementor-icon-box-icon .elementor-icon > svg,
.rsg-page .art-body .elementor-icon-box-icon > svg {
  width: 40px !important; height: 40px !important; max-width: 40px; max-height: 40px;
}
/* the icon slots themselves are sized by the plugin sheets too, so cap them or
   a 1em icon still sits in an 800px box */
.rsg-page .art-body .elementor-icon-list-icon,
.rsg-page .art-body .elementor-toggle-icon,
.rsg-page .art-body .elementor-accordion-icon { display: inline-flex; align-items: center; justify-content: center; width: auto; max-width: 1.6em; }
/* without the plugin sheet the button wrapper is a plain block, so the icon and
   its label stack. One line, with a gap. */
.rsg-page .art-body .premium-button-text-icon-wrapper { display: inline-flex; align-items: center; gap: 8px; }
/* EMOJI ARE THE SAME BUG WEARING AN IMAGE TAG. WordPress rewrites a typed emoji
   into an image tag with class "emoji" pointing at an svg on s.w.org, and core
   ships `img.emoji{width:1em}` in its own inline CSS -- which is not part of
   this deliverable. That svg has a viewBox and NO intrinsic size, so the default
   sizing algorithm stretches it to the container: four 800x800 pointing hands
   measured on one post. Restate core's rule rather than inventing one.
   display:inline-block is required because the master sets
   `.rsg-page img{display:block}`, which would otherwise drop the emoji onto its
   own line mid-sentence. */
.rsg-page .art-body img.emoji,
.rsg-page .art-body img.wp-smiley {
  width: 1em !important; height: 1em !important;
  max-width: 1em; display: inline-block;
  vertical-align: -0.1em; margin: 0 0.07em; border: 0; border-radius: 0; padding: 0; background: none;
}
/* last-resort net: nothing in the prose may outrun the column */
.rsg-page .art-body svg { max-width: 100%; }

/* ---- the services grid (image-box) --------------------------------------
   PORTED FROM THE LIVE PAGE, not designed here. 37 of 85 posts embed the same
   "Our HVAC Marketing Services" block. It is Elementor template 11177, and the
   carried markup keeps BOTH the wrapper class `.elementor-11177` AND all eight
   widget ids -- so the author's own selectors match our DOM verbatim. The only
   thing actually missing was Elementor's base CSS, which is what CONSUMES the
   custom properties the author set. So: restate that contract, then use the
   author's own values.

   NOTE: `boxes-2` MEANS TWO ROWS, NOT TWO COLUMNS. Read off the live page:
     desktop      --e-con-grid-template-columns: repeat(4, 1fr)
                  --e-con-grid-template-rows:    repeat(2, 1fr)   (8 tiles = 4x2)
                  --gap: 25px 25px
     <=767px      repeat(2, 1fr), --gap: 15px 15px
   Reading it as "2 across" is what made the first attempt wrong.

   The live tiles carry NO border and NO radius, the wrapper is CENTRED, and the
   image is width-limited per tile (85% on three of them, 68% on five). A framed,
   full-bleed, left-aligned tile was invention on my part -- these are flat
   illustrations, not photographs. */

/* the contract Elementor's frontend.min.css would have supplied */
.rsg-page .art-body .e-con.e-grid > .e-con-inner {
  display: grid;
  grid-template-columns: var(--e-con-grid-template-columns, 1fr);
  gap: var(--gap, 25px);
  grid-auto-flow: var(--grid-auto-flow, row);
  align-items: start;
}
/* never let a 1fr track be sized by its content -- see the grid-sizing note */
.rsg-page .art-body .e-con.e-grid > .e-con-inner > * { min-width: 0; }

/* the author's own values, lifted from the live page */
.rsg-page .art-body .elementor-11177 .elementor-element.elementor-element-221d0dbb {
  --e-con-grid-template-columns: repeat(4, 1fr);
  --gap: 25px 25px;
  --grid-auto-flow: row;
}
@media (max-width: 767px) {
  .rsg-page .art-body .elementor-11177 .elementor-element.elementor-element-221d0dbb {
    --e-con-grid-template-columns: repeat(2, 1fr);
    --gap: 15px 15px;
  }
}
/* The live container also carries 50px of side padding. That exists to inset the
   grid inside a 1148px full-width container; our article column is already 800px
   and inset, so replicating it would only shrink the tiles. Dropped deliberately
   -- it is the one value here not taken verbatim. */

/* the tiles, per the live rules */
.rsg-page .art-body .elementor-image-box-wrapper { text-align: center; }
.rsg-page .art-body .elementor-image-box-img { margin: 0 auto; max-width: 100%; }
.rsg-page .art-body .elementor-image-box-img img { display: block; width: 100%; height: auto; border: 0; border-radius: 0; transition: transform .3s; }
.rsg-page .art-body .elementor-image-box-img a { display: block; text-decoration: none; border: 0; }
.rsg-page .art-body .elementor-image-box-wrapper .elementor-image-box-img { width: 68%; }
.rsg-page .art-body .elementor-element-52a5780f .elementor-image-box-wrapper .elementor-image-box-img,
.rsg-page .art-body .elementor-element-7de727d2 .elementor-image-box-wrapper .elementor-image-box-img,
.rsg-page .art-body .elementor-element-582c5aca .elementor-image-box-wrapper .elementor-image-box-img { width: 85%; }
.rsg-page .art-body .elementor-image-box-title {
  font-family: var(--font-display); font-size: 16px; line-height: 20px; font-weight: 700;
  color: #000; margin: 8px 0 0;
}
.rsg-page .art-body .elementor-image-box-title a { color: #000; text-decoration: none; border: 0; }
.rsg-page .art-body .elementor-image-box-title a:hover { color: var(--green-500); }
.rsg-page .art-body .elementor-image-box-description { color: #000; font-size: 14px; line-height: 22px; margin: 6px 0 0; }

/* ---- buttons in content -------------------------------------------------
   236 button widgets on 17 posts, in two flavours, and our sheets styled
   NEITHER -- so every in-article call to action rendered as an underlined text
   link. Elementor: an anchor with .elementor-button wrapping
   .elementor-button-content-wrapper > .elementor-button-text. Premium Addons:
   an anchor with .premium-button wrapping .premium-button-text-icon-wrapper.
   Both are the anchor itself, which is why this beats the article-wide inline
   link rule at (0,2,1) -- these are (0,3,0). Reset the underline and the link
   colour explicitly rather than with :not() gymnastics. */
.rsg-page .art-body a.elementor-button,
.rsg-page .art-body a.premium-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border: 0; border-radius: 10px;
  background: var(--green-500); color: #fff;
  font-family: var(--font-display); font-size: 14.5px; font-weight: 700; line-height: 1.25;
  letter-spacing: -0.01em; text-align: center; text-decoration: none;
  box-shadow: 0 2px 8px rgba(20, 62, 37, 0.16); transition: background .18s, box-shadow .18s;
}
.rsg-page .art-body a.elementor-button:hover,
.rsg-page .art-body a.premium-button:hover {
  background: var(--green-700); color: #fff; text-decoration: none;
  box-shadow: 0 4px 14px rgba(20, 62, 37, 0.24);
}
.rsg-page .art-body a.elementor-button .elementor-button-text,
.rsg-page .art-body a.elementor-button .elementor-button-content-wrapper { color: inherit; text-decoration: none; }
.rsg-page .art-body .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: 9px; }
.rsg-page .art-body .elementor-button-wrapper { margin: 4px 0; }
/* the button widget is the one widget that always needs air around it */
.rsg-page .art-body .elementor-widget.elementor-widget-button,
.rsg-page .art-body .elementor-widget.elementor-widget-premium-addon-button { margin: 6px 0 26px; }
.rsg-page .art-body .elementor-align-right .elementor-button-wrapper { text-align: right; }
.rsg-page .art-body .elementor-align-center .elementor-button-wrapper { text-align: center; }

/* ---- the in-article CTA card --------------------------------------------
   39 of these across 8 posts, and the nesting is identical on every one:

     .premium-wrapper-link-yes        the clickable wrapper (carries the href)
       > .e-con                       THE CARD -- Elementor gave it a background
           > .e-con                   row 1: icon widget + heading widget
           > .e-con                   row 2: button widget, aligned right

   The card's background, radius, padding and the row flex all came from
   Elementor's container CSS, which is not part of this deliverable -- so the
   whole thing collapsed into loose text with a button underneath it.
   Rebuilt to the approved shape: light card, green left edge, lightbulb chip,
   copy, compact pill button bottom-right. */
.rsg-page .art-body .e-con.premium-wrapper-link-yes { display: block; margin: 30px 0; }
.rsg-page .art-body .e-con.premium-wrapper-link-yes > .e-con {
  display: block; position: relative;
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--green-500);
  border-radius: 14px; padding: 22px 26px;
  box-shadow: 0 2px 10px rgba(17, 17, 17, 0.05);
  transition: box-shadow .18s, transform .18s;
}
.rsg-page .art-body .e-con.premium-wrapper-link-yes:hover > .e-con {
  box-shadow: 0 6px 20px rgba(17, 17, 17, 0.09); transform: translateY(-1px);
}
/* row 1 -- icon beside the copy; row 2 -- the action, right aligned */
.rsg-page .art-body .premium-wrapper-link-yes > .e-con > .e-con:first-child {
  display: flex; align-items: flex-start; gap: 15px;
}
.rsg-page .art-body .premium-wrapper-link-yes > .e-con > .e-con:last-child {
  display: flex; justify-content: flex-end; margin-top: 15px;
}
.rsg-page .art-body .premium-wrapper-link-yes .elementor-widget-heading { flex: 1 1 auto; min-width: 0; }
.rsg-page .art-body .premium-wrapper-link-yes .elementor-heading-title {
  font-family: var(--font-body); font-size: 15.5px; font-weight: 700; line-height: 1.6;
  color: var(--ink-900); margin: 0;
}
/* THE ICON IS A THEMIFY FONT GLYPH (i.ti-light-bulb) AND THAT FONT IS NOT
   SHIPPED, so the chip rendered empty. Draw the canonical outlined Feather
   lightbulb as a background instead -- never the emoji, never a filled icon,
   never a font-icon class. */
.rsg-page .art-body .premium-wrapper-link-yes .elementor-widget-icon { flex: 0 0 auto; }
.rsg-page .art-body .premium-wrapper-link-yes .elementor-icon {
  display: block; width: 38px; height: 38px; border-radius: 10px;
  background: var(--green-50)
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C7A4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='9' y1='18' x2='15' y2='18'/%3E%3Cline x1='10' y1='22' x2='14' y2='22'/%3E%3Cpath d='M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14'/%3E%3C/svg%3E")
    no-repeat center / 20px 20px;
}
.rsg-page .art-body .premium-wrapper-link-yes .elementor-icon i { display: none; }
/* inside a card the button is the COMPACT PILL, not the full-size button --
   the standard one is too tall for a card, per the action-row pattern */
.rsg-page .art-body .premium-wrapper-link-yes a.elementor-button,
.rsg-page .art-body .premium-wrapper-link-yes a.premium-button {
  padding: 11px 22px; border-radius: 999px;
  font-size: 12.5px; letter-spacing: 0.045em; text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(44, 122, 75, 0.28);
}
.rsg-page .art-body .premium-wrapper-link-yes .elementor-widget.elementor-widget-button { margin: 0; }
@media (max-width: 600px) {
  .rsg-page .art-body .e-con.premium-wrapper-link-yes > .e-con { padding: 18px 18px; }
  .rsg-page .art-body .premium-wrapper-link-yes > .e-con > .e-con:last-child { justify-content: stretch; }
  .rsg-page .art-body .premium-wrapper-link-yes a.elementor-button,
  .rsg-page .art-body .premium-wrapper-link-yes a.premium-button { width: 100%; text-align: center; }
}

/* ---- embeds ------------------------------------------------------------- */
/* 13 posts embed an iframe. Without an aspect box a raw iframe keeps its
   hardcoded pixel width and pushes the article sideways on mobile. */
.rsg-page .art-body iframe { display: block; max-width: 100%; border: 0; border-radius: 14px; margin: 30px 0; }
.rsg-page .art-body iframe[src*="youtube"], .rsg-page .art-body iframe[src*="youtu.be"],
.rsg-page .art-body iframe[src*="vimeo"],  .rsg-page .art-body iframe[src*="wistia"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* ---- tables ------------------------------------------------------------- */
/* 29 posts. The reviewed look lives on .art-table, which live content never
   carries, so the bare tag gets the same treatment. display:block plus
   overflow-x is what keeps a wide comparison table inside the column instead
   of widening the page -- the same containment the .art-tscroll wrapper gives
   the preview, without needing a wrapper the content does not have. */
.rsg-page .art-body table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 30px 0; font-size: 14.5px; border: 1px solid var(--line); border-radius: 12px; }
.rsg-page .art-body table th, .rsg-page .art-body table td { padding: 12px 15px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-2); }
.rsg-page .art-body table thead th { background: #F4F8F5; font-family: var(--font-display); font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--ink-900); white-space: nowrap; }
.rsg-page .art-body table tbody tr:last-child td { border-bottom: 0; }
.rsg-page .art-body table tbody tr:nth-child(even) { background: #FAFCFB; }
.rsg-page .art-body table td:first-child { font-weight: 600; color: var(--ink-900); }

/* ---- Link Whisper "Further Reading" ------------------------------------
   ALL 85 POSTS carry one, inside the content: an h3 "Further Reading", a
   description, and a list of 3 internal links, injected by the Link Whisper
   plugin. It is not removed here. Those are real internal links on a site under
   a zero-SEO-loss mandate, so whether the blog keeps them is Sarah's call, not
   a template's. What IS fixed is how it renders inside this article:

     - the plugin caps every item at max-width:150px, assuming a thumbnail grid.
       Its rules ship in a style tag INSIDE the content, so they sit after this
       sheet in the DOM and win at equal specificity. Every override below is
       therefore (0,4,x): .rsg-page .art-body .lwrp .lwrp-*
     - .art-body ul > li draws a green checkbox marker on every list item, which
       would put one in front of each related post. Both pseudos are cancelled.
     - the plugin's own title and description rules are EMPTY, so without this
       the heading renders at full h3 scale in the middle of the article. */
.rsg-page .art-body .lwrp { margin: 34px 0; padding: 20px 22px 18px; border: 1px solid var(--line); border-left: 3px solid var(--green-500); border-radius: 14px; background: #F7FAF8; }
.rsg-page .art-body .lwrp .lwrp-title { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.4; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 700; color: var(--green-700); margin: 0 0 9px; }
.rsg-page .art-body .lwrp .lwrp-description { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0 0 13px; }
.rsg-page .art-body .lwrp .lwrp-list { display: grid; gap: 10px; margin: 0; padding: 0; }
.rsg-page .art-body .lwrp .lwrp-list-multi-container { display: block; }
.rsg-page .art-body .lwrp .lwrp-list-item { max-width: none; width: auto; padding-left: 0; font-size: 15.5px; line-height: 1.5; }
.rsg-page .art-body .lwrp .lwrp-list-item::before,
.rsg-page .art-body .lwrp .lwrp-list-item::after { content: none; }
.rsg-page .art-body .lwrp .lwrp-list-link { font-weight: 600; }

/* ---- inline and misc ---------------------------------------------------- */
.rsg-page .art-body b { font-weight: 700; color: var(--ink-900); }
.rsg-page .art-body i { font-style: italic; }
.rsg-page .art-body u { text-decoration: underline; text-underline-offset: 2px; }
.rsg-page .art-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; background: var(--green-50); border: 1px solid rgba(44,122,75,0.16); border-radius: 5px; padding: 1px 6px; }
.rsg-page .art-body pre { overflow-x: auto; background: #F4F8F5; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin: 26px 0; }
.rsg-page .art-body pre code { background: none; border: 0; padding: 0; }
.rsg-page .art-body hr { border: 0; height: 1px; background: var(--line); margin: 40px 0; }
/* 7 posts nest a list inside a list */
.rsg-page .art-body ul ul, .rsg-page .art-body ol ol,
.rsg-page .art-body ul ol, .rsg-page .art-body ol ul { margin: 9px 0 4px 0; }
.rsg-page .art-body sup, .rsg-page .art-body sub { font-size: 0.72em; }
/* Elementor emits per-widget CSS as style tags inside the content. They are
   not rendered, but a stray text node next to one can be, so keep both out. */
.rsg-page .art-body style, .rsg-page .art-body script { display: none; }

@media (max-width: 768px) {
  .rsg-page .art-body table { font-size: 13.5px; }
  .rsg-page .art-body table th, .rsg-page .art-body table td { padding: 10px 12px; }
  .rsg-page .art-body figure { margin: 24px 0; }
  .rsg-page .art-body iframe { margin: 24px 0; }
}

/* =============================================================================
   V5 POST -- three variations on the editorial article template (round 1),
   which is the geometry Sarah picked for all 85 posts.

   Shared base kept from round 1: progress bar, breadcrumb, category chip, H1,
   standfirst, byline, hero figure, art-body typography, author band, final CTA.
   What varies is the READING FURNITURE: where the contents live, what else
   sits beside the article, and how a section announces itself.

     ed-   A "The Editorial"   left desk rail: contents + meta + sticky ask card
     lr-   B "The Long Read"   no rail, one centred column, takeaways up top
     ad-   C "The Answer Desk" right rail, answer panel opening the article

   Prefixes are per variation so all three can sit in one comparison file
   without touching each other.
   ============================================================================= *//* -------------------------------------------------------------- THE STICKY FIX
   The master library sets `.rsg-page { overflow-x: hidden }`. A scroll
   container on an ancestor makes `position: sticky` do NOTHING, so round 1's
   contents rail scrolled away with the page -- the same defect recorded on all
   seven case-study pages. `clip` clips identically but does NOT create a
   scroll container, so sticky survives. Scoped to the article page rather than
   patched into the shared master.
   A screenshot CANNOT verify this. It needs a scroll probe: set scrollTop past
   the rail's start and confirm its viewport-relative top stops changing.       */.rsg-page.art-page { overflow-x: clip; }
/* Round 1 printed "JULY 27, 2026" and "UPDATED JULY 27, 2026" side by side on
   every post whose dates match, which is most of them. The builder omits the
   updated stamp when it equals the publish date; this keeps the row tidy when
   it IS shown. */.rsg-page .art-upd { color: var(--ink-500); }
.rsg-page .ed-card { border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow-md); overflow: hidden; }
/* the ask card: the one thing a contents rail has room for and usually wastes */.rsg-page .ed-ask { padding: 18px 16px; background: var(--dark-grad); color: #fff; }
.rsg-page .ed-ask img { display: block; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(110,231,183,0.4); object-fit: cover; }
.rsg-page .ed-ask b { display: block; margin: 11px 0 5px; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: #fff; }
.rsg-page .ed-ask p { margin: 0 0 13px; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.72); }
.rsg-page .ed-ask .btn { width: 100%; justify-content: center; font-size: 13px; padding: 10px 14px; }
/* =============================================================================
   C -- "THE ANSWER DESK"   article first, rail on the right, answer panel
   ============================================================================= *//* The gutter was 124px, not the 62px the gap says. Both tracks were FIXED
   (760px + 268px = 1028) inside a 1152px container, and
   `justify-content: space-between` dumps the 62px of leftover slack BETWEEN the
   columns -- so the authored gap silently doubled.
   Fix: make the article track `1fr` so it absorbs the slack itself. There is
   then no free space for justify-content to redistribute, and the gutter equals
   the gap at every container width. Measured after: 52px.
   Article 800px, rail 300px at a 1200 container. */.rsg-page .ad-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 52px; align-items: start; }
.rsg-page .ad-rail { position: sticky; top: 24px; display: grid; gap: 16px; }
/* The answer panel promotes what the article already says first. It is the
   article's own opening, restyled -- nothing here is written for it, because a
   summary somebody invented is the one thing an answer box must never be. */.rsg-page .ad-answer { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 22px 24px; margin: 0 0 34px; border: 1px solid rgba(44,122,75,0.22); border-radius: 16px; background: linear-gradient(135deg, #F2F8F4 0%, #FFFFFF 70%); }
.rsg-page .ad-aic { width: 44px; height: 44px; border-radius: 12px; background: var(--green-500); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.rsg-page .ad-aic svg { width: 21px; height: 21px; }
.rsg-page .ad-ak { display: block; margin: 0 0 7px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 700; color: var(--green-700); }
.rsg-page .ad-at { margin: 0; font-family: var(--font-display); font-size: 18.5px; line-height: 1.48; font-weight: 600; color: var(--ink-900); }
/* The green left rule IS this variation's section marker, so the sheet's
   44x3px bar pseudo has to go -- left in, it hangs off the top of the rule as
   an accidental corner bracket.
   DESCENDANT, not child. In the preview every H2 is a direct child of
   .ad-body, so `> h2` worked. On the live site the article arrives from
   the_content() inside Elementor widget wrappers -- 81 of 85 posts -- so a
   child selector matches NOTHING and every section loses its rule while the
   44x3px bar comes back. Nothing else inside .art-body is an H2, so widening
   the selector costs nothing. Equal specificity to post-supp's
   `.art-body h2::before`, and this sheet loads later, so `content: none` still
   wins. */.rsg-page .ad-body h2 { border-left: 3px solid var(--green-500); padding-left: 16px; padding-top: 0; }
.rsg-page .ad-body h2::before { content: none; }
/* The jump strip moved OUT of the rail and into the article, because the rail
   is now discovery rather than navigation. An 11-section, 14-minute article
   still needs a way to skip ahead, so it sits under the answer panel. */.rsg-page .ad-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 34px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: #FAFCFB; }
.rsg-page .ad-jumpl { margin-right: 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--ink-500); }
.rsg-page .ad-jump a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; color: var(--ink-700); transition: border-color .16s, color .16s; }
.rsg-page .ad-jump a:hover { border-color: rgba(44,122,75,0.45); color: var(--green-700); }
/* =============================================================================
   THE DISCOVERY RAIL  (dsc-)   what sits beside the article in variation C
   Three cards -- a next read, the recent posts, and the topic list -- plus the
   ask card. Every item is a real post or a real category with its real count;
   each card maps to one Loop Grid or one shortcode, listed in the payload
   comments, so none of it goes stale after a publish.
   ============================================================================= */.rsg-page .dsc-card { border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow-md); overflow: hidden; }
.rsg-page .dsc-ch { display: flex; align-items: center; gap: 9px; padding: 12px 15px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #FBFCFB, #F3F7F4); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--ink-700); }
.rsg-page .dsc-ch svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--green-500); }
/* ---- the next read ---- */.rsg-page .dsc-feat { display: block; padding: 13px 13px 15px; }
.rsg-page .dsc-shot { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background-color: #EEF3EF; background-size: cover; background-position: center; }
.rsg-page .dsc-shot .blg-chip { position: absolute; left: 9px; top: 9px; background: rgba(255,255,255,0.95); box-shadow: 0 3px 10px rgba(0,0,0,0.16); }
.rsg-page .dsc-note { display: flex; align-items: center; gap: 7px; margin: 12px 0 7px; font-size: 11.5px; line-height: 1.4; color: var(--ink-500); }
.rsg-page .dsc-note svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--green-500); }
.rsg-page .dsc-feat b { display: block; font-family: var(--font-display); font-size: 14.5px; font-weight: 700; line-height: 1.34; letter-spacing: -0.01em; color: var(--ink-900); transition: color .16s; }
.rsg-page .dsc-feat:hover b { color: var(--green-700); }
/* ---- recent posts ---- */.rsg-page .dsc-list { display: grid; }
.rsg-page .dsc-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 11px; align-items: start; padding: 12px 15px; border-bottom: 1px solid var(--line-2); transition: background .16s; }
.rsg-page .dsc-row:last-child { border-bottom: 0; }
.rsg-page .dsc-row:hover { background: #F7FAF8; }
.rsg-page .dsc-thumb { display: block; width: 56px; height: 42px; border-radius: 8px; border: 1px solid var(--line); background-color: #EEF3EF; background-size: cover; background-position: center; }
.rsg-page .dsc-rt { display: block; font-family: var(--font-display); font-size: 12.5px; font-weight: 700; line-height: 1.34; color: var(--ink-900); transition: color .16s; }
.rsg-page .dsc-row:hover .dsc-rt { color: var(--green-700); }
.rsg-page .dsc-rm { display: block; margin-top: 5px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 700; color: var(--ink-500); }
/* ---- browse by topic ---- */.rsg-page .dsc-topics { display: grid; }
.rsg-page .dsc-topics a { display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; align-items: center; gap: 10px; padding: 11px 15px; border-bottom: 1px solid var(--line-2); font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--ink-900); transition: background .16s, color .16s; }
.rsg-page .dsc-topics a:last-child { border-bottom: 0; }
.rsg-page .dsc-topics a:hover { background: #F7FAF8; color: var(--green-700); }
.rsg-page .dsc-tn { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: var(--ink-500); font-variant-numeric: tabular-nums; }
.rsg-page .dsc-topics a:hover .dsc-tn { color: var(--green-600); }
.rsg-page .dsc-topics svg { width: 14px; height: 14px; color: var(--ink-500); transition: transform .16s, color .16s; }
.rsg-page .dsc-topics a:hover svg { color: var(--green-500); transform: translateX(2px); }
/* -------------------------------------------------------------- responsive
   Breakpoints match the sheet the article body already uses (1024 / 768 / 480),
   so a rail never restacks at a width the grid around it has not.            */@media (max-width: 1024px) {
  .rsg-page .ad-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  /* a static rail must not keep a sticky offset, or it sits 24px low */.rsg-page .ad-rail { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rsg-page .ed-ask { grid-column: 1 / -1; }
  /* the discovery cards read fine two-up once the rail is under the article */.rsg-page .dsc-topics a { padding: 12px 15px; }
  /* article first on a single column, whichever side the rail was on */.rsg-page .ad-body { order: -1; }
}
@media (max-width: 768px) {
  .rsg-page .ad-rail { grid-template-columns: minmax(0, 1fr); }
  .rsg-page .ad-answer { grid-template-columns: minmax(0, 1fr); gap: 13px; padding: 18px 18px; }
}
@media (max-width: 480px) {
  .rsg-page .ad-body h2 { padding-left: 12px; }
}

/* ============================================================
   SINGLE POST -- ROUND 2 COMPONENTS (August 2026)
   Four additional article geometries. The round-1 template (art-) is untouched
   and stays available; these load beside it and reuse its typography scale, so
   body copy is identical across all five and only the FURNITURE changes.
   Namespaces (verified 0 hits in master-css.txt, archive-supp.css,
   post-supp.css, v2-archive.css):
     brf-  Post B "The Brief"        three-track article with a working right margin
     chp-  Post C "The Chaptered Guide"  the document made visible
     cvr-  Post D "The Cover"        full-bleed image masthead, title over it
     fnt-  Post E "Field Note"       the short-form geometry, no rail at all
   ============================================================ *//* ---- shared: the body typography is inherited from .art-body so all five
        geometries set type identically. These are the wrappers only. ---- */.rsg-page .v2p-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 700; color: var(--ink-500); }
.rsg-page .v2p-crumbs a { color: var(--ink-500); transition: color .18s; }
.rsg-page .v2p-crumbs a:hover { color: var(--green-700); }
.rsg-page .v2p-crumbs.on-dark { color: rgba(255,255,255,0.55); }
.rsg-page .v2p-crumbs.on-dark a { color: rgba(255,255,255,0.66); }
.rsg-page .v2p-crumbs.on-dark a:hover { color: #6EE7B7; }
.rsg-page .v2p-crumbs svg { color: var(--line); flex-shrink: 0; }
.rsg-page .v2p-crumbs.on-dark svg { color: rgba(255,255,255,0.28); }

/* =============================================================================
   V6 MASTHEAD -- four variations on SECTION 1 of the single post, all on the
   dark editorial band.

   WHY THE DIRECTION CHANGED. The finalized masthead was light: breadcrumb,
   chip, H1, standfirst, byline, then a full-width featured image. Two things
   were wrong with it. It shares no language with the /blog/ archive Sarah
   approved, which opens on a dark band. And it hands the top of every one of
   85 posts to a featured image none of us art-directed -- all 85 feature
   banners use an off-palette RED, so the first thing on the page was a colour
   that is not in the brand.

   So: the type sits on the dark band, and the image is FRAMED rather than
   fought. It is mounted in a plinth built from the section's own surface
   recipe, which is what makes a red graphic read as artwork inside our design
   instead of as the page's colour.

     mha-  A "The Mounted Plate"  type on dark, the plate straddles the seam
     mhb-  B "The Split Desk"     type left, portrait plate right, one band
     mhc-  C "The Ledger Band"    type left, fact ledger right, letterbox strip
     mhd-  D "The Stage"          centred type, the plate floating on dark

   Shared furniture is mh-, so the four differ ONLY in composition. Everything
   in here is template-safe: every value comes from a shortcode, and the plate
   is only rendered when there IS a featured image (1 of the 85 has none).
   ============================================================================= *//* -------------------------------------------------------------- shared band */.rsg-page .mh { background: var(--dark-grad); color: #fff; }
.rsg-page .mh h1 { color: #fff; margin: 15px 0 18px; font-size: clamp(30px, 4vw, 46px); line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
/* the one word of emphasis, when a post carries it. Mint, not green: #2C7A4B on
   near-black fails contrast, which is why every existing on-dark accent uses
   this value. */.rsg-page .mh h1 em { font-style: normal; color: #6EE7B7; }
.rsg-page .mh-stand { font-size: clamp(16.5px, 1.5vw, 19px); line-height: 1.64; color: rgba(255,255,255,0.78); margin: 0 0 28px; max-width: 62ch; }
.rsg-page .mh-stand strong { color: #fff; }
/* the category chip. The light .blg-chip reads as a bright blob on near-black,
   so this is its on-dark sibling rather than an override of it. */.rsg-page .mh-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; border: 1px solid rgba(110,231,183,0.32); background: rgba(110,231,183,0.10); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: #6EE7B7; }
.rsg-page .mh-chip:hover { border-color: rgba(110,231,183,0.55); color: #A7F3D0; }
/* its own row, so the chip cannot sit on the breadcrumb's baseline and cannot
   collapse against the H1's top margin */.rsg-page .mh-chiprow { margin: 15px 0 0; }
/* byline */.rsg-page .mh-who { display: flex; align-items: center; gap: 13px; }
.rsg-page .mh-who img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(110,231,183,0.5); flex-shrink: 0; }
.rsg-page .mh-wn { display: block; font-family: var(--font-display); font-size: 15px; font-weight: 800; color: #fff; }
.rsg-page .mh-wn a { color: inherit; }
.rsg-page .mh-wn a:hover { color: #6EE7B7; }
.rsg-page .mh-wr { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.6); }
/* share, on dark */.rsg-page .mh-share { display: flex; align-items: center; gap: 8px; }
.rsg-page .mh-share b { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,0.42); margin-right: 2px; }
.rsg-page .mh-sh { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.72); transition: color .18s, border-color .18s, background .18s; }
.rsg-page .mh-sh:hover { color: #6EE7B7; border-color: rgba(110,231,183,0.5); background: rgba(110,231,183,0.1); }
.rsg-page .mh-sh svg { flex-shrink: 0; }
/* a hairline that separates the byline from the type above it */.rsg-page .mh-rule { border-top: 1px solid rgba(255,255,255,0.14); }
/* ---------------------------------------------------------------- THE FRAME
   pattern_mounted-panel-frame, applied to a photo instead of a form: a plinth
   built from the band's own surface, holding a sheet that carries ONLY the
   image. CONCENTRIC RADII: outer 28 = inner 14 + 14 padding. Corners that nest
   look machined; corners that drift by a few px look accidental. The pair is
   restated at every breakpoint below.
   The lit edge and the glow sit on the plinth, NOT on the sheet: the sheet
   carries overflow:hidden to crop the photo, and a box-shadow on an element
   with overflow:hidden is clipped away.                                      */.rsg-page .mh-mount { position: relative; padding: 14px; border-radius: 28px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); }
.rsg-page .mh-mount::after { content: ""; position: absolute; inset: -1px; border-radius: 29px; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(110,231,183,0.16), 0 34px 90px -34px rgba(44,122,75,0.6); }
.rsg-page .mh-plate { position: relative; display: block; border-radius: 14px; overflow: hidden; background: #0F0F0F; }
.rsg-page .mh-plate img { display: block; width: 100%; height: auto; }
/* =============================================================================
   B -- "THE SPLIT DESK"
   Two columns inside one band: type left, a portrait plate right. Nothing is
   pushed below the fold, which is the argument for it -- the reader can see the
   headline, the byline AND the start of the article at once.
   ============================================================================= */.rsg-page .mhb { padding: 56px 0 54px; }
/* align-items:start, not center. Centred, the type column floated against a
   tall plate and left a 140px void above the breadcrumb. */.rsg-page .mhb-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 54px; align-items: start; }
/* NATIVE 5:3, not a portrait crop. A 4:5 slot was tried first and it cut the
   right-hand third off a landscape banner -- half a gear icon, half a laptop.
   All 85 feature banners are designed landscapes, so a template that crops them
   to portrait damages 85 images to suit one column. */.rsg-page .mhb-grid .mh-plate { aspect-ratio: 5 / 3; }
.rsg-page .mhb-grid .mh-plate img { height: 100%; object-fit: cover; }
.rsg-page .mhb-by { display: flex; align-items: center; gap: 18px 26px; flex-wrap: wrap; padding: 22px 0 0; }
.rsg-page .mhb-side { display: grid; gap: 10px; margin: 16px 0 0; }
.rsg-page .mhb-srow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 9px; border-bottom: 1px solid rgba(255,255,255,0.1); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,0.5); }
.rsg-page .mhb-srow:last-child { border-bottom: 0; padding-bottom: 0; }
.rsg-page .mhb-srow b { font-size: 12.5px; color: #fff; }
/* ------------------------------------------------------------------ responsive
   Breakpoints match the sheets the article already uses (1024 / 768 / 480), so
   the masthead never restacks at a width the rest of the page has not.        */@media (max-width: 1024px) {
  .rsg-page .mhb-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .rsg-page .mhb-side { max-width: 420px; }
}
@media (max-width: 768px) {
  .rsg-page .mh h1 { font-size: clamp(26px, 7vw, 33px); }
  .rsg-page .mhb { padding-top: 40px; }
  .rsg-page .mhb { padding-bottom: 38px; }
  /* concentric pair restated: 24 = 12 + 12 */.rsg-page .mh-mount { padding: 12px; border-radius: 24px; }
  .rsg-page .mh-mount::after { border-radius: 25px; }
  .rsg-page .mhb-by { gap: 16px 20px; }
}
@media (max-width: 480px) {
  /* the share row is the first thing to go: four targets and a label do not
       earn a line of their own at this width, and the article is right below */.rsg-page .mh-share b { display: none; }
  .rsg-page .mh-who img { width: 44px; height: 44px; }
  /* 20 = 10 + 10 */.rsg-page .mh-mount { padding: 10px; border-radius: 20px; }
  .rsg-page .mh-mount::after { border-radius: 21px; }
}