.local-world { position: relative; margin: 0; min-width: 0; color: white; border: 1px solid #264051; border-radius: 24px; background: #051323; overflow: hidden; scroll-margin-top: 90px; }
.world-stage { position: relative; aspect-ratio: 3 / 2; isolation: isolate; }
.world-base, .world-routes { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.world-routes { pointer-events: none; }
.world-county { position: absolute; z-index: 5; transform: translate(-50%,-50%); padding: 5px 8px; border: 1px solid #667887; border-radius: 5px; color: #e0e8ee; background: #061423ed; font-size: .875rem; font-weight: 700; letter-spacing: .02em; line-height: 1.25; text-align: center; box-shadow: 0 2px 10px #04101c80; }
.world-county > span { display: block; font-size: .75rem; color: #b7c7d4; font-weight: 500; letter-spacing: .04em; }
/* Approximate regional placement, checked against BCDCOG's tri-county map;
   generated terrain has no geographic coordinate reference. */
.county-dorchester { left: 23%; top: 30%; }
.county-berkeley { left: 67%; top: 18%; }
.county-charleston { left: 28%; top: 68%; }
/* Cities are a separate numbered layer; names remain readable in the key. */
.world-city { position: absolute; z-index: 6; transform: translate(-50%,-50%); }
.city-charleston { left: 64%; top: 67%; }
.city-north-charleston { left: 47%; top: 43%; }
.city-mount-pleasant { left: 79%; top: 48%; }
.world-city-point { position: relative; display: grid; place-items: center; width: 21px; height: 21px; border: 1.5px solid #ffb176; border-radius: 50%; background: #102739; color: #fff4e8; font-size: 12px; font-weight: 800; line-height: 1; box-shadow: 0 0 0 4px #ff87351a, 0 2px 6px #0008; }
.world-landmark { position: absolute; width: 64px; height: 64px; max-width: none; left: 50%; bottom: 18px; transform: translateX(-50%); object-fit: contain; filter: drop-shadow(0 3px 4px #0008); }
.world-city-key { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; list-style: none; padding: 0 0 16px; margin: 0 0 16px; border-bottom: 1px solid #264051; }
.world-city-key li { display: flex; align-items: center; gap: 7px; color: #d8e4ec; font-size: .875rem; line-height: 1.4; }
.world-city-key li > span { flex: 0 0 20px; display: grid; place-items: center; height: 20px; color: #ffd2b0; border: 1px solid #9c7455; border-radius: 50%; font-size: .75rem; }
.world-caption { padding: 18px 20px 20px; border-top: 1px solid #264051; }
.world-caption-top { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 10px; }
.world-caption strong { font-size: 1.04rem; letter-spacing: -.01em; }
.world-caption p { color: #bdcedc; font-size: .875rem; line-height: 1.6; margin: 0; }
.world-motion { background: transparent; color: #ffe3cd; border: 1px solid #8e664e; border-radius: 20px; min-height: 44px; padding: 8px 12px; font-size: .875rem; cursor: pointer; white-space: nowrap; }
.world-motion:focus-visible { outline: 3px solid #ffae79; outline-offset: 3px; }
.world-motion:hover { background: #2c241e; }
.world-route-base { fill: none; stroke: none; }
.world-trail { fill: none; stroke-width: 2.8; stroke-linecap: round; filter: drop-shadow(0 0 2px #ff873582); }
.world-sky-base { fill: none; stroke: #ff9d56; stroke-width: 1; opacity: .12; }
.world-sky-trail { fill: none; stroke: url(#world-sky-light); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 430 1430; filter: drop-shadow(0 0 2px #ff873575); }
.world-sky-rear { opacity: .35; }
.world-sky-dot { fill: #ffe0b9; filter: drop-shadow(0 0 3px #ffac65); }
.home-intake-wrap { max-width: 720px; margin: 0 auto; }
body[data-page-id="home"] .hero-grid { grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: 36px; }
body[data-page-id="home"] .display { font-size: clamp(2.5rem,4.25vw,4rem); }
@media(max-width:1020px) { body[data-page-id="home"] .hero-grid { grid-template-columns: 1fr; } .local-world { max-width: 720px; width: 100%; } }
@media(max-width:480px) { .world-caption { padding: 16px; } .world-caption-top { align-items: start; flex-direction: column; gap: 6px; } .world-county { padding: 4px 6px; } .world-landmark { width: 54px; height: 54px; } .world-city-point { width: 19px; height: 19px; } .world-city-key { gap: 8px; } .world-city-key li { flex-direction: column; gap: 5px; text-align: center; } .world-city-key li > span { width: 20px; } }
@media print { .world-motion { display: none !important; } }