/* China map (political <-> physical) and iconic-image loop for the lecture decks. */
.cm { width: 100%; display: flex; justify-content: center; }
.cm-frame { position: relative; height: 560px; max-width: 100%; aspect-ratio: 1585 / 1125; overflow: hidden; background: #0d1829; border: 1px solid #2c3a52; }
.cm-relief { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease; margin: 0 !important; border: 0 !important; max-height: none !important; max-width: none !important; }
.cm-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cm-units path { fill: #24364f; stroke: #8fa6c4; stroke-width: 1.6; stroke-linejoin: round; transition: fill 1s ease, stroke 1s ease, stroke-opacity 1s ease; }
.cm-units path.cm-out { fill: transparent; stroke-dasharray: 6 5; }
.cm-cities circle { fill: #ffcf5a; stroke: #0d1829; stroke-width: 2.5; transition: fill .8s ease; }
.cm[data-mode="physical"] .cm-relief { opacity: 1; }
.cm[data-mode="physical"] .cm-units path { fill: transparent; stroke: #ffffff; stroke-opacity: .28; stroke-width: 1.2; }
.cm[data-mode="physical"] .cm-cities circle { fill: #ffffff; stroke: #c0392b; }
.cm-toggle { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 0; border: 1px solid #5c6f8c; border-radius: 6px; overflow: hidden; background: rgba(13, 24, 41, .82); }
.cm-toggle button { font: 600 15px/1 system-ui, sans-serif; letter-spacing: .02em; color: #cfd9e8; background: transparent; border: 0; padding: 8px 14px; cursor: pointer; margin: 0; }
.cm-toggle button.on { background: #ffcf5a; color: #0d1829; }

.il { width: 100%; display: flex; justify-content: center; }
.il-frame { position: relative; width: 100%; max-width: 940px; aspect-ratio: 16 / 9; background: #0b0f17; border: 1px solid #2c3a52; overflow: hidden; }
.il-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; display: flex; align-items: flex-end; justify-content: flex-start; background-size: cover; background-position: center; }
.il-slide.on { opacity: 1; }
.il-slide.ph { align-items: center; justify-content: center; font: 600 34px/1.2 system-ui, sans-serif; color: #e9eef7; text-align: center; padding: 0 60px; }
.il-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 16px; font: 500 15px/1.3 system-ui, sans-serif; color: #f2f5fa; background: linear-gradient(transparent, rgba(0,0,0,.72)); text-align: left; }
.il-cap small { display: block; opacity: .7; font-weight: 400; font-size: 12px; }
.il-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 96px; height: 96px; border-radius: 50%; border: 3px solid #fff; background: rgba(0,0,0,.55); color: #fff; font-size: 40px; line-height: 1; cursor: pointer; z-index: 3; margin: 0; padding: 0 0 0 8px; transition: opacity .4s; }
.il.playing .il-play { opacity: 0; pointer-events: none; }
@media (hover: hover) { .il.playing .il-frame:hover .il-play { opacity: .85; pointer-events: auto; padding: 0; font-size: 34px; } }
.il-count { position: absolute; right: 12px; top: 10px; font: 500 13px system-ui, sans-serif; color: #fff; background: rgba(0,0,0,.5); padding: 3px 9px; border-radius: 12px; z-index: 3; }

.cm-line line { stroke: #ffcf5a; stroke-width: 5; stroke-dasharray: 18 10; }
.cm-line .cm-west { fill: rgba(255, 207, 90, .13); }
.cm-line circle { fill: #ffcf5a; stroke: #0d1829; stroke-width: 3; }
.cm-line text { fill: #ffe9ad; font: 600 30px system-ui, sans-serif; paint-order: stroke; stroke: #0d1829; stroke-width: 6px; }
.cm-line text.big { font-size: 46px; }
.cm[data-mode="physical"] .cm-line text { fill: #fff; stroke: #1a1a1a; }

/* two words slide */
.tw-wrap { display: flex; flex-direction: column; gap: 70px; align-items: center; text-align: center; }
.tw h1 { font-size: 2.6em; margin: 0; letter-spacing: .02em; text-transform: none; }
.tw .def { font-size: .62em; max-width: 780px; margin: 14px auto 0; line-height: 1.35; }
.tw .def small { display: block; opacity: .65; font-size: .7em; margin-top: 6px; }
.tw .use { color: #ffcf5a; font-size: .58em; margin-top: 10px; font-weight: 600; }

/* timeline */
.tl { position: relative; width: 900px; height: 520px; margin: 0 auto; font-size: 15px; text-align: left; }
.tl .axis { position: absolute; left: 0; right: 0; top: 50%; height: 22px; margin-top: -11px; display: flex; }
.tl .era { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; letter-spacing: .03em; color: #0d1829; white-space: nowrap; overflow: hidden; }
.tl .g { position: absolute; inset: 0; }
.tl .ev { position: absolute; width: 0; border-left: 2px solid rgba(255,255,255,.55); }
.tl .ev span { position: absolute; left: 6px; line-height: 1.12; font-size: 14.5px; width: 165px; }
.tl .ev.up { bottom: 50%; margin-bottom: 11px; }
.tl .ev.up span { top: -2px; }
.tl .ev.dn { top: 50%; margin-top: 11px; }
.tl .ev.dn span { bottom: -2px; }
.tl .ev.r span { left: auto; right: 6px; text-align: right; }
.tl .ev b { display: block; color: #ffcf5a; font-size: 13px; }
.tl .yr { position: absolute; top: 50%; margin-top: 15px; font-size: 11px; opacity: .7; transform: translateX(-50%); }
.tl .bracket { position: absolute; top: 50%; margin-top: 44px; height: 20px; border-top: 3px solid #ffcf5a; text-align: center; color: #ffcf5a; font-weight: 600; font-size: 14px; }
.tl .bar { position: absolute; top: 50%; margin-top: -34px; height: 14px; background: rgba(255,207,90,.8); border-radius: 3px; }

.rules { text-align: left; font-size: .85em; }
.rules li { margin: .45em 0; }
.rules small { opacity: .65; }
.flow { width: 100%; max-width: 820px; display: block; margin: 0 auto; }

.reveal section.dense ul { font-size: .68em; }
.reveal section.dense .flow-wrap { margin-bottom: .2em; }
.reveal section.dense blockquote { font-size: .78em; width: 92%; }

/* touch screens: the slide is scaled down on a phone, so make the play button large and tap-friendly */
.il-play, .il-frame { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (pointer: coarse) { .il-play { width: 170px; height: 170px; font-size: 70px; padding-left: 14px; } }

/* PDF export (?pdf=1): the image loop becomes a still mosaic, 5 columns x 4 rows */
.il.il-print { display: block; }
.il-mosaic { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; width: 940px; max-width: 100%; margin: 0 auto; }
.il-mosaic > div { aspect-ratio: 3 / 2; background-size: cover; background-position: center; background-color: #0b0f17; }
.il-mosaic-note { font-size: 13px; opacity: .6; margin-top: 6px; text-align: center; }