/* 首页专属样式(仅 index.html 与生成的 en/index.html 引入)。
   hero 区、台前照片轮播、轨迹翻页卡——三块都只有首页在用,与 assets/home.js
   是同一边界。全站通用件(.wrap/.btn/.eyebrow/.sr-only/.doodle 等)仍在 style.css。
   ⚠️ 改动后两个引入点(index.html 与 en/index.html)都要能覆盖到;
   en/index.html 是翻译产物,改中文源后重跑管线即可带上。 */

/* ---------- hero ---------- */
.hero { padding: 80px 0 64px; position: relative; }
.hero .wrap-wide { position: relative; }
/* 首屏左文右物件两栏(2026-07 方向 B):.hero-text 文字列 + .hero-desk 物件堆 */
.hero-main { max-width: none; margin: 0; text-align: left; display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(34px, 3.6vw, 48px); line-height: 1.25; letter-spacing: 1px; font-weight: 800; }
.hero h1 .hl { position: relative; white-space: nowrap; }
/* 波浪线绝对定位贴在 .hl 文本正下方,左对齐后仍跟随 "Ktao" */
.hero h1 .hl svg { position: absolute; left: 0; bottom: -6px; width: 100%; height: 12px; }
.hero h1 .h1-name { color: var(--muted); font-weight: 600; font-size: var(--fs-2xl); }
/* 副标题独立成行:display:block 摆脱 h1 strut 撑高的行盒,line-height 1.35 收紧两行间距 */
.hero h1 .h1-sub { display: block; margin-top: 6px; font-size: .56em; color: var(--fg); font-weight: 700; line-height: 1.35; }
/* 副标题断行:≥760px 强制两行(避免"AI造"挤在一行),窄屏自然换行 */
.h1-break { display: none; }
@media (min-width: 760px) { .h1-break { display: inline; } }
.hero .sub { margin: 16px 0 0; font-size: 17px; color: var(--muted); max-width: 540px; }
/* CTA 组合行:主按钮 + 安静的文字级链接,左对齐跟随文字列 */
.hero-cta { margin-top: 18px; display: flex; align-items: center; justify-content: flex-start; gap: 16px; flex-wrap: wrap; }
.hero-cta .cta-quiet { font-size: var(--fs-base); font-weight: 600; }

/* hero 右栏物件堆(2026-07 方向 B):拍立得 + 芥末黄便签 + 两颗贴纸,装饰预算就这 3 类,不加新动画。
   desk 收缩包裹拍立得并右对齐,便签/贴纸的绝对定位因此以拍立得四角为锚。 */
.hero-desk { position: relative; transform: translateY(8px); width: fit-content; margin-left: auto; }
/* 拍立得小卡:纸色、墨边与硬阴影跟随全站明暗主题 */
.polaroid {
  width: 17em; margin-left: auto; padding: .93em .8em 2.67em; position: relative;
  background: var(--card); border: 2px solid var(--ink);
  /* 贴纸异形边,不入档(圆角 token 只收 4/8/10/12/14/17/18/999 的常规值) */
  border-radius: 22px 235px 22px 215px / 205px 22px 225px 22px;
  box-shadow: var(--shadow-md); transform: rotate(2.5deg);
}
/* 博客小卡:拍立得壳装最新文章(2026-07 替换原仪表盘插画,避免与案例区复读) */
a.polaroid-post { display: flex; flex-direction: column; font-size: 15px; text-decoration: none; padding: .8em .8em 1.07em; transition: transform var(--dur-fast); }
a.polaroid-post:hover { transform: rotate(1.5deg) translateY(-2px); color: inherit; }
.polaroid-post img { display: block; width: 100%; height: auto; border: .13em solid var(--ink); border-radius: .53em; margin-bottom: .67em; }
/* LATEST 标签独占封面上方一行,芥末黄纸签随拍立得固定纸色,不随主题变 */
.pp-kicker { align-self: flex-start; order: -1; display: inline-block; margin: 0 0 .67em .4em; padding: .2em .6em; background: var(--accent2); color: #2b2418; border: .13em solid var(--ink); border-radius: .53em; box-shadow: var(--shadow-xs); transform: rotate(-3deg); font-size: .73em; letter-spacing: .1em; font-weight: 800; }
.pp-title { display: block; font-size: 1em; font-weight: 800; line-height: 1.55; color: var(--fg); margin-top: .53em; }
.pp-meta { display: block; font-size: .8em; color: var(--muted); margin-top: .5em; }
.pp-more { display: block; font-size: .87em; color: var(--accent-text); font-weight: 700; margin-top: .92em; }
@media (max-width: 760px) {
  .hero-main { grid-template-columns: 1fr; }
  .hero-desk { width: min(100%, 19em); margin: 28px auto 0; transform: none; }
  .polaroid { margin: 0 auto; }
  a.polaroid-post {
    width: 100%; font-size: 14px; padding: .64em .64em .71em; transform: rotate(1deg);
    display: grid; grid-template-columns: 7.14em minmax(0, 1fr); column-gap: .71em;
    grid-template-areas: "kicker kicker" "cover title" "cover meta" "cover more";
  }
  a.polaroid-post:hover { transform: rotate(.5deg) translateY(-2px); }
  .polaroid-post img { grid-area: cover; width: 7.14em; height: 5.57em; object-fit: cover; margin: 0; border-width: .11em; }
  /* Grid 项默认会横向 stretch；显式按文字宽度收缩，避免移动端纸签被拉成整条横幅。 */
  .pp-kicker { grid-area: kicker; order: 0; justify-self: start; width: max-content; max-width: 100%; margin: 0 0 .64em .29em; }
  .pp-title { grid-area: title; margin-top: 0; font-size: 1em; line-height: 1.45; }
  .pp-meta { grid-area: meta; margin-top: .36em; font-size: .79em; }
  .pp-more { grid-area: more; margin-top: .58em; font-size: .86em; }
}

/* 漂浮涂鸦:只保留 d1 一枚(d2 随物件堆改造移除,2026-07),窄屏(≤640px)整体隐藏 */
.doodle { position: absolute; opacity: .85; pointer-events: none; animation: floaty 6s ease-in-out infinite; }
.doodle.d1 { top: 40px; left: 4%; }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(0deg);} 50% { transform: translateY(-14px) rotate(8deg);} }
/* 保留 !important:reduced-motion 必须压掉元素自身的动画声明,属合理防御 */
@media (prefers-reduced-motion: reduce) { .doodle { animation: none !important; } }

/* ---------- 台前照片轮播 ---------- */
/* 宽版容器里的轮播:不随容器拉满 1080,保持原有体量居中 */
.wrap-wide .carousel, .wrap-wide .jcar { max-width: 880px; margin-left: auto; margin-right: auto; }
.carousel { position: relative; border: 3px solid var(--ink); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: #efe7db; }
.carousel-track { display: flex; transition: transform var(--dur-slow) cubic-bezier(.4,0,.2,1); }
.carousel .slide { flex: 0 0 100%; margin: 0; position: relative; }
.carousel .slide img { display: block; width: 100%; height: clamp(280px,52vw,560px); object-fit: contain; background: #efe7db; }
.carousel .slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 16px 12px; font-size: var(--fs-md); font-weight: 700; color: #fff; line-height: 1.5; background: linear-gradient(transparent,rgba(0,0,0,.72)); }
.carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 2.5px solid var(--ink); background: rgba(255,255,255,.9); color: #2b2620; font-size: var(--fs-2xl); font-weight: 800; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 0 3px; transition: background var(--dur-fast); z-index: 2; }
.carousel-nav:hover { background: var(--accent-fill); color: var(--accent-ink); }
.carousel-nav.prev { left: 12px; } .carousel-nav.next { right: 12px; }
.carousel-dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; gap: 0; justify-content: center; z-index: 2; }
/* 圆点视觉仍是 9px,但按钮命中区撑到 24×24(WCAG 2.5.8);圆点画在伪元素上 */
.carousel-dots button { position: relative; width: 24px; height: 24px; padding: 0; border: none; border-radius: 50%; background: transparent; cursor: pointer; }
.carousel-dots button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; border: 1.5px solid #fff; }
.carousel-dots button.on::after { background: #fff; }
@media (max-width: 640px) { .carousel-nav { width: 36px; height: 36px; font-size: var(--fs-xl); } }

/* ---------- 轨迹翻页卡(手绘速写本风) ---------- */
.jcar { position: relative; background: var(--card); background: radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1.1px), var(--card); background-size: 20px 20px; border: 2.5px solid var(--ink); border-radius: 255px 18px 225px 18px/18px 225px 18px 255px; /* 贴纸异形边,不入档 */ box-shadow: var(--shadow-md); overflow: hidden; }
.jcar-track { display: flex; transition: transform var(--dur-slow) cubic-bezier(.4,0,.2,1); }
.jslide { flex: 0 0 100%; box-sizing: border-box; min-height: 230px; padding: 36px 64px 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; position: relative; }
/* 涂鸦大数字 92px/64px 是装饰图形值,不入字号阶梯 */
.jslide::before { content: attr(data-n); position: absolute; top: 2px; right: 18px; font-family: "Kaiti SC","STKaiti","KaiTi","楷体",serif; font-size: 92px; font-weight: 800; color: var(--accent); opacity: .12; line-height: 1; pointer-events: none; }
.jwhen { display: inline-block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 1px; border: 2px solid var(--ink); border-radius: var(--radius-pill); padding: 3px 14px; transform: rotate(-2deg); box-shadow: var(--shadow-xs); }
.jwhen.s1 { background: var(--accent2); color: #2b2418; } .jwhen.s2 { background: var(--accent3); color: var(--accent-ink); } .jwhen.s3 { background: var(--accent-fill); color: var(--accent-ink); } .jwhen.s4 { background: var(--accent4); color: var(--accent-ink); }
.jslide h3 { font-family: "Kaiti SC","STKaiti","KaiTi","楷体",serif; font-size: var(--fs-2xl); font-weight: 800; }
.jslide p { font-family: "Kaiti SC","STKaiti","KaiTi","楷体",serif; font-size: var(--fs-base); font-weight: 700; color: var(--muted); max-width: 520px; line-height: 1.7; }
.jcar-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; gap: 0; justify-content: center; }
/* 同上:9px 视觉圆点 + 24×24 命中区 */
.jcar-dots button { position: relative; width: 24px; height: 24px; padding: 0; border: none; border-radius: 50%; background: transparent; cursor: pointer; }
.jcar-dots button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; border: 1.5px solid var(--ink); }
.jcar-dots button.on::after { background: var(--accent); }
.jdoodle { position: absolute; pointer-events: none; }
.jdoodle.tl { top: 18px; left: 26px; transform: rotate(-9deg); }
/* 轨迹分镜插画:左图右文(2026-07)。图是透明 PNG 转 webp,明暗两种底色都直接放,不加底不加框 */
.jslide { flex-direction: row; align-items: center; gap: 22px; text-align: left; padding: 26px 44px 34px; }
.jart { flex: 0 0 36%; width: 36%; max-width: 200px; height: auto; }
.jtext { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.jslide p { max-width: none; }
@media (max-width: 640px) { .jslide { flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 26px 32px 48px; min-height: 250px; } .jtext { align-items: center; gap: 8px; } .jart { flex: none; width: 140px; max-width: 48%; } .jslide h3 { font-size: var(--fs-xl); } .jslide p { font-size: var(--fs-md); } .jslide::before { font-size: 64px; } /* 涂鸦避开手绘边框弧线:tl 角 255px 横径的内弧在 x≈12 处下探到 y≈13,12/12 会骑线被裁,退到弧线内侧安全区 */ .jdoodle.tl { top: 16px; left: 18px; width: 22px; height: 22px; } }

/* hero 社交图标簇(2026-07):kaiyi 式单色 glyph 一排,套贴纸按钮语言(墨边+硬阴影+hover 微歪) */
.social-row { display: flex; gap: 12px; margin-top: 20px; }
.social-row a, .social-row button { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--ink); border-radius: var(--radius-md); background: var(--card); box-shadow: var(--shadow-xs); color: var(--fg); cursor: pointer; padding: 0; font: inherit; transition: transform var(--dur-fast); }
.social-row a:hover, .social-row button:hover { transform: translateY(-2px) rotate(-1deg); }
.social-row .ico { width: 19px; height: 19px; margin: 0; }
/* 微信二维码弹层:懒加载,小尺寸挂在图标簇下方 */
#wechat-qr .qr-code { width: 150px; margin: 16px 0 0; padding: 8px; }

@media (max-width: 640px) {
  .hero { padding: 44px 0 28px; }
  .hero h1 { font-size: var(--fs-3xl); }
  .hero .sub { font-size: var(--fs-base); }
}