/* 首页 v2（2026-09-16，chloe 反馈：hero 只讲一件事 / showcase 全铺 / 时间线合一 / 页脚去冗余）
   tokens 仍来自 index.html :root（design-system.md A/D 区），这里只改版式。 */

/* ===== hero · 我的脑子（从 proto/hero-brain.html 搬入，2026-09-17）===== */
.scroller{height:320vh;position:relative}
:root{--y:#FECC33;--c:#38D9FF;--g:#C8FF16}

/* heyparker.ai「What makes Parker different」结构：粘住一屏，滚动切换三个分区；只亮当前叶、只显当前叶的标签。
   壳沿用首页格纸；三色只出现在脑叶、标签描边和身后的大圆（插画层）。 */
.scroller .sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background-color:var(--canvas);
  /* 顶部 270px 白带（顶栏 + 标题 + 纸条），下面才是格纸 */
  background-image:linear-gradient(#fff,#fff),linear-gradient(0deg,var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:100% 270px,100% 32px,32px 100%;background-repeat:no-repeat,repeat,repeat;background-position:0 0,0 270px,0 0}
.scroller .hnav{position:relative;z-index:6;display:flex;justify-content:space-between;align-items:center;padding:18px 28px;font-size:12px;font-weight:700;letter-spacing:2px}
.scroller .hnav .mark::before{content:"▶ ";font-size:9px;vertical-align:2px}
.scroller .hnav .pill-s{background:var(--ink);color:#fff;border-radius:6px;padding:9px 16px;text-decoration:none;letter-spacing:1px;font-size:13px;font-family:"Noto Sans SC",sans-serif}
.scroller .hero-band{position:absolute;left:0;top:74px;z-index:5;padding:0 28px;pointer-events:none;display:block}
.scroller .headline{font:800 clamp(34px,4.2vw,60px)/1.15 "Noto Sans SC",sans-serif;letter-spacing:-.02em;max-width:18ch;margin-bottom:10px}
.scroller .slogan{flex:none;padding:0;letter-spacing:0;font-size:17px;font-weight:500;line-height:1.6;color:var(--gray);font-family:"Noto Sans SC",sans-serif}
.scroller .slogan .rot{background:#fff;color:var(--ink);font-weight:700;border-radius:6px;padding:1px 9px}

/* 右上：当前分区的话，纸条式（heyparker 的三行纸条：每行一张微旋的白纸条，关键词高亮） */
.scroller .caption{position:absolute;right:28px;top:84px;z-index:5}
.scroller .caption .t{display:none;flex-direction:column;align-items:flex-end;gap:0}
.scroller .caption .t.on{display:flex}
.scroller .strip{display:inline-block;background:#F2F2F2;padding:5px 14px;font:700 clamp(15px,1.3vw,19px)/1.4 "Noto Sans SC",sans-serif;color:var(--ink);transform:rotate(var(--r,0deg)) translateX(var(--x,0px));white-space:nowrap}
/* 三张纸条各自歪、各自错位，边角露出来才像叠着的纸 */
.scroller .strip:nth-child(1){--r:-2.4deg;--x:0px} .strip:nth-child(2){--r:1.4deg;--x:10px;margin-top:2px} .strip:nth-child(3){--r:-1deg;--x:-6px;margin-top:2px}
.scroller .strip em{font-style:normal;background:var(--y);padding:0 6px;border-radius:4px}

/* 脑子：灰版垫底，彩版只在当前叶露出（clip-path 多边形来自图片色块实测） */
.scroller .head{position:absolute;left:50%;bottom:-4vh;width:min(780px,80vh);transform:translateX(-50%);z-index:2}
.scroller .head > img{display:block;width:100%;height:auto}   /* 只管脑子底图，别压扁组合图里的裁切图 */
.scroller .head .color{position:absolute;inset:0;opacity:0;transition:opacity .4s ease;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.scroller .head .color.on{opacity:1}
/* 照片：从当前脑叶里弹出来的一叠小照片（贴纸感：白边、微旋），弹出用 scale+位移动画 */
.scroller .pic{position:absolute;z-index:4;width:var(--w,150px);padding:0;background:none;border:0;border-radius:10px;filter:drop-shadow(0 12px 18px rgba(20,20,20,.22));transition:transform .25s cubic-bezier(.2,.8,.2,1),filter .25s;transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(var(--s,1));opacity:0;pointer-events:none}
.scroller .pic > img{display:block;width:100%;height:auto;border-radius:10px}   /* 只管单张照片，别影响组合图里按原尺寸裁切的图 */
.scroller .pic.phone img{border:4px solid #fff;border-radius:18px;box-shadow:0 0 0 1.5px rgba(20,20,20,.14)}
.scroller .pic.show{opacity:1;pointer-events:auto;animation:pop .55s cubic-bezier(.2,1.4,.4,1) both;animation-delay:var(--d,0s)}
@keyframes pop{0%{opacity:0;transform:translate(calc(-50% + var(--ox,0px)),calc(-50% + var(--oy,0px))) rotate(var(--r,0deg)) scale(.15)}60%{opacity:1}100%{opacity:1;transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(var(--s,1))}}
/* hover 放大：放在内层，避免被弹出动画的 fill-mode 盖住 */
.scroller .pic > img,.pic > .life-story{transition:transform .28s cubic-bezier(.2,.8,.2,1);transform-origin:center;will-change:transform}
.scroller .pic:hover{z-index:8;filter:drop-shadow(0 22px 30px rgba(20,20,20,.28))}
.scroller .pic:hover > img,.pic:hover > .life-story{transform:scale(var(--hs,1.7))}
.scroller .pic figcaption{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;font:600 12px/1 "Noto Sans SC",sans-serif;background:var(--ink);color:#fff;padding:5px 9px;border-radius:44px;opacity:0;transition:opacity .15s;pointer-events:none}
.scroller .pic figcaption,.pic .life-story figcaption{display:none!important}
.scroller .head.life-stories{position:absolute;height:auto;margin:0}
.scroller .pic.story{width:auto;padding:0;background:none;border:0}
.scroller .pic .life-story{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;margin:0}
.scroller .pic .life-story figcaption{opacity:0}

/* 进度点 */
.scroller .dots{position:absolute;left:28px;bottom:80px;z-index:5;display:grid;gap:8px}
.scroller .dots i{width:10px;height:10px;border-radius:50%;border:2px solid var(--ink);background:#fff}
[data-step="0"] .dots i:nth-child(1),[data-step="1"] .dots i:nth-child(2),[data-step="2"] .dots i:nth-child(3){background:var(--ink)}

/* 首屏底边的 marquee */
.scroller .marquee{position:absolute;left:0;right:0;bottom:0;z-index:4}
/* 悬浮导航抬到滚动带上方，三段等宽 */
.bottomnav { bottom: 76px; }
.bottomnav .seg { min-width: 92px; text-align: center; }

/* ===== showcase：3×3 等大，整块压进一屏；说明压在图上，底部留出悬浮导航的高度 ===== */
.projects { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding: 48px 48px 92px; }
.projects .sec-kicker { margin-bottom: 6px; }
.projects h2 { font-size: clamp(36px, 4vw, 56px); margin-bottom: 18px; }
.work-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 14px; }
.work-grid .proj { position: relative; min-width: 0; min-height: 0; display: block; }
.work-grid .proj .img { position: absolute; inset: 0; aspect-ratio: auto; padding: 0; }
.work-grid .proj .img > img, .work-grid .proj .img > svg { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.work-grid .proj .cap { position: absolute; left: 10px; bottom: 10px; padding: 7px 12px; background: rgba(255,255,255,.88); backdrop-filter: blur(6px); border-radius: var(--r-pill); display: flex; align-items: baseline; gap: 8px; max-width: calc(100% - 20px); }
.work-grid .proj .cap .k { margin: 0; font-size: 10px; letter-spacing: 1.5px; white-space: nowrap; }
.work-grid .proj .cap b { font-size: 13px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.work-grid .proj .cap p { display: none; }
.work-grid .cover-feed img { object-position: 78% 50%; }
@media (max-width: 1100px) {
  .projects { min-height: 0; display: block; }
  .work-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; }
  .work-grid .proj { aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) { .work-grid { grid-template-columns: 1fr; } }

/* ===== about：一条时间线 + 三张照片，标签掉到 section 底 ===== */
/* 履历屏用 D 区的白色带（hero/footer 同款），和作品区的 paper 灰分开 */
.about { position: relative; min-height: 100vh; min-height: 100svh; background: var(--hero-band); max-width: none; overflow: hidden; padding: 80px max(48px, calc((100vw - 1500px) / 2 + 48px)) 140px; }
.about .tl-row .tag { background: var(--canvas); }
.about .reach .navpill { background: var(--canvas); }
.about h2 { font-size: clamp(40px, 4.6vw, 68px); margin-bottom: 32px; }
.about-grid { grid-template-columns: 1.2fr 1fr; grid-template-rows: auto; gap: 48px; align-items: start; }
.reach { grid-column: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.reach .navpill { background: #fff; }
.reach .cv-head { font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--gray); margin-bottom: 4px; }
.timeline { grid-column: 1; align-self: start; }
.timeline .cv-head { font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--gray); margin-bottom: 6px; }
.tl-row { display: grid; grid-template-columns: 136px 56px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); align-items: baseline; }
.tl-row:last-child { border-bottom: 1px solid var(--line); }
.tl-row .when { font: 700 12px/1.5 "Inter", sans-serif; letter-spacing: 1px; color: var(--gray); white-space: nowrap; }
.tl-row .tag { font: 700 11px/1 "Noto Sans SC", sans-serif; padding: 5px 8px; border-radius: 6px; background: var(--canvas); color: var(--gray); justify-self: start; }
.tl-row .tag.work { background: var(--ink); color: #fff; }
.tl-row .what { font: 500 15px/1.5 "Noto Sans SC", sans-serif; color: var(--ink); }
.tl-row .what small { font-weight: 400; color: var(--gray); font-size: 13px; margin-left: 6px; }
.about-pile { position: absolute; inset: 0; grid-column: auto; grid-row: auto; min-height: 0; height: auto; z-index: 10; pointer-events: none; }
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .timeline { grid-column: 1; grid-row: 1; }
  .reach { grid-column: 1; grid-row: 2; }
}

/* ===== 履历底部：heyparker.ai 传送带。两端 = 描边圆角矩形垫底，方块叠在上面走，只在矩形外沿被裁；
   左右与正文 48px 边距对齐，整体离页面底边 48px ===== */
.logo-stage { position: absolute; left: 0; right: 0; bottom: 48px; height: 240px; z-index: 3; pointer-events: none; }
.logo-stage { --gutter: max(48px, calc((100vw - 1500px) / 2 + 48px)); }  /* 与 .about 的内边距同一个式子，任何宽度都和正文左沿对齐 */
.logo-belt { position: absolute; top: 0; bottom: 0; left: var(--gutter); right: var(--gutter); overflow: hidden; z-index: 2; }
.logo-track { position: absolute; left: 0; top: 50px; display: flex; gap: 40px; white-space: nowrap; animation: logos 30s linear infinite; }
.logo-tile { flex: none; width: 140px; height: 140px; border-radius: 32px; background: var(--ink); color: #F2F2F2; display: flex; align-items: center; justify-content: center; text-align: center; font: 800 20px/1.2 "Noto Sans SC", "Inter", sans-serif; letter-spacing: .02em; padding: 12px; }
@keyframes logos { from { transform: translateX(0); } to { transform: translateX(calc(-100% / 3)); } }
.logo-mask { position: absolute; top: 4px; width: 96px; height: 232px; border-radius: 48px; background: #E3E3E3; border: 4px solid var(--ink); z-index: 1; }
.logo-mask.l { left: var(--gutter); } .logo-mask.r { right: var(--gutter); }
.avatar { position: absolute; left: 50%; bottom: 0; width: 280px; height: auto; transform: translateX(-50%); z-index: 3; }
/* 标签堆铺满整个区块，落到最底边 */
.about-pile { left: 0; bottom: 0; }
.projects { position: relative; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; } }
@media (max-width: 900px) { .logo-stage { position: relative; bottom: auto; height: 220px; margin-top: 24px; } .logo-belt { left: 24px; right: 24px; } .logo-tile { width: 110px; height: 110px; border-radius: 26px; font-size: 16px; } .logo-track { gap: 24px; top: 55px; } .logo-mask { display: none; } .avatar { width: 220px; } .about-pile { bottom: 0; } }

/* 作品屏白底，通栏 */
.projects { background: #fff; box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 -100vmax); }

/* 传送带真 logo：白色单色，按各自比例限宽限高 */
.logo-tile img { display: block; max-width: 70%; max-height: 46%; width: auto; height: auto; }
.logo-tile.logo-tongji img, .logo-tile.logo-xiaohongshu img { max-height: 58%; }
.logo-tile.logo-avatr img { max-height: 62%; }

/* 履历屏：职业词条贴纸（色块 + 字 + 微倾斜，和首屏纸条同一套语言） */
.reach { position: relative; }
.career-tags { position: absolute; left: 310px; top: 26px; width: min(380px, calc(100% - 300px)); display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 4px; }
.ctag { display: inline-block; padding: 7px 14px; font: 700 17px/1.35 "Noto Sans SC", "Inter", sans-serif; color: var(--ink); background: #E3E3E3; transform: rotate(var(--r, 0deg)); white-space: nowrap; transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.ctag:hover { transform: rotate(0deg) scale(1.06); }
.ctag-y { background: #FECC33; } .ctag-c { background: #38D9FF; } .ctag-g { background: #C8FF16; }
.ctag-k { background: var(--ink); color: #fff; } .ctag-w { background: #F2F2F2; }
@media (max-width: 1100px) { .career-tags { position: static; width: auto; margin-top: 18px; } }

/* 履历屏右侧：联系方式拿掉，职业词条贴纸放大占位 */
.reach .career-tags { position: static; width: 100%; max-width: 440px; margin-top: 24px; gap: 10px 8px; }
.reach .ctag { font-size: 22px; padding: 9px 18px; }
@media (max-width: 1100px) { .reach .ctag { font-size: 18px; padding: 7px 14px; } }
/* 词条贴纸靠右，右沿和传送带右端对齐 */
.reach { align-items: flex-end; }
.reach .career-tags { justify-content: flex-end; margin-left: auto; }

/* 时间线去掉工作/实习/学业标签；履历内容整体下移 */
.tl-row { grid-template-columns: 160px 1fr; }
.about-grid { margin-top: 56px; }

/* ===== 作品屏：接在白屏上，两行对向滚动，说明文字在封面下方 ===== */
/* 2026-10-09 镜头过渡删掉后作品直接接在首屏下面，不再往上叠 */
.projects { position: relative; z-index: 3; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; max-width: none; padding: 72px 0 140px; background: #fff; }
.projects .sec-kicker, .projects h2 { padding: 0 max(48px, calc((100vw - 1500px) / 2 + 48px)); }
.work-marquee { display: grid; gap: 36px; }
.wm-row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.wm-track { display: flex; width: max-content; animation: wm-left 70s linear infinite; }
.wm-rev .wm-track { animation-name: wm-right; animation-duration: 60s; }
.wm-dup { display: contents; }
.work-marquee:hover .wm-track { animation-play-state: paused; }
@keyframes wm-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes wm-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.wm-card { flex: none; width: clamp(280px, 26vw, 400px); margin-right: 28px; text-decoration: none; color: var(--ink); }
.wm-cover { aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #F5F5F5; border: 1px solid #E8E8E8; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.wm-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wm-card:hover .wm-cover { transform: translateY(-4px); }
.wm-cap { display: flex; align-items: baseline; gap: 10px; padding: 12px 2px 0; white-space: nowrap; overflow: hidden; }
.wm-cap .wm-k { font: 700 11px/1 "Inter", "Noto Sans SC", sans-serif; letter-spacing: 1.5px; color: var(--gray); }
.wm-cap b { font: 700 17px/1.3 "Noto Sans SC", sans-serif; }
@media (prefers-reduced-motion: reduce) { .wm-track { animation: none; } .wm-row { overflow-x: auto; } }

/* 章节标题：去掉上面的小标，改一行；Anton 太重太挤 → Inter 600，放宽字距 */
.about h2.en, .projects h2.en { font-family: "Inter", "Noto Sans SC", sans-serif; font-weight: 500; text-transform: uppercase; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.2; letter-spacing: .06em; margin-bottom: 28px; }

/* ===== 页脚：参考 heyparker 结构（上一行小字 + 出血巨字名），用本站墨色底、Inter 小字、Anton 巨字 ===== */
.site-foot { position: relative; z-index: 4; background: var(--ink); color: #F2F2F2; overflow: hidden; padding: 28px max(48px, calc((100vw - 1500px) / 2 + 48px)) 0; }
.sf-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; font: 500 14px/1.4 "Inter", "Noto Sans SC", sans-serif; letter-spacing: .02em; color: #BDBDBD; }
.sf-links { display: flex; align-items: center; gap: 14px; }
.sf-links a { color: #F2F2F2; text-decoration: none; }
.sf-links a:hover { color: #FECC33; }
.sf-links i { font-style: normal; color: #6B6B6B; }
.sf-name { font-family: "Anton", sans-serif; text-transform: uppercase; color: #F2F2F2; font-size: clamp(120px, 21.5vw, 380px); line-height: .82; letter-spacing: -.01em; white-space: nowrap; margin: 56px 0 -.13em -.02em; }
@media (max-width: 900px) { .sf-row { flex-direction: column; align-items: flex-start; } }

.proj-inner { display: flex; flex-direction: column; justify-content: center; min-height: inherit; width: 100%; }

/* 作品屏不能裁切：未落定时内容被反向平移到元素上沿之外，overflow:hidden 会切出一道白边 */
.projects { overflow: visible; }

/* 滚动带改由 JS 驱动（支持悬停暂停后手动横滑/拖动） */
.wm-track, .wm-rev .wm-track { animation: none !important; will-change: transform; }
.wm-row { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.wm-row.dragging { cursor: grabbing; }
.wm-row.dragging .wm-card { pointer-events: none; }
.wm-card img { -webkit-user-drag: none; }
/* 作品屏内容顶对齐，标题位置和履历屏标题一致；标题与内容拉开 */
.projects { justify-content: flex-start; padding-top: 80px; }
.proj-inner { justify-content: flex-start; }
.projects h2.en { margin-bottom: 52px; }

/* 页脚一行三等分：左版权 / 中邮箱 / 右电话；巨字 HIRE CHLOE */
.sf-row { display: grid; grid-template-columns: 1fr auto 1fr; }
.sf-row > :last-child { justify-self: end; }
.sf-row a { color: #F2F2F2; text-decoration: none; }
.sf-row a:hover { color: #FECC33; }
.sf-name { font-size: clamp(110px, 19.3vw, 340px); }
@media (max-width: 900px) { .sf-row { grid-template-columns: 1fr; } .sf-row > :last-child { justify-self: start; } }
/* 作品卡悬停：去掉上移，改为从中心轻微放大 5% */
.wm-cover { transform-origin: center; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.wm-card:hover .wm-cover { transform: scale(1.05); }
.wm-row { padding: 14px 0; margin: -14px 0; }

/* 2026-09-17 · Goldsmiths 横版校徽放大一点 */
.logo-tile.logo-goldsmiths img { max-width: 84%; max-height: 50%; }

/* 2026-09-17 · HIRE CHLOE：换 Inter 500，拉开字距，不那么压 */
.sf-name { font-family: "Inter", "Noto Sans SC", sans-serif; font-weight: 500; letter-spacing: .04em; line-height: .9; font-size: min(calc((100vw - 96px) * .158), 222px); margin: 56px 0 -.1em -.04em; }

/* 2026-09-17 · 作品行去掉左右渐隐遮罩；封面去描边 */
.wm-row { -webkit-mask-image: none; mask-image: none; }
.wm-cover { border: 0; }

/* 2026-09-17 · 履历每行前加彩色 logo */
.tl-row { align-items: center; }
.tl-row .what { display: flex; align-items: center; flex-wrap: wrap; column-gap: 0; }
.tl-logo { flex: none; width: 30px; height: 30px; margin-right: 12px; border-radius: 8px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.tl-logo img { display: block; width: 78%; height: 78%; object-fit: contain; }
.tl-logo-xiaohongshu { border: 0; }
.tl-logo-xiaohongshu img { width: 100%; height: 100%; }

/* 2026-09-17 · 作品标题：项目名在左，公司在右 */
.wm-cap { justify-content: space-between; align-items: baseline; gap: 16px; }
.wm-cap b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wm-cap .wm-k { flex: none; font: 500 13px/1 "Noto Sans SC", "Inter", sans-serif; letter-spacing: .02em; color: var(--gray); }

/* 2026-09-17 · 作品区滑到底：标签掉落区（作品行下方到页脚之间） */
.projects > .drop-pile { position: absolute; inset: auto max(48px, calc((100vw - 1500px) / 2 + 48px)) 0; top: auto; height: 360px; min-height: 0; z-index: 2; pointer-events: none; overflow: visible; }
@media (max-width: 900px) { .projects > .drop-pile { position: relative; inset: auto; height: 420px; margin: 24px 24px 0; } }
/* 2026-09-19 · 掉落标签换词后，圆形那颗放四个字 */
.about-token.is-round { width: 112px; height: 112px; font-size: 20px; line-height: 1.25; }

/* 2026-09-19 · 缩短到作品前的滚动距离：脑子段 320→240vh，镜头段 520→320vh */
.scroller{height:240vh}

/* 2026-09-19 · 掉落区的几何形状：沿用首页三色（黄 #FECC33 / 青 #38D9FF / 荧光绿 #C8FF16）+ 墨色 + 米白 */
.drop-pile .about-token.is-hex { width: 132px; height: 132px; background: #C8FF16; }
.drop-pile .about-token.is-grid { width: 118px; height: 118px; border-radius: 22px; }
.drop-pile .about-token.is-ring { width: 104px; height: 104px; padding: 0; border-radius: 50%; background: transparent; border: 18px solid #FECC33; box-sizing: border-box; }
.drop-pile .about-token.is-star { width: 124px; height: 124px; padding: 0; border-radius: 0; background: var(--ink); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.drop-pile .about-token.is-arch { width: 150px; height: 84px; padding: 0; border-radius: 84px 84px 8px 8px; background: #38D9FF; }
.drop-pile .about-token.is-blob { width: 128px; height: 108px; padding: 0; border-radius: 62% 38% 55% 45% / 48% 60% 40% 52%; background: #FECC33; }
.drop-pile .about-token.is-stripe { width: 176px; height: 64px; padding: 0; border-radius: 999px; background: repeating-linear-gradient(90deg, var(--ink) 0 14px, #F2F2F2 14px 28px); }
.drop-pile .about-token.is-dots { width: 112px; height: 112px; padding: 0; border-radius: 26px; background-color: #38D9FF; background-image: radial-gradient(var(--ink) 3px, transparent 3.5px); background-size: 20px 20px; background-position: 4px 4px; }
.drop-pile .about-token.is-tri { width: 136px; height: 118px; padding: 0; border-radius: 0; background: #C8FF16; clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* 2026-10-07 · 作品区：两条滚动带 → 静态网格。上面 4 个主项目两两并排放大，下面一行其余 4 个 */
.wg { padding: 0 max(48px, calc((100vw - 1500px) / 2 + 48px)); }
.wg .wm-card { width: auto; margin: 0; display: block; }
.wg-main { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 32px; }
.wg-main .wm-cap { padding-top: 16px; }
.wg-main .wm-cap b { font-size: 20px; }
.wg-sub { margin: 72px 0 20px; font: 500 14px/1.2 "Inter", "Noto Sans SC", sans-serif; letter-spacing: .06em; color: var(--gray); }
.wg-more { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.wg-more .wm-cap b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
.wg .wm-card:hover .wm-cover { transform: none; }
.wg .wm-cover img { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.wg .wm-card:hover .wm-cover img { transform: scale(1.04); }
@media (max-width: 900px) {
  .wg { padding: 0 20px; }
  .wg-main { grid-template-columns: 1fr; gap: 32px; }
  .wg-more { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
}
/* 网格变高后，掉落标签留在网格下方的空白里，不压卡片 */
@media (min-width: 901px) { .projects { padding-bottom: 420px; } }

/* 2026-10-07 · 名字当主角：左上小字挪成大标题，原标题那句缩小跟在下面 */
.scroller .hnav { justify-content: flex-end; }
.scroller .hero-name { margin: 0; font: 600 clamp(56px, 7vw, 104px)/.95 "Inter", "Noto Sans SC", sans-serif; letter-spacing: -.035em; color: var(--ink); }
.scroller .headline { margin: 14px 0 8px; font: 700 clamp(20px, 1.9vw, 28px)/1.35 "Noto Sans SC", sans-serif; letter-spacing: 0; max-width: none; }
.scroller .hero-band { top: 64px; }
/* 全灰状态：三个小圆点都不填 */
[data-step="none"] .dots i { background: #fff; }

/* 2026-10-07 · 左上角改成签名：名字小而重，下面一行轮播签名；脑子当主角（参考 blunar.cz 左上角）
   原大标题那句先藏起来，之后挪到左下角当一句话介绍 */
.scroller .hero-band { top: 22px; }
.scroller .hero-name { font: 650 28px/1.15 "Inter", "Noto Sans SC", sans-serif; letter-spacing: -.02em; }
.scroller .headline { display: none; }
.scroller .slogan { margin-top: 4px; font-size: 15px; line-height: 1.5; }
.scroller .slogan .rot { padding: 0 7px; }

/* 2026-10-07 · 网格铺满整屏（去掉顶部 270px 白带，参考 nataliealmosa.ca）；
   右上纸条挪到脑子正上方居中，只在黄/蓝/绿三步出现，开始和结尾全灰时不出现（逻辑没改） */
.scroller .sticky { background-image: linear-gradient(0deg,var(--grid-line) 1px,transparent 1px), linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size: 100% 32px, 32px 100%; background-repeat: repeat, repeat; background-position: 0 0, 0 0; }
.scroller .caption { left: 50%; right: auto; top: 72px; transform: translateX(-50%); }
.scroller .caption .t { align-items: center; }
.scroller .strip { background: #fff; }
@media (max-width: 700px) { .scroller .caption { top: 118px; } }

/* 2026-10-07 · 中央说明改成两级文字，与散落照片共享网格背景。 */
.scroller .caption { top: 76px; width: min(560px, calc(100% - 40px)); text-align: center; pointer-events: none; }
.scroller .caption .t { gap: 12px; }
.scroller .caption-title { font: 700 clamp(21px, 2vw, 30px)/1.35 "Noto Sans SC", sans-serif; letter-spacing: -.025em; color: var(--ink); }
.scroller .caption-detail { font: 400 clamp(13px, 1.05vw, 16px)/1.7 "Noto Sans SC", sans-serif; color: #61605D; text-wrap: balance; }
@media (max-width: 700px) {
  .scroller .caption { top: 126px; width: calc(100% - 40px); }
  .scroller .caption .t { gap: 8px; }
  .scroller .caption-title { font-size: 21px; }
  .scroller .caption-detail { max-width: 30ch; font-size: 13px; }
}