/* ============================================================
   Phase 2 · CSS 样式阶段（本文件 Phase 1 时可留空）
   任务：让 Phase 1 的裸结构变好看、变整齐、变响应式。
   要求：
   - 用「外部 CSS + 类选择器」，不要回写内联 style
   - 顶部写一组设计变量（颜色 / 间距 / 圆角），全站复用
   - 布局优先用 Flexbox / Grid；至少 2 个断点（平板 / 手机）
   - 卡片、按钮、导航要做成可复用“组件”
   - 手机打开不能破版（三档：桌面 / 平板≤980 / 手机≤680）
   ============================================================ */

/* TODO(Phase2): 定义变量
:root{
  --brand:#b04a2c;
  --ink:#2a2622;
  --muted:#7c736a;
  --line:#e7e0d6;
  --surface:#faf7f1;
  --white:#fffdf8;
  --radius:14px;
  --maxw:1080px;
}
*/

/* TODO(Phase2): 盒模型统一
*,*::before,*::after{ box-sizing:border-box; }
*/

/* TODO(Phase2): 顶栏 header.site-header —— 品牌 + 导航横向排列，吸顶 */
/* TODO(Phase2): .hero —— 大标题区，留白充足 */
/* TODO(Phase2): .resume table / dl —— 表格或术语列表排版 */
/* TODO(Phase2): .works —— Grid 卡片墙，auto-fill 自适应列数 */
/* TODO(Phase2): .board form / .msg-list —— 表单与列表 */
/* TODO(Phase2): 响应式断点
@media (max-width:980px){ ... }
@media (max-width:680px){ ... }
*/