:root{--fs-nav:13px;--fs-header-cta:12px;--fs-hero-eyebrow:10px;--fs-hero-title:120px;--fs-hero-intro:16px;--fs-hero-buttons:14px;--fs-hero-note:12px;--fs-hero-tag:13px;--fs-section-label:10px;--fs-section-kicker:10px;--fs-section-title:72px;--fs-body:15px;--fs-stats-value:30px;--fs-stats-label:10px;--fs-work-index:10px;--fs-work-title:28px;--fs-work-meta:12px;--fs-member-index:10px;--fs-member-name:23px;--fs-member-role:11px;--fs-member-bio:12px;--fs-shop-item:15px;--fs-shop-detail:11px;--fs-vote-title:68px;--fs-vote-body:15px;--fs-vote-legend:15px;--fs-vote-option:13px;--fs-vote-meta:10px;--fs-contact-link:13px;--fs-footer:10px} .main-nav{font-size:var(--fs-nav)}.header-cta{font-size:var(--fs-header-cta)}.hero .eyebrow{font-size:var(--fs-hero-eyebrow)}.hero h1{font-size:clamp(48px,10vw,var(--fs-hero-title))}.hero-intro{font-size:var(--fs-hero-intro)}.hero-actions .button,.hero-actions .text-link{font-size:var(--fs-hero-buttons)}.hero-note{font-size:var(--fs-hero-note)}.art-tag{font-size:var(--fs-hero-tag)}.section-label{font-size:var(--fs-section-label)}.kicker{font-size:var(--fs-section-kicker)}.about h2,.shop h2,.contact h2,.section-heading h2{font-size:clamp(42px,6vw,var(--fs-section-title))}.about-columns p,.shop-content p{font-size:var(--fs-body)}.stats strong{font-size:var(--fs-stats-value)}.stats span{font-size:var(--fs-stats-label)}.work-index{font-size:var(--fs-work-index)}.work-card h3{font-size:var(--fs-work-title)}.work-card p{font-size:var(--fs-work-meta)}.member-home-body .work-index{font-size:var(--fs-member-index)}.member-home-body h3{font-size:var(--fs-member-name)}.member-home-role{font-size:var(--fs-member-role)!important}.member-home-body p{font-size:var(--fs-member-bio)}.channel-list b{font-size:var(--fs-shop-item)}.channel-list small{font-size:var(--fs-shop-detail)}.vote h2{font-size:clamp(42px,6vw,var(--fs-vote-title))}.vote-copy p{font-size:var(--fs-vote-body)}.vote-form legend{font-size:var(--fs-vote-legend)}.vote-form label{font-size:var(--fs-vote-option)}.vote-meta{font-size:var(--fs-vote-meta)}.contact-links a{font-size:var(--fs-contact-link)}footer{font-size:var(--fs-footer)} .cms-work-card,.member-home-card{background:var(--glass-overlay)!important;position:relative;isolation:isolate}.cms-work-card:before,.member-home-card:before{content:"";position:absolute;inset:0;background:var(--glass-overlay);opacity:var(--glass-opacity);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation));z-index:-1}.cms-work-card .work-visual,.member-home-image{background:transparent}.cms-work-card .work-visual img,.member-home-image img{object-fit:contain;background:rgba(255,255,255,.08)} /* ── 各板块字体 / 字距 / 行距 ───────────────────────────────── 变量由 font-catalog.js 按后台设置写入 。没有设置时变量 不存在，回退值就是 style.css 里原本的排版，所以默认外观不变。 --ff-* 字体族 · --ls-* 字距（em）· --lh-* 行距（无单位倍数） 三组各自独立，可以只调字距不换字体。 */ body,.about-columns p,.shop-content p,.vote-copy p{font-family:var(--ff-body,var(--ff-base,inherit));letter-spacing:var(--ls-body,var(--ls-base,normal));line-height:var(--lh-body,var(--lh-base,inherit))} .hero h1,.about h2,.shop h2,.contact h2,.section-heading h2,.vote h2{font-family:var(--ff-display,var(--ff-base,inherit));letter-spacing:var(--ls-display,var(--ls-base,normal));line-height:var(--lh-display,var(--lh-base,inherit))} .main-nav,.header-cta,.lang-toggle,.button,.text-link,.hero-actions .button,.hero-actions .text-link,footer{font-family:var(--ff-nav,var(--ff-base,inherit));letter-spacing:var(--ls-nav,var(--ls-base,normal));line-height:var(--lh-nav,var(--lh-base,inherit))} .eyebrow,.kicker,.section-label,.art-tag,.art-caption,.work-index,.intro-code,.hero-note{font-family:var(--ff-label,var(--ff-nav,var(--ff-base,inherit)));letter-spacing:var(--ls-label,var(--ls-nav,var(--ls-base,normal)));line-height:var(--lh-label,var(--lh-nav,var(--lh-base,inherit)))} .stats strong,.vote-meta,#total-votes,.vote-form b{font-family:var(--ff-stat,var(--ff-label,var(--ff-base,inherit)));letter-spacing:var(--ls-stat,var(--ls-label,var(--ls-base,normal)));line-height:var(--lh-stat,var(--lh-label,var(--lh-base,inherit)))} .work-card h3,.work-card p,.cms-work-author,.cms-work-commerce{font-family:var(--ff-work,var(--ff-base,inherit));letter-spacing:var(--ls-work,var(--ls-base,normal));line-height:var(--lh-work,var(--lh-base,inherit))} .member-home-body h3,.member-home-role,.member-home-body p{font-family:var(--ff-member,var(--ff-base,inherit));letter-spacing:var(--ls-member,var(--ls-base,normal));line-height:var(--lh-member,var(--lh-base,inherit))} .channel-list b,.channel-list small{font-family:var(--ff-shop,var(--ff-base,inherit));letter-spacing:var(--ls-shop,var(--ls-base,normal));line-height:var(--lh-shop,var(--lh-base,inherit))} .vote-form legend,.vote-form label,.vote-status{font-family:var(--ff-vote,var(--ff-base,inherit));letter-spacing:var(--ls-vote,var(--ls-base,normal));line-height:var(--lh-vote,var(--lh-base,inherit))} /* ── 统计一行的对齐 ─────────────────────────────────────────── 原本是 flex + 固定 gap，三格各自按内容宽度排，所以标签的左边缘 参差不齐；更明显的是三个数值分别是等宽数字（03）、符号（∞）和 中文（全球），字体不同导致行高不等，下面的标签被推到不同高度。 改成等宽网格 + 给数值锁死行高，标签就落在同一条线上。 支持 subgrid 的浏览器再进一步：两行由容器统一分配， 即使某个数值折行，标签依然齐平。 */ .stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 40px; align-items:start; } .stats div{display:grid;gap:6px;align-content:start} .stats strong{ display:block; font-size:var(--fs-stats-value); /* 锁定行高，抹平中英文字体的行盒差异 */ line-height:1.15; min-height:1.15em; } .stats span{display:block} @supports(grid-template-rows:subgrid){ .stats{grid-template-rows:auto auto} .stats div{grid-row:span 2;grid-template-rows:subgrid} } /* style.css 的 800px 断点里有 .stats{gap:25px}，只覆盖间距不影响这里的网格 */ @media(max-width:560px){ /* 三列在窄屏挤得数值折行，改两列 */ .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px} } .contact-links a{font-family:var(--ff-contact,var(--ff-base,inherit));letter-spacing:var(--ls-contact,var(--ls-base,normal));line-height:var(--lh-contact,var(--lh-base,inherit))} /* ── 手机端：作品与成员改横向滑轨 ───────────────────────────── 条目多了以后纵向堆叠会长到划不完。窄屏改成一条横向轨道： 卡片定宽、下一张露出一角作为"还有更多"的提示，配 scroll-snap 让每次滑动停在卡片边缘。滚动条保留但做细，它本身就是进度指示。 */ @media(max-width:900px){ .works-grid,.members-grid{ display:flex; grid-template-columns:none; gap:14px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; /* 左右各留出与页面一致的边距，同时让轨道流出容器边缘 */ padding:0 5vw 14px; margin:0 -5vw; scroll-padding-left:5vw; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; } .works-grid>*,.members-grid>*{ flex:0 0 min(78%,19rem); scroll-snap-align:start; } /* 细滚动条：既是提示也是进度 */ .works-grid,.members-grid{scrollbar-width:thin;scrollbar-color:rgba(17,17,24,.28) transparent} .works-grid::-webkit-scrollbar,.members-grid::-webkit-scrollbar{height:4px} .works-grid::-webkit-scrollbar-track,.members-grid::-webkit-scrollbar-track{background:rgba(17,17,24,.08);border-radius:2px} .works-grid::-webkit-scrollbar-thumb,.members-grid::-webkit-scrollbar-thumb{background:rgba(17,17,24,.3);border-radius:2px} } @media(max-width:900px) and (prefers-reduced-motion:reduce){ .works-grid,.members-grid{scroll-snap-type:none} } /* ── 手机端重叠修正 ─────────────────────────────────────────── */ @media(max-width:800px){ /* 首屏的状态条原本绝对定位在 hero 底部；窄屏 hero 变成 block 布局后它会压在标志画框上。改回文档流跟在按钮下面。 */ .hero-note{position:static;margin:0 0 8px;padding:0 8vw} /* 长中文标题在 320px 下不能溢出容器 */ .hero h1,.about h2,.shop h2,.contact h2,.vote h2,.section-heading h2{word-break:break-word} } @media(max-width:520px){ /* 作品卡右下角的箭头会压到标题上，窄屏给它让位 */ .work-card{padding-bottom:52px} /* 画框的硬投影在窄屏会顶出横向滚动 */ .logo-frame{box-shadow:8px 8px 0 var(--orange)} }