/* Identity first, then a quiet transition into the full biography. */
#welcome [data-spotlight-heading]{position:relative;color:#24334c;opacity:1;-webkit-text-fill-color:currentColor;cursor:default}
.name-spotlight{position:absolute;inset:-180px;box-sizing:border-box;padding:180px;display:block;color:#f7e8c5;background:#231a0a;pointer-events:none;opacity:0;--spot-half:clamp(130px,12vw,180px);--square-x:calc(var(--spot-x,0px) + 180px);--square-y:calc(var(--spot-y,0px) + 180px);clip-path:polygon(calc(var(--square-x) - var(--spot-half)) calc(var(--square-y) - var(--spot-half)),calc(var(--square-x) + var(--spot-half)) calc(var(--square-y) - var(--spot-half)),calc(var(--square-x) + var(--spot-half)) calc(var(--square-y) + var(--spot-half)),calc(var(--square-x) - var(--spot-half)) calc(var(--square-y) + var(--spot-half)))}
.spotlight-active .name-spotlight{opacity:1}
.bio-bridge{position:relative;padding:clamp(60px,9vw,120px) 24px 0;background:transparent;text-align:center}
.bio-bridge-copy{max-width:1000px;margin:auto}
.bio-bridge-copy p{font-size:clamp(24px,3vw,40px);line-height:1.5;text-wrap:balance}
.bio-bridge{padding-bottom:64px}
#about{padding-top:48px}
@media(hover:none),(pointer:coarse){#welcome [data-spotlight-heading]{color:#102e43}.name-spotlight{display:none}}
@media(max-width:640px){.bio-bridge{padding:56px 22px 0}.bio-bridge-copy p{font-size:24px}.bio-bridge{padding-bottom:42px}}

.hero-handwritten-intro{margin:0 auto 22px;color:#172b38}
.hero-handwritten-intro>span{position:relative;display:inline-block;font-size:clamp(36px,4vw,52px);font-weight:700;line-height:1.1;transform:rotate(-4deg)}
.hero-handwritten-intro svg{display:block;width:100%;height:9px;margin-top:3px}
@media(max-width:640px){.hero-handwritten-intro{margin-bottom:18px}}

/* A tighter collage around the identity frame, with a clear central reading area. */
@media(min-width:768px){
 #welcome .sticker-left{left:calc(50% - 475px);top:calc(50% - 235px)}
 #welcome .sticker-right{right:calc(50% - 475px);top:calc(50% - 255px)}
 #welcome .hero-photo-note{top:calc(50% - 225px);right:calc(50% - 150px)}
 #welcome .corner-note{left:calc(50% - 405px);top:calc(50% + 170px);bottom:auto}
 #welcome .hero-decor .hero-polaroid{right:calc(50% - 425px);top:calc(50% + 130px);bottom:auto!important}
}
@media(min-width:768px) and (max-width:1100px){
 #welcome .sticker-left{left:7%}#welcome .sticker-right{right:7%}
 #welcome .corner-note{left:12%}#welcome .hero-decor .hero-polaroid{right:12%}
}
@media(max-width:767px){
 #welcome .sticker-left{left:16%;top:115px}
 #welcome .sticker-right{right:16%;top:120px}
 #welcome .corner-note{left:14%;bottom:125px}
 #welcome .hero-decor .hero-polaroid{right:14%;bottom:135px!important}
}

/* Independent translate keeps card hover tilts intact during scroll entrances. */
@media(min-width:768px) and (max-width:1100px){
 #welcome .sticker-right{top:82px;width:138px;min-height:0;padding:6px}
 #welcome .sticker-right .music-record{width:32px;height:32px;margin-bottom:6px}
 #welcome .sticker-right .font-hand{font-size:20px;line-height:1.03}
 #welcome .sticker-right small{font-size:12px;margin-top:6px}
}
@media(prefers-reduced-motion:no-preference){
 main .scroll-entrance{translate:var(--enter-x,0px) 30px;transform:none;transition:translate 1.05s cubic-bezier(.2,.75,.2,1) var(--enter-delay,0ms),opacity .85s ease var(--enter-delay,0ms)}
 main .scroll-entrance.is-visible{translate:0 0}
 #highlights.scroll-entrance,#highlights .highlight-project.scroll-entrance{transform:none;animation:none}
 #highlights.scroll-entrance.is-visible,#highlights .highlight-project.scroll-entrance.is-visible{animation:none;transform:none}
 main{overflow-x:clip}
}

@media(prefers-reduced-motion:no-preference){
 #experience article.scroll-entrance,#highlights .highlights-spread>.highlight-project.scroll-entrance{transition:translate 1.1s cubic-bezier(.2,.75,.2,1) var(--enter-delay,0ms),opacity .9s ease var(--enter-delay,0ms),box-shadow .25s;translate:var(--enter-x) 24px}
 #experience article.scroll-entrance.is-visible,#highlights .highlights-spread>.highlight-project.scroll-entrance.is-visible{translate:0 0}
}

/* Fixed ink avoids the red-brown colour produced by difference over sky blue. */
.name-spotlight{background:#1d2939;mix-blend-mode:normal;z-index:50}
#welcome>.name-spotlight.spotlight-identity{background:transparent;z-index:42}
#welcome .spotlight-identity-copy{position:absolute!important;max-width:none!important;margin:0!important;pointer-events:none!important}
#welcome .spotlight-identity-copy *{color:#f7e8c5!important;-webkit-text-fill-color:#f7e8c5!important;border-color:#e9dfca!important;pointer-events:none!important}
#welcome .spotlight-identity-copy .hero-identity-frame>div:last-child{background:#131e2d!important;backdrop-filter:none!important;box-shadow:6px 6px 0 #80909d!important}

#welcome{isolation:isolate}#welcome>.name-spotlight{inset:0;padding:0;--square-x:var(--spot-x,0px);--square-y:var(--spot-y,0px);z-index:40}#welcome>.name-spotlight.is-active{opacity:1}

/* Keep personal photos and draggable objects outside the inversion layer. */
#welcome>.hero-entry-layer{z-index:25}
#welcome>.hero-portrait-layer{z-index:45}
@media(min-width:768px){#welcome .hero-decor .hero-polaroid{right:calc(50% - 485px);top:calc(50% + 190px);bottom:auto!important}}
@media(min-width:768px) and (max-width:1100px){#welcome .hero-decor .hero-polaroid{right:6%;top:calc(50% + 190px)}}
@media(max-width:767px){#welcome .hero-decor .hero-polaroid{right:8%;bottom:110px!important}}

/* A raised warm frame and recessed paper surface for the message board. */
#memos #memoBoardCanvas{
 border:14px solid transparent!important;border-radius:26px;
 background:linear-gradient(135deg,#faf6e9,#f1ead9) padding-box,linear-gradient(135deg,#ede8dc 0%,#d2c8b7 28%,#b9ad9a 65%,#dcd3c4 100%) border-box!important;
 box-shadow:0 2px 0 #fffaf2,0 8px 0 #aea28f,0 10px 2px #776d5d35,0 24px 44px -14px #50473645,inset 0 2px 3px #6f60473b,inset 0 10px 20px -12px #6f604780!important;
}
#memos #memoBoardCanvas::before{content:'';position:absolute;inset:-14px;border-radius:26px;pointer-events:none;z-index:3;border:1px solid #fff9edaa;box-shadow:inset 2px 2px 2px #fffdf4a6,inset -2px -2px 3px #796c5640}
#memos #memoBoardCanvas::after{content:'';position:absolute;inset:0;border-radius:12px;pointer-events:none;z-index:0;box-shadow:inset 2px 3px 8px #74644930,inset -1px -1px 0 #fffdf6;background:repeating-linear-gradient(0deg,#917d5804 0 1px,transparent 1px 4px)}
@media(max-width:640px){#memos #memoBoardCanvas{border-width:10px!important;border-radius:22px;box-shadow:0 2px 0 #fffaf2,0 6px 0 #aea28f,0 17px 30px -12px #50473650,inset 0 3px 8px #6f604730!important}#memos #memoBoardCanvas::before{inset:-10px;border-radius:22px}}

/* User-fixed continuous canvas: sky -> lavender -> soft pink/blue/mint.
   One gradient spans the body content; never paint separate section blocks. */
:root{--home-canvas:#efecf5;--home-sky-start:#65b7dd;--home-sky-end:#a9e0e8;--home-hero-height:100svh}
body{background:#eef2f6!important}
body>main{background-color:var(--home-canvas)!important;background-image:linear-gradient(175deg,var(--home-canvas) 0%,#f3e8ee 20%,#e8edf7 39%,#e7f1ee 58%,#eee9f5 77%,#f1e9ef 90%,#eef2f6 100%)!important;background-repeat:no-repeat!important;background-position:0 100%!important;background-size:100% calc(100% - var(--home-hero-height))!important}
@media(max-width:767px){:root{--home-hero-height:max(100svh,660px)}}
#welcome{background:linear-gradient(180deg,var(--home-sky-start),var(--home-sky-end))!important}
#welcome::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:clamp(260px,38vh,420px);z-index:15;pointer-events:none;background:linear-gradient(180deg,rgba(239,236,245,0) 0%,rgba(239,236,245,.55) 45%,var(--home-canvas) 92%,var(--home-canvas) 100%)}
/* Keep the transition stationary while only the introduction copy enters. */
main>.bio-bridge{background:transparent;translate:none!important;transform:none!important;opacity:1!important}

/* A clipped ink copy makes small handwriting legible inside the dark square. */
#welcome>.spotlight-handwriting{z-index:41;opacity:0;pointer-events:none!important;--spot-half:clamp(130px,12vw,180px);clip-path:inset(calc(var(--spot-y,0px) - var(--text-offset-y,0px) - var(--spot-half)) calc(100% - var(--spot-x,0px) + var(--text-offset-x,0px) - var(--spot-half)) calc(100% - var(--spot-y,0px) + var(--text-offset-y,0px) - var(--spot-half)) calc(var(--spot-x,0px) - var(--text-offset-x,0px) - var(--spot-half)))}
#welcome>.spotlight-handwriting.is-active{opacity:1}
#welcome>.spotlight-handwriting *{color:#fff7dc!important;-webkit-text-fill-color:#fff7dc!important;background:transparent!important;border-color:transparent!important;box-shadow:none!important;pointer-events:none!important;animation:none!important;transition:none!important}
.notes-viewport{display:contents}.note-drag-handle{display:none}
@media(max-width:767px){
 #welcome{min-height:max(100svh,660px)}
 #welcome .hero-portrait-layer .hero-polaroid{bottom:90px!important;right:7%;top:auto;animation:none!important}
 #welcome .hero-portrait-layer .hero-polaroid>div{width:76px;padding:6px 6px 9px}
 #welcome .hero-portrait-layer .hero-polaroid>div>.w-full{height:70px}
 #welcome .hero-portrait-layer .hero-polaroid p{font-size:12px;line-height:1.25;margin-top:4px}
}
@media(max-width:640px){
 #memos{padding:16px 12px!important;scroll-margin-top:72px}
 #memos #memoBoardCanvas{height:calc(100vh - 104px);height:calc(100svh - 104px);min-height:0!important;padding:18px 10px 10px!important;display:flex;flex-direction:column}
 #memoBoardCanvas>div.relative.z-30{flex-shrink:0;gap:10px;margin-bottom:10px}
 #memoBoardCanvas>div.relative.z-30>div:first-child{flex:1;min-width:0}
 #memoBoardCanvas>div.relative.z-30>div:first-child>div:first-child{display:none}
 #memoBoardCanvas .text-xs.font-mono.uppercase{font-size:9px;line-height:1.5;letter-spacing:.03em}
 #memos h3{font-size:26px!important;margin:0}
 #leaveMessageBtn{flex-shrink:0}
 #leaveMessageBtn>div:last-child{padding:8px 10px;font-size:13px}
 #memoBoardCanvas .message-controls{flex-shrink:0;margin-bottom:8px}
 #memoBoardCanvas .message-controls button{font-size:11px;padding:5px 10px}
 #memoBoardCanvas .notes-viewport{display:block;flex:1;min-height:0;overflow:auto;overflow-x:hidden;border-radius:8px;scrollbar-width:thin;scrollbar-color:#b7aa96 transparent;-webkit-overflow-scrolling:touch}
 #memos #notesContainer{min-height:0!important;margin-top:0!important}
 #memos #notesContainer .draggable-note{padding:16px 11px 11px!important;touch-action:pan-y}
 #memos #notesContainer .draggable-note p{font-size:14px!important;line-height:1.5!important;white-space:normal}
 #memos #notesContainer .draggable-note>div:last-of-type{margin-top:10px;gap:4px}
 #memos #notesContainer .draggable-note>div:last-of-type .font-hand{font-size:12px!important}
 #memos #notesContainer .draggable-note>div:last-of-type span:first-child{font-size:9px}
 #memos .note-drag-handle{display:grid;place-items:center;position:absolute;top:1px;right:1px;width:28px;height:28px;color:#645d4c90;font:19px Georgia;touch-action:none;cursor:grab}
}