/* 匠金台 · 酱酒专属设计系统 (jjt-*) — 字体在 public/head.html 预连接加载 */

:root {
  --jjt-amber: #C8962E;
  --jjt-copper: #AB6C56;
  --jjt-ink: #1A1410;
  --jjt-cream: #FAF6F0;
  --jjt-accent: #FF5A1B;
  --jjt-amber-light: rgba(200, 150, 46, 0.12);
  --jjt-shadow: 0 12px 40px rgba(26, 20, 16, 0.08);
  --jjt-radius: 12px;
  --jjt-font-serif: 'Playfair Display', 'Noto Serif SC', 'Songti SC', serif;
  --jjt-header-offset: 88px;
}

.jjt-serif, .jjt-section-title, .jjt-page-banner-title, .jjt-product-title {
  font-family: var(--jjt-font-serif);
  color: var(--jjt-ink);
  letter-spacing: 0.02em;
}

.jjt-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--jjt-amber);
  border: 1px solid rgba(200, 150, 46, 0.35);
  border-radius: 999px;
  padding: 0.35em 1em;
  background: var(--jjt-amber-light);
}

.jjt-section { position: relative; padding: 5rem 0; }
.jjt-section--cream { background: var(--jjt-cream); }
.jjt-section--ink { background: var(--jjt-ink); color: var(--jjt-cream); }
.jjt-section-header { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.jjt-section-pre { display: block; font-size: 0.85rem; letter-spacing: 0.12em; color: var(--jjt-copper); margin-bottom: 0.5rem; }
.jjt-section-title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 600; margin: 0 0 0.75rem; line-height: 1.3; }
.jjt-section-desc { color: rgba(26, 20, 16, 0.72); font-size: 1rem; line-height: 1.8; margin: 0; }
.jjt-section--ink .jjt-section-desc { color: rgba(250, 246, 240, 0.75); }

.jjt-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; counter-reset: jjt-step; }
.jjt-step { padding: 1.75rem 1.5rem; background: #fff; border-radius: var(--jjt-radius); border: 1px solid rgba(200, 150, 46, 0.2); box-shadow: var(--jjt-shadow); counter-increment: jjt-step; }
.jjt-step::before { content: counter(jjt-step, decimal-leading-zero); display: block; font-family: var(--jjt-font-serif); font-size: 2rem; font-weight: 700; color: var(--jjt-amber); opacity: 0.35; margin-bottom: 0.75rem; }
.jjt-step h4 { font-family: var(--jjt-font-serif); font-size: 1.1rem; margin: 0 0 0.5rem; }
.jjt-step p { font-size: 0.9rem; color: rgba(26, 20, 16, 0.7); margin: 0; line-height: 1.7; }

.jjt-narrative { max-width: 860px; margin: 0 auto; }
.jjt-narrative blockquote { font-family: var(--jjt-font-serif); font-size: clamp(1.1rem, 2.2vw, 1.45rem); line-height: 1.75; border-left: 4px solid var(--jjt-amber); padding: 1rem 0 1rem 1.5rem; margin: 0 0 1.5rem; background: var(--jjt-amber-light); border-radius: 0 var(--jjt-radius) var(--jjt-radius) 0; }

.jjt-cta { text-align: center; padding: 3.5rem 2rem; background: linear-gradient(135deg, var(--jjt-ink) 0%, #2a1f18 100%); border-radius: var(--jjt-radius); color: var(--jjt-cream); }
.jjt-cta h3 { font-family: var(--jjt-font-serif); font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 0.75rem; color: var(--jjt-cream); }
.jjt-cta p { color: rgba(250, 246, 240, 0.85); margin: 0 0 1.5rem; }
.jjt-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 2rem; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--jjt-amber), var(--jjt-copper)); border-radius: 999px; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; }
.jjt-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(200, 150, 46, 0.35); }

.jjt-pagination .pagination, .tp-pagination .pagination { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; list-style: none; padding: 0; margin: 0; }
.jjt-pagination .pagination li a, .tp-pagination .pagination li a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 0.75rem; border-radius: 8px; border: 1px solid rgba(200, 150, 46, 0.25); color: var(--jjt-ink); text-decoration: none; }
.jjt-pagination .pagination li.active span, .tp-pagination .pagination li.active span { background: var(--jjt-amber); border-color: var(--jjt-amber); color: #fff; }

@media (max-width: 767px) { .jjt-section { padding: 3.5rem 0; } }