/* Home: an index. Three words, each with one line of what is there now. The sky stays and goes quiet around the words. */
html,body{min-height:100%}
body{position:relative;display:grid;grid-template-rows:1fr auto;min-height:100vh;min-height:100dvh;background:#020308}
main{position:relative;z-index:1;display:grid;align-content:center;padding:84px var(--gut) 32px}
.ix{display:flex;flex-direction:column;gap:46px;margin:0;padding:0;list-style:none}
.ix a{position:relative;display:flex;flex-direction:column;gap:12px;width:max-content;max-width:100%}
.ix .nm{font:400 clamp(34px,3.2vw,44px)/1 var(--mono);letter-spacing:-.01em;color:rgba(233,231,225,.92);transition:color .15s}
/* hover or focus: one cell of light beside the word, as the panel's bullets */
.ix .nm::before{content:'';position:absolute;left:-26px;top:calc(.5em - 3px);width:7px;height:7px;background:var(--ink);opacity:0;transition:opacity .15s}
.ix a:hover .nm,.ix a:focus-visible .nm{color:var(--ink)}
.ix a:hover .nm::before,.ix a:focus-visible .nm::before{opacity:1}
.ix a:focus-visible{outline:none}
.ix .st{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:15px;line-height:1.4;color:var(--dim)}
.ix .st .w{color:var(--wait)}
/* variants under study (?v=): a centred; b left-aligned, the column centred; c left-aligned on the page's left third */
body.va .ix{align-items:center;text-align:center}
body.va .ix a{align-items:center}
body.va .ix .st{justify-content:center}
body.va .ix .nm::before{left:auto;right:calc(100% + 18px)}
body.vb .ix{width:max-content;max-width:100%;margin:0 auto}
body.vc .ix{margin-left:max(var(--gut),calc(33vw - 120px))}
footer.np{position:relative;z-index:1;padding:0 var(--gut) 28px}
footer.np h1{font-size:clamp(28px,2.8vw,40px)}
@media (max-width:720px){
  main{padding:72px 28px 24px;align-content:center}
  .ix{gap:36px}
  .ix .nm{font-size:32px}
  .ix .st{font-size:14px}
  .ix .nm::before{left:-18px;width:6px;height:6px}
  body.vc .ix{margin-left:0}
  footer.np{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 24px)}
  footer.np h1{font-size:30px}
}
/* a long state line wraps instead of widening the page */
body{grid-template-columns:minmax(0,1fr)}