@font-face{font-family:'IBM Plex Mono';src:url('/assets/pear-hero/ibm-plex-mono.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{--surface:#fffdef;--selection:#e9f59d;--focus:#0700df;--grain-opacity:.125;--pear-green:#bccf45}
*{box-sizing:border-box}
body{margin:0}
body::after{display:block}
@media(hover:hover) and (pointer:fine){
 body,body *{cursor:url('/assets/pear-hero/dot-cursor.svg') 6 6,auto}
 a,a *{cursor:url('/assets/pear-hero/dot-cursor.svg') 6 6,pointer}
 body.is-drawing,body.is-drawing *{cursor:url('/assets/pear-hero/pen-tool.svg') 2 2,crosshair}
 body .card,body .card *,body .green,body .green *{cursor:url('/assets/pear-hero/hand.svg') 12 12,grab}
 body .card a,body .card a *{cursor:pointer}
 body.is-grabbing,body.is-grabbing *{cursor:url('/assets/pear-hero/hand-grab.svg') 12 12,grabbing}
}
.card{touch-action:none;user-select:none}
.card img{-webkit-user-drag:none}
.green{pointer-events:auto!important;touch-action:none;user-select:none}
.green img{-webkit-user-drag:none}
.ink-trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;}
.stage{isolation:isolate;--u:min(1px, .0661375661vw);position:relative;max-width:1512px;margin:auto;min-height:max(100svh,calc(1477 * var(--u)))}
.card{z-index:1;position:absolute;top:calc(166 * var(--u));left:calc(50% + .28 * var(--u));transform:translateX(-50%);width:calc(538.555 * var(--u));height:calc(538.555 * var(--u));background:var(--pear-green);box-shadow:0 0 calc(3.177 * var(--u)) #0004;overflow:hidden}
.pear-position{position:absolute;left:calc(121 * var(--u));top:calc(-24 * var(--u));width:calc(546.178 * var(--u));height:calc(403.054 * var(--u));display:flex;align-items:center;justify-content:center}
.pear{width:calc(519 * var(--u));height:calc(363 * var(--u));max-width:none;object-fit:cover;transform:rotate(4.55deg)}
.intro{position:absolute;left:calc(32 * var(--u));top:calc(389 * var(--u));width:calc(462.359 * var(--u));display:flex;flex-direction:column;gap:calc(12 * var(--u))}
.stage h1{font:400 calc(34.604 * var(--u))/calc(80.743 * var(--u)) var(--font-body);height:calc(59 * var(--u));margin:0}
.intro p{font-size:calc(21.124 * var(--u));line-height:calc(26.092 * var(--u));margin:0;color:#272a28;white-space:nowrap}
.intro a{color:#0700df;text-decoration:none}
.intro a:hover{text-decoration:underline}
.star{z-index:1;position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:none}
.star>span{position:relative;width:37px;height:37px;flex:none;transform:scale(var(--star-scale,1)) rotate(var(--angle,19.78deg))}
.star img{position:absolute;left:.9065px;top:0;max-width:none}
.green img{left:-1.0952px;top:-2.0017px}
.star-one{left:calc(482 * var(--u));top:calc(269 * var(--u));width:calc(45.78 * var(--u));height:calc(45.78 * var(--u));--angle:73.97deg}
.star-two{left:calc(439 * var(--u));top:calc(35 * var(--u));width:calc(47.34 * var(--u));height:calc(47.34 * var(--u))}
.star-three{left:calc(150 * var(--u));top:calc(36 * var(--u));width:calc(66.621 * var(--u));height:calc(66.621 * var(--u));--angle:-24.38deg}
.star-three>span{width:50.333px;height:50.333px}
.star-three img{left:1.2332px}
.star-bottom{left:67.85714%;top:calc(738 * var(--u));width:calc(47.34 * var(--u));height:calc(47.34 * var(--u))}
.star-left{left:20.96561%;top:calc(423 * var(--u));width:calc(47.34 * var(--u));height:calc(47.34 * var(--u))}
.star-right{left:79.62963%;top:calc(574 * var(--u));width:calc(51.701 * var(--u));height:calc(51.701 * var(--u));--angle:-36.13deg}

@media(max-width:600px){
 .stage{isolation:isolate;--u:calc((100vw - 48px) / 538.555);min-height:100svh;padding-bottom:64px}
 .card{top:96px;left:50%}
 .star-left{left:3%;top:50px}
 .star-bottom{left:78%;top:calc(96px + 570 * var(--u))}
 .star-right{left:86%;top:48px}
}


/* Main-site integration: the hero ends before the existing sticky navigation. */
.page{padding:0 var(--page-gutter) var(--space-12);overflow:visible}
/* Drag bounds keep objects on the desk; their shadows may extend past its edges. */
.stage{width:calc(100% + 2 * var(--page-gutter));margin:0 calc(-1 * var(--page-gutter));height:calc(877 * var(--u));min-height:0;overflow:visible}
.stage .intro{padding:0;max-width:none;gap:calc(12 * var(--u))}
.stage .intro h1{font-size:calc(34.604 * var(--u));line-height:calc(80.743 * var(--u));height:calc(59 * var(--u));letter-spacing:normal;margin:0}
.stage .intro p{font-size:calc(21.124 * var(--u));line-height:calc(26.092 * var(--u));color:#272a28}
.nav{justify-content:center;gap:12px;margin:0 0 22px;padding:12px 0;min-height:53px;transition:background-color 200ms}
.nav a{font-size:var(--type-body);line-height:29px;padding:0 20px}
.nav a[aria-current=page]{background:#e9f59d}
.nav.is-stuck{background:var(--surface)}
.clear-ink{position:absolute;top:24px;right:32px;z-index:3;display:flex;align-items:center;gap:7px;border:0;background:var(--surface);padding:8px;min-height:44px;font:400 14px var(--font-body)}
.clear-ink span{text-decoration:underline;text-underline-offset:4px}
.drawing-note{position:absolute;bottom:16px;left:24px;z-index:2;max-width:calc(100% - 48px);margin:0;padding:3px 6px;background:var(--surface);color:var(--text-secondary);font:400 11px/1.5 var(--font-body);pointer-events:none}
.ink-status{position:absolute;top:70px;right:32px;z-index:3;font-size:12px;max-width:240px;background:var(--surface)}
@media(max-width:700px){.nav{gap:12px;margin-bottom:22px}.nav a{font-size:var(--type-body);line-height:29px;padding:7px 20px}}
@media(max-width:600px){.stage{height:calc(96px + 538.555 * var(--u) + 72px)}.clear-ink{top:12px;right:16px}.drawing-note{left:16px;bottom:12px;font-size:10px}}
/* Temporary launch state: content ends at the navigation while sections are updated. */
.page>main,.page>footer{display:none}
.page{padding-bottom:0}
.page>.nav{margin-bottom:0}

/* The paper and its reverse share a fold line growing from the lower right. */
@property --peel{syntax:'<percentage>';inherits:true;initial-value:0%}
.card{--peel:0%;background:transparent;box-shadow:none;overflow:visible;filter:drop-shadow(0 1px 2px #0003);transition:--peel 280ms ease,filter 280ms ease}
.note-paper{position:absolute;inset:0;background:var(--pear-green);overflow:hidden;mask:url('/assets/pear-hero/note-mask.svg') center/100% 100% no-repeat;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--peel)),calc(100% - var(--peel)) 100%,0 100%);transform-origin:50% 0;transition:transform 380ms cubic-bezier(.2,.7,.3,1)}
.card .cream{display:none}
.note-fold{position:absolute;right:0;bottom:0;width:var(--peel);height:var(--peel);pointer-events:none;clip-path:polygon(0 0,100% 0,0 100%);background:linear-gradient(135deg,#e7edab 0%,#d9e58a 44%,#92a32c 100%);filter:drop-shadow(-3px -3px 3px #0003);transform-origin:0 0;transition:transform 380ms cubic-bezier(.2,.7,.3,1)}
@media(hover:hover) and (pointer:fine){.card:hover{--peel:10%}}
/* No will-change: a pre-rasterized, scaled layer leaves a light fringe around the lifted paper. */
.note-surface{position:absolute;inset:0;transform-origin:50% 0}
.note-paper::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,transparent 45%,#f4f7c91a 75%,#73852026 100%);opacity:var(--lift,0)}
.card.is-lifted{--peel:7%;filter:drop-shadow(0 7px 6px #0002)}
.card.is-sticking{filter:drop-shadow(0 1px 2px #0003)}
.card.is-sticking:hover{--peel:7%}
.green{width:calc(37 * var(--u));height:calc(37 * var(--u));z-index:2;filter:drop-shadow(0 1px 2px #0003)}
.green>span{width:100%;height:100%;transform:rotate(var(--angle));background:url('/assets/pear-hero/matching-star.svg') center/100% 100% no-repeat}
.green img{display:none}
.star-left{width:calc(50.33332 * var(--u));height:calc(50.33332 * var(--u));--angle:-24.38deg}
.star-bottom{--angle:19.78deg}
.star-right{--angle:73.97deg}

@media(prefers-reduced-motion:reduce){.card,.note-paper,.note-fold{transition:none!important;animation:none!important}.card.is-lifted .note-paper,.card.is-lifted .note-fold{transform:none}.card.is-lifted{--peel:7%}}
/* Fit the opening composition and navigation within the initial viewport. */
@media(min-width:601px){.stage{--u:min(.94px,.0621693121vw,calc((100svh - 72px)/877))}}
@media(max-width:600px){.stage{--u:min(calc((100vw - 48px)/538.555),calc((100svh - 210px)/538.555));height:calc(80px + 538.555 * var(--u) + 60px)}.card{top:80px}.star-bottom{top:calc(80px + 550 * var(--u))}}
/* Hover retains the original corner fold; pickup uses a separate curved surface. */
.card.is-lifted,.card.is-sticking{--peel:0%;transition:--peel 140ms ease;filter:drop-shadow(0 var(--shadow-y,1px) var(--shadow-blur,2px) #0003)}
.card.is-lifted:hover,.card.is-sticking:hover{--peel:0%}
.note-surface.is-curving>.note-paper,.note-surface.is-curving>.note-fold,.note-surface.is-curving>.green{visibility:hidden}
.paper-bend{position:absolute;inset:0;pointer-events:none;contain:layout paint}
.paper-band{position:absolute;inset:0;overflow:visible;transform-origin:0 0}
.paper-back{position:absolute;inset:0;background:linear-gradient(135deg,#d9e58a,#e7edab 65%,#f1f3c3);opacity:var(--back-opacity,0)}
.paper-band>.note-paper{visibility:visible;clip-path:none;transition:none}
.paper-band>.green{visibility:visible}
.paper-bend,.paper-bend *{pointer-events:none!important}

/* Temporary presentation: hide navigation and anchor the saving note to the viewport. */
#portfolio-nav[hidden]{display:none}
.drawing-note{position:fixed;left:24px;bottom:16px}
@media(max-width:600px){.drawing-note{left:16px;bottom:12px}}

/* Make room for the personal introduction at the existing body text size. */
.stage .intro{top:calc(330 * var(--u))}
.stage .intro h1{height:auto;line-height:1.25}
.stage .intro .designer-intro{white-space:normal}
.pear-position{top:0;left:calc(130 * var(--u));width:calc(474 * var(--u));height:calc(330 * var(--u))}
.pear{width:calc(450 * var(--u));height:calc(315 * var(--u));object-fit:contain}
.clear-ink{color:#0700df}

/* Keep drawing guidance and its action together without background boxes. */
.drawing-tools{position:fixed;left:24px;bottom:16px;right:24px;z-index:3;display:flex;align-items:center;gap:12px;pointer-events:none}
.drawing-tools .drawing-note{position:static;max-width:none;padding:0;background:transparent}
.drawing-tools .clear-ink{position:static;flex-shrink:0;background:transparent;pointer-events:auto}
@media(max-width:600px){.drawing-tools{left:16px;right:16px;bottom:12px;gap:8px}}


/* The fading tail can cross every surface without intercepting controls. */
.cursor-tail{position:fixed;inset:0;width:100%;height:100%;z-index:9999;pointer-events:none}


.drawing-tools{gap:0}
.drawing-tools .drawing-note{color:var(--text-secondary)}
.drawing-tools .clear-ink{font:inherit;font-size:11px;padding:8px 0 8px 1ch}
@media(max-width:600px){.drawing-tools .clear-ink{font-size:10px}}

/* A short arrival, then stillness: the desk responds when you touch it. */
@keyframes paper-arrive {
 from { opacity:0; transform:translateY(-14px) rotate(-1.5deg) scale(1.025) }
 to { opacity:1; transform:translateY(0) rotate(0) scale(1) }
}
@keyframes sticker-arrive {
 from { opacity:0; scale:.72 }
 to { opacity:1; scale:1 }
}
.note-surface{animation:paper-arrive 720ms cubic-bezier(.16,1,.3,1)}
.stage>.green>span{animation:sticker-arrive 600ms cubic-bezier(.16,1,.3,1) both;transition:scale 320ms cubic-bezier(.16,1,.3,1)}
.star-left>span{animation-delay:100ms}
.star-right>span{animation-delay:180ms}
.star-bottom>span{animation-delay:260ms}
.stage>.green[data-moved]>span{animation:none}
.stage>.green.is-dragging>span{animation:none;scale:1.12}
.stage>.green{transition:filter 240ms ease}
.stage>.green.is-dragging{filter:drop-shadow(0 6px 5px #0003)}
.card:focus-visible,.stage>.green:focus-visible{outline:2px solid var(--focus);outline-offset:8px}
.card:focus-visible{--peel:7%}
.desk-instructions{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(hover:hover) and (pointer:fine){
 .stage>.green:hover>span{scale:1.08}
 .stage>.green.is-dragging:hover>span{scale:1.12}
}
@media(prefers-reduced-motion:reduce){
 .note-surface,.stage>.green>span{animation:none!important;transition:none!important}
 .stage>.green>span{scale:1!important}
}

/* Responsive composition: the note keeps a usable size on tablets, the desk stickers stay
   placed relative to the note, and the whole desk sits centered in the first screen. */
@media(min-width:601px){
 .stage{--u:min(.94px,max(.0621693121vw,calc(min(60vw,480px)/538.555)),calc((100svh - 72px)/877));
  --shift:max(0px,calc((100svh - 877 * var(--u) - 40px)/2));height:max(calc(877 * var(--u)),100svh)}
 .card{top:calc(var(--shift) + 166 * var(--u))}
 .star-left{left:max(16px,calc(50% - 439 * var(--u)));top:calc(var(--shift) + 423 * var(--u))}
 .star-right{left:min(calc(50% + 448 * var(--u)),calc(100% - 51.701 * var(--u) - 16px));top:calc(var(--shift) + 574 * var(--u))}
 .star-bottom{left:calc(50% + 270 * var(--u));top:calc(var(--shift) + 738 * var(--u))}
}
@media(max-width:600px){
 /* Capped at the tablet layout's 360px note, so crossing 600px doesn't resize the note. */
 .stage{--u:min(calc((100vw - 48px)/538.555),calc(360px/538.555),calc((100svh - 210px)/538.555));
  --shift:max(0px,calc((100svh - 538.555 * var(--u) - 140px)/2));height:max(calc(80px + 538.555 * var(--u) + 60px),100svh)}
 .card{top:calc(var(--shift) + 80px)}
 .star-left{left:calc(50% - 290 * var(--u));top:calc(var(--shift) + 50px)}
 .star-right{left:calc(50% + 222 * var(--u));top:calc(var(--shift) + 48px)}
 .star-bottom{left:calc(50% + 173 * var(--u));top:calc(var(--shift) + 80px + 550 * var(--u))}
}

/* Drawing needs a precise pointer; touch screens get no doodle hint or Clear control. */
@media not all and (hover:hover) and (pointer:fine){.drawing-tools{display:none}}