:root { color-scheme: light; background:#f7f0e3; color:#343329; font-family: -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100svh; overflow:hidden; }
main { width:100%; height:100svh; display:grid; place-items:center; }
.homepage { width:min(100vw,177.777778svh); aspect-ratio:16/9; position:relative; isolation:isolate; }
.paper { display:block; width:100%; height:100%; object-fit:contain; user-select:none; }
.character { position:absolute; left:50.5%; top:43%; width:7.2%; max-width:120px; aspect-ratio:12/19; transform:translateX(-50%); }
.poster,#sprite { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; }
#sprite { background-repeat:no-repeat; }
#sprite { opacity:0; }
.character.ready #sprite { opacity:1; }
.character.ready .poster { visibility:hidden; }
.tools { position:fixed; bottom:max(12px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:5px; padding:5px 8px; border:1px solid #40362614; border-radius:30px; background:#fffaf0dd; box-shadow:0 3px 18px #3a2c1610; backdrop-filter:blur(8px); white-space:nowrap; font-size:11px; opacity:.55; transition:opacity .2s; }
.tools:hover,.tools:focus-within { opacity:1; }
.hint { padding:0 10px; color:#706858; }
button,.tools a { border:0; color:inherit; background:transparent; cursor:pointer; padding:8px 11px; font:inherit; border-radius:20px; text-decoration:none; }
button:hover,.tools a:hover { background:#e9dfcb; }
:focus-visible { outline:2px solid #1678ab; outline-offset:3px; }
.sr-only,.angle { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.angle:focus { position:fixed; left:50%; bottom:62px; transform:translateX(-50%); width:200px; height:20px; clip:auto; margin:0; z-index:3; }
@media(max-width:640px) { .hint { display:none; } .tools { opacity:.85; } }
@media(prefers-reduced-motion:reduce) { * { transition:none!important; } }

.intro { position:absolute; left:25%; top:16%; width:50%; text-align:center; }
.intro h1 { margin:0; font-family:"Noteworthy","Marker Felt","Segoe Print","Comic Sans MS",cursive; font-size:clamp(24px,4.3vw,82px); font-weight:700; line-height:1.14; letter-spacing:-.04em; color:#11243b; transform:rotate(-2deg); }
.welcome { font-size:.76em; font-weight:400; }
.name { position:relative; color:#075d96; white-space:nowrap; }
.name::after { content:""; position:absolute; left:2%; right:0; bottom:-.07em; height:.055em; border-radius:30%; background:#ec2995; transform:rotate(-2deg); }
.title-star { display:inline-block; color:#e9ab03; font-size:.55em; vertical-align:top; padding-left:.14em; }
.tools { bottom:16px; left:auto; right:24px; transform:none; box-shadow:none; border:0; background:transparent; backdrop-filter:none; }
@media(max-width:640px) { .intro h1 { font-size:clamp(20px,4.9vw,32px); } .tools { right:12px; } }

/* A small hand-drawn paper link in the personal homepage. */
.resume-note { position:absolute; left:65%; top:44%; width:9%; max-width:132px; aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; color:#142b40; text-decoration:none; background:#fffaf0; border:1.5px solid #22364a; border-radius:2px 2px 6px 3px; box-shadow:4px 5px 0 #ab94722b; transform:rotate(7deg); transition:transform .2s,box-shadow .2s; font-family:"Noteworthy","Marker Felt","Segoe Print",cursive; }
.resume-note:hover,.resume-note:focus-visible { transform:rotate(2deg) translateY(-4px); box-shadow:5px 9px 0 #ab94722b; }
.note-title { position:relative; z-index:1; font-size:clamp(9px,1.65vw,25px); transform:rotate(-4deg); }
.note-title::after { content:""; position:absolute; left:-3%; right:-4%; bottom:0; height:.3em; background:#ffde50b0; z-index:-1; transform:rotate(-2deg); }
.note-fold { position:absolute; right:-1px; top:-1px; width:20%; aspect-ratio:1; background:linear-gradient(45deg,#e5d7bd 49%,#f7f0e3 50%); border-bottom:1px solid #22364a; border-left:1px solid #22364a; }
.note-lines { position:absolute; left:15%; right:15%; top:25%; height:50%; opacity:.25; background:repeating-linear-gradient(transparent 0 12px,#487b9e 12px 13px); }
.note-arrow { position:absolute; right:12%; bottom:7%; color:#086cac; font-size:clamp(10px,1.5vw,24px); }
.resume-page { overflow:auto; background-color:#f7f0e3; background-image:repeating-linear-gradient(18deg,#76582303 0 1px,transparent 1px 6px),repeating-linear-gradient(110deg,#ffffff25 0 1px,transparent 1px 4px); }
.resume-bar { max-width:1120px; margin:auto; padding:32px 28px 22px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; }
.resume-bar h1 { margin:0; font-family:"Noteworthy","Marker Felt","Segoe Print",cursive; font-size:38px; color:#132c42; transform:rotate(-3deg); font-weight:400; }
.resume-bar h1 span { color:#e8b800; }
.back-link,.pdf-link { color:#1e5877; text-decoration:none; font-size:13px; padding:10px 0; }
.back-link:hover,.pdf-link:hover { color:#d51f88; }
.pdf-link { justify-self:end; }
.resume-content { display:block; height:auto; width:min(920px,calc(100% - 48px)); margin:0 auto 64px; }
.resume-pages { display:flex; flex-direction:column; gap:24px; }
.resume-sheet { display:block; width:100%; height:auto; background:white; border:1px solid #48372318; box-shadow:0 12px 40px #4b391518; }
.public-resume-head { margin:0 0 18px; padding:22px 26px 20px; color:#17374b; background:#fffaf09c; border:1px solid #d9ccb8; border-radius:5px; box-shadow:4px 5px 0 #ab947216; }
.public-resume-head .eyebrow { margin:0 0 6px; color:#1e7593; font-size:11px; font-weight:700; letter-spacing:.16em; }
.public-resume-head h2 { margin:0; font-family:"Noteworthy","Marker Felt","Segoe Print",cursive; font-size:30px; font-weight:400; line-height:1.2; }
.public-resume-head h2 span { color:#0b6f9f; font-size:.85em; }
.public-resume-head > p:last-child { margin:7px 0 0; color:#736858; font-size:13px; }
.resume-status { text-align:center; padding:72px 24px; line-height:1.8; color:#6c6153; background:#fffaf080; border:1px solid #dcd1bf; border-radius:4px; }
@media(max-width:640px) { .resume-bar { padding:22px 18px 18px; gap:10px; } .resume-bar h1 { font-size:28px; } .back-link,.pdf-link { font-size:11px; } .resume-content { width:calc(100% - 24px); } .public-resume-head { padding:16px 18px; } .public-resume-head h2 { font-size:25px; } }

/* Experience logos sit on the paper margins, outside the resume sheet. */
.resume-layout { display:grid; grid-template-columns:minmax(150px,1fr) minmax(0,920px) minmax(180px,1fr); align-items:start; gap:40px; height:auto; width:min(1600px,calc(100% - 64px)); margin:0 auto 64px; }
.resume-layout .resume-content { width:100%; margin:0; height:auto; min-width:0; }
.resume-aside { position:sticky; top:36px; padding-top:52px; text-align:center; }
.resume-aside h2 { display:inline-block; position:relative; margin:0; font-family:"Noteworthy","Marker Felt","Segoe Print",cursive; font-size:38px; font-weight:400; color:#17374b; transform:rotate(-4deg); }
.resume-aside h2::after { content:""; position:absolute; bottom:-6px; height:3px; left:-5%; right:-5%; border-radius:50%; background:#e8329a; transform:rotate(-2deg); }
.school-aside h2 { transform:rotate(3deg); }
.school-aside h2::after { background:#24bfe5; transform:rotate(2deg); }
.logo-list { list-style:none; margin:48px 0 0; padding:0; display:flex; flex-direction:column; align-items:center; gap:52px; }
.logo-list li { display:flex; align-items:center; justify-content:center; width:100%; }
.logo-list img { display:block; max-width:100%; object-fit:contain; height:auto; }
.company-symbol { width:104px; }
.agora-logo { width:180px; }
.school-list img { width:220px; }
@media(max-width:1200px) { .resume-layout { grid-template-columns:130px minmax(0,1fr) 150px; gap:24px; width:calc(100% - 40px); } .resume-aside h2 { font-size:32px; } }
@media(max-width:900px) { .resume-layout { grid-template-columns:1fr 1fr; gap:24px; width:calc(100% - 32px); } .resume-aside { position:static; padding-top:6px; } .company-aside { grid-column:1; grid-row:1; } .school-aside { grid-column:2; grid-row:1; } .resume-layout .resume-content { grid-column:1/-1; grid-row:2; } .logo-list { margin-top:24px; gap:25px; min-height:168px; } .company-symbol { width:58px; } .agora-logo { width:120px; } .school-list img { width:155px; } .resume-aside h2 { font-size:30px; } }

/* Three small illustrated doors into Jason's notebooks. */
.object-link { position:absolute; display:block; text-align:center; text-decoration:none; color:#17465d; z-index:2; min-width:40px; transition:transform .2s; }
.object-link img { display:block; width:100%; aspect-ratio:4/3; object-fit:contain; }
.object-link:hover,.object-link:focus-visible { transform:translateY(-5px) rotate(-3deg); }
.object-label { display:inline-block; font-family:"Noteworthy","Marker Felt","Segoe Print",cursive; font-size:clamp(9px,1.3vw,22px); line-height:1.25; border-bottom:2px solid #e72f97; white-space:nowrap; }
.learning-object { left:35%; top:35%; width:12%; }
.learning-object .object-label { position:absolute; top:32%; left:8%; right:12%; border:0; color:#185f84; }
.projects-object { left:28%; top:50%; width:10%; }
.journal-object { left:58%; top:54%; width:9%; }
.resume-note { left:69%; top:40%; width:7.5%; }
@media(max-width:640px) { .object-link { min-width:36px; } .object-label { font-size:9px; border-bottom-width:1px; } .learning-object { left:34%; } .projects-object { left:26%; } .journal-object { left:57%; top:52%; } }

/* Phone layout: turn the wide illustrated canvas into a full-height, tappable menu. */
@media(max-width:700px) and (orientation:portrait) {
  body:not(.resume-page):not(.notebook-page):not(.note-page) { overflow:auto; }
  body:not(.resume-page):not(.notebook-page):not(.note-page) main { min-height:100svh; height:auto; display:block; }
  .homepage { width:100%; min-height:100svh; aspect-ratio:auto; overflow:hidden; }
  .homepage .paper { position:absolute; inset:0; height:100%; object-fit:cover; object-position:center; opacity:.2; }
  .intro { left:8%; top:6%; width:84%; z-index:2; }
  .intro h1 { font-size:clamp(34px,10.8vw,48px); line-height:1.08; }
  .object-link { min-width:0; }
  .object-link img { aspect-ratio:4/3; }
  .object-label { font-size:14px; border-bottom-width:2px; }
  .learning-object { left:7%; top:23%; width:42%; }
  .learning-object .object-label { top:31%; }
  .projects-object { left:auto; right:7%; top:24%; width:38%; }
  .journal-object { left:8%; top:45%; width:38%; }
  .resume-note { left:auto; right:13%; top:47%; width:27%; max-width:110px; }
  .note-title { font-size:17px; }
  .note-arrow { font-size:16px; }
  .character { left:50%; top:68%; width:22%; max-width:96px; }
  .tools { left:50%; right:auto; bottom:max(12px,env(safe-area-inset-bottom)); transform:translateX(-50%); width:max-content; max-width:calc(100% - 24px); padding:4px 6px; border:1px solid #40362614; background:#fffaf0e8; box-shadow:0 3px 18px #3a2c1610; backdrop-filter:blur(8px); opacity:.92; z-index:4; }
  .tools button { min-height:44px; }
}