/* ============ Sketch 工作纸 · 设计令牌（取自 designprompts.dev/sketch 官方规范） ============ */
:root{
  --paper:#f7f2e7;          /* 暖纸底 */
  --scrap:#fcf8ef;          /* 纸片/卡片 */
  --ink:#38352f;            /* 铅笔墨 */
  --muted:#514d44;          /* 淡墨 */
  --red:#9e3a2e;            /* 红笔批改 */
  --blue:#344c69;           /* 蓝圆珠笔批注 */
  --hl:#f0dfa0;             /* 荧光黄便签 */
  --line:#b3ac9d;           /* 擦除线/虚线 */
  --tape:rgba(216,203,170,.65);
  --f-display:"Ma Shan Zheng","Kaiti SC",KaiTi,STKaiti,serif;
  --f-hand:"LXGW WenKai Screen","Kaiti SC",KaiTi,STKaiti,serif;
  --f-latin:"Caveat","Ma Shan Zheng",cursive;
  --wobble:9px 4px 17px 5px/4px 12px 5px 9px;      /* 手绘歪斜圆角（官方） */
  --wobble2:14px 6px 20px 8px/8px 16px 6px 14px;
  --wobble3:5px 12px 6px 11px/12px 5px 13px 6px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-hand);
  font-size:20px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
/* 纸张颗粒 */
body::before{
  content:"";position:fixed;inset:0;z-index:99;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.21 0 0 0 0 0.17 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* 练习册左侧蓝笔边线（桌面端） */
.margin-rule{
  display:none;position:fixed;top:0;bottom:0;left:86px;width:4px;z-index:1;pointer-events:none;
  border-left:1.6px solid rgba(52,76,105,.4);
  border-right:1.2px solid rgba(52,76,105,.22);
}
@media (min-width:960px){.margin-rule{display:block}}

.sheet{max-width:1000px;margin:0 auto;padding:0 26px}
@media (min-width:960px){.sheet{padding-left:118px;padding-right:34px}}
section{scroll-margin-top:86px}

::selection{background:var(--hl);color:var(--ink)}
:focus-visible{outline:2px dashed var(--red);outline-offset:3px;border-radius:4px}
a{color:var(--blue)}
img,svg{max-width:100%}

/* ============ 顶部导航 ============ */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(247,242,231,.92);backdrop-filter:blur(4px);
  border-bottom:1.5px dashed var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.logo{
  font-family:var(--f-display);font-size:26px;color:var(--ink);text-decoration:none;line-height:1.2;
  display:flex;align-items:baseline;gap:8px;
}
.logo em{font-family:var(--f-latin);font-style:normal;font-size:17px;color:var(--red);transform:rotate(-3deg)}
.nav-links{display:flex;gap:4px 18px;flex-wrap:wrap}
.nav-links a{
  font-size:18px;color:var(--muted);text-decoration:none;padding:2px 2px;
  border-bottom:2px solid transparent;transition:border-color .15s,color .15s;
}
.nav-links a:hover{color:var(--ink);border-bottom:2px dashed var(--red)}
.nav-links a.cur{color:var(--ink);border-bottom:2px solid var(--red)}
.nav-links a.cur:hover{color:var(--ink);border-bottom:2px solid var(--red)}
/* 手机端：logo 单独一行，导航链接改为一行横向滑动（放不下时左右滑），吸顶高度从 104px 收到 ~86px */
@media (max-width:820px){
  .nav-inner{flex-direction:column;align-items:stretch;gap:0;padding:10px 0 0}
  .logo{font-size:23px}
  .logo em{font-size:15px}
  .nav-links{
    flex-wrap:nowrap;overflow-x:auto;gap:2px 16px;
    margin:2px 0 0;padding:0 0 10px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{font-size:17px;white-space:nowrap;padding:7px 0 5px}
}

/* 工作纸右上角编号 */
.sheet-no{
  text-align:right;font-family:var(--f-latin);color:var(--muted);font-size:17px;
  letter-spacing:.5px;padding:18px 0 0;
}
.sheet-no span{margin-left:14px}

/* ============ Hero ============ */
.hero{padding:44px 0 30px;position:relative}
.hero-eyebrow{
  font-family:var(--f-latin);color:var(--blue);font-size:20px;letter-spacing:1px;
  transform:rotate(-1deg);display:inline-block;
}
.hero-name-wrap{position:relative;display:block;width:fit-content;max-width:100%;margin-top:6px}
.hero-name{
  font-family:var(--f-display);font-size:clamp(58px,11vw,104px);line-height:1.15;
  margin:0;letter-spacing:6px;position:relative;display:inline-block;
}
.hero-underline{position:absolute;left:-1%;bottom:-6px;width:102%;height:34px;color:var(--ink)}
.hero-role{
  font-size:clamp(20px,3vw,25px);color:var(--muted);margin:18px 0 8px;
}
.hero-desc{max-width:560px;margin:10px 0 0;color:var(--ink)}
.hero-desc mark{background:linear-gradient(transparent 55%,var(--hl) 55%);color:inherit;padding:0 2px}

.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:44px;align-items:center}
@media (max-width:820px){.hero-grid{grid-template-columns:1fr;gap:30px}}

/* 胶带拍立得 */
.photo-wrap{position:relative;justify-self:center}
.photo{
  width:216px;background:var(--scrap);border:1.5px solid var(--line);
  border-radius:var(--wobble3);padding:12px 12px 8px;transform:rotate(2.6deg);
  box-shadow:2px 4px 10px rgba(81,77,68,.14);position:relative;
}
.photo img{display:block;width:100%;height:auto;aspect-ratio:200 / 210;object-fit:contain}
.photo figcaption{
  font-family:var(--f-latin);text-align:center;color:var(--muted);font-size:19px;padding:6px 0 4px;
}
.tape{position:relative}
.tape::after{
  content:"";position:absolute;top:-13px;left:calc(50% - 42px);width:84px;height:26px;
  background:var(--tape);transform:rotate(-4deg);
  clip-path:polygon(3% 0,97% 4%,94% 20%,100% 34%,96% 54%,99% 74%,94% 100%,1% 95%,5% 70%,0 49%,5% 24%);
}
/* 蓝笔批注 + 箭头 */
.hero-note{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:216px;margin-top:20px;transform:rotate(-1.5deg);
  color:var(--blue);font-size:18px;line-height:1.5;
}
.hero-note svg{display:block;flex:none;color:var(--blue)}
.hero-actions{display:flex;gap:18px;flex-wrap:wrap;margin-top:34px}

/* 按钮 */
.btn{
  display:inline-block;font-family:var(--f-hand);font-size:19px;line-height:1.4;
  padding:9px 24px;border:1.7px solid var(--ink);border-radius:var(--wobble);
  color:var(--ink);background:var(--scrap);text-decoration:none;cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease;
}
.btn-ghost{border-style:dashed;background:transparent}
@media (hover:hover){
  .btn:hover{transform:rotate(-1.2deg) translateY(-2px);box-shadow:2px 3px 0 rgba(56,53,47,.28);background:var(--hl)}
  .btn-ghost:hover{background:var(--scrap)}
}

/* ============ 剪裁分隔线 ============ */
.cut{
  height:0;margin:54px 0;position:relative;
  border-top:1.6px dashed var(--line);
}
.cut svg{position:absolute;left:-10px;top:-10px;color:var(--muted);opacity:.55;transform:rotate(-8deg)}

/* ============ 区块标题 ============ */
.sec-head{margin-bottom:26px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.sec-title{
  font-family:var(--f-display);font-size:clamp(30px,4.6vw,40px);margin:0;letter-spacing:3px;
  position:relative;display:inline-block;
}
.sec-title .u{position:absolute;left:0;bottom:-4px;width:100%;height:20px;color:var(--red);opacity:.85}
.sec-eyebrow{font-family:var(--f-latin);color:var(--blue);font-size:20px;transform:rotate(-1.5deg)}

/* ============ 关于我 ============ */
.about-card{
  background:var(--scrap);border:1.5px solid var(--line);border-radius:var(--wobble2);
  padding:26px 30px;max-width:760px;transform:rotate(-.4deg);
  box-shadow:1px 3px 8px rgba(81,77,68,.08);
}
.about-card p{margin:0 0 14px}
.about-card p:last-child{margin-bottom:0}
.about-card mark{background:linear-gradient(transparent 55%,var(--hl) 55%);color:inherit;padding:0 2px}
.fix{white-space:normal}
.fix .was{
  color:var(--muted);text-decoration:line-through;text-decoration-color:var(--red);
  text-decoration-thickness:2px;margin-right:2px;
}
.fix .now{color:var(--red)}
.about-note{
  margin-top:16px;color:var(--blue);font-size:18px;transform:rotate(-1deg);
  display:flex;align-items:center;gap:8px;
}
.motto{
  margin-top:26px;font-family:var(--f-display);font-size:26px;color:var(--muted);
  transform:rotate(-.8deg);
}
.motto strong{color:var(--ink);font-weight:400;background:linear-gradient(transparent 55%,var(--hl) 55%);padding:0 3px}

/* ============ 目录（封面页） ============ */
.toc{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px 26px;margin-top:8px}
.toc-card{
  background:var(--scrap);border:1.5px solid var(--line);border-radius:var(--wobble2);
  padding:22px 24px 18px;position:relative;text-decoration:none;color:inherit;display:block;
  transition:transform .18s ease,box-shadow .18s ease;
}
.toc-card:nth-child(odd){transform:rotate(-.7deg)}
.toc-card:nth-child(even){transform:rotate(.55deg)}
@media (hover:hover){
  .toc-card:hover{transform:rotate(0deg) translateY(-4px);box-shadow:2px 6px 14px rgba(81,77,68,.16)}
  .toc-card:hover .toc-go{border-bottom:1.5px dashed var(--blue)}
}
.toc-no{
  position:absolute;top:10px;right:14px;font-family:var(--f-latin);
  font-size:24px;color:var(--red);transform:rotate(-6deg);line-height:1;
}
.toc-card h3{font-family:var(--f-display);font-size:25px;margin:0 0 8px;letter-spacing:1px;font-weight:400}
.toc-card p{margin:0 0 14px;color:var(--muted);font-size:18px;line-height:1.7}
.toc-go{color:var(--blue);font-size:18px}

/* ============ 作品 / 文章卡 ============ */
.works{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:34px 30px;margin-top:8px}
.work{
  background:var(--scrap);border:1.5px solid var(--line);border-radius:var(--wobble2);
  padding:22px 22px 20px;position:relative;text-decoration:none;color:inherit;display:block;
  transition:transform .18s ease,box-shadow .18s ease;
}
.work:nth-child(odd){transform:rotate(-.7deg)}
.work:nth-child(even){transform:rotate(.55deg)}
@media (hover:hover){
  .work:hover{transform:rotate(0deg) translateY(-4px);box-shadow:2px 6px 14px rgba(81,77,68,.16)}
}
.work-thumb{
  border:1.4px solid var(--line);border-radius:var(--wobble3);background:var(--paper);
  padding:14px;margin:0 0 14px;
}
.work-thumb svg{display:block;width:100%;height:120px;color:var(--ink)}
.work-thumb img{display:block;width:100%;height:auto}
.work h3{font-family:var(--f-display);font-size:25px;margin:0 0 6px;letter-spacing:1px;font-weight:400}
.work p{margin:0 0 12px;color:var(--muted);font-size:18.5px;line-height:1.7}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{
  font-size:15.5px;color:var(--muted);border:1.3px dashed var(--line);
  border-radius:var(--wobble3);padding:1px 10px;background:transparent;
}
/* 红笔评分 */
.grade{
  position:absolute;top:10px;right:14px;font-family:var(--f-latin);
  font-size:30px;color:var(--red);transform:rotate(-7deg);line-height:1;
}
.grade small{font-size:16px;display:block;text-align:center}
/* 单项目大卡（横向） */
.work-featured{display:flex;gap:28px;align-items:center;max-width:800px;padding:26px 28px 24px}
.work-featured .work-thumb{flex:none;width:250px;margin:0}
.work-featured .work-thumb svg{height:160px}
.work-info{flex:1;min-width:0}
.work-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px}
.work-links .btn{font-size:18px;padding:7px 20px}
.work-stars{font-family:var(--f-latin);color:var(--muted);font-size:17px;margin-left:6px;white-space:nowrap}
@media (max-width:720px){
  .work-featured{flex-direction:column;align-items:stretch}
  .work-featured .work-thumb{width:100%}
  .work-featured .work-thumb svg{height:150px}
}

/* ============ 技能清单 ============ */
.checklist{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:10px 40px;list-style:none;margin:0;padding:0;
}
.checklist li{
  display:flex;align-items:center;gap:12px;padding:7px 4px;
  border-bottom:1.4px dashed rgba(179,172,157,.55);font-size:21px;
}
.checklist li.learning{border-bottom-color:var(--blue)}
.box{flex:none;width:24px;height:24px;color:var(--muted)}
.checklist .ok .box{color:var(--red)}
.checklist .ok{color:var(--ink)}
.learning-note{color:var(--blue);font-size:17px;margin-left:auto;transform:rotate(-2deg);white-space:nowrap}

/* ============ 时间线 ============ */
.timeline{position:relative;margin:10px 0 0;padding:6px 0 6px 34px;max-width:640px}
.timeline::before{
  content:"";position:absolute;left:9px;top:10px;bottom:14px;width:2.5px;
  background-image:linear-gradient(var(--muted) 55%,transparent 0%);
  background-size:2.5px 9px;opacity:.5;
}
.tl-item{position:relative;padding:0 0 30px}
.tl-item:last-child{padding-bottom:4px}
.tl-dot{
  position:absolute;left:-33px;top:9px;width:18px;height:18px;color:var(--blue);
  transform:rotate(-4deg);
}
.tl-year{font-family:var(--f-latin);font-size:26px;color:var(--red);line-height:1.1;transform:rotate(-1deg);display:inline-block}
.tl-item h4{margin:2px 0 4px;font-family:var(--f-hand);font-weight:400;font-size:21px}
.tl-item p{margin:0;color:var(--muted);font-size:18.5px}
.tl-award{
  display:inline-block;font-size:15px;color:var(--red);border:1.8px solid var(--red);
  border-radius:var(--wobble3);padding:0 10px;transform:rotate(-2deg);
  margin-left:10px;line-height:1.6;white-space:nowrap;
}

/* ============ 书单 ============ */
.log{
  background:var(--scrap);border:1.5px solid var(--line);border-radius:var(--wobble2);
  padding:10px 30px;max-width:860px;transform:rotate(-.35deg);
  box-shadow:1px 3px 8px rgba(81,77,68,.08);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  column-gap:44px;
}
.log-item{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:13px 2px;border-bottom:1.4px dashed rgba(179,172,157,.55);
}
.log-title{font-size:21px}
.log-item em{font-style:normal;color:var(--muted);font-size:17px}
@media (max-width:700px){.log{grid-template-columns:1fr;padding:8px 22px}}

/* ============ 联系 ============ */
.contact-zone{display:flex;gap:36px;flex-wrap:wrap;align-items:flex-start;margin-top:6px}
.sticky{
  background:var(--hl);border:1.4px solid rgba(158,58,46,.25);
  border-radius:var(--wobble2);padding:26px 30px 22px;max-width:400px;
  transform:rotate(-2deg);box-shadow:2px 5px 12px rgba(81,77,68,.18);position:relative;
}
.sticky::after{
  content:"";position:absolute;right:-12px;bottom:-10px;width:44px;height:34px;
  background:var(--paper);border:1.3px solid var(--line);
  clip-path:polygon(0 0,100% 0,100% 100%,35% 100%,0 62%);
  transform:rotate(-5deg);
}
.sticky h3{font-family:var(--f-display);margin:0 0 8px;font-size:26px;font-weight:400;letter-spacing:2px}
.sticky .mail{
  font-size:22px;color:var(--ink);text-decoration:none;border-bottom:2px dashed var(--red);
  padding-bottom:1px;word-break:break-all;
}
.sticky .mail:hover{background:var(--scrap)}
.sticky p{margin:12px 0 0;color:var(--muted);font-size:18px}
.contact-scraps{display:flex;flex-direction:column;gap:16px}
.scrap{
  background:var(--scrap);border:1.4px solid var(--line);border-radius:var(--wobble3);
  padding:12px 20px;transform:rotate(.8deg);min-width:230px;position:relative;
  box-shadow:1px 2px 6px rgba(81,77,68,.1);
}
.scrap:nth-child(2){transform:rotate(-1.2deg)}
.scrap b{font-weight:400;font-family:var(--f-display);letter-spacing:1px;margin-right:10px}
.scrap a{color:var(--blue);text-decoration:none;border-bottom:1.5px dashed var(--line)}
.scrap a:hover{border-bottom-color:var(--blue)}

/* ============ 翻页条（内页底部） ============ */
.page-turn{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  margin-top:54px;padding-top:20px;border-top:1.6px dashed var(--line);
}
.page-turn a{color:var(--blue);text-decoration:none;border-bottom:1.5px dashed var(--line);font-size:18px}
.page-turn a:hover{border-bottom-color:var(--blue)}
.page-turn a.home{color:var(--muted);font-family:var(--f-latin);font-size:19px}

/* ============ 页脚 ============ */
footer{
  margin-top:64px;border-top:1.6px dashed var(--line);padding:30px 0 44px;
  text-align:center;color:var(--muted);
}
.foot-sig{color:var(--ink);width:150px;height:44px;display:inline-block;vertical-align:-8px;margin-left:10px}
footer .small{font-family:var(--f-latin);font-size:18px;color:var(--muted)}

/* ============ 手机端收纳（≤640px） ============ */
@media (max-width:640px){
  body{font-size:19px}
  section{scroll-margin-top:96px}
  .sheet-no{font-size:15px;padding-top:12px}
  .hero{padding:26px 0 22px}
  .hero-eyebrow{font-size:18px}
  .hero-role{margin:14px 0 6px}
  .hero-actions{gap:12px;margin-top:24px}
  .btn{padding:10px 22px}
  .photo{width:186px}
  .hero-note{width:186px;margin-top:14px;font-size:17px}
  .cut{margin:36px 0}
  .about-card{padding:20px 18px 16px}
  .motto{font-size:22px;margin-top:20px}
  .toc{gap:22px 18px}
  /* 小屏强制单列，避免 minmax 的最小列宽（250/262/300px）超过窄屏版心 */
  .toc,.works,.checklist{grid-template-columns:1fr}
  .toc-card{padding:18px 18px 14px}
  .works{gap:26px 18px}
  .work-featured{padding:20px 18px 18px}
  .work-links .btn{font-size:17px;padding:8px 18px}
  .checklist{gap:6px}
  .checklist li{font-size:19.5px}
  /* 批注太长时折到下一行，不再挤在一行里 */
  .learning-note{white-space:normal;flex-basis:100%;margin-left:36px;margin-top:-4px}
  .timeline{padding:4px 0 4px 28px}
  .tl-dot{left:-27px}
  .tl-item{padding-bottom:24px}
  .tl-award{white-space:normal;margin-left:6px}
  .contact-zone{gap:22px}
  .sticky{padding:20px 18px 18px;max-width:100%}
  .sticky .mail{font-size:19px}
  .page-turn{margin-top:40px}
  footer{margin-top:44px;padding:24px 0 36px}
}
@media (max-width:380px){
  body{font-size:18px}
  .photo{width:168px}
  .hero-note{width:168px}
}

/* ============ 入场动画 ============ */
.rv{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.rv.on{opacity:1;transform:translateY(0)}
.work.rv.on:nth-child(odd){transform:rotate(-.7deg)}
.work.rv.on:nth-child(even){transform:rotate(.55deg)}
.toc-card.rv.on:nth-child(odd){transform:rotate(-.7deg)}
.toc-card.rv.on:nth-child(even){transform:rotate(.55deg)}
.about-card.rv.on{transform:rotate(-.4deg)}
.draw{stroke-dasharray:100;stroke-dashoffset:100}
.on .draw,.draw.on{transition:stroke-dashoffset 1.1s ease .25s;stroke-dashoffset:0}
.grade{opacity:0;transform:rotate(-7deg) scale(.6);transition:opacity .4s ease .8s,transform .4s ease .8s}
.on .grade{opacity:1;transform:rotate(-7deg) scale(1)}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .work.rv:nth-child(odd){transform:rotate(-.7deg)}
  .work.rv:nth-child(even){transform:rotate(.55deg)}
  .toc-card.rv:nth-child(odd){transform:rotate(-.7deg)}
  .toc-card.rv:nth-child(even){transform:rotate(.55deg)}
  .draw{stroke-dashoffset:0}
  .grade{opacity:1;transform:rotate(-7deg)}
}

/* ============ 页面切换过渡 ============ */
@view-transition{navigation:auto}
@keyframes page-in{from{opacity:0}}
body{animation:page-in .5s ease both}
@media (prefers-reduced-motion:reduce){body{animation:none}}