/* Same palette and type as fdu.dev, quieter: a plain index of experiments. */
@font-face {
  font-family: "Martian Mono";
  src: url("/fonts/martian-mono-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
}

:root {
  --spruce: #102326;
  --bone: #e8e2d4;
  --stone: #b9c2b9;
  --lichen: #7f978f;
  --rule: #1f3a3b;
  --amber: #f0b44c;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--spruce);
  color: var(--stone);
  font-family: "Martian Mono", ui-monospace, monospace;
  font-size: 15px;
  font-stretch: 87.5%;
  font-weight: 350;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

body { min-height: 100vh; display: grid; place-items: center; padding: 4rem 1.5rem; }
main { width: 100%; max-width: 22rem; }
::selection { background: rgb(240 180 76 / 0.25); }

.mark {
  color: var(--bone);
  font-size: 2.5rem;
  font-stretch: 112.5%;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 0 0 1.75rem -0.04em;
}
.mark span { color: var(--amber); }
h1 { color: var(--bone); font-size: 1.15rem; font-weight: 400; letter-spacing: -0.01em; }
.tagline { color: var(--lichen); font-size: 0.85rem; margin-top: 0.25rem; }

.experiments { list-style: none; margin-top: 3rem; }
.experiments a { display: block; padding: 0.75rem 0; color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.title { display: block; color: var(--stone); transition: color 0.2s; }
.desc { display: block; color: var(--lichen); font-size: 0.8rem; margin-top: 0.15rem; }
.experiments a:hover .title, .experiments a:focus-visible .title { color: var(--amber); }

/* Shown only while the list is empty. */
.empty { margin-top: 3rem; color: var(--lichen); font-size: 0.85rem; }
.experiments:has(li) + .empty { display: none; }

footer { margin-top: 3.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); font-size: 0.85rem; }
footer a { color: var(--lichen); text-decoration: none; transition: color 0.2s; }
footer a:hover { color: var(--bone); }
a:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; }