@import url('https://fonts.googleapis.com/css2?family=BBH+Bartle&family=Bodoni+Moda:opsz,wght@6..96,400..900&family=Caveat:wght@400..700&family=DM+Serif+Display&family=Inter:wght@400;500;600;700;800&family=Life+Savers:wght@400;700;800&family=Slackey&family=Yusei+Magic&display=swap');
:root{--paper:#fbfaf7;--ink:#20201e;--muted:#77766e;--grid:rgba(102,176,192,.2);--blue:#bfe8ed;--pink:#f3c9cf;--yellow:#f3dfa0;--green:#cbd9b9;--line:#dedbd2;--font:'Helvetica Now Condensed','Barlow Condensed','Arial Narrow',Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:84px}body{margin:0;background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:32px 32px;color:var(--ink);font-family:var(--font);font-stretch:condensed;font-size:18px}button,a{font:inherit;color:inherit}a{text-decoration:none}button{cursor:pointer}.skip-link{position:fixed;top:-100px;left:12px;z-index:100;background:var(--ink);color:white;padding:12px}.skip-link:focus{top:12px}:focus-visible{outline:3px solid #428899;outline-offset:4px}.site-header{height:76px;position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,6vw,90px);background:rgba(251,250,247,.93);backdrop-filter:blur(12px);border-bottom:1px solid rgba(32,32,30,.08)}.logo{font-family:var(--portfolio-body-font)!important;font-weight:500;font-size:16px;letter-spacing:normal;font-style:normal}.main-nav{display:flex;align-items:center;gap:clamp(18px,3.4vw,52px)}.main-nav a{font-size:16px;font-weight:600;transition:opacity .2s}.main-nav a:hover{opacity:.55}.main-nav a:last-child{border:1px solid var(--ink);padding:9px 16px;border-radius:99px}.main-nav a span{margin-left:7px}.menu-toggle{display:none}.section-grid{position:relative;padding-left:clamp(22px,9vw,140px);padding-right:clamp(22px,9vw,140px)}.hero{min-height:calc(100vh - 76px);display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:35px;padding-top:52px;padding-bottom:78px;overflow:hidden}.eyebrow{font-size:12px;letter-spacing:.13em;font-weight:700;color:var(--muted);margin:0 0 22px}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#91ad7b;margin-right:8px;box-shadow:0 0 0 4px #91ad7b24}.hello{font-size:clamp(24px,3vw,38px);margin:0 0 2px}.name-button{display:flex;align-items:baseline;gap:.18em;border:0;background:none;padding:0;text-align:left;font-size:clamp(76px,11vw,154px);font-weight:900;letter-spacing:-.055em;line-height:.85}.name-first{display:inline-block}.name-last{display:inline-block;position:relative;transform:rotate(-4deg) translateY(10px);transform-origin:left center}.name-star{position:absolute;right:-.3em;top:-.18em;font-size:.27em;color:#df8278;animation:spin 15s linear infinite}.hero-note{font-size:clamp(21px,2.3vw,29px);line-height:1.2;margin:38px 0 28px;max-width:490px}.hero-note span{color:#77766e}.round-link{display:inline-flex;align-items:center;gap:16px;border-bottom:1px solid;padding:7px 0;font-size:16px;font-weight:600}.round-link span{font-size:20px;transition:transform .2s}.round-link:hover span{transform:translateY(4px)}.hero-art{position:relative;min-height:480px;display:grid;place-items:center}.hanger{position:relative;padding-top:42px}.hanger:before{content:"";position:absolute;top:-70px;left:50%;height:112px;width:1px;background:#777;transform:rotate(2deg)}.hanger:after{content:"";position:absolute;top:34px;left:calc(50% - 9px);width:18px;height:13px;border:2px solid #888;border-radius:50%}.portrait-placeholder{position:relative;width:clamp(230px,27vw,340px);height:400px;background:#f2d6d7;border:10px solid #fff;box-shadow:0 12px 34px #302c221b;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;transition:transform .25s}.portrait-placeholder:hover{transform:rotate(2deg) scale(1.02)}.portrait-placeholder:before{content:"";position:absolute;inset:12px;border:1px dashed #a98e88}.portrait-sun{font-size:38px;color:#b57f68}.portrait-head{font-weight:700;font-size:25px;line-height:1.05;margin:18px 0}.portrait-caption{font-size:13px;color:#795d57}.speech-bubble{position:absolute;right:-4%;top:13%;z-index:2;background:white;padding:14px 18px;border-radius:16px;box-shadow:0 5px 20px #24201418;font-size:15px;transform:rotate(4deg);transition:transform .3s}.speech-bubble:after{content:"";position:absolute;bottom:-9px;left:30px;border-width:10px 10px 0 0;border-style:solid;border-color:white transparent transparent transparent}.speech-bubble span{color:#d8796e}.scribble{position:absolute;color:#d8796e}.scribble-one{font-size:48px;right:6%;bottom:18%;animation:spin 22s linear infinite}.scribble-two{font-size:32px;left:2%;top:14%;color:#7795a1}.art-caption{position:absolute;bottom:11px;right:10%;font-size:12px;letter-spacing:.06em;color:var(--muted)}.hero-footer{position:absolute;bottom:23px;left:clamp(22px,9vw,140px);right:clamp(22px,9vw,140px);display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.12em;color:var(--muted)}.hero-footer-line{height:1px;background:var(--line);flex:1}.projects-section{padding-top:112px;padding-bottom:80px;background:rgba(247,246,240,.8);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.section-heading{position:relative;z-index:2}.section-heading h2,.contact-copy h2{font-size:clamp(54px,8vw,96px);line-height:.85;letter-spacing:-.045em;margin:0;font-weight:800}.section-heading h2 em,.contact-copy h2 em{font-style:italic;font-weight:900}.section-intro{font-size:19px;line-height:1.28;max-width:380px;color:#55544e;margin:23px 0 0}.workspace{height:660px;max-width:1100px;margin:30px auto 0;position:relative;overflow:hidden;border:1px solid #cfd9d8;background-color:#f5f4ef;background-image:linear-gradient(rgba(102,176,192,.19) 1px,transparent 1px),linear-gradient(90deg,rgba(102,176,192,.19) 1px,transparent 1px);background-size:32px 32px;box-shadow:0 12px 35px #29281e0b}.project-wall{position:absolute;top:25px;left:50%;transform:translateX(-50%);width:min(76%,750px);display:grid;grid-template-columns:repeat(4,1fr);gap:16px 20px;z-index:3}.project-card{aspect-ratio:1.1;background:#fff;border:7px solid #fff;box-shadow:0 3px 11px #23231d20;position:relative;transform:rotate(var(--tilt));transition:transform .25s,box-shadow .25s;display:grid;place-items:center;text-align:center;cursor:pointer;padding:12px}.project-card:hover,.project-card:focus-visible{transform:rotate(0) translateY(-5px) scale(1.04);box-shadow:0 10px 22px #23231d27}.project-card:before{content:"";position:absolute;inset:6px;border:1px dashed #bcc8c6}.project-card strong{font-size:17px;line-height:1.1;position:relative}.project-card small{position:absolute;bottom:13px;left:8px;right:8px;font-size:11px;color:#777;opacity:0;transition:opacity .2s}.project-card:hover small,.project-card:focus-visible small{opacity:1}.project-card:nth-child(4n+1){background:#d9edf0}.project-card:nth-child(4n+2){background:#eee1bf}.project-card:nth-child(4n+3){background:#e7d8d7}.project-card:nth-child(4n){background:#dde5d4}.wall-note{position:absolute;top:47px;left:5%;z-index:2;font-size:16px;line-height:1.1;transform:rotate(-7deg);color:#5e645c}.wall-note span{display:block;font-size:25px;color:#d67a6e}.desk-scene{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:330px;width:min(67%,720px);z-index:4}.desk-top{height:25px;position:absolute;bottom:140px;left:2%;right:2%;background:#bf916c;border:2px solid #795c48;border-radius:5px;box-shadow:0 5px 0 #9d7657}.desk-label{position:absolute;right:13%;top:4px;font-size:11px;color:#6d503b;transform:rotate(-2deg)}.desk-body{position:absolute;bottom:0;left:5%;width:24%;height:137px;background:#d5c7b3;border:2px solid #887662;display:flex;flex-direction:column;gap:7px;padding:12px}.drawer{height:33px;border:1px solid #9b8b75;background:#e1d8ca;position:relative}.drawer:after{content:"";position:absolute;width:15px;height:3px;background:#8e806d;left:calc(50% - 7px);top:14px}.desk-body:after{content:"";position:absolute;right:-222%;top:0;width:95%;height:100%;background:#d5c7b3;border:2px solid #887662}.chair{position:absolute;z-index:1;bottom:0;left:38%;width:24%;height:129px}.chair i{position:absolute;left:4%;top:0;width:92%;height:74px;border-radius:35px 35px 18px 18px;background:#596265;border:3px solid #424a4c}.chair b{position:absolute;left:47%;top:70px;height:40px;width:7px;background:#495153}.chair b:after{content:"";position:absolute;left:-30px;top:36px;width:70px;height:7px;background:#495153;border-radius:10px}.desk-person{position:absolute;z-index:3;bottom:155px;left:40%;width:100px;height:128px}.person-hair{position:absolute;top:4px;left:17px;width:64px;height:64px;border-radius:50% 50% 35% 35%;background:#463a35}.person-head{position:absolute;top:16px;left:25px;width:48px;height:56px;border-radius:45%;background:#d9a98d}.person-body{position:absolute;top:66px;left:6px;width:92px;height:70px;border-radius:35px 35px 8px 8px;background:#b8c4b1}.person-arm{position:absolute;right:-9px;top:74px;width:62px;height:14px;border-radius:10px;background:#d9a98d;transform:rotate(15deg)}.laptop{position:absolute;bottom:165px;left:42%;z-index:5;width:145px}.laptop-screen{height:85px;background:#4b5557;border:6px solid #3d4445;border-radius:7px 7px 2px 2px;color:#eff2e9;display:grid;place-items:center}.laptop-screen span{font-size:27px;color:#e8d28c}.laptop-screen small{font-size:10px}.laptop-base{height:8px;margin:0 -8px;background:#727c7d;clip-path:polygon(5% 0,95% 0,100% 100%,0 100%)}.mug{position:absolute;bottom:167px;left:17%;font-size:32px}.plant{position:absolute;bottom:165px;right:9%;height:82px;width:65px}.plant b{position:absolute;bottom:0;left:17px;width:33px;height:25px;border-radius:3px 3px 11px 11px;background:#a98263}.plant i{position:absolute;bottom:21px;left:28px;width:12px;height:54px;border-radius:100% 0 100% 0;background:#71886c;transform:rotate(-19deg);transform-origin:bottom}.plant i:nth-child(2){transform:rotate(26deg);left:34px;height:46px}.plant i:nth-child(3){transform:rotate(-50deg);left:21px;height:39px}.desk-lamp{position:absolute;bottom:165px;left:4%;height:120px;width:65px}.desk-lamp:before{content:"";position:absolute;bottom:0;left:27px;width:5px;height:70px;background:#5f6560;transform:rotate(13deg)}.desk-lamp:after{content:"";position:absolute;bottom:0;left:8px;width:47px;height:6px;border-radius:50%;background:#5f6560}.desk-lamp span{position:absolute;top:0;left:5px;width:45px;height:27px;background:#e8d795;clip-path:polygon(14% 0,86% 0,100% 100%,0 100%)}.desk-lamp i{position:absolute;top:23px;left:29px;height:37px;width:4px;background:#5f6560;transform:rotate(-27deg)}.dustbin-wrap{position:absolute;z-index:5;right:3%;bottom:18px;width:130px;height:145px}.dustbin-label{font-size:13px;line-height:1.05;text-align:center;margin:0 0 8px;transform:rotate(3deg)}.dustbin-label span{font-size:11px;color:#777}.dustbin{position:absolute;bottom:0;left:20px;width:86px;height:83px;border:2px solid #828580;border-top:0;border-radius:4px 4px 15px 15px;background:repeating-linear-gradient(0deg,transparent 0 10px,#a8aaa5 11px 13px);transform:perspective(70px) rotateX(-5deg)}.dustbin:before{content:"";position:absolute;top:-6px;left:-5px;width:92px;height:8px;border:2px solid #828580;border-radius:50%;background:#f1f0eb}.crumple{position:absolute;z-index:2;border:0;background:#f0e8d9;width:38px;height:32px;border-radius:48% 40% 56% 43%;color:#969083;font-size:22px;box-shadow:inset -4px -2px 0 #d1c8b9;transition:transform .2s}.crumple:hover{transform:scale(1.15) rotate(20deg)}.crumple-a{top:43px;left:-2px;transform:rotate(-20deg)}.crumple-b{top:37px;right:1px;transform:rotate(22deg)}.workspace-floor{position:absolute;bottom:0;left:0;right:0;height:10px;background:#d8d1c4}.workspace-footnote,.gallery-note{margin:20px auto 0;max-width:1100px;font-size:15px;color:#777}.workspace-footnote span,.gallery-note span{color:#d8796e;font-size:22px;vertical-align:-2px}.gallery-section{padding-top:110px;padding-bottom:115px}.gallery-board{min-height:370px;position:relative;margin:36px auto 0;max-width:1000px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;align-items:center}.gallery-sticker{aspect-ratio:1;background:#fff;border:1px solid #e2ddd3;box-shadow:0 9px 24px #28241912;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;padding:20px;transform:rotate(var(--tilt));transition:transform .3s,box-shadow .3s;cursor:pointer}.gallery-sticker:before{content:"";position:absolute;top:-9px;left:calc(50% - 32px);width:64px;height:18px;background:#e4ce8caa;transform:rotate(-4deg)}.gallery-sticker:hover,.gallery-sticker:focus-visible{transform:rotate(0) translateY(-8px);box-shadow:0 15px 28px #28241920}.sticker-inner{width:100%;height:100%;display:grid;place-items:center;border:1px dashed #c9c5ba;color:#75736b;font-size:17px;line-height:1.05}.sticker-inner span{display:block;font-size:30px;color:#ca8777;margin-bottom:12px}.gallery-sticker:nth-child(4n+1) .sticker-inner{background:#f4e9e2}.gallery-sticker:nth-child(4n+2) .sticker-inner{background:#e9f0ec}.gallery-sticker:nth-child(4n+3) .sticker-inner{background:#f4edcf}.gallery-sticker:nth-child(4n) .sticker-inner{background:#e6e8f0}.gallery-note{margin-top:0}.contact-section{min-height:560px;padding-top:100px;padding-bottom:90px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:25px;background:#eff1e9;border-top:1px solid #d8dcd1;overflow:hidden}.contact-copy h2{font-size:clamp(56px,8vw,100px)}.contact-copy h2 em{color:#74876d}.contact-copy .section-intro{max-width:340px}.email-placeholder{display:inline-flex;align-items:center;gap:25px;margin-top:22px;border-bottom:1px solid;padding:8px 0;font-size:17px;font-weight:600}.email-placeholder[aria-disabled="true"]{color:#7f7d74;cursor:default}.contact-art{height:360px;position:relative;display:grid;place-items:center}.floor-person{position:relative;width:230px;height:235px}.floor-hair{position:absolute;top:32px;left:75px;width:95px;height:100px;border-radius:48% 50% 42% 48%;background:#48403b}.floor-head{position:absolute;top:43px;left:87px;width:74px;height:77px;border-radius:45%;background:#dba98e}.floor-body{position:absolute;top:109px;left:49px;width:139px;height:95px;border-radius:44px 45px 25px 20px;background:#d89891;transform:rotate(10deg)}.floor-leg{position:absolute;z-index:2;height:32px;border-radius:25px;background:#dba98e}.leg-one{width:126px;left:100px;top:179px;transform:rotate(22deg)}.leg-two{width:112px;left:25px;top:189px;transform:rotate(-20deg)}.contact-art-note{position:absolute;bottom:8px;right:14%;font-size:12px;color:#76796e}.contact-doodles span{position:absolute;font-size:31px;color:#71836b}.contact-doodles span:nth-child(1){top:39px;left:20%;font-size:46px}.contact-doodles span:nth-child(2){right:18%;top:28%;color:#d67f76;font-size:38px}.contact-doodles span:nth-child(3){left:8%;bottom:27%;color:#d2ad56;font-size:36px}.contact-doodles span:nth-child(4){right:9%;bottom:20%;transform:rotate(-30deg);color:#708e99;font-size:36px}.social-links{grid-column:1/-1;display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:5px}.social-link{display:inline-flex;align-items:center;gap:9px;padding:10px 17px;background:var(--paper);border:1px solid #ccd0c6;border-radius:99px;font-size:15px;font-weight:600;transition:transform .2s,background .2s}.social-link:hover{transform:translateY(-3px);background:#fff}.social-link[aria-disabled="true"]{color:#898a81;cursor:default}.social-link b{font-size:18px}.site-footer{min-height:85px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:18px clamp(22px,9vw,140px);font-size:14px;color:#666}.site-footer p{margin:0}.site-footer p span{color:#d8796e}.site-footer>a:last-child{border-bottom:1px solid}.modal{border:0;padding:0;width:min(500px,calc(100% - 36px));background:#fbfaf7;color:var(--ink);box-shadow:0 25px 80px #17161250}.modal::backdrop{background:#17161280;backdrop-filter:blur(3px)}.modal-content{padding:54px 42px 48px;background-image:linear-gradient(rgba(102,176,192,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(102,176,192,.15) 1px,transparent 1px);background-size:24px 24px}.modal-content h2{font-size:43px;line-height:.98;margin:0 0 18px}.modal-content p:last-child{font-size:21px;line-height:1.25;margin:0;max-width:390px}.modal-close{position:absolute;right:13px;top:10px;border:0;background:white;width:36px;height:36px;border-radius:50%;font-size:25px}.wiggle{animation:wiggle .6s ease}@keyframes wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-7deg)}40%{transform:rotate(7deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(3deg)}}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:820px){.section-grid{padding-left:6vw;padding-right:6vw}.hero{grid-template-columns:1fr .8fr}.name-button{font-size:clamp(69px,10vw,105px)}.portrait-placeholder{height:340px;width:240px}.hero-art{min-height:430px}.speech-bubble{right:-5%;font-size:13px}.workspace{height:590px}.project-wall{width:82%;grid-template-columns:repeat(4,1fr);gap:12px}.desk-scene{width:75%;transform:translateX(-56%) scale(.88);transform-origin:bottom center}.wall-note{font-size:13px;left:2%}.gallery-board{grid-template-columns:repeat(4,1fr);gap:15px}.gallery-sticker{padding:12px}.sticker-inner{font-size:14px}.contact-section{padding-left:7vw;padding-right:7vw}.site-footer{padding-left:6vw;padding-right:6vw}}@media(max-width:600px){body{background-size:26px 26px}.site-header{height:64px;padding:0 20px}.menu-toggle{display:flex;flex-direction:column;gap:5px;border:0;background:transparent;padding:8px}.menu-toggle span{width:24px;height:2px;background:var(--ink)}.main-nav{display:none;position:absolute;top:63px;left:0;right:0;padding:17px 22px 22px;background:var(--paper);border-bottom:1px solid var(--line);align-items:stretch;gap:0}.main-nav.open{display:flex;flex-direction:column}.main-nav a{padding:13px 0;border-bottom:1px solid #e9e6de}.main-nav a:last-child{border:0;padding:13px 0}.hero{min-height:auto;grid-template-columns:1fr;padding-top:60px;padding-bottom:70px;gap:10px}.hero-copy{position:relative;z-index:2}.eyebrow{font-size:11px;margin-bottom:16px}.name-button{font-size:clamp(76px,18vw,112px)}.hero-note{margin-top:27px;font-size:23px}.hero-art{min-height:370px;margin-top:15px}.portrait-placeholder{width:235px;height:300px}.hanger{padding-top:30px}.hanger:before{height:88px;top:-55px}.hanger:after{top:22px}.speech-bubble{right:2%;top:12%}.scribble-one{right:3%;bottom:15%}.hero-footer{left:22px;right:22px;bottom:20px}.projects-section,.gallery-section{padding-top:76px;padding-bottom:68px}.section-heading h2{font-size:65px}.section-intro{font-size:18px;margin-top:17px}.workspace{height:590px;margin-top:27px}.project-wall{top:22px;width:88%;grid-template-columns:repeat(2,1fr);gap:12px;left:50%}.project-card{aspect-ratio:1.24;border-width:5px;padding:8px}.project-card strong{font-size:15px}.project-card small{opacity:1;font-size:10px;bottom:8px}.wall-note{top:auto;bottom:215px;left:4%;font-size:12px}.desk-scene{width:105%;height:270px;transform:translateX(-51%) scale(.75);transform-origin:bottom center}.dustbin-wrap{right:0;bottom:7px;transform:scale(.8);transform-origin:bottom right}.workspace-footnote{font-size:14px}.gallery-board{grid-template-columns:repeat(2,1fr);gap:20px 16px;min-height:auto;margin-top:30px}.gallery-sticker{padding:11px}.sticker-inner{font-size:15px}.gallery-note{margin-top:22px}.contact-section{grid-template-columns:1fr;padding:75px 7vw 60px;gap:5px}.contact-copy h2{font-size:76px}.contact-art{height:290px}.floor-person{transform:scale(.84)}.social-links{gap:8px;margin-top:0}.social-link{padding:9px 13px;font-size:14px}.site-footer{padding:20px;flex-wrap:wrap}.site-footer p{order:3;width:100%;text-align:center}.site-footer .logo{font-size:24px}.modal-content{padding:48px 25px 32px}.modal-content h2{font-size:36px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Updated visual details: spacious lettering, grounded furniture, floating keepsakes. */
.name-button{letter-spacing:.055em;gap:.26em;font-weight:700}
.name-last{letter-spacing:.065em;transform:rotate(-3deg) translateY(10px)}
.name-star{right:-.48em}
.projects-section{background-color:rgba(251,250,247,.88);background-image:linear-gradient(rgba(102,176,192,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(102,176,192,.13) 1px,transparent 1px);background-size:32px 32px}
.workspace{background-color:#f8f7f3}
.desk-scene{height:350px;filter:drop-shadow(0 14px 9px #534a3a20)}
.desk-top{bottom:150px}
.desk-body{height:147px}
.chair{height:145px;bottom:0;filter:drop-shadow(0 5px 4px #252a2a22)}
.chair i{top:0;height:69px}
.chair .chair-seat{position:absolute;z-index:2;top:57px;left:-6%;width:112%;height:20px;border:3px solid #424a4c;border-radius:9px;background:#626d6f}
.chair b{top:73px;height:37px;z-index:2}
.chair b:after{top:38px}
.chair-leg{position:absolute;z-index:2;top:105px;left:50%;height:26px;width:5px;background:#485153;transform-origin:top center}
.chair-leg-a{transform:rotate(-58deg)}.chair-leg-b{transform:rotate(58deg)}.chair-leg-c{transform:rotate(-120deg)}.chair-leg-d{transform:rotate(120deg)}
.chair-foot{position:absolute;z-index:2;left:calc(50% - 7px);bottom:5px;width:14px;height:8px;border-radius:50%;background:#454c4d}
.workspace-floor{height:24px;background:linear-gradient(#d2c9b9,#c4b8a7);border-top:2px solid #b5aa9b;box-shadow:0 -5px 14px #413b3012}
.workspace:after{content:"";position:absolute;z-index:2;left:0;right:0;bottom:23px;height:1px;background:#ae9d86}
.desk-scene:after{content:"";position:absolute;left:3%;right:3%;bottom:20px;height:10px;border-radius:50%;background:#4b42351f;filter:blur(5px);z-index:-1}
.crumple{width:41px;height:35px;overflow:visible;padding:0}
.crumple-ball{position:absolute;inset:0;display:grid;place-items:center;border-radius:48% 40% 56% 43%;background:#f0e8d9;color:#969083;font-size:22px;box-shadow:inset -4px -2px 0 #d1c8b9;transition:opacity .2s,transform .2s}
.paper-note{position:absolute;z-index:-1;left:50%;top:50%;width:130px;min-height:86px;padding:13px 10px;display:grid;place-items:center;background:#fff9dc;color:#4d483b;border:1px solid #d5c993;box-shadow:0 5px 14px #29241924;font-size:14px;line-height:1.1;text-align:center;opacity:0;transform:translate(-50%,-25%) rotate(-5deg) scale(.25);transform-origin:top left;transition:opacity .25s,transform .4s cubic-bezier(.2,.8,.2,1)}
.crumple.is-unfolded{z-index:10}
.crumple.is-unfolded .crumple-ball{opacity:0;transform:scale(.4)}
.crumple.is-unfolded .paper-note{z-index:2;opacity:1;transform:translate(-50%,-50%) rotate(-5deg) scale(1)}
.crumple-b.is-unfolded .paper-note{transform:translate(-50%,-50%) rotate(5deg) scale(1)}
.crumple-c{top:48px;left:45px;transform:rotate(8deg)}
.crumple-c:hover{transform:scale(1.15) rotate(20deg)}
.gallery-section{background:rgba(251,250,247,.62);background-image:linear-gradient(rgba(102,176,192,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(102,176,192,.1) 1px,transparent 1px);background-size:32px 32px}
.gallery-board{min-height:400px;grid-template-columns:repeat(4,minmax(110px,1fr));gap:clamp(20px,5vw,72px);perspective:900px}
.gallery-sticker{width:min(100%,190px);justify-self:center;border:0;background:transparent;box-shadow:none;animation:float-sticker 5s ease-in-out infinite;animation-delay:var(--delay,0s)}
.gallery-sticker:nth-child(2n){animation-duration:6.2s}
.gallery-sticker:before{z-index:3;top:-4px;left:calc(50% - 24px);width:48px;height:13px;opacity:.78}
.gallery-sticker .sticker-inner{border:5px solid #fff;outline:1px solid #e4dfd5;box-shadow:0 10px 20px #302a2017;border-radius:4px;padding:12px;clip-path:polygon(2% 0,98% 2%,100% 97%,1% 100%)}
.gallery-sticker:nth-child(2) .sticker-inner,.gallery-sticker:nth-child(4) .sticker-inner{border-radius:50% 45% 48% 44%;clip-path:polygon(8% 0,95% 5%,100% 91%,6% 100%)}
.gallery-sticker:nth-child(3) .sticker-inner{clip-path:polygon(0 4%,96% 0,100% 100%,4% 95%)}
.gallery-sticker:hover,.gallery-sticker:focus-visible{animation-play-state:paused;transform:rotate(0) translateY(-9px) scale(1.08);box-shadow:none}
@keyframes float-sticker{0%,100%{translate:0 0}50%{translate:0 -10px}}
.doodle-card{max-width:1000px;margin:28px auto 0;padding:clamp(20px,4vw,38px);background:#fffdf8;border:1px solid #dcd8ce;box-shadow:0 10px 30px #2924190b;position:relative}
.doodle-card:before{content:"";position:absolute;inset:9px;border:1px dashed #d7d2c7;pointer-events:none}
.doodle-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;position:relative;min-height:138px}.doodle-card-heading>div{max-width:calc(100% - 190px)}
.doodle-card-heading .eyebrow{margin:0 0 8px}.doodle-card-heading h3{font-size:clamp(28px,4vw,42px);margin:0;line-height:1}.doodle-card-heading p:last-child{margin:8px 0 0;color:#68665d;font-size:16px}
.community-sticker-sheet{position:absolute;top:-12px;right:0;width:min(180px,24%);height:auto;mix-blend-mode:multiply;pointer-events:none;user-select:none}
.canvas-wrap{margin-top:20px;height:210px;border:1px solid #d7d4ca;background-color:#fff;background-image:linear-gradient(rgba(102,176,192,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(102,176,192,.16) 1px,transparent 1px);background-size:24px 24px;position:relative;z-index:1;touch-action:none}
#doodle-canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
.doodle-controls{display:flex;align-items:center;gap:17px;flex-wrap:wrap;margin-top:13px;position:relative;z-index:1;font-size:14px}
.size-picker{display:flex;align-items:center;gap:8px}.size-picker input{width:90px;accent-color:#708b86}
.doodle-tool-button{display:grid;place-items:center;width:42px;height:42px;padding:4px;border:1px solid #d8d6ce;border-radius:50%;background:#fff;transition:transform .18s ease,background .18s ease,border-color .18s ease}.doodle-tool-button:hover{transform:translateY(-2px)}.doodle-tool-button[aria-pressed="true"]{background:#f1f3ef;border-color:#8b9a92}.doodle-tool-icon{display:block;width:34px;height:34px;background-image:url("assets/community-tools.png");background-repeat:no-repeat;background-size:68px 37px}.pen-tool-icon{background-position:left center}.eraser-tool-icon{background-position:right center}
.doodle-status{color:#6a7e68;flex:1;min-width:150px}.clear-doodle{border:1px solid #aaa79b;background:transparent;border-radius:99px;padding:7px 13px;font-size:14px}.clear-doodle:hover{background:#f2f0e9}
.doodle-storage-note{position:relative;z-index:1;color:#858278;font-size:12px;margin:10px 0 0}
.contact-section{background-color:rgba(251,250,247,.94);background-image:linear-gradient(rgba(102,176,192,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(102,176,192,.18) 1px,transparent 1px);background-size:32px 32px;border-top:1px solid var(--line)}
.contact-copy h2 em{color:inherit}
.contact-art{min-height:360px;background:transparent}
.social-links{align-items:center;gap:clamp(17px,3vw,40px);min-height:120px;padding:10px 0}
.social-link{width:94px;height:94px;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;padding:11px 8px;border:1px solid #dedbd2;border-radius:48% 52% 44% 56%;background:#fff;box-shadow:0 9px 20px #29241912;font-size:13px;animation:float-sticker 4.8s ease-in-out infinite;animation-delay:var(--delay,0s)}
.social-link:nth-child(even){animation-duration:5.7s}
.social-link:hover{transform:translateY(-7px) rotate(-3deg);background:#fff}
.social-link b{display:grid;place-items:center;width:43px;height:43px;border-radius:50%;background:#edf1e8;color:#39433a;font-size:24px;font-weight:700}
.social-link:nth-child(2) b{background:#f8e7e3}.social-link:nth-child(3) b{background:#e4eff0}.social-link:nth-child(4) b{background:#e7eaf3}.social-link:nth-child(5) b{background:#f4edda}
.social-link[aria-disabled="true"]{color:#898a81}
@media(max-width:820px){.gallery-board{grid-template-columns:repeat(4,minmax(90px,1fr));gap:14px}.social-link{width:82px;height:82px}}
@media(max-width:600px){.name-button{letter-spacing:.035em;gap:.18em;font-size:clamp(65px,16.4vw,100px)}.name-last{letter-spacing:.045em}.workspace{background-size:26px 26px}.desk-scene{height:290px;transform:translateX(-51%) scale(.75)}.chair{height:145px}.workspace-floor{height:24px}.crumple-c{left:37px}.gallery-board{grid-template-columns:repeat(2,minmax(110px,1fr));gap:15px 25px;min-height:0;padding:20px 4px}.gallery-sticker{width:min(100%,160px)}.doodle-card{margin-top:22px;padding:20px 15px}.doodle-card:before{inset:6px}.canvas-wrap{height:190px}.doodle-status{min-width:100%;order:4}.clear-doodle{margin-left:auto}.contact-section{background-size:26px 26px}.social-links{display:grid;grid-template-columns:repeat(5,minmax(50px,1fr));gap:8px;padding:16px 0}.social-link{width:100%;height:auto;aspect-ratio:1;border-radius:45% 55% 47% 53%;gap:5px;padding:7px 3px;font-size:clamp(10px,3vw,13px)}.social-link b{width:38px;height:38px;font-size:21px}.contact-art{background:transparent}}
@media(prefers-reduced-motion:reduce){.gallery-sticker,.social-link{animation:none}}

/* Wireframe reference cues: visible construction marks, rough edges, and work-in-progress notes. */
.process-stamp{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:7px 11px;border:1px dashed #77766e;color:#66645c;font-size:11px;font-weight:700;letter-spacing:.1em;transform:rotate(-2deg)}
.process-stamp i{font-size:15px;font-style:normal;color:#d8796e}
.project-card{background:#fbfaf7!important;border:1px solid #3b3b37;box-shadow:3px 3px 0 #3b3b37,7px 7px 0 #fbfaf7,8px 8px 0 #838278;overflow:visible}
.project-card:nth-child(3n+2){transform:rotate(calc(var(--tilt) * -1)) translateY(3px)}
.project-card:before{inset:5px;border:1px dashed #96948a}
.project-card strong{align-self:end;margin-bottom:13px;font-size:16px}
.project-index,.project-open-mark{position:absolute;z-index:1;top:8px;font-size:10px;letter-spacing:.08em;color:#737168}
.project-index{left:10px}.project-open-mark{right:10px;font-size:15px;top:5px}
.project-empty-mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-70%);font-size:42px;font-weight:300;color:#aaa79b;transition:transform .25s,color .25s}
.project-card:hover .project-empty-mark,.project-card:focus-visible .project-empty-mark{color:#d8796e;transform:translate(-50%,-78%) rotate(8deg)}
.project-card:hover,.project-card:focus-visible{box-shadow:4px 4px 0 #3b3b37,9px 9px 0 #fbfaf7,10px 10px 0 #838278}
.project-card small{opacity:1;bottom:8px;color:#77766e;font-size:10px}
.workspace{border:1px solid #77766e;box-shadow:5px 5px 0 #77766e,10px 10px 0 #fbfaf7,11px 11px 0 #aaa79b}
.workspace:before{content:"KIKI / WORKSPACE";position:absolute;z-index:6;top:10px;left:12px;padding:4px 7px;border:1px solid #77766e;background:#fbfaf7;color:#68665d;font-size:9px;letter-spacing:.13em}
.gallery-sticker .sticker-inner{outline:1px solid #858278;box-shadow:5px 5px 0 #858278,0 10px 20px #302a2017}
.social-link{border:1px solid #55544e;box-shadow:3px 3px 0 #55544e,0 9px 20px #29241912}
.social-link:nth-child(1){--delay:-.3s}.social-link:nth-child(2){--delay:-1.2s}.social-link:nth-child(3){--delay:-2.1s}.social-link:nth-child(4){--delay:-.7s}.social-link:nth-child(5){--delay:-1.6s}
@media(max-width:600px){.process-stamp{margin-top:14px}.project-card{box-shadow:2px 2px 0 #3b3b37,4px 4px 0 #fbfaf7,5px 5px 0 #838278}.project-card strong{font-size:14px}.project-empty-mark{font-size:34px}.workspace{box-shadow:3px 3px 0 #77766e,6px 6px 0 #fbfaf7,7px 7px 0 #aaa79b}}

/* Softer handwritten type and the hanging scrapbook ID badge from the new references. */
:root{--font:'Inter',Arial,sans-serif;--display-font:'DM Sans','Manrope',Arial,sans-serif}
body{font-family:var(--font);font-stretch:normal;font-weight:400}
.eyebrow{font-family:var(--font);font-size:12px;letter-spacing:.07em}
.name-button{font-family:var(--font);font-weight:400;letter-spacing:.005em;gap:.14em;flex-wrap:nowrap;white-space:nowrap;max-width:100%;font-size:clamp(48px,5.4vw,82px);line-height:1.05}
.name-last{letter-spacing:.005em;transform:rotate(-2deg) translateY(4px)}
.section-heading h2,.contact-copy h2{letter-spacing:-.025em;font-weight:700}
.section-heading h2 em,.contact-copy h2 em{font-weight:700}
.site-header{background:rgba(251,250,247,.9)}
.main-nav{gap:clamp(13px,2.5vw,34px)}
.main-nav a,.main-nav a:last-child{position:relative;border:0;padding:8px 18px;border-radius:50%;font-family:var(--font);font-weight:700;font-size:17px;line-height:1.1;letter-spacing:.01em;white-space:nowrap;transition:transform .22s ease,color .22s ease}
.main-nav a:before{content:"";position:absolute;inset:1px -2px;border:1.35px solid currentColor;border-radius:47% 53% 50% 45%;transform:rotate(-3deg) scale(1.03,1.12);pointer-events:none}
.main-nav a:nth-child(2):before{transform:rotate(3deg) scale(1.05,1.13)}
.main-nav a:nth-child(3):before{transform:rotate(-2deg) scale(1.04,1.14)}
.main-nav a:nth-child(4):before{transform:rotate(2deg) scale(1.03,1.12)}
.main-nav a:hover{opacity:1;transform:rotate(-4deg) translateY(-2px);color:#bd6d62}
.main-nav a:nth-child(even):hover{transform:rotate(4deg) translateY(-2px)}
.main-nav a span{margin:0}
.hero-art{min-height:530px;overflow:visible}
.id-hanger{position:absolute;z-index:4;top:-17px;left:50%;width:70px;height:132px;transform:translateX(-50%);pointer-events:none}
.lanyard{position:absolute;top:0;left:25px;width:20px;height:91px;background:linear-gradient(90deg,#c66c62,#e28a7d 50%,#bb625a);box-shadow:2px 2px 2px #44352b26}
.lanyard-loop{position:absolute;top:82px;left:19px;width:32px;height:26px;border:5px solid #aaa9a3;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 2px #e4e1d8}
.lanyard-clip{position:absolute;top:104px;left:29px;width:13px;height:28px;border:3px solid #999991;border-radius:3px 3px 8px 8px;background:linear-gradient(90deg,#d5d4cd,#f8f7f1,#aaa9a2)}
.id-card{position:relative;z-index:2;width:clamp(250px,27vw,330px);margin-top:92px;padding:11px 11px 13px;background:#f1f0ec;border:1px solid #e4e1da;border-radius:5px;box-shadow:0 20px 35px #27251d20,0 2px 4px #27251d14;transform:rotate(-1.5deg);transform-origin:50% -80px;transition:box-shadow .3s ease}
.id-card:before{content:"";position:absolute;top:-9px;left:calc(50% - 31px);width:62px;height:17px;border-radius:50%;background:#f1f0ec;border:1px solid #cccac2}
.id-card-body{position:relative;padding:41px 10px 12px;background:#faf9f6;border-radius:3px}
.id-note{position:absolute;z-index:2;top:9px;left:3px;right:13px;min-height:29px;padding:3px 12px;background:#f4df7b;color:#29271f;font-size:14px;font-weight:700;transform:rotate(-3deg);box-shadow:0 2px 2px #29271f10}
.id-note span{float:right;color:#bd6d62}
.portrait-placeholder{width:100%;height:clamp(250px,29vw,320px);border:0;background:#ead8d3;box-shadow:none;overflow:hidden}
.portrait-placeholder:before{inset:8px;border:1px dashed #b8a39b}
.portrait-placeholder:hover{transform:scale(1.01)}
.portrait-head{font-family:var(--font);font-size:27px;font-weight:700}
.id-card-footer{display:flex;justify-content:space-between;gap:8px;margin-top:9px;color:#6c6961;font-size:10px;letter-spacing:.08em}
.id-card:hover,.id-card:focus-within{box-shadow:0 25px 44px #27251d26,0 2px 4px #27251d14;animation:badge-sway 1.3s ease-in-out infinite alternate}
@keyframes badge-sway{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
.speech-bubble{font-family:var(--font);font-weight:400}
.logo{font-family:var(--font);letter-spacing:-.06em;font-weight:700}
.round-link,.process-stamp,.project-card,.social-link,.doodle-controls,.modal-content{font-family:var(--font)}
.project-card strong{font-size:17px;font-weight:700}
.project-card small{font-size:12px}
.social-link{font-size:14px}
.site-footer{font-family:var(--font)}
@media(max-width:820px){.main-nav{gap:10px}.main-nav a,.main-nav a:last-child{font-size:15px;padding:7px 14px}.id-card{width:clamp(225px,31vw,290px)}.hero-art{min-height:475px}.name-button{font-size:clamp(43px,5.8vw,58px)}}
@media(max-width:600px){.main-nav{gap:2px}.main-nav a,.main-nav a:last-child{font-size:18px;padding:11px 16px}.main-nav a:before{inset:2px -1px}.id-card{width:245px;margin-top:82px}.hero-art{min-height:410px}.id-hanger{top:-6px}.portrait-placeholder{height:260px}.speech-bubble{font-size:14px}.name-button{font-size:clamp(34px,9.4vw,50px);letter-spacing:0;flex-direction:row;flex-wrap:nowrap;white-space:nowrap;gap:.12em;line-height:1.05}.name-last{letter-spacing:0}.section-heading h2,.contact-copy h2{font-weight:700}}
@media(prefers-reduced-motion:reduce){.id-card:hover,.id-card:focus-within{animation:none;transform:rotate(0)}.main-nav a{transition:none}}

/* Keep the full introduction composition inside the viewport on wide and compact screens. */
.hero{grid-template-columns:minmax(0,1fr) minmax(330px,.78fr);column-gap:clamp(20px,4vw,64px);padding-left:clamp(34px,7vw,110px);padding-right:clamp(34px,7vw,110px)}
.hero-copy{min-width:0;position:relative;z-index:3}
.name-button{font-size:clamp(48px,5.4vw,82px);line-height:1.05;max-width:100%;column-gap:.14em;flex-wrap:nowrap;white-space:nowrap}
.name-first,.name-last{white-space:nowrap}
.name-last{transform:rotate(-2deg) translateY(4px)}
.hero-note{max-width:470px;font-size:clamp(20px,2vw,27px)}
.hero-art{min-width:0;justify-items:center;overflow:visible}
.id-card{width:clamp(250px,25vw,320px);margin-top:70px;transform:translateX(-7% ) rotate(-1.5deg)}
.id-card:hover,.id-card:focus-within{animation:badge-sway-left 1.4s ease-in-out infinite alternate}
@keyframes badge-sway-left{from{transform:translateX(-7%) rotate(-4deg)}to{transform:translateX(-7%) rotate(4deg)}}
.id-hanger{left:43%;top:-22px}
.speech-bubble{top:16%;right:auto;left:1%;max-width:min(210px,60%);min-width:138px;padding:13px 17px;background:#fff;border:1px solid #77766e;border-radius:48% 52% 46% 54%;font-size:clamp(14px,1.15vw,17px);line-height:1.22;text-align:center;white-space:normal;overflow-wrap:anywhere;box-shadow:3px 4px 0 #77766e,0 8px 16px #24201418;transform:rotate(-3deg);z-index:8}
.speech-bubble:after{content:"";position:absolute;left:35px;bottom:-11px;width:18px;height:18px;background:#fff;border-right:1px solid #77766e;border-bottom:1px solid #77766e;transform:rotate(45deg);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.speech-bubble:before{content:"";position:absolute;left:28px;bottom:-15px;width:0;height:0;border-style:solid;border-width:13px 0 0 18px;border-color:transparent transparent transparent #77766e;transform:rotate(4deg)}
.speech-bubble.is-fact{left:0;top:13%;max-width:195px;min-width:155px;padding:15px 17px;background:#fffef9}
.scribble-one{right:0}
.hero-footer{left:clamp(34px,7vw,110px);right:clamp(34px,7vw,110px)}
@media(max-width:1000px){.hero{grid-template-columns:minmax(0,1fr) minmax(290px,.74fr);padding-left:5vw;padding-right:5vw;column-gap:18px}.name-button{font-size:clamp(42px,5.5vw,58px)}.id-card{width:clamp(245px,29vw,290px)}.speech-bubble{left:-3%;top:10%;max-width:155px}}
@media(max-width:700px){.hero{grid-template-columns:minmax(0,1fr);padding-left:22px;padding-right:22px;gap:0}.hero-copy{width:100%}.name-button{font-size:clamp(34px,9.3vw,52px);flex-direction:row;flex-wrap:nowrap;white-space:nowrap;column-gap:.12em;line-height:1.05}.hero-note{max-width:440px}.hero-art{width:100%;min-height:420px;margin-top:0}.id-card{width:min(270px,72vw);margin-top:77px;transform:translateX(-8%) rotate(-1.5deg)}.id-card:hover,.id-card:focus-within{animation:badge-sway-mobile 1.4s ease-in-out infinite alternate}@keyframes badge-sway-mobile{from{transform:translateX(-8%) rotate(-4deg)}to{transform:translateX(-8%) rotate(4deg)}}.id-hanger{left:44%;top:-5px}.speech-bubble{top:12%;left:auto;right:0;max-width:165px;min-width:145px;font-size:15px}.speech-bubble.is-fact{top:8%;left:auto;right:0;max-width:170px}.scribble-one{right:2%;bottom:10%}.art-caption{right:5%;bottom:0}.hero-footer{left:22px;right:22px}}
@media(max-width:400px){.name-button{font-size:clamp(30px,8.8vw,36px)}.id-card{width:235px}.speech-bubble,.speech-bubble.is-fact{right:-1%;max-width:143px;min-width:130px;font-size:14px}.hero-art{min-height:385px}}
@media(prefers-reduced-motion:reduce){.id-card:hover,.id-card:focus-within{animation:none;transform:translateX(-7%) rotate(0)}@media(max-width:700px){.id-card:hover,.id-card:focus-within{transform:translateX(-8%) rotate(0)}}}

/* Keep the brush display face for the name; use a lighter, clearer handwritten face elsewhere. */
:root{--font:'Libre Baskerville',Georgia,serif;--display-font:'Changa',Arial,sans-serif}
body{font-family:var(--font);font-weight:400}
.name-button{font-family:var(--display-font);font-weight:700}
.eyebrow,.hello,.hero-note,.round-link,.section-intro,.process-stamp,.desk-label,.wall-note,.dustbin-label,.workspace-footnote,.gallery-note,.doodle-card,.contact-copy .section-intro,.email-placeholder,.social-link,.site-footer,.modal-content{font-family:var(--font);font-weight:400}
.main-nav a,.main-nav a:last-child{font-family:var(--display-font);font-weight:600}
.hero-note{font-size:clamp(20px,2vw,27px);line-height:1.3}
.speech-bubble,.speech-bubble.is-fact{top:29%;left:1%;right:auto;z-index:9;max-width:205px;min-width:160px;padding:15px 19px;border:1.5px solid #5f5d56;border-radius:47% 53% 49% 45%;box-shadow:2px 3px 0 #77766e,0 8px 16px #24201418;transform:rotate(-3deg);font-family:var(--font);font-size:16px;font-weight:700;line-height:1.2;text-align:center;overflow-wrap:anywhere}
.speech-bubble:after{content:"";position:absolute;left:auto;right:21px;bottom:-11px;width:18px;height:18px;background:#fff;border-right:1.5px solid #5f5d56;border-bottom:1.5px solid #5f5d56;transform:rotate(45deg);clip-path:none}
.speech-bubble:before{content:none}
.speech-bubble.is-fact{background:#fffef9}
.id-hanger{left:calc(50% - 21px);top:-15px;width:58px;height:113px}
.lanyard{left:20px;width:18px;height:80px}
.lanyard-loop{top:71px;left:13px;width:32px;height:26px}
.lanyard-clip{top:91px;left:23px;width:13px;height:28px}
.id-card{margin-top:82px;padding-top:14px}
.id-card:before{top:-8px;left:calc(50% - 17px);width:34px;height:16px;border-radius:50%;background:transparent;border:2px solid #aaa9a3;box-shadow:inset 0 0 0 3px #f1f0ec}
.id-card-body{padding-top:41px}
@media(max-width:1000px){.speech-bubble,.speech-bubble.is-fact{top:24%;left:-2%;max-width:174px;min-width:150px}}
@media(max-width:700px){.speech-bubble,.speech-bubble.is-fact{top:12%;left:auto;right:0;max-width:170px;min-width:145px}.id-hanger{left:calc(50% - 21px);top:-4px}.id-card{margin-top:76px}.id-card:before{left:calc(50% - 17px)}}
@media(max-width:400px){.speech-bubble,.speech-bubble.is-fact{top:9%;right:-1%;max-width:143px;min-width:130px;font-size:14px}}

/* Brighter scrapbook accents while preserving the white graph-paper canvas. */
:root{--paper:#fff;--ink:#20201e;--muted:#66645e;--grid:rgba(91,175,205,.22);--blue:#48c7ef;--pink:#ff65b5;--yellow:#ffd447;--green:#65d79a;--line:#d7e7ec}
body,.about-notes-section,.truths-page{background-color:#fff}
.site-header{background:rgba(255,255,255,.94)}
.logo-dot,.name-star,.speech-bubble span,.scribble-one,.workspace-footnote span,.gallery-note span,.site-footer p span{color:#ff5d9e}
.status-dot{background:#62d783;box-shadow:0 0 0 4px #62d78335}
.main-nav a:last-child{border-color:#ff5d9e;background:#fff5fa}
.main-nav a:hover{color:#ef438b;opacity:1}
.hero-note span{color:#ed4c97}
.speech-bubble{border-color:#ed4c97;box-shadow:3px 4px 0 #ffacd0,0 8px 16px #24201418}
.speech-bubble:after{border-color:#fff #ed4c97 #ed4c97 #fff}
.speech-bubble:before{border-color:transparent transparent transparent #ed4c97}
.projects-section{background:rgba(255,255,255,.72)}
.workspace{background-color:#fff;background-image:linear-gradient(rgba(91,175,205,.20) 1px,transparent 1px),linear-gradient(90deg,rgba(91,175,205,.20) 1px,transparent 1px);border-color:#c9e3ec}
.project-card:nth-child(4n+1){background:#dff8ff}
.project-card:nth-child(4n+2){background:#fff2a9}
.project-card:nth-child(4n+3){background:#ffe0f0}
.project-card:nth-child(4n){background:#dcffe9}
.project-card:before{border-color:#73cce7}
.desk-top{background:linear-gradient(#e8b779,#c98a52);border-color:#9b633a;box-shadow:0 5px 0 #aa7046}
.desk-side,.desk-body{background:#f5c98f}
.gallery-sticker:nth-child(4n+1) .sticker-inner{background:#ffe4f1}
.gallery-sticker:nth-child(4n+2) .sticker-inner{background:#ddf7ff}
.gallery-sticker:nth-child(4n+3) .sticker-inner{background:#fff3ae}
.gallery-sticker:nth-child(4n) .sticker-inner{background:#dcffe9}
.gallery-sticker:before{background:#ffda43cc}
.contact-section{background-color:#fff;background-image:linear-gradient(rgba(91,175,205,.20) 1px,transparent 1px),linear-gradient(90deg,rgba(91,175,205,.20) 1px,transparent 1px);background-size:32px 32px;border-color:#c9e3ec}
.contact-copy h2 em{color:#ff5d9e}
.contact-doodles span:nth-child(1){color:#21b8ec}.contact-doodles span:nth-child(2){color:#ff5d9e}.contact-doodles span:nth-child(3){color:#f3be00}.contact-doodles span:nth-child(4){color:#48bd76}
.doodle-card{border-color:#bfe8f3;background:rgba(255,255,255,.92)}
.truths-back{border-color:#ff5d9e;background:#fff5fa}
.truths-intro h2 em{color:#ff5d9e}
.paper-tape.tape-yellow{background:#ffd447}
.paper-tape.tape-blue{background:#48c7ef}
.id-hanger{filter:drop-shadow(2px 3px 2px #33281f24)}
.lanyard{background:linear-gradient(90deg,#e33f5d,#ff6978 50%,#d82f50);box-shadow:2px 3px 3px #44352b33}
.lanyard-loop{border-color:#a5a39c;background:linear-gradient(90deg,#d8d7d1,#fff,#b4b2aa);box-shadow:inset 0 0 0 2px #f6f5f0,0 2px 2px #38352e24}
.lanyard-clip{border-color:#99988f;background:linear-gradient(90deg,#aaa9a2,#fff,#c6c5be);box-shadow:1px 2px 3px #38352e2e}
.id-card{padding:12px 12px 14px;background:linear-gradient(135deg,#fff 0%,#f0efeb 48%,#fff 100%);border:1px solid #d7d5cf;border-radius:8px;box-shadow:0 24px 38px #27251d24,0 5px 9px #27251d14, inset 0 1px 0 #fff}
.id-card:after{content:"";position:absolute;inset:4px;border:1px solid #ffffffb5;border-radius:5px;pointer-events:none}
.id-card-body{padding:42px 12px 13px;background:linear-gradient(180deg,#fffefa,#f4f2ed);border:1px solid #e7e4dc;border-radius:4px;box-shadow:inset 0 1px 3px #27251d0a}
.id-card:before{z-index:4;background:linear-gradient(180deg,#eee 0%,#fff 46%,#d4d2cb 100%);border-color:#aaa9a3;box-shadow:inset 0 0 0 3px #f1f0ec,0 2px 3px #27251d18}
.portrait-placeholder{overflow:hidden;background:#f7c9d8;border:5px solid #fff;box-shadow:0 2px 8px #27251d21,inset 0 0 0 1px #ffffffaa}
.portrait-placeholder:before{inset:7px;border:1px solid #ffffff9c;pointer-events:none;z-index:1}
.portrait-photo{filter:saturate(1.05) contrast(1.02)}
.id-card-footer{color:#56544e;border-top:1px solid #e8e4dc;padding-top:8px;font-weight:600}
@media(prefers-reduced-motion:reduce){.id-card:hover,.id-card:focus-within{animation:none}}

/* Professional cool-toned palette: retain the white grid and remove pink/orange accents. */
:root{--paper:#fff;--ink:#20201e;--muted:#666b70;--grid:rgba(91,150,178,.18);--blue:#b8d9e8;--pink:#dce8ee;--yellow:#dfe8bd;--green:#c9e1d5;--line:#d6e1e6}
.logo-dot,.name-star,.speech-bubble span,.scribble-one,.workspace-footnote span,.gallery-note span,.site-footer p span{color:#527b91}
.main-nav a:last-child{border-color:#527b91;background:#f3f8fa}
.main-nav a:hover{color:#315f78}
.hero-note span{color:#527b91}
.speech-bubble{border-color:#527b91;box-shadow:3px 4px 0 #d4e3e9,0 8px 16px #24201418}
.speech-bubble:after{border-color:#fff #527b91 #527b91 #fff}
.speech-bubble:before{border-color:transparent transparent transparent #527b91}
.project-card:nth-child(4n+1){background:#e5f1f6}
.project-card:nth-child(4n+2){background:#eef1df}
.project-card:nth-child(4n+3){background:#e8edf3}
.project-card:nth-child(4n){background:#e2efe9}
.project-card:before{border-color:#b8d1dc}
.desk-top{background:repeating-linear-gradient(2deg,transparent 0 5px,#75543812 6px 7px),linear-gradient(180deg,#c8ab84 0%,#b9986e 65%,#987451 100%);border-color:#8d7356;box-shadow:inset 0 2px 0 #e4d2b7,0 5px 0 #8a7054,0 8px 12px #4b36251f}
.desk-side,.desk-body{background:linear-gradient(90deg,#bfc4c6,#e0e4e4 48%,#c4c9ca)}
.gallery-sticker:nth-child(4n+1) .sticker-inner{background:#e8f0f3}
.gallery-sticker:nth-child(4n+2) .sticker-inner{background:#e1eff3}
.gallery-sticker:nth-child(4n+3) .sticker-inner{background:#eef1df}
.gallery-sticker:nth-child(4n) .sticker-inner{background:#e2efe9}
.gallery-sticker:before{background:#c4d9e2cc}
.contact-copy h2 em{color:#527b91}
.contact-doodles span:nth-child(1){color:#527b91}.contact-doodles span:nth-child(2){color:#708e9c}.contact-doodles span:nth-child(3){color:#879d62}.contact-doodles span:nth-child(4){color:#537b8b}
.truths-back{border-color:#527b91;background:#f3f8fa}
.truths-intro h2 em{color:#527b91}
.paper-tape.tape-yellow{background:#d7dcad}
.paper-tape.tape-blue{background:#b8d9e8}
.lanyard{background:linear-gradient(90deg,#365f77,#5e8aa0 50%,#365f77)}

/* Office-style photo ID badge refinements. */
.id-hanger{filter:drop-shadow(1px 3px 2px #1e293022)}
.lanyard{width:24px;left:23px;background:linear-gradient(90deg,#274b60 0%,#557c90 22%,#6d8fa0 50%,#496e82 78%,#274b60 100%);box-shadow:inset 1px 0 #ffffff55,inset -1px 0 #142d3b55,2px 3px 4px #17242c35}
.lanyard:after{content:"";position:absolute;left:3px;right:3px;top:0;height:100%;border-left:1px solid #ffffff30;border-right:1px solid #142d3b30}
.lanyard-loop{border-width:4px;background:linear-gradient(90deg,#9a9b98,#f4f4f1 45%,#b7b8b4);box-shadow:inset 0 0 0 1px #777b79,0 2px 3px #17242c30}
.lanyard-clip{width:17px;left:26px;border:2px solid #747a7c;border-radius:3px 3px 7px 7px;background:linear-gradient(90deg,#8e9699,#fafafa 35%,#adb4b5 70%,#777f82);box-shadow:inset 0 0 0 1px #fff9,1px 3px 4px #17242c30}
.id-card{width:clamp(250px,25vw,320px);padding:8px;background:linear-gradient(135deg,#fdfdfc,#e5e8e8 45%,#fff 70%,#e6e8e7);border:1px solid #bfc5c6;border-radius:10px;box-shadow:0 22px 35px #17242c25,0 3px 7px #17242c18,inset 0 1px 0 #fff;transform:translateX(-7%) rotate(-1deg)}
.id-card:after{inset:3px;border:1px solid #fff9;border-radius:7px}
.id-card:before{top:-10px;left:calc(50% - 26px);width:52px;height:18px;border-radius:5px 5px 12px 12px;background:linear-gradient(180deg,#e5e7e5,#fff 48%,#c9ccca);border:1px solid #aeb4b3;box-shadow:inset 0 0 0 2px #f5f5f2,0 2px 3px #17242c20}
.id-card-body{padding:39px 11px 11px;background:#fcfcfa;border:1px solid #e0e3e2;border-radius:5px;box-shadow:inset 0 1px 3px #1d292c0b}
.id-note{position:absolute;top:12px;left:12px;right:12px;height:19px;padding:2px 7px;background:linear-gradient(90deg,#e6edf0,#d6e2e7);border:1px solid #c6d2d6;border-radius:2px;color:#415d6c;font-size:11px;letter-spacing:.1em;text-transform:uppercase;text-align:left}
.id-note span{float:right;color:#527b91}
.portrait-placeholder{height:clamp(270px,28vw,355px);border:4px solid #f6f7f5;background:#d8e0e2;box-shadow:0 1px 5px #1a242a35,inset 0 0 0 1px #bbc5c7}
.portrait-placeholder:before{inset:0;border:0;border-radius:1px;box-shadow:inset 0 0 0 1px #fff6}
.portrait-photo{object-position:center 57%;filter:saturate(.96) contrast(1.03)}
.id-card-footer{margin-top:8px;padding:7px 3px 1px;border-top:1px solid #d9dede;color:#52616a;font-size:9px;letter-spacing:.1em;font-weight:600}
.id-card-footer span:last-child{padding:2px 5px;background:#e8eef0;border:1px solid #d5dfe2;border-radius:2px;color:#405a67}
.id-card:hover,.id-card:focus-within{box-shadow:0 26px 42px #17242c2c,0 3px 7px #17242c18,inset 0 1px 0 #fff}
@media(max-width:700px){.id-card{transform:translateX(-8%) rotate(-1deg)}}
/* Keep the graph-paper texture subtle behind the updated introduction. */
:root{--grid:rgba(91,150,178,.09)}
body{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px)}
.hero-note{max-width:560px;font-size:clamp(18px,1.75vw,24px);line-height:1.42}
.hero-note span{color:#527b91}
@media(max-width:700px){.hero-note{font-size:20px;line-height:1.38}}

/* Floating image slots will receive the supplied contact artwork when it is shared. */
.contact-art{display:block;min-height:380px;height:380px}
.contact-art .social-links{position:absolute;inset:0;display:block;grid-column:auto;min-height:0;margin:0;padding:0}
.contact-art .social-link{position:absolute;width:92px;height:106px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;padding:8px;border:0;border-radius:0;background:transparent;box-shadow:none;animation:float-sticker 4.8s ease-in-out infinite;animation-delay:var(--delay,0s)}
.contact-art .social-link:hover{background:transparent;transform:translateY(-6px) rotate(-4deg)}
.contact-art .social-link:nth-child(1){left:2%;top:17%;--delay:-.2s}
.contact-art .social-link:nth-child(2){left:38%;top:0;--delay:-1.1s}
.contact-art .social-link:nth-child(3){right:0;top:22%;--delay:-2.1s}
.contact-art .social-link:nth-child(4){left:14%;bottom:0;--delay:-.7s}
.contact-art .social-link:nth-child(5){right:20%;bottom:2%;--delay:-1.6s}
.social-image-placeholder,.social-image{width:76px;height:76px;display:grid;place-items:center;object-fit:contain;background:#fffdf8;border:1px dashed #8c8980;box-shadow:4px 4px 0 #8c898055,0 8px 16px #29241912;transform:rotate(-3deg);transition:transform .25s,box-shadow .25s}
.social-link:nth-child(even) .social-image-placeholder,.social-link:nth-child(even) .social-image{transform:rotate(4deg);border-radius:50% 46% 48% 44%}
.social-image-placeholder{position:relative;color:#89867c;font-size:11px}
.social-image-placeholder:before{content:"";position:absolute;inset:9px;border:1px solid #d6d2c7}
.social-image-placeholder span{position:relative;background:#fffdf8;padding:2px 5px}
.social-image{border:1px solid #e0dbd0}
.contact-art .social-link:hover .social-image-placeholder,.contact-art .social-link:hover .social-image{transform:rotate(0) scale(1.06);box-shadow:5px 7px 0 #8c898055,0 12px 18px #29241918}
.social-label{font-size:13px;color:#49483f;white-space:nowrap}
.social-link[aria-disabled="true"]{cursor:default}
@media(max-width:820px){.contact-art{height:350px;min-height:350px}.contact-art .social-link{width:84px;height:96px}.social-image-placeholder,.social-image{width:67px;height:67px}}
@media(max-width:600px){.contact-art{height:300px;min-height:300px}.contact-art .social-links{display:block;grid-template-columns:none}.contact-art .social-link{width:68px;height:82px;padding:4px}.contact-art .social-link:nth-child(1){left:0;top:16%}.contact-art .social-link:nth-child(2){left:34%;top:0}.contact-art .social-link:nth-child(3){right:0;top:15%}.contact-art .social-link:nth-child(4){left:18%;bottom:0}.contact-art .social-link:nth-child(5){right:19%;bottom:0}.social-image-placeholder,.social-image{width:56px;height:56px}.social-label{font-size:11px}}
@media(prefers-reduced-motion:reduce){.contact-art .social-link{animation:none}}
body *:not(#name-button):not(#name-button *){font-weight:400}

/* Workspace furniture echoes the compact front-on desk and wire basket in the reference. */
.desk-scene{width:min(75%,780px);height:350px}
.desk-top{z-index:3;left:1%;right:1%;height:24px;bottom:150px;background:linear-gradient(#d5ad82,#bd9069);border:2px solid #8d6b4e;border-radius:3px;box-shadow:0 5px 0 #9d7657,0 8px 9px #51402a20}
.desk-side{position:absolute;z-index:2;bottom:7px;width:22%;height:140px;padding:10px 8px 8px;background:linear-gradient(90deg,#b5b5af,#deded7 48%,#b8b9b3);border:2px solid #747772;display:flex;flex-direction:column;gap:6px;box-shadow:inset 3px 0 #ecece6,inset -3px 0 #93958f}
.desk-side-left{left:3%}.desk-side-right{right:3%}
.desk-side:after{content:"";position:absolute;bottom:-7px;left:-2px;right:-2px;height:7px;background:#6e716d;border:1px solid #565a58}
.desk-side .drawer{height:calc((100% - 28px)/3);min-height:22px;border:1px solid #90928c;background:linear-gradient(90deg,#c7c8c2,#e0e0da,#c7c8c2);box-shadow:inset 0 1px #f1f1ec}
.desk-side .drawer:after{width:14px;height:4px;left:calc(50% - 7px);top:50%;transform:translateY(-50%);background:#555b5c;border-radius:1px}
.chair{z-index:1;left:35%;width:30%;height:150px;bottom:0}
.chair i{left:10%;width:80%;height:68px;border-radius:22px 22px 15px 15px;background:linear-gradient(90deg,#3e4547,#596164 48%,#3e4547);border:3px solid #353b3d;box-shadow:inset 0 2px 0 #727b7d}
.chair .chair-seat{top:57px;left:0;width:100%;height:22px;border:3px solid #343a3c;background:linear-gradient(#697275,#4f5759);border-radius:11px}
.chair b{top:76px;height:44px;background:#4d5557}
.chair b:after{top:42px;left:-34px;width:76px;height:7px;background:#4d5557}
.desk-person{z-index:2;left:43%;bottom:156px;transform:scale(.85);transform-origin:bottom center}
.monitor{position:absolute;z-index:5;left:50%;bottom:171px;width:150px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.monitor-screen{width:100%;height:90px;border:6px solid #363b3c;border-radius:5px 5px 2px 2px;background:linear-gradient(135deg,#c9c8c5,#aaa9a6);box-shadow:inset 0 0 0 2px #6b6c69,0 2px 0 #242728;position:relative}
.monitor-screen:after{content:"";position:absolute;bottom:-5px;left:calc(50% - 3px);width:6px;height:3px;background:#242728}
.monitor-neck{width:24px;height:13px;background:linear-gradient(90deg,#777b79,#c1c2be,#767a78);border:1px solid #565c5b}
.monitor-foot{width:68px;height:8px;border-radius:50% 50% 2px 2px;background:linear-gradient(#a3a5a1,#5b615f);border:1px solid #555a59}
.desk-token{position:absolute;z-index:6;bottom:174px;left:65%;width:47px;height:48px;display:grid;place-items:center;background:#f4e6b5;border:3px solid #494238;border-radius:4px 4px 8px 6px;box-shadow:2px 3px #36302a;color:#3f382d;font-size:21px;transform:rotate(4deg)}
.desk-lamp{left:10%;bottom:166px;transform:scale(.75);transform-origin:bottom center}
.plant{right:10%;bottom:166px;transform:scale(1.08);transform-origin:bottom center}
.mug{position:absolute;z-index:6;bottom:170px;left:17%;width:34px;height:43px;display:grid;place-items:center;border-radius:2px 2px 5px 5px;background:linear-gradient(90deg,#52585a,#717779,#484e50);border:2px solid #373d3f;color:#e8d99f;font-family:var(--font);font-size:17px;line-height:1;box-shadow:inset 0 3px #919696}
.mug:after{content:"";position:absolute;right:-10px;top:10px;width:9px;height:15px;border:3px solid #454b4c;border-left:0;border-radius:0 9px 9px 0}
.mug span{position:absolute;top:-10px;left:5px;font-size:16px;color:#373d3f}
.mug i,.mug b{position:absolute;top:-15px;color:#393f40;font-size:15px;font-style:normal;transform:rotate(-12deg)}.mug i{left:12px;top:-19px;transform:rotate(5deg)}.mug b{left:21px;top:-13px;transform:rotate(12deg)}
.dustbin-wrap{right:3%;bottom:12px;width:138px;height:166px}
.dustbin{left:25px;bottom:0;width:89px;height:113px;border:0;border-radius:47% 47% 19% 19% / 9% 9% 12% 12%;background-color:#e7e7e2;background-image:repeating-linear-gradient(35deg,transparent 0 5px,#aeb1af 5.5px 6.5px),repeating-linear-gradient(-35deg,transparent 0 5px,#b5b7b5 5.5px 6.5px);box-shadow:inset 6px 0 8px #fff8,inset -6px 0 8px #7e827f30;transform:none;clip-path:polygon(7% 0,93% 0,84% 100%,16% 100%)}
.dustbin:before{top:-5px;left:3px;width:83px;height:10px;border:2px solid #8c918e;background:#f7f7f2;border-radius:50%;box-shadow:0 2px 2px #4442}
.dustbin span{position:absolute;z-index:2;width:13px;height:11px;border-radius:47% 28% 52% 36%;background:#f1eee7;border:1px solid #d1cec6;box-shadow:inset -2px -1px #d3d0c9;transform:rotate(25deg)}
.dustbin span:nth-child(1){left:18px;top:23px}.dustbin span:nth-child(2){right:16px;top:39px;transform:rotate(-28deg)}.dustbin span:nth-child(3){left:35px;top:59px;transform:rotate(54deg)}.dustbin span:nth-child(4){left:19px;bottom:17px;transform:rotate(-14deg)}.dustbin span:nth-child(5){right:17px;bottom:20px;transform:rotate(37deg)}
.crumple-a{top:46px;left:-1px}.crumple-b{top:34px;right:-1px}.crumple-c{top:56px;left:0}.crumple-d{top:47px;right:0;transform:rotate(-11deg)}
.crumple-d:hover{transform:scale(1.15) rotate(20deg)}
.loose-notes{position:absolute;z-index:8;right:18%;bottom:153px;width:125px;display:grid;grid-template-columns:repeat(2,34px);gap:2px 8px;justify-content:center;align-items:center}
.loose-notes>span{grid-column:1/-1;text-align:center;color:#77766e;font-size:10px;letter-spacing:.04em;transform:rotate(-3deg)}
.loose-notes .crumple{position:relative;inset:auto;width:32px;height:27px;justify-self:center}
.loose-notes .crumple-ball{border:1px solid #d0cdc4;background:radial-gradient(ellipse at 30% 30%,#fff 0 13%,transparent 15%),radial-gradient(ellipse at 70% 40%,#d8d5ce 0 14%,transparent 17%),radial-gradient(ellipse at 48% 75%,#fff 0 17%,transparent 19%),#efede7;box-shadow:inset -3px -2px 0 #d1cec6,1px 2px 2px #56504728;clip-path:polygon(20% 5%,42% 13%,68% 0,82% 25%,100% 37%,85% 59%,91% 83%,58% 78%,36% 100%,23% 79%,0 64%,14% 43%,3% 22%)}
.loose-notes .crumple:hover{transform:scale(1.14) rotate(15deg)}
.loose-notes .crumple.is-unfolded{z-index:10}
.loose-notes .paper-note{left:50%;top:0;width:140px;min-height:78px;font-size:14px}
.workspace:after,.desk-scene:after{display:none}
@media(max-width:820px){.loose-notes{right:17%;bottom:145px;transform:scale(.9)}}
@media(max-width:600px){.loose-notes{right:19%;bottom:126px;transform:scale(.8);transform-origin:bottom right}.loose-notes>span{font-size:9px}}

/* Add depth and material detail to the tabletop, drawer units, and restored mesh bin. */
.desk-top{height:29px;bottom:150px;border:1px solid #7f5b40;border-top:3px solid #e4c49b;background:repeating-linear-gradient(2deg,transparent 0 5px,#a9784f20 6px 7px),linear-gradient(180deg,#d4aa7c 0%,#c5996b 65%,#aa7953 100%);box-shadow:inset 0 2px 0 #f0d5ad,0 5px 0 #8a6547,0 8px 12px #4b36251f}
.desk-top:after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:7px;background:linear-gradient(#9a704d,#76573f);border:1px solid #74533b;border-top:0;box-shadow:0 3px 3px #44322422}
.desk-label{z-index:1;text-shadow:0 1px #f3dec2}
.desk-side{background:linear-gradient(90deg,#9fa19e 0%,#d3d4cf 13%,#e3e3dd 47%,#c7c9c4 85%,#929692 100%);border:2px solid #626765;box-shadow:inset 2px 0 #f5f5ef,inset -3px 0 #8b8f8c,2px 2px 4px #343a3924}
.desk-side:before{content:"";position:absolute;top:0;bottom:0;left:5px;width:1px;background:#ffffff8a;box-shadow:3px 0 #7d817e34}
.desk-side:after{height:9px;background:linear-gradient(#777c79,#565b59);border-color:#505452;box-shadow:0 2px 2px #2e322f28}
.desk-side .drawer{position:relative;border-color:#777c78;background:linear-gradient(90deg,#bfc1bc,#d9dad4 48%,#b7b9b4);box-shadow:inset 0 2px #eeeee8,inset 0 -2px #a1a49f,0 1px 1px #65696540}
.desk-side .drawer:before{content:"";position:absolute;left:calc(50% - 11px);top:calc(50% - 5px);width:22px;height:9px;border-radius:2px;background:linear-gradient(#a6a9a5,#737875);border:1px solid #696e6b;box-shadow:inset 0 1px #d4d6d0}
.desk-side .drawer:after{width:10px;height:3px;left:calc(50% - 5px);top:50%;background:#4b5150;box-shadow:0 1px #d8dad4}
.real-dustbin{position:absolute;z-index:8;right:3%;bottom:9px;width:132px;height:160px;filter:drop-shadow(4px 5px 4px #28282024)}
.real-dustbin{border:0;padding:0;background:transparent;cursor:pointer;appearance:none;transition:transform .2s,filter .2s}
.real-dustbin:hover{transform:rotate(-3deg) translateY(-4px);filter:drop-shadow(5px 8px 5px #28282030)}
.real-dustbin>p{position:absolute;z-index:3;top:0;left:0;right:0;margin:0;text-align:center;font-size:12px;color:#696a65;transform:rotate(2deg)}
.real-dustbin .dustbin{left:21px;bottom:0;width:91px;height:117px;background-color:#e6e7e2;background-image:repeating-linear-gradient(35deg,transparent 0 5px,#a1a6a3 5.5px 6.5px),repeating-linear-gradient(-35deg,transparent 0 5px,#acb0ad 5.5px 6.5px);border:0;clip-path:polygon(7% 0,93% 0,84% 100%,16% 100%);box-shadow:inset 7px 0 8px #fff8,inset -7px 0 9px #5b625d30}
.real-dustbin .dustbin:before{top:-5px;left:3px;width:83px;height:11px;border:2px solid #777d79;background:linear-gradient(#f4f4ef,#ced1cc);box-shadow:0 2px 2px #3b413d30}
.real-dustbin .dustbin span{z-index:2;width:15px;height:12px;background:radial-gradient(ellipse at 36% 24%,#fff 0 18%,transparent 20%),radial-gradient(ellipse at 75% 65%,#cbc9c2 0 17%,transparent 20%),#efede6;border:1px solid #cfccc4;box-shadow:inset -2px -2px #d1cec6}
.real-dustbin .dustbin span:nth-child(1){left:24px;top:12px}.real-dustbin .dustbin span:nth-child(2){right:22px;top:24px}.real-dustbin .dustbin span:nth-child(3){left:39px;top:36px}.real-dustbin .dustbin span:nth-child(4){left:22px;bottom:31px}.real-dustbin .dustbin span:nth-child(5){right:23px;bottom:18px}
.bin-paper{position:absolute;z-index:4;width:37px;height:24px;background:radial-gradient(ellipse at 28% 30%,#fff 0 15%,transparent 18%),radial-gradient(ellipse at 70% 68%,#cac8c1 0 17%,transparent 20%),#f0eee8;clip-path:polygon(5% 20%,29% 0,48% 21%,73% 6%,100% 30%,80% 50%,97% 82%,65% 100%,42% 78%,17% 94%,0 62%,20% 45%);border:1px solid #d2d0c8;filter:drop-shadow(1px 2px 1px #4443)}
.bin-paper-one{left:0;bottom:8px;transform:rotate(-25deg)}.bin-paper-two{right:-1px;bottom:20px;transform:rotate(20deg) scale(.82)}
@media(max-width:820px){.real-dustbin{transform:scale(.86);transform-origin:bottom right;right:2%;bottom:7px}.desk-top{bottom:150px}}
@media(max-width:600px){.real-dustbin{transform:scale(.68);right:0;bottom:3px}.desk-top{bottom:128px}.desk-top:after{height:6px;bottom:-6px}}

/* Clear the desk scene and vary the empty project frames like a gallery wall. */
.workspace:before{content:none}
.desk-token:before{content:"";position:absolute;left:10px;top:15px;width:4px;height:5px;background:#494238;box-shadow:12px 0 #494238}
.desk-token:after{content:"";position:absolute;left:12px;top:27px;width:12px;height:6px;border-bottom:2px solid #494238;border-radius:0 0 50% 50%}
.mug i,.mug b,.mug em{position:absolute;top:-20px;width:4px;height:27px;border-radius:2px;background:linear-gradient(#d1a75e 0 75%,#373d3f 75%);transform:rotate(-11deg)}
.mug i{left:7px}.mug b{left:16px;top:-25px;transform:rotate(5deg)}.mug em{left:24px;top:-19px;transform:rotate(13deg)}
.mug i:before,.mug b:before,.mug em:before{content:"";position:absolute;top:-4px;left:0;border-left:2px solid transparent;border-right:2px solid transparent;border-bottom:4px solid #403b34}
.project-wall{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:74px;grid-auto-flow:row dense;align-items:stretch;gap:15px 19px}
.project-card{aspect-ratio:auto;min-width:0}
.project-card:nth-child(1){grid-column:span 2;grid-row:span 2}
.project-card:nth-child(2){grid-column:span 1;grid-row:span 1}
.project-card:nth-child(3){grid-column:span 1;grid-row:span 2}
.project-card:nth-child(4){grid-column:span 1;grid-row:span 1}
.project-card:nth-child(5){grid-column:span 1;grid-row:span 1}
.project-card:nth-child(6){grid-column:span 2;grid-row:span 1}
.project-card:nth-child(7){grid-column:span 1;grid-row:span 2}
.project-card:nth-child(8){grid-column:span 1;grid-row:span 1}
.project-card strong{font-size:16px}
.real-dustbin{width:120px;height:145px}
.real-dustbin .dustbin{height:112px}
.real-dustbin .dustbin span{display:none}
.bin-paper{display:none}
@media(max-width:820px){.project-wall{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:66px;gap:12px}.project-card strong{font-size:14px}}
@media(max-width:600px){.project-wall{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:58px;width:86%;gap:12px}.project-card:nth-child(1){grid-column:span 1;grid-row:span 2}.project-card:nth-child(2){grid-column:span 1;grid-row:span 1}.project-card:nth-child(3){grid-column:span 1;grid-row:span 2}.project-card:nth-child(4){grid-column:span 1;grid-row:span 1}.project-card:nth-child(5){grid-column:span 2;grid-row:span 1}.project-card:nth-child(6){grid-column:span 1;grid-row:span 1}.project-card:nth-child(7){grid-column:span 1;grid-row:span 2}.project-card:nth-child(8){grid-column:span 1;grid-row:span 1}.project-card strong{font-size:13px}.real-dustbin{transform:scale(.58);right:0;bottom:1px}}

/* Minimal study-room finish: keep the framed workspace, with a few papers peeking from the bin. */
.workspace{background-color:#faf9f5;background-image:linear-gradient(rgba(102,176,192,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(102,176,192,.13) 1px,transparent 1px);border-color:#d3d0c6;box-shadow:0 7px 22px #29281e0a}
.desk-scene{filter:drop-shadow(0 9px 8px #534a3a14)}
.desk-side{box-shadow:inset 2px 0 #f5f5ef,inset -3px 0 #8b8f8c,1px 2px 3px #343a3918}
.real-dustbin{filter:drop-shadow(2px 3px 3px #28282020)}
.real-dustbin .dustbin span{display:block;position:absolute;z-index:2;width:25px;height:20px;border-radius:48% 39% 54% 43%;background:radial-gradient(ellipse at 27% 28%,#fff 0 15%,transparent 18%),radial-gradient(ellipse at 73% 62%,#cfcdc6 0 16%,transparent 19%),linear-gradient(135deg,#f9f8f3,#e3e1da);border:1px solid #d0cec6;box-shadow:inset -3px -2px 0 #d5d3cb,1px 2px 2px #4443;clip-path:polygon(9% 24%,31% 0,52% 15%,76% 3%,100% 29%,83% 52%,97% 79%,68% 100%,43% 82%,19% 98%,0 69%,17% 45%)}
.real-dustbin .dustbin span:nth-child(1){left:27px;top:4px;transform:rotate(-15deg)}
.real-dustbin .dustbin span:nth-child(2){right:26px;top:9px;transform:rotate(18deg)}
.real-dustbin .dustbin span:nth-child(3){left:40px;top:20px;transform:rotate(6deg)}
.real-dustbin .dustbin span:nth-child(4){left:24px;top:25px;transform:rotate(25deg)}

/* Sink the paper balls low in the basket; give the coffee a light, looping steam animation. */
.real-dustbin .dustbin span:nth-child(1){top:auto;bottom:8px;left:25px;transform:rotate(-15deg)}
.real-dustbin .dustbin span:nth-child(2){top:auto;bottom:11px;right:24px;transform:rotate(18deg)}
.real-dustbin .dustbin span:nth-child(3){top:auto;bottom:21px;left:40px;transform:rotate(6deg)}
.real-dustbin .dustbin span:nth-child(4){top:auto;bottom:26px;left:22px;transform:rotate(25deg)}
.mug .coffee{position:absolute;z-index:2;top:4px;left:5px;width:18px;height:3px;border-radius:50%;background:#4d3426;box-shadow:0 1px 0 #d6bd8e}
.mug .steam{position:absolute;z-index:4;top:-18px;left:8px;display:block;width:5px;height:18px;border:0;border-left:2px solid #a4a29a;border-radius:50%;background:transparent;opacity:0;animation:coffee-steam 2.6s ease-in-out infinite}
.mug .steam-two{left:16px;top:-24px;height:21px;animation-delay:.8s}
.mug .steam-three{left:23px;top:-17px;height:16px;animation-delay:1.5s}
@keyframes coffee-steam{0%{opacity:0;transform:translateY(8px) rotate(-8deg) scale(.8)}25%{opacity:.55}70%{opacity:.35;transform:translateY(-8px) rotate(8deg) scale(1.05)}100%{opacity:0;transform:translateY(-15px) rotate(-9deg) scale(.8)}}
@media(prefers-reduced-motion:reduce){.mug .steam{animation:none;opacity:.4}}

/* Replace the temporary ID illustration with the supplied portrait, cropped from the AC grille down. */
.portrait-placeholder{width:100%;height:auto;aspect-ratio:.84;padding:0;border:0;background:#ead8d3;box-shadow:none;overflow:hidden;cursor:pointer}
.portrait-placeholder:before{display:none}
.portrait-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:center bottom}
.portrait-placeholder:hover{transform:scale(1.01)}
@media(max-width:600px){.portrait-placeholder{height:auto;aspect-ratio:.84}}
/* Keep the KIKI mark at the header's top-left and pin the prompt to the badge. */
.site-header{justify-content:flex-start}
.site-header>.logo{position:absolute;left:clamp(20px,6vw,90px);top:50%;transform:translateY(-50%);z-index:3}
.site-header>.main-nav{margin-left:auto}
.id-card{position:relative;overflow:visible}
.id-card .speech-bubble,.id-card .speech-bubble.is-fact{position:absolute;top:16%;left:-13%;right:auto;width:min(185px,65%);min-width:145px;max-width:185px;z-index:9;transform:rotate(-3deg)}
.id-card .speech-bubble:after{right:23px;bottom:-9px;transform:rotate(45deg)}
@media(max-width:700px){.site-header>.logo{left:20px}.site-header>.main-nav{margin-left:0}.id-card .speech-bubble,.id-card .speech-bubble.is-fact{top:14%;left:-7%;right:auto;width:min(158px,66%);min-width:132px;max-width:158px;font-size:14px}}
@media(max-width:400px){.id-card .speech-bubble,.id-card .speech-bubble.is-fact{top:12%;left:-5%;width:132px;min-width:125px;max-width:132px;font-size:13px}}
.id-card .speech-bubble,.id-card .speech-bubble.is-fact{top:3%;left:-11%;right:auto;transform:rotate(-3deg);}
.id-card .speech-bubble:after{right:24px;bottom:-8px;transform:rotate(45deg)}
@media(max-width:700px){.id-card .speech-bubble,.id-card .speech-bubble.is-fact{top:3%;left:-5%;right:auto}}
@media(max-width:400px){.id-card .speech-bubble,.id-card .speech-bubble.is-fact{top:2%;left:-4%;right:auto}}
#name-button .name-last[hidden]{display:none!important}
/* User preference: plain white canvas on every page and section. */
body,.about-notes-section,.truths-page,.workspace,.contact-section,.modal-content{background-image:none!important}
body,.about-notes-section,.truths-page,.workspace,.contact-section,.modal-content{background-color:#fff}
/* About opens as a separate notes page, outside the normal portfolio scroll flow. */
.about-notes-section[hidden]{display:none!important}
.about-notes-section:not([hidden]){position:fixed;z-index:60;inset:0;width:100%;height:100vh;height:100dvh;min-height:0;overflow-y:auto;padding:85px clamp(22px,7vw,100px) 50px;background:#fff;animation:about-notes-enter .28s ease both}
body.about-notes-open{overflow:hidden}
.about-back{position:fixed;z-index:5;top:17px;left:clamp(18px,4vw,54px);display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 11px;border:1px solid #aab4b6;border-radius:99px;background:#fff;color:#344951;box-shadow:2px 3px 0 #dce4e5;cursor:pointer;transition:transform .2s,box-shadow .2s}
.about-back span:first-child{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#edf3f4;font-size:21px;line-height:1}
.about-back:hover{transform:translateX(-3px);box-shadow:4px 4px 0 #dce4e5}
.about-back:focus-visible{outline:3px solid #527b91;outline-offset:3px}
@keyframes about-notes-enter{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@media(max-width:760px){.about-notes-section:not([hidden]){padding:76px 22px 38px}.about-notes-heading{margin-bottom:25px}}
@media(prefers-reduced-motion:reduce){.about-notes-section:not([hidden]){animation:none}.about-back{transition:none}}

/* Interactive project jackpot: a compact arcade cabinet beside an editable project card. */
.jackpot-section{padding-top:100px;padding-bottom:110px;background:#fff;border-top:1px solid #e1e6e8;border-bottom:1px solid #e1e6e8}
.jackpot-heading{text-align:center}
.jackpot-heading .section-intro{margin-left:auto;margin-right:auto}
.jackpot-layout{max-width:1030px;margin:45px auto 0;display:grid;grid-template-columns:minmax(300px,.92fr) minmax(280px,1.08fr);align-items:center;gap:clamp(35px,7vw,95px)}
.slot-side{position:relative;max-width:440px;width:100%;margin:0 auto}
.slot-machine{position:relative;isolation:isolate;width:100%;padding:25px 24px 22px;border:1px solid #c3c5c1;border-radius:24px 24px 16px 16px;background:linear-gradient(145deg,#f7f7f3,#e6e7e2 48%,#f5f5f1);box-shadow:inset 0 1px #fff,0 14px 28px #1f27251c,0 4px 0 #b5b8b4;}
.slot-machine:before{content:"";position:absolute;z-index:-1;inset:7px;border:1px solid #fff9;border-radius:19px 19px 12px 12px;pointer-events:none}
.slot-marquee{min-height:102px;display:flex;align-items:center;justify-content:center;gap:11px;padding:12px;background:linear-gradient(180deg,#262e31,#111719);border:8px solid #d5d6d0;border-radius:15px;box-shadow:inset 0 3px 8px #0009,0 3px 0 #aaada8;color:#fff}
.slot-marquee h3{margin:0;text-align:center;font-family:var(--display-font)!important;font-size:clamp(25px,3vw,37px);line-height:.86;letter-spacing:.06em;color:#f5f2e7;text-shadow:2px 2px #536d78}
.marquee-star{color:#d6bc71;font-size:20px;text-shadow:0 0 9px #e5d29188}
.slot-window{height:132px;margin:23px 0 14px;padding:8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;overflow:hidden;background:#262b2b;border:5px solid #aeb2ae;border-radius:15px;box-shadow:inset 0 5px 12px #0008,0 2px 0 #fff}
.slot-reel{position:relative;display:grid;place-items:center;overflow:hidden;padding:8px 5px;background:linear-gradient(90deg,#e6e5dd,#fffefa 18%,#faf9f2 82%,#d8d8d0);border-radius:6px;box-shadow:inset 3px 0 4px #272a2819,inset -3px 0 4px #272a2822}
.slot-reel{border:0;font:inherit;color:inherit;cursor:pointer}
.slot-reel:disabled{cursor:wait}
.slot-reel:before,.slot-reel:after{content:"";position:absolute;left:0;right:0;height:1px;background:#b8b8ae66}
.slot-reel:before{top:21px}.slot-reel:after{bottom:21px}
.slot-reel img{display:block;width:78%;height:78%;max-width:100%;max-height:100%;margin:auto;object-fit:contain;object-position:center;filter:drop-shadow(0 2px 1px #2222)}
.slot-reel.is-spinning img{animation:reel-flash .11s linear infinite;filter:blur(.7px)}
.slot-reel.is-landed img{animation:reel-land .32s cubic-bezier(.2,.75,.3,1)}
@keyframes reel-flash{0%{translate:0 -12px;opacity:.45}50%{translate:0 0;opacity:1}100%{translate:0 12px;opacity:.55}}
@keyframes reel-land{0%{translate:0 -16px;opacity:.3}70%{translate:0 3px;opacity:1}100%{translate:0 0}}
.slot-machine-caption{margin:15px 34px 0 0;text-align:center;color:#6d7475;font-size:10px;letter-spacing:.2em}
.slot-lever{position:absolute;top:33%;right:-48px;width:60px;height:165px;border:0;background:transparent;z-index:3;cursor:pointer;touch-action:manipulation}
.slot-lever:before{content:"";position:absolute;z-index:0;left:23px;top:126px;width:26px;height:22px;border:1px solid #858a86;border-radius:5px 5px 11px 11px;background:linear-gradient(90deg,#999c97,#f7f7f3 45%,#9fa39e);box-shadow:1px 3px 4px #20282733}
.lever-rail{position:absolute;top:36px;left:27px;width:16px;height:111px;border:1px solid #777e7d;border-radius:10px;background:linear-gradient(90deg,#777e7d,#f4f5f1 45%,#898f8d);box-shadow:2px 3px 5px #28302f35}
.lever-arm{position:absolute;z-index:1;left:32px;top:26px;width:8px;height:104px;border:1px solid #737a78;border-radius:8px;background:linear-gradient(90deg,#68716f 0%,#f4f5f1 38%,#aeb4b0 60%,#68716f 100%);box-shadow:1px 2px 3px #20282755;transform-origin:50% 96%;transition:filter .2s}
.lever-knob{position:absolute;z-index:2;top:-24px;left:-16px;width:39px;height:39px;border:2px solid #65716e;border-radius:50%;background:radial-gradient(circle at 31% 24%,#fff 0 8%,#aebcba 18%,#557982 48%,#284e5a 78%,#1a3944 100%);box-shadow:2px 4px 7px #1e272744,inset 0 1px 3px #fff9;transition:filter .2s}
.slot-lever:hover .lever-knob{filter:brightness(1.1)}
.slot-lever:hover .lever-arm{filter:brightness(1.07)}
.slot-lever:focus-visible{outline:3px solid #527b91;outline-offset:3px;border-radius:20px}
.slot-lever.is-pulled .lever-arm{animation:lever-arm-cycle .76s cubic-bezier(.2,.72,.25,1) both}
@keyframes lever-arm-cycle{0%{transform:rotate(0)}24%{transform:rotate(27deg)}44%{transform:rotate(32deg)}63%{transform:rotate(29deg)}82%{transform:rotate(-4deg)}91%{transform:rotate(2deg)}100%{transform:rotate(0)}}
.slot-lever:disabled,.jackpot-more:disabled{cursor:wait}
.slot-hint{margin:14px 0 0;text-align:center;color:#6b7171;font-size:13px}
.jackpot-details{position:relative;min-height:260px;padding:clamp(25px,4vw,43px);background:#fff;border:1px solid #d5dcdd;border-radius:5px;box-shadow:7px 7px 0 #e7ebea;}
.jackpot-details:before{content:"PROJECT PICK";position:absolute;top:-12px;left:24px;padding:3px 10px;background:#fff;border:1px solid #d5dcdd;color:#667273;font-size:10px;letter-spacing:.15em}
.jackpot-details .eyebrow{margin-bottom:20px;color:#527b91;font-size:11px;letter-spacing:.15em}
.jackpot-details h3{margin:0 0 13px;font-family:var(--display-font)!important;font-size:clamp(28px,4vw,43px);font-weight:600;line-height:1.02;color:#242a2b}
.jackpot-details>p:not(.eyebrow){max-width:440px;margin:0;color:#606768;font-size:17px;line-height:1.55}
.jackpot-project-link,.jackpot-more{display:inline-flex;align-items:center;gap:12px;margin-top:0;padding:10px 15px;border:1px solid #9eaaad;border-radius:3px;background:#f7faf9;color:#354e58;font-size:14px;transition:transform .2s,background .2s}
.jackpot-project-link:hover,.jackpot-more:not(:disabled):hover{transform:translateY(-2px);background:#edf4f5}
.jackpot-project-link[hidden]{display:none!important}
.jackpot-more{cursor:pointer}
.jackpot-more:disabled{opacity:.45}
.jackpot-more span{font-size:17px;line-height:.8}
.jackpot-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.jackpot-actions .jackpot-more{margin-top:0}
@media(max-width:760px){.jackpot-section{padding-top:75px;padding-bottom:80px}.jackpot-layout{grid-template-columns:1fr;gap:42px;margin-top:35px}.slot-side{max-width:min(410px,calc(100% - 35px));margin-left:auto;margin-right:auto}.slot-lever{right:-42px}.jackpot-details{max-width:560px;width:100%;margin:0 auto;min-height:230px}.slot-window{height:118px}}
@media(max-width:420px){.slot-machine{padding:19px 18px 18px;border-radius:18px}.slot-marquee{min-height:85px;border-width:6px}.slot-window{height:106px;margin-top:18px;gap:4px;padding:6px}.slot-lever{right:-39px;transform:scale(.88);transform-origin:left center}.jackpot-details{padding:28px 22px}.jackpot-details>p:not(.eyebrow){font-size:15px}.jackpot-actions{gap:8px}.jackpot-actions button{padding:9px 11px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.slot-reel.is-spinning img,.slot-reel.is-landed img{animation:none}.lever-arm,.lever-knob{transition:none}.slot-lever.is-pulled .lever-arm{animation:none;transform:rotate(27deg)}}

/* Professional portfolio introduction: clear hierarchy, restrained navigation, and a real profile portrait. */
:root{--font:'Inter',Arial,sans-serif;--display-font:'DM Sans','Manrope',Arial,sans-serif}
.site-header{height:74px;justify-content:space-between;padding-inline:clamp(22px,7vw,112px);background:#fff;border-bottom:1px solid #e8ecee;backdrop-filter:none}
.site-header{padding-left:clamp(18px,3vw,48px);padding-right:clamp(18px,3vw,48px)}
.site-header>.logo{position:static;left:auto;top:auto;transform:none;color:#20272a;font-family:var(--display-font)!important;font-size:25px;letter-spacing:-.08em;font-weight:800}
.logo-dot{color:#527b91}
.main-nav{margin-left:auto;display:flex;align-items:center;gap:clamp(5px,1.1vw,16px);padding:5px 8px;border:1px solid #e7ebed;border-radius:99px;background:#fff;box-shadow:0 4px 14px #1a29300a}
.main-nav a,.main-nav a:last-child{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border:0;border-radius:99px;background:transparent;color:#40494d;font-family:var(--font)!important;font-size:13px;font-weight:500;letter-spacing:0;line-height:1;transition:background .2s,color .2s,transform .2s}
.main-nav a:before{display:none}
.main-nav a:hover,.main-nav a:nth-child(even):hover{transform:translateY(-1px);background:#f1f5f6;color:#263e48}
.main-nav a:first-child{background:transparent;color:#40494d}
.main-nav a:first-child:hover{background:#34464e;color:#fff}
.main-nav a span{margin:0}
.nav-icon{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.hero{min-height:calc(100svh - 74px);grid-template-columns:minmax(0,1.15fr) minmax(275px,.75fr);gap:clamp(35px,7vw,110px);padding:70px clamp(28px,9vw,145px) 75px;overflow:visible;background:#fff}
.hero-copy{z-index:2;max-width:670px}
.hero-credential{margin:0 0 28px;color:#56656b;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.hello{margin:0 0 4px;color:#364247;font-family:var(--font)!important;font-size:clamp(23px,3vw,36px);font-weight:500}
.name-button{display:flex;flex-wrap:wrap;align-items:baseline;gap:.14em;border:0;background:transparent;padding:0;text-align:left;color:#171c1e;font-family:var(--display-font)!important;font-size:clamp(48px,6.2vw,82px);font-weight:800;letter-spacing:-.065em;line-height:1.02;white-space:normal}
.name-button .name-first,.name-button .name-last{font-family:var(--display-font)!important;font-weight:800;white-space:nowrap}
.name-last{transform:none;letter-spacing:inherit}
.name-star{display:none}
.hero-role{margin:27px 0 14px;color:#22292c;font-family:var(--display-font)!important;font-size:clamp(23px,2.5vw,32px);font-weight:700;line-height:1.17;letter-spacing:-.035em}
.hero-role span{color:#69787e;font-family:var(--display-font)!important;font-weight:500}
.hero-note{max-width:590px;margin:0;color:#596267;font-family:var(--font)!important;font-size:clamp(16px,1.55vw,19px);font-weight:400;line-height:1.7}
.hero-art{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;overflow:visible}
.hero-photo-button{position:relative;display:block;width:min(100%,390px);height:min(70vh,620px);min-height:410px;overflow:hidden;padding:0;border:1px solid #dfe4e5;border-radius:12px;background:#f2f4f3;box-shadow:0 20px 48px #15262e1c,0 3px 8px #15262e0d;cursor:pointer;transition:transform .35s ease,box-shadow .35s ease}
.hero-photo-button:hover{transform:translateY(-4px);box-shadow:0 26px 56px #15262e26,0 3px 8px #15262e0d}
.hero-profile-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:center 24%;}
.profile-photo-caption{position:absolute;right:12px;bottom:12px;left:12px;display:flex;align-items:center;gap:7px;padding:10px 12px;border:1px solid #ffffffa8;border-radius:6px;background:#fffffff0;color:#3f4b50;text-align:left;font-size:9px;font-weight:600;letter-spacing:.1em;box-shadow:0 3px 10px #172a3212}
.profile-photo-caption span{color:#85949a}
.hero-photo-button:focus-visible{outline:3px solid #527b91;outline-offset:5px}
.hero-photo-button.wiggle{animation:profile-photo-wiggle .55s ease}
@keyframes profile-photo-wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-1.5deg)}45%{transform:rotate(1.5deg)}70%{transform:rotate(-.8deg)}}
@media(max-width:1000px){.site-header{padding-inline:28px}.hero{padding-inline:6vw;gap:35px}.name-button{font-size:clamp(46px,6vw,66px)}.hero-photo-button{height:min(68vh,560px);min-height:390px}}
@media(max-width:760px){.hero{min-height:auto;grid-template-columns:1fr;padding:58px 24px 70px;gap:35px}.hero-copy{max-width:650px}.hero-credential{margin-bottom:21px}.name-button{font-size:clamp(43px,10vw,66px)}.hero-role{margin-top:21px}.hero-note{font-size:16px}.hero-art{min-height:0}.hero-photo-button{width:min(100%,360px);height:min(125vw,560px);min-height:370px}.site-header{height:68px;padding-inline:20px}.main-nav{gap:2px;padding:4px}.main-nav a,.main-nav a:last-child{gap:0;padding:9px}.main-nav a span{display:none}.nav-icon{width:17px;height:17px}.menu-toggle{display:flex;flex-direction:column;gap:5px;border:0;background:#f2f5f6;border-radius:50%;padding:10px}.menu-toggle span{width:18px;height:2px;background:#364247}.main-nav{display:none;position:absolute;top:61px;left:auto;right:15px;flex-direction:column;align-items:stretch;min-width:180px;padding:9px;border:1px solid #e4e9eb;border-radius:14px;background:#fff;box-shadow:0 12px 30px #172a321a}.main-nav.open{display:flex}.main-nav a,.main-nav a:last-child{justify-content:flex-start;gap:10px;padding:12px}.main-nav a span{display:inline}.main-nav a:first-child{border-radius:9px}}
@media(max-width:420px){.hero{padding-inline:20px}.hero-photo-button{min-height:330px;height:112vw}.hero-credential{font-size:10px}.profile-photo-caption{font-size:8px}}
@media(prefers-reduced-motion:reduce){.hero-photo-button,.hero-photo-button:hover{transition:none;transform:none}.hero-photo-button.wiggle{animation:none}}

/* Scrapbook note treatment for the About overlay. */
.about-notes-section:not([hidden]){padding:88px clamp(22px,6vw,90px) 55px;background:#fdfdfc;}
.about-notes-heading{width:max-content;max-width:100%;margin:0 auto 38px;padding:11px 30px;background:#ffe100;box-shadow:0 3px 0 #d3bd23;transform:rotate(-4deg);}
.about-notes-heading .eyebrow{margin:0;color:#252525;font-family:var(--display-font)!important;font-size:clamp(16px,2vw,21px);font-weight:700;letter-spacing:.015em;text-transform:none;}
.about-notes-heading h2,.note-sticker{display:none}
.about-notes-board{max-width:1160px;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(34px,7vw,95px);align-items:center}
.about-note{min-height:0;padding:48px clamp(25px,3.5vw,45px) 36px;background-color:#fff;background-image:repeating-linear-gradient(to bottom,transparent 0 31px,#d9dcda 31px 32px);background-position:0 25px;background-size:100% 32px;border:0;box-shadow:0 8px 22px #1c27210d;clip-path:polygon(1% 1%,99% 0,100% 97%,96% 99%,84% 98%,73% 100%,57% 98%,43% 100%,28% 98%,14% 100%,0 97%);}
.about-note:before{left:14px;top:40px;bottom:24px;background:#e6c5bf}
.about-note p{font-size:clamp(15px,1.3vw,18px);line-height:32px;color:#252624;transform:rotate(-.3deg)}
.note-ai{transform:rotate(-2.5deg) translateY(0);animation:note-arrive-left .7s cubic-bezier(.2,.8,.2,1) both}
.note-creative{transform:rotate(2.1deg) translateY(0);animation:note-arrive-low .75s .13s cubic-bezier(.2,.8,.2,1) both}
.paper-tape{top:-7px;width:104px;height:28px;opacity:.96}
.tape-yellow{background:linear-gradient(90deg,#e0ad00,#ffc928 55%,#e8b700);transform:rotate(-3deg)}
.tape-blue{background:linear-gradient(90deg,#11b8e9,#40d6fa 55%,#12b8e7);transform:rotate(3deg)}
.about-notes-footer{margin-top:27px;color:#7a7d79;font-size:13px;letter-spacing:.06em}
.about-back{box-shadow:2px 3px 0 #e1e1de}
@keyframes note-arrive-left{from{opacity:0;translate:-18px 20px;rotate:-1deg}to{opacity:1;translate:0 0;rotate:-2.5deg}}
@keyframes note-arrive-low{from{opacity:0;translate:18px 24px;rotate:1deg}to{opacity:1;translate:0 0;rotate:2.1deg}}
@media(max-width:760px){.about-notes-section:not([hidden]){padding:78px 23px 42px}.about-notes-heading{margin-bottom:28px}.about-notes-board{grid-template-columns:1fr;gap:30px;max-width:570px}.about-note{padding:46px 27px 34px}.note-ai{transform:rotate(-1.4deg)}.note-creative{transform:rotate(1.3deg)}.about-notes-footer{text-align:center}}
@media(prefers-reduced-motion:reduce){.note-ai,.note-creative{animation:none}}
/* Refine About notes: one sheet per side, subtle torn dip, and professional text. */
.about-notes-board{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(56px,9vw,124px);align-items:center}
.about-note{position:relative;min-height:360px;padding:55px clamp(28px,4vw,48px) 40px;background-color:#fff;background-image:repeating-linear-gradient(to bottom,transparent 0 31px,#d9dcda 31px 32px);background-position:0 31px;background-size:100% 32px;clip-path:polygon(0 2%,4% 2%,4% 0,96% 0,96% 2%,100% 2%,100% 97%,95% 98%,86% 97%,76% 100%,64% 98%,52% 100%,40% 98%,28% 100%,15% 98%,5% 99%,0 97%)}
.about-note:after{content:"";position:absolute;top:-1px;left:calc(50% - 26px);width:52px;height:9px;background:#fdfdfc;clip-path:polygon(0 0,100% 0,96% 45%,89% 22%,80% 66%,69% 33%,58% 75%,48% 28%,35% 67%,25% 25%,14% 61%,6% 30%);}
.about-note p{position:relative;z-index:1;color:#25292b;font-family:var(--font)!important;font-size:clamp(15px,1.2vw,17px);font-weight:400;line-height:32px;letter-spacing:-.015em;transform:none}
.note-ai{transform:rotate(-1.7deg) translateY(-6px)}
.note-creative{transform:rotate(1.6deg) translateY(8px)}
.paper-tape{top:-8px;width:100px;height:25px;box-shadow:0 1px 2px #20201e16}
.tape-yellow{left:calc(50% - 50px)}
.tape-blue{left:calc(50% - 50px)}
.about-notes-heading .eyebrow{font-family:var(--display-font)!important;font-size:clamp(15px,1.7vw,19px);font-weight:700;letter-spacing:.01em}
@media(max-width:760px){.about-notes-board{grid-template-columns:1fr;gap:32px;max-width:570px}.about-note{min-height:0;padding:51px 28px 38px}.note-ai{transform:rotate(-1deg)}.note-creative{transform:rotate(1deg)}}
/* Keep About notes in distinct columns with enough room between them. */
.about-notes-section:not([hidden]){overflow-y:auto;overflow-x:hidden}
.about-notes-board{width:min(100%,1160px);grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(42px,8vw,110px);align-items:start}
.about-note{width:100%;min-width:0}
.note-ai{animation:note-arrive-left .7s cubic-bezier(.2,.8,.2,1) both}
.note-creative{animation:note-arrive-right .75s .13s cubic-bezier(.2,.8,.2,1) both}
@keyframes note-arrive-left{from{opacity:0;translate:-16px 14px;rotate:-1deg}to{opacity:1;translate:0 0;rotate:-2.5deg}}
@keyframes note-arrive-right{from{opacity:0;translate:16px 14px;rotate:1deg}to{opacity:1;translate:0 0;rotate:2.1deg}}
@media(max-width:760px){.about-notes-board{grid-template-columns:1fr;gap:32px;max-width:570px}.about-note{max-width:100%}.note-ai{animation:note-arrive-left .7s ease both}.note-creative{animation:note-arrive-right .75s .13s ease both}}
@media(prefers-reduced-motion:reduce){.note-ai,.note-creative{animation:none}}
/* The About story now uses two short notes on the left and one long note on the right. */
.about-notes-section:not([hidden]){padding-top:84px}
.about-notes-heading{margin-bottom:40px}
.about-notes-heading{margin-top:26px!important}
.about-notes-heading .eyebrow{text-transform:none;letter-spacing:.01em}
.about-notes-board{grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);grid-template-rows:auto auto;gap:32px clamp(44px,7vw,88px);align-items:stretch}
.about-note{min-height:0;padding:52px clamp(25px,3.1vw,40px) 34px}
.about-note p{font-size:clamp(14px,1.13vw,16px);line-height:30px;letter-spacing:-.01em}
.about-note p+p{margin-top:18px}
.about-note strong{font-weight:700;color:#26373e}
.about-note em{font-style:italic}
.note-one{grid-column:1;grid-row:1;transform:rotate(-1.7deg);animation:note-arrive-left .7s cubic-bezier(.2,.8,.2,1) both}
.note-two{grid-column:1;grid-row:2;transform:rotate(1.5deg);animation:note-arrive-low .75s .13s cubic-bezier(.2,.8,.2,1) both}
.note-three{grid-column:2;grid-row:1 / span 2;align-self:stretch;transform:rotate(1.1deg);animation:note-arrive-right .8s .22s cubic-bezier(.2,.8,.2,1) both}
.tape-pink{background:linear-gradient(90deg,#d75b9b,#f17db5 55%,#dc609c);transform:rotate(2deg)}
.note-one .paper-tape{left:calc(50% - 50px)}
.note-two .paper-tape{left:calc(50% - 50px)}
.note-three .paper-tape{left:calc(50% - 50px)}
@media(max-width:760px){.about-notes-section:not([hidden]){padding-top:76px}.about-notes-board{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:30px;max-width:570px}.note-one,.note-two,.note-three{grid-column:1;grid-row:auto;min-height:0}.note-one{transform:rotate(-1deg)}.note-two{transform:rotate(1deg)}.note-three{transform:rotate(-.6deg)}}
@media(prefers-reduced-motion:reduce){.note-one,.note-two,.note-three{animation:none}}
/* Staggered sticky-note pile with clear content, and neighbors that make room on hover/focus. */
.about-notes-board{position:relative;gap:27px clamp(42px,6vw,78px);}
.about-note{z-index:1;cursor:default;transition:transform .38s cubic-bezier(.2,.75,.25,1),box-shadow .38s,filter .38s;}
.about-note:focus-visible{outline:3px solid #527b91;outline-offset:7px;z-index:6}
.about-note p{color:#263137}
.note-one{background-color:#e6f2fb;background-image:repeating-linear-gradient(to bottom,transparent 0 31px,#b7d3e384 31px 32px)}
.note-two{background-color:#f0f0d4;background-image:repeating-linear-gradient(to bottom,transparent 0 31px,#d1d4a784 31px 32px)}
.note-three{background-color:#e3efda;background-image:repeating-linear-gradient(to bottom,transparent 0 31px,#bfd2b184 31px 32px)}
.tape-pink{background:linear-gradient(90deg,#b8c9ae,#d0ddc5 55%,#b8c9ae);transform:rotate(2deg)}
.note-one .paper-tape{background:linear-gradient(90deg,#87b9e2,#a5cff0 55%,#87b9e2)}
.note-three .paper-tape{background:linear-gradient(90deg,#9cc187,#b4d29f 55%,#9cc187)}
.note-one:hover,.note-one:focus{z-index:5;transform:translateY(-7px) rotate(-1.7deg) scale(1.025);box-shadow:0 18px 34px #20343d24;filter:saturate(1.04)}
.note-two:hover,.note-two:focus{z-index:5;transform:translateY(-7px) rotate(1.5deg) scale(1.025);box-shadow:0 18px 34px #20343d24;filter:saturate(1.04)}
.note-three:hover,.note-three:focus{z-index:5;transform:translateY(-7px) rotate(1.1deg) scale(1.025);box-shadow:0 18px 34px #20343d24;filter:saturate(1.04)}
.about-notes-board[data-active="note-one"] .note-two{transform:translate(-17px,22px) rotate(3deg)}
.about-notes-board[data-active="note-one"] .note-three{transform:translate(22px,-8px) rotate(2.5deg)}
.about-notes-board[data-active="note-two"] .note-one{transform:translate(-16px,-17px) rotate(-3deg)}
.about-notes-board[data-active="note-two"] .note-three{transform:translate(22px,12px) rotate(-1.4deg)}
.about-notes-board[data-active="note-three"] .note-one{transform:translate(-20px,-12px) rotate(-3.1deg)}
.about-notes-board[data-active="note-three"] .note-two{transform:translate(-18px,17px) rotate(3deg)}
.about-notes-board[data-active="note-one"] .note-one,.about-notes-board[data-active="note-two"] .note-two,.about-notes-board[data-active="note-three"] .note-three{z-index:5;box-shadow:0 18px 34px #20343d24}
@media(max-width:760px){.about-notes-board[data-active="note-one"] .note-two,.about-notes-board[data-active="note-one"] .note-three,.about-notes-board[data-active="note-two"] .note-one,.about-notes-board[data-active="note-two"] .note-three,.about-notes-board[data-active="note-three"] .note-one,.about-notes-board[data-active="note-three"] .note-two{transform:none}.about-note:hover,.about-note:focus{transform:translateY(-4px) rotate(0) scale(1.01)}}
@media(prefers-reduced-motion:reduce){.about-note{transition:none}.about-notes-board[data-active] .about-note{transform:none}}
/* Place the three About notes in a single left-to-right row on desktop. */
.about-notes-board{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto;gap:clamp(18px,2.6vw,38px);align-items:stretch;}
.note-one,.note-two,.note-three{grid-column:auto;grid-row:auto;align-self:stretch;min-height:360px;}
.note-one{transform:rotate(-1.5deg)}
.note-two{transform:rotate(1.1deg)}
.note-three{transform:rotate(-.8deg)}
.about-note{padding:50px clamp(17px,2vw,28px) 30px}
.about-note p{font-size:clamp(13px,1vw,15px);line-height:1.75}
.about-notes-board[data-active="note-one"] .note-two{transform:translateX(14px) rotate(2.5deg)}
.about-notes-board[data-active="note-one"] .note-three{transform:translateX(22px) rotate(1.7deg)}
.about-notes-board[data-active="note-two"] .note-one{transform:translateX(-18px) rotate(-2.8deg)}
.about-notes-board[data-active="note-two"] .note-three{transform:translateX(18px) rotate(1.8deg)}
.about-notes-board[data-active="note-three"] .note-one{transform:translateX(-22px) rotate(-2.8deg)}
.about-notes-board[data-active="note-three"] .note-two{transform:translateX(-14px) rotate(2.5deg)}
@media(max-width:900px){.about-notes-board{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;gap:28px}.note-one,.note-two,.note-three{grid-column:auto;grid-row:auto;min-height:0}.note-three{grid-column:1/-1;max-width:calc(50% - 14px);justify-self:center}}
@media(max-width:620px){.about-notes-board{grid-template-columns:1fr;gap:30px;max-width:570px}.note-one,.note-two,.note-three{grid-column:1;grid-row:auto;max-width:100%;min-height:0}.about-note{padding:51px 28px 38px}.about-note p{font-size:15px;line-height:1.8}.about-notes-board[data-active] .about-note{transform:none}.about-note:hover,.about-note:focus{transform:translateY(-4px) rotate(0) scale(1.01)}}
/* White-only note cards, separated left-to-right by default. */
.about-notes-section:not([hidden]){background:#fff}
.about-notes-heading{background:#fff;box-shadow:none;border-bottom:1px solid #eceeef}
.about-notes-heading{width:max-content;max-width:100%;margin:0 auto 40px;padding:0 0 12px;transform:none;rotate:0;}
.about-notes-heading .eyebrow{margin:0;color:#20272a;font-family:var(--display-font)!important;font-size:clamp(28px,4vw,42px);font-weight:700;letter-spacing:-.04em;text-transform:none}
.about-notes-heading .note-sticker{display:none}
.about-note .paper-tape{display:block;height:23px;opacity:.96;background:linear-gradient(90deg,#fff,#f4f5f4 50%,#fff)!important;border:1px solid #e8eaea;box-shadow:0 2px 5px #20272a12;clip-path:polygon(2% 5%,98% 0,100% 92%,3% 100%,0 85%)}
.about-note strong{font-weight:700;color:#20272a}
.about-note em{font-style:italic;font-weight:600;text-decoration:underline;text-decoration-color:#aebfc6;text-decoration-thickness:2px;text-underline-offset:3px}
.about-note .paper-tape{display:none!important}
.about-notes-board{width:min(100%,1120px);margin-inline:auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.5vw,34px);transform:translateX(clamp(0px,3vw,48px));}
.about-note{padding-top:38px}
.about-note .internship-name{text-decoration:underline;text-decoration-color:#527b91;text-decoration-thickness:2px;text-underline-offset:3px}
.about-note em{text-decoration:none!important;font-style:italic;font-weight:400}
.about-note .qualification-highlight{text-decoration:underline;text-decoration-color:#527b91;text-decoration-thickness:2px;text-underline-offset:3px}
.about-note .about-keyword{font-weight:600;text-decoration:underline!important;text-decoration-color:#718995!important;text-decoration-thickness:1.5px;text-underline-offset:3px}
/* Keep the same header above the About overlay and highlight its active nav icon. */
body.about-notes-open .site-header{position:fixed;top:0;left:0;right:0;z-index:80;background:#fff}
body.about-notes-open .main-nav a:first-child:not([aria-current]){background:transparent;color:#40494d}
.main-nav a[aria-current="page"]{background:#20272a;color:#fff}
.main-nav a[aria-current="page"] .nav-icon{stroke:#fff}
.main-nav a[aria-current="location"]{background:#20272a;color:#fff}
.main-nav a[aria-current="location"] .nav-icon{stroke:#fff}
.about-notes-section:not([hidden]){padding-top:142px}
.about-back{position:fixed;top:88px;left:clamp(20px,6vw,80px);width:42px;height:42px;justify-content:center;gap:0;padding:0;border-radius:50%;box-shadow:0 2px 8px #20272a12}
.about-back span:first-child{width:100%;height:100%;background:transparent;font-size:22px}
.about-back span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:760px){body.about-notes-open .site-header{z-index:80}.about-notes-section:not([hidden]){padding-top:132px}.about-back{top:78px;left:20px}}
.slot-machine.is-jackpot .slot-marquee{animation:jackpot-sign-glow 1.8s ease-in-out infinite;box-shadow:inset 0 3px 8px #0009,0 0 16px 4px #edce5a88}
.slot-machine.is-jackpot .slot-marquee h3{ text-shadow:0 0 8px #ffe77e,2px 2px #536d78 }
.slot-machine.is-jackpot .marquee-star{color:#ffe77e;text-shadow:0 0 7px #ffe77e,0 0 15px #edce5a}
@keyframes jackpot-sign-glow{0%,100%{box-shadow:inset 0 3px 8px #0009,0 0 14px 3px #edce5a66}50%{box-shadow:inset 0 3px 8px #0009,0 0 24px 8px #edce5abb}}
@media(prefers-reduced-motion:reduce){.slot-machine.is-jackpot .slot-marquee{animation:none}}
.jackpot-heading .section-intro{white-space:nowrap;font-size:clamp(13px,1.7vw,17px)}
.jackpot-heading .section-intro{font-size:clamp(13px,1.7vw,17px);white-space:nowrap}
@media(max-width:600px){.jackpot-heading .section-intro{font-size:13px}}
.selected-project-title{padding:0;border:0;background:transparent;text-align:left;font:inherit;color:inherit;cursor:pointer}
.selected-project-title:disabled{cursor:default}
.selected-project-title:not(:disabled):hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.projects-page{background:#fff;background-image:none}
.projects-page .main-nav a:first-child:not([aria-current]){background:transparent;color:#40494d}
.projects-page .main-nav a[aria-current="page"]{background:#20272a;color:#fff}
.projects-page .main-nav a[aria-current="page"] .nav-icon{stroke:#fff}
.projects-page-main{max-width:1200px;margin:0 auto;padding:10px clamp(22px,6vw,80px) 90px}
.project-page-back{display:inline-flex;align-items:center;gap:10px;margin:22px 0 35px;padding:9px 15px;border:1px solid #c5cccd;border-radius:99px;background:#fff;color:#344951;box-shadow:2px 3px 0 #e4e9e9;transition:transform .2s,box-shadow .2s}
.project-page-back:hover{transform:translateX(-3px);box-shadow:4px 4px 0 #e4e9e9}
.project-page-back span{font-size:21px}
.projects-page-intro{max-width:780px;margin:0 auto 70px;text-align:center}
.projects-page-intro .eyebrow,.project-story-header .eyebrow{color:#6c8189;font-size:11px;letter-spacing:.16em}
.projects-page-intro h1{margin:0 0 18px;font-family:var(--display-font)!important;font-size:clamp(48px,8vw,86px);line-height:1;color:#20272a}
.projects-page-intro>p:last-child{margin:0 auto;color:#60696b;font-size:clamp(17px,2vw,21px);line-height:1.6}
.project-story{max-width:1000px;margin:0 auto 60px;padding:0 0 62px;border-bottom:1px solid #dce1e2;scroll-margin-top:100px}
.project-story:last-child{border-bottom:0}
.project-story-header{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:center;margin:0 auto 24px;padding:30px 0 12px;max-width:1000px}
.project-story-header>div{grid-column:1;grid-row:1}
.project-story-header h1{margin:0 0 13px;font-family:var(--display-font)!important;font-size:clamp(34px,5vw,58px);line-height:1.03;color:#20272a}
.project-tech-inline{margin:0 0 13px}
.project-tech{display:flex;flex-wrap:wrap;gap:6px}
.project-tech code{display:inline-block;padding:4px 9px;border:1px solid #dbe2e3;border-radius:99px;background:#f6f8f8;color:#47595f;font-family:var(--font);font-size:12px;line-height:1.4}
.project-story-body{max-width:1000px;margin:0 auto;color:#434d50;font-size:17px;line-height:1.75}
.project-story-body h2{margin:40px 0 12px;font-family:var(--display-font)!important;font-size:clamp(22px,3vw,30px);line-height:1.15;color:#243034}
.project-story-body p{margin:0 0 16px}
.project-story-body ul{margin:0 0 20px;padding-left:24px}
.project-story-body li{padding-left:4px;margin:0 0 7px}
.project-story-body code{display:inline-block;margin:3px 3px 3px 0;padding:2px 9px;border:1px solid #dbe2e3;border-radius:99px;background:#f6f8f8;color:#47595f;font-family:var(--font);font-size:13px;line-height:1.5}
.project-story-body .project-tech-heading{margin-bottom:10px}
@media(max-width:700px){.projects-page-main{padding:5px 22px 60px}.projects-page-intro{margin-bottom:44px}.project-story{margin-bottom:42px;padding-bottom:38px}.project-story-header{grid-template-columns:1fr;gap:0;margin-bottom:28px;padding-top:18px}.project-story-header>div{grid-column:1;grid-row:1}.project-story-body{font-size:16px}.project-story-body h2{margin-top:32px}.project-tech-inline code{font-size:11px;padding:4px 8px}}
.project-story-body .project-keyword{font-style:italic}
.project-tech code{font-style:italic}
.project-content-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"problem solution" "demo demo" "developer developer";gap:18px;align-items:stretch}
.project-copy-block[data-section="problem"]{grid-area:problem}
.project-copy-block[data-section="solution"]{grid-area:solution}
.project-copy-block[data-section="how"]{grid-area:how}
.project-copy-block[data-section="developer"]{grid-area:developer}
.project-copy-block[data-section="credits"]{grid-column:1/-1}
.project-demo-card{grid-area:demo;align-self:center;justify-self:center;width:min(100%,780px);min-width:0;margin:0;padding:12px;background:#fff;border:1px solid #e4e9eb;border-radius:10px;box-shadow:0 8px 22px #3449510a}
.project-demo-card figcaption{margin:1px 2px 9px;color:#607481;font-family:var(--display-font);font-size:13px;font-weight:600;letter-spacing:.04em}
.project-demo-card video{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;object-position:center;background:#111820;border-radius:6px}
.project-copy-block{position:relative;min-width:0;padding:23px 25px 21px;background:#fff;border:1px solid #e4e9eb;border-top:3px solid #7897b5;box-shadow:0 8px 22px #3449510a;transition:transform .22s ease,box-shadow .22s ease}
.project-copy-block:hover,.project-copy-block:focus-within{transform:translateY(-3px);box-shadow:0 14px 28px #34495117}
.project-copy-block:nth-child(3n+2){border-top-color:#a3b5c3}
.project-copy-block:nth-child(3n){border-top-color:#516f88}
.project-copy-block h2{margin:0 0 14px;font-family:var(--display-font)!important;font-size:clamp(19px,2.3vw,25px);line-height:1.15;letter-spacing:-.025em;color:#35546c}
.project-copy-block p{margin:0 0 13px;font-size:15px;line-height:1.7}
.project-copy-block p:last-child{margin-bottom:0}
.project-copy-block ul{margin:0;padding-left:20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 24px}
.project-copy-block ol{margin:0;padding-left:22px;display:grid;grid-template-columns:1fr;gap:8px}
.project-copy-block li{padding-left:2px;font-size:14px;line-height:1.6}
@media(max-width:700px){.project-content-grid{grid-template-columns:1fr;grid-template-areas:"problem" "solution" "demo" "developer";gap:13px}.project-copy-block[data-section="credits"]{grid-column:1}.project-copy-block{padding:19px 20px}.project-copy-block ul,.project-copy-block ol{grid-template-columns:1fr}.project-copy-block p{font-size:14px}}
@media(max-width:900px){.about-notes-board{transform:none;grid-template-columns:repeat(2,minmax(0,1fr))}.note-three{grid-column:1/-1;max-width:calc(50% - 14px)}}
@media(max-width:620px){.about-notes-board{transform:none;grid-template-columns:1fr}.note-three{grid-column:1;max-width:100%}}
.about-notes-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto;gap:clamp(22px,3vw,42px);align-items:stretch;overflow:visible}
.note-one,.note-two,.note-three{grid-column:auto;grid-row:auto;min-height:0;align-self:stretch}
.note-one{transform:rotate(-1deg)}
.note-two{transform:rotate(.7deg)}
.note-three{transform:rotate(-.5deg)}
.about-note{background-color:#fff!important;background-image:repeating-linear-gradient(to bottom,transparent 0 31px,#eceeef 31px 32px)!important;border:1px solid #f0f1f1;box-shadow:0 7px 22px #20272a0c;clip-path:none;border-radius:2px;}
.about-note:before,.about-note:after{display:none}
.note-one .paper-tape,.note-two .paper-tape,.note-three .paper-tape{left:calc(50% - 50px)}
.tape-yellow,.note-one .paper-tape{background:linear-gradient(90deg,#f6f6f4,#fff 55%,#f4f4f2);border:1px solid #eeeeeb}
.tape-pink,.note-two .paper-tape{background:linear-gradient(90deg,#f6f6f4,#fff 55%,#f4f4f2);border:1px solid #eeeeeb}
.tape-blue,.note-three .paper-tape{background:linear-gradient(90deg,#f6f6f4,#fff 55%,#f4f4f2);border:1px solid #eeeeeb}
.about-note:hover,.about-note:focus{box-shadow:0 16px 32px #20272a17}
.about-notes-board[data-active="note-one"] .note-two{transform:translateX(12px) rotate(1.7deg)}
.about-notes-board[data-active="note-one"] .note-three{transform:translateX(19px) rotate(.8deg)}
.about-notes-board[data-active="note-two"] .note-one{transform:translateX(-14px) rotate(-1.8deg)}
.about-notes-board[data-active="note-two"] .note-three{transform:translateX(14px) rotate(1deg)}
.about-notes-board[data-active="note-three"] .note-one{transform:translateX(-19px) rotate(-1.8deg)}
.about-notes-board[data-active="note-three"] .note-two{transform:translateX(-12px) rotate(1.7deg)}
@media(max-width:900px){.about-notes-board{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;gap:28px}.note-one,.note-two,.note-three{grid-column:auto;grid-row:auto;min-height:0}.note-three{grid-column:1/-1;max-width:calc(50% - 14px);justify-self:center}}
@media(max-width:620px){.about-notes-board{grid-template-columns:1fr;gap:30px;max-width:570px}.note-one,.note-two,.note-three{grid-column:1;grid-row:auto;max-width:100%;min-height:0}.about-notes-board[data-active] .about-note{transform:none}.about-note:hover,.about-note:focus{transform:translateY(-4px) scale(1.01)}}
.about-note{background-image:none!important}

/* About Me: editorial photo-led layout based on the supplied reference. */
.about-notes-heading{width:min(100%,900px)!important;margin:0 auto 24px!important;padding:0!important;border:0!important;text-align:center}
.about-notes-heading .eyebrow{margin:0!important;color:#20201e!important;font-family:var(--portfolio-display-font)!important;font-size:clamp(38px,6vw,68px)!important;font-weight:800!important;letter-spacing:-.055em!important;text-transform:lowercase!important}
.about-subtitle{margin:3px 0 0;color:#666;font-size:15px;line-height:1.35}
.about-notes-board.about-scrapbook{width:min(100%,940px);margin:0 auto;display:grid;grid-template-columns:minmax(230px,.78fr) minmax(0,1.22fr);align-items:center;gap:clamp(28px,6vw,72px);transform:none}
.about-photo-frame{position:relative;width:100%;max-width:350px;justify-self:center;padding:10px;background:#fff;box-shadow:0 10px 28px #20201e24;transform:rotate(-2deg)}
.about-photo-frame:before{content:"";position:absolute;inset:8px;border:1px solid #d7d8d5;pointer-events:none}
.about-photo-card{display:block;margin:0;overflow:hidden;background:#d7d7d5}
.about-photo-card img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 25%;filter:saturate(.84)}
.about-photo-caption{position:absolute;right:-27px;bottom:19px;padding:9px 14px;background:#dbe8eb;color:#263d45;font-size:14px;font-weight:700;transform:rotate(5deg)}
.about-story{max-width:650px;color:#30312f;font-size:clamp(16px,1.65vw,20px);line-height:1.62}
.about-story p{margin:0 0 18px}
.about-story strong{font-weight:750;color:#1e3857}
.about-story .about-lead{font-size:clamp(19px,2vw,24px);line-height:1.45}
.about-story .about-signoff{margin:24px 0 0;padding-top:14px;border-top:1px solid #c9cbc7;font-size:16px;font-weight:700;color:#315d89}
.about-scrapbook .paper-tape,.about-scrapbook .note-sticker{display:none!important}
.about-notes-board.about-scrapbook{grid-template-columns:minmax(280px,.86fr) minmax(0,1.14fr);gap:clamp(38px,7vw,92px);align-items:start}
.about-photo-frame{max-width:390px;justify-self:start}
.about-story{padding-top:8px}
.about-notes-section:not([hidden]){background:#292a29!important;color:#efeee9!important;padding:54px clamp(24px,7vw,100px) 64px!important}
.about-notes-heading{position:relative;width:min(100%,1100px)!important;margin:0 auto 26px!important;text-align:left!important}
.about-notes-heading .eyebrow{color:#efeee9!important;font-family:var(--portfolio-body-font)!important;font-size:clamp(100px,22vw,300px)!important;font-weight:800!important;line-height:.68!important;letter-spacing:-.095em!important;text-transform:lowercase!important}
.about-notes-heading .about-subtitle{position:absolute;left:5px;bottom:-17px;margin:0;color:#efeee9;font-size:clamp(17px,2.3vw,26px);font-weight:650}
.about-notes-board.about-scrapbook{width:min(100%,1100px);grid-template-columns:minmax(260px,.82fr) minmax(0,1.18fr);gap:clamp(30px,6vw,78px);align-items:start}
.about-photo-frame{max-width:440px;padding:8px;border:3px solid #efeee9;border-radius:15px;background:#efeee9;box-shadow:none;transform:none}
.about-photo-frame:before{display:none}
.about-photo-card{border-radius:9px}
.about-photo-card img{aspect-ratio:1;filter:grayscale(1);object-position:center 22%}
.about-photo-caption{right:-21px;bottom:18px;border:1px solid #efeee9;border-radius:7px;background:#292a29;color:#efeee9;transform:rotate(-5deg)}
.about-story{padding-top:0;color:#efeee9;font-size:clamp(15px,1.3vw,18px);line-height:1.55}
.about-story strong{color:#fff;font-weight:800}
.about-story .about-lead{font-size:clamp(22px,2.5vw,32px);line-height:1.25}
.about-story .about-signoff{border-color:#858581;color:#efeee9}
.about-back{border:1px solid #efeee9!important;background:#292a29!important;color:#efeee9!important}
@media(max-width:760px){.about-notes-section:not([hidden]){padding:118px 22px 42px}.about-notes-heading{margin-bottom:20px!important}.about-notes-board.about-scrapbook{grid-template-columns:1fr;gap:28px;max-width:560px}.about-photo-frame{width:min(78%,330px);grid-row:1}.about-photo-caption{right:-25px;bottom:16px}.about-story{font-size:16px;line-height:1.6}.about-story p{margin-bottom:16px}.about-story .about-lead{font-size:20px}}
@media(max-width:760px){.about-notes-section:not([hidden]){padding:105px 24px 42px!important}.about-notes-heading .eyebrow{font-size:clamp(108px,25vw,190px)!important;line-height:.7!important}.about-notes-heading .about-subtitle{position:static;margin:18px 0 0 4px;font-size:18px}.about-notes-board.about-scrapbook{grid-template-columns:minmax(0,1fr) minmax(118px,.7fr);gap:22px 16px;align-items:start}.about-photo-frame{grid-column:2;grid-row:1;width:100%;max-width:240px;justify-self:end}.about-story{grid-column:1/-1;grid-row:2}.about-photo-caption{right:-13px;bottom:12px;padding:6px 9px;font-size:12px}.about-story .about-lead{font-size:23px}}
/* White-only color treatment while preserving the editorial About layout. */
.about-notes-section:not([hidden]){background:#fff!important;color:#20201e!important}
.about-notes-heading .eyebrow{color:#20201e!important}
.about-notes-heading .about-subtitle{color:#555!important}
.about-story,.about-story p,.about-story .about-lead{color:#20201e!important}
.about-story strong{color:#111!important}
.about-story .about-signoff{color:#20201e!important;border-color:#cfcfcf!important}
.about-photo-frame{background:#fff!important;border-color:#fff!important;box-shadow:0 8px 24px #00000018!important}
.about-photo-caption{background:#fff!important;color:#20201e!important;border-color:#20201e!important}
.about-back{background:#fff!important;color:#20201e!important;border-color:#aaa!important}
.about-back span:first-child{background:#f3f3f3!important;color:#20201e!important}
.about-notes-heading{text-align:center!important}
.about-notes-heading .eyebrow{white-space:nowrap!important;font-size:clamp(56px,11vw,150px)!important;line-height:.9!important;letter-spacing:-.075em!important}
.about-notes-heading .about-subtitle{position:static!important;margin:12px 0 0!important;text-align:center!important;color:#555!important}
.about-notes-board.about-scrapbook{align-items:center!important}
.about-photo-card img{filter:none!important}
.about-story,.about-story p,.about-story .about-lead{font-family:var(--portfolio-body-font),Arial,sans-serif!important;font-size:clamp(15px,1.15vw,16px)!important;font-weight:400!important;line-height:1.65!important;color:#20201e!important}
.about-story p{margin:0 0 18px!important}
.about-story .about-lead{font-size:clamp(15px,1.15vw,16px)!important}
.about-story strong{font-size:inherit!important;font-weight:700!important;color:#20201e!important}
.about-story em{font-size:inherit!important;font-style:italic!important;font-weight:600!important;color:#20201e!important}
.about-story .about-signoff{font-size:clamp(15px,1.15vw,16px)!important;font-weight:400!important}
.about-photo-card img{aspect-ratio:auto!important;height:auto!important;max-height:72vh;object-fit:contain!important;object-position:center!important;background:#fff}
.about-photo-frame{padding:0!important;border:0!important;border-radius:0!important;overflow:hidden!important}
.about-photo-card{width:100%!important;border-radius:0!important;overflow:hidden!important}
.about-photo-card{height:100%!important;min-height:0;}
.about-photo-card img{display:block;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;object-fit:cover!important;object-position:center 14%!important}
.about-photo-frame{height:min(68vh,720px)!important;max-width:340px!important;align-self:center!important;overflow:hidden!important}
.about-photo-card{height:100%!important;overflow:hidden!important}
.about-photo-card img{height:100%!important;object-fit:cover!important;object-position:center 12%!important}
.about-photo-frame{padding:8px!important;border:0!important;background:#fff!important}
.about-story em{font-weight:400!important}
@media(max-width:760px){.about-notes-heading .eyebrow{font-size:clamp(50px,13vw,90px)!important}.about-notes-heading .about-subtitle{text-align:center!important}.about-notes-board.about-scrapbook{align-items:start!important}}
.projects-page-intro h1{font-size:clamp(28px,4vw,42px)}
.project-page-back{width:42px;height:42px;justify-content:center;gap:0;padding:0;border-radius:50%;font-size:0}
.project-page-back span{font-size:22px;line-height:1}
.project-demo-card figcaption{display:none}
.project-copy-block[data-section="problem"] h2,.project-copy-block[data-section="solution"] h2{font-style:italic}
.projects-page-main{padding-top:0}
.project-page-back{margin:-3px 0 0 clamp(-72px,-4vw,-36px)}
.projects-page-intro{margin-top:-3px;margin-bottom:40px}
.projects-page-intro h1{margin-top:0;font-size:clamp(28px,4vw,42px)}
.project-story-header{padding:0 0 4px;margin-bottom:14px}
.project-story-header h1{margin-bottom:.5cm}
.project-tech-inline{margin:0}
.project-copy-block[data-section="problem"] h2,.project-copy-block[data-section="solution"] h2,.project-copy-block[data-section="developer"] h2{font-size:clamp(16px,1.55vw,19px);font-style:italic}
@media(max-width:700px){.project-page-back{margin:-2px 0 0 -12px}.projects-page-intro{margin-bottom:30px}.project-story-header{padding:0;margin-bottom:12px}.project-story-header h1{margin-bottom:.5cm}}

/* Looping postcard collage: an intact horizontal strip scatters into a loose full-screen layout. */
.gallery-section{position:relative;height:200svh;min-height:0;padding:0;overflow:visible;background:#fff;background-image:none}
.sketch-stage{position:sticky;top:76px;width:100%;height:calc(100svh - 76px);overflow:hidden;background:#fff}
.sketch-heading{position:absolute;z-index:20;top:clamp(22px,5vh,56px);left:50%;width:min(560px,calc(100% - 40px));text-align:center;transform:translate(-50%,calc(var(--scatter-progress,0) * -20px));transition:opacity .12s linear;pointer-events:none}
.sketch-heading h2{margin:0;color:#20201e;font-size:clamp(32px,4vw,48px);letter-spacing:-.035em;line-height:1}
.sketch-heading p{margin:10px auto 0;max-width:560px;color:#64645f;font-size:clamp(15px,1.5vw,19px);line-height:1.4}
.sketch-description{position:absolute;z-index:20;left:50%;bottom:clamp(22px,5vh,52px);width:min(760px,calc(100% - 40px));margin:0;color:#555550;font-size:clamp(14px,1.35vw,17px);line-height:1.5;text-align:center;transform:translateX(-50%);transition:opacity .12s linear;pointer-events:none}
.sketch-gallery{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;overflow:visible;pointer-events:none}
.sketch-gallery:focus-visible{outline:none}
.sketch-postcard{position:absolute;top:50%;width:min(8vw,170px);min-width:0;height:auto;padding:3px;border:1px solid #dfddd6;border-radius:1px;background:#fff;color:#303a3e;transform:translate(-50%,-50%) rotate(var(--motion-rotation,0deg)) scale(var(--motion-scale,1));transform-origin:center;transition:translate .5s cubic-bezier(.2,.75,.25,1);pointer-events:auto;cursor:pointer}
.sketch-postcard.is-hovered{z-index:100!important}
.sketch-postcard.is-pushed-away{pointer-events:none}
.postcard-photo{display:block;width:100%;line-height:0;background:#fff}
.postcard-photo img{display:block;width:100%;height:auto;object-fit:contain}
.sketch-postcard:hover,.sketch-postcard:focus-visible{outline:none}
.sketch-lightbox{position:fixed;width:auto;height:auto;max-width:calc(100vw - 28px);max-height:calc(100vh - 28px);padding:0;border:0;border-radius:0;background:transparent;color:#28343a;box-shadow:none;overflow:visible}
.sketch-lightbox::backdrop{background:#17252d9c;backdrop-filter:blur(4px)}
.sketch-lightbox form{position:absolute;top:-14px;right:-14px;z-index:1}
.sketch-lightbox-close{width:40px;height:40px;border:1px solid #d9dede;border-radius:50%;background:#fff;color:#28343a;font-size:27px;line-height:1}
.sketch-lightbox>img{display:block;width:auto;max-width:calc(100vw - 28px);height:auto;max-height:calc(100svh - 28px);object-fit:contain;background:transparent;box-shadow:none}
@media(max-width:760px){.gallery-section{height:190svh}.sketch-stage{top:64px;height:calc(100svh - 64px)}.sketch-postcard{width:min(14vw,calc((100vw - 12px)/6))}.sketch-heading{top:20px;width:min(460px,calc(100% - 36px))}.sketch-heading p{margin-inline:auto}.sketch-description{bottom:16px;width:calc(100% - 32px);font-size:13px;line-height:1.35}}
@media(max-width:600px){.sketch-lightbox{padding:12px 10px}.sketch-lightbox figure{padding-inline:8px}.sketch-lightbox img{max-height:70vh}}
.community-doodle-section{padding-top:64px;padding-bottom:80px;background:#fff;background-image:none}
.community-doodle-section .doodle-card{margin-top:0}
@media(max-width:600px){.doodle-card-heading{min-height:116px}.doodle-card-heading>div{max-width:calc(100% - 100px)}.community-sticker-sheet{width:100px;top:-8px}.doodle-card-heading p:last-child{font-size:14px}.doodle-controls{gap:10px}}

/* Contact files: lift a tab to reveal each temporary contact detail. */
.contact-section{align-items:center;gap:clamp(28px,5vw,72px)}
.contact-folder-prompt{margin:24px 0 0;color:#527b91;font-size:15px;letter-spacing:.02em}
.contact-folder-prompt span{display:inline-block;margin-left:7px}
.contact-art{position:relative;width:100%;height:auto;min-height:0;overflow:visible}
.contact-art .social-links{position:relative;inset:auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;gap:clamp(7px,1vw,14px);width:100%;min-height:0;margin:0;padding:22px 0 8px}
.contact-folder{--folder-accent:#dce9ef;position:relative;display:block;width:100%;min-width:0;min-height:194px;padding:24px 0 0;border:0;background:transparent;text-align:left;cursor:pointer;transition:transform .28s cubic-bezier(.2,.75,.25,1)}
.contact-folder:nth-child(2){--folder-accent:#e4ecdc}.contact-folder:nth-child(3){--folder-accent:#dfe5f0}.contact-folder:nth-child(4){--folder-accent:#e8e9f1}.contact-folder:nth-child(5){--folder-accent:#e8e8df}
.contact-folder-tab{position:absolute;z-index:2;top:0;left:7px;display:flex;align-items:center;justify-content:center;min-height:34px;max-width:calc(100% - 14px);padding:6px 9px;border:1px solid #c8d8df;border-bottom:0;border-radius:8px 8px 0 0;background:var(--folder-accent);color:#334650;font-size:clamp(10px,.88vw,13px);line-height:1.1;text-align:center;transition:transform .28s cubic-bezier(.2,.75,.25,1);transform-origin:bottom left}
.contact-folder-paper{position:relative;display:flex;align-items:flex-start;min-height:170px;padding:35px 9px 14px;border:1px solid #d5e0e4;border-radius:2px 8px 10px 10px;background:linear-gradient(var(--folder-accent),var(--folder-accent)) top/100% 9px no-repeat,#fff;box-shadow:0 7px 14px #283b4712;transition:box-shadow .25s}
.contact-folder-detail{display:block;max-height:0;overflow:hidden;color:#405968;font-size:clamp(10px,.92vw,14px);line-height:1.35;overflow-wrap:anywhere;opacity:0;transform:translateY(8px);transition:max-height .35s ease,opacity .25s ease,transform .3s ease}
.contact-folder:hover .contact-folder-paper,.contact-folder:focus-visible .contact-folder-paper,.contact-folder.is-open .contact-folder-paper{box-shadow:0 11px 20px #283b4720}
.contact-folder.is-open{transform:translateY(-7px)}
.contact-folder.is-open .contact-folder-tab{transform:translateY(-8px)}
.contact-folder.is-open .contact-folder-detail{max-height:110px;opacity:1;transform:translateY(0)}
.contact-folder:focus-visible{outline:2px solid #527b91;outline-offset:3px}
.doodle-tool-icon{width:28px;height:28px;background-size:56px 31px}
@media(max-width:760px){.contact-section{grid-template-columns:1fr}.contact-art{height:auto;min-height:0}.contact-art .social-links{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.contact-folder{min-height:175px}.contact-folder-paper{min-height:150px}.contact-folder-tab{font-size:12px}}
@media(max-width:500px){.contact-art .social-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}.contact-folder{min-height:168px}.contact-folder-paper{min-height:144px}.contact-folder-tab{font-size:12px}}
@media(prefers-reduced-motion:reduce){.contact-folder,.contact-folder-tab,.contact-folder-detail,.contact-folder-paper{transition:none}}

/* Accessible live contact links over the supplied library-pocket artwork. */
.contact-section{min-height:auto;padding-bottom:50px}
.contact-art{position:relative;display:block;width:min(920px,100%);height:clamp(760px,92svh,1020px);min-height:0;margin:20px auto 0;padding:0;overflow:hidden;background:#fff;isolation:isolate}
.contact-art:before{display:none}
.contact-art{height:clamp(840px,100svh,1020px)}
.contact-card-image{position:absolute;top:-10%;left:50%;width:190%;max-width:none;height:auto;transform:translateX(-50%);pointer-events:none;user-select:none}
.contact-links-sheet{position:absolute;z-index:4;top:42%;left:28%;right:20%;height:190px;padding:0 10px;background:#fff;transform:rotate(-3deg)}
.contact-links-sheet:before{position:absolute;inset:0;content:"";background:repeating-linear-gradient(to bottom,transparent 0 49px,#2196ec 50px,#2196ec 51px);pointer-events:none}
.contact-art .social-links{position:relative;inset:auto;display:flex;flex-direction:column;justify-content:stretch;gap:0;width:100%;height:100%;min-height:0;margin:0;padding:0}
.contact-link{position:relative;z-index:1;display:grid;grid-template-columns:42px minmax(78px,.42fr) minmax(0,1fr) 18px;align-items:center;gap:10px;flex:1;min-width:0;padding:5px 3px;border-bottom:1px solid #2196ec;background:#fff;color:#111!important;text-decoration:none;font-size:clamp(13px,1.2vw,17px);line-height:1.2;transition:background .2s,transform .2s}
.contact-link:hover,.contact-link:focus-visible{background:#f8fbff;color:#111!important;transform:translateX(3px)}
.contact-link-icon{display:grid;place-items:center;width:34px;height:34px;color:#111}
.contact-link-icon svg{display:block;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.contact-link-icon .icon-fill{fill:currentColor;stroke:none}
.contact-link-label{font-family:Georgia,serif;font-size:.9em;text-transform:uppercase;letter-spacing:.035em;color:#111}
.contact-link-value{min-width:0;overflow-wrap:anywhere;color:#111;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.contact-link-arrow{color:#111;font-size:1.1em}
.library-cover{position:absolute;z-index:5;top:60%;left:20%;right:14%;bottom:2%;display:flex;align-items:flex-end;justify-content:center;padding:0 24px 8%;background:#ffe95a;clip-path:polygon(100% 0,100% 100%,0 96%,4% 13%);pointer-events:none}
.library-cover:before{display:none}
.library-cover:after{position:absolute;right:8%;bottom:7%;left:8%;height:1px;content:"";background:#151515;transform:rotate(2deg)}
.library-cover span{color:#111;font-family:cursive;font-size:clamp(36px,5vw,64px);font-weight:400;line-height:1;letter-spacing:-.035em;text-transform:none;white-space:nowrap}
.library-cover small{display:none}
@media(max-width:760px){.contact-art{width:min(680px,100%);height:820px;margin-top:20px}.contact-card-image{top:-7%;width:205%}.contact-links-sheet{top:42%;left:24%;right:16%;height:165px;padding-inline:7px}.contact-link{grid-template-columns:34px minmax(67px,.38fr) minmax(0,1fr) 15px;gap:6px;font-size:clamp(11px,2vw,15px)}.contact-link-icon{width:30px;height:30px}.contact-link-icon svg{width:23px;height:23px}.library-cover{top:60%;left:17%;right:11%;bottom:3%}.library-cover span{font-size:clamp(34px,7vw,52px)}}
@media(max-width:480px){.contact-art{height:700px;margin-top:20px}.contact-card-image{top:-2%;width:225%}.contact-links-sheet{top:29%;left:23%;right:14%;height:115px;padding-inline:4px}.contact-links-sheet:before{background:repeating-linear-gradient(to bottom,transparent 0 37px,#2196ec 38px,#2196ec 39px)}.contact-link{grid-template-columns:27px minmax(54px,.38fr) minmax(0,1fr) 12px;gap:4px;padding:3px 1px;font-size:10.5px}.contact-link-icon{width:25px;height:25px}.contact-link-icon svg{width:21px;height:21px}.library-cover{top:61%;left:16%;right:9%;bottom:5%;padding-bottom:9%}.library-cover span{font-size:clamp(31px,8.6vw,43px)}}
.contact-art{margin-top:-14px!important}
.contact-links-sheet{border:1px solid #38464c;border-radius:2px;box-shadow:0 8px 20px #222c3217;background:#fff}
.contact-links-sheet:before{display:none!important;background:none}
.contact-link{border-bottom:1px solid #65a4bf!important}
.contact-link:last-child{border-bottom:0!important}
@media(max-width:760px){.contact-art{margin-top:-10px!important}}
@media(max-width:480px){.contact-art{margin-top:-6px!important}}

/* Layer the contact folders into one continuous file stack. */
.contact-copy{position:relative;z-index:6}
.contact-copy .section-intro{margin-top:12px}
.contact-folder-prompt{margin-top:10px}
.contact-art{isolation:isolate;min-height:clamp(360px,48vh,520px);padding-top:62px}
.contact-art .social-links{height:100%;padding:0;align-items:stretch;gap:0}
.contact-folder{height:100%;min-height:0;margin-top:0}
.contact-folder:nth-child(1){z-index:1}
.contact-folder:nth-child(2){z-index:2}
.contact-folder:nth-child(3){z-index:3}
.contact-folder:nth-child(4){z-index:4}
.contact-folder:nth-child(5){z-index:5}
.contact-folder-tab{z-index:3}
.contact-folder-paper{padding:54px clamp(12px,2vw,28px) 28px;border-radius:0;background:var(--folder-accent)}
.contact-folder:not(:first-child) .contact-folder-paper{border-left:0}
.contact-folder-detail{max-height:0;white-space:normal;writing-mode:horizontal-tb;text-orientation:mixed}
.contact-folder.is-open{z-index:10;transform:translateY(-12px)}
.contact-folder.is-open .contact-folder-paper{box-shadow:0 -10px 22px #283b4718,inset 0 1px #ffffffbd}
.contact-folder.is-open .contact-folder-detail{max-height:150px}
@media(max-width:760px){.contact-art{min-height:clamp(330px,43vh,430px);padding-top:55px}.contact-folder-paper{padding:48px 8px 18px}}
@media(max-width:520px){.contact-art{min-height:clamp(300px,39vh,360px);padding-top:48px}.contact-folder-paper{padding:42px 5px 14px}}

/* Contact details as loose notes pinned to a clean white wall. */
.contact-section{min-height:calc(100svh - 76px);padding-bottom:clamp(30px,6vh,64px);background:#fff!important;background-image:none!important}
.contact-art{min-height:clamp(390px,52vh,560px);padding:28px clamp(22px,8vw,120px) 0;background:#fff}
.contact-art .social-links{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;gap:clamp(14px,2.3vw,34px);width:100%;height:100%;padding:12px 0 24px}
.contact-folder{--note:#fff5b8;position:relative;z-index:1;width:100%;height:clamp(205px,27vh,285px);padding:0;border:0;background:transparent;transform:rotate(var(--note-tilt,0deg));transition:transform .3s cubic-bezier(.2,.75,.25,1),z-index 0s}
.contact-folder:nth-child(1){--note:#fff5b8;--note-tilt:-2deg}.contact-folder:nth-child(2){--note:#e9f1e2;--note-tilt:1.5deg}.contact-folder:nth-child(3){--note:#e4edf3;--note-tilt:-1deg}.contact-folder:nth-child(4){--note:#f0eaf4;--note-tilt:2deg}.contact-folder:nth-child(5){--note:#f2eee0;--note-tilt:-1.5deg}
.contact-folder-tab{position:absolute;top:-10px!important;left:50%;z-index:2;min-height:0;max-width:calc(100% - 18px);padding:8px 14px;border:0;border-radius:2px;background:var(--note);box-shadow:0 2px 5px #26333a12;color:#34434a;font-size:clamp(12px,1.1vw,15px);transform:translateX(-50%) rotate(-1deg);transform-origin:center;white-space:nowrap}
.contact-folder-paper{position:relative;display:flex;align-items:flex-start;width:100%;height:100%;padding:45px clamp(13px,1.5vw,21px) 18px;border:0;border-radius:1px;background:var(--note);box-shadow:0 9px 22px #25303912,0 2px 4px #2530390b;transition:box-shadow .25s ease}
.contact-folder-paper:before{position:absolute;inset:0;content:"";background:repeating-linear-gradient(to bottom,transparent 0 31px,#68798413 32px,#68798413 33px);pointer-events:none}
.contact-folder-detail{position:relative;z-index:1;max-height:0;color:#40515a;font-size:clamp(12px,1vw,15px);line-height:1.55;overflow-wrap:anywhere;white-space:normal}
.contact-folder:hover,.contact-folder:focus-visible{z-index:4;transform:translateY(-4px) rotate(0deg)}
.contact-folder.is-open{z-index:8;transform:translateY(-12px) rotate(0deg)}
.contact-folder.is-open .contact-folder-tab{transform:translate(-50%,-7px) rotate(-1deg)}
.contact-folder.is-open .contact-folder-paper{box-shadow:0 16px 30px #25303920,0 3px 7px #25303910}
.contact-folder.is-open .contact-folder-detail{max-height:170px}
@media(max-width:760px){.contact-art{min-height:0;padding:18px 6vw 8px}.contact-art .social-links{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.contact-folder{height:210px}.contact-folder-tab{font-size:12px}.contact-folder-paper{padding:39px 12px 14px}}
@media(max-width:520px){.contact-art{padding-inline:20px}.contact-art .social-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}.contact-folder{height:196px}.contact-folder-detail{font-size:12px}}

/* Library checkout pocket: paper slips rise from a yellow front cover. */
.contact-art{position:relative;display:block;flex:none;width:min(980px,100%);height:clamp(430px,54vh,570px);min-height:0;margin:22px auto 0;padding:0 4% 0;background:#fff;isolation:isolate}
.contact-art:before{position:absolute;z-index:1;content:"";left:4%;right:4%;top:39%;bottom:0;border-radius:0 0 42px 42px;background:#f6e85a;clip-path:polygon(0 10%,100% 0,100% 100%,0 100%);box-shadow:0 10px 18px #34331f12}
.contact-art .social-links{position:absolute;z-index:3;inset:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:start;gap:clamp(5px,1vw,13px);width:100%;height:100%;padding:0 5%}
.contact-folder{--note:#fff;position:relative;z-index:3;width:100%;height:clamp(190px,24vh,245px);margin-top:clamp(18px,4vh,44px);padding:0;background:transparent;transform:rotate(var(--note-tilt,0deg));transition:transform .32s cubic-bezier(.2,.75,.25,1),z-index 0s}
.contact-folder:nth-child(1){--note-tilt:-2deg}.contact-folder:nth-child(2){--note-tilt:1deg;margin-top:8px}.contact-folder:nth-child(3){--note-tilt:-.8deg;margin-top:clamp(38px,6vh,62px)}.contact-folder:nth-child(4){--note-tilt:1.6deg;margin-top:20px}.contact-folder:nth-child(5){--note-tilt:-1deg;margin-top:clamp(30px,5vh,52px)}
.contact-folder-tab{position:absolute;top:0!important;left:8px;z-index:2;display:block;min-height:0;max-width:calc(100% - 16px);padding:8px 10px 5px;border:0;border-bottom:1px solid #75abb0;border-radius:0;background:transparent;color:#2c3e44;font-family:var(--font);font-size:clamp(10px,1vw,14px);font-weight:600;line-height:1.25;text-align:left;white-space:normal;transform:none}
.contact-folder-paper{position:relative;display:flex;width:100%;height:100%;min-height:0;padding:42px 10px 12px;border:1px solid #91b9bc;border-radius:1px;background:#fff;box-shadow:0 5px 12px #24363c1b;transition:box-shadow .28s ease}
.contact-folder-paper:before{position:absolute;inset:0;content:"";background:repeating-linear-gradient(to bottom,transparent 0 30px,#79adb316 31px,#79adb316 32px);pointer-events:none}
.contact-folder-detail{position:relative;z-index:1;max-height:0;overflow:hidden;color:#34484f;font-size:clamp(10px,.95vw,14px);line-height:1.45;overflow-wrap:anywhere;white-space:normal;opacity:0;transform:translateY(8px);transition:max-height .36s ease,opacity .25s ease,transform .3s ease}
.library-cover{position:absolute;z-index:2;left:8%;right:8%;top:49%;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 15px 34px;color:#171912;text-align:center;pointer-events:none}
.library-cover:before{position:absolute;z-index:-1;inset:0;content:"";background:#f6e85a;clip-path:polygon(0 14%,100% 0,100% 100%,0 100%)}
.library-cover span{font-size:clamp(38px,6vw,72px);font-weight:600;line-height:.9;letter-spacing:-.055em;text-transform:uppercase}
.library-cover small{position:absolute;right:9%;bottom:24px;font-family:Georgia,serif;font-size:clamp(14px,1.6vw,20px);font-style:italic}
.contact-folder:hover,.contact-folder:focus-visible{z-index:7;transform:translateY(-7px) rotate(0deg)}
.contact-folder.is-open{z-index:9;transform:translateY(-15px) rotate(0deg)}
.contact-folder.is-open .contact-folder-tab{transform:translateY(-5px)}
.contact-folder.is-open .contact-folder-paper{box-shadow:0 13px 23px #24363c2b}
.contact-folder.is-open .contact-folder-detail{max-height:130px;opacity:1;transform:translateY(0)}
@media(max-width:760px){.contact-art{height:470px;margin-top:26px;padding:0 2%}.contact-art .social-links{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 3%}.contact-folder{height:180px;margin-top:30px}.contact-folder:nth-child(2){margin-top:10px}.contact-folder:nth-child(3){margin-top:42px}.contact-folder:nth-child(4){margin-top:20px}.contact-folder:nth-child(5){margin-top:36px}.contact-art:before{top:42%}.library-cover{top:53%}.library-cover span{font-size:clamp(34px,8vw,54px)}}
@media(max-width:520px){.contact-art{height:610px;width:100%;padding:0;margin-top:24px}.contact-art .social-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;padding:0 7%}.contact-folder{height:158px;margin-top:22px}.contact-folder:nth-child(2){margin-top:0}.contact-folder:nth-child(3){margin-top:35px}.contact-folder:nth-child(4){margin-top:13px}.contact-folder:nth-child(5){margin-top:32px}.contact-folder-tab{font-size:12px}.contact-folder-paper{padding:37px 8px 10px}.contact-art:before{left:5%;right:5%;top:47%}.library-cover{left:9%;right:9%;top:56%}.library-cover span{font-size:clamp(38px,11vw,56px)}}

/* Full-width contact file wall, anchored to the bottom of the final page. */
.contact-section{display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:calc(100svh - 76px);padding:clamp(38px,6vh,72px) 0 0;background:#fff!important;background-image:none!important;border-top:1px solid #e3e7e8}
.contact-copy{width:100%;padding:0 clamp(22px,8vw,120px);text-align:center}
.contact-copy .eyebrow{margin-bottom:16px}
.contact-copy h2{font-size:clamp(48px,6.5vw,78px);line-height:1;letter-spacing:-.045em}
.contact-copy h2 em{color:#527b91}
.contact-copy .section-intro{max-width:620px;margin:16px auto 0;color:#66747a;font-size:clamp(17px,2vw,22px);line-height:1.4}
.contact-folder-prompt{margin:15px 0 0;color:#527b91;font-size:15px;letter-spacing:.02em}
.contact-folder-prompt span{display:inline-block;margin-left:7px}
.contact-art{position:relative;display:flex;align-items:flex-end;flex:1;width:100%;min-height:340px;height:auto;margin-top:auto;overflow:visible;background:#fff}
.contact-art .contact-doodles{display:none}
.contact-art .social-links{position:relative;inset:auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;gap:3px;width:100%;height:100%;min-height:0;margin:0;padding:54px 0 0}
.contact-folder{--folder-accent:#dce9ef;position:relative;display:block;width:100%;height:clamp(250px,36vh,390px);min-width:0;min-height:0;padding:0;border:0;background:transparent;text-align:left;cursor:pointer;transition:transform .3s cubic-bezier(.2,.75,.25,1);transform-origin:bottom center}
.contact-folder:nth-child(2){--folder-accent:#e4ecdc}.contact-folder:nth-child(3){--folder-accent:#dfe5f0}.contact-folder:nth-child(4){--folder-accent:#e8e9f1}.contact-folder:nth-child(5){--folder-accent:#e8e8df}
.contact-folder-tab{position:absolute;z-index:2;top:-37px;left:8%;display:flex;align-items:center;justify-content:center;min-height:38px;max-width:84%;padding:7px 13px;border:1px solid #c8d8df;border-bottom:0;border-radius:14px 14px 0 0;background:var(--folder-accent);color:#334650;font-size:clamp(12px,1.15vw,16px);line-height:1.1;text-align:center;white-space:nowrap;transition:transform .3s cubic-bezier(.2,.75,.25,1);transform-origin:bottom center}
.contact-folder:nth-child(2) .contact-folder-tab{top:-58px}.contact-folder:nth-child(3) .contact-folder-tab{top:-27px}.contact-folder:nth-child(4) .contact-folder-tab{top:-48px}.contact-folder:nth-child(5) .contact-folder-tab{top:-33px}
.contact-folder-paper{position:relative;display:flex;align-items:flex-start;width:100%;height:100%;min-height:0;padding:38px clamp(12px,2vw,28px) 26px;border:1px solid #d5e0e4;border-bottom:0;border-radius:0;background:var(--folder-accent);box-shadow:inset 0 1px #ffffff9c;transition:filter .25s,box-shadow .25s}
.contact-folder-detail{display:block;max-height:0;overflow:hidden;color:#405968;font-size:clamp(13px,1.15vw,17px);line-height:1.5;overflow-wrap:anywhere;opacity:0;transform:translateY(10px);transition:max-height .38s ease,opacity .25s ease,transform .32s ease}
.contact-folder:hover .contact-folder-paper,.contact-folder:focus-visible .contact-folder-paper,.contact-folder.is-open .contact-folder-paper{filter:saturate(1.04);box-shadow:inset 0 1px #ffffffbd,0 -8px 20px #283b4712}
.contact-folder.is-open{z-index:4;transform:translateY(-14px)}
.contact-folder.is-open .contact-folder-tab{transform:translateY(-8px)}
.contact-folder.is-open .contact-folder-detail{max-height:150px;opacity:1;transform:translateY(0)}
.contact-folder:focus-visible{outline:2px solid #527b91;outline-offset:-5px}
.doodle-tool-button .doodle-tool-icon{width:26px;height:26px;background-size:52px 26px}
@media(max-width:760px){.contact-section{min-height:calc(100svh - 64px);padding-top:42px}.contact-art{min-height:310px}.contact-art .social-links{grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding-top:48px}.contact-folder{height:clamp(220px,31vh,310px)}.contact-folder-tab{left:4%;max-width:92%;padding:6px 7px;font-size:clamp(10px,1.8vw,13px)}.contact-folder-paper{padding:32px 8px 18px}.contact-folder-detail{font-size:clamp(11px,1.7vw,14px)}}
@media(max-width:520px){.contact-copy{padding-inline:20px}.contact-copy h2{font-size:48px}.contact-copy .section-intro{max-width:340px}.contact-art{min-height:270px}.contact-art .social-links{grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;padding-top:42px}.contact-folder{height:clamp(205px,28vh,260px)}.contact-folder-tab{left:2%;max-width:96%;min-height:34px;padding:5px 3px;font-size:10px;white-space:normal}.contact-folder:nth-child(2) .contact-folder-tab{top:-47px}.contact-folder:nth-child(4) .contact-folder-tab{top:-41px}.contact-folder-paper{padding:27px 5px 14px}.contact-folder-detail{font-size:11px;line-height:1.35}}
@media(prefers-reduced-motion:reduce){.contact-folder,.contact-folder-tab,.contact-folder-detail,.contact-folder-paper{transition:none}}

/* Final contact-card layout overrides */
.contact-section{min-height:auto;padding-bottom:50px}
.contact-art{display:block;flex:none;width:min(920px,100%);height:clamp(840px,100svh,1020px);min-height:0;margin:20px auto 0;padding:0;overflow:hidden;background:#fff}
.contact-art:before{display:none}
.contact-card-image{position:absolute;top:-10%;left:50%;width:190%;max-width:none;height:auto;transform:translateX(-50%);pointer-events:none;user-select:none}
.contact-links-sheet{position:absolute;z-index:4;top:42%;left:28%;right:20%;height:190px;padding:0 10px;background:#fff;transform:rotate(-3deg)}
.contact-links-sheet:before{position:absolute;inset:0;content:"";background:repeating-linear-gradient(to bottom,transparent 0 49px,#2196ec 50px,#2196ec 51px);pointer-events:none}
.contact-art .social-links{position:relative;inset:auto;display:flex;flex-direction:column;gap:0;width:100%;height:100%;min-height:0;margin:0;padding:0}
.contact-link{position:relative;z-index:1;display:grid;grid-template-columns:42px minmax(78px,.42fr) minmax(0,1fr) 18px;align-items:center;gap:10px;flex:1;min-width:0;padding:5px 3px;border-bottom:1px solid #2196ec;background:#fff;color:#111!important;text-decoration:none;font-size:clamp(13px,1.2vw,17px);line-height:1.2;transition:background .2s,transform .2s}
.contact-link:hover,.contact-link:focus-visible{background:#f8fbff;color:#111!important;transform:translateX(3px)}
.contact-link-icon{display:grid;place-items:center;width:34px;height:34px;color:#111}
.contact-link-icon svg{display:block;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.contact-link-icon .icon-fill{fill:currentColor;stroke:none}
.contact-link-label{font-family:Georgia,serif;font-size:.9em;text-transform:uppercase;letter-spacing:.035em;color:#111}
.contact-link-value{min-width:0;overflow-wrap:anywhere;color:#111;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.contact-link-arrow{color:#111;font-size:1.1em}
.library-cover{position:absolute;z-index:5;top:60%;left:20%;right:14%;bottom:2%;display:flex;align-items:flex-end;justify-content:center;padding:0 24px 8%;background:#ffe95a;clip-path:polygon(100% 0,100% 100%,0 96%,4% 13%);pointer-events:none}
.library-cover:before{display:none}
.library-cover:after{position:absolute;right:8%;bottom:7%;left:8%;height:1px;content:"";background:#151515;transform:rotate(2deg)}
.library-cover span{color:#111;font-family:cursive;font-size:clamp(36px,5vw,64px);font-weight:400;line-height:1;letter-spacing:-.035em;text-transform:none;white-space:nowrap}
.library-cover small{display:none}
@media(max-width:760px){.contact-art{width:min(680px,100%);height:820px;margin-top:20px}.contact-card-image{top:-7%;width:205%}.contact-links-sheet{top:42%;left:24%;right:16%;height:165px;padding-inline:7px}.contact-link{grid-template-columns:34px minmax(67px,.38fr) minmax(0,1fr) 15px;gap:6px;font-size:clamp(11px,2vw,15px)}.contact-link-icon{width:30px;height:30px}.contact-link-icon svg{width:23px;height:23px}.library-cover{top:60%;left:17%;right:11%;bottom:3%}.library-cover span{font-size:clamp(34px,7vw,52px)}}
@media(max-width:480px){.contact-art{height:700px;margin-top:20px}.contact-card-image{top:-2%;width:225%}.contact-links-sheet{top:29%;left:23%;right:14%;height:115px;padding-inline:4px}.contact-links-sheet:before{background:repeating-linear-gradient(to bottom,transparent 0 37px,#2196ec 38px,#2196ec 39px)}.contact-link{grid-template-columns:27px minmax(54px,.38fr) minmax(0,1fr) 12px;gap:4px;padding:3px 1px;font-size:10.5px}.contact-link-icon{width:25px;height:25px}.contact-link-icon svg{width:21px;height:21px}.library-cover{top:61%;left:16%;right:9%;bottom:5%;padding-bottom:9%}.library-cover span{font-size:clamp(31px,8.6vw,43px)}}

/* Exact contact slip artwork with accessible live contact links */
.contact-section{background:#fff!important;padding-bottom:42px!important}
.contact-section .contact-copy{margin-bottom:0!important}
.contact-copy .section-intro{margin-bottom:0!important}
.contact-folder-prompt{display:none!important}
.contact-art{position:relative!important;display:block!important;flex:none!important;width:min(620px,100%)!important;height:auto!important;min-height:0!important;margin:-14px auto 0!important;padding:0!important;overflow:visible!important;background:transparent!important}
.contact-art:before,.library-cover{display:none!important}
.contact-card-image{position:relative!important;top:auto!important;left:auto!important;display:block!important;width:100%!important;max-width:100%!important;height:auto!important;transform:none!important;pointer-events:none!important;user-select:none!important}
.contact-links-sheet{position:absolute!important;z-index:4!important;top:24.3%!important;left:18.5%!important;right:auto!important;width:53%!important;height:20%!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important;transform:rotate(-3deg)!important;transform-origin:top left!important}
.contact-links-sheet:before{position:absolute!important;inset:0!important;display:block!important;content:""!important;background:repeating-linear-gradient(to bottom,transparent 0 calc(25% - 1px),#2196ec calc(25% - 1px) 25%)!important;pointer-events:none!important}
.contact-art .social-links{position:relative!important;inset:auto!important;display:flex!important;flex-direction:column!important;gap:0!important;width:100%!important;height:100%!important;min-height:0!important;margin:0!important;padding:0!important}
.contact-link{position:relative!important;z-index:1!important;display:grid!important;grid-template-columns:34px 78px minmax(0,1fr) 16px!important;align-items:center!important;gap:7px!important;flex:1!important;min-width:0!important;padding:2px 3px!important;border:0!important;background:transparent!important;color:#111!important;text-decoration:none!important;font-size:clamp(10px,1vw,15px)!important;line-height:1.08!important;transition:background .2s,transform .2s!important}
.contact-link:hover,.contact-link:focus-visible{background:#f8fbff!important;color:#111!important;transform:translateX(2px)!important}
.contact-link-icon{display:grid!important;place-items:center!important;width:28px!important;height:28px!important;color:#111!important}
.contact-link-icon svg{display:block!important;width:23px!important;height:23px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.contact-link-icon .icon-fill{fill:currentColor!important;stroke:none!important}
.contact-link-label{font-family:Georgia,serif!important;font-size:.9em!important;text-transform:uppercase!important;letter-spacing:.02em!important;color:#111!important}
.contact-link-value{min-width:0!important;overflow-wrap:anywhere!important;color:#111!important;text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:2px!important}
.contact-link-arrow{color:#111!important;font-size:1em!important}
.contact-link-linkedin .contact-link-label{display:none!important}
@media(max-width:760px){.contact-art{width:min(620px,100%)!important;margin-top:-8px!important}.contact-links-sheet{top:24.3%!important;left:18.5%!important;width:53%!important;height:20%!important}.contact-link{grid-template-columns:27px 58px minmax(0,1fr) 12px!important;gap:4px!important;font-size:clamp(9px,1.8vw,13px)!important}.contact-link-icon{width:23px!important;height:23px!important}.contact-link-icon svg{width:20px!important;height:20px!important}}
@media(max-width:480px){.contact-art{width:100%!important;margin-top:0!important}.contact-links-sheet{top:24.3%!important;left:18.5%!important;width:53%!important;height:20%!important}.contact-link{grid-template-columns:20px 43px minmax(0,1fr) 9px!important;gap:3px!important;padding-inline:1px!important;font-size:clamp(8px,2.1vw,10px)!important}.contact-link-icon{width:19px!important;height:19px!important}.contact-link-icon svg{width:17px!important;height:17px!important}}

/* Contact folder recreation based on the supplied code */
.contact-section{background:#fff!important;padding-bottom:70px!important}
.contact-copy .section-intro{margin-bottom:0!important}
.contact-art{position:relative!important;display:block!important;width:min(760px,100%)!important;height:auto!important;min-height:0!important;margin:-8px auto 0!important;padding:0!important;overflow:visible!important;background:transparent!important}
.contact-art:before,.contact-card-image,.library-cover{display:none!important}
.folder-wrapper{position:relative;width:100%;max-width:700px;margin:0 auto;padding:45px 0 0;perspective:1000px}
.yellow-folder-back{position:relative;width:100%;height:540px;padding:18px 20px;overflow:visible;border-radius:22px 48px 22px 22px;background:linear-gradient(135deg,#ffed69 0%,#f4d927 100%);box-shadow:0 22px 48px rgba(28,31,32,.16),inset 0 1px 0 rgba(255,255,255,.75)}
.folder-tab{position:absolute;top:-14px;left:28px;width:170px;height:30px;border:1px solid #eacb28;border-bottom:0;border-radius:14px 18px 0 0;background:#f6dc3e;transform:skewX(-10deg)}
.folder-ghost{position:absolute;top:22px;left:13%;width:74%;height:370px;border:1px solid #d7dadd;border-radius:8px 8px 2px 2px;background:repeating-linear-gradient(to bottom,#fff 0 35px,#91c9f8 35px 36px);box-shadow:0 5px 12px rgba(0,0,0,.08);pointer-events:none}
.folder-ghost-one{transform:rotate(-2deg);opacity:.8}
.folder-ghost-two{top:16px;left:12%;transform:rotate(1.2deg);opacity:.94}
.contact-links-sheet{position:absolute!important;z-index:2!important;top:42px!important;left:12%!important;right:auto!important;width:76%!important;height:400px!important;overflow:hidden!important;padding:0!important;border:1px solid #cdd2d4!important;border-radius:8px 8px 2px 2px!important;background:repeating-linear-gradient(to bottom,#fff 0 35px,#91c9f8 35px 36px)!important;box-shadow:0 7px 18px rgba(0,0,0,.16)!important;transform:translateY(72px) rotate(-1deg)!important;transform-origin:center!important;transition:transform .65s cubic-bezier(.34,1.2,.64,1),box-shadow .5s ease!important}
.folder-wrapper:hover .contact-links-sheet,.folder-wrapper:focus-within .contact-links-sheet,.folder-wrapper.is-open .contact-links-sheet{z-index:5!important;transform:translateY(-65px) rotate(-1deg)!important;box-shadow:0 24px 36px rgba(0,0,0,.24)!important}
.contact-links-sheet:before{display:none!important}
.contact-art .social-links{position:relative!important;inset:auto!important;display:flex!important;flex-direction:column!important;gap:0!important;width:100%!important;height:100%!important;min-height:0!important;margin:0!important;padding:58px 18px 0 12px!important}
.contact-link{position:relative!important;z-index:1!important;display:grid!important;grid-template-columns:70px 24px minmax(0,1fr) 18px!important;align-items:center!important;gap:8px!important;flex:0 0 58px!important;min-width:0!important;padding:4px 0!important;border:0!important;border-bottom:1px solid #70bafa!important;border-radius:0!important;background:transparent!important;color:#111!important;text-decoration:none!important;font-size:clamp(13px,1.3vw,18px)!important;line-height:1.15!important;transition:background .2s,transform .2s!important}
.contact-link:hover,.contact-link:focus-visible{background:rgba(0,0,0,.045)!important;color:#111!important;transform:translateY(-3px) scale(1.015)!important}
.contact-link-icon{display:grid!important;place-items:center!important;width:34px!important;height:34px!important;color:#111!important}
.contact-link-icon svg{display:block!important;width:26px!important;height:26px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.contact-link-icon .icon-fill{fill:currentColor!important;stroke:none!important}
.contact-link-label{font-family:Georgia,serif!important;font-size:.82em!important;text-transform:uppercase!important;letter-spacing:.035em!important;color:#111!important;text-align:right!important}
.contact-link-value{min-width:0!important;overflow-wrap:anywhere!important;color:#111!important;text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:3px!important}
.contact-link-arrow{color:#111!important;font-size:1em!important}
.contact-link-linkedin .contact-link-label{display:none!important}
.yellow-folder-pocket{position:absolute;z-index:4;right:0;bottom:0;left:0;height:47%;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;padding:0 24px 42px;border-top:2px solid #fff19a;border-radius:0 0 22px 22px;background:linear-gradient(180deg,#f8df3b 0%,#e9c91e 100%);box-shadow:0 -6px 16px rgba(70,57,0,.1);pointer-events:none;transition:transform .3s ease}
.yellow-folder-pocket:before{position:absolute;top:-2px;left:0;width:56%;height:72px;content:"";border-top:2px solid #e6c71b;background:linear-gradient(135deg,transparent 49.5%,#f8df3b 50%);pointer-events:none}
.yellow-folder-pocket span{position:relative;padding:0 8px 8px;border-bottom:1px solid #262218;color:#171717;font-family:"Dancing Script",cursive,Georgia,serif;font-size:clamp(34px,5vw,58px);font-weight:600;line-height:1;white-space:nowrap;transform:rotate(1deg)}
.folder-wrapper:hover .yellow-folder-pocket,.folder-wrapper:focus-within .yellow-folder-pocket,.folder-wrapper.is-open .yellow-folder-pocket{transform:translateY(3px)}
@media(max-width:760px){.contact-art{width:min(640px,100%)!important;margin-top:0!important}.folder-wrapper{padding-top:35px}.yellow-folder-back{height:500px;padding-inline:14px}.contact-links-sheet{top:36px!important;left:8%!important;width:84%!important;height:370px!important}.folder-ghost{left:9%;width:82%;height:340px}.folder-ghost-two{left:8%}.contact-art .social-links{padding:48px 12px 0 8px!important}.contact-link{grid-template-columns:54px 18px minmax(0,1fr) 14px!important;gap:5px!important;flex-basis:54px!important;font-size:clamp(11px,2.2vw,16px)!important}.contact-link-icon{width:28px!important;height:28px!important}.contact-link-icon svg{width:23px!important;height:23px!important}.yellow-folder-pocket{padding-bottom:38px}}
@media(max-width:480px){.folder-wrapper{padding-top:30px}.yellow-folder-back{height:420px;padding:12px 8px}.contact-links-sheet{top:30px!important;left:5%!important;width:90%!important;height:315px!important}.folder-ghost{left:6%;width:88%;height:295px}.folder-ghost-two{left:5%}.contact-art .social-links{padding:38px 7px 0 5px!important}.contact-link{grid-template-columns:35px 10px minmax(0,1fr) 10px!important;gap:3px!important;flex-basis:48px!important;font-size:clamp(9px,2.6vw,12px)!important}.contact-link-icon{width:23px!important;height:23px!important}.contact-link-icon svg{width:19px!important;height:19px!important}.contact-link-label{font-size:.7em!important}.yellow-folder-pocket{height:45%;padding:0 10px 30px}.yellow-folder-pocket span{font-size:clamp(29px,8vw,40px)}}
@media(prefers-reduced-motion:reduce){.contact-links-sheet,.yellow-folder-pocket{transition:none!important}}
.contact-link-linkedin .contact-link-icon .linkedin-mark{fill:#0a66c2!important;stroke:#0a66c2!important}
.contact-link-linkedin .contact-link-icon .linkedin-letter{fill:none!important;stroke:#fff!important;stroke-width:2.1!important;stroke-linecap:round!important;stroke-linejoin:round!important}

/* Final contact stationery cleanup and page ending */
.contact-section{display:flex!important;flex-direction:column!important;align-items:stretch!important;min-height:calc(100svh - 76px)!important;padding-bottom:0!important;background:#fff!important}
.contact-copy{flex:0 0 auto!important}
.contact-copy .section-intro{margin-bottom:0!important}
.contact-art{flex:1 0 auto!important;width:100%!important;margin:0 auto 0!important;padding:0 clamp(20px,7vw,90px)!important;display:flex!important;align-items:flex-end!important;justify-content:center!important}
.folder-wrapper{width:min(900px,100%)!important;max-width:900px!important;margin:auto auto 0!important;padding-top:45px!important}
.yellow-folder-back{height:clamp(500px,62vh,700px)!important;border-radius:22px 54px 0 0!important}
.folder-ghost{background:#fff!important}
.folder-ghost-one,.folder-ghost-two{background:#fff!important}
.contact-links-sheet{top:36px!important;left:50%!important;width:min(620px,82%)!important;height:410px!important;overflow:visible!important;background:#fff!important;transform:translate(-50%,72px) rotate(-1deg)!important}
.folder-wrapper:hover .contact-links-sheet,.folder-wrapper:focus-within .contact-links-sheet,.folder-wrapper.is-open .contact-links-sheet{transform:translate(-50%,-55px) rotate(-1deg)!important}
.contact-art .social-links{padding:52px 26px 0!important}
.contact-link{grid-template-columns:38px 82px minmax(0,1fr) 18px!important;gap:10px!important;flex:0 0 62px!important;padding:4px 8px!important;border-bottom:1px solid #d8dde0!important;font-size:clamp(14px,1.15vw,17px)!important;line-height:1.2!important}
.contact-link-value{white-space:nowrap!important;overflow-wrap:normal!important;word-break:normal!important;text-overflow:clip!important}
.contact-link-label{display:block!important;text-align:left!important}
.contact-link-linkedin .contact-link-label{display:block!important}
.contact-link-linkedin .contact-link-icon svg{width:30px!important;height:30px!important}
.yellow-folder-pocket{height:42%!important;border-radius:0!important}
.yellow-folder-pocket:before{display:none!important}
.contact-link:focus-visible{outline:2px solid #365f74!important;outline-offset:-2px!important}
.site-footer{display:none!important}
@media(max-width:760px){.contact-section{min-height:calc(100svh - 64px)!important}.contact-art{padding-inline:14px!important}.folder-wrapper{padding-top:35px!important}.yellow-folder-back{height:clamp(480px,66vh,620px)!important}.contact-links-sheet{top:30px!important;width:90%!important;height:380px!important}.contact-art .social-links{padding:48px 14px 0!important}.contact-link{grid-template-columns:30px 68px minmax(0,1fr) 14px!important;gap:6px!important;flex-basis:58px!important;font-size:clamp(11px,2vw,15px)!important}.contact-link-icon{width:26px!important;height:26px!important}.contact-link-icon svg{width:22px!important;height:22px!important}}
@media(max-width:480px){.contact-art{padding-inline:8px!important}.yellow-folder-back{height:500px!important}.contact-links-sheet{top:24px!important;width:94%!important;height:360px!important}.contact-art .social-links{padding:42px 8px 0!important}.contact-link{grid-template-columns:25px 58px minmax(0,1fr) 11px!important;gap:4px!important;flex-basis:55px!important;padding-inline:3px!important;font-size:clamp(9px,2.5vw,12px)!important}.contact-link-value{font-size:clamp(8px,2.4vw,11px)!important;letter-spacing:-.025em}.contact-link-icon{width:21px!important;height:21px!important}.contact-link-icon svg{width:18px!important;height:18px!important}.yellow-folder-pocket{height:40%!important}}
.contact-links-sheet:before{position:absolute!important;top:-16px!important;left:50%!important;inset-inline:auto!important;display:block!important;width:28px!important;height:34px!important;content:""!important;border:3px solid #9aa4a6!important;border-bottom:0!important;border-radius:12px 12px 0 0!important;background:transparent!important;transform:translateX(-50%)!important;pointer-events:none!important}

/* Compact contact rows and clipped-on paper fastener */
.contact-link{grid-template-columns:38px minmax(0,1fr) 18px!important;gap:12px!important}
.contact-link-label{display:none!important}
.contact-link-linkedin .contact-link-label{display:none!important}
.contact-link-value{grid-column:2;white-space:nowrap!important;overflow-wrap:normal!important;word-break:normal!important;color:#111!important}
.contact-link-linkedin .contact-link-icon .linkedin-mark{fill:#151515!important;stroke:#151515!important}
.contact-link-linkedin .contact-link-icon .linkedin-letter{stroke:#fff!important;fill:none!important}
.contact-links-sheet{overflow:visible!important}
.contact-links-sheet:before{z-index:8!important;top:-7px!important;left:50%!important;width:25px!important;height:29px!important;border:2px solid #8e999c!important;border-bottom:0!important;border-radius:10px 10px 0 0!important;background:linear-gradient(90deg,#dfe4e4 0%,#fff 24%,#c4cbcc 52%,#f7f8f8 78%,#aab4b5 100%)!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.72),0 1px 2px rgba(0,0,0,.24)!important;transform:translateX(-50%)!important;pointer-events:none!important}
.contact-links-sheet:after{position:absolute!important;z-index:9!important;top:-3px!important;left:50%!important;width:12px!important;height:24px!important;content:""!important;border:1px solid #a3adae!important;border-bottom:0!important;border-radius:6px 6px 0 0!important;background:transparent!important;transform:translateX(-50%)!important;pointer-events:none!important}
@media(max-width:760px){.contact-link{grid-template-columns:30px minmax(0,1fr) 14px!important;gap:8px!important}}
@media(max-width:480px){.contact-link{grid-template-columns:25px minmax(0,1fr) 11px!important;gap:6px!important}.contact-link-value{font-size:clamp(9px,2.5vw,12px)!important;letter-spacing:-.02em!important}}

/* Smaller, calmer contact ending */
.contact-copy h2{font-size:clamp(42px,5.8vw,76px)!important;line-height:1.02!important;margin-bottom:12px!important}
.contact-copy .section-intro{max-width:680px!important;font-size:clamp(16px,1.8vw,22px)!important;line-height:1.45!important}
.contact-section{min-height:calc(100svh - 76px)!important}
.contact-art{padding-inline:clamp(16px,5vw,60px)!important}
.folder-wrapper{width:min(700px,100%)!important;max-width:700px!important;padding-top:34px!important}
.yellow-folder-back{height:clamp(390px,50vh,540px)!important;border-radius:18px 40px 0 0!important}
.yellow-folder-pocket{height:37%!important}
.yellow-folder-pocket span{display:none!important}
.contact-links-sheet:before,.contact-links-sheet:after{display:none!important}
.contact-links-sheet{top:30px!important;width:min(540px,82%)!important;height:360px!important}
@media(max-width:760px){.contact-copy h2{font-size:clamp(40px,9vw,58px)!important}.contact-copy .section-intro{font-size:clamp(15px,3.6vw,19px)!important}.folder-wrapper{width:min(620px,100%)!important;padding-top:28px!important}.yellow-folder-back{height:clamp(370px,48vh,460px)!important}.contact-links-sheet{top:24px!important;width:90%!important;height:325px!important}}
@media(max-width:480px){.contact-copy h2{font-size:40px!important}.contact-copy .section-intro{font-size:15px!important}.folder-wrapper{padding-top:24px!important}.yellow-folder-back{height:380px!important}.yellow-folder-pocket{height:34%!important}.contact-links-sheet{top:20px!important;width:94%!important;height:290px!important}}
/* Keep deep-linked project titles clear of the sticky navigation */
.project-story-header{scroll-margin-top:100px}
@media(max-width:700px){.project-story-header{scroll-margin-top:82px}}

/* Display typography refresh for the portfolio pages after the home introduction. */
:root{--display-font:"Bodoni Moda",Didot,"Times New Roman",serif;--note-font:"Caveat","Segoe Print",cursive;--tagline-font:"Allura","URW Chancery L",cursive}
body:not(.projects-page) .section-heading h2,
body:not(.projects-page) .about-notes-heading .eyebrow,
body:not(.projects-page) .sketch-heading h2,
body:not(.projects-page) .contact-copy h2,
body.projects-page .projects-page-intro h1,
body.projects-page .project-story-header h1,
body.projects-page .project-story-body h2,
body.projects-page .project-copy-block h2{font-family:var(--display-font)!important;font-weight:500;letter-spacing:-.025em}
body:not(.projects-page) .jackpot-heading .section-intro,
body:not(.projects-page) .contact-copy .section-intro,
body:not(.projects-page) .sketch-heading p,
body.projects-page .projects-page-intro>p:last-child,
body.projects-page .project-demo-card figcaption{font-family:var(--tagline-font)!important;font-size:clamp(21px,2.2vw,30px)!important;font-weight:400!important;line-height:1.2!important;letter-spacing:0!important}
body.projects-page .project-copy-block[data-section="developer"],
body.projects-page .project-copy-block[data-section="developer"] h2,
body.projects-page .project-copy-block[data-section="developer"] p{font-family:var(--note-font)!important;font-size:clamp(20px,2vw,27px)!important;line-height:1.28!important;font-weight:500!important;letter-spacing:0!important}
body.projects-page .project-copy-block[data-section="developer"] h2{font-size:clamp(24px,2.4vw,32px)!important;margin-bottom:10px}
@media(max-width:700px){body:not(.projects-page) .section-intro:not(.hero .section-intro),body:not(.projects-page) .sketch-heading p,body.projects-page .projects-page-intro>p:last-child{font-size:22px!important}body.projects-page .project-copy-block[data-section="developer"],body.projects-page .project-copy-block[data-section="developer"] p{font-size:21px!important}}

/* Display font pairing: locally hosted premium font files can replace these close webfont matches. */
:root{--display-font:"Bodoni Moda",Didot,"Times New Roman",serif;--project-title-font:"DM Serif Display",Georgia,serif;--problem-font:"Yusei Magic","Trebuchet MS",sans-serif;--name-font:"Slackey",Impact,sans-serif;--tagline-font:"Life Savers","Allura",cursive}
body:not(.projects-page) .name-button{font-family:var(--name-font)!important;font-weight:400!important;letter-spacing:-.035em!important}
body:not(.projects-page) .section-heading h2,
body:not(.projects-page) .about-notes-heading .eyebrow,
body:not(.projects-page) .sketch-heading h2,
body:not(.projects-page) .contact-copy h2,
body.projects-page .projects-page-intro h1,
body.projects-page .project-story-body h2{font-family:var(--display-font)!important}
body.projects-page .project-story-header h1{font-family:var(--project-title-font)!important;font-weight:400!important;letter-spacing:-.025em!important}
body.projects-page .project-copy-block[data-section="problem"] h2,
body.projects-page .project-copy-block[data-section="solution"] h2{font-family:var(--problem-font)!important;font-weight:400!important}
body:not(.projects-page) .jackpot-heading .section-intro,
body:not(.projects-page) .contact-copy .section-intro,
body:not(.projects-page) .sketch-heading p,
body.projects-page .projects-page-intro>p:last-child,
body.projects-page .project-demo-card figcaption{font-family:var(--tagline-font)!important}

/* Shared display treatment for the main portfolio section titles. */
body:not(.projects-page) .jackpot-heading h2,
body:not(.projects-page) .sketch-heading h2,
body:not(.projects-page) .contact-copy h2,
body:not(.projects-page) .about-notes-heading .eyebrow{font-family:"BBH Bartle",Impact,sans-serif!important;font-size:clamp(30px,3.2vw,44px)!important;font-weight:400!important;line-height:1.12!important;letter-spacing:0!important}

/* Keep the tagline typefaces while bringing their sizes into a calmer range. */
body:not(.projects-page) .jackpot-heading .section-intro,
body:not(.projects-page) .contact-copy .section-intro,
body:not(.projects-page) .sketch-heading p,
body.projects-page .projects-page-intro>p:last-child,
body.projects-page .project-demo-card figcaption{font-size:clamp(17px,1.55vw,22px)!important;line-height:1.35!important}
body.projects-page .projects-page-intro h1{font-size:clamp(28px,3.2vw,40px)!important}
body:not(.projects-page) .jackpot-heading h2{font-size:clamp(28px,3.2vw,42px)!important}

/* Keep the active anchor visible while moving through long sections. */
.main-nav a[aria-current="location"]{background:#20272a!important;color:#fff!important}
.main-nav a[aria-current="location"] .nav-icon{stroke:#fff!important}
.main-nav a{transition:background-color .28s ease,color .28s ease,transform .28s ease,box-shadow .28s ease!important}

/* Side Gigs copy sits in a small paper tab, clear of the moving postcards. */
.sketch-heading h2{white-space:nowrap!important;font-size:clamp(27px,2.8vw,38px)!important}
.sketch-heading p{font-size:clamp(18px,1.8vw,23px)!important;color:#111!important}
.sketch-description{left:50%!important;bottom:clamp(44px,8vh,76px)!important;width:min(760px,calc(100% - 40px))!important;padding:13px 20px!important;border:1px solid #d9dcdd!important;border-radius:3px!important;background:#f0f1f1!important;box-shadow:0 5px 16px rgba(31,42,45,.08)!important;color:#111!important}
.sketch-description:before{content:"";position:absolute;left:22px;top:-7px;width:58px;height:7px;border:1px solid #d8dddd;border-bottom:0;border-radius:3px 3px 0 0;background:#fff}
.doodle-card-heading h3{font-family:var(--tagline-font)!important;font-size:clamp(30px,3.8vw,42px)!important;font-weight:700!important}
.doodle-card-heading p:last-child{font-family:var(--tagline-font)!important;font-size:clamp(18px,2vw,24px)!important;line-height:1.35!important}
.project-copy-block[data-section="developer"] h2{display:none!important}
.project-copy-block[data-section="developer"] p{color:#000!important}
.project-copy-block[data-section="problem"] h2,
.project-copy-block[data-section="solution"] h2{font-size:15px!important;font-weight:400!important;font-style:italic!important;color:#111!important}
.project-copy-block[data-section="problem"] p,
.project-copy-block[data-section="solution"] p{color:#111!important}

/* Keep portfolio copy consistently black; retain white lettering on the active dark nav pill. */
body{--ink:#000;--muted:#000;color:#000}
body :is(h1,h2,h3,h4,h5,p,li,small,label,figcaption,code,strong,em,.eyebrow,.section-intro,.contact-link-value,.contact-link-label,.sketch-description,.sketch-heading,.project-copy-block,.project-tech){color:#000!important}
body .main-nav a[aria-current="location"],
body .main-nav a[aria-current="page"],
body .main-nav a.is-active{background:#20272a!important;color:#fff!important}
body .slot-marquee h3{color:#fff!important}
.doodle-tool-button.pen-tool[aria-pressed="true"]{background:#fff!important}
.doodle-tool-button.pen-tool{transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease,border-color .24s ease,background-color .24s ease!important}
.doodle-tool-button.pen-tool[aria-pressed="true"]{border:2px solid #171717!important;box-shadow:0 0 0 4px rgba(0,0,0,.12),0 5px 12px rgba(0,0,0,.18)!important;transform:translateY(-3px) rotate(-7deg) scale(1.07)!important}
.doodle-tool-button.pen-tool[aria-pressed="true"] .doodle-tool-icon{filter:brightness(.45)!important}
.canvas-wrap.ink-active{cursor:crosshair;box-shadow:inset 0 0 0 2px rgba(0,0,0,.12)!important}
.canvas-wrap.ink-active #doodle-canvas{cursor:crosshair!important}
.sketch-heading{width:min(1000px,calc(100% - 32px))!important}
.sketch-heading p{max-width:none!important;white-space:nowrap!important;font-size:clamp(13px,1.5vw,22px)!important}
.sketch-lightbox{inset:50% auto auto 50%!important;margin:0!important;transform:translate(-50%,-50%)!important}
@media(max-width:600px){.sketch-heading{width:calc(100% - 18px)!important}.sketch-heading p{font-size:clamp(10px,2.4vw,14px)!important;letter-spacing:-.025em!important}}

/* Gentle varied arrivals add pan, wipe, tumble and rise motion as sections enter view. */
.scroll-reveal{opacity:0;transition:opacity .9s ease,translate 1s cubic-bezier(.2,.72,.25,1);transition-delay:var(--reveal-delay,0ms)}
.scroll-reveal.motion-pan{translate:-34px 0}
.scroll-reveal.motion-rise{translate:0 28px}
.scroll-reveal.is-visible{opacity:1;translate:0 0}
.main-nav a.is-active{background:#20272a!important;color:#fff!important}
.main-nav a[aria-current="location"],.main-nav a.is-active{background:#20272a!important;color:#fff!important;box-shadow:0 4px 12px rgba(20,28,31,.16)!important}
.main-nav a[aria-current="location"] .nav-icon,.main-nav a.is-active .nav-icon{stroke:#fff!important}
/* Active navigation is shown with a heavier label only. */
body .main-nav a[aria-current="location"],body .main-nav a[aria-current="page"],body .main-nav a.is-active{background:transparent!important;color:#20272a!important;box-shadow:none!important;font-weight:800!important}
body .main-nav a[aria-current="location"] .nav-icon,body .main-nav a[aria-current="page"] .nav-icon,body .main-nav a.is-active .nav-icon{stroke:currentColor!important}
body .main-nav a:hover,body .main-nav a:nth-child(even):hover{background:transparent!important;color:#20272a!important}
body .main-nav a:first-child:hover{background:transparent!important;color:#20272a!important}
body .main-nav a[aria-current],body .main-nav a.is-active{background:transparent!important;color:#20272a!important;box-shadow:none!important;font-weight:800!important}
body .main-nav a[aria-current] .nav-icon,body .main-nav a.is-active .nav-icon{stroke:currentColor!important}
/* Final menu state: all links stay neutral; only the current label becomes bold. */
body .main-nav a[aria-current],body .main-nav a.is-active,
body .main-nav a[aria-current="page"],body .main-nav a[aria-current="location"],
body .main-nav a[aria-current]:hover,body .main-nav a.is-active:hover{background:transparent!important;color:#40494d!important;box-shadow:none!important;font-weight:800!important}
body .main-nav a[aria-current] .nav-icon,body .main-nav a.is-active .nav-icon{stroke:#40494d!important}
/* Disable pill fills and pill motion in every menu interaction state. */
body .main-nav a,body .main-nav a:hover,body .main-nav a:focus-visible,body .main-nav a:active,
body .main-nav a[aria-current],body .main-nav a.is-active,body .main-nav a.nav-press{background:transparent!important;border-radius:0!important;box-shadow:none!important;animation:none!important;transform:none!important;}
body .main-nav a,body .main-nav a:hover,body .main-nav a:focus,body .main-nav a:focus-visible,body .main-nav a:active{transition:none!important;animation:none!important;transform:none!important;filter:none!important;opacity:1!important;color:#40494d!important;text-shadow:none!important}
body.about-notes-open .main-nav a[aria-current],body.about-notes-open .main-nav a.is-active,body.projects-page .main-nav a[aria-current],body.projects-page .main-nav a.is-active{background:transparent!important;color:#20272a!important;box-shadow:none!important;font-weight:800!important}
body.about-notes-open .main-nav a[aria-current] .nav-icon,body.projects-page .main-nav a[aria-current] .nav-icon{stroke:currentColor!important}
/* Keep Projects and About back arrows at the same fixed header offset. */
body.projects-page .project-page-back{position:fixed!important;z-index:30!important;top:88px!important;left:clamp(20px,6vw,80px)!important;margin:0!important}
@media(max-width:760px){body.projects-page .project-page-back{top:78px!important;left:20px!important}}
body.projects-page .projects-page-intro{max-width:780px!important;margin:78px auto 40px!important;padding:0 0 12px!important;border-bottom:1px solid #eceeef!important;text-align:center!important}
body.projects-page .projects-page-intro h1{margin:0!important;font-family:"BBH Bartle",Impact,sans-serif!important;font-size:clamp(28px,4vw,42px)!important;font-weight:400!important;line-height:1.12!important;letter-spacing:0!important;color:#000!important}
body.projects-page .projects-page-intro>p:last-child{margin:22px auto 0!important}
@media(max-width:700px){body.projects-page .projects-page-intro{margin-bottom:30px!important}}
/* Keep every menu item visually neutral regardless of previous section state. */
body .main-nav a,body .main-nav a[aria-current],body .main-nav a.is-active,
body .main-nav a:hover,body .main-nav a:focus-visible,body .main-nav a:active{background:transparent!important;color:#40494d!important;box-shadow:none!important;font-weight:500!important;transform:none!important;transition:none!important;opacity:1!important}
body .main-nav a .nav-icon{stroke:currentColor!important}
body .main-nav a[aria-current],body .main-nav a.is-active{font-weight:800!important}
/* Uniform active treatment: bold label only, with no pill or color change. */
body .main-nav a[aria-current],body .main-nav a.is-active,
body .main-nav a[aria-current="page"],body .main-nav a[aria-current="location"]{background:transparent!important;color:#40494d!important;box-shadow:none!important;font-weight:800!important}
body .main-nav a[aria-current] .nav-icon,body .main-nav a.is-active .nav-icon{stroke:currentColor!important}
body .main-nav a{transition:transform .16s cubic-bezier(.2,.8,.2,1)!important}
body .main-nav a:active{transform:scale(.88)!important}
@keyframes nav-link-press{0%{transform:scale(1)}45%{transform:scale(.88)}100%{transform:scale(1)}}
body .main-nav a:focus{animation:nav-link-press .32s ease-out}
@media(prefers-reduced-motion:reduce){body .main-nav a{transition:none!important;animation:none!important}body .main-nav a:active{transform:none!important}}
/* Consistent hover and click feedback for all navigation links. */
body .main-nav a{transform:none!important;transition:none!important;}
body .main-nav a:hover,body .main-nav a:focus-visible,body .main-nav a:active{transform:none!important;color:#40494d!important;opacity:1!important;}
body .main-nav a[aria-current],body .main-nav a.is-active{background:transparent!important;color:#40494d!important;box-shadow:none!important;font-weight:500!important;}
body .main-nav a[aria-current] .nav-icon,body .main-nav a.is-active .nav-icon{stroke:currentColor!important;}
body .main-nav a:first-child:hover,body .main-nav a:hover,body .main-nav a:nth-child(even):hover{background:transparent!important;color:#111!important;}
@media(prefers-reduced-motion:reduce){body .main-nav a{transition:none!important}}

/* Keep About selected as a filled pill while its overlay is open. */
body.about-notes-open .main-nav a[href="#about-details"]{background:#20272a!important;color:#fff!important;border-color:#20272a!important;border-radius:999px!important;box-shadow:0 4px 12px rgba(20,28,31,.16)!important;font-weight:700!important}
body.about-notes-open .main-nav a[href="#about-details"] .nav-icon{stroke:#fff!important}
body.about-notes-open .about-notes-section:not([hidden]){padding-top:clamp(104px,10vh,150px)!important}
body.about-notes-open .about-back{left:clamp(4px,1vw,14px)!important}
body.projects-page .project-page-back{left:clamp(4px,1vw,14px)!important}
@media(max-width:760px){body.about-notes-open .about-back,body.projects-page .project-page-back{left:6px!important}}
body.about-notes-open .about-photo-frame{opacity:1;transform:none}
body.about-notes-open .about-story{opacity:1}
#about-details.about-intro-playing .about-photo-frame{animation:about-photo-enter .8s cubic-bezier(.2,.75,.25,1) both}
#about-details.about-intro-playing .about-story{animation:about-story-enter .45s ease both;animation-delay:.28s}
#about-details.about-intro-playing .about-story p{opacity:0;animation:about-story-enter .35s ease forwards}
#about-details.about-intro-playing .about-story p:nth-child(1){animation-delay:.4s}
#about-details.about-intro-playing .about-story p:nth-child(2){animation-delay:.55s}
#about-details.about-intro-playing .about-story p:nth-child(3){animation-delay:.7s}
#about-details.about-intro-playing .about-story p:nth-child(4){animation-delay:.85s}
#about-details.about-intro-playing .about-story p:nth-child(5){animation-delay:1s}
body .site-header>.logo{left:clamp(12px,2vw,28px)!important}
body .site-header>.logo img{display:block;width:clamp(88px,9vw,150px);height:42px;object-fit:contain;object-position:left center}
@keyframes about-photo-enter{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes about-story-enter{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#about-details.about-intro-playing .about-photo-frame,#about-details.about-intro-playing .about-story,#about-details.about-intro-playing .about-story p{animation:none!important;opacity:1!important}}

/* Editorial project layout: open overview text, then a featured video beside notes. */
body.projects-page .project-story-header>div{text-align:center;width:100%}
body.projects-page .project-story-header h1{font-size:clamp(25px,3vw,38px)!important;margin:0 0 8px!important}
body.projects-page .project-tech{justify-content:center}
body.projects-page .project-story{max-width:1360px;padding-inline:clamp(12px,2vw,28px);background:#fff;border-bottom:1px solid #e5e5e5}
body.projects-page .project-story{max-width:1600px;padding-inline:clamp(24px,4vw,64px)}
body.projects-page .project-content-grid{width:100%;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto minmax(340px,auto);grid-template-areas:"problem solution" "demo developer";column-gap:clamp(20px,3vw,44px);row-gap:clamp(20px,2.5vw,34px);align-items:start}
body.projects-page .project-copy-block[data-section="problem"],body.projects-page .project-copy-block[data-section="solution"]{grid-area:auto;align-self:start;padding:8px 0 22px;background:transparent;border:0;border-bottom:1px solid #e5e5e5;box-shadow:none;overflow:visible}
body.projects-page .project-copy-block[data-section="problem"]{grid-area:problem}
body.projects-page .project-copy-block[data-section="solution"]{grid-area:solution}
body.projects-page .project-copy-block[data-section="problem"] h2,body.projects-page .project-copy-block[data-section="solution"] h2{margin:0 0 10px!important;font-size:12px!important;font-style:normal!important;font-weight:600!important;letter-spacing:.1em!important;text-transform:uppercase!important}
body.projects-page .project-copy-block[data-section="problem"] p,body.projects-page .project-copy-block[data-section="solution"] p{font-size:clamp(14px,1vw,16px)!important;line-height:1.6!important}
body.projects-page .project-demo-card{grid-area:demo;align-self:start;justify-self:stretch;width:100%;min-width:0;max-width:none;height:auto;display:block;margin:0;padding:0!important;background:#fff;border:0;border-radius:0;box-shadow:none;overflow:visible}
body.projects-page .project-demo-card video{display:block;width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain;background:#fff;border-radius:0}
body.projects-page .project-url-placeholder{display:block;width:max-content;max-width:100%;margin:12px 0 0;padding:0 0 3px;border:0;border-bottom:1px solid #777;color:#252525;font-size:12px;line-height:1.4;white-space:normal}
body.projects-page .project-copy-block[data-section="developer"]{grid-area:developer;align-self:start;overflow:visible;padding:8px 0 0;background:transparent;border:0;border-top:1px solid #e5e5e5;box-shadow:none}
body.projects-page .project-copy-block[data-section="developer"] h2{display:block!important;margin:10px 0 12px;font-size:12px!important;font-weight:600!important;letter-spacing:.1em!important;text-transform:uppercase!important}
body.projects-page .project-copy-block[data-section="developer"] p{font-size:clamp(14px,1.05vw,16px)!important;line-height:1.6!important}
@media(max-width:700px){body.projects-page .project-content-grid{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"problem" "solution" "demo" "developer"}body.projects-page .project-copy-block[data-section="problem"],body.projects-page .project-copy-block[data-section="solution"]{padding:10px 0 16px}body.projects-page .project-copy-block[data-section="developer"]{padding-top:8px}}
/* Shared vertical rhythm for the portfolio's primary section headings. */
body:not(.projects-page) .jackpot-heading,
body:not(.projects-page) .sketch-heading,
body:not(.projects-page) .contact-copy,
body.about-notes-open .about-notes-heading{margin-top:26px!important}
.main-nav a.is-active .nav-icon{stroke:#fff!important}
.contact-copy{max-width:920px;margin-inline:auto!important}
.contact-copy h2{display:flex;flex-direction:column;align-items:center;gap:.12em;font-size:clamp(28px,3.2vw,42px)!important;line-height:1.12!important;letter-spacing:-.015em!important;white-space:normal;text-align:center}
.contact-copy h2 .contact-greeting{font-size:.72em!important;line-height:1.15!important}
.contact-copy .section-intro{max-width:min(100%,1100px)!important;margin:18px auto 0!important;text-align:center}
.contact-copy .section-intro span{display:block;white-space:normal}
.contact-copy .section-intro .contact-signoff{margin-top:4px;font-size:.84em}
@media(min-width:761px){.contact-copy .section-intro{max-width:min(100%,1500px)!important}.contact-copy .section-intro>span:first-child{white-space:nowrap!important}.contact-copy .section-intro .contact-signoff{white-space:nowrap!important}}
body .main-nav a.is-active,body .main-nav a[aria-current="location"]{background:#20272a!important;color:#fff!important}
body .main-nav a.is-active .nav-icon,body .main-nav a[aria-current="location"] .nav-icon{stroke:#fff!important}
body .main-nav a.is-active,body .main-nav a[aria-current="location"]{background:#20272a!important;color:#fff!important}
body .main-nav a.is-active .nav-icon,body .main-nav a[aria-current="location"] .nav-icon{stroke:#fff!important}
body .main-nav a{transition:background-color .35s ease,color .35s ease,box-shadow .35s ease!important}
body .main-nav a.is-active,body .main-nav a[aria-current="location"]{background:#20272a!important;color:#fff!important;box-shadow:0 4px 12px rgba(20,28,31,.16)!important}
body .main-nav a.is-active .nav-icon,body .main-nav a[aria-current="location"] .nav-icon{stroke:#fff!important}
body .contact-link:hover,body .contact-link:focus-visible{background:rgba(0,0,0,.045)!important;color:#111!important;transform:translateY(-3px) scale(1.015)!important}
#doodle-canvas{position:relative;z-index:10;display:block;width:100%;height:100%;pointer-events:auto;touch-action:none;cursor:crosshair;user-select:none;-webkit-user-select:none}
.canvas-wrap{position:relative;isolation:isolate;touch-action:none;min-height:190px}
.doodle-tool-button .doodle-tool-icon{display:block;width:23px;height:23px;background:none!important;fill:none;stroke:#171717;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.doodle-tool-button[aria-pressed="true"]{background:#f0f0f0!important;border-color:#111!important;box-shadow:0 3px 9px #0002!important;transform:translateY(-2px)!important}
.doodle-tool-button[aria-pressed="true"] .doodle-tool-icon{stroke-width:2.3}
body:not(.projects-page) .name-button,body:not(.projects-page) .name-button .name-first,body:not(.projects-page) .name-button .name-last{font-family:"Slackey",Impact,sans-serif!important}
body:not(.projects-page) .name-button{flex-wrap:nowrap!important;white-space:nowrap!important;font-size:clamp(36px,5.2vw,68px)!important;letter-spacing:-.035em!important;line-height:1!important}
body:not(.projects-page) .name-button .name-first,body:not(.projects-page) .name-button .name-last{font-size:1em!important;white-space:nowrap!important}
body:not(.projects-page) .hero-role,body:not(.projects-page) .hero-role span{font-family:var(--font)!important;color:#000!important;font-size:12px!important;font-weight:400!important;line-height:1.3!important;letter-spacing:.13em!important;text-transform:uppercase!important}
.hero-photo-button{cursor:pointer}
.hero-photo-button:focus-visible{outline-offset:7px}
.canvas-wrap{height:210px!important;min-height:210px!important;overflow:hidden!important}
#doodle-canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:2!important;touch-action:none!important;pointer-events:auto!important}
.canvas-wrap.ink-active{cursor:crosshair!important}
.contact-copy h2>span{white-space:nowrap}
@media(max-width:520px){.contact-copy h2>span{font-size:clamp(23px,6.2vw,32px)!important}.contact-copy h2 .contact-greeting{font-size:clamp(20px,5.4vw,28px)!important}.contact-copy .section-intro>span:first-child{font-size:clamp(13px,3.6vw,16px)!important}}
body:not(.projects-page) .selected-project-title{font-family:var(--tagline-font)!important;font-weight:400!important}
@media(max-width:760px){.contact-copy h2{font-size:clamp(30px,7vw,44px)!important}.contact-copy h2 .contact-greeting{font-size:.78em!important}.contact-copy .section-intro{font-size:clamp(15px,3.6vw,19px)!important}.contact-copy .section-intro span{display:block}}
@media(max-width:760px){.contact-copy{width:100%;min-width:0;padding-inline:16px}.contact-copy h2{width:100%;max-width:100%;align-items:center}.contact-copy h2>span{max-width:100%;white-space:normal!important;text-wrap:balance;overflow-wrap:anywhere}.contact-copy h2 .contact-greeting{font-size:clamp(20px,5.4vw,28px)!important}.canvas-wrap,#doodle-canvas{touch-action:none!important}}

/* Community Corner: keep the pickup stack to the side and let the shared cards fill the wall. */
.community-doodle-section.section-grid{padding-left:0!important;padding-right:0!important}
.community-doodle-section{height:calc(100svh - 76px);min-height:0;padding:0;overflow:hidden;display:flex;align-items:stretch;background:#fff;background-image:none}
.community-doodle-section .doodle-card{width:100%;height:100%;max-width:none;margin:0 auto;padding:clamp(10px,1.5vh,16px) clamp(18px,3vw,38px) 0;display:flex;flex-direction:column;overflow:hidden}
.community-doodle-section .doodle-card{border:0!important;box-shadow:none}
.community-doodle-section .doodle-card:before{display:none}
.doodle-card-heading{min-height:0;height:20%;flex:0 0 20%;align-items:center;justify-content:center;text-align:center}
.doodle-card-heading>div{max-width:none!important;width:100%;display:grid;justify-items:center}
.community-studio{position:relative;z-index:1;display:grid;grid-template-columns:minmax(210px,260px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:clamp(18px,3vw,38px);align-items:stretch;flex:1 1 0%;min-height:0;overflow:visible}
.community-studio:has(.polaroid-wall-empty){grid-template-columns:minmax(210px,260px) minmax(0,1fr)}
.polaroid-pickup{position:relative;align-self:stretch;min-width:0;min-height:0;padding:10px 8px;text-align:center;display:grid;place-items:center}
.pickup-label{margin:0 0 12px;font-size:11px;letter-spacing:.17em;font-weight:700;color:#72736e}.pickup-label span{margin-left:5px;color:#d8796e}
.polaroid-stack{position:relative;width:min(100%,230px);height:min(100%,350px);min-height:220px;margin:0 auto;display:grid;place-items:center}
.stack-polaroid{position:absolute;top:12px;left:23px;width:130px;height:164px;border:0;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;cursor:pointer;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.stack-polaroid:nth-child(1){--polaroid-color:#fffdf8;transform:rotate(-13deg) translate(-18px,12px)}
.stack-polaroid:nth-child(2){--polaroid-color:#fffdf8;transform:rotate(10deg) translate(17px,8px)}
.stack-polaroid:nth-child(3){--polaroid-color:#fffdf8;transform:rotate(-2deg) translateY(22px);z-index:1}
.stack-polaroid:before{content:"";position:absolute;inset:9px 9px 37px;border:1px solid #d9d6cf;background:#fff;box-shadow:inset 0 0 0 4px #fffdf8}
.stack-polaroid span,.stack-polaroid small{position:relative;z-index:1;pointer-events:none}
.stack-polaroid span{font-size:34px;color:#6c7064}
.stack-polaroid small{position:absolute;bottom:12px;left:3px;right:3px;font:11px var(--tagline-font,var(--font));color:#56544e}
.stack-polaroid:hover,.stack-polaroid:focus-visible{z-index:3;transform:rotate(0) translateY(-10px) scale(1.06);box-shadow:0 14px 24px #2924192e}
.pickup-hint{margin:6px 0 0;color:#777168;font-size:13px}
.polaroid-wall-side{min-width:0;min-height:0;height:100%;overflow:hidden;display:flex;align-items:stretch}
.doodle-card-heading h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:clamp(12px,3vw,34px)}
.doodle-card-heading h3.community-title{display:flex;flex-direction:column;align-items:flex-start;flex-wrap:nowrap;white-space:nowrap;gap:3px}
.pickup-title,.feedback-title{font-family:var(--portfolio-display-font)!important;font-size:clamp(18px,2.1vw,26px);font-weight:500;letter-spacing:0;white-space:nowrap}
@media(max-width:760px){.doodle-card-heading h3{gap:10px}.pickup-title,.feedback-title{font-size:clamp(15px,2.4vw,19px)}}
@media(max-width:520px){.doodle-card-heading h3{gap:7px}.pickup-title,.feedback-title{font-size:clamp(12px,3.1vw,16px)}}
.polaroid-pickup{position:relative;top:auto;grid-column:auto;justify-self:stretch;width:auto;padding:10px 8px;text-align:center}
.polaroid-stack{width:min(100%,230px);height:min(100%,350px);min-height:220px;display:grid;place-items:center;margin:0 auto}
.community-title{width:100%;align-items:center!important;text-align:center;margin:0 auto!important}
.community-title .pickup-title,.community-title .feedback-title{width:100%;text-align:center}
.stack-polaroid{left:50%;top:50%;position:absolute;flex:initial;margin:0;width:clamp(118px,12vw,150px);height:clamp(155px,23vh,190px);transform-origin:center}
.stack-polaroid:nth-child(1){--polaroid-color:#fffdf8;transform:translate(-58%,-48%) rotate(-10deg)}
.stack-polaroid:nth-child(2){--polaroid-color:#fffdf8;transform:translate(-42%,-52%) rotate(8deg)}
.stack-polaroid:nth-child(3){--polaroid-color:#fffdf8;transform:translate(-50%,-50%) rotate(-2deg);z-index:1}
.stack-polaroid:hover,.stack-polaroid:focus-visible{transform:translate(-50%,-58%) rotate(0) scale(1.06)}
.polaroid-wall-side{grid-column:auto}
.community-wall-heading{display:none}
.polaroid-composer{position:relative;z-index:1;display:grid;justify-items:center;gap:18px;margin:0}
.polaroid-paper{background:var(--polaroid-color,#f4b8c5);padding:12px 12px 15px;box-shadow:0 8px 18px #29241920,0 2px 4px #29241912}
.polaroid-preview{width:min(100%,410px);transform:rotate(-1deg);transition:background-color .2s ease}
.polaroid-drawing-wrap{height:220px;position:relative;background:#fff;border:2px solid #d7d4cd;box-shadow:inset 0 0 0 5px #fffdf8;touch-action:none;overflow:hidden}
#doodle-canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:2!important;cursor:crosshair!important;touch-action:none!important;pointer-events:auto!important}
.drawing-hint{position:absolute;inset:0;display:grid;place-items:center;color:#918d84;font-size:14px;pointer-events:none;z-index:1}
.drawing-hint[hidden]{display:none}
.polaroid-drawing-wrap .clear-doodle{position:absolute;right:8px;bottom:8px;z-index:3;background:#fffdf8e8;font-size:12px;padding:5px 9px}
.polaroid-tools{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:10px 4px 0}
.polaroid-tool{border:1px solid #c9c5ba;background:#fffdf8;border-radius:99px;padding:6px 10px;font-size:13px;line-height:1}
.polaroid-tool span{font-size:11px}
.polaroid-tool.polaroid-pen-icon,.polaroid-tool.polaroid-eraser-icon{width:28px;height:28px;flex:0 0 28px;padding:0;border-radius:7px;background-color:#fffdf8!important;background-image:url("assets/pen-eraser-icons.png")!important;background-repeat:no-repeat!important;background-size:62px 25px!important;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease!important}
.polaroid-tool.polaroid-pen-icon{background-position:left 2px center!important}
.polaroid-tool.polaroid-eraser-icon{background-position:right 2px center!important}
.polaroid-tool.polaroid-pen-icon.is-active,.polaroid-tool.polaroid-eraser-icon.is-active{background-color:#fffdf8!important;border-color:#252522!important;box-shadow:0 0 0 3px rgba(37,37,34,.13),0 3px 8px #29241924!important;transform:translateY(-2px)}
.polaroid-tool.polaroid-pen-icon:hover,.polaroid-tool.polaroid-eraser-icon:hover{transform:translateY(-2px) scale(1.06)}
.polaroid-tool.polaroid-pen-icon:active,.polaroid-tool.polaroid-eraser-icon:active{transform:scale(.88)!important}
.polaroid-tool.is-active{background:#252522;color:white;border-color:#252522}
.polaroid-ink,.polaroid-stroke{display:flex;align-items:center;gap:5px;font-size:11px;color:#55544e}
.polaroid-ink input{width:28px;height:24px;padding:1px;border:1px solid #bbb;border-radius:5px;background:#fff;cursor:pointer}
.polaroid-stroke input{width:76px;accent-color:#718d94}
.polaroid-caption{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:12px 3px 0}
.polaroid-caption textarea{flex:1;min-width:0;min-height:58px;resize:vertical;border:0;border-bottom:1px dashed #72685f70;background:transparent;padding:7px 2px;color:#302e2b;font:16px/1.3 var(--tagline-font,var(--font));outline:none}
.polaroid-caption textarea::placeholder{color:#777168}
.polaroid-caption textarea:focus-visible{outline:none!important;outline-offset:0!important;box-shadow:none!important;border-bottom-color:#1d3557}
.polaroid-color-picker{display:grid;gap:3px;justify-items:center;color:#555;font-size:11px}
.polaroid-color-picker input{width:35px;height:30px;padding:2px;border:1px solid #aaa;border-radius:6px;background:#fff;cursor:pointer}
.polaroid-submit-row{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;width:100%}
.polaroid-submit{border:0;border-radius:99px;background:#20201e;color:#fff;padding:12px 20px;font-size:15px;transition:transform .2s,background .2s}
.polaroid-submit:hover{transform:translateY(-2px);background:#4c655f}
.polaroid-submit:disabled{opacity:.6;cursor:wait}
.polaroid-submit span{margin-left:6px}
.polaroid-submit-row .doodle-status{flex:0 1 auto;min-width:min(100%,220px);font-size:13px}
.polaroid-tool.polaroid-pen-icon,.polaroid-tool.polaroid-eraser-icon{border:1px solid #1D3557!important;border-radius:9px!important;box-shadow:0 3px 0 rgba(29,53,87,.14)!important}
.polaroid-tool.polaroid-pen-icon.is-active{background-color:#A8D8B9!important;border-color:#1D3557!important;box-shadow:0 0 0 2px #A8D8B966,0 3px 0 #1D3557!important}
.polaroid-tool.polaroid-eraser-icon.is-active{background-color:#F6D55C!important;border-color:#1D3557!important;box-shadow:0 0 0 2px #F6D55C88,0 3px 0 #1D3557!important}
.polaroid-tool.polaroid-pen-icon:hover,.polaroid-tool.polaroid-eraser-icon:hover{border-color:#ED553B!important;box-shadow:0 4px 0 #ED553B!important}
.polaroid-ink,.polaroid-stroke{padding:5px 8px;border:1px solid #1D355733;border-radius:999px;background:#F1F1F1;color:#1D3557;font-weight:600;transition:background .18s,transform .18s}
.polaroid-ink:hover,.polaroid-stroke:hover{background:#A8D8B955;transform:translateY(-1px)}
.polaroid-ink input{border:2px solid #1D3557;border-radius:6px}
.polaroid-stroke input{accent-color:#ED553B}
.polaroid-drawing-wrap .clear-doodle{border-color:#ED553B!important;background:#fff!important;color:#1D3557!important;transition:transform .18s,background .18s!important}
.polaroid-drawing-wrap .clear-doodle:hover{transform:rotate(-3deg) scale(1.04)!important;background:#F6D55C!important}
.polaroid-submit{background:#ED553B!important;border-radius:14px!important;box-shadow:0 5px 0 #1D3557!important;font-weight:700;transition:transform .18s,box-shadow .18s,background .18s!important}
.polaroid-submit:hover{background:#F6D55C!important;color:#1D3557!important;transform:translateY(-3px) rotate(-1deg)!important;box-shadow:0 8px 0 #1D3557!important}
.polaroid-submit:active{transform:translateY(2px) scale(.97)!important;box-shadow:0 2px 0 #1D3557!important}
.polaroid-submit-row .doodle-status:empty{display:none!important}
.polaroid-tools .polaroid-ink,.polaroid-tools .polaroid-stroke{background:transparent!important;border-color:transparent!important;color:#111!important;box-shadow:none!important}
.polaroid-tools .polaroid-ink:hover,.polaroid-tools .polaroid-stroke:hover{background:transparent!important;transform:none!important}
.polaroid-tool.polaroid-pen-icon,.polaroid-tool.polaroid-eraser-icon{background-color:#fff!important;border:1px solid #111!important;box-shadow:none!important}
.polaroid-tool.polaroid-pen-icon.is-active,.polaroid-tool.polaroid-eraser-icon.is-active{background-color:#111!important;border-color:#111!important;box-shadow:0 0 0 2px #111!important}
.polaroid-tool.polaroid-pen-icon:hover,.polaroid-tool.polaroid-eraser-icon:hover{border-color:#111!important;box-shadow:0 2px 0 #111!important}
.polaroid-ink input{border-color:#111!important}
.polaroid-stroke input{accent-color:#111!important}
.polaroid-drawing-wrap .clear-doodle{background:#fff!important;border:1px solid #111!important;color:#111!important}
.polaroid-drawing-wrap .clear-doodle:hover{background:#111!important;color:#fff!important;transform:none!important}
.polaroid-submit{background:#111!important;color:#fff!important;box-shadow:0 4px 0 #000!important}
.polaroid-submit:hover{background:#fff!important;color:#111!important;box-shadow:0 6px 0 #000!important}
.polaroid-tool.polaroid-pen-icon,.polaroid-tool.polaroid-eraser-icon{border-radius:0!important}
.polaroid-tool.polaroid-pen-icon.is-active,.polaroid-tool.polaroid-eraser-icon.is-active{filter:invert(1)!important;background-color:#111!important}
.polaroid-tool.polaroid-pen-icon:active,.polaroid-tool.polaroid-eraser-icon:active{filter:invert(1)!important;background-color:#111!important}
.polaroid-tools .polaroid-ink,.polaroid-tools .polaroid-stroke{border-radius:0!important}
.polaroid-ink input{border-radius:0!important;overflow:hidden}
.polaroid-drawing-wrap .clear-doodle{border-radius:0!important}
.polaroid-submit{border-radius:0!important}
.polaroid-submit,.polaroid-submit:hover,.polaroid-submit:active{box-shadow:none!important}
.polaroid-tool.polaroid-pen-icon,.polaroid-tool.polaroid-eraser-icon,
.polaroid-tool.polaroid-pen-icon.is-active,.polaroid-tool.polaroid-eraser-icon.is-active,
.polaroid-tool.polaroid-pen-icon:hover,.polaroid-tool.polaroid-eraser-icon:hover{box-shadow:none!important}
.polaroid-tools .polaroid-ink,.polaroid-tools .polaroid-stroke,
.polaroid-drawing-wrap .clear-doodle,.polaroid-drawing-wrap .clear-doodle:hover{box-shadow:none!important}
.polaroid-tools .polaroid-ink,.polaroid-tools .polaroid-stroke{background:#fff!important;border:1px solid #d8d8d8!important;color:#111!important;padding:6px 9px!important}
.polaroid-tool.polaroid-pen-icon,.polaroid-tool.polaroid-eraser-icon{background-color:#fff!important;border:1px solid #d8d8d8!important;filter:none!important;transition:background-color .16s ease,transform .16s ease,border-color .16s ease!important}
.polaroid-tool.polaroid-pen-icon:hover,.polaroid-tool.polaroid-eraser-icon:hover{background-color:#f4f4f4!important;border-color:#111!important;transform:translateY(-1px)!important}
.polaroid-tool.polaroid-pen-icon.is-active,.polaroid-tool.polaroid-eraser-icon.is-active{background-color:#fff!important;border:2px solid #111!important;filter:none!important;transform:none!important}
.polaroid-ink input{background:#fff!important;border:1px solid #aaa!important;border-radius:3px!important}
.polaroid-stroke input{accent-color:#111!important}
.polaroid-drawing-wrap .clear-doodle{background:#fff!important;border:1px solid #c8c8c8!important;color:#111!important}
.polaroid-submit{background:#fff!important;border:1px solid #111!important;color:#111!important}
.polaroid-submit:hover{background:#f4f4f4!important;color:#111!important;transform:translateY(-1px)!important}
.polaroid-modal #polaroid-editor-title{font-family:var(--portfolio-tagline-font)!important}
.polaroid-tools .polaroid-ink,.polaroid-tools .polaroid-stroke{background:transparent!important;border-color:transparent!important;padding-inline:5px!important}
.community-wall-heading{position:relative;z-index:1;display:flex;align-items:baseline;justify-content:space-between;gap:15px;border-bottom:1px solid #dedbd2;padding:0 0 10px;margin:0 0 24px}
.community-wall-heading h4{margin:0;font-size:clamp(20px,3vw,27px);font-family:var(--tagline-font,var(--font));font-weight:600}
.community-wall-heading>span{color:#777168;font-size:13px}
.polaroid-board{position:relative;width:100%;height:100%;min-width:0;overflow:hidden;border:1px solid #d7d4ca;border-radius:3px;background-color:#fff;background-image:linear-gradient(rgba(102,176,192,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(102,176,192,.16) 1px,transparent 1px);background-size:28px 28px;box-shadow:0 10px 24px #29241912}
.polaroid-pickup:before{content:"";position:absolute;inset:12px 5px;border:1px solid #d8d0bd;border-radius:3px;background-color:#f6f0df;background-image:linear-gradient(#9b896318 1px,transparent 1px),linear-gradient(90deg,#9b896318 1px,transparent 1px);background-size:24px 24px;box-shadow:inset 0 0 0 5px #fffdf6,0 8px 20px #29241912}
.polaroid-pickup:after{content:"";position:absolute;top:18px;left:50%;z-index:2;width:10px;height:10px;border-radius:50%;background:#78a9bb;box-shadow:0 2px 3px #28241940;transform:translateX(-50%)}
.polaroid-pickup:before,.polaroid-pickup:after{display:none}
.polaroid-wall{position:relative;z-index:1;display:flex;align-items:stretch;gap:18px;height:100%;min-height:0;width:100%;padding:20px 24px 28px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#c9cbc5 transparent;perspective:900px;touch-action:pan-x;-webkit-overflow-scrolling:touch}
.polaroid-wall::-webkit-scrollbar{height:3px}
.polaroid-wall::-webkit-scrollbar-track{background:transparent}
.polaroid-wall::-webkit-scrollbar-thumb{background:#c9cbc5;border-radius:99px}
.polaroid-board-page{flex:0 0 100%;min-width:0;height:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:14px 18px;align-items:center;scroll-snap-align:start;padding:2px 4px 8px}
.polaroid-postcard{position:relative;justify-self:center;width:min(100%,175px);max-height:100%;transform:rotate(var(--card-tilt,-2deg));transition:transform .25s,box-shadow .25s;padding:8px 8px 12px;animation:none;background:#fffdf8!important;box-shadow:0 5px 12px #29241924,0 1px 3px #29241916}
.polaroid-postcard:nth-child(3n+1),.polaroid-postcard:nth-child(3n+2),.polaroid-postcard:nth-child(3n){--polaroid-color:#fffdf8}
.polaroid-postcard:hover{transform:translateY(-7px) rotate(0) scale(1.035);box-shadow:0 13px 24px #2924192c;animation-play-state:paused}
.polaroid-postcard.is-floating-in{animation:polaroidArrive .95s cubic-bezier(.16,1,.3,1) both;z-index:2}
.polaroid-postcard-drawing{aspect-ratio:1;background:#fff;border:1px solid #d7d4cd;box-shadow:inset 0 0 0 4px #fffdf8;overflow:hidden}
.polaroid-postcard-drawing img{display:block;width:100%;height:100%;object-fit:contain}
.polaroid-postcard-note{min-height:clamp(38px,5vh,52px);margin:0;padding:11px 4px 2px;color:#302e2b;font:13px/1.2 var(--tagline-font,var(--font));text-align:center;overflow-wrap:anywhere;white-space:pre-wrap}
.polaroid-postcard-date{display:block;margin:2px 2px 0;text-align:right;color:#736d66;font-size:10px}
.polaroid-wall-empty{flex:0 0 100%;display:grid;place-items:center;grid-column:1/-1;grid-row:1/-1;align-self:center;text-align:center;color:#777168;padding:25px 10px}
.polaroid-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility .25s}
.polaroid-modal.is-open{opacity:1;visibility:visible;pointer-events:auto}
.polaroid-modal-scrim{position:absolute;inset:0;border:0;background:transparent;cursor:default}
.polaroid-modal .polaroid-composer{z-index:1;width:min(100%,470px);max-height:calc(100svh - 40px);overflow:auto;padding:28px 28px 22px;background:#fbfaf7;box-shadow:0 25px 80px #0005;transform-origin:center;animation:polaroidOpen .36s cubic-bezier(.2,.85,.3,1) both}
.polaroid-modal.is-opening .polaroid-composer{animation:none;transform:translate(var(--open-x,0),var(--open-y,0)) scale(.38) rotate(-8deg);opacity:.6}
.polaroid-modal h4{margin:0;font:600 25px var(--tagline-font,var(--font));text-align:center}
.polaroid-modal-close{position:absolute;right:12px;top:10px;border:0;background:transparent;font-size:28px;color:#68645e;line-height:1}
.polaroid-modal .polaroid-preview{width:min(100%,370px);transform:none}
.polaroid-modal .polaroid-drawing-wrap{height:230px}
.polaroid-modal .polaroid-submit-row{margin-top:3px}
body.polaroid-editor-open{overflow:hidden}
@keyframes polaroidOpen{from{opacity:.5}to{opacity:1}}
@keyframes polaroidDrift{from{translate:0 0}to{translate:0 -5px}}
@keyframes polaroidArrive{0%{opacity:.1;transform:translate(var(--fly-x,-110px),var(--fly-y,55px)) rotate(-16deg) scale(.45)}68%{opacity:1;transform:translate(0,-8px) rotate(3deg) scale(1.04)}100%{transform:rotate(var(--card-tilt,-2deg)) scale(1)}}
.polaroid-pickup .polaroid-stack{margin-inline:auto}
@media(max-width:760px){.community-doodle-section{height:calc(100svh - 64px)}.community-doodle-section .doodle-card{padding:14px}.doodle-card-heading{height:23%;flex-basis:23%}.community-studio{grid-template-columns:minmax(135px,190px) minmax(0,1fr);gap:10px}.polaroid-pickup{position:relative;top:auto;padding:5px 0}.polaroid-stack{transform:scale(.68);transform-origin:top left;margin:10px auto 0;width:190px;height:190px}.stack-polaroid{width:130px;height:164px;left:32px}.polaroid-wall{gap:14px;padding:16px 12px 24px}.polaroid-postcard{flex-basis:clamp(135px,30vw,175px);padding:7px 7px 10px}.polaroid-postcard-note{font-size:13px}}
@media(max-width:520px){.community-doodle-section .doodle-card{padding:10px}.doodle-card-heading{min-height:0;height:23%;flex-basis:23%}.community-studio{grid-template-columns:minmax(105px,30%) minmax(0,1fr);gap:6px}.polaroid-pickup{padding:3px 0}.polaroid-stack{transform:scale(.48);transform-origin:top left;width:150px;height:136px;margin-top:8px}.stack-polaroid{width:118px;height:150px;left:20px}.polaroid-wall{gap:10px;padding:12px 8px 20px}.polaroid-postcard{flex-basis:clamp(125px,48vw,165px)}.polaroid-modal{padding:10px}.polaroid-modal .polaroid-composer{max-height:calc(100svh - 20px);padding:28px 16px 18px}.polaroid-modal .polaroid-drawing-wrap{height:190px}}
@media(max-width:760px){.community-studio{grid-template-columns:minmax(135px,190px) minmax(0,1fr);gap:10px}.polaroid-pickup{position:relative;top:auto;padding:10px 5px}.polaroid-stack{transform:none;transform-origin:center;margin:0 auto;width:100%;height:100%;min-height:190px}.stack-polaroid{width:clamp(105px,15vw,130px);height:clamp(140px,20vh,164px);left:50%;top:50%}.polaroid-wall{gap:10px;padding:14px}.polaroid-board-page{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:7px 10px}.polaroid-postcard{width:min(100%,145px);padding:6px}.polaroid-postcard-note{font-size:12px;min-height:34px}}
@media(max-width:520px){.community-studio{grid-template-columns:minmax(100px,30%) minmax(0,1fr);gap:6px}.polaroid-pickup{padding:8px 2px}.polaroid-stack{min-height:150px}.stack-polaroid{width:clamp(82px,22vw,112px);height:clamp(112px,19vh,145px)}.polaroid-wall{gap:8px;padding:12px 8px}.polaroid-board-page{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:6px;padding:2px}.polaroid-postcard{width:100%;padding:5px}.polaroid-postcard-note{font-size:11px;min-height:30px;padding-top:8px}.polaroid-postcard-date{font-size:9px}}
@media(prefers-reduced-motion:reduce){.polaroid-postcard,.polaroid-postcard.is-floating-in{animation:none}.polaroid-modal,.polaroid-modal .polaroid-composer,.stack-polaroid{transition:none;animation:none}}
@media(prefers-reduced-motion:reduce){.scroll-reveal,.scroll-reveal.is-visible{opacity:1;translate:none;transition:none!important}}

/* The pickup is now a small control on the board; let the shared wall use all available width. */
.community-studio{display:block;grid-template-columns:minmax(0,1fr);overflow:hidden}
.polaroid-wall-side{width:100%;height:100%;min-height:0}
.polaroid-board{height:100%;display:flex;flex-direction:column;padding-top:42px}
.polaroid-new-button{position:absolute;z-index:4;top:9px;left:12px;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid #c8c6be;border-radius:999px;background:#fffdf8;color:#272724;font-size:13px;line-height:1.1;box-shadow:0 2px 7px #29241912;cursor:pointer;transition:background .18s,transform .18s,box-shadow .18s}
.polaroid-new-button:hover,.polaroid-new-button:focus-visible{background:#fff;transform:translateY(-1px);box-shadow:0 4px 12px #2924191c}
.polaroid-new-button span{font-size:16px;line-height:.8}
.polaroid-wall{height:auto;flex:1 1 auto;min-height:0}
@media(max-width:760px){.community-studio{display:block}.polaroid-board{padding-top:40px}}
.polaroid-board{border:1px solid #d8d8d5;border-radius:12px;background:#fff;box-shadow:0 9px 24px #29241918}
.polaroid-new-button{top:10px;left:50%;transform:translateX(-50%);padding:9px 20px 12px;border:1px solid #aa9d68;border-radius:7px 7px 2px 2px;background:#fff3a8;color:#29271e;font-family:var(--portfolio-note-font)!important;font-size:20px;font-weight:700;letter-spacing:.015em;box-shadow:0 4px 0 #d1b94c,0 7px 12px #29241920;white-space:nowrap}
.polaroid-new-button::after{content:"";position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);width:24px;height:12px;background:#fff3a8;clip-path:polygon(0 0,100% 0,50% 100%)}
.polaroid-new-button:hover,.polaroid-new-button:focus-visible{background:#ffef8a;transform:translate(-50%,3px);box-shadow:0 2px 0 #d1b94c,0 5px 9px #29241920}
.polaroid-new-button:active{transform:translate(-50%,8px);box-shadow:0 1px 0 #d1b94c,0 2px 5px #29241918}
.polaroid-new-button:hover::after,.polaroid-new-button:focus-visible::after,.polaroid-new-button:active::after{background:#ffef8a}
.polaroid-new-button span{font-family:var(--portfolio-body-font)!important;font-size:18px;vertical-align:1px}
@media(max-width:520px){.polaroid-new-button{font-size:17px;padding:7px 15px 10px}}
.polaroid-board:before{position:absolute;z-index:0;inset:0;content:"";border-radius:inherit;background-image:url("assets/community-board-pattern.jpg");background-size:300px auto;background-position:center;background-repeat:repeat;opacity:.2;pointer-events:none}
.polaroid-board-page{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px 12px}
.polaroid-postcard{width:min(100%,142px);padding:6px 6px 9px}
.polaroid-postcard-note{min-height:clamp(30px,4vh,40px);padding:8px 2px 1px;font-size:11px}
.polaroid-postcard-date{font-size:8px}
.polaroid-board-page{position:relative}
.polaroid-postcard{z-index:1}
.board-sticker{position:absolute;z-index:0;width:clamp(28px,3.6vw,44px);aspect-ratio:1;background-image:url("assets/community-sticker-sprite.png");background-size:400% 300%;background-repeat:no-repeat;pointer-events:none;filter:drop-shadow(0 2px 2px #29241922)}
.sticker-dino{background-position:0% 0%}
.sticker-pencil{background-position:33.333% 0%}
.sticker-lightning{background-position:66.667% 0%}
.sticker-heart{background-position:100% 0%}
.sticker-brain{background-position:0% 50%}
.sticker-laptop{background-position:33.333% 50%}
.sticker-coffee{background-position:66.667% 50%}
.sticker-pin{background-position:100% 50%}
.sticker-chat{background-position:0% 100%}
.sticker-productive{background-position:33.333% 100%}
.sticker-calendar{background-position:66.667% 100%}
.sticker-error{background-position:100% 100%}
.sticker-position-1{left:18%;top:1%;transform:rotate(-11deg)}
.sticker-position-2{left:38%;top:0;transform:rotate(8deg)}
.sticker-position-3{left:59%;top:2%;transform:rotate(5deg)}
.sticker-position-4{left:79%;top:0;transform:rotate(-8deg)}
.sticker-position-5{left:19%;top:45%;transform:rotate(7deg)}
.sticker-position-6{left:59%;top:49%;transform:rotate(-9deg)}
.sticker-position-7{left:39%;bottom:0;transform:rotate(12deg)}
.sticker-position-8{left:79%;bottom:2%;transform:rotate(-6deg)}
.sticker-position-9{left:19%;bottom:1%;transform:rotate(9deg)}
.sticker-position-10{left:59%;bottom:0;transform:rotate(-12deg)}
@media(max-width:760px){.polaroid-board-page{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6px}.polaroid-postcard{width:100%;padding:4px 4px 6px}.polaroid-postcard-note{min-height:28px;padding:6px 1px 0;font-size:9px}.polaroid-postcard-date{font-size:7px}}

/* Portfolio typography: four families total, shared consistently across pages. */
:root{--portfolio-body-font:'Inter',Arial,sans-serif;--portfolio-heading-font:'Bodoni Moda',Georgia,serif;--portfolio-project-title-font:'DM Serif Display',Georgia,serif;--portfolio-problem-font:'Yusei Magic','Trebuchet MS',sans-serif;--portfolio-tagline-font:'Life Savers',Georgia,serif;--portfolio-display-font:'BBH Bartle',Impact,sans-serif;--portfolio-name-font:'Slackey',Impact,sans-serif;--portfolio-note-font:'Caveat','Segoe Print',cursive}
body,body :is(p,li,small,label,button,a,input,textarea,select,figcaption,code,strong,em,.eyebrow,.project-tech,.contact-link-label,.contact-link-value,.contact-link-arrow,.site-footer,.modal-content,.doodle-controls,.gallery-note,.wall-note,.dustbin-label,.workspace-footnote,.portrait-caption,.drawing-hint,.polaroid-date){font-family:var(--portfolio-body-font)!important}
body :is(h1,h2,h3,h4,h5,h6,.section-intro,.hero-role,.sketch-heading p,.projects-page-intro>p,.project-demo-card figcaption,.jackpot-details .selected-project-title,.doodle-card-heading p,.doodle-card-heading h3,.community-wall-heading h4){font-family:var(--portfolio-heading-font)!important}
body:not(.projects-page) :is(.jackpot-heading h2,.sketch-heading h2,.contact-copy h2,.about-notes-heading .eyebrow),body.projects-page .projects-page-intro h1{font-family:var(--portfolio-display-font)!important}
body.projects-page .project-story-header h1{font-family:var(--portfolio-project-title-font)!important}
body.projects-page .project-copy-block[data-section="problem"] h2,body.projects-page .project-copy-block[data-section="solution"] h2{font-family:var(--portfolio-problem-font)!important}
body:not(.projects-page) :is(.jackpot-heading .section-intro,.contact-copy .section-intro,.sketch-heading p),body.projects-page :is(.projects-page-intro>p:last-child,.project-demo-card figcaption){font-family:var(--portfolio-tagline-font)!important}
body.projects-page .project-story-body h2{font-family:var(--portfolio-heading-font)!important}
body.projects-page .project-copy-block[data-section="developer"] p{font-family:var(--portfolio-note-font)!important}
body .name-button,body .name-button :is(.name-first,.name-last,.name-star){font-family:var(--portfolio-name-font)!important}

/* Match supporting copy and navigation to the sketch description typeface. */
body :is(.main-nav a,.hero-credential,.hello,.hero-role,.hero-note,.about-note,.about-note p,.about-note strong,.about-note em,.sketch-description,.skill,.skills-list,.skills-list li){font-family:var(--portfolio-body-font)!important;font-style:italic!important}
body .main-nav a{font-style:normal!important}
body:not(.projects-page) :is(.hello,.hero-role,.hero-note){font-style:normal!important}
body:not(.projects-page) .hero-role{font-size:clamp(13px,1.15vw,16px)!important;font-weight:700!important;letter-spacing:.08em!important}
body.projects-page .project-copy-block[data-section="problem"] h2,body.projects-page .project-copy-block[data-section="solution"] h2{font-family:var(--portfolio-tagline-font)!important}
/* Keep project summaries compact and align the demo directly beneath them on every project. */
body.projects-page .project-content-grid{row-gap:0!important}
body.projects-page .project-copy-block[data-section="problem"] h2,body.projects-page .project-copy-block[data-section="solution"] h2{font-size:11px!important;margin-bottom:7px!important}
body.projects-page .project-copy-block[data-section="developer"] h2{display:none!important}
body.projects-page .project-copy-block[data-section="developer"]{border-top:0!important;padding-top:0!important}
@media(max-width:700px){body.projects-page .project-content-grid{row-gap:0!important}}
body.projects-page .projects-page-main{padding-left:clamp(12px,2vw,28px)!important;padding-right:clamp(12px,2vw,28px)!important}
body.projects-page .project-story{padding-left:clamp(12px,1.5vw,24px)!important;padding-right:clamp(12px,1.5vw,24px)!important}
/* Let project copy and demos use the page width, with the developer note in its own card. */
body.projects-page .projects-page-main{width:100%!important;max-width:none!important;padding-left:0!important;padding-right:0!important}
body.projects-page .project-story{width:100%!important;max-width:none!important;padding-left:0!important;padding-right:0!important}
body.projects-page .project-story{width:100vw!important;max-width:none!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;padding-left:0!important;padding-right:0!important}
body.projects-page .project-content-grid{width:100%!important;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)!important;column-gap:clamp(20px,2.5vw,44px)!important}
body.projects-page .project-copy-block[data-section="developer"]{padding:22px 26px!important;background:rgba(29,53,87,.055)!important;border:1px solid rgba(29,53,87,.12)!important;border-radius:12px!important;box-shadow:0 8px 24px rgba(29,53,87,.06)!important}
body.projects-page .project-copy-block[data-section="developer"] p{font-size:clamp(16px,1.2vw,21px)!important;line-height:1.32!important}
body.projects-page .project-demo-card{justify-self:center!important;margin-inline:auto!important}
body.projects-page .project-demo-card video{display:block!important;margin-inline:auto!important;object-position:center!important}
body.projects-page :is(#epicure,#infant-cry) .project-copy-block{position:relative;top:-12px}
@media(max-width:700px){body.projects-page .projects-page-main{padding-left:0!important;padding-right:0!important}body.projects-page .project-story{width:100%!important;margin-left:0!important;margin-right:0!important;padding-inline:0!important}body.projects-page .project-content-grid{grid-template-columns:minmax(0,1fr)!important}body.projects-page .project-copy-block[data-section="developer"]{padding:18px!important}}

/* Project names share the section display face at a quieter scale. */
body.projects-page :is(.projects-page-intro h1,.project-story-header h1,.project-card strong,.project-demo-card h2,.project-demo-card h3,.project-title){font-family:var(--portfolio-display-font)!important;font-size:clamp(22px,2.5vw,34px)!important;font-weight:500!important;line-height:1.15!important;letter-spacing:0!important}
body:not(.projects-page) .selected-project-title{font-family:var(--portfolio-tagline-font)!important;font-size:clamp(20px,2.2vw,30px)!important;font-weight:500!important;line-height:1.15!important;letter-spacing:0!important}
body:not(.projects-page) .hero-role{font-family:var(--font)!important;color:#000!important}
body:not(.projects-page) .jackpot-heading{transform:translateY(-22px);text-align:center!important}
body:not(.projects-page) .jackpot-heading{width:100%;text-align:center!important}
body:not(.projects-page) .jackpot-heading h2{width:100%;margin-inline:auto!important;text-align:center!important}
body:not(.projects-page) .jackpot-heading .section-intro{display:block;width:min(100%,1200px)!important;max-width:1200px!important;margin:16px auto 0!important;white-space:normal!important;text-align:center!important}
body:not(.projects-page) .slot-reel{display:grid!important;place-items:center!important;padding:10px!important}
body:not(.projects-page) .slot-reel img{display:block!important;width:64%!important;height:64%!important;max-width:64%!important;max-height:64%!important;margin:auto!important;object-fit:contain!important;object-position:50% 50%!important;align-self:center!important;justify-self:center!important}
body:not(.projects-page) .sketch-description{background:#eeeeec!important;border:0!important;border-radius:6px!important;box-shadow:0 6px 17px rgba(25,28,29,.1)!important}
body:not(.projects-page) .sketch-description:before{content:none!important}
body:not(.projects-page) .sketch-description{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#000!important;font-family:var(--portfolio-tagline-font),Georgia,serif!important;font-size:clamp(16px,1.35vw,20px)!important;font-style:normal!important;font-weight:400!important;line-height:1.42!important;letter-spacing:0!important}
body:not(.projects-page) .sketch-description:before{content:none!important;display:none!important}
body .site-header{padding-left:clamp(12px,1.5vw,24px)!important}
@media(max-width:760px){body .site-header{padding-left:14px!important}}
body:not(.projects-page) .jackpot-layout{max-width:1450px;grid-template-columns:minmax(420px,.92fr) minmax(420px,1.08fr);gap:clamp(42px,5vw,82px);margin-top:58px}
body:not(.projects-page) .slot-side{max-width:560px}
@media(max-width:900px){body:not(.projects-page) .jackpot-layout{grid-template-columns:minmax(0,1fr);gap:42px;margin-top:38px}body:not(.projects-page) .slot-side{max-width:min(500px,calc(100% - 40px))}}

/* Front page name badge, inspired by the attached classic hello sticker. */
body:not(.projects-page) .name-button{position:relative;isolation:isolate;width:min(100%,680px);min-height:290px;display:flex!important;align-items:flex-end!important;justify-content:center!important;gap:.08em!important;overflow:hidden;background:#ed1717!important;border:0!important;border-radius:18px!important;padding:0 22px 35px!important;color:#101010!important;font-family:var(--portfolio-name-font)!important;font-size:clamp(48px,8vw,112px)!important;font-weight:400!important;letter-spacing:-.045em!important;line-height:.9!important;text-align:center!important;box-shadow:0 8px 22px rgba(32,32,30,.13)}
body:not(.projects-page) .name-button::before{content:"HELLO\A my name is";position:absolute;z-index:2;top:18px;left:10px;right:10px;color:#fff;font-family:var(--portfolio-note-font)!important;font-size:clamp(23px,3vw,38px)!important;font-weight:700;line-height:1.05;letter-spacing:0;text-align:center;white-space:pre-line}
body:not(.projects-page) .name-button::after{content:"";position:absolute;z-index:-1;left:3%;right:3%;bottom:24px;height:59%;border-radius:12px;background:#fff}
body:not(.projects-page) .name-button .name-first,body:not(.projects-page) .name-button .name-last{position:relative;z-index:1;font-family:var(--portfolio-name-font)!important;font-size:1em!important;font-weight:400!important;letter-spacing:inherit!important;line-height:1!important;text-transform:uppercase!important;white-space:nowrap!important;text-shadow:3px 3px 0 #fff,6px 6px 0 #111,-2px -2px 0 #111,2px -2px 0 #111,-2px 2px 0 #111}
body:not(.projects-page) .name-button .name-star{display:none!important}
body:not(.projects-page) .hello{display:none!important}
body:not(.projects-page) .name-button{width:min(100%,680px);min-height:290px;padding:0 18px 38px!important;font-size:clamp(32px,4.8vw,64px)!important;letter-spacing:-.055em!important;border-radius:25px 18px 23px 17px!important;transform:rotate(-1.4deg);transform-origin:50% 55%;box-shadow:0 9px 0 #c10d0d,0 15px 27px rgba(32,32,30,.19)!important;animation:sticker-drift 5s ease-in-out infinite}
body:not(.projects-page) .name-button::before{top:20px;font-size:clamp(22px,2.8vw,35px)!important}
body:not(.projects-page) .name-button::after{left:3%;right:3%;bottom:27px;height:56%;border-radius:17px 12px 18px 13px;transform:rotate(.5deg)}
body:not(.projects-page) .name-button .name-first,body:not(.projects-page) .name-button .name-last{font-size:.86em!important;letter-spacing:-.065em!important;text-shadow:2px 3px 0 #fff,5px 6px 0 #111,-2px -2px 0 #111,2px -2px 0 #111,-2px 2px 0 #111!important}
body:not(.projects-page) .name-button:hover{transform:rotate(1deg) translateY(-5px)!important;animation-play-state:paused}
@keyframes sticker-drift{0%,100%{rotate:-1.4deg;translate:0 0}50%{rotate:-.3deg;translate:0 -4px}}
@media(max-width:760px){body:not(.projects-page) .name-button{width:min(100%,560px);min-height:225px;padding:0 11px 29px!important;font-size:clamp(28px,7.2vw,50px)!important}body:not(.projects-page) .name-button::before{top:15px;font-size:clamp(20px,5vw,29px)!important}body:not(.projects-page) .name-button::after{bottom:20px;height:56%}}
@media(prefers-reduced-motion:reduce){body:not(.projects-page) .name-button{animation:none;transform:rotate(-1deg)}}

/* Low-opacity illustration sits behind the specialty and intro copy. */
body:not(.projects-page) .hero-copy{position:relative;isolation:isolate}
body:not(.projects-page) .hero-copy::before{content:"";position:absolute;z-index:-1;inset:-24px -28px -22px;background:url("assets/hero-community-illustration.jpg") center 42%/contain no-repeat;opacity:.17;pointer-events:none}
@media(max-width:760px){body:not(.projects-page) .hero-copy::before{inset:-18px -16px -24px;background-position:center 46%;opacity:.14}}

/* Intro artwork supplied by the portfolio owner. */
body:not(.projects-page) .hero{position:relative;isolation:isolate;min-height:calc(100vh - 76px);grid-template-columns:1fr;align-items:center;padding:120px clamp(34px,7vw,110px) 125px;overflow:hidden;background:#fff}
body:not(.projects-page) .hero::before{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(55,76,78,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(55,76,78,.09) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(90deg,transparent,#000 25%,#000 85%,transparent)}
body:not(.projects-page) .hero-copy{z-index:3;width:100%;max-width:none;justify-self:stretch;align-self:center;padding:0;background:transparent;border:0;box-shadow:none;pointer-events:none}
body:not(.projects-page) .hero-specialties{position:absolute;z-index:8;top:22px;left:clamp(30px,7vw,110px);right:clamp(30px,7vw,110px);display:flex;align-items:center;justify-content:center;gap:clamp(18px,4vw,60px)}
body:not(.projects-page) .hero-specialties a{display:flex;align-items:center;gap:8px;padding:7px 10px;color:#181818;font-size:clamp(12px,1.15vw,16px);font-weight:600;white-space:nowrap;transition:transform .2s,color .2s}
body:not(.projects-page) .hero-specialties a:hover{transform:translateY(-3px);color:#f45116}
body:not(.projects-page) .hero-specialties svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body:not(.projects-page) .hero-specialties small{display:block;font-size:9px;line-height:1;letter-spacing:.02em;font-weight:400}
body:not(.projects-page) .hero-copy::before{content:none!important}
body:not(.projects-page) .hero-orange-word{position:absolute;z-index:0;left:clamp(20px,5vw,80px);right:clamp(20px,5vw,80px);top:53%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;font-family:var(--portfolio-display-font);font-size:clamp(125px,20.6vw,330px);line-height:.83;letter-spacing:-.065em;color:#f45116;white-space:nowrap;pointer-events:none}
body:not(.projects-page) .hero-orange-word span:first-child{padding-right:.1em}
body:not(.projects-page) .hero-illustration{position:absolute;z-index:2;right:clamp(10px,5vw,78px);bottom:0;width:min(65vw,850px);height:72%;display:grid;align-items:end;pointer-events:none;color:#171a18}
body:not(.projects-page) .hero-illustration svg{width:100%;max-height:100%;overflow:visible;filter:drop-shadow(0 3px 0 #faf9f6)}
body:not(.projects-page) .hero .hero-art{position:absolute;z-index:4;top:32px;right:clamp(24px,8vw,125px);min-height:0;width:clamp(120px,14vw,205px)}
body:not(.projects-page) .hero-photo-button{width:100%;height:auto;aspect-ratio:1;border:8px solid #fff;border-radius:50%;box-shadow:0 6px 0 #20201e;transform:rotate(5deg);overflow:visible}
body:not(.projects-page) .hero-profile-photo{border-radius:50%;object-position:center 36%}
body:not(.projects-page) .profile-photo-caption{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) rotate(-5deg);width:max-content;padding:7px 10px;background:#fff;border:1px solid #20201e;color:#20201e;font-size:9px;letter-spacing:.08em;box-shadow:3px 3px 0 #20201e}
body:not(.projects-page) .hero-copy .hello{font-family:var(--portfolio-note-font)!important;font-size:clamp(21px,2.5vw,31px)!important;font-weight:700;color:#252525!important;margin-bottom:10px!important}
body:not(.projects-page) .hero-copy .name-button{font-family:var(--portfolio-display-font)!important;font-size:clamp(58px,10vw,138px)!important;font-weight:400!important;line-height:.85!important;letter-spacing:-.045em!important;text-transform:uppercase;color:#171a18!important;display:flex!important;flex-wrap:wrap;gap:.1em!important}
body:not(.projects-page) .hero-copy .name-button .name-first,body:not(.projects-page) .hero-copy .name-button .name-last{font-family:var(--portfolio-display-font)!important;white-space:normal!important;letter-spacing:inherit!important}
body:not(.projects-page) .hero-copy .name-star{display:none!important}
body:not(.projects-page) .hero-role{display:none!important}
body:not(.projects-page) .hero-role span{color:#f45116!important;padding:0 5px}
body:not(.projects-page) .hero-note{position:absolute;z-index:6;left:clamp(30px,7vw,110px);bottom:24px;max-width:360px;margin:0!important;font-family:var(--portfolio-body-font)!important;font-size:clamp(15px,1.35vw,20px)!important;line-height:1.45!important;color:#171717!important}
@media(max-width:760px){body:not(.projects-page) .hero{min-height:calc(100svh - 68px);padding:120px 22px 155px;justify-content:center}body:not(.projects-page) .hero-specialties{top:13px;left:14px;right:14px;justify-content:space-between;gap:2px}body:not(.projects-page) .hero-specialties a{gap:4px;padding:6px 2px;font-size:10px;white-space:normal}body:not(.projects-page) .hero-specialties svg{width:18px;height:18px}body:not(.projects-page) .hero-specialties small{font-size:7px}body:not(.projects-page) .hero-art{top:72px!important;right:24px!important;width:72px!important}body:not(.projects-page) .hero-photo-button{border-width:4px}body:not(.projects-page) .profile-photo-caption{display:none}body:not(.projects-page) .hero-illustration{right:-3%;width:104%;height:42%;opacity:.9}body:not(.projects-page) .hero-orange-word{top:48%;left:0;right:0;font-size:clamp(90px,20vw,155px);line-height:.9;letter-spacing:-.05em}body:not(.projects-page) .hero-orange-word span{transform:scaleX(.92)}body:not(.projects-page) .hero-copy .name-button{font-size:clamp(54px,12vw,84px)!important}body:not(.projects-page) .hero-note{left:22px;bottom:24px;max-width:280px;font-size:15px!important}}
@media(max-width:420px){body:not(.projects-page) .hero{padding-top:125px;padding-bottom:135px}body:not(.projects-page) .hero-specialties a{flex-direction:column;text-align:center;font-size:9px}body:not(.projects-page) .hero-specialties small{font-size:6px}body:not(.projects-page) .hero-orange-word{font-size:clamp(75px,19vw,100px)}body:not(.projects-page) .hero-note{max-width:250px;font-size:14px!important}}
@media(prefers-reduced-motion:reduce){body:not(.projects-page) .hero-photo-button{transition:none!important}}

/* Animated illustrated introduction, inspired by the supplied hand drawn reference. */
body:not(.projects-page) .hero{display:block!important;position:relative;isolation:isolate;min-height:calc(100svh - 76px)!important;height:calc(100svh - 76px)!important;padding:0!important;overflow:hidden!important;background:#fff!important;background-image:none!important}
body:not(.projects-page) .hero::before{content:none!important;display:none!important;background:none!important}
body:not(.projects-page) .intro-title{position:absolute;z-index:1;left:50%;top:51%;transform:translate(-50%,-50%);width:100%;display:flex;flex-direction:column;align-items:center;color:#f45116;font-family:Impact,'Arial Black',sans-serif!important;font-size:clamp(100px,18vw,280px);font-weight:900;line-height:.82;letter-spacing:-.045em;white-space:nowrap;pointer-events:none}
body:not(.projects-page) .intro-title span{display:block}
body:not(.projects-page) .intro-skills{position:absolute;z-index:6;top:27px;left:7%;right:7%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;text-align:center}
body:not(.projects-page) .intro-skills span{padding:0 12px;font-family:var(--portfolio-body-font)!important;font-size:clamp(11px,.95vw,15px);font-weight:700;line-height:1.2;letter-spacing:.1em;color:#171717;white-space:nowrap}
body:not(.projects-page) .intro-skills span+span{border-left:1px solid #171717}
body:not(.projects-page) .intro-art{position:absolute;z-index:3;inset:2% 10% 24%;display:grid;place-items:center;animation:intro-art-float 8s ease-in-out infinite;text-decoration:none;cursor:pointer}
body:not(.projects-page) .intro-character-cutout{display:block;width:100%;height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 7px 9px rgba(50,33,20,.06))}
@keyframes intro-art-float{0%,100%{translate:0 0}50%{translate:0 -9px}}
body:not(.projects-page) .hero-note{position:absolute;z-index:6;left:50%;transform:translateX(-50%);bottom:38px;width:min(1100px,calc(100% - 48px));max-width:none;margin:0!important;text-align:center;font-family:var(--portfolio-body-font)!important;font-size:clamp(14px,1.2vw,18px)!important;line-height:1.45!important;color:#171717!important}
body:not(.projects-page) #intro-tagline,body:not(.projects-page) #intro-tagline .typewriter-text{color:#000!important}
body:not(.projects-page) .typewriter-text{white-space:pre-line}
@keyframes intro-character-bob{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes intro-gamer-play{0%,100%{translate:0 0;rotate:0}35%{translate:1px -7px;rotate:-.8deg}70%{translate:-1px 1px;rotate:.5deg}}
@keyframes intro-reader-bob{0%,100%{translate:0 0;rotate:0}50%{translate:0 -5px;rotate:.4deg}}
@keyframes intro-plant-sway{0%,100%{rotate:-1deg}50%{rotate:1deg}}
@media(max-width:760px){body:not(.projects-page) .hero{min-height:calc(100svh - 68px)!important;height:calc(100svh - 68px)!important}body:not(.projects-page) .intro-title{top:47%;font-size:clamp(62px,16vw,130px);line-height:.88}body:not(.projects-page) .intro-art{inset:14% 4% 26%;width:92%;left:4%}body:not(.projects-page) .intro-skills{top:15px;left:3%;right:3%}body:not(.projects-page) .intro-skills span{padding:0 5px;font-size:clamp(8px,1.5vw,11px);letter-spacing:.04em}body:not(.projects-page) .hero-note{bottom:28px;width:calc(100% - 36px);font-size:13px!important}}
@media(max-width:420px){body:not(.projects-page) .intro-title{font-size:clamp(46px,15.5vw,65px)}body:not(.projects-page) .intro-art{inset:17% 3% 28%;width:94%;left:3%}body:not(.projects-page) .intro-skills{top:12px}body:not(.projects-page) .intro-skills span{font-size:7px;letter-spacing:0}body:not(.projects-page) .hero-note{font-size:12px!important}}
@media(prefers-reduced-motion:reduce){body:not(.projects-page) .intro-art{animation:none!important}}

body:not(.projects-page) .typewriter-cursor{display:inline-block;width:1px;height:1em;margin-left:3px;vertical-align:-.12em;background:#f45116;animation:typewriter-blink .75s steps(2,start) infinite}
@keyframes typewriter-blink{to{visibility:hidden}}
@media(prefers-reduced-motion:reduce){body:not(.projects-page) .typewriter-cursor{display:none}}

/* Restore the original greeting and unboxed name treatment. */
body:not(.projects-page) .hello{display:block!important;margin:0 0 2px!important;font-size:clamp(24px,3vw,38px)!important}
body:not(.projects-page) .name-button{isolation:auto;width:auto;min-height:0;display:flex!important;align-items:baseline!important;justify-content:flex-start!important;gap:.12em!important;overflow:visible;background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;color:#171c1e!important;font-family:var(--portfolio-name-font)!important;font-size:clamp(36px,5.2vw,68px)!important;font-weight:400!important;letter-spacing:-.035em!important;line-height:1!important;text-align:left!important;box-shadow:none!important;animation:none!important;transform:none!important}
body:not(.projects-page) .name-button::before,body:not(.projects-page) .name-button::after{content:none!important}
body:not(.projects-page) .name-button .name-first,body:not(.projects-page) .name-button .name-last{position:relative;z-index:auto;font-family:var(--portfolio-name-font)!important;font-size:1em!important;font-weight:400!important;letter-spacing:inherit!important;line-height:1!important;text-transform:none!important;white-space:nowrap!important;text-shadow:none!important}
body:not(.projects-page) .name-button .name-star{display:inline!important}

/* Keep the destination menu item visibly selected on workspace and About Me. */
body.projects-page .main-nav a[aria-current="page"],
body.about-notes-open .main-nav a[aria-current="page"]{background:#20272a!important;color:#fff!important;border-radius:99px!important;box-shadow:0 4px 12px rgba(20,28,31,.16)!important}
body.projects-page .main-nav a[aria-current="page"] .nav-icon,
body.about-notes-open .main-nav a[aria-current="page"] .nav-icon{stroke:#fff!important}

/* Shared animated pill treatment for the current destination in every menu. */
body .main-nav a{position:relative!important;border:1px solid transparent!important;border-radius:999px!important;padding:9px 14px!important;transition:background-color .28s ease,color .28s ease,border-color .28s ease,box-shadow .28s ease,transform .2s ease!important}
body .main-nav a[aria-current],body .main-nav a.is-active{background:#20272a!important;color:#fff!important;border-color:#20272a!important;border-radius:999px!important;box-shadow:0 4px 12px rgba(20,28,31,.16)!important;font-weight:700!important}
body .main-nav a[aria-current] .nav-icon,body .main-nav a.is-active .nav-icon{stroke:#fff!important}
body .main-nav a:hover{border-radius:999px!important;background:#eef1f1!important;color:#20272a!important}
body .main-nav a[aria-current]:hover,body .main-nav a.is-active:hover{background:#20272a!important;color:#fff!important}
/* Consistent active pill for the section currently targeted or in view. */
body .main-nav a[aria-current],body .main-nav a.is-active{background:#20272a!important;color:#fff!important;border-color:#20272a!important;border-radius:999px!important;box-shadow:0 4px 12px rgba(20,28,31,.16)!important;font-weight:700!important}
body .main-nav a[aria-current] .nav-icon,body .main-nav a.is-active .nav-icon{stroke:#fff!important}
@media(prefers-reduced-motion:reduce){body .main-nav a{transition:none!important}}
/* Restore the shared pill press animation for every menu destination. */
body .main-nav a{transform:scale(1);transform-origin:center;transition:background-color .28s ease,color .28s ease,border-color .28s ease,box-shadow .28s ease,transform .22s cubic-bezier(.2,.8,.2,1)!important}
body .main-nav a:active{transform:scale(.92)!important;background:#20272a!important;color:#fff!important;border-color:#20272a!important;box-shadow:0 4px 12px rgba(20,28,31,.18)!important}
body .main-nav a:active .nav-icon{stroke:#fff!important}
body .main-nav a.nav-pill-enter,body.projects-page .main-nav a[aria-current="page"],body.about-notes-open .main-nav a[aria-current="page"]{animation:nav-pill-enter .42s cubic-bezier(.2,.8,.2,1) both!important}
@keyframes nav-pill-enter{0%{transform:scale(.9);background:transparent;color:#40494d;box-shadow:none}55%{transform:scale(1.07);background:#20272a;color:#fff;box-shadow:0 5px 14px rgba(20,28,31,.2)}100%{transform:scale(1);background:#20272a;color:#fff;box-shadow:0 4px 12px rgba(20,28,31,.16)}}
@media(prefers-reduced-motion:reduce){body .main-nav a{transition:none!important}body .main-nav a:active{transform:none!important}}

/* Keep the name in the header consistent with the navigation type. */
body .site-header .logo{font-family:var(--portfolio-body-font)!important;font-size:16px!important;font-weight:500!important;font-style:normal!important;letter-spacing:normal!important}
body .site-header .logo img{display:block;width:140px;height:42px;object-fit:contain}
@media(max-width:600px){body .site-header .logo img{width:118px;height:36px}}

/* Keep the same active pill and entry animation on every navigation destination. */
body .main-nav a.nav-pill-enter{animation:nav-pill-enter .42s cubic-bezier(.2,.8,.2,1) both!important}
body .main-nav a[aria-current="page"],body .main-nav a[aria-current="location"],body .main-nav a.is-active{
  background:#20272a!important;color:#fff!important;border-color:#20272a!important;border-radius:999px!important;
  box-shadow:0 4px 12px rgba(20,28,31,.16)!important;font-weight:700!important
}
body .main-nav a[aria-current="page"] .nav-icon,body .main-nav a[aria-current="location"] .nav-icon,body .main-nav a.is-active .nav-icon{stroke:#fff!important}
body .main-nav a[aria-current="page"]:hover,body .main-nav a[aria-current="location"]:hover,body .main-nav a.is-active:hover{background:#20272a!important;color:#fff!important}

/* Community Corner board is kept clear of decorative stickers. */
.community-sticker-sheet,.polaroid-board-page .board-sticker{display:none!important}

/* Workspace project sequence: paired overview, full-width demo, then handwritten notes. */
@media(min-width:701px){
  body.projects-page .projects-page-main{padding-top:0!important;padding-bottom:0!important}
  body.projects-page .projects-page-intro{display:none!important}
  body.projects-page .project-story{width:100%!important;max-width:none!important;height:calc(100svh - 76px)!important;min-height:0!important;max-height:calc(100svh - 76px)!important;overflow:hidden!important;margin:0 auto!important;padding:2px clamp(2vw,4vw,64px) 10px!important;display:flex!important;flex-direction:column!important}
  body.projects-page .project-story-header,body.projects-page .project-tech-inline{width:100%!important;max-width:none!important}
  body.projects-page .project-story-header{flex:0 0 auto!important;margin:0 0 3px!important;padding:10px 20px 14px!important}
  body.projects-page .project-content-grid{max-width:none!important;margin-inline:0!important}
  body.projects-page .project-content-grid{width:100%!important;flex:1 1 auto!important;min-height:0!important;margin-top:clamp(36px,5vh,58px)!important;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)!important;grid-template-areas:"demo problem" "demo solution" "demo developer"!important;grid-template-rows:auto auto auto!important;column-gap:clamp(32px,4vw,60px)!important;row-gap:clamp(24px,3vh,36px)!important;align-content:start!important;align-items:start!important}
  body.projects-page .project-copy-block[data-section="problem"]{grid-area:problem!important}
  body.projects-page .project-copy-block[data-section="solution"]{grid-area:solution!important}
  body.projects-page .project-copy-block[data-section="problem"],body.projects-page .project-copy-block[data-section="solution"]{min-height:0!important;overflow:visible!important;padding:0 12px 10px!important;border-bottom:1px solid #e5e5e5!important}
  body.projects-page .project-copy-block[data-section="problem"] h2,body.projects-page .project-copy-block[data-section="solution"] h2{font-size:12px!important;margin-bottom:6px!important}
  body.projects-page .project-copy-block[data-section="problem"] p,body.projects-page .project-copy-block[data-section="solution"] p{font-size:clamp(14px,.95vw,16px)!important;line-height:1.32!important;margin-bottom:0!important}
  body.projects-page .project-demo-card{grid-area:demo!important;grid-row:1/4!important;width:100%!important;max-width:none!important;height:auto!important;min-height:0!important;justify-self:stretch!important;align-self:center!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;overflow:visible!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important}
  body.projects-page .project-demo-card video{display:block!important;width:100%!important;height:auto!important;max-width:100%!important;max-height:calc(100svh - 300px)!important;min-height:0!important;aspect-ratio:auto!important;object-fit:contain!important;object-position:center!important;border-radius:0!important;background:transparent!important}
  body.projects-page #infant-cry .project-demo-card,
  body.projects-page #stealth-chess .project-demo-card,
  body.projects-page #language-translation .project-demo-card{padding-bottom:0!important;margin-bottom:0!important}
  body.projects-page #infant-cry .project-demo-card video,
  body.projects-page #stealth-chess .project-demo-card video,
  body.projects-page #language-translation .project-demo-card video{margin-bottom:0!important;object-position:center!important}
  body.projects-page .project-copy-block[data-section="developer"]{grid-area:developer!important;width:100%!important;height:auto!important;min-height:0!important;align-self:center!important;overflow:visible!important;padding:0 12px!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
  body.projects-page .project-copy-block[data-section="developer"] h2{display:none!important}
  body.projects-page .project-copy-block[data-section="developer"] p,
  body.projects-page .project-copy-block[data-section="developer"] p *{font-family:var(--portfolio-note-font)!important;font-size:clamp(20px,1.5vw,25px)!important;font-style:italic!important;font-weight:400!important;letter-spacing:normal!important;line-height:1.3!important}
  body.projects-page .project-copy-block[data-section="developer"] p{margin-bottom:8px!important}
  body.projects-page .project-live-link{display:inline-block!important;width:max-content!important;max-width:100%!important;margin-top:8px!important;padding-bottom:2px!important;border-bottom:1px solid currentColor!important;font-family:var(--portfolio-body-font)!important;font-size:14px!important;font-style:normal!important;line-height:1.3!important}
}

/* Individual transparent line drawings, placed in open areas per project. */
body.projects-page .project-illustration{display:block!important;height:auto!important;max-width:100%!important;object-fit:contain!important;pointer-events:none!important}
body.projects-page .project-demo-card .project-illustration-below-video{flex:0 0 auto!important;margin:12px auto 0!important}
body.projects-page .project-copy-block .project-illustration-between{margin:18px auto 0!important}
body.projects-page .project-copy-block .project-illustration-notes-left{float:left!important;margin:4px 16px 8px 0!important}
body.projects-page .project-copy-block .project-illustration-notes-right{float:right!important;margin:4px 0 8px 16px!important}
@media(max-width:700px){body.projects-page .project-copy-block .project-illustration-notes-left,body.projects-page .project-copy-block .project-illustration-notes-right{width:86px!important}}

/* Soft organic color washes behind project copy, sampled to echo each demo's palette. */
body.projects-page .project-copy-block[data-section="problem"],
body.projects-page .project-copy-block[data-section="solution"]{position:relative!important;isolation:isolate!important}
body.projects-page .project-copy-block[data-section="problem"]::before,
body.projects-page .project-copy-block[data-section="solution"]::before{content:"";position:absolute;z-index:-1;inset:-9px -14px;background:var(--project-blob);border-radius:54% 46% 62% 38% / 38% 52% 48% 62%;filter:blur(15px);opacity:.55;pointer-events:none}
body.projects-page .project-copy-block[data-section="problem"]>* ,
body.projects-page .project-copy-block[data-section="solution"]>*{position:relative;z-index:1}
body.projects-page #endless-bingo .project-copy-block[data-section="problem"],body.projects-page #endless-bingo .project-copy-block[data-section="solution"]{--project-blob:radial-gradient(ellipse at 30% 45%,rgba(168,216,185,.36),rgba(246,213,92,.17) 70%,transparent 100%)}
body.projects-page #capture-puzzle .project-copy-block[data-section="problem"],body.projects-page #capture-puzzle .project-copy-block[data-section="solution"]{--project-blob:radial-gradient(ellipse at 70% 40%,rgba(237,85,59,.22),rgba(168,216,185,.2) 68%,transparent 100%)}
body.projects-page #epicure .project-copy-block[data-section="problem"],body.projects-page #epicure .project-copy-block[data-section="solution"]{--project-blob:radial-gradient(ellipse at 35% 55%,rgba(168,216,185,.32),rgba(246,213,92,.22) 72%,transparent 100%)}
body.projects-page #infant-cry .project-copy-block[data-section="problem"],body.projects-page #infant-cry .project-copy-block[data-section="solution"]{--project-blob:radial-gradient(ellipse at 60% 40%,rgba(168,216,185,.24),rgba(29,53,87,.13) 72%,transparent 100%)}
body.projects-page #stealth-chess .project-copy-block[data-section="problem"],body.projects-page #stealth-chess .project-copy-block[data-section="solution"]{--project-blob:radial-gradient(ellipse at 35% 45%,rgba(246,213,92,.22),rgba(29,53,87,.12) 72%,transparent 100%)}
body.projects-page #language-translation .project-copy-block[data-section="problem"],body.projects-page #language-translation .project-copy-block[data-section="solution"]{--project-blob:radial-gradient(ellipse at 65% 50%,rgba(168,216,185,.28),rgba(29,53,87,.12) 72%,transparent 100%)}

/* Large, softly colored organic shapes behind both the project demo and its copy. */
body.projects-page .project-copy-block[data-section="problem"]::before,
body.projects-page .project-copy-block[data-section="solution"]::before{content:none!important}
body.projects-page .project-story{position:relative!important;isolation:isolate!important}
body.projects-page .project-story::before,
body.projects-page .project-story::after{content:"";position:absolute;z-index:0;pointer-events:none;opacity:.62}
body.projects-page .project-story::before{left:5%;top:27%;width:40%;height:65%;background:var(--project-blob-color);border-radius:38% 62% 55% 45% / 42% 36% 64% 58%;transform:rotate(-8deg)}
body.projects-page .project-story::after{right:5%;top:25%;width:41%;height:68%;background:var(--project-blob-color);border-radius:62% 38% 44% 56% / 44% 57% 43% 56%;transform:rotate(7deg)}
body.projects-page .project-story-header,body.projects-page .project-content-grid{position:relative!important;z-index:1!important}
body.projects-page #endless-bingo{--project-blob-color:rgba(168,216,185,.29)}
body.projects-page #capture-puzzle{--project-blob-color:rgba(104,190,197,.25)}
body.projects-page #epicure{--project-blob-color:rgba(168,216,185,.3)}
body.projects-page #infant-cry{--project-blob-color:rgba(121,184,197,.27)}
body.projects-page #stealth-chess{--project-blob-color:rgba(246,213,92,.25)}
body.projects-page #language-translation{--project-blob-color:rgba(168,216,185,.27)}
@media(max-width:700px){body.projects-page .project-story::before{left:-18%;top:31%;width:70%;height:35%;opacity:.4}body.projects-page .project-story::after{right:-20%;top:7%;width:78%;height:40%;opacity:.4}}

/* Project-specific fluid shapes: SVG contours keep the curves soft and deliberate. */
body.projects-page .project-story::before{left:calc(4vw + 2%)!important;top:clamp(190px,31%,290px)!important;width:clamp(90px,9vw,132px)!important;height:clamp(84px,12vh,118px)!important;background:rgba(var(--project-blob-rgb),.56)!important;border-radius:64% 36% 62% 38% / 43% 58% 42% 57%!important;transform:rotate(-12deg)!important;opacity:1!important;filter:none!important}
body.projects-page .project-story::after{right:clamp(2vw,3vw,52px)!important;top:clamp(178px,28%,270px)!important;width:46%!important;height:clamp(370px,61vh,550px)!important;background:radial-gradient(ellipse at 48% 44%,rgba(var(--project-blob-rgb),.34) 0%,rgba(var(--project-blob-rgb),.25) 68%,rgba(var(--project-blob-rgb),.13) 100%)!important;transform:rotate(0deg)!important;opacity:1!important;filter:none!important;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 600'%3E%3Cpath fill='white' d='M205 8 C249 4 275 24 305 17 C345 7 379 28 389 62 C399 95 374 122 388 155 C403 190 391 221 379 250 C366 281 395 307 385 342 C376 374 353 390 369 426 C384 462 369 501 337 520 C307 538 278 522 247 543 C216 564 185 585 151 569 C119 554 113 527 78 531 C42 535 16 508 18 473 C20 441 45 419 27 387 C8 353 17 324 34 293 C50 263 13 243 13 210 C13 175 35 155 27 122 C18 88 41 57 75 49 C109 42 125 63 156 44 C178 31 181 12 205 8 Z'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 600'%3E%3Cpath fill='white' d='M205 8 C249 4 275 24 305 17 C345 7 379 28 389 62 C399 95 374 122 388 155 C403 190 391 221 379 250 C366 281 395 307 385 342 C376 374 353 390 369 426 C384 462 369 501 337 520 C307 538 278 522 247 543 C216 564 185 585 151 569 C119 554 113 527 78 531 C42 535 16 508 18 473 C20 441 45 419 27 387 C8 353 17 324 34 293 C50 263 13 243 13 210 C13 175 35 155 27 122 C18 88 41 57 75 49 C109 42 125 63 156 44 C178 31 181 12 205 8 Z'/%3E%3C/svg%3E")!important;-webkit-mask-size:100% 100%!important;mask-size:100% 100%!important;-webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important}
body.projects-page #endless-bingo{--project-blob-rgb:168,216,185}
body.projects-page #capture-puzzle{--project-blob-rgb:91,164,194}
body.projects-page #epicure{--project-blob-rgb:226,158,105}
body.projects-page #infant-cry{--project-blob-rgb:192,151,204}
body.projects-page #stealth-chess{--project-blob-rgb:198,171,103}
body.projects-page #language-translation{--project-blob-rgb:131,165,213}
@media(max-width:700px){body.projects-page .project-story::before{left:2%!important;top:250px!important;width:72px!important;height:66px!important}body.projects-page .project-story::after{right:3%!important;top:300px!important;width:88%!important;height:520px!important}}

/* Shift the decorative forms per project while preserving their text/video roles. */
body.projects-page #endless-bingo::before{left:calc(4vw + 2%)!important;top:clamp(190px,31%,290px)!important;transform:rotate(-12deg)!important}
body.projects-page #endless-bingo::after{right:clamp(2vw,3vw,52px)!important;top:clamp(178px,28%,270px)!important;transform:rotate(0deg)!important}
body.projects-page #capture-puzzle::before{left:calc(4vw + 10%)!important;top:clamp(210px,34%,320px)!important;transform:rotate(18deg) scale(.9)!important}
body.projects-page #capture-puzzle::after{right:clamp(4vw,6vw,92px)!important;top:clamp(200px,31%,295px)!important;transform:rotate(-5deg) scale(.96)!important}
body.projects-page #epicure::before{left:calc(4vw - 1%)!important;top:clamp(250px,39%,360px)!important;transform:rotate(-22deg) scale(.88)!important}
body.projects-page #epicure::after{right:clamp(1vw,2vw,36px)!important;top:clamp(155px,24%,230px)!important;transform:rotate(8deg) scale(1.02)!important}
body.projects-page #infant-cry::before{left:calc(4vw + 8%)!important;top:clamp(175px,27%,250px)!important;transform:rotate(27deg) scale(.94)!important}
body.projects-page #infant-cry::after{right:clamp(5vw,7vw,110px)!important;top:clamp(215px,34%,315px)!important;transform:rotate(-8deg) scale(.9)!important}
body.projects-page #stealth-chess::before{left:calc(4vw - 2%)!important;top:clamp(230px,36%,335px)!important;transform:rotate(-28deg) scale(.9)!important}
body.projects-page #stealth-chess::after{right:clamp(2vw,3.5vw,62px)!important;top:clamp(185px,29%,275px)!important;transform:rotate(7deg) scale(.95)!important}
body.projects-page #language-translation::before{left:calc(4vw + 12%)!important;top:clamp(195px,30%,280px)!important;transform:rotate(14deg) scale(.86)!important}
body.projects-page #language-translation::after{right:clamp(5vw,7vw,108px)!important;top:clamp(240px,38%,355px)!important;transform:rotate(-4deg) scale(.93)!important}

/* Additional small organic color forms, kept below the project content layer. */
body.projects-page .project-story>.project-blob-accent{position:absolute;z-index:0;display:block;pointer-events:none;opacity:.72;background:radial-gradient(ellipse at 42% 40%,rgba(var(--project-blob-rgb),.3),rgba(var(--project-blob-rgb),.18) 68%,rgba(var(--project-blob-rgb),.06));border-radius:61% 39% 56% 44% / 42% 59% 41% 58%;filter:blur(.5px)}
body.projects-page .project-story>.project-blob-accent-2{border-radius:43% 57% 39% 61% / 58% 42% 58% 42%;opacity:.56}
body.projects-page .project-story>.project-blob-accent-3{border-radius:55% 45% 64% 36% / 48% 62% 38% 52%;opacity:.62}
@media(max-width:700px){body.projects-page .project-story>.project-blob-accent{width:clamp(52px,17vw,84px)!important;height:clamp(42px,13vw,66px)!important;opacity:.48}}

/* Content-aware project backgrounds: a small video-corner peek and one notes-only wash. */
body.projects-page .project-story::before{left:clamp(2%,4vw,64px)!important;top:clamp(170px,25%,235px)!important;width:clamp(92px,10vw,138px)!important;height:clamp(82px,12vh,112px)!important;background:radial-gradient(ellipse at 45% 42%,rgba(var(--project-blob-rgb),.38),rgba(var(--project-blob-rgb),.25) 70%,rgba(var(--project-blob-rgb),.12))!important;border-radius:64% 36% 58% 42% / 41% 59% 43% 57%!important;transform:rotate(-13deg)!important;opacity:1!important;filter:none!important;clip-path:none!important}
body.projects-page .project-story::after{content:none!important;display:none!important}
body.projects-page .project-copy-block[data-section="problem"],body.projects-page .project-copy-block[data-section="solution"]{background:#fff!important}
body.projects-page .project-copy-block[data-section="problem"]::before,body.projects-page .project-copy-block[data-section="solution"]::before{content:none!important;display:none!important}
body.projects-page .project-copy-block[data-section="developer"]{position:relative!important;isolation:isolate!important;background:transparent!important}
body.projects-page .project-copy-block[data-section="developer"]::before{content:""!important;display:block!important;position:absolute!important;z-index:-1!important;inset:-30px -38px!important;pointer-events:none!important;background:radial-gradient(ellipse at 48% 46%,rgba(var(--project-blob-rgb),.3) 0%,rgba(var(--project-blob-rgb),.23) 70%,rgba(var(--project-blob-rgb),.12) 100%)!important;border-radius:58% 42% 49% 51% / 13% 17% 15% 19%!important;transform:rotate(1deg)!important;filter:none!important;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 600'%3E%3Cpath fill='white' d='M205 8 C249 4 275 24 305 17 C345 7 379 28 389 62 C399 95 374 122 388 155 C403 190 391 221 379 250 C366 281 395 307 385 342 C376 374 353 390 369 426 C384 462 369 501 337 520 C307 538 278 522 247 543 C216 564 185 585 151 569 C119 554 113 527 78 531 C42 535 16 508 18 473 C20 441 45 419 27 387 C8 353 17 324 34 293 C50 263 13 243 13 210 C13 175 35 155 27 122 C18 88 41 57 75 49 C109 42 125 63 156 44 C178 31 181 12 205 8 Z'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 600'%3E%3Cpath fill='white' d='M205 8 C249 4 275 24 305 17 C345 7 379 28 389 62 C399 95 374 122 388 155 C403 190 391 221 379 250 C366 281 395 307 385 342 C376 374 353 390 369 426 C384 462 369 501 337 520 C307 538 278 522 247 543 C216 564 185 585 151 569 C119 554 113 527 78 531 C42 535 16 508 18 473 C20 441 45 419 27 387 C8 353 17 324 34 293 C50 263 13 243 13 210 C13 175 35 155 27 122 C18 88 41 57 75 49 C109 42 125 63 156 44 C178 31 181 12 205 8 Z'/%3E%3C/svg%3E")!important;-webkit-mask-size:100% 100%!important;mask-size:100% 100%!important;-webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important}
body.projects-page #endless-bingo .project-copy-block[data-section="developer"]::before{inset:-28px -30px!important}
body.projects-page #capture-puzzle .project-copy-block[data-section="developer"]::before{inset:-34px -42px!important;transform:rotate(-2deg)!important}
body.projects-page #epicure .project-copy-block[data-section="developer"]::before{inset:-30px -34px!important;transform:rotate(2deg)!important}
body.projects-page #infant-cry{--project-blob-rgb:178,157,203!important}
body.projects-page #infant-cry::before{left:clamp(3%,5vw,78px)!important;top:clamp(180px,27%,255px)!important;width:clamp(100px,10vw,140px)!important;height:clamp(90px,13vh,122px)!important;transform:rotate(-17deg)!important}
body.projects-page #infant-cry .project-copy-block[data-section="developer"]::before{inset:-32px -40px!important;background:radial-gradient(ellipse at 48% 46%,rgba(178,157,203,.34),rgba(178,157,203,.25) 70%,rgba(178,157,203,.12))!important;transform:rotate(-1deg)!important}
body.projects-page #stealth-chess .project-copy-block[data-section="developer"]::before{inset:-28px -34px!important;transform:rotate(-2deg)!important}
body.projects-page #language-translation .project-copy-block[data-section="developer"]::before{inset:-32px -40px!important;transform:rotate(2deg)!important}
@media(max-width:700px){body.projects-page .project-story::before{left:4%!important;top:260px!important;width:80px!important;height:74px!important}body.projects-page .project-copy-block[data-section="developer"]::before{inset:-20px -18px!important}}

/* Project page backgrounds cleared. */
body.projects-page .project-story::before,body.projects-page .project-story::after,
body.projects-page .project-copy-block[data-section="developer"]::before,
body.projects-page .project-copy-block[data-section="problem"]::before,
body.projects-page .project-copy-block[data-section="solution"]::before{content:none!important;display:none!important;background:none!important;mask:none!important;-webkit-mask:none!important}
body.projects-page .project-story>.project-blob-accent{display:none!important}

/* Supplied paper texture across the full Workspace page. */
body.projects-page{background-color:#f7f6f2!important;background-image:url("assets/workspace-paper-texture.jpg")!important;background-size:cover!important;background-position:center top!important;background-repeat:no-repeat!important;background-attachment:fixed!important}
body.projects-page .site-header{background:rgba(255,255,255,.78)!important}
body.projects-page .projects-page-main,body.projects-page .project-story{background:transparent!important}
body.projects-page .project-copy-block[data-section="problem"],body.projects-page .project-copy-block[data-section="solution"],body.projects-page .project-copy-block[data-section="developer"]{background:transparent!important}
body.projects-page .project-demo-card{background:transparent!important}
@media(max-width:700px){body.projects-page{background-attachment:scroll!important}}
body.projects-page{background-color:#fbfaf8!important;background-blend-mode:screen!important;}
body.projects-page::before{content:"";position:fixed;z-index:-1;inset:0;pointer-events:none;background:rgba(255,255,255,.46)}
body.projects-page{background-color:#f6f5f1!important;background-image:linear-gradient(rgba(250,249,246,.56),rgba(250,249,246,.56)),url("assets/workspace-paper-texture.jpg")!important;background-blend-mode:normal!important;background-size:cover!important;background-position:center top!important;background-repeat:no-repeat!important}
body.projects-page::before{content:none!important;display:none!important}
body.projects-page .site-header{background:rgba(250,249,246,.84)!important}
body.projects-page{background-image:linear-gradient(rgba(29,53,87,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(29,53,87,.035) 1px,transparent 1px),linear-gradient(rgba(250,249,246,.56),rgba(250,249,246,.56)),url("assets/workspace-paper-texture.jpg")!important;background-size:48px 48px,48px 48px,cover,cover!important;background-position:center top!important;background-repeat:repeat,repeat,no-repeat,no-repeat!important}
body.projects-page{background:#fff!important;background-image:none!important}
/* Workspace background stays plain and white. */
body.projects-page{background:#fff!important;background-image:none!important}

/* Soft rounded panels for project copy, with a crisp white rim around demos. */
body.projects-page .project-copy-block[data-section="problem"],
body.projects-page .project-copy-block[data-section="solution"],
body.projects-page .project-copy-block[data-section="developer"]{padding:clamp(14px,1.5vw,22px)!important;border:1px solid rgba(29,53,87,.09)!important;border-radius:22px!important;box-shadow:0 8px 22px rgba(29,53,87,.045)!important}
body.projects-page #endless-bingo .project-copy-block[data-section="problem"],body.projects-page #endless-bingo .project-copy-block[data-section="solution"],body.projects-page #endless-bingo .project-copy-block[data-section="developer"]{background:rgba(168,216,185,.18)!important}
body.projects-page #capture-puzzle .project-copy-block[data-section="problem"],body.projects-page #capture-puzzle .project-copy-block[data-section="solution"],body.projects-page #capture-puzzle .project-copy-block[data-section="developer"]{background:rgba(91,164,194,.14)!important}
body.projects-page #epicure .project-copy-block[data-section="problem"],body.projects-page #epicure .project-copy-block[data-section="solution"],body.projects-page #epicure .project-copy-block[data-section="developer"]{background:rgba(226,158,105,.16)!important}
body.projects-page #infant-cry .project-copy-block[data-section="problem"],body.projects-page #infant-cry .project-copy-block[data-section="solution"],body.projects-page #infant-cry .project-copy-block[data-section="developer"]{background:rgba(178,157,203,.17)!important}
body.projects-page #stealth-chess .project-copy-block[data-section="problem"],body.projects-page #stealth-chess .project-copy-block[data-section="solution"],body.projects-page #stealth-chess .project-copy-block[data-section="developer"]{background:rgba(198,171,103,.16)!important}
body.projects-page #language-translation .project-copy-block[data-section="problem"],body.projects-page #language-translation .project-copy-block[data-section="solution"],body.projects-page #language-translation .project-copy-block[data-section="developer"]{background:rgba(131,165,213,.16)!important}
body.projects-page .project-demo-card{padding:8px!important;background:#fff!important;border:1px solid rgba(25,31,34,.12)!important;border-radius:12px!important;box-shadow:0 0 0 5px #fff,0 10px 26px rgba(25,31,34,.1)!important;overflow:hidden!important}
body.projects-page .project-demo-card video{border-radius:6px!important}
@media(min-width:701px){body.projects-page .project-demo-card{padding:8px!important}}

/* One shared color panel behind the complete project text column; keep media sizing intact. */
body.projects-page .project-content-grid{position:relative!important;isolation:isolate!important}
body.projects-page .project-content-grid::before{content:"";position:absolute;z-index:0;pointer-events:none;left:55%;right:0;top:-16px;bottom:-16px;border-radius:22px;background:rgba(var(--project-blob-rgb),.11)}
body.projects-page .project-content-grid>*{position:relative!important;z-index:1!important}
body.projects-page .project-copy-block[data-section="problem"],body.projects-page .project-copy-block[data-section="solution"]{padding:0 12px 10px!important;background:transparent!important;border:0!important;border-bottom:1px solid rgba(25,31,34,.12)!important;border-radius:0!important;box-shadow:none!important}
body.projects-page .project-copy-block[data-section="developer"]{padding:0 12px!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
body.projects-page .project-copy-block[data-section="problem"]::before,body.projects-page .project-copy-block[data-section="solution"]::before,body.projects-page .project-copy-block[data-section="developer"]::before{content:none!important;display:none!important}
body.projects-page .project-demo-card{padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important}
body.projects-page .project-demo-card video{border-radius:0!important;box-shadow:0 0 0 8px #fff!important}
@media(max-width:700px){body.projects-page .project-content-grid::before{left:0;right:0;top:-12px;bottom:-12px;border-radius:18px;background:rgba(var(--project-blob-rgb),.09)}body.projects-page .project-copy-block[data-section="problem"],body.projects-page .project-copy-block[data-section="solution"]{padding:10px 12px 16px!important}body.projects-page .project-copy-block[data-section="developer"]{padding:0 12px!important}}
body.projects-page .project-copy-block[data-section="problem"],body.projects-page .project-copy-block[data-section="solution"],body.projects-page .project-copy-block[data-section="developer"]{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
body.projects-page :is(#endless-bingo,#capture-puzzle,#epicure,#infant-cry,#stealth-chess,#language-translation) .project-copy-block[data-section="problem"],
body.projects-page :is(#endless-bingo,#capture-puzzle,#epicure,#infant-cry,#stealth-chess,#language-translation) .project-copy-block[data-section="solution"],
body.projects-page :is(#endless-bingo,#capture-puzzle,#epicure,#infant-cry,#stealth-chess,#language-translation) .project-copy-block[data-section="developer"]{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
@media(min-width:701px){body.projects-page .project-content-grid{margin-top:clamp(10px,1.5vh,18px)!important}body.projects-page .project-demo-card{align-self:center!important;grid-row:1/4!important}}
body.projects-page .project-story-header h1{font-size:clamp(22px,2.2vw,32px)!important}
body.projects-page .project-content-grid::before{opacity:0;translate:0 14px;transition:opacity .75s ease,translate .75s cubic-bezier(.2,.72,.25,1)}
body.projects-page .project-content-grid>.project-copy-block{opacity:0;translate:0 14px;transition:opacity .75s ease,translate .75s cubic-bezier(.2,.72,.25,1)}
body.projects-page .project-content-grid.project-copy-visible::before,body.projects-page .project-content-grid.project-copy-visible>.project-copy-block{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){body.projects-page .project-content-grid::before,body.projects-page .project-content-grid>.project-copy-block{opacity:1!important;translate:none!important;transition:none!important}}
@media(min-width:701px){body.projects-page .project-content-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)!important;column-gap:clamp(32px,4vw,60px)!important;row-gap:clamp(24px,3vh,36px)!important}body.projects-page .project-copy-block[data-section="problem"],body.projects-page .project-copy-block[data-section="solution"]{padding-bottom:10px!important}body.projects-page .project-copy-block[data-section="developer"]{padding-top:0!important}body.projects-page .project-live-link{margin-top:8px!important}}
body.projects-page .project-demo-card video{box-shadow:0 0 0 6px #fff,0 10px 24px rgba(29,39,42,.12)!important}
/* Let each project theme wash the full Workspace page instead of separate text panels. */
body.projects-page{background:#fff!important;background-image:none!important}
body.projects-page .site-header{background:#fff!important}
body.projects-page .project-content-grid::before{content:none!important;display:none!important;background:none!important}
body.projects-page .project-story,body.projects-page .project-copy-block[data-section="problem"],body.projects-page .project-copy-block[data-section="solution"],body.projects-page .project-copy-block[data-section="developer"]{background:transparent!important}
.doodle-card-heading h3.community-title .feedback-title{font-size:clamp(27px,2.8vw,38px)!important;white-space:normal}

/* Intro hero based on the supplied two-column reference; header navigation stays intact. */
body:not(.projects-page) .site-header>.logo{font-size:16px!important;font-weight:600!important;letter-spacing:-.02em!important}
body:not(.projects-page) .site-header>.logo img{display:none!important}
body:not(.projects-page) .site-header>.logo img{display:block!important;width:140px!important;height:42px!important;object-fit:contain!important;object-position:left center!important}
@media(max-width:600px){body:not(.projects-page) .site-header>.logo img{width:118px!important;height:36px!important}}
body:not(.projects-page) .hero.intro-reference{height:calc(100svh - 76px)!important;min-height:620px!important;max-height:920px!important;padding:42px clamp(42px,7.3vw,122px)!important;display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr)!important;align-items:center!important;gap:clamp(54px,8vw,150px)!important;overflow:hidden!important;background:#fff!important}
body:not(.projects-page) .intro-reference-copy{width:100%;max-width:760px;position:relative;z-index:2}
body:not(.projects-page) .intro-reference-kicker{margin:0 0 32px!important;font-size:14px!important;font-weight:500!important;letter-spacing:.09em!important;color:#20201e!important}
body:not(.projects-page) .intro-reference-greeting{margin:0 0 2px!important;font-size:clamp(28px,3vw,44px)!important;line-height:1.15!important;color:#20201e!important}
body:not(.projects-page) .intro-reference-name{display:inline-block;margin:0;color:#181b1d!important;font-family:var(--portfolio-name-font)!important;font-size:clamp(48px,5.2vw,86px)!important;font-weight:800!important;line-height:1.12!important;letter-spacing:-.045em!important;white-space:nowrap;text-decoration:none!important}
body:not(.projects-page) .intro-reference-fields{margin:32px 0 18px!important;font-family:var(--portfolio-heading-font)!important;font-size:clamp(11px,.95vw,15px)!important;font-weight:500!important;letter-spacing:.12em!important;line-height:1.6!important;color:#333!important;white-space:normal}
body:not(.projects-page) .intro-reference-fields span{padding:0 3px;color:#777}
body:not(.projects-page) .intro-reference-bio{max-width:710px;margin:0!important;font-size:clamp(17px,1.4vw,23px)!important;font-weight:400!important;line-height:1.68!important;color:#20201e!important}
body:not(.projects-page) .intro-reference-photo{position:relative;display:block;width:100%;max-width:470px;justify-self:end;align-self:center;aspect-ratio:.74;overflow:hidden;border-radius:11px;background:#f2f2f0;box-shadow:0 12px 30px rgba(24,30,32,.13);text-decoration:none}
body:not(.projects-page) .intro-reference-photo img{display:block;width:100%;height:100%;object-fit:contain;object-position:center top;transition:transform .6s cubic-bezier(.2,.75,.25,1)}
body:not(.projects-page) .intro-reference-photo:hover img{transform:scale(1.025)}
body:not(.projects-page) .intro-reference-photo-label{position:absolute;right:14px;bottom:14px;left:14px;padding:13px 16px;border-radius:7px;background:rgba(255,255,255,.94);color:#526067;font-size:10px;font-weight:600;letter-spacing:.09em;line-height:1.3}
body:not(.projects-page) .intro-reference-photo-label span{padding:0 4px;color:#9ba1a3}
body:not(.projects-page) .intro-reference-photo{max-width:390px!important}
@media(max-width:760px){body:not(.projects-page) .hero.intro-reference{height:auto!important;min-height:calc(100svh - 68px)!important;max-height:none!important;padding:48px 24px 56px!important;grid-template-columns:1fr!important;gap:32px!important;overflow:visible!important}body:not(.projects-page) .intro-reference-copy{order:1}body:not(.projects-page) .intro-reference-kicker{margin-bottom:22px!important;font-size:11px!important}body:not(.projects-page) .intro-reference-greeting{font-size:28px!important}body:not(.projects-page) .intro-reference-name{font-size:clamp(43px,11vw,68px)!important;white-space:normal!important}body:not(.projects-page) .intro-reference-fields{margin:22px 0 14px!important;font-size:10px!important;letter-spacing:.08em!important}body:not(.projects-page) .intro-reference-bio{font-size:16px!important;line-height:1.6!important}body:not(.projects-page) .intro-reference-photo{order:2;width:min(100%,430px)!important;justify-self:center!important;aspect-ratio:.82!important}}
@media(max-width:420px){body:not(.projects-page) .hero.intro-reference{padding-inline:20px!important}body:not(.projects-page) .intro-reference-name{font-size:clamp(38px,10.5vw,52px)!important}body:not(.projects-page) .intro-reference-photo-label{right:10px!important;bottom:10px!important;left:10px!important;padding:10px 12px!important;font-size:9px!important}}
body:not(.projects-page) .intro-reference-greeting,body:not(.projects-page) .intro-reference-fields,body:not(.projects-page) .intro-reference-fields span{font-family:var(--portfolio-body-font)!important}
body:not(.projects-page) .intro-reference-fields{width:fit-content;max-width:100%;padding:12px 16px!important;border:0!important;outline:0!important;box-shadow:none!important;border-radius:8px;background:#f0f0ef!important}
body:not(.projects-page) .intro-reference-fields span{color:#777!important}
body:not(.projects-page) .doodle-card-heading .eyebrow{font-family:var(--portfolio-tagline-font)!important}
/* About copy arranged as neighboring paper sheets. */
body.about-notes-open #about-details .about-notes-board.about-scrapbook{display:block!important;width:min(100%,1100px)!important;margin:0 auto!important}
body.about-notes-open #about-details .about-story{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px!important;width:100%!important;max-width:none!important;padding:0!important}
body.about-notes-open #about-details .about-story p{position:relative;min-height:150px;margin:0!important;padding:28px 30px!important;border:1px solid #dededb!important;background-color:#f7f7f5!important;background-image:repeating-linear-gradient(to bottom,transparent 0 31px,#e8e8e5 31px 32px)!important;box-shadow:0 8px 20px #20201e0c!important;color:#20201e!important;font-size:clamp(15px,1.15vw,16px)!important;line-height:1.8!important}
body.about-notes-open #about-details .about-story p:nth-child(2n){transform:translateY(15px) rotate(.35deg)}
body.about-notes-open #about-details .about-story p:nth-child(2n+1){transform:rotate(-.35deg)}
body.about-notes-open #about-details .about-story p em{font-style:italic!important;font-weight:400!important}
body.about-notes-open #about-details .about-notes-heading{margin-bottom:30px!important}
@media(max-width:760px){body.about-notes-open #about-details .about-story{grid-template-columns:1fr!important;gap:18px!important}body.about-notes-open #about-details .about-story p{min-height:0;padding:23px 24px!important}body.about-notes-open #about-details .about-story p:nth-child(n){transform:none}}
@media(min-width:761px) and (max-width:1050px){body.about-notes-open #about-details .about-story{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
/* Wide ruled-paper About layout inspired by the latest reference. */
body.about-notes-open #about-details .about-notes-heading{width:max-content!important;max-width:90%!important;margin:0 auto 48px!important;padding:15px 34px!important;background:#ffe100!important;box-shadow:0 4px 0 #d2b900!important;transform:rotate(-3deg)!important;text-align:center!important}
body.about-notes-open #about-details .about-notes-heading .eyebrow{margin:0!important;color:#20201e!important;font-family:var(--portfolio-body-font)!important;font-size:clamp(18px,2.3vw,28px)!important;font-weight:500!important;line-height:1.2!important;letter-spacing:0!important;text-transform:uppercase!important;white-space:normal!important}
body.about-notes-open #about-details .about-notes-board.about-scrapbook{width:min(100%,1280px)!important;margin:0 auto!important}
body.about-notes-open #about-details .about-story{grid-template-columns:1fr!important;gap:64px!important}
body.about-notes-open #about-details .about-story p{width:96%;min-height:310px;margin:0 auto!important;padding:92px clamp(28px,5vw,76px)!important;background-color:#fff!important;background-image:repeating-linear-gradient(to bottom,transparent 0 47px,#dfe2df 47px 49px)!important;border:0!important;box-shadow:none!important;font-family:var(--portfolio-body-font)!important;font-size:clamp(17px,1.45vw,22px)!important;line-height:2.15!important}
body.about-notes-open #about-details .about-story p:nth-child(1){transform:rotate(-3.5deg)}
body.about-notes-open #about-details .about-story p:nth-child(2){transform:rotate(2.5deg)}
@media(max-width:760px){body.about-notes-open #about-details .about-notes-heading{margin-bottom:36px!important;padding:12px 22px!important}body.about-notes-open #about-details .about-story{gap:34px!important}body.about-notes-open #about-details .about-story p{width:100%;min-height:0;padding:48px 22px!important;font-size:16px!important;line-height:1.9!important;background-image:repeating-linear-gradient(to bottom,transparent 0 37px,#dfe2df 37px 39px)!important}body.about-notes-open #about-details .about-story p:nth-child(n){transform:none}}
body.about-notes-open .about-notes-section:not([hidden]){padding:clamp(88px,9vh,112px) clamp(24px,6vw,90px) 24px!important}
body.about-notes-open #about-details .about-notes-heading{margin:0 auto 28px!important;padding:12px 28px!important}
body.about-notes-open #about-details .about-notes-heading .eyebrow{font-family:var(--portfolio-display-font)!important;font-size:clamp(28px,4vw,42px)!important;font-weight:400!important;line-height:1.12!important;letter-spacing:0!important}
body.about-notes-open #about-details .about-story{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:clamp(18px,3vw,36px)!important}
body.about-notes-open #about-details .about-story p{width:100%;min-height:0;padding:clamp(24px,3vw,40px)!important;font-size:clamp(14px,1.15vw,17px)!important;line-height:1.65!important;background-image:repeating-linear-gradient(to bottom,transparent 0 34px,#dfe2df 34px 36px)!important}
body.about-notes-open #about-details .about-story p:nth-child(1){transform:rotate(-1.3deg)}
body.about-notes-open #about-details .about-story p:nth-child(2){transform:rotate(1deg)}
@media(max-width:760px){body.about-notes-open .about-notes-section:not([hidden]){padding:88px 18px 20px!important}body.about-notes-open #about-details .about-notes-heading{margin-bottom:20px!important;padding:9px 18px!important}body.about-notes-open #about-details .about-notes-heading .eyebrow{font-size:clamp(24px,7vw,34px)!important}body.about-notes-open #about-details .about-story{grid-template-columns:1fr!important;gap:14px!important}body.about-notes-open #about-details .about-story p{padding:18px 20px!important;font-size:14px!important;line-height:1.5!important;background-image:repeating-linear-gradient(to bottom,transparent 0 28px,#dfe2df 28px 30px)!important}body.about-notes-open #about-details .about-story p:nth-child(n){transform:none}}
body.about-notes-open #about-details .about-notes-heading{background:transparent!important;box-shadow:none!important;transform:none!important;padding:0!important}
@media(min-width:761px){body.about-notes-open #about-details .about-notes-board.about-scrapbook{width:min(100%,1400px)!important}body.about-notes-open #about-details .about-story{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:clamp(36px,7vw,110px)!important;align-items:start!important}body.about-notes-open #about-details .about-story p{width:100%!important;min-height:clamp(300px,42vh,460px)!important;padding:clamp(28px,3.2vw,48px)!important}body.about-notes-open #about-details .about-story p:nth-child(1){margin-top:0!important;animation:paper-float-left 6s ease-in-out infinite!important}body.about-notes-open #about-details .about-story p:nth-child(2){margin-top:clamp(54px,9vh,110px)!important;animation:paper-float-right 6.5s ease-in-out infinite!important}}
@keyframes paper-float-left{0%,100%{transform:translateY(0) rotate(-1.3deg)}50%{transform:translateY(-10px) rotate(-.5deg)}}
@keyframes paper-float-right{0%,100%{transform:translateY(0) rotate(1deg)}50%{transform:translateY(10px) rotate(1.7deg)}}
@media(max-width:760px){body.about-notes-open #about-details .about-story p:nth-child(n){animation:none!important}}
@media(prefers-reduced-motion:reduce){body.about-notes-open #about-details .about-story p:nth-child(n){animation:none!important}}
@media(min-width:761px){body.about-notes-open #about-details .about-notes-board.about-scrapbook{width:min(100%,1120px)!important}body.about-notes-open #about-details .about-story{gap:clamp(18px,3vw,38px)!important}body.about-notes-open #about-details .about-story p{min-height:clamp(260px,34vh,360px)!important;padding:clamp(24px,2.5vw,36px)!important}body.about-notes-open #about-details .about-story p:nth-child(2){margin-top:clamp(30px,5vh,58px)!important}}
/* Paper float animation replaces the old paragraph reveal; keep the copy visible. */
#about-details.about-intro-playing .about-story p{opacity:1!important}
body.about-notes-open #about-details .about-notes-board.about-scrapbook{margin-inline:auto!important}
body.about-notes-open #about-details .about-story{width:min(100%,960px)!important;margin-inline:auto!important}
body.about-notes-open #about-details .about-story{transform:translateY(24px)}
body.about-notes-open #about-details .about-notes-board.about-scrapbook{width:calc(100% - clamp(210px,20vw,340px))!important;margin-left:clamp(210px,20vw,340px)!important;margin-right:0!important}
body.about-notes-open #about-details .about-story{width:min(100%,960px)!important}
.about-cutout{position:absolute;z-index:1;left:0;bottom:0;width:clamp(600px,52vw,760px);height:auto;max-width:none;pointer-events:none;transform:translateY(100%);}
#about-details.about-intro-playing .about-cutout{animation:about-rise-in 1s cubic-bezier(.2,.75,.25,1) .12s forwards}
@keyframes about-rise-in{from{transform:translateY(100%)}to{transform:translateY(0)}}
body.about-notes-open #about-details .about-notes-heading,body.about-notes-open #about-details .about-notes-board{position:relative;z-index:2}
@media(max-width:760px){.about-cutout{width:clamp(380px,92vw,600px);left:-7%;opacity:.96}body.about-notes-open #about-details .about-notes-board.about-scrapbook{width:100%!important;margin:0 auto!important}body.about-notes-open #about-details .about-story{margin-inline:auto!important;transform:translateY(0)!important}}
@media(prefers-reduced-motion:reduce){#about-details.about-intro-playing .about-cutout{animation:none!important;transform:translateY(0)!important}}

/* About scrapbook layout: two staggered notes, hand-drawn arrows, and a photo cutout. */
body.about-notes-open #about-details.about-notes-section:not([hidden]){background:#fff!important;background-image:none!important}
body.about-notes-open #about-details .about-notes-board.about-scrapbook{position:relative!important;display:block!important;width:min(100%,1040px)!important;height:clamp(590px,72vh,760px)!important;min-height:590px!important;margin:0 auto!important;overflow:visible!important}
body.about-notes-open #about-details .about-story{position:relative!important;width:min(100%,880px)!important;height:100%!important;min-height:0!important;margin:0 auto!important;padding:0!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:clamp(28px,5vh,54px)!important;transform:none!important}
body.about-notes-open #about-details .about-story p{position:relative!important;width:min(100%,820px)!important;min-height:0!important;margin:0!important;padding:clamp(24px,3vw,40px)!important;border:1px solid rgba(81,65,43,.12)!important;border-radius:18px!important;background:#fffefa!important;background-image:none!important;box-shadow:0 11px 28px rgba(67,51,30,.13)!important;color:#302b25!important;font-family:var(--portfolio-body-font),Arial,sans-serif!important;font-size:clamp(15px,1.15vw,18px)!important;font-weight:400!important;line-height:1.8!important;z-index:2}
body.about-notes-open #about-details .about-story p:nth-child(1){transform:rotate(-.6deg)!important;animation:none!important}
body.about-notes-open #about-details .about-story p:nth-child(2){width:min(100%,820px)!important;transform:rotate(.6deg)!important;animation:none!important}
body.about-notes-open #about-details .about-story p::before{content:"";position:absolute;top:-10px;left:calc(50% - 38px);width:76px;height:19px;background:rgba(224,202,156,.58);transform:rotate(-2deg)}
@media(max-width:760px){body.about-notes-open #about-details.about-notes-section:not([hidden]){padding:88px 18px 20px!important}body.about-notes-open #about-details .about-notes-heading{margin:0 auto 26px!important}body.about-notes-open #about-details .about-notes-board.about-scrapbook{height:auto!important;min-height:0!important;display:block!important;padding-bottom:0!important}body.about-notes-open #about-details .about-story{width:100%!important;height:auto!important;min-height:0!important;gap:24px!important}body.about-notes-open #about-details .about-story p,body.about-notes-open #about-details .about-story p:nth-child(n){position:relative!important;inset:auto!important;width:100%!important;min-height:0!important;margin:0!important;padding:22px!important;font-size:15px!important;line-height:1.65!important;transform:none!important;animation:none!important}}
@media(prefers-reduced-motion:reduce){body.about-notes-open #about-details .about-story p{animation:none!important}}
body.about-notes-open #about-details .about-notes-board.about-scrapbook{width:min(100%,1080px)!important;height:auto!important;min-height:0!important;margin:0 auto!important}
body.about-notes-open #about-details .about-story{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:center!important;gap:clamp(16px,2.2vw,28px)!important;width:100%!important;height:auto!important;min-height:0!important;margin:0 auto!important;padding:38px 0 48px!important;transform:none!important}
body.about-notes-open #about-details .about-story-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:20px;width:100%;min-height:330px;padding:clamp(20px,2.4vw,32px);border:1px solid #e8e4dc;border-radius:24px;background:#fff;box-shadow:0 14px 36px rgba(41,37,30,.1);}
body.about-notes-open #about-details .about-builder-card{transform:translateY(30px) rotate(-.8deg);animation:about-card-float-one 5.4s ease-in-out infinite}
body.about-notes-open #about-details .about-research-card{transform:translateY(-24px) rotate(.6deg);background:#fff;animation:about-card-float-two 6.1s ease-in-out infinite}
body.about-notes-open #about-details .about-personal-card{transform:translateY(30px) rotate(-.6deg);background:#fff;animation:about-card-float-three 5.8s ease-in-out infinite}
body.about-notes-open #about-details .about-story-card{transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease}
body.about-notes-open #about-details .about-story-card:hover{z-index:4;box-shadow:0 20px 40px rgba(41,37,30,.17)}
body.about-notes-open #about-details .about-builder-card:hover{transform:translateY(23px) rotate(-.8deg) scale(1.035)}
body.about-notes-open #about-details .about-research-card:hover{transform:translateY(-31px) rotate(.6deg) scale(1.035)}
body.about-notes-open #about-details .about-personal-card:hover{transform:translateY(23px) rotate(-.6deg) scale(1.035)}
@keyframes about-card-float-one{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes about-card-float-two{0%,100%{translate:0 0}50%{translate:0 10px}}
@keyframes about-card-float-three{0%,100%{translate:0 0}50%{translate:0 -8px}}
body.about-notes-open #about-details .about-story-card:before{content:"";position:absolute;top:-10px;left:calc(50% - 38px);width:76px;height:20px;background:rgba(224,202,156,.6);transform:rotate(-2deg)}
body.about-notes-open #about-details .about-story-card p{position:static!important;width:auto!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;color:#302b25!important;font-family:var(--font),Arial,sans-serif!important;line-height:1.55!important;transform:none!important;}
body.about-notes-open #about-details .about-story-card p:before{content:none!important;display:none!important}
body.about-notes-open #about-details .about-story-card .about-card-label{color:#000!important;font-family:var(--portfolio-tagline-font)!important;font-size:clamp(18px,1.55vw,21px)!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;line-height:1.2!important}
body.about-notes-open #about-details .about-story-card .about-card-copy{font-size:clamp(17px,1.55vw,22px)!important;font-weight:600!important;line-height:1.42!important;letter-spacing:-.025em!important}
@media(min-width:761px) and (max-width:1080px){body.about-notes-open #about-details .about-story{grid-template-columns:repeat(2,minmax(0,1fr))!important}body.about-notes-open #about-details .about-personal-card{grid-column:1/-1;width:min(50%,440px);justify-self:center}}
@media(min-width:761px) and (max-width:1080px){body.about-notes-open #about-details .about-story{padding:30px 0!important}body.about-notes-open #about-details .about-builder-card{transform:translateY(24px) rotate(-.8deg)}body.about-notes-open #about-details .about-research-card{transform:translateY(-20px) rotate(.6deg)}body.about-notes-open #about-details .about-personal-card{transform:translateY(20px) rotate(-.6deg)}}
@media(max-width:760px){body.about-notes-open #about-details .about-story{grid-template-columns:1fr!important;gap:20px!important;width:min(100%,560px)!important;padding:0!important}body.about-notes-open #about-details .about-story-card{min-height:0;gap:16px;padding:26px 24px}body.about-notes-open #about-details .about-builder-card,body.about-notes-open #about-details .about-research-card,body.about-notes-open #about-details .about-personal-card{transform:none;animation:none}body.about-notes-open #about-details .about-story-card:hover{transform:translateY(-4px) scale(1.015)}body.about-notes-open #about-details .about-story-card .about-card-copy{font-size:20px!important}}
@media(prefers-reduced-motion:reduce){body.about-notes-open #about-details .about-story-card{animation:none!important;transition:none!important}body.about-notes-open #about-details .about-story-card:hover{transform:none!important}}
body.about-notes-open #about-details .about-afterthought{max-width:760px;margin:clamp(26px,4vh,44px) auto 18px;padding:0 16px;color:#000!important;font-family:var(--portfolio-tagline-font)!important;font-size:clamp(17px,1.5vw,21px)!important;font-style:italic;font-weight:400;line-height:1.55!important;letter-spacing:.01em;text-align:center}

/* Smaller type across the intro hero, while preserving its existing layout. */
body:not(.projects-page) .intro-reference-greeting{font-size:clamp(24px,2.5vw,38px)!important}
body:not(.projects-page) .intro-reference-name{font-size:clamp(42px,4.7vw,74px)!important}
body:not(.projects-page) .intro-reference-name{display:inline-block;transform-origin:50% 75%}
body:not(.projects-page) .intro-reference-name:hover,body:not(.projects-page) .intro-reference-name:focus-visible{animation:intro-name-wiggle .65s ease-in-out}
body:not(.projects-page) .intro-reference-name:hover~.intro-reference-fields,body:not(.projects-page) .intro-reference-name:focus-visible~.intro-reference-fields{animation:intro-fields-drift .8s ease-in-out}
@keyframes intro-name-wiggle{0%,88%,100%{transform:rotate(0)}91%{transform:rotate(-1.4deg)}94%{transform:rotate(1.4deg)}97%{transform:rotate(-.7deg)}}
@keyframes intro-fields-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){body:not(.projects-page) .intro-reference-name:hover,body:not(.projects-page) .intro-reference-name:focus-visible,body:not(.projects-page) .intro-reference-name:hover~.intro-reference-fields,body:not(.projects-page) .intro-reference-name:focus-visible~.intro-reference-fields{animation:none!important}}
body:not(.projects-page) .intro-reference-fields{font-size:clamp(10px,.85vw,13px)!important}
body:not(.projects-page) .intro-reference-bio{font-size:clamp(15px,1.25vw,20px)!important}
body:not(.projects-page) .intro-reference-photo-label{font-size:9px!important}
@media(max-width:760px){body:not(.projects-page) .intro-reference-greeting{font-size:23px!important}body:not(.projects-page) .intro-reference-name{font-size:clamp(36px,9.5vw,60px)!important}body:not(.projects-page) .intro-reference-fields{font-size:9px!important}body:not(.projects-page) .intro-reference-bio{font-size:14px!important}body:not(.projects-page) .intro-reference-photo-label{font-size:8px!important}}
@media(max-width:420px){body:not(.projects-page) .intro-reference-name{font-size:clamp(34px,9.5vw,46px)!important}}
body.projects-page .project-story-header h1{font-size:clamp(19px,1.8vw,28px)!important}
body.projects-page .project-tech code{font-size:10px!important;padding:3px 8px!important}
@media(max-width:700px){body.projects-page .project-story-header h1{font-size:clamp(18px,4.5vw,24px)!important}body.projects-page .project-tech code{font-size:9px!important;padding:3px 7px!important}}
@media(max-width:700px){body.projects-page .project-copy-block[data-section="developer"],body.projects-page .project-copy-block[data-section="developer"] p{font-family:var(--portfolio-note-font),cursive!important;font-style:italic!important;font-size:clamp(17px,4.5vw,21px)!important;line-height:1.5!important;font-weight:500!important}}
body.projects-page .project-copy-block[data-section="problem"] h2,body.projects-page .project-copy-block[data-section="solution"] h2{font-size:10px!important}
body.projects-page .project-copy-block[data-section="problem"] p,body.projects-page .project-copy-block[data-section="solution"] p{font-size:clamp(13px,.9vw,15px)!important;line-height:1.5!important}
@media(max-width:700px){body.projects-page .project-copy-block[data-section="problem"] h2,body.projects-page .project-copy-block[data-section="solution"] h2{font-size:10px!important}body.projects-page .project-copy-block[data-section="problem"] p,body.projects-page .project-copy-block[data-section="solution"] p{font-size:14px!important;line-height:1.45!important}}
@media(min-width:701px){body.projects-page .project-content-grid{margin-top:clamp(26px,3vh,38px)!important}}
@media(max-width:700px){body.projects-page .project-content-grid{margin-top:22px!important}}
/* Keep the problem and solution together on the left, the demo centered, and handwritten notes on the right. */
@media(min-width:1101px){
  body.projects-page .project-content-grid{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr) minmax(0,.9fr)!important;
    column-gap:clamp(24px,3vw,48px)!important;
    row-gap:clamp(18px,2.5vh,30px)!important;
    align-items:center!important;
  }
  body.projects-page .project-content-grid>.project-copy-block[data-section="problem"]{grid-column:1;grid-row:1}
  body.projects-page .project-content-grid>.project-copy-block[data-section="solution"]{grid-column:1;grid-row:2}
  body.projects-page .project-content-grid>.project-demo-card{grid-column:2;grid-row:1 / span 3!important;align-self:center!important}
  body.projects-page .project-content-grid>.project-copy-block[data-section="developer"]{grid-column:3;grid-row:1 / span 3;align-self:center!important}
}

/* Polaroid controls: a simple pull tab and a bell-shaped submit action. */
.polaroid-new-button{
  border-radius:999px!important;
  box-shadow:none!important;
  transition:background .2s,transform .2s!important;
}
.polaroid-new-button:hover,.polaroid-new-button:focus-visible{
  box-shadow:none!important;
  transform:translate(-50%,1px)!important;
}
.polaroid-new-button:active,.polaroid-new-button.is-pulling{
  animation:polaroidPull .72s cubic-bezier(.2,.75,.25,1) both;
  box-shadow:none!important;
}
@keyframes polaroidPull{
  0%{transform:translate(-50%,0)}
  28%{transform:translate(-50%,14px)}
  48%{transform:translate(-50%,14px) rotate(-2deg)}
  72%{transform:translate(-50%,-5px) rotate(1deg)}
  100%{transform:translate(-50%,0)}
}
.polaroid-submit{
  position:relative!important;
  min-width:108px;
  min-height:46px;
  padding:12px 24px!important;
  border:1px solid #dfb83a!important;
  border-radius:999px!important;
  clip-path:none;
  background:#f6d94b!important;
  color:#29271e!important;
  font-family:var(--portfolio-note-font,var(--font))!important;
  font-size:16px!important;
  font-weight:700!important;
  box-shadow:none!important;
  transition:transform .18s,background .18s!important;
}
.polaroid-submit::after{
  content:none;
}
.polaroid-submit:hover,.polaroid-submit:focus-visible{background:#ffe978!important;transform:translateY(-2px)!important;box-shadow:none!important}
.polaroid-submit:active{transform:translateY(1px)!important;box-shadow:none!important}
.polaroid-submit:disabled{opacity:.65;cursor:wait}
.polaroid-edit-button{
  position:absolute;
  right:4px;
  bottom:4px;
  border:1px solid #c9bd80;
  border-radius:999px;
  padding:4px 9px;
  background:#fff3a8;
  color:#29271e;
  font:600 11px/1.2 var(--portfolio-note-font,var(--font));
  cursor:pointer;
}
.polaroid-edit-button:hover,.polaroid-edit-button:focus-visible{background:#ffe978;outline:2px solid #29271e;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.polaroid-new-button:active,.polaroid-new-button.is-pulling{animation:none}}
@media(min-width:701px){
  body.projects-page .projects-page-main{padding-top:0!important}
  body.projects-page .project-story{justify-content:center!important;align-items:center!important;padding:clamp(18px,3vh,36px) clamp(24px,4vw,64px)!important}
  body.projects-page .project-story-header{align-self:stretch!important;margin:0 0 clamp(12px,2vh,22px)!important;padding:0 20px!important}
  body.projects-page .project-content-grid{flex:0 1 auto!important;width:min(100%,1600px)!important;max-width:1600px!important;align-self:center!important;margin:clamp(22px,3vh,38px) auto 0!important;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)!important;align-content:center!important}
}
@media(max-width:700px){
  body.projects-page .project-story{padding:30px 20px 48px!important}
  body.projects-page .project-story-header,body.projects-page .project-tech-inline{width:100%!important;text-align:center!important}
  body.projects-page .project-content-grid{width:min(100%,640px)!important;margin:22px auto 0!important}
}
@media(min-width:1101px){
  body.projects-page .project-content-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr) minmax(0,.9fr)!important;column-gap:clamp(24px,3vw,48px)!important;row-gap:clamp(18px,2.5vh,30px)!important;align-items:center!important}
  body.projects-page .project-content-grid>.project-copy-block[data-section="problem"]{grid-column:1!important;grid-row:1!important}
  body.projects-page .project-content-grid>.project-copy-block[data-section="solution"]{grid-column:1!important;grid-row:2!important}
  body.projects-page .project-content-grid>.project-demo-card{grid-column:2!important;grid-row:1 / span 3!important;align-self:center!important}
  body.projects-page .project-content-grid>.project-copy-block[data-section="developer"]{grid-column:3!important;grid-row:1 / span 3!important;align-self:center!important}
}
@media(min-width:1101px){
  body.projects-page .project-story{padding:8px 1.5vw 14px!important}
  body.projects-page .project-content-grid{width:100%!important;max-width:none!important;margin-top:clamp(18px,2.5vh,30px)!important;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr) minmax(0,1fr)!important;column-gap:clamp(20px,2.2vw,42px)!important;row-gap:clamp(16px,2vh,26px)!important}
  body.projects-page .project-story-header{padding-inline:8px!important}
  body.projects-page .project-copy-block[data-section="problem"],body.projects-page .project-copy-block[data-section="solution"]{padding:0 4px 14px!important}
  body.projects-page .project-copy-block[data-section="problem"] h2,body.projects-page .project-copy-block[data-section="solution"] h2{font-size:12px!important;margin-bottom:10px!important}
  body.projects-page .project-copy-block[data-section="problem"] p,body.projects-page .project-copy-block[data-section="solution"] p{font-size:clamp(17px,1.15vw,23px)!important;line-height:1.45!important}
  body.projects-page .project-copy-block[data-section="developer"]{padding:0 4px!important}
  body.projects-page .project-copy-block[data-section="developer"] p,body.projects-page .project-copy-block[data-section="developer"] p *{font-size:clamp(24px,1.65vw,34px)!important;line-height:1.4!important}
  body.projects-page .project-demo-card video{width:100%!important;max-height:calc(100svh - 260px)!important;box-shadow:0 0 0 8px #fff,0 16px 36px rgba(29,39,42,.14)!important}
  body.projects-page .project-live-link{align-self:center!important;margin-top:22px!important;font-size:clamp(16px,1.1vw,20px)!important}
}
@media(min-width:1101px){
  body.projects-page .project-content-grid{grid-template-columns:minmax(0,.88fr) minmax(0,1.8fr) minmax(0,.88fr)!important;column-gap:clamp(18px,1.8vw,34px)!important}
  body.projects-page .project-demo-card{width:100%!important;max-width:none!important}
  body.projects-page .project-demo-card video{width:100%!important;max-height:calc(100svh - 205px)!important}
}
body.projects-page .project-copy-block[data-section="developer"] p:first-of-type::before{content:"“"}
body.projects-page .project-copy-block[data-section="developer"] p:first-of-type::after{content:"”"}
body.projects-page .project-copy-block[data-section="developer"] p,
body.projects-page .project-copy-block[data-section="developer"] p *{font-family:var(--portfolio-tagline-font),cursive!important}
body.projects-page .project-story-header h1{font-size:clamp(27px,2.8vw,38px)!important;line-height:1!important}
@media(max-width:700px){body.projects-page .project-story-header h1{font-size:clamp(27px,7vw,38px)!important}}
@media(min-width:701px){
  body.projects-page .projects-page-main{width:100vw!important;max-width:none!important;margin-left:calc(50% - 50vw)!important;padding-left:0!important;padding-right:0!important}
  body.projects-page .project-story{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}
  body.projects-page .project-content-grid{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;align-self:stretch!important}
}
@media(min-width:701px){
  body.projects-page .project-copy-block[data-section="problem"] p,
  body.projects-page .project-copy-block[data-section="solution"] p{font-size:clamp(18px,1.25vw,25px)!important;line-height:1.55!important;letter-spacing:.005em!important}
  body.projects-page .project-copy-block[data-section="problem"] h2,
  body.projects-page .project-copy-block[data-section="solution"] h2{font-size:13px!important;letter-spacing:.07em!important}
  body.projects-page .project-copy-block[data-section="developer"] p,
  body.projects-page .project-copy-block[data-section="developer"] p *{font-size:clamp(25px,1.75vw,36px)!important;line-height:1.48!important}
}
@media(min-width:701px){
  body.projects-page .project-copy-block[data-section="problem"] p,
  body.projects-page .project-copy-block[data-section="solution"] p{font-size:clamp(16px,1.05vw,21px)!important;line-height:1.45!important}
  body.projects-page .project-copy-block[data-section="developer"] p,
  body.projects-page .project-copy-block[data-section="developer"] p *{font-size:clamp(21px,1.45vw,30px)!important;line-height:1.4!important}
}
@media(min-width:1101px){
  body.projects-page .project-story{padding-left:0!important;padding-right:0!important}
  body.projects-page .project-content-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1.8fr) minmax(0,1.05fr)!important;column-gap:clamp(24px,2.6vw,46px)!important}
  body.projects-page .project-demo-card{width:100%!important;max-width:none!important}
  body.projects-page .project-demo-card video{width:100%!important;max-width:none!important}
  body.projects-page .project-copy-block[data-section="problem"],
  body.projects-page .project-copy-block[data-section="solution"]{padding-left:0!important;padding-right:clamp(10px,1vw,18px)!important;transform:translateX(clamp(-52px,-2.3vw,-28px))!important}
  body.projects-page .project-copy-block[data-section="developer"]{padding-left:clamp(10px,1vw,18px)!important;padding-right:0!important;transform:translateX(clamp(28px,2.3vw,52px))!important}
  body.projects-page .project-copy-block[data-section="developer"] p,
  body.projects-page .project-copy-block[data-section="developer"] p *{font-size:clamp(24px,1.65vw,34px)!important;line-height:1.4!important}
}
/* Apply the reference composition to every project while retaining existing type sizes. */
@media(min-width:1101px){
  body.projects-page .projects-page-main{width:100vw!important;max-width:none!important;margin-left:calc(50% - 50vw)!important;padding-inline:0!important}
  body.projects-page .project-story{width:100%!important;max-width:none!important;margin:0!important;padding-inline:0!important}
  body.projects-page .project-content-grid{display:grid!important;width:100%!important;max-width:none!important;align-self:stretch!important;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr) minmax(0,1fr)!important;grid-template-rows:auto auto auto!important;grid-template-areas:"problem demo developer" "solution demo developer" ". demo developer"!important;column-gap:clamp(24px,2.4vw,44px)!important;row-gap:clamp(16px,2vh,26px)!important;align-content:center!important;align-items:center!important}
  body.projects-page .project-content-grid>.project-copy-block[data-section="problem"]{grid-area:problem!important;transform:none!important;text-align:center!important}
  body.projects-page .project-content-grid>.project-copy-block[data-section="solution"]{grid-area:solution!important;transform:none!important;text-align:center!important}
  body.projects-page .project-content-grid>.project-copy-block[data-section="developer"]{grid-area:developer!important;transform:none!important;text-align:center!important}
  body.projects-page .project-content-grid>.project-demo-card{grid-area:demo!important;grid-row:1/4!important;width:100%!important;max-width:none!important;align-self:center!important;flex-direction:column!important}
  body.projects-page .project-content-grid>.project-demo-card video{width:100%!important;max-width:none!important;max-height:calc(100svh - 230px)!important}
  body.projects-page .project-copy-block[data-section="problem"],body.projects-page .project-copy-block[data-section="solution"],body.projects-page .project-copy-block[data-section="developer"]{padding-inline:clamp(14px,2vw,34px)!important}
}
@media(min-width:1101px){
  body.projects-page .project-content-grid{position:relative!important;left:50%!important;width:100vw!important;max-width:100vw!important;transform:translateX(-50%)!important;grid-template-columns:minmax(0,1.15fr) minmax(0,1.55fr) minmax(0,1.15fr)!important;column-gap:clamp(24px,2.4vw,48px)!important}
  body.projects-page .project-content-grid>.project-copy-block[data-section="problem"],
  body.projects-page .project-content-grid>.project-copy-block[data-section="solution"]{justify-self:stretch!important;padding-left:clamp(20px,3vw,64px)!important;padding-right:0!important}
  body.projects-page .project-content-grid>.project-copy-block[data-section="developer"]{justify-self:stretch!important;padding-left:0!important;padding-right:clamp(20px,3vw,64px)!important}
}
@media(min-width:1101px){
  body.projects-page .project-content-grid>.project-copy-block[data-section="problem"],
  body.projects-page .project-content-grid>.project-copy-block[data-section="solution"],
  body.projects-page .project-content-grid>.project-copy-block[data-section="developer"]{text-align:center!important}
  body.projects-page .project-copy-block[data-section="developer"] p,
  body.projects-page .project-copy-block[data-section="developer"] p *{font-size:clamp(20px,1.3vw,27px)!important;line-height:1.45!important}
}
@media(min-width:1101px){
  body.projects-page .project-content-grid{grid-template-areas:"problem demo developer" "solution demo developer"!important;grid-template-rows:minmax(0,1fr) minmax(0,1fr)!important}
  body.projects-page .project-content-grid>.project-copy-block[data-section="problem"]{grid-row:1!important;align-self:end!important}
  body.projects-page .project-content-grid>.project-copy-block[data-section="solution"]{grid-row:2!important;align-self:start!important}
  body.projects-page .project-content-grid>.project-demo-card{grid-row:1/3!important}
  body.projects-page .project-content-grid>.project-copy-block[data-section="developer"]{grid-row:1/3!important;align-self:center!important}
}
@media(min-width:1101px){
  body.projects-page .project-content-grid{row-gap:clamp(38px,5vh,72px)!important}
  body.projects-page .project-copy-block[data-section="problem"] p,
  body.projects-page .project-copy-block[data-section="solution"] p,
  body.projects-page .project-copy-block[data-section="developer"] p{text-align:justify!important;text-align-last:left!important}
}
body.projects-page .project-copy-block[data-section="developer"] p,
body.projects-page .project-copy-block[data-section="developer"] p *{font-size:22px!important;line-height:1.5!important}
@media(max-width:700px){
  body.projects-page .project-copy-block[data-section="developer"] p,
  body.projects-page .project-copy-block[data-section="developer"] p *{font-size:18px!important;line-height:1.5!important}
}

/* Keep the project demo central and make the surrounding copy easy to scan. */
@media(min-width:1101px){
  body.projects-page .project-content-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr) minmax(0,1fr)!important;column-gap:clamp(24px,2.2vw,42px)!important}
  body.projects-page .project-copy-block[data-section="problem"] p,
  body.projects-page .project-copy-block[data-section="solution"] p{font-size:clamp(16px,1.05vw,20px)!important;line-height:1.55!important}
  body.projects-page .project-copy-block[data-section="developer"] p,
  body.projects-page .project-copy-block[data-section="developer"] p *{font-size:clamp(16px,1.05vw,20px)!important;line-height:1.55!important}
  body.projects-page .project-demo-card video{max-height:calc(100svh - 210px)!important;box-shadow:0 0 0 9px #fff,0 20px 44px rgba(29,39,42,.16)!important}
}
/* Hide section seams against the white page background. */
body.projects-page .project-story{border-top-color:#fff!important;border-bottom-color:#fff!important}
body:not(.projects-page) :is(.hero,.jackpot-section,.gallery-section,.community-doodle-section,.contact-section){border-top-color:#fff!important;border-bottom-color:#fff!important}

/* Match the navigation pill interaction for the Polaroid pull control. */
.polaroid-new-button{background:#fff!important;color:#20272a!important;border:1px solid #20272a!important;border-radius:999px!important;box-shadow:none!important;transition:none!important;animation:none!important}
.polaroid-new-button::after{content:none!important;display:none!important}
.polaroid-new-button.is-selected{background:#20272a!important;color:#fff!important;border-color:#20272a!important}
.polaroid-new-button:hover,.polaroid-new-button.is-selected:hover{background:#20272a!important;color:#fff!important;border-color:#20272a!important;transform:translateX(-50%)!important;box-shadow:none!important}
.polaroid-submit{background:#fff!important;color:#20272a!important;border:1px solid #20272a!important;border-radius:999px!important;box-shadow:none!important;transition:background-color .28s,color .28s,transform .22s cubic-bezier(.2,.8,.2,1)!important}
.polaroid-submit:hover,.polaroid-submit:focus-visible{background:#20272a!important;color:#fff!important;transform:scale(1.04)!important;box-shadow:0 4px 12px rgba(20,28,31,.16)!important}
.polaroid-submit:active{background:#20272a!important;color:#fff!important;transform:scale(.92)!important;box-shadow:0 4px 12px rgba(20,28,31,.16)!important}
@media(prefers-reduced-motion:reduce){.polaroid-submit{transition:none!important}.polaroid-submit:hover,.polaroid-submit:focus-visible,.polaroid-submit:active{transform:none!important}}
.polaroid-tool.polaroid-pen-icon,.polaroid-tool.polaroid-eraser-icon{transition:background-color .28s ease,border-color .28s ease,transform .22s cubic-bezier(.2,.8,.2,1)!important}
.polaroid-tool.polaroid-pen-icon:hover,.polaroid-tool.polaroid-pen-icon:focus-visible,.polaroid-tool.polaroid-eraser-icon:hover,.polaroid-tool.polaroid-eraser-icon:focus-visible{background-color:#e9e9e9!important;border-color:#20272a!important;transform:scale(1.04)!important}
.polaroid-tool.polaroid-pen-icon:active,.polaroid-tool.polaroid-eraser-icon:active{transform:scale(.92)!important}
@media(prefers-reduced-motion:reduce){.polaroid-tool.polaroid-pen-icon,.polaroid-tool.polaroid-eraser-icon{transition:none!important}.polaroid-tool.polaroid-pen-icon:hover,.polaroid-tool.polaroid-pen-icon:focus-visible,.polaroid-tool.polaroid-pen-icon:active,.polaroid-tool.polaroid-eraser-icon:hover,.polaroid-tool.polaroid-eraser-icon:focus-visible,.polaroid-tool.polaroid-eraser-icon:active{transform:none!important}}
.polaroid-tool.polaroid-pen-icon,.polaroid-tool.polaroid-eraser-icon{position:relative;width:34px!important;height:34px!important;flex:0 0 34px!important;border:1px solid #20272a!important;border-radius:50%!important;background:#fff!important;background-image:none!important;filter:none!important;overflow:hidden}
.polaroid-tool.polaroid-pen-icon::before,.polaroid-tool.polaroid-eraser-icon::before{content:"";position:absolute;inset:3px;border-radius:50%;background-image:url("assets/pen-eraser-icons.png");background-repeat:no-repeat;background-size:62px 25px}
.polaroid-tool.polaroid-pen-icon::before{background-position:left 2px center}
.polaroid-tool.polaroid-eraser-icon::before{background-position:right 2px center}
.polaroid-tool.polaroid-pen-icon.is-active,.polaroid-tool.polaroid-eraser-icon.is-active{background:#20272a!important;border:1px solid #20272a!important;filter:none!important}
.polaroid-tool.polaroid-pen-icon.is-active::before,.polaroid-tool.polaroid-eraser-icon.is-active::before{filter:invert(1)}
.polaroid-tool.polaroid-pen-icon.is-tool-press,.polaroid-tool.polaroid-eraser-icon.is-tool-press{animation:polaroid-tool-press .42s cubic-bezier(.2,.8,.2,1) both!important}
@keyframes polaroid-tool-press{0%{transform:scale(.9)}55%{transform:scale(1.07)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.polaroid-tool.polaroid-pen-icon.is-tool-press,.polaroid-tool.polaroid-eraser-icon.is-tool-press{animation:none!important}}
.polaroid-board{position:relative}
.polaroid-board-pin{position:absolute;z-index:3;width:30px;height:30px;border:2px solid #65716e;border-radius:50%;background:radial-gradient(circle at 31% 24%,#fff 0 8%,#aebcba 18%,#557982 48%,#284e5a 78%,#1a3944 100%);box-shadow:0 4px 5px #0005,0 0 0 4px #fff9,inset 0 1px 3px #fff9;pointer-events:none}
.polaroid-board-pin::after{content:"";position:absolute;inset:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#dce9e8,#35616d 70%);box-shadow:inset 0 1px 2px #17333b99}
.polaroid-board-pin.pin-top-left{top:8px;left:8px}
.polaroid-board-pin.pin-top-right{top:8px;right:8px}
.polaroid-board-pin.pin-bottom-left{bottom:8px;left:8px}
.polaroid-board-pin.pin-bottom-right{bottom:8px;right:8px}
.polaroid-board{border:11px solid #c99560!important;border-radius:4px!important;box-shadow:inset 0 0 0 2px #e5ba82,0 0 0 2px #8b5e36,0 12px 28px #3d281923!important}
.doodle-card-heading{height:auto!important;min-height:0!important;flex:0 0 auto!important;padding-bottom:clamp(12px,2vh,22px)!important}
.doodle-card-heading>div{gap:10px!important}
.doodle-card-heading .polaroid-new-button{position:relative!important;top:auto!important;left:auto!important;justify-self:center!important;margin:0!important;padding:9px 20px!important;transform:none!important;font-family:var(--portfolio-body-font),Arial,sans-serif!important;font-size:15px!important;font-style:normal!important;font-weight:500!important;letter-spacing:0!important}
.doodle-card-heading .polaroid-new-button:hover,.doodle-card-heading .polaroid-new-button.is-selected:hover{transform:none!important}

/* Intro story collage: ideas on the left, introduction on the right. */
body:not(.projects-page) .hero.intro-reference{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)!important;gap:clamp(34px,5vw,88px)!important;padding-inline:clamp(26px,4vw,76px)!important}
body:not(.projects-page) .intro-reference-copy{grid-column:2;grid-row:1;max-width:660px;justify-self:start}
.intro-story-collage{grid-column:1;grid-row:1;display:grid;grid-template-columns:1fr 1fr 1.28fr;grid-template-rows:repeat(3,minmax(0,1fr));gap:clamp(8px,1vw,16px);width:100%;height:min(74vh,620px);min-height:430px;align-self:center}
.intro-story-photo{position:relative;min-width:0;min-height:0;margin:0;overflow:hidden;border:5px solid #fff;background:#f5f3ed;box-shadow:0 8px 22px #20201e21;transform:rotate(var(--photo-tilt,0deg))}
.intro-story-photo img{display:block;width:100%;height:100%;object-fit:cover}
.intro-story-photo figcaption{position:absolute;right:4px;bottom:4px;left:4px;padding:4px 6px;background:#fffffff0;color:#242424;font:600 clamp(8px,.7vw,11px)/1.2 var(--portfolio-body-font),Arial,sans-serif;letter-spacing:.02em}
.story-brainstorm{grid-column:1;grid-row:1;--photo-tilt:-2deg}.story-brainstorm img{object-position:50% 60%}
.story-plan{grid-column:2;grid-row:1;--photo-tilt:2deg}.story-plan img{object-position:50% 45%}
.story-build{grid-column:1;grid-row:2;--photo-tilt:1deg}.story-build img{object-position:50% 67%}
.story-workspace{grid-column:2;grid-row:2;--photo-tilt:-2deg}.story-workspace img{object-position:50% 75%}
.story-present{grid-column:1/3;grid-row:3;--photo-tilt:-1deg}.story-present img{object-position:50% 48%}
.story-person{grid-column:3;grid-row:1/4;--photo-tilt:1deg;border-width:7px}.story-person img{object-position:50% 66%}
@media(max-width:760px){
  body:not(.projects-page) .hero.intro-reference{grid-template-columns:1fr!important;gap:28px!important;padding:32px 20px 48px!important}
  body:not(.projects-page) .intro-reference-copy{grid-column:1;grid-row:2;max-width:none}
  .intro-story-collage{grid-column:1;grid-row:1;height:clamp(300px,52vh,500px);min-height:0;gap:7px}
  .intro-story-photo{border-width:3px}.story-person{border-width:4px}
  .intro-story-photo figcaption{font-size:8px;padding:3px 4px}
}
/* Stagger the six photos like tiles on the reference wall. */
.intro-story-collage{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr)) minmax(0,1.45fr);column-gap:clamp(10px,1.2vw,20px);row-gap:clamp(15px,2.2vh,28px);height:min(78vh,690px)}
.intro-story-photo{overflow:visible;border:0;background:transparent;box-shadow:none;transform:none}
.intro-story-photo img{border:4px solid #fff;box-shadow:0 5px 14px #20201e24}
.intro-story-photo figcaption{top:-19px;right:auto;bottom:auto;left:0;padding:0;background:transparent;color:#2d5b8b;font-family:var(--portfolio-body-font),Arial,sans-serif;font-size:clamp(10px,.85vw,13px);font-weight:700;white-space:nowrap}
.story-brainstorm{grid-column:1;grid-row:1}.story-plan{grid-column:2;grid-row:1}
.story-build{grid-column:1;grid-row:2}.story-workspace{grid-column:3;grid-row:2}
.story-present{grid-column:2;grid-row:3}.story-person{grid-column:1/3;grid-row:4}
.story-person img{border-width:5px;object-position:50% 55%}
@media(max-width:760px){
  .intro-story-collage{height:clamp(420px,72vh,620px);grid-template-rows:repeat(3,minmax(0,1fr)) minmax(0,1.35fr);column-gap:7px;row-gap:16px}
  .intro-story-photo img,.story-person img{border-width:2px}
  .intro-story-photo figcaption{top:-14px;font-size:8px}
}
/* Fit the collage within half the hero and keep each subject in its crop. */
body:not(.projects-page) .hero.intro-reference{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:clamp(28px,3vw,56px)!important;padding-inline:clamp(24px,3vw,58px)!important}
body:not(.projects-page) .hero.intro-reference .intro-story-collage{width:100%;height:min(62vh,540px);min-height:0;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:clamp(9px,1vw,16px)}
body:not(.projects-page) .intro-reference-copy{min-width:0;max-width:100%;justify-self:stretch}
body:not(.projects-page) .intro-reference-name{max-width:100%;font-size:clamp(36px,3.2vw,60px)!important;white-space:normal!important;overflow-wrap:normal}
.intro-story-photo{overflow:hidden}
.intro-story-photo figcaption{z-index:1;top:4px;left:4px;padding:3px 5px;background:#fffffff0}
.story-brainstorm{grid-column:1;grid-row:1}.story-brainstorm img{object-position:50% 54%}
.story-plan{grid-column:2;grid-row:1}.story-plan img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:rotate(90deg) scale(1.55)}
.story-build{grid-column:1;grid-row:2}.story-build img{object-position:50% 72%}
.story-workspace{grid-column:3;grid-row:2}.story-workspace img{object-position:50% 78%}
.story-present{grid-column:2;grid-row:3/5}.story-present img{object-position:50% 59%}
.story-person{grid-column:1;grid-row:3/5}.story-person img{object-position:50% 68%}
@media(max-width:760px){
  body:not(.projects-page) .hero.intro-reference{grid-template-columns:1fr!important;gap:24px!important;padding:28px 20px 48px!important}
  body:not(.projects-page) .hero.intro-reference .intro-story-collage{grid-column:1;grid-row:1;height:clamp(300px,47vh,430px)}
  body:not(.projects-page) .intro-reference-copy{grid-column:1;grid-row:2}
  body:not(.projects-page) .intro-reference-name{font-size:clamp(34px,9vw,52px)!important}
}
/* Give the intro photos a clear reading order and keep the portrait prominent. */
body:not(.projects-page) .hero.intro-reference{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:clamp(28px,4vw,72px)!important;align-items:center!important}
body:not(.projects-page) .hero.intro-reference .intro-story-collage{height:min(62vh,560px);min-height:390px;grid-template-columns:1.15fr 1fr 1fr;grid-template-rows:repeat(3,minmax(0,1fr));gap:clamp(16px,1.4vw,24px)}
.intro-story-photo{overflow:visible!important;border:0!important;background:#fff!important;box-shadow:none!important}
.intro-story-photo img{border:3px solid #fff!important;border-radius:2px;box-shadow:0 7px 18px #2222221c}
.intro-story-photo figcaption{position:absolute;top:-18px;left:0;right:auto;bottom:auto;padding:0;background:transparent;color:#305e8a;font-family:var(--portfolio-body-font),Arial,sans-serif;font-size:clamp(9px,.75vw,12px);font-weight:700;line-height:1.2;white-space:nowrap}
.story-person{grid-column:1;grid-row:1/4}.story-person img{object-position:50% 58%;border-width:3px!important}
.story-brainstorm{grid-column:2;grid-row:1}.story-brainstorm img{object-position:50% 58%}
.story-plan{grid-column:3;grid-row:1;overflow:hidden!important}.story-plan img{object-position:50% 50%;transform:rotate(90deg) scale(1.2)}
.story-plan figcaption{top:3px;left:3px;padding:2px 4px;background:#fff}
.story-build{grid-column:2;grid-row:2}.story-build img{object-position:50% 66%}
.story-workspace{grid-column:3;grid-row:2}.story-workspace img{object-position:50% 76%}
.story-present{grid-column:2/4;grid-row:3}.story-present img{object-position:50% 60%}
body:not(.projects-page) .intro-reference-copy{grid-column:2;grid-row:1;min-width:0;max-width:100%}
body:not(.projects-page) .intro-reference-name{display:block;max-width:100%;font-size:clamp(36px,3.1vw,58px)!important;white-space:normal!important;line-height:1.16!important}
body:not(.projects-page) .intro-reference-bio{margin-top:28px!important;max-width:660px;font-size:clamp(15px,1.1vw,18px)!important;line-height:1.65!important}
@media(max-width:760px){
  body:not(.projects-page) .hero.intro-reference{grid-template-columns:1fr!important;gap:28px!important;padding:32px 20px 50px!important}
  body:not(.projects-page) .hero.intro-reference .intro-story-collage{grid-column:1;grid-row:1;height:clamp(310px,48vh,440px);min-height:0;gap:12px}
  body:not(.projects-page) .intro-reference-copy{grid-column:1;grid-row:2}
  body:not(.projects-page) .intro-reference-name{font-size:clamp(34px,9vw,52px)!important}
  .intro-story-photo figcaption{top:-13px;font-size:8px}
}
/* Five-photo wall: offset tiles, a full portrait, and a vertical idea sketch. */
body:not(.projects-page) .hero.intro-reference .intro-story-collage{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));height:min(62vh,560px);gap:clamp(15px,1.4vw,24px)}
.story-person{grid-column:1;grid-row:1}.story-person img{object-position:50% 33%}
.story-brainstorm{grid-column:2;grid-row:1}
.story-build{grid-column:1;grid-row:2}.story-build img{object-position:50% 64%}
.story-present{grid-column:3;grid-row:2/4}.story-present img{object-position:50% 62%}
.story-sketch{grid-column:2;grid-row:2/4}.story-sketch img{object-fit:contain;background:#ebece4}
@media(max-width:760px){body:not(.projects-page) .hero.intro-reference .intro-story-collage{height:clamp(320px,50vh,450px);gap:10px}}
/* Keep the full standing portrait and crop the sketch to its paper edges. */
.story-person{grid-column:1;grid-row:1/4}.story-person img{object-position:50% 50%}
.story-brainstorm{grid-column:2;grid-row:1}
.story-build{grid-column:3;grid-row:1}.story-build img{object-position:50% 70%}
.story-present{grid-column:3;grid-row:2}.story-present img{object-position:52% 50%}
.story-sketch{grid-column:2;grid-row:3;overflow:hidden!important}.story-sketch img{object-fit:cover;object-position:50% 50%;background:#ebece4;transform:scale(1.02)}
.story-brainstorm{grid-column:2;grid-row:3}
.story-sketch{grid-column:2;grid-row:1}
.intro-story-photo figcaption,.story-plan figcaption{top:6px;left:6px;right:auto;bottom:auto;width:25px;height:25px;display:grid;place-items:center;padding:0;border-radius:50%;background:#ffffffc9;color:#385268;font-size:14px;line-height:1;opacity:.75;box-shadow:0 1px 4px #0002}
@media(max-width:760px){.intro-story-photo figcaption{width:20px;height:20px;font-size:11px}}
.intro-story-photo{animation:intro-photo-arrive .65s cubic-bezier(.2,.75,.25,1) both;transition:transform .28s cubic-bezier(.2,.75,.25,1),box-shadow .28s ease}
.intro-story-photo:nth-child(2){animation-delay:.08s}.intro-story-photo:nth-child(3){animation-delay:.16s}.intro-story-photo:nth-child(4){animation-delay:.24s}.intro-story-photo:nth-child(5){animation-delay:.32s}
.intro-story-photo:hover{transform:translateY(-4px) scale(1.015);z-index:2}
@keyframes intro-photo-arrive{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.intro-story-photo{animation:none;transition:none}.intro-story-photo:hover{transform:none}}
.intro-story-photo img{animation:intro-photo-float 6s ease-in-out infinite}
.intro-story-photo:nth-child(2) img{animation-delay:-1.2s}.intro-story-photo:nth-child(3) img{animation-delay:-2.4s}.intro-story-photo:nth-child(4) img{animation-delay:-3.6s}.intro-story-photo:nth-child(5) img{animation-delay:-4.8s}
@keyframes intro-photo-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.intro-story-photo img{animation:none}}
body:not(.projects-page) .intro-reference-name{font-size:clamp(46px,4vw,78px)!important;white-space:normal!important}
@media(max-width:760px){body:not(.projects-page) .intro-reference-name{font-size:clamp(40px,10vw,62px)!important}}
.intro-story-photo{padding:5px;border:1px solid #deded9!important;border-radius:3px;background:#fff!important;box-shadow:0 5px 14px #20201e14!important}
.intro-story-photo img,.story-person img{border:0!important;border-radius:1px;box-shadow:none!important}
@media(max-width:760px){.intro-story-photo{padding:3px}}
.story-brainstorm img{object-position:50% 48%;filter:none}
.story-brainstorm{overflow:hidden!important}
.story-brainstorm img{rotate:0deg;scale:1;transform-origin:center;object-position:50% 50%;filter:none}
.story-person{grid-column:3;grid-row:1/4}
.story-build{grid-column:1;grid-row:1}
.story-present{grid-column:1;grid-row:2}
body:not(.projects-page) .hero.intro-reference .intro-story-collage{gap:clamp(8px,.7vw,12px)}
@media(max-width:760px){body:not(.projects-page) .hero.intro-reference .intro-story-collage{gap:6px}}
body:not(.projects-page) .intro-reference-name::after{content:"✦";display:inline-block;margin-left:.12em;color:#20201e;font-family:Georgia,serif;font-size:.38em;line-height:1;vertical-align:top;animation:intro-name-star 3.8s ease-in-out infinite}
@keyframes intro-name-star{0%,100%{opacity:.75;transform:rotate(-10deg) scale(.9)}50%{opacity:1;transform:rotate(12deg) scale(1.1)}}
@media(prefers-reduced-motion:reduce){body:not(.projects-page) .intro-reference-name::after{animation:none}}

/* Compact intro treatment with staggered photo reveals. */
body:not(.projects-page) .hero.intro-reference{
  padding-block:0!important;
}
body:not(.projects-page) .intro-reference-name{
  display:inline-block;
  transform-origin:55% 80%;
}
body:not(.projects-page) .intro-reference-name:hover,
body:not(.projects-page) .intro-reference-name:focus-visible{
  animation:intro-name-playful-wiggle .72s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes intro-name-playful-wiggle{
  0%,100%{transform:rotate(0)}
  18%{transform:rotate(-2.5deg)}
  36%{transform:rotate(2.2deg)}
  54%{transform:rotate(-1.7deg)}
  72%{transform:rotate(1deg)}
  88%{transform:rotate(-.4deg)}
}
body:not(.projects-page) .intro-reference-fields{
  display:block;
  width:auto!important;
  margin:12px 0 18px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#333!important;
  font-family:var(--portfolio-project-title-font)!important;
  font-size:clamp(12px,1vw,15px)!important;
  font-weight:400!important;
  letter-spacing:.015em!important;
  line-height:1.4!important;
  text-transform:none!important;
}
body:not(.projects-page) .intro-reference-fields span{padding-inline:7px;color:#999!important}
body:not(.projects-page) .intro-reference-bio{font-size:clamp(14px,1vw,17px)!important;line-height:1.55!important}
.intro-story-photo{animation-name:intro-photo-reveal!important;animation-duration:.9s!important}
@keyframes intro-photo-reveal{
  from{opacity:0;filter:blur(7px);translate:0 10px}
  to{opacity:1;filter:blur(0);translate:0 0}
}
@media(max-width:760px){
  body:not(.projects-page) .hero.intro-reference{padding-block:0!important}
  body:not(.projects-page) .intro-reference-fields{margin:10px 0 14px!important;font-size:12px!important;letter-spacing:0!important}
  body:not(.projects-page) .intro-reference-bio{font-size:14px!important;line-height:1.5!important}
}
@media(prefers-reduced-motion:reduce){
  .intro-story-photo{animation:none!important}
  body:not(.projects-page) .intro-reference-name:hover,
  body:not(.projects-page) .intro-reference-name:focus-visible{animation:none!important}
}

/* About Me cards without mini-headings; center each story in its card. */
body.about-notes-open #about-details .about-card-label{display:none!important}
body.about-notes-open #about-details .about-story-card{
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}
body.about-notes-open #about-details .about-story-card .about-card-copy{
  width:100%!important;
  text-align:center!important;
}

/* Bring the next section titles closer to the content above them. */
body:not(.projects-page) .jackpot-section{padding-top:58px}
body:not(.projects-page) .jackpot-heading,
body:not(.projects-page) .sketch-heading{margin-top:0!important}
body:not(.projects-page) .sketch-heading{top:clamp(10px,2vh,26px)}
@media(max-width:760px){
  body:not(.projects-page) .jackpot-section{padding-top:42px}
  body:not(.projects-page) .sketch-heading{top:10px}
}

/* Let workspace projects follow their content instead of leaving a full-screen gap. */
@media(min-width:701px){
  body.projects-page .project-story{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    justify-content:flex-start!important;
    padding-top:42px!important;
    padding-bottom:52px!important;
  }
  body.projects-page .project-story:target{
    min-height:calc(100svh - 76px)!important;
  }
}

/* Keep the Recipe Room demo smaller than the other project videos. */
body.projects-page #epicure .project-demo-card video{
  width:82%!important;
  max-width:82%!important;
  max-height:52svh!important;
}
@media(max-width:700px){
  body.projects-page #epicure .project-demo-card video{
    width:90%!important;
    max-width:90%!important;
  }
}

/* Give the Language Translation story a little more breathing room above. */
body.projects-page #language-translation .project-story-header,
body.projects-page #language-translation .project-content-grid{
  transform:translateY(22px);
}
@media(max-width:700px){
  body.projects-page #language-translation .project-story-header,
  body.projects-page #language-translation .project-content-grid{
    transform:translateY(12px);
  }
}

/* Keep a clear gutter between the copy and demo in every workspace project. */
@media(min-width:701px){
  body.projects-page .project-content-grid{
    column-gap:clamp(34px,3vw,58px)!important;
  }
  body.projects-page .project-content-grid > .project-demo-card video{
    width:92%!important;
    max-width:92%!important;
  }
  body.projects-page #endless-bingo .project-demo-card video{
    width:82%!important;
    max-width:82%!important;
    max-height:52svh!important;
  }
}
@media(max-width:700px){
  body.projects-page #endless-bingo .project-demo-card video{
    width:90%!important;
    max-width:90%!important;
  }
}

/* Give each desktop project a separate viewing area below the navigation. */
@media(min-width:701px){
  body.projects-page .project-story{
    height:auto!important;
    min-height:calc(100svh - 76px)!important;
    max-height:none!important;
    overflow:visible!important;
    justify-content:center!important;
    padding-top:28px!important;
    padding-bottom:28px!important;
  }
  body.projects-page .project-story{
    background-image:none!important;
    background-color:#fff!important;
  }
  body.projects-page .project-story:nth-of-type(even){
    background-color:#fafafa!important;
  }
}