/* One family of hand-drawn illustrations, with the same framing in every area. */
.destination-card { min-height: 475px; background: #f0f5ff; border-color: #dfe5f0; overflow: hidden; }
.destination-card::before { display: none; }
.destination-card::after { background: radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,20%), #ffffff60, transparent 50%); z-index: 0; }
.destination-art { position: absolute; inset: 0 0 auto; height: 260px; background: radial-gradient(ellipse at 50% 63%, #fff 0 30%, transparent 70%); display: grid; place-items: center; }
.destination-illustration { width: 96%; height: 230px; margin-top: 20px; object-fit: contain; transition: transform .65s cubic-bezier(.2,.8,.2,1); }
.destination-top { position: relative; z-index: 1; padding: 19px 20px; color: #466080; }
.destination-number { font: 500 .75rem var(--display); color: #57708f; text-shadow: none; letter-spacing: 1px; }
.destination-category { font-size: .75rem; }
.destination-orbit { display: none; }
.destination-content { background: #11203e; padding: 25px 20px 20px; margin-top: 246px; border-top: 1px solid #c9d4e9; }
.destination-kicker { font-size: .66rem; letter-spacing: .5px; }
.destination-content p { font-size: .875rem; min-height: 64px; margin-bottom: 21px; }
.destination-action { font-size: .75rem; }
.destination-card:is(:hover,:focus-visible) .destination-illustration { transform: translateY(-6px) rotate(-5deg) scale(1.06); }
.destination-card:is(:hover,:focus-visible) { border-color: #7392c9; box-shadow: 0 24px 45px #12204a26, 0 0 0 1px #b8cae8; }

/* A page-level navigation, explicitly separate from each area's introduction. */
.area-navigation { padding: 28px 4.5% 25px; background: #f7f9fd; border-bottom: 1px solid #dde4ee; }
.area-navigation-intro { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 19px; }
.area-navigation-intro p { margin: 0 0 5px; font: 500 1.2rem var(--display); letter-spacing: -.4px; }
.area-navigation-intro span { color: #67738a; font-size: .875rem; line-height: 1.5; }
.back-home { color: #405881; font-size: .8125rem; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.area-page-links { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.area-page-link { display: flex; align-items: center; gap: 14px; padding: 15px 19px; border: 1px solid #dfe6ef; border-radius: 12px; background: white; position: relative; transition: border-color .2s, background .2s, transform .2s; }
.area-page-link b { display: block; font: 500 1rem var(--display); }
.area-page-link small { display: block; color: #62718a; font-size: .75rem; line-height: 1.4; margin-top: 5px; }
.area-link-icon { display: grid; place-items: center; color: var(--area-color); width: 31px; flex: none; }
.area-link-icon svg { width: 24px; height: 24px; }
.area-page-link.is-current { background: #152e65; border-color: #152e65; color: white; }
.area-page-link.is-current small { color: #d5e8ff; }
.area-page-link.is-current .area-link-icon { color: #eaff78; }
.area-page-link.is-current::after { content: ''; position: absolute; bottom: -6px; left: calc(50% - 5px); width: 10px; height: 10px; background: #152e65; transform: rotate(45deg); }
.area-page-link:not(.is-current):hover { background: var(--area-soft); border-color: var(--area-color); transform: translateY(-2px); }
.illustrated-area-hero { grid-template-columns: 1.1fr 1fr; min-height: 410px; }
.illustrated-area-hero .area-hero-text { padding: 48px 7% 52px 8%; }
.illustrated-area-hero .eyebrow { font-size: .75rem; letter-spacing: 1.3px; color: var(--area-color); }
.illustrated-area-hero h1 { font: 500 clamp(3.3rem,5.2vw,5rem)/1.05 var(--display); letter-spacing: -.055em; margin: 18px 0 15px; }
.illustrated-area-hero h2 { font: 500 1.3rem/1.3 var(--display); letter-spacing: -.5px; margin: 0 0 14px; }
.illustrated-area-hero p { font-size: 1rem; max-width: 570px; margin: 0 0 26px; }
.area-hero-art { display: grid; place-items: center; min-height: 410px; position: relative; isolation: isolate; }
.area-art-halo { position: absolute; z-index: -1; width: 330px; height: 330px; border-radius: 50%; background: #ffffff7d; border: 1px solid #ffffffad; }
.area-hero-art img { width: min(85%,420px); height: 380px; object-fit: contain; }
@media (min-width:1600px) { .area-navigation { padding-left: max(4.5%,calc((100vw - 1320px)/2)); padding-right: max(4.5%,calc((100vw - 1320px)/2)); } }
@media (max-width:1200px) {
  .destination-card { min-height: 465px; }
  .destination-top { padding: 17px 15px; }
  .destination-content { padding-left: 15px; padding-right: 15px; margin-top: 218px; }
  .destination-art { height: 233px; }
  .destination-illustration { height: 215px; }
  .destination-action { font-size: .69rem; }
  .destination-kicker { font-size: .64rem; }
  .area-page-link { padding: 14px 12px; gap: 8px; }
  .area-page-link b { font-size: .9375rem; }
}
@media (max-width:1000px) {
  .destination-card { min-height: 480px; }
  .destination-content { padding: 24px 22px 21px; margin-top: 248px; }
  .destination-content p { min-height: 45px; }
  .destination-art { height: 260px; }
  .destination-illustration { height: 235px; width: min(90%,300px); }
  .destination-action { font-size: .8rem; }
  .area-link-icon { width: 23px; }
  .area-link-icon svg { width: 21px; }
  .area-page-link { gap: 7px; padding: 14px 10px; }
  .area-page-link b { font-size: .875rem; }
  .area-page-link small { font-size: .75rem; }
}
@media (max-width:760px) {
  .area-navigation { padding: 22px 6% 24px; }
  .area-navigation-intro { gap: 14px; align-items: start; }
  .area-navigation-intro p { font-size: 1.125rem; }
  .area-navigation-intro span { font-size: .8125rem; display: block; max-width: 340px; }
  .back-home { font-size: .75rem; }
  .area-page-links { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 9px; }
  .area-page-link { grid-column: span 2; padding: 12px; gap: 9px; }
  .area-page-link:nth-last-child(-n+2) { grid-column: span 3; }
  .area-page-link b { font-size: .9375rem; }
  .illustrated-area-hero { grid-template-columns: 1fr 1fr; min-height: 350px; }
  .illustrated-area-hero .area-hero-text { padding: 35px 0 36px 12%; }
  .illustrated-area-hero h1 { font-size: 3rem; }
  .illustrated-area-hero h2 { font-size: 1.125rem; }
  .illustrated-area-hero p { font-size: .9375rem; }
  .area-hero-art { min-height: 300px; }
  .area-hero-art img { width: 100%; height: 280px; }
  .area-art-halo { width: 230px; height: 230px; }
  .illustrated-area-hero .eyebrow { font-size: .68rem; letter-spacing: .8px; }
  .illustrated-area-hero .button { padding: 16px; font-size: .875rem; gap: 10px; }
}
@media (max-width:540px) {
  .destination-card { min-height: 480px; }
  .destination-top { padding: 18px 23px; }
  .destination-art { height: 270px; }
  .destination-illustration { width: 85%; height: 255px; margin-top: 7px; }
  .destination-content { margin-top: 250px; padding: 23px 24px; }
  .destination-content p { min-height: auto; }
  .destination-kicker { font-size: .7rem; }
  .destination-action { font-size: .875rem; }
  .area-navigation-intro { display: block; }
  .back-home { display: inline-block; margin-top: 12px; }
  .area-page-link { display: block; padding: 12px 8px; text-align: center; }
  .area-link-icon { display: none; }
  .area-page-link b { font-size: .875rem; }
  .area-page-link small { font-size: .75rem; margin-top: 5px; }
  .area-page-link:nth-last-child(-n+2) { display: flex; justify-content: center; }
  .illustrated-area-hero { grid-template-columns: 1fr; }
  .illustrated-area-hero .area-hero-text { padding: 33px 6% 15px; }
  .illustrated-area-hero h1 { font-size: 3.2rem; }
  .illustrated-area-hero h2 { font-size: 1.2rem; }
  .illustrated-area-hero p { font-size: 1rem; }
  .area-hero-art { min-height: 260px; padding: 0 6% 22px; }
  .area-hero-art img { width: 80%; height: 260px; }
  .area-art-halo { width: 220px; height: 220px; }
}
@media (prefers-reduced-motion:reduce) { .destination-illustration,.area-page-link { transition: none; } .destination-card:is(:hover,:focus-visible) .destination-illustration { transform: none; } }
/* Reserve the illustration space without making card height depend on text margins. */
.destination-card { display: grid; grid-template-rows: 240px 1fr; }
.destination-top { position: absolute; inset: 0 0 auto; }
.destination-content { grid-row: 2; margin-top: 0; }
@media (max-width:1200px) { .destination-card { grid-template-rows: 220px 1fr; } }
@media (max-width:1000px) { .destination-card { grid-template-rows: 250px 1fr; } }
@media (max-width:540px) { .destination-card { grid-template-rows: 260px 1fr; } }
/* Keep complete sketches inside the shared illustration frame. */
.destination-art { height: 240px; }
.destination-illustration { height: 215px; }
@media (max-width:1200px) { .destination-art { height: 220px; } .destination-illustration { height: 195px; } }
@media (max-width:1000px) { .destination-art { height: 250px; } .destination-illustration { height: 225px; } }
@media (max-width:540px) { .destination-art { height: 260px; } .destination-illustration { height: 242px; } }
.destination-card { grid-template-columns: minmax(0,1fr); justify-content: stretch; }