:root{
  --paper: #eef2eb;
  --paper-card: #fbfbf6;
  --ink: #24314f;
  --ink-soft: #4a5674;
  --pencil: #5c5c52;
  --grid-line: rgba(58, 92, 122, 0.16);
  --pen-red: #c1443a;
  --highlight: #f4c94f;
  --tape: #dfe6c9;
  --shadow: rgba(36, 49, 79, 0.18);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(0deg, var(--grid-line) 0px, var(--grid-line) 1px, transparent 1px, transparent 32px),
    repeating-linear-gradient(90deg, var(--grid-line) 0px, var(--grid-line) 1px, transparent 1px, transparent 32px);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}

svg.defs{ position:absolute; width:0; height:0; }

.wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 28px;
}

.hand{ font-family: 'Kalam', cursive; }
.script{ font-family: 'Caveat', cursive; }
.mono{ font-family: 'JetBrains Mono', monospace; }

/* ---------- sketchy border via SVG filter ---------- */
.sketchy{
  filter: url(#sketchy-edge);
}

/* ---------- nav ---------- */
header{
  position: sticky; top:0; z-index: 50;
  background: linear-gradient(var(--paper) 85%, transparent);
  padding: 18px 0 6px;
  transition: background .25s ease, box-shadow .25s ease, padding .25s ease;
}
header.scrolled{
  background: var(--paper);
  box-shadow: 0 2px 0 var(--ink);
  padding: 12px 0;
}
nav.wrap{
  display:flex; align-items:center; justify-content: space-between;
}
.logo{
  font-family:'Caveat', cursive; font-weight:700; font-size: 1.9rem;
  color: var(--ink);
  display:flex; align-items:center; gap:8px;
}
.logo svg{ width:34px; height:34px; }
nav ul{
  list-style:none; display:flex; gap: 26px; margin:0; padding:0;
}
nav a{
  color: var(--ink-soft); text-decoration:none; font-weight:600; font-size:.95rem;
  position:relative; padding-bottom:3px;
}
nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
  background: var(--pen-red); transition: width .25s ease;
}
nav a:hover::after{ width:100%; }
nav a.active{ color: var(--ink); }
nav a.active::after{ width:100%; }

.nav-toggle{
  display:none;
  width: 42px; height: 38px;
  background: var(--paper-card);
  border: 2px solid var(--ink);
  align-items:center; justify-content:center;
  cursor:pointer;
  padding:0;
}
.nav-toggle svg{ width:20px; height:16px; display:block; }
.nav-toggle rect{ fill: var(--ink); }
.nav-toggle[aria-expanded="true"] .bar1{ transform: translateY(6.5px) rotate(45deg); transform-origin:center; }
.nav-toggle[aria-expanded="true"] .bar2{ opacity:0; }
.nav-toggle[aria-expanded="true"] .bar3{ transform: translateY(-6.5px) rotate(-45deg); transform-origin:center; }
.nav-toggle rect{ transition: transform .2s ease, opacity .2s ease; }

/* ---------- hero ---------- */
.hero{
  padding: 70px 0 60px;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 30px;
  align-items:center;
}
.eyebrow-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono', monospace; font-size:.78rem; letter-spacing:.03em;
  color: var(--pencil);
  background: var(--paper-card);
  border: 1.5px solid var(--ink);
  padding: 5px 12px; border-radius: 3px;
  transform: rotate(-1.2deg);
  margin-bottom: 22px;
}
.eyebrow-tag::before{ content:"●"; color:#3e8f5d; font-size:.6rem; }

.hero h1{
  font-family:'Kalam', cursive;
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1.08;
  margin: 0 0 18px;
  color: var(--ink);
}
.hero h1 .underline-wrap{ position:relative; display:inline-block; }
.hero h1 svg.underline{
  position:absolute; left:-2%; right:-2%; bottom:-14px; width:104%; height:18px;
  overflow:visible;
}
.hero h1 svg.underline path{
  fill:none; stroke: var(--pen-red); stroke-width:5; stroke-linecap:round;
  stroke-dasharray: 420; stroke-dashoffset: 420;
  animation: draw 1.4s .5s ease forwards;
}
@media (prefers-reduced-motion: reduce){
  .hero h1 svg.underline path{ animation: none; stroke-dashoffset: 0; }
}
@keyframes draw{ to{ stroke-dashoffset: 0; } }

.hero p.lede{
  font-size: 1.12rem; color: var(--ink-soft); max-width: 46ch; margin: 0 0 28px;
}
.hero .cta-row{ display:flex; gap:16px; flex-wrap:wrap; }

.btn{
  font-family:'JetBrains Mono', monospace; font-size:.85rem; font-weight:500;
  padding: 12px 22px; text-decoration:none; color: var(--ink);
  background: var(--paper-card);
  border: 2px solid var(--ink);
  display:inline-block;
  transition: transform .15s ease;
}
.btn:hover{ transform: translate(-2px,-2px); }
.btn.primary{ background: var(--highlight); }

/* hero doodle panel */
.doodle-panel{ position:relative; }
.doodle-card{
  background: var(--paper-card);
  border: 2px solid var(--ink);
  padding: 22px;
  transform: rotate(2deg);
  position:relative;
}
.doodle-card::before{
  content:""; position:absolute; top:-14px; left:38%;
  width:60px; height:24px; background: var(--tape);
  opacity:.85; transform: rotate(-4deg);
  box-shadow: 0 2px 4px var(--shadow);
}
.doodle-card figcaption{
  font-family:'Caveat', cursive; font-size:1.2rem; color: var(--pencil); margin-top:10px; text-align:center;
}

section{ padding: 54px 0; position:relative; }

.section-title{
  font-family:'Kalam', cursive; font-size: 2.1rem; margin: 0 0 8px;
  display:flex; align-items:center; gap:12px;
}
.section-title .margin-note{
  font-family:'JetBrains Mono', monospace; font-size:.72rem; color: var(--pencil);
  border: 1px dashed var(--pencil); padding: 3px 8px; transform: rotate(-2deg);
}
.section-intro{ color: var(--ink-soft); max-width: 62ch; margin-bottom: 34px; }

/* ---------- about ---------- */
.about-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.stat-card{
  background: var(--paper-card); border:2px solid var(--ink); padding: 18px 20px;
}
.stat-card .num{ font-family:'Kalam',cursive; font-size:2rem; color: var(--pen-red); }
.stat-card .label{ font-family:'JetBrains Mono', monospace; font-size:.78rem; color: var(--pencil); }
.about-grid .stat-card:nth-child(2){ transform: rotate(-1deg); }
.about-grid .stat-card:nth-child(3){ transform: rotate(1deg); }

/* ---------- projects (index cards, pinned) ---------- */
.projects-board{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.index-card{
  background: var(--paper-card);
  border: 2px solid var(--ink);
  padding: 20px 18px 22px;
  position: relative;
  transition: transform .2s ease;
}
.projects-board .index-card:nth-child(1){ transform: rotate(-2deg); }
.projects-board .index-card:nth-child(2){ transform: rotate(1.5deg); }
.projects-board .index-card:nth-child(3){ transform: rotate(-1deg); }
.projects-board .index-card:nth-child(3n+1){ transform: rotate(-2deg); }
.projects-board .index-card:nth-child(3n+2){ transform: rotate(1.5deg); }
.projects-board .index-card:nth-child(3n+3){ transform: rotate(-1deg); }
.index-card:hover{ transform: rotate(0deg) translateY(-4px) !important; }
.index-card .pin{
  position:absolute; top:-10px; left:50%; transform: translateX(-50%);
  width:16px; height:16px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #e8756a, var(--pen-red));
  box-shadow: 0 3px 4px var(--shadow);
}
.index-card .icon{ width:52px; height:52px; margin-bottom: 12px; }
.index-card h3{ font-family:'Kalam',cursive; font-size:1.35rem; margin: 0 0 6px; }
.index-card p{ font-size:.92rem; color: var(--ink-soft); margin: 0 0 14px; }
.tag-row{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom: 14px; }
.tag{
  font-family:'JetBrains Mono', monospace; font-size:.7rem;
  background: var(--paper); border: 1px solid var(--pencil); padding: 2px 8px; border-radius: 2px;
}
.index-card a.view{
  font-family:'JetBrains Mono', monospace; font-size:.8rem; color: var(--ink);
  text-decoration: none; border-bottom: 2px solid var(--highlight);
}

/* ---------- skills: categorized with legend ---------- */
.skills-legend{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono', monospace; font-size:.78rem; color: var(--pencil);
  background: var(--paper-card); border: 1.5px dashed var(--pencil);
  padding: 8px 14px; margin-bottom: 30px; transform: rotate(-.5deg);
}
.skills-legend .dots{ margin-right:4px; }
.skills-legend span.sep{ color: var(--grid-line); }

.skills-groups{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px 30px;
}
.skill-group{ position:relative; padding-top: 6px; }
.group-tab{
  display:inline-block;
  font-family:'Kalam', cursive; font-size:1.25rem; font-weight:700;
  color: var(--ink);
  background: var(--highlight);
  padding: 4px 14px 6px;
  margin: 0 0 14px;
  transform: rotate(-1.2deg);
  border: 2px solid var(--ink);
}
.skill-group:nth-child(even) .group-tab{ transform: rotate(1deg); }

.skill-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:10px;
}
.skill-chip{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background: var(--paper-card); border: 2px solid var(--ink);
  padding: 9px 14px;
}
.skill-chip .skill-name{
  font-family:'JetBrains Mono', monospace; font-size:.86rem;
}
.skill-chip .dots{ display:flex; gap:5px; flex-shrink:0; }
.skill-chip .dots i{
  width:9px; height:9px; border-radius:50%; display:inline-block;
  border: 1.5px solid var(--ink);
  background: transparent;
}
.skill-chip .dots i.filled{ background: var(--pen-red); }
.skill-chip:hover{ background: var(--highlight); }

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

/* ---------- experience timeline ---------- */
.timeline{ position:relative; padding-left: 40px; }
.timeline svg.rail{ position:absolute; left:8px; top:0; bottom:0; width:20px; height:100%; }
.timeline-item{ position:relative; padding-bottom: 40px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item .dot{
  position:absolute; left:-40px; top:4px; width:16px; height:16px; border-radius:50%;
  background: var(--paper-card); border:3px solid var(--pen-red);
}
.timeline-item .date{
  font-family:'Caveat', cursive; font-size:1.3rem; color: var(--pen-red); display:block;
}
.timeline-item h4{ font-family:'Kalam',cursive; font-size:1.2rem; margin: 2px 0 4px; }
.timeline-item p{ color: var(--ink-soft); margin:0; max-width: 60ch; }
.timeline-item .company-line{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:2px; }
.timeline-item .company-link{
  font-family:'JetBrains Mono', monospace; font-size:.78rem;
  color: var(--pen-red); text-decoration:none; border-bottom: 1px dashed var(--pen-red);
}
.timeline-item .company-link:hover{ border-bottom-style: solid; }
.timeline-item ul.role-bullets{ margin: 8px 0 12px; padding-left: 20px; color: var(--ink-soft); }
.timeline-item ul.role-bullets li{ margin-bottom: 4px; }

/* ---------- technical activities ---------- */
.activities-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.activity-card{
  background: var(--paper-card); border: 2px solid var(--ink);
  padding: 18px 20px; position:relative; display:flex; gap:14px;
}
.activities-grid .activity-card:nth-child(odd){ transform: rotate(-1deg); }
.activities-grid .activity-card:nth-child(even){ transform: rotate(1deg); }
.activity-card:hover{ transform: rotate(0deg) translateY(-3px); }
.activity-card .ribbon{ width:44px; height:52px; flex-shrink:0; }
.activity-card .activity-body{ flex:1; min-width:0; }
.activity-card .activity-top{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin-bottom:4px;
}
.activity-card h3{ font-family:'Kalam', cursive; font-size:1.2rem; margin:0; }
.activity-badge{
  font-family:'JetBrains Mono', monospace; font-size:.68rem; font-weight:700;
  padding: 3px 9px; border: 1.5px solid var(--ink); white-space:nowrap;
}
.activity-badge.win{ background: var(--highlight); }
.activity-badge.finalist{ background: var(--paper); }
.activity-badge.speaker{ background: #dfe6c9; }
.activity-badge.participant{ background: var(--paper-card); }
.activity-card .meta{
  font-family:'JetBrains Mono', monospace; font-size:.72rem; color: var(--pencil);
  display:block; margin-bottom:6px;
}
.activity-card p{ margin:0; font-size:.9rem; color: var(--ink-soft); }

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

/* ---------- contact ---------- */
.contact-note{
  background: var(--paper-card); border: 2px solid var(--ink);
  padding: 40px; text-align:center; position:relative;
  transform: rotate(-.6deg);
}
.contact-note::before{
  content:""; position:absolute; top:-14px; left:44%;
  width:60px; height:24px; background: var(--tape); opacity:.85; transform: rotate(3deg);
  box-shadow: 0 2px 4px var(--shadow);
}
.contact-note h2{ font-family:'Kalam',cursive; font-size: 2rem; margin: 0 0 10px; }
.contact-note p{ color: var(--ink-soft); margin: 0 0 24px; }
.contact-links{ display:flex; justify-content:center; gap: 18px; flex-wrap:wrap; }

footer{ text-align:center; padding: 30px 0 50px; font-family:'JetBrains Mono', monospace; font-size:.78rem; color: var(--pencil); }

/* reveal on scroll */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

@media (max-width: 860px){
  .hero{ grid-template-columns: 1fr; }
  .about-grid{ grid-template-columns: 1fr 1fr; }
  .projects-board{ grid-template-columns: 1fr; }

  .nav-toggle{ display:flex; }
  nav ul{
    position:absolute; top: 100%; left:0; right:0;
    flex-direction: column; gap:0;
    background: var(--paper-card);
    border-bottom: 2px solid var(--ink);
    max-height:0; overflow:hidden;
    transition: max-height .28s ease;
  }
  nav ul.open{ max-height: 320px; overflow-y:auto; }
  nav ul li{ border-top: 1px solid var(--grid-line); }
  nav a{ display:block; padding: 14px 28px; }
  nav a::after{ display:none; }
  nav a.active{ background: var(--highlight); }
}