/* 第一讲内容重构：沿用 base.css / kit.css 的字体、色彩与组件，仅增加讲述和关系图布局。 */
.fi { display: flex; flex-direction: column; justify-content: center; gap: clamp(24px, 4vh, 44px); max-width: 1280px; width: 100%; margin: auto; }
.fi .head { max-width: 1040px; }
.fi .lede { max-width: 48em; }
.fi-body { display: grid; gap: 24px; }
.fi-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); }
.fi-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 44px); }
.fi-prose { font-size: var(--t-lede); line-height: 1.85; max-width: 46em; }
.fi-prose p + p { margin-top: 18px; }
.fi-prose .note { margin-top: 20px; }
.fi-rule { border-top: 1px solid var(--line); padding-top: 18px; }
.t-ink .fi-rule { border-color: var(--line-ink); }
.fi-terms { display: grid; gap: 20px; }
.fi-terms > div, .fi-terms > article { border-top: 1px solid var(--line); padding-top: 16px; }
.t-ink .fi-terms > div, .t-ink .fi-terms > article { border-color: var(--line-ink); }
.fi-terms h2 { font-size: var(--t-sub); line-height: 1.45; margin-bottom: 8px; }
.fi-terms h2 small { display: inline; font-family: var(--mono); font-size: .66em; font-weight: 400; opacity: .65; margin-left: 7px; }
.fi-terms p { font-size: 1.02rem; line-height: 1.8; }
.fi-terms .note { font-size: .88rem; margin-top: 7px; }
.fi-callout { font-size: var(--t-sub); line-height: 1.65; padding-left: 18px; border-left: 3px solid var(--mark); }
.fi-callout p + p { margin-top: 12px; }
.fi-callout .note { margin-top: 12px; }
.fi-attribution { font-family: var(--mono); font-size: .78rem; color: var(--muted); letter-spacing: .02em; margin-bottom: 10px; }
.t-ink .fi-attribution { color: var(--on-ink-muted); }
.fi-quote { font-size: clamp(1.65rem, 2.1vw + .5rem, 2.8rem); font-family: var(--display); line-height: 1.5; letter-spacing: -.02em; max-width: 22em; }
.fi-foot { margin-top: 4px; }
.fi-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 22px; }
.fi-flow > li { border-top: 2px solid currentColor; padding-top: 14px; }
.fi-flow h2 { font-size: var(--t-sub); margin-bottom: 8px; }
.fi-flow p { font-size: 1rem; line-height: 1.75; }
.fi-flow .fi-arrow { display: block; font-size: .86rem; color: var(--muted); margin-top: 12px; }
.t-ink .fi-flow .fi-arrow { color: var(--on-ink-muted); }
.fi-system { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 24px; align-items: start; }
.fi-inputs { display: grid; gap: 12px; }
.fi-inputs > li { padding-bottom: 12px; border-bottom: 1px solid var(--line-ink); }
.fi-inputs b, .fi-inputs span { display: block; }
.fi-inputs span { font-size: .92rem; color: var(--on-ink-2); }
.fi-loop { border: 1px solid var(--line-ink-2); padding: 18px 22px; display: grid; grid-template-columns: 1fr; gap: 12px; }
.fi-loop > div { display: grid; grid-template-columns: minmax(120px, .8fr) minmax(0, 1.5fr); gap: 16px; }
.fi-loop > div + div { border-top: 1px solid var(--line-ink); padding-top: 12px; }
.fi-loop b { color: var(--mark); font-size: 1.1rem; }
.fi-loop span { font-size: .96rem; color: var(--on-ink-2); }
.fi-loop-caption { grid-column: 1 / -1; font-size: .88rem; color: var(--on-ink-muted); }
.fi-loop-light { border-color: var(--line-2); }
.fi-loop-light > div + div { border-color: var(--line); }
.fi-loop-light b { color: var(--text); }
.fi-loop-light span, .fi-loop-light .fi-loop-caption { color: var(--text-2); }
.fi-map { display: grid; gap: 0; }
.fi-map > li { display: grid; grid-template-columns: minmax(120px, .75fr) minmax(0, 1.3fr) minmax(0, 1.6fr); gap: 22px; padding: 14px 0; border-top: 1px solid var(--line); }
.fi-map b { font-size: 1.08rem; }
.fi-map p { font-size: 1rem; line-height: 1.75; }
.fi-map .note { font-size: .88rem; }
.fi-events { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.fi-events li { border-top: 2px solid var(--line-2); padding-top: 14px; }
.fi-events time { display: block; font: .82rem/1.5 var(--mono); color: var(--muted); margin-bottom: 12px; }
.fi-events h2 { font-size: var(--t-sub); line-height: 1.45; margin-bottom: 10px; }
.fi-events p { font-size: 1rem; line-height: 1.8; }
.fi-events .note { margin-top: 8px; font-size: .88rem; }
.fi-discussion { border-top: 1px solid var(--line); padding-top: 12px; font-size: .86rem; color: var(--muted); line-height: 1.7; }
.fi-discussion b { font-weight: 600; color: var(--text-2); }
.fi-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.fi-roles li { border-top: 1px solid var(--line); padding-top: 16px; }
.fi-roles h2 { font-size: var(--t-sub); margin-bottom: 8px; }
.fi-roles p { line-height: 1.8; font-size: 1rem; }
.fi-roles .note { font-size: .88rem; margin-top: 8px; }
@media (max-width: 960px) {
  .fi-events { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fi-map > li { grid-template-columns: minmax(100px, .6fr) minmax(0, 1.4fr); }
  .fi-map .note { grid-column: 2; }
}
@media (max-width: 760px) {
  .fi { gap: 26px; }
  .fi-two, .fi-three, .fi-flow, .fi-system, .fi-roles { grid-template-columns: 1fr; }
  .fi-loop > div { grid-template-columns: 1fr; gap: 4px; }
  .fi-events { grid-template-columns: 1fr; gap: 20px; }
  .fi-map > li { grid-template-columns: 1fr; gap: 6px; }
  .fi-map .note { grid-column: auto; }
}