@charset "UTF-8";
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
:root {
  color-scheme: light;
  --paper: #ffffff;
  --ink: #153a50;
  --muted: #586974;
  --blue: #0863a1;
  --orange: #f28a09;
  font-family: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; }
.svg-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
main { max-width: 1160px; min-height: 100svh; margin: 0 auto; padding: 42px 48px 32px; }
.brand { text-align: center; animation: arrive 650ms both; }
.brand-mark { display: block; width: min(320px, 100%); height: auto; margin: 0 auto 4px; }
h1, h2 { font-weight: 700; }
h1 { font-size: clamp(46px, 6vw, 72px); letter-spacing: -1.5px; line-height: 1.2; margin: 0 0 48px; }
.destinations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.destination {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 62px 30px 40px; color: inherit; text-align: center; text-decoration: none;
  -webkit-tap-highlight-color: #ffce7850;
  transition: background-color 240ms, box-shadow 240ms;
  animation: arrive 650ms 100ms both;
}
.destination + .destination { animation-delay: 180ms; }
.destination::after { content: ""; position: absolute; inset: auto 24px -1px; height: 3px; background: var(--orange); transform: scaleX(0); transition: transform 240ms; }
.destination-art { position: relative; width: 240px; max-width: 100%; height: 160px; }
.destination-sun { position: absolute; width: 110px; height: 69px; left: calc(50% - 55px); top: var(--sun-top); pointer-events: none; opacity: 0; transform: translateY(8px); transition: opacity 240ms, transform 300ms cubic-bezier(.2,.7,.3,1); }
/* The generated PNGs retain clear padding where the suns were removed. These
   offsets align the visible marks without altering their original alpha. */
.destination-art img { position: absolute; display: block; width: 240px; height: 240px; max-width: none; left: 50%; top: 50%; margin: -120px 0 0 -120px; object-fit: contain; pointer-events: none; transform: translateY(var(--art-shift)); transition: transform 300ms cubic-bezier(.2,.7,.3,1); }
.destination-blog { --art-shift: -19px; --sun-top: -6px; }
.destination-spend { --art-shift: -30px; --sun-top: -52px; }
h2 { margin: 22px 0 0; font-size: clamp(27px, 3vw, 35px); line-height: 1.2; letter-spacing: -1px; }
.destination h2 { color: var(--blue); }
.arrow { display: inline-block; font-size: .7em; color: var(--orange); margin-left: 5px; transition: transform 240ms; }
.destination p { max-width: 355px; margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.destination:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; z-index: 1; }
.destination:focus-visible::after { transform: scaleX(1); }
.destination:active { box-shadow: inset 0 0 0 2px var(--orange); }
@media (hover: hover) {
  .destination:hover { box-shadow: inset 0 0 0 1px var(--orange); }
  .destination:hover::after { transform: scaleX(1); }
  .destination:hover .destination-art img { transform: translateY(calc(var(--art-shift) - 5px)) scale(1.035); }
  .destination:hover .destination-sun { opacity: 1; transform: translateY(-5px); }
  .destination:hover .arrow { transform: translate(3px, -3px); }
}
.destination:focus-visible .destination-art img { transform: translateY(calc(var(--art-shift) - 5px)) scale(1.035); }
.destination:focus-visible .destination-sun { opacity: 1; transform: translateY(-5px); }
@keyframes arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) {
  main { padding: 22px 22px 26px; }
  .brand-mark { width: min(280px, 100%); }
  h1 { font-size: 42px; letter-spacing: -1px; margin-bottom: 30px; }
  .destinations { grid-template-columns: 1fr; }
  .destination { padding: 62px 12px 28px; }
  h2 { margin-top: 12px; font-size: 27px; }
  .destination p { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::after { animation: none !important; transition: none !important; }
  .destination:hover .destination-art img, .destination:focus-visible .destination-art img { transform: translateY(var(--art-shift)); }
  .destination:hover .arrow { transform: none; }
  .destination:hover .destination-sun, .destination:focus-visible .destination-sun { transform: none; }
}