/* 设计令牌、通用排版、导航、按钮、页脚全部来自共享层 `_base.css`（页面顶部注入的那一段）。
   这里以前有一份复制品，优先级压过共享层 —— 共享层改了首页不生效。
   已删。首页只保留「这一页独有的排版」。 */

/* ============================================================
   2 · HERO —— 3D 奶蛙
   ------------------------------------------------------------
   立体感由三件事叠出来（没有用到任何 3D 库）：
     a) perspective 容器 + rotateX/rotateY 跟随鼠标（真透视）
     b) 接触阴影：贴地的一层小而实，外围一层大而虚
   2026-10-16（孟菲斯化，ADR-26/27）：
     · 环境光与暗角整组撤掉 —— 孟菲斯不靠「光」造空间，靠描边和投影
     · 文案分层视差撤掉 —— 入场与待机都不挪位（ADR-27 §2.5）
     · 主标题上衬线 + 900 实心墨字（描边字 2026-10-16 退役，理由见 .hero h1 注释）；
       奶蛙投影、接触阴影、倒影翻墨色
   装饰 2 个、全墨色（docs/23 §3.5：纸上线稿，不是贴纸）。
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding:104px 0 0;
  overflow:hidden;
}
/* 环境光与暗角、以及承载它们的 .hero-fx 空壳整组撤掉：
   孟菲斯不靠「光」造空间，靠描边和投影（ADR-27）。 */
.hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:.96fr 1.04fr;
  align-items:center; gap:clamp(24px,4vw,56px);
  width:min(var(--wrap),92vw); margin-inline:auto;
  padding-bottom:clamp(60px,9vh,110px);
}
/* —— 文案（ADR-27：入场与待机都不挪位，鼠标视差已撤）—— */
.hero-copy{ position:relative; z-index:2; }
/* 导语只有 19 个字，窄屏自然折行会把“迷因。”单独剩在第二行。
   交给 balance 分两行（10/9），不再出现末行孤字；宽屏仍保持一行。 */
.hero .lede{ text-wrap:balance; }
/* 主标题：站名，衬线 900 大字，**实心墨字**。
   不用描边字（纸白填充 + 墨描边）：在 192px 这个尺寸上，居中描边会向外扩 2px，
   两个字的外轮廓在中间连成一条、笔画内部的横画被掏成黑杠 —— 读起来就是「字叠着」。
   字距 .04em：中文标题字距 0（ADR-27），但**两个字以上的展示字要留气口**；
   实测 0 字距时两字形盒各 192px 严丝合缝、描边直接咬合。
   字号取共享令牌 --fs-hero（七档之外的展示档，全站只此一处，docs/23 §2.4）。
   窄屏那一档也在令牌层里改，页面不再自己写 clamp。
   栏目名不上色、不描边 —— 这个区分比"一律黑白"更准确。 */
.hero h1{
  font-family:var(--serif-display); font-weight:900;
  font-size:var(--fs-hero);
  letter-spacing:.04em; margin:.04em 0 0;
  color:var(--ink);
}
/* 导语走共享 .lede（--fs-lg）。原来这里自己写了 clamp(1.05rem,1.4vw,1.2rem)，
   比其它 13 处导语小 1.8px —— 同一语义两套字号。
   .cta 也已在共享层（首页 / 404 / 跳转页 / 关于页原先各定义一份）。 */
/* 特征标签：纯文字，用间隔点分开。间隔点本身就是装饰，
   所以它必须是中性色 —— 亮色的小圆点串成一行会读成一串省略号。 */
.fact-list{ display:flex; flex-wrap:wrap; gap:.4rem var(--sp-4); margin:var(--sp-6) 0 0; padding:0; list-style:none; }
/* 间隔号挂在条目后面而不是前面：li + li::before 的圆点会跟着下一项换行，
   窄屏上「· 无单一作者」变成行首一个圆点 —— 标点禁则，行首不许出标点。
   改挂 ::after 后折行只可能落在圆点之前（行尾），中文排版允许。 */
.fact-list li{ font-size:var(--fs-sm); color:var(--text-2); display:inline-flex; align-items:center; }
.fact-list li:not(:last-child)::after{ content:""; width:3px; height:3px; border-radius:50%; background:var(--line-hard); margin-left:var(--sp-4); }

/* —— 舞台 ——
   右栏这一格始终保留：窄屏的 3D 槽在这里，静态图（LCP 与降级件）也在这里。
   桌面端的 3D 走的是下面那个整屏漫游层，这一栏就只剩「撑住版式」的作用 ——
   空着，但不能没有：没有它左栏的文案就会铺满整个宽度。 */
.hero-stage{
  --mx:0; --my:0;                 /* -1 .. 1，由 JS 写入 */
  position:relative;
  aspect-ratio:1/.94;
  perspective:1500px; perspective-origin:50% 68%;
  display:grid; place-items:end center;
}
/* 整屏漫游层：铺满整个 .hero（.hero 是 relative + overflow:hidden）。
   z-index 1、且排在装饰之前 —— 装饰和文案都在它之后，所以他永远从装饰后面走过。
   他实际能走的那条带子由 JS 量出来挂在宿主元素上（见下面 roamWindow）：
   左边界是文案的实际右缘，右边到画布边 —— 铺满是为了相机坐标好算，不是为了让他乱跑。
   这一层**不吃指针事件**：首屏的选中、点链接、滚动照旧跟他无关；
   他改成跟着整个窗口的指针转头（渲染器的 pointerEl），鼠标在页面哪儿他看哪儿。 */
.hero-roam{ position:absolute; inset:0; z-index:1; }
/* 共享层 [data-glb].is-3d 那条会把 canvas 的指针打开，这里按同一套口径关掉。
   多写一个 [data-glb] 是为了让这条**严格压过**共享层那条 —— 依赖样式表先后顺序
   的写法在这份代码里踩过坑（页面 <style> 在 @BASE 之后注入，同优先级后者胜）。 */
.hero-roam[data-glb].is-3d > .glbcv{ pointer-events:none; }
/* 窄屏不铺满：display:none 的元素没有尺寸，IntersectionObserver 就不会触发，
   于是这一层根本不会挂载 —— 一条 CSS 就是断点开关，不必再写 JS 判断视口。 */
@media (max-width:980px){ .hero-roam{ display:none; } }
/* 3D 支架：所有透视变换都打在它身上。 */
.frog-rig{
  position:relative; z-index:2;
  width:min(70%,470px); margin-bottom:8.5%;
  transform-style:preserve-3d;
  transform:
    translate3d(calc(var(--mx) * 20px), calc(var(--my) * 13px), 0)
    rotateY(calc(var(--mx) * 9deg))
    rotateX(calc(var(--my) * -6.5deg));
  transition:transform .5s var(--ease);
  will-change:transform;
}
.frog{
  width:100%; height:auto; display:block;
  transform-origin:50% 84%;
  animation:breathe 5.2s ease-in-out infinite;
/* 轮廓投影：紧贴的一层 + 松开的一层，制造"实心物体压在页面上"。
   亮底站投影换成墨色并压淡 —— 重投影在纸面上是"脏"，不是"立体"。 */
filter:
  drop-shadow(0 5px 8px rgba(26,23,18,.18))
  drop-shadow(0 26px 36px rgba(26,23,18,.22));
}
/* 静态图这一层：镜像 —— 让奶蛙指向左侧的文案与按钮 */
.frog-still{ position:relative; width:100%; transform:scaleX(-1); }
/* 窄屏的 3D 槽：正好盖住静态图那一格，替身原位换装。
   桌面 display:none —— 同上，没有尺寸就不会挂载，交给整屏漫游层。 */
.hero-glb{ position:absolute; inset:0; }
@media (min-width:981px){ .hero-glb{ display:none; } }
/* 首屏的 3D 一旦起来（不论走整屏层还是窄屏那个槽），静态图与它那层 CSS 接触阴影
   就让位；透视视差也一起停 —— 模型自己会转头、会走动，两套一起上只会打架。 */
.hero:has([data-glb].is-3d) .frog-still,
.hero:has([data-glb].is-3d) .contact{ visibility:hidden; }
.hero:has([data-glb].is-3d) .frog-rig{ transform:none; }
/* 地面倒影：让"它站在这里"这件事不需要解释。
   注意 transform-origin 必须居中（默认）——
   曾经写成 50% 0（以顶边为轴），scaleY(-1) 会把倒影向上翻到盒子外面，
   结果正好盖在奶蛙自己身上，脚下反而什么都没有（等于这层白做）。
   中心轴镜像的元素盒不变、内容就地上下翻转：脚接脚、头朝下。 */
.frog-reflect{
  position:absolute; left:0; top:calc(100% - 2px); width:100%; height:auto;
  transform:scaleY(-1);
  opacity:.22; pointer-events:none;
  filter:blur(3px) saturate(.7) brightness(.9);
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.38) 24%,transparent 56%);
          mask-image:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.38) 24%,transparent 56%);
}
@keyframes breathe{
  0%,100%{ transform:scale(1) translateY(0); }
  50%    { transform:scale(1.014,.986) translateY(-4px); }
}
/* 接触阴影（两层）：贴地的一层小而实，外围一层大而虚。
   它随倾斜反向偏移 —— 这是"奶蛙确实站在这里"最关键的锚点。
   亮底站整体翻墨色（暗底那套 rgba(0,0,0,.85) 在纸上是墨团）。
   地台椭圆（.stage-plinth）与地平线（.stage-horizon）已删：
   它们和这一层在讲同一件事，讲两遍就变成装饰了。 */
.contact{
  position:absolute; left:50%; bottom:8.4%; z-index:1;
  width:44%; height:4.6%;
  translate:-50% 0;
  background:radial-gradient(ellipse at 50% 50%,rgba(26,23,18,.42),rgba(26,23,18,.16) 46%,transparent 76%);
  filter:blur(6px);
  transform:translate3d(calc(var(--mx) * 17px),calc(var(--my) * -3px),0)
            scaleX(calc(1 + var(--my) * .08));
  transition:transform .5s var(--ease);
}
.contact::after{
  content:""; position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:200%; height:230%;
  background:radial-gradient(ellipse at 50% 50%,rgba(26,23,18,.14),transparent 68%);
  filter:blur(15px);
}

/* —— 点击狂笑 —— */
.frog-rig.is-laughing .frog{ animation:laugh .62s cubic-bezier(.36,.07,.19,.97) 3; }
@keyframes laugh{
  0%,100%{ transform:scale(1) rotate(0) translate(0,0); }
  12%{ transform:scale(1.045,.955) rotate(-2.2deg) translate(-7px,3px); }
  26%{ transform:scale(.972,1.03) rotate(2.6deg) translate(8px,-5px); }
  42%{ transform:scale(1.03,.97) rotate(-1.6deg) translate(-5px,2px); }
  60%{ transform:scale(.98,1.02) rotate(1.3deg) translate(5px,-3px); }
  78%{ transform:scale(1.012,.99) rotate(-.7deg) translate(-2px,1px); }
}
/* 「哈」字爆开 —— 点击的奖励，一次只出现一瞬间，面积也小。
   亮底站翻墨色：金色在奶黄底上与页面同色，读不出。 */
.ha{
  position:absolute; z-index:5; left:50%; top:44%;
  font-weight:900; color:var(--ink);
  pointer-events:none; user-select:none;
  text-shadow:0 4px 18px rgba(26,23,18,.18);
  animation:ha-fly 1.15s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes ha-fly{
  0%  { opacity:0; transform:translate(-50%,-50%) scale(.3) rotate(0deg); }
  18% { opacity:1; transform:translate(-50%,-58%) scale(1.12) rotate(var(--hr,4deg)); }
  100%{ opacity:0; transform:translate(calc(-50% + var(--hx,0px)),calc(-50% + var(--hy,-130px))) scale(.85) rotate(var(--hr,4deg)); }
}

/* ============================================================
   3 · 名画长廊
   ============================================================ */
.rail{
  display:flex; gap:clamp(14px,1.6vw,22px);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 0 26px; margin-inline:calc(50% - 50vw);
  padding-inline:max(4vw,calc(50vw - var(--wrap)/2));
  scrollbar-width:thin; scrollbar-color:rgba(26,23,18,.25) transparent;
}
.rail::-webkit-scrollbar{ height:6px; }
.rail::-webkit-scrollbar-thumb{ background:rgba(26,23,18,.25); border-radius:99px; }
.rail::-webkit-scrollbar-track{ background:rgba(26,23,18,.06); }

.art{
  flex:0 0 auto; scroll-snap-align:center;
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:var(--paper);
  border:var(--bw) solid var(--ink);
  box-shadow:var(--sd-3);
}
/* 装裱：画作完整呈现，不裁切。
   这 10 张是横竖混排（长宽比 0.67~1.49，竖 5 张横 5 张），
   原先统一用 4/5 竖框 → 横构图那几张上下要空掉 46%，读起来像"图没加载出来"。
   改成**定高、宽随画**：零留白，而卡片高度仍然一致，整排依旧齐。
   换统一比例都是错的 —— 竖构图会好、横构图更差（或反之）。
   衬纸白（docs/23 §3.1）：不再滤镜压暗 —— 孟菲斯是明快的，画就该鲜艳。 */
.art img{ height:clamp(190px,26vh,296px); width:auto; max-width:none; display:block;
  object-fit:contain; background:var(--paper);
  transition:transform .7s var(--ease); }
.art figcaption{
  padding:.8rem .95rem .9rem;
}
.art b{ display:block; font-size:var(--fs-md); letter-spacing:0; }
.art small{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--text-2); }
/* hover 只放大画芯：抬起来的是画，不是卡片（ADR-27 卡片不位移）*/
.art:hover img{ transform:scale(1.045); }

/* ============================================================
   4 · 头像图谱
   ============================================================ */
.split{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(26px,4vw,64px); align-items:center; }
.avatar-board{
  border-radius:var(--r-lg);
  background:var(--paper);
  border:var(--bw) solid var(--ink);
  box-shadow:var(--sd-3);
  padding:clamp(14px,2vw,26px);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(8px,1vw,14px);
}
.avatar-board img{ width:100%; display:block; }
/* 事实表：靠留白分栏 */
.facts{ display:grid; gap:var(--sp-4); margin:var(--sp-6) 0 0; }
.fact{ display:grid; grid-template-columns:auto 1fr; gap:var(--sp-4); align-items:baseline; }
.fact dt{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--muted); }
.fact dd{ margin:0; color:var(--text-2); font-size:var(--fs-md); }

/* ============================================================
   5 · 功能入口
   ============================================================ */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(216px,1fr)); gap:clamp(14px,1.6vw,20px); }
/* 入口卡是独立的一套，**不并入共享层的 .tile**：这是四个大入口
   （min-height 250px + 单字水印），不是缩略图卡 —— 强行合并只会给
   .tile 加一堆条件分支，那才是把代码写坏的方式。
   但视觉语言与共享层一致：纸白底 + 3px 墨描边 + sd-3，
   hover 只加深投影到 sd-4，不位移（ADR-27）。 */
.card{
  position:relative; overflow:hidden;
  border-radius:var(--r-lg);
  background:var(--paper);
  border:var(--bw) solid var(--ink);
  box-shadow:var(--sd-3);
  padding:clamp(24px,2.6vw,34px); min-height:250px;
  display:flex; flex-direction:column;
  transition:box-shadow var(--dur-ui) var(--ease-soft);
}
.card:hover{ box-shadow:var(--sd-4); }
/* 顺序编号（01 / TOUCH …）已删：这四个入口不是序列，编号不承载信息，
   而「01/02/03 式编号」是被点名禁的生成感标记（tells.md §4）。位置本身已经表达了顺序。 */
.card h3{ font-size:var(--fs-xl); letter-spacing:0; margin:auto 0 .5em; }
.card p{ margin:0; color:var(--text-2); font-size:var(--fs-sm); line-height:1.75; }
.card .go{
  margin-top:var(--sp-5); display:inline-flex; align-items:center; gap:.55em;
  font-size:var(--fs-sm); color:var(--ink); font-weight:700;
}
.card .go svg{ width:14px; height:14px; }
/* 单字水印：墨色 6% 淡印（暗底那套 .045 白在纸面上等于没有）*/
.card .glyph{
  position:absolute; right:-6px; bottom:-22px;
  font-size:var(--fs-3xl); font-weight:900;
  font-family:var(--serif-display);
  line-height:1; color:rgba(26,23,18,.06); pointer-events:none;
}

/* 页脚由共享层提供（页面尾部注入的那一段）。这里原来还有一套 .foot-in / .notice
   的死样式（HTML 里已经没有任何元素用它），已删。 */

/* ============================================================
   7 · 响应式（只写首页独有的部分）
   ------------------------------------------------------------
   原先这里还抄了共享层两份：
     · @media 560px 的 .wrap / .btn   → 共享层已有（还抄歪了 88vw vs 90vw）
     · prefers-reduced-motion 的 * 重置 → 共享层已有
     · .nav-links{ display:none }      → 这条是 bug：共享层在 980px 以下
       把导航做成汉堡菜单（max-height 收起 + body.nav-open 展开），
       首页这份因为后加载、同优先级，把它按成 display:none —— 图标能点，
       菜单永远不展开。删掉，回到共享层行为。
   ============================================================ */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; padding-top:14px; }
  .hero{ padding-top:92px; min-height:auto; }
  .hero-stage{ aspect-ratio:1/.84; order:-1; margin-bottom:6px; perspective-origin:50% 70%; }
  .frog-rig{ width:min(56%,290px); margin-bottom:11%; }
  /* .hero h1 的字号不在这里改：窄屏那一档在 _base.css 的 --fs-hero 里 */
  .split{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .frog-rig{ transform:none !important; }
}
/* 首页装饰坐标（原先写在 style 属性里） */
.deco-tl{ top:15%; left:4%; }
.deco-br{ right:5%; bottom:12%; }