/* NAWAPA map embed — Sare for President project page.
   Layout: terrain map left, reading panel right (stacks on phones). One accent (campaign gold).
   Single committed dark look; the panel uses the site navy, the map keeps the hillshade's own tones. */
.nwm{
  --navy:#12203e; --navy-2:#193266; --cream:#faf8e0; --cream-2:#d9d6c0; --cream-3:#a9a898;
  --gold:#fd9100; --gold-2:#ffb547; --teal:#458893; --teal-2:#7fd6d2; --loss:#e8642a; --loss-2:#ffb27a; --cool:#9db8d8;
  --hair:rgba(250,248,224,.16); --water:#161a24;
  --serif:"novantique-serif","Fraunces",Georgia,"Times New Roman",serif;
  --sans:"area-normal","IBM Plex Sans",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) 380px; grid-template-rows:640px;
  background:var(--navy); color:var(--cream); font-family:var(--sans); line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow:hidden; width:100%; max-width:100%;
}
.nwm *{box-sizing:border-box}
.nwm-map{position:relative; min-width:0; background:var(--water); overflow:hidden}
.nwm-map svg.nwm-svg{display:block; width:100%; height:100%}
.nwm-panel{position:relative; min-width:0; display:flex; flex-direction:column; padding:26px 28px 20px; border-left:1px solid var(--hair); background:var(--navy)}
.nwm-kicker{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-2); margin:0 0 10px; font-weight:600}
.nwm-kicker b{font-family:var(--mono); font-weight:500; color:var(--cream-3); margin-left:8px; letter-spacing:.06em}
.nwm-panel h3{font-family:var(--serif); font-weight:500; font-size:27px; line-height:1.1; margin:0 0 12px; letter-spacing:-.005em; text-wrap:balance; color:#fff}
.nwm-text{font-size:15px; line-height:1.5; margin:0 0 14px; color:var(--cream)}
.nwm-text k{color:var(--gold-2); font-weight:600; font-style:normal}
.nwm-fig{margin:0 0 12px; display:grid; grid-template-columns:104px minmax(0,1fr); gap:0 12px; align-items:start}
.nwm-fig .fr{background:#e9e6df; padding:2px; border:1px solid rgba(255,255,255,.4); box-shadow:0 6px 18px rgba(0,0,0,.45)}
.nwm-fig img{display:block; width:100%; height:auto; max-height:120px; object-fit:cover; object-position:top; background:#d8d4cb}
.nwm-fig figcaption{font-size:11.5px; line-height:1.35; color:var(--cream-2); font-variant:all-small-caps; letter-spacing:.07em}
.nwm-src{font-size:11px; line-height:1.45; color:var(--cream-3); margin:auto 0 0; padding-top:12px; border-top:1px solid var(--hair)}
.nwm-nav{display:flex; align-items:center; gap:8px; margin-top:14px}
.nwm-tabs{display:flex; gap:6px; flex:1 1 auto; min-width:0; margin:0; padding:0; list-style:none; overflow-x:auto; scrollbar-width:none}
.nwm-tabs::-webkit-scrollbar{display:none}
.nwm-tabs li{flex:0 0 auto}
.nwm-tab{appearance:none; border:1px solid var(--hair); background:transparent; color:var(--cream-2); font:600 11px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; padding:9px 11px; border-radius:2px; cursor:pointer; white-space:nowrap}
.nwm-tab[aria-selected="true"]{background:var(--gold); border-color:var(--gold); color:var(--navy)}
.nwm-tab:hover:not([aria-selected="true"]){border-color:var(--gold-2); color:#fff}
.nwm-tab:focus-visible,.nwm-arrow:focus-visible{outline:2px solid var(--gold-2); outline-offset:2px}
.nwm-arrow{appearance:none; flex:0 0 auto; width:34px; height:34px; border:1px solid var(--hair); background:transparent; color:#fff; border-radius:2px; cursor:pointer; font:500 18px/1 var(--serif); display:grid; place-items:center}
.nwm-arrow:hover{border-color:var(--gold-2)}
.nwm-arrow:disabled{opacity:.3; cursor:default}
.nwm-legend{position:absolute; left:14px; top:14px; z-index:5; background:rgba(18,32,62,.86); padding:8px 11px; font-size:11.5px; color:var(--cream-2); border-radius:2px; max-width:min(60%,420px); line-height:1.45; backdrop-filter:blur(2px)}
.nwm-legend span{display:inline-block; margin-right:10px}
.nwm-legend i{display:inline-block; width:18px; height:0; border-top:2px solid var(--gold); vertical-align:middle; margin-right:7px}
.nwm-legend i.dash{border-top-style:dashed}
.nwm-legend i.loss{border-top-color:var(--loss)}
.nwm-legend i.wash{height:10px; border:0; background:rgba(253,145,0,.18); outline:1px solid rgba(253,145,0,.55)}
.nwm-legend i.ramp{height:10px; border:0; background:linear-gradient(90deg,#ffe6c0,#ffab5a,#e57224,#cf5a18)}
.nwm-legend i.teal{height:10px; border:0; background:rgba(69,136,147,.8); outline:1px solid var(--teal-2)}
.nwm-legend i.gauge{height:11px; width:6px; border:1px solid var(--loss-2); background:linear-gradient(0deg,var(--loss) 45%,transparent 45%)}
.nwm-credit{position:absolute; right:12px; bottom:10px; z-index:5; font-size:10.5px; color:rgba(250,248,224,.55); letter-spacing:.02em; text-shadow:0 1px 6px rgba(0,0,0,.8)}
/* map text */
.nwm .lbl{font-family:var(--sans); font-size:11px; letter-spacing:.22em; fill:rgba(255,255,255,.5); text-transform:uppercase; paint-order:stroke; stroke:rgba(22,26,36,.7); stroke-width:3px}
.nwm .lbl.big{font-size:13px; letter-spacing:.3em}
.nwm .city{font-family:var(--sans); font-size:11px; fill:rgba(255,255,255,.88); paint-order:stroke; stroke:rgba(22,26,36,.85); stroke-width:3px}
.nwm .fl text{font-family:var(--sans); font-size:11.5px; font-weight:500; fill:var(--gold-2); paint-order:stroke; stroke:rgba(22,26,36,.9); stroke-width:3.5px; letter-spacing:.02em}
.nwm .fl line{stroke:var(--gold-2); stroke-width:1; opacity:.8}
.nwm .fl circle{fill:var(--gold); stroke:#161a24; stroke-width:1.2}
.nwm .fl.loss text{fill:var(--loss-2)} .nwm .fl.loss line{stroke:var(--loss-2)} .nwm .fl.loss circle{fill:var(--loss)}
.nwm .fl.cool text{fill:#cfe0f5} .nwm .fl.cool line{stroke:var(--cool)} .nwm .fl.cool circle{fill:var(--cool)}
.nwm .fl.dim text{fill:var(--cream-3)} .nwm .fl.dim line{stroke:var(--cream-3)} .nwm .fl.dim circle{fill:var(--cream-3)}
.nwm .fl .n{font-family:var(--mono); font-size:12.5px; font-weight:500}
.nwm .gauge text{font-family:var(--mono); font-size:11px; fill:var(--cream-2); paint-order:stroke; stroke:rgba(22,26,36,.9); stroke-width:3px}
.nwm .gauge .nm{font-family:var(--sans); font-weight:500; fill:#fff; font-size:12px}
.nwm .gauge .dr{fill:var(--loss-2)}
.nwm .flow{stroke:rgba(255,255,255,.55); stroke-width:1.2; fill:none; stroke-dasharray:2 14; stroke-linecap:round; pointer-events:none}
@keyframes nwmflow{to{stroke-dashoffset:-64}}
.nwm .flow.on{animation:nwmflow 2.4s linear infinite}
/* timeline strip (chapter 5) */
.nwm-tl{position:absolute; left:14px; right:14px; bottom:30px; z-index:5; background:rgba(18,32,62,.86); padding:8px 12px 4px; border-radius:2px; opacity:0; transition:opacity .5s; pointer-events:none; backdrop-filter:blur(2px)}
.nwm-tl.on{opacity:1}
.nwm-tl svg{width:100%; height:92px; overflow:visible; display:block}
.nwm-tl text{font-family:var(--sans); font-size:11px; fill:var(--cream-2)}
.nwm-tl text.y{font-family:var(--mono); fill:var(--cream-3)}
.nwm-tl .mv text{fill:var(--gold-2)} .nwm-tl .mv circle{fill:var(--gold)}
.nwm-tl .ov text{fill:var(--cream-2)} .nwm-tl .ov circle{fill:var(--cream-3)}
.nwm-tl .axis{stroke:var(--hair)}
/* hero render mode (screenshot only) */
.nwm.hero{grid-template-columns:1fr; grid-template-rows:998px}
.nwm.hero .nwm-panel,.nwm.hero .nwm-legend,.nwm.hero .nwm-credit,.nwm.hero .nwm-tl{display:none}
.nwm.hero .nwm-map::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(18,32,62,.92) 0%,rgba(18,32,62,.72) 28%,rgba(18,32,62,.18) 55%,rgba(18,32,62,0) 75%)}
.nwm.hero .fl text{font-size:19px; stroke-width:5px} .nwm.hero .fl circle{r:5} .nwm.hero .lbl{font-size:17px} .nwm.hero .lbl.big{font-size:22px}
.nwm.hero .g-glow path{stroke-width:18px} .nwm.hero .g-spine path{stroke-width:6px} .nwm.hero .g-branch path{stroke-width:4px}
.nwm.hero .nwm-map::after{background:linear-gradient(90deg,rgba(18,32,62,.94) 0%,rgba(18,32,62,.78) 24%,rgba(18,32,62,.25) 48%,rgba(18,32,62,0) 66%)}
/* phones and narrow columns */
@media (max-width:860px){
  .nwm{grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto}
  .nwm-map{aspect-ratio:4/3; max-width:100%}
  .nwm .gauge .gt{display:none}
  .nwm-panel{border-left:0; border-top:1px solid var(--hair); padding:18px 16px 16px}
  .nwm-panel h3{font-size:23px}
  .nwm-text{font-size:14.5px}
  .nwm-legend{font-size:10.5px; padding:6px 8px; max-width:70%}
  .nwm-tl svg{height:80px}
  .nwm .lbl.big{font-size:11px}
  .nwm .fl text{font-size:10.5px}
}
@media (max-width:600px){
  .nwm-map{aspect-ratio:1/1}
}
@media (prefers-reduced-motion:reduce){
  .nwm .flow.on{animation:none}
  .nwm-tl{transition:none}
}

/* ---- still mode: one composition filling the iframe, no chapters; the caption lives on the page ---- */
.nwm.still{grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); height:100vh; min-height:320px}
.nwm.still .nwm-map{aspect-ratio:auto; height:100%}
.nwm.still .nwm-panel,.nwm.still .nwm-legend,.nwm.still .nwm-tl,.nwm.still .g-pts{display:none}
.nwm.still .nwm-credit{display:block; left:10px; right:auto; bottom:8px; padding:3px 7px; background:rgba(18,32,62,.72); border-radius:2px; font-size:10px}
.nwm.still .fl text{font-size:15px; font-weight:600; letter-spacing:.01em; paint-order:stroke; stroke:rgba(18,32,62,.85); stroke-width:4px; stroke-linejoin:round; fill:#fff}
.nwm.still .fl circle{fill:#fd9100; stroke:#12203e; stroke-width:1.5}
.nwm.still .fl line{stroke:#ffb547; stroke-width:1.2}
.nwm.still .lbl.big{font-size:13px; letter-spacing:.3em; opacity:.55}
@media (max-width:860px){ .nwm.still .fl text{font-size:12.5px; stroke-width:3.5px} .nwm.still .lbl.big{font-size:10px} .nwm.still .nwm-credit{display:none} }

/* lifts mode */
.nwm.still .fl.lift circle{fill:#f2b84b;stroke:#fff;stroke-width:2}
.nwm.still .fl.lift line{stroke:#fff;stroke-width:1.2}
.nwm.still .fl.lift text{font-size:22px;font-weight:600}
.nwm.still .fl.lift text .gw{font-weight:800;fill:#f2b84b}