/* A record shelf: two sleeves per ledge, in the owner's chosen order. */
.page-records { margin: 0; font-family: 'SuisseIntl', Arial, sans-serif; font-size: 18px; }
.page-records *, .page-records *::before, .page-records *::after { box-sizing: border-box; }
.records-nav { max-width: 900px; margin: 0 auto; padding: 30px 32px 0; display: flex; align-items: center; justify-content: space-between; }
.home-monogram { font-size: 42px; line-height: 1; text-decoration: none; letter-spacing: -.05em; width: 44px; height: 48px; display: flex; align-items: center; }
.records-nav .theme-toggle { position: static; }
.records-intro { max-width: 640px; margin: 74px auto 72px; padding: 0 20px; }
.records-intro h1 { font-size: 32px; font-weight: 400; line-height: 1.2; letter-spacing: -.03em; margin: 0 0 24px; }
.records-intro p { font-size: 18px; line-height: 1.65; margin: 0; text-wrap: pretty; }
.record-shelves { --cover-size: clamp(132px, 28vw, 232px); max-width: 800px; margin: 0 auto; padding: 0 24px 80px; }
.shelf-row { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 44px; padding: 0 40px; margin-bottom: 78px; }
.record { min-width: 0; margin: 0; position: relative; z-index: 1; }
.shelf-row > .record:only-of-type { grid-column: 1 / -1; justify-self: center; width: var(--cover-size); }
.record-link { display: flex; align-items: flex-start; flex-direction: column; width: 100%; color: var(--ink); text-decoration: none; }
.record-object { position: relative; display: block; width: var(--cover-size); height: var(--cover-size); isolation: isolate; transform-origin: bottom center; transition: transform 240ms cubic-bezier(.23,1,.32,1); }
.record-cover { display: block; position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain; border-radius: 1px 2px 2px 1px; box-shadow: -3px 3px 8px #00000020, 1px 0 2px #00000030; }
.record-object::after { content: ''; position: absolute; z-index: 3; inset: 0; pointer-events: none; border-radius: 1px; background: linear-gradient(90deg, #ffffff1a, #00000014 1.3%, transparent 2.4%, transparent 98.5%, #ffffff14); box-shadow: inset 0 0 0 1px #ffffff0c; }
.vinyl { position: absolute; z-index: 1; left: 17%; top: 3%; width: 94%; height: 94%; border-radius: 50%; background: radial-gradient(circle, transparent 0 30%, #00000000 30% 99%, #060606 99%), repeating-radial-gradient(circle, #161616 0 1px, #292929 1.3px 1.8px, #101010 2.2px 3px); box-shadow: 4px 4px 6px #00000022; transition: transform 260ms cubic-bezier(.23,1,.32,1); }
.vinyl::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 15deg, transparent, #ffffff20 13%, transparent 25%, transparent 45%, #ffffff16 58%, transparent 70%); }
.vinyl-label { position: absolute; top: 35%; left: 35%; width: 30%; height: 30%; background-size: cover; border-radius: 50%; }
.vinyl-label::after { content: ''; position: absolute; inset: 44%; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 1px #000; }
.record-title { display: block; margin-top: 27px; width: var(--cover-size); max-width: 100%; text-align: center; font-size: 15px; line-height: 1.45; text-wrap: balance; color: var(--ink); }
.shelf-ledge { position: absolute; z-index: 0; top: calc(var(--cover-size) - 1px); left: 0; right: 0; height: 10px; border-top: 1px solid #ffffff; background: linear-gradient(#e8e8e8, #d0d0d0); box-shadow: 0 10px 13px -7px #00000035, 0 18px 25px -12px #00000026; pointer-events: none; }
.shelf-ledge::before { content: ''; position: absolute; height: 20px; left: 0; right: 0; bottom: 100%; z-index: -1; background: linear-gradient(#f7f7f700, #e9e9e9); clip-path: polygon(3% 0,97% 0,100% 100%,0 100%); }
[data-theme="dark"] .shelf-ledge { border-top-color: #414141; background: linear-gradient(#2b2b2b, #222); box-shadow: 0 12px 16px -5px #00000090, 0 22px 24px -15px #00000070; }
[data-theme="dark"] .shelf-ledge::before { background: linear-gradient(#19191900, #303030); }
[data-theme="dark"] .record-cover { box-shadow: -3px 3px 10px #00000050, 1px 0 2px #00000080; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 50; padding: 8px 14px; background: var(--bg); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
@media (hover: hover) and (pointer: fine) {
  .record-link:hover .record-object { transform: translateY(-4px) rotate(-1deg); }
  .record-link:hover .vinyl { transform: translateX(8%) rotate(12deg); }
  .record-link:hover .record-title { text-decoration: underline; text-underline-offset: 4px; }
}
.record-link:focus-visible { outline-offset: 8px; border-radius: 2px; }
@media (max-width: 600px) {
  .records-nav { padding: 20px 24px 0; }
  .records-intro { margin: 18px auto 54px; padding: 0 28px; }
  .records-intro h1 { font-size: 28px; margin-bottom: 20px; }
  .records-intro p { font-size: 17px; line-height: 1.6; }
  .record-shelves { --cover-size: calc((100vw - 112px) / 2); padding: 0 16px 40px; }
  .shelf-row { padding: 0 16px; column-gap: 32px; margin-bottom: 52px; }
  .record-title { font-size: 13px; margin-top: 23px; }
  .shelf-ledge { height: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .record-object, .vinyl { transition: none; }
  .record-link:hover .record-object, .record-link:hover .vinyl { transform: none; }
}