.greek-map-section {
  scroll-margin-top: 132px;
  --greek-map-place: #a43f2d;
  --greek-map-route: #176d78;
  --greek-map-zone: #9a741f;
  --greek-map-coast: #36585b;
  --greek-map-line: #496769;
  --greek-map-label: #263f40;
  --greek-map-route-halo: color-mix(in srgb, var(--greek-map-land, #d7c395) 82%, #fff7e7);
  --greek-map-conflict: #745080;
  --greek-map-capital: color-mix(in srgb, var(--greek-map-place) 72%, #2f2a24);
  --greek-map-port: color-mix(in srgb, var(--greek-map-route) 78%, #ffffff);
  --greek-map-sanctuary: color-mix(in srgb, var(--greek-map-zone) 76%, #3d4d45);
  --greek-map-writing: color-mix(in srgb, var(--greek-map-place) 48%, #315f73);
  --greek-map-settlement: var(--greek-map-place);
  --greek-map-marker-ring: color-mix(in srgb, var(--greek-map-land, #d7c395) 76%, #fffdf5);
  --greek-map-accent: var(--greek-era-accent, var(--accent));
  --greek-map-active: var(--greek-map-accent);
  --greek-map-text-accent: color-mix(in srgb, var(--greek-map-active) 48%, #241f1a);
  position: relative;
  padding-block: clamp(56px, 7vw, 96px);
  border-block: 1px solid var(--line);
  background: color-mix(in srgb, var(--map-land) 30%, var(--surface));
  color: var(--ink);
}

html[data-theme="dark"] .greek-map-section {
  --greek-map-text-accent: color-mix(in srgb, var(--greek-map-active) 58%, #ffffff);
  --greek-map-route-halo: color-mix(in srgb, var(--greek-map-land, #d7c395) 66%, #fff4d8);
}

.greek-map-heading {
  max-width: 780px;
  margin-bottom: 30px;
}

.greek-map-heading h2 {
  max-width: 680px;
  margin: 8px 0 14px;
  font-size: 56px;
  line-height: 0.98;
}

.greek-map-heading > p:last-child {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.timeline-row[data-greek-era-index] {
  --greek-map-text-accent: color-mix(in srgb, var(--greek-map-accent, var(--accent)) 48%, #241f1a);
  position: relative;
  scroll-margin-top: calc(var(--header-height) + 58px);
  cursor: pointer;
  box-shadow: inset 4px 0 0 transparent;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

html[data-theme="dark"] .timeline-row[data-greek-era-index] {
  --greek-map-text-accent: color-mix(in srgb, var(--greek-map-accent, var(--accent)) 58%, #ffffff);
}

.timeline-row[data-greek-era-index]:hover {
  background: color-mix(in srgb, var(--greek-map-accent, var(--accent)) 6%, transparent);
}

.timeline-row[data-greek-era-index]:focus-visible {
  z-index: 1;
  outline: 3px solid var(--focus);
  outline-offset: -3px;
  background: color-mix(in srgb, var(--greek-map-accent, var(--accent)) 9%, var(--surface));
  box-shadow: inset 4px 0 0 var(--greek-map-accent, var(--accent));
}

.timeline-row[data-greek-era-index].is-map-active {
  background: color-mix(in srgb, var(--greek-map-accent, var(--accent)) 10%, var(--surface));
  box-shadow: inset 4px 0 0 var(--greek-map-accent, var(--accent));
}

.timeline-row[data-greek-era-index].is-map-active time {
  color: var(--greek-map-text-accent);
}

.greek-map-section,
.greek-map-section * {
  min-width: 0;
}

.greek-map-section h2,
.greek-map-section h3,
.greek-map-section .greek-map-era-title {
  font-family: "Hembhuvin Greek", Georgia, "Times New Roman", serif;
}

.greek-map-shell {
  display: grid;
  width: 100%;
  min-height: 620px;
  grid-template-columns: minmax(290px, 360px) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--map-line) 72%, var(--line));
  border-radius: 4px;
  background: var(--surface);
  box-shadow: 0 14px 34px rgba(25, 35, 31, 0.12);
}

.greek-map-panel {
  position: relative;
  z-index: 2;
  display: flex;
  max-height: 760px;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.greek-map-toolbar {
  display: grid;
  gap: 12px;
  padding: 20px 22px 18px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--map-land) 20%, var(--surface));
}

.greek-map-period-heading {
  display: grid;
  gap: 8px;
}

.greek-map-period-heading > * {
  margin: 0;
}

.greek-map-period-heading .greek-map-period-group {
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  line-height: 1.35;
  text-transform: uppercase;
}

.greek-map-period-heading .greek-map-date {
  color: var(--greek-map-text-accent);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.greek-map-period-heading h3 {
  color: var(--ink);
  font-size: 28px;
  line-height: 1.05;
}

.greek-map-period-heading #greek-map-summary {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}

.greek-map-period-heading .greek-map-caution {
  padding-left: 10px;
  border-left: 2px solid var(--greek-map-active);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.greek-map-period-heading .greek-map-language {
  display: grid;
  gap: 2px;
  padding-top: 7px;
  border-top: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.greek-map-language[hidden] {
  display: none;
}

.greek-map-language .greek-map-language-label {
  color: var(--greek-map-text-accent);
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.greek-map-language .greek-map-language-text {
  display: block;
}

.greek-map-slider-controls {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  gap: 9px;
  align-items: end;
}

.greek-map-slider-controls .icon-button {
  grid-column: auto;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
}

.greek-map-slider-wrap {
  display: grid;
  gap: 2px;
}

.greek-map-toolbar > * {
  margin: 0;
}

.greek-map-toolbar label,
.greek-map-toolbar .greek-map-toolbar-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
  text-transform: uppercase;
}

.greek-map-toolbar strong,
.greek-map-toolbar output {
  display: block;
  color: var(--ink);
  font-family: "Hembhuvin Greek", Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.greek-map-toolbar p,
.greek-map-toolbar small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

#greek-map-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.greek-map-toolbar input[type="range"] {
  width: 100%;
  height: 28px;
  margin: 0;
  accent-color: var(--greek-map-active);
  cursor: pointer;
}

.greek-map-toolbar button,
.greek-map-touch-gate,
.greek-map-touch-gate button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.greek-map-toolbar button:hover,
.greek-map-touch-gate:hover,
.greek-map-touch-gate button:hover {
  border-color: var(--greek-map-active);
  background: var(--surface-alt);
}

.greek-map-era-buttons {
  display: grid;
  gap: 1px;
  padding: 0;
  overflow-y: auto;
  border-bottom: 1px solid var(--line);
  background: var(--line);
  scrollbar-color: var(--map-line) transparent;
  scrollbar-width: thin;
  max-height: 250px;
}

.greek-map-era-button {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 68px;
  grid-template-columns: minmax(72px, 0.42fr) minmax(0, 1fr);
  grid-template-areas:
    "group group"
    "date label";
  gap: 3px 10px;
  align-items: center;
  padding: 8px 18px 9px 22px;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.greek-map-era-button::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: transparent;
  content: "";
}

.greek-map-era-button > span,
.greek-map-era-button > strong,
.greek-map-era-button > small {
  display: block;
  overflow-wrap: anywhere;
}

.greek-map-era-button .greek-map-era-button-group {
  grid-area: group;
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.greek-map-era-button .greek-map-era-button-date {
  grid-area: date;
  color: var(--greek-map-text-accent);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.greek-map-era-button .greek-map-era-button-label {
  grid-area: label;
  color: inherit;
  font-size: 12px;
  font-weight: 700;
}

.greek-map-era-button:hover {
  background: var(--surface-alt);
  color: var(--ink);
}

.greek-map-era-button[aria-current="step"],
.greek-map-era-button[aria-pressed="true"],
.greek-map-era-button.is-active {
  background: color-mix(in srgb, var(--greek-map-active) 10%, var(--surface));
  color: var(--ink);
}

.greek-map-era-button[aria-current="step"]::before,
.greek-map-era-button[aria-pressed="true"]::before,
.greek-map-era-button.is-active::before {
  background: var(--greek-map-active);
}

.greek-map-features {
  display: grid;
  align-content: start;
  gap: 1px;
  min-height: 116px;
  overflow-y: auto;
  background: var(--line);
  scrollbar-color: var(--map-line) transparent;
  scrollbar-width: thin;
  flex: 1 1 auto;
}

.greek-map-features:empty::before {
  padding: 18px 22px;
  background: var(--surface);
  color: var(--muted);
  content: "No mapped features for this period.";
  font-size: 12px;
}

.greek-map-feature {
  --feature-color: var(--greek-map-place);
  position: relative;
  display: grid;
  width: 100%;
  min-height: 52px;
  grid-template-columns: 13px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 9px 18px 9px 22px;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
}

button.greek-map-feature,
a.greek-map-feature {
  cursor: pointer;
}

.greek-map-feature::before {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 10px;
  height: 10px;
  border: 2px solid var(--feature-color);
  border-radius: 50%;
  background: color-mix(in srgb, var(--feature-color) 22%, var(--surface));
  content: "";
}

.greek-map-feature-button {
  grid-column: 2;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.greek-map-feature-kind {
  grid-column: 2;
  margin: 0;
}

.greek-map-feature[data-kind="route"] {
  --feature-color: var(--greek-map-route);
}

.greek-map-feature[data-kind="route"]::before {
  height: 0;
  border-width: 2px 0 0;
  border-radius: 0;
  background: transparent;
}

.greek-map-feature[data-kind="zone"],
.greek-map-feature[data-kind="region"],
.greek-map-feature[data-kind="polity"] {
  --feature-color: var(--greek-map-zone);
}

.greek-map-feature[data-kind="zone"]::before,
.greek-map-feature[data-kind="region"]::before,
.greek-map-feature[data-kind="polity"]::before {
  border-width: 1px;
  border-radius: 1px;
}

.greek-map-feature[data-role="capital"] {
  --feature-color: var(--greek-map-capital);
}

.greek-map-feature[data-role="capital"]::before {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--feature-color);
}

.greek-map-feature[data-role="port"] {
  --feature-color: var(--greek-map-port);
}

.greek-map-feature[data-role="port"]::before {
  border-bottom-width: 4px;
}

.greek-map-feature[data-role="sanctuary"] {
  --feature-color: var(--greek-map-sanctuary);
}

.greek-map-feature[data-role="sanctuary"]::before {
  border-radius: 1px;
  transform: rotate(45deg) scale(0.82);
}

.greek-map-feature[data-role="writing"] {
  --feature-color: var(--greek-map-writing);
}

.greek-map-feature[data-role="writing"]::before {
  border-radius: 1px;
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--feature-color) 55%, transparent);
}

.greek-map-feature[data-kind="battle"],
.greek-map-feature[data-kind="conflict"],
.greek-map-feature[data-role="conflict"] {
  --feature-color: var(--greek-map-conflict);
}

.greek-map-feature[data-kind="battle"]::before,
.greek-map-feature[data-kind="conflict"]::before,
.greek-map-feature[data-role="conflict"]::before {
  border-radius: 0;
  transform: rotate(45deg);
}

.greek-map-feature strong,
.greek-map-feature span,
.greek-map-feature small {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.greek-map-feature strong {
  font-size: 12px;
  line-height: 1.3;
}

.greek-map-feature span,
.greek-map-feature small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.greek-map-feature:hover,
.greek-map-feature[aria-current="true"],
.greek-map-feature[aria-pressed="true"],
.greek-map-feature.is-active {
  background: color-mix(in srgb, var(--feature-color) 9%, var(--surface));
}

.greek-map-point {
  --point-transform: none;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
}

.greek-map-point .greek-map-point-core {
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--greek-map-marker-ring);
  border-radius: 50%;
  background: var(--greek-map-marker-color, var(--greek-map-place));
  box-shadow: 0 1px 5px rgba(28, 31, 29, 0.4);
  transform: var(--point-transform) scale(1);
  transform-origin: center;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.greek-map-point .greek-map-point-label {
  position: absolute;
  top: 50%;
  left: calc(100% + 5px);
  display: block;
  max-width: 154px;
  padding: 3px 5px 2px;
  border: 1px solid color-mix(in srgb, var(--greek-map-coast) 24%, transparent);
  border-radius: 2px;
  background: color-mix(in srgb, var(--greek-map-land) 88%, transparent);
  color: var(--greek-map-label);
  font-family: "Hembhuvin Greek", Georgia, "Times New Roman", serif;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.15;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.36);
  white-space: nowrap;
  box-shadow: 0 2px 7px rgba(24, 44, 42, 0.1);
  transform: translateY(-50%);
  transform-origin: left center;
  transition: opacity 140ms ease, transform 140ms ease;
  pointer-events: none;
}

.greek-map-point.greek-map-label-left .greek-map-point-label {
  right: calc(100% + 5px);
  left: auto;
  transform-origin: right center;
}

.greek-map-point.greek-map-label-above .greek-map-point-label {
  top: auto;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  transform-origin: center bottom;
}

#greek-timeline-map.is-world-view .greek-map-label-tertiary .greek-map-point-label,
#greek-timeline-map.is-world-view .greek-map-label-secondary .greek-map-point-label,
#greek-timeline-map.is-regional-view .greek-map-label-secondary .greek-map-point-label,
#greek-timeline-map.is-regional-view .greek-map-label-tertiary .greek-map-point-label {
  opacity: 0;
}

.greek-map-point:hover .greek-map-point-label,
.greek-map-point:focus-visible .greek-map-point-label {
  z-index: 3;
  opacity: 1 !important;
}

.greek-map-point-label.is-label-collided,
.greek-map-zone-label span.is-label-collided,
.greek-map-physical-label span.is-label-collided {
  opacity: 0 !important;
}

.greek-map-point:hover .greek-map-point-label.is-label-collided,
.greek-map-point:focus-visible .greek-map-point-label.is-label-collided {
  opacity: 1 !important;
}

.greek-map-point:hover .greek-map-point-core,
.greek-map-point:focus-visible .greek-map-point-core {
  box-shadow: 0 2px 8px rgba(28, 31, 29, 0.52);
  transform: var(--point-transform) scale(1.2);
}

.greek-map-point-capital .greek-map-point-core {
  width: 11px;
  height: 11px;
  box-shadow:
    0 0 0 2px var(--greek-map-marker-ring),
    0 0 0 4px var(--greek-map-marker-color, var(--greek-map-capital)),
    0 2px 7px rgba(28, 31, 29, 0.42);
}

.greek-map-point-port .greek-map-point-core {
  border-bottom-width: 5px;
}

.greek-map-point-sanctuary {
  --point-transform: rotate(45deg);
}

.greek-map-point-sanctuary .greek-map-point-core {
  width: 11px;
  height: 11px;
  border-radius: 2px;
}

.greek-map-point-writing .greek-map-point-core {
  width: 13px;
  height: 10px;
  border-radius: 2px;
  box-shadow:
    inset 0 -3px 0 color-mix(in srgb, var(--greek-map-marker-color, var(--greek-map-writing)) 55%, #ffffff),
    0 1px 5px rgba(28, 31, 29, 0.4);
}

.greek-map-point-conflict {
  --point-transform: rotate(45deg);
}

.greek-map-point-conflict .greek-map-point-core {
  width: 12px;
  height: 12px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--greek-map-marker-color, var(--greek-map-conflict)) 76%, transparent);
}

.greek-map-point-conflict .greek-map-point-core::before,
.greek-map-point-conflict .greek-map-point-core::after {
  position: absolute;
  inset: 4px 1px auto;
  height: 2px;
  background: var(--greek-map-marker-ring);
  content: "";
}

.greek-map-point-conflict .greek-map-point-core::after {
  transform: rotate(90deg);
}

.greek-map-route-arrow {
  display: grid;
  place-items: center;
  background: transparent;
}

.greek-map-route-arrow span {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  border: 1px solid color-mix(in srgb, var(--route-color) 42%, #fff4d8);
  border-radius: 50%;
  background: color-mix(in srgb, var(--greek-map-land) 80%, transparent);
  box-shadow: 0 2px 6px rgba(22, 41, 39, 0.22);
  transform: rotate(var(--route-angle));
}

.greek-map-route-arrow span::before {
  position: absolute;
  top: 5px;
  left: 4px;
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--route-color);
  border-right: 2px solid var(--route-color);
  content: "";
  transform: rotate(45deg);
}

.greek-map-physical-label,
.greek-map-zone-label {
  background: transparent;
}

.greek-map-physical-label span,
.greek-map-zone-label span {
  position: absolute;
  display: block;
  color: color-mix(in srgb, var(--greek-map-label) 80%, transparent);
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-shadow:
    0 1px 0 color-mix(in srgb, var(--greek-map-land) 66%, transparent),
    0 0 7px color-mix(in srgb, var(--greek-map-land) 72%, transparent);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.greek-map-physical-label-sea span {
  color: color-mix(in srgb, var(--greek-map-label) 62%, var(--greek-map-water));
  font-family: "Hembhuvin Greek", Georgia, "Times New Roman", serif;
  font-size: 9px;
  font-style: italic;
  font-weight: 700;
}

.greek-map-zone-label span {
  max-width: 160px;
  padding: 4px 6px;
  border: 1px solid color-mix(in srgb, var(--greek-map-zone) 48%, transparent);
  border-radius: 2px;
  background: color-mix(in srgb, var(--greek-map-land) 64%, transparent);
  color: color-mix(in srgb, var(--greek-map-zone) 74%, #182b2a);
  font-size: 8px;
  white-space: normal;
}

.greek-map-layer-enter {
  animation: greek-map-layer-enter 260ms ease-out both;
}

@keyframes greek-map-layer-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

#greek-timeline-map.is-reduced-motion .greek-map-layer-enter,
#greek-timeline-map.is-reduced-motion .greek-map-point-core,
#greek-timeline-map.is-reduced-motion .greek-map-route {
  animation: none !important;
  transition: none !important;
}

.greek-map-stage {
  position: relative;
  min-width: 0;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  background: var(--greek-map-water, var(--map-water));
  box-shadow: inset 0 0 70px rgba(18, 42, 43, 0.24);
}

#greek-timeline-map {
  width: 100%;
  height: 100%;
  min-height: 560px;
  background-color: var(--greek-map-water, var(--map-water));
  background-image:
    repeating-linear-gradient(12deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(102deg, rgba(21, 65, 68, 0.035) 0 1px, transparent 1px 13px);
  transition: background-color 220ms ease;
}

#greek-timeline-map::after {
  position: absolute;
  z-index: 205;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 0 58px rgba(16, 39, 39, 0.22),
    inset 0 0 0 5px rgba(255, 255, 255, 0.035);
  content: "";
  pointer-events: none;
}

.greek-map-section .greek-map-landmass {
  vector-effect: non-scaling-stroke;
  transition: fill 240ms ease, stroke 240ms ease;
}

.greek-map-section .greek-map-graticule {
  vector-effect: non-scaling-stroke;
}

.greek-map-section .greek-map-route {
  filter: drop-shadow(0 1px 1px rgba(22, 38, 38, 0.28));
  stroke-dashoffset: 0;
  vector-effect: non-scaling-stroke;
  animation: greek-map-route-flow 14s linear infinite;
}

.greek-map-section .greek-map-route-halo,
.greek-map-section .greek-map-zone {
  vector-effect: non-scaling-stroke;
}

.greek-map-section .greek-map-zone {
  filter: drop-shadow(0 2px 2px rgba(31, 43, 41, 0.13));
}

@keyframes greek-map-route-flow {
  to { stroke-dashoffset: -90; }
}

.greek-map-cartouche {
  position: absolute;
  z-index: 640;
  bottom: 64px;
  left: 14px;
  display: grid;
  width: min(292px, calc(100% - 112px));
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  padding: 11px 13px 10px 15px;
  border: 1px solid color-mix(in srgb, var(--greek-map-coast) 60%, transparent);
  border-left: 4px solid var(--greek-map-active);
  border-radius: 3px;
  background: color-mix(in srgb, var(--greek-map-land) 91%, transparent);
  color: var(--greek-map-label);
  box-shadow: 0 8px 22px rgba(21, 39, 38, 0.19);
  backdrop-filter: blur(8px);
}

.greek-map-cartouche-kicker {
  grid-column: 1 / -1;
  color: color-mix(in srgb, var(--greek-map-label) 68%, transparent);
  font-size: 8px;
  font-weight: 850;
  line-height: 1.2;
  text-transform: uppercase;
}

.greek-map-cartouche strong {
  grid-column: 1 / -1;
  font-family: "Hembhuvin Greek", Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.15;
  white-space: normal;
}

#greek-map-cartouche-date,
#greek-map-cartouche-index {
  color: color-mix(in srgb, var(--greek-map-label) 78%, transparent);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase;
}

#greek-map-cartouche-index {
  text-align: right;
}

.greek-map-view-control {
  position: absolute;
  z-index: 650;
  right: 58px;
  bottom: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(72px, 1fr));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--greek-map-coast) 66%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--greek-map-land) 90%, transparent);
  box-shadow: 0 5px 15px rgba(21, 39, 38, 0.18);
  backdrop-filter: blur(8px);
}

.greek-map-view-control button {
  min-height: 34px;
  padding: 0 11px;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--greek-map-coast) 34%, transparent);
  background: transparent;
  color: var(--greek-map-label);
  font: 750 10px/1 "Segoe UI", Arial, sans-serif;
  cursor: pointer;
}

.greek-map-view-control button:last-child {
  border-right: 0;
}

.greek-map-view-control button:hover,
.greek-map-view-control button.is-active,
.greek-map-view-control button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--greek-map-active) 18%, transparent);
}

.greek-map-compass {
  position: absolute;
  z-index: 640;
  top: 18px;
  right: 216px;
  display: grid;
  width: 38px;
  height: 52px;
  place-items: center;
  color: var(--greek-map-label);
  filter: drop-shadow(0 2px 3px rgba(18, 39, 38, 0.22));
  pointer-events: none;
}

.greek-map-compass span {
  align-self: start;
  font: 850 9px/1 "Segoe UI", Arial, sans-serif;
}

.greek-map-compass i {
  position: absolute;
  top: 13px;
  width: 1px;
  height: 31px;
  background: var(--greek-map-label);
}

.greek-map-compass i::before,
.greek-map-compass i::after {
  position: absolute;
  left: -5px;
  width: 0;
  height: 0;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: "";
}

.greek-map-compass i::before {
  top: -1px;
  border-bottom: 12px solid var(--greek-map-label);
}

.greek-map-compass i::after {
  bottom: -1px;
  border-top: 12px solid color-mix(in srgb, var(--greek-map-label) 28%, transparent);
}

.greek-map-touch-gate {
  position: absolute;
  z-index: 650;
  right: 14px;
  bottom: 28px;
  display: none;
  max-width: min(220px, calc(100% - 28px));
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  box-shadow: 0 4px 16px rgba(25, 35, 31, 0.16);
}

.greek-map-touch-gate[hidden] {
  display: none !important;
}

.greek-map-touch-gate button {
  width: 100%;
  border: 0;
  background: transparent;
}

.greek-map-touch-gate span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.25;
  text-align: center;
}

.greek-map-orientation-note {
  position: absolute;
  z-index: 620;
  top: 14px;
  left: 14px;
  width: min(390px, calc(100% - 226px));
  margin: 0;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--map-line) 72%, var(--line));
  border-radius: 2px;
  background: color-mix(in srgb, var(--greek-map-land) 90%, transparent);
  color: color-mix(in srgb, var(--greek-map-label) 76%, transparent);
  font-size: 9px;
  line-height: 1.35;
}

.greek-map-legend {
  position: absolute;
  z-index: 620;
  right: 14px;
  top: 14px;
  display: grid;
  width: 188px;
  gap: 7px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--map-line) 72%, var(--line));
  border-radius: 3px;
  background: color-mix(in srgb, var(--greek-map-land) 91%, transparent);
  color: var(--greek-map-label);
  box-shadow: 0 4px 16px rgba(25, 35, 31, 0.12);
}

.greek-map-legend-title {
  margin: 0 0 2px;
  color: color-mix(in srgb, var(--greek-map-label) 70%, transparent);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase;
}

.greek-map-legend-item {
  --legend-color: var(--greek-map-place);
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  color: var(--greek-map-label);
  font-size: 10px;
  line-height: 1.25;
}

.greek-map-legend-item[data-kind="route"],
.greek-map-legend-item.is-route {
  --legend-color: var(--greek-map-route);
}

.greek-map-legend-item[data-kind="zone"],
.greek-map-legend-item[data-kind="region"],
.greek-map-legend-item.is-zone {
  --legend-color: var(--greek-map-zone);
}

.greek-map-legend-item[data-kind="battle"],
.greek-map-legend-item.is-conflict {
  --legend-color: var(--greek-map-conflict);
}

.greek-map-legend-item.is-capital {
  --legend-color: var(--greek-map-capital);
}

.greek-map-legend-item.is-port {
  --legend-color: var(--greek-map-port);
}

.greek-map-legend-item.is-sanctuary {
  --legend-color: var(--greek-map-sanctuary);
}

.greek-map-legend-item.is-writing {
  --legend-color: var(--greek-map-writing);
}

.greek-map-legend-item.is-settlement {
  --legend-color: var(--greek-map-settlement);
}

.greek-map-legend-swatch,
.greek-map-legend-symbol {
  display: block;
  width: 16px;
  height: 10px;
  border: 1px solid var(--legend-color);
  border-radius: 1px;
  background: color-mix(in srgb, var(--legend-color) 22%, transparent);
}

.greek-map-legend-item[data-kind="place"] .greek-map-legend-swatch,
.greek-map-legend-item.is-place .greek-map-legend-swatch,
.greek-map-legend-item[data-kind="place"] .greek-map-legend-symbol,
.greek-map-legend-item.is-place .greek-map-legend-symbol,
.greek-map-legend-item.is-settlement .greek-map-legend-swatch,
.greek-map-legend-item.is-capital .greek-map-legend-swatch,
.greek-map-legend-item.is-port .greek-map-legend-swatch,
.greek-map-legend-item.is-sanctuary .greek-map-legend-swatch,
.greek-map-legend-item.is-writing .greek-map-legend-swatch,
.greek-map-legend-item.is-conflict .greek-map-legend-swatch {
  width: 9px;
  height: 9px;
  margin-left: 3px;
  border-width: 2px;
  border-radius: 50%;
}

.greek-map-legend-item.is-capital .greek-map-legend-swatch {
  box-shadow: 0 0 0 2px var(--greek-map-land), 0 0 0 3px var(--legend-color);
}

.greek-map-legend-item.is-port .greek-map-legend-swatch {
  border-bottom-width: 4px;
}

.greek-map-legend-item.is-sanctuary .greek-map-legend-swatch,
.greek-map-legend-item.is-conflict .greek-map-legend-swatch {
  border-radius: 1px;
  transform: rotate(45deg) scale(0.82);
}

.greek-map-legend-item.is-writing .greek-map-legend-swatch {
  width: 11px;
  height: 8px;
  border-radius: 1px;
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--legend-color) 55%, transparent);
}

.greek-map-legend-item[data-kind="route"] .greek-map-legend-swatch,
.greek-map-legend-item.is-route .greek-map-legend-swatch,
.greek-map-legend-item[data-kind="route"] .greek-map-legend-symbol,
.greek-map-legend-item.is-route .greek-map-legend-symbol {
  height: 0;
  border-width: 2px 0 0;
  border-radius: 0;
  background: transparent;
}

.greek-map-section .leaflet-container {
  color: #202622;
  font-family: "Segoe UI", Arial, sans-serif;
}

.greek-map-section .leaflet-control-zoom {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--map-line) 72%, var(--line));
  border-radius: 3px;
  box-shadow: 0 4px 16px rgba(25, 35, 31, 0.12);
}

.greek-map-section .leaflet-control-zoom a {
  width: 34px;
  height: 34px;
  border-color: var(--line);
  border-radius: 0;
  background: color-mix(in srgb, var(--greek-map-land) 92%, transparent);
  color: var(--greek-map-label);
  font: 700 20px/34px "Segoe UI", Arial, sans-serif;
}

.greek-map-section .leaflet-control-zoom a:hover,
.greek-map-section .leaflet-control-zoom a:focus-visible {
  background: var(--surface-alt);
  color: var(--greek-map-active);
}

.greek-map-section .leaflet-control-attribution {
  max-width: min(68vw, 560px);
  padding: 3px 6px;
  background: color-mix(in srgb, var(--greek-map-land) 88%, transparent);
  color: color-mix(in srgb, var(--greek-map-label) 72%, transparent);
  font-size: 8px;
  line-height: 1.35;
}

.greek-map-section .leaflet-control-attribution a {
  color: var(--accent-2);
}

.greek-map-section .leaflet-control-scale-line {
  border-color: color-mix(in srgb, var(--greek-map-label) 68%, transparent);
  border-top: 0;
  background: color-mix(in srgb, var(--greek-map-land) 78%, transparent);
  color: var(--greek-map-label);
  font-size: 8px;
  line-height: 1.2;
  text-shadow: none;
}

.greek-map-section .leaflet-popup-content-wrapper,
.greek-map-section .leaflet-popup-tip {
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
}

.greek-map-section .leaflet-popup-content-wrapper {
  border: 1px solid var(--line);
  box-shadow: 0 9px 28px rgba(25, 35, 31, 0.2);
}

.greek-map-section .leaflet-popup-content {
  width: min(260px, 66vw) !important;
  margin: 14px 16px;
  font-size: 12px;
  line-height: 1.48;
  overflow-wrap: anywhere;
}

.greek-map-section .leaflet-popup-content h3,
.greek-map-section .leaflet-popup-content strong {
  display: block;
  margin: 0 24px 5px 0;
  color: var(--ink);
  font-family: "Hembhuvin Greek", Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.2;
}

.greek-map-section .leaflet-popup-content p {
  margin: 6px 0 0;
  color: var(--muted);
}

.greek-map-section .greek-map-popup-date {
  display: block;
  color: var(--greek-map-text-accent);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.35;
  text-transform: uppercase;
}

.greek-map-section .greek-map-popup-category {
  display: inline-block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  line-height: 1.35;
}

.greek-map-section .leaflet-popup-content small,
.greek-map-section .leaflet-popup-content .map-evidence {
  display: block;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
}

.greek-map-section .greek-map-popup-confidence + .map-evidence {
  margin-top: 4px;
  padding-top: 0;
  border-top: 0;
}

.greek-map-section .greek-map-popup-uncertainty {
  color: color-mix(in srgb, var(--muted) 84%, var(--greek-map-text-accent));
}

.greek-map-section .greek-map-popup-uncertainty + .greek-map-popup-confidence,
.greek-map-section .greek-map-popup-uncertainty + .map-evidence {
  margin-top: 4px;
  padding-top: 0;
  border-top: 0;
}

.greek-map-section .leaflet-popup-close-button {
  color: var(--muted);
}

.greek-map-section .leaflet-popup-close-button:hover,
.greek-map-section .leaflet-popup-close-button:focus-visible {
  color: var(--greek-map-active);
}

.greek-map-section .leaflet-tooltip {
  max-width: min(260px, 70vw);
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--surface);
  color: var(--ink);
  font-size: 10px;
  line-height: 1.35;
  box-shadow: 0 4px 14px rgba(25, 35, 31, 0.14);
  overflow-wrap: anywhere;
}

.greek-map-section button:focus-visible,
.greek-map-section a:focus-visible,
.greek-map-section input:focus-visible,
.greek-map-section [tabindex]:focus-visible {
  position: relative;
  z-index: 5;
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.greek-map-section .leaflet-marker-icon:focus-visible {
  position: absolute;
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.greek-map-section .greek-map-era-button:focus-visible,
.greek-map-section .greek-map-feature-button:focus-visible {
  outline-width: 2px;
  outline-offset: -3px;
}

@media (max-width: 900px) {
  .greek-map-shell {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .greek-map-panel {
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .greek-map-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.8fr);
    align-items: end;
  }

  .greek-map-era-buttons {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
  }

  .greek-map-era-button {
    width: 226px;
    min-width: 226px;
    min-height: 82px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "group"
      "date"
      "label";
    gap: 2px;
    scroll-snap-align: start;
  }

  .greek-map-era-button::before {
    inset: auto 0 0;
    width: auto;
    height: 4px;
  }

  .greek-map-features {
    display: flex;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
  }

  .greek-map-feature {
    width: 230px;
    min-width: 230px;
    scroll-snap-align: start;
  }

  .greek-map-stage,
  #greek-timeline-map {
    height: 54svh;
    min-height: 420px;
  }

  .greek-map-touch-gate:not([hidden]) {
    display: flex;
    flex-direction: column;
  }

  .greek-map-touch-gate {
    right: 58px;
    bottom: 18px;
  }

  #greek-timeline-map:not(.is-map-interactive) {
    touch-action: pan-y;
  }
}

@media (max-width: 620px) {
  .greek-map-section {
    padding-block: 54px;
  }

  .greek-map-heading h2 {
    font-size: 40px;
    line-height: 1;
  }

  .greek-map-shell {
    width: calc(100% + (var(--gutter) * 2));
    margin-inline: calc(var(--gutter) * -1);
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .greek-map-toolbar {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 17px var(--gutter) 15px;
  }

  .greek-map-toolbar strong,
  .greek-map-toolbar output {
    font-size: 18px;
  }

  .greek-map-era-button {
    width: 212px;
    min-width: 212px;
    min-height: 84px;
    padding-inline: var(--gutter);
  }

  .greek-map-feature {
    width: 214px;
    min-width: 214px;
    padding-inline: var(--gutter);
  }

  .greek-map-stage,
  #greek-timeline-map {
    height: 54svh;
    min-height: 380px;
  }

  .greek-map-legend {
    top: 10px;
    right: 10px;
    width: 196px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 8px;
    padding: 8px 9px;
  }

  .greek-map-legend-title {
    grid-column: 1 / -1;
  }

  .greek-map-legend-item {
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 4px;
    font-size: 8px;
  }

  .greek-map-compass,
  .greek-map-orientation-note {
    display: none;
  }

  .greek-map-cartouche {
    right: 10px;
    bottom: 58px;
    left: 10px;
    width: auto;
    padding: 9px 10px 8px 12px;
  }

  .greek-map-cartouche strong {
    font-size: 14px;
  }

  .greek-map-view-control {
    right: auto;
    bottom: 10px;
    left: 10px;
  }

  .greek-map-section .leaflet-control-scale {
    display: none;
  }

  .greek-map-point.greek-map-label-secondary .greek-map-point-label,
  .greek-map-point.greek-map-label-tertiary .greek-map-point-label {
    opacity: 0;
  }

  .greek-map-point .greek-map-point-label {
    max-width: 118px;
    font-size: 8px;
  }

  .greek-map-touch-gate {
    right: 10px;
    bottom: 128px;
  }

  .greek-map-section .leaflet-control-attribution {
    max-width: 80vw;
  }
}

@media (max-width: 430px) {
  .greek-map-heading h2 {
    font-size: 36px;
  }

  .greek-map-legend {
    width: 196px;
  }

  .greek-map-touch-gate {
    right: 10px;
    bottom: 132px;
  }

  .greek-map-stage,
  #greek-timeline-map {
    min-height: 430px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #greek-timeline-map,
  .timeline-row[data-greek-era-index],
  .greek-map-era-button,
  .greek-map-feature,
  .greek-map-point-core,
  .greek-map-section .leaflet-zoom-animated,
  .greek-map-section .leaflet-fade-anim .leaflet-popup {
    transition: none !important;
  }

  .greek-map-layer-enter {
    animation: none !important;
  }

  .greek-map-section .greek-map-route {
    animation: none !important;
  }

  .greek-map-era-buttons,
  .greek-map-features {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }
}

@media print {
  .greek-map-section {
    padding-block: 18pt;
    border-color: #777777;
    background: #ffffff !important;
    color: #111111;
    break-inside: avoid;
  }

  .greek-map-shell {
    display: block;
    min-height: 0;
    overflow: visible;
    border-color: #777777;
    background: #ffffff;
    box-shadow: none;
    break-inside: avoid;
  }

  .greek-map-panel {
    display: block;
    max-height: none;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid #777777;
    background: #ffffff;
  }

  .greek-map-toolbar,
  .greek-map-era-button[aria-current="step"],
  .greek-map-era-button[aria-pressed="true"],
  .greek-map-era-button.is-active,
  .greek-map-feature {
    background: #ffffff !important;
    color: #111111;
  }

  .greek-map-era-button:not([aria-current="step"]):not([aria-pressed="true"]):not(.is-active),
  .greek-map-touch-gate,
  .greek-map-orientation-note,
  .greek-map-cartouche,
  .greek-map-view-control,
  .greek-map-compass,
  .greek-map-section .leaflet-control-container {
    display: none !important;
  }

  .greek-map-era-buttons,
  .greek-map-features {
    display: block;
    overflow: visible;
    border-color: #777777;
    background: #ffffff;
  }

  .greek-map-feature {
    display: inline-grid;
    width: 49%;
    min-height: 40px;
    border-bottom: 1px solid #bbbbbb;
  }

  .greek-map-stage,
  #greek-timeline-map {
    height: 390px;
    min-height: 390px;
    background: #e9eeee !important;
  }

  .greek-map-legend {
    border-color: #777777;
    background: #ffffff;
    color: #111111;
    box-shadow: none;
  }
}