/* 矿野 · 官网首页「纪念碑」
   devplan: devplan/done/landing-homepage-monument.md（视觉 SSOT：§二 样稿 v10）

   🔴 字体：本文件不引整包 fonts.css —— 构建期 scripts/extract_home_faces.py 把用到的拉丁字体声明
      追加到 dist/home.css 末尾（源文件 ≠ dist，别拿本文件对线上行号以外的内容）；中文展示字的声明在
      home-cjk.css（首页用字子集，scripts/build_home_cjk_font.py 生成），只在中文时加载。
      · Noto Sans SC 只有 900：凡是 --cjk 的地方必须 font-weight:900；中文小字一律 --cjk-sys。
      · JetBrains Mono 只有 400 / 500：等宽里的粗体一律显式 500。
      · Bricolage 300..800 可变；Archivo 只有 900 · 宽 125%（海报巨字）。
   🔴 中文规则一律写成 `X:lang(zh)`（匹配元素自身的语言），不写 html[lang="zh-CN"] 精确匹配：
      英文模式里的中文片段自带 lang="zh-CN"，中文模式由 lang-boot.js / home.js 改 <html lang>。
   🔴 旧浏览器兜底（基线同 mineral.css：微信内置浏览器 / 老 Android webview）：svh / cqw /
      overflow-x:clip 一律「同一声明前先写一行旧值」，不单开 @supports；overflow-x:hidden 只放 body
      （放在显影墙其他祖先上会让吸顶失效）。 */

:root{
  color-scheme:dark;
  --ink:#090909;
  --ink-2:#121211;
  --bone:#EEEBE5;
  --stone:#8A867E;
  --dust:#4A4843;
  --line:#26251F;
  --cinnabar:#D4432C;
  --grot:'Bricolage Grotesque',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --poster:'Archivo','Helvetica Neue',Arial,sans-serif;
  /* 只配 font-weight:900（巨字 / 海报字 / 矿名） */
  --cjk:'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  /* 中文小字：正文、等宽、记录行、海报小字 */
  --cjk-sys:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC','Source Han Sans SC',sans-serif;
  --gut:clamp(16px,3.2vw,48px);
}
*{box-sizing:border-box}
html{background:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--grot);font-size:16px;line-height:1.55;
  overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased}
body:lang(zh){font-family:var(--grot),var(--cjk-sys)}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--cinnabar);color:var(--ink)}
/* 焦点沿用 /m/ 的规则：2px 实线、偏移 3px，任何控件都不去掉 outline */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--cinnabar);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 中文首帧：lang-boot.js 加 i18n-pending，home.js 应用字典后摘掉（3 秒兜底还原英文）。
   随语言变的文字先藏住，图片不藏；首屏入场动画等文字显示后才开始。 */
html.i18n-pending [data-i]{visibility:hidden}
html.i18n-pending .rise{opacity:0}

.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.mono:lang(zh){font-family:var(--mono),var(--cjk-sys)}
.slab{font-family:var(--grot);font-weight:800;font-stretch:75%;line-height:.84;letter-spacing:-.025em;text-transform:uppercase;margin:0}
.slab:lang(zh){font-family:var(--cjk);font-weight:900;letter-spacing:-.04em;line-height:.98;font-stretch:100%}
.red{color:var(--cinnabar)}
.nw{white-space:nowrap}   /* 中文展示大字：短语整体换行，不在词中间断成「永不公|开」（只由 home.js 的中文字典使用） */
@media (max-width:289px){.nw{white-space:normal}}   /* 280 宽（折叠屏外屏）「在别人手里。」整句放不下会撑宽视口（实测临界约 281px）：让位给正常折行 */
.body{font-size:clamp(16px,1.25vw,19px);line-height:1.6;color:#B9B5AD;max-width:34em;margin:0;font-weight:350}
.body:lang(zh){font-family:var(--cjk-sys);font-weight:400;letter-spacing:.02em;line-height:1.8}

/* 化学式：一律真 <sub>/<sup>（自托管字体不覆盖 U+2084–2089），且永不大写化 */
.fml{text-transform:none;letter-spacing:normal;white-space:nowrap}
.fml sub,.fml sup{font-size:.72em;line-height:0;position:relative;vertical-align:baseline}
.fml sub{top:.24em}
.fml sup{top:-.5em}

/* ── 顶栏 · 博物馆导视 ── */
.bar{position:-webkit-sticky;position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px var(--gut);background:var(--ink);border-bottom:1px solid var(--line)}
.bar .brand{font-family:var(--grot);font-weight:800;font-stretch:75%;font-size:18px;letter-spacing:.01em;text-transform:uppercase;color:var(--bone);text-decoration:none;flex:none}
.bar .mid{flex:1;min-width:0;display:flex;justify-content:center;align-items:center;gap:10px}
.wf-dot{flex:none;width:6px;height:6px;background:var(--bone);transition:background .4s}
.wf-dot.closing{background:var(--cinnabar);animation:wfblink 1.2s steps(2,end) infinite}
@keyframes wfblink{50%{opacity:.15}}
#wf{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .22s}
#wf.swap{opacity:0}
#wf b{font-weight:500;color:var(--bone)}
#wf.closing b{color:var(--cinnabar)}
/* 陆游落款：对比度 ≥4.5:1（--stone 在 --ink 上 5.5:1），字号随 .mono 11px */
.wf-src{margin-left:14px;color:var(--stone);letter-spacing:.24em}
.lang{position:relative;flex:none;font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--bone);background:none;border:1px solid var(--dust);
  padding:8px 10px;border-radius:2px;cursor:pointer;visibility:hidden}
/* home.js 给语言键接好线后才加 lang-live：无 JS / 脚本失败时不留一个点了没反应的键（visibility 保留占位，不挪版面） */
.lang-live .lang{visibility:visible}
.lang b{color:var(--cinnabar);font-weight:500}
/* 点击区扩到 ≥44pt：::after 的偏移从 padding 盒算起（27px 高），上下各 9px = 45px */
.lang::after{content:'';position:absolute;top:-9px;bottom:-9px;left:-4px;right:-4px}
@media (hover:hover){.lang:hover{border-color:var(--bone)}}
@media (max-width:720px){
  .bar{gap:10px}
  .bar .brand{font-size:15px}
  .bar .mid{justify-content:flex-start;letter-spacing:.06em;gap:7px}
  .wf-dot{width:5px;height:5px}
  .wf-src{margin-left:10px;letter-spacing:.12em}
}

/* ── 首屏 ── */
.hero{position:relative;min-height:100vh;min-height:min(100svh,980px);display:grid;grid-template-columns:1fr;align-items:end;
  padding:0 var(--gut) clamp(28px,4vw,56px);isolation:isolate}
.hero-photo{position:absolute;top:0;right:0;bottom:0;width:min(56vw,1080px);z-index:-1;overflow:hidden;background:#000}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:contrast(1.06)}
.hero h1{font-size:clamp(64px,13.8vw,238px);padding-top:clamp(90px,12vw,170px)}
.hero h1 .n{display:block;font-size:1.62em;letter-spacing:-.045em;line-height:.8}
.hero h1 .l{display:block}
.hero h1:lang(zh){font-size:clamp(58px,11.5vw,200px)}
.hero h1 .n:lang(zh){font-family:var(--grot);font-weight:800;font-stretch:75%;letter-spacing:-.045em;line-height:.8}
.hero-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;margin-top:clamp(24px,3vw,44px)}
.label{border-top:1px solid var(--bone);padding-top:10px;min-width:220px;display:grid;gap:3px}
.label .t{font:800 22px/1 var(--grot);font-stretch:75%;text-transform:uppercase;letter-spacing:.01em}
.label .t:lang(zh){font-family:var(--cjk);font-weight:900}
.label .f{font:400 13px/1.4 var(--mono);color:var(--bone)}
.label .f:lang(zh){font-family:var(--mono),var(--cjk-sys)}
/* 桌面布局下展签落在照片（白云母）上：加深色文字阴影托住（老板 2026-09-30 在三版对比里选定，devplan §五 ⑨） */
@media (min-width:821px){.label{text-shadow:0 0 6px rgba(0,0,0,.95),0 0 14px rgba(0,0,0,.85),0 1px 2px #000}}
@media (max-width:820px){
  .hero{align-items:start}
  .hero-photo{position:relative;width:calc(100% + 2*var(--gut));margin:0 calc(-1*var(--gut));height:58vh;height:58svh;min-height:360px}
  .hero h1{padding-top:0;margin-top:-.62em}
  .hero-foot{grid-template-columns:1fr}
  .label{min-width:0}
}

section{position:relative}
.sec{padding:clamp(80px,11vw,168px) var(--gut)}
.eyebrow{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:12px;margin-bottom:clamp(28px,4vw,56px)}

/* ── 壹 · 图鉴：显影墙 ──
   默认是静态态：只有眉题与标题，不吸顶、不占 360vh、不放拼图（JS 模式下拼图会与锡石主图抢带宽）。
   wall-live 由 lang-boot.js 在首帧前按能力（IntersectionObserver）乐观加上，让刷新 / 后退时的滚动恢复
   按最终高度算；home.js 建墙失败（数据缺失 / 模块抛错）或根本没跑起来时摘掉 ⇒ 无 JS / 缺能力 /
   失败一律落回静态态（只有失败情形会跳一次）。
   reduced-motion 在 CSS 层直接降级：格子区照常显示，但不吸顶、40 个示例格全亮、不显示提示与刚亮的矿名。 */
.dev{background:var(--ink);border-top:1px solid var(--line)}
.dev .stick{position:relative}
.dev .hud{position:relative;padding:clamp(80px,11vw,168px) var(--gut);display:grid;gap:clamp(20px,3vw,40px)}
.dev .row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.dev .mos,.dev .bottom,.dev .dev-hint{display:none}
.strip-t{display:inline;background:var(--ink);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.02em .12em .06em}
.dev h2{font-size:clamp(44px,7.6vw,136px);line-height:1.02}
.dev h2 .strip-t{display:inline-block;line-height:.86;padding:.06em .12em .04em;margin-bottom:.04em}

.wall-live .dev .stick{height:100vh;height:100svh;overflow:hidden}
.wall-live .dev .hud{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;pointer-events:none;
  padding:calc(76px + env(safe-area-inset-top,0px)) var(--gut) clamp(24px,4vh,48px);grid-template-rows:auto 1fr auto;gap:0}
.wall-live .dev .hud-title{padding-top:clamp(12px,2vh,28px)}
.wall-live .dev .mos{display:grid}
.wall-live .dev .bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.mos{position:absolute;top:0;left:0}   /* 格缝由 home.js 按 TILE_GAP 设（与格子尺寸算法同一个常量） */
.mos i{display:block;background-color:#161614;filter:grayscale(1) brightness(.3) contrast(1.15);transition:filter .8s cubic-bezier(.2,.7,.1,1),box-shadow .8s}
.mos.loaded i{background-image:var(--mosaic);background-size:var(--mosaic-size)}
.mos.loaded i.pad{background-image:none}
.mos i.on{filter:none;box-shadow:0 0 0 1px rgba(238,235,229,.55);position:relative;z-index:1}
.mos i.now{box-shadow:0 0 0 2px var(--cinnabar),0 0 40px 6px rgba(212,67,44,.35);z-index:2}
.now-name{font-size:clamp(40px,8.4vw,150px);max-width:100%;line-height:1}
.now-name .strip-t{display:inline-block;line-height:.86;padding:.06em .12em .04em}
/* 墙上白色大字的衬底半透明：被盖住的格子（常见的是刚亮那一格的红框压在矿名底下）从字后透出来（老板 2026-09-30 拍，devplan §五 ⑩）。
   只放白色大字：透过亮格实测最差 6.2:1（大字门槛 3:1）。红字、计数（「/40」是暗灰）与小字透过去会掉到 1.6–2.3:1，保持不透明。 */
.wall-live .dev .hud-title .strip-t:not(.red),.wall-live .dev .now-name .strip-t{background:rgba(9,9,9,.6)}
/* 带衬底的小字（当前矿名行、计数说明）会折行（英文计数说明在 360–390 宽必折）：行高须 ≥ 字形框 + 上下 4px 衬底（11px 的 JetBrains Mono 约 22.5px），
   否则后一行的衬底盖住前一行；clone 让每行各自带左右衬底。 */
.now-meta{display:block;margin-top:6px;text-transform:none;letter-spacing:.06em;line-height:2.2}
.now-meta>span{background:var(--ink);padding:4px 6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.tally{text-align:right;font:800 clamp(56px,8vw,150px)/1 var(--grot);font-stretch:75%;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.tally .of{color:#63605A}   /* 大字对比度 ≥3:1（--dust 只有 2.2:1） */
.tally>.strip-t{display:inline-block;line-height:.86;padding:.06em .12em .04em}
.tally small{display:block;margin-top:4px;font-weight:400;letter-spacing:.14em;line-height:2.2}   /* .tally 的 800 / 行高 1 别传下来：JetBrains Mono 没有 800 */
.tally small span{background:var(--ink);padding:4px 6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (prefers-reduced-motion:no-preference){
  .wall-live .dev{height:360vh}
  .wall-live .dev .stick{position:-webkit-sticky;position:sticky;top:0}
  .wall-live .dev .dev-hint{display:inline}
}
@media (prefers-reduced-motion:reduce){
  .wall-live .dev .stick{height:100vh;height:min(100svh,960px)}
  .wall-live .mos i.ex{filter:none;box-shadow:0 0 0 1px rgba(238,235,229,.55);position:relative;z-index:1}
  .wall-live .dev .now-name{visibility:hidden}
}
/* 吸顶区只有一屏高，墙上三处大字（标题、刚亮的矿名、计数）原本只按宽度缩放：宽而矮的视口（手机横屏、很矮的桌面窗口）
   HUD 叠起来比一屏高，底部计数被 overflow:hidden 静默裁掉（PR #3006 审查实测 667×375、1440×450、1920×520）。
   再按视口高度封顶；常见视口（1440×900、1920×955、手机竖屏）封顶值大于原尺寸，不变。 */
.wall-live .dev h2{font-size:min(clamp(44px,7.6vw,136px),17vh);font-size:min(clamp(44px,7.6vw,136px),17svh)}
.wall-live .dev .now-name{font-size:min(clamp(40px,8.4vw,150px),17vh);font-size:min(clamp(40px,8.4vw,150px),17svh)}
.wall-live .dev .tally{font-size:min(clamp(56px,8vw,150px),17vh);font-size:min(clamp(56px,8vw,150px),17svh)}
@media (max-width:720px){
  .wall-live .dev .hud{padding-top:calc(66px + env(safe-area-inset-top,0px))}
}
/* 矿名与计数只在竖屏上下排；手机横屏仍左右排，上下排叠不进一屏高 */
@media (max-width:720px) and (orientation:portrait){
  .wall-live .dev .bottom{flex-direction:column;align-items:flex-start}
  .tally{text-align:left}
}
@media (max-width:720px) and (prefers-reduced-motion:no-preference){
  .wall-live .dev{height:300vh}
}

/* ── 贰 · 标本柜 ── */
.cabinet{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);min-height:92vh;min-height:92svh;background:var(--ink-2)}
.cabinet .ph{position:relative;overflow:hidden;min-height:420px}
.cabinet .ph img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.cabinet .rec{padding:clamp(56px,7vw,112px) var(--gut);display:flex;flex-direction:column;justify-content:center;gap:28px}
.cabinet .eyebrow{margin-bottom:0}
.cabinet h2{font-size:clamp(48px,6.4vw,118px)}
.cabinet .name{font:800 clamp(34px,3.6vw,60px)/.9 var(--grot);font-stretch:75%;text-transform:uppercase;letter-spacing:-.01em}
.cabinet .name:lang(zh){font-family:var(--cjk);font-weight:900}
dl.rows{margin:18px 0 0;display:grid;grid-template-columns:max-content 1fr;border-top:1px solid var(--line)}
dl.rows dt,dl.rows dd{margin:0;padding:11px 0;border-bottom:1px solid var(--line);font:400 13px/1.45 var(--mono)}
dl.rows dt:lang(zh),dl.rows dd:lang(zh){font-family:var(--mono),var(--cjk-sys)}
dl.rows dt{color:var(--stone);letter-spacing:.12em;text-transform:uppercase;padding-right:28px;font-size:11px;padding-top:13px}
dl.rows dd{color:var(--bone)}
.redact{display:inline-block;width:5.2em;height:.95em;background:var(--bone);vertical-align:-2px;margin-right:10px}
dl.rows dd.priv{color:#E25A42}   /* 13px 小字：--cinnabar 在 --ink-2 上只有 4.1:1，提亮到 5.2:1 */
@media (max-width:900px){.cabinet{grid-template-columns:1fr}.cabinet .ph{min-height:62vh;min-height:62svh}}

/* ── 叁 · 画像：三联告示海报 ──
   巨字字号 = 海报内宽 / 系数（样稿按「词长 × 系数」算：Trigonal 7.2 · Feb. 3.6 · USA 2.85；中文一律 2.25）。
   cqw 前面那一行是不认容器单位的旧引擎的 vw 近似（偏小，宁可小不溢出）。
   🔴 系数写字面值、不走 var()：带 var() 的声明在解析期一律算有效，不认 cqw 的引擎要到算值时才判无效，
      此时退回的是继承值（16px）而不是上一行的 vw 兜底。 */
.portrait .grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end}
.portrait h2{font-size:clamp(48px,7.6vw,140px)}
.tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,30px);margin-top:clamp(64px,7vw,110px);align-items:start}
.pv{position:relative;padding:clamp(14px,1.4vw,20px);transform:rotate(var(--rot));box-shadow:0 34px 60px -30px #000;container-type:inline-size;transition:transform .35s}
.pv.p1{--rot:-1.6deg}
.pv.p2{--rot:1.2deg;margin-top:clamp(40px,6vw,100px)}
.pv.p3{--rot:-.8deg}
.pv.k{background:#171716;color:var(--bone);box-shadow:0 0 0 1px #3A3832,0 34px 60px -30px #000}
.pv.rd{background:var(--cinnabar);color:#000}   /* 红底小字对比度：纯黑 4.6:1（墨色只有 4.4:1） */
.pv.wt{background:#F2EFE9;color:var(--ink)}
.px{font-family:var(--poster);font-stretch:125%;font-weight:900;text-transform:uppercase;letter-spacing:-.035em;line-height:.84;margin:0}
.px:lang(zh){font-family:var(--cjk);font-weight:900;letter-spacing:-.05em;line-height:.98;font-stretch:100%}
.pm{font-family:var(--mono);font-weight:500;font-size:11.5px;line-height:1.45;letter-spacing:.02em}
.pm:lang(zh){font-family:var(--mono),var(--cjk-sys)}
.pm.up{text-transform:uppercase;letter-spacing:.08em}
.pv .hd{display:flex;justify-content:space-between;gap:8px;border-bottom:2px solid currentColor;padding-bottom:7px}
.pv .big{margin:10px 0 12px;white-space:nowrap}
.p1 .big{font-size:calc(25vw / 7.2);font-size:min(calc(100cqw / 7.2),200px)}
.p2 .big{font-size:calc(25vw / 3.6);font-size:min(calc(100cqw / 3.6),200px)}
.p3 .big{font-size:calc(25vw / 2.85);font-size:min(calc(100cqw / 2.85),200px)}
.pv .big:lang(zh){font-size:calc(25vw / 2.25);font-size:min(calc(100cqw / 2.25),200px)}
.pv .ph{border:2px solid currentColor;aspect-ratio:4/3.1;overflow:hidden;background:#111}
.pv .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.1,1)}
.p1 .ph img{object-position:52% 42%}
.p2 .ph img{object-position:46% 48%}
.p3 .ph img{object-position:62% 50%}
.pv .cnt{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-top:2px solid currentColor;margin-top:12px;padding-top:8px}
.pv .cnt .px{font-size:min(5.5vw,110px);font-size:min(22cqw,110px);line-height:.8}
.pv .cnt .px:lang(zh){line-height:.98}
.pv.k .cnt .px{color:var(--cinnabar)}
.pv .cnt small{font-family:var(--poster);font-stretch:125%;font-weight:900;font-size:.4em;letter-spacing:-.02em}
.pv .cnt small:lang(zh){font-family:var(--cjk)}
.pv .rows{margin-top:10px;display:grid;gap:5px}
.pv .rows>div{display:grid;grid-template-columns:12ch minmax(0,1fr);gap:8px}
.pv .rows .kk{text-transform:uppercase;letter-spacing:.08em;opacity:.7}
.pv.rd .rows .kk{opacity:1}
.pv .mb{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;align-items:end;height:30px;margin-top:4px}
.pv .mb i{display:block;background:currentColor;height:calc(var(--v) * 100%);min-height:2px;opacity:.9}
.pv .mb i.hi{background:#F2EFE9;opacity:1;box-shadow:0 0 0 1.5px var(--ink)}
.pv .ml{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;margin-top:3px}
.pv .ml span{font:500 8.5px/1 var(--mono);text-align:center}
.tri-cap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:34px}
@media (max-width:860px){
  .portrait .grid2{grid-template-columns:1fr}
  .tri{grid-template-columns:1fr;gap:28px}
  .pv.p2{margin-top:0}
  .p1 .big{font-size:calc(80vw / 7.2);font-size:min(calc(100cqw / 7.2),200px)}
  .p2 .big{font-size:calc(80vw / 3.6);font-size:min(calc(100cqw / 3.6),200px)}
  .p3 .big{font-size:calc(80vw / 2.85);font-size:min(calc(100cqw / 2.85),200px)}
  .pv .big:lang(zh){font-size:calc(80vw / 2.25);font-size:min(calc(100cqw / 2.25),200px)}
  .pv .cnt .px{font-size:min(17vw,110px);font-size:min(22cqw,110px)}
}

/* ── 肆 · 同好：WANTED 海报 + 可撕纸条 ── */
.people{background:var(--ink-2)}
.wanted{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:center}
.wposter{justify-self:center;width:100%;max-width:540px;background:var(--cinnabar);color:#000;padding:clamp(20px,2.6vw,34px) clamp(20px,2.6vw,34px) 0;
  transform:rotate(1.6deg);box-shadow:0 36px 64px -30px #000;container-type:inline-size;transition:transform .35s}
.wposter .wt{line-height:.8;font-size:min(calc(28vw / 5.6),86px);font-size:min(calc(100cqw / 5.6),170px)}
.wposter .wt:lang(zh){line-height:.98;font-size:min(calc(28vw / 2.6),180px);font-size:min(calc(100cqw / 2.6),210px)}
.wposter img{display:block;margin:18px 0;width:100%;height:auto;border:2px solid var(--ink)}
.wrow{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;border-top:2px solid var(--ink);padding-top:10px;align-items:baseline}
.wrow-lead{margin-top:10px}
.wrow .wn{line-height:.95;font-size:28px;font-size:min(calc(100cqw / 9),40px)}
.wrow .wn:lang(zh){line-height:.98}
.tabs{display:flex;border-top:1.5px dashed var(--ink);margin:14px calc(-1*clamp(20px,2.6vw,34px)) 0}
.tab{flex:1 1 0;min-width:0;height:clamp(96px,9vw,118px);background:none;border:0;border-right:1.5px dashed var(--ink);padding:0;cursor:pointer;
  display:grid;place-items:center;transform-origin:50% 0;color:inherit;transition:background .15s}
.tab:last-child{border-right:0}
.tab span{writing-mode:vertical-rl;transform:rotate(180deg);font:500 10.5px/1 var(--mono);letter-spacing:.08em;white-space:nowrap;overflow:hidden;max-height:92%}
.tab:focus-visible{background:rgba(9,9,9,.08);outline:2px solid var(--ink);outline-offset:-4px}
.tab.torn{animation:tear .75s cubic-bezier(.4,0,.6,1) forwards;pointer-events:none}
.tab.gone{visibility:hidden}
@keyframes tear{30%{transform:rotate(-7deg) translateY(4px)}100%{transform:rotate(14deg) translate(10px,90px);opacity:0}}
.wtext{display:grid;gap:clamp(20px,2vw,30px)}
.wtext h2{font-size:clamp(46px,6.2vw,112px)}
.wtext .hint{color:var(--stone)}
/* 纸条要靠 home.js 撕：它接好线（tabs-live）才提示「撕一张」—— 无 JS、脚本没跑起来都不提示 */
.tear-hint{display:none}
.tabs-live .tear-hint{display:block}
@media (max-width:860px){
  .wanted{grid-template-columns:1fr}
  .wposter{transform:rotate(1deg)}
  .wposter .wt{font-size:min(calc(75vw / 5.6),86px);font-size:min(calc(100cqw / 5.6),170px)}
  .wposter .wt:lang(zh){font-size:min(calc(75vw / 2.6),180px);font-size:min(calc(100cqw / 2.6),210px)}
}

/* ── 伍 · 卡片 ── */
.cards h2{font-size:clamp(46px,7.6vw,138px);max-width:13ch}
.strip{display:flex;gap:clamp(12px,1.6vw,24px);overflow-x:auto;padding:clamp(40px,5vw,72px) var(--gut) 18px;margin:0 calc(-1*var(--gut));
  -webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);scrollbar-width:thin;scrollbar-color:var(--dust) transparent}
/* scroll-padding 不能省：吸附按滚动容器边缘对齐、不算 padding，否则首张卡被吸到贴边、左侧切掉一截 */
.strip:focus-visible{outline-offset:-2px}
.strip figure{margin:0;flex:0 0 auto;width:clamp(210px,21vw,320px);scroll-snap-align:start}
.strip img{width:100%;height:auto;background:#161614}
.strip figcaption{margin-top:10px;display:flex;justify-content:space-between;gap:8px}

/* ── 陆 · 规矩 ── */
.rules{padding-top:0}
.rules .row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:end;border-top:1px solid var(--line);padding:clamp(28px,3.4vw,48px) 0}
.rules .row:last-child{border-bottom:1px solid var(--line)}
.rules .slab{font-size:clamp(40px,6.4vw,116px)}
@media (max-width:820px){.rules .row{grid-template-columns:1fr}}

/* ── 柒 · 未完成 ── */
.unfinished{padding-top:0}
.community{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end}
.community h2{font-size:clamp(44px,6.8vw,124px)}
.btn{display:inline-flex;align-items:center;gap:12px;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--bone);
  padding:16px 20px;text-decoration:none;border-radius:2px;margin-top:28px}
.btn:lang(zh){font-family:var(--mono),var(--cjk-sys)}
.btn:focus-visible{background:var(--cinnabar)}
@media (hover:hover){.btn:hover{background:var(--cinnabar)}}
@media (max-width:820px){.community{grid-template-columns:1fr}}

/* ── 结尾 · 页脚 ── */
.cta{padding:clamp(100px,14vw,220px) var(--gut) clamp(60px,8vw,120px);border-top:1px solid var(--line)}
.cta h2{font-size:clamp(56px,12.6vw,232px)}
.cta .sub{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(28px,3vw,44px)}
footer{padding:28px var(--gut) 40px;border-top:1px solid var(--line);display:grid;gap:18px}
footer .links{display:flex;flex-wrap:wrap;gap:10px 24px}
footer .links a{text-decoration:none}
@media (hover:hover){footer .links a:hover{color:var(--bone)}}
/* 照片署名：字号 ≥11px、对比度 ≥4.5:1（--stone 在 --ink 上 5.5:1） */
footer .credits{margin:0;font:400 11px/1.6 var(--mono);color:var(--stone);letter-spacing:.04em;max-width:120ch}
footer .credits:lang(zh){font-family:var(--mono),var(--cjk-sys)}
footer .credits a{color:var(--bone)}

/* ── 动效与 hover：只在允许动效时开 ── */
@media (prefers-reduced-motion:no-preference){
  html:not(.i18n-pending) .rise{animation:rise .9s cubic-bezier(.2,.7,.1,1) both}
  .rise.d1{animation-delay:.08s}
  .rise.d2{animation-delay:.16s}
  .rise.d3{animation-delay:.24s}
  @keyframes rise{from{transform:translateY(.28em);opacity:.001}to{transform:none;opacity:1}}
  .hero-photo img{animation:settle 2.4s cubic-bezier(.2,.7,.1,1) both}
  @keyframes settle{from{transform:scale(1.06)}to{transform:none}}
}
@media (prefers-reduced-motion:reduce){
  .wf-dot.closing{animation:none}
  .tab.torn{animation:none;visibility:hidden}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .pv:hover{transform:rotate(0) translateY(-4px)}
  .pv:hover .ph img{transform:scale(1.06)}
  .wposter:hover{transform:rotate(.4deg)}
  .tab:hover{background:rgba(9,9,9,.08)}
}

/* ══ 以下 21 条字体声明由 scripts/extract_home_faces.py 在**构建期**从两个本域字体包
   google-fonts-v22-v40-v9-v24 · google-fonts-home-v25-v9-v24
   抽出，不要手改这一段；改字体请改包本身。选取规则与 Bricolage 去重的理由写在那个脚本的模块注释里。
   ⚠️ 这段话刻意不写出那个 at-rule 的名字，免得把 dist/home.css 里的计数顶高一条。 ══ */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 125%;
  font-display: swap;
  src: url(/assets/home/fonts/google-fonts-home-v25-v9-v24/k3k6o8UDI-1M0wlSV9XAw6lQkqWY8Q8EsJaRE-NWIDdgffTTnTRZ-BdpF0s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 125%;
  font-display: swap;
  src: url(/assets/home/fonts/google-fonts-home-v25-v9-v24/k3k6o8UDI-1M0wlSV9XAw6lQkqWY8Q8EsJaRE-NWIDdgffTTnTRZ-RdpF0s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 125%;
  font-display: swap;
  src: url(/assets/home/fonts/google-fonts-home-v25-v9-v24/k3k6o8UDI-1M0wlSV9XAw6lQkqWY8Q8EsJaRE-NWIDdgffTTnTRZ9xdp.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300 499;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(/assets/home/fonts/google-fonts-home-v25-v9-v24/3y996as8bTXq_nANBjzKo3IeZx8z6up5L-eNGe6N.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300 499;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(/assets/home/fonts/google-fonts-home-v25-v9-v24/3y996as8bTXq_nANBjzKo3IeZx8z6up5L-aNGe6N.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300 499;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(/assets/home/fonts/google-fonts-home-v25-v9-v24/3y996as8bTXq_nANBjzKo3IeZx8z6up5L-iNGQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/home/fonts/google-fonts-home-v25-v9-v24/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8-qxTN1OVgaY.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/home/fonts/google-fonts-home-v25-v9-v24/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8-qxTPlOVgaY.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/home/fonts/google-fonts-home-v25-v9-v24/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8-qxTOVOVgaY.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/home/fonts/google-fonts-home-v25-v9-v24/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8-qxTNVOVgaY.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/home/fonts/google-fonts-home-v25-v9-v24/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8-qxTNFOVgaY.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/home/fonts/google-fonts-home-v25-v9-v24/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8-qxTOlOV.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(/assets/home/fonts/google-fonts-home-v25-v9-v24/3y996as8bTXq_nANBjzKo3IeZx8z6up5L-eNGe6N.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(/assets/home/fonts/google-fonts-home-v25-v9-v24/3y996as8bTXq_nANBjzKo3IeZx8z6up5L-aNGe6N.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(/assets/home/fonts/google-fonts-home-v25-v9-v24/3y996as8bTXq_nANBjzKo3IeZx8z6up5L-iNGQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/google-fonts-v22-v40-v9-v24/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx3cwhsk.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/google-fonts-v22-v40-v9-v24/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxTcwhsk.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/google-fonts-v22-v40-v9-v24/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxPcwhsk.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/google-fonts-v22-v40-v9-v24/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx_cwhsk.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/google-fonts-v22-v40-v9-v24/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/google-fonts-v22-v40-v9-v24/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}