/* Clarity pass 2026-10-18: clean classical page headers, clearer text, readable mobile home */

/* Inner page headers: ivory + gold frame instead of a faded screenshot behind the title */
.music-hero:not(.violin-hero){height:auto;min-height:0;background:radial-gradient(ellipse at 50% 0%,rgba(214,170,92,.22),rgba(214,170,92,0) 62%),linear-gradient(180deg,#fdf9f0 0%,#f5ecdb 100%);background-image:radial-gradient(ellipse at 50% 0%,rgba(214,170,92,.22),rgba(214,170,92,0) 62%),linear-gradient(180deg,#fdf9f0 0%,#f5ecdb 100%);padding:clamp(28px,4vw,46px) clamp(16px,4vw,48px);text-align:center;border-bottom:1px solid rgba(148,103,38,.18)}
.music-hero:not(.violin-hero):before{content:"";position:absolute;inset:clamp(10px,1.6vw,18px);background:none;border:1px solid rgba(166,118,44,.45);box-shadow:inset 0 0 0 5px rgba(253,249,240,.9),inset 0 0 0 6px rgba(166,118,44,.25);pointer-events:none}
.music-hero:not(.violin-hero):after{content:"";position:absolute;right:clamp(18px,7vw,120px);top:50%;width:clamp(120px,16vw,220px);aspect-ratio:1;transform:translateY(-50%);background:#a8772c;opacity:.07;-webkit-mask:url(assets/jq-harp.png) center/contain no-repeat;mask:url(assets/jq-harp.png) center/contain no-repeat;pointer-events:none}
.music-hero:not(.violin-hero) .veil{display:none}
.music-hero:not(.violin-hero) .hero-copy{width:min(860px,100%);margin:0 auto;padding:clamp(34px,5vw,64px) 8px clamp(34px,5vw,58px)}
.music-hero:not(.violin-hero) .eyebrow{color:#8f611d;font-size:13px;letter-spacing:3px}
.music-hero:not(.violin-hero) h1{color:#2a2014;font-size:clamp(36px,5.2vw,60px);line-height:1.1}
.music-hero:not(.violin-hero) h1 span{color:#6f4d1c;font-size:clamp(22px,2.6vw,32px);margin-top:10px;letter-spacing:4px}
.music-hero:not(.violin-hero) .hero-copy>p:not(.eyebrow):not(.hero-note){color:#4a3b28;font-size:clamp(16px,1.6vw,20px);line-height:1.5}
.music-hero:not(.violin-hero) .ornament{color:#a8772c;margin:16px 0 10px}
.music-hero:not(.violin-hero) .ornament:before,.music-hero:not(.violin-hero) .ornament:after{content:"";display:inline-block;vertical-align:middle;width:56px;height:1px;margin:0 14px;background:linear-gradient(90deg,rgba(168,119,44,0),rgba(168,119,44,.7))}
.music-hero:not(.violin-hero) .ornament:after{background:linear-gradient(90deg,rgba(168,119,44,.7),rgba(168,119,44,0))}
.music-hero:not(.violin-hero) .hero-note{color:#6f4d1c;font-size:17px;letter-spacing:2px}

/* Body text: a little darker so it reads easily on ivory */
.eyebrow,.section-kicker{color:#8a5c1a}
footer p{color:#5c4d39}
.violin-en{color:#5f5040!important}
.violin-facts p,.violin-learn p,.violin-steps p{color:#5f5040}
.form-note{color:#5c4d39}

/* Violin hero: keep "JQ MUSIC · 淨泉音樂" on one line */
@media(max-width:520px){.violin-hero .eyebrow,.violin-hero .section-kicker{letter-spacing:1.5px;white-space:nowrap}}

/* Footer channel icons: show what each one is */
.footer-social{flex-wrap:wrap;gap:10px 18px}
.footer-social a{width:auto;height:auto;display:inline-flex;align-items:center;gap:6px;opacity:1;text-decoration:none;font-size:13px;color:#6f4d1c}
.footer-social a svg{width:22px;height:22px;flex:none}
.footer-social a[data-label]:after{content:attr(data-label)}

/* Home page on phones: real, readable header instead of the shrunken desktop picture */
.hero-mobile{display:none}
@media(max-width:700px){
  .hero{height:auto!important;aspect-ratio:auto!important;line-height:normal}
  .hero .hero-image,.hero .hero-logo,.hero .hero-hot{display:none!important}
  .hero-mobile{display:block;position:relative;text-align:center;padding:40px 22px 36px;background:radial-gradient(ellipse at 50% 0%,rgba(214,170,92,.25),rgba(214,170,92,0) 65%),linear-gradient(180deg,#fdf9f0,#f3e8d3)}
  .hero-mobile:before{content:"";position:absolute;inset:10px;border:1px solid rgba(166,118,44,.45);box-shadow:inset 0 0 0 5px rgba(253,249,240,.9),inset 0 0 0 6px rgba(166,118,44,.25);pointer-events:none}
  .hero-mobile .hm-portrait{display:block;width:150px;height:150px;margin:6px auto 18px;border-radius:50%;object-fit:cover;object-position:78% 22%;border:3px solid #fdf9f0;box-shadow:0 0 0 1px rgba(166,118,44,.55),0 10px 24px rgba(70,51,22,.15)}
  .hero-mobile .hm-title{margin:0;color:#2a2014;font-family:Georgia,"Times New Roman",serif;font-size:26px;letter-spacing:3px;line-height:1.1}
  .hero-mobile .hm-jq{font-style:italic;font-size:48px;color:#a8772c;letter-spacing:0;margin-right:4px}
  .hero-mobile .hm-zh{display:block;font-size:30px;letter-spacing:8px;margin-top:6px;color:#3a2c1b}
  .hero-mobile .hm-tag{font-family:Georgia,"Times New Roman",serif;font-style:italic;color:#6f4d1c;font-size:19px;margin:10px 0 4px}
  .hero-mobile .hm-name{color:#4a3b28;font-size:14px;letter-spacing:1.5px;margin:0 0 22px}
  .hero-mobile .hm-actions{display:flex;flex-direction:column;gap:12px;align-items:center;position:relative}
  .hero-mobile .hm-actions a{display:block;width:min(280px,100%);padding:12px 18px;border-radius:999px;text-decoration:none;font-size:15px;line-height:1.35}
  .hero-mobile .hm-actions a small{display:block;font-size:13px;letter-spacing:1px}
  .hero-mobile .hm-listen{background:#a8772c;color:#fffaf0;box-shadow:0 6px 16px rgba(120,80,20,.22)}
  .hero-mobile .hm-license{background:#fffdf8;color:#5a3f17;border:1px solid rgba(166,118,44,.55)}
}
@media(max-width:700px){.music-hero:not(.violin-hero):after{display:none}}
@media(max-width:520px){.violin-hero .hero-copy p{letter-spacing:1px}}
.music-hero + main .featured-track,.music-hero ~ * .featured-track{margin-top:28px!important}

/* Logo contrast (2026-10-18): deeper antique bronze so the logo stands out from the ivory */
.brand-mark,.footer-logo,.vh-mark{background:#6b4512!important}
.vh-jq,.hero-mobile .hm-jq{color:#7a4f14!important}