/*
  Klassisk: färgpaletter och tillägg för foto och video, som originalet
  inte hade. Sigillet är rött i alla paletter, som lack.
  Skog är originalet.
*/
[data-palett="bordeaux"] { --gron: #4a1f2a; --gron-djup: #3a1720; }
[data-palett="marin"] { --gron: #1f2c40; --gron-djup: #172233; }
[data-palett="kol"] { --gron: #24221f; --gron-djup: #171614; }
[data-palett] .knapp:hover { background: var(--gron-djup); border-color: var(--gron-djup); }
[data-palett] .knapp-kontur:hover { background: var(--gron); color: var(--elfenben); }

.bra-punkt + .bra-punkt dt { margin-top: 1.2rem; }

.foto-ram {
  width: min(100%, 20rem);
  aspect-ratio: 4 / 5;
  margin: 0 auto;
  padding: .55rem;
  border: 1px solid var(--guld-linje);
  background: var(--elfenben);
}
.foto-ram .foto-bild { width: 100%; height: 100%; object-fit: cover; }
.film-ram {
  width: min(100%, 16rem);
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  padding: .55rem;
  border: 1px solid var(--guld-linje);
  background: var(--elfenben);
}
.film-video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--gron); }
.osa-skicka { border-radius: 2px; }
.och, .avslut-namn em, .kort-namn em { color: #93723a; }

/* Initialerna präglas i lacket med HTML, så att de följer kundens namn.
   Sigillets centrum ligger i (110, 104) av 220. */
.sigill-mono {
  position: absolute;
  left: 50%;
  top: 47.3%;
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: .04em;
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(var(--sigill, 104px) * .2);
  line-height: 1;
  color: #94313a;
  text-shadow: -1px -1px 0 rgba(246, 184, 175, .42), 1px 1.5px 1px rgba(62, 10, 16, .6);
  transform: translate(-50%, -50%);
  pointer-events: none;
  white-space: nowrap;
}
.sigill-mono em { font-size: .7em; }
.oppnas .sigill-mono, .oppnas-lugnt .sigill-mono { opacity: 0; transition: opacity .2s; }
.avslut-sigill-ram { position: relative; display: block; width: 104px; height: 104px; margin: 0 auto 1.4rem; --sigill: 104px; }
.avslut-sigill-ram .avslut-sigill { margin: 0; }

/* Programrutan, kuvertets underlag och datorns bakgrund följer paletten.
   Förut låg ett grönt lager med 90 % täckning över, så Bordeaux, Marin och
   Kol syntes knappt där (granskning 10/11). Mönstret är nu genomskinligt guld. */
.program {
  background: var(--gron) url("/mallar/gemensamt/monster-guld.svg") repeat;
  background-size: 56px 56px;
}
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .kuvert {
    background: var(--gron-djup) url("/mallar/gemensamt/monster-guld.svg") repeat;
    background-size: 56px 56px;
  }
}
@media (min-width: 700px) {
  body {
    background: var(--gron-djup) url("/mallar/gemensamt/monster-guld.svg") repeat;
    background-size: 56px 56px;
  }
}