/* Jeff Bradford Selections — Journey */

.jbs-journey {
	--jbs-step: 100svh;               /* vertical scroll per slide */
	--jbs-gin: "gin", "Bebas Neue", Impact, sans-serif;
	--jbs-franklin: "franklin-gothic-atf", "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
	--jbs-hand: "shadows-into-light", "Shadows Into Light", "Comic Sans MS", cursive;
	--jbs-shadow: 0 0 10px rgba(0, 0, 0, .3);
	--jbs-text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 14px rgba(0, 0, 0, .55), 0 0 32px rgba(0, 0, 0, .35); /* body copy over busy photos */
	position: relative;
	--jbs-tail: 55svh; /* extra scroll that holds on the last scene before the page moves on */
	height: calc((var(--jbs-n) - 1) * var(--jbs-step) + 100svh + var(--jbs-tail));
	background: #000;
	color: #fff;
}

/* Journey motion: less scrolling per scene (tunable per page via the step setting) */
.jbs-journey[data-motion="journey"],
.jbs-journey[data-motion="travel"] { --jbs-step: var(--jbs-step-journey, 68svh); }

.jbs-journey *,
.jbs-journey *::before,
.jbs-journey *::after { box-sizing: border-box; }

.jbs-journey__pin {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100dvh; /* fills the screen whether the phone's toolbars are showing or not (no black band) */
	width: 100%;
	overflow: hidden;
}

/* Backgrounds cross-fade underneath the moving slides */
.jbs-journey__bgs,
.jbs-bg {
	position: absolute;
	inset: 0;
}
.jbs-journey__bgs { z-index: 0; } /* keep the biomes underneath the scenes */
.jbs-bg {
	background-size: cover;
	will-change: opacity, transform;
	background-position: center;
	opacity: 0;
	will-change: transform, opacity;
	backface-visibility: hidden;
}
.jbs-bg.is-on { opacity: 1; }
.jbs-journey__bgs::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .19);
	pointer-events: none;
}

.jbs-journey__track {
	position: relative;
	display: flex;
	height: 100%;
	width: calc(var(--jbs-n) * 100%);
	will-change: transform;
}

.jbs-slide {
	position: relative;
	flex: 0 0 calc(100% / var(--jbs-n));
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 5vw;
	padding: 0 7vw;
	overflow: visible; /* let clouds and plants carry across scenes; the pin clips at the screen edge */
}

/* ---------------- Floating + foreground elements ---------------- */
.jbs-float {
	position: absolute;
	top: 0;
	left: -12%;
	width: 84%;
	height: auto;
	pointer-events: none;
	z-index: 1;
	/* soft sides so a cloud never ends in a hard edge */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent), linear-gradient(to bottom, transparent, #000 22%, #000 70%, transparent);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent), linear-gradient(to bottom, transparent, #000 22%, #000 70%, transparent);
	mask-composite: intersect;
	animation: jbs-drift 3s ease-in-out infinite alternate;
}
@keyframes jbs-drift {
	from { transform: translateX(-23px); }
	to   { transform: translateX(37px); }
}

.jbs-fg {
	position: absolute;
	bottom: 0;
	width: min(24vw, 420px); /* fallback; sized to the card by the script */
	height: auto;
	pointer-events: none;
	z-index: 6; /* in front of the polaroid */
}
/* Travel: plants passing close to you between scenes */
.jbs-journey__near {
	position: absolute;
	inset: 0;
	z-index: 8;
	pointer-events: none;
	overflow: hidden;
}
.jbs-journey img.jbs-near {
	position: absolute;
	left: 0;
	bottom: -6svh;
	height: 62svh;
	width: auto;
	max-width: none;
	visibility: hidden;
	filter: blur(3px) brightness(.8);
	will-change: transform;
	transform-origin: 50% 100%;
}
@media (max-width: 767px) {
	.jbs-journey img.jbs-near { height: 46svh; filter: brightness(.8); }
}
.jbs-fg--left   { left: 4%; }
.jbs-fg--center { left: 50%; transform: translateX(-50%); }
.jbs-fg--right  { right: 2%; }

/* ---------------- Story slides ---------------- */
.jbs-slide__text,
.jbs-slide__cardcol {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.jbs-slide__text { z-index: 4; gap: 25px; }
.jbs-slide__cardcol { z-index: 3; align-items: flex-end; }
.jbs-slide--card-left .jbs-slide__cardcol { order: -1; align-items: flex-start; }

.jbs-slide__eyebrow,
.jbs-slide__title,
.jbs-slide__desc { margin: 0; color: #fff; text-shadow: var(--jbs-shadow); }
.jbs-journey .jbs-slide__eyebrow,
.jbs-journey .jbs-slide__desc { text-shadow: var(--jbs-text-shadow); }

.jbs-slide__eyebrow {
	font-family: var(--jbs-franklin);
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(1.1rem, 1.65vw, 2rem);
	line-height: 1.2;
	letter-spacing: .02em;
}
.jbs-slide__title {
	font-family: var(--jbs-gin);
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(3.5rem, 8.6vw, 10.5rem);
	line-height: .9;
	overflow-wrap: normal;
	word-break: keep-all;
	hyphens: none;
	text-wrap: balance;
}
.jbs-slide--long-title .jbs-slide__title { font-size: clamp(3rem, 6.6vw, 8rem); }
.jbs-slide__desc {
	font-family: var(--jbs-franklin);
	font-weight: 400;
	font-size: clamp(.95rem, 1.2vw, 1.4rem);
	line-height: 1.5;
	max-width: 580px;
}
@media (min-width: 2400px) { .jbs-slide__desc { max-width: 700px; } }

/* The polaroid card */
.jbs-card {
	position: relative;
	width: 90%;
	margin: 0;
	padding: 3% 3% 4%;
	background: #fff;
	transform: rotate(2deg);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.jbs-slide--card-left .jbs-card { transform: rotate(-2deg); }

.jbs-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #111;
}
.jbs-card__img,
.jbs-card__media iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}
.jbs-card__media iframe {
	pointer-events: none;
	opacity: 0;
	transition: opacity .8s ease;
	/* Crop YouTube's title bar, logo and edges out of view: the card shows only footage */
	width: 140%;
	height: 140%;
	max-width: none; /* theme caps iframes at 100% wide, which let the card photo peek out on the right */
	max-height: none;
	inset: auto;
	top: -20%;
	left: -20%;
}
.jbs-card__media iframe.is-ready { opacity: 1; }

.jbs-watch {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 15px 30px;
	border: 2px solid #fff;
	border-radius: 180px;
	background: rgba(0, 0, 0, .39);
	color: #fff;
	font-family: var(--jbs-franklin);
	font-size: 1rem;
	letter-spacing: .04em;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 0 10px rgba(0, 0, 0, .25);
	transition: transform .25s ease, background-color .25s ease;
}
.jbs-watch svg { width: .8em; height: .8em; fill: currentColor; }
.jbs-watch:hover { transform: translate(-50%, -50%) scale(.94); background: rgba(0, 0, 0, .55); }
.jbs-watch:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

.jbs-card__caption {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: .35em;
	padding-right: 0;
	color: #000;
	font-family: var(--jbs-hand);
	font-size: clamp(1.4rem, 2.6vw, 3rem);
	line-height: 1.15;
}
.jbs-card__caption.is-single { justify-content: center; padding-right: 0; }
.jbs-card__caption > span:last-child:not(:first-child) { margin-left: auto; text-align: right; }

.jbs-bottle {
	position: absolute;
	right: -14%;
	bottom: 15%;
	width: 38%;
	height: auto;
	z-index: 5;
	transform: rotate(7deg);
	pointer-events: none;
	filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .3));
}

/* ---------------- Intro ---------------- */
.jbs-slide--intro { justify-content: space-between; }
.jbs-intro__text {
	position: relative;
	z-index: 9;
	flex: 0 1 62%;
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}
.jbs-intro__logo { margin: 0 -18% 0 0; line-height: 0; }
.jbs-intro__logo img { display: block; width: 100%; height: auto; }
.jbs-intro__logo--text {
	font-family: var(--jbs-gin);
	font-size: clamp(4rem, 12vw, 14rem);
	line-height: .85;
	text-transform: uppercase;
}
.jbs-intro__tagline {
	margin: 0 0 0 20%;
	width: 67%;
	color: #fff;
	font-family: var(--jbs-franklin);
	font-weight: 300;
	text-transform: uppercase;
	font-size: clamp(1.3rem, 2.5vw, 3.5rem);
	line-height: 1.15;
	text-shadow: var(--jbs-shadow);
}
.jbs-intro__photo {
	position: relative;
	z-index: 8;
	flex: 0 0 30%;
	aspect-ratio: 4 / 6;
	max-height: 82svh;
	box-shadow: 0 0 10px rgba(0, 0, 0, .25);
	animation: jbs-bob 3s ease-in-out infinite;
	overflow: hidden;
}
@keyframes jbs-bob-sm {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-4px); }
}
@keyframes jbs-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-10px); }
}
.jbs-intro__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.jbs-intro__img.is-on { opacity: 1; }
.jbs-intro__social {
	position: absolute;
	left: 7%;
	bottom: 4svh;
	z-index: 9;
	display: flex;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.jbs-intro__social a { display: block; color: #fff; }
.jbs-intro__social svg { display: block; width: 20px; height: 20px; fill: currentColor; }
.jbs-intro__social a:hover { opacity: .7; }

/* ---------------- Ending ---------------- */
.jbs-slide--end { justify-content: center; }
.jbs-end__inner {
	position: relative;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	text-align: center;
}
.jbs-end__title {
	margin: 0;
	text-wrap: balance;
	color: #fff;
	font-family: var(--jbs-gin);
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(4rem, 10.5vw, 12rem);
	line-height: .9;
	text-shadow: var(--jbs-shadow);
}
.jbs-end__arrow { display: block; color: #fff; animation: jbs-bob 2s ease-in-out infinite; }
.jbs-journey .jbs-end__arrow:hover,
.jbs-journey .jbs-end__arrow:focus,
.jbs-journey .jbs-end__arrow:active { color: #fff; opacity: .8; } /* not the theme's link color */
.jbs-end__arrow svg { display: block; width: 44px; height: 50px; fill: currentColor; }

/* ---------------- Controls: previous / skip / next + progress ---------------- */
.jbs-nav {
	position: absolute;
	left: 50%;
	bottom: max(3svh, 50px); /* sits above the progress line and its map pin */
	z-index: 20;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 10px;
}
.jbs-nav__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 40px;
	height: 40px;
	padding: 0;
	border: 1.5px solid rgba(255, 255, 255, .85);
	border-radius: 999px;
	background: rgba(0, 0, 0, .3);
	color: #fff;
	cursor: pointer;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: opacity .4s ease, background-color .25s ease, transform .25s ease, padding .3s ease;
}
/* Beat the theme's default (pink) button hover/focus colors */
.jbs-journey .jbs-nav__btn,
.jbs-journey .jbs-nav__btn:focus,
.jbs-journey .jbs-nav__btn:active {
	background: rgba(0, 0, 0, .3);
	color: #fff;
	border-color: rgba(255, 255, 255, .85);
	box-shadow: none;
	text-decoration: none;
}
.jbs-journey .jbs-nav__btn:hover { background: rgba(0, 0, 0, .55); color: #fff; border-color: #fff; transform: scale(1.06); }
.jbs-nav__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.jbs-nav__btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.jbs-nav__begin {
	display: none;
	font-family: var(--jbs-franklin);
	font-size: .8rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}
/* At the start: one clear invitation instead of three controls */
.jbs-journey.is-at-start .jbs-nav__next { padding: 0 14px 0 20px; animation: jbs-nudge 2.4s ease-in-out infinite; }
.jbs-journey.is-at-start .jbs-nav__begin { display: inline; }
.jbs-journey.is-at-start .jbs-nav__prev,
.jbs-journey.is-done .jbs-nav__next { opacity: 0; pointer-events: none; }
.jbs-journey.is-at-start .jbs-nav__prev { display: none; }
@keyframes jbs-nudge {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(5px); }
}
.jbs-progress {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 0;
	z-index: 20;
	height: 16px;
	transition: opacity .4s ease;
}
.jbs-progress::before,
.jbs-progress__fill {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 6px;
	height: 2px;
	background: rgba(255, 255, 255, .22);
	pointer-events: none;
}
.jbs-progress__fill {
	background: #fff;
	transform-origin: 0 50%;
	transform: scaleX(0);
}
.jbs-journey .jbs-progress__dot,
.jbs-journey .jbs-progress__dot:hover,
.jbs-journey .jbs-progress__dot:focus,
.jbs-journey .jbs-progress__dot:active {
	position: absolute;
	bottom: 2px;
	width: 10px;
	height: 10px;
	min-height: 0;
	padding: 0;
	margin: 0 0 0 -5px;
	border: 1.5px solid #fff;
	border-radius: 50%;
	background: rgba(0, 0, 0, .35);
	box-shadow: none;
	cursor: pointer;
	transition: transform .25s ease, background-color .25s ease;
}
.jbs-journey .jbs-progress__dot.is-on { background: #fff; }
.jbs-journey .jbs-progress__dot:hover { transform: scale(1.35); }
.jbs-journey .jbs-progress__dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.jbs-progress__dot::after {
	content: attr(data-label);
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translate(-50%, 4px);
	padding: 6px 12px;
	border-radius: 4px;
	background: rgba(0, 0, 0, .7);
	color: #fff;
	font-family: var(--jbs-hand);
	font-size: 1.15rem;
	line-height: 1.1;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
.jbs-progress__dot:first-of-type::after { left: 0; transform: translate(-6px, 4px); }
.jbs-progress__dot:last-of-type::after { left: auto; right: 0; transform: translate(6px, 4px); }
.jbs-progress__dot:hover::after,
.jbs-progress__dot:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.jbs-progress__dot:first-of-type:hover::after,
.jbs-progress__dot:first-of-type:focus-visible::after { transform: translate(-6px, 0); }
.jbs-progress__dot:last-of-type:hover::after,
.jbs-progress__dot:last-of-type:focus-visible::after { transform: translate(6px, 0); }
.jbs-journey.is-at-start .jbs-progress { opacity: 0; pointer-events: none; }
/* Map pin marking where you are */
.jbs-journey__tail {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 1px;
	height: var(--jbs-tail);
	visibility: hidden;
	pointer-events: none;
}
.jbs-progress__pin {
	position: absolute;
	bottom: 12px;
	width: 16px;
	height: 22px;
	margin-left: -8px;
	color: #fff;
	cursor: default;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45));
	transition: left .6s cubic-bezier(.3, .7, .2, 1);
}
.jbs-progress__pin svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.jbs-progress__pin::after {
	content: attr(data-label);
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translate(-50%, 4px);
	padding: 6px 12px;
	border-radius: 4px;
	background: rgba(0, 0, 0, .7);
	color: #fff;
	font-family: var(--jbs-hand);
	font-size: 1.15rem;
	line-height: 1.1;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
.jbs-progress__pin:hover::after { opacity: 1; transform: translate(-50%, 0); }
.jbs-progress__pin.is-first::after { left: 0; transform: translate(-4px, 4px); }
.jbs-progress__pin.is-first:hover::after { transform: translate(-4px, 0); }
.jbs-progress__pin.is-last::after { left: auto; right: 0; transform: translate(4px, 4px); }
.jbs-progress__pin.is-last:hover::after { transform: translate(4px, 0); }
@media (hover: none) { .jbs-progress__pin::after { display: none; } }
.jbs-progress__pin.is-drop { animation: jbs-pin .55s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes jbs-pin {
	0%   { translate: 0 -10px; opacity: .3; }
	100% { translate: 0 0; opacity: 1; }
}
@media (hover: none) { .jbs-progress__dot::after { display: none; } }

/* The intro logo is a vector image: keep it as one ready-made layer so it doesn't
   re-draw (flicker) while it slides. Other layers are left to the browser. */
.jbs-intro__text { will-change: translate, opacity; }
.jbs-intro__logo img { transform: translateZ(0); backface-visibility: hidden; }

/* ---------------- Atmosphere ---------------- */

/* Light rays through the sky (drawn, not photos): a few broad shafts that are
   brightest in the middle and fade smoothly to nothing at their edges. */
.jbs-journey .jbs-bg .jbs-rays {
	position: absolute;
	inset: -30% -20% 0 -20%;
	pointer-events: none;
	opacity: .85;
	background:
		radial-gradient(ellipse 28% 20% at 76% 2%, rgba(255, 240, 210, .5), transparent 70%),
		conic-gradient(from 166deg at 76% -6%,
			transparent 0deg,
			rgba(255, 238, 205, 0.010) 0.00deg, rgba(255, 238, 205, 0.034) 1.17deg, rgba(255, 238, 205, 0.090) 2.33deg, rgba(255, 238, 205, 0.195) 3.50deg, rgba(255, 238, 205, 0.348) 4.67deg, rgba(255, 238, 205, 0.511) 5.83deg, rgba(255, 238, 205, 0.620) 7.00deg, rgba(255, 238, 205, 0.511) 8.17deg, rgba(255, 238, 205, 0.348) 9.33deg, rgba(255, 238, 205, 0.195) 10.50deg, rgba(255, 238, 205, 0.090) 11.67deg, rgba(255, 238, 205, 0.034) 12.83deg, rgba(255, 238, 205, 0.010) 14.00deg,
			transparent 15deg,
			rgba(255, 238, 205, 0.007) 18.00deg, rgba(255, 238, 205, 0.024) 19.00deg, rgba(255, 238, 205, 0.065) 20.00deg, rgba(255, 238, 205, 0.142) 21.00deg, rgba(255, 238, 205, 0.252) 22.00deg, rgba(255, 238, 205, 0.371) 23.00deg, rgba(255, 238, 205, 0.450) 24.00deg, rgba(255, 238, 205, 0.371) 25.00deg, rgba(255, 238, 205, 0.252) 26.00deg, rgba(255, 238, 205, 0.142) 27.00deg, rgba(255, 238, 205, 0.065) 28.00deg, rgba(255, 238, 205, 0.024) 29.00deg, rgba(255, 238, 205, 0.007) 30.00deg,
			transparent 31deg,
			rgba(255, 238, 205, 0.011) 32.00deg, rgba(255, 238, 205, 0.037) 33.33deg, rgba(255, 238, 205, 0.098) 34.67deg, rgba(255, 238, 205, 0.214) 36.00deg, rgba(255, 238, 205, 0.381) 37.33deg, rgba(255, 238, 205, 0.560) 38.67deg, rgba(255, 238, 205, 0.680) 40.00deg, rgba(255, 238, 205, 0.560) 41.33deg, rgba(255, 238, 205, 0.381) 42.67deg, rgba(255, 238, 205, 0.214) 44.00deg, rgba(255, 238, 205, 0.098) 45.33deg, rgba(255, 238, 205, 0.037) 46.67deg, rgba(255, 238, 205, 0.011) 48.00deg,
			transparent 49deg,
			rgba(255, 238, 205, 0.007) 50.00deg, rgba(255, 238, 205, 0.022) 50.83deg, rgba(255, 238, 205, 0.058) 51.67deg, rgba(255, 238, 205, 0.126) 52.50deg, rgba(255, 238, 205, 0.224) 53.33deg, rgba(255, 238, 205, 0.329) 54.17deg, rgba(255, 238, 205, 0.400) 55.00deg, rgba(255, 238, 205, 0.329) 55.83deg, rgba(255, 238, 205, 0.224) 56.67deg, rgba(255, 238, 205, 0.126) 57.50deg, rgba(255, 238, 205, 0.058) 58.33deg, rgba(255, 238, 205, 0.022) 59.17deg, rgba(255, 238, 205, 0.007) 60.00deg,
			transparent 61deg, transparent 360deg);
	-webkit-mask-image: linear-gradient(to bottom, #000 30%, rgba(0, 0, 0, .55) 58%, transparent 88%);
	mask-image: linear-gradient(to bottom, #000 30%, rgba(0, 0, 0, .55) 58%, transparent 88%);
	transform-origin: 76% -6%;
	animation: jbs-rays 13s ease-in-out infinite alternate;
}
.jbs-journey .jbs-bg .jbs-rays--fireflies { opacity: .6; }
.jbs-journey .jbs-bg .jbs-rays--barrel {
	transform-origin: 18% -6%;
	background:
		radial-gradient(ellipse 28% 20% at 18% 2%, rgba(255, 205, 140, .55), transparent 70%),
		conic-gradient(from 120deg at 18% -6%,
			transparent 0deg,
			rgba(255, 200, 130, 0.010) 0.00deg, rgba(255, 200, 130, 0.034) 1.17deg, rgba(255, 200, 130, 0.090) 2.33deg, rgba(255, 200, 130, 0.195) 3.50deg, rgba(255, 200, 130, 0.348) 4.67deg, rgba(255, 200, 130, 0.511) 5.83deg, rgba(255, 200, 130, 0.620) 7.00deg, rgba(255, 200, 130, 0.511) 8.17deg, rgba(255, 200, 130, 0.348) 9.33deg, rgba(255, 200, 130, 0.195) 10.50deg, rgba(255, 200, 130, 0.090) 11.67deg, rgba(255, 200, 130, 0.034) 12.83deg, rgba(255, 200, 130, 0.010) 14.00deg,
			transparent 15deg,
			rgba(255, 200, 130, 0.007) 18.00deg, rgba(255, 200, 130, 0.024) 19.00deg, rgba(255, 200, 130, 0.065) 20.00deg, rgba(255, 200, 130, 0.142) 21.00deg, rgba(255, 200, 130, 0.252) 22.00deg, rgba(255, 200, 130, 0.371) 23.00deg, rgba(255, 200, 130, 0.450) 24.00deg, rgba(255, 200, 130, 0.371) 25.00deg, rgba(255, 200, 130, 0.252) 26.00deg, rgba(255, 200, 130, 0.142) 27.00deg, rgba(255, 200, 130, 0.065) 28.00deg, rgba(255, 200, 130, 0.024) 29.00deg, rgba(255, 200, 130, 0.007) 30.00deg,
			transparent 31deg,
			rgba(255, 200, 130, 0.011) 32.00deg, rgba(255, 200, 130, 0.037) 33.33deg, rgba(255, 200, 130, 0.098) 34.67deg, rgba(255, 200, 130, 0.214) 36.00deg, rgba(255, 200, 130, 0.381) 37.33deg, rgba(255, 200, 130, 0.560) 38.67deg, rgba(255, 200, 130, 0.680) 40.00deg, rgba(255, 200, 130, 0.560) 41.33deg, rgba(255, 200, 130, 0.381) 42.67deg, rgba(255, 200, 130, 0.214) 44.00deg, rgba(255, 200, 130, 0.098) 45.33deg, rgba(255, 200, 130, 0.037) 46.67deg, rgba(255, 200, 130, 0.011) 48.00deg,
			transparent 49deg,
			rgba(255, 200, 130, 0.007) 50.00deg, rgba(255, 200, 130, 0.022) 50.83deg, rgba(255, 200, 130, 0.058) 51.67deg, rgba(255, 200, 130, 0.126) 52.50deg, rgba(255, 200, 130, 0.224) 53.33deg, rgba(255, 200, 130, 0.329) 54.17deg, rgba(255, 200, 130, 0.400) 55.00deg, rgba(255, 200, 130, 0.329) 55.83deg, rgba(255, 200, 130, 0.224) 56.67deg, rgba(255, 200, 130, 0.126) 57.50deg, rgba(255, 200, 130, 0.058) 58.33deg, rgba(255, 200, 130, 0.022) 59.17deg, rgba(255, 200, 130, 0.007) 60.00deg,
			transparent 61deg, transparent 360deg);
}
@keyframes jbs-rays { from { rotate: -2.5deg; } to { rotate: 2.5deg; } }

/* A warm wash of light while you travel between places */
.jbs-journey.no-fx .jbs-rays,
.jbs-journey.no-fx .jbs-glow,
.jbs-journey.no-fx .jbs-particles { display: none; }
.jbs-glow {
	position: absolute;
	inset: 0;
	z-index: 50; /* above the biomes, below the stories (it lives inside the backgrounds) */
	pointer-events: none;
	opacity: 0; /* set by the script while travelling */
	background: radial-gradient(ellipse 70% 60% at 62% 18%, rgba(255, 232, 196, .55), rgba(255, 216, 160, .14) 45%, transparent 72%);
}
.jbs-particles {
	position: absolute;
	inset: 0;
	z-index: 7;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* Ambient sound toggle (only printed when a biome has a sound) */
.jbs-journey .jbs-sound,
.jbs-journey .jbs-sound:hover,
.jbs-journey .jbs-sound:focus,
.jbs-journey .jbs-sound:active {
	position: absolute;
	right: 22px;
	bottom: calc(max(3svh, 50px) + 1px);
	z-index: 20;
	width: 38px;
	height: 38px;
	padding: 8px;
	border: 1.5px solid rgba(255, 255, 255, .85);
	border-radius: 50%;
	background: rgba(0, 0, 0, .3);
	color: #fff;
	cursor: pointer;
	box-shadow: none;
}
.jbs-sound svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.jbs-sound__on { display: none; }
.jbs-journey.is-sound-on .jbs-sound__on { display: inline; }
.jbs-journey.is-sound-on .jbs-sound__off { display: none; }
@media (max-width: 767px) { .jbs-journey .jbs-sound { right: 12px; bottom: 100px; } }

/* ---------------- Arrival: words and card settle in when you get there ---------------- */
.jbs-journey.is-staged .jbs-slide--story .jbs-slide__eyebrow,
.jbs-journey.is-staged .jbs-slide--story .jbs-slide__title,
.jbs-journey.is-staged .jbs-slide--story .jbs-slide__desc,
.jbs-journey.is-staged .jbs-end__title,
.jbs-journey.is-staged .jbs-end__arrow {
	opacity: 0;
	translate: 0 22px;
	transition: opacity .6s ease, translate .9s cubic-bezier(.2, .7, .2, 1);
}
.jbs-journey.is-staged .jbs-slide.is-here .jbs-slide__eyebrow,
.jbs-journey.is-staged .jbs-slide.is-here .jbs-slide__title,
.jbs-journey.is-staged .jbs-slide.is-here .jbs-slide__desc,
.jbs-journey.is-staged .jbs-slide.is-here .jbs-end__title,
.jbs-journey.is-staged .jbs-slide.is-here .jbs-end__arrow { opacity: 1; translate: 0 0; }
.jbs-journey.is-staged .jbs-slide.is-here .jbs-slide__eyebrow { transition-delay: .05s; }
.jbs-journey.is-staged .jbs-slide.is-here .jbs-slide__title   { transition-delay: .16s; }
.jbs-journey.is-staged .jbs-slide.is-here .jbs-slide__desc    { transition-delay: .3s; }
.jbs-journey.is-staged .jbs-slide.is-here .jbs-end__arrow     { transition-delay: .25s; }
.jbs-journey.is-staged .jbs-slide--story .jbs-card {
	scale: 1.06;
	transition: scale 1s cubic-bezier(.2, .8, .25, 1.15), box-shadow 1s ease;
}
.jbs-journey.is-staged .jbs-slide--story.is-here .jbs-card { scale: 1; }


.jbs-skip {
	padding: 9px 22px;
	border-radius: 999px;
	background: #fff;
	color: #000 !important;
	font-family: var(--jbs-franklin);
	font-size: .8rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none !important;
	white-space: nowrap;
	transition: opacity .4s ease;
}
.jbs-journey.is-at-start .jbs-skip { display: none; }
.jbs-journey.is-done .jbs-skip { opacity: 0; pointer-events: none; }

/* Closing slide plants stand in the screen's bottom corners */
.jbs-slide--end .jbs-fg { width: min(21vw, 380px); }
.jbs-slide--end .jbs-fg--left  { left: 3%; }
.jbs-slide--end .jbs-fg--right { right: 3%; left: auto; }

/* Drafts are only ever rendered for logged-in editors */
.jbs-slide[data-draft]::after {
	content: "Draft";
	position: absolute;
	top: 90px;
	right: 20px;
	z-index: 30;
	padding: 4px 10px;
	border-radius: 4px;
	background: #ffcc00;
	color: #000;
	font: 600 12px/1.2 system-ui, sans-serif;
	text-transform: uppercase;
}

/* ---------------- Tablet ---------------- */
@media (max-width: 1024px) {
	.jbs-slide { padding: 0 5vw; }
	.jbs-slide__title { font-size: clamp(3.2rem, 9vw, 6rem); }
	.jbs-slide--long-title .jbs-slide__title { font-size: clamp(2.8rem, 7vw, 5rem); }
	.jbs-card__caption { font-size: clamp(1.3rem, 2.3vw, 2rem); }
}

/* ---------------- Phones: one column ---------------- */
@media (max-width: 767px) {
	.jbs-slide {
		flex-direction: column;
		justify-content: center;
		gap: 18px;
		padding: 86px 6vw 100px;
	}
	.jbs-slide__text,
	.jbs-slide__cardcol {
		flex: 0 0 auto;
		max-width: 100%;
		width: 100%;
		align-items: center;
		text-align: center;
	}
	.jbs-slide--card-left .jbs-slide__cardcol { order: 0; align-items: center; }
	.jbs-slide__text { gap: 10px; }
	.jbs-slide__eyebrow { font-size: 1.05rem; }
	.jbs-slide__title { font-size: clamp(2.6rem, 13vw, 4rem); }
	.jbs-slide--long-title .jbs-slide__title { font-size: clamp(2.2rem, 10.5vw, 3.2rem); }
	.jbs-slide__desc {
		font-size: .92rem;
		line-height: 1.42;
		display: -webkit-box;
		-webkit-line-clamp: 7;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.jbs-card { width: 88%; transform: rotate(-2deg); }
	.jbs-slide--card-left .jbs-card { transform: rotate(2deg); }
	.jbs-card__caption { font-size: 1.4rem; padding-right: 0; }
	.jbs-card__caption.is-single { padding-right: 0; }
	.jbs-watch { padding: 11px 22px; font-size: .9rem; }
	.jbs-bottle { width: 30%; right: -10%; bottom: 22%; }
	.jbs-fg { width: 58vw; }
	.jbs-fg--left { left: -2%; }
	.jbs-fg--right { right: -2%; }
	.jbs-float { width: 190%; left: -70%; }

	.jbs-slide--intro { flex-direction: column; justify-content: center; gap: 22px; }
	.jbs-intro__text { flex: 0 0 auto; width: 100%; align-items: center; text-align: center; }
	.jbs-intro__logo { margin: 0; width: 86%; }
	.jbs-intro__tagline { margin: 0; width: 100%; font-size: 1.25rem; }
	.jbs-slide--intro { padding-bottom: 150px; }
	.jbs-intro__photo { flex: 0 0 auto; width: auto; height: min(30svh, 56vw); aspect-ratio: 1 / 1; max-height: none; animation-name: jbs-bob-sm; }
	.jbs-intro__social { left: 50%; transform: translateX(-50%); bottom: 108px; z-index: 12; }

	.jbs-end__title { font-size: clamp(3.2rem, 16vw, 4.5rem); }
	.jbs-nav { bottom: 50px; }
	.jbs-slide--end .jbs-fg { width: 30vw; }
}

/* Short phones (landscape or small screens) */
@media (max-width: 767px) and (max-height: 640px) {
	.jbs-slide__desc { -webkit-line-clamp: 3; }
	.jbs-card { width: 74%; }
}

/* ---------------- Portrait tablets: stack like phones, at tablet scale ---------------- */
@media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
	.jbs-slide { flex-direction: column; justify-content: center; gap: 4svh; padding: 110px 8vw 112px; }
	.jbs-slide__text,
	.jbs-slide__cardcol { flex: 0 0 auto; width: 100%; max-width: 100%; align-items: center; text-align: center; }
	.jbs-slide--card-left .jbs-slide__cardcol { order: 0; align-items: center; }
	.jbs-slide__text { gap: 16px; }
	.jbs-slide__eyebrow { font-size: 1.4rem; }
	.jbs-slide__title { font-size: clamp(4rem, 11vw, 7.5rem); }
	.jbs-slide--long-title .jbs-slide__title { font-size: clamp(3.2rem, 8vw, 5.8rem); }
	.jbs-slide__desc { max-width: 600px; font-size: 1.1rem; }
	.jbs-card { width: 74%; }
	.jbs-card__caption { font-size: 2rem; }
	.jbs-fg { width: 52vw; }
	.jbs-slide--intro { flex-direction: column; justify-content: center; gap: 4svh; }
	.jbs-intro__text { flex: 0 0 auto; width: 100%; align-items: center; text-align: center; }
	.jbs-intro__logo { margin: 0; width: 78%; }
	.jbs-intro__tagline { margin: 0; width: 100%; font-size: 2rem; }
	.jbs-intro__photo { flex: 0 0 auto; width: 46%; aspect-ratio: 1 / 1; max-height: 36svh; }
	.jbs-intro__social { left: 50%; transform: translateX(-50%); bottom: 112px; }
}

/* ---------------- Short landscape screens (phones turned sideways) ---------------- */
@media (max-height: 520px) and (orientation: landscape) {
	.jbs-slide { flex-direction: row; justify-content: center; align-items: center; gap: 4vw; padding: 52px 6vw 74px; }
	.jbs-slide__text,
	.jbs-slide__cardcol { flex: 1 1 0; min-width: 0; width: auto; max-width: none; align-items: flex-start; text-align: left; }
	.jbs-slide__cardcol { align-items: flex-end; }
	.jbs-slide--card-left .jbs-slide__cardcol { order: -1; align-items: flex-start; }
	.jbs-slide__text { gap: 8px; }
	.jbs-slide__eyebrow { font-size: .8rem; }
	.jbs-slide__title { font-size: clamp(2rem, 14svh, 3.8rem); }
	.jbs-slide--long-title .jbs-slide__title { font-size: clamp(1.6rem, 9svh, 2.8rem); }
	.jbs-slide__desc { font-size: .85rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
	.jbs-card { width: min(100%, 92svh); transform: rotate(2deg); }
	.jbs-slide--card-left .jbs-card { transform: rotate(-2deg); }
	.jbs-card__caption { font-size: 1.1rem; padding-right: 0; }
	.jbs-watch { padding: 8px 16px; font-size: .8rem; }
	.jbs-bottle { width: 26%; right: -10%; bottom: 18%; }
	.jbs-fg { width: 28vw; }
	.jbs-fg--left { left: 2%; }
	.jbs-fg--right { right: 0; }
	.jbs-float { width: 84%; left: -12%; }
	.jbs-slide--intro { flex-direction: row; justify-content: space-between; }
	.jbs-intro__text { flex: 1 1 auto; width: auto; align-items: flex-start; text-align: left; gap: .6rem; }
	.jbs-intro__logo { margin: 0; width: min(52vw, 82svh); }
	.jbs-intro__tagline { margin: 0 0 0 12%; width: 80%; font-size: 1rem; }
	.jbs-intro__photo { flex: 0 0 auto; height: 68svh; width: auto; aspect-ratio: 4 / 6; max-height: none; }
	.jbs-intro__social { left: 6vw; transform: none; bottom: 12px; gap: 16px; }
	.jbs-intro__social svg { width: 16px; height: 16px; }
	.jbs-end__title { font-size: clamp(2.6rem, 22svh, 5rem); }
	.jbs-end__inner { gap: 1rem; }
	.jbs-end__arrow svg { width: 30px; height: 34px; }
	.jbs-nav { bottom: 38px; gap: 8px; }
	.jbs-progress__pin { width: 13px; height: 18px; margin-left: -6.5px; bottom: 11px; }
	.jbs-nav__btn { min-width: 32px; height: 32px; }
	.jbs-nav__btn svg { width: 16px; height: 16px; }
	.jbs-skip { padding: 6px 16px; font-size: .7rem; }
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
	.jbs-rays { animation: none; }
	.jbs-glow,
	.jbs-particles { display: none; }
	.jbs-float,
	.jbs-intro__photo,
	.jbs-end__arrow,
	.jbs-journey.is-at-start .jbs-nav__next { animation: none; }
	.jbs-intro__img { transition: none; }
}

/* ---------------- Lightbox ---------------- */
.jbs-lightbox {
	width: min(92vw, 1280px);
	max-width: none;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}
.jbs-lightbox::backdrop { background: rgba(0, 0, 0, .88); }
.jbs-lightbox__frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.jbs-lightbox__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.jbs-lightbox__close {
	position: absolute;
	top: -48px;
	right: -6px;
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	color: #fff;
	font-size: 40px;
	line-height: 1;
	cursor: pointer;
}
.jbs-lightbox__close:focus-visible { outline: 2px solid #fff; }

/* No JS (see <noscript> in the markup): a native horizontal swipe row */
.jbs-journey.no-js { height: auto; }
.jbs-journey.no-js .jbs-journey__pin { position: relative; overflow-x: auto; scroll-snap-type: x mandatory; }
.jbs-journey.no-js .jbs-slide { scroll-snap-align: start; }

/* Theme/Elementor set img { height:auto; max-width:100% } with higher specificity — scope ours. */
.jbs-journey img.jbs-intro__img,
.jbs-journey img.jbs-card__img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.jbs-journey img.jbs-float,
.jbs-journey img.jbs-fg,
.jbs-journey img.jbs-bottle { max-width: none; height: auto; }
.jbs-journey .jbs-intro__logo img { max-width: none; }

/* ---------------- Phones held upright: the journey travels downward ---------------- */
.jbs-journey.is-vertical .jbs-journey__track { flex-direction: column; width: 100%; height: calc(var(--jbs-n) * 100%); }
.jbs-journey.is-vertical .jbs-slide { flex: 0 0 calc(100% / var(--jbs-n)); width: 100%; height: auto; }
.jbs-journey.is-vertical .jbs-nav__btn svg { transform: rotate(90deg); }
.jbs-journey.is-vertical.is-at-start .jbs-nav__next { animation-name: jbs-nudge-down; }
@keyframes jbs-nudge-down {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(4px); }
}

/* ---------------- Touch screens: swipe to travel + a first-time hint ---------------- */
@media (pointer: coarse) {
	.jbs-journey__pin { touch-action: pan-y; } /* sideways swipes go to the journey, up/down still scrolls */
}
.jbs-hint {
	position: absolute;
	left: 50%;
	bottom: 20px;
	z-index: 21;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px 5px 8px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .45);
	color: #fff;
	font-family: var(--jbs-franklin);
	font-size: .7rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, 6px);
	transition: opacity .5s ease, transform .5s ease;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.jbs-hint.is-on { opacity: 1; transform: translate(-50%, 0); transition-delay: 1.2s; }
.jbs-hint__hand { display: block; width: 18px; height: 18px; animation: jbs-swipe 2.2s ease-in-out infinite; }
.jbs-hint__hand svg { display: block; width: 100%; height: 100%; fill: currentColor; }
@keyframes jbs-swipe {
	0%, 15%   { transform: translateX(6px) rotate(-8deg); opacity: 0; }
	30%       { opacity: 1; }
	70%       { transform: translateX(-8px) rotate(-8deg); opacity: 1; }
	85%, 100% { transform: translateX(-8px) rotate(-8deg); opacity: 0; }
}
@media (max-height: 520px) and (orientation: landscape) {
	.jbs-hint { bottom: 4px; font-size: .62rem; }
}

/* Touch screens: the start button reads "Swipe or scroll to travel" with a swiping hand */
.jbs-nav__next .jbs-hint__hand { display: none; width: 18px; height: 18px; }
.jbs-journey.is-at-start .jbs-nav__next.is-touch .jbs-hint__hand { display: block; }
.jbs-journey.is-at-start .jbs-nav__next.is-touch > svg { display: none; }
.jbs-journey.is-at-start .jbs-nav__next.is-touch { padding: 0 18px 0 14px; animation: none; }

/* Touch screens / phones: no place-name tooltips on the map pins (they can't be hovered and were cut off) */
@media (hover: none), (max-width: 767px) {
	.jbs-progress__dot::after,
	.jbs-progress__pin::after,
	.jbs-progress__pin::before,
	.jbs-progress [data-label]::after { display: none !important; content: none !important; }
	.jbs-progress__pin .jbs-progress__tip, .jbs-progress__tip { display: none !important; }
}

.jbs-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}