/* 雅正杂谈 · 首页样式。无 Web 字体、无框架；动画仅用 transform/opacity */
:root{
  --ink:#060a22; --glow:#ffcf99; --fg:#eef1ff; --mut:rgba(238,241,255,.68);
  --sans:system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --serif:"Songti SC","STSong","Noto Serif CJK SC","Source Han Serif SC","SimSun",serif;
  --pad:clamp(1.25rem,5vw,4rem);
}
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100svh;background:var(--ink);color:var(--fg);
  font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased}
p,blockquote{margin:0}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:2px}

/* 背景: 深蓝渐变 + 极淡的原图 + 一团缓慢漂移的暖光(全站唯一的常驻动效) */
.sky{position:fixed;inset:0;z-index:-1;overflow:hidden;
  background:radial-gradient(120% 90% at 85% 0%,#1a2fd0 0%,transparent 55%),linear-gradient(180deg,#0a1240,var(--ink))}
.sky::before{content:"";position:absolute;inset:0;background:url(bg.webp) center/cover no-repeat;opacity:.16;mix-blend-mode:luminosity}
.sky::after{content:"";position:absolute;left:-20vmax;bottom:-32vmax;width:62vmax;height:62vmax;border-radius:50%;
  background:radial-gradient(circle,rgba(255,207,153,.26),transparent 65%);
  animation:drift 40s ease-in-out infinite alternate;will-change:transform}
@keyframes drift{to{transform:translate3d(20vmax,-12vmax,0)}}

.page{min-height:100vh;min-height:100svh;display:grid;grid-template-rows:1fr auto;
  padding:max(var(--pad),env(safe-area-inset-top)) max(var(--pad),env(safe-area-inset-right))
          max(1rem,env(safe-area-inset-bottom)) max(var(--pad),env(safe-area-inset-left))}
.hero{align-self:center;max-width:46rem;padding-block:1rem}
.hero__title{margin:0 0 .25rem;font-size:clamp(1.05rem,2.6vw,1.35rem);font-weight:400;color:var(--mut);letter-spacing:.08em}

/* 倒计时: 天数是全站最大的字，时分秒退居次要 */
.clock__num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.clock__days{display:flex;align-items:baseline;gap:.15em;line-height:.9}
.clock__days .clock__num{font-size:clamp(5rem,min(27vw,24vh),14rem);font-weight:200;letter-spacing:-.045em}
.clock__days .clock__unit{font-size:clamp(1.5rem,5vw,2.6rem);color:var(--glow)}
.clock__rest{margin-top:.6rem;font-size:clamp(1.5rem,5.2vw,2.6rem);font-weight:300;line-height:1.2;white-space:nowrap}
.clock__rest .clock__unit{margin:0 .7em 0 .15em;font-size:.5em;color:var(--mut)}
.clock__rest .clock__unit:last-child{margin-right:0}
.clock__num--sec{color:var(--glow);display:inline-block}

.hero__date{margin-top:1rem;color:var(--mut)}
.hero__date time{color:var(--fg)}

.poem{margin-top:clamp(1.25rem,4vh,3rem);padding-left:1.1rem;border-left:2px solid rgba(255,207,153,.55);max-width:22em}
.poem__text{font:400 clamp(1.05rem,2.6vw,1.35rem)/1.8 var(--serif)}
.poem__date{margin-top:.6rem;font-size:.875rem;color:var(--mut);font-variant-numeric:tabular-nums}

.mail{display:inline-block;margin-top:clamp(1.5rem,4vw,2.25rem);padding-block:.25rem;color:var(--glow);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.4em;transition:text-underline-offset .2s}
.mail:hover{text-underline-offset:.7em}

.foot{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;padding-top:1rem;font-size:.8125rem;line-height:1.8;color:rgba(238,241,255,.62)}
.foot a{display:inline-flex;align-items:center;gap:.35em;padding-block:.15rem;transition:color .2s}
.foot a:hover{color:var(--fg)}
.foot img{display:block}

/* 载入时只编排一次: 数字立即可见(保证 LCP)，其余信息依次浮现 */
@media (prefers-reduced-motion:no-preference){
  .hero__date,.poem,.mail{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .hero__date{animation-delay:.1s}.poem{animation-delay:.25s}.mail{animation-delay:.4s}
}
@keyframes rise{from{opacity:0;transform:translate3d(0,.6rem,0)}}
@media (prefers-reduced-motion:reduce){.sky::after{animation:none}}

/* 宽屏: 左倒计时、右诗句，首屏内容更紧凑 */
@media (min-width:960px){
  .hero{max-width:68rem;display:grid;grid-template-columns:auto minmax(15rem,22rem);grid-template-areas:"title poem" "clock poem" "date mail";
    column-gap:clamp(3rem,9vw,9rem);align-items:end}
  .hero__title{grid-area:title;align-self:start}.clock{grid-area:clock}.hero__date{grid-area:date;align-self:start}
  .poem{grid-area:poem;margin:0 0 .5rem}.mail{grid-area:mail;margin-top:1rem;justify-self:start;align-self:start}
}
@media (max-height:520px) and (orientation:landscape){
  .clock__days .clock__num{font-size:5rem}.poem{margin-top:1rem}.foot{display:none}
}