/* ==========================================================================
   base.css — reset / 排版阶梯 / 版心 / 无障碍 / 全局兜底
   ========================================================================== */

/* --- 字体（拿到字体文件后取消注释；文件放 assets/fonts/） ---------------
   字体子集化命令示例（需要 fonttools）：
   pyftsubset YuseiMagic-Regular.ttf --text-file=用到的字.txt --flavor=woff2
@font-face {
  font-family: 'Yusei Magic';
  src: url('../fonts/YuseiMagic-Regular.woff2') format('woff2');
  font-display: swap;
}
------------------------------------------------------------------------- */

/* --- reset --------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body,
h1, h2, h3, h4,
p, figure, blockquote,
ul, ol, dl, dd { margin: 0; }

ul, ol { padding: 0; list-style: none; }

img, svg, canvas, video { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; }

[hidden] { display: none !important; }

/* --- 页面基底 ------------------------------------------------------------ */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-zh);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: hidden;              /* 兜底：任何情况下都不出现横向滚动 */
  -webkit-font-smoothing: antialiased;
}

/* --- 排版阶梯：全站只用这几档 -------------------------------------------- */
.t-display {
  font-family: var(--font-jp);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: 900;
}

.t-h2 { font-size: var(--fs-h2); line-height: 1.3; font-weight: 900; }

.t-h3 { font-size: var(--fs-h3); line-height: 1.4; font-weight: 700; }

.t-body { font-size: var(--fs-body); line-height: var(--lh-body); max-width: 32ch; }

.t-small { font-size: var(--fs-small); line-height: 1.7; }

.t-deco {
  font-family: var(--font-jp);
  font-size: var(--fs-deco);
  letter-spacing: var(--ls-deco);
  text-transform: uppercase;
}

.t-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- 版心 ---------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--w-mobile);
  margin-inline: auto;
  padding-inline: var(--s-3);
}

/* --- 屏（section）基础 --------------------------------------------------- */
.shell { position: relative; padding-block: var(--s-8); }

.shell--paper { background: var(--c-paper); color: var(--c-ink); }

.shell--dark { background: var(--c-ink); color: var(--c-paper); }

.shell--full {
  min-height: 100svh;              /* 手机浏览器地址栏兼容 */
  display: grid;
  place-items: center;
  padding-block: var(--s-12);
}

/* 门禁：main.js 在 <html> 上加 data-gate="locked" 时隐藏需要过门的屏。
   默认不隐藏 —— 这样 JS 万一失效，结构依然能看。 */
[data-gate='locked'] .shell--gated { display: none; }

/* --- 滚动淡入（仅在 JS 可用时启用，避免 JS 失效后内容不可见） ----------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.js [data-reveal].is-in { opacity: 1; transform: none; }

/* --- 焦点态：只用 :focus-visible，不用 outline:none ---------------------- */
:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 3px;
}

.shell--dark :focus-visible { outline-color: var(--c-paper); }

/* --- 屏幕阅读器专用 ------------------------------------------------------ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- 顶部提示条（file:// 打开时的说明） ---------------------------------
   默认隐藏；只有 index.html 里的内联脚本检测到 file:// 时才点亮。
   为什么不用 JS 模块来判断：file:// 下模块本身就会被浏览器拦掉。 */
.notice {
  display: none;
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-toast);
  padding: var(--s-2) var(--s-3);
  background: var(--c-accent);
  color: var(--c-ink);
  font-size: var(--fs-small);
  font-weight: 700;
}

[data-file='1'] .notice { display: block; }

.notice code { font-family: var(--font-mono); }

/* --- 减少动效偏好：全量关闭动画，保留最终态 ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}