:root {
  --paper: #ebe5dc;
  --ink: #12110f;
  --muted: #716b62;
  --line: rgba(24, 22, 19, .16);
  --amber: #c9914d;
}

* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, "Noto Sans SC", "Microsoft YaHei", sans-serif; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .045; background-image: radial-gradient(circle, var(--ink) .7px, transparent .8px); background-size: 22px 22px; }
a { color: inherit; text-decoration: none; }
.records-header { position: relative; z-index: 1; width: min(1380px, calc(100% - 72px)); min-height: 74px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); font-size: .72rem; }
.records-header a { font-weight: 800; font-size: 1.05rem; }
main { position: relative; z-index: 1; width: min(1380px, calc(100% - 72px)); margin: 0 auto; padding: 11vh 0; }
.record-entry { display: grid; min-height: 420px; align-content: end; padding: clamp(28px, 5vw, 68px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.record-entry small { color: var(--amber); font-family: Consolas, monospace; }
.record-entry h1 { margin: 18px 0; font: 500 clamp(3.8rem, 9vw, 8rem)/.9 Georgia, "Songti SC", serif; }
.record-entry p { max-width: 34rem; color: var(--muted); line-height: 1.8; }
.record-entry > span { margin-top: 24px; font-size: .8rem; }

@media (max-width: 560px) {
  .records-header, main { width: calc(100% - 28px); }
  .record-entry { min-height: 360px; padding: 24px 0; }
}