/* ============================================================
   esao.life · 全站共享样式（阶段 1：全站骨架）
   视觉：V2「花园的昼与夜」——昼暖纸为主（默认），夜深金跟随系统
   依据：docs/设计-V2视觉方案.md / docs/阶段1-全站骨架计划.md
   断点：<768 手机 / 768-1024 pad / ≥1024 电脑；断点只改变量
   ============================================================ */

/* ---------- 一、色板双套（V2 方案 §一，昼默认 / 夜跟随 prefers-color-scheme） ---------- */

/* 昼 · 暖纸花园（默认） */
:root,
[data-theme="day"] {
  --bg: #f5efe2;          /* 页面背景（纸色） */
  --card: #efe6d3;        /* 卡片/区块底色（深纸） */
  --ink: #33302a;         /* 标题/正文（墨色） */
  --ink-body: #4a443a;    /* 正文次级强调 */
  --muted: #6f695c;       /* 弱化/时间/标签（AA 4.8:1） */
  --accent: #9d4e3c;      /* 链接/标题点缀（赭红，AA 5.1:1） */
  --accent-soft: #b97a68; /* hover/浅点缀 */
  --line: #d9cfb8;        /* 分隔线/描边 */
  --on-accent: #fdf6ea;   /* accent 底上的文字（米白） */
  --ok: #3f7d52;          /* 成功反馈（提交成功/已订阅） */
  --err: #b0413e;         /* 失败反馈（表单/网络错误） */
  --code-bg: #322e27;     /* 代码块（两套天色统一，如信纸上贴的便签） */
  --code-ink: #e8e0cf;
}

/* 夜 · 深金花园（跟随系统，已拍板：无手动按钮） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]) {
    --bg: #1f1b15;      /* 暖褐黑（较原 #12100c 提亮一档，muted #888 仍 AA 4.8:1） */
    --card: #262118;
    --ink: #f2ead8;
    --ink-body: #e8e0cf;
    --muted: #888888;   /* 红线⑤指定 #888 */
    --accent: #e8b64c;
    --accent-soft: #f0c060;
    --line: #3a352c;
    --on-accent: #1f1b15;
    --ok: #7fbf8f;
    --err: #e08a7a;
    --code-bg: #322e27;
    --code-ink: #e8e0cf;
  }
}

/* ---------- 二、字体栈（V2 方案 §三，已确认） ---------- */
:root {
  --font-kai: "Kaiti SC", "KaiTi", "STKaiti", "Noto Serif SC", serif;
  --font-sans: "PingFang SC", "Microsoft YaHei", "Microsoft YaHei UI",
               "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  --font-mono: "Cascadia Code", Consolas, "Courier New", monospace;
}

/* ---------- 三、容器变量（总方案 §九：三档断点只改变量） ---------- */
:root {
  --pad: 16px;
  --maxw: 100%;
  --gap: 8px;
  --cols: 1;
  --fs-base: 16px;     /* 正文基准字号 */
  --fs-hero: 2rem;     /* hero 大标题（手机 32px） */
}
@media (min-width: 768px) {
  :root { --pad: 24px; --maxw: 900px; --gap: 12px; --cols: 2; --fs-base: 17px; --fs-hero: 2.6rem; }
}
@media (min-width: 1024px) {
  :root { --pad: 24px; --maxw: 1080px; --gap: 16px; --cols: 3; --fs-hero: 3rem; }
}

/* ---------- 四、基础（reset / body / 链接 / 排版） ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  background: var(--bg);
  color: var(--ink-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-variant-numeric: oldstyle-nums; /* 拾光集验证过的复古细节 */
}
h1, h2, h3, h4 { font-family: var(--font-kai); color: var(--ink); font-weight: 600; line-height: 1.4; }
a { color: var(--accent); text-decoration: none; transition: color .2s; }
a:hover { color: var(--accent-soft); }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) 56px; width: 100%; }

/* ---------- 五、组件 ---------- */

/* 顶部导航（首页右上） */
.topnav {
  position: absolute; top: 20px; right: 24px;
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; z-index: 10;
}
.topnav a { color: var(--ink-body); text-decoration: none; }
.topnav a:hover { color: var(--accent); }
.topnav .sep { color: var(--line); padding: 0 2px; }

/* 全站内容页导航（站点小改批 D①：与 blog/style.css 同源规格） */
.site-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px var(--pad); max-width: var(--maxw); margin: 0 auto;
  font-size: 13px; color: var(--muted);
}
.site-nav a { color: var(--muted); transition: color .2s; }
.site-nav a:hover { color: var(--accent); }
.site-nav .sep { color: var(--line); padding: 0 6px; }
.site-nav .links { display: flex; align-items: center; flex-wrap: wrap; }

/* ① 态度层 hero */
.hero { text-align: center; padding: 116px 24px 52px; }
.hero h1 {
  font-family: var(--font-kai);
  font-size: var(--fs-hero);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.3;
}
.hero .subtitle {
  margin-top: 16px;
  font-size: 16px;
  color: var(--accent);
  letter-spacing: .04em;
  transition: opacity .4s;
}

/* 花线 ❦（装帧线条，已拍板项） */
.flourish {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 22px auto 0; color: var(--accent); font-size: 14px;
}
.flourish::before, .flourish::after { content: ""; height: 1px; width: 56px; background: var(--line); }

/* 区块小标签（--accent，字距疏朗） */
.section-label {
  font-size: 11px; color: var(--accent);
  letter-spacing: .18em; text-transform: uppercase;
  margin: 34px 0 14px; padding-left: 4px; font-weight: 600;
}

/* 网格（卡片列数随断点 --cols） */
.posts-grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: var(--gap); }

/* 卡片（文章卡 / 产品卡通用） */
.card {
  display: flex; align-items: flex-start; gap: 18px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 26px 24px;
  text-decoration: none; color: inherit;
  transition: border-color .2s, background .2s, transform .2s;
}
.card:hover { border-color: var(--accent-soft); transform: translateY(-2px); text-decoration: none; }
.card .emoji {
  font-size: 28px; width: 46px; height: 46px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
}
.card .body { flex: 1; min-width: 0; }
.card .hook { font-family: var(--font-kai); font-size: 18px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.card .summary { font-size: 14px; color: var(--muted); margin-top: 6px; line-height: 1.55; }
.card .name { font-family: var(--font-kai); font-size: 14px; color: var(--accent); margin-top: 8px; letter-spacing: .03em; }

/* 预留位 chip（在种了——弱提示，AA 达标用 --muted） */
.coming-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 4px; }
.coming-tag {
  font-size: 13px; color: var(--muted);
  border: 1px dashed var(--muted); border-radius: 20px;
  padding: 4px 14px; white-space: nowrap;
}

/* 更多链接（进博客 / 了解我） */
.more-link { text-align: center; padding: 16px 0 8px; }
.more-link a { color: var(--muted); font-size: 13px; letter-spacing: .08em; }
.more-link a:hover { color: var(--accent); }

/* 页脚 */
.site-footer { text-align: center; padding: 40px 20px 32px; }
.site-footer a { color: var(--muted); font-size: 12px; text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
/* 备案两行与隐私小字（设计-全站备案徽章与footer隐私小字-v1 §2.3 v1.1：结构化两行——ICP 一行、公安徽章+号一行，徽章与号永不拆开；桌面高缩放/窄屏形态统一） */
.site-footer .beian-row, .fb-footer .beian-row { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 8px; }
.beian-mps { display: inline-flex; align-items: center; gap: 4px; }
.site-footer .privacy, .fb-footer .privacy { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ---------- 六、About 园门 ---------- */
.about-page { padding-top: 24px; }
.about-hero { text-align: center; margin-bottom: 44px; }
.about-hero h1 { font-family: var(--font-kai); font-size: 2.2rem; color: var(--ink); letter-spacing: .08em; }
.about-hero .about-intro { margin-top: 14px; color: var(--muted); font-size: 15px; }

.about-section { margin: 0 0 44px; }
.about-section h2 {
  font-family: var(--font-kai); font-size: 1.35rem;
  color: var(--accent); letter-spacing: .06em;
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
}
.about-section h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.about-section h3 { font-size: 14px; color: var(--ink); margin: 22px 0 10px; letter-spacing: .04em; }
.about-section p { font-size: 15px; color: var(--ink-body); margin-bottom: 14px; }
.about-section p strong { color: var(--ink); font-weight: 600; }
.about-section .note { font-size: 13px; color: var(--muted); }

.garden-links { list-style: none; }
.garden-links li { margin: 8px 0; font-size: 15px; line-height: 1.6; }
.garden-links a { color: var(--ink-body); }
.garden-links a:hover { color: var(--accent); }

.topic-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.topic-chip {
  font-size: 13px; color: var(--ink-body);
  border: 1px solid var(--line); border-radius: 20px;
  padding: 4px 14px; white-space: nowrap;
}

.garden-map {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px 22px; font-size: 15px; line-height: 2;
}
.garden-map strong { color: var(--ink); }
.garden-map .arrow { color: var(--accent); margin: 0 6px; }

/* ---------- 七、feedback 留言页（A 方案：园中留言簿） ---------- */
.fb-head { padding: 36px 24px 16px; text-align: center; max-width: 520px; margin: 0 auto; }
.fb-head h1 { font-family: var(--font-kai); font-size: 1.6rem; color: var(--ink); margin-bottom: 12px; letter-spacing: .05em; }
/* 园主今日的话（每日短语，与首页同源） */
.fb-phrase { font-size: 15px; color: var(--accent); letter-spacing: .04em; margin-bottom: 16px; }
/* 主引导（对每一位来访者） */
.fb-guide { font-size: 15px; color: var(--ink-body); line-height: 1.8; }
/* 次引导（对照见引流来的朋友） */
.fb-hint { font-size: 13px; color: var(--muted); line-height: 1.7; margin-top: 6px; }
/* 留言簿信纸卡片：页面纸色 → 深纸卡片 → 白色表单便签，三层纸 */
.fb-form { max-width: 640px; margin: 0 auto; padding: 24px 16px 80px; }
.fb-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 20px; padding: 12px;
}
/* 自建留言表单（白色便签，替代原飞书 iframe） */
.msg-form { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.msg-form textarea {
  width: 100%; min-height: 160px; resize: vertical;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  font-size: 15px; font-family: inherit; line-height: 1.7;
  background: #fff; color: var(--ink-body); outline: none;
}
.msg-form input {
  width: 100%; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  font-size: 14px; font-family: inherit;
  background: #fff; color: var(--ink-body); outline: none;
}
.msg-form textarea:focus, .msg-form input:focus { border-color: var(--accent); }
.msg-row { display: flex; justify-content: flex-end; }
.msg-form button {
  padding: 10px 24px; background: var(--accent); color: var(--on-accent);
  border: none; border-radius: 16px;
  font-size: 14px; font-weight: 600; font-family: inherit;
  cursor: pointer;
}
.msg-form button:hover { background: var(--accent-soft); }
.msg-form button:disabled { opacity: .55; cursor: default; }
.msg-feedback { font-size: 13px; min-height: 1.5em; text-align: right; line-height: 1.6; }
.msg-feedback.ok { color: var(--ok); font-size: 15px; font-weight: 600; }
.msg-feedback.err { color: var(--err); }
.fb-footer { text-align: center; padding: 32px 24px 64px; border-top: 1px solid var(--line); }
.fb-footer a { color: var(--muted); font-size: 13px; text-decoration: none; }
.fb-footer a:hover { color: var(--accent); }

/* ---------- 七·二、admin 管理页（隐藏入口，无公开链接，纯前端壳） ---------- */
.admin-wrap { max-width: var(--maxw); margin: 0 auto; padding: 88px var(--pad) 56px; }
.admin-wrap > h1 {
  font-family: var(--font-kai); font-size: 1.6rem; color: var(--ink);
  letter-spacing: .05em; margin-bottom: 28px;
}
.admin-login { max-width: 340px; margin: 0 auto; text-align: center; }
.admin-login input {
  width: 100%; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  font-size: 14px; font-family: inherit;
  background: var(--bg); color: var(--ink-body); outline: none;
}
.admin-login input:focus { border-color: var(--accent); }
.admin-login button {
  margin-top: 12px; padding: 10px 28px;
  background: var(--accent); color: var(--on-accent);
  border: none; border-radius: 16px;
  font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.admin-login button:hover { background: var(--accent-soft); }
.admin-login button:disabled { opacity: .55; cursor: default; }
.admin-msg { margin-top: 12px; font-size: 13px; }
.admin-msg.ok { color: var(--ok); }
.admin-msg.err { color: var(--err); }
.admin-section { margin-top: 32px; }
.admin-section h2 {
  font-family: var(--font-kai); font-size: 1.2rem; color: var(--accent);
  letter-spacing: .05em; margin-bottom: 12px;
}
.admin-toolbar { margin-bottom: 12px; text-align: right; }
.admin-toolbar button {
  padding: 8px 18px; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px;
  font-size: 13px; font-weight: 600; font-family: inherit;
  color: var(--ink-body); cursor: pointer;
}
.admin-toolbar button:hover { border-color: var(--accent); color: var(--accent); }
.admin-item {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 8px;
}
.admin-item .body { flex: 1; min-width: 0; }
.admin-item .content { font-size: 14px; color: var(--ink-body); line-height: 1.6; word-break: break-word; }
.admin-item .meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.admin-item .del {
  padding: 4px 14px; background: transparent;
  border: 1px solid var(--line); border-radius: 12px;
  font-size: 12px; font-family: inherit; color: var(--err); cursor: pointer;
  flex-shrink: 0;
}
.admin-item .del:hover { border-color: var(--err); }
.admin-empty { font-size: 13px; color: var(--muted); }
.admin-stats { margin: -18px 0 28px; font-size: 13px; }
.admin-stats a { color: var(--muted); text-decoration: none; }
.admin-stats a:hover { color: var(--accent); }

/* ---------- 八、手机微调（断点变量之外的例外，注释说明） ---------- */
@media (max-width: 767px) {
  .topnav { top: 16px; right: 16px; gap: 8px; font-size: 11px; }
  .site-nav { padding: 16px var(--pad); font-size: 12px; }
  .hero { padding: 92px 20px 40px; }
  .hero .subtitle { font-size: 15px; margin-top: 12px; }
  .card { padding: 20px 16px; gap: 14px; }
  .card .hook { font-size: 16px; }
  .card .emoji { font-size: 24px; width: 40px; height: 40px; border-radius: 10px; }
  .about-page { padding-top: 16px; }
}

/* ---------- 九、404 页（OSS 错误文档 serving——资产与回链一律根绝对路径） ---------- */
.notfound { max-width: var(--maxw); margin: 0 auto; padding: 96px var(--pad) 64px; text-align: center; }
.notfound .code { font-family: var(--font-kai); font-size: 3rem; color: var(--line); letter-spacing: .1em; }
.notfound h1 { font-family: var(--font-kai); font-size: 1.5rem; color: var(--ink); margin: 18px 0 26px; letter-spacing: .05em; }
.notfound a { color: var(--accent); font-size: 14px; text-decoration: none; }
.notfound a:hover { color: var(--accent-soft); }