/* The landing page: a deep violet cosmos (the owner's pick), drawn entirely in
   CSS (stars, nebula and glow are gradients; there are no images). The motion
   is subtle and stops for anyone who asks their device for reduced motion. */
:root{
  --void:#07060f; --ink:#ece6f7; --muted:#b9b1d0; --gold:#dcb15a; --gold-hi:#f0cf86;
  --violet:#7c3aed; --violet-soft:rgba(124,58,237,.35); --line:rgba(155,120,255,.28);
  --font-display:"Cinzel","Trajan Pro",Georgia,serif;
  --font-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--void);color:var(--ink);font:15px/1.5 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* --- the sky, behind everything --- */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.nebula{position:absolute;inset:-20%;
  background:
    radial-gradient(38% 30% at 22% 28%, rgba(124,58,237,.34), transparent 70%),
    radial-gradient(30% 26% at 78% 72%, rgba(20,140,170,.20), transparent 70%),
    radial-gradient(26% 22% at 62% 18%, rgba(176,38,132,.18), transparent 70%),
    radial-gradient(44% 34% at 40% 88%, rgba(60,30,140,.30), transparent 72%),
    linear-gradient(118deg, transparent 22%, rgba(124,58,237,.10) 42%, rgba(176,38,132,.08) 52%, rgba(20,140,170,.06) 62%, transparent 80%);
  animation:drift 70s ease-in-out infinite alternate}
.stars{position:absolute;inset:0;background-repeat:repeat}
.stars.far{opacity:.75;
  background-image:
    radial-gradient(1.2px 1.2px at 16px 293px,#fff4dc 55%,transparent 62%),
    radial-gradient(1.1px 1.1px at 172px 335px,#d8f2ff 55%,transparent 62%),
    radial-gradient(0.9px 0.9px at 51px 213px,#ffffff 55%,transparent 62%),
    radial-gradient(1.2px 1.2px at 205px 60px,#d8f2ff 55%,transparent 62%),
    radial-gradient(0.9px 0.9px at 75px 120px,#ffffff 55%,transparent 62%),
    radial-gradient(1.1px 1.1px at 100px 162px,#ffffff 55%,transparent 62%),
    radial-gradient(1.2px 1.2px at 325px 324px,#e9e2ff 55%,transparent 62%),
    radial-gradient(0.9px 0.9px at 171px 417px,#ffffff 55%,transparent 62%),
    radial-gradient(1.1px 1.1px at 306px 412px,#ffffff 55%,transparent 62%),
    radial-gradient(1.0px 1.0px at 156px 43px,#d8f2ff 55%,transparent 62%),
    radial-gradient(1.0px 1.0px at 151px 93px,#d8f2ff 55%,transparent 62%),
    radial-gradient(0.9px 0.9px at 266px 168px,#fff4dc 55%,transparent 62%),
    radial-gradient(0.9px 0.9px at 307px 152px,#e9e2ff 55%,transparent 62%),
    radial-gradient(1.1px 1.1px at 52px 310px,#ffffff 55%,transparent 62%),
    radial-gradient(1.0px 1.0px at 211px 402px,#e9e2ff 55%,transparent 62%),
    radial-gradient(0.9px 0.9px at 77px 167px,#e9e2ff 55%,transparent 62%),
    radial-gradient(1.1px 1.1px at 416px 168px,#ffffff 55%,transparent 62%),
    radial-gradient(0.8px 0.8px at 65px 119px,#cfc4ff 55%,transparent 62%),
    radial-gradient(1.2px 1.2px at 329px 314px,#cfc4ff 55%,transparent 62%),
    radial-gradient(0.8px 0.8px at 235px 241px,#cfc4ff 55%,transparent 62%),
    radial-gradient(0.9px 0.9px at 123px 314px,#e9e2ff 55%,transparent 62%),
    radial-gradient(0.9px 0.9px at 74px 218px,#ffffff 55%,transparent 62%),
    radial-gradient(1.2px 1.2px at 240px 308px,#e9e2ff 55%,transparent 62%),
    radial-gradient(1.1px 1.1px at 240px 171px,#fff4dc 55%,transparent 62%),
    radial-gradient(0.9px 0.9px at 428px 325px,#d8f2ff 55%,transparent 62%),
    radial-gradient(1.1px 1.1px at 344px 40px,#cfc4ff 55%,transparent 62%),
    radial-gradient(0.8px 0.8px at 129px 219px,#cfc4ff 55%,transparent 62%),
    radial-gradient(0.9px 0.9px at 203px 108px,#cfc4ff 55%,transparent 62%),
    radial-gradient(1.1px 1.1px at 236px 190px,#ffffff 55%,transparent 62%),
    radial-gradient(0.9px 0.9px at 125px 130px,#ffffff 55%,transparent 62%);
  background-size:431px 431px}
.stars.mid{opacity:.85;
  background-image:
    radial-gradient(1.5px 1.5px at 544px 132px,#ffffff 55%,transparent 62%),
    radial-gradient(1.6px 1.6px at 444px 272px,#d8f2ff 55%,transparent 62%),
    radial-gradient(1.5px 1.5px at 81px 352px,#ffffff 55%,transparent 62%),
    radial-gradient(1.4px 1.4px at 363px 425px,#cfc4ff 55%,transparent 62%),
    radial-gradient(1.2px 1.2px at 131px 347px,#fff4dc 55%,transparent 62%),
    radial-gradient(1.4px 1.4px at 69px 337px,#ffffff 55%,transparent 62%),
    radial-gradient(1.4px 1.4px at 440px 388px,#d8f2ff 55%,transparent 62%),
    radial-gradient(1.1px 1.1px at 143px 72px,#e9e2ff 55%,transparent 62%),
    radial-gradient(1.3px 1.3px at 218px 151px,#cfc4ff 55%,transparent 62%),
    radial-gradient(1.5px 1.5px at 346px 500px,#d8f2ff 55%,transparent 62%),
    radial-gradient(1.3px 1.3px at 431px 186px,#d8f2ff 55%,transparent 62%),
    radial-gradient(1.5px 1.5px at 472px 558px,#ffffff 55%,transparent 62%),
    radial-gradient(1.4px 1.4px at 541px 300px,#cfc4ff 55%,transparent 62%),
    radial-gradient(1.3px 1.3px at 562px 186px,#cfc4ff 55%,transparent 62%),
    radial-gradient(1.3px 1.3px at 537px 185px,#ffffff 55%,transparent 62%),
    radial-gradient(1.6px 1.6px at 289px 525px,#e9e2ff 55%,transparent 62%),
    radial-gradient(1.3px 1.3px at 591px 353px,#d8f2ff 55%,transparent 62%),
    radial-gradient(1.5px 1.5px at 30px 596px,#ffffff 55%,transparent 62%);
  background-size:613px 613px;
  animation:twinkle 7s ease-in-out infinite}
.stars.near{
  background-image:
    radial-gradient(2.1px 2.1px at 208px 291px,#ffffff 55%,transparent 62%),
    radial-gradient(2.3px 2.3px at 767px 830px,#ffffff 55%,transparent 62%),
    radial-gradient(1.9px 1.9px at 822px 456px,#ffffff 55%,transparent 62%),
    radial-gradient(2.4px 2.4px at 275px 404px,#e9e2ff 55%,transparent 62%),
    radial-gradient(2.1px 2.1px at 74px 509px,#ffffff 55%,transparent 62%),
    radial-gradient(1.7px 1.7px at 788px 342px,#cfc4ff 55%,transparent 62%),
    radial-gradient(2.0px 2.0px at 112px 563px,#cfc4ff 55%,transparent 62%),
    radial-gradient(2.3px 2.3px at 475px 143px,#ffffff 55%,transparent 62%),
    radial-gradient(2.1px 2.1px at 142px 766px,#e9e2ff 55%,transparent 62%);
  background-size:887px 887px;
  animation:twinkle 11s ease-in-out infinite;animation-delay:-4s}

@keyframes drift{
  from{transform:translate3d(-2%,-1%,0) scale(1)}
  to{transform:translate3d(2%,1.5%,0) scale(1.06)}
}
@keyframes twinkle{
  0%,100%{opacity:.85}
  50%{opacity:.35}
}
@media (prefers-reduced-motion: reduce){
  /* !important: .stars.mid and .stars.near (two classes) outrank any one-class
     rule here, so without it they kept twinkling (Hollis, R1). */
  .sky *{animation:none !important}
}

/* --- the page --- */
.wrap{position:relative;z-index:1;max-width:880px;margin:0 auto;padding:12vh 16px 56px;min-height:100vh}
header.top{text-align:center;margin-bottom:34px}
h1{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,7vw,52px);letter-spacing:.06em;margin:0;line-height:1.1;
  color:var(--gold);text-shadow:0 0 22px rgba(124,58,237,.55),0 0 2px rgba(240,207,134,.5)}
.rule{height:1px;width:min(420px,70%);margin:18px auto 0;
  background:linear-gradient(90deg,transparent,var(--violet) 30%,var(--gold) 50%,var(--violet) 70%,transparent)}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,320px));gap:16px;justify-content:center}
a.tile{display:block;padding:22px 22px 20px;border-radius:14px;color:inherit;text-decoration:none;
  background:rgba(18,14,36,.58);border:1px solid var(--line);box-shadow:0 0 18px rgba(124,58,237,.14);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
a.tile:hover,a.tile:focus-visible{border-color:rgba(220,177,90,.65);box-shadow:0 0 28px var(--violet-soft),inset 0 0 18px rgba(124,58,237,.12);transform:translateY(-2px);outline:none}
a.tile:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
a.tile h2{font-family:var(--font-display);font-size:21px;letter-spacing:.04em;margin:0 0 8px;color:var(--gold)}
a.tile p{margin:0;color:var(--muted);font-size:14px}
a.tile p.lock{margin-top:12px;font-size:12.5px;color:#9c93b8}
@media (prefers-reduced-motion: reduce){
  a.tile{transition:none}
  a.tile:hover,a.tile:focus-visible{transform:none}
}