.hero-kjokken { --k-s: 2; }
@media (min-width: 768px) { .hero-kjokken { --k-s: 1.5; } }
@media (min-width: 1024px) { .hero-kjokken { --k-s: 1.6; } }
@media (min-width: 1024px) and (min-height: 760px) { .hero-kjokken { --k-s: 1.3; } }
@media (min-width: 1024px) and (min-height: 960px) { .hero-kjokken { --k-s: 1.05; } }

.hero-kjokken .k-papir { fill: var(--tegning-papir); }
.hero-kjokken .k-papir-rute { fill: url(#k-rute); }
.hero-kjokken .k-rute-fin { stroke: var(--tegning-rute); stroke-width: 1; fill: none; }
.hero-kjokken .k-rute { stroke: var(--tegning-rute); stroke-width: 2; fill: none; }
.hero-kjokken .k-hjelp { stroke: var(--tegning-hjelp); stroke-width: calc(0.6px * var(--k-s)); fill: none; opacity: 0.55; }
.hero-kjokken .k-horisont { stroke-dasharray: 14 7; }
.hero-kjokken .k-fp { stroke: var(--aksent); stroke-width: calc(0.9px * var(--k-s)); fill: none; }

.hero-kjokken .k-hoved,
.hero-kjokken .k-sekundar,
.hero-kjokken .k-fin { fill: none; stroke-linejoin: round; stroke-dasharray: 1; }
.hero-kjokken .k-hoved { stroke: var(--tegning-strek); stroke-width: calc(1.5px * var(--k-s)); }
.hero-kjokken .k-sekundar { stroke: var(--tegning-strek); stroke-width: calc(1px * var(--k-s)); }
.hero-kjokken .k-fin { stroke: var(--tegning-tynn); stroke-width: calc(0.7px * var(--k-s)); }

.hero-kjokken .k-beslag { fill: var(--tegning-tynn); stroke: var(--tegning-strek); stroke-width: calc(0.6px * var(--k-s)); stroke-linejoin: round; }

.hero-kjokken .k-punkt { fill: var(--aksent); }
.hero-kjokken .k-leder { stroke: var(--aksent); stroke-width: calc(1px * var(--k-s)); fill: none; }
.hero-kjokken .k-merke {
  font: 700 18px var(--font); letter-spacing: 0.12em; fill: var(--tegning-strek);
  paint-order: stroke; stroke: var(--tegning-papir); stroke-width: 6px; stroke-linejoin: round;
}
@media (max-width: 767px) {
  .hero-kjokken .k-merker { display: none; }
}

html.hero-styrt .hero-kjokken [data-a="draw"] { stroke-dashoffset: 1; }
html.hero-styrt .hero-kjokken [data-a="fade"] { opacity: 0; }
html.hero-styrt .hero-kjokken .k-intro { animation: k-tegn 0.9s var(--ease) var(--d, 0s) both; }
html.hero-styrt .hero-kjokken .k-sen { animation: k-inn 0.6s var(--ease) 1.7s both; }
@keyframes k-tegn { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes k-inn { from { opacity: 0; } to { opacity: 1; } }