/*
Theme Name:   Kemetic Minds — Sharp
Theme URI:    https://kemeticmind.com/
Description:  Custom editorial theme for Kemetic Minds. Institutional-grade layout inspired by sharplink.com — Archivo grotesk type, oversized tight-tracked headlines, all-caps eyebrow labels, dotted structural grid, flat zero-radius hairline cards, and alternating light/dark bands — rendered in the Kemetic Minds palette (navy #0d1a2e, gold #D4AF37, cream #f5f0e8). Child theme of Minimalist Blogger.
Author:       Kemetic Minds
Template:     minimalistblogger
Version:      1.0.0
License:      GNU General Public License v2 or later
Text Domain:  kemeticmind-sharp
Tags:         news, blog, editorial, custom-colors, custom-logo, two-columns
*/

/* ══════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ══════════════════════════════════════════════════════════════════ */
:root {
  /* Palette — Kemetic Minds house colours */
  --km-ink:        #0d1a2e;   /* navy, used where Sharplink uses near-black */
  --km-ink-2:      #1b2b45;
  --km-ink-soft:   #33415a;
  --km-ink-mute:   #64748b;
  --km-gold:       #D4AF37;
  --km-gold-deep:  #a8862a;
  --km-cream:      #f5f0e8;
  --km-surface:    #fffdf9;
  --km-ground:     #f7f5f0;
  --km-hairline:   rgba(13, 26, 46, .14);
  --km-hairline-2: rgba(13, 26, 46, .07);
  --km-dark:       #0a1424;
  --km-dark-2:     #142842;

  /* Type */
  --km-sans:   "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --km-narrow: "Archivo Narrow", "Archivo", Helvetica, Arial, sans-serif;

  /* Fluid scale */
  --km-t-eyebrow: .75rem;
  --km-t-body:    clamp(1.0625rem, .98rem + .38vw, 1.1875rem);   /* 17 → 19px */
  --km-t-lead:    clamp(1.1875rem, 1.08rem + .5vw, 1.375rem);
  --km-t-h3:      clamp(1.25rem, 1.12rem + .6vw, 1.55rem);
  --km-t-h2:      clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --km-t-h1:      clamp(2.1rem, 1.5rem + 2.9vw, 4rem);
  --km-t-display: clamp(2.6rem, 1.4rem + 5.4vw, 5.5rem);

  /* Rhythm & metrics */
  --km-shell:   1280px;
  --km-gap:     clamp(1.25rem, 3vw, 2.75rem);
  --km-band:    clamp(3.5rem, 7vw, 7rem);

  /* Motion */
  --km-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ══════════════════════════════════════════════════════════════════
   2. FOUNDATION
   ══════════════════════════════════════════════════════════════════ */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body.wp-theme-minimalistblogger {
  font-family: var(--km-sans);
  font-size: var(--km-t-body);
  line-height: 1.72;
  color: var(--km-ink);
  background: var(--km-ground);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Sharplink's signature: a faint dotted structural grid behind content.
   Rendered here in navy at very low alpha so it reads as engineering
   drafting paper rather than noise. */
#content.site-content {
  position: relative;
  background:
    linear-gradient(to right, var(--km-hairline-2) 1px, transparent 1px) 0 0 / clamp(80px, 8vw, 130px) 100%,
    var(--km-ground);
  padding-block: var(--km-band);
}

p, li, blockquote, .entry-content { color: var(--km-ink); }

/* Link treatment — offset underline, gold on hover, generous tap area */
.entry-content a:not(.blogpost-button):not(.wp-block-button__link) {
  color: var(--km-ink);
  text-decoration: underline;
  text-decoration-color: var(--km-gold);
  text-decoration-thickness: 1.5px;
  text-underline-offset: .22em;
  transition: color .18s var(--km-ease), text-decoration-color .18s var(--km-ease);
}
.entry-content a:not(.blogpost-button):hover { color: var(--km-gold-deep); text-decoration-color: var(--km-gold-deep); }
a:focus-visible, button:focus-visible, input:focus-visible, .blogpost-button:focus-visible {
  outline: 2px solid var(--km-gold);
  outline-offset: 3px;
}

/* ══════════════════════════════════════════════════════════════════
   3. TYPOGRAPHY — oversized, tight-tracked, left-aligned
   ══════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6,
.entry-title, .widget-title {
  font-family: var(--km-sans);
  color: var(--km-ink);
  font-weight: 500;
  letter-spacing: -.022em;
  line-height: 1.08;
  text-wrap: balance;
}
.single .entry-title, .page .entry-title {
  font-size: var(--km-t-h1);
  font-weight: 400;
  letter-spacing: -.032em;
  line-height: 1.04;
  text-align: left;
  margin: 0 0 .5em;
}
/* Sharplink's heading rhythm: much more air above a heading than below it,
   so a heading visibly belongs to the text that follows it. */
.entry-content h2 { font-size: var(--km-t-h2); margin: 2.4em 0 .6em; letter-spacing: -.028em; }
.entry-content h3 { font-size: var(--km-t-h3); margin: 2em 0 .5em; }
.entry-content h2::after {
  content: ""; display: block; width: 44px; height: 2px;
  background: var(--km-gold); margin-top: .55em;
}
.entry-content p { margin: 0 0 1.35em; }
.entry-content > p:first-of-type { font-size: var(--km-t-lead); line-height: 1.62; color: var(--km-ink-2); }

/* All-caps eyebrow label — the single most identifiable Sharplink device.
   Block-level, so it sits on its own line above the headline instead of
   running into it. */
.km-eyebrow, .single .entry-meta .cat-links a, .km-kicker {
  display: block;
  font-family: var(--km-sans);
  font-size: var(--km-t-eyebrow);
  font-weight: 600;
  letter-spacing: .095em;
  text-transform: uppercase;
  color: var(--km-ink-mute);
  line-height: 1.5;
  margin-bottom: .55rem;
}
.km-eyebrow > span { color: var(--km-gold-deep); padding: 0 .18em; }

/* ══════════════════════════════════════════════════════════════════
   4. MASTHEAD — flat, sticky, hairline-ruled
   ══════════════════════════════════════════════════════════════════ */
#masthead.site-header {
  background: var(--km-dark);
  border-bottom: 1px solid rgba(212, 175, 55, .22);
  position: sticky; top: 0; z-index: 900;
  transition: box-shadow .25s var(--km-ease);
}
#masthead.site-header.km-stuck { box-shadow: 0 10px 30px -18px rgba(10, 20, 36, .85); }
#masthead a, #masthead .site-title, #masthead .site-description { color: var(--km-cream); }

/* The parent theme floats its top-level menu items and relies on them
   fitting one row. Taller tiles make the menu wrap, and the floated row
   then escapes its zero-height container — which pushed the whole page
   body down by ~470px. Laying the menu out with flex removes the floats
   entirely, so the container always measures its real height. */
#masthead .center-main-menu > ul,
#masthead nav ul.menu,
#masthead nav ul.nav-menu,
#masthead nav > div > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}
#masthead nav ul li { float: none !important; position: relative; }

/* Nav items as flat tiles, like Sharplink's segmented top bar */
#masthead .main-navigation ul li a,
#masthead .primary-menu ul li a,
#masthead nav ul li a {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--km-cream);
  padding: 1.05rem .95rem;          /* ≥44px tap target */
  min-height: 44px;
  display: flex; align-items: center;
  border-radius: 0;
  transition: background .18s var(--km-ease), color .18s var(--km-ease);
}
#masthead nav ul li a { text-decoration: none; }
#masthead nav ul li a:hover,
#masthead nav ul li.current-menu-item > a {
  background: rgba(212, 175, 55, .16);
  color: #fff;
}
#masthead nav ul li.current-menu-item > a { box-shadow: inset 0 -2px 0 var(--km-gold); }

/* Cascading submenus.
   The top-level rule above paints nav links cream for the dark masthead;
   left alone that colour is inherited by dropdown items, which the parent
   theme renders on a white panel — cream on white, i.e. invisible. The
   panel is restyled dark so the cream text is the correct choice there
   too, rather than fighting the inheritance with an override. */
#masthead nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  z-index: 950;
  flex-direction: column;
  background: var(--km-dark);
  border: 1px solid rgba(212, 175, 55, .28);
  box-shadow: 0 18px 40px -22px rgba(10, 20, 36, .9);
}
#masthead nav ul li:hover > ul,
#masthead nav ul li:focus-within > ul { display: flex; }

/* Third level and deeper open to the side, not stacked on top. */
#masthead nav ul ul ul { top: 0; left: 100%; }

#masthead nav ul ul li { width: 100%; }
#masthead nav ul ul li a {
  display: flex;
  width: 100%;
  min-height: 44px;
  padding: .75rem 1.05rem;
  font-size: .74rem;
  letter-spacing: .07em;
  text-align: left;
  color: var(--km-cream);
  background: transparent;
  border-bottom: 1px solid rgba(245, 240, 232, .12);
}
#masthead nav ul ul li:last-child > a { border-bottom: 0; }
#masthead nav ul ul li a:hover,
#masthead nav ul ul li a:focus { background: rgba(212, 175, 55, .18); color: #fff; }

/* Gold reading-progress rail under the masthead */
.km-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--km-gold-deep), var(--km-gold));
  z-index: 999; pointer-events: none;
  transition: width .08s linear;
}

/* ══════════════════════════════════════════════════════════════════
   4b. NEWS HERO — the live headline feed in place of the header image
   ══════════════════════════════════════════════════════════════════
   The band between the nav and the first post used to hold a stock photo
   shipped with the parent theme. It now holds the newsroom: a lead story,
   a self-scrolling column of what is behind it, and a breaking ticker.

   Everything that moves here is a CSS transform on a duplicated track —
   no scroll listeners, no timers, no layout thrash. That matters on this
   site specifically: the phone-scroll crash it used to have came from
   main-thread work in exactly this position on the page.
   ══════════════════════════════════════════════════════════════════ */

.km-hero { position: relative; background: var(--km-dark); }

/* Whatever the parent still emits for its own header image is redundant now. */
.bottom-header-wrapper { display: none; }

.km-hero-stage {
  position: relative;
  overflow: hidden;
  min-height: clamp(340px, 40vw, 460px);
  display: flex;
  align-items: center;
  padding-block: clamp(2.25rem, 4vw, 3.5rem);
}

/* Layer 1 — the lead story's photograph, held well back. One per slide,
   stacked; only the active one is painted, and only it carries the drift
   animation, so four idle backdrops cost nothing on the compositor. */
.km-hero-backdrops { position: absolute; inset: 0; }

.km-hero-backdrop {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .9s var(--km-ease);
}
.km-hero-backdrop.is-active {
  opacity: .5;
  animation: km-drift 38s var(--km-ease) infinite alternate;
}
@keyframes km-drift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.5%, -1.5%, 0); }
}

/* Layer 2 — a scrim heavy enough to guarantee text contrast over any
   photograph, including a light one. Cream on the darkest point of this
   gradient measures ~13:1. */
.km-hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(105deg, var(--km-dark) 6%, rgba(10, 20, 36, .92) 42%, rgba(10, 20, 36, .58) 100%);
}

/* Layer 3 — the same vertical hairline grid the content area uses, so the
   hero reads as part of the page rather than a banner pasted on top. */
.km-hero-grid {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(245, 240, 232, .06) 1px, transparent 1px)
              0 0 / clamp(80px, 8vw, 130px) 100%;
}

.km-hero-cols {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  width: 100%;
}

/* ── Lead story (rotating) ───────────────────────────────────────── */
/* Every slide occupies the same grid cell, so the column is sized by the
   tallest of them once and nothing reflows as they change — a rotator that
   resizes the hero on each turn shoves the first post card up and down the
   page while the reader is trying to read it. */
.km-hero-lead {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.km-hero-slide {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  /* visibility, not display: it keeps the slide in the grid's height
     calculation while making its links unclickable and untabbable. */
  visibility: hidden;
  transform: translate3d(0, 12px, 0);
  transition: opacity .55s var(--km-ease), transform .55s var(--km-ease),
              visibility 0s linear .55s;
}
.km-hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .55s var(--km-ease), transform .55s var(--km-ease),
              visibility 0s;
}

/* The dots sit in their own row beneath the stack rather than inside it, so
   they do not move as slides of different heights come and go. */
.km-hero-dots {
  grid-area: 2 / 1;
  display: flex; gap: .5rem;
  margin-top: 1.5rem;
}
.km-hero-dot {
  width: 30px; height: 3px;
  padding: 0;
  border: 0; border-radius: 0;
  background: rgba(245, 240, 232, .28);
  cursor: pointer;
  transition: background-color .3s var(--km-ease);
  /* The bar is 3px, which is nowhere near a tap target; the padded box
     around it is, without changing what is drawn. */
  box-sizing: content-box;
  padding-block: 20px;
  background-clip: content-box;
  margin-block: -20px;
}
.km-hero-dot:hover { background-color: rgba(245, 240, 232, .6); }
.km-hero-dot.is-active { background-color: var(--km-gold); }
.km-hero-dot:focus-visible { outline: 2px solid var(--km-gold); outline-offset: 3px; }

.km-hero-kicker { display: block; margin-bottom: .7rem; color: var(--km-gold); }
.km-hero-kicker > span { color: rgba(212, 175, 55, .55); margin: 0 .45em; }

.km-hero-title {
  margin: 0 0 .85rem;
  font-family: var(--km-sans);
  font-size: clamp(1.65rem, 1.1rem + 2.2vw, 3.05rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.032em;
}
/* Stated explicitly: the global heading colour is navy, and inheriting it
   here would put navy text on the navy scrim. */
.km-hero-title a {
  color: var(--km-cream);
  text-decoration: none;
  background-image: linear-gradient(var(--km-gold), var(--km-gold));
  background-repeat: no-repeat;
  background-size: 0 2px;
  background-position: 0 100%;
  transition: background-size .3s var(--km-ease);
}
.km-hero-title a:hover, .km-hero-title a:focus-visible { background-size: 100% 2px; }

.km-hero-dek {
  color: rgba(245, 240, 232, .82);
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 54ch;
  margin: 0 0 1.35rem;
}

.km-hero-btn {
  display: inline-flex; align-items: center;
  padding: .85rem 1.35rem;
  background: transparent;
  color: var(--km-cream);
  border: 1px solid rgba(245, 240, 232, .38);
  font-family: var(--km-narrow);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none;
  transition: background-color .2s var(--km-ease), border-color .2s var(--km-ease);
}
.km-hero-btn:hover, .km-hero-btn:focus-visible {
  background: rgba(212, 175, 55, .16);
  border-color: var(--km-gold);
  color: #fff;
}

/* ── Self-scrolling headline column ──────────────────────────────── */
.km-hero-feed {
  min-width: 0;
  border-left: 1px solid rgba(245, 240, 232, .16);
  padding-left: clamp(1.1rem, 2vw, 1.9rem);
}

.km-feed-head {
  display: flex; align-items: center; gap: .55rem;
  margin-bottom: .9rem;
}
.km-feed-head .km-eyebrow { color: var(--km-gold); }

.km-live-dot {
  width: 7px; height: 7px; background: var(--km-gold);
  box-shadow: 0 0 0 0 rgba(212, 175, 55, .7);
  animation: km-pulse 2.4s ease-out infinite;
}
@keyframes km-pulse {
  70%  { box-shadow: 0 0 0 9px rgba(212, 175, 55, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

/* The viewport crops the track; the fade at top and bottom stops rows from
   appearing to be cut in half at the edges. */
.km-feed-viewport {
  height: clamp(210px, 24vw, 292px);
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 11%, #000 89%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 11%, #000 89%, transparent);
}

/* The track holds the headlines twice. Translating it up by half its own
   height lands the clone exactly where the original started, so the loop
   has no visible seam and needs no JavaScript to reset. */
.km-feed-track {
  list-style: none; margin: 0; padding: 0;
  animation: km-marquee-y 46s linear infinite;
}
@keyframes km-marquee-y {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}
/* Pause while the visitor is reading it or tabbing through it. */
.km-feed-viewport:hover .km-feed-track,
.km-feed-track:focus-within { animation-play-state: paused; }

.km-feed-item { border-bottom: 1px solid rgba(245, 240, 232, .1); }

.km-feed-link {
  display: block;
  padding: .72rem 0;
  text-decoration: none;
  transition: opacity .2s var(--km-ease);
}
.km-feed-link:hover, .km-feed-link:focus-visible { opacity: 1; }
.km-feed-link:hover .km-feed-title { color: var(--km-gold); }

.km-feed-meta {
  display: flex; align-items: baseline; gap: .5rem;
  margin-bottom: .18rem;
  font-family: var(--km-narrow);
  font-size: .66rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.km-feed-cat  { color: var(--km-gold); }
.km-feed-time { color: rgba(245, 240, 232, .5); }

.km-feed-title {
  display: block;
  color: var(--km-cream);
  font-size: .92rem;
  line-height: 1.38;
  transition: color .2s var(--km-ease);
}

.km-feed-all {
  display: inline-block; margin-top: .85rem;
  font-family: var(--km-narrow);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--km-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 175, 55, .45);
}
.km-feed-all:hover, .km-feed-all:focus-visible { color: #fff; border-bottom-color: #fff; }

/* ── Breaking ticker ─────────────────────────────────────────────── */
.km-ticker {
  position: relative; z-index: 2;
  display: flex; align-items: stretch;
  background: var(--km-ink);
  border-top: 1px solid rgba(212, 175, 55, .3);
  border-bottom: 1px solid rgba(212, 175, 55, .3);
}

.km-ticker-label {
  flex: 0 0 auto;
  display: flex; align-items: center;
  padding: .7rem 1.1rem;
  background: var(--km-gold);
  color: var(--km-ink);
  font-family: var(--km-narrow);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap;
}

.km-ticker-viewport { flex: 1 1 auto; overflow: hidden; }

.km-ticker-track {
  display: flex; align-items: center;
  width: max-content;
  animation: km-marquee-x 64s linear infinite;
}
@keyframes km-marquee-x {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.km-ticker-viewport:hover .km-ticker-track,
.km-ticker-track:focus-within { animation-play-state: paused; }

.km-ticker-item {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .7rem 1.35rem;
  color: var(--km-cream);
  font-size: .84rem;
  white-space: nowrap;
  text-decoration: none;
}
.km-ticker-item:hover, .km-ticker-item:focus-visible { color: var(--km-gold); }
.km-ticker-dot { width: 5px; height: 5px; background: var(--km-gold); flex: 0 0 auto; }

/* ── Narrow screens ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .km-hero-cols { grid-template-columns: 1fr; gap: 1.75rem; }
  .km-hero-feed {
    border-left: 0;
    border-top: 1px solid rgba(245, 240, 232, .16);
    padding-left: 0; padding-top: 1.25rem;
  }
  .km-feed-viewport { height: 196px; }
  .km-ticker-label { padding-inline: .8rem; font-size: .64rem; }

  /* The shared .km-btn rule stretches to the column at this width, which
     strands the gold arrow tile a long way from its own label. */
  .km-hero-btn { width: fit-content; }

  /* Keep the hero from pushing the first post card off a phone screen. */
  .km-hero-dek {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    overflow: hidden;
  }
}

/* A visitor who has asked for less motion gets the same information with
   nothing moving: the column becomes a normal scrollable list and the
   duplicate rows are dropped so nothing reads twice. */
@media (prefers-reduced-motion: reduce) {
  .km-hero-backdrop,
  .km-feed-track,
  .km-ticker-track,
  .km-live-dot { animation: none; }

  /* The hero stops rotating on its own (theme.js checks the same query), but
     the dots still work — so the change is instant rather than animated
     rather than being taken away. */
  .km-hero-slide, .km-hero-backdrop { transition: none; }
  .km-feed-viewport { overflow-y: auto; }
  .km-feed-item[aria-hidden="true"],
  .km-ticker-item[aria-hidden="true"] { display: none; }
  .km-ticker-viewport { overflow-x: auto; }
}

/* ══════════════════════════════════════════════════════════════════
   5. POST CARDS — flat, zero-radius, hairline, corner accent
   ══════════════════════════════════════════════════════════════════ */
article.posts-entry.fbox {
  background: var(--km-surface);
  border: 1px solid var(--km-hairline);
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: var(--km-gap);
  position: relative;
  overflow: hidden;
  transition: border-color .22s var(--km-ease), transform .22s var(--km-ease);
}
/* The small square accent that marks a section corner on sharplink.com */
article.posts-entry.fbox::before {
  content: ""; position: absolute; top: -1px; left: -1px;
  width: 8px; height: 8px; background: var(--km-gold); z-index: 3;
}
article.posts-entry.fbox:hover { border-color: rgba(13, 26, 46, .32); transform: translateY(-2px); }

article.posts-entry .featured-thumbnail { margin: 0; overflow: hidden; }
article.posts-entry .featured-thumbnail img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 0;
  transition: transform .5s var(--km-ease);
}
article.posts-entry:hover .featured-thumbnail img { transform: scale(1.028); }

article.posts-entry .entry-header,
article.posts-entry .entry-meta,
article.posts-entry .entry-content,
article.posts-entry .text-center { padding-inline: clamp(1.25rem, 3vw, 2.25rem); }

article.posts-entry .entry-title {
  font-size: var(--km-t-h2);
  font-weight: 500;
  letter-spacing: -.028em;
  line-height: 1.12;
  text-align: left;
  margin: 1.15rem 0 .45rem;
}
article.posts-entry .entry-title a { color: var(--km-ink); text-decoration: none; }
article.posts-entry .entry-title a:hover { color: var(--km-gold-deep); }

/* On archive cards the eyebrow already carries CATEGORY · DATE, so the
   theme's own meta row would print the same date a second line down. */
.home article.posts-entry .entry-meta .posted-on,
.archive article.posts-entry .entry-meta .posted-on,
.search article.posts-entry .entry-meta .posted-on { display: none; }

/* Meta row rendered as a thin ruled label strip: LABEL ———— DATE */
article.posts-entry .entry-meta,
article.posts-entry .blog-data-wrapper {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--km-ink-mute);
}
article.posts-entry .entry-meta a { color: var(--km-ink-mute); text-decoration: none; }
article.posts-entry .entry-meta a:hover { color: var(--km-gold-deep); }
article.posts-entry .post-data-divider { border-color: var(--km-hairline); }

article.posts-entry .entry-content p {
  font-size: 1rem; line-height: 1.68; color: var(--km-ink-soft);
}

/* ══════════════════════════════════════════════════════════════════
   6. BUTTONS — flat slab + separate square arrow tile
   ══════════════════════════════════════════════════════════════════ */
article.posts-entry .text-center { text-align: left !important; }

a.blogpost-button,
.wp-block-button__link,
.km-btn {
  display: inline-flex; align-items: center; gap: 0;
  background: var(--km-ink);
  color: var(--km-cream) !important;
  font-size: .78rem; font-weight: 600;
  letter-spacing: .095em; text-transform: uppercase;
  padding: 0 1.15rem;
  min-height: 46px;
  border: 0; border-radius: 0;
  text-decoration: none;
  transition: background .18s var(--km-ease);
}
a.blogpost-button::after,
.km-btn::after {
  content: "→";
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; min-height: 46px;
  margin-left: 1.15rem; margin-right: -1.15rem;
  background: var(--km-gold);
  color: var(--km-ink);
  font-size: 1rem; letter-spacing: 0;
  transition: background .18s var(--km-ease), transform .18s var(--km-ease);
}
a.blogpost-button:hover, .km-btn:hover { background: var(--km-ink-2); }
a.blogpost-button:hover::after, .km-btn:hover::after { background: #e8c65a; transform: translateX(2px); }

/* ══════════════════════════════════════════════════════════════════
   7. SINGLE POST — capped measure, full-bleed media
   ══════════════════════════════════════════════════════════════════ */
.single .site-main article.posts-entry {
  background: var(--km-surface);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
/* Body copy fills its column. A 68ch measure cap used to sit here, which is
   sound typography in the abstract but wrong for this layout: the column is
   already narrowed by the sidebar, so the cap only bit on desktop, and it bit
   asymmetrically - the cap is a max-width on a block with no auto margins, so
   the prose stayed pinned left and stopped ~145px short of the headline and
   ~180px short of the featured image above it. That ragged right edge is what
   made an article look like the text had come loose from its own container.
   The sidebar column is the measure now; nothing here can run away, because
   #primary is itself capped. */
.single .entry-content,
.page .entry-content { max-width: none; }

/* Long raw URLs (the trackers list their sources as bare links) must wrap
   inside their container rather than overflowing it. */
.entry-content a,
.entry-content li,
.entry-content p { overflow-wrap: anywhere; word-break: break-word; }

/* Charts and maps take the whole column on every template. */
.entry-content .plotly-graph-div,
.entry-content .js-plotly-plot,
.entry-content iframe { max-width: 100%; width: 100%; }

/* ── Dashboard pages run the full width ──────────────────────────────
   Set by kms_wide_page_class() on any Page carrying a chart, a map embed
   or a table. Removing the measure cap was not enough on its own: the
   sidebar was still taking a third of the row, so the Cyclospora map was
   drawing at roughly half the width it needs. The sidebar moves below the
   dashboard rather than disappearing — the search and subscribe widgets
   stay reachable, laid out as a strip instead of a column. */
.km-wide #primary.content-area,
.km-wide #primary {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
}
.km-wide #secondary.widget-area,
.km-wide #secondary {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin-top: var(--km-gap);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--km-gap);
  align-items: start;
}
/* The map's own container is sized by Plotly at render time; without this it
   keeps whatever width it measured before the rule above widened the row. */
.km-wide .entry-content .js-plotly-plot,
.km-wide .entry-content .plotly-graph-div,
.km-wide .entry-content > iframe { width: 100% !important; }

@media (max-width: 900px) {
  .km-wide #secondary { grid-template-columns: 1fr; }
}

/* Media, charts, tables and embeds break the measure and run full card width */
.single .entry-content > figure,
.single .entry-content > .wp-block-image,
.single .entry-content > table,
.single .entry-content .plotly-graph-div,
.single .entry-content > div[style*="padding-bottom:56.25%"],
.single .entry-content > iframe {
  max-width: none; width: 100%;
}
.single .entry-content figure img { border-radius: 0; }
.single .entry-content figcaption {
  font-size: .8rem; color: var(--km-ink-mute); line-height: 1.6;
  letter-spacing: .01em; margin-top: .6rem;
  border-left: 2px solid var(--km-gold); padding-left: .7rem;
}

/* Wide content must scroll inside itself, never the page body */
.entry-content table,
.entry-content pre { display: block; max-width: 100%; overflow-x: auto; }
.entry-content img { max-width: 100%; height: auto; }

/* Quotes as flat gold-ruled slabs, not rounded bubbles */
.entry-content blockquote {
  margin: 2rem 0; padding: 1.1rem 0 1.1rem 1.6rem;
  border-left: 3px solid var(--km-gold); border-radius: 0;
  background: none; font-size: var(--km-t-lead);
  line-height: 1.6; font-style: normal; color: var(--km-ink-2);
}

/* Numbered footnotes — the [N] markers and References list that every bot
   builds through footnote_citations.py. The jump down to a reference and the
   back-arrow's jump up are plain fragment links, already animated by the
   scroll-behavior: smooth at the top of this file. What's left is making the
   landing readable.

   scroll-margin-top gives the landing a little breathing room, plus clearance
   for the masthead if it is actually pinned — theme.js publishes that height
   as --km-sticky-h, and publishes 0px when it isn't, which is the case today.
   The :target tint then says which line was landed on — without it, arriving
   at reference 11 of 14 looks identical to arriving at reference 10. */
.entry-content [id^="fn"] {
  scroll-margin-top: calc(var(--km-sticky-h, 0px) + 1.25rem);
}
.entry-content [id^="fn"]:target {
  background: rgba(212, 175, 55, .22);
  box-shadow: 0 0 0 .3rem rgba(212, 175, 55, .22);
  border-radius: 2px;
}
/* A superscript marker otherwise stretches the line box it sits in, leaving
   uneven gaps between paragraphs that carry a citation and ones that don't. */
.entry-content sup[id^="fnref"] { line-height: 0; }
.entry-content .nw-footnotes a[href^="#fnref"] {
  text-decoration: none; padding: 0 .2em; color: var(--km-gold-deep);
}

/* ══════════════════════════════════════════════════════════════════
   8. DARK BANDS — the alternating light/dark rhythm from sharplink.com
   ══════════════════════════════════════════════════════════════════ */
.km-band-dark {
  background: linear-gradient(160deg, var(--km-dark) 0%, var(--km-ink) 55%, var(--km-dark-2) 100%);
  color: var(--km-cream);
  padding: var(--km-band) 0;
}
.km-band-dark h1, .km-band-dark h2, .km-band-dark h3 { color: #fff; }
/* House rule: cream text on navy, never grey — readability on dark boxes */
.km-band-dark p, .km-band-dark li { color: var(--km-cream) !important; font-size: 1.05em; line-height: 1.88; }
.km-band-dark a { color: var(--km-gold); }

/* ══════════════════════════════════════════════════════════════════
   9. SIDEBAR — quieted, flat, scannable
   ══════════════════════════════════════════════════════════════════ */
#secondary .widget.fbox.swidgets-wrap {
  background: var(--km-surface);
  border: 1px solid var(--km-hairline);
  border-radius: 0; box-shadow: none;
  padding: clamp(1rem, 2vw, 1.4rem);
  margin-bottom: 1.1rem;
}
#secondary .widget-title {
  font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--km-ink-mute);
  padding: 0 0 .6rem; margin: 0 0 .85rem;
  border-bottom: 1px solid var(--km-hairline);
  background: none;
}
#secondary .widget li {
  border-bottom: 1px solid var(--km-hairline-2);
  padding: .55rem 0; line-height: 1.5; font-size: .95rem;
}
#secondary .widget li:last-child { border-bottom: 0; }
#secondary .widget a { color: var(--km-ink); text-decoration: none; }
#secondary .widget a:hover { color: var(--km-gold-deep); }
#secondary input[type="search"], #secondary input[type="text"], #secondary input[type="email"] {
  width: 100%; min-height: 44px; padding: .6rem .75rem;
  border: 1px solid var(--km-hairline); border-radius: 0;
  font-family: var(--km-sans); font-size: .95rem; background: #fff;
}

/* ══════════════════════════════════════════════════════════════════
   10. FOOTER
   ══════════════════════════════════════════════════════════════════ */
#colophon.site-footer {
  background: var(--km-dark);
  color: var(--km-cream);
  border-top: 1px solid rgba(212, 175, 55, .22);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
/* The global `p`/heading colour rules out-specify a plain `color` on the
   footer, so navy text would land on the navy ground. Every text node in
   a dark region gets its colour stated explicitly. */
#colophon p,
#colophon li,
#colophon span,
#colophon h1, #colophon h2, #colophon h3, #colophon h4 {
  color: var(--km-cream);
}
#colophon p, #colophon li { font-size: 1.02em; line-height: 1.85; }
#colophon a { color: var(--km-gold); text-decoration-color: rgba(212, 175, 55, .5); }
#colophon a:hover { color: #e8c65a; }
#colophon .widget-title { color: rgba(245, 240, 232, .62); border-bottom-color: rgba(245, 240, 232, .18); }
#colophon .widget li { border-bottom-color: rgba(245, 240, 232, .12); }

/* ══════════════════════════════════════════════════════════════════
   11. SCROLL REVEAL — subtle, opt-out under reduced motion
   ══════════════════════════════════════════════════════════════════ */
.km-reveal { opacity: 0; transform: translateY(14px); }
.km-reveal.km-in { opacity: 1; transform: none; transition: opacity .5s var(--km-ease), transform .5s var(--km-ease); }
@media (prefers-reduced-motion: reduce) { .km-reveal { opacity: 1; transform: none; } }

/* ══════════════════════════════════════════════════════════════════
   12. RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #content.site-content { background-image: none; }
  article.posts-entry .featured-thumbnail img { aspect-ratio: 3 / 2; }
  a.blogpost-button, .km-btn { width: 100%; justify-content: space-between; }
  a.blogpost-button::after, .km-btn::after { margin-right: -1.15rem; }
  #masthead.site-header { position: static; }   /* reclaim vertical space on phones */

  /* Safety net: if the parent theme's mobile menu ever fails to engage, the
     nav scrolls sideways inside itself rather than widening the page and
     forcing a horizontal body scroll. */
  #masthead nav > ul { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #masthead nav > ul::-webkit-scrollbar { display: none; }
}

/* Print */
@media print {
  #masthead, #colophon, #secondary, .km-progress, .blogpost-button,
  .km-hero { display: none !important; }
  body { background: #fff; color: #000; }
}