/* Case-specific composition; typography, color, spacing and navigation
   inherit the existing tokens, base and detail page system. */
.fan-case { padding-top: var(--space-8); }
.fan-chapters { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid rgba(238,240,248,.2); }
.fan-chapters a { text-decoration: none; color: var(--on-deep-2); }
.fan-chapters a:hover, .fan-chapters a:focus-visible { color: var(--on-deep); }
.fan-section { padding-block: var(--space-7) var(--space-8); scroll-margin-top: var(--space-8); }
.fan-section + .fan-section { border-top: 1px solid rgba(238,240,248,.2); }
.fan-section .detail-media-group-label { color: var(--hi-on-deep); }
.fan-title { line-height: 1.2; }
.fan-title span { display: inline-block; }
.fan-subtitle { margin-top: var(--space-3); color: var(--on-deep-2); }
.fan-intro { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-7); margin-block: var(--space-5) var(--space-6); align-items: end; }
.fan-copy { display: grid; gap: var(--space-3); color: var(--on-deep-2); max-width: 42em; }
.fan-copy .fan-lead { color: var(--on-deep); font-size: var(--fs-h2); line-height: 1.5; }
.fan-copy strong { color: var(--on-deep); }
.fan-meta { margin: 0; display: grid; gap: var(--space-4); }
.fan-meta dt { color: var(--on-deep-2); margin-bottom: var(--space-2); }
.fan-meta dd { margin: 0; }
.fan-media { margin: 0; min-width: 0; }
.fan-media img { display: block; width: 100%; height: auto; border-radius: var(--radius-image); }
.fan-media figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); color: var(--on-deep-2); font-size: .7rem; }
.fan-section-heading { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--space-7); align-items: start; margin-bottom: var(--space-6); }
.fan-section-heading h2 { line-height: 1.3; }
.fan-keywords { color: var(--on-deep-2); align-self: end; line-height: 2; }
.fan-visual-grid { display: grid; grid-template-columns: 2.4fr 1fr; gap: var(--space-6); align-items: center; }
.fan-annotation { font-size: .95rem; }
.fan-section.fan-workflow { border-top-color: var(--hi-on-deep); }
.fan-flow { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); border-block: 1px solid rgba(238,240,248,.25); }
.fan-flow li { position: relative; padding: var(--space-4) var(--space-3); display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); min-width: 0; }
.fan-flow li + li::before { content: '→'; position: absolute; left: -.4em; color: var(--on-deep-2); }
.fan-flow .text-meta { font-size: .65rem; color: var(--on-deep-2); }
.fan-flow strong { font-family: var(--font-mono); font-size: var(--fs-meta); }
.fan-flow-ai { background: rgba(110,139,255,.12); }
.fan-flow-ai strong { font-size: var(--fs-h2); color: var(--on-deep); }
.fan-highlight { display: grid; grid-template-columns: 1fr 3fr; gap: var(--space-5); margin-top: var(--space-6); padding-left: var(--space-4); border-left: 2px solid var(--hi-on-deep); }
.fan-highlight > .text-meta { color: var(--hi-on-deep); padding-top: var(--space-2); }
.fan-highlight .text-h2, .fan-ending .text-h2 { line-height: 1.45; }
.fan-highlight-zh { margin-top: var(--space-3); color: var(--on-deep-2); }
.fan-interaction { margin-bottom: var(--space-4); color: var(--on-deep); }
.fan-ending { padding-top: var(--space-6); max-width: 960px; }
.fan-ending > p + p { margin-top: var(--space-3); color: var(--on-deep-2); }
@media (max-width: 860px) {
  .fan-intro, .fan-section-heading, .fan-visual-grid, .fan-highlight { grid-template-columns: 1fr; gap: var(--space-4); }
  .fan-section { padding-block: var(--space-6); }
  .fan-section-heading { margin-bottom: var(--space-5); }
  .fan-flow { grid-template-columns: 1fr; }
  .fan-flow li { padding: var(--space-4); flex-direction: row; justify-content: space-between; align-items: center; gap: var(--space-3); }
  .fan-flow li + li::before { content: '↓'; left: var(--space-4); top: -.75em; }
}
@media (max-width: 480px) {
  .fan-case { padding-top: var(--space-8); }
  .fan-chapters { flex-direction: column; gap: var(--space-3); }
  .fan-title { font-size: var(--fs-display-l); }
  .fan-section-heading h2 { font-size: var(--fs-h2); }
  .fan-intro { margin-block: var(--space-5); }
  .fan-interaction { font-size: .65rem; letter-spacing: 0; }
}