/* ===========================================================
   Professor Fábio Tokarski — Linktree
   Art-directed image + accessible link hotspots.
   Desktop art  = Figma "Frame 3" (1920 x 3182)
   Mobile art   = Figma "Frame 2" (1080 x 4800)
   Hotspots are positioned in % of the frame so they stay
   aligned as the image scales.
   =========================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: #c60909; /* campaign red — fills gutters around the art */
  color: #f4f1ed;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.page {
  display: flex;
  justify-content: center;
}

/* ---- Art container (shared) ---- */
.art {
  position: relative;
  display: block;
  width: 100%;
  line-height: 0;              /* remove inline-image whitespace */
}

.art__bg {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- Clickable link hotspots ---- */
.hotspot {
  position: absolute;
  display: block;
  border-radius: 18px;
  text-indent: -9999px;        /* keep aria-label, hide any stray text */
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.hotspot:hover {
  transform: scale(1.015);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.hotspot:active {
  transform: scale(0.99);
}

/* Keyboard accessibility */
.hotspot:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

/* ---- Breakpoint: show one art per viewport ---- */

/* Mobile-first: show the tall single-column art (Frame 2) */
.art--desktop { display: none; }
.art--mobile  { display: block; max-width: 460px; margin: 0 auto; }

/* Desktop: show the two-column art (Frame 3) */
@media (min-width: 760px) {
  .art--mobile  { display: none; }
  .art--desktop { display: block; max-width: 820px; margin: 0 auto; }
}