html{background:#030303}
body{background:radial-gradient(ellipse at 55% 24%,#15151533,transparent 48%),#030303}
body:after{opacity:.065}
.fog{opacity:.1}.fog-two{opacity:.065}#dust{opacity:.33}
.hero-portrait{padding:7px;border-color:#79796e;background:linear-gradient(135deg,#606058,#191918 14%,#383831 44%,#0e0e0d 76%,#6c6c60);box-shadow:inset 0 0 0 2px #080808,0 14px 32px #000b;transform:rotate(-1deg)}
.hero-portrait:before{inset:3px;border-color:#b9b7a84a}
.hero-portrait:after{inset:-3px;border-color:#75756a88;transform:rotate(.5deg)}
.portrait-corners{position:absolute;inset:-5px;pointer-events:none;z-index:2;opacity:.7;background:linear-gradient(#aaa793,#aaa793) left top/13px 1px no-repeat,linear-gradient(#aaa793,#aaa793) left top/1px 13px no-repeat,linear-gradient(#aaa793,#aaa793) right top/13px 1px no-repeat,linear-gradient(#aaa793,#aaa793) right top/1px 13px no-repeat,linear-gradient(#aaa793,#aaa793) left bottom/13px 1px no-repeat,linear-gradient(#aaa793,#aaa793) left bottom/1px 13px no-repeat,linear-gradient(#aaa793,#aaa793) right bottom/13px 1px no-repeat,linear-gradient(#aaa793,#aaa793) right bottom/1px 13px no-repeat}
@media(min-width:601px){
 body{font-family:Archive Gothic,fantasy}
 .subtitle,.carousel-gallery h2,.carousel-art .art-title,.carousel-art .art-medium,.carousel-art .view,.audio-top,.audio-state,.time,.carousel-count,.social-signature,.copy-status,.modal-content h2,.modal-content p,#art-count{font-family:Archive Gothic,fantasy;font-style:normal;font-weight:400}
 .subtitle{font-size:33px;line-height:1.2;letter-spacing:1px}
 .carousel-gallery h2{font-size:30px;letter-spacing:.5px;transform:none}
 .carousel-gallery h2 span{font-size:31px}
 .carousel-art .art-title{font-size:21px;letter-spacing:.5px}
 .carousel-art .view{font-size:11px;letter-spacing:1px}
 .audio-top{font-size:25px}
 .audio-state{font-size:8px;letter-spacing:.7px}
 .time{font-size:13px}
 .carousel-count{font-size:13px;letter-spacing:2px}
 .social-signature{font-size:25px}
 .copy-status{font-size:11px;letter-spacing:.5px}
 .modal-content h2{font-size:28px}
 .modal-content p,#art-count{font-size:13px;letter-spacing:1px}
}
@media(max-width:600px){
 .hero{grid-template-areas:"art" "audio";row-gap:9px;padding-bottom:19px}
 .hero .subtitle{display:none}
 .hero-portrait{width:min(57vw,206px);height:242px;margin:8px 0 6px;padding:7px}
 .hero .audio-disclosure{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:min(57vw,206px);height:auto;min-height:44px;gap:0;margin-top:1px}
 .hero .audio-toggle{flex:none;width:100%;height:44px;min-height:44px}
 .hero .audio-disclosure .audio-player{position:relative;inset:auto;top:auto;right:auto;bottom:auto;left:auto;transform:none;translate:none;width:100%;max-width:100%;margin:10px 0 0;padding:12px 12px 11px;background:linear-gradient(145deg,#1c1c18,#0d0d0b);border:1px solid #77766b;color:#d0cdc1;box-shadow:inset 0 0 0 3px #0a0a08,0 8px 18px #0008}
 .hero .audio-disclosure.is-open .audio-player{animation:audio-dropdown .2s ease-out}
 .audio-disclosure .audio-top{font-family:Archive Gothic,fantasy;font-size:21px;line-height:1.1;padding-right:10px}
 .audio-disclosure .audio-state{font-size:5px;line-height:1.4;color:#a8a596}
 .audio-disclosure #waveform{filter:invert(.85) grayscale(1);opacity:.7;height:25px;margin:7px 0}
 .audio-disclosure .audio-controls button{background:#bdb9a9;color:#111}
 .audio-disclosure .audio-controls input{accent-color:#bdb9a9}
 .audio-disclosure .time{color:#aaa79a;font-size:8px}
 .hero .audio-close{color:#bbb8aa;top:3px;right:3px}
}
@media(max-width:360px){.hero-portrait{width:186px;height:226px}.hero .audio-disclosure{width:186px}.audio-disclosure .audio-top{font-size:20px}.audio-disclosure .audio-state{font-size:4.5px}}
@keyframes audio-dropdown{from{opacity:0;translate:0 -5px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.hero .audio-disclosure.is-open .audio-player{animation:none!important}}
