:root {
  --accent: #c8a55f;
  --accent-dim: rgba(200, 165, 95, 0.42);
  --accent-glow: rgba(200, 165, 95, 0.08);
  --bg: var(--herman-color-canvas);
  --border: #1e2632;
  --text: #c5cdd9;
  --text-dim: #7b8699;
  --text-bright: #e8eaed;
  --mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius: 4px;
  --radius-sm: 2px;
  --max-width: 1100px;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg-0);
  color: var(--herman-color-text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* === Header === */
.site-header {
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
  margin-bottom: 48px;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.5px;
  color: var(--herman-color-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 2px;
}

.logo-bracket { color: var(--herman-color-brass); }

.nav {
  display: flex;
  gap: 28px;
}

.nav-link {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--text-4);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.15s;
  position: relative;
}

.nav-link:hover { color: var(--herman-color-text); }

.nav-link.active { color: var(--herman-color-amber); }

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--herman-color-amber);
}

/* === Main === */
.main {
  flex: 1;
  padding-bottom: 64px;
}

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

h1 {
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

h2 {
  font-size: 24px;
  margin: 48px 0 16px;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 18px;
  margin: 32px 0 12px;
}

p { margin-bottom: 16px; }

a {
  color: var(--herman-color-brass);
  transition: opacity 0.15s, color 0.15s;
  text-decoration: underline;
  text-decoration-color: rgba(200, 165, 95, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover {
  text-decoration-thickness: 2px;
  text-decoration-color: var(--herman-color-brass);
}
/* === Links inside card-like clickable surfaces inherit
   the card's text-decoration: none. Inline content links
   above (and footer-credit / all <p> links) keep the underline. */
.recent-card, .recent-card a,
.note-row, .note-row a,
.project-card, .project-card a,
.nav-link {
  text-decoration: none;
}

strong { color: var(--herman-color-text); font-weight: 600; }

code {
  font-family: var(--mono);
  font-size: 0.875em;
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--herman-color-brass);
}

pre {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  margin: 24px 0;
}

pre code {
  background: none;
  padding: 0;
  color: inherit;
}

/* === Home page === */
.hero {
  margin-bottom: 64px;
}

.hero-terminal {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.terminal-bar {
  background: var(--surface-2);
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.terminal-dot.red { background: #ff5f56; }
.terminal-dot.yellow { background: #ffbd2e; }
.terminal-dot.green { background: var(--herman-color-positive); }

.terminal-title {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-4);
  margin-left: auto;
}

.terminal-body {
  padding: 32px;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 2;
}

.terminal-line { display: block; }
.terminal-prompt { color: var(--herman-color-brass); margin-right: 8px; }
.terminal-output { color: var(--text-3); }
.terminal-key { color: var(--text-4); }
.terminal-val { color: var(--herman-color-text); }
.terminal-accent { color: var(--herman-color-brass); }
.terminal-comment { color: var(--text-4); font-style: italic; }
.terminal-cursor {
  display: inline-block;
  width: 8px;
  height: 16px;
  background: var(--herman-color-brass);
  animation: blink 1s step-end infinite;
  vertical-align: middle;
}

@keyframes blink { 50% { opacity: 0; } }

/* === Stats grid === */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 48px 0;
}
@media (max-width: 720px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stat-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  transition: border-color 0.2s, transform 0.18s ease;
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--herman-color-brass), transparent 80%);
  opacity: 0;
  transition: opacity 0.2s;
}
.stat-card:hover { border-color: var(--border-1); transform: translateY(-1px); }
.stat-card:hover::before { opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
  .stat-card, .stat-card::before { transition: none; }
  .stat-card:hover { transform: none; }
}

.stat-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--text-4);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.stat-value {
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 700;
  color: var(--herman-color-brass);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.stat-unit {
  font-size: 14px;
  color: var(--text-4);
  margin-left: 4px;
  font-weight: 500;
}

/* === Project cards === */
.project-grid {
  display: grid;
  gap: 20px;
  margin: 32px 0;
}

.project-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, transform 0.1s;
  display: block;
}

.project-card:hover {
  border-color: var(--accent-dim);
  transform: translateY(-1px);
  opacity: 1;
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 16px;
}

.project-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--herman-color-text);
}

.project-status {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  white-space: nowrap;
}

.project-status.active {
  color: var(--green);
  background: var(--accent-glow);
  border: 1px solid var(--accent-dim);
}

.project-status.shipped {
  color: var(--text-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.project-status.in-progress {
  color: #ffbd2e;
  background: rgba(255, 189, 46, 0.08);
  border: 1px solid rgba(255, 189, 46, 0.3);
}

.project-description {
  color: var(--text-4);
  font-size: 15px;
  margin-bottom: 16px;
}

.project-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-4);
}

.project-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.project-meta strong { color: var(--text-3); font-weight: 500; }

/* === Section listing === */
.section-list { margin: 24px 0; }

.section-entry {
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}

.section-entry:last-child { border-bottom: none; }

.entry-date {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-4);
  margin-bottom: 6px;
}

.entry-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--herman-color-text);
  margin-bottom: 8px;
}

.entry-title a { color: inherit; }
.entry-title a:hover { color: var(--herman-color-brass); }

.entry-summary {
  color: var(--text-4);
  font-size: 15px;
}

.entry-tags {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.entry-tag {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-4);
  background: var(--surface-2);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

/* === Article === */
.article-header { margin-bottom: 40px; }

.article-meta {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-4);
  margin-bottom: 12px;
}

.article-title {
  font-size: clamp(24px, 3.5vw, 32px);
  margin-bottom: 16px;
}

.article-date {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-4);
}

.prose { max-width: 720px; }

.prose p, .prose ul, .prose ol, .prose blockquote { margin-bottom: 20px; }

.prose ul, .prose ol { padding-left: 24px; }

.prose li {
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}

.prose blockquote {
  border-left: 2px solid var(--accent-dim);
  padding-left: 20px;
  color: var(--text-4);
  font-style: italic;
}

.prose h2 { margin-top: 48px; }
.prose h3 { margin-top: 32px; }

.prose img {
  max-width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

/* === Status panel === */
.status-panel {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 24px 0;
}

.status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 14px;
}

.status-row:last-child { border-bottom: none; }

.status-label {
  color: var(--text-4);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-value { color: var(--herman-color-text); }

.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--accent-glow);
}

.status-dot.warning { background: #ffbd2e; box-shadow: 0 0 8px rgba(255, 189, 46, 0.3); }
.status-dot.offline { background: var(--text-4); box-shadow: none; }

/* === About page === */
.stack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 32px 0;
}

.stack-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.stack-title {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--herman-color-brass);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.stack-list { list-style: none; padding: 0; }

.stack-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.stack-item:last-child { border-bottom: none; }

.stack-name { color: var(--text-3); }
.stack-version { color: var(--text-4); font-family: var(--mono); font-size: 12px; }

/* === Section header === */
.section-header {
  margin-bottom: 40px;
}

.section-kicker {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--herman-color-brass);
  margin-bottom: 8px;
}

.section-title {
  font-size: clamp(28px, 4vw, 36px);
  margin-bottom: 8px;
}

.section-description {
  color: var(--text-4);
  font-size: 16px;
  max-width: 600px;
}

/* === Footer === */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 36px 0 28px;
  margin-top: auto;
}

.footer-inner {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr auto;
  gap: 32px;
  align-items: start;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 900px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .footer-mark { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer-inner {
    grid-template-columns: 1fr;
  }
}

.footer-mark {
  display: flex;
  align-items: center;
  padding-right: 16px;
}
.footer-mark img {
  filter: drop-shadow(0 0 6px rgba(200, 165, 95, 0.12));
}

.footer-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.footer-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--text-4);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.footer-value {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.45;
}
.footer-value--muted {
  color: var(--text-4);
  font-size: 12px;
}

.footer-link {
  font-size: 13px;
  color: var(--herman-color-brass);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(200, 165, 95, 0.4);
}
.footer-link:hover {
  text-decoration-thickness: 2px;
  text-decoration-color: var(--herman-color-brass);
}

/* === hermanity-theme footer back-link cell ===
   Loaded only on sites that include the canonical `partials/footer.html`.
   Sites overriding the footer with custom markup should match these tokens. */
.footer-section--back {
  border-left: 1px solid var(--border);
  padding-left: 24px;
  margin-left: 4px;
  align-self: stretch;
  justify-content: center;
}
.footer-link--back {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--herman-color-brass);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(200, 165, 95, 0.4);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.footer-link--back:hover {
  text-decoration-thickness: 2px;
  text-decoration-color: var(--herman-color-brass);
}
.footer-value--born {
  font-family: var(--mono);
  color: var(--text-4);
  font-size: 11px;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.footer-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-3);
}
.footer-status-value { color: var(--herman-color-text-muted); font-weight: 500; }
.footer-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--herman-color-text-subtle);
  box-shadow: none;
  animation: none;
}
.footer-status--ok .footer-status-value,
.footer-status--healthy .footer-status-value,
.footer-status--operational .footer-status-value { color: var(--herman-color-positive); }
.footer-status--ok .footer-status-dot,
.footer-status--healthy .footer-status-dot,
.footer-status--operational .footer-status-dot {
  background: var(--herman-color-positive);
  box-shadow: 0 0 8px rgba(111, 194, 170, 0.6);
  animation: footer-pulse 2s ease-in-out infinite;
}
.footer-status--unknown .footer-status-value { color: var(--herman-color-text-subtle); }
.footer-status--unknown .footer-status-dot {
  background: var(--herman-color-text-subtle);
  box-shadow: none;
}
.footer-status--degraded .footer-status-value { color: var(--herman-color-warning); }
.footer-status--degraded .footer-status-dot { background: var(--herman-color-warning); }
.footer-status--down .footer-status-value,
.footer-status--offline .footer-status-value { color: var(--herman-color-danger); }
.footer-status--down .footer-status-dot,
.footer-status--offline .footer-status-dot { background: var(--herman-color-danger); }
@media (prefers-reduced-motion: reduce) {
  .footer-status-dot { animation: none; }
}
@keyframes footer-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

/* === Kicker / label components === */
.kicker {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--herman-color-brass);
}

/* === Responsive === */
@media (max-width: 768px) {
  .container { padding: 0 16px; }
  .header-inner { flex-direction: column; gap: 16px; }
  .nav { flex-wrap: wrap; justify-content: center; gap: 16px; }
  .terminal-body { padding: 20px; font-size: 12px; }
  .footer-inner { flex-direction: column; gap: 20px; align-items: flex-start; }
}

/* === Scroll progress === */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--herman-color-brass);
  z-index: 100;
  will-change: width;
}

/* === Selection === */
::selection {
  background: var(--herman-color-brass);
  color: var(--bg-0);
}

/* === Scrollbar === */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: var(--border-1); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-4); }

/* === Tables === */
.prose table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.prose th, .prose td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.prose th {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .terminal-cursor { opacity: 0; }
}

/* ==========================================================================
   VISUAL POLISH ROUND — appended rules
   ========================================================================== */

/* --- 1. Typography refinement --- */
h1, h2, h3, h4, h5, h6,
.article-title, .section-title, .entry-title, .project-title {
  text-wrap: pretty;
}

h3 { letter-spacing: 0; }

.prose p {
  text-wrap: pretty;
  hyphens: auto;
}

/* Subtle glow on the terminal's accent output — the signature element */
.terminal-accent {
  text-shadow: 0 0 12px rgba(200, 165, 95, 0.35);
}

/* Roomier, more legible code blocks */
pre {
  padding: 22px 24px;
  tab-size: 2;
}

.prose pre {
  max-width: 100%;
  overflow-x: auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

/* Long inline identifiers and URLs wrap; fenced code keeps scrollable preformatting. */
.prose :not(pre) > code {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.prose pre code {
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
}

/* --- 2. Card depth and hover states --- */
.stat-card, .project-card, .stack-card {
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.stat-card:hover {
  border-color: var(--border-1);
  box-shadow: 0 6px 20px var(--accent-glow);
}

.project-card:hover {
  border-color: var(--accent-dim);
  /* left accent rail via inset shadow — no layout shift + soft depth glow */
  box-shadow: inset 2px 0 0 var(--herman-color-brass), 0 8px 28px var(--accent-glow);
}

.stack-card:hover {
  border-color: var(--border-1);
  box-shadow: 0 6px 20px var(--accent-glow);
}

.status-row {
  transition: background-color 0.15s;
}

.status-row:hover {
  background: var(--surface-2);
}

@media (prefers-reduced-motion: no-preference) {
  .stat-card:hover { transform: translateY(-2px); }
}

/* --- 3. Terminal hero polish --- */
.terminal-bar {
  user-select: none;
  -webkit-user-select: none;
}

/* Soft glow behind the window-chrome dots */
.terminal-dot { box-shadow: 0 0 6px currentColor; }
.terminal-dot.red { box-shadow: 0 0 6px rgba(255, 95, 86, 0.6); }
.terminal-dot.yellow { box-shadow: 0 0 6px rgba(255, 189, 46, 0.6); }
.terminal-dot.green { box-shadow: 0 0 8px rgba(111, 194, 170, 0.7); }

/* Faint scanline texture over the terminal output */
.terminal-body {
  position: relative;
}

.terminal-body::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(200, 165, 95, 0.025) 0,
    rgba(200, 165, 95, 0.025) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: screen;
}

/* Smoother cursor pulse (was a hard step-end blink) */
@media (prefers-reduced-motion: no-preference) {
  .terminal-cursor {
    animation: cursor-pulse 1.1s ease-in-out infinite;
  }
}

@keyframes cursor-pulse {
  0%, 40% { opacity: 1; }
  50%, 90% { opacity: 0; }
  100% { opacity: 1; }
}

/* --- 4. Navigation improvements --- */
.nav-link {
  padding: 5px 11px;
  border-radius: 100px;
}

/* Underline that grows from the center on hover (non-active links) */
.nav-link::before {
  content: '';
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 2px;
  height: 1px;
  background: var(--herman-color-brass);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.22s ease;
}

.nav-link:hover::before { transform: scaleX(1); }

/* Active link becomes a soft pill instead of a bare underline */
.nav-link.active {
  background: var(--accent-glow);
  color: var(--herman-color-amber);
}

.nav-link.active::after,
.nav-link.active::before { display: none; }

/* CSS-only hamburger — hidden until the narrow breakpoint */
.nav-toggle { display: none; }

.nav-toggle-label {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 11px;
  cursor: pointer;
  border-radius: var(--radius);
}

.nav-toggle-label span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--herman-color-text);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

@media (max-width: 600px) {
  .header-inner {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }

  .nav-toggle-label { display: flex; }

  .nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin-top: 12px;
  }

  .nav-link {
    padding: 12px 14px;
    text-align: left;
    border-radius: var(--radius);
  }

  .nav-toggle:checked ~ .nav { display: flex; }

  /* Morph the bars into an X while the menu is open */
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* --- 5. Footer upgrade --- */
.site-footer {
  border-top: 1px solid transparent;
  border-image: linear-gradient(to right, var(--herman-color-brass), transparent 60%) 1;
}

.footer-credit {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-4);
}

.footer-credit-note { color: var(--text-4); opacity: 0.7; }

/* --- 6. Micro-interactions --- */
a { transition: opacity 0.2s, color 0.2s; }

/* Keyboard focus rings on every interactive element */
a:focus-visible,
button:focus-visible,
.nav-link:focus-visible,
.nav-toggle-label:focus-visible,
.project-card:focus-visible,
.back-to-top:focus-visible {
  outline: 2px solid var(--herman-color-amber);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Back-to-top button (injected by main.js) */
.back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent-dim);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--herman-color-brass);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, box-shadow 0.2s, border-color 0.2s;
}

.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}

.back-to-top:hover {
  border-color: var(--herman-color-brass);
  box-shadow: 0 6px 20px var(--accent-glow);
}

@media (max-width: 600px) {
  .back-to-top { bottom: 18px; right: 18px; }
}

/* --- 7. Section headers --- */
.section-kicker, .kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.section-kicker::after, .kicker::after {
  content: '';
  height: 1px;
  width: 44px;
  background: linear-gradient(to right, var(--accent-dim), transparent);
}

/* Sharper kicker → title → description rhythm */
.section-header { margin-bottom: 44px; }
.section-kicker { margin-bottom: 14px; }
.section-title { margin-bottom: 12px; }
.section-description { line-height: 1.6; }

/* --- 8. Field notes / blog entries --- */
.section-entry {
  border-radius: var(--radius);
  transition: box-shadow 0.2s ease;
}

.section-entry:hover {
  box-shadow: inset 3px 0 0 var(--herman-color-brass);
}

.entry-readtime { color: var(--text-4); }

.entry-more {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--herman-color-brass);
}

.entry-more::after {
  content: ' →';
  display: inline-block;
  transition: transform 0.2s ease;
}

.entry-more:hover { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .entry-more:hover::after { transform: translateX(4px); }
}

/* --- 9. Status page --- */
@media (prefers-reduced-motion: no-preference) {
  .status-dot:not(.warning):not(.offline) {
    animation: status-pulse 2.4s ease-in-out infinite;
  }
}

@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(111, 194, 170, 0.5); }
  50% { box-shadow: 0 0 0 5px rgba(111, 194, 170, 0); }
}

/* Status header row — subtle distinction */
.status-row--header {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-1);
}

.status-row--header .status-label { color: var(--herman-color-brass); }

.status-updated {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-4);
}

@media (max-width: 600px) {
  .status-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* --- 10. About page --- */
.stack-title::before {
  margin-right: 9px;
  font-style: normal;
  opacity: 0.9;
}

.stack-grid .stack-card:nth-child(1) .stack-title::before { content: '⚙'; }
.stack-grid .stack-card:nth-child(2) .stack-title::before { content: '⌨'; }
.stack-grid .stack-card:nth-child(3) .stack-title::before { content: '🖥'; }

@media (max-width: 600px) {
  .stack-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ==========================================================================
   ACCESSIBILITY ROUND (Part B) — appended rules
   ========================================================================== */

/* B1. Skip-to-content link — hidden until keyboard focus */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--surface-2);
  color: var(--herman-color-brass);
  border: 1px solid var(--herman-color-brass);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 13px;
  text-decoration: none;
  transform: translateY(-150%);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--herman-color-amber);
  outline-offset: 2px;
}

/* B6. Screen-reader-only content — visually hidden, still announced */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   VISUAL ENHANCEMENTS (Part C) — appended rules
   ========================================================================== */

/* C1. Subtle fade-in on page load (motion-safe only) */
@media (prefers-reduced-motion: no-preference) {
  .main {
    animation: page-fade-in 0.3s ease-out both;
  }
}

@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* C2. Standing left-border accent on project cards (not just hover) */
.project-card {
  border-left: 2px solid var(--accent-dim);
}

/* C3. Roomier, more readable article body */
.prose { max-width: 740px; }

/* Indent consecutive paragraphs for a print-like reading rhythm */
.prose p + p { text-indent: 1.5em; }

/* Media-only paragraphs are layout blocks, not prose continuations. */
.prose p:has(> img:only-child) { text-indent: 0; }
.prose p:has(> picture:only-child) { text-indent: 0; }

/* Don't indent paragraphs that follow non-paragraph blocks visually re-set
   by the author; keep first paragraph flush */
.prose blockquote + p,
.prose pre + p,
.prose ul + p,
.prose ol + p,
.prose h2 + p,
.prose h3 + p { text-indent: 0; }

/* Improved article header spacing */
.article-header {
  margin-bottom: 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.article-meta { margin-bottom: 14px; }
.article-title { margin-bottom: 8px; }

/* C4. Terminal hero enhancement — gradient body + soft border glow */
.hero-terminal {
  box-shadow: 0 0 40px rgba(200, 165, 95, 0.03);
}

.terminal-body {
  background: linear-gradient(to bottom, var(--surface-2), var(--surface-1));
}

/* C5. Code block top-bar with a monospace shell label */
.prose pre {
  position: relative;
  padding-top: 42px;
}

.prose pre::before {
  content: 'SHELL';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--text-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

/* C6. Better mobile spacing + touch targets */
@media (max-width: 600px) {
  body { font-size: 17px; }

  .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .stat-card { padding: 22px; }
  .project-card { padding: 24px; }
  .stack-card { padding: 22px; }
}

/* ==========================================================================
   DESIGN FLAIR ROUND — appended rules
   Sub-shades (no new base palette colors)
   ========================================================================== */
:root {
  --accent-subtle: rgba(200, 165, 95, 0.06);
  --accent-line: rgba(200, 165, 95, 0.14);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.22);
  --shadow-card-lg: 0 12px 32px rgba(0, 0, 0, 0.28);
}

/* --- DF1. Section header hierarchy (kicker is now a div, title is the real h1) --- */
.section-kicker {
  /* Ensure it reads as a small label, never a heading */
  font-size: 12px;
  margin-bottom: 14px;
}

.section-title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  color: var(--herman-color-text);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 12px;
}

.section-description {
  font-size: 16px;
  max-width: 620px;
}

/* --- DF2. Listing entries become proper cards --- */
.section-list {
  margin: 28px 0;
}

.section-entry {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.section-entry:last-child {
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}

.section-entry:hover {
  border-color: var(--border-1);
  box-shadow: var(--shadow-card);
}

@media (prefers-reduced-motion: no-preference) {
  .section-entry:hover { transform: translateY(-2px); }
}

.entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.entry-date { margin-bottom: 0; }

/* --- DF3. Category icon on entry titles --- */
.entry-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.entry-icon {
  font-size: 15px;
  line-height: 1;
  opacity: 0.9;
  flex-shrink: 0;
  filter: grayscale(0.15);
}

/* --- DF4. Status / category badges --- */
.entry-badge {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  white-space: nowrap;
  border: 1px solid var(--border);
  color: var(--text-4);
  background: var(--surface-2);
}

.entry-badge.status-active {
  color: var(--green);
  background: var(--accent-subtle);
  border-color: var(--accent-dim);
}

.entry-badge.status-shipped {
  color: var(--text-4);
  background: var(--surface-2);
  border-color: var(--border-1);
}

.entry-badge.status-in-progress {
  color: #ffbd2e;
  background: rgba(255, 189, 46, 0.08);
  border-color: rgba(255, 189, 46, 0.3);
}

/* --- DF5. Tags become pill chips --- */
.entry-tags {
  gap: 8px;
  margin-top: 14px;
}

.entry-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 3px 12px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.entry-tag::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-dim);
  flex-shrink: 0;
}

.section-entry:hover .entry-tag {
  border-color: var(--border-1);
}

/* --- DF6. Subtle background texture — barely-visible dot grid + top glow --- */
body {
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 50% -20%, rgba(200, 165, 95, 0.035), transparent 55%),
    radial-gradient(circle, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
  background-size: 100% 100%, 24px 24px;
  background-position: center top, center center;
}

/* --- DF7. Terminal hero — premium depth + glow --- */
.hero-terminal {
  position: relative;
  box-shadow:
    0 0 60px rgba(200, 165, 95, 0.045),
    0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Soft gradient hairline framing the window (over the flat border) */
.hero-terminal::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(150deg, var(--accent-line), transparent 42%, transparent 62%, rgba(255, 255, 255, 0.04));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* Refined title bar — gradient bottom hairline */
.terminal-bar {
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(to right, var(--accent-dim), var(--border) 45%, transparent) 1;
  background: linear-gradient(to bottom, var(--surface-2), var(--surface-1));
}

/* Inner top highlight on the body for a touch of lit depth */
.terminal-body {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* --- DF8. Stat cards — data-viz feel, corner accent, gradient wash --- */
.stat-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--surface-2), var(--surface-1) 70%);
  border-bottom: 1px solid var(--border);
}

/* Corner accent tick in the top-right */
.stat-card::before {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  border-top: 1px solid var(--accent-dim);
  border-right: 1px solid var(--accent-dim);
  border-top-right-radius: 3px;
  opacity: 0.6;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.stat-card:hover {
  border-bottom-color: var(--accent-dim);
}

.stat-card:hover::before {
  opacity: 1;
  border-color: var(--herman-color-brass);
}

.stat-value {
  font-size: 34px;
  letter-spacing: -0.01em;
}

/* --- DF9. Home: scroll cue below the stats grid --- */
.scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 40px auto 8px;
  color: var(--text-4);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  user-select: none;
}

.scroll-cue-chevron {
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--text-4);
  border-bottom: 1.5px solid var(--text-4);
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: no-preference) {
  .scroll-cue-chevron { animation: scroll-bounce 2s ease-in-out infinite; }
}

@keyframes scroll-bounce {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.5; }
  50%      { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}

/* --- DF10. Home: recent-work mini cards --- */
.recent-work { margin-top: 56px; }

.recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.recent-all {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--herman-color-brass);
}

.recent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.recent-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(160deg, var(--surface-2), var(--surface-1) 75%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.recent-card:hover {
  border-color: var(--accent-dim);
  box-shadow: var(--shadow-card);
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .recent-card:hover { transform: translateY(-3px); }
}

.recent-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.recent-date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-4);
}

.recent-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--herman-color-text);
  line-height: 1.35;
}

.recent-desc {
  font-size: 13px;
  color: var(--text-4);
  line-height: 1.55;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recent-tag {
  align-self: flex-start;
  margin-top: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.4px;
  color: var(--text-4);
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 2px 10px;
}

@media (max-width: 720px) {
  .recent-grid { grid-template-columns: 1fr; }
}

/* --- DF11. Footer upgrade — status indicator + brighter separator --- */
.site-footer {
  position: relative;
  margin-top: 72px;
}

/* Gradient separator glow riding just above the footer border */
.site-footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--accent-line) 20%, var(--accent-line) 80%, transparent);
  pointer-events: none;
}

.footer-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--herman-color-text-muted);
}

.footer-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--herman-color-text-subtle);
  box-shadow: none;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .footer-status--ok .footer-status-dot,
  .footer-status--healthy .footer-status-dot,
  .footer-status--operational .footer-status-dot {
    animation: status-pulse 2.4s ease-in-out infinite;
  }
}

/* Make the credit line read as intentional, not a byline afterthought */
.footer-credit span:first-child { color: var(--text-3); }

/* --- DF12. Code block refinement — gradient top accent + refined header --- */
.prose pre {
  border-top: none;
  box-shadow: var(--shadow-card);
}

/* Thin accent gradient riding the very top of the block */
.prose pre::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--herman-color-brass), var(--accent-dim) 40%, transparent);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  pointer-events: none;
}

/* Refine the header label bar */
.prose pre::before {
  height: 32px;
  letter-spacing: 2px;
  background: linear-gradient(to bottom, var(--surface-2), var(--surface-1));
  color: var(--text-4);
}

/* Slightly brighter code text for contrast on the darker header/body */
.prose pre code { color: var(--herman-color-text); }

/* --- DF13. Mobile refinements --- */
@media (max-width: 600px) {
  /* Stat cards: 2x2 grid instead of a single tall column */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 36px 0;
  }
  .stat-card { padding: 18px 16px; }
  .stat-value { font-size: 28px; }
  .stat-card::before { top: 10px; right: 10px; width: 14px; height: 14px; }

  /* Entry cards: tighter padding */
  .section-entry { padding: 18px 18px; }

  /* Section title scales down gracefully */
  .section-title { font-size: clamp(24px, 6vw, 36px); }

  /* Terminal hero: prevent long lines from breaking the layout */
  .terminal-body {
    font-size: 11px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================================================
   ATMOSPHERE ROUND (FLAIR-2) — visible depth, glow, layered shadows
   Appended overrides; later cascade wins over the DF round above.
   ========================================================================== */

/* AT2. Background atmosphere — brighter dot grid + two radial light sources */
body::before {
  background-image:
    radial-gradient(ellipse at 50% -10%, rgba(200, 165, 95, 0.06), transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(200, 165, 95, 0.03), transparent 40%),
    radial-gradient(circle, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 22px 22px;
  background-position: center top, right bottom, center center;
}
/* AT2-END */

/* AT1. Terminal hero — tripled glow, accent frame, lit top-edge strip */
.hero-terminal {
  border: 1px solid rgba(200, 165, 95, 0.1);
  box-shadow:
    0 0 80px rgba(200, 165, 95, 0.08),
    0 0 120px rgba(200, 165, 95, 0.04),
    0 24px 48px rgba(0, 0, 0, 0.35);
}

.hero-terminal::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 165, 95, 0.3), transparent);
  pointer-events: none;
  z-index: 2;
}

/* AT6. Scanline intensity bump + vertical cathode glow (screen-blended) */
.terminal-body::after {
  background:
    linear-gradient(to bottom, transparent, rgba(200, 165, 95, 0.012) 50%, transparent),
    repeating-linear-gradient(
      to bottom,
      rgba(200, 165, 95, 0.04) 0,
      rgba(200, 165, 95, 0.04) 1px,
      transparent 1px,
      transparent 3px
    );
}
/* AT6-END */

/* AT3. Universal card depth — resting shadow + faked top light source */
.stat-card,
.project-card,
.section-entry,
.stack-card,
.recent-card {
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.stat-card:hover,
.project-card:hover,
.stack-card:hover {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px var(--accent-dim);
}

/* AT4. Stat cards — accent wash overlay + glowing value */
.stat-card {
  background:
    linear-gradient(135deg, rgba(200, 165, 95, 0.03), transparent 55%),
    linear-gradient(160deg, var(--surface-2), var(--surface-1) 70%);
}

.stat-value {
  font-weight: 700;
  text-shadow: 0 0 20px rgba(200, 165, 95, 0.15);
}

/* AT5. Entry card hover — accent border + left accent line drawn as shadow */
.section-entry:hover {
  border-color: var(--accent-dim);
  box-shadow:
    inset 3px 0 0 var(--herman-color-brass),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px var(--accent-dim),
    0 8px 24px rgba(0, 0, 0, 0.2);
}
/* AT5-END */

/* AT7. Nav link hover — soft accent pill glow */
.nav-link {
  transition: color 0.15s ease, background 0.15s ease;
}
.nav-link:hover {
  color: var(--herman-color-text);
  background: var(--accent-glow);
}

/* AT9. Active status badge — subtle green glow */
.entry-badge.status-active {
  text-shadow: 0 0 8px rgba(200, 165, 95, 0.2);
}

/* AT10. Scroll cue — brighter, accent-tinted chevron */
.scroll-cue-chevron {
  border-color: var(--herman-color-brass);
  opacity: 0.4;
}

/* AT11. Tag chip hover — brighten + accent border */
.entry-tag {
  transition: color 0.15s ease, border-color 0.15s ease;
}
.entry-tag:hover {
  border-color: var(--accent-dim);
  color: var(--text-3);
}

/* AT8. Recent-work mini-card hover — lift + brighter border */
.recent-card:hover {
  border-color: var(--border-1);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
@media (prefers-reduced-motion: no-preference) {
  .recent-card:hover { transform: translateY(-2px); }
}

/* Cover images on entry cards */
.entry-cover {
  margin: -28px -28px 16px -28px;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
  position: relative;
}

.entry-cover img {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
  opacity: 0.9;
  transition: opacity 0.25s, transform 0.4s ease;
}

.entry-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, var(--surface-1));
  pointer-events: none;
}

.section-entry:hover .entry-cover img {
  opacity: 1;
  transform: scale(1.03);
}

/* Cover image on article pages */
.article-cover {
  margin: -24px -24px 32px -24px;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
  position: relative;
}

.article-cover img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: cover;
  filter: brightness(0.85);
}

.article-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--herman-color-canvas) 20%, transparent) 0%, var(--bg-0) 95%);
  pointer-events: none;
}

/* Recent card cover on home page */
.recent-card {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-1);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}

.recent-cover {
  width: 100%;
  height: 140px;
  overflow: hidden;
  position: relative;
}

.recent-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: opacity 0.25s, transform 0.4s ease;
}

.recent-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(15, 20, 25, 0.6));
  pointer-events: none;
}

.recent-card:hover .recent-cover img {
  opacity: 1;
  transform: scale(1.04);
}

.recent-card-body {
  padding: 20px 24px 24px;
}

.recent-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.recent-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--herman-color-text);
  margin-bottom: 8px;
}

.recent-desc {
  color: var(--text-4);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recent-date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-4);
}

.recent-tag {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-4);
  background: var(--surface-2);
  padding: 2px 8px;
  border-radius: 100px;
  border: 1px solid var(--border);
}

/* Latest notes section on home */
.latest-notes {
  margin-top: 48px;
}

.notes-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.note-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: padding-left 0.2s, color 0.15s;
}

.note-row:hover {
  padding-left: 8px;
  opacity: 1;
}

.note-date {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-4);
}

.note-title {
  font-size: 15px;
  color: var(--text-3);
  font-weight: 500;
}

.note-row:hover .note-title { color: var(--herman-color-brass); }

.note-cat {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-4);
  background: var(--surface-2);
  padding: 2px 8px;
  border-radius: 100px;
}

@media (max-width: 600px) {
  .note-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .note-cat { justify-self: start; }
  .entry-cover, .article-cover { margin: -16px -16px 16px -16px; }
  .recent-cover { height: 120px; }
}

/* AT12. Footer separator — brighter accent glow */
.site-footer::before {
  background: linear-gradient(to right, rgba(200, 165, 95, 0.2), transparent 60%);
}

/* ===========================================================================
   DESIGN-ASSETS POLISH ROUND — identity assets + cohesion pass (appended)
   =========================================================================== */

/* Brief 2. Footer [H] mark — full-width centered row above the columns.
   flex-basis:100% forces it onto its own row within the flex .footer-inner. */
.footer-mark {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.footer-mark img { display: block; opacity: 0.85; transition: opacity 0.2s; }
.footer-mark img:hover { opacity: 1; }

/* Brief 3. Terminal hero — heavier type to sit better under JetBrains Mono.
   .terminal-prompt already reads mint via var(--green); only weights bumped. */
.terminal-line { font-weight: 500; }
.terminal-title { font-weight: 600; }

/* Brief 4. Bottom-left ambient glow to balance the top-right hero glow.
   Fixed, behind content (z-index:-1), non-interactive — no contrast/z-index
   collision with hero, footer, or the existing body::before dot-grid. */
body::after {
  content: '';
  position: fixed;
  inset: auto auto 0 0;
  width: 60vw;
  height: 60vh;
  background: radial-gradient(ellipse at 0% 100%, var(--accent-glow), transparent 60%);
  pointer-events: none;
  z-index: -1;
}

/* Brief 5. Stat-card entrance stagger — CSS-only, one-time on first paint.
   backwards fill applies the from-state before delay, avoiding FOUC.
   Reduced-motion users skip the animation entirely (no wrapper = instant). */
@media (prefers-reduced-motion: no-preference) {
  .stat-card { animation: stat-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
  .stat-card:nth-child(1) { animation-delay: 0.05s; }
  .stat-card:nth-child(2) { animation-delay: 0.12s; }
  .stat-card:nth-child(3) { animation-delay: 0.19s; }
  .stat-card:nth-child(4) { animation-delay: 0.26s; }
  @keyframes stat-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* Brief 6. Cover hover — lift instead of scale (no overlap), plus a bottom
   gradient that strengthens on attention. Overrides the earlier scale(1.03)
   and the earlier .entry-cover::after background via cascade. */
.section-entry:hover .entry-cover img { transform: translateY(-2px); opacity: 1; }
.entry-cover::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(15, 20, 25, 0.5));
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 0.25s;
}
.section-entry:hover .entry-cover::after { opacity: 1; }

/* ============================================================= */
/* === Refined Terminal · foundation tokens (Round 1)        === */
/* === Appended — extends :root, later defs win via cascade  === */
/* ============================================================= */
:root {
  /* surfaces (cool near-black) */
  --bg-0:        #06080b;   /* page background — replaces --bg */
  --surface-1:  #0b0e13;   /* cards, panels */
  --surface-2:  #0d1117;   /* terminal body, code blocks */
  --surface-3:  #12161d;   /* bar tracks, subtle fills */

  /* borders (hairlines) */
  --border-1:      #232a34;
  --border-2:      #1b212a;
  --border-3:      #12161d;

  /* text (more stops for hierarchy) */
  --text-1:   #f2f4f7;
  --text-2:   #e8ebf0;
  --text-3:   #c7ced8;
  --text-4:   #8b95a3;
  --text-5:   #5b6675;

  /* accents */
  --green:    #6fc2aa;   /* legacy positive role; authoritative alias below */
  --green-bg:     #0d1a14;
  --green-border: #1c3a2e;
  --amber:    #f0b84f;
  --amber-bg:     #191307;
  --amber-border: #3a3016;
  --red:      #ef6b6b;

  /* radius scale */
  --radius:   12px;
  --radius-lg:16px;
  --radius-sm:8px;
}

/* ============================================================= */
/* === Refined Terminal · type system (three families)       === */
/* ============================================================= */
:root {
  --display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif:  'Newsreader', Georgia, 'Times New Roman', serif;
}

/* Display family — headings, stats, card titles (Space Grotesk) */
.stat-value { font-family: var(--display); font-weight: 700; }
.section-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 52px);
  letter-spacing: -0.03em;
}
.article-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -0.03em;
}
.entry-title, .recent-title { font-family: var(--display); font-weight: 600; font-size: 20px; }

/* Long-form article body reads in Newsreader (machine chrome stays mono) */
.prose p, .prose li, .prose blockquote { font-family: var(--serif); font-size: 19px; }
.prose blockquote { font-style: italic; }

/* ============================================================= */
/* === Refined Terminal · status pill system                 === */
/* ============================================================= */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
}
.status-pill::before { content: ''; font-family: var(--mono); }
.status-pill--active  { color: var(--green);  background: var(--green-bg);  border-color: var(--green-border); }
.status-pill--active::before  { content: '\25CF\00A0'; color: var(--green); }
.status-pill--shipped { color: var(--text-4); background: transparent;     border-color: var(--border-1); }
.status-pill--shipped::before { content: '\2713\00A0'; }
.status-pill--paused  { color: var(--amber);  background: var(--amber-bg);  border-color: var(--amber-border); }
.status-pill--paused::before  { content: '\25D0\00A0'; color: var(--amber); }
.status-pill--error   { color: var(--red);    background: transparent;     border-color: var(--red); }
.status-pill--error::before   { content: '\2715\00A0'; color: var(--red); }

/* Legacy alias — keep .entry-badge status refs working if any remain */
.entry-badge.status-active,
.entry-badge.status-shipped,
.entry-badge.status-paused { border-radius: 20px; }

/* ============================================================= */
/* === Refined Terminal · top glow rule + section eyebrows   === */
/* ============================================================= */
.page-glow-rule {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--herman-color-brass), transparent);
  opacity: 0.5;
  margin-bottom: -1px; /* tuck under the nav border */
}

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--herman-color-brass);
  margin-bottom: 18px;
  display: inline-block;
}
.eyebrow--faint { color: var(--text-5); }

/* Eyebrows sitting inside flex section heads shouldn't add stray bottom gap */
.recent-head .eyebrow { margin-bottom: 0; }

/* ============================================================= */
/* === Refined Terminal · home hero (2-col grid, terminal-heavy) === */
/* ============================================================= */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 56px;
  padding: 72px 0 64px;
  align-items: center;
  margin-bottom: 0;
}
.hero-headline {
  font-family: var(--display);
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--herman-color-text);
  margin: 0 0 24px;
}
.hero-lede {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-4);
  max-width: 440px;
  margin: 0 0 34px;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding: 48px 0; }
}

/* === hero status badge — sits above the terminal widget ===
   Renders a live "system status · since" line. Anchors the terminal
   composition so the right column doesn't feel underweight vs. the
   headline above. */
.hero-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-1);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-4);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.hero-live-pill-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px rgba(111, 194, 170, 0.7);
  animation: live-pulse 2.4s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.78); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-live-pill-dot { animation: none; }
}

/* ============================================================= */
/* === Refined Terminal · buttons (primary / ghost)          === */
/* ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  padding: 13px 22px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.btn--primary { background: var(--herman-color-brass); color: var(--bg-0); }
.btn--primary:hover { background: var(--herman-color-text); }
.btn--ghost { border: 1px solid var(--border-1); color: var(--herman-color-text); }
.btn--ghost:hover { border-color: var(--herman-color-brass); color: var(--herman-color-brass); }

/* ============================================================= */
/* === Refined Terminal 2 · status dashboard                 === */
/* ============================================================= */
.status-banner {
  display: flex; align-items: center; gap: 20px;
  padding: 56px 0 40px; border-bottom: 1px solid var(--border-1);
  margin-bottom: 32px;
}
.status-banner-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 16px var(--green);
  flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .status-banner-dot { animation: hpulse 2.4s ease-in-out infinite; }
}
@keyframes hpulse {
  0%, 100% { box-shadow: 0 0 16px var(--green); opacity: 1; }
  50%      { box-shadow: 0 0 6px var(--green);  opacity: 0.6; }
}
.status-banner h1 {
  font-family: var(--display);
  font-size: clamp(32px, 4.5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--herman-color-text);
  margin: 0 0 8px;
  line-height: 1;
}
.status-banner-meta {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-4);
}

.status-section-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--text-5);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.uptime-bars {
  display: flex; gap: 3px; align-items: flex-end;
  height: 52px;
  margin-bottom: 12px;
}
.uptime-bar {
  flex: 1; height: var(--h);
  border-radius: 2px; opacity: 0.9;
  background: var(--green);
  transition: opacity 0.15s;
}
.uptime-bar[data-state="amber"] { background: var(--amber); }
.uptime-bar[data-state="red"]   { background: var(--red); }
.uptime-bar:hover { opacity: 1; }
.uptime-axis {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 11px; color: var(--text-5);
  margin-bottom: 32px;
}

.status-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin-bottom: 32px;
}
@media (max-width: 900px) { .status-grid { grid-template-columns: 1fr; } }

.status-card {
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 24px 26px;
}
.resource-meter { margin-bottom: 20px; }
.resource-meter:last-child { margin-bottom: 0; }
.meter-label {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 12.5px;
  color: var(--text-4); margin-bottom: 7px;
}
.meter-val { color: var(--herman-color-brass); font-weight: 500; }
.meter-track {
  height: 6px; border-radius: 3px;
  background: var(--surface-3); overflow: hidden;
}
.meter-fill {
  height: 100%; width: var(--w);
  background: var(--green);
  border-radius: 3px;
}
.meter-fill[data-state="amber"] { background: var(--amber); }
.meter-aside { color: var(--text-5); font-style: italic; }

.service-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--border-3);
  font-family: var(--mono); font-size: 13px;
}
.service-row:last-child { border-bottom: none; }
.service-row > span:first-child { color: var(--herman-color-text); }
.service-state {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px;
}
.service-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
}
.service-state--ok { color: var(--green); }
.service-state--ok .service-dot { background: var(--green); }
.service-state--amber { color: var(--amber); }
.service-state--amber .service-dot { background: var(--amber); }

.status-incidents { margin-bottom: 8px; }
.incident-log {
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 22px 24px;
  font-family: var(--mono); font-size: 12.5px; line-height: 2;
}
.incident-ts { margin-right: 6px; }
.incident-ts--amber { color: var(--amber); }
.incident-ts--green { color: var(--green); }
.incident-msg { color: var(--text-4); }

/* ============================================================= */
/* === Refined Terminal 2 · project detail 2-col + rail      === */
/* ============================================================= */
.project-detail {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  padding: 56px 0 40px;
  align-items: start;
}
@media (max-width: 900px) { .project-detail { grid-template-columns: 1fr; } }
.project-rail { position: sticky; top: 24px; }
.rail-card {
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 22px 24px;
  font-family: var(--mono); font-size: 12.5px;
}
.rail-label {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-5); margin-bottom: 18px;
}
.rail-list { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.rail-list > div { display: flex; flex-direction: column; gap: 4px; }
.rail-list dt { color: var(--text-5); font-size: 11px; }
.rail-list dd { color: var(--herman-color-text); margin: 0; }
.rail-repo {
  display: block; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--border-3);
  color: var(--herman-color-brass); text-decoration: none;
  transition: color 0.15s;
}
.rail-repo:hover { color: var(--herman-color-text); }

.article-lede {
  font-family: var(--serif);
  font-size: 21px; line-height: 1.55;
  color: var(--text-3);
  margin-bottom: 40px;
  max-width: 640px;
}

/* ============================================================= */
/* === Refined Terminal 2 · projects index featured card     === */
/* ============================================================= */
.featured-project {
  display: grid;
  grid-template-columns: minmax(0, 360px) 1fr;
  grid-template-rows: auto auto;
  gap: 0 32px;
  padding: 32px;
  margin-bottom: 24px;
  background: linear-gradient(180deg, var(--green-bg), var(--surface-1));
  border: 1px solid var(--green-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
.featured-project:hover {
  border-color: var(--herman-color-brass);
  transform: translateY(-2px);
}
.featured-cover {
  grid-column: 1 / 2; grid-row: 1 / 3;
  width: 100%; aspect-ratio: 16/9;
  border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--border-1);
}
.featured-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.featured-body { grid-column: 2; }
.featured-meta {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px; font-family: var(--mono); font-size: 12px;
}
.featured-date { color: var(--text-5); }
.featured-title {
  font-family: var(--display); font-size: 30px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--herman-color-text);
  margin: 0 0 12px; line-height: 1.15;
}
.featured-desc {
  font-size: 15px; line-height: 1.6; color: var(--text-4);
  margin: 0 0 18px; max-width: 640px;
}
.featured-stack {
  font-family: var(--mono); font-size: 11.5px; color: var(--text-5);
}
.featured-arrow {
  grid-column: 2; align-self: end; text-align: right;
  font-family: var(--mono); font-size: 13px; color: var(--herman-color-brass);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .featured-project { grid-template-columns: 1fr; }
  .featured-cover { grid-column: 1; grid-row: auto; max-width: 100%; margin-bottom: 20px; }
  .featured-body { grid-column: 1; }
  .featured-arrow { grid-column: 1; text-align: left; margin-top: 14px; }
}
.section-list--grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
/* When the project index has an odd number of cards in the grid, the last
   card would render alone in row 3. Make the last card span the full row
   to keep the grid visually balanced. */
.section-list--grid > .section-entry:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
@media (max-width: 900px) { .section-list--grid { grid-template-columns: 1fr; } }

/* ============================================================= */
/* === Refined Terminal 2 · about page rebuild               === */
/* ============================================================= */
.about-lead { padding: 72px 0 32px; max-width: 820px; }
.about-statement {
  font-family: var(--serif); font-size: clamp(36px, 5vw, 54px);
  font-weight: 400; line-height: 1.04; letter-spacing: -0.035em;
  color: var(--herman-color-text); margin: 0 0 28px;
}
.about-lede {
  font-family: var(--serif); font-size: 22px; line-height: 1.6;
  color: var(--text-3); margin: 0 0 22px;
}
.about-lede-2 {
  font-family: var(--serif); font-size: 19px; line-height: 1.75;
  color: var(--text-4); margin: 0 0 32px;
}
.how-i-run { padding: 32px 0 48px; }
.how-i-run-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border-2); border-radius: var(--radius);
  background: var(--surface-1); overflow: hidden;
}
@media (max-width: 900px) { .how-i-run-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .how-i-run-grid { grid-template-columns: 1fr; } }
.how-cell {
  padding: 26px; border-right: 1px solid var(--border-3);
}
.how-cell:last-child { border-right: none; }
@media (max-width: 900px) {
  .how-cell:nth-child(odd) { border-right: 1px solid var(--border-3); }
  .how-cell:nth-child(2), .how-cell:nth-child(4) { border-right: none; }
  .how-cell:nth-child(-n+2) { border-bottom: 1px solid var(--border-3); }
}
@media (max-width: 600px) {
  .how-cell { border-right: none; border-bottom: 1px solid var(--border-3); }
  .how-cell:last-child { border-bottom: none; }
}
.how-label {
  font-family: var(--mono); font-size: 11px; color: var(--text-5);
  margin-bottom: 10px; letter-spacing: 0.12em;
}
.how-value { font-size: 17px; color: var(--herman-color-text); font-weight: 600; margin-bottom: 4px; }
.how-detail { font-family: var(--mono); font-size: 11.5px; color: var(--text-4); }

.operational-history { padding: 32px 0 56px; }
.timeline { display: flex; flex-direction: column; }
.timeline-row {
  display: flex; gap: 20px;
  padding: 16px 0; border-top: 1px solid var(--border-3);
  font-size: 15.5px; color: var(--text-3);
}
.timeline-row:last-child { border-bottom: 1px solid var(--border-3); }
.timeline-date {
  font-family: var(--mono); font-size: 12px; color: var(--herman-color-brass);
  width: 110px; flex-shrink: 0;
}

/* =====================================================================
   REFINED TERMINAL 3 — Field Notes polish (appended, non-refactoring)
   ===================================================================== */

/* --- RT3.1 · Prev/next navigation between notes --- */
.notes-prev-next {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 48px; padding-top: 32px;
  border-top: 1px solid var(--border-3);
}
.notes-prev-next--only-prev { grid-template-columns: minmax(0, 480px); justify-content: start; }
.notes-prev-next--only-next { grid-template-columns: minmax(0, 480px); justify-content: end; }
.notes-prev-next--only-next .pnn-next { text-align: right; }
@media (max-width: 600px) { .notes-prev-next { grid-template-columns: 1fr; } }
.pnn-card {
  display: block;
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 20px 24px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.2s;
}
.pnn-card:hover {
  border-color: var(--herman-color-brass);
  box-shadow: 0 8px 24px var(--accent-glow);
}
@media (prefers-reduced-motion: no-preference) {
  .pnn-card:hover { transform: translateY(-2px); }
}
.pnn-empty { display: none; }
.pnn-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-5);
  margin-bottom: 6px;
}
.pnn-title {
  font-family: var(--display); font-size: 16px; font-weight: 600;
  color: var(--herman-color-text); line-height: 1.35;
}
.pnn-prev { text-align: left; }
.pnn-next { text-align: right; }
.pnn-next .pnn-label { color: var(--herman-color-brass); }

/* --- RT3.2 · Field Notes index — hero metadata rail --- */
.notes-hero {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: stretch;
  padding: 16px 0 20px;
  margin-bottom: 18px;
}
.notes-hero-lead {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.notes-hero-lead .section-description {
  max-width: 38ch;
}
.notes-hero-meta {
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 20px 24px;
  min-width: 0;
}
.nhm-count {
  font-family: var(--display); font-size: 44px; font-weight: 700;
  line-height: 1; color: var(--herman-color-brass); letter-spacing: -0.03em;
}
.nhm-count-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-5);
  margin-top: 4px;
}
.nhm-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border-3);
  min-width: 0;
}
.nhm-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px; border: 1px solid var(--border-1);
  color: var(--text-4);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.nhm-chip-n { color: var(--text-5); font-weight: 500; }
.nhm-rss {
  display: inline-block; margin-top: 16px;
  font-family: var(--mono); font-size: 12px; color: var(--herman-color-brass);
  text-decoration: none;
  transition: opacity 0.15s;
}
.nhm-rss:hover { opacity: 0.75; }
@media (max-width: 900px) {
  .notes-hero { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .notes-hero-meta { min-width: 0; }
}

/* --- RT3.2b · Notes card grid --- */
.section-list--notes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.section-list--notes > .note-entry:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.section-list--notes > .note-entry { margin-bottom: 0; }
@media (max-width: 700px) { .section-list--notes { grid-template-columns: 1fr; } }

.note-entry { display: flex; flex-direction: column; }
.note-entry .entry-title { margin-top: 0; }
.note-entry .entry-summary { flex: 1; }
.note-entry-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border-3);
  font-family: var(--mono); font-size: 12px; color: var(--text-5);
}
.note-entry-dot { color: var(--border-1); }

/* --- RT3.2c · Typographic cover fallback (no image) --- */
.entry-cover--typo {
  display: flex; align-items: center; justify-content: center;
  height: 96px;
  background:
    radial-gradient(circle at 50% 120%, var(--accent-glow), transparent 64%),
    linear-gradient(135deg, var(--surface-2) 0%, var(--surface-1) 100%);
  border-bottom: 1px solid var(--herman-color-border);
  font-family: var(--display);
}
.entry-cover-glyph {
  font-size: clamp(36px, 5vw, 54px); font-weight: 700;
  color: var(--herman-color-brass); opacity: 0.64;
  letter-spacing: -0.05em; text-transform: uppercase;
}

/* --- RT3.3 · Note-type taxonomy label (color-coded by tags[0]) --- */
.note-type {
  display: inline-block;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
  border: 1px solid;
  margin-bottom: 12px;
  align-self: flex-start;
}
.note-type--incident { color: var(--red); border-color: var(--red); background: rgba(239, 107, 107, 0.08); }
.note-type--process  { color: var(--herman-color-brass); border-color: var(--herman-color-border); background: var(--accent-subtle); }
.note-type--meta     { color: var(--text-3); border-color: var(--border-1); }
.note-type--vision   { color: var(--amber); border-color: var(--amber-border); background: var(--amber-bg); }
.note-type--infra    { color: var(--amber); border-color: var(--amber-border); background: var(--amber-bg); }
.note-type--playtest { color: var(--amber); border-color: var(--amber-border); background: var(--amber-bg); }
.note-type--default  { color: var(--herman-color-brass); border-color: var(--herman-color-border); background: var(--accent-subtle); }

/* Tag chips: subtle category tint on the notes index */
.entry-tag--incident { border-color: var(--red); color: var(--red); }
.entry-tag--process, .entry-tag--meta { border-color: var(--herman-color-border); color: var(--herman-color-brass); }
.entry-tag--vision, .entry-tag--infra, .entry-tag--playtest { border-color: var(--amber-border); color: var(--amber); }

/* --- RT3.4 · Callout / pull-quote component --- */
.callout {
  display: flex; gap: 16px;
  margin: 24px 0;
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px solid;
  font-family: var(--body);
  font-size: 15.5px; line-height: 1.6;
  color: var(--text-3);
}
.callout-glyph {
  font-family: var(--mono);
  font-size: 18px; font-weight: 700;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; flex-shrink: 0;
}
.callout-body { flex: 1; min-width: 0; }
.callout-body > :first-child { margin-top: 0; }
.callout-body > :last-child { margin-bottom: 0; }
/* Callouts live inside .prose — normalise inherited serif/size */
.prose .callout,
.prose .callout p,
.prose .callout li {
  font-family: var(--body); font-size: 15.5px; font-style: normal;
}
.callout--note    { background: rgba(111, 194, 170, 0.04); border-color: var(--green-border); }
.callout--note .callout-glyph    { background: var(--green-bg); color: var(--green); }
.callout--warning { background: rgba(240, 184, 79, 0.04); border-color: var(--amber-border); }
.callout--warning .callout-glyph { background: var(--amber-bg); color: var(--amber); }
.callout--key     { background: var(--surface-1); border-color: var(--border-1); border-left: 3px solid var(--herman-color-brass); }
.callout--key .callout-glyph     { background: var(--accent-subtle); color: var(--herman-color-brass); }

/* --- RT3.5 · Code block polish — copy button + chroma token colors --- */
/* chroma wraps highlighted fences in .highlight > pre.chroma; keep block rhythm */
.prose .highlight { margin: 0 0 20px; }
.prose .highlight pre { margin: 0; }
.prose .chroma { color: var(--herman-color-text); background: transparent; }

/* Syntax tokens mapped to the terminal palette (green/amber/dim) */
.prose .chroma .c, .prose .chroma .ch, .prose .chroma .cm,
.prose .chroma .cp, .prose .chroma .cpf, .prose .chroma .c1,
.prose .chroma .cs { color: var(--text-5); font-style: italic; }
.prose .chroma .k, .prose .chroma .kc, .prose .chroma .kd,
.prose .chroma .kn, .prose .chroma .kp, .prose .chroma .kr,
.prose .chroma .kt { color: var(--green); }
.prose .chroma .nb, .prose .chroma .bp,
.prose .chroma .nf, .prose .chroma .fm,
.prose .chroma .na, .prose .chroma .nt { color: var(--green); }
.prose .chroma .s, .prose .chroma .sa, .prose .chroma .sb,
.prose .chroma .sc, .prose .chroma .dl, .prose .chroma .sd,
.prose .chroma .s2, .prose .chroma .se, .prose .chroma .sh,
.prose .chroma .si, .prose .chroma .sx, .prose .chroma .sr,
.prose .chroma .s1, .prose .chroma .ss { color: var(--amber); }
.prose .chroma .m, .prose .chroma .mb, .prose .chroma .mf,
.prose .chroma .mh, .prose .chroma .mi, .prose .chroma .il,
.prose .chroma .mo { color: var(--amber); }
.prose .chroma .o, .prose .chroma .ow { color: var(--text-3); }
.prose .chroma .p, .prose .chroma .pi { color: var(--text-4); }
.prose .chroma .nv, .prose .chroma .vc, .prose .chroma .vg,
.prose .chroma .vi { color: var(--herman-color-text); }

/* Copy-to-clipboard button (injected by code-copy.html) */
.code-copy-btn {
  position: absolute; top: 6px; right: 8px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--text-4); background: var(--surface-1);
  border: 1px solid var(--border-1); border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, opacity 0.15s;
  opacity: 0; /* reveal on hover */
  z-index: 2;
}
.prose pre:hover .code-copy-btn { opacity: 1; }
.code-copy-btn:hover { color: var(--herman-color-brass); border-color: var(--green-border); }
.code-copy-btn:focus-visible { opacity: 1; outline: 2px solid var(--herman-color-amber); outline-offset: 2px; }
@media (max-width: 600px) { .code-copy-btn { opacity: 1; } }

/* ============================================================
   LIVE STATUS DASHBOARD
   ============================================================ */

/* KV rows — used in status cards to render label/value pairs */
.kv-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--border-3);
  font-family: var(--mono); font-size: 12.5px;
  color: var(--text-4);
  gap: 12px;
}
.kv-row:last-child { border-bottom: none; }
.kv-val { color: var(--herman-color-brass); font-weight: 500; white-space: nowrap; }
.kv-aside { color: var(--text-5); font-size: 11.5px; }

/* Banner variants */
.status-banner--ok .status-banner-dot { background: var(--green); box-shadow: 0 0 16px var(--green); }
.status-banner--degraded .status-banner-dot { background: var(--amber); box-shadow: 0 0 16px var(--amber); }
.status-banner--down .status-banner-dot { background: var(--red); box-shadow: 0 0 16px var(--red); animation: hpulse 1.4s ease-in-out infinite; }
.status-banner--unknown .status-banner-dot { background: var(--text-5); box-shadow: none; }

/* Last-updated footnote */
.status-last-updated {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-5);
  margin: -16px 0 32px;
  display: flex; align-items: center; gap: 6px;
}
.status-last-updated::before {
  content: "·";
  color: var(--text-5);
  margin-right: 4px;
}

/* Meter fill variants — extend the existing amber rule */
.meter-fill[data-state="red"] { background: var(--red); }
.meter-fill[data-state="unknown"] { background: var(--text-5); }

/* Service-state --down variant */
.service-state--down { color: var(--red); }
.service-state--down .service-dot { background: var(--red); }

/* Fallback note shown when no metrics yet */
.status-fallback {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-5);
  padding: 14px 0;
  margin: 0;
}
.status-fallback a { color: var(--herman-color-brass); text-decoration: underline; text-underline-offset: 2px; }

/* Banner meta uses inline code for timestamps */
.status-banner-meta code {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-5);
  background: transparent;
  padding: 0;
}

/* Responsive: collapse status grid on small screens */
@media (max-width: 720px) {
  .status-grid { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   === Page banner (RT4.x · page-banner partial)                         ===
   ========================================================================== */
.page-banner {
  padding: 40px 0 32px;
  border-bottom: 1px solid var(--border-1);
  margin-bottom: 32px;
}
.page-banner-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 24px;
}
.page-banner-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-4);
  margin-bottom: 12px;
  text-transform: lowercase;
}
.page-banner-title {
  font-size: 36px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--herman-color-text);
}
.page-banner-lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-3);
  max-width: 720px;
  margin: 0 0 14px;
}
.page-banner-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-5);
}
.page-banner-meta time { color: var(--text-5); }
.page-banner-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  color: var(--text-3);
}

/* Data flavor — monospace + tighter spacing */
.page-banner--data .page-banner-eyebrow {
  color: var(--accent);
}
.page-banner--data .page-banner-title {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 500;
}

/* Research flavor — larger title + citation feel */
.page-banner--research .page-banner-title {
  font-size: 42px;
  font-weight: 600;
}
.page-banner--research .page-banner-eyebrow {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
}

/* ==========================================================================
   === Data page utilities (RT4.x · for research/dashboard sites)         ===
   ========================================================================== */

/* Inline stat block — compact number+label used in research pages */
.stat-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 18px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: 4px;
  margin: 12px 0;
}
.stat-block-value {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 600;
  color: var(--accent);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.stat-block-value .stat-block-unit {
  font-size: 14px;
  color: var(--text-3);
  font-weight: 400;
  margin-left: 2px;
}
.stat-block-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-4);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.stat-block-sub {
  font-size: 12px;
  color: var(--text-5);
  margin-top: 4px;
  line-height: 1.4;
}

/* Data source row — labeled citation with DOI/URL */
.data-source {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: 8px 16px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border-1);
  font-size: 14px;
  line-height: 1.5;
}
.data-source:last-child { border-bottom: 0; }
.data-source-name {
  font-weight: 600;
  color: var(--herman-color-text);
}
.data-source-id {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-4);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.data-source-id code {
  font-size: 11.5px;
  background: var(--bg-2);
  padding: 1px 6px;
  border-radius: 3px;
}
.data-source-url {
  color: var(--accent);
  text-decoration: none;
}
.data-source-url:hover { text-decoration: underline; }
.data-source-desc {
  grid-column: 1 / -1;
  color: var(--text-3);
  font-size: 13px;
  margin-top: 2px;
  padding-left: 0;
}
@media (min-width: 720px) {
  .data-source-desc { grid-column: 2; padding-left: 16px; }
}

/* Callout — shortcode-style info panel (markdown friendly) */
.callout-info,
.callout-warn,
.callout-key {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 18px;
  margin: 18px 0;
  border-left: 3px solid var(--accent);
  background: var(--bg-2);
  border-radius: 0 4px 4px 0;
  font-size: 14px;
  line-height: 1.5;
}
.callout-warn { border-left-color: #f59e0b; }
.callout-key  { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--bg-2)); }
.callout-info::before { content: "ⓘ"; color: var(--accent); font-size: 16px; }
.callout-warn::before { content: "⚠"; color: #f59e0b; font-size: 14px; }
.callout-key::before  { content: "★"; color: var(--accent); font-size: 14px; }

/* Eyebrow shortcode variants (lowercase vs uppercase) */
.eyebrow--lowercase {
  text-transform: lowercase;
  letter-spacing: 0.06em;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-4);
  margin: 0 0 8px;
  display: inline-block;
}
.eyebrow--uppercase {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 500;
}

/* Data-page wrapper — opt-in via `banner: { flavor: data }` */
.prose--data { font-size: 15px; }
.prose--data h2 { font-family: var(--mono); font-size: 18px; font-weight: 600; letter-spacing: 0; }
.prose--data h2::before { content: "## "; color: var(--accent); }
.prose--data h3 { font-size: 16px; }
.prose--data table {
  font-family: var(--mono);
  font-size: 12.5px;
}
.prose--data table th {
  background: var(--bg-2);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}

/* page-article --no-banner removes top padding when banner is suppressed */
.page-article--no-banner { padding-top: 8px; }

/* Mobile */
@media (max-width: 720px) {
  .page-banner { padding: 24px 0 20px; }
  .page-banner-title { font-size: 26px; }
  .page-banner--research .page-banner-title { font-size: 30px; }
  .page-banner--data .page-banner-title { font-size: 20px; }
  .data-source { grid-template-columns: 1fr; }
  .data-source-desc { padding-left: 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .page-banner,
  .stat-block,
  .data-source { transition: none; }
}

/* ============================================================
   Section-band primitive
   ------------------------------------------------------------
   Use: <section class="band band--<name>"><div class="band-inner">
   Children:
     .band-head   = title + lede cluster (optional)
     .band-grid   = grid container (auto-flow columns)
     .band-cta    = action buttons
   ============================================================ */
.band {
  padding: 64px 0;
  border-bottom: 1px solid var(--border);
}
.band:last-of-type { border-bottom: 0; }
.band-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.band-head {
  margin-bottom: 32px;
  max-width: 720px;
}
.band-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-block;
  margin-bottom: 16px;
}
.band-title {
  font-size: 32px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.band-title em,
.band-title .accent {
  color: var(--accent);
  font-style: italic;
}
.band-lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-3);
  margin: 0;
}
.band-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.band-cta--center { justify-content: center; }

@media (max-width: 720px) {
  .band { padding: 48px 0; }
  .band-title { font-size: 28px; }
}

/* ==========================================================================
   HERMANITY v2 — CLOCKWORK OWL  (authoritative token layer + components)
   Spec: docs/CLOCKWORK-OWL-V2.md
   Appended last so these token *values* win the cascade. Component rules
   above consume the namespaced roles (or the rebased legacy names below).
   ========================================================================== */
:root {
  /* --- §3 Canonical namespaced semantic palette (exact) --- */
  --herman-color-canvas: #08111f;
  --herman-color-surface: #0d1828;
  --herman-color-surface-raised: #132238;
  --herman-color-surface-strong: #1b2c45;
  --herman-color-text: #f2ead8;
  --herman-color-text-muted: #c9bea5;
  --herman-color-text-subtle: #918973;
  --herman-color-brass: #c8a55f;
  --herman-color-amber: #e2a84d;
  --herman-color-bronze: #8f6836;
  --herman-color-positive: #6fc2aa;
  --herman-color-info: #78add8;
  --herman-color-warning: #e7bd68;
  --herman-color-danger: #e47b70;
  --herman-color-border: rgba(200, 165, 95, 0.28);
  --herman-color-border-strong: rgba(200, 165, 95, 0.58);

  /* --- §5 Typography roles (system stacks; no remote font dependency) --- */
  --herman-font-display: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', 'Palatino', 'Georgia', serif;
  --herman-font-body: 'Inter', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --herman-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;

  /* Rebind the theme's font variables onto the v2 roles (mono retained) */
  --display: var(--herman-font-display);
  --serif:   var(--herman-font-display);
  --body:    var(--herman-font-body);
  --mono:    var(--herman-font-mono);
  --font-mono: var(--herman-font-mono);

  /* DEPRECATED(v2): v1 compatibility aliases. Do not remove before Hermanity
     v3.0.0 and only after a consumer audit. Migration targets are enumerated
     in docs/CLOCKWORK-OWL-V2.md and CHANGELOG.md. */
  --bg-0: var(--herman-color-canvas);
  --bg-1: var(--herman-color-surface);
  --bg-2: var(--herman-color-surface-raised);
  --bg-3: var(--herman-color-surface-strong);
  --text-0: var(--herman-color-text);
  --text-1: var(--herman-color-text);
  --text-2: var(--herman-color-text);
  --green:  var(--herman-color-positive);
  --cyan:   var(--herman-color-info);
  --purple: var(--herman-color-brass);
  --red:    var(--herman-color-danger);
  --yellow: var(--herman-color-warning);
  --border: var(--herman-color-border);
  --border-strong: var(--herman-color-border-strong);

  /* --- Rebased internal palette names used by existing components --- */
  --surface-1: var(--herman-color-surface);
  --surface-2: var(--herman-color-surface-raised);
  --surface-3: var(--herman-color-surface-strong);
  --text-3: var(--herman-color-text-muted);
  --text-4: var(--herman-color-text-subtle);
  --text-5: var(--herman-color-text-subtle);
  --border-1: rgba(200, 165, 95, 0.45);
  --border-2: rgba(200, 165, 95, 0.22);
  --border-3: rgba(200, 165, 95, 0.14);

  --amber:  var(--herman-color-warning);
  --amber-bg: rgba(231, 189, 104, 0.08);
  --amber-border: rgba(231, 189, 104, 0.34);
  --green-bg: rgba(111, 194, 170, 0.08);
  --green-border: rgba(111, 194, 170, 0.32);

  /* Brand decoration tokens repointed to aged brass (no neon) */
  --accent: var(--herman-color-brass);
  --accent-dim: rgba(200, 165, 95, 0.42);
  --accent-glow: rgba(200, 165, 95, 0.08);
  --accent-line: rgba(200, 165, 95, 0.14);
  --accent-subtle: rgba(200, 165, 95, 0.06);
}

/* --- §7 Root canvas: restrained material background (brass, not neon) --- */
body::before {
  background-image:
    radial-gradient(ellipse at 50% -10%, rgba(200, 165, 95, 0.05), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(143, 104, 54, 0.05), transparent 45%),
    radial-gradient(circle, rgba(242, 234, 216, 0.02) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 24px 24px;
  background-position: center top, right bottom, center center;
}

/* --- Wordmark: institutional serif, brass; packaged image icon to the left --- */
.logo { font-family: var(--herman-font-display); color: var(--herman-color-text); gap: 8px; }
.logo-text { letter-spacing: 0.06em; font-weight: 600; }
.logo-bracket { color: var(--herman-color-brass); }

/* --- §6/§7 Hero observatory / study panel (replaces neon terminal) --- */
.hero-observatory {
  padding: 26px 28px;
  border-color: var(--herman-color-border);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}
.hero-observatory::before,
.hero-observatory::after { display: none; content: none; }
.obs-frame {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--herman-color-border);
}
.obs-mark { color: var(--herman-color-brass); }
.obs-title {
  font-family: var(--herman-font-display);
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--herman-color-text);
}
.obs-readout { margin: 0; font-family: var(--mono); font-size: 13px; }
.obs-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--herman-color-border);
}
.obs-row:last-child { border-bottom: none; }
.obs-row dt {
  color: var(--herman-color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}
.obs-row dd { margin: 0; color: var(--herman-color-text); text-align: right; }
.obs-status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--herman-color-positive);
  margin-right: 8px;
  vertical-align: middle;
}

/* --- Explicit semantic state selectors (positive/info/warning/danger) --- */
.state-positive { color: var(--herman-color-positive); }
.state-info     { color: var(--herman-color-info); }
.state-warning  { color: var(--herman-color-warning); }
.state-danger   { color: var(--herman-color-danger); }
.state-positive-dot,
.state-info-dot,
.state-warning-dot,
.state-danger-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  vertical-align: middle;
}
.state-positive-dot { background: var(--herman-color-positive); }
.state-info-dot     { background: var(--herman-color-info); }
.state-warning-dot  { background: var(--herman-color-warning); }
.state-danger-dot   { background: var(--herman-color-danger); }

/* --- §8 Forced-colors / high-contrast: keep brand, links, focus, nav,
       table borders and controls discernible without relying on color --- */
@media (forced-colors: active) {
  a, .footer-link, .footer-link--back, .nav-link, .recent-all,
  .entry-more, .rail-repo, .nhm-rss, .btn { forced-color-adjust: none; }
  a, .footer-link, .footer-link--back { color: LinkText; }
  .btn--primary { background: ButtonText; color: ButtonFace; border: 1px solid ButtonText; }
  .btn--ghost { border: 1px solid ButtonText; color: ButtonText; }
  .nav-link.active { color: Highlight; text-decoration: underline; }
  a:focus-visible, button:focus-visible, .nav-link:focus-visible,
  .skip-link:focus, .back-to-top:focus-visible, .code-copy-btn:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
  .prose th, .prose td, .status-card, .stat-card, .project-card,
  .section-entry, .rail-card, .callout { border-color: CanvasText; }
  .status-dot, .status-banner-dot, .service-dot, .obs-status-dot,
  .state-positive-dot, .state-info-dot, .state-warning-dot, .state-danger-dot {
    border: 1px solid CanvasText;
  }
}

/* --- §8 Print: drop decorative material; keep evidence legible --- */
@media print {
  body { background: #fff; color: #000; }
  body::before, body::after, .scroll-progress, .back-to-top,
  .hero-terminal::after, .hero-terminal::before, .terminal-body::after,
  .site-footer::before, .page-glow-rule { display: none !important; background: none !important; }
  .hero-terminal, .hero-observatory, .stat-card, .project-card,
  .section-entry, .status-card, .rail-card, .callout, pre {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #999 !important;
    box-shadow: none !important;
  }
  a, .footer-link, .footer-link--back { color: #000; text-decoration: underline; }
  h1, h2, h3, h4, h5, h6, .hero-headline, .section-title, .article-title,
  .obs-title, .logo-text { color: #000; }
  .prose th, .prose td { border-bottom: 1px solid #999; color: #000; }
}

/* ==========================================================================
   CLOCKWORK-OWL v2 — CONSOLIDATION LAYER (Swarm rollout)
   Approved restrained typographic HERMAN identity (apex hermanity.dev parity),
   which retires the keyhole owl glyph from the rendered shell, plus reusable
   child primitives promoted into the theme so consuming sites never re-declare
   framework CSS. See docs/CLOCKWORK-OWL-V2.md and CHANGELOG.md.
   ========================================================================== */

/* Typographic brand lettermark (header + footer), article eyebrow, and wide
   prose measure. Pure type with no per-site image asset, so every child
   inherits the identity by vendoring the theme. The lettermark uses the brass
   brand role (never a state color). Eyebrow and wide-prose are generic child
   primitives promoted from the former child-local rules. The forced-colors
   reset leads so each themed selector below begins at a clean rule boundary. */
@media (forced-colors: active) {
  .logo-lettermark { color: LinkText; text-shadow: none; }
  .footer-lettermark { color: LinkText; text-shadow: none; }
}
.logo-lettermark {
  color: var(--herman-color-brass);
  font-family: var(--herman-font-mono);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-shadow: 0 0 16px rgba(200, 165, 95, 0.16);
  -webkit-user-select: none;
  user-select: none;
}
.footer-lettermark {
  color: var(--herman-color-brass);
  font-family: var(--herman-font-mono);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.08em;
  text-shadow: 0 0 18px rgba(200, 165, 95, 0.18);
  -webkit-user-select: none;
  user-select: none;
}
.article-eyebrow {
  font-family: var(--herman-font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--herman-color-text-subtle);
  margin-bottom: 12px;
}
.prose--wide { max-width: 820px; }

/* Cinematic identity hero + packaged image header icon (apex hermanity.dev
   parity). The banner art is served through the reusable responsive-cover
   partial and defaults to the packaged Clockwork-Owl banner. Ordered so each
   themed selector below begins at a clean rule boundary. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.18fr);
  gap: clamp(40px, 4vw, 52px);
  align-items: center;
}
.hero-copy { min-width: 0; }
.hero-headline { font-size: clamp(40px, 4.4vw, 52px); }
.responsive-cover {
  display: block;
  width: 100%;
}
.herman-header-icon {
  display: block;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  object-fit: cover;
  border: 1px solid var(--herman-color-border-strong);
  border-radius: 50%;
  background: #050a12;
  box-shadow: 0 0 0 2px rgba(8, 17, 31, 0.9), 0 0 22px rgba(226, 168, 77, 0.15);
}
.hero-identity-module {
  display: grid;
  grid-template-rows: auto auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--herman-color-border);
  border-radius: 3px;
  background: #07101d;
  box-shadow: 0 30px 72px rgba(0, 0, 0, 0.42), 0 0 80px rgba(200, 165, 95, 0.065);
}
.hero-owl-banner {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #030812;
}
.hero-owl-banner .responsive-cover,
.hero-owl-banner img {
  display: block;
  width: 100%;
  max-width: 100%;
}
.hero-owl-banner img {
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.02) contrast(1.035);
}
.hero-banner-caption {
  position: absolute;
  left: 18px;
  bottom: 16px;
  padding: 6px 9px;
  border: 1px solid var(--herman-color-border-strong);
  background: rgba(5, 10, 18, 0.76);
  color: var(--herman-color-brass);
  font-family: var(--herman-font-mono);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.16em;
  backdrop-filter: blur(8px);
}
.hero-identity-module .hero-observatory {
  position: static;
  margin: 0;
  padding: 18px 20px 16px;
  border: 0;
  border-top: 1px solid var(--herman-color-border);
  border-radius: 0;
  background: rgba(8, 17, 31, 0.98);
  box-shadow: none;
  backdrop-filter: none;
}
.hero-identity-module .hero-live-pill {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: transparent;
}
.hero-identity-module .obs-frame {
  padding-bottom: 9px;
  margin-bottom: 0;
}
.hero-identity-module .obs-title { font-size: 15px; }
.hero-identity-module .obs-readout { font-size: 11px; }
.hero-identity-module .obs-row { padding: 6px 0; }
.hero-identity-module .obs-row dd {
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-identity-module { max-width: 760px; }
}
@media (max-width: 560px) {
  .herman-header-icon { width: 36px; height: 36px; flex-basis: 36px; }
  .hero-banner-caption { left: 12px; bottom: 12px; }
  .hero-identity-module .hero-observatory { padding: 16px 14px 14px; }
  .hero-identity-module .obs-row dd { max-width: 66%; }
}

/* Reusable source-freshness contract. Sites opt in with params.liveness.enabled
   and data/liveness.json; no child stylesheet or base template fork required. */
.liveness-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 4px;
  padding: 8px 14px;
  border: 1px solid;
  border-radius: var(--radius-sm);
  font-family: var(--herman-font-mono);
  font-size: 12.5px;
  letter-spacing: .02em;
}
.liveness-banner b { font-weight: 700; letter-spacing: .08em; }
.liveness-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.liveness-banner[data-liveness-state="current"] {
  border-color: color-mix(in srgb, var(--herman-color-positive) 40%, transparent);
  color: var(--herman-color-positive);
  background: color-mix(in srgb, var(--herman-color-positive) 7%, transparent);
}
.liveness-banner[data-liveness-state="current"] .liveness-dot {
  background: var(--herman-color-positive);
  animation: liveness-pulse 2s infinite;
}
.liveness-banner[data-liveness-state="stale"] {
  border-color: color-mix(in srgb, var(--herman-color-warning) 48%, transparent);
  color: var(--herman-color-warning);
  background: color-mix(in srgb, var(--herman-color-warning) 8%, transparent);
}
.liveness-banner[data-liveness-state="stale"] .liveness-dot { background: var(--herman-color-warning); }
.liveness-banner[data-liveness-state="paused"],
.liveness-banner[data-liveness-state="unknown"] {
  border-color: color-mix(in srgb, var(--herman-color-danger) 50%, transparent);
  color: var(--herman-color-danger);
  background: color-mix(in srgb, var(--herman-color-danger) 8%, transparent);
}
.liveness-banner[data-liveness-state="paused"] .liveness-dot,
.liveness-banner[data-liveness-state="unknown"] .liveness-dot { background: var(--herman-color-danger); }
@keyframes liveness-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.hero-live-pill[data-liveness-state="stale"] { color: var(--herman-color-warning); }
.hero-live-pill[data-liveness-state="stale"] .hero-live-pill-dot { background: var(--herman-color-warning); animation: none; }
.hero-live-pill[data-liveness-state="paused"],
.hero-live-pill[data-liveness-state="unknown"] { color: var(--herman-color-danger); }
.hero-live-pill[data-liveness-state="paused"] .hero-live-pill-dot,
.hero-live-pill[data-liveness-state="unknown"] .hero-live-pill-dot { background: var(--herman-color-danger); animation: none; }