/* Earth in the middle with every route flown. Life is drawn as the Big Dipper, the work as Cassiopeia,
   and the Dipper's pointer stars aim at the Moon. */
:root{--space:#03050a;--ink:#eef1f5;--muted:#98a1af;--gold:#e8bd72;--sea:#8cb9ff;
  --ui:'Lora',Georgia,'Times New Roman',serif;--display:'Lora',Georgia,'Times New Roman',serif;color-scheme:dark}
*{box-sizing:border-box}
html{background:var(--space)}
html,body{height:100%}
body{margin:0;background:var(--space);color:var(--ink);font-family:var(--ui);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden;height:100dvh}
a{color:inherit;text-underline-offset:4px}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#sky,#scene{position:fixed;inset:0;width:100%;height:100%;display:block}

/* ---------- name and contacts ---------- */
.hero{position:fixed;left:clamp(24px,2.8vw,44px);top:clamp(18px,3vh,30px);z-index:5;margin:0}
.name{margin:0;font:500 clamp(24px,min(2.5vw,4vh),38px)/1 var(--display);letter-spacing:.02em;white-space:nowrap}
.name span{display:inline-block;animation:letter 1.1s cubic-bezier(.2,.7,.2,1) both}
.name span:last-child{letter-spacing:0}
@keyframes letter{from{opacity:0;filter:blur(6px);transform:translateY(6px)}to{opacity:1;filter:none;transform:none}}
.made{margin:10px 0 0;font-size:13.5px;color:var(--muted);animation:fade 1s .9s both}
@keyframes fade{from{opacity:0}}
.links{position:fixed;top:clamp(20px,3.3vh,32px);right:clamp(24px,2.8vw,44px);display:flex;gap:24px;font-size:13.5px;z-index:5;animation:fade 1s .9s both}
.links a{text-decoration:none}.links a:hover{text-decoration:underline}
.links b{font-weight:500;color:var(--ink);margin-right:6px}

/* ---------- bodies in orbit ---------- */
#orrery{position:fixed;inset:0;margin:0;padding:0;z-index:2;pointer-events:none;list-style:none}
.body{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;visibility:hidden;transition:opacity .7s}
.body button,.body a{position:absolute;left:-16px;top:-16px;width:32px;height:32px;padding:0;background:none;border:0;border-radius:50%;pointer-events:auto;text-decoration:none}
.mk{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:1px solid transparent;transition:border-color .25s,transform .25s}
.body.on .mk{border-color:#e8bd72d9;transform:scale(1.2)}
.now .mk::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--gold);animation:ping 2.6s ease-out infinite}
@keyframes ping{from{transform:scale(.5);opacity:.9}to{transform:scale(1.9);opacity:0}}
.tag{position:absolute;white-space:nowrap;font:500 clamp(14px,1.9vh,16px)/1 var(--display);letter-spacing:.02em;color:var(--ink);transition:color .25s}
.tag small{font-size:.88em;color:#c3cad5;margin-left:5px;letter-spacing:.04em;transition:color .25s}
.work .tag{color:#f2e2c2}
.s-n .tag{left:50%;bottom:calc(100% - 2px);transform:translateX(-50%)}
.s-s .tag{left:50%;top:calc(100% - 2px);transform:translateX(-50%)}
.s-e .tag{left:calc(100% - 2px);top:50%;transform:translateY(-50%)}
.s-w .tag{right:calc(100% - 2px);top:50%;transform:translateY(-50%)}
.moon button{left:calc(-1 * var(--mr,20px) - 8px);top:calc(-1 * var(--mr,20px) - 8px);width:calc(2 * var(--mr,20px) + 16px);height:calc(2 * var(--mr,20px) + 16px)}
.moon .mk{display:none}
.body.on .tag,.body button:hover .tag,.body a:hover .tag{color:var(--gold)}
.body.on .tag small{color:#e8bd72b3}

/* ---------- readout under the Earth ---------- */
.readout{position:fixed;left:var(--rx,50%);top:var(--ry,64%);transform:translateX(-50%);width:min(460px,32vw);text-align:center;z-index:3;transition:opacity .2s}
.readout{pointer-events:none}.readout .r-open{pointer-events:auto}
.readout.swap{opacity:0;transform:translate(-50%,4px)}
.readout{transition:opacity .2s,transform .25s}
.r-head{font:600 clamp(24px,3.4vh,30px)/1.15 var(--display);letter-spacing:.01em}
.r-head small{font:500 .56em var(--display);letter-spacing:.12em;color:var(--muted);margin-left:9px;vertical-align:.18em}
.r-main{font-size:clamp(15px,2.1vh,17px);margin-top:6px}
.hw{font:inherit;letter-spacing:inherit}
.r-sub{font-size:clamp(13px,1.8vh,14.5px);color:var(--muted);margin-top:2px}
.r-open{display:inline-flex;margin-top:12px;border:1px solid #ffffff4d;background:none;border-radius:999px;padding:6px 16px;font-size:13px;text-decoration:none}
.r-open:hover{background:#ffffff14}

/* ---------- fun facts, on a slow loop along the bottom ---------- */
.ticker{position:fixed;left:0;right:0;bottom:max(clamp(14px,2.6vh,26px),env(safe-area-inset-bottom,0px));z-index:3;display:flex;align-items:center}
.ticker-window{flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.ticker-track{display:flex;width:max-content;animation:tick var(--dur,120s) linear infinite}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track,body.modal-open .ticker-track{animation-play-state:paused}
.ticker span{font-size:14px;color:#b9c0cb;white-space:nowrap;padding:0 26px;position:relative}
.ticker span::before{content:'';position:absolute;left:-2px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:var(--gold);opacity:.8}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- project card ---------- */
dialog{padding:0;border:0;border-radius:20px;width:min(560px,calc(100vw - 40px));max-height:calc(100dvh - 48px);overflow:auto;overscroll-behavior:contain;color:var(--ink);
  background:linear-gradient(180deg,#121a28 0,#0b111b 160px,#0a0f18);box-shadow:0 40px 120px #000c,0 0 0 1px #ffffff12,inset 0 1px 0 #ffffff1c}
dialog::backdrop{background:#02040acc;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
dialog[open]{animation:cardIn .34s cubic-bezier(.22,1,.36,1)}
dialog[open]::backdrop{animation:fade .3s}
@keyframes cardIn{from{opacity:0;transform:translateY(12px) scale(.985)}}
.card{padding:34px 38px 0}
.card h2{outline:none;margin:0;padding-right:44px;font:600 clamp(28px,3.6vh,34px)/1.15 var(--display);letter-spacing:.005em}
.c-sub{margin:8px 0 0;font-size:15px;color:var(--gold)}
.c-body{margin:20px 0 0;padding-top:20px;border-top:1px solid #ffffff14;font-size:16px;line-height:1.72;color:#d3d9e2}
.c-foot{position:sticky;bottom:0;margin:8px -38px 0;padding:20px 38px 32px;background:linear-gradient(180deg,#0a0f1800,#0a0f18 34%)}
.c-go{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:13px 18px;border-radius:12px;border:1px solid #e8bd7259;background:#e8bd7212;color:#f2e2c2;font-size:15px;letter-spacing:.01em;text-decoration:none;transition:background .2s,border-color .2s}
.c-go:hover{background:#e8bd7224;border-color:#e8bd7280}
.c-go .arw{display:block;width:11px;height:11px;flex:none;transition:transform .2s}
.c-go:hover .arw{transform:translate(2px,-2px)}
.close{position:absolute;top:24px;right:24px;width:32px;height:32px;border-radius:50%;border:0;background:#ffffff12;padding:0;transition:background .2s}
.close::before,.close::after{content:'';position:absolute;left:50%;top:50%;width:11px;height:1.2px;background:var(--ink);transform:translate(-50%,-50%) rotate(45deg)}
.close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.close:hover{background:#ffffff24}

/* ---------- phone: a rough pass, one long list from the Moon down to Earth ---------- */
/* ---------- phone: one screen, a small star chart, Life and Work as two tabs ---------- */
#mob{display:none}
@media (max-width:1100px){
  html,body{height:100%}
  html{overflow:hidden;overscroll-behavior:none}
  body{overflow:hidden;height:100dvh;display:flex;flex-direction:column;position:relative;overscroll-behavior:none}
  html.tall{overflow:visible}
  #sky{position:absolute;top:0;left:0;width:100%;height:100%}
  body.tall{overflow-y:auto;height:auto;min-height:100dvh}
  body.tall main,body.tall #mob{flex:none;min-height:auto}
  #scene,#orrery,.readout{display:none}
  .hero{position:relative;z-index:1;left:auto;top:auto;flex:none;padding:max(22px,calc(env(safe-area-inset-top,0px) + 12px)) 22px 0}
  .name{font-size:30px}
  .made{font-size:13px;margin-top:8px}
  .links{position:relative;top:auto;right:auto;flex:none;padding:10px 22px 0;gap:20px;font-size:13px}
  main{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;padding-bottom:var(--reserve,max(18px,calc(env(safe-area-inset-bottom,0px) + 6px)))}
  html.ios main{--reserve:calc(env(safe-area-inset-bottom,0px) + 44px)}
  /* short screens: tighten step by step before the chart has to go */
  body.c1 .hero{padding-top:max(16px,calc(env(safe-area-inset-top,0px) + 4px))}
  body.c1 .links{padding-top:8px}
  body.c1 .seg button{padding:8px 0 9px}
  body.c1 .ticker{margin-top:10px}
  body.c2 .name{font-size:27px}
  body.c2 .made{margin-top:5px}
  body.c2 .m-txt b{font-size:14.5px;line-height:1.25}
  body.c2 .m-txt small{font-size:12px;line-height:1.25}
  body.c2 .m-yr{font-size:14.5px}
  body.c2 .m-row .m-moon{width:12px;height:12px}
  html.ios body.c2 main{--reserve:calc(env(safe-area-inset-bottom,0px) + 36px)}
  #mob{position:relative;z-index:1;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;padding:0 22px;order:1}
  #mfig{flex:1 1 auto;min-height:0;width:100%;display:block;touch-action:pan-y}
  #mob.nofig #mfig{display:none}
  #mob.nofig .seg{margin-top:18px}
  .seg{position:relative;display:flex;flex:none;margin:2px 0 0;border-bottom:1px solid #ffffff1f}
  .seg i{position:absolute;left:0;bottom:-1px;width:50%;height:1px;transition:transform .34s cubic-bezier(.2,.7,.2,1)}
  .seg i::after{content:'';display:block;width:34px;height:1px;margin:0 auto;background:var(--gold);box-shadow:0 0 8px #e8bd72aa}
  .seg[data-tab="work"] i{transform:translateX(100%)}
  .seg button{flex:1 1 0;background:none;border:0;padding:11px 0 12px;font-size:15px;letter-spacing:.06em;color:#7f8896;transition:color .25s}
  .seg button[aria-selected="true"]{color:var(--ink)}
  .panes{position:relative;flex:none}
  .pane{position:absolute;inset:0 0 auto;margin:0;padding:0;list-style:none;transition:opacity .28s,transform .28s}
  .pane.measurement{display:block!important;visibility:hidden;pointer-events:none}
  .pane li{border-top:1px solid #ffffff14}
  .pane li:first-child{border-top:0}
  .panes.fill .pane{bottom:0;display:flex;flex-direction:column}
  .panes.fill .pane li{flex:1 1 auto;display:flex}
  .panes.fill #pane-work li{max-height:var(--wmax,none)}
  .pane li:last-child{border-bottom:1px solid #ffffff14}
  .m-row{display:flex;align-items:center;gap:14px;width:100%;padding:var(--rp,8px) 0;flex:1 1 auto;background:none;border:0;text-align:left;text-decoration:none}
  .m-yr{flex:none;width:40px;font-size:15px;font-weight:600}
  .m-txt{flex:1 1 auto;min-width:0}
  .m-txt b{display:block;font-weight:500;font-size:15px;line-height:1.3}
  .m-txt small{display:block;font-size:12.5px;line-height:1.35;color:var(--muted)}
  .m-row.on .m-yr,.m-row.on b{color:var(--gold)}
  .m-moon{display:block;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f1eee6,#bdb9b0 70%,#77746e);box-shadow:0 0 10px #f0ebdc55}
  .plus{flex:none;position:relative;width:14px;height:14px;opacity:.45}
  .plus::before,.plus::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:1px;background:var(--ink);transform:translate(-50%,-50%)}
  .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
  #pane-work .m-txt b{color:#f2e2c2}
  .ticker{position:relative;bottom:auto;order:2;flex:none;margin-top:18px}
  .ticker span{font-size:12px;padding:0 22px}
  /* the project card becomes a sheet from the bottom */
  dialog{width:100%;max-width:100%;margin:auto 0 0;border-radius:22px 22px 0 0;max-height:88dvh;box-shadow:0 -24px 70px #000b,inset 0 1px 0 #ffffff1c}
  dialog[open]{animation:sheetIn .42s cubic-bezier(.22,1,.36,1)}
  @keyframes sheetIn{from{transform:translateY(100%)}}
  dialog::before{content:'';display:block;width:38px;height:4px;border-radius:2px;background:#ffffff2e;margin:9px auto 0}
  .card{padding:16px 24px 0}
  .card h2{font-size:27px;padding-right:40px}
  .c-sub{font-size:14.5px;margin-top:6px}
  .c-body{margin-top:18px;padding-top:18px;font-size:15.5px}
  .c-foot{margin:6px -24px 0;padding:18px 24px calc(16px + env(safe-area-inset-bottom,0px))}
  .c-go:active{background:#e8bd7224}
  .close{top:14px;right:12px;width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Small controls use the existing palette and leave the scene unchanged. */
.skip-link{position:fixed;left:16px;top:10px;padding:10px 14px;background:#121a28;z-index:20;transform:translateY(-150%)}
.skip-link:focus{transform:none}
.links{align-items:center;gap:20px}
body.modal-open .now .mk::after{animation-play-state:paused}
.enhanced #static-content{display:none}
html:not(.enhanced){height:auto;overflow:auto}
html:not(.enhanced) body{height:auto;min-height:100dvh;overflow:auto}
html:not(.enhanced) #sky,html:not(.enhanced) #scene,html:not(.enhanced) #orrery,html:not(.enhanced) #mob,html:not(.enhanced) .readout,html:not(.enhanced) .ticker{display:none}
html:not(.enhanced) .hero,html:not(.enhanced) .links{position:relative;left:auto;right:auto;top:auto;margin:24px;animation:none}
#static-content{max-width:760px;margin:40px auto;padding:0 24px 40px}
#static-content article{padding:20px 0;border-top:1px solid #ffffff1f}
#static-content p,#static-content li{line-height:1.8;color:#d3d9e2}
body.project-page{overflow:auto;height:auto;min-height:100dvh;background:radial-gradient(ellipse at 50% 30%,#0b1528,#03050a 70%);padding:32px 20px}
.project-page nav{max-width:560px;margin:0 auto 28px;display:flex;justify-content:space-between;gap:16px;font-size:14px}
.project-page main{width:100%;flex:none;max-width:560px;overflow:hidden;margin:0 auto;border-radius:20px;background:linear-gradient(#121a28,#0a0f18);box-shadow:0 0 0 1px #ffffff12}
.project-page h1{margin:0;font-size:34px;line-height:1.2;font-weight:600}
.project-page .card{padding-top:30px}
.project-page .c-foot{position:static}
@media (max-width:1100px){
  #mob{width:100%;max-width:680px;align-self:center}
  .links{gap:20px;flex-wrap:wrap}
}