/* rezo.lol — a typographic index of small projects */
:root {
  --paper: #E6ECF5;      /* cold blue-grey paper */
  --ink: #1B2140;        /* deep indigo ink */
  --ink-soft: #5B6487;
  --rule: #C9D2E3;
  --lock: #7A63C9;       /* violet for private things */
  --focus: #2F5BEA;
  --font: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #151A33;
    --ink: #E8ECF8;
    --ink-soft: #9AA3C7;
    --rule: #2A3158;
    --lock: #B4A3F2;
    --focus: #8FA9FF;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.5;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 6px; }

.page {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(40px, 9vw, 112px) clamp(20px, 5vw, 48px) 48px;
}

/* ---------- hero: the name is the picture */
.wordmark {
  margin: 0;
  font-weight: 800;
  font-size: clamp(76px, 19vw, 188px);
  line-height: .86;
  letter-spacing: -.055em;
  font-variation-settings: "opsz" 96;
  display: flex;
  flex-wrap: wrap;
}
.wordmark .dot {
  display: inline-block;
  color: var(--paper);
  -webkit-text-stroke: .045em var(--ink);
  margin: 0 -.02em;
}
.lede {
  max-width: 34ch;
  margin: 28px 0 0;
  font-size: clamp(19px, 2.4vw, 23px);
  line-height: 1.4;
  color: var(--ink-soft);
}

/* ---------- the index */
.projects {
  list-style: none;
  margin: clamp(56px, 10vw, 104px) 0 0;
  padding: 0;
}
.project { border-top: 2px solid var(--rule); }
.project:last-child { border-bottom: 2px solid var(--rule); }
.project a {
  --c: var(--ink);
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "swatch title meta"
    ".      desc  desc";
  column-gap: 18px;
  row-gap: 6px;
  align-items: baseline;
  padding: 26px 4px 28px;
  text-decoration: none;
}
.swatch {
  grid-area: swatch;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c);
  align-self: center;
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.title {
  grid-area: title;
  font-weight: 600;
  font-size: clamp(36px, 7vw, 64px);
  line-height: 1;
  letter-spacing: -.035em;
  transition: color .15s;
}
.meta {
  grid-area: meta;
  font-size: 15px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.desc {
  grid-area: desc;
  max-width: 52ch;
  color: var(--ink-soft);
  font-size: 17px;
}
.host { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.lock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--lock);
}
.lock svg { width: 14px; height: 14px; }

.project a:hover .title,
.project a:focus-visible .title { color: var(--c); }
.project a:hover .swatch,
.project a:focus-visible .swatch { transform: scale(1.35); }

.empty { color: var(--ink-soft); padding: 24px 0; }

/* ---------- footer */
.foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 72px;
  font-size: 15px;
  color: var(--ink-soft);
}
.foot a { text-underline-offset: 3px; }

@media (max-width: 560px) {
  .project a {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "swatch title"
      ".      desc"
      ".      meta";
  }
  .meta { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}