/* ============================================================================
   PRIMER AFRICA DISPATCH — WORLD-CLASS EDITORIAL CSS
   Design: Bento grid · Full-bleed heroes · Dark/light sections · Animations
   Fonts: Plus Jakarta Sans (UI) + Instrument Serif (display/italic)
   Palette: #0d0d0d ink · #105c3e brand green · #c9a227 gold · #f0f0eb paper
============================================================================ */

/* ── GOOGLE FONTS ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400&family=Instrument+Serif:ital@0;1&display=swap');

/* ── TOKENS ──────────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --g:        #105c3e;  /* Primer Africa green */
  --g-mid:    #0d7a51;
  --g-pale:   #d4ede2;
  --gold:     #c9a227;
  --gold-lt:  #e8bb2e;
  --gold-pale:#fef8e6;

  /* Ink scale */
  --ink:      #0d0d0d;
  --ink-90:   rgba(13,13,13,.90);
  --ink-70:   rgba(13,13,13,.70);
  --ink-40:   rgba(13,13,13,.40);
  --ink-12:   rgba(13,13,13,.08);

  /* Surfaces */
  --paper:    #f5f3ee;
  --white:    #ffffff;
  --dark:     #0d0d0d;
  --dark-2:   #161616;
  --dark-3:   #1e1e1e;
  --rule:     rgba(13,13,13,.10);

  /* Beat colours */
  --b-eco:    #105c3e;
  --b-cul:    #8b4513;
  --b-tech:   #1c1c3d;
  --b-pol:    #7b1c1c;
  --b-agri:   #2e5e28;
  --b-health: #054d6e;
  --b-press:  #2b3d52;

  /* Type */
  --ui:     'Plus Jakarta Sans', system-ui, sans-serif;
  --serif:  'Instrument Serif', Georgia, serif;

  /* Layout */
  --max:    1320px;
  --g-pad:  clamp(16px,4vw,56px);
  --col:    700px; /* article reading column */
  --radius: 4px;
}

/* ── RESET ────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:62.5%;scroll-behavior:smooth}
body{
  font-family:var(--ui);
  font-size:1.6rem;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .15s}
a:hover,a:focus{color:var(--g)}
h1,h2,h3,h4,h5,h6{line-height:1.1;color:var(--ink)}
p{margin-bottom:1.6rem}
ul,ol{margin:0 0 1.6rem 2.4rem}
::selection{background:var(--g);color:#fff}

/* ── LAYOUT ───────────────────────────────────────────────────────────────── */
.d-wrap{max-width:var(--max);margin:0 auto;padding:0 var(--g-pad)}
.d-screen-reader{clip:rect(1px,1px,1px,1px);position:absolute;overflow:hidden;height:1px;width:1px}

/* ── TOP STRIP ────────────────────────────────────────────────────────────── */
.d-topstrip{
  background:var(--g);
  border-bottom:2px solid var(--gold);
  font-family:var(--ui);
  font-size:1.1rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.75)
}
.d-topstrip-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:3.8rem;
  gap:1.2rem
}
.d-topstrip-left{display:flex;align-items:center;gap:1.4rem;min-width:0;overflow:hidden}
.d-topstrip-right{display:flex;align-items:center;gap:1.4rem;flex-shrink:0}
.d-topstrip a{color:rgba(255,255,255,.70);transition:color .15s}
.d-topstrip a:hover{color:var(--gold-lt)}
.d-topstrip-date{color:rgba(255,255,255,.50);white-space:nowrap;flex-shrink:0}
.d-topstrip-sep{color:rgba(255,255,255,.25);flex-shrink:0}
.d-topstrip-tag{color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-topstrip-pill{
  background:var(--gold);
  color:var(--ink);
  font-weight:700;
  padding:3px 12px;
  border-radius:2px;
  font-size:1.05rem
}
.d-topstrip-pill:hover{background:var(--gold-lt);color:var(--ink)}

/* ── MASTHEAD ─────────────────────────────────────────────────────────────── */
.d-masthead{
  background:var(--white);
  padding:1.6rem 0;
  border-bottom:1px solid var(--rule)
}
.d-masthead-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem
}
.d-brand{display:flex;flex-direction:column;gap:.3rem;text-decoration:none}
.d-brand-name{
  font-family:var(--serif);
  font-size:clamp(3rem,5.5vw,5.8rem);
  font-weight:400;
  line-height:1;
  letter-spacing:-.04em;
  color:var(--ink)
}
.d-brand-name em{font-style:italic;color:var(--g)}
.d-brand-name:hover .d-brand-name{color:var(--g)}
.d-brand:hover .d-brand-name{color:var(--g)}
.d-brand-tag{
  font-family:var(--ui);
  font-size:1.05rem;
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-40)
}
.d-brand img{height:36px;width:auto}
/* WordPress custom logo — must use !important, WP sets inline dimensions */
.custom-logo-link{display:flex;align-items:center;line-height:1}
.custom-logo{
  height:48px !important;
  width:auto !important;
  max-width:240px !important;
  max-height:48px !important;
  object-fit:contain
}
.d-masthead-actions{display:flex;align-items:center;gap:1.2rem}
.d-search-btn{
  background:none;
  border:1px solid var(--rule);
  border-radius:2px;
  cursor:pointer;
  padding:8px 12px;
  color:var(--ink-40);
  transition:border-color .15s,color .15s;
  display:flex;align-items:center;gap:6px;
  font-family:var(--ui);font-size:1.1rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase
}
.d-search-btn:hover{border-color:var(--g);color:var(--g);background:none}
.d-search-btn svg{width:16px;height:16px}

/* ── NAV BAR ──────────────────────────────────────────────────────────────── */
.d-nav{
  background:var(--dark-2);
  position:sticky;
  top:0;
  z-index:200;
  border-bottom:1px solid rgba(255,255,255,.06)
}
.d-nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between
}
.d-menu{
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
  gap:0;
  overflow-x:auto;
  scrollbar-width:none
}
.d-menu::-webkit-scrollbar{display:none}
.d-menu>li{position:relative;flex-shrink:0}
.d-menu>li>a{
  display:block;
  font-family:var(--ui);
  font-size:1.2rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.60);
  padding:1.4rem 1.8rem;
  border-bottom:2px solid transparent;
  white-space:nowrap;
  transition:color .15s,border-color .15s
}
.d-menu>li>a:hover,
.d-menu>li.current-menu-item>a,
.d-menu>li.current-menu-ancestor>a{
  color:#fff;
  border-bottom-color:var(--gold)
}
/* dropdown */
.d-menu>li>ul{
  position:absolute;top:100%;left:0;
  background:var(--dark-2);
  border:1px solid rgba(255,255,255,.08);
  border-top:2px solid var(--gold);
  min-width:20rem;
  list-style:none;padding:.8rem 0;margin:0;
  opacity:0;pointer-events:none;
  transform:translateY(6px);
  transition:opacity .18s,transform .18s;z-index:300
}
.d-menu>li:hover>ul,.d-menu>li:focus-within>ul{opacity:1;pointer-events:auto;transform:translateY(0)}
.d-menu>li>ul li a{
  display:block;padding:1rem 1.8rem;
  font-size:1.15rem;font-weight:500;
  letter-spacing:.04em;text-transform:none;
  color:rgba(255,255,255,.65);
  transition:color .15s,background .15s
}
.d-menu>li>ul li a:hover{color:#fff;background:rgba(255,255,255,.06)}

/* hamburger */
.d-nav-toggle{
  display:none;
  background:none;
  border:1px solid rgba(255,255,255,.18);
  border-radius:2px;
  cursor:pointer;
  padding:8px;
  color:rgba(255,255,255,.7);
  gap:5px;flex-direction:column;
  justify-content:center;align-items:center;
  margin:0 0 0 1rem
}
.d-nav-toggle .bar{display:block;width:20px;height:1.5px;background:currentColor;transition:transform .25s,opacity .2s}
.d-nav-toggle.open .bar:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.d-nav-toggle.open .bar:nth-child(2){opacity:0}
.d-nav-toggle.open .bar:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ── SEARCH OVERLAY ───────────────────────────────────────────────────────── */
.d-search-overlay{
  position:fixed;inset:0;
  background:rgba(13,13,13,.96);
  backdrop-filter:blur(12px);
  z-index:900;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .2s
}
.d-search-overlay.open{opacity:1;pointer-events:auto}
.d-search-box{width:min(680px,90vw)}
.d-search-label{
  font-size:1.1rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.40);
  margin-bottom:1.6rem;display:block
}
.d-search-form{display:flex;border-bottom:1.5px solid rgba(255,255,255,.25)}
.d-search-form input[type="search"]{
  flex:1;background:transparent;border:none;outline:none;
  font-family:var(--serif);font-style:italic;
  font-size:3.2rem;color:#fff;
  padding:1rem 0;caret-color:var(--gold);
  min-height:auto
}
.d-search-form input::placeholder{color:rgba(255,255,255,.2)}
.d-search-form button{
  background:none;border:none;cursor:pointer;
  color:rgba(255,255,255,.50);padding:0 1.4rem;
  transition:color .15s;min-height:auto
}
.d-search-form button:hover{color:var(--gold);background:none}
.d-search-form button svg{width:22px;height:22px}
.d-search-esc{
  font-size:1.1rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.35);
  margin-top:1.4rem;cursor:pointer;
  background:none;border:none;min-height:auto;padding:0;
  transition:color .15s
}
.d-search-esc:hover{color:rgba(255,255,255,.70);background:none}

/* ── CATEGORY LABEL ───────────────────────────────────────────────────────── */
.d-cat{
  font-family:var(--ui);
  font-size:1.05rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--g);display:inline-block;
  transition:opacity .15s
}
.d-cat:hover{opacity:.7}
.d-cat[data-beat="eco"]   {color:var(--b-eco)}
.d-cat[data-beat="cul"]   {color:var(--b-cul)}
.d-cat[data-beat="tech"]  {color:var(--b-tech)}
.d-cat[data-beat="pol"]   {color:var(--b-pol)}
.d-cat[data-beat="agri"]  {color:var(--b-agri)}
.d-cat[data-beat="health"]{color:var(--b-health)}
.d-cat[data-beat="press"] {color:var(--b-press)}
/* On dark backgrounds */
.d-dark .d-cat{color:var(--gold-lt) !important}

/* ── META LINE ────────────────────────────────────────────────────────────── */
.d-meta{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:.4rem 1rem;
  font-family:var(--ui);font-size:1.1rem;font-weight:400;
  color:var(--ink-40)
}
.d-meta-sep{color:var(--ink-12)}
.d-meta a{color:var(--ink-40);transition:color .15s}
.d-meta a:hover{color:var(--g)}
.d-dark .d-meta{color:rgba(255,255,255,.40)}
.d-dark .d-meta a{color:rgba(255,255,255,.40)}
.d-dark .d-meta a:hover{color:var(--gold-lt)}

/* ── SECTION TITLE ────────────────────────────────────────────────────────── */
.d-section-title{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:1.4rem;
  border-bottom:1.5px solid var(--ink);
  margin-bottom:3.2rem;
  gap:1.6rem
}
.d-dark .d-section-title{border-bottom-color:rgba(255,255,255,.15)}
.d-section-label{
  font-family:var(--ui);
  font-size:1.05rem;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink)
}
.d-dark .d-section-label{color:#fff}
.d-section-more{
  font-family:var(--ui);font-size:1.05rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--g);white-space:nowrap;flex-shrink:0
}
.d-section-more::after{content:' →'}
.d-section-more:hover{color:var(--g-mid)}
.d-dark .d-section-more{color:var(--gold-lt)}
.d-dark .d-section-more:hover{color:var(--gold)}

/* ── READING PROGRESS ─────────────────────────────────────────────────────── */
#d-progress{
  position:fixed;top:0;left:0;
  height:3px;width:0;
  background:linear-gradient(90deg,var(--g),var(--gold));
  z-index:9999;
  transition:width .08s linear
}

/* ========================================================================
   HOMEPAGE — EDITORIAL BENTO LAYOUT
======================================================================== */

.d-homepage{background:var(--paper)}

/* ── CINEMATIC HERO ───────────────────────────────────────────────────────── */
.d-hero{
  position:relative;
  overflow:hidden;
  height:clamp(480px,70vh,820px);
  background:var(--dark)
}
.d-hero-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:saturate(.8) brightness(.55);
  transform:scale(1.04);
  transition:transform 8s ease
}
.d-hero:hover .d-hero-bg{transform:scale(1.0)}

.d-hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(
    to top,
    rgba(13,13,13,.92) 0%,
    rgba(13,13,13,.55) 40%,
    rgba(13,13,13,.18) 80%,
    transparent 100%
  )
}
.d-hero-content{
  position:absolute;
  bottom:0;left:0;right:0;top:0;
  padding:6rem var(--g-pad) clamp(3.2rem,5vw,6rem);
  max-width:var(--max);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden
}
.d-hero-cats { margin-bottom: 1.6rem; }
.d-hero-cats .d-cat,
.d-hero-cats .d-cats a {
  font-family: var(--ui);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink) !important;
  background: var(--gold);
  padding: 4px 14px 3px;
  border-radius: 2px;
  display: inline-block;
  transition: background .15s;
}
.d-hero-cats .d-cat:hover,
.d-hero-cats .d-cats a:hover {
  background: var(--gold-lt);
  color: var(--ink) !important;
  opacity: 1;
}
.d-hero-title{
  font-family:var(--serif);
  font-size:clamp(2.6rem,4vw,5.6rem);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.04em;
  color:#fff;
  max-width:18ch;
  margin-bottom:1.6rem;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden
}
.d-hero-title em{font-style:italic;color:var(--gold-lt)}
.d-hero-title a{color:#fff}
.d-hero-title a:hover{color:var(--gold-lt)}
.d-hero-excerpt{
  font-family:var(--ui);
  font-size:clamp(1.5rem,2vw,1.9rem);
  font-weight:300;
  line-height:1.6;
  color:rgba(255,255,255,.72);
  max-width:60ch;
  margin-bottom:2.4rem
}
.d-hero-footer{
  display:flex;align-items:center;
  flex-wrap:wrap;gap:1.6rem
}
.d-hero-read{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ui);font-size:1.2rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:#fff;
  padding:12px 24px;
  background:var(--g);
  border:none;
  transition:background .18s
}
.d-hero-read::after{content:'→';font-size:1.4rem}
.d-hero-read:hover{background:var(--g-mid);color:#fff}

/* Hero category strip — bottom scroll */
.d-hero-cats-bar{
  position:absolute;
  top:0;left:0;right:0;
  padding:2rem var(--g-pad);
  display:flex;align-items:center;gap:1.6rem;
  max-width:var(--max);margin:0 auto
}

/* ── BENTO GRID ───────────────────────────────────────────────────────────── */
.d-bento{
  padding:4rem 0 0;
  background:var(--paper)
}
.d-bento-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:auto;
  gap:2px;
  background:var(--ink-12)
}

/* Base card */
.d-bcard{
  background:var(--white);
  padding:2.8rem 2.4rem;
  display:flex;flex-direction:column;
  gap:1.2rem;
  position:relative;
  overflow:hidden;
  transition:background .18s
}
.d-bcard:hover{background:rgba(255,255,255,.94)}

/* Spans */
.d-bcard-xl {grid-column:span 7}
.d-bcard-lg {grid-column:span 5}
.d-bcard-md {grid-column:span 4}
.d-bcard-sm {grid-column:span 3}
.d-bcard-xs {grid-column:span 2}

/* Card with image fills */
.d-bcard-img{
  padding:0;
  overflow:hidden;
  position:relative;
  min-height:320px
}
.d-bcard-img .d-bcard-thumb{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:saturate(.88) brightness(.94);
  transition:filter .4s,transform .5s
}
.d-bcard-img:hover .d-bcard-thumb{
  filter:saturate(1.05) brightness(1);
  transform:scale(1.03)
}
.d-bcard-img-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(13,13,13,.85) 0%,rgba(13,13,13,.2) 55%,transparent 100%);
  pointer-events:none
}
.d-bcard-img .d-bcard-body{
  position:absolute;bottom:0;left:0;right:0;
  padding:2.4rem
}
.d-bcard-img .d-bcard-title{color:#fff}
.d-bcard-img .d-bcard-title a{color:#fff}
.d-bcard-img .d-bcard-title a:hover{color:var(--gold-lt)}
.d-bcard-img .d-cat{color:var(--gold-lt) !important}

/* Card title sizes */
.d-bcard-title{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.02em;
  color:var(--ink)
}
.d-bcard-title a{color:var(--ink)}
.d-bcard-title a:hover{color:var(--g)}
.d-bcard-title--xl{font-size:clamp(2.6rem,3.5vw,4rem)}
.d-bcard-title--lg{font-size:clamp(2.2rem,3vw,3.2rem)}
.d-bcard-title--md{font-size:clamp(1.9rem,2.5vw,2.6rem)}
.d-bcard-title--sm{font-size:clamp(1.7rem,2vw,2.1rem)}

.d-bcard-excerpt{
  font-size:1.5rem;line-height:1.65;
  color:var(--ink-70);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden
}

/* Dark bento card */
.d-bcard-dark{
  background:var(--dark-2);
  color:#fff
}
.d-bcard-dark:hover{background:var(--dark-3)}
.d-bcard-dark .d-bcard-title{color:#fff}
.d-bcard-dark .d-bcard-title a{color:#fff}
.d-bcard-dark .d-bcard-title a:hover{color:var(--gold-lt)}
.d-bcard-dark .d-bcard-excerpt{color:rgba(255,255,255,.55)}
.d-bcard-dark .d-cat{color:var(--gold-lt) !important}

/* Accent line at top of card */
.d-bcard::before{
  content:'';
  position:absolute;top:0;left:0;right:0;
  height:3px;
  background:transparent;
  transition:background .2s
}
.d-bcard:hover::before{background:var(--g)}
.d-bcard-dark::before{background:rgba(255,255,255,.06)}
.d-bcard-dark:hover::before{background:var(--gold)}

/* Featured number label (like #1, #2 in ranked lists) */
.d-bcard-num{
  font-family:var(--serif);
  font-size:7rem;
  font-weight:400;
  line-height:1;
  color:var(--ink-12);
  position:absolute;
  top:1.6rem;right:2rem;
  letter-spacing:-.06em
}
.d-bcard-dark .d-bcard-num{color:rgba(255,255,255,.06)}

/* ── CATEGORY RIVER ───────────────────────────────────────────────────────── */
/* Full-width dark strip between bento rows */
.d-river{
  background:var(--dark);
  padding:5.6rem 0;
  margin:0
}
.d-river-inner{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  background:rgba(255,255,255,.04)
}
.d-river-card{
  background:var(--dark-2);
  padding:3.2rem 2.8rem;
  transition:background .18s
}
.d-river-card:hover{background:var(--dark-3)}
.d-river-card-image{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  filter:saturate(.7) brightness(.8);
  margin-bottom:1.6rem;
  transition:filter .35s
}
.d-river-card:hover .d-river-card-image{filter:saturate(.95) brightness(.95)}
.d-river-title{
  font-family:var(--serif);
  font-size:clamp(1.9rem,2.5vw,2.8rem);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.025em;
  color:#fff;
  margin-bottom:1.2rem
}
.d-river-title a{color:#fff}
.d-river-title a:hover{color:var(--gold-lt)}

/* ── LATEST FEED (2-col text list) ────────────────────────────────────────── */
.d-feed-section{
  padding:5.6rem 0;
  background:var(--paper)
}
.d-feed-layout{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:5.6rem;
  align-items:start
}
.d-feed-list{
  display:flex;flex-direction:column;gap:0
}
.d-feed-item{
  display:grid;
  grid-template-columns:1fr 140px;
  gap:2.4rem;
  align-items:start;
  padding:2.4rem 0;
  border-bottom:1px solid var(--rule)
}
.d-feed-item:first-child{padding-top:0}
.d-feed-item:last-child{border-bottom:none}
.d-feed-item-text{}
.d-feed-item-cats{margin-bottom:.6rem}
.d-feed-item-title{
  font-family:var(--serif);
  font-size:clamp(2rem,2.5vw,2.8rem);
  font-weight:400;
  line-height:1.15;
  letter-spacing:-.02em;
  margin-bottom:.8rem
}
.d-feed-item-title a{color:var(--ink)}
.d-feed-item-title a:hover{color:var(--g)}
.d-feed-item-excerpt{
  font-size:1.45rem;line-height:1.65;
  color:var(--ink-70);
  display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden
}
.d-feed-item-image{
  width:140px;height:100px;
  object-fit:cover;
  flex-shrink:0;
  filter:saturate(.88);
  transition:filter .3s
}
.d-feed-item:hover .d-feed-item-image{filter:saturate(1.05)}

/* ── SIDEBAR ──────────────────────────────────────────────────────────────── */
.d-sidebar{position:sticky;top:7rem}

/* Advisory CTA */
.d-cta-box{
  background:var(--g);
  padding:2.8rem 2.4rem;
  margin-bottom:4rem;
  border-top:3px solid var(--gold)
}
.d-cta-box h4{
  font-family:var(--ui);
  font-size:2rem;font-weight:700;
  font-style:normal;
  color:#fff;margin-bottom:.8rem;
  letter-spacing:-.02em;line-height:1.25
}
.d-cta-box p{font-size:1.35rem;color:rgba(255,255,255,.68);line-height:1.65;margin-bottom:2rem}
.d-cta-box a{
  display:inline-block;
  background:var(--gold);color:var(--ink);
  font-family:var(--ui);font-size:1.1rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:11px 22px;
  transition:background .18s
}
.d-cta-box a:hover{background:var(--gold-lt);color:var(--ink)}

/* Widget default */
.d-widget{margin-bottom:4rem}
.d-widget-title{
  font-family:var(--ui);font-size:1.05rem;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);
  border-bottom:2px solid var(--ink);
  padding-bottom:.8rem;margin-bottom:2rem;
  position:relative
}
.d-widget-title::after{
  content:'';position:absolute;
  bottom:-4px;left:0;width:32px;height:2px;
  background:var(--gold)
}

/* Tags */
.d-tags{display:flex;flex-wrap:wrap;gap:.6rem}
.d-tag{
  font-family:var(--ui);font-size:1.0rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  background:var(--ink-12);color:var(--ink-70);
  padding:4px 12px;border-radius:var(--radius);
  transition:background .15s,color .15s
}
.d-tag:hover{background:var(--g);color:#fff}

/* ========================================================================
   SINGLE POST
======================================================================== */
.d-single{background:var(--white)}

/* Cinematic top image */
.d-single-hero{
  position:relative;
  height:clamp(320px,50vh,620px);
  overflow:hidden;background:var(--dark)
}
.d-single-hero img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.85) brightness(.80)
}
.d-single-hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,
    rgba(13,13,13,.0) 0%,
    rgba(13,13,13,.0) 40%,
    rgba(13,13,13,.30) 100%
  )
}
.d-single-hero-caption{
  position:absolute;bottom:1.6rem;right:2rem;
  font-family:var(--ui);font-size:1.05rem;
  color:rgba(255,255,255,.45);
  letter-spacing:.04em
}

/* Article header */
.d-single-header{
  max-width:var(--col);
  margin:0 auto;
  padding:4.8rem var(--g-pad) 0;
}
.d-single-cats{margin-bottom:1.2rem}
.d-single-title{
  font-family:var(--serif);
  font-size:clamp(3rem,6vw,6rem);
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.04em;
  color:var(--ink);
  margin-bottom:2rem
}
.d-single-dek{
  font-family:var(--ui);
  font-size:clamp(1.7rem,2.2vw,2.2rem);
  font-weight:300;
  line-height:1.55;
  color:var(--ink-70);
  margin-bottom:2.4rem;
  max-width:52ch
}
.d-single-meta-bar{
  display:flex;align-items:center;
  justify-content:space-between;
  padding:1.6rem 0;
  border-top:1.5px solid var(--rule);
  border-bottom:1.5px solid var(--rule);
  margin-bottom:4rem;
  gap:1.6rem;flex-wrap:wrap
}
.d-share-row{display:flex;gap:.8rem}
.d-share-btn{
  font-family:var(--ui);font-size:1.05rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  padding:6px 14px;
  border:1.5px solid var(--rule);
  border-radius:var(--radius);
  color:var(--ink-70);
  transition:border-color .15s,color .15s
}
.d-share-btn:hover{border-color:var(--g);color:var(--g)}

/* Article body */
.d-entry{
  max-width:var(--col);
  margin:0 auto;
  padding:0 var(--g-pad) 5.6rem;
  font-family:var(--ui);
  font-size:1.8rem;
  line-height:1.82;
  color:var(--ink-90)
}
/* Drop cap on first paragraph */
.d-entry>p:first-of-type::first-letter{
  font-family:var(--serif);
  font-size:6.8rem;
  font-weight:400;
  line-height:.78;
  float:left;
  margin:.08em .16em 0 0;
  color:var(--g)
}
.d-entry p{margin-bottom:2rem}
.d-entry h2{
  font-family:var(--serif);font-size:3.2rem;
  font-weight:400;font-style:italic;
  letter-spacing:-.025em;line-height:1.15;
  margin:4rem 0 1.4rem;
  color:var(--ink)
}
.d-entry h3{font-size:2.4rem;margin:3.2rem 0 1.2rem;letter-spacing:-.02em}
.d-entry h4{font-size:2rem;margin:2.4rem 0 1rem}
.d-entry a{color:var(--g);text-decoration:underline;text-decoration-color:rgba(16,92,62,.3);text-underline-offset:3px}
.d-entry a:hover{text-decoration-color:var(--g)}
.d-entry ul,.d-entry ol{padding-left:2.4rem;margin-bottom:2rem}
.d-entry li{margin-bottom:.6rem;line-height:1.75}
.d-entry strong{font-weight:700}
.d-entry em{font-style:italic}
.d-entry img{width:100%;margin:3.2rem 0}
/* Wide images that break the column */
.d-entry .alignwide,.d-entry .size-large{
  width:calc(100% + min(280px,20vw));
  margin-left:calc(-1 * min(140px,10vw));
  max-width:none
}
.d-entry code{
  font-family:'DM Mono','Courier New',monospace;
  font-size:.88em;background:var(--ink-12);
  padding:2px 7px;border-radius:2px
}
.d-entry pre{
  background:var(--dark);color:rgba(255,255,255,.85);
  font-family:'DM Mono','Courier New',monospace;
  font-size:1.4rem;padding:2.4rem;
  margin:2.4rem 0;overflow-x:auto;line-height:1.7;
  border-left:4px solid var(--g)
}

/* Blockquote */
.d-entry blockquote{
  margin:3.6rem 0;
  padding:0;
  border:none;
  position:relative
}
.d-entry blockquote::before{
  content:'"';
  font-family:var(--serif);
  font-size:9rem;
  line-height:1;
  color:var(--g);
  opacity:.25;
  position:absolute;
  top:-2rem;left:-1rem;
  pointer-events:none
}
.d-entry blockquote p{
  font-family:var(--serif);
  font-style:italic;
  font-size:2.8rem;
  line-height:1.4;
  letter-spacing:-.02em;
  color:var(--ink);
  margin-bottom:1rem;
  padding-left:3rem
}
.d-entry blockquote cite{
  display:block;
  font-family:var(--ui);font-style:normal;
  font-size:1.1rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--g);
  padding-left:3rem;
  margin-top:.4rem
}

/* Article footer */
.d-article-footer{
  max-width:var(--col);
  margin:0 auto;
  padding:3.6rem var(--g-pad) 0;
  border-top:2px solid var(--ink)
}
.d-tags-row{margin-bottom:3.2rem}
.d-tags-label{
  font-family:var(--ui);font-size:1.05rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-40);margin-bottom:1rem
}

/* Author box */
.d-author{
  display:grid;
  grid-template-columns:72px 1fr;
  gap:2rem;
  background:var(--paper);
  padding:2.8rem;
  margin-bottom:5.6rem;
  border-top:3px solid var(--ink)
}
.d-author img{
  width:72px;height:72px;
  border-radius:50%;object-fit:cover
}
.d-author-role{
  font-family:var(--ui);font-size:1.05rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--g);margin-bottom:.4rem;display:block
}
.d-author-name{
  font-family:var(--serif);font-size:2rem;
  font-weight:400;margin-bottom:.6rem
}
.d-author-name a{color:var(--ink)}
.d-author-name a:hover{color:var(--g)}
.d-author-bio{font-size:1.4rem;color:var(--ink-70);line-height:1.65}

/* Post nav */
.d-post-nav{
  display:grid;grid-template-columns:1fr 1fr;
  gap:2px;background:var(--ink-12);
  margin-bottom:5.6rem;
  max-width:var(--col);margin-left:auto;margin-right:auto
}
.d-post-nav a{
  background:var(--white);padding:2.4rem;
  display:block;transition:background .15s
}
.d-post-nav a:hover{background:var(--paper)}
.d-nav-dir{
  font-family:var(--ui);font-size:1.0rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--g);display:block;margin-bottom:.6rem
}
.d-nav-title{
  font-family:var(--serif);font-size:1.9rem;
  font-weight:400;color:var(--ink);line-height:1.2;
  letter-spacing:-.015em
}
.d-post-nav-next{text-align:right}

/* Related */
.d-related{
  padding:5.6rem 0;
  background:var(--dark)
}
.d-related-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;background:rgba(255,255,255,.04)
}

/* ── COMMENTS ─────────────────────────────────────────────────────────────── */
.d-comments{
  max-width:var(--col);
  margin:0 auto;
  padding:5.6rem var(--g-pad)
}
.d-comments-title{
  font-family:var(--ui);font-size:1.05rem;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);
  border-bottom:2px solid var(--ink);
  padding-bottom:.8rem;margin-bottom:3.2rem;
  position:relative
}
.d-comments-title::after{content:'';position:absolute;bottom:-4px;left:0;width:40px;height:2px;background:var(--gold)}
.comment{padding:2.4rem 0;border-bottom:1px solid var(--rule)}
.comment-author-name{font-family:var(--serif);font-size:1.9rem;font-weight:400;margin-bottom:.2rem}
.comment-meta{font-family:var(--ui);font-size:1.1rem;color:var(--ink-40);letter-spacing:.04em}
.comment-content{font-size:1.55rem;line-height:1.72;margin-top:1rem}
.comment-reply-link{
  font-family:var(--ui);font-size:1.05rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--g)
}
.comment-form label{
  display:block;font-family:var(--ui);font-size:1.05rem;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-40);margin-bottom:.6rem
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea{
  width:100%;border:1.5px solid var(--rule);border-radius:var(--radius);
  padding:12px 16px;font-family:var(--ui);
  font-size:1.55rem;color:var(--ink);background:var(--white);
  transition:border-color .15s;min-height:auto
}
.comment-form input:focus,.comment-form textarea:focus{border-color:var(--g);outline:none}
.comment-form textarea{min-height:140px;resize:vertical}
.comment-form .form-submit input[type="submit"]{
  background:var(--g);color:#fff;border:none;border-radius:var(--radius);
  font-family:var(--ui);font-size:1.15rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  padding:13px 30px;cursor:pointer;min-height:auto;
  transition:background .18s
}
.comment-form .form-submit input:hover{background:var(--g-mid)}

/* ── ARCHIVE ──────────────────────────────────────────────────────────────── */
.d-archive-banner{
  background:var(--dark);
  padding:6rem 0 5.6rem;
  position:relative;overflow:hidden
}
.d-archive-banner::before{
  content:'';position:absolute;
  inset:0;opacity:.06;
  background:repeating-linear-gradient(
    45deg,rgba(255,255,255,.08) 0px,rgba(255,255,255,.08) 1px,
    transparent 1px,transparent 28px
  )
}
.d-archive-beat{
  font-family:var(--ui);font-size:1.05rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-lt);margin-bottom:1rem;display:block;
  position:relative;z-index:1
}
.d-archive-title{
  font-family:var(--serif);
  font-size:clamp(3.6rem,7vw,7.2rem);
  font-weight:400;font-style:italic;
  letter-spacing:-.04em;line-height:1.04;
  color:#fff;position:relative;z-index:1
}
.d-archive-desc{
  font-size:1.6rem;color:rgba(255,255,255,.55);
  margin-top:1.2rem;max-width:52ch;
  position:relative;z-index:1
}
.d-archive-count{
  font-family:var(--ui);font-size:1.1rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.30);
  margin-top:.8rem;position:relative;z-index:1
}
.d-archive-body{
  padding:5.6rem 0;background:var(--paper)
}
.d-archive-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  background:var(--ink-12)
}
.d-archive-card{
  background:var(--white);
  overflow:hidden;
  transition:background .18s
}
.d-archive-card:hover{background:rgba(255,255,255,.92)}
.d-archive-card-img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  filter:saturate(.88);
  transition:filter .35s,transform .4s
}
.d-archive-card:hover .d-archive-card-img{filter:saturate(1.0);transform:scale(1.03)}
.d-archive-card-body{padding:2.4rem}
.d-archive-card-title{
  font-family:var(--serif);
  font-size:2.2rem;font-weight:400;
  line-height:1.15;letter-spacing:-.02em;
  margin:1rem 0
}
.d-archive-card-title a{color:var(--ink)}
.d-archive-card-title a:hover{color:var(--g)}
.d-archive-card-excerpt{
  font-size:1.45rem;color:var(--ink-70);
  line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:1.2rem
}

/* ── PAGINATION ───────────────────────────────────────────────────────────── */
.d-pagination{
  display:flex;align-items:center;justify-content:center;
  gap:4px;padding:5.6rem 0 0
}
.d-pagination a,
.d-pagination span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 12px;
  font-family:var(--ui);font-size:1.25rem;font-weight:600;
  color:var(--ink);
  border:1.5px solid var(--rule);
  transition:background .15s,color .15s,border-color .15s
}
.d-pagination a:hover{background:var(--g);color:#fff;border-color:var(--g)}
.d-pagination .current{background:var(--ink);color:#fff;border-color:var(--ink)}
.d-pagination .dots{border:none;color:var(--ink-40)}
.d-pagination .prev,.d-pagination .next{font-size:1.1rem;letter-spacing:.06em}

/* ── 404 ──────────────────────────────────────────────────────────────────── */
.d-404{
  background:var(--dark);
  min-height:80vh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:8rem var(--g-pad)
}
.d-404-inner{}
.d-404-num{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(10rem,22vw,22rem);
  font-weight:400;color:rgba(255,255,255,.06);
  line-height:1;letter-spacing:-.06em;
  display:block
}
.d-404-title{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(2.8rem,5vw,5rem);
  font-weight:400;color:#fff;
  margin-bottom:1.2rem;letter-spacing:-.03em
}
.d-404-text{font-size:1.6rem;color:rgba(255,255,255,.45);margin-bottom:3.6rem}
.d-404 .d-btn{display:inline-block;background:var(--g);color:#fff;padding:14px 28px;font-family:var(--ui);font-size:1.2rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:background .18s}
.d-404 .d-btn:hover{background:var(--g-mid);color:#fff}

/* ── PAGE ─────────────────────────────────────────────────────────────────── */
.d-page-header{
  background:var(--dark);padding:5.6rem 0;
  border-bottom:2px solid var(--gold)
}
.d-page-title{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(3.2rem,6vw,6.4rem);
  font-weight:400;letter-spacing:-.04em;
  line-height:1.06;color:#fff
}
.d-page-body{padding:5.6rem 0;background:var(--white)}
.d-page-content{
  max-width:var(--col);margin:0 auto;
  font-size:1.75rem;line-height:1.78;color:var(--ink-90)
}
.d-page-content a{color:var(--g);text-decoration:underline}
.d-page-content h2{font-size:3rem;margin:3.6rem 0 1.4rem;letter-spacing:-.025em}
.d-page-content h3{font-size:2.3rem;margin:2.8rem 0 1.2rem}
.d-page-content blockquote{border-left:4px solid var(--gold);padding-left:2.4rem;margin:2.4rem 0;font-style:italic;font-size:2rem}

/* ── FOOTER ───────────────────────────────────────────────────────────────── */
.d-footer{
  background:var(--dark);
  border-top:3px solid var(--gold)
}
.d-footer-grid{
  display:grid;
  grid-template-columns:2.2fr 1fr 1fr 1fr;
  gap:4.8rem;
  padding:6rem 0 5rem;
  border-bottom:1px solid rgba(255,255,255,.07)
}
.d-footer-brand-name{
  font-family:var(--serif);font-style:italic;
  font-size:3.2rem;font-weight:400;
  letter-spacing:-.03em;color:#fff;
  line-height:1;display:block;margin-bottom:.4rem
}
.d-footer-brand-name:hover{color:var(--gold-lt)}
.d-footer-brand img{height:40px;width:auto;margin-bottom:1rem;filter:none}
.d-footer-brand-tag{
  font-family:var(--ui);font-size:1.05rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.28);
  display:block;margin-bottom:1.8rem
}
.d-footer-brand-desc{font-size:1.4rem;color:rgba(255,255,255,.45);line-height:1.7;max-width:280px}
.d-footer-col h5{
  font-family:var(--ui);font-size:1.0rem;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.85);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding-bottom:.8rem;margin-bottom:1.6rem
}
.d-footer-col ul{list-style:none;margin:0;padding:0}
.d-footer-col ul li{margin-bottom:.9rem}
.d-footer-col ul li a{font-size:1.35rem;color:rgba(255,255,255,.48);transition:color .15s}
.d-footer-col ul li a:hover{color:var(--gold-lt)}
.d-footer-bottom{
  display:flex;align-items:center;
  justify-content:space-between;
  padding:2rem 0;flex-wrap:wrap;gap:1.2rem
}
.d-footer-copy{
  font-family:var(--ui);font-size:1.05rem;
  letter-spacing:.04em;
  color:rgba(255,255,255,.25);
  text-transform:uppercase
}
.d-footer-socials{display:flex;gap:1.6rem}
.d-footer-socials a{
  font-family:var(--ui);font-size:1.15rem;font-weight:700;
  color:rgba(255,255,255,.35);transition:color .15s
}
.d-footer-socials a:hover{color:var(--gold-lt)}
.d-footer-nav-links{display:flex;gap:2.4rem;flex-wrap:wrap}
.d-footer-nav-links a{
  font-family:var(--ui);font-size:1.05rem;
  letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.35);transition:color .15s
}
.d-footer-nav-links a:hover{color:var(--gold-lt)}

/* ── SCROLL REVEAL ────────────────────────────────────────────────────────── */
.d-reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)
}
.d-reveal.visible{opacity:1;transform:translateY(0)}
.d-reveal-delay-1{transition-delay:.1s}
.d-reveal-delay-2{transition-delay:.2s}
.d-reveal-delay-3{transition-delay:.3s}

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
/* ── LAPTOP (13"–15" screens, ~1280–1440px) ────────────────────────────────── */
@media(max-width:1440px){
  .custom-logo{height:40px !important;max-height:40px !important}
  .d-hero{height:clamp(380px,55vh,640px)}
  .d-hero-title{font-size:clamp(2.6rem,3.5vw,4.4rem)}
}
@media(max-width:1280px){
  .custom-logo{height:36px !important;max-height:36px !important;max-width:200px !important}
  .d-brand-name{font-size:clamp(2.6rem,4vw,4.8rem)}
  .d-masthead{padding:1.4rem 0}
  .d-hero{height:clamp(360px,52vh,580px)}
  .d-hero-title{font-size:clamp(2.4rem,3vw,3.8rem);-webkit-line-clamp:3}
  .d-hero-excerpt{font-size:1.5rem;-webkit-line-clamp:2}
  .d-bcard-xl{grid-column:span 8}
  .d-bcard-lg{grid-column:span 4}
  .d-feed-layout{grid-template-columns:1fr 300px}
}
@media(max-width:1100px){
  .d-bcard-xl{grid-column:span 12}
  .d-bcard-lg{grid-column:span 6}
  .d-bcard-md{grid-column:span 6}
  .d-bcard-sm{grid-column:span 6}
  .d-river-inner{grid-template-columns:1fr}
  .d-feed-layout{grid-template-columns:1fr}
  .d-sidebar{position:static}
  .d-footer-grid{grid-template-columns:1fr 1fr;gap:3.2rem}
  .d-archive-grid{grid-template-columns:repeat(2,1fr)}
  .d-related-grid{grid-template-columns:1fr}
  .d-post-nav{margin-left:var(--g-pad);margin-right:var(--g-pad)}
  .d-author{margin-left:var(--g-pad);margin-right:var(--g-pad)}
}
@media(max-width:768px){
  .d-menu{display:none}
  .d-nav-toggle{display:flex}
  .d-menu.open{
    display:flex;flex-direction:column;
    position:absolute;top:100%;left:0;right:0;
    background:var(--dark-2);
    border-top:2px solid var(--gold);
    z-index:500;padding:1rem 0
  }
  .d-menu.open>li>a{padding:1.3rem var(--g-pad)}
  .d-menu.open>li>ul{display:none}
  .d-bcard-xl,.d-bcard-lg,.d-bcard-md,.d-bcard-sm,.d-bcard-xs{grid-column:span 12}
  .d-hero-title{font-size:3.2rem}
  .d-single-title{font-size:3.2rem}
  .d-single-dek{font-size:1.7rem}
  .d-entry{font-size:1.65rem;line-height:1.75}
  .d-entry>p:first-of-type::first-letter{font-size:5.2rem}
  .d-entry .alignwide,.d-entry .size-large{width:100%;margin-left:0}
  .d-archive-grid{grid-template-columns:1fr}
  .d-footer-grid{grid-template-columns:1fr;gap:2.4rem}
  .d-footer-bottom{flex-direction:column;align-items:flex-start}
  .d-feed-item{grid-template-columns:1fr}
  .d-feed-item-image{display:none}
  .d-404-num{font-size:12rem}
  .d-single-hero{height:260px}
  .d-related-grid{grid-template-columns:1fr}
  .d-post-nav{grid-template-columns:1fr}
}
@media(max-width:480px){
  .d-topstrip-tag,.d-topstrip-sep{display:none}
  .d-brand-name{font-size:3rem}
  .d-hero-excerpt{display:none}
  .d-bcard{padding:2rem 1.8rem}
}

/* ============================================================================
   BEST PRACTICES ADDITIONS — v6
============================================================================ */

/* ── BREADCRUMBS ─────────────────────────────────────────────────────────── */
.d-breadcrumbs {
  margin-bottom: 2rem;
}
.d-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  margin: 0; padding: 0;
  font-family: var(--ui);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.d-breadcrumbs li { display: flex; align-items: center; gap: 0.4rem; }
.d-breadcrumbs a { color: var(--ink-40); transition: color .15s; }
.d-breadcrumbs a:hover { color: var(--g); }
.d-breadcrumbs [aria-current="page"] span { color: var(--ink-60); }
.d-bc-sep { color: var(--ink-30); }
/* Breadcrumbs on dark archive banner */
.d-archive-banner .d-breadcrumbs ol { color: rgba(255,255,255,.35); }
.d-archive-banner .d-breadcrumbs a { color: rgba(255,255,255,.35); }
.d-archive-banner .d-breadcrumbs a:hover { color: var(--gold-lt); }
.d-archive-banner .d-breadcrumbs [aria-current="page"] span { color: rgba(255,255,255,.55); }
.d-archive-banner .d-bc-sep { color: rgba(255,255,255,.2); }

/* ── BACK TO TOP BUTTON ──────────────────────────────────────────────────── */
.d-back-top {
  position: fixed;
  bottom: 2.4rem;
  right: 2.4rem;
  width: 46px; height: 46px;
  background: var(--g);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .25s, transform .25s, background .18s;
  z-index: 500;
  box-shadow: 0 4px 16px rgba(16,92,62,.35);
}
.d-back-top.visible {
  opacity: 1;
  transform: translateY(0);
}
.d-back-top:hover { background: var(--g-mid); }
.d-back-top:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* ── FOCUS STYLES (WCAG 2.1 AA) ─────────────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--g);
  outline-offset: 3px;
}
.d-dark :focus-visible,
.d-nav :focus-visible,
.d-masthead :focus-visible {
  outline-color: var(--gold-lt);
}
/* Remove outline for mouse users, keep for keyboard */
:focus:not(:focus-visible) { outline: none; }

/* ── NEWSLETTER BLOCK ────────────────────────────────────────────────────── */
.d-newsletter-block {
  max-width: var(--col);
  margin: 0 auto 5.6rem;
  background: var(--g);
  padding: 3.6rem 3.2rem;
  border-top: 3px solid var(--gold);
}
.d-newsletter-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3.2rem;
  align-items: center;
}
.d-newsletter-heading {
  font-family: var(--serif);
  font-size: 2.8rem;
  font-weight: 400;
  font-style: italic;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin-bottom: .6rem;
}
.d-newsletter-sub {
  font-size: 1.4rem;
  color: rgba(255,255,255,.68);
  line-height: 1.65;
  margin: 0;
}
.d-newsletter-form {
  display: flex;
  gap: .8rem;
  flex-shrink: 0;
}
.d-newsletter-form input[type="email"] {
  border: 1.5px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.1);
  color: #fff;
  font-family: var(--ui);
  font-size: 1.45rem;
  padding: 10px 16px;
  border-radius: 2px;
  width: 260px;
  transition: border-color .15s;
  min-height: auto;
}
.d-newsletter-form input::placeholder { color: rgba(255,255,255,.4); }
.d-newsletter-form input:focus { border-color: var(--gold-lt); outline: none; }
.d-newsletter-form button {
  background: var(--gold);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 10px 22px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s;
  min-height: auto;
}
.d-newsletter-form button:hover { background: var(--gold-lt); }

/* Success message */
.d-nl-thanks {
  background: rgba(255,255,255,.12);
  color: #fff;
  padding: 1.2rem 1.8rem;
  font-family: var(--mono);
  font-size: 1.1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 2px;
}

@media(max-width:900px) {
  .d-newsletter-inner { grid-template-columns: 1fr; gap: 2rem; }
  .d-newsletter-form { flex-direction: column; }
  .d-newsletter-form input[type="email"] { width: 100%; }
}

/* ── SKIP LINK VISIBLE ON FOCUS ──────────────────────────────────────────── */
.d-screen-reader:focus {
  clip: auto;
  position: fixed;
  top: 0; left: 0;
  background: var(--g);
  color: #fff;
  padding: 1.2rem 2rem;
  font-family: var(--ui);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .06em;
  z-index: 9999;
  width: auto; height: auto;
  overflow: visible;
}

/* ── REDUCED MOTION ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .d-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .d-hero-bg { transition: none !important; transform: scale(1) !important; }
  .d-back-top { transition: opacity .15s !important; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── PRINT STYLES ────────────────────────────────────────────────────────── */
@media print {
  .d-topstrip, .d-masthead-actions, .d-nav, .d-search-overlay,
  .d-hero-overlay, .d-breadcrumbs, .d-share-row, .d-newsletter-block,
  .d-related, .d-post-nav, .d-comments, .d-back-top,
  .d-footer, .d-sidebar, #d-progress { display: none !important; }

  body { background: #fff; color: #000; font-size: 12pt; }

  .d-masthead { border: none; padding: .5cm 0; }
  .custom-logo { height: 32px !important; }

  .d-single-hero { height: 8cm; page-break-after: avoid; }
  .d-single-hero img { filter: none; }

  .d-single-header { padding: .5cm 0 !important; max-width: 100%; }
  .d-single-title { font-size: 24pt; color: #000; letter-spacing: -.02em; }
  .d-single-dek { font-size: 12pt; color: #333; }

  .d-entry {
    max-width: 100%;
    font-size: 11pt;
    line-height: 1.6;
    color: #000;
    padding: 0 !important;
  }
  .d-entry a { color: #000; text-decoration: underline; }
  .d-entry a::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
  .d-entry blockquote { border-left: 3px solid #999; padding-left: 1cm; font-style: italic; }
  .d-entry blockquote::before { display: none; }
  .d-entry img { max-width: 100%; page-break-inside: avoid; }
  .d-entry h2, .d-entry h3 { page-break-after: avoid; }

  .d-author-box { border: 1px solid #ccc; page-break-inside: avoid; }

  a[href]::after { content: ''; } /* reset global rule for nav links etc */
}

/* ============================================================================
   HOMEPAGE v7 — TOPIC STRIP + HERO FIX + NEW ELEMENTS
============================================================================ */

/* ── HERO CONTENT FIX — no inline styles needed anymore ─────────────────── */
/* Override any lingering inline styles from old template */
.d-hero-content {
  position: absolute !important;
  top: 0 !important; bottom: 0 !important;
  left: 0 !important; right: 0 !important;
  padding: 6rem var(--g-pad) clamp(3.2rem,5vw,5.6rem) !important;
  max-width: 100% !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  overflow: hidden !important;
  margin: 0 !important;
}
/* The inner wrap handles the max-width constraint */
.d-hero-content .d-wrap {
  max-width: var(--max);
  width: 100%;
  padding: 0 var(--g-pad);
  margin: 0 auto;
}

/* ── TOPIC STRIP ─────────────────────────────────────────────────────────── */
.d-topic-strip {
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.d-topic-strip::-webkit-scrollbar { display: none; }

.d-topic-strip-inner {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .9rem 0;
  min-width: max-content;
}

.d-topic-label {
  font-family: var(--ui);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-40);
  padding-right: 1.2rem;
  border-right: 1px solid var(--rule);
  margin-right: .8rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.d-topic-pill {
  font-family: var(--ui);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-60);
  padding: 5px 14px;
  border: 1.5px solid var(--rule);
  border-radius: 2rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.d-topic-pill:hover {
  background: var(--g);
  color: #fff;
  border-color: var(--g);
}
/* Beat colours on hover handled by data-beat — active state */
.d-topic-pill[data-beat="eco"]:hover   { background: var(--b-eco);  border-color: var(--b-eco); }
.d-topic-pill[data-beat="cul"]:hover   { background: var(--b-cul);  border-color: var(--b-cul); }
.d-topic-pill[data-beat="tech"]:hover  { background: var(--b-tech); border-color: var(--b-tech); }
.d-topic-pill[data-beat="pol"]:hover   { background: var(--b-pol);  border-color: var(--b-pol); }
.d-topic-pill[data-beat="agri"]:hover  { background: var(--b-agri); border-color: var(--b-agri); }

/* ── BENTO GRID WRAP FIX ─────────────────────────────────────────────────── */
.d-bento-grid.d-wrap {
  padding-top: 0;
  padding-bottom: 0;
}

/* ── RIVER — flexible column count ──────────────────────────────────────── */
.d-river-inner {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 2px;
  background: rgba(255,255,255,.04);
}
/* 1-col or 2-col fallback for small content libraries */
.d-river-inner:has(> :only-child)     { grid-template-columns: 1fr; }
.d-river-inner:has(> :nth-child(2):last-child) { grid-template-columns: 1fr 1fr; }

/* ── FEED ALL LINK ───────────────────────────────────────────────────────── */
.d-feed-all-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ui);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g);
  margin-top: 2.4rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--rule);
  width: 100%;
  transition: color .15s;
}
.d-feed-all-link:hover { color: var(--g-mid); }

/* ── HOME NEWSLETTER SECTION ─────────────────────────────────────────────── */
.d-home-newsletter {
  background: var(--paper-dark);
  padding: 5.6rem 0;
}
.d-home-newsletter .d-newsletter-block {
  margin: 0 auto;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media(max-width:768px) {
  .d-topic-strip-inner { padding: .8rem var(--g-pad); }
  .d-river-inner,
  .d-river-inner:has(> :nth-child(2):last-child) {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   v8 — CATEGORY WIDGET REDESIGN + TAGLINE
============================================================================ */

/* ── CATEGORY WIDGET — visual beat grid ─────────────────────────────────── */
/* Targets WordPress Categories widget output — removes bullets entirely */
.widget_categories ul,
.widget_categories ol,
.wp-block-categories ul,
.wp-block-categories-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2px !important;
}

.widget_categories li,
.wp-block-categories-list li {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.widget_categories li a,
.wp-block-categories-list li a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1.1rem 1.4rem !important;
  font-family: var(--ui) !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
  border-left: 3px solid var(--rule) !important;
  text-decoration: none !important;
  transition: background .15s, border-color .15s, color .15s !important;
  line-height: 1.3 !important;
}

.widget_categories li a:hover,
.wp-block-categories-list li a:hover {
  background: var(--ink-10) !important;
  color: var(--g) !important;
  border-left-color: var(--g) !important;
}

/* Post count badge */
.widget_categories li a .post-count,
.widget_categories .post-count {
  font-family: var(--mono) !important;
  font-size: 1.0rem !important;
  font-weight: 400 !important;
  color: var(--ink-40) !important;
  margin-left: .8rem !important;
  flex-shrink: 0 !important;
}

/* Beat accent colours by category name matching */
.widget_categories li:has(a[href*="economy"]) a,
.widget_categories li:has(a[href*="finance"]) a,
.widget_categories li:has(a[href*="trade"]) a,
.widget_categories li:has(a[href*="entrepreneurship"]) a       { border-left-color: var(--b-eco) !important; }

.widget_categories li:has(a[href*="lifestyle"]) a,
.widget_categories li:has(a[href*="culture"]) a,
.widget_categories li:has(a[href*="tourism"]) a                { border-left-color: var(--b-cul) !important; }

.widget_categories li:has(a[href*="artificial"]) a,
.widget_categories li:has(a[href*="technology"]) a             { border-left-color: var(--b-tech) !important; }

.widget_categories li:has(a[href*="politics"]) a,
.widget_categories li:has(a[href*="social"]) a                 { border-left-color: var(--b-pol) !important; }

.widget_categories li:has(a[href*="agriculture"]) a,
.widget_categories li:has(a[href*="energy"]) a,
.widget_categories li:has(a[href*="sustainability"]) a         { border-left-color: var(--b-agri) !important; }

.widget_categories li:has(a[href*="health"]) a,
.widget_categories li:has(a[href*="education"]) a              { border-left-color: var(--b-health) !important; }

.widget_categories li:has(a[href*="press"]) a                  { border-left-color: var(--b-press) !important; }

/* Hover inherits the beat colour */
.widget_categories li:has(a[href*="economy"]) a:hover,
.widget_categories li:has(a[href*="finance"]) a:hover          { color: var(--b-eco)  !important; background-color: rgba(16,92,62,.06) !important; }
.widget_categories li:has(a[href*="lifestyle"]) a:hover,
.widget_categories li:has(a[href*="culture"]) a:hover          { color: var(--b-cul)  !important; background-color: rgba(124,61,0,.06) !important; }
.widget_categories li:has(a[href*="artificial"]) a:hover,
.widget_categories li:has(a[href*="technology"]) a:hover       { color: var(--b-tech) !important; background-color: rgba(26,26,62,.06) !important; }
.widget_categories li:has(a[href*="politics"]) a:hover         { color: var(--b-pol)  !important; background-color: rgba(107,28,28,.06) !important; }
.widget_categories li:has(a[href*="agriculture"]) a:hover,
.widget_categories li:has(a[href*="energy"]) a:hover           { color: var(--b-agri) !important; background-color: rgba(46,94,39,.06) !important; }

/* Mobile: single column */
@media(max-width:540px) {
  .widget_categories ul,
  .wp-block-categories-list {
    grid-template-columns: 1fr !important;
  }
}

/* ── BRAND TAGLINE — editorial not corporate ─────────────────────────────── */
/* The tagline is set in WP Settings > General > Tagline
   This CSS makes it feel editorial rather than a subtitle */
.d-brand-tag {
  font-family: var(--ui);
  font-size: 1.0rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-top: .2rem;
}

/* ── HERO CATEGORY PILL on dark bento image cards ────────────────────────── */
.d-bcard-img .d-hero-cats .d-cat,
.d-bcard-dark .d-hero-cats .d-cat {
  background: var(--gold) !important;
  color: var(--ink) !important;
}

/* ============================================================================
   v9 — THREE FIXES
============================================================================ */

/* ── 1. CATEGORY WIDGET — faint divider lines, no left border ───────────── */
.widget_categories ul,
.widget_categories ol,
.wp-block-categories ul,
.wp-block-categories-list {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  border-top: 1px solid var(--rule) !important;
  border-left: 1px solid var(--rule) !important;
}

.widget_categories li a,
.wp-block-categories-list li a {
  border-left: none !important;
  border-bottom: 1px solid var(--rule) !important;
  border-right: 1px solid var(--rule) !important;
  background: transparent !important;
  padding: 1rem 1.2rem !important;
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  color: var(--ink-70) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: color .15s, background .15s !important;
}

.widget_categories li a:hover,
.wp-block-categories-list li a:hover {
  background: var(--ink-10) !important;
  color: var(--g) !important;
  border-color: var(--rule) !important;
}

/* Remove all beat border-left overrides */
.widget_categories li:has(a[href*="economy"]) a,
.widget_categories li:has(a[href*="finance"]) a,
.widget_categories li:has(a[href*="trade"]) a,
.widget_categories li:has(a[href*="lifestyle"]) a,
.widget_categories li:has(a[href*="culture"]) a,
.widget_categories li:has(a[href*="tourism"]) a,
.widget_categories li:has(a[href*="artificial"]) a,
.widget_categories li:has(a[href*="technology"]) a,
.widget_categories li:has(a[href*="politics"]) a,
.widget_categories li:has(a[href*="social"]) a,
.widget_categories li:has(a[href*="agriculture"]) a,
.widget_categories li:has(a[href*="energy"]) a,
.widget_categories li:has(a[href*="sustainability"]) a,
.widget_categories li:has(a[href*="health"]) a,
.widget_categories li:has(a[href*="education"]) a,
.widget_categories li:has(a[href*="press"]) a {
  border-left: none !important;
}

/* Remove beat-coloured hover backgrounds */
.widget_categories li:has(a[href*="economy"]) a:hover,
.widget_categories li:has(a[href*="finance"]) a:hover,
.widget_categories li:has(a[href*="lifestyle"]) a:hover,
.widget_categories li:has(a[href*="culture"]) a:hover,
.widget_categories li:has(a[href*="artificial"]) a:hover,
.widget_categories li:has(a[href*="technology"]) a:hover,
.widget_categories li:has(a[href*="politics"]) a:hover,
.widget_categories li:has(a[href*="agriculture"]) a:hover,
.widget_categories li:has(a[href*="energy"]) a:hover {
  color: var(--g) !important;
  background: var(--ink-10) !important;
}

/* Mobile: single column */
@media(max-width:540px) {
  .widget_categories ul,
  .wp-block-categories-list {
    grid-template-columns: 1fr !important;
  }
}

/* ── 2. HERO CATEGORY PILL — gold, dark text, visible above any image ────── */
/* Belt-and-braces: target every possible selector combination */
.d-hero-cats,
.d-hero-cats .d-cats { margin-bottom: 1.6rem; display: block; }

.d-hero-cats .d-cat,
.d-hero-cats .d-cats .d-cat,
.d-hero-cats a {
  display: inline-block !important;
  font-family: var(--ui) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  background: var(--gold) !important;
  padding: 4px 14px 3px !important;
  border-radius: 2px !important;
  text-decoration: none !important;
  opacity: 1 !important;
  /* override ALL beat colours */
  filter: none !important;
}
.d-hero-cats .d-cat:hover,
.d-hero-cats .d-cats .d-cat:hover,
.d-hero-cats a:hover {
  background: var(--gold-lt) !important;
  color: var(--ink) !important;
  opacity: 1 !important;
}
/* Override the generic beat colour rules that were fighting this */
.d-hero-cats .d-cat[data-beat],
.d-hero-cats a[data-beat] {
  color: var(--ink) !important;
  background: var(--gold) !important;
}

/* ── 3. TOPIC STRIP PILLS — brand green ─────────────────────────────────── */
.d-topic-pill {
  background: var(--g) !important;
  color: #fff !important;
  border-color: var(--g) !important;
}
.d-topic-pill:hover {
  background: var(--g-mid) !important;
  color: #fff !important;
  border-color: var(--g-mid) !important;
}
/* Override all beat-specific hover colours */
.d-topic-pill[data-beat="eco"]:hover,
.d-topic-pill[data-beat="cul"]:hover,
.d-topic-pill[data-beat="tech"]:hover,
.d-topic-pill[data-beat="pol"]:hover,
.d-topic-pill[data-beat="agri"]:hover {
  background: var(--g-mid) !important;
  border-color: var(--g-mid) !important;
  color: #fff !important;
}