:root {
  --ls-navy: #061b3c;
  --ls-navy-soft: #0b3451;
  --ls-teal: #0aa8a5;
  --ls-cream: #f4efe4;
  --ls-paper: #fbf8f1;
  --ls-gold: #f0a91f;
  --ls-coral: #ed3e3a;
  --ls-ink: #10203a;
  --ls-muted: #5e6b7d;
  --ls-line: rgba(6, 27, 60, .14);
}

.ls-page { overflow: clip; background: var(--ls-paper); color: var(--ls-ink); }
.ls-page h1, .ls-page h2, .ls-page h3 { text-wrap: balance; }
.ls-kicker { margin: 0 0 18px; color: #087f7d; font-size: 12px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.ls-kicker-light { color: #75e2dc; }

.ls-hero { min-height: 790px; position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(circle at 78% 24%, rgba(10,168,165,.22), transparent 29%), linear-gradient(132deg, #04152f, var(--ls-navy) 54%, #075763); color: #fff; }
.ls-hero-grid { position: absolute; inset: 0; z-index: -2; opacity: .17; background-image: linear-gradient(rgba(117,226,220,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(117,226,220,.2) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(90deg, #000, transparent 82%); }
.ls-hero-compass { width: min(52vw, 760px); aspect-ratio: 1; position: absolute; z-index: -1; right: -15vw; top: -31%; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; animation: ls-compass-turn 70s linear infinite; }
.ls-hero-compass::before, .ls-hero-compass::after, .ls-hero-compass i { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.ls-hero-compass::before { inset: 13%; }
.ls-hero-compass::after { inset: 35%; }
.ls-hero-compass i:nth-child(1) { inset: 48%; background: var(--ls-gold); border: 0; box-shadow: 0 0 0 10px rgba(240,169,31,.1); }
.ls-hero-compass i:nth-child(2) { inset: 4% 49%; border: 0; border-radius: 0; background: linear-gradient(var(--ls-gold), transparent 45%, #75e2dc); clip-path: polygon(50% 0, 100% 47%, 54% 50%, 50% 100%, 46% 50%, 0 47%); }
.ls-hero-compass i:nth-child(3) { inset: 23%; border-style: dashed; }
.ls-hero-compass span { position: absolute; left: 50%; top: 3%; transform: translateX(-50%); color: var(--ls-gold); font: 700 15px Georgia, serif; }
.ls-hero-layout { min-height: 790px; padding: 78px 0 118px; display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(50px,7vw,110px); align-items: center; }
.ls-hero-copy { position: relative; z-index: 2; }
.ls-hero h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(72px, 8.7vw, 132px); font-weight: 500; line-height: .78; letter-spacing: -.07em; }
.ls-hero h1 em { color: #76e3dd; font-weight: 400; }
.ls-hero-lede { max-width: 630px; margin: 32px 0 0; color: rgba(255,255,255,.76); font-size: clamp(18px,1.6vw,22px); line-height: 1.62; }
.ls-hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 36px; }
.ls-hero-actions a { min-height: 52px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: space-between; gap: 26px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; font-size: 14px; font-weight: 900; transition: transform .18s ease-out, background .18s ease-out, color .18s ease-out; }
.ls-hero-actions a:first-child { border-color: var(--ls-gold); background: var(--ls-gold); color: var(--ls-navy); }
.ls-hero-actions a:hover, .ls-hero-actions a:focus-visible { transform: translateY(-2px); background: #fff; color: var(--ls-navy); }
.ls-hero-facts { margin-top: 48px; padding-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.18); }
.ls-hero-facts div { display: grid; gap: 7px; }
.ls-hero-facts strong { color: var(--ls-gold); font: 500 31px Georgia, serif; }
.ls-hero-facts span { color: rgba(255,255,255,.58); font-size: 12px; font-weight: 800; }

.ls-hero-chart { min-height: 565px; position: relative; border: 1px solid rgba(255,255,255,.2); border-radius: 28px; background: linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.03)); box-shadow: 0 34px 90px rgba(0,0,0,.28); backdrop-filter: blur(10px); }
.ls-chart-ring { width: 290px; aspect-ratio: 1; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 1px solid rgba(117,226,220,.34); border-radius: 50%; box-shadow: 0 0 0 58px rgba(117,226,220,.035), 0 0 0 116px rgba(117,226,220,.025); }
.ls-chart-ring::before, .ls-chart-ring::after { content: ""; position: absolute; inset: 16%; border: 1px dashed rgba(240,169,31,.38); border-radius: 50%; }
.ls-chart-ring::after { inset: 42%; border-style: solid; background: var(--ls-gold); box-shadow: 0 0 0 12px rgba(240,169,31,.1); }
.ls-chart-ring i { width: 9px; aspect-ratio: 1; position: absolute; border-radius: 50%; background: #76e3dd; box-shadow: 0 0 0 7px rgba(118,227,221,.1); }
.ls-chart-ring i:nth-child(1) { left: 8%; top: 48%; }
.ls-chart-ring i:nth-child(2) { right: 11%; top: 24%; }
.ls-chart-ring i:nth-child(3) { left: 47%; bottom: 4%; background: var(--ls-gold); }
.ls-chart-ring i:nth-child(4) { left: 34%; top: 9%; }
.ls-chart-card { width: 44%; min-height: 112px; padding: 18px; position: absolute; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(255,255,255,.17); border-radius: 18px; background: rgba(3,22,48,.77); box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.ls-chart-card span { color: #75e2dc; font-size: 12px; font-weight: 900; letter-spacing: .14em; }
.ls-chart-card strong { max-width: 240px; font: 500 20px/1.2 Georgia, serif; }
.ls-chart-card-1 { left: 4%; top: 7%; }
.ls-chart-card-2 { right: 4%; top: 15%; }
.ls-chart-card-3 { left: 4%; bottom: 15%; }
.ls-chart-card-4 { right: 4%; bottom: 7%; }
.ls-hero-chart > p { width: 230px; margin: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: rgba(255,255,255,.76); font-size: 12px; line-height: 1.5; text-align: center; }
.ls-hero-horizon { height: 58px; position: absolute; left: 0; right: 0; bottom: -12px; opacity: .48; }
.ls-hero-horizon i { position: absolute; left: -6%; right: -6%; height: 100%; border: 1px solid rgba(117,226,220,.5); border-color: rgba(117,226,220,.5) transparent transparent; border-radius: 50%; animation: ls-wave 4s ease-in-out infinite alternate; }
.ls-hero-horizon i:nth-child(2) { top: 16px; left: -13%; right: 3%; opacity: .6; animation-delay: -.8s; }
.ls-hero-horizon i:nth-child(3) { top: 32px; left: 3%; right: -12%; opacity: .3; animation-delay: -1.6s; }

.ls-reading { padding: 126px 0; background: var(--ls-cream); }
.ls-section-heading { margin-bottom: 54px; display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(45px,7vw,110px); align-items: end; }
.ls-section-heading h2 { margin: 0; color: var(--ls-navy); font: 500 clamp(50px,5.4vw,76px)/.96 Georgia, serif; letter-spacing: -.045em; }
.ls-section-heading h2 em { color: #087f7d; font-weight: 400; }
.ls-section-heading > p { max-width: 610px; margin: 0; color: var(--ls-muted); font-size: 17px; line-height: 1.75; }
.ls-section-heading-light h2 { color: #fff; }
.ls-section-heading-light h2 em { color: #76e3dd; }
.ls-section-heading-light > p { color: rgba(255,255,255,.68); }
.ls-reading-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--ls-line); border-left: 1px solid var(--ls-line); }
.ls-reading-grid article { min-height: 315px; padding: 30px; border-right: 1px solid var(--ls-line); border-bottom: 1px solid var(--ls-line); }
.ls-reading-grid span { color: #078885; font: 500 29px Georgia, serif; }
.ls-reading-grid h3 { margin: 72px 0 16px; color: var(--ls-navy); font: 500 29px Georgia, serif; }
.ls-reading-grid p { margin: 0; color: var(--ls-muted); line-height: 1.7; }

.ls-atlas { padding: 126px 0; background: radial-gradient(circle at 84% 18%, rgba(10,168,165,.18), transparent 28%), var(--ls-navy); color: #fff; }
.ls-era-filter { margin-bottom: 22px; display: flex; gap: 8px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.ls-era-filter::-webkit-scrollbar { display: none; }
.ls-era-filter button { min-height: 46px; padding: 0 16px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; background: transparent; color: rgba(255,255,255,.72); cursor: pointer; font-size: 13px; font-weight: 800; transition: background .18s ease-out, color .18s ease-out, border-color .18s ease-out; }
.ls-era-filter button:hover, .ls-era-filter button[aria-pressed="true"] { border-color: var(--ls-gold); background: var(--ls-gold); color: var(--ls-navy); }
.ls-era-filter > span { margin-left: auto; flex: 0 0 auto; color: #76e3dd; font: 500 18px Georgia, serif; }
.ls-atlas-grid { display: grid; grid-template-columns: 1.38fr .62fr; gap: 16px; align-items: stretch; }
.ls-map-wrap { min-width: 0; }
.ls-map { min-height: 620px; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.17); border-radius: 24px; background: radial-gradient(circle at 68% 58%, rgba(10,168,165,.17), transparent 30%), #051731; }
.ls-map-grid { position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(rgba(118,227,221,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(118,227,221,.16) 1px, transparent 1px); background-size: 8.333% 16.666%; }
.ls-map::before, .ls-map::after { content: ""; position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(240,169,31,.28); }
.ls-map::before { top: 50%; }
.ls-map::after { top: 25%; }
.ls-map-land { position: absolute; opacity: .18; background: #4bb9b7; filter: drop-shadow(0 0 28px rgba(75,185,183,.15)); }
.ls-map-americas { width: 23%; height: 66%; left: 7%; top: 13%; clip-path: polygon(5% 2%, 66% 0, 93% 15%, 72% 30%, 60% 44%, 74% 53%, 63% 66%, 53% 100%, 39% 83%, 42% 58%, 17% 42%, 0 19%); }
.ls-map-eurasia { width: 51%; height: 43%; right: 4%; top: 10%; clip-path: polygon(0 15%, 12% 2%, 37% 8%, 52% 0, 69% 12%, 100% 9%, 89% 28%, 96% 49%, 74% 55%, 64% 86%, 46% 65%, 29% 81%, 18% 56%, 2% 50%); }
.ls-map-africa { width: 18%; height: 42%; left: 49%; top: 38%; clip-path: polygon(7% 0, 87% 5%, 100% 27%, 72% 79%, 46% 100%, 25% 70%, 0 23%); }
.ls-map-australia { width: 14%; height: 16%; right: 7%; bottom: 15%; clip-path: polygon(4% 25%, 28% 0, 86% 12%, 100% 67%, 67% 100%, 8% 78%); }
.ls-map-point { min-width: 44px; min-height: 44px; padding: 0; position: absolute; z-index: 3; transform: translate(-50%,-50%); border: 0; background: transparent; color: #fff; cursor: pointer; }
.ls-map-point > span { width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid #061b3c; border-radius: 50%; background: #76e3dd; color: var(--ls-navy); box-shadow: 0 0 0 5px rgba(118,227,221,.12); font-size: 11px; font-weight: 900; transition: transform .2s ease-out, background .2s ease-out, box-shadow .2s ease-out; }
.ls-map-point > strong { width: max-content; max-width: 125px; padding: 6px 8px; position: absolute; left: 50%; top: 38px; transform: translateX(-50%); border-radius: 8px; background: rgba(3,19,43,.88); color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.2; font-weight: 800; opacity: 0; pointer-events: none; transition: opacity .18s ease-out, transform .18s ease-out; }
.ls-map-point:hover > span, .ls-map-point:focus-visible > span, .ls-map-point.is-active > span { transform: scale(1.18); background: var(--ls-gold); box-shadow: 0 0 0 9px rgba(240,169,31,.13), 0 0 28px rgba(240,169,31,.4); }
.ls-map-point:hover > strong, .ls-map-point:focus-visible > strong, .ls-map-point.is-active > strong { opacity: 1; transform: translate(-50%,4px); }
.ls-map-legend { position: absolute; left: 20px; bottom: 18px; display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.62); font-size: 12px; }
.ls-map-legend i { width: 9px; height: 9px; border-radius: 50%; background: #76e3dd; box-shadow: 0 0 0 5px rgba(118,227,221,.1); }
.ls-map-note { margin: 11px 0 0; color: rgba(255,255,255,.52); font-size: 12px; }
.ls-selected { min-height: 620px; padding: 34px; display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: var(--ls-gold); color: var(--ls-navy); box-shadow: 0 28px 70px rgba(0,0,0,.24); animation: ls-panel-in .32s ease-out both; }
.ls-selected-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.ls-selected-top > span { font: 500 47px/.8 Georgia, serif; }
.ls-selected-top > div { display: grid; gap: 7px; text-align: right; }
.ls-selected-top small { font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.ls-selected-top strong { color: rgba(6,27,60,.68); font: 700 12px ui-monospace, SFMono-Regular, Consolas, monospace; }
.ls-selected-basin { margin: 52px 0 8px; color: #224558; font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.ls-selected h3 { margin: 0; font: 500 clamp(42px,4vw,58px)/.95 Georgia, serif; letter-spacing: -.04em; }
.ls-selected-country { margin: 13px 0 23px; color: #38566a; font-size: 13px; font-weight: 800; }
.ls-selected-headline { margin: 0 0 15px; color: var(--ls-navy); font: 500 21px/1.4 Georgia, serif; }
.ls-selected > p:not(.ls-selected-basin):not(.ls-selected-country):not(.ls-selected-headline) { margin: 0; color: #38566a; line-height: 1.7; }
.ls-selected-legacy { margin-top: 22px; padding-top: 19px; border-top: 1px solid rgba(6,27,60,.2); }
.ls-selected-legacy small { font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.ls-selected-legacy p { margin: 8px 0 0; color: #304f63; font-size: 14px; line-height: 1.6; }
.ls-selected > a { min-height: 48px; margin-top: auto; padding-top: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; border-top: 1px solid rgba(6,27,60,.2); font-size: 12px; font-weight: 900; }
.ls-selected > a span { font-size: 19px; }
.ls-timeline { margin-top: 34px; padding-bottom: 14px; display: flex; overflow-x: auto; scrollbar-color: rgba(118,227,221,.45) transparent; }
.ls-timeline button { min-width: 190px; min-height: 126px; padding: 0 18px 18px; position: relative; flex: 1 0 190px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; border: 0; border-top: 1px solid rgba(255,255,255,.2); background: transparent; color: rgba(255,255,255,.62); cursor: pointer; }
.ls-timeline button i { width: 11px; height: 11px; margin: -6px 0 28px; border: 3px solid var(--ls-navy); border-radius: 50%; background: rgba(255,255,255,.48); box-shadow: 0 0 0 3px rgba(255,255,255,.15); }
.ls-timeline button span { margin-bottom: 9px; font-size: 11px; }
.ls-timeline button strong { color: #fff; font: 500 21px Georgia, serif; }
.ls-timeline button:hover i, .ls-timeline button.is-active i { background: var(--ls-gold); box-shadow: 0 0 0 6px rgba(240,169,31,.13); }
.ls-timeline button.is-active span { color: #76e3dd; }
.ls-mobile-route-picker { display: none; }

.ls-cities { padding: 126px 0; background: var(--ls-paper); }
.ls-city-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.ls-city-card { min-height: 540px; padding: 30px; display: flex; flex-direction: column; border: 1px solid var(--ls-line); border-radius: 20px; background: #fff; transition: transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s cubic-bezier(.2,.8,.2,1), border-color .24s ease-out; }
.ls-city-card:hover { transform: translateY(-7px); border-color: rgba(10,168,165,.5); box-shadow: 0 22px 70px rgba(5,23,52,.12); }
.ls-city-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.ls-city-card-top span { color: var(--ls-teal); font: 500 27px Georgia, serif; }
.ls-city-card-top small { color: var(--ls-muted); font-size: 11px; font-weight: 900; text-align: right; text-transform: uppercase; }
.ls-city-basin { margin: 54px 0 8px !important; color: #087f7d !important; font-size: 11px !important; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.ls-city-card h3 { margin: 0; color: var(--ls-navy); font: 500 39px/.98 Georgia, serif; letter-spacing: -.03em; }
.ls-city-period { margin: 10px 0 20px !important; color: var(--ls-muted) !important; font-size: 12px; font-weight: 800; }
.ls-city-card > p { margin: 0; color: var(--ls-muted); line-height: 1.7; }
.ls-city-shadow { margin-top: 24px; padding: 18px; border-left: 3px solid var(--ls-coral); background: #f8f1e7; }
.ls-city-shadow small { color: #9e302d; font-size: 11px; font-weight: 900; letter-spacing: .11em; }
.ls-city-shadow p { margin: 8px 0 0; color: #4d5d6c; font-size: 13px; line-height: 1.55; }
.ls-city-actions { min-height: 48px; margin-top: auto; padding-top: 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; border-top: 1px solid var(--ls-line); }
.ls-city-actions button, .ls-city-actions a { min-height: 44px; padding: 0; display: inline-flex; align-items: center; gap: 14px; border: 0; background: transparent; color: var(--ls-navy); cursor: pointer; font-size: 12px; font-weight: 900; }
.ls-city-actions a { color: #087f7d; }

.ls-sources { padding: 118px 0; background: radial-gradient(circle at 12% 84%, rgba(10,168,165,.15), transparent 29%), var(--ls-navy); color: #fff; }
.ls-sources-grid { display: grid; grid-template-columns: 1fr .82fr; gap: clamp(60px,9vw,140px); align-items: start; }
.ls-sources h2 { margin: 0; font: 500 clamp(48px,5.3vw,75px)/.95 Georgia, serif; letter-spacing: -.045em; }
.ls-sources h2 em { color: #76e3dd; font-weight: 400; }
.ls-sources-grid > div:last-child { padding-top: 45px; }
.ls-sources-grid > div:last-child p { margin: 0 0 18px; color: rgba(255,255,255,.66); font-size: 16px; line-height: 1.75; }
.ls-sources-grid a { min-height: 48px; margin-top: 26px; display: inline-flex; align-items: center; gap: 22px; color: var(--ls-gold); font-size: 13px; font-weight: 900; }
.ls-sources-grid a span { font-size: 20px; }

.ls-closing { padding: 125px 0; background: var(--ls-cream); }
.ls-closing .shell { display: grid; justify-items: center; text-align: center; }
.ls-closing h2 { margin: 0; color: var(--ls-navy); font: 500 clamp(55px,7vw,98px)/.88 Georgia, serif; letter-spacing: -.06em; }
.ls-closing h2 em { color: #087f7d; font-weight: 400; }
.ls-closing > div > p:not(.ls-kicker) { max-width: 690px; margin: 28px auto 0; color: var(--ls-muted); font-size: 17px; line-height: 1.7; }
.ls-closing > div > div { margin-top: 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ls-closing a { min-height: 50px; padding: 0 20px; display: inline-flex; align-items: center; border: 1px solid var(--ls-navy); border-radius: 999px; color: var(--ls-navy); font-size: 13px; font-weight: 900; }
.ls-closing a:first-child { background: var(--ls-navy); color: #fff; }

@keyframes ls-compass-turn { to { transform: rotate(360deg); } }
@keyframes ls-wave { to { transform: translateY(-10px) scaleX(1.03); } }
@keyframes ls-panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 1080px) {
  .ls-hero-layout { grid-template-columns: 1fr 1fr; gap: 34px; }
  .ls-hero h1 { font-size: clamp(68px,9vw,92px); }
  .ls-chart-card { width: 46%; }
  .ls-chart-card strong { font-size: 17px; }
  .ls-reading-grid { grid-template-columns: 1fr 1fr; }
  .ls-atlas-grid { grid-template-columns: 1fr; }
  .ls-selected { min-height: 520px; }
  .ls-city-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .ls-hero { min-height: 0; }
  .ls-hero-layout { min-height: 0; padding: 74px 0 100px; grid-template-columns: 1fr; }
  .ls-hero-copy { max-width: 680px; }
  .ls-hero h1 { font-size: clamp(70px,15vw,104px); }
  .ls-hero-chart { min-height: 520px; }
  .ls-hero-compass { width: 120vw; right: -55vw; top: -22vw; opacity: .7; }
  .ls-section-heading, .ls-sources-grid { grid-template-columns: 1fr; gap: 28px; }
  .ls-reading, .ls-atlas, .ls-cities, .ls-sources, .ls-closing { padding: 86px 0; }
  .ls-map { min-height: 520px; }
  .ls-map-point > strong { display: none; }
  .ls-city-card { min-height: 510px; }
  .ls-sources-grid > div:last-child { padding-top: 0; }
}

@media (max-width: 560px) {
  .ls-kicker { font-size: 12px; line-height: 1.5; }
  .ls-hero-layout { padding-top: 60px; }
  .ls-hero h1 { font-size: clamp(63px,18vw,82px); }
  .ls-hero-lede { font-size: 17px; }
  .ls-hero-actions { flex-direction: column; }
  .ls-hero-actions a { width: 100%; }
  .ls-hero-facts { gap: 12px; }
  .ls-hero-facts strong { font-size: 27px; }
  .ls-hero-facts span { font-size: 11px; }
  .ls-hero-chart { min-height: 500px; }
  .ls-chart-ring { width: 220px; }
  .ls-chart-card { width: 47%; min-height: 108px; padding: 13px; }
  .ls-chart-card span { font-size: 11px; }
  .ls-chart-card strong { font-size: 15px; }
  .ls-hero-chart > p { width: 175px; font-size: 11px; }
  .ls-section-heading { margin-bottom: 38px; }
  .ls-section-heading h2 { font-size: 44px; }
  .ls-section-heading > p { font-size: 16px; }
  .ls-reading-grid, .ls-city-grid { grid-template-columns: 1fr; }
  .ls-reading-grid article { min-height: 260px; }
  .ls-reading-grid h3 { margin-top: 48px; }
  .ls-era-filter { width: 100vw; margin-left: calc(50% - 50vw); padding: 0 16px 8px; }
  .ls-era-filter > span { margin-left: 6px; }
  .ls-map { min-height: 450px; border-radius: 18px; }
  .ls-map-point { min-width: 44px; min-height: 44px; }
  .ls-map-point > span { width: 29px; height: 29px; font-size: 10px; }
  .ls-map-legend { left: 13px; bottom: 12px; }
  .ls-selected { min-height: 570px; padding: 25px; border-radius: 18px; }
  .ls-selected-basin { margin-top: 42px; }
  .ls-selected h3 { font-size: 45px; }
  .ls-timeline { width: 100vw; margin-left: calc(50% - 50vw); padding-inline: 16px; }
  .ls-city-card { min-height: 0; padding: 25px; }
  .ls-city-basin { margin-top: 44px !important; }
  .ls-city-shadow { margin-bottom: 24px; }
  .ls-closing h2 { font-size: 54px; }
  .ls-closing > div > div { width: 100%; flex-direction: column; }
  .ls-closing a { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ls-hero-compass, .ls-hero-horizon i { animation: none; }
  .ls-page *, .ls-page *::before, .ls-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* 2.5D tarihî deniz atlası */
.ls-atlas-stage { position: relative; }
.ls-atlas-stage:fullscreen { padding: 18px; overflow: auto; background: #031126; }
.ls-atlas-stage:fullscreen .ls-atlas-grid { min-height: calc(100vh - 36px); grid-template-columns: minmax(0,1fr) minmax(330px,390px); }
.ls-atlas-stage:fullscreen .ls-map,
.ls-atlas-stage:fullscreen .ls-selected { min-height: calc(100vh - 36px); height: calc(100vh - 36px); }
.ls-atlas-stage:fullscreen .ls-map { border-radius: 16px; touch-action: none; }
.ls-atlas-stage:fullscreen .ls-map-note { display: none; }

.ls-map {
  min-height: 720px;
  isolation: isolate;
  cursor: grab;
  touch-action: pan-y;
  background:
    radial-gradient(circle at 68% 46%, rgba(17,151,155,.25), transparent 28%),
    radial-gradient(circle at 21% 72%, rgba(6,71,90,.7), transparent 31%),
    linear-gradient(155deg,#03152d 0%,#063653 54%,#05253e 100%);
  box-shadow: inset 0 0 90px rgba(0,0,0,.4), 0 28px 70px rgba(0,0,0,.22);
}
.ls-map.is-dragging { cursor: grabbing; }
.ls-map::before,
.ls-map::after { display: none; }
.ls-map-engraving { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .22; mix-blend-mode: screen; background-image: radial-gradient(circle,rgba(242,216,150,.34) 0 1px,transparent 1.4px),repeating-linear-gradient(12deg,transparent 0 18px,rgba(255,255,255,.04) 19px 20px); background-size: 24px 24px,auto; }
.ls-map-vignette { position: absolute; inset: 0; z-index: 8; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 110px rgba(0,0,0,.68), inset 0 0 0 10px rgba(4,16,31,.24); }
.ls-map-camera { width: 110%; aspect-ratio: 5 / 3; position: absolute; z-index: 2; left: -5%; top: 50%; transform: translate(var(--ls-map-pan-x),calc(-50% + var(--ls-map-pan-y))) scale(var(--ls-map-zoom)); transform-origin: 50% 50%; transition: transform 360ms cubic-bezier(.2,.8,.2,1); will-change: transform; }
.ls-map.is-dragging .ls-map-camera { transition: none; }
.ls-map-art { width: 100%; height: 100%; display: block; overflow: hidden; }

.ls-sea-lines path { fill: none; stroke: #8be0d6; stroke-width: 1.2; stroke-dasharray: 5 13; opacity: .25; animation: ls-current-flow 18s linear infinite; }
.ls-sea-lines path:nth-child(2) { animation-duration: 24s; animation-direction: reverse; opacity: .18; }
.ls-sea-lines path:nth-child(3) { animation-duration: 28s; opacity: .14; }
.ls-landmass path { fill: url(#ls-land-edge); stroke: #281b16; stroke-width: 4; }
.ls-land-top path { fill: url(#ls-land); stroke: #5e4028; stroke-width: 3; stroke-linejoin: round; }
.ls-land-hatch path { fill: url(#ls-hatch); stroke: rgba(255,240,199,.42); stroke-width: 1; }
.ls-mountains path { fill: rgba(77,52,33,.28); stroke: #4b3323; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ls-rivers path { fill: none; stroke: #267c88; stroke-width: 3; stroke-linecap: round; opacity: .68; }
.ls-compass-rose { fill: none; stroke: rgba(239,210,143,.48); stroke-width: 1.5; }
.ls-compass-rose path { fill: rgba(240,169,31,.32); stroke: #efcd83; }
.ls-compass-rose text { fill: #efcd83; font: 700 19px Georgia,serif; text-anchor: middle; }
.ls-active-route-glow { fill: none; stroke: rgba(10,168,165,.44); stroke-width: 11; opacity: .68; }
.ls-active-route { fill: none; stroke: #f5c656; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 10 10; animation: ls-route-dash 9s linear infinite; }
.ls-route-vessel { fill: #f7e4ad; stroke: #2e2019; stroke-width: 1.5; filter: drop-shadow(0 5px 5px rgba(0,0,0,.55)); }
.ls-era-fog { opacity: .14; pointer-events: none; transition: opacity .6s ease; }
.ls-map:not(.ls-map-era-tumu) .ls-era-fog { opacity: .34; }

.ls-map-toolbar { min-height: 44px; position: absolute; z-index: 20; left: 16px; right: 16px; top: 16px; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.ls-map-toolbar > div { height: 44px; display: inline-flex; align-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(3,17,38,.82); backdrop-filter: blur(12px); pointer-events: auto; }
.ls-map-toolbar button,
.ls-map-toolbar span { min-width: 44px; height: 44px; padding: 0 13px; display: inline-grid; place-items: center; border: 0; background: rgba(3,17,38,.82); color: #fff; cursor: pointer; font: 800 12px Arial,sans-serif; pointer-events: auto; }
.ls-map-toolbar > div button { padding: 0; background: transparent; font-size: 21px; }
.ls-map-toolbar > div span { min-width: 54px; padding: 0 5px; background: transparent; color: #8ce6df; font-size: 11px; }
.ls-map-toolbar > button { border: 1px solid rgba(255,255,255,.22); border-radius: 999px; backdrop-filter: blur(12px); }
.ls-map-toolbar > .ls-map-fullscreen { margin-left: auto; color: var(--ls-navy); background: var(--ls-gold); border-color: var(--ls-gold); }
.ls-map-toolbar > .ls-map-reset:last-child { margin-left: auto; }
.ls-map-toolbar button:hover:not(:disabled),
.ls-map-toolbar button:focus-visible { background: #fff; color: var(--ls-navy); }
.ls-map-toolbar button:disabled { opacity: .35; cursor: not-allowed; }

.ls-map-point { width: 76px; min-width: 76px; height: 76px; min-height: 76px; z-index: 7; transform: translate(-50%,-72%); display: grid; place-items: center; opacity: 1; filter: drop-shadow(0 9px 7px rgba(0,0,0,.58)); transition: opacity .45s ease,filter .45s ease,transform .25s ease; }
.ls-map-point:hover,
.ls-map-point:focus-visible,
.ls-map-point.is-active { z-index: 12; transform: translate(-50%,-79%) scale(1.12); outline: none; }
.ls-map-point.is-dormant { opacity: .11; filter: grayscale(1) blur(1.2px); pointer-events: none; }
.ls-map-point > .ls-settlement-icon { width: 52px; height: 42px; position: relative; display: block; border: 0; border-radius: 0; background: transparent; color: inherit; box-shadow: none; transition: none; }
.ls-map-point > .ls-settlement-icon::before { content: ""; width: 58px; height: 14px; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); border: 2px solid #3b281d; border-radius: 50%; background: #b47e3f; box-shadow: inset 0 3px 0 rgba(255,230,158,.55),0 7px 0 rgba(42,29,23,.65); }
.ls-map-point > .ls-settlement-icon i,
.ls-map-point > .ls-settlement-icon b,
.ls-map-point > .ls-settlement-icon em { position: absolute; display: block; border: 2px solid #3b281d; background: #e6c274; box-shadow: inset 2px 2px 0 rgba(255,243,190,.5); }
.ls-map-point > .ls-settlement-icon i { width: 18px; height: 27px; left: 17px; bottom: 9px; }
.ls-map-point > .ls-settlement-icon b { width: 15px; height: 20px; left: 2px; bottom: 8px; }
.ls-map-point > .ls-settlement-icon em { width: 15px; height: 17px; right: 1px; bottom: 8px; }
.ls-map-point > small { width: 22px; height: 22px; position: absolute; right: 1px; top: 2px; display: grid; place-items: center; border: 2px solid #3b281d; border-radius: 50%; background: var(--ls-gold); color: var(--ls-navy); font-size: 8px; font-weight: 900; }
.ls-map-point > strong { width: max-content; max-width: 126px; padding: 5px 8px; left: calc(50% + var(--ls-label-x,0px)); top: calc(59px + var(--ls-label-y,0px)); opacity: .78; transform: translateX(-50%); border: 1px solid rgba(245,219,156,.48); border-radius: 7px; background: rgba(40,27,21,.91); color: #f8e9be; font: 800 11px/1.2 Arial,sans-serif; letter-spacing: .01em; box-shadow: 0 7px 12px rgba(0,0,0,.28); }
.ls-map-point:hover > strong,
.ls-map-point:focus-visible > strong,
.ls-map-point.is-active > strong { opacity: 1; transform: translate(-50%,4px); background: #f2cd75; color: #2c201a; }
.ls-map-point.is-active > .ls-settlement-icon { filter: drop-shadow(0 0 10px rgba(240,169,31,.95)); }
.ls-settlement-lighthouse > .ls-settlement-icon i { width: 13px; left: 20px; clip-path: polygon(27% 0,73% 0,100% 100%,0 100%); }
.ls-settlement-lighthouse > .ls-settlement-icon i::after { content:""; width:34px; height:7px; position:absolute; left:50%; top:-6px; transform:translateX(-50%); border:2px solid #3b281d; background:#f0a91f; }
.ls-settlement-fort > .ls-settlement-icon i { width: 32px; height: 22px; left: 10px; clip-path: polygon(0 0,22% 0,22% 25%,45% 25%,45% 0,67% 0,67% 25%,100% 25%,100% 100%,0 100%); }
.ls-settlement-dome > .ls-settlement-icon i { width: 28px; height: 22px; left: 12px; border-radius: 50% 50% 4px 4px; }
.ls-settlement-dome > .ls-settlement-icon b { width: 6px; height: 31px; left: 3px; }
.ls-settlement-warehouse > .ls-settlement-icon i { width: 38px; height: 22px; left: 7px; clip-path: polygon(0 27%,50% 0,100% 27%,100% 100%,0 100%); }
.ls-settlement-harbor > .ls-settlement-icon i { width: 29px; height: 18px; left: 12px; bottom: 7px; clip-path: polygon(0 0,100% 0,82% 100%,18% 100%); }
.ls-settlement-harbor > .ls-settlement-icon b { width: 4px; height: 29px; left: 26px; bottom: 22px; }
.ls-settlement-harbor > .ls-settlement-icon em { width: 20px; height: 15px; right: 6px; bottom: 31px; clip-path: polygon(0 0,100% 50%,0 100%); background: #d65b45; }

.ls-map-era-seal { max-width: 235px; padding: 12px 15px; position: absolute; z-index: 15; left: 18px; bottom: 46px; display: grid; gap: 4px; border: 1px solid rgba(242,216,150,.38); border-radius: 10px; background: rgba(43,29,22,.83); color: #f7e6b6; backdrop-filter: blur(10px); }
.ls-map-era-seal small { color: #79ddd6; font-size: 8px; font-weight: 900; letter-spacing: .15em; }
.ls-map-era-seal strong { font: 500 15px Georgia,serif; }
.ls-map-legend { z-index: 15; left: auto; right: 18px; bottom: 18px; }
.ls-map-legend span { width: 9px; height: 9px; margin-left: 9px; border-radius: 50%; background: rgba(255,255,255,.22); filter: blur(1px); }

.ls-selected { min-height: 720px; max-height: 760px; overflow: auto; scrollbar-color: rgba(6,27,60,.34) transparent; }
.ls-next-port { min-height: 66px; margin-top: 20px; padding: 13px 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; text-align: left; border: 0; border-top: 1px solid rgba(6,27,60,.2); border-bottom: 1px solid rgba(6,27,60,.2); background: transparent; color: var(--ls-navy); cursor: pointer; }
.ls-next-port span { grid-column: 1; color: rgba(6,27,60,.64); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.ls-next-port strong { grid-column: 1; font: 500 21px Georgia,serif; }
.ls-next-port i { grid-column: 2; grid-row: 1 / 3; font-style: normal; font-size: 25px; transition: transform .18s ease; }
.ls-next-port:hover i,
.ls-next-port:focus-visible i { transform: translateX(5px); }
.ls-selected > a { margin-top: 16px; }

.ls-landscape-strip { min-height: 62px; margin-bottom: 13px; padding: 10px 14px; display: flex; align-items: center; gap: 14px; border: 1px solid rgba(240,169,31,.38); border-radius: 16px; background: rgba(240,169,31,.1); color: #fff; }
.ls-landscape-strip p { margin: 0; color: rgba(255,255,255,.73); font-size: 13px; line-height: 1.45; }
.ls-landscape-strip strong { color: #f3c45b; }
.ls-phone-turn { width: 42px; height: 42px; position: relative; flex: 0 0 auto; display: grid; place-items: center; }
.ls-phone-turn::before { content:""; width: 19px; height: 32px; border: 2px solid currentColor; border-radius: 5px; color: #f3c45b; box-shadow: inset 0 -4px 0 rgba(240,169,31,.2); animation: ls-phone-rotate 2.8s ease-in-out infinite; }
.ls-phone-turn i { width: 40px; height: 25px; position: absolute; border: 1px dashed rgba(118,227,221,.65); border-color: #76e3dd transparent transparent; border-radius: 50%; transform: rotate(20deg); }
.ls-phone-turn i::after { content:""; width: 7px; height: 7px; position:absolute; right:1px; top:0; border-top:2px solid #76e3dd; border-right:2px solid #76e3dd; transform:rotate(28deg); }
.ls-orientation-suggestion { width: min(560px,calc(100% - 26px)); padding: 22px; position: absolute; z-index: 50; left: 50%; top: 22px; transform: translateX(-50%); display: grid; grid-template-columns: 88px 1fr; gap: 18px; border: 1px solid rgba(244,222,166,.44); border-radius: 20px; background: rgba(3,17,38,.95); color: #fff; box-shadow: 0 28px 80px rgba(0,0,0,.55); backdrop-filter: blur(18px); }
.ls-orientation-close { width: 44px; height: 44px; position: absolute; right: 8px; top: 8px; border: 0; background: transparent; color: rgba(255,255,255,.7); cursor: pointer; font-size: 27px; }
.ls-phone-turn-large { width: 78px; height: 78px; }
.ls-phone-turn-large::before { width: 31px; height: 54px; border-radius: 7px; }
.ls-phone-turn-large i { width: 70px; height: 45px; }
.ls-orientation-suggestion small { color: #79ddd6; font-size: 9px; font-weight: 900; letter-spacing: .15em; }
.ls-orientation-suggestion h3 { margin: 8px 38px 7px 0; color: #fff; font: 500 26px/1.05 Georgia,serif; }
.ls-orientation-suggestion p { margin: 0; color: rgba(255,255,255,.68); font-size: 13px; line-height: 1.55; }
.ls-orientation-suggestion div > button { min-height: 44px; margin-top: 14px; padding: 0 16px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: transparent; color: #fff; cursor: pointer; font-weight: 800; }
.ls-orientation-suggestion div > button:hover,
.ls-orientation-suggestion div > button:focus-visible { border-color: var(--ls-gold); background: var(--ls-gold); color: var(--ls-navy); }

@keyframes ls-current-flow { to { stroke-dashoffset: -180; } }
@keyframes ls-route-dash { to { stroke-dashoffset: -160; } }
@keyframes ls-phone-rotate { 0%,30%,100% { transform: rotate(0); } 55%,82% { transform: rotate(90deg); } }

@media (max-width: 1080px) {
  .ls-map { min-height: 640px; }
  .ls-selected { min-height: 590px; max-height: none; }
}

@media (max-width: 900px) {
  .ls-atlas-stage:fullscreen { padding: 10px; }
  .ls-atlas-stage:fullscreen .ls-atlas-grid { grid-template-columns: 1fr; }
  .ls-atlas-stage:fullscreen .ls-map,
  .ls-atlas-stage:fullscreen .ls-selected { min-height: calc(100vh - 20px); height: calc(100vh - 20px); }
  .ls-map-toolbar > .ls-map-reset { display: none; }
  .ls-map-point > strong { display: block; }
  .ls-map.is-compact .ls-map-point { width: 44px; min-width: 44px; height: 44px; min-height: 44px; transform: translate(-50%,-50%); filter: none; }
  .ls-map.is-compact .ls-map-point:not(.is-active):hover,
  .ls-map.is-compact .ls-map-point:not(.is-active):focus-visible { z-index: 11; transform: translate(-50%,-50%); }
  .ls-map.is-compact .ls-map-point:not(.is-active) > .ls-settlement-icon,
  .ls-map.is-compact .ls-map-point:not(.is-active) > strong { display: none; }
  .ls-map.is-compact .ls-map-point:not(.is-active) > small { width: 24px; height: 24px; inset: 50% auto auto 50%; transform: translate(-50%,-50%); border-color: #3b281d; background: #f0a91f; box-shadow: 0 0 0 4px rgba(240,169,31,.14), 0 5px 10px rgba(0,0,0,.35); font-size: 8px; }
  .ls-map.is-compact .ls-map-point:not(.is-active):focus-visible > small { outline: 2px solid #fff; outline-offset: 3px; }
  .ls-map.is-compact .ls-map-point.is-active { width: 64px; min-width: 64px; height: 64px; min-height: 64px; z-index: 14; transform: translate(-50%,-70%); }
  .ls-map.is-compact .ls-map-point.is-active > .ls-settlement-icon { transform: scale(.84); }
  .ls-map.is-compact .ls-map-point.is-active > small { right: 1px; top: 1px; }
  .ls-map.is-compact .ls-map-point.is-active > strong { max-width: 105px; top: 51px; padding: 5px 7px; font-size: 9px; }
  .ls-map.is-compact .ls-map-point.is-dormant { display: none; }
  .ls-map.is-compact .ls-map-era-seal { bottom: 10px; padding: 7px 10px; }
  .ls-map.is-compact .ls-map-era-seal small { display: none; }
  .ls-map.is-compact .ls-map-era-seal strong { font-size: 11px; }
  .ls-map.is-compact .ls-map-legend { display: none; }
  .ls-map.is-compact .ls-map-engraving { opacity: .12; mix-blend-mode: normal; }
  .ls-map.is-compact .ls-active-route-glow { stroke-width: 7; opacity: .42; }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 620px) {
  .ls-atlas-stage .ls-atlas-grid { grid-template-columns: minmax(0,1fr) minmax(280px,34vw); }
  .ls-atlas-stage .ls-map,
  .ls-atlas-stage .ls-selected { min-height: 84vh; height: 84vh; }
  .ls-atlas-stage .ls-selected { padding: 24px; }
  .ls-atlas-stage .ls-selected-basin { margin-top: 30px; }
  .ls-atlas-stage .ls-selected h3 { font-size: 42px; }
  .ls-orientation-suggestion { display: none; }
}

@media (max-width: 560px) {
  .ls-atlas { padding-bottom: 56px; }
  .ls-map { min-height: 520px; }
  .ls-map-toolbar { left: 9px; right: 9px; top: 9px; gap: 5px; }
  .ls-map-toolbar > button { padding-inline: 10px; font-size: 10px; }
  .ls-map-toolbar > .ls-map-reset { display: none; }
  .ls-map-point { width: 60px; min-width: 60px; height: 65px; min-height: 65px; }
  .ls-map-point > .ls-settlement-icon { transform: scale(.82); }
  .ls-map-point > strong { max-width: 90px; top: 52px; padding: 4px 6px; font-size: 9px; }
  .ls-map-point > small { right: 0; top: 5px; }
  .ls-map-era-seal { left: 10px; bottom: 43px; max-width: 190px; padding: 9px 11px; }
  .ls-map-era-seal strong { font-size: 12px; }
  .ls-map-legend { right: 10px; bottom: 12px; font-size: 10px; }
  .ls-map-legend span,
  .ls-map-legend span + * { display: none; }
  .ls-orientation-suggestion { top: 10px; padding: 19px; grid-template-columns: 62px 1fr; gap: 12px; }
  .ls-phone-turn-large { width: 58px; height: 62px; }
  .ls-phone-turn-large::before { width: 25px; height: 44px; }
  .ls-phone-turn-large i { width: 55px; height: 36px; }
  .ls-orientation-suggestion h3 { font-size: 22px; }
  .ls-selected { min-height: 0; max-height: none; padding: 24px; overflow: visible; }
  .ls-selected-basin { margin-top: 34px; }
  .ls-next-port span { font-size: 12px; line-height: 1.3; }
  .ls-next-port strong { font-size: 24px; }
  .ls-selected > a { min-height: 52px; font-size: 15px; line-height: 1.35; }
  .ls-timeline { display: none; }
  .ls-mobile-route-picker { margin-top: 16px; padding: 18px; display: grid; gap: 14px; border: 1px solid rgba(118,227,221,.25); border-radius: 18px; background: rgba(255,255,255,.055); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
  .ls-mobile-route-picker > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .ls-mobile-route-picker > div span { color: #76e3dd; font-size: 12px; font-weight: 900; letter-spacing: .14em; }
  .ls-mobile-route-picker > div strong { color: var(--ls-gold); font: 500 20px Georgia,serif; }
  .ls-mobile-route-picker label { display: grid; gap: 8px; }
  .ls-mobile-route-picker label > span { color: rgba(255,255,255,.68); font-size: 12px; font-weight: 800; }
  .ls-mobile-route-picker select { width: 100%; min-height: 52px; padding: 0 42px 0 15px; border: 1px solid rgba(255,255,255,.28); border-radius: 12px; background-color: #0b3451; color: #fff; font: 800 16px/1.2 Arial,sans-serif; }
  .ls-mobile-route-picker select:focus-visible { outline: 3px solid var(--ls-gold); outline-offset: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .ls-sea-lines path,
  .ls-active-route,
  .ls-phone-turn::before { animation: none; }
  .ls-route-vessel { display: none; }
  .ls-map-camera { transition: none; }
}