.juan{padding:36px 0 72px;max-width:880px;margin:0 auto}
.juan h1{font-size:clamp(24px,3.2vw,36px);margin:8px 0 10px;letter-spacing:.06em}
.lead{color:var(--ink-2);margin-bottom:28px}

.globe-nav{position:relative;width:min(420px,100%);height:420px;margin:0 auto 40px}
.globe-core{
  position:absolute;inset:70px;border-radius:50%;border:1px dashed var(--ink);
  background:radial-gradient(circle at 38% 32%,#efe8dc 0%,var(--paper) 46%,#d8d0c2 100%);
  display:grid;place-items:center;text-align:center;font-size:13px;letter-spacing:.16em;
}
.dot-link{
  position:absolute;width:64px;height:64px;border-radius:50%;border:1px solid var(--ink);
  background:var(--paper);display:grid;place-items:center;text-align:center;
  font-size:11px;font-weight:800;letter-spacing:.04em;
}
.dot-link:nth-child(odd){border-color:var(--cinnabar);color:var(--cinnabar)}
.d1{left:50%;top:0;transform:translateX(-50%)}
.d2{right:18px;top:18%}
.d3{right:0;top:50%;transform:translateY(-50%)}
.d4{right:18px;bottom:18%}
.d5{left:50%;bottom:0;transform:translateX(-50%)}
.d6{left:18px;bottom:18%}
.d7{left:0;top:50%;transform:translateY(-50%)}
.d8{left:18px;top:18%}

.toc{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:36px;font-size:13px;color:var(--ink-2);border-bottom:1px solid var(--ink);padding-bottom:14px}
.toc a{border-bottom:1px dashed var(--line)}

.hui{scroll-margin-top:72px;display:grid;grid-template-columns:72px 1fr;gap:0;margin-bottom:22px;border:1px solid var(--ink)}
.hui-no{
  writing-mode:vertical-rl;letter-spacing:.3em;display:grid;place-items:center;
  background:var(--ink);color:var(--paper);font-size:14px;font-weight:700;padding:16px 0;
}
.hui-body{padding:20px 22px 18px;background:repeating-linear-gradient(90deg,transparent 0 23px,rgba(163,38,38,.1) 23px 24px)}
.hui-body h2{font-size:20px;margin-bottom:8px}
.hui-body p{font-size:15px;color:var(--ink-2)}
.hui-body .kpi{display:inline-block;margin-top:10px;font-size:13px;font-weight:800;color:var(--cinnabar);letter-spacing:.06em}
.hui-body img{width:min(100%,320px);height:140px;object-fit:cover;margin-top:14px;border:1px solid var(--ink)}
.hui.alt .hui-no{background:var(--cinnabar)}

@media(max-width:720px){
  .globe-nav{height:300px}
  .globe-core{inset:58px;font-size:11px}
  .dot-link{width:52px;height:52px;font-size:10px}
  .hui{grid-template-columns:1fr}
  .hui-no{writing-mode:horizontal-tb;letter-spacing:.2em;padding:8px}
}