.small-world { border-top: 1px solid var(--line); background: var(--bg); }
.small-world__inner { max-width: var(--max); margin: 0 auto; padding: 80px var(--gutter); display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 9%; }
.small-world__visual { min-width: 0; }
.small-world__visual svg { display: block; width: 100%; max-width: 480px; overflow: visible; }
.distance-globe { stroke: var(--blue); stroke-width: 1.2; fill: var(--surface); }
.distance-grid { stroke: var(--line); stroke-width: 1; }
.distance-connection { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s ease; }
.small-world.has-distance .distance-connection { stroke-dashoffset: 0; }
.distance-houston { fill: var(--gold); stroke: var(--bg); stroke-width: 3; }
.distance-you { fill: var(--blue); stroke: var(--bg); stroke-width: 3; }
.small-world__visual text { fill: var(--muted); font: 10px var(--body); letter-spacing: 1px; }
.small-world__visual .distance-globe-note { font-size: 8px; letter-spacing: 1.6px; }
.small-world__eyebrow { color: var(--accent); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 22px; }
.small-world h2 { font: 400 clamp(40px,4.8vw,64px)/1.12 var(--title); letter-spacing: -.03em; }
.distance-intro { max-width: 420px; font-size: 14px; color: var(--muted); margin-top: 26px; }
.distance-result { margin-top: 24px; }
.distance-reading { font: 400 clamp(32px,3.5vw,50px)/1.25 var(--display); color: var(--blue); overflow-wrap: anywhere; }
.distance-reading [data-distance-unit] { font: 400 15px var(--body); color: var(--text); }
.distance-result>p:last-child { font-size: 12px; color: var(--muted); margin-top: 8px; }
.distance-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 25px; }
.distance-locate { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 48px; padding: 12px 18px; border: 1px solid var(--gold); background: var(--gold); color: #070a10; font-size: 12px; font-weight: 600; }
.distance-locate:disabled { opacity: .7; cursor: wait; }
.distance-units { display: flex; gap: 2px; }
.distance-units button { min-height: 44px; min-width: 44px; padding: 8px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 12px; }
.distance-units button[aria-pressed=true] { color: var(--text); border-color: var(--accent); }
.distance-city-picker { flex-basis: 100%; }
.distance-city-picker summary { width: fit-content; min-height: 44px; display: list-item; padding: 10px 0; color: var(--muted); font-size: 12px; cursor: pointer; }
.distance-city-picker summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 5px; }
.distance-city-picker label { display: block; margin: 8px 0; font-size: 12px; }
.distance-city-picker select { max-width: 100%; width: min(100%,340px); min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 13px var(--body); }
.distance-city-picker p, .distance-location-note, .distance-status { flex-basis: 100%; color: var(--muted); font-size: 11px; line-height: 1.7; max-width: 420px; }
.distance-city-picker p { margin-top: 10px; }
.distance-status:empty { display: none; }
.distance-status { color: var(--accent); }
.distance-location-note { margin-top: 0; }
.distance-hello { display: inline-flex; align-items: center; gap: 26px; min-height: 44px; margin-top: 22px; border-bottom: 1px solid var(--accent); color: var(--text); text-decoration: none; font-size: 12px; }
.distance-noscript { margin-top: 20px; color: var(--muted); font-size: 13px; }
@media(max-width:900px) { .small-world__inner { gap: 5%; padding-block: 60px; } .small-world h2 { font-size: clamp(34px,5vw,46px); } }
@media(max-width:650px) { .small-world__inner { display: flex; flex-direction: column; align-items: stretch; padding-block: 44px; gap: 30px; } .small-world__visual { width: min(100%,280px); margin: 0 auto; } .small-world h2 { font-size: clamp(38px,10.5vw,52px); } .small-world__eyebrow { margin-bottom: 16px; } .distance-intro { margin-top: 20px; } .distance-reading { font-size: clamp(30px,9vw,44px); } }
@media(prefers-reduced-motion:reduce) { .distance-connection { transition: none; } }