/* ==========================================================================
   Doupi Universe · 豆皮宇宙 — V1.0 预览原型
   设计系统 tokens：与设计确认包第 3 章一致
   ========================================================================== */

/* ---- 字体自托管（2026-10-15 上线加固）--------------------------------
   原先 9 个页面都引 fonts.googleapis.com。国内访问该域经常被阻断，
   手写体标题会掉成默认无衬线体 —— 首屏可见的失败。
   现在改为自托管 + font-display:swap，并把本地字体放在紧随其后，
   即使字体文件加载失败，苹安卓也只会退到 Kaiti SC / 楷体，不会失控。
   ⭐ 正式版（Next.js）改用 next/font/local，这里是原型的等价做法。
   合计 60 KB（2 个 woff2，2026-10-16 实测修正）：
     baloo-latin.woff2  32 KB · 英文标题
     nunito-latin.woff2  28 KB · 英文正文
   （zcool-xiaowei.woff2 523 KB 曾在此引用，现已弃用删除引用，文件留档未加载）
   -------------------------------------------------------------------- */
@font-face{
  font-family:'Baloo 2';font-style:normal;font-weight:500 700;font-display:swap;
  src:url('fonts/baloo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Nunito';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('fonts/nunito-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ZCOOL XiaoWei @font-face 已删除（2026-10-16 内审清理）：
   --f-hand 已改系统楷体栈，该 @font-face 为死代码（无任何 font-family 引用）。
   fonts/zcool-xiaowei.woff2（523 KB）保留在 fonts/ 作存档，浏览器不会加载。 */

:root{
  /* 色彩锚点（风格决定怎么画，色板决定能不能进页面） */
  --blue-300:#8ED8F8;  --blue-600:#2A7DE1;  --blue-700:#1E63B8;
  --green-300:#A8E6A3; --green-600:#4CAF50;
  --paper:#FAFAF5;     --paper-2:#F3F0E8;
  --ink:#2C2A26;       --ink-500:#6B6862;   --ink-300:#8A867E; /* 2026-10-16 由 #A8A49B 加深：原值在纸色背景小字号对比度 2.2:1 不满足 WCAG AA */
  --line:#E8E4DC;
  --warm:#F5E9D7;
  --shadow:0 2px 6px rgba(44,42,38,.06), 0 12px 32px rgba(44,42,38,.08);

  /* 字体（2026-10-15 用户定调，已自托管）
   ⭐ 手写体 = 站酷小薇 ZCOOL XiaoWei
   理由：原用马善政楷书偏「大人」，与水彩绘本风的儿童感不搭（用户 2026-10-15 反馈）。
   选型依据 = 绘本排版惯例「正文求稳、标题求趣」，小薇介于手写与正体之间，
   笔画有手写温度但字形仍可辨，适合 10 岁读者建立字形记忆。
   正式版（Next.js）改用 next/font/local，这里是原型的等价做法。 */
  --f-display:'Baloo 2','Trebuchet MS','PingFang SC','Microsoft YaHei',sans-serif;
  --f-body:'Nunito','PingFang SC','Microsoft YaHei','Helvetica Neue',sans-serif;
  --f-hand:'Kaiti SC','STKaiti','KaiTi','楷体','KaiTi_GB2312','STSong','Songti SC',serif; /* 2026-10-15 弃用站酷小薇：横画过细（豆字顶横仅1.3px@40px），小字号易"缺横"；改系统楷体栈 */

  --maxw:1160px;
  --r-lg:22px; --r-md:14px; --r-sm:9px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--blue-600);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.hand{font-family:var(--f-hand)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- 展期信息条 / 导航 ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(250,250,245,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex;align-items:center;gap:28px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:700;font-size:19px;color:var(--ink);white-space:nowrap}
.brand svg{width:30px;height:30px}
.brand small{font-weight:500;color:var(--ink-500);font-size:12px;margin-left:2px}
nav.main{display:flex;flex-wrap:nowrap;gap:4px;margin-left:auto;min-width:0}
nav.main a{
  color:var(--ink-500);font-size:14.5px;padding:7px 13px;border-radius:999px;
  transition:.18s;white-space:nowrap;
}
nav.main a:hover{background:var(--paper-2);color:var(--ink);text-decoration:none}
nav.main a.on{background:var(--blue-600);color:#fff}
@media(max-width:760px){
  nav.main{flex:1 1 auto;min-width:0;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  nav.main::-webkit-scrollbar{display:none}
  .topbar .wrap{gap:12px;padding:0 14px;height:56px}
  nav.main a{padding:7px 9px;font-size:13.5px}
  .brand{font-size:17px}
  .brand small{display:none}
  .brand svg{width:26px;height:26px}
}

/* ---------- 页头 / Hero ---------- */
.hero{padding:56px 0 30px}
/* 通用插画框：hero 与首页其他大图共用（勿改成 .hero 专属，否则别处图片会失去宽度约束） */
.art{
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);
  background:#fff;border:1px solid var(--line);
}
.art img{width:100%;height:auto;display:block}
/* 首页核心句：一句中文 + 一句英文单独成行（字号/颜色统一） */
.hero .hero-line{
  font-family:var(--f-hand);
  font-size:clamp(20px,2.8vw,28px);
  line-height:1.5;
  color:var(--ink);
  padding:0 6px;
  margin-top:1.5em;   /* 与上方插画之间空出一行（=1 倍行高） */
}
.hero .hero-line-en{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(20px,2.8vw,28px);
  line-height:1.5;
  color:var(--ink);
  letter-spacing:.01em;
  margin-top:6px;
}

.section{padding:54px 0}
.section>.wrap>h2{
  font-family:var(--f-display);font-size:clamp(24px,3vw,32px);margin-bottom:8px;
}
.section>.wrap>p.lead{color:var(--ink-500);margin-bottom:30px}

/* ---------- 卡片 / 展框 ---------- */
.grid{display:grid;gap:22px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.grid.c3{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.grid.c2,.grid.c3{grid-template-columns:1fr}}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;box-shadow:0 1px 3px rgba(44,42,38,.05);
  transition:.22s;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card .ph{background:var(--paper-2);aspect-ratio:4/3;overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .bd{padding:16px 18px}
.card h3{font-size:17px;margin-bottom:4px}
.card p{font-size:14px;color:var(--ink-500)}
.card .tag{
  display:inline-block;font-size:12px;color:var(--blue-700);
  background:#EAF4FD;border-radius:999px;padding:2px 10px;margin-bottom:8px;
}

/* 展框（桌面隐喻：装裱） */
.frame{
  background:#fff;padding:12px;border:1px solid var(--line);
  border-radius:6px;box-shadow:var(--shadow);
}
.frame .mat{padding:10px;background:#fff}
.frame img{border-radius:2px}
.frame figcaption{
  text-align:center;padding:12px 8px 4px;font-size:13px;color:var(--ink-500);
  border-top:1px solid var(--line);margin-top:12px;
}
.frame figcaption b{color:var(--ink);font-weight:700}

/* 名牌（作品标签） */
.plate{
  display:inline-block;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:10px 16px;font-size:13px;line-height:1.6;
  box-shadow:0 1px 2px rgba(44,42,38,.05);
}
.plate b{display:block;font-size:14.5px;color:var(--ink)}
.plate span{color:var(--ink-500)}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-block;font-family:var(--f-display);font-size:16.5px;
  background:var(--blue-600);color:#fff;border:none;cursor:pointer;
  padding:13px 34px;border-radius:999px;box-shadow:0 3px 10px rgba(42,125,225,.28);
  transition:.2s;
}
.btn:hover{background:var(--blue-700);transform:translateY(-1px);text-decoration:none}
.btn.ghost{background:#fff;color:var(--blue-600);border:1.5px solid var(--blue-300);box-shadow:none}
.btn.ghost:hover{background:#F2F9FE}
.btn.small{padding:9px 22px;font-size:14.5px}

/* ---------- 数据卡 ---------- */
.datacard{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:22px 24px;box-shadow:0 1px 3px rgba(44,42,38,.05);
}
.datacard dl{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 20px}
@media(max-width:560px){.datacard dl{grid-template-columns:repeat(3,1fr);gap:10px 12px}}
.datacard dt{font-size:12.5px;color:var(--ink-500)}
.datacard dd{font-size:16px;font-weight:700}
.datacard dd small{font-weight:500;font-size:12px;color:var(--ink-300);display:block}
.datacard .src{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--ink-300)}

/* ---------- 成长档案 ---------- */
.growthcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:22px 24px;box-shadow:0 1px 3px rgba(44,42,38,.05)}
.growth{width:100%;border-collapse:collapse;font-size:14.5px}
.growth th{text-align:left;font-weight:600;font-size:12.5px;color:var(--ink-500);padding:8px 10px;border-bottom:2px solid var(--line)}
.growth td{padding:10px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.growth tr:last-child td{border-bottom:none}
.growth .next td{color:var(--ink-300);font-size:12.5px;padding-top:14px}
@media(max-width:560px){.growthcard{padding:16px 14px}.growth td,.growth th{padding:8px 6px}.growth{font-size:13.5px}}

/* ---------- 鹦鹉英语 ---------- */
.eng-note{background:var(--paper-2);border-left:3px solid var(--accent,#7BA7BC);border-radius:0 var(--r-sm,8px) var(--r-sm,8px) 0;padding:14px 18px;font-size:14.5px;line-height:1.9;color:var(--ink-500)}
.eng-words{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:4px}
@media(max-width:760px){.eng-words{grid-template-columns:repeat(2,1fr)}}
.eng-word{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:14px 12px;text-align:center}
.eng-word b{display:block;font-size:17px}
.eng-word small{display:block;color:var(--ink-300);font-size:12px;margin:3px 0 6px}
.eng-word span{display:block;font-size:13.5px;color:var(--ink-500)}
.eng-sents,.eng-facts{list-style:none;padding:0;margin:4px 0 0}
.eng-sents li,.eng-facts li{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:12px 16px;margin-bottom:10px;font-size:15px;line-height:1.8}
.eng-sents li span,.eng-facts li span{display:block;font-size:13.5px;color:var(--ink-300)}

/* ---------- 鹦鹉新鲜事 ---------- */
.news-list{display:grid;gap:16px}
.news-item{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:20px 22px;box-shadow:0 1px 3px rgba(44,42,38,.05)}
.news-item h3{font-size:17px;margin:6px 0 10px}
.news-item p{font-size:14.5px;line-height:2;color:var(--ink-500);margin:0 0 10px}
.news-date{display:inline-block;font-size:12px;color:var(--ink-300);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.news-en{font-size:13.5px!important;color:var(--ink-300)!important;font-style:italic}
.news-src{font-size:12.5px!important;color:var(--ink-300)!important;border-top:1px dashed var(--line);padding-top:10px;margin-bottom:0!important}
.news-src a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media(max-width:560px){.news-item{padding:16px 14px}}

/* ---------- 时间轴 ---------- */
.timeline{position:relative;padding-left:34px}
.timeline::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-item{position:relative;padding-bottom:34px}
.tl-item::before{
  content:"";position:absolute;left:-29px;top:7px;width:14px;height:14px;border-radius:50%;
  background:#fff;border:3px solid var(--blue-600);
}
.tl-item.green::before{border-color:var(--green-600)}
.tl-item h3{font-size:19px;font-family:var(--f-display)}
.tl-item .when{font-size:13px;color:var(--ink-300);margin-bottom:6px}
.tl-item p{color:var(--ink-500);max-width:62ch}

/* ---------- 两列（隐私页） ---------- */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:680px){.cols2{grid-template-columns:1fr}}
.panel{border-radius:var(--r-md);padding:24px 26px;border:1px solid var(--line)}
.panel.share{background:#F0FAF1;border-color:#CDE8CF}
.panel.keep{background:#FDF6F6;border-color:#EED6D6}
.panel h3{font-size:17px;margin-bottom:14px}
.panel ul{list-style:none}
.panel li{padding:7px 0;border-bottom:1px dashed rgba(44,42,38,.08);font-size:15px}
.panel li:last-child{border-bottom:none}
.panel.keep li::before{content:"✕ ";color:#C05A5A;font-weight:700}
.panel.share li::before{content:"✓ ";color:var(--green-600);font-weight:700}

/* ---------- 页脚 ---------- */
footer{border-top:1px solid var(--line);margin-top:70px;background:#fff}
footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;padding:44px 24px 30px}
@media(max-width:720px){footer .wrap{grid-template-columns:1fr 1fr}}
footer h4{font-size:13px;color:var(--ink-300);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
footer ul{list-style:none}
footer li{margin-bottom:8px;font-size:14px}
footer li a{color:var(--ink-500)}
footer .brandline .en{font-family:var(--f-display);font-weight:700;font-size:16px;line-height:1.5}
footer .brandline .zh{font-family:var(--f-hand);color:var(--ink-500);font-size:15px;margin-top:2px}
footer .base{
  border-top:1px solid var(--line);padding:16px 24px;font-size:12.5px;color:var(--ink-300);
  display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;
}
footer .base .icp:empty::after{content:""}
.icp-slot{min-height:1em}

/* ---------- 翻页书 ---------- */
.books-shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:26px}
.bookcard{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;box-shadow:0 1px 3px rgba(44,42,38,.05);transition:.22s;
  color:var(--ink);
}
.bookcard:hover{transform:translateY(-3px);box-shadow:var(--shadow);text-decoration:none}
.bookcard .cv{aspect-ratio:2/2.8;background:var(--paper-2);overflow:hidden}
.bookcard .cv img{width:100%;height:100%;object-fit:cover}
.bookcard .bd{padding:14px 16px}
.bookcard .bd b{font-family:var(--f-display);font-size:17px}
.bookcard .bd span{display:block;font-size:13px;color:var(--ink-500);margin-top:3px}

/* 阅读器 */
.reader{max-width:1060px;margin:0 auto;padding:22px 16px 60px}
.stage{perspective:2400px;position:relative}
.book{
  position:relative;width:100%;aspect-ratio:2/1.3;
  transform-style:preserve-3d;
  border-radius:10px;
  box-shadow:0 24px 60px rgba(44,42,38,.18);
}
.book .static{position:absolute;inset:0;background:#fff;overflow:hidden;border-radius:10px}
.book .static .half{
  position:absolute;inset:0;background-size:200% 100%;background-repeat:no-repeat;
}
.book .static .half.left{background-position:left center}
.book .static .half.right{background-position:right center}
.book .static.righthalf{left:50%;width:50%;border-radius:0 10px 10px 0}
.book .static.lefthalf{width:50%;border-radius:10px 0 0 10px}

.leaf{
  position:absolute;top:0;left:50%;width:50%;height:100%;
  transform-origin:left center;transform-style:preserve-3d;
  transition:transform .58s cubic-bezier(.4,.05,.28,1);
  z-index:2;
}
.leaf.turned{transform:rotateY(-180deg);z-index:1}
.leaf .face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  overflow:hidden;background:#fff;
}
.leaf .face.back{transform:rotateY(180deg)}
.leaf .face .half{position:absolute;inset:0;background-size:200% 100%;background-repeat:no-repeat}
.leaf .face .half.pos-left{background-position:left center}
.leaf .face .half.pos-right{background-position:right center}

/* 中缝阴影 */
.gutter{
  position:absolute;top:0;bottom:0;left:50%;width:56px;transform:translateX(-50%);
  background:linear-gradient(90deg,rgba(44,42,38,0) 0%,rgba(44,42,38,.10) 46%,rgba(44,42,38,.16) 50%,rgba(44,42,38,.10) 54%,rgba(44,42,38,0) 100%);
  pointer-events:none;z-index:5;
}
/* 翻动时的高光 */
.leaf .face::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0) 55%,rgba(255,255,255,.35) 100%);
  opacity:0;transition:opacity .3s;
}
.leaf.turning .face::after{opacity:1}

/* 页面文字（文字不跨页：只落在某一侧） */
.ptext{
  position:absolute;left:6%;right:6%;bottom:7%;
  font-family:var(--f-hand);font-size:clamp(16px,2vw,23px);line-height:1.6;color:var(--ink);
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}
.ptext.left{right:52%;left:4%}
.ptext.right{left:52%;right:4%}
.ptext.imagine{color:#3A5F8A}
.ptext .mark{font-size:.75em;color:var(--ink-300);display:block;letter-spacing:.05em}
.pageno{
  position:absolute;bottom:2.6%;font-size:11.5px;color:var(--ink-300);
  font-family:var(--f-body);
}
.pageno.left{left:4%}
.pageno.right{right:4%}

/* 单页（手机）：跨页按中线切开，先左半后右半
   ⚠️ 关键：书盒高度必须 ≥ 半张图高度，否则 overflow:hidden 会把下半页裁掉。
   半张图实测比例 0.798（原图 1536×962 取一半），这里给 0.72（比图片比例更"高"一点），
   留出余量给底部文字行 —— 图仍按 200% 100% 裁切填充，不会变形，只是不再被切掉。
   2026-10-16 修复：原值 0.8 导致手机端只能看到半页 */
@media(max-width:700px){
  .book{aspect-ratio:0.72}
  .leaf,.book .static{left:0;width:100%}
  .book .static{border-radius:10px}
  .gutter{display:none}
  .ptext,.ptext.left,.ptext.right{left:8%;right:8%;bottom:6%}
  .ptext .mark{display:none}
}

/* 封面态 */
.cover-stage{position:relative;border-radius:10px;overflow:hidden;box-shadow:0 24px 60px rgba(44,42,38,.18)}
.cover-stage img{width:100%;height:auto}
.cover-title{
  position:absolute;left:0;right:0;top:9%;text-align:center;color:var(--ink);
}
.cover-title .t{font-family:var(--f-hand);font-size:clamp(26px,4.4vw,44px);letter-spacing:.12em}
.cover-title .s{font-size:13px;color:var(--ink-500);margin-top:6px;letter-spacing:.2em}
.cover-actions{position:absolute;left:0;right:0;bottom:7%;text-align:center}
.cover-actions .btn{box-shadow:0 6px 18px rgba(42,125,225,.35)}
.cover-actions .resume{display:block;margin-top:10px;font-size:13px;color:var(--ink-500)}
.reader-bar{
  display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px;
}
.reader-bar .progress{font-size:13px;color:var(--ink-500);min-width:110px;text-align:center}
.sound-toggle{font-size:13px;color:var(--ink-500);background:none;border:none;cursor:pointer}
.sound-toggle::before{content:"🔈 纸页声 关"}
.sound-toggle.on::before{content:"🔊 纸页声 开"}

/* 版权页 */
.colo{padding:5% 7%;height:100%;display:flex;gap:6%;align-items:center}
.colo .txt{flex:1.2}
.colo .txt h3{font-family:var(--f-display);font-size:clamp(17px,2vw,22px);margin-bottom:14px}
.colo .txt table{width:100%;font-size:clamp(13px,1.4vw,15px);border-collapse:collapse}
.colo .txt td{padding:6px 0;border-bottom:1px dashed var(--line);color:var(--ink-500)}
.colo .txt td:first-child{color:var(--ink-300);width:5.5em}
.colo .txt .thanks{margin-top:16px;font-family:var(--f-hand);font-size:clamp(14px,1.6vw,17px);color:var(--ink-500)}
.colo .ph{flex:1;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
@media(max-width:700px){
  .colo{flex-direction:column;justify-content:center;gap:12px}
  .colo .ph{width:62%}
}

/* 无障碍：减少动效 */
@media(prefers-reduced-motion:reduce){
  .leaf{transition-duration:.15s;transition-timing-function:ease}
  .leaf .face::after{display:none}
  html{scroll-behavior:auto}
}

/* ═══ 主角版式（2026-10-15）：豆皮是全站主角，豆芽只做配角 ═══ */
/* 首页「认识豆皮」：豆皮卡 1.3fr，豆芽卡 0.7fr —— 视觉权重向主角倾斜 */
.grid.parrots{grid-template-columns:1.3fr .7fr}
@media(max-width:600px){.grid.parrots{grid-template-columns:1fr}}

/* about / books 双栏的响应式收窄（替换原 inline grid，手机端塌陷修复） */
.about-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:start}
.books-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:center}
@media(max-width:760px){
  .about-grid,.books-grid{grid-template-columns:1fr}
  .books-grid .bookcard{order:-1}
}

/* ═══ 鹦鹉科普页（2026-10-16）═══
   定位=养鸟知识库，按主题累积。左正文右旁注，旁注放「豆皮的实际情况」。
   新增主题照抄 .section > .wrap.care-grid 结构即可。 */
.care-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:46px;align-items:start}
@media(max-width:820px){.care-grid{grid-template-columns:1fr;gap:34px}}

.care-kicker{
  font-family:var(--f-display);font-size:12px;font-weight:700;letter-spacing:.14em;
  color:var(--blue-600);text-transform:uppercase;margin-bottom:6px;
}
.care-h{
  font-family:var(--f-display);font-size:clamp(22px,2.8vw,29px);margin-bottom:10px;
}
.care-sh{
  font-family:var(--f-display);font-size:17px;margin:26px 0 10px;color:var(--ink);
}
.care-main p.lead{margin-bottom:0}

/* 清单 */
.care-list{list-style:none;margin-bottom:6px;max-width:64ch}
.care-list li{
  position:relative;padding:9px 0 9px 26px;font-size:15px;line-height:1.85;
  color:var(--ink-500);border-bottom:1px dashed rgba(44,42,38,.08);
}
.care-list li:last-child{border-bottom:none}
.care-list li b{color:var(--ink);font-weight:700}
.care-list.ok li::before{content:"✓";position:absolute;left:2px;color:var(--green-600);font-weight:700}
.care-list.no li::before{content:"✕";position:absolute;left:2px;color:#C05A5A;font-weight:700}
.care-list.num{counter-reset:cn;max-width:64ch}
.care-list.num li{padding-left:30px}
.care-list.num li::before{
  counter-increment:cn;content:counter(cn);position:absolute;left:0;top:11px;
  width:19px;height:19px;border-radius:50%;background:var(--blue-600);color:#fff;
  font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;
}

/* 提醒块 */
.care-warn{
  margin-top:26px;background:var(--warm);border-left:3px solid #D9A24A;
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:15px 18px;
  font-size:14.5px;color:var(--ink-500);line-height:1.9;max-width:66ch;
}
.care-warn b{color:var(--ink)}

/* 行为对照小卡 */
.beh-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:4px}
@media(max-width:600px){.beh-grid{grid-template-columns:1fr}}
.beh{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 15px;
}
.beh b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:4px}
.beh span{font-size:13.5px;color:var(--ink-500);line-height:1.75}

/* 旁注栏 */
.care-side{display:flex;flex-direction:column;gap:20px;position:sticky;top:88px}
@media(max-width:820px){.care-side{position:static}}
.care-fact{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:18px 20px;box-shadow:0 1px 3px rgba(44,42,38,.05);
}
.care-fact h4{
  font-size:13px;color:var(--blue-700);background:#EAF4FD;border-radius:999px;
  display:inline-block;padding:2px 11px;margin-bottom:10px;font-weight:700;
}
.care-fact p{font-size:14px;color:var(--ink-500);line-height:1.85}

/* 主题目录 */
.topic-nav{display:flex;flex-wrap:wrap;gap:9px}
.topic-nav a{
  display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:7px 16px;font-size:14px;color:var(--ink-500);transition:.18s;
}
.topic-nav a:hover{background:var(--blue-600);color:#fff;border-color:var(--blue-600);text-decoration:none}

/* ═══ 叙事身份说明（2026-10-17 V2.0 全站第一人称）═══
   讲述人＝小禾（「我」）；爸爸是幕后维护者。这一行把规则交代给读者。 */
footer .base{flex-direction:column;align-items:flex-start}
footer .base .base-row{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;width:100%}
.voice-note{
  margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);
  font-size:12px;color:var(--ink-300);line-height:1.7;max-width:60em;
}

/* ═══ 相册（about 页）═══
   数据来自 data/album.json（由上传脚本自动生成），空相册自动隐藏整个区块。 */
.albumgrid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  margin-top:18px;
}
.albumgrid figure{
  margin:0;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  transition:.2s;
}
.albumgrid figure:hover{box-shadow:0 10px 26px rgba(44,42,38,.13);transform:translateY(-2px)}
.albumgrid button{
  display:block;width:100%;padding:0;border:none;background:none;cursor:zoom-in;
}
.albumgrid img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.albumgrid figcaption{padding:9px 12px 11px;font-size:12.5px;color:var(--ink-500);line-height:1.55}
/* 图注：标题在左、日期靠右，两端对齐拉开距离 */
.albumgrid figcaption .cap-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
}
.albumgrid figcaption b{color:var(--ink);font-size:13px;font-weight:700;min-width:0}
.albumgrid figcaption time{
  flex:none;font-family:var(--f-display);font-size:10.5px;letter-spacing:.03em;
  color:var(--ink-300);white-space:nowrap;font-variant-numeric:tabular-nums;
}
/* 说明文字：一句话，单行，超出省略，保持卡片高度整齐 */
.albumgrid figcaption .cap-note{
  display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  margin-top:4px;font-size:12px;color:var(--ink-300);
}
/* 相册来源说明：压到最小、最淡，不抢照片和图注 */
#albumSrc{
  font-size:11px;color:var(--ink-300);opacity:.7;
  border-top:none;padding-top:0;margin-top:10px;
}
.album-empty{font-size:13.5px;color:var(--ink-300);margin-top:14px}

/* 灯箱 */
.albumbox{
  position:fixed;inset:0;z-index:80;background:rgba(24,22,20,.9);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:24px;opacity:0;pointer-events:none;transition:opacity .22s;
}
.albumbox.on{opacity:1;pointer-events:auto}
.albumbox img{max-width:min(1000px,94vw);max-height:78vh;border-radius:8px;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.albumbox .cap{color:#fff;font-size:14px;text-align:center;line-height:1.7;max-width:44em}
.albumbox .cap small{color:rgba(255,255,255,.6);display:block;margin-top:3px}
.albumbox .cls{
  position:absolute;top:18px;right:22px;background:none;border:none;color:#fff;
  font-size:30px;line-height:1;cursor:pointer;padding:6px 10px;
}
@media(max-width:600px){
  .albumgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .albumgrid figcaption{font-size:12px;padding:8px 10px 10px}
  .albumgrid figcaption .cap-row{gap:10px}
  .albumgrid figcaption time{font-size:10px}
}