.web-page {
  isolation: isolate;
  background-image: linear-gradient(110deg, #171d1cba, #271d1c72 58%, #171c1abb), var(--backdrop);
  background-attachment: fixed;
}
.web-page .header-wrap { position: relative; }

.records-rain {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.records-rain span {
  position: absolute;
  top: -48px;
  left: calc(var(--rain-x) * (100vw + 18vh + 9px));
  width: var(--rain-width);
  height: var(--rain-length);
  border-radius: 50%;
  background: linear-gradient(transparent, #dbe7e5);
  opacity: var(--rain-opacity);
  animation: records-rainfall var(--rain-duration) var(--rain-delay) linear infinite;
}
@keyframes records-rainfall {
  from { transform: translate3d(0, 0, 0) rotate(10deg); }
  to { transform: translate3d(calc(-18vh - 9px), calc(100vh + 60px), 0) rotate(10deg); }
}
@media (max-width: 640px) { .records-rain span:nth-child(n + 37) { display: none; } }
@media (prefers-reduced-motion: reduce) { .records-rain { display: none; } }

.records-shell {
  --record-gutter: clamp(22px, 5vw, 80px);
  --record-line: #ffb29e;
  padding: clamp(22px, 4vh, 50px) 0 28px;
}
.records-heading {
  margin-inline: var(--record-gutter);
  text-align: center;
  text-shadow: 0 2px 12px #1a1515;
}
.records-kicker {
  color: #ffd4c5;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .25em;
}
.records-heading h1 { font: 750 clamp(38px, 5vw, 62px)/1.18 var(--serif); margin-block: 5px 8px; }
.record-detail header button {
  width: 38px;
  height: 38px;
  border: 1px solid #e4a99c80;
  border-radius: 50%;
  background: #322322ed;
  color: #ffe3d7;
  cursor: pointer;
}
.record-detail header button:hover { background: #67362f; }
.records-status {
  margin: 30px var(--record-gutter) 0;
  padding: 30px 20px;
  border: 1px solid #e4a99c70;
  border-radius: 12px;
  background: #282321d9;
  text-align: center;
}
.records-viewport {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  margin: 14px 0 12px;
}
.records-viewport::-webkit-scrollbar { display: none; }
.records-viewport.is-loading { visibility: hidden; }
.records-viewport:focus-visible { outline: 2px solid var(--record-line); outline-offset: -2px; }
.records-track {
  --record-image-height: clamp(102px, 15vh, 126px);
  --record-copy-height: 56px;
  --record-height: calc(var(--record-image-height) + var(--record-copy-height) + 2px);
  --record-offset: 27px;
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(248px, 72vw);
  gap: clamp(28px, 5vw, 78px);
  width: max-content;
  min-width: 100%;
  padding: 14px var(--record-gutter);
  list-style: none;
  user-select: none;
}
.records-track::before {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  border-top: 1px dashed var(--record-line);
  filter: drop-shadow(0 0 4px #e38a73);
  opacity: .8;
}
.record-entry { position: relative; display: grid; height: calc(2 * (var(--record-height) + var(--record-offset))); }
.record-entry::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 1px;
  height: var(--record-offset);
  background: var(--record-line);
}
.record-entry-lower::before { bottom: auto; top: 50%; }
.record-card {
  display: grid;
  grid-template-rows: var(--record-image-height) var(--record-copy-height);
  align-self: start;
  height: var(--record-height);
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #ffccb3a6;
  border-radius: 10px;
  background: linear-gradient(135deg, #3c3532cc, #503634cc);
  color: #fff1e7;
  box-shadow: 0 12px 26px #17131262;
  text-align: left;
  cursor: pointer;
}
.record-entry-lower .record-card { align-self: end; }
.record-card:hover { border-color: #ffe2d2; }
.record-card:focus-visible { outline-color: var(--record-line); }
.record-image { width: 100%; height: 100%; object-fit: cover; background: #332624; }
.record-copy { display: flex; align-items: center; min-width: 0; padding: 7px 13px; }
.record-excerpt {
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font: 600 14px/1.5 var(--serif);
  white-space: pre-line;
}
.record-node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  transform: translate(-50%, -50%);
  border: 2px solid #ffe4d6;
  border-radius: 50%;
  background: #a34438;
  box-shadow: 0 0 0 4px #e49b8850;
}
.record-time {
  position: absolute;
  top: calc(50% + 14px);
  justify-self: center;
  max-width: 95%;
  padding: 3px 10px;
  border: 1px solid #edb5a66b;
  border-radius: 6px;
  background: #312522ef;
  color: #ffe3d7;
  text-align: center;
  overflow-wrap: anywhere;
  font-size: 12px;
}
.record-entry-lower .record-time { top: auto; bottom: calc(50% + 14px); }
.record-detail {
  width: min(620px, 100% - 32px);
  max-height: 90dvh;
  padding: 20px;
  border: 1px solid #e7a08d;
  border-radius: 12px;
  background: #2b2322;
  color: #fff1e8;
}
.record-detail::backdrop { background: #171413bf; }
.record-detail header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.record-detail img { display: block; width: 100%; max-height: 52dvh; object-fit: contain; background: #1d1918; border-radius: 6px; }
.record-detail-time { margin-top: 12px; color: #ffbaaa; font-size: 13px; }
.record-detail-content { margin-top: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }