:root{--paper:#f7f0e2;--paper2:#fbf6eb;--blue:#164b92;--cobalt:#0a55ad;--navy:#0a2e61;--green:#246454;--green2:#4d765b;--coral:#ed735c;--ink:#132e4f;--muted:#526273;--hand:'Caveat',cursive;--sans:'DM Sans',sans-serif;--page:min(1180px,calc(100vw - 48px));--ease:cubic-bezier(.2,.75,.25,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:78px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);overflow-x:hidden}body:before{content:"";position:fixed;inset:0;z-index:1000;pointer-events:none;opacity:.18;background-image:url("assets/illustrations/background.webp");background-size:cover;mix-blend-mode:multiply}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}.skip-link{position:fixed;left:16px;top:-80px;z-index:1200;background:var(--navy);color:#fff;padding:12px 18px;border-radius:0 0 8px 8px}.skip-link:focus{top:0}
.site-nav{position:fixed;z-index:200;top:0;left:0;width:100%;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 max(28px,calc((100vw - 1320px)/2));transition:.35s var(--ease)}.site-nav.scrolled{background:rgba(247,240,226,.91);border-bottom:1px solid rgba(10,46,97,.1)}.home-link{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600}.leaf-mark{width:27px;height:27px;overflow:visible}.leaf-mark path:first-child{fill:var(--green)}.leaf-mark path:last-child{fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round}.nav-menu{display:flex;gap:30px;font-size:13px;font-weight:600}.nav-menu a{position:relative;padding:8px 0}.nav-menu a:after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;background:var(--coral);transform:rotate(-2deg);transition:right .25s}.nav-menu a:hover:after,.nav-menu a:focus-visible:after,.nav-menu a.active:after{right:0}.nav-toggle{display:none;background:none;border:0;width:44px;height:44px}.nav-toggle span{display:block;width:24px;height:2px;background:var(--navy);margin:7px}
.intro{position:fixed;inset:0;z-index:900;background:var(--paper);overflow:hidden;transition:opacity .6s var(--ease),visibility .6s}.intro.is-done{opacity:0;visibility:hidden}.intro:before{content:"";position:absolute;inset:0;background:url("assets/illustrations/background.webp") center/cover no-repeat;opacity:.8}.intro p{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);font:600 clamp(28px,4vw,54px)/1 var(--hand);color:var(--blue);opacity:0;animation:introWords 2.8s .3s both}.skip-intro{position:absolute;right:28px;bottom:24px;border:0;background:none;font:600 18px var(--hand);color:var(--navy);cursor:pointer}.intro-bird{position:absolute;width:clamp(65px,9vw,150px);height:auto;object-fit:contain;animation:flockFly 3.4s var(--delay) var(--ease) both;opacity:0;filter:none}.intro-bird:nth-child(1){left:-10%;top:18%;--tx:118vw;--ty:22vh}.intro-bird:nth-child(2){left:-13%;top:32%;--tx:95vw;--ty:-12vh}.intro-bird:nth-child(3){left:-16%;top:44%;--tx:75vw;--ty:-20vh}.intro-bird:nth-child(4){left:-11%;top:57%;--tx:115vw;--ty:-2vh}.intro-bird:nth-child(5){left:-18%;top:68%;--tx:88vw;--ty:-37vh}.intro-bird:nth-child(6){left:-14%;top:80%;--tx:73vw;--ty:-49vh}.intro-bird:nth-child(7){left:-9%;top:39%;--tx:105vw;--ty:10vh}.intro-bird:nth-child(8){left:-20%;top:24%;--tx:77vw;--ty:7vh}@keyframes flockFly{0%{transform:translate(0,0) scale(.42);opacity:0}12%{opacity:.85}72%{opacity:.85}100%{transform:translate(var(--tx),var(--ty)) scale(.18);opacity:0}}@keyframes introWords{0%,20%{opacity:0;transform:translate(-50%,-44%)}45%,75%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0}}
.bird-companion{position:fixed;z-index:500;width:54px;height:42px;left:0;top:0;pointer-events:none;opacity:0;will-change:transform;transition:opacity .25s}.bird-companion.show{opacity:1}.bird-companion img{width:100%;height:100%;object-fit:contain}.bird-companion.flip img{transform:scaleX(-1)}.bird-companion.peck img{transform:rotate(14deg) translateY(3px)}
.hero{position:relative;min-height:100svh;overflow:hidden;background:var(--paper)}.hero-world{position:absolute;inset:0}.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero-tree{position:absolute;left:20%;top:-7%;width:min(78vw,1220px);height:110%;object-fit:contain;object-position:center bottom;transform-origin:54% 85%;animation:treeBreathe 9s ease-in-out infinite}.hero-person{position:absolute;left:39%;bottom:3.5%;width:min(19vw,295px);height:auto;animation:personBreathe 7s ease-in-out infinite}.hero-foreground{position:absolute;left:-4%;bottom:-3%;width:108%;height:31%;object-fit:fill;transform-origin:50% 100%;animation:grassBreathe 8s ease-in-out infinite}.hero-copy{position:absolute;left:max(6vw,40px);top:34%;z-index:5;color:var(--navy)}.hero-copy .kicker{font:600 20px var(--hand);margin:0 0 -15px 8px;color:var(--green)}.hero-copy h1{font:700 clamp(74px,10vw,150px)/.68 var(--hand);letter-spacing:-.06em;margin:0;transform:rotate(-5deg);text-shadow:1px 1px 0 var(--paper)}.hero-copy h1 span{display:inline-block;margin-left:1.1em}.hero-copy h1:after{content:"";display:block;width:1.55em;height:5px;background:var(--blue);margin:.18em 0 0 1.05em;transform:rotate(-8deg);border-radius:50%}.hero-copy>p:last-child{margin:24px 0 0 40%;font:600 clamp(16px,1.7vw,24px)/1.08 var(--hand);transform:rotate(-3deg)}@keyframes treeBreathe{50%{transform:rotate(.35deg) translateY(-2px)}}@keyframes personBreathe{50%{transform:translateY(-3px) rotate(.25deg)}}@keyframes grassBreathe{50%{transform:skewX(.25deg)}}
.tree-portals{position:absolute;inset:0;z-index:10}.portal{position:absolute;width:22%;height:15%;border:0;background:transparent;cursor:pointer;text-align:left}.portal:focus-visible{outline:2px dashed var(--coral);outline-offset:4px}.portal-projects{left:66%;top:18%}.portal-experience{left:40%;top:31%}.portal-skills{left:71%;top:45%}.portal-education{left:65%;top:61%}.portal-about{left:36%;top:62%;width:22%;height:31%}.portal-dot{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--coral);opacity:.45;left:18%;top:48%;transition:.3s}.portal:after{content:"";position:absolute;left:20%;top:52%;width:0;height:2px;background:var(--navy);transform:rotate(-7deg);transform-origin:left;transition:width .45s var(--ease)}.annotation{position:absolute;left:49%;top:21%;width:max-content;max-width:220px;opacity:0;transform:translateY(6px);transition:.35s var(--ease);font-family:var(--hand)}.annotation strong{display:block;font-size:clamp(26px,2.5vw,40px);line-height:1;color:var(--navy)}.annotation strong:after{content:"";display:block;width:80%;height:3px;background:var(--coral);margin-top:4px;transform:rotate(-3deg)}.annotation small{display:block;font-size:17px;line-height:1.1;margin-top:9px}.portal:hover .annotation,.portal:focus-visible .annotation,.portal.is-active .annotation{opacity:1;transform:none}.portal:hover:after,.portal:focus-visible:after,.portal.is-active:after{width:32%}.portal:hover .portal-dot,.portal:focus-visible .portal-dot{opacity:1;transform:scale(1.2)}.portal-about .annotation{left:-18%;top:17%}.portal-about:after,.portal-about .portal-dot{display:none}.scroll-cue{position:absolute;z-index:20;left:50%;bottom:18px;transform:translateX(-50%);border:0;background:none;font:600 18px var(--hand);display:flex;flex-direction:column;align-items:center;cursor:pointer;color:var(--navy)}.scroll-cue b{font:400 19px var(--sans);animation:bob 1.7s infinite}@keyframes bob{50%{transform:translateY(5px)}}
.journey-section{position:relative;overflow:hidden;min-height:100vh;padding:130px 0;background:var(--paper)}.journey-section:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);opacity:.45}.section-heading{position:relative;z-index:5;width:min(620px,var(--page));margin:0 auto 90px;text-align:center}.section-heading-left{text-align:left;margin-left:max(7vw,calc((100vw - 1180px)/2));margin-right:0}.section-number{font:700 18px var(--hand);color:var(--coral)}.eyebrow{font:600 clamp(18px,2vw,25px) var(--hand);color:var(--green);margin:4px 0}.section-heading h2,.about h2{font:700 clamp(72px,10vw,140px)/.8 var(--hand);color:var(--navy);letter-spacing:-.045em;margin:0}.section-heading>p:last-child{max-width:480px;margin:22px auto 0;line-height:1.65;color:var(--muted)}.section-heading-left>p:last-child{margin-left:0}.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}.reveal.in-view{opacity:1;transform:none}
.projects{min-height:2350px;padding-bottom:230px}.project-branch{position:absolute;z-index:1;left:32%;top:310px;width:43%;height:1770px;object-fit:fill;filter:none}.project-list{position:relative;z-index:4;width:var(--page);height:1600px;margin:auto}.project{position:absolute;width:min(420px,37vw);transition:transform .45s var(--ease)}.project:nth-child(1){left:0;top:60px}.project:nth-child(2){right:1%;top:370px}.project:nth-child(3){left:4%;top:830px}.project:nth-child(4){right:0;top:1140px}.project-number{font:700 18px var(--hand);color:var(--coral)}.project h3{font:700 clamp(31px,3.2vw,50px)/.95 var(--hand);margin:2px 0 14px;color:var(--navy)}.project-visual{position:relative;width:100%;aspect-ratio:16/10;background:#dfe9e5;overflow:hidden;border:2px solid var(--navy);transform:rotate(var(--tilt));box-shadow:7px 8px 0 rgba(22,75,146,.12);transition:.4s var(--ease)}.project:nth-child(even) .project-visual{--tilt:1.5deg}.project:nth-child(odd) .project-visual{--tilt:-1.2deg}.project:hover .project-visual{transform:rotate(0) translateY(-4px)}.project p{font-size:15px;line-height:1.6;margin:18px 0 9px}.project-category{display:block;color:var(--green);font:600 17px var(--hand)}.project-link{display:inline-block;margin-top:14px;font:700 20px var(--hand);position:relative}.project-link:after{content:"";position:absolute;height:3px;background:var(--coral);left:0;right:100%;bottom:-3px;transition:right .3s}.project:hover .project-link:after,.project-link:focus-visible:after{right:0}.ui-phone{position:absolute;width:34%;height:82%;left:13%;bottom:-8%;border:5px solid var(--navy);border-radius:26px;background:var(--paper2);padding:9px}.ui-phone:before{content:"";display:block;width:50%;height:7px;background:var(--navy);border-radius:8px;margin:auto}.ui-map{position:absolute;inset:20px 12px 12px;background:repeating-linear-gradient(35deg,#c6d9dc 0 16px,#f7f0e2 16px 20px)}.ui-pin{position:absolute;border-radius:50% 50% 50% 0;width:18px;height:18px;background:var(--coral);transform:rotate(-45deg)}.ui-pin:nth-child(1){left:24%;top:28%}.ui-pin:nth-child(2){left:63%;top:57%}.ui-copy{position:absolute;right:9%;top:22%;width:38%;font:700 27px/1 var(--hand);color:var(--navy)}.ui-copy small{display:block;font:500 12px/1.45 var(--sans);margin-top:13px;color:var(--muted)}.travel-ui{position:absolute;inset:0;background:linear-gradient(165deg,#bdd6e4 0 42%,#f0c3aa 42% 100%)}.travel-ticket{position:absolute;background:var(--paper2);border:1px dashed var(--navy);padding:14px;width:55%;height:42%;left:20%;top:29%;transform:rotate(-5deg);font:700 23px var(--hand)}.travel-ticket span{display:block;font:500 11px var(--sans);margin-top:9px}.movie-ui{position:absolute;inset:0;background:var(--navy);color:var(--paper)}.movie-bars{display:flex;align-items:end;gap:8px;height:66%;padding:30px 32px 0}.movie-bars i{display:block;flex:1;background:var(--coral);height:var(--h);border-radius:20px 20px 0 0}.movie-ui b{position:absolute;left:32px;bottom:18px;font:700 22px var(--hand)}.zulip-ui{position:absolute;inset:0;background:#e7eee9;padding:30px}.zulip-thread{width:72%;height:18%;background:var(--paper2);border-left:5px solid var(--green);margin-bottom:12px}.zulip-recap{position:absolute;right:8%;bottom:12%;width:56%;padding:16px;background:var(--paper2);border:2px solid var(--cobalt);font:700 20px var(--hand)}.transition-note{position:absolute;z-index:4;bottom:80px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:16px;font:600 20px var(--hand);white-space:nowrap}.transition-note.in-view{transform:translateX(-50%)}.transition-note i{width:110px;height:2px;background:var(--navy);transform:rotate(-4deg)}
.experience{min-height:1500px}.experience-world{position:relative;width:var(--page);height:960px;margin:auto}.experience-trunk{position:absolute;left:37%;top:-150px;width:28%;height:1150px;object-fit:fill}.experience-list{position:relative;height:100%}.experience-entry{position:absolute;width:36%;opacity:0;transform:translateY(24px);transition:.75s var(--ease)}.experience-entry.in-view{opacity:1;transform:none}.experience-entry:nth-child(1){left:1%;top:120px;text-align:right}.experience-entry:nth-child(2){right:1%;top:560px}.experience-entry:after{content:"";position:absolute;top:25px;width:24%;height:2px;background:var(--navy)}.experience-entry:nth-child(1):after{right:-30%}.experience-entry:nth-child(2):after{left:-30%}.experience-entry time{font:700 22px var(--hand);color:var(--coral)}.experience-entry h3{font:700 clamp(26px,3vw,42px)/1 var(--hand);margin:4px 0;color:var(--navy)}.experience-entry h4{font-size:13px;text-transform:uppercase;letter-spacing:.09em;margin:0 0 17px;color:var(--green)}.experience-entry p{font-size:15px;line-height:1.65}.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.experience-entry:nth-child(1) .tags{justify-content:flex-end}.tags span{font:600 15px var(--hand);color:var(--blue);border-bottom:1px solid rgba(22,75,146,.3)}.falling-leaf{position:absolute;width:90px;height:90px;object-fit:cover;object-position:2% 1%;right:20%;bottom:30px;transform:rotate(18deg)}
.education{min-height:1100px}.education-notes{position:relative;width:var(--page);display:grid;grid-template-columns:1fr 1fr;gap:18%;margin:120px auto 170px}.edu-note{position:relative;max-width:440px}.edu-note:nth-child(2){margin-top:170px}.edu-note:before{content:"";position:absolute;width:34px;height:34px;background:url("assets/illustrations/leaves-sheet.webp") 3% 3%/330px auto no-repeat;left:-48px;top:2px;transform:rotate(var(--r))}.edu-note:nth-child(1){--r:-12deg}.edu-note:nth-child(2){--r:17deg}.edu-note h3{font:700 clamp(30px,3vw,44px)/1 var(--hand);color:var(--navy);margin:0 0 6px}.edu-note .degree{font-weight:600}.edu-note .date{color:var(--coral);font:700 18px var(--hand)}.edu-note ul{padding:0;list-style:none;line-height:1.8;color:var(--muted);font-size:14px}.learning-path{position:relative;width:var(--page);margin:auto;display:flex;align-items:center;justify-content:space-between;font:600 clamp(18px,2.2vw,30px) var(--hand);color:var(--navy)}.learning-path i{font-style:normal;color:var(--coral)}.learning-path span:nth-of-type(even){transform:translateY(15px)}.learning-path svg{position:absolute;left:0;right:0;top:26px;width:100%;height:90px;z-index:-1}.learning-path path{fill:none;stroke:rgba(36,100,84,.4);stroke-width:2;stroke-dasharray:6 9}
.skills{min-height:1350px}.skill-groups{position:relative;width:var(--page);height:950px;margin:auto}.skill-group{position:absolute;width:390px;min-height:320px;padding:90px 64px 50px;isolation:isolate;transition:transform .5s var(--ease)}.skill-group:nth-child(1){left:2%;top:0;transform:rotate(-2deg)}.skill-group:nth-child(2){right:0;top:250px;transform:rotate(2deg)}.skill-group:nth-child(3){left:30%;top:590px;transform:rotate(-1deg)}.skill-group:hover{transform:translateY(-7px) rotate(0)}.skill-group:before{content:"";position:absolute;inset:-50px;z-index:-1;background:url("assets/illustrations/leaves-sheet.webp") center/contain no-repeat;opacity:.84}.skill-group h3{font:700 45px var(--hand);color:var(--navy);margin:0 0 12px}.skill-group ul{list-style:none;padding:0;margin:0;columns:2;column-gap:18px}.skill-group li{font-size:13px;line-height:1.45;margin-bottom:8px;background:rgba(247,240,226,.76);display:inline;padding:2px 4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.about{min-height:1000px;display:flex;align-items:center;justify-content:center;gap:min(8vw,120px);padding-inline:max(5vw,24px)}.about:before{background:radial-gradient(circle at 28% 56%,rgba(77,118,91,.1),transparent 34%)}.about-person{position:relative;z-index:2;width:min(42vw,530px);height:auto;transform:translateY(45px)}.about-copy{position:relative;z-index:4;width:min(530px,45vw)}.about h2{font-size:clamp(62px,8vw,112px);margin:4px 0 32px}.about-copy>p:not(.eyebrow){line-height:1.75;color:#30465c}.hand-notes{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0;color:var(--green);font:600 19px var(--hand)}.hand-notes span:before{content:"✦";color:var(--coral);margin-right:5px;font-family:var(--sans);font-size:9px}.about-links,.contact-links{display:flex;gap:24px;flex-wrap:wrap}.about-links a,.contact-links a{font:700 21px var(--hand);border-bottom:3px solid var(--coral)}
.contact{min-height:100vh;display:grid;place-items:center;text-align:center;padding-bottom:80px}.contact-copy{z-index:2}.contact h2{font:700 clamp(72px,11vw,160px)/.72 var(--hand);color:var(--navy);margin:10px 0 34px;letter-spacing:-.04em}.contact h2 em{font-weight:500;color:var(--green)}.contact-copy>p:not(.eyebrow){font:600 24px var(--hand)}.contact-links{justify-content:center}.contact-bird{position:absolute;width:min(20vw,250px);height:auto;right:7%;bottom:13%;animation:birdIdle 6s ease-in-out infinite}.back-tree{position:absolute;left:50%;bottom:56px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}.copyright{position:absolute;left:30px;bottom:25px;font-size:11px;color:var(--muted)}@keyframes birdIdle{50%{transform:translateY(-4px) rotate(1deg)}}
.transition-wash{position:fixed;inset:0;z-index:700;pointer-events:none;background:var(--paper);opacity:0;visibility:hidden;transition:.35s}.transition-wash.active{opacity:1;visibility:visible}.transition-wash img{position:absolute;width:110%;left:-5%;bottom:-10%;animation:leavesPass .8s var(--ease)}@keyframes leavesPass{from{transform:translateY(45px);opacity:0}to{transform:none;opacity:1}}
@media(max-width:900px){:root{--page:calc(100vw - 36px)}.site-nav{padding:0 18px}.nav-toggle{display:block}.nav-menu{position:absolute;right:14px;top:62px;display:flex;flex-direction:column;gap:2px;width:190px;padding:14px;background:rgba(247,240,226,.98);border:1px solid rgba(10,46,97,.12);transform:translateY(-8px);opacity:0;pointer-events:none;transition:.25s}.nav-menu.open{transform:none;opacity:1;pointer-events:auto}.nav-menu a{padding:9px}.hero-tree{left:7%;top:4%;width:110%;height:92%}.hero-person{left:34%;width:28vw;bottom:9%}.hero-copy{left:5%;top:25%}.tree-portals{display:none}.project-branch{left:35%;width:50%}.project{width:45%}.experience-trunk{left:33%;width:34%}.learning-path{flex-wrap:wrap;gap:20px}.skill-group:nth-child(1){left:0}.skill-group:nth-child(2){right:0}.skill-group:nth-child(3){left:18%}.about{gap:2vw}.about-copy{width:50vw}.about-person{width:45vw}}
@media(max-width:620px){.intro-bird:nth-child(n+5){display:none}.bird-companion{display:none!important}.hero{min-height:780px}.hero-tree{left:-11%;top:8%;width:132%;height:80%;object-position:center bottom}.hero-person{left:30%;width:40vw;bottom:9%}.hero-foreground{height:24%}.hero-copy{top:18%;left:7%}.hero-copy h1{font-size:76px}.hero-copy>p:last-child{margin-left:16%;font-size:17px}.journey-section{padding-top:100px}.section-heading{margin-bottom:58px}.projects{min-height:auto;padding-bottom:160px}.project-branch{left:6%;top:310px;width:92%;height:1850px;opacity:.62}.project-list{height:auto;display:flex;flex-direction:column;gap:100px}.project{position:relative!important;inset:auto!important;width:88%;margin:0 auto}.project:nth-child(even){margin-left:12%}.project:nth-child(odd){margin-right:12%}.transition-note{position:relative;bottom:auto;margin-top:120px}.experience{min-height:auto}.experience-world{height:auto;min-height:1080px}.experience-trunk{left:25%;top:-40px;width:50%;height:1080px;opacity:.72}.experience-entry{width:76%}.experience-entry:nth-child(1){left:0;top:100px;text-align:left}.experience-entry:nth-child(2){right:0;top:620px}.experience-entry:nth-child(1):after{right:-28%}.experience-entry:nth-child(1) .tags{justify-content:flex-start}.education-notes{display:block;margin:80px auto 130px;padding-left:38px}.edu-note:nth-child(2){margin-top:90px}.learning-path{font-size:22px;justify-content:center;line-height:1.1}.learning-path svg{display:none}.skills{min-height:auto}.skill-groups{height:auto;display:flex;flex-direction:column;gap:70px}.skill-group{position:relative!important;inset:auto!important;width:min(90vw,390px);margin:auto;transform:none!important}.about{min-height:auto;display:flex;flex-direction:column-reverse;padding-top:120px}.about-copy{width:100%;max-width:520px}.about-person{width:min(92vw,520px);transform:none}.contact-bird{width:150px;right:-20px;bottom:130px}.contact h2{font-size:74px}.copyright{left:18px}.nav-menu{font-size:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.intro{display:none}.bird-companion{display:none}.reveal,.experience-entry{opacity:1;transform:none}}

/* Mid-size desktop polish */
.scroll-cue{left:17%}
@media(max-width:1250px) and (min-width:901px){.nav-menu{position:absolute;right:54px;gap:16px;font-size:12px}.site-nav{padding-inline:24px}}

/* ==========================================================
   Art direction v2 — continuous growth, no stretched assets
   ========================================================== */
.hero-tree{left:22%;top:-3%;width:min(66vw,1040px);height:104%}
.hero-copy{top:36%}
.hero-copy h1{font-size:clamp(70px,9vw,136px)}
.hero-person{left:43%;bottom:3%;width:min(17vw,260px);transition:opacity .42s var(--ease),transform .55s var(--ease),filter .42s;animation:none}
.hero-person-seated{opacity:1;transform:translateY(0) scale(1)}
.hero-person-wave{left:41.8%;bottom:1.5%;width:min(19vw,290px);opacity:0;transform:translateY(12px) scale(.96);transform-origin:50% 90%}
.hero.character-waving .hero-person-seated{opacity:0;transform:translateY(8px) scale(.97)}
.hero.character-waving .hero-person-wave{opacity:1;transform:translateY(0) scale(1)}
.about-dialogue{position:absolute;z-index:18;left:25.5%;bottom:22%;width:220px;padding:14px 18px;background:rgba(251,246,235,.94);border:1.5px solid var(--navy);border-radius:7px;opacity:0;transform:translateY(8px) rotate(-1deg);transition:.38s var(--ease);pointer-events:none}
.about-dialogue:after{content:"";position:absolute;right:-11px;bottom:17px;width:19px;height:19px;background:var(--paper2);border-top:1.5px solid var(--navy);border-right:1.5px solid var(--navy);transform:rotate(45deg)}
.about-dialogue strong{display:block;font:700 24px/1 var(--hand);color:var(--navy)}
.about-dialogue span{display:block;margin-top:6px;font-size:12px;line-height:1.45;color:var(--muted)}
.hero.character-waving .about-dialogue{opacity:1;transform:none}

.portal{width:18%;height:13%}.portal-projects{left:64%;top:18%}.portal-experience{left:43%;top:29%}.portal-skills{left:66%;top:42%}.portal-education{left:62%;top:56%}.portal-about{left:40%;top:62%;width:20%;height:31%}
.portal .annotation,.portal-about .annotation{position:fixed;z-index:30;left:auto;right:3.5vw;top:27vh;width:205px;max-width:205px;padding:10px 0;background:rgba(247,240,226,.88);text-align:left}
.portal .annotation strong{font-size:34px}.portal .annotation small{font-size:16px}
.portal:after{left:58%;top:50%}.portal:hover:after,.portal:focus-visible:after,.portal.is-active:after{width:45%}

.projects{min-height:1580px;padding-bottom:80px}
.projects .section-heading{margin-bottom:20px}
.project-branch{left:-4%;top:390px;width:108%;height:auto;object-fit:contain;opacity:.96}
.project-list{height:1060px;margin-top:70px}
.project{width:min(390px,34vw);background:rgba(247,240,226,.82);padding:12px}
.project:nth-child(1){left:0;top:110px}.project:nth-child(2){right:0;top:190px}.project:nth-child(3){left:2%;top:620px}.project:nth-child(4){right:1%;top:700px}
.project-visual{box-shadow:5px 6px 0 rgba(22,75,146,.1);border-width:1.5px}

.experience{min-height:1370px;padding-top:105px}
.experience .section-heading{margin-bottom:45px}
.experience-world{height:980px}
.experience-trunk{left:29%;top:-70px;width:42%;height:auto;object-fit:contain}
.experience-entry{width:34%;background:rgba(247,240,226,.82);padding:10px}
.experience-entry:nth-child(1){left:1%;top:185px}.experience-entry:nth-child(2){right:1%;top:600px}
.experience-entry:after{width:18%}.experience-entry:nth-child(1):after{right:-22%}.experience-entry:nth-child(2):after{left:-22%}

.education{min-height:1050px;padding-top:110px}
.education-notes{margin:80px auto 145px;gap:14%}
.edu-note:before{display:none}
.note-leaf{position:absolute;left:-52px;top:-3px;width:39px;height:39px;overflow:visible;transform:rotate(-10deg)}
.edu-note:nth-child(2) .note-leaf{transform:rotate(14deg)}
.note-leaf path:first-child{fill:var(--green)}.note-leaf path:last-child{fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round}
.learning-path:after{content:"";position:absolute;left:50%;top:74px;width:2px;height:180px;background:linear-gradient(var(--green),rgba(36,100,84,0));transform:rotate(-2deg);transform-origin:top}

.skills{min-height:1120px;padding-top:120px}
.skills .section-heading{margin-bottom:20px}
.skill-world{position:relative;width:100%;height:780px}
.skill-branches{position:absolute;left:0;top:0;width:100%;height:auto;opacity:.9}
.skill-groups{height:780px;margin:0 auto}
.skill-group{min-height:0;width:300px;padding:20px;background:rgba(247,240,226,.86);transform:none!important}
.skill-group:before{display:none}
.skill-group:nth-child(1){left:7%;top:325px}.skill-group:nth-child(2){left:42%;right:auto;top:205px}.skill-group:nth-child(3){left:auto;right:8%;top:445px}
.skill-group h3{font-size:42px}.skill-group ul{columns:1}.skill-group li{display:block;background:none;padding:0;margin-bottom:5px;font-size:13px}

.transition-wash{background:rgba(247,240,226,.96)}

@media(max-width:900px){.hero-tree{left:4%;top:4%;width:106%;height:90%}.hero-person{left:37%;width:25vw}.hero-person-wave{left:35%;width:28vw}.about-dialogue{left:17%;bottom:26%}.project-branch{left:-18%;width:136%;top:430px}.experience-trunk{left:25%;width:50%}.skill-group:nth-child(1){left:2%}.skill-group:nth-child(2){left:36%}.skill-group:nth-child(3){right:2%}}
@media(max-width:620px){.hero-tree{left:-9%;top:10%;width:124%;height:77%}.hero-person{left:31%;width:39vw}.hero-person-wave{left:28%;width:44vw}.about-dialogue{display:none}.project-branch{left:-30%;top:420px;width:160%;height:auto}.projects{min-height:auto}.project-list{height:auto}.experience-trunk{left:12%;top:40px;width:76%;height:auto;opacity:.54}.skill-world{height:auto}.skill-branches{left:-35%;top:40px;width:170%;opacity:.38}.skill-groups{height:auto;display:flex;gap:80px;padding:80px 0 130px}.skill-group{background:rgba(247,240,226,.9)}.note-leaf{left:-42px}}
.edu-note:first-child .note-leaf{left:0;top:-45px}
@media(max-width:900px){.bird-companion{display:none!important}}

/* ==========================================================
   Motion + homepage interaction refinement
   ========================================================== */
.intro{transition:opacity .9s var(--ease),visibility .9s}
.intro:after{content:"";position:absolute;z-index:1;inset:-3% 5% 0 18%;background:url("assets/illustrations/tree.webp") center bottom/contain no-repeat;opacity:0;animation:introTreeReveal 5.8s .35s var(--ease) forwards;pointer-events:none}
.intro:before{z-index:0}.intro-flock{position:absolute;inset:0;z-index:2}
.intro p{z-index:3;animation:introWords 5.6s .45s both}.skip-intro{z-index:5}
.intro-bird{animation-duration:4.8s}
.intro-bird-final{position:absolute;z-index:4;left:-12%;top:57%;width:clamp(72px,9vw,142px);height:auto;object-fit:contain;opacity:0;animation:finalBirdFly 3s 3.05s cubic-bezier(.22,.62,.3,1) forwards}
@keyframes flockFly{0%{transform:translate(0,0) scale(.44);opacity:0}8%{opacity:.92}68%{opacity:.84}100%{transform:translate(var(--tx),var(--ty)) scale(.13);opacity:0}}
@keyframes introTreeReveal{0%,22%{opacity:0;transform:translateY(9px)}58%,100%{opacity:.94;transform:none}}
@keyframes finalBirdFly{0%{transform:translate(0,0) scale(.62) rotate(-4deg);opacity:0}10%{opacity:1}76%{opacity:1}100%{transform:translate(118vw,-38vh) scale(.28) rotate(2deg);opacity:0}}
@keyframes introWords{0%,10%{opacity:0;transform:translate(-50%,-43%)}22%,70%{opacity:1;transform:translate(-50%,-50%)}90%,100%{opacity:0;transform:translate(-50%,-54%)}}

.hero-perched-bird{position:absolute;z-index:7;left:68%;top:27%;width:min(6.5vw,92px);height:auto;opacity:0;transform:translateY(-5px) scale(.9);transition:opacity .65s .18s,transform .8s var(--ease)}
.intro-complete .hero-perched-bird{opacity:1;transform:none;animation:perchedLook 7s 1.2s ease-in-out infinite}
@keyframes perchedLook{0%,78%,100%{transform:rotate(0) translateY(0)}84%{transform:rotate(-3deg) translateY(-1px)}90%{transform:rotate(2deg) translateY(0)}}

.hero-foreground{left:-3%;bottom:-2%;width:106%;height:auto;object-fit:contain}
.hero-person,.hero-person-wave{left:41.5%;bottom:2.6%;width:min(24vw,330px);height:min(29vh,275px);object-fit:contain;object-position:center bottom;animation:none;transform:none}
.hero-person-turn,.hero-person-wave-alt{opacity:0}
.hero.character-waving .hero-person-seated{animation:characterSeatOut .72s var(--ease) forwards}
.hero.character-waving .hero-person-turn{animation:characterTurn 1.05s var(--ease) forwards}
.hero.character-waving .hero-person-wave{animation:characterWaveA 1.1s .67s var(--ease) forwards}
.hero.character-waving .hero-person-wave-alt{animation:characterWaveB .84s 1.48s ease-in-out infinite alternate}
@keyframes characterSeatOut{0%,24%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(4px) rotate(1deg)}}
@keyframes characterTurn{0%,12%{opacity:0;transform:translateY(5px) scale(.98)}28%,65%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-2px)}}
@keyframes characterWaveA{0%{opacity:0;transform:translateY(5px) scale(.98)}35%,100%{opacity:1;transform:none}}
@keyframes characterWaveB{0%,35%{opacity:0;transform:rotate(-1deg)}60%,100%{opacity:1;transform:rotate(1deg)}}

.about-dialogue{left:25%;bottom:23%;width:238px;padding:16px 19px;background:rgba(247,240,226,.9);border:0;border-radius:47% 53% 45% 55%/16% 18% 14% 17%;box-shadow:0 0 0 1.5px var(--navy),3px 2px 0 rgba(10,46,97,.16);transform:translateY(9px) rotate(-1.3deg)}
.about-dialogue:before{content:"";position:absolute;inset:5px -4px -4px 4px;border:1px solid rgba(10,46,97,.35);border-radius:51% 49% 55% 45%/18% 15% 19% 14%;pointer-events:none}
.about-dialogue:after{background:var(--paper);right:-9px;bottom:20px;width:16px;height:16px}
.about-dialogue span{margin-top:11px;line-height:1.55}

.portal-education{left:37%;top:24%;width:20%;height:23%}
.portal-experience{left:63%;top:54%;width:20%;height:18%}
.portal .annotation,.portal-about .annotation{background:transparent;padding:0;text-shadow:2px 2px 0 var(--paper),-2px -2px 0 var(--paper)}
.portal-education .annotation{left:5vw;right:auto;top:20vh}
.portal-projects .annotation,.portal-skills .annotation,.portal-experience .annotation{right:3.5vw;left:auto;top:23vh}
.portal-about .annotation{right:4vw;left:auto;top:69vh}
.portal:after{width:0;height:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 42'%3E%3Cpath d='M3 31 C29 7 54 39 78 18 S122 14 147 4' fill='none' stroke='%230a2e61' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M4 34 C31 10 53 41 79 21' fill='none' stroke='%230a2e61' stroke-opacity='.32' stroke-width='1'/%3E%3C/svg%3E");background-color:transparent;background-repeat:no-repeat;background-size:100% 100%;transform:rotate(-5deg);transition:width .52s var(--ease)}
.portal:hover:after,.portal:focus-visible:after,.portal.is-active:after{width:54%}
.portal-education:after{left:auto;right:78%;transform:scaleX(-1) rotate(-3deg)}
.portal-education:hover:after,.portal-education:focus-visible:after,.portal-education.is-active:after{width:125%}
.portal-dot{width:12px;height:14px;background:radial-gradient(circle at 35% 30%,#ffb099 0 13%,var(--coral) 15% 68%,#bd493c 100%);border-radius:42% 45% 52% 50%;box-shadow:7px 2px 0 -1px #e66f58;transform:rotate(-9deg)}
.portal-dot:before{content:"";position:absolute;width:9px;height:6px;left:8px;top:-6px;background:var(--green);border-radius:90% 0 90% 0;transform:rotate(-24deg)}
.portal-dot:after{content:"";position:absolute;width:2px;height:6px;left:6px;top:-4px;background:var(--navy);border-radius:2px;transform:rotate(8deg)}
.portal:hover .portal-dot,.portal:focus-visible .portal-dot{transform:scale(1.12) rotate(7deg)}

@media(hover:hover) and (pointer:fine){html,body,a,button,[role="button"]{cursor:none!important}}
.bird-companion{width:58px;height:46px;transition:opacity .22s}

@media(max-width:900px){.hero-foreground{left:-8%;width:116%;bottom:-1%}.hero-person,.hero-person-wave,.hero-person-turn,.hero-person-wave-alt{left:34%;width:30vw;height:27vh}.hero-perched-bird{left:70%;top:31%;width:9vw}.intro:after{inset:1% -8% 0 5%}}
@media(max-width:620px){.hero-foreground{left:-18%;width:136%;bottom:0}.hero-person,.hero-person-wave,.hero-person-turn,.hero-person-wave-alt{left:28%;width:44vw;height:25vh}.hero-perched-bird{left:72%;top:34%;width:13vw}}

/* ==========================================================
   Homepage composition refinement
   ========================================================== */
.hero-tree{z-index:2}
.hero-foreground{z-index:5;bottom:-12%;width:106%;height:auto;object-fit:contain}
.hero-person{z-index:8}
.hero-copy{z-index:12}
.hero-copy h1{line-height:.82}
.hero-copy h1 span{display:block;margin-left:1em;margin-top:.04em}

.hero-person-turn,.hero-person-wave-alt{display:none}
.hero-person-seated{opacity:1;transition:opacity .2s ease}
.hero-person-wave{left:40.7%;bottom:2%;width:min(26vw,360px);height:min(32vh,305px);opacity:0;transition:opacity .24s ease;transform:none}
.hero.character-waving .hero-person-seated{opacity:0;animation:none}
.hero.character-waving .hero-person-wave{opacity:1;animation:none}
.about-dialogue{left:29%;bottom:20%;width:230px}

.portal .annotation,.portal-about .annotation{position:absolute;right:auto;top:auto}
.portal-projects .annotation{left:75%;top:-22%}
.portal-education .annotation{left:-55%;top:120%}
.portal-skills .annotation{left:82%;top:20%}
.portal-experience .annotation{left:80%;top:42%}
.portal-about .annotation{display:none}
.portal-education:after{left:-55%;right:auto;top:48%;height:145px;transform:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 145'%3E%3Cpath d='M176 8 C145 13 139 49 107 61 S75 102 42 111 S19 126 4 135' fill='none' stroke='%230a2e61' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M176 11 C147 17 141 52 109 64' fill='none' stroke='%230a2e61' stroke-opacity='.3' stroke-width='1'/%3E%3C/svg%3E")}
.portal-education:hover:after,.portal-education:focus-visible:after,.portal-education.is-active:after{width:80%}

@media(max-width:900px){.hero-foreground{bottom:-10%}.hero-person-wave{left:33%;width:33vw;height:30vh}.about-dialogue{left:20%;bottom:23%}}
@media(max-width:620px){.hero-foreground{bottom:-6%}.hero-person-wave{left:26%;width:48vw;height:28vh}}

/* ==========================================================
   Branch-label clarity and final intro flight
   ========================================================== */
.portal .annotation,.portal-about .annotation{color:var(--navy);text-shadow:none}
.portal .annotation strong,.portal .annotation small{color:var(--navy);text-shadow:none}

.portal-projects:after,.portal-skills:after,.portal-experience:after{left:20%;top:50%;height:42px;transform:rotate(-4deg)}
.portal-projects:hover:after,.portal-projects:focus-visible:after,.portal-projects.is-active:after{width:55%}
.portal-skills:hover:after,.portal-skills:focus-visible:after,.portal-skills.is-active:after{width:65%}
.portal-experience:hover:after,.portal-experience:focus-visible:after,.portal-experience.is-active:after{width:62%}

.portal-education .annotation{left:6%;top:170%}
.portal-education:after{left:0;right:auto;top:48%;height:220px;transform:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 220'%3E%3Cpath d='M70 5 C54 38 68 74 45 105 S39 159 18 190 S10 207 4 215' fill='none' stroke='%230a2e61' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M67 7 C52 40 64 73 43 103' fill='none' stroke='%230a2e61' stroke-opacity='.28' stroke-width='1'/%3E%3C/svg%3E")}
.portal-education:hover:after,.portal-education:focus-visible:after,.portal-education.is-active:after{width:30%}

/* ==========================================================
   Simplified information architecture + botanical navigation
   ========================================================== */
.home-link,.nav-menu{font-family:var(--hand);color:var(--navy)}
.home-link{gap:9px;font-size:19px;font-weight:700;letter-spacing:.01em}
.nav-menu{gap:27px;font-size:18px;font-weight:700;letter-spacing:.012em}
.nav-menu a{padding:7px 1px}
.nav-leaf-mark{width:32px;height:28px}
.nav-leaf-mark path:first-child{fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round}
.nav-leaf-mark path:not(:first-child){fill:var(--green);stroke:var(--navy);stroke-width:.8;stroke-linejoin:round}

.portal-skills{left:39%;top:41%;width:20%;height:22%}
.portal-skills .portal-dot{left:18%;top:48%}
.portal-skills .annotation{left:-8%;top:92%}
.portal-skills:after{left:-8%;right:auto;top:48%;width:0;height:100px;transform:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 100'%3E%3Cpath d='M74 5 C61 24 69 42 49 55 S38 77 5 94' fill='none' stroke='%230a2e61' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E")}
.portal-skills:hover:after,.portal-skills:focus-visible:after,.portal-skills.is-active:after{width:31%}

.portal-experience .portal-dot{left:72%;top:48%}
.portal-experience:after{left:72%;top:50%;transform:rotate(-3deg)}
.portal-experience:hover:after,.portal-experience:focus-visible:after,.portal-experience.is-active:after{width:16%}
.portal-experience .annotation{left:80%;top:42%}

.annotation strong{position:relative;display:inline-block}
.annotation strong:before{content:"";position:absolute;left:calc(100% + 9px);top:-5px;width:31px;height:27px;background-position:center;background-repeat:no-repeat;background-size:contain;transform:rotate(-5deg)}
.portal-projects .annotation strong:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 34'%3E%3Cpath d='M5 27 C2 20 8 17 12 17 C7 12 11 6 17 9 C18 3 26 3 27 10 C33 6 38 12 34 17 C39 20 35 27 29 26 C25 33 14 33 12 26Z' fill='%23246454'/%3E%3Cpath d='M9 29 C17 22 23 17 31 11' fill='none' stroke='%230a2e61' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E")}
.portal-experience .annotation strong:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 34'%3E%3Cpath d='M5 27 C8 10 20 3 35 7 C34 23 21 32 5 27Z' fill='%233b725b'/%3E%3Cpath d='M4 30 C13 20 21 14 32 9' fill='none' stroke='%230a2e61' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E")}
.portal-skills .annotation strong:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 34'%3E%3Cpath d='M4 26 C11 10 23 7 36 4 C31 18 22 30 4 26Z' fill='%232f6955'/%3E%3Cpath d='M3 29 C13 21 22 14 34 7' fill='none' stroke='%230a2e61' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M16 20 L12 14 M23 15 L21 10' fill='none' stroke='%230a2e61' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E")}

.about{min-height:1150px;align-items:flex-start;padding-top:140px;padding-bottom:110px}
.about-person{position:sticky;top:140px;margin-top:90px}
.about-copy{width:min(620px,50vw)}
.about-education{margin:36px 0 28px;padding-top:24px;border-top:1px solid rgba(10,46,97,.16)}
.about-education>h3{font:700 38px/1 var(--hand);color:var(--navy);margin:0 0 18px;display:flex;align-items:center;gap:10px}
.about-education>h3:after{content:"";width:34px;height:27px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 34'%3E%3Cpath d='M4 27 C10 9 25 3 38 8 C34 25 19 32 4 27Z' fill='%23246454'/%3E%3Cpath d='M4 30 C14 20 22 15 35 10' fill='none' stroke='%230a2e61' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat}
.about .education-notes{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:0}
.about .edu-note{max-width:none;padding-left:0}
.about .edu-note:nth-child(2){margin-top:0}
.about .note-leaf{display:none}
.about .edu-note h3{font-size:28px}
.about .edu-note .degree{font-size:13px;line-height:1.5;margin:7px 0}
.about .edu-note ul{font-size:12px;line-height:1.55;margin:8px 0 0}
.about-learning-path{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:22px;color:var(--navy);font:600 17px var(--hand)}
.about-learning-path i{font-style:normal;color:var(--coral)}

@media(max-width:900px){.nav-menu{font-size:18px}.about{min-height:auto}.about-person{position:relative;top:auto;margin-top:0}.about-copy{width:50vw}.about .education-notes{grid-template-columns:1fr}.portal-skills{left:39%;top:41%}}
@media(max-width:620px){.about-copy{width:100%}.about .education-notes{grid-template-columns:1fr}.about-learning-path{font-size:16px}}

/* ==========================================================
   Continuous illustrated scroll world
   ========================================================== */
body:before{opacity:.2;background-image:radial-gradient(circle at 18% 22%,rgba(72,54,32,.08) 0 .6px,transparent .8px),radial-gradient(circle at 73% 61%,rgba(72,54,32,.055) 0 .5px,transparent .75px);background-size:19px 23px,27px 31px;mix-blend-mode:multiply}

.hero{height:190vh;min-height:0;overflow:visible}
.hero-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--paper);isolation:isolate}
.hero-stage .hero-world,.hero-stage .tree-portals{position:absolute;inset:0}
.hero-bg,.hero-tree,.hero-foreground,.hero-person,.hero-copy,.tree-portals,.scroll-cue{will-change:transform,opacity}
.hero-transition-leaves{position:absolute;inset:0;z-index:24;pointer-events:none}
.hero-transition-leaves i{position:absolute;width:34px;height:27px;left:63%;top:29%;opacity:0;background:var(--green);border-radius:75% 12% 72% 18%;transform-origin:20% 70%;filter:drop-shadow(1px 1px 0 rgba(10,46,97,.32));will-change:transform,opacity}
.hero-transition-leaves i:after{content:"";position:absolute;left:4px;right:4px;top:13px;height:1.5px;background:var(--navy);transform:rotate(-24deg);transform-origin:left}
.hero-transition-leaves i:nth-child(2){left:69%;top:37%;width:29px;height:23px;border-radius:12% 78% 18% 75%;background:#39735d}
.hero-transition-leaves i:nth-child(3){left:56%;top:44%;width:25px;height:31px;border-radius:78% 20% 72% 24%;background:#2f6955}
@keyframes personQuietBreath{50%{transform:translateY(-2px) rotate(.18deg)}}
.hero-person-seated{animation:personQuietBreath 7.5s ease-in-out infinite}

.journey-section{background:var(--paper2);isolation:isolate}
.journey-section:before{z-index:0;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='180' viewBox='0 0 640 180'%3E%3Cg fill='none' stroke='%2378aee0' stroke-opacity='.16' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M38 91 C73 58 111 75 125 91 C152 58 207 58 232 91 C267 70 311 82 326 106 C267 112 202 111 143 108 C97 106 58 105 26 106'/%3E%3Cpath d='M391 55 C419 31 448 43 462 56 C482 31 522 34 538 60 C566 49 598 61 608 79 C555 82 502 80 450 78 C424 77 404 73 384 72'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-size:min(50vw,640px) auto;background-position:4vw 7%;opacity:.6;pointer-events:none}
.experience:before{background-position:88% 10%;transform:scaleX(-1)}
.skills:before{background-position:5% 16%;opacity:.42}
.about:before{background-position:91% 9%;opacity:.36}
.contact:before{background-position:8% 14%;opacity:.28}

.project,.experience-entry{background:transparent;padding:0}
.skill-group{z-index:4;padding:22px 26px;background:rgba(247,240,226,.92);clip-path:polygon(2% 5%,97% 0,100% 47%,96% 96%,7% 100%,0 54%);filter:drop-shadow(3px 4px 0 rgba(10,46,97,.07))}
.project-visual{box-shadow:5px 6px 0 rgba(22,75,146,.08)}
.project-branch,.experience-trunk,.skill-branches{will-change:clip-path,opacity,transform}

.section-bridge{--draw:0;position:absolute;z-index:3;overflow:visible;pointer-events:none}
.section-bridge path{fill:none;stroke:var(--navy);stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--draw));filter:drop-shadow(2px 1px 0 rgba(237,115,92,.26));vector-effect:non-scaling-stroke}
.section-bridge path:nth-child(even){stroke-width:3;stroke:rgba(22,75,146,.55);stroke-dashoffset:calc(1 - var(--draw))}
.bridge-projects-experience{width:220px;height:300px;left:calc(50% - 110px);bottom:-170px}
.bridge-experience-skills{width:min(54vw,600px);height:260px;left:23%;bottom:-140px}

.projects{padding-top:105px;padding-bottom:190px}
.experience{padding-top:150px;padding-bottom:170px}
.skills{padding-top:150px;padding-bottom:160px}
.skills-about-leaves{position:absolute;left:0;right:0;bottom:20px;height:170px;pointer-events:none}
.skills-about-leaves i{position:absolute;width:42px;height:31px;background:var(--green);border-radius:76% 14% 73% 18%;opacity:.6;transform:rotate(-18deg)}
.skills-about-leaves i:nth-child(1){left:9%;bottom:22px}.skills-about-leaves i:nth-child(2){left:25%;bottom:95px;width:30px;height:24px;transform:rotate(23deg)}.skills-about-leaves i:nth-child(3){right:24%;bottom:88px;width:34px;height:27px;transform:rotate(-31deg)}.skills-about-leaves i:nth-child(4){right:8%;bottom:18px;transform:rotate(18deg)}

.about{background:var(--paper2)}
.about-person{will-change:clip-path,opacity,transform}
.contact{background:var(--paper2)}
.contact:after{content:"";position:absolute;z-index:1;right:-40px;bottom:8%;width:min(38vw,470px);height:180px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 190'%3E%3Cg fill='none' stroke='%230a2e61' stroke-linecap='round'%3E%3Cpath d='M520 151 C415 121 340 132 264 99 C196 70 121 83 4 30' stroke-width='13'/%3E%3Cpath d='M365 118 C326 78 293 66 246 53' stroke-width='6'/%3E%3Cpath d='M246 53 C222 42 198 36 172 35' stroke-width='3'/%3E%3C/g%3E%3Cg fill='%23246454'%3E%3Cpath d='M188 38 C163 14 133 18 125 43 C151 58 173 54 188 38Z'/%3E%3Cpath d='M257 56 C267 27 297 20 316 39 C301 64 278 70 257 56Z'/%3E%3Cpath d='M328 91 C347 63 380 67 388 92 C367 111 347 110 328 91Z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;opacity:.78;pointer-events:none}
.contact-copy,.contact-bird,.back-tree,.copyright{z-index:2}
.contact-bird{width:min(14vw,170px);right:13%;bottom:22%;opacity:0;will-change:transform,opacity}

@media(max-width:900px){.hero{height:auto;min-height:100svh}.hero-stage{position:relative;height:100svh}.hero-transition-leaves,.section-bridge,.skills-about-leaves{display:none}.journey-section:before{background-size:78vw auto}.project-branch,.experience-trunk,.skill-branches{clip-path:none!important;opacity:.58!important}.about-person{clip-path:none!important;opacity:1!important}.contact-bird{opacity:1!important}.about-person{position:relative}.about{padding-bottom:100px}}
@media(prefers-reduced-motion:reduce){.hero{height:auto;min-height:100svh}.hero-stage{position:relative;height:100svh}.hero-transition-leaves,.section-bridge{display:none}.project-branch,.experience-trunk,.skill-branches,.about-person,.contact-bird{clip-path:none!important;opacity:1!important;translate:none!important}}

/* ==========================================================
   Organic scroll revision — flock, falling leaves, branch growth
   ========================================================== */
@property --intro-open{syntax:"<percentage>";inherits:false;initial-value:0%}

.intro{background:transparent;transition:opacity .7s var(--ease),visibility .7s}
.intro:before,.intro:after,.intro-bird-final{display:none!important}
.intro-curtain{--intro-open:0%;position:absolute;z-index:0;inset:0;background-color:var(--paper);background-image:radial-gradient(circle at 20% 28%,rgba(72,54,32,.05) 0 .7px,transparent .9px),radial-gradient(circle at 76% 64%,rgba(72,54,32,.04) 0 .6px,transparent .85px);background-size:21px 24px,29px 32px;-webkit-mask-image:radial-gradient(circle at 50% 49%,transparent 0 var(--intro-open),#000 calc(var(--intro-open) + 9%));mask-image:radial-gradient(circle at 50% 49%,transparent 0 var(--intro-open),#000 calc(var(--intro-open) + 9%));animation:introCurtainOpen 2.95s 3.05s cubic-bezier(.35,.02,.18,1) forwards}
.intro-flock{z-index:2}.intro p{z-index:3;top:63%;animation:introWordsGather 5.6s .2s both}.skip-intro{z-index:5}
.intro-bird{width:clamp(52px,6.8vw,112px);opacity:0;animation:flockGatherScatter 5.9s var(--delay) cubic-bezier(.32,.02,.2,1) both;filter:none}
body.intro-playing main{animation:homeRevealFromCenter 3s 3.05s cubic-bezier(.35,.02,.18,1) both}
@keyframes flockGatherScatter{0%{transform:translate3d(0,0,0) scale(.46);opacity:0}9%{opacity:.88}52%{transform:translate3d(var(--gx),var(--gy),0) scale(.68);opacity:.92}64%{transform:translate3d(var(--gx),var(--gy),0) scale(.72);opacity:.95}100%{transform:translate3d(var(--sx),var(--sy),0) scale(.38);opacity:0}}
@keyframes introCurtainOpen{0%,8%{--intro-open:0%}100%{--intro-open:92%}}
@keyframes introWordsGather{0%,17%{opacity:0;transform:translate(-50%,-44%)}35%,55%{opacity:1;transform:translate(-50%,-50%)}72%,100%{opacity:0;transform:translate(-50%,-54%)}}
@keyframes homeRevealFromCenter{0%,8%{opacity:0;filter:blur(2px)}100%{opacity:1;filter:none}}

main{position:relative}
.hero{height:145vh}
.hero-stage{--hero-wash:0%;transform-origin:50% 36%;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - var(--hero-wash)),transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - var(--hero-wash)),transparent 100%)}
.hero-world,.hero-copy,.tree-portals,.scroll-cue{opacity:1}

.scroll-leaf-layer{position:absolute;z-index:22;left:0;top:0;width:100%;height:230vh;overflow:hidden;pointer-events:none}
.scroll-leaf-layer i,.skills-about-leaves i{position:absolute;display:block;width:58px;height:54px;background-image:url("assets/illustrations/leaves-sheet.webp");background-size:400% 300%;background-repeat:no-repeat;opacity:0;filter:drop-shadow(1px 2px 0 rgba(10,46,97,.13));will-change:transform,opacity}
.scroll-leaf-layer i:nth-child(1){left:18%;top:54vh;background-position:0 0}
.scroll-leaf-layer i:nth-child(2){left:36%;top:47vh;width:47px;height:51px;background-position:33.333% 0}
.scroll-leaf-layer i:nth-child(3){left:55%;top:39vh;width:52px;height:52px;background-position:66.666% 0}
.scroll-leaf-layer i:nth-child(4){left:69%;top:48vh;width:45px;height:55px;background-position:100% 0}
.scroll-leaf-layer i:nth-child(5){left:78%;top:33vh;width:56px;height:48px;background-position:0 50%}
.scroll-leaf-layer i:nth-child(6){left:47%;top:57vh;width:48px;height:58px;background-position:33.333% 50%}

.nav-leaf-mark{display:block;width:36px;height:31px;background:url("assets/illustrations/leaves-sheet.webp") 0 0/400% 300% no-repeat;transform:rotate(-15deg);filter:drop-shadow(1px 1px 0 rgba(10,46,97,.2))}
.home-link{gap:8px}

/* Homepage fruit anchors sit on real branches; labels remain on bare paper. */
.portal{overflow:visible}
.portal:focus-visible{outline:none}
.portal:focus-visible .portal-dot{box-shadow:0 0 0 3px rgba(247,240,226,.95),0 0 0 5px var(--coral),7px 2px 0 -1px #e66f58}
.portal-projects{left:63%;top:15%;width:27%;height:23%}
.portal-projects .portal-dot{left:8%;top:49%}
.portal-projects .annotation{left:45%;top:2%}
.portal-projects:after{left:19%;top:36%;width:23%;height:47%;transform:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 70'%3E%3Cpath d='M4 52 C34 52 48 20 102 16' fill='none' stroke='%230a2e61' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M8 55 C38 54 52 24 99 20' fill='none' stroke='%230a2e61' stroke-opacity='.24' stroke-width='1'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.portal-experience{left:62%;top:44%;width:30%;height:22%}
.portal-experience .portal-dot{left:70%;top:31%}
.portal-experience .annotation{left:20%;top:58%}
.portal-experience:after{left:41%;top:34%;width:26%;height:29%;transform:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 55'%3E%3Cpath d='M6 46 C32 19 62 12 102 9' fill='none' stroke='%230a2e61' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.portal-skills{left:36%;top:29%;width:27%;height:30%}
.portal-skills .portal-dot{left:28%;top:24%}
.portal-skills .annotation{left:-4%;top:69%}
.portal-skills:after{left:10%;top:32%;width:24%;height:34%;transform:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 80'%3E%3Cpath d='M76 5 C73 32 54 40 35 51 C22 59 16 67 7 75' fill='none' stroke='%230a2e61' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.portal-projects:after,.portal-experience:after,.portal-skills:after{opacity:0;clip-path:inset(0 100% 0 0);transition:opacity .2s,clip-path .55s var(--ease)}
.portal-projects:hover:after,.portal-projects:focus-visible:after,.portal-projects.is-active:after,.portal-experience:hover:after,.portal-experience:focus-visible:after,.portal-experience.is-active:after,.portal-skills:hover:after,.portal-skills:focus-visible:after,.portal-skills.is-active:after{width:26%;opacity:1;clip-path:inset(0 0 0 0)}
.portal .annotation{background:transparent!important;padding:0!important;text-shadow:none!important}
.annotation strong:before{left:-41px!important;right:auto;top:-4px;width:34px;height:31px;background-image:url("assets/illustrations/leaves-sheet.webp")!important;background-size:400% 300%!important;background-repeat:no-repeat!important}
.portal-projects .annotation strong:before{background-position:0 0!important;transform:rotate(-12deg)}
.portal-experience .annotation strong:before{background-position:33.333% 0!important;transform:rotate(8deg)}
.portal-skills .annotation strong:before{background-position:100% 0!important;transform:rotate(-8deg)}
.portal .annotation strong:after{margin-top:7px}

/* Later chapters: paper, quiet branch backgrounds, and readable content blocks. */
.journey-section:before{background:none!important;opacity:0!important;transform:none!important}
.section-bridge{display:none!important}
.project-branch,.skill-branches{transform-origin:50% 50%;opacity:0;filter:saturate(.82)}
.experience-trunk{transform-origin:50% 0;opacity:0;filter:saturate(.82)}
.projects{padding-top:92px;padding-bottom:120px}
.experience{padding-top:112px;padding-bottom:120px}
.skills{padding-top:88px;padding-bottom:110px}
.section-heading{margin-bottom:62px}
.project,.experience-entry,.skill-group{z-index:5;padding:18px 20px;background:rgba(247,240,226,.91);clip-path:polygon(1% 5%,98% 0,100% 48%,97% 96%,5% 100%,0 52%);filter:drop-shadow(3px 4px 0 rgba(10,46,97,.055))}
.project-branch{z-index:1}.experience-trunk{z-index:1}.skill-branches{z-index:1}
.project-list,.experience-list,.skill-groups{z-index:4}
.skills-about-leaves{z-index:2}
.skills-about-leaves i{opacity:.55;background-color:transparent;border-radius:0}
.skills-about-leaves i:nth-child(1){background-position:0 0}.skills-about-leaves i:nth-child(2){background-position:33.333% 0}.skills-about-leaves i:nth-child(3){background-position:66.666% 0}.skills-about-leaves i:nth-child(4){background-position:100% 0}
.about-education>h3:after{width:39px;height:34px;background-image:url("assets/illustrations/leaves-sheet.webp");background-size:400% 300%;background-position:66.666% 0;transform:rotate(8deg)}

.about{min-height:1120px;padding-bottom:130px}
.about-footer{position:absolute;left:max(28px,calc((100vw - 1320px)/2));right:max(28px,calc((100vw - 1320px)/2));bottom:28px;display:flex;justify-content:space-between;align-items:center;color:var(--navy);font:700 17px var(--hand)}
.about-footer a{border-bottom:2px solid var(--coral)}
.about-footer b{font-weight:700}

@media(max-width:900px){.hero{height:100svh}.hero-stage{transform:none!important;-webkit-mask-image:none;mask-image:none}.scroll-leaf-layer{display:none}.project-branch,.experience-trunk,.skill-branches{transform:none!important;filter:saturate(.82)!important}.portal-projects,.portal-experience,.portal-skills{display:none}.about-footer{position:relative;left:auto;right:auto;bottom:auto;width:100%;padding:50px 20px 0}.about{padding-bottom:55px}}
@media(prefers-reduced-motion:reduce){.intro{display:none}.hero-stage{opacity:1!important;transform:none!important;-webkit-mask-image:none;mask-image:none}.scroll-leaf-layer{display:none}.project-branch,.experience-trunk,.skill-branches{transform:none!important;filter:saturate(.82)!important}}

/* ==========================================================
   Motion polish — circular flock + structurally stable growth
   ========================================================== */
.intro p{display:none!important}
.intro-bird{animation-duration:6.25s;animation-timing-function:cubic-bezier(.42,.02,.2,1)}
.intro-curtain{animation-delay:4.18s;animation-duration:2.7s}
body.intro-playing main{animation-delay:4.18s;animation-duration:2.7s}

/* Labels sit directly on the open paper; the leaf follows the side of the tree. */
.portal .annotation strong,.portal .annotation small{
  color:var(--navy);
  text-shadow:0 0 6px var(--paper),0 0 13px var(--paper),1px 1px 0 var(--paper);
}
.portal-projects .annotation{left:50%;top:-2%}
.portal-experience .annotation{left:63%;top:88%}
.portal-skills .annotation{left:-10%;top:98%}
.portal-projects .annotation strong:before,
.portal-experience .annotation strong:before{left:auto!important;right:-43px!important}
.portal-skills .annotation strong:before{left:-41px!important;right:auto!important}

.portal-experience:after{
  left:65%;top:38%;width:24%;height:45%;transform:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 110'%3E%3Cpath d='M18 6 C70 17 83 47 61 70 C45 87 24 94 3 103' fill='none' stroke='%230a2e61' stroke-width='2.3' stroke-linecap='round'/%3E%3Cpath d='M20 10 C63 20 73 46 57 65' fill='none' stroke='%230a2e61' stroke-opacity='.24' stroke-width='1'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.portal-experience:hover:after,.portal-experience:focus-visible:after,.portal-experience.is-active:after{width:24%}
.portal-skills:after{
  left:-8%;top:33%;width:37%;height:57%;transform:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 110'%3E%3Cpath d='M76 6 C72 30 57 43 52 60 C47 78 28 88 7 103' fill='none' stroke='%230a2e61' stroke-width='2.3' stroke-linecap='round'/%3E%3Cpath d='M79 8 C75 33 61 45 56 61' fill='none' stroke='%230a2e61' stroke-opacity='.24' stroke-width='1'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.portal-skills:hover:after,.portal-skills:focus-visible:after,.portal-skills.is-active:after{width:37%}

/* A fixed core keeps the trunk weight constant while side growth is revealed. */
.project-branch,.experience-trunk,.skill-branches{filter:none!important;transform:none!important}
.project-branch{opacity:0;transform:none!important}
.project-branch-core{z-index:1;clip-path:inset(0 44% 0 44%)}
.project-branch-grow{
  --project-spread:4%;z-index:2;clip-path:none!important;
  -webkit-mask-image:
    radial-gradient(ellipse var(--project-spread) 31% at 50% 25%,#000 62%,transparent 100%),
    radial-gradient(ellipse var(--project-spread) 32% at 50% 74%,#000 62%,transparent 100%);
  -webkit-mask-size:100% 34%;-webkit-mask-repeat:repeat-y;
  mask-image:
    radial-gradient(ellipse var(--project-spread) 31% at 50% 25%,#000 62%,transparent 100%),
    radial-gradient(ellipse var(--project-spread) 32% at 50% 74%,#000 62%,transparent 100%);
  mask-size:100% 34%;mask-repeat:repeat-y;
}
.project-list{z-index:5}

/* The Experience trunk grows down, but its content remains directly on the paper. */
.experience-entry{
  background:transparent!important;
  padding:0!important;
  clip-path:none!important;
  filter:none!important;
}
.experience-trunk{filter:none!important}

/* Skills branches enter from the left, right, and top edges toward the centre. */
.skill-branches{
  --skill-reach:4%;
  opacity:0;
  transform:none!important;
  filter:none!important;
  -webkit-mask-image:
    radial-gradient(ellipse var(--skill-reach) 60% at 0 48%,#000 68%,transparent 100%),
    radial-gradient(ellipse var(--skill-reach) 60% at 100% 48%,#000 68%,transparent 100%),
    radial-gradient(ellipse 48% var(--skill-reach) at 50% 0,#000 68%,transparent 100%);
  -webkit-mask-composite:source-over;
  mask-image:
    radial-gradient(ellipse var(--skill-reach) 60% at 0 48%,#000 68%,transparent 100%),
    radial-gradient(ellipse var(--skill-reach) 60% at 100% 48%,#000 68%,transparent 100%),
    radial-gradient(ellipse 48% var(--skill-reach) at 50% 0,#000 68%,transparent 100%);
  mask-composite:add;
}

/* Final spacing and continuity refinements. */
.scroll-leaf-layer i:nth-child(1){display:none}
.hero-stage{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - var(--hero-wash)),transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - var(--hero-wash)),transparent 100%)}

.projects{min-height:auto;padding-bottom:180px}
.project-list{height:auto;min-height:0;display:flex;flex-direction:column;gap:54px;margin-top:38px;padding-bottom:20px}
.project{position:relative!important;inset:auto!important;width:min(420px,38vw);min-height:0;overflow:visible;clip-path:none!important;border:0!important;border-radius:0!important;padding:8px 10px 14px!important;background:transparent!important;filter:none!important}
.project:nth-child(odd){align-self:flex-start;margin-left:1%}.project:nth-child(even){align-self:flex-end;margin-right:1%}
.project-number,.project p,.project-category{opacity:.82}
.project h3,.project-link{color:rgba(10,46,97,.9)}
.project-growth-tree{position:absolute;z-index:1;left:0;right:0;top:455px;width:100%;height:calc(100% - 535px);overflow:visible;pointer-events:none}
.project-trunk-shadow,.project-trunk-highlight,.grow-branch{fill:none;stroke-linecap:round;stroke-linejoin:round}
.project-trunk-shadow{stroke:#0a2e61;stroke-width:34;opacity:.9;filter:url(#project-rough)}
.project-trunk-highlight{stroke:#3f67a0;stroke-width:5;opacity:.46;stroke-dasharray:22 31}
.grow-branch{stroke:#0a2e61;stroke-width:17;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.branch-leaves{opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .18s linear}
.project-leaf-clusters{stroke:#174b56;stroke-width:3;paint-order:stroke fill}

.experience-entry:nth-child(1){top:130px}.experience-entry:nth-child(2){top:530px}

@media(max-width:900px){
  .project-branch-core{display:none}
  .project-branch-grow,.experience-trunk,.skill-branches{opacity:.82!important;clip-path:none!important;-webkit-mask-image:none!important;mask-image:none!important;filter:none!important}
}
@media(prefers-reduced-motion:reduce){
  .project-branch-core{display:none}
  .project-branch-grow,.experience-trunk,.skill-branches{opacity:.9!important;clip-path:none!important;-webkit-mask-image:none!important;mask-image:none!important;filter:none!important}
}

/* ==========================================================
   Home-to-about landscape and final contact chapter
   ========================================================== */
.about-home{
  position:relative;
  min-height:1180px;
  padding-top:150px;
  padding-bottom:150px;
  overflow:hidden;
  background:linear-gradient(to bottom,var(--paper) 0%,var(--paper2) 30%,var(--paper2) 100%);
}
.about-landscape{position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none}
.about-landscape img:first-child{
  position:absolute;left:0;right:0;bottom:0;width:100%;height:62%;object-fit:cover;object-position:center bottom;opacity:.16;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 38%,#000 73%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 38%,#000 73%,transparent 100%);
}
.about-landscape img:last-child{
  position:absolute;left:-3%;bottom:-9%;width:106%;height:31%;object-fit:fill;opacity:.2;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 54%,transparent 92%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 54%,transparent 92%);
}
.about-home .about-person{position:relative;z-index:3;width:min(39vw,500px);transform:translateY(65px);filter:drop-shadow(0 8px 12px rgba(10,46,97,.05))}
.about-home .about-copy{z-index:4;padding:28px 32px;background:rgba(251,246,235,.54);border-radius:44% 56% 48% 52%/4% 5% 4% 5%;box-shadow:0 0 42px 32px rgba(251,246,235,.52)}
.about-home .about-copy p{max-width:52ch}

.contact{
  position:relative;
  min-height:940px;
  padding:130px max(5vw,28px) 120px;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 106%,rgba(120,174,224,.12),transparent 44%),
    linear-gradient(to bottom,var(--paper2),var(--paper));
}
.contact:before{
  content:""!important;position:absolute!important;z-index:0!important;left:-5%!important;right:-5%!important;bottom:-4%!important;top:auto!important;height:33%!important;
  background:url("assets/illustrations/background.webp") center bottom/cover no-repeat!important;opacity:.1!important;transform:none!important;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 62%);mask-image:linear-gradient(to bottom,transparent,#000 62%);
}
.contact:after{right:-25px;bottom:14%;width:min(43vw,540px);height:220px;opacity:.78}
.contact-copy{position:relative;z-index:3;max-width:980px;margin:auto}
.contact-copy .section-number{display:block}
.contact h2{font-size:clamp(68px,9.8vw,142px);line-height:.78;margin:12px 0 38px}
.contact-copy>p:not(.eyebrow){margin:0 0 28px}
.contact-links{position:relative;z-index:3}
.contact-bird{z-index:4;width:min(13vw,160px);right:14%;bottom:31%;opacity:0;animation:none;will-change:transform,opacity}
.contact-footer{position:absolute;z-index:4;left:max(28px,calc((100vw - 1320px)/2));right:max(28px,calc((100vw - 1320px)/2));bottom:30px;display:flex;justify-content:space-between;align-items:center;color:var(--navy);font:700 17px var(--hand)}
.contact-footer a{border-bottom:2px solid var(--coral)}
.contact-footer b{font-weight:700}

@media(max-width:900px){
  .about-home{min-height:auto;padding-top:120px;padding-bottom:90px}
  .about-home .about-person{width:min(88vw,490px);transform:none}
  .about-home .about-copy{width:min(100%,560px);padding:22px 18px;background:rgba(251,246,235,.7);box-shadow:0 0 30px 24px rgba(251,246,235,.55)}
  .about-landscape img:first-child{height:48%}.about-landscape img:last-child{height:24%;bottom:-7%}
  .contact{min-height:760px;padding-top:115px}.contact:after{width:62vw;bottom:12%;opacity:.55}
  .contact-bird{right:7%;bottom:25%;width:120px}
}

@media(max-width:900px){
  .project-growth-tree{top:410px;height:calc(100% - 460px);opacity:.76}
  .grow-branch{stroke-width:12}
  .project-list{gap:64px}
  .project{width:min(88%,440px)}
}
@media(prefers-reduced-motion:reduce){
  .grow-branch{stroke-dashoffset:0!important}
  .branch-leaves{opacity:.88!important;transform:none!important}
}
@media(max-width:620px){
  .about-home{flex-direction:column;padding-inline:22px}.about-home .about-person{order:2}.about-home .about-copy{order:1}
  .contact{min-height:720px}.contact h2{font-size:62px}.contact-copy>p:not(.eyebrow){font-size:21px}.contact-bird{width:96px;right:-5px;bottom:22%}
  .contact-footer{left:20px;right:20px;font-size:15px}
}

/* ==========================================================
   Textured branch growth — preserve the original painted art
   ========================================================== */
.textured-growth{overflow:visible;opacity:.94!important;filter:none!important}
.texture-mask-trunk,.texture-mask-branches path{
  fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
}
.texture-mask-trunk{stroke-width:190;transition:stroke-dashoffset 2.8s linear}
.texture-mask-branches path{stroke-width:360;transition:stroke-dashoffset 1.25s linear}
.textured-growth.grow-active .texture-mask-trunk{stroke-dashoffset:0}
.textured-growth.grow-active .texture-mask-branches path{stroke-dashoffset:0}
.textured-growth.grow-active .texture-mask-branches path:nth-child(1){transition-delay:.65s}
.textured-growth.grow-active .texture-mask-branches path:nth-child(2){transition-delay:.9s}
.textured-growth.grow-active .texture-mask-branches path:nth-child(3){transition-delay:1.15s}
.textured-growth.grow-active .texture-mask-branches path:nth-child(4){transition-delay:1.4s}
.textured-growth.grow-active .texture-mask-branches path:nth-child(5){transition-delay:1.65s}
.textured-growth.grow-active .texture-mask-branches path:nth-child(6){transition-delay:1.9s}
.textured-growth.grow-active .texture-mask-branches path:nth-child(7){transition-delay:2.15s}
.textured-growth.grow-active .texture-mask-branches path:nth-child(8){transition-delay:2.4s}
.texture-growth-drawing{opacity:1}
.texture-growth-finish{opacity:0}
.textured-growth.grow-active .texture-growth-drawing{animation:textureDrawingOff .01s 3.05s forwards}
.textured-growth.grow-active .texture-growth-finish{animation:textureFinishOn .01s 3.05s forwards}
@keyframes textureDrawingOff{to{opacity:0}}
@keyframes textureFinishOn{to{opacity:1}}
.experience-trunk{opacity:.94!important;clip-path:none!important}

/* Compact chapter rhythm and soft, borderless transitions. */
.project-list{gap:30px;margin-top:24px}
.project{width:min(390px,36vw)}
.project-visual{aspect-ratio:16/9}
.projects{padding-bottom:115px}

.experience{min-height:auto;padding-bottom:32px}
.experience-world{height:780px}
.experience-entry:nth-child(1){top:105px}
.experience-entry:nth-child(2){top:455px}

.skills{min-height:900px;margin-top:-70px;padding-top:116px;padding-bottom:54px}
.skills .section-heading{margin-bottom:-18px}
.skills .section-heading h2{font-size:clamp(68px,8.5vw,118px)}
.skill-world,.skill-groups{height:520px}
.skill-branches{top:-148px}
.skill-group{width:280px;padding:16px 20px}
.skill-group:nth-child(1){left:7%;top:132px}
.skill-group:nth-child(2){left:40%;top:52px}
.skill-group:nth-child(3){right:7%;top:148px}
.skill-group h3{font-size:36px;margin-bottom:6px}
.skill-group li{font-size:12px;line-height:1.35;margin-bottom:4px}

.projects:after,.experience:after,.skills:after,.about-home:after{
  content:"";position:absolute;z-index:30;left:0;right:0;bottom:0;height:155px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(251,246,235,0),rgba(251,246,235,.68) 52%,var(--paper2) 100%);
}

/* Homepage annotations: fruit, freehand connector, then a small breathing gap. */
.portal-projects .portal-dot{left:3%;top:51%}
.portal-projects:after{
  left:12%;top:21%;width:38%;height:55%;transform:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 82'%3E%3Cpath d='M7 70 C31 72 47 55 60 38 C76 18 94 14 122 10' fill='none' stroke='%230a2e61' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M10 73 C36 71 49 58 64 39 C79 21 96 17 119 13' fill='none' stroke='%230a2e61' stroke-opacity='.2' stroke-width='.9'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.portal-projects:hover:after,.portal-projects:focus-visible:after,.portal-projects.is-active:after{width:38%}

.portal-skills{left:36%;top:38%;height:27%}
.portal-skills .portal-dot{left:30%;top:21%}
.portal-skills .annotation{left:-8%;top:72%}
.portal-skills:after{
  left:-2%;top:25%;width:35%;height:48%;transform:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 94'%3E%3Cpath d='M92 7 C78 20 83 36 67 49 C49 63 35 65 9 87' fill='none' stroke='%230a2e61' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M89 9 C77 23 80 36 64 50 C48 63 32 70 12 85' fill='none' stroke='%230a2e61' stroke-opacity='.2' stroke-width='.9'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.portal-skills:hover:after,.portal-skills:focus-visible:after,.portal-skills.is-active:after{width:35%}

.portal-experience:after{
  left:64%;top:34%;width:25%;height:55%;transform:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 98 120'%3E%3Cpath d='M14 7 C64 11 92 34 76 59 C64 77 35 70 42 91 C46 103 30 106 8 114' fill='none' stroke='%230a2e61' stroke-width='2.45' stroke-linecap='round'/%3E%3Cpath d='M17 10 C60 15 84 35 71 56 C59 73 35 72 38 88' fill='none' stroke='%230a2e61' stroke-opacity='.2' stroke-width='.9'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.portal-experience:hover:after,.portal-experience:focus-visible:after,.portal-experience.is-active:after{width:25%}

/* Contact uses the same painted blue-bark branch family as the journey pages. */
.contact:after{
  right:-10%!important;bottom:-19%!important;width:min(58vw,720px)!important;height:min(69vw,830px)!important;
  background:url("assets/illustrations/branch-fork.webp") center/contain no-repeat!important;
  opacity:.62!important;transform:rotate(67deg)!important;transform-origin:55% 55%;
}

@media(max-width:900px){
  .texture-mask-trunk,.texture-mask-branches path{stroke-dashoffset:0!important}
  .texture-growth-drawing{display:none}
  .texture-growth-finish{opacity:1!important}
  .contact:after{right:-31%!important;bottom:-12%!important;width:92vw!important;height:92vw!important;opacity:.4!important}
  .project-list{gap:48px}
  .skills{min-height:auto;padding-top:100px}.skills .section-heading{margin-bottom:20px}
  .skills{margin-top:0}
  .skill-world,.skill-groups{height:auto}.skill-branches{top:20px}
}
@media(prefers-reduced-motion:reduce){
  .texture-mask-trunk,.texture-mask-branches path{stroke-dashoffset:0!important;transition:none!important}
  .texture-growth-drawing{display:none}
  .texture-growth-finish{opacity:1!important;transition:none!important}
}

/* Final intro choreography: clustered entry, tight counter-clockwise ring, outward scatter. */
.intro-bird{
  width:clamp(48px,5.7vw,92px);
  animation-name:flockCounterclockwise!important;
  animation-duration:5.25s!important;
  animation-timing-function:cubic-bezier(.34,.02,.19,1)!important;
  animation-fill-mode:both!important;
}
.intro-curtain{animation-delay:3.62s!important;animation-duration:2.25s!important}
body.intro-playing main{animation-delay:3.62s!important;animation-duration:2.25s!important}
@keyframes flockCounterclockwise{
  0%{transform:translate3d(0,0,0) rotate(-35deg) scale(.45);opacity:0}
  6%{opacity:.9}
  36%{transform:translate3d(var(--ex),var(--ey),0) rotate(-35deg) scale(.54);opacity:.94}
  43%{transform:translate3d(var(--mx),var(--my),0) rotate(var(--face)) scale(.54);opacity:.96}
  49%,68%{transform:translate3d(var(--cx),var(--cy),0) rotate(var(--face)) scale(.54);opacity:.96}
  100%{transform:translate3d(var(--sx),var(--sy),0) rotate(var(--face)) scale(.4);opacity:0}
}

/* Skills keeps the existing painted tree; path-length masks provide the growth motion. */
.skill-growth-tree{
  position:absolute;left:0;top:-148px;width:100%;height:auto;overflow:visible;
  opacity:.94!important;filter:none!important;transform:none!important;
  -webkit-mask-image:none!important;mask-image:none!important;
}
.skill-growth-paths path{
  fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;
  stroke-width:310;stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 3s linear;
}
.skill-growth-paths path:nth-child(2){stroke-width:330;transition-delay:.28s}
.skill-growth-paths path:nth-child(3){stroke-width:300;transition-delay:.56s}
.skill-growth-tree.grow-active .skill-growth-paths path{stroke-dashoffset:0}
.skill-growth-drawing{opacity:1}
.skill-growth-finish{opacity:0}
.skill-growth-tree.grow-active .skill-growth-drawing{animation:skillDrawingOff .01s 3.62s forwards}
.skill-growth-tree.grow-active .skill-growth-finish{animation:skillFinishOn .01s 3.62s forwards}
@keyframes skillDrawingOff{to{opacity:0}}
@keyframes skillFinishOn{to{opacity:1}}
.skills-about-leaves{display:none!important}

@media(max-width:900px){
  .skill-growth-tree{position:absolute;left:-35%;top:20px;width:170%;opacity:.72!important}
  .skill-growth-paths path{stroke-dashoffset:0!important;transition:none!important}
  .skill-growth-drawing{display:none}.skill-growth-finish{opacity:1!important}
}
@media(prefers-reduced-motion:reduce){
  .skill-growth-paths path{stroke-dashoffset:0!important;transition:none!important}
  .skill-growth-drawing{display:none}.skill-growth-finish{opacity:1!important}
}

/* ==========================================================
   Final motion integration: one painted layer, compact projects
   ========================================================== */
.intro-bird{animation:none!important;width:58px!important;will-change:transform,opacity}
.intro-curtain{animation-delay:4.4s!important;animation-duration:2s!important}
body.intro-playing main{animation-delay:4.4s!important;animation-duration:2s!important}

/* Lift the illustrated scene slightly without changing its proportions. */
.hero-tree{top:-5.2%}
.hero-person,.hero-person-wave{bottom:4.1%}
.hero-foreground{bottom:-9.5%}

/* Fruit stays on the branch; each connector ends before the label. */
.portal-projects .portal-dot{left:1%;top:50%}
.portal-projects .annotation{left:48%;top:-1%}
.portal-projects:after{left:10%;top:23%;width:34%;height:55%}
.portal-projects:hover:after,.portal-projects:focus-visible:after,.portal-projects.is-active:after{width:34%}

.portal-experience{left:61%;top:40%;width:31%;height:24%}
.portal-experience .portal-dot{left:76%;top:39%}
.portal-experience .annotation{left:57%;top:-6%}
.portal-experience:after{
  left:40%;top:5%;width:38%;height:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 80'%3E%3Cpath d='M100 70 C84 59 91 43 69 35 C56 30 50 21 42 14' fill='none' stroke='%230a2e61' stroke-width='2.35' stroke-linecap='round'/%3E%3Cpath d='M97 68 C83 57 87 44 67 38 C54 33 49 25 44 17' fill='none' stroke='%230a2e61' stroke-opacity='.2' stroke-width='.9'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.portal-experience:hover:after,.portal-experience:focus-visible:after,.portal-experience.is-active:after{width:38%}

.portal-skills{left:36%;top:38%;width:28%;height:30%}
.portal-skills .portal-dot{left:35%;top:21%}
.portal-skills .annotation{left:-2%;top:78%}
.portal-skills:after{
  left:10%;top:28%;width:27%;height:47%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 95'%3E%3Cpath d='M91 7 C78 18 84 34 68 46 C53 57 43 63 34 74 C27 82 18 87 8 90' fill='none' stroke='%230a2e61' stroke-width='2.35' stroke-linecap='round'/%3E%3Cpath d='M88 10 C77 21 80 35 65 48 C50 59 43 66 36 74' fill='none' stroke='%230a2e61' stroke-opacity='.2' stroke-width='.9'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.portal-skills:hover:after,.portal-skills:focus-visible:after,.portal-skills.is-active:after{width:27%}

/* Procedural trees replace the old SVG/image layers, so there is no duplicate haze. */
.painted-tree{position:absolute!important;z-index:1!important;display:block;pointer-events:none;opacity:1!important;filter:none!important;transform:none!important;max-width:none!important}
.painted-projects{left:0!important;right:0!important;top:360px!important;width:100%!important;height:calc(100% - 420px)!important}
.painted-experience{left:0!important;top:-25px!important;width:100%!important;height:850px!important}
.painted-skills{left:0!important;top:55px!important;width:100%!important;height:620px!important}

/* A scalable two-column story is faster to scan and remains compact as projects grow. */
.projects{min-height:auto!important;padding:92px 0 120px!important}
.projects .section-heading{margin-bottom:34px!important}
.project-list{
  width:min(1040px,calc(100vw - 80px))!important;height:auto!important;min-height:0!important;
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:34px 118px!important;margin:0 auto!important;padding:18px 0 52px!important;
}
.project{
  position:relative!important;inset:auto!important;align-self:stretch!important;margin:0!important;
  width:auto!important;min-width:0!important;padding:20px 22px 22px!important;
  background:rgba(251,246,235,.91)!important;border:0!important;border-radius:0!important;
  clip-path:polygon(1% 3%,99% 0,100% 96%,3% 100%,0 48%)!important;
  filter:drop-shadow(3px 4px 0 rgba(10,46,97,.06))!important;overflow:visible!important;
}
.project:nth-child(even){transform:translateY(42px)}
.project h3{font-size:clamp(31px,3vw,44px);min-height:1.9em;margin-bottom:12px}
.project-visual{aspect-ratio:16/8.7!important;box-shadow:none!important;background:transparent}
.project p{margin:14px 0 7px;line-height:1.5}
.project-link{margin-top:10px}
.project[hidden]{display:none!important}
.projects-more{position:relative;z-index:5;display:block;margin:18px auto 34px;padding:7px 2px;border:0;border-bottom:3px solid var(--coral);background:transparent;color:var(--navy);font:700 23px var(--hand);cursor:pointer}

.experience{min-height:auto!important;padding-bottom:72px!important}
.experience-world{height:760px!important}
.experience-entry:nth-child(1){top:86px!important}.experience-entry:nth-child(2){top:430px!important}

.skills{min-height:auto!important;margin-top:-30px!important;padding:92px 0 64px!important}
.skills .section-heading{margin-bottom:-12px!important}
.skill-world,.skill-groups{height:560px!important}
.skill-group:nth-child(1){left:7%;top:165px}.skill-group:nth-child(2){left:40%;top:82px}.skill-group:nth-child(3){right:7%;top:182px}

/* Each chapter dissolves into the next rather than ending on a hard horizontal cut. */
.projects:after,.experience:after,.skills:after,.about-home:after{
  height:190px!important;z-index:2!important;
  background:linear-gradient(to bottom,rgba(251,246,235,0),rgba(251,246,235,.46) 52%,var(--paper2) 100%)!important;
}

@media(max-width:900px){
  .hero-tree{top:2%}.hero-person,.hero-person-wave{bottom:5%}.hero-foreground{bottom:-7%}
  .project-list{width:min(620px,calc(100vw - 38px))!important;grid-template-columns:1fr!important;gap:28px!important}
  .project:nth-child(even){transform:none}
  .painted-projects{top:410px!important;height:calc(100% - 450px)!important;opacity:.7!important}
  .painted-experience{top:0!important;height:1020px!important;opacity:.72!important}
  .painted-skills{left:-20%!important;top:0!important;width:140%!important;height:100%!important;opacity:.72!important}
  .skills{margin-top:0!important}.skill-world,.skill-groups{height:auto!important}
}

@media(max-width:620px){
  .intro-bird{width:50px!important}
  .project-list{padding-inline:4px!important}
  .project h3{min-height:0}
  .experience-world{height:auto!important;min-height:1080px!important}
  .skill-groups{display:flex!important;gap:34px!important;padding:70px 0 80px!important}
}

@media(prefers-reduced-motion:reduce){
  .painted-tree{opacity:.82!important}
}

/* ==========================================================
   Precision restore — preserve the established home composition
   ========================================================== */
@media(min-width:901px){
  .site-nav{padding-inline:max(28px,calc((100vw - 1320px)/2))}
  .home-link{font-size:19px!important}
  .nav-menu{gap:27px!important;font-size:18px!important}

  .hero-tree{
    left:20%!important;top:-7%!important;width:min(78vw,1220px)!important;height:110%!important;
    object-fit:contain!important;object-position:center bottom!important;
  }
  .hero-person,.hero-person-wave{
    left:39%!important;bottom:3.5%!important;width:min(24vw,360px)!important;height:auto!important;
    object-fit:contain!important;object-position:center bottom!important;
  }
  .hero-person-wave{left:38.3%!important;width:min(25vw,378px)!important}
  .hero-foreground{left:-4%!important;bottom:-3%!important;width:108%!important;height:31%!important}

  .portal-experience{left:62%!important;top:44%!important;width:30%!important;height:22%!important}
  .portal-experience .portal-dot{left:70%!important;top:31%!important}
  .portal-experience .annotation{left:60%!important;top:-8%!important}
  .portal-experience:after{
    left:39%!important;top:1%!important;width:29%!important;height:36%!important;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 72'%3E%3Cpath d='M104 65 C89 55 93 43 76 36 C61 30 53 19 45 8' fill='none' stroke='%230a2e61' stroke-width='2.35' stroke-linecap='round'/%3E%3Cpath d='M101 63 C87 53 90 44 74 38 C60 33 54 24 48 11' fill='none' stroke='%230a2e61' stroke-opacity='.2' stroke-width='.9'/%3E%3C/svg%3E") center/100% 100% no-repeat!important;
  }
  .portal-experience:hover:after,.portal-experience:focus-visible:after,.portal-experience.is-active:after{width:29%!important}

  .portal-skills{left:36%!important;top:38%!important;width:27%!important;height:27%!important}
  .portal-skills .portal-dot{left:30%!important;top:21%!important}
  .portal-skills .annotation{left:-8%!important;top:72%!important}
}

/* Keep the alternating project rhythm, with enough breathing room to scan. */
.project-list{row-gap:72px!important;column-gap:112px!important}
.project:nth-child(even){transform:translateY(58px)!important}

/* The generated paintings occupy their complete chapter canvas. */
.painted-projects{top:420px!important;height:calc(100% - 455px)!important}
.painted-experience{top:-20px!important;height:900px!important}
.painted-skills{left:-4%!important;top:38px!important;width:108%!important;height:650px!important}

/* Leaves are never clipped by an artificial section boundary. */
.scroll-leaf-layer{height:300vh!important;overflow:visible!important}

@media(max-width:900px){
  .project-list{row-gap:38px!important}
  .project:nth-child(even){transform:none!important}
}

/* ==========================================================
   Requested refinement 1–5 — preserve structure and artwork
   ========================================================== */
.intro-curtain{animation-delay:2.72s!important;animation-duration:2.12s!important}
body.intro-playing main{animation-delay:2.72s!important;animation-duration:2.12s!important}

/* Restore a confident, readable scale across the portfolio. */
.section-number{font-size:20px!important}
.eyebrow{font-size:clamp(21px,2vw,29px)!important}
.section-heading h2{font-size:clamp(82px,9vw,136px)!important}
.section-heading>p:last-child{max-width:560px!important;font-size:18px!important;line-height:1.68!important}
.about h2{font-size:clamp(72px,7.8vw,116px)!important}
.about-copy>p:not(.eyebrow){font-size:18px!important;line-height:1.75!important}
.about-education>h3{font-size:43px!important}
.edu-note h3{font-size:clamp(32px,2.7vw,43px)!important}
.edu-note .degree,.edu-note ul{font-size:16px!important}
.project-number{font-size:20px!important}
.project h3{font-size:clamp(36px,3.15vw,48px)!important}
.project p{font-size:17px!important}
.project-category{font-size:20px!important}
.project-link{font-size:23px!important}
.experience-entry time{font-size:25px!important}
.experience-entry h3{font-size:clamp(34px,3vw,46px)!important}
.experience-entry h4{font-size:15px!important}
.experience-entry p{font-size:17px!important}
.tags span{font-size:17px!important}
.skill-group h3{font-size:42px!important}
.skill-group li{font-size:15.5px!important;line-height:1.48!important}
.contact-copy>p:not(.eyebrow){font-size:27px!important}
.contact-links a{font-size:24px!important}
.about-dialogue{left:27%!important;bottom:23%!important;width:270px!important;padding:18px 22px!important}
.about-dialogue strong{font-size:28px!important}
.about-dialogue span{font-size:15px!important;line-height:1.5!important}

/* Fruit is again large enough to read as a deliberate interaction target. */
.portal-dot{
  width:18px!important;height:20px!important;margin:-3px 0 0 -3px!important;
  box-shadow:11px 3px 0 -1px #e66f58!important;
}
.portal-dot:before{width:12px!important;height:8px!important;left:12px!important;top:-8px!important}
.portal-dot:after{height:8px!important;left:9px!important;top:-6px!important}
.annotation{max-width:270px!important}
.annotation strong{font-size:clamp(38px,3vw,48px)!important}
.annotation small{font-size:19px!important;line-height:1.22!important;margin-top:10px!important}
.portal-projects:after,.portal-experience:after,.portal-skills:after{z-index:2!important}
.portal .annotation{z-index:3!important}
.portal .portal-dot{z-index:4!important}

@media(min-width:901px){
  .home-link{font-size:21px!important}
  .nav-menu{gap:30px!important;font-size:20px!important}

  /* The established home illustration stays intact; the whole scene is only
     nudged upward, while the waving variant is slightly smaller. */
  .hero-tree{top:-9.2%!important}
  .hero-person,.hero-person-seated,.hero-person-turn{bottom:5.2%!important}
  .hero-person-wave,.hero-person-wave-alt{
    left:39.2%!important;bottom:5.1%!important;width:min(22.5vw,340px)!important;
  }
  .hero-foreground{bottom:-1.2%!important}

  /* Each connector lives only in the negative space between its fruit and
     title. Both ends stop short, so neither the fruit nor the copy is crossed. */
  .portal-projects{left:63%!important;top:12.8%!important;width:27%!important;height:23%!important}
  .portal-projects .portal-dot{left:2%!important;top:50%!important}
  .portal-projects .annotation{left:52%!important;top:0!important}
  .portal-projects:after{
    left:13%!important;top:24%!important;width:35%!important;height:51%!important;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 72'%3E%3Cpath d='M5 56 C31 59 44 43 57 31 C69 20 84 15 112 14' fill='none' stroke='%230a2e61' stroke-width='2.35' stroke-linecap='round'/%3E%3Cpath d='M9 59 C35 59 47 45 60 34 C72 24 87 19 109 18' fill='none' stroke='%230a2e61' stroke-opacity='.18' stroke-width='.9' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat!important;
  }
  .portal-projects:hover:after,.portal-projects:focus-visible:after,.portal-projects.is-active:after{width:35%!important}

  .portal-experience{left:62%!important;top:41.6%!important;width:30%!important;height:23%!important}
  .portal-experience .portal-dot{left:70%!important;top:31%!important}
  .portal-experience .annotation{left:82%!important;top:-5%!important}
  .portal-experience:after{
    left:71%!important;top:1%!important;width:10%!important;height:29%!important;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 90'%3E%3Cpath d='M7 82 C30 74 18 52 37 40 C48 33 53 22 70 10' fill='none' stroke='%230a2e61' stroke-width='2.45' stroke-linecap='round'/%3E%3Cpath d='M11 84 C33 75 23 55 40 43 C51 36 56 25 68 14' fill='none' stroke='%230a2e61' stroke-opacity='.18' stroke-width='.9' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat!important;
  }
  .portal-experience:hover:after,.portal-experience:focus-visible:after,.portal-experience.is-active:after{width:10%!important}

  .portal-skills{left:36%!important;top:35.8%!important;width:28%!important;height:30%!important}
  .portal-skills .portal-dot{left:35%!important;top:21%!important}
  .portal-skills .annotation{left:-10%!important;top:74%!important}
  .portal-skills:after{
    left:5%!important;top:29%!important;width:28%!important;height:42%!important;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 92'%3E%3Cpath d='M97 7 C81 18 88 34 70 45 C56 54 47 61 38 70 C29 79 20 84 7 87' fill='none' stroke='%230a2e61' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M94 11 C80 21 84 36 68 48 C54 58 46 65 39 73' fill='none' stroke='%230a2e61' stroke-opacity='.18' stroke-width='.9' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat!important;
  }
  .portal-skills:hover:after,.portal-skills:focus-visible:after,.portal-skills.is-active:after{width:28%!important}
}

/* This layer spans the full Home → About journey; individual leaves are
   translated and faded by scroll progress in main.js, never by a timer. */
.scroll-leaf-layer{height:calc(145vh + 1250px)!important;overflow:visible!important}
.site-nav.scrolled{
  border-bottom:0!important;
  box-shadow:0 14px 24px -24px rgba(10,46,97,.42)!important;
}

@media(min-width:901px){
  /* Keep Experience fully inside the viewport while retaining its right-side
     placement. The short S-curve points back to the fruit without touching it. */
  .portal-experience .annotation{left:59%!important;top:-35%!important}
  .portal-experience:after{
    left:61%!important;top:-1%!important;width:10%!important;height:30%!important;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 90'%3E%3Cpath d='M80 82 C62 75 70 55 51 43 C38 35 30 22 8 11' fill='none' stroke='%230a2e61' stroke-width='2.45' stroke-linecap='round'/%3E%3Cpath d='M77 85 C59 76 66 58 48 46 C36 38 28 27 11 15' fill='none' stroke='%230a2e61' stroke-opacity='.18' stroke-width='.9' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat!important;
  }
  .portal-experience:hover:after,.portal-experience:focus-visible:after,.portal-experience.is-active:after{width:10%!important}

  /* Set the Skills fruit directly on the visible lower-left blue branch. */
  .portal-skills .portal-dot{left:35%!important;top:7%!important}
  .portal-skills:after{left:5%!important;top:17%!important;width:29%!important;height:53%!important}
  .portal-skills:hover:after,.portal-skills:focus-visible:after,.portal-skills.is-active:after{width:29%!important}
}

@media(max-width:900px){
  .home-link{font-size:19px!important}
  .nav-menu{font-size:18px!important}
  .section-heading h2,.about h2{font-size:clamp(66px,18vw,92px)!important}
  .section-heading>p:last-child,.about-copy>p:not(.eyebrow){font-size:16px!important}
  .project p,.experience-entry p{font-size:16px!important}
  .project-category,.project-link,.tags span{font-size:18px!important}
  .skill-group li{font-size:15px!important}
}

/* Supplied September 24 paintings: one uninterrupted trunk per chapter. */
.chapter-art{position:absolute;z-index:1;pointer-events:none;overflow:hidden;filter:none;opacity:1}
.chapter-art-projects{left:27%;top:320px;width:46%;height:calc(100% - 350px);mask-image:linear-gradient(transparent,#000 3%,#000 93%,transparent)}
.chapter-art-experience{left:33%;top:-40px;width:34%;height:calc(100% + 50px);mask-image:linear-gradient(transparent,#000 5%,#000 92%,transparent)}
.chapter-art-skills{left:0;top:-30px;width:100%;height:100%;mask-image:linear-gradient(transparent,#000 9%,#000 84%,transparent)}
.chapter-growth-stroke{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.6s cubic-bezier(.25,.45,.4,1) var(--growth-delay)}
.chapter-foliage-stroke{opacity:0;transition:stroke-dashoffset 2.8s ease-out var(--growth-delay),opacity 1.3s ease var(--growth-delay)}
.chapter-finish-mask{opacity:0;transition:opacity 1s 3.6s}
.is-growing .chapter-growth-stroke{stroke-dashoffset:0}
.is-growing .chapter-foliage-stroke,.is-growing .chapter-finish-mask{opacity:1}
.project-visual:has(.project-cover){aspect-ratio:4/3!important;height:auto!important;transform:none!important;border:0;background:transparent}
.project-cover{display:block;width:100%;height:auto;object-fit:contain}
.intro-curtain{animation-delay:var(--flock-reveal-delay,4.61s)!important;animation-duration:2.25s!important}
body.intro-playing main{animation-delay:var(--flock-reveal-delay,4.61s)!important;animation-duration:2.25s!important}
.intro-bird:nth-child(n){display:block}
/* Layout audit: keep the established artwork and reserve clear text space. */
.hero-copy{top:20%!important}
.hero-copy h1{paint-order:stroke fill; -webkit-text-stroke:5px var(--paper2);text-shadow:0 2px 10px var(--paper2)}
.hero-copy>p:last-child{margin-left:18%;font-size:clamp(19px,1.8vw,25px);line-height:1.2;text-shadow:0 0 5px var(--paper2),0 0 12px var(--paper2)}
.project{clip-path:none!important;overflow:visible!important}
.chapter-art{object-fit:contain}
.chapter-art-projects{object-fit:fill}
.chapter-art-skills{left:0!important;top:0!important;width:100%!important;height:100%!important;object-fit:fill;mask-image:none!important}
.skills:after{height:48px!important}
.skills .section-heading{margin-bottom:18px!important}
.skill-world,.skill-groups{height:clamp(520px,38vw,600px)!important}
.skill-groups{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,4vw,64px);align-items:start;padding-top:100px}
.skill-group:nth-child(n){position:relative!important;inset:auto!important;width:100%!important;margin:0;min-width:0;padding:22px!important}
.skill-group:nth-child(2){margin-top:-45px}
.skill-group:nth-child(3){margin-top:28px}
.skill-group li{font-size:clamp(15px,1.2vw,18px)!important;line-height:1.5}
.site-nav{background:linear-gradient(var(--paper2),rgba(251,246,235,.94) 68%,rgba(251,246,235,0));text-shadow:0 1px 5px var(--paper2)}
.hero-copy>p:last-child{width:max-content;max-width:290px}
.skills{padding-top:48px!important}
a:focus-visible,button:focus-visible{outline:2px dashed var(--navy);outline-offset:6px}
@media(min-width:901px){.hero.character-waving .about-dialogue,.about-dialogue{bottom:20%!important}}
@media(min-width:621px) and (max-width:900px){
  .skill-world,.skill-groups{height:610px!important}
  .skill-groups{gap:16px;padding-top:80px}
  .skill-group:nth-child(n){padding:16px!important}
  .skill-group h3{font-size:34px!important}
}
@media(max-width:620px){
  .hero-copy{top:17%!important}
  .hero-copy>p:last-child{font-size:19px;max-width:220px}
  .skill-world,.skill-groups{height:auto!important}
  .skill-groups{display:grid!important;grid-template-columns:1fr;padding:20px 18px 64px!important;gap:22px!important}
  .skill-group:nth-child(n){margin:0!important}
  .chapter-art-skills{object-fit:contain;object-position:center bottom}
}
@media(min-width:901px){
  .about-dialogue{left:auto!important;right:calc(60.8% + 22px)!important;bottom:12%!important;width:min(270px,25vw)!important}
}
@media(max-width:900px){
  .chapter-art-projects{left:10%;width:80%;opacity:.85}
  .chapter-art-experience{left:28%;width:44%}
  .chapter-art-skills{width:140%;left:-20%;height:100%}
}
@media(prefers-reduced-motion:reduce){
  .chapter-growth-stroke{stroke-dashoffset:0;transition:none}
  .chapter-foliage-stroke,.chapter-finish-mask{opacity:1;transition:none}
}

/* Narrow screens use reading order instead of desktop absolute coordinates. */
@media(max-width:900px){
  .experience-world{height:auto!important;min-height:0!important;padding:24px 0 64px}
  .experience-list{display:grid;gap:54px;position:relative;z-index:4}
  .experience-entry:nth-child(n){position:relative!important;inset:auto!important;width:78%!important;margin:0!important;padding:0!important;text-align:left;overflow-wrap:anywhere}
  .experience-entry:nth-child(n):after{display:none}
  .experience-entry .tags{justify-content:flex-start!important}
  .chapter-art-experience{left:70%;top:0;width:36%;height:100%;object-fit:contain;object-position:center top}
  .experience .section-heading{margin-bottom:24px!important}
}

/* ==========================================================================
   2026-10-19 · Continuous branch growth (tree-growth.js)
   ========================================================================== */
.growth-canvas,.growth-fallback{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.growth-fallback{opacity:0;transition:opacity 1.6s var(--ease)}
.growth-fallback.is-grown{opacity:1}

/* ==========================================================================
   2026-10-19 · Projects: one column of covers along a branch (projects.js)
   ========================================================================== */
.projects .section-heading{margin-bottom:clamp(20px,4vh,40px)!important}
.pd-defs{position:absolute;width:0;height:0;overflow:hidden}
.pd{position:relative;width:var(--page);margin:0 auto;--pd-cw:clamp(300px,27vw,400px)}
.pd-stage{position:relative}
.pd-rail{position:absolute;z-index:0;width:min(470px,40vw);transform:translateX(-50%);pointer-events:none;-webkit-mask-image:linear-gradient(transparent,#000 8%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 8%,#000 86%,transparent)}
.pd-column{position:absolute;inset:0;z-index:1;margin:0;padding:0;list-style:none}
.pd-slot{--lens:.5;--dim:3;position:absolute;left:0;top:0;width:0;height:0;transform:translate(var(--x,0px),var(--y,0px));transition:transform .45s cubic-bezier(.22,.8,.3,1)}

/* Covers */
.pd-cover{position:absolute;left:0;top:0;display:block;width:var(--pd-cw);padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transform-origin:50% 50%;transform:translate(-50%,-50%) rotate(calc(var(--tilt) * (1 - var(--lens)) * 2)) scale(var(--lens));transition:transform .45s cubic-bezier(.22,.8,.3,1)}
.pd-cover:focus-visible{outline:none}
.pd-cover:focus-visible .pd-card{outline:2px dashed var(--navy);outline-offset:5px}
.pd-card{position:relative;display:block;padding:8px 8px 26px;background:var(--paper2);border-radius:2px;box-shadow:0 0 0 1px rgba(10,46,97,.07),0 10px 20px -14px rgba(10,46,97,.5);transition:box-shadow .35s ease}
.pd-cover.is-active .pd-card{box-shadow:0 0 0 1px rgba(10,46,97,.08),0 26px 40px -18px rgba(10,46,97,.6)}
.pd-art{display:block;aspect-ratio:4/3;overflow:hidden;background:#e9e0cd;transition:opacity .35s ease,filter .35s ease}
.pd-art img,.pd-art svg{display:block;width:100%;height:100%;object-fit:cover}
/* Covers fade on their own paper with distance, never letting the branch show through. */
.pd-slot:not(.is-active) .pd-art{opacity:calc(.88 - var(--dim) * .1);filter:saturate(.65)}
.pd-slot:not(.is-active) .pd-cover:hover .pd-art{opacity:.95}
.pd-num{position:absolute;right:10px;bottom:3px;font:700 18px/1 var(--hand);color:var(--coral)}
.pd-tape{position:absolute;z-index:1;left:50%;top:-9px;width:64px;height:20px;background:rgba(237,115,92,.5);transform:translateX(-50%) rotate(-4deg);clip-path:polygon(3% 0,97% 4%,100% 30%,96% 52%,100% 76%,95% 100%,4% 96%,0 70%,4% 46%,0 22%)}

/* Number to the left of the active cover, details to its right. */
.pd-meta,.pd-infos{position:absolute;z-index:2;top:var(--label-y,0);transition:top .45s cubic-bezier(.22,.8,.3,1)}
.pd-meta{right:calc(100% - var(--label-left,0px) + clamp(22px,3vw,44px));margin:0;transform:translateY(-50%);text-align:right;color:var(--navy)}
.pd-meta span{display:block;font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pd-meta b{display:block;margin-top:4px;font:700 46px/1 var(--hand);color:var(--coral)}
.pd-meta small{display:block;font:600 16px var(--hand);color:var(--muted)}
.pd-infos{left:calc(var(--label-right,0px) + clamp(28px,3.4vw,54px));width:min(400px,calc(100% - var(--label-right,0px) - 60px));display:grid;transform:translateY(-50%)}
.pd-infos>.pd-info{grid-area:1/1;align-self:center}
.pd-info{opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .22s ease,transform .3s ease,visibility 0s .3s}
.pd-info.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .34s ease .1s,transform .4s var(--ease) .1s,visibility 0s}
.pd-info-num{display:none;margin:0;font:700 20px/1 var(--hand);color:var(--coral)}
.pd-info-num span{font-size:16px;color:var(--muted)}
.pd-info h3{margin:0;font:700 clamp(36px,3.3vw,52px)/.95 var(--hand);color:var(--navy);text-wrap:balance}
.pd-underline{display:block;width:min(220px,62%);height:14px;margin-top:2px;overflow:visible}
.pd-underline path{fill:none;stroke:var(--coral);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s .14s var(--ease)}
.pd-info.is-active .pd-underline path{stroke-dashoffset:0}
.pd-desc{margin:14px 0 10px;font-size:clamp(16px,1.2vw,18px);line-height:1.6;color:var(--ink)}
.pd-tags{margin:0;font:600 20px/1.3 var(--hand);color:var(--green)}
.pd-links{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:16px}
.pd-links a{font:700 22px/1.2 var(--hand);color:var(--navy);border-bottom:3px solid var(--coral)}
.pd-links a:hover{color:var(--blue)}
.pd-hint{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0 0;font:600 18px var(--hand);color:var(--muted)}
.pd-hint:before{content:"";width:42px;height:2px;background:var(--navy);opacity:.35;transform:rotate(-6deg)}

/* Phones and tablets: the column sits left, details to the right of the open cover. */
.pd-mode-scroll{--pd-cw:clamp(128px,37vw,250px)}
.pd-mode-scroll .pd-rail{width:min(360px,84vw)}
.pd-mode-scroll .pd-meta{display:none}
.pd-mode-scroll .pd-hint{justify-content:flex-start;margin:0 0 18px;font-size:16px}
.pd-mode-scroll .pd-info-num{display:block;margin-bottom:4px}
.pd-mode-scroll .pd-infos{left:calc(var(--label-right,0px) + 16px);width:calc(100% - var(--label-right,0px) - 22px)}
/* Leaves can sit behind the text on narrow screens; a paper-coloured halo keeps it legible. */
.pd-mode-scroll .pd-info{text-shadow:0 0 3px var(--paper),0 0 8px var(--paper),0 0 14px var(--paper)}
.pd-mode-scroll .pd-info h3{font-size:clamp(25px,6.6vw,40px);overflow-wrap:anywhere;hyphens:auto}
.pd-mode-scroll .pd-infos>.pd-info{min-width:0}
.pd-mode-scroll .pd-desc{margin:10px 0 6px;font-size:clamp(14px,3.7vw,16px);line-height:1.5}
.pd-mode-scroll .pd-tags{font-size:clamp(16px,4.2vw,19px)}
.pd-mode-scroll .pd-links{margin-top:10px}
.pd-mode-scroll .pd-links a{font-size:clamp(18px,4.8vw,22px)}

@media(prefers-reduced-motion:reduce){
  .pd-cover,.pd-slot{transition:none}
  .pd-meta,.pd-infos{transition:none}
  .pd-info,.pd-info.is-active{transform:none;transition:opacity .2s ease,visibility 0s}
  .pd-underline path{stroke-dashoffset:0;transition:none}
}



/* ==========================================================================
   2026-10-19 · Home dialogue beside the face; Skills cards as paper notes
   ========================================================================== */
/* Sit the speech bubble level with the face (it used to float at chest height). */
@media(min-width:901px){.about-dialogue,.hero.character-waving .about-dialogue{bottom:26%!important;right:calc(60.8% + 6px)!important}}
/* Opaque paper notes taped over the branches, so leaves never show through the text. */
.skill-group:nth-child(n){clip-path:none!important;background:var(--paper2)!important;border-radius:2px;box-shadow:0 0 0 1px rgba(10,46,97,.07),0 16px 28px -20px rgba(10,46,97,.6)}
.skill-group:after{content:"";position:absolute;left:50%;top:-10px;width:72px;height:20px;background:rgba(237,115,92,.5);translate:-50% 0;rotate:-3deg;clip-path:polygon(3% 0,97% 4%,100% 30%,96% 52%,100% 76%,95% 100%,4% 96%,0 70%,4% 46%,0 22%)}
.skill-group:nth-child(1){rotate:-1.4deg}
.skill-group:nth-child(2){rotate:1deg}
.skill-group:nth-child(3){rotate:-.6deg}
.skill-group li{background:none!important;padding:0!important}
/* Let the branches fade out instead of stopping at a hard line. */
.chapter-art-skills{-webkit-mask-image:linear-gradient(#000 82%,transparent)!important;mask-image:linear-gradient(#000 82%,transparent)!important}

/* Open cover: a "view larger" label on its frame; click/tap opens the viewer. */
.pd-cover.is-active{cursor:zoom-in}
.pd-zoom{position:absolute;left:10px;bottom:5px;font:600 15px/1 var(--hand);color:var(--muted);opacity:0;transition:opacity .3s ease .15s}
.pd-cover.is-active .pd-zoom{opacity:1}
.pd-cover.is-active:hover .pd-zoom{color:var(--navy)}
.pd-mode-scroll .pd-zoom{font-size:12px}
.pd-viewer{width:min(92vw,1100px);max-height:92vh;padding:14px 14px 0;border:0;border-radius:3px;background:var(--paper2);box-shadow:0 30px 70px -20px rgba(10,46,97,.55);overflow:visible}
.pd-viewer::backdrop{background:rgba(10,30,60,.55);backdrop-filter:blur(2px)}
.pd-viewer figure{margin:0}
.pd-viewer-art{display:block;aspect-ratio:4/3;max-height:calc(92vh - 70px);margin:0 auto;background:#e9e0cd;overflow:hidden}
.pd-viewer-art img,.pd-viewer-art svg{display:block;width:100%;height:100%;object-fit:contain}
.pd-viewer-title{padding:12px 4px 14px;font:700 24px/1.1 var(--hand);color:var(--navy)}
.pd-viewer-close{position:absolute;top:-16px;right:-16px;width:40px;height:40px;border:0;border-radius:50%;background:var(--navy);color:var(--paper2);font:400 26px/1 var(--sans);cursor:pointer}
.pd-viewer-close:hover{background:var(--blue)}
@media(max-width:620px){.pd-viewer-close{top:-12px;right:-6px}}

/* ==========================================================================
   2026-10-20 · Phone home: touch screens can't hover the tree's fruit, so
   paper tags hang from the branches instead; the name and tagline sit above
   the tree, and the tree and the girl stand together on the grass.
   ========================================================================== */
.branch-tags{display:none}
@media(max-width:900px){
  .branch-tags{display:block;position:absolute;inset:0;z-index:14;pointer-events:none}
  .branch-tag{position:absolute;pointer-events:auto;display:flex;align-items:center;gap:7px;padding:7px 13px 7px 10px;border:0;border-radius:3px;background:var(--paper2);box-shadow:0 0 0 1.5px var(--navy),3px 3px 0 rgba(10,46,97,.14);font:700 20px/1 var(--hand);color:var(--navy);cursor:pointer;transform-origin:50% -26px;animation:tagSway 4.2s ease-in-out infinite alternate;-webkit-tap-highlight-color:transparent}
  /* the string the tag hangs from */
  .branch-tag:before{content:"";position:absolute;left:50%;bottom:100%;width:1.5px;height:26px;background:var(--navy);opacity:.7}
  .branch-tag-fruit{width:12px;height:12px;border-radius:50%;background:var(--coral);box-shadow:inset -2px -2px 0 rgba(10,46,97,.18)}
  .branch-tag-experience{animation-duration:5s;animation-delay:-1.6s}
  .branch-tag-skills{animation-duration:3.6s;animation-delay:-2.4s}
  .branch-tag:active,.branch-tag.is-active{background:#fde6dc}
  @keyframes tagSway{from{rotate:-4deg}to{rotate:4deg}}
}
@media(max-width:900px){
  /* --tw: tree width, --tl: tree left. Everything on the tree is placed
     relative to these, so phones and tablets share one composition. */
  /* The tree is as wide as the screen allows but never taller than the
     space left under the name and tagline (--copy-h), so short phones get a
     smaller tree instead of an overlap. The tree image is 1.2 : 1. */
  /* The whole home fits one screen: the tree is as big as possible (up to
     124% of the width) within the height left under the name (--copy-h).
     The tree image is 1.2 : 1 and stands on a line 9% above the bottom. */
  .hero{--copy-h:212px;--tw:min(132vw,calc((100svh * .91 - var(--copy-h)) * 1.2));--tl:calc((100vw - var(--tw)) / 2)}
  .hero,.hero-stage{min-height:100svh!important;height:100svh!important}
  /* The scene is wider than the screen; clip it so phones don't zoom the page out. */
  .hero-world{overflow:hidden!important}
  /* Name and tagline: their own band above the tree, nothing behind the text. */
  .hero-copy{top:max(76px,9svh)!important;left:20px!important;right:18px}
  .hero-copy h1{font-size:62px!important}
  .hero-copy>p:last-child{margin:22px 0 0 0!important;max-width:none!important;width:auto!important;font-size:19px!important;line-height:1.25!important;transform:rotate(-2deg)}
  /* The tree stands on the grass; its trunk base sits behind the girl. */
  .hero-tree{top:auto!important;bottom:9%!important;left:var(--tl)!important;width:var(--tw)!important;height:auto!important;max-height:none!important;object-fit:contain!important}
  .hero-bg{object-position:center 78%!important}
  .hero-foreground{left:-25vw!important;bottom:-1%!important;width:150vw!important;height:auto!important}
  .hero-person,.hero-person-seated{left:calc(var(--tl) + var(--tw) * .19)!important;bottom:6%!important;width:calc(var(--tw) * .36)!important;height:auto!important}
  .hero-person-wave,.hero-person-turn,.hero-person-wave-alt{display:none!important}
  /* Tags hang from the canopy. */
  .branch-tag-projects{left:calc(var(--tl) + var(--tw) * .12);bottom:calc(9% + var(--tw) * .62)}
  .branch-tag-experience{right:calc(100vw - var(--tl) - var(--tw) * .88);bottom:calc(9% + var(--tw) * .52)}
  .branch-tag-skills{left:calc(var(--tl) + var(--tw) * .21);bottom:calc(9% + var(--tw) * .38)}
  .branch-tag-education{left:calc(var(--tl) + var(--tw) * .58);bottom:calc(9% + var(--tw) * .3);animation-duration:4.6s;animation-delay:-.8s}
  .scroll-cue{left:auto!important;right:18px;bottom:14px!important;transform:none!important;font-size:17px;text-shadow:0 0 4px var(--paper),0 0 10px var(--paper),0 0 16px var(--paper)}
}
@media(min-width:621px) and (max-width:900px){
  .hero{--copy-h:420px;--tw:min(92vw,calc((100svh * .91 - var(--copy-h)) * 1.2))}
  .hero-copy{left:6vw!important}
  .hero-copy h1{font-size:84px!important}
  .hero-copy>p:last-child{font-size:22px!important}
  .branch-tag{font-size:23px;padding:9px 16px 9px 12px}
}
@media(prefers-reduced-motion:reduce){.branch-tag{animation:none}}
@media(max-width:620px){
  /* About: the waving portrait greets first, then the text (it used to fall below everything). */
  .about-home{display:flex!important;flex-direction:column!important}
  .about-home .about-person{order:0!important;width:min(62vw,320px)!important;margin:0 auto -8px!important;transform:none!important}
  .about-home .about-copy{order:1!important}
  /* Experience: only the edge of the trunk peeks in from the right, clear of the text. */
  .chapter-art-experience{left:auto!important;right:-8vw!important;width:30vw!important}
  .experience-entry:nth-child(n){width:74%!important}
  .experience{overflow-x:clip}
}
@media(max-width:900px){
  /* The trunk is cropped to a narrow strip on small screens; fade its left
     edge so the side branches dissolve instead of being sliced off. */
  .chapter-art-experience .growth-canvas,.chapter-art-experience .growth-fallback{-webkit-mask-image:linear-gradient(to right,transparent,#000 30%);mask-image:linear-gradient(to right,transparent,#000 30%)}
}
@media(max-width:620px){
  /* Skills on phones: skills wrap as small tags instead of one per line,
     so the three cards take about half the scrolling. */
  .skill-groups{gap:26px!important}
  .skill-group:nth-child(n){padding:20px 18px 18px!important}
  .skill-group h3{font-size:34px!important;margin-bottom:10px!important}
  .skill-group ul{display:flex!important;flex-wrap:wrap;gap:7px 7px;columns:auto!important}
  .skill-group li{display:inline-block!important;margin:0!important;padding:4px 10px!important;border:1px solid rgba(10,46,97,.22);border-radius:999px;font-size:14px!important;line-height:1.3!important}
}
/* Skills: a little taller so the unstretched painting needs less trimming. */
@media(min-width:621px){.skill-world,.skill-groups{height:clamp(560px,44vw,660px)!important}}

/* Phones: name on the left, the three tagline lines in a small column to its
   right, so the name block is short and the big tree still fits on screen. */
@media(max-width:620px){
  .hero-copy{display:flex!important;align-items:flex-end;justify-content:space-between;gap:12px;
    /* centred in the space between the menu bar and the treetop */
    top:max(76px,calc((100svh * .91 - var(--tw) / 1.2 - 110px) / 2 + 26px))!important}
  .hero-copy h1{flex:none;font-size:54px!important}
  .hero-copy>p:last-child{flex:0 1 auto;margin:0 0 6px!important;font-size:15.5px!important;line-height:1.3!important;text-align:left;transform:rotate(-2deg)!important}
  .branch-tag{font-size:18px;padding:6px 11px 6px 9px}
}

/* Intro performance: the paper-texture overlay is blended (multiply) over the
   whole screen, which the browser has to recomposite on every frame of the
   flock animation. Leave it out while the intro plays, then fade it in. */
body:before{transition:opacity .9s ease}
body.intro-playing:before{opacity:0}
.intro-bird{will-change:transform,opacity}