/* A single persistent contact row, shared by the introduction and all chapters. */
.contact-bar {
  position: fixed;
  z-index: 10;
  top: max(18px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
}
.contact-icon { display: grid; place-items: center; width: 44px; height: 44px; padding: 11px; color: var(--primary); background: var(--background); border: 0; border-radius: 0; text-decoration: none; }
.contact-icon svg { display: block; width: 22px; height: 22px; overflow: visible; fill: currentColor; }
.contact-icon:hover, .contact-icon:focus-visible { color: var(--dot-bright); }
.contact-icon:active { color: var(--focus); }
.contact-icon:focus-visible { outline-offset: 1px; }
.contact-shapes { position: absolute; pointer-events: none; }
.contact-popup { position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); padding: 10px 14px; color: var(--text); background: var(--background); border: 1px solid color-mix(in srgb, var(--primary) 48%, transparent); text-align: center; }
.contact-popup p { margin: 0; font-size: 12px; line-height: 1.5; }
.contact-manual-copy { display: block; width: 230px; max-width: 100%; margin-top: 8px; padding: 9px; color: var(--text); background: var(--background); border: 1px solid var(--primary); font: inherit; font-size: 14px; }
@media (max-width: 740px) {
  :root { --work-header-height: 128px; }
  .contact-bar { top: max(10px, env(safe-area-inset-top)); }
  .contact-popup { top: calc(100% + 68px); }
  .work-header { padding-top: 56px; }
  .graph-header { top: 80px; }
  .chapter-header { top: 82px; }
  .reveal-button { top: max(72px, calc(env(safe-area-inset-top) + 62px)); }
}
@media (forced-colors: active) {
  .contact-icon { color: LinkText; background: Canvas; }
  .contact-popup, .contact-manual-copy { color: CanvasText; background: Canvas; border-color: CanvasText; }
}