/* ================================================================
   GhanaTRVL — Article Page Addon Stylesheet
   article-addon-v4.css

   Loaded AFTER custom-v4.css and result-pages-addon-v4.css.
   Contains ONLY classes that are net-new to the article page.

   Nothing in this file duplicates:
     - Design tokens          (custom-v4.css :root)
     - Base typography        (custom-v4.css §02)
     - Badge colour system    (custom-v4.css §03)
     - Navbar / topbar        (custom-v4.css §04)
     - Mobile app menu        (custom-v4.css §05)
     - Social share sidebar   (custom-v4.css §06 + __share_this_sides.php)
     - Hero layers h-grad/h-atm/h-patt/h-bar/h-eyebrow/hero-h1
                              (custom-v4.css §07)
     - Section eyebrow / sh2  (custom-v4.css §09)
     - Article cards .acard   (custom-v4.css §12)
     - Footer                 (custom-v4.css §18)
     - Utility helpers        (custom-v4.css §20)
     - rp-hero / rp-breadcrumb / rp-statsbar
                              (result-pages-addon-v4.css §22-A/B/C)
     - Social brand bg colours .bg-facebook etc
                              (custom-v4.css §06)

   Sections:
   23-A. Article hero — tall variant (.art-hero)
   23-B. Article hero info pills (.hpill)
   23-C. Article breadcrumb (.art-breadcrumb)
   23-E. Article column (.article-col)
   23-G. Article typography (.art-prose)
   23-H. Inline info box (.art-infobox)
   23-I. Inline CTA band (.art-cta)
   23-J. Section divider label (.sec-label)
   23-K. Gallery strip (.art-gallery / .gal-thumb / .gal-filter-bar)
   23-N. Map card (.map-card / .art-map-area)
   23-O. Location table (.loc-table)
   23-P. Active row state (.loc-row)
   23-Q. Leaflet popup overrides (.art-map-popup-wrap)
   23-R. Leaflet core overrides
   23-S. TOC widget (.art-toc-widget)
   23-T. Author card (.art-author-card)
   23-U. Tag cloud (.art-tags)
   23-V. Sidebar newsletter (.sb-nl)
   23-W. You might also like (.art-related-section)
   23-Z. Responsive overrides
   23-AA. Highlight box (.art-highlight)
   23-AB. Inline float images (.art-img-wrap)

   Last updated: 2026-05-15
================================================================ */

.full-width-col {
  padding: 0 2.5rem 3rem;
  background: #fff;
}
@media (max-width: 991.98px) {
  .full-width-col { padding: 0 1rem 2rem; }
}

/* ================================================================
   23-A. ARTICLE HERO — tall variant
   Extends the base .rp-hero pattern from result-pages-addon-v4.css
   with a taller minimum height and article-specific content
   layout. Hero overlay layers (.h-atm, .h-patt, .h-bar,
   .h-eyebrow) are reused from custom-v4.css §07 unchanged.
================================================================ */
.art-hero {
  background-color: var(--dv);
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  min-height: clamp(380px, 55vh, 600px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Hero background image replaces CSS background-image */
.art-hero .hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%; /* matches original background-position */
  z-index: 0;
  pointer-events: none;
}

/* Gradient stack — stronger than .rp-hero, article images need more contrast */
.art-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to right,  rgba(10,4,22,.90) 0%, rgba(10,4,22,.60) 45%, rgba(10,4,22,.18) 100%),
    linear-gradient(to top,    rgba(10,4,22,.88) 0%, rgba(10,4,22,.25) 50%, transparent 85%);
  pointer-events: none;
  z-index: 1;
}

/* Ensure shared overlay layers sit above the gradient */
.art-hero .h-patt,
.art-hero .h-atm { z-index: 2; }

/* Hero content wrapper */
.art-hero-inner {
  position: relative;
  z-index: 10;
  padding: 3rem 0 1.5rem;
}




/* Article H1 — tighter tracking than the homepage hero-h1 */
.art-hero-h1 {
  font-family: var(--ff-h);
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: .75rem;
}

/* Lead paragraph inside hero */
.art-hero-lead {
  font-family: var(--ff-s);
  font-style: italic;
  font-size: clamp(.85rem, 1.5vw, 1rem);
  line-height: 1.75;
  color: rgba(255,255,255,.6);
  margin-bottom: 1.25rem;
  max-width: 560px;
}

/* Meta row — date / author / views / read-time */
.art-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-bottom: 0;
}
.art-hero-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-h);
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,.45);
}
.art-hero-meta-item i {
  color: rgba(246,238,39,.55);
  font-size: 12px;
}


/* ================================================================
   23-B. ARTICLE HERO INFO PILLS
   Quick-reference boxes anchored to the bottom of the hero.
   Open/close hours and entry fees only — keep to 2 max.
================================================================ */
.art-hero-pills {
  position: relative;
  z-index: 10;
  padding-bottom: 2rem;
}

.hpill {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(35,15,66,.65);
  border: 1px solid rgba(246,238,39,.15);
  border-radius: 6px;
  padding: 11px 15px;
}
.hpill i {
  color: var(--ye);
  font-size: 14px;
  margin-top: 2px;
  flex-shrink: 0;
}
.hpill-label {
  display: block;
  font-family: var(--ff-h);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(246,238,39,.75);
  margin-bottom: 4px;
}
.hpill-text {
  font-family: var(--ff-h);
  font-size: 11px;
  line-height: 1.55;
  color: rgba(255,255,255,.55);
}


/* ================================================================
   23-C. ARTICLE BREADCRUMB
   Dark band directly below the hero.
   Distinct from .breadcrumb-bar (used inside hero on legal pages).
================================================================ */
.art-breadcrumb {
  background: var(--dv);
  border-bottom: 1px solid rgba(246,238,39,.1);
  padding: 9px 0;
}
.art-breadcrumb a,
.art-breadcrumb span {
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255,255,255,.35);
  text-decoration: none;
}
.art-breadcrumb a:hover  { color: var(--ye); }
.art-breadcrumb .bc-sep  { color: rgba(255,255,255,.15); font-size: 9px; margin: 0 4px; }
.art-breadcrumb .bc-cur  { color: rgba(255,255,255,.55); }



/* ================================================================
   23-E. ARTICLE COLUMN
   White surface, right border on desktop only.
================================================================ */
.article-col {
  background: #fff;
  border-right: 1px solid var(--rule);
  padding: 2.5rem 2.5rem 3rem;
}



/* ================================================================
   23-G. ARTICLE TYPOGRAPHY
   All scoped under .art-prose to avoid bleed into sidebars,
   widgets, or any other container on the page.
   h2/h3 use custom-v4 tokens but the heading styles themselves
   are not defined globally — this is the first definition.
================================================================ */
.art-prose .intro-p {
  font-family: var(--ff-s);
  font-style: italic;
  font-size: clamp(1rem, 1.8vw, 1.1rem);
  line-height: 1.85;
  color: #3d3050;
  border-left: 4px solid var(--ye);
  padding: .85rem 1.25rem;
  background: #fffef0;
  border-radius: 0 5px 5px 0;
  margin-bottom: 1.5rem;
}

.art-prose h2 {
  font-family: var(--ff-h);
  font-weight: 800;
  font-size: clamp(1.2rem, 2.5vw, 1.45rem);
  letter-spacing: -.02em;
  color: var(--dv);
  margin: 2.25rem 0 .75rem;
  padding-bottom: .45rem;
  border-bottom: 2px solid var(--ye);
  display: inline-block;
}
.art-prose h2:first-of-type { margin-top: 0; }

.art-prose h3 {
  font-family: var(--ff-h);
  font-weight: 700;
  font-size: clamp(1rem, 1.8vw, 1.1rem);
  color: var(--mv);
  margin: 1.75rem 0 .5rem;
  padding-left: 10px;
  border-left: 3px solid var(--gr);
}

.art-prose p {
  font-family: var(--ff-s);
  font-weight: 300;
  font-size: clamp(.9rem, 1.5vw, 1rem);
  line-height: 1.9;
  color: #2a1f3d;
  margin-bottom: 1rem;
}

.art-prose ul,
.art-prose ol {
  font-family: var(--ff-s);
  font-weight: 300;
  font-size: clamp(.9rem, 1.5vw, 1rem);
  line-height: 1.85;
  color: #2a1f3d;
  margin: 0 0 1rem 1rem;
  padding-left: 1rem;
}
.art-prose ul li,
.art-prose ol li { margin-bottom: .35rem; }

.art-prose strong { font-weight: 700; color: var(--dv); }

/* .a-link already defined in custom-v4.css §20 — not repeated here */


/* ================================================================
   23-H. INLINE INFO BOX
   Open/close hours + entry fees within the article prose flow.
   Two-column on md+, stacked on mobile.
================================================================ */
.art-infobox {
  background: var(--wh2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0;
}
.art-infobox .aib-label {
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--mu);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.art-infobox .aib-label i { color: var(--ye); font-size: 13px; }
.art-infobox p {
  font-family: var(--ff-s);
  font-size: .875rem;
  line-height: 1.65;
  color: #2a1f3d;
  margin: 0;
}


/* ================================================================
   23-I. INLINE CTA BAND
   Light surface with yellow-green gradient accent bar.
   Button is optional — box reads cleanly without it.
================================================================ */
.art-cta {
  background: #fffef0;
  border: 1px solid rgba(197,220,100,.5);
  border-left: 5px solid var(--gr);
  border-radius: 0 6px 6px 0;
  padding: 1.25rem 1.5rem;
  margin: 2.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.art-cta p {
  font-family: var(--ff-s);
  font-style: italic;
  font-size: .95rem;
  color: #2a1f3d;          /* near-black on light bg — fully readable */
  line-height: 1.7;
  font-weight: 600;
  margin: 0;
  flex: 1;
}

.art-cta-btn {
  flex-shrink: 0;
  background: var(--dv);
  color: var(--ye);
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 9px 20px;
  border-radius: 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s, color .18s;
}
.art-cta-btn:hover {
  background: var(--mv);
  color: #fff;
}

@media (max-width: 767.98px) {
  .art-cta { flex-direction: column; }
}


/* ================================================================
   23-J. SECTION DIVIDER LABEL
   Yellow accent bar + heading + full-width rule.
   Used before gallery, map, author, tags.
================================================================ */
.sec-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2.5rem 0 1.25rem;
}
.sec-label::before {
  content: '';
  flex-shrink: 0;
  width: 4px;
  height: 20px;
  background: var(--ye);
  border-radius: 2px;
}
.sec-label span {
  font-family: var(--ff-h);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -.01em;
  color: var(--dv);
  white-space: nowrap;
}
.sec-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}


/* ================================================================
   23-K. GALLERY STRIP
   Isotope manages positioning — .art-gallery is the container,
   .gal-thumb is each item.
================================================================ */
.art-gallery {
  position: relative;
  margin-bottom: .5rem;
}

/* Each Isotope item — width drives the column count */
.gal-thumb {
  width: 25%;          /* 4 columns */
  padding: 2.5px;
  box-sizing: border-box;
}

/* Inner wrapper — this carries the aspect ratio, image and overlay */
.gal-thumb-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
  background: var(--wh2);
  cursor: pointer;
  display: block;
}

/* The lightbox anchor must fill the inner wrapper completely */
.gal-thumb-inner a {
  display: block;
  width: 100%;
  height: 100%;
}

/* Image fills the anchor */
.gal-thumb-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.gal-thumb-inner:hover img { transform: scale(1.07); }

/* Overlay fills the inner wrapper */
.gal-item-overlay {
  position: absolute;
  inset: 0;
  background: rgba(35,15,66,.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 8px;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;  /* let clicks pass through to the <a> */
}
.gal-thumb-inner:hover .gal-item-overlay { opacity: 1; }

.gal-item-title {
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1.3;
  margin-bottom: 4px;
}
.gal-item-credit {
  font-family: var(--ff-h);
  font-size: 9px;
  color: rgba(255,255,255,.6);
  display: flex;
  align-items: center;
  gap: 4px;
}
.gal-item-credit a {
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: color .15s;
}
.gal-item-credit a:hover { color: var(--ye); }

/* Responsive */
@media (max-width: 767.98px) { .gal-thumb { width: 33.333%; } }
@media (max-width: 575.98px) { .gal-thumb { width: 50%; } }

/* Filter bar */
.gal-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1.25rem;
}
.gal-filter-lbl {
  font-family: var(--ff-h);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--mu);
  margin-right: 4px;
}
.gal-fpill {
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--rule);
  background: transparent;
  color: var(--mu);
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
}
.gal-fpill:hover  { background: var(--mv); border-color: var(--mv); color: #fff; }
.gal-fpill.active { background: var(--mv); border-color: var(--mv); color: #fff; }
.gal-count {
  margin-left: auto;
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 600;
  color: var(--mu);
}

/* ================================================================
   YOUTUBE VIDEO BLOCK — case 7
   .portfolio-image must be position:relative (set inline or here)
   .yt-play-trigger — centred play icon overlay
================================================================ */
.yt-play-trigger {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 4rem;        /* size of the play icon */
  text-decoration: none;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 5px;     /* match .rounded-6 if that maps to 5px, adjust if needed */
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.portfolio-image:hover .yt-play-trigger,
.portfolio-image:focus-within .yt-play-trigger {
  opacity: 1;
  background: rgba(0, 0, 0, 0.45);
}

/* Always-visible play icon (no hover required on touch devices) */
@media (hover: none) {
  .yt-play-trigger {
    opacity: 1;
  }
}

/* ================================================================
   MAP ADDITIONS FOR article-addon-v4.css
   Replace existing §23-N / §23-O blocks with these.
   §23-P (active row) and §23-Q (Leaflet popup) are net new.
 
   §23-N. Map card wrapper
   §23-O. Location table
   §23-P. Active row state
   §23-Q. Leaflet popup overrides
   §23-R. Leaflet core overrides
================================================================ */
 
 
/* ── §23-N. MAP CARD ── */
.map-card {
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.map-card-head {
  background: var(--dv);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.map-card-head span {
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ye);
}
.map-card-head i {
  font-size: 13px;
  color: rgba(246,238,39,.6);
}
 
/* Leaflet map render target */
.art-map-area {
  height: 320px;
  width: 100%;
  display: block;
  background: var(--wh2);
  /* z-index context — keeps Leaflet controls below navbar */
  z-index: 0;
  position: relative;
}
 
/* Leaflet pin icon — no default background/border */
.art-map-pin {
  background: none !important;
  border: none !important;
}
 
 
/* ── §23-O. LOCATION TABLE ── */
.loc-table { font-size: .825rem; margin: 0; }
 
.loc-table thead th {
  font-family: var(--ff-h);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--mu);
  background: var(--wh2);
  border-bottom: 1px solid var(--rule);
  padding: 8px 12px;
}
 
.loc-table tbody td {
  padding: 8px 12px;
  vertical-align: middle;
  border-bottom: 1px solid var(--rule);
  font-family: var(--ff-h);
  font-size: .8rem;
  color: #2a1f3d;
}
.loc-table tbody tr:last-child td { border-bottom: none; }
 
.loc-pin {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mv);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-h);
  font-size: 9px;
  font-weight: 800;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.loc-name  { font-weight: 700; color: var(--dv); }
.loc-area  { color: var(--mu); font-size: .75rem; }
 
.loc-link,
.loc-more {
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 700;
  color: var(--mv);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s;
}
.loc-link:hover,
.loc-more:hover { color: var(--dv); }
 
 
/* ── §23-P. ACTIVE / HOVER ROW STATE ── */
.loc-row {
  cursor: pointer;
  transition: background .15s;
}
.loc-row:hover {
  background: var(--wh2);
}
.loc-row-active {
  background: rgba(246,238,39,.12) !important;
}
.loc-row-active .loc-pin {
  background: var(--ye);
  color: var(--dv);
}
.loc-row-active .loc-name { color: var(--mv); }
 
 
/* ── §23-Q. LEAFLET POPUP OVERRIDES ── */
/* .art-map-popup-wrap — the Leaflet popup container class */
.art-map-popup-wrap .leaflet-popup-content-wrapper {
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(35,15,66,.2);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
}
.art-map-popup-wrap .leaflet-popup-content {
  margin: 0;
  line-height: 1;
}
.art-map-popup-wrap .leaflet-popup-tip-container {
  margin-top: -1px;
}
.art-map-popup-wrap .leaflet-popup-tip {
  box-shadow: none;
}
 
/* Popup inner content — built by JS buildPopup() */
.art-map-popup {
  padding: 12px 14px;
  min-width: 160px;
  max-width: 220px;
}
.amp-title {
  font-family: var(--ff-h);
  font-weight: 800;
  font-size: .8rem;
  color: var(--dv);
  margin-bottom: 4px;
  line-height: 1.3;
}
.amp-info {
  font-family: var(--ff-h);
  font-size: .7rem;
  color: var(--mu);
  margin-bottom: 6px;
  line-height: 1.4;
}
.amp-link {
  font-family: var(--ff-h);
  font-size: .7rem;
  font-weight: 700;
  color: var(--mv);
  text-decoration: none;
  transition: color .15s;
}
.amp-link:hover { color: var(--dv); }
 
/* Close button */
.art-map-popup-wrap .leaflet-popup-close-button {
  color: var(--mu) !important;
  font-size: 16px !important;
  padding: 4px 6px !important;
  top: 4px !important;
  right: 4px !important;
}
.art-map-popup-wrap .leaflet-popup-close-button:hover {
  color: var(--dv) !important;
  background: none !important;
}
 
 
/* ── §23-R. LEAFLET CORE OVERRIDES ── */
/* Ensure Leaflet z-index does not bleed above sticky navbar */
.leaflet-top,
.leaflet-bottom {
  z-index: 400 !important;  /* navbar is z-index 1020 — this keeps controls below it */
}
 
/* Leaflet attribution — match site typography */
.leaflet-control-attribution {
  font-family: var(--ff-h) !important;
  font-size: 9px !important;
  color: var(--mu) !important;
  background: rgba(255,255,255,.85) !important;
}
.leaflet-control-attribution a {
  color: var(--mv) !important;
}

/* ================================================================
   23-S. ARTICLE TOC WIDGET
   Overrides the legal page .toc-list styles for the article
   sidebar context. Light surface on white card — no dark bg.
================================================================ */
.art-toc-widget {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.art-toc-widget .toc-head {
  background: var(--dv);
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.art-toc-widget .toc-head span {
  font-family: var(--ff-h);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ye);
}
.art-toc-widget .toc-head i {
  font-size: 12px;
  color: rgba(246,238,39,.6);
}

/* Override legal page .toc-list styles for article context */
.art-toc-widget .toc-list {
  list-style: none;
  padding: .5rem 0;
  margin: 0;
  counter-reset: toc-counter;
}
.art-toc-widget .toc-list li {
  counter-increment: toc-counter;
}
.art-toc-widget .toc-list li a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--ff-h);
  font-size: .78rem;
  font-weight: 500;
  color: var(--dv);
  text-decoration: none;
  padding: .4rem 1rem;
  border-left: 3px solid transparent;
  line-height: 1.4;
  transition: color .15s, border-color .15s, background .15s;
}
.art-toc-widget .toc-list li a::before {
  content: counter(toc-counter);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--wh2);
  color: var(--mu);
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.art-toc-widget .toc-list li a:hover {
  color: var(--mv);
  background: var(--wh2);
  border-left-color: var(--rule);
}
.art-toc-widget .toc-list li a:hover::before {
  background: var(--mv);
  color: #fff;
}
.art-toc-widget .toc-list li a.active {
  color: var(--dv);
  font-weight: 700;
  background: rgba(246,238,39,.08);
  border-left-color: var(--ye);
}
.art-toc-widget .toc-list li a.active::before {
  background: var(--ye);
  color: var(--dv);
}

/* H2 entries — primary level */
.art-toc-widget .toc-list li.toc-level-1 a {
  font-weight: 600;
  color: var(--dv);
}

/* H3 entries — indented, lighter weight */
.art-toc-widget .toc-list li.toc-level-2 a {
  padding-left: 2rem;
  font-weight: 400;
  font-size: .74rem;
  color: var(--mu);
}
.art-toc-widget .toc-list li.toc-level-2 a::before {
  /* Smaller counter bullet for H3 */
  width: 12px;
  height: 12px;
  font-size: 8px;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--mu);
}
.art-toc-widget .toc-list li.toc-level-2 a:hover::before {
  background: var(--mv);
  border-color: var(--mv);
  color: #fff;
}
.art-toc-widget .toc-list li.toc-level-2 a.active {
  color: var(--mv);
  background: rgba(89,45,140,.05);
  border-left-color: var(--gr);
}
.art-toc-widget .toc-list li.toc-level-2 a.active::before {
  background: var(--gr);
  border-color: var(--gr);
  color: var(--dv);
}

/* ================================================================
   23-T. AUTHOR CARD
================================================================ */
.art-author-card {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1.25rem;
  display: flex;
  gap: 1rem;
  background: #fff;
}
.art-author-avatar {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--ye);
}
.art-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.art-author-name {
  font-family: var(--ff-h);
  font-weight: 800;
  font-size: .95rem;
  color: var(--dv);
  margin-bottom: 2px;
}
.art-author-role {
  font-family: var(--ff-h);
  font-size: .7rem;
  color: var(--mu);
  line-height: 1.45;
  margin-bottom: .5rem;
}
.art-author-bio {
  font-family: var(--ff-s);
  font-size: .825rem;
  line-height: 1.65;
  color: #3d3050;
  margin-bottom: .65rem;
}
.art-author-btn {
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 16px;
  background: var(--wh2);
  color: var(--mv);
  text-decoration: none;
  border: 1px solid var(--rule);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 6px;
  margin-bottom: 4px;
  transition: background .15s, color .15s, border-color .15s;
}
.art-author-btn:hover {
  background: var(--mv);
  color: #fff;
  border-color: var(--mv);
}

.art-author-coop {
  font-family: var(--ff-h);
  font-size: .7rem;
  color: var(--mu);
  line-height: 1.45;
  margin-bottom: .5rem;
}

/* ================================================================
   23-U. TAG CLOUD
================================================================ */
.art-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.art-tag {
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 16px;
  background: var(--wh2);
  color: var(--mv);
  border: 1px solid var(--rule);
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.art-tag:hover {
  background: var(--mv);
  color: #fff;
  border-color: var(--mv);
}




/* ── §23-W. YOU MIGHT ALSO LIKE — full width discovery section ── */
.art-related-section {
  background: var(--dv);
  padding: 3rem 0 3.5rem;
  margin-top: 2rem;
}
.art-related-heading {
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--ye);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.art-related-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(246,238,39,.2);
}

/* Card */
.art-rec-card {
  display: block;
  text-decoration: none;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(246,238,39,.1);
  border-radius: 6px;
  overflow: hidden;
  height: 100%;
  transition: border-color .18s, background .18s;
}
.art-rec-card:hover {
  border-color: rgba(246,238,39,.3);
  background: rgba(255,255,255,.08);
}

/* Image */
.art-rec-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* Card body */
.art-rec-body { padding: .875rem 1rem 1rem; }
.art-rec-category {
  font-family: var(--ff-h);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ye);
  margin-bottom: .4rem;
  opacity: .75;
}
.art-rec-title {
  font-family: var(--ff-h);
  font-weight: 700;
  font-size: .875rem;
  color: #fff;
  line-height: 1.35;
  margin-bottom: .4rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.art-rec-text {
  font-family: var(--ff-s);
  font-size: .775rem;
  line-height: 1.6;
  color: rgba(255,255,255,.5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ================================================================
   23-V. SIDEBAR NEWSLETTER — light surface variant
   Replaces dark .sb-nl with white card + violet accent header
   matching the .art-toc-widget pattern used in the sidebar.
================================================================ */
.sb-nl {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
}

/* Header band — matches .sw-head */
.sb-nl-head {
  background: var(--dv);
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.sb-nl-head i {
  font-size: 12px;
  color: rgba(246,238,39,.6);
}
.sb-nl-heading {
  font-family: var(--ff-h);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ye);
  margin: 0;
}

/* Body — light surface, dark readable text */
.sb-nl-body {
  padding: 1rem;
}
.sb-nl-sub {
  font-family: var(--ff-s);
  font-style: italic;
  font-size: .8rem;
  color: var(--mu);
  line-height: 1.55;
  margin-bottom: .75rem;
}

/* Input — matches site form style */
.sb-nl-input {
  width: 100%;
  border-radius: 4px;
  border: 1.5px solid var(--rule);
  background: var(--wh);
  color: var(--bk);
  padding: 8px 10px;
  font-size: .8rem;
  font-family: var(--ff-h);
  margin-bottom: 8px;
  outline: none;
  transition: border-color .15s;
}
.sb-nl-input::placeholder { color: var(--mu); opacity: .6; }
.sb-nl-input:focus        { border-color: var(--mv); background: #fff; }

/* Submit button — yellow on dark, matches .nl-b and .btn-cta */
.sb-nl-btn {
  width: 100%;
  background: var(--dv);
  color: var(--ye);
  border: none;
  border-radius: 4px;
  padding: 9px;
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.sb-nl-btn:hover {
  background: var(--mv);
  color: #fff;
}

/* GDPR micro-note */
.sb-nl-gdpr {
  font-family: var(--ff-h);
  font-size: 9px;
  color: var(--mu);
  line-height: 1.5;
  margin-top: 6px;
  opacity: .7;
  text-align: center;
}
.sb-nl-gdpr a {
  color: var(--mv);
  text-decoration: none;
}
.sb-nl-gdpr a:hover { text-decoration: underline; }

/* Inline feedback message after subscribe attempt */
.sb-nl-message {
  font-family: var(--ff-h);
  font-size: 10px;
  line-height: 1.5;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 4px;
  text-align: center;
}
.sb-nl-message--ok  { background: rgba(197,220,100,.15); color: #3a6000; }
.sb-nl-message--err { background: rgba(220,53,69,.08);   color: #8b0000; }

/* ================================================================
   23-Z. RESPONSIVE OVERRIDES
================================================================ */

/* ── < lg (991px) — sidebar drops below article ── */
@media (max-width: 991.98px) {
  .article-col {
    border-right: none;
    padding: 1.5rem 1rem 2rem;
  }
  .art-hero-lead { max-width: 100%; }
}

/* ── < md (767px) — gallery drops to 3 columns ── */
@media (max-width: 767.98px) {
  .art-gallery { grid-template-columns: repeat(3, 1fr); }
  .art-cta     { flex-direction: column; }
  .art-author-card { flex-direction: column; }
}

/* ── < sm (575px) — gallery drops to 2 columns ── */
@media (max-width: 575.98px) {
  .art-gallery { grid-template-columns: repeat(2, 1fr); }
  .art-hero-pills { display: none; }   /* pills too cramped — info is in the prose infobox */
}


/* ================================================================
   23-AA. HIGHLIGHT BOX — case 12
   Three semantic variants driven by a modifier class:
   .art-tip     — green / positive / pro tip
   .art-warning — yellow / caution
   .art-fact    — violet / did you know / key fact
   Default (no modifier) falls back to .art-tip styling.
================================================================ */
.art-highlight {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin: 1.75rem 0;
  border-left: 4px solid var(--gr);
  background: rgba(197,220,100,.08);
}

/* Icon column */
.art-highlight-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gr);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.art-highlight-icon i {
  font-size: 14px;
  color: var(--dv);
}

/* Text column */
.art-highlight-body { flex: 1; min-width: 0; }
.art-highlight-label {
  font-family: var(--ff-h);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--gr);
  margin-bottom: 5px;
  display: block;
}
.art-highlight-text {
  font-family: var(--ff-s);
  font-size: .9rem;
  line-height: 1.75;
  color: #2a1f3d;
  margin: 0;
}
.art-highlight-text a {
  color: var(--mv);
  font-weight: 600;
  text-underline-offset: 2px;
}

/* ── Variant: Warning (yellow) ── */
.art-highlight.art-warning {
  border-left-color: var(--ye);
  background: rgba(246,238,39,.07);
}
.art-highlight.art-warning .art-highlight-icon {
  background: var(--ye);
}
.art-highlight.art-warning .art-highlight-label {
  color: #a89900;   /* darkened ye for legibility on white */
}

/* ── Variant: Fact / Did You Know (violet) ── */
.art-highlight.art-fact {
  border-left-color: var(--mv);
  background: rgba(89,45,140,.07);
}
.art-highlight.art-fact .art-highlight-icon {
  background: var(--mv);
}
.art-highlight.art-fact .art-highlight-icon i {
  color: #fff;
}
.art-highlight.art-fact .art-highlight-label {
  color: var(--mv);
}

/* ================================================================
   23-AB. INLINE FLOAT IMAGES — case 4
   Image floated left or right within article prose.
   .art-img-wrap          — outer wrapper (carries the float)
   .art-img-wrap.float-left  — floats left
   .art-img-wrap.float-right — floats right
   .art-img-figure        — image + credit stacked together
   .art-img-credit        — attribution line below image
================================================================ */
.art-img-wrap {
  max-width: 340px;
  margin-bottom: 1.25rem;
}
.art-img-wrap.float-left {
  float: left;
  margin-right: 1.75rem;
  margin-top: .25rem;
}
.art-img-wrap.float-right {
  float: right;
  margin-left: 1.75rem;
  margin-top: .25rem;
}

/* Image itself */
.art-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 5px;
}

/* Lightbox anchor — no underline on hover */
.art-img-wrap a { text-decoration: none; display: block; }

/* Subtle zoom on hover */
.art-img-wrap a img {
  transition: transform .3s ease, opacity .2s;
}
.art-img-wrap a:hover img {
  transform: scale(1.02);
  opacity: .92;
}

/* Credit line */
.art-img-credit {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 500;
  color: var(--mu);
  line-height: 1.4;
}
.art-img-credit i {
  font-size: 11px;
  color: var(--mv);
  flex-shrink: 0;
  opacity: .7;
}
.art-img-credit a {
  color: var(--mu);
  text-decoration: none;
  transition: color .15s;
}
.art-img-credit a:hover { color: var(--mv); }

/* Clearfix — ensures prose clears the float correctly */
.art-prose-clearfix::after {
  content: '';
  display: table;
  clear: both;
}

/* ── Responsive — unfloat below md ── */
@media (max-width: 767.98px) {
  .art-img-wrap.float-left,
  .art-img-wrap.float-right {
    float: none;
    max-width: 100%;
    margin: 0 0 1.25rem 0;
  }
}