/* make believe records. Night ground, one prism sphere on a fixed canvas behind every page. */
:root{
  --night:#0E1A2B; --star:#E9ECF2; --dust:#8592A6; --line:rgba(233,236,242,.12);
  --sans:"DM Sans",system-ui,sans-serif; --mono:"Geist Mono",ui-monospace,Menlo,monospace; --display:Syne,"DM Sans",sans-serif;
  --gut:max(20px,4.5vw);
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--night)}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--night);color:var(--star);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
::selection{background:rgba(188,166,247,.35)}

#sky{position:fixed;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}

/* persistent header */
.hd{position:fixed;left:0;right:0;top:0;z-index:3;display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:max(26px,env(safe-area-inset-top)) max(var(--gut),env(safe-area-inset-right)) 0 max(var(--gut),env(safe-area-inset-left));pointer-events:none}
.hd a{pointer-events:auto}
.wm{font-size:clamp(17px,1.7vw,22px);text-decoration:none;line-height:1;white-space:nowrap}
.hd nav{display:flex;gap:1.8em;font-size:15px;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.hd nav a{text-decoration:none;color:var(--dust);transition:color .2s}
.hd nav a:hover,.hd nav a[aria-current="page"]{color:var(--star)}
body[data-page="home"] .hd nav{opacity:0;transform:translateY(-4px);pointer-events:none}
body[data-page="home"] .hd nav a{pointer-events:none}
a:focus-visible{outline:2px solid var(--star);outline-offset:4px;border-radius:2px}

/* wordmark candidates, picked with ?wm= (see DESIGN.md) */
.wm{font-family:Syne,var(--display);font-weight:800;letter-spacing:-.035em}
html[data-wm="unbounded"] .wm{font-family:Unbounded,var(--display);font-weight:500;letter-spacing:-.02em}
html[data-wm="michroma"] .wm{font-family:Michroma,var(--display);font-weight:400;letter-spacing:.01em;font-size:clamp(14px,1.45vw,19px)}
html[data-wm="majormono"] .wm{font-family:"Major Mono Display",var(--mono);font-weight:400;letter-spacing:0}
html[data-wm="gloock"] .wm{font-family:Gloock,Georgia,serif;font-weight:400;letter-spacing:-.01em;font-size:clamp(19px,1.95vw,25px)}
html[data-wm="anybody"] .wm{font-family:Anybody,var(--display);font-weight:300;font-stretch:150%;letter-spacing:.01em}

/* page content and transitions */
main{position:relative;z-index:2;min-height:100vh;min-height:100dvh;transition:opacity .42s var(--ease),transform .42s var(--ease),filter .42s var(--ease)}
main.out{opacity:0;transform:translateY(-6px);filter:blur(2px)}
main.in{opacity:0;transform:translateY(10px);filter:blur(2px);transition:none}

/* home: the index */
.index{position:absolute;left:max(var(--gut),env(safe-area-inset-left));bottom:max(9vh,calc(env(safe-area-inset-bottom) + 40px));margin:0;padding:0;list-style:none;
  font:500 clamp(44px,7.2vw,104px)/1.0 var(--display);letter-spacing:-.035em;display:grid}
.index a{text-decoration:none;opacity:.38;transition:opacity .35s var(--ease);display:inline-block;padding-block:.02em}
.index a:hover,.index a:focus-visible,.index a.on{opacity:1}
.index .alt{display:inline-grid}
.index .alt > span{grid-area:1/1;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.index .alt > span + span{opacity:0;transform:translateY(.25em);font-size:.42em;align-self:center;letter-spacing:-.01em;white-space:nowrap}
.index .alt.shown > span:first-child{opacity:0;transform:translateY(-.25em)}
.index .alt.shown > span + span{opacity:1;transform:none}
.url{position:absolute;right:max(var(--gut),env(safe-area-inset-right));bottom:max(9vh,calc(env(safe-area-inset-bottom) + 40px));font:400 13px var(--mono);color:var(--dust)}

/* inner pages */
.page{padding:calc(max(26px,env(safe-area-inset-top)) + 16vh) max(var(--gut),env(safe-area-inset-right)) 18vh max(var(--gut),env(safe-area-inset-left));max-width:calc(640px + 2*var(--gut))}
.page h1{margin:0 0 .5em;font:500 clamp(44px,7vw,96px)/1 var(--display);letter-spacing:-.035em;text-wrap:balance}
.page p{margin:0 0 1.1em;font-size:clamp(17px,1.5vw,19px);line-height:1.6;max-width:56ch;color:#C9CFDA}
.page p.small{font-size:15px;color:var(--dust)}
.page a.out-link{text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px;transition:border-color .2s}
.page a.out-link:hover{border-color:var(--star)}
.records{list-style:none;margin:3em 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:28px 18px}
.records a{text-decoration:none;display:grid;gap:10px}
.records img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;border-radius:2px;transition:transform .5s var(--ease)}
.records a:hover img{transform:translateY(-3px)}
.records b{font-weight:500;font-size:15px;line-height:1.3}
.records small{display:block;font:400 12px/1.5 var(--mono);color:var(--dust);font-variant-numeric:tabular-nums}
.foot{margin-top:5em;font:400 13px var(--mono);color:var(--dust)}

@media (max-width:760px){
  .index{bottom:auto;top:24vh}
  .url{bottom:max(28px,env(safe-area-inset-bottom))}
  .page{padding-top:22vh}
  .hd nav{gap:1.2em;font-size:14px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}