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

/* ── Base — Charcoal + Amber ── */
body {
  font-family: 'IBM Plex Sans', sans-serif;
  background: #1a1a2e;
  color: #e0e0e0;
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

.container {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 1.5rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

/* ── Waterfall Background ── */
.waterfall {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.drop {
  position: absolute;
  top: -60px;
  width: 28px;
  height: 28px;
  opacity: 0.11;
  animation: fall linear infinite;
}

/* Negative delays = icons already distributed across viewport on load. */
.d1  { left:  3%; animation-duration: 15.3s; animation-delay: -7s;   width: 24px; height: 24px; }
.d2  { left:  9%; animation-duration: 18.7s; animation-delay: -3s;   width: 30px; height: 30px; }
.d3  { left: 15%; animation-duration: 13.6s; animation-delay: -11s;  width: 20px; height: 20px; }
.d4  { left: 21%; animation-duration: 21.3s; animation-delay: -16s;  width: 26px; height: 26px; }
.d5  { left: 27%; animation-duration: 16.2s; animation-delay: -5s;   width: 32px; height: 32px; }
.d6  { left: 33%; animation-duration: 19.6s; animation-delay: -14s;  width: 22px; height: 22px; }
.d7  { left: 39%; animation-duration: 14.5s; animation-delay: -9s;   width: 28px; height: 28px; }
.d8  { left: 44%; animation-duration: 17.9s; animation-delay: -1s;   width: 24px; height: 24px; }
.d9  { left: 50%; animation-duration: 17s;   animation-delay: -12s;  width: 30px; height: 30px; }
.d10 { left: 55%; animation-duration: 20.4s; animation-delay: -18s;  width: 20px; height: 20px; }
.d11 { left: 60%; animation-duration: 15.3s; animation-delay: -4s;   width: 26px; height: 26px; }
.d12 { left: 65%; animation-duration: 18.7s; animation-delay: -10s;  width: 34px; height: 34px; }
.d13 { left: 70%; animation-duration: 12.8s; animation-delay: -6s;   width: 22px; height: 22px; }
.d14 { left: 75%; animation-duration: 22.1s; animation-delay: -15s;  width: 28px; height: 28px; }
.d15 { left: 80%; animation-duration: 16.2s; animation-delay: -2s;   width: 24px; height: 24px; }
.d16 { left: 85%; animation-duration: 17.9s; animation-delay: -13s;  width: 30px; height: 30px; }
.d17 { left: 90%; animation-duration: 14.5s; animation-delay: -8s;   width: 20px; height: 20px; }
.d18 { left: 95%; animation-duration: 19.6s; animation-delay: -17s;  width: 26px; height: 26px; }
.d19 { left:  6%; animation-duration: 17s;   animation-delay: -11s;  width: 22px; height: 22px; }
.d20 { left: 12%; animation-duration: 20.4s; animation-delay: -6s;   width: 32px; height: 32px; }
.d21 { left: 18%; animation-duration: 13.6s; animation-delay: -3s;   width: 26px; height: 26px; }
.d22 { left: 24%; animation-duration: 21.3s; animation-delay: -19s;  width: 20px; height: 20px; }
.d23 { left: 36%; animation-duration: 15.3s; animation-delay: -8s;   width: 28px; height: 28px; }
.d24 { left: 48%; animation-duration: 18.7s; animation-delay: -14s;  width: 24px; height: 24px; }
.d25 { left: 53%; animation-duration: 16.2s; animation-delay: -2s;   width: 30px; height: 30px; }
.d26 { left: 63%; animation-duration: 17.9s; animation-delay: -10s;  width: 22px; height: 22px; }
.d27 { left: 72%; animation-duration: 14.5s; animation-delay: -5s;   width: 26px; height: 26px; }
.d28 { left: 78%; animation-duration: 19.6s; animation-delay: -16s;  width: 34px; height: 34px; }
.d29 { left: 88%; animation-duration: 17s;   animation-delay: -9s;   width: 22px; height: 22px; }
.d30 { left: 93%; animation-duration: 12.8s; animation-delay: -7s;   width: 28px; height: 28px; }
.d31 { left: 42%; animation-duration: 22.1s; animation-delay: -13s;  width: 24px; height: 24px; }
.d32 { left: 57%; animation-duration: 15.3s; animation-delay: -4s;   width: 20px; height: 20px; }
.d33 { left: 31%; animation-duration: 16.8s; animation-delay: -11s;  width: 24px; height: 24px; }
.d34 { left: 68%; animation-duration: 19.2s; animation-delay: -7s;   width: 26px; height: 26px; }
.d35 { left: 82%; animation-duration: 14.1s; animation-delay: -3s;   width: 22px; height: 22px; }
.d36 { left: 46%; animation-duration: 20.8s; animation-delay: -15s;  width: 28px; height: 28px; }
.d37 { left: 16%; animation-duration: 15.8s; animation-delay: -9s;   width: 20px; height: 20px; }
.d38 { left: 74%; animation-duration: 18.2s; animation-delay: -13s;  width: 30px; height: 30px; }
.d39 { left:  1%; animation-duration: 17.4s; animation-delay: -6s;   width: 22px; height: 22px; }
.d40 { left:  8%; animation-duration: 14.8s; animation-delay: -12s;  width: 26px; height: 26px; }
.d41 { left: 20%; animation-duration: 19.1s; animation-delay: -2s;   width: 20px; height: 20px; }
.d42 { left: 29%; animation-duration: 16.5s; animation-delay: -14s;  width: 30px; height: 30px; }
.d43 { left: 35%; animation-duration: 21.5s; animation-delay: -8s;   width: 24px; height: 24px; }
.d44 { left: 41%; animation-duration: 13.9s; animation-delay: -10s;  width: 28px; height: 28px; }
.d45 { left: 52%; animation-duration: 18.3s; animation-delay: -4s;   width: 22px; height: 22px; }
.d46 { left: 59%; animation-duration: 15.6s; animation-delay: -16s;  width: 26px; height: 26px; }
.d47 { left: 66%; animation-duration: 20.1s; animation-delay: -1s;   width: 20px; height: 20px; }
.d48 { left: 71%; animation-duration: 14.3s; animation-delay: -11s;  width: 32px; height: 32px; }
.d49 { left: 79%; animation-duration: 17.7s; animation-delay: -7s;   width: 24px; height: 24px; }
.d50 { left: 84%; animation-duration: 19.8s; animation-delay: -15s;  width: 22px; height: 22px; }
.d51 { left: 91%; animation-duration: 13.5s; animation-delay: -5s;   width: 28px; height: 28px; }
.d52 { left: 97%; animation-duration: 16.9s; animation-delay: -18s;  width: 20px; height: 20px; }
.d53 { left: 26%; animation-duration: 20.6s; animation-delay: -9s;   width: 26px; height: 26px; }

@keyframes fall {
  0% {
    transform: translateY(-60px) rotate(0deg);
    opacity: 0;
  }
  3% {
    opacity: 0.11;
  }
  92% {
    opacity: 0.11;
  }
  100% {
    transform: translateY(110vh) rotate(25deg);
    opacity: 0;
  }
}

/* ── Header ── */
header {
  padding: 2.5rem 0 2rem;
  border-bottom: 1px solid #2a2a4a;
}

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.site-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.15rem;
  font-weight: 600;
  color: #ff9500;
  text-decoration: none;
  letter-spacing: -0.02em;
  transition: color 0.15s;
}

.site-title:hover {
  color: #ffb347;
}

nav {
  display: flex;
  gap: 1.5rem;
}

nav a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  color: #888;
  text-decoration: none;
  transition: color 0.15s;
}

nav a:hover {
  color: #ff9500;
}

/* ── Main ── */
main {
  flex: 1;
  padding: 2.5rem 0;
}

/* ── Posts list — git log ── */
.git-log-section {
  margin-bottom: 2rem;
}

.git-log-cmd {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  color: #888;
  background: #12122a;
  padding: 0.75rem 1.25rem;
  border-radius: 8px 8px 0 0;
  border: 1px solid #2a2a4a;
  border-bottom: none;
}

.git-log {
  background: #12122a;
  border: 1px solid #2a2a4a;
  border-radius: 0 0 8px 8px;
  padding: 0.5rem 0;
}

.git-log-entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.55rem 1.25rem;
  text-decoration: none;
  font-family: 'IBM Plex Mono', 'Fira Code', monospace;
  font-feature-settings: "liga" 1, "calt" 1;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #d4d4d4;
  transition: background 0.15s;
}

.git-log-entry:hover {
  background: #1e1e3a;
}

.git-hash {
  color: #4fd1c5;
  font-weight: 600;
  min-width: 0;
}

.git-msg {
  color: #ff9500;
  font-weight: 500;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.git-log-entry:hover .git-msg {
  color: #ffb347;
}

.git-date {
  color: #666;
  font-style: italic;
  white-space: nowrap;
}

/* ── Article ── */
article h2 {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0;
  color: #e0e0e0;
}

/* YAML Frontmatter */
.yaml-frontmatter {
  background: #12122a;
  border: 1px solid #2a2a4a;
  border-radius: 8px;
  padding: 1rem 1.5rem;
  margin-bottom: 2rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  line-height: 1.8;
}

.yaml-delimiter {
  color: #555;
}

.yaml-line {
  padding-left: 0.5rem;
}

.yaml-key {
  color: #ff9500;
}

.yaml-string {
  color: #28c840;
}

.yaml-value {
  color: #e0e0e0;
}

.yaml-status {
  color: #28c840;
  font-weight: 500;
}

.content {
  margin-top: 1rem;
}

.content h1, .content h2, .content h3,
.content h4, .content h5, .content h6 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: #e0e0e0;
}

.content h1 { font-size: 1.5rem; }
.content h2 { font-size: 1.3rem; }
.content h3 { font-size: 1.1rem; }

.content p {
  margin-bottom: 1.25rem;
}

.content ul, .content ol {
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}

.content li {
  margin-bottom: 0.35rem;
}

.content a {
  color: #ff9500;
  text-decoration: underline;
  text-decoration-color: #664400;
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s;
}

.content a:hover {
  text-decoration-color: #ff9500;
}

.content blockquote {
  border-left: 3px solid #ff9500;
  margin: 1.5rem 0;
  padding: 0.5rem 0 0.5rem 1.25rem;
  color: #aaa;
  font-style: italic;
}

.content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 1.5rem 0;
}

/* ── Code blocks ── */
.content code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.88em;
  background: #252545;
  color: #ffb347;
  padding: 0.15em 0.4em;
  border-radius: 3px;
}

.content pre {
  background: #12122a;
  color: #d4d4d4;
  padding: 1.25rem 1.5rem;
  border-radius: 6px;
  overflow-x: auto;
  margin: 1.5rem 0;
  line-height: 1.5;
  font-size: 0.88rem;
  border: 1px solid #2a2a4a;
}

.content pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
}

/* ── Tables ── */
.content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}

.content th, .content td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid #2a2a4a;
}

.content th {
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #888;
}

/* ── Back link ── */
.back-link {
  display: inline-block;
  margin-top: 2.5rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  color: #666;
  text-decoration: none;
  transition: color 0.15s;
}

.back-link:hover {
  color: #ff9500;
}

/* ══════════════════════════════════
   About Page
   ══════════════════════════════════ */

/* Terminal Boot */
.boot-terminal {
  background: #12122a;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 2.5rem;
  border: 1px solid #2a2a4a;
}

.terminal-header {
  background: #1e1e3a;
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

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

.terminal-dot.red { background: #ff5f57; }
.terminal-dot.yellow { background: #ffbd2e; }
.terminal-dot.green { background: #28c840; }

.terminal-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  color: #666;
  margin-left: 0.5rem;
}

.terminal-body {
  padding: 1.25rem 1.5rem;
}

.boot-line {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  color: #d4d4d4;
  line-height: 1.8;
  opacity: 0;
  transform: translateY(4px);
  animation: bootIn 0.3s forwards;
}

.boot-line .prompt { color: #555; }
.boot-line .bar { color: #ff9500; }
.boot-line .ok { color: #28c840; }
.boot-line .warn { color: #ffbd2e; }
.boot-line .err { color: #ff5f57; }
.boot-line .dim { color: #555; }

.line-1 { animation-delay: 0.3s; }
.line-2 { animation-delay: 0.8s; }
.line-3 { animation-delay: 1.3s; }
.line-4 { animation-delay: 1.8s; }
.line-5 { animation-delay: 2.3s; }
.line-6 { animation-delay: 2.8s; }
.line-7 { animation-delay: 3.5s; }

@keyframes bootIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Glitch Name */
.about-bio {
  margin-bottom: 2.5rem;
  text-align: center;
}

.glitch-name {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 2rem;
  font-weight: 700;
  color: #ff9500;
  position: relative;
  display: inline-block;
  letter-spacing: -0.02em;
}

.glitch-name:hover {
  animation: glitch 0.4s steps(2) infinite;
}

.glitch-name:hover::before,
.glitch-name:hover::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch-name:hover::before {
  color: #ff5f57;
  clip-path: inset(0 0 60% 0);
  animation: glitchTop 0.4s steps(2) infinite;
}

.glitch-name:hover::after {
  color: #28c840;
  clip-path: inset(60% 0 0 0);
  animation: glitchBottom 0.4s steps(2) infinite;
}

@keyframes glitch {
  0% { transform: translate(0); }
  25% { transform: translate(-2px, 1px); }
  50% { transform: translate(2px, -1px); }
  75% { transform: translate(-1px, -1px); }
  100% { transform: translate(0); }
}

@keyframes glitchTop {
  0% { transform: translate(0); }
  25% { transform: translate(3px, 0); }
  50% { transform: translate(-3px, 0); }
  75% { transform: translate(2px, 0); }
  100% { transform: translate(0); }
}

@keyframes glitchBottom {
  0% { transform: translate(0); }
  25% { transform: translate(-3px, 0); }
  50% { transform: translate(3px, 0); }
  75% { transform: translate(-2px, 0); }
  100% { transform: translate(0); }
}

.bio-tagline {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  color: #888;
  margin-top: 0.5rem;
}

/* Status Dashboard */
.status-dashboard {
  background: #12122a;
  border-radius: 8px;
  padding: 1.5rem 2rem;
  margin-bottom: 2.5rem;
  border: 1px solid #2a2a4a;
}

.dash-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  text-transform: none;
  letter-spacing: 0;
  color: #ff9500;
  margin-bottom: 0.35rem;
}

.dash-caption {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  color: #666;
  margin-bottom: 0.85rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #2a2a4a;
}

.dash-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dash-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
}

.dash-label {
  color: #888;
}

.dash-value {
  font-weight: 500;
}

.dash-ok { color: #28c840; }
.dash-warn { color: #ffbd2e; }
.dash-err { color: #ff5f57; }

.dash-row:hover .dash-value {
  animation: pulse 0.6s ease-in-out;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* kubectl Skills Table */
.kubectl-section {
  margin-bottom: 2.5rem;
}

.kubectl-cmd {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  color: #888;
  background: #12122a;
  padding: 0.75rem 1.25rem;
  border-radius: 8px 8px 0 0;
  margin-bottom: 0;
  border: 1px solid #2a2a4a;
  border-bottom: none;
}

.kubectl-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  background: #12122a;
  border: 1px solid #2a2a4a;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

.kubectl-table thead th {
  background: #1e1e3a;
  text-align: left;
  padding: 0.6rem 1rem;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #ff9500;
  border-bottom: 1px solid #2a2a4a;
}

.kubectl-table tbody td {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #1e1e3a;
  color: #e0e0e0;
}

.kubectl-table tbody tr:last-child td {
  border-bottom: none;
}

.kubectl-table tbody tr:hover {
  background: #1e1e3a;
}

.kubectl-table .status-running { color: #28c840; font-weight: 500; }
.kubectl-table .status-pending { color: #ffbd2e; font-weight: 500; }
.kubectl-table .status-creating { color: #3b82f6; font-weight: 500; }
.kubectl-table .status-crash { color: #ff5f57; font-weight: 500; }

/* Interests */
.about-interests {
  margin-bottom: 2rem;
}

.about-interests h2 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #e0e0e0;
}

.about-interests ul {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.about-interests li {
  margin-bottom: 0.4rem;
  position: relative;
}

.about-interests .dim {
  color: #666;
}

.redacted {
  background: #ff9500;
  color: #ff9500;
  padding: 0 0.3em;
  border-radius: 2px;
  transition: all 0.3s;
  cursor: pointer;
}

.redacted:hover {
  background: transparent;
  color: #ff5f57;
}

.classified-footnote {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  color: #666;
  margin-top: 0.2rem;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s, transform 0.3s;
}

.about-interests li:hover .classified-footnote {
  opacity: 1;
  transform: translateY(0);
}

.interests-note {
  color: #666;
  font-size: 0.95rem;
  font-style: italic;
}

/* Fears */
.about-fears {
  margin-bottom: 2rem;
  font-weight: 600;
}

.fear-text {
  color: #ff5f57;
  font-weight: 700;
  transition: all 0.1s;
}

.fear-text:hover {
  animation: shake 0.4s ease-in-out;
  text-decoration: line-through;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-4px); }
  20% { transform: translateX(4px); }
  30% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  50% { transform: translateX(-3px); }
  60% { transform: translateX(3px); }
  70% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
  90% { transform: translateX(-1px); }
}

/* Credits */
.about-credits {
  padding-top: 1.5rem;
  border-top: 1px solid #2a2a4a;
}

.about-credits .dim {
  font-size: 0.9rem;
  color: #666;
}

/* ══════════════════════════════════
   Contact Page — Service Endpoints
   ══════════════════════════════════ */

.contact-page {
  margin-bottom: 2rem;
}

.endpoint-terminal {
  background: #12122a;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  border: 1px solid #2a2a4a;
  border-bottom: none;
}

.endpoint-terminal .terminal-body {
  padding: 0.75rem 1.25rem;
}

.endpoint-cmd {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  color: #888;
}

.endpoint-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  background: #12122a;
  border: 1px solid #2a2a4a;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.endpoint-table thead th {
  background: #1e1e3a;
  text-align: left;
  padding: 0.6rem 1rem;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #ff9500;
  border-bottom: 1px solid #2a2a4a;
}

.endpoint-table tbody td {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid #1e1e3a;
  color: #e0e0e0;
}

.endpoint-table tbody tr:last-child td {
  border-bottom: none;
}

.endpoint-table tbody tr:hover {
  background: #1e1e3a;
}

.method-get {
  color: #28c840;
  font-weight: 600;
}

.method-post {
  color: #ffbd2e;
  font-weight: 600;
}

.status-ok {
  color: #28c840;
  font-weight: 500;
}

.status-err {
  color: #ff5f57;
  font-weight: 500;
}

.endpoint-link {
  color: #e0e0e0;
  text-decoration: none;
  transition: color 0.15s;
}

.endpoint-link:hover {
  color: #ff9500;
}

.endpoint-dead {
  color: #555;
  text-decoration: line-through;
}

.latency {
  color: #888;
}

.latency-dead {
  color: #ff5f57;
  font-weight: 500;
}

.endpoint-note {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  color: #555;
  font-style: italic;
}

.code-inline {
  background: #252545;
  color: #ffb347;
  padding: 0.1em 0.4em;
  border-radius: 3px;
  font-style: normal;
}

/* ══════════════════════════════════
   Under-the-Hood Page
   ══════════════════════════════════ */

.under-the-hood {
  margin-bottom: 2rem;
}

/* Opening intro terminal */
.under-the-hood .boot-terminal {
  margin-bottom: 2.5rem;
}

.uth-intro {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  color: #d4d4d4;
  line-height: 1.9;
  margin-bottom: 0.35rem;
}

.uth-intro:last-child {
  margin-bottom: 0;
}

.uth-intro .prompt {
  color: #555;
}

.uth-inline {
  color: #e0e0e0;
  font-style: italic;
}

.uth-kw-ok   { color: #28c840; font-weight: 500; }
.uth-kw-warn { color: #ffbd2e; font-weight: 500; }
.uth-kw-err  { color: #ff5f57; font-weight: 500; }
.uth-kw-dim  { color: #666; }

/* Each content section */
.uth-section {
  margin-bottom: 2.75rem;
}

.uth-body {
  background: #12122a;
  border: 1px solid #2a2a4a;
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 1.5rem 1.75rem;
  color: #d4d4d4;
  font-size: 0.95rem;
  line-height: 1.7;
}

.uth-body > p {
  margin-bottom: 1rem;
}

.uth-body > p:last-child {
  margin-bottom: 0;
}

.uth-subhead {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ff9500;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px dashed #2a2a4a;
}

.uth-link {
  color: #ff9500;
  text-decoration: underline;
  text-decoration-color: #664400;
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s;
}

.uth-link:hover {
  text-decoration-color: #ff9500;
}

.uth-code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.88em;
  background: #252545;
  color: #ffb347;
  padding: 0.1em 0.4em;
  border-radius: 3px;
}

/* ASCII / Unicode diagrams */
.ascii-diagram {
  background: #0e0e22;
  border: 1px solid #2a2a4a;
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin: 1rem 0 1.25rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.6;
  color: #d4d4d4;
  overflow-x: auto;
  white-space: pre;
}

/* Bullet list reusable within uth-body */
.uth-reasons {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1rem;
}

.uth-reasons li {
  padding: 0.3rem 0 0.3rem 1.2rem;
  position: relative;
  font-size: 0.92rem;
}

.uth-reasons li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: #ff9500;
}

/* Tables inside uth sections — reuse kubectl-table, tighten spacing */
.uth-table {
  font-size: 0.78rem;
  margin-bottom: 0.5rem;
}

.uth-table th {
  font-size: 0.7rem;
}

.uth-table td {
  vertical-align: top;
}

/* Terraform-style YAML block — reuse .yaml-frontmatter, add comment tone */
.uth-tf-block {
  margin-bottom: 1rem;
}

.yaml-comment {
  color: #555;
  font-style: italic;
}

/* The note callout (cost-at-24x7) */
.uth-note {
  border-left: 3px solid #ffbd2e;
  background: #1a1a2e;
  padding: 0.75rem 1rem;
  margin: 1rem 0 0;
  font-size: 0.88rem;
  color: #d4d4d4;
  font-family: 'IBM Plex Mono', monospace;
  line-height: 1.7;
}

.uth-note .prompt {
  color: #ffbd2e;
}

/* Closing twist — reuse boot-terminal look */
.uth-twist {
  margin-top: 3rem;
}

.uth-twist .boot-terminal {
  margin-bottom: 0;
}

.uth-twist .boot-line {
  /* Disable the staggered boot animation from about.html — this is not a boot screen. */
  opacity: 1;
  transform: none;
  animation: none;
  font-size: 0.88rem;
}

/* ── Footer ── */
footer {
  border-top: 1px solid #2a2a4a;
  padding: 2rem 0;
  margin-top: auto;
}

footer p {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  color: #555;
}