/* Measured from the live Framer site. Three layouts: desktop >=1200, tablet 810-1199, mobile <810 */
:root{--text:#333;--muted:#888;--btn:#ebebeb;--line:#ebebeb;
  --wrap:1150px;--h1:50px;--h1-lh:60px;--h2:44px;--h2-lh:52.8px;--sub:24px;--sub-lh:36px;--img:525px;--gap:100px;--col:470px}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--text);background:#fff}
a{color:inherit}
nav{display:flex;gap:44px;padding:0 64px;height:64px;align-items:center;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100;background:#fff;transition:transform .3s cubic-bezier(.22,1,.36,1)}
nav.nav-hidden{transform:translateY(-100%)}
@media(prefers-reduced-motion:reduce){nav{transition:none}}
nav a{color:var(--text);text-decoration:none;font-size:20px;font-weight:500;letter-spacing:-.2px}
main{width:min(var(--wrap),100% - 48px);margin:0 auto}
h1{font-size:var(--h1);line-height:var(--h1-lh);font-weight:700;letter-spacing:-.065em;margin:0 0 24px}
h2{font-size:var(--h2);line-height:var(--h2-lh);font-weight:700;letter-spacing:-.057em;margin:0 0 16px}
p{font-size:var(--sub);line-height:var(--sub-lh);font-weight:500;letter-spacing:-.5px;margin:0}
.hero{padding:159px 0 159px;text-align:left}
.hero-sub{font-size:clamp(20px,calc(min(100vw - 48px,var(--wrap)) / 10.2),84px);line-height:1.05;font-weight:600;letter-spacing:-.047em;color:rgba(0,0,0,.95);margin:0}
.hero h1{font-size:clamp(20px,calc(min(100vw - 48px,var(--wrap)) / 10.2),84px);line-height:1.05;font-weight:600;letter-spacing:-.047em;color:rgba(0,0,0,.95);margin:0}
.hero h1 .line{display:block;white-space:nowrap}
.card{display:grid;grid-template-columns:var(--col) var(--img);justify-content:space-between;align-items:center;margin-bottom:var(--gap)}
.card p{color:var(--muted);margin-bottom:24px}
.about-row{grid-template-columns:var(--img) 1fr;column-gap:56px}

.card img,.card video{width:100%;aspect-ratio:1;object-fit:cover;border-radius:24px;display:block}
/* Looping phone video laid over the phone in the static card image (sized to match the old phone exactly) */
.card-stack{position:relative;border-radius:24px;overflow:hidden}
.card-stack video{position:absolute;left:31.54%;top:11.63%;width:37.17%;height:auto;aspect-ratio:828/1710;border-radius:16.3%/7.9%}
.btn{display:inline-block;background:var(--btn);color:var(--text);font-size:14px;font-weight:700;padding:12px 15px;border-radius:8px;text-decoration:none}
.btn:hover{background:#ddd}
.about{padding:100px 0;max-width:560px}

/* Rotating pill */
.pill{--bg:#eadbfa;--dot:#9849e8;display:inline-flex;align-items:baseline;gap:.18em;vertical-align:baseline;line-height:1.1;background:var(--bg);border-radius:9999px;padding:.08em .32em .1em .3em;transition:background .5s ease}
.pill::before{content:"";align-self:center;position:relative;top:.09em;width:.36em;height:.36em;border-radius:50%;background:var(--dot);flex:none;transition:background .5s ease}
.pill.has-icon::before{background:var(--icon) center/contain no-repeat;border-radius:0;width:.9em;height:.9em;top:.06em}
.pill-label{display:inline-block;overflow:clip;overflow-clip-margin:0;white-space:nowrap;text-align:left;transition:width .45s cubic-bezier(.4,0,.2,1);padding:0 .02em .3em;margin-bottom:-.3em}
.pill-word{display:inline-block;transition:transform .25s ease,opacity .25s ease}
.pill-word.out{transform:translateY(-40%);opacity:0}
.pill-word.in{transform:translateY(40%);opacity:0;transition:none}
.nw{white-space:nowrap}
@media(prefers-reduced-motion:reduce){.pill,.pill::before,.pill-label,.pill-word{transition:none}}

@media(max-width:1199px){:root{--wrap:750px;--h1:40px;--h1-lh:48px;--h2:35px;--h2-lh:42px;--sub:20px;--sub-lh:24px;--img:309px;--gap:100px;--col:353px}
  .hero{padding:100px 0 100px}}
@media(max-width:809px){:root{--wrap:100vw;--h1:36px;--h1-lh:44px;--h2:30px;--h2-lh:36px;--sub:18px;--sub-lh:24px}
  nav{padding:0 24px;gap:28px;height:56px}nav a{font-size:17px}
  .hero{padding:56px 0 56px}
  .card{grid-template-columns:1fr;gap:24px;margin-bottom:48px}.card>img,.card>video,.card>.card-stack{order:-1}}

/* Scroll animations (from heyclicky feature list): gentle fade/ease-in reveal */
.js-reveal .reveal{opacity:0;translate:0 24px}
.js-reveal .rvg-in .reveal{opacity:1;translate:0;transition:opacity .9s ease-out var(--rd,0s),translate .9s cubic-bezier(.22,1,.36,1) var(--rd,0s)}
.js-reveal .divider.reveal.rvg-in{opacity:1;translate:0;transition:opacity .9s ease-out,translate .9s cubic-bezier(.22,1,.36,1)}
.rv-late{--rd:.12s}
@media(prefers-reduced-motion:reduce){.js-reveal .reveal{opacity:1;translate:0}}

/* Personal projects: fixed collage of playable media windows (layout from design mock, 959x562 stage, 100px side margins) */
/* capped at the home content width (--wrap 1150px) + the 100px side padding, so it stops scaling on wide screens */
.projects{--pw:min(100vw,calc(var(--wrap) + 200px));width:var(--pw);margin-left:calc(50% - var(--pw)/2);padding:0 100px 100px}
.proj-stage{--u:calc(100cqw / 959);container-type:inline-size;position:relative;aspect-ratio:959/640}
.proj-stage>*{--u:calc(100cqw / 959)}
.proj-sub,.proj-title{position:absolute;left:0;right:0;margin:0;text-align:center;color:#000}
.proj-sub{top:calc(var(--u)*247);font-size:calc(var(--u)*24);line-height:1.2;font-weight:700;letter-spacing:-.02em}
.proj-title{top:calc(var(--u)*283);font-size:calc(var(--u)*78);line-height:1.1;font-weight:700;letter-spacing:-.045em}
.proj{position:absolute;margin:0;display:flex;flex-direction:column;gap:calc(var(--u)*6);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.proj:hover,.proj:focus-within{transform:translateY(calc(var(--u)*-4)) scale(1.03);z-index:5}
.proj-a{left:8.94%;top:13.4%;width:13.68%;--ar:886/1612}
.proj-b{left:-2.25%;top:56.96%;width:30.58%;--ar:2716/1568}
.proj-d{left:69.9%;top:11.41%;width:31.5%;z-index:2;--ar:1920/1022}
.proj-e{left:84%;top:53.6%;width:12.5%;--ar:626/960}
.win{flex:none;display:flex;flex-direction:column;border-radius:calc(var(--u)*12);border:1px solid rgba(29,29,31,.25);background:#e8e8e8;box-shadow:0 calc(var(--u)*6) calc(var(--u)*18) rgba(0,0,0,.14);overflow:hidden;transition:box-shadow .35s ease}
.proj:hover .win,.proj:focus-within .win{box-shadow:0 calc(var(--u)*14) calc(var(--u)*30) rgba(0,0,0,.22)}
.bar{flex:none;height:calc(var(--u)*20);display:flex;align-items:center;gap:calc(var(--u)*5);padding:0 calc(var(--u)*8);background:linear-gradient(#ececec,#d6d6d6)}
.bar i{flex:none;width:calc(var(--u)*8);height:calc(var(--u)*8);border-radius:50%;background:#ff5f57}
.bar i:nth-child(2){background:#febc2e}.bar i:nth-child(3){background:#28c840}
.media{all:unset;box-sizing:border-box;position:relative;flex:none;aspect-ratio:var(--ar);margin:calc(var(--u)*5) calc(var(--u)*3.75);margin-top:0;border-radius:calc(var(--u)*6);background:#d9d9d9;overflow:hidden;cursor:pointer;display:block}
.media.is-auto{cursor:default}.media.is-auto .play{display:none}
.media:focus-visible{outline:2px solid #097fe8;outline-offset:2px}
.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.play{position:absolute;left:50%;top:50%;width:calc(var(--u)*30);height:calc(var(--u)*30);margin:calc(var(--u)*-15) 0 0 calc(var(--u)*-15);border-radius:50%;background:rgba(255,255,255,.85);transition:transform .25s ease,opacity .25s ease}
.play::after{content:"";position:absolute;left:calc(var(--u)*11.5);top:calc(var(--u)*9);border-style:solid;border-width:calc(var(--u)*6) 0 calc(var(--u)*6) calc(var(--u)*10);border-color:transparent transparent transparent #222}
.media:hover .play{transform:scale(1.12)}
.media.is-playing .play{opacity:0;transform:scale(.8)}
.media.is-playing:hover .play{opacity:1}
.media.is-playing .play::after{left:calc(var(--u)*10);top:calc(var(--u)*9);width:calc(var(--u)*10);height:calc(var(--u)*12);border:0;border-left:calc(var(--u)*3.5) solid #222;border-right:calc(var(--u)*3.5) solid #222}
.bar span{min-width:0;overflow:hidden;text-overflow:ellipsis;margin-left:calc(var(--u)*4);font-size:max(8px,calc(var(--u)*11));line-height:1.4;font-weight:400;color:#777;letter-spacing:-.01em;white-space:nowrap}
.js-reveal .proj{opacity:0;translate:0 24px}
.js-reveal .projects.rvg-in .proj{opacity:1;translate:0;transition:opacity .9s ease-out var(--rd,0s),translate .9s cubic-bezier(.22,1,.36,1) var(--rd,0s),transform .35s cubic-bezier(.22,1,.36,1)}
.proj-b{--rd:.08s}.proj-d{--rd:.24s}.proj-e{--rd:.32s}
@media(prefers-reduced-motion:reduce){.js-reveal .proj{opacity:1;translate:0}.proj,.play{transition:none}}
@media(max-width:809px){
  .projects{width:auto;margin-left:0;padding:0 0 64px}
  .proj-stage{width:auto;margin:0;container-type:normal;aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:20px 16px}
  .proj-stage>*{--u:1.1px}
  .proj-sub,.proj-title{position:static;grid-column:1/-1}
  .proj-sub{font-size:18px;margin-top:8px}.proj-title{font-size:56px;margin-bottom:12px}
  .proj{position:static;width:auto}
  .proj-e{grid-column:1/-1;justify-self:center;width:calc(50% - 8px)}
}

/* Stickers scattered through the hobbies stage: drag to move */
.sticker{position:absolute;z-index:10;margin:0;left:var(--x);top:var(--y);width:var(--w);transform:rotate(var(--r,0deg))}
.sticker-box img{display:block;width:100%;height:auto;-webkit-user-drag:none}
.sticker{transition:scale .3s cubic-bezier(.22,1,.36,1),opacity .18s ease}
.sticker:hover{scale:1.05}
.sticker figcaption.gap{margin-top:10px}
.sticker figcaption{margin-top:0;text-align:center;font-size:10px;line-height:1.2;font-weight:400;color:#aaa;letter-spacing:-.01em;white-space:nowrap}
@media(max-width:809px){
  .sticker{display:none}
}


/* Hobbies hover: window grows, neighbours recede, and a text card slides in below it */
.proj{--grow:1.55;transform-origin:50% 0}
.proj-a{transform-origin:0 0}
.proj-b{transform-origin:0 100%}
.proj-d{transform-origin:100% 0}
.proj-e{transform-origin:100% 100%}
.proj:hover,.proj:focus-within{transform:scale(var(--grow));z-index:20}
.proj:hover .win,.proj:focus-within .win{box-shadow:0 calc(var(--u)*24) calc(var(--u)*50) rgba(0,0,0,.3)}
.js-reveal .projects.rvg-in .proj-stage:has(.proj:hover) .proj:not(:hover),.proj-stage:has(.proj:hover) .sticker,.proj-stage:has(.proj:hover) .proj-sub,.proj-stage:has(.proj:hover) .proj-title{opacity:.35}
.proj-info{position:absolute;top:100%;left:0;margin:calc(var(--u)*14) 0 0;width:max(100%,calc(var(--u)*215));display:flex;flex-direction:column;gap:calc(var(--u)*3);padding:calc(var(--u)*10) calc(var(--u)*12);border-radius:calc(var(--u)*12);background:#fff;border:1px solid rgba(29,29,31,.18);box-shadow:0 calc(var(--u)*8) calc(var(--u)*24) rgba(0,0,0,.18);color:#222;text-align:left;pointer-events:none;opacity:0;translate:0 calc(var(--u)*-8);visibility:hidden;transition:opacity .18s ease,translate .28s cubic-bezier(.22,1,.36,1),visibility 0s .18s}
.proj-d .proj-info,.proj-e .proj-info{left:auto;right:0}
.proj-info::before{content:"";position:absolute;top:calc(var(--u)*-6);left:calc(50% - var(--u)*5.5);width:calc(var(--u)*11);height:calc(var(--u)*11);background:#fff;border:solid rgba(29,29,31,.18);border-width:1px 0 0 1px;border-radius:calc(var(--u)*2) 0 0 0;rotate:45deg}
.proj-info small{font-size:max(7px,calc(var(--u)*8));font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#888}
.proj-info strong{font-size:max(9px,calc(var(--u)*11));line-height:1.1;font-weight:700;letter-spacing:-.02em}
.proj-info span{font-size:max(7px,calc(var(--u)*8.2));line-height:1.45;font-weight:400;color:#555;letter-spacing:-.005em}
.proj:hover .proj-info,.proj:focus-within .proj-info{opacity:1;translate:0;visibility:visible;transition-delay:.04s,.04s,0s}
/* packaging + landline: callout sits beside the window (right side), tail pointing left */
@media(min-width:810px){
  .proj-a .proj-info,.proj-b .proj-info{top:0;left:100%;margin:0 0 0 calc(var(--u)*14);width:calc(var(--u)*215);translate:calc(var(--u)*-8) 0}
  .proj-a .proj-info::before,.proj-b .proj-info::before{top:calc(50% - var(--u)*5.5);left:calc(var(--u)*-6);border-width:0 0 1px 1px;border-radius:0 0 0 calc(var(--u)*2)}
}
@media(min-width:810px){
  .proj-a .proj-info{top:50%;translate:calc(var(--u)*-8) -50%}
  .proj-a:hover .proj-info,.proj-a:focus-within .proj-info{translate:0 -50%}
  .proj-a .proj-info::before{top:calc(50% - var(--u)*5.5)}
}
/* ai_tutor: callout stays below, centered under the window with a centered tail */
@media(min-width:810px){
  .proj-d .proj-info{left:50%;right:auto;translate:-50% calc(var(--u)*-8)}
  .proj-d:hover .proj-info,.proj-d:focus-within .proj-info{translate:-50% 0}
  .proj-d .proj-info::before{left:calc(50% - var(--u)*5.5);right:auto}
}
/* wellnest: callout comes out of the left side, vertically centered, tail pointing right */
@media(min-width:810px){
  .proj-e .proj-info{top:50%;left:auto;right:100%;margin:0 calc(var(--u)*14) 0 0;width:calc(var(--u)*215);translate:calc(var(--u)*8) -50%}
  .proj-e:hover .proj-info,.proj-e:focus-within .proj-info{translate:0 -50%}
  .proj-e .proj-info::before{top:calc(50% - var(--u)*5.5);left:auto;right:calc(var(--u)*-6);border-width:1px 1px 0 0;border-radius:0 calc(var(--u)*2) 0 0}
}
/* once the intro reveal has finished, fades (including un-fading) run fast and without the staggered delay */
.js-reveal .projects.rv-done .proj{transition:opacity .18s ease,translate .9s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1)}
.proj-sub,.proj-title{transition:opacity .18s ease}
@media(prefers-reduced-motion:reduce){.proj-info{transition:none}}
@media(max-width:809px){
  .proj{--grow:1}.proj:hover,.proj:focus-within{transform:none}
  .js-reveal .projects.rvg-in .proj-stage:has(.proj:hover) .proj:not(:hover){opacity:1}
  .proj .proj-info::before{display:none}
  .proj-info{position:static;width:auto;opacity:1;visibility:visible;translate:0;margin-top:8px;pointer-events:auto}
  .proj-info small{font-size:10px}.proj-info strong{font-size:15px}.proj-info span{font-size:13px}
}

/* Stickers: same callout as the windows, un-rotated, with the neighbours fading back */
.sticker:hover,.sticker:focus-within{scale:1.55;z-index:20}
.sticker .proj-info{rotate:calc(var(--r,0deg) * -1);transform-origin:0 0;pointer-events:none}
.sticker-r.proj-info{left:auto;right:0}
.sticker:hover .proj-info{opacity:1;translate:0;visibility:visible;transition-delay:.04s,.04s,0s}
.proj-stage:has(.sticker:hover) .sticker:not(:hover),.proj-stage:has(.sticker:hover) .proj-sub,.proj-stage:has(.sticker:hover) .proj-title{opacity:.35}
.js-reveal .projects.rvg-in .proj-stage:has(.sticker:hover) .proj{opacity:.35}
@media(max-width:809px){.sticker .proj-info{display:none}}
/* Lower-half stickers open their callout upward (toward the middle of the stage), tail pointing down */
@media(min-width:810px){
  .sticker-up .proj-info{top:auto;bottom:100%;margin:0 0 calc(var(--u)*14);translate:0 calc(var(--u)*8)}
  .sticker-up:hover .proj-info,.sticker-up:focus-within .proj-info{translate:0}
  .sticker-up .proj-info::before{top:auto;bottom:calc(var(--u)*-6);border-width:0 1px 1px 0;border-radius:0 0 calc(var(--u)*2) 0}
}
/* tulip + paper collage keep an offset tail (near the card's left); fumi near its right */
.sticker:has(img[src*="s9"]) .proj-info::before{left:calc(var(--u)*24)}


/* Custom-icons callout: labelled icon sheets in the body size, heavier weight */
.proj-info .icon-caption{font-size:max(5.5px,calc(var(--u)*5.6));font-style:italic;font-weight:400;color:#aaa;text-align:center;margin-top:calc(var(--u)*2 + 8px / var(--k,1.55))}
.proj-info .icon-img{display:block;width:100%;height:auto;margin-top:calc(24px / var(--k,1.55) - var(--u)*3)}

/* Custom-icons callout is only as wide as the icon sheets (133 units + 24 of padding) */
.sticker .icon-card{width:calc(var(--u)*157)}

/* Photo in a callout: full card width, 24px below the body text */
.proj-info .photo-img{display:block;width:100%;height:auto;margin-top:calc(24px / var(--k,1.55) - var(--u)*3);border-radius:calc(var(--u)*5)}

/* Dieline sticker + packaging video act as one object: hovering either focuses both and opens the one callout */
@media(min-width:810px){
  .proj-stage:has(.link-yf:hover) .proj-a{transform:scale(var(--grow));z-index:20}
  .proj-stage:has(.link-yf:hover) .proj-a .win{box-shadow:0 calc(var(--u)*24) calc(var(--u)*50) rgba(0,0,0,.3)}
  .proj-stage:has(.link-yf:hover) .sticker.link-yf{scale:1.55;z-index:30}
  .proj-stage:has(.link-yf:hover) .link-yf{opacity:1!important}
  .proj-stage:has(.link-yf:hover) .proj-a .proj-info{opacity:1;visibility:visible;translate:0 -50%;transition-delay:.04s,.04s,0s}
}

/* Youthforia callout is wider so the photo can be bigger; the card is sized to the photo */
@media(min-width:810px){.proj-a .proj-info{width:calc(var(--u)*260)}}

/* Singlish callout is sized to its illustration sheet */
@media(min-width:810px){.sticker .photo-card{width:calc(var(--u)*260)}}

/* Postcard, Singlish, fumi, icons and collage stickers zoom bigger on hover (--k also keeps the callout's px spacing true on screen) */
.sticker:has(img[src*="s2"],img[src*="s4"],img[src*="s6"],img[src*="s7"],img[src*="s9"]){--k:1.65}
.sticker:has(img[src*="s2"],img[src*="s4"],img[src*="s6"],img[src*="s7"],img[src*="s9"]):hover,.sticker:has(img[src*="s2"],img[src*="s4"],img[src*="s6"],img[src*="s7"],img[src*="s9"]):focus-within{scale:var(--k)}

/* The 2x stickers counter-scale their callout so every callout lands at the same on-screen size (1.55x), anchored at the corner nearest the sticker */
.sticker:has(img[src*="s2"],img[src*="s4"],img[src*="s6"],img[src*="s7"],img[src*="s9"]) .proj-info{scale:calc(1.55 / var(--k))}
.sticker-up .proj-info{transform-origin:0 100%}
.sticker .proj-info.sticker-r{transform-origin:100% 0}
.sticker-up .proj-info.sticker-r{transform-origin:100% 100%}

/* Custom-icons callout comes out of the sticker's right side, vertically centered, tail pointing left */
@media(min-width:810px){
  .sticker .proj-info.side-right{top:0;bottom:auto;left:100%;right:auto;margin:0 0 0 calc(var(--u)*14);translate:calc(var(--u)*-8) 0;transform-origin:0 0}
  .sticker:hover .proj-info.side-right,.sticker:focus-within .proj-info.side-right{translate:0}
  .sticker .proj-info.side-right::before{top:calc(var(--u)*27.6);bottom:auto;left:calc(var(--u)*-6);right:auto;border-width:0 0 1px 1px;border-radius:0 0 0 calc(var(--u)*2)}
}

/* Singlish callout: centered over its sticker (so the tail sits above the illustration) and tucked closer */
@media(min-width:810px){
  .sticker-up .proj-info.photo-card{left:50%;right:auto;margin-bottom:0;translate:-50% calc(var(--u)*8);transform-origin:50% 100%}
  .sticker-up:hover .proj-info.photo-card,.sticker-up:focus-within .proj-info.photo-card{translate:-50% 0}
}

/* Passionfruit badge sticker + ai_tutor window act as one object (same as the dieline + packaging pair) */
@media(min-width:810px){
  .proj-stage:has(.link-pf:hover) .proj-d{transform:scale(var(--grow));z-index:20}
  .proj-stage:has(.link-pf:hover) .proj-d .win{box-shadow:0 calc(var(--u)*24) calc(var(--u)*50) rgba(0,0,0,.3)}
  .proj-stage:has(.link-pf:hover) .sticker.link-pf{scale:1.55;z-index:30}
  .proj-stage:has(.link-pf:hover) .link-pf{opacity:1!important}
  .proj-stage:has(.link-pf:hover) .proj-d .proj-info{opacity:1;visibility:visible;translate:-50% 0;transition-delay:.04s,.04s,0s}
}

/* Fruit badges scale about the ai_tutor window's top-right corner so they stay anchored to the media, and lift on hover so they clear the callout below.
   (The tilt sits on the inner box so the figure's transform-origin only affects scale.) */
.sticker.link-pf{transform:none;transform-origin:calc(var(--u)*53.7) calc(var(--u)*-144.9)}   /* ai_tutor window's top-right corner */
.sticker.link-pf .sticker-box{rotate:var(--r,0deg)}
.sticker.link-pf{transition:scale .3s cubic-bezier(.22,1,.36,1),translate .3s cubic-bezier(.22,1,.36,1),opacity .18s ease}
.proj-stage:has(.link-pf:hover) .sticker.link-pf{translate:0 calc(var(--u)*-60)}

/* Fumi callout: faint edge on the white menu pages; opens out of the sticker's left side (vertically centered, tail pointing right) so the tall card stays on screen */
.proj-info .photo-shadow{box-shadow:0 0 0 1px rgba(0,0,0,.07),0 1px 4px rgba(0,0,0,.12),0 6px 16px rgba(0,0,0,.08)}
@media(min-width:810px){
  .sticker .sticker-info.photo-card.side-left{top:50%;bottom:auto;left:auto;right:100%;margin:0 calc(var(--u)*14) 0 0;translate:calc(var(--u)*8) -50%;transform-origin:100% 50%}
  .sticker:hover .sticker-info.photo-card.side-left,.sticker:focus-within .sticker-info.photo-card.side-left{translate:0 -50%}
  .sticker .proj-info.side-left::before{top:calc(50% - var(--u)*5.5);bottom:auto;left:auto;right:calc(var(--u)*-6);border-width:1px 1px 0 0;border-radius:0 calc(var(--u)*2) 0 0}
}

/* Postcard callout: centered over its sticker, with the 14-unit gap. The extra -9.7u cancels the sideways swing from the sticker's 9deg tilt. */
@media(min-width:810px){
  .sticker-up .proj-info.photo-card.sticker-r{left:50%;right:auto;margin-bottom:calc(var(--u)*14);translate:calc(-50% - var(--u)*9.7) calc(var(--u)*8);transform-origin:50% 100%}
  .sticker-up:hover .proj-info.photo-card.sticker-r,.sticker-up:focus-within .proj-info.photo-card.sticker-r{translate:calc(-50% - var(--u)*9.7) 0}
}

/* Title-bar label shrinks to its fitted size (--fit-fs, set by projects.js) whenever its window is focused, including via a linked sticker */
@media(min-width:810px){
  .proj:hover .bar span,.proj:focus-within .bar span,
  .proj-stage:has(.link-yf:hover) .proj-a .bar span,
  .proj-stage:has(.link-pf:hover) .proj-d .bar span{font-size:var(--fit-fs,max(8px,calc(var(--u)*11)))}
}

/* Cursors: default arrow, magnifier in the hobbies section, finger on case study buttons */
.projects,.projects *,.projects .media,.projects .media.is-auto{cursor:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 32 32%22 fill=%22none%22 stroke-linecap=%22round%22%3E%3Ccircle cx=%2213%22 cy=%2213%22 r=%228.5%22 fill=%22%23fff%22 fill-opacity=%22.35%22 stroke=%22%23fff%22 stroke-width=%225.4%22/%3E%3Cpath d=%22M19.5 19.5l8 8%22 stroke=%22%23fff%22 stroke-width=%226%22/%3E%3Ccircle cx=%2213%22 cy=%2213%22 r=%228.5%22 stroke=%22%23000%22 stroke-width=%222.4%22/%3E%3Cpath d=%22M19.5 19.5l8 8%22 stroke=%22%23000%22 stroke-width=%223.2%22/%3E%3C/svg%3E") 10 10, zoom-in!important}
.btn{cursor:pointer}

/* Section dividers: solid for the first and last, dashed between case studies */
.divider{--line:#d4d4d4;display:flex;align-items:center;gap:20px;margin:0 0 var(--gap);color:#a0a0a0;font-size:16px;font-weight:400;letter-spacing:-.2px;white-space:nowrap}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.divider.dashed::before,.divider.dashed::after{background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px)}
/* External-link cursor on linked hobby items */
.projects .proj-a,.projects .proj-a *,.projects .proj-a .media.is-auto,.projects .proj-b,.projects .proj-b *,.projects .proj-b .media.is-auto,.projects .proj-d,.projects .proj-d *,.projects .proj-d .media.is-auto,.projects .sticker.link-yf,.projects .sticker.link-yf *,.projects .sticker.link-yf .media.is-auto,.projects .sticker.link-pf,.projects .sticker.link-pf *,.projects .sticker.link-pf .media.is-auto,.projects .sticker:has(img[src*="s4"]),.projects .sticker:has(img[src*="s4"]) *,.projects .sticker:has(img[src*="s4"]) .media.is-auto{cursor:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2226%22 height=%2226%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M11 4.8H6.7A2.2 2.2 0 0 0 4.5 7V17.3A2.2 2.2 0 0 0 6.7 19.5H17A2.2 2.2 0 0 0 19.2 17.3V13.5M12.8 11.2L20 4M14.2 4H20V9.8%22 stroke=%22%23fff%22 stroke-width=%223.4%22/%3E%3Cpath d=%22M11 4.8H6.7A2.2 2.2 0 0 0 4.5 7V17.3A2.2 2.2 0 0 0 6.7 19.5H17A2.2 2.2 0 0 0 19.2 17.3V13.5M12.8 11.2L20 4M14.2 4H20V9.8%22 stroke=%22%23000%22 stroke-width=%221.8%22/%3E%3C/svg%3E") 13 13, pointer!important}

.back-top{text-align:center;padding:0 0 100px}
.back-top .btn{padding-left:32px;padding-right:32px}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

#work,#about{scroll-margin-top:32px}

/* Wellnest card: sunrise + Shabooya recording over the static screenshot */
.card-anim{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sun-out{animation:sun-out 9s linear infinite}.sun-in{animation:sun-in 9s linear infinite}
@keyframes sun-out{0%,6%{transform:translateY(100px);animation-timing-function:linear}6.37%{transform:translateY(94.2px)}6.74%{transform:translateY(85.5px)}7.11%{transform:translateY(75.1px)}7.48%{transform:translateY(61.1px)}7.86%{transform:translateY(47.5px)}8.22%{transform:translateY(34.8px)}8.59%{transform:translateY(23.1px)}8.97%{transform:translateY(12.7px)}9.33%{transform:translateY(-0.3px)}9.70%{transform:translateY(-4.2px)}10.08%{transform:translateY(-3.9px)}10.44%{transform:translateY(-3.6px)}10.81%{transform:translateY(-2.9px)}11.19%{transform:translateY(-2.0px)}11.56%{transform:translateY(-1.3px)}11.92%{transform:translateY(-0.7px)}12.30%{transform:translateY(-0.3px)}12.67%{transform:translateY(0.0px)}12.68%,78%{transform:translateY(0);animation-timing-function:cubic-bezier(.5,0,.8,.4)}94%,100%{transform:translateY(100px)}}
@keyframes sun-in{0%,6%{transform:translateY(62px);animation-timing-function:linear}6.37%{transform:translateY(57.9px)}6.74%{transform:translateY(47.8px)}7.11%{transform:translateY(38.0px)}7.48%{transform:translateY(28.6px)}7.86%{transform:translateY(19.9px)}8.22%{transform:translateY(12.0px)}8.59%{transform:translateY(5.3px)}8.97%{transform:translateY(0.4px)}9.33%{transform:translateY(-4.1px)}9.70%{transform:translateY(-4.5px)}10.08%{transform:translateY(-4.5px)}10.44%{transform:translateY(-3.8px)}10.81%{transform:translateY(-3.0px)}11.19%{transform:translateY(-2.3px)}11.56%{transform:translateY(-1.5px)}11.92%{transform:translateY(-0.4px)}12.30%{transform:translateY(0.0px)}12.67%{transform:translateY(0.0px)}12.68%,78%{transform:translateY(0);animation-timing-function:cubic-bezier(.5,0,.8,.4)}94%,100%{transform:translateY(62px)}}
@media(max-width:809px){.card-stack.anim-first{order:-1}}
@media(prefers-reduced-motion:reduce){.sun-out,.sun-in{animation:none}}
.wn-screen{position:absolute;left:0;top:0;width:1200px;height:1200px;transform-origin:0 0;transform:scale(var(--s,.4));clip-path:inset(0 0 0 777px);pointer-events:none}
.card .wn-screen video.wn-video,.card .wn-screen img.wn-poster{position:absolute;left:0;top:0;width:432px;height:936px;aspect-ratio:auto;object-fit:fill;border-radius:0;transform-origin:0 0;transform:matrix(.65625,.1706,-.17628,.65449,791,261.3);clip-path:inset(62px 3px 3px 3px round 0 0 69px 69px)}

/* Redesigning AI content card: phone recording sits in the same slot as the onboarding card's */
.c1-stack video{top:12.3%;aspect-ratio:722/1468;border-radius:15%/7.4%}
.card .wn-screen video.wn-video{opacity:0}
.card .wn-screen video.wn-video.on{opacity:1}

/* Ticketing card: the desktop recording plays inside the MacBook screen of the static card image */
.card .c5-stack video{left:3.94%;top:19.1%;width:92.1%;height:57.6%;aspect-ratio:auto;border-radius:0;object-fit:cover}

/* Hobbies collage is desktop-only: hidden on tablets, phones and touch devices */
@media(max-width:1199px),(hover:none) and (pointer:coarse){.projects{display:none}}

/* Mobile: even rhythm around dividers (48px above and below), slightly smaller label */
@media(max-width:809px){.divider{margin-bottom:48px;font-size:14px}}

/* Pill (icon included) just fades in on first load */
@keyframes pill-fade-in{from{opacity:0}to{opacity:1}}
.pill{animation:pill-fade-in .6s ease-out both}
@media(prefers-reduced-motion:reduce){.pill{animation:none}}