/* posterly — Print Proof Studio(定稿样式,原 Direction B).
   棉纸底 + Besley slab(印刷工艺感)+ Chivo(扎实正文)。海报放"校样纸"上,
   招牌细节:卡片四角极淡套准线(crop marks)+ 底部细 CMYK 色条。校样蓝/校正红点缀。
   字体全部自托管(同源 woff2)。克制:套准线/色条只作暗示,绝不喧宾夺主。 */

@font-face { font-family:"Besley"; font-style:normal; font-weight:400; font-display:swap; src:url("/static/fonts/besley-400.woff2") format("woff2"); }
@font-face { font-family:"Besley"; font-style:normal; font-weight:600; font-display:swap; src:url("/static/fonts/besley-600.woff2") format("woff2"); }
@font-face { font-family:"Besley"; font-style:italic; font-weight:400; font-display:swap; src:url("/static/fonts/besley-400-italic.woff2") format("woff2"); }
@font-face { font-family:"Chivo"; font-style:normal; font-weight:400; font-display:swap; src:url("/static/fonts/chivo-400.woff2") format("woff2"); }
@font-face { font-family:"Chivo"; font-style:normal; font-weight:500; font-display:swap; src:url("/static/fonts/chivo-500.woff2") format("woff2"); }
@font-face { font-family:"Chivo"; font-style:normal; font-weight:600; font-display:swap; src:url("/static/fonts/chivo-600.woff2") format("woff2"); }
/* 中文字体:自托管构建期子集(仅含全站固定中文 ~900 字;动态用户内容走系统兜底)。
   思源黑体 400/700 = 正文 + UI;思源宋体 700 = 标题(配 Besley)。Latin 仍走 Besley/Chivo(字体栈中在前)。
   改动全站中文文案后须重跑 service/build_cjk_subset.py 重新生成这三个 woff2。 */
@font-face { font-family:"Posterly Sans SC"; font-weight:400; font-display:swap; src:url("/static/fonts/noto-sans-sc-400.woff2") format("woff2"); }
@font-face { font-family:"Posterly Sans SC"; font-weight:700; font-display:swap; src:url("/static/fonts/noto-sans-sc-700.woff2") format("woff2"); }
@font-face { font-family:"Posterly Serif SC"; font-weight:700; font-display:swap; src:url("/static/fonts/noto-serif-sc-700.woff2") format("woff2"); }

:root {
  --cotton:  #f4eddf;   /* 棉纸底 */
  --cotton-2:#ece3d1;   /* 面板 */
  --sheet:   #fbf7ee;   /* 校样纸(更白)*/
  --ink:     #17120e;   /* 印刷黑 */
  --muted:   #6e675b;
  --faint:   #a39a89;
  --line:    rgba(23,18,14,.14);
  --line-2:  rgba(23,18,14,.24);
  --tape:    #c9a86a;   /* 美纹胶带色:温强调 */
  --proof:   #43617a;   /* 校样蓝:链接/次强调 */
  --proof-2: #324b60;
  --red:     #b64535;   /* 校正红:错误/极少量强调 */
  --proof-dim: rgba(67,97,122,.1);
  /* 美术馆暗厅(画廊区专用,暖近黑以接住棉纸印房)*/
  --room:    #14110c; --room-2: #1b1712; --room-ink: #ece4d5;
  --room-gold: #c9a86a; --room-line: rgba(236,228,213,.12); --room-line2: rgba(236,228,213,.22);
  /* 中文走子集 Posterly *SC,其后接系统兜底(覆盖子集外的少量动态汉字);Latin 由 Besley/Chivo 在前接住 */
  --serif: "Besley", "Posterly Serif SC", Rockwell, "Roboto Slab", Georgia, "Noto Serif SC", "Songti SC", SimSun, serif;
  --body:  "Chivo", "Posterly Sans SC", ui-sans-serif, system-ui, -apple-system, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --maxw: 1120px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0; color: var(--ink); font: 16px/1.64 var(--body);
  background-color: var(--cotton);
  background-image:
    radial-gradient(1100px 560px at 50% -10%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(800px 600px at 92% 2%, rgba(67,97,122,.045), transparent 60%);
  background-attachment: fixed; min-height: 100vh; display: flex; flex-direction: column;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .03; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

a { color: var(--proof-2); text-decoration: none; }
a:hover { color: var(--proof); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.006em; line-height: 1.13; color: var(--ink); }
/* 中文标题清零负字距:拉丁标题的负 tracking 用在汉字(思源宋体)上会发脏、且伤混排英文/数字。
   .post-body h2 自带 -.006em(同特异性,需显式纳入,否则源码靠后会压过本规则)。 */
:lang(zh) h1, :lang(zh) h2, :lang(zh) h3, :lang(zh) .post-title, :lang(zh) .post-body h2 { letter-spacing: 0; }
code { font-family: var(--mono); font-size: .9em; color: var(--proof-2); }
::selection { background: var(--proof); color: #fff; }

/* 顶栏 */
.nav { display: flex; align-items: center; gap: 1.5rem; padding: 1.15rem clamp(1rem,4vw,2.6rem);
  border-bottom: 1px solid var(--line); background: rgba(244,237,223,.84); backdrop-filter: blur(9px);
  position: sticky; top: 0; z-index: 20; }
.nav .brand { font-family: var(--serif); font-weight: 600; font-size: 1.65rem; color: var(--ink);
  margin-right: auto; letter-spacing: -.015em; display: inline-block; white-space: nowrap; }
.nav .brand:hover { text-decoration: none; color: var(--ink); }
/* 定稿 logo:论文手稿(双栏版面+胶带金图表块)+ 校样蓝箭头 → p⊕sterly(套准红 o)。
   glyph 走 currentColor,暗厅随 brand 反白;箭头浅页校样蓝、暗厅转金。 */
.brand .page-arr { height: 1.24em; width: 1.27em; vertical-align: -.21em; margin-right: .1em; display: inline-block; }
.brand .page-arr .arr { stroke: var(--proof); }
.brand .page-arr .arrfill { fill: var(--proof); }
.brand .rego { height: .88em; width: .88em; vertical-align: -.175em; margin: 0 .05em;
  display: inline-block; color: var(--red); }
.brand .rego circle { fill: none; stroke: currentColor; }
.brand .rego line { stroke: currentColor; }
.nav nav { display: flex; gap: 1.8rem; }
.nav nav a { font-family: var(--body); font-size: .84rem; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted); }
.nav nav a:hover { color: var(--proof-2); text-decoration: none; }
/* 语言切换:导航尾部的小分段药丸(EN | 中);当前语言填校样蓝 */
.langtog { display: inline-flex; align-items: center; border: 1px solid var(--line-2);
  border-radius: 999px; overflow: hidden; font-family: var(--mono); flex: none; }
.langtog a { padding: .2rem .56rem; font-size: .72rem; font-weight: 600; letter-spacing: .03em;
  color: var(--muted); line-height: 1.5; transition: background .15s ease, color .15s ease; }
.langtog a + a { border-left: 1px solid var(--line-2); }
.langtog a:hover { color: var(--proof-2); text-decoration: none; background: var(--proof-dim); }
.langtog a.on, .langtog a.on:hover { background: var(--proof); color: #fff; }

main { width: 100%; max-width: var(--maxw); margin: 0 auto; flex: 1 0 auto;
  padding: clamp(2.4rem,6vw,5rem) clamp(1rem,4vw,2.6rem); }

/* 小标:像校样批注 */
.eyebrow { font-family: var(--mono); font-size: .73rem; font-weight: 400; letter-spacing: .16em;
  text-transform: uppercase; color: var(--proof-2); margin: 0 0 1.1rem;
  display: inline-flex; align-items: center; gap: .6rem; }
.eyebrow::before { content: ""; width: 1.5rem; height: 1px; background: var(--red); }

.lede { font-size: 1.16rem; line-height: 1.6; color: var(--muted); max-width: 48ch; text-wrap: pretty; }

/* hero(首页顶部:轻微上移,让图案+文字更居中) */
.hero { position: relative; padding: 0 0 2.5rem; margin-top: -0.5rem; }
/* 中文文案折行少、hero 整块偏短:顶距按英文满屏版定会显得上紧下松,给中文单独补顶距把内容
   往下匀一点。英文/其它语言不受影响(内容长、本就铺满首屏),也不动 hero 布局=不破坏 margin 折叠。 */
html[lang="zh"] .hero { padding-top: 2.5rem; }
/* paper → poster 身份:线描样张「手稿→成品海报」 */
.hero-id { margin: 0 0 1.7rem; }
.hero-spec { display: block; margin: 0; }

/* 线描样张:左手稿 → 校样蓝箭头 → 右成品海报(带套准线),show-don't-tell。
   线条加粗、标签调大加深、整体放大,读起来更有分量(不再细弱)。 */
.hero-spec svg { width: clamp(330px, 47vw, 512px); height: auto; display: block; overflow: visible; }
.hero-spec .fillsheet { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.8; }
.hero-spec .edge { stroke: var(--ink); stroke-width: 2; fill: none; }
.hero-spec .thin { stroke: var(--line-2); stroke-width: 1.4; fill: none; }
.hero-spec .ln { stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.hero-spec .band { fill: var(--proof-dim); }
.hero-spec .bar { fill: var(--proof-dim); stroke: var(--proof); stroke-width: 1.1; }
.hero-spec .arrow { stroke: var(--proof); stroke-width: 2.4; stroke-linecap: round; }
.hero-spec .arrowfill { fill: var(--proof); }
.hero-spec .hi { fill: rgba(182,69,53,.16); stroke: var(--red); stroke-width: 1.6; }
.hero-spec .crop { stroke: var(--muted); stroke-width: 1.3; }
.hero-spec .lab { fill: var(--ink); font-family: var(--mono); font-weight: 500; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase; }
@media (prefers-reduced-motion: no-preference) {
  .hero-spec .arrow { stroke-dasharray: 46; stroke-dashoffset: 46; animation: spec-draw .7s ease .3s forwards; }
  .hero-spec .arrowfill { opacity: 0; animation: spec-fade .3s ease .92s forwards; }
}
@keyframes spec-draw { to { stroke-dashoffset: 0; } }
@keyframes spec-fade { to { opacity: 1; } }

.hero h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(2.5rem,6.2vw,4.3rem);
  line-height: 1.06; margin: 0 0 1.4rem; max-width: 16ch; }
.hero h1 .accent { color: var(--red); position: relative; }
.hero h1 .accent::after { content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: 3px;
  background: repeating-linear-gradient(90deg, var(--red) 0 7px, transparent 7px 12px); opacity: .55; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }

/* 三步=校样流程 */
.specsheet { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 4rem;
  border: 1px solid var(--line); background: var(--line); }
.specsheet .step { background: var(--cotton-2); padding: 1.6rem 1.5rem; }
.specsheet .step .n { font-family: var(--mono); font-size: .73rem; font-weight: 400; color: var(--proof-2); letter-spacing: .08em; }
.specsheet .step h3 { font-size: 1.24rem; font-weight: 600; margin: .55rem 0 .4rem; }
.specsheet .step p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.62; }

/* 按钮 */
.cta, button, .btn { font-family: var(--body); font-weight: 600; font-size: .92rem;
  display: inline-flex; align-items: center; gap: .45rem; padding: .74rem 1.35rem; border-radius: 2px;
  cursor: pointer; border: 1px solid var(--ink); background: var(--ink); color: var(--cotton);
  transition: box-shadow .18s, transform .05s, background .18s, color .18s, border-color .18s; }
.cta:hover, button:hover, .btn:hover { text-decoration: none; background: #000; color: #fff;
  box-shadow: 0 10px 26px -14px rgba(23,18,14,.55); }
.cta:active, button:active { transform: translateY(1px); }
button:disabled { opacity: .4; cursor: default; box-shadow: none; }
.cta-ghost { background: transparent; color: var(--proof-2); border-color: var(--proof); }
.cta-ghost:hover { background: var(--proof-dim); color: var(--proof-2); border-color: var(--proof-2); box-shadow: none; }
/* 第三枚按钮(首页 blog,夹在实心上传与蓝幽灵展厅之间):中性描边、胶带金 hover,
   既不抢上传的主次,也与展厅的校样蓝区分开 */
.cta-line { background: transparent; color: var(--ink); border-color: var(--muted); }
.cta-line:hover { background: transparent; color: var(--ink); border-color: var(--tape);
  box-shadow: inset 0 -2px 0 0 var(--tape); }

.section-label { font-family: var(--mono); font-size: .73rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 1.4rem; display: inline-flex; align-items: center; gap: .6rem; }
.section-label::before { content: ""; width: 1.5rem; height: 1px; background: var(--red); }

.hint { color: var(--muted); font-size: .94rem; }
.err  { color: var(--red); font-family: var(--body); font-weight: 600; font-size: .9rem; min-height: 1.2em; }
.draft-banner { font-family: var(--mono); font-size: .8rem; color: var(--proof-2);
  border: 1px dashed var(--proof); background: var(--proof-dim); padding: .65rem 1rem; margin-bottom: 1.6rem; border-radius: 2px; }

/* 画廊默认(首页 / landing 预览用):海报放校样纸上,四角套准线 + 底部 CMYK 色条
   —— 亮印房身份。/gallery 专页会被下方 .page-gallery 覆盖成美术馆暗厅。 */
.gallery-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.gallery-head h1 { font-size: clamp(2rem,4.4vw,3rem); font-weight: 600; margin: 0; }
.gallery-count { font-family: var(--mono); color: var(--faint); font-size: .82rem; }

.grid { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fill, minmax(252px,1fr)); }
.card { position: relative; font-family: inherit; text-align: left; padding: 0; cursor: pointer;
  background: var(--sheet); border: 1px solid var(--line); border-radius: 0; color: inherit;
  display: block; overflow: hidden; transition: border-color .2s, transform .2s, box-shadow .2s; }
.card:hover, .card:focus-visible { border-color: var(--proof); transform: translateY(-3px); outline: none;
  box-shadow: 0 22px 44px -26px rgba(23,18,14,.42); text-decoration: none; }
.card-frame { display: block; background: var(--sheet); aspect-ratio: 4 / 3; overflow: hidden; padding: 18px; }
.card-frame img { width: 100%; height: 100%; object-fit: contain; display: block;
  box-shadow: 0 1px 8px -2px rgba(23,18,14,.22); background: #fff; }
/* 四角套准线(crop marks)*/
.card-frame::before, .card-frame::after { content: ""; position: absolute; width: 9px; height: 9px;
  border: 0 solid rgba(23,18,14,.32); pointer-events: none; }
.card-frame::before { top: 7px; left: 7px; border-top-width: 1px; border-left-width: 1px; }
.card-frame::after  { top: 7px; right: 7px; border-top-width: 1px; border-right-width: 1px; }
/* 底部 CMYK 校样色条 */
.card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, #28b9c9 0 25%, #d24b8f 25% 50%, #e8c84a 50% 75%, #1c1c1c 75% 100%);
  opacity: .7; }
.card-meta { position: absolute; left: 0; right: 0; bottom: 3px; padding: 1.7rem .9rem .8rem;
  display: flex; flex-direction: column; gap: .25rem;
  background: linear-gradient(to top, rgba(251,247,238,.98) 30%, rgba(251,247,238,0));
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s, transform .2s; }
.card:hover .card-meta, .card:focus-visible .card-meta { opacity: 1; transform: none; }
.card-title { font-family: var(--serif); font-size: .98rem; font-weight: 600; line-height: 1.25; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-venue { font-family: var(--mono); font-size: .68rem; color: var(--proof-2); letter-spacing: .06em; text-transform: uppercase; }

.wall-section { margin-top: 4rem; }

/* lightbox = 展厅本体:暖暗墙面 + 顶部射灯光晕 + 四周暗角,海报细金框装裱、落影上墙 */
.lightbox { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center;
  justify-content: center; touch-action: none;   /* 缩放/平移手势归 JS,不被浏览器默认捏合/滚动接管 */
  padding: clamp(3.6rem,8vh,5.4rem) clamp(1rem,4vw,3rem) clamp(2.4rem,6vh,3.6rem);
  background:
    radial-gradient(62vw 48vh at 50% 22%, rgba(255,240,214,.10), transparent 70%),
    radial-gradient(130vw 110vh at 50% 52%, transparent 58%, rgba(0,0,0,.55) 100%),
    linear-gradient(to bottom, #0e0b07 0%, #171209 46%, #0b0906 86%, #070503 100%); }
.lightbox[hidden] { display: none; }
/* 墙面颗粒(material 质感,不靠纯黑幕布) */
.lightbox::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* 装裱三层纵深:胡桃框体(受光渐变型材)→ 框唇内阴影压住卡纸 → 作品嵌于卡纸窗口。
   层次感来自光影剖面(顶受光/底背光/唇下投影),不靠材质炫耀。 */
.lb-frame { position: relative; flex: none; transform-origin: center center;
  padding: clamp(10px, 1.4vmin, 18px);                    /* 框体宽度 */
  background: linear-gradient(180deg, #7d6646 0%, #5a4630 40%, #3c2e1c 100%);  /* 射灯自上而下打在型材上 */
  border-radius: 1px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.75),                            /* 外缘收形 */
    inset 0 2px 0 rgba(255,236,200,.42),                  /* 框顶受光棱线 */
    inset 0 -2px 0 rgba(0,0,0,.6),                        /* 框底背光棱线 */
    0 36px 84px -20px rgba(0,0,0,.55),                    /* 落影(压淡:这道大落影在近黑展厅背景上几乎不可见,唯一明显处是打在下方象牙展签上,降透明度=展签上那道影别太浓)*/
    0 0 130px 14px rgba(255,240,214,.07); }               /* 射灯泛光 */
.lb-frame::after { content: ""; position: absolute; pointer-events: none;
  inset: clamp(10px, 1.4vmin, 18px);                      /* 与框体内缘对齐 */
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.55),                      /* 框唇与卡纸交界缝 */
    inset 0 7px 18px rgba(0,0,0,.5),                      /* 框唇投在卡纸上的顶影(纵深主笔)*/
    inset 0 -4px 12px rgba(0,0,0,.28),                    /* 底沿回影 */
    inset 4px 0 12px rgba(0,0,0,.24),                     /* 左右侧影,四周都压进去 */
    inset -4px 0 12px rgba(0,0,0,.24); }
.lb-img { object-fit: contain; display: block; background: #fbf8f0;
  padding: clamp(18px, 2.6vmin, 38px);                    /* 宽卡纸留白 */
  max-width: min(80vw, 1360px); max-height: min(70vh, calc(100vh - 16.5rem)); }
/* 顶部:左侧 ⊕ 馆名字样,右侧 EXIT esc 文字键 */
.lb-top { position: absolute; z-index: 3; top: 0; left: 0; right: 0; display: flex; align-items: center;
  justify-content: space-between; padding: 1.05rem clamp(1.2rem,3vw,2.6rem) 2.2rem;
  background: linear-gradient(to bottom, rgba(7,5,3,.78), rgba(7,5,3,.3) 55%, transparent);
  transition: opacity .3s ease; }   /* 放大态自动隐/现 */
.lb-mark { display: inline-flex; align-items: center; gap: .65rem; font-family: var(--mono);
  font-size: .8rem; letter-spacing: .28em; text-transform: uppercase; color: #b6ac9a; }
.lb-mark svg { width: 1.06rem; height: 1.06rem; color: var(--red); flex: none; }
.lb-mark svg circle { fill: none; stroke: currentColor; }
.lb-mark svg line { stroke: currentColor; }
.lb-close { display: inline-flex; align-items: center; gap: .6rem; padding: .56rem 1.05rem; cursor: pointer;
  background: rgba(20,15,9,.6); border: 1px solid rgba(236,228,213,.38); border-radius: 2px;
  font-family: var(--mono); font-size: .78rem; font-weight: 400; letter-spacing: .18em;
  text-transform: uppercase; color: var(--room-ink);
  transition: color .18s, border-color .18s, background .18s; }
.lb-close kbd { font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; padding: .2em .5em;
  border: 1px solid rgba(236,228,213,.4); border-radius: 3px; color: #cfc6b6;
  transition: color .18s, border-color .18s; }
.lb-close:hover { color: #15110a; background: var(--room-gold); border-color: var(--room-gold); box-shadow: none; }
.lb-close:hover kbd { color: #15110a; border-color: rgba(21,17,10,.5); }
/* 美术馆展签:象牙白小卡,胶带金顶边 + 红色编号 + 衬线标题(亮面身份在暗厅里的回声)*/
.lb-label { align-self: flex-start; margin-top: .8rem; max-width: 480px;
  background: var(--cotton); color: var(--ink); padding: .8rem 1.05rem .75rem;
  border-top: 2px solid var(--tape); border-radius: 1px;
  box-shadow: 0 16px 36px -18px rgba(0,0,0,.9); display: grid; gap: .28rem;
  transition: opacity .22s ease, transform .22s ease; }
/* 翻页淡入淡出改由 .lb-stage 整组承担(见 .lb-stage.swapping):展签不再单独淡,否则画框落影会"突然冒出" */
.lb-no { font-family: var(--mono); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--red); }
.lb-title { font-family: var(--serif); font-weight: 600; font-size: .98rem; line-height: 1.3; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lb-venue { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--proof-2); }
/* 怎么做出来的:密度徽标(小票式蓝标签)+ special requests 引文(斜体小字)。
   这两项放进图像右侧的墙签 .lb-aside,不再挤在下方展签里。 */
.lb-density { justify-self: start; font-family: var(--mono); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--proof-2); background: var(--proof-dim);
  border: 1px solid var(--line); border-radius: 2px; padding: .22rem .5rem; }
.lb-special { font-family: var(--body); font-style: italic; font-size: .76rem; line-height: 1.62; color: var(--muted); overflow-wrap: anywhere; }
/* [hidden] 钉死:JS 靠 .hidden 切换密度/special/署名的可见性,这些元素都另设过样式,必须显式压住。 */
.lb-special[hidden], .lb-density[hidden], .lb-credit[hidden] { display: none; }
/* 右侧墙签:把「密度 + special」移到图像右侧的竖直注记卡(象牙白小卡 + 胶带金顶边,与下方展签同款)。
   绝对定位,left/top 由 JS 实时贴在海报右缘外 + 垂直对齐海报中心;海报整幅同时左移(见 .lb-stage),
   使(海报 + 墙签)整体居中、海报不缩窄。special 全显,极长则卡内滚动(封顶),绝不溢出视口底部。
   右侧塞不下(海报太宽/屏太窄)时 JS 复位左移 + 加 .aside-below 改为静置于图像下方。 */
.lb-aside { position: absolute; z-index: 3;
  width: clamp(186px, 16vw, 248px);   /* 垂直居中由 JS 设 top=上边缘(中心−半高)完成,不占 transform → 进场动画可与画框共用 lb-stage-in */
  max-height: calc(100vh - 10rem); overflow-y: auto;
  background: var(--cotton); color: var(--ink);
  border-top: 2px solid var(--tape); border-radius: 1px;
  box-shadow: 0 16px 40px -18px rgba(0,0,0,.92);
  padding: 1rem 1.1rem 1.05rem; display: grid; gap: .62rem; align-content: start;
  touch-action: pan-y; overscroll-behavior: contain;   /* lightbox 设了 touch-action:none,这里放行卡内纵向触摸滚动 */
  transition: opacity .22s ease, transform .22s ease; }
.lb-aside[hidden] { display: none; }
.lightbox:not(.lb-ready) .lb-aside { opacity: 0; pointer-events: none; }   /* 右卡随画框一起压住,等图载完+定位后由 .lb-ready 统一揭示(免点开时半成品瞬移);未揭示前禁交互,免 tabindex=0 的隐形卡被 tab 到/截获点击 */
.lb-aside:focus-visible { outline: 2px solid var(--tape); outline-offset: 3px; }   /* 长引文可键盘聚焦后方向键滚动(tabindex=0),给个聚焦环 */
.lb-aside.swapping { opacity: 0; transform: translateY(6px); }   /* 翻页与展签同步淡隐 */
.lightbox.zoomed .lb-aside { opacity: 0; pointer-events: none; }   /* 放大态:右卡淡隐让位(不动其定位,缩回 1x 即复现) */
/* 右侧塞不下 → 静置图像下方(JS 量到溢出时切换);海报压一下高度腾位,三者一起不超视口。 */
.lightbox.aside-below .lb-aside { position: static; transform: none; top: auto; left: auto;
  width: auto; max-width: 480px; max-height: 30vh; margin: 1rem auto 0; align-self: center; }
.lightbox.aside-below .lb-aside.swapping { transform: none; }
.lightbox.aside-below .lb-img { max-height: min(56vh, calc(100vh - 20rem)); }
.lightbox.aside-below .lb-hint { display: none; }   /* 图下兜底时下方展签会顶到右下角键位提示,矮屏直接收起提示 */
/* CC BY 署名行:展签底部的溯源小字("after …"),细分隔线像真实标签的版权行 */
.lb-credit { font-family: var(--body); font-style: italic; font-size: .68rem; line-height: 1.5;
  color: var(--muted); border-top: 1px solid var(--line); padding-top: .42rem; margin-top: .18rem; }
.lb-credit a { font-family: var(--mono); font-style: normal; font-size: .92em; color: var(--proof-2);
  text-decoration: none; border-bottom: 1px dotted currentColor; }
.lb-credit a:hover { color: var(--proof); }
/* 键位提示:右下角(避开左下展签),入场浮起亮显数秒后退为半透明常驻 */
.lb-hint { position: absolute; bottom: 1.25rem; right: clamp(1.2rem,3vw,2.6rem); margin: 0;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .15em; color: #e6ddca;
  background: rgba(16,12,7,.68); border: 1px solid var(--room-line2);
  padding: .55rem 1.2rem; border-radius: 2px;
  pointer-events: none; animation: lb-hint 9s ease both; white-space: nowrap;
  transition: opacity .3s ease; }   /* 放大态自动隐/现(!important 压过上面的常驻动画) */
@keyframes lb-hint { 0% { opacity: 0; transform: translateY(10px); }
  7%, 60% { opacity: 1; transform: none; }
  100% { opacity: .42; transform: none; } }

/* 每轮"我们做了什么"小结:竖向时间线(轮次圆点 + mono 标签 + 正文段);当前版圆点点亮 */
.round-log { list-style: none; margin: .5rem 0 1.6rem; padding: 0; }
.round-entry { position: relative; padding: 0 0 1.15rem 1.45rem; border-left: 2px solid var(--line); }
.round-entry:last-child { padding-bottom: .15rem; }
.round-entry::before { content: ""; position: absolute; left: -6px; top: .3rem; width: 9px; height: 9px;
  border-radius: 50%; background: var(--cotton); border: 2px solid var(--line-2); }
.round-entry.current::before { background: var(--proof); border-color: var(--proof); }
.round-label { display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--proof-2); margin-bottom: .32rem; }
.round-ask { margin: 0 0 .4rem; padding: .42rem .65rem; background: var(--cotton-2);
  border-left: 2px solid var(--line-2); border-radius: 2px; font-size: .88rem;
  line-height: 1.55; color: var(--ink); }
.round-ask.internal { border-left-color: var(--proof-2); }
.round-ask .who { display: block; font-family: var(--mono); font-size: .64rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--proof-2); margin-bottom: .18rem; }
.round-summary { margin: 0 0 .75rem; font-size: .92rem; line-height: 1.62; color: var(--ink); }
.round-summary:last-child { margin-bottom: 0; }
.round-summary.muted { color: var(--faint); font-style: italic; }

/* 定价 */
.price-table { border: 1px solid var(--line); margin: 1.8rem 0; background: var(--cotton-2); }
.price-row { display: flex; align-items: baseline; gap: 1rem; padding: 1.15rem 1.4rem; border-bottom: 1px solid var(--line); }
.price-row:last-child { border-bottom: 0; }
.price-row .label { font-family: var(--serif); font-weight: 600; font-size: 1.06rem; color: var(--ink); }
.price-row .sub { color: var(--muted); font-size: .9rem; }
.price-row .amt { margin-left: auto; font-family: var(--serif); font-weight: 600; font-size: 1.4rem; color: var(--proof-2); white-space: nowrap; }
.price-row .amt .cur { color: var(--faint); font-size: .76rem; font-weight: 400; margin-left: .25rem; font-family: var(--mono); }

/* 表单 */
.form-card { max-width: 560px; }
form .field { margin: 0 0 1.2rem; }
form label { display: block; }
form .field > span, form label > span { display: block; font-family: var(--mono); font-size: .78rem;
  letter-spacing: .04em; color: var(--muted); margin-bottom: .45rem; text-transform: uppercase; }
form input, form select, form textarea { display: block; width: 100%; font-family: var(--body); font-size: .98rem;
  color: var(--ink); background: var(--sheet); border: 1px solid var(--line-2); border-radius: 2px; padding: .64rem .75rem; }
form input::placeholder, form textarea::placeholder { color: var(--faint); }
form input:focus, form select:focus, form textarea:focus { outline: none; border-color: var(--proof); box-shadow: 0 0 0 3px var(--proof-dim); }
/* select 与上面输入框统一:去原生外观 + 自绘校样蓝箭头(原生下拉框样式与定制 input 对不上 → 显突兀) */
form select { cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 2.1rem; background-repeat: no-repeat; background-position: right .8rem center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236e675b' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); }
form select:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2343617a' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); }
form input[type="file"] { padding: .55rem; color: var(--muted); font-family: var(--mono); font-size: .85rem; background: var(--cotton-2); }
form input[type="file"]::file-selector-button { font-family: var(--mono); font-size: .8rem; color: var(--proof-2); cursor: pointer;
  background: var(--proof-dim); border: 1px solid var(--line-2); border-radius: 2px; padding: .38rem .75rem; margin-right: .85rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
.form-grid .span-2 { grid-column: 1 / -1; }
/* QR:可重复多条(标签 + 链接 + 删除),底部「+ Add another」追加 */
/* 常用尺寸预设 chips:mono 小票样式,选中反白 */
.size-presets { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .15rem; }
.size-presets button { all: unset; cursor: pointer; font-family: var(--mono); font-size: .74rem;
  letter-spacing: .03em; padding: .42rem .7rem; border: 1px solid var(--line); border-radius: 2px;
  color: var(--muted); background: var(--cotton-2); }
.size-presets button:hover { color: var(--proof); border-color: var(--proof); }
.size-presets button.on { color: var(--cotton); background: var(--proof); border-color: var(--proof); }
.qr-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) auto; gap: .55rem;
  align-items: center; margin-bottom: .55rem; }
.qr-row input { margin: 0; }
.qr-del { all: unset; cursor: pointer; width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center;
  justify-content: center; font-size: 1.15rem; line-height: 1; color: var(--muted);
  border: 1px solid var(--line-2); border-radius: 2px; transition: color .15s, border-color .15s; }
.qr-del:hover { color: var(--red); border-color: var(--red); }
.qr-add { all: unset; cursor: pointer; font-family: var(--mono); font-size: .76rem; letter-spacing: .04em;
  color: var(--proof-2); padding: .15rem 0; display: inline-block; }
.qr-add:hover { color: var(--proof); text-decoration: underline; text-underline-offset: 3px; }
/* 字段下的说明:可读正文体(非 mono 大写),把 skill 平时会问的项轻量提示给用户。
   选择器特异度须高于 `form .field > span`(0,1,2),否则被其大写/mono 规则压过 → 用 .field > .field-hint(0,2,0) */
.field > .field-hint { display: block; margin: .5rem 0 0; font-family: var(--body);
  font-size: .84rem; line-height: 1.55; color: var(--muted); text-transform: none; letter-spacing: 0; }
.field-hint code { font-size: .85em; color: var(--proof-2); background: var(--proof-dim);
  padding: .04em .32em; border-radius: 2px; }

/* 上传页脚注:离线生成说明 + 提交即同意条款(轻量、不抢表单) */
.form-notes { margin: 1.5rem 0 1.3rem; padding-top: 1.1rem; border-top: 1px dashed var(--line-2); }
.form-notes p { margin: 0 0 .75rem; font-size: .84rem; line-height: 1.55; color: var(--muted); }
.form-notes strong { color: var(--ink); font-weight: 600; }
/* 收据/报销那句略醒目一点点:金色细边 + 提到 ink 色 + 略大 */
.form-notes .receipt-note { color: var(--ink); font-size: .9rem;
  border-left: 2px solid var(--tape); padding-left: .7rem; }

/* 状态页:像 proof approval sheet(五站工票时间线:done=校样蓝勾,active=胶带金呼吸点,todo=淡) */
.statusline { border: 1px solid var(--line); background: var(--cotton-2); padding: 1.4rem 1.6rem; margin: 1.5rem 0; max-width: 620px; }
.statusline .oid { font-family: var(--mono); color: var(--faint); font-size: .82rem; letter-spacing: .04em; }
.statusline .status { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--ink); margin: .55rem 0 0; }
.statusline .status.done-note::before { content: "✔ "; color: var(--proof); }
.rev-chip { font-family: var(--mono); font-size: .66rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--proof-2); border: 1px solid var(--line-2); border-radius: 2px; padding: .25em .55em; margin-left: .65rem; }
.status-meta { font-family: var(--mono); font-size: .78rem; color: var(--muted); letter-spacing: .03em; margin: .5rem 0 0;
  overflow-wrap: anywhere; }  /* venue 是用户输入,长名/长词不戳出 statusline 框 */
/* 改版语境横幅(金色,醒目):时间线在改版期会回到"生成中",这条说明这是改版、旧版仍在 */
.revision-banner { border: 1px solid var(--tape); background: rgba(201,168,106,.1);
  padding: .8rem 1.05rem; border-radius: 2px; font-size: .92rem; line-height: 1.56;
  color: var(--ink); margin: .9rem 0 0; }
/* 预览网页渠道:状态页/改版页的水印预览画框(白底装裱 + 投影,与画廊同语言) */
.preview-frame { display: block; max-width: 620px; margin: 1.1rem 0 .7rem;
  border: 1px solid var(--line); background: #fff; padding: 6px; border-radius: 1px;
  box-shadow: 0 18px 40px -24px rgba(23,18,14,.45); }
.preview-frame img { display: block; width: 100%; }
.preview-frame:hover { border-color: var(--proof); }
/* 客户改版页:左图右表单,对着图写;窄屏退化为上下叠放 */
.revise-wrap { display: grid; grid-template-columns: minmax(0,1fr) 360px;
  gap: 2rem; align-items: start; margin-top: .4rem; }
.revise-wrap .preview-frame { max-width: none; margin: 0; }
/* sticky 顶距 = 顶栏高度(~4.4rem:padding 2.3 + 品牌图标 ~2.05 + 1px 边)+ 间隙,
   让右栏停在顶栏那条横线下方留出明显缝隙,而不是钻到 sticky 顶栏底下卡在最上方 */
.revise-side { position: sticky; top: 5.75rem; }
.revise-side p:first-child { margin-top: 0; }
@media (max-width: 900px) {
  .revise-wrap { grid-template-columns: 1fr; }
  .revise-side { position: static; }
}
/* 动作互渡(revise⇄approve)与状态页重发按钮 */
.alt-action { margin: 1.4rem 0 0; padding-top: 1rem; border-top: 1px dashed var(--line);
  font-size: .92rem; color: var(--muted); }
.resend { display: block; margin: 1.6rem 0 0; max-width: 620px; }
.resend .hint { display: block; margin-top: .85rem; font-size: .85rem; }
/* 状态页改版决策区(预览正下方):主按钮「申请修改」+ 次按钮「撤销改版」并排 */
.decide { margin: 1.2rem 0 0; max-width: 690px; }   /* 略宽于卡列:让改版提示单行容纳,文案不缩 */
.decide .cta { display: inline-block; }
.decide form { display: inline; margin: 0 0 0 .5rem; }
.decide .hint { display: block; margin-top: .85rem; font-size: .85rem; color: var(--muted); }
.resend-note { font-family: var(--mono); font-size: .78rem; color: var(--proof-2);
  margin: .6rem 0 0; }
/* 成品下载页 */
.dl-list { list-style: none; margin: 1.4rem 0; padding: 0; }
.dl-list li { margin: 0 0 .9rem; padding-left: 1.4rem; position: relative; }
.dl-list li::before { content: "↓"; position: absolute; left: 0; color: var(--proof); }
.dl-list a { font-weight: 600; }
/* 选版醒目提示(蓝色强调条 callout):approve 页明确"选哪版交付"、revise 页明确"基于哪版改" */
.version-prompt { margin: 0 0 .7rem; font-size: .98rem; line-height: 1.5; color: var(--ink);
  border-left: 3px solid var(--proof); background: var(--proof-dim);
  padding: .55rem .8rem; border-radius: 0 2px 2px 0; }
.version-prompt strong { color: var(--proof); }
/* 版本切换条(状态页交付前翻看 / approve 选交付版 / revise 选基底共用):点按键换上方大图,点大图开超大 */
.version-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .9rem; }
.version-tab { font-family: var(--mono); font-size: .76rem; letter-spacing: .04em;
  color: var(--proof-2); background: transparent; border: 1px solid var(--line-2);
  padding: .4rem .85rem; border-radius: 2px; cursor: pointer; transition: border-color .12s, background .12s; }
.version-tab:hover { border-color: var(--proof); }
.version-tab.active { background: var(--proof-dim); border-color: var(--proof); font-weight: 600; }
/* 状态页时间线。一律以 .steps 作用域:落地页 specsheet 的卡片同名 .step,
   裸 .step 规则曾把圆点/竖线漏到首页三个块上 */
.steps { list-style: none; margin: 1.35rem 0 0; padding: 0; }
.steps .step { position: relative; padding: 0 0 1.2rem 2rem; }
.steps .step:last-child { padding-bottom: .1rem; }
.steps .step::before { /* 站点圆点 */
  content: ""; position: absolute; left: 0; top: .32em; width: .82rem; height: .82rem;
  border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--sheet); }
.steps .step::after { /* 站间连线 */
  content: ""; position: absolute; left: .39rem; top: 1.35em; bottom: .15em; width: 1px; background: var(--line-2); }
.steps .step:last-child::after { display: none; }
.step-name { font-family: var(--serif); font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.steps .step.done::before { border-color: var(--proof); background: var(--proof); }
.steps .step.done .step-name::after { content: " ✓"; color: var(--proof); font-family: var(--body); font-size: .85em; }
.steps .step.active::before { border-color: var(--tape); background: var(--tape); animation: step-pulse 1.6s ease infinite; }
.steps .step.todo .step-name { color: var(--faint); font-weight: 400; }
.steps .step.todo::before { border-style: dashed; }
.step-note { font-size: .95rem; line-height: 1.55; color: var(--ink); margin: .25rem 0 0; max-width: 46ch; }
.step-extra { font-family: var(--mono); font-size: .76rem; color: var(--proof-2); background: var(--proof-dim);
  padding: .12em .5em; border-radius: 2px; white-space: nowrap; }
.step-blurb { font-size: .85rem; line-height: 1.5; color: var(--faint); margin: .2rem 0 0; max-width: 46ch; }
.refresh-note { font-family: var(--mono); font-size: .72rem; letter-spacing: .05em; color: var(--faint); margin: 1.1rem 0 0; }
@keyframes step-pulse { 50% { opacity: .35; } }

.prose { max-width: 64ch; }
.prose p { color: var(--ink); }
.prose h1 { font-size: 2.15rem; font-weight: 600; margin: .3rem 0 1.3rem; }

/* ===== 博客(/blog,单独一篇介绍 posterly):编辑部长文排版 + 线描配图 ===== */
.post { max-width: 720px; }
.post-head { padding-bottom: 1.6rem; margin-bottom: 2rem; border-bottom: 1px solid var(--line); }
.post-title { font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.08; margin: .2rem 0 0; letter-spacing: -.012em; max-width: 20ch; }
.post-dek { font-family: var(--body); font-size: 1.2rem; line-height: 1.5; color: var(--muted); margin: 1.1rem 0 0; max-width: 46ch; }
.post-meta { font-family: var(--mono); font-size: .73rem; letter-spacing: .08em; color: var(--faint); text-transform: uppercase; margin: 1.3rem 0 0; }
/* text-wrap:pretty(可继承)→ 正文每段都避免单词独占末行(孤词);软优化,改后须重渲核实 */
.post-body { max-width: 68ch; font-size: 1.125rem; line-height: 1.75; text-wrap: pretty; }
/* 中英文正文排法不同(刻意):英文(拉丁文)保持左对齐、右缘自然参差——这是 web 正文最佳实践,
   justify 会撑大词距、产生"空白河流"。中文汉字等宽,两端对齐(齐头齐尾)不产生河流,是中文正文的
   传统/预期排法,故 zh 用 justify;末行不拉伸(text-align-last:start),内嵌英文/数字用默认 text-justify 自适应。 */
.post-body:lang(zh) { text-align: justify; text-align-last: start; line-height: 1.85; }
/* zh 正文两端对齐不应渗进引用/图注(短文本会被拉伸):复位左对齐;lead 行距略松 */
.post-body:lang(zh) p.lead { line-height: 1.72; }
.post-body:lang(zh) blockquote, .post-body:lang(zh) figcaption { text-align: start; text-align-last: auto; }
.post-body p { margin: 0 0 1.25rem; }
.post-body p.lead { font-size: 1.2rem; line-height: 1.62; color: var(--ink); margin-bottom: 1.6rem; }
.post-body h2 { font-size: 1.5rem; font-weight: 600; margin: 2.5rem 0 .85rem; letter-spacing: -.006em; }
.post-body h2::before { content: ""; display: block; width: 1.8rem; height: 2px; background: var(--red); margin-bottom: 1rem; opacity: .8; }
.post-body ul { margin: 0 0 1.4rem; padding-left: 0; list-style: none; }
.post-body ul li { position: relative; padding-left: 1.5rem; margin-bottom: .7rem; }
.post-body ul li::before { content: "—"; position: absolute; left: 0; color: var(--proof); font-family: var(--mono); }
.post-body blockquote { margin: 2.1rem 0; padding: .15rem 0 .15rem 1.5rem; border-left: 3px solid var(--proof); font-family: var(--serif); font-style: italic; font-size: 1.36rem; line-height: 1.42; color: var(--proof-2); }
.post-body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.post-body em { font-style: italic; color: var(--proof-2); }
.post-body code { font-family: var(--mono); font-size: .85em; background: var(--sheet); border: 1px solid var(--line); border-radius: 3px; padding: .06em .42em; white-space: nowrap; }

/* 行内线描配图(校样纸 + 校样蓝/校正红,与首页线描样张同一套视觉语言) */
.bfig { margin: 2.2rem 0; }
.bfig svg { display: block; width: 100%; height: auto; background: var(--sheet); border: 1px solid var(--line); border-radius: 2px; padding: 1.1rem 1.2rem; overflow: visible; }
.bfig figcaption { font-family: var(--mono); font-size: .72rem; letter-spacing: .03em; color: var(--muted); margin-top: .65rem; padding-left: .1rem; }
.bfig .sheet { fill: #fff; stroke: var(--ink); stroke-width: 1.4; }
.bfig .ink { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.bfig .ln { stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.bfig .lnf { stroke: var(--faint); stroke-width: 1.5; stroke-linecap: round; }
.bfig .band { fill: var(--proof-dim); }
.bfig .band2 { fill: rgba(67,97,122,.22); }
.bfig .hero { fill: rgba(67,97,122,.13); stroke: var(--proof); stroke-width: 1.4; }
.bfig .big { fill: rgba(182,69,53,.12); stroke: var(--red); stroke-width: 1.3; }
.bfig .arr { stroke: var(--proof); stroke-width: 2.2; stroke-linecap: round; }
.bfig .arrfill { fill: var(--proof); }
.bfig .ok { fill: none; stroke: var(--proof); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.bfig .no { stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; }
.bfig .rule { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 3; }
.bfig .dim { stroke: var(--proof); stroke-width: 1; stroke-linecap: round; opacity: .85; }
.bfig .lens { fill: none; stroke: var(--ink); stroke-width: 2; }
.bfig .lensh { stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.bfig .hatch line { stroke: var(--proof); stroke-width: 1; opacity: .3; }
.bfig .cap { fill: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.bfig .capk { fill: var(--ink); font-family: var(--serif); font-weight: 600; font-size: 12px; }

/* 文末转化卡 */
.post-cta { margin: 3rem 0 1.4rem; padding: 1.8rem 1.9rem; background: var(--cotton-2); border: 1px solid var(--line); border-radius: 2px; }
.post-cta .pc-h { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; margin: 0 0 .5rem; color: var(--ink); }
.post-cta .pc-body { font-size: .98rem; color: var(--muted); margin: 0 0 1.2rem; max-width: 52ch; }

@media (max-width: 680px) {
  .post-body { font-size: 1.0625rem; }
}

/* ===== 收据:一张端庄的对账单(校样白纸、双细线信头、衬线计数)——打印即存档 ===== */
.receipt-doc { max-width: 660px; background: var(--sheet); border: 1px solid var(--line);
  padding: 2.3rem 2.5rem 1.8rem; margin: 1.7rem 0 1.1rem;
  box-shadow: 0 22px 46px -30px rgba(23,18,14,.45); }
.rd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.2rem;
  padding-bottom: 1.15rem; border-bottom: 2px solid var(--ink); }
.rd-brand { font-family: var(--serif); font-weight: 600; font-size: 1.45rem; color: var(--ink); line-height: 1.1; }
.rd-brand .rego { height: .85em; width: .85em; vertical-align: -.16em; margin: 0 .05em; color: var(--red); }
.rd-brand .rego circle { fill: none; stroke: currentColor; }
.rd-brand .rego line { stroke: currentColor; }
.rd-tag { display: block; font-family: var(--mono); font-weight: 400; font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-top: .45rem; }
.rd-no { text-align: right; font-family: var(--mono); font-size: .74rem; color: var(--muted); line-height: 1.7; }
.rd-no .rd-kind { display: block; font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--red); }
.rd-no code { display: block; font-size: .8rem; color: var(--ink); }
.rd-no .rd-issued { color: var(--faint); }
.rd-meta { display: flex; flex-wrap: wrap; gap: .4rem 2.6rem; margin: 1.25rem 0 1.6rem; }
.rd-meta dt { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); margin: 0 0 .15rem; }
.rd-meta dd { margin: 0; font-size: .92rem; color: var(--ink); }
.rd-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.rd-table th { font-family: var(--mono); font-weight: 400; font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); text-align: left; padding: 0 .6rem .45rem 0;
  border-bottom: 1px solid var(--line-2); }
.rd-table td { padding: .62rem .6rem .62rem 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.rd-date { font-family: var(--mono); font-size: .78rem; color: var(--muted); white-space: nowrap; }
.rd-txn { font-family: var(--mono); font-size: .72rem; color: var(--faint); overflow-wrap: anywhere; }
.rd-amt { text-align: right; font-family: var(--serif); font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap; padding-right: 0 !important; }
th.rd-amt { font-family: var(--mono); font-weight: 400; }
.rd-off td { color: var(--faint); }
.rd-off .rd-amt { font-weight: 400; text-decoration: line-through; text-decoration-color: var(--line-2); }
.rd-off .rd-amt, .rd-off .rd-date { color: var(--faint); }
.rd-chip { font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--red); border: 1px solid currentColor; border-radius: 2px; padding: .14em .45em;
  margin-left: .45rem; white-space: nowrap; }
.rd-totals { margin: 1.05rem 0 0 auto; max-width: 290px; }
.rd-row { display: flex; justify-content: space-between; gap: 2rem; padding: .32rem 0;
  font-size: .92rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.rd-row.rd-net { margin-top: .35rem; padding-top: .6rem; border-top: 2px solid var(--ink);
  font-family: var(--serif); font-weight: 600; font-size: 1.12rem; color: var(--ink); }
.rd-foot { margin-top: 1.9rem; padding-top: .9rem; border-top: 1px dashed var(--line-2);
  font-size: .78rem; line-height: 1.6; color: var(--faint); }
.rd-actions { display: flex; align-items: center; gap: 1.3rem; margin: 1.3rem 0 0; }
.rd-back { font-size: .9rem; }
@media (max-width: 680px) { .receipt-doc { padding: 1.5rem 1.2rem 1.3rem; }
  .rd-table .rd-txn { display: none; } .rd-table th:nth-child(3) { display: none; } }

/* 打印:只留收据本体,白底无投影(浏览器"另存为 PDF"即正式存档) */
@media print {
  body { background: #fff; }
  body::before, .nav, .foot, .no-print { display: none !important; }
  main { animation: none !important; max-width: none; padding: 0; }
  .receipt-doc { border: none; box-shadow: none; margin: 0; max-width: none; padding: .5in .25in; }
  .rd-table .rd-txn, .rd-table th:nth-child(3) { display: table-cell; }
}

.foot { flex: none; border-top: 1px solid var(--line); padding: 1.5rem clamp(1rem,4vw,2.6rem);
  color: var(--faint); font-family: var(--mono); font-size: .8rem; display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--proof-2); }
.foot .sep { color: var(--line-2); }
.foot .mark { margin-left: auto; }

/* ===== 沉浸式展厅:/gallery 整页变暗厅(落地页仍是浅页里的暗带,作 teaser)===== */
body.page-gallery { background-color: var(--room); color: var(--room-ink);
  background-image: radial-gradient(1300px 640px at 50% -8%, rgba(255,247,232,.075), transparent 62%),
    radial-gradient(900px 720px at 85% 12%, rgba(201,168,106,.05), transparent 60%); }
body.page-gallery .nav { background: rgba(20,17,12,.72); border-bottom-color: var(--room-line); }
body.page-gallery .nav .brand { color: var(--room-ink); }
body.page-gallery .nav .brand .page-arr .arr { stroke: var(--room-gold); }
body.page-gallery .nav .brand .page-arr .arrfill { fill: var(--room-gold); }
body.page-gallery .nav nav a { color: #a59c8c; }
body.page-gallery .nav nav a:hover { color: var(--room-gold); }
body.page-gallery .foot { border-top-color: var(--room-line); color: #837a6b; }
body.page-gallery .foot a { color: #a59c8c; }
body.page-gallery .foot a:hover { color: var(--room-gold); }
body.page-gallery main { max-width: 1320px; }
body.page-gallery .gallery-head h1 { color: var(--room-ink); }
body.page-gallery .gallery-count { color: #8d8474; }
/* 整页即展厅:网格直接铺在展厅里,海报更大、间距更阔 */
body.page-gallery .grid { gap: clamp(1.6rem, 3vw, 2.6rem); grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
/* 卡片转美术馆暗厅展品(覆盖上面的浅色校样卡:去套准线/CMYK、转暗、暖白铭牌)*/
body.page-gallery .card { background: var(--room-2); border-color: var(--room-line); }
body.page-gallery .card:hover, body.page-gallery .card:focus-visible {
  border-color: var(--room-gold); box-shadow: 0 30px 66px -28px rgba(0,0,0,.92), 0 0 0 1px rgba(201,168,106,.42); }
body.page-gallery .card-frame { background: var(--room-2); padding: 12px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), inset 0 2px 20px rgba(0,0,0,.5); }
body.page-gallery .card-frame img { box-shadow: none; background: transparent; }
body.page-gallery .card-frame::before, body.page-gallery .card-frame::after { display: none; }  /* 去套准线 */
body.page-gallery .card::after { display: none; }                                                /* 去 CMYK 色条 */
body.page-gallery .card-meta { bottom: 0; padding: 1.9rem 1rem .9rem;
  background: linear-gradient(to top, rgba(10,8,5,.97) 30%, rgba(10,8,5,0)); }
body.page-gallery .card-title { color: var(--room-ink); font-size: 1.04rem; }
body.page-gallery .card-venue { color: var(--room-gold); letter-spacing: .08em; }

/* 「Walk the exhibition」入口 */
.enter-exhibition { margin-left: auto; align-self: center; font-family: var(--body); font-weight: 600;
  font-size: .85rem; letter-spacing: .02em; display: inline-flex; align-items: center; gap: .4rem;
  padding: .58rem 1.15rem; border-radius: 999px; cursor: pointer; border: 1px solid var(--room-gold);
  background: transparent; color: var(--room-gold); transition: background .18s, color .18s; }
.enter-exhibition:hover { background: var(--room-gold); color: #15110a; box-shadow: none; }

/* ===== 展览查看器:一张一张移步观看 ===== */
body.viewing { overflow: hidden; }                 /* 走进展厅时锁住背景滚动,更沉浸 */
body.viewing .nav, body.viewing .foot { display: none; }   /* 全屏布展:藏掉顶栏/页脚的页面 chrome */
.lb-stage { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; max-width: 100%; }
/* JS 给 .lb-stage 设 left:-shift,把海报整幅(连同下方展签)左移、让出右侧墙签位,使(海报+墙签)整体
   居中。用 left 而非 transform:进场动画 lb-stage-in 带 fill:both,会持续以 transform:none 压过内联
   transform;left 不被该动画触碰,互不干扰。塞不下时 JS 复位 left 并改 .aside-below。 */
.lb-nav { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 3.3rem; height: 3.3rem;
  display: flex; align-items: center; justify-content: center; padding: 0 0 .2rem; font-size: 1.7rem;
  font-weight: 300; line-height: 1; border-radius: 999px; background: transparent; color: #a89f8e;
  border: 1px solid rgba(236,228,213,.16); cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, opacity .3s ease; }
.lb-prev { left: clamp(.6rem, 3vw, 2.4rem); }
.lb-next { right: clamp(.6rem, 3vw, 2.4rem); }
.lb-nav:hover { background: rgba(201,168,106,.14); color: var(--room-gold);
  border-color: rgba(201,168,106,.6); box-shadow: none; }
.lb-nav:active { transform: translateY(-50%); }   /* 箭头靠 transform 居中:压过全局 button:active 的 translateY(1px)(它会把居中 transform 整个替换、令箭头点击时向下跳半个身位),点击不要这个位移 */

/* 查看器:开场柔和升起 + 切换海报时淡入淡出(像布展撤换一张作品)*/
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lb-stage-in { from { opacity: 0; transform: translateY(22px) scale(.984); } to { opacity: 1; transform: none; } }
.lightbox:not([hidden]) { animation: lb-fade .32s ease both; }   /* 背景幕立即淡入(点击有反馈);画框/展签/右卡另由 .lb-ready 把关 */
.lightbox .lb-stage { opacity: 0; }                               /* 画框+底部展签先压住,等图载完+定位后由 .lb-ready 揭示 */
.lightbox.lb-ready .lb-stage { opacity: 1; }                      /* 揭示后的静止态(reduced-motion 下 animation:none 也靠这个即时显示) */
/* 一次性进场:画框+底部展签(.lb-stage)与右卡(.lb-aside)共用同一条 lb-stage-in(同样上浮+轻放大+淡入),
   一起浮现;动画结束(见 JS animationend)即撤 .lb-entering,把右卡交还给翻页/缩放的常态 transition,避免 both 填充把翻页态钉死。 */
.lightbox.lb-entering .lb-stage,
.lightbox.lb-entering .lb-aside { animation: lb-stage-in .52s cubic-bezier(.22,.61,.36,1) both; }
/* 移步换画:整幅装裱(框+画+底部展签)作为一个组 .lb-stage 整体淡出/淡入——必须组淡,不能逐元素淡。
   逐元素淡时画框落影是"实时叠在各自淡入的展签上":卡面暗时影看不出、卡面一亮影对比度突然拉满 = 影子"突然冒出";
   组淡则影与象牙底当成一张预合成图同步变透明,浓淡始终正比(与开场 lb-stage-in 同理)。 */
.lb-stage { transition: opacity .25s ease; }
.lightbox.lb-ready .lb-stage.swapping { opacity: 0; }   /* 特异性压过 .lightbox.lb-ready .lb-stage{opacity:1} */
/* 缩放变换不加过渡:即时生效,保证 applyZoom 写完立刻量到的就是目标盒(夹紧才准);
   滚轮/捏合本就连续,视觉已平滑。.panning 仅作拖拽时的光标标记。 */
.lightbox.zoomed .lb-frame { cursor: grab; }
.lightbox.zoomed .lb-frame.panning { cursor: grabbing; }
/* 顶栏右侧工具组:缩放 pill(− 百分比 +)+ 退出键并排,与退出/导航同一套美术馆 chrome
   (透明底、细描边、等宽字、金色 hover);align-items:stretch 让缩放 pill 与退出键等高对齐 */
.lb-tools { display: inline-flex; align-items: stretch; gap: .7rem; }
.lb-zoom { display: inline-flex; align-items: stretch; background: rgba(20,15,9,.6);
  border: 1px solid rgba(236,228,213,.38); border-radius: 2px; overflow: hidden; }
.lb-zoom-btn, .lb-zoom-level { display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); color: var(--room-ink); background: transparent; border: 0;
  cursor: pointer; transition: color .18s, background .18s; }
.lb-zoom-btn { width: 2.1rem; font-size: 1.05rem; line-height: 1; }
.lb-zoom-level { min-width: 3.5rem; font-size: .72rem; font-weight: 400; letter-spacing: .1em;
  border-left: 1px solid rgba(236,228,213,.24); border-right: 1px solid rgba(236,228,213,.24); }
.lb-zoom-btn:hover, .lb-zoom-level:hover { color: #15110a; background: var(--room-gold); }
.lb-zoom-btn:disabled { color: #6c6452; cursor: default; background: transparent; }
/* 放大态闲置:chrome(顶栏/箭头/展签/提示)淡出露出整幅作品;动鼠标/触摸/复位即渐现。
   pointer-events:none 让隐藏后点击穿透到图继续平移;!important 压过提示常驻动画/展签 swap。
   各元素 opacity 过渡加在各自 base 上(见 .lb-top/.lb-nav/.lb-hint),不互相覆盖。 */
.lightbox.chrome-hidden .lb-top,
.lightbox.chrome-hidden .lb-nav,
.lightbox.chrome-hidden .lb-label,
.lightbox.chrome-hidden .lb-aside,
.lightbox.chrome-hidden .lb-hint { opacity: 0 !important; pointer-events: none; }

/* ===== 跨页过渡:支持 View Transitions 的浏览器(Chromium)柔和淡入;不支持的退化为纯 CSS 进场 ===== */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .26s ease both; }
::view-transition-new(root) { animation: vt-in .44s cubic-bezier(.22,.61,.36,1) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@supports not (view-transition-name: none) {
  @keyframes page-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  main { animation: page-rise .5s cubic-bezier(.22,.61,.36,1) both; }
}

@media (max-width: 680px) { .specsheet { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; }
  /* QR 行窄屏折两行:label+删除键 / URL 整行,placeholder 不再被裁 */
  .qr-row { grid-template-columns: minmax(0, 1fr) auto; }
  .qr-row .qr-del { grid-row: 1; grid-column: 2; }
  .qr-row .qr-url { grid-column: 1 / -1; }
  .nav { gap: 1rem; } .nav nav { gap: 1.2rem; }
  .gallery-head { align-items: flex-start; } .enter-exhibition { margin-left: 0; }
  .lb-label { max-width: 100%; } .lb-top { padding: .9rem 1rem; } .lb-hint { display: none; }
  .lb-mark { font-size: 0; gap: 0; }            /* 窄屏只留 ⊕ 图标,给顶栏工具组腾位 */
  .lb-tools { gap: .45rem; } .lb-zoom-btn { width: 1.85rem; } .lb-zoom-level { min-width: 2.9rem; }
  body.page-gallery .grid { grid-template-columns: 1fr; }
  .lb-nav { width: 2.5rem; height: 2.5rem; font-size: 1.5rem; }
  .lb-prev { left: .4rem; } .lb-next { right: .4rem; } }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* 定价:改版"按成本"行强调 + 厚道说明框(金色暖强调) */
.price-row-cost { border-left: 3px solid var(--tape); }
.price-row .amt .lt { color: var(--tape); font-weight: 700; margin-right: .06rem; }
.price-row .sub .cost-tag { color: var(--tape); font-weight: 700; }
.note-generous { border: 1px solid var(--tape); background: rgba(201,168,106,.1);
  padding: 1rem 1.15rem; border-radius: 2px; font-size: .94rem; line-height: 1.58;
  color: var(--ink); margin: 1.4rem 0; }
.note-generous .lead { font-family: var(--serif); font-weight: 600; }
.note-generous strong { color: var(--proof-2); }
.note-receipt { font-size: .92rem; color: var(--muted); margin: 1.2rem 0 0; }
.note-receipt strong { color: var(--ink); }
/* 定价:模型卖点(蓝色校样边强调,区别于改版的金色框) */
.note-models { border-left: 2px solid var(--proof); padding-left: .8rem; color: var(--ink);
  font-size: .96rem; line-height: 1.58; margin: 1.4rem 0; }
.note-models strong { color: var(--proof-2); }
/* 状态页:收据隐私告知(蓝色校样框,安抚式增信——收据走邮件隐私链接,不上公开页) */
.receipt-privacy { border: 1px solid var(--proof); background: var(--proof-dim);
  padding: .9rem 1.1rem; border-radius: 2px; font-size: .92rem; line-height: 1.56;
  color: var(--ink); margin: 1.4rem 0 0; }
.receipt-privacy strong { color: var(--proof-2); }
.revision-cost { border: 1px solid var(--proof); background: var(--proof-dim);
  padding: .8rem 1.05rem; border-radius: 2px; font-size: .92rem; line-height: 1.56;
  color: var(--ink); margin: .9rem 0 0; }
.revision-cost strong { color: var(--proof-2); }

/* 首页:付款点金色标记 + 前沿模型徽章(决策点增信) */
.specsheet .step .n .pay { color: var(--tape); font-weight: 600; }
.ai-badge { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.6rem;
  font-family: var(--mono); font-size: .79rem; letter-spacing: .02em; color: var(--muted);
  border: 1px solid var(--line-2); border-radius: 999px; padding: .44rem .9rem; background: var(--sheet); }
.ai-badge .dot { width: .44rem; height: .44rem; border-radius: 50%; background: var(--tape); flex: none; }
.ai-badge strong { color: var(--ink); font-weight: 600; }