/* p-about.css — 关于我们（/about/）、404。全站组件在 fyro.css。
   v0.15（2026-10-16）「三层服务」：关于页精简成三节。
   关于：首屏（背后是字符粒子，glyphs.js）；01 方法：sec-head + 三点并排（.trio）+ 两行和一个链接；
   02 运营主体与资质（深一层）：左标题、右边一张纸（旧页那张 dl）；03 关注（#follow）：一张纸，左边小标题，右边平台和等候名单。
   404：首屏居中（背后是字符粒子），下面各栏目的入口排成小卡片。 */

/* 10-27 删废话：各节的编号小标、404 的导语删了；节标题前面没有小标，顶格 */
.sec-title:first-child { margin-top: 0; }

/* ---------- 首屏 ---------- */
.about-hero .page-lead { max-width: 40em; }

/* ---------- 01 方法 ---------- */
.about-method .sec-head { align-items: end; }
.about-method-lead { max-width: 34em; }
.about-trio .trio-no { font-size: 13px; }
.about-trio li { padding-block: 20px 18px; }
.about-trio .trio-name { font-size: clamp(21px, 2.2vw, 26px); }
.about-trio .trio-text { margin-top: 6px; font-size: 15.5px; line-height: 1.85; color: var(--ink-2); }
.about-coda { display: grid; justify-items: start; gap: 10px; max-width: 46em; margin-top: clamp(36px, 4.5vw, 56px); }
.about-coda p { font-size: 15px; line-height: 1.95; color: var(--ink-soft); text-wrap: pretty; }
.about-coda .about-collab { font-family: var(--head); font-size: clamp(18px, 1.6vw, 21px); font-weight: 600; line-height: 1.7; letter-spacing: 0.02em; color: var(--ink); }
.about-coda .text-link { margin-top: 8px; }
@media (max-width: 639px) {
  .about-trio { grid-template-columns: minmax(0, 1fr); }
  .about-trio li { grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; padding: 16px 0; }
  .about-trio li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .about-trio .trio-no { grid-row: 1; padding-top: 0.45em; }
  .about-trio .trio-name, .about-trio .trio-text { grid-column: 2; }
  .about-trio .trio-text { margin-top: 2px; }
}

/* ---------- 02 运营主体与资质：左标题、右边一张纸 ---------- */
.about-split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 32px clamp(40px, 6vw, 88px); align-items: start; }
@media (max-width: 1023px) { .about-split { grid-template-columns: minmax(0, 1fr); } }
.about-company { padding: clamp(10px, 1.6vw, 18px) clamp(22px, 3vw, 32px); border: 1px solid var(--line); border-radius: 18px; background: var(--sheet); box-shadow: var(--sheet-shadow); }
.about-sub-note { font-size: 14px; line-height: 1.85; color: var(--ink-soft); }
.about-company-sec .about-sub-note { max-width: 24em; margin-top: 22px; font-size: 15px; }
.about-facts { margin-top: 0; border-top: 0; }
.about-facts > div { grid-template-columns: 8.5em minmax(0, 1fr); }
.about-facts dd { color: var(--ink-2); overflow-wrap: anywhere; }
.about-facts a { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.about-facts a:hover { color: var(--cinnabar-text); text-decoration-color: currentColor; }
.about-facts > div:last-child { border-bottom: 0; }

/* ---------- 03 关注 ---------- */
/* 关注驭火LAB（#follow，页脚和芝微手记页链接到这里）：一张纸，左边小标题，右边平台和等候名单（账号开通后是账号卡片） */
.about-follow { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 16px clamp(32px, 5vw, 72px); align-items: start; padding: clamp(24px, 3.5vw, 40px); border: 1px solid var(--line); border-radius: 18px; background: var(--sheet); box-shadow: var(--sheet-shadow); }
.about-sub-title { font-family: var(--head); font-size: clamp(24px, 1.2vw + 18px, 30px); font-weight: 600; line-height: 1.3; letter-spacing: 0.03em; color: var(--ink); }
.about-follow .about-sub-note + .follow-plan { margin-top: 14px; }
.follow-plan { margin-top: 0; }
.follow-plan > div { grid-template-columns: 6.5em minmax(0, 1fr); }
.follow-plan dt { color: var(--ink-2); font-weight: 600; }
.about-follow .wait-line { margin-top: 18px; }
.about-follow .wait-line .wait-btn { margin-left: 0; }
.follow-group + .follow-group { margin-top: 26px; }
.follow-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; margin-bottom: 12px; }
.follow-group-head h3 { font-size: 17px; font-weight: var(--w-title); letter-spacing: var(--track-tight); }
.follow-group-head p { font-size: 13.5px; color: var(--muted); }
.follow-group-link { font-size: 13.5px; font-weight: 500; color: var(--ink-2); border-bottom: 1px solid var(--line-2); }
.follow-group-link:hover { color: var(--cinnabar-text); border-bottom-color: currentColor; }
.follow-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.follow-cards .follow-item { display: grid; justify-items: start; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--sheet-hi); box-shadow: inset 0 1px 0 var(--key-paper-hi), var(--sheet-edge), 0 3px 4px -2px rgb(var(--shadow-rgb) / 0.1); }   /* 纸面上的小卡：纸边 + 一层贴近的阴影（10-20） */
.follow-cards .follow-link { display: grid; gap: 2px; padding: 0; border: 0; border-radius: 0; background: none; }
.follow-cards .follow-platform { font-size: 16px; font-weight: 600; color: var(--ink); }
.follow-cards .follow-name { font-size: 13px; color: var(--muted); }
.follow-cards .follow-qr { width: 100%; max-width: 120px; height: auto; aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: 8px; }
/* 卡片上的平台图标（页脚同款 si-*）；只有账号名、还没有主页链接的卡片写「搜索账号名」 */
.follow-cards .follow-icon { width: 20px; height: 20px; margin-bottom: 8px; fill: currentColor; color: var(--ink); }
.follow-cards [data-platform$="xiaohongshu"] .follow-icon { width: 28px; height: 28px; margin-block: -4px 4px; }  /* 小红书的标志是一行字，放大才认得出 */
.follow-cards .follow-hint { margin-top: 8px; font-size: 12px; letter-spacing: 0.04em; color: var(--muted); }
/* 带二维码的卡片（10-16）：整张卡是一个链接（data-qr，电脑上点开弹出大二维码，手机上跳主页或弹窗，见 qr.js），二维码就在卡上 */
.follow-cards .has-qr { padding: 0; }
.follow-cards .has-qr .follow-link { width: 100%; height: 100%; padding: 16px; border-radius: 14px; transition: background-color 160ms ease-out; }
.follow-cards .has-qr .follow-hint { margin-top: 4px; font-family: var(--mono); letter-spacing: 0.02em; overflow-wrap: anywhere; }
.follow-cards .has-qr .follow-qr { display: block; width: 100%; max-width: 132px; margin-top: 14px; border: 0; border-radius: 10px; }
.follow-cards [data-platform="liyang-channels"] .follow-qr, .follow-cards [data-platform="liyang-xiaohongshu"] .follow-qr { border: 1px solid var(--line); background: #fff; }
@media (hover: hover) and (pointer: fine) {
  .follow-cards .has-qr { transition: translate 220ms var(--ease), border-color 160ms ease-out, box-shadow 220ms ease-out; }
  .follow-cards .has-qr:hover { translate: 0 -2px; border-color: rgb(var(--ink-rgb) / 0.3); box-shadow: inset 0 1px 0 var(--key-paper-hi), var(--sheet-edge), 0 8px 12px -8px rgb(var(--shadow-rgb) / 0.14), 0 18px 26px -16px rgb(var(--shadow-rgb) / 0.24); }
}
/* 力扬有数（#liyang，10-16）：发起人的个人品牌，排在驭火LAB 和芝微手记前面，下面一条细线隔开 */
.follow-liyang { padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--line); scroll-margin-top: 96px; }
.liyang-head { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; }
.liyang-logo { flex: none; width: 128px; height: auto; image-rendering: pixelated; }
.liyang-head h3 { font-size: 19px; font-weight: var(--w-title); letter-spacing: var(--track-tight); }
.liyang-head h3 small { margin-left: 10px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; color: var(--muted); }
.liyang-head p { margin-top: 6px; font-size: 14.5px; line-height: 1.8; color: var(--ink-soft); text-wrap: pretty; }
/* 手机：三个平台各占一整行，左边图标和文字，右边小二维码（整行都能点，见 qr.js） */
@media (max-width: 767px) {
  .follow-liyang .follow-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .follow-cards .has-qr .follow-link { grid-template-columns: 30px minmax(0, 1fr) 76px; column-gap: 12px; row-gap: 0; align-items: center; padding: 12px 12px 12px 14px; }
  .follow-cards .has-qr .follow-icon { grid-column: 1; grid-row: 1 / 4; margin: 0; }
  .follow-cards .has-qr .follow-platform, .follow-cards .has-qr .follow-name, .follow-cards .has-qr .follow-hint { grid-column: 2; }
  .follow-cards .has-qr .follow-qr { grid-column: 3; grid-row: 1 / 4; width: 76px; margin: 0; }
}
@media (max-width: 479px) { .liyang-head { flex-direction: column; align-items: flex-start; gap: 14px; } }
@media (max-width: 767px) { .about-follow { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 479px) {
  .follow-plan > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .follow-cards { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
  .follow-cards .follow-item { padding: 12px; }
}

/* ---------- 404 ---------- */
.nf-hero { text-align: center; }
.nf-hero .page-hero-text { max-width: 720px; margin-inline: auto; }
.nf-hero .actions { justify-content: center; }
.nf-note { max-width: 720px; margin-top: -24px; text-align: center; }
.nf-note .note-line { margin-top: 0; }
.sec.nf-go { padding-top: clamp(24px, 4vw, 48px); }
.nf-go .chapter { justify-content: center; margin-bottom: 22px; }
.nf-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 880px; margin-inline: auto; }
.nf-link { display: flex; align-items: center; gap: 14px; height: 100%; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--sheet); box-shadow: var(--sheet-shadow); font-size: 15px; font-weight: 500; color: var(--ink); transition: translate 200ms var(--ease), border-color 160ms ease-out, box-shadow 220ms ease-out; }
.nf-link .link-icon { width: 36px; height: 36px; border-radius: 10px; }
.nf-link .link-icon .i { width: 17px; height: 17px; }
.nf-link .arrow { margin-left: auto; color: var(--muted); transition: translate 200ms var(--ease), color 160ms ease-out; }
@media (hover: hover) and (pointer: fine) {
  .nf-link:hover { translate: 0 -2px; border-color: rgb(var(--ink-rgb) / 0.22); box-shadow: var(--sheet-shadow-lift); }
  .nf-link:hover .arrow { translate: 2px -2px; color: var(--cinnabar-text); }
}
@media (max-width: 767px) { .nf-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .nf-links { grid-template-columns: minmax(0, 1fr); } }

/* ---------- v0.23「理顺」（2026-10-22）：关于页不再要求比块页矮 ----------
   首屏右边是「我们自己怎么用」（#self，一张白纸：四样东西两列，下面一排做法用箭头连着）；
   下面 01 方法（一段话）、02 关注（#follow，一张白纸，左标题右内容，同 v0.15 的版式）、03 运营主体与资质（#company，左标题右一张纸），再接页尾表单。
   v0.22 把运营主体塞进首屏、方法和关注挤成一节两栏的那些样式（.about-cols、.about-main …）拿掉了，写法在 git 历史里。 */
.about-hero.brief-hero .page-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); }
.about-self { padding: 20px 22px 20px; border: 1px solid var(--line); border-radius: 18px; background: rgb(var(--paper-rgb) / 0.96); box-shadow: var(--sheet-shadow); }
.about-self-k { font-size: 13px; font-weight: 500; letter-spacing: 0.06em; color: var(--muted); }
.about-self-lead { margin-top: 8px; font-family: var(--head); font-size: clamp(17px, 1.4vw, 19px); font-weight: 600; line-height: 1.5; color: var(--ink); }
.about-self-made { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.about-self-made li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--sheet); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.about-self-made .i { width: 18px; height: 18px; color: var(--cinnabar-text); }
.about-self-how-k { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; letter-spacing: 0.06em; color: var(--muted); }
.about-self-how { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin-top: 6px; }
.about-self-how li { display: inline-flex; align-items: center; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); white-space: nowrap; }
.about-self-how li + li::before { content: "→"; margin: 0 8px; color: var(--accent-text-sm); }
/* 01 方法：只有一段，上下留白收一档 */
.sec.brief-sec.about-method .sec-head { margin-bottom: 0; }
/* 02 关注：左边标题；右边是力扬有数（标志和一句、三张卡）和驭火LAB、芝微手记那一行 */
.about-follow .follow-liyang .follow-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.follow-soon .about-sub-note { font-size: 13.5px; line-height: 1.9; }
.follow-soon .wait-btn { margin-left: 10px; vertical-align: 1px; }
@media (max-width: 1023px) { .about-hero.brief-hero .page-hero-inner { grid-template-columns: minmax(0, 1fr); } .about-self { max-width: 560px; } }
@media (max-width: 767px) { .about-follow .follow-liyang .follow-cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 479px) { .about-self-made { grid-template-columns: minmax(0, 1fr); } .about-self { padding: 18px 16px; } }