/* ═══════════════════════════════════════════
   BC.NEXUS — Light Editorial Aesthetics
   Newsprint paper + neon-green accent
   ═══════════════════════════════════════════ */

:root {
  --bg: #F4F7FA;
  --bg-soft: rgba(244, 247, 250, 0.55);
  --bg-card: rgba(255, 255, 255, 0.75);
  --ink: #0d1e2a;
  --ink-soft: #3a5666;
  --ink-dim: #6a8595;
  --accent: #2d6a8f;
  --accent-bright: #5FAFCF;
  --accent-deep: #153a55;
  --accent-warm: #d2542b;
  --accent-cool: #1f5fa8;
  --line: rgba(45, 106, 143, 0.18);
  --line-bright: rgba(45, 106, 143, 0.32);

  --font-display: 'Syne', sans-serif;
  --font-mono: 'Space Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: #ffffff;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ─── Texture overlays ─── */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 100;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
.scanlines { display: none; }

/* ─── Navigation ─── */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 40px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}
.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.05em;
  background: linear-gradient(
    135deg,
    #F4F7FA 0%,
    #DDEBF3 35%,
    #A7D9E8 70%,
    #5FAFCF 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.logo-mark {
  background: linear-gradient(
    135deg,
    #F4F7FA 0%,
    #DDEBF3 35%,
    #A7D9E8 70%,
    #5FAFCF 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 22px;
  animation: pulse 2.4s ease-in-out infinite;
}
.header-tagline {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #4ec5cf 0%, #2d6a8f 60%, #153a55 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  white-space: nowrap;
  pointer-events: none;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: rotate(0deg); }
  50% { opacity: 0.5; transform: rotate(45deg); }
}

.nav-links {
  display: flex; gap: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nav-links a {
  padding: 10px 14px;
  color: var(--ink-soft);
  position: relative;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--accent); }
.nav-links a.active::before {
  content: '';
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px;
  background: var(--accent);
  border-radius: 50%;
}
.nav-links a.active { padding-left: 20px; }

.nav-status {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.status-dot {
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  animation: blink 1.6s infinite;
}
@keyframes blink {
  0%, 80%, 100% { opacity: 1; }
  90% { opacity: 0.3; }
}

/* ─── Hero ─── */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 90px 40px 80px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: start;
  gap: 40px;
  overflow: visible;
}

.hero-bg-text {
  display: none;
}

.hero-grid {
  display: none;
}

.robot-container {
  position: relative;
  width: 100%;
  min-width: 820px;
  height: 820px;
  z-index: 2;
  background: transparent;
  margin-top: 76px;
}
#robot-canvas { width: 100%; height: 100%; }
#robot-canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* ─── Robot speech bubble ─── */
.robot-speech {
  position: absolute;
  top: calc(8% + 57px);
  right: 4%;
  max-width: 240px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #4ec5cf 0%, #2d6a8f 100%);
  color: #fff;
  border-radius: 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  box-shadow: 0 8px 24px rgba(45, 106, 143, 0.25);
  z-index: 5;
  pointer-events: none;
  animation: speech-float 4s ease-in-out infinite, speech-rise 0.9s cubic-bezier(.2,.8,.2,1) 1.2s both;
}
.robot-speech::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 28px;
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #4ec5cf 0%, #2d6a8f 100%);
  transform: rotate(45deg);
  border-radius: 0 0 6px 0;
  z-index: -1;
}
@keyframes speech-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes speech-rise {
  0% { opacity: 0; transform: translateY(20px) scale(0.85); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.robot-speech-caret {
  display: inline-block;
  margin-left: 2px;
  font-weight: 400;
  animation: caret-blink 0.8s step-end infinite;
}
@keyframes caret-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ─── Orbiting post bubbles ─── */
/*
   Three bubbles orbit a centre point inside .robot-container.
   Implementation:
     .robot-orbit is a 0×0 anchor at the container's centre.
     Each bubble's transform is: rotate(angle) translate(0, -radius) rotate(-angle - spin)
     Animating the spin variable on the bubble produces a continuous orbit
     while keeping bubble text upright (counter-rotated).
*/
.robot-orbit {
  --orbit-r: 280px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 6;
}
.robot-orbit-bubble {
  position: absolute;
  top: 0;
  left: 0;
  width: 220px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #4ec5cf 0%, #2d6a8f 100%);
  color: #fff;
  border-radius: 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  box-shadow: 0 6px 18px rgba(45, 106, 143, 0.28);
  pointer-events: auto;
  text-align: center;
  transform-origin: 110px 32px; /* offset so margins line up after translate */
  margin: -32px 0 0 -110px;     /* centre bubble on its anchor */
}
.robot-orbit-bubble::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #4ec5cf 0%, #2d6a8f 100%);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 0 0 4px 0;
  z-index: -1;
}
.robot-orbit-bubble a {
  color: #fff;
  text-decoration: none;
  display: block;
  transition: opacity 0.2s;
}
.robot-orbit-bubble a:hover { opacity: 0.85; }

/* One animation per slot — 4 bubbles spaced 90° apart around the orbit. */
.robot-orbit-bubble:nth-child(1) { animation: orbit-slot-1 36s linear infinite; }
.robot-orbit-bubble:nth-child(2) { animation: orbit-slot-2 36s linear infinite; }
.robot-orbit-bubble:nth-child(3) { animation: orbit-slot-3 36s linear infinite; }
.robot-orbit-bubble:nth-child(4) { animation: orbit-slot-4 36s linear infinite; }

@keyframes orbit-slot-1 {
  from { transform: rotate(0deg)   translate(0, calc(var(--orbit-r) * -1)) rotate(0deg); }
  to   { transform: rotate(360deg) translate(0, calc(var(--orbit-r) * -1)) rotate(-360deg); }
}
@keyframes orbit-slot-2 {
  from { transform: rotate(90deg)  translate(0, calc(var(--orbit-r) * -1)) rotate(-90deg); }
  to   { transform: rotate(450deg) translate(0, calc(var(--orbit-r) * -1)) rotate(-450deg); }
}
@keyframes orbit-slot-3 {
  from { transform: rotate(180deg) translate(0, calc(var(--orbit-r) * -1)) rotate(-180deg); }
  to   { transform: rotate(540deg) translate(0, calc(var(--orbit-r) * -1)) rotate(-540deg); }
}
@keyframes orbit-slot-4 {
  from { transform: rotate(270deg) translate(0, calc(var(--orbit-r) * -1)) rotate(-270deg); }
  to   { transform: rotate(630deg) translate(0, calc(var(--orbit-r) * -1)) rotate(-630deg); }
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 648px;
  padding-left: 38px;
  padding-top: 38px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line-bright);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--ink-soft);
  margin-bottom: 28px;
  text-transform: uppercase;
  background: var(--bg-card);
}
.eyebrow-dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(56px, 7.5vw, 110px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin-bottom: 32px;
}
.hero-logo {
  width: 100%;
  max-width: 648px;
  height: auto;
  display: block;
  opacity: 0;
  transform: translateY(30px);
  animation: rise 0.9s cubic-bezier(.2,.8,.2,1) 0.1s forwards;
}
.title-line {
  display: block;
  opacity: 0;
  transform: translateY(30px);
  animation: rise 0.9s cubic-bezier(.2,.8,.2,1) forwards;
}
.title-line:nth-child(1) { animation-delay: 0.1s; }
.title-line:nth-child(2) { animation-delay: 0.25s; }
.title-line:nth-child(3) { animation-delay: 0.4s; }
.title-italic {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

.hero-subtitle {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 14px;
  max-width: 600px;
  padding-left: 32%;
  font-weight: 400;
  opacity: 0;
  animation: rise 0.9s cubic-bezier(.2,.8,.2,1) 0.6s forwards;
}
.hero-intro {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 14px;
  max-width: 600px;
  padding-left: 32%;
  font-weight: 400;
  opacity: 0;
  animation: rise 0.9s cubic-bezier(.2,.8,.2,1) 0.45s forwards;
}

/* ─── Hero menu ─── */
.hero-menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #4ec5cf;
  border: 1px solid #4ec5cf;
  border-radius: 4px;
  overflow: hidden;
  opacity: 0;
  animation: rise 0.9s cubic-bezier(.2,.8,.2,1) 0.85s forwards;
}
.hero-menu-item {
  background: var(--bg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.25s, color 0.25s;
  position: relative;
  overflow: hidden;
}
.hero-menu-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #4ec5cf 0%, #2d6a8f 100%);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 0;
}
.hero-menu-item > * { position: relative; z-index: 1; }
.hero-menu-item:hover::before { opacity: 1; }
.hero-menu-item:hover { color: #fff; }
.hero-menu-item:hover .hero-menu-num { color: rgba(255, 255, 255, 0.7); }
.hero-menu-item.active { background: linear-gradient(135deg, #4ec5cf 0%, #2d6a8f 100%); color: #fff; }
.hero-menu-item.active .hero-menu-num { color: rgba(255, 255, 255, 0.7); }
.hero-menu-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: #2d6a8f;
  font-weight: 700;
}
.hero-menu-label {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.hero-cta {
  display: flex; gap: 12px; flex-wrap: wrap;
  opacity: 0;
  animation: rise 0.9s cubic-bezier(.2,.8,.2,1) 0.75s forwards;
}

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: all 0.2s;
  cursor: pointer;
  border: none;
}
.btn-primary {
  background: var(--ink);
  color: var(--accent-bright);
  font-weight: 700;
  border: 1px solid var(--ink);
}
.btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(13, 13, 18, 0.15);
}
.btn-arrow { transition: transform 0.2s; }
.btn-primary:hover .btn-arrow { transform: translateX(4px); }
.btn-ghost {
  border: 1px solid var(--line-bright);
  color: var(--ink-soft);
  background: transparent;
}
.btn-ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.hero-stats {
  position: absolute;
  bottom: 60px;
  left: 40px;
  right: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  z-index: 3;
}
.stat {
  background: var(--bg);
  padding: 18px 20px;
  display: flex; flex-direction: column;
}
.stat-num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.stat-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  text-transform: uppercase;
  margin-top: 4px;
}

/* ─── Modules section ─── */
.modules {
  padding: 120px 40px;
  border-top: 1px solid var(--line);
  position: relative;
  background: var(--bg-soft);
}
.section-header {
  display: flex; align-items: baseline; gap: 24px;
  margin-bottom: 60px;
}
.section-num {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 14px;
  letter-spacing: 0.1em;
}
.section-header h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1;
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.module {
  background: var(--bg-card);
  padding: 36px 28px 28px;
  display: flex; flex-direction: column;
  min-height: 280px;
  position: relative;
  transition: background 0.3s, color 0.3s;
}
.module:hover {
  background: var(--ink);
  color: var(--bg);
}
.module:hover .module-icon { color: var(--accent-bright); transform: rotate(15deg) scale(1.1); }
.module:hover p { color: rgba(244, 241, 234, 0.7); }
.module:hover .module-cta { color: var(--accent-bright); }

.module-icon {
  font-size: 38px;
  color: var(--accent);
  margin-bottom: 24px;
  transition: all 0.3s;
}
.module h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.module p {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.6;
  flex: 1;
  margin-bottom: 20px;
  transition: color 0.3s;
}
.module-cta {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}

/* ─── Ticker ─── */
.ticker {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 22px 0;
  background: var(--ink);
}
.ticker-track {
  display: flex;
  gap: 32px;
  white-space: nowrap;
  animation: scroll 35s linear infinite;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.ticker-track span:nth-child(odd) { color: var(--bg); }
.ticker-track span:nth-child(even) { color: var(--accent-bright); }
@keyframes scroll {
  to { transform: translateX(-50%); }
}

/* ─── Quote ─── */
.quote {
  padding: 120px 40px;
  text-align: center;
  position: relative;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.quote-mark {
  font-family: var(--font-display);
  font-size: 140px;
  color: var(--accent);
  line-height: 0.5;
  margin-bottom: 30px;
}
.quote blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 900px;
  margin: 0 auto 24px;
}
.quote-attr {
  color: var(--ink-soft);
  font-size: 13px;
  letter-spacing: 0.1em;
}

/* ─── Home layout (left sidebar + hero + right sidebar) ─── */
.home-layout {
  display: grid;
  grid-template-columns: 380px 1fr 380px;
  gap: 40px;
  padding: 110px 40px 80px;
  align-items: start;
}
.home-layout .hero {
  padding: 0;
  min-height: auto;
  display: block;
}
.home-layout .page-sidebar-left,
.home-layout .page-sidebar-right {
  margin-top: 0;
}

/* ─── Left sidebar (logo + intro + subtext) ─── */
.page-sidebar-left {
  width: 100%;
  background: #ffffff;
  padding: 24px;
  border-radius: 8px;
  position: sticky;
  top: 100px;
}
.page-sidebar-left .hero-logo {
  max-width: 100%;
  margin-bottom: 28px;
  mix-blend-mode: multiply;
}
.page-sidebar-left .hero-intro,
.page-sidebar-left .hero-subtitle {
  /* Match the right sidebar (.sidebar-sponsor-text under the Trimit logo)
     exactly — same font, size, line-height, color, and bottom spacing. */
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
  font-weight: 400;
  margin-bottom: 14px;
  padding-left: 0;
  max-width: 100%;
}

/* ─── Sidebar recent-posts list (homepage only) ───
   Renders posts 4..17 from posts.js — the 4 newest are already shown
   in the orbit bubbles around the robot, so we skip them here.
   Injected by robot.js into .page-sidebar-left. */
.sidebar-recent {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.sidebar-recent-head {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-recent-head::before {
  content: '';
  display: block;
  width: 18px;
  height: 2px;
  background: var(--accent);
}
.sidebar-recent-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-recent-item {
  border-bottom: 1px dashed var(--line);
}
.sidebar-recent-item:last-child {
  border-bottom: none;
}
.sidebar-recent-item a {
  display: block;
  padding: 10px 0;
  color: var(--ink);
  transition: color 0.15s, padding-left 0.15s;
}
.sidebar-recent-item a:hover {
  color: var(--accent);
  padding-left: 6px;
}
.sidebar-recent-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.sidebar-recent-date {}
.sidebar-recent-cat {
  color: var(--accent);
  font-weight: 700;
}
.sidebar-recent-title {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

/* ─── Sidebar (Trimit + LinkedIn) ─── */
.page-sidebar-right {
  width: 100%;
  background: #ffffff;
  padding: 24px 28px 32px;
  border-radius: 8px;
  position: sticky;
  top: 100px;
}
.sidebar-sponsor {
  display: block;
  background: #ffffff;
  padding: 24px 0;
  text-align: center;
  margin-bottom: 20px;
  border-radius: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.sidebar-sponsor:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(45, 106, 143, 0.15);
}
.sidebar-sponsor-logo {
  display: block;
  max-width: 220px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.sidebar-sponsor-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.sidebar-sponsor-list-head {
  font-weight: 700;
  color: var(--ink);
  margin-top: 8px;
}
.sidebar-sponsor-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.sidebar-sponsor-list li {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  padding: 8px 0 8px 22px;
  position: relative;
  border-bottom: 1px solid var(--line);
}
.sidebar-sponsor-list li:last-child { border-bottom: none; }
.sidebar-sponsor-list li::before {
  content: '\2192';
  position: absolute;
  left: 0;
  color: #4ec5cf;
  font-weight: 700;
}
.sidebar-linkedin {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: background 0.2s, border-color 0.2s;
}
.sidebar-linkedin:hover {
  background: var(--bg-soft);
  border-color: #4ec5cf;
}
.sidebar-linkedin-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.sidebar-linkedin-text {
  display: flex;
  flex-direction: column;
}
.sidebar-linkedin-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.sidebar-linkedin-sub {
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
  margin-top: 2px;
}

/* ─── Sidebar handwritten "Contact me" link ───
   Casual handwritten note that links to the (nav-hidden) contact page.
   Uses the Caveat font (Google Fonts) so the text looks like it was
   actually written by hand with a pen. Slight tilt + a curvy underline
   stroke (made with an SVG-as-background) sells the effect. */
.sidebar-handwritten {
  display: inline-block;
  /* Top margin pushes the link down toward the bottom of the right
     sidebar, well below the LinkedIn card. Aligned to the left edge
     of the sidebar, matching the other sidebar elements. */
  margin: 44px 0 12px;
  padding: 0 6px 4px;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--accent);
  text-decoration: none;
  /* Slight tilt so it looks like it was scribbled in a hurry rather
     than typeset. */
  transform: rotate(-3deg);
  transform-origin: left center;
  transition: transform 0.25s ease, color 0.2s;
}
.sidebar-handwritten:hover {
  /* Pen-flick on hover: nudges the text further out and brightens the ink. */
  transform: rotate(-1.5deg) translateX(4px);
  color: var(--accent-bright);
}

/* On mobile keep the same effect, just slightly smaller and with a
   smaller top gap since the sidebar collapses to inline flow. */
@media (max-width: 720px) {
  .sidebar-handwritten { font-size: 34px; margin-top: 60px; }
}

/* ════════════════════════════════════════════
   Blog
   ═══════════════════════════════════════════ */
.blog-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-bottom: 36px;
}
.blog-search {
  flex: 0 0 300px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--bg-card);
  color: var(--ink);
  transition: border-color 0.2s;
}
.blog-search:focus {
  outline: none;
  border-color: #4ec5cf;
}
.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.blog-filter-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--ink-soft);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
}
.blog-filter-btn:hover {
  border-color: #4ec5cf;
  color: var(--ink);
}
.blog-filter-btn.active {
  background: linear-gradient(135deg, #4ec5cf 0%, #2d6a8f 100%);
  color: #fff;
  border-color: transparent;
}
.blog-filter-btn .count {
  font-size: 10px;
  opacity: 0.7;
  margin-left: 4px;
}
.blog-filter-btn.active .count { opacity: 0.85; }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 24px;
  margin-bottom: 60px;
}
.blog-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 0 60px;
}
.blog-page-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 10px 14px;
  min-width: 40px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--ink-soft);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 700;
}
.blog-page-btn:hover:not(:disabled) {
  border-color: #4ec5cf;
  color: var(--ink);
}
.blog-page-btn.active {
  background: linear-gradient(135deg, #4ec5cf 0%, #2d6a8f 100%);
  color: #fff;
  border-color: transparent;
}
.blog-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.blog-empty {
  text-align: center;
  color: var(--ink-soft);
  padding: 40px 0;
  font-size: 14px;
}
.post-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.post-card:hover {
  transform: translateY(-3px);
  border-color: #4ec5cf;
  box-shadow: 0 8px 24px rgba(45, 106, 143, 0.12);
}
.post-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.post-card-cat {
  color: var(--accent);
  font-weight: 700;
}
.post-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
  margin: 4px 0 0;
}
.post-card-excerpt {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  flex: 1;
}
.post-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.post-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  background: var(--bg-soft);
  color: var(--ink-soft);
  border-radius: 3px;
}
.post-page .page-header { display: none; }
.post-page { padding-top: 110px; }
.post-article {
  max-width: 760px;
  margin: 0 auto;
}
.post-loading {
  text-align: center;
  color: var(--ink-soft);
  padding: 60px 0;
}
.post-back {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 32px;
  transition: color 0.2s;
}
.post-back:hover { color: var(--accent-bright); }
.post-header {
  border-bottom: 1px solid var(--line);
  padding-bottom: 28px;
  margin-bottom: 36px;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.post-cat {
  color: #fff;
  background: linear-gradient(135deg, #4ec5cf 0%, #2d6a8f 100%);
  padding: 4px 10px;
  border-radius: 3px;
  font-weight: 700;
}
.post-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 18px;
}
.post-excerpt {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 18px;
  font-style: italic;
}
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.post-body {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
}
.post-body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
  margin: 36px 0 14px;
  color: var(--ink);
}
.post-body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.01em;
  margin: 28px 0 12px;
  color: var(--ink);
}
.post-body p { margin-bottom: 18px; }
.post-body ul, .post-body ol { margin: 0 0 18px 22px; padding: 0; }
.post-body li { margin-bottom: 8px; line-height: 1.65; }
.post-body a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(45, 106, 143, 0.3);
}
.post-body a:hover { color: var(--accent-bright); text-decoration-color: currentColor; }
.post-body strong { color: var(--ink); font-weight: 700; }
.post-body em { font-style: italic; }
.post-body code {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 2px 6px;
  background: var(--bg-soft);
  border-radius: 3px;
}
.post-body pre, .post-body .code-block {
  background: #0d0d12;
  color: #e8e8ee;
  padding: 20px 24px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 18px 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
}
.post-body pre code, .post-body .code-block code { background: transparent; padding: 0; color: inherit; }
.post-body img { max-width: 100%; height: auto; border-radius: 6px; margin: 18px 0; }
.post-body iframe { max-width: 100%; margin: 18px 0; }
.post-body blockquote {
  border-left: 3px solid #4ec5cf;
  padding: 4px 0 4px 18px;
  margin: 18px 0;
  color: var(--ink-soft);
  font-style: italic;
}
/* ─── Post share buttons ─── */
.post-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.post-share-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-right: 6px;
}
.post-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  transition: all 0.2s;
}
.post-share-btn:hover {
  background: linear-gradient(135deg, #4ec5cf 0%, #2d6a8f 100%);
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(45, 106, 143, 0.25);
}
.post-share-btn svg { display: block; }

.post-source {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.post-source a { color: var(--accent); text-decoration: underline; }

/* ─── RSS feed footer (3-column external feeds) ─── */
.rss-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  padding: 60px 40px 50px;
}
.rss-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: 1500px;
  margin: 0 auto;
}
.rss-col {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 24px 22px;
}
.rss-col-head {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
}
.rss-col-head::before {
  content: '\2192';
  color: var(--accent);
  font-weight: 700;
}
.rss-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
}
.rss-item:last-child { border-bottom: none; }
.rss-item a {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -0.005em;
  transition: color 0.15s;
}
.rss-item a:hover { color: var(--accent); }
.rss-item-date {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.rss-loading,
.rss-error {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 8px 0;
}
.rss-error { color: var(--accent-warm); }

/* ─── Footer ─── */
.footer {
  border-top: 1px solid var(--line);
  padding: 60px 40px 30px;
  background: #ffffff;
  color: var(--ink);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr;
  gap: 60px;
  margin-bottom: 40px;
}
.footer-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 12px;
  color: var(--accent);
}
.footer p {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.6;
}
.footer h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.footer a {
  display: block;
  color: var(--ink-soft);
  font-size: 13px;
  padding: 4px 0;
  transition: color 0.2s;
}
.footer a:hover { color: var(--accent); }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex; justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════
   Subpages
   ═══════════════════════════════════════════ */
.page {
  padding: 140px 40px 80px;
  min-height: 100vh;
  position: relative;
}
.page-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: end;
  border-bottom: 1px solid var(--line);
  padding-bottom: 40px;
  margin-bottom: 60px;
  position: relative;
}
.page-num {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 14px;
  letter-spacing: 0.15em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.page-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(60px, 9vw, 140px);
  letter-spacing: -0.04em;
  line-height: 0.9;
  background: linear-gradient(135deg, #4ec5cf 0%, #2d6a8f 60%, #153a55 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.page-title em {
  color: var(--accent);
  font-weight: 400;
}
.page-meta {
  position: absolute;
  top: 0; right: 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.page-intro {
  max-width: 680px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 80px;
}

/* ═══════════════════════════════════════════
   Link-scout robot (links.html page header)
   A little robot with binoculars beside the page title,
   scanning left/right for fresh BC links.
   ══════════════════════════════════════════ */
.link-scout {
  /* Sits in the right column of the page-header grid (auto 1fr) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  align-self: end;
  gap: 6px;
  padding-bottom: 6px;
  pointer-events: none;
  user-select: none;
}
.link-scout-svg {
  width: 180px;
  height: 180px;
  display: block;
  /* Whole bot does a soft idle bounce */
  animation: scout-bounce 3.2s ease-in-out infinite;
  filter: drop-shadow(0 6px 18px rgba(45, 106, 143, 0.22));
}
.link-scout-caption {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}
.scout-dots span {
  display: inline-block;
  opacity: 0;
  animation: scout-dot 1.4s steps(1) infinite;
}
.scout-dots span:nth-child(1) { animation-delay: 0s; }
.scout-dots span:nth-child(2) { animation-delay: 0.4s; }
.scout-dots span:nth-child(3) { animation-delay: 0.8s; }

/* Head + binoculars + arms scan as one group, pivoting at the neck */
.scout-head {
  transform-origin: 110px 122px;
  animation: scout-scan 4.4s ease-in-out infinite;
}
/* Antenna light blinks like an active scanner */
.scout-blink {
  transform-origin: 110px 26px;
  animation: scout-blink 1.6s ease-in-out infinite;
}
/* Tiny gleam shifts on the lenses */
.scout-gleam {
  animation: scout-gleam 4.4s ease-in-out infinite;
}
/* Radar pulses emanating from between the lenses */
.scout-pulse {
  transform-origin: 110px 91px;
  opacity: 0;
  animation: scout-pulse 2.4s ease-out infinite;
}
.scout-pulse-1 { animation-delay: 0s; }
.scout-pulse-2 { animation-delay: 0.8s; }
.scout-pulse-3 { animation-delay: 1.6s; }

@keyframes scout-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes scout-scan {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-14deg); }   /* look left */
  35%  { transform: rotate(-14deg); }   /* hold */
  50%  { transform: rotate(0deg); }
  70%  { transform: rotate(14deg); }    /* look right */
  85%  { transform: rotate(14deg); }    /* hold */
  100% { transform: rotate(0deg); }
}
@keyframes scout-blink {
  0%, 60%, 100% { opacity: 1; transform: scale(1); }
  70%           { opacity: 0.3; transform: scale(0.7); }
  80%           { opacity: 1; transform: scale(1.1); }
}
@keyframes scout-gleam {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 0.35; }
}
@keyframes scout-pulse {
  0%   { opacity: 0;   transform: scale(0.4); }
  10%  { opacity: 0.6; }
  100% { opacity: 0;   transform: scale(2.1); }
}
@keyframes scout-dot {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

/* Respect users that prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .link-scout-svg,
  .scout-head,
  .scout-blink,
  .scout-pulse,
  .scout-gleam,
  .scout-dots span {
    animation: none;
  }
}

/* Hide on small screens — page-header collapses to one column anyway */
@media (max-width: 720px) {
  .link-scout { display: none; }
}

/* ═══════════════════════════════════════════
   Blog-reader robot (blog.html page header)
   A little robot kicked back reading a blog article
   on a tablet — eyes scan the lines, body bobs gently,
   little BC thought-letters float up from the head.
   ══════════════════════════════════════════ */
.blog-reader {
  /* Sits in the right column of the page-header grid (auto 1fr) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  align-self: end;
  gap: 6px;
  padding-bottom: 6px;
  pointer-events: none;
  user-select: none;
}
.blog-reader-svg {
  width: 180px;
  height: 180px;
  display: block;
  /* Idle bounce (slightly slower than the link-scout for variety) */
  animation: reader-bounce 3.6s ease-in-out infinite;
  filter: drop-shadow(0 6px 18px rgba(45, 106, 143, 0.22));
}
.blog-reader-caption {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}
.reader-dots span {
  display: inline-block;
  opacity: 0;
  animation: reader-dot 1.4s steps(1) infinite;
}
.reader-dots span:nth-child(1) { animation-delay: 0s; }
.reader-dots span:nth-child(2) { animation-delay: 0.4s; }
.reader-dots span:nth-child(3) { animation-delay: 0.8s; }

/* Head tilts subtly down + back as if focused on the screen */
.reader-head {
  transform-origin: 110px 120px;
  animation: reader-head-tilt 5.2s ease-in-out infinite;
}
/* Eyes scan back and forth along the article lines */
.reader-eyes {
  transform-origin: 110px 91px;
  animation: reader-eyes-scan 2.6s ease-in-out infinite;
}
/* Antenna LED blinks like a thinking cap */
.reader-blink {
  transform-origin: 110px 24px;
  animation: reader-blink 1.8s ease-in-out infinite;
}
/* Lines on the screen shift slightly to mimic scrolling/reading */
.reader-line {
  transform-origin: center;
  animation: reader-line-pulse 2.6s ease-in-out infinite;
}
.reader-line-1 { animation-delay: 0s; }
.reader-line-2 { animation-delay: 0.4s; }
.reader-line-3 { animation-delay: 0.8s; }

/* Floating thought letters rise + fade above the head */
.reader-thought {
  opacity: 0;
  animation: reader-thought-rise 3.6s ease-out infinite;
}
.reader-thought-1 { animation-delay: 0s; }
.reader-thought-2 { animation-delay: 1.2s; }
.reader-thought-3 { animation-delay: 2.4s; }

@keyframes reader-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@keyframes reader-head-tilt {
  0%, 100% { transform: rotate(0deg); }
  40%      { transform: rotate(4deg); }    /* nod into the article */
  60%      { transform: rotate(4deg); }    /* hold */
  80%      { transform: rotate(-2deg); }   /* small look-up beat */
}
@keyframes reader-eyes-scan {
  0%   { transform: translateX(0); }
  35%  { transform: translateX(5px); }     /* eyes finish a line */
  40%  { transform: translateX(-4px); }    /* snap back to start */
  75%  { transform: translateX(5px); }     /* finish the next line */
  80%  { transform: translateX(-4px); }    /* snap back */
  100% { transform: translateX(0); }
}
@keyframes reader-blink {
  0%, 70%, 100% { opacity: 1; transform: scale(1); }
  80%           { opacity: 0.3; transform: scale(0.7); }
  90%           { opacity: 1; transform: scale(1.1); }
}
@keyframes reader-line-pulse {
  0%, 100% { transform: scaleX(1);    opacity: 0.85; }
  50%      { transform: scaleX(0.92); opacity: 1; }
}
@keyframes reader-thought-rise {
  0%   { opacity: 0; transform: translateY(0)    scale(0.6); }
  20%  { opacity: 1; transform: translateY(-6px) scale(1); }
  70%  { opacity: 1; transform: translateY(-22px) scale(1.05); }
  100% { opacity: 0; transform: translateY(-36px) scale(0.9); }
}
@keyframes reader-dot {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

/* Respect users that prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .blog-reader-svg,
  .reader-head,
  .reader-eyes,
  .reader-blink,
  .reader-line,
  .reader-thought,
  .reader-dots span {
    animation: none;
  }
  .reader-thought { opacity: 1; }
}

/* Hide on small screens — page-header collapses to one column anyway */
@media (max-width: 720px) {
  .blog-reader { display: none; }
}

/* ═══════════════════════════════════════════
   Book-reader robot (books.html page header)
   A little robot reading an open hardcover book.
   Eyes flick between the left and right pages, the
   page actually turns (3D Y-axis flip), and AL/★
   thought-letters float up like knowledge absorbed.
   ══════════════════════════════════════════ */
.book-reader {
  /* Sits in the right column of the page-header grid (auto 1fr) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  align-self: end;
  gap: 6px;
  padding-bottom: 6px;
  pointer-events: none;
  user-select: none;
}
.book-reader-svg {
  width: 180px;
  height: 180px;
  display: block;
  /* Idle bounce — different timing than scout/blog bots for variety */
  animation: breader-bounce 4s ease-in-out infinite;
  filter: drop-shadow(0 6px 18px rgba(45, 106, 143, 0.22));
}
.book-reader-caption {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}
.breader-dots span {
  display: inline-block;
  opacity: 0;
  animation: breader-dot 1.4s steps(1) infinite;
}
.breader-dots span:nth-child(1) { animation-delay: 0s; }
.breader-dots span:nth-child(2) { animation-delay: 0.4s; }
.breader-dots span:nth-child(3) { animation-delay: 0.8s; }

/* Head subtly nods over the book */
.breader-head {
  transform-origin: 110px 120px;
  animation: breader-head-tilt 5.6s ease-in-out infinite;
}
/* Eyes flick between left and right pages */
.breader-eyes {
  transform-origin: 110px 91px;
  animation: breader-eyes-scan 3.2s ease-in-out infinite;
}
/* Antenna LED blinks */
.breader-blink {
  transform-origin: 110px 24px;
  animation: breader-blink 1.8s ease-in-out infinite;
}

/* The dramatic bit — the page actually turns.
   transform-origin is at the spine (x=110, y=175 ≈ vertical centre of the
   book block). We rotate around the Y axis so the page sweeps from
   right to left, briefly going edge-on (invisible) at -90deg. */
.breader-turning-page {
  transform-origin: 110px 175px;
  transform-box: fill-box;
  animation: breader-page-turn 5s ease-in-out infinite;
  backface-visibility: hidden;
}

/* Floating thought letters rise + fade above the head */
.breader-thought {
  opacity: 0;
  animation: breader-thought-rise 4.5s ease-out infinite;
}
.breader-thought-1 { animation-delay: 0s; }
.breader-thought-2 { animation-delay: 1.5s; }
.breader-thought-3 { animation-delay: 3s; }

@keyframes breader-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes breader-head-tilt {
  0%, 100% { transform: rotate(0deg); }
  45%      { transform: rotate(5deg); }    /* eyes down into the book */
  65%      { transform: rotate(5deg); }    /* hold */
  85%      { transform: rotate(-1deg); }   /* tiny look-up */
}
@keyframes breader-eyes-scan {
  /* Drift between the left page and right page like reading a spread */
  0%   { transform: translateX(-3px); }    /* on left page */
  35%  { transform: translateX(-3px); }    /* still on left page */
  50%  { transform: translateX(3px); }     /* jump to right page */
  85%  { transform: translateX(3px); }     /* read right page */
  100% { transform: translateX(-3px); }    /* back to left page (next pair) */
}
@keyframes breader-blink {
  0%, 70%, 100% { opacity: 1; transform: scale(1); }
  80%           { opacity: 0.3; transform: scale(0.7); }
  90%           { opacity: 1; transform: scale(1.1); }
}
@keyframes breader-page-turn {
  /* Page sits flat on the right side most of the time, then flips */
  0%, 70%  { transform: rotateY(0deg); }
  85%      { transform: rotateY(-90deg); }   /* edge-on, halfway through flip */
  99.9%    { transform: rotateY(-180deg); }  /* now lying on the left page */
  100%     { transform: rotateY(0deg); }     /* snap back invisibly to start */
}
@keyframes breader-thought-rise {
  0%   { opacity: 0; transform: translateY(0)    scale(0.6); }
  20%  { opacity: 1; transform: translateY(-6px) scale(1); }
  70%  { opacity: 1; transform: translateY(-22px) scale(1.05); }
  100% { opacity: 0; transform: translateY(-36px) scale(0.9); }
}
@keyframes breader-dot {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

/* Respect users that prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .book-reader-svg,
  .breader-head,
  .breader-eyes,
  .breader-blink,
  .breader-turning-page,
  .breader-thought,
  .breader-dots span {
    animation: none;
  }
  .breader-thought { opacity: 1; }
}

/* Hide on small screens — page-header collapses to one column anyway */
@media (max-width: 720px) {
  .book-reader { display: none; }
}

/* ═══════════════════════════════════════════
   Download-bot robot (downloads.html page header)
   A little robot hammering his laptop — progress bar fills,
   files cascade into the screen, binary streams behind them,
   and download arrows float down from above. Hands tap the
   keyboard like he's punching install commands.
   ══════════════════════════════════════════ */
.dl-bot {
  /* Sits in the right column of the page-header grid (auto 1fr) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  align-self: end;
  gap: 6px;
  padding-bottom: 6px;
  pointer-events: none;
  user-select: none;
}
.dl-bot-svg {
  width: 180px;
  height: 180px;
  display: block;
  /* Subtle bounce — he's locked in, less movement than the others */
  animation: dlbot-bounce 4.4s ease-in-out infinite;
  filter: drop-shadow(0 6px 18px rgba(45, 106, 143, 0.22));
}
.dl-bot-caption {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}
.dlbot-dots span {
  display: inline-block;
  opacity: 0;
  animation: dlbot-dot 1.4s steps(1) infinite;
}
.dlbot-dots span:nth-child(1) { animation-delay: 0s; }
.dlbot-dots span:nth-child(2) { animation-delay: 0.4s; }
.dlbot-dots span:nth-child(3) { animation-delay: 0.8s; }

/* Antenna LED — fast blink because data is flowing */
.dlbot-blink {
  transform-origin: 110px 24px;
  animation: dlbot-blink 0.9s ease-in-out infinite;
}
/* Chest LEDs blink in sync with the antenna for an active vibe */
.dlbot-chest-1 { animation: dlbot-led-blink 1.4s ease-in-out infinite; }
.dlbot-chest-3 { animation: dlbot-led-blink 1.4s ease-in-out infinite 0.7s; }

/* Eyes pulse with the data stream */
.dlbot-eyes circle {
  animation: dlbot-eye-glow 1.6s ease-in-out infinite;
}

/* Hands tap the keyboard — each hand on its own offset so they alternate */
.dlbot-hand-left {
  transform-origin: 70px 180px;
  animation: dlbot-tap 0.5s ease-in-out infinite;
}
.dlbot-hand-right {
  transform-origin: 150px 180px;
  animation: dlbot-tap 0.5s ease-in-out infinite 0.25s;
}

/* Progress bar — width animates from a sliver to full, then snaps back
   to start the next "download". scaleX with origin at the left edge. */
.dlbot-progress-fill {
  transform-origin: 58px 175px;
  animation: dlbot-progress 4s ease-in-out infinite;
}

/* Falling file icons — each starts above the screen, falls down past
   the bottom of the visible area; the screen clip-path hides them
   outside the laptop screen. Staggered delays so they look like a
   continuous shower. */
.dlbot-file {
  animation: dlbot-file-fall 2.4s linear infinite;
}
.dlbot-file-1 { animation-delay: 0s; }
.dlbot-file-2 { animation-delay: 0.4s; }
.dlbot-file-3 { animation-delay: 0.8s; }
.dlbot-file-4 { animation-delay: 1.2s; }
.dlbot-file-5 { animation-delay: 1.6s; }
.dlbot-file-6 { animation-delay: 2s; }

/* Binary text — fade and shift to look like data streaming */
.dlbot-bin-1 { animation: dlbot-bin-flicker 1.8s steps(2) infinite; }
.dlbot-bin-2 { animation: dlbot-bin-flicker 1.8s steps(2) infinite 0.6s; }
.dlbot-bin-3 { animation: dlbot-bin-flicker 1.8s steps(2) infinite 1.2s; }

/* Floating download arrows above the laptop — each falls + fades */
.dlbot-arrow {
  opacity: 0;
  animation: dlbot-arrow-fall 2.4s ease-in infinite;
}
.dlbot-arrow-1 { animation-delay: 0s; }
.dlbot-arrow-2 { animation-delay: 0.8s; }
.dlbot-arrow-3 { animation-delay: 1.6s; }

@keyframes dlbot-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes dlbot-blink {
  0%, 70%, 100% { opacity: 1; transform: scale(1); }
  80%           { opacity: 0.3; transform: scale(0.7); }
  90%           { opacity: 1; transform: scale(1.2); }
}
@keyframes dlbot-led-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}
@keyframes dlbot-eye-glow {
  0%, 100% { fill: #4ec5cf; }
  50%      { fill: #c3f0f5; }
}
@keyframes dlbot-tap {
  /* Tiny vertical jab — fingers hitting keys */
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(2px); }
}
@keyframes dlbot-progress {
  /* Downloads sweep from ~3% to 100%, hold full briefly, then reset.
     scaleX(0.03) is barely visible at the start. */
  0%   { transform: scaleX(0.03); }
  85%  { transform: scaleX(1); }
  92%  { transform: scaleX(1); }       /* hold at full — "complete!" */
  93%  { transform: scaleX(0.03); }    /* snap back — next download */
  100% { transform: scaleX(0.15); }    /* picks up speed again */
}
@keyframes dlbot-file-fall {
  /* Files appear above the screen rect, fall through, disappear at the
     bottom. The screen clip-path hides them when outside the visible
     screen area, so they look like they're materialising and falling
     into the laptop. */
  0%   { transform: translateY(-12px); opacity: 0; }
  10%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translateY(36px); opacity: 0; }
}
@keyframes dlbot-bin-flicker {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 0.15; }
}
@keyframes dlbot-arrow-fall {
  /* Arrows materialise above the laptop, fall toward the screen, fade. */
  0%   { opacity: 0; transform: translateY(-10px); }
  20%  { opacity: 0.9; }
  80%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(20px); }
}
@keyframes dlbot-dot {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

/* Respect users that prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .dl-bot-svg,
  .dlbot-blink,
  .dlbot-chest-1,
  .dlbot-chest-3,
  .dlbot-eyes circle,
  .dlbot-hand-left,
  .dlbot-hand-right,
  .dlbot-progress-fill,
  .dlbot-file,
  .dlbot-bin-1,
  .dlbot-bin-2,
  .dlbot-bin-3,
  .dlbot-arrow,
  .dlbot-dots span {
    animation: none;
  }
  .dlbot-progress-fill { transform: scaleX(0.65); }   /* show a static partial bar */
  .dlbot-arrow { opacity: 0.7; }
}

/* Hide on small screens — page-header collapses to one column anyway */
@media (max-width: 720px) {
  .dl-bot { display: none; }
}

/* ═══════════════════════════════════════════
   Game-bot robot (games.html page header)
   A little robot locked in on a retro arcade game.
   He's got a proper gamepad (D-pad + ABXY), a CRT-style
   TV showing a Breakout-ish mini-game with a bouncing
   ball, a tracking paddle, bricks that get destroyed,
   buttons that mash, and score popups (+10, +20, COMBO!)
   that fly out when he scores.
   ══════════════════════════════════════════ */
.game-bot {
  /* Sits in the right column of the page-header grid (auto 1fr) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  align-self: end;
  gap: 6px;
  padding-bottom: 6px;
  pointer-events: none;
  user-select: none;
}
.game-bot-svg {
  width: 200px;        /* Slightly wider — there's more going on with the TV */
  height: 200px;
  display: block;
  /* Energetic bounce — he's hyped on the game */
  animation: gbot-bounce 1.6s ease-in-out infinite;
  filter: drop-shadow(0 6px 18px rgba(45, 106, 143, 0.22));
}
.game-bot-caption {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}
.gbot-dots span {
  display: inline-block;
  opacity: 0;
  animation: gbot-dot 1.4s steps(1) infinite;
}
.gbot-dots span:nth-child(1) { animation-delay: 0s; }
.gbot-dots span:nth-child(2) { animation-delay: 0.4s; }
.gbot-dots span:nth-child(3) { animation-delay: 0.8s; }

/* Antenna LED — fast pulse like a heart-rate monitor */
.gbot-blink {
  transform-origin: 110px 24px;
  animation: gbot-blink 0.7s ease-in-out infinite;
}

/* Head jerks subtly with the action — like he's reacting to the game */
.gbot-head {
  transform-origin: 110px 120px;
  animation: gbot-head-react 1.6s ease-in-out infinite;
}

/* Action buttons — each presses on its own staggered tempo so the
   right-hand thumb looks like it's mashing through ABXY combos. */
.gbot-btn {
  transform-box: fill-box;
  transform-origin: center;
}
.gbot-btn-a { animation: gbot-btn-press 0.6s ease-in-out infinite; }
.gbot-btn-b { animation: gbot-btn-press 0.6s ease-in-out infinite 0.15s; }
.gbot-btn-x { animation: gbot-btn-press 0.6s ease-in-out infinite 0.3s; }
.gbot-btn-y { animation: gbot-btn-press 0.6s ease-in-out infinite 0.45s; }

/* The bouncing ball — zigzags around the play area on a 2.4s loop */
.gbot-ball {
  animation: gbot-ball-bounce 2.4s ease-in-out infinite;
}

/* The paddle tracks the ball back and forth along the bottom */
.gbot-paddle {
  transform-box: fill-box;
  transform-origin: center;
  animation: gbot-paddle-track 2.4s ease-in-out infinite;
}

/* Bricks — each one is destroyed in sequence as the ball passes,
   then re-appears at the start of the next loop */
.gbot-brick {
  transform-box: fill-box;
  transform-origin: center;
  animation: gbot-brick-break 6s linear infinite;
}
.gbot-brick-1 { animation-delay: 0s; }
.gbot-brick-2 { animation-delay: 1s; }
.gbot-brick-3 { animation-delay: 2s; }
.gbot-brick-4 { animation-delay: 3s; }
.gbot-brick-5 { animation-delay: 4s; }
.gbot-brick-6 { animation-delay: 5s; }

/* Score text on the screen — flickers slightly to feel "alive" */
.gbot-score {
  animation: gbot-score-flicker 0.8s steps(2) infinite;
}

/* Score popup sparks — fly out diagonally above the TV when bricks break */
.gbot-spark {
  opacity: 0;
  animation: gbot-spark-fly 2s ease-out infinite;
}
.gbot-spark-1 { animation-delay: 0s; }
.gbot-spark-2 { animation-delay: 0.7s; }
.gbot-spark-3 { animation-delay: 1.4s; animation-duration: 2.5s; }   /* COMBO! lingers */

@keyframes gbot-bounce {
  /* Energetic gamer-on-the-edge-of-his-seat bounce */
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes gbot-blink {
  0%, 70%, 100% { opacity: 1; transform: scale(1); }
  85%           { opacity: 0.4; transform: scale(1.3); }
}
@keyframes gbot-head-react {
  /* Tiny head jerks left/right reacting to the action */
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-2deg); }
  50%      { transform: rotate(0deg); }
  75%      { transform: rotate(2deg); }
}
@keyframes gbot-btn-press {
  /* Press down + tint shift on the way down */
  0%, 100% { transform: translateY(0)   scale(1); }
  50%      { transform: translateY(0.6px) scale(0.85); }
}
@keyframes gbot-ball-bounce {
  /* Bounce around the play area inside the screen.
     Screen interior: x ∈ [26..78], y ∈ [52..70] roughly.
     Path: hits brick row at top, paddle at bottom, walls L/R. */
  0%   { transform: translate(0,    0); }      /* start at (30, 60) */
  20%  { transform: translate(20px, -8px); }   /* up to brick row */
  35%  { transform: translate(28px,  10px); }  /* bounce off brick, down */
  55%  { transform: translate(40px,  -6px); }  /* up again */
  70%  { transform: translate(28px,  10px); }  /* down */
  85%  { transform: translate(8px,   -4px); }  /* back up-left */
  100% { transform: translate(0,    0); }      /* return to start */
}
@keyframes gbot-paddle-track {
  /* Paddle slides L/R along the bottom, tracking the ball's x roughly */
  0%   { transform: translateX(-8px); }
  20%  { transform: translateX(2px); }
  40%  { transform: translateX(10px); }
  60%  { transform: translateX(14px); }
  80%  { transform: translateX(0); }
  100% { transform: translateX(-8px); }
}
@keyframes gbot-brick-break {
  /* Each brick is intact most of the time, then "breaks" briefly
     (scales down + fades) when the ball reaches it, then reappears.
     With 6 bricks each delayed by 1s on a 6s loop, the wave reads as
     bricks getting picked off left-to-right. */
  0%, 90%, 100% { transform: scale(1); opacity: 1; }
  92%           { transform: scale(1.4) rotate(15deg); opacity: 0.6; }
  95%           { transform: scale(0)  rotate(40deg); opacity: 0; }
  99%           { transform: scale(0); opacity: 0; }   /* stay broken until reset */
}
@keyframes gbot-score-flicker {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}
@keyframes gbot-spark-fly {
  /* Spark text flies diagonally up-right out of the TV, fades */
  0%   { opacity: 0; transform: translate(0, 0)      scale(0.5); }
  15%  { opacity: 1; transform: translate(2px, -4px) scale(1.1); }
  100% { opacity: 0; transform: translate(18px, -28px) scale(0.8); }
}
@keyframes gbot-dot {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

/* Respect users that prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .game-bot-svg,
  .gbot-blink,
  .gbot-head,
  .gbot-btn,
  .gbot-ball,
  .gbot-paddle,
  .gbot-brick,
  .gbot-score,
  .gbot-spark,
  .gbot-dots span {
    animation: none;
  }
}

/* Hide on small screens — page-header collapses to one column anyway */
@media (max-width: 720px) {
  .game-bot { display: none; }
}

/* ═══════════════════════════════════════════
   About-bot robot (about.html page header)
   The friendliest bot in the lineup. Right arm waving
   hello at the viewer, left hand pointing back at his
   own chest ("it's me!"), big smile + cheek blushes,
   speech bubble saying HELLO! that bounces in, plus a
   sparkle next to the antenna for extra charm.
   ══════════════════════════════════════════ */
.about-bot {
  /* Sits in the right column of the page-header grid (auto 1fr) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  align-self: end;
  gap: 6px;
  padding-bottom: 6px;
  pointer-events: none;
  user-select: none;
}
.about-bot-svg {
  width: 200px;        /* A bit wider — the wave + speech bubble need room */
  height: 200px;
  display: block;
  /* Friendly bounce — like he's a bit excited to meet you */
  animation: abot-bounce 2.4s ease-in-out infinite;
  filter: drop-shadow(0 6px 18px rgba(45, 106, 143, 0.22));
}
.about-bot-caption {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}
.abot-dots span {
  display: inline-block;
  opacity: 0;
  animation: abot-dot 1.4s steps(1) infinite;
}
.abot-dots span:nth-child(1) { animation-delay: 0s; }
.abot-dots span:nth-child(2) { animation-delay: 0.4s; }
.abot-dots span:nth-child(3) { animation-delay: 0.8s; }

/* Antenna LED — friendly steady pulse */
.abot-blink {
  transform-origin: 110px 26px;
  animation: abot-blink 2s ease-in-out infinite;
}
/* Sparkle next to antenna pops in periodically for extra charm */
.abot-sparkle {
  transform-box: fill-box;
  transform-origin: center;
  animation: abot-sparkle 3s ease-in-out infinite;
}

/* Head does a gentle nod — like a friendly greeting bow */
.abot-head {
  transform-origin: 110px 122px;
  animation: abot-nod 3.6s ease-in-out infinite;
}
/* Eyes blink occasionally (whole circles vanish for a beat) */
.abot-eyes {
  animation: abot-eye-blink 4s ease-in-out infinite;
  transform-origin: 110px 96px;
}

/* The signature move — right arm waving hello.
   Pivots at the shoulder (around x=150, y=134) so the whole arm
   sweeps left and right like a real wave. */
.abot-wave-arm {
  transform-origin: 150px 134px;
  animation: abot-wave 1.4s ease-in-out infinite;
}

/* Wave motion lines arc out from the hand, fading as the wave swings.
   Each one staggered for the impression of trailing motion. */
.abot-wave-line {
  opacity: 0;
  animation: abot-wave-line-fade 1.4s ease-out infinite;
}
.abot-wave-line-1 { animation-delay: 0s; }
.abot-wave-line-2 { animation-delay: 0.15s; }
.abot-wave-line-3 { animation-delay: 0.3s; }

/* Left hand taps in toward the chest, like "it's me!" — syncs with
   the speech bubble appearance for a self-introduction beat. */
.abot-self-point {
  transform-box: fill-box;
  transform-origin: 78px 164px;
  animation: abot-self-tap 3.6s ease-in-out infinite;
}

/* Speech bubble — bounces in with a little overshoot, holds, fades out,
   waits, then comes back. Anchored at its bottom-right (near the tail) */
.abot-bubble {
  transform-box: fill-box;
  transform-origin: 88px 63px;
  animation: abot-bubble-pop 3.6s ease-in-out infinite;
}

@keyframes abot-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes abot-blink {
  0%, 80%, 100% { opacity: 1; transform: scale(1); }
  90%           { opacity: 0.4; transform: scale(0.7); }
  95%           { opacity: 1; transform: scale(1.15); }
}
@keyframes abot-sparkle {
  /* Pops in, sparkles, fades out, holds invisible until next cycle */
  0%, 60%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  70%           { opacity: 1; transform: scale(1.2) rotate(20deg); }
  85%           { opacity: 1; transform: scale(1)   rotate(40deg); }
  95%           { opacity: 0; transform: scale(0.6) rotate(60deg); }
}
@keyframes abot-nod {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(3deg); }   /* slight forward nod */
}
@keyframes abot-eye-blink {
  /* Long open, quick blink, long open again */
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.1); }
}
@keyframes abot-wave {
  /* Sweep the arm left and right around the shoulder pivot.
     Real wave — one direction, hold, other direction, hold. */
  0%, 100% { transform: rotate(-12deg); }   /* hand swung outward */
  50%      { transform: rotate(12deg); }    /* hand swung inward */
}
@keyframes abot-wave-line-fade {
  0%   { opacity: 0; transform: translateX(0)    scale(0.8); }
  30%  { opacity: 0.9; transform: translateX(2px) scale(1); }
  100% { opacity: 0; transform: translateX(8px)  scale(1.1); }
}
@keyframes abot-self-tap {
  /* Hand taps inward toward the chest on each cycle, syncing with the
     speech bubble. "Hi! It's me, BC.BOT!" */
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(4px); }     /* tap in */
  35%      { transform: translateX(0); }       /* back */
  50%      { transform: translateX(4px); }     /* second tap */
  65%      { transform: translateX(0); }
}
@keyframes abot-bubble-pop {
  /* Bubble bounces in with overshoot, holds, fades, holds invisible */
  0%   { opacity: 0; transform: scale(0); }
  10%  { opacity: 1; transform: scale(1.15); }   /* overshoot */
  18%  { opacity: 1; transform: scale(0.95); }   /* settle */
  25%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; transform: scale(1); }      /* hold visible */
  85%  { opacity: 0; transform: scale(0.9); }    /* fade out */
  100% { opacity: 0; transform: scale(0); }      /* invisible until next loop */
}
@keyframes abot-dot {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

/* Respect users that prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .about-bot-svg,
  .abot-blink,
  .abot-sparkle,
  .abot-head,
  .abot-eyes,
  .abot-wave-arm,
  .abot-wave-line,
  .abot-self-point,
  .abot-bubble,
  .abot-dots span {
    animation: none;
  }
  /* Show the bubble in its resting state for reduced-motion users */
  .abot-bubble { opacity: 1; transform: none; }
  .abot-sparkle { opacity: 1; }
}

/* Hide on small screens — page-header collapses to one column anyway */
@media (max-width: 720px) {
  .about-bot { display: none; }
}

/* ─── Links page ─── */
.link-category { margin-bottom: 60px; }
.link-category h3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 14px;
}
.link-category h3::before {
  content: '';
  width: 24px; height: 2px;
  background: var(--accent);
}
.link-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.link-list::after {
  content: '';
  background: var(--bg-card);
}
.link-item {
  background: var(--bg-card);
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  transition: all 0.2s;
  cursor: pointer;
}
.link-item:hover { background: var(--bg-soft); }
.link-item:hover .link-arrow { color: var(--accent); transform: translate(3px, -3px); }
.link-info h4 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 4px;
}
.link-info p { font-size: 12px; color: var(--ink-soft); }
.link-arrow {
  font-size: 22px;
  color: var(--ink-dim);
  transition: all 0.2s;
}

/* ─── Books page ─── */
.book-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.book {
  border: 1px solid var(--line);
  padding: 30px 26px;
  background: var(--bg-card);
  transition: all 0.3s;
  display: flex; flex-direction: column;
}
.book:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(13, 13, 18, 0.08);
}
.book-cover {
  height: 200px;
  background: linear-gradient(135deg, #4ec5cf 0%, #2d6a8f 60%, #153a55 100%);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.book-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent 48%, rgba(255, 255, 255, 0.25) 49%, rgba(255, 255, 255, 0.25) 51%, transparent 52%);
  opacity: 0.6;
}
.book-cover-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  text-align: center;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
  color: var(--bg);
}
.book-meta {
  display: flex; justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 8px;
  text-transform: uppercase;
  font-weight: 700;
}
.book h4 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  background: linear-gradient(135deg, #4ec5cf 0%, #2d6a8f 60%, #153a55 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.book .author {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 16px;
  font-style: italic;
}
.book .desc {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
  flex: 1;
}

/* ─── Downloads page ─── */
.download-list { display: flex; flex-direction: column; }
.download-row {
  display: grid;
  grid-template-columns: 60px 1fr 100px 120px 80px;
  gap: 24px;
  padding: 22px 16px;
  border-bottom: 1px solid var(--line);
  align-items: center;
  transition: background 0.2s;
  cursor: pointer;
}
.download-row:first-child {
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  text-transform: uppercase;
  cursor: default;
  font-weight: 700;
}
.download-row:not(:first-child):hover { background: var(--bg-soft); }
.download-row:not(:first-child):hover .download-name { color: var(--accent); }
.download-icon {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--accent);
  font-weight: 700;
}
.download-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: color 0.2s;
}
.download-name + p { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.download-type {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid var(--line-bright);
  display: inline-block;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--bg-card);
}
.download-size, .download-date { font-size: 12px; color: var(--ink-soft); }

/* ─── Games page ─── */
.games-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
.game-card {
  border: 1px solid var(--line);
  padding: 36px 32px;
  background: var(--bg-card);
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}
.game-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s;
}
.game-card:hover::before { transform: scaleX(1); }
.game-card:hover {
  background: var(--bg-soft);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(13, 13, 18, 0.06);
}
.game-art {
  height: 180px;
  margin-bottom: 28px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #4ec5cf 0%, #2d6a8f 60%, #153a55 100%);
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 70px;
  color: #ffffff;
  letter-spacing: -0.04em;
}
.game-card h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.game-difficulty {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--accent-warm);
  text-transform: uppercase;
  margin-bottom: 14px;
  font-weight: 700;
}
.game-card p {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 24px;
}

.game-play {
  margin-top: 80px;
  padding: 50px 40px;
  border: 1px solid var(--line);
  background: var(--ink);
  color: var(--bg);
}
.game-play h3 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  color: var(--accent-bright);
}
.game-play .small { color: rgba(244, 241, 234, 0.6); font-size: 13px; margin-bottom: 32px; }
.dice-stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
  margin: 30px 0;
}
.dice-result {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 72px);
  letter-spacing: -0.03em;
  text-align: center;
  min-height: 100px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(244, 241, 234, 0.15);
  padding: 30px;
  background: rgba(244, 241, 234, 0.05);
  color: var(--accent-bright);
}
.dice-divider {
  font-family: var(--font-display);
  font-size: 60px;
  color: rgba(244, 241, 234, 0.3);
}
.dice-verdict {
  font-family: var(--font-mono);
  font-size: 14px;
  text-align: center;
  margin-top: 20px;
  min-height: 24px;
  letter-spacing: 0.05em;
  color: var(--accent-bright);
}
.game-play .btn-primary {
  background: var(--accent-bright);
  color: var(--ink);
  border-color: var(--accent-bright);
}
.game-play .btn-primary:hover {
  background: var(--bg);
  border-color: var(--bg);
  color: var(--ink);
}

/* ─── About page ─── */
.about-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-bottom: 80px;
}
.about-text h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 36px 0 14px;
}
.about-text h3:first-child { margin-top: 0; }
.about-text p {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 16px;
}
.about-text strong { color: var(--ink); font-weight: 700; }
.about-card {
  border: 1px solid var(--line);
  padding: 40px;
  background: var(--bg-card);
  position: sticky;
  top: 100px;
  height: fit-content;
}
.about-card h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
  font-weight: 700;
}
.about-photo {
  display: block;
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 0 28px auto;
  border: 3px solid #4ec5cf;
  box-shadow: 0 6px 20px rgba(45, 106, 143, 0.2);
}
.spec-row {
  display: flex; justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.spec-row:last-child { border-bottom: none; }
.spec-row span:first-child { color: var(--ink-soft); letter-spacing: 0.05em; }
.spec-row span:last-child { font-family: var(--font-display); font-weight: 700; }

.timeline {
  border-top: 1px solid var(--line);
  padding-top: 60px;
}
.timeline-item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.timeline-year {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 36px;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.timeline-content h4 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.timeline-content p { color: var(--ink-soft); font-size: 14px; line-height: 1.6; }

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; padding-top: 110px; }
  .robot-container { height: 380px; order: -1; }
  .robot-orbit { --orbit-r: 150px; }
  .robot-orbit-bubble { width: 160px; margin-left: -80px; transform-origin: 80px 24px; font-size: 11px; padding: 10px 12px; }
  .rss-grid { grid-template-columns: 1fr; gap: 24px; }
  .hero-stats { position: static; margin-top: 60px; }
  .home-layout { grid-template-columns: 1fr; padding: 110px 40px 80px; }
  .home-layout .page-sidebar-left,
  .home-layout .page-sidebar-right { margin-top: 0; position: static; max-width: 600px; }
  .modules-grid { grid-template-columns: repeat(2, 1fr); }
  .book-grid { grid-template-columns: repeat(2, 1fr); }
  .games-grid { grid-template-columns: 1fr; }
  .about-layout { grid-template-columns: 1fr; gap: 40px; }
  .about-card { position: static; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .link-list { grid-template-columns: 1fr; }
}
/* ─── Mobile (≤ 720px) ─── */
@media (max-width: 720px) {
  /* Stop accidental horizontal scroll anywhere on the site. */
  html, body { overflow-x: hidden; }

  /* Nav: stack the links below the logo, tighten padding. */
  .nav { padding: 12px 16px; flex-wrap: wrap; gap: 6px; justify-content: center; }
  .logo { font-size: 16px; }
  .logo-mark { font-size: 18px; }
  .nav-links {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    font-size: 10px;
  }
  .nav-links a { padding: 6px 8px; }
  .nav-links a.active { padding-left: 16px; }
  .nav-status { display: none; }
  .header-tagline { display: none; }

  /* Add room for the now-taller wrapped nav. */
  .hero, .post-page, .page { padding-top: 130px !important; }

  /* General page padding. */
  .hero, .modules, .quote, .page, .footer, .rss-footer { padding-left: 18px; padding-right: 18px; }

  /* ─── Hero / robot ─── */
  .hero { padding-bottom: 40px; min-height: auto; gap: 20px; }
  /* Kill the desktop min-width that forced horizontal scroll. */
  .robot-container { min-width: 0; height: 360px; margin-top: 20px; }
  /* Shrink the orbiting post bubbles to fit the narrow mobile viewport.
     Desktop sets --orbit-r: 280px and bubble width: 220px — both far too
     big for a phone. We pull the orbit in to ~125px and slim the bubbles
     to ~135px wide with smaller font/padding so all 4 fit around the
     robot without overlapping the edges or each other. */
  .robot-orbit { --orbit-r: 125px; }
  .robot-orbit-bubble {
    width: 135px;
    margin: -22px 0 0 -67px;       /* re-centre on the new bubble width */
    transform-origin: 67px 22px;   /* match the new offset */
    padding: 8px 10px;
    font-size: 10px;
    line-height: 1.3;
    border-radius: 10px;
  }
  .robot-orbit-bubble::after {
    width: 12px;
    height: 12px;
    bottom: -6px;
  }
  .robot-speech {
    top: auto; bottom: 8px; right: 50%;
    transform: translateX(50%);
    max-width: 80%;
    font-size: 13px;
    padding: 12px 16px;
  }
  .robot-speech::after { display: none; }

  .hero-content { padding-left: 0; padding-top: 0; max-width: 100%; }
  .hero-title { font-size: clamp(36px, 11vw, 56px); }
  /* The hero-logo on the homepage left sidebar is the BIG site logo image,
     not a small icon. Let it fill the sidebar width on mobile instead of
     being clamped to 56×56px. The tighter 320px max-width keeps it from
     getting absurdly large on tablets that fall through to this breakpoint. */
  .page-sidebar-left .hero-logo {
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0 auto 20px;
  }
  /* Intro + subtitle in the left sidebar should match the right sidebar
     (Trimit description) on mobile too. Override the generic .hero-intro/
     .hero-subtitle mobile rules below. */
  .page-sidebar-left .hero-intro,
  .page-sidebar-left .hero-subtitle {
    font-size: 13px;
    line-height: 1.6;
  }
  /* Add room between the stacked sidebars / robot so they don't run
     into each other when collapsed to single column. */
  .home-layout .page-sidebar-left,
  .home-layout .page-sidebar-right { margin-bottom: 24px; }
  .home-layout .hero { margin-bottom: 24px; }
  /* Sidebar-recent list on mobile — less top spacing since vertical room
     is already cramped. */
  .sidebar-recent { margin-top: 24px; padding-top: 18px; }
  /* Right sidebar (Trimit) on mobile — reduce padding since it sits in
     a single column. */
  .home-layout .page-sidebar-right { padding: 0 16px 24px; }
  .hero-subtitle { font-size: 13px; }
  .hero-intro { font-size: 15px; }
  .hero-menu-item { padding: 14px 16px; }
  .hero-menu-label { font-size: 14px; }
  .hero-cta { padding: 14px 18px; font-size: 13px; }

  /* Hero stats: 2-up looks fine on phones. */
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  /* ─── Layouts ─── */
  .modules-grid { grid-template-columns: 1fr; gap: 18px; }
  .book-grid { grid-template-columns: 1fr; gap: 24px; }
  .games-grid { grid-template-columns: 1fr; gap: 20px; }
  .game-card { padding: 24px 20px; }
  .game-art { height: 140px; font-size: 56px; margin-bottom: 20px; }
  .game-card h3 { font-size: 22px; }
  .game-play { padding: 32px 22px; margin-top: 50px; }
  .game-play h3 { font-size: 26px; }

  /* Home layout (sidebar-rich pages). */
  .home-layout { padding: 130px 18px 60px !important; }
  .home-layout .page-sidebar-left,
  .home-layout .page-sidebar-right { margin-top: 0; }

  /* Page headers — the giant page-num takes too much real estate on phones. */
  .page-header { grid-template-columns: 1fr; gap: 16px; }
  .page-num { writing-mode: horizontal-tb; transform: none; font-size: 36px; }
  .page-meta { position: static; margin-top: 8px; }
  .page-title { font-size: clamp(32px, 9vw, 48px); }

  /* Downloads — hide size/date columns to save space. */
  .download-row { grid-template-columns: 36px 1fr 64px; gap: 10px; padding: 14px 16px; }
  .download-row .download-size, .download-row .download-date { display: none; }
  .download-name { font-size: 14px; }

  /* Timeline — stack date above content. */
  .timeline-item { grid-template-columns: 1fr; gap: 8px; }

  /* About — photo/text stack, tighter padding. */
  .about-layout { gap: 28px; }
  .about-card { padding: 24px; }
  .about-photo { max-width: 100%; }

  /* Links list. */
  .link-list { grid-template-columns: 1fr; }

  /* Footer. */
  .footer { padding-top: 50px; padding-bottom: 30px; }
  .footer-grid { gap: 28px; }
  .footer-bottom { font-size: 11px; padding-top: 24px; }

  /* RSS footer. */
  .rss-footer { padding-top: 50px; padding-bottom: 50px; }

  /* ─── Post pages ─── */
  .post-page { padding-left: 18px; padding-right: 18px; }
  .post-article { max-width: 100%; }
  .post-back { font-size: 11px; margin-bottom: 24px; }
  .post-title { font-size: clamp(26px, 7vw, 36px); }
  .post-excerpt { font-size: 15px; }
  .post-body { font-size: 15px; line-height: 1.7; overflow-wrap: break-word; word-wrap: break-word; }
  .post-body h2 { font-size: 22px; margin: 28px 0 12px; }
  .post-body h3 { font-size: 18px; margin: 22px 0 10px; }
  /* Code blocks: tighter padding, allow horizontal scroll for long lines. */
  .post-body pre, .post-body .code-block {
    padding: 14px 16px;
    font-size: 12px;
    margin: 14px -8px;        /* slight bleed for breathing room */
    border-radius: 4px;
  }
  .post-body code { font-size: 12px; }
  .post-body img { margin: 14px 0; }
  .post-body blockquote { padding-left: 14px; margin: 14px 0; }

  /* Share buttons — already wrap, just tighten. */
  .post-share { gap: 8px; margin-top: 30px; padding-top: 20px; }
  .post-share-label { width: 100%; margin-bottom: 4px; }
  .post-share-btn { padding: 8px 12px; font-size: 11px; }

  /* Hide background grain/scanlines on mobile (perf + visual noise). */
  .grain, .scanlines { display: none; }
}

/* ─── Tighter mobile (≤ 480px) — small phones ─── */
@media (max-width: 480px) {
  .nav { padding: 10px 12px; }
  .logo-text { font-size: 14px; }
  .nav-links { font-size: 9px; }
  .nav-links a { padding: 5px 6px; letter-spacing: 0.08em; }

  .hero, .modules, .page, .post-page, .home-layout {
    padding-left: 14px !important; padding-right: 14px !important;
  }
  .robot-container { height: 300px; }
  /* Smallest phones — pull the orbit in even tighter so the bubbles
     don't get clipped by the screen edge. Bubbles also drop another
     notch in width to fit comfortably. */
  .robot-orbit { --orbit-r: 105px; }
  .robot-orbit-bubble {
    width: 120px;
    margin: -20px 0 0 -60px;
    transform-origin: 60px 20px;
    font-size: 9.5px;
    padding: 7px 9px;
  }
  .hero-title { font-size: clamp(32px, 10vw, 44px); }
  .hero-stats { grid-template-columns: 1fr 1fr; gap: 10px; }

  .game-art { height: 110px; font-size: 44px; }
  .game-play { padding: 24px 16px; }

  .post-title { font-size: clamp(24px, 7vw, 30px); }
  .post-body pre, .post-body .code-block { font-size: 11px; padding: 12px 14px; }

  /* Post share label drops to its own line, buttons go full-width pairs. */
  .post-share-btn { flex: 1 1 calc(50% - 4px); justify-content: center; }
}

/* ════════════════════════════════════════════
   Robotic finger pointing at the Home menu item
   Injected by nav-pointer.js as the FIRST child of .nav-links.
   Sits flush before Home, finger pointing diagonally down-right
   toward the link. Bobs gently to draw attention.
   ═══════════════════════════════════════════ */
.nav-pointer {
  /* Inline-flex item inside .nav-links — sits as a sibling next to Home.
     Negative margins lift it up out of the nav band so the upper-arm
     visually "hangs in" from above, and pull the next item closer so
     the finger overlaps the start of "Home" rather than just sitting next to it. */
  position: relative;
  width: 80px;       /* visual width allocated in the flex layout */
  height: 36px;      /* matches nav-link visual height for alignment */
  margin: -34px -38px -22px -10px;
  pointer-events: none;
  /* Subtle drop shadow lifts the arm off the backdrop. */
  filter: drop-shadow(0 4px 8px rgba(45, 106, 143, 0.25));
  /* Bob animation: the whole arm dips down toward the menu and back. */
  animation: nav-pointer-bob 2.4s ease-in-out infinite;
  transform-origin: 17px 0;
  flex-shrink: 0;
}
.nav-pointer svg {
  display: block;
  overflow: visible;
  width: 110px;
  height: 96px;
  /* Position the SVG so the fingertip (around x=93, y=68 in the viewBox)
     lands right at the start of the "Home" text. */
  position: absolute;
  top: -10px;
  left: -53px;
}

/* The fingertip glow pulses in sync with the bob — brightest when
   the finger is at its lowest (closest to the menu). */
.nav-pointer .np-tip-glow {
  transform-origin: 93.5px 68.5px;
  animation: nav-pointer-glow 2.4s ease-in-out infinite;
}
.nav-pointer .np-tip {
  animation: nav-pointer-tip 2.4s ease-in-out infinite;
}

@keyframes nav-pointer-bob {
  /* Horizontal "pointing" gesture: arm pulls back to the left, then thrusts
     right toward Home, holds the point briefly, pulls back, repeats. The
     small counter-rotation on each phase makes it feel like a natural
     wrist movement instead of rigid sliding. */
  0%, 100% { transform: translateX(0)    rotate(0deg); }
  20%      { transform: translateX(-8px) rotate(-3deg); }   /* pull back */
  45%      { transform: translateX(10px) rotate(2deg); }    /* thrust toward Home */
  55%      { transform: translateX(10px) rotate(2deg); }    /* hold the point */
  78%      { transform: translateX(-8px) rotate(-3deg); }   /* pull back again */
}
@keyframes nav-pointer-glow {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
@keyframes nav-pointer-tip {
  0%, 100% { fill: #7ddee5; }
  50%      { fill: #c3f0f5; }
}

/* Hide on mobile — the wrapped/stacked nav on small screens leaves
   no clean spot for the pointer, and it would just clutter. */
@media (max-width: 720px) {
  .nav-pointer { display: none; }
}

/* ════════════════════════════════════════════
   Falling BC-terms rain (homepage only)
   Injected by bc-rain.js. Terms fall continuously from below the
   header to the bottom of the viewport, like a gentle Matrix-style
   text rain. Sits at z-index 1 (behind page content, above bg).
   ═══════════════════════════════════════════ */
.bc-rain {
  /* Full-viewport overlay, behind page content. */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.bc-rain-drop {
  /* Each falling term. Positioned absolutely; top starts at the bottom
     of the header (~58px below viewport top) and the animation translates
     it all the way down past the viewport bottom. */
  position: absolute;
  top: 58px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  /* Animation duration is set inline per drop (8-15s) so each drop falls
     at a different speed — looks more natural than synchronised motion. */
  animation-name: bc-rain-fall;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  /* Subtle fade in at the start, opaque in the middle, fade out at the bottom. */
  opacity: 0;
}

@keyframes bc-rain-fall {
  0%   { transform: translateY(0);                       opacity: 0; }
  10%  {                                                  opacity: var(--bc-rain-max-opacity, 0.4); }
  85%  {                                                  opacity: var(--bc-rain-max-opacity, 0.4); }
  100% { transform: translateY(calc(100vh - 58px + 30px)); opacity: 0; }
}

/* Hide on mobile — the rain would crowd the cramped layout. */
@media (max-width: 720px) {
  .bc-rain { display: none; }
}

/* ════════════════════════════════════════════
   Contact page — two-column layout:
     left  = robots stacked above intro text
     right = contact form
   Everything is left-aligned with the page-title above.
   ═══════════════════════════════════════════ */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 50px;
  max-width: 1300px;
  margin: 0 0 80px;        /* flush-left */
  align-items: start;
}
.contact-intro-layout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;          /* flush-left children */
  gap: 24px;
}
.contact-intro-text {
  max-width: 100%;                  /* fill the left column */
}
.contact-intro-text .page-intro {
  /* Override the default page-intro bottom margin to fit the layout. */
  margin-bottom: 18px;
  max-width: 100%;
}
.contact-intro-text .page-intro:last-child {
  margin-bottom: 0;
}
.contact-email-link {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(45, 106, 143, 0.4);
  transition: color 0.15s, text-decoration-color 0.15s;
}
.contact-email-link:hover {
  color: var(--accent-bright);
  text-decoration-color: var(--accent-bright);
}
.contact-robots {
  width: 100%;
  max-width: 480px;                 /* keep the robots scene at a sensible size */
  height: 360px;
  position: relative;
}
#robots-handshake-canvas {
  width: 100%;
  height: 100%;
}
#robots-handshake-canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.contact-form {
  /* Form fills its grid column — the .contact-layout grid handles
     overall width. No own max-width or auto margin needed. */
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.contact-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.contact-field input,
.contact-field textarea {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 14px 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
  resize: vertical;
  width: 100%;
}
.contact-field textarea {
  min-height: 200px;
  font-family: var(--font-mono);
}
.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 3px rgba(78, 197, 207, 0.15);
}
.contact-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.contact-status {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.contact-status.error { color: var(--accent-warm); }
.contact-status.success { color: var(--accent); }

/* CAPTCHA field — narrower input since the answer is just a small number,
   and a slight visual separator above so the verification question feels
   like its own step rather than another text field. */
.contact-captcha {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}
.contact-captcha input {
  max-width: 220px;
}
#cf-captcha-question {
  /* Keep the math problem in the same accent color as other emphasis on
     the page so it stands out from the surrounding label text. */
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  font-size: 14px;
  margin-left: 6px;
}

/* Honeypot field — visually hidden but still focusable by bots that
   skip CSS. Real users never see or interact with this; bots fill it,
   and the PHP handler silently drops those submissions. */
.contact-honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Tablet — collapse the 2-column layout: form drops below the robots+text. */
@media (max-width: 1024px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 760px;
  }
  .contact-intro-layout {
    gap: 24px;
  }
  .contact-robots {
    /* Robots a touch smaller on tablets */
    height: 320px;
  }
}

/* Mobile — stack the first/last name fields, shrink the robot canvas */
@media (max-width: 720px) {
  .contact-robots { height: 240px; }
  .contact-row { grid-template-columns: 1fr; gap: 16px; }
  .contact-form { gap: 18px; }
  .contact-field input,
  .contact-field textarea { font-size: 13px; padding: 12px 14px; }
  .contact-field textarea { min-height: 160px; }
}

/* ═══════════════════════════════════════════════════════════════
   NEWSLETTER - header trigger + modal popup
   Injected by newsletter.js into every page that includes the script.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Header trigger ─── */
/* Sits as the FIRST child of <header class="nav"> so it lives at the
   far LEFT of the header, with the logo and nav-links to its right.
   No left-margin since it should hug the left edge of the header. */
.newsletter-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #4ec5cf 0%, #2d6a8f 60%, #153a55 100%);
  border: 1px solid #2d6a8f;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.8;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.newsletter-trigger:hover {
  background: linear-gradient(135deg, #5fd5df 0%, #3a7ca0 60%, #1e4a6a 100%);
  color: #ffffff;
  border-color: #4ec5cf;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(45, 106, 143, 0.35);
  opacity: 1;
}
.newsletter-trigger:focus-visible { opacity: 1; }
.newsletter-trigger:active { transform: translateY(0); }
.newsletter-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Group wrapper for the Newsletter + RSS Feeds buttons so flexbox
   space-between treats them as one item — keeps the two side-by-side
   instead of spraying them across the header width. */
.header-actions {
  display: inline-flex;
  align-items: center;
}

/* ─── RSS Feeds trigger (sits next to the Newsletter trigger) ─── */
.rss-feeds-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #4ec5cf 0%, #2d6a8f 60%, #153a55 100%);
  border: 1px solid #2d6a8f;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 14px;
  margin-left: 1cm;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.8;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.rss-feeds-trigger:hover {
  background: linear-gradient(135deg, #5fd5df 0%, #3a7ca0 60%, #1e4a6a 100%);
  color: #ffffff;
  border-color: #4ec5cf;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(45, 106, 143, 0.35);
  opacity: 1;
}
.rss-feeds-trigger:focus-visible { opacity: 1; }
.rss-feeds-trigger:active { transform: translateY(0); }
.rss-feeds-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ─── Modal overlay ─── */
.newsletter-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.newsletter-modal.open { display: flex; }
.newsletter-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 18, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: newsletter-fade-in 0.2s ease-out;
}
@keyframes newsletter-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body.newsletter-open { overflow: hidden; }

/* ─── Modal card ─── */
.newsletter-modal-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 32px 36px 28px;
  box-shadow: 0 24px 60px rgba(13, 13, 18, 0.35);
  animation: newsletter-card-in 0.25s ease-out;
}
@keyframes newsletter-card-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.newsletter-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.newsletter-modal-close:hover {
  background: var(--bg-soft);
  color: var(--ink);
}

/* ─── Modal header (graphic + title + sub) ─── */
.newsletter-modal-header {
  text-align: center;
  margin-bottom: 22px;
}
.newsletter-modal-graphic {
  display: inline-block;
  width: 80px;
  height: 60px;
  margin: 0 auto 14px;
}
.newsletter-modal-graphic svg { width: 100%; height: 100%; display: block; }
.newsletter-modal-header h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--ink);
}
.newsletter-modal-sub {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* ─── Form ─── */
.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.newsletter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.newsletter-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
}
.newsletter-input {
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 12px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
  transition: border-color 0.15s, background 0.15s;
  width: 100%;
  box-sizing: border-box;
}
.newsletter-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
}

/* Honeypot - off-screen so humans never see it; bots still find it. */
.newsletter-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.newsletter-captcha-field .newsletter-input { max-width: 120px; }

.newsletter-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #4ec5cf 0%, #2d6a8f 100%);
  border: none;
  padding: 14px 22px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 4px;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.newsletter-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(45, 106, 143, 0.3);
}
.newsletter-submit:disabled { opacity: 0.6; cursor: wait; }
.newsletter-submit-icon { font-size: 16px; line-height: 1; }

.newsletter-status {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  min-height: 1em;
  margin-top: 4px;
}
.newsletter-status.success { color: #2d8f5a; }
.newsletter-status.error   { color: #c83838; }

/* ─── Mobile ─── */
@media (max-width: 720px) {
  .newsletter-trigger-label { display: none; }
  .newsletter-trigger { padding: 6px 8px; }
  .newsletter-icon { width: 14px; height: 14px; }
  .rss-feeds-trigger-label { display: none; }
  .rss-feeds-trigger { padding: 6px 8px; margin-left: 8px; }
  .rss-feeds-icon { width: 14px; height: 14px; }
  .newsletter-modal { padding: 12px; }
  .newsletter-modal-card {
    padding: 26px 22px 22px;
    max-height: calc(100vh - 24px);
  }
  .newsletter-modal-header h2 { font-size: 22px; }
  .newsletter-modal-graphic { width: 64px; height: 48px; }
}