@font-face {
  font-family: 'Varve Display';
  src: url('assets/fonts/space-grotesk-latin-v22.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
.veladura {
  --veladura-title-opacity: 1;
  --veladura-ground: #332820;
  --veladura-bridge-opacity: 0;
  position: relative;
  background: var(--veladura-ground);
  color: #31392f;
}
.veladura-stage { position: relative; padding: 76px 6vw 60px; }
.veladura-frame { position: relative; margin: 0 auto; max-width: 1440px; }
.veladura-title {
  margin: 0 0 44px;
  font: 400 clamp(32px, 5vw, 72px)/1.15 'Varve Display', Space, sans-serif;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.veladura-title-lead, .veladura-title-lead > span { display: block; }
.veladura-title-end { display: flex; align-items: baseline; gap: .28em; }
.veladura-title-join { font-size: 1em; letter-spacing: inherit; }
.veladura-title em {
  color: #4b5a3e; font-style: normal; font-size: 1em;
  line-height: inherit; letter-spacing: inherit;
}
.veladura-origin {
  margin: 30px 0 0;
  display: flex; align-items: center; gap: 14px;
  font: 400 11px/1.5 'Varve Display', Space, sans-serif;
  letter-spacing: .16em; text-transform: uppercase;
  color: #5a4636;
}
.veladura-origin::before {
  content: ''; width: 32px; height: 1px;
  background: currentColor; opacity: .5;
}
.veladura:not([data-veladura-mode='scroll']) .veladura-stage {
  margin: 22px clamp(12px, 3vw, 48px);
  background: #d6bfa2;
  box-shadow: 0 16px 36px #130d0840;
}
.veladura-fallback, .veladura-fallback img { display: block; width: 100%; height: auto; }
.veladura-canvas { display: none; width: 100%; height: 100%; }
.veladura-description {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.veladura-status { margin: 24px auto 0; max-width: 700px; font: 14px/1.5 Inter, sans-serif; }
.veladura[data-veladura-mode='scroll'] { height: 410svh; }
.veladura[data-veladura-mode='scroll']::before {
  content: ''; position: absolute; z-index: 1; left: 0; right: 0;
  bottom: 100%; height: min(110px, 12svh); pointer-events: none;
  opacity: var(--veladura-bridge-opacity);
  background: linear-gradient(to bottom, transparent, var(--veladura-ground));
}
.veladura[data-veladura-mode='scroll'] .veladura-stage {
  position: sticky; top: 0; height: 100svh; padding: 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.veladura[data-veladura-mode='scroll'] .veladura-frame {
  width: min(100%, calc(100svh * 1672 / 941));
  max-width: none; aspect-ratio: 1672 / 941; container-type: inline-size;
}
.veladura[data-veladura-mode='scroll']:not([data-veladura-ready='true']) .veladura-frame::before {
  content: ''; position: absolute; inset: 5% 4%; pointer-events: none;
  background: #d6bfa2; box-shadow: 0 10px 24px #0d080557;
}
html[data-view='vertical'] .veladura[data-veladura-mode='scroll']:not([data-veladura-ready='true']) .veladura-frame::before {
  inset: .8% 4% 3%;
}
.veladura[data-veladura-mode='scroll'] .veladura-title {
  position: absolute; z-index: 2; margin: 0;
  left: 6.220096%; top: 16%; font-size: 6.220096cqw;
  opacity: var(--veladura-title-opacity); pointer-events: none;
}
.veladura[data-veladura-mode='scroll'] .veladura-origin {
  position: absolute; z-index: 2; margin: 0;
  left: 6.220096%; bottom: 8%;
  font-size: clamp(9px, 1cqw, 14px);
  opacity: var(--veladura-title-opacity); pointer-events: none;
}
.veladura[data-veladura-mode='scroll'] .veladura-fallback {
  position: absolute; inset: 0; visibility: hidden;
}
.veladura[data-veladura-mode='scroll'][data-veladura-ready='true'] .veladura-canvas { display: block; }
.veladura[data-veladura-mode='scroll'][data-veladura-error='true'] .veladura-fallback { visibility: visible; }
html[data-view='vertical'] .veladura[data-veladura-mode='scroll'] { height: 360svh; }
html[data-view='vertical'] .veladura[data-veladura-mode='scroll'] .veladura-frame {
  width: min(100%, calc(100svh * 941 / 1672)); aspect-ratio: 941 / 1672;
}
html[data-view='vertical'] .veladura[data-veladura-mode='scroll'] .veladura-title {
  left: 8.076514%; top: 2%; font-size: 11.902232cqw;
}
html[data-view='vertical'] .veladura[data-veladura-mode='scroll'] .veladura-origin {
  left: 8.076514%; bottom: 7%;
  font-size: clamp(9px, 2.55cqw, 12px); gap: 10px;
}
@media (max-width: 760px) and (orientation: portrait) {
  .veladura-title { font-size: clamp(28px, 8vw, 56px); }
}
@media (prefers-reduced-motion: reduce) {
  .veladura[data-veladura-mode='scroll'] { height: auto !important; }
  .veladura::before { display: none; }
}