/* ---------------------------------------------------------------------------
 * Mark Anthony Photography — Fine Art Gallery
 * "Explore by Location" interactive globe — additive stylesheet.
 * Deliberately self-contained: does not edit or override any gallery.css
 * rule. Reuses one existing class (.ag-section-label) purely for visual
 * consistency of the small kicker heading; everything else here is scoped
 * under .ag-globe-band / .ag-globe* so it can never leak into or be
 * affected by the rest of the page.
 * ------------------------------------------------------------------------- */

.ag-globe-band {
  position: relative;
  background: var(--gallery-black);
  color: #EDE6D6;
  padding-bottom: 64px;
  overflow: hidden;
}
.ag-globe-band__inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 5vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ag-globe-band__label { color: rgba(237, 230, 214, .55); margin-bottom: 40px; }
.ag-globe-stage {
  position: relative;
  width: min(78vw, 480px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.ag-globe-stage__hint {
  position: absolute;
  top: -26px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(237, 230, 214, .38);
  pointer-events: none;
}
.ag-globe-stage.ag-globe-stage--unavailable { display: none; }
.ag-globe__svg { display: block; width: 100%; height: 100%; touch-action: pan-y; overflow: hidden; }

.ag-globe-zoom { display: none; }

.ag-globe__ocean { fill: url(#agOceanTone); stroke: none; }
.ag-globe__land { fill: url(#agLandTone); stroke: none; }
/* Major inland water (Great Lakes, Baikal, Victoria, etc.) — same tone as
   the ocean so it reads as water cut into the land, not a separate color. */
.ag-globe__lakes { fill: #10212D; stroke: rgba(7, 16, 22, .32); stroke-width: .26; }
/* Real admin-0 country borders (world-atlas countries-50m), understated —
   orientation detail on close inspection, never the primary land pattern. */
.ag-globe__borders { fill: none; stroke: rgba(21, 34, 42, .2); stroke-width: .28; stroke-linejoin: round; stroke-linecap: round; }
.ag-globe__coastline { fill: none; stroke: rgba(5, 13, 18, .62); stroke-width: .46; stroke-linejoin: round; pointer-events: none; }
.ag-globe__graticule { fill: none; stroke: rgba(237, 230, 214, .075); stroke-width: .46; }
.ag-globe__shade { fill: url(#agSphereShade); pointer-events: none; }
.ag-globe__atmosphere { fill: url(#agAtmosphere); pointer-events: none; }

.ag-globe__marker-hit { fill: transparent; }
.ag-globe__marker-halo { fill: #F3EBD8; opacity: .28; filter: url(#agMarkerGlow); }
.ag-globe__marker-dot { r: 5.4px; fill: #FFF8E8; stroke: rgba(5, 11, 15, .92); stroke-width: 1.8px; filter: url(#agMarkerGlow); transition: r .25s ease; }
.ag-globe__marker--selected .ag-globe__marker-dot { r: 6.4; fill: #FFFBF2; }
.ag-globe__marker--selected .ag-globe__marker-halo { r: 10.5; opacity: .46; }
/* Location names, always visible on the front hemisphere (frontVisibility
   in globe.js fades + fully hides the whole marker group — label included
   — past the horizon, so rear-hemisphere labels never show). The dark
   stroke halo behind the light fill keeps the name legible whether it
   falls over warm land or dark ocean. */
.ag-globe__marker-label,
.ag-globe__marker-label-halo {
  font-family: 'Instrument Sans', Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  text-anchor: middle;
  stroke-linejoin: round;
  pointer-events: none;
}
.ag-globe__marker-label { fill: #FBF6EA; stroke: none; }
.ag-globe__marker-label-halo {
  fill: none;
  stroke: rgba(6, 10, 13, .92);
  stroke-width: 2.8px;
}
.ag-globe__marker--selected .ag-globe__marker-label,
.ag-globe__marker--selected .ag-globe__marker-label-halo { font-size: 12.5px; }
.ag-globe__marker--selected .ag-globe__marker-label { fill: #FFFFFF; }

.ag-globe-panel-wrap { width: 100%; display: flex; justify-content: center; margin-top: 34px; min-height: 40px; }
.ag-globe__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 440px;
  animation: agGlobePanelIn .45s ease;
}
.ag-globe__panel[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .ag-globe__panel { animation: none; } }
@keyframes agGlobePanelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.ag-globe__panel-kicker { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: rgba(237, 230, 214, .5); }
.ag-globe__panel-title { margin: 0; font-size: 26px; font-weight: 400; letter-spacing: -.01em; }
.ag-globe__panel-blurb { margin: 2px 0 0; font-size: 13px; line-height: 1.6; color: rgba(237, 230, 214, .72); max-width: 40ch; text-wrap: pretty; }
.ag-globe__panel-count { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(237, 230, 214, .46); margin-top: 2px; }
.ag-globe__panel-explore {
  margin-top: 12px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  padding: 13px 22px;
  border: 1px solid rgba(237, 230, 214, .32);
  background: none; color: inherit; cursor: pointer;
  transition: background .3s ease, border-color .3s ease;
}
.ag-globe__panel-explore:hover, .ag-globe__panel-explore:focus-visible { background: rgba(237, 230, 214, .1); border-color: rgba(237, 230, 214, .6); }

.ag-globe-destinations {
  margin-top: 44px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 10px;
  max-width: 640px;
  padding-top: 26px;
  border-top: 1px solid rgba(237, 230, 214, .12);
}
.ag-globe-band .ag-globe-destinations__item {
  background: none; border: 0; padding: 8px 4px; cursor: pointer;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(237, 230, 214, .5);
  transition: color .25s ease;
}
.ag-globe-band .ag-globe-destinations__item:hover,
.ag-globe-band .ag-globe-destinations__item:focus-visible { color: #F6EFDD; }
.ag-globe-band .ag-globe-destinations__item[aria-pressed="true"] { color: #F6EFDD; }
.ag-globe-destinations__sep { color: rgba(237, 230, 214, .22); font-size: 11px; }

/* A brief, restrained highlight for the specific collection-grid card the
   globe scrolls to when "Explore Works" resolves to one work among many
   (Selected Works places). Purely additive — targets an existing
   .ag-work card only via this new modifier class, never overriding its
   base gallery.css rules. */
.ag-work.ag-globe-focus-highlight { outline: 1px solid rgba(var(--ink-rgb, 34, 30, 25), .55); outline-offset: 6px; transition: outline-color .3s ease; }

@media (max-width: 640px) {
  .ag-globe-band { padding-bottom: 48px; }
  .ag-globe-stage { width: min(88vw, 390px); }
  .ag-globe__panel-title { font-size: 22px; }
  .ag-globe-panel-wrap { margin-top: 18px; min-height: 0; }
  .ag-globe-panel-wrap:has(.ag-globe__panel:not([hidden])) { margin-top: 30px; }
  .ag-globe-destinations { gap: 6px 8px; margin-top: 34px; }
  .ag-globe-zoom { display: none; }
  .ag-globe__marker-hit { r: 34px; }
  .ag-globe__marker-dot { r: 7px; stroke-width: 2.1px; }
  .ag-globe__marker-halo { r: 11px; }
  .ag-globe__marker-label,
  .ag-globe__marker-label-halo { font-size: 15px; letter-spacing: .07em; }
  .ag-globe__marker-label-halo { stroke-width: 3.2px; }
  .ag-globe__marker--selected .ag-globe__marker-label,
  .ag-globe__marker--selected .ag-globe__marker-label-halo { font-size: 15.5px; }
}