/* Huan Zhu — notebook style. Graph-paper ground, pencil notes, hand-drawn charts. */
:root{
  color-scheme:light;
  --paper:#F7F6EF; --grid:#DCE6DA; --ink:#1E2328; --pencil:#5B6066; --blue:#2A4C8C; --red:#B0412B; --green:#3C7A4A;
  --hl:#FCEB7A; --note:#FFF3A6; --tape:rgba(214,203,170,.75);
  --f-body:"Crimson Pro",Georgia,"Times New Roman",serif;
  --f-hand:"Kalam","Comic Sans MS","Bradley Hand",cursive;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background-color:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:19px;line-height:1.55;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
}
img{max-width:100%}
.page{max-width:760px;margin:0 auto;padding-block:36px 72px;display:flex;flex-direction:column;gap:64px;position:relative}
h1,h2,h3{font-family:var(--f-body);text-wrap:balance;margin:0;line-height:1.15}
p{margin:0}
a{color:var(--blue)}
:focus-visible{outline:2px dashed var(--blue);outline-offset:3px}
.hl{background:linear-gradient(100deg,transparent 2%,var(--hl) 4%,var(--hl) 94%,transparent 97%);padding:0 3px}
.u{background:linear-gradient(var(--red),var(--red)) no-repeat 0 92%/100% 2px}

/* top line */
.top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--f-hand);color:var(--pencil);font-size:17px}
.top nav{display:flex;gap:18px;flex-wrap:wrap}
.top a{color:var(--pencil);text-decoration:none}
.top a:hover{color:var(--blue);text-decoration:underline wavy}

/* intro */
.intro{position:relative;display:flex;flex-direction:column;gap:18px}
.intro h1{font-size:clamp(42px,7vw,62px);font-weight:700;letter-spacing:-.01em}
.intro .sub{font-family:var(--f-hand);font-size:20px;color:var(--blue);transform:rotate(-1deg);transform-origin:left}
.intro p.body{max-width:60ch}
.sticky{
  background:var(--note);padding:18px 20px 16px;font-family:var(--f-hand);font-size:18px;line-height:1.45;
  transform:rotate(1.6deg);box-shadow:0 1px 1px rgba(0,0,0,.08),2px 6px 10px rgba(60,50,10,.12);
  max-width:330px;align-self:flex-end;position:relative;margin-top:6px
}
.sticky h2{margin:0 0 6px;font-family:var(--f-hand);font-size:19px;font-weight:700}
.sticky ul{margin:0;padding-left:18px}
.sticky li{margin:2px 0}
.sticky .arr{color:var(--red);font-weight:700}

/* section titles */
.sec{display:flex;flex-direction:column;gap:22px}
.sec > h2{font-size:34px;font-weight:700;display:inline-block;align-self:flex-start;position:relative}
.sec > h2 svg{position:absolute;left:-4px;bottom:-10px;width:calc(100% + 8px);height:14px;overflow:visible}
.sec > .aside{font-family:var(--f-hand);color:var(--pencil);font-size:17px;margin-top:-10px}

/* home: list of case entries */
.entries{display:flex;flex-direction:column;gap:30px}
.entry{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink)}
.entry .tag{font-family:var(--f-hand);font-size:16px;color:var(--pencil)}
.entry h3{font-size:26px;font-weight:700}
.entry p{max-width:62ch}
.entry .go{font-family:var(--f-hand);font-size:18px;color:var(--blue)}
.entry:hover h3{text-decoration:underline wavy var(--red);text-underline-offset:5px}
.entry:hover .go{color:var(--red)}

/* case pages */
.case{display:flex;flex-direction:column;gap:16px;position:relative}
.case h1{font-size:clamp(34px,5.4vw,46px);font-weight:700}
.case .tag{font-family:var(--f-hand);font-size:17px;color:var(--pencil)}
.case p{max-width:62ch}
.case h2{font-size:24px;font-weight:700;margin-top:10px}
.case .tags{display:flex;flex-wrap:wrap;gap:6px 16px;font-family:var(--f-hand);font-size:16px;color:var(--pencil)}
.case .tags span::before{content:"# ";color:var(--red)}
.margin{
  font-family:var(--f-hand);font-size:16px;color:var(--red);line-height:1.3;
  position:absolute;width:170px;right:-210px;top:40px;transform:rotate(3deg)
}
.margin::before{content:"← "}
.card{
  background:#FFFEFA;position:relative;padding:20px 18px 14px;margin-top:10px;
  border:1.5px solid var(--ink);
  border-radius:255px 12px 225px 10px/10px 225px 12px 255px;
  box-shadow:3px 4px 0 rgba(30,35,40,.12);transform:rotate(-.4deg)
}
.card .tape{position:absolute;top:-13px;left:50%;width:110px;height:26px;background:var(--tape);transform:translateX(-50%) rotate(-3deg)}
.card .cap{font-family:var(--f-hand);font-size:17px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.card .small{font-family:var(--f-hand);font-size:14px;color:var(--pencil);margin-top:6px}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tabs button{
  font:400 16px var(--f-hand);background:transparent;color:var(--ink);cursor:pointer;padding:3px 12px;
  border:1.5px solid var(--ink);border-radius:15px 225px 15px 255px/255px 15px 225px 15px
}
.tabs button[aria-pressed="true"]{background:var(--hl)}
.nums{display:flex;flex-wrap:wrap;gap:6px 26px;font-family:var(--f-hand);font-size:17px;margin:8px 0 4px}
.nums b{font-size:24px;color:var(--blue);font-weight:700;font-variant-numeric:tabular-nums}
svg{display:block;width:100%;height:auto}
svg text{font-family:var(--f-hand);font-size:14px;fill:var(--pencil)}
.scrib{font-family:var(--f-hand);font-size:17px;color:var(--blue);min-height:3.2em;margin-top:6px;padding-left:12px;border-left:2px solid var(--blue)}
.sl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:8px 0}
.sl label{display:flex;flex-direction:column;font-family:var(--f-hand);font-size:15px;color:var(--pencil)}
.sl output{font-size:20px;color:var(--ink);font-weight:700}
input[type=range]{width:100%;accent-color:var(--blue)}
.pager{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--f-hand);font-size:18px;border-top:1.5px dashed var(--pencil);padding-top:16px}
.pager a{text-decoration:none}
.pager a:hover{text-decoration:underline wavy}

/* how */
.how{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:14px;counter-reset:s}
.how li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;counter-increment:s}
.how li::before{
  content:counter(s);font-family:var(--f-hand);font-weight:700;font-size:20px;color:var(--red);
  width:36px;height:36px;display:grid;place-items:center;border:1.8px solid var(--red);
  border-radius:50% 45% 52% 48%/46% 52% 48% 54%;transform:rotate(-8deg)
}
.how b{font-weight:700}

/* jobs */
.jobs{display:flex;flex-direction:column;gap:22px}
.job{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px}
.job .yr{font-family:var(--f-hand);color:var(--pencil);font-size:17px;padding-top:2px}
.job h3{font-size:22px;font-weight:700}
.job .role{font-style:italic;color:var(--pencil)}
.job p{margin-top:4px}
.edu{font-family:var(--f-hand);color:var(--pencil);font-size:17px;line-height:1.5}

/* contact */
.mail{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:6px}
.mail a{font-family:var(--f-hand);font-size:24px;color:var(--blue);word-break:break-all}
.mail button{font:700 16px var(--f-hand);background:var(--hl);color:var(--ink);border:1.5px solid var(--ink);padding:4px 14px;cursor:pointer;border-radius:15px 225px 15px 255px/255px 15px 225px 15px}
.foot{font-family:var(--f-hand);font-size:14px;color:var(--pencil)}

@media (max-width:1180px){
  .margin{position:static;width:auto;transform:rotate(-1deg);margin:0 0 8px}
  .margin::before{content:"↓ "}
}
@media (max-width:560px){
  body{font-size:18px}
  .sticky{align-self:stretch;max-width:none}
  .sl{grid-template-columns:1fr}
  .job{grid-template-columns:1fr;gap:2px}
}
@media print{body{background-image:none}}

/* ---------- personal site additions ---------- */
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.door{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink);background:#FFFEFA;padding:18px 16px 16px;
  border:1.5px solid var(--ink);border-radius:255px 12px 225px 10px/10px 225px 12px 255px;box-shadow:3px 4px 0 rgba(30,35,40,.12)}
.door:nth-child(1){transform:rotate(-.8deg)}
.door:nth-child(2){transform:rotate(.6deg)}
.door:nth-child(3){transform:rotate(-.3deg)}
.door:nth-child(4){transform:rotate(.8deg)}
.door .label{font-family:var(--f-hand);font-size:16px;color:var(--red)}
.door h3{font-size:24px;font-weight:700}
.door p{font-size:17px;color:var(--pencil)}
.door:hover h3{text-decoration:underline wavy var(--red);text-underline-offset:5px}

.posts{display:flex;flex-direction:column;gap:22px;margin:0;padding:0;list-style:none}
.posts li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px}
.posts .date{font-family:var(--f-hand);color:var(--pencil);font-size:17px;padding-top:3px}
.posts a{color:var(--ink);text-decoration:none}
.posts a h3{font-size:23px;font-weight:700}
.posts a:hover h3{text-decoration:underline wavy var(--red);text-underline-offset:5px}
.posts p{color:var(--pencil);margin-top:2px}

.post{display:flex;flex-direction:column;gap:16px}
.post h1{font-size:clamp(34px,5.4vw,46px);font-weight:700}
.post .date{font-family:var(--f-hand);font-size:17px;color:var(--pencil)}
.post p,.post ul{max-width:62ch}
.post h2{font-size:24px;font-weight:700;margin-top:10px}
.post blockquote{margin:0;padding-left:14px;border-left:2px solid var(--blue);font-family:var(--f-hand);color:var(--blue);font-size:19px}

.empty{font-family:var(--f-hand);font-size:19px;background:var(--note);padding:18px 20px;max-width:420px;transform:rotate(-1.2deg);
  box-shadow:0 1px 1px rgba(0,0,0,.08),2px 6px 10px rgba(60,50,10,.12)}
.shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.shelf .slot{aspect-ratio:4/5;max-width:100%;border:1.5px dashed var(--pencil);border-radius:4px;display:grid;place-items:center;
  font-family:var(--f-hand);color:var(--pencil);font-size:16px;text-align:center;padding:10px;background:rgba(255,254,250,.6)}

@media (max-width:640px){
  .doors,.shelf{grid-template-columns:1fr}
  .shelf .slot{aspect-ratio:auto;min-height:90px}
  .posts li{grid-template-columns:1fr;gap:2px}
}

/* ---------- restaurant list ---------- */
.spots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.spot{background:#FFFEFA;padding:16px 18px 14px;position:relative;display:flex;flex-direction:column;gap:6px;
  border:1.5px solid var(--ink);border-radius:15px 225px 15px 255px/255px 15px 225px 15px;box-shadow:3px 4px 0 rgba(30,35,40,.12)}
.spot:nth-child(odd){transform:rotate(-.6deg)}
.spot:nth-child(even){transform:rotate(.5deg)}
.spot-head{display:flex;flex-direction:column;gap:0}
.spot h3{font-size:24px;font-weight:700}
.spot .where{font-family:var(--f-hand);font-size:15px;color:var(--pencil)}
.spot .order{font-family:var(--f-hand);font-size:18px;color:var(--blue)}
.spot .order span{color:var(--red)}
.spot .addr{font-size:16px;color:var(--pencil)}
@media (max-width:640px){.spots{grid-template-columns:1fr}}
.spot.wide{grid-column:1/-1;transform:rotate(-.25deg)}
.snaps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:10px}
.snaps figure{margin:0;background:#fff;padding:7px 7px 4px;box-shadow:0 1px 2px rgba(0,0,0,.12),2px 5px 9px rgba(30,35,40,.12);position:relative}
.snaps figure:nth-child(1){transform:rotate(-1.6deg)}
.snaps figure:nth-child(2){transform:rotate(1.2deg)}
.snaps figure:nth-child(3){transform:rotate(-.7deg)}
.snaps figure::before{content:"";position:absolute;top:-9px;left:50%;width:56px;height:18px;background:var(--tape);transform:translateX(-50%) rotate(-4deg)}
.snaps img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;max-width:100%}
.snaps figcaption{font-family:var(--f-hand);font-size:15px;color:var(--pencil);text-align:center;padding-top:3px}
.snaps a:focus-visible{outline-offset:2px}
@media (max-width:640px){.snaps{grid-template-columns:1fr}}

/* ---------- neighborhoods ---------- */
.hood{display:flex;flex-direction:column;gap:10px}
.hood + .hood{margin-top:26px}
.hood-name{font-family:var(--f-hand);font-weight:700;font-size:24px;color:var(--blue);align-self:flex-start;
  padding:0 6px;background:linear-gradient(100deg,transparent 2%,var(--hl) 4%,var(--hl) 94%,transparent 97%) no-repeat 0 75%/100% 45%}
.hood-note{font-family:var(--f-hand);font-size:16px;color:var(--pencil);margin-top:-6px}
.snaps.tall img{aspect-ratio:3/4}

/* ---------- homepage portrait ---------- */
.intro.hello{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:18px 40px;align-items:start}
.hello-text{display:flex;flex-direction:column;gap:18px;min-width:0;grid-column:1;grid-row:1}
.me{grid-column:2;grid-row:1;margin:8px 0 0;background:#fff;padding:9px 9px 30px;position:relative;transform:rotate(2.2deg);
  box-shadow:0 1px 2px rgba(0,0,0,.12),3px 8px 14px rgba(30,35,40,.16)}
.me::before{content:"";position:absolute;top:-12px;left:50%;width:84px;height:24px;background:var(--tape);transform:translateX(-50%) rotate(-3deg)}
.me img{display:block;width:100%;height:auto;max-width:100%;aspect-ratio:4/5;object-fit:cover}
@media (max-width:640px){
  .intro.hello{grid-template-columns:1fr}
  .me{grid-column:1;grid-row:1;width:min(240px,70%);justify-self:center;transform:rotate(-1.5deg)}
  .hello-text{grid-row:2}
}

/* ---------- work: bullet points + toolbox ---------- */
.job .pts{margin:6px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:4px;max-width:66ch}
.job .pts li::marker{color:var(--red)}
.kit{display:flex;flex-direction:column;gap:16px}
.kit > div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px}
.kit-label{font-family:var(--f-hand);color:var(--pencil);font-size:17px;padding-top:2px}
@media (max-width:560px){.kit > div{grid-template-columns:1fr;gap:2px}}

/* ---------- investment holdings ---------- */
.holds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.hold{background:#FFFEFA;padding:16px 16px 14px;display:flex;flex-direction:column;gap:5px;min-width:0;
  border:1.5px solid var(--ink);border-radius:255px 12px 225px 10px/10px 225px 12px 255px;box-shadow:3px 4px 0 rgba(30,35,40,.12)}
.hold:nth-child(3n+1){transform:rotate(-.7deg)}
.hold:nth-child(3n+2){transform:rotate(.5deg)}
.hold:nth-child(3n){transform:rotate(-.2deg)}
.hold .tkr{font-family:var(--f-hand);font-weight:700;font-size:30px;line-height:1;color:var(--blue);align-self:flex-start;
  padding:2px 6px;background:linear-gradient(100deg,transparent 2%,var(--hl) 4%,var(--hl) 94%,transparent 97%) no-repeat 0 70%/100% 50%}
.hold h3{font-size:21px;font-weight:700}
.hold .sector{font-family:var(--f-hand);font-size:14px;color:var(--pencil);line-height:1.3}
.hold p{font-size:16px;line-height:1.45;margin-top:4px}
.hold .quote{font-family:var(--f-hand);font-size:16px;margin-top:auto;padding-top:6px}
@media (max-width:720px){.holds{grid-template-columns:1fr}}

/* ---------- work: tool links ---------- */
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.tools-label{font-family:var(--f-hand);font-size:17px;color:var(--red)}
.tool{font-family:var(--f-hand);font-weight:700;font-size:17px;color:var(--ink);text-decoration:none;background:var(--hl);
  padding:4px 14px;border:1.5px solid var(--ink);border-radius:15px 225px 15px 255px/255px 15px 225px 15px;box-shadow:2px 3px 0 rgba(30,35,40,.15)}
.tool:nth-of-type(odd){transform:rotate(-1deg)}
.tool:nth-of-type(even){transform:rotate(.8deg)}
.tool:hover{background:#fff;color:var(--blue)}