/* ============================================================
   Euphoria Bygg: slik.css
   «Slik jobber vi» (27.10.2026) as a pinned scroll scene, after
   Moisés' «Slik bestiller du». Markup from production/bygg/slik.py,
   behaviour in js/slik.js. Colours, type and sizes come from
   tokens.css; the few values of this scene are set on .sl below.

   Still (no JavaScript, reduced motion, a screen too short to pin):
   the four steps as a numbered list beside the roof before and
   after, side by side. Everything under html.js-anim .sl.sl-styrt is
   the moving scene, and the script adds sl-styrt only when it runs.
   --sl-modus tells the script which layout the CSS has chosen:
     pinne    wide screens: the steps on the left, all readable, the
              active one in full; the frame on the right shows the
              step that is reached
     stablet  phones, tablets and wide screens where the list does not
              fit (sl-trang): a counter and a line over the frame, the
              active step's text under it (beside it from 900 px)
   The frame holds one panel per step, the newest on top: 1 the
   message, 2 the old roof with the laser, the job (one of the crew
   at work), 4 the new roof, 3 the quote (on top, so it can leave
   again in step 04). Only
   transform and opacity move.
   ============================================================ */

.sl {
  --sl-nr-b: 40px;                      /* the circle a step number stands in */
  --sl-rad-gap: clamp(18px, 2.4vw, 30px);
  --sl-svak: 0.64;                      /* a step that is not active: --tekst on --kalk at this keeps 5:1 (the script reads it) */
  --sl-reise: 2.98;                     /* pinned travel in screen heights (the script reads the track) */
  --sl-vent: 56px;                      /* how far beyond the frame a panel waits, more than its shadow (the script reads it) */
  --sl-luft: clamp(16px, 3.6svh, 40px); /* air over and under the pinned scene */
  --sl-bord-n: 1;                       /* the courses of step 04 (BORD in slik.py) */
  --sl-ar: 0.79823;                     /* the photographs' width over height, 720 x 902 */
  --sl-radius: 3px;
  --sl-papir: var(--hvit);
  --sl-skygge-farge: var(--skygge);
  background: var(--kalk);
}

.sl-topp {
  margin-bottom: clamp(28px, 3.4vw, 48px);
}

/* ============================================================
   Still layout, phones first
   ============================================================ */
.sl-flate {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

@media (min-width: 900px) {
  .sl-flate {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

.sl-venstre {
  display: grid;
  gap: clamp(24px, 3vw, 36px);
  align-content: start;
}

.sl-fremdrift {
  display: none;
}

.sl-liste {
  display: flex;
  flex-direction: column;
  gap: var(--sl-rad-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sl-steg {
  position: relative;
  display: grid;
  grid-template-columns: var(--sl-nr-b) minmax(0, 1fr);
  column-gap: clamp(14px, 1.6vw, 22px);
}

/* the number in its circle; still, every number stands filled */
.sl-nr {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--sl-nr-b);
  height: var(--sl-nr-b);
  border: 1.5px solid var(--linje-mork-2);
  border-radius: 50%;
  background: var(--kalk);
  color: var(--tekst);
  font-size: 13px;
  font-weight: var(--vekt-sterk);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.sl-nr-disk {
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  background: var(--svartbeis);
}

.sl-nr-tall {
  position: relative;
  grid-area: 1 / 1;
}

.sl-nr-mork {
  opacity: 0;
}

.sl-nr-lys {
  color: var(--tekst-lys);
}

/* the rail from one number to the next; moving, it fills with pine */
.sl-led {
  position: absolute;
  top: calc(var(--sl-nr-b) + 6px);
  bottom: calc(6px - var(--sl-rad-gap));
  left: calc(var(--sl-nr-b) / 2 - 1px);
  width: 2px;
  overflow: hidden;
  background: var(--linje-mork);
}

.sl-led-fyll {
  display: none;
  position: absolute;
  inset: 0;
  background: var(--furu);
  transform-origin: 50% 0;
}

.sl-steg h3 {
  padding-top: calc((var(--sl-nr-b) - 1.15em) / 2);
}

.sl-steg p {
  max-width: 34em;
  margin-top: 0.4em;
  color: var(--tekst-2);
}

.sl-knapper {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-left: calc(var(--sl-nr-b) + clamp(14px, 1.6vw, 22px));
}

/* ---- the frame: still, the roof before and after side by side ---- */
.sl-ramme {
  position: relative;
  margin: 0;
}

.sl-paneler {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.sl-panel {
  position: relative;
  margin: 0;
  overflow: hidden;
}

.sl-panel-1,
.sl-panel-3,
.sl-panel-jobb {
  display: none;
}

.sl-foto {
  aspect-ratio: 720 / 902;
  border-radius: var(--sl-radius);
  background: var(--svartbeis-2);
}

.sl-bilde {
  position: absolute;
  inset: 0;
}

.sl-bilde img,
.sl-hel img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 30% 35%;             /* as the pinned frame: the chimneys stand at the left of both photographs */
}

.sl-hel {
  position: absolute;
  inset: 0;
}

.sl-bordene,
.sl-laser,
.sl-laser-punkt,
.sl-mal,
.sl-skygge,
.sl-dekk,
.sl-markor {
  display: none;
}

/* «Før» and «Etter» on the photographs, as on the before and after elsewhere on the site */
.sl-merke {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 5px 11px;
  border-radius: var(--runding);
  background: var(--skygge);
  color: var(--tekst-lys);
  font-size: 14px;
  font-weight: var(--vekt-sterk);
  line-height: 1.3;
  pointer-events: none;
}

.sl-bildetekst {
  margin-top: 14px;
  color: var(--tekst-2);
}

/* ============================================================
   The papers: the message (1) and the quote (3). The type scales
   with the frame, so a paper reads the same at every size.
   ============================================================ */
.sl-papir {
  background: var(--sl-papir);
  color: var(--tekst);
}

.sl-papir-indre {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  font-size: clamp(11px, min(3.8cqw, 2.8cqh), 19px);
  line-height: 1.4;
}

.sl-band {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.85em;
  padding: 1.1em 1.5em;
  background: var(--svartbeis);
  color: var(--tekst-lys);
}

.sl-band-logo {
  flex: none;
  width: 2.4em;
  height: 2.4em;
}

.sl-band-tekst {
  display: grid;
  gap: 0.25em;
  min-width: 0;
}

.sl-band-navn {
  color: var(--tekst-lys-2);
  font-size: 0.7em;
  font-weight: var(--vekt-sterk);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sl-band-tittel {
  font-size: 1.36em;
  font-weight: var(--vekt-tittel);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.sl-papir-kropp {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1em;
  min-height: 0;
  padding: 1.4em 1.5em 1.1em;
}

.sl-etikett {
  display: block;
  margin-bottom: 0.45em;
  font-size: 0.82em;
  font-weight: var(--vekt-sterk);
}

.sl-boks {
  position: relative;
  display: block;
  padding: 0.7em 0.9em;
  border: 1px solid var(--linje-mork-2);
  border-radius: var(--sl-radius);
  background: var(--felt);
  line-height: 1.45;
}

.sl-omrade {
  min-height: 6.2em;
}

.sl-ord {
  white-space: nowrap;
}

.sl-vedlegg {
  display: grid;
  min-height: 3.6em;
  align-items: center;
}

.sl-vedlegg-tom,
.sl-vedlegg-fil {
  display: flex;
  grid-area: 1 / 1;
  align-items: center;
  gap: 0.7em;
}

.sl-vedlegg-tom {
  color: var(--tekst-2);
}

.sl-vedlegg-tom svg {
  flex: none;
  width: 1.15em;
  height: 1.15em;
}

.sl-tommel {
  flex: none;
  width: 2.2em;
  height: 2.2em;
  overflow: hidden;
  border-radius: 2px;
  background: var(--svartbeis-2);
}

.sl-tommel img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.sl-send {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8em;
  border-radius: var(--runding);
  background: var(--svartbeis);
  color: var(--tekst-lys);
  font-weight: var(--vekt-sterk);
}

.sl-sendt {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.92em;
  font-weight: var(--vekt-sterk);
}

.sl-sendt svg {
  flex: none;
  width: 1.45em;
  height: 1.45em;
  padding: 0.28em;
  border-radius: 50%;
  background: var(--svartbeis);
  color: var(--tekst-lys);
}

.sl-papir-fot {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.6em;
  margin-top: auto;
  padding: 0.95em 1.5em;
  border-top: 1px solid var(--linje-mork);
  color: var(--tekst-2);
  font-size: 0.9em;
}

.sl-papir-fot svg {
  width: 1.1em;
  height: 1.1em;
}

/* ---- the quote ---- */
.sl-tilbud {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 1.3em 1.5em 1.3em;
}

.sl-q {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.62em 0;
}

.sl-q-gjelder {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1em;
  padding: 0 0 0.85em;
}

.sl-q-gjelder .sl-etikett {
  margin: 0;
  color: var(--tekst-2);
}

.sl-q-jobb {
  font-size: 1.3em;
  font-weight: var(--vekt-tittel);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.sl-q-strek {
  display: block;
  flex: none;
  height: 1px;
  margin: 0.3em 0;
  background: var(--linje-mork);
  transform-origin: 0 50%;
}

.sl-q-tekst {
  min-width: 0;
  font-size: 0.95em;
}

.sl-q-verdi {
  font-size: 0.92em;
  font-weight: var(--vekt-sterk);
}

.sl-q-belop {
  display: flex;
  flex: 0 0 30%;
  justify-content: flex-end;
}

.sl-q-belop i {
  display: block;
  width: calc(var(--b, 0.6) * 100%);
  height: 0.6em;
  border-radius: 0.3em;
  background: var(--linje-mork);
  transform-origin: 100% 50%;
}

.sl-q-sum .sl-q-tekst {
  font-weight: var(--vekt-sterk);
}

.sl-q-sum .sl-q-belop i {
  background: var(--linje-mork-2);
}

.sl-q-sign {
  display: flex;
  align-items: flex-end;
  gap: 1.2em;
  margin-top: auto;
  padding-top: 1em;
}

.sl-q-sign .sl-etikett {
  margin: 0 0 0.35em;
  color: var(--tekst-2);
}

.sl-sign-flate {
  position: relative;
  flex: 1 1 auto;
  border-bottom: 1px solid var(--linje-mork-2);
}

.sl-signatur {
  width: min(100%, 10em);
  height: 2.8em;
  fill: none;
  stroke: var(--svartbeis);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   Moving: the script runs (sl-styrt). Start states live here; the
   script writes every value from them.
   ============================================================ */
html.js-anim .sl.sl-styrt {
  --sl-modus: stablet;
  --sl-bunn: calc(16px + env(safe-area-inset-bottom, 0px));
  padding-bottom: 0;
}

html.js-anim .sl.sl-styrt .sl-spor {
  position: relative;
  height: calc(100svh + var(--sl-reise) * 100svh);
  margin-top: calc(-1 * var(--meny-h));
}

html.js-anim .sl.sl-styrt .sl-scene {
  position: sticky;
  top: 0;
  height: 100svh;
  pointer-events: none;
}

html.js-anim .sl.sl-styrt .sl-liste,
html.js-anim .sl.sl-styrt .sl-knapper,
html.js-anim .sl.sl-styrt .sl-ramme {
  pointer-events: auto;
}

/* ---- the frame: one cell, the panels on top of each other ---- */
html.js-anim .sl.sl-styrt .sl-ramme {
  overflow: hidden;
  border-radius: var(--sl-radius);
  background: var(--svartbeis-2);
  box-shadow: 0 30px 70px -28px var(--sl-skygge-farge), 0 1px 0 var(--linje-mork);
  will-change: transform;
}

html.js-anim .sl.sl-styrt .sl-paneler {
  position: absolute;
  inset: 0;
  display: block;
  container-type: size;
  /* the photographs' own shape, covering the frame (object-fit: cover by hand, so lines can stand on the roof);
     a narrow frame cuts more from the right than the left, where the chimney stands */
  --sl-bw: max(100cqw, 100cqh * var(--sl-ar));
  --sl-bh: max(100cqh, 100cqw / var(--sl-ar));
  --sl-px: 0.3;
}

html.js-anim .sl.sl-styrt .sl-panel {
  position: absolute;
  inset: 0;
  display: block;
  aspect-ratio: auto;
  border-radius: 0;
  will-change: transform;
}

html.js-anim .sl.sl-styrt .sl-bilde {
  inset: auto;
  left: calc((100cqw - var(--sl-bw)) * var(--sl-px));
  top: calc((100cqh - var(--sl-bh)) * var(--sl-py, 0.35));
  width: var(--sl-bw);
  height: var(--sl-bh);
  will-change: transform;
}

html.js-anim .sl.sl-styrt .sl-papir-indre {
  will-change: transform;
}

html.js-anim .sl.sl-styrt .sl-skygge {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  background: var(--svartbeis-2);
  opacity: 0;
  pointer-events: none;
}

html.js-anim .sl.sl-styrt .sl-merke {
  opacity: 0;
}

/* the caption lies in the photograph, on the shade at its foot */
html.js-anim .sl.sl-styrt .sl-bildetekst {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin: 0;
  padding: 4em 1.2em 1em;
  background: linear-gradient(to top, var(--skygge-sterk), var(--skygge-svak));
  color: var(--tekst-lys);
  font-size: clamp(14px, 2.4cqh, 16px);
  font-weight: var(--vekt-sterk);
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
}

html.js-anim .sl.sl-styrt .sl-bildetekst::before {
  content: "";
  flex: none;
  width: 22px;
  height: 2px;
  background: var(--furu);
}

/* ---- 01 the message ---- */
html.js-anim .sl.sl-styrt .sl-dekk {
  position: absolute;
  inset: -1px -2px;
  display: block;
  background: var(--sl-papir);
  transform-origin: 100% 50%;
  will-change: transform;
}

html.js-anim .sl.sl-styrt .sl-t {
  opacity: 0;
}

html.js-anim .sl.sl-styrt .sl-markor {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 2px;
  height: 1.3em;
  background: var(--tekst);
  opacity: 0;
}

html.js-anim .sl.sl-styrt .sl-omrade .sl-markor {
  margin: 0.7em 0 0 0.9em;
}

html.js-anim .sl.sl-styrt .sl-sendt,
html.js-anim .sl.sl-styrt .sl-vedlegg-fil {
  opacity: 0;
}

html.js-anim .sl.sl-styrt .sl-send,
html.js-anim .sl.sl-styrt .sl-sendt,
html.js-anim .sl.sl-styrt .sl-vedlegg-fil,
html.js-anim .sl.sl-styrt .sl-vedlegg-tom {
  will-change: transform, opacity;
}

/* ---- 02 the old roof, with the laser cross and two measuring lines ---- */
html.js-anim .sl.sl-styrt .sl-panel-2 {
  --sl-lx: 55%;                         /* the cross, on the old roof boards right of the vent */
  --sl-ly: 45%;
  transform: translate3d(0, calc(100% + var(--sl-vent)), 0);
  box-shadow: 0 -24px 48px -18px var(--sl-skygge-farge);
}

html.js-anim .sl.sl-styrt .sl-laser {
  position: absolute;
  display: block;
  background: var(--furu);
  box-shadow: 0 0 5px 1px var(--furu-glod), 0 0 16px 2px var(--furu-ring);
  pointer-events: none;
  will-change: transform;
}

/* the lines stay on the roof: level from the vent to the right edge, plumb from the far edge of the roof down the
   boards; both stay inside the frame on a phone, which cuts the photograph's sides */
html.js-anim .sl.sl-styrt .sl-laser-h {
  left: 43%;
  right: 0;
  top: var(--sl-ly);
  height: 2px;
  margin-top: -1px;
  transform: scaleX(0);
  transform-origin: calc((var(--sl-lx) - 43%) / 0.57) 50%;
}

html.js-anim .sl.sl-styrt .sl-laser-v {
  top: 32%;
  bottom: 12%;
  left: var(--sl-lx);
  width: 2px;
  margin-left: -1px;
  transform: scaleY(0);
  transform-origin: 50% calc((var(--sl-ly) - 32%) / 0.56);
}

html.js-anim .sl.sl-styrt .sl-laser-punkt {
  position: absolute;
  top: var(--sl-ly);
  left: var(--sl-lx);
  display: block;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--furu);
  box-shadow: 0 0 0 5px var(--furu-ring), 0 0 16px 5px var(--furu-glod);
  opacity: 0;
  will-change: transform, opacity;
}

/* a measuring line: the line draws itself, the end marks show as it reaches them; no numbers */
html.js-anim .sl.sl-styrt .sl-mal {
  position: absolute;
  display: block;
  pointer-events: none;
}

html.js-anim .sl.sl-styrt .sl-mal i,
html.js-anim .sl.sl-styrt .sl-mal b {
  position: absolute;
  display: block;
  background: var(--tekst-lys);
  box-shadow: 0 0 3px var(--skygge);
}

html.js-anim .sl.sl-styrt .sl-mal b {
  opacity: 0;
}

/* across the roof, near the eaves */
html.js-anim .sl.sl-styrt .sl-mal-bredde {
  left: 22%;
  right: 18%;
  top: 77%;
  height: 14px;
}

html.js-anim .sl.sl-styrt .sl-mal-bredde i {
  left: 0;
  right: 0;
  top: 6px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

html.js-anim .sl.sl-styrt .sl-mal-bredde b {
  top: 0;
  width: 2px;
  height: 14px;
}

html.js-anim .sl.sl-styrt .sl-mal-bredde b:last-child {
  right: 0;
}

/* up the face of the old chimney, from the roof to its top */
html.js-anim .sl.sl-styrt .sl-mal-hoyde {
  left: 11%;
  top: 31%;
  bottom: 33%;
  width: 14px;
}

html.js-anim .sl.sl-styrt .sl-mal-hoyde i {
  top: 0;
  bottom: 0;
  left: 6px;
  width: 2px;
  transform: scaleY(0);
  transform-origin: 50% 100%;
  will-change: transform;
}

html.js-anim .sl.sl-styrt .sl-mal-hoyde b {
  left: 0;
  width: 14px;
  height: 2px;
}

html.js-anim .sl.sl-styrt .sl-mal-hoyde b:last-child {
  bottom: 0;
}

/* ---- 03 the quote ---- */
html.js-anim .sl.sl-styrt .sl-panel-3 {
  transform: translate3d(calc(100% + var(--sl-vent)), 0, 0);
  transform-origin: 0 100%;
  box-shadow: -24px 0 48px -18px var(--sl-skygge-farge);
}

html.js-anim .sl.sl-styrt .sl-q-belop i,
html.js-anim .sl.sl-styrt .sl-q-strek {
  transform: scaleX(0);
  will-change: transform;
}

/* ---- 04 the new roof rises over the old one, from the eaves up ---- */
html.js-anim .sl.sl-styrt .sl-panel-4 {
  background: none;
}

/* the job: he sits low and right in his photograph, so a narrow frame cuts from the left and a wide one from the top */
html.js-anim .sl.sl-styrt .sl-panel-jobb {
  --sl-px: 0.9;
  --sl-py: 0.85;
  background: none;
}

html.js-anim .sl.sl-styrt .sl-bordene {
  position: absolute;
  inset: 0;
  display: block;
}

html.js-anim .sl.sl-styrt .sl-bord {
  position: absolute;
  left: 0;
  top: calc(var(--k) * 100% / var(--sl-bord-n));
  width: 100%;
  height: calc(100% / var(--sl-bord-n));
  overflow: hidden;
  transform: translate3d(0, 101%, 0);
  will-change: transform;
}

html.js-anim .sl.sl-styrt .sl-bord-mot {
  position: absolute;
  inset: 0;
  transform: translate3d(0, -101%, 0);
  will-change: transform;
}

html.js-anim .sl.sl-styrt .sl-bord img {
  position: absolute;
  left: 0;
  top: calc(var(--k) * -100%);
  width: 100%;
  height: calc(var(--sl-bord-n) * 100%);
  max-width: none;
}

/* the leading edge of the new roof on its way up: a thin pine light */
html.js-anim .sl.sl-styrt .sl-bord-kant {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--furu);
  box-shadow: 0 0 8px 1px var(--furu-glod), 0 0 22px 3px var(--furu-ring);
  opacity: 0;
}

html.js-anim .sl.sl-styrt .sl-hel {
  opacity: 0;
}

/* ============================================================
   Stacked (phones, tablets, crowded wide screens): the counter and
   the line, the frame, and the active step's text under it. The
   steps lie in one cell and cross over; the script writes which one
   shows.
   ============================================================ */
html.js-anim .sl.sl-styrt .sl-flate {
  height: 100%;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "frem" "ramme" "liste";
  gap: 14px 0;
  align-items: stretch;
  padding: calc(var(--meny-h) + 12px) 0 var(--sl-bunn);
}

html.js-anim .sl.sl-styrt .sl-venstre {
  display: contents;
}

html.js-anim .sl.sl-styrt .sl-fremdrift {
  display: flex;
  grid-area: frem;
  align-items: center;
  gap: 14px;
}

.sl-teller {
  display: inline-flex;
  flex: none;
  align-items: baseline;
  gap: 0.4em;
  font-size: var(--liten);
  font-weight: var(--vekt-sterk);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.sl-teller-vindu {
  display: inline-block;
  height: 1.3em;
  overflow: hidden;
}

.sl-teller-rull {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.sl-teller-av {
  color: var(--tekst-2);
}

.sl-linje {
  position: relative;
  flex: 1 1 auto;
  height: 2px;
  overflow: hidden;
  background: var(--linje-mork);
}

.sl-linje-fyll {
  position: absolute;
  inset: 0;
  background: var(--furu);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

html.js-anim .sl.sl-styrt .sl-ramme {
  grid-area: ramme;
  height: 100%;
  min-height: 0;
}

html.js-anim .sl.sl-styrt .sl-liste {
  display: grid;
  grid-area: liste;
}

html.js-anim .sl.sl-styrt .sl-steg {
  display: block;
  grid-area: 1 / 1;
  will-change: transform, opacity;
}

html.js-anim .sl.sl-styrt .sl-steg + .sl-steg {
  opacity: 0;
}

html.js-anim .sl.sl-styrt .sl-nr,
html.js-anim .sl.sl-styrt .sl-led,
html.js-anim .sl.sl-styrt .sl-knapper {
  display: none;
}

html.js-anim .sl.sl-styrt .sl-steg h3 {
  padding-top: 0;
}

html.js-anim .sl.sl-styrt .sl-steg p {
  margin-top: 0.3em;
  color: var(--tekst);
}

/* stacked on a wide but short screen (sl-trang): the active step's text beside the frame, not under it */
@media (min-width: 900px) {
  html.js-anim .sl.sl-styrt .sl-flate {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "frem frem" "liste ramme";
    column-gap: clamp(28px, 4vw, 64px);
    padding-bottom: var(--sl-luft);
  }

  html.js-anim .sl.sl-styrt .sl-liste {
    align-self: center;
  }
}

/* ============================================================
   Pinned, wide screens: the list on the left, all of it readable,
   the frame on the right as high as the screen allows.
   ============================================================ */
@media (min-width: 1024px) and (min-height: 540px) {
  html.js-anim .sl.sl-styrt:not(.sl-trang) {
    --sl-modus: pinne;
    --sl-rad-gap: clamp(12px, 2.6svh, 28px);
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-flate {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "venstre ramme";
    column-gap: clamp(36px, 4.6vw, 84px);
    padding: calc(var(--meny-h) + var(--sl-luft)) 0 var(--sl-luft);
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-venstre {
    display: flex;
    grid-area: venstre;
    flex-direction: column;
    justify-content: center;
    gap: clamp(18px, 3.4svh, 36px);
    min-height: 0;
    overflow: hidden;
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-fremdrift {
    display: none;
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-liste {
    display: flex;
    flex: none;
    align-self: auto;
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-steg {
    display: grid;
    grid-area: auto;
    cursor: pointer;
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-steg + .sl-steg {
    opacity: 1;
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-nr {
    display: grid;
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-led {
    display: block;
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-led-fyll {
    display: block;
    transform: scaleY(0);
    will-change: transform;
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-nr-disk,
  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-nr-lys {
    opacity: 0;
    will-change: transform, opacity;
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-nr-mork {
    opacity: 1;
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-steg-tekst {
    will-change: opacity;
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-steg + .sl-steg .sl-steg-tekst {
    opacity: var(--sl-svak);
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-steg h3 {
    padding-top: calc((var(--sl-nr-b) - 1.15em) / 2);
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-knapper {
    display: flex;
  }

  html.js-anim .sl.sl-styrt.sl-uten-knapp:not(.sl-trang) .sl-knapper {
    display: none;
  }

  html.js-anim .sl.sl-styrt:not(.sl-trang) .sl-ramme {
    align-self: center;
    height: min(100%, 820px);
  }
}

/* the drawn papers are pictures: a click on the frame goes to the real form (js/slik.js) */
html.js-anim .sl.sl-styrt .sl-ramme {
  cursor: pointer;
}