/* Original SD artwork: rose-metal audio equipment and flowing sound ribbons. */
:root{--audio-edge:#8c6854;--audio-light:#f5d5bd;--audio-pink:#edb5a5;--muted:#b8aaa3;--faint:#a0928b}
a:focus-visible,button:focus-visible{outline:2px solid var(--audio-light);outline-offset:5px}
.site-header{border-bottom-color:#4b3935;background:rgba(17,14,16,.96)}
.site-header .in{padding-top:9px;padding-bottom:9px}
.brand{align-items:center;gap:12px;flex-shrink:0}
.brand-emblem{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 2px 8px #0006)}
.brand-copy{display:flex;flex-direction:column;gap:1px}
.brand b{font-size:1.25rem;color:var(--audio-light)}
.brand small{font-size:.65rem;letter-spacing:.08em;color:var(--muted)}
.site-header nav{align-items:center}
.site-header nav a{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:8px 10px;min-height:44px;border-radius:8px}
.site-header nav a:hover{background:#322421;color:var(--audio-light)}
.nav-art{width:24px;height:24px;object-fit:contain;flex-shrink:0}
.gate-box{border-color:var(--audio-edge);background:linear-gradient(145deg,#30211f,#1d181b 60%);box-shadow:0 20px 90px #0008}
.gate-emblem{display:block;width:96px;height:96px;margin:0 auto 14px;object-fit:contain}
.gate-actions button,.cta{
  background-color:var(--audio-pink);
  background-image:linear-gradient(90deg,#edb5a5ed,#f1c5b4ed,#edb5a5ed),url('art/button-satin-v3.webp');
  background-size:cover;background-position:center;
  border:1px solid #f0c8af;border-radius:12px;color:#291812;
  box-shadow:inset 0 1px 0 #fff7,0 5px 18px #0003;
  transition:filter .18s ease,box-shadow .18s ease;
}
.cta{min-height:58px;padding:10px 16px;gap:10px}
.cta:hover,.gate-actions button:hover{background-color:var(--audio-pink);filter:brightness(1.08);box-shadow:inset 0 1px 0 #fff9,0 7px 24px #0005}
/* More specific than the existing work-page package image rule. */
.cta .cta-art{width:24px;height:24px;object-fit:contain;border-radius:0;box-shadow:none;flex-shrink:0;filter:brightness(.15)}
.cta span{min-width:0}
.cta svg{flex-shrink:0}
.sec-head{
  position:relative;isolation:isolate;overflow:hidden;min-height:88px;
  padding:17px 22px;align-items:center;border:1px solid #4b3935;border-left:3px solid var(--gold);
  border-radius:3px 16px 16px 3px;background:#1d181b;
}
.sec-head::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,#1d181bf5 0%,#1d181bc4 45%,#1d181b44 100%),url('art/sound-ribbon-v3.webp') center/cover;}
.sec-head h2{font-size:1.4rem}
.sec-head .en{color:var(--audio-light);font-size:.64rem;letter-spacing:.15em}
.sec-head .more{color:var(--audio-light)}
.hero,.work-hero{border-color:#4b3935;box-shadow:0 12px 50px #0002}
.hero-cover img,.work-hero-in>div>img{height:auto}
.hero-kicker{letter-spacing:.08em}
.badge.rank{background:#dfc09a;color:#24140c;border:1px solid #f6daba;padding:3px 8px;box-shadow:0 2px 8px #0005}
.buybar{border-top-color:var(--audio-edge)}
.site-footer{border-top-color:#4b3935}
/* The home page introduces the comparison tools before one compact feature. */
.home-intro{margin:20px 0 16px}
.home-intro h1{font:700 clamp(1.15rem,2.3vw,1.65rem)/1.5 var(--serif);margin:0 0 5px;color:var(--fg)}
.home-intro p{margin:0;color:var(--muted);font-size:.83rem}
.hero-compact{margin-top:0;border-radius:18px}
.hero-compact .hero-in{grid-template-columns:220px minmax(0,1fr);gap:12px 24px;padding:22px;align-items:start}
.hero-compact .hero-kicker{grid-column:1/-1;grid-row:1;margin:0;letter-spacing:.02em;font-size:.78rem}
.hero-compact .hero-cover{grid-column:1;grid-row:2/5;align-self:center}
.hero-compact .hero-summary{grid-column:2;grid-row:2;min-width:0}
.featured-title{font:700 1.12rem/1.55 var(--sans);margin:0 0 6px}
.featured-title a{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.hero-compact .who{font-size:.8rem;margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.featured-details{display:inline-block;color:var(--audio-light);font-size:.78rem;text-decoration:underline;text-underline-offset:3px;padding:3px 0}
.hero-facts{grid-column:2;grid-row:3;display:flex;align-items:center;gap:20px;min-width:0}
.hero-compact .stats{flex:1;gap:6px;margin:0}
.hero-compact .stat{padding:7px 8px;border-radius:8px}
.hero-compact .stat b{font-size:1rem}
.hero-compact .stat span{font-size:.65rem}
.featured-price{flex-shrink:0}
.hero-compact .pricebox{gap:4px 8px;margin:0}
.hero-compact .pricebox .now{font-size:1.45rem}
.hero-compact .until{font-size:.7rem;margin:0}
.hero-action{grid-column:2;grid-row:4}
.hero-compact .cta{min-height:46px;margin:0;padding:8px 16px;font-size:.86rem}
.hero-compact+.sec{margin-top:28px}
.home-intro~.sec .sec-head{min-height:68px;padding:12px 18px}
@media(max-width:1000px){
  .site-header .in{flex-direction:column;align-items:flex-start;gap:4px}
  .site-header nav{width:100%}
  .brand-emblem{width:42px;height:42px}
  .brand small{display:block}
  .hero-facts{flex-wrap:wrap;gap:10px}
  .hero-compact .stats{flex-basis:100%}
}
@media(max-width:640px){
  .site-header .in{padding-top:7px;padding-bottom:5px}
  .brand b{font-size:1.13rem}
  .brand-copy{gap:0}
  .brand small{font-size:.58rem}
  .site-header nav a{font-size:.78rem;padding:6px 9px}
  .nav-art{width:21px;height:21px}
  .sec-head{padding:14px;min-height:80px;gap:8px}
  .sec-head h2{font-size:1.14rem}
  .sec-head .more{font-size:.75rem}
  .buybar .cta{min-height:48px;padding:8px;gap:5px;font-size:.8rem}
  .buybar .cta .cta-art{width:24px;height:24px}
  .home-intro{margin:14px 0}
  .home-intro p{font-size:.75rem}
  .hero-compact .hero-in{grid-template-columns:88px minmax(0,1fr);padding:14px;gap:10px 12px}
  .hero-compact .hero-kicker{font-size:.7rem;line-height:1.6}
  .hero-compact .hero-cover{grid-row:2;align-self:start}
  .hero-compact .hero-cover img{border-radius:8px;box-shadow:none}
  .featured-title{font-size:.86rem;line-height:1.5}
  .hero-compact .who{font-size:.7rem;margin-bottom:0}
  .featured-details{font-size:.7rem}
  .hero-facts{grid-column:1/-1;gap:8px}
  .hero-action{grid-column:1/-1}
  .featured-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px}
  .hero-compact .until{font-size:.66rem}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .card{min-width:0}
  .card h3{font-size:.82rem}
  .card .cv{font-size:.7rem}
  .card .row{flex-wrap:wrap;gap:2px 8px;font-size:.75rem}
  .card .badges{left:5px;top:5px;gap:3px}
  .card .badge{font-size:.62rem;padding:2px 5px}
  .card .badge.rank b{font-size:.8rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}