/* spite.stream. One typeface (Archivo, variable weight and width, self-hosted because the CSP
   allows no font CDN), one accent, and the app itself drawn in CSS. */
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --bg: #0b0b0c;
  --surface: #141416;
  --raised: #1c1c1f;
  --line: #2a2a2e;
  --text: #f4f2ee;
  --mute: #a3a29f;
  --dim: #6e6d6a;
  --accent: #ff4a1c;
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}

main {
  overflow-x: clip;
}

a {
  color: inherit;
}

p {
  margin: 0;
}

.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--accent);
  color: var(--bg);
  padding: 8px 14px;
  z-index: 10;
}
.skip:focus {
  left: 8px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Header */
.top {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgb(11 11 12 / 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.top-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 64px;
}
.logo {
  font-weight: 900;
  font-stretch: 125%;
  font-size: 26px;
  letter-spacing: -0.03em;
  line-height: 1;
  text-decoration: none;
}
.logo::after {
  content: '.';
  color: var(--accent);
}
.top nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.top nav a {
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  color: var(--mute);
}
.top nav a:hover {
  color: var(--text);
}
.top nav .pill {
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
}
.top nav .pill:hover {
  border-color: var(--accent);
}

/* Type */
h1,
h2,
h3 {
  margin: 0;
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.025em;
}
h1 {
  font-size: clamp(46px, 6.8vw, 96px);
  line-height: 0.95;
  max-width: none;
}
h2 {
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1;
  max-width: 17ch;
}
h3 {
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-stretch: 105%;
}
.eyebrow {
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.sub {
  color: var(--mute);
  max-width: 62ch;
  margin-top: 22px;
  font-size: 18px;
}

/* Buttons */
.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.btn {
  display: inline-block;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  padding: 15px 24px;
  border-radius: 10px;
  background: var(--accent);
  color: #120500;
  border: 1px solid var(--accent);
}
.btn:hover {
  background: #ff6a43;
}
.btn.ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}
.btn.ghost:hover {
  border-color: var(--text);
}

/* Hero */
.hero {
  padding: 88px 0 0;
}
.hero-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px 48px;
  margin-top: 36px;
}
.lede {
  color: var(--mute);
  font-size: 20px;
  max-width: 46ch;
}

/* The app, drawn: sidebar, two rows of tiles and a now playing bar. Nobody's real library. */
.app {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 190px 1fr;
  grid-template-rows: 1fr auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  box-shadow: 0 -30px 120px rgb(255 74 28 / 0.08);
}
.app-side {
  border-right: 1px solid var(--line);
  padding: 22px 14px;
  font-size: 14px;
  color: var(--mute);
}
.app-side p {
  padding: 8px 12px;
  border-radius: 8px;
}
.app-side .app-logo {
  font-weight: 900;
  font-stretch: 125%;
  font-size: 20px;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 14px;
}
.app-side .on {
  background: var(--raised);
  color: var(--text);
  font-weight: 600;
}
.app-main {
  padding: 24px 28px 28px;
  min-width: 0;
}
.row-title {
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 12px;
}
.row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.row.wide {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 26px;
}
.tile {
  aspect-ratio: 1;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.wide .tile {
  aspect-ratio: 16 / 9;
}
.v1 {
  background: linear-gradient(135deg, #2b3a55, #0f1522 60%, #c27a3a);
}
.v2 {
  background: linear-gradient(160deg, #3d1f2d, #7d2a2a 50%, #1a0f12);
}
.v3 {
  background: linear-gradient(120deg, #1e3b33, #4f8a6b 55%, #10201b);
}
.bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  background: var(--accent);
}
.b30 {
  width: 30%;
}
.b70 {
  width: 70%;
}
.b85 {
  width: 85%;
}
.app-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: var(--raised);
  border-top: 1px solid var(--line);
}
.np-art {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 6px;
}
.np-text {
  min-width: 0;
}
.np-title {
  font-weight: 700;
  font-size: 15px;
}
.np-sub {
  color: var(--mute);
  font-size: 13px;
}
.np-prog {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  margin: 0 12px;
  min-width: 40px;
}
.np-prog span {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: 2px;
  background: var(--text);
}
.np-fmt {
  font-size: 13px;
  color: var(--mute);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}
.np-fmt b,
.tr-sub b {
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Sleeves. Made-up records drawn in CSS: flat colour, big type, nothing from a real library.
   Each sleeve is a size container, so its type is set in cqw and the same sleeve reads the
   same at 46 px in the now playing bar and at 220 px on the wall. */
.sleeve {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  container-type: inline-size;
  border-radius: 4px;
  color: #fff;
  font-weight: 800;
  line-height: 0.9;
  text-transform: uppercase;
}
.sleeve span {
  position: absolute;
  display: block;
  white-space: nowrap;
}
.tile.sleeve {
  border-radius: 6px;
}

/* Harbor Lights, Low Tide: a sun going into the sea. */
.sl-tide {
  background:
    repeating-linear-gradient(180deg, #0b2a50 0 7%, transparent 7% 14%) 0 100% / 100% 42% no-repeat,
    linear-gradient(90deg, #0b2a50 34%, #ffcf5a 34% 66%, #0b2a50 66%) 0 100% / 100% 42% no-repeat,
    radial-gradient(ellipse 24% 24% at 50% 58%, #ffcf5a 98%, transparent 100%),
    linear-gradient(#ff7a3a, #d23c5a 58%);
}
.sl-tide .a {
  top: 8%;
  left: 8%;
  font-size: 6.5cqw;
  font-stretch: 125%;
  letter-spacing: 0.08em;
}
.sl-tide .t {
  top: 17%;
  left: 7%;
  font-size: 15cqw;
  font-stretch: 120%;
  font-weight: 900;
  letter-spacing: -0.03em;
}

/* Glass Pylon, YES: three letters filling the sleeve. */
.sl-yes {
  background: linear-gradient(transparent 80%, #129a4a 80%), #ffe600;
  color: #111;
}
.sl-yes .t {
  top: 4%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 64cqw;
  font-weight: 900;
  font-stretch: 62%;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.sl-yes .a {
  bottom: 6%;
  right: 7%;
  color: #fff;
  font-size: 7cqw;
  font-stretch: 125%;
}

/* The Downstairs, Live at the Laundromat: a red field and very little on it. */
.sl-deaf {
  background: #b3121c;
}
.sl-deaf .a {
  top: 34%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 8cqw;
  font-stretch: 108%;
}
.sl-deaf .t {
  top: 46%;
  left: 0;
  right: 0;
  text-align: center;
  color: #ffb3a8;
  font-size: 4cqw;
  letter-spacing: 0.24em;
}

/* Margot, Velvet Hours. */
.sl-margot {
  background: radial-gradient(ellipse 17% 17% at 50% 32%, #111 97%, transparent 100%), #0f8f45;
}
.sl-margot .a {
  top: 58%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 15cqw;
  font-stretch: 125%;
  letter-spacing: 0.1em;
}
.sl-margot .t {
  top: 75%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 4.2cqw;
  letter-spacing: 0.4em;
}

/* Ana Prado, Solar: the title stacked in three colours on black. */
.sl-solar {
  background: #111;
}
.sl-solar .t {
  left: 5%;
  font-size: 46cqw;
  font-weight: 900;
  font-stretch: 75%;
  letter-spacing: -0.05em;
  line-height: 0.82;
  color: transparent;
  background: linear-gradient(90deg, #ff4a1c 0 36%, #ffd23f 36% 70%, #2fb8e6 70%);
  -webkit-background-clip: text;
  background-clip: text;
}
.sl-solar .t1 {
  top: 6%;
}
.sl-solar .t2 {
  top: 44%;
}
.sl-solar .a {
  bottom: 6%;
  right: 6%;
  font-size: 6cqw;
  font-stretch: 125%;
}

/* Ninth Wave, Spiral. */
.sl-spiral {
  background: repeating-radial-gradient(circle at 50% 44%, #e31d1d 0 5%, #ffd400 5% 10%);
}
.sl-spiral .a {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 4% 0 5%;
  text-align: center;
  background: #111;
  color: #ffd400;
  font-size: 10cqw;
  font-stretch: 125%;
}

/* Midnight Arcade, silk: one slash of light on black. */
.sl-silk {
  background: linear-gradient(112deg, #0e0e0e 47%, #ff6a2a 47% 50%, #fff 50% 51.5%, #0e0e0e 51.5%);
}
.sl-silk .t {
  bottom: 13%;
  right: 8%;
  color: #ff6a2a;
  font-size: 13cqw;
  text-transform: none;
}
.sl-silk .a {
  bottom: 8%;
  right: 8%;
  font-size: 4cqw;
  letter-spacing: 0.2em;
}

/* Signal Fire, Fault Lines: a yellow banner across a burnt sky. */
.sl-fault {
  background: linear-gradient(#3b1a0b, #d9822b 62%, #5a2a12);
}
.sl-fault .t {
  top: 38%;
  left: -4%;
  right: -4%;
  padding: 2.5% 0 2%;
  text-align: center;
  background: #ffe600;
  color: #111;
  border-top: 1.6cqw solid #111;
  border-bottom: 1.6cqw solid #111;
  font-size: 12cqw;
  font-weight: 900;
  font-stretch: 100%;
  transform: rotate(-5deg);
}
.sl-fault .a {
  top: 10%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 8cqw;
  font-stretch: 125%;
}

/* Paper Moons, Side B: a pattern and a round label. */
.sl-dots {
  background:
    radial-gradient(circle closest-side, #ff4fa3 70%, transparent 74%) 0 0 / 20% 20%,
    radial-gradient(circle closest-side, #ffd23f 70%, transparent 74%) 10% 10% / 20% 20%,
    #2a2a8f;
}
.sl-dots .t {
  top: 25%;
  left: 25%;
  width: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff3d6;
  color: #2a2a8f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15em;
  font-size: 6cqw;
  font-stretch: 112%;
  text-align: center;
  white-space: normal;
}
.sl-dots .t small {
  font-size: 0.6em;
  letter-spacing: 0.2em;
  color: #ff4fa3;
}

/* Neon Coast. */
.sl-neon {
  background: linear-gradient(160deg, #ff3d8b, #ff8a3d 45%, #3d1aa8);
}
.sl-neon .t {
  left: 7%;
  font-size: 24cqw;
  font-weight: 900;
  font-stretch: 100%;
  letter-spacing: -0.04em;
  text-shadow: 1.4cqw 1.4cqw 0 #3d1aa8;
}
.sl-neon .t1 {
  top: 38%;
}
.sl-neon .t2 {
  top: 63%;
}

/* The wall of records. */
.shelf .wall {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-top: 56px;
}
.wall .sleeve {
  box-shadow: 0 24px 40px -24px rgb(0 0 0 / 0.9);
}
.wall-note {
  color: var(--dim);
  font-size: 14px;
  margin-top: 20px;
}

/* Facts */
.facts {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.facts-in {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.facts p {
  padding: 34px 24px 34px 0;
  color: var(--mute);
  font-size: 15px;
  line-height: 1.35;
}
.facts p + p {
  padding-left: 24px;
  border-left: 1px solid var(--line);
}
.facts b {
  display: block;
  color: var(--text);
  font-size: 56px;
  font-weight: 850;
  font-stretch: 115%;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 8px;
}

/* Sections */
.band {
  padding: 120px 0;
}
.band.alt {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.grid3,
.grid4 {
  display: grid;
  gap: 40px 36px;
  margin-top: 60px;
}
.grid3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid4 {
  grid-template-columns: repeat(4, 1fr);
}
.grid3 > div,
.grid4 > div {
  border-top: 2px solid var(--line);
  padding-top: 20px;
}
.grid3 p,
.grid4 p,
.grid3 dd {
  color: var(--mute);
  margin-top: 8px;
  font-size: 16px;
}
.device {
  border-top-color: var(--accent) !important;
}

.split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 72px;
  align-items: center;
}
.ticks {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
}
.ticks li {
  padding: 12px 0 12px 30px;
  border-top: 1px solid var(--line);
  color: var(--mute);
  position: relative;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 21px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.ticks b {
  color: var(--text);
  font-weight: 700;
}

/* Panels drawn like the app */
.panel {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.45);
}
.band:not(.alt) .panel {
  background: var(--surface);
}
.tr-head {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 14px 14px 20px;
}
.tr-art {
  width: 88px;
  height: 88px;
  flex: none;
  border-radius: 8px;
}
.tr-title {
  font-size: 26px;
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.02em;
}
.tr-sub {
  color: var(--mute);
  font-size: 14px;
}
.tr,
.g-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 15px;
}
.tr i,
.g-row b {
  font-style: normal;
  color: var(--dim);
  width: 34px;
  font-variant-numeric: tabular-nums;
}
.tr em,
.g-row em {
  margin-left: auto;
  font-style: normal;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.tr.on,
.g-row.on {
  background: rgb(255 74 28 / 0.14);
}
.tr.on,
.tr.on i,
.g-row.on b,
.g-row.on em {
  color: var(--accent);
  font-weight: 700;
}
.g-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 800;
  font-stretch: 112%;
  font-size: 20px;
  padding: 14px 14px 16px;
}
.g-head span {
  font-weight: 500;
  font-stretch: 100%;
  font-size: 14px;
  color: var(--mute);
}
.g-row b {
  color: var(--text);
  font-weight: 700;
}
.g-ad {
  margin: 12px 4px 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  font-weight: 600;
  font-size: 15px;
}
.g-ad span {
  color: var(--accent);
}

/* Rules */
.rules {
  list-style: none;
  counter-reset: r;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px 72px;
}
.rules li {
  counter-increment: r;
  position: relative;
  padding-left: 76px;
}
.rules li::before {
  content: counter(r, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -4px;
  font-size: 40px;
  font-weight: 850;
  font-stretch: 115%;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
}
.rules h3 {
  font-size: clamp(24px, 2.6vw, 32px);
  font-stretch: 112%;
  letter-spacing: -0.02em;
}
.rules p {
  color: var(--mute);
  margin-top: 8px;
}

/* Status */
.status {
  background:
    radial-gradient(60% 90% at 100% 0%, rgb(255 74 28 / 0.12), transparent 70%), var(--surface);
  border-top: 1px solid var(--line);
}
.faq dt {
  font-weight: 700;
}
.faq dd {
  margin: 0;
}

/* Footer */
.foot {
  border-top: 1px solid var(--line);
  padding: 32px 0;
  color: var(--dim);
  font-size: 14px;
}
.foot-in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.logo.small {
  font-size: 20px;
  color: var(--text);
}

/* 404 */
.lost {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 24px;
}
.lost .cta {
  margin-top: 36px;
}

@media (max-width: 960px) {
  .split {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .grid3,
  .grid4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .facts-in {
    grid-template-columns: repeat(2, 1fr);
  }
  .facts p:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .facts p:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
  .app {
    grid-template-columns: 1fr;
  }
  .app-side {
    display: none;
  }
  .row {
    grid-template-columns: repeat(4, 1fr);
  }
  .row .tile:nth-child(n + 5) {
    display: none;
  }
  .shelf .wall {
    grid-template-columns: repeat(4, 1fr);
  }
  .wall .sleeve:nth-child(n + 9) {
    display: none;
  }
}

@media (max-width: 620px) {
  body {
    font-size: 16px;
  }
  .top nav {
    gap: 16px;
  }
  .top nav a:not(.pill) {
    display: none;
  }
  .hero {
    padding-top: 56px;
  }
  .lede {
    font-size: 18px;
  }
  .app {
    margin-top: 48px;
  }
  .app-main {
    padding: 18px;
  }
  .row,
  .row.wide {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .row .tile:nth-child(n + 3) {
    display: none;
  }
  .shelf .wall {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .wall .sleeve:nth-child(n + 7) {
    display: none;
  }
  .np-prog,
  .np-fmt {
    display: none;
  }
  .facts b {
    font-size: 44px;
  }
  .facts p {
    padding: 26px 16px 26px 0;
  }
  .facts p + p {
    padding-left: 16px;
  }
  .band {
    padding: 88px 0;
  }
  .grid3,
  .grid4,
  .rules {
    grid-template-columns: 1fr;
  }
  .rules {
    gap: 40px;
  }
  .rules li {
    padding-left: 60px;
  }
  .rules li::before {
    font-size: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}