/* =========================================================
   BARQUE 42 — the treasure map (studio.html)
   map.js paints the chart behind everything: sea, islands,
   the dotted route and the ship. This lays out the words and
   pictures on top of it.
   ========================================================= */

.map {
  --bg: #000; --fg: #f4f2ec; --muted: rgba(244, 242, 236, 0.64); --line: rgba(244, 242, 236, 0.18); --accent: #ff4a4f;
  position: relative; overflow: hidden; background: #000; color: var(--fg);
}
/* a small canvas blown up with square, unblurred pixels */
.map__art { position: absolute; left: 0; top: 0; z-index: 0; display: block; pointer-events: none; image-rendering: crisp-edges; image-rendering: pixelated; }
.map > :not(.map__art):not(.map__ship):not(.map__beast):not(.map__crowd):not(.map__kraken):not(.map__duo):not(.map__team):not(.map__octo):not(.map__voyage):not(.map__next):not(.map__prize):not(.map__critter) { position: relative; z-index: 1; }
/* the chart underneath can be clicked through the empty parts of the page: only the menu, the words and the end keep the pointer */
.map__start, .stops { pointer-events: none; }
.map__start .top, .stop__card { pointer-events: auto; }
/* the Barque, on her own layer so she glides; she rocks, and turns about when she changes course */
.map__ship { position: absolute; left: 0; top: 0; z-index: 3; cursor: pointer; will-change: transform; }
.map__ship:focus-visible { outline: 2px dashed rgba(255, 255, 255, 0.6); outline-offset: 4px; }
.map__turn { width: 100%; height: 100%; transition: transform 0.42s cubic-bezier(0.45, 0, 0.25, 1); }
.map__hull { display: block; width: 100%; height: 100%; image-rendering: crisp-edges; image-rendering: pixelated; animation: ride 2.6s ease-in-out infinite; }
@keyframes ride { 50% { transform: translateY(var(--bob, 2px)); } }
/* nudged: she hops clear of the water and twirls (map.js sets --hop) */
.map__ship.is-hop .map__turn { animation: hop 0.9s cubic-bezier(0.3, 0, 0.3, 1); }
.map__ship.is-hop .map__hull { animation: ride 2.6s ease-in-out infinite, twirl 0.9s ease-in-out; }
@keyframes hop { 0%, 100% { translate: 0 0; } 18% { translate: 0 calc(var(--hop) * -0.1); } 45% { translate: 0 var(--hop); } 70% { translate: 0 calc(var(--hop) * 0.3); } 85% { translate: 0 calc(var(--hop) * -0.06); } }
@keyframes twirl { from { rotate: y 0deg; } to { rotate: y 360deg; } }
/* the sea serpent, the kraken and the two at the tower can be poked (map.js draws what they do) */
.map__beast, .map__crowd, .map__kraken, .map__duo, .map__team, .map__octo, .map__voyage, .map__next, .map__prize, .map__critter { position: absolute; z-index: 2; padding: 0; border: 0; border-radius: 40%; background: none; cursor: pointer; }
.map__beast:focus-visible, .map__crowd:focus-visible, .map__kraken:focus-visible, .map__duo:focus-visible, .map__team:focus-visible, .map__octo:focus-visible, .map__voyage:focus-visible, .map__next:focus-visible, .map__prize:focus-visible, .map__critter:focus-visible { outline: 2px dashed rgba(255, 255, 255, 0.6); outline-offset: 2px; }

/* ---------- the start: Zürich, the Barque waiting at the pier ---------- */
.map__start { height: var(--vh); min-height: 600px; }
.map__kick { margin: 0 0 18px; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
/* where map.js anchors the harbour; Zürich lies to its right */
.map__pin { position: absolute; width: 2px; height: 2px; }
.map__pin--start { left: 31%; top: 52%; }

/* ---------- the stops: an island on one side, the story on the other ---------- */
.stops { list-style: none; max-width: calc(1320px + 2 * var(--m)); margin: 0 auto; padding: 0 var(--m); }
/* each stop gets room for its island to breathe: the island tells the chapter, the words sit beside it */
.stop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; min-height: clamp(420px, 62vh, 620px); padding: clamp(28px, 5vh, 60px) 0; }
.stop__pin { grid-row: 1; height: 2px; }
/* the story keeps to the outer edge, leaving the middle of the chart for the route */
.stop__card { grid-row: 1; justify-self: center; width: min(100%, 420px); }
.stop:nth-child(odd) .stop__card { justify-self: end; }
.stop:nth-child(even) .stop__card { justify-self: start; }
.stop:nth-child(odd) .stop__pin { grid-column: 1; }
.stop:nth-child(odd) .stop__card { grid-column: 2; }
.stop:nth-child(even) .stop__pin { grid-column: 2; }
.stop:nth-child(even) .stop__card { grid-column: 1; }

.stop__date { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
/* (where the chart writes the date beside the island's landing, the card leaves it out: map.js sets .is-dated) */
.stop.is-dated .stop__date { display: none; }
.stop h2 { margin: 0 0 16px; font-size: clamp(32px, 3.6vw, 54px); font-weight: 700; line-height: 1.03; letter-spacing: -0.04em; text-wrap: balance; }
.stop__card > h2 + p { margin: 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: var(--muted); text-wrap: pretty; }
/* how the crew works, as a row of small tags under the story */
.stop__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.stop__tags li { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; color: var(--fg); }

/* the last stop: the X, in the middle of the chart */
/* the end: a long stretch of open sea; then the Barque stops out there with this card beside her; then more
   open water, the grey way on running down it, to the uncharted island far below */
.stop.stop--x { grid-template-rows: auto auto; padding-top: clamp(460px, 92vh, 980px); }   /* (open sea first, before she reaches it) */
.stop.stop--x .stop__card { grid-column: 2; grid-row: 1; justify-self: end; }
.stop.stop--x .stop__pin { grid-column: 1 / -1; grid-row: 2; width: 100%; height: clamp(300px, 33vw, 520px); margin-top: clamp(380px, 78vh, 820px); }
/* where to follow us: three equal choices */
.stop__follow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(22px, 3.5vh, 32px); }
.stop__follow a { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px 0 16px; border: 1px solid rgba(244, 242, 236, 0.35); border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--fg); transition: background 0.2s, border-color 0.2s, color 0.2s; }
/* (the brand marks are from Simple Icons, CC0; they take the button's colour) */
.stop__follow svg { flex: none; width: 18px; height: 18px; fill: currentColor; }
.stop__follow a:hover, .stop__follow a:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; }

/* as a stop comes into view, its words follow one another in */
.js .stop__card.reveal:not(.in) { transform: translateY(24px); }
.js .stop__card > * { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.9s var(--ease); }
.js .stop__card.in > * { opacity: 1; transform: none; }
.js .stop__card.in > .stop__date { transition-delay: 0.1s; }
.js .stop__card.in > h2 { transition-delay: 0.2s; }
.js .stop__card.in > h2 + p { transition-delay: 0.3s; }
.js .stop__card.in > .stop__tags, .js .stop__card.in > .stop__follow { transition-delay: 0.4s; }

/* ---------- the end of the voyage ---------- */
.map__end { max-width: 1100px; margin: 0 auto; padding: clamp(56px, 10vh, 120px) var(--m) clamp(96px, 15vh, 170px); text-align: center; }
.map__dream { margin: 0; font-size: clamp(36px, 5.6vw, 84px); font-weight: 700; line-height: 1; letter-spacing: -0.045em; text-wrap: balance; }
.map__dream em { font-style: normal; color: var(--accent); }
.map__acts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 36px; margin-top: clamp(36px, 6vh, 60px); }

/* ---------- phones: the route runs down the left edge, each island above its story ---------- */
@media (max-width: 760px) {
  .map__start { min-height: 560px; }
  .map__pin--start { left: 0; top: 52%; }
  .stops { padding: 0 var(--m) 0 var(--lane, 54px); }
  .stop { display: block; min-height: 0; padding: 0 0 72px; }
  .stop__pin { display: block; height: 180px; }
  .stop__card { width: auto; }
  .stop.stop--x { display: block; padding-top: clamp(420px, 85vh, 760px); }
  .stop.stop--x .stop__pin { height: 220px; margin-top: clamp(320px, 70vh, 600px); }
  .stop.stop--x .stop__card { width: auto; }
  .map__end { padding-left: var(--lane, 54px); text-align: left; }
  .map__acts { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .map__hull { animation: none; }
  .map__turn, .js .stop__card > * { transition: none !important; }
}