/* ==========================================================================
   PLIK Lab · homepage v3 · 页面外壳：图层（L0 / L3 / L4）、header 光板、光的开关、footer、开发工具
   这个文件在「吵版本」对照时也保持开启。
   ========================================================================== */

/* ===================== 图层（见 LAYER-CONTRACT.md）===================== */
.layer { position: fixed; inset: 0; pointer-events: none; }
/* L0 墙：底色 + 两层纸纹（spike 01 的 feTurbulence，强度压低） */
#L0 { z-index: -3; background: var(--wall); }
#L0 .l0-tex {
  position: absolute; inset: 0; opacity: var(--wall-tex-k); mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .34 0 0 0 0 .3 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0044444' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .49 0 0 0 0 .47 0 0 0 .16 -.04'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size: 240px 240px, 900px 900px;
}
:root[data-theme="night"] #L0 .l0-tex { mix-blend-mode: screen; opacity: calc(var(--wall-tex-k) * .35); }
/* L4 色温：只染墙（在 L1 之下），内容的颜色永远是原色。白天 = 灯那一侧极淡的暖；夜里 = 一池冷月光（screen 提亮，不是暗层） */
#L4 { z-index: -2; mix-blend-mode: multiply; transition: opacity var(--theme-dur); }
:root[data-theme="night"] #L4 { mix-blend-mode: screen; }
/* [spike 07] L5 窗光：斜射进来的一块暖色平行四边形光斑，被窗框分成几格，边缘柔和。
   在 L4 之上、L1 之下（z-index −1）：只落在墙上，卡片 / 纸 / 字把它遮住（遮挡关系，不是 mask）；卡片的影子（L2，在 tile 内 z-index −1）画在它上面，
   所以光斑里的影子仍然看得见。默认 screen（在墙上加亮）；P 面板可换 soft-light / normal。
   只改 transform / opacity / CSS 变量：.l5-patch 用 translate + skewX + scale 摆位置和大小，柔边的 blur 放在 #L5 上（不随 scale 变形）。 */
#L5 { z-index: -1; mix-blend-mode: screen; opacity: var(--l5-a); filter: blur(var(--l5-soft)); will-change: opacity; overflow: hidden; }
#L5[data-blend="soft-light"] { mix-blend-mode: soft-light; }
#L5[data-blend="normal"] { mix-blend-mode: normal; }
#L5[data-blend="overlay"] { mix-blend-mode: overlay; }
#L5[data-blend="hard-light"] { mix-blend-mode: hard-light; }
#L5[hidden] { display: none; }
.l5-patch { position: absolute; left: -500px; top: -500px; width: 1000px; height: 1000px; display: grid; transform-origin: 50% 50%; will-change: transform; }
.l5-pane { display: block; background: var(--l5-c); border-radius: 2px; }
:root[data-theme="night"] #L5 { display: none; }
html.theme-anim #L5 { transition: opacity var(--theme-dur) ease; }

/* L3 树影槽位：在内容之上，multiply，不吃鼠标；默认关 */
#L3 { z-index: 50; mix-blend-mode: multiply; overflow: hidden; isolation: isolate; background: #fff; }
#L3[hidden] { display: none; }
.l3host .a3-g { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; mix-blend-mode: multiply; isolation: isolate; }
.l3host .a3-t { position: absolute; inset: 0; background-repeat: repeat; background-position: 0 0; }
.l3host .a3-b { will-change: opacity; }
.l3host .a3-k, .l3host .a3-sun { position: absolute; inset: 0; }
.l3host .a3-k { mix-blend-mode: screen; }
.l3host .a3-sun { mix-blend-mode: multiply; }

/* ===================== Header（v3：第一行，hero 尺寸）=====================
   大号 PLIK 透明片 + 中文名 + 一句 bold statement。PLIK 舞台由 mountPlikHeader 挂进 #plik-head（可替换，见 js/plik-mount.js）。 */
.masthead { position: relative; max-width: calc(var(--maxw) + 2 * var(--pad-x)); margin: 0 auto; padding: 36px var(--pad-x) 0; }
.l4-board {
  position: absolute; z-index: -1; left: -40px; top: -60px; width: 900px; height: 380px; pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 255 255 / calc(.85 * var(--board-glow))), rgb(255 255 255 / 0));
}
:root[data-theme="night"] .l4-board {
  mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgb(255 238 214 / calc(.14 * var(--board-glow))), rgb(170 190 255 / calc(.05 * var(--board-glow))) 55%, rgb(0 0 0 / 0));
}
.mh-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 var(--gap); align-items: end; }   /* [10-19 · E3a] ≥ 900 被 content-wiring.css §1 改成 var(--cols) / var(--col-gap)、顶对齐 */
.mh-brand { min-width: 0; }
.plik-slot { position: relative; flex: 0 0 auto; aspect-ratio: 1000 / 440; }
.plik-slot.hero { width: 100%; max-width: 470px; margin-left: -14px; }
.plik-slot svg { display: block; width: 100%; height: 100%; overflow: visible; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.plik-slot .ht { cursor: pointer; }
.plik-slot.can-drag .ht { cursor: grab; }
.plik-slot svg.grabbing .ht { cursor: grabbing; }
.mh-name { margin-top: 2px; display: grid; gap: 4px; }
.mh-zh { font-family: var(--font-brand-zh); font-weight: 400; font-size: 40px; line-height: 1.1; letter-spacing: .02em; color: var(--ink); }
.mh-slogan { display: grid; font-family: var(--font-brand-en); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.mh-slogan > span { grid-area: 1 / 1; transition: opacity .35s; }
.lb-full { opacity: 0; }
.lb-full b { font-weight: 400; color: var(--ink-3); transition: color .3s; }
.lb-full b.on { color: var(--ink); }
.masthead.flipped .lb-en { opacity: 0; }
.masthead.flipped .lb-full { opacity: 1; }
.mh-say { min-width: 0; }
.statement { display: none; font-family: var(--font-statement, var(--font-text)); font-weight: 700; font-size: var(--fs-statement); line-height: 1.22; letter-spacing: -.01em; color: var(--ink); }
body[data-statement="A"] .statement[data-v="A"], body[data-statement="B"] .statement[data-v="B"] { display: block; }
.mh-lede { margin-top: 18px; max-width: 31em; text-wrap: pretty; font-size: 15px; line-height: 1.8; color: var(--ink-2); }
.mh-lede span { color: var(--ink-3); }
/* 树影只落在 header 一角：外层负责 multiply（乘到墙上），内层负责白底 + 渐隐遮罩 + 树影本体。
   两件事分在两层，是因为 Chrome 里同一个元素同时有 mask 和 mix-blend-mode 时，白底会按普通混合露出来（墙被提亮一块）。 */
.l3-corner-wrap { position: absolute; z-index: 0; left: calc((100% - 100vw) / 2); top: 0; width: calc((100vw - 100%) / 2 + 760px); height: 460px; pointer-events: none; mix-blend-mode: multiply; isolation: isolate; }
.l3-corner { position: absolute; inset: 0; overflow: hidden; isolation: isolate; background: #fff;
  -webkit-mask-image: radial-gradient(110% 100% at 0 0, #000 35%, transparent 78%); mask-image: radial-gradient(110% 100% at 0 0, #000 35%, transparent 78%); }
.l3-corner[hidden] { display: none; }
:root[data-theme="night"] .l3-corner-wrap { display: none; }

/* ---- 光的开关：墙上的实体电灯开关（往下拨 = 夜里）+ 一个很小的时钟（跟随真实时间）---- */
.lb-switch { display: flex; align-items: flex-start; gap: 0; }   /* spike 06：小部件和开关面板用同一套 44px 高的坐标，间距在小部件里 */
.switch-plate {
  --z-rest: 2; position: relative; width: 28px; height: 44px; padding: 0; border: 0; border-radius: 5px; cursor: pointer;
  background: var(--card); box-shadow: var(--sh), inset 0 0 0 .5px var(--edge);
}
.sp-slot { position: absolute; left: 50%; top: 50%; width: 9px; height: 19px; translate: -50% -50%; border-radius: 2.5px; background: rgb(var(--ink-rgb) / .06); box-shadow: inset 0 0 0 .5px rgb(var(--ink-rgb) / .14); }
.sp-lever { position: absolute; left: 1px; right: 1px; top: 1px; height: 9px; border-radius: 2px; background: var(--card); box-shadow: 0 calc(var(--lever-dir, 1) * 1.2px) 1.6px rgb(var(--sh-rgb) / calc(.22 * var(--sh-k))), inset 0 0 0 .5px rgb(var(--ink-rgb) / .16); transition: top .22s var(--ease); }
.switch-plate[aria-checked="true"] .sp-lever { top: 8px; --lever-dir: -1; }
.sp-screw { position: absolute; left: 50%; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: rgb(var(--ink-rgb) / .16); }
.sp-screw-t { top: 4px; } .sp-screw-b { bottom: 4px; }
.switch-plate:hover .sp-slot { box-shadow: inset 0 0 0 .5px rgb(var(--ink-rgb) / .3); }

@media (max-width: 899.98px) {
  .mh-grid { grid-template-columns: 1fr; align-items: start; }
  .plik-slot.hero { max-width: 400px; }
  .mh-say { margin-top: 28px; max-width: 760px; }
}
@media (max-width: 699.98px) {
  .masthead { padding-top: 18px; }
  .plik-slot.hero { max-width: min(300px, 74vw); margin-left: -8px; }
  .mh-zh { font-size: 28px; }
  .mh-slogan { font-size: 11px; }
  .mh-say { margin-top: 22px; }
  .mh-lede { font-size: 14.5px; margin-top: 12px; }
  .l4-board { width: 460px; height: 300px; left: -80px; top: -60px; }
}

/* ===================== Footer：拖开四片，墙上露出全称 ===================== */
.wallfoot { position: relative; max-width: calc(var(--maxw) + 2 * var(--pad-x)); margin: calc(var(--foot-gap) - var(--foot-ink-top)) auto 0; padding: 0 var(--pad-x) 40px; display: grid; justify-items: center; gap: 6px; text-align: center; }
/* [v3 · R37] 最后一张卡底 → 页脚 PLIK 字母墨迹顶 = --foot-gap（96，手机 64）。PLIK 舞台上方自带一段动画留白（字母墨迹离舞台顶 ≈ 舞台宽 × .185：
   舞台 520 宽时 96），所以外边距 = 目标 − 这段留白。舞台宽：≥ 700 固定 520；手机 = 内容宽（100vw − 2 × 16）。 */
:root { --foot-ink-top: 96px; }
@media (max-width: 699.98px) { :root { --foot-ink-top: calc((100vw - 32px) * .19); } }
.wallfoot .plik-slot { width: min(480px, 100%); aspect-ratio: 1000 / 520; }
.wf-hint { font-size: 12.5px; color: var(--ink-3); }
.wf-hint .link-btn { margin-left: 10px; }
.wf-links { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font-size: 12.5px; color: var(--ink-3); }
.wf-links a { color: var(--ink-3); text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: 3px; }
.wf-links a:hover { color: var(--ink); }
@media (max-width: 699.98px) { .wallfoot { padding: 0 16px 90px; } .wf-links { gap: 6px 16px; } }

/* ===================== 开发工具（不在墙上，不被灯照）===================== */
.dev-keys { position: fixed; right: 12px; bottom: 10px; z-index: 60; font: 11px var(--font-mono); color: var(--ink-3); opacity: .7; }
.dev-keys kbd { font: inherit; padding: 0 4px; border: .5px solid var(--hair-2); border-radius: 3px; }
@media (hover: none), (max-width: 699.98px) { .dev-keys { display: none; } }
.dev-panel {
  position: fixed; right: 12px; top: 12px; z-index: 80; width: 300px; max-height: calc(100vh - 24px); overflow: auto;
  background: #fff; color: #1E2430; border-radius: 10px; font: 12.5px/1.4 var(--font-text);
  box-shadow: 0 0 0 .5px rgb(30 36 48 / .14), 0 18px 50px rgb(0 0 0 / .18);
}
.dev-panel[hidden] { display: none; }
.dp-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #fff; border-bottom: 1px solid rgb(30 36 48 / .1); }
.dp-head b { font-weight: 600; } .dp-head span { flex: 1; font: 11px var(--font-mono); color: rgb(30 36 48 / .5); }
.dp-head button, .dp-body button { font: 11.5px var(--font-text); border: .5px solid rgb(30 36 48 / .25); background: #fff; border-radius: 999px; padding: 3px 9px; cursor: pointer; color: #1E2430; }
.dp-head button:hover, .dp-body button:hover { border-color: #1E2430; }
.dp-body { padding: 4px 12px 14px; }
.dp-body h5 { margin: 14px 0 4px; font: 600 10.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgb(30 36 48 / .5); }
.dp-row { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 4px 0; }
.dp-row output { font: 11px var(--font-mono); color: rgb(30 36 48 / .65); }
.dp-row input[type=range] { grid-column: 1 / -1; width: 100%; margin: 3px 0 0; accent-color: #1E2430; }
.dp-row small { grid-column: 1 / -1; color: rgb(30 36 48 / .5); font-size: 11px; }
.dp-check { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; }
.dp-check input { margin-top: 2px; accent-color: #1E2430; }
.dp-seg { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px 0; }
.dp-seg button[aria-pressed="true"] { background: #1E2430; color: #fff; border-color: #1E2430; }
@media (max-width: 699.98px) { .dev-panel { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 58vh; } }

.toast { position: fixed; left: 50%; bottom: 28px; translate: -50% 12px; z-index: 90; padding: 8px 14px; border-radius: 999px; background: #1E2430; color: #fff; font: 13px var(--font-text); opacity: 0; pointer-events: none; transition: opacity .25s, translate .25s; max-width: calc(100vw - 32px); text-align: center; }
.toast.on { opacity: 1; translate: -50% 0; }

/* ===================== D：分层 debug（各层色块 + 名字 + z）===================== */
body.dev-debug { --c-contact: 235 30 90; --c-key: 20 110 255; --c-amb: 0 175 110; --boost: 2.4; }
body.dev-debug #L0 { background: repeating-linear-gradient(135deg, rgb(120 120 120 / .10) 0 2px, transparent 2px 14px), var(--wall); }
body.dev-debug #L4 { background: rgb(255 150 30 / .10) !important; mix-blend-mode: normal; }
body.dev-debug #L3 { outline: 3px dashed rgb(0 160 90 / .7); outline-offset: -3px; }
/* [spike 07] D：L5 窗光染成橙色、不混合、不柔边，看得清它的四边形和窗格 */
body.dev-debug #L5 { mix-blend-mode: normal !important; filter: none; opacity: 1; outline: 3px dashed rgb(255 122 0 / .7); outline-offset: -3px; }
body.dev-debug .l5-pane { background: rgb(255 122 0 / .28); outline: 1.5px dashed rgb(255 122 0 / .9); }
body.dev-debug .tile::after, body.dev-debug .plik-slot::after, body.dev-debug .obj::after {
  content: ""; position: absolute; inset: 0; z-index: 30; pointer-events: none; outline: 1.5px dashed rgb(150 60 220 / .85); background: rgb(150 60 220 / .05);
  translate: none !important; filter: none !important;
}
body.dev-debug .tile .face { outline: 1px solid rgb(150 60 220 / .3); }
.dbg-tag { position: absolute; z-index: 40; left: 6px; top: 6px; pointer-events: none; font: 600 10.5px/1.35 var(--font-mono); color: #fff; background: rgb(150 60 220 / .92); padding: 3px 7px; border-radius: 4px; white-space: pre; rotate: calc(var(--tilt, 0) * -1deg); }
.dbg-tag.l0 { position: fixed; left: 12px; top: auto; bottom: 34px; background: rgb(90 90 90 / .9); }
.dbg-tag.l4 { position: fixed; left: 12px; top: auto; bottom: 58px; background: rgb(220 120 20 / .92); }
.dbg-tag.l3 { position: fixed; left: 12px; top: auto; bottom: 82px; background: rgb(0 150 85 / .92); }
.dbg-tag.l5 { position: fixed; left: 12px; top: auto; bottom: 106px; background: rgb(235 110 0 / .92); }
.dev-legend { position: fixed; left: 12px; top: 12px; z-index: 85; width: 340px; padding: 10px 12px; border-radius: 10px; background: rgb(255 255 255 / .96); color: #1E2430; font: 11.5px/1.5 var(--font-text); box-shadow: 0 0 0 .5px rgb(30 36 48 / .16), 0 12px 30px rgb(0 0 0 / .14); }
.dev-legend[hidden] { display: none; }
.dev-legend table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.dev-legend td { padding: 3px 6px 3px 0; border-bottom: 1px solid rgb(30 36 48 / .08); vertical-align: top; }
.dev-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
@media (max-width: 699.98px) { .dev-legend { left: 8px; right: 8px; width: auto; font-size: 10.5px; } }

/* PLIK 舞台内部的 debug 标注（spike 03 的 layer-dbg）只在 D 打开时显示 */
.plik-slot .layer-dbg { display: none; }
body.dev-debug .plik-slot .layer-dbg { display: inline; }

/* v3：D 里卡片唯一的影子元素染成 key 蓝（透明卡染成绿），放大 2.4 倍 */
body.dev-debug { --c-film: 0 175 110; }
body.dev-debug .tile > .sh { outline: 1px dashed rgb(20 110 255 / .8); }

/* ===================== spike 03b 的 header / footer 放进 v3 =====================
   模块自己画 PLIK + 中文名 + slogan；这里只管它在 v3 网格里的尺寸和间距。中文 slogan 和右边的 statement 意思重复，藏起来，只留英文那行。 */
.mh-brand .plik-hd { --plik-pad-y: 0px; --plik-ink: var(--ink); --plik-ink-2: var(--ink-2); }
.mh-brand .plik-hd__mark { max-width: 470px; }
.mh-brand .plik-hd__name { font-size: 40px; margin: 4px 0 .3em; }
.mh-brand .plik-hd__slogan { display: none; }
.mh-brand .plik-hd__slogan-en { font-family: var(--font-brand-en); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.wf-plik { width: min(520px, 100%); }
@media (max-width: 699.98px) { .mh-brand .plik-hd__mark { max-width: min(256px, 64vw); } .mh-brand .plik-hd__name { font-size: 28px; } .mh-brand .plik-hd__slogan-en { font-size: 11px; } }
/* [perf] CLS：#plik-head 在 js/plik-header.js 下载并挂载 PLIK 之前是空的，挂载那一刻下面的句子整体下移约 200px（手机 4G 实测 CLS 0.219）。
   这里把挂载后的高度预留出来：mark 宽 × 0.5357（SVG 比例），数值取自挂载后的实测，所以挂载前后高度相同，画面不变。
   [10-19 · E3a] 模块里的中文名 / 英文 tagline 都不显示了，预留只剩 PLIK 舞台本身（< 600 的值在 mobile-skin.css §2）。
   两列（≥ 900px）时右栏按字母顶 / 底由 js 对齐，挂载前右栏在顶上，挂载后才移到位（只动首屏 header 里的字，不推下面的卡片：右栏比左栏矮）。 */
@media (max-width: 699.98px) { .mh-brand { min-height: calc(min(256px, 64vw) * .5357 + 6px); } }
@media (min-width: 700px) { .mh-brand { min-height: calc(470px * var(--hs) * .5357 + 6px); } }   /* [v3 · R34] 跟着 PLIK 实际尺寸算（舞台宽 470 × --hs），不写死旧尺寸 */