@font-face {
  font-family: 'Adwaita Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/adwaita-mono@5.3.0/latin-400-normal.woff2) format('woff2'),
       url(https://cdn.jsdelivr.net/fontsource/fonts/adwaita-mono@5.3.0/latin-400-normal.woff) format('woff');
}
@font-face {
  font-family: 'Adwaita Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/adwaita-mono@5.3.0/latin-500-normal.woff2) format('woff2'),
       url(https://cdn.jsdelivr.net/fontsource/fonts/adwaita-mono@5.3.0/latin-500-normal.woff) format('woff');
}

:root {
  --serif: 'Ubuntu', 'Space Grotesk', sans-serif;
  --mono: 'Adwaita Mono', 'JetBrains Mono', monospace;
  --sans: 'Inter', sans-serif;
  --max: 1180px;
}

body[data-theme="dark"] {
  --bg: #0B0C10;
  --bg-raised: #14161C;
  --text: #ECECEC;
  --text-soft: #9A9CA5;
  --line: #23252E;
  --grid-dot: rgba(255,255,255,0.06);
  --spotlight: rgba(232,224,0,0.16);
  --accent: #e6b800;
}

body[data-theme="light"] {
  --bg: #f0f0f0;
  --bg-raised: #FFFFFF;
  --text: #17181C;
  --text-soft: #63656F;
  --line: #E2E0D9;
  --grid-dot: rgba(0,0,0,0.06);
  --spotlight: rgba(230,65,0,0.18);
  --accent: #e64100;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  transition: background 0.25s ease, color 0.25s ease;
}

section[id] { scroll-margin-top: 84px; }

a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* background grid + spotlight */

.bg-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px);
  background-size: 26px 26px;
}

.spotlight {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(320px circle at var(--sx, 50%) var(--sy, 50%), var(--spotlight), transparent 70%);
  transition: background 0.05s linear;
}

/* particle trail (replaces the old custom cursor dot/ring) */

.particle-canvas {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

@media (pointer: coarse) {
  .spotlight, .particle-canvas { display: none; }
}

/* theme toggle */

.theme-toggle {
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 73;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--text);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}

.theme-toggle:hover { transform: scale(1.08); }

/* fixed nav, full width */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 72;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease;
}

.nav.scrolled {
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 32px;
}

.nav-brand {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(18px, 3.2vw, 30px);
  text-decoration: none;
  white-space: nowrap;
}

.nav-dot { color: var(--accent); }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
  font-family: var(--mono);
  font-size: clamp(11px, 1.3vw, 13px);
}

.nav-links a, .nav-terminal-btn {
  text-decoration: none;
  color: var(--text-soft);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: var(--mono);
  font-size: clamp(12px, 1.4vw, 15px);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text);
  border-color: var(--accent);
}

.nav-terminal-btn {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--text);
}

.nav-terminal-btn:hover { border-color: var(--accent); color: var(--accent); }

.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  padding: 0;
  z-index: 71;
}

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

.nav-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.active span:nth-child(2) { opacity: 0; }
.nav-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.nav-overlay.open { opacity: 1; pointer-events: auto; }

@media (max-width: 720px) {
  .nav-hamburger { display: flex; margin-right: 46px; }

  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(78vw, 300px);
    background: var(--bg-raised);
    border-left: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: 90px 30px 30px;
    transform: translateX(100%);
    transition: transform 0.28s ease;
    z-index: 70;
  }

  .nav-links.open { transform: translateX(0); }

  .nav-links a, .nav-links .nav-terminal-btn {
    display: block;
    width: 100%;
    font-size: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }

  .nav-links .nav-terminal-btn { border: none; border-bottom: 1px solid var(--line); padding-left: 0; text-align: left; }
}

/* reveal-on-scroll */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* hero, full width */

.hero {
  position: relative;
  z-index: 2;
  padding: 150px 32px 100px;
}

.hero-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: 40px;
}

@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
}

.hero-kicker {
  font-family: var(--serif);
  font-size: clamp(22px, 4.5vw, 40px);
  font-weight: 500;
  color: var(--accent);
  margin: 0 0 10px;
}

.hero-title {
  font-family: var(--serif);
  font-size: clamp(38px, 6vw, 68px);
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.hero-sub {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text-soft);
  margin: 0 0 22px;
}

.hero-role {
  font-family: var(--mono);
  font-size: 17px;
  color: var(--text-soft);
  min-height: 1.6em;
  margin: 0 0 34px;
}

.role-cursor { animation: blink 0.9s step-end infinite; color: var(--accent); }
@keyframes blink { 50% { opacity: 0; } }

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 13px;
  border: 1px solid var(--line);
  text-decoration: none;
  background: transparent;
  color: var(--text);
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}

.btn-primary { background: var(--accent); border-color: var(--accent); color: #1A1200; font-weight: 500; }
.btn-ghost:hover { border-color: var(--text-soft); }

/* hero tag sphere visual (no visible box — tags rotate freely) */

.hero-visual {
  position: relative;
  height: 320px;
  overflow: visible;
}

.hero-cloud .cloud-tag {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* sections, full width */

.section {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  padding: 64px 32px;
  border-top: 1px solid var(--line);
}

.section-title {
  font-family: var(--serif);
  font-size: 28px;
  margin: 0 0 6px;
}

.section-sub {
  color: var(--text-soft);
  font-size: 14.5px;
  margin: 0 0 32px;
}

code {
  font-family: var(--mono);
  background: var(--bg-raised);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 13px;
}

/* rotating tag sphere (hero) */

.hero-cloud {
  position: relative;
  width: 100%;
  height: 100%;
}

.cloud-tag {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 700;
  color: var(--text-soft);
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  will-change: left, top, font-size, opacity;
}

/* about section */

.accent-text { color: var(--accent); }

.about-head { text-align: center; max-width: 560px; margin: 0 auto 40px; }

.about-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 44px;
  align-items: start;
}

@media (max-width: 760px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { max-width: 160px; margin: 0 auto; }
  .about-photo .about-cta { font-size: 12px; padding: 10px 16px; }
}

.about-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.about-photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-raised);
}

.about-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-photo-frame::before {
  content: '';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg);
  z-index: 2;
}

.about-photo-frame.img-missing img { display: none; }

.about-photo-frame.img-missing::after {
  content: "Add your photo\A imgs/profile.jpg";
  white-space: pre;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-soft);
  padding: 20px;
}

.about-cta { width: 100%; text-align: center; }

.about-copy { display: flex; flex-direction: column; gap: 18px; padding-top: 6px; }

.about-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--text-soft);
  margin: 0;
}

.about-kicker::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--accent);
  display: inline-block;
  flex: none;
}

.about-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 26px;
  background: var(--bg-raised);
}

.about-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-soft);
}

/* skills grid (card layout) */

.skills-head {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 40px;
}

.skills-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 16px;
}

.skills-head .section-title { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 6px; }
.skills-head .section-sub { margin: 0; }

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

@media (max-width: 900px) {
  .skills-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .skills-grid { grid-template-columns: 1fr; }
}

.skill-category-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  background: var(--bg-raised);
}

.skill-category-card h3 {
  font-family: var(--serif);
  font-size: 17px;
  margin: 0 0 8px;
}

.skill-category-rule {
  width: 34px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  margin-bottom: 16px;
}

.skill-item-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.skill-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.skill-icon {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--line);
  padding: 3px;
}

.skill-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* articles */

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

.article-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  background: var(--bg-raised);
  text-decoration: none;
  color: var(--text);
  display: block;
  transition: border-color 0.2s ease, transform 0.15s ease;
}

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

.article-date { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.article-card h3 { font-size: 16px; margin: 10px 0 8px; }
.article-card p { color: var(--text-soft); font-size: 14px; margin: 0 0 14px; }
.article-readmore { font-family: var(--mono); font-size: 12.5px; color: var(--text-soft); }
.article-card:hover .article-readmore { color: var(--accent); }

/* projects */

.filter-row { display: flex; gap: 10px; margin-bottom: 24px; }

.filter-btn {
  font-family: var(--mono);
  font-size: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-soft);
  transition: all 0.15s ease;
}

.filter-btn:hover { color: var(--text); }
.filter-btn.active { background: var(--accent); border-color: var(--accent); color: #1A1200; }

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

.project-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  background: var(--bg-raised);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

.project-card:hover { border-color: var(--accent); box-shadow: 0 16px 40px rgba(0,0,0,0.25); }

.project-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.project-card-head h3 { margin: 0; font-size: 16px; }

.status-chip { font-size: 11px; font-family: var(--mono); color: var(--accent); white-space: nowrap; }
.status-chip-progress { color: #6C93F5; }

.project-card p { color: var(--text-soft); font-size: 14px; margin: 0 0 14px; }

.tag-row { display: flex; gap: 8px; flex-wrap: wrap; }

.tag-row span {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3px 8px;
}

/* timeline */

.timeline { list-style: none; margin: 0; padding: 0; }

.timeline-item {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.timeline-item:first-child { border-top: none; }

.timeline-year { font-family: var(--mono); font-size: 13px; color: var(--accent); }
.timeline-body h3 { margin: 0 0 6px; font-size: 16px; }
.timeline-body p { margin: 0; color: var(--text-soft); font-size: 14px; }

@media (max-width: 560px) {
  .timeline-item { grid-template-columns: 1fr; gap: 6px; }
}

/* contact */

.contact-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
}

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

.contact-form { max-width: 480px; }

.form-row { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.form-row label { font-size: 13px; color: var(--text-soft); }

.form-row input, .form-row textarea {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  resize: vertical;
  transition: border-color 0.15s ease;
}

.form-row input:focus, .form-row textarea:focus { border-color: var(--accent); }

.form-note { margin: 12px 0 0; font-size: 13px; color: var(--accent); min-height: 1.2em; }

.contact-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--mono);
  font-size: 13.5px;
  align-self: start;
}

.contact-links a { text-decoration: none; transition: color 0.15s ease; }
.contact-links a:hover { color: var(--accent); }

.link-btn {
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--mono);
  font-size: 13.5px;
  text-align: left;
  padding: 0;
  transition: color 0.15s ease;
}

.link-btn:hover { color: var(--accent); }
.copy-hint { color: var(--text-soft); font-size: 11px; margin-left: 8px; }

/* back to top */

.back-to-top {
  position: fixed;
  bottom: 24px;
  left: 20px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--text);
  font-size: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.15s ease;
  z-index: 40;
}

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

/* footer */

.site-footer {
  position: relative;
  z-index: 2;
  width: 100%;
  background: var(--bg-raised);
  border-top: 1px solid var(--line);
}

.footer-inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 56px 48px 40px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr 0.9fr;
  gap: 24px;
  margin-bottom: 36px;
}

@media (max-width: 980px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-links { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-links { grid-column: auto; }
}

.footer-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 26px;
  background: var(--bg);
}

.footer-profile-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }

.footer-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent);
  color: #1A1200;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-profile-head h3 { margin: 0; font-family: var(--serif); font-size: 18px; }
.footer-profile-head .text-soft { color: var(--text-soft); font-weight: 500; }

.footer-tagline { color: var(--text-soft); font-size: 14px; line-height: 1.6; margin: 0 0 20px; }

.footer-social-row { display: flex; gap: 10px; }

.footer-social-btn {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.footer-social-btn svg { width: 17px; height: 17px; }
.footer-social-btn:hover { color: var(--accent); border-color: var(--accent); }

.footer-touch-title {
  margin: 0 0 18px;
  padding-left: 12px;
  border-left: 3px solid var(--accent);
  font-family: var(--serif);
  font-size: 17px;
}

.footer-touch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  font-size: 14px;
  text-decoration: none;
  color: var(--text);
}

.footer-touch-row:hover { color: var(--accent); }
.footer-touch-static { cursor: default; }
.footer-touch-static:hover { color: var(--text); }

.footer-touch-icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--accent);
  color: #1A1200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-touch-icon svg { width: 16px; height: 16px; }

.footer-cv-btn { display: inline-block; }

.footer-links {
  display: flex;
  gap: 28px;
}

/* placed after the base rule above on purpose — a rule with the same
   specificity that comes later in the file wins, so the hide-on-mobile
   rule has to live below the unconditional display:flex, not above it */
@media (max-width: 700px) {
  .footer-links { display: none; }
}

@media (max-width: 480px) {
  .footer-links { flex-wrap: wrap; gap: 24px; }
}

.footer-link-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 90px;
}

.footer-link-group h4 {
  margin: 0 0 2px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.footer-link-group a {
  font-size: 13.5px;
  color: var(--text-soft);
  text-decoration: none;
}

.footer-link-group a:hover { color: var(--accent); }

.footer-bottom { text-align: center; }

.footer-rule {
  height: 1px;
  background: var(--line);
  position: relative;
  margin-bottom: 22px;
}

.footer-rule::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -1px;
  transform: translateX(-50%);
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
}

.footer-bottom p { margin: 0 0 -15px; color: var(--text-soft); font-size: 13px; }
.footer-built { font-family: var(--mono); font-size: 12px !important; }

/* terminal window — docks small bottom-right on desktop by default, expands on maximize.
   Colors are the terminal's own palette (independent of the site's --accent), styled after
   a real terminal emulator: near-black background, green prompt, colored window controls. */

.terminal-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

.terminal-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.terminal-modal.state-maximized .terminal-modal-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.terminal-window {
  --term-bg: rgba(14, 15, 19, 0.6);
  --term-titlebar: rgba(36, 38, 44, 0.55);
  --term-border: rgba(255, 255, 255, 0.12);
  --term-fg: #D6D8E0;
  --term-green: #4FDA6C;
  --term-red: #FF6B6B;
  --term-orange: #E3A458;
  --term-blue: #4C8BF0;
  --term-yellow: #F2C94C;

  position: fixed;
  display: flex;
  flex-direction: column;
  background: var(--term-bg);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--term-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  pointer-events: auto;
  transition: width 0.28s cubic-bezier(.2,.8,.2,1), height 0.28s cubic-bezier(.2,.8,.2,1),
              opacity 0.2s ease, transform 0.28s cubic-bezier(.2,.8,.2,1);
}

/* default: small open panel docked bottom-right (desktop) */
.terminal-modal.state-docked .terminal-window {
  right: 20px;
  bottom: 24px;
  left: auto;
  top: auto;
  width: min(320px, calc(100vw - 40px));
  height: 380px;
  border-radius: 18px;
  transform: none;
  opacity: 1;
}

/* maximize toggle: large centered window */
.terminal-modal.state-maximized .terminal-window {
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  width: min(920px, 94vw);
  height: min(560px, 82vh);
  transform: translate(-50%, -50%);
  opacity: 1;
  border-radius: 18px;
}

/* minimize: collapses to a small round button, bottom-right */
.terminal-modal.state-minimized .terminal-window {
  right: 20px;
  bottom: 24px;
  left: auto;
  top: auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  transform: none;
  opacity: 1;
  cursor: pointer;
  border-color: var(--term-orange, #E3A458);
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
}

/* close: fully hidden — reopen via the "terminal" nav button or hero button */
.terminal-modal.state-closed .terminal-window {
  right: 20px;
  bottom: 24px;
  left: auto;
  top: auto;
  width: min(320px, calc(100vw - 40px));
  height: 380px;
  transform: scale(0.85) translateY(16px);
  opacity: 0;
  pointer-events: none;
}

.terminal-modal.state-minimized .terminal-titlebar,
.terminal-modal.state-minimized .terminal-body,
.terminal-modal.state-minimized .terminal-inputrow,
.terminal-modal.state-minimized .terminal-quickrow {
  display: none;
}

.terminal-fab-icon {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--term-green, #4FDA6C);
}

.terminal-modal.state-minimized .terminal-fab-icon { display: flex; }

/* once the footer scrolls into view, shrink the docked panel down into the
   same small round button used for the minimized state (instead of hiding
   it), so it never sits on top of footer content but stays reachable —
   the centered maximized dialog is left alone since it isn't anchored to
   that corner */
.terminal-modal.near-footer.state-docked .terminal-window {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border-color: var(--term-orange, #E3A458);
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
}

.terminal-modal.near-footer.state-docked .terminal-titlebar,
.terminal-modal.near-footer.state-docked .terminal-body,
.terminal-modal.near-footer.state-docked .terminal-inputrow,
.terminal-modal.near-footer.state-docked .terminal-quickrow {
  display: none;
}

.terminal-modal.near-footer.state-docked .terminal-fab-icon {
  display: flex;
}

/* on small screens, the docked panel becomes a compact button too, so it never blocks content */
@media (max-width: 720px) {
  .terminal-modal.state-docked .terminal-window {
    right: 20px;
    bottom: 24px;
    left: auto;
    top: auto;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border-color: var(--term-orange, #E3A458);
    box-shadow: 0 10px 26px rgba(0,0,0,0.35);
  }
  .terminal-modal.state-docked .terminal-titlebar,
  .terminal-modal.state-docked .terminal-body,
  .terminal-modal.state-docked .terminal-inputrow,
  .terminal-modal.state-docked .terminal-quickrow {
    display: none;
  }
  .terminal-modal.state-docked .terminal-fab-icon { display: flex; }
}

.terminal-window.dragging {
  transition: none !important;
  cursor: grabbing;
  user-select: none;
}

.terminal-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 6px 8px 14px;
  background: var(--term-titlebar);
  border-bottom: 1px solid var(--term-border);
  flex: none;
  cursor: grab;
  touch-action: none;
}

.terminal-title { font-family: var(--sans); font-size: 12px; color: #A9ABB3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.win-controls { display: flex; align-items: center; gap: 2px; flex: none; }

.win-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: #9A9CA5;
  font-size: 14px;
  line-height: 1;
  font-family: var(--mono);
  transition: background 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}

.win-min { color: var(--term-orange); }
.win-min:hover { background: rgba(0,0,0,0.35); }

.win-max { font-size: 12px; color: var(--term-blue); }
.win-max:hover { background: rgba(0,0,0,0.35); }

.win-close {
  background: var(--term-blue);
  color: #fff;
  margin-left: 2px;
}
.win-close:hover { background: #E81123; }

.terminal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px;
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--term-fg);
}

.terminal-line { margin-bottom: 6px; white-space: pre-wrap; word-break: break-word; }
.terminal-line .cmd { color: var(--term-green); }
.terminal-prompt-echo { color: var(--term-green); font-weight: 700; }
.echo-cmd-valid { color: var(--term-yellow); font-weight: 700; }
.echo-cmd-invalid { color: var(--term-red); font-weight: 700; }

.terminal-body::-webkit-scrollbar { width: 8px; }
.terminal-body::-webkit-scrollbar-thumb { background: #2A2C36; border-radius: 4px; }

/* the live prompt now lives INSIDE the scrolling body, right after the last
   output line — like a real terminal — instead of a separate bar underneath */
.terminal-inputrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border-top: none;
  background: transparent;
  flex: none;
  margin-bottom: 6px;
}

.prompt { font-family: var(--mono); font-size: 13.5px; white-space: nowrap; color: var(--term-green); font-weight: 700; }
.prompt-py { font-family: var(--mono); font-size: 13.5px; white-space: nowrap; color: var(--accent); font-weight: 700; }
.prompt-user, .prompt-dir { color: inherit; font-weight: inherit; font-size: inherit; font-family: inherit; }

.prompt-sep{ color: #4C8BF0; font-weight: inherit; font-size: inherit; font-family: inherit; }

.terminal-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--term-fg);
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 700;
  outline: none;
}

.terminal-input.cmd-valid { color: var(--term-yellow); }
.terminal-input.cmd-invalid { color: var(--term-red); }

.terminal-quickrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px 14px;
  background: var(--term-bg);
  flex: none;
}

.terminal-quickrow button {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--term-border);
  background: transparent;
  color: var(--term-fg);
  opacity: 0.75;
  transition: color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.terminal-quickrow button:hover { color: var(--term-green); border-color: var(--term-green); opacity: 1; }

/* vim overlay — sits in place of the terminal body while editing a file */

.vim-overlay {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: #0F1014;
}

.terminal-window.vim-active .terminal-body,
.terminal-window.vim-active .terminal-quickrow {
  display: none;
}

.terminal-window.vim-active .vim-overlay { display: flex; }

.vim-status-top {
  flex: none;
  background: #1D2B3A;
  color: #9FD3FF;
  font-family: var(--mono);
  font-size: 11px;
  padding: 5px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vim-editor-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #0F1014;
}

.vim-highlight,
.vim-textarea {
  position: absolute;
  inset: 0;
  margin: 0;
  box-sizing: border-box;
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: auto;
  tab-size: 4;
  font-variant-ligatures: none;
  letter-spacing: normal;
}

.vim-highlight {
  color: var(--term-fg);
  pointer-events: none;
  z-index: 1;
}

.vim-highlight code {
  font: inherit;
  color: inherit;
}

.vim-textarea {
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: var(--term-fg);
  z-index: 2;
}

/* While actively typing, skip the highlighted-overlay layer entirely and
   render real, visible text straight from the textarea. The overlay is a
   separate DOM layer that gets rebuilt on every keystroke; under fast,
   continuous typing its repaint can land a frame behind the textarea's own
   (always-correct) native caret, making the last character look like it
   landed "before" the cursor. There's nothing to desync if only one layer
   is ever drawing text while you type. */
.vim-editor-wrap.is-typing .vim-highlight {
  visibility: hidden;
}
.vim-editor-wrap.is-typing .vim-textarea {
  color: var(--term-fg);
  -webkit-text-fill-color: var(--term-fg);
}

/* syntax token colors */
.tok-kw  { color: #ff7ac6; }
.tok-str { color: #9ece6a; }
.tok-com { color: #6c7986; font-style: italic; }
.tok-num { color: #ffb454; }
.tok-pre { color: #b48bf2; }
.tok-fn  { color: #7fd4ff; }

.vim-status-bottom {
  flex: none;
  display: flex;
  gap: 16px;
  background: #1D2B3A;
  color: #C9D1D9;
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 5px 12px;
}

#vimMode { color: var(--term-yellow); font-weight: 700; }
#vimFilename { opacity: 0.8; }
#vimCmdline { color: #fff; }

@media (max-width: 480px) {
  .terminal-modal.state-maximized .terminal-window { width: min(680px, 94vw); height: min(480px, 74vh); }
}

/* ================= View More / Read more links ================= */

.section-more {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.project-card-foot { margin-top: 4px; }

.project-readmore {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-soft);
  text-decoration: none;
  transition: color 0.15s ease;
}

.project-card:hover .project-readmore,
.project-readmore:hover { color: var(--accent); }

/* ================= Page intro (projects.html / articles.html) ================= */

.page-hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: 120px 32px 32px;
}

.page-hero .section-title { font-size: 34px; }
.page-hero .section-sub { margin-bottom: 0; }

/* ================= Detail pages (single project / single article) ================= */

.detail-page { padding-top: 112px; max-width: 760px; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-soft);
  text-decoration: none;
  margin-bottom: 28px;
  transition: color 0.15s ease;
}

.back-link:hover { color: var(--accent); }

.detail-head { margin-bottom: 32px; }

.detail-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
}

.detail-title {
  font-family: var(--serif);
  font-size: 32px;
  margin: 0 0 14px;
  line-height: 1.25;
}

.detail-dek {
  color: var(--text-soft);
  font-size: 15.5px;
  margin: 0 0 16px;
}

.detail-body {
  font-size: 15.5px;
  color: var(--text);
}

.detail-body h2 {
  font-family: var(--serif);
  font-size: 20px;
  margin: 34px 0 12px;
}

.detail-body p { margin: 0 0 16px; color: var(--text-soft); }
.detail-body ul { margin: 0 0 16px; padding-left: 20px; color: var(--text-soft); }
.detail-body li { margin-bottom: 8px; }

.detail-body strong { color: var(--text); }

.detail-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 24px 0 8px;
}

.detail-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.detail-nav-link {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-soft);
  text-decoration: none;
  max-width: 48%;
  transition: color 0.15s ease;
}

.detail-nav-link:hover { color: var(--accent); }
.detail-nav-link.next { text-align: right; margin-left: auto; }

@media (max-width: 600px) {
  .detail-title { font-size: 26px; }
  .page-hero { padding-top: 100px; }
}

/* project/article grids: 3 per row, fewer on smaller screens */
@media (max-width: 900px) {
  .project-grid, .article-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .project-grid, .article-grid { grid-template-columns: 1fr; }
}