/* Lilli Lab — pearlescent daylight.
   The public register. Dark is Black Pearl and belongs to admin only:
   a dark public page reads as "you are where things get changed", which
   inverts the signal. One file, so the flip is one edit. */

:root{
  --ink:#191b1d;
  --dim:#6d6a64;
  --faint:#9c978e;
  --line:#e4e0d8;
  --card:#fbfaf7;
  --bg:#f6f4ef;
  --pearl-a:#ffd9e4;   /* rose    */
  --pearl-b:#d6f0ea;   /* aqua    */
  --pearl-c:#fdf0cf;   /* gold    */
  --edge:#cfd8d4;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 15px/1.65 ui-sans-serif,-apple-system,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* the sheen — three offset washes, no imagery, one paint */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  background:
    radial-gradient(48vmax 42vmax at 22% 12%, var(--pearl-a) 0%, transparent 58%),
    radial-gradient(52vmax 46vmax at 80% 22%, var(--pearl-b) 0%, transparent 60%),
    radial-gradient(60vmax 50vmax at 50% 96%, var(--pearl-c) 0%, transparent 62%);
  opacity:.55;
}

main{position:relative}

/* the pearl */
.mark{
  border-radius:50%;
  border:1px solid var(--edge);
  background:
    radial-gradient(circle at 34% 28%, #ffffff 0%, transparent 52%),
    linear-gradient(145deg, var(--pearl-a) 0%, var(--pearl-b) 52%, var(--pearl-c) 100%);
  box-shadow:0 1px 10px -3px rgba(80,90,88,.34);
}

h1{
  margin:0 0 10px;
  font-size:19px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
}
p{margin:0; color:var(--dim); font-size:14px}
.rule{height:1px; background:var(--line); margin:28px 0}
.foot{color:var(--faint); font-size:12px; letter-spacing:.06em}
a{color:var(--dim); text-decoration:none; border-bottom:1px solid var(--line)}
a:hover{color:var(--ink); border-bottom-color:var(--edge)}

/* ---- centred holding page ---- */
body.hold{display:flex; align-items:center; justify-content:center; padding:32px 20px}
body.hold main{width:100%; max-width:440px; text-align:center}
body.hold .mark{width:34px; height:34px; margin:0 auto 26px}

/* ---- link hub ---- */
body.hub{padding:44px 18px 56px}
body.hub main{width:100%; max-width:400px; margin:0 auto}
body.hub header{text-align:center; margin-bottom:30px}
body.hub .mark{width:56px; height:56px; margin:0 auto 18px}
body.hub h1{font-size:17px}
body.hub ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
body.hub a.link{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 17px; border:1px solid var(--line); border-radius:12px;
  background:var(--card); color:var(--ink); text-decoration:none;
  transition:border-color .18s ease, transform .18s ease;
}
body.hub a.link:hover{border-color:var(--edge); transform:translateY(-1px)}
body.hub a.link .t{font-size:14.5px}
body.hub a.link .s{display:block; color:var(--faint); font-size:12.5px; margin-top:2px}
body.hub a.link .arrow{color:var(--faint); flex:none}
body.hub li[data-empty] a.link{opacity:.5; pointer-events:none}
body.hub li[data-empty] a.link .arrow::after{content:"—"}
body.hub footer{margin-top:30px; text-align:center; color:var(--faint); font-size:12px; letter-spacing:.05em}

@media (prefers-reduced-motion:no-preference){
  main{animation:rise .8s ease-out both}
  @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}