/* ===== 关于我们 · 版面（2026-10-01 精修）=====
   只被 tcmlife/about/index.html 引用；改这里不会影响首页 / 课程页 / 测评页。
   内容一个字没动，重做的只有版面。 */

/* ── 关键数字带 ── */
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid rgba(122, 139, 79, .18);
  border-radius: 16px;
  background: rgba(255, 255, 255, .58);
  overflow: hidden;
  margin: 0 0 56px;
}
.facts li { padding: 20px 16px 18px; text-align: center; border-left: 1px solid rgba(122, 139, 79, .18); }
.facts li:first-child { border-left: 0; }
.facts b {
  display: block;
  font-family: var(--font-serif);
  font-size: 30px; line-height: 1.1; font-weight: 700;
  color: var(--green-950);
  font-variant-numeric: tabular-nums;
}
.facts b i { font-style: normal; font-size: 18px; color: var(--gold-600); margin-left: 1px; }
.facts span { display: block; margin-top: 7px; font-size: 12.5px; letter-spacing: .12em; color: var(--ink-2); }

/* ── 时间轴 ── */
.section-tl .section-head { margin-bottom: 38px; }
.tl-list { list-style: none; }

.tl-item { display: grid; grid-template-columns: 104px minmax(0, 1fr); }
.tl-side { padding: 32px 28px 0 0; text-align: right; }
.tl-year {
  display: block;
  font-family: var(--font-serif);
  font-size: 17px; line-height: 1.5; letter-spacing: .05em;
  color: var(--gold-600);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tl-main {
  position: relative;
  border-left: 1px solid rgba(122, 139, 79, .18);
  padding: 30px 0 46px 40px;
}
.tl-item:last-child .tl-main { padding-bottom: 0; }
.tl-main::before {
  content: "";
  position: absolute; left: -3.5px; top: 40px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-600);
  box-shadow: 0 0 0 5px var(--cream);
}

.tl-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 9px; }
.tl-idx { flex: none; font-size: 11.5px; letter-spacing: .14em; color: var(--gold-600); font-variant-numeric: tabular-nums; }
.tl-head h3 {
  font-family: var(--font-serif);
  font-size: 19px; line-height: 1.45; letter-spacing: .01em;
  color: var(--green-950); font-weight: 700;
}
.tl-main > p { max-width: 660px; font-size: 15px; line-height: 1.9; color: var(--ink-2); }
.tl-main > p strong { font-weight: 600; color: var(--green-700); }

/* 图带：一律放在正文下方，整条排开，不会再和正文比高度 */
.tl-photos { display: grid; gap: 10px; margin-top: 22px; }
.tl-photos--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tl-photos--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tl-photos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tl-photos--2, .tl-photos--1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tl-photo { margin: 0; border-radius: 10px; overflow: hidden; background: var(--green-100); }
.tl-photo img {
  width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(28, 38, 25, .12);
}
/* 单机截图：竖版，两张一排（一台手机一张图） */
.tl-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.tl-shots .tl-photo {
  background: #FFFDF9;
  border: 1px solid rgba(28, 38, 25, .12);
  box-shadow: 0 10px 26px rgba(28, 38, 25, .10);
}
.tl-shots .tl-photo img {
  aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 10px;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, rgba(0, 0, 0, .45) 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 76%, rgba(0, 0, 0, .45) 92%, transparent 100%);
}

/* ── 软件著作权：卡片网格 ── */
.ip-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.ip-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 9px;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid rgba(122, 139, 79, .14);
  border-radius: 10px;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.ip-item:hover { border-color: rgba(201, 147, 52, .5); box-shadow: var(--shadow); transform: translateY(-2px); }
.ip-item .ip-idx { font-size: 10.5px; letter-spacing: .1em; color: var(--gold-600); font-variant-numeric: tabular-nums; }
.ip-item .ip-name { font-size: 13px; line-height: 1.45; color: var(--green-950); }
.ip-item .ip-no { font-size: 10.5px; color: var(--ink-2); letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ip-note { margin-top: 20px; font-size: 13px; line-height: 1.8; color: var(--ink-2); }
/* ── 软件著作权：按方向归类（2026-10-02 Molly 提）── */
.ip-grouped {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 30px;
  margin-top: 22px;
  padding: 20px 22px 18px;
  background: #fff;
  border: 1px solid rgba(122, 139, 79, .14);
  border-radius: 14px;
}
.ip-g-head {
  display: flex; align-items: baseline; gap: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(122, 139, 79, .16);
  font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--green-950);
}
.ip-g-head span { font-size: 10.5px; font-weight: 400; letter-spacing: .08em; color: var(--gold-600); }
.ip-g-list { list-style: none; margin: 9px 0 0; padding: 0; display: grid; gap: 6px; }
.ip-g-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 10px; }
.ip-g-list .ip-name { font-size: 12.5px; line-height: 1.45; color: var(--green-950); }
.ip-g-list .ip-no { font-size: 10.5px; color: var(--ink-2); letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 软著清单现在是挂「把判断做成系统」那一段下面（原来是一个独立区块，2026-10-01 合过来） */
.tl-main .ip-list { margin-top: 22px; }

/* ── 品牌标识（第 5 阶段：胃兜兜 / 园膳纪）2026-10-01 加 ── */
.brand-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 24px;
  background: #fff;
  border: 1px solid rgba(122, 139, 79, .16);
  border-radius: 16px;
  overflow: hidden;
}
.brand-cell {
  margin: 0;
  padding: 28px 16px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.brand-cell + .brand-cell { border-left: 1px solid rgba(122, 139, 79, .16); }
.brand-cell img { height: 140px; width: auto; max-width: 100%; }
.brand-cell figcaption { font-size: 12.5px; letter-spacing: .1em; color: var(--ink-2); }

/* ── 窄屏 ── */
@media (max-width: 1080px) {
  .tl-item { grid-template-columns: 88px minmax(0, 1fr); }
  .tl-side { padding-right: 22px; }
  .tl-year { font-size: 16px; }
  .tl-main { padding-left: 32px; }
}

@media (max-width: 760px) {
  .section-tl .section-head { margin-bottom: 30px; }

  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 40px; }
  .facts li:nth-child(odd) { border-left: 0; }
  .facts li:nth-child(n+3) { border-top: 1px solid rgba(122, 139, 79, .18); }
  .facts b { font-size: 25px; }

  /* 轴线保留：年份也落在轴线上，整条不断 */
  .tl-item { grid-template-columns: 1fr; }
  .tl-side { padding: 0 0 8px 30px; border-left: 1px solid rgba(122, 139, 79, .18); text-align: left; }
  .tl-side::before {
    content: "";
    position: absolute; left: -3.5px; top: 9px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--gold-600);
    box-shadow: 0 0 0 5px var(--cream);
  }
  .tl-side { position: relative; }
  .tl-year { font-size: 15px; letter-spacing: .08em; }
  .tl-main { padding: 0 0 34px 30px; }
  .tl-main::before { display: none; }
  .tl-head { flex-direction: column; gap: 4px; margin-bottom: 8px; }
  .tl-head h3 { font-size: 17.5px; }
  .tl-main > p { font-size: 14.5px; }
  .tl-photos--6, .tl-photos--5, .tl-photos--3, .tl-photos--2, .tl-photos--1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl-photos { gap: 8px; margin-top: 18px; }
  .tl-shots { gap: 8px; margin-top: 18px; max-width: none; }

  .ip-list { grid-template-columns: 1fr; gap: 10px; }
  .ip-grouped { grid-template-columns: 1fr; gap: 16px; padding: 16px 14px 14px; }
  .ip-item { grid-template-columns: auto minmax(0, 1fr); row-gap: 2px; }
  .ip-item .ip-no { grid-column: 2; }

  .brand-strip { grid-template-columns: 1fr; }
  .brand-cell + .brand-cell { border-left: 0; border-top: 1px solid rgba(122, 139, 79, .16); }
}