/* 文舒 Yohaku — 和风明朝 design tokens */
:root {
  /* Color: 纸 / 墨 / 朱 */
  --paper:        oklch(97.5% 0.006 85);     /* 和纸底色 */
  --paper-deep:   oklch(95% 0.008 82);       /* 区分卡片 */
  --paper-edge:   oklch(88% 0.008 82);       /* 极细分隔 */
  --ink:          oklch(22% 0.008 75);       /* 主墨色 */
  --ink-soft:     oklch(40% 0.010 78);       /* 副标题 */
  --ink-faint:    oklch(55% 0.012 80);       /* 引言 */
  --ink-ghost:    oklch(72% 0.010 80);       /* 时间戳 / 元信息 */
  --vermilion:    oklch(48% 0.16 28);        /* 朱红印章 */
  --vermilion-faint: oklch(48% 0.16 28 / 0.08);

  /* Type */
  --font-mincho: 'Songti SC', 'STSong', 'Noto Serif CJK SC', 'Source Han Serif SC',
                 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif;
  --font-body:   -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans',
                 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:   ui-monospace, 'JetBrains Mono', 'IBM Plex Mono', Menlo, monospace;

  /* Scale (mobile-first; clamp() for web mirror) */
  --fs-display:   clamp(36px, 8vw, 56px);
  --fs-title:     clamp(22px, 4vw, 28px);
  --fs-body:      clamp(16px, 1.05vw, 17px);
  --fs-small:     clamp(13px, 0.85vw, 14px);
  --fs-meta:      clamp(11px, 0.75vw, 12px);

  --lh-tight:     1.15;
  --lh-body:      1.85;        /* 中文阅读舒适 */
  --lh-loose:     2.05;

  /* Space — 留白为主 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  --measure-zh:   28em;   /* ≈40 中文字符行宽 */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--vermilion-faint); color: var(--ink); }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* Ghost nav iconography */
.ghost {
  position: fixed;
  z-index: 10;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: var(--ink-ghost);
  transition: color .25s ease, opacity .35s ease;
  font-family: var(--font-body);
}
.ghost:hover, .ghost:focus-visible { color: var(--ink); }
.ghost.tl { top: 0; left: 0; }
.ghost.tr { top: 0; right: 0; }
.ghost.bl { bottom: 0; left: 0; }
.ghost.br { bottom: 0; right: 0; }

/* Vermilion seal */
.seal {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  background: var(--vermilion);
  color: var(--paper);
  font-family: var(--font-mincho);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.04em;
  user-select: none;
}
.seal.lg { width: 44px; height: 44px; font-size: 22px; }
.seal.sm { width: 14px; height: 14px; }
.seal.dot { width: 8px; height: 8px; padding: 0; }

/* Mincho display utilities */
.mincho { font-family: var(--font-mincho); }
.faint  { color: var(--ink-faint); }
.ghost-text { color: var(--ink-ghost); }
.meta   { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--ink-ghost); letter-spacing: 0.04em; }

/* Vertical writing mode */
.tategaki {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-feature-settings: "vert" 1;
}