/* peekstar.eu: one quiet page. No scripts, nothing from anywhere else. */
@font-face {
  font-family: "Jost";
  src: url("/fonts/jost.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ground: #fbfaf7;
  --ink: #16181d;
  --muted: #5d6270;
  --line: #e4e1d8;
  --gold: #a8842f;
  --lapis: #22418f;
  --display: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --text: Verdana, "DejaVu Sans", "Bitstream Vera Sans", system-ui, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0b0d12;
    --ink: #e8e6df;
    --muted: #9aa0ad;
    --line: #232733;
    --gold: #d2b262;
    --lapis: #8fa8ec;
  }
}

* { box-sizing: border-box; }

html { background: var(--ground); }

body {
  margin: 0;
  padding-inline: 1.25rem;
  color: var(--ink);
  background: var(--ground);
  font: 15px/1.65 var(--text);
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 42rem;
  margin: 0 auto;
  padding-block: clamp(3rem, 12vh, 7rem) 3rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--lapis); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--gold); }

.mark {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font: 300 clamp(2.6rem, 9vw, 3.6rem)/1 var(--display);
  letter-spacing: 0.04em;
}

.mark svg { width: 0.62em; height: 0.62em; flex: none; }

.lede {
  margin: 1.4rem 0 3.2rem;
  max-width: 34rem;
  color: var(--muted);
  font-size: 1.05rem;
}

h2 {
  margin: 0 0 0.4rem;
  font: 500 0.78rem/1 var(--display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.projects { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }

.projects li { border-bottom: 1px solid var(--line); }

.projects a, .projects .soon {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 0.2rem 1.4rem;
  padding: 1.1rem 0;
  color: inherit;
  text-decoration: none;
}

.projects a:hover .name { color: var(--gold); }

.name { font: 400 1.25rem/1.3 var(--display); letter-spacing: 0.02em; }
.what { color: var(--ink); }
.where { grid-column: 2; color: var(--muted); font-size: 0.85rem; }
.projects a .where { color: var(--lapis); }

footer {
  margin-top: auto;
  padding-top: 3.5rem;
  color: var(--muted);
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 2rem;
}

footer p { margin: 0; }

.legal main { min-height: auto; }
.legal h1 { font: 300 2.2rem/1.2 var(--display); margin: 0 0 1.5rem; letter-spacing: 0.02em; }
.legal h2 { margin-top: 2.2rem; }
.legal .back { display: inline-block; margin-bottom: 2.5rem; font-size: 0.85rem; }
.legal address { font-style: normal; }

@media (max-width: 34rem) {
  .projects a, .projects .soon { grid-template-columns: 1fr; }
  .where { grid-column: 1; }
}