/* masklabo · site
   全部是排版规则，没有一条装饰。图只出现在裁片图与线稿，靠网格与细线承重。 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* 亚像素累计在 320 px 屏上会多出 1 px，够触发一条横向滚动。
     clip 而不是 hidden：hidden 会把 body 变成滚动容器，sticky 导航随之失效；
     clip 只裁不建容器。这是兜底，不是修法 —— 真正超宽的元素仍会被
     Playwright 的断点检测抓到。 */
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-cn);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ── 版心 ─────────────────────────────────────────────── */
.wrap {
  width: min(var(--wrap-max), 100% - var(--pad-x) * 2);
  margin-inline: auto;
}

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

.sec {
  padding-block: var(--s-section);
}

.sec--tight {
  padding-block: calc(var(--s-section) * 0.62);
}

.sec--dark {
  background: var(--ink-soft);
  color: var(--paper);
}

.sec--paper2 {
  background: var(--paper-2);
}

/* ── 字级 ─────────────────────────────────────────────── */
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.sec--dark .label {
  color: var(--faint);
}

.label--ink {
  color: var(--ink);
}

/* 含中文的标签档：降字距。宽字距只适合全大写拉丁，中文会被拉散。 */
.label--cn {
  letter-spacing: 0.05em;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0; /* 中文标题不加宽字距 */
}

h1 {
  font-size: var(--fs-h1);
  line-height: 1.24;
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.4;
}

h3 {
  font-size: var(--fs-h3);
  line-height: 1.55;
  font-weight: 600;
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-cn);
  color: var(--ink-mid);
  margin: 0;
}

.sec--dark .lead {
  color: rgba(255, 255, 255, 0.72);
}

.body {
  font-size: var(--fs-body);
  line-height: var(--lh-cn);
  color: var(--muted);
  margin: 0;
}

.small {
  font-size: var(--fs-small);
  line-height: 1.9;
  color: var(--muted);
  margin: 0;
}

.micro {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  color: var(--faint);
  margin: 0;
  text-transform: uppercase;
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ── 线 ───────────────────────────────────────────────── */
.hr {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

.hr--rule {
  background: var(--rule);
}

.hr--top {
  border-top: 1px solid var(--rule);
}

/* 两版裁片图：desktop 与 mobile 各自生成，而不是用 CSS 缩放一张 ——
   CSS 缩放会把标注字号一起缩小，违反"标注永不低于 9px"。 */
.only-mobile {
  display: none;
}

@media (max-width: 767px) {
  .only-desktop {
    display: none;
  }
  .only-mobile {
    display: block;
  }
}

/* ── 导航 ─────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.nav__in {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wordmark {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.nav__links {
  display: flex;
  gap: 34px;
}

.nav__links a {
  display: inline-flex;
  align-items: center;
  /* 触控目标：文字只有 11px 高，原来的可点区域不到 20px。
     手机上这是全站最容易点错的一处（三个词挨得近）。 */
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
}

/* 下划线改伪元素：a 撑到 44px 高之后，border-bottom 会掉到块的底边，
   离文字太远。伪元素可以钉在文字下方 13px 处，视觉与原来一致。 */
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 13px;
  height: 1px;
  background: transparent;
}

.nav__links a:hover,
.nav__links a[aria-current="page"] {
  color: var(--ink);
}

.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after {
  background: var(--ink);
}

/* ── Hero + 裁片图 ───────────────────────────────────── */
.hero {
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: var(--s-section);
}

.hero__head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--gutter);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 72px);
}

.hero__eyebrow {
  margin-bottom: 18px;
}

.hero__lead {
  max-width: 40em;
  padding-bottom: 4px;
}

.fig {
  border-top: 1px solid var(--rule);
  padding-top: 20px;
}

.fig__canvas {
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: 8px 4px;
}

.fig__canvas svg {
  max-width: 100%;
  height: auto;
}

.fig__note {
  display: flex;
  gap: 28px;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  margin-top: 18px;
}

.fig__note .small {
  max-width: 62em;
}

/* ── 常数条 ───────────────────────────────────────────── */
.constants {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}

/* 使用序列是 5 步，挤进 4 列会让第 5 步孤零零掉到第二行 */
.constants--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.const {
  padding: 26px 24px 26px 0;
  border-right: 1px solid var(--line);
}

.const:last-child {
  border-right: 0;
}

.const__v {
  font-family: var(--font-mono);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.const__u {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0;
}

.const__l {
  margin-top: 12px;
  font-size: var(--fs-small);
  color: var(--ink-mid);
}

.const__c {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: var(--faint);
}

/* ── 四片索引 ─────────────────────────────────────────── */
.cuts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  border-top: 1px solid var(--rule);
  padding-top: 0;
}

.cutcard {
  padding: 24px 22px 26px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cutcard:last-child {
  border-right: 0;
}

.cutcard:hover {
  background: var(--paper-2);
}

.cutcard__code {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.cutcard__name {
  font-size: var(--fs-h3);
  font-weight: 600;
}

.cutcard__en {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  color: var(--faint);
  text-transform: uppercase;
  margin-top: -12px;
}

/* 卡片图右上下出血到卡片边缘：图版要与卡片同宽，
   否则四张小图各缩在 padding 里，四块暗场会显得畏缩 */
.cutcard__img {
  margin: -24px -22px 0;
  line-height: 0;
}

.cutcard__img img {
  display: block;
  width: 100%;
  height: auto;
}

.cutcard__kv {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.cutcard__kv div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
}

.cutcard__kv dt {
  color: var(--muted);
  font-size: var(--fs-small);
}

.cutcard__kv dd {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-small);
}

/* ── 规格表 ───────────────────────────────────────────── */
.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.spec th,
.spec td {
  text-align: left;
  padding: 15px 18px 15px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: baseline;
}

.spec thead th {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--faint);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}

/* 列宽只对首页横表生效。收窄到 .spec--grid ——
   否则同一组 nth-child 规则会打断单款页的两列竖表。
   用百分比而非 px：px 列宽之和小于容器时，剩余宽度全被最后一列吞掉，
   表格看起来就像右半边空着。 */
.spec--grid,
.spec--derive,
.spec--const {
  table-layout: fixed;
}

.spec--grid th:nth-child(1) { width: 18%; }
.spec--grid th:nth-child(2) { width: 11%; }
.spec--grid th:nth-child(3) { width: 15%; }
.spec--grid th:nth-child(4) { width: 12%; }
.spec--grid th:nth-child(5) { width: 26%; }
.spec--grid th:nth-child(6) { width: 18%; }

/* LABS 的两张表：常数表（量 / 值 / 条件）与推导表（六列） */
.spec--const th:nth-child(1) { width: 24%; }
.spec--const th:nth-child(2) { width: 20%; }

/* 用百分比而不是 px：六列在 1200 宽里按比例铺满，
   最后两列不会吞掉剩余空间、把数值挤在列左缘留一片空白 */
.spec--derive th:nth-child(1) { width: 12%; }
.spec--derive th:nth-child(2) { width: 17%; }
.spec--derive th:nth-child(3) { width: 10%; }
.spec--derive th:nth-child(4) { width: 26%; }
.spec--derive th:nth-child(5) { width: 17%; }
.spec--derive th:nth-child(6) { width: 18%; }

/* 正文里的行内链接：404 与 LABS 免责段落里会用到 */
a.inline {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-2);
}

/* 六列在 390px 下压不出可读宽度。宁可让表在容器内横滑，也不删列、不缩字号 */
.spec-scroll {
  overflow-x: auto;
}

.spec-scroll .spec {
  min-width: 580px;
}

.spec td.n,
.spec th.n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.spec td.dim {
  color: var(--muted);
}

/* ── 单款规格详表（两列竖排）────────────────────────────── */
.spec--v {
  table-layout: fixed;
}

.spec--v caption {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  color: var(--faint);
  padding-bottom: 12px;
}

.spec--v th,
.spec--v td {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: baseline;
}

/* 最后一行不留横线，免得和下面的免责声明粘成一张表 */
.spec--v tr:last-child th,
.spec--v tr:last-child td {
  border-bottom: 0;
}

.spec--v th {
  width: 44%;
  font-weight: 400;
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
}

/* ── 单款页 ───────────────────────────────────────────── */
.cutpage {
  padding-top: clamp(36px, 4.6vw, 68px);
}

.cutpage__head {
  max-width: 42em;
  padding-bottom: clamp(28px, 3.4vw, 44px);
}

.cutpage__head h1 {
  margin: 10px 0 18px;
}

.cutpage__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 4.4vw, 64px);
  align-items: start;
  border-top: 1px solid var(--rule);
  padding-top: clamp(24px, 3vw, 36px);
}

/* 不拉满：详图的 9px 标注是屏幕空间恒定值，靠 CSS 放大缩小都会破坏这个前提。
   桌面/手机是两张不同比例的图（build.py 各出一张），这里只保证不超出栏宽。 */
.cutpage__fig svg {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
}

.notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.4vw, 48px);
}

.note h3 {
  font-size: var(--fs-h3);
  font-weight: 400;
  margin: 8px 0 12px;
  letter-spacing: 0.01em;
}

.note .body {
  color: var(--ink-mid);
}

.pager {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(32px, 4vw, 52px);
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.pager__a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-small);
}

.pager__a--next {
  text-align: right;
  margin-left: auto;
}

.pager__a b {
  font-weight: 400;
}

/* ── 单向渗透示意 ─────────────────────────────────────── */
.osmosis-fig {
  margin-top: clamp(32px, 4vw, 56px);
}

.osmosis-fig svg {
  width: 100%;
  height: auto;
}

/* 内联 SVG 里的中文标注：走中文字体栈，不用等宽拉丁 */
.f-cn {
  font-family: var(--font-cn);
}

/* ── LabelCard ────────────────────────────────────────── */
.labelcard {
  border: 1px solid var(--line-2);
  padding: 16px 16px 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  line-height: 1.55;
  color: var(--ink-mid);
  max-width: 268px;
  background: var(--paper);
}

.labelcard__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 2.5px 0;
}

.labelcard__row span:first-child {
  color: var(--faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.labelcard__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.labelcard__code {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
}

.labelcard__foot {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 9.5px;
  letter-spacing: 0.08em;
}

/* ── 页脚 ─────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--rule);
  padding-top: 40px;
  padding-bottom: 56px;
}

.foot__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 40px;
}

.foot__mark {
  font-family: var(--font-mono);
  font-size: clamp(28px, 5vw, 58px);
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.foot__cols {
  display: grid;
  grid-template-columns: 0.8fr 1.1fr 1fr 1.4fr;
  gap: var(--gutter);
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}

.foot__col {
  display: grid;
  gap: 9px;
  align-content: start;
}

.foot__col a,
.foot__col p {
  font-size: var(--fs-small);
  color: var(--muted);
  margin: 0;
}

.foot__bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 22px;
}

/* ── DRAFT 角标（spec_status=placeholder 时注入）────────── */
.draft {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 90;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  padding: 6px 10px;
  text-transform: uppercase;
}

/* ── 响应式 ───────────────────────────────────────────── */
/* 图版，单款页与 LABS 的大图 ───────────────────────────
   图版不进 .wrap —— 它比正文宽，读起来才像印刷品的插页，
   而不是正文里塞的一张插图。 */
/* sticky 导航高 58px：锚点跳转后标题会被压在导航底下，
   这一行是页内 #l1 / #s3 这类链接能用的前提 */
.sec,
.sec--tight,
.hero {
  scroll-margin-top: 74px;
}
.plate {
  margin: 0 auto;
  max-width: min(1080px, 104vh);
}

.plate img {
  display: block;
  width: 100%;
  height: auto;
}

/* <picture> 默认是 inline：img 的 width:100% 会相对这个 inline 盒计算，
   在极窄屏上能算出比容器多 1px 的宽度，页面就出现一条横向滚动。
   把它变成块级，宽度链条才是「容器 → picture → img」一条线。 */
picture {
  display: block;
}

.plate__cap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 24px;
  padding-top: 13px;
  color: var(--muted);
}

/* 纸白底的图与纸白页面同色，不画一条线就会和下面的正文粘在一起 */
.plate--paper {
  margin-top: var(--s-section);
  margin-bottom: var(--s-section);
}

.plate--paper .plate__cap {
  border-top: 1px solid var(--line);
  padding-top: 13px;
}

/* 图没生成时的占位：维持版面高度，避免整页塌成一条线 */
.img-missing {
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(
    45deg,
    var(--paper-2) 0 12px,
    transparent 12px 24px
  );
  border: 1px solid var(--line);
}

/* 六列推导表在窄屏横滑；横滑提示只在需要横滑的断点出现 */
.spec-scroll__hint {
  display: none;
}

@media (max-width: 1023px) {
  .constants,
  .cuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .foot__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* 5 步那一行仍然保持 5 列：每格只有两个字，缩到 2 列反而更难读 */
  .constants--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .constants--5 .const:nth-child(n + 3) {
    border-top: 0;
  }
  .const,
  .cutcard {
    border-right: 1px solid var(--line);
  }
  .const:nth-child(2n),
  .cutcard:nth-child(2n) {
    border-right: 0;
  }
  .const:nth-child(n + 3),
  .cutcard:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
  .hero__head {
    grid-template-columns: 1fr;
  }
  /* 图与表并排到 1023 就见底了：详表的字段名一旦换行，"R 14 mm" 会跟下一行粘上 */
  .cutpage__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  /* 图版满宽出血：手机上留白比"居中"值钱，图要顶到两边 */
  .plate {
    max-width: none;
  }
  .plate__cap {
    padding: 11px var(--pad-x) 0;
  }
  .plate--paper {
    margin-top: var(--s-section);
    margin-bottom: var(--s-section);
  }
  .plate--paper .plate__cap {
    /* 纸白图本身已经顶到屏幕边，图注跟图同边距就行 */
    padding-top: 11px;
  }
  /* 表格横滑给一句提示 —— 没有提示的话，右侧被切掉的那半截
     会被当成"表就画到这里"，而不是"还有内容可以滑" */
  .spec-scroll__hint {
    display: block;
    margin-bottom: 8px;
    color: var(--faint);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.08em;
  }
  .nav__links {
    gap: 14px;
  }
  .nav__links a {
    font-size: 11px;
    letter-spacing: 0.06em;
    padding: 0 2px;
  }
  .foot__col a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .constants,
  .cuts {
    grid-template-columns: 1fr;
  }
  /* 手机上卡片改成「图满宽 + 文字缩进」。
     卡片本身不再留左右 padding —— 否则图想出血就得用负 margin，
     而桌面那条 -22px 一旦碰上手机被清零的 padding-right 就会横向溢出。 */
  .cutcard {
    padding: 0 0 24px;
  }
  .cutcard__img {
    margin: 0 0 18px;
  }
  .cutcard__code,
  .cutcard__name,
  .cutcard__en,
  .cutcard__kv {
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
  }
  .const,
  .cutcard {
    border-right: 0;
    border-top: 1px solid var(--line);
    padding-right: 0;
  }
  .const:first-child,
  .cutcard:first-child {
    border-top: 0;
  }
  .fig__note {
    flex-direction: column;
    gap: 8px;
  }
  .foot__cols {
    grid-template-columns: 1fr;
  }
  .foot__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .spec th,
  .spec td {
    padding: 12px 10px 12px 0;
  }
  .spec .hide-sm {
    display: none;
  }
  /* 三列在 390px 下会被挤成三条窄缝：改成「量 + 值」一行、条件独占一行 */
  .spec--const thead {
    display: none;
  }
  .spec--const tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }
  .spec--const td {
    border-bottom: 0;
    padding: 0;
  }
  .spec--const td:nth-child(2) {
    text-align: right;
  }
  .spec--const td:nth-child(3) {
    grid-column: 1 / -1;
    margin-top: 5px;
  }
  .labelcard {
    max-width: none;
  }
  .notes {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .pager {
    flex-direction: column;
    gap: 18px;
  }
  .pager__a--next {
    text-align: left;
    margin-left: 0;
  }
}

/* 打印：图纸必须能打印，这是"技术图"定位的一部分 */
@media print {
  .nav,
  .draft {
    display: none;
  }
  .sec--dark {
    background: #fff;
    color: #000;
  }
  .cutcard:hover {
    background: none;
  }
  /* 暗场渲染图打出来是一整块黑：压到几十毫米，别让它吃掉一整页。
     contain 保证不裁掉刻度，宁可左右留黑。 */
  .plate {
    max-width: 100%;
    break-inside: avoid;
  }
  .plate img {
    max-height: 62mm;
    object-fit: contain;
    background: #161616;
  }
  .cutcard__img img {
    max-height: 28mm;
    object-fit: contain;
    background: #161616;
  }
}