/* Rotating city typography sphere; the editable grid remains the fallback. */
body:not(.layout-editing):not(.legacy-globe-preview) .stamp-story{height:100svh;min-height:0}
body:not(.layout-editing):not(.legacy-globe-preview) .story-stage{position:relative;height:100%;min-height:0}
body:not(.legacy-globe-preview):not(.layout-editing) .globe-scene,
body:not(.legacy-globe-preview):not(.layout-editing) .falling-stamps{display:none}
.city-atlas{position:relative;height:calc(max(var(--atlas-min-height,820px),100svh) + 170svh);scroll-margin-top:0}
.atlas-inner{position:sticky;top:0;width:100%;height:max(var(--atlas-min-height,820px),100svh);padding:100px 0 32px;display:flex;flex-direction:column;overflow:hidden;isolation:isolate}
.atlas-heading{text-align:center;position:relative;z-index:3}
.atlas-heading h2{width:fit-content;max-width:calc(100% - 80px);margin:0 auto}
.city-composition{position:relative;z-index:2;width:min(1280px,calc(100% - 128px));margin:42px auto 10px;flex:1;min-height:calc(var(--city-rows,7)*82px - 26px);display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:repeat(var(--city-rows,7),minmax(0,1fr));gap:26px 28px;align-items:center}
.city-entry{position:relative;grid-column:var(--city-column,1)/span 2;grid-row:var(--city-row,1);text-align:center;min-width:0;transform:translateY(var(--city-offset,0px)) rotate(var(--city-tilt,0deg))}
.city-entry h3{font:700 var(--city-size,27px)/1.15 'Courier Prime',monospace;letter-spacing:-1px;white-space:nowrap;width:fit-content;max-width:100%;margin:0 auto}
.city-long h3{font-size:22px;letter-spacing:-.8px}
.city-name{display:inline-block;color:var(--ink)}
.city-orbit{display:contents}
.atlas-country{font:700 11px/1.4 'Courier Prime',monospace;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:0 0 8px}
.city-atlas.is-word-sphere{height:auto}
.is-word-sphere .atlas-inner{position:relative;height:auto;min-height:0}
/* City positions sit below the equator, making an upward-facing bowl.
   Text stays upright; padding protects complete labels.
   The short viewport is not a crop of a full sphere's population. */
.is-word-sphere .city-composition{display:block;flex:none;width:min(1440px,100%);height:auto;aspect-ratio:var(--city-sphere-ratio,2.0202);min-height:0;margin:calc(42px + var(--city-sphere-offset-y,0px)) auto 0;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 32px),transparent);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;outline:none}
.is-word-sphere .city-composition.is-dragging{cursor:grabbing}
.is-word-sphere .city-composition:focus-visible{outline:1px dashed var(--gold);outline-offset:8px;border-radius:0 0 50% 50%}
.is-word-sphere .city-orbit{display:block;position:absolute;left:50%;top:36px;width:max-content;opacity:0;pointer-events:none;will-change:transform,opacity}
.is-word-sphere .city-entry{width:max-content;pointer-events:none}
.atlas-outro{position:relative;z-index:2;flex:none;text-align:center;margin:20px auto 0;opacity:var(--outro-opacity,0)}
.atlas-outro-copy{display:inline-block;font:700 26px/1.4 'Courier Prime',monospace;letter-spacing:-.5px;color:var(--gold);transform:rotate(-2deg)}
.layout-editing .city-atlas{height:auto}
.layout-editing .atlas-inner{position:relative}
.layout-editing .city-name,.layout-editing .atlas-country{opacity:1!important;clip-path:none;filter:none}
.layout-editing .atlas-outro{opacity:1}
.legacy-globe-preview .city-atlas{display:none}
/* Real breathing room between chapters, outside the pinned animation distance. */
@media(min-width:900px){body:not(.layout-editing) .city-atlas{margin-top:clamp(160px,22svh,240px);margin-bottom:clamp(120px,18svh,220px)}}
/* Safety for narrow previews; detailed mobile art direction remains separate. */
@media(max-width:1100px){.city-composition{width:calc(100% - 72px);column-gap:20px}.city-entry h3{font-size:21px;letter-spacing:-1px}.city-long h3{font-size:18px;letter-spacing:-.7px}.atlas-country{font-size:10px}}
@media(max-width:899px){.city-atlas{height:auto}.atlas-inner{position:relative;height:auto;padding:95px 0 55px}.city-composition{width:calc(100% - 48px);min-height:0;display:flex;flex-wrap:wrap;justify-content:center;gap:38px 18px;margin:50px auto}.city-entry{flex:0 0 calc((100% - 18px)/2)}.city-entry h3{font-size:23px;white-space:normal}.city-long h3{font-size:20px}.atlas-outro-copy{font-size:24px}}
