:root{--paper:#f8f7f3;--ink:#282521;--muted:#716b62;--bar:#c6bdb0;--edge:clamp(22px,4vw,76px);--serif:'Bodoni Moda',Didot,'Times New Roman',serif;--sans:'Work Sans',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;font-weight:400;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ink);outline-offset:7px}p,h1,h2,ul{margin:0}h2{font-size:inherit;font-weight:400}::selection{background:#ded1bd;color:#282521}.skip-link{position:fixed;top:10px;left:var(--edge);background:var(--ink);color:var(--paper);padding:12px;z-index:20;transform:translateY(-160%)}.skip-link:focus{transform:none}.site-header{position:absolute;top:0;left:0;right:0;padding:36px var(--edge);z-index:5}.desktop-nav{display:flex;align-items:flex-start;justify-content:space-between;font-size:15px;line-height:1.1}.desktop-nav a:not(.brand){position:relative}.desktop-nav a:not(.brand)::after{content:'';position:absolute;left:0;bottom:-6px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s}.desktop-nav a:hover::after{transform:scaleX(1)}.brand{line-height:.95;letter-spacing:-.04em}.mobile-header,.mobile-navigation{display:none}.hero{position:relative;height:100svh;min-height:540px;isolation:isolate;z-index:1}.hero-wordmark{position:absolute;left:var(--edge);right:var(--edge);bottom:.02em;font-size:31vw;line-height:1}.hero h1{font-family:var(--serif);font-size:1em;font-weight:400;font-style:italic;line-height:.74;letter-spacing:-.075em;text-align:center;padding-right:.08em;transform:translateY(.04em)}.section-index{font-size:14px;letter-spacing:-.03em}.hero-index{position:absolute;right:1.5%;top:1%;line-height:1}.about{min-height:100svh;display:flex;flex-direction:column;padding:clamp(110px,13vw,220px) var(--edge) 42px;position:relative}.introduction{max-width:80%;font-size:clamp(24px,2.9vw,46px);line-height:1.35;letter-spacing:-.045em}.first-sentence{display:block;text-indent:15%}.about-composition{display:grid;grid-template-columns:1fr 1fr .85fr;align-items:center;gap:clamp(32px,5vw,96px);margin-top:clamp(60px,8vw,140px);margin-bottom:72px}.image-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}.gradient{position:relative;overflow:hidden;border-radius:5px;isolation:isolate}.gradient::after{content:'';position:absolute;inset:0;z-index:1;opacity:.23;mix-blend-mode:multiply;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23888' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");background-size:160px 160px}.image-unit .gradient{height:clamp(110px,11vw,180px)}.gradient-one{background:radial-gradient(ellipse at 15% 90%,#c9543a 0%,transparent 64%),radial-gradient(ellipse at 80% 15%,#edd8b8 0%,transparent 65%),#d7aa9f}.gradient-two{background:radial-gradient(ellipse at 90% 10%,#667f9b 0%,transparent 70%),radial-gradient(ellipse at 10% 90%,#ded3bc 0%,transparent 75%),#b8b7bd}.gradient-three{background:radial-gradient(ellipse at 20% 20%,#bf783f 0%,transparent 67%),radial-gradient(ellipse at 90% 90%,#dbb0a7 0%,transparent 70%),#d5bca6}.visual-bar{display:block;height:3px;background:var(--bar);border-radius:999px}.image-unit .visual-bar{margin-top:10px}.biography{font-size:clamp(14px,1.05vw,17px);line-height:1.5;letter-spacing:-.025em;max-width:300px}.biography h2{margin-bottom:16px}.about-note{font-size:12px;line-height:1.4;letter-spacing:-.025em;align-self:flex-end;margin-top:auto}.mobile-gallery{display:none}.featured-project{height:100svh;min-height:620px;padding:34px var(--edge);scroll-margin-top:0}.project-panel{display:block;height:100%;width:100%;transition:filter .4s}.gradient-four{background:radial-gradient(ellipse at 5% 0%,#e7c6b0 0%,transparent 54%),radial-gradient(ellipse at 70% 10%,#b3aabd 0%,transparent 55%),radial-gradient(ellipse at 40% 100%,#a8b5a0 0%,transparent 60%),radial-gradient(ellipse at 100% 90%,#a6664b 0%,transparent 55%),#d9c5b5}.project-panel::after{opacity:.26}.project-panel:hover{filter:saturate(1.12)}.project-caption{position:absolute;z-index:2;left:26px;right:26px;bottom:26px;display:flex;justify-content:center;align-items:center;font-size:16px}.project-caption h2{font-weight:450}.project-arrow{position:absolute;right:0;font-size:44px;line-height:1;transition:transform .3s}.project-panel:hover .project-arrow{transform:translate(4px,-4px)}.hku-section{min-height:35svh;padding:80px var(--edge) 90px;display:flex;align-items:flex-start;gap:28px}.hku-section h2{white-space:nowrap;font-size:18px;letter-spacing:-.04em}.hku-section .visual-bar{margin-top:10px;flex:1}.hku-section p{font-size:13px;line-height:1.5;max-width:180px}footer{padding:25px var(--edge);display:flex;justify-content:space-between;gap:24px;color:var(--muted);font-size:11px;line-height:1.5}dialog{border:0;background:var(--paper);color:var(--ink);padding:64px;width:min(600px,calc(100% - 32px));max-height:90svh;border-radius:5px}dialog::backdrop{background:#28252170;backdrop-filter:blur(5px)}.dialog-close{position:absolute;right:24px;top:24px;font-size:13px}dialog h2{font:400 clamp(46px,7vw,78px)/1 var(--serif);letter-spacing:-.045em;margin:35px 0}dialog p{font-size:16px;line-height:1.6;max-width:360px}.coming-soon{margin-top:30px;color:var(--muted);font-size:12px!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1800px){.hero-wordmark{font-size:560px}.hero-index{right:5%}.about{padding-top:220px}}
@media(max-width:900px) and (min-width:701px){.about-composition{gap:28px;grid-template-columns:1fr 1fr .8fr}.biography{font-size:14px}.introduction{max-width:88%}}
@media(max-width:700px){:root{--edge:22px}.site-header{padding-top:24px}.desktop-nav{display:none}.mobile-header{display:flex;justify-content:space-between;align-items:flex-start;font-size:14px}.menu-toggle{padding:0;display:flex;gap:16px}.menu-toggle span{font-size:18px;line-height:.85;transition:transform .2s}.menu-toggle[aria-expanded=true] span{transform:rotate(45deg)}.mobile-navigation:not([hidden]){display:flex;position:fixed;z-index:4;top:76px;left:var(--edge);right:var(--edge);flex-direction:column;background:var(--paper);padding:26px 24px;border:1px solid #d9d3c8;box-shadow:0 18px 35px #28252112}.mobile-navigation a{padding:16px 0;border-bottom:1px solid #ded9d0;font-family:var(--serif);font-size:30px;display:flex;gap:24px;align-items:baseline}.mobile-navigation a:last-child{border:0}.mobile-navigation a span{font-family:var(--sans);font-size:11px}.hero{min-height:440px}.hero-wordmark{font-size:32vw;bottom:.02em;left:12px;right:12px}.hero h1{line-height:.74;letter-spacing:-.075em}.hero-index{top:-12%;right:2%;font-size:12px}.about{padding-top:110px;padding-bottom:38px;min-height:100svh}.introduction{font-size:clamp(19px,5.1vw,29px);max-width:96%;line-height:1.4;letter-spacing:-.045em}.first-sentence{text-indent:20%}.about-composition{display:block;margin-top:65px;margin-bottom:65px}.desktop-images{display:none}.biography{max-width:290px;font-size:14px;line-height:1.5}.biography h2{margin-bottom:14px}.mobile-gallery{display:block;margin-top:34px;margin-right:calc(-1 * var(--edge))}.image-scroller{list-style:none;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--edge) 12px 0;scrollbar-width:none;overscroll-behavior-x:contain}.image-scroller::-webkit-scrollbar{display:none}.image-scroller li{flex:0 0 34%;scroll-snap-align:start}.image-scroller li.wide{flex-basis:68%}.image-scroller .gradient{height:146px}.image-scroller .visual-bar{height:3px;margin-top:8px}.gallery-controls{display:flex;justify-content:space-between;align-items:center;padding-right:var(--edge);color:var(--muted)}.swipe-hint{font-size:11px}.gallery-controls button{width:44px;height:44px;padding:0;font-size:20px}.about-note{font-size:11px;line-height:1.4}.featured-project{height:100svh;min-height:500px;padding:25px var(--edge)}.project-caption{left:18px;right:18px;bottom:22px;font-size:14px}.project-arrow{font-size:32px}.hku-section{min-height:30svh;padding-top:55px;padding-bottom:65px;display:grid;grid-template-columns:auto 1fr;gap:18px}.hku-section h2{font-size:16px}.hku-section .visual-bar{margin-top:9px}.hku-section p{grid-column:1 / -1;font-size:12px;max-width:none}footer{font-size:10px;align-items:flex-end}dialog{padding:55px 28px 35px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* Soft, freely drifting ink forms. Grain stays still, like printed paper. */
.hero-wordmark{left:2.5vw;right:2.5vw;font-size:46vw;pointer-events:none}
.hero h1{letter-spacing:-.075em}
.hero-index{right:2%;top:3%}
.hero-art{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;mask-image:linear-gradient(to bottom,transparent 1%,#000 20%,#000 80%,transparent 100%)}
.hero-field{position:absolute;inset:-10%;transform:translate(var(--pointer-x,0px),var(--pointer-y,0px));transition:transform 1.8s cubic-bezier(.18,.65,.3,1)}
.hero-field i{position:absolute;display:block;filter:blur(clamp(28px,5vw,85px));border-radius:47% 53% 62% 38% / 52% 36% 64% 48%;will-change:transform;opacity:.7}
.hero-field i:nth-child(1){width:68%;height:56%;left:-12%;top:15%;background:radial-gradient(ellipse,#9daec0 0%,#b8becb 34%,transparent 72%);animation:ink-a 27s ease-in-out infinite alternate}
.hero-field i:nth-child(2){width:66%;height:70%;right:-8%;top:9%;background:radial-gradient(ellipse,#d1a69c 0%,#dfc7b5 39%,transparent 72%);animation:ink-b 33s ease-in-out infinite alternate}
.hero-field i:nth-child(3){width:62%;height:65%;left:23%;top:19%;background:radial-gradient(ellipse,#b2bda3 0%,#d3d3b8 35%,transparent 70%);animation:ink-c 24s ease-in-out infinite alternate}
.hero-field i:nth-child(4){width:45%;height:57%;left:14%;top:7%;background:radial-gradient(ellipse,#c3afc2 0%,#d9c7cb 34%,transparent 72%);opacity:.5;animation:ink-d 31s ease-in-out infinite alternate}
.hero-art::after{content:'';position:absolute;inset:0;opacity:.32;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23888' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");background-size:145px 145px}

.motion-paused .hero-field i,.motion-offscreen .hero-field i{animation-play-state:paused}
@keyframes ink-a{0%{transform:translate(-4%,0) rotate(-15deg) scale(.9,1.1)}50%{transform:translate(28%,18%) rotate(18deg) scale(1.15,.85)}100%{transform:translate(55%,-12%) rotate(40deg) scale(.9,1.2)}}
@keyframes ink-b{0%{transform:translate(5%,8%) rotate(20deg) scale(.85,1)}50%{transform:translate(-24%,-8%) rotate(-18deg) scale(1.1,.8)}100%{transform:translate(-48%,22%) rotate(-35deg) scale(.9,1.2)}}
@keyframes ink-c{0%{transform:translate(0,20%) rotate(0) scale(1,.8)}50%{transform:translate(-28%,-15%) rotate(35deg) scale(.8,1.15)}100%{transform:translate(32%,5%) rotate(-15deg) scale(1.2,.9)}}
@keyframes ink-d{0%{transform:translate(0,-10%) rotate(30deg) scale(.75,1.3)}100%{transform:translate(75%,35%) rotate(-40deg) scale(1.25,.75)}}
@media(max-width:700px){.hero-wordmark{font-size:46vw;left:2.5vw;right:2.5vw}.hero-index{top:-8%;right:3%}.hero-art{mask-image:linear-gradient(to bottom,transparent 0%,#000 24%,#000 82%,transparent 100%)}.hero-field{inset:-8% -45%}.hero-field i{filter:blur(36px)}}
@media(prefers-reduced-motion:reduce){.hero-field{transition:none}.hero-field i{animation:none!important;will-change:auto}}

/* Persistent navigation: white difference-blended type inverts the page beneath. */
html{scroll-padding-top:0}
.site-header{position:fixed;color:#fff;mix-blend-mode:difference;pointer-events:none;z-index:10}
.site-header a,.site-header button{pointer-events:auto}
.about,.hku-section{scroll-margin-top:88px}
.featured-project{height:100svh;min-height:0;padding:var(--edge);scroll-margin-top:0}
@media(max-width:700px){
  .mobile-header{align-items:flex-start}
  .menu-toggle{min-height:44px;align-items:flex-start}
  .mobile-navigation:not([hidden]){top:80px;left:var(--edge);right:var(--edge);padding:12px 20px;border:1px solid #ded9d0;border-radius:3px;box-shadow:none;z-index:9}
  .mobile-navigation a{font-family:var(--sans);font-size:14px;line-height:1.3;gap:12px;padding:15px 0;letter-spacing:-.025em;border-bottom:1px solid #e8e3db}
  .mobile-navigation a span{font-size:12px;color:var(--muted);min-width:28px}
  .featured-project{height:100svh;min-height:0;padding:var(--edge)}
}

/* Transparent timer aperture reveals the panel's original gradient underneath. */
.phone-float{position:absolute;left:50%;top:48%;width:260px;aspect-ratio:320 / 660;transform:translate(-50%,-50%);z-index:2;pointer-events:none;will-change:transform}
.phone-cutout{width:100%;height:100%;display:block;overflow:visible}
.phone-paper{fill:var(--paper)}
.phone-clock{font-family:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold",system-ui,sans-serif;font-size:76px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-3px}
.phone-clock-light{fill:var(--paper)}
.phone-clock-dark{fill:#80243f}
.project-panel::after{z-index:1}
.project-caption{z-index:3}
@media(prefers-reduced-motion:reduce){.phone-float{will-change:auto}}

/* Shared numbering: compact slash, one sans-serif treatment throughout. */
.section-index,.biography h2,.project-caption h2,.hku-section h2{font-family:var(--sans);font-size:14px;font-weight:400;line-height:1.4;letter-spacing:-.025em}
.mobile-navigation a span{font-family:var(--sans);font-size:14px;line-height:1.4;letter-spacing:-.025em;color:inherit}

/* Native page transitions blend the cream homepage into FioTime's wine. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:page-away .45s ease both}
::view-transition-new(root){animation:page-arrive .65s cubic-bezier(.22,.61,.36,1) both}
@keyframes page-away{to{opacity:0;transform:translateY(-10px)}}
@keyframes page-arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.page-transition-cover{position:fixed;inset:0;z-index:1000;background:var(--transition-color,var(--paper));pointer-events:none;opacity:0;transition:opacity .4s ease}
.page-transition-cover.is-visible{opacity:1}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none!important}.page-transition-cover{transition:none}}

/* Personal photographs, softly graded to sit within the existing color fields. */
.about .photo-block{background:none}
.about .photo-block img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(.94)}
.about .photo-block::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(130deg,#b5bfca20,#e3c4bb08 48%,#c6cdb522);mix-blend-mode:soft-light}
.about .photo-block::after{opacity:.1}
.about .photo-rainbow img{object-position:29% 55%}
.about .photo-polaroid img{object-position:70% 66%}
.about .photo-sunset img{object-position:48% 63%}

.site-header .brand{text-align:right}
.hero h1.word-flip{position:relative;pointer-events:auto;height:.74em;perspective:1200px;cursor:default}
.word-flip .flip-word{position:absolute;inset:0;display:block;white-space:nowrap;text-align:center}
.word-flip .flip-word-back{font-size:.66em;line-height:1.12;letter-spacing:-.065em}
.word-flip .flip-letter{display:inline-block;transform-origin:50% 55%;backface-visibility:hidden;transition:transform .32s ease,opacity .24s ease;transition-delay:calc(var(--letter-index) * 85ms)}
.word-flip .flip-word-back .flip-letter{opacity:0;transform:rotateX(-90deg);transition-delay:calc(var(--letter-index) * 85ms)}
.word-flip.is-revealed .flip-word-front .flip-letter{opacity:0;transform:rotateX(90deg)}
.word-flip.is-revealed .flip-word-back .flip-letter{opacity:1;transform:rotateX(0deg);transition-delay:calc(var(--letter-index) * 85ms + 150ms)}
.word-flip:not(.is-revealed) .flip-word-front .flip-letter{transition-delay:calc(var(--letter-index) * 85ms + 150ms)}
@media(prefers-reduced-motion:reduce){.word-flip .flip-letter{transition:none!important}.word-flip .flip-word-back .flip-letter,.word-flip.is-revealed .flip-word-front .flip-letter{transform:none}}