/* 域名故事页（黑色整面 · 不可滚动）——加载于 main.css 之后：
   共用字体、令牌、光标、Toast 等基础样式，这里只做故事页专属布局与深色覆写。 */

html, body { background: var(--bg-dark); }
body.landing { background: var(--bg-dark); color: var(--fg-inverse); }

.page {
  position: fixed; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--page-pad) + 44px) var(--page-pad) var(--page-pad);
}
.page__top { display: flex; justify-content: space-between; align-items: baseline; opacity: .5; }
.page__mid {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  width: min(100%, 66.6vw); max-width: 760px; padding-bottom: 4vh;
}
.page__name { margin: 0 0 .85em; }
.page__tld { opacity: .5; }
.page__tag { margin: 0 0 2.6em; }
.page__story {
  border-top: 1px solid rgba(232, 232, 232, .2);
  padding-top: 24px;
  font-size: var(--fs-body); line-height: 1.9;
  color: rgba(232, 232, 232, .72);
  max-width: 46ch;
}
.page__bottom { display: flex; justify-content: space-between; align-items: baseline; }
.page__email {
  font-family: var(--sans); font-size: var(--fs-body); line-height: 1.1;
  opacity: .5; transition: opacity .3s var(--ease-btn);
}
@media (hover: hover) { .page__email:hover { opacity: 1; } }
.page__email:active { opacity: 1; }
.page__copy { opacity: .5; }
.page__orn { display: inline-block; }

/* 进场（叠在 main.css .reveal 之上） */
.page .reveal { opacity: 0; transform: translateY(10px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.page .reveal.is-in { opacity: 1; transform: none; }
.is-reduced .page .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .page .reveal { opacity: 1; transform: none; } }

@media (max-width: 768px) {
  .page__mid { width: 100%; padding-bottom: 0; }
}