.container { --paper: #faf9f7; --card: #ffffff; --ink: #1c1917; --ink-soft: #44403c; --muted: #6b645c; --line: #e7e3dc; --accent: #9a2d1f; --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Noto Serif", serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; max-width: 1024px; margin: 24px auto; overflow: visible; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.5; text-align: left; } .container *, .container *::before, .container *::after { box-sizing: border-box; } .container p { margin: 0; } .container img { max-width: 100%; height: auto; } .header { padding: 12px 16px; border-radius: 5px 5px 0 0; background: var(--ink); text-align: center; } .callout-badge { display: inline-block; color: var(--paper); font-size: 14px; letter-spacing: 0.02em; } .main { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "content" "images" "notes"; gap: 32px; padding: 20px; } .content-container { grid-area: content; display: flex; flex-direction: column; gap: 24px; min-width: 0; } .sidebar-container { grid-area: images; justify-self: center; width: 100%; max-width: 360px; } .notes { grid-area: notes; min-width: 0; } @media (min-width: 768px) { .main { grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto 1fr; grid-template-areas: "content images" "notes images"; align-items: start; gap: 32px 40px; padding: 32px; } } .images { display: flex; flex-direction: column; align-items: center; gap: 12px; } .image-disclaimer { display: inline-block; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-soft); font-size: 13px; font-weight: 600; } .image { display: block; width: 100%; padding: 6px; border: 1px solid var(--line); border-radius: 3px; background: #fff; box-shadow: 0 1px 3px rgba(28, 25, 23, 0.08); transition: scale 500ms ease-in-out, rotate 500ms ease-in-out, box-shadow 500ms ease-in-out; } @media (hover: hover) { .image:hover { position: relative; z-index: 2; scale: 1.5; rotate: 2deg; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } .image:nth-of-type(even):hover { rotate: -2deg; } } .release { padding-bottom: 16px; border-bottom: 1px solid var(--line); } .release .artist { font-family: var(--serif); font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; } .release .title { margin-top: 4px; color: var(--ink-soft); font-family: var(--serif); font-size: 21px; font-style: italic; line-height: 1.3; } .release-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; } .release-details .label, .condition-label { color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .release-details .content, .condition-value { font-size: 16px; font-weight: 500; } .label-logo-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .label-logo-row > div { min-width: 0; } .container .label-logo { flex-shrink: 0; width: auto; max-width: 112px; max-height: 52px; margin: -6px 0; object-fit: contain; } @media (max-width: 599px) { .main { padding: 16px; } .release .artist { font-size: 26px; } .release .title { font-size: 19px; } .release-details .thelabel:has(.label-logo) { grid-column: 1 / -1; } .container .label-logo { max-width: 80px; max-height: 44px; margin: -2px 0; } } .copy { margin-top: 8px; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: var(--card); } .conditions-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .condition-container { padding: 14px 20px; } .condition-container:only-child { grid-column: 1 / -1; } .condition-container + .condition-container { border-left: 1px solid var(--line); } @media (max-width: 479px) { .conditions-container { grid-template-columns: minmax(0, 1fr); } .condition-container + .condition-container { border-top: 1px solid var(--line); border-left: 0; } } .copy .comment-container { padding: 16px 20px 18px; border-top: 1px solid var(--line); } .comment .title, .notes .title { margin-bottom: 8px; font-family: var(--serif); font-size: 18px; font-weight: 700; } .comment .extra, .comment .public { color: var(--ink-soft); line-height: 1.6; } .comment .extra + .public { margin-top: 8px; } .note { padding: 12px 0; border-top: 1px solid var(--line); } .note:last-child { padding-bottom: 0; } .note-label { margin-bottom: 4px; font-weight: 700; } .note-text { color: var(--muted); font-size: 14px; line-height: 1.6; } .note-text p + p { margin-top: 8px; } .image-caption { text-align: center; } .image-disclaimer-note { max-width: 260px; margin: 6px auto 0; color: var(--muted); font-size: 12px; line-height: 1.45; } .container .icon { display: inline-block; width: 1.2em; height: 1.2em; margin-right: 4px; vertical-align: -0.22em; } .footer { padding: 16px; border-radius: 0 0 5px 5px; background: var(--ink); color: var(--paper); text-align: center; } .thank-you { font-size: 14px; opacity: 0.85; } .happy-collecting { margin-top: 4px; font-family: var(--serif); font-size: 18px; font-style: italic; }