/* Motion is additive: the site remains readable and usable before JavaScript. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:page-away 240ms ease-in both}
::view-transition-new(root){animation:page-arrive 480ms cubic-bezier(.16,1,.3,1) both}
@keyframes page-away{to{opacity:0;transform:translateY(-14px)}}
@keyframes page-arrive{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.title-line{display:block;overflow:clip;perspective:600px;padding-bottom:4px;margin-bottom:-4px}
.title-glyph{display:inline-block;transform-origin:50% 100%}
.hero{position:relative}
.hero-visual{perspective:1000px}
.hero-orbit{position:absolute;right:-10px;top:-28px;width:calc(100% + 40px);height:calc(100% + 40px);pointer-events:none;z-index:-1;color:#a2b296;opacity:.55;overflow:visible}
.hero-orbit path{stroke-dasharray:1600;stroke-dashoffset:0;fill:none;stroke:currentColor;stroke-width:.65}
.motion-enabled .hero-photo-main{transform:perspective(900px) rotateY(var(--tilt-y,0deg)) rotateX(var(--tilt-x,0deg)) rotate(-3deg) translate3d(var(--photo-x,0px),calc(var(--photo-y,0px) + var(--photo-drift,0px)),0);transform-style:preserve-3d;will-change:transform;box-shadow:12px 24px 42px -27px #314a2b45}
.motion-enabled .hero-photo-small{transform:perspective(900px) rotateY(calc(var(--tilt-y,0deg)*-.65)) rotateX(calc(var(--tilt-x,0deg)*-.65)) rotate(7deg) translate3d(calc(var(--photo-x,0px)*-1.1),calc(var(--photo-y,0px)*-1 + var(--small-drift,0px)),18px);will-change:transform;box-shadow:10px 20px 32px -17px #26382355}
.motion-enabled .hero-photo-main:after{content:'';position:absolute;inset:12px 12px 37px;pointer-events:none;background:radial-gradient(ellipse at var(--shine-x,50%) var(--shine-y,50%),#fff3,transparent 65%);mix-blend-mode:soft-light}
.motion-enabled .hero-star{transform:rotate(var(--star-turn,12deg))}
.scroll-progress{position:fixed;left:0;top:0;right:0;height:2px;background:var(--green);transform:scaleX(var(--page-progress,0));transform-origin:left;z-index:30;pointer-events:none}
.motion-toggle svg{width:17px;height:17px}
.motion-toggle .motion-play{display:none}
.motion-toggle[aria-pressed=false] .motion-play{display:block}
.motion-toggle[aria-pressed=false] .motion-pause{display:none}
.motion-toggle:disabled{opacity:.45}
.view-cursor{position:fixed;left:0;top:0;width:66px;height:66px;border:1px solid #fff9;background:#f8f7ebbf;backdrop-filter:blur(5px);color:var(--green);border-radius:50%;font-size:11px;letter-spacing:2px;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;scale:.65;transition:opacity .18s,scale .3s cubic-bezier(.16,1,.3,1);z-index:40}
.view-cursor.visible{opacity:1;scale:1}
.pointer-gallery .photo-open:hover .photo-hover{opacity:0}
.motion-enabled .collection-visual>span{transition:translate 450ms cubic-bezier(.16,1,.3,1),rotate 450ms cubic-bezier(.16,1,.3,1),filter 450ms;will-change:translate}
.motion-enabled .collection-visual:hover>span,.motion-enabled .collection-visual:focus-visible>span{translate:0 -12px;rotate:4deg;filter:drop-shadow(0 12px 8px #37402612)}
.motion-enabled .project-art{transition:box-shadow 350ms,translate 350ms cubic-bezier(.16,1,.3,1)}
.motion-enabled .project-art:hover,.motion-enabled .project-art:focus-visible{translate:0 -5px;box-shadow:0 14px 28px -18px #1e382a70}
.motion-enabled .article-row .article-arrow{transition:translate 300ms cubic-bezier(.16,1,.3,1)}
.motion-enabled .article-row:hover .article-arrow{translate:5px 0}
.motion-enabled .article-row .article-copy strong{background:linear-gradient(var(--green),var(--green)) no-repeat 0 100%/0 1px;transition:background-size 550ms cubic-bezier(.16,1,.3,1);width:fit-content;padding-bottom:2px}
.motion-enabled .article-row:hover .article-copy strong{background-size:100% 1px}
.motion-enabled .site-nav a:after{transition:scale 350ms cubic-bezier(.16,1,.3,1)}
.motion-enabled .site-nav a:hover:after{scale:1.8}
.motion-enabled .primary-link{transition:box-shadow 300ms,translate 300ms}
.motion-enabled .primary-link:hover{translate:0 -3px;box-shadow:0 11px 18px -12px #243d31a6}
.save-detail{position:relative}
.save-spark{position:absolute;left:50%;top:50%;width:5px;height:5px;background:#8ca678;border-radius:50%;pointer-events:none}
.motion-enabled [data-motion=image]:not(.is-revealed) .photo-open img{clip-path:inset(0 0 100% 0)}
.motion-enabled [data-motion=image].is-revealed .photo-open img{animation:print-reveal 1000ms cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms) both}
.motion-enabled [data-motion=image].is-revealed figcaption{animation:caption-arrive 650ms cubic-bezier(.16,1,.3,1) calc(var(--reveal-delay,0ms) + 180ms) both}
.motion-enabled [data-motion=object]:not(.is-revealed) .collection-visual>span{opacity:0;translate:0 24px;rotate:-7deg}
.motion-enabled [data-motion=object].is-revealed .collection-visual>span{animation:object-place 850ms cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms) backwards}
.motion-enabled [data-motion=timeline]:not(.is-revealed) .timeline-content{opacity:0;translate:20px 0}
.motion-enabled [data-motion=timeline].is-revealed .timeline-content{animation:timeline-arrive 650ms cubic-bezier(.16,1,.3,1) both}
.motion-enabled [data-motion=line]{background:linear-gradient(var(--green),var(--green)) no-repeat 0 0/0 1px;transition:background-size 1s cubic-bezier(.16,1,.3,1)}
.motion-enabled [data-motion=line].is-revealed{background-size:100% 1px}
.timeline-list{position:relative}
.motion-enabled .timeline-list:before{content:'';position:absolute;left:145px;top:15px;bottom:20px;width:2px;background:linear-gradient(#cad6b9,var(--green));transform:scaleY(var(--timeline-progress,0));transform-origin:top;z-index:1;pointer-events:none}
.motion-enabled .timeline-dot:after{z-index:2;transition:box-shadow .45s,background .45s}
.motion-enabled .timeline-entry.is-current .timeline-dot:after{background:#8d9f69;box-shadow:0 0 0 1px #687f55,0 0 0 6px #9cac7d20}
.motion-enabled .timeline-entry.is-current .timeline-year{color:#506b3d}
.motion-enabled dialog[open]{animation:dialog-arrive 450ms cubic-bezier(.16,1,.3,1) both}
.motion-enabled dialog[open]::backdrop{animation:backdrop-arrive 350ms ease-out both}
@keyframes print-reveal{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes caption-arrive{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes object-place{from{opacity:0;translate:0 24px;rotate:-7deg}to{opacity:1;translate:0 0;rotate:0deg}}
@keyframes timeline-arrive{from{opacity:0;translate:20px 0}to{opacity:1;translate:0 0}}
@keyframes dialog-arrive{from{opacity:0;translate:0 18px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
@keyframes backdrop-arrive{from{opacity:0}to{opacity:1}}
@keyframes glyph-unfold{from{opacity:0;transform:translate3d(0,108%,0) rotateX(55deg)}to{opacity:1;transform:translate3d(0,0,0) rotateX(0)}}
@keyframes photo-arrive{from{opacity:0;translate:35px 18px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
@keyframes photo-arrive-mobile{from{opacity:0;translate:0 18px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
@keyframes intro-copy{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes orbit-draw{from{stroke-dashoffset:1600}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:no-preference){
  html:not(.motion-off):not(.intro-complete) .title-glyph{animation:glyph-unfold 1000ms cubic-bezier(.16,1,.3,1) calc(140ms + var(--char,0)*65ms) both}
  html:not(.motion-off):not(.intro-complete) .hero .hello{animation:intro-copy 650ms ease-out 60ms both}
  html:not(.motion-off):not(.intro-complete) .hero-description{animation:intro-copy 750ms ease-out 550ms both}
  html:not(.motion-off):not(.intro-complete) .hero-actions,html:not(.motion-off):not(.intro-complete) .hero-footnote{animation:intro-copy 750ms ease-out 680ms both}
  html:not(.motion-off):not(.intro-complete) .hero-visual{animation:photo-arrive 1200ms cubic-bezier(.16,1,.3,1) 200ms both}
  html:not(.motion-off):not(.intro-complete) .hero-orbit path{animation:orbit-draw 2200ms cubic-bezier(.5,0,.2,1) 250ms backwards}
  html:not(.motion-off) .page-intro h1{animation:glyph-unfold 850ms cubic-bezier(.16,1,.3,1) both}
}
@media(max-width:800px){.motion-enabled .timeline-list:before{left:111px}}
@media(max-width:600px){
  .site-header{gap:8px}.header-actions{gap:3px}.header-actions .icon-button{min-width:30px}
  .view-cursor{display:none}
  html:not(.motion-off):not(.intro-complete) .hero-visual{animation-name:photo-arrive-mobile}
  .motion-enabled .timeline-list:before{left:74px}
  .hero-orbit{width:calc(100% + 15px);right:0;top:-18px}
  .motion-enabled .hero-photo-main{transform:rotate(-3deg) translateY(calc(var(--photo-drift,0px)*.35))}
  .motion-enabled .hero-photo-small{transform:rotate(7deg) translateY(calc(var(--small-drift,0px)*.35))}
  .motion-enabled .hero-photo-main:after{display:none}
}
@media(hover:none),(pointer:coarse){.view-cursor{display:none}.motion-enabled .hero-photo-main:after{display:none}}
.motion-off .view-cursor{display:none}
.motion-off .hero-orbit path{animation:none}
.motion-off [data-motion] .photo-open img{clip-path:none}
html.motion-off::view-transition-old(root),html.motion-off::view-transition-new(root){animation:none}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .view-cursor{display:none}
  .title-glyph,.hero .hello,.hero-description,.hero-actions,.hero-footnote,.hero-visual,.hero-orbit path,.page-intro h1{animation:none!important}
  [data-motion] .photo-open img{clip-path:none!important}
}