/* ============================================================
   Anatoly Volkhover — Personal Website
   Single stylesheet · All colors in :root · Mobile-first
   ============================================================ */

/* ── CSS Custom Properties ─────────────────────────────────── */
:root {
  --bg-primary:       #0a0f1a;
  --bg-secondary:     #0d1424;
  --bg-card:          #111a2e;
  --bg-card-hover:    #162040;
  --grid-line:        rgba(40,80,160,0.08);
  --grid-line-major:  rgba(40,80,160,0.15);
  --accent:           #3b82f6;
  --accent-dim:       rgba(59,130,246,0.12);
  --accent-glow:      rgba(59,130,246,0.25);
  --text-primary:     #e2e8f0;
  --text-secondary:   #94a3b8;
  --text-muted:       #64748b;
  --border:           rgba(59,130,246,0.20);
  --border-subtle:    rgba(59,130,246,0.10);
  --button-bg:        #3b82f6;
  --button-fg:        #ffffff;
  --button-outline-fg:#3b82f6;
  --nav-active:       #3b82f6;
  --nav-hover:        rgba(59,130,246,0.40);
  --signature-color:  #94a3b8;
  --brands-text:      #64748b;
  --footer-text:      #475569;
  --tree-line:        #334155;
  --max-width:        960px;
  --font-sans:        'Fira Code', monospace;
  --font-mono:        'Fira Code', monospace;
}

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  background-color: var(--bg-primary);
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Particle canvas background ───────────────────────────── */
#heroCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: auto;
}
.site-header, main, .site-footer, .skip-link, .mobile-nav-overlay {
  position: relative;
  z-index: 1;
}

/* Skip to content (accessibility) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--accent);
  color: var(--button-fg);
  padding: 8px 16px;
  z-index: 1000;
  font-size: 14px;
}
.skip-link:focus {
  top: 0;
}

/* ── Typography ────────────────────────────────────────────── */
h1, h2, h3, h4 {
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.3;
}

h1 { font-size: 28px; margin-bottom: 12px; }
h2 { font-size: 22px; margin-bottom: 10px; }
h3 { font-size: 18px; margin-bottom: 8px; }

p { margin-bottom: 16px; }

/* Terminal prompt ornament in page headings */
.prompt {
  color: var(--text-muted);
  font-weight: 400;
}
.cmd {
  color: var(--text-muted);
  font-weight: 400;
}

a {
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}
a:hover {
  text-decoration: underline;
}

strong { color: var(--text-primary); }

/* ── Layout ────────────────────────────────────────────────── */
main {
  flex: 1;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 32px 20px 48px;
  overflow: hidden;
}

.content-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Header ────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: none;
  background: rgba(2, 5, 12, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  white-space: nowrap;
}

.site-logo {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  margin-right: auto; /* push nav to the right, keep logo left-aligned to dots */
}
.site-logo:hover {
  color: var(--accent);
  text-decoration: none;
}
.logo-prefix {
  color: var(--text-muted);
  font-weight: 400;
}

/* Terminal dots before logo */
.header-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 12px;
  flex-shrink: 0;
}
.header-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(100, 116, 139, 0.3);
}

/* Desktop nav */
.main-nav {
  display: none;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}

.nav-link {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 6px 10px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
  cursor: pointer;
}
.nav-link::before {
  content: "/";
  color: var(--text-muted);
  font-weight: 300;
}
.nav-link:hover {
  color: var(--text-primary);
  border-bottom-color: transparent;
  text-decoration: none;
}
.nav-link.active {
  color: #ffffff;
  font-weight: 600;
  background: rgba(100,116,139,0.5);
  border-bottom-color: transparent;
  padding: 5px 10px;
}
.nav-link.active::before {
  content: "[/";
  color: rgba(255,255,255,0.6);
}
.nav-link.active::after {
  content: "]";
  color: rgba(255,255,255,0.6);
}

/* Hamburger button */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  gap: 5px;
  padding: 10px;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 1px;
}

/* Mobile overlay nav */
.mobile-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-primary);
  z-index: 100;
  display: none;
  flex-direction: column;
  padding: 20px;
}
.mobile-nav-overlay.open {
  display: flex;
}

.mobile-nav-close {
  align-self: flex-end;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-primary);
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.mobile-nav-link {
  display: block;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 14px 16px;
  min-height: 52px;
  display: flex;
  align-items: center;
  border-left: none;
  cursor: pointer;
}
.mobile-nav-link::before {
  content: "/";
  color: var(--text-muted);
  font-weight: 300;
  margin-right: 2px;
}
.mobile-nav-link:hover {
  color: var(--text-primary);
  text-decoration: none;
}
.mobile-nav-link.active {
  color: #ffffff;
  font-weight: 600;
  background: rgba(100,116,139,0.5);
}
.mobile-nav-link.active::before {
  content: "[/";
  color: rgba(255,255,255,0.6);
}
.mobile-nav-link.active::after {
  content: "]";
  color: rgba(255,255,255,0.6);
}

/* ── Footer ────────────────────────────────────────────────── */
.site-footer {
  border-top: none;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px 24px;
  text-align: left;
}

.site-footer p {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--footer-text);
  margin: 0;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 0;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
  color: var(--text-primary);
  background: rgba(100,116,139,0.2);
}
.btn::before {
  content: "% ";
  color: var(--text-muted);
  font-weight: 300;
  white-space: pre;
}
.btn::after {
  content: "▊";
  color: #ffffff;
  margin-left: 6px;
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}
.btn:hover {
  background: rgba(100,116,139,0.35);
  color: #fff;
  text-decoration: none;
}

.btn-primary {
  /* inherits terminal style from .btn */
}
.btn-primary:hover {
  /* inherits from .btn:hover */
}

.btn-outline {
  background: transparent;
}
.btn-outline:hover {
  background: rgba(100,116,139,0.2);
}

/* ── Homepage Hero ─────────────────────────────────────────── */
.hero-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.hero-title::before {
  content: "% ";
  color: var(--text-muted);
  font-weight: 400;
}

.hero-tagline {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 24px;
  line-height: 1.55;
}
.hero-tagline .roles {
  display: block;
}
.hero-tagline::before {
  content: "/*****************************************";
  display: block;
}
.hero-tagline::after {
  content: "*****************************************/";
  display: block;
}

.hero-photo {
  width: 200px;
  height: auto;
  border-radius: 0;
  border: none;
}

/* Mobile: photo left-aligned */
.hero-photo-wrap {
  text-align: left;
  margin-bottom: 24px;
}

.hero-signature {
  display: block;
  width: 180px;
  margin: 24px 0;
}

.hero-brands {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--brands-text);
  margin-top: 24px;
  line-height: 1.8;
}

/* Homepage link sections */
.home-links-external {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0;
}

.pill-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 700;
  background: none;
  border: none;
  border-radius: 0;
  padding: 6px 0;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}
.pill-link::before {
  content: "[";
  color: var(--text-muted);
  font-weight: 400;
  transition: color 0.2s;
}
.pill-link::after {
  content: "]";
  color: var(--text-muted);
  font-weight: 400;
  transition: color 0.2s;
}
.pill-link:hover {
  color: var(--text-primary);
  background: none;
  text-decoration: none;
}
.pill-link:hover::before,
.pill-link:hover::after {
  color: var(--text-primary);
}
.pill-link svg {
  display: none;
}

.home-links-internal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 16px 0;
}
.home-links-internal a {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}
.home-links-internal a:hover {
  text-decoration: underline;
}

/* ── Blog listing ──────────────────────────────────────────── */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.blog-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
}
.blog-item:hover {
  text-decoration: none;
}
.blog-item:hover .blog-title {
  color: var(--accent);
}

.blog-item-top {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.blog-date {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.blog-date::before {
  content: "» ";
  color: var(--accent);
}

.blog-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  transition: color 0.2s;
}

/* ── Blog subtree (section headings) ──────────────────────── */
.blog-subtree {
  margin-top: 4px;
  margin-left: 4px;
}
.blog-subtree-line {
  position: relative;
  padding-left: 20px;
  border-left: 1px solid var(--tree-line);
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.55;
  transition: color 0.2s;
}
.blog-subtree-line::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 14px;
  border-top: 1px solid var(--tree-line);
}
.blog-subtree-line:last-child {
  border-left-color: transparent;
}
.blog-subtree-line:last-child::after {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  height: 0.75em;
  border-left: 1px solid var(--tree-line);
}
.blog-item:hover .blog-subtree-line {
  color: var(--text-secondary);
}

.blog-count {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 20px;
}
.blog-diagram {
  margin: 2em 0;
}
.blog-diagram img {
  max-width: 100%;
  width: 600px;
}

/* ── Blog Post ─────────────────────────────────────────────── */
.post-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  margin-bottom: 24px;
  cursor: pointer;
}
.post-back:hover { text-decoration: underline; }

/* Terminal prompt on the first paragraph of each blog post */
.post-body p:first-child::before {
  content: "";
  color: var(--accent);
  font-weight: 500;
}

.post-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.post-body {
  margin-top: 24px;
}
.post-body p {
  margin-bottom: 16px;
  color: var(--text-secondary);
  line-height: 1.8;
}
.post-body h2 {
  margin-top: 32px;
  margin-bottom: 12px;
}
.post-body h3 {
  margin-top: 24px;
  margin-bottom: 8px;
}
.post-body ul, .post-body ol {
  margin: 0 0 16px 24px;
  color: var(--text-secondary);
}
.post-body li {
  margin-bottom: 6px;
}
.post-body pre {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 16px;
  overflow-x: auto;
  margin-bottom: 16px;
}
.post-body code {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-primary);
}
.post-body p code {
  background: var(--accent-dim);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 14px;
}
.post-body em {
  color: var(--text-primary);
  font-style: italic;
}
.post-body strong {
  color: var(--text-primary);
}
.post-body blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 16px;
  margin: 16px 0;
  color: var(--text-secondary);
  font-style: italic;
}

.post-image-wrap {
  float: left;
  margin: 8px 24px 16px 0;
}
.post-image-wrap img {
  max-width: min(500px, 100%);
  height: auto;
  border-radius: 8px;
}

.video-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  padding-bottom: 56.25%;
  margin-bottom: 24px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}
.video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.video-fallback {
  font-family: var(--font-mono);
  font-size: 13px;
  margin-top: -16px;
  margin-bottom: 24px;
}

/* ── HLS Video Player (Glass Morphism) ─────────────────────── */
.hls-player {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: #0a0a0a;
  overflow: hidden;
  margin-top: 24px;
  margin-bottom: 24px;
  border-radius: 6px;
  cursor: pointer;
  outline: none;
}
.hls-player video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #0a0a0a;
}
.hls-player .player-poster {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
  transition: opacity 0.4s ease;
}
.hls-player .player-poster.hidden {
  opacity: 0;
  pointer-events: none;
}
.hls-player .player-poster-img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.hls-player .player-controls {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  padding: 10px 16px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(10, 15, 26, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  border: 1px solid rgba(59, 130, 246, 0.20);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.hls-player .player-controls.visible {
  opacity: 1;
  pointer-events: auto;
}
.hls-player .player-play-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(100,116,139,0.5);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.hls-player .player-play-btn:hover {
  background: rgba(100,116,139,0.65);
}
.hls-player .player-play-btn svg {
  fill: #ffffff;
  width: 13px; height: 13px;
  margin-left: 2px;
}
.hls-player .player-pause-icon { margin-left: 0 !important; }
.hls-player .player-progress {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  position: relative;
  cursor: pointer;
}
.hls-player .player-progress-buffer {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: rgba(148, 163, 184, 0.4);
  border-radius: 2px;
  width: 0;
}
.hls-player .player-progress-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: #ffffff;
  border-radius: 2px;
  width: 0;
  z-index: 1;
}
.hls-player .player-progress::before {
  content: '';
  position: absolute;
  top: -8px; bottom: -8px;
  left: 0; right: 0;
}
.hls-player .player-time-current,
.hls-player .player-time-duration {
  font-size: 11px;
  color: #94a3b8;
  font-family: var(--font-mono);
  white-space: nowrap;
  flex-shrink: 0;
}
.hls-player .player-time-sep {
  font-size: 11px;
  color: #94a3b8;
  flex-shrink: 0;
  margin: 0 -4px;
}
.hls-player .player-volume-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  flex-shrink: 0;
}
.hls-player .player-volume-btn svg {
  width: 16px; height: 16px;
  fill: #ffffff;
}
.hls-player .player-volume-btn.muted .vol-on { display: none; }
.hls-player .player-volume-btn.muted .vol-off { display: block !important; }
.hls-player .player-fullscreen-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  flex-shrink: 0;
}
.hls-player .player-fullscreen-btn svg {
  width: 16px; height: 16px;
  fill: #ffffff;
}
.hls-player:fullscreen {
  border-radius: 0;
}
.hls-player:fullscreen .player-controls {
  bottom: 24px;
}
@media (max-width: 600px) {
  .hls-player .player-controls {
    bottom: 8px;
    width: 92%;
    padding: 8px 10px;
    gap: 8px;
  }
  .hls-player .player-time-sep,
  .hls-player .player-time-duration {
    display: none;
  }
}

/* ── AI Twin Chat Page (Terminal Style) ────────────────────── */
.twin-section {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 140px);
  min-height: 400px;
}

/* Instruction line above terminal (animated like an LLM response) */
.twin-instruction {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: inherit;
  line-height: 1.7;
  margin-bottom: 16px;
  min-height: 1.7em;
}
.twin-instruction .twin-instruction-cta {
  color: var(--text-primary);
  font-weight: 600;
}

/* Scrollable conversation area */
.twin-chat-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(100,116,139,0.3) transparent;
}

/* Each Q+A exchange */
.twin-exchange {
  margin-bottom: 16px;
  min-width: 0;
}
.twin-user-line {
  margin-bottom: 4px;
}
.twin-user-line .twin-pct {
  color: var(--text-muted);
}
.twin-user-line .twin-text {
  color: var(--text-primary);
}
.twin-response {
  color: var(--text-secondary);
  line-height: 1.7;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-width: 100%;
  min-width: 0;
}
/* When rendering markdown, let the HTML elements handle whitespace */
.twin-response.twin-md {
  white-space: normal;
}
.twin-response.twin-error {
  color: var(--text-muted);
  font-style: italic;
}

/* ── Markdown styles inside Twin responses ───────────────── */
.twin-md p {
  margin: 0 0 0.6em 0;
  line-height: 1.7;
}
.twin-md p:last-child { margin-bottom: 0; }
.twin-md strong, .twin-md b { color: var(--text-primary); font-weight: 600; }
.twin-md em, .twin-md i { font-style: italic; }
.twin-md a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(59,130,246,0.4);
  text-underline-offset: 2px;
}
.twin-md a:hover { text-decoration-color: var(--accent); }
.twin-md code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: rgba(59,130,246,0.1);
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  padding: 0.1em 0.35em;
}
.twin-md pre {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.75em 1em;
  margin: 0.6em 0;
  overflow-x: auto;
  line-height: 1.5;
}
.twin-md pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.9em;
  color: var(--text-primary);
}
.twin-md blockquote {
  border-left: 3px solid var(--accent);
  margin: 0.6em 0;
  padding: 0.3em 0 0.3em 1em;
  color: var(--text-muted);
}
.twin-md ul, .twin-md ol {
  margin: 0.4em 0;
  padding-left: 1.6em;
}
.twin-md li { margin-bottom: 0.25em; }
.twin-md h1, .twin-md h2, .twin-md h3,
.twin-md h4, .twin-md h5, .twin-md h6 {
  color: var(--text-primary);
  margin: 0.8em 0 0.3em 0;
  line-height: 1.3;
}
.twin-md h1 { font-size: 1.15em; }
.twin-md h2 { font-size: 1.1em; }
.twin-md h3 { font-size: 1.05em; }
.twin-md h4, .twin-md h5, .twin-md h6 { font-size: 1em; }
.twin-md hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.8em 0;
}
.twin-md table {
  border-collapse: collapse;
  margin: 0.6em 0;
  font-size: 0.92em;
}
.twin-md th, .twin-md td {
  border: 1px solid var(--border);
  padding: 0.35em 0.7em;
  text-align: left;
}
.twin-md th {
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-weight: 600;
}
.twin-md del { opacity: 0.5; }

/* Blinking cursor at end of streaming text */
.twin-cursor {
  display: inline;
  color: #fff;
  opacity: 0.8;
  animation: blink 1s step-end infinite;
}

/* Input line: ai_twin % [textarea] */
.twin-input-line {
  display: flex;
  align-items: flex-start;
}
.twin-input-line .twin-pct {
  color: var(--text-muted);
  margin-right: 6px;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1.55;
}

/* Wrapper stacks the mirror div over the real textarea */
.twin-input-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
}

/* Mirror div: visible text + blinking block cursor */
.twin-input-mirror {
  font-family: var(--font-mono);
  font-size: inherit;
  line-height: 1.55;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  pointer-events: none;
  min-height: 1.55em;
}
.twin-input-mirror .twin-cursor {
  display: inline;
  background: #fff;
  color: var(--bg-primary);
  animation: cursor-blink 1s step-end infinite;
}
@keyframes cursor-blink {
  0%, 100% { background: #fff; color: var(--bg-primary); }
  50%      { background: transparent; color: var(--text-primary); }
}

/* Real textarea: captures input but text is invisible */
.twin-input-line .twin-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  outline: none;
  color: transparent;
  caret-color: transparent;
  font-family: var(--font-mono);
  font-size: inherit;
  line-height: 1.55;
  padding: 0;
  margin: 0;
  resize: none;
  overflow: hidden;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.twin-input-line .twin-input::placeholder {
  color: transparent;
}
.twin-input-line .twin-input:disabled {
  opacity: 0.5;
}

/* ── Chat Bar (embedded in non-twin pages) ─────────────────── */
.chat-bar {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px 20px;
}
.chat-bar-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(10, 15, 26, 0.65);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 8px 14px;
  max-width: 450px;
}
.chat-bar-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.4;
  min-width: 0;
}
.chat-bar-input::placeholder {
  color: var(--text-muted);
}
.chat-bar-send {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(100,116,139,0.2);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
  opacity: 0.5;
  cursor: default;
  transition: all 0.15s;
}
.chat-bar-send.active {
  background: rgba(100,116,139,0.5);
  color: #ffffff;
  opacity: 1;
  cursor: pointer;
}
.chat-bar-send.active:hover {
  background: rgba(100,116,139,0.65);
}

/* Post-back bar (← cd .. on blog posts, sits above chat bar) */
.post-back-bar {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px 20px 0;
}
.post-back-bar .post-back {
  margin-bottom: 0;
}

/* ── Books ─────────────────────────────────────────────────── */
.book-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 24px;
}

.book-cover {
  width: 160px;                 /* mobile: same rendered size as tablet */
  max-width: 100%;
  height: auto;
  border-radius: 0;
  border: none;
  align-self: flex-start;
}

/* Frame for the agentic-spec book cover. The 3D-mockup image is absolutely
   positioned and oversized (243px) so the book reads at a similar size to the
   flat cover and its soft side shadow can bleed past the frame; left:-27px keeps
   the book's left edge flush with the column, top:0 aligns its top with the title.
   The frame reserves the layout slot. On mobile the card stacks vertically, so the
   slot must match the mockup's ACTUAL rendered footprint (243px wide × the PNG's
   true 798:1086 aspect ≈ 331px tall) — otherwise the oversized image overflows the
   slot and the book-info text below slides up under it. The desktop media queries
   below shrink the frame to 160/200px, where the text sits in a separate column so
   any vertical overflow is harmless. The image sits behind text. */
.book-cover-frame {
  width: 194px;                 /* mobile: same rendered size as tablet (frame = cover, no overflow) */
  max-width: 194px;
  aspect-ratio: 798 / 1086;
  align-self: flex-start;
  flex-shrink: 0;
  position: relative;
  z-index: 0;
}
.book-cover.book-cover-agentic {
  width: 194px;                 /* mobile: match tablet size */
  max-width: none;
  height: auto;
  display: block;
  position: absolute;
  top: 0;                       /* book top aligned with the title text top */
  left: -21px;                  /* book's left edge flush with the column (no bleed) — scales with the 194px width */
  z-index: 0;
  pointer-events: none;
}

/* Keep info text above the overflowing glow of the agentic-spec cover. */
.book-info {
  position: relative;
  z-index: 1;
}

.book-info h2 {
  margin-bottom: 8px;
}

/* #1 Best Seller badge — faithful reproduction of Amazon's badge.
   Open Sans is the closest Google Fonts match to Amazon's proprietary
   "Amazon Ember" typeface (verified side-by-side against the live badge). */
.bestseller-badge {
  display: flex;               /* block-level so its margins set the rhythm (no inline line-box strut) */
  align-items: center;
  width: fit-content;          /* keep the clickable area to the badge, not the full row */
  margin: 0 0 14px;             /* badge→subtitle gap matches subtitle→text gap (14px) */
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 18px;
  text-decoration: none;        /* it's a link to the Amazon listing */
}
.bestseller-badge:hover {
  opacity: 0.82;                /* link affordance, no layout shift */
  text-decoration: none;
}
.bestseller-badge .bsb-tag {
  background: #d14900;          /* Amazon best-seller orange */
  color: #ffffff;
  line-height: 16px;
  font-weight: 500;             /* Open Sans 500 ≈ Amazon Ember 400 (white-on-orange) */
  padding: 2px 4px;
  border-radius: 4px;
  white-space: nowrap;
}
.bestseller-badge .bsb-cat {
  margin-left: 5px;
  color: #3dc8e8;               /* "in Software Engineering" — cyan (matches author name on cover) */
}
.bestseller-badge .bsb-date {
  color: var(--text-muted);     /* "- Amazon, June 2026" — blog tree-node color */
}

/* Blog CTA: get-on-amazon button with the bestseller badge alongside it */
.book-cta-row {
  display: flex;
  align-items: center;          /* badge vertically centered against the button */
  justify-content: flex-start;  /* left-aligned button */
  gap: 15px;                    /* horizontal spacing between button and badge */
  flex-wrap: wrap;
  margin: 2rem 0;
}
/* Stacked badge: line 1 = orange tag, line 2 = the rest */
.bestseller-badge--stacked {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  margin: 0;
}
.bestseller-badge--stacked .bsb-cat {
  margin-left: 0;
}

/* Blog 013 two-line badge: line 1 = orange tag + "in Software Engineering"
   reading as one sentence; line 2 = "Amazon, <month> <year>" (no leading dash).
   Same look on mobile and desktop; only the badge's position relative to the
   button changes (see .book-cta-row--badge-top). Scoped to its own modifier so
   the Books page badge (--stacked) is left untouched. */
.bestseller-badge--twoline {
  flex-direction: column;       /* line 1 above line 2 */
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  margin: 0;
}
.bestseller-badge--twoline .bsb-line {
  display: flex;
  align-items: center;          /* orange tag + category vertically centered = one sentence */
}
/* .bsb-cat keeps its 5px left margin (base rule) as the gap after the orange tag */

/* Blog 013 CTA: badge ABOVE the button on mobile, to the RIGHT of it on desktop. */
.book-cta-row--badge-top {
  flex-direction: column;       /* mobile: stack vertically */
  align-items: flex-start;
}
.book-cta-row--badge-top .bestseller-badge {
  order: -1;                    /* mobile: badge on top, button below */
}
@media (min-width: 600px) {
  .book-cta-row--badge-top {
    flex-direction: row;        /* desktop: button on the left, badge to its right */
    align-items: center;
  }
  .book-cta-row--badge-top .bestseller-badge {
    order: 0;
  }
}

/* Books page: best-seller badge UNDER the cover image — left column on desktop,
   directly below the cover (above the title) on mobile. The agentic cover is
   oversized and absolutely positioned and overflows its frame, so the frame must
   reserve the image's TRUE rendered height (below) or the badge overlaps it. */
.book-cover-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: flex-start;       /* don't stretch as a flex child of .book-card */
  flex-shrink: 0;
}
.book-cover-badge {
  margin: 14px 0 0;             /* gap between the cover and the badge */
}
@media (min-width: 600px) {
  /* tablet: cover image renders 194px wide → ~264px tall (frame slot is shorter) */
  .book-cover-frame { min-height: 264px; }
}
@media (min-width: 961px) {
  /* desktop: cover image renders 243px wide → ~331px tall */
  .book-cover-frame { min-height: 331px; }
}
/* Tablet ONLY: the Books cover badge breaks into 3 lines (tag / category / date)
   so it fits the narrow cover column and both book cards stay aligned. Scoped to
   .book-cover-badge — the blog badges keep their 2-line look. */
@media (min-width: 600px) and (max-width: 960px) {
  .book-cover-badge .bsb-line {
    flex-direction: column;     /* #1 Best Seller / in Software Engineering on separate lines */
    align-items: flex-start;
  }
  .book-cover-badge .bsb-cat {
    margin-left: 0;             /* category flush-left under the tag, not indented */
  }
}

/* Books page: keep the CTA row's spacing consistent with the standalone button */
.book-info .book-cta-row {
  margin: 18px 0;
}
.book-info .book-cta-row .btn {
  margin-top: 0;               /* center within the flex row, no stray top margin */
}

/* Blog: book cover beside a paragraph — right of it on desktop, below it on mobile.
   Mobile-first: stacked via flex+order; desktop floats the cover so the paragraph
   (and the content below) flow naturally to its left. On DESKTOP the bestseller
   badge sits UNDER the cover, matched to its width, via .post-cover-wrap; on MOBILE
   that badge is hidden and the existing cta-row badge (above the button) is used —
   so mobile is unchanged. */
.post-figure {
  display: flex;
  flex-direction: column;
}
.post-figure > p {
  order: 0;
  margin: 0;
}
.post-cover-wrap {
  order: 1;                    /* mobile: as a flex item of .post-figure, sits below the paragraph */
  align-self: flex-start;      /* mobile: shrink to the cover width, left-aligned */
}
.post-figure .post-book-cover {
  display: block;              /* no inline descender gap (matches the prior flex-item behavior) */
  width: 243px;                /* ~same on-screen size as the Books page cover */
  max-width: 100%;
  height: auto;
  /* Mobile: the cover element is flush with the text, but the PNG has built-in
     left whitespace + a dark 3D spine, so the VISIBLE book reads ~27px inset.
     Pull it left so the visible book aligns with the body text (same -27px the
     Books page uses for this cover). main{overflow:hidden} clips the transparent
     overflow, so there's no horizontal scroll. Desktop overrides this with
     margin:0 in the .post-cover-wrap .post-book-cover rule below. */
  margin: 14px 0 0 -27px;
}
.post-cover-badge {
  display: none;               /* mobile: hidden; the cta-row badge is shown instead */
}
@media (min-width: 600px) {
  .post-figure {
    display: block;            /* desktop: float layout, text wraps to the left */
  }
  .post-cover-wrap {
    float: right;              /* desktop: cover + badge unit floats right */
    width: 243px;
    max-width: 42%;
    margin: 0 0 12px 22px;     /* breathing room to the left of and below the unit */
  }
  .post-cover-wrap .post-book-cover {
    width: 100%;               /* fill the unit so the cover width = badge width */
    max-width: none;
    margin: 0;
  }
  .post-cover-badge {
    display: flex;             /* desktop: badge shown UNDER the cover */
    width: 100%;               /* match the cover image width */
    margin-top: 12px;
  }
  .book-cta-row .bestseller-badge {
    display: none;             /* desktop: hide the cta-row badge (now under the cover) */
  }
}

.book-info p {
  color: var(--text-secondary);
}
.book-info p em {
  color: var(--text-primary);
}
.book-info .book-subtitle {
  margin-top: 0;                /* title→subtitle = 8px, consistent across both books */
  margin-bottom: 14px;
  color: var(--text-primary);
  font-style: italic;
  font-size: 0.95rem;
}
.book-info .btn {
  margin-top: 2px;             /* + preceding p's 16px margin = 18px above, equal to below */
}
.book-info .btn + p {
  margin-top: 18px;            /* below-button gap */
}
.book-topics {
  margin-top: 18px;            /* book 2: below-button gap, equal to above */
}
.book-topics h3 {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 8px;
}
.book-topics ol {
  color: var(--text-muted);
  font-size: 0.85rem;
  padding-left: 24px;
  margin: 0;
  line-height: 1.8;
}

/* ── Contact ───────────────────────────────────────────────── */
.contact-section {
  text-align: left;
  padding: 0;
}

.contact-section h1 {
  margin-bottom: 12px;
}

.contact-section p {
  color: var(--text-secondary);
}

/* ── Placeholder pages ─────────────────────────────────────── */
.placeholder-section {
  text-align: left;
  padding: 0;
}

.placeholder-section h1 {
  margin-bottom: 12px;
}

.placeholder-section p {
  color: var(--text-secondary);
}

/* ════════════════════════════════════════════════════════════
   TIER 2: Tablet / Small Desktop  (600px – 960px)
   ════════════════════════════════════════════════════════════ */
@media (min-width: 600px) {
  /* Show full nav, hide hamburger */
  .main-nav { display: flex; }
  .hamburger { display: none; }

  .nav-link { font-size: 11px; padding: 6px 8px; }
  .site-logo { font-size: 14px; }

  /* Hero photo: float right */
  .hero-photo-wrap {
    float: right;
    margin: 0 0 16px 24px;
    text-align: right;
  }
  .hero-photo {
    width: 180px;
  }

  /* Blog listing: inline date + title */
  .blog-item-top {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }
  .blog-date {
    padding-top: 2px; /* align with first line of title */
  }
  .blog-subtree {
    margin-left: calc(10ch + 16px + 4px); /* align with title start */
  }

  /* Books: horizontal layout */
  .book-card {
    flex-direction: row;
    align-items: flex-start;
  }
  /* Both cards share one fixed cover-column width so their text columns line up.
     Tablet: 160px (the badge is 3-line here, so it fits within this width). */
  .book-cover-col {
    width: 160px;
  }
  .book-cover {
    align-self: flex-start;
    flex-shrink: 0;
    width: 160px;
  }
  .book-cover-frame {
    width: 160px;
    max-width: 160px;
    flex-shrink: 0;
  }
  .book-cover.book-cover-agentic {
    width: 194px;
    top: 0;                     /* book top aligned with the title text top */
    left: -21px;                /* book's left edge flush with the column (no bleed) */
  }
}

/* ════════════════════════════════════════════════════════════
   TIER 3: Desktop  (961px+)
   ════════════════════════════════════════════════════════════ */
@media (min-width: 961px) {
  .nav-link { font-size: 13px; padding: 6px 10px; }
  .site-logo { font-size: 15px; }

  h1 { font-size: 32px; }
  h2 { font-size: 24px; }

  .hero-photo {
    width: 220px;
  }

  /* Desktop: wider shared cover column so the 2-line badge (~225px) fits and both
     cards' text columns still line up. */
  .book-cover-col {
    width: 228px;
  }
  .book-cover {
    width: 200px;
  }
  .book-cover-frame {
    width: 200px;
    max-width: 200px;
  }
  .book-cover.book-cover-agentic {
    width: 243px;
    top: 0;                     /* book top aligned with the title text top */
    left: -27px;                /* book's left edge flush with the column (no bleed) */
  }
}

/* ── Utilities ─────────────────────────────────────────────── */
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

/* Images lazy-load */
img[loading="lazy"] {
  opacity: 1;
}

/* Print: remove background */
@media print {
  body {
    background: #fff;
    color: #000;
  }
  .site-header, .site-footer { display: none; }
}