/* Africa Calling Safari News — front-end styles
   Scoped under .acsn so nothing leaks into other WordPress pages. */

.acsn {
  --ink: #1f2621;        /* bush charcoal: header, footer, headings */
  --ink-2: #3a4239;      /* body text */
  --muted: #6b7268;      /* dates, captions */
  --paper: #f3f4ef;      /* page background, cool grass-grey */
  --card: #ffffff;
  --line: #dcdfd5;
  --gold: #a8842f;       /* dry-grass gold: links, accents */
  --gold-dark: #876824;
  --sky: #5d7f86;        /* category tags */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Segoe UI", Roboto, Arial, sans-serif;
  --wrap: 1180px;
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
.acsn *, .acsn *::before, .acsn *::after { box-sizing: border-box; }
.acsn img { max-width: 100%; height: auto; display: block; }
.acsn a { color: var(--gold-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.acsn a:hover { color: var(--ink); }
.acsn :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
.acsn h1, .acsn h2, .acsn h3, .acsn h4 { font-family: var(--serif); color: var(--ink); font-weight: 600; line-height: 1.12; margin: 0 0 .5em; }
.acsn .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.acsn .skip { position: absolute; left: -9999px; }
.acsn .skip:focus { left: 16px; top: 16px; z-index: 100; background: #fff; padding: 8px 12px; }

/* ---------- Header ---------- */
.acsn-header { background: var(--ink); color: #e8eae3; }
.acsn-header .wrap { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.acsn-logo { display: flex; align-items: center; flex: 0 0 auto; }
.acsn-logo img { height: 46px; width: auto; }
.acsn-logo .wordmark { font-family: var(--serif); font-size: 1.5rem; color: #fff; letter-spacing: .04em; }
.acsn-nav { display: flex; gap: 22px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.acsn-nav::-webkit-scrollbar { display: none; }
.acsn-nav a { color: #d6d9cf; text-decoration: none; font-size: .95rem; white-space: nowrap; padding: 6px 0; border-bottom: 2px solid transparent; }
.acsn-nav a:hover, .acsn-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--gold); }
.acsn-btn { display: inline-block; background: var(--gold); color: #fff !important; text-decoration: none; font-weight: 600; font-size: .95rem; padding: 11px 20px; border-radius: 4px; white-space: nowrap; }
.acsn-btn:hover { background: var(--gold-dark); }
.acsn-btn.ghost { background: transparent; border: 1px solid currentColor; color: var(--ink) !important; }
.acsn-btn.ghost:hover { background: var(--ink); color: #fff !important; }
.acsn-header .acsn-btn { flex: 0 0 auto; }

/* ---------- Masthead ---------- */
.acsn-masthead { background: var(--ink); color: #cfd3c8; padding: 34px 0 30px; border-top: 1px solid #2f3830; }
.acsn-masthead .wrap { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; }
.acsn-masthead h1 { color: #fff; font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 500; margin: 0; letter-spacing: -.01em; }
.acsn-masthead p { margin: .4em 0 0; max-width: 58ch; font-size: 1.05rem; }
.acsn-masthead .since { text-align: right; font-family: var(--serif); font-size: 1.15rem; color: #e8dcb8; line-height: 1.35; }
.acsn-masthead .since strong { display: block; font-size: 2.1rem; font-weight: 600; color: #fff; }

/* ---------- Lead story ---------- */
.acsn-lead { position: relative; background: var(--ink); }
.acsn-lead a.cover { display: block; position: relative; color: #fff; text-decoration: none; }
.acsn-lead .img { aspect-ratio: 21 / 9; width: 100%; object-fit: cover; background: #2f3830; }
.acsn-lead .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,24,20,0) 35%, rgba(20,24,20,.88) 100%); }
.acsn-lead .text { position: absolute; left: 0; right: 0; bottom: 0; }
.acsn-lead .text .wrap { padding-bottom: 38px; }
.acsn-lead h2 { color: #fff; font-size: clamp(1.9rem, 4.2vw, 3.4rem); max-width: 22ch; margin: .25em 0 .3em; }
.acsn-lead p { color: #e2e5dc; max-width: 62ch; margin: 0; font-size: 1.1rem; }
.acsn-lead .meta { color: #cfd3c8; }

/* ---------- Trust band ---------- */
.acsn-trust { background: #fff; border-bottom: 1px solid var(--line); }
.acsn-trust .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 34px; padding-top: 22px; padding-bottom: 22px; }
.acsn-trust .lbl { color: var(--muted); font-size: .95rem; }
.acsn-trust ul { display: flex; flex-wrap: wrap; gap: 8px 28px; list-style: none; margin: 0; padding: 0; }
.acsn-trust li { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--ink); }
.acsn-trust .kato { margin-left: auto; font-size: .95rem; }

/* ---------- Main layout ---------- */
.acsn-main { padding: 52px 0 70px; }
.acsn-main > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; }
.acsn-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 8px; }
.acsn-section-title h2 { font-size: 2rem; margin: 0; }
.acsn-section-title a { font-size: .95rem; }

/* Tag + meta */
.acsn-tag { display: inline-block; color: var(--sky); font-weight: 600; font-size: .9rem; text-decoration: none; }
.acsn-lead .acsn-tag { color: #e8dcb8; }
.acsn .meta { color: var(--muted); font-size: .9rem; }
.acsn .meta span + span::before { content: " / "; opacity: .6; }

/* ---------- Feed ---------- */
.acsn-feed { list-style: none; margin: 0; padding: 0; }
.acsn-item { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 26px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.acsn-item .thumb { display: block; overflow: hidden; border-radius: 3px; background: #dfe2d8; aspect-ratio: 4 / 3; }
.acsn-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.acsn-item h3 { font-size: 1.65rem; margin: .2em 0 .35em; }
.acsn-item h3 a { color: var(--ink); text-decoration: none; }
.acsn-item h3 a:hover { text-decoration: underline; }
.acsn-item p { margin: 0 0 .6em; }
.acsn-item.is-health { background: linear-gradient(90deg, #eef3f2 0, #eef3f2 100%); margin: 0 -18px; padding-left: 18px; padding-right: 18px; border-radius: 3px; border-bottom: 0; }
.acsn-more { margin-top: 28px; text-align: center; }
.acsn-more .acsn-btn { min-width: 240px; }
.acsn-pager { display: flex; justify-content: space-between; margin-top: 18px; font-size: .95rem; }
.acsn-empty { padding: 40px 0; }

/* ---------- Sidebar ---------- */
.acsn-side > section { margin-bottom: 38px; }
.acsn-side h2 { font-size: 1.5rem; border-bottom: 1px solid var(--ink); padding-bottom: 8px; }
.acsn-side p { font-size: 1rem; }
.acsn-about-box { background: #fff; border: 1px solid var(--line); padding: 22px; border-radius: 3px; }
.acsn-facts { list-style: none; padding: 0; margin: 14px 0 0; }
.acsn-facts li { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .95rem; }
.acsn-facts li b { color: var(--ink); font-weight: 600; }
.acsn-cats { list-style: none; padding: 0; margin: 0; }
.acsn-cats li { border-bottom: 1px solid var(--line); }
.acsn-cats a { display: flex; justify-content: space-between; padding: 10px 0; color: var(--ink); text-decoration: none; }
.acsn-cats a:hover { color: var(--gold-dark); }
.acsn-cats small { color: var(--muted); }
.acsn-plan { background: var(--ink); color: #d6d9cf; padding: 26px 22px; border-radius: 3px; }
.acsn-plan h2 { color: #fff; border-color: #48523f; }
.acsn-plan .acsn-btn { width: 100%; text-align: center; margin-top: 6px; }
.acsn-plan .wa { display: block; text-align: center; margin-top: 12px; color: #e8dcb8; }

/* ---------- Health series band ---------- */
.acsn-health { background: #e3ebe9; border-top: 1px solid #cbd8d5; border-bottom: 1px solid #cbd8d5; padding: 56px 0; }
.acsn-health .wrap { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }
.acsn-health h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.acsn-health ol { margin: 0; padding: 0; list-style: none; }
.acsn-health li { padding: 12px 0; border-bottom: 1px solid #c4d2cf; }
.acsn-health li a { color: var(--ink); text-decoration: none; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; }
.acsn-health li a:hover { text-decoration: underline; }
.acsn-health .planned { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--ink-2); }
.acsn-health .note { font-size: .95rem; color: var(--muted); margin-top: 16px; }

/* ---------- Story CTA ---------- */
.acsn-story { padding: 60px 0; }
.acsn-story .wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.acsn-story img { border-radius: 3px; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.acsn-story h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.acsn-story .btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

/* ---------- Article ---------- */
.acsn-article { padding: 40px 0 70px; }
.acsn-article header { max-width: 760px; margin: 0 auto 26px; padding: 0 20px; }
.acsn-article h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin: .2em 0 .35em; }
.acsn-article .standfirst { font-size: 1.25rem; color: var(--ink-2); margin: 0 0 .8em; }
.acsn-article .hero-img { max-width: var(--wrap); margin: 0 auto 10px; padding: 0 20px; }
.acsn-article .hero-img img { width: 100%; border-radius: 3px; }
.acsn-article .hero-img figcaption { color: var(--muted); font-size: .9rem; margin-top: 6px; }
.acsn-body { max-width: 760px; margin: 30px auto 0; padding: 0 20px; font-size: 1.15rem; line-height: 1.75; }
.acsn-body h2 { font-size: 2rem; margin-top: 1.6em; }
.acsn-body h3 { font-size: 1.5rem; margin-top: 1.4em; }
.acsn-body blockquote { margin: 1.5em 0; padding: 0 0 0 20px; border-left: 3px solid var(--gold); font-family: var(--serif); font-size: 1.5rem; color: var(--ink); }
.acsn-body img { border-radius: 3px; }
.acsn-byline { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .95rem; }
.acsn-byline b { color: var(--ink); }
.acsn-source { margin: 14px 0 0; font-size: .95rem; }
.acsn-reviewed { background: #e3ebe9; border-left: 3px solid var(--sky); padding: 12px 16px; margin: 18px 0 0; font-size: .95rem; }
.acsn-sources, .acsn-disclaimer, .acsn-authorbox { max-width: 760px; margin: 34px auto 0; padding: 0 20px; }
.acsn-sources h2, .acsn-authorbox h2 { font-size: 1.5rem; }
.acsn-sources ol { padding-left: 1.2em; font-size: 1rem; }
.acsn-disclaimer p { font-size: .95rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; }
.acsn-authorbox .box { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--line); padding: 20px; border-radius: 3px; }
.acsn-authorbox .box + .box { margin-top: 12px; }
.acsn-authorbox .ph { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: center 15%; flex: 0 0 72px; }
.acsn-authorbox h3 { font-size: 1.3rem; margin: 0 0 .2em; }
.acsn-authorbox p { margin: 0; font-size: 1rem; }
.acsn-article-cta { max-width: 720px; margin: 40px auto 0; padding: 26px 22px; background: var(--ink); color: #d6d9cf; border-radius: 3px; }
.acsn-article-cta h2 { color: #fff; font-size: 1.8rem; }
.acsn-related { max-width: var(--wrap); margin: 60px auto 0; padding: 0 20px; }

/* ---------- Footer ---------- */
.acsn-footer { background: var(--ink); color: #b9beb2; padding: 54px 0 30px; font-size: .95rem; }
.acsn-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.acsn-footer h2 { color: #fff; font-size: 1.25rem; margin-bottom: .7em; }
.acsn-footer a { color: #e2e5dc; text-decoration: none; }
.acsn-footer a:hover { color: #fff; text-decoration: underline; }
.acsn-footer ul { list-style: none; margin: 0; padding: 0; }
.acsn-footer li { padding: 3px 0; }
.acsn-footer .legal { border-top: 1px solid #343d35; margin-top: 40px; padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: .9rem; }
.acsn-footer address { font-style: normal; }

/* Floating WhatsApp */
.acsn-wa { position: fixed; right: 18px; bottom: 18px; z-index: 50; background: #1f7a4a; color: #fff !important; text-decoration: none; font-weight: 600; padding: 12px 18px; border-radius: 28px; box-shadow: 0 4px 14px rgba(20,24,20,.25); }
.acsn-wa:hover { background: #18633b; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .acsn-main > .wrap, .acsn-health .wrap, .acsn-story .wrap { grid-template-columns: 1fr; gap: 40px; }
  .acsn-footer .cols { grid-template-columns: 1fr 1fr; }
  .acsn-lead .img { aspect-ratio: 16 / 10; }
}
@media (max-width: 720px) {
  .acsn-header .wrap { flex-wrap: wrap; gap: 10px 18px; padding-top: 12px; padding-bottom: 8px; }
  .acsn-nav { order: 3; flex-basis: 100%; }
  .acsn-header .acsn-btn { margin-left: auto; padding: 9px 14px; }
  .acsn-masthead .wrap { grid-template-columns: 1fr; }
  .acsn-masthead .since { text-align: left; }
  .acsn-lead .img { aspect-ratio: 4 / 5; }
  .acsn-item { grid-template-columns: 1fr; gap: 14px; }
  .acsn-trust .kato { margin-left: 0; }
  .acsn-footer .cols { grid-template-columns: 1fr; }
  .acsn-wa { padding: 9px 14px; font-size: .9rem; right: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { .acsn * { transition: none !important; animation: none !important; } }
@media print { .acsn-header, .acsn-footer, .acsn-wa, .acsn-side, .acsn-more { display: none; } }