/* 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 a{display:flex;align-items:flex-start;gap:16px;padding:4px 0;max-width:100%;width:fit-content}
.side-projects-list img{width:28px;height:28px;flex-shrink:0;transition:transform .25s}
.side-projects-list a:hover img{transform:rotate(-8deg) translateY(-2px)}
.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%) rotate(var(--rotation));border:0;padding:0;background:none;transition:transform .24s,filter .24s;line-height:0;z-index:1;touch-action:manipulation;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,.matrix-sticker[aria-expanded=true]{transform:translate(-50%,-50%) rotate(0) scale(1.08);z-index:4}
.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}
.local-note-hint{font:9px/1.6 var(--mono);color:var(--muted);margin:0}
.tide-footer{position:relative;z-index:2;width:100%;height:600px;overflow:hidden;background:white;isolation:isolate}
.water-stage{position:absolute;inset:0;background:linear-gradient(#fff 5%,#d8ecea 60%,#afcacd)}
.water-stage:after{content:'';position:absolute;inset:0;background:linear-gradient(#fff,transparent 38%);pointer-events:none;z-index:1}
#tide-water{border:0;display:block;width:100%;height:100%;opacity:0;transition:opacity .6s;pointer-events:none}
#tide-water.is-ready{opacity:1}
#boat-targets{position:absolute;inset:0;z-index:2;pointer-events:none}
.boat-target{position:absolute;min-width:40px;min-height:40px;border:0;background:transparent;transform:translate(-50%,-50%);padding:0;pointer-events:auto;border-radius:50%;touch-action:manipulation}
.boat-target:hover{background:#ffffff12}
.water-status{position:absolute;left:24px;bottom:70px;font:10px/1.6 var(--mono);color:#3d5658;z-index:3;max-width:320px}
.tide-footer-bottom{position:absolute;bottom:24px;left:44px;right:44px;display:flex;align-items:end;justify-content:space-between;gap:16px;z-index:3;font:9px/1.6 var(--mono);color:#314849}
.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}
.site-credits a:hover{text-decoration:underline;text-underline-offset:3px}
.note-dialog{padding:0;border:0;width:min(460px,calc(100vw - 40px));max-height:calc(100dvh - 40px);overflow:auto;background:transparent;color:var(--ink)}
.note-dialog::backdrop{background:#e8efeee3;backdrop-filter:blur(9px)}
.note-dialog header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
.note-dialog h2{font:700 24px/1.2 var(--font);letter-spacing:-.8px;margin:0}
.note-close{font-size:25px;color:#777;border:0;background:transparent;width:32px;height:32px;flex:none}
.paper-writing{position:relative;aspect-ratio:4/3;padding:32px 34px 28px;display:flex;flex-direction:column;background-color:#fff;background-size:cover;box-shadow:0 8px 25px #17383312;transform-origin:50% 50%;perspective:900px}
.paper-writing textarea{width:100%;flex:1;min-height:0;resize:none;border:0;background:transparent;outline:none;font:400 28px/1.4 NoteCaveat,var(--font);color:#35332e}
.paper-writing textarea:read-only{cursor:default}
.paper-writing textarea::placeholder{color:#a9aaa5}
.paper-count{align-self:flex-end;font:10px var(--mono);color:#aaa;line-height:1.6}
.note-actions{display:flex;gap:20px;margin-top:24px}
.note-actions button{border:0;background:none;padding:5px 0;color:var(--body);font:13px/1.5 var(--font)}
.note-actions button:disabled{opacity:.45;cursor:default}
.note-description,#note-error{font:10px/1.7 var(--font);color:var(--muted);margin:14px 0 0}
#note-error{color:#9b4b31}
.note-dialog.is-folding .paper-writing{animation:fold-paper .65s cubic-bezier(.5,0,.3,1) forwards}
.note-dialog.is-folding textarea,.note-dialog.is-folding .paper-count{opacity:0;transition:opacity .15s}
@keyframes fold-paper{0%{transform:perspective(800px) rotateX(0) scale(1);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}50%{transform:perspective(800px) rotateX(45deg) scale(.65);clip-path:polygon(50% 0,100% 65%,70% 100%,30% 100%,0 65%)}100%{transform:perspective(800px) rotateX(65deg) translateY(80px) scale(.12);opacity:0;clip-path:polygon(50% 0,100% 65%,70% 100%,30% 100%,0 65%)}}
@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}.tide-footer{height:510px}.tide-footer-bottom{left:24px;right:24px;font-size:8px}.tide-footer-bottom>span{display:none}
 .note-dialog h2{font-size:22px}.paper-writing{padding:24px}.paper-writing textarea{font-size:25px}.sticker-note{max-width:220px}
}
@media(prefers-reduced-motion:reduce){.matrix-sticker,.side-projects-list img,#tide-water{transition:none}.matrix-sticker{translate:none}.note-dialog.is-folding .paper-writing{animation:none}.matrix-sticker:hover{transform:translate(-50%,-50%) rotate(0)}}

.water-fallback .boat-target{background:#fff9;border:1px solid #91aeb2;box-shadow:0 2px 4px #31545620}.water-fallback .boat-target:after{content:"✉";font-size:16px;color:#38595a}