:root {
  --paper:   #f4eee0;
  --parchment: #f5e9cc;
  --gold:    #9a6e1a;
  --gold2:   #c49a2e;
  --gold3:   #e8c96a;
  --red:     #8b1a1a;
  --red2:    #b52a2a;
  --ink:     #1e1208;
  --dim:     #4d3820;
  --border:  rgba(154,110,26,.2);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  font-family: 'Noto Serif Thai', 'Noto Serif TC', serif;
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background-image:
    radial-gradient(ellipse 80% 55% at 50% -10%, rgba(180,80,20,.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 90%,  rgba(154,110,26,.07) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 90% 60%,  rgba(139,26,26,.05) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104'%3E%3Cpath d='M30 2 L58 18 L58 50 L30 66 L2 50 L2 18 Z' fill='none' stroke='%239a6e1a' stroke-width='0.4' opacity='0.1'/%3E%3Cpath d='M30 38 L58 54 L58 86 L30 102 L2 86 L2 54 Z' fill='none' stroke='%239a6e1a' stroke-width='0.4' opacity='0.1'/%3E%3C/svg%3E");
  pointer-events: none;
}

.top-bar {
  position: relative; z-index: 2;
  width: 100%; height: 4px;
  background: linear-gradient(90deg,
    transparent 0%, var(--red) 12%, var(--gold2) 30%,
    #f0d070 50%, var(--gold2) 70%, var(--red) 88%, transparent 100%);
}

.hero {
  position: relative; z-index: 1;
  text-align: center;
  padding: 40px 24px 32px;
}

.medallion {
  display: none;
}
.medallion svg {
  display: none;
}


.hero-cn {
  font-family: 'Noto Serif TC', serif;
  font-size: clamp(54px, 11vw, 96px);
  font-weight: 900; letter-spacing: .22em; line-height: 1;
  color: var(--red);
  text-shadow: 1px 2px 0 rgba(139,26,26,.15), 0 0 40px rgba(139,26,26,.08);
}


.ornament {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin: 24px auto 16px; max-width: 400px;
  width: 100%; padding: 0 8px;
}
.ornament-line { flex: 1; min-width: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold2), transparent); opacity: .6; }
.ornament-diamond { width: 7px; height: 7px; flex-shrink: 0; background: var(--gold2); transform: rotate(45deg); box-shadow: 0 0 6px rgba(196,154,46,.4); }
.ornament-center { font-family: 'Noto Serif TC', serif; font-size: 16px; color: var(--gold); letter-spacing: .15em; white-space: nowrap; flex-shrink: 0; }

.hero-sub { font-size: 11px; letter-spacing: .32em; color: #5a4020; font-family: 'Noto Serif TC', serif; }

.section-label { position: relative; z-index: 1; text-align: center; margin: 0 auto 16px; }
.section-label span { font-family: 'Noto Serif TC', serif; font-size: 10px; letter-spacing: .35em; color: var(--dim); padding: 0 16px; }
.section-label span::before { content: '─ ✦ ─ '; color: var(--gold2); opacity: .6; }
.section-label span::after  { content: ' ─ ✦ ─'; color: var(--gold2); opacity: .6; }

.grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px; margin: 0 auto; padding: 0 32px 80px;
}

/* ── CARD ── */
.tcard {
  position: relative;
  user-select: none;
  -webkit-user-select: none; background: #fff; overflow: hidden;
  cursor: pointer; text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 2px;
  box-shadow: 0 2px 16px rgba(154,110,26,.08), 0 1px 4px rgba(0,0,0,.04);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.tcard::before, .tcard::after {
  content: ''; position: absolute;
  width: 18px; height: 18px;
  border-color: var(--gold2); border-style: solid;
  opacity: .25; z-index: 2;
  transition: opacity .3s ease, width .3s ease, height .3s ease;
  pointer-events: none;
}
.tcard::before { top: 8px; left: 8px;  border-width: 1px 0 0 1px; }
.tcard::after  { bottom: 8px; right: 8px; border-width: 0 1px 1px 0; }

.tcard:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(154,110,26,.14), 0 4px 12px rgba(0,0,0,.06);
  border-color: rgba(196,154,46,.45);
}
.tcard:hover::before, .tcard:hover::after { opacity: .7; width: 24px; height: 24px; }
.tcard:hover .tcard-glow  { opacity: 1; }
.tcard:hover .tcard-num-big { opacity: .06; }
.tcard-stripe { height: 4px; width: 100%; }

.tcard-glow {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0; transition: opacity .4s ease; pointer-events: none;
}

.tcard-num-big {
  position: absolute; right: -6px; bottom: -12px;
  font-family: 'Noto Serif TC', serif; font-size: 80px; font-weight: 900;
  opacity: .03; line-height: 1; z-index: 0;
  transition: opacity .3s ease; user-select: none; pointer-events: none;
}

.tcard-body { position: relative; z-index: 1; padding: 20px 20px 16px; flex: 1; }

.tcard-seq {
  font-family: 'Noto Serif TC', serif; font-size: 11px;
  letter-spacing: .3em; color: var(--dim);
  margin-bottom: 16px; display: flex; align-items: center; gap: 10px;
}
.tcard-seq::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }

.tcard-cn { font-family: 'Noto Serif TC', serif; font-size: 24px; font-weight: 700; letter-spacing: .1em; line-height: 1; margin-bottom: 10px; }
.tcard-th { font-size: 16px; letter-spacing: .04em; margin-bottom: 20px; font-weight: 600; color: #5a4020; }
.tcard-deity { font-family: 'Noto Serif TC', serif; font-size: 11.5px; color: #5a4020; letter-spacing: .05em; line-height: 1.9; margin-bottom: 8px; }
.tcard-sticks { font-size: 11.5px; color: #5a4020; letter-spacing: .08em; }

.tcard-footer {
  z-index: 1; padding: 10px 20px; /* ปลดล็อก relative ให้ info-btn ลอยอิงจาก tcard */
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}

.tcard-badge { font-size: 9px; letter-spacing: .18em; padding: 4px 11px; font-family: 'Noto Serif TC', serif; }
.badge-ready { color: #2e7d52; border: 1px solid rgba(46,125,82,.3); background: rgba(46,125,82,.06); }
.badge-soon { color: #5a4020; border: 1px solid rgba(90,64,32,.3); background: transparent; }



/* ── info button ── */
.info-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50% !important;
  border: 1.5px solid rgba(154,110,26,.55);
  background: rgba(253,246,232,.92);
  cursor: pointer;
  font-size: 13px;
  color: var(--gold);
  font-family: 'Noto Serif TC', serif;
  font-weight: 900;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
  text-decoration: none;
  box-shadow: 0 1px 4px rgba(154,110,26,.18);
  flex-shrink: 0;
}
.info-btn:hover {
  background: var(--gold2); border-color: var(--gold2);
  color: #fff; transform: scale(1.12);
  box-shadow: 0 2px 8px rgba(196,154,46,.35);
}




/* ── filter bar ── */
.filter-bar {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px; max-width: 800px; margin: 0 auto 32px;
  padding: 0 32px;
}
.filter-btn {
  font-family: 'Noto Serif TC', serif;
  font-size: 10px; letter-spacing: .2em;
  padding: 6px 16px; cursor: pointer;
  border: 1px solid var(--border);
  background: transparent; color: var(--dim);
  transition: background .2s, border-color .2s, color .2s;
}
.filter-btn:hover { border-color: var(--gold2); color: var(--gold); }
.filter-btn.active {
  background: var(--ink); border-color: var(--ink);
  color: var(--paper);
}


/* ── tier section divider ── */
.tier-divider {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 14px;
  padding: 8px 0 4px;
}
.tier-divider-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.tier-divider-label {
  font-family: 'Noto Serif TC', serif;
  font-size: 9px; letter-spacing: .3em;
  padding: 4px 12px;
  display: flex; align-items: center; gap: 7px;
}
.tier-divider-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.td-1 { color: #8b1a1a; border: 1px solid rgba(139,26,26,.25); background: rgba(139,26,26,.04); }
.td-1 .tier-divider-dot { background: #8b1a1a; }
.td-2 { color: #7a5500; border: 1px solid rgba(122,85,0,.25);  background: rgba(122,85,0,.04); }
.td-2 .tier-divider-dot { background: #7a5500; }
.td-3 { color: #3d5a27; border: 1px solid rgba(61,90,39,.25);  background: rgba(61,90,39,.04); }
.td-3 .tier-divider-dot { background: #3d5a27; }

/* ── tier badge on card ── */
.tier-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9.5px; letter-spacing: .18em;
  font-family: 'Noto Serif TC', serif;
  padding: 3px 9px 3px 7px;
  margin-bottom: 12px;
}
.tier-1 { color: #8b1a1a; border: 1px solid rgba(139,26,26,.3); background: rgba(139,26,26,.05); }
.tier-2 { color: #7a5500; border: 1px solid rgba(122,85,0,.3);  background: rgba(122,85,0,.05); }
.tier-3 { color: #3d5a27; border: 1px solid rgba(61,90,39,.3);  background: rgba(61,90,39,.05); }
.tier-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.tier-1 .tier-dot { background: #8b1a1a; }
.tier-2 .tier-dot { background: #7a5500; }
.tier-3 .tier-dot { background: #3d5a27; }

/* ── disabled / coming-soon card ── */
.tcard.soon { display: none; }

/* ── mini tags on card ── */
.tcard-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }
.tcard-tag-mini {
  font-size: 9px; letter-spacing: .07em; padding: 2px 8px;
  border: 1px solid var(--border); color: var(--dim);
  font-family: 'Noto Serif TC', serif; opacity: .8;
}

/* ── per-card palettes ── */
.c-wts .tcard-stripe { background: linear-gradient(90deg, #8b1a1a, #c0392b); }
.c-wts .tcard-glow   { background: radial-gradient(ellipse at 20% 60%, rgba(139,26,26,.06) 0%, transparent 65%); }
.c-wts .tcard-cn     { color: #8b1a1a; }
.c-wts .tcard-num-big { color: #8b1a1a; }

.c-che .tcard-stripe { background: linear-gradient(90deg, #1a3d6b, #2471a3); }
.c-che .tcard-glow   { background: radial-gradient(ellipse at 20% 60%, rgba(26,61,107,.06) 0%, transparent 65%); }
.c-che .tcard-cn     { color: #1a3d6b; }
.c-che .tcard-num-big { color: #1a3d6b; }

.c-gua .tcard-stripe { background: linear-gradient(90deg, #7d6608, #c49a2e); }
.c-gua .tcard-glow   { background: radial-gradient(ellipse at 20% 60%, rgba(125,102,8,.07) 0%, transparent 65%); }
.c-gua .tcard-cn     { color: #7d6608; }
.c-gua .tcard-num-big { color: #7d6608; }

.c-pak .tcard-stripe { background: linear-gradient(90deg, #1b4f2a, #27ae60); }
.c-pak .tcard-glow   { background: radial-gradient(ellipse at 20% 60%, rgba(27,79,42,.07) 0%, transparent 65%); }
.c-pak .tcard-cn     { color: #1b4f2a; }
.c-pak .tcard-num-big { color: #1b4f2a; }

.c-gdi .tcard-stripe { background: linear-gradient(90deg, #6b2400, #b34700); }
.c-gdi .tcard-glow   { background: radial-gradient(ellipse at 20% 60%, rgba(107,36,0,.06) 0%, transparent 65%); }
.c-gdi .tcard-cn     { color: #6b2400; }
.c-gdi .tcard-num-big { color: #6b2400; }

.c-wen .tcard-stripe { background: linear-gradient(90deg, #1a4a7a, #2980b9); }
.c-wen .tcard-glow   { background: radial-gradient(ellipse at 20% 60%, rgba(26,74,122,.06) 0%, transparent 65%); }
.c-wen .tcard-cn     { color: #1a4a7a; }
.c-wen .tcard-num-big { color: #1a4a7a; }

.c-yue .tcard-stripe { background: linear-gradient(90deg, #7b1f4a, #c0396b); }
.c-yue .tcard-glow   { background: radial-gradient(ellipse at 20% 60%, rgba(123,31,74,.06) 0%, transparent 65%); }
.c-yue .tcard-cn     { color: #7b1f4a; }
.c-yue .tcard-num-big { color: #7b1f4a; }

.c-lzu .tcard-stripe { background: linear-gradient(90deg, #2d5a27, #4caf50); }
.c-lzu .tcard-glow   { background: radial-gradient(ellipse at 20% 60%, rgba(45,90,39,.07) 0%, transparent 65%); }
.c-lzu .tcard-cn     { color: #2d5a27; }
.c-lzu .tcard-num-big { color: #2d5a27; }

.c-maz .tcard-stripe { background: linear-gradient(90deg, #1a5566, #1a8fa3); }
.c-maz .tcard-glow   { background: radial-gradient(ellipse at 20% 60%, rgba(26,85,102,.06) 0%, transparent 65%); }
.c-maz .tcard-cn     { color: #1a5566; }
.c-maz .tcard-num-big { color: #1a5566; }

.c-zho .tcard-stripe { background: linear-gradient(90deg, #4a3500, #8b6914); }
.c-zho .tcard-glow   { background: radial-gradient(ellipse at 20% 60%, rgba(74,53,0,.07) 0%, transparent 65%); }
.c-zho .tcard-cn     { color: #4a3500; }
.c-zho .tcard-num-big { color: #4a3500; }

.c-cai .tcard-stripe { background: linear-gradient(90deg, #7a5500, #d4a017); }
.c-cai .tcard-glow   { background: radial-gradient(ellipse at 20% 60%, rgba(122,85,0,.07) 0%, transparent 65%); }
.c-cai .tcard-cn     { color: #7a5500; }
.c-cai .tcard-num-big { color: #7a5500; }

.c-tud .tcard-stripe { background: linear-gradient(90deg, #3d2b00, #7a5500); }
.c-tud .tcard-glow   { background: radial-gradient(ellipse at 20% 60%, rgba(61,43,0,.07) 0%, transparent 65%); }
.c-tud .tcard-cn     { color: #3d2b00; }
.c-tud .tcard-num-big { color: #3d2b00; }

/* ── MODAL ── */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(30,18,8,.55);
  backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
  padding: 24px;
}
.modal-overlay.active { display: flex; animation: overlayIn .25s ease both; }

.modal-box {
  background: var(--paper);
  border: 1px solid rgba(154,110,26,.3);
  border-radius: 4px;
  max-width: 480px; width: 100%;
  box-shadow: 0 24px 64px rgba(30,18,8,.25);
  overflow: hidden;
  animation: modalIn .25s ease both;
}
@keyframes modalIn {
  from { opacity:0; transform: scale(.95) translateY(10px); }
  to   { opacity:1; transform: scale(1)  translateY(0); }
}
@keyframes modalOut {
  from { opacity:1; transform: scale(1)  translateY(0); }
  to   { opacity:0; transform: scale(.95) translateY(10px); }
}
@keyframes overlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes overlayOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.modal-overlay.closing { animation: overlayOut .2s ease both; }
.modal-overlay.closing .modal-box { animation: modalOut .2s ease both; }

.modal-stripe { height: 4px; width: 100%; }

.modal-header {
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}

.modal-title-block {}
.modal-title-cn {
  font-family: 'Noto Serif TC', serif;
  font-size: 40px; font-weight: 700; letter-spacing: .08em; line-height: 1;
  margin-bottom: 4px;
}
.modal-alias {
  font-size: 10px; letter-spacing: .28em; color: var(--gold);
  font-family: 'Noto Serif TC', serif;
}

.modal-close {
  background: none; border: 1px solid var(--border); border-radius: 50%;
  width: 30px; height: 30px; cursor: pointer; font-size: 14px;
  color: var(--dim); display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s; flex-shrink: 0; margin-top: 4px;
}
.modal-close:hover { background: var(--red); border-color: var(--red); color: #fff; }

.modal-body { padding: 20px 28px 24px; }

.modal-section { margin-bottom: 16px; }
.modal-section:last-child { margin-bottom: 0; }

.modal-label {
  font-size: 9px; letter-spacing: .3em; color: var(--gold);
  font-family: 'Noto Serif TC', serif; margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
.modal-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }

.modal-text {
  font-size: 13px; line-height: 1.85; color: var(--ink);
  font-family: 'Noto Serif Thai', 'Noto Serif TC', serif;
}

.modal-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.modal-tag {
  font-size: 10px; letter-spacing: .06em; padding: 3px 10px;
  border: 1px solid var(--border); color: var(--dim);
  font-family: 'Noto Serif TC', serif;
}

/* ── footer ── */
.page-footer { position: relative; z-index: 1; text-align: center; padding: 0 24px calc(48px + env(safe-area-inset-bottom)); }
.page-footer-line { width: 1px; height: 44px; background: linear-gradient(180deg, var(--gold2), transparent); margin: 0 auto 14px; opacity: .35; }
.page-footer p { font-size: 10px; letter-spacing: .22em; color: var(--dim); opacity: .55; font-family: 'Noto Serif TC', serif; }

@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); padding: 0 24px 64px; }
}

/* ── ซ่อน Mobile Nameline ใน Desktop ── */
.m-nameline { display: none !important; }

/* ═══════════════════════════════════════════
   MOBILE LIST VIEW  (injected by update_index.py)
   แทนที่ grid 2-col บน mobile ด้วย list view
   ═══════════════════════════════════════════ */
@media (max-width: 599px) {

  /* ── ซ่อน elements ที่ไม่ใช้ใน list view ── */
  .tcard::before, .tcard::after { display: none; }
  .tcard-glow, .tcard-num-big   { display: none; }
  .tcard-seq, .tier-badge       { display: none; }
  .tcard-deity                  { display: none; }
  /* ── info-btn ใน footer column (Option A) ── */
  .info-btn {
    position: static !important;
    order: -1 !important; /* ดันปุ่ม i ขึ้นข้างบนสุดใน Flex column */
    display: inline-flex !important;
    border-radius: 50% !important;
       /* ไม่ absolute แล้ว — flow ใน footer */
    width: 20px !important;
    height: 20px !important;
    font-size: 10px !important;
    margin-bottom: 6px !important; /* เว้นระยะจาก badge ให้กว้างขึ้น */
    box-shadow: none !important;
    flex-shrink: 0 !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* ── grid → single column ── */
  .grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 0 12px 56px !important;
  }

  /* ── card layout: horizontal row ── */
  .tcard {
    display: flex;
    flex-direction: row !important;
    align-items: center !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    min-height: 0 !important;
    position: relative !important;
  }

  /* ── stripe กลายเป็นแถบซ้าย ── */
  .tcard-stripe {
    width: 4px !important;
    height: 100% !important;
    min-height: 64px !important;
    flex-shrink: 0 !important;
    align-self: stretch !important;
  }

  /* ── body ── */
  .tcard-body {
    flex: 1 !important;
    padding: 10px 10px 8px !important;
    min-width: 0 !important;
  }

  /* ── ชื่อบรรทัดเดียว: ไทยใหญ่ · จีนเล็ก ── */
  .tcard-th {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--ink) !important;
    margin-bottom: 0 !important;
    display: inline !important;
  }
  .tcard-cn {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--dim) !important;
    margin-bottom: 0 !important;
    display: inline !important;
    margin-left: 6px !important;
  }
  /* จัดชื่อจีน+ไทยอยู่แถวเดียวกัน */
  .tcard-body > .tcard-cn { display: none !important; }


  /* ── ซ่อน original tcard-th หลัง m-nameline inject แล้ว ── */
  .tcard-body:has(.m-nameline) > .tcard-th { display: none !important; }
  /* fallback: JS จะ add class 'ml-hidden' ถ้า browser ไม่ support :has() */
  .tcard-th.ml-hidden { display: none !important; }
  /* ── name line wrapper (inject via JS) ── */
  .m-nameline {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    margin-bottom: 5px !important;
  }
  .m-nameline .m-th {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--ink) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
  }
  .m-nameline .m-sep {
    font-size: 10px !important;
    color: rgba(154,110,26,.35) !important;
    flex-shrink: 0 !important;
  }
  .m-nameline .m-cn {
    font-size: 12px !important;
    color: var(--dim) !important;
    font-family: 'Noto Serif TC', serif !important;
    flex-shrink: 0 !important;
  }

  /* ── tags แสดงได้เลย ── */
  .tcard-tags { display: flex !important; margin-top: 4px !important; gap: 4px !important; }
  .tcard-sticks { display: none !important; }

  /* ── footer ── */
  .tcard-footer {
    padding: 8px 10px !important;
    flex-direction: column !important;
    align-items: center !important;   /* center แนวนอน เพื่อ info-btn + badge + arrow */
    gap: 4px !important;
    border-top: none !important;
    border-left: 1px solid var(--border) !important;
    min-width: 68px !important;
    justify-content: center !important;
  }
  .tcard-badge {
    font-size: 8px !important;
    padding: 2px 6px !important;
    letter-spacing: .05em !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  

  /* ── tier divider ── */
  .tier-divider { padding: 6px 0 2px !important; }
  .tier-divider-label { font-size: 9px !important; padding: 3px 10px !important; letter-spacing: .15em !important; }

  /* ── hero ── */
  .hero { padding: 16px 16px 12px !important; }
  .hero-cn { font-size: clamp(36px, 10vw, 54px) !important; }
  .ornament { margin: 6px auto 6px !important; }
  .hero-sub { font-size: 9px !important; letter-spacing: .15em !important; }

  /* ── filter bar ── */
  .filter-bar {
    padding: 0 10px !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    margin-bottom: 20px !important;
  }
  .filter-bar::-webkit-scrollbar { display: none !important; }
  .filter-btn {
    font-size: 12px !important;
    padding: 6px 13px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
}