/* ============================================================
   ABOUT PAGE -- page-specific styles (design source about.html)

   Shared styles live in style.css (tokens / reset / .sec-* / .lead / .eyebrow /
   .btn / .hero base / .inq / .values / .link-arrow / header / footer). This file
   only carries this page's apparatus:
     hero override -> numbers ruler -> sticky text-image pair -> ink creed band
     -> three-generation roadmap.

   File conventions (same as every other page css in the theme root):
   - every base declaration and its @media override live in THIS file, base first;
   - no tag-name selectors (#site-header etc. are in style.css) -- page css must
     never restate header/footer rules;
   - font sizes land on --fs-body / --fs-label / --fs-mini, display sizes use their
     own clamp;
   - comments in English.

   Structure of the page: hero (real gate photo) -> six figures -> the floor ->
   ink creed band -> three-generation roadmap -> the people -> shared inquiry.
   The design's own company-facts register section was cut (2026-10-09, it
   duplicated the numbers band above).
   ============================================================ */

/* ---------- hero ----------
   The gate photo: sky top left, the hall across the middle, the orange sign
   mid-right. So the scrim is "heavy at the bottom + light on the left" in two
   plates, and the middle band is deliberately left bright -- the sign must stay
   legible, so this is lighter than the product-line page scrims.
   The H1 is four lines fixed by the author's <br>; the design source pins
   max-width:none so style.css's 14ch limit cannot break HIGH-PERFORMANCE.
   Reuses the shared hero apparatus: the copy-block width, the title size and the gutter-aligned
   .hero-inner box come from the four-page "hero copy block" in style.css, so this page stays in
   step with the three product lines instead of carrying a fourth value. */
.hero-top{position:static;display:block;margin:0 0 20px;justify-content:flex-start}
.ht-short{display:none}
.hero::after{background:
  linear-gradient(0deg,rgba(10,11,20,.94) 0%,rgba(10,11,20,.7) 26%,rgba(10,11,20,.24) 54%,rgba(10,11,20,.04) 78%),
  linear-gradient(90deg,rgba(10,11,20,.86) 0%,rgba(10,11,20,.5) 34%,rgba(10,11,20,.1) 58%,rgba(10,11,20,0) 76%)}
/* 62ch, not the inherited 60ch and not the 54ch this page used to carry. The sub-copy is 41 words;
   at 54ch it broke to five lines with a single orphan ("plant.") on the last one, and 58ch fixed
   that only above 1100px. Measured, not guessed: at 1440 the box goes 557(54ch) -> 598(58ch) ->
   639(62ch), all four lines from 58ch up, so 62ch buys margin at no cost.
   The orphan still comes back at 1025-1100px, and that is NOT a max-width problem -- .hero-block is
   min(700px, 54%) there, so it is 554px at 1025 and clamps the sub regardless of its own max-width
   (even max-width:none leaves five lines at 498px). Fixing that band means widening the copy block
   for this page, which is a separate decision.
   No words were cut: the three process verbs (welded / assembled / tested) are the evidence of an
   in-house line and dropping one would weaken the point the paragraph exists to make. */
.hero .sub{max-width:62ch}
.sub-short{display:none}
.hero-inner{padding-bottom:calc(clamp(28px,5vh,56px) + 44px)}
.hero-foot{left:var(--pad);right:var(--pad);bottom:clamp(14px,2.4vh,24px);justify-content:space-between}

@media(max-width:600px){
  .ht-long{display:none}
  .ht-short{display:inline}
  .sub-long{display:none}
  .sub-short{display:inline}
  /* The portrait crop puts the orange sign in the middle of the frame, right
     behind the copy -- so the middle band needs stronger darkening here than on
     the landscape crop. */
  .hero::after{background:
    linear-gradient(180deg,rgba(10,11,20,.5) 0%,rgba(10,11,20,.2) 26%,rgba(10,11,20,0) 44%),
    linear-gradient(0deg,rgba(10,11,20,.97) 0%,rgba(10,11,20,.88) 30%,rgba(10,11,20,.68) 52%,
      rgba(10,11,20,.18) 72%,rgba(10,11,20,0) 88%)}
}

/* ---------- numbers band ----------
   A 2px ink rule + a 64px orange tick on its left end = one ruler, not six cards.
   Hairlines only separate the columns; no per-cell border or shadow, so six
   company facts do not read as six products. */
/* 2026-10 设计稿规则：不再用 1px 行/段分隔线（只保留 2px 墨色装置顶线、盒子边框）。
   下面几处是 2026-10-10 按设计稿实测清掉的。 */
.nums{background:var(--paper);
  padding:clamp(30px,4vw,48px) 0 clamp(40px,5.2vw,62px)}
.nums-lab{font-family:var(--mono);font-size:var(--fs-mini);font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.nums-row{display:grid;grid-template-columns:repeat(6,1fr);border-top:2px solid var(--ink);position:relative}
.nums-row::before{content:"";position:absolute;left:0;top:-2px;width:64px;height:2px;background:var(--orange)}
.nu{padding:30px 22px 4px 0}
.nu + .nu{border-left:1px solid var(--line);padding-left:22px}
.nu b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(1.85rem,3.3vw,2.9rem);
  line-height:.94;letter-spacing:.01em;color:var(--ink)}
.nu span{display:block;margin-top:13px;font-family:var(--mono);font-size:var(--fs-mini);
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);line-height:1.6}

/* 三列布局只在 601–1100：≤600 已变两列，此时第 4 格（右列）不该再被 3n+1 清左边框/内边距
   （实测：600 下第 4 格 pl 0 而同列的第 2/6 格 pl 22+1px 边框 → 文字比同列其它格左移 23px）。 */
@media(max-width:1100px) and (min-width:601px){
  .nums-row{grid-template-columns:repeat(3,1fr)}
  .nu{padding:24px 18px 18px 0}
  .nu:nth-child(3n+1){border-left:0;padding-left:0}
  .nu:nth-last-child(-n+3){border-bottom:0}
}

@media(max-width:600px){
  .nums-row{grid-template-columns:repeat(2,1fr)}
  .nu:nth-child(2n+1){border-left:0;padding-left:0}
}

/* ---------- two-column text/image pairs ----------
   Same behaviour as the .stage pair on the R&D & Production page, on purpose: the
   image column is sticky (the text scrolls past a picture that does not move) and
   the two pairs alternate sides -- the floor is text left, the people is image
   left. Deliberately not a full-bleed wide shot: the design's second revision
   pulled the floor image back into the right column at 4:3, matching .stage-media.
   ≤1100px the sticky and the alternation are dropped: one column, copy then image. */
.duo{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);align-items:start}
.duo.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.duo.flip .duo-txt{order:2}
.duo.flip .duo-fig{order:1}
.duo-fig{position:sticky;top:calc(var(--hh) + 40px);background:var(--ink);border:1px solid var(--line)}
.duo-fig img{width:100%;aspect-ratio:4/3;object-fit:cover}
.duo-fig figcaption{display:block;padding:10px 14px;
  font-family:var(--mono);font-size:var(--fs-mini);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(243,241,234,.8)}

@media(max-width:1100px){
  /* 单列时图片在上、文字在下（2026-10 用户要求，与 .split / .mrow 的移动端顺序一致；
     设计稿在窄屏是「先文案后图片」，这里是有意偏离）。 */
  .duo,.duo.flip{grid-template-columns:1fr}
  .duo .duo-fig,.duo.flip .duo-fig{order:1}
  .duo .duo-txt,.duo.flip .duo-txt{order:2}
  .duo-fig{position:static}
}

/* ---------- the floor / the people ---------- */
.plant,.ppl{padding:clamp(72px,8.5vw,130px) 0}
.plant .lead + .lead{margin-top:16px}
.ppl .lead{max-width:56ch}

/* ---------- mission / vision: the page's only full-width ink band ---------- */
.creed{background:var(--ink);color:var(--paper);padding:clamp(72px,7.6vw,104px) 0}
.creed-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px)}
.cv{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0 20px;align-items:baseline}
.cv .lab{font-family:var(--mono);font-size:var(--fs-mini);font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--orange)}
.cv p{font-size:clamp(1.02rem,1.45vw,1.28rem);font-weight:600;line-height:1.52;
  color:#fff;max-width:46ch}
.cv + .cv{border-left:1px solid var(--line-2);padding-left:clamp(32px,5vw,72px)}

@media(max-width:900px){
  .creed-grid{grid-template-columns:1fr;gap:30px}
  .cv + .cv{border-left:0;padding-left:0;border-top:1px solid var(--line-2);padding-top:30px}
}

@media(max-width:600px){
  .cv{grid-template-columns:minmax(0,1fr);gap:12px}
}

/* ---------- three-generation roadmap ---------- */
.next{padding:clamp(72px,8.5vw,130px) 0}
.next-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(36px,5.5vw,84px);align-items:start}
.gen{border-top:2px solid var(--ink)}
.gr{display:grid;grid-template-columns:112px minmax(0,1fr);gap:0 22px;
  padding:22px 0;align-items:baseline}
.gr .gid{font-family:var(--mono);font-size:var(--fs-label);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange)}
.gr h3{font-family:var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  font-size:1rem;line-height:1.3}
.gr p{grid-column:2;color:var(--muted);font-size:var(--fs-body);line-height:1.62;margin-top:9px}

@media(max-width:1000px){
  .next-grid{grid-template-columns:1fr}
}

@media(max-width:600px){
  .gr{grid-template-columns:minmax(0,1fr)}
  .gr p{grid-column:1}
}

/* ---------- 段间距：同底色邻居各出半档（设计稿 about 的规则） ----------
   本页底色序列：hero(墨) · nums(纸) · plant(纸) · creed(墨) · next(纸) · ppl(纸) · inq(paper-2)
   同底色相邻两对：nums|plant、next|ppl → 各侧只出半档（设计稿写的是
   .nums{padding:sec-gap 0 sec-y}、.plant,.ppl{padding:sec-y 0 sec-gap}、.next{padding:sec-gap 0 sec-y}）。
   主题移植时漏了这组，两对各出满档 → 实测 390px 下 nums|plant 与 next|ppl 都是 144px（应 72px）。

   ⚠️ 必须写在文件末尾：上面 .plant,.ppl / .next / .nums 的 padding 简写会覆盖同权重的
   padding-top/bottom 单属性（同权重时后者胜），写在前面等于没写。
   ≤920px 时由 style.css 里带 body 前缀的同名规则接管。 */
.nums{padding-bottom:clamp(36px,4.5vw,70px)}
.plant,.ppl{padding-top:clamp(36px,4.5vw,70px)}
.next{padding-bottom:clamp(36px,4.5vw,70px)}