/* ============================================================
   CRDO — THE QUESTIONABLY DESIGNED PORTFOLIO
   "Professional code. Terrible drawings."
   Design system v1.1 — paint.css
   ONE visual language: paper + ink + neon. Intentionally clumsy,
   actually accessible, responsive, fast. No frameworks.
   Fonts (max 3 + 1 spice): Montserrat display / IBM Plex Sans body /
   system mono / Oooh Baby annotations ONLY.
   ============================================================ */

:root {
  /* ---- color tokens (strict — no random colors) ---- */
  --paper: #f7f5ef;            /* page */
  --paper-2: #fafaf7;          /* nav / alt surface */
  --card: #fffefb;             /* cards */
  --ink: #111111;              /* primary ink */
  --ink-2: #2a2a2a;            /* soft ink */
  --muted: #55534e;            /* secondary text */
  --faint: #8a877f;            /* captions */
  --line: rgba(17, 17, 17, 0.14);
  --accent: #39ff14;           /* neon: actions, active, status, terminal */
  --neon: #39ff14;             /* alias — same token */
  --neon-ink: #0a7a00;         /* readable green on paper */
  --neon-deep: #16c400;
  --yellow: #ffe500;           /* sticky notes + tape only */
  --sticky-green: #e6ffb8;     /* alt sticky note only */
  --tint-green: #f0fbe4;       /* code + quote tint on paper */
  --red: #ff4d4d;              /* errors / browser dot / rare stamp */
  --red-deep: #c22727;         /* hand-written warnings, doodle arrows */
  --paper-white: #ffffff;      /* inner surfaces (url bars, tags) */
  --term-bg: #0e0e0e;          /* terminal family */
  --term-panel: #1b1b1b;
  --term-text: #d8ffd2;
  /* ---- background doodle tokens (atmosphere, never content) ---- */
  --doodle-bg-ink: rgba(17, 17, 17, 0.14);
  --doodle-bg-ink-soft: rgba(17, 17, 17, 0.10);
  --doodle-bg-accent: rgba(22, 196, 0, 0.55);
  --tape: rgba(255, 229, 0, 0.55);
  /* ---- shadow tokens (one hard-offset language) ---- */
  --shadow: 4px 4px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --shadow-lg: 6px 6px 0 var(--ink);
  /* ---- font tokens (do not add more families) ---- */
  --font-display: "Montserrat", -apple-system, "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --font-hand: "Oooh Baby", cursive;   /* annotations only — never body/UI */
  /* ---- type scale ---- */
  --text-display-xl: clamp(3rem, 8.4vw, 6rem);
  --text-display-l: clamp(2.4rem, 7vw, 5rem);
  --text-h1: clamp(2.4rem, 6.5vw, 4.4rem);
  --text-h2: clamp(2.1rem, 5.2vw, 3.6rem);
  --text-h3: clamp(1.6rem, 3vw, 2.3rem);
  --text-lead: 1.12rem;
  --text-body: 1rem;
  --text-small: 0.9rem;
  --text-mono: 0.85rem;
  --text-caption: 0.72rem;
  /* ---- spacing scale ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 22px; --space-6: 30px; --space-8: 44px; --space-10: 64px;
  --space-12: 88px;
  /* ---- shape tokens (one hand-drawn language) ---- */
  --radius-a: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --radius-b: 15px 225px 15px 255px / 225px 15px 255px 15px;
  --radius-c: 225px 18px 255px 12px / 12px 255px 18px 225px;
  /* ---- rotation limits: text/cards ±2deg max, doodles ±5deg ---- */
  --tilt-1: -1deg; --tilt-2: 1deg;
  /* ---- layout ---- */
  --max: 1140px;
  --gutter: 22px;
  /* ---- z-index system (background whispers, content speaks) ---- */
  --z-background: 0;
  --z-background-doodles: 1;
  --z-content: 10;
  --z-navigation: 100;
  --z-modal: 200;
  /* ---- motion tokens (doodles stay Level 3: subtle, slow, awkward) ---- */
  --motion-fast: 180ms;      /* micro + interactive */
  --motion-normal: 320ms;    /* component interaction */
  --motion-slow: 600ms;      /* entrances */
  --motion-ambient: 9s;      /* background drift */
  --doodle-shift-xs: 3px;
  --doodle-shift-sm: 6px;
  --doodle-rotate-xs: 1deg;
  --doodle-rotate-sm: 2deg;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
  overflow-x: clip;
}
body {
  font-family: var(--font-body);
  background: var(--paper);
  background-image: radial-gradient(rgba(17, 17, 17, 0.055) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
  min-height: 100vh;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin-bottom: 0.9em; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; }

/* visible professional focus */
:focus-visible {
  outline: 3px solid var(--neon-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

/* skip link */
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 18px;
  border-radius: 0 0 10px 10px; text-decoration: none; font-weight: 700;
  transition: top 0.2s;
}
.skip:focus { top: 0; color: #fff; }

/* ---------- layout ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 22px; }
section.block { padding-block: 72px 8px; position: relative; }
.kicker {
  display: inline-block; font-family: var(--font-mono); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--ink); color: var(--neon);
  padding: 5px 14px 6px; transform: rotate(-1.5deg);
  border-radius: 12px 3px 12px 3px;
  margin-bottom: 18px;
}
.sec-title {
  font-size: var(--text-h2);
  font-weight: 800; text-transform: uppercase; margin-bottom: 10px;
}
.sec-title .neon-hl {
  background: linear-gradient(transparent 55%, var(--neon) 55%, var(--neon) 92%, transparent 92%);
  padding: 0 6px;
}
.sec-sub { color: var(--muted); max-width: 62ch; font-size: 1.02rem; }
.hand {
  font-family: var(--font-hand); font-weight: 400; font-size: 1.5rem; line-height: 1.15;
  color: var(--ink-2);
}
.hand--red { color: var(--red-deep); }
.hand--green { color: var(--neon-ink); }

/* scribble underline for headings */
.scribble { position: relative; display: inline-block; }
.scribble > svg {
  position: absolute; left: 0; bottom: -0.28em; width: 100%; height: 0.42em;
  overflow: visible; pointer-events: none;
}
.scribble > svg path { stroke: var(--neon-deep); stroke-width: 5; fill: none; stroke-linecap: round; }
.scribble--ink > svg path { stroke: var(--ink); }

/* ---------- header / nav ---------- */
.site-head {
  position: sticky; top: 0; z-index: 100;
  margin: 0 auto; max-width: var(--max); padding: 12px 22px 0;
}
.nav {
  display: flex; align-items: center; gap: 18px;
  background: var(--paper-2);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-a);
  box-shadow: var(--shadow);
  padding: 10px 10px 10px 20px;
  position: relative;
}
.nav::before { /* crooked tape on nav */
  content: ""; position: absolute; top: -13px; left: 64px; width: 92px; height: 24px;
  background: var(--tape); border-left: 2px dashed rgba(17,17,17,.25);
  border-right: 2px dashed rgba(17,17,17,.25);
  transform: rotate(-4deg); opacity: 0.9;
}
.logo {
  font-family: var(--font-hand); font-weight: 400; font-size: 2.1rem; line-height: 1;
  text-decoration: none; transform: rotate(-2deg); display: inline-block;
  letter-spacing: 0.5px; white-space: nowrap;
}
.logo b { color: var(--neon-ink); font-weight: 400; }
.logo small { font-family: var(--font-mono); font-size: 0.65rem; display: block; letter-spacing: 2px; color: var(--faint); }
.nav-links { display: flex; gap: 2px; margin-left: auto; align-items: center; list-style: none; padding: 0; }
.nav-links a {
  text-decoration: none; font-weight: 700; font-size: 0.92rem;
  font-family: var(--font-mono); letter-spacing: 0.04em;
  padding: 9px 13px; border-radius: 10px 3px 10px 3px;
  border: 2px solid transparent; position: relative; display: inline-block;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.nav-links a:hover {
  transform: rotate(-2deg) translateY(-2px);
  border-color: var(--ink); background: #fff;
  text-decoration: underline wavy var(--neon-deep) 2px; text-underline-offset: 5px;
}
.nav-links a[aria-current="page"] {
  border-color: var(--ink); background: var(--neon);
}
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 800; font-size: 1rem;
  text-decoration: none; color: var(--ink);
  background: var(--neon); border: 2.5px solid var(--ink);
  border-radius: var(--radius-b); box-shadow: var(--shadow);
  padding: 12px 24px; min-height: 48px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}
.btn:hover { transform: rotate(-1.2deg) translate(-1px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn--paper { background: var(--card); }
.btn--sm { padding: 8px 16px; min-height: 44px; font-size: 0.88rem; }
.nav-cta { margin-left: 6px; white-space: nowrap; }
.nav-links .nav-cta { display: none; }
.nav-toggle {
  display: none; margin-left: auto;
  background: var(--card); border: 2.5px solid var(--ink); border-radius: 12px 4px 12px 4px;
  font-family: var(--font-mono); font-weight: 700; font-size: 0.9rem;
  padding: 10px 16px; min-height: 44px; cursor: pointer; box-shadow: var(--shadow-sm);
}

/* ---------- hero ---------- */
.hero { padding-block: 56px 10px; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: start; }
.hero-art { position: relative; margin-top: 64px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700;
  border: 2px solid var(--ink); background: var(--card);
  border-radius: var(--radius-c); padding: 7px 16px; transform: rotate(-1deg);
  box-shadow: var(--shadow-sm); margin-bottom: 20px;
}
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--neon-deep); border: 2px solid var(--ink); animation: blink 1.6s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.hero h1 {
  font-size: var(--text-display-xl);
  font-weight: 900; text-transform: uppercase; line-height: 0.94;
  margin-bottom: 14px;
}
.hero h1 .stroke {
  color: transparent; -webkit-text-stroke: 2.5px var(--ink);
}
.hero h1 .fill-neon { background: var(--neon); padding: 0 12px; display: inline-block; transform: rotate(-1.2deg); border: 3px solid var(--ink); border-radius: var(--radius-b); box-shadow: var(--shadow-sm); }
.hero-role { font-family: var(--font-mono); font-size: 0.95rem; margin: 16px 0 6px; }
.hero-role strong { background: var(--ink); color: var(--neon); padding: 2px 10px; border-radius: 6px; }
.tech-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 20px; list-style: none; padding: 0; }
.tech-pills li {
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700;
  border: 2px solid var(--ink); background: var(--card);
  padding: 5px 12px; box-shadow: 2px 2px 0 var(--ink);
}
.tech-pills li:nth-child(odd) { border-radius: 12px 4px 12px 4px; transform: rotate(-1deg); }
.tech-pills li:nth-child(even) { border-radius: 4px 12px 4px 12px; transform: rotate(1deg); }
.tech-pills li.hot { background: var(--neon); }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin: 20px 0 16px; }
.work-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700;
  margin-top: 14px;
}
.work-banner .pill { border: 2px solid var(--ink); background: var(--card); border-radius: 999px; padding: 6px 14px; box-shadow: 2px 2px 0 var(--ink); }
.work-banner .pill--green { background: var(--neon); }

/* hero art — intentionally awkward workstation */
.hero-art { position: relative; }
.paint-frame {
  background: var(--card); border: 3px solid var(--ink);
  border-radius: var(--radius-a); box-shadow: 6px 6px 0 var(--ink);
  padding: 18px; transform: rotate(1.1deg); position: relative;
}
.paint-frame::before, .paint-frame::after {
  content: ""; position: absolute; width: 110px; height: 28px; background: var(--tape);
  border-left: 2px dashed rgba(17,17,17,.25); border-right: 2px dashed rgba(17,17,17,.25);
}
.paint-frame::before { top: -16px; left: 30px; transform: rotate(-6deg); }
.paint-frame::after { bottom: -14px; right: 34px; transform: rotate(5deg); }
.paint-frame svg.workstation { width: 100%; height: auto; display: block; }
.sticky-note {
  position: absolute; background: var(--yellow); border: 2px solid var(--ink);
  font-family: var(--font-hand); font-weight: 400; font-size: 1.35rem; line-height: 1.1;
  padding: 10px 14px; max-width: 190px; box-shadow: 3px 3px 0 var(--ink);
}
.sticky-note--a { top: -24px; right: -8px; transform: rotate(6deg); border-radius: 4px 14px 4px 14px; }
.sticky-note--b { bottom: -20px; left: -10px; transform: rotate(-5deg); background: var(--card); border-radius: 14px 4px 14px 4px; font-size: 1.15rem; }
.hero-note-arrow { position: absolute; pointer-events: none; }

/* whoami mini terminal */
.mini-term {
  margin-top: 22px; background: var(--term-bg); color: var(--term-text);
  border: 3px solid var(--ink); border-radius: 14px 5px 14px 5px;
  box-shadow: var(--shadow); overflow: hidden; transform: rotate(-0.6deg);
  font-family: var(--font-mono); font-size: 0.86rem;
}
.mini-term header {
  display: flex; gap: 7px; align-items: center; padding: 9px 14px;
  background: #1c1c1c; border-bottom: 2px solid #333;
}
.mini-term header i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #000; display: block; }
.mini-term header i:nth-child(1) { background: #ff5f57; }
.mini-term header i:nth-child(2) { background: #febc2e; }
.mini-term header i:nth-child(3) { background: #28c840; }
.mini-term header span { margin-left: 8px; color: #888; font-size: 0.75rem; }
.mini-term .body { padding: 14px 16px 16px; line-height: 1.75; }
.mini-term .p { color: var(--neon); font-weight: 700; }
.mini-term .cursor { display: inline-block; width: 9px; height: 1.1em; background: var(--neon); vertical-align: text-bottom; animation: blink 1s steps(1) infinite; }
.stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 30px; }
.stat {
  background: var(--card); border: 2.5px solid var(--ink); padding: 12px 8px; text-align: center;
  box-shadow: var(--shadow-sm);
}
.stat:nth-child(1) { border-radius: var(--radius-a); transform: rotate(-1deg); }
.stat:nth-child(2) { border-radius: var(--radius-b); transform: rotate(1deg); }
.stat:nth-child(3) { border-radius: var(--radius-c); transform: rotate(-0.6deg); }
.stat:nth-child(4) { border-radius: var(--radius-b); transform: rotate(0.8deg); }
.stat b { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; display: block; }
.stat span { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- doodle helpers ---------- */
.doodle { stroke: var(--ink); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.doodle--neon { stroke: var(--neon-deep); }
.doodle--red { stroke: var(--red-deep); }
.divider-scribble { margin: 64px auto 0; max-width: var(--max); padding: 0 22px; }
.divider-scribble svg { width: 100%; height: 26px; display: block; }

/* ---------- about / notebook ---------- */
.notebook {
  background: var(--card); border: 3px solid var(--ink);
  border-radius: var(--radius-b); box-shadow: 6px 6px 0 var(--ink);
  padding: clamp(24px, 4vw, 48px); position: relative; overflow: visible;
  background-image: repeating-linear-gradient(transparent 0 30px, rgba(43, 92, 255, 0.08) 30px 31px);
}
.notebook::before { /* red margin line */
  content: ""; position: absolute; top: 0; bottom: 0; left: 44px; width: 2px;
  background: rgba(255, 77, 77, 0.4);
}
.about-grid { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: start; position: relative; }
.avatar-taped { position: relative; transform: rotate(-3deg); }
.avatar-taped img {
  border: 3px solid var(--ink); border-radius: 8px 22px 8px 22px;
  box-shadow: var(--shadow); background: #fff; width: 100%;
}
.avatar-taped::before {
  content: ""; position: absolute; top: -14px; left: 50%; translate: -50% 0;
  width: 120px; height: 30px; background: var(--tape); transform: rotate(2deg);
  border-left: 2px dashed rgba(17,17,17,.25); border-right: 2px dashed rgba(17,17,17,.25);
}
.avatar-cap { font-family: var(--font-hand); font-size: 1.4rem; text-align: center; margin-top: 14px; transform: rotate(-2deg); }
.about-copy p { margin-bottom: 1em; }
.about-copy .lead { font-size: 1.12rem; }
.check-list { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 8px; }
.check-list li { font-weight: 600; padding-left: 34px; position: relative; }
.check-list li::before {
  content: "✓"; position: absolute; left: 0; top: -2px;
  font-family: var(--font-hand); font-weight: 400; font-size: 1.6rem; color: var(--neon-ink);
  transform: rotate(-8deg);
}

/* ---------- skills RPG ---------- */
.skills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 28px; }
.skill-card {
  background: #0e0e0e; color: var(--term-text); border: 3px solid var(--ink);
  border-radius: 16px 6px 16px 6px; box-shadow: var(--shadow);
  padding: 22px; font-family: var(--font-mono); position: relative;
}
.skill-card:nth-child(odd) { transform: rotate(-0.5deg); }
.skill-card:nth-child(even) { transform: rotate(0.5deg); }
.skill-card h3 { color: var(--neon); font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.12em; margin-bottom: 16px; }
.skill-row { margin-bottom: 14px; }
.skill-row .top { display: flex; justify-content: space-between; font-size: 0.86rem; font-weight: 700; margin-bottom: 5px; }
.skill-row .bar { letter-spacing: 1px; color: var(--neon); font-size: 0.95rem; word-break: break-all; }
.skill-row .bar .off { color: #3a3a3a; }
.skill-row .quip { color: #9a9a9a; font-size: 0.76rem; font-style: italic; }
.skill-card--paper { background: var(--card); color: var(--ink); }
.skill-card--paper h3 { color: var(--ink); }
.skill-card--paper .bar { color: var(--neon-ink); }
.skill-card--paper .bar .off { color: #cfcfcf; }
.skill-card--paper .quip { color: var(--muted); }

/* ---------- projects ---------- */
.proj-grid { display: grid; gap: 54px; margin-top: 34px; }
.proj { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 30px; align-items: center; }
.proj > * { min-width: 0; }
/* grid blowout guard: media/SVG content must never force tracks wider */
.hero-grid > *, .skills-grid > *, .about-grid > *, .lab-cols > *,
.proj-hero-grid > *, .blog-grid > *, .fact-grid > *, .stats-strip > * { min-width: 0; }
.proj:nth-child(even) .browser { order: 2; transform: rotate(1.2deg); }
.proj:nth-child(odd) .browser { transform: rotate(-1.2deg); }
.browser {
  background: var(--card); border: 3px solid var(--ink);
  border-radius: 18px 8px 18px 8px; box-shadow: 6px 6px 0 var(--ink);
  overflow: hidden; position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.proj:hover .browser { transform: rotate(0deg) scale(1.01); box-shadow: 8px 8px 0 var(--ink); }
.browser-bar {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 2.5px solid var(--ink); background: var(--paper-2);
}
.browser-bar i { width: 13px; height: 13px; border: 2.5px solid var(--ink); border-radius: 50%; display: block; }
.browser-bar i:nth-child(1) { background: var(--red); border-radius: 50% 40% 55% 45%; }
.browser-bar i:nth-child(2) { background: var(--yellow); border-radius: 40% 55% 45% 50%; }
.browser-bar i:nth-child(3) { background: var(--neon); border-radius: 55% 45% 50% 40%; }
.browser-url {
  margin-left: 8px; flex: 1; font-family: var(--font-mono); font-size: 0.72rem;
  border: 2px solid var(--ink); background: #fff; padding: 3px 12px;
  border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser img.shot { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top; background: #ddd; transition: transform 0.4s ease; }
.proj:hover img.shot { transform: scale(1.03); }
.proj-body .num { font-family: var(--font-hand); font-weight: 400; font-size: 1.5rem; color: var(--neon-ink); }
.proj-body h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); text-transform: uppercase; margin: 4px 0 8px; }
.proj-body p { color: var(--muted); }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.tag-row span { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; border: 2px solid var(--ink); background: #fff; padding: 3px 10px; border-radius: 999px; box-shadow: 2px 2px 0 var(--ink); }
.proj-links { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.text-link { font-weight: 800; text-decoration: underline wavy var(--neon-deep) 2px; text-underline-offset: 5px; }
.text-link:hover { background: var(--neon); }
.proj-note { font-family: var(--font-hand); font-size: 1.35rem; margin-top: 12px; display: inline-block; transform: rotate(-2deg); background: var(--yellow); padding: 2px 12px; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }

/* ---------- source badges & filter ---------- */
.proj-meta-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px;
}
.tag-source {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 800;
  border: 2px solid var(--ink); padding: 3px 10px; border-radius: 999px;
  box-shadow: 2px 2px 0 var(--ink); text-transform: uppercase; letter-spacing: 0.04em;
  vertical-align: middle;
}
.tag-source .dot {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block;
}
.tag-source--open {
  background: var(--neon); color: var(--ink);
}
.tag-source--open .dot {
  background: var(--ink); box-shadow: 0 0 5px var(--neon-ink);
}
.tag-source--closed {
  background: var(--card); color: var(--muted);
}
.tag-source--closed .dot {
  background: var(--muted);
}
.filter-bar {
  display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 28px;
}
.filter-bar .btn.active {
  background: var(--neon); color: var(--ink);
}
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 2px solid var(--ink);
  background: var(--card); border-radius: 50%; box-shadow: 2px 2px 0 var(--ink);
  color: var(--ink); transition: transform var(--motion-fast) ease, background var(--motion-fast) ease;
  vertical-align: middle;
}
.icon-btn:hover {
  background: var(--neon); transform: rotate(-8deg) scale(1.1);
}
.btn-icon {
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-svg {
  flex: 0 0 auto;
}

/* case study screenshot gallery */
.case-gallery {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin: 24px 0 32px;
}
@media (max-width: 720px) {
  .case-gallery { grid-template-columns: 1fr; }
}
.gallery-item {
  background: var(--card); border: 2.5px solid var(--ink); padding: 12px;
  border-radius: var(--radius-a); box-shadow: var(--shadow-sm);
}
.gallery-cap {
  font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted);
  margin-top: 10px; text-align: center;
}

/* ---------- homelab ---------- */
.lab {
  background: #0e0e0e; color: var(--term-text); border: 3px solid var(--ink);
  border-radius: 20px 8px 20px 8px; box-shadow: 6px 6px 0 var(--ink);
  padding: clamp(24px, 4vw, 44px); position: relative; overflow: hidden;
  font-family: var(--font-mono);
}
.lab h3 { font-family: var(--font-mono); color: var(--neon); letter-spacing: 0.1em; font-size: 0.9rem; margin-bottom: 18px; }
.infra-map { display: flex; flex-direction: column; align-items: center; gap: 0; margin: 10px 0 26px; }
.infra-node {
  border: 2.5px solid var(--neon); color: #fff; background: #161616;
  padding: 10px 26px; font-weight: 700; font-size: 0.9rem; text-align: center;
  min-width: min(320px, 80%);
}
.infra-node:nth-child(odd) { border-radius: 16px 5px 16px 5px; transform: rotate(-0.8deg); }
.infra-node:nth-child(even) { border-radius: 5px 16px 5px 16px; transform: rotate(0.8deg); }
.infra-node small { display: block; color: var(--accent); font-weight: 400; font-size: 0.72rem; }
.infra-wire { width: 3px; height: 26px; background: repeating-linear-gradient(var(--neon) 0 6px, transparent 6px 11px); animation: flow 1s linear infinite; }
@keyframes flow { to { background-position: 0 11px; } }
.lab-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.term-dark {
  background: #050505; border: 2px solid #2c2c2c; border-radius: 10px;
  padding: 16px; font-size: 0.82rem; line-height: 1.8; overflow-x: auto;
}
.term-dark .p { color: var(--neon); }
.term-dark .c { color: #777; }
.term-dark .cursor { display: inline-block; width: 9px; height: 1.1em; background: var(--neon); vertical-align: text-bottom; animation: blink 1s steps(1) infinite; }

/* ---------- interactive terminal ---------- */
.big-term {
  background: #0b0b0b; border: 3px solid var(--ink); border-radius: 18px 7px 18px 7px;
  box-shadow: 6px 6px 0 var(--ink); overflow: hidden; margin-top: 26px;
  font-family: var(--font-mono);
}
.big-term header { display: flex; gap: 8px; align-items: center; background: var(--term-panel); padding: 12px 18px; border-bottom: 2px solid #333; }
.big-term header i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.big-term header i:nth-child(1) { background: #ff5f57; } .big-term header i:nth-child(2) { background: #febc2e; } .big-term header i:nth-child(3) { background: #28c840; }
.big-term header span { color: #888; font-size: 0.78rem; margin-left: 10px; }
.term-screen { padding: 20px; min-height: 300px; max-height: 420px; overflow-y: auto; color: #d8ffd2; font-size: 0.88rem; line-height: 1.7; }
.term-screen .line-p { color: var(--neon); }
.term-screen .dim { color: #777; }
.term-screen a { color: var(--neon); }
.term-input-row { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-top: 2px dashed #333; }
.term-input-row label { color: var(--neon); font-size: 0.88rem; white-space: nowrap; }
#term-input {
  flex: 1; background: transparent; border: none; color: #fff;
  font-family: var(--font-mono); font-size: 0.95rem; outline: none; min-width: 0;
}
.term-hints { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 18px; }
.term-hints button {
  font-family: var(--font-mono); font-size: 0.75rem; background: var(--term-panel); color: var(--neon);
  border: 1.5px solid #3a3a3a; border-radius: 999px; padding: 6px 14px; cursor: pointer; min-height: 36px;
}
.term-hints button:hover { border-color: var(--neon); }

/* ---------- blog cards (sticky notes) ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 30px; }
.note {
  background: var(--yellow); border: 2.5px solid var(--ink); padding: 22px;
  box-shadow: var(--shadow); position: relative; display: flex; flex-direction: column;
  min-height: 260px; transition: transform 0.18s ease;
}
.note:nth-child(3n+1) { transform: rotate(-1.4deg); border-radius: 4px 16px 4px 16px; }
.note:nth-child(3n+2) { transform: rotate(1deg); border-radius: 16px 4px 16px 4px; background: var(--card); }
.note:nth-child(3n) { transform: rotate(-0.6deg); border-radius: 10px 10px 16px 4px; background: var(--sticky-green); }
.note:hover { transform: rotate(0deg) translateY(-4px); }
.note::before {
  content: ""; position: absolute; top: -13px; left: 50%; translate: -50% 0;
  width: 84px; height: 24px; background: rgba(255,255,255,0.65);
  border-left: 2px dashed rgba(17,17,17,.3); border-right: 2px dashed rgba(17,17,17,.3);
  transform: rotate(-2deg);
}
.note .cat { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; background: var(--ink); color: var(--neon); display: inline-block; padding: 3px 10px; border-radius: 999px; margin-bottom: 12px; width: fit-content; }
.note h3 { font-size: 1.15rem; text-transform: none; margin-bottom: 8px; }
.note h3 a { text-decoration: none; }
.note h3 a:hover { background: var(--neon); }
.note p { font-size: 0.9rem; color: var(--ink-2); flex: 1; }
.note .go { font-weight: 800; font-family: var(--font-mono); font-size: 0.85rem; margin-top: 12px; text-decoration: underline wavy var(--ink) 1.5px; text-underline-offset: 4px; }
/* whole blog card is clickable: title link stretches over the card */
.note { position: relative; }
.note h3 a::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
}
.note:focus-within { transform: rotate(0deg) translateY(-4px); }

/* ---------- contact ---------- */
.contact-big {
  text-align: center; background: var(--card); border: 3px solid var(--ink);
  border-radius: var(--radius-a); box-shadow: 6px 6px 0 var(--ink);
  padding: clamp(36px, 6vw, 72px) clamp(20px, 5vw, 60px);
  position: relative; transform: rotate(-0.5deg); margin-top: 28px;
}
.contact-big h2 { font-size: clamp(2.4rem, 7vw, 5rem); text-transform: uppercase; line-height: 0.95; }
.contact-big h2 .spin { display: inline-block; background: var(--neon); border: 3px solid var(--ink); border-radius: var(--radius-c); padding: 0 14px; transform: rotate(1.5deg); box-shadow: var(--shadow-sm); }
.contact-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.giant-btn { font-size: 1.35rem; padding: 18px 44px; }

/* ---------- footer: hand-drawn terminal card, centered ---------- */
footer.site-foot { margin-block: var(--space-10) var(--space-6); }
.foot-box {
  border: 3px solid var(--accent); background: #101010; color: #f2f2f2;
  border-radius: var(--radius-a); box-shadow: 6px 6px 0 rgba(57, 255, 20, 0.28);
  padding: 40px clamp(20px, 4vw, 44px) 30px;
  position: relative; text-align: center; transform: rotate(-0.4deg);
}
.foot-box::before, .foot-box::after {
  content: ""; position: absolute; width: 104px; height: 26px; background: var(--tape);
  border-left: 2px dashed rgba(0,0,0,.35); border-right: 2px dashed rgba(0,0,0,.35);
}
.foot-box::before { top: -14px; left: 8%; transform: rotate(-5deg); }
.foot-box::after { bottom: -13px; right: 8%; transform: rotate(4deg); }
.foot-box a { color: var(--accent); }
.foot-doodle { position: absolute; pointer-events: none; }
.foot-doodle--l { left: 26px; top: 30px; transform: rotate(-8deg); }
.foot-doodle--r { right: 30px; bottom: 34px; transform: rotate(7deg); }
.foot-hand { font-family: var(--font-hand); font-weight: 400; font-size: 1.6rem; color: var(--yellow); transform: rotate(-1.5deg); margin-bottom: 6px; }
.foot-logo { font-family: var(--font-display); font-weight: 900; font-size: 1.4rem; letter-spacing: -0.02em; }
.foot-logo b { color: var(--accent); font-weight: 900; }
.foot-box nav { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; margin: 14px 0 4px; }
.foot-box nav a { text-decoration: none; border-bottom: 2px wavy var(--accent); padding-bottom: 2px; }
.foot-box nav a:hover { background: var(--accent); color: #101010; }
.foot-copy { font-family: var(--font-mono); font-size: 0.78rem; color: #999; margin-top: 10px; }
.foot-small { font-family: var(--font-mono); font-size: 0.75rem; color: #777; margin-top: 16px; border-top: 2px dashed #333; padding-top: 14px; display: flex; justify-content: center; gap: 8px 26px; flex-wrap: wrap; }

/* ---------- site-wide background doodle layer ----------
   ONE sketchbook: JS injects .bg-doodles (see paint.js DOODLE LIBRARY).
   Fixed corners live in negative space, never behind text.
   Density: max 4 per viewport desktop, 2 on mobile. */
.bg-doodles {
  position: fixed; inset: 0; z-index: var(--z-background-doodles);
  pointer-events: none; overflow: hidden;
}
main, footer.site-foot { position: relative; z-index: var(--z-content); }
.site-head { z-index: var(--z-navigation); }
.bg-doodle { position: absolute; color: var(--doodle-bg-ink); line-height: 0; }
.bg-doodle svg { display: block; overflow: visible; }
.bg-doodle svg * { stroke: currentColor !important; }
.bg-doodle[data-pos="tl"] { top: 110px; left: max(14px, calc((100vw - var(--max)) / 2 - 74px)); }
.bg-doodle[data-pos="tr"] { top: 120px; right: max(14px, calc((100vw - var(--max)) / 2 - 70px)); }
.bg-doodle[data-pos="bl"] { bottom: 120px; left: max(16px, calc((100vw - var(--max)) / 2 - 64px)); }
.bg-doodle[data-pos="br"] { bottom: 110px; right: max(16px, calc((100vw - var(--max)) / 2 - 68px)); }
.bg-doodle--soft { color: var(--doodle-bg-ink-soft); }
.bg-doodle--accent { color: var(--doodle-bg-accent); }

/* ---------- doodle strip: shared wobbly art divider ---------- */
.doodle-strip {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  flex-wrap: wrap;
  margin: var(--space-8) auto 0; max-width: 640px; padding: 0 var(--gutter);
}
.doodle-strip svg { flex: 0 0 auto; }
.doodle-strip .hand { font-size: 1.3rem; white-space: nowrap; }

/* ---------- project detail pages ---------- */
.proj-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; margin-top: 26px; }
.meta-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; list-style: none; padding: 0; }
.meta-pills li { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; border: 2px solid var(--ink); background: var(--card); padding: 5px 13px; border-radius: 999px; box-shadow: 2px 2px 0 var(--ink); }
.meta-pills li.hl { background: var(--accent); }
.fact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.fact { background: var(--card); border: 2.5px solid var(--ink); box-shadow: var(--shadow-sm); padding: 16px 14px; text-align: center; }
.fact:nth-child(1) { border-radius: var(--radius-a); transform: rotate(-1deg); }
.fact:nth-child(2) { border-radius: var(--radius-b); transform: rotate(1deg); }
.fact:nth-child(3) { border-radius: var(--radius-c); transform: rotate(-0.6deg); }
.fact b { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; display: block; }
.fact span { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.spec { margin-top: 26px; }
.spec h2 { font-size: var(--text-h3); text-transform: uppercase; margin: 30px 0 10px; }
.spec h2:first-child { margin-top: 0; }
.spec ul { padding-left: 4px; list-style: none; display: grid; gap: 10px; margin-top: 12px; }
.spec ul li { padding-left: 34px; position: relative; }
.spec ul li::before { content: "✓"; position: absolute; left: 0; top: -4px; font-family: var(--font-hand); font-size: 1.6rem; color: var(--neon-ink); }
.arch { background: var(--term-bg); color: var(--term-text); border: 3px solid var(--ink); border-radius: 14px 6px 14px 6px; box-shadow: var(--shadow); padding: 20px 22px; font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.9; overflow-x: auto; margin-top: 14px; transform: rotate(0.4deg); }
.arch .p { color: var(--accent); font-weight: 700; }
.prevnext { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 40px; }

/* ---------- themed confirm modal (shared) ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(17,17,17,.55); display: none; align-items: center; justify-content: center; padding: 22px; z-index: 200; }
.modal-backdrop.open { display: flex; }
.modal-card { background: var(--card); border: 3px solid var(--ink); border-radius: var(--radius-a); box-shadow: var(--shadow-lg); max-width: 420px; width: 100%; padding: 30px 28px 26px; text-align: center; position: relative; transform: rotate(-0.8deg); }
.modal-card::before { content: ""; position: absolute; top: -14px; left: 50%; translate: -50% 0; width: 110px; height: 26px; background: var(--tape); transform: rotate(3deg); border-left: 2px dashed rgba(17,17,17,.25); border-right: 2px dashed rgba(17,17,17,.25); }
.modal-card h2 { font-size: 1.4rem; text-transform: uppercase; margin-bottom: 8px; }
.modal-card p { font-size: 0.9rem; color: var(--muted); }
.modal-card p code { font-family: var(--font-mono); font-size: 0.78rem; background: var(--tint-green); border: 1.5px solid var(--ink); border-radius: 6px; padding: 1px 7px; }
.modal-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.modal-card .hand { margin-top: 14px; display: block; }

/* ---------- reveal on scroll (vertical only: rotation on tall cards leaks sideways) ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity var(--motion-slow) ease, transform var(--motion-slow) ease; }
.reveal.in { opacity: 1; transform: none; }
.draw path { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1.2s ease; }
.draw.in path { stroke-dashoffset: 0; }

/* ---------- doodle motion library (Level 1 ambient, Level 2/3 via JS) ----
   transform + opacity only. Staggered via --dd (delay) and --dur. */
@keyframes dd-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, calc(var(--doodle-shift-xs) * -1), 0) rotate(var(--doodle-rotate-xs)); }
}
@keyframes dd-wiggle {
  0%, 100% { transform: rotate(calc(var(--doodle-rotate-xs) * -1)); }
  50% { transform: rotate(var(--doodle-rotate-xs)); }
}
@keyframes dd-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
@keyframes dd-drift {
  0%, 100% { transform: translate3d(calc(var(--doodle-shift-xs) * -1), 0, 0); }
  50% { transform: translate3d(var(--doodle-shift-xs), 0, 0); }
}
@keyframes dd-pop {
  0% { transform: scale(1) rotate(0deg); }
  40% { transform: scale(1.12) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.doodle-float { animation: dd-float var(--motion-ambient) ease-in-out infinite; animation-delay: var(--dd, 0s); }
.doodle-wiggle { animation: dd-wiggle calc(var(--motion-ambient) - 2s) ease-in-out infinite; animation-delay: var(--dd, 0s); }
.doodle-breathe { animation: dd-breathe calc(var(--motion-ambient) + 3s) ease-in-out infinite; animation-delay: var(--dd, 0s); }
.doodle-drift { animation: dd-drift calc(var(--motion-ambient) + 1s) ease-in-out infinite; animation-delay: var(--dd, 0s); }
/* single-path draw: author sets --len near the path length */
path[data-draw] { stroke-dasharray: var(--len, 140); stroke-dashoffset: var(--len, 140); }
.in path[data-draw] { transition: stroke-dashoffset 1s ease; stroke-dashoffset: 0; }
/* one-shot pop, fired by JS on click */
.doodle-pop.in { animation: dd-pop var(--motion-normal) ease; }
.note:hover .go { transform: translateX(3px); display: inline-block; }
.note .go { transition: transform var(--motion-fast) ease; }

/* ---------- page hero (subpages) ---------- */
.page-hero { padding-block: 60px 6px; }
.page-hero h1 { font-size: clamp(2.4rem, 6.5vw, 4.4rem); text-transform: uppercase; }
.crumb { font-family: var(--font-mono); font-size: 0.8rem; margin-bottom: 14px; }
.crumb a { text-decoration: underline wavy var(--neon-deep) 1.5px; text-underline-offset: 4px; font-weight: 700; }

/* article body (reskinned legacy pages keep content, new chrome) */
.article {
  background: var(--card); border: 3px solid var(--ink); border-radius: var(--radius-b);
  box-shadow: 6px 6px 0 var(--ink); padding: clamp(24px, 4vw, 52px);
  margin-top: 26px;
}
.article h2, .article h3 { margin: 1.4em 0 0.5em; }
.article p, .article li { color: var(--ink-2); }
.article pre, .article code { font-family: var(--font-mono); }
.article pre { background: var(--term-bg); color: var(--term-text); padding: 18px; border-radius: 12px; overflow-x: auto; border: 3px solid var(--ink); }
.article :not(pre) > code { background: var(--tint-green); border: 1.5px solid var(--ink); padding: 1px 7px; border-radius: 6px; font-size: 0.85em; overflow-wrap: anywhere; }
.article pre code { overflow-wrap: anywhere; }
.article blockquote { border-left: 5px solid var(--neon-deep); background: var(--tint-green); padding: 14px 20px; border-radius: 0 12px 12px 0; font-style: italic; }
.article img { border: 3px solid var(--ink); border-radius: 12px; box-shadow: var(--shadow-sm); }
.article table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: 0.92rem; }
.article th, .article td { border: 2px solid var(--ink); padding: 8px 12px; text-align: left; }
.article th { background: var(--neon); }
/* article legacy replacements (migrated from inline styles) */
.art-h2 { margin-top: 24px; border-bottom: 1px solid rgba(0,0,0,.06); padding-bottom: 8px; letter-spacing: -0.5px; }
.art-h3 { font-size: 18px; margin-top: 0; margin-bottom: 12px; }
.art-h3lg { font-size: 22px; margin-top: 0; margin-bottom: 16px; }
.art-h4 { margin: 0 0 8px 0; font-size: 16px; }
.art-card { background: rgba(255,255,255,.8); border: 1px solid rgba(0,0,0,.06); border-radius: 12px; padding: 40px; box-shadow: 0 4px 20px rgba(0,0,0,.02); backdrop-filter: blur(10px); font-size: 16px; color: #303030; line-height: 1.8; display: flex; flex-direction: column; gap: 24px; }
.art-card > * { min-width: 0; }
.art-callhead { font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.art-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; font-size: 14px; line-height: 1.5; }
.art-grid-wide { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 20px; }
.art-term { background: #0f172a; display: flex; min-height: 300px; }
.art-termbar { background: #1e293b; padding: 14px 20px; display: flex; align-items: center; gap: 10px; }
.art-termfoot { background: #0a0f1e; padding: 10px 20px; border-top: 1px solid rgba(255,255,255,.04); font-size: 12px; color: #334155; text-align: center; }
.col2, .col6, .col8, .col16 { display: flex; flex-direction: column; }
.col2 { gap: 2px; } .col6 { gap: 6px; } .col8 { gap: 8px; } .col16 { gap: 16px; }
.list-col { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.art-note { background: rgba(59,130,246,.04); border: 1px solid rgba(59,130,246,.15); border-radius: 8px; padding: 20px; font-size: 14px; line-height: 1.6; color: #1e3a8a; display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.art-row { display: flex; align-items: center; gap: 8px; }
.art-row-top { display: flex; align-items: flex-start; gap: 16px; }
.art-row-between { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.art-wrap { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.art-mini { margin-top: 6px; display: flex; align-items: center; gap: 4px; }
.art-btn { display: inline-flex; align-items: center; gap: 8px; background: #6366f1; color: #fff; text-decoration: none; padding: 10px 18px; border-radius: 7px; font-size: 14px; font-weight: 600; }
.art-btn-ghost { display: inline-flex; align-items: center; gap: 8px; background: rgba(99,102,241,.08); border: 1px solid rgba(99,102,241,.25); color: #6366f1; text-decoration: none; padding: 10px 18px; border-radius: 7px; font-size: 14px; font-weight: 600; }
.art-chip { padding: 8px 10px; border-radius: 6px; background: rgba(99,102,241,.15); border: 1px solid rgba(99,102,241,.25); font-size: 13px; font-weight: 600; color: #a5b4fc; display: flex; align-items: center; gap: 8px; }
.art-chip-dim { padding: 8px 10px; border-radius: 6px; font-size: 13px; color: #64748b; display: flex; align-items: center; gap: 8px; }
.art-icon { flex-shrink: 0; width: 44px; height: 44px; background: rgba(16,185,129,.12); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.art-kcode { flex: 1; background: rgba(255,255,255,.07); border-radius: 4px; padding: 5px 12px; font-family: 'Courier New', monospace; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { max-width: 560px; margin-top: 0; }
  .proj { grid-template-columns: 1fr; }
  .proj:nth-child(even) .browser { order: 0; }
  .skills-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .lab-cols { grid-template-columns: 1fr; }
  .proj-hero-grid { grid-template-columns: 1fr; }
  .fact-grid { grid-template-columns: 1fr 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .avatar-taped { max-width: 300px; }
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  section.block { padding-block: 52px 6px; }
  .nav-links {
    display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    background: var(--paper-2); border: 2.5px solid var(--ink); border-radius: 18px;
    box-shadow: var(--shadow); flex-direction: column; padding: 12px; gap: 4px; z-index: 50;
  }
  .nav-links.open { display: flex; }
  .nav-links a { display: block; width: 100%; padding: 13px 16px; font-size: 1rem; }
  .nav-toggle { display: inline-block; }
  .nav-cta { display: none; }
  .nav-cta--mobile { display: inline-flex; width: 100%; justify-content: center; }
  .nav-links .nav-cta { display: inline-flex; }
  .blog-grid { grid-template-columns: 1fr; }
  .sticky-note--a { right: 2px; }
  .notebook::before { display: none; }
  .term-screen { font-size: 0.8rem; }
  .fact-grid { grid-template-columns: 1fr; }
  .foot-doodle--l, .foot-doodle--r { display: none; }
  /* mobile: only 2 quiet background doodles */
  .bg-doodle[data-pos="bl"], .bg-doodle[data-pos="br"] { display: none; }
  .doodle-strip .hand { white-space: normal; text-align: center; font-size: 1.2rem; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
  .reveal { opacity: 1; transform: none; }
  .draw path { stroke-dashoffset: 0 !important; }
  .infra-wire { animation: none; }
  .doodle-float, .doodle-wiggle, .doodle-breathe, .doodle-drift { animation: none; }
  .mini-term .cursor, .term-dark .cursor { animation: none; opacity: 1; }
}

/* ---------- mobile motion discipline: keep it alive, not busy ---------- */
@media (max-width: 720px) {
  .doodle-drift, .doodle-breathe { animation: none; }
  .doodle-float, .doodle-wiggle { animation-duration: 12s; }
}

/* ---------- tiny screens ---------- */
@media (max-width: 380px) {
  .hero h1 { font-size: 2.7rem; }
  .stats-strip { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* ---------- mini corner doodles (auto-sprinkled by paint.js) ----------
   One tiny faded mark per major card. Static, quiet, same universe. */
.notebook, .big-term, .article { position: relative; }
.mini-doodle { position: absolute; top: -13px; right: 22px; color: var(--doodle-bg-ink); line-height: 0; pointer-events: none; transform: rotate(7deg); z-index: 3; }
.mini-doodle svg { width: 26px; height: auto; display: block; overflow: visible; }
.mini-doodle svg * { stroke: currentColor !important; }
@media (max-width: 720px) { .mini-doodle { display: none; } }

/* ---------- cursor ink trail: hover draws on the background ----------
   Fixed canvas under content, pointer-events none. Faint, fades out.
   Killed on touch screens + reduced motion (see paint.js guards). */
#ink-trail {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
}
@media (max-width: 720px) { #ink-trail { display: none; } }
@media (prefers-reduced-motion: reduce) { #ink-trail { display: none; } }

/* ---------- contact: business card + availability (pro, still hand-drawn) ---------- */
.biz-wrap { overflow: hidden; }
.biz-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 36px; align-items: start; position: relative; }
.biz-card {
  margin-top: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,0) 45%),
    repeating-linear-gradient(transparent 0 26px, rgba(17,17,17,.035) 26px 27px),
    #fffefb;
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 #fff;
  padding: 26px 26px 18px;
  transform: rotate(-1.1deg);
  position: relative;
  transition: transform var(--motion-normal) ease, box-shadow var(--motion-normal) ease;
}
.biz-card::before {
  content: ""; position: absolute; top: -14px; left: 42px; width: 96px; height: 26px;
  background: var(--tape); transform: rotate(-4deg);
  border-left: 2px dashed rgba(17,17,17,.25); border-right: 2px dashed rgba(17,17,17,.25);
}
.biz-card:hover { transform: rotate(0deg) translateY(-2px); box-shadow: 8px 8px 0 var(--ink); }
.biz-name { font-family: var(--font-display); font-weight: 900; font-size: 1.18rem; letter-spacing: .04em; margin: 0; }
.biz-title { font-family: var(--font-mono); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 4px 0 0; }
.biz-rule { height: 3px; background: var(--ink); margin: 14px 0; position: relative; }
.biz-rule::after { content: ""; position: absolute; right: 0; top: -4px; width: 56px; height: 11px; background: var(--neon); border: 2px solid var(--ink); border-radius: 999px; }
.biz-rows { margin: 0; display: grid; gap: 9px; }
.biz-row { display: grid; grid-template-columns: 86px 1fr; gap: 12px; align-items: baseline; font-size: .95rem; }
.biz-row dt { font-family: var(--font-mono); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.biz-row dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.biz-links a { font-weight: 800; text-decoration: underline wavy var(--neon-deep) 1.5px; text-underline-offset: 4px; }
.biz-links a:hover { background: var(--neon); }
.biz-foot { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 12px; border-top: 2px dashed var(--line); font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: var(--muted); }
.biz-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.biz-quote { margin: 26px 0 0; padding-left: 16px; border-left: 4px solid var(--neon-deep); transform: rotate(-1deg); }
.biz-quote blockquote { margin: 0; font-family: var(--font-hand); font-weight: 400; font-size: 1.7rem; line-height: 1.25; color: var(--ink-2); }
.biz-quote figcaption { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); margin-top: 6px; }
/* ---------- page quotes: airy, centered, never boxed ---------- */
.quote-strip { text-align: center; }
.quote-strip svg { margin-bottom: 14px; }
.quote-text { font-family: var(--font-hand); font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.3; color: var(--ink-2); margin: 0 auto; max-width: 26ch; }
.quote-by { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; color: var(--muted); margin-top: 12px; }
.avail-panel { background: var(--paper-2); border: 2.5px dashed rgba(17,17,17,.35); border-radius: var(--radius-b); padding: 22px 22px 20px; transform: rotate(.5deg); }
.avail-status { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: .78rem; font-weight: 800; letter-spacing: .06em; background: var(--card); border: 2px solid var(--ink); border-radius: 999px; padding: 7px 14px; box-shadow: 2px 2px 0 var(--ink); margin: 14px 0 12px; }
.avail-role { font-size: 1.35rem; text-transform: none; letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 12px; }
.avail-role strong { background: linear-gradient(transparent 55%, var(--neon) 55%, var(--neon) 92%, transparent 92%); padding: 0 4px; }
.avail-pills { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 6px; }
.avail-pills li { font-family: var(--font-mono); font-size: .74rem; font-weight: 700; border: 2px solid var(--ink); background: #fff; padding: 5px 12px; border-radius: 999px; box-shadow: 2px 2px 0 var(--ink); }
.avail-pills li:first-child { background: var(--neon); }
.avail-panel .check-list { margin: 14px 0 12px; }
.avail-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
@media (max-width: 960px) { .biz-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .biz-row { grid-template-columns: 1fr; gap: 2px; } .biz-card { padding: 22px 18px 16px; } }

/* ---------- pencil cursor (fine pointers only) ----------
   Hand-drawn pencil replaces the native arrow on mouse devices. */
:root {
  --pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='rotate(-45 16 16)'%3E%3Crect x='12' y='2' width='8' height='5' fill='%2339FF14' stroke='%23111' stroke-width='2'/%3E%3Crect x='12' y='7' width='8' height='15' fill='%23FAFAF7' stroke='%23111' stroke-width='2'/%3E%3Cpolygon points='12,22 20,22 16,29' fill='%23FFE500' stroke='%23111' stroke-width='2' stroke-linejoin='round'/%3E%3Cpolygon points='14.6,25.4 17.4,25.4 16,28.2' fill='%23111'/%3E%3C/g%3E%3C/svg%3E") 7 25;
  --pencil-hot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='rotate(-45 16 16)'%3E%3Crect x='12' y='2' width='8' height='5' fill='%23FFE500' stroke='%23111' stroke-width='2'/%3E%3Crect x='12' y='7' width='8' height='15' fill='%2339FF14' stroke='%23111' stroke-width='2'/%3E%3Cpolygon points='12,22 20,22 16,29' fill='%23FFE500' stroke='%23111' stroke-width='2' stroke-linejoin='round'/%3E%3Cpolygon points='14.6,25.4 17.4,25.4 16,28.2' fill='%23111'/%3E%3C/g%3E%3C/svg%3E") 7 25;
}
@media (pointer: fine) {
  body { cursor: var(--pencil), auto; }
  a, button, select, label, summary,
  input[type="button"], input[type="submit"], input[type="checkbox"], input[type="radio"],
  .btn, .nav-toggle, .term-hints button, .codecopy { cursor: var(--pencil), pointer; }
  a:hover, button:hover, select:hover, label:hover, summary:hover,
  input[type="button"]:hover, input[type="submit"]:hover,
  input[type="checkbox"]:hover, input[type="radio"]:hover,
  .btn:hover, .nav-toggle:hover, .term-hints button:hover, .codecopy:hover { cursor: var(--pencil-hot), pointer; }
  input:not([type]), input[type="text"], input[type="email"], input[type="search"], textarea, #term-input { cursor: text; }
}

/* ---------- faded paper: aged grain + warm vignette on every box ----------
   One shared treatment, baked into existing surfaces (CSS only, no HTML
   edits). Dark terminal surfaces are intentionally left clean. */
:root {
  --paper-age: radial-gradient(120% 120% at 50% 38%, rgba(0,0,0,0) 62%, rgba(122,92,46,0.10) 100%);
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
  --tape-solid: #FFE500; /* opaque tape for dark surfaces (translucent tape turns olive on black) */
}
.nav, .paint-frame, .browser, .contact-big, .article, .r-paper, .r-sec,
.note, .skill-card--paper, .stat, .fact, .avail-panel, .modal-card {
  background-image: var(--paper-age), var(--paper-grain);
}
/* surfaces that already stack their own background layers: prepend aging */
.notebook {
  background-image: var(--paper-age), var(--paper-grain),
    repeating-linear-gradient(transparent 0 30px, rgba(43, 92, 255, 0.08) 30px 31px);
}
.biz-card {
  background-image: var(--paper-age), var(--paper-grain),
    linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,0) 45%),
    repeating-linear-gradient(transparent 0 26px, rgba(17,17,17,.035) 26px 27px);
}
@media print {
  .r-paper, .r-sec { background-image: none !important; }
}

/* ---------- scotch tape on every major content box ----------
   One shared tape language (CSS only, no HTML edits). Boxes that already
   have their own tape (::before on .nav/.biz-card/.modal-card/.r-paper/
   .note/.paint-frame) are skipped here to avoid doubling. Tapes sit
   top-left; mini-doodles live top-right so they never collide. */
.contact-big::before, .article::before,
.avail-panel::before, .skill-card::before {
  content: ""; position: absolute; top: -13px; left: 38px;
  width: 92px; height: 24px; background: var(--tape);
  border-left: 2px dashed rgba(17,17,17,.25);
  border-right: 2px dashed rgba(17,17,17,.25);
  transform: rotate(-4deg); opacity: 0.92; z-index: 3; pointer-events: none;
}
/* notebook tape: notebook keeps its red margin line on ::before,
   so its tape goes ::after. (.browser is skipped: overflow clips
   outside tape and inset tape would cover the URL pill text.) */
.notebook::after {
  content: ""; position: absolute; top: -13px; left: 54px;
  width: 92px; height: 24px; background: var(--tape);
  border-left: 2px dashed rgba(17,17,17,.25);
  border-right: 2px dashed rgba(17,17,17,.25);
  transform: rotate(3deg); opacity: 0.92; z-index: 3; pointer-events: none;
}
/* mini tape for small boxes (stats, facts, infra nodes) + resume
   sections (taped on the black header bar, right side stays clear).
   Dark boxes get tape too: taped-printout-on-the-wall look. */
.stat::before, .fact::before, .infra-node::before {
  content: ""; position: absolute; top: -10px; left: 20px;
  width: 56px; height: 18px; background: var(--tape);
  border-left: 2px dashed rgba(17,17,17,.25);
  border-right: 2px dashed rgba(17,17,17,.25);
  transform: rotate(-4deg); opacity: 0.92; z-index: 3; pointer-events: none;
}
.fact:nth-child(even)::before { left: auto; right: 20px; transform: rotate(3deg); }
.stat:nth-child(even)::before { left: auto; right: 20px; transform: rotate(3deg); }
.stat, .fact, .infra-node, .r-sec { position: relative; }
.r-sec::before {
  content: ""; position: absolute; top: 7px; right: 12px; z-index: 3;
  width: 56px; height: 18px; background: var(--tape-solid);
  border-left: 2px dashed rgba(255,255,255,.35);
  border-right: 2px dashed rgba(255,255,255,.35);
  transform: rotate(3deg); opacity: 0.95; pointer-events: none;
}
/* dark skill cards + dark infra nodes: solid tape, else olive blobs */
.skill-card:not(.skill-card--paper)::before, .infra-node::before {
  background: var(--tape-solid); opacity: 0.95;
}
.skill-card:nth-child(even)::before { left: auto; right: 38px; transform: rotate(3deg); }
.contact-big::before { left: 50%; translate: -50% 0; transform: rotate(2deg); }
.avail-panel::before { left: 30px; width: 76px; transform: rotate(-3deg); }
.article, .avail-panel { position: relative; }
@media print {
  .contact-big::before, .article::before,
  .avail-panel::before, .skill-card::before,
  .notebook::after, .stat::before, .fact::before,
  .infra-node::before, .r-sec::before { display: none !important; }
}

/* ---------- MY TECH STACK: five confident groups ----------
   BUILD / FRONTEND / BACKEND+DATA / SHIP / RUN. Tier chips removed;
   new-here tech gets a subtle dashed node + one tiny note. Same
   paper/ink/neon tokens, same doodle strokes, same motion. */
.stack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 32px; }
.stack-card {
  background: var(--card);
  background-image: var(--paper-age), var(--paper-grain);
  border: 2.5px solid var(--ink); box-shadow: var(--shadow);
  padding: 26px 26px 24px; position: relative;
  transform: rotate(var(--tilt, -0.5deg));
  transition: transform var(--motion-normal) ease, box-shadow var(--motion-normal) ease;
}
.stack-card:nth-child(odd) { border-radius: var(--radius-a); }
.stack-card:nth-child(even) { border-radius: var(--radius-b); --tilt: 0.5deg; }
.stack-card:hover { transform: rotate(0deg) translateY(-3px); }
.stack-wide { grid-column: span 2; }
.stack-top { display: flex; align-items: flex-start; gap: 12px; }
.stack-doodle { flex: 0 0 auto; margin-top: 2px; }
.stack-kicker { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.stack-card h3 { font-size: 1.35rem; text-transform: uppercase; margin: 2px 0 2px; letter-spacing: -0.01em; }
.stack-note { font-family: var(--font-hand); font-weight: 400; font-size: 1.4rem; color: var(--muted); margin: 0 0 6px; }
.stack-sub { font-family: var(--font-hand); font-weight: 400; font-size: 1.15rem; color: var(--faint); margin: 14px 0 0; }
.stack-sub:first-of-type { margin-top: 10px; }
.stack-foot { font-family: var(--font-hand); font-weight: 400; font-size: 1.15rem; color: var(--neon-ink); margin: 12px 0 0; transform: rotate(-.6deg); }
.tnodes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.tnode {
  position: relative; font-family: var(--font-mono); font-size: 0.84rem; font-weight: 700;
  border: 2px solid var(--ink); background: #fff; padding: 6px 15px; border-radius: 999px;
  box-shadow: 2px 2px 0 var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform var(--motion-fast) ease, background var(--motion-fast) ease;
}
.tnode:hover { background: var(--neon); transform: rotate(-1deg) translateY(-1px); }
/* hand-drawn tech icons: one system, ink strokes, tiny size */
.tico { width: 20px; height: 20px; flex: 0 0 auto; color: var(--ink); transition: transform var(--motion-fast) ease; }
.tnode:hover .tico { transform: rotate(-8deg) scale(1.12); }
.tech-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* new-here tech: same pill, dashed outline, slightly faded */
.tnode--new { border-style: dashed; opacity: 0.82; }
.tnode::after {
  content: attr(data-note);
  position: absolute; left: 50%; bottom: calc(100% + 10px); translate: -50% 0;
  width: max-content; max-width: 230px; white-space: normal;
  background: var(--ink); color: #fff;
  font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; line-height: 1.45;
  padding: 8px 12px; border-radius: 10px 3px 10px 3px;
  opacity: 0; pointer-events: none; transition: opacity var(--motion-fast) ease; z-index: 5;
}
.tnode:hover::after, .tnode:focus-visible::after { opacity: 1; }
/* category-by-category entrance */
.stack-grid .reveal:nth-child(2) { transition-delay: 0.08s; }
.stack-grid .reveal:nth-child(3) { transition-delay: 0.16s; }
.stack-grid .reveal:nth-child(4) { transition-delay: 0.24s; }
.stack-grid .reveal:nth-child(5) { transition-delay: 0.32s; }
@media (max-width: 960px) {
  .stack-card:nth-child(n) { --tilt: 0deg; }
}
@media (max-width: 640px) {
  .stack-grid { grid-template-columns: 1fr; }
  .stack-wide { grid-column: span 1; }
  .tnode::after { max-width: 200px; }
}

/* ---------- code copy buttons (blogs + any <pre>, all pages) ---------- */
.codeblock { position: relative; }
.codeblock > pre { padding-top: 46px; }
.codecopy {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  background: var(--card); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 8px 3px 8px 3px;
  padding: 6px 12px; min-height: 36px; cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.codecopy:hover { background: var(--neon); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.codecopy:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }