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

.k1 {
  position: relative;
  background: var(--grunn);
  color: var(--tekst);
}

.k1 img,
.k1 svg {
  display: block;
  max-width: 100%;
}

.k1-scene {
  --k1-topp: clamp(3.25rem, 2.25rem + 3.5vw, 6rem);
  --k1-bunn: clamp(3rem, 2rem + 3vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "merke" "utsagn" "ramme" "fakta";
  max-width: var(--maks);
  margin: 0 auto;
  padding: var(--k1-topp) var(--marg) var(--k1-bunn);
}

.k1-reise {
  display: none;
}

.k1-merke {
  grid-area: merke;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1.1rem;
  color: var(--aksent);
  font-family: var(--font-body);
  font-size: var(--tekst-merke);
  font-weight: 600;
  font-stretch: var(--bredde-merke);
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
}

.k1-merke-nr {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--tekst-demp);
}

.k1-merke-nr::after {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: var(--aksent-linje);
}

.k1-utsagn {
  grid-area: utsagn;
  max-width: 34ch;
  margin: 0;
  color: var(--tekst);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1rem + 2.6vw, 3.4rem);
  font-weight: 450;
  font-stretch: 104%;
  line-height: 1.12;
  letter-spacing: -0.028em;
  text-wrap: pretty;
}

.k1-ramme {
  grid-area: ramme;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-top: clamp(1.75rem, 4vw, 3rem);
}

.k1-flate {
  position: relative;
  margin: 0;
  padding: var(--k1-innmarg);
  border: 1px solid var(--linje-sterk);
  background: var(--flate);
}

.k1-vindu {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  container-type: inline-size;
}

.k1-flate-foto .k1-vindu {
  background: var(--vindu-tom);
}

.k1-flate-tegning {
  order: -1;
}

.k1-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.k1-papir {
  position: absolute;
  inset: 0;
  border: 1px solid var(--linje);
  background-color: var(--k1-papir);
  background-image:
    linear-gradient(var(--k1-rute) 1px, transparent 1px),
    linear-gradient(90deg, var(--k1-rute) 1px, transparent 1px);
  background-size: var(--k1-rute-str) var(--k1-rute-str);
  background-position: -1px -1px;
}

.k1-tegning {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  --k1-px: 3;   
}

.k1-tegning path {
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

.k1-s-hoved {
  stroke: var(--tekst);
  stroke-width: calc(var(--k1-px) * 1.15px);
}

.k1-s-fin {
  stroke: var(--tekst);
  stroke-width: calc(var(--k1-px) * 0.7px);
}

.k1-s-laft {
  stroke: var(--tekst-demp);
  stroke-opacity: 0.85;
  stroke-width: calc(var(--k1-px) * 0.55px);
}

.k1-s-hjelp {
  stroke: var(--tekst-demp);
  stroke-width: calc(var(--k1-px) * 0.6px);
}

.k1-s-maal {
  stroke: var(--tekst);
  stroke-width: calc(var(--k1-px) * 0.9px);
}

.k1-s-leder {
  stroke: var(--tekst);
  stroke-width: calc(var(--k1-px) * 0.7px);
}

.k1-s-skjult {
  stroke: var(--tekst-demp);
  stroke-width: calc(var(--k1-px) * 0.7px);
  stroke-dasharray: calc(var(--k1-px) * 4px) calc(var(--k1-px) * 3px);
}

.k1-merker {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.k1-merkelapp {
  position: absolute;
  left: var(--k1-x);
  top: var(--k1-y);
  padding: 0.22em 0.5em 0.16em;
  background: var(--k1-papir);
  color: var(--tekst);
  font-family: var(--font-body);
  font-size: clamp(0.5625rem, 1.75cqw, 0.71875rem);
  font-weight: 600;
  font-stretch: var(--bredde-merke);
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.k1-anker-v { transform: translate(0.2em, -50%); }
.k1-anker-h { transform: translate(calc(-100% - 0.2em), -50%); }
.k1-anker-sv { transform: translate(0, -100%); }
.k1-anker-nv { transform: translate(0, 0); }
.k1-anker-ne { transform: translate(-100%, 0); }
.k1-anker-se { transform: translate(-100%, -100%); }

.k1-akse {
  position: absolute;
  left: var(--k1-x);
  top: var(--k1-y);
  transform: translate(-50%, -46%);
  color: var(--tekst-demp);
  font-family: var(--font-body);
  font-size: clamp(0.5rem, 1.45cqw, 0.6875rem);
  font-weight: 600;
  font-stretch: var(--bredde-merke);
  line-height: 1;
}

@container (max-width: 30rem) {
  .k1-akse {
    display: none;
  }

  
  .k1-merkelapp[data-k1-merke="3"] {
    left: 1%;
    transform: translate(0, -50%);
  }
}

@container (max-width: 26rem) {
  .k1:not(.k1-pinnet) .k1-merkelapp,
  .k1:not(.k1-pinnet) .k1-leder {
    display: none;
  }
}

.k1-strip {
  position: relative;
  display: grid;
  min-height: var(--k1-strip-h);
  padding: 0.6rem 0.1rem 0;
  color: var(--tekst-demp);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  font-stretch: var(--bredde-merke);
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

figcaption.k1-strip,
.k1-strip-lag {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.k1-strip-lag {
  grid-area: 1 / 1;
}

.k1-strip-lag-foto {
  opacity: 0;
}

.k1-strip-hoyre {
  color: var(--tekst);
  font-variant-numeric: tabular-nums;
}

.k1-teller {
  display: none;
}

.k1-fakta {
  grid-area: fakta;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
  border-top: 1px solid var(--linje-sterk);
}

.k1-faktum {
  margin: 0;
  padding: 0.85rem 0.75rem 0.85rem 0;
}

.k1-faktum:nth-child(even) {
  padding-left: 1rem;
  border-left: 1px solid var(--linje);
}

.k1-faktum:nth-child(n + 3) {
  border-top: 1px solid var(--linje);
}

.k1-faktum dt {
  color: var(--tekst);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.05rem + 1.2vw, 2.1rem);
  font-weight: 500;
  font-stretch: var(--bredde-tittel);
  letter-spacing: -0.03em;
  line-height: 1;
}

.k1-faktum dt a {
  color: inherit;
  text-decoration: none;
}

.k1-faktum dt a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

.k1-faktum dt a:focus-visible {
  outline: 2px solid var(--tekst);
  outline-offset: 3px;
}

.k1-til {
  color: var(--tekst-demp);
  font-weight: 400;
}

.k1-faktum dd {
  margin: 0.45rem 0 0;
  color: var(--tekst-demp);
  font-size: var(--tekst-brod);
  line-height: 1.35;
}

@media (min-width: 45rem) {
  .k1-ramme {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2.4vw, 2rem);
  }

  .k1-tegning {
    --k1-px: 2;
  }

  .k1-fakta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .k1-faktum {
    padding: 0.85rem 1rem 0.2rem;
    border-left: 1px solid var(--linje);
  }

  .k1-faktum:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .k1-faktum:nth-child(n + 3) {
    border-top: 0;
  }
}

@media (min-height: 34rem), (min-height: 30rem) and (min-width: 64rem), (min-height: 30rem) and (min-width: 45rem) and (min-aspect-ratio: 4/3) {
  html.liv .k1.k1-styrt {
    --k1-pin: 1;
  }

  html.liv .k1.k1-styrt .k1-reise {
    display: block;
    height: calc(var(--k1-reise) * 100svh);
  }

  
  html.liv .k1.k1-styrt .k1-scene {
    position: sticky;
    top: 0;
    grid-template-areas: "merke" "ramme" "utsagn" "fakta";
    align-content: start;
    padding: calc(var(--nav-h) + clamp(0.5rem, 1.6svh, 1rem)) var(--marg) 2.5rem;
  }

  html.liv .k1.k1-styrt .k1-merke {
    margin-bottom: clamp(0.6rem, 1.6svh, 1rem);
  }

  html.liv .k1.k1-styrt .k1-ramme {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, calc(46svh * 4 / 3 + 2 * var(--k1-innmarg) + 2px));
    margin: 0 0 clamp(0.75rem, 2svh, 1.25rem);
  }

  html.liv .k1.k1-styrt .k1-flate {
    grid-area: 1 / 1;
  }

  html.liv .k1.k1-styrt .k1-flate-tegning {
    z-index: 1;
    background: transparent;
  }

  html.liv .k1.k1-styrt .k1-flate-tegning .k1-strip {
    background: var(--flate);
  }

  html.liv .k1.k1-styrt .k1-utsagn {
    max-width: 30ch;
    font-size: clamp(1.4rem, min(7vw, 3.5svh), 2.4rem);
    line-height: 1.13;
  }

  html.liv .k1.k1-styrt .k1-teller {
    display: inline;
  }

  html.liv .k1.k1-styrt .k1-stille-tekst {
    display: none;
  }

  
  html.liv .k1.k1-styrt .k1-ord {
    opacity: var(--k1-svak-ord);
  }

  html.liv .k1.k1-styrt .k1-tegning [pathLength] {
    stroke-dasharray: 1 1;
  }

  html.liv .k1.k1-styrt .k1-del {
    stroke-dashoffset: 1;
  }

  html.liv .k1.k1-styrt .k1-hel [pathLength] {
    stroke-dasharray: none;
  }

  html.liv .k1.k1-styrt .k1-lag,
  html.liv .k1.k1-styrt .k1-merkelapp,
  html.liv .k1.k1-styrt .k1-akse {
    opacity: 0;
  }
}

@media (min-height: 30rem) and (min-width: 64rem), (min-height: 30rem) and (min-width: 45rem) and (min-aspect-ratio: 4/3) {
  
  html.liv .k1.k1-styrt {
    --k1-pre: 0.42;
  }

  html.liv .k1.k1-styrt .k1-scene {
    --k1-topp: calc(var(--nav-h) + clamp(0.5rem, 2svh, 1.5rem));
    --k1-bunn: calc(var(--ringelinje-h) + 0.75rem);
    --k1-rad-gap: clamp(0.85rem, 2.4svh, 1.6rem);
    --k1-vindu-h: calc(100svh - var(--k1-topp) - var(--k1-bunn) - var(--k1-fakta-h) - var(--k1-rad-gap) - var(--k1-strip-h) - 2 * var(--k1-innmarg) - 2px);
    height: 100svh;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "merke ramme" "utsagn ramme" "fakta fakta";
    column-gap: clamp(1.75rem, 3.6vw, 4rem);
    align-content: stretch;
    padding: var(--k1-topp) var(--marg) var(--k1-bunn);
  }

  html.liv .k1.k1-styrt .k1-ramme {
    align-self: end;
    width: min(calc((min(100vw, var(--maks)) - 2 * var(--marg)) * var(--k1-ramme-andel)), calc(var(--k1-vindu-h) * 4 / 3 + 2 * var(--k1-innmarg) + 2px));
    margin: 0;
  }

  html.liv .k1.k1-styrt .k1-utsagn {
    align-self: start;
    max-width: none;
    font-size: clamp(1.55rem, min(4.1vw, 7.7svh), 3.6rem);
    line-height: 1.12;
  }

  html.liv .k1.k1-styrt .k1-fakta {
    margin-top: var(--k1-rad-gap);
  }

  html.liv .k1.k1-styrt .k1-faktum dt {
    font-size: clamp(1.35rem, 0.85rem + 1.15vw, 2rem);
  }
}

@media (min-height: 30rem) and (min-width: 64rem) {
  html.liv .k1.k1-styrt .k1-scene {
    --k1-bunn: clamp(0.75rem, 2.4svh, 1.5rem);
  }
}