/* 《教育未来简史》读书笔记 · 2026-10-16 改版 · 对应 Artifact：Temp/261016-教育未来简史-Artifact/education-future.html
   导语右侧一组按 1、2、4、8、16 翻倍堆高的像素方块（指数级变化，取自书封像素字）；提要做成一块卡片；
   长图限宽 520px，右侧图注随滚动停住，点图用共用脚本 reading-viewer.js 看大图。 */
.education-future-notes {
  --ef-serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;
  --ef-pixel: rgba(204, 214, 246, .28);
  max-width: 44em;
  font-size: 16.5px;
  line-height: 2;
}
.education-future-notes p { margin-bottom: 1.2em; }

/* 导语 + 像素翻倍方块 */
.education-future-notes .ef-lead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; padding-bottom: 8px; }
.education-future-notes .ef-lead .art-h2 { margin-top: 0; font-family: var(--ef-serif); font-size: 22px; font-weight: 900; color: var(--white); }
.education-future-notes .ef-intro { font-size: 18px; line-height: 1.95; color: var(--lightest-slate); }
.education-future-notes .ef-doubling {
  display: flex; align-items: flex-end; gap: 8px; height: 168px; margin-bottom: 1.2em;
  padding-bottom: 10px; border-bottom: 1px solid var(--lightest-navy);
}
.education-future-notes .ef-doubling i {
  --c: var(--ef-pixel);
  display: block; width: 28px; height: calc(var(--n) * 10px - 2px);
  background:
    linear-gradient(to bottom, transparent 8px, var(--navy) 8px) 0 0 / 10px 10px,
    linear-gradient(to right, transparent 8px, var(--navy) 8px) 0 0 / 10px 10px,
    var(--c);
  transform-origin: bottom; animation: ef-rise .9s cubic-bezier(.2, .7, .2, 1) both;
}
.education-future-notes .ef-doubling i:nth-child(1) { --n: 1; }
.education-future-notes .ef-doubling i:nth-child(2) { --n: 2; animation-delay: .12s; }
.education-future-notes .ef-doubling i:nth-child(3) { --n: 4; animation-delay: .24s; }
.education-future-notes .ef-doubling i:nth-child(4) { --n: 8; animation-delay: .36s; }
.education-future-notes .ef-doubling i:nth-child(5) { --n: 16; animation-delay: .48s; --c: var(--green); }
@keyframes ef-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .education-future-notes .ef-doubling i { animation: none; } }

/* 笔记内容提要卡片 */
.education-future-notes .ef-summary { margin: 28px 0 48px; padding: 28px; border: 1px solid var(--lightest-navy); border-radius: 12px; background: var(--light-navy); }
.education-future-notes .ef-summary-title { margin: 0 0 14px; font-size: 13px; font-weight: 500; letter-spacing: .18em; color: var(--green); }
.education-future-notes .ef-thesis { margin: 0; font-family: var(--ef-serif); font-size: 19px; font-weight: 600; line-height: 1.9; color: var(--white); }
.education-future-notes .ef-sub {
  margin: 28px 0 12px; padding-top: 22px; border-top: 1px solid var(--lightest-navy);
  font-size: 16.5px; font-weight: 700; line-height: 1.5; letter-spacing: .04em; color: var(--green);
}
.education-future-notes .ef-traits { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.education-future-notes .ef-trait { padding: 2px 16px 4px; border-left: 1px solid var(--lightest-navy); font-size: 15px; line-height: 1.75; }
.education-future-notes .ef-trait:first-child { padding-left: 0; border-left: 0; }
.education-future-notes .ef-trait-name { display: block; margin-bottom: 4px; font-size: 16.5px; color: var(--white); }
.education-future-notes .ef-abilities { margin: 0; line-height: 2.3; }
.education-future-notes .ef-ab { font-weight: 500; color: var(--white); white-space: nowrap; }
.education-future-notes .ef-ab::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 7px 0 2px;
  vertical-align: .18em; background: var(--green);
}
.education-future-notes .ef-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.education-future-notes .ef-role { margin: 0; padding: 14px 18px; border: 1px solid var(--lightest-navy); border-radius: 8px; background: var(--navy); line-height: 1.85; }

/* 长图：限宽 520px，右侧图注停住 */
.education-future-notes .ef-poster { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 24px; align-items: start; margin: 0; }
.education-future-notes .ef-poster-img {
  width: 100%; height: auto; padding: 10px; border: 1px solid var(--lightest-navy); border-radius: 6px;
  background: var(--light-navy); transition: border-color .15s;
}
.education-future-notes .ef-poster-img:hover { border-color: var(--green); }
.education-future-notes .ef-poster-cap {
  position: sticky; top: 32px; padding-top: 4px;
  font-family: var(--ef-serif); font-size: 16.5px; font-weight: 600; line-height: 1.6; color: var(--white);
}
.education-future-notes .ef-hint { display: block; margin-top: 12px; font-family: inherit; font-size: 13px; font-weight: 400; line-height: 1.7; color: var(--slate); }

@media (max-width: 900px) {
  .education-future-notes .ef-lead { grid-template-columns: minmax(0, 1fr); }
  .education-future-notes .ef-doubling { display: none; }
  .education-future-notes .ef-traits { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .education-future-notes .ef-trait:nth-child(3) { padding-left: 0; border-left: 0; }
  .education-future-notes .ef-poster { grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 520px; }
  .education-future-notes .ef-poster-cap { position: static; grid-row: 1; padding-top: 0; }
}
@media (max-width: 600px) {
  .education-future-notes { font-size: 16px; line-height: 1.95; }
  .education-future-notes .ef-intro { font-size: 17px; }
  .education-future-notes .ef-lead .art-h2 { font-size: 20px; }
  .education-future-notes .ef-summary { padding: 20px 18px; }
  .education-future-notes .ef-thesis { font-size: 18px; }
  .education-future-notes .ef-roles { grid-template-columns: minmax(0, 1fr); }
  .education-future-notes .ef-poster-img { padding: 6px; }
}