/* Homepage-only polish. Content is visible by default, including without JS. */
.home .home-entering{animation:landlore-home-enter 460ms cubic-bezier(.2,.65,.3,1) both;animation-delay:var(--home-enter-delay,0ms)}
@keyframes landlore-home-enter{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
.home :is(.destination-card.clickable-card,.story-card,.chapter-link){transition:transform 220ms ease,box-shadow 220ms ease,border-color 220ms ease}
.home :is(.destination-photo>a,.story-card__image){display:block;overflow:hidden}
.home :is(.destination-photo>a img,.story-card__image img){transition:transform 240ms ease}
.home :is(.round-arrow,.chapter-arrow){transition:translate 220ms ease}
.home :is(.destination-card.clickable-card,.story-card,.chapter-link):focus-within{transform:translateY(-4px);box-shadow:0 12px 28px #183d3e1c}
.home :is(.destination-card,.chapter-link):focus-within :is(.round-arrow,.chapter-arrow){translate:2px -2px}
.home .destinations-menu[open]>.destinations-dropdown,.home .menu-item-has-children:focus-within>.sub-menu{animation:landlore-menu-enter 200ms ease-out}
@keyframes landlore-menu-enter{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
.home .primary-nav :is(.topic-menu-card,.marine-menu-link,.destination-browse-links>a,.destination-world-groups a){transition:background-color 180ms ease,border-color 180ms ease,box-shadow 180ms ease}
.home .primary-nav :is(.topic-menu-card,.marine-menu-link,.destination-browse-links>a):focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.home #world-atlas{scroll-margin-top:24px}
.home .home-card-carousel-heading{display:flex;align-items:center;justify-content:flex-end;gap:14px;min-width:0}
.home .home-card-carousel-controls{display:flex;align-items:center;gap:7px}
.home .home-card-carousel-controls button{display:grid;width:44px;height:44px;place-items:center;border:1px solid #c6d9d0;border-radius:50%;background:var(--paper);color:var(--ink);font-size:1.55rem;line-height:1;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}
.home .home-card-carousel-controls button:hover{transform:translateY(-1px);border-color:#146a63;background:#146a63;color:#fff}
.home .home-card-carousel-controls button:focus-visible{outline:3px solid #d9822b;outline-offset:3px}
.home .home-card-carousel{display:flex!important;flex-wrap:nowrap!important;align-items:stretch;gap:20px;overflow-x:auto;overflow-y:hidden;padding:4px 2px 14px;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-inline:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.home .home-card-carousel::-webkit-scrollbar{display:none}
.home .home-place-grid.home-card-carousel>:is(.country-directory-card,.water-place-card,.regional-image-result){display:flex!important;flex:0 0 286px;width:286px;min-width:0;max-width:286px;scroll-snap-align:start}
.home .home-place-grid.home-card-carousel .regional-image-result>*{width:100%;height:100%}
.home .home-story-grid.home-card-carousel>.story-card{display:flex!important;flex:0 0 320px;width:320px;min-width:0;max-width:320px;scroll-snap-align:start}
.home .home-card-carousel:focus-visible{outline:2px solid #146a63;outline-offset:4px}
@media(max-width:700px){.home .home-card-carousel-heading{justify-content:flex-start;gap:12px}.home .home-card-carousel-controls button{width:44px;height:44px}.home .home-place-grid.home-card-carousel>:is(.country-directory-card,.water-place-card,.regional-image-result){flex-basis:82%;width:82%;max-width:320px}.home .home-story-grid.home-card-carousel>.story-card{flex-basis:88%;width:88%;max-width:340px}}
@media(max-width:560px){.home .home-curiosity-subhead{flex-direction:row;align-items:center;justify-content:space-between}.home .home-card-carousel-heading{gap:8px}.home .home-card-carousel-controls{gap:5px}.home .home-card-carousel-controls button{width:42px;height:42px}.home .home-card-carousel-heading>.text-link{font-size:.78rem}}
.home .world-atlas-figure.map-arrival{animation:landlore-map-arrival 1600ms ease-out}
@keyframes landlore-map-arrival{0%,100%{box-shadow:0 18px 55px #183d3e0a}35%{box-shadow:0 0 0 5px #187f7855,0 18px 55px #183d3e18}}
.home .support-curiosity-icon{display:inline-flex;vertical-align:middle;margin-right:9px;color:var(--ink)}
.home .support-curiosity-icon svg{width:23px;height:23px;transition:rotate 240ms ease}
.home .newsletter-strip:focus-within .support-curiosity-icon svg{rotate:18deg}
@media(hover:hover) and (pointer:fine){
 .home :is(.destination-card.clickable-card,.story-card,.chapter-link):hover{transform:translateY(-4px);box-shadow:0 12px 28px #183d3e1c}
 .home :is(.destination-card.clickable-card,.story-card):hover :is(.destination-photo>a img,.story-card__image img){transform:scale(1.025)}
 .home :is(.destination-card,.chapter-link):hover :is(.round-arrow,.chapter-arrow){translate:2px -2px}
 .home .menu-item-has-children:hover>.sub-menu{animation:landlore-menu-enter 200ms ease-out}
 .home .newsletter-strip:hover .support-curiosity-icon svg{rotate:18deg}
}
@media(prefers-reduced-motion:reduce){
 .home .home-entering,.home .world-atlas-figure.map-arrival,.home .destinations-menu[open]>.destinations-dropdown,.home .sub-menu{animation:none!important;opacity:1;translate:none}
 .home :is(.destination-card,.story-card,.chapter-link),.home :is(.destination-photo>a img,.story-card__image img){transform:none!important}
 .home :is(.round-arrow,.chapter-arrow){translate:none!important}.home .support-curiosity-icon svg{rotate:none!important}
}

/* ==========================================================================
   The Landlore — Merged Live Stories Golden Ribbon Carousel
   ========================================================================== */
.hero-carousel-section {
  position: relative;
  background: linear-gradient(180deg, #fcf7ed 0%, #f6ecda 100%);
  border-block: 1px solid #e8dbca;
  padding: 16px 0 20px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 3px 12px rgba(180, 130, 40, 0.05);
}

.hero-carousel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.hero-carousel-lead {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #173d3e;
  flex-wrap: wrap;
}

.carousel-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 0 rgba(203, 70, 46, 0.6);
  animation: carousel-dot-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  display: inline-block;
}

@keyframes carousel-dot-pulse {
  0% { box-shadow: 0 0 0 0 rgba(203, 70, 46, 0.6); }
  70% { box-shadow: 0 0 0 7px rgba(203, 70, 46, 0); }
  100% { box-shadow: 0 0 0 0 rgba(203, 70, 46, 0); }
}

.carousel-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--teal);
  text-transform: uppercase;
}

.carousel-divider {
  color: rgba(9, 42, 73, 0.25);
  font-size: 14px;
}

.carousel-subtext {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.hero-carousel-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.carousel-ctrl-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #dfd3c1;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
  padding: 0;
}

.carousel-ctrl-btn:hover {
  background: #fffdf8;
  border-color: var(--coral);
  color: var(--coral);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(9, 42, 73, 0.12);
}

.carousel-ctrl-btn:active {
  transform: translateY(0);
}

.carousel-all-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 1px;
  margin-left: 6px;
  transition: color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.carousel-all-link:hover {
  color: var(--coral);
  border-bottom-color: var(--coral);
  transform: translateX(2px);
}
}

/* Viewport and Infinite Scrolling Track */
.hero-carousel-viewport {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  /* Edge fade mask on desktop */
  mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}

.hero-carousel-viewport:active {
  cursor: grabbing;
}

.hero-carousel-viewport::-webkit-scrollbar {
  display: none;
}

.hero-carousel-track {
  display: flex;
  gap: 16px;
  width: max-content;
  padding: 4px 24px;
  animation: landlore-carousel-slide 55s linear infinite;
  will-change: transform;
}

@keyframes landlore-carousel-slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Pause on hover, focus, or when toggled */
.hero-carousel-section:hover .hero-carousel-track,
.hero-carousel-section:focus-within .hero-carousel-track,
.hero-carousel-section.is-paused .hero-carousel-track {
  animation-play-state: paused;
}

/* Story Capsule Card */
.carousel-card-item {
  flex: 0 0 320px;
  background: #ffffff;
  border: 1px solid #e5dbcb;
  border-radius: 12px;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(9, 42, 73, 0.04);
}

.carousel-card-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(9, 42, 73, 0.1);
  border-color: var(--coral);
}

.carousel-card-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 13px;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.carousel-card-thumb {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--line);
}

.carousel-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.carousel-card-item:hover .carousel-card-thumb img {
  transform: scale(1.08);
}

.carousel-card-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.carousel-card-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.carousel-tone-pill {
  padding: 2px 7px;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10px;
  line-height: 1.3;
}

.tone--coral { background: #cb462e18; color: #cb462e; }
.tone--teal { background: #146a6318; color: #146a63; }
.tone--saffron { background: #d9822b18; color: #d9822b; }
.tone--olive { background: #4a7c3618; color: #4a7c36; }
.tone--blue { background: #2d7da618; color: #2d7da6; }

.carousel-place-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carousel-compass {
  display: inline-flex;
  align-items: center;
  color: var(--teal);
}

.carousel-compass svg {
  width: 11px;
  height: 11px;
}

.carousel-card-heading {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.28;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carousel-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
}

.carousel-read-mins {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

.carousel-arrow-icon {
  font-size: 13px;
  color: var(--muted);
  transition: transform 0.18s ease, color 0.18s ease;
}

.carousel-card-item:hover .carousel-arrow-icon {
  transform: translate(2px, -2px);
  color: var(--coral);
}

/* Dark Mode Adaptations */
body.landlore-dark .hero-carousel-section {
  background: linear-gradient(180deg, #122728 0%, #173234 100%);
  border-color: #21484b;
  box-shadow: none;
}

body.landlore-dark .hero-carousel-lead,
body.landlore-dark .carousel-subtext {
  color: #b8ccc7;
}

body.landlore-dark .carousel-kicker {
  color: var(--teal);
}

body.landlore-dark .carousel-divider {
  color: rgba(255, 255, 255, 0.2);
}

body.landlore-dark .carousel-card-item {
  background: #193839;
  border-color: #265154;
}

body.landlore-dark .carousel-card-item:hover {
  border-color: var(--coral);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

body.landlore-dark .carousel-ctrl-btn {
  background: #1c3c3e;
  border-color: #29575a;
  color: #fffaf2;
}

body.landlore-dark .carousel-ctrl-btn:hover {
  background: #234d50;
  border-color: var(--coral);
  color: var(--coral);
}

body.landlore-dark .carousel-all-link {
  color: #fffaf2;
  border-bottom-color: #fffaf2;
}

body.landlore-dark .carousel-all-link:hover {
  color: var(--coral);
  border-bottom-color: var(--coral);
}
}

/* Responsive Adaptations */
@media (max-width: 768px) {
  .hero-carousel-section {
    padding: 14px 0 18px;
  }
  .hero-carousel-viewport {
    mask-image: none;
    -webkit-mask-image: none;
  }
  .hero-carousel-subtext {
    display: none;
  }
  .carousel-card-item {
    flex: 0 0 290px;
  }
  .carousel-card-thumb {
    width: 64px;
    height: 64px;
  }
  .carousel-card-heading {
    font-size: 13px;
  }
}

@media (max-width: 560px) {
  .hero-carousel-controls .carousel-ctrl-btn {
    display: none;
  }
  .carousel-card-item {
    flex: 0 0 270px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-carousel-track {
    animation: none !important;
  }
  .carousel-pulse-dot {
    animation: none !important;
  }
}