@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap');

/* ══════════════════════════════════════════════════════════════════
   THE JILTED RECRUITER — Additional CSS v6
   Full replacement for v5. Select all, delete, paste this.

   THE FIX IN THIS VERSION:
   Related posts were missing on nine of ten posts. Cause was the
   Jetpack sharing rule in section 5d. Jetpack wraps the share buttons
   AND related posts in one container:

     <div id="jp-post-flair" class="sharedaddy sd-sharing-enabled">
       <div class="sharedaddy">…share buttons…</div>
       <div id="jp-relatedposts">…related posts…</div>
     </div>

   The old rule hid .sharedaddy, .sd-sharing-enabled and #jp-post-flair.
   That wrapper matches all three, so related posts went down with the
   share buttons. Post 3355 was the exception because Jetpack rendered
   the two as siblings there rather than nested. See section 5f.

   Also in v6:
   · Three duplicate related-posts blocks at the end of v5 removed and
     folded into section 8.
   · Related-post cards restyled: raised on #0E1B22, soft rounded
     corners, layered shadow, quieter DM Sans titles.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --jr-navy:     #010D13;   /* page background            */
  --jr-surface:  #0A1A22;   /* quotes, nav bar, subscribe */
  --jr-card:     #0E1B22;   /* raised related-post cards  */
  --jr-cream:    #F1DEC9;   /* headlines, strong text     */
  --jr-body:     rgba(241,222,201,.78);
  --jr-dim:      rgba(241,222,201,.42);
  --jr-gold:     #DE9230;
  --jr-gold-lit: #E8A94F;   /* hover only                 */
  --jr-teal:     #5FA6AE;   /* lifted: brand teal too dark on navy */
  --jr-coral:    #E4493A;   /* red accent — rules, hairlines */
  --jr-teal-line: rgba(95,166,174,.55);
  --jr-hair:     rgba(222,146,48,.20);
  --jr-field:    rgba(241,222,201,.35);  /* form field borders */
  --jr-sans:     'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --jr-display:  'Bebas Neue', 'Arial Narrow', sans-serif;

  --jr-related-max: 1800px;
  --jr-related-gutter: 2rem;
}

/* ── 1. PAGE SHELL ────────────────────────────────────────────── */
html, body,
.site, .site-content, #page, #content, #primary, main,
.wp-site-blocks {
  background-color: var(--jr-navy) !important;
}
body {
  font-family: var(--jr-sans) !important;
  color: var(--jr-body) !important;
  line-height: 1.75 !important;
}

a:focus-visible { outline: 2px solid var(--jr-gold) !important; outline-offset: 3px !important; }

/* NOTE: overflow-x lives in section 13, set to clip. */

/* ── 2. HEADER + NAV ──────────────────────────────────────────────
   Every rule that lays out the menu is scoped with :not(.sub-menu)
   and a > child combinator. Without that, these same rules hit
   ul.sub-menu and force the Blog dropdown open as a full-width panel.
   Leave the :not(.sub-menu) in place.
   ──────────────────────────────────────────────────────────────── */
.site-header img, .header-image img, #masthead img {
  display: block !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

.main-navigation, .site-header nav, nav.nav-menu {
  background-color: var(--jr-surface) !important;
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 0 1.5rem !important;
  border-bottom: none !important;
  position: relative !important;
  overflow: visible !important;
}

.main-navigation ul:not(.sub-menu),
.nav-menu:not(.sub-menu),
.menu:not(.sub-menu) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
.main-navigation ul:not(.sub-menu) > li,
.nav-menu:not(.sub-menu) > li,
.menu:not(.sub-menu) > li {
  display: inline-flex !important;
  align-items: center !important;
  float: none !important;
  position: relative !important;
}
.main-navigation ul:not(.sub-menu) > li + li::before,
.nav-menu:not(.sub-menu) > li + li::before {
  content: '·' !important;
  color: var(--jr-dim) !important;
  padding: 0 .25rem !important;
}
.main-navigation a, .nav-menu a, .menu-item a {
  font-family: var(--jr-sans) !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--jr-cream) !important;
  text-decoration: none !important;
  padding: .85rem .65rem !important;
  white-space: nowrap !important;
}
.main-navigation a:hover, .nav-menu a:hover { color: var(--jr-gold-lit) !important; }

/* Toggle button is off on desktop. Section 13 turns it back on. */
.menu-toggle, button.menu-toggle, .main-navigation button {
  display: none !important;
}

/* ── 2b. BLOG DROPDOWN ────────────────────────────────────────────
   IF THE DROPDOWN STOPS APPEARING: check that nothing has put
   overflow:hidden on .site-header, #masthead or .main-navigation.
   The panel is absolutely positioned below the nav bar, so a
   clipping ancestor cuts it off.
   ──────────────────────────────────────────────────────────────── */
.main-navigation .sub-menu,
.main-navigation ul ul {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 99999 !important;
  width: 250px !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: .35rem 0 !important;
  background: var(--jr-navy) !important;
  border: 1px solid var(--jr-hair) !important;
  border-top: 3px solid var(--jr-gold) !important;
  box-shadow: none !important;
  text-align: left !important;
}

.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu,
.main-navigation li.focus > .sub-menu {
  display: block !important;
}

.main-navigation .sub-menu li {
  display: block !important;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  position: relative !important;
}
.main-navigation .sub-menu li::before,
.main-navigation .sub-menu li::after { content: none !important; display: none !important; }

.main-navigation .sub-menu a {
  display: block !important;
  width: 100% !important;
  padding: .6rem 1.1rem !important;
  font-family: var(--jr-sans) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--jr-body) !important;
  white-space: normal !important;
}
.main-navigation .sub-menu a:hover {
  color: var(--jr-gold) !important;
  background: rgba(222,146,48,.08) !important;
}
.main-navigation .sub-menu .current-menu-item > a { color: var(--jr-gold) !important; }

/* Teal caret so Blog reads as openable */
.main-navigation li.menu-item-has-children > a::after {
  content: ' \25BE' !important;
  color: var(--jr-teal) !important;
  font-size: .8em !important;
}

/* ── 3. BLOG INDEX + ARCHIVES ─────────────────────────────────── */
.blog #secondary, .archive #secondary,
.blog .sidebar, .archive .sidebar,
.blog .widget-area, .archive .widget-area { display: none !important; }

.blog #primary, .archive #primary,
.blog .content-area, .archive .content-area,
.blog .site-main, .archive .site-main {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

/* Blog/archive hero: full-bleed band built from the theme's own title */
.blog .page-title, .archive .page-title {
  font-family: var(--jr-display) !important;
  font-size: clamp(2.8rem, 6.5vw, 5rem) !important;
  line-height: .95 !important;
  letter-spacing: .03em !important;
  color: var(--jr-cream) !important;
  text-align: left !important;
  text-transform: none !important;
  border-bottom: none !important;

  position: relative;
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 0 0 calc(50% - 50vw) !important;
  padding: 5rem max(2rem, calc(50vw - 480px)) 0 !important;
  background: var(--jr-surface) !important;
}

/* The standfirst under "Blog". NOTE: injected by CSS, so invisible to
   search engines and screen readers. Better long term as real text. */
.blog .page-title::after {
  content: "Hiring truth for the displaced professional. How ATS systems, interview panels, and salary screens actually work \2014 written by someone who ran them for 15+ years, then job searched against them.";
  display: block;
  max-width: 640px;
  margin-top: 1.5rem;
  padding-bottom: 4rem;
  border-bottom: 3px solid var(--jr-gold);
  font-family: var(--jr-sans);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0;
  color: var(--jr-body);
  text-transform: none;
}

/* Description text on a category or tag archive, if one is set */
.category .archive-description, .tag .archive-description,
.category .taxonomy-description, .tag .taxonomy-description {
  font-family: var(--jr-sans) !important;
  font-size: 1rem !important;
  font-style: italic !important;
  color: var(--jr-body) !important;
  line-height: 1.75 !important;
  max-width: 620px !important;
  margin-top: .75rem !important;
}

.blog article, .archive article, .category article, .tag article {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--jr-hair) !important;
  padding: 3rem 0 !important;
  margin: 0 auto !important;
  max-width: 820px !important;
}

/* Featured image on index and archive views. Whole 1200x630 card,
   not a slice — a fixed height cropped the wordmark. */
.blog .post-thumbnail img, .archive .post-thumbnail img,
.category .post-thumbnail img {
  width: 100% !important;
  display: block !important;
  margin-bottom: 1.25rem !important;
  border-top: 3px solid var(--jr-gold) !important;
  height: auto !important;
  aspect-ratio: 1200 / 630 !important;
  object-fit: contain !important;
}

.blog .entry-title, .archive .entry-title,
.category .entry-title, .tag .entry-title {
  font-family: var(--jr-display) !important;
  font-size: clamp(1.7rem, 3.2vw, 2.3rem) !important;
  line-height: 1.08 !important;
  letter-spacing: .03em !important;
  margin: .25rem 0 .75rem !important;
}
.blog .entry-title a, .archive .entry-title a,
.category .entry-title a, .tag .entry-title a {
  color: var(--jr-cream) !important;
  text-decoration: none !important;
}
.blog .entry-title a:hover, .archive .entry-title a:hover { color: var(--jr-gold) !important; }

.blog .entry-summary p, .archive .entry-summary p,
.category .entry-summary p, .tag .entry-summary p {
  font-family: var(--jr-sans) !important;
  font-size: 1rem !important;
  color: var(--jr-body) !important;
  line-height: 1.8 !important;
  max-width: 66ch !important;
  margin-bottom: 1.25rem !important;
}

.blog .more-link, .archive .more-link,
.category .more-link, .tag .more-link {
  display: inline-block !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--jr-gold) !important;
  text-decoration: none !important;
  border-bottom: 2px solid var(--jr-hair) !important;
  padding-bottom: 2px !important;
}
.blog .more-link:hover, .archive .more-link:hover {
  color: var(--jr-gold-lit) !important;
  border-color: var(--jr-gold-lit) !important;
}

.blog .comments-link, .archive .comments-link,
.category .comments-link, .tag .comments-link { display: none !important; }

/* ── 4. CATEGORY / TAG LABELS ─────────────────────────────────── */
.blog .cat-links a, .archive .cat-links a,
.category .cat-links a, .tag .cat-links a {
  border: 1px solid var(--jr-teal-line) !important;
  padding: .2rem .55rem !important;
}

.cat-links, .cat-links a {
  font-family: var(--jr-sans) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--jr-teal) !important;
  text-decoration: none !important;
  display: inline-block !important;
  margin-bottom: .5rem !important;
}
.cat-links a:hover { color: var(--jr-gold-lit) !important; }

.entry-meta, .posted-on, .byline, .entry-meta a {
  font-family: var(--jr-sans) !important;
  font-size: .75rem !important;
  color: var(--jr-dim) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

.tags-links, .tags-links a {
  font-size: .7rem !important;
  color: var(--jr-dim) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  text-decoration: none !important;
}
.tags-links a:hover { color: var(--jr-teal) !important; }

/* ── 5. SINGLE POST ───────────────────────────────────────────── */
.single .post-thumbnail img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 380px !important;
  object-fit: cover !important;
  display: block !important;
  border-top: 4px solid var(--jr-gold) !important;
  margin: 0 !important;
}

/* NOTE: no universal `*` selector here — that is what was
   overriding every style on anything pasted into a post. */
.single .entry-content {
  max-width: 780px !important;
  margin: 0 auto !important;
  padding: 0 0 3rem !important;
  font-family: var(--jr-sans) !important;
  font-size: 1.06rem !important;
  line-height: 1.85 !important;
  color: var(--jr-body) !important;
}

.single .entry-content p:not([style]) {
  font-size: 1.06rem !important;
  line-height: 1.85 !important;
  color: var(--jr-body) !important;
  margin-bottom: 1.5rem !important;
}

.single .entry-content h2:not([style]) {
  font-family: var(--jr-display) !important;
  font-weight: 400 !important;
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
  letter-spacing: .05em !important;
  line-height: 1.1 !important;
  color: var(--jr-cream) !important;
  margin: 2.75rem 0 1rem !important;
  border-left: 5px solid var(--jr-gold) !important;
  padding-left: 1rem !important;
}

.single .entry-content h3:not([style]) {
  font-family: var(--jr-sans) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: var(--jr-gold) !important;
  margin: 2rem 0 .75rem !important;
}

.single .entry-content strong:not([style]),
.single .entry-content b:not([style]) { color: var(--jr-cream) !important; font-weight: 700 !important; }

.single .entry-content em:not([style]),
.single .entry-content i:not([style]) { color: var(--jr-teal) !important; }

.single .entry-content a:not([style]) {
  color: var(--jr-gold-lit) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
.single .entry-content a:hover { color: var(--jr-teal) !important; }

.single .entry-content ul:not([style]),
.single .entry-content ol:not([style]) {
  color: var(--jr-body) !important;
  padding-left: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  line-height: 1.85 !important;
}
.single .entry-content li:not([style]) { margin-bottom: .5rem !important; }
.single .entry-content ul li::marker { color: var(--jr-gold) !important; }
.single .entry-content ol li::marker { color: var(--jr-teal) !important; }

/* Quote block */
.single .entry-content blockquote:not([style]),
.single .entry-content .wp-block-quote:not([style]) {
  border-left: 4px solid var(--jr-gold) !important;
  background: var(--jr-surface) !important;
  padding: 1.5rem 1.75rem !important;
  margin: 2.25rem 0 !important;
  border-radius: 0 !important;
}
.single .entry-content blockquote p:not([style]) {
  color: var(--jr-cream) !important;
  font-style: normal !important;
  margin: 0 0 .75rem !important;
}
.single .entry-content blockquote p:last-child { margin-bottom: 0 !important; }
.single .entry-content blockquote:not([style]) cite,
.page .entry-content blockquote:not([style]) cite {
  color: var(--jr-teal) !important;
  font-style: normal !important;
}

/* Section break — coral, short. Sparing by design: at #E4493A the
   contrast on navy is too low to carry body text. */
.single .entry-content hr:not([style]),
.page .entry-content hr:not([style]) {
  border: none !important;
  border-top: 3px solid var(--jr-coral) !important;
  width: 64px !important;
  margin: 2.5rem 0 !important;
}

/* Buttons — CTA at the end of each post */
.single .entry-content .wp-block-button__link {
  background: var(--jr-gold) !important;
  color: var(--jr-navy) !important;
  font-family: var(--jr-sans) !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  font-size: .85rem !important;
  border-radius: 0 !important;
  padding: .85rem 1.5rem !important;
  text-decoration: none !important;
}
.single .entry-content .is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--jr-cream) !important;
  border: 2px solid var(--jr-hair) !important;
}

/* ── 5b. LEAVE HAND-STYLED HTML ALONE ─────────────────────────────
   Every rule in section 5 uses :not([style]). Normal WordPress blocks
   get the styling above; any element carrying its own inline style
   attribute is skipped entirely. That is what lets a pasted Custom
   HTML block keep its own colors instead of being flattened.
   ──────────────────────────────────────────────────────────────── */

/* ── 5c. THEME HEADER, SUPPRESSED ─────────────────────────────────
   Posts carry their own header: gold category chip, headline,
   standfirst, byline. The theme ALSO prints an .entry-header, which
   would give you two of each.

   KEEP FILLING THE TITLE FIELD. It is hidden here, not deleted, and
   it still drives the URL, the blog index card, the browser tab, and
   the search result. Only its on-page printing is suppressed.
   ──────────────────────────────────────────────────────────────── */

.single .entry-header { display: none !important; }

.single .site-main, .single .content-area,
.single #primary, .single .entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* WordPress leaves empty paragraphs behind after a paste. Invisible,
   but each still occupies a line-height. */
.single .entry-content p:empty,
.single .entry-content > br:first-child { display: none !important; }

/* ── 5d. STATIC PAGES ─────────────────────────────────────────────
   Mirrors the post-body rules onto .page.
   If some page needs the theme title back, swap the selector below
   for a page-specific one — body.page-id-123 .entry-header — which
   you can read off the edit URL for that page.
   ──────────────────────────────────────────────────────────────── */

.page .entry-header { display: none !important; }

.page .site-main, .page .content-area,
.page #primary, .page .entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.page .entry-content {
  max-width: 780px !important;
  margin: 0 auto !important;
  padding: 0 0 3rem !important;
  font-family: var(--jr-sans) !important;
  font-size: 1.06rem !important;
  line-height: 1.85 !important;
  color: var(--jr-body) !important;
}

.page .entry-content p:not([style]) {
  font-size: 1.06rem !important;
  line-height: 1.85 !important;
  color: var(--jr-body) !important;
  margin-bottom: 1.5rem !important;
}

.page .entry-content h1:not([style]),
.page .entry-content h2:not([style]) {
  font-family: var(--jr-display) !important;
  font-weight: 400 !important;
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
  letter-spacing: .05em !important;
  line-height: 1.1 !important;
  color: var(--jr-cream) !important;
  margin: 2.75rem 0 1rem !important;
  border-left: 5px solid var(--jr-gold) !important;
  padding-left: 1rem !important;
}

.page .entry-content h3:not([style]) {
  font-family: var(--jr-sans) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: var(--jr-gold) !important;
  margin: 2rem 0 .75rem !important;
  border-left: 3px solid var(--jr-teal) !important;
  padding-left: .75rem !important;
}

.page .entry-content strong:not([style]) { color: var(--jr-cream) !important; font-weight: 700 !important; }
.page .entry-content em:not([style])     { color: var(--jr-teal) !important; }

.page .entry-content a:not([style]) {
  color: var(--jr-gold-lit) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.page .entry-content ul:not([style]),
.page .entry-content ol:not([style]) {
  color: var(--jr-body) !important;
  padding-left: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}
.page .entry-content ul li::marker { color: var(--jr-gold) !important; }
.page .entry-content ol li::marker { color: var(--jr-teal) !important; }

.page .entry-content blockquote:not([style]) {
  border-left: 4px solid var(--jr-gold) !important;
  background: var(--jr-surface) !important;
  padding: 1.5rem 1.75rem !important;
  margin: 2.25rem 0 !important;
  border-radius: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   5f. JETPACK SHARING — READ THIS BEFORE EDITING

   This block is why related posts vanished on nine of ten posts.

   Jetpack outputs a single wrapper containing BOTH the share buttons
   and the related posts:

     <div id="jp-post-flair" class="sharedaddy sd-sharing-enabled">
       <div class="sharedaddy sd-sharing-enabled">…buttons…</div>
       <div id="jp-relatedposts">…related posts…</div>
     </div>

   The wrapper matches #jp-post-flair, .sharedaddy AND
   .sd-sharing-enabled. Hiding any of those hides the related posts
   sitting inside it.

   So: hide the INNER sharing UI only, then force the wrapper and the
   related posts explicitly back to visible.

   DO NOT add .sharedaddy, .sd-sharing-enabled or #jp-post-flair to a
   display:none rule anywhere in this file.

   The visible share row on your posts is the WPCode jr-share block,
   not this. Hiding Jetpack's buttons costs you nothing.
   ══════════════════════════════════════════════════════════════════ */

.sd-content,
.sd-block,
.sd-title,
.sd-sharing,
.sharedaddy h3.sd-title,
.post-likes-widget-placeholder,
.post-likes-widget,
.sd-like {
  display: none !important;
}

#jp-post-flair,
#jp-relatedposts,
.jp-relatedposts {
  display: block !important;
}

/* ── 6. PREVIOUS / NEXT POST NAVIGATION ───────────────────────────
   Dara's markup:
     <nav class="navigation post-navigation">
       <div class="nav-links">
         <div class="nav-previous">
           <a><span class="title">Previous post</span>Post headline</a>

   The label is REAL TEXT inside the link. It does not need
   generating — only styling, and display:block so the headline that
   follows it drops onto its own line.

   DO NOT ADD A ::before HERE. v4 generated "Previous post" with one,
   on top of the span Dara already prints. That was the doubled label.
   ──────────────────────────────────────────────────────────────── */

.single .post-navigation,
.single .navigation.post-navigation {
  max-width: 780px !important;
  margin: 3rem auto !important;
  padding: 1.75rem 0 !important;
  border-top: 1px solid var(--jr-hair) !important;
  border-bottom: 1px solid var(--jr-hair) !important;
  background: transparent !important;
}

.single .post-navigation .nav-links {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 1.5rem !important;
  border: none !important;
  padding: 0 !important;
}

.single .nav-links .nav-previous,
.single .nav-links .nav-next {
  flex: 1 1 40% !important;
  min-width: 220px !important;
}
.single .nav-links .nav-next { text-align: right !important; }

/* Belt and braces: kill any generated content inside the nav, so a
   stray ::before pasted in later cannot bring the duplicate back. */
.single .post-navigation *::before,
.single .post-navigation *::after { content: none !important; }

/* Dara's own label */
.single .post-navigation .nav-links .title {
  display: block !important;
  font-family: var(--jr-sans) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--jr-dim) !important;
  margin-bottom: .4rem !important;
}

/* The link itself — the post's headline, in the display face */
.single .nav-links .nav-previous a,
.single .nav-links .nav-next a {
  font-family: var(--jr-display) !important;
  font-weight: 400 !important;
  font-size: 1.15rem !important;
  line-height: 1.2 !important;
  letter-spacing: .03em !important;
  text-transform: none !important;
  color: var(--jr-cream) !important;
  text-decoration: none !important;
  display: inline-block !important;
}
.single .nav-links .nav-previous a:hover,
.single .nav-links .nav-next a:hover { color: var(--jr-gold) !important; }

@media (max-width: 600px) {
  .single .post-navigation .nav-links { flex-direction: column !important; }
  .single .nav-links .nav-next { text-align: left !important; }
}

/* ── 7. COMMENTS ──────────────────────────────────────────────── */
.single #comments, .single .comments-area {
  border-top: 1px solid var(--jr-hair) !important;
  padding-top: 2rem !important;
  background: transparent !important;
}
.single .comments-title, .single #reply-title {
  font-family: var(--jr-display) !important;
  font-weight: 400 !important;
  font-size: 1.6rem !important;
  letter-spacing: .06em !important;
  color: var(--jr-cream) !important;
}

/* Comments are closed on every post by design. No need to announce it. */
.single .no-comments { display: none !important; }

/* ── 8. JETPACK: RELATED POSTS + SUBSCRIBE ────────────────────── */
.jp-relatedposts, #jp-relatedposts {
  background: var(--jr-navy) !important;
  border-top: 1px solid var(--jr-hair) !important;
  padding: 2rem !important;
  margin-top: 2rem !important;
}

/* FULL-BLEED ON A SINGLE POST. Jetpack injects this at the end of
   .entry-content, capped at 780px. These margins pull it back out. */
.single .jp-relatedposts,
.single #jp-relatedposts {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 3rem !important;
  padding: 3rem var(--jr-related-gutter) 3.5rem !important;
  background: var(--jr-navy) !important;
  border-top: 3px solid var(--jr-gold) !important;
  box-sizing: border-box !important;
}

.single .jp-relatedposts-headline,
.single .jp-relatedposts-items,
.single .jp-relatedposts-items-visual {
  max-width: var(--jr-related-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.single .jp-relatedposts-headline { margin-bottom: 1.5rem !important; }

/* Jetpack wraps "Related" in <em>. Without the .entry-content prefix
   on the em rule in section 5, that rule would paint this teal. */
.jp-relatedposts-headline,
.jp-relatedposts-headline em,
.single .entry-content .jp-relatedposts-headline,
.single .entry-content .jp-relatedposts-headline em {
  font-family: var(--jr-display) !important;
  font-size: 1.4rem !important;
  font-style: normal !important;
  letter-spacing: .08em !important;
  color: var(--jr-cream) !important;
  margin-bottom: 1.25rem !important;
}

.jp-relatedposts-items,
.jp-relatedposts-items-visual {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 1.75rem !important;
  margin: 0 !important;
}

/* Raised cards. Separation comes from the value gap against the navy
   band, not from a border. Three stacked shadows rather than one — a
   single large blur reads as a smudge on near-black. The 1px cream
   line on the top edge is what actually sells the lift. */
.jp-relatedposts-items .jp-relatedposts-post,
.jp-relatedposts-items-visual .jp-relatedposts-post {
  background: var(--jr-card) !important;
  border: none !important;
  border-top: 1px solid rgba(241,222,201,.10) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,.6),
    0 8px 16px rgba(0,0,0,.55),
    0 20px 40px rgba(0,0,0,.45) !important;
  padding: 0 0 1.25rem !important;
  margin: 0 !important;
  width: auto !important;
  float: none !important;
  opacity: 1 !important;
}

.jp-relatedposts-items .jp-relatedposts-post-img,
.jp-relatedposts-post-aoverlay {
  display: block !important;
  width: 100% !important;
  margin: 0 0 .85rem !important;
}
.jp-relatedposts-items .jp-relatedposts-post-img img,
.jp-relatedposts-post-img img {
  width: 100% !important;
  height: 150px !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
}

/* On a single post the cards are wide enough to show the featured
   image whole. The 150px crop above chopped the wordmark off. */
.single .jp-relatedposts-items .jp-relatedposts-post-img img,
.single .jp-relatedposts-post-img img {
  height: auto !important;
  aspect-ratio: 1200 / 630 !important;
  object-fit: contain !important;
}

.jp-relatedposts-items .jp-relatedposts-post-title,
.jp-relatedposts-items .jp-relatedposts-post-date,
.jp-relatedposts-items .jp-relatedposts-post-context,
.jp-relatedposts-items .jp-relatedposts-post-excerpt {
  padding: 0 1.25rem !important;
  margin: 0 0 .5rem !important;
}

/* Card titles are quiet — the headlines inside the featured images
   are already doing the shouting. */
.jp-relatedposts-post-title a,
.single .jp-relatedposts-post-title a {
  font-family: var(--jr-sans) !important;
  font-weight: 500 !important;
  font-size: 1.02rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--jr-cream) !important;
  text-decoration: none !important;
  border-bottom: none !important;
  line-height: 1.45 !important;
}
.jp-relatedposts-post-title a:hover {
  color: var(--jr-gold) !important;
  text-decoration: none !important;
}

.single .jp-relatedposts-items .jp-relatedposts-post-title {
  padding: .35rem 1.25rem .75rem !important;
}
.single .jp-relatedposts-post-title a { font-size: 1.08rem !important; }

.jp-relatedposts-post-date, .jp-relatedposts-post-context {
  font-size: .68rem !important;
  color: var(--jr-dim) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}
.jp-relatedposts-post-excerpt {
  font-size: .85rem !important;
  color: var(--jr-body) !important;
  line-height: 1.7 !important;
}

.jetpack_subscription_widget, .wp-block-jetpack-subscriptions {
  background: var(--jr-surface) !important;
  border-top: 3px solid var(--jr-gold) !important;
  padding: 2rem !important;
  margin-top: 2rem !important;
}
.jetpack_subscription_widget h2,
.wp-block-jetpack-subscriptions h2 {
  font-family: var(--jr-display) !important;
  font-weight: 400 !important;
  font-size: 1.4rem !important;
  letter-spacing: .08em !important;
  color: var(--jr-cream) !important;
}
.jetpack_subscription_widget p,
.wp-block-jetpack-subscriptions p {
  font-size: .92rem !important;
  color: var(--jr-body) !important;
}
.jetpack_subscription_widget input[type="email"],
.wp-block-jetpack-subscriptions input[type="email"] {
  background: var(--jr-navy) !important;
  border: 1px solid var(--jr-hair) !important;
  color: var(--jr-cream) !important;
  font-family: var(--jr-sans) !important;
  padding: .6rem 1rem !important;
}
.jetpack_subscription_widget input[type="submit"],
.wp-block-jetpack-subscriptions input[type="submit"] {
  background: var(--jr-gold) !important;
  border: none !important;
  color: var(--jr-navy) !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: .6rem 1.5rem !important;
  cursor: pointer !important;
}
.jetpack_subscription_widget input[type="submit"]:hover { background: var(--jr-gold-lit) !important; }

/* ── 9. FOOTER ────────────────────────────────────────────────── */
.site-footer, #colophon {
  background-color: var(--jr-navy) !important;
  border-top: 1px solid var(--jr-hair) !important;
  padding: 2rem !important;
  text-align: center !important;
}
.site-footer .site-info, .site-footer p,
#colophon .site-info, #colophon p {
  font-size: .78rem !important;
  color: var(--jr-dim) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}
.site-footer a, #colophon a { color: var(--jr-gold) !important; text-decoration: none !important; }
.site-footer a:hover, #colophon a:hover { color: var(--jr-gold-lit) !important; }

/* ── 9b. FOOTER MENU ──────────────────────────────────────────────
   Assign a menu to the footer location and it picks this up.
   ──────────────────────────────────────────────────────────────── */
.site-footer nav, #colophon nav,
.footer-navigation, .site-footer .menu-footer-container {
  background: transparent !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 0 1.5rem !important;
  border: none !important;
}

.site-footer nav ul, #colophon nav ul,
.site-footer .menu, #colophon .menu,
.footer-navigation ul {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  list-style: none !important;
  margin: 0 auto !important;
  padding: 0 0 1.25rem !important;
  max-width: 820px !important;
  border-bottom: 1px solid var(--jr-hair) !important;
}

.site-footer nav ul li, #colophon nav ul li,
.site-footer .menu li, #colophon .menu li,
.footer-navigation ul li {
  display: inline-flex !important;
  align-items: center !important;
  float: none !important;
  margin: 0 !important;
}

.site-footer nav ul li + li::before,
#colophon nav ul li + li::before,
.site-footer .menu li + li::before,
.footer-navigation ul li + li::before {
  content: '\00B7' !important;
  color: var(--jr-dim) !important;
  padding: 0 .35rem !important;
  display: inline !important;
  font-size: 1rem !important;
}

.site-footer nav a, #colophon nav a,
.site-footer .menu a, #colophon .menu a,
.footer-navigation a {
  font-family: var(--jr-sans) !important;
  font-size: .74rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--jr-body) !important;
  text-decoration: none !important;
  padding: .5rem .7rem !important;
  white-space: nowrap !important;
}

.site-footer nav a:hover, #colophon nav a:hover,
.site-footer .menu a:hover, #colophon .menu a:hover { color: var(--jr-gold) !important; }

.site-footer .site-info, #colophon .site-info { padding-top: .25rem !important; }

@media (max-width: 600px) {
  .site-footer nav a, #colophon nav a,
  .site-footer .menu a, #colophon .menu a {
    font-size: .68rem !important;
    padding: .4rem .45rem !important;
    letter-spacing: .1em !important;
  }
  .site-footer nav ul li + li::before,
  .site-footer .menu li + li::before { padding: 0 .15rem !important; }
}
.site-info a[href*="wordpress.com"],
.site-info a[href*="wordpress.org"] { display: none !important; }

/* ── 10. PAGINATION ───────────────────────────────────────────────
   SCOPED. v4 targeted a bare .nav-links, which also matched the post
   navigation in section 6 and gave it a second border.
   ──────────────────────────────────────────────────────────────── */
.pagination,
.posts-navigation .nav-links,
.pagination .nav-links {
  text-align: center !important;
  padding: 2.5rem 0 !important;
  border-top: 1px solid var(--jr-hair) !important;
}
.page-numbers {
  font-size: .82rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--jr-body) !important;
  padding: .5rem 1rem !important;
  text-decoration: none !important;
}
.page-numbers.current {
  color: var(--jr-gold) !important;
  border-bottom: 2px solid var(--jr-gold) !important;
}
.page-numbers:hover { color: var(--jr-gold-lit) !important; }

/* ── 11. RESPONSIVE (content only — nav lives in section 13) ───── */
@media (max-width: 768px) {
  .single .entry-content { padding: 0 1.25rem 2.5rem !important; }
  .blog article, .archive article { padding: 2.25rem 1.25rem !important; }

  .single .jp-relatedposts,
  .single #jp-relatedposts { padding: 2.25rem 1.25rem 2.5rem !important; }
  .single .jp-relatedposts-items .jp-relatedposts-post-title {
    padding: .35rem 1rem .75rem !important;
  }
  .single .jp-relatedposts-post-title a { font-size: 1rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── 12. FULL-BLEED PAGE SECTION ──────────────────────────────────
   Wrapper id used on the Work With Me 1-1 page.
   ──────────────────────────────────────────────────────────────── */
#jilted-work {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

/* ── 13. MOBILE SAFETY + PHONE NAV ────────────────────────────── */

/* overflow-x:clip, unlike hidden, does not create a scroll container,
   so a 100vw child cannot widen the layout viewport. Without this a
   phone renders the desktop layout and no media query fires. */
html, body {
  max-width: 100% !important;
  overflow-x: clip !important;
}

img, video, iframe, embed, object {
  max-width: 100% !important;
  height: auto !important;
}

/* The header must stay overflow:visible — the Blog dropdown is
   absolutely positioned below the nav bar, and any clipping ancestor
   cuts it off. The banner is contained on an inner wrapper instead. */
.site-header, #masthead {
  max-width: 100% !important;
  overflow: visible !important;
}
.header-image, .site-header .header-image,
.site-branding, .site-header a[rel="home"] {
  max-width: 100% !important;
  overflow: hidden !important;
  display: block !important;
}

.main-navigation .sub-menu,
.main-navigation ul ul {
  max-width: calc(100vw - 2rem) !important;
}

.current-menu-item > a,
.current_page_item > a { color: var(--jr-gold) !important; }

/* ══ PHONE NAV: everything behind a MENU button ══
   Below 768px the menu collapses to a gold-outlined MENU button.
   The seven Blog categories stay hidden on phones.
   Open state matched two ways: the .toggled class most classic
   themes add, and the button's own aria-expanded attribute.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  .main-navigation, .site-header nav, nav.nav-menu {
    display: block !important;
    text-align: center !important;
    padding: .75rem 1rem !important;
  }

  .menu-toggle, button.menu-toggle {
    display: inline-block !important;
    width: auto !important;
    margin: 0 auto !important;
    background: transparent !important;
    border: 2px solid var(--jr-gold) !important;
    border-radius: 0 !important;
    color: var(--jr-gold) !important;
    font-family: var(--jr-sans) !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    padding: .6rem 1.5rem !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
  }

  .main-navigation ul:not(.sub-menu),
  .nav-menu:not(.sub-menu),
  .menu:not(.sub-menu) {
    display: none !important;
  }

  .main-navigation.toggled ul:not(.sub-menu),
  .main-navigation.toggled .nav-menu,
  .main-navigation:has(.menu-toggle[aria-expanded="true"]) ul:not(.sub-menu) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    row-gap: 0 !important;
    width: 100% !important;
    margin: .75rem 0 0 !important;
    padding: .5rem 0 0 !important;
    border-top: 1px solid var(--jr-hair) !important;
  }

  .main-navigation ul:not(.sub-menu) > li {
    width: 100% !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .main-navigation ul:not(.sub-menu) > li + li::before,
  .nav-menu:not(.sub-menu) > li + li::before { display: none !important; }

  .main-navigation ul:not(.sub-menu) > li > a {
    display: block !important;
    text-align: center !important;
    font-size: .78rem !important;
    letter-spacing: .12em !important;
    padding: .6rem .5rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }

  .main-navigation .sub-menu,
  .main-navigation ul ul { display: none !important; }
  .main-navigation li.menu-item-has-children > a::after { content: none !important; }
}

/* ── 14. FORM FIELDS ──────────────────────────────────────────────
   CONSOLIDATED. v4 carried six separate appended blocks here, two of
   which cancelled each other out: one drew a gradient chevron on
   <select>, a later one set background-image:none to remove it.
   Both gone. Jetpack draws its own chevron; we recolor it.
   ──────────────────────────────────────────────────────────────── */

/* Text inputs and textareas — transparent, white text */
.page .entry-content input[type="text"],
.page .entry-content input[type="email"],
.page .entry-content textarea,
.jr-form-zone input[type="text"],
.jr-form-zone input[type="email"],
.jr-form-zone textarea,
.jr-contact input[type="text"],
.jr-contact input[type="email"],
.jr-contact textarea {
  background-color: transparent !important;
  color: #FFFFFF !important;
  border: 1.5px solid var(--jr-field) !important;
  border-radius: 0 !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-family: var(--jr-sans) !important;
  padding: .85rem 1rem !important;
}

.page .entry-content input:focus,
.page .entry-content textarea:focus,
.page .entry-content select:focus,
.jr-form-zone input:focus,
.jr-form-zone textarea:focus,
.jr-contact input:focus,
.jr-contact textarea:focus,
select:focus,
select:focus-visible {
  border-color: var(--jr-gold) !important;
  outline: none !important;
  box-shadow: none !important;
}

.page .entry-content input::placeholder,
.page .entry-content textarea::placeholder,
.jr-form-zone input::placeholder,
.jr-contact input::placeholder,
.jr-contact textarea::placeholder {
  color: rgba(255,255,255,0.4) !important;
}

/* Submit buttons */
.page .entry-content input[type="submit"],
.page .entry-content button[type="submit"] {
  background: var(--jr-gold) !important;
  border: none !important;
  color: var(--jr-navy) !important;
  font-family: var(--jr-sans) !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: .85rem 1.5rem !important;
  border-radius: 0 !important;
  cursor: pointer !important;
}

/* Chrome autofill paints its own background over everything */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #FFFFFF !important;
  -webkit-box-shadow: 0 0 0 1000px var(--jr-navy) inset !important;
  caret-color: #FFFFFF !important;
}

/* Native <select>, where one still appears */
.page .entry-content select,
.jr-form-zone select,
.jr-contact select,
.contact-form select,
.wp-block-jetpack-contact-form select,
select.grunion-field {
  background-color: var(--jr-navy) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  border: 1.5px solid var(--jr-field) !important;
  border-radius: 0 !important;
  padding: .85rem 2.75rem .85rem 1rem !important;
  box-shadow: none !important;
  outline: none !important;
}
.page .entry-content select option,
.jr-contact select option,
.contact-form select option {
  background-color: var(--jr-navy) !important;
  color: #FFFFFF !important;
}

/* ── 14b. JETPACK CUSTOM DROPDOWN ─────────────────────────────────
   Jetpack replaces the native select with its own component: a
   toggle div plus a hidden select. Every rule targeting `select`
   misses it, which is why the white box persisted. The attribute
   selector and :has() catch it whatever the inner classes are called.
   ──────────────────────────────────────────────────────────────── */

[class*="jetpack-field-dropdown"],
.jetpack-field__input {
  background-color: var(--jr-navy) !important;
  color: #FFFFFF !important;
  border-color: var(--jr-field) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

.jetpack-field-dropdown__toggle,
.jetpack-field__input,
div:has(> .jetpack-field-dropdown__icon) {
  border: 1.5px solid var(--jr-field) !important;
  font-family: var(--jr-sans) !important;
  font-size: 17px !important;
  padding: .85rem 1rem !important;
}

.jetpack-field-dropdown__toggle:hover,
.jetpack-field-dropdown__toggle:focus,
.jetpack-field-dropdown__toggle:focus-visible,
.jetpack-field-dropdown__toggle[aria-expanded="true"],
.jetpack-field__input:focus {
  border-color: var(--jr-gold) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Jetpack's chevron, recolored to gold */
.jetpack-field-dropdown__icon { color: var(--jr-gold) !important; fill: var(--jr-gold) !important; }
.jetpack-field-dropdown__icon svg,
.jetpack-field-dropdown__icon svg path {
  fill: var(--jr-gold) !important;
  stroke: var(--jr-gold) !important;
}

/* The open list */
.jetpack-field-dropdown__list,
.jetpack-field-dropdown__options,
.jetpack-field-dropdown__popover {
  background: var(--jr-navy) !important;
  border: 1.5px solid var(--jr-field) !important;
  border-radius: 0 !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
.jetpack-field-dropdown__list li,
.jetpack-field-dropdown__option {
  background: var(--jr-navy) !important;
  color: #FFFFFF !important;
}
.jetpack-field-dropdown__list li:hover,
.jetpack-field-dropdown__option:hover,
.jetpack-field-dropdown__option[aria-selected="true"] {
  background: rgba(222,146,48,.12) !important;
  color: var(--jr-gold) !important;
}

/* Anything inside a Jetpack form field that still paints white */
.jetpack-field,
.jetpack-field div,
.jetpack-field span,
.jetpack-field [style*="background"] { background-color: transparent !important; }