/* ================================================================
   Onomeo Home v2 — Editorial Mint
   双主题 hv- 命名空间（避开 luxe 的 [class^="home-pro"] / [class^="lj-"] 等通配杀手）
   cartoon: 暖奶油 #fbf7ee + 薄荷绿 #58cc02 + Fraunces 衬线
   luxe:   纯黑 #000 + 金黄 #F5C518 + Cormorant Garamond 衬线
   动效：字符级 reveal · odometer · 鼠标视差 · 滚动入场（全 JS 驱动，不依赖 @keyframes）
   ================================================================ */

.hv {
  /* cartoon 默认 token */
  --hv-bg:         #fbf7ee;
  --hv-bg-soft:    #f4eedf;
  --hv-panel:      #ffffff;
  --hv-ink:        #2a2a2a;
  --hv-ink-dim:    #6b6b6b;
  --hv-ink-soft:   #a8a8a8;
  --hv-accent:     #58cc02;
  --hv-accent-d:   #4ba902;
  --hv-accent-hi:  #82d92e;
  --hv-accent-lo:  #b8e864;
  --hv-accent-xl:  #dcf4b3;
  --hv-clay:       #c97d60;
  --hv-ink-navy:   #2a3a4c;
  --hv-line:       rgba(42,42,42,.08);
  --hv-line-strong:rgba(42,42,42,.18);
  --hv-card-hover: #ffffff;

  --hv-font-display: 'Fraunces', 'Noto Serif SC', Georgia, serif;
  --hv-font-body:    'Nunito', 'Noto Sans SC', system-ui, sans-serif;
  --hv-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --hv-ease: cubic-bezier(0.22, 0.65, 0.2, 1);

  position: relative;
  max-width: 1180px;
  padding: 56px 80px 48px;
  font-family: var(--hv-font-body) !important;
  color: var(--hv-ink);
}

/* —— 字体规则 !important：对抗 luxe.css 在 body 上的全局 font-family !important —— */
.hv .hv-headline,
.hv .hv-h2,
.hv .hv-today-num,
.hv .hv-trust-line { font-family: var(--hv-font-display) !important; }
.hv .hv-kicker,
.hv .hv-section-label,
.hv .hv-trust-meta,
.hv .hv-trust-meta a { font-family: var(--hv-font-mono) !important; }
.hv .hv-sub,
.hv .hv-cta-primary,
.hv .hv-cta-secondary,
.hv .hv-today-title,
.hv .hv-today-meta { font-family: var(--hv-font-body) !important; }
.hv .hv-today-arrow,
.hv .hv-cta-primary .hv-arrow { font-family: var(--hv-font-display) !important; }

/* —— luxe 专项：luxe.css 有 `html[data-theme="luxe"] [class*="-headline"]` 等杀手规则
   把字体强制为 sans。特异性 [0,0,2,1] 比上面的 [0,0,2,0] 高一档，必须用
   `html[data-theme="luxe"] .hv .X` = [0,0,3,1] 才能赢。 —— */
html[data-theme="luxe"] .hv .hv-headline,
html[data-theme="luxe"] .hv .hv-h2,
html[data-theme="luxe"] .hv .hv-today-num,
html[data-theme="luxe"] .hv .hv-trust-line { font-family: var(--hv-font-display) !important; }
html[data-theme="luxe"] .hv .hv-kicker,
html[data-theme="luxe"] .hv .hv-section-label,
html[data-theme="luxe"] .hv .hv-trust-meta,
html[data-theme="luxe"] .hv .hv-trust-meta a { font-family: var(--hv-font-mono) !important; }
html[data-theme="luxe"] .hv .hv-sub,
html[data-theme="luxe"] .hv .hv-cta-primary,
html[data-theme="luxe"] .hv .hv-cta-secondary,
html[data-theme="luxe"] .hv .hv-today-title,
html[data-theme="luxe"] .hv .hv-today-meta { font-family: var(--hv-font-body) !important; }
html[data-theme="luxe"] .hv .hv-today-arrow,
html[data-theme="luxe"] .hv .hv-cta-primary .hv-arrow { font-family: var(--hv-font-display) !important; }

/* luxe 主题覆盖 token（不动 luxe.css，自封闭在 .hv 容器里） */
html[data-theme="luxe"] .hv {
  --hv-bg:         transparent;
  --hv-bg-soft:    rgba(255,255,255,.02);
  --hv-panel:      #161616;
  --hv-ink:        #ececec;
  --hv-ink-dim:    #a0a0a6;
  --hv-ink-soft:   #6b6b72;
  --hv-accent:     #F5C518;
  --hv-accent-d:   #B8920A;
  --hv-line:       rgba(255,255,255,.08);
  --hv-line-strong:rgba(245,197,24,.22);
  --hv-card-hover: rgba(245,197,24,.04);
  --hv-font-display: 'Cormorant Garamond', 'Noto Serif SC', Georgia, serif;
  --hv-font-body:    'Space Grotesk', 'Noto Sans SC', system-ui, sans-serif;
}

/* ───────── HERO ───────── */
.hv-hero {
  padding: 48px 0 80px;
  position: relative;
}

/* 苔藓圆点 cluster：cartoon hero 右上独有视觉锚点 */
.hv-cluster {
  position: absolute;
  top: 56px;
  right: 60px;
  width: 280px;
  height: 280px;
  pointer-events: none;
  transition: transform 800ms var(--hv-ease);
  will-change: transform;
}
.hv-cluster .hv-dot {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 900ms var(--hv-ease), transform 900ms var(--hv-ease);
}
.hv.is-in .hv-cluster .hv-dot {
  opacity: var(--hv-dot-op, 0.78);
  transform: scale(1);
}
.hv-cluster .d1 { width: 108px; height: 108px; background: var(--hv-accent);    top: 0;   left: 96px;  --hv-dot-op: 0.9;  transition-delay: 800ms;  }
.hv-cluster .d2 { width: 36px;  height: 36px;  background: var(--hv-clay);      top: 130px; left: 28px; --hv-dot-op: 0.85; transition-delay: 1000ms; }
.hv-cluster .d3 { width: 64px;  height: 64px;  background: var(--hv-accent-xl); top: 64px;  left: 200px; --hv-dot-op: 0.7; transition-delay: 1200ms; }
.hv-cluster .d4 { width: 24px;  height: 24px;  background: var(--hv-ink-navy);  top: 200px; left: 116px; --hv-dot-op: 0.9; transition-delay: 1400ms; }
.hv-cluster .d5 { width: 16px;  height: 16px;  background: var(--hv-accent-d);  top: 36px;  left: 36px;  --hv-dot-op: 0.8; transition-delay: 1550ms; }
.hv-cluster .d6 { width: 12px;  height: 12px;  background: var(--hv-clay);      top: 220px; left: 240px; --hv-dot-op: 0.65; transition-delay: 1700ms; }
html[data-theme="luxe"] .hv-cluster { display: none; }
@media (max-width: 1180px) { .hv-cluster { display: none; } }

.hv-kicker {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--hv-font-mono);
  font-size: 13px;
  letter-spacing: .22em;
  color: var(--hv-ink-dim);
  text-transform: uppercase;
  margin-bottom: 36px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 700ms var(--hv-ease), transform 700ms var(--hv-ease);
}
.hv-kicker .hv-kicker-line {
  width: 0; height: 1px;
  background: var(--hv-ink-dim);
  transition: width 800ms var(--hv-ease) 200ms;
}
.hv.is-in .hv-kicker { opacity: 1; transform: none; }
.hv.is-in .hv-kicker .hv-kicker-line { width: 56px; }

.hv-headline {
  font-family: var(--hv-font-display);
  font-weight: 600;
  font-size: clamp(40px, 5.5vw, 86px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 28px;
  color: var(--hv-ink);
  transition: transform 600ms var(--hv-ease);
  will-change: transform;
  font-variation-settings: "opsz" 144;
}
html[data-theme="luxe"] .hv-headline {
  font-weight: 500;
  font-style: italic;
  font-variation-settings: normal;
}
.hv-headline .hv-line {
  display: block;
  overflow: hidden;
  padding: 0.04em 0.04em 0.08em 0;
}
.hv-headline .hv-accent {
  color: var(--hv-accent);
  font-style: italic;
  font-weight: 500;
}
html[data-theme="luxe"] .hv-headline .hv-accent {
  color: var(--hv-accent);
  font-style: italic;
  font-weight: 500;
}

/* 字符级 reveal */
.hv-ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  filter: blur(6px);
  transition:
    opacity 720ms var(--hv-ease),
    transform 720ms var(--hv-ease),
    filter 720ms var(--hv-ease);
}
.hv.is-in .hv-ch { opacity: 1; transform: none; filter: none; }

.hv-sub {
  font-family: var(--hv-font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--hv-ink-dim);
  max-width: 560px;
  margin: 0 0 40px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms var(--hv-ease) 900ms, transform 700ms var(--hv-ease) 900ms;
}
.hv.is-in .hv-sub { opacity: 1; transform: none; }

.hv-cta-row {
  display: flex; align-items: center; gap: 24px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms var(--hv-ease) 1050ms, transform 700ms var(--hv-ease) 1050ms;
}
.hv.is-in .hv-cta-row { opacity: 1; transform: none; }

.hv-cta-primary {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none;
  font-family: var(--hv-font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .005em;
  background: var(--hv-accent);
  color: #fff;
  padding: 15px 26px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 18px -6px rgba(88,204,2,.45);
  transition: transform 280ms var(--hv-ease), box-shadow 280ms var(--hv-ease), background 240ms var(--hv-ease);
}
.hv-cta-primary:hover {
  background: var(--hv-accent-d);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -8px rgba(88,204,2,.55);
}
html[data-theme="luxe"] .hv-cta-primary {
  background: var(--hv-accent);
  color: #000;
  box-shadow: 0 4px 0 0 var(--hv-accent-d);
}
html[data-theme="luxe"] .hv-cta-primary:hover {
  background: var(--hv-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(245,197,24,.32);
}
.hv-cta-primary .hv-arrow {
  font-family: var(--hv-font-display);
  font-size: 18px;
  transition: transform 320ms var(--hv-ease);
}
.hv-cta-primary:hover .hv-arrow { transform: translateX(6px); }

.hv-cta-secondary {
  color: var(--hv-ink-dim);
  text-decoration: none;
  font-family: var(--hv-font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 15px 0;
  border-bottom: 2px solid transparent;
  transition: color 240ms var(--hv-ease), border-color 240ms var(--hv-ease);
}
html[data-theme="luxe"] .hv-cta-secondary {
  font-weight: 500;
  letter-spacing: .005em;
  text-transform: none;
  border-bottom: 1px solid var(--hv-line);
}
.hv-cta-secondary:hover { color: var(--hv-accent); border-bottom-color: var(--hv-accent); }

/* ───────── SECTION ───────── */
.hv-section {
  padding: 72px 0;
  border-top: 1px solid var(--hv-line);
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 800ms var(--hv-ease), transform 800ms var(--hv-ease);
}
.hv-section.is-in { opacity: 1; transform: none; }

.hv-section-label {
  font-family: var(--hv-font-mono);
  font-size: 13px;
  letter-spacing: .22em;
  color: var(--hv-ink-soft);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.hv-h2 {
  font-family: var(--hv-font-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.018em;
  margin: 0 0 40px;
  color: var(--hv-ink);
  max-width: 720px;
}
html[data-theme="luxe"] .hv-h2 {
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.02em;
}

/* ───────── TODAY 4 行清单 ───────── */
.hv-today-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.hv-today-item {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 22px 20px;
  text-decoration: none;
  color: var(--hv-ink);
  border-top: 1px solid var(--hv-line);
  transition: background 320ms var(--hv-ease), padding 320ms var(--hv-ease);
  cursor: pointer;
  border-radius: 10px;
}
.hv-today-item:last-child { border-bottom: 1px solid var(--hv-line); }
.hv-today-item:hover {
  background: var(--hv-card-hover);
  padding-left: 28px;
}

.hv-today-num {
  font-family: var(--hv-font-display);
  font-weight: 500;
  font-size: 60px;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  font-variation-settings: "opsz" 144;
}
html[data-theme="luxe"] .hv-today-num {
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.04em;
  font-variation-settings: normal;
}

/* cartoon: 主色饱和度梯度 + 一档对比色 */
.hv-today-item[data-c="mint"]   .hv-today-num { color: var(--hv-accent); }
.hv-today-item[data-c="sky"]    .hv-today-num { color: var(--hv-accent-hi); }
.hv-today-item[data-c="orange"] .hv-today-num { color: var(--hv-accent-lo); }
.hv-today-item[data-c="grape"]  .hv-today-num { color: var(--hv-ink-navy); font-style: italic; }
/* luxe: 全部金黄 */
html[data-theme="luxe"] .hv-today-num { color: var(--hv-accent) !important; font-style: italic; }

.hv-today-body { display: flex; flex-direction: column; gap: 4px; }
.hv-today-title {
  font-family: var(--hv-font-body);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--hv-ink);
}
html[data-theme="luxe"] .hv-today-title { font-weight: 600; }
.hv-today-meta {
  font-family: var(--hv-font-body);
  font-size: 14px;
  color: var(--hv-ink-dim);
}

.hv-today-arrow {
  font-family: var(--hv-font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--hv-ink-soft);
  transition: color 280ms var(--hv-ease), transform 320ms var(--hv-ease);
}
.hv-today-item:hover .hv-today-arrow {
  color: var(--hv-accent);
  transform: translateX(8px);
}
html[data-theme="luxe"] .hv-today-item:hover .hv-today-arrow { color: var(--hv-accent); }

/* ───────── STORYSHOW（剧情滑卡在追） ───────── */
.hv-storyshow .hv-h2 {
  font-family: 'Courier Prime', ui-monospace, monospace !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  font-style: normal;
  margin-bottom: 14px;
}
html[data-theme="luxe"] .hv .hv-storyshow .hv-h2 {
  font-family: 'Courier Prime', ui-monospace, monospace !important;
  font-style: normal;
  font-weight: 700;
}
.hv-storyshow-tag {
  font-family: var(--hv-font-mono) !important;
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--hv-ink-soft);
  text-transform: uppercase;
  margin: 0 0 36px;
}
.hv-storyshow-quote {
  border-left: 3px solid var(--hv-accent);
  padding: 14px 0 14px 26px;
  margin: 0 0 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: transparent;
}
.hv-storyshow-slug {
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hv-ink-dim);
}
.hv-storyshow-line {
  font-family: var(--hv-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.32;
  color: var(--hv-ink);
  letter-spacing: -0.005em;
}
.hv-storyshow-cta { margin-bottom: 0; }
.hv-storyshow-list {
  list-style: none;
  margin: 56px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--hv-line);
  display: flex;
  flex-direction: column;
}
.hv-storyshow-list-label {
  font-family: var(--hv-font-mono);
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--hv-ink-soft);
  text-transform: uppercase;
  margin: 0 0 14px;
}
.hv-storyshow-item {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 18px 12px;
  color: var(--hv-ink-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--hv-line);
  transition: color 240ms var(--hv-ease), padding 240ms var(--hv-ease), background 240ms var(--hv-ease);
  border-radius: 8px;
}
.hv-storyshow-item:first-of-type { border-top: 1px solid var(--hv-line); }
.hv-storyshow-item:hover {
  color: var(--hv-ink);
  background: var(--hv-card-hover);
  padding-left: 20px;
}
.hv-storyshow-num {
  font-family: 'Courier Prime', var(--hv-font-mono), monospace;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .04em;
  color: var(--hv-accent);
}
.hv-storyshow-name {
  font-family: var(--hv-font-display);
  font-size: 19px;
  font-weight: 600;
  color: inherit;
  letter-spacing: -0.005em;
}
html[data-theme="luxe"] .hv .hv-storyshow-name { font-style: italic; font-weight: 500; }
.hv-storyshow-arrow {
  font-family: 'Courier Prime', monospace;
  font-size: 18px;
  color: var(--hv-ink-soft);
  transition: color 240ms var(--hv-ease), transform 240ms var(--hv-ease);
}
.hv-storyshow-item:hover .hv-storyshow-arrow {
  color: var(--hv-accent);
  transform: translateX(6px);
}

/* ───────── TRUST ───────── */
.hv-trust {
  padding: 72px 0;
  border-top: 1px solid var(--hv-line);
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 800ms var(--hv-ease), transform 800ms var(--hv-ease);
}
.hv-trust.is-in { opacity: 1; transform: none; }

.hv-trust-line {
  font-family: var(--hv-font-display);
  font-weight: 500;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.5;
  color: var(--hv-ink);
  max-width: 640px;
  margin: 0 0 24px;
  letter-spacing: -0.005em;
}
html[data-theme="luxe"] .hv-trust-line {
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.hv-trust-meta {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--hv-font-mono);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hv-ink-dim);
  flex-wrap: wrap;
}
.hv-trust-meta a {
  color: var(--hv-ink-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 240ms var(--hv-ease), border-color 240ms var(--hv-ease);
}
.hv-trust-meta a:hover { color: var(--hv-accent); border-bottom-color: var(--hv-accent); }
.hv-trust-meta .hv-dot-sep { color: var(--hv-ink-soft); opacity: .5; }

/* ───────── Responsive ───────── */
@media (max-width: 900px) {
  .hv { padding: 32px 24px; }
  .hv-today-item { grid-template-columns: 60px 1fr auto; gap: 18px; padding: 18px 12px; }
  .hv-today-num { font-size: 38px; }
}


/* ════════════════════════════════════════════════════════════════════════
   首页"接下来"EP 明信片墙 · 2026-05-27 批 3 收编
   复用 story.css 的 .fcx-st-ch.is-postcard 视觉，在首页里也长成明信片
   ════════════════════════════════════════════════════════════════════════ */
.hv-storyshow-postcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 28px 24px;
  margin-top: 8px;
}
@media (max-width: 900px) {
  .hv-storyshow-postcards { grid-template-columns: 1fr; gap: 22px; }
}