/* ---------- Contact (#contact) ----------
   The last chapter: the words and Clarion's details on the left; on the right Dar es Salaam, a real map (MapLibre GL,
   OpenFreeMap tiles in Clarion's colours: data/contact-map-style.json) that the page's own pale-blue air fades into
   from the left, with Clarion's office marked. js/contact.js draws the map and plays Global Reach <-> Contact, the
   world closing in on Dar es Salaam and becoming this map. All rules are scoped to .contact-*. */

.contact {
  --contact-navy: #0b1f33;
  --contact-ink: #2a3d55;
  --contact-gold: #c79a2b;
  --contact-gold-deep: #bc7e0f;
  --contact-pad: clamp(24px, 5.4vw, 96px);
  --contact-curve: clamp(84px, 12vh, 132px);
  position: relative;
  color: var(--contact-navy);
  background: #f2f7fd;
}

.contact-stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}

/* The air: the same pale blue as Global Reach, brightest over the words. */
.contact-air {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 46% 60% at 18% 46%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, #eef5fc 0%, #f5f9fe 42%, #f1f6fc 72%, #e9f2fb 100%);
}

/* ---------- The map: no card, no edge; the air fades into it from the left, and it into the air at the top and
   into the wave at the bottom. (Scoped under .contact-stage so MapLibre's own stylesheet, loaded later, cannot
   change its position.) ---------- */
.contact-stage .contact-map {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 32%;
  z-index: 0;
  background: #f1f5fa;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 16%, #000 42%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, #000 14%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 16%, #000 42%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, #000 14%, #000 84%, transparent 100%);
  mask-composite: intersect;
  touch-action: none;
}
.contact-map .maplibregl-canvas { outline: none; }
.contact-map .maplibregl-canvas-container.maplibregl-interactive { cursor: grab; }
.contact-map .maplibregl-canvas-container.maplibregl-interactive:active { cursor: grabbing; }

/* The attribution the map's data requires: kept, small and quiet, and clear of the map's fade into the wave. */
.contact-map .maplibregl-ctrl-bottom-right { bottom: 16.5%; right: 10px; }
.contact-map .maplibregl-ctrl-attrib {
  margin: 0;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
  font-family: var(--font-nav);
  font-size: 10px;
  line-height: 1.5;
  color: #6b7a8f;
}
.contact-map .maplibregl-ctrl-attrib a { color: #56677e; }
/* On a touch screen the map leaves one finger to the page (js/contact.js: two move the map): it lets the page pan
   through it, and says so, quietly, if one finger tries to move it. */
@media (hover: none) and (pointer: coarse) {
  .contact-stage .contact-map { touch-action: pan-y; }
}
.contact-map .maplibregl-cooperative-gesture-screen {
  padding: 24px;
  background: rgba(11, 31, 51, 0.38);
  font-family: var(--font-nav);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
}

/* Clarion's pin: navy, with a gold and white centre; its name beside it on a small white tag. */
.contact-pin {
  position: relative;
  width: 34px;
  height: 44px;
  cursor: default;
}
.contact-pin__drop {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 8px 10px rgba(11, 31, 51, 0.28));
}
.contact-pin__label {
  position: absolute;
  left: calc(100% + 4px);
  top: 3px;
  padding: 9px 16px 9px 14px;
  border: 1px solid rgba(11, 31, 51, 0.06);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 30px -18px rgba(11, 31, 51, 0.4), 0 2px 6px -2px rgba(11, 31, 51, 0.08);
  font-family: var(--font-nav);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--contact-navy);
}
/* The port: a quiet place name with a small ship, like the map's own labels. */
.contact-place {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-nav);
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
  color: #34475f;
  text-shadow: 0 0 6px rgba(244, 248, 252, 0.95), 0 0 2px rgba(244, 248, 252, 0.95);
  pointer-events: none;
}
.contact-place svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #34475f;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The map's controls: one small white pill, navy marks. */
.contact-controls {
  position: absolute;
  right: clamp(18px, 2.6vw, 44px);
  top: 62%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 16px 34px -20px rgba(11, 31, 51, 0.45), 0 2px 6px -2px rgba(11, 31, 51, 0.08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transform: translateY(-50%);
}
.contact-controls[hidden] { display: none; }
.contact-control {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--contact-navy);
}
.contact-control + .contact-control { border-top: 1px solid rgba(11, 31, 51, 0.07); }
.contact-control svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.contact-control__dot { fill: currentColor; stroke: none; }
.contact-control:focus-visible { outline: 2px solid var(--contact-gold); outline-offset: -4px; border-radius: 999px; }
@media (hover: hover) {
  .contact-control:hover { color: var(--contact-gold-deep); }
}

/* ---------- The words ---------- */
.contact-copy {
  position: relative;
  z-index: 2;
  width: min(44%, 640px);
  padding: clamp(172px, 22vh, 214px) 0 calc(var(--contact-curve) + 28px) var(--contact-pad);
  pointer-events: none; /* the map beneath takes the pointer; only the links in here do */
}
.contact-copy a { pointer-events: auto; }
.contact-label {
  display: flex;
  align-items: center;
  gap: 22px;
  font-family: var(--font-nav);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--contact-ink);
}
.contact-label::before { content: ""; width: 40px; height: 2px; background: var(--contact-gold); opacity: 0.85; }
.contact-title {
  margin: clamp(18px, 3vh, 32px) 0 clamp(26px, 4.6vh, 50px);
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 4.4vw, 5.2rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.012em;
  white-space: nowrap;
  color: var(--contact-navy);
}
.contact-dot { color: var(--contact-gold-deep); }

.contact-list {
  display: grid;
  gap: clamp(18px, 3.2vh, 34px);
  list-style: none;
}
.contact-item {
  display: grid;
  grid-template-columns: auto 1px 1fr;
  align-items: center;
  column-gap: clamp(20px, 2.2vw, 34px);
}
.contact-icon {
  display: grid;
  place-items: center;
  width: clamp(54px, 4.4vw, 64px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 12px 26px -16px rgba(11, 31, 51, 0.32), 0 1px 3px rgba(11, 31, 51, 0.05);
}
.contact-icon svg {
  width: 44%;
  height: 44%;
  fill: none;
  stroke: var(--contact-navy);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact-item::after { /* the thin gold rule between the mark and the words */
  content: "";
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  width: 1px;
  min-height: 48px;
  background: linear-gradient(180deg, rgba(199, 154, 43, 0), rgba(199, 154, 43, 0.85) 18%, rgba(199, 154, 43, 0.85) 82%, rgba(199, 154, 43, 0));
}
.contact-text { grid-column: 3; grid-row: 1; }
.contact-key {
  font-family: var(--font-nav);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--contact-ink);
}
.contact-value {
  margin-top: 6px;
  font-family: var(--font-nav);
  font-size: clamp(0.98rem, 1.1vw, 1.12rem);
  font-weight: 500;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #22364f;
}
.contact-value--hours { font-variant-caps: small-caps; letter-spacing: 0.08em; }
.contact-value a { color: inherit; text-decoration: none; background: linear-gradient(var(--contact-gold), var(--contact-gold)) 0 100% / 0 1px no-repeat; transition: background-size 0.3s ease; }
.contact-value a:hover,
.contact-value a:focus-visible { background-size: 100% 1px; outline: none; }

/* ---------- The bottom: the site's pale-blue wave, thin ---------- */
.contact-curve {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: var(--contact-curve);
  pointer-events: none;
}
.contact-legal {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: clamp(8px, 1.4vh, 14px);
  font-family: var(--font-nav);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-align: center;
  text-transform: uppercase;
  color: #8190a4;
}

/* ---------- Tablets and phones: the words, then the map beneath them ---------- */
@media (max-width: 899px) {
  .contact { --contact-pad: clamp(20px, 6vw, 56px); --contact-curve: clamp(64px, 9vh, 96px); }
  .contact-stage { display: flex; flex-direction: column; }
  .contact-copy {
    order: 1;
    width: auto;
    padding: 132px var(--contact-pad) 0;
  }
  .contact-title { font-size: clamp(2.5rem, 10vw, 4.4rem); }
  .contact-stage .contact-map {
    order: 2;
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    flex: none;
    height: clamp(340px, 58vh, 560px);
    margin-top: 8px;
    /* The air above fades into the map over its first 64px (not a share of its height), so the part of the map that
       shows when the chapter opens is clear, and Clarion's pin (js/contact.js, anchorIn) stands in it. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 64px, #000 82%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 64px, #000 82%, transparent 100%);
  }
  .contact-map .maplibregl-ctrl-bottom-right { bottom: 18%; }
  /* The controls in a row at the map's lower left, just above its fade (the pin's tag is up to the right). */
  .contact-controls {
    top: auto;
    right: auto;
    left: var(--contact-pad);
    bottom: calc(var(--contact-curve) + 112px);
    flex-direction: row;
    transform: none;
  }
  .contact-control + .contact-control { border-top: 0; border-left: 1px solid rgba(11, 31, 51, 0.07); }
  .contact-stage::after { content: ""; display: block; order: 3; height: var(--contact-curve); flex: none; }
}
@media (min-width: 561px) and (max-width: 899px) {
  .contact-copy { padding-top: 172px; } /* the taller nav above 560px */
}
/* Where the screen is short, the words close up so the map begins high enough to show Clarion's pin when the chapter
   opens (the map lies beneath the words on these layouts). */
@media (max-width: 899px) and (max-height: 920px) {
  .contact-title { margin: 14px 0 clamp(14px, 2.4vh, 22px); }
  .contact-list { gap: clamp(8px, 1.6vh, 14px); }
  .contact-icon { width: 46px; }
  .contact-item::after { min-height: 40px; }
}
@media (max-width: 420px) {
  .contact-copy { padding-top: 116px; }
  .contact-title { white-space: normal; }
  .contact-label { letter-spacing: 0.26em; }
  .contact-item { column-gap: 16px; }
  .contact-value { letter-spacing: 0.02em; }
  .contact-value--hours { letter-spacing: 0.04em; }
}