/* A quiet drawing surface, with one liquid reading meter at the page edge. */
body{isolation:isolate}
.ambient-background{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.ambient-scene{position:absolute;inset:-110px;will-change:transform}
.ambient-grid{position:absolute;inset:0;background-image:linear-gradient(#bfbebe26 1px,transparent 1px),linear-gradient(90deg,#bfbebe26 1px,transparent 1px);background-size:96px 96px;mask-image:linear-gradient(115deg,#0008,transparent 42%,transparent 65%,#0006)}
.ambient-orbit{--drift-x:84px;--drift-y:60px;position:absolute;aspect-ratio:1;will-change:transform}
.ambient-orbit span{position:absolute;inset:0;border:1px solid #bfbebe75;border-radius:50%}
.ambient-orbit span:nth-child(2){inset:48px}.ambient-orbit span:nth-child(3){inset:96px}
.ambient-orbit-one{width:min(80vw,1000px);left:-40%;top:15%;animation:ambient-float 14s ease-in-out -4s infinite alternate}
.ambient-orbit-two{width:min(65vw,780px);right:-30%;bottom:-22%;animation:ambient-float 18s ease-in-out -9s infinite alternate-reverse}
@keyframes ambient-float{from{transform:translate3d(calc(var(--drift-x) * -.5),calc(var(--drift-y) * -.5),0) scale(.97)}to{transform:translate3d(var(--drift-x),var(--drift-y),0) scale(1.04)}}
.hero-sphere{animation:sphere-drift 18s ease-in-out -5s infinite alternate;will-change:transform}
.hero-geometry .orbit{animation:hero-orbit-drift 16s ease-in-out -3s infinite alternate;will-change:transform}
.hero-geometry .orbit-two{animation-duration:20s;animation-delay:-8s}
.hero-geometry .orbit-three{animation-duration:24s;animation-delay:-12s}
@keyframes sphere-drift{from{transform:translate3d(-12px,8px,0) rotate(-18deg) scale(.98)}to{transform:translate3d(18px,-16px,0) rotate(22deg) scale(1.025)}}
@keyframes hero-orbit-drift{from{transform:translate3d(-12px,10px,0) scale(.98)}to{transform:translate3d(16px,-14px,0) scale(1.025)}}
.ambient-paused :is(.ambient-orbit,.hero-sphere,.hero-geometry .orbit),.intro-active :is(.ambient-orbit,.hero-sphere,.hero-geometry .orbit){animation-play-state:paused}
.reading-progress[hidden]{display:none}
.reading-progress{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:max(28px,env(safe-area-inset-bottom));z-index:8;display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none;color:var(--color-ink)}
.reading-progress-end{font-size:.875rem;line-height:1}
.slosh-gauge{--sg-w:52px;--sg-h:116px;position:relative;width:var(--sg-w);height:var(--sg-h);border:1px solid #b4b3af;border-radius:12px;overflow:hidden;isolation:isolate;background:#d5d4cf;font-size:.75rem;font-weight:400;font-variant-numeric:tabular-nums;line-height:1;user-select:none}
.slosh-gauge__value{position:absolute;inset:0;display:grid;place-items:center;color:var(--color-ink)}
.slosh-gauge__liquid{position:absolute;inset:0;background:var(--color-ink);clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%)}
.slosh-gauge__liquid .slosh-gauge__value{color:var(--color-parchment)}
.slosh-gauge__ticks{position:absolute;right:0;bottom:0;width:18%;height:100%;background-image:linear-gradient(to top,#888782 0 1px,transparent 1px);background-size:100% 25%;background-repeat:repeat-y;background-position:bottom}
.intro-active .reading-progress,.intro-revealing .reading-progress{visibility:hidden}
.scroll-indicator{display:none}
/* Extra breathing room is held inside the composition, not filled with new copy. */
main .wrap{width:calc(100% - 192px);max-width:1320px}
.section{padding-block:clamp(120px,15vh,180px)}
.about{min-height:88svh;display:flex;align-items:center}
.about-grid{gap:clamp(46px,8vw,119px)}
.about-copy{padding-top:30px}
.section-heading{margin-bottom:65px}
.work-grid{gap:56px 38px}
.work{padding:38px}
.work-art{height:360px}.art-one{height:470px}
.skill-list{margin-top:76px;gap:46px}
.skills{min-height:82svh}
.contact{padding-top:119px}
.contact-grid{margin-bottom:119px}
@media(min-width:1600px){.reading-progress{right:38px;bottom:38px}}
@media(max-width:1050px){main .wrap{width:calc(100% - 146px);margin-left:38px;margin-right:108px}.reading-progress{right:24px}.about-grid{gap:38px}.work{padding:25px}.work-art{height:320px}.art-one{height:410px}.skill-list{gap:26px}.skill-list h3{font-size:clamp(1.25rem,2.8vw,1.7rem)}}
@media(max-width:700px){
  main .wrap{width:calc(100% - 86px);margin-left:19px;margin-right:67px}
  .reading-progress{right:max(10px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));gap:9px}
  .slosh-gauge{--sg-w:36px;--sg-h:82px;border-radius:9px;font-size:.6875rem}
  .ambient-grid{background-size:72px 72px;opacity:.7}
  .ambient-orbit-one{width:115vw;left:-58%;top:26%}.ambient-orbit-two{width:105vw;right:-60%;bottom:0}
  .ambient-orbit span:nth-child(2){inset:30px}.ambient-orbit span:nth-child(3){inset:60px}
  .hero h1{font-size:clamp(2.3rem,11vw,3.4rem)}
  .hero-copy .hero-ja{font-size:1rem}
  .hero-inner{min-height:760px}
  .hero-geometry{right:-12vw}
  .section{padding-block:100px}
  .about{min-height:auto}.about-grid{gap:60px}.about-copy{padding-top:0}
  .about h2,#skills-title{font-size:clamp(1.9rem,8.7vw,2.875rem)}
  .about-copy .large-copy{font-size:clamp(1.125rem,6vw,1.5rem)}
  .about-facts>div{grid-template-columns:75px 1fr;gap:12px}.about-facts p{overflow-wrap:anywhere}
  .section-heading{margin-bottom:38px}
  #works-title,.contact h2{font-size:clamp(2rem,9.5vw,4rem)}
  .work-grid{gap:40px}.work{padding:19px}.work-meta{flex-direction:column;gap:14px}.work .view-label{max-width:none}
  .work-art,.art-one{height:auto;min-height:310px}
  .mini-site{width:100%}.mini-nav{padding:12px;flex-wrap:wrap}.mini-body{padding:15px}.mini-body strong{font-size:clamp(1.7rem,8.5vw,2.7rem)}
  .form-design{width:100%;padding:20px}.form-design>strong{font-size:clamp(2rem,10vw,3.4rem)}.form-head>span{display:none}
  .focus-ui{width:100%;grid-template-columns:27% 73%}.focus-sidebar{padding:15px 4px;font-size:.625rem}.focus-sidebar>span{padding:4px}.focus-main{padding:19px 10px;min-width:0}.focus-date{font-size:.5625rem;overflow-wrap:anywhere}.focus-main h4{font-size:1.15rem}.focus-stat{padding:10px 0}.focus-task{font-size:.625rem;gap:5px}
  .skill-list{margin-top:46px;gap:36px}.skill-list article{grid-template-columns:24px 1fr;gap:12px}.skill-list h3{font-size:clamp(1.15rem,6vw,1.6rem)}
  .skills{min-height:auto}.contact{padding-top:70px}.contact-grid{margin-bottom:70px;gap:42px}
}
/* Keep the requested drift visible, with a slower, smaller motion range. */
@media(prefers-reduced-motion:reduce){.ambient-orbit{--drift-x:44px;--drift-y:32px;animation-duration:26s}.hero-sphere{animation-name:sphere-drift-soft;animation-duration:28s}.hero-geometry .orbit{animation-name:hero-orbit-drift-soft;animation-duration:28s}.ambient-scene{will-change:auto}}
@keyframes sphere-drift-soft{from{transform:translate3d(-6px,4px,0) rotate(-10deg)}to{transform:translate3d(10px,-8px,0) rotate(12deg)}}
@keyframes hero-orbit-drift-soft{from{transform:translate3d(-6px,5px,0) scale(.99)}to{transform:translate3d(8px,-7px,0) scale(1.01)}}
@media print{.ambient-background,.reading-progress{display:none}main .wrap{width:100%;margin:0}.section{min-height:0;padding-block:30px}}