/* ============================================================
 * 观澜阁 — 全站基础样式
 * 用法: 在各页面 <style> 之前引入
 *   <link rel="stylesheet" href="/static/base.css" />
 * 说明: 仅含全站完全通用的规则; 页面级样式仍保留在各页 <style> 中
 * ============================================================ */

/* ---------- 基础 reset ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ---------- 页面切换过渡 (多页应用视图过渡) ---------- */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: pageOut 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

::view-transition-new(root) {
  animation: pageIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes pageOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.985); }
}

@keyframes pageIn {
  from { opacity: 0; transform: scale(1.015) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---------- 页面头部 (标题 + 副标题, 全站统一) ---------- */
.page-header {
  text-align: center;
  margin-bottom: 20px;
}

.page-header h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}

.page-header p {
  color: #64748b;
  font-size: 13px;
}

@media (max-width: 600px) {
  .page-header { margin-bottom: 14px; }
  .page-header h1 { font-size: 18px; }
}

/* ---------- 视觉隐藏但语义保留 (屏幕阅读器/SEO 可访问) ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}