:root {
  --bg: #000;
  --fg: #ff2200;
  --dim: #b0200a;
  --line: #ff2200;
  --big: 11px;
  --small: 9px;
  --gap: 16px;
  --side: clamp(24px, 10vw, 200px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--big)/1.5 "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  -webkit-font-smoothing: antialiased;
  text-transform: uppercase;
  letter-spacing: .02em;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2 { font: inherit; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }
.dim { color: var(--dim); }

/* Two sizes only: --big for content, --small for labels and meta */
.meta, .thead, .foot h2, .c-text, .signup-msg { font-size: var(--small); letter-spacing: .06em; }
.plain { list-style: none; }

/* One 12 column grid, full width, used by every row */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  padding: 0 var(--side);
}

/* Top */
.top { padding-top: 64px; padding-bottom: 120px; align-items: start; }
.logo { grid-column: 1 / 3; }
.meta { grid-column: 10 / 13; text-align: right; }
.status { grid-column: 7 / 10; display: grid; grid-template-columns: max-content 1fr; column-gap: var(--gap); text-align: left; }
.status dt { color: var(--dim); }
.cursor { display: inline-block; width: .6em; height: 1em; margin-left: .3em; vertical-align: -2px; background: currentColor; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.pj-logo { display: block; width: 100%; max-width: 240px; height: auto; overflow: visible; }

/* The logo is traced as an outline from both ends of every path at once,
   the two lines meet, then the shape fills in */
.pj-logo path {
  fill: currentColor;
  fill-opacity: 0;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 0 1 0 0;
  animation: trace 1.4s var(--ease) forwards, fill-in .6s ease forwards;
}
.pj-logo .pj-hand { animation-delay: 0s, 1.3s; }
.pj-logo .pj-hand:nth-child(2) { animation-delay: .15s, 1.45s; }
.pj-logo .pj-hand:nth-child(3) { animation-delay: .3s, 1.6s; }
.pj-word path { animation-delay: .5s, 1.8s; }

@keyframes trace { to { stroke-dasharray: .5 0 .5 0; } }
@keyframes fill-in { to { fill-opacity: 1; stroke-width: 0; } }
@keyframes fade { to { opacity: 1; } }

/* After the logo, every line prints in one after another, left to right */
body .seq.seq {
  animation: print .3s steps(8) backwards;
  animation-delay: calc(2.2s + var(--seq) * 60ms);
}
@keyframes print {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
main { flex: 1; }

/* Release table */
.c-cat { grid-column: 1 / 3; }
.c-artist { grid-column: 3 / 6; }
.c-title { grid-column: 6 / 10; }
.c-format { grid-column: 10 / 12; }
.c-toggle { grid-column: 12 / 13; text-align: right; white-space: nowrap; }

.thead { color: var(--dim); padding-bottom: 4px; }

.release-list { list-style: none; margin: 0 var(--side); }
.release { border-bottom: 1px solid var(--line); }
.release:first-child { border-top: 1px solid var(--line); }

.release-head {
  width: 100%;
  padding: 6px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}
.release-head:hover, .release.open .release-head { background: var(--fg); color: var(--bg); }
.release-head:focus-visible { outline: 1px solid var(--fg); outline-offset: -1px; }

.release-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease);
}
.release.open .release-body { grid-template-rows: 1fr; }
.release-inner { overflow: hidden; }
.release-content { padding: 12px 0 16px; align-items: start; }

.links { grid-column: 3 / 10; list-style: none; }
.links a::before { content: "> "; }
.links a::after { content: " .... OPEN"; color: var(--dim); }
.links span::before { content: "  "; white-space: pre; }
.links span { color: var(--dim); }

/* Footer */
.footer { padding-top: 120px; }
.foot { padding-bottom: 80px; align-items: start; }
.foot h2 { margin-bottom: 4px; }
.c-a { grid-column: 1 / 3; }
.c-b { grid-column: 3 / 6; }
.c-c { grid-column: 6 / 10; }

.signup { display: grid; max-width: 320px; }
.signup input {
  all: unset;
  box-sizing: border-box;
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
}
.signup input::placeholder { color: var(--dim); }
.signup input { color: var(--fg); caret-color: var(--fg); }
::selection { background: var(--fg); color: var(--bg); }
.signup button { all: unset; cursor: pointer; justify-self: start; margin-top: 8px; }
.signup button:hover { text-decoration: underline; text-underline-offset: 2px; }
.signup button:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }
.signup-msg { color: var(--dim); min-height: 1.4em; margin-top: 4px; }
.hp { position: absolute; left: -5000px; }

.family {
  border-top: 1px solid var(--line);
  margin: 0 var(--side);
  padding: 12px 0 48px;
  align-items: center;
}
.family:hover { text-decoration: none; }
.family:hover .c-text { text-decoration: underline; text-underline-offset: 2px; }
.c-text { grid-column: 1 / 7; }
.c-logo { grid-column: 10 / 13; justify-self: end; width: auto; height: 20px; }

@media (max-width: 720px) {
  :root { --big: 11px; }
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .logo { grid-column: 1 / 4; }
  .meta { grid-column: 4 / 7; }
  .status { display: none; }
  .c-cat { grid-column: 1 / 3; }
  .c-artist { grid-column: 3 / 6; }
  .c-title { grid-column: 3 / 6; }
  .c-format { display: none; }
  .c-toggle { grid-column: 6 / 7; grid-row: 1; }
  .rec-unit { display: none; }
  .thead .c-title { display: none; }
  .links { grid-column: 1 / -1; }
  .c-a { grid-column: 1 / 7; }
  .c-b { grid-column: 1 / 7; margin-top: 24px; }
  .c-c { grid-column: 1 / 7; margin-top: 24px; }
  .c-text { grid-column: 1 / 5; }
  .c-logo { grid-column: 5 / 7; }
}

@media (prefers-reduced-motion: reduce) {
  .pj-logo path, body .seq.seq { animation: none; fill-opacity: 1; stroke: none; clip-path: none; }
  .release-body { transition: none; }
}