/* 印历产品页 —— 夜里的书房：玄青底、宣纸光、印泥色。颜色变量由 core 的 COLOR 在启动时注入（同一来源）。 */
:root {
  --bg: #0d1316;
  --bg-2: #131c20;
  --paper: #f1ede3;
  --paper-dim: #3a4448;
  --ink: #e9e5da;
  --ink-2: #a7b0b3;
  --ink-3: #6c777b;
  --tianshe: #c8352b; --gengshen: #7b3f98; --fo: #c98a12; --dao: #2b5ba8; --jieqi: #2f8f6b;
  --song: "Songti SC", "STSong", "Noto Serif SC", serif;
  --sans: -apple-system, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --px: 0; --py: 0;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--fo); outline-offset: 3px; }

/* ── 印章 ── */
.seal { position: relative; display: inline-flex; align-items: center; justify-content: center; font-family: var(--song); font-weight: 900; line-height: 1; border-radius: .14em; white-space: nowrap; }
.seal.fill { background: var(--c); color: #fff; box-shadow: inset 0 0 0 .05em rgba(255,255,255,.55), inset 0 0 0 .1em var(--c), 0 0 .6em color-mix(in srgb, var(--c) 45%, transparent); }
.seal.outline { color: var(--c); border: .07em solid var(--c); }
.seal.bare { color: var(--paper); font-family: var(--sans); font-weight: 600; }
.seal .dot { position: absolute; top: -.18em; right: -.22em; width: .28em; height: .28em; border-radius: 50%; }
.seal.big { font-size: 15px; padding: 2px 5px; }
.seal.mid { font-size: 22px; padding: 6px 10px; }
.seal.giant { font-size: clamp(64px, 12vw, 150px); padding: .12em .2em; letter-spacing: .04em; }

/* ── 顶栏 ── */
.nav { position: fixed; inset: 0 0 auto; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 14px clamp(16px, 4vw, 48px);
  background: linear-gradient(var(--bg) 30%, transparent); backdrop-filter: blur(6px); }
.brand { display: flex; gap: 10px; align-items: center; text-decoration: none; font-family: var(--song); font-weight: 900; font-size: 18px; letter-spacing: .2em; }
.nav nav { display: flex; gap: clamp(10px, 2vw, 26px); font-size: 14px; }
.nav nav a { text-decoration: none; color: var(--ink-2); transition: color .2s; }
.nav nav a:hover { color: var(--ink); }
.nav .cta { color: var(--paper) !important; border: 1px solid var(--tianshe); padding: 6px 14px; border-radius: 999px; }
@media (max-width: 640px) { .nav nav a:not(.cta) { display: none; } }

/* ── Hero ── */
.hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 110px 20px 60px; overflow: hidden; }
.ink { position: absolute; inset: 0; pointer-events: none; }
.ink span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; transform: translate(calc(var(--px) * 40px), calc(var(--py) * 40px)); }
.ink span:nth-child(1) { width: 46vw; height: 46vw; left: -10vw; top: -8vw; background: radial-gradient(circle, color-mix(in srgb, var(--tianshe) 55%, transparent), transparent 70%); animation: drift 14s ease-in-out infinite; }
.ink span:nth-child(2) { width: 40vw; height: 40vw; right: -12vw; top: 20vh; background: radial-gradient(circle, color-mix(in srgb, var(--dao) 55%, transparent), transparent 70%); animation: drift 18s ease-in-out -4s infinite reverse; }
.ink span:nth-child(3) { width: 34vw; height: 34vw; left: 30vw; bottom: -14vw; background: radial-gradient(circle, color-mix(in srgb, var(--fo) 45%, transparent), transparent 70%); animation: drift 16s ease-in-out -8s infinite; }
@keyframes drift { 50% { translate: 3vw -2vw; scale: 1.12; } }

.stage { position: relative; width: min(760px, 92vw); height: clamp(220px, 34vw, 330px); margin-bottom: 18px; }
.menubar { position: absolute; top: 0; left: 50%; translate: -50% 0; width: min(560px, 90vw); height: 30px; display: flex; align-items: center; gap: 14px; padding: 0 14px; border-radius: 9px;
  background: rgba(241,237,227,.07); border: 1px solid rgba(241,237,227,.12); font-size: 13px; color: var(--ink-2); backdrop-filter: blur(8px); }
.menubar .apple { width: 12px; height: 14px; border-radius: 40% 40% 50% 50%; background: var(--ink-2); }
.menubar .sp { flex: 1; }
.menubar .slot { display: inline-flex; transition: transform .3s; }
.stamp { position: absolute; left: 50%; top: 58%; translate: -50% -50%; }
.stamp.go .seal { animation: press .9s cubic-bezier(.2,.9,.25,1.2) both; }
.stamp.go::after { content: ""; position: absolute; inset: -18%; border: 2px solid var(--tianshe); border-radius: 18%; opacity: 0; animation: ripple 1.2s ease-out .25s both; }
@keyframes press { 0% { transform: scale(1.8) rotate(-8deg); opacity: 0; filter: blur(8px); } 55% { transform: scale(.94) rotate(1deg); opacity: 1; filter: blur(0); } 75% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes ripple { 0% { opacity: .6; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.5); } }

.hero h1 { margin: 0; font-family: var(--song); font-weight: 900; font-size: clamp(42px, 8vw, 96px); line-height: 1.08; letter-spacing: .04em; }
.hero h1 em { font-style: normal; background: linear-gradient(100deg, var(--tianshe), var(--fo) 55%, var(--paper)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { max-width: 640px; margin: 22px auto 0; color: var(--ink-2); font-size: clamp(15px, 1.6vw, 18px); line-height: 1.8; }
.today { display: inline-flex; align-items: center; gap: 14px; margin-top: 30px; padding: 12px 18px; border-radius: 14px; background: rgba(241,237,227,.05); border: 1px solid rgba(241,237,227,.1); flex-wrap: wrap; justify-content: center; }
.today .lbl { font-size: 12px; letter-spacing: .3em; color: var(--ink-3); }
.today .txt { color: var(--ink-2); font-size: 14px; }
.ctas { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.btn { text-decoration: none; padding: 12px 22px; border-radius: 999px; border: 1px solid rgba(241,237,227,.22); color: var(--paper); font-weight: 600; transition: transform .2s, background .2s; }
.btn:hover { transform: translateY(-2px); background: rgba(241,237,227,.06); }
.btn.primary { background: var(--tianshe); border-color: var(--tianshe); box-shadow: 0 10px 30px color-mix(in srgb, var(--tianshe) 40%, transparent); }
.scroll { position: absolute; bottom: 22px; text-decoration: none; color: var(--ink-3); font-size: 22px; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }

/* ── 区块 ── */
.sec { position: relative; padding: clamp(80px, 12vw, 150px) clamp(20px, 6vw, 80px); max-width: 1240px; margin: 0 auto; }
.sec h2 { margin: 0; font-family: var(--song); font-weight: 900; font-size: clamp(34px, 5.6vw, 68px); line-height: 1.15; }
.sub { color: var(--ink-2); max-width: 620px; line-height: 1.8; font-size: 16px; margin: 18px 0 0; }
.rv { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.rv.in { opacity: 1; transform: none; }

.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-top: 48px; }
.tier { margin: 0; padding: 26px 16px 18px; border-radius: 16px; background: var(--bg-2); border: 1px solid rgba(241,237,227,.07); display: flex; flex-direction: column; align-items: center; gap: 16px; transition: transform .3s, border-color .3s; }
.tier:hover { transform: translateY(-4px) rotate(-1deg); border-color: rgba(241,237,227,.2); }
.tier figcaption { text-align: center; font-size: 13px; color: var(--ink-2); display: grid; gap: 4px; }
.tier figcaption b { color: var(--ink); font-weight: 600; }
.tiers .tier:nth-child(2) { transition-delay: .06s; } .tiers .tier:nth-child(3) { transition-delay: .12s; } .tiers .tier:nth-child(4) { transition-delay: .18s; }
.tiers .tier:nth-child(5) { transition-delay: .24s; } .tiers .tier:nth-child(6) { transition-delay: .3s; } .tiers .tier:nth-child(7) { transition-delay: .36s; }

/* 一年的墨点：进入视口时按日期依次晕开 */
.strip { margin-top: 48px; display: grid; gap: 8px; }
.ym { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 10px; }
.ym b { font-size: 12px; color: var(--ink-3); font-weight: 500; text-align: right; }
.days { display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: clamp(2px, .5vw, 6px); }
.days i { aspect-ratio: 1; border-radius: 22%; display: block; transform: scale(0); }
.strip.in .days i { animation: dab .5s cubic-bezier(.2,.9,.3,1.4) both; animation-delay: calc(var(--i) * 2.2ms); }
.days i.f { background: var(--c); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 60%, transparent); }
.days i.o { border: 1.5px solid var(--c); }
.days i.p { background: var(--paper-dim); opacity: .55; border-radius: 50%; scale: .45; }
.days i.now { outline: 2px solid var(--paper); outline-offset: 2px; }
.strip.in .days i.now { animation: dab .5s both, glow 1.6s ease-in-out 1.2s infinite; }
@keyframes dab { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes glow { 50% { outline-color: transparent; } }
.upnext { margin-top: 40px; max-width: 560px; }
.upnext h3 { font-size: 13px; letter-spacing: .3em; color: var(--ink-3); font-weight: 600; }
.upnext ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.upnext li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; border-radius: 10px; background: var(--bg-2); font-size: 14px; }
.upnext em { font-style: normal; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 48px; }
.stat { padding: 26px; border-radius: 18px; background: linear-gradient(160deg, var(--bg-2), transparent); border: 1px solid rgba(241,237,227,.08); }
.stat b { display: block; font-family: var(--song); font-weight: 900; font-size: clamp(40px, 5vw, 60px); background: linear-gradient(120deg, var(--paper), var(--fo)); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.stat span { color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 18px; }
.fact { padding: 24px; border-radius: 18px; border: 1px dashed rgba(241,237,227,.14); }
.fact h3 { margin: 0 0 8px; font-family: var(--song); font-weight: 900; font-size: 20px; }
.fact p { margin: 0; color: var(--ink-2); line-height: 1.8; font-size: 14px; }

.arch { width: 100%; margin-top: 40px; border-radius: 18px; border: 1px solid rgba(241,237,227,.08); }

.final { text-align: center; padding-bottom: 120px; }
.final .stamp2 { margin-bottom: 30px; }
.final .stamp2.in .seal { animation: press 1s cubic-bezier(.2,.9,.25,1.2) both; }
footer { text-align: center; color: var(--ink-3); font-size: 12px; padding: 30px 20px 50px; border-top: 1px solid rgba(241,237,227,.06); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
  .days i { transform: none; }
}