/* xtracklist.com -- the Midnight palette (Xtracklist/gui/theme.py) */
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #101319;
  --fg: #dfe4ec;
  --muted: #9aa5b8;
}

html, body { height: 100%; margin: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Archivo", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main {
  box-sizing: border-box;
  min-height: 100%;
  min-height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 0 16px 6vh;
  text-align: center;
}

/* the PNG carries the Midnight background itself: nothing may be drawn
   behind it, or its rectangle shows */
h1 { margin: 0; line-height: 0; animation: rise 1.6s cubic-bezier(.2, .7, .2, 1) both; }
h1 img { width: min(460px, 80vw); height: auto; }

/* THE LINE STAYS NARROWER THAN THE MARK, one sentence per line everywhere:
   on one line at 20px it ran wider than the logo (and past it on a phone),
   so the two read as separate things, not one lockup (2026-10-27) */
/* THE GAP FOLLOWS THE MARK, never the screen: about 1.2x the logo's own
   height everywhere. Tied to the screen's height it was 1.6x on a desktop
   and 2.1x on a phone, and the line drifted off the logo (2026-10-27). */
p {
  margin: calc(min(460px, 80vw) * 0.05) 0 0;
  font-size: clamp(15px, 0.85rem + 0.25vw, 17px);
  letter-spacing: 0.015em;
  /* two short lines read as one phrase, not a paragraph: 1.4, between the
     ~1.3 design systems give short lines and Butterick's 1.2-1.45 for text.
     1.65 (body-copy spacing) let the halves drift apart (2026-10-27). */
  line-height: 1.4;
  animation: fade 1.4s ease 0.9s both;
}
p span { display: block; }
p span:first-child { color: var(--muted); }

@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  h1, p { animation: none; }
}