/* Personal notebook sections: Pranshu's structure, imdaryl's white-paper type system. */
@font-face{font-family:NoteCaveat;src:url('./fonts/caveat.ttf') format('truetype');font-weight:400;font-display:swap}
.intro-story{max-width:728px}
.intro h1{font-size:42px;letter-spacing:-1.9px;line-height:1.15;margin-left:0}
.intro-subtitle{font-style:italic;font-synthesis:style;margin-top:10px}
.intro-copy{font-size:15px;line-height:1.8;max-width:660px;margin-top:32px}
.intro-copy p{margin-bottom:20px}
.intro-contact{margin-top:30px}
.intro:after{content:'';position:absolute;left:0;right:0;bottom:0;border-bottom:1px solid var(--line);pointer-events:none}
.intro-contact>p{font-size:13px;margin:0 0 14px;letter-spacing:-.2px}
.personal-links{display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px;font-size:11px;color:var(--body)}
.personal-links a,.personal-links button{display:inline-flex;align-items:center;gap:7px;border:0;background:none;padding:4px 0;color:inherit;font:inherit}
.personal-links a:hover,.personal-links button:hover{color:var(--ink)}
.personal-links .link-arrow{font-family:var(--mono);font-size:12px}
.intro .updated{font:9px/1.6 var(--mono);margin-top:28px}
.narrow-column{width:min(728px,calc(100% - 48px));margin-inline:auto}
.after-work{padding:112px 0}
.notebook-heading{font:700 23px/1.25 var(--font);letter-spacing:-.75px;margin:0 0 48px}
.brush-mark{position:relative;isolation:isolate}
.brush-mark:after{content:'';position:absolute;left:0;bottom:-9px;width:100%;height:14px;background:url('./home-assets/paint-stroke.svg') center/100% 100% no-repeat;z-index:-1;opacity:.7;transform:rotate(-3deg)}
.side-projects-list{list-style:none;padding:0;margin:0;display:grid;gap:28px}
.side-projects-list li{display:flex;align-items:flex-start;gap:16px;padding:4px 0;max-width:100%}
.side-projects-list img{width:28px;height:28px;flex-shrink:0;transition:transform .25s}

.side-projects-list strong{display:block;font-size:15px;font-weight:700;line-height:1.3;letter-spacing:-.4px}
.side-projects-list .side-description{display:block;margin-top:6px;color:var(--muted);font-size:13px;line-height:1.6;letter-spacing:-.1px}
.life-section{padding:32px 0 90px}
.life-section .notebook-heading{margin-bottom:36px}
.interest-matrix{position:relative;aspect-ratio:1;width:100%;margin-top:52px;margin-bottom:28px;isolation:isolate}
.interest-matrix:before,.interest-matrix:after{content:'';position:absolute;z-index:-1;background:#b9ccba;pointer-events:none}
.interest-matrix:before{top:0;bottom:0;width:1px;left:50%;background:linear-gradient(transparent,#94b598 14%,#94b598 85%,transparent)}
.interest-matrix:after{left:0;right:0;height:1px;top:50%;background:linear-gradient(90deg,transparent,#94b598 14%,#94b598 85%,transparent)}
.matrix-label{position:absolute;font:10px/1.2 var(--font);letter-spacing:-.1px;color:var(--muted);white-space:nowrap;z-index:3;background:#fff;padding:0 5px}
.matrix-label.north{top:-22px;left:50%;transform:translateX(-50%)}
.matrix-label.south{bottom:-22px;left:50%;transform:translateX(-50%)}
.matrix-label.west{left:0;top:50%;transform:translateY(-50%);padding-left:0}
.matrix-label.east{right:0;top:50%;transform:translateY(-50%);padding-right:0}
.matrix-sticker{position:absolute;left:var(--x);top:var(--y);width:var(--size);min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;translate:0 var(--scroll-shift,0px);transform:translate(-50%,-50%) translate3d(var(--drag-x,0px),var(--drag-y,0px),0) rotate(calc(var(--rotation) + var(--drag-tilt,0deg)));border:0;padding:0;background:none;transition:filter .24s;line-height:0;z-index:1;touch-action:none;cursor:grab;filter:drop-shadow(0 2px 1px #17251b18)}
.matrix-sticker img{display:block;width:100%;height:auto;pointer-events:none}
.matrix-sticker.sticker-tool img{max-height:82px;object-fit:contain}
.matrix-sticker.dark-label,.matrix-sticker.drama-label{padding:16px 14px;border:4px solid #fff;box-shadow:0 1px 3px #00000026;border-radius:30px;background:#1b2724;filter:none}
.matrix-sticker.drama-label{background:#222244;padding:17px 12px}
.matrix-sticker.paper-label{padding:14px 10px;background:#f5f5d6;border:3px solid #fff;border-radius:4px;box-shadow:0 1px 3px #0000001f}
.matrix-sticker.soloop-mark{padding:12px;background:#27282b;border:4px solid #fff;border-radius:26px;box-shadow:0 2px 3px #00000021}
.matrix-sticker.app-mark{border-radius:25%;box-shadow:0 2px 3px #00000014}
.sticker-lettering{font:700 clamp(25px,5vw,39px)/1 NoteCaveat,cursive;letter-spacing:-1px;white-space:nowrap;padding:8px 5px}
.brand-note{color:#356047}
.web-note{color:#405a95}
.web-note .sticker-lettering:before{content:'<';font-family:var(--mono);font-size:.6em;margin-right:4px}
.web-note .sticker-lettering:after{content:'/>';font-family:var(--mono);font-size:.6em;margin-left:4px}
.motion-note{color:#ac583a}
.motion-note .sticker-lettering:after{content:'↗';display:inline-block;font-family:var(--font);font-size:.65em;margin-left:7px}
.matrix-sticker:hover:not([data-dragging]),.matrix-sticker[aria-expanded=true]:not([data-dragging]){transform:translate(-50%,-50%) translate3d(var(--drag-x,0px),var(--drag-y,0px),0) rotate(0) scale(1.08);z-index:4}
.matrix-sticker[data-dragging]{z-index:5;cursor:grabbing;filter:drop-shadow(0 8px 9px #17251b30)}
.matrix-sticker:focus-visible{outline:2px solid #708b73;outline-offset:7px;border-radius:8px;z-index:4}
.sticker-note{position:absolute;z-index:6;transform:translateX(-50%);width:max-content;max-width:min(240px,85%);border:1px solid var(--line);border-radius:10px;background:#fff;padding:12px 15px;box-shadow:0 6px 24px #00000012;font-size:11px;color:var(--body)}
.sticker-note[hidden],.sticker-note button[hidden]{display:none}
.sticker-note:after{content:'';position:absolute;width:8px;height:8px;bottom:-5px;left:calc(50% - 4px);background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.sticker-note strong{display:block;font-size:12px;color:var(--ink);margin-bottom:4px}
.sticker-note p{margin:0;line-height:1.6}
.sticker-note button{margin-top:8px;padding:4px 0;background:none;border:0;font:9px/1.6 var(--mono);color:var(--muted)}
@media(max-width:600px){.interest-matrix{aspect-ratio:4/5}.matrix-sticker.sticker-tool img{max-height:50px}.matrix-sticker.dark-label,.matrix-sticker.drama-label{padding:9px 7px;border-width:2px}.matrix-sticker.paper-label{padding:8px 5px;border-width:2px}.matrix-sticker.soloop-mark{padding:7px;border-width:2px;border-radius:16px}.sticker-lettering{font-size:25px;letter-spacing:-.7px}.matrix-label{font-size:9px}}
@media(prefers-reduced-motion:reduce){.matrix-sticker{transition:none}}
.closing-section{padding:120px 0 48px}
.closing-mark{display:block;width:23px;height:28px;border-radius:7px;margin-bottom:26px;transform:rotate(-7deg)}
.closing-section>p:not(.jasper-signature):not(.signature-label){font:14px/1.7 var(--font);color:var(--body);max-width:640px;margin:0 0 24px}
.jasper-signature{font:400 68px/1 NoteCaveat,cursive;letter-spacing:-3px;margin:28px 0 10px;display:inline-block;transform:rotate(-7deg)}
.jasper-signature span{color:#8b909a}
.signature-label{font-size:12px;margin:0;color:var(--body)}
.note-invitation{padding:12px 0 30px}
.leave-note{display:block;position:relative;border:0;background:none;padding:12px 0;text-align:left;font:500 13px/1.7 var(--font);letter-spacing:-.25px;color:var(--ink)}
.leave-note .brush-mark:after{height:9px;bottom:-6px;opacity:0;transition:opacity .2s}
.leave-note:hover .brush-mark:after,.leave-note:focus-visible .brush-mark:after{opacity:.7}
.mobile-break{display:none}
.site-credits{position:relative;font-family:var(--font);font-size:9px}
.site-credits summary{list-style:none;cursor:pointer;min-height:28px;display:flex;align-items:end}
.site-credits summary::-webkit-details-marker{display:none}
.site-credits>div{position:absolute;bottom:40px;left:0;width:280px;max-width:calc(100vw - 48px);border-radius:24px;background:#ffffffed;backdrop-filter:blur(16px);box-shadow:0 8px 30px #18393412;padding:20px;display:grid;gap:12px;font-size:11px;line-height:1.5;color:#314849;text-shadow:none}
.site-credits a:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:767px){
 .intro h1{font-size:32px;letter-spacing:-1.4px}.intro-copy{font-size:14px;line-height:1.75}.intro-subtitle{font-size:14px}.intro-contact>p{font-size:12px}.personal-links{gap:10px 16px;font-size:10px}
 .after-work{padding:80px 0}.notebook-heading{font-size:22px;line-height:1.25;margin-bottom:40px;letter-spacing:-.65px}.side-projects-list{gap:24px}.side-projects-list strong{font-size:14px}.side-projects-list .side-description{font-size:12px;line-height:1.5}
 .life-section{padding:24px 0 56px}.interest-matrix{margin-top:48px}.matrix-label{font-size:9px}.matrix-sticker{border-width:2px}
 .closing-section{padding:80px 0 40px}.closing-section>p:not(.jasper-signature):not(.signature-label){font-size:13px;line-height:1.8}.jasper-signature{font-size:58px}
 .note-invitation{padding-bottom:24px}.leave-note{font-size:12px}.mobile-break{display:block}
 .sticker-note{max-width:220px}
}
@media(prefers-reduced-motion:reduce){.matrix-sticker{transition:none}.matrix-sticker{translate:none}.matrix-sticker:hover{transform:translate(-50%,-50%) rotate(0)}}