@font-face{font-family:Nunito;src:url('assets/nunito-sans-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Nunito;src:url('assets/nunito-sans-black.woff2') format('woff2');font-weight:700 900;font-display:swap}
:root{--paper:#f4f1e9;--ink:#193b33;--accent:#d94f32;--line:#ced2c6;--progress:0;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 20px/1.5 Nunito,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font:inherit}img{display:block;max-width:100%;height:auto}
button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid #0a72b8;outline-offset:5px}
::selection{color:var(--paper);background:var(--ink)}
.page-width{width:min(1280px,90%);margin-inline:auto}
.icon,.star-icon{display:inline-block;width:1em;height:1em;vertical-align:-.13em;flex-shrink:0}
.svg-library{position:absolute;width:0;height:0;overflow:hidden}
.skip-link{position:fixed;left:16px;top:-100px;z-index:100;padding:12px 20px;background:var(--ink);color:white}.skip-link:focus{top:12px}
.reading-progress{position:fixed;top:0;left:0;z-index:50;width:100%;height:3px;background:var(--accent);transform-origin:left;transform:scaleX(var(--progress))}
h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-weight:900;letter-spacing:-.05em;line-height:1.08}
em{font:italic 400 1.06em/1 Georgia,'Times New Roman',serif;letter-spacing:-.045em}
/* A compact header, with readable controls throughout. */
.site-header{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:28px;min-height:76px;padding:10px 5%;border-bottom:1px solid #193b3315;background:#f4f1e9ee;backdrop-filter:blur(16px)}
.wordmark{font-weight:900;font-size:38px;letter-spacing:-3px;line-height:1;display:inline-flex;align-items:center;min-height:44px}.wordmark span{color:var(--accent);font-size:27px;margin-left:7px;letter-spacing:0}
.site-header nav{display:flex;align-items:center;gap:30px;margin-left:auto;font-size:18px;font-weight:700}.site-header nav a{display:flex;align-items:center;gap:9px;min-height:44px}.site-header nav a:hover{color:var(--accent)}
.motion-toggle{border:1px solid #b5c1b4;border-radius:40px;background:transparent;color:var(--ink);min-height:44px;padding:8px 15px;font-size:16px;cursor:pointer}.motion-toggle:hover{background:#e7e9de}.motion-toggle:disabled{cursor:default}
/* The photograph leads, centred between just a name and a short introduction. */
.hero{padding-block:42px 48px;--section-progress:.5;--hero-progress:0}
.hero-scene{display:grid;grid-template-columns:minmax(0,1fr) 360px minmax(0,1fr);gap:48px;align-items:center}
.hero-name p{font-size:24px;margin-bottom:14px}.hero-name h1{font-size:clamp(60px,6.8vw,96px);letter-spacing:-.065em}.hero-name h1>span{color:var(--accent)}
.hero-portrait{position:relative;isolation:isolate}
.portrait{position:relative;overflow:hidden;border-radius:160px 160px 28px 28px;background:#d8dacf;box-shadow:0 15px 36px #233b2918;transform:translate3d(0,var(--parallax-y,0px),0) rotate(calc(var(--hero-progress,0)*-1.5deg));transform-origin:50% 70%}
.portrait img{width:100%;height:440px;object-fit:cover;object-position:center 35%}
.portrait::after{content:'';position:absolute;inset:55% 0 0;background:linear-gradient(transparent,#10241bd9);pointer-events:none}
.portrait figcaption{position:absolute;z-index:1;bottom:22px;left:25px;right:20px;color:white;font-size:18px;line-height:1.35;font-weight:700;text-shadow:0 1px 3px #0005}
.portrait-halo{position:absolute;inset:34px -24px -12px;border:1px solid #a3b5a2;border-radius:50%;z-index:-1;transform:rotate(calc(-15deg + var(--hero-progress,0)*28deg)) scale(calc(1 + var(--hero-progress,0)*.05))}
.portrait-star{position:absolute;top:16px;right:-30px;color:var(--accent);font-size:74px;line-height:1;transform:rotate(calc(-10deg + var(--hero-progress,0)*80deg));filter:drop-shadow(0 2px 0 var(--paper))}
.hero-note>p{font-size:clamp(30px,3.1vw,44px);font-weight:900;letter-spacing:-.04em;line-height:1.15}
.explore-link{display:inline-flex;align-items:center;gap:14px;font-size:20px;font-weight:700;margin-top:26px;min-height:48px}.explore-link>span{display:grid;place-items:center;width:42px;height:42px;border:1px solid #9ead9e;border-radius:50%;transition:background .25s,color .25s,transform .3s var(--ease)}.explore-link:hover>span{background:var(--ink);color:white;transform:translateY(4px)}
/* Six projects, arranged as a compact gallery instead of six full-page chapters. */
.projects{padding-bottom:28px}.projects-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:20px 26px;border-top:1px solid var(--line)}
.projects-heading h2{font-size:42px}.projects-heading>span{font-size:36px;color:var(--accent);line-height:1}
.project-collection{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.project{min-width:0;background:#fffdf7;border:1px solid #d4d8cb;border-radius:24px;overflow:hidden;isolation:isolate;--section-progress:.5;--section-focus:0;scroll-margin-top:16px;transition:border-color .3s,box-shadow .3s}
.project:hover{border-color:#a3b4a4;box-shadow:0 14px 36px #193b330b}
.project-art{position:relative;isolation:isolate;height:286px;overflow:hidden;display:flex;align-items:center;justify-content:center;--pointer-x:0;--pointer-y:0}
.art-stage{position:relative;width:300px;height:300px;flex:0 0 auto;transform:perspective(850px) rotateX(calc(var(--pointer-y,0)*-4deg)) rotateY(calc(var(--pointer-x,0)*5deg));transform-style:preserve-3d}
.project-copy{padding:22px 26px 24px}
.project-copy h3{font-size:36px}.project-copy>p{font-size:20px;color:#4a6155;line-height:1.4;margin-top:8px}
.project-links{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:20px}
.project-links a{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:9px 13px;border:1px solid #c5cec0;border-radius:10px;font-size:18px;font-weight:700;line-height:1.3;transition:background .2s,color .2s,border-color .2s}
.project-links .icon{font-size:17px;transition:transform .25s var(--ease)}
.project-links a:hover{border-color:var(--ink);background:#e7ecdf}.project-links a:hover .icon{transform:translate(2px,-2px)}
.project-links a.primary-link{background:var(--ink);border-color:var(--ink);color:white}.project-links a.primary-link:hover{background:#2f5849}
/* River Thoughts — three softly flowing currents and a floating book emblem. */
.river-art{background:#c8e0d7}.river-flow{position:absolute;inset:-15%;width:130%;height:130%;stroke:#74b5b6;stroke-width:38;opacity:.55;transform:translate3d(calc((var(--section-progress,.5) - .5)*-56px),calc((var(--section-progress,.5) - .5)*28px),0)}
.river-flow path:nth-child(2){stroke:#edf2da;stroke-width:16}.river-flow path:nth-child(3){stroke:#9bc8b7;stroke-width:22}
.river-ring{position:absolute;inset:15px;border:1px solid #508f8060;border-radius:50%;transform:scale(calc(.88 + var(--section-focus,0)*.15))}
.river-logo{position:absolute;inset:44px;width:212px;height:212px;border-radius:50%;overflow:hidden;box-shadow:0 16px 30px #22584921;transform:translate3d(0,var(--parallax-y,0px),15px) rotate(calc(-7deg + var(--section-progress,.5)*14deg))}.river-logo img{width:100%;height:100%;object-fit:contain}
/* Obtainabus — an app icon with layered orbit and light details. */
.obtainabus-art{background:radial-gradient(ellipse at 65% 20%,#225cd2,#073498 80%)}
.shop-grid{position:absolute;inset:-40%;background-image:linear-gradient(#8fb9ff20 1px,transparent 1px),linear-gradient(90deg,#8fb9ff20 1px,transparent 1px);background-size:44px 44px;transform:rotate(calc(-15deg + var(--section-progress,.5)*20deg))}
.shop-orbit{position:absolute;width:470px;height:200px;border:1px solid #9bc4ff66;border-radius:50%;transform:rotate(calc(-35deg + var(--section-progress,.5)*40deg))}
.obtainabus-logo{position:absolute;inset:56px;width:188px;height:188px;border-radius:32px;background:white;padding:12px;box-shadow:0 22px 24px #001c5e66;transform:translate3d(0,var(--parallax-y,0px),20px) rotate(calc(-10deg + var(--section-progress,.5)*20deg))}.obtainabus-logo img{border-radius:18px}
.shop-spark{position:absolute;color:#d7ed99;font-size:46px;line-height:1;transform:rotate(calc(var(--section-progress,.5)*90deg))}.spark-one{right:8px;top:32px}.spark-two{left:14px;bottom:40px;font-size:30px;color:#bbd9ff}
/* Aqua Flash — the boat and its foam share a track, with water flowing behind. */
.aqua-art{background:radial-gradient(ellipse at 80% 5%,#5ee5e2,transparent 65%),linear-gradient(145deg,#12a6b7,#08758f)}
.aqua-water{position:absolute;inset:-15%;width:130%;height:130%;opacity:.65}
.aqua-current{stroke:#b6ffff;stroke-width:2;opacity:.45;transform:translate3d(calc((var(--section-progress,.5) - .5)*-70px),calc((var(--section-progress,.5) - .5)*40px),0)}
.aqua-logo{position:absolute;top:38px;left:51px;width:198px;border-radius:24%;overflow:hidden;box-shadow:0 17px 28px #00445850,0 0 0 1px #d3ffff80;transform:translate3d(0,var(--parallax-y,0px),15px) rotate(calc(-8deg + var(--section-progress,.5)*14deg))}
.aqua-logo img{width:100%;aspect-ratio:1}.aqua-race{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;transform:translateZ(30px)}
.aqua-boat-track{transform:translate3d(calc((var(--section-progress,.5) - .5)*180px),calc((var(--section-progress,.5) - .5)*-65px),0)}
.aqua-speedboat{filter:drop-shadow(0 7px 5px #00405255)}.aqua-wake{transform-origin:370px 442px;transform:scaleX(calc(.75 + var(--section-progress,.5)*.5))}
.wake-haze{stroke:#caffff;stroke-width:33;opacity:.17}.wake-edge{stroke:#ecffff;stroke-width:3;opacity:.7}.wake-foam{stroke:#fff;stroke-width:10;stroke-dasharray:2 14 7 12;stroke-dashoffset:calc(var(--section-progress,.5)*-520px);opacity:.9}.wake-foam-second{stroke-width:6;stroke-dasharray:1 11 5 15;stroke-dashoffset:calc(var(--section-progress,.5)*-670px);opacity:.75}.wake-spray{stroke:#fff;stroke-width:3;opacity:calc(.5 + var(--section-focus,0)*.5)}
/* Jump Letters — a small arrangement of tactile letter tiles. */
.game-art{background:#cbdfe9}.letter-grid{position:absolute;inset:-20%;background-image:linear-gradient(#61889b22 1px,transparent 1px),linear-gradient(90deg,#61889b22 1px,transparent 1px);background-size:36px 36px;transform:rotate(calc(-12deg + var(--section-progress,.5)*12deg))}
.jump-logo{position:absolute;inset:55px;width:190px;filter:drop-shadow(8px 18px 9px #17435e38);transform:translate3d(0,var(--parallax-y,0px),20px) rotate(calc(-10deg + var(--section-progress,.5)*16deg))}
.letter{position:absolute;display:grid;place-items:center;width:56px;height:56px;border-radius:12px;font-size:31px;font-weight:900;box-shadow:0 5px 0 #193b3329;transform:translate3d(0,var(--parallax-y,0px),30px) rotate(calc(-15deg + var(--section-progress,.5)*18deg))}.letter-u{left:10px;top:34px;background:#f3bf65}.letter-m{right:12px;top:58px;background:#eef2cf;rotate:20deg}.letter-p{left:25px;bottom:42px;background:#ed876b;rotate:12deg}
/* Film and book covers round out the gallery. */
.youtube-art{background:#e98c70}.channel-orbit{position:absolute;width:500px;height:220px;border:1px solid #95452d60;border-radius:50%;transform:rotate(calc(-35deg + var(--section-progress,.5)*25deg))}.orbit-two{transform:rotate(calc(50deg - var(--section-progress,.5)*30deg));border-color:#fff6}
.channel-photo{position:absolute;inset:47px;width:206px;height:206px;overflow:hidden;border-radius:50%;box-shadow:10px 13px 0 #9c472731;transform:translate3d(0,var(--parallax-y,0px),20px) rotate(calc(-5deg + var(--section-progress,.5)*10deg))}.channel-photo img{width:100%;height:100%;object-fit:cover}
.channel-play{position:absolute;bottom:40px;right:20px;width:62px;height:62px;display:grid;place-items:center;border-radius:50%;background:#fff7e9;box-shadow:0 7px 12px #96402533;font-size:25px;transform:translate3d(0,calc((var(--section-progress,.5) - .5)*-20px),35px)}.channel-star{position:absolute;right:20px;top:22px;font-size:52px;color:#fff6dc;line-height:1;transform:rotate(calc(var(--section-progress,.5)*100deg))}
.book-art{background:#254e42}.book-sun{position:absolute;top:-80px;right:10%;width:280px;height:280px;border:1px solid #becca965;border-radius:50%;box-shadow:0 0 0 22px #254e42,0 0 0 23px #becca965,0 0 0 46px #254e42,0 0 0 47px #becca944;transform:translate3d(calc((var(--section-progress,.5) - .5)*40px),0,0) scale(calc(.85 + var(--section-focus,0)*.15))}
.book-cover{position:absolute;width:270px;left:15px;top:58px;padding:10px;background:#fff8e8;box-shadow:10px 16px 0 #0b2c2280;transform:translate3d(0,var(--parallax-y,0px),20px) rotate(calc(-9deg + var(--section-progress,.5)*12deg))}.book-cover img{width:100%}
/* A short closing, with four direct places to connect. */
.connect{padding-block:24px 34px}.connect-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}.connect h2{font-size:56px}.back-top{width:50px;height:50px;display:grid;place-items:center;border:1px solid #aab9a9;border-radius:50%;font-size:30px}.back-top:hover{color:white;background:var(--ink)}
.social-links{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.social-links a{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:56px;border-top:1px solid var(--line);font-size:22px;font-weight:700}.social-links a:hover{color:var(--accent)}
.site-footer{display:flex;justify-content:space-between;align-items:center;padding-block:18px;border-top:1px solid var(--line)}.site-footer p{font-size:16px;color:#506458}
/* Content stays available without scripts. Reveals happen once; focus reveals immediately. */
.reveal{opacity:1;translate:0 0}.motion-ready .reveal{transition:opacity .6s var(--ease),translate .7s var(--ease),border-color .3s,box-shadow .3s}.motion-ready .reveal.pending{opacity:0;translate:0 20px}
html[data-motion=off]{scroll-behavior:auto}html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after{animation:none!important;transition:none!important}html[data-motion=off] .reveal{opacity:1;translate:0 0}
@media(min-width:1500px){.site-header{padding-inline:calc((100% - 1280px)/2)}}
@media(max-width:1150px){.hero-scene{grid-template-columns:minmax(0,1fr) 320px minmax(0,1fr);gap:32px}.hero-name h1{font-size:70px}.hero-note>p{font-size:34px}.portrait img{height:410px}.hero-name p{font-size:22px}.explore-link{font-size:18px;gap:10px}.project-links a{padding-inline:11px;gap:7px}.project-copy{padding-inline:22px}.project-copy h3{font-size:34px}}
@media(max-width:950px){.hero-scene{grid-template-columns:minmax(0,1fr) 280px minmax(0,1fr);gap:22px}.hero-name h1{font-size:clamp(43px,5.6vw,54px)}.hero-note>p{font-size:26px}.portrait img{height:390px}.portrait figcaption{font-size:17px;left:20px}.portrait-star{font-size:60px;right:-20px}.hero-name p{font-size:20px}.explore-link{flex-wrap:wrap;max-width:150px;margin-top:16px}.project-copy h3{font-size:31px}.project-copy>p{font-size:19px;min-height:54px}.project-art{height:260px}.art-stage{scale:.92}.project-links{gap:8px}.project-links a{font-size:17px;padding:9px 11px}.project-links .icon{font-size:15px}.projects-heading h2{font-size:38px}.project-collection{gap:20px}}
@media(max-width:760px){
 .page-width{width:90%}.site-header{min-height:68px;gap:16px}.site-header nav{gap:20px;font-size:17px}.motion-toggle{font-size:15px;padding-inline:12px}.wordmark{font-size:34px}.wordmark span{font-size:23px}
 .hero{padding-block:25px 32px}.hero-scene{grid-template-columns:1fr;gap:18px;text-align:center}.hero-portrait{grid-row:1;width:290px;margin:auto}.portrait img{height:330px;object-position:center 34%}.portrait{border-radius:140px 140px 24px 24px}.portrait figcaption{text-align:left;font-size:17px;bottom:18px;left:22px}.portrait-halo{inset:23px -17px -9px}.portrait-star{top:6px;right:-20px;font-size:58px}
 .hero-name p{display:none}.hero-name h1{font-size:clamp(46px,8.5vw,64px)}.hero-name h1 br{display:none}.hero-name h1 br::after{content:' '}.hero-name h1{word-spacing:-.04em}.hero-note>p{font-size:25px;font-weight:400;line-height:1.25;letter-spacing:-.02em}.hero-note>p br{display:none}.hero-note>p em{font-family:inherit;font-style:normal;font-size:1em;letter-spacing:inherit}.hero-note{margin-top:-8px}.explore-link{margin-top:12px;max-width:none;font-size:18px;gap:12px}.explore-link>span{width:38px;height:38px}
 .projects-heading{padding-block:18px 22px}.projects-heading h2{font-size:34px}.projects-heading>span{font-size:27px}.project-collection{grid-template-columns:1fr;gap:20px}.project{border-radius:20px}.project-art{height:240px}.art-stage{scale:.84}.project-copy{padding:20px 22px 22px}.project-copy h3{font-size:34px}.project-copy>p{font-size:20px;min-height:0;margin-top:7px}.project-links{margin-top:16px;gap:8px}.project-links a{font-size:18px;gap:8px;padding:9px 12px;min-height:46px}.project-links .icon{font-size:16px}
 .connect{padding-block:18px 24px}.connect h2{font-size:46px}.connect-heading{margin-bottom:16px}.social-links{grid-template-columns:1fr 1fr;gap:0 24px}.social-links a{font-size:20px;min-height:56px}.back-top{width:46px;height:46px}.site-footer p{font-size:15px}
}
@media(min-width:500px) and (max-width:760px){.hero-portrait{width:330px}.portrait img{height:350px}.project-art{height:260px}.art-stage{scale:.93}.project-links a{padding-inline:18px}}
@media(max-width:430px){.site-header{gap:12px;padding-inline:5%}.site-header nav{gap:15px;font-size:16px}.site-header nav .icon{display:none}.motion-toggle{font-size:14px;padding-inline:10px}.wordmark{font-size:32px}.wordmark span{font-size:21px;margin-left:5px}.hero-portrait{width:270px}.portrait img{height:315px}.hero-name h1{font-size:48px}.projects-heading h2{font-size:30px}.projects-heading>span{font-size:25px}.project-copy{padding:18px}.project-copy h3{font-size:32px}.project-copy>p{font-size:19px}.project-links{column-gap:7px;row-gap:9px}.project-links a{font-size:17px;padding:9px 10px;gap:7px}.project-links .icon{display:none}.project-art{height:224px}.art-stage{scale:.79}.connect h2{font-size:42px}}
@media(max-width:359px){.site-header{gap:8px}.site-header nav{gap:12px;font-size:15px}.motion-toggle{font-size:13px;padding-inline:8px}.wordmark{font-size:29px}.wordmark span{font-size:19px}.hero-portrait{width:248px}.portrait img{height:295px}.hero-name h1{font-size:43px}.hero-note>p{font-size:22px}.projects-heading h2{font-size:27px}.projects-heading>span{display:none}.project-copy h3{font-size:30px}.project-links{gap:7px}.project-links a{font-size:16px;padding-inline:8px}.project-copy{padding:16px}.project-copy>p{font-size:18px}.project-art{height:210px}.art-stage{scale:.74}.connect h2{font-size:38px}.social-links a{font-size:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.motion-ready .reveal.pending{opacity:1;translate:0 0}.art-stage{transform:none}[data-parallax]{--parallax-y:0px!important}}
/* Narrow screens keep the platform choices on a single, legible row. */
.motion-toggle{white-space:nowrap;flex-shrink:0}
@media(max-width:760px){.portrait-halo{inset:28px -8px 0;transform:rotate(calc(-7deg + var(--hero-progress,0)*14deg))}.project-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:8px}.project-links a{font-size:18px;min-width:0;min-height:48px;padding:10px 6px;text-align:center;line-height:1.25}.project-links .icon{display:none}.project-links a:only-child{grid-column:1/-1;justify-self:start;padding-inline:15px}}
@media(max-width:359px){.project-links{gap:6px}.project-links a{font-size:17px}.site-header nav{gap:10px}}