/* ═══════════════════════════════════════════════════════════════════════════
   CAROLINE JEKLIN — myREALPAGE SITE-WIDE TYPE, BUTTON & NAVIGATION SYSTEM

   WHERE THIS GOES:  Site Settings → Custom CSS.  Not into a block.
   The CSS tab on bid_1448361 must stay EMPTY, or its ID-scoped rules win.

   PRINCIPLES
   1. Anchored on .block-layout.block-layout — mRP's own specificity-doubling
      trick. Beats their rules, still loses to inline styles.
   2. Every size rule is gated on :not(.text-size). mRP emits "text-size
      text-sizeN" only when you pick a size; "Default" emits nothing. So these
      apply ONLY on Default and vanish the moment you set a size in the CMS.
   3. NO !important anywhere. It is what blocks the CMS.
   4. Colours flow through --cj-* vars, so dark contexts flip by inheritance.
   5. Spacing uses mRP's `gap`, never margins. Setting both double-counts.
   6. Button colours READ mRP's --fl-button-* properties first, so the CMS
      colour picker always wins and clearing it restores the brand default.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Only needed while the fonts aren't in Site Settings → Fonts.
   This URL MUST stay byte-identical to FONT_HREF in build.py / FONTS in cj_shared.py,
   which every custom block links in its own body. Same URL = one download, already in
   memory by the time a block asks for it. It used to be a different URL (fixed weights),
   so a first visit downloaded two font sets and every block's reveal script sat waiting
   on the second one -- part of the first-visit flash, 2026-09-25. */
@import url("https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,400..800;1,400..800&family=Petrona:ital,wght@0,400..800;1,400..800&display=swap");

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root{
  --cj-primary:     #175658;
  --cj-primary2:    #144345;
  --cj-accent:      #9A452B;
  --cj-accent-hi:   #B4552F;
  --cj-accent-soft: #EBDACE;
  --cj-bg:          #F9F8F4;
  --cj-surface:     #F3F2EC;
  --cj-rule:        #E4E5DF;
  --cj-text:        #1C2321;
  --cj-muted:       #5B6360;
  --cj-white:       #FFFFFF;

  --cj-display: "Petrona", "Iowan Old Style", Georgia, serif;
  --cj-body:    "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --cj-ease:    cubic-bezier(.22,1,.36,1);

  /* Default size per heading level, on mRP's OWN scale, so this stylesheet
     and the CMS dropdown share one vocabulary. Retune here, once, site-wide. */
  --cj-h1: var(--text-size9);   /* 2.4 → 4rem    */
  --cj-h2: var(--text-size7);   /* 2   → 3rem    */
  --cj-h3: var(--text-size5);   /* 1.6 → 2rem    */
  --cj-h4: var(--text-size4);   /* 1.4 → 1.75rem */
  --cj-h5: var(--text-size3);   /* 1.2 → 1.5rem  */
  --cj-h6: var(--text-size2);   /* 1   → 1.25rem */
  --cj-p:  var(--p-font-size);  /* 1   → 1.25rem */
}

/* ── 2. Colour contexts ────────────────────────────────────────────────── */
.block-layout{
  --cj-title-color:   var(--cj-primary);
  --cj-body-color:    var(--cj-text);
  --cj-eyebrow-color: var(--cj-accent);
  --cj-link-color:    var(--cj-accent);
  --cj-link-hover:    var(--cj-accent-hi);

  --cj-btn-bg:         var(--cj-accent);
  --cj-btn-bg-hi:      var(--cj-accent-hi);
  --cj-btn-label:      var(--cj-white);
  --cj-btn-line:       var(--cj-primary);
  --cj-btn-line-label: var(--cj-primary);
  --cj-btn-line-hi:    var(--cj-primary);
  --cj-btn-plain:      var(--cj-accent);
  --cj-btn-plain-rule: var(--cj-accent-soft);
}

/* Dark contexts mRP tags itself. Vars inherit, so a dark COLUMN inside a
   light block flips automatically — no extra selectors needed. */
.block-layout.inverted,
.block-layout.accent-bg,
.block-layout.has-dark-bg,
.block-layout .inverted,
.block-layout .accent-bg,
.block-layout .has-dark-bg,
/* Manual flip: add "cj-on-dark" to the block's custom class field in the CMS
   when you paint a dark/green background mRP hasn't tagged. */
.cj-on-dark,
.block-layout .cj-on-dark{
  --cj-title-color:   var(--g-inverted-text-color, #fff);
  --cj-body-color:    var(--g-inverted-text-color, #fff);
  --cj-eyebrow-color: var(--cj-accent-soft);
  --cj-link-color:    var(--cj-accent-soft);
  --cj-link-hover:    var(--cj-white);

  --cj-btn-bg:         var(--g-inverted-text-color, #fff);
  --cj-btn-bg-hi:      var(--cj-accent-soft);
  --cj-btn-label:      var(--cj-primary);
  --cj-btn-line:       var(--g-inverted-text-color, #fff);
  --cj-btn-line-label: var(--g-inverted-text-color, #fff);
  --cj-btn-line-hi:    var(--cj-white);
  --cj-btn-plain:      var(--g-inverted-text-color, #fff);
  --cj-btn-plain-rule: rgba(255,255,255,.35);
}

/* Never restyle mRP's own branded footer block. */
.block-layout.myrealpage-footer{ --cj-title-color:inherit; --cj-body-color:inherit; }

/* ── 3. Titles — look (always applied) ─────────────────────────────────── */
.block-layout.block-layout .titles .title{
  margin:0;
  font-family:var(--cj-display);
  font-weight:600;
  letter-spacing:-.015em;
  color:var(--cj-title-color);
  text-transform:none;
}

/* Spacing via mRP's gap. .titles must keep margin-bottom:0 — .content already
   carries a 24px flex gap, and adding a margin double-counts it. */
.block-layout.block-layout .titles{ gap:.6rem; }
.block-layout.block-layout .titles.title-reverse{ gap:.75rem; }

/* ── 4. Titles — size (ONLY when CMS size = Default) ───────────────────── */
.block-layout.block-layout .titles h1.title:not(.text-size){ font-size:var(--cj-h1); line-height:1.06; }
.block-layout.block-layout .titles h2.title:not(.text-size){ font-size:var(--cj-h2); line-height:1.08; }
.block-layout.block-layout .titles h3.title:not(.text-size){ font-size:var(--cj-h3); line-height:1.15; }
.block-layout.block-layout .titles h4.title:not(.text-size){ font-size:var(--cj-h4); line-height:1.2;  }
.block-layout.block-layout .titles h5.title:not(.text-size){ font-size:var(--cj-h5); line-height:1.3;  }
.block-layout.block-layout .titles h6.title:not(.text-size){ font-size:var(--cj-h6); line-height:1.35; }

/* ── 5. Sub-titles ─────────────────────────────────────────────────────── */
/* .title-reverse renders the sub-title ABOVE the title → eyebrow role */
.block-layout.block-layout .titles.title-reverse .sub-title{
  margin:0;
  font-family:var(--cj-body);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cj-eyebrow-color);
}
.block-layout.block-layout .titles.title-reverse .sub-title:not(.text-size){
  font-size:.72rem; line-height:1.4;
}

/* Sub-title below the title → supporting serif line */
.block-layout.block-layout .titles:not(.title-reverse) .sub-title{
  margin:0;
  font-family:var(--cj-display);
  font-weight:400;
  font-style:italic;
  letter-spacing:0;
  text-transform:none;
  color:var(--cj-muted);
  opacity:.95;
}
.block-layout.block-layout .titles:not(.title-reverse) .sub-title:not(.text-size){
  font-size:var(--cj-h3); line-height:1.4;
}
.block-layout.inverted .titles:not(.title-reverse) .sub-title,
.block-layout .has-dark-bg .titles:not(.title-reverse) .sub-title,
.cj-on-dark .titles:not(.title-reverse) .sub-title{
  color:var(--g-inverted-text-color,#fff); opacity:.8;
}

/* ── 6. Body copy ──────────────────────────────────────────────────────── */
.block-layout.block-layout .text{
  font-family:var(--cj-body);
  color:var(--cj-body-color);
}
.block-layout.block-layout .text:not(.text-size){ font-size:var(--cj-p); line-height:1.7; }

.block-layout.block-layout .text p{ margin:0 0 1rem; }
.block-layout.block-layout .text p:last-child{ margin-bottom:0; }
.block-layout.block-layout .text strong{ font-weight:600; }
.block-layout.block-layout .text em{ font-size:inherit; font-style:italic; }

.block-layout.block-layout .text a:not(.button){
  color:var(--cj-link-color);
  text-decoration:underline;
  text-underline-offset:.18em;
  text-decoration-thickness:1px;
}
.block-layout.block-layout .text a:not(.button):hover{ color:var(--cj-link-hover); }

/* Headings authored inside rich text — same scale, same gate */
.block-layout.block-layout .text :is(h1,h2,h3,h4,h5,h6){
  font-family:var(--cj-display);
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--cj-title-color);
  margin:2rem 0 .75rem;
}
.block-layout.block-layout .text h1:not(.text-size){ font-size:var(--cj-h1); line-height:1.08; }
.block-layout.block-layout .text h2:not(.text-size){ font-size:var(--cj-h2); line-height:1.12; }
.block-layout.block-layout .text h3:not(.text-size){ font-size:var(--cj-h3); line-height:1.2;  }
.block-layout.block-layout .text h4:not(.text-size){ font-size:var(--cj-h4); line-height:1.25; }
.block-layout.block-layout .text h5:not(.text-size){ font-size:var(--cj-h5); line-height:1.3;  }
.block-layout.block-layout .text h6:not(.text-size){ font-size:var(--cj-h6); line-height:1.35; }

.block-layout.block-layout .text :is(ul,ol){ margin:0 0 1rem; padding-left:1.25rem; }
.block-layout.block-layout .text li{ margin-bottom:.4rem; }
.block-layout.block-layout .text blockquote{
  margin:1.5rem 0;
  padding:.25rem 0 .25rem 1.25rem;
  border-left:2px solid var(--cj-accent-soft);
  font-family:var(--cj-display);
  font-style:italic;
  color:var(--cj-muted);
}

/* ── 7. Buttons ────────────────────────────────────────────────────────── */
/* Case is INVERTED from mRP's default: sentence case everywhere, with their
   "uppercase" toggle still available per button list. */
.block-layout.block-layout .button-list .button{ text-transform:none; letter-spacing:.02em; }
.block-layout.block-layout .button-list.uppercase .button{ text-transform:uppercase; letter-spacing:.09em; }

.block-layout{ --button-padding:.95rem 1.75rem; --button-radius:2px; }
.block-layout.block-layout .button-list{ gap:.75rem 1rem; align-items:center; }

/* Every rule below excludes .button-list.icon-only and .button.no-label.
   Social icons are <a class="sm-button … default-style plain no-label">, so
   without this they'd take the Default treatment and render as squashed
   accent boxes. mRP sizes those from the SVG. */

/* THE BRIDGE between mRP's colour picker and the brand palette.
   mRP writes --fl-button-bg-color / --fl-button-label-color INLINE on the
   button when you pick a colour. Reading them here (with the brand token as
   the fallback) means a CMS colour always wins, in light or dark blocks, and
   clearing it in the CMS drops straight back to the brand default. */
.block-layout.block-layout .button-list:not(.icon-only) .button:not(.no-label){
  --cj-fill:    var(--fl-button-bg-color,    var(--cj-btn-bg));
  --cj-fill-hi: var(--fl-button-bg-color,    var(--cj-btn-bg-hi));
  --cj-onfill:  var(--fl-button-label-color, var(--cj-btn-label));
  --cj-line:    var(--fl-button-bg-color,    var(--cj-btn-line));
  --cj-line-hi: var(--fl-button-bg-color,    var(--cj-btn-line-hi));
  --cj-online:  var(--fl-button-label-color, var(--cj-btn-line-label));
  --cj-plain:   var(--fl-button-label-color, var(--cj-btn-plain));

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border:1px solid transparent;
  font-family:var(--cj-body);
  font-weight:600;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .28s var(--cj-ease),
             color .28s var(--cj-ease),
             border-color .28s var(--cj-ease),
             filter .28s var(--cj-ease);
}

/* Size default — skipped entirely if any CMS size class is present */
.block-layout.block-layout
  .button-list:not(.icon-only):not(.x-small):not(.small):not(.medium):not(.large):not(.x-large)
  .button:not(.no-label):not(.x-small):not(.small):not(.medium):not(.large):not(.x-large){
  font-size:.87rem;
}

.block-layout.block-layout .button-list:not(.icon-only) .button:not(.no-label) label{
  margin:0; font:inherit; letter-spacing:inherit; color:inherit;
  cursor:pointer; pointer-events:none;
}
.block-layout.block-layout .button-list .button:focus-visible{
  outline:2px solid var(--cj-accent); outline-offset:3px;
}

/* Filled */
.block-layout.block-layout .button-list:not(.icon-only) .button:not(.no-label).filled,
.block-layout.block-layout .button-list:not(.icon-only) .button:not(.no-label).filled label{ color:var(--cj-onfill); }
.block-layout.block-layout .button-list:not(.icon-only) .button:not(.no-label).filled{
  background-color:var(--cj-fill); border-color:var(--cj-fill);
}
.block-layout.block-layout .button-list:not(.icon-only) .button:not(.no-label).filled:hover{
  background-color:var(--cj-fill-hi); border-color:var(--cj-fill-hi); filter:brightness(1.08);
}

/* Outlined */
.block-layout.block-layout .button-list:not(.icon-only) .button:not(.no-label).outlined,
.block-layout.block-layout .button-list:not(.icon-only) .button:not(.no-label).outlined label{ color:var(--cj-online); }
.block-layout.block-layout .button-list:not(.icon-only) .button:not(.no-label).outlined{
  background-color:transparent; border-color:var(--cj-line);
}
.block-layout.block-layout .button-list:not(.icon-only) .button:not(.no-label).outlined:hover,
.block-layout.block-layout .button-list:not(.icon-only) .button:not(.no-label).outlined:hover label{ color:var(--cj-onfill); }
.block-layout.block-layout .button-list:not(.icon-only) .button:not(.no-label).outlined:hover{
  background-color:var(--cj-line-hi); border-color:var(--cj-line-hi);
}

/* Plain */
.block-layout.block-layout .button-list:not(.icon-only) .button:not(.no-label).plain,
.block-layout.block-layout .button-list:not(.icon-only) .button:not(.no-label).plain label{ color:var(--cj-plain); }
.block-layout.block-layout .button-list:not(.icon-only) .button:not(.no-label).plain{
  padding:.5rem 0;
  background:none;
  border:0;
  border-bottom:1px solid var(--cj-btn-plain-rule);
  border-radius:0;
}
.block-layout.block-layout .button-list:not(.icon-only) .button:not(.no-label).plain:hover{
  border-bottom-color:var(--cj-plain); filter:brightness(1.08);
}

/* Default — LAST, because mRP ships it as .default-style.outlined */
.block-layout.block-layout .button-list:not(.icon-only) .button:not(.no-label).default-style,
.block-layout.block-layout .button-list:not(.icon-only) .button:not(.no-label).default-style label{ color:var(--cj-onfill); }
.block-layout.block-layout .button-list:not(.icon-only) .button:not(.no-label).default-style{
  background-color:var(--cj-fill); border-color:var(--cj-fill);
}
.block-layout.block-layout .button-list:not(.icon-only) .button:not(.no-label).default-style:hover{
  background-color:var(--cj-fill-hi); border-color:var(--cj-fill-hi); filter:brightness(1.08);
}

/* ── 8. Forms ──────────────────────────────────────────────────────────── */
.block-layout.block-layout .mrp-dynamic-form :is(label,input,textarea,select,button){
  font-family:var(--cj-body);
}
.block-layout.block-layout .mrp-dynamic-form label{ color:var(--cj-muted); }
.block-layout.block-layout .mrp-dynamic-form button.btn{
  font-family:var(--cj-body);
  font-weight:600;
  text-transform:none;
  letter-spacing:.02em;
}

/* ── 9. Mobile ─────────────────────────────────────────────────────────── */
@media (max-width:600px){
  .block-layout.block-layout .button-list{ gap:.65rem; }
  .block-layout.block-layout .button-list:not(.icon-only) .button:not(.no-label):not(.plain){
    width:100%; max-width:100%;
    white-space:normal;
    height:auto; min-height:48px;
    text-align:center;
  }
  .block-layout.block-layout .button-list:not(.icon-only) .button:not(.no-label) label{
    white-space:normal; overflow-wrap:anywhere; line-height:1.25;
  }
}

/* ── 10. Navigation — desktop (menu-200c) ──────────────────────────────── */
/* mRP resolves the menu font through a variable chain, so setting the hook is
   cleaner than fighting selectors:
   --custom-menu-font-family → --menu-font-family → --body-font-family */
:root{
  --custom-menu-font-family: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --menu-text-color:     #175658;
  --dropdown-text-color: #175658;
}

.menu-200c .hmenu2 > .mrp-menu-level-0{ column-gap:1.75rem; }
.menu-200c .hmenu2 > .mrp-menu-level-0 > li > a,
.menu-200c .hmenu2 > .mrp-menu-level-0 > li > span{
  font-family:var(--cj-body);
  font-size:.92rem;
  font-weight:500;
  letter-spacing:.04em;
  transition:color .22s var(--cj-ease);
}
.menu-200c .hmenu2 > .mrp-menu-level-0 > li:hover > a,
.menu-200c .hmenu2 > .mrp-menu-level-0 > li:hover > span{ color:var(--cj-accent); }

/* Dropdown panel */
.menu-200c .hmenu2 > .mrp-menu-level-0 li > ul{
  background:var(--cj-white);
  border:1px solid var(--cj-rule);
  border-radius:2px;
  padding:.5rem .25rem;
  box-shadow:0 12px 28px -12px rgba(28,35,33,.22);
}
.menu-200c .hmenu2 ul ul li span,
.menu-200c .hmenu2 ul ul li a{
  font-family:var(--cj-body);
  font-size:.87rem;
  font-weight:400;
  letter-spacing:.01em;
  padding:.7rem 1rem;
  min-width:10.5rem;  /* keeps a 2-column dropdown inside a 1080px viewport */
  transition:color .2s var(--cj-ease), background-color .2s var(--cj-ease);
}
.menu-200c .hmenu2 ul ul li:hover > a{
  color:var(--cj-accent);
  background:var(--cj-surface);
}
/* mRP draws a hairline under every dropdown item as an absolutely-positioned
   ::after with width:100%. The anchor is static, so the pseudo-element's
   containing block is the <li>, while `left` falls back to the anchor's
   STATIC position — which our 1rem side padding pushes inward. Result:
   208px of line starting 16px in, inside a 218px panel = ~11px overshoot
   past the right border. Pin both edges and drop width:100% instead. */
.menu-200c .hmenu2 ul ul li > a::after,
.menu-200c .hmenu2 ul ul li > span::after{
  left:1rem; right:1rem; width:auto;
}
/* …and drop it entirely on the last item */
.menu-200c .hmenu2 ul ul li:last-child > a::after,
.menu-200c .hmenu2 ul ul li:last-child > span::after{ content:none; }

/* Nav CTA button — smaller than body buttons */
.menu-200c.block-layout .button-list .button{
  font-family:var(--cj-body);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:none;
}

/* ── 11. Navigation — mobile drawer (vmenu200c / mmenu) ────────────────── */
/* mRP narrows the parent anchor to calc(100% - 45px) and leaves a 45px
   chevron strip on the <li> as the toggle. Tapping the WORD hits the anchor
   and navigates instead of opening the submenu.
   pointer-events:none drops the tap through to the <li>, which is what mmenu
   listens on — so the whole row becomes the toggle.
   TRADE-OFF: the parent destination is unreachable from the drawer. Fine
   here — mRP already repeats it as the first child (Buying → "Buying
   Resources", Selling → "Selling Resources", About → "About Me"). */
.vmenu200c .sidemenu li.has-submenu > a,
.vmenu200c .sidemenu li.has-submenu > span{ pointer-events:none; }
.vmenu200c .sidemenu li.has-submenu{ cursor:pointer; }

.vmenu200c .sidemenu a,
.vmenu200c .sidemenu span{
  font-family:var(--cj-body);
  font-size:1rem;
  font-weight:500;
  letter-spacing:.01em;
  color:var(--cj-primary);
}
.vmenu200c .sidemenu ul ul a{
  font-size:.92rem;
  font-weight:400;
  color:var(--cj-muted);
}
.vmenu200c .sidemenu li.mm2-spn--open-parent > a{ color:var(--cj-accent); }

/* Tap targets — mRP's 45px default is under the 48px minimum */
.vmenu200c{ --mm2-spn-item-height:48px; }

/* Drawer logo. mRP renders it at calc(0.5 * --menu-h-max) and then shrinks it
   again with transform:scale(0.75) — 88x72 on a 312px-wide drawer. Drop the
   scale and set the height directly: 167x136. Shorter viewports step back
   down so the header doesn't crowd the menu items. */
.vmenu200c .brand-container{ transform:none; }
.vmenu200c .brand-container,
.vmenu200c .brand-container a,
.vmenu200c .brand-container span{ height:8.5rem; min-height:8.5rem; }
.vmenu200c .sidemenu-header img{ max-height:8.5rem; }

@media (max-height:700px){
  .vmenu200c .brand-container,
  .vmenu200c .brand-container a,
  .vmenu200c .brand-container span{ height:6rem; min-height:6rem; }
  .vmenu200c .sidemenu-header img{ max-height:6rem; }
}

/* ── 12. Mega-menu: section labels + auto columns ──────────────────────── */
/* TWO NATIVE mRP CAPABILITIES most people assume aren't there. Verified live.

   (a) SECTION LABEL — a menu entry saved with NO URL renders as a <span>
       instead of an <a>. mRP already styles `ul ul li span` alongside
       `ul ul li a`, so this is supported, not a hack: a real non-clickable
       label row. Create it in the CMS like any menu item, leave the link blank.

   (b) COLUMNS — the dropdown is a grid:
         grid-template-rows: repeat(var(--dropdown-menu-column, 20), min-content);
         grid-auto-flow: column;
       mRP sets --dropdown-menu-column:3000 INLINE on .primary-menu, which is
       why it never wraps. Setting the var on the <ul> — the element that
       consumes it — beats that inline value without !important. */

.menu-200c .hmenu2 > .mrp-menu-level-0 li > ul{
  --dropdown-menu-column: 9;   /* safety cap: longest single group + headroom */
  column-gap:1.25rem;
}

/* THE KEY RULE. A label starts a new column, whatever sits above it.
   With grid-auto-flow:column, giving an item a definite row places it in the
   first column where row 1 is still free — i.e. the next column. So the
   grouping follows the LABELS, not a fixed item count, and no menu needs
   per-item tuning or fragile :nth-child.
   Degrades safely: without :has() support the rule drops and the dropdown
   simply wraps at the cap above. */
.menu-200c .hmenu2 ul ul li:has(> span){ grid-row-start: 1; }

/* Centre the panel under its trigger so a two-column one can't run off either
   edge. Measured across 1080-1440: every dropdown clears both sides. */
.menu-200c .hmenu2 > .mrp-menu-level-0 > li > ul{
  left:50%;
  right:auto;
  transform:translateX(-50%);
  max-width:min(92vw, 640px);
}

/* Narrow desktops: one column. mRP swaps to the drawer at 67rem (1072px), and
   between there and ~1240 a 490px two-column panel gets tight. The label still
   divides the list, it just reads as an inline heading instead of a column. */
@media (max-width:1240px){
  .menu-200c .hmenu2 > .mrp-menu-level-0 li > ul{ --dropdown-menu-column: 30; }
  .menu-200c .hmenu2 ul ul li:has(> span){ grid-row-start: auto; }
}

/* The label row — desktop dropdown AND mobile drawer.
   COLOUR: don't out-specify, redirect. mRP paints these through
     html .menu-200c .primary-menu.primary-menu .hmenu2 ul ul span  (0,4,4)
       { color: var(--dropdown-text-color, …) }
     .vmenu200c.light .sidemenu span                                (0,3,2)
       { color: var(--menu-text-color, …) }
   Both use the class-doubling trick this sheet uses, so outranking them gets
   ugly. Setting those vars ON THE SPAN beats the inherited :root value and
   mRP's own rules then paint the label clay. Same technique as
   --dropdown-menu-column above. */
.menu-200c .hmenu2 ul ul li > span,
.vmenu200c .sidemenu li > span{
  --dropdown-text-color: var(--cj-accent);
  --menu-text-color:     var(--cj-accent);
  pointer-events:none;
  cursor:default;
  font-family:var(--cj-body);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.menu-200c .hmenu2 ul ul li > span{ padding:.85rem 1rem .45rem; }
.vmenu200c .sidemenu li > span{ padding-top:1.35rem; padding-bottom:.35rem; }

/* hairline under the label, inset to match the items */
.menu-200c .hmenu2 ul ul li > span::after{
  content:"";
  left:1rem; right:1rem; width:auto;
  height:1px;
  background:var(--cj-rule);
  opacity:1;
}

/* ── 13. Nav never wraps to a second row ───────────────────────────────── */
/* mRP ships `.hmenu2 > .mrp-menu-level-0 { flex-wrap: wrap }`, so once the
   seven items + logo + CTA exceed the bar, the menu drops a second row —
   measured at 1359px, where the list needed exactly its allotted 689px.

   mRP hands the desktop menu off to the drawer at 67rem (1072px) via:
     @media (max-width:67rem){ .menu-200c .primary-menu .menu-items nav{display:none} }
     @media (min-width:67rem){ .menu-200c .vmenu-opener2:not(.mobile-show){display:none} }
   so the bar has to survive all the way down to 1072 unaided. It can't at full
   size — hence the wrap.

   FIX: forbid wrapping outright, then tighten in three steps so the bar still
   fits at 1073. That keeps mRP's own breakpoint intact: no custom switch, no
   band where the menu is squeezed AND wrapped. Verified 1073 → 1920.

     1073  1 row, 79px clear of the logo, 14px clear of the CTA
     1080  1 row
     1120  1 row
     1280  1 row
     1359  1 row  (was 2 rows)
     1400  1 row
     1071  drawer + hamburger — clean handoff, nothing in between */

.menu-200c .hmenu2 > .mrp-menu-level-0{ flex-wrap:nowrap; }
.menu-200c .hmenu2 > .mrp-menu-level-0 > li > a,
.menu-200c .hmenu2 > .mrp-menu-level-0 > li > span{ white-space:nowrap; }

@media (max-width:1400px){
  .menu-200c .hmenu2 > .mrp-menu-level-0{ column-gap:1.15rem; }
  .menu-200c .hmenu2 > .mrp-menu-level-0 > li > a,
  .menu-200c .hmenu2 > .mrp-menu-level-0 > li > span{
    font-size:.87rem; letter-spacing:.03em;
  }
}

@media (max-width:1280px){
  .menu-200c .hmenu2 > .mrp-menu-level-0{ column-gap:.8rem; }
  .menu-200c .hmenu2 > .mrp-menu-level-0 > li > a,
  .menu-200c .hmenu2 > .mrp-menu-level-0 > li > span{
    font-size:.82rem; letter-spacing:.02em;
  }
  /* the logo column is minmax(--menu-h-max, --menu-h-max * --menu-w-max),
     i.e. 192-288px. Capping the multiplier reclaims width without touching
     the bar's height. */
  .menu-200c .primary-menu{ --menu-w-max:1.15; }
}

@media (max-width:1150px){
  .menu-200c .hmenu2 > .mrp-menu-level-0{ column-gap:.6rem; }
  .menu-200c .hmenu2 > .mrp-menu-level-0 > li > a,
  .menu-200c .hmenu2 > .mrp-menu-level-0 > li > span{
    font-size:.78rem; letter-spacing:.015em;
  }
  .menu-200c .menu-style-2 .menu-items{ gap:.85rem; }
  .menu-200c .primary-menu{ --menu-w-max:1.05; }
} 


#bid_5013955 {
  display: none !important;
} 


/* ============================================================================
   Catchment pages -- two fixes, site-wide
   Added 15 September 2026. Paste into Custom CSS (site-wide), UNDER whatever is
   already there. Do not paste into a block.

   Both fixes are also baked into the generator, so any catchment block pasted from
   now on carries them itself. This file exists so the 31 pages already built do not
   need their 03-BODY-mid block re-pasted. Harmless once they are.

   Scoped to sections whose id starts with "cj-" -- the catchment and area page blocks.
   ============================================================================ */

/* 1. The blue rectangle when you tap an FAQ question.
      myRealPage's theme draws an outline on plain :focus. Keep the ring for keyboard
      (Tab) users; drop it for a mouse or a finger. Never delete the second rule. */
section[id^="cj-"] :focus:not(:focus-visible) { outline: none !important; }
section[id^="cj-"] :focus-visible { outline: 2px solid #EBDACE; outline-offset: 3px; }

/* 2. On a phone, the secondary school's own figure ("THIS SCHOOL 60.5%") sat indented
      while the two baselines under it were flush left. The desktop rule that gives that
      cell room beside the bar chart was still winning on mobile. */
@media (max-width: 620px) {
  section[id^="cj-"] .cj-ct-table--track td.cj-ct-track + td { padding-left: 0 !important; }
} 



/* ═══════════════════════════════════════════════════════════════════════════
   CAROLINE JEKLIN — myREALPAGE BLOG STYLES

   WHERE THIS GOES:  the site-wide (master) Custom CSS.  Every rule is scoped
   to the five blog pages' body classes (blog.html + the four Education
   category pages), so it cannot reach any other page.
   SCOPE: body:is(.blog, .market-watch, .buyer-tips, .seller-tips,
   .community-guides) — same specificity as body.blog (one class). A new
   blog category page needs its slug added to every rule (find/replace).

   REQUIRES myrealpage-global.css — the --cj-* tokens are defined there.
   If you paste this into the PAGE css instead of the site sheet, the tokens
   still resolve, because :root in the global sheet is document-wide.

   BODY HOOKS (verified live)
     body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides)                  → listing page AND single post
     body.blog-post-full        → single post only
   HEADING TAG DIFFERS BY PAGE, CLASS DOES NOT
     listing:  h2.weblet_blog-entry-heading
     post:     h1.weblet_blog-entry-heading

   PRINCIPLES — same as the global sheet
   1. !important appears exactly ONCE, on the listing excerpt (§4), because
      mRP itself uses !important there and it cannot be answered any other
      way. Everywhere else, specificity does the work.
   2. Font SIZE on entry headings is left alone. mRP drives it from the
      container's list-title-N / post-title-N classes, which are CMS controls.
      We set family, weight, colour and tracking only. (Exception, §11: in a
      2- or 3-column card grid the --text-size5/6/7 variables that control
      reads are redirected one scale down, so the control still works.)

   LAYOUT HOOKS (added 2026-09-24, verified on Staging at 1440/1024/768/390/360)
     .blog-2-col / .blog-3-col  → card grid (§11, subgrid-aligned rows)
     .blog-nav-top              → Blogs / Posts by date / Categories as
                                  hover dropdowns across the top (§12)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Layout shell ───────────────────────────────────────────────────── */
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-container{
  --blog-rule: var(--cj-rule, #E4E5DF);
}

/* mRP hides .weblet_blog-entry-divider outright in this list style
   (`.blog-200c .weblet_blog-entry-divider{display:none}`), so the separator
   between entries has to live on the article itself. The divider rule further
   down is kept in case the list style is ever switched in the CMS. */
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-blog-entry{
  padding-bottom:2.5rem;
  margin-bottom:2.5rem;
  border-bottom:1px solid var(--blog-rule, #E4E5DF);
}
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-blog-entry:last-of-type{
  border-bottom:0;
  margin-bottom:0;
}

/* ── 2. Entry heading (h2 on the list, h1 on the post) ─────────────────── */
/* Size intentionally NOT set — list-title-N / post-title-N own it. */
/* mRP ships `.blog-200c .blog-container h2.weblet_blog-entry-heading{font-weight:unset}`
   at (0,3,1) — and `unset` on font-weight resolves to *inherit*, dragging the
   heading back to 400. Matching at (0,4,1) to clear it. The same selector
   covers the h2 on the listing and the h1 on the post, since only the tag
   differs between them, not the class. */
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c .blog-container .weblet_blog-entry-heading{
  margin:0 0 .75rem;
  font-family:var(--cj-display);
  font-weight:600;
  letter-spacing:-.015em;
  line-height:1.12;
}
/* The heading element itself must NOT be in this group — `font-family:inherit`
   would override the var(--cj-display) set above and pull DM Sans down from
   the parent. Only the inner link and span inherit. */
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c .blog-container .weblet_blog-entry-heading{ color:var(--cj-primary); }
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c .blog-container .weblet_blog-entry-heading a,
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c .blog-container .weblet_blog-entry-heading-text{
  color:inherit;
  font-family:inherit;
  font-weight:inherit;
  letter-spacing:inherit;
  text-decoration:none;
  transition:color .22s var(--cj-ease);
}
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c .blog-container .weblet_blog-entry-heading a:hover,
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c .blog-container .weblet_blog-entry-heading a:hover .weblet_blog-entry-heading-text{
  color:var(--cj-accent);
}

/* ── 3. Meta line — date / author / category ───────────────────────────── */
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-entry-info{
  margin:0 0 1.5rem;
  font-family:var(--cj-body);
  font-size:.78rem;
  line-height:1.6;
  letter-spacing:.04em;
  color:var(--cj-muted);
}
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-entry-info :is(span,a,div){
  font-family:inherit;
  font-size:inherit;
  line-height:inherit;
  letter-spacing:inherit;
}
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-posted-on-literal,
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-posted-by-literal,
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-posted-in-literal{
  color:var(--cj-muted);
  opacity:.75;
}
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-posted-date,
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-entry-author-name{
  color:var(--cj-text);
  font-weight:500;
}
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-entry-labels-section{ margin-top:.35rem; }
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-category-item{
  color:var(--cj-accent);
  font-weight:500;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--cj-ease), color .2s var(--cj-ease);
}
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-category-item:hover{
  color:var(--cj-accent-hi);
  border-bottom-color:var(--cj-accent-soft);
}

/* ── 4. Post body ──────────────────────────────────────────────────────── */
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-entry-text{
  font-family:var(--cj-body);
  color:var(--cj-text);
}
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-entry-text p{
  margin:0 0 1.15rem;
  font-family:var(--cj-body);
  line-height:1.7;
  color:var(--cj-text);
}
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-entry-text p:last-child{ margin-bottom:0; }

/* THE ONE PLACE !important IS REQUIRED.
   On the LISTING page mRP ships:
     .blog-200c .blog-mask .blog-entry-list .weblet_blog-entry-text p {
       display:inline; font-size:…!important; font-family:…!important; }
   Their !important can only be answered in kind. Note the rule needs a
   .blog-entry-list ancestor, which the single POST page does not have — so
   the post page is already handled by the plain rule above.
   `display:inline` is left alone deliberately: it is how their excerpt mask
   clamps the preview text. Changing it breaks the truncation. */
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c .blog-mask .blog-entry-list .weblet_blog-entry-text p{
  font-family:var(--cj-body) !important;
  line-height:1.7 !important;
}

/* Editorial posts carry real headings; the auto-generated listing posts don't.
   Sized off the same tokens as the rest of the site. */
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-entry-text :is(h1,h2,h3,h4,h5,h6){
  font-family:var(--cj-display);
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--cj-primary);
  margin:2rem 0 .75rem;
}
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-entry-text h1{ font-size:var(--cj-h2); line-height:1.1;  }
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-entry-text h2{ font-size:var(--cj-h3); line-height:1.18; }
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-entry-text h3{ font-size:var(--cj-h4); line-height:1.25; }
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-entry-text h4{ font-size:var(--cj-h5); line-height:1.3;  }
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-entry-text :is(h5,h6){ font-size:var(--cj-h6); line-height:1.35; }

body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-entry-text :is(ul,ol){ margin:0 0 1.15rem; padding-left:1.25rem; }
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-entry-text li{ margin-bottom:.4rem; line-height:1.7; }
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-entry-text strong{ font-weight:600; color:var(--cj-primary); }
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-entry-text em{ font-size:inherit; font-style:italic; }

body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-entry-text blockquote{
  margin:1.75rem 0;
  padding:.25rem 0 .25rem 1.25rem;
  border-left:2px solid var(--cj-accent-soft);
  font-family:var(--cj-display);
  font-style:italic;
  color:var(--cj-muted);
}

body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-entry-text a{
  color:var(--cj-accent);
  text-decoration:underline;
  text-underline-offset:.18em;
  text-decoration-thickness:1px;
}
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-entry-text a:hover{ color:var(--cj-accent-hi); }

/* Images pasted into a post shouldn't blow out the column */
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-entry-text img{
  max-width:100%;
  height:auto;
  display:block;
  margin:1.5rem 0;
}

/* ── 5. Divider ────────────────────────────────────────────────────────── */
/* mRP ships this as 1px dotted grey. A solid hairline on the brand rule
   colour reads much cleaner between entries. */
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-entry-divider{
  margin:2.25rem 0;
  border:0;
  border-top:1px solid var(--blog-rule, #E4E5DF);
  height:0;
}

/* ── 6. "Read more" permalink button ───────────────────────────────────── */
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-entry-full-link{ margin-top:1.5rem; }

/* THE LABEL IS ASSEMBLED FROM THREE PIECES — do not use flex here.
   mRP builds it as:  ::before (empty)  +  <span>Read</span>  +  ::after (" more")
     .blog-200c .weblet_blog-entry-full-link a::after{
       content: var(--blog-post-button-text-after, " more"); }
   Under display:inline-flex those become flex items, which blockifies them and
   strips the LEADING SPACE from " more" — rendering "Readmore". A `gap` is not
   a fix either: the ::before is an empty-but-generated flex item, so a gap
   would also insert space before "Read". inline-block keeps them in normal
   inline flow and the space survives. mRP itself uses inline-block here.

   COLOUR HOOKS: on the LISTING mRP reads --button-list-color; the generic
   rule reads --button-post-color. Chain both so whichever the CMS writes wins,
   then fall back to the brand accent.
   Specificity (0,4,2) clears .blog-200c .weblet_blog-entry-full-link a. */
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c .weblet_blog-entry-full-link a.weblet_blog-entry-permalink{
  display:inline-block;
  padding:.85rem 1.6rem;
  background-color:var(--button-list-color, var(--button-post-color, var(--cj-accent)));
  border:1px solid var(--button-list-color, var(--button-post-color, var(--cj-accent)));
  border-radius:2px;
  font-family:var(--cj-body);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1.2;
  text-align:center;
  /* respect the CMS case toggle, but default to sentence case not uppercase */
  text-transform:var(--button-list-case, none);
  text-decoration:none;
  color:var(--button-list-label-color, var(--button-post-label-color, var(--cj-white)));
  transition:background-color .28s var(--cj-ease), border-color .28s var(--cj-ease);
}
/* mRP's hover is `filter:saturate(4); transform:scale(1.05)`. saturate(4) on
   the clay drives it to a vivid red — that is the "turns red" effect, not a
   colour we set. Neutralise the filter and let the background shift carry it. */
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c .weblet_blog-entry-full-link a.weblet_blog-entry-permalink:hover{
  filter:none;
  transform:none;
  background-color:var(--cj-accent-hi);
  border-color:var(--cj-accent-hi);
  color:var(--button-list-label-color, var(--button-post-label-color, var(--cj-white)));
}

/* ── 7. Pagination ─────────────────────────────────────────────────────── */
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-page-nav{
  margin-top:2.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--blog-rule, #E4E5DF);
}
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) :is(.weblet_blog-page-next, .weblet_blog-page-prev){
  font-family:var(--cj-body);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:none;
  color:var(--cj-accent);
  text-decoration:none;
}
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) :is(.weblet_blog-page-next, .weblet_blog-page-prev):hover{
  color:var(--cj-accent-hi);
}

/* ── 8. Sidebar navigation ─────────────────────────────────────────────── */
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-navigation-sa-section{ margin-bottom:2.25rem; }

/* mRP: .blog-200c .blog-container.blog-nav-top .weblet_blog-navigation-sa-heading
   sits at (0,4,0) and forces font-weight:normal plus a white background and
   asymmetric padding. Matching at (0,4,1) to clear it. */
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c .blog-container .weblet_blog-navigation-sa-heading,
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c .blog-container .weblet_blog-category-heading{
  display:block;
  background:transparent;
  margin-bottom:.85rem;
  padding:0 0 .5rem;
  border-bottom:1px solid var(--blog-rule, #E4E5DF);
  font-family:var(--cj-body);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cj-accent);
}

body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-navigation-sa-item{ margin-bottom:.5rem; }
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-navigation-sa-item a{
  font-family:var(--cj-body);
  font-size:.9rem;
  font-weight:400;
  line-height:1.5;
  color:var(--cj-text);
  text-decoration:none;
  transition:color .2s var(--cj-ease);
}
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-navigation-sa-item a:hover{ color:var(--cj-accent); }

/* ── 9. RSS / syndication ──────────────────────────────────────────────── */
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-syndication-section a{
  font-family:var(--cj-body);
  font-size:.78rem;
  letter-spacing:.04em;
  color:var(--cj-muted);
  text-decoration:none;
}
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-syndication-section a:hover{ color:var(--cj-accent); }

/* ── 10. Mobile ────────────────────────────────────────────────────────── */
@media (max-width:600px){
  body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-entry-info{ font-size:.74rem; }
  body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-entry-divider{ margin:1.75rem 0; }
  body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .weblet_blog-entry-permalink{
    width:100%;
    min-height:48px;
    white-space:normal;
    text-align:center;
  }
}

/* ── 11. Card grid (2- and 3-column list layouts) ─────────────────────── */
/* The CMS "columns" control puts .blog-2-col / .blog-3-col on the container and
   makes .blog-entry-list a grid. Each card used to size to its own content, so
   titles, meta, excerpts and "Read more" landed at different heights across a
   row. SUBGRID fixes that: every card spans five row tracks of the list grid
   (image · title · meta · excerpt · button) and shares them with its row-mates,
   so each part lines up across the row whatever its length.
   mRP's own list rule is (0,3,0); these are (0,4,1). */
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c :is(.blog-2-col, .blog-3-col) .blog-entry-list{
  row-gap:3.5rem;
  align-items:stretch;
}
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c :is(.blog-2-col, .blog-3-col) .blog-entry-list .weblet_blog-blog-entry{
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span 5;
  row-gap:0;
  align-content:start;
  /* mRP's 2- and 1-column breakpoints use plain 1fr tracks, which never shrink
     below a card's min-content. The nowrap category line (§ meta) then set that
     min-content: a post with a long category list pushed its card to 546px and
     off a phone screen (found 2026-09-24 on "6 Steps to Decluttering…").
     min-width:0 lets the track shrink and the line ellipsise as intended. */
  min-width:0;
  /* SAFARI: the card is itself a grid, and its one column was auto-sized. mRP
     makes the title display:-webkit-box, which WebKit measures as one unbroken
     line, so the column grew past the card and the image, title and meta
     spilled up to ~236px over the edge (Chrome was fine). An explicit
     minmax(0,1fr) column, plus min-width:0 on each part, pins them to the card.
     Found 2026-09-24; verified in WebKit and Chromium at 390-1500. */
  grid-template-columns:minmax(0,1fr);
  margin:0;
  padding:0;
  border:0;
}
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c :is(.blog-2-col, .blog-3-col) .blog-entry-list .weblet_blog-blog-entry > *{
  min-width:0;
}
/* The image is order:-1 (post style 2), so it is the first track. The image
   link stays in the flow even when a missing photo is hidden, which keeps the
   five tracks intact. */
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c :is(.blog-2-col, .blog-3-col) .blog-entry-list .weblet_blog-entry-image-container{
  margin:0 0 1.25rem;
}

/* Titles: step down two sizes in a card grid. The CMS list-title-N control reads
   --text-size5/6/7 here; redirecting those three (only inside a multi-column
   list) keeps the control working, it just starts from a card-sized scale.
   Literal values, not var(--text-size3), so nothing references itself. */
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c :is(.blog-2-col, .blog-3-col) .blog-entry-list{
  --text-size5:clamp(1.2rem, calc(1.2rem + ((1vw - 0.225rem) * 0.57)), 1.5rem);
  --text-size6:clamp(1.4rem, calc(1.4rem + ((1vw - 0.225rem) * 0.66)), 1.75rem);
  --text-size7:clamp(1.6rem, calc(1.6rem + ((1vw - 0.225rem) * 0.76)), 2rem);
}
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c :is(.blog-2-col, .blog-3-col) .blog-entry-list .weblet_blog-entry-heading{
  margin:0 0 .85rem;
  line-height:1.2;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}

/* Meta: one line of date/author, one line of categories (a long category list
   ellipsises instead of wrapping to four lines). No photo layout here: the
   author photo is switched off in the CMS block (2026-09-24), and mRP's own
   float handles it if it is ever switched back on. */
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c :is(.blog-2-col, .blog-3-col) .blog-entry-list .weblet_blog-entry-info{
  margin:0 0 1rem;
  font-size:.75rem;
  line-height:1.4;
  letter-spacing:.02em;
  /* mRP's share-button colour hooks: quiet outline icons instead of grey tiles */
  --blog-share-color:transparent;
  --blog-share-text-color:var(--cj-muted);
}
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c :is(.blog-2-col, .blog-3-col) .blog-entry-list :is(.weblet_blog-entry-author-section, .weblet_blog-entry-labels-section){
  margin:0 0 .3rem;
  line-height:1.4;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c :is(.blog-2-col, .blog-3-col) .blog-entry-list .weblet_blog-entry-share-section{
  margin:.1rem 0 0 -6px;
  gap:.15rem;
}
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c :is(.blog-2-col, .blog-3-col) .blog-entry-list .weblet_blog-entry-share-section a{
  transition:color .2s var(--cj-ease);
}
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c :is(.blog-2-col, .blog-3-col) .blog-entry-list .weblet_blog-entry-share-section a:hover{
  color:var(--cj-accent);
  fill:var(--cj-accent);
}

/* Excerpt: mRP clamps it with a mask driven by --max-height / --mask-height and
   sizes the text from --p-font-size (behind its own !important). Setting the
   variables is the whole fix: about four lines at body size, short fade. */
/* .blog-mask and .blog-N-col are on the SAME container element, hence no space. */
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c .blog-container:is(.blog-2-col, .blog-3-col).blog-mask .blog-entry-list .weblet_blog-entry-text{
  --p-font-size:1rem;
  --max-height:6.8rem;
  --mask-height:1.7rem;
  margin:0;
}

/* Button sits at the bottom of its track, so every "Read more" in a row aligns. */
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c :is(.blog-2-col, .blog-3-col) .blog-entry-list .weblet_blog-entry-full-link{
  margin:0;
  padding-top:1.25rem;
  align-self:end;
}

/* Empty list (a category with nothing published yet) */
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c .blog-container .weblet_blog-no-entries{
  margin:1rem 0 0;
  font-family:var(--cj-display);
  font-size:var(--cj-h5);
  font-weight:600;
  color:var(--cj-primary);
}

/* ── 12. Filter bar (nav along the top: Blogs · Posts by date · Categories) ─ */
/* When the CMS puts the navigation on top (.blog-nav-top), each section is a
   hover dropdown. mRP's heading is a 24px-tall box with 10px left padding and
   its caret positioned 24px OUTSIDE the box, so it collides with the next one.
   Rebuilt as three equal controls with the chevron inside. (0,5,1) clears
   mRP's .blog-200c .blog-container.blog-nav-top … (0,4,0). */
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c .blog-container.blog-nav-top .weblet_blog-navigation-sa{
  gap:.6rem;
  align-items:stretch;
}
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c .blog-container.blog-nav-top .weblet_blog-navigation-sa-heading{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin:0;
  padding:.6rem .9rem .6rem 1rem;
  border:1px solid var(--cj-rule);
  border-radius:2px;
  background:var(--cj-white);
  font-family:var(--cj-body);
  font-size:.72rem;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cj-primary);
  cursor:pointer;
  white-space:nowrap;
  transition:border-color .2s var(--cj-ease), color .2s var(--cj-ease);
}
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c .blog-container.blog-nav-top .weblet_blog-navigation-sa-heading::after{
  content:"";
  position:static;
  flex:none;
  width:.42rem;
  height:.42rem;
  margin:-.2rem 0 0 auto;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform .2s var(--cj-ease);
}
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c .blog-container.blog-nav-top .weblet_blog-navigation-sa-section:hover .weblet_blog-navigation-sa-heading{
  border-color:var(--cj-accent-soft);
  color:var(--cj-accent);
}
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c .blog-container.blog-nav-top .weblet_blog-navigation-sa-section:hover .weblet_blog-navigation-sa-heading::after{
  transform:translateY(.15rem) rotate(225deg);
}
/* The open list. No margin above it: the menu opens on :hover, so any gap
   between heading and list would close it as the pointer crosses. */
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c .blog-container.blog-nav-top .weblet_blog-navigation-sa-items{
  width:300px;
  margin:0;
  padding:.4rem 0;
  border:1px solid var(--cj-rule);
  border-radius:2px;
  background:var(--cj-white);
  box-shadow:0 14px 34px rgba(28,35,33,.12);
  z-index:20;
}
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c .blog-container.blog-nav-top .weblet_blog-navigation-sa-items .weblet_blog-navigation-sa-item{
  margin:0;
}
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c .blog-container.blog-nav-top .weblet_blog-navigation-sa-items a{
  padding:.5rem 1rem;
  border:0;
  font-family:var(--cj-body);
  font-size:.875rem;
  line-height:1.4;
  color:var(--cj-text);
  text-decoration:none;
}
body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c .blog-container.blog-nav-top .weblet_blog-navigation-sa-items a:hover{
  background:var(--cj-bg);
  color:var(--cj-accent);
}

/* Phones: mRP stacks the three controls as full-width boxes (flex column).
   Three equal columns instead; the open list spans the row (mRP drops the
   section's positioning at this width, so the list anchors to the nav). */
@media (max-width:45rem){
  /* Three equal columns; a label may wrap to two lines ("Posts by / date")
     rather than push the third control onto its own row. */
  body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c .blog-container.blog-nav-top .weblet_blog-navigation-sa{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:.4rem;
  }
  body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c .blog-container.blog-nav-top .weblet_blog-navigation-sa-heading{
    grid-column:auto;
    height:100%;
    min-height:44px;
    padding:.5rem .6rem;
    gap:.35rem;
    font-size:.66rem;
    letter-spacing:.08em;
    line-height:1.25;
    white-space:normal;
  }
  body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c .blog-container.blog-nav-top .weblet_blog-navigation-sa-items{
    width:100%;
    left:0;
    right:0;
    max-height:60vh;
  }
  body:is(.blog, .market-watch, .buyer-tips, .seller-tips, .community-guides) .blog-200c :is(.blog-2-col, .blog-3-col) .blog-entry-list{
    row-gap:3rem;
  }
}