/* 墨夜金 Midnight Gold: the look beyond colour (colours come from js/themes.js through the engine).
   Modern sans headings in Chinese, Cormorant in English; gold-edged glass cards over a darkened city. */

:root { --serif: "Noto Sans SC", "PingFang SC", system-ui, sans-serif; }
html[lang="en"] { --serif: "Cormorant Garamond", Georgia, serif; }
html :is(.hero-title, .sec-title) { font-weight: 900; letter-spacing: -.01em; }
html[lang="en"] :is(.hero-title, .sec-title) { font-weight: 600; }
html[lang="zh"] .hero-title { font-size: clamp(2.8rem, 6.2vw, 5.4rem); line-height: 1.08; }
html[lang="zh"] .hero-title em { font-style: normal; }
html[lang="en"] .hero-title em { font-style: italic; }

/* the live city is graded down so light type always reads, even under a noon sky */
.hero-gl { filter: blur(calc(var(--veil, 0) * 2.5px)) brightness(calc(.62 - var(--veil, 0) * .06)) contrast(1.12) saturate(.9); }
.hero-shade { background: linear-gradient(90deg, rgba(6, 8, 14, .78) 0%, rgba(6, 8, 14, .35) 46%, transparent 70%), linear-gradient(0deg, rgba(6, 8, 14, .85) 0%, transparent 32%); }
/* below the hero the city stays in view: darker down the middle where the text runs, open at the edges */
.stage-veil { background: radial-gradient(75% 85% at 50% 50%, color-mix(in srgb, var(--page) 74%, transparent), color-mix(in srgb, var(--page) 38%, transparent)); }

/* gold-lit titles: the gradient sits on each masked line, where the letters are actually painted */
.sec-title .ln > span { padding-bottom: .08em; background: linear-gradient(180deg, #fbf6ec 15%, #d9b77f 135%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card { border-color: rgba(216, 181, 122, .16); background: linear-gradient(180deg, rgba(20, 24, 36, .62), rgba(10, 13, 21, .58)); -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1); box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .9); border-radius: 20px; }
.card:hover { border-color: rgba(216, 181, 122, .4); }
.ticker { background: transparent; border-block: 1px solid rgba(216, 181, 122, .22); color: var(--page-ink); }
.btn-primary, .hero .btn-primary { background: linear-gradient(180deg, #ecd3a0, #c9a46a); color: #14110b; }
.btn-primary .btn-ico, .hero .btn-ico { background: #14110b; color: #ecd3a0; }
.stat b, .fig-num { color: #e6c690; }
.hero-stats { background: rgba(10, 12, 18, .45); border-color: rgba(216, 181, 122, .22); }