/* The portfolio receiver shares the site's material tokens; no image-backed controls. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.collections .pieces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;margin-top:28px}
.collections .audio-piece{min-width:0;padding:0;overflow:hidden;border:1px solid #87704466;background:linear-gradient(140deg,#24231f,#0d0f0f);box-shadow:var(--metal-depth)}
.audio-piece>img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-bottom:1px solid #a98b5066;transition:filter .4s}
.audio-piece:hover>img{filter:brightness(1.08)}
.audio-piece-copy{padding:22px}.audio-piece h3{font:400 clamp(21px,2.1vw,29px)/1.18 Georgia,serif;color:#efece3;margin:0 0 12px}.audio-piece p{font-size:13px;line-height:1.6;color:#bfc0bd;min-height:42px;margin:0 0 18px}
.portfolio-listen{display:inline-flex;gap:12px;align-items:center;min-height:46px;padding:10px 24px;border:1px solid #c3a263;border-radius:3px;background:linear-gradient(125deg,#8a6535,#e5ce98 40%,#c3a267 70%,#e7d2a1);color:#11120f;font:600 14px/1.3 Arial,sans-serif;box-shadow:inset 0 1px #fff4ceaa,0 3px 12px #0005;cursor:pointer;transition:box-shadow .25s,filter .25s}
.portfolio-listen:hover{filter:brightness(1.12);box-shadow:0 0 20px #c3a26333}.portfolio-listen:focus-visible,.portfolio-dialog button:focus-visible,.portfolio-dialog input:focus-visible{outline:2px solid #fff0c7;outline-offset:4px}
.portfolio-player-open{overflow:hidden}.portfolio-dialog{box-sizing:border-box;width:min(680px,calc(100% - 28px));max-height:calc(100dvh - 32px);padding:0;border:1px solid #d1b477;border-radius:22px;background:#101111;color:#eeece5;box-shadow:0 32px 100px #000c,0 0 40px #d0aa4d18;overflow:auto}
.portfolio-dialog::backdrop{background:#020303dc;backdrop-filter:blur(8px)}
.portfolio-radio{border-radius:21px;padding:20px;background:repeating-linear-gradient(0deg,#fff1 0,transparent 1px,transparent 4px),linear-gradient(130deg,#4a4435,#151718 27%,#242626 69%,#171816);box-shadow:inset 0 1px 1px #fff5,inset 0 0 0 5px #0a0b0bc9,inset 0 0 0 7px #b69a5d55}
.portfolio-fascia{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 0 17px 7px;font:600 12px/1.3 Arial,sans-serif;letter-spacing:.08em;color:#d8d8d2}.portfolio-fascia b{font-size:10px;color:#d6b77b;margin-left:4px}
.portfolio-close{display:flex;align-items:center;gap:10px;border:1px solid #a9a79666;min-height:44px;padding:7px 13px;border-radius:6px;background:linear-gradient(135deg,#333534,#181b1b);color:#ecece6;cursor:pointer;font:14px Arial,sans-serif}.portfolio-close span{font-size:25px;line-height:1}
.portfolio-radio-body{display:grid;grid-template-columns:135px minmax(0,1fr);gap:18px;padding:18px;border:1px solid #c3a26388;border-radius:12px;background:linear-gradient(125deg,#e2d6b0,#9c824f 28%,#d0d1c9 49%,#7c6c48 80%,#d8c596);box-shadow:inset 0 1px #fff9,0 5px 15px #0008}
.portfolio-speaker{display:grid;place-items:center;border:5px solid #232523;border-radius:8px;background:radial-gradient(circle,#050606 38%,transparent 43%) 0 0/5px 5px,linear-gradient(130deg,#b4b6ae,#555952);box-shadow:inset 0 0 25px #000c,0 1px #fff8}
.portfolio-speaker span{font:italic 30px Georgia,serif;color:#d5bc82;text-shadow:0 2px 3px #000;background:#151817d9;border:1px solid #ba9c5d88;border-radius:50%;padding:17px 10px}
.portfolio-console{min-width:0}.portfolio-screen{border:3px solid #111818;border-radius:7px;padding:14px 15px 8px;background:radial-gradient(ellipse at 45% 0,#c1963820,transparent 85%),#050b0d;box-shadow:inset 0 2px 12px #000,0 1px #fff7}
.portfolio-screen-label{display:block;font:9px/1.5 Arial,sans-serif;letter-spacing:.12em;color:#a89a77}.portfolio-screen h2{font:400 clamp(19px,3vw,26px)/1.15 Georgia,serif;color:#f1dfaf;margin:10px 0 5px;text-shadow:0 0 12px #dfbd692b;overflow-wrap:anywhere}
.portfolio-waveform{display:block;width:100%;height:86px}.portfolio-status{font:11px/1.5 Arial,sans-serif;color:#c0bcaa;min-height:32px;margin:3px 0 0}
.portfolio-controls{display:flex;align-items:center;gap:16px;padding-top:14px}.portfolio-toggle{flex:0 0 54px;height:54px;border:3px solid #bdb8a8;border-radius:50%;background:conic-gradient(from 40deg,#555a59,#f5f2df,#777c7c,#f1ebd6,#555a59);box-shadow:0 3px 4px #0009,inset 0 0 0 4px #282b29;color:#101412;font:21px Arial,sans-serif;cursor:pointer}.portfolio-toggle:disabled{opacity:.55;cursor:wait}
.portfolio-timeline{flex:1;min-width:0;color:#171b19}.portfolio-timeline label{font:10px/1.4 Arial,sans-serif;letter-spacing:.04em}.portfolio-timeline input{width:100%;height:28px;margin:0;accent-color:#30382e;cursor:pointer}.portfolio-timeline>div{display:flex;justify-content:space-between;font:11px ui-monospace,monospace}
.portfolio-player-note{display:flex;justify-content:space-between;gap:12px;margin:16px 7px 2px;color:#c9c8bf;font:10px/1.5 Arial,sans-serif;letter-spacing:.05em}.portfolio-player-note span{color:#ccb37c}.portfolio-media{display:none}
@media(max-width:850px){.collections .pieces{grid-template-columns:repeat(2,minmax(0,1fr))}.portfolio-radio-body{grid-template-columns:100px minmax(0,1fr)}}
@media(max-width:520px){.collections .pieces{grid-template-columns:1fr;gap:22px}.collection-body{padding-left:0;padding-right:0}.audio-piece-copy{padding:20px}.portfolio-listen{width:100%;justify-content:center}.portfolio-radio{padding:16px}.portfolio-fascia{font-size:10px;padding-left:0}.portfolio-fascia b{display:block;margin:3px 0 0;letter-spacing:.2em}.portfolio-radio-body{grid-template-columns:1fr;padding:13px;gap:0}.portfolio-speaker{height:38px;border-width:3px;margin-bottom:12px;border-radius:5px}.portfolio-speaker span{font-size:14px;border-radius:3px;padding:2px 12px}.portfolio-screen{padding:13px 12px 7px}.portfolio-screen h2{font-size:24px}.portfolio-waveform{height:94px}.portfolio-player-note{font-size:9px}.portfolio-close{padding:7px 10px}.portfolio-status{min-height:33px}}
@media(prefers-reduced-motion:reduce){.audio-piece>img,.portfolio-listen{transition:none}}

.portfolio-screen{animation:portfolio-display-glow 8s ease-in-out infinite}@keyframes portfolio-display-glow{0%,100%{box-shadow:inset 0 2px 12px #000,0 1px #fff7,0 0 8px #d6b77b12}50%{box-shadow:inset 0 2px 12px #000,0 1px #fff7,0 0 16px #d6b77b35}}
@media(prefers-reduced-motion:reduce){.portfolio-screen{animation:none}}

.collections:has(.audio-piece){max-width:1200px}.collections:has(.audio-piece) .collection-body{max-width:none;padding:0 26px 28px}
@media(max-width:520px){.collections:has(.audio-piece) .collection-body{padding:0 12px 18px}}