* { box-sizing: border-box; }
body { margin: 0; background: #f5f0e6; color: #2e251b; font: 18px/1.6 Georgia, serif; }
main { width: min(100% - 2.4rem, 70rem); margin: 2rem auto 5rem; }
nav, .label, figcaption, .duration { font: 600 .86rem/1.5 system-ui, sans-serif; }
nav { margin-bottom: 2rem; } a { color: #533d25; text-underline-offset: .18em; }
.hero { display: grid; grid-template-columns: .84fr 1.16fr; align-items: center; gap: clamp(1rem, 4vw, 3.5rem); }
.label { letter-spacing: .12em; text-transform: uppercase; color: #765624; }
.seals { display: flex; align-items: center; gap: .85rem; color: #8a652c; }
.seals img { border: 2px solid currentColor; border-radius: 50%; width: 55px; height: 55px; object-fit: cover; }
h1 { margin: .3em 0; font-size: clamp(2.5rem, 6vw, 4.65rem); line-height: 1.05; font-weight: 400; overflow-wrap: anywhere; }
figure { margin: 0; } figure img { display: block; width: 100%; height: auto; border: 1px solid #aa8a59; }
figcaption { margin-top: .5rem; color: #63523d; } .duration { color: #63523d; white-space: nowrap; }
.recordings { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: .7rem; }
.recordings li { padding: .8rem 1rem; border: 1px solid #d2bd99; background: #fff9ec; }
.recordings a, .recordings .duration { display: block; }
@media (max-width: 690px) { .hero { grid-template-columns: 1fr; } }