/* Entry: one viewport, virtual scroll dives through an ink-dust field. */
html.js,.js body{height:100%;overflow:hidden;overscroll-behavior:none}
.js body{touch-action:none}
#scene{position:fixed;inset:0;z-index:0}
#scene canvas{display:block;width:100%!important;height:100%!important}

/* loader */
.loader{position:fixed;inset:0;z-index:20;background:var(--ground);transition:opacity 1.2s ease,visibility 0s linear 1.2s}
.loader .bar{position:absolute;left:0;top:0;height:1px;width:0;background:var(--ink-2)}
.loader .pct{position:absolute;left:var(--edge);bottom:calc(var(--edge) + 6px);font-weight:300;font-size:clamp(80px,13vw,180px);line-height:.8;letter-spacing:-.04em;color:var(--ink-1);font-variant-numeric:tabular-nums}
.loader .pct::after{content:"%";font-size:.4em;letter-spacing:0;margin-left:.06em;color:var(--ink-4)}
.loaded .loader{opacity:0;visibility:hidden}

/* frame */
.frame .f{position:fixed;z-index:10;color:var(--ink-3);transition:color .6s,opacity 1.6s ease}
.frame .tl{top:var(--edge);left:var(--edge)}
.frame .tc{top:var(--edge);left:50%;transform:translateX(-50%);color:var(--ink-1)}
.frame .tr{top:var(--edge);right:var(--edge);font-variant-numeric:tabular-nums}
.frame .bl{bottom:var(--edge);left:var(--edge)}
.frame .br{bottom:var(--edge);right:var(--edge)}
.frame a.f:hover,.frame a.f:focus-visible{color:var(--ink-0)}
.js .frame .f{opacity:0} .js.loaded .frame .f{opacity:1}

/* chapters */
.js .chapters{position:fixed;inset:0;z-index:5;pointer-events:none}
.ch{position:relative;min-height:100vh}
.js .ch{position:absolute;inset:0;min-height:0;opacity:0;visibility:hidden;filter:blur(12px);
  transition:opacity 1.1s cubic-bezier(.2,.6,.2,1),filter 1.3s cubic-bezier(.2,.6,.2,1),visibility 0s linear 1.3s}
.js .ch.on{opacity:1;visibility:visible;filter:blur(0);transition-delay:.15s,.15s,0s}
.js .ch.on a{pointer-events:auto}

.split{margin:0;font-weight:300;font-size:clamp(64px,10.5vw,168px);line-height:.9;letter-spacing:-.035em;color:var(--ink-0)}
.split .a,.split2 .a{position:absolute;left:var(--edge);top:calc(var(--edge) + 60px)}
.split2 .b{position:absolute;right:var(--edge);bottom:calc(var(--edge) + 52px);text-align:right}
.split{position:absolute;left:var(--edge);right:var(--edge);top:calc(var(--edge) + 60px);display:flex;flex-wrap:wrap;column-gap:.25em}
.split .a,.split .b{position:static}
.cap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;text-align:center;line-height:1.9;color:var(--ink-2);width:min(560px,80vw)}

.big{margin:0;font-weight:300;font-size:clamp(34px,4.6vw,66px);line-height:1.08;letter-spacing:-.02em;color:var(--ink-0)}
.small{margin:0 0 30px;font-size:clamp(13px,1.1vw,15px);line-height:2;color:var(--ink-3)}
.c1{display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--edge) calc(var(--edge) + 70px)}
.c2 .big{position:absolute;left:0;right:0;bottom:calc(var(--edge) + 44px);text-align:center}
.split2{margin:0;font-weight:300;font-size:clamp(30px,4vw,58px);line-height:1.1;letter-spacing:-.02em;color:var(--ink-0)}
.split2 .a{top:calc(var(--edge) + 70px)}

/* index: two branches, Me first; the project is quieter */
.c4{display:flex;flex-direction:column;justify-content:center;padding:0 var(--edge)}
.branches{display:grid;grid-template-columns:1.25fr 1fr;gap:0 6vw;max-width:1100px;margin:0 auto;width:100%;border-top:1px solid var(--line)}
.branches a{display:block;padding:30px 0 6px;transition:opacity .6s}
.branches .t{display:block;margin-top:26px;font-weight:300;letter-spacing:-.025em;color:var(--ink-0);transition:color .6s}
.br-me .t{font-size:clamp(44px,5.6vw,84px);line-height:.95}
.br-work .t{font-size:clamp(30px,3.4vw,48px);line-height:1;color:var(--ink-1)}
.branches .s{display:block;margin-top:20px;font:400 11.5px/1.9 var(--mono);letter-spacing:.06em;color:var(--ink-3)}
.branches:hover a{opacity:.6} .branches a:hover,.branches a:focus-visible{opacity:1;outline:none}
.branches a:focus-visible .t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px}
.reach{max-width:1100px;margin:9vh auto 0;width:100%;font:300 12px/1.8 var(--mono);letter-spacing:.08em;color:var(--ink-3)}
.reach span{color:var(--ink-2);margin-right:16px}

/* chapter dots: tiny hairline ticks, right edge */
.dots{position:fixed;z-index:10;right:var(--edge);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;opacity:0;transition:opacity 1.6s}
.loaded .dots{opacity:1}
.dots button{all:unset;cursor:pointer;width:14px;height:1px;background:var(--ink-5);transition:background .6s,width .6s;margin-left:auto}
.dots button.on{width:28px;background:var(--amber)}
.dots button:focus-visible{outline:1px solid var(--line-strong);outline-offset:6px}

/* index: the name (top centre elsewhere) and the mail line sit together bottom-left */
.at-index .frame .tc{top:auto;bottom:calc(var(--edge) + 34px);left:var(--edge);transform:none}
.js .c4 .reach{position:absolute;left:var(--edge);bottom:var(--edge);margin:0;width:auto;max-width:none}

@media (max-width:760px){
  :root{--edge:22px}
  .at-index .frame .tc{display:block;bottom:calc(var(--edge) + 64px)}
  .frame .tc{display:none}
  .frame .br{font-size:9.5px;letter-spacing:.12em}
  .split{top:calc(var(--edge) + 70px)}
  .cap{line-height:1.8;font-size:9.5px;letter-spacing:.18em}
  .c1{padding-bottom:calc(var(--edge) + 80px)}
  .c2 .big{bottom:calc(var(--edge) + 76px)}
  .split2 .b{bottom:calc(var(--edge) + 64px)}
  .branches{grid-template-columns:1fr}
  .br-work{border-top:1px solid var(--line-faint);margin-top:26px}
  .reach span{display:block;margin:0 0 6px}
  .dots{display:none}
}
@media (prefers-reduced-motion:reduce){
  .js .ch{filter:none;transition:opacity .6s ease,visibility 0s linear .6s}
  .js .ch.on{transition-delay:0s}
  .loader{transition:opacity .4s ease,visibility 0s linear .4s}
}