/* Nordic MRO: «Slik jobber vi», S7 (07.11.2026). Sverre 06.11.2026: «gå også for noe nytt på slik jobber vi. bare funker ikke med masse random
   prosjektbilder. det virker mot sin hensikt når vi bruker de dårlig». No project photos: a model of a house on a dark table, path traced locally
   (production/kilde/slik7/modell.py), that assembles itself while you scroll, one stage for each step in the text, with small figures who do the work.
   The frames fade to exactly this section's ground, so the model has no box round it. Steps on the left, always all five (oversiktlig); the sentence of
   the step you are at stands in one place under the list, so nothing jumps. Without the motion (no script, reduced motion, a low screen) the steps stand
   as a plain list beside a still of the finished model. */

.slik { --flate: var(--grafitt); color: var(--tekst-lys); --fokus: var(--is); --aksent: var(--is); padding-bottom: 0; }
.sl-stasjon { position: relative; }
.sl-rad { display: grid; gap: clamp(2rem, 4vw, 4rem); padding-bottom: var(--seksjon-luft); }
.sl-venstre .seksjon-tittel { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.4rem); }

.sl-steg { display: grid; gap: 0.15rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.sl-steg li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.25rem 0.5rem; padding: 0.7rem 0; }
.sl-nr { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; color: var(--aksent); font-variant-numeric: tabular-nums; padding-top: 0.32rem; }
.sl-steg h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.sl-steg p { grid-column: 2; color: var(--tekst-lys-dempet); font-size: var(--str-tekst); line-height: 1.5; }

.sl-handling { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: clamp(1.25rem, 2.6vw, 1.75rem); }
.sl-tlf { font-size: 1.25rem; font-weight: 400; letter-spacing: -0.005em; font-variant-numeric: tabular-nums; color: var(--tekst-lys); text-decoration: none; white-space: nowrap; }
.sl-tlf:hover { color: var(--is); }

/* the model: a still of the finished house, and the film on top of it when the motion runs */
.sl-scene { position: relative; }
.sl-ferdig { display: block; width: 100%; height: auto; }
.sl-film { display: none; }
@media (min-width: 900px) {
  .sl-stasjon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; }
  .sl-scene { grid-column: 2; grid-row: 1; }
  .sl-rad { grid-column: 1; grid-row: 1; padding-bottom: var(--seksjon-luft); max-width: none; }
}

/* ---------- the motion (slik.js sets .sl-pinnet when the window is tall enough) ---------- */
html.js-anim .slik.sl-pinnet { padding-top: 0; }
html.js-anim .slik.sl-pinnet .sl-reise { height: calc(100svh * (1 + var(--sl-reise))); }
html.js-anim .slik.sl-pinnet .sl-stasjon { position: sticky; top: 0; height: 100svh; overflow: hidden; display: block; }
html.js-anim .slik.sl-pinnet .sl-film { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
html.js-anim .slik.sl-pinnet .sl-ferdig { visibility: hidden; }

/* steps not yet reached stand in the muted tone, not faded with opacity (contrast) */
html.js-anim .slik.sl-pinnet .sl-steg h3 { color: var(--tekst-lys-dempet); font-weight: 400; transition: color 0.3s var(--mykt); }
html.js-anim .slik.sl-pinnet .sl-steg li.aktiv h3 { color: var(--tekst-lys); font-weight: 500; }
html.js-anim .slik.sl-pinnet .sl-steg li .sl-nr { color: var(--tekst-lys-dempet); transition: color 0.3s var(--mykt); }
html.js-anim .slik.sl-pinnet .sl-steg li.aktiv .sl-nr { color: var(--is); }
html.js-anim .slik.sl-pinnet .sl-steg p { opacity: 0; transition: opacity 0.35s var(--mykt); }
html.js-anim .slik.sl-pinnet .sl-steg li.aktiv p { opacity: 1; }

/* a landscape window: the model fills the right of the scene from top to bottom, the text stands on the left */
@media (min-width: 900px) {
  html.js-anim .slik.sl-pinnet .sl-scene { position: absolute; top: 0; bottom: 0; right: 0; width: min(68%, 128svh); }
  html.js-anim .slik.sl-pinnet .sl-rad {
    position: relative; z-index: 2; display: flex; align-items: center; height: 100%;
    padding-top: var(--meny-h); padding-bottom: 0;
  }
  html.js-anim .slik.sl-pinnet .sl-venstre { width: min(31rem, 38%); }
  /* the sentence stands in one place under the list, so the list never moves */
  html.js-anim .slik.sl-pinnet .sl-steg { --sl-setning: 6rem; position: relative; gap: 0; padding-bottom: var(--sl-setning); }
  html.js-anim .slik.sl-pinnet .sl-steg li { padding: 0.42rem 0; }
  html.js-anim .slik.sl-pinnet .sl-steg li { position: static; }
  html.js-anim .slik.sl-pinnet .sl-steg p { grid-column: auto; position: absolute; left: 2.9rem; width: calc(100% - 2.9rem); bottom: 0; height: calc(var(--sl-setning) - 0.7rem); pointer-events: none; }
  html.js-anim .slik.sl-pinnet .sl-steg li.aktiv p { pointer-events: auto; color: var(--tekst-lys); }
}
@media (min-width: 900px) and (max-height: 760px) {
  html.js-anim .slik.sl-pinnet .sl-venstre .seksjon-tittel { font-size: clamp(1.7rem, 1rem + 2vw, 2.4rem); }
  html.js-anim .slik.sl-pinnet .sl-venstre .merke-linje { margin-bottom: 0.6rem; }
  html.js-anim .slik.sl-pinnet .sl-steg { margin-top: 0.9rem; }
  html.js-anim .slik.sl-pinnet .sl-steg li { padding: 0.3rem 0; }
  html.js-anim .slik.sl-pinnet .sl-steg h3 { font-size: 1.125rem; }
  html.js-anim .slik.sl-pinnet .sl-handling { margin-top: 0.6rem; }
}

/* a narrow screen: the model on top, the heading and only the step you are at under it */
@media (max-width: 899px) {
  html.js-anim .slik.sl-pinnet .sl-stasjon { display: flex; flex-direction: column; padding-top: var(--meny-h); }
  html.js-anim .slik.sl-pinnet .sl-scene { order: 1; flex: none; height: min(46svh, 96vw); }
  html.js-anim .slik.sl-pinnet .sl-ferdig { display: none; }
  html.js-anim .slik.sl-pinnet .sl-rad { order: 2; display: block; padding-top: 0.25rem; padding-bottom: 0; }
  html.js-anim .slik.sl-pinnet .sl-venstre .merke-linje { margin-bottom: 0.4rem; }
  html.js-anim .slik.sl-pinnet .sl-venstre .seksjon-tittel { font-size: clamp(1.45rem, 6.4vw, 2rem); }
  /* the steps lie on top of each other in one grid cell, so the height never changes */
  html.js-anim .slik.sl-pinnet .sl-steg { margin-top: 0.75rem; }
  html.js-anim .slik.sl-pinnet .sl-steg li { grid-area: 1 / 1; align-content: start; padding: 0; opacity: 0; transition: opacity 0.3s var(--mykt); pointer-events: none; }
  html.js-anim .slik.sl-pinnet .sl-steg li.aktiv { opacity: 1; pointer-events: auto; }
  html.js-anim .slik.sl-pinnet .sl-steg p { color: var(--tekst-lys); }
  html.js-anim .slik.sl-pinnet .sl-handling { margin-top: 0.9rem; }
}
@media (max-width: 899px) and (max-height: 700px) {
  html.js-anim .slik.sl-pinnet .sl-scene { height: min(36svh, 84vw); }
  html.js-anim .slik.sl-pinnet .sl-venstre .seksjon-tittel { font-size: 1.35rem; }
}

/* a phone: thumb-sized phone number */
@media (max-width: 767px) {
  .sl-tlf { display: inline-flex; align-items: center; min-height: 44px; }
}