.world-map{display:flex;align-items:center;justify-content:center;overflow:hidden}.world-map img{width:100%;height:100%;object-fit:contain;transform:scale(1.22)}
.local-menu{position:fixed;z-index:200;inset:0;background:#fff;color:#152251;padding:7vh 8vw;overflow:auto}.local-menu[hidden]{display:none}.local-menu nav{display:grid;gap:1rem;font-size:1.4rem}.local-menu nav a{color:inherit}.local-menu button{float:right;border:0;background:transparent;font-size:2rem;color:inherit;cursor:pointer}.local-dialog{max-width:90vw;max-height:90vh;border:0;background:#fff;padding:1rem}.local-dialog::backdrop{background:#071438dd}.local-dialog img{display:block;max-width:80vw;max-height:75vh;object-fit:contain}.local-dialog button{display:block;margin-left:auto;background:white;border:0;font-size:1.5rem;cursor:pointer}
.events-grid .event-card[hidden]{display:none}
.source-note{padding-top:1rem;color:#70572b;font-size:.9rem}
/* Enlarge the map column while preserving the full 2:1 artwork. */
.world-map img{width:100%;height:auto;object-fit:contain;transform:none}
@media(min-width:701px){.connections-strip{grid-template-columns:1fr 1.3fr .8fr}}
@media(min-width:701px){.connections-strip{grid-template-columns:1.12fr 1.25fr .8fr}}
/* Expand the artwork into the surrounding white space without stretching the map. */
.world-map{overflow:visible}
.world-map img{transform:scale(1.35)}
/* The enlarged map spans the connections section behind its text. */
.connections-strip{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(270px, 34vw, 440px)}
.connections-strip > div{position:relative;z-index:1}
.connections-strip .world-map{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.connections-strip .world-map img{width:85%;height:auto;max-width:none;transform:none;opacity:.78}
@media(max-width:700px){.connections-strip{min-height:260px}.connections-strip .world-map img{width:110%}}
@media(min-width:701px){.connections-strip .connection-verbs{grid-column:3;grid-row:1}}
@media(max-width:700px){.connections-strip .connection-verbs{grid-column:2;grid-row:2}}
@media(min-width:701px){.connections-strip{min-height:clamp(320px,42vw,500px)}.connections-strip .world-map img{width:100%}}
/* Pacific-centred map: keep its full geometry and reduce the section height. */
@media(min-width:701px){.connections-strip{min-height:clamp(230px,26vw,320px)}.connections-strip .world-map img{width:auto;height:90%;max-width:100%;object-fit:contain;opacity:1}}
@media(max-width:700px){.connections-strip{min-height:250px}.connections-strip .world-map img{width:auto;height:78%;max-width:100%;object-fit:contain;opacity:1}}
/* Compact map: Antarctica omitted, Japan centred; keep geographic proportions. */
@media(min-width:701px){.connections-strip{min-height:0;padding-top:25px;padding-bottom:25px}.connections-strip .world-map img{height:auto;width:auto;max-height:calc(100% - 30px);max-width:100%}}
@media(max-width:700px){.connections-strip{min-height:0}.connections-strip .world-map img{width:100%;height:auto;max-height:80%;object-fit:contain}}
/* Desktop: position the whole uploaded photo below the diagonal edge so the banner stays visible. */
@media(min-width:1201px){.hero-photo img{top:30%;bottom:auto;height:auto;object-fit:initial;object-position:initial;transform:none}}
/* Desktop: full-viewport map beneath the existing fixed-height content. */
@media(min-width:701px){
  .connections-strip{overflow:visible}
  .connections-strip .world-map{left:50%;right:auto;width:var(--viewport-content-width,100vw);transform:translateX(-50%);overflow:hidden}
  .connections-strip .world-map img{flex:none;width:100%;height:auto;max-width:none;max-height:none}
}
.purpose-image img.purpose-round-pc{display:none}
@media(min-width:701px){
 .purpose-image img.purpose-mobile-source{display:none}
 .purpose-image img.purpose-round-pc{display:block;flex:none;width:100%;height:auto;margin-left:-8%;mix-blend-mode:multiply}
 .purpose-image p{margin-left:-10%}
}
@media(min-width:701px){.connections-strip .world-map{align-items:flex-start}}
/* Related-site cards are currently for the desktop version only. */
.related-sites-pc{display:none}
@media(min-width:701px){
 .related-sites-pc{display:block;padding:26px 0 32px;border-top:1px solid #d9e1ef}
 .related-sites-pc h2{margin:0 0 16px;font:500 15px/1.5 DengXian,'Microsoft YaHei','Noto Sans JP',sans-serif;letter-spacing:.08em;color:#667c9b}
 .related-sites-cards{display:flex;gap:16px}
 .related-sites-cards a{display:flex;align-items:center;justify-content:center;width:235px;height:88px;padding:13px 17px;border:1px solid #b9cce0;border-radius:12px;background:#fff;transition:border-color .2s,box-shadow .2s}
 .related-sites-cards a:hover,.related-sites-cards a:focus-visible{border-color:#a58a53;box-shadow:0 4px 14px #17264a1a;outline-offset:3px}
 .related-sites-cards img{display:block;width:100%;height:100%;object-fit:contain}
}
@media(min-width:701px){.related-sites-cards a:last-child img{transform:scale(1.18)}}
/* Centre Japan (approximately 36°N in the 90°N–60°S map) within the desktop strip. */
@media(min-width:701px){.connections-strip .world-map img{position:relative;top:50%;transform:translateY(-36%)}}
@media(min-width:701px){.purpose-image img.purpose-round-pc{transform:scale(1.10);transform-origin:center}}
.menu-ja-desktop-label{display:none}
@media(min-width:701px){.local-menu .menu-original-label{display:none}.local-menu .menu-ja-desktop-label{display:inline}}
@media(min-width:701px){.purpose-image img.purpose-round-pc{transform:scale(1.18)}}
@media(min-width:701px){
 .purpose-image img.purpose-round-pc{transform:translateX(-4%) scale(1.18)}
 .purpose-image p{position:absolute;right:0;top:50%;transform:translateY(-50%);margin:0}
 .related-sites-pc{position:relative}
 .related-sites-pc::after{content:'';position:absolute;right:0;top:50%;width:clamp(140px,23vw,300px);aspect-ratio:360/110;transform:translateY(-40%);background:url('../reference-assets/footer-connection-ornament.svg') center/contain no-repeat;pointer-events:none}
}
@media(min-width:701px){.related-sites-pc::after{width:min(36%,max(0px,calc(100% - 490px)),380px);aspect-ratio:420/150;background-image:url('../reference-assets/footer-wpc-lines.svg')}}
@media(min-width:701px){
 .related-sites-pc::after{display:none}
 .footer-wpc-signature{position:absolute;right:0;top:50%;transform:translateY(-35%);width:min(37%,380px);display:flex;align-items:center;justify-content:flex-end;gap:12px;color:#203d9b}
 .footer-wpc-signature img{width:70px;height:70px;flex:none}
 .footer-wpc-signature p{margin:0;font:500 15px/1.7 DengXian,'Microsoft YaHei','Noto Sans JP',sans-serif;letter-spacing:.04em}
}
@media(min-width:701px) and (max-width:1000px){.related-sites-cards a{width:200px}.footer-wpc-signature{width:calc(100% - 430px);gap:7px}.footer-wpc-signature img{width:48px;height:48px}.footer-wpc-signature p{font-size:12px}}
.i18n-pc-translated{display:none}
@media(min-width:701px){
 .i18n-pc-original{display:none}.i18n-pc-translated{display:inline}
}
@media(min-width:701px){
 .hero-title h1 .i18n-pc-original{display:none}.hero-title h1 .i18n-pc-translated{display:inline}
 html[lang=ja] .connection-verbs small,html[lang=zh] .connection-verbs small{display:none}
}
@media(min-width:701px){
 .footer-wpc-signature{display:block;text-align:right;transform:translateY(-35%)}
 .footer-wpc-signature img{display:none}
 .footer-wpc-signature p{font-size:18px;line-height:1.6}
 .footer-wpc-signature::before,.footer-wpc-signature::after{content:'';display:block;height:1px;margin-left:auto}
 .footer-wpc-signature::before{width:54px;margin-bottom:10px;background:#1b4494}
 .footer-wpc-signature::after{width:95px;margin-top:10px;background:#b99a60}
}
@media(min-width:701px) and (max-width:1000px){.footer-wpc-signature p{font-size:16px}}
/* Desktop localized pillar labels: translation spans must not inherit number sizing. */
@media(min-width:701px){
 html[lang=ja] .pillar-label>span:first-child,
 html[lang=zh] .pillar-label>span:first-child{font-size:clamp(22px,1.8vw,26px);line-height:1}
 html[lang=ja] .pillar-label>.i18n-pc-translated,
 html[lang=zh] .pillar-label>.i18n-pc-translated{font-size:clamp(10px,1.1vw,16px);line-height:1.5;letter-spacing:.02em}
 html[lang=ja] .pillar-label,
 html[lang=zh] .pillar-label{min-height:32px;gap:12px;align-items:center}
}

/* Additional photo stories */
.round2-photos{padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(48px,7vw,96px);font-family:DengXian,"Microsoft YaHei","Noto Sans JP",sans-serif}
.round2-photos h2{font-size:clamp(1.7rem,3vw,2.5rem);color:#17234f;margin:0 0 16px}
.round2-photos h3{font-size:clamp(1.25rem,2vw,1.6rem);color:#17234f;margin:42px 0 12px}
.round2-intro{color:#536077;line-height:1.8;margin:0 0 24px}
.round2-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin:24px 0}
.round2-grid figure{margin:0;min-width:0}.round2-grid img{display:block;width:100%;height:260px;object-fit:contain;background:#f3f5f7;border-radius:4px}
.round2-grid figcaption{font-size:.9rem;color:#536077;line-height:1.6;padding-top:10px}
@media(max-width:700px){.round2-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.round2-grid img{height:180px}.round2-photos{padding-top:42px;padding-bottom:42px}}
@media(max-width:400px){.round2-grid{grid-template-columns:1fr}.round2-grid img{height:240px}}

/* Chinese pages: use one complete Simplified Chinese sans-serif family per device. */
html[lang=zh] :where(body, body *) {
  font-family: DengXian, "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif !important;
}
html[lang=zh] .hero-title h1 .gold,
html[lang=zh] .invitation h2,
html[lang=zh] .article-heading h1 { letter-spacing: 0; }
html[lang=zh] .invitation h2,
html[lang=zh] .article-heading h1 { line-height: 1.25; }

/* The Japanese and Chinese homepages share the English hero's four-line rhythm. */
html:is([lang=ja],[lang=zh]) .hero-title h1 {
  display: block; line-height: 1.05; letter-spacing: 0;
}
html:is([lang=ja],[lang=zh]) .hero-title h1 > span { display: block; white-space: nowrap; }
html:is([lang=ja],[lang=zh]) .hero-title h1 .i18n-pc-original { display: none; }
html:is([lang=ja],[lang=zh]) .hero-title h1 .i18n-pc-translated { display: inline; }
html:is([lang=ja],[lang=zh]) .hero-title .scroll-label .i18n-pc-original { display: none; }
html:is([lang=ja],[lang=zh]) .hero-title .scroll-label .i18n-pc-translated { display: inline; }
html:is([lang=ja],[lang=zh]) .hero-message h2 {
  font-size: 50px; line-height: 1.1; letter-spacing: 0; white-space: pre-line;
}
html:is([lang=ja],[lang=zh]) .hero-message p {
  font-family: DengXian,"Microsoft YaHei","Noto Sans JP",sans-serif;
  font-size: 14px; line-height: 1.8; letter-spacing: 0; text-wrap: pretty;
}
@media(min-width:701px) and (max-width:1200px) {
  html:is([lang=ja],[lang=zh]) .hero-title h1 { font-size: 8.5019vw; }
}
@media(min-width:1201px) and (max-width:1599px) {
  html:is([lang=ja],[lang=zh]) .hero-title h1 { font-size: clamp(70.72px,7.9752vw,127.9px); }
}
@media(min-width:1600px) {
  html:is([lang=ja],[lang=zh]) .hero-title h1 { font-size: 131.667px; }
}
@media(max-width:1000px) {
  html:is([lang=ja],[lang=zh]) .hero-message h2 { font-size: 40px; }
}
@media(min-width:701px) and (max-width:1000px) {
  html:is([lang=ja],[lang=zh]) .hero-message h2 { font-size: min(40px,4.4vw); }
}
@media(min-width:1001px) and (max-width:1200px) {
  html[lang=ja] .hero-message h2 { font-size: min(50px,4.7vw); }
}
@media(max-width:700px) {
  html:is([lang=ja],[lang=zh]) .hero-title h1 { font-size: clamp(45.14px,15.0476vw,94.8px); }
  html:is([lang=ja],[lang=zh]) .hero-message h2 { font-size: clamp(18px,5.7vw,30px); }
  html:is([lang=ja],[lang=zh]) .hero-message p { font-size: 12px; }
}
@media(max-width:380px) {
  html:is([lang=ja],[lang=zh]) .hero-message p { font-size: 11.5px; }
}
@media(min-width:1201px) {
  html:is([lang=ja],[lang=zh]) .hero-photo img {
    top: 24%; bottom: 0; width: 100%; height: 76%;
    object-fit: cover; object-position: center top; transform: none;
  }
}
@media(max-width:700px) {
  html[lang=zh] .pillars { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html[lang=zh] .pillar { min-width: 0; }
  html[lang=zh] .pillar-label > .i18n-pc-original { font-size: 10px; line-height: 1.5; }
}

/* Activity cards: preserve the source proportions and frame the people. */
.pillars > .pillar:nth-child(1) .image-clip img {
  object-fit: cover; object-position: 50% 100%; transform: scale(1.18); transform-origin: 50% 100%;
}
.pillars > .pillar:nth-child(2) .image-clip { background: #edf0f2; }
.pillars > .pillar:nth-child(2) .image-clip img {
  object-fit: contain; object-position: center; transform: none;
}
.pillars > .pillar:nth-child(3) .image-clip img {
  object-fit: cover; object-position: center 40%; transform: none;
}
.pillars > .pillar:nth-child(4) .image-clip img {
  object-fit: cover; object-position: 50% 100%; transform: scale(1.25); transform-origin: 100% 100%;
}
.pillars > .pillar:nth-child(1) .image-clip:hover img { transform: scale(1.21); }
.pillars > .pillar:nth-child(2) .image-clip:hover img { transform: none; }
.pillars > .pillar:nth-child(3) .image-clip:hover img { transform: scale(1.025); }
.pillars > .pillar:nth-child(4) .image-clip:hover img { transform: scale(1.27); }
/* Keep localized card labels from widening the mobile image grid. */
@media(max-width:700px) {
  .pillars { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pillar { min-width: 0; }
  .pillar-label > .i18n-pc-original { font-size: 10px; line-height: 1.5; }
}

/* Crop the first photograph at the feet and frame the two women in the fourth. */
.pillars > .pillar:nth-child(1) .image-clip,
.pillars > .pillar:nth-child(4) .image-clip { position: relative; }
.pillars > .pillar:nth-child(1) .image-clip img {
  position: absolute; left: -9%; bottom: 0; width: 118%; height: auto; max-width: none;
  object-fit: initial; transform: translateY(11%); transform-origin: center;
}
.pillars > .pillar:nth-child(1) .image-clip:hover img { transform: translateY(11%); }
.pillars > .pillar:nth-child(4) .image-clip img {
  position: absolute; right: 0; top: 0; width: 160%; height: 100%; max-width: none;
  object-fit: cover; object-position: right bottom; transform: none;
}
.pillars > .pillar:nth-child(4) .image-clip:hover img { transform: none; }

/* International gallery: compact transparent circle with a white outline and plus. */
.gallery-item svg {
  width: 26.6667px; height: 26.6667px; padding: 6.6667px;
  border: 1.5px solid #fff; border-radius: 50%;
  background: transparent; color: #fff; box-shadow: none;
  transition: color .2s, border-color .2s;
}
.gallery-item:hover svg, .gallery-item:focus-visible svg { background: transparent; color: #fff; border-color: #fff; }
.gallery-item:focus-visible { outline: 3px solid #b99760; outline-offset: 4px; }
@media(max-width:700px) { .gallery-item svg { width: 21.3333px; height: 21.3333px; padding: 5.3333px; } }

/* A single image viewer across the site. */
dialog.local-dialog {
  width: fit-content; min-width: min(280px, 90vw); max-width: min(94vw, 1200px);
  max-height: 90vh; max-height: 90dvh; padding: 0; border: 1px solid #c1a46d;
  background: #fff; color: #172654; overflow: auto;
  box-shadow: 0 20px 70px #06122b55;
}
dialog.local-dialog--map { width: min(94vw, 1200px); }
.local-dialog::backdrop { background: rgba(10, 25, 57, .82); }
.local-dialog-bar {
  min-height: 60px; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 10px 16px 10px 22px; border-bottom: 1px solid #e0e6f0;
}
.local-dialog-brand {
  color: #926f3c; font: 500 11px/1.4 DengXian, "Microsoft YaHei", "PingFang SC", sans-serif;
  letter-spacing: .12em;
}
.local-dialog button.local-dialog-close {
  float: none; display: grid; place-items: center; flex: none; margin: 0;
  width: 40px; height: 40px; border: 1px solid #c4a56e; border-radius: 50%;
  background: #17295d; color: #fff; font: 26px/1 Arial, sans-serif; cursor: pointer;
}
.local-dialog button.local-dialog-close:hover,
.local-dialog button.local-dialog-close:focus-visible { background: #987848; outline: 2px solid #c4a56e; outline-offset: 2px; }
.local-dialog-frame { padding: 14px; display: flex; align-items: center; justify-content: center; background: #f7f9fc; }
.local-dialog .local-dialog-frame img {
  display: block; width: auto; height: auto; max-width: min(86vw, 1168px);
  max-height: calc(90vh - 110px); max-height: calc(90dvh - 110px); object-fit: contain;
}
.local-dialog--map .local-dialog-frame img { width: 100%; max-width: 100%; }
@media(max-width:700px) {
  dialog.local-dialog { max-width: 94vw; }
  .local-dialog-bar { min-height: 54px; padding: 7px 10px 7px 14px; }
  .local-dialog-frame { padding: 8px; }
  .local-dialog .local-dialog-frame img { max-width: 89vw; max-height: calc(90dvh - 78px); }
}

/* Interactive photo-location explorer */
.network-explorer { padding: 28px; margin-bottom: 54px; border: 1px solid #d9e3f1; background: #f3f6fc; }
.network-explorer-header { border-bottom: 1px solid #d4dfed; padding-bottom: 18px; margin-bottom: 18px; }
.network-eyebrow { color: #a27e49; font: 500 11px/1.5 DengXian,"Microsoft YaHei","PingFang SC",sans-serif; letter-spacing: .12em; margin: 0 0 6px; }
.network-explorer-title { color: #14265c; font-size: clamp(22px,2vw,29px); line-height: 1.4; margin: 0; }
.network-explorer-sub { color: #586d8b; font-size: 13px; line-height: 1.7; margin: 6px 0 0; }
.network-explorer-layout { display: grid; grid-template-columns: minmax(0,1.18fr) minmax(240px,.82fr); gap: 24px; align-items: start; }
.network-map-column { min-width: 0; }
.network-world-map { display: block; width: 100%; height: auto; overflow: visible; }
.network-routes path { fill: none; stroke: #c2a367; stroke-width: .8; opacity: .7; vector-effect: non-scaling-stroke; }
.network-routes path.is-selected { stroke: #a4762e; stroke-width: 2; opacity: 1; }
.network-marker { cursor: pointer; outline: none; }
.network-marker-hit { fill: transparent; pointer-events: all; }
.network-marker-ring { fill: #fff; stroke: #a57832; stroke-width: .8; vector-effect: non-scaling-stroke; }
.network-marker-dot { fill: #bf9047; }
.network-marker.is-origin .network-marker-dot { fill: #997038; }
.network-marker:hover .network-marker-ring, .network-marker:focus-visible .network-marker-ring, .network-marker.is-selected .network-marker-ring { fill: #fff6df; stroke: #7b531e; stroke-width: 2; }
.network-map-hint { color: #596e8b; font-size: 12px; line-height: 1.6; margin: 4px 0 12px; }
.network-japan-detail { display: grid; grid-template-columns: 1fr minmax(120px, 160px); align-items: center; gap: 12px; padding: 10px 13px; background: #fff; border: 1px solid #e0e8f3; }
.network-japan-title { color: #74603e; font-size: 12px; margin: 0; }
.network-japan-map { display: block; width: 100%; max-height: 115px; }
.network-city-controls { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.network-city-chip { min-height: 32px; padding: 5px 10px; border: 1px solid #cbd8ea; border-radius: 20px; background: #fff; color: #243a65; font-size: 12px; line-height: 1.45; }
.network-city-chip:hover, .network-city-chip:focus-visible { border-color: #aa824a; outline-offset: 2px; }
.network-city-chip[aria-pressed="true"] { background: #172b61; border-color: #172b61; color: #fff; }
.network-photo-panel { min-width: 0; border-left: 1px solid #d5dfed; padding-left: 22px; }
.network-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; border-bottom: 1px solid #d5dfed; padding-bottom: 12px; }
.network-panel-title { color: #172b61; font-size: 19px; line-height: 1.4; margin: 0; }
.network-panel-count { color: #8b754c; font-size: 12px; white-space: nowrap; }
.network-photo-note { color: #64748e; font-size: 12px; line-height: 1.65; margin: 10px 0; }
.network-photo-note[hidden] { display: none; }
.network-photo-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; max-height: 510px; overflow-y: auto; padding: 2px 3px 6px 0; align-content: start; }
.network-photo { display: flex; flex-direction: column; min-width: 0; text-align: left; background: #fff; border: 1px solid #e0e6ef; }
.network-photo:hover, .network-photo:focus-visible { border-color: #b18c54; outline-offset: 2px; }
.network-photo img { width: 100%; aspect-ratio: 1.35; object-fit: cover; }
.network-photo-caption { display: block; padding: 5px 6px 7px; color: #33496c; font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
@media(max-width:900px) and (min-width:701px) { .network-explorer { padding: 20px; } .network-explorer-layout { grid-template-columns: minmax(0,1.08fr) minmax(220px,.92fr); gap: 16px; } .network-photo-panel { padding-left: 16px; } .network-photo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) { .network-explorer { padding: 18px 14px; margin-bottom: 30px; } .network-explorer-layout { grid-template-columns: 1fr; gap: 20px; } .network-photo-panel { border-left: 0; border-top: 1px solid #d5dfed; padding: 18px 0 0; } .network-photo-grid { max-height: 440px; grid-template-columns: repeat(2,minmax(0,1fr)); } .network-photo-caption { font-size: 12px; } .network-japan-detail { grid-template-columns: 1fr minmax(150px,200px); } .network-japan-map { max-height: 140px; } }

/* Reframe the requested exchange-gallery photographs without stretching faces. */
.photo-grid .gallery-item:nth-child(2) img { object-position: 50% 60%; }
@media(min-width:1001px) { .photo-grid .gallery-item:nth-child(2) img { object-position: 50% 76%; } }
.photo-grid .gallery-item:nth-child(7) { background: #edf1f5; }
.photo-grid .gallery-item:nth-child(7) img { object-fit: contain; object-position: center; }
.photo-grid .gallery-item:nth-child(7):hover img { transform: none; }
.photo-grid .gallery-item:nth-child(12) img { object-position: 50% 100%; }
@media(max-width:700px) { .photo-grid .gallery-item:nth-child(2) img { object-position: 50% 0%; } }
.network-photo[data-photo="tottori1"] img { object-fit: contain; background: #edf1f5; }
.network-photo[data-photo="kuala1"] img { object-position: 50% 74%; }
.network-photo[data-photo="sendai2"] img { object-position: 50% 100%; }
.network-japan-title { white-space: nowrap; }

/* One movable world map with city photo popovers. */
.network-map-section { margin-bottom: 54px; }
.network-map-frame { position: relative; height: clamp(300px, 45vw, 640px); overflow: hidden; border: 1px solid #d9e0ea; background: #fbfaf7; }
.network-pan-map { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.network-map-frame.is-dragging .network-pan-map { cursor: grabbing; }
.network-pan-map:focus-visible { outline: 3px solid #ba9558; outline-offset: -4px; }
.map-routes path { fill: none; stroke: #bb9559; stroke-width: 1.1; opacity: .67; vector-effect: non-scaling-stroke; pointer-events: none; }
.map-routes path.is-selected { opacity: 1; stroke-width: 2; }
.map-unpictured-routes path { fill: none; stroke: #3266bb; stroke-width: 1.2; stroke-dasharray: 5 4; opacity: .78; vector-effect: non-scaling-stroke; pointer-events: none; }
.map-unpictured-marker { pointer-events: none; }
.map-unpictured-dot { fill: #3266bb; stroke: #fff; stroke-width: .7; vector-effect: non-scaling-stroke; }
.map-unpictured-leader { stroke: #3266bb; stroke-width: .8; opacity: .8; vector-effect: non-scaling-stroke; }
.map-unpictured-label { fill: #244e97; paint-order: stroke; stroke: #fbfaf7; stroke-width: 3px; stroke-linejoin: round; vector-effect: non-scaling-stroke; font-family: DengXian,"Microsoft YaHei","PingFang SC",sans-serif; }
.map-city-marker { cursor: pointer; outline: none; }
.map-city-hit { fill: transparent; pointer-events: all; }
.map-city-ring { fill: #fff; stroke: #aa7b35; stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.map-city-dot { fill: #c19046; pointer-events: none; }
.map-city-marker.is-selected .map-city-ring, .map-city-marker:hover .map-city-ring, .map-city-marker:focus-visible .map-city-ring { stroke: #6f4615; stroke-width: 2; fill: #fff3d6; }
.map-city-label { fill: #182c5c; paint-order: stroke; stroke: #fbfaf7; stroke-width: 3px; stroke-linejoin: round; font-family: DengXian,"Microsoft YaHei","PingFang SC",sans-serif; visibility: hidden; pointer-events: none; }
.map-city-marker:hover .map-city-label, .map-city-marker:focus-visible .map-city-label, .map-city-marker.is-selected .map-city-label { visibility: visible; }
.network-map-hint-overlay { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 18px; padding: 0 0 12px; color: #526786; font-size: 12px; line-height: 1.5; }
.network-map-controls { position: absolute; top: 14px; right: 14px; display: grid; border: 1px solid #d9e0ea; background: #fff; box-shadow: 0 6px 20px #14244b12; }
.network-map-control { width: 38px; height: 38px; background: #fff; color: #172b60; border: 0; font: 22px/1 Arial,sans-serif; }
.network-map-control + .network-map-control { border-top: 1px solid #e2e7ef; }
.network-map-control:hover, .network-map-control:focus-visible { color: #8e6731; background: #fbf8f1; outline-offset: 2px; }
.network-map-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.map-city-popup { position: absolute; z-index: 4; width: min(292px,calc(100% - 16px)); max-height: min(310px,calc(100% - 16px)); overflow: auto; background: #fff; border: 1px solid #c1a16d; box-shadow: 0 7px 28px #14244b35; }
.map-city-popup[hidden], .map-city-popup.is-offscreen { display: none; }
.map-popup-head { display: flex; align-items: center; gap: 8px; padding: 10px 11px; border-bottom: 1px solid #e0e7f0; }
.map-popup-title { margin: 0; color: #172b60; font-size: 16px; line-height: 1.4; }
.map-popup-count { color: #8d7449; font-size: 11px; white-space: nowrap; }
.map-popup-close { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; background: #172b60; color: #fff; font: 20px/1 Arial,sans-serif; flex: none; }
.map-popup-close:hover, .map-popup-close:focus-visible { background: #97713d; outline-offset: 2px; }
.map-popup-note { margin: 8px 10px 0; color: #65758c; font-size: 11px; line-height: 1.5; }
.map-popup-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; padding: 10px; }
.map-popup-photo { min-width: 0; text-align: left; border: 1px solid #e1e7ef; background: #f8fafc; }
.map-popup-photo:hover, .map-popup-photo:focus-visible { border-color: #af8953; outline-offset: 2px; }
.map-popup-photo img { width: 100%; aspect-ratio: 1.3; object-fit: cover; }
.map-popup-photo img[alt*="采访"], .map-popup-photo img[alt*="インタビュー"], .map-popup-photo img[alt*="Interview in Tottori"] { object-fit: contain; }
.map-popup-caption { display: block; padding: 4px; font-size: 10px; line-height: 1.4; color: #40536f; overflow-wrap: anywhere; }
@media(max-width:700px) {
 .network-map-section { margin-bottom: 30px; }
 .network-map-frame { height: clamp(230px, 62vw, 360px); min-height: 230px; }
 .network-map-hint-overlay { font-size: 11px; }
 .network-map-controls { right: 8px; top: 8px; }
 .network-map-control { width: 34px; height: 34px; }
 .map-city-popup { width: min(270px,calc(100% - 16px)); max-height: min(270px,calc(100% - 16px)); }
}

/* Low-contrast graticule, multilingual place names and border reference. */
.map-graticule { pointer-events: none; }
.map-graticule line { stroke: #bfcbd9; stroke-width: .65; stroke-opacity: .38; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; }
.map-coordinate-labels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.map-coordinate { position: absolute; padding: 1px 3px; color: #8a98aa; background: #fbfaf7cc; font: 10px/1.3 DengXian,"Microsoft YaHei","PingFang SC",sans-serif; }
.map-coordinate.longitude { bottom: 3px; transform: translateX(-50%); }
.map-coordinate.latitude { left: 3px; transform: translateY(-50%); }
.map-city-label { visibility: visible; stroke-width: 3px; vector-effect: non-scaling-stroke; }
.map-city-label, .map-unpictured-label { font-weight: 700; }
.map-city-leader { stroke: #b39058; stroke-width: .8; opacity: .8; vector-effect: non-scaling-stroke; pointer-events: none; }
.map-reference-layer { pointer-events: none; }
.map-reference-city circle { fill: #8291a5; opacity: .65; }
.map-reference-city text { fill: #647792; stroke: #fbfaf7; stroke-width: 2.5px; paint-order: stroke; stroke-linejoin: round; vector-effect: non-scaling-stroke; font-family: DengXian,"Microsoft YaHei","PingFang SC",sans-serif; }
.map-hint-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; color: #687a91; font-size: .95em; }
.map-legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.map-legend-symbol { display: inline-block; flex: none; }
.map-legend-symbol--photo { position: relative; width: 10px; height: 10px; border: 1.5px solid #aa7b35; border-radius: 50%; background: #fff; }
.map-legend-symbol--photo::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: #c19046; }
.map-legend-symbol--planned { position: relative; width: 19px; border-top: 1px dashed #3266bb; }
.map-legend-symbol--planned::after { content: ''; position: absolute; right: 0; top: -3px; width: 5px; height: 5px; border-radius: 50%; background: #3266bb; }
.map-legend-symbol--reference { width: 5px; height: 5px; border-radius: 50%; background: #8291a5; }

/* Mobile follows the approved desktop content with a layout sized for touch. */
@media (max-width: 700px) {
  /* Dim the bright map beneath the copy while retaining the artwork. */
  .network-band { background-image: linear-gradient(90deg, rgba(3, 20, 85, .91) 0%, rgba(3, 20, 85, .87) 68%, rgba(3, 20, 85, .48) 100%), url('../reference-assets/network-art.webp'); }
  .i18n-pc-original { display: none; }
  .i18n-pc-translated { display: inline; }
  .local-menu .menu-original-label { display: none; }
  .local-menu .menu-ja-desktop-label { display: inline; }
  html:is([lang=ja],[lang=zh]) .connection-verbs small { display: none; }
  .pillar-label > .i18n-pc-translated { font-size: 10px; line-height: 1.5; }
  .purpose-image img.purpose-mobile-source { display: none; }
  .purpose-image img.purpose-round-pc { display: block; width: 100%; height: auto; margin: 0; }
  .related-sites-pc { display: block; padding: 24px 0; border-top: 1px solid #d9e1ef; }
  .related-sites-pc h2 { margin: 0 0 14px; color: #667c9b; font: 500 14px/1.5 DengXian, 'Microsoft YaHei', 'Noto Sans JP', sans-serif; }
  .related-sites-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .related-sites-cards a { display: flex; align-items: center; justify-content: center; min-width: 0; height: 74px; padding: 10px; border: 1px solid #b9cce0; border-radius: 10px; background: white; }
  .related-sites-cards img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .footer-wpc-signature { margin-top: 24px; color: #203d9b; text-align: right; }
  .footer-wpc-signature img { display: none; }
  .footer-wpc-signature p { margin: 0; font: 500 15px/1.6 DengXian, 'Microsoft YaHei', 'Noto Sans JP', sans-serif; }
  .footer-wpc-signature::before, .footer-wpc-signature::after { content: ''; display: block; height: 1px; margin-left: auto; }
  .footer-wpc-signature::before { width: 44px; margin-bottom: 8px; background: #1b4494; }
  .footer-wpc-signature::after { width: 78px; margin-top: 8px; background: #b99a60; }
}