/* Samtastic Nova 2.2.0 -- homepage 3D scroll story (front-page.php + nova-story.js) */
.nst {
	--nst-ink: #0b1b2e;
	--nst-muted: #4a5b70;
	--nst-sun: #ffc466;
	--nst-accent: #1f6feb;
	position: relative;
	background: linear-gradient(180deg, #b9d5ee 0%, #dfeaf4 45%, #eef3f8 100%);
	color: var(--nst-ink);
	isolation: isolate;
}
.nst__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	z-index: 0;
}
.nst__canvas { display: block; width: 100%; height: 100%; }
.nst__vignette {
	position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(120% 90% at 65% 45%, rgba(255,255,255,0) 55%, rgba(185,213,238,.55) 100%);
}
.nst__count {
	position: absolute; right: 28px; bottom: 22px; margin: 0;
	font: 600 14px/1 "Plus Jakarta Sans", Inter, system-ui, sans-serif; color: var(--nst-muted); letter-spacing: .08em;
}
.nst__count b { font-size: 28px; color: var(--nst-ink); }
.nst__note {
	position: absolute; left: 50%; bottom: 18px; margin: 0; transform: translateX(-50%);
	font: 500 12px/1.3 Inter, system-ui, sans-serif; color: var(--nst-muted); opacity: .8; white-space: nowrap;
}

.nst__chapters {
	position: relative;
	z-index: 2;
	margin-top: -100vh;
	margin-top: -100svh;
}
.nst__ch {
	min-height: 125vh;
	display: flex;
	align-items: center;
	padding: 14vh 0;
	box-sizing: border-box;
}
.nst__ch--intro { min-height: 115vh; }
.nst__ch--end { min-height: 110vh; }

.nst__card {
	box-sizing: border-box;
	min-width: 0;
	width: min(450px, calc(100vw - 32px));
	margin-left: max(24px, calc((100vw - 1240px) / 2));
	background: rgba(255,255,255,.9);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(255,255,255,.7);
	border-radius: 24px;
	padding: 28px 28px 24px;
	box-shadow: 0 30px 60px -30px rgba(11,27,46,.45), 0 2px 6px rgba(11,27,46,.06);
	opacity: 0;
	transform: translateY(48px) scale(.98);
	transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.nst__ch.is-in .nst__card { opacity: 1; transform: none; }
.nst__card--intro { width: min(580px, calc(100vw - 32px)); padding: 34px; }
.nst__card--end { width: min(620px, calc(100vw - 32px)); }

.nst__eyebrow {
	display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
	font: 700 12px/1.2 "Plus Jakarta Sans", Inter, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--nst-accent);
}
.nst__icon { font-size: 20px; letter-spacing: 0; }
.nst__live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.2); }
.nst__h1 {
	margin: 0 0 14px; font: 800 clamp(32px, 4.6vw, 54px)/1.05 "Plus Jakarta Sans", Inter, system-ui, sans-serif; letter-spacing: -.02em; color: var(--nst-ink);
}
.nst__h2 {
	margin: 0 0 12px; font: 800 clamp(24px, 2.6vw, 32px)/1.15 "Plus Jakarta Sans", Inter, system-ui, sans-serif; letter-spacing: -.01em; color: var(--nst-ink);
}
.nst__lead { margin: 0 0 16px; font: 400 16px/1.6 Inter, system-ui, sans-serif; color: var(--nst-muted); }
.nst__points { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; }
.nst__points li {
	position: relative; padding-left: 28px; font: 500 15px/1.5 Inter, system-ui, sans-serif; color: var(--nst-ink);
}
.nst__points li::before {
	content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
	background: #e3f0ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6feb' stroke-width='3.2'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat;
}
.nst__stats { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.nst__stats li { padding: 10px 14px; border-radius: 14px; background: #f1f6fb; min-width: 96px; }
.nst__stats strong { display: block; font: 800 22px/1.1 "Plus Jakarta Sans", sans-serif; color: var(--nst-ink); }
.nst__stats span { font: 500 12px/1.3 Inter, sans-serif; color: var(--nst-muted); }

.nst__live { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 12px; border-radius: 16px; background: #f3f7fb; }
.nst__chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #fff; font: 700 12px/1 Inter, sans-serif; color: var(--nst-ink); box-shadow: 0 1px 2px rgba(11,27,46,.08); }
.nst__chip i { width: 11px; height: 11px; border-radius: 3px; display: block; }
.nst__read { display: flex; flex-direction: column; gap: 2px; padding: 4px 14px 4px 4px; min-width: 120px; }
.nst__read b { font: 800 28px/1.05 "Plus Jakarta Sans", sans-serif; color: var(--nst-ink); font-variant-numeric: tabular-nums; }
.nst__read small { font: 500 12px/1.3 Inter, sans-serif; color: var(--nst-muted); }
.nst__live--sold .nst__read:first-child b { color: #d93030; }
.nst__live--sun .nst__read b { color: #e08600; }
.nst__fine { font: 500 12px/1.4 Inter, sans-serif; color: var(--nst-muted); }

.nst__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.nst__btn { background: var(--nst-ink); color: #fff; }
.nst__btn:hover { background: #17324f; color: #fff; }
.nst__hint { display: flex; align-items: center; gap: 10px; margin: 22px 0 0; font: 600 13px/1 Inter, sans-serif; color: var(--nst-muted); }
.nst__mouse { width: 18px; height: 28px; border: 2px solid currentColor; border-radius: 10px; position: relative; }
.nst__mouse::after { content: ""; position: absolute; left: 50%; top: 5px; width: 3px; height: 6px; margin-left: -1.5px; border-radius: 2px; background: currentColor; animation: nst-wheel 1.6s infinite; }
@keyframes nst-wheel { 0% { opacity: 1; transform: translateY(0); } 70% { opacity: 0; transform: translateY(8px); } 100% { opacity: 0; } }

.nst__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.nst__tile {
	display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 16px; background: #f3f7fb; color: var(--nst-ink); text-decoration: none;
	font: 700 14px/1.25 Inter, sans-serif; transition: background .2s, transform .2s;
}
.nst__tile span { font-size: 22px; }
.nst__tile strong { flex: 1; }
.nst__tile:hover { background: #e3eefa; transform: translateY(-2px); }

/* Chapter dots (fixed while the story is on screen) */
.nst__dots {
	position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 30;
	display: flex; flex-direction: column; gap: 4px; opacity: 0; pointer-events: none; transition: opacity .3s;
}
.nst--inview .nst__dots { opacity: 1; pointer-events: auto; }
.nst__dot {
	position: relative; display: flex; justify-content: flex-end; align-items: center; width: 26px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer;
}
.nst__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(11,27,46,.3); transition: transform .25s, background .25s; }
.nst__dot span {
	position: absolute; right: 22px; white-space: nowrap; padding: 4px 9px; border-radius: 999px; background: var(--nst-ink); color: #fff;
	font: 600 12px/1 Inter, sans-serif; opacity: 0; transform: translateX(6px); transition: opacity .2s, transform .2s; pointer-events: none;
}
.nst__dot:hover span, .nst__dot:focus-visible span, .nst__dot.is-on span { opacity: 1; transform: none; }
.nst__dot.is-on::after { background: var(--nst-accent); transform: scale(1.5); }

.nst__disclaimer { margin: 0 auto; padding: 14px 16px 0; font: 500 12px/1.5 Inter, sans-serif; color: #6b7a8c; text-align: center; }

/* Phones and small tablets: the 3D fills the screen, cards ride up from the bottom. */
@media (max-width: 900px) {
	.nst__ch { min-height: 140vh; align-items: flex-end; padding: 0 0 8vh; }
	.nst__ch--intro { min-height: 120vh; }
	.nst__card, .nst__card--intro, .nst__card--end { width: calc(100% - 24px); margin: 0 12px; padding: 20px 18px 18px; border-radius: 20px; }
	.nst__h1 { font-size: 32px; }
	.nst__h2 { font-size: 22px; }
	.nst__lead { font-size: 15px; margin-bottom: 12px; }
	.nst__points { gap: 6px; margin-bottom: 14px; }
	.nst__points li { font-size: 14px; }
	.nst__read b { font-size: 22px; }
	.nst__dots { display: none; }
	.nst__dot span { display: none; }
	.nst__count { right: 14px; top: 14px; bottom: auto; }
	.nst__count b { font-size: 20px; }
	.nst__note { display: none; }
	.nst__stats li { min-width: 0; flex: 1 1 40%; }
}
@media (max-width: 420px) {
	.nst__grid { grid-template-columns: 1fr; }
}

/* No WebGL: the cards read as an ordinary list. */
.nst--static .nst__stage { display: none; }
.nst--static .nst__chapters { margin-top: 0; padding: 24px 0; }
.nst--static .nst__ch { min-height: 0; padding: 12px 0; align-items: stretch; }
.nst--static .nst__card { opacity: 1; transform: none; margin-left: auto; margin-right: auto; width: min(720px, calc(100vw - 32px)); }
.nst--static .nst__icon { font-size: 30px; }
.nst--static .nst__dots { display: none; }

@media (prefers-reduced-motion: reduce) {
	.nst__card { transition: none; opacity: 1; transform: none; }
	.nst__mouse::after { animation: none; }
}