.global-cocoa-map {
  min-width: 0;
  overflow: hidden;
  background: var(--paper);
  border: var(--line);
  box-shadow: 8px 8px 0 var(--ink);
}

.global-cocoa-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  padding: 1rem 1.5rem;
  border-bottom: 2px solid var(--ink);
  background: var(--yellow);
}

.global-cocoa-map-hint { font-size: .875rem; font-weight: 600; }
.global-cocoa-map-scroll { max-width: 100%; overflow-x: auto; background: #f2f0eb; }
.global-cocoa-map-scroll:focus-visible { outline: 3px solid var(--brown); outline-offset: -3px; }
.global-cocoa-map-image { width: 100%; min-width: 760px; max-width: none; height: auto; }

.global-cocoa-map-caption {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1.3rem 1.5rem;
  border-top: 2px solid var(--ink);
  font-size: .9375rem;
}

.global-cocoa-map-caption p { max-width: 48rem; }
.global-cocoa-map-caption strong { display: block; margin-bottom: .35rem; font-size: 1.0625rem; }
.global-cocoa-map-link { flex-shrink: 0; font-weight: 800; }
.global-cocoa-map-labels { padding: 1rem 1.5rem; border-top: 2px solid var(--ink); font-size: .9375rem; }
.global-cocoa-map-labels summary { cursor: pointer; font-weight: 800; }
.global-cocoa-map-label-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 2rem; margin-top: 1rem; }
.global-cocoa-map-flavors { grid-column: 1 / -1; }
.global-cocoa-sources { width: fit-content; margin: 1.5rem 0 3rem; background: var(--cyan); font-size: .875rem; }
.global-cocoa-sources a { font-weight: 700; }

.cocoa-sourcing-heading {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 5rem);
  margin-bottom: 2rem;
}

.cocoa-sourcing-heading .chapter-label { display: block; margin-bottom: .75rem; }
.cocoa-sourcing-heading h3 { margin: 0; font-family: var(--display); font-size: clamp(2.5rem, 4.3vw, 4.5rem); font-weight: 400; line-height: 1.08; color: var(--brown); }
.cocoa-sourcing-heading .section-lead { background: var(--cyan); }

@media (max-width: 1000px) {
  .global-cocoa-map-caption { flex-direction: column; }
}

@media (max-width: 760px) {
  .global-cocoa-map-header, .global-cocoa-map-caption, .global-cocoa-map-labels { padding: 1rem; }
  .global-cocoa-map-label-grid, .cocoa-sourcing-heading { grid-template-columns: 1fr; }
  .global-cocoa-sources { margin-bottom: 2rem; }
  .cocoa-sourcing-heading { gap: 1rem; }
}