*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

html, body {
  margin: 0;
  min-height: 100%;
  background: #0c0a08;
  color: #efe6d4;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  touch-action: pan-y;
  overscroll-behavior-y: contain;
}

body {
  padding:
    max(24px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(28px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
  background:
    radial-gradient(ellipse at 16% 0%, rgba(196, 72, 48, .16), transparent 42%),
    radial-gradient(ellipse at 90% 100%, rgba(90, 108, 78, .18), transparent 46%),
    #0c0a08;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.top { max-width: 720px; margin: 0 auto 8px; }
.kicker {
  margin: 0 0 10px;
  font-family: "Avenir Next Condensed", "Hiragino Sans", sans-serif;
  font-size: 12px;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: #c4a574;
}
h1 {
  margin: 0;
  font-size: clamp(32px, 8vw, 44px);
  font-weight: 400;
  letter-spacing: .12em;
}
.lead {
  margin: 12px 0 22px;
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: .04em;
  color: rgba(239, 230, 212, .72);
}

.search input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid rgba(239, 230, 212, .22);
  border-radius: 2px;
  background: rgba(20, 16, 12, .7);
  color: #efe6d4;
  font: 16px/1.4 "Hiragino Sans", "Yu Gothic", sans-serif;
  touch-action: manipulation;
  user-select: text;
  -webkit-user-select: text;
}
.search input:focus { outline: 1px solid #c4a574; }

.filters {
  display: flex;
  gap: 8px;
  margin: 14px 0 10px;
}
.chip {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(196, 165, 116, .35);
  background: transparent;
  color: #c4a574;
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 13px;
  letter-spacing: .12em;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .08s ease, opacity .08s ease, background .08s ease;
}
.chip.is-on { background: #c4a574; color: #14110e; }
.chip:active, .chip.is-pressed { transform: scale(0.92); opacity: .88; }

.count {
  margin: 0 0 6px;
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 12px;
  letter-spacing: .16em;
  color: rgba(239, 230, 212, .4);
}

#list { max-width: 720px; margin: 0 auto; }
.row {
  display: grid;
  grid-template-columns: 1fr 88px;
  gap: 12px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid rgba(239, 230, 212, .12);
}
.row:last-child { border-bottom: 1px solid rgba(239, 230, 212, .12); }
.name {
  margin: 0;
  font-size: 20px;
  letter-spacing: .04em;
  line-height: 1.3;
}
.meta {
  margin: 6px 0 0;
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(239, 230, 212, .62);
}
.date {
  display: inline-block;
  margin-right: 10px;
  letter-spacing: .12em;
  color: #c4a574;
}
.play {
  display: grid;
  place-items: center;
  min-height: 52px;
  min-width: 88px;
  border: 1px solid #c23a2b;
  color: #f3d5cf;
  text-decoration: none;
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 14px;
  letter-spacing: .16em;
  touch-action: manipulation;
  transition: transform .08s ease, opacity .08s ease;
}
.play:active, .play.is-pressed {
  transform: scale(0.92);
  opacity: .88;
}

.empty {
  padding: 28px 0;
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
  color: rgba(239, 230, 212, .5);
}