:root{--bg:#faf8f2;--card:#fff;--text:#27251f;--muted:#6d685d;--brand:#80662f;--brand2:#b99a57;--line:#e8e0cf;--max:1180px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:system-ui,-apple-system,"Noto Sans TC","Microsoft JhengHei",sans-serif;background:var(--bg);color:var(--text);line-height:1.75}a{color:inherit}.wrap{width:min(var(--max),92%);margin:auto}.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.7rem;z-index:99}.site-header{background:rgba(250,248,242,.96);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.nav{min-height:68px;display:flex;align-items:center;gap:24px}.brand{text-decoration:none;font-weight:800;color:var(--brand);font-size:1.15rem}.nav-links{margin-left:auto;display:flex;gap:18px;align-items:center}.nav-links a{text-decoration:none;font-weight:650}.nav-links a:hover{color:var(--brand)}.hero{padding:76px 0 58px;background:linear-gradient(135deg,#f6f0df,#fff 60%,#eee6d2)}.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:center}.eyebrow{color:var(--brand);font-weight:800;letter-spacing:.08em}.hero h1{font-size:clamp(2.2rem,5vw,4.6rem);line-height:1.12;margin:.3rem 0 1rem}.lead{font-size:1.12rem;color:var(--muted);max-width:720px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.btn{display:inline-block;text-decoration:none;padding:11px 18px;border-radius:999px;background:var(--brand);color:#fff;font-weight:750}.btn.alt{background:#fff;color:var(--brand);border:1px solid var(--brand)}.hero-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px;box-shadow:0 20px 50px rgba(60,47,20,.08)}.section{padding:64px 0}.section h2{font-size:clamp(1.65rem,3vw,2.5rem);line-height:1.25;margin:0 0 14px}.intro{color:var(--muted);max-width:820px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:28px}.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px}.card h3{margin-top:0}.card p{color:var(--muted)}.video{aspect-ratio:16/9;width:100%;border:0;border-radius:14px;background:#111}.tag{display:inline-block;font-size:.82rem;background:#f0eadb;color:#6f5724;padding:4px 9px;border-radius:999px;margin-right:6px}.article-list{display:grid;gap:16px;margin-top:26px}.article-link{display:block;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}.article-link:hover{border-color:var(--brand2);transform:translateY(-1px)}.article-link strong{display:block;font-size:1.1rem}.article-link span{color:var(--muted)}.content{max-width:860px;margin:auto}.content h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.15}.content h2{margin-top:2rem;line-height:1.3}.notice{border-left:4px solid var(--brand2);background:#fff;padding:14px 18px;border-radius:8px}.breadcrumbs{font-size:.9rem;color:var(--muted);margin-bottom:1rem}.ad-slot{min-height:90px;border:1px dashed #b8ae9b;border-radius:12px;display:grid;place-items:center;color:#8a8172;background:#fff;margin:26px 0}.site-footer{border-top:1px solid var(--line);padding:42px 0;background:#f3efe5}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}.footer-grid a{display:block;text-decoration:none;margin:.35rem 0;color:var(--muted)}.small{font-size:.9rem;color:var(--muted)}@media(max-width:820px){.hero-grid,.grid,.footer-grid{grid-template-columns:1fr}.nav{flex-wrap:wrap;padding:10px 0}.nav-links{width:100%;margin:0;overflow:auto;padding-bottom:6px}.hero{padding-top:46px}.grid{gap:14px}}


.article-cover{display:block;width:100%;height:auto;border-radius:18px;margin:24px 0;border:1px solid var(--line)}
.video-wrap{margin:26px 0}
.article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:30px;align-items:stretch}
.article-card{display:flex;min-width:0;height:100%;flex-direction:column;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.article-card:hover{transform:translateY(-4px);border-color:var(--brand2);box-shadow:0 14px 32px rgba(60,47,20,.09)}
.article-card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;object-position:center;background:#eee8da}
.article-card-body{display:flex;flex:1;flex-direction:column;padding:18px}
.article-card strong{display:-webkit-box;min-height:3.45em;margin:.65rem 0 .45rem;overflow:hidden;font-size:1.08rem;line-height:1.5;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.article-card p{display:-webkit-box;margin:.25rem 0 0;overflow:hidden;color:var(--muted);line-height:1.7;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.article-card .tag{font-size:.76rem}
@media(max-width:980px){.article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.article-grid{grid-template-columns:1fr;gap:16px}.article-card-body{padding:16px}.article-card strong{min-height:0;-webkit-line-clamp:3}.article-card p{-webkit-line-clamp:4}}

/* V1.6: 使用原 YouTube 影片縮圖 */
.article-card > img, .article-cover {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: #eee8dc;
}

/* V2.0: 首頁頂端橫幅，自動裁切為較窄 Banner */
.top-visual{
  width:100%;
  height:clamp(150px,10vw,210px);
  overflow:hidden;
  background:#0d284d;
}
.top-visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center 48%;
}
.home-header{
  position:relative;
  top:auto;
  box-shadow:none;
}
.latest-home{padding-top:26px}
.latest-home h2{margin-bottom:8px}
.latest-home .intro{margin-top:0}
@media(max-width:820px){
  .top-visual{height:clamp(120px,22vw,170px)}
  .top-visual img{object-position:center 49%}
  .latest-home{padding-top:24px}
}

/* V2.1 — dedicated wide hero banner: preserve all five figures without aggressive browser cropping */
.top-visual{
  width:100%;
  height:clamp(170px,15.625vw,300px);
  overflow:hidden;
  background:#10294f;
}
.top-visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
}
@media(max-width:820px){
  .top-visual{height:clamp(120px,21vw,170px)}
  .top-visual img{object-position:center center}
}

/* V2.2 — align latest section heading and intro on one row, like reference */
.latest-home .wrap > h2,
.latest-home .wrap > .intro{
  display:inline;
}
.latest-home .wrap > h2{
  margin:0 14px 0 0;
  font-size:clamp(2rem,2.6vw,3rem);
  line-height:1.15;
  vertical-align:baseline;
}
.latest-home .wrap > .intro{
  margin:0;
  max-width:none;
  font-size:1rem;
  line-height:1.6;
  vertical-align:baseline;
}
.latest-home .grid{
  margin-top:24px;
}
@media(max-width:820px){
  .latest-home .wrap > h2,
  .latest-home .wrap > .intro{
    display:block;
  }
  .latest-home .wrap > h2{
    margin:0 0 8px;
  }
}

/* V2.3 — navigation grouped on the left + explicit Home link */
.nav{
  justify-content:flex-start;
  gap:28px;
}
.nav-links{
  margin-left:0;
  display:flex;
  gap:20px;
  align-items:center;
  white-space:nowrap;
}
@media(max-width:820px){
  .nav{gap:14px;}
  .nav-links{margin-left:0;gap:16px;width:100%;overflow-x:auto;}
}


/* V2.4 — force desktop navigation to sit immediately after brand */
.site-header .nav{
  display:flex!important;
  justify-content:flex-start!important;
  align-items:center!important;
  gap:26px!important;
}
.site-header .brand{
  flex:0 0 auto!important;
  margin:0!important;
}
.site-header .nav-links{
  flex:0 0 auto!important;
  margin:0!important;
  margin-left:0!important;
  display:flex!important;
  justify-content:flex-start!important;
  gap:20px!important;
}
@media(max-width:820px){
  .site-header .nav{flex-wrap:wrap!important;gap:10px 16px!important;}
  .site-header .nav-links{width:100%!important;overflow-x:auto!important;gap:16px!important;}
}


/* V2.7 — 觀世音菩薩熱門 15 首 */
.guanyin-popular{margin-top:58px;padding-top:42px;border-top:1px solid var(--line)}
.section-heading-row{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:24px}
.section-heading-row h2{margin:.2rem 0 0;font-size:clamp(1.8rem,3vw,2.7rem)}
.section-heading-row p{max-width:560px;margin:0;color:var(--muted)}
.music-video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.music-video-card{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:18px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.music-video-card:hover{transform:translateY(-3px);border-color:var(--brand2);box-shadow:0 12px 28px rgba(60,47,20,.08)}
.music-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#111}
.music-thumb img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .25s ease}
.music-video-card:hover .music-thumb img{transform:scale(1.025)}
.music-rank{position:absolute;left:12px;top:12px;padding:4px 9px;border-radius:999px;background:rgba(20,20,20,.78);color:#fff;font-size:.76rem;font-weight:800;letter-spacing:.03em}
.play-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:52px;height:38px;border-radius:10px;background:#ff0033;color:#fff;font-size:1.1rem;box-shadow:0 4px 14px rgba(0,0,0,.22)}
.music-video-body{padding:16px 17px 18px}
.music-video-body h3{margin:.65rem 0 .7rem;font-size:1.03rem;line-height:1.5}
.watch-link{font-size:.92rem;font-weight:750;color:var(--brand)}
@media(max-width:980px){.music-video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.section-heading-row{align-items:flex-start;flex-direction:column;gap:10px}}
@media(max-width:640px){.music-video-grid{grid-template-columns:1fr}.guanyin-popular{margin-top:42px;padding-top:32px}}

/* V2.9 category navigation */
.category-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.category-card-link{display:block;color:inherit;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.category-card-link:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(46,39,24,.09);border-color:#cdbb91;}
.category-enter{display:inline-block;margin-top:12px;font-size:.92rem;font-weight:600;color:#8a641e;}
@media(max-width:900px){.category-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){.category-grid{grid-template-columns:1fr;}}

/* V3.0 */
.category-grid-13{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.category-card-link{display:block;text-decoration:none;color:inherit}.category-card-link:hover{transform:translateY(-3px)}.empty-state{margin-top:24px}.music-rank{min-width:32px;text-align:center}@media(max-width:900px){.category-grid-13{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.category-grid-13{grid-template-columns:1fr}}

/* V3.1 Medicine Buddha category */
.medicine-search-card{overflow:hidden}
.medicine-search-visual{position:relative;display:flex;min-height:190px;align-items:center;justify-content:center;text-align:center;padding:28px 18px;background:linear-gradient(135deg,#0f3850,#1c5a6b 55%,#c5a45a);color:#fff;text-decoration:none}
.medicine-search-visual:hover{filter:brightness(1.04)}
.medicine-search-visual .music-rank{position:absolute;left:14px;top:14px}
.medicine-symbol{position:absolute;font-size:96px;opacity:.12}
.medicine-search-text{position:relative;z-index:1;font-size:15px;line-height:1.5}.medicine-search-text strong{font-size:22px;display:inline-block;margin-top:6px}
.music-tag{display:inline-block;background:#f4ecd9;border-radius:999px;padding:6px 10px;font-size:13px;color:#765817;margin-bottom:6px}

/* v3.2 medicine page */
.music-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#111}
.music-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.play-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:64px;height:46px;border-radius:14px;background:#ff0033;color:#fff;font-size:26px;line-height:1;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.more-channel-search{margin-top:34px;padding:28px;border:1px solid var(--line,#e7dcc8);border-radius:20px;background:#fff}
.more-channel-search .button{display:inline-block;margin-top:8px;padding:11px 18px;border-radius:999px;background:#8a5a00;color:#fff;text-decoration:none}

/* V3.4 — refined 13-category hub */
.category-page{
  background:
    radial-gradient(circle at 8% 4%,rgba(185,154,87,.12),transparent 24rem),
    radial-gradient(circle at 92% 18%,rgba(128,102,47,.07),transparent 26rem),
    var(--bg);
}
.category-section{padding:42px 0 76px}
.category-content{max-width:1180px;margin:auto}
.category-page .breadcrumbs{margin-bottom:20px;font-size:.88rem}
.category-page .breadcrumbs a{text-underline-offset:3px}
.category-hero{
  position:relative;
  overflow:hidden;
  margin-bottom:30px;
  padding:34px 38px 32px;
  border:1px solid rgba(185,154,87,.28);
  border-radius:28px;
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(249,244,232,.94));
  box-shadow:0 18px 50px rgba(70,53,24,.07);
}
.category-hero::after{
  content:"";
  position:absolute;
  width:220px;height:220px;
  right:-72px;top:-105px;
  border:1px solid rgba(185,154,87,.22);
  border-radius:50%;
  box-shadow:0 0 0 34px rgba(185,154,87,.05),0 0 0 68px rgba(185,154,87,.035);
  pointer-events:none;
}
.category-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--brand);
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.14em;
}
.category-kicker::before{content:"";width:26px;height:1px;background:var(--brand2)}
.category-hero h1{
  max-width:760px;
  margin:.55rem 0 .8rem;
  font-size:clamp(2.25rem,4.8vw,4.4rem);
  letter-spacing:-.035em;
  line-height:1.08;
}
.category-lead{max-width:790px;margin:0;color:var(--muted);font-size:1.06rem;line-height:1.85}
.category-hint{
  display:inline-flex;
  margin-top:18px;
  padding:7px 12px;
  border:1px solid #eadfc6;
  border-radius:999px;
  background:rgba(255,255,255,.76);
  color:#765b26;
  font-size:.82rem;
  font-weight:700;
}
.category-grid-13{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin-top:0;
}
.category-tile{
  position:relative;
  min-height:248px;
  overflow:hidden;
  padding:0;
  border:1px solid rgba(205,187,145,.58);
  border-radius:24px;
  background:linear-gradient(145deg,#fff 0%,#fffdf8 68%,#f8f1df 100%);
  box-shadow:0 8px 24px rgba(65,50,23,.045);
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease,background .24s ease;
}
.category-tile::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg,var(--brand2),#d8c38f);
  opacity:.7;
  transition:width .24s ease,opacity .24s ease;
}
.category-tile section{display:flex;height:100%;min-height:248px;flex-direction:column;padding:24px 25px 22px}
.category-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:21px}
.category-number{
  color:#9a7b3e;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.73rem;
  font-weight:800;
  letter-spacing:.12em;
}
.category-icon{
  display:grid;
  width:42px;height:42px;
  place-items:center;
  border:1px solid #e4d5b5;
  border-radius:50%;
  background:linear-gradient(145deg,#fff,#f3ead7);
  color:#886625;
  font-size:1.05rem;
  box-shadow:inset 0 1px 0 #fff,0 5px 14px rgba(103,77,30,.07);
}
.category-tile h2{
  margin:0 0 10px;
  font-size:clamp(1.45rem,2.2vw,2rem);
  line-height:1.28;
  letter-spacing:-.02em;
}
.category-tile p{margin:0 0 22px;color:var(--muted);font-size:.96rem;line-height:1.75}
.category-tile .category-enter{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:auto;
  color:#74571f;
  font-size:.9rem;
  font-weight:800;
}
.category-arrow{
  display:grid;
  width:30px;height:30px;
  place-items:center;
  border-radius:50%;
  background:#f0e4c8;
  transition:transform .22s ease,background .22s ease,color .22s ease;
}
.category-tile:hover,
.category-tile:focus-visible{
  transform:translateY(-6px);
  border-color:#c7a965;
  background:linear-gradient(145deg,#fff 0%,#fffaf0 100%);
  box-shadow:0 20px 44px rgba(65,50,23,.12);
  outline:none;
}
.category-tile:hover::before,.category-tile:focus-visible::before{width:6px;opacity:1}
.category-tile:hover .category-arrow,.category-tile:focus-visible .category-arrow{transform:translateX(4px);background:var(--brand);color:#fff}
.category-page .site-header{box-shadow:0 1px 0 rgba(88,68,30,.03)}
.category-page .nav-links a[href="music.html"]{color:var(--brand);font-weight:800;position:relative}
.category-page .nav-links a[href="music.html"]::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;border-radius:2px;background:var(--brand2)}
@media (prefers-reduced-motion:reduce){.category-tile,.category-arrow{transition:none}.category-tile:hover{transform:none}}
@media(max-width:900px){
  .category-grid-13{grid-template-columns:repeat(2,minmax(0,1fr))}
  .category-hero{padding:30px 28px}
}
@media(max-width:620px){
  .category-section{padding:28px 0 56px}
  .category-hero{padding:25px 22px 24px;border-radius:22px}
  .category-hero h1{font-size:clamp(2rem,11vw,3rem)}
  .category-lead{font-size:.98rem}
  .category-grid-13{grid-template-columns:1fr;gap:14px}
  .category-tile,.category-tile section{min-height:220px}
  .category-tile section{padding:21px 21px 19px}
  .category-card-top{margin-bottom:15px}
  .category-page .nav-links a[href="music.html"]::after{display:none}
}

/* V3.5 — premium visual upgrade inspired by the approved mockup */
.category-page{
  --gold:#b47708;
  --gold-2:#d9a63d;
  --ink:#211b16;
  background:
    radial-gradient(circle at 6% 18%,rgba(231,190,103,.13),transparent 23rem),
    radial-gradient(circle at 95% 15%,rgba(222,176,79,.12),transparent 26rem),
    linear-gradient(180deg,#fffdf9 0,#fbf7ee 44%,#faf8f2 100%);
}
.category-page .site-header{
  background:rgba(255,253,248,.96);
  border-bottom:1px solid rgba(180,119,8,.16);
  box-shadow:0 4px 18px rgba(75,52,17,.035);
  backdrop-filter:saturate(130%) blur(8px);
}
.category-page .nav{min-height:72px}
.category-page .brand{font-size:1.2rem;letter-spacing:.08em;color:#7e5a15}
.category-page .nav-links a{padding:23px 0 19px;font-weight:700}
.category-page .nav-links a[href="music.html"]::after{bottom:11px;background:linear-gradient(90deg,#a86b00,#dfb357)}
.category-section{padding:38px 0 68px}
.category-page .category-content{width:min(1380px,94%);max-width:1380px}
.category-page .breadcrumbs{opacity:.72;margin:0 0 18px 4px}
.category-hero{
  text-align:center;
  margin:0 auto 30px;
  padding:34px 28px 30px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.category-hero::before,
.category-hero::after{
  content:"";
  position:absolute;
  top:38px;
  width:150px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(190,134,28,.42),transparent);
  border:0;border-radius:0;box-shadow:none;
}
.category-hero::before{left:calc(50% - 260px)}
.category-hero::after{right:calc(50% - 260px)}
.category-kicker{
  justify-content:center;
  gap:10px;
  color:#755625;
  letter-spacing:.18em;
  font-size:.86rem;
}
.category-kicker::before{display:none}
.category-hero h1{
  max-width:none;
  margin:.6rem 0 .55rem;
  color:var(--ink);
  font-family:"Noto Serif TC","PMingLiU","Songti TC",serif;
  font-weight:800;
  font-size:clamp(2.35rem,4.2vw,4rem);
  letter-spacing:.06em;
  line-height:1.18;
}
.category-lead{max-width:900px;margin:0 auto;color:#6d6256;font-size:1.03rem;line-height:1.9}
.category-hint{
  margin-top:18px;
  padding:8px 20px;
  border:1px solid rgba(197,139,28,.38);
  background:rgba(255,253,247,.9);
  color:#8a5b08;
  box-shadow:0 5px 18px rgba(161,106,10,.08),inset 0 0 0 1px rgba(255,255,255,.7);
  font-size:.88rem;
  letter-spacing:.04em;
}
.category-grid-13{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
  margin-top:6px;
}
.category-tile{
  min-height:310px;
  border:1px solid rgba(194,148,65,.25);
  border-radius:18px;
  background:rgba(255,255,255,.92);
  box-shadow:0 9px 24px rgba(91,63,18,.06);
}
.category-tile::before{
  width:3px;
  top:28px;bottom:28px;
  background:linear-gradient(180deg,#d79825,#b97507);
  border-radius:0 3px 3px 0;
}
.category-tile section{min-height:310px;padding:19px 18px 18px;text-align:center;align-items:center}
.category-card-top{width:100%;min-height:76px;margin:0 0 10px;position:relative;justify-content:center}
.category-number{
  position:absolute;left:0;top:0;
  display:grid;place-items:center;
  width:34px;height:34px;
  border:1px solid #eee3cf;border-radius:50%;
  background:#fff;
  color:#695b48;
  box-shadow:0 4px 12px rgba(75,52,17,.05);
  letter-spacing:0;font-size:.68rem;
}
.category-icon{
  width:70px;height:70px;
  border:2px solid rgba(255,255,255,.9);
  outline:1px solid rgba(190,139,50,.26);
  background:linear-gradient(145deg,#e3b75b,#9b6515);
  color:#fffdf8;
  font-family:"Noto Serif TC","PMingLiU",serif;
  font-size:1.35rem;
  font-weight:800;
  text-shadow:0 1px 2px rgba(0,0,0,.18);
  box-shadow:0 8px 22px rgba(117,80,18,.18),inset 0 1px 0 rgba(255,255,255,.5);
}
.category-tile:nth-child(2) .category-icon{background:linear-gradient(145deg,#d6b15a,#263f68)}
.category-tile:nth-child(3) .category-icon{background:linear-gradient(145deg,#b98668,#6f445f)}
.category-tile:nth-child(4) .category-icon{background:linear-gradient(145deg,#e0bb62,#b47b1b)}
.category-tile:nth-child(5) .category-icon{background:linear-gradient(145deg,#507c7b,#1f4f56)}
.category-tile:nth-child(6) .category-icon{background:linear-gradient(145deg,#56799a,#294b6d)}
.category-tile:nth-child(7) .category-icon{background:linear-gradient(145deg,#e3b962,#a16f13)}
.category-tile:nth-child(8) .category-icon{background:linear-gradient(145deg,#52785d,#254d39)}
.category-tile:nth-child(9) .category-icon{background:linear-gradient(145deg,#c85d3f,#8b2d20)}
.category-tile:nth-child(10) .category-icon{background:linear-gradient(145deg,#7a587e,#42344f)}
.category-tile:nth-child(11) .category-icon{background:linear-gradient(145deg,#4e7f80,#225050)}
.category-tile:nth-child(12) .category-icon{background:linear-gradient(145deg,#c86d78,#8b4350)}
.category-tile:nth-child(13) .category-icon{background:linear-gradient(145deg,#c9a76b,#755a2e)}
.category-tile h2{
  width:100%;
  margin:5px 0 8px;
  color:#251e18;
  font-family:"Noto Serif TC","PMingLiU",serif;
  font-size:clamp(1.18rem,1.35vw,1.55rem);
  line-height:1.35;
  letter-spacing:.01em;
}
.category-tile p{margin:0 auto 16px;color:#655b51;font-size:.86rem;line-height:1.65}
.category-tile .category-enter{
  justify-content:center;
  width:min(150px,90%);
  margin-top:auto;
  padding:8px 14px;
  border:1px solid rgba(146,88,0,.12);
  border-radius:11px;
  background:linear-gradient(180deg,#dda93c,#a86605);
  color:#fff;
  box-shadow:0 5px 12px rgba(145,91,6,.18),inset 0 1px 0 rgba(255,255,255,.35);
  font-size:.84rem;
  letter-spacing:.05em;
}
.category-arrow{width:auto;height:auto;background:transparent!important;color:inherit!important;font-size:1rem}
.category-tile:hover,.category-tile:focus-visible{
  transform:translateY(-6px);
  border-color:rgba(181,125,24,.45);
  background:#fff;
  box-shadow:0 20px 40px rgba(87,57,12,.12);
}
.category-tile:hover .category-enter,.category-tile:focus-visible .category-enter{background:linear-gradient(180deg,#e9b84d,#9c5f00)}
.category-tile:hover .category-arrow,.category-tile:focus-visible .category-arrow{transform:translateX(3px)}
.category-dedication{
  margin:28px auto 0;
  text-align:center;
  color:#74695d;
  font-family:"Noto Serif TC","PMingLiU",serif;
  font-size:.92rem;
  letter-spacing:.08em;
}
.category-dedication::before,.category-dedication::after{content:"— ✦ —";margin:0 12px;color:#c39335}
@media(max-width:1220px){.category-grid-13{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:980px){.category-grid-13{grid-template-columns:repeat(3,minmax(0,1fr))}.category-hero::before,.category-hero::after{display:none}}
@media(max-width:720px){.category-grid-13{grid-template-columns:repeat(2,minmax(0,1fr))}.category-tile,.category-tile section{min-height:292px}}
@media(max-width:500px){
  .category-grid-13{grid-template-columns:1fr;gap:14px}
  .category-hero{padding:20px 10px 24px}
  .category-hero h1{font-size:2.25rem;letter-spacing:.02em}
  .category-tile,.category-tile section{min-height:250px}
  .category-tile section{padding:18px 20px}
  .category-card-top{min-height:68px}
  .category-icon{width:62px;height:62px}
  .category-dedication::before,.category-dedication::after{display:none}
}


/* V3.6 — match approved cream/gold mockup more closely */
.category-page{background:#fbf8f1;color:#211a14}
.category-premium-header{position:sticky;top:0;z-index:20;background:rgba(255,253,248,.97)!important;border-bottom:1px solid #eadfc8!important;box-shadow:0 2px 12px rgba(91,61,15,.035)!important}
.category-page .premium-nav{width:min(1480px,96%);max-width:1480px;min-height:76px;display:flex;align-items:center;gap:40px}
.premium-brand{display:flex!important;align-items:center;gap:11px;min-width:max-content;color:#292018!important;text-decoration:none!important}
.brand-lotus{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:#d69a2b;font-size:30px;transform:rotate(45deg);text-shadow:0 0 16px rgba(214,154,43,.22)}
.brand-wordmark{display:flex;flex-direction:column;line-height:1}
.brand-wordmark strong{font-family:"Noto Serif TC","PMingLiU",serif;font-size:1.02rem;letter-spacing:.18em}
.brand-wordmark small{margin-top:5px;font-size:.58rem;letter-spacing:.14em;color:#6d5c46;font-weight:700}
.premium-nav-links{margin-left:auto;display:flex;align-items:center;gap:31px}
.category-page .premium-nav-links a{padding:27px 0 22px;font-size:.92rem;color:#241c15;font-weight:800;white-space:nowrap}
.category-page .premium-nav-links a[href="music.html"]{color:#b26c00}
.category-page .premium-nav-links a[href="music.html"]::after{bottom:0;height:2px;background:#c9850f}
.nav-search{font-size:1.8rem!important;font-weight:400!important;line-height:1;transform:rotate(-18deg);text-decoration:none!important}
.category-section{padding:30px 0 42px;background:
 radial-gradient(circle at 6% 16%,rgba(225,181,83,.11),transparent 230px),
 radial-gradient(circle at 94% 14%,rgba(225,181,83,.10),transparent 260px),
 linear-gradient(180deg,#fffdf8 0%,#fbf8f1 100%)}
.category-page .category-content{width:min(1460px,95%);max-width:1460px}
.category-hero{padding:22px 20px 22px;margin-bottom:12px}
.category-kicker{font-size:.9rem;letter-spacing:.22em;color:#6f5a3c}
.category-kicker::before{display:none}
.category-hero h1{font-size:clamp(2.55rem,3.6vw,4.05rem);letter-spacing:.11em;margin:.7rem 0 .45rem;color:#2b1d18}
.category-lead{font-size:1.01rem;color:#766b5e;line-height:1.75}
.category-hint{margin-top:18px;padding:10px 28px;border-radius:999px;border:1px solid #e7c983;background:rgba(255,253,247,.95);box-shadow:0 5px 16px rgba(158,101,8,.08);font-size:.96rem;color:#a26100}
.category-grid-13{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:2px}
.category-tile{min-height:316px;border:1px solid #ecdcc1;border-radius:16px;background:#fffdfa;box-shadow:0 7px 18px rgba(82,56,16,.06)}
.category-tile::before{top:34px;bottom:34px;width:3px;background:linear-gradient(#e1a12b,#b57208)}
.category-tile section{min-height:316px;padding:18px 16px 16px}
.category-card-top{min-height:84px;margin-bottom:10px}
.category-number{width:35px;height:35px;font-size:.67rem;color:#4e4335;border-color:#eee2ce;box-shadow:0 3px 10px rgba(80,54,16,.05)}
.category-icon{width:76px;height:76px;font-size:1.45rem;border:3px solid #f6e8c8;outline:0;box-shadow:0 7px 17px rgba(100,70,16,.17),inset 0 1px 0 rgba(255,255,255,.45)}
.category-tile h2{font-size:clamp(1.18rem,1.25vw,1.48rem);margin:5px 0 8px;line-height:1.35}
.category-tile p{font-size:.84rem;line-height:1.65;color:#5f554b;margin-bottom:16px}
.category-tile .category-enter{width:min(142px,88%);padding:7px 12px;border-radius:10px;background:linear-gradient(#e2ad42,#ab6907);font-size:.81rem;box-shadow:0 4px 10px rgba(139,85,6,.19)}
.category-dedication{margin:22px auto 4px;font-size:.9rem;color:#75695c}
.category-min-footer{padding:16px 0 22px!important;text-align:center;background:#fbf8f1!important;border-top:0!important;color:#76695b}
.category-min-footer p{margin:.3rem 0}
@media(max-width:1240px){.premium-nav-links{gap:20px}.category-grid-13{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:980px){.category-page .premium-nav{align-items:flex-start;padding:13px 0;flex-direction:column;gap:10px}.premium-nav-links{margin-left:0;flex-wrap:wrap;gap:14px 20px}.category-page .premium-nav-links a{padding:6px 0}.category-grid-13{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.category-grid-13{grid-template-columns:repeat(2,minmax(0,1fr))}.category-hero h1{letter-spacing:.05em}}
@media(max-width:500px){.category-grid-13{grid-template-columns:1fr}.category-page .premium-nav{width:92%}.brand-lotus{width:36px;height:36px}.category-hero{padding-top:12px}}


/* V3.7 — pixel-tuned to the approved visual mockup */
.category-page{
  --premium-gold:#c98311;
  --premium-gold-2:#e0ad46;
  --premium-ink:#2b1b16;
  --premium-paper:#fdfaf4;
  background:var(--premium-paper);
}
.category-page .category-premium-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,253,248,.985)!important;
  border-bottom:1px solid #eee2cd!important;
  box-shadow:0 2px 10px rgba(93,62,16,.04)!important;
  backdrop-filter:blur(10px);
}
.category-page .premium-nav{
  width:min(1420px,92%);max-width:1420px;min-height:68px;
  display:flex;align-items:center;gap:46px!important;
}
.category-page .premium-brand{gap:10px!important}
.category-page .brand-lotus{width:34px;height:34px;display:block;transform:none!important;text-shadow:none!important;border-radius:0;background:none;color:var(--premium-gold)}
.category-page .brand-lotus svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.category-page .brand-wordmark strong{font-family:"Noto Serif TC","PMingLiU",serif;font-size:.98rem;letter-spacing:.22em;color:#271c15}
.category-page .brand-wordmark small{font-size:.54rem;letter-spacing:.13em;color:#7f6d57;margin-top:4px}
.category-page .premium-nav-links{margin-left:auto;gap:28px}
.category-page .premium-nav-links a{position:relative;padding:24px 0 20px;font-size:.9rem;font-weight:750;color:#2e241d}
.category-page .premium-nav-links a[href="music.html"]{color:#b56e00}
.category-page .premium-nav-links a[href="music.html"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#c9820b}
.category-page .nav-search{font-family:Arial,sans-serif;font-size:1.55rem!important;transform:none!important;font-weight:400!important}

.category-page .category-section{
  padding:0 0 36px;
  background:
    radial-gradient(ellipse at 11% 25%,rgba(229,189,103,.12),transparent 24%),
    radial-gradient(ellipse at 89% 21%,rgba(229,189,103,.11),transparent 26%),
    linear-gradient(180deg,#fffdf8 0%,#fbf8f1 100%);
}
.category-page .category-content{width:min(1420px,92%);max-width:1420px}
.category-page .category-hero{
  position:relative;isolation:isolate;overflow:hidden;
  text-align:center;margin:0 auto 16px;padding:46px 20px 26px;
  border:0;background:transparent;box-shadow:none;
}
.category-page .category-hero::before,.category-page .category-hero::after{display:none!important}
.category-page .category-kicker{position:relative;z-index:2;display:flex!important;justify-content:center;align-items:center;gap:12px;color:#745b36;font-size:.86rem;letter-spacing:.22em;font-weight:650}
.category-page .category-kicker::before,.category-page .category-kicker::after{content:"";display:block!important;width:120px;height:1px;background:linear-gradient(90deg,transparent,#d9b46b)}
.category-page .category-kicker::after{background:linear-gradient(90deg,#d9b46b,transparent)}
.category-page .category-hero h1{position:relative;z-index:2;margin:.62rem 0 .34rem;font-family:"Noto Serif TC","PMingLiU",serif;font-size:clamp(2.65rem,3.65vw,4.15rem);font-weight:800;line-height:1.15;letter-spacing:.065em;color:var(--premium-ink)}
.category-page .category-lead{position:relative;z-index:2;margin:0 auto;max-width:900px;font-size:.98rem;line-height:1.7;color:#776b5d}
.category-page .category-hint{position:relative;z-index:2;display:inline-flex;align-items:center;gap:5px;margin-top:16px;padding:9px 24px;border:1px solid #e6c67d;border-radius:999px;background:rgba(255,253,248,.96);color:#a76600;font-size:.9rem;font-weight:750;box-shadow:0 6px 16px rgba(161,104,9,.07)}
.hero-lotus,.hero-temple{position:absolute;z-index:0;pointer-events:none;opacity:.13;filter:sepia(.2)}
.hero-lotus{left:-5px;bottom:-42px;width:230px;height:230px;background:radial-gradient(ellipse at center,rgba(214,163,61,.22) 0 18%,transparent 19%),repeating-conic-gradient(from -8deg,rgba(207,154,50,.22) 0 8deg,transparent 8deg 23deg);border-radius:50%}
.hero-temple{right:8px;bottom:-16px;width:230px;height:150px;background:linear-gradient(160deg,transparent 0 42%,rgba(196,145,47,.26) 42% 46%,transparent 46%),linear-gradient(20deg,transparent 0 42%,rgba(196,145,47,.26) 42% 46%,transparent 46%);clip-path:polygon(50% 0,95% 35%,79% 35%,79% 51%,92% 51%,84% 59%,84% 100%,16% 100%,16% 59%,8% 51%,21% 51%,21% 35%,5% 35%)}

.category-page .category-grid-13{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:0}
.category-page .category-tile{min-height:292px;border:1px solid #ead9bd;border-radius:16px;background:rgba(255,255,255,.92);box-shadow:0 7px 18px rgba(76,49,12,.055)}
.category-page .category-tile::before{top:30px;bottom:30px;width:3px;background:linear-gradient(180deg,#dfa02a,#b97307);opacity:.85}
.category-page .category-tile section{min-height:292px;padding:16px 15px 15px;text-align:center;align-items:center}
.category-page .category-card-top{width:100%;min-height:80px;margin:0 0 8px;position:relative;display:flex;justify-content:center;align-items:center}
.category-page .category-number{position:absolute;left:0;top:0;display:grid;place-items:center;width:34px;height:34px;border:1px solid #ede1cd;border-radius:50%;background:#fff;color:#56493a;box-shadow:0 3px 10px rgba(80,54,16,.05);font-size:.64rem;letter-spacing:0}
.category-page .category-icon{width:70px;height:70px;border:3px solid #f7e8c5;outline:0;border-radius:50%;background:linear-gradient(145deg,#e0b458,#9c6716);color:#fffaf0;font-family:"Noto Serif TC","PMingLiU",serif;font-size:1.32rem;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.18);box-shadow:0 7px 18px rgba(114,76,16,.16),inset 0 1px 0 rgba(255,255,255,.5)}
.category-page .category-tile:nth-child(2) .category-icon{background:linear-gradient(145deg,#d4ad55,#304869)}
.category-page .category-tile:nth-child(3) .category-icon{background:linear-gradient(145deg,#c08c71,#76485d)}
.category-page .category-tile:nth-child(4) .category-icon{background:linear-gradient(145deg,#e1bb61,#b57919)}
.category-page .category-tile:nth-child(5) .category-icon{background:linear-gradient(145deg,#568080,#24535a)}
.category-page .category-tile:nth-child(6) .category-icon{background:linear-gradient(145deg,#5c7c9e,#2a4d70)}
.category-page .category-tile:nth-child(7) .category-icon{background:linear-gradient(145deg,#e1b75d,#a16b10)}
.category-page .category-tile:nth-child(8) .category-icon{background:linear-gradient(145deg,#587c61,#264f3b)}
.category-page .category-tile:nth-child(9) .category-icon{background:linear-gradient(145deg,#c65b3f,#8c3022)}
.category-page .category-tile:nth-child(10) .category-icon{background:linear-gradient(145deg,#805c82,#443650)}
.category-page .category-tile:nth-child(11) .category-icon{background:linear-gradient(145deg,#4f7f81,#235052)}
.category-page .category-tile:nth-child(12) .category-icon{background:linear-gradient(145deg,#c96e78,#8b4450)}
.category-page .category-tile:nth-child(13) .category-icon{background:linear-gradient(145deg,#cbaa6e,#765b31)}
.category-page .category-tile h2{width:100%;min-height:2.65em;margin:1px 0 6px;display:flex;align-items:center;justify-content:center;font-family:"Noto Serif TC","PMingLiU",serif;font-size:1.17rem;line-height:1.32;letter-spacing:0;color:#261d17}
.category-page .category-tile p{margin:0 auto 13px;color:#665b50;font-size:.79rem;line-height:1.62}
.category-page .category-tile .category-enter{display:flex;justify-content:center;align-items:center;gap:12px;width:142px;margin-top:auto;padding:7px 13px;border:0;border-radius:10px;background:linear-gradient(180deg,#e1aa3c,#aa6805);color:#fff;font-size:.78rem;font-weight:800;letter-spacing:.05em;box-shadow:0 4px 11px rgba(139,84,5,.19),inset 0 1px 0 rgba(255,255,255,.32)}
.category-page .category-arrow{font-size:.92rem}
.category-page .category-tile:hover,.category-page .category-tile:focus-visible{transform:translateY(-5px);border-color:#d3b574;background:#fff;box-shadow:0 16px 32px rgba(84,54,10,.11)}
.category-page .category-dedication{margin:18px auto 0;text-align:center;color:#75695d;font-family:"Noto Serif TC","PMingLiU",serif;font-size:.85rem;letter-spacing:.07em}
.category-page .category-dedication::before,.category-page .category-dedication::after{content:"— ✦ —";margin:0 10px;color:#c49335}
.category-page .category-min-footer{display:none}
@media(max-width:1250px){.category-page .premium-nav-links{gap:18px}.category-page .category-grid-13{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:980px){.category-page .premium-nav{align-items:flex-start;flex-direction:column;padding:11px 0;gap:8px!important}.category-page .premium-nav-links{margin-left:0;flex-wrap:wrap;gap:10px 18px}.category-page .premium-nav-links a{padding:4px 0}.category-page .category-grid-13{grid-template-columns:repeat(3,minmax(0,1fr))}.category-page .category-kicker::before,.category-page .category-kicker::after{width:70px}}
@media(max-width:720px){.category-page .category-grid-13{grid-template-columns:repeat(2,minmax(0,1fr))}.category-page .category-hero h1{letter-spacing:.025em}.hero-lotus,.hero-temple{opacity:.08}}
@media(max-width:500px){.category-page .category-grid-13{grid-template-columns:1fr}.category-page .category-content{width:92%}.category-page .category-hero{padding:28px 4px 20px}.category-page .category-kicker::before,.category-page .category-kicker::after{display:none!important}.category-page .category-hero h1{font-size:2.18rem}.category-page .category-tile,.category-page .category-tile section{min-height:260px}.category-page .brand-wordmark strong{font-size:.9rem}}

/* V3.8 — matched to the user-approved reference image */
.category-v38{margin:0;background:#fffaf1;color:#23170f;font-family:"Noto Serif TC","PMingLiU","Times New Roman",serif;}
.category-v38 .ref-header{height:74px;background:#fff;box-shadow:0 1px 0 rgba(177,129,45,.14),0 3px 12px rgba(117,78,21,.035);position:relative;z-index:30;}
.category-v38 .ref-nav-wrap{width:min(1350px,96%);height:74px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:28px;}
.category-v38 .ref-logo{display:block;flex:0 0 auto;line-height:0;}
.category-v38 .ref-logo img{display:block;width:190px;height:57px;object-fit:contain;}
.category-v38 .ref-nav{height:100%;display:flex;align-items:center;gap:38px;font-family:system-ui,-apple-system,"Noto Sans TC",sans-serif;font-size:14px;font-weight:700;white-space:nowrap;}
.category-v38 .ref-nav a{height:100%;display:flex;align-items:center;position:relative;color:#1e1712;text-decoration:none;padding:0 1px;}
.category-v38 .ref-nav a.active{color:#bf7400;}
.category-v38 .ref-nav a.active::after{content:"";position:absolute;height:2px;left:-10px;right:-10px;bottom:0;background:#c78516;}
.category-v38 .ref-search{font-size:27px!important;font-family:Arial,sans-serif!important;font-weight:400!important;transform:translateY(-1px);}
.category-v38 .ref-main{background:linear-gradient(180deg,#fffdf9 0,#fffaf0 52%,#fffdf8 100%);min-height:calc(100vh - 74px);padding-bottom:20px;overflow:hidden;}
.category-v38 .ref-hero{height:258px;box-sizing:border-box;position:relative;text-align:center;padding:40px 20px 0;overflow:hidden;}
.category-v38 .ref-deco{position:absolute;top:0;height:248px;width:auto;opacity:.62;pointer-events:none;mix-blend-mode:multiply;}
.category-v38 .ref-deco-left{left:0;}
.category-v38 .ref-deco-right{right:0;}
.category-v38 .ref-kicker{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;gap:14px;color:#715b46;font-size:15px;letter-spacing:.22em;font-weight:600;}
.category-v38 .ref-kicker span{width:105px;height:1px;background:linear-gradient(90deg,transparent,#d9b777);position:relative;}
.category-v38 .ref-kicker span:first-child::after{content:"❖";position:absolute;right:-6px;top:-9px;color:#d2a44e;font-size:13px;background:#fffaf3;padding:0 4px;}
.category-v38 .ref-kicker span:last-child{background:linear-gradient(90deg,#d9b777,transparent);}
.category-v38 .ref-kicker span:last-child::before{content:"❖";position:absolute;left:-6px;top:-9px;color:#d2a44e;font-size:13px;background:#fffaf3;padding:0 4px;}
.category-v38 .ref-hero h1{position:relative;z-index:2;margin:14px 0 5px;font-family:"Noto Serif TC","PMingLiU",serif;font-size:50px;line-height:1.18;font-weight:900;letter-spacing:.07em;color:#26150f;}
.category-v38 .ref-hero>p{position:relative;z-index:2;margin:0;color:#6c625b;font-family:system-ui,-apple-system,"Noto Sans TC",sans-serif;font-size:15px;letter-spacing:.02em;}
.category-v38 .ref-hint{position:relative;z-index:2;display:inline-flex;align-items:center;margin-top:24px;padding:11px 28px;border:1px solid #e6c781;border-radius:999px;background:rgba(255,253,247,.93);color:#aa6500;font-family:system-ui,-apple-system,"Noto Sans TC",sans-serif;font-size:15px;font-weight:700;box-shadow:0 3px 9px rgba(180,121,18,.06);}
.category-v38 .ref-grid{width:min(1298px,94%);margin:0 auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px 13px;align-items:stretch;}
.category-v38 .ref-card{min-height:235px;position:relative;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;padding:17px 14px 14px;border:1px solid #ecdcbf;border-radius:15px;background:rgba(255,255,255,.95);box-shadow:0 5px 15px rgba(100,66,14,.045);color:#211812;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.category-v38 .ref-card::before{content:"";position:absolute;left:-1px;top:33px;bottom:42px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#e2a42c,#b7780d);}
.category-v38 .ref-card:hover,.category-v38 .ref-card:focus-visible{transform:translateY(-3px);box-shadow:0 11px 22px rgba(104,68,10,.10);border-color:#dfc58f;outline:none;}
.category-v38 .ref-num{position:absolute;top:18px;left:15px;width:34px;height:34px;display:grid;place-items:center;border:1px solid #eee3d2;border-radius:50%;background:#fff;color:#51443a;font-family:system-ui,sans-serif;font-size:11px;font-weight:600;box-shadow:0 2px 6px rgba(72,48,13,.04);}
.category-v38 .ref-icon{display:block;width:82px;height:82px;border-radius:50%;object-fit:contain;margin:0 auto 10px;box-shadow:0 4px 11px rgba(79,50,7,.10);}
.category-v38 .ref-card h2{min-height:48px;margin:0 0 6px;display:flex;align-items:center;justify-content:center;text-align:center;font-family:"Noto Serif TC","PMingLiU",serif;font-size:20px;line-height:1.22;font-weight:900;color:#201711;}
.category-v38 .ref-card p{margin:0 auto 14px;max-width:215px;text-align:center;font-family:system-ui,-apple-system,"Noto Sans TC",sans-serif;font-size:13px;line-height:1.55;color:#574b42;}
.category-v38 .ref-enter{margin-top:auto;min-width:140px;height:30px;display:flex;align-items:center;justify-content:center;gap:19px;border-radius:9px;background:linear-gradient(180deg,#dfa533,#b87308);box-shadow:inset 0 1px rgba(255,255,255,.28),0 4px 8px rgba(149,89,5,.14);color:#fff;font-family:system-ui,-apple-system,"Noto Sans TC",sans-serif;font-size:13px;font-weight:800;letter-spacing:.03em;}
.category-v38 .ref-enter b{font-size:16px;line-height:1;}
.category-v38 .ref-dedication{width:min(650px,90%);margin:17px auto 0;display:flex;justify-content:center;align-items:center;gap:12px;text-align:center;color:#817262;font-family:"Noto Serif TC","PMingLiU",serif;font-size:14px;letter-spacing:.06em;}
.category-v38 .ref-dedication span{flex:1;height:1px;background:linear-gradient(90deg,transparent,#d7b266);position:relative;max-width:120px;}
.category-v38 .ref-dedication span:first-child::after{content:"❖";position:absolute;right:-6px;top:-9px;color:#d1a247;background:#fffaf3;padding:0 4px;font-size:12px;}
.category-v38 .ref-dedication span:last-child{background:linear-gradient(90deg,#d7b266,transparent);}
.category-v38 .ref-dedication span:last-child::before{content:"❖";position:absolute;left:-6px;top:-9px;color:#d1a247;background:#fffaf3;padding:0 4px;font-size:12px;}
@media (max-width:1180px){.category-v38 .ref-nav{gap:22px;font-size:13px}.category-v38 .ref-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:930px){.category-v38 .ref-header{height:auto}.category-v38 .ref-nav-wrap{height:auto;min-height:74px;align-items:flex-start;flex-direction:column;padding:8px 0 10px}.category-v38 .ref-nav{height:auto;flex-wrap:wrap;gap:10px 22px}.category-v38 .ref-nav a{height:auto;padding:5px 0}.category-v38 .ref-nav a.active::after{bottom:0}.category-v38 .ref-grid{grid-template-columns:repeat(3,1fr)}.category-v38 .ref-hero h1{font-size:42px}}
@media (max-width:700px){.category-v38 .ref-hero{height:auto;padding-bottom:28px}.category-v38 .ref-deco{opacity:.28}.category-v38 .ref-grid{grid-template-columns:repeat(2,1fr)}.category-v38 .ref-hero h1{font-size:34px}.category-v38 .ref-kicker span{width:55px}}
@media (max-width:470px){.category-v38 .ref-grid{grid-template-columns:1fr}.category-v38 .ref-logo img{width:172px;height:auto}.category-v38 .ref-kicker span{display:none}.category-v38 .ref-hero h1{font-size:30px;letter-spacing:.02em}.category-v38 .ref-card{min-height:225px}.category-v38 .ref-dedication span{display:none}}
@media (prefers-reduced-motion:reduce){.category-v38 .ref-card{transition:none}.category-v38 .ref-card:hover{transform:none}}
/* V3.8 final dimensional tuning against the supplied 1402×1122 reference */
.category-v38 .ref-card{min-height:232px;padding:14px 13px 12px}
.category-v38 .ref-icon{width:72px;height:72px;margin-bottom:8px}
.category-v38 .ref-num{top:16px;left:14px;width:32px;height:32px;font-size:10px}
.category-v38 .ref-card h2{min-height:44px;font-size:19px;margin-bottom:4px}
.category-v38 .ref-card p{font-size:12.5px;line-height:1.48;margin-bottom:10px;max-width:214px}
.category-v38 .ref-enter{min-width:140px;height:29px;font-size:12.5px}
.category-v38 .ref-grid{gap:12px 13px}


/* V3.9 — seamless hero artwork: remove rectangular decorative-image edges */
.category-v38 .ref-hero{
  background-color:#fffdf8;
  background-image:url("../images/category-v38/hero-seamless.webp");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:cover;
}
.category-v38 .ref-deco{display:none!important;}
@media (max-width:700px){
  .category-v38 .ref-hero{
    background-size:auto 100%;
    background-position:center top;
  }
}

/* V4.0 — clearer lotus/temple art with true feathered edge blending */
.category-v38 .ref-hero{
  background-color:#fffdf8;
  background-image:url("../images/category-v38/hero-seamless-v40.webp");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:cover;
}
.category-v38 .ref-deco{display:none!important;}
@media (max-width:700px){
  .category-v38 .ref-hero{
    background-size:auto 100%;
    background-position:center top;
  }
}

/* V4.1 — soften the lower edge of the category hero artwork */
.category-v38 .ref-hero{
  background-image:url("../images/category-v38/hero-seamless-v41.webp");
}

/* V4.2 — remove the last visible lower seam: artwork fades to transparency, then into the exact page background */
.category-v38 .ref-main{
  background:#fffdf8;
}
.category-v38 .ref-hero{
  background-color:#fffdf8;
  background-image:url("../images/category-v38/hero-seamless-v42.webp");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:cover;
}
.category-v38 .ref-hero::after{
  content:"";
  position:absolute;
  z-index:1;
  left:0;
  right:0;
  bottom:-1px;
  height:92px;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,253,248,0) 0%,rgba(255,253,248,.34) 38%,rgba(255,253,248,.82) 75%,#fffdf8 100%);
}
.category-v38 .ref-hero > *{position:relative;z-index:2;}
@media (max-width:700px){
  .category-v38 .ref-hero{background-size:auto 100%;background-position:center top;}
  .category-v38 .ref-hero::after{height:72px;}
}

/* V4.2 — let the hero artwork fade naturally into the card area (no hard lower edge) */
.category-v38 .ref-main{
  position:relative;
  isolation:isolate;
  background:#fffaf1;
}
.category-v38 .ref-main::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0 0 auto 0;
  height:330px;
  pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(255,250,241,0) 0%,
      rgba(255,250,241,0) 58%,
      rgba(255,250,241,.22) 70%,
      rgba(255,250,241,.62) 84%,
      #fffaf1 100%),
    url("../images/category-v38/hero-seamless-v41.webp") center top / cover no-repeat;
}
.category-v38 .ref-hero{
  position:relative;
  z-index:1;
  background:none!important;
}
.category-v38 .ref-grid,
.category-v38 .ref-dedication{
  position:relative;
  z-index:1;
}
@media(max-width:700px){
  .category-v38 .ref-main::before{
    height:360px;
    background:
      linear-gradient(to bottom,
        rgba(255,250,241,0) 0%,
        rgba(255,250,241,.05) 52%,
        rgba(255,250,241,.55) 78%,
        #fffaf1 100%),
      url("../images/category-v38/hero-seamless-v41.webp") center top / auto 300px no-repeat;
  }
}

/* V4.3 — true continuous artwork: one background layer spans hero + first card row and fades with an alpha mask */
.category-v38 .ref-main{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#fffaf1;
}
.category-v38 .ref-main::before{
  content:"";
  position:absolute;
  z-index:0;
  left:0;
  right:0;
  top:0;
  height:560px;
  pointer-events:none;
  background:url("../images/category-v38/hero-seamless-v41.webp") center top / cover no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 48%,rgba(0,0,0,.93) 58%,rgba(0,0,0,.70) 69%,rgba(0,0,0,.40) 79%,rgba(0,0,0,.16) 89%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 48%,rgba(0,0,0,.93) 58%,rgba(0,0,0,.70) 69%,rgba(0,0,0,.40) 79%,rgba(0,0,0,.16) 89%,transparent 100%);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
}
.category-v38 .ref-hero{
  position:relative;
  z-index:1;
  background:none!important;
  overflow:visible;
}
.category-v38 .ref-hero::after{display:none!important;content:none!important;}
.category-v38 .ref-grid,.category-v38 .ref-dedication{position:relative;z-index:1;}
@media(max-width:700px){
  .category-v38 .ref-main::before{
    height:520px;
    background-size:auto 330px;
    background-position:center top;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 42%,rgba(0,0,0,.85) 56%,rgba(0,0,0,.50) 70%,rgba(0,0,0,.20) 84%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 42%,rgba(0,0,0,.85) 56%,rgba(0,0,0,.50) 70%,rgba(0,0,0,.20) 84%,transparent 100%);
  }
}

/* V4.4: critical visual rules are embedded in music.html to prevent missing assets. */


/* V4.5 icon completeness fix */
.category-v38 .ref-icon{box-sizing:border-box!important;object-fit:contain!important;object-position:center center!important;background:#fff!important;padding:4px!important;width:76px!important;height:76px!important;border-radius:50%!important;box-shadow:0 6px 14px rgba(79,50,7,.10)!important;}
@media (max-width: 980px){.category-v38 .ref-icon{width:72px!important;height:72px!important;padding:4px!important;}}

/* V4.7 - use complete source icons; never clip the artwork */
.category-v38 .ref-icon{
  width:86px!important;
  height:86px!important;
  object-fit:contain!important;
  object-position:center center!important;
  border-radius:0!important;
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}