/* ==========================================================
   JULKLAPPSSPELET.SE
   VARIANTER — PREMIUM EDITORIAL 1.0

   Clean page-specific system.
   No negative layout offsets.
   No external fonts.
   No !important.
   ========================================================== */

.jksv {
	--v-green: #123c32;
	--v-green-deep: #0b2d26;
	--v-green-soft: #1b4b3e;
	--v-cream: #f7f3eb;
	--v-cream-soft: #fbf8f2;
	--v-paper: #eee7da;
	--v-gold: #c58b38;
	--v-gold-soft: #e3bc78;
	--v-wine: #6d2835;
	--v-ink: #102d27;
	--v-body: #40514c;
	--v-muted: #6d7974;
	--v-line: rgba(16,45,39,.16);
	--v-line-light: rgba(247,243,235,.18);
	--v-shell: 1180px;

	width: 100%;
	max-width: 100%;
	overflow-x: clip;
	background: var(--v-cream-soft);
	color: var(--v-ink);
	font-size: 17px;
	line-height: 1.7;
}

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

.jksv h1,
.jksv h2,
.jksv h3,
.jksv p,
.jksv blockquote,
.jksv ul {
	margin-top: 0;
}

.jksv h1,
.jksv h2,
.jksv h3 {
	color: inherit;
	line-height: .98;
	text-wrap: balance;
}

.jksv h1,
.jksv h2 {
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
	letter-spacing: -.045em;
}

.jksv h1 em,
.jksv h2 em {
	font-weight: 400;
}

.jksv a {
	color: inherit;
}

.jksv-shell {
	width: min(calc(100% - 48px), var(--v-shell));
	margin-inline: auto;
}

.jksv-kicker {
	margin-bottom: 20px;
	color: var(--v-gold-soft);
	font-size: .73rem;
	font-weight: 800;
	letter-spacing: .19em;
	line-height: 1.3;
	text-transform: uppercase;
}

.jksv-kicker--dark {
	color: #956526;
}

.jksv-intro {
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(1.25rem, 2vw, 1.6rem);
	line-height: 1.48;
	letter-spacing: -.018em;
}


/* HERO
   ========================================================== */

.jksv-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 82% 34%, rgba(197,139,56,.12), transparent 25%),
		linear-gradient(135deg, var(--v-green) 0%, var(--v-green-deep) 100%);
	color: var(--v-cream);
}

.jksv-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 1px;
	background: rgba(255,255,255,.12);
}

.jksv-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
	align-items: center;
	min-height: 680px;
	gap: clamp(60px, 8vw, 120px);
	padding-block: 110px 104px;
}

.jksv-hero__copy {
	position: relative;
	z-index: 2;
	max-width: 760px;
}

.jksv-hero h1 {
	max-width: 760px;
	margin-bottom: 32px;
	font-size: clamp(4rem, 7.3vw, 7.4rem);
}

.jksv-hero h1 em {
	display: inline;
	color: var(--v-gold-soft);
}

.jksv-hero__lead {
	max-width: 650px;
	margin-bottom: 34px;
	color: rgba(247,243,235,.78);
	font-size: clamp(1.05rem, 1.45vw, 1.22rem);
	line-height: 1.72;
}

.jksv-text-link,
.jksv-inline {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	text-decoration: none;
	font-size: .79rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.jksv-text-link {
	padding-bottom: 7px;
	border-bottom: 1px solid rgba(247,243,235,.38);
}

.jksv-text-link span,
.jksv-inline span {
	transition: transform .2s ease;
}

.jksv-text-link:hover span,
.jksv-inline:hover span {
	transform: translateX(4px);
}

.jksv-hero__mark {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	min-width: 0;
}

.jksv-hero__mark::before,
.jksv-hero__mark::after {
	content: "";
	position: absolute;
	border: 1px solid rgba(231,188,114,.23);
	border-radius: 50%;
}

.jksv-hero__mark::before {
	inset: 5%;
}

.jksv-hero__mark::after {
	inset: 18%;
}

.jksv-hero__number {
	position: relative;
	z-index: 2;
	font-family: Georgia, "Times New Roman", serif;
	color: var(--v-gold-soft);
	font-size: clamp(6rem, 11vw, 10rem);
	line-height: .78;
	letter-spacing: -.08em;
}

.jksv-hero__word {
	position: relative;
	z-index: 2;
	margin-top: 16px;
	color: rgba(247,243,235,.7);
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .3em;
	text-transform: uppercase;
}

.jksv-hero__mark i {
	position: absolute;
	z-index: 1;
	width: 1px;
	height: 80%;
	background: linear-gradient(transparent, rgba(231,188,114,.4), transparent);
	transform: rotate(35deg);
}


/* CHOOSER
   ========================================================== */

.jksv-chooser {
	padding: 110px 0 118px;
	background: var(--v-cream-soft);
}

.jksv-section-head {
	max-width: 690px;
	margin-bottom: 55px;
}

.jksv-section-head--center {
	margin-inline: auto;
	text-align: center;
}

.jksv-section-head h2 {
	margin-bottom: 22px;
	font-size: clamp(2.7rem, 5vw, 4.8rem);
}

.jksv-section-head > p:last-child {
	max-width: 610px;
	margin: 0 auto;
	color: var(--v-body);
}

.jksv-jumps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid var(--v-line);
	border-left: 1px solid var(--v-line);
}

.jksv-jumps a {
	position: relative;
	min-height: 145px;
	padding: 28px 30px;
	border-right: 1px solid var(--v-line);
	border-bottom: 1px solid var(--v-line);
	text-decoration: none;
	transition:
		background .2s ease,
		color .2s ease;
}

.jksv-jumps a::after {
	content: "↘";
	position: absolute;
	right: 24px;
	bottom: 20px;
	color: #9a6a2c;
	font-size: 1.05rem;
}

.jksv-jumps a:hover {
	background: var(--v-green);
	color: var(--v-cream);
}

.jksv-jumps small {
	display: block;
	margin-bottom: 9px;
	color: var(--v-muted);
	font-size: .69rem;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.jksv-jumps a:hover small {
	color: rgba(247,243,235,.6);
}

.jksv-jumps strong {
	display: block;
	max-width: 210px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.32rem;
	font-weight: 400;
	line-height: 1.2;
}


/* CLASSIC
   ========================================================== */

.jksv-classic {
	padding: 120px 0;
	background: #fff;
	border-top: 1px solid rgba(16,45,39,.08);
}

.jksv-classic__grid {
	display: grid;
	grid-template-columns: 110px minmax(240px, .72fr) minmax(0, 1fr);
	gap: clamp(34px, 6vw, 80px);
	align-items: start;
}

.jksv-index {
	font-family: Georgia, "Times New Roman", serif;
	color: #c9bca8;
	font-size: 3.6rem;
	line-height: 1;
}

.jksv-classic__title h2 {
	font-size: clamp(3.2rem, 5.4vw, 5.5rem);
}

.jksv-classic__body {
	max-width: 590px;
}

.jksv-classic__body > p:not(.jksv-intro) {
	color: var(--v-body);
}

.jksv-inline {
	margin-top: 15px;
	color: var(--v-green);
	border-bottom: 1px solid rgba(18,60,50,.28);
}


/* FEATURE
   ========================================================== */

.jksv-feature {
	padding: 125px 0;
}

.jksv-feature--cream {
	background: var(--v-paper);
}

.jksv-feature__grid {
	display: grid;
	grid-template-columns: minmax(190px, .35fr) minmax(0, 1fr);
	gap: clamp(55px, 9vw, 135px);
}

.jksv-feature__aside {
	padding-top: 4px;
	border-top: 1px solid rgba(16,45,39,.25);
}

.jksv-big-index {
	display: block;
	margin-top: 20px;
	font-family: Georgia, "Times New Roman", serif;
	color: var(--v-green);
	font-size: clamp(5rem, 9vw, 8rem);
	line-height: .9;
	letter-spacing: -.07em;
}

.jksv-feature__aside p {
	margin: 15px 0 0;
	color: var(--v-muted);
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.jksv-feature__content {
	max-width: 750px;
}

.jksv-feature__content h2 {
	max-width: 650px;
	margin-bottom: 30px;
	font-size: clamp(3.3rem, 6vw, 6rem);
}

.jksv-feature__content > .jksv-intro {
	max-width: 670px;
	margin-bottom: 48px;
}

.jksv-ruleline {
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr);
	gap: 30px;
	padding: 23px 0;
	border-top: 1px solid rgba(16,45,39,.17);
}

.jksv-ruleline:last-child {
	border-bottom: 1px solid rgba(16,45,39,.17);
}

.jksv-ruleline span {
	color: #8c632c;
	font-size: .69rem;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.jksv-ruleline p {
	margin: 0;
	color: var(--v-body);
}


/* TWO DICE
   ========================================================== */

.jksv-split {
	padding: 130px 0;
	background: var(--v-cream-soft);
}

.jksv-split__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(300px, .62fr);
	gap: clamp(70px, 10vw, 145px);
	align-items: center;
}

.jksv-index-small {
	display: block;
	margin-bottom: 25px;
	color: #936629;
	font-size: .69rem;
	font-weight: 800;
	letter-spacing: .15em;
	text-transform: uppercase;
}

.jksv-split__copy h2 {
	max-width: 700px;
	margin-bottom: 34px;
	font-size: clamp(3.3rem, 6vw, 6.2rem);
}

.jksv-split__copy h2 em {
	color: #a96f27;
}

.jksv-split__copy p {
	max-width: 650px;
	color: var(--v-body);
}

.jksv-note {
	position: relative;
	padding: 48px 42px 42px;
	border: 1px solid rgba(18,60,50,.18);
	background: #fff;
}

.jksv-note__mark {
	display: block;
	margin-bottom: 55px;
	font-family: Georgia, "Times New Roman", serif;
	color: #b67c2f;
	font-size: 4.8rem;
	line-height: .8;
	letter-spacing: -.08em;
}

.jksv-note h3 {
	margin-bottom: 16px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.65rem;
	font-weight: 400;
}

.jksv-note p {
	color: var(--v-body);
}

.jksv-note small {
	display: block;
	padding-top: 18px;
	border-top: 1px solid var(--v-line);
	color: var(--v-muted);
	line-height: 1.5;
}


/* FAMILY
   ========================================================== */

.jksv-family {
	padding: 125px 0 130px;
	background: #e7ded0;
}

.jksv-family__top {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(280px, .6fr);
	gap: clamp(50px, 9vw, 130px);
	align-items: end;
	margin-bottom: 70px;
}

.jksv-family__top h2 {
	max-width: 620px;
	margin-bottom: 0;
	font-size: clamp(3.3rem, 6vw, 6rem);
}

.jksv-family__top > p {
	max-width: 430px;
	margin-bottom: 8px;
}

.jksv-family__steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid rgba(16,45,39,.19);
}

.jksv-family__steps article {
	padding: 34px 34px 0 0;
}

.jksv-family__steps article + article {
	padding-left: 34px;
	border-left: 1px solid rgba(16,45,39,.19);
}

.jksv-family__steps span {
	display: block;
	margin-bottom: 50px;
	color: #9c6d30;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .12em;
}

.jksv-family__steps h3 {
	margin-bottom: 16px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.65rem;
	font-weight: 400;
}

.jksv-family__steps p {
	margin-bottom: 0;
	color: var(--v-body);
}


/* QUICK
   ========================================================== */

.jksv-quick {
	padding: 120px 0;
	background: #fff;
}

.jksv-quick__grid {
	display: grid;
	grid-template-columns: 120px minmax(250px, .8fr) minmax(300px, .8fr);
	gap: clamp(35px, 6vw, 80px);
	align-items: start;
}

.jksv-quick__number span {
	display: block;
	font-family: Georgia, "Times New Roman", serif;
	color: #d3c5b1;
	font-size: 4.2rem;
	line-height: 1;
}

.jksv-quick__copy h2 {
	margin-bottom: 26px;
	font-size: clamp(3rem, 5vw, 5rem);
}

.jksv-quick__rules {
	border-top: 1px solid var(--v-line);
}

.jksv-quick__rules p {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	gap: 12px;
	margin: 0;
	padding: 15px 0;
	border-bottom: 1px solid var(--v-line);
	color: var(--v-body);
}

.jksv-quick__rules strong {
	color: #a16d2c;
}


/* CHAOS
   ========================================================== */

.jksv-chaos {
	position: relative;
	overflow: hidden;
	padding: 135px 0;
	background:
		radial-gradient(circle at 12% 30%, rgba(197,139,56,.11), transparent 28%),
		#102f28;
	color: var(--v-cream);
}

.jksv-chaos__grid {
	display: grid;
	grid-template-columns: minmax(300px, .75fr) minmax(0, 1fr);
	gap: clamp(70px, 11vw, 160px);
}

.jksv-chaos__headline {
	position: relative;
}

.jksv-chaos__index {
	display: block;
	margin-bottom: 65px;
	color: rgba(247,243,235,.25);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 4rem;
	line-height: 1;
}

.jksv-chaos h2 {
	margin-bottom: 30px;
	color: var(--v-gold-soft);
	font-size: clamp(5rem, 10vw, 9rem);
}

.jksv-chaos__lead {
	max-width: 410px;
	color: rgba(247,243,235,.72);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.4rem;
	line-height: 1.5;
}

.jksv-chaos__rules {
	border-top: 1px solid var(--v-line-light);
}

.jksv-chaos__rules div {
	display: grid;
	grid-template-columns: 45px minmax(0, 1fr);
	gap: 25px;
	padding: 24px 0;
	border-bottom: 1px solid var(--v-line-light);
}

.jksv-chaos__rules span {
	color: var(--v-gold-soft);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .12em;
}

.jksv-chaos__rules p {
	margin: 0;
	color: rgba(247,243,235,.84);
}


/* WITHOUT DICE
   ========================================================== */

.jksv-no-die {
	padding: 130px 0;
	background: var(--v-cream);
}

.jksv-no-die__grid {
	display: grid;
	grid-template-columns: minmax(280px, .65fr) minmax(0, .85fr);
	gap: clamp(70px, 11vw, 160px);
}

.jksv-no-die h2 {
	font-size: clamp(3.5rem, 6vw, 6rem);
}

.jksv-no-die__body {
	max-width: 620px;
}

.jksv-no-die__body > p:not(.jksv-intro) {
	color: var(--v-body);
}

.jksv-no-die blockquote {
	margin: 45px 0;
	padding: 7px 0 7px 30px;
	border-left: 2px solid var(--v-gold);
	color: var(--v-green);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-style: italic;
	line-height: 1.4;
}


/* DUO
   ========================================================== */

.jksv-duo {
	padding: 0;
	background: #fff;
}

.jksv-duo__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	width: 100%;
	max-width: none;
}

.jksv-duo article {
	min-height: 540px;
	padding: clamp(70px, 8vw, 120px) max(24px, calc((100vw - 1180px) / 2));
}

.jksv-duo article:first-child {
	padding-left: max(24px, calc((100vw - 1180px) / 2));
	padding-right: clamp(45px, 7vw, 95px);
	background: #e9e0d3;
}

.jksv-duo article:last-child {
	padding-left: clamp(45px, 7vw, 95px);
	padding-right: max(24px, calc((100vw - 1180px) / 2));
	background: #d9e0da;
}

.jksv-duo h2 {
	margin-bottom: 28px;
	font-size: clamp(3rem, 5vw, 5rem);
}

.jksv-duo p {
	max-width: 510px;
	color: var(--v-body);
}

.jksv-duo__twist {
	margin-top: 35px;
	padding-top: 20px;
	border-top: 1px solid rgba(16,45,39,.18);
}


/* LARGE GROUP
   ========================================================== */

.jksv-large {
	padding: 130px 0;
	background: var(--v-cream-soft);
}

.jksv-large__grid {
	display: grid;
	grid-template-columns: minmax(280px, .65fr) minmax(0, .85fr);
	gap: clamp(70px, 11vw, 160px);
}

.jksv-large h2 {
	font-size: clamp(3.7rem, 6.5vw, 6.5rem);
}

.jksv-large__body {
	max-width: 650px;
}

.jksv-large__body ul {
	margin: 40px 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--v-line);
}

.jksv-large__body li {
	padding: 18px 0;
	border-bottom: 1px solid var(--v-line);
	color: var(--v-body);
}

.jksv-large__body li strong {
	color: var(--v-green);
}


/* GUIDE
   ========================================================== */

.jksv-guide {
	padding: 120px 0 130px;
	background: var(--v-paper);
}

.jksv-guide__rows {
	border-top: 1px solid rgba(16,45,39,.2);
}

.jksv-guide__rows a {
	display: grid;
	grid-template-columns: minmax(170px, .5fr) minmax(0, 1fr) 35px;
	align-items: center;
	gap: 30px;
	min-height: 84px;
	border-bottom: 1px solid rgba(16,45,39,.2);
	text-decoration: none;
	transition: padding .2s ease;
}

.jksv-guide__rows a:hover {
	padding-left: 10px;
}

.jksv-guide__rows span {
	color: var(--v-muted);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.jksv-guide__rows strong {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.45rem;
	font-weight: 400;
}

.jksv-guide__rows i {
	color: #9c6a2c;
	font-style: normal;
	font-size: 1.2rem;
}


/* CTA
   ========================================================== */

.jksv-cta {
	padding: 110px 0;
	background: var(--v-green);
	color: var(--v-cream);
}

.jksv-cta__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, .6fr);
	gap: clamp(60px, 10vw, 150px);
	align-items: end;
}

.jksv-cta h2 {
	max-width: 650px;
	margin-bottom: 0;
	font-size: clamp(3.4rem, 6vw, 6rem);
}

.jksv-cta__action {
	max-width: 470px;
}

.jksv-cta__action p {
	margin-bottom: 28px;
	color: rgba(247,243,235,.72);
}

.jksv-button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 35px;
	min-width: 285px;
	padding: 17px 20px;
	background: var(--v-cream);
	color: var(--v-green);
	text-decoration: none;
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	transition: transform .2s ease;
}

.jksv-button:hover {
	transform: translateY(-2px);
}


/* TABLET
   ========================================================== */

@media (max-width: 900px) {

	.jksv-hero__grid {
		grid-template-columns: minmax(0, 1fr) 250px;
		min-height: 600px;
		gap: 45px;
	}

	.jksv-jumps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jksv-classic__grid,
	.jksv-quick__grid {
		grid-template-columns: 80px minmax(0, 1fr);
	}

	.jksv-classic__body,
	.jksv-quick__rules {
		grid-column: 2;
	}

	.jksv-split__grid,
	.jksv-chaos__grid {
		gap: 55px;
	}

	.jksv-feature__grid {
		grid-template-columns: 150px minmax(0, 1fr);
		gap: 55px;
	}

}


/* MOBILE
   ========================================================== */

@media (max-width: 700px) {

	.jksv {
		font-size: 16px;
		line-height: 1.65;
	}

	.jksv-shell {
		width: min(calc(100% - 36px), var(--v-shell));
	}

	.jksv-kicker {
		margin-bottom: 16px;
		font-size: .66rem;
		letter-spacing: .16em;
	}

	.jksv-hero__grid {
		display: block;
		min-height: 0;
		padding-block: 76px 70px;
	}

	.jksv-hero__copy {
		max-width: 100%;
	}

	.jksv-hero h1 {
		max-width: 10.5ch;
		margin-bottom: 26px;
		font-size: clamp(3.05rem, 13.2vw, 4.45rem);
		line-height: .98;
	}

	.jksv-hero h1 br {
		display: none;
	}

	.jksv-hero__lead {
		max-width: 34rem;
		margin-bottom: 28px;
		font-size: 1rem;
		line-height: 1.65;
	}

	.jksv-hero__mark {
		width: 150px;
		margin: 55px 0 0 auto;
	}

	.jksv-hero__number {
		font-size: 5rem;
	}

	.jksv-hero__word {
		margin-top: 10px;
		font-size: .62rem;
	}

	.jksv-chooser,
	.jksv-classic,
	.jksv-feature,
	.jksv-split,
	.jksv-family,
	.jksv-quick,
	.jksv-chaos,
	.jksv-no-die,
	.jksv-large,
	.jksv-guide,
	.jksv-cta {
		padding-block: 78px;
	}

	.jksv-section-head {
		margin-bottom: 38px;
	}

	.jksv-section-head--center {
		text-align: left;
	}

	.jksv-section-head h2 {
		max-width: 10ch;
		margin-bottom: 18px;
		font-size: clamp(2.55rem, 11.5vw, 3.6rem);
	}

	.jksv-section-head > p:last-child {
		margin-left: 0;
	}

	.jksv-jumps {
		grid-template-columns: 1fr;
	}

	.jksv-jumps a {
		min-height: 105px;
		padding: 22px 23px;
	}

	.jksv-jumps a::after {
		right: 20px;
		bottom: 17px;
	}

	.jksv-classic__grid,
	.jksv-feature__grid,
	.jksv-split__grid,
	.jksv-family__top,
	.jksv-quick__grid,
	.jksv-chaos__grid,
	.jksv-no-die__grid,
	.jksv-large__grid,
	.jksv-cta__inner {
		display: block;
	}

	.jksv-index {
		margin-bottom: 35px;
		font-size: 2.8rem;
	}

	.jksv-classic__title {
		margin-bottom: 32px;
	}

	.jksv-classic__title h2,
	.jksv-feature__content h2,
	.jksv-split__copy h2,
	.jksv-family__top h2,
	.jksv-quick__copy h2,
	.jksv-no-die h2,
	.jksv-duo h2,
	.jksv-large h2 {
		max-width: 10.5ch;
		font-size: clamp(2.8rem, 12vw, 4rem);
		line-height: 1;
	}

	.jksv-intro {
		font-size: 1.22rem;
	}

	.jksv-feature__aside {
		display: flex;
		align-items: baseline;
		gap: 18px;
		margin-bottom: 48px;
	}

	.jksv-big-index {
		margin-top: 16px;
		font-size: 4.6rem;
	}

	.jksv-feature__aside p {
		margin-top: 0;
	}

	.jksv-feature__content > .jksv-intro {
		margin-bottom: 35px;
	}

	.jksv-ruleline {
		display: block;
		padding: 20px 0;
	}

	.jksv-ruleline span {
		display: block;
		margin-bottom: 8px;
	}

	.jksv-split__copy {
		margin-bottom: 48px;
	}

	.jksv-split__copy h2 br {
		display: none;
	}

	.jksv-note {
		padding: 34px 28px 30px;
	}

	.jksv-note__mark {
		margin-bottom: 38px;
		font-size: 4rem;
	}

	.jksv-family__top {
		margin-bottom: 50px;
	}

	.jksv-family__top > div {
		margin-bottom: 28px;
	}

	.jksv-family__top h2 br {
		display: none;
	}

	.jksv-family__steps {
		display: block;
	}

	.jksv-family__steps article,
	.jksv-family__steps article + article {
		padding: 27px 0;
		border-left: 0;
		border-bottom: 1px solid rgba(16,45,39,.19);
	}

	.jksv-family__steps span {
		margin-bottom: 25px;
	}

	.jksv-quick__number {
		margin-bottom: 30px;
	}

	.jksv-quick__number span {
		font-size: 3rem;
	}

	.jksv-quick__copy {
		margin-bottom: 40px;
	}

	.jksv-chaos__headline {
		margin-bottom: 52px;
	}

	.jksv-chaos__index {
		margin-bottom: 42px;
		font-size: 3rem;
	}

	.jksv-chaos h2 {
		max-width: 100%;
		font-size: clamp(4.6rem, 21vw, 6.5rem);
	}

	.jksv-chaos__lead {
		font-size: 1.25rem;
	}

	.jksv-chaos__rules div {
		grid-template-columns: 35px minmax(0, 1fr);
		gap: 15px;
		padding: 20px 0;
	}

	.jksv-no-die > .jksv-shell > div:first-child,
	.jksv-large__title {
		margin-bottom: 40px;
	}

	.jksv-no-die blockquote {
		margin: 34px 0;
		padding-left: 20px;
		font-size: 1.45rem;
	}

	.jksv-duo__grid {
		display: block;
	}

	.jksv-duo article {
		min-height: 0;
		padding: 78px 18px;
	}

	.jksv-duo article:first-child,
	.jksv-duo article:last-child {
		padding: 78px 18px;
	}

	.jksv-large h2 br {
		display: none;
	}

	.jksv-guide__rows a {
		grid-template-columns: minmax(0, 1fr) 25px;
		gap: 8px 15px;
		min-height: 94px;
		padding-block: 17px;
	}

	.jksv-guide__rows span {
		grid-column: 1;
	}

	.jksv-guide__rows strong {
		grid-column: 1;
		font-size: 1.3rem;
	}

	.jksv-guide__rows i {
		grid-column: 2;
		grid-row: 1 / 3;
	}

	.jksv-cta h2 {
		max-width: 9ch;
		margin-bottom: 35px;
		font-size: clamp(3rem, 13vw, 4.2rem);
	}

	.jksv-cta h2 br {
		display: none;
	}

	.jksv-cta__action {
		max-width: 100%;
	}

	.jksv-button {
		width: 100%;
		min-width: 0;
	}

}


/* NARROW MOBILE
   ========================================================== */

@media (max-width: 390px) {

	.jksv-shell {
		width: min(calc(100% - 30px), var(--v-shell));
	}

	.jksv-hero h1 {
		max-width: 11ch;
		font-size: clamp(2.75rem, 13.5vw, 3.35rem);
		letter-spacing: -.04em;
	}

	.jksv-section-head h2,
	.jksv-classic__title h2,
	.jksv-feature__content h2,
	.jksv-split__copy h2,
	.jksv-family__top h2,
	.jksv-quick__copy h2,
	.jksv-no-die h2,
	.jksv-duo h2,
	.jksv-large h2 {
		font-size: 2.65rem;
	}

	.jksv-chaos h2 {
		font-size: 4.35rem;
	}

	.jksv-cta h2 {
		font-size: 2.85rem;
	}

}


/* ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

	.jksv *,
	.jksv *::before,
	.jksv *::after {
		scroll-behavior: auto;
		transition: none;
	}
}

/* ==========================================================
   JKS VARIANTER — CLEAN STRUCTURAL LAYOUT 0.1.45
   One correction layer only.
   ========================================================== */


/* ----------------------------------------------------------
   GLOBAL TYPOGRAPHY SAFETY
   ---------------------------------------------------------- */

.jksv h1,
.jksv h2,
.jksv h3 {
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}


/* ==========================================================
   05 — SNABBVERSIONEN
   ========================================================== */

@media (min-width: 1101px) {

    .jksv-quick__grid {
        display: grid;
        grid-template-columns:
            90px
            minmax(0, 1.05fr)
            minmax(360px, .95fr);
        column-gap: clamp(42px, 5vw, 72px);
        align-items: start;
    }

    .jksv-quick__number,
    .jksv-quick__copy,
    .jksv-quick__rules {
        min-width: 0;
    }

    .jksv-quick__copy h2 {
        width: 100%;
        max-width: 100%;
        margin: 0 0 28px;

        font-size: clamp(3rem, 4vw, 4rem);
        line-height: .98;
        letter-spacing: -.045em;

        word-break: normal;
        overflow-wrap: normal;
        hyphens: none;
    }

    .jksv-quick__copy .jksv-intro {
        width: 100%;
        max-width: 31rem;
    }

    .jksv-quick__rules {
        width: 100%;
    }
}


/*
 * Medium screens:
 * stop forcing title and rules into competing columns.
 */
@media (min-width: 701px) and (max-width: 1100px) {

    .jksv-quick__grid {
        display: grid;
        grid-template-columns: 76px minmax(0, 1fr);
        column-gap: 38px;
        row-gap: 44px;
        align-items: start;
    }

    .jksv-quick__number {
        grid-column: 1;
        grid-row: 1;
    }

    .jksv-quick__copy {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }

    .jksv-quick__rules {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        min-width: 0;
    }

    .jksv-quick__copy h2 {
        width: 100%;
        max-width: 100%;
        margin-bottom: 26px;

        font-size: clamp(3rem, 6.5vw, 4.15rem);
        line-height: .98;

        word-break: normal;
        overflow-wrap: normal;
        hyphens: none;
    }
}


/* ==========================================================
   08 + 09 — NUMMERLAPPEN / GRYTVANTEN

   Full viewport editorial split.
   No narrow inner columns.
   ========================================================== */

.jksv-duo {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.jksv-duo__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    width: 100vw;
    max-width: none;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.jksv-duo article {
    box-sizing: border-box;
    min-width: 0;
    min-height: 590px;

    padding-top: 90px;
    padding-bottom: 90px;
}

.jksv-duo article:first-child {
    background: #e9e0d3;

    padding-left:
        max(
            42px,
            calc((100vw - 1180px) / 2)
        );

    padding-right: clamp(44px, 4vw, 72px);
}

.jksv-duo article:last-child {
    background: #d9e0da;

    padding-left: clamp(44px, 4vw, 72px);

    padding-right:
        max(
            42px,
            calc((100vw - 1180px) / 2)
        );
}

.jksv-duo .jksv-index-small {
    margin-bottom: 28px;
}

.jksv-duo h2 {
    display: block;

    width: 100%;
    max-width: 100%;

    margin: 0 0 30px;

    line-height: .98;
    letter-spacing: -.045em;

    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}


/*
 * Nummerlappen is substantially longer than Grytvanten.
 * They therefore SHOULD NOT use the same font size.
 */

.jksv-duo article:first-child h2 {
    font-size: clamp(2.7rem, 3.15vw, 3.55rem);
}

.jksv-duo article:last-child h2 {
    font-size: clamp(3rem, 3.55vw, 4rem);
}

.jksv-duo p {
    width: 100%;
    max-width: 31rem;

    margin-left: 0;
    margin-right: 0;

    font-size: 1rem;
    line-height: 1.68;
}

.jksv-duo__twist {
    box-sizing: border-box;

    width: 100%;
    max-width: 31rem;

    margin-top: 28px;
    padding-top: 20px;
}


/* ----------------------------------------------------------
   08/09 — SMALLER DESKTOP
   ---------------------------------------------------------- */

@media (min-width: 901px) and (max-width: 1180px) {

    .jksv-duo article:first-child {
        padding-left: 34px;
        padding-right: 36px;
    }

    .jksv-duo article:last-child {
        padding-left: 36px;
        padding-right: 34px;
    }

    .jksv-duo article:first-child h2 {
        font-size: clamp(2.35rem, 4vw, 3rem);
    }

    .jksv-duo article:last-child h2 {
        font-size: clamp(2.6rem, 4.3vw, 3.35rem);
    }
}


/*
 * Once each half becomes genuinely narrow,
 * stacking is cleaner than destroying the typography.
 */

@media (max-width: 900px) {

    .jksv-duo__grid {
        display: block;
        width: 100vw;
    }

    .jksv-duo article,
    .jksv-duo article:first-child,
    .jksv-duo article:last-child {
        width: 100%;
        min-height: 0;

        padding:
            70px
            max(24px, calc((100vw - 700px) / 2));
    }

    .jksv-duo article:first-child h2,
    .jksv-duo article:last-child h2 {
        width: 100%;
        max-width: 100%;

        font-size: clamp(2.75rem, 8vw, 4rem);
        line-height: 1;
    }

    .jksv-duo p,
    .jksv-duo__twist {
        max-width: 36rem;
    }
}


/* ==========================================================
   KLASSIKERN
   ========================================================== */

@media (min-width: 900px) {

    .jksv-classic__grid {
        grid-template-columns:
            90px
            minmax(300px, .9fr)
            minmax(430px, 1.45fr);

        column-gap: clamp(36px, 5vw, 82px);
        align-items: start;
    }

    .jksv-classic__title {
        min-width: 0;
    }

    .jksv-classic__title h2 {
        max-width: none;

        word-break: normal;
        overflow-wrap: normal;
        hyphens: none;
    }
}


/* ==========================================================
   STORA SÄLLSKAPET
   ========================================================== */

.jksv-large__title h2 {
    max-width: none;

    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.jksv-large__title h2 span {
    white-space: nowrap;
}

@media (min-width: 900px) {

    .jksv-large__grid {
        grid-template-columns:
            minmax(410px, .85fr)
            minmax(470px, 1.15fr);

        gap: clamp(60px, 7vw, 110px);
        align-items: start;
    }

    .jksv-large__title {
        min-width: 0;
    }

    .jksv-large__title h2 {
        font-size: clamp(3.65rem, 5vw, 5.25rem);
        line-height: .98;
        letter-spacing: -.04em;
    }

    .jksv-large__title h2 span {
        display: block;
    }
}


/* ==========================================================
   CLOSING CTA
   ========================================================== */

.jksv-cta {
    background: #173f35;
    color: #f6f0e5;
}

.jksv-cta h2,
.jksv-cta h3,
.jksv-cta p {
    color: #f6f0e5;
}

.jksv-cta .jksv-kicker {
    color: #ddb96f;
}

.jksv-cta a {
    color: #173f35;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    .jksv-quick__grid {
        display: block;
    }

    .jksv-quick__number {
        margin-bottom: 30px;
    }

    .jksv-quick__copy {
        margin-bottom: 42px;
    }

    .jksv-quick__copy h2 {
        width: 100%;
        max-width: 100%;

        font-size: clamp(2.55rem, 10.5vw, 3.65rem);
        line-height: 1;

        word-break: normal;
        overflow-wrap: normal;
        hyphens: none;
    }

    .jksv-duo article,
    .jksv-duo article:first-child,
    .jksv-duo article:last-child {
        padding: 62px 22px 66px;
    }

    .jksv-duo article:first-child h2,
    .jksv-duo article:last-child h2 {
        font-size: clamp(2.4rem, 9.5vw, 3.3rem);
    }
}


@media (max-width: 390px) {

    .jksv-duo article:first-child h2,
    .jksv-duo article:last-child h2 {
        font-size: clamp(2.15rem, 9vw, 2.7rem);
    }

    .jksv-large__title h2 span {
        display: inline;
        white-space: normal;
    }
}