/* ════════════════════════════════════════════════════
   STYLE.CSS — voidbender · Lo-Fi Sketchbook · v5
   Canvas Black Holes (Logo, Hero, Swallow Overlay)
   Dual Avatars (Calm & Panicked) · Roaming Mars Rover
   Floating Satellite · Walking Cat · Sticky Notes · Wobbly
════════════════════════════════════════════════════ */

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

:root {
  --paper:      #f4f1e8;
  --paper-mid:  #eee9d8;
  --ink:        #1a1a1a;
  --ink-light:  #4a4a4a;
  --ink-faint:  #9a9080;
  --rule-color: #c8c0a8;
  --sticky:     #f5f0a8;
  --font-hand:  'Caveat', cursive;
  --font-type:  'Special Elite', serif;
  --font-mono:  'VT323', monospace;
  --max-w:      1100px;
  --pad:        clamp(1rem, 4vw, 3rem);
  /* Custom hand-drawn cursor SVGs (base64 inline) */
  --cursor-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='36' viewBox='0 0 28 36'%3E%3Cpath d='M6,2 C5,1 4,2 4,3 L4,24 C4,25 5,25 6,25 L9,20 L12,28 C12,29 13,29 14,29 L16,28 C17,27 17,26 16,25 L13,18 L20,18 C21,18 22,17 21,16 L7,2 Z' stroke='%23ffffff' stroke-width='1.5' fill='%231a1a1a' stroke-linejoin='round'/%3E%3Cpath d='M7,4 C6,3 5,4 5,4 L5,23 L8,19 L11,27 L14,26 L11,18 L19,18 Z' fill='%23f4f1e8'/%3E%3C/svg%3E") 4 2, auto;
  --cursor-pointer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='36' viewBox='0 0 32 36'%3E%3Cpath d='M14,2 C13,1 11,2 11,4 L11,18 C10,17 9,16 8,16 C6,16 5,17 5,18 C6,19 7,20 8,21 C7,21 6,22 6,23 C6,24 7,24 8,25 C7,25 7,26 7,27 C7,28 8,28 10,29 L14,32 C16,34 18,34 20,33 L24,30 C26,28 26,25 24,24 L24,12 C24,11 23,10 22,10 C21,10 20,11 20,12 L20,14 C19,13 19,12 18,12 C17,12 16,13 16,14 L16,12 C15,11 14,11 14,12 L14,4 Z' stroke='%23ffffff' stroke-width='1.5' fill='%231a1a1a' stroke-linejoin='round'/%3E%3C/svg%3E") 12 2, pointer;
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-type);
  line-height: 1.65;
  background-image: repeating-linear-gradient(
    to bottom, transparent 0px, transparent 27px,
    var(--rule-color) 27px, var(--rule-color) 28px
  );
  background-attachment: fixed;
  position: relative;
  overflow-x: hidden;
  cursor: var(--cursor-default);
}

a, button, .btn-sketch, .btn-sketch-sm, .nav-link, .project-card, .skill-tag,
.walking-cat, .work-duck, .floating-satellite, .schrodinger-wrap,
.logo-bh-wrap, .doodle-frame, [role="button"] {
  cursor: var(--cursor-pointer);
}

/* ── NOISE OVERLAY ─────────────────────────────── */
.noise-overlay {
  position: fixed; inset: 0; pointer-events: none;
  z-index: 1000; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ── LAYOUT ────────────────────────────────────── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad); }
.header-rule, .footer-rule { display: block; width: 100%; height: 10px; overflow: visible; }
.section-rule-wrap { padding: 0.5rem 0; overflow: hidden; }
.section-rule { display: block; width: 100%; height: 10px; overflow: visible; }
.entry-rule   { display: block; width: 100%; height: 4px; overflow: visible; }

/* ═══════════════════════════════════════════════
   HEADER & LOGO (Canvas Black Hole)
═══════════════════════════════════════════════ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background-color: var(--paper);
  background-image: repeating-linear-gradient(
    to bottom, transparent 0px, transparent 27px,
    var(--rule-color) 27px, var(--rule-color) 28px
  );
  padding: 0.9rem 0 0.4rem;
  overflow: visible; /* allow crash-landing animation to extend above header */
}

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

.logo-block { display: flex; align-items: center; gap: 0.75rem; }

/* Mini interactive Canvas Black Hole for Logo */
.logo-bh-wrap {
  width: 96px; height: 58px;
  cursor: var(--cursor-pointer); flex-shrink: 0; position: relative;
  transition: transform 0.2s ease;
  overflow: visible;
}
.logo-bh-wrap:hover { transform: scale(1.06); }
.logo-bh-canvas {
  width: 100%; height: 100%; display: block;
}

/* ── LOGO TEXT / NAME CYCLING ──────────────────── */
.logo-text { display: flex; flex-direction: column; gap: 0; position: relative; }
.logo-role  { font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-faint); line-height: 1; letter-spacing: 0.05em; z-index: 1; }
.logo-name-wrap { position: relative; display: inline-block; line-height: 1.2; overflow: visible; }
.logo-name  { font-family: var(--font-hand); font-size: 1.28rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; display: inline-block; position: relative; z-index: 4; transition: opacity 0.12s; }
.name-scratch-svg { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; height: 22px; pointer-events: none; z-index: 5; overflow: visible; }
/* name-effect-wrap: container for void stars and crash-landing lightning */
.name-effect-wrap { position: absolute; left: 50%; top: 0; width: 100%; height: 100%; transform: translateX(-50%); pointer-events: none; z-index: 3; overflow: visible; }

/* void stars */
.void-star { position: absolute; background: #1a1a1a; border-radius: 50%; animation: voidStarFloat 1.2s ease-out forwards; }
@keyframes voidStarFloat {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-28px) scale(0.3); }
}

/* lightning */
.lightning-bolt { position: absolute; top: -4px; right: -28px; width: 24px; height: 32px; animation: lightningFlash 0.8s ease-out forwards; }
@keyframes lightningFlash {
  0%   { opacity: 1; filter: none; }
  20%  { opacity: 1; filter: brightness(2) drop-shadow(0 0 4px #1a1a1a); }
  40%  { opacity: 0.6; }
  60%  { opacity: 1; filter: brightness(1.5) drop-shadow(0 0 2px #1a1a1a); }
  100% { opacity: 0; }
}

/* Shockwave ring expanding from Kayden name */
@keyframes shockRing {
  0%   { width: 0; height: 0; opacity: 1; }
  70%  { opacity: 0.6; }
  100% { width: 160px; height: 60px; opacity: 0; }
}

/* ── NAV ────────────────────────────────────────── */
.main-nav { display: flex; gap: clamp(0.75rem, 2vw, 1.5rem); flex-wrap: wrap; }
.nav-link  { font-family: var(--font-mono); font-size: 1.1rem; color: var(--ink); text-decoration: none; letter-spacing: 0.03em; position: relative; transition: opacity 0.15s; display: inline-block; }
.nav-link::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: var(--ink); transform: scaleX(0) skewX(-3deg); transform-origin: left; transition: transform 0.2s ease; }
.nav-link:hover::after { transform: scaleX(1) skewX(-3deg); }
.nav-link:hover { opacity: 0.7; }

/* NAV SHAKE — film jitter */
@keyframes navShake {
   0%  { transform: rotate(0deg)    translate(0px, 0px); }
   8%  { transform: rotate(-1.8deg) translate(-1px, 0px); }
  16%  { transform: rotate(1.2deg)  translate(1px, -1px); }
  24%  { transform: rotate(-0.8deg) translate(0px, 1px); }
  32%  { transform: rotate(2deg)    translate(-1px, 0px); }
  40%  { transform: rotate(-1.5deg) translate(1px, 1px); }
  48%  { transform: rotate(0.6deg)  translate(-1px, 0px); }
  56%  { transform: rotate(-2deg)   translate(0px, -1px); }
  64%  { transform: rotate(1.4deg)  translate(1px, 0px); }
  72%  { transform: rotate(-0.5deg) translate(0px, 1px); }
  80%  { transform: rotate(1.8deg)  translate(-1px, -1px); }
  88%  { transform: rotate(-1deg)   translate(1px, 0px); }
  100% { transform: rotate(0deg)    translate(0px, 0px); }
}
.nav-shake { animation: navShake 0.55s steps(1, end) infinite; }
.nav-shake:nth-child(1) { animation-delay: 0s;    animation-duration: 0.6s; }
.nav-shake:nth-child(2) { animation-delay: 0.08s; animation-duration: 0.5s; }
.nav-shake:nth-child(3) { animation-delay: 0.16s; animation-duration: 0.65s; }
.nav-shake:nth-child(4) { animation-delay: 0.04s; animation-duration: 0.55s; }
.nav-shake:hover { animation-play-state: paused; opacity: 0.7; }

/* ═══════════════════════════════════════════════
   WORD JIGGLE — for content words
═══════════════════════════════════════════════ */
@keyframes wordJiggle {
  0%,85%,100% { transform: rotate(0deg) translate(0,0); }
  87%  { transform: rotate(-2.5deg) translate(-1px,0); }
  89%  { transform: rotate(2deg)    translate(1px,-1px); }
  91%  { transform: rotate(-1.5deg) translate(0,1px); }
  93%  { transform: rotate(2.5deg)  translate(-1px,0); }
  95%  { transform: rotate(-1deg)   translate(1px,0); }
  97%  { transform: rotate(1.5deg)  translate(0,-1px); }
}
.word-jiggle {
  display: inline-block;
  animation: wordJiggle 4s ease-in-out infinite;
  animation-delay: var(--jd, 0s);
}

/* ═══════════════════════════════════════════════
   STICKY NOTES (Positioned with clear margins)
═══════════════════════════════════════════════ */
.sticky-note {
  position: absolute; z-index: 10;
  background: var(--sticky);
  border: 1px solid #c8b840;
  padding: 0.5rem 0.65rem;
  font-family: var(--font-hand); font-size: 0.9rem; line-height: 1.4;
  box-shadow: 2px 3px 6px rgba(0,0,0,0.12);
  pointer-events: none;
  max-width: max-content;
}
.sticky-note::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: rgba(0,0,0,0.08);
}
.sticky-tape { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 40px; height: 12px; }

.sticky-hero    { top: 1.5rem; left: 1rem; transform: rotate(-3deg); }
.sticky-about   { bottom: 1.5rem; left: 1rem; transform: rotate(-4deg); }
.sticky-stats   { margin-top: 1rem; position: relative; transform: rotate(2deg); display: inline-block; }
.sticky-work-inline { position: relative; transform: rotate(-2deg); margin-left: auto; display: inline-block; top: 0; }
.sticky-writing { top: 1rem; right: 1rem; transform: rotate(4deg); }
.sticky-contact { margin-top: 1.2rem; position: relative; transform: rotate(-2deg); display: inline-block; }

/* Responsive adjustments for sticky notes and decorative elements to prevent mobile overlaps */
@media (max-width: 850px) {
  .sticky-about   { display: none !important; }
  .sticky-hero    { display: none !important; }
  .sticky-writing { display: none !important; }
  .floating-satellite { display: none !important; }
  .sticky-stats {
    position: relative;
    margin-top: 0.8rem;
    display: inline-block;
  }
  .stats-row {
    margin-top: 0.8rem;
    margin-bottom: 0.4rem;
  }
}

/* Hand-drawn marker highlight + scribble underline */
.hand-drawn-highlight-underline {
  position: relative;
  display: inline-block;
  background: linear-gradient(102deg, rgba(255,232,100,0.15) 0%, rgba(255,232,100,0.65) 4%, rgba(255,232,100,0.55) 96%, rgba(255,232,100,0.1) 100%);
  padding: 0.05rem 0.35rem 0.2rem;
  border-radius: 4px 14px 3px 10px / 9px 3px 11px 4px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0.1rem;
}
.hand-drawn-highlight-underline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 8'%3E%3Cpath d='M0,4 C30,1 60,7 90,4 C120,1 150,7 180,4 C210,1 240,7 270,4 C285,2 295,6 300,4' stroke='%231a1a1a' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}

/* ═══════════════════════════════════════════════
   WOBBLY / IMPERFECT BORDERS (hand-drawn feel)
═══════════════════════════════════════════════ */
.wobbly-border {
  border: 2px solid var(--ink);
  border-radius: 4px 12px 6px 14px / 14px 4px 12px 6px;
  box-shadow: 2px 2px 0 rgba(26,26,26,0.15), -1px -1px 0 rgba(26,26,26,0.08);
}
.wobbly-border-lg {
  border: 2px solid var(--ink);
  border-radius: 6px 16px 8px 18px / 18px 6px 16px 8px;
  padding: 1.2rem 1.4rem; margin-bottom: 1.5rem;
  position: relative; transform: rotate(-0.5deg);
}
.wobbly-card {
  border: 2px solid var(--ink) !important;
}
.wobbly-card:nth-child(1) { border-radius: 3px 14px 5px 10px / 10px 3px 14px 5px !important; }
.wobbly-card:nth-child(2) { border-radius: 8px 4px 12px 6px / 4px 12px 6px 14px !important; }
.wobbly-card:nth-child(3) { border-radius: 5px 10px 4px 14px / 14px 5px 10px 3px !important; }
.wobbly-card:nth-child(4) { border-radius: 10px 4px 14px 4px / 4px 14px 4px 12px !important; }

/* ═══════════════════════════════════════════════
   SECTION FX BASE
═══════════════════════════════════════════════ */
.section-fx { position: absolute; pointer-events: none; z-index: 0; }
.hero, .about-section, .work-section, .blog-section, .contact-section {
  position: relative;
  scroll-margin-top: 75px;
}

/* ─ HERO FX ─ */
.hero-fx {
  right: -20px; top: -15px;
  width: clamp(280px, 35vw, 440px);
  height: clamp(280px, 35vw, 360px);
  opacity: 0.75;
  pointer-events: all;
  z-index: 0;
}
.hero-bh-canvas {
  width: 100%; height: 100%; display: block;
  cursor: crosshair;
}
.hero-fx-annotation {
  position: absolute; bottom: 8px; left: 10px;
  display: flex; align-items: center; gap: 0.3rem;
  font-family: var(--font-hand); font-size: 0.85rem;
  color: var(--ink); transform: rotate(-2deg); opacity: 0.75; pointer-events: none;
}
.hero-fx-annotation svg { width: 70px; height: 20px; }
.hero-fx-annotation small { font-size: 0.7rem; opacity: 0.8; }

/* ─ ABOUT FX (Schrödinger + wormhole) ─ */
.about-fx {
  right: 0; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2rem; padding-right: 1rem; opacity: 0.85; pointer-events: all;
}
.schrodinger-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; cursor: pointer; transition: transform 0.2s; }
.schrodinger-wrap:hover { transform: scale(1.03) rotate(-1deg); }
.schrodinger-label { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-faint); letter-spacing: 0.05em; margin-bottom: 0.2rem; }
.schrodinger-svg { width: clamp(130px, 14vw, 180px); height: auto; display: block; }
.cat-alive { display: block; }
.cat-dead { display: none; }
.schrodinger-q { transition: opacity 0.3s; }
.schrodinger-wrap.state-dead .cat-alive { display: none; }
.schrodinger-wrap.state-dead .cat-dead  { display: block; }
.schrodinger-wrap.state-dead .schrodinger-q { opacity: 0; }
.schrodinger-wrap.state-alive .schrodinger-q { opacity: 0; }
.schrodinger-cat { animation: catPeek 6s ease-in-out infinite; }
@keyframes catPeek {
  0%,15%   { transform: translateY(55px); opacity: 0; }
  25%,75%  { transform: translateY(0px);  opacity: 1; }
  85%,100% { transform: translateY(55px); opacity: 0; }
}
.zzz-1 { animation: zzzFloat 2s ease-in-out infinite; animation-delay: 0s; }
.zzz-2 { animation: zzzFloat 2s ease-in-out infinite; animation-delay: 0.3s; }
.zzz-3 { animation: zzzFloat 2s ease-in-out infinite; animation-delay: 0.6s; }
@keyframes zzzFloat {
  0%,100% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
  50%     { transform: translateY(-6px) rotate(5deg); opacity: 1; }
}
.schrodinger-caption { font-family: var(--font-hand); font-size: 0.9rem; color: var(--ink-light); font-style: italic; text-align: center; max-width: 160px; }
.schrodinger-hint    { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-faint); letter-spacing: 0.05em; }
.wormhole-wrap { opacity: 0.5; }
.wormhole-svg  { width: clamp(70px, 8vw, 100px); height: auto; }
.wh-ring { transform-origin: 50px 50px; }
.wh-r1 { animation: bhDiskOuter 8s linear infinite; }
.wh-r2 { animation: bhDiskInner 5s linear infinite; }
.wh-r3 { animation: bhDiskOuter 3s linear infinite; }
.wh-core { animation: bhPulse 2s ease-in-out infinite; }
@keyframes bhDiskOuter { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes bhDiskInner { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* ─ WORK FX ─ */
.work-fx { left: 0; top: 0; width: 200px; height: 100%; opacity: 0.12; overflow: hidden; }
.work-gravity-canvas { width: 100%; height: 100%; display: block; }
.work-fx-label { position: absolute; bottom: 20px; left: 10px; font-family: var(--font-hand); font-size: 0.78rem; color: var(--ink); transform: rotate(-3deg); opacity: 0.8; pointer-events: none; }
.work-fx-label small { font-size: 0.68rem; opacity: 0.7; }

/* ─ WRITING FX ─ */
.writing-fx { right: 0; top: 0; width: 100%; height: 100%; overflow: hidden; opacity: 1; }
.meteor-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.12; }
.pulsar-wrap { position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 0; pointer-events: none; opacity: 0.55; }
.pulsar-dot { width: 8px; height: 8px; background: var(--ink); border-radius: 50%; position: relative; z-index: 2; }
.pulsar-ring { position: absolute; border-radius: 50%; border: 1.2px solid var(--ink); animation: pulsarRing 2.5s ease-out infinite; }
.pulsar-ring.r1 { width: 24px; height: 24px; top: -8px; left: -8px; animation-delay: 0s; }
.pulsar-ring.r2 { width: 44px; height: 44px; top: -18px; left: -18px; animation-delay: 0.4s; }
.pulsar-ring.r3 { width: 64px; height: 64px; top: -28px; left: -28px; animation-delay: 0.8s; }
@keyframes pulsarRing { 0% { opacity: 0.9; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1); } }
.pulsar-label { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-faint); letter-spacing: 0.06em; margin-top: 2.5rem; }

/* ─ CONTACT FX — Terminal Robot ─ */
.contact-fx {
  left: 0; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column;
  align-items: flex-start; padding-left: 0.5rem;
  opacity: 0.82;
}
.terminal-figure {
  display: flex; flex-direction: column; align-items: center;
  animation: terminalBob 4s ease-in-out infinite;
}
@keyframes terminalBob {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50%     { transform: translateY(-8px) rotate(1deg); }
}
.terminal-robot-svg {
  width: clamp(90px, 10vw, 130px); height: auto; display: block;
}
/* Blinking terminal cursor on screen */
.terminal-cursor {
  animation: termCursorBlink 1.1s step-start infinite;
}
@keyframes termCursorBlink {
  0%,49% { opacity: 1; }
  50%,100% { opacity: 0; }
}
/* Blinking antenna dot */
.terminal-antenna-blink {
  animation: antennaPulse 2s ease-in-out infinite;
}
@keyframes antennaPulse {
  0%,100% { opacity: 1; r: 3; }
  50%      { opacity: 0.2; r: 4; }
}
/* Robot eyes subtle look around */
.robot-eye {
  animation: eyeLook 5s ease-in-out infinite;
}
@keyframes eyeLook {
  0%,30%,100% { transform: translateX(0); }
  40%,60%    { transform: translateX(1.5px); }
  70%,90%    { transform: translateX(-1px); }
}

/* ═══════════════════════════════════════════════
   1. WALKING CAT (About section roaming)
═══════════════════════════════════════════════ */
.walking-cat-container {
  position: absolute; bottom: -15px; left: 0;
  width: 100%; height: 95px;
  pointer-events: none; z-index: 20;
  overflow: hidden;
}

.walking-cat {
  position: absolute; bottom: 0; left: -100px;
  width: 90px; height: 75px;
  cursor: pointer; pointer-events: all;
  transition: transform 0.1s;
}

@keyframes catBodyBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.cat-svg { animation: catBodyBob 0.4s ease-in-out infinite; }

@keyframes legSwing1 { 0%,100% { transform: rotate(15deg); } 50% { transform: rotate(-15deg); } }
@keyframes legSwing2 { 0%,100% { transform: rotate(-15deg); } 50% { transform: rotate(15deg); } }
.cat-leg-fl { transform-origin: 34px 60px; animation: legSwing1 0.4s ease-in-out infinite; }
.cat-leg-fr { transform-origin: 44px 63px; animation: legSwing2 0.4s ease-in-out infinite; }
.cat-leg-bl { transform-origin: 58px 62px; animation: legSwing2 0.4s ease-in-out infinite; }
.cat-leg-br { transform-origin: 68px 60px; animation: legSwing1 0.4s ease-in-out infinite; }

@keyframes tailSwish { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-25deg); } }
.cat-tail { transform-origin: 14px 42px; animation: tailSwish 0.8s ease-in-out infinite; }

.cat-bubble {
  position: absolute; bottom: 68px; left: 50%;
  transform: translateX(-20%);
  background: var(--paper); border: 1.5px solid var(--ink);
  border-radius: 8px 12px 10px 10px;
  padding: 0.25rem 0.5rem;
  font-family: var(--font-hand); font-size: 0.85rem;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
  z-index: 10;
  box-shadow: 2px 2px 0 rgba(26,26,26,0.1);
}
.cat-bubble.visible { opacity: 1; }
.bubble-tail {
  position: absolute; bottom: -12px; left: 20px;
  width: 20px; height: 12px;
}

.walking-cat.cat-sitting .cat-svg { animation: none; }
.walking-cat.cat-sitting .cat-leg-fl,
.walking-cat.cat-sitting .cat-leg-fr,
.walking-cat.cat-sitting .cat-leg-bl,
.walking-cat.cat-sitting .cat-leg-br { animation: none; transform: none; }

/* ═══════════════════════════════════════════════
   2. ROAMING CONFUSED DUCK (Work section)
═══════════════════════════════════════════════ */
.work-duck-container {
  position: absolute; bottom: -18px; left: 0;
  width: 100%; height: 110px;
  pointer-events: none; z-index: 25;
  overflow: visible;
}

.work-duck {
  position: absolute; bottom: 0; left: -80px;
  width: 62px; height: 68px;
  cursor: pointer; pointer-events: all;
  transition: transform 0.15s;
}

@keyframes duckWaddle {
  0%,100% { transform: rotate(-5deg); }
  50%     { transform: rotate(5deg); }
}
.duck-svg {
  width: 100%; height: 100%; display: block;
  animation: duckWaddle 0.45s ease-in-out infinite;
  transform-origin: 46px 85px;
}

@keyframes duckStepL {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-3px); }
}
@keyframes duckStepR {
  0%,100% { transform: translateY(-3px); }
  50%     { transform: translateY(0); }
}
.duck-foot-l { transform-origin: 28px 88px; animation: duckStepL 0.45s ease-in-out infinite; }
.duck-foot-r { transform-origin: 60px 88px; animation: duckStepR 0.45s ease-in-out infinite; }

.duck-bubble {
  position: absolute; bottom: 74px; left: 50%;
  transform: translateX(-40%);
  background: var(--paper); border: 1.5px solid var(--ink);
  border-radius: 8px 12px 10px 10px;
  padding: 0.25rem 0.55rem;
  font-family: var(--font-hand); font-size: 0.92rem;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 30;
  box-shadow: 2px 2px 0 rgba(26,26,26,0.12);
}
.duck-bubble.visible { opacity: 1; transform: translateX(-40%) translateY(-3px); }

/* ═══════════════════════════════════════════════
   3. FLOATING SATELLITE (Writing section)
═══════════════════════════════════════════════ */
.floating-satellite {
  position: absolute; top: 1.5rem; left: 1rem;
  width: 70px; height: 60px;
  cursor: pointer; pointer-events: all; z-index: 15;
  animation: satelliteFloat 7s ease-in-out infinite;
}
@keyframes satelliteFloat {
  0%,100% { transform: translateY(0) rotate(-4deg); }
  50%     { transform: translateY(-16px) rotate(4deg); }
}
.satellite-ping-text {
  position: absolute; top: -14px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--ink); border-radius: 3px;
  padding: 0.1rem 0.35rem; white-space: nowrap;
  opacity: 0; transition: opacity 0.2s;
  pointer-events: none;
}
.floating-satellite:hover .satellite-ping-text,
.floating-satellite.pinging .satellite-ping-text { opacity: 1; }

/* ═══════════════════════════════════════════════
   BLACK HOLE SWALLOW OVERLAY (Canvas Physics)
═══════════════════════════════════════════════ */
.bh-swallow-overlay {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(244,241,232,0.96);
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease;
  backdrop-filter: blur(3px);
  cursor: pointer;
}
.bh-swallow-overlay.active { opacity: 1; pointer-events: all; }

.bh-swallow-canvas-wrap {
  width: min(85vw, 680px);
  aspect-ratio: 8/5;
  display: block;
}
.bh-swallow-canvas {
  width: 100%; height: 100%; display: block;
}

.bh-swallow-teleport {
  font-family: var(--font-hand);
  font-size: clamp(1.8rem, 4.5vw, 2.7rem);
  font-weight: 700;
  color: var(--ink);
  margin-top: 0.8rem;
  margin-bottom: 0.1rem;
  opacity: 0;
  text-align: center;
  letter-spacing: -0.01em;
}

.bh-swallow-msg {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 600;
  color: var(--ink);
  margin-top: 0.2rem;
  opacity: 0;
  text-align: center;
}
.bh-swallow-sub {
  font-family: var(--font-mono); font-size: 0.95rem; color: var(--ink-faint);
  letter-spacing: 0.04em; margin-top: 0.25rem; opacity: 0; text-align: center;
}
.bh-swallow-hint {
  font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-light);
  margin-top: 0.9rem; opacity: 0; text-align: center;
}
.bh-swallow-overlay.active .bh-swallow-teleport { animation: teleportHandwritten 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.15s forwards; }
.bh-swallow-overlay.active .bh-swallow-msg      { animation: fadeInMsg 0.4s ease-out 0.45s forwards; }
.bh-swallow-overlay.active .bh-swallow-sub      { animation: fadeInMsg 0.4s ease-out 0.75s forwards; }
.bh-swallow-overlay.active .bh-swallow-hint     { animation: fadeInMsg 0.4s ease-out 1.05s forwards; }

@keyframes teleportHandwritten {
  0%   { opacity: 0; transform: scale(0.8) rotate(-3deg) translateY(12px); }
  70%  { opacity: 1; transform: scale(1.06) rotate(1deg) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) rotate(0deg) translateY(0); }
}

@keyframes fadeInMsg { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Avatar sucked in animation */
@keyframes avatarSuckedIn {
  0%   { transform: rotate(0deg) scale(1) translate(0,0); opacity: 1; }
  35%  { transform: rotate(180deg) scale(0.65) translate(20px,-20px); opacity: 0.8; }
  70%  { transform: rotate(540deg) scale(0.15) translate(50px,-40px); opacity: 0.3; }
  100% { transform: rotate(720deg) scale(0) translate(70px,-60px); opacity: 0; }
}
.avatar-sucked { animation: avatarSuckedIn 0.8s ease-in forwards !important; }

/* ═══════════════════════════════════════════════
   HERO SECTION
═══════════════════════════════════════════════ */
.hero {
  min-height: calc(100vh - 65px);
  display: flex;
  align-items: center;
  padding: 0;
}
.hero .container { width: 100%; }
.hero-grid { display: grid; grid-template-columns: 1fr auto; gap: clamp(1rem, 2vw, 2.2rem); align-items: center; position: relative; z-index: 1; }
@media (max-width: 700px) { .hero-grid { grid-template-columns: 1fr; } .hero-doodle-col { order: -1; } }

.hero-label { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-faint); letter-spacing: 0.05em; margin-bottom: 0.05rem; }
.hero-city  { font-family: var(--font-hand); font-size: 0.95rem; color: var(--ink-light); margin-bottom: 0.25rem; font-style: italic; }
.hero-headline { font-family: var(--font-hand); font-size: clamp(1.75rem, 3.2vw, 2.7rem); font-weight: 700; line-height: 1.05; margin-bottom: 0.45rem; display: flex; flex-direction: column; }
.hero-headline .line { display: block; }
.underline-scribble { position: relative; display: inline-block; width: max-content; }
.underline-scribble::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 8'%3E%3Cpath d='M0,4 C30,1 60,7 90,4 C120,1 150,7 180,4 C210,1 240,7 270,4 C285,2 295,6 300,4' stroke='%231a1a1a' stroke-width='2.2' fill='none'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}
.hero-bio { font-size: clamp(0.84rem, 1vw, 0.94rem); color: var(--ink-light); max-width: 500px; margin-bottom: 0.75rem; line-height: 1.45; }
.hero-cta-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.hero-divider { font-family: var(--font-hand); color: var(--ink-faint); font-size: 0.9rem; }

/* BUTTONS */
.btn-sketch { display: inline-block; font-family: var(--font-hand); font-size: 1rem; font-weight: 600; color: var(--ink); text-decoration: none; padding: 0.3rem 0.9rem; border: 2px solid var(--ink); border-radius: 3px 8px 4px 9px / 8px 3px 9px 4px; transition: background 0.15s, transform 0.1s; }
.btn-sketch:hover { background: var(--ink); color: var(--paper); transform: translate(-1px,-1px); }
.btn-sketch-sm { display: inline-block; font-family: var(--font-hand); font-size: 0.92rem; font-weight: 600; color: var(--ink); text-decoration: none; padding: 0.2rem 0.75rem; border: 1.5px solid var(--ink); border-radius: 3px 7px 4px 8px / 7px 3px 8px 4px; transition: background 0.15s, transform 0.1s; }
.btn-sketch-sm:hover { background: var(--ink); color: var(--paper); transform: translate(-1px,-1px); }
.link-inline { font-family: var(--font-hand); font-size: 0.98rem; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-style: wavy; transition: opacity 0.15s; }
.link-inline:hover { opacity: 0.6; }

/* HERO AVATAR */
.hero-doodle-col { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; z-index: 2; }

/* Perpetual avatar frame jiggle — film-reel effect, always on */
@keyframes avatarFrameJiggle {
  0%,100% { transform: rotate(1.2deg) translate(0, 0); }
  5%  { transform: rotate(1.8deg) translate(1px, -1px); }
  10% { transform: rotate(0.6deg) translate(-1px, 0px); }
  15% { transform: rotate(2deg) translate(0px, 1px); }
  20% { transform: rotate(1deg) translate(1px, 0px); }
  25% { transform: rotate(1.5deg) translate(-1px, -1px); }
  30% { transform: rotate(0.8deg) translate(0px, 1px); }
  35% { transform: rotate(1.9deg) translate(1px, 0px); }
  40% { transform: rotate(1.2deg) translate(0, 0); }
  100% { transform: rotate(1.2deg) translate(0, 0); }
}

.doodle-frame {
  position: relative;
  padding: 0.35rem;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 4px 12px 6px 14px / 14px 4px 12px 6px;
  box-shadow: 3px 3px 0 rgba(26,26,26,0.12);
  animation: avatarFrameJiggle 6s steps(1, end) infinite;
  transform-origin: center;
}
.portrait-sketch { width: clamp(110px, 12vw, 155px); height: auto; display: block; }
.avatar-badges {
  display: flex; align-items: center; justify-content: center; gap: 0.35rem;
  margin-top: 0.15rem;
  font-family: var(--font-hand); font-size: 0.8rem; color: var(--ink-faint);
}
.badge-item { display: inline-block; }
.badge-divider { color: var(--rule-color); }

/* ═══════════════════════════════════════════════
   ABOUT SECTION
═══════════════════════════════════════════════ */
.about-section {
  min-height: calc(100vh - 65px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.6rem 0;
}
.about-section .container { width: 100%; }
.about-grid { display: grid; grid-template-columns: 1fr 310px; gap: clamp(1.2rem, 2.5vw, 3rem); align-items: start; position: relative; z-index: 1; }
@media (max-width: 800px) { .about-grid { grid-template-columns: 1fr; } }
.about-intro { font-family: var(--font-hand); font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 600; margin-bottom: 0.4rem; line-height: 1.3; }
.about-body  { font-size: 0.9rem; color: var(--ink-light); margin-bottom: 0.4rem; line-height: 1.45; }
.manifesto-quote {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.8rem;
  padding: 0.45rem 0.4rem;
  max-width: 100%;
  border-top: 1px dashed var(--rule-color);
  border-bottom: 1px dashed var(--rule-color);
}
.quote-content-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.manifesto-quote .quote-text {
  font-family: var(--font-hand);
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
  margin: 0;
  padding: 0;
}
.manifesto-quote .quote-author {
  font-family: var(--font-hand);
  font-size: 0.92rem;
  font-weight: 600;
  font-style: normal;
  color: var(--ink-light);
  text-align: right;
  align-self: flex-end;
}
.quote-bracket {
  width: 13px;
  height: 46px;
  flex-shrink: 0;
  align-self: center;
}
.skills-label  { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-faint); margin-bottom: 0.35rem; letter-spacing: 0.04em; }
.skills-list   { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 0.4rem; }
.skill-tag     { font-family: var(--font-hand); font-size: 0.88rem; font-weight: 500; display: inline-block; padding: 0.08rem 0.45rem; border: 1px solid var(--ink); border-radius: 2px 5px 3px 6px / 5px 2px 6px 3px; background: transparent; transition: background 0.12s; cursor: default; }
.skill-tag:hover { background: var(--ink); color: var(--paper); }
.stats-row  { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.35rem; }
.stat-item  { display: flex; flex-direction: column; align-items: center; }
.stat-num   { font-family: var(--font-hand); font-size: 1.5rem; font-weight: 700; line-height: 1; }
.stat-label { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-faint); letter-spacing: 0.04em; }
.stat-divider { font-family: var(--font-mono); color: var(--rule-color); font-size: 0.95rem; align-self: center; }

/* ═══════════════════════════════════════════════
   SECTION HEADERS
═══════════════════════════════════════════════ */
.section-header { margin-bottom: 0.8rem; }
.section-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.section-title  { font-family: var(--font-mono); font-size: clamp(1.35rem, 2.5vw, 1.85rem); font-weight: 400; letter-spacing: 0.05em; line-height: 1.1; margin-bottom: 0.15rem; }
.title-squiggle { width: 85px; height: 8px; margin-bottom: 0.25rem; }
.title-squiggle svg { width: 100%; height: 100%; }
.section-sub    { font-family: var(--font-hand); font-size: 0.94rem; color: var(--ink-light); font-style: italic; }

/* ═══════════════════════════════════════════════
   WORK SECTION
═══════════════════════════════════════════════ */
.work-section {
  min-height: calc(100vh - 65px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.6rem 0;
}
.work-section .container { width: 100%; }
.work-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 0.9rem; position: relative; z-index: 1; }
@media (max-width: 680px) { .work-grid { grid-template-columns: 1fr; } }
.project-card { padding: 0.85rem; display: flex; flex-direction: column; gap: 0.3rem; position: relative; transition: transform 0.15s, box-shadow 0.15s; cursor: default; }
.project-card:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--ink); }
.project-card.featured { grid-column: span 2; flex-direction: row; align-items: flex-start; gap: 0.9rem; }
@media (max-width: 680px) { .project-card.featured { grid-column: span 1; flex-direction: column; } }
.card-number  { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-faint); letter-spacing: 0.05em; margin-bottom: 0.1rem; }
.featured-tag { font-family: var(--font-hand); font-style: italic; letter-spacing: 0; }
.card-body    { flex: 1; }
.card-tags    { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.tag          { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; padding: 0.04rem 0.3rem; border: 1px solid var(--ink-light); border-radius: 2px; color: var(--ink-light); }
.card-title   { font-family: var(--font-hand); font-size: 1.08rem; font-weight: 700; margin-bottom: 0.2rem; line-height: 1.2; }
.card-desc    { font-size: 0.88rem; color: var(--ink-light); line-height: 1.4; margin-bottom: 0.35rem; }
.card-meta    { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; }
.card-year    { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-faint); }
.card-link    { font-family: var(--font-hand); font-size: 0.88rem; font-weight: 600; color: var(--ink); text-decoration: none; transition: opacity 0.15s; }
.card-link:hover { text-decoration: underline; text-underline-offset: 3px; opacity: 0.7; }
.card-doodle  { width: 55px; height: 55px; flex-shrink: 0; align-self: flex-end; opacity: 0.7; }
.card-doodle svg { width: 100%; height: 100%; }

/* ═══════════════════════════════════════════════
   BLOG / WRITING SECTION
═══════════════════════════════════════════════ */
.blog-section {
  min-height: calc(100vh - 65px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.6rem 0;
}
.blog-section .container { width: 100%; }
.blog-list    { display: flex; flex-direction: column; gap: 0; margin-bottom: 0.4rem; }
.blog-entry   { padding: 0.45rem 0 0.25rem; cursor: pointer; position: relative; z-index: 1; }
.blog-entry-inner { display: grid; grid-template-columns: 110px 1fr auto; gap: 0.5rem 0.9rem; align-items: start; }
@media (max-width: 600px) { .blog-entry-inner { grid-template-columns: 1fr auto; } .blog-meta-left { grid-column: span 2; } }
.blog-meta-left { display: flex; flex-direction: column; gap: 0.15rem; padding-top: 0.05rem; }
.blog-date      { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-faint); letter-spacing: 0.03em; }
.blog-tag-pill  { display: inline-block; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--ink-light); border: 1px solid var(--rule-color); border-radius: 2px; padding: 0.02rem 0.22rem; }
.blog-content   { flex: 1; }
.blog-title     { font-family: var(--font-hand); font-size: 1.05rem; font-weight: 600; line-height: 1.2; margin-bottom: 0.1rem; }
.blog-title a   { color: var(--ink); text-decoration: none; transition: opacity 0.15s; }
.blog-entry:hover .blog-title a { text-decoration: underline; text-underline-offset: 3px; text-decoration-style: wavy; }
.blog-excerpt   { font-size: 0.84rem; color: var(--ink-light); line-height: 1.35; }
.blog-arrow     { font-family: var(--font-hand); font-size: 1.15rem; color: var(--ink-faint); align-self: center; transition: transform 0.15s, color 0.15s; }
.blog-entry:hover .blog-arrow { transform: translateX(4px); color: var(--ink); }
.blog-footer    { display: flex; justify-content: flex-end; margin-top: 0.25rem; }

/* ═══════════════════════════════════════════════
   CONTACT SECTION
═══════════════════════════════════════════════ */
.contact-section {
  min-height: calc(100vh - 70px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem 0;
}
.contact-section .container { width: 100%; }
.contact-grid { display: grid; grid-template-columns: 1fr 240px; gap: clamp(1.2rem, 2.5vw, 3rem); align-items: center; position: relative; z-index: 1; }
@media (max-width: 700px) { .contact-grid { grid-template-columns: 1fr; } .contact-doodle-col { order: -1; } }
.contact-intro { font-size: 0.95rem; color: var(--ink-light); margin-bottom: 0.9rem; max-width: 440px; line-height: 1.5; }
.email-link    { display: inline-block; font-family: var(--font-hand); font-size: clamp(1.25rem, 2.2vw, 1.7rem); font-weight: 700; color: var(--ink); text-decoration: none; margin-bottom: 0.9rem; position: relative; }
.email-text    { display: block; }
.email-underline { display: block; width: 100%; height: 5px; margin-top: -2px; }
.email-link:hover .email-text { opacity: 0.7; }
.social-links  { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.social-link   { font-family: var(--font-mono); font-size: 1rem; color: var(--ink); text-decoration: none; letter-spacing: 0.03em; transition: opacity 0.15s, letter-spacing 0.15s; cursor: pointer; }
.social-link:hover { opacity: 0.6; letter-spacing: 0.06em; }

.contact-doodle-col { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; min-height: 250px; position: relative; }
.hacker-avatar { width: clamp(140px, 16vw, 195px); height: auto; filter: drop-shadow(2px 2px 0px rgba(26,26,26,0.15)); transition: transform 0.2s ease; cursor: pointer; }
.avatar-calm  { display: block; }
.avatar-panic { display: none; }
.hacker-avatar:hover { transform: rotate(-1deg) scale(1.02); }
.contact-doodle-label { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-faint); letter-spacing: 0.04em; text-align: center; }
.contact-doodle-sub   { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-light); opacity: 0.7; text-align: center; }

@keyframes steamRise {
  0%   { opacity: 0; transform: translateY(0); }
  50%  { opacity: 0.8; transform: translateY(-4px); }
  100% { opacity: 0; transform: translateY(-8px); }
}
.coffee-steam { animation: steamRise 2s ease-in-out infinite; }

/* ═══════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */
.site-footer  { padding-bottom: 2rem; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.2rem; }
.footer-copy  { font-family: var(--font-hand); font-size: 1rem; color: var(--ink-light); }
.footer-stack { font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink-faint); letter-spacing: 0.04em; }
.footer-back  { font-family: var(--font-hand); font-size: 1rem; color: var(--ink); text-decoration: none; transition: opacity 0.15s; }
.footer-back:hover { opacity: 0.6; }
.sketch-box   { border: 1.5px solid var(--ink); border-radius: 3px 7px 4px 8px / 7px 3px 8px 4px; }

/* ═══════════════════════════════════════════════
   SCROLL REVEAL & CURSOR
═══════════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.cursor-blink::after { content: '|'; animation: blink 1.1s step-end infinite; margin-left: 1px; font-weight: 300; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* ═══════════════════════════════════════════════
   RESPONSIVE OVERHAUL (Mobile & Tablet)
═══════════════════════════════════════════════ */
@media (max-width: 850px) {
  /* Hide absolute background animations that cause mobile collisions */
  .about-fx,
  .work-fx,
  .pulsar-wrap,
  .contact-fx,
  .floating-satellite,
  .walking-cat-container,
  .work-duck-container,
  .sticky-hero,
  .sticky-about,
  .sticky-writing,
  .sticky-contact {
    display: none !important;
  }

  /* Section Rhythm on Mobile */
  .hero {
    min-height: auto !important;
    padding: 1.8rem 0 !important;
    display: block !important;
  }
  .about-section,
  .work-section,
  .blog-section,
  .contact-section {
    min-height: auto !important;
    padding: 2rem 0 !important;
  }

  .hero .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
  }

  /* Header on Mobile */
  .site-header {
    padding: 0.55rem 0 0.35rem;
  }
  .logo-block {
    gap: 0.5rem;
  }
  .logo-bh-wrap {
    width: 64px;
    height: 40px;
  }
  .logo-name {
    font-size: 1.15rem;
  }
  .logo-role {
    font-size: 0.75rem;
  }
  .main-nav {
    gap: 0.6rem;
  }
  .nav-link {
    font-size: 0.92rem;
  }

  /* Hero on Mobile — arranged in clean vertical comic flow */
  .hero-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    width: 100%;
  }
  .hero-doodle-col {
    order: -2;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .avatar-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem 0.45rem;
    max-width: 92vw;
    margin: 0.45rem auto 0;
    text-align: center;
    line-height: 1.4;
    font-size: 0.78rem;
  }
  
  /* Hero Interactive Black Hole Showcase on Mobile */
  .hero-fx {
    display: flex !important;
    position: relative !important;
    right: auto !important;
    top: auto !important;
    width: min(92vw, 320px) !important;
    height: 195px !important;
    margin: 0.6rem auto 0.8rem !important;
    opacity: 0.95 !important;
    z-index: 2 !important;
    pointer-events: all !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    order: -1 !important;
  }
  .hero-bh-canvas {
    width: 100% !important;
    height: 155px !important;
    display: block !important;
  }
  .hero-fx-annotation {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    margin-top: 0.25rem !important;
    transform: rotate(-1deg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 0.82rem !important;
    line-height: 1.25 !important;
    gap: 0.35rem !important;
  }
  .hero-fx-annotation svg {
    width: 48px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
  }

  .hero-text {
    width: 100%;
    order: 0;
  }
  .hero-headline {
    font-size: clamp(1.6rem, 6.5vw, 2.2rem);
  }
  .hero-bio {
    font-size: 0.88rem;
    line-height: 1.48;
    margin-bottom: 0.8rem;
  }

  /* About on Mobile */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .skills-box {
    padding: 0.75rem;
  }
  .stats-row {
    justify-content: space-around;
    gap: 0.6rem;
    margin-top: 0.8rem;
  }
  .manifesto-quote {
    margin-top: 0.8rem;
    max-width: 100%;
  }

  /* Work on Mobile */
  .work-grid {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }
  .project-card.featured {
    grid-column: span 1;
    flex-direction: column;
  }
  .card-doodle {
    display: none;
  }

  /* Blog / Writing on Mobile */
  .blog-entry-inner {
    grid-template-columns: 1fr auto;
    gap: 0.35rem 0.6rem;
  }
  .blog-meta-left {
    grid-column: span 2;
  }

  /* Contact on Mobile */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .contact-doodle-col {
    order: -1;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
  }
  .contact-doodle-label {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--ink-faint);
    text-align: center;
    max-width: 320px;
    line-height: 1.45;
    margin: 0.35rem 0 0.1rem;
  }
  .contact-doodle-sub {
    font-family: var(--font-hand);
    font-size: 0.82rem;
    color: var(--ink-light);
    text-align: center;
    line-height: 1.3;
    margin: 0;
  }
  .social-links {
    gap: 0.4rem 0.7rem;
  }
}

@media print {
  body { background-image: none; }
  .noise-overlay, .section-fx { display: none; }
  .site-header { position: static; }
  .walking-cat-container, .work-duck-container { display: none; }
}