/* ==========================================================================
   michaelkipkorir.com — V11 layer ("Highland mist edition")
   --------------------------------------------------------------------------
   Loaded after styles.css. Adds, without disturbing the v8 structure:
     A. Night theme ("highland night") — token overrides + adaptations.
     B. Theme toggle + iris transition overlay.
     C. The Field Desk — a Ctrl/Cmd+K command palette.
     D. Hero sky — layered parallax landscape, recoloured for highland mist.
     E. Research geography — an accurate map of Africa (Natural Earth data,
        Lambert azimuthal equal-area) with field routes from Eldoret.
     F. The trail — journey path upgrades: contour sheet, waystone orbit
        rings, a walking field-researcher dot, the hero route strip and the
        reading-progress trail.
     G. Back-to-top, live Eldoret clock, custom 404, view transitions,
        card spotlight and magnetic buttons.
   Palette: highland slate / glacier blue / sage / mist paper.
   All motion respects prefers-reduced-motion. No dependencies.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. Night theme — highland night
   -------------------------------------------------------------------------- */
html[data-theme="night"] {
  color-scheme: dark;

  --pine-950: #0B1820;
  --pine-975: #08131A;
  --pine-900: #10202A;
  --pine-800: #152833;
  --pine-700: #1C3340;
  --moss-600: #3B5868;

  --cream: #0E1C25;
  --cream-deep: #0A161E;
  --paper: #13242F;
  --ink: #E3ECEF;
  --ink-soft: #9DB0B9;
  --ink-body: #C3D2D8;

  --gold-600: #6FAAC0;
  --gold-500: #7DB4C7;
  --gold-400: #98C5D4;
  --gold-300: #B7D8E2;
  --gold-wash: #16303B;

  --terra-600: #8CBBA7;
  --terra-500: #74A592;
  --terra-400: #8CBBA7;
  --terra-wash: #142B24;

  --on-dark: #EEF3F4;
  --on-dark-muted: rgba(237, 243, 245, 0.72);
  --on-dark-faint: rgba(237, 243, 245, 0.55);
  --line: rgba(227, 236, 239, 0.15);
  --line-dark: rgba(237, 243, 245, 0.16);

  --shadow-lg: 0 26px 60px -22px rgba(0, 0, 0, 0.62);
  --shadow-md: 0 18px 38px -18px rgba(0, 0, 0, 0.5);
}

/* Adaptations for values the V8 sheet hard-codes light. */
html[data-theme="night"] .site-header.scrolled {
  background: rgba(11, 24, 32, 0.9);
  border-bottom-color: var(--line-dark);
}
html[data-theme="night"] .site-header.scrolled .brand-text { color: var(--on-dark); }
html[data-theme="night"] .site-header.scrolled .site-nav a { color: rgba(227, 236, 239, 0.8); }
html[data-theme="night"] .site-header.scrolled .site-nav a:hover,
html[data-theme="night"] .site-header.scrolled .site-nav a.active { color: var(--gold-300); }
html[data-theme="night"] .site-header.scrolled .nav-toggle span { background: var(--on-dark); }

html[data-theme="night"] .cite-format,
html[data-theme="night"] .pub-search input,
html[data-theme="night"] .pub-filters select,
html[data-theme="night"] .form-row input,
html[data-theme="night"] .form-row select,
html[data-theme="night"] .form-row textarea {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="night"] .record-strip dt { color: var(--gold-300); }
html[data-theme="night"] .area-card .area-q,
html[data-theme="night"] .ft-heading,
html[data-theme="night"] .pub-year,
html[data-theme="night"] .pub-geo,
html[data-theme="night"] .contact-card .card-h { color: var(--ink); }
html[data-theme="night"] .form-sent { color: var(--gold-300); }
html[data-theme="night"] .pub h3 a:hover { color: var(--gold-300); }

html[data-theme="night"] .b-published { color: #A3CDBB; border-color: #A3CDBB; background: rgba(86, 138, 120, 0.22); }
html[data-theme="night"] .b-review { color: #A9D0DC; border-color: #6FAAC0; background: rgba(91, 157, 180, 0.16); }
html[data-theme="night"] .b-ongoing { color: #C3BEE3; border-color: #7A72AE; background: rgba(122, 114, 174, 0.16); }
html[data-theme="night"] .b-concept { color: #9DB0B9; border-color: #4A6878; background: rgba(74, 104, 120, 0.18); }

/* Smooth cross-fade while a theme switch settles (class set briefly by JS). */
html.theme-switching body,
html.theme-switching .section-alt,
html.theme-switching .card,
html.theme-switching .glance-cell,
html.theme-switching .pub-tools,
html.theme-switching .contact-form,
html.theme-switching .lab-module,
html.theme-switching .note-card,
html.theme-switching .site-header,
html.theme-switching .site-footer {
  transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease;
}

/* --------------------------------------------------------------------------
   B. Theme toggle + iris transition
   -------------------------------------------------------------------------- */
.header-tools {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: none;
}
.header-inner .site-nav { order: 1; }
.header-inner .header-tools { order: 2; }
.header-inner .nav-toggle { order: 3; }
@media (min-width: 881px) {
  .site-nav { margin-left: auto; }
  .header-tools { margin-left: 1.3rem; }
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(237, 243, 245, 0.4);
  border-radius: 999px;
  background: transparent;
  color: var(--on-dark);
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s var(--ease-out);
}
.icon-btn:hover {
  background: rgba(125, 180, 199, 0.16);
  border-color: var(--gold-400);
  color: var(--gold-300);
  transform: translateY(-1px);
}
.icon-btn svg { width: 18px; height: 18px; }

.site-header.scrolled .icon-btn { color: rgba(26, 43, 54, 0.8); }
html[data-theme="night"] .site-header.scrolled .icon-btn { color: var(--on-dark); }
.site-header.scrolled .icon-btn:hover { color: var(--gold-600); }

.theme-toggle .icon-sun,
.theme-toggle .icon-moon { transition: opacity 0.4s ease, transform 0.4s var(--ease-out); }
.theme-toggle .icon-sun { display: none; }
html[data-theme="night"] .theme-toggle .icon-sun { display: block; }
html[data-theme="night"] .theme-toggle .icon-moon { display: none; }

/* The search trigger — wider on desktop, icon-only on small screens. */
.desk-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark);
  background: transparent;
  border: 1px solid rgba(237, 243, 245, 0.4);
  border-radius: 999px;
  padding: 0.72em 1.1em;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.desk-btn:hover {
  background: rgba(125, 180, 199, 0.16);
  border-color: var(--gold-400);
  color: var(--gold-300);
}
.desk-btn svg { width: 15px; height: 15px; flex: none; }
.desk-btn .desk-kbd {
  font-family: var(--mono);
  font-size: 0.66rem;
  padding: 0.14em 0.42em;
  border: 1px solid rgba(237, 243, 245, 0.35);
  border-radius: 5px;
  color: rgba(237, 243, 245, 0.7);
}
.site-header.scrolled .desk-btn { color: rgba(26, 43, 54, 0.85); }
.site-header.scrolled .desk-btn .desk-kbd { border-color: rgba(26, 43, 54, 0.3); color: rgba(26, 43, 54, 0.6); }
html[data-theme="night"] .site-header.scrolled .desk-btn { color: var(--on-dark); }
@media (max-width: 880px) {
  .desk-btn .desk-label, .desk-btn .desk-kbd { display: none; }
  .desk-btn { padding: 0.72em 0.85em; }
}

/* Iris overlay used for the day/night wipe. */
.iris {
  position: fixed;
  inset: 0;
  z-index: 1140;
  pointer-events: none;
  clip-path: circle(0px at 50% 50%);
}

/* --------------------------------------------------------------------------
   C. The Field Desk — command palette
   -------------------------------------------------------------------------- */
.fd-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(8, 19, 26, 0.6);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s ease, visibility 0s linear 0.24s;
}
.fd-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity 0.24s ease; }

.fd-panel {
  position: fixed;
  z-index: 1110;
  top: 11vh;
  left: 50%;
  transform: translateX(-50%) translateY(10px) scale(0.985);
  width: min(660px, calc(100vw - 1.8rem));
  max-height: min(62vh, 560px);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid rgba(91, 157, 180, 0.5);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s var(--ease-out);
}
.fd-panel.is-open { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

.fd-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.2rem;
  border-bottom: 1px solid var(--line);
  background: var(--gold-wash);
}
.fd-head svg { width: 17px; height: 17px; color: var(--gold-500); flex: none; }
.fd-input {
  flex: 1;
  min-width: 0;
  font-family: var(--sans);
  font-size: 1.02rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: none;
}
.fd-input::placeholder { color: var(--ink-soft); font-style: italic; }
.fd-head .fd-kbd-hint {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  padding: 0.24em 0.5em;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink-soft);
  flex: none;
}

.fd-results {
  overflow-y: auto;
  padding: 0.5rem;
  overscroll-behavior: contain;
}
.fd-group {
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra-600);
  padding: 0.7rem 0.75rem 0.3rem;
}
.fd-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  color: var(--ink);
  text-decoration: none;
}
.fd-item .fd-item-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--gold-600);
  font-family: var(--mono);
  font-size: 0.68rem;
  background: var(--cream);
}
.fd-item .fd-item-body { flex: 1; min-width: 0; }
.fd-item-title {
  display: block;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fd-item-sub {
  display: block;
  font-size: 0.8rem;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fd-item .fd-arrow { color: var(--gold-600); opacity: 0; transform: translateX(-4px); transition: opacity 0.2s, transform 0.2s; }
.fd-item:hover, .fd-item[aria-selected="true"] {
  background: var(--gold-wash);
  outline: none;
}
.fd-item:hover .fd-arrow, .fd-item[aria-selected="true"] .fd-arrow { opacity: 1; transform: none; }
.fd-item mark { background: rgba(125, 180, 199, 0.28); color: inherit; border-radius: 2px; }

.fd-empty {
  padding: 1.6rem 1rem;
  text-align: center;
  color: var(--ink-soft);
  font-style: italic;
}
.fd-foot {
  display: flex;
  gap: 1.1rem;
  padding: 0.7rem 1.2rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--cream);
}
.fd-foot kbd {
  font-family: var(--mono);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.1em 0.38em;
  margin-right: 0.35em;
}

/* --------------------------------------------------------------------------
   D. Hero sky — the layered landscape, recoloured for highland mist
   -------------------------------------------------------------------------- */
.hero-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-sky svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-inner { position: relative; z-index: 3; }
.hero .scroll-cue { z-index: 4; }

/* Sky groups fade between day and night. */
.sky-sun, .sky-moon, .sky-stars, .sky-fireflies, .sky-birds { transition: opacity 0.9s ease; }
html[data-theme="night"] .sky-sun,
html[data-theme="night"] .sky-birds { opacity: 0; }
.sky-moon, .sky-stars, .sky-fireflies { opacity: 0; }
html[data-theme="night"] .sky-moon,
html[data-theme="night"] .sky-stars,
html[data-theme="night"] .sky-fireflies { opacity: 1; }

/* Day/night sky rects cross-fade. */
.sky-base, .sky-glow-day { transition: opacity 0.9s ease; }
.sky-base-night, .sky-glow-night { opacity: 0; transition: opacity 0.9s ease; }
html[data-theme="night"] .sky-base,
html[data-theme="night"] .sky-glow-day { opacity: 0; }
html[data-theme="night"] .sky-base-night,
html[data-theme="night"] .sky-glow-night { opacity: 1; }

/* Landscape fills — highland slate hills. */
.star { fill: #EEF3F4; }
.h-far { fill: rgba(44, 71, 87, 0.55); }
.h-mid { fill: #233D4C; }
.h-near { fill: #152A35; }
html[data-theme="night"] .h-far { fill: rgba(16, 32, 42, 0.8); }
html[data-theme="night"] .h-mid { fill: #10222C; }
html[data-theme="night"] .h-near { fill: #08131A; }
.h-rim { fill: none; stroke: #7DB4C7; stroke-opacity: 0.34; stroke-width: 1.5; }
.contour-line { fill: none; stroke: #7DB4C7; stroke-opacity: 0.2; stroke-width: 1.2; }
.mist ellipse { fill: #EEF3F4; opacity: 0.07; }
.bird path { stroke: #7DB4C7; stroke-width: 2; fill: none; opacity: 0.75; stroke-linecap: round; }

/* Sun + halo breathe slowly. */
.sun-halo { animation: sun-pulse 9s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes sun-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.06); opacity: 1; }
}

/* Stars twinkle on a stagger. */
.star { animation: twinkle 5s ease-in-out infinite; }
.star:nth-child(3n) { animation-delay: 1.3s; animation-duration: 6.2s; }
.star:nth-child(3n+1) { animation-delay: 2.6s; animation-duration: 4.4s; }
@keyframes twinkle {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

/* Fireflies wander gently. */
.ff { animation: ff-drift 11s ease-in-out infinite alternate, ff-glow 3.4s ease-in-out infinite; }
.ff:nth-child(2n) { animation-delay: 0.7s, 1.2s; animation-duration: 13s, 4.2s; }
.ff:nth-child(3n) { animation-delay: 2.1s, 0.4s; animation-duration: 9.5s, 2.8s; }
@keyframes ff-drift {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-14px, -9px); }
  100% { transform: translate(10px, 6px); }
}
@keyframes ff-glow {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.95; }
}

/* Birds cross the sky by day. */
.bird { animation: bird-pass 38s linear infinite; }
.bird.b2 { animation-delay: 11s; animation-duration: 46s; }
.bird.b3 { animation-delay: 23s; animation-duration: 52s; }
@keyframes bird-pass {
  0% { transform: translate(-80px, 12px); opacity: 0; }
  6% { opacity: 0.75; }
  88% { opacity: 0.75; }
  100% { transform: translate(1160px, -26px); opacity: 0; }
}

/* Mist drifts across the valley. */
.mist { animation: mist-drift 26s ease-in-out infinite alternate; }
.mist.m2 { animation-duration: 34s; animation-delay: 4s; }
@keyframes mist-drift {
  0% { transform: translateX(-26px); opacity: 0.5; }
  100% { transform: translateX(26px); opacity: 0.7; }
}

/* Hills shade down at night. */
.h-fill { transition: fill 0.9s ease; }

/* Parallax targets move via JS transform (rAF, scroll + pointer). */
.plx { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .sun-halo, .star, .ff, .bird, .mist { animation: none !important; }
}

/* --------------------------------------------------------------------------
   E. Research geography — the accurate map of Africa
   -------------------------------------------------------------------------- */
.geo-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: center;
}
.geo-map {
  position: relative;
  border: 1px solid rgba(91, 157, 180, 0.38);
  border-radius: 16px;
  background:
    radial-gradient(420px 300px at 78% 14%, rgba(125, 180, 199, 0.1), transparent 65%),
    var(--paper);
  padding: clamp(0.9rem, 2.5vw, 1.8rem);
  box-shadow: var(--shadow-md);
}
.geo-map svg { display: block; width: 100%; height: auto; }

/* Land, borders and study countries. */
.geo-land {
  fill: rgba(74, 104, 120, 0.13);
  stroke: var(--moss-600);
  stroke-width: 1.4;
  stroke-linejoin: round;
  transition: fill 0.35s ease;
}
html[data-theme="night"] .geo-land { fill: rgba(59, 88, 104, 0.3); }
.geo-map:hover .geo-land { fill: rgba(74, 104, 120, 0.18); }
html[data-theme="night"] .geo-map:hover .geo-land { fill: rgba(59, 88, 104, 0.36); }
.geo-borders path { fill: none; stroke: rgba(83, 101, 112, 0.34); stroke-width: 0.7; }
html[data-theme="night"] .geo-borders path { stroke: rgba(157, 176, 185, 0.22); }
.geo-study {
  fill: rgba(125, 180, 199, 0.16);
  stroke: var(--gold-500);
  stroke-width: 1.6;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 0.3s ease, stroke 0.3s ease;
}
.geo-study.is-active { fill: rgba(125, 180, 199, 0.3); stroke: var(--gold-400); }
html[data-theme="night"] .geo-study { fill: rgba(152, 197, 212, 0.14); }
html[data-theme="night"] .geo-study.is-active { fill: rgba(152, 197, 212, 0.26); }

/* Graticule + equator. */
.geo-graticule path { fill: none; stroke: var(--line); stroke-width: 0.6; }
.geo-equator { fill: none; stroke: var(--gold-400); stroke-width: 1; stroke-dasharray: 7 5; opacity: 0.75; }
.geo-equator-label {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.22em;
  fill: var(--gold-600); text-transform: uppercase;
}

/* Field routes — dashed arcs that march from the field base. */
.geo-route {
  fill: none;
  stroke: var(--gold-500);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 2 5.5;
  opacity: 0.7;
  animation: route-march 1.7s linear infinite;
  transition: opacity 0.3s ease, stroke 0.3s ease;
}
.geo-route.is-active { stroke: var(--gold-400); opacity: 1; animation-duration: 0.9s; }
@keyframes route-march { to { stroke-dashoffset: -15; } }
@media (prefers-reduced-motion: reduce) { .geo-route { animation: none !important; } }

/* Markers. */
.geo-marker {
  fill: var(--gold-400);
  stroke: var(--gold-600);
  stroke-width: 1.5;
  cursor: pointer;
  transition: r 0.25s var(--ease-out), fill 0.25s ease, stroke 0.25s ease;
}
.geo-marker-ring {
  fill: none;
  stroke: var(--gold-400);
  stroke-width: 1.6;
  opacity: 0.55;
  transform-box: fill-box;
  transform-origin: center;
  animation: marker-pulse 2.8s ease-out infinite;
  pointer-events: none;
}
@keyframes marker-pulse {
  0% { transform: scale(0.45); opacity: 0.6; }
  70% { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}
.geo-dot.is-active .geo-marker { fill: var(--terra-500); stroke: var(--terra-600); r: 8; }
.geo-dot.is-active .geo-marker-ring { stroke: var(--terra-400); }

.geo-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  fill: var(--ink-soft);
  text-transform: uppercase;
  pointer-events: none;
  transition: fill 0.3s ease;
}
.geo-dot.is-active .geo-label { fill: var(--ink); font-weight: 600; }
.geo-label-sub {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  fill: var(--gold-600);
  text-transform: uppercase;
  pointer-events: none;
}

/* The field-base flag at Eldoret. */
.geo-flag line { stroke: var(--gold-600); stroke-width: 1.6; }
.geo-flag path { fill: var(--gold-500); }

/* Compass + scale bar. */
.geo-compass circle { fill: none; stroke: var(--ink-soft); stroke-width: 1; opacity: 0.8; }
.geo-compass line { stroke: var(--ink-soft); stroke-width: 1.2; }
.geo-compass path { fill: var(--gold-600); }
.geo-compass text { font-family: var(--mono); font-size: 10px; fill: var(--ink-soft); letter-spacing: 0.08em; }
.geo-scalebar line { stroke: var(--ink-soft); stroke-width: 1; }
.geo-scalebar rect { fill: var(--ink-soft); opacity: 0.75; }
.geo-scalebar text { font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em; fill: var(--ink-soft); text-transform: uppercase; }

/* Global badge. */
.geo-global { cursor: pointer; }
.geo-global .geo-orbit {
  fill: none;
  stroke: var(--terra-500);
  stroke-width: 1.4;
  stroke-dasharray: 4 5;
  opacity: 0.7;
  transform-box: fill-box;
  transform-origin: center;
  animation: orbit-spin 26s linear infinite;
}
@keyframes orbit-spin { to { transform: rotate(360deg); } }
.geo-global .geo-globe { fill: var(--terra-wash); stroke: var(--terra-500); stroke-width: 1.6; }
.geo-global .geo-globe-meridian { fill: none; stroke: var(--terra-400); stroke-width: 1; opacity: 0.8; }
.geo-global.is-active .geo-globe { fill: rgba(116, 165, 146, 0.3); }
.geo-global-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; fill: var(--ink-soft); text-transform: uppercase; }

.geo-panel { min-height: 220px; }
.geo-panel-kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra-600);
  margin: 0 0 0.4rem;
}
.geo-panel h3 { font-size: clamp(1.5rem, 3vw, 1.9rem); margin: 0 0 0.7rem; color: var(--ink); }
.geo-panel p { color: var(--ink-body); line-height: 1.65; max-width: 40rem; }
.geo-panel-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.6rem;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-600);
  text-decoration: none;
  border-bottom: 1px solid rgba(91, 157, 180, 0.4);
  padding-bottom: 0.2em;
}
.geo-panel-link:hover { color: var(--terra-600); border-color: var(--terra-600); }

.geo-hint {
  margin: 0.4rem 0 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
@media (prefers-reduced-motion: reduce) {
  .geo-marker-ring, .geo-orbit { animation: none !important; }
}
@media (max-width: 860px) {
  .geo-stage { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   F. The trail — journey path upgrades
   -------------------------------------------------------------------------- */

/* Reading-progress trail: a glacier-to-sage thread at the top of the page. */
.trail-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1300;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300) 55%, var(--terra-400));
  pointer-events: none;
}

/* Hero route strip — the programme as a five-station route. */
.route-strip { max-width: 660px; margin: 1.1rem 0 0.2rem; }
.route-strip svg { display: block; width: 100%; height: auto; overflow: visible; }
.route-eyebrow {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.3em;
  fill: var(--gold-300); text-transform: uppercase;
}
.route-line { fill: none; stroke: rgba(237, 243, 245, 0.4); stroke-width: 1.6; stroke-dasharray: 5 6; stroke-linecap: round; }
.route-station { fill: #EEF3F4; stroke: rgba(237, 243, 245, 0.35); stroke-width: 1; }
.route-station.is-lit { fill: var(--gold-300); stroke: var(--gold-300); }
.route-stop-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  fill: rgba(237, 243, 245, 0.78); text-transform: uppercase;
}
.route-runner { fill: var(--gold-300); }
.route-runner-tail { fill: var(--gold-300); opacity: 0.35; }
.route-strip-fallback { display: none; }
@media (max-width: 680px) {
  .route-strip { display: none; }
  .route-strip-fallback { display: block; }
}

/* Journey sheet: contours, compass, scale, casing, walker. */
.chain-contour { fill: none; stroke: var(--gold-300); stroke-opacity: 0.13; stroke-width: 1.2; }
.chain-compass circle { fill: none; stroke: rgba(237, 243, 245, 0.35); stroke-width: 1; }
.chain-compass line { stroke: rgba(237, 243, 245, 0.5); stroke-width: 1.3; }
.chain-compass path { fill: var(--gold-300); }
.chain-compass text { font-family: var(--mono); font-size: 12px; fill: var(--on-dark-faint); letter-spacing: 0.1em; }
.chain-scale line { stroke: rgba(237, 243, 245, 0.4); stroke-width: 1; }
.chain-scale rect { fill: rgba(237, 243, 245, 0.5); }
.chain-scale text { font-family: var(--mono); font-size: 10px; fill: var(--on-dark-faint); letter-spacing: 0.12em; text-transform: uppercase; }

.chain-road-casing {
  fill: none;
  stroke: rgba(237, 243, 245, 0.14);
  stroke-width: 10;
  stroke-linecap: round;
}
.chain-node-orbit {
  fill: none;
  stroke: rgba(237, 243, 245, 0.3);
  stroke-width: 1;
  stroke-dasharray: 3 6;
  transform-box: fill-box;
  transform-origin: center;
  animation: node-orbit 16s linear infinite;
}
@keyframes node-orbit { to { transform: rotate(360deg); } }
.chain-node.is-selected .chain-node-orbit { stroke: var(--gold-300); animation-duration: 6s; }
@media (prefers-reduced-motion: reduce) { .chain-node-orbit { animation: none !important; } }

/* The field researcher walking the trail. */
.chain-walker-halo { fill: none; stroke: var(--gold-300); stroke-opacity: 0.4; stroke-width: 1.4; }
.chain-walker { fill: var(--gold-300); }
.chain-walker-tail { fill: var(--gold-300); opacity: 0.3; }
@media (prefers-reduced-motion: reduce) { .chain-walker, .chain-walker-tail, .chain-walker-halo { display: none; } }

/* --------------------------------------------------------------------------
   G. Small comforts — back-to-top, clock, 404, transitions, spotlight
   -------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: clamp(0.9rem, 2.5vw, 1.6rem);
  bottom: clamp(0.9rem, 2.5vw, 1.6rem);
  z-index: 900;
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(91, 157, 180, 0.55);
  background: var(--pine-900);
  color: var(--gold-300);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s var(--ease-out), visibility 0s linear 0.3s, background 0.3s ease;
  box-shadow: var(--shadow-md);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s ease, transform 0.3s var(--ease-out), background 0.3s ease; }
.to-top:hover { background: var(--pine-700); }
.to-top svg { width: 18px; height: 18px; }

/* Live Eldoret clock in the footer. */
.footer-clock {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin: 0.7rem 0 0;
}
.footer-clock .clock-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--gold-400);
  animation: clock-beat 2.4s ease-in-out infinite;
  flex: none;
}
@keyframes clock-beat {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) { .footer-clock .clock-dot { animation: none; } }

/* Card spotlight — a soft glacier wash that follows the cursor. */
.card { position: relative; }
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(125, 180, 199, 0.11), transparent 65%);
}
.card:hover::after { opacity: 1; }
html[data-theme="night"] .card::after {
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(152, 197, 212, 0.09), transparent 65%);
}

/* View transitions — a quiet page turn between documents. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 0.26s; }
}

/* Custom 404 — off the map. */
.err-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 600px at 84% -10%, rgba(125, 180, 199, 0.14), transparent 62%),
    radial-gradient(800px 460px at -12% 112%, rgba(116, 165, 146, 0.18), transparent 60%),
    var(--pine-950);
  color: var(--on-dark);
  padding: clamp(7rem, 16vh, 10rem) 0 5rem;
}
.err-inner { max-width: 640px; }
.err-code {
  position: absolute;
  right: -0.5rem;
  top: 1rem;
  font-family: var(--serif);
  font-size: clamp(9rem, 26vw, 17rem);
  font-weight: 300;
  line-height: 1;
  color: rgba(125, 180, 199, 0.08);
  letter-spacing: -0.04em;
  user-select: none;
  pointer-events: none;
}
.err-compass { width: 84px; height: 84px; margin: 0 0 1.4rem; }
.err-needle { transform-box: fill-box; transform-origin: center; animation: needle-wobble 5.5s ease-in-out infinite; }
@keyframes needle-wobble {
  0%, 100% { transform: rotate(-9deg); }
  50% { transform: rotate(13deg); }
}
@media (prefers-reduced-motion: reduce) { .err-needle { animation: none; } }
.err-hero h1 { color: var(--on-dark); font-size: clamp(2.2rem, 5vw, 3.2rem); margin: 0.3rem 0 1rem; }
.err-hero .lede { color: var(--on-dark-muted); }
.err-links { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.8rem; }
.err-note {
  margin-top: 2.2rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
}
.err-note kbd {
  border: 1px solid var(--line-dark);
  border-radius: 5px;
  padding: 0.12em 0.45em;
  margin: 0 0.2em;
  color: var(--gold-300);
}

/* Print: keep publications printing clean. */
@media print {
  .to-top, .desk-btn, .theme-toggle, .header-tools, .hero-sky, .iris,
  .fd-backdrop, .fd-panel, .trail-progress, .route-strip { display: none !important; }
}

/* ==========================================================================
   H. V11 refinements ("Highland mist edition")
   --------------------------------------------------------------------------
   A cool, calm re-palette plus layout and usability fixes.
   ========================================================================== */

/* H1. Header — every page opens on a dark hero, so the resting header now
   carries the same slate ground. In V10 it was transparent over the light
   body in the day theme, which hid the brand, the nav links, search and the
   theme toggle until the reader scrolled. */
.site-header:not(.scrolled):not(.menu-open) {
  background: var(--pine-950);
  border-bottom-color: rgba(237, 243, 245, 0.06);
}
html[data-theme="night"] .site-header:not(.scrolled):not(.menu-open) {
  background: var(--pine-975);
}
.site-header.scrolled { box-shadow: 0 10px 30px -24px rgba(20, 37, 48, 0.45); }

/* Keep the nav on one line and give it room on laptop widths. */
.site-nav a { white-space: nowrap; }
@media (min-width: 881px) and (max-width: 1360px) {
  .site-nav { gap: 1.25rem; }
  .site-nav a { letter-spacing: 0.14em; }
  .desk-btn .desk-kbd { display: none; }
  .header-tools { margin-left: 1rem; }
}
@media (min-width: 881px) and (max-width: 1180px) {
  .brand-text { display: none; }
  .desk-btn .desk-label { display: none; }
  .desk-btn { padding: 0.72em; }
}
@media (min-width: 881px) and (max-width: 980px) {
  .site-nav { gap: 0.95rem; }
  .site-nav a { letter-spacing: 0.1em; font-size: 0.7rem; }
}

/* H2. Calmer accents. */
.chain-sun { fill: var(--gold-300); opacity: 0.32; }
.chain-sun-halo { fill: rgba(169, 208, 220, 0.07); }

.quote-band {
  background:
    radial-gradient(900px 480px at 110% -20%, rgba(169, 208, 220, 0.16), transparent 55%),
    linear-gradient(135deg, #3D6E5E 0%, #2C5560 55%, #2C4757 100%);
}
html[data-theme="night"] .quote-band {
  background:
    radial-gradient(900px 480px at 110% -20%, rgba(169, 208, 220, 0.1), transparent 55%),
    linear-gradient(135deg, #1F3E36 0%, #1C3640 55%, #152833 100%);
}

/* Status badges: sage = published, glacier = under review,
   mist lilac = ongoing, slate = concept. */
.b-published { background: rgba(86, 138, 120, 0.12); }
.journey-rail .b-ongoing { background: rgba(122, 114, 174, 0.2); }

/* Selection and focus in the new palette. */
::selection { background: var(--gold-300); color: var(--pine-950); }
:focus-visible { outline-color: var(--gold-500); }

/* H3. About — the biography reads in a comfortable column with a sticky
   "At a glance" panel beside it, instead of one centred column that left
   the right half of wide screens empty. */
.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.about-main { max-width: 70ch; }
.about-aside {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 1.2rem;
}
.about-aside .note-card { margin: 0; font-size: 0.92rem; }
.about-aside .note-card p { line-height: 1.6; }
.aside-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.5rem 1.4rem 1.3rem;
  box-shadow: var(--shadow-md);
}
.aside-title {
  font-family: var(--serif);
  font-size: 1.35rem;
  margin: 0 0 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
}
.aside-card .fact-list { margin: 0; }
.aside-card .fact-list dd { font-size: 0.93rem; }
@media (max-width: 960px) {
  .about-layout { grid-template-columns: 1fr; }
  .about-aside { position: static; }
  .about-main { max-width: none; }
}

/* H4. Contrast fixes found in the V11 accessibility pass. */
/* Buttons inside prose (e.g. the Engagement call-to-action band) were
   inheriting the prose link colour. */
.prose .cta-band a.btn,
.prose .cta-band a.btn:hover { color: var(--pine-950); text-decoration: none; }
.prose .cta-band a.btn-ghost,
.prose .cta-band a.btn-ghost:hover { color: var(--on-dark); }
.prose .cta-band a.btn-ghost:hover { color: var(--gold-300); }
.prose .cta-band a.btn::after { content: none; }
/* "Reset filters" sits on a light panel, so it takes the outline style. */
#pub-reset {
  color: var(--ink);
  border-color: rgba(26, 43, 54, 0.3);
}
#pub-reset:hover { color: var(--gold-600); border-color: var(--gold-500); background: var(--gold-wash); }
html[data-theme="night"] #pub-reset { border-color: var(--line); }

/* H5. Small-screen polish. */
@media (max-width: 880px) {
  /* Search and theme buttons sit with the menu button on the right,
     instead of floating in the middle of the bar. */
  .header-tools { margin-left: auto; }
  .header-inner { gap: 0.6rem; }
}
/* The plain-text route shown on phones sits on the dark hero. */
.hero-journey.route-strip-fallback { color: var(--on-dark-muted); }
.hero-journey.route-strip-fallback span { color: var(--gold-400); }

/* H6. Five research areas: 3 + 2 on wide screens and 2 + 2 + 1 on
   tablets, instead of four in a row with the fifth stranded alone. */
@media (min-width: 1000px) {
  .areas-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .areas-grid > .area-card { grid-column: span 2; }
  .areas-grid > .area-card:nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 640px) and (max-width: 999px) {
  .areas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .areas-grid > .area-card:nth-child(5) { grid-column: 1 / -1; }
}

/* H7. Engagement — align the reading column with the page hero's left
   edge instead of floating it in the centre of wide screens. */
.container.prose { max-width: none; }
.container.prose > * { max-width: 76ch; }
.container.prose > .cta-band { max-width: 76ch; }

/* H8. Night theme: the "Ctrl K" hint in the scrolled header was dark on
   dark. */
html[data-theme="night"] .site-header.scrolled .desk-btn .desk-kbd {
  border-color: rgba(237, 243, 245, 0.3);
  color: rgba(237, 243, 245, 0.6);
}
html[data-theme="night"] .site-header.scrolled .desk-btn { border-color: rgba(237, 243, 245, 0.3); }

/* H9. Contact — the page has two columns of content but the grid had
   three tracks, which squeezed the email panel into a third of the width
   and broke the address across four lines. */
.container.contact-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: start;
}
.contact-grid .email-panel {
  grid-template-columns: 1fr;
  gap: 0.4rem;
  padding: 2.2rem 2.3rem;
}
.contact-grid .email-panel .email-display a { word-break: normal; overflow-wrap: anywhere; }
.contact-grid .email-panel .copy-btn { justify-self: start; margin-top: 0.8rem; }
.contact-grid .contact-card + .fact-list,
.contact-grid .fact-list + .contact-card { margin-top: 1.8rem; }
@media (max-width: 860px) {
  .container.contact-grid { grid-template-columns: 1fr; }
}