#treePage{--t-ink: #2b2b2b;--t-muted: #8a8a8a;--t-line: rgba(43, 43, 43, .1);position:relative;overflow-x:clip;font-weight:300;line-height:1.8}#treePage section,#treePage article{position:relative;z-index:1}#treeHolder{position:absolute;top:0;left:calc(13vw + 600px);right:0;height:100%;z-index:0;pointer-events:none}#treeHolder svg{display:block;width:100%;height:100%}#treeHolder path{fill:none;stroke:#2b2b2b;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s ease}#treeHolder path.in{stroke-dashoffset:0;transition-duration:1.8s;transition-timing-function:cubic-bezier(.4,0,.2,1)}#treeHolder .clipgrow path{stroke-dasharray:none;stroke-dashoffset:0}html.nofx #treeHolder path{transition:none}#treePage .hero{min-height:calc(100vh - 80px);display:flex;align-items:center}#treePage .hero .name{padding-left:13vw}#treePage .eb{font-size:12px;letter-spacing:.34em;font-family:var(--font-mono);color:var(--t-muted)}#treePage .hero .eb{letter-spacing:.32em;margin-bottom:24px}#treePage .hero h1{font-size:clamp(3.5rem,5.6vw,5.25rem);font-weight:300;letter-spacing:.05em;line-height:1.05}#treePage .hero .en{font-size:18px;letter-spacing:.26em;margin-top:14px}#treePage .hero .tag{font-size:13px;letter-spacing:.3em;font-family:var(--font-mono);color:var(--t-muted);margin-top:26px}#treePage .hero .hint{position:absolute;bottom:34px;left:13vw;font-size:12.5px;letter-spacing:.3em;font-family:var(--font-mono);color:var(--t-muted)}#treePage .hero .name{animation:treeNameIn 1.1s cubic-bezier(.4,0,.2,1) .15s both}#treePage .hero .hint{animation:treeHintIn .9s ease .6s both}@keyframes treeNameIn{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes treeHintIn{0%{opacity:0}to{opacity:1}}html.nofx #treePage .hero .name,html.nofx #treePage .hero .hint{animation:none}@media(prefers-reduced-motion:reduce){#treePage .hero .name,#treePage .hero .hint{animation:none}}#treePage .hero+.work{margin-top:120px}#treePage .work+.dirs{margin-top:120px}#treePage .dirs+.roots{margin-top:120px}#treePage .work{min-height:720px;display:flex;align-items:center}#treePage .work .grid{width:100%;max-width:600px;margin-left:13vw}#treePage .work .idx{font-size:13px;color:var(--t-muted);font-family:var(--font-mono);letter-spacing:.25em}#treePage .work h2{font-size:clamp(2.6rem,3.6vw,3.5rem);font-weight:300;letter-spacing:.03em;margin-top:16px}#treePage .work .en{font-size:17px;color:var(--t-muted);letter-spacing:.12em;margin-top:8px}#treePage .work .meta{font-size:14px;color:var(--t-muted);font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase;margin-top:20px}#treePage .work .more{display:inline-block;margin-top:14px;font-size:13.5px;letter-spacing:.28em;color:var(--t-muted);font-family:var(--font-mono);text-decoration:none;transition:color .3s ease}#treePage .work .more:hover,#treePage .work:hover .more{color:var(--t-ink)}#treePage .work .more:after{content:"";position:absolute;inset:0}#treePage .work img{transition:opacity .3s ease}#treePage .work:hover img{opacity:.88}#treePage .work .desc{font-size:17px;color:#5c5c5c;margin-top:18px}#treePage .work figure{width:100%;margin-top:24px}#treePage .work img{display:block;width:100%;height:auto}#treePage .dirs{min-height:480px;display:flex;align-items:center}#treePage .dirs .inner{max-width:560px;margin-left:13vw}#treePage .dirs h2{font-size:36px;font-weight:300;margin-top:12px}#treePage .dirs .grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 36px;margin-top:36px}#treePage .dirs .it h3{font-size:19px;font-weight:400}#treePage .dirs .it p{font-size:16px;color:var(--t-muted);margin-top:6px}#treePage .roots{min-height:640px;display:flex;flex-direction:column;align-items:flex-start;padding:70px 0 0 13vw;max-width:560px}#treePage .roots h2{font-size:36px;font-weight:300;margin-top:12px}#treePage .roots .link{margin-top:22px;font-size:13.5px;letter-spacing:.3em;font-family:var(--font-mono);color:var(--t-ink);text-decoration:none}#treePage .roots .link:hover{opacity:.6}@media(max-width:767px){#treePage .work .grid,#treePage .dirs .inner,#treePage .roots{margin-right:1.5rem}}@media(max-width:1023.98px){#treeHolder{display:none}}html.tall #treePage .hero{min-height:710px!important}
