:root { --ink:#141414; --soft:#777; --line:#d9d9d5; --paper:#fff; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { margin:0; min-height:100%; }
body { background:var(--paper); color:var(--ink); font-family:"DM Sans",sans-serif; display:flex; flex-direction:column; }
a { color:inherit; }
.site-header { height:78px; display:flex; align-items:center; padding:0 4vw; border-bottom:1px solid #eee; }
.wordmark { font-size:17px; font-weight:600; letter-spacing:-.04em; text-decoration:none; }
main { flex:1; }
.start-view { min-height:calc(100vh - 130px); display:grid; place-items:center; padding:64px 24px; }
.intro { width:min(100%, 560px); text-align:center; }
.eyebrow { margin:0 0 18px; color:var(--soft); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(42px,6vw,72px); line-height:.96; letter-spacing:-.065em; font-weight:500; }
.lede { width:min(100%,440px); margin:27px auto 48px; color:var(--soft); font-size:16px; line-height:1.55; }
.field-label { display:block; margin:0 0 9px; text-align:left; font-size:12px; font-weight:600; }
.input-row { display:flex; border-bottom:1px solid var(--ink); }
.input-row input { min-width:0; flex:1; border:0; outline:0; padding:15px 0; background:transparent; font:inherit; font-size:17px; }
.input-row button, .button { border:0; font:inherit; cursor:pointer; }
.input-row button { display:flex; align-items:center; gap:20px; background:transparent; padding:0 2px 0 16px; font-weight:600; }
.field-note { margin:10px 0 0; color:var(--soft); font-size:12px; text-align:left; }
.error { min-height:22px; margin:20px 0 0; color:#a13b2c; font-size:13px; }
footer { padding:18px 4vw; color:#888; font-size:11px; }
.grid-view { padding:54px 4vw 80px; }
.grid-toolbar { display:flex; justify-content:space-between; align-items:flex-end; gap:28px; margin-bottom:42px; }
.grid-toolbar h1 { font-size:clamp(34px,5vw,58px); overflow-wrap:anywhere; }
.muted { color:var(--soft); font-size:13px; margin:12px 0 0; }
.actions { display:flex; gap:8px; flex-shrink:0; }
.button { padding:12px 17px; border:1px solid var(--ink); border-radius:999px; font-size:13px; }
.button.primary { background:var(--ink); color:#fff; }
.button.secondary { background:#fff; color:var(--ink); }
.button.secondary.active { background:#ecece8; border-color:#ecece8; }
.button:disabled { opacity:.45; cursor:wait; }
.loading { padding:55px 0 75px; color:var(--soft); text-align:center; }
.loading p { margin:24px 0 6px; color:var(--ink); font-size:18px; font-weight:600; }
.loading span { display:block; font-size:13px; }
.loading small { display:block; margin-top:7px; color:#aaa; font-size:11px; }
.media-loader { height:120px; display:flex; align-items:center; justify-content:center; gap:22px; }
.vinyl,.cd { position:relative; width:104px; height:104px; border-radius:50%; animation:spin 2.6s linear infinite; }
.vinyl { background:repeating-radial-gradient(circle,#191919 0 3px,#292929 4px 6px); box-shadow:0 10px 25px #0002; }
.vinyl::before { content:""; position:absolute; inset:34px; border-radius:50%; background:#e26045; }
.vinyl::after,.cd::after { content:""; position:absolute; inset:47px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px #111; }
.vinyl i,.cd i { position:absolute; inset:8px; border:1px solid #fff2; border-radius:50%; }
.cd { background:conic-gradient(from 20deg,#d9d9d4,#f8a8d0,#a7e8ef,#f6ed9a,#d9d9d4,#a6c8f4,#d9d9d4); box-shadow:0 10px 25px #0002; animation-duration:2s; animation-direction:reverse; }
.cd::before { content:""; position:absolute; inset:38px; border-radius:50%; background:#f7f7f4; box-shadow:0 0 0 2px #aaa8; }
.cd::after { inset:48px; background:#fff; box-shadow:0 0 0 2px #aaa; }
.cd i { inset:12px; border-color:#fff9; }
.cassette { position:relative; width:154px; height:94px; border:2px solid #222; border-radius:8px; background:#e6d6b5; box-shadow:0 10px 25px #0002; }
.cassette::before { content:""; position:absolute; left:16px; right:16px; top:16px; height:43px; border-radius:4px; background:#f8f4e9; border:1px solid #333; }
.cassette::after { content:"RECORD GRID"; position:absolute; left:0; right:0; top:4px; font:600 6px "DM Sans",sans-serif; letter-spacing:.18em; color:#555; }
.reel { position:absolute; z-index:1; top:27px; width:23px; height:23px; border:5px dotted #222; border-radius:50%; animation:spin 1.2s linear infinite; }
.reel.left { left:34px; }.reel.right { right:34px; }
.cassette b { position:absolute; left:37px; right:37px; bottom:9px; height:20px; border:1px solid #333; background:#d1b783; clip-path:polygon(12% 0,88% 0,100% 100%,0 100%); }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .vinyl,.cd,.reel { animation-duration:8s; } }
.grid-error { text-align:center; }
.record-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:0; background:#fff; }
.record { min-width:0; }
.cover { display:block; width:100%; aspect-ratio:1; object-fit:cover; background:#eee; }
.details { min-height:67px; padding:10px 10px 13px; background:#fff; }
.details strong, .details span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.details strong { font-weight:600; }
.details span { margin-top:2px; color:#777; }
@media (max-width:650px) {
  .site-header { height:64px; }
  .start-view { min-height:calc(100vh - 110px); padding-top:40px; }
  .lede { margin-bottom:36px; }
  .grid-view { padding-top:35px; }
  .grid-toolbar { display:block; }
  .actions { margin-top:25px; flex-wrap:wrap; }
  .record-grid { grid-template-columns:repeat(3,1fr); }
  .media-loader { gap:10px; transform:scale(.78); margin-inline:-45px; }
  .details { min-height:58px; padding:7px; }
  .details strong,.details span { font-size:9px; }
}