/* Almgrens Begravningsbyrå · Karlskrona
   A2 editorial-spine. Smörgul skiffer. Gloock + Figtree.
   Ingen kortyta någonstans, bara hårfina linjer. */

:root {
  --bas:        #faf6ec;
  --yta:        #f0e9d8;
  --skiffer:    #3f4a52;   /* 8,4:1 mot bas, 7,5:1 mot yta. Klarar text. */
  --black:      #26292c;   /* 13,5:1 mot bas */
  --dampad:     #5a6169;   /* 5,8:1 mot bas, 5,2:1 mot yta */
  --pa-morkt:   #d8d3c6;   /* 6,1:1 mot skiffer */
  --linje:      rgba(63, 74, 82, .26);
  --linje-mork: rgba(63, 74, 82, .5);
  --linje-ljus: rgba(250, 246, 236, .26);

  --marg: 0rem;
  --inskjut: 1.25rem;
  --serif: "Gloock", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bas);
  color: var(--black);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  overflow-wrap: break-word;
}

body.meny-oppen,
body.modal-oppen { overflow: hidden; }

img { max-width: 100%; display: block; }

p { margin: 0 0 1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Avstavning bara på små skärmar, där de långa svenska orden annars
   river upp högerkanten. Över 760 px är radlängden nog. */
@media (max-width: 759px) {
  /* hyphens: auto ar forbjudet: avstavningen styrs av enhetens ordlistor
   och gar inte att testa i headless. Se qa-site punkt 12. */
  p, li, dd { overflow-wrap: break-word; }
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0;
  letter-spacing: -.005em;
  text-wrap: balance;
}

a { color: inherit; }

.omslag {
  width: min(1180px, 100% - 2.5rem);
  margin-inline: auto;
}

.hoppa {
  position: absolute;
  left: 0;
  top: -120px;
  background: var(--skiffer);
  color: var(--bas);
  padding: .85rem 1.25rem;
  z-index: 60;
  text-decoration: none;
}
.hoppa:focus { top: 0; }

:focus-visible {
  outline: 2px solid var(--skiffer);
  outline-offset: 3px;
}

.etikett {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--skiffer);
  margin: 0 0 .9rem;
  line-height: 1.5;
}
.etikett--tyst { color: var(--dampad); }

/* ---------- Sidhuvud ---------- */

.topp {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bas);
  border-bottom: 1px solid var(--linje);
}

.topp__inre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
}

.marke {
  text-decoration: none;
  display: block;
  padding: .5rem 0;
}
.marke__namn {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.1;
}
.marke__under {
  display: block;
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--dampad);
  margin-top: .2rem;
}

.hamburgare {
  width: 46px;
  height: 46px;
  border: 1px solid var(--linje);
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 0;
}
.hamburgare span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--skiffer);
  transition: transform .25s ease, opacity .2s ease;
}
.meny-oppen .hamburgare span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.meny-oppen .hamburgare span:nth-child(2) { opacity: 0; }
.meny-oppen .hamburgare span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.meny ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.meny a {
  text-decoration: none;
  color: var(--black);
}

@media (max-width: 899px) {
  .meny {
    display: none;
    position: fixed;
    inset: 68px 0 0;
    background: var(--bas);
    border-top: 1px solid var(--linje);
    overflow-y: auto;
    padding: 1rem 0 2.5rem;
  }
  .meny-oppen .meny { display: block; }
  .meny ul { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }
  .meny li { border-bottom: 1px solid var(--linje); }
  .meny li a {
    display: flex;
    align-items: center;
    min-height: 56px;
    font-family: var(--serif);
    font-size: 1.35rem;
  }
  .meny__tel {
    display: flex;
    align-items: center;
    min-height: 56px;
    width: min(1180px, 100% - 2.5rem);
    margin: 1.25rem auto 0;
    text-decoration: none;
    font-size: 1.1rem;
    color: var(--skiffer);
    font-weight: 500;
  }
}

@media (min-width: 900px) {
  .hamburgare { display: none; }
  .meny {
    display: flex;
    align-items: center;
    gap: 1.75rem;
  }
  .meny ul {
    display: flex;
    gap: 1.5rem;
  }
  .meny li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: .93rem;
    border-bottom: 1px solid transparent;
  }
  .meny li a:hover { border-bottom-color: var(--linje-mork); }
  .meny__tel {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 .95rem;
    border: 1px solid var(--linje-mork);
    text-decoration: none;
    font-weight: 500;
    color: var(--skiffer);
    white-space: nowrap;
  }
  .meny__tel:hover { background: var(--yta); }
}

/* ---------- Hero: tre band ---------- */

.band__inre { padding-block: clamp(1.5rem, 4vw, 2.5rem); }

.band--ett {
  background: var(--bas);
  border-bottom: 1px solid var(--linje);
}
.band--ett .band__inre {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .45rem 2rem;
  padding-block: 1.35rem;
}
.band--ett .etikett { margin: 0; }

/* Skärgårdsstranden ligger under skiffern som multiply, inte under en vanlig
   platta. Fotot är högt i ton, ljusaste pixel i filen är rgb(252,255,255), och
   en genomskinlig platta ovanpå det drog ingressens kontrast ned mot 4,7:1.
   Multiply kan aldrig ge ett ljusare resultat än skiffern själv, så bandet
   ligger kvar på originalets 8,4:1 för rubriken och 6,1:1 för ingressen hur
   ljust fotot än är. Plattan på .45 håller bara tillbaka mörkret så bandet
   fortsätter läsa som skiffer och inte som petrolblått.
   Mätt på renderad sida med all text dold, se bildprompts.md. Kontrastgrinden
   i qa-gates.mjs hoppar över allt som ligger på en bakgrundsbild och säger
   ingenting alls här, så byter du blandläget måste du mäta om själv. */
.band--tva {
  position: relative;
  overflow: hidden;
  background-color: var(--skiffer);
  background-image:
    linear-gradient(rgba(63, 74, 82, .45), rgba(63, 74, 82, .45)),
    url("./img/01.webp");
  background-size: auto, cover;
  background-position: center, center 30%;
  background-repeat: no-repeat;
  background-blend-mode: normal, multiply;
  color: var(--bas);
}
.band--tva::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(250, 246, 236, .045) 0 1px,
    transparent 1px 17px
  );
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 45%, transparent);
  pointer-events: none;
}
.band--tva .band__inre {
  position: relative;
  padding-block: clamp(3rem, 9vw, 6.5rem);
}

h1 {
  font-size: clamp(2.15rem, 5.9vw, 4.35rem);
  line-height: 1.07;
  max-width: 20ch;
  color: var(--bas);
}

.ingress {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  max-width: 52ch;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--pa-morkt);
}

.band--tre {
  background: var(--yta);
  border-top: 1px solid var(--linje);
  border-bottom: 1px solid var(--linje);
}
.band--tre .band__inre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .75rem 2.5rem;
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
}

.tel-stor {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  line-height: 1.15;
  text-decoration: none;
  color: var(--skiffer);
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}
.tel-stor:hover { border-bottom-color: var(--linje-mork); }
.tel-stor--mork { color: var(--black); }

.band__hoger {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.band__bi {
  margin: 0;
  color: var(--dampad);
  max-width: 36ch;
}
.band__lank {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--skiffer);
  font-weight: 500;
}

/* ---------- Jour-rad ---------- */

.jour {
  background: var(--bas);
  border-bottom: 1px solid var(--linje);
}
.jour__inre { padding-block: 1.5rem; }
.jour .etikett { margin-bottom: .5rem; }
.jour__text {
  margin: 0 0 .6rem;
  max-width: 58ch;
  color: var(--black);
}
.jour__tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
  color: var(--skiffer);
  text-decoration: none;
  border-bottom: 1px solid var(--linje-mork);
}

@media (min-width: 900px) {
  .jour__inre {
    display: grid;
    grid-template-columns: 12rem 1fr auto;
    align-items: center;
    gap: 2rem;
    padding-block: 1.35rem;
  }
  .jour .etikett,
  .jour__text { margin: 0; }
  .jour__text { border-left: 1px solid var(--linje); padding-left: 2rem; }
}

/* ---------- Sektionsryggrad ---------- */

.sektion { padding-block: clamp(3.25rem, 8vw, 6rem); }
.sektion + .sektion { border-top: 1px solid var(--linje); }

.rutnat { position: relative; }

.rutnat::before {
  content: "";
  position: absolute;
  left: var(--marg);
  top: 0;
  bottom: 0;
  width: 1px;
  margin-left: -1px;
  background: var(--linje);
}
.sektion--egen-rygg .rutnat::before { display: none; }

.rutnat__spalt { padding-left: var(--inskjut); }

/* Signatursektionen ritar sin egen ryggrad, dess spalt får inget indrag */
.sektion--egen-rygg .rutnat__spalt { padding-left: 0; }

.kantord {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--dampad);
  margin: 0 0 1.25rem;
  padding-left: var(--inskjut);
}

.sektion h2 {
  font-size: clamp(1.85rem, 4vw, 2.9rem);
  line-height: 1.12;
  max-width: 18ch;
  margin-bottom: 1.1rem;
}

.ledtext {
  max-width: 58ch;
  color: var(--dampad);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.notis {
  max-width: 62ch;
  color: var(--dampad);
  font-size: .96rem;
  margin-top: 1.75rem;
}

@media (min-width: 760px) {
  :root { --marg: 7rem; --inskjut: 2rem; }
  .rutnat {
    display: grid;
    grid-template-columns: var(--marg) 1fr;
  }
  .kantord {
    text-align: right;
    padding-left: 0;
    padding-right: 1.5rem;
    margin: .45rem 0 0;
    align-self: start;
  }
}

@media (min-width: 1000px) {
  :root { --marg: 10rem; --inskjut: 2.75rem; }
  .kantord { position: sticky; top: 6rem; }
}

/* ---------- SIGNATUR: de första dygnen ---------- */
/* Ryggraden är solid högst upp, blir streckad, blir prickad och slutar
   innan sidan gör det. Inga nummer, inga noder, ingen trappa. */

.dygn__topp,
.dygn__post {
  position: relative;
  padding-left: var(--inskjut);
  padding-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

.dygn__topp::before,
.dygn__post::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--skiffer);
}

.dygn__topp { padding-bottom: clamp(2rem, 3.5vw, 2.75rem); }

.tid {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--skiffer);
  margin: 0 0 .45rem;
  line-height: 1.5;
}

.dygn__post h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.7rem);
  line-height: 1.25;
  max-width: 30ch;
  margin-bottom: .7rem;
}
.dygn__post p { max-width: 58ch; }

.dygn__slut {
  max-width: 58ch;
  color: var(--dampad);
  padding-left: var(--inskjut);
  margin-top: .5rem;
}

/* Linjen släpper taget */
.s1::before { opacity: 1; }
.s2::before { opacity: .92; }
.s3::before {
  width: 1px;
  opacity: .8;
}
.s4::before {
  width: 1px;
  opacity: .78;
  background: repeating-linear-gradient(to bottom, var(--skiffer) 0 9px, transparent 9px 15px);
}
.s5::before {
  width: 1px;
  opacity: .68;
  background: repeating-linear-gradient(to bottom, var(--skiffer) 0 5px, transparent 5px 16px);
}
.s6::before {
  width: 1px;
  opacity: .55;
  background: repeating-linear-gradient(to bottom, var(--skiffer) 0 2px, transparent 2px 13px);
}
.s7::before {
  width: 1px;
  opacity: .38;
  bottom: auto;
  height: 40%;
  background: repeating-linear-gradient(to bottom, var(--skiffer) 0 2px, transparent 2px 19px);
}

@media (min-width: 760px) {
  /* Signatursektionen har inget yttre rutnät. Kantordet hängs i marginalen
     och varje post bygger sin egen tvåspaltiga rad, så att ryggraden hamnar
     på exakt samma x som sidans övriga hårlinje. */
  .sektion--egen-rygg .rutnat { display: block; }
  .sektion--egen-rygg .kantord {
    position: absolute;
    left: 0;
    top: .5rem;
    width: var(--marg);
    padding-right: 1.5rem;
    text-align: right;
    margin: 0;
  }

  .dygn__post {
    display: grid;
    grid-template-columns: var(--marg) 1fr;
    padding-left: 0;
  }
  .dygn__topp { padding-left: 0; }
  .dygn__topp::before,
  .dygn__post::before { left: var(--marg); }
  .dygn__text {
    grid-column: 2;
    padding-left: var(--inskjut);
  }
  .dygn__toppinre {
    margin-left: var(--marg);
    padding-left: var(--inskjut);
  }
  .tid {
    grid-column: 1;
    grid-row: 1;
    text-align: right;
    padding-right: 1.5rem;
    margin: .35rem 0 0;
  }
  .dygn__slut {
    margin-left: var(--marg);
    padding-left: var(--inskjut);
  }
}

/* ---------- Det vi hjälper till med ---------- */

.lista { border-top: 1px solid var(--linje); }

.rad {
  border-bottom: 1px solid var(--linje);
  padding-block: 1.5rem;
}
.rad h3 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.3;
  margin-bottom: .5rem;
}
.rad p { max-width: 56ch; color: var(--black); }

@media (min-width: 900px) {
  .rad {
    display: grid;
    grid-template-columns: 17rem 1fr;
    gap: 2rem;
    align-items: start;
  }
  .rad h3 { margin-bottom: 0; }
}

/* ---------- Prislista ---------- */

.pris {
  border-bottom: 1px solid var(--linje);
  padding-block: 1.65rem;
}
.pris__topp {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .35rem 1.5rem;
  margin-bottom: .65rem;
}
.pris h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.25;
}
.pris__tal {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.2;
  color: var(--skiffer);
  white-space: nowrap;
}
.pris p:not(.pris__tal) { max-width: 60ch; }

/* ---------- Ceremoni ---------- */

.tvadelad { border-top: 1px solid var(--linje); }
.del {
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--linje);
}
.del p:not(.etikett) { max-width: 52ch; }

/* Tomt kapell under de två spalterna. Ramen är 16:7 mot ett foto i 16:9 och
   beskär alltså underkanten: den genererade bilden har en liten artefakt på
   bänkgaveln längst ned till höger som annars syns vid inzoomning. Kommer en
   ren bild in kan aspect-ratio och object-position tas bort. */
.kapell {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: center top;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

@media (min-width: 860px) {
  .tvadelad {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--linje);
  }
  .del { border-bottom: 0; padding-right: 2.5rem; }
  .del + .del {
    border-left: 1px solid var(--linje);
    padding-left: 2.5rem;
    padding-right: 0;
  }
}

/* ---------- Frågor ---------- */

.lista--fragor { border-top: 1px solid var(--linje); }

.fraga { border-bottom: 1px solid var(--linje); }
.fraga summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 56px;
  padding-block: 1rem;
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1.9vw, 1.32rem);
  line-height: 1.35;
  text-wrap: balance;
}
.fraga summary::-webkit-details-marker { display: none; }
.fraga summary::after {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--skiffer), var(--skiffer)) center/14px 1.5px no-repeat,
    linear-gradient(var(--skiffer), var(--skiffer)) center/1.5px 14px no-repeat;
  transition: transform .25s ease;
}
.fraga[open] summary::after {
  background: linear-gradient(var(--skiffer), var(--skiffer)) center/14px 1.5px no-repeat;
  transform: rotate(180deg);
}
.fraga__svar {
  padding: 0 0 1.35rem;
  max-width: 60ch;
  color: var(--dampad);
}

/* ---------- Kontakt ---------- */

.kontakt { border-top: 1px solid var(--linje); padding-top: 1.75rem; }

.kontakt__fakta { margin-bottom: 2.5rem; }
.kontakt__rad {
  max-width: 46ch;
  color: var(--dampad);
  margin: .6rem 0 0;
}
.kontakt__mejl {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: .35rem;
  color: var(--skiffer);
  font-weight: 500;
}

/* Porträttet levererades som helfigur i 4:5, inte som den tighta bröstbild
   i 2:3 som beställdes. En 5:4-ram med beskärning uppifrån ger ett ansikte
   som går att läsa i stället för ett huvud på 40 px. Byts bilden mot ett
   tight beskuret porträtt ska aspect-ratio och object-position bort igen. */
.portratt {
  width: min(380px, 100%);
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: center top;
  margin-top: 1.75rem;
}

.kontakt__form label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--skiffer);
  margin: 1.1rem 0 .4rem;
}
.kontakt__form input,
.kontakt__form textarea {
  width: 100%;
  min-height: 48px;
  padding: .75rem .9rem;
  border: 1px solid var(--linje-mork);
  background: var(--bas);
  color: var(--black);
  font: inherit;
  font-size: 1rem;
  border-radius: 0;
}
.kontakt__form textarea { min-height: 96px; resize: vertical; }
.kontakt__form input:focus-visible,
.kontakt__form textarea:focus-visible { outline-offset: 1px; }

.knapp {
  margin-top: 1.4rem;
  min-height: 50px;
  padding: .8rem 1.6rem;
  border: 1px solid var(--skiffer);
  background: var(--skiffer);
  color: var(--bas);
  font: inherit;
  font-weight: 500;
  letter-spacing: .02em;
  cursor: pointer;
  border-radius: 0;
}
.knapp:hover { background: var(--black); border-color: var(--black); }
.knapp--liten { margin-top: 1.25rem; }

.formnotis {
  margin: .9rem 0 0;
  font-size: .9rem;
  color: var(--dampad);
  max-width: 42ch;
}

@media (min-width: 900px) {
  .kontakt {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
  .kontakt__fakta { margin-bottom: 0; }
  .kontakt__form {
    border-left: 1px solid var(--linje);
    padding-left: 3rem;
  }
}

/* ---------- Kyrkogården före sidfoten ---------- */

.avslut { border-top: 1px solid var(--linje); }
.avslut img {
  width: 100%;
  height: auto;
  aspect-ratio: 1400 / 599;
  max-height: clamp(200px, 28vw, 400px);
  object-fit: cover;
  object-position: center 62%;
}

/* ---------- Sidfot ---------- */

.fot {
  background: var(--yta);
  border-top: 1px solid var(--linje);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  font-size: .95rem;
  color: var(--dampad);
}
.fot__inre {
  display: grid;
  gap: 1.75rem;
}
.fot__block p { margin: 0 0 .25rem; }
.fot__block a {
  color: var(--skiffer);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.fot__namn {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--black);
  margin-bottom: .4rem;
}
.fot__demo {
  font-size: .8rem;
  color: var(--dampad);
  border-top: 1px solid var(--linje);
  padding-top: 1.25rem;
  margin: 0;
}

@media (min-width: 760px) {
  .fot__inre { grid-template-columns: repeat(3, 1fr); }
  .fot__demo { grid-column: 1 / -1; }
}

/* ---------- Modal ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.modal[hidden] { display: none; }
.modal__bak {
  position: absolute;
  inset: 0;
  background: rgba(38, 41, 44, .55);
}
.modal__ruta {
  position: relative;
  background: var(--bas);
  border: 1px solid var(--skiffer);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  max-width: 30rem;
  width: 100%;
}
.modal__ruta h2 {
  font-size: 1.6rem;
  margin-bottom: .75rem;
}
.modal__ruta p { color: var(--dampad); margin: 0; }

/* ---------- Scroll-reveals ---------- */

.js .rev {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
}
.js .rev.inne { opacity: 1; transform: none; }

.js .dygn__topp::before,
.js .dygn__post::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .7s ease;
}
.js .dygn__topp.inne::before,
.js .dygn__post.inne::before { transform: scaleY(1); }

.js .dygn__topp > *,
.js .dygn__post > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s ease, transform .55s ease;
}
.js .dygn__topp.inne > *,
.js .dygn__post.inne > * { opacity: 1; transform: none; }
.js .dygn__post.inne > *:nth-child(2) { transition-delay: .13s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rev,
  .js .dygn__topp > *,
  .js .dygn__post > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js .dygn__topp::before,
  .js .dygn__post::before {
    transform: none;
    transition: none;
  }
  .hamburgare span,
  .fraga summary::after { transition: none; }
}