/* chakob.com — playful academic */
@font-face{font-family:"Fraunces";src:url("fonts/fraunces-latin-full-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("fonts/fraunces-latin-full-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Caveat";src:url("fonts/caveat-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --ink:#22303f;
  --ink-soft:#4a5868;
  --muted:#7a8592;
  --paper:#fffdf8;
  --yellow:#f2bd44;
  --yellow-soft:#fbe8b6;
  --sky:#6f93c9;
  --line:#e7e1d4;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --hand:"Caveat","Comic Sans MS",cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1040px;margin:0 auto;padding:0 28px}

/* ---------- nav ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;padding:26px 0}
.logo{font-family:var(--hand);font-size:34px;text-decoration:none;line-height:1;position:relative}
.logo .dot{color:var(--yellow)}
.nav ul{list-style:none;display:flex;gap:30px;margin:0;padding:0}
.nav ul a{text-decoration:none;font-weight:500;font-size:15px;letter-spacing:.02em;position:relative;padding-bottom:4px}
.nav ul a::after{content:"";position:absolute;left:-4px;right:-4px;bottom:-2px;height:9px;opacity:0;transition:opacity .2s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 25 2, 45 9, 65 5 S 92 3, 98 5' stroke='%23f2bd44' stroke-width='3.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.nav ul a:hover::after,.nav ul a[aria-current]::after{opacity:1}

/* ---------- hand-drawn helpers ---------- */
.hand{font-family:var(--hand);font-weight:600}
.squiggle{position:relative;white-space:nowrap;display:inline-block}
.squiggle svg{position:absolute;left:-2%;width:104%;bottom:-.22em;height:.42em;overflow:visible}
.squiggle path{stroke:var(--yellow);stroke-width:5;fill:none;stroke-linecap:round}
.marker{background:linear-gradient(transparent 58%,var(--yellow-soft) 58%,var(--yellow-soft) 92%,transparent 92%);padding:0 .1em}
.draw path{stroke-dasharray:400;stroke-dashoffset:400;animation:draw 1.1s .35s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.draw path{animation:none;stroke-dashoffset:0}}

/* ---------- framed photo ---------- */
.frame{position:relative;width:100%;max-width:380px}
.frame .shadow{position:absolute;inset:22px -22px -22px 22px;background:var(--yellow)}
.frame img{position:relative;border:6px solid var(--ink);aspect-ratio:3/4;object-fit:cover;width:100%;height:auto}
.frame .burst{position:absolute;top:-58px;right:-58px;width:96px;height:96px;overflow:visible}
.frame .burst path{stroke:var(--ink);stroke-width:7;fill:none;stroke-linecap:round}
.frame .note{position:absolute;left:-30px;bottom:-62px;font-family:var(--hand);font-size:23px;color:var(--ink-soft);transform:rotate(-4deg);display:flex;align-items:flex-start;gap:4px}
.frame .note svg{width:44px;height:38px;margin-top:-18px}
.frame .note path{stroke:var(--ink-soft);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------- home ---------- */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center;padding:50px 0 110px}
.hello{font-family:var(--hand);font-size:30px;color:var(--ink-soft);margin:0 0 4px;transform:rotate(-2deg);display:inline-block}
h1{font-family:var(--serif);font-weight:500;font-size:clamp(44px,6.4vw,74px);line-height:1.02;letter-spacing:-.02em;margin:0 0 26px}
h1 em{font-style:italic;font-weight:400}
.lede{font-size:19px;color:var(--ink-soft);max-width:34em;margin:0 0 18px}
.lede strong{color:var(--ink);font-weight:600}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-size:15px;padding:12px 20px;border:2.5px solid var(--ink);background:#fff;box-shadow:5px 5px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn.yellow{background:var(--yellow)}
.btn.small{padding:7px 13px;font-size:13.5px;box-shadow:3px 3px 0 var(--ink);border-width:2px}
.btn.small:hover{box-shadow:5px 5px 0 var(--ink)}

.strip{border-top:2px dashed var(--line);padding:56px 0 30px;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.strip h3{font-family:var(--hand);font-size:28px;margin:0 0 6px;line-height:1.1}
.strip p{margin:0;color:var(--ink-soft);font-size:15.5px}
.strip a{text-decoration:none;border-bottom:2px solid var(--yellow)}

/* ---------- page headers ---------- */
.pagehead{padding:40px 0 30px;position:relative}
.pagehead .kicker{font-family:var(--hand);font-size:26px;color:var(--ink-soft);transform:rotate(-2deg);display:inline-block}
.pagehead h1{margin-bottom:14px}
.pagehead .star{position:absolute;right:4%;top:28px;width:70px;height:70px}
.pagehead .star path{stroke:var(--yellow);stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round}

h2{font-family:var(--serif);font-weight:500;font-size:34px;letter-spacing:-.01em;margin:0 0 8px;line-height:1.15}
.sec{padding:40px 0}
.sec-note{font-family:var(--hand);font-size:22px;color:var(--muted);margin:0 0 30px}

/* ---------- dissertation ---------- */
.diss{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.diss p{margin:0 0 16px;color:var(--ink-soft)}
.diss p strong{color:var(--ink)}
.question{font-family:var(--serif);font-style:italic;font-size:23px;line-height:1.4;color:var(--ink);border-left:5px solid var(--yellow);padding:4px 0 4px 20px;margin:6px 0 26px}
.parts{display:grid;gap:18px}
.part{border:2.5px solid var(--ink);background:#fff;padding:18px 22px;position:relative}
.part:nth-child(1){transform:rotate(-.6deg)}
.part:nth-child(2){transform:rotate(.5deg);margin-left:18px}
.part:nth-child(3){transform:rotate(-.3deg)}
.part .tag{font-family:var(--hand);font-size:26px;line-height:1;display:inline-block;background:var(--yellow);padding:4px 10px 2px;margin:-34px 0 8px -6px;transform:rotate(-3deg)}
.part h4{font-family:var(--serif);font-weight:600;font-size:18px;margin:0 0 4px}
.part p{margin:0;font-size:15px;color:var(--ink-soft)}
.part .cites{font-size:13px;color:var(--muted);margin-top:6px}
.pathways{margin-top:34px;text-align:center}
.pathways svg{width:100%;max-width:470px;height:auto;margin:0 auto}

/* ---------- papers ---------- */
.papers{display:grid;gap:30px}
.paper{display:grid;grid-template-columns:120px 1fr;gap:26px;align-items:start;padding:22px;border:2px solid transparent;transition:border-color .2s,background .2s,box-shadow .2s;position:relative}
.paper:hover{border-color:var(--ink);background:#fff;box-shadow:7px 7px 0 var(--yellow)}
.paper .thumb{border:2px solid var(--ink);background:#fff;box-shadow:4px 4px 0 var(--yellow);transform:rotate(-2deg);transition:transform .25s}
.paper:nth-child(even) .thumb{transform:rotate(1.8deg)}
.paper:hover .thumb{transform:rotate(0) scale(1.03)}
.venue{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--yellow-soft);padding:2px 8px;margin-bottom:8px}
.venue.review{background:#e3ebf6}
.paper h3{font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.3;margin:0 0 6px}
.authors{font-size:14.5px;color:var(--ink-soft);margin:0 0 6px}
.authors b{color:var(--ink);font-weight:600}
.blurb{font-size:15px;color:var(--ink-soft);margin:0 0 14px;max-width:46em}
.paper .links{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.paper .award{font-family:var(--hand);font-size:20px;color:var(--ink-soft)}

/* ---------- CV ---------- */
.cv{display:grid;grid-template-columns:200px 1fr;gap:20px 50px}
.cv h2{font-size:26px;grid-column:1/-1;margin-top:34px;display:flex;align-items:center;gap:14px}
.cv h2::after{content:"";flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 14px)}
.cv .when{font-family:var(--hand);font-size:22px;color:var(--ink-soft);line-height:1.3;padding-top:2px}
.cv .what h4{margin:0;font-family:var(--serif);font-weight:600;font-size:18.5px}
.cv .what .where{color:var(--ink-soft);font-size:15px}
.cv .what p{margin:6px 0 0;color:var(--ink-soft);font-size:15px}
.cv .what ul{margin:6px 0 0;padding-left:20px;color:var(--ink-soft);font-size:15px}

/* ---------- footer ---------- */
footer{margin-top:80px;padding:34px 0 50px;border-top:2px dashed var(--line);font-size:14px;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a{color:var(--ink-soft)}
footer .hand{font-size:21px;color:var(--ink-soft)}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:80px;padding-top:20px}
  .hero .frame{max-width:300px;margin:0 auto 0 30px}
  .strip{grid-template-columns:1fr;gap:28px}
  .diss{grid-template-columns:1fr}
  .cv{grid-template-columns:1fr;gap:4px}
  .cv .what{margin-bottom:16px}
  .pagehead .star{display:none}
}
@media (max-width:560px){
  body{font-size:16px}
  .nav ul{gap:18px}
  .paper{grid-template-columns:1fr;padding:14px 4px}
  .paper .thumb{width:120px}
  .frame .burst{width:70px;height:70px;top:-44px;right:-36px}
}