/* 《注定一战》2026-10-16 改版：题记＋“修昔底德陷阱”两线交叉小视觉＋两张读书笔记长图（宽屏并排、窄屏上下排）（对应 Artifact：Temp/261016-注定一战-Artifact/destined-for-war.html） */
.destined-for-war-notes {
  --dfw-serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;
  --dfw-bronze: #e0a650;
  --dfw-grid: rgba(136, 146, 176, .13);
  max-width: 44em;
  font-size: 16.5px;
  line-height: 2;
}
.destined-for-war-notes .art-h2 { margin-top: 2.4em; font-family: var(--dfw-serif); font-size: 22px; font-weight: 900; color: var(--white); }

/* 题记 + 两线交叉 */
.destined-for-war-notes .dfw-lead { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 32px; align-items: center; margin: 0 0 40px; }
.destined-for-war-notes .dfw-epigraph { margin: 0; padding: 0; }
.destined-for-war-notes .dfw-mark { display: block; width: 40px; height: 1px; margin: 0 0 22px; background: var(--dfw-bronze); }
.destined-for-war-notes .dfw-epigraph-text { margin: 0; font-family: var(--dfw-serif); font-weight: 600; font-size: 19px; line-height: 2; color: var(--white); }
.destined-for-war-notes .dfw-sign { margin-top: 14px; font-size: 14px; letter-spacing: .2em; color: var(--slate); }

/* 守成大国缓缓下行，崛起大国陡然上升，交叉处是“陷阱”（原 280×180，按 6/7 缩成 240×154） */
.destined-for-war-notes .dfw-cross { width: 240px; height: 154px; overflow: hidden; border: 1px solid var(--lightest-navy); border-radius: 4px; background: var(--light-navy); }
.destined-for-war-notes .dfw-cross-in {
  position: relative; width: 280px; height: 180px; transform: scale(.857); transform-origin: 0 0;
  background-image: linear-gradient(var(--dfw-grid) 1px, transparent 1px); background-size: 100% 30px; background-position: 0 -1px;
}
.destined-for-war-notes .dfw-ln { position: absolute; left: 24px; height: 2px; transform-origin: 0 50%; border-radius: 1px; }
.destined-for-war-notes .dfw-hold { top: 57px; width: 234.5px; transform: rotate(8.34deg); background: var(--slate); }
.destined-for-war-notes .dfw-rise { top: 149px; width: 259.4px; transform: rotate(-26.57deg); background: var(--green); }
.destined-for-war-notes .dfw-tag { position: absolute; left: 24px; font-size: 12px; letter-spacing: .16em; line-height: 1; }
.destined-for-war-notes .dfw-tag-hold { top: 38px; color: var(--slate); }
.destined-for-war-notes .dfw-tag-hold::before { content: "守成"; }
.destined-for-war-notes .dfw-tag-rise { top: 158px; color: var(--green); }
.destined-for-war-notes .dfw-tag-rise::before { content: "崛起"; }
.destined-for-war-notes .dfw-trap { position: absolute; left: 153px; top: 66px; width: 26px; height: 26px; border: 1px dashed var(--dfw-bronze); border-radius: 50%; animation: dfw-pulse 4.5s ease-in-out infinite; }
.destined-for-war-notes .dfw-trap::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--dfw-bronze); }
.destined-for-war-notes .dfw-drop { position: absolute; left: 166px; top: 92px; bottom: 26px; border-left: 1px dashed var(--dfw-bronze); opacity: .55; }
.destined-for-war-notes .dfw-note { position: absolute; right: 14px; bottom: 9px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; line-height: 1; color: var(--dfw-bronze); }
.destined-for-war-notes .dfw-note::before { content: "DESTINED FOR WAR"; }
@keyframes dfw-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .destined-for-war-notes .dfw-trap { animation: none; } }

/* 两张长图：宽屏并排，序号用青铜色 */
.destined-for-war-notes .dfw-hint { margin: 0 0 16px; text-align: center; font-size: 13.5px; color: var(--slate); }
.destined-for-war-notes .dfw-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.destined-for-war-notes .dfw-fig { display: flex; flex-direction: column; margin: 0; min-width: 0; }
.destined-for-war-notes .dfw-caption { order: -1; display: flex; align-items: baseline; gap: 12px; margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: var(--slate); }
.destined-for-war-notes .dfw-no { font-family: var(--dfw-serif); font-weight: 900; font-size: 28px; line-height: 1; color: var(--dfw-bronze); }
.destined-for-war-notes .dfw-no-1::before { content: "一"; }
.destined-for-war-notes .dfw-no-2::before { content: "二"; }
.destined-for-war-notes .dfw-fig img {
  display: block; width: 100%; height: auto; border: 1px solid var(--lightest-navy); border-radius: 6px;
  background: #000; transition: border-color .15s;
}
.destined-for-war-notes .dfw-fig img:hover { border-color: var(--dfw-bronze); }

@media (max-width: 1080px) {
  .destined-for-war-notes .dfw-pair { grid-template-columns: minmax(0, 1fr); gap: 36px; max-width: 440px; margin: 0 auto; }
}
@media (max-width: 900px) {
  .destined-for-war-notes .dfw-lead { grid-template-columns: minmax(0, 1fr); }
  .destined-for-war-notes .dfw-cross { display: none; }
}
@media (max-width: 600px) {
  .destined-for-war-notes { font-size: 16px; line-height: 1.95; }
  .destined-for-war-notes .art-h2 { font-size: 20px; }
  .destined-for-war-notes .dfw-lead { margin-bottom: 30px; }
  .destined-for-war-notes .dfw-epigraph-text { font-size: 17.5px; }
}