/* ══ 光子方程 Lenscript 主站样式表 · 2026-10-06「暗房与相纸」
   唯一权威是 _generator/DESIGN.md；本表是它的落地。
   照片是主角，界面是画框：纸色底、墨色字、1px 发丝线分隔，强调色只给链接下划线、
   焦点、选中与极少的标记。深色主题是暗房：暖调近黑，照片在里面更亮。
   无外部字体 / CDN；动效只动 transform、opacity、clip-path、filter，
   prefers-reduced-motion 下全部关掉；无 JS 时内容完整可见（隐藏初态只挂在 .js 下）。

   主题选择器三套缺一不可：
     :root 浅色 · @media(prefers-color-scheme:dark) :root:not([data-theme="light"]) 跟随系统 ·
     :root[data-theme="dark"] 手动深色

   章节：1 令牌 · 2 重置 · 3 排版 · 4 栅格 · 5 导航 · 6 按钮 · 7 卡片与表单 · 8 媒体 ·
   9 区块 · 10 首页 · 11 状态与杂项 · 12 页脚 · 13 长文（教程 / 法务，生成器依赖）·
   14 动效与打印。页面私有样式由 A2 维护在文件末尾的 PAGES 区块里。
   ══ */

/* ── 1. 令牌（对比度实算值见 DESIGN.md §1）── */
:root{
  --bg:#F4F1EA;        /* 相纸 */
  --bg-pure:#FBFAF6;
  --bg-raised:#EAE6DC;
  --bg-deep:#14120F;   /* 影像容器底色 */
  --fg:#1B1915;        /* 墨 */
  --fg-2:#58534A;
  --fg-3:#6B655B;
  --line:#DCD6CA;      /* 发丝线（装饰性分隔） */
  --line-ui:#8E877A;   /* 表单与按钮的边框，≥3:1 */
  --line-strong:#1B1915;
  --accent:#A8401C;    /* 安全灯红 */
  --accent-fg:#FFFFFF;
  --focus:#A8401C;
  --overlay:rgba(14,12,10,.5);
  --danger:#A3261C;
  --ok:#1F6A45;

  --font-sans:"Inter","SF Pro Text",-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Noto Sans SC","Source Han Sans SC","Microsoft YaHei","Segoe UI",sans-serif;
  /* 衬线只给英文标题与品牌宣言；栈里不许有 SimSun（Windows 上会抢先命中成细硬宋体）。 */
  --font-serif:"New York","Iowan Old Style","Charter","Georgia","Songti SC","Noto Serif CJK SC","Source Han Serif SC",serif;
  --font-mono:"SF Mono","JetBrains Mono",Menlo,Consolas,"Liberation Mono","Noto Sans Mono",ui-monospace,monospace;

  --t-display:clamp(2.5rem,1.5rem + 4vw,5rem);
  --t-h1:clamp(2.125rem,1.45rem + 2.7vw,3.75rem);
  --t-h2:clamp(1.625rem,1.25rem + 1.5vw,2.625rem);
  --t-h3:clamp(1.1875rem,1.1rem + .35vw,1.375rem);
  --t-lead:clamp(1.0625rem,1rem + .3vw,1.25rem);
  --t-body:clamp(1rem,.97rem + .12vw,1.0625rem);
  --t-small:.875rem;
  --t-micro:.8125rem;
  --t-meta:.75rem;     /* 取景器小字：等宽、大写、字距 .08em */
  --t-nav:.9375rem;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:144px;
  --section-y:clamp(72px,5vw + 32px,128px);
  --section-y-tight:clamp(44px,3vw + 20px,72px);
  --section-y-loose:clamp(96px,9vw + 24px,192px);
  --gutter:clamp(20px,4vw,64px);
  --max:1440px;
  --wide:1280px;
  --text:640px;
  --measure:640px;
  --prose:42rem;
  --col-gap:clamp(16px,2vw,32px);
  --radius-img:3px; --radius-card:6px; --radius-btn:999px; --radius-tag:4px; --radius-input:6px;
  --shadow-ui:0 1px 2px rgba(20,16,10,.06),0 8px 24px -12px rgba(20,16,10,.18);

  --nav-h:68px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:160ms; --t-mid:240ms; --t-slow:600ms;

  /* 主题快照：自带不透明底的浮层（下拉、全屏菜单）用它把被局部覆写的令牌还原回主题值。 */
  --fg-theme:var(--fg); --fg-2-theme:var(--fg-2); --fg-3-theme:var(--fg-3);
  --bg-theme:var(--bg); --line-theme:var(--line); --line-strong-theme:var(--line-strong);
  --accent-theme:var(--accent); --accent-fg-theme:var(--accent-fg); --focus-theme:var(--focus);

  color-scheme:light;
}
@media (max-width:1024px){:root{--nav-h:60px}}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#121110; --bg-pure:#1A1917; --bg-raised:#23211E; --bg-deep:#0A0908;
    --fg:#ECE8E0; --fg-2:#B3ADA2; --fg-3:#948E83;
    --line:#2E2B27; --line-ui:#6F695F; --line-strong:#ECE8E0;
    --accent:#E37B52; --accent-fg:#121110; --focus:#E37B52;
    --overlay:rgba(0,0,0,.55); --danger:#F08A7E; --ok:#74CF9C;
    --shadow-ui:0 1px 2px rgba(0,0,0,.5),0 12px 28px -12px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121110; --bg-pure:#1A1917; --bg-raised:#23211E; --bg-deep:#0A0908;
  --fg:#ECE8E0; --fg-2:#B3ADA2; --fg-3:#948E83;
  --line:#2E2B27; --line-ui:#6F695F; --line-strong:#ECE8E0;
  --accent:#E37B52; --accent-fg:#121110; --focus:#E37B52;
  --overlay:rgba(0,0,0,.55); --danger:#F08A7E; --ok:#74CF9C;
  --shadow-ui:0 1px 2px rgba(0,0,0,.5),0 12px 28px -12px rgba(0,0,0,.7);
  color-scheme:dark;
}

/* 压在影像上的区块（终章、样例页的深色块）：局部翻到暗房那档，不动全局。 */
.section--dark,.cta-final,.on-photo{
  --bg:var(--bg-deep); --bg-pure:#1A1917; --bg-raised:#23211E;
  --fg:#F3F0EA; --fg-2:#C9C3B8; --fg-3:#A39D92;
  --line:rgba(255,255,255,.18); --line-ui:rgba(255,255,255,.5); --line-strong:#F3F0EA;
  --accent:#E37B52; --accent-fg:#121110; --focus:#F3F0EA;
  --danger:#F08A7E; --ok:#74CF9C;
  color-scheme:dark;
}
.section--dark,.cta-final{background:var(--bg);color:var(--fg)}

/* ── 2. 重置 ── */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px);
}
body{
  margin:0;padding-top:var(--nav-h);
  background:var(--bg);color:var(--fg);
  font-family:var(--font-sans);font-size:var(--t-body);line-height:1.75;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-kerning:normal;overflow-x:hidden;
}
html:lang(en) body{line-height:1.65}
body[data-hero="dark"]{padding-top:0}
body.is-locked{overflow:hidden}
img,svg,video,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
hr{border:0;border-top:1px solid var(--line);margin:var(--space-7) 0}
code,kbd,samp{font-family:var(--font-mono);font-size:.9em}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
::selection{background:color-mix(in srgb,var(--accent) 24%,transparent);color:var(--fg)}
html{scrollbar-color:color-mix(in srgb,var(--fg) 28%,transparent) transparent}

.skip,.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip:focus{
  position:fixed;left:var(--gutter);top:12px;z-index:200;width:auto;height:auto;
  clip:auto;clip-path:none;background:var(--bg-pure);color:var(--fg);
  padding:12px 18px;border:1px solid var(--line-strong);border-radius:var(--radius-input);
}
main[tabindex="-1"]:focus{outline:none}

/* ── 3. 排版 ── */
h1,h2,h3,h4,h5,h6{margin:0;font-weight:500;color:var(--fg);text-wrap:balance}
p{margin:0;text-wrap:pretty}
p+p{margin-top:1em}
.display,.h1,.h2,.h3{display:block}
.display{font-size:var(--t-display);line-height:1.04;letter-spacing:-.03em}
h1,.h1{font-size:var(--t-h1);line-height:1.1;letter-spacing:-.025em}
h2,.h2{font-size:var(--t-h2);line-height:1.18;letter-spacing:-.018em}
h3,.h3{font-size:var(--t-h3);line-height:1.35;letter-spacing:-.005em}
h4{font-size:1.0625rem;line-height:1.45}
/* 页面主标题 1–2 行，不留孤字；中文用 em（ch 在中文字体里只有半个字宽）。 */
#main:not(.article) h1:not(.display){max-width:13em}
html:lang(en) #main:not(.article) h1:not(.display){max-width:16em}

/* 英文大标题走系统衬线 400：杂志的那一口气。中文一律无衬线 500——Windows 的雅黑只有
   常规与粗体两档，600 会直接落到粗体，就是所有者说的「超大粗黑」。 */
html:lang(en) :is(.display,h1,h2,.h1,.h2,.serif){font-family:var(--font-serif);font-weight:400;letter-spacing:-.015em}
html:lang(en) :is(h3,h4,.h3){font-weight:600}
html:lang(en) :is(h2.h3,.footer__col h2,.toc h2,.related h2,.state__title,.nav h2){font-family:var(--font-sans);font-weight:600;letter-spacing:0}
.serif{font-family:var(--font-serif);font-weight:400}
html[lang="zh-CN"] :is(.serif,.display,.hero h1,.gfeat__title,.coda__line){font-family:var(--font-sans);font-weight:400;letter-spacing:-.02em}

.mono{font-family:var(--font-mono)}
.mono,.nums{font-variant-numeric:tabular-nums}
.lead{font-size:var(--t-lead);line-height:1.65;color:var(--fg-2);max-width:40em}
html:lang(zh-CN) .lead{max-width:34em}
.small{font-size:var(--t-small);line-height:1.65;color:var(--fg-2)}
.micro{font-size:var(--t-micro);line-height:1.5;color:var(--fg-3)}
/* 取景器小字：等宽、大写、字距放开。克制使用：眉题、参数、日期、状态。 */
.eyebrow,.meta-mono{
  display:block;margin:0 0 var(--space-4);
  font-family:var(--font-mono);font-size:var(--t-meta);line-height:1.5;
  letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);font-weight:400;
}
.meta-mono{display:inline;margin:0}
.measure{max-width:var(--measure)}
.muted{color:var(--fg-2)}
.nowrap{white-space:nowrap}

/* 链接：墨色字 + 细下划线，悬停时下划线从左向右换成强调色。 */
.link,.richtext a:not(.btn),.prose a:not(.btn),.faq .a a,.backlink a,.allguides a{
  color:var(--fg);text-decoration:none;
  background:linear-gradient(var(--accent),var(--accent)) left bottom/0 1px no-repeat,
             linear-gradient(color-mix(in srgb,var(--fg) 35%,transparent),color-mix(in srgb,var(--fg) 35%,transparent)) left bottom/100% 1px no-repeat;
  padding-bottom:1px;
  transition:background-size var(--t-mid) var(--ease),color var(--t-fast) var(--ease);
}
.link:hover,.richtext a:not(.btn):hover,.prose a:not(.btn):hover,.faq .a a:hover,.backlink a:hover,.allguides a:hover{
  background-size:100% 1px,100% 1px;
}

/* ── 4. 栅格 ── */
.wrap{width:100%;max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}
.wrap--max{max-width:var(--max)}
@media (min-width:1280px){:root{--wide:var(--max)}}   /* 全站一条竖线：导航、页头、正文同左缘 */
.wrap--text{max-width:calc(var(--text) + var(--gutter) * 2)}
.bleed{margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap)}
.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-5{grid-column:span 5}
.span-6{grid-column:span 6}.span-7{grid-column:span 7}.span-8{grid-column:span 8}
.span-12{grid-column:span 12}
.grid--center{align-items:center}
@media (max-width:1024px){.span-3,.span-4,.span-5,.span-6,.span-7,.span-8{grid-column:span 6}}
@media (max-width:640px){.span-3,.span-4,.span-5,.span-6,.span-7,.span-8{grid-column:span 12}}
.stack>*+*{margin-top:var(--space-5)}
.stack--tight>*+*{margin-top:var(--space-3)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-5)}
.mt-4{margin-top:var(--space-4)}.mt-5{margin-top:var(--space-5)}.mt-6{margin-top:var(--space-6)}
.mt-7{margin-top:var(--space-7)}.mt-8{margin-top:var(--space-8)}
.center{text-align:center}
.a2-head{max-width:1060px}
.a2-narrow{max-width:900px}
.lead.a2-narrow{max-width:720px}
.about-principles{max-width:920px}

/* ── 5. 导航 ──
   固定在顶；向下滚收起、向上滚出现（nav.js 加 .is-hidden）；离开页顶（深色首屏页是
   滚过首屏）后才铺纸色底与 1px 底线（.is-scrolled）。 */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav-h);
  background:transparent;border-bottom:1px solid transparent;
  transition:background var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease),
             transform 420ms var(--ease);
}
.nav.is-scrolled{
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);
  border-bottom-color:var(--line);
}
.nav.is-hidden{transform:translateY(-100%)}
.nav--on-dark:not(.is-scrolled){
  /* 压在照片上时文字**不降透明度**：--fg-2 / --fg-3 在纸色底上是不透明色，压到照片上
     就成了半透明，越透越看不清。2026-10-11 实算：同样的压暗带下 64% 白只有 3.89:1，
     82% 白 5.21:1，纯白 6.79:1（WCAG 正常字号要 4.5）。所以这里只留很小的层级差。 */
  --fg:#FFFFFF; --fg-2:rgba(255,255,255,.90); --fg-3:rgba(255,255,255,.82);
  --bg:#14120F; --line:rgba(255,255,255,.24); --line-ui:rgba(255,255,255,.6); --line-strong:#FFFFFF;
  --accent:#E37B52; --accent-fg:#121110; --focus:#FFFFFF;
  color:#FFFFFF;
}
/* 透明导航压在首屏照片上时，自带一条压暗带——**导航自己负责自己的可读性**，
   不靠首屏那张照片恰好在那里够暗。
   起因：首屏照片最亮的地方正好是天空，而导航就在最上面；原来只有
   `.hero__media::after` 那条「自下而上」的渐变，它在最顶上只压 .18，
   2026-10-11 逐像素核算下来导航白字最坏 1.14:1、中位 1.47:1（WCAG 要 4.5:1）。
   带子按 --nav-h 定高（+76px 收尾），与首屏高度无关；换成别的首屏照片也一样管用。
   滚过首屏后 .is-scrolled 铺纸色底，这条自动让位。 */
.nav--on-dark:not(.is-scrolled)::after{
  content:"";position:absolute;left:0;right:0;top:0;
  height:calc(var(--nav-h) + 76px);z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,9,8,.64) 0%,rgba(10,9,8,.54) 58%,rgba(10,9,8,0) 100%);
}
.nav__inner{
  display:flex;align-items:center;gap:var(--space-5);height:100%;
  max-width:var(--max);margin:0 auto;padding:0 var(--gutter);
}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--fg);flex:0 0 auto}
.brand__mark{width:22px;height:22px;flex:0 0 auto;color:var(--fg);transition:transform 600ms var(--ease)}
.brand:hover .brand__mark{transform:rotate(-30deg)}
.brand__name,.brand .bz{font-size:.9375rem;font-weight:500;letter-spacing:.04em;white-space:nowrap}
html:lang(en) .brand .bz{letter-spacing:.01em;font-weight:600}
.brand .be{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;color:var(--fg-3);white-space:nowrap;text-transform:uppercase}
@media (max-width:820px){.brand .be{display:none}}

.nav__links{display:flex;align-items:center;gap:2px;margin:0 auto;padding:0;list-style:none}
.nav__item{position:relative}
.nav__link{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  height:40px;padding:0 12px;border:0;background:none;cursor:pointer;
  font-size:var(--t-nav);line-height:1;color:var(--fg-2);
  transition:color var(--t-fast) var(--ease);
}
.nav__link::after,.nav__text::after{
  content:"";position:absolute;left:12px;right:12px;bottom:6px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-mid) var(--ease);
}
.nav__link:hover,.nav__link[aria-expanded="true"]{color:var(--fg)}
.nav__link[aria-current]{color:var(--fg)}
.nav__link[aria-current]::after,.nav__text[aria-current]::after{transform:none}
.nav__link:hover::after{transform:none}
.nav__caret{width:9px;height:9px;flex:0 0 auto;transition:transform var(--t-mid) var(--ease)}
.nav__link[aria-expanded="true"] .nav__caret{transform:rotate(180deg)}

.nav__panel{
  --fg:var(--fg-theme); --fg-2:var(--fg-2-theme); --fg-3:var(--fg-3-theme);
  --bg:var(--bg-theme); --line:var(--line-theme); --line-strong:var(--line-strong-theme);
  --accent:var(--accent-theme); --accent-fg:var(--accent-fg-theme); --focus:var(--focus-theme);
  color:var(--fg);
  position:absolute;top:calc(100% + 8px);left:-8px;z-index:10;
  min-width:300px;padding:var(--space-3);
  background:var(--bg-pure);border:1px solid var(--line);
  border-radius:var(--radius-card);box-shadow:var(--shadow-ui);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease),visibility 0s linear var(--t-mid);
}
.nav__item.is-open .nav__panel{
  opacity:1;visibility:visible;transform:none;
  transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease),visibility 0s;
}
.nav__item:last-child .nav__panel{left:auto;right:-8px}
.nav__panel[hidden]{display:none}
.nav__cols{display:grid;grid-template-columns:repeat(var(--cols,1),minmax(230px,1fr));gap:var(--space-2) var(--space-4)}
.nav__group{margin:0;padding:0;list-style:none}
.nav__grouphead{
  display:block;margin:var(--space-2) 0 var(--space-2);padding:0 12px;
  font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);
}
.nav__panel a{display:block;padding:9px 12px;border-radius:var(--radius-input);color:var(--fg);transition:background var(--t-fast) var(--ease)}
.nav__panel a:hover,.nav__panel a:focus-visible{background:var(--bg-raised)}
.nav__panel b{display:block;font-size:.9375rem;font-weight:500;line-height:1.35}
.nav__panel span{display:block;margin-top:2px;font-size:var(--t-micro);color:var(--fg-2);line-height:1.45}

.nav__actions{display:flex;align-items:center;gap:var(--space-2);flex:0 0 auto}
.nav__text{
  position:relative;display:inline-flex;align-items:center;height:40px;padding:0 12px;
  font-size:var(--t-nav);line-height:1;color:var(--fg-2);transition:color var(--t-fast) var(--ease);
}
.nav__text:hover,.nav__text[aria-current]{color:var(--fg)}
.nav__text:hover::after{transform:none}

/* ⚠️ class="lang" 是 tools/legal/build.py 的契约，不要改名。 */
.lang{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.06em;color:var(--fg-3)}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:40px;color:var(--fg-2);transition:color var(--t-fast) var(--ease)}
.lang a:hover{color:var(--fg)}
.lang a[aria-current]{color:var(--fg)}
.lang span{opacity:.5}
@media (pointer:coarse){.lang a{min-width:44px;min-height:44px}}

/* ⚠️ .themebtn 是 theme.js 的契约。 */
.themebtn,.menubtn,.navmenu__close{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:40px;height:40px;padding:0;cursor:pointer;color:var(--fg-2);
  background:none;border:1px solid transparent;border-radius:50%;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.themebtn:hover,.menubtn:hover,.navmenu__close:hover{color:var(--fg);border-color:var(--line)}
.themebtn svg,.menubtn svg,.navmenu__close svg{width:18px;height:18px}
@media (pointer:coarse){.themebtn,.menubtn,.navmenu__close{width:44px;height:44px}}
.themebtn .ic-moon{display:inline}
.themebtn .ic-sun{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .themebtn .ic-moon{display:none}
  :root:not([data-theme="light"]) .themebtn .ic-sun{display:inline}
}
:root[data-theme="dark"] .themebtn .ic-moon{display:none}
:root[data-theme="dark"] .themebtn .ic-sun{display:inline}

.menubtn{display:none}
@media (max-width:1024px){
  .nav__links,.nav__actions .nav__text,.nav__actions .btn{display:none}
  .menubtn{display:inline-flex}
  .nav__inner{gap:var(--space-2)}
  .brand{margin-right:auto}
}
@media (min-width:1025px) and (max-width:1200px){
  .nav__inner{gap:var(--space-3)}
  .nav__link{padding:0 8px}
  .nav__link::after{left:8px;right:8px}
  .nav__actions{gap:var(--space-1)}
  .nav__actions .nav__text{display:none}
}

/* 全屏菜单：纸色整屏，大字一级项，进场时逐行淡入。 */
.nav__menu{
  --fg:var(--fg-theme); --fg-2:var(--fg-2-theme); --fg-3:var(--fg-3-theme);
  --bg:var(--bg-theme); --line:var(--line-theme); --line-strong:var(--line-strong-theme);
  --accent:var(--accent-theme); --accent-fg:var(--accent-fg-theme); --focus:var(--focus-theme);
  position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;
  background:var(--bg);color:var(--fg);
  opacity:0;transition:opacity var(--t-mid) var(--ease);
}
.nav__menu[hidden]{display:none}
.nav__menu.is-open{opacity:1}
.navmenu__head{
  display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;
  height:var(--nav-h);padding:0 var(--gutter);border-bottom:1px solid var(--line);
}
.navmenu__body{flex:1 1 auto;overflow-y:auto;padding:var(--space-3) var(--gutter) var(--space-8)}
.navmenu__body ul{margin:0;padding:0;list-style:none}
.navmenu__body nav>ul>li{
  border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(10px);
  transition:opacity 420ms var(--ease),transform 420ms var(--ease);
  transition-delay:calc(var(--i,0) * 50ms + 60ms);
}
.nav__menu.is-open .navmenu__body nav>ul>li{opacity:1;transform:none}
.navmenu__body nav>ul>li>a,.navmenu__body nav>ul>li>span{
  display:flex;align-items:center;min-height:60px;
  font-size:clamp(1.375rem,1.1rem + 1.2vw,1.75rem);font-weight:500;letter-spacing:-.01em;color:var(--fg);
}
html:lang(en) .navmenu__body nav>ul>li>:is(a,span){font-family:var(--font-serif);font-weight:400}
.navmenu__body .navmenu__sub{display:flex;flex-wrap:wrap;gap:0 var(--space-5);padding:0 0 var(--space-4)}
.navmenu__sub a{display:flex;align-items:center;min-height:44px;font-size:.9375rem;color:var(--fg-2)}
.navmenu__sub a:hover{color:var(--fg)}
.navmenu__label{display:block;margin:var(--space-6) 0 var(--space-2);font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.08em;color:var(--fg-3)}
.navmenu__foot{
  flex:0 0 auto;display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-4) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--bg);
}
.navmenu__foot .btn{flex:1 1 auto;justify-content:center}

/* ── 6. 按钮 ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:48px;padding:0 24px;border-radius:var(--radius-btn);
  border:1px solid transparent;background:none;cursor:pointer;
  font-size:.9375rem;font-weight:500;line-height:1;white-space:nowrap;text-align:center;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px;height:16px;flex:0 0 auto}
.btn--primary,.btn-a{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn--primary:hover,.btn-a:hover{background:color-mix(in srgb,var(--fg) 84%,var(--bg));border-color:transparent}
.btn--accent{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.btn--accent:hover{background:color-mix(in srgb,var(--accent) 86%,var(--fg))}
.btn--secondary,.btn-b{color:var(--fg);border-color:var(--line-ui)}
.btn--secondary:hover,.btn-b:hover{border-color:var(--line-strong);background:color-mix(in srgb,var(--fg) 5%,transparent)}
.btn--ghost{height:auto;min-height:44px;padding:0 2px;border-radius:0;color:var(--fg)}
.btn--ghost:hover{color:var(--fg)}
.btn .arr{transition:transform var(--t-mid) var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.btn--sm{height:40px;padding:0 18px;font-size:var(--t-small)}
.btn--ghost.btn--sm{height:auto;padding:0 2px}
@media (pointer:coarse){.btn--sm{height:44px}}
.btn--block{display:flex;width:100%}
.btn[aria-disabled="true"],.btn:disabled{opacity:.45;pointer-events:none}
.btn--primary[aria-disabled="true"]{opacity:1;cursor:not-allowed;background:var(--fg-2);border-color:var(--fg-2);color:var(--bg)}

/* ── 7. 卡片与表单 ── */
.card{
  display:block;padding:28px;background:transparent;
  border:1px solid var(--line);border-radius:var(--radius-card);
  transition:border-color var(--t-mid) var(--ease),background var(--t-mid) var(--ease);
}
.card--link:hover,a.card:hover{border-color:color-mix(in srgb,var(--line-strong) 35%,transparent)}
.card__title{margin:0 0 var(--space-2);font-size:var(--t-h3);line-height:1.3}
.card__text{margin:0;color:var(--fg-2);font-size:var(--t-small);line-height:1.7}
.card__foot{margin-top:var(--space-5);font-size:var(--t-small);color:var(--fg-3)}
.card--raised{background:var(--bg-pure)}
.card>.figure{margin-bottom:var(--space-5)}
@media (max-width:640px){.card{padding:20px}}
.cards{display:grid;gap:var(--col-gap);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:0;padding:0;list-style:none}
.cards>li>.card{height:100%}
.hcatgrid>.hcat{display:flex;flex-direction:column}
.catgrid.hcatgrid{grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.hcat__h{margin:0;font-size:1rem;font-weight:500;line-height:1.4;color:var(--fg)}
.hcat>.hcat__more{margin:auto 0 0;padding-top:var(--space-4);font-size:var(--t-micro);color:var(--fg-3);line-height:1.6}

.field{display:block;margin:0 0 var(--space-5)}
.field__label{display:block;margin:0 0 6px;font-size:var(--t-micro);color:var(--fg-2)}
.input,.select,.textarea{
  display:block;width:100%;height:48px;padding:0 14px;
  background:var(--bg-pure);color:var(--fg);
  border:1px solid var(--line-ui);border-radius:var(--radius-input);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.textarea{height:auto;min-height:120px;padding:12px 14px;line-height:1.6;resize:vertical}
.select{appearance:none;padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.input::placeholder,.textarea::placeholder{color:var(--fg-3)}
.input:focus,.select:focus,.textarea:focus,
.field--error :is(.input,.select,.textarea):focus,.field--success :is(.input,.select,.textarea):focus{
  outline:none;border-color:var(--fg);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent);
}
.field__hint{display:block;margin-top:6px;font-size:var(--t-micro);color:var(--fg-3)}
.field__msg{display:flex;align-items:flex-start;gap:6px;margin-top:6px;font-size:var(--t-micro);line-height:1.5}
.field__msg svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px}
.field--error :is(.input,.select,.textarea){border-color:var(--danger)}
.field--error .field__msg{color:var(--danger)}
.field--success .input{border-color:var(--ok)}
.field--success .field__msg{color:var(--ok)}
.checkbox{display:flex;align-items:flex-start;gap:10px;font-size:var(--t-small);color:var(--fg-2)}
.checkbox input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--fg);flex:0 0 auto}
.acctlist li{padding:10px 0;font-size:var(--t-small);color:var(--fg-2);line-height:1.6}
.acctlist li+li{border-top:1px solid var(--line)}
.acctlist b{color:var(--fg);font-weight:500}
.authpane{border-top:1px solid var(--line)}
.authpane:last-of-type{border-bottom:1px solid var(--line)}
.authform{padding:var(--space-3) 0 var(--space-7)}
.authform .row .field__hint{margin:0;flex:1 1 200px;max-width:36ch}
.checklist{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.checklist li{position:relative;padding:14px 0 14px 28px;border-bottom:1px solid var(--line);color:var(--fg-2);line-height:1.6}
.checklist li::before{content:"";position:absolute;left:3px;top:1.35em;width:10px;height:5px;border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(-45deg)}

/* ── 8. 媒体 ── */
.frame{
  position:relative;overflow:hidden;margin:0;
  aspect-ratio:16/10;background:var(--bg-raised);
  border:1px solid var(--line);border-radius:var(--radius-card);
}
.frame--phone{aspect-ratio:9/19.5;max-width:300px;border-radius:22px}
.a2-phone{margin-left:auto;margin-right:auto}
.frame>img,.frame>picture>img{width:100%;height:100%;object-fit:cover}
.frame--ratio{aspect-ratio:var(--ar,16/10)}
.outgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);align-items:start}
@media (max-width:640px){.outgrid{gap:var(--space-3)}}

.figure{margin:0}
.figure__media{
  position:relative;overflow:hidden;display:block;
  background:var(--bg-raised);border-radius:var(--radius-img);aspect-ratio:3/2;
}
.figure--ratio .figure__media{aspect-ratio:var(--ar,3/2)}
.a2-shot .figure__media{aspect-ratio:var(--aspect,16/10);border:1px solid var(--line)}
.figure--portrait .figure__media{aspect-ratio:4/5}
.figure--wide .figure__media{aspect-ratio:21/9}
@media (max-width:640px){.figure--wide .figure__media{aspect-ratio:4/5}}
.figure--square .figure__media{aspect-ratio:1/1}
.figure--bleed .figure__media{border-radius:0}
.figure--auto .figure__media{aspect-ratio:auto;background:none}
.figure--auto .figure__media>img{height:auto}
.figure--native{max-width:var(--native-w);margin-inline:auto}
.figure__media>img,.figure__media>picture>img{width:100%;height:100%;object-fit:cover}
.figure figcaption{margin-top:12px;font-size:var(--t-micro);color:var(--fg-3);line-height:1.6}
.cropshot--a .figure__media>img{object-position:28% 62%}
.cropshot--b .figure__media>img{object-position:72% 38%}
.cropshot--c .figure__media>img{object-position:50% 88%}
.frame>picture,.figure__media>picture,.compare__media>picture,
.hero__media>picture,.cta-final__media>picture,.moodshot>picture,.gfeat__media>picture,
.coda__media>picture{display:block;width:100%;height:100%}

.overlay{position:absolute;inset:0;background:var(--overlay)}
.on-image{position:relative;z-index:1;color:#fff}

.moodshot{position:relative;overflow:hidden;margin:0;background:var(--bg-raised)}
.moodshot img{width:100%;height:100%;object-fit:cover;aspect-ratio:21/9}
.moodshot--card{border-radius:var(--radius-img)}
.moodshot--low img{object-position:50% 78%}
@media (max-width:640px){.moodshot img{aspect-ratio:4/5}}

.compare{margin:0}
.compare__media{position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--bg-raised);border-radius:var(--radius-img)}
.compare__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom}
.compare--portrait{max-width:460px;margin-inline:auto}
.compare--portrait .compare__media{aspect-ratio:4/5}
.compare--portrait .compare__media img{object-position:center}
.compare__b{clip-path:inset(0 0 0 var(--pos,50%))}
.compare__handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:1px;background:rgba(255,255,255,.92);pointer-events:none}
.compare__handle::after{
  content:"";position:absolute;top:50%;left:50%;width:36px;height:36px;
  transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid rgba(255,255,255,.92);background:rgba(10,9,8,.25);
}
.compare__legend{display:flex;justify-content:space-between;margin-top:10px;font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.compare__range{display:block;width:100%;margin:var(--space-3) 0 0;height:24px;background:none;appearance:none;cursor:ew-resize}
@media (pointer:coarse){.compare__range{height:44px}}
.compare__range::-webkit-slider-runnable-track{height:1px;background:var(--line-ui)}
.compare__range::-moz-range-track{height:1px;background:var(--line-ui)}
.compare__range::-webkit-slider-thumb{appearance:none;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--fg);border:0}
.compare__range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--fg);border:0}

.filmstrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap);margin:0;padding:0;list-style:none}
@media (max-width:640px){
  .filmstrip{grid-auto-flow:column;grid-auto-columns:78%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--space-4);scrollbar-width:none}
  .filmstrip::-webkit-scrollbar{display:none}
  .filmstrip>*{scroll-snap-align:start}
}

.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap);margin:0;padding:0;list-style:none}
@media (max-width:1024px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.gallery{grid-template-columns:minmax(0,1fr)}}
.gallery>li[hidden]{display:none}
.gallery figure{position:relative;margin:0}
.gallery .figure__media{aspect-ratio:4/5}
.gallery .figure__media img{transition:transform 900ms var(--ease)}
.gallery>li:hover .figure__media img{transform:scale(1.03)}
.gallery .gallery__meta{
  position:absolute;left:0;right:0;bottom:0;z-index:1;margin:0;padding:14px 16px;
  background:linear-gradient(to top,rgba(10,9,8,.72),rgba(10,9,8,0));color:#fff;
  border-radius:0 0 var(--radius-img) var(--radius-img);
  opacity:0;transition:opacity var(--t-mid) var(--ease);
}
.gallery>li:hover .gallery__meta,.gallery>li:focus-within .gallery__meta{opacity:1}
.gallery__meta b{display:block;font-size:.9375rem;font-weight:500}
.gallery__meta span{display:block;margin-top:3px;font-size:var(--t-micro);color:rgba(255,255,255,.85)}
@media (max-width:640px),(hover:none){
  .gallery .gallery__meta{position:static;opacity:1;padding:10px 0 0;background:none;color:var(--fg);border-radius:0}
  .gallery .gallery__meta span{color:var(--fg-3)}
}
.a2-covers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap);margin:0;padding:0;list-style:none}
@media (max-width:640px){.a2-covers{grid-template-columns:repeat(2,minmax(0,1fr))}}
.qrbox{margin:0;max-width:300px;padding:var(--space-5);text-align:center;background:var(--bg-pure);border:1px solid var(--line);border-radius:var(--radius-card)}
.qrbox img{width:100%;max-width:220px;height:auto;margin:0 auto;padding:8px;background:#fff;border-radius:var(--radius-input)}
.qrbox figcaption{margin-top:12px;font-size:var(--t-small);color:var(--fg-2);font-variant-numeric:tabular-nums}

/* 可交互地点卡（/products/lct/）：卡面永远是暗房色，不跟主题走。 */
.placecard{--pc-fg:#F4F3F1;--pc-fg-2:#B9B7B2;--pc-line:rgba(255,255,255,.16);--pc-line-hi:rgba(255,255,255,.34);--pc-accent:#E37B52;margin:0;width:100%}
.placecard__card{display:flex;flex-direction:column;overflow:hidden;background:var(--bg-deep);border:1px solid var(--pc-line);border-radius:var(--radius-card)}
.placecard__shot{position:relative;aspect-ratio:3/2;background:#1A1A1A}
.placecard__shot picture{display:block;position:absolute;inset:0}
.placecard__shot img{width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(1.03)}
.placecard__scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(8,8,10,.10),transparent 35%,rgba(8,8,10,.58) 100%)}
.placecard__meta{
  position:absolute;left:12px;right:12px;bottom:12px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 12px;padding:12px 14px 13px;
  background:rgba(8,8,10,.86);border:1px solid var(--pc-line);border-radius:var(--radius-input);
  font-family:var(--font-mono);letter-spacing:.05em;
}
.pcm-head{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;color:var(--pc-fg);font-weight:500;font-size:var(--t-micro)}
.pcm-soon{color:var(--pc-fg-2);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:400}
.pcm-cell{display:flex;flex-direction:column;gap:3px;min-width:0}
.pcm-cell b{color:var(--pc-fg-2);font-weight:400;font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.pcm-cell span{color:var(--pc-fg);font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.placecard__pick{display:flex;flex-wrap:wrap;gap:6px;padding:14px 14px 0}
.pcm-chip{
  font:inherit;font-size:var(--t-small);color:var(--pc-fg-2);cursor:pointer;
  min-height:44px;padding:0 14px;background:transparent;border:1px solid var(--pc-line);border-radius:999px;
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.pcm-chip:hover{border-color:var(--pc-line-hi);color:var(--pc-fg)}
.pcm-chip[aria-pressed="true"]{color:var(--pc-fg);border-color:var(--pc-accent);box-shadow:0 0 0 1px var(--pc-accent);background:rgba(227,123,82,.14)}
.pcm-chip:focus-visible{outline:2px solid var(--pc-accent);outline-offset:2px}
.placecard__note{margin:12px 0 0;padding:0 14px 14px;font-size:var(--t-micro);line-height:1.7;color:var(--pc-fg-2)}
.placecard__credit{margin-top:10px;font-size:var(--t-micro);color:var(--fg-3);line-height:1.6}
.placecard__credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.placecard__credit a:hover{color:var(--fg-2)}
.phead__media>.placecard{max-width:640px;margin-left:auto}
@media (max-width:1024px){.phead__media>.placecard{margin-left:0}}
@media (max-width:560px){
  .placecard__shot{aspect-ratio:1/1}
  .placecard__meta{grid-template-columns:repeat(2,minmax(0,1fr));left:9px;right:9px;bottom:9px;padding:10px 12px 11px;gap:8px 10px}
  .pcm-cell span{font-size:13px}
}

/* ── 9. 区块 ── */
.section{padding-block:var(--section-y)}
.section--tight{padding-block:var(--section-y-tight)}
.section--loose{padding-block:var(--section-y-loose)}
.section--pure{background:var(--bg-pure)}
.section--line{border-top:1px solid var(--line)}
.section--flush{padding-top:0}
.sec-join{padding-top:0}
#main>.section:first-child{padding-top:var(--section-y-tight)}
.section__head{max-width:42rem;margin:0 0 var(--space-8)}
.section__head--center{margin-left:auto;margin-right:auto;text-align:center}
.section__head .lead{margin-top:var(--space-5)}
.section__title{margin:0}

.feature{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap);align-items:center}
.feature__text{grid-column:span 5}
.feature__media{grid-column:7/span 6}
.feature--flip .feature__text{grid-column:8/span 5;grid-row:1}
.feature--flip .feature__media{grid-column:1/span 6;grid-row:1}
.feature--wide .feature__text{grid-column:span 4}
.feature--wide .feature__media{grid-column:6/span 7}
.feature+.feature{margin-top:var(--section-y)}
.feature__text>h2+p,.feature__text>.h2+p{margin-top:var(--space-5)}
html:lang(en) .feature__text h2{font-size:clamp(1.625rem,1.2rem + 1.3vw,2.375rem)}
.feature__points{margin:var(--space-5) 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.feature__points li{padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--t-small);color:var(--fg-2);line-height:1.6}
.feature__media>.compare--portrait,.feature__media>.frame--phone{margin-inline:auto}
@media (max-width:1024px){
  .feature__text,.feature__media,.feature--flip .feature__text,.feature--flip .feature__media,
  .feature--wide .feature__text,.feature--wide .feature__media{grid-column:1/-1;grid-row:auto}
  .feature__media{margin-top:var(--space-6)}
  .feature--flip .feature__media{order:-1;margin-top:0;margin-bottom:var(--space-6)}
}

.spec-list{margin:0;display:grid;grid-template-columns:minmax(120px,220px) minmax(0,1fr);gap:0}
.spec-list dt{padding:14px var(--space-4) 14px 0;font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.06em;color:var(--fg-3);border-top:1px solid var(--line)}
.spec-list dd{margin:0;padding:12px 0;font-size:1rem;color:var(--fg);font-variant-numeric:tabular-nums;border-top:1px solid var(--line)}
@media (max-width:640px){
  .spec-list{grid-template-columns:1fr}
  .spec-list dt{padding-bottom:0}
  .spec-list dd{padding-top:4px;border-top:0}
}

.cta-final{position:relative;overflow:hidden;isolation:isolate}
.cta-final__media{position:absolute;inset:0;z-index:-1}
.cta-final__media img{width:100%;height:100%;object-fit:cover}
.cta-final__media::after{content:"";position:absolute;inset:0;background:var(--overlay)}
.cta-final__body{position:relative;max-width:var(--text);padding-block:clamp(96px,11vw,200px)}
html:lang(en) .cta-final__body{max-width:860px}
.cta-final__body .btn{margin-top:var(--space-6)}
.cta-final__body,.cta-final__body h2,.cta-final__body .h2,.cta-final__body p{color:#fff}
.cta-final__body .eyebrow{color:rgba(255,255,255,.75)}
.cta-final__body .btn--primary{background:#F4F1EA;color:#1B1915;border-color:#F4F1EA}
.cta-final__body .btn--primary:hover{background:#fff;border-color:#fff}

/* 编辑式长列表：序号 · 文 · 图，发丝线分隔。不是卡片网格。 */
.editorial{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.editorial__item{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap);align-items:center;padding-block:var(--space-8);border-bottom:1px solid var(--line)}
.editorial__num{grid-column:span 1;align-self:start;font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.08em;color:var(--fg-3)}
.editorial__text{grid-column:span 5}
.editorial__media{grid-column:span 6}
.editorial__meta{margin:var(--space-5) 0 0;display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5);align-items:center}
.editorial__item .small{margin-top:var(--space-3)}
@media (max-width:1024px){
  .editorial__num,.editorial__text,.editorial__media{grid-column:1/-1}
  .editorial__media{margin-top:var(--space-4)}
}

.stepflow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--col-gap);margin:0;padding:0;list-style:none;counter-reset:step}
.stepflow>li{counter-increment:step;border-top:1px solid var(--line-strong);padding-top:var(--space-4)}
.stepflow>li::before{content:counter(step,decimal-leading-zero);display:block;margin-bottom:var(--space-3);font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.08em;color:var(--fg-3)}
.stepflow h3{font-size:1.0625rem;margin-bottom:6px}
.stepflow p{font-size:var(--t-small);color:var(--fg-2)}
.stepflow--plain>li p{margin:0;font-size:1.0625rem;line-height:1.6;color:var(--fg)}
.a2-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap);margin:0;padding:0;list-style:none}
.a2-trio>li{border-top:1px solid var(--line);padding-top:var(--space-4)}
@media (max-width:1024px){.a2-trio{grid-template-columns:1fr;gap:var(--space-7)}}

.timeline{margin:0;padding:0;list-style:none}
.timeline>li{position:relative;padding:0 0 var(--space-7) var(--space-6);border-left:1px solid var(--line)}
.timeline>li::before{content:"";position:absolute;left:-3.5px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--fg)}
.timeline>li:last-child{padding-bottom:0;border-left-color:transparent}
.tl-date{margin:5px 0 0;font-size:var(--t-small);color:var(--fg-2);line-height:1.6}
.tl-date time{font-family:var(--font-mono);font-size:.92em;font-variant-numeric:tabular-nums}

.log{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.log>li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--space-5);padding:var(--space-5) 0;border-bottom:1px solid var(--line)}
.log__date{font-family:var(--font-mono);font-size:var(--t-micro);font-variant-numeric:tabular-nums;color:var(--fg-3);padding-top:3px}
.log__text{margin:var(--space-3) 0 0;font-size:var(--t-body);line-height:1.7;color:var(--fg-2)}
@media (max-width:640px){.log>li{grid-template-columns:minmax(0,1fr);gap:var(--space-2)}}

.aboutclaim{margin:var(--space-8) 0 0;max-width:24ch;font-size:var(--t-h2);line-height:1.3;color:var(--fg)}
html:lang(en) .aboutclaim{max-width:27ch}
html[lang="zh-CN"] .aboutclaim{max-width:14em}

.trustbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trustbar ul{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2) var(--space-7);margin:0;padding:18px 0;list-style:none;font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}

.filters{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0 0 var(--space-6);padding:0;list-style:none}
.filters button,.chip,.catchip{
  display:inline-flex;align-items:center;gap:7px;
  min-height:34px;padding:0 14px;border:1px solid var(--line);border-radius:999px;
  background:none;color:var(--fg-2);font-size:var(--t-small);line-height:1.2;cursor:pointer;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.chip{cursor:default;font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.04em}
.filters button:hover,.catchip:hover{color:var(--fg);border-color:var(--line-ui)}
.filters button[aria-pressed="true"]{color:var(--bg);background:var(--fg);border-color:var(--fg)}
@media (pointer:coarse){.filters button,.catchip{min-height:44px}}

.plan{display:flex;flex-direction:column;height:100%;padding:28px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--bg-pure)}
.plan--rec{border-color:var(--line-strong)}
.plan__tag{display:block;margin:0 0 var(--space-3);font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.plan__price{margin:var(--space-4) 0 0;font-size:var(--t-h2);line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.plan__price--mid{font-size:var(--t-h3);line-height:1.3}
.plan__price--long{font-size:1.0625rem;line-height:1.6;letter-spacing:0}
.plan__tiers{margin:var(--space-3) 0 0;padding:0;list-style:none;font-size:var(--t-small);line-height:1.7;color:var(--fg-2);font-variant-numeric:tabular-nums}
.plan__note{margin:var(--space-3) 0 0;font-size:var(--t-small);color:var(--fg-2)}
.plan__list{margin:var(--space-5) 0 var(--space-6);padding:0;list-style:none;font-size:var(--t-small);color:var(--fg-2)}
.plan__list li{padding:7px 0;border-top:1px solid var(--line)}
.plan .btn{margin-top:auto}

/* 产品 / 场景页页头：左 5 文、右 7 图，单张按高度、多张按宽度定尺寸。 */
.phead{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4vw,80px);align-items:center;padding-top:var(--section-y-tight)}
.phead__text{max-width:36rem}
.phead__text .lead{margin-top:var(--space-5)}
.phead__text .row{margin-top:var(--space-7)}
.phead__media{min-width:0}
.phead__media .figure,.phead__media .frame{width:100%}
.phead__media>.figure{height:clamp(440px,62vh,740px)}
.phead__media>.figure,.phead__media>.figure .figure__media{aspect-ratio:auto}
.phead__media>.figure .figure__media{height:100%}
.phead__media>.figure picture{display:block;width:100%;height:100%}
.phead__media>.figure img{display:block;width:100%;height:100%;object-fit:cover}
.phead__media>.frame{aspect-ratio:auto;max-height:720px}
.phead__media>.frame>img,.phead__media>.frame>picture>img{width:100%;height:auto;max-height:720px;object-fit:contain}
@media (max-width:1024px){.phead__media>.figure{height:clamp(320px,52vw,520px)}}
.phead__media>.figure--portrait{aspect-ratio:4/5;width:auto;max-width:100%;margin-inline:auto}
.phead__media>.figure--portrait .figure__media{aspect-ratio:4/5}
@media (max-width:1024px){.phead__media>.figure--portrait{width:100%;height:auto}}
.phead__media .a2-covers{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.phead__media .a2-covers>li{min-width:0}
.phead__media .a2-covers .figure{height:auto;width:100%;max-width:100%;aspect-ratio:auto;margin-inline:0}
.phead__media .a2-covers .figure__media{height:auto;aspect-ratio:4/5}
@media (max-width:1024px){.phead{grid-template-columns:1fr;gap:var(--space-7)}.phead__media{order:-1}}
.claims{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,56px);padding-top:var(--space-6);border-top:1px solid var(--line)}
.claims h3{font-size:var(--t-h3);margin:0 0 var(--space-3)}
.claims p{color:var(--fg-2);margin:0;max-width:22em}
@media (max-width:768px){.claims{grid-template-columns:1fr;gap:var(--space-6)}}

.searchbox{position:relative;max-width:var(--text)}
.searchbox .input{padding-left:42px;height:52px;border-radius:999px}
.searchbox svg{position:absolute;left:16px;top:17px;width:18px;height:18px;color:var(--fg-3);pointer-events:none}
.searchbox--labelled svg{top:auto;bottom:17px}
.helpsearch{max-width:var(--text)}
.helpsearch .input::-webkit-search-cancel-button{filter:grayscale(1) opacity(.55)}
.hsearching{display:flex;align-items:center;gap:10px;margin:var(--space-6) 0 0;font-size:var(--t-small);color:var(--fg-2)}
.hsearching[hidden]{display:none}
.hsearching .spinner{width:16px;height:16px}
.results{margin:var(--space-6) 0 0;padding:0;list-style:none}
.results li{border-top:1px solid var(--line)}
.results a{display:block;padding:16px 0}
.results b{display:block;font-size:1.0625rem;font-weight:500}
.results span{display:block;margin-top:4px;font-size:var(--t-small);color:var(--fg-2)}

/* ── 10. 首页 ── */
/* 首屏：整幅照片，文字压在左下角；取景框四角是全站唯一的记忆点动效。 */
.hero{
  position:relative;isolation:isolate;overflow:hidden;color:#fff;
  min-height:min(100svh,960px);display:flex;align-items:flex-end;
  padding-block:calc(var(--nav-h) + var(--space-8)) clamp(48px,7vh,96px);
  background:var(--bg-deep);
}
.hero__media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform-origin:50% 60%}
/* 压暗只压文字所在的下半部（功能性渐变，不是装饰）：白字在最亮的雾层上 ≥ 7:1。 */
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,9,8,.72) 0%,rgba(10,9,8,.38) 42%,rgba(10,9,8,.08) 72%,rgba(10,9,8,.18) 100%)}
.hero__inner{width:100%}
.hero__kicker{margin:0 0 var(--space-5);font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.hero h1{color:#fff;max-width:none}
.hero h1 span{display:block;white-space:nowrap}
html[lang="zh-CN"] .hero h1{font-size:clamp(2.5rem,1.4rem + 4.6vw,5.5rem);line-height:1.08;letter-spacing:-.03em}
html:lang(en) .hero h1{font-size:clamp(2.25rem,1.2rem + 4.2vw,5.25rem);line-height:1.02;letter-spacing:-.025em}
.hero__sub{margin:var(--space-5) 0 0;max-width:30em;font-size:var(--t-lead);line-height:1.6;color:rgba(255,255,255,.88)}
.hero .row{margin-top:var(--space-7)}
.hero .btn--primary{background:#F4F1EA;color:#1B1915;border-color:#F4F1EA}
.hero .btn--primary:hover{background:#fff;border-color:#fff}
.hero .btn--ghost{color:#fff}
/* 署名让开右下角那个取景框角标：角标的横臂在 bottom:clamp(14px,2.2vw,32px)，
   照原位会把横臂横穿在字上（看着像渲染坏了）。抬到横臂之上，落在取景框里侧。 */
.hero__credit{position:absolute;right:var(--gutter);bottom:calc(clamp(14px,2.2vw,32px) + 20px);margin:0;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62)}
/* 取景框：四个 L 形角标。进场时从稍大处收拢到位，像对上焦。 */
.vf{position:absolute;inset:calc(var(--nav-h) + 16px) clamp(14px,2.2vw,32px) clamp(14px,2.2vw,32px);pointer-events:none;z-index:0}
.vf::before,.vf::after,.vf i::before,.vf i::after{
  content:"";position:absolute;width:clamp(18px,2vw,28px);height:clamp(18px,2vw,28px);
  border:0 solid rgba(255,255,255,.7);
}
.vf::before{left:0;top:0;border-left-width:1px;border-top-width:1px}
.vf::after{right:0;top:0;border-right-width:1px;border-top-width:1px}
.vf i::before{left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}
.vf i::after{right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}
.vf i{position:absolute;inset:0}
@media (max-width:640px){
  .hero{min-height:min(100svh,760px)}
  html[lang="zh-CN"] .hero h1{font-size:clamp(2.125rem,10vw,2.75rem)}
  html:lang(en) .hero h1{font-size:clamp(1.875rem,8.6vw,2.5rem)}
  .hero__credit{left:var(--gutter);right:auto}
  .hero .row{margin-top:var(--space-6)}
}

/* 首页第二屏：一段大字自我介绍，四周留白。 */
.intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap)}
.intro__label{grid-column:1/span 3;padding-top:.6em}
.intro__body{grid-column:4/span 8}
.intro__statement{font-size:clamp(1.375rem,1.05rem + 1.35vw,2.25rem);line-height:1.5;letter-spacing:-.01em;color:var(--fg)}
html:lang(en) .intro__statement{font-family:var(--font-serif);line-height:1.38}
.intro__aside{margin-top:var(--space-6);max-width:30em;color:var(--fg-2)}
@media (max-width:1024px){.intro__label,.intro__body{grid-column:1/-1}.intro__label{padding-top:0}}

/* 六款工具按三段时间排：出门前 / 拍摄时 / 回家后。每段的版式不一样，不套同一个模板。 */
.stages__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-8)}
.stage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap);padding-top:var(--space-6);border-top:1px solid var(--line-strong)}
.stage+.stage{margin-top:var(--section-y)}
.stage__label{grid-column:1/-1;display:flex;gap:var(--space-4);align-items:baseline;margin:0 0 var(--space-6)}
.stage__label b{font-weight:400;color:var(--fg)}
.stage__media{min-width:0}
.stage__media .figure__media{border-radius:var(--radius-img)}
.stage__tools{min-width:0;margin:0;padding:0;list-style:none}
.tool+.tool{margin-top:var(--space-7)}
.tool h3{font-size:clamp(1.375rem,1.15rem + .8vw,1.875rem);line-height:1.25;letter-spacing:-.015em}
html:lang(en) .tool h3{font-family:var(--font-serif);font-weight:400}
.tool h3 a{display:inline-flex;align-items:baseline;gap:.4em}
.tool h3 a .arr{width:.6em;height:.6em;flex:0 0 auto;transform:translateY(-.02em);transition:transform var(--t-mid) var(--ease)}
.tool h3 a:hover .arr{transform:translateX(4px)}
.tool h3 a span{background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size var(--t-mid) var(--ease)}
.tool h3 a:hover span{background-size:100% 1px}
.tool p{margin-top:var(--space-3);color:var(--fg-2);max-width:28em}
.tool__status{display:block;margin-top:var(--space-3);font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
/* 第一段：一张宽幅照片出血到版心右外侧，文字压在左边窄栏。 */
.stage--a .stage__tools{grid-column:1/span 4;align-self:end}
.stage--a .stage__media{grid-column:6/span 7;margin-right:calc(var(--gutter) * -1)}
.stage--a .figure__media{aspect-ratio:16/9;border-radius:var(--radius-img) 0 0 var(--radius-img)}
/* 第二段：两张照片错落（横 3:2 + 竖 4:5），两款工具在中间。 */
.stage--b .stage__media--1{grid-column:1/span 5}
.stage--b .stage__tools{grid-column:6/span 3;align-self:center}
.stage--b .stage__media--2{grid-column:9/span 4;margin-top:var(--space-9)}
/* 第三段：三款工具排成一栏密排，右边一张真实导出图。 */
.stage--c .stage__tools{grid-column:1/span 5}
.stage--c .stage__media{grid-column:7/span 6}
.stage--c .tool{display:grid;grid-template-columns:minmax(0,1fr);padding-bottom:var(--space-6);border-bottom:1px solid var(--line)}
.stage--c .tool+.tool{margin-top:var(--space-6)}
.stage--c .tool:last-child{border-bottom:0;padding-bottom:0}
@media (max-width:1024px){
  .stage>*{grid-column:1/-1!important}
  .stage__label{margin-bottom:var(--space-5)}
  .stage--a .stage__media{margin-right:calc(var(--gutter) * -1);order:-1;margin-bottom:var(--space-6)}
  .stage--a .stage__label{order:-2}
  .stage--b .stage__media--2{margin-top:0}
  .stage--b{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
  .stage--b .stage__media--1{grid-column:1/2!important}
  .stage--b .stage__media--2{grid-column:2/3!important;margin-top:var(--space-8)}
  .stage--b .stage__tools{order:2;margin-top:var(--space-6)}
  .stage--c .stage__media{margin-top:var(--space-6)}
}

/* 照片插页：一张对比滑块，居中，四周大量留白。 */
.interlude{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap);align-items:end}
.interlude .compare{grid-column:4/span 5;max-width:none;width:100%;margin:0}
.interlude__note{grid-column:10/span 3;max-width:22em;color:var(--fg-2);font-size:var(--t-small)}
.interlude__note .eyebrow{margin-bottom:var(--space-3)}
@media (max-width:1024px){.interlude .compare{grid-column:2/span 10}.interlude__note{grid-column:2/span 10;margin-top:var(--space-5)}}
@media (max-width:640px){.interlude .compare,.interlude__note{grid-column:1/-1}}

/* 教程索引：首页最密的一段，悬挂标题 + 两栏小字目录。 */
.gindex{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-8) var(--col-gap)}
.gindex__head{grid-column:1/span 4;align-self:start;position:sticky;top:calc(var(--nav-h) + 32px)}
.gindex__head p{margin-top:var(--space-4);color:var(--fg-2);max-width:20em}
.gindex__head .allguides{margin-top:var(--space-6)}
.gindex__body{grid-column:5/span 8}
.gindex__pop{margin:0 0 var(--space-8);padding:0;list-style:none;counter-reset:pop;border-top:1px solid var(--line-strong)}
.gindex__pop li{counter-increment:pop;border-bottom:1px solid var(--line)}
.gindex__pop a{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:0 var(--space-4);padding:var(--space-5) 0}
.gindex__pop a::before{content:counter(pop,decimal-leading-zero);grid-row:1/span 2;padding-top:.45em;font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.08em;color:var(--fg-3)}
.gindex__pop b{font-size:clamp(1.125rem,1rem + .5vw,1.375rem);font-weight:500;line-height:1.35;color:var(--fg)}
html:lang(en) .gindex__pop b{font-family:var(--font-serif);font-weight:400}
.gindex__pop span{margin-top:4px;font-size:var(--t-small);color:var(--fg-2);line-height:1.6}
.gindex__pop a:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--accent)}
.gindex__cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-7) var(--col-gap)}
.gindex__cat h3{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);padding-bottom:var(--space-3);border-bottom:1px solid var(--line);font-size:1rem;font-weight:500}
html:lang(en) .gindex__cat h3{font-family:var(--font-sans)}
.gindex__cat h3 a:hover{color:var(--fg-2)}
.gindex__cat h3 span{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.06em;color:var(--fg-3);font-weight:400}
.gindex__cat ul{margin:0;padding:0;list-style:none}
.gindex__cat li a{display:block;padding:9px 0;font-size:var(--t-small);line-height:1.5;color:var(--fg-2);transition:color var(--t-fast) var(--ease)}
.gindex__cat li a:hover{color:var(--fg)}
@media (max-width:1024px){.gindex__head,.gindex__body{grid-column:1/-1}.gindex__head{position:static}}
@media (max-width:640px){.gindex__cats{grid-template-columns:1fr}}

/* 尾声：整幅照片 + 一句品牌话 + 三条去处，没有按钮。 */
.coda{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:var(--bg-deep)}
.coda__media{position:absolute;inset:0;z-index:-1}
.coda__media img{width:100%;height:100%;object-fit:cover}
.coda__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,9,8,.6),rgba(10,9,8,.15) 70%)}
.coda__body{padding-block:clamp(140px,18vw,300px) clamp(48px,6vw,80px)}
.coda__line{max-width:16em;font-size:var(--t-h1);line-height:1.15;letter-spacing:-.025em;color:#fff}
.coda__line span{display:block}
html[lang="zh-CN"] .coda__line{max-width:none}
html:lang(en) .coda__line{font-family:var(--font-serif)}
/* 2026-10-07：英文口号第二段在窄屏放不下一行，按 span 分行会把末词单独甩到第三行；窄屏改整句均衡断行 */
@media (max-width:640px){html:lang(en) .coda__line{text-wrap:balance}html:lang(en) .coda__line span{display:inline}}
.coda__links{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-7);margin:var(--space-7) 0 0;padding:var(--space-5) 0 0;list-style:none;border-top:1px solid rgba(255,255,255,.28)}
.coda__links a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:#fff;font-size:var(--t-nav)}
.coda__links a .arr{width:14px;height:14px;transition:transform var(--t-mid) var(--ease)}
.coda__links a:hover .arr{transform:translateX(3px)}
body:has(.coda) .footer{margin-top:0;border-top:0}

/* ── 11. 状态与杂项 ── */
.state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-3);padding:var(--space-8) var(--space-5);border:1px solid var(--line);border-radius:var(--radius-card);color:var(--fg-2)}
.state[hidden]{display:none}
.state__icon{width:28px;height:28px;color:var(--fg-3)}
.state--error .state__icon{color:var(--danger)}
.state--success .state__icon{color:var(--ok)}
.state__title{font-size:var(--t-h3);color:var(--fg)}
.state__text{margin:0;font-size:var(--t-small);max-width:42ch}
.state .btn{margin-top:var(--space-3)}
.spinner{width:24px;height:24px;border:1.5px solid var(--line);border-top-color:var(--fg-2);border-radius:50%;animation:spin 900ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.statepage{display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - var(--nav-h));padding-block:var(--section-y)}
.statepage__code{font-family:var(--font-mono);font-size:var(--t-display);line-height:1;letter-spacing:-.04em;color:var(--fg-3)}
.statepage h1{margin:var(--space-5) 0 0}
.statepage .lead{margin-top:var(--space-4)}
.statepage .row{margin-top:var(--space-7)}
.tag{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:var(--radius-tag);background:var(--bg-raised);font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.04em;color:var(--fg-2)}
.pending{display:inline-block;padding:1px 8px;border:1px dashed var(--fg-3);border-radius:var(--radius-tag);font-family:var(--font-mono);font-size:.875em;color:var(--fg-2)}
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  align-items:center;justify-content:center;gap:8px;
  min-height:56px;padding:0 var(--gutter) env(safe-area-inset-bottom);
  background:var(--fg);color:var(--bg);font-size:1rem;font-weight:500;
  visibility:hidden;transform:translateY(110%);transition:transform 320ms var(--ease),visibility 0s linear 320ms;
}
.sticky-cta.show.show{visibility:visible;transform:none;transition:transform 320ms var(--ease)}
@media (max-width:640px){
  .sticky-cta{display:flex}
  body:has(.sticky-cta.show){padding-bottom:calc(56px + env(safe-area-inset-bottom))}
}

/* ── 12. 页脚：品牌一栏 + 三栏链接 + 一行底注（法务、语言、主题）── */
.footer{border-top:1px solid var(--line);padding:var(--section-y-tight) 0 var(--space-6);margin-top:var(--section-y-tight);font-size:var(--t-small)}
.footer__manifesto{font-family:var(--font-serif);font-size:var(--t-h2);line-height:1.25;letter-spacing:-.015em;color:var(--fg);max-width:20ch;margin:0 0 var(--space-8)}
html[lang="zh-CN"] .footer__manifesto{font-family:var(--font-sans);font-weight:500;max-width:14em}
.footer__grid{display:grid;gap:var(--space-7) var(--col-gap);grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2fr))}
.footer__brand .brand{margin-bottom:var(--space-4)}
.footer__brand p{max-width:22em;color:var(--fg-2);line-height:1.7}
.footer__col h2{margin:0 0 var(--space-4);font-family:var(--font-mono);font-size:var(--t-meta);font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.footer__col ul{margin:0;padding:0;list-style:none}
.footer__col a{display:inline-block;padding:5px 0;color:var(--fg-2);transition:color var(--t-fast) var(--ease)}
.footer__col a:hover{color:var(--fg)}
@media (pointer:coarse){.footer__col a{display:block;padding:10px 0}}
@media (max-width:1024px){.footer__grid{grid-template-columns:repeat(3,minmax(0,1fr))}.footer__brand{grid-column:1/-1}}
@media (max-width:640px){.footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.footer__bottom{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-5);
  margin-top:var(--space-8);padding-top:var(--space-5);border-top:1px solid var(--line);
  font-size:var(--t-micro);color:var(--fg-3);
}
.footer__bottom a{color:var(--fg-3);transition:color var(--t-fast) var(--ease)}
.footer__bottom a:hover{color:var(--fg)}
.footer__bottom .themebtn{margin-left:auto}
.footer__legal{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin:0;padding:0;list-style:none}

/* ── 13. 长文（build-guides.py 与 tools/legal/build.py 的产物依赖，改名先改生成器）── */
.article{padding:clamp(36px,6vw,72px) 0 clamp(48px,8vw,96px)}
.article>.wrap{max-width:calc(var(--prose) + var(--gutter) * 2)}
.article h1{font-size:clamp(1.875rem,1.25rem + 2.3vw,2.875rem);line-height:1.18;letter-spacing:-.02em}
.meta{margin:var(--space-5) 0 0;font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.06em;color:var(--fg-3)}
.meta time{font-variant-numeric:tabular-nums}
.crumbs{margin:0 0 var(--space-6);font-size:var(--t-micro);color:var(--fg-3);line-height:1.6;overflow-wrap:anywhere}
.crumbs a{color:var(--fg-2);transition:color var(--t-fast) var(--ease)}
.crumbs a:hover{color:var(--fg)}
.crumbs .sep{margin:0 8px;color:var(--fg-3);opacity:.7}
@media (pointer:coarse){
  .crumbs a{display:inline-block;padding:13px 4px;margin:-13px -4px}
  .footer__bottom a{display:inline-block;padding:11px 4px;margin:-11px -4px}
  .brand{min-height:44px}
}
.catlabel{margin:0 0 var(--space-3);font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.1em;text-transform:uppercase}
.catlabel a{color:var(--accent)}
.catlabel a:hover{text-decoration:underline;text-underline-offset:3px}
.lede{margin:var(--space-5) 0 0;font-size:var(--t-lead);line-height:1.65;color:var(--fg-2)}

.prose{margin:var(--space-7) 0 0;font-size:var(--t-body)}
.prose>*+*{margin-top:1.15em}
.prose p,.prose ul,.prose ol{color:color-mix(in srgb,var(--fg) 82%,var(--bg))}
.prose h2{margin:2.4em 0 .6em;padding-top:1.1em;font-size:clamp(1.3rem,1.1rem + .7vw,1.6rem);line-height:1.35;letter-spacing:-.01em;border-top:1px solid var(--line)}
.prose h3{margin:1.9em 0 .4em;font-size:1.0625rem;font-weight:600;line-height:1.5}
html:lang(en) .prose h3{font-family:var(--font-sans)}
.prose h2+*{margin-top:.6em}
.prose h3+*{margin-top:.45em}
.prose ul,.prose ol{padding-left:1.35em}
.prose li+li{margin-top:.5em}
.prose li::marker{color:var(--fg-3)}
.prose strong{color:var(--fg);font-weight:600}
.prose code{font-family:var(--font-mono);font-size:.86em;color:var(--fg);background:var(--bg-raised);border-radius:4px;padding:1px 6px}
.prose pre{margin:1.4em 0;padding:14px 16px;max-width:100%;overflow-x:auto;background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius-input)}
.prose pre code{display:block;padding:0;background:none;white-space:pre;line-height:1.7}
.prose blockquote{margin:1.6em 0;padding:2px 0 2px 20px;border-left:1px solid var(--line-strong);color:var(--fg-2);font-size:1.0625em}
.prose figure{margin:2.2em 0}
.prose figure img{width:100%;border-radius:var(--radius-img);border:1px solid var(--line)}
.prose figcaption{margin-top:10px;font-size:var(--t-micro);color:var(--fg-3);line-height:1.6}
.prose figure.ba{margin:1.4em 0}
.prose figure.ba+figure.ba{margin-top:1em}
.prose ol.steps{list-style:none;padding:0}
.prose ol.steps>li+li{margin-top:1.6em}
.prose ol.steps>li>b{display:block;margin-bottom:.4em;color:var(--fg)}
.tip{background:var(--bg-pure);border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:var(--radius-input);padding:16px 18px;font-size:.9375rem;color:var(--fg-2)}
.tip b{color:var(--fg)}
#main:not(.article) .tip{max-width:720px}

.toc{border-top:1px solid var(--line-strong);padding:14px 0 4px}
.toc h2{margin:0 0 10px;padding:0;border:0;font-family:var(--font-mono);font-size:var(--t-meta);font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.toc ol{margin:0;padding-left:0;list-style:none;font-size:var(--t-small)}
.toc li+li{margin-top:2px}
.prose .toc a,.toc a{display:block;padding:4px 0;color:var(--fg-2);background:none;text-decoration:none;line-height:1.5}
.prose .toc a:hover,.toc a:hover{color:var(--fg)}

.side{display:none}
.sidecta,.ctacard,.trycard{border:1px solid var(--line);border-radius:var(--radius-card);padding:18px 20px;background:var(--bg-pure)}
.sidecta b,.ctacard b,.trycard b{display:block;margin:0 0 6px;font-size:1rem;font-weight:500;color:var(--fg)}
.sidecta p,.ctacard p,.trycard p{margin:0 0 var(--space-4);font-size:var(--t-small);color:var(--fg-2);line-height:1.6}
.sidecta .btn,.ctacard .btn,.trycard .btn{height:44px}
.sidecta .btn{width:100%;white-space:normal;padding-inline:14px;height:auto;min-height:44px;padding-block:10px;line-height:1.3}
.prose .ctacard,.prose .trycard{margin:2.4em 0}
.prose .handson{margin:1.3em 0 0;padding:2px 0 2px 16px;border-left:1px solid var(--accent);font-size:.9375rem;line-height:1.7;color:var(--fg-2)}
.prose .herocta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:1.6em 0 0}
.prose .herocta .note{font-size:var(--t-small);color:var(--fg-3)}
.prose ul.nextsteps{list-style:none;padding:0;margin:1.2em 0 0;display:grid;gap:8px}
.prose ul.nextsteps li{margin:0}
.prose ul.nextsteps a{display:block;padding:13px 16px;border:1px solid var(--line);border-radius:var(--radius-input);color:var(--fg-2);background:none;transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.prose ul.nextsteps a:hover{border-color:var(--line-ui);color:var(--fg)}
.prose ul.nextsteps li:first-child a{border-color:var(--line-strong);color:var(--fg)}

@media (min-width:1200px){
  .article>.wrap:has(.side){max-width:calc(var(--prose) + 240px + 64px + var(--gutter) * 2);display:grid;grid-template-columns:minmax(0,var(--prose)) 240px;column-gap:64px}
  .article>.wrap>*{grid-column:1}
  .article>.wrap>.side{display:block;grid-column:2;grid-row:1/span 40;align-self:start;position:sticky;top:calc(var(--nav-h) + 24px)}
  .side .toc{max-height:calc(100vh - var(--nav-h) - 260px);overflow:auto}
  .side .sidecta{margin-top:24px}
  .prose .toc,.prose .ctacard{display:none}
}
@media (min-width:1500px){
  .article>.wrap:has(.side){max-width:calc(var(--prose) + (240px + 64px) * 2 + var(--gutter) * 2);grid-template-columns:240px minmax(0,var(--prose)) 240px}
  .article>.wrap>*{grid-column:2}
  .article>.wrap>.side{grid-column:3}
}

.tablewrap{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line)}
.tablewrap--wide table{min-width:900px}
@media (max-width:640px){
  .download-table{border:0;overflow:visible}
  .download-table table{display:block;min-width:0}
  .download-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .download-table tbody{display:grid;gap:16px}
  .download-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:16px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--bg-pure)}
  .download-table th[scope="row"]{grid-column:1/-1;padding:0 0 12px;border:0;font-size:1.0625rem;white-space:normal;background:none;font-family:var(--font-sans);text-transform:none;letter-spacing:0;color:var(--fg)}
  .download-table td{order:2;padding:10px 0 0;border:0;overflow-wrap:anywhere}
  .download-table td::before{content:attr(data-label);display:block;margin-bottom:4px;color:var(--fg-3);font-size:var(--t-micro)}
  .download-table td:last-child{order:1;grid-column:1/-1;padding:0 0 12px;border-bottom:1px solid var(--line)}
  .download-table td:last-child::before{display:none}
  .download-table::after{display:none!important}
}
@media (max-width:640px){
  .tablewrap::after{content:"左右滑动查看完整表格";display:block;padding:8px 0 10px;font-size:var(--t-micro);color:var(--fg-3);text-align:right}
  html:lang(en) .tablewrap::after{content:"Swipe sideways to see the full table"}
}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:var(--t-small);line-height:1.6}
th,td{text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--fg-3);font-weight:400;white-space:nowrap;font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.06em;text-transform:uppercase}
td{color:var(--fg-2);font-variant-numeric:tabular-nums}
tbody th{font-family:var(--font-sans);font-size:var(--t-small);text-transform:none;letter-spacing:0;color:var(--fg);font-weight:500;white-space:normal}
tbody td:first-child{color:var(--fg)}
tr:last-child td,tr:last-child th{border-bottom:0}

.faq{margin:var(--space-6) 0 0}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary,.authpane>summary{
  display:flex;align-items:center;gap:16px;cursor:pointer;list-style:none;
  padding:20px 0;font-size:1.0625rem;font-weight:500;color:var(--fg);
}
.authpane>summary{padding:16px 0}
.faq summary::-webkit-details-marker,.authpane>summary::-webkit-details-marker{display:none}
.faq summary::after,.authpane>summary::after{
  content:"";margin-left:auto;flex:0 0 auto;width:11px;height:11px;
  background:linear-gradient(var(--fg-2),var(--fg-2)) center/11px 1px no-repeat,linear-gradient(var(--fg-2),var(--fg-2)) center/1px 11px no-repeat;
  transition:transform var(--t-mid) var(--ease);
}
.faq details[open] summary::after,.authpane[open]>summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--fg-2)}
.faq .a{padding:0 0 22px;color:var(--fg-2);font-size:.9375rem;max-width:42em}
.faq .a>*+*{margin-top:.8em}
@media (min-width:900px){
  #faq .faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--space-7);align-items:start}
  #faq .faq details:nth-child(2){border-top:1px solid var(--line)}
}

.catnav{position:sticky;top:var(--nav-h);z-index:10;margin:0 0 var(--space-7);padding:10px 0;background:color-mix(in srgb,var(--bg) 94%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:top 420ms var(--ease)}
body:has(.nav.is-hidden) .catnav{top:0}
.catnav-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.catnav-row::-webkit-scrollbar{display:none}
@media (min-width:900px){.catnav-row{flex-wrap:wrap;overflow-x:visible;row-gap:8px}}
.catchip{flex:0 0 auto;white-space:nowrap}
.catchip span{font-family:var(--font-mono);font-size:var(--t-meta);color:var(--fg-3)}
.gsec{margin:0 0 var(--space-9);padding:0;scroll-margin-top:48px}
.gsec:last-child{margin-bottom:0}
.gh2{margin:0 0 6px;font-size:clamp(1.3rem,1.05rem + .8vw,1.75rem)}
.gintro{margin:0 0 var(--space-5);font-size:var(--t-small);color:var(--fg-2);line-height:1.7;max-width:40em}
.ggroup{margin:0 0 var(--space-5)}
.gh{margin:0 0 10px;font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.08em;color:var(--fg-3);font-weight:400}

.article.guideindex>.wrap{max-width:var(--wide)}
.article.guideindex h1{font-size:var(--t-h1);line-height:1.1;letter-spacing:-.025em;max-width:13em}
.gfeat{display:grid;gap:var(--space-5);margin:var(--space-8) 0 var(--space-9)}
.gfeat__media{display:block;overflow:hidden;aspect-ratio:3/2;background:var(--bg-raised);border-radius:var(--radius-img)}
.gfeat__media img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease)}
.gfeat:hover .gfeat__media img{transform:scale(1.025)}
.gfeat__title{margin:0;font-family:var(--font-serif);font-weight:400;letter-spacing:-.015em;font-size:clamp(1.625rem,1.1rem + 1.9vw,2.75rem);line-height:1.15;color:var(--fg)}
.gfeat__blurb{margin:14px 0 0;color:var(--fg-2);max-width:30em}
.gfeat__rt{display:block;margin-top:16px;font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.gfeat:hover .gfeat__title{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:6px}
@media (min-width:900px){.gfeat{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--col-gap) clamp(28px,4vw,64px);align-items:end}}
.glist{margin:0;padding:0;list-style:none}
.glist>li{border-top:1px solid var(--line)}
.glist a{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--space-5);padding:14px 2px}
.glist b{grid-column:1;grid-row:1;font-size:1rem;font-weight:500;color:var(--fg);line-height:1.45}
.glist .gl-sum{grid-column:1;grid-row:2;margin:3px 0 0;font-size:var(--t-small);color:var(--fg-2);line-height:1.55}
.glist .rt{grid-column:2;grid-row:1/span 2;align-self:center;font-style:normal;font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.04em;color:var(--fg-3);white-space:nowrap}
.glist a:hover b{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px;text-decoration-thickness:1px}
@media (min-width:860px){.glist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,64px)}}

/* 链接卡：页尾「相关教程」、热门三篇。只有顶上一条发丝线，不是带框的卡片。 */
/* auto-fit 而不是 auto-fill：全站 70 处 .linkgrid 装的都是 3 条（「热门三篇」「相关教程」），
   而 1440 下 minmax(250px,1fr) 能排出 4 栏——auto-fill 会保留那条空栏，右边留出约 310px 的洞，
   和「全站一条竖线」冲突。auto-fit 把空栏收掉，3 条正好铺满版心。
   下面 .related .linkgrid 本来就用 auto-fit，这里补齐一致。 */
.linkgrid{display:grid;gap:var(--space-5) var(--col-gap);grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin:0;padding:0;list-style:none}
.linkcard{display:block;height:100%;padding:16px 0 4px;border-top:1px solid var(--line-strong);transition:border-color var(--t-fast) var(--ease)}
.linkcard:hover h3,.linkcard:hover h4{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--accent)}
.linkcard h3,.linkcard h4{margin:0 0 6px;font-size:1.0625rem;font-weight:500;color:var(--fg);line-height:1.4}
html:lang(en) .linkcard h3{font-family:var(--font-sans);font-weight:600}
.linkcard p{margin:0;font-size:var(--t-small);color:var(--fg-2);line-height:1.6}
.linkcard .rt{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:10px;font-size:var(--t-meta);color:var(--fg-3);font-family:var(--font-mono)}
.linkcard .rt time{font-variant-numeric:tabular-nums}
.linkcard.lead{border-top-color:var(--accent)}

.related{margin-top:clamp(48px,7vw,80px);padding-top:var(--space-6);border-top:1px solid var(--line)}
.related h2{margin:0 0 var(--space-5);font-family:var(--font-mono);font-size:var(--t-meta);font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.related .linkgrid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.related .linkcard h3{font-size:.9375rem}
.related .linkcard p{font-size:var(--t-micro)}
.backlink{margin:var(--space-6) 0 0;font-size:.9375rem;color:var(--fg-2);line-height:1.7}

.sub{margin:0 0 var(--space-6);color:var(--fg-2);max-width:var(--text)}
.kicker{margin:0 0 var(--space-3);font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.catgrid{display:grid;gap:var(--space-6) var(--col-gap);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin:0;padding:0;list-style:none}
.catcard{border-top:1px solid var(--line-strong);padding:16px 0 0}
.cathead{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
@media (pointer:coarse){.cathead{padding:10px 0;margin:-10px 0}}
.cathead h3{margin:0;font-size:1.0625rem;font-weight:500}
html:lang(en) .cathead h3{font-family:var(--font-sans);font-weight:600}
.cathead .ct{flex:0 0 auto;font-family:var(--font-mono);font-size:var(--t-meta);color:var(--fg-3)}
.catcard>p{margin:7px 0 0;font-size:var(--t-small);color:var(--fg-2);line-height:1.6}
.catlinks{margin:12px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.catlinks a{display:block;padding:9px 0;font-size:var(--t-small);color:var(--fg-2)}
.catlinks a:hover{color:var(--fg)}
.catlinks li+li a{border-top:1px solid var(--line)}
.allguides{margin:var(--space-5) 0 0;font-size:.9375rem}

.legalpage>.wrap{display:block}
.legalpage .meta{display:flex;flex-wrap:wrap;gap:6px 18px}
.legal-toc{margin:var(--space-6) 0 0;padding:16px 0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line)}
.legal-toc ol{margin:0;padding:0 0 0 1.4em;columns:2;column-gap:32px;font-size:var(--t-small);line-height:1.9;color:var(--fg-2)}
.legal-toc li{break-inside:avoid;padding-left:4px}
.legal-toc a{color:var(--fg-2)}
.legal-toc a:hover{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.legal-body{margin-top:var(--space-2)}
.legal-body table{min-width:0}
@media (max-width:640px){.legal-toc ol{columns:1}}

.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:var(--space-3);margin:0;padding:0;list-style:none}
.swatch{border:1px solid var(--line);border-radius:var(--radius-input);overflow:hidden}
.swatch i{display:block;height:54px}
.swatch b{display:block;padding:8px 10px 0;font-family:var(--font-mono);font-size:var(--t-micro);font-weight:400}
.swatch span{display:block;padding:2px 10px 8px;font-size:var(--t-micro);color:var(--fg-3)}

/* ── 14. 动效与打印 ──
   进入视口：淡入上浮 16px，700ms，同批 70ms 阶梯（site.js 只加类名）。
   显影：.develop 的照片从轻微过曝、略模糊回到正常，只给少数主角图。
   首屏主图：一次性极慢推拉 1.06 → 1，初态可见（不拖 LCP）。 */
.js .reveal--pending{opacity:0;transform:translateY(16px)}
.reveal{transition:opacity 700ms var(--ease),transform 700ms var(--ease)}
.reveal.in,.reveal:focus-within{opacity:1;transform:none}
.js .develop--pending img{filter:brightness(1.55) contrast(.7) blur(6px);transform:scale(1.03);clip-path:inset(0 0 8% 0)}
.develop img{transition:filter 1400ms var(--ease),transform 1600ms var(--ease),clip-path 1200ms var(--ease)}
.develop.in img{filter:none;transform:none;clip-path:inset(0)}
.hero__media img{animation:push 9s var(--ease) both}
@keyframes push{from{transform:scale(1.06)}to{transform:none}}
.vf{animation:vf-in 1100ms var(--ease) 200ms both}
@keyframes vf-in{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:none}}
[data-parallax]{will-change:transform}

@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:240ms;animation-timing-function:var(--ease)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js .reveal--pending{opacity:1;transform:none}
  .js .develop--pending img{filter:none;transform:none;clip-path:none}
  .nav.is-hidden{transform:none}
  [data-parallax]{transform:none!important}
  @view-transition{navigation:none}
}
@media print{
  .js .reveal--pending{opacity:1;transform:none}
  .nav,.sticky-cta,.nav__menu,.menubtn,.themebtn,.catnav,.side,.vf{display:none!important}
  body{padding-top:0;background:#fff;color:#000}
}

/* ==== PAGES (A2) ==== */
/* 内页（产品 / 方案 / 作品 / 定价 / 下载 / 关于 / 帮助 / 联系 / 更新日志 / 账号 / 政策）的版式。
   只用全局令牌与 .btn / .link / .faq / .crumbs / .compare / .placecard / .state / .reveal / .develop，
   页面私有类一律 pg- 前缀，只在这一段里定义。骨架：
     pg-head / pg-hero   页头：取景器小字 + 大标题 + 一段导语，右侧影像出血到版心外
     pg-split            悬挂标题：左 4 栏标题，右 8 栏正文（规格、问答、长段落）
     pg-pair             图文错落：5 / 7 栏，--flip 换边
     pg-statement        一屏一句：大标题 + 一两段，四周大留白
     pg-plate            整幅照片，出血到视口
     pg-index / pg-route / pg-prices / pg-acct / pg-log / pg-dl   发丝线分隔的长列表，不是卡片
   节奏：页头紧、陈述松、规格与问答密；区块间距按内容变，不是每段一样高。 */

/* ── 文字层级 ── */
.pg-meta{
  margin:0 0 var(--space-5);font-family:var(--font-mono);font-size:var(--t-meta);line-height:1.5;
  letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);font-weight:400;
}
#main .pg-title{
  font-size:clamp(2.375rem,1.45rem + 3.4vw,4.5rem);line-height:1.06;letter-spacing:-.032em;max-width:12.5em;
}
html:lang(en) #main .pg-title{line-height:1.04;letter-spacing:-.02em;max-width:15em}
html[lang="zh-CN"] #main .pg-title{text-wrap:wrap}
#main .pg-hero .pg-title{font-size:clamp(2.25rem,1.35rem + 2.9vw,4rem)}
.pg-dek{margin-top:var(--space-6);font-size:var(--t-lead);line-height:1.75;color:var(--fg-2);max-width:32em}
html:lang(en) .pg-dek{max-width:36em;line-height:1.6}
.pg-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-6);margin-top:var(--space-7)}
.pg-note{font-size:var(--t-small);line-height:1.75;color:var(--fg-3);max-width:40em}
* + .pg-note{margin-top:var(--space-4)}
.pg-fine{margin-top:var(--space-6);font-size:var(--t-micro);line-height:1.9;color:var(--fg-3)}
.pg-fine+.pg-fine{margin-top:var(--space-3)}
.pg-more{margin-top:var(--space-6);font-size:var(--t-small)}
.pg-h2{margin:0 0 var(--space-5);font-size:var(--t-h2)}
.pg-h2--lead{margin-bottom:var(--space-7)}
.pg-num{font-variant-numeric:tabular-nums}

/* ── 页头 ── */
.pg-head{max-width:56rem;margin-bottom:var(--space-9)}
.pg-head:last-child{margin-bottom:0}
.pg-hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap);align-items:end}
.pg-hero__text{grid-column:1/span 5;padding-bottom:var(--space-3)}
.pg-hero>.pg-hero__media{grid-column:7/-1;margin:0 calc(var(--gutter) * -1) 0 0;min-width:0}
.pg-hero__media.pg-photo{height:clamp(420px,70vh,780px);aspect-ratio:auto}
.pg-hero__media.pg-photo--portrait{grid-column:8/-1;aspect-ratio:auto}
.pg-hero__media.pg-shot{margin-right:0;align-self:center}
.pg-hero__media>.placecard{margin-right:var(--gutter);max-width:640px;margin-left:auto}
.pg-hero--case{align-items:center}
.pg-hero--case .pg-hero__media{grid-column:7/span 5;margin:0}
.pg-hero--case figcaption{margin-top:var(--space-4);text-align:center}
@media (max-width:1024px){
  .pg-hero{grid-template-columns:minmax(0,1fr);gap:var(--space-7)}
  .pg-hero__text,.pg-hero>.pg-hero__media,.pg-hero>.pg-hero__media.pg-photo--portrait,.pg-hero--case .pg-hero__media{grid-column:1/-1}
  .pg-hero>.pg-hero__media.pg-photo{height:clamp(300px,64vw,560px);margin:0 calc(var(--gutter) * -1);border-radius:0}
  .pg-hero>.pg-hero__media.pg-photo--portrait{height:clamp(380px,110vw,640px)}
  .pg-hero__media>.placecard{margin:0}
  .pg-hero>.pg-hero__media:not(.pg-photo){margin:0}
  .pg-head{margin-bottom:var(--space-8)}
}

/* ── 影像 ── */
.pg-photo{margin:0;overflow:hidden;background:var(--bg-raised);border-radius:var(--radius-img);aspect-ratio:3/2}
.pg-photo--portrait{aspect-ratio:4/5}
.pg-photo>picture{display:block;width:100%;height:100%}
.pg-photo img{width:100%;height:100%;object-fit:cover}
.pg-shot{margin:0;min-width:0}
.pg-shot>picture{display:block;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--bg-pure)}
.pg-shot img{width:100%;height:auto}
.pg-phone{margin:0}
.pg-phone>picture{display:block;max-width:280px;margin-inline:auto;overflow:hidden;border:1px solid var(--line);border-radius:28px;background:var(--bg-pure)}
:is(.pg-shot,.pg-photo,.pg-phone,.pg-case-plate,.pg-hero__media,.pg-route__media,.pg-diptych figure,.pg-sheet figure,.pg-gal figure) figcaption{
  margin-top:12px;font-size:var(--t-micro);line-height:1.6;color:var(--fg-3);
}
.pg-photo figcaption{display:none}
.pg-plate{margin:0;background:var(--bg-deep);overflow:hidden}
.pg-plate img{width:100%;aspect-ratio:21/9;object-fit:cover}
@media (max-width:640px){.pg-plate img{aspect-ratio:4/5}}
.pg-wide{margin:var(--space-8) 0 0}
.pg-wide figcaption{margin-top:12px;font-size:var(--t-micro);color:var(--fg-3)}
.pg-case-plate{margin:0;max-width:var(--native-w,none)}
.pg-case-plate.pg-photo{aspect-ratio:var(--ar,3/2);overflow:visible;background:none}
.pg-case-plate.pg-photo>picture{border-radius:var(--radius-img);overflow:hidden;height:auto}
.pg-case-plate.pg-photo img{height:auto}
.pg-case-plate.pg-photo figcaption{display:block}
.pg-inline{margin:var(--space-7) 0 0;max-width:36rem}
.pg-inline figcaption{margin-top:10px;font-size:var(--t-micro);color:var(--fg-3)}

/* ── 一屏一句 ── */
.pg-section:has(> .wrap > .pg-statement){padding-block:var(--section-y-loose)}
.pg-statement{max-width:46rem;margin-left:calc((100% + var(--col-gap)) / 12 * 2)}
.pg-statement__h{font-size:clamp(1.875rem,1.3rem + 2.3vw,3.375rem);line-height:1.12;letter-spacing:-.025em;max-width:13em}
.pg-statement p{margin-top:var(--space-6);font-size:var(--t-lead);line-height:1.8;color:var(--fg-2);max-width:34em}
.pg-statement p+p{margin-top:var(--space-4)}
.pg-statement--quiet .pg-statement__h{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.25rem)}
@media (max-width:1024px){.pg-statement{margin-left:0}}

/* ── 悬挂标题 ── */
.pg-split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-5) var(--col-gap);align-items:start}
.pg-split__h{grid-column:1/span 4;font-size:clamp(1.375rem,1.15rem + .9vw,2rem);line-height:1.2;letter-spacing:-.015em;max-width:9em}
.pg-split__body{grid-column:5/-1;min-width:0;max-width:48rem;margin:0}
.pg-split__body>p,.pg-prose p{color:var(--fg-2)}
.pg-prose p{font-size:1.0625rem;line-height:1.85}
html:lang(en) .pg-prose p{line-height:1.7}
.pg-split--rule{padding-top:var(--space-7);border-top:1px solid var(--line)}
.pg-split+.pg-split{margin-top:var(--space-8)}
.pg-split+.tablewrap{margin-top:var(--space-7)}
.pg-split__body>.tablewrap{margin-top:0}
#faq .pg-split__body.faq{display:block;margin:0}
.pg-split__body.faq details:first-child{border-top:1px solid var(--line-strong)}
@media (min-width:1025px){
  .pg-split__h{position:sticky;top:calc(var(--nav-h) + var(--space-5))}
  body:has(.nav.is-hidden) .pg-split__h{top:var(--space-5)}
}
@media (max-width:1024px){
  .pg-split{grid-template-columns:minmax(0,1fr)}
  .pg-split__h,.pg-split__body{grid-column:1/-1}
  .pg-split__h{max-width:none}
}

/* ── 区块节奏 ── */
.pg-section--paper{background:var(--bg-pure)}
.pg-section--rule{padding-top:var(--section-y-tight)}
.pg-section--rule>.wrap{
  padding-top:var(--space-7);
  background:linear-gradient(var(--line),var(--line)) var(--gutter) 0/calc(100% - var(--gutter) * 2) 1px no-repeat;
}
.pg-section--rule+.pg-section--rule{padding-top:0}
.pg-section--paper+.pg-section--rule{padding-top:var(--section-y-tight)}

/* ── 图文错落 ── */
.pg-pair{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap);align-items:center}
.pg-pair__text{grid-column:1/span 4}
.pg-pair__text>p{color:var(--fg-2)}
.pg-pair__media{grid-column:6/-1;margin:0;min-width:0}
.pg-pair--flip .pg-pair__text{grid-column:9/-1;grid-row:1}
.pg-pair--flip .pg-pair__media{grid-column:1/span 7;grid-row:1}
.pg-pair__media:is(.pg-photo--portrait,.pg-phone){grid-column:7/span 5;justify-self:center;width:min(100%,480px)}
.pg-pair--flip .pg-pair__media:is(.pg-photo--portrait,.pg-phone){grid-column:2/span 5}
.pg-pair__media>.compare{max-width:440px}
.pg-pair+.pg-covers{margin-top:var(--section-y)}
@media (max-width:1024px){
  .pg-pair{grid-template-columns:minmax(0,1fr);gap:var(--space-7)}
  .pg-pair__text,.pg-pair__media,.pg-pair--flip .pg-pair__text,.pg-pair--flip .pg-pair__media,
  .pg-pair__media:is(.pg-photo--portrait,.pg-phone),.pg-pair--flip .pg-pair__media:is(.pg-photo--portrait,.pg-phone){grid-column:1/-1;grid-row:auto}
  .pg-pair__media.pg-photo--portrait{width:min(100%,420px);justify-self:start}
}

/* ── 编号清单：产品总览、案例 ── */
.pg-index{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.pg-index__row{
  display:grid;grid-template-columns:3.5rem minmax(0,1fr) clamp(180px,24vw,360px);gap:var(--col-gap);align-items:start;
  padding:var(--space-6) 0;border-bottom:1px solid var(--line);color:inherit;
}
.pg-index__no{padding-top:.95em;font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.08em;color:var(--fg-3)}
.pg-index__name{font-size:clamp(1.625rem,1.2rem + 1.6vw,2.75rem);line-height:1.08;letter-spacing:-.022em;text-decoration:underline 1px transparent;text-underline-offset:.16em;transition:text-decoration-color var(--t-mid) var(--ease)}
.pg-index__line{display:block;margin-top:var(--space-3);color:var(--fg-2);max-width:30em}
.pg-index__status{display:block;margin-top:var(--space-4);font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.pg-index__thumb{overflow:hidden;aspect-ratio:3/2;border-radius:var(--radius-img);background:var(--bg-raised)}
.pg-index__thumb picture{display:block;width:100%;height:100%}
.pg-index__thumb img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease)}
.pg-index__row:hover .pg-index__name{text-decoration-color:var(--accent)}
.pg-index__row:hover .pg-index__thumb img{transform:scale(1.04)}
.pg-index__row:focus-visible{outline-offset:6px}
@media (max-width:640px){
  .pg-index__row{grid-template-columns:2rem minmax(0,1fr) 92px;gap:var(--space-4);padding:var(--space-5) 0}
  .pg-index__no{padding-top:.5em}
  .pg-index__thumb{aspect-ratio:4/5;align-self:start}
  .pg-index__line{font-size:var(--t-small)}
}

/* ── 场景（解决方案总览） ── */
.pg-scenes{list-style:none;margin:0;padding:0;display:grid;gap:clamp(64px,8vw,144px)}
.pg-scene{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap);align-items:end;color:inherit}
.pg-scene__media{grid-column:1/span 8;overflow:hidden;border-radius:var(--radius-img);background:var(--bg-raised);aspect-ratio:16/9}
.pg-scene__media picture{display:block;width:100%;height:100%}
.pg-scene__media img{width:100%;height:100%;object-fit:cover;transition:transform 1200ms var(--ease)}
.pg-scene__text{grid-column:9/-1;display:flex;flex-direction:column;gap:var(--space-3);padding-bottom:var(--space-2)}
.pg-scene__no{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.08em;color:var(--fg-3)}
.pg-scene__title{font-size:var(--t-h2);line-height:1.12;letter-spacing:-.02em;text-decoration:underline 1px transparent;text-underline-offset:.16em;transition:text-decoration-color var(--t-mid) var(--ease)}
html:lang(en) .pg-scene__title{font-family:var(--font-serif)}
.pg-scene__line{color:var(--fg-2);max-width:20em}
.pg-scene:hover .pg-scene__title{text-decoration-color:var(--accent)}
.pg-scene:hover .pg-scene__media img{transform:scale(1.03)}
.pg-scene--portrait .pg-scene__media{grid-column:6/span 5;grid-row:1;aspect-ratio:4/5}
.pg-scene--portrait .pg-scene__text{grid-column:2/span 4;grid-row:1}
@media (max-width:1024px){
  .pg-scene,.pg-scene--portrait{grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
  .pg-scene__media,.pg-scene__text,.pg-scene--portrait .pg-scene__media,.pg-scene--portrait .pg-scene__text{grid-column:1/-1;grid-row:auto}
  .pg-scene--portrait .pg-scene__media{width:min(100%,520px)}
}
@media (max-width:640px){.pg-scene__media{aspect-ratio:4/5}}

/* ── 路线（场景详情页）：时段 · 产品与一段话 · 影像 ── */
.pg-route{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.pg-route>li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap);align-items:start;padding:var(--space-7) 0;border-bottom:1px solid var(--line)}
.pg-route__when{grid-column:1/span 2;padding-top:.7em;font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.pg-route__body{grid-column:3/span 4}
.pg-route__body p{color:var(--fg-2)}
.pg-route__name{margin-bottom:var(--space-4);font-size:clamp(1.5rem,1.2rem + 1.1vw,2.125rem);line-height:1.15;letter-spacing:-.018em}
.pg-route__name a{text-decoration:underline 1px color-mix(in srgb,var(--fg) 25%,transparent);text-underline-offset:.18em;transition:text-decoration-color var(--t-mid) var(--ease)}
.pg-route__name a:hover{text-decoration-color:var(--accent)}
.pg-route__media{grid-column:8/-1;margin:0;min-width:0}
.pg-route__media.pg-photo--portrait{width:min(100%,340px)}
.pg-route__media.pg-phone>picture{max-width:220px;margin-left:0}
.pg-route__media .compare--portrait{max-width:340px;margin-left:0}
@media (max-width:1024px){
  .pg-route>li{grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
  .pg-route__when,.pg-route__body,.pg-route__media{grid-column:1/-1}
  .pg-route__when{padding-top:0}
  .pg-route__media{margin-top:var(--space-3)}
}

/* ── 双联照片 ── */
.pg-diptych{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap);align-items:start}
.pg-diptych figure{margin:0}
.pg-diptych figure:first-child{grid-column:2/span 4;margin-top:var(--space-10)}
.pg-diptych figure:last-child{grid-column:7/span 5}
.pg-diptych picture{display:block;overflow:hidden;border-radius:var(--radius-img);background:var(--bg-raised)}
.pg-diptych img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media (max-width:640px){
  .pg-diptych{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
  .pg-diptych figure:first-child,.pg-diptych figure:last-child{grid-column:auto}
  .pg-diptych figure:first-child{margin-top:var(--space-8)}
}

/* ── 镜笺：四张导出成品，像一张接触印样 ── */
.pg-sheet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-7) clamp(24px,4vw,72px);margin-top:var(--space-9);align-items:start}
.pg-sheet figure{margin:0}
.pg-sheet figure:nth-child(even){margin-top:var(--space-9)}
.pg-sheet img{width:100%;height:auto;border:1px solid var(--line);border-radius:2px}
.pg-sheet figcaption{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.08em;text-transform:uppercase}
.pg-sheet+.pg-note{margin-top:var(--space-7)}
@media (max-width:640px){
  .pg-sheet{gap:var(--space-5) var(--space-4)}
  .pg-sheet figure:nth-child(even){margin-top:var(--space-7)}
}

/* ── 掌镜：连接顺序，一行取景器小字 ── */
.pg-path{
  list-style:none;margin:var(--space-9) 0 0;padding:0;counter-reset:pg-path;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line-strong);
}
.pg-path li{counter-increment:pg-path;position:relative;padding:var(--space-4) var(--space-4) 0 0;font-family:var(--font-mono);font-size:var(--t-meta);line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--fg)}
.pg-path li::before{content:counter(pg-path,decimal-leading-zero);display:block;margin-bottom:var(--space-2);color:var(--fg-3)}
.pg-path li::after{content:"";position:absolute;top:-3px;left:0;width:5px;height:5px;border-radius:50%;background:var(--fg)}
.pg-path__note{margin-top:var(--space-6)}
@media (max-width:640px){
  .pg-path{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--space-5)}
  .pg-path li::after{display:none}
}
.pg-tally{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--col-gap);margin:var(--space-7) 0 0;border-top:1px solid var(--line-strong)}
.pg-tally>div{padding-top:var(--space-4)}
.pg-tally dt{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.pg-tally dd{margin:var(--space-2) 0 0;font-size:clamp(2rem,1.5rem + 1.8vw,3.25rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--fg)}
@media (max-width:640px){.pg-tally{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--space-5)}}

/* ── 规格表与价目 ── */
.pg-spec{margin:0;border-top:1px solid var(--line-strong)}
.pg-spec>div{display:grid;grid-template-columns:minmax(6.5rem,11rem) minmax(0,1fr);gap:var(--space-5);padding:14px 0;border-bottom:1px solid var(--line)}
.pg-spec dt{padding-top:.3em;font-family:var(--font-mono);font-size:var(--t-meta);line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
.pg-spec dd{margin:0;font-size:.9375rem;line-height:1.7;color:var(--fg);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pg-spec--compact{margin-top:var(--space-5)}
.pg-spec--compact>div{padding:10px 0}
.pg-spec--compact dd{font-size:var(--t-small)}
@media (max-width:640px){
  .pg-spec>div{grid-template-columns:minmax(0,1fr);gap:2px}
}
.pg-ledger{margin:var(--space-6) 0 0;border-top:1px solid var(--line-strong)}
.pg-ledger>div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-5);padding:14px 0;border-bottom:1px solid var(--line)}
.pg-ledger dt{color:var(--fg)}
.pg-ledger dd{margin:0;text-align:right;font-weight:500;font-variant-numeric:tabular-nums;color:var(--fg)}
.pg-ledger small{display:block;margin-top:2px;font-size:var(--t-micro);font-weight:400;color:var(--fg-3)}

/* ── 步骤 ── */
.pg-steps{list-style:none;margin:0;padding:0;counter-reset:pg-step;border-top:1px solid var(--line-strong)}
.pg-steps li{counter-increment:pg-step;display:grid;grid-template-columns:3rem minmax(0,1fr);padding:16px 0;border-bottom:1px solid var(--line)}
.pg-steps li::before{content:counter(pg-step,decimal-leading-zero);grid-row:1/span 2;padding-top:.35em;font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.08em;color:var(--fg-3)}
.pg-steps b{font-weight:500;color:var(--fg)}
.pg-steps span{font-size:var(--t-small);color:var(--fg-2)}

/* ── MuseFrame：风格封面 ── */
.pg-covers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);align-items:start}
.pg-covers li{min-width:0}
.pg-covers picture{display:block;overflow:hidden;border-radius:var(--radius-img);background:var(--bg-raised)}
.pg-covers img{width:100%;aspect-ratio:4/5;object-fit:cover}
.pg-hero__media.pg-covers{margin-right:0;align-self:center}
.pg-hero__media.pg-covers li:nth-child(2){margin-top:var(--space-9)}
.pg-hero__media.pg-covers li:nth-child(3){margin-top:var(--space-6)}
.pg-covers--row{gap:clamp(16px,3vw,48px);max-width:56rem;margin-left:auto}
.pg-covers--row li:nth-child(1){margin-top:var(--space-8)}
.pg-covers--row li:nth-child(3){margin-top:var(--space-6)}
.pg-covers--row+.pg-note{margin-left:auto;max-width:56rem;margin-top:var(--space-5)}
@media (max-width:640px){
  .pg-covers{gap:var(--space-3)}
  .pg-hero__media.pg-covers li:nth-child(2){margin-top:var(--space-6)}
}

/* ── 拍搭：两路提示 ── */
.pg-cues{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5);margin:var(--space-6) 0 var(--space-6);border-top:1px solid var(--line-strong)}
.pg-cues>div{padding-top:var(--space-4)}
.pg-cues__who{font-family:var(--font-mono);font-size:var(--t-meta);line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
.pg-cues .pg-cues__say{margin-top:var(--space-3);font-size:clamp(1.25rem,1.05rem + .8vw,1.75rem);line-height:1.45;color:var(--fg);letter-spacing:-.01em}
html:lang(en) .pg-cues__say{font-family:var(--font-serif);font-style:italic}
@media (max-width:420px){.pg-cues{grid-template-columns:minmax(0,1fr)}}

/* ── 留影：分类 ── */
.pg-tags{list-style:none;margin:var(--space-6) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pg-tags li{padding:6px 12px;border:1px solid var(--line-ui);border-radius:999px;font-size:var(--t-small);line-height:1.4;color:var(--fg-2)}

/* ── 定价 ── */
.pg-prices{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.pg-prices>li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-4) var(--col-gap);align-items:baseline;padding:var(--space-7) 0;border-bottom:1px solid var(--line)}
.pg-prices__name{grid-column:1/span 3;font-size:var(--t-h3)}
html:lang(en) .pg-prices__name{font-family:var(--font-sans);font-weight:600;letter-spacing:0}
.pg-prices__name a{text-decoration:underline 1px transparent;text-underline-offset:.2em;transition:text-decoration-color var(--t-mid) var(--ease)}
.pg-prices__name a:hover{text-decoration-color:var(--accent)}
.pg-prices__fig{grid-column:4/span 3;font-size:clamp(2rem,1.4rem + 2.1vw,3.25rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--fg)}
html:lang(en) .pg-prices__fig{font-family:var(--font-serif)}
.pg-prices__fig small{display:block;margin-top:var(--space-3);font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.pg-prices__notes{grid-column:7/-1;color:var(--fg-2);max-width:36em}
@media (max-width:1024px){
  .pg-prices__name{grid-column:1/span 6}
  .pg-prices__fig{grid-column:7/-1;text-align:right}
  .pg-prices__notes{grid-column:1/-1}
}

/* ── 账号、政策 ── */
.pg-acct{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.pg-head+.pg-acct{margin-top:0}
.pg-acct>li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-4) var(--col-gap);padding:var(--space-7) 0;border-bottom:1px solid var(--line)}
.pg-acct__name{grid-column:1/span 4;font-size:clamp(1.375rem,1.15rem + .9vw,1.875rem);line-height:1.2}
.pg-acct__body{grid-column:5/-1;max-width:44rem;color:var(--fg-2)}
.pg-acct__go{grid-column:5/-1;font-size:var(--t-small)}
@media (max-width:1024px){
  .pg-acct>li{grid-template-columns:minmax(0,1fr)}
  .pg-acct__name,.pg-acct__body,.pg-acct__go{grid-column:1/-1}
}

/* ── 联系 ── */
.pg-contact{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap);align-items:start;padding-top:var(--space-7);border-top:1px solid var(--line-strong)}
.pg-contact__main{grid-column:1/span 7;min-width:0}
.pg-contact__main .pg-meta{margin-bottom:var(--space-3)}
.pg-contact .pg-contact__big{margin:0 0 var(--space-8);font-size:clamp(1.75rem,1.1rem + 2.6vw,3.25rem);line-height:1.12;letter-spacing:-.02em;color:var(--fg);overflow-wrap:anywhere}
.pg-contact__big .link{padding-bottom:4px}
.pg-contact__qr{grid-column:9/span 4;margin:0;justify-self:end;width:min(100%,260px)}
.pg-contact__qr img{width:100%;height:auto;padding:12px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-card)}
.pg-contact__qr figcaption{margin-top:12px;font-size:var(--t-micro);color:var(--fg-3);text-align:center}
@media (max-width:1024px){
  .pg-contact{grid-template-columns:minmax(0,1fr)}
  .pg-contact__main,.pg-contact__qr{grid-column:1/-1}
  .pg-contact__qr{justify-self:start;width:min(100%,220px)}
}

/* ── 更新日志 ── */
.pg-log{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.pg-log>li{display:grid;grid-template-columns:7.5rem 9.5rem minmax(0,1fr);gap:var(--col-gap);align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.pg-log time{font-family:var(--font-mono);font-size:var(--t-micro);font-variant-numeric:tabular-nums;color:var(--fg-3)}
.pg-log__tag{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.pg-log p{color:var(--fg);max-width:44em}
.pg-log p a{text-decoration:underline 1px color-mix(in srgb,var(--fg) 35%,transparent);text-underline-offset:.2em}
.pg-log p a:hover{text-decoration-color:var(--accent)}
@media (max-width:640px){
  .pg-log>li{grid-template-columns:auto minmax(0,1fr);gap:var(--space-2) var(--space-4)}
  .pg-log p{grid-column:1/-1}
}

/* ── 下载、作品筛选 ── */
.pg-filters{list-style:none;margin:0 0 var(--space-7);padding:0;display:flex;flex-wrap:wrap;gap:0 var(--space-5);border-bottom:1px solid var(--line)}
.pg-filters button{
  min-height:44px;margin-bottom:-1px;padding:0;background:none;border:0;border-bottom:1px solid transparent;cursor:pointer;
  font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.pg-filters button:hover{color:var(--fg)}
.pg-filters button[aria-pressed="true"]{color:var(--fg);border-bottom-color:var(--fg)}
[data-detect]+.pg-filters{margin-top:var(--space-4)}
.pg-dl[hidden]{display:none}
.pg-dl+.pg-dl{margin-top:var(--space-8)}
.pg-dl__h{margin:0 0 var(--space-4);font-size:var(--t-h3)}
html:lang(en) .pg-dl__h{font-family:var(--font-sans);font-weight:600;letter-spacing:0}
.pg-dl__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.pg-dl__list>li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);gap:var(--space-2) var(--col-gap);align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.pg-dl__name{font-size:1.0625rem;font-weight:500;letter-spacing:0}
html:lang(en) .pg-dl__name{font-family:var(--font-sans);font-weight:600}
.pg-dl__detail{font-size:var(--t-small);color:var(--fg-2);font-variant-numeric:tabular-nums}
.pg-dl__entry{font-size:var(--t-small);color:var(--fg-2);overflow-wrap:anywhere}
.pg-dl__list p+p,.pg-contact p+p,.pg-cues p+p{margin-top:0}
@media (max-width:768px){.pg-dl__list>li{grid-template-columns:minmax(0,1fr)}}

/* ── 作品：错落的图版，不是等大网格 ── */
.pg-gal{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-8) var(--col-gap);align-items:start}
.pg-gal>li{min-width:0}
.pg-gal>li[hidden]{display:none}
.pg-gal figure{margin:0}
.pg-gal picture{display:block;overflow:hidden;border-radius:var(--radius-img);background:var(--bg-raised)}
.pg-gal img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 900ms var(--ease)}
.pg-gal>li:hover img{transform:scale(1.025)}
.pg-gal figcaption b{display:block;font-size:var(--t-small);font-weight:500;color:var(--fg)}
.pg-gal figcaption span{display:block;margin-top:2px;font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.04em;color:var(--fg-3)}
@media (min-width:1025px){
  .pg-gal>li:nth-child(1){grid-column:1/span 5}
  .pg-gal>li:nth-child(2){grid-column:7/span 4;margin-top:var(--space-10)}
  .pg-gal>li:nth-child(3){grid-column:2/span 4}
  .pg-gal>li:nth-child(4){grid-column:7/span 6}
  .pg-gal>li:nth-child(5){grid-column:1/span 4;margin-top:var(--space-9)}
  .pg-gal>li:nth-child(6){grid-column:6/span 3}
  .pg-gal>li:nth-child(7){grid-column:9/span 4;margin-top:var(--space-10)}
  .pg-gal>li:nth-child(8){grid-column:2/span 6}
  .pg-gal>li:nth-child(9){grid-column:9/span 4;margin-top:var(--space-10)}
  /* 筛选后只剩两三张：错落的固定位置会留出大洞，改成等宽三栏 */
  .pg-gal:has(>li[hidden])>li{grid-column:span 4;margin-top:0}
}
@media (max-width:1024px){
  .pg-gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-7) var(--space-4)}
  .pg-gal>li:nth-child(even){margin-top:var(--space-8)}
  .pg-gal:has(>li[hidden])>li{margin-top:0}
}
.pg-empty{margin-top:var(--space-6)}

/* ── 案例页、帮助页的链接清单 ── */
.pg-links{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.pg-links>li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--space-2) var(--space-5);padding:13px 0;border-bottom:1px solid var(--line)}
.pg-links a{
  color:var(--fg);
  background:linear-gradient(var(--accent),var(--accent)) left bottom/0 1px no-repeat;
  padding-bottom:1px;transition:background-size var(--t-mid) var(--ease);
}
.pg-links a:hover{background-size:100% 1px}
.pg-links span{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
.pg-split__body>p+.pg-links{margin-top:var(--space-5)}
.pg-search{margin-top:var(--space-7)}
@media (pointer:coarse){.pg-links a{display:inline-block;padding-block:8px}}

/* ── 关于 ── */
.pg-claim{margin-top:var(--space-8);font-size:clamp(1.75rem,1.2rem + 2.4vw,3.5rem);line-height:1.25;letter-spacing:-.02em;font-weight:300;color:var(--fg-2);max-width:14em}
html:lang(en) .pg-claim{font-family:var(--font-serif);font-weight:400;font-style:italic;max-width:18em}
.pg-rules{list-style:none;margin:0;padding:0;counter-reset:pg-rule;border-top:1px solid var(--line-strong)}
.pg-rules>li{counter-increment:pg-rule;display:grid;grid-template-columns:2.75rem minmax(0,1fr);padding:18px 0;border-bottom:1px solid var(--line)}
.pg-rules>li::before{content:counter(pg-rule,decimal-leading-zero);padding-top:.45em;font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.08em;color:var(--fg-3)}
.pg-rules p{color:var(--fg-2)}
.pg-rules strong{font-weight:500;color:var(--fg)}

/* ── 收尾：一句话 + 一个按钮；场景页换成「下一个场景」 ── */
.pg-end{padding-block:var(--section-y-loose)}
.pg-end .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-6)}
.pg-end .wrap::before{content:"";width:48px;height:1px;background:var(--line-strong)}
.pg-end .pg-end__line{font-size:clamp(1.5rem,1.15rem + 1.5vw,2.5rem);line-height:1.25;letter-spacing:-.02em;font-weight:400;color:var(--fg);max-width:18em}
html:lang(en) .pg-end__line{font-family:var(--font-serif)}
.pg-end .pg-note{margin-top:calc(var(--space-6) * -1 + var(--space-3))}
.pg-next{padding-block:var(--section-y)}
.pg-next .wrap{background:linear-gradient(var(--line),var(--line)) var(--gutter) 0/calc(100% - var(--gutter) * 2) 1px no-repeat;padding-top:var(--space-7)}
.pg-next__link{display:inline-flex;flex-direction:column;gap:var(--space-3);color:var(--fg)}
.pg-next__link .pg-meta{margin:0}
.pg-next__title{font-size:clamp(2rem,1.3rem + 3vw,4.25rem);line-height:1.05;letter-spacing:-.03em}
html:lang(en) .pg-next__title{font-family:var(--font-serif);letter-spacing:-.015em}
.pg-next__title::after{content:"→";display:inline-block;margin-left:.35em;font-family:var(--font-sans);transition:transform var(--t-mid) var(--ease)}
.pg-next__link:hover .pg-next__title::after{transform:translateX(.18em)}
/* ==== /PAGES (A2) ==== */