/* =====================================================================
   WIRED FOR PURPOSE — Combined Additional CSS  (v4 · Operational Era)
   Paste this ENTIRE file into: Appearance → Customize → Additional CSS
   (replace the whole box contents with this).
   PREREQ: load fonts first via Appearance → Fonts:
           Libre Baskerville · IBM Plex Sans · IBM Plex Mono

   This version:
     • Operational (1958) era palette — Manila / Amber / Olive / Near-Black
     • Baskerville body, Plex Mono in-post headings
     • V1 institutional grammar: eyebrow, masthead strip, filed-meta,
       issued footer  (all pure CSS, no HTML pasting needed)
   =====================================================================

   ┌───────────────────────────────────────────────────────────────┐
   │ PART A — YOUR EXISTING CSS (kept as-is, runs first)             │
   └───────────────────────────────────────────────────────────────┘ */

.be-author-meta.be-author-email {
    display: none;
    visibility: hidden;
}
.author-bio-section { display: none; }

@media (max-width: 768px) {
  img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }
}

/* Stop quotes from floating */
.wp-block-quote,
blockquote {
  float: none !important;
  display: block;
  width: 100%;
  clear: both;
  margin: 1.2em 0;
}

/* 1) Force quotes to use the full line */
.entry-content blockquote,
.entry-content .wp-block-quote,
.wp-block-quote,
blockquote {
  width: 100% !important;
  max-width: none !important;
  display: block;
}


/* ┌───────────────────────────────────────────────────────────────┐
   │ PART B — OPERATIONAL-ERA SKIN + V1 GRAMMAR (runs after)        │
   │ Theme: Highway. All selectors confirmed against live source.   │
   └───────────────────────────────────────────────────────────────┘ */

/* ---------- 1. PALETTE (Operational era, 1958) ------------------- */
:root{
  --amber:#C8860A;        /* primary accent */
  --olive:#4A5240;        /* secondary accent + spine */
  --olive-mid:#636B56;    /* mid tone */
  --sage:#8C9678;         /* light field / muted */
  --manila:#C8B98A;       /* document ground (accents/strip) */
  --manila-lt:#EEE8D8;    /* page ground */
  --near-black:#1E201A;   /* type + dark surfaces */
  --rust:#8B3A0F;         /* warning / hover pop */
  --amber-dk:#8B4A08;     /* darker amber for button hover */
  --rule:#D8CFB4;         /* warm hairline */
}

/* ---------- 2. GLOBAL GROUND + TYPE ------------------------------ */
/* prevent horizontal scroll/rubber-banding from 100vw full-bleed
   elements (100vw includes the scrollbar width on some browsers).    */
html, body{ overflow-x:hidden !important; max-width:100%; }
body{
  background:var(--manila-lt) !important;
  color:var(--near-black);
  font-family:'Libre Baskerville', Georgia, serif;
  font-size:17px;
  line-height:1.8;
}
.site-content,
#content{ background:var(--manila-lt); }

/* signature: the persistent OLIVE spine — fixed to the viewport's
   left edge, above all theme layers, never clipped by containers.    */
body::before{
  content:"";
  position:fixed !important;
  top:0; left:0;
  /* end above iOS Safari's bottom toolbar using the safe-area inset,
     so the spine doesn't appear to run under Safari's chrome.         */
  height:100vh;                                       /* fallback */
  height:calc(100dvh - env(safe-area-inset-bottom));  /* iOS-aware */
  width:8px;
  background:var(--olive);
  z-index:2147483647;   /* max — sits above header, admin bar shift below */
  pointer-events:none;
}
.admin-bar body::before{ top:32px; }
@media screen and (max-width:782px){ .admin-bar body::before{ top:46px; } }

h1,h2,h3,h4,h5,h6{
  font-family:'Libre Baskerville', Georgia, serif;
  color:var(--near-black);
  line-height:1.25;
  letter-spacing:-0.01em;
}
a{ color:var(--olive); text-decoration-color:var(--amber); text-underline-offset:2px; }
a:hover{ color:var(--rust); }

/* ---------- 3. HEADER — LIGHT BEPCO NAV ------------------------- */
/* Remove the theme's reserved gap above the header so it sits flush
   on ALL pages. (Content spacing on inner pages is handled separately
   below via #content padding, so this won't jam the post title.)      */
#page,
.site{ margin-top:0 !important; padding-top:0 !important; }
body{ margin-top:0 !important; }

/* Light parchment nav bar, full-bleed background, content centered.  */
.site-header{
  background:#EEE8D8 !important;   /* FULLY opaque — no content bleed-through */
  border-bottom:1px solid rgba(30,32,26,0.12) !important;
  width:100vw !important;
  max-width:100vw !important;
  position:relative !important;    /* relative (NOT sticky) — scrolls with page */
  left:auto !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  box-sizing:border-box;
  padding:0 max(28px, calc((100vw - 1120px) / 2)) !important;
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;
  margin-bottom:0 !important;
  z-index:10;
}
/* neutralize theme backgrounds on inner header containers */
.site-header .site-branding,
.site-header .nav-wrapper,
.site-header .main-navigation,
.site-header .menu-primary-container{
  background:transparent !important;
}
/* collapse any theme margin/padding on the header's inner containers
   that adds height BELOW the nav row (the real source of the gap that
   appears inside #masthead above the intro).                          */
.site-header .site-branding,
.site-header .nav-wrapper,
.site-header .main-navigation,
.site-header .menu-primary-container,
.site-header .menu,
.site-header #primary-menu{
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.site-header .site-branding{ display:flex; align-items:center; }
/* the site title is a <p> — kill its default paragraph margins that
   inflate the header height and create the gap.                       */
.site-header .site-branding .site-title,
.site-header p.site-title{
  margin:0 !important;
  padding:0 !important;
  line-height:1.1 !important;
}

/* logo — amber serif, BEPCO-style */
.site-branding .site-title{ margin:0; }
.site-title a{
  font-family:'Libre Baskerville', serif !important;
  color:var(--amber) !important;
  font-size:18px;
  font-weight:700;
  letter-spacing:0.05em;
}
.site-title a:hover{ color:var(--rust) !important; }

/* nav links — mono, uppercase, with vertical dividers (ledger look) */
.main-navigation .menu{ display:flex; align-items:center; }
.main-navigation .menu > li{ margin:0; }
/* nav links — mono, uppercase, with vertical dividers (ledger look) */
.main-navigation .menu > li > a{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(30,32,26,0.55);
  padding:0 16px;
  height:56px;
  display:flex;
  align-items:center;
  border-right:1px solid rgba(30,32,26,0.09);
  position:relative;
  /* the amber ::after rule below IS the underline — kill the browser's
     default one, which otherwise shows as a black line on hover once
     the text darkens                                                 */
  text-decoration:none !important;
  /* colour/background ease at 0.2s — slightly ahead of the 0.3s
     underline, so the two changes stagger rather than move as one
     block (this is the BEPCO nav feel).                             */
  transition:color 0.2s cubic-bezier(0.22,0.61,0.36,1),
             background 0.2s cubic-bezier(0.22,0.61,0.36,1);
}
/* the amber rule that DRAWS itself left-to-right beneath the label.
   scaleX(0) at rest + transform-origin:left is what makes it wipe in
   from the left rather than fade or grow from the centre.           */
.main-navigation .menu > li > a::after{
  content:'';
  position:absolute;
  left:16px; right:16px;
  bottom:14px;
  height:1px;
  background:var(--amber);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.3s cubic-bezier(0.22,0.61,0.36,1);
  pointer-events:none;
}
.main-navigation .menu > li > a:hover::after{
  transform:scaleX(1);
}
/* ACTIVE (current page) — persistent, and distinct from hover */
.main-navigation .menu > li.current-menu-item > a,
.main-navigation .menu > li.current_page_item > a,
.main-navigation .menu > li.current-menu-ancestor > a,
.main-navigation .menu > li.current-menu-parent > a{
  color:var(--amber);
  background:rgba(200,134,10,0.06);
}
.main-navigation .menu > li.current-menu-item > a::after,
.main-navigation .menu > li.current_page_item > a::after,
.main-navigation .menu > li.current-menu-ancestor > a::after,
.main-navigation .menu > li.current-menu-parent > a::after{
  transform:scaleX(1);
  background:var(--amber);
}
.main-navigation .menu > li:first-child > a{
  border-left:1px solid rgba(30,32,26,0.09);
}
.main-navigation .menu > li > a:hover{
  color:var(--near-black);
  background:rgba(30,32,26,0.04);
}
/* the search item in the menu */
.main-navigation .astm-search-menu > a{ border-right:none; }
.main-navigation .search-icon-path,
.main-navigation .search-icon{ fill:rgba(30,32,26,0.5); }
.main-navigation .menu-toggle{
  color:var(--near-black);
  background:transparent;
  border:1px solid rgba(30,32,26,0.2);
}

/* ---------- V1 GRAMMAR: CLASSIFICATION BANNER ------------------- */
/* Injected via WPCode at "Site Wide Footer" (this theme does NOT fire
   wp_body_open, so Site Wide Body renders nothing). Because it's placed
   at the bottom of the DOM, we pin it to the TOP with position:fixed.  */
.wfp-banner{
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:9998;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:18px;
  padding:6px max(28px, calc((100vw - 1120px) / 2));
  background:rgba(30,32,26,0.06);
  border-bottom:1px solid rgba(30,32,26,0.10);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
/* when logged in, sit below the WP admin bar */
.admin-bar .wfp-banner{ top:32px; }
@media screen and (max-width:782px){ .admin-bar .wfp-banner{ top:46px; } }

/* Push the HEADER (and thus everything below it) down by the banner's
   height so the header sits BELOW the fixed banner, not under it.
   Banner ≈ 30px tall. We offset the site wrapper, not the body, so the
   parchment ground still fills behind the banner cleanly.             */
.site-header{ margin-top:30px !important; }
/* remove any stray body padding from earlier approach */
body{ padding-top:0 !important; }

/* Restore breathing room between header and content on INNER pages
   (posts, pages, blog index). The homepage stays flush; everything
   else gets a clean top gap so the eyebrow/title isn't jammed under
   the header.                                                         */
body:not(.home) #content.site-content{ padding-top:48px !important; }

.wfp-banner .cb-item{
  font-family:'IBM Plex Mono', monospace;
  font-size:9px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:rgba(30,32,26,0.42);
  white-space:nowrap;
}
.wfp-banner .cb-dot{
  width:3px; height:3px; border-radius:50%;
  background:rgba(30,32,26,0.20);
  flex-shrink:0;
}
.wfp-banner .cb-right{
  margin-left:auto;
  font-family:'IBM Plex Mono', monospace;
  font-size:9px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(200,134,10,0.65);
  white-space:nowrap;
}
@media (max-width:640px){
  .wfp-banner{ gap:10px; padding:5px 18px; }
  .wfp-banner .cb-item:nth-child(n+3){ display:none; }
}

/* ---------- 4. POST HEADER + V1 EYEBROW ------------------------- */
/* HOMEPAGE SECTION COLORING (BEPCO alternating grounds) --------- */
/* Targets the 4 top-level Group blocks that are DIRECT children of
   .entry-content, by order: 1 intro · 2 Sign up · 3 Recent Posts ·
   4 Blog Chains. The ">" keeps nested groups (inside Blog Chains)
   from being painted. Full-bleed so each band spans the viewport.   */
.entry-content > .wp-block-group{
  width:100vw;
  position:relative;
  left:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  box-sizing:border-box;
  padding:38px max(28px, calc((100vw - 760px) / 2)) !important;
}
/* keep the inner content constrained to the reading column */
.entry-content > .wp-block-group > .wp-block-group__inner-container{
  max-width:760px;
  margin:0 auto;
}

/* 1 · intro — parchment (base ground) */
.entry-content > .wp-block-group:nth-of-type(1){ background:#F4EFE2; }
/* 2 · Top Sign up — vellum */
.entry-content > .wp-block-group:nth-of-type(2){ background:#EDE4D0; }
/* 3 · Recent Posts — canvas (a touch deeper) */
.entry-content > .wp-block-group:nth-of-type(3){ background:#E2DDD4; }
/* 4 · Blog Chains — DARK contrast band (soot), light text */
.entry-content > .wp-block-group:nth-of-type(4){ background:var(--near-black); }
.entry-content > .wp-block-group:nth-of-type(4) h2,
.entry-content > .wp-block-group:nth-of-type(4) h3{ color:var(--manila-lt) !important; }
.entry-content > .wp-block-group:nth-of-type(4) p{ color:#C9C1AE; }
.entry-content > .wp-block-group:nth-of-type(4) a{ color:var(--amber); }
.entry-content > .wp-block-group:nth-of-type(4) strong{ color:var(--manila-lt); }
/* nested groups inside Blog Chains: raised panels on the dark.
   Ground is the solid warm-dark #2A2B23 at 78% — enough opacity to
   still read as a real surface (the old white-at-4% wash sat only ~4%
   off the ground and disappeared), but with a little of the band
   showing through so the panels feel seated rather than pasted on.
   z-index keeps them above the CKT ghost regardless of the alpha.
   Border uses #E09820 — amber lifted for dark grounds, the same value
   the portfolio's dark panel already uses.                            */
.entry-content > .wp-block-group:nth-of-type(4) .wp-block-group{
  background:rgba(42,43,35,0.78);
  border:1px solid rgba(224,152,32,0.42);
  padding:18px 20px !important;
  margin:14px 0;
  position:relative;   /* lift above the CKT ghost */
  z-index:2;
}
/* 5 · Bottom Sign up — vellum (echoes the top Sign up) */
.entry-content > .wp-block-group:nth-of-type(5){ background:#EDE4D0; }

/* section headings get the BEPCO mono treatment in amber.            */
.entry-content > .wp-block-group > .wp-block-group__inner-container > h2:first-child{
  font-family:'IBM Plex Mono', monospace;
  font-weight:500;
  font-size:18px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--amber);   /* amber */
  margin:0 0 20px;
  padding-bottom:0;
  border:none;
  display:flex;
  align-items:center;
  gap:12px;
}
.entry-content > .wp-block-group > .wp-block-group__inner-container > h2:first-child::before{
  content:"";
  width:20px; height:1px;
  background:var(--amber);   /* amber tick */
  flex-shrink:0;
}
/* on the DARK Blog Chains band, keep the eyebrow amber too (already
   reads well against near-black) */
.entry-content > .wp-block-group:nth-of-type(4) > .wp-block-group__inner-container > h2:first-child{
  color:var(--amber) !important;
}
.entry-content > .wp-block-group:nth-of-type(4) > .wp-block-group__inner-container > h2:first-child::before{
  background:var(--amber);
}

/* ================================================================
   RECORD-ROW TREATMENT for Recent Posts widget + Blog Chain lists
   Adapts the BEPCO archive .record-row look to WordPress markup.
   ================================================================ */

/* --- Recent Posts widget (.wp-block-latest-posts__list) --- */
.wp-block-latest-posts__list{ list-style:none !important; margin:0; padding:0; }
.wp-block-latest-posts__list li{
  position:relative;
  padding:18px 0 18px 0;
  border-bottom:1px solid rgba(30,32,26,0.09);
  transition:padding-left 0.28s ease, background 0.2s ease;
}
.wp-block-latest-posts__list li::before{
  content:"";
  position:absolute;
  left:-16px; top:0; bottom:0;
  width:0;
  background:var(--amber);
  transition:width 0.28s ease;
}
.wp-block-latest-posts__list li:hover{
  background:rgba(200,134,10,0.04);
  padding-left:14px;
}
.wp-block-latest-posts__list li:hover::before{ width:4px; }
.wp-block-latest-posts__post-title{
  font-family:'Libre Baskerville', Georgia, serif !important;
  font-size:17px;
  font-weight:700;
  line-height:1.3;
  color:var(--near-black) !important;
  text-decoration:none;
  display:block;
  margin-bottom:5px;
}
.wp-block-latest-posts__post-title:hover{ color:var(--amber) !important; }
.wp-block-latest-posts__post-date{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  letter-spacing:0.10em;
  text-transform:uppercase;
  color:var(--amber);
  display:block;
  margin-bottom:8px;
}
.wp-block-latest-posts__post-excerpt{
  font-family:'Libre Baskerville', Georgia, serif;
  font-size:13px;
  line-height:1.6;
  color:rgba(30,32,26,0.7);
}
.wp-block-latest-posts__post-excerpt .more-link{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--olive);
}

/* --- SIDEBAR Recent Posts (#secondary): titles-only, tighter --- */
#secondary .wp-block-latest-posts__list li{
  padding:11px 0;
}
#secondary .wp-block-latest-posts__list li::before{ left:-12px; }
#secondary .wp-block-latest-posts__list li:hover{ padding-left:10px; }
#secondary .wp-block-latest-posts__post-title{
  font-size:15px;
  font-weight:700;
  line-height:1.25;
  margin-bottom:0;
}
/* sidebar widget headings match the section-eyebrow (mono, amber, tick) */
#secondary .wp-block-heading,
#secondary .widget-title{
  font-family:'IBM Plex Mono', monospace !important;
  font-weight:500 !important;
  font-size:12px !important;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--amber) !important;
  display:flex;
  align-items:center;
  gap:10px;
  border:none;
  margin-bottom:14px;
}
#secondary .wp-block-heading::before,
#secondary .widget-title::before{
  content:"";
  width:16px; height:1px;
  background:var(--amber);
  flex-shrink:0;
}

/* --- Blog Chain lists (.wp-block-list inside the dark band) --- */
.entry-content > .wp-block-group:nth-of-type(4) .wp-block-list{
  list-style:none !important;
  margin:0; padding:0;
}
.entry-content > .wp-block-group:nth-of-type(4) .wp-block-list li{
  position:relative;
  padding:9px 0 9px 22px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  font-family:'Libre Baskerville', Georgia, serif;
  font-size:15px;
  color:rgba(238,232,216,0.88);   /* lighter default for non-link text on dark */
  transition:padding-left 0.2s ease;
}
.entry-content > .wp-block-group:nth-of-type(4) .wp-block-list li:last-child{ border-bottom:none; }
.entry-content > .wp-block-group:nth-of-type(4) .wp-block-list li::before{
  content:"";
  position:absolute;
  left:0; top:15px;
  width:6px; height:6px;
  background:var(--amber);
  transform:rotate(45deg);   /* era-diamond marker */
}
.entry-content > .wp-block-group:nth-of-type(4) .wp-block-list li:hover{ padding-left:26px; }
.entry-content > .wp-block-group:nth-of-type(4) .wp-block-list a{
  color:var(--amber) !important;
  text-decoration:none;
}
.entry-content > .wp-block-group:nth-of-type(4) .wp-block-list a:hover{ text-decoration:underline; }

/* --- Intro jump-links → BEPCO button pair --- */
.entry-content a[href="#recent-posts"],
.entry-content a[href="#blog-chains"]{
  font-family:'IBM Plex Mono', monospace !important;
  font-size:12px !important;
  letter-spacing:0.16em;
  text-transform:uppercase;
  text-decoration:none !important;
  padding:13px 24px;
  display:inline-block;
  margin:4px 6px;
  transition:all 0.18s ease;
}
/* primary (Recent Posts): solid amber */
.entry-content a[href="#recent-posts"]{
  color:var(--manila-lt) !important;
  background:var(--amber);
  border:1px solid var(--amber);
}
.entry-content a[href="#recent-posts"]:hover{
  background:var(--amber-dk, #8B4A08);
  border-color:var(--amber-dk, #8B4A08);
}
/* secondary (Blog Chains): outlined */
.entry-content a[href="#blog-chains"]{
  color:rgba(30,32,26,0.6) !important;
  background:transparent;
  border:1px solid rgba(30,32,26,0.25);
}
.entry-content a[href="#blog-chains"]:hover{
  color:var(--near-black) !important;
  border-color:var(--near-black);
  background:rgba(30,32,26,0.04);
}
/* hide the stray " | " separator text between them */
.entry-content p.has-text-align-center:has(a[href="#recent-posts"]){
  font-size:0;
}
.entry-content p.has-text-align-center:has(a[href="#recent-posts"]) a{ font-size:12px; }
.wp-block-jetpack-subscriptions__form-elements input[type="email"],
.wp-block-jetpack-subscriptions__form-elements .wp-block-jetpack-subscriptions__email-field{
  border-radius:0 !important;
  border:1px solid rgba(30,32,26,0.25) !important;
  background:#FCFAF4 !important;   /* warm near-white, lighter than the vellum section */
  font-family:'IBM Plex Mono', monospace !important;
  font-size:13px !important;
  padding:12px 14px !important;
}
.wp-block-jetpack-subscriptions__form-elements input[type="email"]:focus{
  border-color:var(--amber) !important;
  outline:none !important;
}
.wp-block-jetpack-subscriptions__form-elements .wp-block-button__link,
.wp-block-jetpack-subscriptions__form-elements button[type="submit"]{
  border-radius:0 !important;
  background:var(--near-black) !important;
  color:var(--amber) !important;
  font-family:'IBM Plex Mono', monospace !important;
  font-size:11px !important;
  letter-spacing:0.16em !important;
  text-transform:uppercase !important;
  padding:12px 20px !important;
  border:1px solid rgba(200,134,10,0.55) !important;   /* amber border */
  transition:all 0.2s ease !important;
}
.wp-block-jetpack-subscriptions__form-elements button[type="submit"]:hover,
.wp-block-jetpack-subscriptions__form-elements .wp-block-button__link:hover{
  background:rgba(200,134,10,0.12) !important;
  border-color:var(--amber) !important;
  color:var(--amber) !important;
}

/* --- WPForms Submit button (Contact page) — match Subscribe --- */
.wpforms-submit,
.wpforms-container button[type="submit"]{
  border-radius:0 !important;
  background:var(--near-black) !important;
  color:var(--amber) !important;
  font-family:'IBM Plex Mono', monospace !important;
  font-size:11px !important;
  letter-spacing:0.16em !important;
  text-transform:uppercase !important;
  padding:12px 22px !important;
  border:1px solid rgba(200,134,10,0.55) !important;
  transition:all 0.2s ease !important;
}
.wpforms-submit:hover,
.wpforms-container button[type="submit"]:hover{
  background:rgba(200,134,10,0.12) !important;
  border-color:var(--amber) !important;
  color:var(--amber) !important;
}
/* WPForms text inputs + textarea — match the boxed institutional look */
.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field textarea{
  border-radius:0 !important;
  border:1px solid rgba(30,32,26,0.25) !important;
  background:#FCFAF4 !important;
  font-family:'IBM Plex Mono', monospace !important;
  font-size:13px !important;
}
.wpforms-field input:focus,
.wpforms-field textarea:focus{
  border-color:var(--amber) !important;
  outline:none !important;
}
/* WPForms labels — mono, on-brand */
.wpforms-field-label{
  font-family:'IBM Plex Sans', sans-serif !important;
  color:var(--near-black) !important;
}

/* ================================================================
   RELATED POSTS (YARPP) — record-row treatment
   ================================================================ */
.yarpp-related{
  margin-top:2.5em;
  padding-top:1.6em;
  border-top:1px solid var(--rule);
}
.entry-content .yarpp-related h3,
.yarpp.yarpp-related h3{
  font-family:'IBM Plex Mono', monospace !important;
  font-weight:500 !important;
  font-size:12px !important;
  letter-spacing:0.16em !important;
  text-transform:uppercase !important;
  color:var(--amber) !important;
  display:flex !important;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
.entry-content .yarpp-related h3::before,
.yarpp.yarpp-related h3::before{
  content:"";
  width:20px; height:1px;
  background:var(--amber);
  flex-shrink:0;
}
/* hide the admin-only match-score abbr (invisible to visitors anyway) */
.yarpp-related abbr{ display:none !important; }
.yarpp-related ol{
  list-style:none !important;
  margin:0; padding:0;
  counter-reset:none;
}
.yarpp-related ol li{
  position:relative;
  padding:12px 0 12px 22px;
  border-bottom:1px solid rgba(30,32,26,0.09);
  transition:padding-left 0.2s ease;
}
.yarpp-related ol li:last-child{ border-bottom:none; }
.yarpp-related ol li::before{
  content:"";
  position:absolute;
  left:0; top:18px;
  width:6px; height:6px;
  background:var(--amber);
  transform:rotate(45deg);   /* era-diamond marker */
}
.yarpp-related ol li:hover{ padding-left:26px; }
.yarpp-related ol li a{
  font-family:'Libre Baskerville', Georgia, serif !important;
  font-size:15px;
  color:var(--near-black) !important;
  text-decoration:none;
}
.yarpp-related ol li a:hover{ color:var(--amber) !important; }

/* ================================================================
   PREV / NEXT POST NAVIGATION — archive .pagination-nav style
   ================================================================ */
.post-navigation{
  margin-top:2.5em;
  padding-top:1.6em;
  border-top:1px solid var(--rule);
}
.post-navigation .nav-links{
  display:flex;
  justify-content:space-between;
  gap:24px;
}
.post-navigation .nav-previous,
.post-navigation .nav-next{ max-width:48%; }
.post-navigation .nav-next{ text-align:right; margin-left:auto; }
/* the small "Previous Post" / "Next Post" label — mono uppercase */
.post-navigation .meta-nav{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(30,32,26,0.5);
  margin-bottom:6px;
}
.post-navigation .nav-previous .meta-nav::before{ content:"\2190  "; }  /* ← */
.post-navigation .nav-next .meta-nav::after{ content:"  \2192"; }       /* → */
/* the post title link — boxed like an activated button */
.post-navigation .nav-links a{
  font-family:'Libre Baskerville', Georgia, serif !important;
  font-size:16px;
  color:var(--near-black) !important;
  text-decoration:none;
  display:inline-block;
  border:1px solid rgba(200,134,10,0.55);
  background:rgba(200,134,10,0.05);
  padding:12px 18px;
  transition:all 0.2s ease;
}
.post-navigation .nav-next .nav-links a{ text-align:right; }
.post-navigation .nav-links a:hover{
  color:var(--amber) !important;
  border-color:var(--amber);
  background:rgba(200,134,10,0.12);
}
.post-navigation .nav-links a:hover .meta-nav{ color:var(--amber); }
.main-navigation .menu > li.current-menu-item > a,
.main-navigation .menu > li.current_page_item > a,
.main-navigation .menu > li.current-menu-parent > a{
  color:var(--amber) !important;
  background:rgba(200,134,10,0.07);
  box-shadow:inset 0 -2px 0 var(--amber);
}

/* ---------- POST HEADER + V1 EYEBROW (single posts) ------------ */
.entry-header{
  border-bottom:1px solid var(--rule);
  padding-bottom:20px;
  margin-bottom:28px;
}
/* V1 GRAMMAR: mono eyebrow rule above the title.
   (A category label can sit here; this adds the amber tick + baseline.) */
/* V1 GRAMMAR: category eyebrow above post title (SINGLE POSTS).
   The <article> tag carries the category as a class (e.g.
   class="... category-the-cognitive-effectiveness-stack ...").
   We map each category to its display label via attribute selectors,
   so the eyebrow shows the post's REAL category. CSS-only, no plugin.

   To add a new category later: copy a line below, swap the class slug
   and the label text.                                                 */
body:not(.home) .entry-header::before{
  content:"\2014  Field Notes";          /* fallback if no match */
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--amber);                    /* amber eyebrow */
  margin-bottom:14px;
}
/* suppress the eyebrow on canonical PAGES (Contact, About, etc.) —
   only posts (which have categories) get the eyebrow */
body.page .entry-header::before{ content:none !important; display:none !important; }
/* per-category labels — matched on the article's category-* class */
article[class*="category-the-cognitive-effectiveness-stack"] .entry-header::before{ content:"\2014  The Cognitive Effectiveness Stack"; }
article[class*="category-the-techno-wisdom-codec"] .entry-header::before{ content:"\2014  The Techno-Wisdom Codec"; }
article[class*="category-fiction"] .entry-header::before{ content:"\2014  Fiction"; }
article[class*="category-poem"] .entry-header::before{ content:"\2014  Poem"; }
article[class*="category-electric-utilities"] .entry-header::before{ content:"\2014  Electric Utilities"; }
article[class*="category-philosophy"] .entry-header::before{ content:"\2014  Philosophy"; }
article[class*="category-productivity"] .entry-header::before{ content:"\2014  Productivity"; }
article[class*="category-data"] .entry-header::before{ content:"\2014  Data"; }
article[class*="category-digital-transformation"] .entry-header::before{ content:"\2014  Digital Transformation"; }
article[class*="category-artificial-intelligence"] .entry-header::before{ content:"\2014  Artificial Intelligence"; }
article[class*="category-interconnection"] .entry-header::before{ content:"\2014  Interconnection"; }
article[class*="category-holiday"] .entry-header::before{ content:"\2014  Holiday"; }
article[class*="category-video-games"] .entry-header::before{ content:"\2014  Video Games"; }
/* HOMEPAGE: collapse the empty header/top gap so the first colored
   band (intro) starts flush under the site header.
   The theme outputs an EMPTY <header class="entry-header"></header>
   on titleless pages — we remove it and zero all wrapper spacing.    */
.home .entry-header,
.home .page-header,
.home header.entry-header,
.home .entry-header:empty{ display:none !important; height:0 !important; margin:0 !important; padding:0 !important; }
.home #content.site-content,
.home #primary,
.home #primary.content-area,
.home #main,
.home #main.site-main,
.home article.page,
.home .entry-content{
  margin-top:0 !important;
  padding-top:0 !important;
}
.home .entry-content > .wp-block-group:nth-of-type(1){ margin-top:0 !important; }

/* FORCE-collapse the gap between header and first content band.
   The orange margin band seen in inspector is the content wrappers'
   top margin/padding — zero it aggressively on the front page.        */
body.home #content.site-content{ margin-top:0 !important; padding-top:0 !important; }
body.home #primary.content-area{ margin-top:0 !important; padding-top:0 !important; }
body.home #main.site-main{ margin-top:0 !important; padding-top:0 !important; }
body.home article{ margin-top:0 !important; padding-top:0 !important; }
body.home .entry-content{ margin-top:0 !important; padding-top:0 !important; }
body.home .entry-content > .wp-block-group:first-child{ margin-top:0 !important; }

/* kill the first-child top margin INSIDE each section's inner container
   — this is the real source of the gap at the top of the intro band:
   the first <p>/<h2> carries a default margin-top that pushes content
   down from the top edge of the colored band.                        */
.entry-content > .wp-block-group > .wp-block-group__inner-container > *:first-child{
  margin-top:0 !important;
}
.entry-title{
  font-family:'Libre Baskerville', Georgia, serif;
  font-size:38px;
  font-weight:700;
  margin-bottom:14px;
}
/* V1 GRAMMAR: filed-style meta */
.entry-meta{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--olive-mid);
}
.entry-meta a,
.entry-date{ color:var(--amber); }

/* ---------- 5. ARTICLE BODY (.entry-content) -------------------- */
/* Let the theme center the column; just set a comfortable reading
   measure and center it within whatever container the theme provides. */
.entry-content,
.entry-header{
  max-width:42rem;
  margin-left:auto;
  margin-right:auto;
}
.entry-content{ font-size:17px; }
.entry-content p{ margin:0 0 1.4em; }

/* in-post section headings → IBM Plex Mono */
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6{
  font-family:'IBM Plex Mono', monospace;
  color:var(--olive);
  letter-spacing:0;
}
.entry-content h2{
  font-size:22px;
  font-weight:500;
  margin:1.9em 0 0.6em;
  padding-bottom:0.35em;
  border-bottom:1px solid var(--rule);
}
.entry-content h3,
.entry-content h4{
  font-size:14px;
  font-weight:500;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--olive-mid);
  margin:1.7em 0 0.5em;
}

/* quote appearance only — width controlled by Part A */
.entry-content blockquote,
.entry-content .wp-block-quote{
  border-left:3px solid var(--amber);
  background:#E4DCC4;
  padding:0.8em 1.2em;
  font-style:italic;
  color:var(--near-black);
}

/* ---------- 6. FOOTERS, NAV, WIDGETS --------------------------- */
.entry-footer,
.post-navigation{
  margin-top:2.5em;
  padding-top:1.4em;
  border-top:1px solid var(--rule);
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
}
.post-navigation .nav-links a{ font-family:'Libre Baskerville',serif; font-size:15px; }

.widget-title{
  font-family:'IBM Plex Sans Condensed',sans-serif;
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--olive-mid);
  border-bottom:1px solid var(--rule);
  padding-bottom:8px;
  margin-bottom:12px;
}
.widget a{ color:var(--olive); }
.widget a:hover{ color:var(--rust); }

/* Themes tag cloud → mono chips */
.tagcloud a,
.wp-block-tag-cloud a{
  font-family:'IBM Plex Mono',monospace !important;
  font-size:11px !important;
  letter-spacing:0.03em;
  border:1px solid var(--rule);
  padding:3px 8px;
  margin:0 4px 6px 0;
  display:inline-block;
  color:var(--olive-mid) !important;
}
.tagcloud a:hover,
.wp-block-tag-cloud a:hover{ border-color:var(--amber); color:var(--near-black) !important; }

/* ---------- 7. SITE FOOTER + V1 ISSUED COLOPHON ---------------- */
/* FULL-BLEED footer to match the header, content held to same column */
.site-footer{
  background:var(--near-black);
  color:var(--sage);
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:0.05em;
  border-top:3px solid var(--amber);
  width:100vw !important;
  max-width:100vw !important;
  position:relative;
  left:50%;
  margin-left:-50vw !important;
  margin-right:-50vw !important;
  box-sizing:border-box;
  padding:28px max(28px, calc((100vw - 1120px) / 2)) !important;
}
.site-footer a{ color:var(--amber); }
.site-info{ color:var(--olive-mid); text-align:center; }
/* V1 GRAMMAR: issued colophon appended to the footer */
.site-info::after{
  content:"Wired for Purpose  \00B7  Est. 2023\A A Kevin D. Jones Publication";
  white-space:pre;
  display:block;
  margin-top:8px;
  color:var(--sage);
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-size:9.5px;
  text-align:center;
  line-height:1.8;
}

/* ================================================================
   TERMINAL VOICE SKINS — Codec Debug Session posts
   Two computer-screen treatments on Paragraph blocks tagged with
   .voice-carl-typing (human input) and .voice-codec (machine output).
   ================================================================ */

/* shared screen frame for both voices (paragraphs AND lists) */
.entry-content p.voice-carl-typing,
.entry-content p.voice-codec,
.entry-content ul.voice-carl-typing,
.entry-content ul.voice-codec,
.entry-content ol.voice-carl-typing,
.entry-content ol.voice-codec{
  font-family:'IBM Plex Mono', monospace !important;
  font-size:14px !important;
  line-height:1.7 !important;
  background:#14140F;                       /* dark CRT screen */
  border:1px solid rgba(200,134,10,0.25);
  border-left:3px solid var(--amber);
  border-radius:2px;
  padding:20px 22px 20px 24px;
  margin:1.6em 0;
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 0 40px rgba(0,0,0,0.5);  /* screen vignette */
}
/* lists need their item indent preserved inside the screen */
.entry-content ul.voice-carl-typing,
.entry-content ul.voice-codec,
.entry-content ol.voice-carl-typing,
.entry-content ol.voice-codec{
  padding-left:44px;
}
.entry-content ul.voice-carl-typing li,
.entry-content ul.voice-codec li,
.entry-content ol.voice-carl-typing li,
.entry-content ol.voice-codec li{
  margin:0.4em 0;
}
/* subtle scanline texture across both screens */
.entry-content p.voice-carl-typing::after,
.entry-content p.voice-codec::after,
.entry-content ul.voice-carl-typing::after,
.entry-content ul.voice-codec::after,
.entry-content ol.voice-carl-typing::after,
.entry-content ol.voice-codec::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    rgba(255,255,255,0.015) 3px,
    rgba(255,255,255,0.015) 4px
  );
}

/* ---- CARL TYPING (human input): amber phosphor + prompt + cursor -- */
.entry-content p.voice-carl-typing,
.entry-content ul.voice-carl-typing,
.entry-content ol.voice-carl-typing{
  color:#E8B84B;                            /* warm amber CRT text */
}
.entry-content p.voice-carl-typing::before,
.entry-content ul.voice-carl-typing::before,
.entry-content ol.voice-carl-typing::before{
  content:"carl@codec:~$ ";
  color:rgba(232,184,75,0.5);
  font-size:11px;
  letter-spacing:0.05em;
  display:block;
  margin-bottom:8px;
}

/* ---- THE CODEC (machine output): green phosphor + system label ---- */
.entry-content p.voice-codec,
.entry-content ul.voice-codec,
.entry-content ol.voice-codec{
  color:#7DD6A0;                            /* cool green terminal text */
  border-left-color:#7DD6A0;
  border-color:rgba(125,214,160,0.25);
}
.entry-content p.voice-codec::before,
.entry-content ul.voice-codec::before,
.entry-content ol.voice-codec::before{
  content:"\25B8 CODEC // decompression agent";
  color:rgba(125,214,160,0.55);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  display:block;
  margin-bottom:8px;
}
/* list markers on-theme */
.entry-content ul.voice-carl-typing li::marker,
.entry-content ol.voice-carl-typing li::marker{ color:rgba(232,184,75,0.6); }
.entry-content ul.voice-codec li::marker,
.entry-content ol.voice-codec li::marker{ color:rgba(125,214,160,0.6); }
/* links inside either terminal voice stay on-theme */
.entry-content p.voice-carl-typing a,
.entry-content ul.voice-carl-typing a,
.entry-content ol.voice-carl-typing a{ color:#E8B84B !important; text-decoration:underline; }
.entry-content p.voice-codec a,
.entry-content ul.voice-codec a,
.entry-content ol.voice-codec a{ color:#7DD6A0 !important; text-decoration:underline; }
/* italics inside the codec (it often emphasizes) read brighter */
.entry-content p.voice-codec em,
.entry-content ul.voice-codec em,
.entry-content ol.voice-codec em{ color:#A8E8C2; font-style:italic; }
.entry-content p.voice-carl-typing em,
.entry-content ul.voice-carl-typing em,
.entry-content ol.voice-carl-typing em{ color:#F0CE7A; }

/* mobile: tighten padding */
@media (max-width:640px){
  .entry-content p.voice-carl-typing,
  .entry-content p.voice-codec,
  .entry-content ul.voice-carl-typing,
  .entry-content ul.voice-codec,
  .entry-content ol.voice-carl-typing,
  .entry-content ol.voice-codec{ padding:16px 16px 16px 18px; font-size:13px !important; }
  .entry-content ul.voice-carl-typing,
  .entry-content ul.voice-codec,
  .entry-content ol.voice-carl-typing,
  .entry-content ol.voice-codec{ padding-left:38px; }
}

/* ---- MERGE consecutive same-voice blocks into one screen -------
   When a voice block directly follows another block of the SAME
   voice, it's a continuation: remove the top border, the label, the
   gap, and round only the outer corners — so a run of blocks reads
   as a single continuous terminal session with one prompt on top.  */

/* carl-typing following carl-typing = continuation */
.entry-content .voice-carl-typing + .voice-carl-typing{
  margin-top:0 !important;
  border-top:none !important;
  padding-top:4px !important;
}
.entry-content .voice-carl-typing + .voice-carl-typing::before{ content:none !important; }

/* codec following codec = continuation */
.entry-content .voice-codec + .voice-codec{
  margin-top:0 !important;
  border-top:none !important;
  padding-top:4px !important;
}
.entry-content .voice-codec + .voice-codec::before{ content:none !important; }

/* corner rounding: a block followed by its own voice shouldn't round
   its bottom; a continuation shouldn't round its top. This keeps the
   welded stack looking like one panel. */
.entry-content .voice-carl-typing:has(+ .voice-carl-typing),
.entry-content .voice-codec:has(+ .voice-codec){
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  margin-bottom:0 !important;
  padding-bottom:4px !important;
}
.entry-content .voice-carl-typing + .voice-carl-typing,
.entry-content .voice-codec + .voice-codec{
  border-top-left-radius:0;
  border-top-right-radius:0;
}

/* ================================================================
   PAPER VOICE SKINS — Codec Debug Session posts
   Physical artifacts (vs. the dark terminal screens): a curated
   assignment card and an in-world manual excerpt.
   ================================================================ */

/* ---- voice-notecard: curated assignment card from the desk ---- */
.entry-content p.voice-notecard,
.entry-content ul.voice-notecard,
.entry-content ol.voice-notecard{
  font-family:'Libre Baskerville', Georgia, serif !important;
  font-size:14px !important;
  line-height:1.7 !important;
  color:#25211B;
  background:linear-gradient(180deg,#FCFAF4 0%, #F7F2E7 100%);
  border:1px solid rgba(30,32,26,0.16);
  border-left:4px solid var(--amber);
  border-radius:4px;
  padding:26px 30px;
  margin:1.8em 0;
  position:relative;
}
/* title block: department + card type */
.entry-content p.voice-notecard::before,
.entry-content ul.voice-notecard::before,
.entry-content ol.voice-notecard::before{
  content:"Techno-Wisdom Codec Department\A Assignment Card";
  white-space:pre;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(30,32,26,0.55);
  display:block;
  line-height:1.7;
  margin-bottom:16px;
  padding-bottom:14px;
  padding-right:40px;
  border-bottom:1px solid rgba(30,32,26,0.14);
}
/* embedded-chip cue: dark high-transparency contact pad */
.entry-content p.voice-notecard::after,
.entry-content ul.voice-notecard::after,
.entry-content ol.voice-notecard::after{
  content:"";
  position:absolute; top:24px; right:26px;
  width:26px; height:20px;
  background:
    linear-gradient(90deg, transparent 3px, rgba(30,32,26,0.35) 3px 4px, transparent 4px),
    linear-gradient(90deg, transparent 11px, rgba(30,32,26,0.35) 11px 12px, transparent 12px),
    linear-gradient(90deg, transparent 19px, rgba(30,32,26,0.35) 19px 20px, transparent 20px),
    rgba(30,32,26,0.12);
  border:1px solid rgba(30,32,26,0.28);
  border-radius:2px;
}
.entry-content .voice-notecard strong{ font-weight:700; color:var(--near-black); }
.entry-content .voice-notecard em{ font-style:italic; }
.entry-content ul.voice-notecard,
.entry-content ol.voice-notecard{ padding-left:50px; }

/* ---- MERGE consecutive notecard blocks into one card ------------
   A multi-paragraph card should be ONE card: the first block keeps the
   title block + chip + top; continuations drop them and weld upward.  */
.entry-content .voice-notecard:has(+ .voice-notecard){
  border-bottom:none !important;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  margin-bottom:0 !important;
  padding-bottom:6px !important;
}
.entry-content .voice-notecard + .voice-notecard{
  margin-top:0 !important;
  border-top:none !important;
  border-top-left-radius:0;
  border-top-right-radius:0;
  padding-top:6px !important;
}
/* continuations: no repeated title block, no repeated chip */
.entry-content .voice-notecard + .voice-notecard::before{ content:none !important; }
.entry-content .voice-notecard + .voice-notecard::after{ content:none !important; }

/* ---- voice-printed-material: in-world manual excerpt ---- */
.entry-content p.voice-printed-material,
.entry-content ul.voice-printed-material,
.entry-content ol.voice-printed-material{
  font-family:'Raleway', 'IBM Plex Sans', sans-serif !important;
  font-size:14px !important;
  line-height:1.75 !important;
  color:#2A2620;
  background:#F6F1E4;
  border-left:3px solid rgba(30,32,26,0.3);
  padding:24px 30px;
  margin:1.8em 0;
  position:relative;
}
/* faint document margin line on the right */
.entry-content p.voice-printed-material::after,
.entry-content ul.voice-printed-material::after,
.entry-content ol.voice-printed-material::after{
  content:"";
  position:absolute; top:16px; bottom:16px; right:14px; width:1px;
  background:rgba(30,32,26,0.08);
}
.entry-content .voice-printed-material strong{ font-weight:600; color:var(--near-black); }
.entry-content .voice-printed-material em{ font-style:italic; }

/* ---- MERGE consecutive printed-material blocks into one document --
   Adjacent manual blocks weld into one continuous page: the seam
   padding collapses so the shared background flows unbroken, and
   continuation blocks read as new paragraphs within one document.   */
.entry-content .voice-printed-material:has(+ .voice-printed-material){
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}
.entry-content .voice-printed-material + .voice-printed-material{
  margin-top:0 !important;
  padding-top:1.1em !important;   /* paragraph spacing within the page */
}
/* the right-margin document line spans continuation blocks too, but a
   block that is itself a continuation shouldn't restart its top line */
.entry-content .voice-printed-material + .voice-printed-material::after{
  top:0;
}

/* mobile: tighten both paper voices */
@media (max-width:640px){
  .entry-content p.voice-notecard,
  .entry-content ul.voice-notecard,
  .entry-content ol.voice-notecard,
  .entry-content p.voice-printed-material,
  .entry-content ul.voice-printed-material,
  .entry-content ol.voice-printed-material{ padding:20px 18px; font-size:13px !important; }
}

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }
@media (max-width:640px){
  .entry-title{ font-size:30px; }
  .entry-content h2{ font-size:20px; }
  body{ font-size:16px; }
  .site-header{ padding:12px 18px; }
}

/* ================================================================
   POSTS PAGE (.blog) — ARCHIVE INDEX record-row treatment
   Turns the auto-generated blog loop into a dense, scannable list
   of records matching the BEPCO archive index. Scoped to .blog so
   single posts and the homepage are unaffected.
   ================================================================ */

/* each post = one record row */
body.blog .entry-content > article,
body.blog #main > article,
body.blog .site-main article.post{
  position:relative;
  display:block;
  padding:20px 0 20px 22px;
  border-bottom:1px solid rgba(30,32,26,0.12);
  margin:0 !important;
  transition:padding-left 0.25s ease, background 0.2s ease;
}
/* era-diamond marker at the row's left edge */
body.blog article.post::before{
  content:"";
  position:absolute;
  left:0; top:26px;
  width:7px; height:7px;
  background:var(--amber);
  transform:rotate(45deg);
  transition:transform 0.25s ease;
  z-index:2;
}
/* amber SPINE that appears on hover (left edge bar) */
body.blog article.post::after{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:0;
  background:var(--amber);
  transition:width 0.22s ease;
}
body.blog article.post:hover{
  padding-left:34px;
  background:rgba(200,134,10,0.03);
}
body.blog article.post:hover::after{ width:4px; }
body.blog article.post:hover::before{ transform:rotate(45deg) scale(1.3); }

/* collapse the theme's internal spacing between header/content/footer */
body.blog article.post .entry-header,
body.blog article.post .entry-content,
body.blog article.post .entry-summary,
body.blog article.post .entry-footer{
  border:none !important;
  margin:0 !important;
  padding:0 !important;
  float:none !important;
  width:100% !important;
}
/* title — serif, tighter, scannable */
body.blog article.post .entry-title{
  font-family:'Libre Baskerville', Georgia, serif !important;
  font-size:22px !important;
  font-weight:700;
  line-height:1.15;
  margin:2px 0 6px !important;
}
body.blog article.post .entry-title a{
  color:var(--near-black) !important;
  text-decoration:none;
}
body.blog article.post:hover .entry-title a{ color:var(--amber) !important; }

/* meta line — mono date-stamp, amber */
body.blog article.post .entry-meta{
  font-family:'IBM Plex Mono', monospace !important;
  font-size:10px !important;
  letter-spacing:0.10em;
  text-transform:uppercase;
  color:var(--olive-mid) !important;
  margin:0 0 8px !important;
}
body.blog article.post .entry-meta .posted-on,
body.blog article.post .entry-meta a{ color:var(--amber) !important; }
body.blog article.post .entry-meta .byline{ display:none; }

/* excerpt — muted, CLAMPED to 2 lines so rows stay compact */
body.blog article.post .entry-content,
body.blog article.post .entry-summary{
  font-family:'Libre Baskerville', Georgia, serif !important;
  font-size:13px !important;
  line-height:1.55;
  color:rgba(30,32,26,0.65) !important;
  max-width:none;
  margin:0 !important;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
/* keep poem/pre content from forcing width — clamp handles height */
body.blog article.post .entry-content p{ margin:0 !important; display:inline; }
/* hide "Continue reading" inside the clamped excerpt (row is clickable via title) */
body.blog article.post .more-link{ display:none; }

/* footer: category/tags → small mono meta, hide edit */
body.blog article.post .entry-footer{
  font-family:'IBM Plex Mono', monospace !important;
  font-size:9.5px !important;
  letter-spacing:0.06em;
  color:rgba(30,32,26,0.45) !important;
  margin-top:8px !important;
}
body.blog article.post .entry-footer a{ color:var(--olive-mid) !important; }
body.blog article.post .entry-footer .edit-link{ display:none; }

/* pagination → archive .pagination-nav style */
body.blog .navigation.pagination,
body.blog .nav-links{
  margin-top:2em;
  padding-top:1.4em;
  border-top:1px solid rgba(30,32,26,0.12);
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
}
body.blog .navigation.pagination a,
body.blog .navigation.pagination .page-numbers{
  color:rgba(30,32,26,0.5) !important;
  padding:6px 10px;
  text-decoration:none;
}
body.blog .navigation.pagination .current{
  color:var(--amber) !important;
  border:1px solid var(--amber);
}
body.blog .navigation.pagination a:hover{ color:var(--amber) !important; }

/* ================================================================
   NAV SEARCH (Ivory Search) — BEPCO institutional styling
   Icon in the nav, revealing a squared mono search field.
   ================================================================ */

/* the search icon in the nav — match nav link color, amber on hover */
.main-navigation .astm-search-menu > a{
  display:flex;
  align-items:center;
  height:56px;
  padding:0 4px 0 12px;
  border-right:none !important;
}
.main-navigation .search-icon-path{ fill:rgba(30,32,26,0.55) !important; transition:fill 0.2s ease; }
.main-navigation .astm-search-menu > a:hover .search-icon-path{ fill:var(--amber) !important; }

/* the revealed search form — light, restrained, archive-style box.
   IMPORTANT: don't force display here, or the plugin can't hide it.   */
.astm-search-menu .is-search-form{
  background:#FCFAF4 !important;
  border:1px solid rgba(30,32,26,0.18) !important;
  border-bottom:1px solid rgba(30,32,26,0.18) !important;  /* kill the plugin's black underline */
  border-radius:0 !important;
  padding:5px !important;
  box-shadow:0 6px 18px rgba(30,32,26,0.10) !important;
  align-items:center;
  gap:0;
}
/* when the plugin opens the search, lay it out as a flex row */
.astm-search-menu.astm-search-open .is-search-form,
.astm-search-menu .is-search-form.is-form-open,
.astm-search-menu a[aria-expanded="true"] + .is-search-form{
  display:flex !important;
}
/* the input — mono, light, amber caret */
.astm-search-menu .is-search-input{
  background:#FEFDFA !important;
  border:1px solid rgba(30,32,26,0.12) !important;
  border-bottom:1px solid rgba(30,32,26,0.12) !important;  /* override plugin underline */
  border-radius:0 !important;
  box-shadow:none !important;
  font-family:'IBM Plex Mono', monospace !important;
  font-size:11px !important;
  letter-spacing:0.10em !important;
  text-transform:uppercase;
  color:var(--near-black) !important;
  padding:9px 12px !important;
  caret-color:var(--amber);
  min-width:200px;
}
.astm-search-menu .is-search-input:focus{
  outline:none !important;
  border-color:var(--amber) !important;
  box-shadow:none !important;
}
.astm-search-menu .is-search-input::placeholder{
  color:rgba(30,32,26,0.38);
  font-style:normal;
  letter-spacing:0.10em;
  text-transform:uppercase;
}
/* the submit button — bordered box, amber icon, archive hover */
.astm-search-menu .is-search-submit{
  background:transparent !important;
  border:1px solid rgba(30,32,26,0.15) !important;
  border-radius:0 !important;
  padding:7px 11px !important;
  cursor:pointer;
  transition:all 0.2s ease;
}
.astm-search-menu .is-search-submit:hover{
  background:rgba(200,134,10,0.06) !important;
  border-color:var(--amber) !important;
}
.astm-search-menu .is-search-submit svg path{ fill:rgba(30,32,26,0.5) !important; transition:fill 0.2s ease; }
.astm-search-menu .is-search-submit:hover svg path{ fill:var(--amber) !important; }

/* ================================================================
   MOBILE OPTIMIZATION  (≤ 782px)
   Fixes: nav collapse to the theme's ☰ toggle, banner tightening,
   full-bleed overflow, and section/voice spacing on small screens.
   ================================================================ */
@media (max-width:782px){

  /* hide the olive spine on mobile — avoids the Safari bottom-toolbar
     overlap entirely; the spine is a desktop-only accent.             */
  body::before{ display:none !important; }

  /* --- HEADER: let the ☰ toggle work; stack branding + menu --- */
  .site-header{
    flex-wrap:wrap !important;
    min-height:auto;
    padding:10px 18px !important;
    justify-content:space-between;
    align-items:center;
  }
  .site-header .site-branding{ flex:1 1 auto; min-width:0; display:flex; align-items:center; }
  /* keep the logo on one line */
  .site-header .site-title a{ font-size:16px !important; white-space:nowrap; }
  /* the nav-wrapper holds the toggle; align it with the logo row */
  .site-header .nav-wrapper{ display:flex; align-items:center; flex-wrap:wrap; }
  /* when menu is open, let the wrapper span full width so the stacked
     menu drops below the branding rather than sitting on the right    */
  .site-header .nav-wrapper:has(.main-navigation.toggled){ flex-basis:100%; }

  /* menu toggle — quiet, blended into the header (no box/border) */
  .main-navigation .menu-toggle{
    display:block !important;
    position:absolute !important;
    top:16px;
    right:16px;
    flex:0 0 auto;
    font-family:'IBM Plex Mono', monospace !important;
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:rgba(30,32,26,0.6) !important;
    background:transparent !important;
    border:none !important;
    padding:6px 4px !important;
    border-radius:0;
    z-index:5;
  }
  .main-navigation .menu-toggle:hover{
    background:transparent !important;
    color:var(--amber) !important;
  }
  .site-header{ position:relative !important; }

  /* Hide the inline menu on mobile; show only the ☰ toggle button.
     Real structure (confirmed via inspector):
       nav#site-navigation.main-navigation(.toggled)
         > button.menu-toggle
         > div.menu-primary-container
           > ul#primary-menu.menu                                     */
  .site-header .main-navigation .menu-primary-container{ display:none !important; }

  /* when toggled, drop the whole nav to a full-width row below the
     branding and reveal the menu as a left-aligned vertical stack.   */
  .site-header .main-navigation.toggled{
    flex-basis:100% !important;
    width:100% !important;
    order:3;
  }
  .site-header .main-navigation.toggled .menu-primary-container{
    display:block !important;
    width:100% !important;
    margin-top:10px;
  }
  .site-header .main-navigation.toggled ul.menu{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    align-items:stretch !important;
  }
  .main-navigation.toggled .menu > li{
    width:100% !important;
    float:none !important;
    text-align:left !important;
  }
  .main-navigation.toggled .menu > li > a{
    font-family:'IBM Plex Mono', monospace !important;
    font-size:12px;
    letter-spacing:0.10em;
    text-transform:uppercase;
    height:auto !important;
    width:100% !important;
    justify-content:flex-start !important;
    padding:13px 4px !important;
    border-right:none !important;
    border-left:none !important;
    border-bottom:1px solid rgba(30,32,26,0.10) !important;
  }
  /* NOTE: on mobile the theme relocates the search icon up into the
     banner strip (not the nav dropdown). Force it amber via every
     path — svg fill, currentColor, and the link color.                 */
  .main-navigation .astm-search-menu{
    display:flex !important;
    align-items:center;
  }
  .main-navigation .astm-search-menu > a{
    display:flex !important;
    align-items:center;
    padding:6px !important;
    border:none !important;
    color:var(--amber) !important;
  }
  .main-navigation .astm-search-menu .search-icon{
    width:18px !important;
    height:18px !important;
  }
  /* Ivory Search injects `.is-menu path.search-icon-path{fill:#1e73be}`
     (the blue). Beat it by matching its exact chain + !important.      */
  .is-menu path.search-icon-path,
  .astm-search-menu.is-menu path.search-icon-path,
  .main-navigation .is-menu path.search-icon-path,
  .main-navigation .astm-search-menu svg path.search-icon-path{
    fill:var(--amber) !important;
  }

  /* --- BANNER: keep only the first item, hide the rest cleanly --- */
  .wfp-banner{ gap:8px; padding:5px 16px; justify-content:flex-start; }
  .wfp-banner .cb-item:nth-child(n+3){ display:none; }
  .wfp-banner .cb-dot{ display:none; }
  .wfp-banner .cb-right{ display:none; }

  /* --- SECTION BANDS: tighter vertical padding --- */
  .entry-content > .wp-block-group{ padding-top:26px !important; padding-bottom:26px !important; }

  /* --- SEARCH: don't overflow the narrow nav --- */
  .astm-search-menu .is-search-input{ min-width:0 !important; width:100%; }
  .astm-search-menu .is-search-form{ max-width:calc(100vw - 40px); flex-wrap:wrap; }
}

/* ================================================================
   IVORY SEARCH ICON COLOR — global override (all widths)
   The plugin injects `.is-menu path.search-icon-path{fill:#1e73be}`
   (a blue) via an inline <style>. This beats it everywhere with a
   matching-specificity selector + !important so the search icon is
   amber in both the desktop nav and the mobile banner position.
   ================================================================ */
.is-menu path.search-icon-path,
.astm-search-menu.is-menu path.search-icon-path,
.main-navigation .is-menu path.search-icon-path{
  fill:var(--amber) !important;
}

/* ================================================================
   WORDMARK HOVER DIAMOND
   Mirrors the BEPCO .nav-logo behaviour: a small diamond scales in
   to the right of the wordmark on hover.

   Anchored to the <a> (not the full-width <p.site-title>), so the
   diamond sits beside the TEXT rather than the header's far edge.

   The diamond stays AMBER even as the wordmark text turns rust on
   hover — the amber mark reads against the rust text.
   ================================================================ */
.site-title a{
  position:relative;
  display:inline-block;
}
.site-title a::after{
  content:'';
  position:absolute;
  right:-14px;
  top:50%;
  width:5px;
  height:5px;
  background:var(--amber);
  transform:translateY(-50%) rotate(45deg) scale(0);
  transition:transform 0.3s cubic-bezier(0.22,0.61,0.36,1);
  pointer-events:none;
}
.site-title a:hover::after{
  transform:translateY(-50%) rotate(45deg) scale(1);
  background:var(--amber);   /* stays amber; text goes rust independently */
}


/* ============================================================
   NAV LINKS: no default underline anywhere.
   The global `a{}` rule sets text-decoration-color but never
   text-decoration:none, so nav links keep the browser's default
   underline. It's invisible against the muted grey text at rest,
   but shows as a black line once the text darkens on hover —
   competing with the amber rule that IS the intended underline.
   ============================================================ */
.main-navigation a,
.main-navigation .menu li > a,
.main-navigation .menu > li > a,
.main-navigation a:hover,
.main-navigation .menu li > a:hover,
.main-navigation .menu > li > a:hover,
.main-navigation a:focus,
.main-navigation .menu li > a:focus{
  text-decoration:none !important;
  text-decoration-line:none !important;
  box-shadow:none !important;
  background-image:none !important;
}
/* border-bottom removal is DESKTOP-ONLY — the mobile stacked menu uses
   border-bottom for its row dividers and must keep them.             */
@media (min-width:783px){
  .main-navigation a,
  .main-navigation .menu li > a,
  .main-navigation .menu > li > a,
  .main-navigation .menu li > a:hover{
    border-bottom:none !important;
  }
}

/* ============================================================
   GHOST ARCHIVE-CODE LETTERS — homepage sections
   Ported from kevin-d-jones.com's HST/PRS/PUB/MOC system so the
   two sites read as siblings. Grammar is identical: Libre
   Baskerville 700, amber at 6%, up-left drift on hover.

   Codes are utility notation, not initials:
     WFP  the publication      NEW  newly energized
     SUB  subscribe/substation CKT  a chain is a series circuit
     GND  ground — at the foot of the page

   Anchors are HTML anchors set on the outer Group blocks.
   The bottom sign-up is deliberately UNSTAMPED: the same form
   twice, stamped twice, reads as shouting. The restraint is
   what lets the other marks land.
   ============================================================ */

/* --- containers: establish the stacking + clip the ghosts --- */
#hero-overview,
#signup-top,
#recent-posts,
#blog-chains{
  position:relative;
  overflow:hidden;
}
/* #colophon is .site-footer — it already carries position:relative and
   its own full-bleed geometry (left:50%/-50vw), so only add the clip.  */
#colophon{
  overflow:hidden;
}
/* content rides above the ghost */
#hero-overview > .wp-block-group__inner-container,
#signup-top > .wp-block-group__inner-container,
#recent-posts > .wp-block-group__inner-container,
#blog-chains > .wp-block-group__inner-container,
#colophon > .footer-widgets,
#colophon > .site-info{
  position:relative;
  z-index:2;
}

/* --- the ghost itself --- */
#hero-overview::after,
#signup-top::after,
#recent-posts::after,
#blog-chains::after,
#colophon::after{
  position:absolute;
  bottom:-70px;
  right:2vw;
  font-family:'Libre Baskerville', Georgia, serif;
  font-weight:700;
  font-size:196px;
  line-height:1;
  letter-spacing:-0.04em;
  color:rgba(200,134,10,0.06);
  user-select:none;
  pointer-events:none;
  z-index:1;
  transition:transform .8s cubic-bezier(0.22,0.61,0.36,1), color .6s ease;
}

#hero-overview::after{ content:"WFP"; }
#signup-top::after{    content:"SUB"; }
#recent-posts::after{  content:"NEW"; }
#blog-chains::after{   content:"CKT"; }
#colophon::after{      content:"GND"; }

/* --- hover: drift up-left, lift opacity --- */
#hero-overview:hover::after,
#signup-top:hover::after,
#recent-posts:hover::after,
#blog-chains:hover::after,
#colophon:hover::after{
  transform:translate(-12px,-12px);
  color:rgba(200,134,10,0.10);
}

/* --- GND sits on the dark footer → lift so it reads --- */
#colophon::after{
  color:rgba(200,134,10,0.09);
}
#colophon:hover::after{
  color:rgba(200,134,10,0.14);
}

/* --- mobile: shrink so the ghost doesn't swamp a narrow column --- */
@media screen and (max-width:782px){
  #hero-overview::after,
  #signup-top::after,
  #recent-posts::after,
  #blog-chains::after,
  #colophon::after{
    font-size:111px;
    bottom:-40px;
  }
}