/* 贴在物件表面的 DOM：CSS3D 层容器、相册摊页、软木板板面、一体机屏幕覆盖。
   这些元素在 3D 变换里，禁止 fixed / vw / vh / backdrop-filter。 */
/* overflow 用 clip 而不是 hidden：hidden 仍可被 focus()/scrollIntoView 程序化滚动（一体机里 iframe 内点一下就把整层滚偏 112px），clip 完全不可滚 */
#css3d{position:fixed;inset:0;z-index:0;overflow:clip;background:transparent;pointer-events:none}
#css3d>div{pointer-events:none}
/* 注意：.d3 上不能设 overflow（clip/hidden 都会让 Chrome 对 3D 变换内容的命中测试失效） */
.d3{pointer-events:auto;transform-style:preserve-3d;-webkit-font-smoothing:antialiased}
/* Chrome 对 3D 变换内容里“自身带 transform 的子元素”命中测试不稳定（hover 一动就丢），所以显示面里的可点元素 hover/active 一律不用 transform */
.d3 button:hover,.d3 button:active,.d3 a:hover,.d3 a:active,.d3 [role=button]:hover,.d3 [role=button]:active{transform:none!important}
.d3.is-hidden{visibility:hidden;pointer-events:none}
/* 不是当前聚焦面的显示面：整块可点（点了就飞过去），内部元素不响应 hover */
.d3:not(.is-current){cursor:pointer}
.d3:not(.is-current) *{pointer-events:none}
/* 聚焦某个显示面时：画布不接事件，CSS3D 层接管；点到空处由 main.js 射线拾取 */
body.is-focus #css3d{pointer-events:auto}
body.is-focus #scene{pointer-events:none}
#css3d.can-click{cursor:pointer}
.d3 .hand{font-family:var(--hand)}

/* ---------- 相册摊页：1300×800，左右翻开的作品集 ----------
   左页：主打海报 + 片名/类型/成绩 + 创作者卡；右页：四张海报 2×2 海报墙。
   摊页里没有可点元素；版式衬线 + 无衬线，不用手写体。翻开只做内容淡入，不做绕轴翻页（会被 WebGL 挡出穿模感）。 */
.al{position:relative;border-radius:8px;color:var(--ink);font:400 15px/1.6 var(--sans);
 background:#e3d6be;box-shadow:inset 0 0 0 1px rgba(92,66,34,.2);opacity:0;transition:opacity .5s ease .1s}
.al.is-open{opacity:1}
/* 纸：奶白微纹 + 轻暗角；外缘几道细线表示叠着的页边 */
.al-page{position:absolute;top:0;width:650px;height:800px;overflow:hidden;background:
 repeating-linear-gradient(0deg,rgba(124,96,56,.022) 0 1px,transparent 1px 7px),
 repeating-linear-gradient(90deg,rgba(124,96,56,.016) 0 1px,transparent 1px 7px),
 radial-gradient(130% 100% at 50% 40%,#fcf9f2 0 50%,#f6efe2 80%,#ebe0cc 100%)}
.al-left{left:0;border-radius:8px 0 0 8px}
.al-right{left:650px;border-radius:0 8px 8px 0}
.al-page::before{content:'';position:absolute;top:6px;bottom:6px;width:9px;pointer-events:none;opacity:.7;
 background:repeating-linear-gradient(90deg,rgba(92,66,34,.18) 0 1px,transparent 1px 3px)}
.al-left::before{left:0}.al-right::before{right:0;transform:scaleX(-1)}
.al-page::after{content:'';position:absolute;inset:0;pointer-events:none}
.al-left::after{box-shadow:inset -36px 0 44px -30px rgba(76,50,18,.46),inset 3px 3px 0 -1px rgba(255,255,255,.6),inset 0 -16px 22px -20px rgba(96,68,32,.3)}
.al-right::after{box-shadow:inset 36px 0 44px -30px rgba(76,50,18,.46),inset -3px 3px 0 -1px rgba(255,255,255,.6),inset 0 -16px 22px -20px rgba(96,68,32,.3)}
.al-gutter{position:absolute;left:630px;top:0;width:40px;height:100%;pointer-events:none;background:
 linear-gradient(90deg,rgba(90,62,28,0) 0,rgba(90,62,28,.1) 28%,rgba(70,46,18,.28) 50%,rgba(90,62,28,.1) 72%,rgba(90,62,28,0) 100%)}
/* 页眉 */
.al-head{position:absolute;left:56px;right:56px;top:40px;display:flex;justify-content:space-between;align-items:baseline;
 padding-bottom:10px;border-bottom:1px solid rgba(92,66,34,.16);white-space:nowrap}
.al-kicker{font-size:12.5px;letter-spacing:.24em;color:#8f7d61}
.al-count{font-size:12.5px;letter-spacing:.06em;color:#a3937a;font-variant-numeric:tabular-nums}
/* 海报：白边相纸、直角、柔和投影 */
.al-work{margin:0;display:grid;gap:10px;align-content:start;min-width:0}
.al-poster{position:relative;display:block;aspect-ratio:400/572;background:#fff;padding:7px;
 box-shadow:0 18px 30px -18px rgba(62,38,12,.55),0 1px 2px rgba(62,38,12,.2),0 0 0 1px rgba(120,92,52,.14)}
.al-poster img,.al-poster-fallback{position:absolute;left:7px;top:7px;width:calc(100% - 14px);height:calc(100% - 14px);display:block}
.al-poster img{object-fit:cover;background:#1d232a}
.al-poster-fallback{display:grid;place-content:end start;padding:14px;color:#fff;background:linear-gradient(135deg,#2f6b53,#6f9a7c 60%,#a8c4d6)}
.al-poster-fallback b{font:600 18px/1.3 var(--serif)}
.al-poster img+.al-poster-fallback{display:none}
/* 说明文字一律不换行：片名一行、类型 + 角色一行 */
.al-work figcaption{white-space:nowrap}
.al-work figcaption b{display:block;font:600 15px/1.4 var(--serif);color:#22302a}
.al-work figcaption small{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:12px;color:#8e8068;letter-spacing:.04em}
.al-genre{font-style:normal;font-size:11px;line-height:1.5;padding:0 7px;border-radius:999px;color:#2f6b53;background:rgba(47,107,83,.1)}
.al-stat{font-weight:600;color:#2f6b53}
/* 左页主打：海报在左，右侧一列 = 片名 / 类型·角色 / 成绩 */
.al-lead{position:absolute;left:56px;top:96px;width:538px;grid-template-columns:300px 1fr;gap:0 26px;align-items:start}
.al-lead .al-poster{grid-row:1}
.al-lead figcaption{padding-top:4px}
.al-lead figcaption b{font-size:26px;line-height:1.3;letter-spacing:0}
.al-lead figcaption small{margin-top:14px;font-size:13px;flex-wrap:wrap;row-gap:14px}
.al-lead .al-genre{font-size:12px;padding:1px 10px}
.al-lead .al-stat{flex-basis:100%;font:600 24px/1.3 var(--serif);letter-spacing:.02em}
/* 创作者卡：压在左页底部 */
.al-tips{position:absolute;left:56px;right:56px;bottom:44px;padding:18px 22px;border-radius:6px;
 background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(92,66,34,.14)}
.al-tips-k{display:block;font-size:11.5px;letter-spacing:.24em;color:#8f7d61;margin-bottom:8px}
.al-tips ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.al-tips li{position:relative;padding-left:14px;font-size:13.5px;line-height:1.6;color:#3d4a44}
.al-tips li::before{content:'';position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;background:#2f6b53}
/* 右页海报墙 2×2：最后一行说明文字要落在页底 50px 以上 */
.al-grid{position:absolute;left:125px;top:90px;width:400px;display:grid;grid-template-columns:1fr 1fr;gap:16px 28px}
.al-grid .al-work figcaption b{font-size:13.5px}
.al-grid .al-work figcaption small{font-size:11.5px}

/* ---------- 软木板板面 ---------- */
.bf{position:relative;overflow:hidden;background:#d6b083;color:var(--ink);font:400 15px/1.6 var(--sans)}
.bf-grain{position:absolute;inset:0;background:
 repeating-radial-gradient(circle at 20% 30%,rgba(120,80,40,.10) 0 1px,transparent 1px 7px),
 repeating-radial-gradient(circle at 70% 60%,rgba(255,240,210,.14) 0 1px,transparent 1px 9px),
 radial-gradient(120% 90% at 50% 40%,rgba(255,235,200,.16),rgba(90,60,30,.12));pointer-events:none}
.bf-title{position:absolute;left:44px;top:20px;font-size:25px;color:#5b3d22}
/* 三张卡按时间从左到右，一样宽；外层不带 transform，倾斜只加在内层视觉上。卡片不可点，细节全写在卡上 */
.bf-card{position:absolute;width:350px}
.bf-in{padding:16px 18px 18px;border-radius:3px;background:#fffdf7;color:var(--ink);box-shadow:0 10px 22px -12px rgba(60,35,10,.55),0 1px 2px rgba(60,35,10,.2);transform:rotate(var(--tilt));transform-origin:50% 10px;display:grid;gap:9px}
.bf-card:nth-of-type(1){left:44px;top:78px}
.bf-card:nth-of-type(2){left:418px;top:86px}
.bf-card:nth-of-type(3){left:792px;top:80px}
.bf-pin{position:absolute;left:50%;top:-8px;width:20px;height:20px;margin-left:-10px;border-radius:50%;box-shadow:inset -3px -3px 6px rgba(0,0,0,.25),0 4px 6px rgba(0,0,0,.3)}
.bf-pin-r{background:#d98f6a}.bf-pin-g{background:#9cbfa5}.bf-pin-b{background:#a8c4d6}
/* 公司照片在最上面，像贴在卡纸上的一张相片 */
.bf-photo{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:2px;background:repeating-linear-gradient(45deg,#f3ede1 0 8px,#ebe3d3 8px 16px);display:grid;place-items:center;color:#9a8a72;font-size:17px;box-shadow:inset 0 0 0 1px rgba(60,35,10,.08)}
.bf-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bf-photo img+span{position:absolute;right:8px;bottom:6px;font-size:13px;color:#fff;background:rgba(0,0,0,.35);padding:0 8px;border-radius:999px}
.bf-photo img+span:empty{display:none}
.bf-card header{display:grid;gap:1px;padding-bottom:7px;border-bottom:1px solid #eadfc9}
.bf-org{font:600 18px/1.35 var(--serif);letter-spacing:.01em}
.bf-site{font-size:12px;line-height:1.4;color:var(--ink-3)}
.bf-role{margin-top:3px;font-size:14px;line-height:1.4;color:var(--ink-2)}
.bf-role span{color:var(--ink-3)}
.bf-role span::before{content:' · '}
.bf-card time{font-size:12.5px;color:var(--ink-3);letter-spacing:.06em}
/* 细节：小标题加粗 + 正文，不折叠 */
.bf-bullets{display:grid;gap:6px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.bf-bullets li b{font-weight:600;color:var(--ink)}
.bf-bullets li b::after{content:'：'}
/* 右下角的便签：只在还没看过校园经历时贴着（.is-hidden 由 main.js 切换）。便签里有按钮，不能加 transform */
.bf-note{position:absolute;left:44px;bottom:30px;width:330px;padding:0;border:0;background:none;color:#5b4a1a;font:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none}
.bf-note.is-hidden{display:none}
/* 内层才歪：整张便签逆时针 2.4°，四边用 clip-path 切成手撕的不规则边，胶带压在左上 */
.bf-note-in{display:block;position:relative;padding:24px 22px 18px 20px;filter:drop-shadow(0 8px 10px rgba(60,35,10,.28));transform:rotate(-2.4deg);transform-origin:20% 0;font-size:18px;line-height:1.5}
/* 纸本体放在 ::before 上做撕边，这样胶带和文字不会被 clip-path 切掉 */
.bf-note-in::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(168deg,#fff6bd,#ffefa0);
 clip-path:polygon(0.8% 2.5%,38% 0.6%,62% 2.2%,99% 0,100% 40%,98.6% 70%,100% 97%,60% 100%,35% 98.2%,1.5% 100%,0 60%,1.2% 30%)}
.bf-note:hover .bf-note-in::before{background:linear-gradient(168deg,#fff8c8,#fff1a8)}
.bf-note-tape{position:absolute;left:26px;top:-9px;width:92px;height:24px;background:rgba(255,255,255,.55);border:1px solid rgba(60,35,10,.08);transform:rotate(-7deg)}
.bf-note-q{display:block}
.bf-note .bf-go{display:inline-block;margin-top:10px;color:#2f6b53;font-size:19px;border-bottom:1.5px solid rgba(47,107,83,.5)}

/* ---------- 书架关键词相框：960×720，装在木框里的字版 ---------- */
.kw{position:relative;color:var(--ink);font:400 16px/1.5 var(--sans);background:
 repeating-linear-gradient(0deg,rgba(124,96,56,.02) 0 1px,transparent 1px 6px),
 radial-gradient(120% 100% at 50% 30%,#fbf8f1 0 55%,#f3ecdd 100%)}
.kw::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(92,66,34,.18),inset 0 10px 22px -14px rgba(60,40,10,.35),inset 0 -8px 18px -14px rgba(60,40,10,.2)}
/* 关键词球：每个词绝对定位在卡纸上，位置/缩放/透明度由 surfaces.js 每帧写 transform；远看（.is-off）整块淡出成空白卡纸 */
.kw-cloud{position:absolute;inset:0;overflow:hidden;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;transition:opacity .7s ease}
.kw-cloud.is-drag{cursor:grabbing}
.kw.is-off .kw-cloud{opacity:.6;transition-duration:.35s} /* 远看：静止、略淡的一片小字，走近才全亮并转起来 */
.kw-tag{position:absolute;left:0;top:0;display:inline-block;padding:5px 18px;border-radius:999px;white-space:nowrap;will-change:transform,opacity;
 font-size:26px;line-height:1.4;color:#22302a;background:#fff;box-shadow:inset 0 0 0 1px rgba(92,66,34,.22),0 6px 14px -10px rgba(60,40,10,.35)}
.kw-tag-xl{font:600 44px/1.2 var(--serif);letter-spacing:.08em;color:#2f6b53;padding:6px 26px;background:rgba(47,107,83,.08);box-shadow:inset 0 0 0 1px rgba(47,107,83,.3)}

/* ---------- 一体机屏幕：只留屏幕 ---------- */
.ov.as-screen{width:100%;height:100%;max-height:none;padding:0;margin:0}
.ov.as-screen .ov-imac{width:100%;height:100%}
.ov.as-screen .ov-imac-screen{padding:0;border-radius:0;box-shadow:none;background:#eef2f5}
.ov.as-screen .ov-menubar{border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.9)}
.ov.as-screen .ov-desktop{border-radius:0}
.ov.as-screen .ov-imac-chin,.ov.as-screen .ov-imac-neck,.ov.as-screen .ov-imac-foot{display:none}
/* 屏内窗口的入场只做淡入：带 transform 的动画会让窗口里的按钮在 3D 里点不到 */
.ov.as-screen .ov-win-layer.is-in .ov-win{animation:ov-fade .22s both}

@media (prefers-reduced-motion:reduce){.al{transition:none}}