/* Shared foundation for all variants. Variant stylesheets set the tokens:
   --v-bg, --v-fg, --v-accent, --v-radius (viewer + story cards read them). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--v-accent, #d6b26e); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* reveal */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* stories rail */
.story { position: relative; flex: 0 0 auto; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.story__media { position: relative; display: block; overflow: hidden; aspect-ratio: 9 / 16; border-radius: var(--v-radius, 16px); background: #000; }
.story__media img, .story__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .4s, transform .8s cubic-bezier(.2,.7,.2,1); }
.story__media video { opacity: 0; }
.story.is-playing .story__media video { opacity: 1; }
.story:hover .story__media img { transform: scale(1.04); }
.story__label { display: block; margin-top: 10px; }

/* viewer */
html.viewer-open { overflow: hidden; }
.viewer { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgba(4, 10, 14, .92); backdrop-filter: blur(8px); }
.viewer[hidden] { display: none; }
.viewer__frame { position: relative; height: min(92svh, 860px); aspect-ratio: 9 / 16; max-width: 100vw; border-radius: 18px; overflow: hidden; background: #000; }
.viewer__video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.viewer__bars { position: absolute; z-index: 3; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; }
.viewer__bars span { flex: 1; height: 2px; background: rgba(255,255,255,.3); border-radius: 2px; overflow: hidden; }
.viewer__bars i { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.viewer__top { position: absolute; z-index: 3; top: 22px; left: 12px; right: 12px; display: flex; align-items: center; gap: 8px; color: #fff; font: 500 13px/1 system-ui, sans-serif; }
.viewer__brand { flex: 1; opacity: .9; }
.viewer__btn { border: 0; background: rgba(0,0,0,.35); color: #fff; border-radius: 99px; padding: 8px 12px; cursor: pointer; font-size: 13px; }
.viewer__close { width: 34px; height: 34px; padding: 0; }
.viewer__nav { position: absolute; z-index: 2; top: 15%; bottom: 15%; width: 35%; border: 0; background: transparent; cursor: pointer; }
.viewer__nav--prev { left: 0; } .viewer__nav--next { right: 0; }
.viewer__ig { position: absolute; z-index: 3; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 10px 16px; border-radius: 99px; background: rgba(255,255,255,.92); color: #111; font: 600 13px/1 system-ui, sans-serif; text-decoration: none; white-space: nowrap; }
@media (max-width: 560px) { .viewer__frame { height: 100svh; border-radius: 0; } }

/* map */
.map-pin { position: relative; width: 28px; height: 28px; }
.map-pin span { position: absolute; inset: 0; border-radius: 50%; background: var(--v-accent, #d6b26e); box-shadow: 0 0 0 6px color-mix(in srgb, var(--v-accent, #d6b26e) 30%, transparent), 0 0 0 14px color-mix(in srgb, var(--v-accent, #d6b26e) 12%, transparent); }
.map-pin span::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--v-bg, #061a20); }