.map-story {
  --map-ink: #211c18;
  --map-paper: #f1e6d5;
  --map-signal: #f0b96a;
  --map-red: #924538;
  --map-green: #2f6f50;
  overflow: clip;
  background: var(--map-ink);
  color: var(--map-paper);
  line-height: 1.4;
}
.map-story [hidden] { display: none !important; }
.map-story button, .map-story input { font: inherit; }
.map-story button { cursor: pointer; }
.map-story button:disabled { cursor: default; opacity: .4; }
.map-story-hero { display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); min-height: min(900px,calc(100svh - 60px)); }
.map-story .narrative { display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; min-width: 0; padding: clamp(2.3rem,4.4vw,5rem) clamp(1.3rem,4vw,4.8rem) clamp(2.2rem,3vw,3.4rem); background: radial-gradient(ellipse 110% 60% at 0 16%,#693d2d 0,transparent 78%); }
.map-story .kicker, .map-story .small-label, .map-story .atlas-head, .map-story .atlas-foot, .map-story .chapter-rule, .map-story .departure-label, .map-story .timeline-note, .map-story .gaza-focus-head { font-size: .7rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.map-story .kicker { color: var(--map-signal); margin-bottom: clamp(1.2rem,2.1vw,2rem); }
.map-story h1 { font: 800 clamp(4rem,5.7vw,7.2rem)/.78 var(--display); text-transform: uppercase; letter-spacing: -.023em; color: var(--map-paper); }
.map-story h1 em { display: inline-block; margin: .14em 0 .12em .025em; font: italic 400 .59em/.92 var(--serif); text-transform: none; letter-spacing: -.06em; color: #f2d5b2; }
.map-story h1 .closing { display: inline-block; color: var(--map-paper); font-size: .86em; white-space: nowrap; }
.map-story h1 .stop { color: var(--map-signal); }
.map-story .premise { max-width: 35rem; margin-top: 1.9rem; font: 400 clamp(1rem,1.2vw,1.16rem)/1.48 var(--serif); color: #e0d3c6; }
.map-story .chapter { max-width: 35rem; }
.map-story .chapter-rule { display: flex; justify-content: space-between; gap: 1rem; padding-top: .7rem; border-top: 1px solid #f1e6d585; color: #cdbdaa; }
.map-story .chapter-rule span:first-child { color: var(--map-signal); }
.map-story .chapter-year { margin-top: 1rem; color: var(--map-signal); font: 800 clamp(3.5rem,5.2vw,6.5rem)/.86 var(--display); letter-spacing: -.025em; }
.map-story .chapter h2 { margin-top: .55rem; font: 400 clamp(1.55rem,2.25vw,2.45rem)/1.08 var(--serif); letter-spacing: -.035em; text-transform: none; color: var(--map-paper); }
.map-story .chapter-body { max-width: 34rem; margin-top: .8rem; color: #e0d3c6; font-size: clamp(.96rem,1.05vw,1.08rem); line-height: 1.5; }
.map-story .chapter-evidence { display: flex; gap: .7rem; align-items: flex-start; margin-top: 1rem; max-width: 33rem; color: var(--map-paper); font-size: .9rem; font-weight: 700; line-height: 1.42; }
.map-story .evidence-mark { width: .5rem; height: .5rem; flex: 0 0 .5rem; margin-top: .27rem; background: var(--map-red); transform: rotate(45deg); }
.map-story .chapter-source { display: inline-block; margin-top: .72rem; color: var(--map-signal); font-size: .84rem; font-weight: 700; }
.map-story .chapter-source-secondary { margin-left: 1.1rem; }
.map-story .atlas { display: grid; grid-template-rows: 40px minmax(0,1fr) 40px; min-width: 0; min-height: 0; background: #ded3c0; color: var(--map-ink); border-left: 1px solid #403229; }
.map-story .atlas-head, .map-story .atlas-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding-inline: clamp(.8rem,2vw,2rem); overflow: hidden; white-space: nowrap; }
.map-story .atlas-head { border-bottom: 1px solid #8a77655e; }
.map-story .atlas-head span:last-child { color: #685644; overflow: hidden; text-overflow: ellipsis; }
.map-story .atlas-foot { border-top: 1px solid #8a77655e; }
.map-story .atlas-foot > span:last-child { color: #84735f; font-size: .61rem; }
.map-story #map-key { display: flex; gap: clamp(.55rem,1.4vw,1.25rem); min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: .67rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.map-story #map-key > span { display: inline-flex; gap: .35rem; align-items: center; min-width: 0; }
.map-story .key-swatch { display: inline-block; width: .72rem; height: .72rem; flex: 0 0 .72rem; border: 1px solid #0004; }
.map-story .key-swatch.israeli { background: var(--map-red); }
.map-story[data-chapter='0'] .key-swatch.israeli { background: transparent; border-style: dashed; }
.map-story .key-swatch.palestinian { background: var(--map-green); }
.map-story .map-board { position: relative; min-height: 540px; overflow: hidden; isolation: isolate; background: #e5d9c4; }
.map-story .map-board::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5; background: linear-gradient(110deg,#d1bea5 0,transparent 47%),radial-gradient(circle at 80% 48%,#f7ecda 0,transparent 52%); }
.map-story .map-board::after { content: ''; pointer-events: none; position: absolute; inset: 0; z-index: 5; box-shadow: inset 0 0 0 1px #4f5e4a22,inset 0 0 90px #5b624c30; }
.map-story .contour { position: absolute; width: 45%; height: 27%; border: 1px solid #606b5526; border-radius: 48% 52% 52% 48% / 55% 45% 55% 45%; transform: rotate(-30deg); }
.map-story .contour-a { top: 4%; left: -23%; box-shadow: 0 0 0 24px #606b5507,0 0 0 48px #606b5507,0 0 0 72px #606b5505; }
.map-story .contour-b { bottom: 5%; left: -30%; transform: rotate(21deg); box-shadow: 0 0 0 25px #606b5507,0 0 0 49px #606b5507; }
.map-story .map-well { position: absolute; z-index: 2; height: min(89%,690px); aspect-ratio: 229/430; right: clamp(6%,12%,15%); top: 48%; transform: translateY(-50%); background: #c4d0cf; box-shadow: 0 0 0 1px #4f382a80,12px 18px 0 #3520181c,0 20px 55px #3520184d; }
.map-story .map-well canvas { display: block; width: 100%; height: 100%; }
.map-story .map-caveat { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; min-height: 2.25rem; padding: .55rem 3%; border-top: 1px solid #8c756347; background: #e4d7c5f5; color: #4a3027; font-size: .72rem; font-weight: 700; line-height: 1.35; }
.map-story .departure-field { position: absolute; z-index: 3; left: 5%; top: 41%; width: min(37%,14rem); opacity: 1; transform: none; transition: opacity .55s ease,transform .55s ease; }
.map-story .is-transition .departure-field { opacity: 0; transform: translateX(18px); }
.map-story .departure-label { display: block; color: #783d2c; }
.map-story .departure-number { display: block; margin-top: .5rem; color: #963c2c; font: 800 clamp(3.3rem,6.2vw,6.9rem)/.8 var(--display); letter-spacing: -.04em; white-space: nowrap; }
.map-story .map-board[data-chapter='2'] .departure-number, .map-story .map-board[data-chapter='3'] .departure-number { font-size: clamp(2.5rem,4.3vw,4.9rem); }
.map-story .departure-caption { display: block; max-width: 12.5rem; margin-top: .65rem; color: #5e4134; font: italic 400 clamp(.9rem,1.3vw,1.14rem)/1.24 var(--serif); }
.map-story .gaza-focus { position: absolute; z-index: 3; left: 4.5%; top: 8%; width: 220px; border: 1px solid #513c30; background: #eee2d0; box-shadow: 5px 6px 0 #3c2b1f20; opacity: 0; transform: translateY(12px); transition: opacity .45s ease,transform .45s ease; pointer-events: none; }
.map-story .has-gaza .gaza-focus { opacity: 1; transform: translateY(0); }
.map-story .gaza-focus-head { display: flex; justify-content: space-between; gap: .3rem; padding: .45rem .55rem; border-bottom: 1px solid #7c665260; color: #573e32; font-size: .58rem; white-space: nowrap; }
.map-story .gaza-focus-body { display: grid; grid-template-columns: 99px 1fr; align-items: center; gap: .3rem; min-height: 154px; padding: .35rem .45rem .45rem; }
.map-story .gaza-focus canvas { display: block; width: 99px; height: 122px; }
.map-story .gaza-focus-copy { display: flex; flex-direction: column; gap: .38rem; min-width: 0; }
.map-story .gaza-focus-copy span:first-child { color: #89513e; font: 800 .74rem/1 var(--display); }
.map-story .gaza-focus-copy strong { color: #3b2c23; font: 800 1.15rem/.98 var(--display); overflow-wrap: anywhere; }
.map-story .gaza-focus-copy span:last-child { color: #694d3d; font: italic .78rem/1.15 var(--serif); }
.map-story .timeline { background: var(--map-paper); color: var(--map-ink); padding: 1.8rem clamp(1.2rem,3vw,3.3rem) 1.55rem; border-top: 3px solid var(--map-signal); }
.map-story .timeline-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.map-story .small-label { color: #9a4d35; }
.map-story .timeline h2 { margin-top: .25rem; font: 800 clamp(2rem,3.1vw,3.4rem)/.9 var(--display); text-transform: uppercase; }
.map-story .playback { display: flex; gap: 2px; }
.map-story .playback button { min-height: 43px; min-width: 45px; border: 1px solid var(--map-ink); background: transparent; color: var(--map-ink); font-weight: 800; }
.map-story .playback button:not(:disabled):hover { background: var(--map-ink); color: var(--map-paper); }
.map-story #play { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-width: 99px; padding-inline: .65rem; }
.map-story #play-icon { font-size: 1.1rem; line-height: 1; }
.map-story .rail { position: relative; margin-top: 1.6rem; }
.map-story #year-slider { --progress: 0%; display: block; width: 100%; height: 30px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
.map-story #year-slider::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg,var(--map-red) var(--progress),#9d9080 var(--progress)); }
.map-story #year-slider::-moz-range-track { height: 3px; background: #9d9080; }
.map-story #year-slider::-moz-range-progress { height: 3px; background: var(--map-red); }
.map-story #year-slider::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; margin-top: -6.5px; border: 3px solid var(--map-paper); border-radius: 0; background: var(--map-red); box-shadow: 0 0 0 1px var(--map-red); transform: rotate(45deg); }
.map-story #year-slider::-moz-range-thumb { width: 13px; height: 13px; border: 3px solid var(--map-paper); border-radius: 0; background: var(--map-red); box-shadow: 0 0 0 1px var(--map-red); transform: rotate(45deg); }
.map-story .ticks { display: flex; justify-content: space-between; margin-top: .15rem; color: #526155; font: 800 clamp(.75rem,1.15vw,1.18rem)/1 var(--display); }
.map-story .ticks .is-current { color: var(--map-red); }
.map-story .timeline-note { margin-top: 1.25rem; color: #586154; font-size: .67rem; letter-spacing: .02em; line-height: 1.5; text-transform: none; }
.map-story kbd { display: inline-block; min-width: 1.2rem; border: 1px solid #9ca497; font: inherit; text-align: center; }
.map-story .timeline-links { display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; margin-top: 1.1rem; font-size: .83rem; font-weight: 750; }
.map-story .timeline-links a { color: #863a2b; }
.map-story-method { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem 3rem; padding: 1.3rem clamp(1.2rem,3vw,3.3rem); background: #e6d9c5; color: #34271f; border-top: 1px solid #8c756347; font: .91rem/1.5 var(--serif); }
.map-story-method strong { font-family: system-ui,sans-serif; font-size: .82rem; }
.map-story-method a { font-family: system-ui,sans-serif; font-size: .82rem; font-weight: 750; }
.today-documentary { margin-top: 1.7rem; max-width: 55rem; }
.today-documentary img { display: block; width: 100%; height: auto; max-height: 30rem; object-fit: cover; }
.today-documentary figcaption { margin-top: .3rem; color: #f2dbcd; font-size: .72rem; }
@media (max-width: 1000px) {
  .map-story-hero { display: flex; flex-direction: column; background: var(--map-ink); }
  .map-story .narrative { display: contents; }
  .map-story .narrative-top { order: 0; padding: 2.5rem 1.5rem 2.2rem; background: radial-gradient(ellipse 110% 100% at 0 16%,#693d2d 0,transparent 78%); }
  .map-story .chapter { order: 2; max-width: none; padding: 2.2rem 1.5rem 2.7rem; }
  .map-story .atlas { min-height: 650px; border-left: 0; border-top: 1px solid #403229; }
  .map-story .atlas { order: 1; }
  .map-story .map-board { min-height: 570px; }
  .map-story .map-well { right: 16%; }
}
@media (max-width: 600px) {
  .map-story .narrative-top { padding: 2.25rem 1.15rem 2.3rem; }
  .map-story h1 { font-size: clamp(3.8rem,14.2vw,6.5rem); }
  .map-story .premise { margin-top: 1.6rem; }
  .map-story .chapter { margin: 0; padding: 2rem 1.15rem 2.5rem; }
  .map-story .chapter h2 { font-size: 1.8rem; }
  .map-story .chapter-year { font-size: 4.1rem; }
  .map-story .atlas { min-height: 0; grid-template-rows: 34px minmax(0,1fr) 50px; }
  .map-story .atlas-head, .map-story .atlas-foot { padding-inline: .7rem; font-size: .56rem; letter-spacing: .05em; }
  .map-story .atlas-foot > span:last-child { display: none; }
  .map-story #map-key { flex-direction: column; align-items: flex-start; justify-content: center; gap: .12rem; font-size: .65rem; line-height: 1.1; }
  .map-story #map-key > span { gap: .3rem; }
  .map-story .key-swatch { width: .55rem; height: .55rem; flex-basis: .55rem; }
  .map-story .map-board { min-height: 620px; }
  .map-story .map-well { right: 4%; height: 84%; top: 45%; }
  .map-story .gaza-focus { left: 2.5%; top: 6%; width: 146px; }
  .map-story .gaza-focus-head { padding: .35rem .3rem; font-size: .47rem; }
  .map-story .gaza-focus-body { grid-template-columns: 62px 1fr; gap: .15rem; min-height: 133px; padding: .2rem; }
  .map-story .gaza-focus canvas { width: 62px; height: 76px; }
  .map-story .gaza-focus-copy { gap: .22rem; }
  .map-story .gaza-focus-copy span:first-child { font-size: .6rem; }
  .map-story .gaza-focus-copy strong { font-size: .92rem; }
  .map-story .gaza-focus-copy span:last-child { font-size: .64rem; }
  .map-story .departure-field { top: 49%; left: 3.5%; width: 33%; }
  .map-story .departure-label { font-size: .55rem; }
  .map-story .departure-number { font-size: clamp(2.1rem,9.5vw,3.7rem); }
  .map-story .map-board[data-chapter='2'] .departure-number, .map-story .map-board[data-chapter='3'] .departure-number { font-size: 1.95rem; }
  .map-story .departure-caption { max-width: 7.4rem; font-size: .8rem; }
  .map-story .map-caveat { padding: .45rem 3.5%; font-size: .68rem; }
  .map-story .timeline { padding-inline: 1.15rem; }
  .map-story .timeline h2 { font-size: 1.8rem; }
  .map-story .ticks { font-size: clamp(.53rem,1.9vw,.74rem); }
  .map-story .timeline-note { margin-top: 1rem; }
  .map-story-method { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .map-story .map-well { right: 2%; }
  .map-story .ticks { font-size: .52rem; }
  .map-story #play { min-width: 80px; }
  .map-story #play-text { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .map-story *, .map-story *::before, .map-story *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}