/* ==========================================================================
   dolek.dev — theme tokens
   ==========================================================================
   The dark theme is the historical look (amber/teal on near-black).
   The light theme overrides the same tokens under :root[data-theme=light]
   so component CSS that reads only the variables does not need to be
   duplicated. New tokens are not introduced; light values are chosen to
   keep WCAG AA contrast against the light surface.
   ========================================================================== */

:root[data-theme="dark"] {
  --bg: #111a24;
  --bg-soft: #172632;
  --bg-panel: #1d303c;
  --bg-elev: #29424f;
  --line: rgba(244, 184, 85, 0.30);
  --line-strong: rgba(244, 184, 85, 0.62);
  --text: #fff7e9;
  --text-dim: #e2cdb1;
  --text-faint: #aab9c1;
  --neon: #f4af3d;
  --neon-glow: rgba(244, 175, 61, 0.45);
  --cyan: #57cce0;
  --magenta: #e8754f;
  --accent: #ff6f61;        /* Saturated coral for display-size
                                headlines. User-picked; identical in
                                both themes so the headline color is
                                consistent across light/dark. */
  --accent-glow: rgba(255, 111, 97, 0.42);
  /* Halo + sticky-bar colors. Light theme overrides these to keep the
     ambient warmth and the mobile-header wash themable. */
  --bg-glow-amber: rgba(244, 175, 61, 0.12);
  --bg-glow-teal: rgba(87, 204, 224, 0.10);
  --bg-glow-mix: 96%;
  --shadow-elev: 0 0 24px var(--neon-glow), 0 0 1px var(--neon);
  /* SVG noise overlay opacity. Dark gets grain for atmosphere;
     light goes to 0 so the cream surface stays clean. */
  --noise-opacity: 0.55;
}

:root[data-theme="light"] {
  /* Palette derived from the profile illustration (see
     static/img/palette-source.svg). The dark theme is warm-amber on
     near-black, so the light theme is a warm-cool inversion: deep
     amber + teal on parchment cream. Cream rather than pure white
     so the warmth in the source swatch reads through. */
  --bg: #f6ecdb;          /* parchment cream (inverse of #0f171f sky) */
  --bg-soft: #efe1c5;     /* mid parchment, used for sticky wash */
  --bg-panel: #fff6e8;    /* card surface, one stop lighter than bg */
  --bg-elev: #ffffff;     /* raised surface, reserved for chips */
  --line: rgba(124, 79, 31, 0.22);
  --line-strong: rgba(124, 79, 31, 0.45);
  --text: #1c1815;        /* warm-black, AA on cream */
  --text-dim: #3d3a36;
  --text-faint: #6a635b;
  /* Keep the same warm-amber accent character; deepened for AA on cream. */
  --neon: #8a4a06;
  --neon-glow: rgba(138, 74, 6, 0.22);
  /* --accent is the saturated coral used for display-size headlines.
     Identical in both themes (see dark theme) so the headline carries
     the same color regardless of theme. */
  --accent: #ff6f61;
  --accent-glow: rgba(255, 111, 97, 0.42);
  --cyan: #0d5b6e;        /* deep teal (from robot cluster) */
  --magenta: #a83a1d;     /* dusty rose (from lens highlight) */
  --bg-glow-amber: rgba(168, 58, 29, 0.07);
  --bg-glow-teal: rgba(13, 91, 110, 0.06);
  --bg-glow-mix: 82%;
  --shadow-elev: 0 0 24px var(--neon-glow), 0 0 1px var(--neon);
  /* Light surfaces do not need grain; the cream is the warmth. */
  --noise-opacity: 0;
}

/* Layout + typography constants that are theme-independent. */
:root {
  --font-mono: "IBM Plex Serif", Georgia, serif;
  --font-display: "IBM Plex Serif", Georgia, serif;
  --shell-width: 240px;
  --radius: 4px;
  --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-glow: var(--shadow-elev);
  --max-content: 1200px;
}

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

html,
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

body {
  position: relative;
  background-image:
    radial-gradient(circle at 20% 10%, var(--bg-glow-amber), transparent 50%),
    radial-gradient(circle at 80% 90%, var(--bg-glow-teal), transparent 50%);
}

.mobile-header {
  display: none;
}

.page-main {
  min-width: 0;
  padding: 56px clamp(28px, 5vw, 80px) 80px;
}

@media (min-width: 961px) {
  body {
    display: grid;
    grid-template-columns: var(--shell-width) minmax(0, 1fr);
  }

  .sidebar {
    grid-column: 1;
    grid-row: 1;
  }

  body .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--shell-width);
    height: 100vh;
  }

  .page-main {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 960px) {
  .page-main {
    padding: 0 24px 56px;
  }

  .mobile-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-inline: -24px;
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 3;
    padding-inline: 24px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) var(--bg-glow-mix), transparent);
    backdrop-filter: blur(12px);
  }

  .mobile-header__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(244, 175, 61, 0.08);
    color: var(--neon);
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
  }

  .mobile-header__toggle:active {
    transform: scale(0.96);
  }

  .mobile-header__toggle[aria-expanded="true"] {
    border-color: var(--neon);
    background: rgba(244, 175, 61, 0.16);
  }

  .mobile-header__bars {
    font-size: 1.25rem;
    line-height: 1;
  }

  .mobile-header__title {
    font-family: var(--font-mono);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text);
  }

  .mobile-header__brand {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .mobile-header__portrait {
    width: 30px;
    height: 30px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 34%;
  }

  body .sidebar.is-open {
    transform: translate3d(0, 0, 0);
  }
}

.noise {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: var(--noise-opacity, 0.55);
  mix-blend-mode: overlay;
  transition: opacity 320ms ease;
}

.cursor {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.55  0 0 0 0 1  0 0 0 0.10 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  opacity: 0.18;
  mix-blend-mode: overlay;
}

::selection {
  background: var(--neon);
  color: var(--bg);
}

a {
  color: var(--neon);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--cyan);
}

button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}

code,
pre,
.mono {
  font-family: var(--font-mono);
}

img,
svg {
  max-width: 100%;
  display: block;
}

.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;
}

.skip-link {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 20;
  padding: 8px 12px;
  border: 1px solid var(--neon);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  transform: translateY(-160%);
  transition: transform var(--transition);
}

.skip-link:focus {
  transform: translateY(0);
}

body .skip-link:focus {
  transform: translateY(0);
}

/* ==========================================================================
   App shell layout
   ========================================================================== */

.app-shell {
  display: grid;
  grid-template-columns: var(--shell-width) 1fr;
  min-height: 100vh;
  position: relative;
}

.app-shell__sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-soft), var(--bg));
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  z-index: 5;
}

.app-shell__main {
  padding: 56px clamp(28px, 5vw, 80px) 80px;
  position: relative;
  min-width: 0;
}

.app-shell__topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 7, 13, 0.85);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.app-shell__topbar-title {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.mobile-nav-toggle {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--neon);
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

.sidebar-profile {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sidebar-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--neon);
  background: var(--bg-elev);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--neon);
  position: relative;
  overflow: visible;
}

.sidebar-avatar::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--neon-glow);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 0.9; transform: scale(1.08); }
}

.sidebar-name {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.sidebar-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  line-height: 1.5;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.sidebar-nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  position: relative;
  transition: color var(--transition), background var(--transition);
}

.sidebar-nav__link::before {
  content: ">";
  color: var(--text-faint);
  font-weight: 700;
  transition: color var(--transition), transform var(--transition);
}

.sidebar-nav__link:hover {
  color: var(--text);
  background: rgba(244, 175, 61, 0.08);
}

.sidebar-nav__link[aria-current="page"] {
  color: var(--neon);
  background: rgba(244, 175, 61, 0.14);
}

.sidebar-nav__link[aria-current="page"]::before {
  color: var(--neon);
  transform: translateX(2px);
}

.sidebar-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.sidebar-links a {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 5px 10px;
  transition: color var(--transition), border-color var(--transition);
}

.sidebar-links a:hover {
  color: var(--neon);
  border-color: var(--neon);
}

.sidebar-status {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: pulse 2.4s ease-in-out infinite;
}

/* ==========================================================================
   Home hero
   ========================================================================== */

.page-section {
  position: relative;
}

.home-hero {
  padding: 32px 0 80px;
  position: relative;
  isolation: isolate;
}

.home-hero__grid {
  position: absolute;
  inset: -40px -10vw 0 -10vw;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 60% 50% at 40% 30%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 40% 30%, black 30%, transparent 80%);
  z-index: -1;
  opacity: 0.55;
}

.home-hero__inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 920px;
}

.home-hero__pre {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
}

.home-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 9vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--text);
}

.home-hero__title .line {
  display: block;
  overflow: hidden;
}

.home-hero__title .word {
  display: inline-block;
  will-change: transform, opacity;
}

.home-hero__title .accent {
  color: var(--neon);
  text-shadow: 0 0 32px var(--neon-glow);
}

.cursor-blink {
  display: inline-block;
  width: 0.45ch;
  height: 0.85em;
  /* Match the headline accent (.prologue-intro__title .accent) so the
     caret and the accented word read as one accent. Uses --accent
     (the saturated display-amber) rather than --neon so the caret
     carries the same punch as the headline in both themes. */
  background: var(--accent);
  margin-left: 0.12em;
  vertical-align: -0.05em;
  animation: cursorBlink 1.05s steps(2, end) infinite;
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 72%, transparent);
}

@keyframes cursorBlink {
  0%, 50%  { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.home-hero__sub {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-dim);
}

.home-hero__sub span:not(:last-child)::after {
  content: "//";
  margin-left: 18px;
  color: var(--text-faint);
}

.home-hero__lede {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  max-width: 64ch;
  color: var(--text);
}

.home-hero__ctas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.cta-link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text);
  overflow: hidden;
  transition: border-color var(--transition), background var(--transition);
  will-change: transform;
}

.cta-link span:first-child {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.cta-link__meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.cta-link::after {
  content: "→";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  color: var(--text-faint);
  transition: color var(--transition), transform var(--transition);
}

.cta-link:hover {
  border-color: var(--neon);
  background: var(--bg-elev);
}

.cta-link:hover::after {
  color: var(--neon);
  transform: translate(4px, -50%);
}

.cta-link--primary {
  border-color: var(--neon);
  background: linear-gradient(135deg, rgba(244, 175, 61, 0.18), rgba(87, 204, 224, 0.10));
}

.cta-link--primary span:first-child {
  color: var(--neon);
}

/* Info grid (home) */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.info-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 64px;
}

.info-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color var(--transition), transform var(--transition);
}

.info-panel:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.info-panel__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.info-panel__eyebrow::before {
  content: "// ";
  color: var(--neon);
}

.info-panel h3 {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.info-panel p {
  font-size: 0.9rem;
  color: var(--text-dim);
  line-height: 1.55;
}

.summary-block {
  max-width: 68ch;
  margin-top: 28px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
}

.summary-block p + p {
  margin-top: 14px;
}

/* ==========================================================================
   Page headers
   ========================================================================== */

.page-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 48px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.page-header__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-header__eyebrow::before {
  content: "// ";
}

.page-header h1 {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.page-header__lede {
  max-width: 60ch;
  color: var(--text-dim);
  font-size: 1rem;
}

.section-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 48px 0 20px;
}

.section-header--compact {
  margin: 36px 0 16px;
}

.section-header__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.section-header h2 {
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}

/* ==========================================================================
   Resume
   ========================================================================== */

.timeline {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.timeline-entry {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 28px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  transition: background var(--transition);
}

.timeline-entry:last-child {
  border-bottom: 1px solid var(--line);
}

.timeline-entry__meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timeline-entry__meta .role {
  color: var(--cyan);
}

.timeline-entry__body h3 {
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.timeline-entry__body .org {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 12px;
}

.timeline-entry__body ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.timeline-entry__body li {
  position: relative;
  padding-left: 18px;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--text);
}

.timeline-entry__body li::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--neon);
  font-size: 0.85em;
}

.skill-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.skill-group__title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.skill-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.skill-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: var(--bg-panel);
  transition: border-color var(--transition), color var(--transition);
}

.skill-badge::before {
  content: "<";
  color: var(--text-faint);
  font-size: 0.85em;
}

.skill-badge::after {
  content: ">";
  color: var(--text-faint);
  font-size: 0.85em;
}

.skill-badge:hover {
  border-color: var(--neon);
  color: var(--neon);
}

/* ==========================================================================
   Blog
   ========================================================================== */

.blog-grid {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.blog-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
  transition: border-color var(--transition), transform var(--transition);
}

.blog-card:hover {
  border-color: var(--neon);
  transform: translateY(-2px);
}

.blog-card__link {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 22px 24px;
  color: var(--text);
}

.blog-card__meta {
  display: flex;
  gap: 14px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.blog-card__meta time {
  color: var(--text-dim);
}

.blog-card__title {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text);
  line-height: 1.25;
}

.blog-card__summary {
  font-size: 0.94rem;
  color: var(--text-dim);
  line-height: 1.55;
}

.blog-card__read {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--neon);
  margin-top: 4px;
}

.blog-empty {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-faint);
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  text-align: center;
}

/* ==========================================================================
   Blog post — light / minimal viewport (markdownviewer.dev inspired)
   Scoped to .page-section--blog-post so the rest of the site keeps the
   cyber/technical dark theme. Inter + JetBrains Mono typography.
   ========================================================================== */

.page-section--blog-post {
  --bp-bg: #ffffff;
  --bp-bg-soft: #f6f8fa;
  --bp-bg-muted: #eaeef2;
  --bp-border: #d0d7de;
  --bp-border-strong: #afb8c1;
  --bp-text: #1f2328;
  --bp-text-muted: #57606a;
  --bp-text-faint: #8c959f;
  --bp-accent: #0969da;
  --bp-accent-soft: rgba(9, 105, 218, 0.12);
  --bp-success: #1a7f37;
  --bp-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --bp-font-mono: "JetBrains Mono", "SFMono-Regular", "SF Mono", Menlo,
    Consolas, "Liberation Mono", monospace;
  --bp-radius: 6px;
  --bp-line: 1.6;

  font-family: var(--bp-font-sans);
  color: var(--bp-text);
  font-size: 16px;
  line-height: var(--bp-line);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Light viewport card (faux "preview pane") */
.page-section--blog-post {
  background: var(--bp-bg-soft);
  border: 1px solid var(--bp-border);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  position: relative;
}

/* Custom thin scrollbar (markdownviewer style) */
.page-section--blog-post ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.page-section--blog-post ::-webkit-scrollbar-thumb {
  background: var(--bp-border);
  border-radius: 5px;
}
.page-section--blog-post ::-webkit-scrollbar-thumb:hover {
  background: var(--bp-border-strong);
}
.page-section--blog-post ::-webkit-scrollbar-track {
  background: transparent;
}
.page-section--blog-post * {
  scrollbar-color: var(--bp-border) transparent;
  scrollbar-width: thin;
}

/* Override the global ::selection on the blog post viewport only */
.page-section--blog-post ::selection {
  background: var(--bp-accent);
  color: #fff;
}

.page-section--blog-post a {
  color: var(--bp-accent);
  text-decoration: none;
  transition: color 160ms ease;
}

.page-section--blog-post a:hover {
  color: #0550ae;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page-section--blog-post > .blog-post__back {
  margin: 14px clamp(20px, 3vw, 32px) 0;
}

.blog-post__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--bp-font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bp-text-muted);
  align-self: flex-start;
  padding: 5px 10px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  background: var(--bp-bg);
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.blog-post__back i {
  font-size: 0.85em;
  line-height: 1;
}

.blog-post__back:hover {
  color: var(--bp-accent);
  border-color: var(--bp-accent);
  background: var(--bp-accent-soft);
  text-decoration: none;
}

/* Section header (title block) */
.page-section--blog-post .section-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px clamp(20px, 3vw, 32px) 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--bp-border);
}

.page-section--blog-post .section-header__eyebrow {
  font-family: var(--bp-font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bp-text-faint);
}

.page-section--blog-post .section-header__title {
  font-family: var(--bp-font-sans);
  font-size: clamp(1.7rem, 3.6vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--bp-text);
  margin: 0;
}

.page-section--blog-post .section-header__lead {
  font-family: var(--bp-font-sans);
  font-size: 0.85rem;
  color: var(--bp-text-muted);
  letter-spacing: 0;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.page-section--blog-post .section-header__lead time {
  font-weight: 500;
  color: var(--bp-text);
}

/* Article body */
.blog-post {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: none;
  margin: 0 clamp(20px, 3vw, 32px) 28px;
  font-family: var(--bp-font-sans);
  color: var(--bp-text);
  line-height: var(--bp-line);
}

.blog-post__meta {
  font-family: var(--bp-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bp-text-faint);
  display: flex;
  gap: 14px;
  align-items: center;
}

.blog-post h1,
.blog-post h2,
.blog-post h3,
.blog-post h4,
.blog-post h5,
.blog-post h6 {
  font-family: var(--bp-font-sans);
  color: var(--bp-text);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.blog-post h1 {
  font-size: clamp(1.7rem, 3.6vw, 2.25rem);
  margin: 8px 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bp-border);
}

.blog-post h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.6rem);
  margin: 32px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--bp-border);
}

.blog-post h3 {
  font-size: 1.15rem;
  margin: 24px 0 8px;
}

.blog-post h4 {
  font-size: 1rem;
  margin: 20px 0 6px;
}

.blog-post p {
  font-size: 1rem;
  line-height: var(--bp-line);
  color: var(--bp-text);
  margin: 0;
}

.blog-post p + p {
  margin-top: 12px;
}

.blog-post strong {
  color: var(--bp-text);
  font-weight: 600;
}

.blog-post em {
  color: var(--bp-text);
}

.blog-post ul,
.blog-post ol {
  margin: 4px 0 8px;
  padding-left: 1.6em;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--bp-text);
}

.blog-post ol {
  list-style: decimal;
}

.blog-post ul {
  list-style: disc;
}

.blog-post li {
  line-height: var(--bp-line);
  padding-left: 4px;
}

.blog-post li::marker {
  color: var(--bp-text-muted);
}

.blog-post code {
  font-family: var(--bp-font-mono);
  background: var(--bp-bg-muted);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.86em;
  color: #1f2328;
}

.blog-post pre {
  background: var(--bp-bg-soft);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.55;
  margin: 14px 0;
  font-family: var(--bp-font-mono);
}

.blog-post pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--bp-text);
  font-size: inherit;
}

.blog-post blockquote {
  border-left: 3px solid var(--bp-border-strong);
  padding: 4px 14px;
  color: var(--bp-text-muted);
  font-style: italic;
  margin: 14px 0;
  background: var(--bp-bg-soft);
  border-radius: 0 var(--bp-radius) var(--bp-radius) 0;
}

.blog-post blockquote p {
  color: var(--bp-text-muted);
}

.blog-post a {
  color: var(--bp-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease, color 160ms ease;
}

.blog-post a:hover {
  color: #0550ae;
  border-bottom-color: #0550ae;
  text-decoration: none;
}

.blog-post hr {
  border: 0;
  height: 1px;
  background: var(--bp-border);
  margin: 28px 0;
}

.blog-post table {
  width: 100%;
  margin: 18px 0;
  border-collapse: collapse;
  background: var(--bp-bg);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  overflow: hidden;
  font-size: 0.92rem;
}

.blog-post th,
.blog-post td {
  padding: 10px 14px;
  border: 1px solid var(--bp-border);
  text-align: left;
  font-family: var(--bp-font-sans);
}

.blog-post th {
  color: var(--bp-text);
  font-weight: 600;
  background: var(--bp-bg-soft);
}

.blog-post tbody tr:nth-child(even) {
  background: var(--bp-bg-soft);
}

.blog-post input[type="checkbox"] {
  width: 1em;
  height: 1em;
  margin-right: 8px;
  accent-color: var(--bp-accent);
  vertical-align: -0.1em;
}

.blog-post img {
  max-width: 100%;
  height: auto;
  border-radius: var(--bp-radius);
  border: 1px solid var(--bp-border);
  display: block;
  margin: 16px auto;
}

/* Mermaid diagrams
   -----------------------------------------------------------------------
   ```mermaid ... ``` fences in a post are pre-rendered server-side into
   <figure class="mermaid"> blocks containing an <img> that points at
   mermaid.ink. The figure gets a soft card background and balanced
   spacing so diagrams read as visual pauses between prose, not as
   floating images. */
.blog-post figure.mermaid {
  margin: 28px auto;
  padding: 18px 18px 14px;
  background: var(--bp-bg);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  max-width: 720px;
}

.blog-post figure.mermaid img {
  margin: 0 auto;
  display: block;
}

/* Tags */
.blog-post__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 clamp(20px, 3vw, 32px) 28px;
  padding-top: 18px;
  border-top: 1px solid var(--bp-border);
}

.blog-post__tag {
  font-family: var(--bp-font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bp-text-muted);
  background: var(--bp-bg);
  border: 1px solid var(--bp-border);
  border-radius: 999px;
  padding: 3px 10px;
  transition: color 160ms ease, border-color 160ms ease;
}

.blog-post__tag:hover {
  color: var(--bp-accent);
  border-color: var(--bp-accent);
}

/* Responsive: shrink the card on small screens */
@media (max-width: 640px) {
  .page-section--blog-post {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .page-section--blog-post > .blog-post__back,
  .page-section--blog-post .section-header,
  .blog-post,
  .blog-post__tags {
    margin-left: 16px;
    margin-right: 16px;
  }
  .blog-post h1 {
    font-size: 1.5rem;
  }
  .blog-post h2 {
    font-size: 1.25rem;
  }
}

/* ==========================================================================
   404
   ========================================================================== */

.not-found {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 80px 0;
}

.not-found__code {
  font-family: var(--font-display);
  font-size: clamp(6rem, 18vw, 12rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--neon);
  text-shadow: 0 0 32px var(--neon-glow);
}

.not-found h1 {
  font-size: 1.6rem;
  font-weight: 500;
}

.not-found__lede {
  max-width: 50ch;
  color: var(--text-dim);
}

.not-found__ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.not-found__ctas a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
}

.not-found__ctas a:hover {
  border-color: var(--neon);
  color: var(--neon);
}

/* ==========================================================================
   Reveal animations
   ==========================================================================
   Progressive enhancement: by default, `.reveal` content is fully
   visible. The pre-paint inline script in <head> adds `class="js"` to
   <html> only when JavaScript is available, so:

   - JS disabled (or fails before the script runs): .reveal has no
     rules, content is visible. [data-reveal] elements are also
     visible, so the page is fully readable.
   - JS enabled: .js .reveal hides the elements (opacity 0) so
     GSAP's ScrollTrigger can fade them in. If GSAP never loads
     (vendored script missing, MIME mismatch, CSP, etc.), app.js
     removes the .js class again, so the static page is still
     readable instead of being stuck at opacity 0.

   The pre-paint `.js` flip is what keeps the no-flash, no-blank
   behaviour: the class is set before the stylesheet parses, so
   there is no frame where the JS path hides content that the CSS
   then re-shows. Without this, a missing GSAP file would render an
   empty Intro / About / Blog section — which is what was happening
   on the production host.
   ========================================================================== */

.js .reveal {
  opacity: 0;
  will-change: transform, opacity;
}

.js [data-reveal="fade"] {
  transform: none;
}

.js [data-reveal="rise"] {
  transform: translateY(24px);
}

.js [data-reveal="left"] {
  transform: translateX(-24px);
}

/* Honor the user-agent / OS reduced-motion preference: skip the
   pre-paint hide so the page is visible immediately and the
   ScrollTrigger code path bails out before it even runs. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}